/* UA login side panel (copy of the RU panel from /dkl-new/menulog + dkl/new2.css). Used by global block NEWHEAD, guests only. */
.site-overlay2 { display: none; }
.pushy-active2 .site-overlay2 { display: block; position: fixed; inset: 0; z-index: 999; background-color: rgba(0,0,0,.5); }
body.pushy-active2 { overflow: hidden; }
.pushy-active2 .navbar-mobile_n { display: none !important; }
.pushy-right.pushy-open { right: 0; transform: none; }
.user-side { font-family: "Avenir Next", sans-serif; top: 0; height: 100%; background: #2b2e31; transition: .3s; position: fixed; width: 540px; max-width: 94%; right: -500%; z-index: 1000; padding: 5%; text-align: center; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
.user-side .close { display: inline-block; top: 30px; right: 30px; width: 34px; height: 34px; overflow: hidden; position: absolute; opacity: 1; cursor: pointer; float: none; }
.user-side .close:hover::before, .user-side .close:hover::after { background: #fff; }
.user-side .close::before, .user-side .close::after { content: ""; position: absolute; height: 1px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #d0d0d1; }
.user-side .close::before { transform: rotate(45deg); }
.user-side .close::after { transform: rotate(-45deg); }
.user-side .login-form { margin-bottom: 45px; }
.user-side .login-form label { display: none; }
.user-side .login-form .form-group { margin-bottom: 30px; }
.user-side .login-form input { transition: .2s; height: 72px; background-color: #8c908b; border-radius: 30px; border: none; color: #fff; padding-left: 35px; line-height: 72px; font-size: 25px; font-weight: 200; }
.user-side .login-form input:focus { background-color: #999c98; }
.user-side .login-form input::-webkit-input-placeholder { color: #b6b7b6; }
.user-side .login-form button { transition: .2s; background-color: #6caf24; height: 75px; display: block; font-size: 25px; font-weight: 200; color: #fff; width: 100%; text-align: center; border: none; border-radius: 30px; }
.user-side .login-form button:hover { background-color: #79c428; }
.user-side .uid-login p { color: #bbbbbc; margin-bottom: 35px; font-size: 20px !important; }
@media (max-height: 568px) {
  .user-side { padding: 6% 5% 4%; width: 450px; overflow: auto; }
  .user-side .login-form input, .user-side .login-form button { font-size: 18px !important; }
  .user-side .login-form { margin-bottom: 30px; }
  .user-side .login-form input { height: 48px; line-height: 48px; border-radius: 20px; }
}
@media (min-height: 568px) {
  .user-side { padding: 6% 5% 4%; width: 450px; }
  .user-side .login-form input, .user-side .login-form button { font-size: 18px !important; }
  .user-side .login-form { margin-bottom: 30px; }
  .user-side .login-form input { height: 48px; line-height: 48px; border-radius: 20px; }
}
@media (min-height: 640px) {
  .user-side { width: 450px; padding: 6% 5% 4%; }
}
@media (min-height: 740px) {
  .user-side { width: 540px; max-width: 94%; padding: 6% 5% 5%; }
  .user-side .login-form input { font-size: 20px !important; height: 72px; padding-left: 35px; line-height: 72px; border-radius: 30px; }
  .user-side .login-form { margin-bottom: 45px; }
}
@media (max-height: 800px) {
  .user-side .uid-login .uid-btn { height: 55px; padding-left: 55px; line-height: 55px; max-width: 300px; }
}
@media (max-width: 550px) {
  .user-side { width: 94%; padding: 30px; }
}
@media (max-width: 825px) {
  .user-side { padding: 12px !important; }
}
@media (max-width: 1200px) {
  .user-side { padding-top: 72px !important; }
}
.user-side { padding: 5% 50px; }
.log-form p a { color: #4584eb; text-decoration: underline; }
.log-form p a:hover { text-decoration: none; }
.log-form .fast-reg { margin-bottom: 5vh; }
.log-form h3 { color: #f6f6f6; font-size: 19pt; margin-bottom: 50px; margin-top: 20px; }
.log-form p { color: #fff; font-size: 12pt !important; }
.log-form .uid-login .uid-btn { margin: 5vh auto; border: 5px solid #ea2127 !important; background: transparent; padding-left: 0; color: #fff; height: 61px; line-height: 51px; width: 255px; font-weight: 500; border-radius: 72px; display: block; font-size: 16pt; text-decoration: none; transition: .5s; }
.log-form .uid-login .uid-btn:hover { background: red !important; color: #fff !important; text-decoration: none !important; }
.user-side { padding-bottom: 0 !important; }
@media (max-width: 700px) {
  .log-form img { width: 70px; height: auto; }
  .log-form h3 { margin-bottom: 0 !important; }
}
/* login form box (from RU dkl/new2.css) */
.dkl_login_form { color: #fff; padding: 25px; border-radius: 9px; font-size: 18px; border: 1px solid #3f4143; }
.dkl_login_form a { color: #fff !important; }
/* UA $LOGIN_FORM$ is table based: make it look like the RU one */
.dkl_login_form table { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin: 0; }
.dkl_login_form td { color: #fff; padding: 0; font-size: 18px; text-align: left; background: transparent; border: 0; }
.dkl_login_form .login-form-label { width: 80px; white-space: nowrap; padding-right: 6px; color: #fff; font-size: 18px; font-weight: 400; }
.dkl_login_form .login-form-val input, .dkl_login_form input.loginField { width: 100% !important; box-sizing: border-box; font-size: 18px !important; }
.dkl_login_form td[nowrap]:not(.login-form-label) { color: gray; font-size: 15px; }
.dkl_login_form td[nowrap] label { display: inline !important; font-size: 15px; font-weight: 400; margin-left: 5px; color: gray; position: relative; top: 2px; }
.dkl_login_form input[type="submit"], .dkl_login_form .loginButton { cursor: pointer; font-size: 18px !important; padding: 0 30px !important; color: #fff; width: auto; }
.dkl_login_form .login-form-links { font-size: 14px; padding-top: 10px; color: #fff; }
.dkl_login_form .login-form-links div { text-align: center; }
.dkl_login_form .captcha-block { justify-content: flex-start; }
.dkl_login_form .captcha-answer, .dkl_login_form .captcha-block input { height: 36px !important; line-height: 36px !important; width: 90px !important; padding: 4px !important; border-radius: 6px !important; font-size: 16px !important; text-align: center; }
.dkl_login_form .social-label { color: #bbbbbc; }
.dkl_login_form .auth-social-list { padding-top: 4px; }
/* inputs of $LOGIN_FORM$ (on phones uCoz gives a plain form without the .login-form class, so do not depend on it) */
.user-side .dkl_login_form input[type="text"], .user-side .dkl_login_form input[type="password"], .user-side .dkl_login_form input[type="submit"] { transition: .2s; box-sizing: border-box; height: 48px; line-height: 48px; background-color: #8c908b; border: none; border-radius: 20px; color: #fff; padding: 0 20px; font-size: 18px !important; font-weight: 200; outline: none; }
.user-side .dkl_login_form input[type="text"]:focus, .user-side .dkl_login_form input[type="password"]:focus { background-color: #999c98; }
.user-side .dkl_login_form input[type="submit"]:hover { background-color: #999c98; }
@media (min-height: 740px) and (min-width: 551px) { .user-side .dkl_login_form input[type="text"], .user-side .dkl_login_form input[type="password"], .user-side .dkl_login_form input[type="submit"] { height: 72px; line-height: 72px; border-radius: 30px; font-size: 20px !important; padding: 0 35px; } }
/* UA login block: show the plain e-mail/password form first (like RU), hide the uID button block (the same social icons are inside the form) */
#ua-login-panel #uidLogButton { display: none !important; }
#ua-login-panel #baseLogForm { display: block !important; }
@media print { section#ua-login-panel { display: none !important; } }
