.register-container { border: 1px solid #707070; width: 400px; margin: auto; padding: 18px; } .register-container h2.title { color: #f2a1b2; text-align: center; font-size: 24px; font-weight: bold; padding: 0; margin: 0; } .register-container p.after { text-align: center; line-height: 18px; margin-top: 15px; } .register-container form.register-form { width: 80%; margin: auto; } .register-container label.already_member { text-align: center; margin: auto; display: block; } .register-container div.already-member { display: none; } .register-container .input-field { margin: 20px 0; } .register-container .input-field label { font-size: 13px; display: block; font-weight: bold; margin: 0; color: #707070; } .register-container .input-field.checkbox label { font-size: 18px; font-weight: normal; color: #000; } .register-container .input-field label.pink { color: #f2a1b2; } .register-container .input-field input[type=text], .register-container .input-field input[type=password]{ border: 0; border-bottom: 1px solid black; width: 100%; } .register-container .register-button { background-color: #303030; color: white; width: 100%; font-weight: bold; text-align: center; display: block; padding: 5px 0; } .register-container .clear-button { border: 1px solid #f2a1b2; color: #f2a1b2; width: 100%; font-weight: bold; text-align: center; display: block; padding: 5px 0; } .register-container div.sms-code { display: none; } .register-container .input-field.invalid input[type=text] { border-bottom: 1px solid #f2a1b2; } .register-container .input-field.invalid::after { content: attr(data-error); font-size: 14px; font-weight: bold; display: block; color: #f2a1b2; } .register-container input[type=checkbox] { -webkit-appearance: none; } .register-container input[type=checkbox]::after { content: ' '; display: block; background-image: url('../images/checkbox_empty.png'); width: 15px; height: 15px; } .register-container input[type=checkbox]:checked::after { background-image: url('../images/checkbox_full.png'); } .register-container .input-field.invalid input[type=checkbox]::after { background-image: url('../images/checkbox_error.png'); } .register-container .input-field.invalid input[type=checkbox]:checked::after { background-image: url('../images/checkbox_full.png'); } .pink-link { border: 1px solid #707070; width: 470px; margin: 40px auto; padding: 18px; display: block; text-align: center; color: #f2a1b2; font-size: 24px; font-weight: bold; } .pink-link span { display: block; font-size: 18px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-align: center; color: #303030 } .guest-button { width: 400px; max-width: calc(100% - 80px); margin: 40px auto; text-align: center; } .guest-button a, .guest-button span { display: block; } .guest-button a { font-size: 24px; font-weight: bold; color: #303030; text-decoration: underline; } .server-error a { margin-right: 10px; text-decoration: underline; } @media screen and (max-width: 768px) { .register-container { width: 100%; margin: auto; } .pink-link { margin: 40px auto; max-width: 100%; } }