.background {
    background-color: var(--surface-base);
    background-image: linear-gradient(var(--surface-base), transparent), url("/img/registration-bg.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}

.register-container .error-field {
    border: 2px solid var(--base-red-500);
    background-color: var(--base-red-100);
}

.error-label {
    color: var(--base-red-800);
}

.register-container {
    color: var(--base-neutral-950);
    max-width: var(--desktop-max-width);
    padding: 3.75rem;
    padding-top: 0.5rem;
    margin: auto;
    a

{
    color: inherit;
}

a:active {
    text-decoration: none;
}

input,
select {
    font: var(--text-small-normal);
    display: block;
    padding: 11px 17px;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
    width: -webkit-fill-available;
    border-radius: 0.5rem;
    border: 1px solid var(--base-neutral-300);
    outline: none;
}

}

@media screen and (max-width: 1200px) {
    .register-container {
        padding: 1.875rem;
        padding-top: 0.5rem;
    }
}

.register-container textarea {
    width: -webkit-fill-available;
    border-radius: 0.5rem;
    border: 1px solid var(--base-neutral-500);
    font: var(--text-small-normal);
    background: var(--base-neutral-100);
    padding: 0.75rem 1rem;
    margin-block: 1rem;
}

.next-button-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: end;
}

.error-box-text {
    border: 2px solid var(--base-red-500);
    background-color: var(--base-red-100);
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    flex: 1;
    font: var(--text-tiny-semibold);
    color: var(--base-red-800);
    align-items: center;
}

select {
    font: var(--text-small-normal);
}

input[type="checkbox"]:checked {
    background-color: var(--base-red-600);
}

    input[type="checkbox"]:checked:after {
        content: "";
        position: absolute;
        left: 3px;
        top: 0px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 1px 1px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

input[type="checkbox"] {
    padding: 0.4rem 0.4rem;
    position: relative;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    appearance: none;
    border-radius: 10%;
    border: 1px solid rgb(191 35 42 / 90%);
    box-shadow: none;
    font-size: 1em;
}

input:focus,
select:focus {
    border: 2px solid var(--base-blue-400);
}

.register-container input:disabled {
    background: var(--base-neutral-50);
}

form {
    max-width: 31.25rem;
}

    form p {
        display: block;
        font: var(--text-tiny-normal);
        margin-block: 1rem;
    }

.floatleft {
    justify-content: flex-start;
}

label {
    font: var(--text-tiny-semibold);
}

.checkboxlabel {
    font: var(--text-small-normal);
}

.progress {
    font: var(--text-tiny-semibold);
    display: flex;
    margin-bottom: 5rem;
}

h3 {
    font: var(--heading-mobile-h3);
}

.heading2-registeration {
    font: var(--heading-mobile-h3);
}

.basic-heading {
    font: var(--heading-mobile-h3);
}

.progress .items {
    display: flex;
    align-items: center;
    font: var(--text-small-normal);
    color: var(--base-neutral-600);
}

    .progress .items.selected {
        color: var(--base-neutral-950);
        font: var(--text-small-medium);
    }

        .progress .items.selected .number {
            background-color: var(--base-neutral-600);
            color: var(--base-neutral-0);
        }

    .progress .items.theline {
        flex: 1;
    }

.progress .theline {
    display: inline-block;
    height: 1px;
    margin: 1rem;
    flex: 1;
    background: var(--base-neutral-400);
}

.progress .items:last-child {
    max-width: 10rem;
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
    display: inline-block;
    margin-bottom: 0.1rem;
}

input[type="radio"] {
    accent-color: var(--adr-blue-theme);
}

input[type="checkbox"] {
    accent-color: var(--base-red-600);
    margin-top: 0.25rem;
    vertical-align: top;
}

.register-container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevron-down'%20%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M6%209l6%206l6%20-6'%20/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    appearance: none;
    padding-right: 1.8rem;
}

.text-small-normal {
    font: var(--text-small-normal);
}

.radio-container {
    position: relative;
    margin-right: 0.5rem;
}

label {
    margin-right: 1rem;
    line-height: 2;
    display: inline-block;
    max-width: 85%;
}

/* Hide the browser's default radio button */
.radio-container input[type="radio"] {
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    position: relative;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 0.5rem;
    width: 0.5rem;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input[type="radio"] ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input[type="radio"]:checked ~ .checkmark {
    background-color: var(--adr-blue-theme);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkmark::before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    border: 1px solid grey;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input[type="radio"]:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.progress .number {
    border: 1px solid var(--base-neutral-400);
    width: 1.563rem;
    height: 1.563rem;
    text-align: center;
    margin-right: 0.625rem;
    line-height: 1.8;
    border-radius: 0.25rem;
}

select option:disabled {
    color: grey; /* Grey text color for disabled options */
}

.twosection {
    width: 48%;
    display: inline-block;
    margin-inline: 0.2rem;
}

.threesection30 {
    width: 28%;
    display: inline-block;
    margin-inline: 0.2rem;
}

.threesection40 {
    width: 38%;
    display: inline-block;
    margin-inline: 0.2rem;
}

input::placeholder {
    font: var(--text-small-normal);
}

.login-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .login-button span {
        font: var(--text-small-normal);
        color: var(--base-red-600);
    }

.notes {
    font: var(--text-tiny-normal);
    color: var(--base-neutral-500);
}

.strongline {
    border-bottom: 1px solid var(--base-neutral-700);
    margin: 2rem 0 3rem 0;
}

.text-regular {
    font: var(--text-regular-semibold);
    color: var(--base-neutral-950);
}

.error {
    font: var(--text-tiny-semibold);
    color: var(--base-red-600);
}

.radiolabel {
    font: var(--text-small-normal);
}

@media screen and (max-width: 1200px) {
    .progress .text {
        display: none;
    }

    .progress {
        margin-bottom: 0rem;
    }
}

@media screen and (max-width: 700px) {
    .twosection {
        width: auto;
        display: block;
    }

    .threesection30 {
        width: auto;
        display: block;
    }

    .threesection40 {
        width: auto;
        display: block;
    }
}

.pop-up-cover {
    background: var(--base-neutral-950-70);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    color: var(--base-neutral-0);
    text-align: center;
    /*  display: none; */
}

    .pop-up-cover button {
        color: var(--base-neutral-0);
        background: 0;
        border: none;
        margin-left: auto;
        cursor: pointer;
    }

    .pop-up-cover .pop-up {
        position: fixed;
        display: flex;
        top: 50%;
        left: 50%;
        max-width: min(34rem, 80vw);
        width: 100%;
        transform: translate(-50%, -50%);
        background: var(--base-purple-900);
        border-radius: 1.3rem;
        padding: 2rem;
        flex-direction: column;
        align-items: center;
    }

@media screen and (max-width: 1200px) {
    .pop-up-cover .pop-up {
        padding: 1rem;
    }
}

.pop-up-cover .popup-headline {
    font: var(--heading-desktop-h5);
    margin-block: 1.5rem 0.5rem;
    margin-inline: 2rem;
}

.pop-up-cover .popup-body {
    font: var(--text-regular-normal);
    margin-block: 1.7rem;
    margin-inline: 2rem;
}

.pop-up-cover .button-next {
    margin-block: 0.5rem;
    margin-inline: 0.5rem;
    font: var(--text-regular-medium);
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.1s cubic-bezier(0.68, 0.41, 1, 1.02);
    gap: 0.5rem;
    white-space: nowrap;
    background-color: var(--base-red-700);
    color: var(--base-neutral-0);
}

    .pop-up-cover .button-next.back {
        background-color: transparent;
        border: 1px solid;
        color: var(--base-neutral-0);
    }

    .pop-up-cover .button-next:hover {
        box-shadow: 0 0 0.75rem 0 rgb(0 0 0 / 15%);
        background-blend-mode: darken;
    }

.pop-up-cover .buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pop-up-cover .button-next.green {
    background-color: var(--base-green-400);
    border: 0px;
    color: var(--on-surface-text-primary);
}

.pop-up-cover a {
    color: inherit;
}

.forthpart {
    max-width: 650px;
    p

{
    font: var(--text-medium-normal);
}

svg {
    padding-inline: 0.5rem;
}

}

@media screen and (max-width: 1200px) {
    .forthpart {
        margin-block: 3rem;
    }
}

.register-container .thankyoutext-h3 {
    margin-top: 1rem;
}

.password-instr {
    font: var(--text-small-normal);
    padding-bottom: 1rem;
    ol

{
    padding-left: 1rem;
    margin-block: 0rem;
}

ul {
    padding-left: 1rem;
    margin-block: 0rem;
}

}

.errors {
    word-break: break-all;
}

.special-warning {
    margin-bottom: 2rem;
}

/**************Toaster**************/
#toast {
    visibility: hidden;
    min-width: 250px;
    background-color: #db2817;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 12px;
    position: fixed;
    z-index: 1000;
    right: 1%;
    top: 20%;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s;
}
#toast.show {
    visibility: visible;
    opacity: 1;
}
/**************Toaster**************/