:root {
	--brand-color-1: #132834;
	--brand-color-2: #f8bbbe;
	--login-form-width: 560px;
	--border-radius: 5px;
}

#login {
	color: red;
}

@font-face {
	font-family: "Sora-Regular";
	src: url("/static/fonts/Sora-Regular.eot");
	src: url("/static/fonts/Sora-Regular.eot?#iefix")
			format("embedded-opentype"),
		url("/static/fonts/Sora-Regular.svg#OpenSans-Bold")
			format("svg"),
		url("/static/fonts/Sora-Regular.ttf")
			format("truetype"),
		url("/static/fonts/Sora-Regular.woff") format("woff"),
		url("/static/fonts/Sora-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

body {
	height: 100vh;
	width: 100vw;
	background: #EAF7F7;
	background: linear-gradient(
		45deg,
		#EAF7F7 0%,
		#cbdfdf 50%,
		#EAF7F7 100%
	);
	overflow: hidden;
	padding: 0;
	font-family: "Sora-Regular";
	margin: 0;
}

.login-container {
	box-sizing: border-box;
	position: absolute;
	display: flex;
  text-align: center;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: var(--login-form-width);
	background: white;
	border-radius: var(--border-radius);
	box-shadow: 0 0 4px 0 rgba(186, 186, 186, 0.36);
	padding: 40px;
	min-height: 350px;
	color: var(--brand-color-1);
}

.login-container form {

}

h1 {
	margin: 0;
	margin-bottom: 50px;
}

tr {
	display: flex;
	flex-flow: column nowrap;
}

tbody > tr {
	margin-bottom: 15px;
}

tbody > :last-child {
	margin-bottom: 0;
}

tbody > :last-child > :first-child {
	display: none;
}

tr th {
	margin-bottom: 5px;
	color: var(--brand-color-1);
}

.mb-3 {
  margin-bottom: 15px;
}

main {
  flex-direction: column;
}

.logo-image {
  width: 100px;

}

form {
	margin: 0;
}

form h2 {
  text-align: center;
}

.language-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}

.language-switch button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.copyright {
  font-size: 12px;
  margin-top: 30px;
}

.sso-button,
input {
	padding: 10px;
	border-radius: 3px;
	width: 100%;
	min-width: 250px;
	border: 1px solid var(--brand-color-1);
}

input:focus,
input:hover,
input:active,
.sso-button:focus,
.sso-button:hover,
.sso-button:active{
	outline: 0;
	border-color: rgb(93, 79, 130);
	box-shadow: 0px 0px 7px 0px rgba(74, 47, 146, 0.34);
}

.sso-button,
input[type="submit"] {
	background: var(--brand-color-1);
	color: white;
	border: none;
	cursor: pointer;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	text-transform: capitalize;
}

.sso-button:hover,
input[type="submit"]:hover {
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
}

.sso-button {
	background: var(--brand-color-2);
	border: 1px solid var(--brand-color-2);
  min-width: auto;
  text-decoration: none;
}

#sso {
  display: flex;
  margin-top: 18px;
}