body {
    background-image: none !important;
    background-color: var(--base-bg-weak-default, #FFFFFF) !important;
}

.mds-panel{
    text-align: start;
    padding: 48px 48px 0 48px;
}

.mds-pwd-link{
    align-items: baseline !important;
}

.mds-pwd-link {
    display: block !important;
    width: fit-content;
}

.mds-panel a {
    text-decoration: none !important;
}

.mds-input-container-width {
    max-width: 26.125rem;
    padding-bottom: 8px;
    width: 26.125rem;
}

.mds-validatedUser {
    margin-bottom: 1.5rem !important;
}

.mds-text-overflow-normal {
    white-space: normal !important;
}

.mds-cisco-logo {
    display: inline-block;
    width: 127px;
    height: 88px;
    background-image: var(--cisco-icon-image-url, url("../images/Cisco_Logo_Dark.svg")) !important;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    right: 22.5px !important;
}

.mds-cisco-secondary-logo {
    display: flex;
    width: 81px;
    height: 64px;
    background-image: var(--cisco-icon-image-url, url("../images/Cisco_Logo_Dark.svg")) !important;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 36px;
}

.mds-thousandeyes-logo {
    display: inline-block;
    width: 220px;
    height: 40px;
    background-image: var(--thousandeyes-icon-image-url, url("../images/Cisco_ThousandEyes_Logo.svg")) !important;
    background-size: contain;
    background-repeat: no-repeat;
}

.mds-meraki-logo {
    display: inline-block;
    width: 220px;
    height: 40px;
    background-image: var(--meraki-icon-image-url, url("../images/Cisco_Meraki_Logo.svg")) !important;
    background-size: contain;
    background-repeat: no-repeat;
}

.mds-flex-wrap {
    display: flex;
    justify-content: center;
}

.mds-pwd__messages {
    position: relative;
}

.mds-pwd__messages:before {
    float: left;
	display: none;
}

.mds-pwd__messages .message {
	margin-left: 1.5rem;
	line-height: 1.2rem;
	text-align: start;
	font-size: 0.75rem;
}

/* Default icon */
.mds-pwd__messages.mds-default::before {
    content: "";
    display: inline-block !important;
    width: 16px;
    height: 16px;
    background-image: var(--password-tooltip-default-icon-url, url("../images/admin_persona_default_icon.svg")) !important;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    opacity: 1;
    margin-right: 8px;
    vertical-align: text-bottom;
}

/* Success icon */
.mds-resend-success::before,
.mds-pwd__messages.mds-success::before {
    content: "";
    display: inline-block !important;
    width: 16px;
    height: 16px;
    background-image: var(--password-tooltip-success-icon-url, url("../images/admin_persona_success_icon.svg")) !important;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    opacity: 1;
    margin-right: 8px;
    vertical-align: text-bottom;
}

/* Error icon */
.mds-pwd__messages.mds-error::before,
.mds-otp-error::before,
.mds-error-screen-icon::before,
.mds-password-error .mds-notification-content::before {
    content: "";
    display: inline-block !important;
    width: 16px;
    height: 16px;
    background-image: var(--password-tooltip-error-icon-url, url("../images/admin_persona_error_icon.svg")) !important;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(0deg);
    opacity: 1;
    margin-right: 8px;
    vertical-align: text-bottom;
}

.mds-otp-error::before {
    width: 28px !important;
    height: 28px !important;
    margin-right: 0 !important;
}

.mds-password-error .mds-notification-content::before{
    width: 24px !important;
    height: 24px !important;
    vertical-align: bottom;
}


.mds-resend-success::before {
    width: 40px !important;
    height: 40px !important;
    margin-right: 0 !important;
}

.mds-error-screen-icon::before {
    width: 28px !important;
    height: 28px !important;
    margin-right: 12px !important;
}

.mds-panel__cta{
    flex-direction: row !important;
    gap: 12px !important;
}

.mds-help-sign-in-link {
    margin-top: 36px;
    border-top: none;
    padding-top: 0;
}

.mds-button-shadow {
    box-shadow: none !important;
}

.mds-footer--admin {
    background-color: transparent !important;
    padding: 56px 0 36px !important;
    position: static !important;
}

.mds-flex {
    display: flex;
    justify-content: center;
}

.mds-flex-column {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    flex: 0 1 auto;
    justify-content: flex-start;
}

.mds-flex-row {
    flex-direction: row;
    align-items: stretch;
    flex: 0 1 auto;
}

.mds-flex-space-between {
    justify-content: space-between;
}

.mds-flex-gap {
    gap: 16px;
}

.gradient-border {
  position: relative;
  padding: 48px 72px 80px 72px;
  border-radius: 12px;
  background: white;
  z-index: 0;
  width: 562px;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 3px;
  background: radial-gradient(
    110% 85.46% at 90.98% 104.31%,
    #ff9000 8%,
    #ff007f 16%,
    #02c8ff 83%,
    rgba(24, 105, 255, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 1;
  z-index: -1;
}

.border-animate::before {
  opacity: 0;
  animation: fadeInBorder 800ms linear forwards;
}

@keyframes fadeInBorder {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.fade-out {
  animation: fadeOut 400ms linear forwards;
}

.fade-in {
  animation: fadeIn 400ms linear forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 768px) {
    .gradient-border {
        padding: 12px;
        border-radius: 8px;
    }
}

.mds-rebuild-input-otp {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 40px !important;
    flex-grow: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.mds-input-otp {
    width: 20px !important;
    height: 22px !important;
    font-size: 16px !important;
    box-shadow: none !important;
    margin-top: 2px !important;
    text-align: center;
    box-shadow: none;
}

.password-policy-box {
  width: 100%;
  margin: 0 auto;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  display: block !important;
  position: static !important;
}

.policy-flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
}

.policy-column {
    padding: 10px;
}

.header {
  font-weight: bold;
  margin-bottom: 8px;
  color: #222;
}

/*components/button/src/style.css*/
.mds-button.mds-button-size-md {
    --mds-button-padding-vertical: 5px;
    --mds-button-padding-horizontal: 10px;
    gap: 4px;
    font: var(--typography-p3-bold) !important;
    font-size: 14px !important;
}

.mds-button {
    --mds-button-border-radius: 6px;

    cursor: pointer;

    display: inline-flex;
    align-items: center;

    padding: var(--mds-button-padding-vertical)
    var(--mds-button-padding-horizontal);

    color: var(--mds-button-color-text) !important;
    text-decoration: none;

    background-color: var(--mds-button-color-background);
    border: 2px solid var(--mds-button-color-border);
    border-radius: var(--mds-button-border-radius);
    box-shadow: none;

    transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);

    &.mds-button-kind-default,
    &.mds-button-kind-primary {
        --mds-button-color-border: var(--interact-border-default);
        --mds-button-color-border-active: var(--interact-border-active);
        --mds-button-color-border-hover: var(--interact-border-hover);
        --mds-button-color-border-disabled: var(--interact-border-disabled);
        --mds-button-color-background: var(--interact-bg-default);
        --mds-button-color-background-active: var(--interact-bg-active);
        --mds-button-color-background-hover: var(--interact-bg-hover);
        --mds-button-color-background-disabled: var(--interact-bg-disabled);
        --mds-button-color-text: var(--interact-text-in-default);
        --mds-button-color-text-active: var(--interact-text-in-active);
        --mds-button-color-text-hover: var(--interact-text-in-hover);
        --mds-button-color-text-disabled: var(--interact-text-in-disabled);
        --mds-button-icon-color: var(--interact-icon-in-default);
        --mds-button-icon-color-active: var(--interact-icon-in-active);
        --mds-button-icon-color-hover: var(--interact-icon-in-hover);
        --mds-button-icon-color-disabled: var(--interact-icon-in-disabled);
        --mds-button-destructive-color-border: var(--negative-border-default);
        --mds-button-destructive-color-border-active: transparent;
        --mds-button-destructive-color-border-hover: transparent;
        --mds-button-destructive-color-border-disabled: var(
                --negative-border-disabled
        );
        --mds-button-destructive-color-background: var(--negative-bg-default);
        --mds-button-destructive-color-background-active: var(--negative-bg-active);
        --mds-button-destructive-color-background-hover: var(--negative-bg-hover);
        --mds-button-destructive-color-background-disabled: var(
                --negative-bg-disabled
        );
        --mds-button-destructive-color-text: var(--negative-text-in-default);
        --mds-button-destructive-color-text-active: var(--negative-text-in-active);
        --mds-button-destructive-color-text-hover: var(--negative-text-in-hover);
        --mds-button-destructive-color-text-disabled: var(
                --negative-text-in-disabled
        );
        --mds-button-destructive-icon-color: var(--negative-icon-in-default);
        --mds-button-destructive-icon-color-active: var(--negative-icon-in-active);
        --mds-button-destructive-icon-color-hover: var(--negative-icon-in-hover);
        --mds-button-destructive-icon-color-disabled: var(
                --negative-icon-in-disabled
        );
    }

    &.mds-button-kind-secondary {
        --mds-button-color-border: var(--interact-border-default);
        --mds-button-color-border-active: var(--interact-border-active);
        --mds-button-color-border-hover: var(--interact-border-hover);
        --mds-button-color-border-disabled: var(--interact-border-disabled);
        --mds-button-color-background: var(--interact-bg-weak-default);
        --mds-button-color-background-active: var(--interact-bg-weak-active);
        --mds-button-color-background-hover: var(--interact-bg-weak-hover);
        --mds-button-color-background-disabled: var(--interact-bg-weak-disabled);
        --mds-button-color-text: var(--interact-text-default);
        --mds-button-color-text-active: var(--interact-text-active);
        --mds-button-color-text-hover: var(--interact-text-hover);
        --mds-button-color-text-disabled: var(--interact-text-disabled);
        --mds-button-icon-color: var(--interact-icon-default);
        --mds-button-icon-color-active: var(--interact-icon-active);
        --mds-button-icon-color-hover: var(--interact-icon-hover);
        --mds-button-icon-color-disabled: var(--interact-icon-disabled);
        --mds-button-destructive-color-border: var(--negative-border-default);
        --mds-button-destructive-color-border-active: var(--negative-border-active);
        --mds-button-destructive-color-border-hover: var(--negative-border-hover);
        --mds-button-destructive-color-border-disabled: var(
                --negative-border-disabled
        );
        --mds-button-destructive-color-background: var(--negative-bg-weak-default);
        --mds-button-destructive-color-background-active: var(
                --negative-bg-weak-active
        );
        --mds-button-destructive-color-background-hover: var(
                --negative-bg-weak-hover
        );
        --mds-button-destructive-color-background-disabled: var(
                --negative-bg-weak-disabled
        );
        --mds-button-destructive-color-text: var(--negative-text-default);
        --mds-button-destructive-color-text-active: var(--negative-text-active);
        --mds-button-destructive-color-text-hover: var(--negative-text-hover);
        --mds-button-destructive-color-text-disabled: var(--negative-text-disabled);
        --mds-button-destructive-icon-color: var(--negative-icon-default);
        --mds-button-destructive-icon-color-active: var(--negative-icon-active);
        --mds-button-destructive-icon-color-hover: var(--negative-icon-hover);
        --mds-button-destructive-icon-color-disabled: var(--negative-icon-disabled);
    }

    &.mds-button-kind-tertiary {
        --mds-button-color-border: transparent;
        --mds-button-color-border-active: transparent;
        --mds-button-color-border-hover: transparent;
        --mds-button-color-border-disabled: transparent;
        --mds-button-color-background: transparent;
        --mds-button-color-background-active: var(--interact-bg-weak-active);
        --mds-button-color-background-hover: var(--interact-bg-weak-hover);
        --mds-button-color-background-disabled: transparent;
        --mds-button-color-text: var(--interact-text-default);
        --mds-button-color-text-active: var(--interact-text-active);
        --mds-button-color-text-hover: var(--interact-text-hover);
        --mds-button-color-text-disabled: var(--interact-text-disabled);
        --mds-button-icon-color: var(--interact-icon-default);
        --mds-button-icon-color-active: var(--interact-icon-active);
        --mds-button-icon-color-hover: var(--interact-icon-hover);
        --mds-button-icon-color-disabled: var(--interact-icon-disabled);

        &.mds-button-size-md,
        &.mds-button-size-sm {
            padding: 0;
            border: none;
        }
    }
    &.mds-button-kind-tertiary-disable {
        --mds-button-color-text: var(--interact-text-disabled, #A3C8FF);
        pointer-events: none;
    }
    &.mds-button-destructive {
        --mds-button-color-border: var(--mds-button-destructive-color-border);
        --mds-button-color-border-active: var(
                --mds-button-destructive-color-border-active
        );
        --mds-button-color-border-hover: var(
                --mds-button-destructive-color-border-hover
        );
        --mds-button-color-border-disabled: var(
                --mds-button-destructive-color-border-disabled
        );
        --mds-button-color-background: var(
                --mds-button-destructive-color-background
        );
        --mds-button-color-background-active: var(
                --mds-button-destructive-color-background-active
        );
        --mds-button-color-background-hover: var(
                --mds-button-destructive-color-background-hover
        );
        --mds-button-color-background-disabled: var(
                --mds-button-destructive-color-background-disabled
        );
        --mds-button-color-text: var(--mds-button-destructive-color-text);
        --mds-button-color-text-active: var(
                --mds-button-destructive-color-text-active
        );
        --mds-button-color-text-hover: var(
                --mds-button-destructive-color-text-hover
        );
        --mds-button-color-text-disabled: var(
                --mds-button-destructive-color-text-disabled
        );
        --mds-button-icon-color: var(--mds-button-destructive-icon-color);
        --mds-button-icon-color-active: var(
                --mds-button-destructive-icon-color-active
        );
        --mds-button-icon-color-hover: var(
                --mds-button-destructive-icon-color-hover
        );
        --mds-button-icon-color-disabled: var(
                --mds-button-destructive-icon-color-disabled
        );
    }

    &.hover,
    &:hover,
    &[aria-expanded="true"] {
        --mds-button-icon-color: var(--mds-button-icon-color-hover);
        --mds-button-color-text: var(--mds-button-color-text-hover);
        --mds-button-color-background: var(--mds-button-color-background-hover);
        --mds-button-color-border: var(--mds-button-color-border-hover);
    }

    &.active,
    &.mds-button-pressed,
    &:active {
        --mds-button-icon-color: var(--mds-button-icon-color-active);
        --mds-button-color-text: var(--mds-button-color-text-active);
        --mds-button-color-background: var(--mds-button-color-background-active);
        --mds-button-color-border: var(--mds-button-color-border-active);
    }

    &.focus-visible,
    &:focus-visible {
        outline: none;
        box-shadow: var(--elevation-control-focus);
    }

    &.mds-button-loading,
    &:disabled,
    &[disabled] {
        --mds-button-icon-color: var(--mds-button-icon-color-disabled);
        --mds-button-icon-color-hover: var(--mds-button-icon-color-disabled);
        --mds-button-color-text: var(--mds-button-color-text-disabled);
        --mds-button-color-text-hover: var(--mds-button-color-text-disabled);
        --mds-button-color-background: var(--mds-button-color-background-disabled);
        --mds-button-color-background-hover: var(
                --mds-button-color-background-disabled
        );
        --mds-button-color-border: var(--mds-button-color-border-disabled);
        --mds-button-color-border-hover: var(--mds-button-color-border-disabled);

        cursor: not-allowed;

        &:not(button) {
            pointer-events: none;
        }
    }

    &.mds-button-size-md {
        --mds-button-padding-vertical: 5px;
        --mds-button-padding-horizontal: 10px;

        gap: 4px;
        font: var(--typography-p3-bold);
    }

    &.mds-button-size-sm {
        --mds-button-padding-vertical: 3px;
        --mds-button-padding-horizontal: 6px;

        gap: 4px;
        font: var(--typography-p4-bold) !important;
    }

    &.mds-button-block {
        display: block;
    }

    &.mds-button-icon-only {
        --mds-button-icon-only-width: 34px;
        --mds-button-icon-only-height: 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: var(--mds-button-icon-only-width);
        height: var(--mds-button-icon-only-height);

        &.mds-button-kind-tertiary {
            --mds-button-icon-color: var(--interact-icon-weak-default);
            --mds-button-icon-color-active: var(--interact-icon-weak-active);
            --mds-button-icon-color-hover: var(--interact-icon-weak-hover);
            --mds-button-icon-color-disabled: var(--interact-icon-weak-disabled);
            --mds-button-color-background-active: var(--interact-bg-weak-active);
            --mds-button-color-background-hover: var(--interact-bg-weak-hover);
        }

        &.mds-button-size-md {
            padding: 0;
        }

        &.mds-button-size-sm {
            --mds-button-icon-only-width: 28px;
            --mds-button-icon-only-height: 28px;

            padding: 0;
        }

        &.mds-button-size-xs {
            --mds-button-icon-only-width: 20px;
            --mds-button-icon-only-height: 20px;
        }
    }

    & .mds-button-loading-icon {
        animation: mds-button-loading-icon-spin 1s linear infinite;

        @media screen and (prefers-reduced-motion: reduce) {
            animation: none;
        }
    }
}

@keyframes mds-button-loading-icon-spin {
    100% {
        transform: rotate(360deg);
    }
}

.mds-button-admin {
    &.mds-button-kind-default,
    &.mds-button-kind-primary {
        --mds-button-color-border: var(--color-admin-interact-border-strong);
        --mds-button-color-border-hover: var(
                --color-admin-interact-border-strong-hover
        );
        --mds-button-color-border-disabled: var(
                --color-admin-interact-border-strong-disabled
        );
        --mds-button-color-background: var(
                --color-admin-interact-background-strong
        );
        --mds-button-color-background-hover: var(
                --color-admin-interact-background-strong-hover
        );
        --mds-button-color-background-disabled: var(
                --color-admin-interact-background-strong-disabled
        );
        --mds-button-color-text: var(--color-admin-interact-text-strong);
        --mds-button-color-text-hover: var(
                --color-admin-interact-text-strong-hover
        );
        --mds-button-color-text-disabled: var(
                --color-admin-interact-text-strong-disabled
        );
    }

    &.mds-button-kind-secondary {
        --mds-button-color-border: var(--color-admin-interact-border-medium);
        --mds-button-color-border-hover: var(
                --color-admin-interact-border-medium-hover
        );
        --mds-button-color-border-disabled: var(
                --color-admin-interact-border-medium-disabled
        );
        --mds-button-color-background: var(
                --color-admin-interact-background-medium
        );
        --mds-button-color-background-hover: var(
                --color-admin-interact-background-medium-hover
        );
        --mds-button-color-background-disabled: var(
                --color-admin-interact-background-medium-disabled
        );
        --mds-button-color-text: var(--color-admin-interact-text-medium);
        --mds-button-color-text-hover: var(
                --color-admin-interact-text-medium-hover
        );
        --mds-button-color-text-disabled: var(
                --color-admin-interact-text-medium-disabled
        );
    }

    &.active,
    &.hover,
    &.mds-button-pressed,
    &:active,
    &:hover,
    &[aria-expanded="true"] {
        --mds-button-icon-color: var(--mds-button-icon-color-hover);
        --mds-button-color-text: var(--mds-button-color-text-hover);
        --mds-button-color-background: var(--mds-button-color-background-hover);
        --mds-button-color-border: var(--mds-button-color-border-hover);
    }

    &.focus-visible,
    &:focus-visible {
        outline: none;
        box-shadow: var(--elevation-control-focus);
    }

    &.mds-button-loading,
    &:disabled,
    &[disabled] {
        --mds-button-icon-color: var(--mds-button-icon-color-disabled);
        --mds-button-icon-color-hover: var(--mds-button-icon-color-disabled);
        --mds-button-color-text: var(--mds-button-color-text-disabled);
        --mds-button-color-text-hover: var(--mds-button-color-text-disabled);
        --mds-button-color-background: var(--mds-button-color-background-disabled);
        --mds-button-color-background-hover: var(
                --mds-button-color-background-disabled
        );
        --mds-button-color-border: var(--mds-button-color-border-disabled);
        --mds-button-color-border-hover: var(--mds-button-color-border-disabled);

        cursor: not-allowed;

        &:not(button) {
            pointer-events: none;
        }
    }
}


/*/components/heading/src/styles.css*/
.mds-heading {
    margin: 0;
    color: var(--base-text-strong-default) !important;

    &.mds-heading-size-primary {
        font: var(--typography-heading-primary) !important;
    }

    &.mds-heading-size-section {
        font: var(--typography-heading-section) !important;
    }

    &.mds-heading-size-sub-section {
        font: var(--typography-heading-sub-section) !important;
    }

    &.mds-heading-size-smallest {
        font: var(--typography-heading-smallest) !important;
    }
}

/*components/text/src/styles.css*/
.mds-text {
    margin: 0;
    padding: 0;

    /* TODO: Consider replacing this once we have all the font variables defined. */
    font-family: var(--typography-font-body) !important;
    font-variant-numeric: tabular-nums;
}

code.mds-text {
    display: inline-block;
    font-family: "Roboto Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    Courier, monospace !important;
    font-variant-numeric: tabular-nums;
    background-color: var(--base-text-medium-default);
}

.mds-text.mds-text-monospace,
.mds-text.mds-text-monospace * {
    font-family: "Roboto Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    Courier, monospace !important;
}

.mds-text-p1 {
    font-size: 18px;
    line-height: 24px;
}

.mds-text-p2 {
    font-size: 16px;
    line-height: 22px;
}

.mds-text-p3 {
    font-size: 14px !important;
    line-height: 20px;
}

.mds-text-p4 {
    font-size: 12px;
    line-height: 18px;
}

.mds-text-weight-regular {
    font-weight: 400;
}

.mds-text-weight-semi-bold {
    font-weight: 600;
}

.mds-text-weight-bold {
    font-weight: 700;
}

.mds-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mds-text-compact {
    margin-bottom: 0;
    padding-bottom: 0;
}

.mds-text-color-regular {
    color: var(--base-text-default);
}

.mds-text-color-light {
    color: var(--base-text-medium-default);
}


/*/components/input/src/style.css*/
.mds-rebuild-input-frame {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: var(--mds-input-label-font) !important;

    & > span {
        display: flex;
        gap: 4px;
        align-items: center;
        color: var(--base-text-default);

        & .mds-rebuild-input-label-required {
            margin-left: -2px;
            color: var(--negative-text-default);
        }

        & .mds-rebuild-input-label-optional {
            font-weight: var(--typography-weight-regular);
            color: var(--base-text-medium-default);
        }
    }

    &.mds-rebuild-input-label-size-sm {
        --mds-input-label-font: var(--typography-p4-semibold);
    }

    &.mds-rebuild-input-label-size-md {
        --mds-input-label-font: var(--typography-p3-semibold);
    }

    &.mds-rebuild-input-label-size-lg {
        --mds-input-label-font: var(--typography-p2-semibold);
    }

    & .mds-tooltip {
        align-self: center;
    }

    & .mds-rebuild-input-wrapper {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }

    & .mds-rebuild-input {
        --mds-input-background-color: var(--control-bg-weak-default);
        --mds-input-border-color: var(--control-border-default);
        --mds-input-border-color-hover: var(--control-border-hover);
        --mds-input-border-color-focus: var(--control-border-focus);
        --mds-input-border-color-invalid: var(--negative-border-medium-active);
        --mds-input-font-color: var(--base-text-default);
        --mds-input-placeholder-font-color: var(--base-text-weak-default);
        --mds-input-svg-font-color: var(--control-icon-weak-default);

        cursor: pointer;

        display: flex;
        flex-direction: row;
        flex-grow: 1;
        gap: 6px;
        align-items: center;

        box-sizing: border-box;
        min-width: var(--mds-rebuild-input-frame-min-width);
        max-width: var(--mds-rebuild-input-frame-max-width);
        padding: var(--mds-input-padding-y) var(--mds-input-padding-x);

        color: var(--mds-input-font-color);

        background-color: var(--mds-input-background-color);
        border: 2px solid var(--mds-input-border-color);
        border-radius: 6px;

        &.mds-rebuild-input-invalid {
            --mds-input-border-color: var(--mds-input-border-color-invalid);
            --mds-input-border-color-hover: var(--mds-input-border-color-invalid);
            --mds-input-border-color-focus: var(--mds-input-border-color-invalid);

            box-shadow: var(--effects-shadow-invalid);

            &:has(input:focus-visible) {
                box-shadow: var(--effects-shadow-invalid-focus);
            }
        }

        &.mds-rebuild-input-disabled {
            --mds-input-font-color: var(--base-text-disabled);
            --mds-input-background-color: var(--control-bg-weak-disabled);
            --mds-input-border-color: var(--control-border-disabled);
            --mds-input-svg-font-color: var(--control-icon-weak-disabled);
        }

        & > svg {
            color: var(--mds-input-svg-font-color);
        }

        & > input {
            flex-grow: 1;

            width: 100%;
            padding: 0;

            font-size: inherit;
            line-height: inherit;
            color: inherit;

            background-color: transparent;
            border: 0;

            &[type="search"]::-webkit-search-cancel-button {
                display: none;
            }

            &::placeholder {
                font-weight: var(--typography-weight-regular);
                color: var(--mds-input-placeholder-font-color);
            }

            &:focus {
                outline: none;
            }
        }

        & .mds-rebuild-input-functional-button {
            cursor: pointer;

            display: flex;
            align-items: center;
            justify-items: center;

            padding: 0;

            color: var(--control-icon-weak-default);

            background-color: transparent;
            border: 0;

            &:hover {
                color: var(--control-icon-weak-hover);
            }

            &:focus-visible {
                border-radius: 16px;
                outline: none;
                box-shadow: var(--elevation-control-focus);
            }
        }

        &:has(input:focus-visible) {
            border-color: var(--mds-input-border-color-focus);
            box-shadow: var(--elevation-control-focus);
        }

        &:hover:not(.mds-rebuild-input-disabled) {
            --mds-input-border-color: var(--mds-input-border-color-hover);
            --mds-input-placeholder-font-color: var(--base-text-weak-default);
        }

        &.mds-rebuild-input-size-lg {
            --mds-input-padding-x: 14px;
            --mds-input-padding-y: 7px;
            --mds-input-fixed-width: 280px;
            --mds-rebuild-input-frame-min-width: 60px;
            --mds-rebuild-input-frame-max-width: 600px;
        }

        &.mds-rebuild-input-size-md {
            --mds-input-padding-x: 10px;
            --mds-input-padding-y: 5px;
            --mds-input-fixed-width: 280px;
            --mds-rebuild-input-frame-min-width: 60px;
            --mds-rebuild-input-frame-max-width: 600px;
        }

        &.mds-rebuild-input-size-sm {
            --mds-input-padding-x: 6px;
            --mds-input-padding-y: 3px;
            --mds-input-fixed-width: 240px;
            --mds-rebuild-input-frame-min-width: 48px;
            --mds-rebuild-input-frame-max-width: 520px;
        }

        &.mds-rebuild-input-fixed-width {
            flex-grow: 0;
            width: var(--mds-input-fixed-width);
        }
    }
}

/* TODO add sizes for this */
.mds-rebuild-input-autocomplete-menu {
    --mds-input-autocomplete-menu-bg-color: var(--control-bg-weak-default);
    --mds-input-autocomplete-divider: 1px var(--base-border-default) solid;

    overflow: hidden;

    box-sizing: border-box;
    margin-top: 4px;

    font: var(--mds-input-autocomplete-font);
    color: var(--base-text-default);

    background-color: var(--mds-input-autocomplete-menu-bg-color);
    border: 2px var(--control-border-default) solid;
    border-radius: 6px;
    box-shadow: 0 2px 5px #0000000d;

    & .mds-rebuild-input-autocomplete-menu-item {
        --mds-input-autocomplete-font: var(--typography-p3-regular);

        padding: var(--mds-input-autocomplete-padding-y)
        var(--mds-input-autocomplete-padding-x);

        &.mds-rebuild-input-autocomplete-menu-item-active {
            background-color: var(--control-bg-weak-hover);
        }
    }

    &.mds-rebuild-input-autocomplete-menu-size-lg,
    &.mds-rebuild-input-autocomplete-menu-size-md {
        --mds-input-autocomplete-font: var(--typography-p3-regular);
        --mds-input-autocomplete-category-title-font: var(--typography-p4-regular);
        --mds-input-autocomplete-padding-x: 10px;
        --mds-input-autocomplete-padding-y: 8px;
        --mds-input-autocomplete-category-title-padding-x: 10px;
        --mds-input-autocomplete-category-title-padding-y: 6px;
        --mds-input-autocomplete-category-padding-x: 16px;
        --mds-input-autocomplete-category-padding-y: 8px;
    }

    &.mds-rebuild-input-autocomplete-menu-size-sm {
        --mds-input-autocomplete-font: var(--typography-p3-regular);
        --mds-input-autocomplete-category-title-font: var(--typography-p4-regular);
        --mds-input-autocomplete-padding-x: 6px;
        --mds-input-autocomplete-padding-y: 4px;
        --mds-input-autocomplete-category-title-padding-x: 6px;
        --mds-input-autocomplete-category-title-padding-y: 4px;
        --mds-input-autocomplete-category-padding-x: 12px;
        --mds-input-autocomplete-category-padding-y: 4px;
    }

    & .mds-rebuild-input-autocomplete-menu-category {
        & + .mds-rebuild-input-autocomplete-menu-category {
            border-top: var(--mds-input-autocomplete-divider);
        }

        & > .mds-rebuild-input-autocomplete-menu-category-title {
            --mds-input-autocomplete-font: var(
                    --mds-input-autocomplete-category-title-font
            );

            padding: var(--mds-input-autocomplete-category-title-padding-y)
            var(--mds-input-autocomplete-category-title-padding-x);
            color: var(--base-text-medium-default);
        }

        & > .mds-rebuild-input-autocomplete-menu-item {
            --mds-input-autocomplete-padding-x: var(
                    --mds-input-autocomplete-category-padding-x
            );
            --mds-input-autocomplete-padding-y: var(
                    --mds-input-autocomplete-category-padding-y
            );
        }
    }
}

/*components/footer/src/styles.css*/
.mds-footer {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: fit-content;
    padding: 20px 0 24px;

    background-color: var(--base-bg-default);
}

/*components/notification/src/style.css*/
.mds-notification {
  --mds-notification-bg-color: transparent;
  --mds-notification-border-color: transparent;

  display: flex;
  gap: 8px;
  align-items: flex-start;

  padding: 12px 16px;

  font: var(--typography-p3-regular);
  font-variant-numeric: tabular-nums;
  color: var(--base-text-default);

  background-color: var(--mds-notification-bg-color);
  border: 1px solid transparent;
  border-radius: 6px;

  & .mds-notification-title {
    font: var(--typography-p3-bold);
  }

  &:not(.mds-notification-page-banner) {
    &.mds-notification-information {
      --mds-notification-bg-color: var(--info-bg-strong-default);
      --mds-notification-border-color: var(--info-border-default);
    }

    &.mds-notification-warning {
      --mds-notification-bg-color: var(--warning-bg-strong-default);
      --mds-notification-border-color: var(--warning-border-default);
    }

    &.mds-notification-negative {
      --mds-notification-bg-color: var(--negative-bg-strong-default);
      --mds-notification-border-color: var(--negative-border-default);
    }

    &.mds-notification-positive {
      --mds-notification-bg-color: var(--positive-bg-strong-default);
      --mds-notification-border-color: var(--positive-border-default);
    }
  }

  &.mds-notification-page-banner {
    gap: 18px;

    padding: 16px 20px 16px 12px;

    border-left: 6px solid var(--mds-notification-border-color);
    border-radius: 6px;
    box-shadow: var(--effects-shadow-lifted);

    &.mds-notification-information {
      --mds-notification-border-color: var(--info-border-default);
      --mds-notification-bg-color: var(--info-bg-weak-default);
    }

    &.mds-notification-negative {
      --mds-notification-border-color: var(--negative-border-default);
      --mds-notification-bg-color: var(--negative-bg-weak-default);
    }

    &.mds-notification-warning {
      --mds-notification-border-color: var(--warning-border-default);
      --mds-notification-bg-color: var(--warning-bg-weak-default);
    }

    &.mds-notification-positive {
      --mds-notification-border-color: var(--positive-border-default);
      --mds-notification-bg-color: var(--positive-bg-weak-default);
    }
  }

  & .mds-notification-content {
    flex: 1;
    align-self: center;
  }

  &.mds-notification-product-banner {
    display: flex;
    gap: 16px;

    padding: 12px 16px;

    color: var(--base-text-default);

    background: var(--mds-notification-bg-color);
    border: 1px solid var(--mds-notification-border-color);
    border-radius: 6px;
    box-shadow: var(--effects-shadow-lifted);

    & .mds-notification-content {
      overflow: hidden;
      display: -webkit-box;

      max-width: 940px;

      text-overflow: ellipsis;

      -webkit-box-orient: vertical;

      &.with-title {
        -webkit-line-clamp: 2;
      }

      &.without-title {
        -webkit-line-clamp: 3;
      }

      & .mds-button {
        display: inline;
      }
    }

    & .mds-notification-title {
      overflow: hidden;
      padding-bottom: 4px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  & .mds-notification-close-button.mds-button-icon-only {
    width: 24px;
    height: 24px;
  }
  .icon-style {
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left:0 !important;
    padding-left: 0 !important;
  }
}