html.capcom-v2 {
  &:root {
    /* Variable Overrides */
    --color-palette-branding-normal: var(capcom-blue) !important;
    --color-palette-branding-lucent: #260c5a;
    --app-styling-background: var(--capcom-lt-3);
    --app-styling-slate-level-1: var(--white);
    --card--background: var(--capcom-blue);
    --card--color: var(--capcom-lt-3);
    --card--title-color: var(--capcom-yellow);
    --card--subtitle-color: var(--capcom-lt-3);
    --header--background: var(--capcom-lt-3);
    /* App COC PIPs */
    --ui-bg-inverted: var(--capcom-yellow);
    --ui-border-accented: var(--capcom-blue);

    --input-buttons-primary-bg-default: var(--capcom-blue);
    --input-buttons-primary-text-default: var(--capcom-yellow);
    --input-buttons-primary-bg-hover: rgb(0, 64, 154);
    --input-buttons-primary-text-hover: var(--capcom-yellow);

    --input-buttons-secondary-bg-default: var(--capcom-yellow);
    --input-buttons-secondary-text-default: var(--capcom-blue);
    --input-buttons-secondary-bg-hover: rgb(0, 64, 154);
    --input-buttons-secondary-text-hover: var(--capcom-yellow);

    --input-buttons-primary-bg-disabled: rgb(12, 77, 162, .1);
    --input-buttons-primary-text-disabled: var(--capcom-lt-1);

    /* Brand Colours */

    --capcom-blue: #0c4da2;
    --capcom-yellow: #ffcb08;
    --capcom-lt-3: #F0F2F5;
    --capcom-lt-2: #373737;
    --capcom-lt-1: #222;
    --capcom-lt-0: #000;

    --nav-blue: #004099;
    --social-bar-bg-color: #1059A4;

    --blue-alt: #0056b3;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --black: #000;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    /* Fonts */
    --primary-font-family: Nunito, sans-serif;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --nav-font: "Helvetica";

    /* Application / Modals */
    --color-palette-branding-normal: var(--capcom-blue);
    --color-palette-branding-lucent: var(--white);

    & body {
      background-color: var(--app-styling-background) !important;
      font-family: var(--primary-font-family);

      .gs-logo{
        height: 40px !important;
      }

      .navigation:not(.user-menu) {
        border-bottom: 2px solid var(--nav-blue);
        font-family: var(--nav-font);

        & nav{
          & button {
            color: var(--black);
            &:hover {
              background: var(--capcom-blue);
              color: var(--capcom-yellow);
            }
          }
        }
      }

      .user-menu {
        & .wrapper{
          border: 4px solid var(--capcom-blue);
          margin-top: -4px;
        }
        & .bar{
          & .tenure {
            & .tenure-stack {
              & .background { color: var(--capcom-blue) !important; }
              & .text { color: var(--white) !important; }
            }
          }
          & .details {
            & .name { color: var(--capcom-blue) !important; }
          }
        }
        & .menu {
          & .details, & .footer{ background: var(--capcom-blue) !important;}
          & .footer {
            & button:not(.nui) {
                --_background: var(--input-buttons-secondary-bg-default);
                --_focus: var(--input-buttons-secondary-bg-default);
                --_color: var(--input-buttons-secondary-text-default);
              }
          }
        }
      }

      .title {
        inset-block-end: calc(50% + 5vh);
      }

      .banner-bg {
        -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0/1) calc(100% - 120px), rgb(0 0 0 / 1) calc(100% - 20px));
        mask-image: linear-gradient(180deg, rgb(0 0 0/1) calc(100% - 120px), rgb(0 0 0 / 1) calc(100% - 20px));
      }
    }

    /* Application Overrides */
    .UForm {
      & label, & label span {
        color: var(--capcom-lt-1) !important;
        font-weight: 6 !important;
      }
    }

    /* Customize Login */
    & .login-wrapper {
      &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/images/capcom/placeholder.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(5px);
        z-index: -1;
      }
      &::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle, transparent 0%, #222 90%);
        z-index: 0;
        pointer-events: none;
      }

      & .app-wrapper {
        width: 100%;
      }

      & .form-wrapper {

        & .login {
          background-color: var(--capcom-blue);
          width: 100dvw;
          margin: 20px;
          max-width: 600px;
          padding: 4em;
          border: 3px solid var(--capcom-yellow);
          border-radius: 0;

          & .login-form {
            padding: 0;
            width: 100%;

            & .header {
              margin-bottom: 40px;

              & h1 {
                font-size: calc(56px + .5vw) !important;
                font-weight: 700 !important;
                margin-bottom: 10px;
                color: var(--capcom-yellow);
                text-transform: uppercase;
              }

              & p {
                font-size: 18px;
                font-weight: 400;
                color: var(--capcom-yellow);
              }
            }

            & .divider {

              &::before,
              &::after {
                background: var(--capcom-yellow);
              }

              & .label {
                color: var(--capcom-yellow);
              }
            }

            & .return {
              color: var(--capcom-yellow);
            }

            & .return:hover {
              color: var(--capcom-yellow) !important;
              opacity: .8;
            }
          }
        }

        & .card {
          width: calc(100vw - 50px);

          &::before,
          &::after {
            background: transparent;
            border-radius: 0;
            display: none;
          }
        }

        &::before,
        &::after {
          background: transparent;
          border-radius: 0;
          display: none;
        }

      }
    }
  }
}