﻿:root {
	--primary-color: #0F75BC;
	--disabled-color: #D5D5D5;
	--primary-btn-active-color: #0B5589;
}

body {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

.branding-logo-image-class {
	width: 165px;
	height: 60.228px;
}

input.form-control {
	background-color: #F2F2F2;
}

h3 {
	font-size: 30px;
	font-weight: 700;
	line-height: 40px;
}

.form-control {
	padding: 8px 8px 8px 16px;
	height: 48px;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

.rynoh-copyright {
	color: #666;
}

.rynoh-link-text {
	color: #4D4D4D;
	transition: color 0.2s;
	white-space: nowrap;
}

	.rynoh-link-text:hover {
		color: #1a1a1a;
	}


.form-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 19px;
}

.btn-primary {
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	line-height: 19px;
	color: #FFFFFF;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

	.btn-check:focus + .btn-primary, .btn-primary:focus {
		background-color: var(--primary-color);
	}

	.btn-primary.disabled,
	.btn-primary:disabled {
		color: var(--font-disabled-color);
		background-color: var(--disabled-color);
		border-color: var(--disabled-color);
	}

	.btn-primary:not(:disabled):not(.disabled):focus,
	.btn-primary:not(:disabled):not(.disabled).focus {
		box-shadow: 0 0 0 2px #4CADF1;
	}

	.btn-primary:not(:disabled):not(.disabled):hover,
	.btn-primary:not(:disabled):not(.disabled).hover {
		background-color: #1F6798;
	}

	.btn-primary:not(:disabled):not(.disabled):active,
	.btn-primary:not(:disabled):not(.disabled).active,
	.show > .btn-outline-primary.dropdown-toggle {
		color: #FFFFFF;
		background-color: var(--primary-btn-active-color);
		border-color: var(--primary-btn-active-color);
	}

		.btn-primary:not(:disabled):not(.disabled):active:focus,
		.btn-primary:not(:disabled):not(.disabled).active:focus {
			box-shadow: 0 0 0 2px #4CADF1;
		}

.right-panel {
	position: relative;
	background-color: #025EA3;
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

	.right-panel::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 800px;
		height: 800px;
		border-radius: 50%;
		background: radial-gradient( circle at top right, #4589bc 0%, #2977b1 100% ), radial-gradient( circle at bottom right, #0963a6 0%, transparent 70% );
		background-blend-mode: overlay;
		transform: translate(10%, -38%);
		pointer-events: none;
	}

	.right-panel::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 1200px;
		height: 400px;
		border-radius: 50%;
		background: radial-gradient( ellipse at bottom left, #4287ba 0%, #1469a9 100% );
		transform: translate(-7%, 46%) rotate(-10deg);
		pointer-events: none;
	}

	.right-panel .card {
		position: relative;
		z-index: 1;
	}

:root {
	--gap: 1.5rem;
}

.cards-wrapper {
	display: flex;
	flex-direction: column;
	width: min(100%, 740px, calc((100vh - 6rem) * 740 / 875));
	aspect-ratio: 740 / 875;
}

.card-top {
	margin-bottom: var(--gap);
	border: 0 !important;
}

.card-bottom {
	border: 0 !important;
}

.form-wrapper {
	max-width: 600px;
}

.login-top-image-class,
.login-bottom-image-class {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.image-container {
	position: relative;
	display: block;
	width: 100%;
}

	.image-container a {
		position: absolute;
		display: block;
	}

	.image-container img {
		border-radius: 5px !important;
	}

.form-switch .form-check-input {
	border: 2px solid #757575;
	height: 14px;
}