/*
   Public pages (_MainLayout): login, registration, invitation, password reset, confirmations and the error pages.
*/

.login { max-width: 330px; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 2px; border: 1px solid #D0D0D0; box-shadow: 0 0 20px 5px rgba(0,0,0,0.05); }
.login-img { margin: 0 auto; text-align: center; padding: 20px 0 0 0; }
.login-img .brand { font-size: 28px; font-weight: bold; color: var(--color); margin: 0; }
.login h1 { font-size: 17px; text-align: center; margin: 0; padding: 15px 0; }
.login button { background: var(--color); border: 1px solid rgba(0,0,0,0.2); width: 100%; color: white; height: 32px; font-weight: bold; border-radius: 3px; text-transform: uppercase; font-size: 13px; cursor: pointer; }
.login button i { margin-right: 5px; }
.login button:hover { opacity: 0.7; }
.login button:disabled { opacity: 1; color: gray; background: #dcdcdc; border-color: #dcdcdc; cursor: not-allowed; }
.login a.button { display: block; text-align: center; line-height: 30px; text-decoration: none; }
.login hr { border-color: #d7d7d7; }
.login a { color: var(--color); cursor: pointer; }
.login .padding p { text-align: center; margin: 0 0 20px; }
.login .padding h2 { text-align: center; margin: 0 0 10px; }

/* the panels of the login page: one is shown at a time */
.auth-panel-inactive { display: none; }
.auth-links { display: flex; justify-content: space-between; padding: 0 20px 15px; font-size: 12px; }

/* error and forbidden page */
.error { color: #333; text-align: center; padding: 50px 10px 10px 10px; }
.error .name { font-size: 50px; font-weight: bold; }
.error .message { font-size: 14px; }

.ui-dark .login { background-color: #202020; border-color: #353535; box-shadow: 0 0 20px 5px rgba(0,0,0,0.3); }
.ui-dark .login button:disabled { color: #666; background: #303030; border-color: #303030; }
.ui-dark .login hr { border-color: #353535; }
.ui-dark .error { color: #E0E0E0; }