@import 'colors.css';

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden;
	height: 100%;
	width: 100%;
}

body.login {
	background-color: var(--mainBackgroundColor);
	width: 100%;
}

@media only screen and (min-width: 46.875em) {  /* 750px upwards */
	body.login {
		background-image: var(--bg);
		background-size: cover !important;
		background-position: center !important; /* bg2.jpg (2025, FSG) needs center, bg.jpg (2019, Tramino) needs bottom */
		background: linear-gradient(135deg, rgb(255, 255, 255, 0.0) 0%, rgba(40, 53, 147, 0.8) 85%), var(--bg) center / cover;
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--bg) center / cover;
		height: 100%;
	}
}

input.full-width { /* mobile */
	display: block;
	width: 100%;
}

.loginbox { /* mobile */
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding: 40px;
	background-color: var(--loginboxBackgroundColor);
	color: var(--fontColor);
	font-size: 15px;
	border-radius: 0px;
}

.legal { /* mobile */
	position: relative;
	background-color: var(--loginboxBackgroundColor);
	font-size: 15px;
	padding: 10px;
	width: 100%;
	text-align: center;
	margin-top: -1px;
	color: var(--fontColor);
}

.loginbox input[type="text"], .loginbox input[type="password"] {   /* mobile */
    outline: none;
	background-color: var(--loginboxInputBackgroundColorMobile);
	border: 0;
	padding: 15px;
	font-size: 15px;
	color: var(--inputFontColor);
	border-radius: 3px;
}

@media only screen and (min-width: 46.875em) {  /* 750px upwards */
	.loginbox { /* pc */
		position: relative;
		top: 50%;
		left: calc(40% - 40px);
		width: calc(20% + 80px);
		height: auto;
		transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		background-color: var(--loginboxBackgroundColorTransparent);
		box-shadow: 0 0px 20px 20px rgba(0,0,0,.2);
		border-radius: 4px;
	}

	.legal { /* pc */
		position: fixed;
		bottom: 0;
		background-color: var(--loginboxBackgroundColorTransparent);
		font-size: 15px;
		padding: 10px;
		width: 100%;
		text-align: center;
		margin-top: 0px;
	}

	.loginbox input[type="text"], .loginbox input[type="password"] { /* pc */
		background-color: var(--loginboxInputBackgroundColor);
	}
}

.loginbox input[type="text"]:focus, .loginbox input[type="password"]:focus {
	background-color: var(--loginboxInputBackgroundColorHover);
	border-bottom: 6px solid var(--inputBorderColorFocus);
	padding-bottom: 9px;
}

.loginbox button {
	padding: 15px;
	font-size: 15px;
	text-transform: uppercase;
}

.loginbox h1, .loginbox h2 {
	text-align: center;
	margin-top: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

a.link {
	color: var(--linkFontColor);
	cursor: pointer;
}

a.link:hover {
	text-decoration: underline;
}

span.error-inline {
	display: block;
	padding: 10px;
	background-color: var(--errorBackgroundColor);
	color: var(--errorsuccessinfoFontColor) !important;
	border-left: 8px solid rgba(0,0,0, 0.2);
	border-radius: 3px;
}

span.quote-inline {
	display: block;
    background-color: var(--quoteBackgroundColor);
    color: var(--quoteFontColor);
    border-left: 8px solid var(--quoteBorderColor);
    padding: 10px;
    border-radius: 3px;
}

span.success-inline {
	display: block;
	padding: 10px;
	background-color: var(--successBackgroundColor);
	color: var(--errorsuccessinfoFontColor) !important;
	border-left: 8px solid rgba(0,0,0, 0.2);
	border-radius: 3px;
}

button {
	padding: 10px 20px 10px 20px;
	font-size: 15px;
	background-color: var(--buttonBackgroundColor);
	color: var(--buttonFontColor);
	border: 0;
	cursor: pointer;
	transition: all .1s;
	text-transform: uppercase;
	border-radius: 3px;
	font-weight: 600;
	outline: none;
}

button > i {
	margin-right: 10px;
}

button:hover {
	background-color: var(--buttonBackgroundColorHover);
}

.start_logo {
	background-image: url("/static/img/logo_color.svg");
	width: 100%;
	height: 75px;
	background-size: contain;
	background-repeat: no-repeat;
    background-position-x: center;
}

@media (prefers-color-scheme: dark) {
	.start_logo {
		background-image: url("/static/img/logo_white.svg");
	}
}

/* =================== Checkboxes =================== */

input[type="checkbox"] { /* mobile */
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--loginboxInputBackgroundColorMobile);
    border-radius: 3px;
    margin-right: 10px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    position: relative;
}

@media only screen and (min-width: 46.875em) {  /* 750px upwards */
	input[type="checkbox"] {
		background-color: var(--loginboxInputBackgroundColor);
	}
}

@media only screen and (min-width: 46.875em) {  /* 750px upwards */
	input[type="checkbox"]:hover {
		background-color: var(--loginboxInputBackgroundColorHover);
	}
}

input[type="checkbox"]:checked {
    background-color: var(--checkboxBackgroundColorChecked);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid var(--checkboxFontColor);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:disabled, input[type="checkbox"].style-disabled {
    background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), red, transparent calc(50% + 1px));
	cursor: not-allowed;
}

input[type="checkbox"]:disabled:checked, input[type="checkbox"].style-disabled:checked {
	background-color: var(--secretBackgroundColor);
}

label:has(> input[type="checkbox"].style-disabled) {
	pointer-events: none;
}

/* Center text of label next to checkbox */
label:has(> input[type="checkbox"]) {
	display: inline-flex;
	align-items: center;
}

/* Fix for Django wrapping all checkboxes with divs as block display */
div:has(> label > input[type="checkbox"]) {
	display: inline-block;
	margin-right: 20px;
}

.hide-input {
	opacity: 0;
	position: absolute;
	top: -1000px;
	left: 0px;
}