/* CSS file for Istekki design system. */

/* Istekki design system colours. */
/* These variables can be used with var(), for example background-colod: var(--istekki-dk-primary-very-dark);  */
:root {
	/* Primary, blue */
	/* Original Istekki colours. */
	/*--istekki-dk-primary-dark: #02386E;*/ /* Blue component color */
	/*--istekki-dk-primary-blue: #1B6CBA;*/ /* Blue hover & link */
	/*--istekki-dk-primary-light: #6EABDF;*/ /* Blue pressed */
	/*--istekki-dk-primary-very-light: #DAEBF9;*/ /* White hover */
	/* PSHVA, yellow */
	--istekki-dk-primary-dark: #ffca00; /* Blue component color */
	--istekki-dk-primary-blue: #ffebb8; /* Blue hover & link */
	--istekki-dk-primary-light: #ffca00; /* Blue pressed */
	--istekki-dk-primary-very-light: #ffebb8; /* White hover */
	/* Neutral, white - grey - black */
	--istekki-dk-neutral-0: #FFFFFF; /* White background */
	--istekki-dk-neutral-5: #F2F2F2; /* Grey backgroud variant */
	--istekki-dk-neutral-30: #DDDDDD; /* Grey hover */
	--istekki-dk-neutral-50: #7D7D7D; /* Grey outline */
	--istekki-dk-neutral-80: #303030; /* Variant over background */
	--istekki-dk-neutral-100: #111516; /* Black text & icons */
	/* Secondary, green */
	--istekki-dk-secondary-dark: #007350; /* Dark green */
	--istekki-dk-secondary-green: #7AC175; /* Green component color */
	--istekki-dk-secondary-hover: #A2D699; /* Green hover */
	--istekki-dk-secondary-pressed: #CDEAC4; /* Green pressed */
	/* Traffic lights, green - yellow - red */
	--istekki-dk-success: #007350; /* Success */
	--istekki-dk-success-light: #7AC175; /* Success background */
	--istekki-dk-warning: #FFC107; /* Warning */
	--istekki-dk-warning-light: #FFF3BC; /* Warning background */
	--istekki-dk-danger: #DA1E28; /* Danger */
	--istekki-dk-danger-light: #FFC2BE; /* Danger background */
}

.idk-bg-primary-very-dark {
	background-color: var(--istekki-dk-primary-dark);
}

.idk-button-primary {
	background-color: var(--istekki-dk-primary-dark);
	border-color: var(--istekki-dk-primary-dark);
}
	.idk-button-primary:hover {
		background-color: var(--istekki-dk-primary-blue);
		border-color: var(--istekki-dk-primary-blue);
	}
	.idk-button-primary:focus {
		background-color: var(--istekki-dk-primary-light);
		border-color: var(--istekki-dk-neutral-100);
	}
	.idk-button-primary:active, :not(.btn-check) + .idk-button-primary:active, .idk-button-primary:first-child:active {
		background-color: var(--istekki-dk-primary-very-light);
		border-color: var(--istekki-dk-primary-very-light);
	}

.idk-button-secondary {
	background-color: var(--istekki-dk-secondary-green);
	border-color: var(--istekki-dk-secondary-green);
}
	.idk-button-secondary:hover {
		background-color: var(--istekki-dk-secondary-hover);
		border-color: var(--istekki-dk-secondary-pressed);
	}
	.idk-button-secondary:focus {
		background-color: var(--istekki-dk-secondary-hover);
		border-color: var(--istekki-dk-neutral-100);
	}
	.idk-button-secondary:active, :not(.btn-check) + .idk-button-secondary:active, .idk-button-secondary:first-child:active {
		background-color: var(--istekki-dk-secondary-pressed);
		border-color: var(--istekki-dk-secondary-pressed);
	}

.idk-button-outline {
	background-color: var(--istekki-dk-neutral-0);
	border-color: var(--istekki-dk-neutral-100);
}
	.idk-button-outline:hover {
		background-color: var(--istekki-dk-primary-very-light);
		border-color: var(--istekki-dk-neutral-100);
	}
	.idk-button-outline:focus {
		background-color: var(--istekki-dk-primary-very-light);
		border-color: var(--istekki-dk-neutral-100);
	}
	.idk-button-outline:active, :not(.btn-check) + .idk-button-outline:active, .idk-button-outline:first-child:active {
		background-color: var(--istekki-dk-primary-light);
		border-color: var(--istekki-dk-neutral-100);
	}

.idk-button-danger {
	background-color: var(--istekki-dk-danger);
	border-color: var(--istekki-dk-danger);
}

	.idk-button-danger:hover {
		background-color: var(--istekki-dk-danger);
		border-color: var(--istekki-dk-danger-light);
	}

	.idk-button-danger:focus {
		background-color: var(--istekki-dk-danger-light);
		border-color: var(--istekki-dk-neutral-100);
	}

	.idk-button-danger:active, :not(.btn-check) + .idk-button-danger:active, idk-button-danger:first-child:active {
		background-color: var(--istekki-dk-danger-light);
		border-color: var(--istekki-dk-danger-light);
	}

.idk-nav-link {
	color: var(--istekki-dk-primary-dark);
	background-color: var(--istekki-dk-neutral-0);
}

	.idk-nav-link:hover {
		color: var(--istekki-dk-primary-blue);
		background-color: var(--istekki-dk-neutral-0);
	}

	.idk-nav-link:focus {
		color: var(--istekki-dk-neutral-0);
		background-color: var(--istekki-dk-primary-dark);
	}

	.idk-nav-link:active {
		color: var(--istekki-dk-neutral-0);
		background-color: var(--istekki-dk-primary-dark);
	}

	.idk-nav-link:current {
		color: var(--istekki-dk-neutral-0);
		background-color: var(--istekki-dk-primary-dark);
	}

.idk-nav-pills .idk-nav-link.active {
	color: var(--istekki-dk-neutral-0);
	background-color: var(--istekki-dk-primary-dark);
}

.istekki-dk-login-background {
	background-image: url("pictures/istekki_ppt_tausta_sininen.png");
	background-size: cover;
	background-position: center;
	background-color: #02386E;
	background-origin: border-box;
	min-height: 100vh;
}

.istekki-dk-logo-container {
	display: flex;
	align-items: center;
	gap: 1em;
}

.istekki-dk-logo-app-title {
	font-size: 32px;
	font-weight: 700;
	padding-top: 0.4em;
	color: white;
}

.istekki-dk-login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0px;
	gap: 20px;
}

.istekki-dk-login-items {
	border: 1px solid #000;	
	display: flex;
	flex: 1;
	width: 50vw;
	flex-direction: column;
	background-color: white;
	border-radius: 25px;
	padding: 1em 2em;
}

.istekki-dk-login-input {
	border: 1px solid #000;
	border-radius: 10px;
	display: flex;
	flex: 1;
	width: 50vw;
	flex-direction: column;
	background-color: white;
	padding: 1em 2em;
}

.istekki-dk-login-rounded-button {
	background: #02386E; 
	border: 1px solid #111516; 
	border-radius: 50px;
}