@import url("/includes/css/framework.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");

:root {
	/* our defualt font-family for this project*/
	--font-family: "Lato", sans-serif;
	--font-weight: 400;
	--font-size: 0.875rem;

	/* primary brand color with shades and tints */
	--color-primary-h: 199;
	--color-primary-s: 100%;
	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), 12%);
	--color-primary-light: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		44%
	);
	--color-primary-dark-1: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		18%
	);
	--color-primary-dark-2: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		14%
	);
	--color-primary-dark-3: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		10%
	);
	--color-primary-semi-transparent: hsla(var(--color-primary-h), 35%, 44%, 0.5);
	--color-primary-transparent: hsla(
		var(--color-primary-h),
		var(--color-primary-s),
		50%,
		0.1
	);

	/* secondary brand color with shades and tints */
	--color-secondary-h: 18;
	--color-secondary-s: 84%;
	--color-secondary: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		54%
	);
	--color-secondary-light: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		70%
	);
	--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(225, 33%, 93%);

	/* 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%);

	/* override bootstrap colors */
	--white: #e0e7ed;
}

.client_logo {
	width: 7rem;
	top: 0;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
}

.login-dashboard-img {
	width: 100%;
	margin-top: 5rem;
}
.navbar-brand-logo {
	width: 4.5rem;
}

.complete-logo {
	width: 8rem;
}

@media (min-width: 1280px) {
	.login-dashboard-img {
		padding: 4rem;
	}
}

@media (min-width: 992px) {
	.client_logo {
		display: none;
	}
}