@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; }
input, textarea { font-family: 'Inter', sans-serif; }
* { transition: all .2s; }

div#wrapper {  text-align: center; display: block; }

div.header { background: #fff; text-align: left; text-align: center; margin-top: calc(50vh - 200px); margin-bottom: 20px; }
div.header a { display: inline-block; width: 140px; height: 14px; background: url('/resources/img/product-logo.svg') no-repeat top center; background-size: 140px; }

div#login { font-size: 10px; display: inline-block; padding: 0 30px; background: #fff; text-align: left; width: 100%; box-sizing: border-box; max-width: 400px; }
div#login h1 { margin: 0 0 30px 0; font-weight: 700; font-size: 24px; text-align: center; }

div#login div.error { background: #f00; color: #fff; font-size: 14px; padding: 20px; border-radius: 5px; margin-bottom: 20px; }
div#login label { display: block; font-size: 15px; font-weight: 700; margin: 10px 0; }
div#login input[type="text"],
div#login input[type="password"] { appearance: none; font-size: 15px; border-radius: 5px; min-width: 160px; line-height: 16px; width: 100%; background: #fff; box-sizing: border-box; padding: 13px 15px; color: #33393C; border: 1px solid rgba(0,0,0,.1); box-sizing: border-box; }
div#login input[type="password"] { margin-bottom: 30px; }
div#login input[type="text"]:focus,
div#login input[type="password"]:focus { outline: 0; background: #fff; box-shadow: #07f 0 0 0 2px; border-color: #fff; }
div#login input.error,
div#login input.error:focus { box-shadow: #e00 0 0 0 2px; border-color: #fff; }
div#login input[type="submit"] { font-size: 16px; text-transform: capitalize; cursor: pointer; border: 0; width: 100%; border-radius: 6px; background-color: #47b167; color: #fff; font-weight: 700; padding: 13px 20px; }
div#login input[type="submit"]:hover { background-color: #55bc75; box-shadow: 0px 4px 4px 0px rgba(0,0,0,.1);}

div#login div.input { position: relative; }
div#login div.input a { position: absolute; right: 15px; top: 15px; font-size: 13px; color: rgba(0,0,0,.5) }
div#login div.input a:hover { color: rgba(0,0,0,.7); }

.fadeout { opacity: 0; transition: all .2s; }