/* The flex centring that used to live here moved to #root in Spa/styles/app.css, and must not come back.
   root.Master gave <body> exactly one child, so centring the body centred the page. The single-page
   application gives it two - #root and the container Mantine portals its modals, drawers and overlays into -
   and a flex body lays those out side by side. Mantine's modal sets top/bottom/width but no left, so left
   resolved to that static position and every popup rendered off the right-hand edge of the window. */
/* LEFT ALONE ON PURPOSE, all three declarations, and each for its own reason.

   `height: 100%` looks like dead weight on a single-page application and is the opposite. Spa/styles/shell.css
   restates `height: auto; min-height: 100%` under body.landing SPECIFICALLY to undo this, and its header
   records what happened before that existed: a capped, scrollable <body> swallowed the overflow, <html> had
   nothing left to scroll, and /new-user/ at 390x844 was 960px tall with a maximum scrollTop of 0 - the page
   was taller than the window and refused to move, leaving Submit unreachable. Removing this line means
   removing that one too, and the pair has to be reasoned about together.

   `background-color` is already inert in practice: Mantine's `body,:host { background-color: ... }` is the
   same specificity and loads later, so <body> is Mantine's colour. This still paints <html>, which .main-bg
   covers entirely. It costs nothing and touching it invites a full-bleed background bug for no gain.

   `margin: 0` is the ordinary reset and nothing else supplies it - Content/Reboot.css deliberately does not,
   because this rule already did. */
body, html {
  height: 100%;
  margin: 0;
  background-color: #f5f5f5;
}

/* Also left alone. Spa/styles/shell.css:77-79 notes that body.landing outranks this bare `body` selector and
   restates overflow-y for exactly that reason, so removing this would change which of two rules governs
   scrolling on the signed-out screens below 1068px - a phone-only scrolling change, which is the class of bug
   the shell work spent the most effort eliminating. */
@media (max-width: 1068px) {
  body {
    overflow-y: scroll;
  }
}

/* Josefin Sans by name until the Synclaria palette landed; now the token, so the body face is set in one
   place (Spa/styles/tokens.css) instead of here.

   THE !important IS GONE, and what it was defending is worth writing down rather than deleting. It was here
   to beat Mantine's theme font, on the reasoning that removing it would let component styles win on some
   screens and not others. That was true when the two faces differed. They do not: Spa/theme.ts:41 sets
   fontFamily to "'Josefin Sans', 'Segoe UI', Tahoma, Geneva, sans-serif" and Spa/styles/tokens.css:60 sets
   --fnt-family-primary to the byte-identical list, deliberately and with a comment saying so. So the tie the
   flag was winning is now a tie between two spellings of the same value, and what the flag actually does is
   stop a Mantine component from ever choosing its own face on purpose.

   If those two lists are ever allowed to diverge, this is the rule that decides which one paints body text -
   so change them together or not at all. */
body, small {
  font-family: var(--fnt-family-primary);
}

/* DevExpress wrapped every caption and button label in a <span>, so this rule existed to give those the
   body face. Nothing renders that markup any more, and naming a face here means a <span> inside a Mantine
   component ignores that component's own typography. Inheriting gets the same result on legacy markup -
   body is the body face - without overriding anything deliberate. */
span {
  font-family: inherit;
  font-weight: initial;
}

small {
  font-size: 1.02em;
}

hr {
  background: #808080;
  opacity: 0.8;
  margin: auto;
  display: block;
}

h1 {
  font-family: var(--fnt-family-header) !important;
  letter-spacing: 3px;
  font-size: calc(42pt - 1vw);
}

h2 {
  font-family: var(--fnt-family-header);
}

/* Right Panel */
.right-panel {
  border-left: 1px solid #f0f0f0;
}

.settings-content {
  padding: 24px 20px;
}

  .settings-content h2 {
    color: #494949;
    font-size: 1.3em;
    font-weight: 600;
  }

  .settings-content p {
    color: #999999;
  }

.left-panel.expand-bar,
.right-panel.expand-bar {
  border: 0;
}

/*Wrappers around specific css rules*/
.wrapper-position-relative {
  position: relative;
}

.wrapper-position-absolute {
  position: absolute;
}

.wrapper-margin-bottom-10 {
  margin-bottom: 10px;
}

.bt-container-emphasis {
  background-color: var(--bg-secondary) !important;
}

.bt-nav {
  background-color: var(--bg-nav-primary) !important;
  padding: 10px 5px;
}

.nav {
  background-color: var(--bg-nav-primary) !important;
}

.nav-item-parent {
  padding: 10px 15px !important;
  font-size: calc(2.3vw - 70%);
  font-family: 'Josefin Sans' !important;
  width: calc(100% - 35px);
}

  .nav-item-parent span {
    font-size: calc(2.4vw - 70%);
  }

  .nav-item-parent, .nav-item-parent > a {
    color: var(--fnt-primary) !important;
  }

.nav-item-sub {
  margin: 0 40px !important;
  padding: 0 15px !important;
  width: calc(100% - 150px) !important;
}

  .nav-item-sub span {
    font-size: calc(2vw - 70%) !important;
  }

.menu-expand-img {
  width: 0 !important;
  height: 0 !important;
}

.bt-nav-item, .bt-nav-item > a {
  padding: 7px 5px;
  font-size: calc(2.3vw - 70%);
  width: 94%;
  font-family: 'Josefin Sans' !important;
}

  .bt-nav-item span {
    font-size: calc(2.3vw - 70%);
  }

  .bt-nav-item, .bt-nav-item > a {
    color: var(--fnt-primary) !important;
  }

    .bt-nav-item a {
      float: left !important;
    }


    .bt-nav-item span {
      margin-left: 8px;
    }

.nav-item-filler {
  height: 33vh;
}

.nav-item-selected {
  background-color: var(--bg-nav-primary-selected) !important;
  border-radius: 12px;
}

.nav-item-hovered:not(.nav-item-selected) {
  background-color: var(--bg-nav-primary-hover) !important;
  border-radius: 12px;
}

/* .sign-out-link was here (`font-size: calc(1.2vw - 0.5vh)`). Dead: the class appears nowhere in Spa/,
   App.aspx or Reporting/. Sign Out is a plain .nav-link in Spa/layout/Navbar.tsx. */

.nav-footer-container {
  position: absolute;
  bottom: 2%;
  width: 93%;
}

.nav-footer-signout-container {
  width: fit-content;
  margin-top: 20px;
  padding: 10px 25px;
  cursor: pointer;
}

.nav-icon {
  width: 33px;
  height: 33px;
  margin-right: 10px !important;
}

.left-panel-header {
}

.left-panel-nav {
  height: 78%;
}

.left-panel-footer {
}

/* Avatar Card */
.zero-padding {
  padding: 0 !important;
  margin: auto;
}

.avatar-card-container {
  display: flex;
  padding: 20px 25px;
  width: 85%;
  align-items: center;
  border: 2px ridge var(--bg-secondary);
  border-radius: 20px;
  background: var(--btn-primary);
}

  .avatar-card-container:hover {
    background: var(--btn-primary-hover);
  }

.avatar-card-text-container {
  display: flex;
  position: relative;
  padding-left: 20px;
  align-items: center;
  flex-direction: column;
}

.avatar-card-screenname {
  font-size: 1.7vw;
  font-family: 'Shadows Into Light';
  color: var(--fnt-primary);
  letter-spacing: 3px;
}

.subcaption-hyperlink {
  font-size: 9pt;
  display: block;
  align-self: flex-start;
  line-height: initial !important;
}

@media (max-width: 1200px) {
  .avatar-card-screenname, .subcaption-hyperlink {
    display: none;
  }
}

.img-avatar {
  border-radius: 90px;
  border: 1px solid var(--bg-primary);
  padding: 1px;
  vertical-align: middle;
}

/*ScrollBar*/
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--bg-nav-primary);
  border-radius: 10px;
}

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }


/* Content */
.content {
  position: relative;
  height: 86vh;
}

@media (max-width: 1068px) {
}

.content-header-img {
  left: 40px;
  height: 120px;
  width: 120px;
  position: relative;
  top: 23px;
}

.content-header-title {
  left: 30px;
  top: -25px;
  display: inline-block;
  position: relative;
}

.content-header {
  height: 13vh;
  width: calc(100% + 16px);
  top: -8px;
  left: -8px;
  position: relative;
}

.main-content-container {
  padding: 10px 60px;
}

.centered-content {
  margin: auto;
  display: block;
  min-width: 400px;
  max-width: 80vw;
  width: fit-content;
  position: relative;
}

.centered-element {
  margin: auto;
  display: block !important;
}

.centered-children > div {
  margin-inline: auto;
  display: block !important;
}

.content-section {
  position: relative;
  border-radius: 20px;
  height: fit-content;
  padding: 30px;
  border: 1px solid black;
  margin-bottom: 10px;
  background: var(--bg-content-section);
}

.content-section-padded-children > * {
  margin: 10px;
}

@media (max-width: 1068px) {
  .main-content-container {
    padding: 3vh 1vw;
  }

  .content-section {
    width: 95%;
  }

  .centered-content {
    min-width: 45vw;
  }
}

.content-section-contrast {
  background-color: var(--bg-content-section);
  border: 1px solid #b4b4b4;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

/*
Adjusts centered content making min-width larger when max-width is 450px. Also
reduces the width of the Office365 button to 90px.
*/
@media (max-width: 450px) {
  .centered-content {
    min-width: 95vw;
  }

  .dxbButton_Office365.dxbTSys {
    width: 90px;
  }
}

.content-section-contrast {
  background-color: var(--bg-content-section);
  border: 1px solid #b4b4b4;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}


.content-box-shadow {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
  --webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
}

.bg-primary {
  background-color: var(--bg-secondary);
}

.content-section-header {
  height: 15%;
  text-align:center;
}

.content-data-label {
  padding-top: 4px;
  font-size: calc(0.92em + 0.06vw);
}

  .content-data-label :first-child {
    font-family: var(--fnt-family-secondary);
    font-weight: 700;
  }

  .content-data-label :last-child {
    display: block;
    line-height: 20px;
  }


@media(max-width: 1360px) {
  .content-data-label {
    font-size: calc(0.72em + 0.06vw);
  }
}

.center {
  margin: auto;
  display: block;
}

.text-green {
  color: var(--green);
}



/*Grid*/

.grid-layout {
  width: 90%;
  display: grid;
  grid-gap: 10px;
  margin: auto;
  grid-template-columns: repeat(2, minmax(0, 280px));
}

.grid-layout-main {
  width: 100%;
  display: grid;
  grid-gap: 20px;
  margin: auto;
  grid-template-columns: repeat(3, minmax(0, 33%));
  grid-template-rows: repeat(5, minmax(1fr, 380px));
  overflow-y: scroll;
}

@media (max-width: 1200px) {
  .grid-layout {
    grid-template-columns: repeat(1, minmax(0, 95%));
    width: 97%;
  }

  .grid-layout-main {
    grid-template-columns: repeat(1, minmax(0, 95%));
    width: 97%;
  }

    .grid-layout > *, .grid-layout-main > * {
      grid-column: 1 !important;
    }

    .grid-layout-main :first-child {
      grid-row: 1 !important;
    }

  .grid-row-1 {
    grid-row: unset !important;
  }
}

.grid-rowspan-2 {
  grid-row: span 2;
}

.grid-colspan-3 {
  grid-column: span 3;
}

.grid-row-1 {
  grid-row: 1;
}

.grid-row-2 {
  grid-row: 2;
}

.grid-row-3 {
  grid-row: 3;
}

.grid-col-1 {
  grid-column: 1;
}

.grid-col-2 {
  grid-column: 2;
}

.grid-col-3 {
  grid-column: 3;
}

.grid-col-4 {
  grid-column: 4;
}

/*Text*/
emphasis {
  color: var(--txt-emphasis-primary) !important;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: var(--bg-nav-primary);
}

.disclaimer {
  color: var(--fnt-disclaimer) !important;
  font-size: 0.8em;
  font-style: italic;
  line-height: 1.1em;
}


/*Buttons*/
.button {
}


  .button span {
    font-family: Tahoma !important;
    color: var(--bg-primary);
  }

.button-primary {
  border-radius: 3px;
  background: rgb(var(--btn-primary));
  text-wrap: pretty;
  transition: none;
  border: 1px solid black;
  cursor: default;
}

  .button-primary span {
    font-family: Tahoma !important;
    color: var(--bg-primary);
    font-size: 1.2em;
  }

  .button-primary:not(.dxbDisabled_Office365):hover {
    background: linear-gradient(var(--btn-primary-hover));
  }

.button-primary-disabled {
  background: rgb(119, 122, 137) !important;
}

.button-larger {
  font-size: 1.2em;
  height: 5vh;
  width: 9vw !important;
  min-width: 140px;
}

@media (max-width: 450px) {
  .button-larger {
    font-size: 1.0em;
    height: 3vh;
    width: 9vw !important;
    min-width: 120px;
  }
}

@media (max-width: 400px) {
  .button-larger {
    font-size: 0.7em;
    height: 3vh;
    width: 9vw !important;
    min-width: 100px;
  }
}

.dashboard-button {
  background-color: var(--bg-primary);
  -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
  border-radius: 5px;
  position: relative;
  display: block !important;
  min-height: 80px;
}


  .dashboard-button::before {
    content: '';
    background-color: var(--bg-nav-primary);
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0px;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
    height: 100%;
    width: 28%;
    z-index: 1;
    -webkit-box-shadow: 0 1px 12px 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 12px 0 rgba(0,0,0,.3);
  }

  .dashboard-button:hover:after {
    background-color: var(--icon-selected);
  }

  .dashboard-button::after {
    content: '';
    background-color: var(--bg-primary);
    position: absolute;
    right: calc(14% - 22.5px);
    top: calc(50% - 22.5px);
    background-size: 45px 45px;
    height: 45px;
    width: 45px;
    z-index: 100;
    transition: 0.2s;
  }

  .dashboard-button:hover {
    -webkit-box-shadow: 0 1px 10px 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 10px 0 rgba(0,0,0,.3);
  }

  .dashboard-button span {
    font-size: 13pt;
    color: black;
    /*        width: fit-content;
        position: absolute;
        left: 10px;
        top: calc(50% - 0.5em);
        margin-inline: 20px;
        text-align: left;*/
  }

  .dashboard-button img {
    height: 70px;
    width: 70px;
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 35px);
  }

.dashboard-panel-item {
  margin-top: 10px;
  margin-left: 5px;
}

/*Icons*/
.icon-profile::after {
  background-image: url(Images/Icons/profile-inverted.png);
}

.icon-mfa::after {
  background-image: url(Images/Icons/mfa-settings-inverted.png);
}

.icon-change-password::after {
  background-image: url(Images/Icons/password2.png);
}

.icon-preferences::after {
  background-image: url(Images/Icons/preferences-inverted.png);
}

.icon-close-account::after {
  background-image: url(Images/Icons/close-account-inverted.png);
}

.icon-subscription::after {
  background-image: url(Images/Icons/subscription-inverted.png);
}

.icon-purchase::after {
  background-image: url(Images/Icons/purchase-inverted.png);
}

.icon-plus {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

  .icon-plus::after {
    content: '\FF0B';
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 25px;
    box-shadow: var(--container-box-shadow);
    --webkit-box-shadow: var(--container-box-shadow);
    background-color: var(--syn-green);
    color: var(--fnt-primary);
    text-align: center;
    vertical-align: middle;
    font-size: 15pt;
    font-weight: bold;
    line-height: calc(50% + 0.5em);
    padding: 1px;
    border: solid 1px #a1a1a1;
    transform-origin: 50% 100%;
  }


@keyframes Wiggle {
  0% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(2deg);
  }
}

.icon-plus:hover::after {
  background-color: var(--syn-green-deep);
  animation: Wiggle 0.2s ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

/* Forms */
.form-container {
  width: 25vw;
}

@media (max-width: 1068px) {
  .form-container {
    width: 100%;
  }
}

.form-text-box {
  border-radius: 6px;
  background-color: var(--bg-primary) !important;
  padding: 3px 8px;
  max-width: fit-content;
  min-width: 80px;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

.form-text-box-category {
  border-radius: 6px;
  background-color: var(--bg-primary) !important;
  padding: 3px 8px;
  max-width: 100%;
  min-width: 80px;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

  .form-text-box * {
    border-radius: 6px;
    background-color: var(--bg-primary) !important;
  }

.form-text-box-shorter {
  width: 60px;
}

.form-text-box-inline {
  display: inline-table;
}

.form-text-box-focused {
  border-color: var(--bg-nav-primary) !important;
}

.form-text-box-longer {
}

.form-text-box-caption {
  padding-left: 6px;
  padding-right: 100%;
  color: black !important;
  font-family: Tahoma;
  font-size: 1.06em;
  font-weight: bold;
}

.form-verified::after {
  position: relative;
  top: 0px;
  left: 10px;
  content: "Verified \2713";
  color: green;
}

.form-text-box-readonly {
  font-style: italic !important;
  border: none;
  text-align: right;
  position: relative;
  right: 0px;
  box-shadow: none;
  --webkit-box-shadow: none;
}

  .form-text-box-readonly * {
    font-style: italic !important;
    color: var(--fnt-readonly-color) !important;
  }

.form-layout-item {
  padding: 10px;
  border: 1px solid #d0cfcc;
  border-bottom: none;
  background: var(--bg-content-section);
}

.form-layout-item-rounded {
  border-radius: 4px;
  border: 1px solid #d0cfcc;
}

.form-layout-item-first {
  border-start-start-radius: 4px;
  border-start-end-radius: 4px;
}

.form-layout-item-last {
  border-end-start-radius: 4px;
  border-end-end-radius: 4px;
  border-bottom: 1px solid #d0cfcc;
}

.form-nested-control {
  width: 100%;
  position: relative;
  right: 0;
}

.form-nested-control-text * {
  color: black;
}

.form-nested-control-text-disabled * {
  color: var(--fnt-disabled) !important;
}

.form-button {
  border-radius: 4px;
  background-color: rgb(var(--btn-primary));
  transition: 0.22s;
}

.form-button-red {
  background-color: #B03A2E;
}

  .form-button-red:not(.dxbDisabled_Office365):hover {
    background: linear-gradient(var(--btn-primary-hover-red)) !important;
  }

.form-button-orange {
  background-color: var(--syn-gold) !important;
  transition: none !important;
}

  .form-button-orange:not(.dxbDisabled_Office365):hover {
    background: linear-gradient(var(--btn-primary-hover-orange)) !important;
  }


.form-button span {
  vertical-align: sub;
}

.form-button img {
  vertical-align: top;
  padding-left: 3px;
}

.form-button:not(.dxbDisabled_Office365):hover {
  background: linear-gradient(var(--btn-primary-hover));
}

.form-button img {
  width: 20px;
  height: 20px;
}

.form-radio-button * {
  border-radius: 0 !important;
}

.form-radio-button-focused {
}

/*AspxCombobox*/
.cb-no-select, .cb-no-select * {
  user-select: none !important;
  outline: none !important;
}

/*AspxGridView*/
.grid-view {
  height: fit-content !important;
}

  .grid-view * {
    border: none !important;
    background-color: var(--bg-primary);
  }

.grid-view-data-img img {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  padding: 0;
  vertical-align: middle;
}

.grid-view-row {
  transition: 0.2s;
  border-radius: 25px !important;
}

  .grid-view-row:not(.grid-view-row-selected):hover {
    transform: translateX(2px);
    cursor: pointer;
  }

    .grid-view-row:not(.grid-view-row-selected):hover * {
      background-color: var(--bg-content-section) !important;
    }

  .grid-view-row td:first-child {
    border-start-start-radius: 25px !important;
    border-end-start-radius: 25px !important;
  }

  .grid-view-row td:last-child {
    border-start-end-radius: 25px !important;
    border-end-end-radius: 25px !important;
  }

.grid-view-row-selected {
  transform: translateX(2px);
  top: 0;
}

  .grid-view-row-selected * {
    background: var(--btn-primary) !important;
    color: var(--bg-primary) !important;
    transform: scale(1.04);
  }

.grid-view-header {
  border: none;
  font-family: var(--fnt-family-header) !important;
  font-size: 13pt;
}

.grid-view-cell, .grid-view-cell * {
  border: none;
  font-family: var(--fnt-family-primary) !important;
  font-size: 1.03em;
  color: var(--bg-nav-primary);
}

.grid-view-search-panel {
  width: 20%;
}

  .grid-view-search-panel * {
    background-color: var(--bg-primary) !important;
  }

.grid-view-button {
  border-radius: 25px;
  color: var(--fnt-primary);
  transition: 0.12s;
}

.grid-view-button-outlined {
  border: 1px solid var(--btn-primary);
  background-color: transparent;
  color: var(--btn-primary);
}

.grid-view-button-outlined-hover {
  background-color: var(--btn-primary);
  color: var(--fnt-primary);
}

.dxgvTable_Office365 {
}

.callback-load:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(358deg, #b0b0b0, transparent);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  animation: Load 0.8s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate
}

.dxlpLoadingPanel_Office365 .dxlp-loadingImage {
  border-color: blue;
  border-top-color: transparent;
}

@keyframes Load {
  0% {
    backdrop-filter: blur(2px) grayscale(0.5) sepia(0.1);
  }

  100% {
    backdrop-filter: blur(6px) grayscale(1.0) sepia(0.3);
  }
}
/*#Players_Grid_View {
    transition: 1s;

    position: relative;
    z-index: 50;
}

   img {
        position: relative !important;
        z-index: 1;
    }*/
/*.test img::after {
    content: url("./Images/Icons/empty.png");
    width: 100px;
    height: 100px;
    position: relative;
    top: 0;
    left: 0;
    background-color: var(--bg-primary) !important;
    z-index: 10000 !important;
}*/
/*.test::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bg-primary) !important;
    z-index: 10000 !important;
    transition: 1s;
}

.test {
    position: relative;
    z-index: 1;
}


.test .grid-view-row-selected{
    transition: 1s;
    position: fixed !important;
    z-index: 100000 !important;
    top: initial;
}

    .test :not(.grid-view-row-selected) {
        border: none;
    }*/
.progress-chart-center-label {
  position: absolute;
  top: 50%;
  font-family: "Bebas Neue";
  font-size: calc(1.5em + 50%);
  color: var(--fnt-secondary);
  width: inherit;
  text-align: center;
}
/*Popups*/
/* .popup-control and its two width queries were deleted in the mobile pass. They were dead: the class named
   the DevExpress BTPopup control, and grep over Spa/, App.aspx and Reporting/ finds no markup that carries it -
   every popup in the application is a Mantine Modal now. The width queries were the pattern this pass exists to
   remove (a fixed 390px/350px with no max-width, which overflows a 320px viewport), but they had nothing to
   apply to.

   .popup-control-header, .popup-control-header span, .popup-control-header img and .popup-control-content below
   are dead by the same grep and for the same reason. They are outside this phase's claims, so they are left
   where they are for whoever retires the rest of this file. */
.popup-control-header {
  border-start-start-radius: 8px;
  border-start-end-radius: 8px;
  background-color: var(--bg-nav-primary) !important;
}

  .popup-control-header span {
    background-color: var(--bg-nav-primary);
    color: white;
    font-family: var(--fnt-family-header);
  }

  .popup-control-header img {
    background-color: var(--bg-nav-primary);
    border-radius: 4px;
    overflow: hidden;
    transform: scale(1.2) !important;
  }

.popup-control-content {
  border-end-start-radius: 8px;
  border-end-end-radius: 8px;
  padding: 30px !important;
}
/*ListBox*/
.list-box-item {
  font-family: var(--fnt-family-header);
}

  .list-box-item img {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    padding: 0;
    vertical-align: middle;
  }


.account-home-section {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


.account-section {
  position: absolute;
  width: 50%;
  left: 25%;
  padding: 0px;
  top: 15%;
}

.account-info-text-box-caption {
  padding-left: 6px;
  padding-right: 25%;
  color: black !important;
  font-family: Tahoma;
  font-size: 1.06em;
  font-weight: bold;
}

.account-info-text-box {
  border-radius: 6px;
  background-color: var(--bg-primary) !important;
  padding: 1px 1px;
  position: relative;
  right: 0;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

.account-info-text-box-readonly {
  position: relative;
  right: 0;
  font-style: italic !important;
  border: none;
  text-align: right;
  box-shadow: none;
  --webkit-box-shadow: none;
}

.account-info-text-box-focused {
  position: relative;
  right: 0;
  border-radius: 6px;
  border-color: var(--bg-nav-primary) !important;
  padding: 1px 1px;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

/*


*/
@media screen and (max-width: 700px) {
  .account-section {
    width: 95%;
    left: 2.5%;
  }
}

@media screen and (max-width: 400px) {

  .account-info-text-box-caption {
    padding-left: 3px;
    padding-right: 15%;
    color: black !important;
    font-family: Tahoma;
    font-size: 0.9em;
    font-weight: bold;
  }

  .account-info-text-box {
    border-radius: 4px;
    background-color: var(--bg-primary) !important;
    padding: 1px 1px;
    position: relative;
    right: 0;
    box-shadow: var(--container-box-shadow);
    --webkit-box-shadow: var(--container-box-shadow);
  }

  .account-info-text-box-focused {
    position: relative;
    right: 0;
    border-radius: 4px;
    border-color: var(--bg-nav-primary) !important;
    padding: 1px 1px;
    box-shadow: var(--container-box-shadow);
    --webkit-box-shadow: var(--container-box-shadow);
  }

}








.country-code-text-box {
  max-width: 240px;
  min-width: 170px;
  border-radius: 6px;
  background-color: var(--bg-primary) !important;
  padding: 1px 1px;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

.country-code-text-box-readonly {
  max-width: 90px;
  min-width: 30px;
  font-style: italic !important;
  border: none;
  text-align: right;
  box-shadow: none;
  --webkit-box-shadow: none;
}

.country-code-text-box-focused {
  max-width: 90px;
  min-width: 30px;
  border-radius: 6px;
  border-color: var(--bg-nav-primary) !important;
  padding: 1px 1px;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}


.phone-text-box {
  max-width: 140px;
  min-width: 100px;
  border-radius: 6px;
  background-color: var(--bg-primary) !important;
  padding: 1px 1px;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

.phone-text-box-readonly {
  max-width: 140px;
  min-width: 100px;
  font-style: italic !important;
  border: none;
  text-align: right;
  box-shadow: none;
  --webkit-box-shadow: none;
}

.phone-text-box-focused {
  max-width: 140px;
  min-width: 100px;
  border-radius: 6px;
  border-color: var(--bg-nav-primary) !important;
  padding: 1px 1px;
  box-shadow: var(--container-box-shadow);
  --webkit-box-shadow: var(--container-box-shadow);
}

.subscription-info-text-box-caption {
  padding-left: 6px;
  padding-right: 25%;
  color: black !important;
  font-family: Tahoma;
  font-size: 1.06em;
  font-weight: bold;
}

.utilities-section {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


.getting-started-title {
  position: relative;
  text-align: center;
  top: 10%;
  font-size:3.5em;
}

.getting-started-text {
  position: relative;
  overflow: visible;
  width: 90%;
  margin: auto;
  top:14%;
  font-size: 1.3em;
}

.getting-started-button {
  position: relative;
  overflow: visible;
  top: 15%;
  width: fit-content;
  margin-left: auto;
  margin-right: 5%;
}

/*
Adjusts the position of the getting started title, text, and button based on the screen size.
*/
@media (max-height: 700px) {
  .getting-started-title {
    top: 12%;
  }

  .getting-started-text {
    top: 14%;
  }

  .getting-started-button {
    top: 15%;
  }
}

@media (min-width: 950px) and (max-width: 1250px) {
  .getting-started-title {
    top: 18%;
  }

  .getting-started-text {
    top: 20%;
  }

  .getting-started-button {
    top: 20%;
  }
}

@media (max-height: 600px) {
  .getting-started-title {
    top: 14%;
  }

  .getting-started-text {
    top: 16%;
  }

  .getting-started-button {
    top: 16%;
  }
}

@media (max-height: 600px) and (min-width: 950px) and (max-width: 1250px) {
  .getting-started-title {
    top: 22%;
  }

  .getting-started-text {
    top: 24%;
  }

  .getting-started-button {
    top: 24%;
  }
}

@media (max-height: 500px) {
  .getting-started-title {
    top: 18%;
  }

  .getting-started-text {
    top: 20%;
  }

  .getting-started-button {
    top: 20%;
  }
}

@media (max-height: 500px) and (min-width: 950px) and (max-width: 1250px) {
  .getting-started-title {
    top: 28%;
  }

  .getting-started-text {
    top: 30%;
  }

  .getting-started-button {
    top: 30%;
  }
}

@media (max-height: 400px) {
  .getting-started-title {
    top: 22%;
  }

  .getting-started-text {
    top: 24%;
  }

  .getting-started-button {
    top: 24%;
  }
}

@media (max-height: 400px) and (min-width: 950px) and (max-width: 1250px) {
  .getting-started-title {
    top: 34%;
  }

  .getting-started-text {
    top: 36%;
  }

  .getting-started-button {
    top: 36%;
  }
}

@media (max-height: 300px) {
  .getting-started-title {
    top: 24%;
  }

  .getting-started-text {
    top: 26%;
  }

  .getting-started-button {
    top: 26%;
  }
}

@media (max-height: 300px) and (min-width: 950px) and (max-width: 1250px) {
  .getting-started-title {
    top: 38%;
  }

  .getting-started-text {
    top: 40%;
  }

  .getting-started-button {
    top: 40%;
  }
}

/*
Reduces getting started title font if max-width is 400px to make it fits on one line.
*/
@media (max-width: 400px) {
  .getting-started-title {
    font-size: 3.0em;
  }
}