html {height:100%;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body {overflow:hidden;height:100%;width:100%;padding:0;font-family:'Open Sans',sans-serif;background:radial-gradient(50% 65%,#696969 10%,#3c3c3c 80%,#333 100%);margin:0}

.form-wrapper {position:relative;top:50%;transform:translateY(-50%);text-align:center;color:#fff;margin:0 auto}
.form-wrapper .back-title-button {font-size:18px;font-weight:400;color:#f1f1f1;text-shadow:0 2px 4px rgba(0,0,0,.5);user-select:none;cursor:pointer}
.form-wrapper .back-title-button:hover {color:#fff}
.form-wrapper .event-title {font-weight:400;font-size:20px;color:#f1f1f1;text-shadow:0 2px 4px rgba(0,0,0,.5);padding-right:10px;padding-left:10px;user-select:none}
.form-wrapper .event-form {max-width:500px;margin:8px auto auto}

.form-wrapper .event-input {font-size:14px;padding-right:0;padding-left:0}
.form-wrapper .event-input input {width:100%;height:26px;padding:5px 10px;color:#464545;border:1px solid #c1c1c1;border-radius:5px;background:#fafafa}
.form-wrapper .event-input input::-webkit-input-placeholder {opacity:.5;color:#464545}
.form-wrapper .event-input input:-moz-placeholder {opacity:.5;color:#464545}
.form-wrapper .event-input input:-ms-input-placeholder {opacity:.5;color:#464545}
.form-wrapper .event-input input:-moz-placeholder {opacity:.5;color:#464545}

.form-wrapper .event-input-password {height:34px}
.form-wrapper .password-wrapper {display:flex;width:100%;background:#fafafa;border-radius:5px}
.form-wrapper .password-wrapper .field-container {display:flex;justify-content:center;align-items:center;height:36px;padding:0 10px;font-size:16px;color:#464545;border:1px solid #c1c1c1;background:#fafafa}
.form-wrapper .password-wrapper input {width:100%;border-right:none!important;border-radius:5px 0 0 5px}
.form-wrapper .password-wrapper input::-webkit-input-placeholder {opacity:.5;color:#464545}
.form-wrapper .password-wrapper input:-moz-placeholder {opacity:.5;color:#464545}
.form-wrapper .password-wrapper input:-ms-input-placeholder {opacity:.5;color:#464545}
.form-wrapper .password-wrapper input:-moz-placeholder {opacity:.5;color:#464545}
.form-wrapper .password-wrapper .eye {color:#bbb;border-left:none!important;border-radius:0 5px 5px 0;cursor:pointer}
.form-wrapper .password-wrapper .eye:hover {color:#333}

.form-wrapper .event-submit-button {display:flex;justify-content:center;align-items:center;height:34px;color:#f1f1f1;border-radius:5px;background-color:#464545;margin-top:12px;box-shadow:0 2px 4px rgba(0,0,0,.5);user-select:none;cursor:pointer}
.form-wrapper .event-submit-button:hover {background-color:#4e4d4d}
.form-wrapper .event-submit-button:active {color:#e8e8e8;background-color:#3c3b3b}
.form-wrapper .event-submit-button.disabled {color:#c4c4c4;background-color:#4a4a4a;cursor:default}
.form-wrapper .event-submit-button.disabled:hover {background-color:#4a4a4a}
.form-wrapper .event-submit-button .unlock-icon {margin-right:8px}
.form-wrapper .event-hollow-button {height:23px;font-size:14px;color:#f1f1f1;padding-top:3px;border:#f1f1f1 solid 1px;border-radius:5px;margin-top:10px;user-select:none;cursor:pointer}
.form-wrapper .event-hollow-button:hover {background-color:rgba(255,255,255,.1)}
.form-wrapper .event-hollow-button:active {color:#e8e8e8;background-color:rgba(0,0,0,.1)}

.form-wrapper .info-message, .form-wrapper .error-message {display:none;text-align:center;font-size:10px;margin-bottom:5px}
.form-wrapper .info-message {color:#e37070}
.form-wrapper .error-message {color:#fff}

.form-wrapper .button-footer-large {display:none}
.form-wrapper .button-footer-small {display:block;font-size:10px;padding-top:5px}
.form-wrapper .button-footer-small .event-submit-button,
.form-wrapper .button-footer-small .event-hollow-button {height:16px;font-size:10px;padding-top:0;margin-top:5px}
.form-wrapper .button-footer-small .small-text {padding:0;margin-top:5px;cursor:pointer}

@media screen and (min-width:450px) and (min-height:300px) {
    .form-wrapper .back-title-button {font-size:30px}
    .form-wrapper .event-title {font-size:30px}
    .form-wrapper .event-form {padding-top:30px;margin:auto}

    .form-wrapper .event-input {margin-bottom:10px}
    .form-wrapper .event-input input {height:45px;font-size:20px}

    .form-wrapper .password-wrapper .field-container {height:45px;font-size:20px}

    .form-wrapper .event-submit-button {height:43px;font-size:18px}
    .form-wrapper .event-hollow-button {height:33px;font-size:14px}

    .form-wrapper .button-footer-large {display:block}
    .form-wrapper .button-footer-small {display:none}

    .form-wrapper .info-message,
    .form-wrapper .error-message {font-size:14px;margin-bottom:10px}
}