.pre-registration {
    position: relative;
    width: 723px;
    height: 776px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid;
    border-color: #000000;
    box-shadow: 0px 4px 4px #00000040;
}

    .pre-registration .text-area {
        top: 368px;
        display: flex;
        flex-direction: column;
        width: 340px;
        align-items: flex-start;
        gap: 1px;
        position: absolute;
        left: 47px;
    }

    .pre-registration .text-wrapper {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: "Roboto-Regular", Helvetica;
        font-weight: 400;
        color: var(--style-system-variables-off-black);
        font-size: 14px;
        letter-spacing: 0;
        line-height: 20px;
        white-space: nowrap;
    }

    .pre-registration .base-textarea-medium-wrapper {
        display: flex;
        flex-direction: column;
        height: 56px;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pre-registration .base-textarea-medium {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 13px;
        position: relative;
        flex: 1;
        align-self: stretch;
        width: 100%;
        flex-grow: 1;
        background-color: var(--bg-color);
        border-radius: 4px;
        border: 1px solid;
        border-color: var(--style-system-variables-active-component-fill-buttons-borders-other);
    }

    .pre-registration .text {
        position: relative;
        flex: 1;
        align-self: stretch;
        margin-top: -1px;
        font-family: "Roboto-Regular", Helvetica;
        font-weight: 400;
        color: var(--text-color);
        font-size: 14px;
        letter-spacing: 0;
        line-height: 20px;
    }

    .pre-registration .resize-icons {
        position: relative;
        align-self: stretch;
        width: 100%;
        height: 1px;
        margin-bottom: -1px;
    }

    .pre-registration .handle-resize {
        position: absolute;
        width: 16px;
        height: 16px;
        top: -9px;
        left: 311px;
    }

    .pre-registration .div {
        top: 528px;
        display: flex;
        flex-direction: column;
        width: 340px;
        align-items: flex-start;
        gap: 1px;
        position: absolute;
        left: 47px;
    }

    .pre-registration .placeholder {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--base-text-base-text-large-font-family);
        font-weight: var(--base-text-base-text-large-font-weight);
        color: var(--style-system-variables-off-black);
        font-size: var(--base-text-base-text-large-font-size);
        letter-spacing: var(--base-text-base-text-large-letter-spacing);
        line-height: var(--base-text-base-text-large-line-height);
        white-space: nowrap;
        font-style: var(--base-text-base-text-large-font-style);
    }

    .pre-registration .text-wrapper-2 {
        position: absolute;
        height: 38px;
        top: 34px;
        left: 47px;
        font-family: var(--header-header-1-font-family);
        font-weight: var(--header-header-1-font-weight);
        color: var(--style-system-variables-headings);
        font-size: var(--header-header-1-font-size);
        letter-spacing: var(--header-header-1-letter-spacing);
        line-height: var(--header-header-1-line-height);
        white-space: nowrap;
        font-style: var(--header-header-1-font-style);
    }

    .pre-registration .drop-down-list {
        display: flex;
        width: 229px;
        height: 32px;
        position: absolute;
        top: 94px;
        left: 47px;
        flex-direction: column;
        align-items: flex-start;
    }

    .pre-registration .base-dropdownlist-wrapper {
        display: flex;
        flex-direction: column;
        height: 32.8px;
        align-items: flex-start;
        gap: 8px;
        position: relative;
        align-self: stretch;
        width: 100%;
        margin-top: -0.4px;
        margin-bottom: -0.4px;
        margin-left: -0.4px;
        margin-right: -0.4px;
        border-radius: 4px;
        border: 0.4px solid;
        border-color: var(--style-system-variables-colors-border-color);
    }

    .pre-registration .base-dropdownlist {
        display: flex;
        align-items: center;
        position: relative;
        flex: 1;
        align-self: stretch;
        width: 100%;
        flex-grow: 1;
        background-color: var(--style-system-variables-colors-active-selection);
        border-radius: 4px;
        overflow: hidden;
    }

    .pre-registration .icon-and-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0px 4px 13px;
        position: relative;
        flex: 0 0 auto;
    }

    .pre-registration .base-button-label {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        position: relative;
    }

    .pre-registration .label {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: "Roboto-Regular", Helvetica;
        font-weight: 400;
        color: var(--base-text);
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
        line-height: 24px;
        white-space: nowrap;
    }

    .pre-registration .icons {
        display: inline-flex;
        align-items: center;
        position: relative;
        align-self: stretch;
        flex: 0 0 auto;
    }

    .pre-registration .dropdown-button {
        display: flex;
        width: 29px;
        align-items: flex-start;
        justify-content: space-around;
        position: relative;
        align-self: stretch;
    }

    .pre-registration .base-input-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 6px 8px 7px;
        position: relative;
        flex: 0 0 auto;
        border-radius: 0px 3px 3px 0px;
        border: 1px solid;
        border-color: var(--style-system-variables-colors-active-selection);
    }

    .pre-registration .icon {
        position: relative;
        width: 16px;
        height: 16px;
        background-image: url(./img/arrow-60-down.svg);
        background-size: 100% 100%;
    }

    .pre-registration .frame {
        display: flex;
        flex-direction: column;
        width: 229px;
        align-items: flex-start;
        gap: 1px;
        position: absolute;
        top: 150px;
        left: 47px;
    }

    .pre-registration .text-wrapper-3 {
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: "Roboto-Regular", Helvetica;
        font-weight: 400;
        color: #000000;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 24px;
        white-space: nowrap;
    }

    .pre-registration .drop-down-list-wrapper {
        display: flex;
        height: 32px;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .pre-registration .base-dropdownlist-2 {
        justify-content: space-between;
        background-color: var(--style-system-variables-colors-active-selection);
        display: flex;
        align-items: center;
        position: relative;
        flex: 1;
        align-self: stretch;
        width: 100%;
        flex-grow: 1;
        border-radius: 4px;
        overflow: hidden;
    }

    .pre-registration .div-wrapper {
        display: inline-flex;
        height: 32px;
        position: absolute;
        top: 94px;
        left: 552px;
        flex-direction: column;
        align-items: flex-start;
    }

    .pre-registration .drop-down-list-2 {
        display: inline-flex;
        height: 32.8px;
        gap: 8px;
        position: relative;
        margin-top: -0.4px;
        margin-bottom: -0.4px;
        margin-left: -0.4px;
        margin-right: -0.4px;
        border-radius: 4px;
        border: 0.4px solid;
        border-color: var(--style-system-variables-active-component-fill-buttons-borders-other);
        flex-direction: column;
        align-items: flex-start;
    }

    .pre-registration .base-dropdownlist-3 {
        background-color: var(--style-system-variables-text-boxes);
        display: flex;
        align-items: center;
        position: relative;
        flex: 1;
        align-self: stretch;
        width: 100%;
        flex-grow: 1;
        border-radius: 4px;
        overflow: hidden;
    }

    .pre-registration .icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 6px 8px 7px;
        position: relative;
        flex: 0 0 auto;
        border-radius: 0px 3px 3px 0px;
        border: 1px solid;
        border-color: var(--style-system-variables-text-boxes);
    }

    .pre-registration .input-field {
        display: flex;
        flex-direction: column;
        width: 340px;
        align-items: flex-start;
        gap: 1px;
        position: absolute;
        top: 222px;
        left: 47px;
    }

    .pre-registration .name {
        position: relative;
        width: 256px;
        height: 24px;
        margin-top: -1px;
        font-family: var(--base-text-base-text-large-font-family);
        font-weight: var(--base-text-base-text-large-font-weight);
        color: var(--style-system-variables-off-black);
        font-size: var(--base-text-base-text-large-font-size);
        letter-spacing: var(--base-text-base-text-large-letter-spacing);
        line-height: var(--base-text-base-text-large-line-height);
        white-space: nowrap;
        font-style: var(--base-text-base-text-large-font-style);
        background: transparent;
        border: none;
        padding: 0;
    }

    .pre-registration .input {
        height: 32px;
        padding: 0px 9px;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: #fafafa;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid;
        border-color: #094cb0;
        font-family: "Roboto-Regular", Helvetica;
        font-weight: 400;
        color: var(--style-system-variables-off-black);
        font-size: 14px;
        letter-spacing: 0;
        line-height: 20px;
        white-space: nowrap;
    }

    .pre-registration .input-field-2 {
        top: 294px;
        display: flex;
        flex-direction: column;
        width: 340px;
        align-items: flex-start;
        gap: 1px;
        position: absolute;
        left: 47px;
    }

    .pre-registration .name-2 {
        position: relative;
        width: 256px;
        height: 24px;
        margin-top: -1px;
        font-family: var(--base-text-base-text-large-font-family);
        font-weight: var(--base-text-base-text-large-font-weight);
        color: var(--style-system-variables-off-black);
        font-size: var(--base-text-base-text-large-font-size);
        letter-spacing: var(--base-text-base-text-large-letter-spacing);
        line-height: var(--base-text-base-text-large-line-height);
        white-space: nowrap;
        font-style: var(--base-text-base-text-large-font-style);
    }

    .pre-registration .frame-2 {
        display: flex;
        height: 32px;
        align-items: center;
        gap: 8px;
        padding: 0px 9px;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: #fafafa;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid;
        border-color: #094cb0;
    }

    .pre-registration .text-wrapper-4 {
        position: relative;
        width: fit-content;
        font-family: "Roboto-Regular", Helvetica;
        font-weight: 400;
        color: var(--style-system-variables-off-black);
        font-size: 14px;
        letter-spacing: 0;
        line-height: 20px;
        white-space: nowrap;
    }

    .pre-registration .input-field-3 {
        top: 454px;
        display: flex;
        flex-direction: column;
        width: 340px;
        align-items: flex-start;
        gap: 1px;
        position: absolute;
        left: 47px;
    }

    .pre-registration .frame-3 {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        position: absolute;
        top: 622px;
        left: 47px;
    }

    .pre-registration .frame-4 {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
    }

    .pre-registration .check-box {
        display: inline-flex;
        align-items: flex-start;
        position: relative;
        flex: 0 0 auto;
    }

    .pre-registration .base-checkbox-medium-wrapper {
        align-items: flex-start;
        gap: 10px;
        display: inline-flex;
        position: relative;
        flex: 0 0 auto;
    }

    .pre-registration .base-checkbox-medium {
        display: flex;
        width: 16px;
        height: 16px;
        align-items: flex-start;
        gap: 4px;
        position: relative;
    }

    .pre-registration .state-mark-wrapper {
        align-items: center;
        justify-content: center;
        padding: 2px;
        background-color: var(--component-bg);
        border-radius: 4px;
        border: 1px solid;
        border-color: var(--style-system-variables-colors-dark-blue);
        display: inline-flex;
        position: relative;
        flex: 0 0 auto;
    }

    .pre-registration .state-mark {
        position: relative;
        width: 12px;
        height: 12px;
    }

    .pre-registration .close {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 16px;
        left: 687px;
    }

    .pre-registration .button-primary-solid {
        all: unset;
        box-sizing: border-box;
        display: inline-flex;
        flex-direction: column;
        min-height: 32px;
        max-height: 32px;
        align-items: flex-start;
        position: absolute;
        top: 719px;
        left: 550px;
    }

    .pre-registration .base-button-large {
        all: unset;
        box-sizing: border-box;
        height: 32px;
        justify-content: center;
        gap: 6px;
        padding: 12px;
        background-color: #094cb0;
        border-radius: 4px;
        border: 1px solid;
        display: inline-flex;
        align-items: center;
        position: relative;
    }

    .pre-registration .label-wrapper {
        all: unset;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        position: relative;
        flex: 0 0 auto;
        margin-top: -8px;
        margin-bottom: -8px;
    }

    .pre-registration .label-2 {
        color: #f5f5f5;
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: var(--base-text-base-text-large-font-family);
        font-weight: var(--base-text-base-text-large-font-weight);
        font-size: var(--base-text-base-text-large-font-size);
        text-align: center;
        letter-spacing: var(--base-text-base-text-large-letter-spacing);
        line-height: var(--base-text-base-text-large-line-height);
        white-space: nowrap;
        font-style: var(--base-text-base-text-large-font-style);
    }

    .pre-registration .button-secondary {
        display: inline-flex;
        flex-direction: column;
        height: 32px;
        align-items: flex-start;
        position: absolute;
        top: 719px;
        left: 617px;
    }

    .pre-registration .base-button-label-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 4px 8px;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--style-system-variables-outline-button-primary-outline-fill);
        border-radius: 4px;
        border: 0.8px solid;
        border-color: #094cb0;
    }

    .pre-registration .label-3 {
        color: var(--style-system-variables-active-component-fill-buttons-borders-other);
        position: relative;
        width: fit-content;
        margin-top: -1px;
        font-family: "Roboto-Regular", Helvetica;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        letter-spacing: 0;
        line-height: 24px;
        white-space: nowrap;
    }





//next


:root {
    --therasoft-blue: rgba(13, 110, 253, 1);
    --bordercolor: rgba(156, 176, 207, 1);
    --text-color: rgba(73, 80, 87, 1);
    --base-text: rgba(33, 37, 41, 1);
    --component-bg: rgba(255, 255, 255, 1);
    --bg-color: rgba(255, 255, 255, 1);
    --buttonsbutton-bg: rgba(245, 245, 245, 1);
    --buttonsbutton-border: rgba(0, 0, 0, 0.08);
    --component-text: rgba(66, 66, 66, 1);
    --buttonssecondarybordersecondary-button-border: rgba(228, 231, 235, 1);
    --buttonssecondarysecondary-button-bg: rgba(228, 231, 235, 1);
    --gray-400: rgba(206, 212, 218, 1);
    --nav-menu-font-family: "Roboto", Helvetica;
    --nav-menu-font-weight: 400;
    --nav-menu-font-size: 16px;
    --nav-menu-letter-spacing: 0px;
    --nav-menu-line-height: 24px;
    --nav-menu-font-style: normal;
    --header-2-font-family: "Roboto", Helvetica;
    --header-2-font-weight: 400;
    --header-2-font-size: 24px;
    --header-2-letter-spacing: 0px;
    --header-2-line-height: normal;
    --header-2-font-style: normal;
    --badge-text-10-16-font-family: "Roboto", Helvetica;
    --badge-text-10-16-font-weight: 400;
    --badge-text-10-16-font-size: 10px;
    --badge-text-10-16-letter-spacing: 0px;
    --badge-text-10-16-line-height: 16px;
    --badge-text-10-16-font-style: normal;
    --small-text-14-auto-underlined-font-family: "Roboto", Helvetica;
    --small-text-14-auto-underlined-font-weight: 400;
    --small-text-14-auto-underlined-font-size: 12px;
    --small-text-14-auto-underlined-letter-spacing: 0px;
    --small-text-14-auto-underlined-line-height: normal;
    --small-text-14-auto-underlined-font-style: normal;
    --small-text-12-16-font-family: "Roboto", Helvetica;
    --small-text-12-16-font-weight: 400;
    --small-text-12-16-font-size: 12px;
    --small-text-12-16-letter-spacing: 0px;
    --small-text-12-16-line-height: 16px;
    --small-text-12-16-font-style: normal;
    --10-16-uppercase-font-family: "Roboto", Helvetica;
    --10-16-uppercase-font-weight: 400;
    --10-16-uppercase-font-size: 10px;
    --10-16-uppercase-letter-spacing: 0px;
    --10-16-uppercase-line-height: 16px;
    --10-16-uppercase-font-style: normal;
    --base-text-base-text-font-family: "Roboto", Helvetica;
    --base-text-base-text-font-weight: 400;
    --base-text-base-text-font-size: 16px;
    --base-text-base-text-letter-spacing: 0px;
    --base-text-base-text-line-height: 24px;
    --base-text-base-text-font-style: normal;
    --base-text-base-text-large-font-family: "Roboto", Helvetica;
    --base-text-base-text-large-font-weight: 400;
    --base-text-base-text-large-font-size: 16px;
    --base-text-base-text-large-letter-spacing: 0px;
    --base-text-base-text-large-line-height: 24px;
    --base-text-base-text-large-font-style: normal;
    --header-header-1-font-family: "Roboto", Helvetica;
    --header-header-1-font-weight: 300;
    --header-header-1-font-size: 28px;
    --header-header-1-letter-spacing: 0px;
    --header-header-1-line-height: 37.2400016784668px;
    --header-header-1-font-style: normal;
    --small-text-small-italic-font-family: "Roboto", Helvetica;
    --small-text-small-italic-font-weight: 400;
    --small-text-small-italic-font-size: 12px;
    --small-text-small-italic-letter-spacing: 0px;
    --small-text-small-italic-line-height: 20px;
    --small-text-small-italic-font-style: italic;
    --button-mobile: 2px 2px 4px 0px rgba(9, 76, 176, 0.16);
    --workspace-ds: 4px 4px 4px 0px rgba(9, 76, 176, 0.16);
    --button-desktop: 2px 2px 4px 0px rgba(9, 76, 176, 0.16);
    --small-button-ds: 1px 1px 1px 0px rgba(0, 0, 0, 0.12);
    --popout-ds: 2px 0px 4px 0px rgba(0, 0, 0, 0.25);
    --style-system-variables-colors-dark-blue: rgba(9, 76, 176, 1);
    --style-system-variables-colors-border-color: rgba(156, 176, 207, 1);
    --style-system-variables-colors-icon-green-success: rgba(138, 201, 138, 1);
    --style-system-variables-colors-icon-pink-error: rgba(255, 128, 149, 1);
    --style-system-variables-colors-hover: rgba(236, 248, 255, 1);
    --style-system-variables-colors-active-selection: rgba(211, 226, 255, 1);
    --style-system-variables-active-component-fill-buttons-borders-other: rgba(9, 76, 176, 1);
    --style-system-variables-workspace-borders-dividers-tables: rgba(156, 176, 207, 1);
    --style-system-variables-text-boxes: rgba(251, 251, 251, 1);
    --style-system-variables-success-BG: rgba(157, 224, 176, 1);
    --style-system-variables-success-text: rgba(13, 70, 44, 1);
    --style-system-variables-error-text: rgba(242, 140, 151, 1);
    --style-system-variables-warning-BG: rgba(245, 238, 168, 1);
    --style-system-variables-warning-text: rgba(163, 143, 114, 1);
    --style-system-variables-notification-BG: rgba(232, 241, 255, 1);
    --style-system-variables-notification-text: rgba(70, 93, 129, 1);
    --style-system-variables-dark-blue-opacity70: rgba(9, 76, 176, 0.7);
    --style-system-variables-button-pressed-stroke: rgba(48, 121, 230, 0.75);
    --style-system-variables-hovered-transparency: rgba(215, 231, 255, 0.45);
    --style-system-variables-headings: rgba(5, 41, 94, 1);
    --style-system-variables-off-black: rgba(10, 10, 10, 1);
    --style-system-variables-button-text-light: rgba(245, 245, 245, 1);
    --style-system-variables-body-text: rgba(10, 10, 10, 1);
    --style-system-variables-disabled-field: rgba(198, 203, 208, 1);
    --style-system-variables-required-input: rgba(150, 229, 122, 0.16);
    --style-system-variables-inactive-client: rgba(241, 241, 241, 1);
    --style-system-variables-zebra-stripe: rgba(249, 249, 249, 1);
    --style-system-variables-outline-button-primary-outline-fill: rgba(253, 253, 253, 1);
    --style-system-variables-calendar-card: rgba(221, 232, 255, 1);
    --style-system-variables-error-BG: rgba(255, 155, 155, 1);
    --style-system-variables-rejected: rgba(253, 192, 100, 1);
    --style-system-variables-finished: rgba(149, 198, 255, 1);
    --style-system-variables-active-client: rgba(191, 221, 207, 1);
    --style-system-variables-white: rgba(255, 255, 255, 1);
    --style-system-variables-warning: rgba(245, 238, 168, 1);
    --style-system-variables-hover-blue: rgba(224, 235, 255, 1);
}