.freedom-btn__ripple {
    animation: ripple-bubble 850ms
}

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

.freedom-btn__ripple-primary {
    background-color: #c5dbff
}

.freedom-btn__ripple--secondary {
    background-color: #c5dbff
}

.freedom-btn__ripple--text {
    background-color: #c5dbff
}

.freedom-btn__ripple--danger {
    background-color: #ffbdc8
}

.freedom-icon-btn {
    border-color: rgba(0,0,0,0);
    border-radius: 50%;
    background-color: rgba(0,0,0,0);
    color: #666;
    transition: all 200ms ease-out;
    transition-property: background-color,color,border-color
}

    .freedom-icon-btn:hover {
        background-color: #f0f0f0
    }

    .freedom-icon-btn:active, .freedom-icon-btn-active {
        background-color: #bdbdbd
    }

    .freedom-icon-btn:disabled, .freedom-icon-btn:hover:disabled, .freedom-icon-btn:focus-visible:disabled {
        background-color: rgba(0,0,0,0);
        color: #bdbdbd;
        pointer-events: none;
        user-select: none
    }

.freedom-icon-btn__ripple {
    animation: ripple-bubble 850ms;
    background-color: #bdbdbd
}

@media screen and (prefers-reduced-motion: reduce) {
    .freedom-icon-btn__ripple {
        animation: none
    }
}

.freedom-back-to-top {
    transition: all 200ms ease-out;
    transition-property: opacity,visibility
}

.freedom-checkbox__root {
    border-radius: 50%;
    background: rgba(0,0,0,0);
    transition: all 200ms ease-out;
    transition-property: background-color
}

@media screen and (prefers-reduced-motion: reduce) {
    .freedom-checkbox__root {
        transition: none
    }
}

.freedom-checkbox__root:hover {
    background-color: var(--neutral-weak-100)
}

.freedom-checkbox__root:active[data-state=unchecked], .freedom-checkbox__root:active[data-state=indeterminate] {
    background-color: #bdbdbd
}

.freedom-checkbox__root:active[data-state=checked] {
    background-color: #c5dbff
}

.freedom-checkbox__root:disabled:hover, .freedom-checkbox__root:disabled:active[data-state=unchecked], .freedom-checkbox__root:disabled:active[data-state=checked] {
    background-color: rgba(0,0,0,0)
}

.freedom-checkbox__label {
    color: #666
}

.freedom-checkbox__label--disabled {
    color: #bdbdbd
}

.freedom-checkbox__indicator-wrapper {
    border-style: solid;
    border-color: #666;
    border-radius: 4px
}

.freedom-checkbox__indicator-wrapper--disabled {
    border-color: #bdbdbd
}

.freedom-checkbox__indicator-wrapper--checked {
    border-color: #0d69fd;
    background: #0d69fd
}

.freedom-checkbox__indicator-wrapper--checked--disabled {
    border-color: #bdbdbd;
    background: #bdbdbd
}

.freedom-chip {
    border-style: solid;
    border-color: rgba(0,0,0,0);
    border-radius: 9999px;
    background: #f0f0f0;
    color: #666
}

.freedom-chip--active {
    border-color: #bdbdbd;
    background: var(--neutral-weak-100)
}

.freedom-chip--interactive {
    cursor: pointer
}

.freedom-chip__close-icon {
    background: none;
    cursor: pointer
}

.freedom-datepicker__calendar {
    border-radius: 4px;
    background-color: var(--neutral-weak-100);
    box-shadow: 0px 4px 12px 0px #bdbdbd
}

.freedom-datepicker__select {
    border-radius: 4px;
    background-color: rgba(0,0,0,0);
    color: #666
}

.freedom-datepicker__select--expanded {
    background-color: #e8f1ff
}

.freedom-datepicker__select-menu-list {
    border-radius: 4px;
    background-color: var(--neutral-weak-100);
    box-shadow: 0px 4px 12px 0px #bdbdbd
}

.freedom-datepicker__select-option {
    color: #212121
}

    .freedom-datepicker__select-option:hover {
        background-color: #f0f0f0
    }

.freedom-datepicker__select-option--focused {
    background-color: #bdbdbd
}

.freedom-datepicker__select-option--selected {
    background-color: #e8f1ff
}

    .freedom-datepicker__select-option--selected:hover, .freedom-datepicker__select-option--selected--focused {
        background-color: #c5dbff
    }

.freedom-datepicker-input__field {
    background-color: rgba(0,0,0,0);
    color: #666
}

    .freedom-datepicker-input__field::placeholder {
        color: #bdbdbd
    }

.freedom-datepicker-input__field--disabled {
    color: #bdbdbd
}

.freedom-datepicker .react-datepicker__month-container {
    border-radius: inherit
}

.freedom-datepicker .react-datepicker__day-name {
    text-transform: uppercase
}

.freedom-datepicker .react-datepicker__day {
    border-radius: 50%;
    color: #666
}

    .freedom-datepicker .react-datepicker__day:hover {
        background-color: #f0f0f0;
        color: #666
    }

    .freedom-datepicker .react-datepicker__day:active {
        background-color: #bdbdbd
    }

    .freedom-datepicker .react-datepicker__day:focus-visible {
        background-color: #bdbdbd;
        color: #666;
        outline: none
    }

.freedom-datepicker .react-datepicker__day--outside-month {
    pointer-events: none;
    visibility: hidden
}

.freedom-datepicker .react-datepicker__day--today {
    background-color: rgba(0,0,0,0);
    color: #0d69fd
}

.freedom-datepicker .react-datepicker__day--selected {
    background-color: #0d69fd;
    color: var(--neutral-weak-100)
}

    .freedom-datepicker .react-datepicker__day--selected:hover {
        background-color: #0b4bb1;
        color: var(--neutral-weak-100)
    }

    .freedom-datepicker .react-datepicker__day--selected:active {
        background-color: #bdbdbd;
        color: #666
    }

    .freedom-datepicker .react-datepicker__day--selected:focus-visible {
        background-color: #0b4bb1;
        color: var(--neutral-weak-100);
        outline: none
    }

.freedom-datepicker .react-datepicker__day--disabled {
    color: #bdbdbd
}

    .freedom-datepicker .react-datepicker__day--disabled:hover {
        background-color: rgba(0,0,0,0);
        color: #bdbdbd
    }

.freedom-dropdown-menu {
    z-index: 3;
    border-radius: 4px;
    background-color: var(--neutral-weak-100);
    box-shadow: 0px 4px 12px 0px #bdbdbd
}

.freedom-dropdown-menu__item {
    border-radius: 0;
    background-color: var(--neutral-weak-100);
    color: #212121;
    cursor: pointer
}

    .freedom-dropdown-menu__item:focus-visible {
        background-color: #bdbdbd;
        outline: none
    }

    .freedom-dropdown-menu__item:hover {
        background-color: #f0f0f0
    }

    .freedom-dropdown-menu__item:active {
        background-color: #bdbdbd
    }

    .freedom-dropdown-menu__item:disabled, .freedom-dropdown-menu__item[data-disabled] {
        background-color: var(--neutral-weak-100);
        color: #bdbdbd;
        pointer-events: none
    }

.freedom-dropdown-menu__group-label {
    background-color: var(--neutral-weak-100);
    color: #666
}

.freedom-dropdown-menu__separator {
    border-radius: 9999px;
    background-color: #bdbdbd
}

.freedom-tag {
    border-radius: 2px
}

.freedom-tag--warning {
    background-color: #fff3b5;
    color: #806a00
}

.freedom-tag--info {
    background-color: #c5dbff;
    color: #0b4bb1
}

.freedom-tag--success {
    background-color: #bdf2c8;
    color: #1a5b28
}

.freedom-tag--danger {
    background-color: #ffbdc8;
    color: #ae0925
}

.freedom-tag--custom {
    background-color: #f0f0f0;
    color: #666
}

.freedom-modal {
    z-index: 99999
}

.freedom-modal__background {
    background: #212121;
    opacity: 32%
}

.freedom-modal__content-wrapper {
    z-index: 100000;
    border-radius: 4px;
    animation: content-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
    background-color: var(--neutral-weak-100);
    box-shadow: 0px 8px 16px 0px #bdbdbd
}

.freedom-modal__header {
    cursor: move
}

@media screen and (prefers-reduced-motion: reduce) {
    .freedom-modal__content-wrapper {
        animation: none
    }
}

.freedom-input-wrapper__field-outer-wrapper {
    border-radius: 4px
}

.freedom-input-wrapper__field-wrapper {
    border-style: solid;
    border-color: #bdbdbd;
    border-radius: inherit;
    background-color: var(--neutral-weak-100)
}

    .freedom-input-wrapper__field-wrapper:hover {
        border-color: #666
    }

    .freedom-input-wrapper__field-wrapper:focus-within {
        outline-color: #0d69fd;
        outline-style: solid
    }

.freedom-input-wrapper__label {
    background: var(--neutral-weak-100);
    color: #666
}

.freedom-input-wrapper__field-wrapper:focus-within .freedom-input-wrapper__label {
    color: #0d69fd
}

.freedom-input-wrapper__field-wrapper--disabled {
    border-color: #bdbdbd;
    pointer-events: none
}

.freedom-input-wrapper__field-wrapper--readonly {
    background-color: #f0f0f0
}

    .freedom-input-wrapper__field-wrapper--readonly:hover {
        border-color: #bdbdbd
    }

.freedom-input-wrapper__field-wrapper--invalid {
    border-color: #da2140
}

    .freedom-input-wrapper__field-wrapper--invalid:hover {
        border-color: #da2140
    }

    .freedom-input-wrapper__field-wrapper--invalid:focus-within {
        border-color: #da2140;
        outline-color: #da2140
    }

        .freedom-input-wrapper__field-wrapper--invalid:focus-within .freedom-input-wrapper__label {
            color: #da2140
        }

.freedom-input-wrapper__clear-btn-wrapper {
    border-radius: inherit
}

.freedom-input-wrapper__label--disabled {
    color: #bdbdbd
}

.freedom-input-wrapper__label--invalid {
    color: #da2140
}

@media screen and (prefers-reduced-motion: reduce) {
    .freedom-input-wrapper__field > * {
        border: none;
        background-color: rgba(0,0,0,0);
        color: #666;
        transition: none
    }
}

.freedom-input-wrapper__field > * {
    border: none;
    background-color: rgba(0,0,0,0);
    color: #666;
    transition: width .1s ease-in-out
}

    .freedom-input-wrapper__field > *::placeholder {
        color: #bdbdbd
    }

    .freedom-input-wrapper__field > *:disabled {
        color: #bdbdbd
    }

    .freedom-input-wrapper__field > *:focus {
        outline: none
    }

.freedom-input-wrapper__helpers {
    color: #666
}

.freedom-input-wrapper__helpers--invalid {
    color: #ae0925
}

.freedom-input-wrapper__helper-text-adornment {
    color: #666
}

.freedom-input-wrapper__adornment {
    color: #666
}

.freedom-text-input__field {
    background-color: rgba(0,0,0,0);
    color: #666
}

    .freedom-text-input__field::placeholder {
        color: #bdbdbd
    }

.freedom-text-input__field--disabled {
    color: #bdbdbd
}

.freedom-password-input__field {
    background-color: rgba(0,0,0,0);
    color: #666
}

    .freedom-password-input__field::placeholder {
        color: #bdbdbd
    }

.freedom-password-input__field--disabled {
    color: #bdbdbd
}

.freedom-select__control {
    color: #666
}

.freedom-select__value-container--disabled {
    color: #bdbdbd
}

.freedom-select__menu-list {
    border-radius: 4px;
    margin-top: 4px;
    background-color: var(--neutral-weak-100);
    box-shadow: 0px 4px 12px 0px #bdbdbd
}

.freedom-select__menu-option {
    background-color: var(--neutral-weak-100);
    color: #212121
}

    .freedom-select__menu-option:active {
        background-color: #bdbdbd
    }

.freedom-select__menu-option--focused {
    background-color: #bdbdbd
}

.freedom-select__menu-option:hover {
    background-color: #f0f0f0
}

.freedom-select__menu-option--selected {
    background-color: #e8f1ff
}

    .freedom-select__menu-option--selected:hover, .freedom-select__menu-option--selected.freedom-select__menu-option--focused {
        background-color: #c5dbff
    }

    .freedom-select__menu-option--selected:active {
        background-color: #bdbdbd
    }

.freedom-select__menu-option--disabled {
    background-color: rgba(0,0,0,0);
    color: #bdbdbd;
    pointer-events: none
}

    .freedom-select__menu-option--disabled.freedom-select__menu-option--focused {
        background-color: #f0f0f0
    }

.freedom-select__menu-option--with-separator::after {
    background-color: #bdbdbd
}

.freedom-select__group-heading {
    background-color: var(--neutral-weak-100);
    color: #666
}

.freedom-select__placeholder {
    color: #bdbdbd
}

    .freedom-select__placeholder + [data-value] {
        color: #bdbdbd
    }

.freedom-radio-group__item {
    background-color: rgba(0,0,0,0);
    transition: background-color 250ms
}

    .freedom-radio-group__item:hover {
        background-color: #f0f0f0
    }

    .freedom-radio-group__item:active {
        background-color: #bdbdbd
    }

    .freedom-radio-group__item:focus-visible {
        background-color: #bdbdbd
    }

.freedom-radio-group__inner-item {
    border: 2px solid #666
}

.freedom-radio-group__item:disabled {
    background-color: rgba(0,0,0,0);
    pointer-events: none
}

    .freedom-radio-group__item:disabled .freedom-radio-group__inner-item {
        border-color: #bdbdbd
    }

.freedom-radio-group__label {
    color: #666
}

.freedom-radio-group__item:disabled + .freedom-radio-group__label {
    color: #bdbdbd;
    pointer-events: none
}

.freedom-radio-group__item-indicator {
    background-color: #0d69fd
}

.freedom-radio-group__item[data-state=checked] .freedom-radio-group__inner-item {
    border-color: #0d69fd;
    background-color: #c5dbff
}

.freedom-radio-group__item[data-state=checked]:active {
    background-color: #c5dbff
}

.freedom-radio-group__item[data-state=checked]:focus-visible {
    background-color: #c5dbff
}

.freedom-radio-group__item[data-state=checked]:disabled .freedom-radio-group__inner-item {
    border-color: #bdbdbd;
    background-color: rgba(0,0,0,0)
}

.freedom-radio-group__item[data-state=checked]:disabled .freedom-radio-group__item-indicator {
    background-color: #bdbdbd
}

.freedom-tooltip {
    padding: 8px 16px;
    border-radius: 4px;
    margin: 8px;
    background-color: #666;
    box-shadow: 0px 4px 12px 0px #bdbdbd;
    color: var(--neutral-weak-100);
    font-family: Roboto,sans-serif;
    font-size: .75rem;
    letter-spacing: .04em
}

.freedom-tooltip__arrow {
    fill: #666
}

.freedom-switch__root {
    background-color: rgba(0,0,0,0)
}

.freedom-switch__inner-root {
    border: 1px solid #666;
    background-color: var(--neutral-weak-100);
    transition: all 250ms
}

.freedom-switch__thumb {
    background-color: #bdbdbd;
    transition: all 250ms
}

.freedom-switch__inner-root:hover .freedom-switch__thumb {
    background-color: #666
}

    .freedom-switch__inner-root:hover .freedom-switch__thumb svg path {
        fill: #bdbdbd
    }

.freedom-switch__inner-root:active {
    background: #bdbdbd
}

    .freedom-switch__inner-root:active .freedom-switch__thumb {
        background-color: #666
    }

.freedom-switch__root:disabled .freedom-switch__inner-root {
    border: 1px solid #bdbdbd;
    background-color: #f0f0f0;
    pointer-events: none
}

.freedom-switch__root:disabled .freedom-switch__thumb svg path {
    fill: #666
}

.freedom-switch__root[data-state=checked] .freedom-switch__inner-root {
    border-color: rgba(0,0,0,0);
    background-color: #0d69fd
}

.freedom-switch__root[data-state=checked] .freedom-switch__thumb {
    background-color: var(--neutral-weak-100)
}

    .freedom-switch__root[data-state=checked] .freedom-switch__thumb svg path {
        fill: #0d69fd
    }

.freedom-switch__root[data-state=checked]:hover .freedom-switch__inner-root {
    background-color: #0b4bb1
}

.freedom-switch__root[data-state=checked]:hover .freedom-switch__thumb {
    background-color: var(--neutral-weak-100)
}

    .freedom-switch__root[data-state=checked]:hover .freedom-switch__thumb svg path {
        fill: #0d69fd
    }

.freedom-switch__root[data-state=checked]:active .freedom-switch__inner-root {
    background-color: #c5dbff
}

.freedom-switch__root[data-state=checked]:disabled .freedom-switch__inner-root {
    border: 1px solid #bdbdbd;
    background: #f0f0f0
}

.freedom-switch__root[data-state=checked]:disabled .freedom-switch__thumb {
    background: #bdbdbd
}

    .freedom-switch__root[data-state=checked]:disabled .freedom-switch__thumb svg path {
        fill: #666
    }

.freedom-switch__label {
    color: #666
}

.freedom-switch__label--disabled {
    color: #bdbdbd
}

.freedom-filter__filter-tags-wrapper {
    border-style: solid;
    border-color: #bdbdbd;
    border-radius: 4px;
    background: var(--neutral-weak-100);
    transition: all 200ms ease-out
}

.freedom-filter__filter-tags-wrapper--expanded {
    border-color: rgba(0,0,0,0);
    background: #f0f0f0
}

.freedom-filter__filter-tags-outer-wrapper {
    transition: all 200ms ease-in-out
}

.freedom-filter__form {
    border-bottom-style: solid;
    border-bottom-color: #bdbdbd;
    transition: all 500ms cubic-bezier(0, 1, 0, 1)
}

.freedom-filter__form--expanded {
    transition: all 200ms ease-in-out
}

.freedom-data-grid__table-cell {
    background: var(--neutral-weak-100);
    color: #212121
}

.freedom-data-grid__table-container--empty {
    border-color: #bdbdbd
}

.freedom-data-grid__table-selection-cell {
    background: var(--neutral-weak-100)
}

.freedom-data-grid__table--separator-x td {
    border-color: #bdbdbd
}

.freedom-data-grid__table--separator-y td {
    border-color: #bdbdbd
}

.freedom-data-grid__table--separator-x .freedom-data-grid__table-header-row td {
    border-color: #bdbdbd
}

.freedom-data-grid__table--separator-y .freedom-data-grid__table-header-row td {
    border-color: #bdbdbd
}

.freedom-data-grid__table--separator-y td:first-of-type {
    border-color: #bdbdbd
}

.freedom-data-grid__table--separator-y td:last-of-type {
    border-color: #bdbdbd
}

.freedom-data-grid__table--striped tr:nth-child(even) td {
    background-color: #f0f0f0
}

.freedom-data-grid__table-actions-cell {
    background-color: var(--neutral-weak-100)
}

.freedom-data-grid__table-selection-row--highlighted .freedom-data-grid__table-cell, .freedom-data-grid__table-selection-row--highlighted .freedom-data-grid__table-actions-cell, .freedom-data-grid__table-selection-cell--highlighted {
    background: #e8f1ff
}

.freedom-data-grid__table--striped tr:nth-child(even) .freedom-data-grid__table-selection-cell--highlighted {
    background: #e8f1ff
}

.freedom-data-grid__table--striped .freedom-data-grid__table-selection-row--highlighted:nth-child(even) td {
    background: #e8f1ff
}

.freedom-data-grid__table-header-cell {
    background-color: #f0f0f0
}

.freedom-data-grid__table--separator-y .freedom-data-grid__table-header-row td:first-of-type {
    border-color: #bdbdbd
}

.freedom-data-grid__table-selection-header-cell {
    background-color: #f0f0f0
}

.freedom-data-grid__table-tree-expand-button {
    background-color: rgba(0,0,0,0);
    transition: transform .1s ease-in-out
}

.freedom-spinner {
    border-radius: 4px
}

.freedom-spinner__description {
    color: #666
}

.freedom-spinner__delay-message {
    color: #666;
    transition: all 500ms ease-in-out
}

.freedom-breadcrumbs__crumb, .freedom-breadcrumbs__crumb * {
    color: #666
}

    .freedom-breadcrumbs__crumb:last-child, .freedom-breadcrumbs__crumb:last-child * {
        color: #212121
    }

.freedom-breadcrumbs__show-more-btn {
    border-radius: 2px;
    background-color: #f0f0f0
}

.freedom-navigation-menu__list {
    border-bottom-color: #bdbdbd
}

.freedom-navigation-menu__item {
    border-bottom-color: #bdbdbd;
    background-color: rgba(0,0,0,0);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #666
}

.freedom-navigation-menu__group-menu .freedom-navigation-menu__item {
    color: #212121
}

.freedom-navigation-menu__item:hover {
    color: #212121
}

.freedom-navigation-menu__item:focus-visible {
    background-color: #e8f1ff;
    color: #212121;
    outline: none
}

.freedom-navigation-menu__item:active {
    background-color: #bdbdbd;
    color: #212121
}

.freedom-navigation-menu__item--active, .freedom-navigation-menu__item--group-trigger--active {
    border-bottom-color: #0d69fd;
    color: #0d69fd
}

.freedom-navigation-menu__item--disabled {
    border-bottom-color: #bdbdbd;
    background-color: #f0f0f0;
    color: #bdbdbd;
    cursor: default;
    pointer-events: none
}

.freedom-navigation-menu__group-menu .freedom-navigation-menu__item--active {
    background-color: #e8f1ff;
    color: #212121
}

.freedom-navigation-menu__item--active:active {
    border-bottom-color: #bdbdbd;
    color: #212121
}

.freedom-navigation-menu__item--active:focus-visible {
    background-color: #e8f1ff;
    outline: none
}

.freedom-navigation-menu__group-menu {
    border-radius: 4px;
    background-color: var(--neutral-weak-100);
    box-shadow: 0px 4px 12px 0px #bdbdbd
}

    .freedom-navigation-menu__group-menu .freedom-navigation-menu__item:hover {
        background-color: #f0f0f0
    }

    .freedom-navigation-menu__group-menu .freedom-navigation-menu__item:focus-visible {
        background-color: #bdbdbd
    }

    .freedom-navigation-menu__group-menu .freedom-navigation-menu__item--disabled {
        background-color: rgba(0,0,0,0);
        color: #bdbdbd
    }

    .freedom-navigation-menu__group-menu .freedom-navigation-menu__item--active:hover {
        background-color: #c5dbff
    }

    .freedom-navigation-menu__group-menu .freedom-navigation-menu__item--active:active {
        color: #212121
    }

    .freedom-navigation-menu__group-menu .freedom-navigation-menu__item--active:focus-visible {
        background-color: #c5dbff
    }

/* ***************************************************** */
/* ***************************************************** */
/* ***************************************************** */
/* ***************************************************** */

/* layout */

body.freedom {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: var(--Neutral-Weak-100);
    font: var(--body-default-font);
    font-family: var(--font-family-default);
    letter-spacing: var(--body-default-letter-spacing);
    text-decoration: var(--body-default-text-decoration);
}

.freedom > main {
    margin-top: 72px;
}

    .freedom > main.center {
        display: flex;
        justify-content: center;
    }

.freedom > footer {
    width: 100%;
    height: 48px;
    display: flex;
    padding: var(--Outer-2-grau);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid var(--Neutral-Weak-200, #F0F0F0);
    background: var(--Neutral-Weak-100, #FFF);
}

    .freedom > footer .footer-start {
        color: var(--Neutral-Strong-200);
        text-align: right;
        font: var(--caption-default-font);
        letter-spacing: var(--caption-default-letter-spacing);
        text-decoration: var(--caption-default-text-decoration);
        margin-left: var(--outer-space-2);
    }

    .freedom > footer .footer-end {
        color: var(--Neutral-Strong-200);
        font: var(--caption-default-font);
        letter-spacing: var(--caption-default-letter-spacing);
        text-decoration: var(--caption-default-text-decoration);
        margin-right: var(--outer-space-2);
    }

/* login card */

.freedom-login-card {
    display: flex;
    padding: var(--Outer-1-grau, 8px) var(--Outer-2-grau, 16px) var(--Outer-3-grau, 24px) var(--Outer-2-grau, 16px);
    flex-direction: column;
    align-items: center;
    gap: var(--Outer-2-grau, 16px);
    width: 336px;
    border-radius: var(--SM, 8px);
    background: var(--Neutral-Weak-100);
}

.freedom-login-logo {
    display: flex;
    width: 128px;
    height: 128px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.freedom-login-body, .freedom-login-body form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Outer-3-grau, 24px);
    width: 100%;
}

    .freedom-login-body .alert {
        width: 100%;
    }

    .freedom-login-body hr {
        margin: -8px 0 -8px 0;
        width: 100%;
    }

/* fields */

.freedom-form-field {
    width: 100%;
    display: inline-block;
    vertical-align: bottom;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    margin: 0;
}

.freedom-field-group {
    padding: 0;
    border: 0;
    margin: 0;
    font-size: 100%;
    position: relative;
    border-radius: var(--border-radius-xs);
    padding-top: .5rem;
}

.freedom-field-content {
    background-color: var(--neutral-weak-100);
    border: 1px solid var(--Neutral-Weak-300, #BDBDBD);
    border-radius: var(--border-radius-xs, 4px);
    box-sizing: inherit;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
}

    .freedom-field-content:hover {
        border-color: var(--neutral-strong-100);
    }

    .freedom-field-content:focus-within, .freedom-field-content:focus-within:hover {
        border-color: var(--brand-primary-300);
        outline: 1px solid var(--brand-primary-300);
    }

        .freedom-field-content:focus-within .freedom-field-label {
            color: var(--brand-primary-300);
        }

.freedom-field-label {
    background: var(--neutral-weak-100);
    color: var(--neutral-strong-100);
    border: 0;
    margin: 0;
    position: absolute;
    z-index: 1;
    top: -8px;
    left: 8px;
    display: block;
    overflow: hidden;
    max-width: 100%;
    padding: 0 4px;
    font: var(--label-default-font);
    letter-spacing: var(--label-default-letter-spacing);
    text-decoration: var(--label-default-text-decoration);
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.freedom-field-wrapper {
    box-sizing: border-box;
    padding: 0 12px;
    border: 0;
    margin: 0;
    font-family: inherit;
    font-size: 100%;
    display: flex;
    width: 100%;
    align-items: center;
    background-color: rgba(0,0,0,0);
    color: #666;
    transition: width .1s ease-in-out;
}

.freedom-field-prepend {
    color: var(--neutral-strong-100);
    margin-right: var(--inner-space-3);
    font: 400 .875rem/1rem Roboto,sans-serif;
    letter-spacing: 0em;
    line-height: 20px;
    text-decoration: none;
}

/* Input Fields */

.freedom input::placeholder, .freedom select::placeholder {
    color: var(--neutral-weak-300);
}

.freedom-field-wrapper > input, .freedom-field-wrapper > select {
    background-color: rgba(0,0,0,0);
    color: #666;
    width: 100%;
    flex: 1;
    padding: 10px 0;
    font: 400 .875rem/1rem Roboto,sans-serif;
    letter-spacing: 0em;
    line-height: 18px;
    margin-top: 2px;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: none;
}

.freedom input, .freedom input:focus, .freedom input:active, .freedom input:hover,
.freedom select, .freedom select:focus, .freedom select:active, .freedom select:hover{
    border: none;
    outline: none;
    box-shadow: none;
}

/* buttons */

.freedom button {
    border-style: solid;
    border-radius: var(--border-radius-xs);
    transition: all 200ms ease-out;
    transition-property: background-color,color;
    gap: var(--outer-space-1);
    padding: var(--inner-space-5) var(--inner-space-7);
    font: var(--button-default-font);
    letter-spacing: var(--button-default-letter-spacing);
    text-decoration: var(--button-default-text-decoration);
    outline: none;
}

    .freedom button:focus, .freedom button:active, .freedom button:focus-visible {
        outline: none;
    }

    .freedom button.btn-block {
        width: 100%;
    }

.freedom-btn-primary {
    border-color: rgba(0,0,0,0);
    background-color: var(--brand-primary-300);
    color: var(--neutral-weak-100);
}

    .freedom-btn-primary:hover {
        background-color: var(--brand-primary-400);
    }

    .freedom-btn-primary:focus-visible {
        border-color: rgba(0,0,0,0);
        box-shadow: 0 0 0 0.25rem var(--brand-primary-opacity-3);
    }

    .freedom-btn-primary:active, .freedom-btn-primary.freedom-btn-active {
        background-color: var(--brand-primary-200);
    }

    .freedom-btn-primary:disabled, .freedom-btn-primary:hover:disabled, .freedom-btn-primary:focus-visible:disabled {
        border-color: var(--neutral-weak-200);
        background-color: var(--neutral-weak-200);
        color: var(--neutral-weak-300);
    }

.freedom-btn-secondary {
    border-color: var(--brand-primary-300);
    background-color: rgba(0,0,0,0);
    color: var(--brand-primary-300);
}

    .freedom-btn-secondary:hover {
        background-color: var(--brand-primary-100);
    }

    .freedom-btn-secondary:focus-visible {
        border-color: rgba(0,0,0,0);
    }

    .freedom-btn-secondary:active, .freedom-btn-secondary.freedom-btn-active {
        background-color: var(--brand-primary-200);
    }

    .freedom-btn-secondary:disabled, .freedom-btn-secondary:hover:disabled, .freedom-btn-secondary:focus-visible:disabled {
        border-color: var(--neutral-weak-200);
        background-color: rgba(0,0,0,0);
        color: var(--neutral-weak-300);
    }

.freedom-btn-text {
    border-color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
    color: var(--brand-primary-300);
}

    .freedom-btn-text:hover {
        background-color: var(--brand-primary-100);
    }

    .freedom-btn-text:focus-visible {
        border-color: rgba(0,0,0,0);
    }

    .freedom-btn-text:active, .freedom-btn-text.freedom-btn-active {
        background-color: var(--brand-primary-200);
    }

    .freedom-btn-text:disabled, .freedom-btn-text:hover:disabled, .freedom-btn-text:focus-visible:disabled {
        border-color: rgba(0,0,0,0);
        background-color: rgba(0,0,0,0);
        color: var(--neutral-weak-300);
    }

.freedom-btn-danger {
    border-color: rgba(0,0,0,0);
    background-color: var(--feedback-danger-300);
    color: var(--neutral-weak-100);
}

    .freedom-btn-danger:hover {
        background-color: var(--feedback-danger-400);
    }

    .freedom-btn-danger:focus-visible {
        border-color: rgba(0,0,0,0);
        box-shadow: 0 0 0 0.25rem var(--feedback-danger-opacity-3);
    }

    .freedom-btn-danger:active, .freedom-btn-danger.freedom-btn-active {
        background-color: var(--feedback-danger-200);
    }

    .freedom-btn-danger:disabled, .freedom-btn-danger:hover:disabled, .freedom-btn-danger:focus-visible:disabled {
        border-color: rgba(0,0,0,0);
        background-color: var(--neutral-weak-200);
        color: var(--neutral-weak-300);
    }