#content_form {
    margin-bottom: 5px;
}

/* -------------------------------------------------------------------------- */
/* Mobile-first responsive: Page title padding on mobile                       */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

    .hw-home-hero__title,
    .hw-cases-hero__title,
    .hw-case-hero__title,
    .hw-create-case__title,
    .hw-faq__title,
    .hw-profile__title,
    .page-header h1,
    .sectionBlockLayout h1:first-of-type {
        padding-top: 4px !important;
    }
}

div#navbar {
    background-color: #1c232d;
}

.open>.dropdown-menu {
    background-color: var(--portalThemeColor4, #1c232d);
}

.open>.dropdown-menu>li>a {
    color: var(--portalThemeOnColor9, #1276CE);
}


.open .dropdown-menu>li>a:hover,
.dropdown-menu>.active>a:hover {
    color: var(--portalThemeColor4, #1c232d);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: none !important;

}

.dropdown-menu>.active>a {
    color: var(--portalThemeColor4, #1c232d);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: none !important;

}

.open .dropdown-menu>.active>a:focus {
    color: var(--portalThemeColor4, #1c232d);
    background-color: var(--portalThemeOnColor9, #1276CE);
    text-decoration: none !important;

}

footer .footer-bottom {
    background-color: #1c232d !important;
    display: inline;
}

body:has([data-hw-hide-footer-auth][data-hw-auth="1"]) footer[role="contentinfo"],
body.hw-hide-footer footer[role="contentinfo"] {
    display: none !important;
}

h1 {
    color: #ced1d6;
}

a {
    color: #ced1d6 !important;
}

body {
    background-color: #1c232d !important;
}

/* Navbar styling (no underline/box overlay; color-only hover/focus) */
.navbar.navbar-inverse {
    background-color: #1c232d;
    border-color: rgba(255, 255, 255, 0.10);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Full-width header: logo left, nav right (with comfortable edge padding) */
.navbar.navbar-inverse .hw-navbar__container {
    width: 100%;
    max-width: none;
    border-bottom: 1px solid rgb(44 53 68);
}

.navbar.navbar-inverse .hw-navbar__container .navbar-brand {
    margin-left: 0 !important;
    padding: 6px 15px !important;
}

.navbar.navbar-inverse .hw-navbar__container .navbar-right {
    margin-right: 0 !important;
}

/* Keep brand/link tidy on dark background */
.navbar.navbar-inverse .navbar-brand a {
    color: rgba(206, 209, 214, 0.92) !important;
    text-decoration: none !important;
}

.navbar.navbar-inverse .navbar-brand a:hover,
.navbar.navbar-inverse .navbar-brand a:focus {
    color: rgba(206, 209, 214, 0.72) !important;
    text-decoration: none !important;
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-nav>li>a:visited {
    color: rgba(206, 209, 214, 0.92) !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:active {
    color: rgba(206, 209, 214, 0.72) !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
    color: rgba(206, 209, 214, 0.92) !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
    background: transparent !important;
    color: rgba(206, 209, 214, 0.92) !important;
}

:root {
    --hw-header-h: 72px;
}

html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#content-container {
    flex: 1 0 auto;
}

body.hw-has-shell #content-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

footer[role="contentinfo"] {
    margin-top: auto;
    margin-bottom: 10px;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

body.hw-hide-footer footer[role="contentinfo"] {
    display: none !important;
}

footer .footer-bottom {
    position: static !important;
}

/* -------------------------------------------------------------------------- */
/* "Back to My Cases" Navigation for Create/Edit Case pages                   */
/* -------------------------------------------------------------------------- */
.hw-caseForm__row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 8px;
}

.hw-caseForm__container {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.hw-caseForm__col {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 310px;
    word-break: break-word;
}

.hw-auth-back,
.hw-case-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 0 14px;
    border-radius: 10px;
    font-family: Segoe UI;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: rgba(206, 209, 214, 0.85) !important;
    text-decoration: none !important;
    background: transparent;
    width: fit-content;
}

.hw-auth-back:hover,
.hw-auth-back:focus,
.hw-case-back:hover,
.hw-case-back:focus {
    color: rgba(206, 209, 214, 0.65) !important;
    text-decoration: none !important;
    background: transparent;
}

.hw-case-back:focus-visible {
    outline: 2px solid rgba(39, 144, 236, 0.65);
    outline-offset: 2px;
}

.hw-case-back__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/*********		SIGN IN 		*******/

#content-container.signinpage {
    /* Match anonymous home hero styling */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #1c232d !important;
    margin-top: 0px;

    /* Anchor for the top-left back link */
    position: relative;
}

/* Back to home link (inside the sign-in card) */
#content-container.signinpage #content .page-content .hw-auth-back,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-family: Segoe UI;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: rgba(206, 209, 214, 0.85) !important;
    text-decoration: none !important;
    background: transparent;
    width: fit-content;
    margin: 0 0 14px;
}

#content-container.signinpage #content .page-content .hw-auth-back:hover,
#content-container.signinpage #content .page-content .hw-auth-back:focus,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back:hover,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back:focus {
    color: rgba(206, 209, 214, 0.65) !important;
    text-decoration: none !important;
    background: transparent;
}

@media (max-width: 480px) {

    #content-container.signinpage #content {
        min-height: 0;
    }

    #content-container.signinpage #content .page-content .hw-auth-back,
    #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back {
        font-size: 13px;
    }
}

/* Center the auth card within the viewport (mobile-first) */
#content-container.signinpage #content {
    min-height: calc(100vh - 140px);
    min-height: calc(100svh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 4vw, 48px);
}

/* Registration page uses the same responsive padding as Sign In */
#content-container.signinpage #content:has(.hw-register) {
    padding: clamp(18px, 4vw, 48px);
}

#content-container.signinpage #content .nav.nav-tabs {
    display: none !important;
}

/* Sign In form */
#content-container.signinpage #content .page-content {
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: clamp(20px, 5vw, 40px);
    position: relative;
    border-radius: .5rem;
    background: rgb(44, 53, 68);
    display: flex;
    flex-direction: column;
}

/* Register page: the outer .page-content is just a wrapper around the real card.
   Without this, both .page-content and the register container can look like cards. */
#content-container.signinpage #content .page-content.hw-register {
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: block;
}

/* Register card uses the same styling as Sign In card */
#content-container.signinpage #content #ContentContainer_MainContent_MainContent_SecureRegister.hw-auth-card {
    width: 100%;
    margin: 0;
    padding: clamp(20px, 5vw, 40px);
    position: relative;
    border-radius: .5rem;
    background: rgb(44, 53, 68);
    display: flex;
    flex-direction: column;
}

/* Registration card content should fill the same sign-in card (avoid narrow internal columns) */
#Register #ContentContainer_MainContent_MainContent_SecureRegister,
#ContentContainer_MainContent_MainContent_SecureRegister,
#Register #ContentContainer_MainContent_MainContent_SecureRegister.hw-auth-card,
#ContentContainer_MainContent_MainContent_SecureRegister.hw-auth-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister .row,
#ContentContainer_MainContent_MainContent_SecureRegister .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister .col-md-6,
#ContentContainer_MainContent_MainContent_SecureRegister .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove legacy illustration/card pseudo-elements (if still present) */
#content-container.signinpage #content .page-content::before,
#content-container.signinpage #content .page-content::after {
    content: none !important;
    display: none !important;
}

/* Live sign-in markup includes nested .row which can add negative margins */
#content-container.signinpage #content .page-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#content-container.signinpage #content .page-content .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* Keep inner layout flush so card padding is consistent */
#content-container.signinpage #content .page-content.row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 992px) {
    #content-container.signinpage #content {
        padding: 20px;
    }
}

/* External login heading in live markup is h2.login-heading-section */
#content-container.signinpage #external-login-heading {
    font-size: clamp(22px, 3.4vw, 30px) !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

#content-container.signinpage .hw-signin-subheading,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-subheading {
    margin: 0 0 20px;
    color: rgba(247, 247, 247, 0.78);
    font-size: clamp(14px, 2.2vw, 16px);
    font-family: Segoe UI;
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
    max-width: 520px;
}

/* Hide the editable page-copy block on sign-in; we inject our own subheading */
#content-container.signinpage #content .page-copy {
    display: none !important;
}

/* Typography on dark background (no white card) */
#content-container.signinpage #content,
#content-container.signinpage #content h1,
#content-container.signinpage #content h2,
#content-container.signinpage #content h3,
#content-container.signinpage #content h4,
#content-container.signinpage #content h5,
#content-container.signinpage #content h6,
#content-container.signinpage #content label,
#content-container.signinpage #content legend,
#content-container.signinpage #content p,
#content-container.signinpage #content .label {
    color: rgba(247, 247, 247, 0.92);
}

/* Hero-like typography (match Home) */
#content-container.signinpage #content .page-content h1,
#content-container.signinpage #content .page-content h2 {
    text-align: left;
    color: #f7f7f7 !important;
    margin: 0px 0px 12px !important;
    font-size: 38px !important;
    font-family: Segoe UI;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 46px !important;
}

#content-container.signinpage #content .page-content p,
#content-container.signinpage #content .page-content .help-block,
#content-container.signinpage #content .page-content .page-copy {
    text-align: left;
    color: rgba(247, 247, 247, 0.78);
    font-size: 16px;
    font-family: Segoe UI;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-width: 520px;
}

/* Bottom helper row (Troubleshoot CTA) */
#content-container.signinpage #content .page-content .hw-signin-footer,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer {
    margin-top: 18px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 14px;
    align-items: center;
}

@media (min-width: 520px) {

    #content-container.signinpage #content .page-content .hw-signin-footer,
    #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer {
        grid-template-columns: 1fr auto;
    }
}

#content-container.signinpage #content .page-content .hw-signin-footer__note,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(206, 209, 214, 0.60);
    font-family: Segoe UI;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

#content-container.signinpage #content .page-content .hw-signin-footer__noteIcon,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__noteIcon {
    color: rgba(206, 209, 214, 0.55);
    display: inline-flex;
}

#content-container.signinpage #content .page-content .hw-signin-footer__link,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: .5rem;
    font-family: Segoe UI;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-decoration: none !important;
    color: rgb(0, 163, 224) !important;
    background: rgba(30, 41, 59, 0.40);
}

#content-container.signinpage #content .page-content .hw-signin-footer__link:hover,
#content-container.signinpage #content .page-content .hw-signin-footer__link:focus,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__link:hover,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__link:focus {
    background: rgba(30, 41, 59, 0.60);
    color: rgb(0, 163, 224) !important;
}

#content-container.signinpage #content .page-content .hw-signin-footer__linkIcon,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__linkIcon {
    display: inline-flex;
}

@media (max-width: 768px) {

    #content-container.signinpage #content .page-content h1,
    #content-container.signinpage #content .page-content h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

#content-container.signinpage #content .page-content .form-group .label,
#content-container.signinpage #content .page-content .form-group .col-sm-8 {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    max-width: 100%;
}

#content-container.signinpage #content .page-content .form-group .form-control {
    padding: 1em;
    border-radius: 8px;
    /* portalbasictheme.css forces .form-control background via !important */
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#content-container.signinpage #content .page-content .form-group .form-control:focus {
    border-color: rgba(0, 163, 224, 0.75) !important;
    /* box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.18) !important; */
}

#content-container.signinpage ::placeholder {
    color: rgba(247, 247, 247, 0.58) !important;
}

#content-container.signinpage .help-block {
    color: rgba(247, 247, 247, 0.78) !important;
}

/* Provider buttons (external login) */
#content-container.signinpage #content .page-content button.btn[name='provider'],
#content-container.signinpage #content .page-content input.btn[name='provider'] {
    margin: 12px 0px 0px !important;
    width: 100%;
    padding: 16px 18px;
    min-height: 56px;
    border-radius: 12px;
    font-family: Segoe UI;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    display: block;
    text-align: center;
    background: rgba(30, 41, 59, 0.92) !important;
    background-image: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    transition: background 200ms ease;
    cursor: pointer;
}

/* If provider controls are actual <button>, keep icon+label nicely centered */
#content-container.signinpage #content .page-content button.btn[name='provider'] {
    display: flex;
    border: none !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: .5rem;
}

#content-container.signinpage #content .page-content button.btn[name='provider']:hover,
#content-container.signinpage #content .page-content button.btn[name='provider']:focus,
#content-container.signinpage #content .page-content input.btn[name='provider']:hover,
#content-container.signinpage #content .page-content input.btn[name='provider']:focus {
    background: rgba(24, 34, 49, 0.98) !important;
    transition: background 200ms ease;
}

/* Entra/Azure AD = primary filled button */
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Entra"],
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Azure AD"],
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Azure AD-kontoen"],
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Entra"],
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Azure AD"],
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Azure AD-kontoen"] {
    background: rgb(0, 163, 224) !important;
    color: rgba(255, 255, 255, 0.98) !important;
    border-radius: .5rem !important;
}

/* Entra/Azure AD hover state */
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Entra"]:hover,
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Entra"]:focus,
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Azure AD"]:hover,
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Azure AD"]:focus,
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Entra"]:hover,
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Entra"]:focus,
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Azure AD"]:hover,
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Azure AD"]:focus {
    background: rgb(0, 140, 195) !important;
}

/* Subtle divider inside the auth card (if present in template) */
#content-container.signinpage #content .page-content hr,
#content-container.signinpage #content .page-content .login-heading-section {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Entra"]:hover,
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Azure AD"]:hover,
#content-container.signinpage #content .page-content button.btn[name='provider'][title*="Azure AD-kontoen"]:hover,
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Entra"]:hover,
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Azure AD"]:hover,
#content-container.signinpage #content .page-content input.btn[name='provider'][title*="Azure AD-kontoen"]:hover {
    background-color: rgb(0, 144, 212);
}

#content-container.signinpage .page-content #submit-signin-local {
    /* Primary button like anonymous Home */
    padding: 14px 28px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 8px;
    font-family: Segoe UI;
    font-weight: bold;
    background-color: rgb(0, 163, 224);
    color: #ffffff;
    display: block;
    width: 100%;
}

.login-heading-section {
    border-bottom: none !important;
}

#content-container.signinpage .page-content #submit-signin-local:hover,
#content-container.signinpage .page-content #submit-signin-local:focus {
    background-color: rgb(0, 163, 224);
    border-color: rgb(0, 163, 224);
    color: #ffffff;
    opacity: 0.92;
}

#content-container.signinpage #content .page-content form fieldset {
    position: relative;
}

#content-container.signinpage #content .page-content button.btn[title*="Azure AD-kontoen"] {
    /* Ensure text is visible after standardizing provider button styling */
    color: #ffffff !important;
}

#content-container.signinpage #content .page-content button.btn[title*="Skill-interne"] {
    border-color: transparent;
    background-color: transparent;
    background: tranparent;
    color: rgba(247, 247, 247, 0.9);
    position: absolute;
    bottom: -64px;
    left: 0;
}

#content-container.signinpage #content .page-content button.btn[title*="Skill-interne"]:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Redeem Invitation Code Page */
#content-container.signinpage.redeem {
    z-index: 1;
}

#content-container.signinpage.redeem #content .page-content form {
    background: #ffffff;
    border-radius: .25rem !important;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-left: 2.14rem !important;
    padding-right: 2.14rem !important;
    padding-top: 2.85rem !important;
    padding-bottom: 2.85rem !important;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 992px) {
    #content-container.signinpage.redeem #content .page-content form {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }
}

#content-container.signinpage.redeem #content .page-content form legend span {
    padding: 0px 10px;
}

input#InvitationCode,
label[for*="InvitationCode"] {
    width: 100%;
    display: block;
    word-break: normal;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    display: none;
}

#content-container.signinpage.redeem .col-sm-offset-2.col-sm-10 .checkbox {
    display: none;
}

button#submit-redeem-invitation {
    margin: 5px auto !important;
    width: 100%;
    padding: 1rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
}

button#submit-redeem-invitation:hover {
    background: #008895;
}

/* Register */
#ContentContainer_MainContent_PageCopy_PageCopy {
    margin: 0px;
}

#Register {
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
}

/* Center and style register page like anonymous Home hero */
#Register #ContentContainer_MainContent_MainContent_SecureRegister {
    width: 100%;
    max-width: 640px;
    margin: 0;
    padding: clamp(20px, 5vw, 48px);
    position: relative;
    border-radius: .5rem;
    background: rgb(44, 53, 68);
    /* box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); */
}

/* Some registration templates render an inner "card" (panel/well) inside SecureRegister.
   Flatten it so the page reads as a single, consistent auth card (like Sign-in). */
#Register #ContentContainer_MainContent_MainContent_SecureRegister .panel,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .panel-heading,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .panel-body,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .well,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .page-content,
#Register #ContentContainer_MainContent_MainContent_SecureRegister .crmEntityFormView {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove legacy illustration/card pseudo-elements (if still present) */
#Register #ContentContainer_MainContent_MainContent_SecureRegister::before,
#Register #ContentContainer_MainContent_MainContent_SecureRegister::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 992px) {
    #Register {
        padding: 0;
    }
}

/* Register typography to match Home */
#Register h1,
#Register h2 {
    text-align: left;
    color: #f7f7f7;
    margin: 0px 0px 12px;
    font-size: 38px;
    font-family: Segoe UI;
    font-style: normal;
    font-weight: 700;
    line-height: 46px;
}

#Register p,
#Register .help-block {
    text-align: left;
    color: rgba(247, 247, 247, 0.78);
    font-size: 16px;
    font-family: Segoe UI;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-width: 520px;
}

@media (max-width: 768px) {

    #Register h1,
    #Register h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister .row {
    background: transparent;
}

/* Keep inner layout flush so card padding is consistent */
#Register #ContentContainer_MainContent_MainContent_SecureRegister .row {
    margin-left: 0;
    margin-right: 0;
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn,
#Register #ContentContainer_MainContent_MainContent_SecureRegister input[type="submit"],
#Register #ContentContainer_MainContent_MainContent_SecureRegister button[type="submit"] {
    padding: 14px 28px;
    border-radius: 8px;
    font-family: Segoe UI;
    font-weight: 600;
}

#ContentContainer_MainContent_MainContent_SecureRegister .alert {
    display: none;
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister .row {
    margin: 0 auto;
    margin-bottom: 0px;
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister .row .col-md-6 button.btn[title*="Skill-interne"] {
    display: none;
}

/* Some templates render providers as anchors */
#content-container.signinpage #content .page-content a.btn[name='provider'] {
    margin: 12px 0px 0px !important;
    width: 100%;
    padding: 16px 18px;
    min-height: 56px;
    border-radius: 12px;
    font-family: Segoe UI;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(30, 41, 59, 0.92) !important;
    background-image: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-sizing: border-box;
}

#content-container.signinpage #content .page-content a.btn[name='provider']:hover,
#content-container.signinpage #content .page-content a.btn[name='provider']:focus {
    background: rgba(24, 34, 49, 0.98) !important;
}

/* Match sign-in typography inside the registration container as well */
#Register #ContentContainer_MainContent_MainContent_SecureRegister h1,
#Register #ContentContainer_MainContent_MainContent_SecureRegister h2,
#ContentContainer_MainContent_MainContent_SecureRegister h1,
#ContentContainer_MainContent_MainContent_SecureRegister h2 {
    text-align: left;
    color: #f7f7f7 !important;
    margin: 0px 0px 12px !important;
    font-size: 38px !important;
    font-family: Segoe UI;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 46px !important;
}

/* Provider buttons on Register should match Sign In */
#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'],
#Register #ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'],
#ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'],
#ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'] {
    margin: 12px 0px 0px !important;
    width: 100% !important;
    padding: 16px 18px !important;
    min-height: 56px;
    border-radius: 12px;
    font-family: Segoe UI;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    display: block;
    text-align: center;
    background: rgba(30, 41, 59, 0.92) !important;
    background-image: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'],
#ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider']:hover,
#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider']:focus,
#Register #ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider']:hover,
#Register #ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider']:focus,
#ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider']:hover,
#ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider']:focus,
#ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider']:hover,
#ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider']:focus {
    background: rgba(24, 34, 49, 0.98) !important;
}

/* Entra/Azure AD = primary filled button (Register) */
#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'][title*="Entra"],
#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'][title*="Azure AD"],
#Register #ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'][title*="Azure AD-kontoen"],
#Register #ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'][title*="Entra"],
#Register #ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'][title*="Azure AD"],
#Register #ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'][title*="Azure AD-kontoen"],
#ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'][title*="Entra"],
#ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'][title*="Azure AD"],
#ContentContainer_MainContent_MainContent_SecureRegister button.btn[name='provider'][title*="Azure AD-kontoen"],
#ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'][title*="Entra"],
#ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'][title*="Azure AD"],
#ContentContainer_MainContent_MainContent_SecureRegister input.btn[name='provider'][title*="Azure AD-kontoen"] {
    background: rgb(0, 163, 224) !important;
    border-color: rgb(0, 163, 224) !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

/* Prevent extreme per-letter wrapping on narrow layouts */
#Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__note span,
#ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__note span {
    word-break: normal !important;
    overflow-wrap: break-word;
    white-space: normal;
}

/* External login confirmation error card override */
html.hw-extlogin-error-active form[action="/Account/Login/ExternalLoginConfirmation"] {
    display: none !important;
}

html.hw-extlogin-error-active #mainContent.wrapper-body {
    height: auto;
    min-height: calc(100vh - 140px);
    min-height: calc(100svh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}

html.hw-extlogin-error-active #content-container {
    flex: 1 0 auto;
}

html.hw-extlogin-error-active footer[role="contentinfo"] {
    margin-bottom: 0 !important;
}

html.hw-extlogin-error-active #content-container.signinpage #content,
html.hw-extlogin-error-active #mainContent {
    min-height: calc(100vh - 150px) !important;
    min-height: calc(100svh - 150px) !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px !important;
    box-sizing: border-box;
}

html.hw-extlogin-error-active #content-container.signinpage #content .page-content,
html.hw-extlogin-error-active #mainContent .page-content,
html.hw-extlogin-error-active #mainContent .container {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card {
    display: block !important;
    max-width: 760px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(18px, 4vw, 28px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(247, 247, 247, 0.92) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__image-link {
    display: block !important;
    width: fit-content;
    margin: 0 auto;
    text-decoration: none !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__image {
    display: block !important;
    width: 400px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 14px !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__title {
    margin: 0 !important;
    font-size: clamp(24px, 3.2vw, 34px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__warning {
    margin: 10px 0 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(247, 247, 247, 0.85) !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__messages {
    margin: 10px auto 0 !important;
    padding: 0 !important;
    max-width: 640px !important;
    list-style: none !important;
    color: rgba(247, 247, 247, 0.85) !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__messages li {
    margin: 6px 0 0 !important;
    line-height: 1.55 !important;
    font-size: 16px !important;
    color: rgba(247, 247, 247, 0.85) !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__actions {
    margin-top: 14px !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    min-width: 200px !important;
    min-height: 48px !important;
    border-radius: .5rem !important;
    font-weight: 700 !important;
    font-size: clamp(15px, 1.8vw, 18px) !important;
    line-height: 1.2 !important;
    padding: 12px clamp(18px, 4vw, 42px) !important;
    border-color: #00a3e0 !important;
    background: #00a3e0 !important;
    color: #ffffff !important;
}

html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__btn:hover,
html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__btn:focus {
    text-decoration: none !important;
    border-color: #008ec4 !important;
    background: #008ec4 !important;
    color: #ffffff !important;
}

@media screen and (max-width: 480px) {
    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__btn {
        width: 100% !important;
    }
}

@media screen and (min-width: 481px) {
    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__btn {
        width: auto !important;
        min-width: 190px !important;
    }
}

@media screen and (max-height: 820px) {
    html.hw-extlogin-error-active #content-container.signinpage #content,
    html.hw-extlogin-error-active #mainContent {
        padding: 4px !important;
    }

    html.hw-extlogin-error-active #hw-extlogin-error-card {
        padding: clamp(12px, 1.8vh, 18px) !important;
    }

    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__image {
        width: min(400px, 64vw) !important;
        margin-bottom: 12px !important;
    }
}

@media screen and (max-height: 700px) {
    html.hw-extlogin-error-active #content-container.signinpage #content,
    html.hw-extlogin-error-active #mainContent {
        min-height: calc(100vh - 120px) !important;
        min-height: calc(100svh - 120px) !important;
    }

    html.hw-extlogin-error-active #hw-extlogin-error-card {
        padding: 12px !important;
    }

    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__image {
        width: min(300px, 70vw) !important;
        margin-bottom: 10px !important;
    }

    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__title {
        font-size: clamp(22px, 2.8vw, 30px) !important;
    }

    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__messages,
    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__messages li {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    html.hw-extlogin-error-active #hw-extlogin-error-card .hw-extlogin-error-card__actions {
        margin-top: 12px !important;
    }
}