html, body { height: 100%; margin: 0; padding: 0; }
body { font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; background: #f5f5f5; font-size: 13px; }

.logingrid { width: 100%; height: 70vh; display: grid; grid-template-columns: 1fr; gap: 20px; grid-template-areas:
        "info"
        "login"; }

#item1 { grid-area: info; height:100px; text-align: center; }
#item2 { grid-area: login; }

.login { width: 400px; margin: auto; padding: 20px; background-color: #fff; border-radius: 8px; }
.login table { width: 100%; display: block; }
.login table td { padding: 5px; }

input[type=text], input[type=email], input[type=Password] { width: 350px; padding: 8px; border: 1px solid #ddd; display: block; }
textarea { width: 400px; height: 50px; border: 1px solid #bbb; padding: 4px; color: #4e4e4e; overflow: auto; }
select { width: 250px; border: 1px solid #bbb; padding: 4px; color: #4e4e4e; }

input[type=submit] { width: 100px; padding: 8px 6px; float: right; background: #2996CC; border: 1px solid #bbb; color: #fff; cursor: pointer; font-size: 13px; font-weight: normal; }
input[type=submit]:hover { background: #77BACE; }