
	.card-sign-with.svelte-zpvrev {
		background-color: var(--bg-btn);
		color: var(--fg-btn);
		display: inline-block;
		cursor: pointer;
		padding: 0.6em 1.8em;
		margin: auto;
		outline: none;
		font-size: 1.1em;
		width: fit-content;
		border-radius: 4px;
		border: none;
		text-align: center;

		text-decoration: none; 
        box-sizing: border-box;
        font-family: inherit;
        line-height: normal;
	}

	.card-sign-with.svelte-zpvrev:hover {
		opacity: 0.7;
		border-radius: 2px;
	}

	.connectButton.svelte-zpvrev {
		margin-top: 5%;
		margin-bottom: 1%;
		width: 100%;
		/* font-family: inherit; */
		/* color: inherit; */
	}

	.connectWithButton.svelte-zpvrev {
		width: 100%;
	}

	.separator.svelte-zpvrev {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 20px 0;
    }

    .separator.svelte-zpvrev span:where(.svelte-zpvrev) {
        padding: 0 10px;
        color: var(--fg-section);
        font-size: 0.9em;
    }

    .separator.svelte-zpvrev hr:where(.svelte-zpvrev) {
        flex-grow: 1;
        height: 1px;
        
        border: 0;
        background-color: var(--bg-section-selected);
        margin: 0;
    }

	.notRegistered.svelte-zpvrev {
		display: flex;
		justify-content: center;	
	}

	.notRegistered.svelte-zpvrev > span:where(.svelte-zpvrev) {
		margin-right: 1%;
	}

	.forgotPassword.svelte-zpvrev {
		display: flex;
		padding-right: 2%;
		justify-content: end;
	}

	.passwordField.svelte-zpvrev {
		position: relative;
		display: flex;
		width: 100%;
	}

	.passwordField.svelte-zpvrev input:where(.svelte-zpvrev) {
        width: 100%;
        padding-right: 50px; 
        box-sizing: border-box;
    }

	.input_eye.svelte-zpvrev {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
		width: 5%;
		color: var(--fg-input);
    }

