:root {
    --neste-grey-light: #EBEBEB;
    --neste-blue: #003C96;
    --neste-blue-light: #6799DB;
    --neste-blue-dark: #052D46;
    --neste-green: #007452;
    --neste-green-light: #8CD7B4;
    --neste-green-bright: #62bb21;
    /* OR #488719 */
    --neste-green-bright-dark: #488719;
    --neste-red: #ff0000;
    --neste-yellow: #FFD300;
    --neste-text-color-light: #c3c8c8;
    --neste-text-color: #696969;
    /* OR #666666 */
    --neste-text-color-dark: #333333;
    --sty-font-family: Helvetica, Arial, sans-serif;
    --sty-primary-color: var(--neste-blue);
    --sty-success-color: var(--neste-green-bright);
    --sty-info-color: var(--neste-blue-light);
    --sty-warning-color: var(--neste-yellow);
    --sty-danger-color: var(--neste-red);
    --sty-text-color: var(--neste-text-color-dark);
    --sty-text-color-secondary: var(--neste-text-color);
    --sty-link-color: var(--neste-blue);
    --sty-link-hover-decoration: underline;
    --sty-border-radius: .25rem;
    --sty-button-font-weight: 600;
    --sty-button-text-transform: uppercase;
    --sty-button-border-width: .125rem;
    --sty-button-primary-bg: var(--sty-primary-color);
    --sty-button-primary-color: #ffffff;
    --sty-button-primary-hover-bg: var(--neste-blue-dark);
    --sty-button-primary-hover-color: #ffffff;
    --sty-button-primary-focus-bg: var(--neste-blue-dark);
    --sty-button-primary-focus-color: #ffffff;
    --sty-button-primary-disabled-bg: var(--neste-grey-light);
    --sty-button-primary-disabled-color: var(--sty-text-color);
    --sty-button-primary-outline-disabled-bg: var(--neste-grey-light);
    --sty-button-primary-outline-disabled-color: var(--sty-text-color);
    --sty-input-style: "outer";
    --sty-input-border-radius: .7rem;
    --sty-input-label-font-weight: 600;
    --sty-input-border-color: #c9c9c9;
    --sty-input-label-color: var(--sty-text-color-secondary);
    --sty-input-placeholder-color: #696969;
    --sty-input-focus-box-shadow: 0 0 0.3125em 0.0625em #4b4b4b;
    --sty-panel-max-width: minmax(360px, 500px);
    --sty-panel-bg: #ffffff;
    --sty-panel-container-padding: 2rem;
    --sty-panel-border-width: 0;
    --sty-panel-box-shadow: none;
    --sty-panel-border-radius: 0;
}

#app.identifier .separator-w-text,
#app.identifier [data-separator-text] {
    font-size: 1.2rem;
    font-weight: bold;
}

#app.identifier [data-block="externalLoginProvider"] sty-button {
    background-color: #eee;
}

a {
    text-decoration-thickness: 2px;
    text-underline-offset: 1px;
}

sty-button {
    padding: 14px 30px;
}

sty-button:hover,
sty-button[focused] {
    transition: box-shadow 300ms ease;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 8px 0px;
}

.progress-bar-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-bar-header ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding-inline-start: 0;
}

.progress-bar-header li {
    position: relative;
    background: #d7d7d7;
    color: #ffffff;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.progress-bar-header li+li {
    margin-left: 2.5rem;
}

.progress-bar-header li+li::before {
    position: absolute;
    left: -2.5rem;
    content: '';
    width: 2.5rem;
    height: 1px;
    background: #d7d7d7;
}

.progress-bar-header li.active {
    background: var(--sty-primary-color);
}

.highlighted-text,
[data-text="highlighted"] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 1.5rem;
    font-weight: 300;
    color: var(--sty-text-color-secondary);
    font-size: 1.4rem;
}

.display-none,
#app.externalLoginProvider[data-screen="signicat"] [data-block-title],
[data-field="keepMeLoggedIn"],
[data-field$="magicLink"],
.support-text,
[data-text="support"],
[data-separator="supportText"],
[data-field="voice"],
#app.progressiveProfiling .consents .additional-text.label,
#app.progressiveProfiling [data-block-title],
#app.progressiveProfiling [data-field-consent]::part(input),
#app.progressiveProfiling[data-screen="promotion"] .additional-text,
#app.progressiveProfiling[data-screen="promotion"] [data-additional-text],
#app.progressiveProfiling[data-screen="promotion"] [data-field="attribute-attributes.promotion.signicat"] sty-radio,
#app.progressiveProfiling[data-screen="promotion"] [data-button="submit"],
#app.progressiveProfiling[data-screen="promotionError"] .additional-text.label,
#app.progressiveProfiling[data-screen="promotionError"] [data-field="attribute-attributes.promotion.signicat"],
sty-loader + .custom-website-button,
#app.externalLoginProvider:not(.external-error) [data-section="panel"],
#app.externalLoginProvider #language-selector,
#app.mfaEnrollTargetSelect [data-field="method-voice"],
#app.mfaMethod sty-radio[data-field*="voice"],
#app.registration sty-input-text[readonly] .text-optional,
#app.registration[data-screen="password"] [data-separator="login"],
#app.registration[data-screen="userInfoB2c"] [data-separator="login"],
#app.registration [data-text="organizationName"],
#app [data-separator="registration"],
#app.registration [data-field-static] .translations,
#app[data-screen="userInfo"] [data-field="attribute-attributes.FuelCustomerNumbers"],
#app[data-screen="companyInfo"] [data-field="attribute-attributes.FuelCustomerNumbers"],
#app[data-screen="companyInfo2"] [data-field="attribute-attributes.FuelCustomerNumbers"] {
    display: none !important;
}
#app[data-screen="userInfo"] [data-field="attribute-attributes.PersonalIdentityCode"],
#app[data-screen="password"] [data-field="attribute-attributes.PersonalIdentityCode"],
#app[data-screen="companyInfo"] [data-field="attribute-attributes.PersonalIdentityCode"],
#app[data-screen="companyInfo2"] [data-field="attribute-attributes.PersonalIdentityCode"] {
    display: none !important;
}
#app[data-screen="userInfo"] [data-field="attribute-attributes.FuelCustomerNumbers"],
#app[data-screen="userInfo"] [data-field="attribute-attributes.PersonalIdentityCode"],
#app[data-screen="userInfo"] [data-field="attribute-attributes.PTJNumberPrimary"],
#app[data-screen="userInfo"] [data-field="attribute-attributes.LineOfBusiness"],
#app[data-screen="userInfoB2c"] [data-field="attribute-attributes.FuelCustomerNumbers"],
#app[data-screen="userInfoB2c"] [data-field="attribute-attributes.PersonalIdentityCode"],
#app[data-screen="userInfoB2c"] [data-field="attribute-attributes.PTJNumberPrimary"],
#app[data-screen="userInfoB2c"] [data-field="attribute-attributes.LineOfBusiness"],
#app.registration [data-field="attribute-attributes.CardCustomerNumbers"],
#app.registration [data-field="attribute-attributes.addresses.primary.postalCode"],
#app.registration [data-field="attribute-attributes.PostOffice"],
#app.registration [data-field="attribute-attributes.ContactPerson"],
#app.registration [data-field="attribute-attributes.addresses.primary.streetAddress"],
#app.registration [data-field="attribute-attributes.LineOfBusiness"][readonly] {
    display: none !important;
}

#app [data-content="footer"] ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#app [data-content="footer"] a {
    display: block;
    font-weight: 300;
}

#app [data-content="footer"] .block-wrapper {
    max-width: 1600px;
    margin: 0 auto;
}

#app [data-content="footer"] {
    margin-top: 4rem;
    padding: 1rem;
    background: #f4f4f4;
    border-top: .063rem solid #d7d7d7;
}

#app [data-content="footer"] .block {
    padding: .5rem 0;
}

#app [data-content="footer"] .links {
    display: none;
    flex-direction: column;
}

#app [data-content="footer"] .links li {
    padding: 0 .5rem;
}

#app [data-content="footer"] .links li:first-child {
    padding: .5rem;
}

@media (min-width: 960px) {
    #app [data-content="footer"] .block {
        padding: 1.25rem 0;
    }

    #app [data-content="footer"] .links {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    #app [data-content="footer"] .links li:first-child {
        padding: 0 .5rem;
    }
}

#app.registration sty-input-text[readonly] {
    --sty-input-bg: var(--neste-grey-light);
}

#app[data-screen="identifier"] [data-field-static] {
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

#app.registration [data-field-static] {
    text-align: left;
}

#app.registration [data-section="panelContainer"] img {
    width: 100%;
}

#app.registration [data-block-title] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #d7d7d7;
    font-weight: 400;
    font-size: 2.5rem;
    color: var(--sty-text-color-secondary);
}

#app[data-screen="password"],
#app[data-screen="userInfo"],
#app[data-screen="userInfoB2c"] {
    --sty-panel-max-width: minmax(360px, 580px);
}

#app[data-screen="numbersFi"] {
    text-align: center;
}

#app[data-screen="numbers"] [data-section="panel"] sty-form,
#app[data-screen="numbersFi"] [data-section="panel"] sty-form,
#app[data-screen="userInfo"] [data-section="panel"] sty-form,
#app[data-screen="userInfoB2c"] [data-section="panel"] sty-form,
#app[data-screen="password"] [data-section="panel"] sty-form,
#app[data-screen="consents"] [data-section="panel"] sty-form{

/* #app[data-screen="numbers"] [data-section="panel"] form,
#app[data-screen="numbersFi"] [data-section="panel"] form,
#app[data-screen="userInfo"] [data-section="panel"] form,
#app[data-screen="userInfoB2c"] [data-section="panel"] form,
#app[data-screen="password"] [data-section="panel"] form,
#app[data-screen="consents"] [data-section="panel"] form { */
    margin-top: 1rem;
    padding: 2rem;
    border: 1px solid #d7d7d7;
}

#app[data-screen="password"] sty-checkbox {
    margin-bottom: 1rem;
}

.custom-website-button {
    margin-top: 2rem;
}

#app.registration .marketing {
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 1rem;
    font-weight: 200;
    margin-top: 2rem;
}

#app.registration [data-field="attribute-attributes.AllowEmail"] {
    margin: 0;
}
#app.progressiveProfiling[data-screen="promotion"] [data-field="attribute-attributes.promotion.signicat"]::part(label) {
    text-align: center;
    font-weight: 600;
}
#app.progressiveProfiling[data-screen="promotion"] [data-field="attribute-attributes.promotion.signicat"]::part(container) {
    display: flex;
    justify-content: center;
    gap: 5rem;
    margin-top: 2rem;
}
#app.progressiveProfiling[data-screen="promotionError"] .additional-text.top {
    font-weight: 500;
    font-size: 1.3rem;
    text-align: left;
}
.flag.ru { visibility: hidden; }

#app.identifier .external-login-providers {margin-top: 70px;}