body {
	font-family: 'Poppins', sans-serif;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #000000;
    background-color: #E3E3EC;
}

header {
    position: fixed;
	background-color: #ffffff;
	height: 90px;
	width: 100%;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
}

main {
    width: 100%;
    height: calc(100vh - 130px);
    margin-top: 90px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

footer {
    position: fixed;
	background-color: #ffffff;
	height: 40px;
	bottom: 0;
	width: 100%;
}

.header-container {
	width: 100%;
	height: 90px;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


.primary-button {
    background: #4e4efd;
    padding: 9px 25px;
    border-radius: 25px;
    border: 2px solid #4e4efd;
    opacity: 1;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 40px;
}

.primary-button:hover {
    background-color: var(--primary-background);
    color: #0A0AFC;
    cursor: pointer;
}

.primary-button:focus {
    outline: none;
}

#logo {
	font-family: 'Manrope', sans-serif;
	font-size: 50px;
	font-weight: 300;
	color: #000000;
}

#logo a {
	text-decoration: none;
	color: #000000;
}

#logo-bold {
	font-weight: 600;
}

#login-form {
    width: 350px;
    margin-bottom: 10%;
    z-index: 5;
}

#login-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

#copyright {
	margin: 10px auto;
	text-align: center;
	font-size: 12px;
}

::placeholder {
    color: gray;
}

fieldset {
    background-color: #ffffff;
	color: #000000;
	border-radius: 10px;
	border: 1px solid #000000;
    text-align: left;
    padding: 20px 20px 20px 20px;
}

fieldset legend {
	color: #000000;
	font-size:20px;
    margin-left: 50px;
}

input {
    width: 100%;
    height: 30px;
    margin-bottom: 25px;
    border: none;
    border-bottom: 1px solid #000000;;
}

input:focus {
    border-bottom: 1px solid blue;
    color: blue;
    outline: none;
}

.messageVisible {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: red;
    margin-top: 10px;
}

.messageHidden {
    display: none;
}

.hex-grid {
    display: grid;
    grid-template-columns: 66fr 144fr 66fr 144fr 66fr;
    row-gap: 50px;
    column-gap: 85px;
}

image:hover {
	filter: brightness(65%);
}

#image-01 {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

#image-02 {
    grid-column: 3 / 6;
    grid-row: 2 / 4;
}

#image-03 {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
}

#image-04 {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
}

#image-05 {
    grid-column: 1 / 4;
    grid-row: 2 / 4;
}

#image-06 {
    grid-column: 3 / 6;
    grid-row: 3 / 5;
}

.span-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

button {
    border-radius: 25px;
    border: 1px solid #000000;
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    padding: 7px 50px;
    outline: none;
}

button:hover {
    cursor: pointer;
    filter: drop-shadow(0px 0px 2px #b3b3b3);
    border: 1px solid blue;
    color: blue
}

.login-input i {
    margin-left: -30px;
    cursor: pointer;
}

.labelWarning {
    padding-left: 10px;
    color: red;
    font-size: 0.8em;
}

.inputWarning {
    background-color: pink;
}

#companyName {
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 0px 0px;
}

#userName {
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 0px 0px;
}

#save-entity {
    height: 10px;
    margin: 0px 0px 30px 5px;
    padding: 0px 0px 0px 0px;
}

#save-entity-input {
    width: 12px;
    height: 12px;
    vertical-align: top;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#save-entity-label {
    font-size: 10px;
    vertical-align: top;
    padding: 0px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
}

#save-user {
    height: 10px;
    margin: 0px 0px 30px 5px;
    padding: 0px 0px 0px 0px;
}

#save-user-input {
    width: 12px;
    height: 12px;
    vertical-align: top;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#save-user-label {
    font-size: 10px;
    vertical-align: top;
    padding: 0px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
}