/* Authentication surfaces for the public Netsons layout.
 * The legacy WHMCS auth markup is intentionally scoped to loginstyle so the
 * public restyle layer and the logged-in client area keep their existing contracts.
 */

html[data-theme="eco"] body.restylewww.loginstyle {
    --restylewww-auth-page: var(--restylewww-eco-page);
    --restylewww-auth-stage: var(--restylewww-eco-page);
    --restylewww-auth-card: var(--restylewww-eco-panel);
    --restylewww-auth-card-deep: var(--restylewww-eco-panel);
    --restylewww-auth-input: var(--restylewww-eco-inset);
    --restylewww-auth-input-focus: var(--restylewww-eco-inset);
    --restylewww-auth-border: var(--restylewww-eco-border);
    --restylewww-auth-border-soft: var(--restylewww-eco-border);
    --restylewww-auth-text: var(--restylewww-eco-text);
    --restylewww-auth-muted: var(--restylewww-eco-muted);
    --restylewww-auth-faint: var(--restylewww-eco-muted);
    --restylewww-auth-link: var(--restylewww-eco-link);
    --restylewww-auth-blue: #1769e0;
    --restylewww-auth-blue-hover: #1258bd;
    --restylewww-auth-danger: var(--restylewww-eco-danger);
    --restylewww-auth-danger-bg: var(--restylewww-eco-danger-bg);
    --restylewww-auth-invalid-border: var(--restylewww-eco-danger);
    --restylewww-auth-invalid-focus: var(--restylewww-eco-danger);
    --restylewww-auth-invalid-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffb1bc' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23ffb1bc' stroke='none'/%3E%3C/svg%3E");
    --restylewww-auth-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23b9c4d0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    --restylewww-auth-info: var(--restylewww-eco-info);
    --restylewww-auth-info-bg: var(--restylewww-eco-info-bg);
    color-scheme: dark;
    background: var(--restylewww-auth-page) !important;
    color: var(--restylewww-auth-text);
}

/* Password strength feedback uses the authentication palette above. */

html[data-theme="eco"] body.restylewww.loginstyle .password-strength-meter .progress {
    background-color: var(--restylewww-eco-soft);
    border: 1px solid var(--restylewww-auth-border);
    border-radius: .5rem;
}

html[data-theme="eco"] body.restylewww.loginstyle .password-strength-meter .progress-bar-success {
    background-color: var(--restylewww-eco-success-solid);
}

html[data-theme="eco"] body.restylewww.loginstyle .password-strength-meter .progress-bar-warning {
    background-color: #f2c66d;
}

html[data-theme="eco"] body.restylewww.loginstyle .password-strength-meter .progress-bar-danger {
    background-color: #b9364c;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 button[data-target="#passwordSuggestions"] {
    color: var(--restylewww-auth-link);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2,
html[data-theme="eco"] body.restylewww.loginstyle .kt-login-v2 {
    background-color: var(--restylewww-auth-stage) !important;
    background-image: none !important;
    color: var(--restylewww-auth-text);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__body,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__wrapper,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__form,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__wrapper,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 #kt_form,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 #registration,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__container fieldset,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-form__section {
    background: transparent !important;
    color: var(--restylewww-auth-text);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 > div[style*="ffffd2"] {
    background: var(--restylewww-auth-info-bg) !important;
    color: var(--restylewww-auth-info) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__container {
    background: var(--restylewww-auth-card) !important;
    border: 1px solid var(--restylewww-auth-border) !important;
    box-shadow: 0 24px 55px rgba(0, 8, 20, .36) !important;
    color: var(--restylewww-auth-text);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__title {
    background: var(--restylewww-auth-card-deep) !important;
    border-bottom: 1px solid var(--restylewww-auth-border-soft);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__title > a img {
    filter: brightness(0) invert(1);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__container :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    label,
    strong,
    .kt-heading,
    .form-label,
    .control-label,
    legend,
    .alert-text
) {
    color: var(--restylewww-auth-text);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__container :is(.text-body, .text-dark) {
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__container :is(
    .text-muted,
    .form-text,
    .help-block,
    small,
    .kt-login-v2__desc
) {
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 a:not(.btn) {
    color: var(--restylewww-auth-link);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 a:not(.btn):hover,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 a:not(.btn):focus-visible {
    color: var(--restylewww-auth-text);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .loginmenu a,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .socialmenu a,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__footer a {
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .loginmenu a:hover,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .socialmenu a:hover,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__footer a:hover {
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .loginmenu li::after {
    color: var(--restylewww-auth-border) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    input.form-control,
    textarea.form-control,
    select.form-control,
    .custom-select,
    .intl-tel-input .form-control,
    .dropdown.bootstrap-select.form-control,
    .bootstrap-select > .dropdown-toggle
) {
    background-color: var(--restylewww-auth-input) !important;
    background-image: none !important;
    border-color: var(--restylewww-auth-border) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    input.form-control,
    textarea.form-control,
    select.form-control,
    .custom-select,
    .intl-tel-input .form-control,
    .bootstrap-select > .dropdown-toggle
):focus,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .dropdown.bootstrap-select.form-control:focus-within {
    background-color: var(--restylewww-auth-input-focus) !important;
    border-color: var(--restylewww-eco-link) !important;
    box-shadow: 0 0 0 .2rem rgba(143, 185, 255, .16) !important;
    color: var(--restylewww-auth-text) !important;
    outline: 0;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    input.form-control,
    textarea.form-control,
    select.form-control,
    .custom-select,
    .intl-tel-input .form-control,
    .bootstrap-select > .dropdown-toggle
):disabled,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .dropdown.bootstrap-select.form-control.disabled {
    background-color: var(--restylewww-auth-input) !important;
    border-color: var(--restylewww-auth-border) !important;
    color: var(--restylewww-auth-faint) !important;
    opacity: 1;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    input.form-control,
    textarea.form-control,
    select.form-control
)::placeholder {
    color: var(--restylewww-auth-faint) !important;
    opacity: 1;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .input-group .input-group-text {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .ns-pwd-toggle,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .ns-pwd-toggle:hover {
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .ns-pwd-toggle.ns-pwd-visible {
    color: var(--restylewww-eco-success) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 input[type="checkbox"] {
    accent-color: var(--restylewww-eco-link);
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .checkbox label,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .form-check-label {
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .btn-primary,
    .btn-brand
) {
    background-color: var(--restylewww-auth-blue) !important;
    border-color: var(--restylewww-auth-blue) !important;
    color: #ffffff !important;
    opacity: 1;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .btn-primary,
    .btn-brand
):hover:not(:disabled),
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .btn-primary,
    .btn-brand
):focus-visible:not(:disabled) {
    background-color: var(--restylewww-auth-blue-hover) !important;
    border-color: var(--restylewww-auth-blue-hover) !important;
    color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .btn-primary,
    .btn-brand
):disabled {
    background-color: #334b68 !important;
    border-color: #49617d !important;
    color: #aebdca !important;
    opacity: 1;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .btn-outline-brand,
    .btn-outline-primary,
    .btn-outline-info
) {
    background-color: transparent !important;
    border-color: var(--restylewww-eco-link) !important;
    color: var(--restylewww-auth-link) !important;
    opacity: 1;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .btn-outline-brand,
    .btn-outline-primary,
    .btn-outline-info
):hover,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .btn-outline-brand,
    .btn-outline-primary,
    .btn-outline-info
):focus-visible {
    background-color: var(--restylewww-eco-soft) !important;
    border-color: var(--restylewww-auth-link) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .btn-default {
    background-color: var(--restylewww-auth-card-deep) !important;
    border-color: var(--restylewww-auth-border) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__aside,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__content {
    background-color: var(--restylewww-auth-card) !important;
    border-color: var(--restylewww-auth-border-soft) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__nav-item,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__nav-item[data-ktwizard-state="pending"] {
    background-color: transparent !important;
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__nav-item[data-ktwizard-state="current"] {
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__nav-item[data-ktwizard-state="pending"] span {
    background-color: var(--restylewww-eco-border) !important;
    color: var(--restylewww-eco-info) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__nav-item[data-ktwizard-state="current"] span {
    background-color: var(--restylewww-auth-blue) !important;
    color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__nav-item[data-ktwizard-state="done"] {
    color: var(--restylewww-eco-success) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-wizard-v2__nav-item[data-ktwizard-state="done"] i {
    background-color: var(--restylewww-eco-success-solid) !important;
    color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter .sub-heading {
    border-top-color: var(--restylewww-auth-border-soft) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter .sub-heading span {
    background-color: var(--restylewww-auth-card) !important;
    color: var(--restylewww-auth-info) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .alert-info,
    .alert-outline-info
) {
    background-color: var(--restylewww-auth-info-bg) !important;
    border-color: var(--restylewww-auth-border) !important;
    color: var(--restylewww-auth-info) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .alert-danger,
    .alert-outline-danger
) {
    background-color: var(--restylewww-auth-danger-bg) !important;
    border-color: var(--restylewww-auth-invalid-border) !important;
    color: var(--restylewww-auth-danger) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .text-danger {
    color: var(--restylewww-eco-danger) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .bootstrap-select .dropdown-menu,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .dropdown-menu,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .intl-tel-input .country-list {
    background-color: var(--restylewww-auth-input) !important;
    border-color: var(--restylewww-auth-border) !important;
    color: var(--restylewww-auth-text) !important;
    box-shadow: 0 18px 38px rgba(0, 8, 20, .35) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .intl-tel-input .country-list .country {
    background-color: transparent !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .intl-tel-input .country-list .country-name {
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .intl-tel-input .country-list .dial-code {
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .intl-tel-input .country-list .country:is(
    .highlight,
    .active,
    [aria-selected="true"]
) {
    background-color: var(--restylewww-eco-soft) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .bootstrap-select .dropdown-menu :is(
    li a,
    .dropdown-item,
    .bs-searchbox,
    .text
) {
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .bootstrap-select .dropdown-menu :is(
    li a:hover,
    li a:focus,
    .dropdown-item:hover,
    .dropdown-item:focus
) {
    background-color: var(--restylewww-eco-soft) !important;
    color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .modal-content {
    background-color: var(--restylewww-auth-card) !important;
    border: 1px solid var(--restylewww-auth-border) !important;
    box-shadow: 0 24px 55px rgba(0, 8, 20, .42) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .modal-header,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .modal-footer {
    border-color: var(--restylewww-auth-border-soft) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .modal :is(
    .modal-title,
    .modal-body,
    .modal-body p,
    .modal-body label
) {
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .modal .close {
    color: var(--restylewww-auth-text) !important;
    opacity: 1;
    text-shadow: none;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .modal hr {
    border-top-color: var(--restylewww-auth-border-soft) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle .modal-backdrop.show {
    background-color: #000000;
    opacity: .76;
}

/* The registration cart partial contains light theme declarations and an
 * inline border. Keep those overrides local to the eco authentication card.
 */

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel {
    background-color: var(--restylewww-auth-card-deep) !important;
    border-bottom-color: var(--restylewww-auth-border-soft) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel .items-panel-container,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel .list-group,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel .c-list-group-item {
    background-color: var(--restylewww-auth-card-deep) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel .items-panel-container {
    border-color: var(--restylewww-auth-border-soft) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel .total-row-item {
    border-top-color: var(--restylewww-auth-border-soft) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel :is(
    .text-muted,
    small
) {
    color: var(--restylewww-auth-muted) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel .cart-icon-summary {
    background-color: var(--restylewww-auth-blue) !important;
    color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel #cart-btn-toggle {
    background-color: var(--restylewww-auth-blue) !important;
    border-color: var(--restylewww-auth-blue) !important;
    color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel #cart-btn-toggle:hover:not(:disabled),
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel #cart-btn-toggle:focus-visible:not(:disabled) {
    background-color: var(--restylewww-auth-blue-hover) !important;
    border-color: var(--restylewww-auth-blue-hover) !important;
    color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .order-summary-panel #cart-btn-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(143, 185, 255, .22) !important;
    outline: 0;
}

/* Bootstrap's invalid declarations are loaded before this file. The normal
 * auth control rule above intentionally uses !important, so restore the
 * invalid border/icon contract explicitly for both validation state sources
 * used by clientregister.tpl: .is-invalid and aria-invalid="true".
 */

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    input.form-control.is-invalid,
    textarea.form-control.is-invalid,
    select.form-control.is-invalid,
    .custom-select.is-invalid,
    .intl-tel-input .form-control.is-invalid,
    input.form-control[aria-invalid="true"],
    textarea.form-control[aria-invalid="true"],
    select.form-control[aria-invalid="true"],
    .custom-select[aria-invalid="true"],
    .intl-tel-input .form-control[aria-invalid="true"],
    .dropdown.bootstrap-select.form-control.is-invalid,
    .dropdown.bootstrap-select.form-control[aria-invalid="true"],
    .bootstrap-select.is-invalid .dropdown-toggle,
    .bootstrap-select > select.form-control.is-invalid + .dropdown-toggle,
    .bootstrap-select > select.form-control[aria-invalid="true"] + .dropdown-toggle
) {
    background-color: var(--restylewww-auth-input) !important;
    border-color: var(--restylewww-auth-invalid-border) !important;
    color: var(--restylewww-auth-text) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    input.form-control.is-invalid,
    input.form-control[aria-invalid="true"]
) {
    background-image: var(--restylewww-auth-invalid-icon) !important;
    background-position: right calc(.375em + .325rem) center !important;
    background-repeat: no-repeat !important;
    background-size: calc(.75em + .65rem) calc(.75em + .65rem) !important;
    padding-right: calc(1.5em + 1.3rem) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    textarea.form-control.is-invalid,
    textarea.form-control[aria-invalid="true"]
) {
    background-image: var(--restylewww-auth-invalid-icon) !important;
    background-position: top calc(.375em + .325rem) right calc(.375em + .325rem) !important;
    background-repeat: no-repeat !important;
    background-size: calc(.75em + .65rem) calc(.75em + .65rem) !important;
    padding-right: calc(1.5em + 1.3rem) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .custom-select:not(.is-invalid):not([aria-invalid="true"]) {
    background-image: var(--restylewww-auth-select-arrow) !important;
    background-position: right 1rem center !important;
    background-repeat: no-repeat !important;
    background-size: 8px 10px !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .custom-select.is-invalid,
    .custom-select[aria-invalid="true"]
) {
    background-image: var(--restylewww-auth-select-arrow), var(--restylewww-auth-invalid-icon) !important;
    background-position: right 1rem center, right 2rem center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 8px 10px, calc(.75em + .65rem) calc(.75em + .65rem) !important;
    padding-right: calc(.75em + 2.975rem) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    input.form-control.is-invalid:focus,
    textarea.form-control.is-invalid:focus,
    select.form-control.is-invalid:focus,
    .custom-select.is-invalid:focus,
    .intl-tel-input .form-control.is-invalid:focus,
    input.form-control[aria-invalid="true"]:focus,
    textarea.form-control[aria-invalid="true"]:focus,
    select.form-control[aria-invalid="true"]:focus,
    .custom-select[aria-invalid="true"]:focus,
    .intl-tel-input .form-control[aria-invalid="true"]:focus,
    .bootstrap-select.is-invalid .dropdown-toggle:focus,
    .bootstrap-select > select.form-control.is-invalid + .dropdown-toggle:focus,
    .bootstrap-select > select.form-control[aria-invalid="true"] + .dropdown-toggle:focus
),
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 :is(
    .dropdown.bootstrap-select.form-control.is-invalid:focus-within,
    .dropdown.bootstrap-select.form-control[aria-invalid="true"]:focus-within
) {
    background-color: var(--restylewww-auth-input-focus) !important;
    border-color: var(--restylewww-auth-invalid-focus) !important;
    box-shadow: 0 0 0 .2rem rgba(255, 123, 134, .22) !important;
    color: var(--restylewww-auth-text) !important;
    outline: 0;
}

/* Validation Engine prompts otherwise retain a light bubble on the dark
 * surface; keep the error message readable in the same auth scope. */

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .formError .formErrorContent {
    background-color: var(--restylewww-auth-danger-bg) !important;
    border-color: var(--restylewww-auth-invalid-border) !important;
    box-shadow: 0 8px 18px rgba(0, 8, 20, .32) !important;
    color: var(--restylewww-auth-danger) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .formError .formErrorContent::before {
    border-bottom-color: var(--restylewww-auth-invalid-border) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .formError .formErrorContent::after {
    border-bottom-color: var(--restylewww-auth-danger-bg) !important;
}

/* The registration consent controls are custom elements with hidden inputs,
 * therefore accent-color alone cannot provide dark-mode contrast. */

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration :is(
    .kt-checkbox--brand,
    .kt-radio--brand
) > span {
    border-color: var(--restylewww-eco-link) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .kt-checkbox--brand > span::after {
    border-color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration .kt-radio--brand > span::after {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration :is(
    .kt-checkbox--brand,
    .kt-radio--brand
) > input:checked ~ span {
    background-color: var(--restylewww-auth-blue) !important;
    border-color: var(--restylewww-auth-blue) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration :is(
    .kt-checkbox--brand,
    .kt-radio--brand
) > input:focus ~ span {
    border-color: #b9d7ff !important;
    box-shadow: 0 0 0 .2rem rgba(143, 185, 255, .22) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration :is(
    .kt-checkbox--brand,
    .kt-radio--brand
) > input.is-invalid ~ span,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration :is(
    .kt-checkbox--brand,
    .kt-radio--brand
) > input[aria-invalid="true"] ~ span {
    border-color: var(--restylewww-auth-invalid-border) !important;
    box-shadow: 0 0 0 .2rem rgba(255, 123, 134, .16) !important;
}

html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration :is(
    .kt-checkbox--brand,
    .kt-radio--brand
) > input.is-invalid:focus ~ span,
html[data-theme="eco"] body.restylewww.loginstyle #kt_login_v2 .kt-login-v2__regiter #registration :is(
    .kt-checkbox--brand,
    .kt-radio--brand
) > input[aria-invalid="true"]:focus ~ span {
    border-color: var(--restylewww-auth-invalid-focus) !important;
    box-shadow: 0 0 0 .2rem rgba(255, 123, 134, .22) !important;
}