uix-donate-form-sepa-mandate {
    & {
        > div {
            position: absolute;
            top: 20px;
            max-width: 1200px;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid var(--unyt-border-primary);
            background-color: var(--unyt-bg-secondary);
    
            > form {
                display: flex;
                flex-direction: column;
                gap: 16px;
                h1, & h2, & h3 {
                    margin-top: 0;
                }
                h2, legend {
                    font-size: larger;
                    font-weight: 500;
                }
                fieldset {
                    display: flex;
                    border: none;
                    gap: 10px;
                    width: 100%;
                    flex-wrap: wrap;
                    padding: 0;
                    margin: 0;
    
                    .donor-organization-label {
                        margin-bottom: 0;
                    }
    
                    .donor-organization-name,
                    .donor-organization-details {
                        width: 100%;
                    }
                }
                .input-container {
                    margin-bottom: 4px;
                }
            }
        }
    
        .sepa-mandate-container {
            scroll-margin-top: 20px;
    
            label {
                padding: 8px 2px 0;
                cursor: pointer;
                margin-bottom: 16px;
    
                input[type="checkbox"] {
                    cursor: pointer;
                    width: 14px;
                    height: 14px;
                    accent-color: #2baad6;
                    margin: 0 6px 0 0;
                    pointer-events: all;
                }
            }
        }
    
        .predefined-info-container {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            gap: 10px;
    
            > div {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 4px;
                border: 1px solid var(--unyt-border-primary);
                width: 100%;
                min-height: 50px;
                background-color: var(--unyt-bg-controls);
                border-radius: 8px;
                > span {
                    height: 100%;
                    border: none;
                    background-color: transparent;
                    border-radius: 8px;
                    padding: 11px;
                    padding-top: 24px;
                    padding-bottom: 4px;
                    font-size: medium;
                }
            }
    
            #labelSmall {
                position: absolute;
                top: 0;
                width: unset;
                font-size: small;
                height: unset;
                margin-top: 6px;
                margin-left: 11px;
                margin-bottom: 0;
                padding: 0;
                opacity: 0.8;
                transition: opacity 0.2s, transform 0.2s;
                transform: translateY(0);
            }
        }
    
        
        div.floating-select-container {
            margin-bottom: 4px;
        }
    
        .floating-select-container {
            position: relative;
            display: flex;
            padding: 0px 0px;
            border: 1px solid var(--unyt-border-primary);
            width: 100%;
            height: 50px;
            background-color: var(--unyt-bg-controls);
            border-radius: 8px;
            color: var(--unyt-text-primary, #ffffff);
            
            &::after {
                position: absolute;
                background-color: transparent;
                transform: translateY(-50%);
                right: 12px;
                top: 50%;
                z-index: 100;
                content: "▾";
                font-size: 24px;
                color: rgb(117, 117, 117);
                pointer-events: none;
            }
    
            option {
                color: var(--unyt-text-primary, #ffffff);
            }
    
            &:has(option[value=""]:checked) {
                color: rgb(117, 117, 117);
            }
    
            select {
                width: 100%;
                border: none;
                outline: none;
                background-color: var(--unyt-bg-controls);
                height: 100%;
                border-radius: 8px;
                padding: 18px 11px 4px;
                font-size: medium;
    
                &:focus {
                    box-shadow: 0 0 0 0.0625rem var(--unyt-border-primary) inset;
                }
            }
    
            > span {
                position: absolute;
                font-size: small;
                margin-top: 6px;
                margin-left: 11px;
                opacity: 0.8;
                transition: opacity 0.2s, transform 0.2s;
                transform: translateY(0);
            }
    
            &:has(option[value=""]:checked) {
                > select {
                    padding-top: 11px;
                    padding-bottom: 11px;
                }
    
                > span {
                    transform: translateY(-5px);
                    opacity: 0;
                }
            }
        }
    
        .break-span {
            overflow-wrap: break-word;
            word-wrap: break-word; 
            word-break: break-all;
        }
    
    
        .mandate-id-button {
            min-height: 2.5rem;
            margin-right: 4px;
            border-radius: 6px;
            padding: 0 4px;
        }
    
        .back-button {
            margin-bottom: 8px;
            border: none;
            background-color: transparent;
            font-size: 16px;
            color: var(--color-text-secondary);
            padding-left: 0;
    
            &:hover {
                cursor: pointer;
                color: var(--color-text-primary);
            }
    
            display: flex;
            justify-content: center;
            align-items: center;
    
            > .arrow {
                min-width: 14px;
                margin-right: 4px;
                transition: transform 200ms;
                transform: translateX(0);
                transform: scaleX(-1) translateX(0);
                .part {
                    transition: opacity 200ms, transform 200ms;
                    transform: translateX(4px);
                    opacity: 0;
                }
            }
    
            &:hover {
                > .arrow {
                    transform: scaleX(-1) translateX(3px);
                    .part {
                        opacity: 1;
                        transform: translateX(-2px);
                    }
                }
            }
        }
    }
    
}