html {
font-size:15px
}

body.forms {
font-family:Avenir Next,Avenir,SegoeUI,sans-serif;
font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#333;
max-width:700px;
background-color:lightgray;
padding:0 30px;
margin:0 auto
}

.m-form {
max-width:320px;
max-width:380px;
color:#676767;
margin:0 auto;
background-color:#fff;
padding:30px 40px;
box-shadow:0 2px 6px 1px rgba(0,0,0,0.1);
border-radius:4px;
margin-bottom:2em
}

.m-form p {
color:#333;
font-size:13px;
margin:0
}

.m-form .field {
margin:0 0 -2px;
margin-bottom:.1em;
position:relative
}

.m-form h1,.m-form h2,.m-form h3,.m-form h4,.m-form h5,.m-form h6 {
color:#333;
font-weight:600;
text-align:center
}

.m-form h1 {
font-size:26px
}

.m-form label {
font-weight: inherit;
margin-bottom: 0
}

.m-form .splitter {
display:block;
text-align:center;
overflow:hidden;
white-space:nowrap;
margin:1rem 0
}

.m-form .splitter > span {
position:relative;
display:inline-block
}

.m-form .splitter > span:before,.m-form .splitter > span:after {
content:"";
position:absolute;
top:50%;
width:9999px;
height:1px;
background:lightgray
}

.m-form .splitter > span:before {
right:100%;
margin-right:15px
}

.m-form .splitter > span:after {
left:100%;
margin-left:15px
}

.m-form .field {
display:flex;
flex-flow:column-reverse
}

.m-form input:not([type='checkbox']):not([type='submit']):not([type='radio']):not([type='button']):not([type='file']) ~ label,.m-form input:not([type='checkbox']):not([type='submit']):not([type='radio']):not([type='button']):not([type='file']) {
transition:all .2s;
touch-action:manipulation
}

.m-form [type='text'],.m-form [type='password'],.m-form [type='date'],.m-form [type='datetime'],.m-form [type='datetime-local'],.m-form [type='month'],.m-form [type='week'],.m-form [type='email'],.m-form [type='number'],.m-form [type='search'],.m-form [type='phone'],.m-form [type='time'],.m-form [type='url'],.m-form [type='color'],.m-form textarea,.m-form select {
display:block;
box-sizing:border-box;
width:100%;
height:2.3375rem;
height:2.4625rem;
padding:.5rem;
color:#414141;
padding-left:11px;
border:1px solid #D9D9D9;
border-radius:3px;
background-color:#fefefe;
-webkit-box-shadow:inset 0 0 0 50px #fff,-1px 1px 3px #00000012;
box-shadow:inset 0 0 0 50px #fff,-1px 1px 3px #00000012;
font-family:inherit;
font-size:1rem;
font-weight:400;
transition:box-shadow 0.5s,border-color .25s ease-in-out;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
-webkit-user-select:text
}

.m-form input:not([type='checkbox']):not([type='submit']):not([type='radio']):not([type='button']):not([type='file']):focus,textarea:focus,select:focus {
outline:0;
border-color:#2F96D9
}

.m-form select {
margin:16px 0 0;
position:relative;
display:flex;
line-height:1em
}

.m-form select option {
font-family:"Open Sans"
}

.m-form .drowdown--wrapper {
display:flex;
flex-direction:column
}

.m-form .drowdown--wrapper::after {
content:"";
position:absolute;
z-index:2;
right:10px;
top:65%;
margin-top:-3px;
height:0;
width:0;
border-top:6px solid #5a5a5a;
border-left:6px solid transparent;
border-right:6px solid transparent;
pointer-events:none
}

.m-form input:not([type='checkbox']):not([type='submit']):not([type='radio']):not([type='button']):not([type='file']) ~ label > span {
background-color:#fff;
background:#fff;
box-shadow:6px 0 0 white,-6px 0 0 #fff;
font-size:12px;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
font-weight:400
}

.m-form input:not([type='checkbox']):not([type='submit']):not([type='radio']):not([type='button']):not([type='file']) ~ label {
padding-left:.8rem;
padding-left:10px;
line-height:1rem;
letter-spacing:.02em
}

.m-form input:placeholder-shown ~ label {
cursor:text;
color:#7b7b7b;
font-weight:400;
max-width:66.66%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transform-origin:left bottom;
transform:translate(0,1.9rem) scale(1.4);
transform:translate(0,1.9rem) scale(1.3);
pointer-events:none
}

.m-form input:not(:placeholder-shown):not([type='checkbox']):not([type='submit']):not([type='radio']):not([type='button']):not([type='file']) ~ label,.m-form input:focus:not([type='checkbox']):not([type='submit']):not([type='radio']):not([type='button']):not([type='file']) ~ label {
transform:translate(0,0.45rem) scale(1);
padding-left:12px;
color:#2F96D9;
cursor:pointer;
text-transform:inherit;
cursor:pointer
}

.m-form input:not(:placeholder-shown):not(:focus) ~ label {
color:#414141
}

.m-form .unmask {
font-size:18px;
line-height:1rem;
border:0;
display:none;
background:none;
cursor:pointer;
width:auto;
position:absolute;
align-self:flex-end;
outline:none;
padding:11px 8px;
color:#6b6b6b
}

#password ~ .unmask {
font-size:18px;
border:0;
display:none;
background:none;
cursor:pointer;
width:auto;
position:absolute;
align-self:flex-end;
outline:none;
color:#6b6b6b
}

#password[required]:focus ~ .unmask,#password[required]:not(:placeholder-shown) ~ .unmask {
display:block
}

[type='password'] ~ button.unmask {
color:#6b6b6b
}

[type='text']:not(:placeholder-shown) ~ button.unmask {
color:#2F96D9
}

.m-form #password[type='text'] ~ span.unmask {
color:#2F96D9
}

#password[required]:placeholder-shown ~ span.unmask {
pointer-events:none;
opacity:.4
}

.m-form .m-button {
margin-top:20px;
font-size:14px;
color:#fff;
font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
padding:13px 18px;
border-radius:4px;
background-color:#2f96d9;
box-shadow:0 1px 5px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2);
-webkit-transition:background-color 300ms ease,box-shadow 300ms cubic-bezier(.4,0,.2,1);
transition:background-color 300ms ease,box-shadow 300ms cubic-bezier(.4,0,.2,1);
color:#fff;
font-weight:700;
letter-spacing:.03em;
text-transform:uppercase;
border:0;
line-height:inherit;
text-decoration:none;
cursor:pointer;
width:100%
}

.m-form .m-button:hover {
background-color:#1f8acf;
color:#fff;
box-shadow:0 1px 10px 0 rgba(0,0,0,.12),0 4px 5px 0 rgba(0,0,0,.14),0 2px 4px -1px rgba(0,0,0,.2)
}

.m-form input:not(:focus)::-webkit-input-placeholder {
color:transparent;
transition:inherit
}

.m-form input:not(:focus):-moz-placeholder {
color:transparent;
transition:inherit
}

.m-form input:not(:focus)::-moz-placeholder {
color:transparent;
transition:inherit
}

.m-form input:not(:focus):-ms-input-placeholder {
color:transparent;
transition:inherit
}

.m-form input:not(:focus):not(:placeholder-shown):invalid ~ label {
color:#e23030
}

.m-form input:not(:focus):not(:placeholder-shown):invalid {
border-color:#e23030
}

.m-form .links {
display:flex;
margin:3rem 0 0;
flex-wrap:wrap;
color:#333;
font-size:13px
}

.links > p:not(:only-child) {
width:50%
}

.links > p:last-of-type:not(:only-child) {
text-align:right
}

.links > p:only-child {
text-align:center;
width:100%
}

.m-form a,.m-form a:link,.m-form a:visited {
color:#2f96d9;
text-decoration:none
}

.m-form a:hover {
text-decoration:underline;
color:#2482bf
}

.m-form input::placeholder {
font-size:1rem;
color:#9c9c9c
}

span.sr-only {
display:none
}

.m-form > .columns {
display:flex
}

.m-form > .columns > div:not(:last-child) {
margin-right:15px
}

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus
input:-webkit-autofill,textarea:-webkit-autofill,textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {
-webkit-text-fill-color:#414141;
-webkit-box-shadow:0 0 0 1000px #fff inset;
transition:background-color 5000s ease-in-out 0;
background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(0,174,255,0.04) 50%,rgba(255,255,255,0) 51%,rgba(0,174,255,0.03) 100%)
}

.field .error {
background-color:red;
color:#fff;
font-size:13px;
display:none
}

.field .error p {
margin:0;
padding:0
}

.field-error {
position:absolute;
display:none;
padding-right:12px;
font-size:12px;
color:#e23030;
align-self:flex-end;
transform:translateY(24px)
}

.field-error > span {
background-color:#fff;
background:#fff;
box-shadow:6px 0 0 white,-6px 0 0 #fff
}

@media screen and (max-width: 520px) {
body {
margin:0;
padding:0
}

form.m-form {
max-width:100%;
height:100vh;
margin:0 0 20px;
display:flex;
flex-direction:column;
justify-content:center
}
}