/* colors */
html {
width: 100%;
height: 100%;
}
body {
background-color: #eff3f4;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
form {
background-color: #FFF;
box-sizing: border-box;
border: solid 1px #DDD;
border-radius: .5em;
font-family: 'Source Sans Pro', sans-serif;
}
form .svgContainer {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 1em;
border-radius: 50%;
pointer-events: none;
}
form .svgContainer div {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
border-radius: 50%;
padding-bottom: 100%;
}
form .svgContainer .mySVG {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
form .svgContainer:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: inherit;
height: inherit;
box-sizing: border-box;
border: solid 2.5px #fff;
border-radius: 50%;
}
form .inputGroup {
margin: 0 0 2em;
padding: 0;
position: relative;
}
form .inputGroup:last-of-type {
margin-bottom: 0;
}
form label {
margin: 0 0 12px;
display: block;
font-size: 1.25em;
color: #fff;
font-weight: 700;
font-family: inherit;
}
form input[type='email'], form input[type="text"], form input[type="number"], form input[type="url"], form input[type="search"], form input[type="password"] {
display: block;
margin: 0;
padding: 0 1em 0;
padding: .875em 1em 0;
border: solid 2px #fff;
border-radius: 4px;
-webkit-appearance: none;
box-sizing: border-box;
width: 100%;
height: 65px;
font-size: 1.55em;
color: #353538;
font-weight: 600;
font-family: inherit;
transition: box-shadow .2s linear, border-color .25s ease-out;
}
form input[type='email']:focus, form input[type="text"]:focus, form input[type="number"]:focus, form input[type="url"]:focus, form input[type="search"]:focus, form input[type="password"]:focus {
outline: none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
border: solid 2px #4eb8dd;
}
form button {
display: block;
margin: 0;
padding: .65em 1em 1em;
border: none;
border-radius: 4px;
box-sizing: border-box;
box-shadow: none;
width: 100%;
height: 65px;
font-size: 1.55em;
color: #FFF;
font-weight: 600;
font-family: inherit;
transition: background-color .2s ease-out;
background: -moz-linear-gradient(10% 60% 30deg,#122649, #0177ca);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0177ca), to(#122649));
}
form button:hover, form button:active {
background: -moz-linear-gradient(50% 50% 90deg,#0177ca, #122649);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#122649), to(#0177ca));
}
form .inputGroup1 .helper {
position: absolute;
z-index: 1;
font-family: inherit;
}
form .inputGroup1 .helper1 {
top: 0;
left: 0;
-webkit-transform: translate(1em, 2.2em) scale(1);
transform: translate(1em, 2.2em) scale(1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
color: #fff;
font-size: 1.55em;
font-weight: 400;
opacity: .65;
pointer-events: none;
transition: opacity .2s linear, -webkit-transform .2s ease-out;
transition: transform .2s ease-out, opacity .2s linear;
transition: transform .2s ease-out, opacity .2s linear, -webkit-transform .2s ease-out;
}
form .inputGroup1.focusWithText .helper {
-webkit-transform: translate(1em, 1.55em) scale(0.6);
transform: translate(1em, 1.55em) scale(0.6);
opacity: 1;
}
form .inputGroup2 input[type="password"] {
padding: .4em 1em .5em;
}
form .inputGroup2 input[type="text"] {
padding: .025em 1em 0;
}
form .inputGroup2 #showPasswordToggle {
display: block;
padding: 0 0 0 1.45em;
position: absolute;
top: .25em;
right: 0;
font-size: 1em;
}
form .inputGroup2 #showPasswordToggle input {
position: absolute;
z-index: -1;
opacity: 0;
}
form .inputGroup2 #showPasswordToggle .indicator {
position: absolute;
top: 0;
left: 0;
height: .85em;
width: .85em;
border: solid 2px #fff;
border-radius: 3px;
}
form .inputGroup2 #showPasswordToggle .indicator:after {
content: "";
position: absolute;
left: .25em;
top: .025em;
width: .2em;
height: .5em;
border: solid #fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
visibility: hidden;
}
form .inputGroup2 #showPasswordToggle input:checked ~ .indicator:after {
visibility: visible;
}
form .inputGroup2 #showPasswordToggle input:focus ~ .indicator, form .inputGroup2 #showPasswordToggle input:hover ~ .indicator {
border-color: #4eb8dd;
}
form .inputGroup2 #showPasswordToggle input:disabled ~ .indicator {
opacity: .5;
}
form .inputGroup2 #showPasswordToggle input:disabled ~ .indicator:after {
visibility: hidden;
}