/* Roboto Regular(400) Normal*/
@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	font-style: normal;
	src: 
		local('Roboto'),
		local('Roboto-Regular'),
		url('./fonts/Roboto-Regular.ttf') format(truetype);
	font-display: swap;
}

/* Roboto Regular(400) Italic*/
@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	font-style: italic;
	src: 
		local('Roboto Italic'),
		local('Roboto-Italic'),
		url('./fonts/Roboto-Italic.ttf') format(truetype);
	font-display: swap;
}

/* Roboto Medium(500) Normal*/
@font-face {
	font-family: 'Roboto';
	font-weight: 500;
	font-style: normal;
	src: 
		local('Roboto Medium'),
		local('Roboto-Medium'),
		url('./fonts/Roboto-Medium.ttf') format(truetype);
	font-display: swap;
}

/* Roboto Medium(500) Italic*/
@font-face {
	font-family: 'Roboto';
	font-weight: 500;
	font-style: italic;
	src: 
		local('Roboto MediumItalic'),
		local('Roboto-MediumItalic'),
		url('./fonts/Roboto-MediumItalic.ttf') format(truetype);
	font-display: swap;
}

/* Roboto Bold(700) Normal*/
@font-face {
	font-family: 'Roboto';
	font-weight: 700;
	font-style: normal;
	src: 
		local('Roboto Bold'),
		local('Roboto-Bold'),
		url('./fonts/Roboto-Bold.ttf') format(truetype);
	font-display: swap;
}

/* Roboto Bold(700) Italic*/
@font-face {
	font-family: 'Roboto';
	font-weight: 700;
	font-style: italic;
	src: 
		local('Roboto BoldItalic'),
		local('Roboto-BoldItalic'),
		url('./fonts/Roboto-BoldItalic.ttf') format(truetype);
	font-display: swap;
}

:root {
  --c-text-primary: #282a32;
  --c-text-secondary: #686b87;
  --c-text-action: #404089;
  --c-accent-primary: #004C9D;
  --c-border-primary: #eff1f6;
  --c-background-primary: #ffffff;
  --c-background-secondary: #fdfcff;
  --c-background-tertiary: #ecf3fe;
  --c-background-quaternary: #e9ecf4;
}

body {
    font-family: Roboto;
	font-weight: 400;
    margin: 0;
    padding: 0;
    background-color: var(--c-background-secondary);
	color: var(--c-text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
	background-color: #fff;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 400px;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 4px var(--c-border-primary);
}

.login-container h1 {
	margin: 20px 0 0 0;
	font-size: 1.75rem;
	font-weight: 700;
	text-align: center;
}

.login-container p {
	text-align: center;
	color: var(--c-text-secondary);
	font-size: 0.875rem;
	font-weight: 400;
	margin-bottom: 1rem;
}

.login-form {
	display: flex;
	flex-direction: column;
} 

.input-group {
	margin-bottom: 15px;
}

.input-group label {
	display: block;
	margin-bottom: 5px;
}

.input-group input {
    font-size: 14px;
    line-height: 14px;
	padding: 8px 16px;
    width: 100%;
	box-sizing: border-box;
    min-height: 40px;
    border: unset;
    border-radius: 8px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
        rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
        rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}


.button {
	width: 100%;
	margin: 0 0 20px 0;
    background-color: #004C9D;
    border-radius: 8px;
    border-style: none;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: block; /* Ändere auf block, um die gesamte Breite zu verwenden */
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    line-height: 20px;
    list-style: none;
    outline: none;
    padding: 10px 0; /* Ändere die horizontale Polsterung */
    text-align: center;
    text-decoration: none;
    transition: color 100ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button:hover,
.button:focus {
    background-color: #7795CC;
}

.button2 {
	width: 100%;
	margin: 0 0 20px 0;
	background-color: rgba(51, 51, 51, 0.05);
	border-radius: 8px;
	border-width: 0;
	color: #333333;
	cursor: pointer;
	display: block;
	font-family: Roboto;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	list-style: none;
    padding: 10px 0; /* Ändere die horizontale Polsterung */
	text-align: center;
	transition: all 200ms;
	vertical-align: baseline;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: 0.15s ease;
}
	
.button2:hover,
.button2:focus {
	background-color: rgba(51, 51, 51, 0.1);
	color: #333333;
}

.invalid-feedback {
	display: block;
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 0,875rem;
	font-weight: 400;
	color: red;
}

.alert-danger {
    font-size: 0.875rem; /* Korrigiert von 0,875rem zu 0.875rem */
    font-weight: 400;
	text-align: center;
    color: red;
    border: 1px solid red; /* Roter Rand */
    padding: 10px; /* Innenabstand für bessere Ästhetik */
    margin: 10px 0; /* Außenabstand für Abstand von anderen Elementen */
    background-color: #ffecec; /* Leichter roter Hintergrund für mehr Sichtbarkeit */
    border-radius: 8px; /* Abgerundete Ecken für modernes Aussehen */
}

@media (max-width: 600px) {
    .login-container {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 5%;
    display: block;
    justify-content: center;
	min-height: 100vh;
  }
}