:root {
	/* primary brand color with shades and tints */

	--color-primary-h: 213;
	--color-primary-s: 50%;
	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), 50%);
	--color-primary-light: hsl(var(--color-primary-h),
			var(--color-primary-s),
			66%);
	--color-primary-dark-1: hsl(var(--color-primary-h),
			var(--color-primary-s),
			43%);
	--color-primary-dark-2: hsl(var(--color-primary-h),
			var(--color-primary-s),
			40%);
	--color-primary-dark-3: hsl(var(--color-primary-h),
			var(--color-primary-s),
			36%);
	--color-primary-semi-transparent: hsla(var(--color-primary-h),
			var(--color-primary-s),
			50%,
			0.5);
	--color-primary-transparent: hsla(var(--color-primary-h),
			var(--color-primary-s),
			50%,
			0.1);
	--color-action: var(--color-primary-dark-1);
	--color-action-hover: var(--color-primary-dark-2);
	--color-action-active: var(--color-primary-dark-3);
	--color-action-strong: var(--color-primary-dark-3);

	/* secondary brand color with shades and tints */
	--color-secondary-h: 206;
	--color-secondary-s: 97%;
	--color-secondary: hsl(var(--color-secondary-h),
			var(--color-secondary-s),
			45%);
	--color-secondary-light: hsl(var(--color-secondary-h),
			var(--color-secondary-s),
			86%);
	--color-secondary-dark: hsl(var(--color-secondary-h),
			var(--color-secondary-s),
			29%);

	/* our base color, with one tint, and one shade */
	--color-base-h: 0;
	--color-base-s: 0%;
	--color-base-white: hsl(var(--color-base-h), var(--color-base-s), 98%);
	--color-base-grey: hsl(var(--color-base-h), var(--color-base-s), 86%);
	--color-base-dark: hsl(var(--color-base-h), var(--color-base-s), 30%);

	/* Notiflix */
	--notiflix-icon-color: hsl(var(--color-primary-h),
			var(--color-primary-s),
			43%);

	/* color's */
	--color-card-boarder: var(--color-primary);
	--color-light-grey: hsl(225, 33%, 93%);
	--color-red: hsl(348, 86%, 61%);
	--color-purple: hsl(271, 100%, 71%);
	--color-blue: hsl(217, 71%, 53%);
	--color-cyan: hsl(204, 71%, 53%);
	--color-turquoise: hsl(171, 100%, 41%);
	--color-green: hsl(141, 53%, 53%);
	--color-yellow: hsl(48, 100%, 67%);
	--color-recent-payment-warning: var(--color-state-danger-fg);
	--color-recent-payment-warning-title: var(--color-state-danger-fg);
	--color-recent-payment-warning-description: var(--color-state-danger-fg);
	--recent-payment-warning-description-weight: 700;
}

@media (width >=992px) {
	.client_logo {
		max-width: 28rem;
		max-height: 6.5rem;
	}

	.login-dashboard-img {
		max-width: 20rem;
		margin-inline: auto;
	}
}