:root {
  --corPadrao: #3C8476;
  --corPadraoT1: #3C847677;
}
* { font-family: "Montserrat", sans-serif; color:#333; }
html { width:100%; height:100%; }
body { padding: 0; margin: 0; background-image: linear-gradient(to right, var(--corPadrao), #EFFEF9); display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }	
.sg-login { background:#ffffffcc; border-radius:8px; box-sizing:border-box; padding: 2.3rem 1.3rem; max-width:420px; width:96%; box-shadow: 1px 1px 10px #3C8476; border-bottom: 8px solid var(--corPadrao); border-top: 3px solid var(--corPadrao); }
.sg-login form { display: flex; flex-direction:column; justify-content: center; align-items:center;  }
.sg-login img { width:60px; height:60px; fill: var(--corPadrao); display:table; margin: 0 auto; }
.sg-login h1 { font-size:18pt; color:#555; font-weight:500; margin: 25px 0; text-align:center; }
.sg-login h1 b { font-size:18pt; color: var(--corPadrao) }
.sg-login-data { display:flex; justify-content:center; width:100%; }
.sg-login-data .icon-user { background-image: url('../images/user.svg'); background-repeat: no-repeat; background-size:26px; background-position:8px center; }
.sg-login-data .icon-lock { background-image: url('../images/lock.svg'); background-repeat: no-repeat; background-size:25px; background-position:8px center; }
.sg-login-data input { box-sizing: border-box; padding:0.5rem; border: 1px solid var(--corPadraoT1); max-width:400px; width:90%; height:45px; border-radius:8px; margin:10px 0; padding-left:38px; font-size:11pt; }
.sg-login-data input:focus { outline-color: var(--corPadrao); outline-style: solid; outline-width: 1px; }
.sg-button { background: var(--corPadrao); border:none; width:90%; color:#fff; padding: 1rem 0; display:flex; justify-content:center; margin: 0 auto; margin-top:25px; font-size:1rem; border-radius:8px; font-weight:600; }