#react-root {
   height:100%;
}

#react-root, #login-button {
   font-size: 24px;
}

#login-form {
   display: flex;
   justify-content: center;
   align-items: center;
   background-image: url("../img/wooden-truss-frames-installation-single-family-home.jpg");
   background-size: cover;
   width: 100%;
   height: 100%;
   margin: auto;
}

#login-container {
   background-color: #F2F3F5;
   border-color: #4B4C4D;
   border-style: solid;
   border-width: 2px;
   height: 300px;
   width: 650px;
}

#login-header {
   display: block;
   background-color: #0033A1;
   height: 50px;
   width: 100%;
   padding: 10px;
}

#login-header img {
   height: 100%;
}

#login-body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 250px;
}

#login-content {
   display: grid;
   justify-content: center;
   row-gap: 5px;
   width: 100%;
}

.content-row {
   width: 100%;
}

#login-button {
   background-color: #EBECEE;
   border-color: #646567;
   border-width: 1px;
   height: 50px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
}

#login-button:hover {
   background-color: #D5D6D8;
}

#apikey-textbox {
   font-size: 18px;
   width: 525px;
}

#apikey-textbox:focus {
   outline: none;
}

#rememberme-checkbox {
   height: 20px;
   width: 20px;
   margin-right: 5px;
}


.invalid {
   border-color: #D7292E;
}