@font-face {font-family: 'OpenSansLight';src: url('fonts/opensans-light-webfont.eot');src: url('fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/opensans-light-webfont.woff2') format('woff2'),url('fonts/opensans-light-webfont.woff') format('woff'),url('fonts/opensans-light-webfont.ttf') format('truetype'),url('fonts/opensans-light-webfont.svg#open_sanslight') format('svg');font-weight: normal;font-style: normal; }@font-face {font-family: 'OpenSansRegular';src: url('fonts/opensans-regular-webfont.eot');src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/opensans-regular-webfont.woff2') format('woff2'),url('fonts/opensans-regular-webfont.woff') format('woff'),url('fonts/opensans-regular-webfont.ttf') format('truetype'),url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');font-weight: normal;font-style: normal; }@font-face {font-family: 'OpenSansBold';src: url('fonts/opensans-bold-webfont.eot');src: url('fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/opensans-bold-webfont.woff2') format('woff2'),url('fonts/opensans-bold-webfont.woff') format('woff'),url('fonts/opensans-bold-webfont.ttf') format('truetype'),url('fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');font-weight: normal;font-style: normal; }html, body, main, header, h1, h2, h3, section, input, button, label {margin: 0;padding: 0;border: 0; }html {background: linear-gradient(to bottom, #010101, #284356);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;min-height: 100%; }main {max-width: 400px;position: relative;margin: 0 auto 0 auto;padding: 0 20px 0 20px; }footer {max-width: 400px;position: relative;margin: 10px auto 100px auto;padding: 0 20px 0 20px;color: #cccccc;font-size: 11px;font-family: Open Sans, sans-serif;text-align: right; }@media screen and (max-width: 600px) {footer {margin-bottom: 30px;} }footer button {float: left;background: rgba(255, 255, 255, 0.1);padding: 3px 6px 4px 6px;color: #ffffff;border-radius: 2px;cursor: pointer;margin: -2px 6px 0 0;outline: 0;font-size: 11px; }footer button:hover {background: rgba(255, 255, 255, 0.15); }footer button:active {background: rgba(255, 255, 255, 0.2); }footer .message {float: left; }footer a, footer a:visited {color: #cccccc;text-decoration: underline; }header {position: relative;width: 300px;left: 50%;margin: 150px 0 30px -150px; }@media screen and (max-width: 600px) {header {margin-top: 120px;} }header h1 {text-align: center;color: #ffffff;font-size: 32px;line-height: 32px;font-family: OpenSansLight, Arial, sans-serif;font-weight: normal;margin: 0 0 5px 0; }@media screen and (max-width: 600px) {header h1 {font-size: 28px;line-height: 28px;} }header h2 {text-align: center;color: #ffffff;font-size: 17px;line-height: 17px;font-family: OpenSansLight, Arial, sans-serif;font-weight: normal; }header h3 {position: absolute;top: -35px;left: 50%;margin: -50px 0 0 -35px;width: 70px;height: 70px;background: linear-gradient(to bottom, #48abe5, #068fde);border-radius: 4px;text-align: center;font-size: 32px;line-height: 74px; }@media screen and (max-width: 600px) {header h3 {width: 60px;height: 60px;margin: -40px 0 0 -30px;} }header i {margin: 20px 0 0 0;color: #ffffff; }@media screen and (max-width: 600px) {header i {margin: 15px 0 0 0;} }.password {padding: 20px;background: #ffffff;border-radius: 5px 5px 0 0; }@media screen and (max-width: 600px) {.password {padding: 15px;} }.password input[type=text] {width: 100%;box-sizing: border-box;border-radius: 5px;border: 1px solid #dddddd;padding: 10px 5px 10px 5px;font-family: Courier, serif;font-size: 14px;color: #8d8d8d;background: #ffffff;margin: 0 0 20px 0;outline: 0;transition: box-shadow 150ms, border 150ms; }@media screen and (max-width: 600px) {.password input[type=text] {margin-bottom: 15px;} }.password input[type=text]:focus {border: 1px solid #47aae5;box-shadow: 0 0 0 2px #47aae5; }.buttons button {background: linear-gradient(to bottom, #48abe5, #068fde);color: #ffffff;border: 1px solid #297dc7;box-shadow: 0 1px 0 #d7ddea;width: 100%;font-family: OpenSansBold, Arial, sans-serif;font-weight: normal;font-size: 16px;padding: 6px 0 7px 0;cursor: pointer;text-shadow: 0 1px 0 #297dc7;outline: 0;border-radius: 5px; }.buttons button:active {background: linear-gradient(to top, #48abe5, #068fde); }.buttons button i {font-size: 14px;margin: 0 4px 0 0; }.strength {padding: 0 20px 20px 20px;background: #ffffff; }@media screen and (max-width: 600px) {.strength {padding: 0 15px 15px 15px;} }.strength .bar {border: 1px solid #e6e7eb;border-top: 0;border-radius: 0 0 5px 5px;padding: 2px; }.strength .bar .content {background: #47aae5;height: 3px;border-radius: 3px;transition: width 150ms; }.strength table {width: 100%;border: 1px solid #e6e7eb;border-radius: 5px 5px 0 0;overflow: hidden; }.strength td {position: relative;font-size: 11px;color: #868686;font-family: OpenSansRegular, Arial, sans-serif;font-weight: normal;border-bottom: 1px solid #e6e7eb;padding: 8px 8px 8px 8px; }.strength td:first-child {border-right: 1px solid #e6e7eb; }.strength td:last-child {font-family: OpenSansBold, Arial, sans-serif;font-weight: normal;text-align: right;background: #f1f2f7;width: 15%; }.strength tr:last-child td {border-bottom: 0; }.strength a, .strength a:visited {opacity: 0.3;position: absolute;top: 8px;right: 8px;font-size: 12px;color: #ffffff;background: #a4a4a4;text-decoration: none;transition: opacity 150ms;display: inline-block;width: 18px;height: 18px;text-align: center;font-weight: bold;border-radius: 9px;font-family: OpenSansBold; }.strength a:hover {opacity: 1; }.options {background: #f1f2f7;border-top: 1px solid #e6e7eb;border-radius: 0 0 5px 5px;overflow: hidden; }.options label { position: relative; cursor: pointer; display: block; border-bottom: 1px solid #e6e7eb; padding: 11px 0 12px 0; font-size: 13px; color: #868686; font-family: OpenSansRegular, Arial, sans-serif; font-weight: normal; }@media screen and (max-width: 600px) {.options label {font-size: 11px;} }.options label:last-child {border-bottom: 1px solid #f1f2f7; }.options input[type=text] {width: 24px;box-sizing: border-box;border-radius: 3px;padding: 0 4px 0 4px;font-family: OpenSansRegular, Arial, sans-serif;font-weight: normal;font-size: 13px;color: #8d8d8d;background: #e6e7eb;margin: 0 2px 0 7px;text-align: center; }.options input[type="checkbox"] {outline: 0;position: relative;-webkit-appearance: none;float: left;margin: 1px 8px 0 10px;background: #e6e7eb;border-radius: 3px;width: 18px;height: 18px;cursor: pointer; }@media screen and (max-width: 600px) {.options input[type="checkbox"] {margin-top: -1px;} }.options input[type="checkbox"]:checked:before {position: absolute;content: '✔️';font-size: 11px;color: #209ae1;top: 3px;left: 3px;opacity: 0.5; }.options a, .options a:visited {opacity: 0.3;position: absolute;top: 12px;right: 8px;font-size: 12px;color: #ffffff;background: #a4a4a4;text-decoration: none;transition: opacity 150ms;display: inline-block;width: 18px;height: 18px;text-align: center;font-weight: bold;border-radius: 9px;font-family: OpenSansBold; }.options a:hover {opacity: 1; }