/*===========================================
	INFO

	AUTHOR
	----------------------
	BPS Bildungsportal Sachsen GmbH
	Bahnhofstr. 6, D-09111 Chemnitz

    COLORS
	----------------------
	#0064a8 BLUE MAIN
	#e5f0f7 BLUE LIGHT

	#3A3F45 GREY DARK
	#878787 GREY MIDDLE
	#f5f5f5 GREY LIGHT

	#009236 GREEN

	#f39100 ORANGE

=============================================*/

/****************************
	CUSTOM PROPERTIES
*****************************/
:root {
    --main-bg-color: ;
    --main-text-color: #3A3F45;
    --main-theme-color: #0064a8;
    --main-theme-color-light: #e5f0f7;
    --main-theme-grey: #666;
        
    --logo: url(kfz-nrw-logo.png) no-repeat center center transparent;
    --main-bg: url(back.jpg) top center no-repeat fixed #0064a8;
}

/****************************
	RESET
*****************************/
*, *::before, *::after {
  box-sizing: border-box;
} 

* {
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

html, body, h1, h2, p {
    margin: 0;
    padding: 0;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button, select {
    text-transform: none;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

/****************************
	GENERAL
*****************************/
html, body {
    height: 100%;
}

html {
    font-size: 62.5%;  
}

body {
    color: var(--main-text-color);
}

a {color: var(--main-theme-color);}
a:hover, a:focus {color: var(--main-text-color)}

h1 {margin-bottom: 1rem; font-size: 2rem;}
h2 {margin-bottom: 1rem; font-size: 1.8rem;}
h3 {margin-bottom: 1rem; font-size: 1.5rem;}

p {margin-bottom: 1rem;}
p, a, button, label, input, select, strong, li {font-size: 1.5rem;}

.center {text-align: center;}

ul, ol {margin-bottom: 3rem;}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/****************************
	PAGE
*****************************/
.page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.page.login {
    background: var(--main-bg); 
    background-size: cover;
}

/****************************
	HEADER
*****************************/
.header {
    margin: 20vh auto 5vh auto;
}
.logo {
    display: block;
    height: 150px;
    width: 150px;
    margin: 0 auto;
    background: var(--logo);
    background-size: 150px;
}

/****************************
	CONTENT
*****************************/
.container {
    width: 100%;
    margin: 0 auto;
    flex-shrink: 0;
    padding: 0 4vw;
}

.content {
    display: flex;
	align-items: center;
	justify-content: center;
}

/****************************
	FORM
*****************************/
.login-form {
    padding: 4em;
    background: var(--main-theme-color-light);
    border-radius: 5px;
}
.login-form form {margin-top: 2rem;}
.form-group {
    position: relative;
}
.form-group:not(:last-child) {margin-bottom: 2rem;}
.form-required .control-label .required-icon:after {
    position: absolute;
    top: -2px;
    content: '*';
    padding-left: 2px;
    color: var(--main-theme-color);
    font-size: 1.2em;
}

.control-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-control {
    display: block;
    width: 100%;
    padding: 1.1rem 0.75rem;
    line-height: 1.5;
    color: var(--main-text-color);
    background-color: #fff;
    border: 1px solid var(--main-theme-color);
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-text {
    margin-top: 0.25rem;
    font-size: 1.2em;
    color: var(--main-theme-grey);
}

.btn {
    display: inline-block;
    padding: 0.75rem 0.375rem;
    line-height: 1.5;
    color: ;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background-color: #eee;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    background: var(--main-theme-color);
    border-color: var(--main-theme-color);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--main-text-color);
    border-color: var(--main-text-color);
}
.btn-primary:focus {
  outline: max(2px, 0.1rem) solid var(--main-theme-color);
  outline-offset: 0.1rem;
}
.btn-primary:focus:not(:focus-visible) {
  outline: none;
}
.btn-primary:focus-visible {
  outline: max(2px, 0.1rem) solid var(--main-theme-color);
  outline-offset: 0.1rem;
}

.login-form .btn {width: 100%;}

/****************************
	FOOTER
*****************************/
.footer {
    width: 100%;
    margin-top: auto; 
    padding: 1rem 0; 
    border-top: 5px solid var(--main-theme-color);
    background-color: #fff;
}
.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.footer-link {padding: 0 2rem; color: var(--main-theme-grey); font-size: 1.3rem; text-decoration: none;}
.footer-link:hover {text-decoration: underline;}

/****************************
	MEDIA QUERIES
*****************************/
@media (min-width: 550px) {
    .container {
        width: 540px;
        padding: 0;
    }
}