@media all 
{
	BODY 
	{
		background-color: var(--bg-surface-20);
	}

	.Grid 
	{
		display: grid;
		place-items: center;
		height: 100vh;
	}

	.content
	{
		background-color: var(--bg-surface-10);
		padding: var(--spacing-32) var(--spacing-56);
		gap: var(--spacing-24);
		border-radius: var(--border-radius-xl);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 400px;
	}

	#logo 
	{
		height: 38px;
	}

	.formsDiv
	{
		gap: var(--spacing-16);

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.loginsContainer 
	{
		gap: var(--spacing-16);
	}

	.loginDiv 
	{
		padding: var(--spacing-0);
		gap: var(--spacing-8);

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

    .rowButtonWidth 
	{
        width: 400px;
    }

	.imputBoxDiv {
		padding: var(--spacing-0);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 400px;
		align-self: stretch;
		flex-grow: 0;
	}

	.link 
	{
		color: var(--cc-link);
		text-decoration: none;
	}

	.forgotPassLink 
	{
		align-self: end;
	}

	.loginBoxRow 
	{
		max-width: 400px;
		width: 100%;
	}

	.pawInput 
	{
		width: 400px;
	}

	.pawButton:not(#buttonReloadCaptcha):not(#buttonAudioCaptcha)
	{
		width: 400px;
		max-width: 400px;
	}

	.checkBoxDiv 
	{
		padding: var(--spacing-0);
		gap: var(--spacing-8);
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: none;
		align-self: stretch;
		flex-grow: 0;
	}

	.ckeckBoxInput 
	{
		box-sizing: border-box;
		
		width: 15px;
		height: 15px;
		
		background: var(--bg-surface-10);
		border: 1px solid var(--bc-secondary);
		border-radius: var(--border-radius-s);
		
		flex: none;
		flex-grow: 0;
	}

		.ckeckBoxInput:hover 
		{
			cursor: pointer;
		}

	.ckeckBoxLabel 
	{
		color: var(--cc-strong);
	}

	.loginStatus 
	{
		color: var(--bg-danger-strong);
	}
}