@charset "UTF-8";

/* Apply Border Box Globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove Outline From Every Anchor Tag */
a {
  outline: none !important;
}

/* Defines the Global Font Size - Changing this Adjusts the Entire Site Scale */
html {
  font-size: 18px;
}

/* Define the Page Full Height, Remove Margin, and Set Default 'Body' Background Color */
html, body {
  min-height: 100vh; 
  margin: 0;
  background-color: #F0F0F0; 
}

/* Set 'Body' as Flex and Default Font Size With Improved Page Readability */
body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-base);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* Set Page Wrap Flexbox to Ensure Page Fills the Screen and Creates Sticky Footer Layout */
.page-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Allow Main Content To Expand and Push Footer Down */
.page-wrap > main {
  flex: 1;
}

/* Prevent Footer From Shrinking */
.footer {
  flex-shrink: 0;
}

/* Set Admin Page Content Page Wrap utilizng Flexbox to Ensure Page Fills the Screen and Creates Sticky Footer Layout */
.admin-page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Remove Side Gutters for Rows within Specific Layouts */
.app-shell .row,
.admin-layout .row {
  margin-left: -15px;
  margin-right: -15px;
}

/* Animation */
@keyframes gradientBG {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Mobile */
@media (max-width: 768px) {
  .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ================== GLOBAL VARIABLES  ======================================================= */
:root {
  --font-base: "Inter", "Segoe UI", Calibre, sans-serif;
  --brand-primary: #0033A0;
  --brand-accent: #00ABE4;
  --brand-text: #001652;
  --background-page: #f5f7fb;
  --gray-200: #e6e6e6;
  --gray-300: #cccccc;
  --gray-600: #666;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-md: 0 6px 22px rgba(0,0,0,.12);
  --transition: 0.25s ease;
}

/* ================== HIDE  JAVASCRIPT ELEMENTS WHEN JAVASCRIPT IS DISABLED ================== */
.no-js .login-glow,
.no-js #togglePassword,
.no-js #forgotPasswordLink,
.no-js #forgotPasswordContainer,
.no-js .remember-me {
    display: none !important;
}

/* Message Style on Session Start Form When User Has Java Script Disabled */
.no-js .no-js-message {
    display: block;
    position: relative;      
    z-index: 2;              
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    margin: 10px auto 15px;  
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    max-width: 900px;
}

.js-enabled .no-js-message {
    display: none;
}

/* ================== BLUE YONDER LOGO STYLE =================================================== */
.logo-wrapper {
    top: 14px !important;
    left: 24px !important;
    transform: none !important;
    z-index: 10000; 
    display: flex;
    align-items: center;
    pointer-events: auto;
    text-align: center;
}

.logo-image {
    height: 28px;
    width: auto;
    display: block;
}

.logo-wrapper img {
}

.logo-link {
    display: block;
}

/* ================== PUBLIC FORM (Video Styles) =================================================== */
/* Message Style (In Video container) When Java Script Is Disabled */
.video.no-js-box {
    background: #ffffff;
    max-width: 720px;
    width: 100%;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    text-align: center;
    border-top: 6px solid #0078d4;
}

.video.no-js-box i {
    font-size: 3rem;
    color: #ffc107;
    margin-bottom: 0.5rem;
    display: block;
}

.video.no-js-box h1 {
    margin: 0.5rem 0 0.75rem 0; 
    color: #1f2933;
}

.video.no-js-box p {
    margin: 0.25rem 0 0 0; 
    color: #4a5568;
    line-height: 1.5;
}

/* Control Size Of Video */
.video-hero {
    position: relative;   
    width: 100%;
    height: clamp(350px, 60vh, 558px);     
}

/* If JavaScript Is Disabled Then Overrride */
.no-js.video-hero {
    height: auto !important;
    min-height: 350px;  
}

/* Hide Video, Controls and Overlays when JavaScript Is Disabled */
.no-js .video-hero-video-wrapper,
.no-js .video-dots,
.no-js .video-hero-overlay,
.no-js .video-hero-content,
.no-js .hero-heading {
    display: none !important;
}

/* Message Style When JavaScript Is Disabled */
.no-js .video-no-js-message {
    position: relative;             
    background: #0033A0;            
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;             
    width: 100%;
    box-sizing: border-box;
}

/* Inner Layout For The No JavaScript */
.no-js .video-no-js-message > .video,
.no-js .video-no-js-message > .video.no-js-box {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Mobile */
@media (max-width: 768px) {
    .no-js .video-no-js-message {
        margin-top: 70px; 
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

.video-hero-video-wrapper {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CCE8FE;
    z-index: 1;
}

.video-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 1s ease-in-out;
    opacity: 0;
    filter: brightness(1.22) contrast(1.12) saturate(1.08);  /* Control Brightness for Video Here */
    background-color: #CCE8FE;
    z-index: 1;           
}

.video-hero-video.is-ready {
    opacity: 1;
}

.video-hero-video.fade-out {
    opacity: 0;
}

.video-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.9) 0%,
        rgba(0,0,0,0.3) 35%,
        rgba(0,0,0,0.7) 65%,
        rgba(0,0,0,0.9) 100%
    );
    z-index: 2;           
    pointer-events: none;
}

.video-hero-content {
    position: relative;    
    width: 100%;
    height: 100%;          
    display: flex;
    z-index: 3;           
}

/* Apply Animation Only If User Does NOT Prefer Reduced Motion */
@media (prefers-reduced-motion: no-preference) {
    .video-hero-btn-highlight {
        animation: pulse 2.5s infinite ease-in-out;
    }
}

.hero-heading {
    position: absolute;
    top: 50px !important;                         
    left: 80px;            
    margin-top:0 !important; 	
    font-family: "Calibre", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 80px;
    line-height: 80px;
    color: rgb(255, 255, 255);
    max-width: 465px;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
    z-index: 3;
    opacity: 0; 
    animation: fadeInHeading 0.1s ease 0.3s forwards;
}

@keyframes fadeInHeading { 
    to { opacity: 1; } 
}

.heading-accent {
    color: #00ABE4;
}

/* SubHeading and Request Demo Button Container */
.subheading-container {
    position: absolute;
    bottom: 100px;               
    left: 62%;                   
    transform: translateX(-50%); 
    display: flex;
    flex-direction: column;
    gap: 15px;                   
    align-items: flex-start;     
    text-align: left;
    z-index: 4;                  
    max-width: 480px;            
}

/* Subheading Text Style */
.subheading {
    font-family: "Calibre", sans-serif;  
    font-size: 20px;  
    font-style: normal;                        
    font-weight: 400;   
    line-height: 28px;                           
    color: rgb(255, 255, 255);  
    margin: 0;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
    width: fit-content; 
}

/* Align Request Demo Button With Subheading */
.video-hero-btn {
    padding: 0.75em 1.5em;
    background-color: #640030;
    color: #fff;
    font-weight: 400;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    white-space: nowrap;         
    margin-left: 0;             
}

.video-hero-btn:hover {
    background-color: #005fa3;
    color: #000;  
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
    text-decoration: none;    
}

/* Request a Demo Style */
.video-hero-btn-highlight {
    background: #6A0136;
    color: #fff;
    font-weight: 400;
    box-shadow: 0 6px 20px rgba(255, 77, 79, 0.35);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    transition: all .25s ease;
}

.video-hero-btn-highlight:hover {
    background: #00B7F1;
    color: #000 !important; 
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.45);
}

.video-hero-btn-highlight i {
    transition: color 0.3s ease; 
}

.video-hero-btn-highlight:hover i {
    color: #000; 
}

/* Animation */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 6px 20px rgba(255, 77, 79, 0.35); }
    50% { transform: scale(1.05); box-shadow: 0 10px 30px rgba(255, 77, 79, 0.45); }
    100% { transform: scale(1); box-shadow: 0 6px 20px rgba(255, 77, 79, 0.35); }
}

.video-hero-btn,
.video-hero-btn:link,
.video-hero-btn:visited,
.video-hero-btn:hover,
.video-hero-btn:active,
.video-hero-btn:focus {
    color: #fff;
    text-decoration: none !important;
}

/* SPACER */
.public-spacer {
    height: 10px;
}

/* ================== VIDEO DOT NAVIGATION =================================================== */
.video-dots {
    position: absolute;
    bottom: 30px;                
    left: 50%;                   
    transform: translateX(-50%); 
    display: flex;
    gap: 16px;                   
    z-index: 5;                
    pointer-events: auto;         
}

.video-dot {
    width: 28px;                  
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;         
    transition: transform 0.2s ease;
}

.video-dot i {
    width: 14px;                  
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: all 0.2s ease;
    pointer-events: none; 
    will-change: transform, background;        
}

.video-dot:hover i,
.video-dot i.active {
    transform: scale(1.5);        
    background: #0072ce;          
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.video-dot .fa-icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* Hide DOT from UI When JavaScript Is Disabled */
.no-js .video-hero-video-wrapper,
.no-js .video-dots {
    display: none;
}

.no-js .video-no-js-message {
    display: flex;
}

/* Prevent Any Video Attempt, If JavaScript Is Disabled */
.no-js video {
    display: none;
}

/* Prevent Any Video OR Animation For Reduced Motion Sensitivity */
@media (prefers-reduced-motion: reduce) {
  video {
    animation: none !important;
  }
}

body[data-reduced-motion="true"] video {
  display: none;
}

/* ================== PHONE ONLY MOBILE STYLES (<480px) =================================================== */
@media (max-width: 480px) {
    .video-hero {
        min-height: 50vh;
        height: 50vh;
        overflow: hidden;
    }
    .video-hero-content {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        text-align: left;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
    }
    .hero-heading,
    .subheading-container,
    .subheading,
    .video-hero-btn-highlight {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: auto;                 
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .hero-heading {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 0.75rem !important;
    }
    .subheading {
        font-size: 1.2rem;
        max-width: 100%;
    }
    .video-hero-btn-highlight {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        width: auto;                 
        align-self: center;          
    }
}

/* ================== TABLET MOBILE STYLES (481px – 768px) =================================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .video-hero {
        min-height: 60vh;
        height: auto;
        overflow-x: hidden;
    }
    .video-hero-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;      
        justify-content: center;
        padding: 2rem;
        text-align: left;
        max-width: 100%;
        overflow-x: hidden;
    }
    .hero-heading,
    .subheading-container,
    .subheading,
    .video-hero-btn-highlight {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: auto;                 
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .hero-heading {
        font-size: 2.6rem;
        line-height: 1.2;
        margin-bottom: 0.75rem !important;
    }
    .subheading {
        font-size: 1.4rem;
    }
    .video-hero-btn-highlight {
        padding: 0.75rem 1.5rem;
        font-size: 1.1rem;
        width: auto;                 
        align-self: flex-start;       
    }
}

/* ================== LARGE TABLET MOBILE STYLES (769px - 1024px) =================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .video-hero {
        min-height: 65vh;
        height: auto;
        overflow-x: hidden;
    }
    .video-hero-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 2.5rem;
        text-align: left;
        max-width: 100%;
        overflow-x: hidden;
    }
    .hero-heading,
    .subheading-container,
    .subheading,
    .video-hero-btn-highlight {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: auto;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .hero-heading {
        font-size: 2.8rem;
        margin-bottom: 0.75rem !important;
    }
    .subheading {
        font-size: 1.5rem;
    }
    .video-hero-btn-highlight {
        padding: 0.75rem 1.5rem;
        font-size: 1.2rem;
        width: auto;
        align-self: flex-start;      
    }
}

/* ================== SESSION START (secure) FORM STYLES ============================================= */
body.auth-shell.sstart,
body.auth-shell.userpass,
body.auth-shell.newuser,
body.auth-shell.apprdir {
  margin: 0;
  color: #000;
  background: #000E4E;
  background: linear-gradient(180deg,rgba(0, 14, 78, 1) 42%, rgba(0, 183, 241, 1) 100%);
  background-size: 400% 400%;
  animation: gradientBG 25s ease infinite;
}

.sstart .auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;       
}

.auth-shell.sstart .page-wrap > main {
  display: flex;
  flex-direction: column;
  justify-content: center;   
  align-items: center;       
}  

.sstart .auth-error {
  max-width: 900px;
  margin: 20px auto;
  padding: 12px 18px;
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 6px;
  border: 1px solid #f5c6cb;
  font-size: 14px;
  text-align: center;
}

.session-start-error {
  color: red;
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 4px;
  display: flex;           
  align-items: center;
}

.session-start-error i {
  margin-right: 6px;
  display: none;           
}

.session-start-input:invalid {
  border-color: red;       
}

.sstart .login-container {
  width: 100%;
  max-width: 350px;
  margin: 20px;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #CBD5E1;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  background-clip: padding-box;
}

/* Glow Animation */
.sstart .login-glow {
  position: absolute;
  inset: -60px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at top center, var(--glow-color), transparent 65%);
  opacity: 0.65;
  filter: blur(8px);
  transition: background 1.5s ease, opacity 1.5s ease;
  border-radius: inherit;
}

.sstart .login-glow::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.25;
  background: radial-gradient(circle, var(--sun-color) 0%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
  animation: sunMove 30s linear infinite;
}

.sstart .login-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--sky-gradient);
  opacity: 0.35;
  transition: background 1.5s ease;
  filter: blur(20px);
  border-radius: inherit;
}

@keyframes sunMove {
  0%   { top: 28%; opacity: 0.2; }
  50%  { top: 22%; opacity: 0.35; }
  100% { top: 28%; opacity: 0.2; }
}

/* Time of Day Theme */
body.sstart[data-time="morning"] {
  --glow-color: rgba(255, 214, 102, 0.55);
  --sun-color: rgba(255, 214, 102, 0.35);
  --sky-gradient: linear-gradient(to top, #FFD27A, #FFEFCF);
}

body.sstart[data-time="afternoon"] {
  --glow-color: rgba(79, 172, 254, 0.45);
  --sun-color: rgba(255, 245, 180, 0.25);
  --sky-gradient: linear-gradient(to top, #87CEFA, #B0E0E6);
}

body.sstart[data-time="evening"] {
  --glow-color: rgba(120, 102, 255, 0.45);
  --sun-color: rgba(255, 120, 80, 0.25);
  --sky-gradient: linear-gradient(to top, #FF8C60, #6B4CFF);
}

/* Accessibility Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .sstart .login-glow,
  .sstart .login-glow::before,
  .sstart .login-glow::after {
    animation: none;
    transition: none;
  }
}

.sstart .login-title,
.userpass .login-title {
  font-size: 22px;
  font-weight: 600;
  color: #002B5B;
  margin-bottom: 16px;
}

.sstart .login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sstart .login-form label {
  align-self: flex-start;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.sstart .login-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  height: 42px;
  line-height: 42px;
}

.sstart .password-container {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  contain: layout paint style;
  isolation: isolate;
}

.sstart .password-container input {
  padding-right: 40px;
  font-size: 14px;
  height: 42px;
  line-height: 42px;
  box-sizing: border-box;
}

/* Prevent Autofill Issues */
.sstart input:-webkit-autofill,
.sstart input:-webkit-autofill:hover,
.sstart input:-webkit-autofill:focus {
    font-size: 14px !important;
    line-height: 42px !important;
    height: 42px !important;
    transition: background-color 9999s ease-out;
}

/* Toggle Password Eye Icon */
.sstart .toggle-password {
  position: absolute;
  right: 10px;
  height: 42px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 2px;          
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  color: #555;
}

.sstart .remember-me {
  align-self: flex-start;
  font-size: 14px;
}

.sstart .login-submit {
  width: 100%;
  padding: 12px 0;
  background: #6A0136; 
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: normal;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
  margin: 8px;
}

.sstart .login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  background: #00B7F1;
  color: #000; 
  font-weight: normal;  
}

/* Mobile */
@media (max-width: 480px) {
  .sstart .login-container {
    margin: 10px;     
    padding: 15px;    
  }
  .sstart .login-title {
    margin-bottom: 12px;
  }
  .sstart .login-input,
  .sstart .password-container input {
    margin-bottom: 8px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .page-wrap > main.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    padding: 5px;
    overflow-y: auto;            
  }
  .footer {
    flex-shrink: 0;
  }
}

/* ================== FORGOT PASSWORD STYLES (FOR SESSION START FORM) ===================== */
.sstart #forgotPasswordContainer {
  display: block;         
  margin-top: 20px;
}

.js-enabled #forgotPasswordContainer {
  display: none;          
}

.sstart #forgotPasswordContainer.is-visible {
  display: block;        
}

.sstart .help-container-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

.sstart .help-container-link:hover,
.sstart .help-container-link:focus {
  text-decoration: underline;
  color: #004999;
  outline: none;
  text-decoration: none;
}

.sstart header {
  z-index: 1;
  position: relative;
}

/* ================== CONTACT ASSISTANCE STYLES =================================================== */
.help-container {
    max-width: 500px;
    margin: 20px auto;
    padding: 15px 20px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    text-align: left; 
}

.help-container h1 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #333;
}

.help-container p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
}

.help-container .back-link {
    display: inline-block;
    margin-top: 10px;
}

.help-container .back-link a {
    font-size: 14px;
    color: #0066cc;
    text-decoration: none;
}

.help-container .back-link a:hover {
    text-decoration: underline;
}

/* Accessibility Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  body.auth-shell.sstart,
  body.auth-shell.userpass,
  body.auth-shell.newuser,
  body.auth-shell.apprdir {
    animation: none !important;
    transition: none !important;
  }
  .sstart .login-glow,
  .sstart .login-glow::before,
  .sstart .login-glow::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ================== SECURE FORM (ACCOUNT/SOLUTION) STYLES  ===================== */
.js-required-warning {
  background: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 0.75rem;
}

.page-container {
  flex: 1 0 auto;
  background: #f5f7fa;
  padding-top: 2rem;       
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Account and Solution Container (for Desktop) */
@media (min-width: 992px) {
  .home-grid {
    grid-template-columns: 2fr 3fr;
    align-items: stretch;
  }
}

.mp-card {
  height: 100%;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

@media (hover:hover) {
  .mp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }
}

/* Prevent “jumping” Hover Effects Within Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .solution-pill:hover,
  .mp-card:hover,
  .sign-in-btn:hover,
  .hero-btn:hover,
  .balloon-button:hover {
    transform: none !important;
  }
}

body[data-reduced-motion="true"] .solution-pill:hover,
body[data-reduced-motion="true"] .mp-card:hover,
body[data-reduced-motion="true"] .sign-in-btn:hover,
body[data-reduced-motion="true"] .hero-btn:hover,
body[data-reduced-motion="true"] .balloon-button:hover {
  transform: none !important;
}

.mp-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--brand-text);
  margin-bottom: 1rem;
}

.account-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#myAccounts {
  width: 100%;
  padding: 0.75rem;
  font-size: 15px;
  border: 1px solid #cbd3e0;
  border-radius: var(--radius-md);
  background: #f9faff;
  color: #0073b1;
}

/* Default Account Style */
#myAccounts option {
  background-color: white;
  color: #333;
}

/* Highlight Selected Account */
#myAccounts option:checked {
  background-color: #00ABE4;
  color: #fff;
}

#myAccounts option:checked:hover {
  background-color: #00ABE4;
  color: #fff;
}

#myAccounts:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

#myAccounts option:focus {
  outline: none;
}

.solution-grid {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;              /* Fill "Solution" Flow Starting Top > Bottom, and then Next Column */
  grid-template-rows: repeat(4, auto); /* Mobile Default: Items per Col */
  grid-auto-columns: max-content;      /* Shrink Column To the Width of Button */
  gap: 1.25rem;                        /* Set Space Between Buttons */
  padding: 1rem;                       /* Set Inner Padding Around The Grid */
  border: 1px solid #cbd3e0;
  border-radius: var(--radius-md);
  background: #f9faff;
  flex: 1;
  overflow-y: auto;
  align-content: start;
}

/* Tablet */
@media (min-width: 576px) {
  .solution-grid {
    grid-template-rows: repeat(5, auto);
  }
}

/* Desktop */
@media (min-width: 992px) {
  .solution-grid {
    grid-template-rows: repeat(6, auto);
  }
}

.solution-pill {
  background: #00B7F1;
  color: #000E4E !important;
  padding: 0.6em 1.5rem;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none !important;
  color: #fff;
  text-align: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, filter .2s ease;
}

.solution-pill a,
.solution-pill a:hover,
.solution-pill a:focus,
.solution-pill a:active,
.solution-pill a:visited,
.solution-pill a:link {
  text-decoration: none !important;
  color: inherit; 
  display: block;
  width: 100%;
  height: 100%;
}

.solution-pill.highlighted {
  background: linear-gradient(90deg,#0033A0,#001652);
  box-shadow: 0 0 0 3px rgba(0,51,160,.35);
}

@media (hover:hover) {
  .solution-pill:hover {
    background: #6A0136;
    color: #fff;
  }

  .solution-pill:hover a {
    color: #fff;
  }
}

.solution-pill:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

.solution-pill:focus-visible {
  outline: 3px solid var(--brand-accent);
}

/* Shimmer Animation */
.solution-pill::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);
  transform: translateX(-100%);
}

.solution-pill.visible:not(.highlighted)::after {
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  50% { transform: translateX(100%); }
}

.solution-disabled {
  display: none; /* hide disabled solutions completely */
}

/* iFrame */
#ApplicationFrameScreen iframe {
  width: 100%;
  height: 60vh;
  border: none;
}

@media (max-width: 768px) {
  #ApplicationFrameScreen iframe {
    height: 50vh;
  }
}

.balloon {
  position: relative;
  display: inline-block;
  float: right;
}

.balloon-button {
  background-color: #73d7f8;
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 25px;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s;
  float: right;
  top: -10px;
}

.balloon-button:hover {
  transform: translateY(-5px);
}

.balloon:after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -2px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #ff5e5e transparent;
}

@media all and (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media all and (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

@media all and (min-width: 1230px) {
  .container {
    width: 1230px;
  }
}

.content h1 {
  font-size: 32px;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    min-height: 60vh;
    max-height: 80vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Background Video (Desktop / Mobile) */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Video fade-out */
.hero-video.fade-out {
    opacity: 0;
}

/* Video fade-in */
.hero-video.fade-in {
    opacity: 1;
}

/* Overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    margin: 0;
    padding: 0;
    z-index: 1;
}

/* Content */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8vh 60px 4vh 60px;
    text-align: left;
}

.hero-content h1 {
    font-family: "Calibre", sans-serif;
    font-size: 5rem;
    line-height: 5rem;     
    font-weight: 400; 
    padding: 0;
    color: #ffffff;
    margin-bottom: 20px; 
}

.hero-content .subheading {
  --font-base: "Calibre", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    padding: 0;
    color: #ffffff;
    margin-bottom: 20px; 
}

.hero-content .hero-btn {
    background-color: #6a0136;
    color: #ffffff;
    padding: 14px 28px;
    font-family: "Calibre", sans-serif;
    font-size: 1.25rem;  
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.hero-content .hero-btn:hover {
    background-color: #3a6ea5;
}

.hero-content .hero-btn i {
    margin-left: 12px;
    font-size: 1.2rem;
}

.video-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    font-size: 2rem;
    padding: 12px;
    cursor: pointer;
    z-index: 30;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.video-nav.prev { left: 20px; }
.video-nav.next { right: 20px; }

.video-nav:hover {
    background: rgba(0,0,0,0.65);
}

@media (max-width: 768px) {

    .hero {
        min-height: 45vh;
        max-height: 55vh;
    }

    .hero-content {
        padding: 5vh 20px 4vh 20px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content .subheading {
        font-size: 1.125rem;
    }

    .hero-content .hero-btn {
        padding: 12px 32px;
        font-size: 1rem;
    }

    .hero-content .hero-btn i {
        font-size: 1.1rem;
    }

    .video-nav {
        font-size: 1.5rem;
        padding: 8px;
    }
}

.hero-content-container-content-column {
    height: 340px;
    padding: 20px;
}

h1.hero-bar {
    color: rgba(255, 255, 255, 1);
    font-size: 48px !important;
    line-height: 1;
    margin: 20px 0 0;
}

h2.hero-bar {
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
    line-height: 1;
    margin: 0 0 20px;
}

h2,
h2.gated-login-title {
    padding-top: 20px; 
    color: rgba(0, 14, 78, 1);
    font-size: 30px !important;
    margin: 0 !important;
}

.AppButton {
  color: #000e4e;
}

.ApplicationFrameScreen {
  height: 100%;
  width: 100%;
}

/* ================== HEADER BASE ======================== */
.header-public,
.header-private,
.secure-private {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding:20px 30px;
    background:#000;
    z-index:1;
}

.secure-page {
    display:block;
    width:100%;
    padding:50px 30px 20px 30px;
    background:#000;
    box-sizing:border-box;
}

/* SPACER */
.secure-spacer { height:10px; }

/* ================== BREADCRUMB LAYOUT STYLES  =================================================== */
.breadcrumbs {
    visibility: hidden;   /* Hide By Default */
}

/* General Visibility */
.js-enabled .breadcrumbs {
    visibility: visible; 
}

/* Public Header (no JS) Visibility */
.js-enabled .breadcrumbs,
.no-js .header-public .breadcrumbs {
    visibility: visible;
}

.breadcrumb-container {
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
    margin:6px 0 0 0;
    padding:0;
    box-sizing:border-box;
}

.breadcrumb-left-spacer{ flex:1; }

.header-row-public {
    flex:1;
    display:flex;
    justify-content:center;
    min-width:0;
}

.header-row-private,
.header-row-secure-private,
.header-row-secure {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.sign-in-wrapper{ margin-left:auto; }

.breadcrumbs {
    display:flex;
    justify-content:center;
    align-items:center;
    list-style:none;
    gap:20px;
    margin:0;
    padding:0;
    color:#fff;
    overflow:hidden;
    white-space:nowrap;
    transition:max-height .4s ease, opacity .4s ease;
}

.breadcrumbs li {
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    overflow:hidden;
    text-overflow:ellipsis;
}

.breadcrumbs li img {
    height:28px;
    width:28px;
    margin-right:4px;
    transition:transform .3s ease;
}

.breadcrumbs li:hover img {
    transform:scale(1.1);
}

.breadcrumbs a, .breadcrumbs a:link, .breadcrumbs a:visited, .breadcrumbs a:hover, .breadcrumbs a:focus {
    position:relative;
    padding-left:24px;
    color:#fff;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    transition:color .2s ease;
}

/* Teardrop Indicator */
.breadcrumbs a::before {
    content:"";
    position:absolute;
    left:6px;
    top:50%;
    width:6px;
    height:6px;
    background:#6ecbff;
    border-radius:50%;
    transform:translateY(-50%);
    opacity:0;
    transition:.2s;
}

.breadcrumbs a::after {
    content:"";
    position:absolute;
    left:12px;
    top:50%;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:6px solid #6ecbff;
    transform:translateY(-50%);
    opacity:0;
    transition:.2s;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color:#6ecbff;
}

.breadcrumbs a:hover::before,
.breadcrumbs a:hover::after,
.breadcrumbs a:focus-visible::before,
.breadcrumbs a:focus-visible::after {
    opacity:1;
    transform:translateY(-50%) translateX(2px);
}

.bread-sign-in-btn {
    padding: 8px 16px;
    background: #6A0136;
    color: #fff;
    font-weight: 400;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
}

.bread-sign-in-btn,
.bread-sign-in-btn:link,
.bread-sign-in-btn:visited,
.bread-sign-in-btn:hover,
.bread-sign-in-btn:active,
.bread-sign-in-btn:focus {
    text-decoration: none;
}

.bread-sign-in-btn:hover {
    background: #00B7F1;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #000;
}

.bread-sign-in-btn:active {
    background: #6A0136;
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .12);
    color: #fff;
}

/* If Reduced Motion Enabled Disable Animations */
@media (prefers-reduced-motion: reduce) {
    .bread-sign-in-btn {
        transition: none; 
        transform: none;  
        box-shadow: none; 
    }

    .bread-sign-in-btn:hover, .bread-sign-in-btn:active {
        background: #00B7F1; 
        color: #000;
        transform: none;     
        text-decoration: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, .1); 
    }
}

.hamburger-toggle {
    display:none;
    background:none;
    border:none;
    flex-direction:column;
    gap:5px;
    width:30px;
    cursor:pointer;
}

.hamburger-toggle .bar {
    height:3px;
    width:100%;
    background:#fff;
    border-radius:2px;
    transition:.3s;
}

.header-actions {
    display:flex;
    align-items:center;
    gap:16px;
    margin-left:auto;
}

.hamburger-toggle.active .bar:nth-child(1) {
    transform:rotate(45deg) translate(5px,5px);
}

.hamburger-toggle.active .bar:nth-child(2) {
    opacity:0;
}

.hamburger-toggle.active .bar:nth-child(3) {
    transform:rotate(-45deg) translate(5px,-5px);
}

/* Hide Breadcrumbs By Default to Prevent Flash on Slow Devices */
.breadcrumbs {
    visibility: hidden; 
}

/* Show Public Header Breadcrumbs Based on JS for Slow / no-JS Devices */
.js-enabled .breadcrumbs,
.no-js .header-public .breadcrumbs {
    visibility: visible;
}

/* Mobile */
@media (max-width:1024px) {

    /* Hide Private & Secure Breadcrumbs For Mobile Device Regardless of JS State */
    .header-private .breadcrumbs,
    .secure-page .breadcrumbs {
        display: none;
    }

    /* Public Header Breadcrumbs */
    .no-js .header-public .breadcrumbs {
        display: none;
    }

    .header-public,
    .header-private,
    .secure-private {
        flex-wrap: wrap;
    }

    .header-public {
        padding: 10px 15px;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .no-js .bread-sign-in-btn {
        display: inline-flex;
    }

    .js-enabled .header-public .breadcrumbs {
        flex-basis: 100%;
        order: 10;
        width: 100%;
        background: #000;
        flex-direction: column;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }

    .js-enabled .header-public .breadcrumbs.active {
        max-height: 800px;
        opacity: 1;
    }

    .js-enabled .hamburger-toggle {
        display: flex;
    }

    .breadcrumbs {
        white-space: normal;
    }

    .bread-sign-in-btn {
        padding: 10px 24px;
        font-size: 16px;
    }
}

/* DESKTOP */
@media (min-width:1025px) {

    /* Show Breadcrumbs For Private & Secure Headers Always For Desktop */
    .header-private .breadcrumbs,
    .secure-page .breadcrumbs {
        display: flex !important; 
        visibility: visible;
    }
}

.user-container {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-left:auto;
    font-family:Calibre,sans-serif;
    position:relative;
}

.user-identity {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-right:10px;
}

.user-icon {
    font-size:18px;
    margin-bottom:4px;
    color:#fff;
}

.logged-in-user {
    color:#fff;
    font-size:14px;
    margin-right:12px;
    font-weight:500;
    letter-spacing:.5px;
}

.user-menu{ position:relative; }

.user-summary {
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    white-space:nowrap;
    background:none;
    border:none;
    padding:8px 12px;
    border-radius:4px;
}

.chevron-circle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    background:#444;
    border-radius:50%;
    margin-left:6px;
    box-shadow:0 4px 8px rgba(0,0,0,.2);
}

.chevron {
    font-size:14px;
    color:#fff;
    transition:transform .3s ease;
}

details[open] .chevron {
    transform:rotate(180deg);
    color:#FF5733;
}

.user-dropdown {
    position:absolute;
    right:0;
    top:32px;
    background:#000;
    border:1px solid #ccc;
    border-radius:4px;
    z-index:9999;
    min-width:160px;
    box-shadow:0 4px 8px rgba(0,0,0,.15);
}

.dropdown-item {
    display:block;
    padding:10px;
    color:#fff;
    text-decoration:none;
}

.dropdown-divider {
    border-top:1px solid #eee;
}

/* ================== INFO BAR FORM STYLES ====================================== */
#infoBar {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 0px 30px;
    pointer-events: auto; 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 56px;
    background: #6A0136;
    background-size: 400% 400%;
    color: #ffffff;   
    justify-content: space-between;
    gap: 10px;  
    font-family: "Calibre", sans-serif;  
    font-size: 16px;  
    font-weight: 400; 
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.35s ease, opacity 0.35s ease;
    box-sizing: border-box;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    #infoBar {
        display: flex;
    }
}

#infoBar.visible {
    transform: translateY(0);
    opacity: 1;
}

#infoBar.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.info-bar-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 auto;
}

#infoBar .info-bar-link {
    color: #00B7F1;
    text-decoration: none !important;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.4rem;
}

#infoBar .info-bar-link:hover {
   color: #FF8C00;
   cursor: pointer;
}

.infoBar-animate {
    animation: infoBarGradient 20s ease infinite;
}

@keyframes infoBarGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulseOnce {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

#infoBar i.pulse {
    animation: pulseOnce 0.6s ease forwards;
}

#infoBarClose {
    display: none;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    align-self: flex-start;
}

#infoBarClose:hover {
    background: rgba(255,255,255,0.2);
    color: #FF8C00;
}

/* ================== CAPABILITIES FORM STYLES ==================================== */
.cap-section {
    padding: 5rem 2rem;
    max-width: 960px;
    margin: 0 auto;
    background: #ffffff;
}

.cap-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00baf2;
    margin-bottom: 0.75rem;
}

.cap-headline {
    font-size: 2rem;
    font-weight: 600;
    color: #343f75;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

.cap-sub {
    font-size: 1rem;
    color: #555;
    line-height: 1.75;
    max-width: 640px;
    margin: 0 0 2rem;
}

.cap-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 2.5rem;
}

.cap-card {
    -ms-flex: 1 1 260px;
    flex: 1 1 260px;
    background: #ffffff;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 1.5rem;
    box-sizing: border-box;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    transition: border-color 0.2s ease;
}

.cap-card:hover {
    border-color: #b0c4d8;
}

.cap-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eaf5fe;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 20px;
    color: #00baf2;
}

.cap-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a2340;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.cap-card-desc {
    font-size: 0.8125rem;
    color: #666;
    line-height: 1.65;
    margin: 0;
}

.cap-divider {
    border: none;
    border-top: 1px solid #dde2ea;
    margin: 0 0 2.5rem;
}

.cap-solutions-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 0.5rem;
}

.cap-solutions-sub {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.65;
    max-width: 640px;
    margin: 0 0 1.5rem;
}

.cap-solutions-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
}

.cap-solution-card {
    -ms-flex: 1 1 280px;
    flex: 1 1 280px;
    background: #f7f9fc;
    border: 1px solid #dde2ea;
    border-radius: 12px;
    padding: 1.25rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cap-solution-card:hover {
    background: #343f75;
}

.cap-solution-card:hover .cap-solution-title {
    color: #ffffff;
}

.cap-solution-card:hover .cap-solution-desc {
    color: #cdd5f0;
}

.cap-solution-card.cap-solution-featured {
    background: #ffffff;
    border: 2px solid #00baf2;
}

.cap-solution-card.cap-solution-featured:hover {
    background: #343f75;
}

.cap-solution-card.cap-solution-featured:hover .cap-solution-title {
    color: #ffffff;
}

.cap-solution-card.cap-solution-featured:hover .cap-solution-desc {
    color: #cdd5f0;
}

.cap-solution-card.cap-solution-featured:hover .cap-tag-featured {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.cap-solution-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 0.75rem;
}

.cap-tag-general {
    background: #e6f4ea;
    color: #1e7e34;
}

.cap-tag-featured {
    background: #e6f9fe;
    color: #0090bb;
}

.cap-solution-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #343f75;
    margin: 0 0 0.4rem;
    transition: color 0.2s ease;
}

.cap-solution-desc {
    font-size: 0.8125rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    transition: color 0.2s ease;
}

/* ================== FOOTER FORM STYLES ==================================== */
.footer {
    width: 100%;
    padding: 20px 0;
    background-color: #000;
    color: #fff;
    flex-shrink: 0;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copy {
    font-size: 14px;
    line-height: 1.4;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.footer-links a {
    outline: none !important;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #ccc;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ================== HEADER STYLES ================== */
.header {
  padding: 30px 0 0;
  color: #fff;
  background-color: #000e4e;
}

.header-brand-section {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
}

.header-brand {
  display: flex;
}

/* ================== NAVIGATION STYLES ================== */
.nav {
  display: flex;
  align-items: center;            
  gap: 1.25rem;                  
  background: rgba(0,14,78);
  font-family: var(--font-base);
  font-size: 26px;
  position: relative;             
  padding: 0 20px;                
}

.nav-item {
  float: none;
}

.nav-link {
  display: block;
  padding: 0 21px;
  line-height: 75px;       
  color: #fff;
  text-decoration: none;
  transition: color .3s;
}

.nav-link:hover,
.nav-link:focus,
.is-active .nav-link {
  color: rgba(0,79,113,1);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  margin-left: auto;      
}

.nav-toggle .bar {
  width: 24px;
  height: 3px;
  background-color: #fff;
  transition: transform .3s ease;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    display: none;
    flex-direction: column; 
    width: 100%;
    background: rgba(0,14,78);
    position: absolute;
    top: 100%;             
    left: 0;
    z-index: 999;
  }
  .nav-links.active {
    display: flex;
  }
  .nav-link {
    padding: 12px 16px;
    line-height: normal;
    font-size: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  .nav-links .nav-item:last-child .nav-link {
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
}

.main-container {
    display: flex;
    justify-content: center;
    padding: 20px 20px;
}

.content-card {
    max-width: 1100px;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 10px 40px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.section-title {
    text-align: center;
    color: #002B5B;
    font-size: 28px;
    font-weight: 700;
}

.section-subtitle {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.panel {
    flex: 1 1 300px;
}

.panel-header {
    padding: 10px 15px;
    font-weight: 400;
    border-radius: 8px 8px 0 0;
}

.panel-body {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    list-style: none;
    margin: 0;
}

.panel-body li {
    padding: 6px;
    transition: background-color .3s ease;
}

.panel-body li:hover {
    background-color: rgba(0,168,204,0.1);
}

/* ================== PARTICIPANT FORM STYLES ========================================= */
.participants-section {
    padding: 0 20px;
    margin-top: 10px;
    background-color: #F0F0F0;
}

.participants-container {
    display: flex;
    flex-direction: column;
    text-align: left; 
    max-width: 95%;   
    margin: 0 auto;  
}

.participants-header {
    margin-bottom: 16px;
    padding: 0 10px;
    text-align: left;
}

.participants-button {
    padding: 0.75em 1.5em;          
    background-color: #00B7F1;       
    color: #000;                     
    font-weight: 400;                
    border: none;                    
    border-radius: 10px;          
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: all 0.25s ease;
    cursor: pointer;                      
    margin-top: 20px;   
}

.participants-button,
.participants-button:hover,
.participants-button:focus-visible,
.participants-button-container {
    text-decoration: none;
}

.participants-button:hover {
    background-color: #6A0136; 
    color: white;              
    transform: translateY(-2px);     
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);   
}

.participants-button:focus-visible {
    outline: 3px solid rgba(0, 43, 91, 0.4);
    outline-offset: 4px;
}

.participants-button-container {
    max-width: 400px;             
    width: 100%;           
}

.participants-link {
    font-size: 1rem;      
    font-weight: 500;
    color: #002B5B;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.participants-link i {
    font-size: 0.85rem;
}

.participants-link:hover,
.participants-link:focus {
    background-color: rgba(0, 43, 91, 0.1);
    text-decoration: none;
}

.participants-strip-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;       
    padding: 14px 18px;        
    height: 80px;
    min-width: 9.7%;
    border: 2px solid transparent;  
    border-radius: 8px;        
}

/* Participants Logo Strip - Display Even If JavaScript Is Disabled */
.participants-strip {
    display: flex;
    flex-direction: row;
    overflow-x: initial; 
    flex-wrap: wrap;
    user-select: none;
    cursor: pointer;    
    gap: 24px;
    scroll-snap-type: x mandatory;
    padding: 12px 4px;
    max-width: 100%;
    align-items: center;
    opacity: 1;
    transition: opacity 600ms ease;
}

/* JavaScript Fade In */
.js-enabled .participants-strip {
    opacity: 0; 
}

.js-enabled .participants-strip.is-visible {
    opacity: 1;
}

/* Keyboard Focus */
.participants-strip-link:focus-visible {
    min-width: 9.7%
    outline: 3px solid rgba(0, 43, 91, 0.4);
    outline-offset: 4px;
}

/* Logo Image */
.participants-strip img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;           
    filter: grayscale(100%);       
    opacity: 0.85;            
    transition: transform 200ms ease, filter 200ms ease, opacity 200ms ease;
}

/* Hover/Focus Effect on Logo */
.participants-strip img:hover,
.participants-strip img:focus {
    transform: translateY(-2px) scale(1.05);
    filter: grayscale(0%);        
    opacity: 1;                 
}

/* Participants – Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .js-enabled .participants-strip {
    opacity: 1 !important;
  }
  .participants-strip {
    scroll-snap-type: none !important;
  }
  .participants-strip img {
    transform: none !important;
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: none !important;
  }
  .participants-strip img:hover,
  .participants-strip img:focus {
    transform: none !important;
    filter: inherit !important;
    opacity: inherit !important;
  }
  .wave-highlight {
    animation: none !important;
  }
}

/* Participants Wave Animation */
@keyframes logoWaveHighlight {
    0% {
        filter: grayscale(100%);
        transform: translateY(0) scale(1);
        opacity: 0.85;
        box-shadow: none;
    }
    35% {
        filter: grayscale(0%);
        transform: translateY(-8px) scale(1.18);
        opacity: 1;
        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25);
    }
    100% {
        filter: grayscale(100%);
        transform: translateY(0) scale(1);
        opacity: 0.85;
        box-shadow: none;
    }
}

.wave-highlight {
    animation: logoWaveHighlight 0.55s ease forwards;
}

/* Participants Color Sections */
.participants { background-color: #00B7E1; color: #000E4E; }
.clients { background-color: #000E4E; color: #FFFFFF; }
.filters { background-color: #000000; color: #FFFFFF; }

/*  Participants Filter Buttons */
.filter-link {
    display: inline-block;
    padding: 8px 12px;
    background: #000E4E;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 400;
    text-decoration: none;
    width: 100%;    
}

.filter-link:hover,
.filter-link:focus {
    color: #fff !important;
    text-decoration: none !important;
    background: #00A8CC;
}

.filter-link.active {
    background: #00B7F1;   
    color: #000;
    font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
    section {
        padding: 30px 20px;
    }
    .mobile-filter {
        order: -1;
    }
    .participants-strip img {
        max-height: 36px;
    }
}

/* ================== GENERAL FORM STYLES ================== */
.body-content {
  padding: 0;
}

.feed-title,
.form-field,
.feed-header clearfix {
  color: rgba(0, 14, 78, 1);
}

.form label {
  --font-base: "Open Sans", sans-serif;
  font-family: var(--font-base);
  font-weight: 700;
}

.form-control {
  color: rgba(51, 51, 51, 1);
  border-radius: 0;
  width: 100%;
  font-size: 16px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.input-group-btn > .btn-default {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 106, 19, 1);
  border: 1px solid rgba(255, 106, 19, 0.9);
  border-radius: 0;
  min-width: 190px;
  text-align: left;
  padding-left: 15px;
  font-size: 16px;
  line-height: 1.7;
  height: 40px;
}

.input-group-btn > .btn-default:hover {
  background-color: rgba(255, 106, 19, 0.8);
  border: 1px solid rgba(255, 106, 19, 0.7);
}

.sign-in-btn {
    background: #fff;
    color: #000;
    padding: 8px 22px;
    border-radius: 50px;
    font-weight: bold;
    border: 1px solid #ccc;
    box-shadow: 0 3px 6px rgba(0,0,0,.2);
    cursor: pointer;
    white-space: nowrap;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.sign-in-btn:hover,
.sign-in-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.3);
    background-color: #f8f8f8;
}

.sign-in-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,.2);
}

.btn-primary,
.btn--primary,
.btn--default {
  border: 1px solid rgba(0, 14, 78) !important;
  border-radius: 0 !important;
  background-image: none !important; 
  background-color: #00B7F1;
  color: #000;
  --font-base: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1;
  height: auto;
  padding: 12px 20px;
  margin: 2px auto;
}

.btn-primary:hover,
.btn--primary:hover,
.btn--default:hover {
  background-color: #6A0136; 
  color: #fff;
  margin: 2px auto;
}

.btn-secondary {
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 0;
  background-color: rgba(255, 255, 255, 1);
  background-image: none !important;
  color: rgba(51, 51, 51, 1);
  --font-base: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1;
  height: auto;
  padding: 12px 20px;
  margin: 2px auto;
}

.btn-secondary:hover {
  background-color: rgba(230, 230, 230, 1);
}

.add-account-wrapper {
    margin-top: 20px;
    margin-left: 20px;
}

.edit-website-cell {
    padding-right: 20px;
}

.signout-btn {

}

/* Admin Layout Only */
body.admin-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

body.admin-layout .admin-page-content {
    flex: 1;
}

body.admin-layout .admin-footer {
    margin-top: auto;
}

/*
rdh

/* Highlight Row on Focus / Hover */
.DataTable tr:hover {
    background-color: #ffff99;             /* Added Light Yellow Color for Highlighting in ADMIN */
    cursor: pointer;
}*/

.DataTable > tbody > tr:hover {
    background-color: #ffff99;
    cursor: pointer;
}

.error {
  background-color: rgba(206, 0, 55, 1);
  color: rgba(255, 255, 255, 1);
  margin-top: 1px;
  padding: 3px 15px;
}

.has-error .form-control {
  border-color: rgba(206, 0, 55, 1) !important;
}

.errors {
  color: rgba(206, 0, 55, 1);
}

.gutter-30.row {
  margin-right: 0;
  margin-left: 0;
}

.gutter-30 > [class^="col-"],
.gutter-30 > [class^=" col-"] {
  padding-right: 30px;
  padding-left: 30px;
}

.gutter-20.row {
  margin-right: 0;
  margin-left: 0;
}

.gutter-20 > [class^="col-"],
.gutter-20 > [class^=" col-"] {
  padding-right: 20px;
  padding-left: 20px;
}

.gutter-10.row {
  margin-right: 0;
  margin-left: 0;
}

.gutter-10 > [class^="col-"],
.gutter-10 > [class^=" col-"] {
  padding-right: 10px;
  padding-left: 10px;
}

.gutter-0.row {
  margin-right: 0;
  margin-left: 0;
}

.gutter-0 > [class^="col-"],
.gutter-0 > [class^=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

#ApplicationFrame {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  min-width: 100%;
  position: relative;
}

#ApplicationFrameScreen {
}

#HomeScreen {
}

.CancelButton {
  top: -20px !important;
  left: -20px !important;
  float: right;
  cursor: pointer;
  color: rgba(206, 0, 55, 0.8);
  font-size: 40px;
  margin-bottom: -20px;
  margin-right: -20px;
  background-image: none !important;
}

.CancelButton:hover {
  color: rgba(206, 0, 55, 1);
}

.score-slick-slider .score-style-box {
  max-width: 100%;
  min-height: 350px;
  margin: 0 auto;
  background-color: rgba(245, 245, 245, 0.9);
}

.score-slick-slider.slides-to-show-2 .score-style-box,
.score-slick-slider.slides-to-show-3 .score-style-box,
.score-slick-slider.slides-to-show-4 .score-style-box {
  max-width: calc(100% - 20px);
}

.container.full-width,
.by-slider-hero .full-width.score-column2,
.score-slick-slider.by-quote-carousel .full-width.score-column2,
.score-slick-slider.by-quote-carousel-right .full-width.score-column2 {
  width: 100%;
}

.score-center,
.score-right,
.score-left,
.score-center2 {
  display: flex;
  flex-direction: column;
}

.score-column2.equal .score-center,
.score-column2.equal .score-right,
.score-column2.equal .score-left,
.score-column2.equal .score-center2,
.score-column2.wide-left .score-center,
.score-column2.wide-left .score-right,
.score-column2.wide-left .score-left,
.score-column2.wide-left .score-center2,
.score-column2.wide-right .score-center,
.score-column2.wide-right .score-right,
.score-column2.wide-right .score-left,
.score-column2.wide-right .score-center2 {
  justify-content: center;
}

.alternate-structure .score-column2.equal .score-center,
.alternate-structure .score-column2.equal .score-right,
.alternate-structure .score-column2.equal .score-left,
.alternate-structure .score-column2.equal .score-center2,
.alternate-structure .score-column2.wide-left .score-center,
.alternate-structure .score-column2.wide-left .score-right,
.alternate-structure .score-column2.wide-left .score-left,
.alternate-structure .score-column2.wide-left .score-center2,
.alternate-structure .score-column2.wide-right .score-center,
.alternate-structure .score-column2.wide-right .score-right,
.alternate-structure .score-column2.wide-right .score-left,
.alternate-structure .score-column2.wide-right .score-center2 {
  justify-content: flex-start;
}

div[class^="score-column"],
div[class*=" score-column"] {
  display: flex;
  flex-direction: column;
  margin-left: -15px;
  margin-right: -15px;
}

div[class^="score-column"]::before,
div[class^="score-column"]::after,
div[class*=" score-column"]::before,
div[class*=" score-column"]::after {
  content: " ";
  display: table;
}

div[class^="score-column"]::after,
div[class*=" score-column"]::after {
  clear: both;
}

@media (min-width: 992px) {
  div[class^="score-column"],
  div[class*=" score-column"] {
    flex-direction: row;
  }
}

div[class^="score-column"].equal.score-sm-column2 > .score-left,
div[class^="score-column"].equal.score-sm-column2 > .score-center,
div[class^="score-column"].equal.score-sm-column2 > .score-center2,
div[class^="score-column"].equal.score-sm-column2 > .score-right,
div[class*=" score-column"].equal.score-sm-column2 > .score-left,
div[class*=" score-column"].equal.score-sm-column2 > .score-center,
div[class*=" score-column"].equal.score-sm-column2 > .score-center2,
div[class*=" score-column"].equal.score-sm-column2 > .score-right {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

/* Disable Edge and Chromium Built-In Password Reveal */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}

/* ================== Admin Logo (Admin) Style ======================= */
.adminlogo-container {
	width: 100%;
	background: #000;
	padding: 20px;
	box-sizing: border-box;
	text-align: left;
}

.adminlogo-spacer {
	height: 20px;
}

.adminlogo-warning {
	margin-top: 10px;
	color: #ff4d4d;
	font-size: 12px;
	font-weight: 600;
}

.adminlogo-lock-icon {
	margin-right: 6px;
}

/* ================== Admin About Modal (Admin) Style ======================= */
.adminAbout-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.adminAbout-modal-content {
  background: white;
  border-radius: 8px;
  width: 1200px;
  max-width: 100vw;
  max-height: 98vh;          
  overflow-y: auto;          
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.adminAbout-header {
  background: #00B7F1;
  color: white;
  font-size: 18px;
  font-weight: 600;
  padding: 16px;
  text-align: center;
}

.adminAbout-body {
  display: flex;
  flex-direction: column;
  padding: 20px;
  font-family: Segoe UI, Calibre, sans-serif;
  color: #444;
}

.adminAbout-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.adminAbout-logo {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eee;
  padding-right: 15px;
}

.adminAbout-logo img {
  max-width: 100%;
  height: auto;
}

.adminAbout-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  font-size: 14px;
  width: 100%;
}

.adminAbout-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}

.adminAbout-label {
  font-weight: 600;
  min-width: 120px;
  color: #555;
}

.adminAbout-value {
  color: #222;
}

.adminAbout-divider {
  margin: 15px 0;
  border-top: 1px solid #eee;
}

.adminAbout-footer {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  line-height: 1.4;
}

.adminAbout-footer-support {
  color: #d32f2f;
  font-weight: 500;
}

.adminAbout-footer i.fab.fa-windows {
  margin-right: 8px;
  font-size: 1.1em;
}

.adminAbout-server-info {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.adminAbout-app-server,
.adminAbout-web-server {
  border: 2px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f9f9;
  flex: 1;
  min-width: 300px;
}

.adminAbout-server-title {
  color: #333;
  font-size: 1.1em;
  margin-bottom: 12px;
  text-align: center;
}

.adminAbout-server-title-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.adminAbout-server-title-vertical i {
  font-size: 20px;
  margin-bottom: 4px;
}

.adminAbout-server-detail {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 13px;
  color: #444;
}

.adminAbout-server-detail i {
  margin-top: 2px;
  color: #555;
}

.adminAbout-server-detail-label {
  font-weight: 600;
  margin-right: 4px;
  color: #333;
}

.adminAbout-close-btn {
  padding: 10px 18px 18px 18px;
  text-align: right;
  border-top: 1px solid #eee;
}

.adminAbout-close-btn button {
  padding: 6px 16px;
  border: 1px solid #bbb;
  background-color: #00B7F1;
  color: #000;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adminAbout-close-btn button:hover {
  background-color: #6A0136;
  color: #fff;
  transform: translateY(-2px);
}

/* Production = Green */
.env-prod {
  color: #2e7d32;
  font-weight: 600;
}

/* Standby = Red */
.env-standby {
  color: #c62828;
  font-weight: 600;
}

/* ================== Admin Access (No JavaScript Message) (Admin) Style ================== */
/* Hide Button When JavaScript Is Disabled */
.no-js .AdminAccessContinueButton {
    display: none;
}

/* When JavaScript Is Disabled */
.no-js .AdminAccessMain {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

/* Hides Login Card */
.no-js .AdminAccessCard:not(.AdminAccessNoJS) {
    display: none;
}

/* Center and Size no-js Card */
.AdminAccessNoJS {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.AdminAccessHeading i {
    margin-right: 10px;
}

/* ================== Admin Access Logo & Compliance (Admin) Style ======================== */
.admin_access_logo_container {
    width:100%;
    background:#000;
    padding:20px;
    box-sizing:border-box;
    text-align:left;
}

.admin_access_logo_spacer {
    height:20px;
}

.admin_access_logo_notice {
    margin-top:10px;
    color:#ff4d4d;
    font-size:12px;
    font-weight:600;
}

.admin_access_logo_icon {
    margin-right:6px;
}

/* ================== Unauthorized Access (Admin) Style ==================================== */
.UnauthActionArea {
    margin-top: 18px;
}

.UnauthStatusHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.UnauthStatusHeader i {
    font-size: 26px;
    color: #FF3B3B;
}

.UnauthCard {
    width: 100%;
    max-width: 420px;
    background-color: rgba(15,25,40,0.98);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,0,0,0.4);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35),
                0 0 15px rgba(255,0,0,0.2);
}

.UnauthCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, #FF3B3B, #C0392B);
}

.status-code {
    font-size: 14px;
    font-weight: 700;
    color: #FF3B3B;
    letter-spacing: 1px;
}

.status-text {
    font-size: 18px;
    font-weight: 600;
    color: #F0F0F0;
}

.UnauthBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 18px 0;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FF3B3B;
    background: rgba(255, 59, 59, 0.08);
    border: 1px solid rgba(255, 59, 59, 0.35);
    border-radius: 999px;
    text-transform: uppercase;
}

.UnauthMeta {
    margin-top: 16px;
    padding: 12px;
    font-size: 12px;
    color: #9CA3AF;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    text-align: left;
}

.UnauthMeta div {
    font-family: monospace;
    margin-bottom: 4px;
}

.UnauthBody {
    font-family: Calibre, sans-serif;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background: linear-gradient(-45deg, #0D1B2A, #1B263B, #415A77, #778DA9);
    background-size:400% 400%;
    animation:gradientBG 25s ease infinite;
    color:#F0F0F0;
}

.UnauthMain {
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    position: relative; 
}

.UnauthTitle {
    font-size:24px;
    font-weight:700;
    color:#F0F0F0;
    margin-bottom:16px;
}

.UnauthWarningIcon {
    color:#FF6B6B;
    margin-right:8px;
}

.UnauthWarningText {
    color:#FF6B6B;
}

.UnauthMessage {
    font-size:14px;
    color:#D1D5DB;
    line-height:1.5;
    margin-bottom:24px;
}

.UnauthButton{
    background: linear-gradient(135deg, #FF6B6B, #C0392B);
    color:#fff;
    padding:12px 24px;
    border-radius:50px;
    font-weight:bold;
    font-size:15px;
    border:none;
    cursor:pointer;
    box-shadow:0 6px 12px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.UnauthButton:hover{
    transform: translateY(-2px);
    box-shadow:0 8px 16px rgba(0,0,0,0.25);
}

@keyframes gradientBG{
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* ================== Admin Access (Admin) Style ================== */
.AdminAccessBody {
    font-family: Calibre, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(-45deg,#0D1B2A,#1B263B,#415A77,#778DA9);
    background-size: 400% 400%;
    animation: AdminAccessGradientBG 25s ease infinite;
    color: #FFFFFF; 
}

.AdminAccessMain {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.AdminAccessCard {
    position: relative;
    z-index: 1;
    background: #1E1E1E;
    padding: 40px;
    border-radius: 12px;
    width: 420px;
    max-width: 90%;
    box-shadow:
        0 0 8px #FF6B6B,
        0 0 16px #FF5252,
        0 0 24px #FF6B6B;
}

.AdminAccessHeadingTitle {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #FFFFFF;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}

.AdminAccessHeading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.AdminAccessShieldIcon {
    color: #FF6B6B;
    animation: AdminAccessIconPulse 2.5s ease-in-out infinite;
}

.AdminAccessTitle {
    color: #FF6B6B;
}

.AdminAccessDescription {    
    font-size: 0.75rem;
    color: #D1D5DB;
    line-height: 1.5;
    text-align: left;
    border-left: 4px solid #FF6B6B;
    padding-left: 14px;
    margin-top: 10px;
}

.AdminAccessDescription p {
    margin: 8px 0;
}

.AdminAccessButtonWrapper {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.AdminAccessContinueButton.iconOnly {
    position: relative;
    background: #FF6B6B;
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Hide Unlock Icon By Default */
.hoverUnlock {
    display: none;
}

/* Show Unlock On Hover */
.AdminAccessContinueButton.iconOnly:hover .defaultLock {
    display: none;
}

.AdminAccessContinueButton.iconOnly:hover .hoverUnlock {
    display: inline-block;
    color: #800020; /* Padlock Color On Hover */
    animation: PadlockPulse 1.5s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes PadlockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Pulse Shield Icon Animation */
@keyframes AdminAccessIconPulse {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(255,107,107,0.8),
            0 0 8px rgba(255,107,107,0.5),
            0 0 14px rgba(255,107,107,0.3);
    }
    50% {
        text-shadow:
            0 0 6px rgba(255,107,107,1),
            0 0 12px rgba(255,107,107,0.8),
            0 0 20px rgba(255,107,107,0.6);
    }
}

/* Pulse For Padlock Hover */
@keyframes PadlockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Animated gradient background */
@keyframes AdminAccessGradientBG {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* ================== Welcome New Admin (Admin) Style ================================= */
.NewAdminBody {
    font-family:Calibre,sans-serif;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:linear-gradient(-45deg,#1E3C72,#2A5298,#4B6CB7,#182848);
    background-size:400% 400%;
    animation:NewAdminGradientBG 25s ease infinite;
    overflow-x:hidden;
}

.NewAdminHeader {
    width:100%;
    background-color:#fff;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.NewAdminMain {
    flex:1 0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.NewAdminWelcomeCard {
    max-width:850px;
    width:100%;
    padding:50px 40px;
    border-radius:12px;
    background-color:#fff;
    box-shadow:0 6px 15px rgba(0,0,0,0.1);
    animation:NewAdminFadeInUp 1s ease forwards;
}

.NewAdminTitle {
    color:#002B5B;
    font-weight:700;
    font-size:26px;
    display:flex;
    align-items:center;
    gap:10px;
    letter-spacing:0.5px;
}

.NewAdminTitleIcon {
    font-size:32px;
    color:#002B5B;
}

.NewAdminSubtitle {
    font-weight:400;
    color:#333;
    line-height:1.7;
    margin-bottom:30px;
}

.NewAdminUserWrapper {
    font-size:20px;
    display:block;
}

.NewAdminUserName {
    font-weight:bold;
    color:#000;
    display:inline-flex;
    animation:NewAdminFadeInName 1s ease forwards;
}

.NewAdminFirstName {
    margin-right:6px;
}

.NewAdminLastName {
    margin-right:10px;
}

.NewAdminUserId {
    font-size:14px;
    color:#666;
}

.NewAdminDivider {
    border:0;
    height:1px;
    background:linear-gradient(to right,#1E3C72,#2A5298,#4B6CB7);
    margin:25px 0;
    border-radius:2px;
}

.NewAdminFormActions {
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

.NewAdminPrimaryBtn {
    background:linear-gradient(135deg,#1E3C72 0%,#2A5298 50%,#4B6CB7 100%);
    color:#fff !important;
    border-radius:50px;
    padding:12px 30px;
    font-weight:bold;
    font-size:15px;
    border:none;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
    transition:
        all 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease,
        filter 0.3s ease;
}

.NewAdminCancelBtn {
    background-color:#666;
    color:#fff;
    border-radius:50px;
    padding:12px 30px;
    font-weight:bold;
    font-size:15px;
    border:none;
    cursor:pointer;
}

.NewAdminPrimaryBtn:hover {
    transform:translateY(-3px) scale(1.08);
    box-shadow:
        0 8px 20px rgba(0,0,0,0.35),
        0 0 12px rgba(30,60,114,0.7),
        0 0 25px rgba(75,108,183,0.5);
    filter:brightness(1.1);
}

.NewAdminHelperText {
    margin-top:15px;
    font-size:14px;
    color:#666;
}

.NewAdminHighlight {
    font-weight:bold;
    color:#002B5B;
}

.NewAdminConfettiContainer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:9999;
}

.confetti-piece {
    position:absolute;
    width:8px;
    height:8px;
    opacity:0.9;
}

@keyframes NewAdminGradientBG {
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@keyframes NewAdminFadeInUp {
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes NewAdminFadeInName {
    0%{
        opacity:0;
        transform:translateY(5px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes confetti-fall {
    0%{
        transform:translateY(0) rotate(0deg);
        opacity:1;
    }

    100%{
        transform:translateY(300px) rotate(360deg);
        opacity:0;
    }
}

/* ================== Session Start (Admin) Style ========================================= */
.SessionStartBody {
    font-family: Calibre, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #F0F0F0;
    background: linear-gradient(-45deg, #0D1B2A, #1B263B, #415A77, #778DA9);
}

.SessionStartMain {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.SessionStartErrorBox {
    max-width: 900px;
    margin: 20px auto;
    padding: 12px 18px;
    background-color: #842029;
    color: #F8D7DA;
    border-radius: 6px;
    border: 1px solid #F5C2C7;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    animation: SessionStartFadeInError 0.5s ease forwards;
}

.SessionStartErrorIcon {
    margin-right: 6px;
}

.SessionStartLoginCard {
    width: 100%;
    max-width: 350px;
    background-color: rgba(15, 25, 40, 0.98);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 15px rgba(0, 128, 128, 0.2);
    border: 1px solid rgba(0, 128, 128, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px;
}

.SessionStartLoginTitle {
    font-size: 22px;
    font-weight: 600;
    color: #F0F0F0;
    margin-bottom: 16px;
}

.SessionStartSecurityNote {
    font-size: 12px;
    color: #a0a8b8;
    text-align: center;
    margin: -8px 0 20px 0;
}

.SessionStartForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.SessionStartField {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
}

.SessionStartLabel {
    font-size: 14px;
    margin-bottom: 4px;
}

.SessionStartInput {
    width: 100%;
    padding: 10px;
    border: 1px solid #3a5070;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    color: #F0F0F0;
    background-color: #1E2A3A;
    transition: border-color 0.2s;
}

.SessionStartPasswordWrapper {
    position: relative;
    width: 100%;
}

.SessionStartPasswordInput {
    padding-right: 40px;
}

.SessionStartPasswordToggle {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #ccc;
}

#eyeIcon {
    line-height: 1;
    display: block;
}

.SessionStartPasswordError {
    display: none;
    color: #FF6B6B;
    font-size: 13px;
    margin-top: 4px;
}

.SessionStartSubmitBtn {
    margin-top: 20px;
    background: #6A0136;
    color: #fff;
    padding: 12px 0;
    width: 100%;
    font-size: 15px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.SessionStartSubmitBtn:hover {
    background: #00B7F1;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    color: #000;
}

.SessionStartBody input:focus {
    border-color: #008080;
    outline: none;
}

.SessionStartBody input::placeholder {
    color: #aaa;
}

.SessionStartLoadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.SessionStartLoadingSpinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #ff6b6b;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: SessionStartSpin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes SessionStartSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.SessionStartLoadingMessage {
    font-size: 28px;
    text-align: center;
}

@keyframes SessionStartFadeInError {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ================== UNLOCK LOCKED ACCOUNT (Admin) STYLE =================================== */
.unlockacct-body {
    margin:0;
    padding:0;
    height:100%;
    font-family: Calibre, Helvetica, sans-serif;
    background:#eef2f7;
}

.unlockacct-wrapper {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.unlockacct-dialog {
    width:420px;
    background:#ffffff;
    border-radius:10px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
    padding:28px;
}

.unlockacct-title {
    font-size:20px;
    font-weight:bold;
    color:#1E3C72;
    margin-bottom:20px;
}

.unlockacct-label {
    font-weight:bold;
    font-size:14px;
    color:#333;
}

.unlockacct-userIdField {
    width:100%;
    margin-top:6px;
    padding:10px;
    border:1px solid #dcdcdc;
    border-radius:6px;
    background:#f7f7f7;
    font-weight:bold;
}

.unlockacct-buttonRow {
    margin-top:25px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.unlockacct-primaryBtn {
    background-color: #00B7F1;
    color: #000;
    border:none;
    border-radius:6px;
    padding:10px 22px;
    font-weight:normal;
    cursor:pointer;
}

.unlockacct-primaryBtn:hover {
    background-color: #6A0136; 
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;   
}

.unlockacct-secondaryBtn {
    background-color: #00B7F1;
    color: #000;
    border:none;
    border-radius:6px;
    padding:10px 22px;
    font-weight:normal; 
    cursor:pointer;
}

.unlockacct-secondaryBtn:hover {
    background-color: #6A0136; 
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;   
}

.unlockacct-successMsg {
    background:#e8f5e9;
    color:#2e7d32;
    padding:10px;
    border-radius:6px;
    margin-bottom:15px;
}

.unlockacct-errorMsg { 
    background:#ffebee;
    color:#c62828;
    padding:10px;
    border-radius:6px;
    margin-bottom:15px;
}

/* ================== APPLICATION REDIRECT FORM STYLES ===================================== */
.appredirect_body {
    color: white;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Calibre, sans-serif;
}

.appredirect_body .page-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.appredirect_body header,
.appredirect_body footer {
    flex-shrink: 0;
}

.appredirect_body .appredirect_content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 20px;
}


.appredirect_body .appredirect_center_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
}

.appredirect_body .appredirect_icon {
    font-size: 4rem;
    color: #ff4d4f;
    margin-bottom: 20px;
    animation: appredirect_pulse 1.5s infinite;
}

@keyframes appredirect_pulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.appredirect_body .appredirect_heading {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
}

.appredirect_body .appredirect_card {
    padding: 25px;
    border-radius: 12px;
    width: 100%;
    text-align: left;
}

.appredirect_body .appredirect_reference,
.appredirect_body .appredirect_action {
    margin-top: 15px;
    font-weight: bold;
    color: white;
}

.appredirectSubmitBtn {
    margin-top: 20px;
    background: #6A0136;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    padding: 10px 28px;
    font-size: 15px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;   
}

.appredirectSubmitBtn:hover {
    background: #00B7F1;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #000;
    text-decoration: none;
}

@media(max-width:768px) {
    .appredirect_body .appredirect_icon { font-size: 3rem; }
    .appredirect_body .appredirect_heading { font-size: 2rem; }
}

@media(max-width:480px) {
    .appredirect_body .appredirect_icon { font-size: 2.5rem; }
    .appredirect_body .appredirect_heading { font-size: 1.5rem; }
}

/* ================== ERROR FORM MESSAGE STYLES ========================================= */
.errormsg {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", Calibre, sans-serif;
    background: linear-gradient(
        -45deg,
        #1E3C72,
        #2A5298,
        #4B6CB7,
        #182848
    );
    background-size: 400% 400%;
    animation: gradientBG 25s ease infinite;
}

.errormsg .page-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.errormsg main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.errormsg .error-card {
    width: 100%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.96);
    padding: 32px 28px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.errormsg .error-icon {
    font-size: 56px;
    color: #DC2626;
    margin-bottom: 16px;
    animation: pulse 2s infinite;
}

.errormsg .error-title {
    font-size: 22px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 10px;
}

.errormsg .error-message {
    font-size: 14.5px;
    color: #4B5563;
    line-height: 1.6;
}

.errormsg .error-hint {
    margin-top: 16px;
    font-size: 13px;
    color: #6B7280;
}

.errormsg .error-id {
    margin-top: 22px;
    padding: 10px 14px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 8px;
    font-size: 12.5px;
    color: #334155;
    word-break: break-all;
}

.errormsg .error-id span {
    font-family: "Courier New", monospace;
    color: #0F172A;
}

.errormsg .error-id i {
    color: #DC2626;
    margin-right: 6px;
}

.errormsg .error-message,
.errormsg .error-hint,
.errormsg .error-id {
    text-align: left;  
}

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ================ PASSWORD FORM STYLES =================================== */
.auth-shell.userpass .password-flex-container {
    display: flex;
    gap: 40px; 
    align-items: flex-start;
    max-width: 100%;
}

.auth-shell.userpass .password-fields {
    flex: 1;
    min-width: 0;
}

.auth-shell.userpass .password-rules-panel {
    flex: 0 0 250px; 
    padding: 12px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

.auth-shell.userpass .password-rules-toggle {
    background: #00B7F1;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #000;
    text-decoration: none;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    padding: 12px 20px;
    margin-bottom: 20px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    transition: 
        transform 0.2s ease, 
        box-shadow 0.2s ease, 
        background 0.3s ease;
}

.auth-shell.userpass .password-rules-toggle:hover {
    background: #6A0136;
    color: #fff;
    font-weight: 400;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.auth-shell.userpass {
    font-family: Calibre, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(-45deg, #1E3C72, #2A5298, #4B6CB7, #182848);
    background-size: 400% 400%;
    animation: Password-gradientBG 25s ease infinite;
}

.auth-shell.userpass .password-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.auth-shell.userpass .password-login-container {
    width: 100%;
    max-width: 700px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #CBD5E1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px;
    background-clip: padding-box;
}

.auth-shell.userpass .password-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    text-align: left; 
}

.auth-shell.userpass .password-error-message {
    max-width: 900px;
    margin: 20px auto;
    padding: 12px 18px;
    background-color: #f8d7da;
    color: #721c24;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
    font-size: 14px;
    text-align: center;
}

.auth-shell.userpass .password-form-label {
    align-self: flex-start;
    font-size: 14px;
    margin-bottom: 4px;
}

.auth-shell.userpass .password-username {
    width: 100%;
    padding: 10px;
    padding-right: 40px;
    font-size: 14px;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 12px;
    background-color: #F1F5F9;
    color: #475569;
    cursor: not-allowed;
}

.auth-shell.userpass .password-input {
    width: 100%;
    padding: 10px;
    padding-right: 40px;
    font-size: 14px;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 12px;
    background-color: #fff;
}

.auth-shell.userpass .password-container {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    contain: layout paint style;
    isolation: isolate;
}

.auth-shell.userpass .toggle-password {
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;          
    margin: auto 0;     
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell.userpass .password-container .toggle-password:focus {
    outline: 2px solid #0078d7;
}

.auth-shell.userpass .password-strength {
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    display: block;
    width: 100%;
}

.auth-shell.userpass .password-strength .strength-bar {
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.auth-shell.userpass .password-strength .strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    background-color: transparent;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.auth-shell.userpass .password-strength .strength-text {
    margin-top: 4px;
}

.auth-shell.userpass .password-rules {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    display: block;
    visibility: visible;
}

.auth-shell.userpass .password-rules ul {
    margin: 4px 0 0 16px; 
    padding: 0;
}

.auth-shell.userpass .password-rules li {
    margin-bottom: 2px;
}

/* JavaScript Enabled Behavior  */
html.js-enabled .auth-shell.userpass .password-rules {
    display: none;
}

/* Password Strength States */
.auth-shell.userpass .strength-bar span.strength-veryweak { width: 25%; background-color: #d32f2f; }
.auth-shell.userpass .strength-bar span.strength-weak     { width: 50%; background-color: #f57c00; }
.auth-shell.userpass .strength-bar span.strength-good     { width: 75%; background-color: #fbc02d; }
.auth-shell.userpass .strength-bar span.strength-strong   { width: 100%; background-color: #2e7d32; }

.auth-shell.userpass .confirm-feedback {
    font-size: 0.85rem;
    margin-top: 4px;
    color: #d32f2f;
}

.auth-shell.userpass .confirm-feedback.valid {
    color: #388e3c;
}

.auth-shell.userpass .password-btn-submit {
    width: 100%;
    padding: 12px 0;
    background: #00B7F1;
    color: #000;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.3s ease;
}

.auth-shell.userpass .password-btn-submit:hover {
    background: #6A0136;
    color: #fff;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    text-decoration: none;
}

/* Animation */
@keyframes Password-gradientBG {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hide Elements By Default When JavaScript Is Disabled */
html.no-js .password-rules-toggle,
html.no-js .password-strength,
html.no-js .toggle-password {
    display: none !important;
}

/* Show Password Rules Panel When JavaScript Is Disabled */
html.no-js #passwordRules {
    display: block !important; 
}

/* Hide Password Rules Initially When JavaScript is Enabled */
html.js-enabled #passwordRules {
    display: none;
}

/* JS enabled: hidden by default */
html.js-enabled .password-rules-panel {
    display: none;
}

/* Visible state */
html.js-enabled .password-rules-panel.is-visible {
    display: block;
}

/* When JavaScript is Enabled Visibility Rules */
html.js-enabled .auth-shell.userpass .password-rules-toggle {
    display: inline-block;
}

html.js-enabled .auth-shell.userpass .password-strength {
    display: block;
    width: 100%;
}

html.js-enabled .auth-shell.userpass .toggle-password {
    display: inline-flex;   
    width: auto;            
}

/* ================ NEW USER FORM STYLES ============================================= */
.NewUser-body {
    font-family: Calibre, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(-45deg, #1E3C72, #2A5298, #4B6CB7, #182848);
    background-size: 400% 400%;
    animation: NewUser-gradientBG 25s ease infinite;
    overflow-x: hidden;
}

.NewUser-header {
    width: 100%;
    background-color: #fff;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.NewUser-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

.NewUser-main {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.NewUser-card {
    max-width: 850px;
    width: 100%;
    padding: 50px 40px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    animation: NewUser-fadeInUp 1s ease forwards;
}

.NewUser-title {
    font-size: 24px;
    font-weight: 600;
    color: #1F2A44;
    text-align: center;
    margin: 10px 0 20px;
}

.NewUser-icon {
    font-size: 36px;
}

.NewUser-welcomeIcon {
    font-size: 34px;
    color: #2F3E63; 
    opacity: 0.9;     
    margin-bottom: 24px;
    text-align: center;
}

.NewUser-message {
    margin-bottom: 36px;
}

.NewUser-greeting {
    font-size: 16px;
    font-weight: 600;
    color: #1F2A44;
    text-align: center;
    margin: 20px 0 18px;
}

.NewUser-subtext {
    font-size: 15px;
    line-height: 1.65;
    color: #4A5568;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;   
    text-align: left;
}

.NewUser-subtext p {
    margin: 0 0 12px 0;
}

.NewUser-name {
    font-weight: bold;
    color: #000;
    display: inline-flex;
    align-items: center;
    animation: NewUser-fadeInName 1s ease forwards;
}

.NewUser-firstName {
    margin-right: 6px;
}

.NewUser-lastName {
    margin-right: 10px;
}

.NewUser-userId {
    font-size: 14px;
    color: #666;
}

.NewUser-brand {
    font-weight: 600;
    color: #002B5B;
    white-space: nowrap;
}

.NewUser-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.NewUser-cardLogo {
    height: 30px;
    opacity: 0.9;
}

.NewUser-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.NewUser-btn {
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: bold;
    font-size: 15px;
    border: none;
    cursor: pointer;
}

.NewUser-btnPrimary {
    background: #6A0136;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #fff;
    text-decoration: none;
    font-weight: 400;
}

.NewUser-btnPrimary:hover {
    background: #00B7F1;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #000;
    text-decoration: none;
    font-weight: 400;
}

.NewUser-btnSecondary {
    background: #00B7F1;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #000;
    text-decoration: none;
    font-weight: 400;
}

.NewUser-btnSecondary:hover {
    background: #6A0136;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
    color: #fff;
    text-decoration: none;
    font-weight: 400;
}

.NewUser-divider {
    border: 0;
    border-top: 1px solid #E2E8F0;
    margin: 36px 0;
}

.NewUser-nextSteps {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
}

.NewUser-highlight {
    font-weight: bold;
    color: #002B5B;
}

.NewUser-confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.9;
}

/* ANIMATION */
@keyframes NewUser-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes NewUser-fadeInName {
    0%   { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes NewUser-gradientBG {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
}

/* ================ APP FORM STYLES ============================================== */
.App-body {
    font-family: Calibre, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(-45deg, #1E3C72, #2A5298, #4B6CB7, #182848);
    background-size: 400% 400%;
    animation: App-gradientBG 25s ease infinite;
}

.App.header {
    width: 100%;
    background-color: #fff;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.App.heading {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin: 20px auto;
    color: #000;
}

.App.main {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.App.card {
    width: 100%;
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #CBD5E1;
    text-align: center;
}

.App.error-box {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: 6px;
    font-size: 14px;
}

/* Animation */
@keyframes App-gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================== SESSION TIMEOUT FORM STYLES  ===================================== */
.sesstimo-icon {
    font-size: 3.5rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.session-expired-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
}

.icon-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.base-icon {
    position: absolute;
    font-size: 2rem;
    color: #fff;
    top: 0;
    left: 0;
}

.overlay-icon {
    position: absolute;
    font-size: 1.4rem;
    color: #FFD700;
    top: 0.5rem;
    left: 0.5rem;
}

.urgent-alert {
    position: absolute;
    font-size: 1rem;
    color: #FF5733;
    top: -0.2rem;
    right: -0.2rem;
    animation: pulse-session-expired 1.2s infinite;
}

@keyframes pulse-session-expired {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.sesstimo-body {
    font-family: Calibre, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(-45deg, #1E3C72, #2A5298, #4B6CB7, #182848);
    background-size: 400% 400%;
    animation: gradientBG 25s ease infinite;
}

.sesstimo-main {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.sesstimo-card {
    width: 100%;
    max-width: 450px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #CBD5E1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.sesstimo-title {
    font-size: 24px;
    font-weight: 600;
    color: #002B5B;
    margin-bottom: 16px;
}

.sesstimo-message {
    font-size: 15px;
    color: #555;
    margin-bottom: 24px;
    line-height: 1.5;
}

.sesstimo-message p {
    font-weight: normal;
}

.sesstimo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    background-color: #6A0136;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none !important;     
    white-space: nowrap;
}

.sesstimo-button:hover,
.sesstimo-button:focus,
.sesstimo-button:active {
    background-color: #00B7F1; 
    color: #000; 
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
    text-decoration: none !important;
}

.sesstimo-button:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

.sesstimo-button:focus-visible {
    outline: 2px solid #00ABE4;  
    outline-offset: 3px;
}
.sesstimo-main .sesstimo-button {
    margin: 24px auto 0;
    display: flex;
    width: fit-content;
}

.sesstimo-countdown {
    font-size: 14px;
    margin-bottom: 20px;
}

.sesstimo-bar-container {
    width: 100%;
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    margin-top: 10px;
    overflow: hidden;
}

.sesstimo-bar {
    width: 100%;
    height: 100%;
    background: green;
    transition: width 1s linear, background 1s linear;
}

/* Hide JavaScript Content By Default */
.js-only {
    display: none;
}

/* Show JavaScript Content When JavaScript Is Enabled */
.js-enabled .js-only {
    display: block;
}

/* JavaScript Disabled Message */
.sesstimo-nojs-message {
    background-color: #fff;
    color: #000000;
    padding: 20px;
    border-radius: 8px;
    font-weight: bold;
}

/* ANIMATION */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================== SUPPORT BANNER FORM STYLES  ======================================= */
#supportBannerPage .support-banner {
    position: relative;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;   
    justify-content: flex-start; 
    padding: 80px 60px 40px 60px;  
    box-sizing: border-box;
    margin-top: 40px; 
}

#supportBannerPage .banner-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#supportBannerPage h2.banner-heading {
    font-family: "Calibre", Calibre, sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 60px); 
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    max-width: 95%;               
    text-shadow: 0 2px 4px rgba(0,0,0,0.6),
                 0 6px 16px rgba(0,0,0,0.4);
    word-break: break-word;       
    overflow-wrap: break-word;    
}

#supportBannerPage .banner-buttons {
    display: flex;
    gap: 16px;
}

#supportBannerPage .banner-btn {
    padding: 0.75em 1.5em;
    font-family: "Calibre", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#supportBannerPage .bannercontact-btn {
    background-color: #00B7F1;;
}

#supportBannerPage .bannerchat-btn {
    background-color: #00B7F1;
}

#supportBannerPage .banner-btn:hover {
    background-color: #6A0136; 
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;     
}

/* Mobile */
@media (max-width: 768px) {
    #supportBannerPage .support-banner {
        padding: 20px 30px;
        height: 320px;
        align-items: flex-start; /* Align Top For Mobile */
    }
    #supportBannerPage .banner-buttons {
        flex-direction: column;
        gap: 12px;
    }
    #supportBannerPage .banner-btn {
        font-size: 14px;
        padding: 0.5em 1em;
    }
}
/* ================== SESSION KEEP ALIVE MODAL FORM STYLES  ======================================= */
#sessionModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

#sessionModal.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.sessionModalContent {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-family: Calibre, sans-serif;
}

.sessionModalContent h3 {
    margin-top: 0;
    font-size: 22px;
    color: #333;
}

.sessionModalContent p {
    margin: 10px 0;
    font-size: 16px;
    color: #555;
}

#countdown {
    font-weight: bold;
    color: #d9534f;
    font-size: 18px;
}

.flash-countdown {
    animation: flashRed 1s infinite;
}

@keyframes flashRed {
    0%,100% { color: #d9534f; }
    50% { color: #f0ad4e; }
}

.sessionModalButtons { margin-top: 20px; }

.stayBtn {
    background-color: #00B7F1;
    color: #000;
    transform: translateY(-2px);
    text-decoration: none;     
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}
.stayBtn:hover { 
    background-color: #6A0136; 
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;     
}

.sessionProgressContainer {
    width: 100%;
    background: #e0e0e0;
    height: 8px;
    border-radius: 4px;
    margin: 10px 0;
}
.sessionProgressBar {
    width: 100%;
    height: 100%;
    background-color: #0275d8;
    border-radius: 4px;
    transition: width 1s linear;
}

/* FADE IN ANIMATION */
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}
/* ================== GLOBAL MESSAGE STYLES  ======================================= */
.global-right {
    width: 100%;
    display: flex;           
    justify-content: flex-end;  
    background-color: #000;
    background-image: linear-gradient(#000, #000);
    padding: 6px 10px;
    box-sizing: border-box;
    margin: 0;
    position: relative;
    z-index: 10;
    outline: 1px solid #000;
}

.global-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin: 0;
    max-width: 420px;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid rgba(255,255,255,0.06);
    background-color: #111;
} 

.global-right,
.global-message {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Text and Timestamp */
.message-content {
    display: flex;
    flex-direction: column;
}

/* Main Text */
.message-text {
    font-weight: 500;
}

/* Timestamp */
.timestamp {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
}

/* Icon */
.global-message i {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Severity Styles */
.global-message.RED {
    background-color: #2b0000;
    color: #ff6b6b;
    border-left: 4px solid #ff0000;
}

.global-message.YELLOW {
    background-color: #2b2400;
    color: #ffd966;
    border-left: 4px solid gold;
}

.global-message.GREEN {
    background-color: #002b00;
    color: #6bff95;
    border-left: 4px solid green;
}

/* ================== MOVED PAGE STYLES  ==================================== */
.Moved-body {
    margin: 0;
    padding: 0;
    font-family: Calibre, sans-serif;
    background: #f5f7fb;
    color: #1a1a1a;
}

.Moved-main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 40px 20px;
}

.Moved-card {
    background: #ffffff;
    width: 100%;
    max-width: 520px;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.Moved-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.Moved-cardLogo {
    height: 40px;
    margin-bottom: 12px;
}

.Moved-icon {
    font-size: 28px;
    color: #0073e6;
    margin-top: 6px;
}

.Moved-title {
    font-size: 22px;
    font-weight: 400;
    margin: 10px 0 16px 0;
    color: #1f2a44;
}

.Moved-message {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

.Moved-message p {
    margin: 10px 0;
}

.Moved-url {
    color: #00baf2;
    font-weight: 600;
    text-decoration: none;
}

.Moved-url:hover {
    text-decoration: underline;
}

.Moved-divider {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #e6e6e6;
}

.Moved-actions {
    margin-top: 10px;
}

.Moved-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.Moved-btnPrimary {
    background: #6A0136;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
}

.Moved-btnPrimary:hover {
    background: #00B7F1;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    color: #000;
    text-decoration: none;
}

@media (max-width: 600px) {
    .Moved-card {
        padding: 24px;
    }

    .Moved-title {
        font-size: 20px;
    }
}

/* ================== MARKETO - REQUEST DEMO PAGE STYLES  ==================================== */
.requestdemo-section {
    background-color: #f4f4f4;
    padding: 3rem 1rem;
    min-height: calc(100vh - 200px);
}

.requestdemo-container {
    max-width: 700px;
    margin: 0 auto;
}

.requestdemo-header {
    margin-bottom: 1.5rem;
}

.requestdemo-header-eyebrow {
    font-size: 0.8rem;
    color: #666;
    margin: 0 0 0.25rem;
}

.requestdemo-header-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.requestdemo-header-subtitle {
    font-size: 0.875rem;
    color: #666;
    margin: 0.4rem 0 0;
}

.requestdemo-form-wrapper {
    background: #ffffff;
    border-radius: 4px;
    padding: 2.5rem 2rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Strip Marketo Shell */
c,
#mktoForm_19422 .mktoForm {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    font-family: inherit !important;
}

/* Full-width Rows and Field Wraps */
#mktoForm_19422 .mktoFormRow,
#mktoForm_19422 .mktoFieldWrap,
#mktoForm_19422 .mktoFormCol {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* Hide Empty Form While Marketo Loads */
#mktoForm_19422:empty {
    display: none !important; 
}

/* Two Column Pairing */
#mktoForm_19422 .mktoFormRow:has(#Email),
#mktoForm_19422 .mktoFormRow:has(#Company),
#mktoForm_19422 .mktoFormRow:has(#Title),
#mktoForm_19422 .mktoFormRow:has(#Country) {
    display: inline-block !important;
    width: calc(50% - 0.5rem) !important;
    vertical-align: top;
}

#mktoForm_19422 .mktoFormRow:has(#Email),
#mktoForm_19422 .mktoFormRow:has(#Title) {
    margin-right: 1rem;
}

#mktoForm_19422 .mktoFormRow:has(#Company),
#mktoForm_19422 .mktoFormRow:has(#Country) {
    margin-right: 0;
}

/* Labels */
#mktoForm_19422 .mktoFieldDescriptor .mktoLabel,
#mktoForm_19422 .mktoFieldDescriptor label {
    display: block !important;
    float: none !important;
    width: auto !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 0.35rem !important;
}

/* Hide Asterisk */
#mktoForm_19422 .mktoAsterix {
    display: none !important;
}

/* Inputs, Selects, and Textareas */
#mktoForm_19422 input[type="text"],
#mktoForm_19422 input[type="email"],
#mktoForm_19422 input[type="tel"],
#mktoForm_19422 select,
#mktoForm_19422 textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 2.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease;
}

#mktoForm_19422 textarea {
    height: auto !important;
    min-height: 5rem !important;
    resize: vertical;
}

#mktoForm_19422 input[type="text"]:focus,
#mktoForm_19422 input[type="email"]:focus,
#mktoForm_19422 input[type="tel"]:focus,
#mktoForm_19422 select:focus,
#mktoForm_19422 textarea:focus {
    border-color: #00baf2 !important;
    outline: none !important;
}

/* Field Row Spacing */
#mktoForm_19422 .mktoFormRow {
    margin-bottom: 1.25rem !important;
}

/* Opt-in Field Wrapper */
#mktoForm_19422 div.mktoLogicalField.mktoCheckboxList {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Opt-in Checkbox Input */
#mktoForm_19422 .mktoLogicalField input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-height: unset !important;
    padding: 0 !important;
    margin: 3px 0 0 0 !important;
    cursor: pointer;
    background-color: transparent !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    opacity: 1 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

/* Opt-in Label */
#mktoForm_19422 .mktoLogicalField label {
    display: inline !important;
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    color: #555 !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    width: auto !important;
    float: none !important;
}

/* Hide Marketo Checkbox Checkmark Indicator */
#mktoForm_19422 .mktoLogicalField label[for^="mktoCheckbox"]::before,
#mktoForm_19422 .mktoLogicalField label[for^="mktoCheckbox"]::after {
    display: none !important;
    content: none !important;
}

/* Submit Button */
#mktoForm_19422 .mktoButtonRow {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mktoForm_19422 .mktoButtonWrap {
    margin: 0 !important;
    padding: 0 !important;
}

#mktoForm_19422 .mktoButton {
    background: #343f75 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 0.6rem 2rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline-block !important;
    line-height: normal !important;
    height: auto !important;
}

#mktoForm_19422 .mktoButton:hover {
    background: #00baf2 !important;
}

/* Validation Error Messages */
#mktoForm_19422 .mktoError {
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

#mktoForm_19422 .mktoError .mktoErrorMsg {
    font-size: 0.78rem !important;
    color: #c00 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.2rem 0 0 !important;
}

/* Hide Error Arrow Indicator */
#mktoForm_19422 .mktoErrorArrowWrap {
    display: none !important;
}

/* Validation Error Highlight */
#mktoForm_19422 .mktoInvalid,
#mktoForm_19422 .mktoInvalid .mktoLabel,
#mktoForm_19422 .mktoInvalid label {
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    color: #333 !important;
}

#mktoForm_19422 input.mktoInvalid,
#mktoForm_19422 select.mktoInvalid,
#mktoForm_19422 textarea.mktoInvalid {
    border: 1px solid #c00 !important;
}

/* Thank You */
.requestdemo-thankyou {
    display: none;
    text-align: center;
    padding: 3rem 1rem;
}

.requestdemo-thankyou.is-visible {
    display: block;
}

.requestdemo-thankyou-heading {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: #343f75;
}

.requestdemo-thankyou-text {
    font-size: 1.1rem;
    color: #555;
}

.requestdemo-thankyou-redirect {
    font-size: 0.9rem;
    color: #888;
    margin-top: 1rem;
    font-style: italic;
}

/* ================== ADMIN STYLES  ==================================== */
.admin-layout header {
    margin-bottom: 10px;  
}

/* ================== VIEW LOG STYLES  ==================================== */

/* PAGE LAYOUT — Push Footer */
.viewlog-body .page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.viewlog-content {
    flex: 1;
    padding: 20px 30px;
}

/* LOGIN PAGE LAYOUT — Full Width Header/Footer, centered Form */
.viewlog-login-body .page-wrap {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.viewlog-login-body .page-wrap > div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* FORCE HEADER AND FOOTER FULL WIDTH ON LOG VIEWER PAGES */
.viewlog-login-body .header-private,
.viewlog-body .header-private,
.viewlog-login-body .footer,
.viewlog-body .footer {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* LOGIN SCREEN */
.viewlog-login-body       { font-family: Arial, sans-serif; margin: 0; background: #f5f5f5; }
.viewlog-login-box        { background: white; padding: 36px 40px; border-radius: 6px;
                            box-shadow: 0 2px 10px rgba(0,0,0,0.12); width: 320px; }
.viewlog-login-title      { color: #003366; margin-top: 0; margin-bottom: 20px; font-size: 1.2em; }
.viewlog-login-label      { display: block; font-weight: bold; margin-bottom: 6px; font-size: 0.9em; }
.viewlog-login-input-wrap { position: relative; display: flex; align-items: center; }
.viewlog-login-input      { width: 100%; padding: 7px; padding-right: 38px; box-sizing: border-box;
                            border: 1px solid #ccc; border-radius: 3px; font-size: 0.95em; }
.viewlog-login-eye        { position: absolute; right: 6px; background: none; border: none;
                            cursor: pointer; color: #666; padding: 0; line-height: 0;
                            display: flex; align-items: center; }
.viewlog-login-eye:hover  { color: #003366; }
.viewlog-login-btn        { margin-top: 16px; width: 100%; background: #003366; color: white;
                            padding: 8px; border: none; border-radius: 3px;
                            cursor: pointer; font-size: 0.95em; }
.viewlog-login-btn:hover  { background: #0055aa; }
.viewlog-login-error      { color: #cc0000; font-size: 0.88em; margin-top: 12px; }

/* MAIN VIEWER */
.viewlog-body             { font-family: Arial, sans-serif; margin: 0; background: #f5f5f5; }
.viewlog-title            { color: #003366; }
.viewlog-form-row         { margin-bottom: 10px; }
.viewlog-label            { display: inline-block; width: 120px; font-weight: bold; }
.viewlog-input-short      { width: 160px; padding: 4px; }
.viewlog-input-long       { width: 400px; padding: 4px; }
.viewlog-btn              { background: #003366; color: white; padding: 6px 20px; border: none; cursor: pointer; border-radius: 3px; }
.viewlog-btn:hover        { background: #0055aa; }
.viewlog-error            { color: red; font-weight: bold; margin: 10px 0; }
.viewlog-results          { margin-top: 20px; }
.viewlog-summary          { font-weight: bold; margin-bottom: 10px; color: #003366; }
.viewlog-source-label     { font-weight: bold; }
.viewlog-no-results       { color: #666; font-style: italic; }
.viewlog-hidden           { display: none; }

/* WAS LOG ENTRIES (Severity Color Coded */
.viewlog-entry            { padding: 8px; margin-bottom: 6px; font-family: monospace; font-size: 12px;
                            white-space: pre-wrap; word-wrap: break-word; border-radius: 3px;
                            border-left: 4px solid #ccc; background: white; }
.viewlog-entry-sysout     { background: white;   border-left-color: #aaaaaa; }
.viewlog-entry-info       { background: #f0f8ff; border-left-color: #0055aa; }
.viewlog-entry-warning    { background: #fffbe6; border-left-color: #f0a500; }
.viewlog-entry-error      { background: #fff0f0; border-left-color: #cc0000; }
.viewlog-entry-fatal      { background: #ffe0e0; border-left-color: #800000; font-weight: bold; }
.viewlog-entry-audit      { background: #f0fff0; border-left-color: #007700; }

/* IHS / PLUGIN / PROXY TAIL MODE */
.viewlog-tail-block       { font-family: monospace; font-size: 0.78rem; }
.viewlog-tail-line        { padding: 2px 6px; border-bottom: 1px solid rgba(0,0,0,0.05); word-break: break-all; }


/* ================== REDUCED MOTION / ACCESSIBILITY  ================== */
@media (prefers-reduced-motion: reduce) {

  /* ------------------ Global Reset ----------------------------------- */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }

  /* ------------------ Freeze Backgrounds ----------------------------- */
  body.auth-shell.sstart,
  body.auth-shell.userpass,
  .errormsg,
  .NewUser-body,
  .App-body,
  #infoBar {
    background-size: auto !important;
    background-position: 50% 50% !important;
  }

  /* ------------------ Stop Wave Highlight Logos ---------------------- */
  .wave-highlight {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    box-shadow: none !important;
  }

  /* ------------------ Hide Visual Motion Layers ---------------------- */
  .sstart .login-glow,
  .sstart .login-glow::before,
  .sstart .login-glow::after,
  .auth-shell.userpass .login-glow,
  .solution-pill::after,
  .pulse,
  .infoBar-animate {
    display: none !important;
  }

  /* ------------------ Disable Video / Motion Media ------------------- */
  video,
  .video-hero-video-wrapper,
  .video-dots {
    display: none !important;
  }

  /* ------------------ Toggle Password Eye Icon ----------------------- */
  .toggle-password {
    transition: none !important;
    transform: none !important;
  }

  .auth-shell.userpass .toggle-password {
    top: 0;
    bottom: 0;
    margin: auto 0;               
    transform: none !important;   
    outline: none !important;     
  }

  /* ------------------ Freeze Animated Gradient Background ------------ */
  body.auth-shell.userpass {
    animation: none !important;   
    background-size: auto !important;
  }
}