/* Tokens handled by design-system/_tokens.css */
/* Typography handled by design-system - keeping login-specific padding */

body {
    padding-top: 20px;
  }

/* Modal visibility handled by Bootstrap - removed display:none */


  #login-container {
    display: flex;
    justify-content: center;
    padding-bottom: 80px;
    flex-direction: column;
    align-content: center;
    align-items: center;
    transition: height 0.3s ease-in-out; 
}

#login-card {
    width: 528px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    padding: 40px;
    background: var(--color-bg-primary);
    box-shadow: 0px 7px 23px 0px var(--color-black-alpha-10);
    overflow: hidden; /* Ensure the content is clipped properly */
    transition: height 0.3s ease-in-out !important; /* Smooth height transition for content changes */

}

  .sign-in-header{
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);

  }

  #login-card-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;

  }

  #login-container{

    display: flex;
    justify-content: center;
    padding-bottom: 80px;

  }

  .login-icon {
    width: 180px;

    margin-bottom: 24px;

  }

  .login-icon img{
    width: 100%;
    height: 100%;
  }

  #login-container .nav-tabs{
    display: flex;
    position: relative;
    width: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background-color: transparent;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }


  #login-container .nav-item{

    border: 0px;
  }

  #login-container form{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  #login-container .tab-content{
    width: 100%;
  }


  #forgot-remember{
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  /* Remove Bootstrap's padding-left on checkbox to align with inputs */
  #forgot-remember .form-check.checkbox {
    padding-left: 0;
  }


  /* ========================================
     LOGIN/SIGNUP PAGE TAB OVERRIDES
     These override design system defaults for the segmented tabs
     on the login and signup page specifically.
     ======================================== */

  /* Container: gray background segmented control */
  #login-container .nav-tabs-container.tabs--segmented {
    width: 100%;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    padding: 4px;
    margin-top: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  /* Nav tabs within login container */
  #login-container .nav-tabs-container .nav-tabs {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    gap: 0;
  }

  /* Nav items fill equally */
  #login-container .nav-tabs-container .nav-item {
    flex: 1;
    border: none;
    margin: 0;
  }

  /* Tab links - inactive state */
  #login-container .nav-tabs-container .nav-link {
    display: flex;
    width: 100%;
    height: 41px;
    padding: 0 var(--space-4);
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    align-items: center;
    justify-content: center;
    transition: color var(--duration-normal) var(--ease-in-out),
                font-weight var(--duration-normal) var(--ease-in-out);
    margin-bottom: 0;
    position: relative;
    z-index: 2;
  }

  #login-container .nav-tabs-container .nav-link:hover:not(.active) {
    color: var(--color-text-secondary);
  }

  /* Tab links - active state (text styling only, background handled by slider) */
  #login-container .nav-tabs-container .nav-link.active {
    background-color: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    position: relative;
    z-index: 2;
  }

  /* Sliding tab indicator */
  #login-container .nav-tabs-container .tab-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    box-shadow: 0 1px 2px var(--color-black-alpha-5);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
  }

  /* Slider position for signup tab (right side) */
  #login-container .nav-tabs-container .tab-slider.slide-right {
    transform: translateX(100%);
  }

  /* Ensure nav-tabs-container has relative positioning for slider */
  #login-container .nav-tabs-container.tabs--segmented {
    position: relative;
  }

  #header-container p{
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    margin-bottom: 0px;
  }


/* Form styles handled by design-system/_forms.css */

/* ========================================
   INPUT WITH ICONS (Login Page)
   ======================================== */
#login-container .input-with-icon {
  position: relative;
  width: 100%;
}

#login-container .input-with-icon .input {
  width: 100%;
}

/* Left icon wrapper */
#login-container .input-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

#login-container .input-icon--left {
  left: 14px;
}

/* Subtle icon styling - light gray, faint appearance */
#login-container .input-icon .stk-icon,
#login-container .input-icon svg {
  color: var(--color-gray-300);
  transition: color 0.2s ease;
}

/* Input padding for icons */
#login-container .input--has-icon-left {
  padding-left: 42px;
}

#login-container .input--has-icon-right {
  padding-right: 42px;
}

/* Password toggle button - positioned on the right */
#login-container .password-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

#login-container .password-toggle:focus {
  outline: none;
}

#login-container .password-toggle .stk-icon,
#login-container .password-toggle svg {
  color: var(--color-gray-300);
  transition: color 0.2s ease;
}

#login-container .password-toggle:hover .stk-icon,
#login-container .password-toggle:hover svg {
  color: var(--color-gray-500);
}

/* Icon color change on input focus - changes to primary color */
#login-container .input-with-icon:focus-within .input-icon .stk-icon,
#login-container .input-with-icon:focus-within .input-icon svg,
#login-container .input-with-icon:focus-within .password-toggle .stk-icon,
#login-container .input-with-icon:focus-within .password-toggle svg {
  color: var(--color-primary);
}

/* Button styles handled by design-system/_buttons.css */

  #signupLink{
    transition: color .2s ease-in-out;
  }


  #signupLink:hover{
    color:var(--color-primary-hover) !important;
  }

  .forgot-password{
    font-size: 14px;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
  }

  .no-account a{
    font-size: 14px;
    color: var(--color-primary) !important;
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;

  }


  .no-account{
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-light);
    margin-top: 40px !important;
    margin-bottom: -8px;
  }


  body.login-page {
    background-image: url('/images/login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps background fixed during container size changes */
  }
  

  #passwordList{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--space-4);
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    margin-bottom: 4px;
    padding: 4px;
  }

/* ===================================
   Loadable Button (Two-Span Approach)
   =================================== */

/* The main button container */
.loadable-button {
  position: relative;
}

/* The text is shown by default */
.loadable-button .button-text {
  visibility: visible;
  opacity: 1;
  transition: none; /* no fade */
}

/* This WRAPPER is absolutely centered */
.loadable-button .button-spinner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Center it exactly over the button */
  transform: translate(-50%, -50%);
  /* hidden by default */
  opacity: 0;
  transition: none;
}

/* The actual spinner gets Bootstrap's spinning keyframes,
   we don't override transform here so it can spin. */
.loadable-button .button-spinner {
  margin: 0 !important;
  line-height: 0 !important; 
  vertical-align: middle !important;
  /* Let Bootstrap do the rotation transform. */
}

/* When .loading is added, hide text instantly, show spinner instantly */
.loadable-button.loading .button-text {
  visibility: hidden;
  opacity: 0;
}

.loadable-button.loading .button-spinner-wrapper {
  opacity: 1;
}

/* Keep the button from looking "dimmed" while disabled but still unclickable */
.loadable-button:disabled {
  pointer-events: none;
  opacity: 1;
}







  #passwordList .stk-icon{
    color: var(--color-gray-300);
  }


  #headerTitle, #headerSubtitle, #login, #signup {
    transition: opacity 0.3s ease-in-out; /* Match the fade-in/out duration */
}

#login, #signup {
    
    transition: opacity 0.3s ease-in-out;
  
}


.loginActionsMenu {
  padding: var(--space-4);
  width: 528px;
  display: flex;
  gap: var(--space-6);
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.loginActionsMenu a{
  text-decoration: none;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  color: var(--color-text-muted);
}

.loginActionsMenu p{
  padding: 0px;
  margin: 0px;

}

.forgot-password:hover{
  color: var(--color-primary-hover);
}


#companyIdError{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 8px;

  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 8px;
}

#emailError{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 8px;

  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 8px;

}

#loginEmailErrorDiv{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 8px;

  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 8px;

}

#passwordError{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 8px;
  margin-top: 8px;
  flex-direction: row;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px;

}

#loginPasswordErrorDiv {
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 8px;
  margin-top: 8px;
  flex-direction: row;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px;

}

#loginPasswordErrorDiv i{
  padding-top: 4px;
  margin: 0px;
}

#passwordError i{
  padding-top: 4px;
  margin: 0px;
}

#passwordMatchError{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 8px;
  margin-top: 8px;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 8px;

}

#passwordList li{
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}


.errorStyling{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 2px;
  margin-top: 8px;
  flex-direction: row;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px;



}

.errorStyling2{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-bottom: 2px;
  margin-top: 8px;
  flex-direction: row;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px;



}

.errorStyling2 i{
  padding-top: 2px;



}

#verify-email-form{
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#verify-email-form .card {
  width: 528px;
  border-radius: 12px;
  border: none;
  padding: 40px;
  background-color: transparent;
  overflow: hidden;
  transition: height 0.3s ease-in-out !important;
  display: flex;
  align-content: center;
  overflow: hidden;
  transition: height 0.3s ease-in-out !important;
  align-items: center;
}

#verify-email-form .card i {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

/* OTP input styles handled by design-system/_forms.css */

/* Verify email button - uses design system primary button tokens */
#verifySubmit {
  background-color: var(--color-primary);
  border: 2px solid var(--color-white-alpha-12);
  color: var(--color-text-inverse);
  padding: var(--space-3);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-button);
}

#verifySubmit:hover {
  background-color: var(--color-primary-hover);
}

/* Verification code digit inputs - add gap between inputs */
#verification-code-inputs {
  gap: var(--space-3, 12px);
}


.emailIconContainer{
    display: flex;
    width: 56px;
    height: 56px;
    padding: 14px;
    justify-content: center;
    align-items: center;

    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-primary);

    /* Shadows/shadow-xs-skeuomorphic */
    box-shadow: 0px 0px 0px 1px var(--color-black-alpha-15) inset, 0px -2px 0px 0px var(--color-black-alpha-5) inset, 0px 1px 2px 0px var(--color-black-alpha-5);
}

.emailIconContainer .stk-icon {
    color: var(--color-primary);
}

.verifyEmailButton{
  width: 356px;
}

#verify-email-form p{
  width: 356px;
  font-size: 14px;
}

.veText{
  background-color: var(--color-bg-primary);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.vHeadText{
  color: var(--color-text-primary);
  text-align: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.dret{
  font-size: var(--font-size-xs) !important;
  color: var(--color-text-muted);
}

.dret a:hover{
  font-size: 12px !important;
  color: var(--color-primary-hover) !important;
  text-decoration: none;
}

.highlight{
  font-weight: 700;

}

.dret a{
  transition: color .2s ease-in-out;
}

.ctrs{
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  padding-left: 4px;
}

/* Resend countdown styles */
.resend-container {
  padding-left: 4px;
}

.resend-countdown {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.countdown-seconds {
  font-variant-numeric: tabular-nums;
}

/* Spam info block styles */
.spam-info-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  max-width: 356px;
  text-align: left;
}

.spam-info-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.spam-info-text {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal, 1.5);
}

.btli{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: var(--space-2);
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-secondary) !important;
}

.btli i{
  font-size: 13px !important;
}

#verify-email-form form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-content: center;
  align-items: center;

}

.verifyError{
  display: flex;
  padding: 4px;
  font-size: 12px;
  margin-top: 8px;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 8px;
}


.vErrorStyle i{
  padding-top: 4px;

}

.errorStyling i{
  padding-top: 2px;
}
/* --------------------------error alert message styling!!! ---------------------------------------*/
#errorAlert {
  z-index: 1000;
  display: flex;
  min-width: 400px;
  padding: var(--space-4);
  align-items: flex-start;
  gap: var(--space-4);

  position: fixed;
  right: 32px;
  top: 32px;

  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);

  box-shadow: var(--shadow-xs);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#errorAlert.show {
  opacity: 1;
  visibility: visible;
}

#errorAlert.hidden {
  opacity: 0;
  visibility: hidden;
}

#errorAlert.exit {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.error-text h3 {
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.error-text p {
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.error-icon-container {
  position: absolute;
  width: 43px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 8px;
  top: 8px;
}

.error-icon-container i {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: var(--Size-Base-sizeMD, 20px);
  height: var(--Size-Base-sizeMD, 20px);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-error);
}

.error-icon-container::before,
.error-icon-container::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.error-icon-container:before {
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-error-light);
}

.error-icon-container::after {
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-error-light);
}

.error-text {
  margin-left: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: 8px;
}

.error-close-container {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.errorCloseIcon {
  font-size: 20px;
  color: var(--color-error);
}

/* --------------------------error alert message styling END!!! ---------------------------------------*/


/* --------------------------success alert message styling!!! ---------------------------------------*/
#passwordChangeSuccess{

  z-index: 1000;
  display: flex;
  min-width: 400px;
  padding: var(--space-4);
  align-items: flex-start;
  gap: var(--space-4);

  position: fixed;
  right: 32px;

  top: 32px;

  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);

  /* Shadows/shadow-xs */
  box-shadow: var(--shadow-xs);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;


}


#passwordChangeSuccess.show {
  opacity: 1;
  visibility: visible;
}

#passwordChangeSuccess.hidden {
  opacity: 0;
  visibility: hidden;
}

.success-text h3{
  color: var(--color-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.success-text p{
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}



.success-icon-container {
  position: absolute;
  width: 43px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 8px;
  top: 8px;
}

.success-icon-container i {
  display: flex;
  width: var(--Size-Base-sizeMD, 20px);
  height: var(--Size-Base-sizeMD, 20px);
  flex-shrink: 0;
  border-radius: var(--radius-full, 9999px);
  color: var(--color-success);
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;



}

.success-icon-container::before,
.success-icon-container::after {
  content: '';
  position: absolute;
  border-radius: 50%;

}

.success-icon-container:before {
  width: 40px; /* Outer ring */
  height: 40px;
  border: 2px solid var(--color-success-light);
}

.success-icon-container::after {
  width: 30px; /* Inner ring */
  height: 30px;

  border: 2px solid var(--color-success-light);
}


.login-page .alert-success{
  display: none;
}

.success-text{
  margin-left: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: 8px;
}

.success-text h3{
  margin: 0px !important;
}

.success-text p{
  margin: 0px !important;
}

.success-close-container {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

#closeIcon {
  font-size: var(--font-size-lg);
  color: var(--color-gray-400); /* Adjust color as needed */
}

.hidden {
  opacity: 0 !important; 
}

.successCloseIcon {
  color: var(--color-gray-400) !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

.successCloseIcon:hover {
  color: var(--color-gray-600) !important;
}

/* --------------------------success alert message styling END!!! ---------------------------------------*/




.tooltip-icon i {
  margin-left: 5px;
  color: var(--color-gray-400);
  transition: color .2s ease-in-out;
}

.tooltip-icon i:hover {
  margin-left: 5px;
  color: var(--color-gray-600);
}


.tooltip-inner {
  box-shadow: 0 4px 6px var(--color-black-alpha-10), 0 1px 3px var(--color-black-alpha-8);
  background-color: var(--color-bg-primary) !important;
  font-size: var(--font-size-sm);
  text-align: left !important;
  max-width: 200px;
  padding: .25rem .5rem;
  color: var(--color-text-primary);
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
  right: -1px;
  border-width: .4rem .4rem .4rem 0;
  border-right-color: var(--color-gray-200);
}





/* 2FA Styles */
/* Modal styles handled by design-system/_modals.css */

#login-2fa-modal .stk-icon{
  font-size: 18px;
}

.lock-icon {
  font-size: var(--font-size-2xl);
  color: var(--color-gray-600);
}

#qr-code {
  text-align: center;
  display: flex;
  /* width: 100%; */
  max-width: 100%;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  justify-content: center;
  align-items: center;

}

#login-2fa-modal  .modal-dialog-centered{
  max-width: 512px;
}

#login-2fa-modal .form-control{
  display: flex;
  min-width: 64px;
  min-height: 64px;
  max-height: 64px;
  max-width: 64px;
  padding: var(--space-1) var(--space-2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);

  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-primary);

  /* Shadows/shadow-xs */
  box-shadow: var(--shadow-xs);


}

.signin-logs-table {
  width: 100%;
  border-collapse: collapse;
}

.signin-logs-table th,
.signin-logs-table td {
  border: 1px solid var(--color-border-light);
  padding: var(--space-2);
}

.signin-logs-table th {
  background-color: var(--color-bg-secondary);
  text-align: left;
}


/* Hide Disable 2FA button by default */
#disable-2fa-button {
  display: none;
}

/* If 2FA is enabled, show Disable 2FA and hide Enable 2FA */
.is-2fa-enabled #disable-2fa-button {
  display: inline-block;
}

.is-2fa-enabled #enable-2fa-button {
  display: none;
}




/* Modal display:none and backdrop handled by design system */

#subscription-blocked-modal .modal-body{
  font-weight: 600;
}

.red{
  color: var(--color-error);
}



/* RESPONSIVE */


@media (max-width:550px){


  #login-card{
    width:100%;  
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height:100%;
    border:none;
    border-radius:0px;
    box-shadow:none;
    }

  .loginActionsMenu{
    width:100%;
  }




}