html, body {background: none repeat scroll 0 0 transparent; touch-action: none;}
body {font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 12px;}
body {position: relative; overflow: hidden; margin: 0; padding: 0; width: 100vw; height: 100vh;}

.flex-wrapper {display: flex; align-items: center; justify-content: center;}
.flex-wrapper {width: calc(100% - 2 * 37px); height: 80%; margin: 0 37px;}
.flex-wrapper {border: 1px solid #EAEAEA; border-radius:  0 0 10px 10px; box-shadow: 0 21px 26px -25px rgba(0, 0, 0, 0.67);}

.form-wrapper {padding: 40px; border: 1px solid #C2C2C2; border-radius: 10px;}

.error {color: red; font-size: 18px; text-align: center; margin-bottom: 25px;}

body::before {content: "Ink Canvas Component Samples for Web"; display: block; font-size: 20px; font-weight: 700; color: #141414; margin: 0 0 0 38px; padding-top: 25px; padding-bottom: 11px;}
h2 {font-size: 20px; margin-top: 0; margin-bottom: 38px;}

label {font-size: 16px; display: block; padding-bottom: 8px;}
.form-wrapper label[for=pass] {margin-top: 30px;}

input {display: block; width: 300px; height: 32px; border: none; border-radius: 5px; padding: 10px 15px; background-color: rgba(216, 216, 216, 0.2);}
input:focus {border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);}
input[type=password] {margin-bottom: 36px;}

button {display: block; margin: 0 auto; padding: 14px 29px; border: none; border-radius: 10px; color: #FFFFFF;}
button {font-size: 16px; background-color: #00a0fb; cursor: pointer;}
button:hover {opacity: 0.8;}