/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

body {
    background-color: #1A1A1A;
    color: #FFFFFF;
    min-width: 260px;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}
div#content {
    background-image: url("/data/media/img/panel_bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

div#signup_form {
    background-color: #262626;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 631.54px;
    padding: 16px;
    border: 2px solid #262626;
    border-radius: 2px;
    transition: width 0.2s ease, height 0.2s ease;
}
div#signup_form div {
    display: inline-block;
    width: 100%;
    height: auto;
}
div#signup_form h3 {
    text-align: center;
}
div#signup_form h3 a {
    display: inline-flex;
    justify-content: center;
    margin: auto;
}
div#signup_form h3 a img {
    width: 200px;
    padding: 8px;
}
div#signup_form h3 p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    font-family: 'Roboto Mono', monospace;
    text-transform: uppercase;
}
div#signup_form form {
    text-align: left;
    margin: 0;
}
div#signup_form form hr {
    background: #444444;
    border: 2px solid #444444;
    border-radius: 2px;
}
div#signup_form form label {
    user-select: none;
}
div#signup_form form input.input {
    background: #444444;
    color: #A5A5A5;
    border: 2px solid #444444;
    border-radius: 2px;
    margin: 2px 0px 2px 0px;
    padding: 4px;
    width: 100%;
}
div#signup_form form input[type="submit"]#signup {
    background: #0fa1db;
    color: #FFFFFF;
    height: 32px;
    border: 2px solid #0fa1db;
    margin: 4px 0px 4px 0px;
    width: 100%;
    cursor: pointer;
    transition: 0.2s background ease;
}
div#signup_form form input[type="submit"]#signup:hover {
    background: #058ec4;
    color: #FFFFFF;
    border: 2px solid #058ec4;
}
container {
    display: block;
    padding: 4px 0px 4px 0px;
}
container container {
    padding: 0;
}
container[content="email_password"] {
    padding: 8px 0px 8px 0px;
}
/* container[content="submit"] {
    padding: 16px 0px 0px 0px;
} */
container[content="dologin"] button#login {
    background: #36ce4a;
    height: 32px;
    color: #FFFFFF;
    border: 2px solid #36ce4a;
    border-radius: 2px;
    margin: 4px 0px 8px 0px;
    width: 100%;
    cursor: pointer;
    user-select: none;
    transition: 0.2s background ease;
}
container[content="dologin"] button#login:hover {
    background: #21a733;
    color: #FFFFFF;
    border: 2px solid #21a733;
}

#login {
    background: #36ce4a;
    height: 32px;
    color: #FFFFFF;
    border: 2px solid #36ce4a;
    border-radius: 2px;
    margin: 4px 0px 8px 0px;
    width: 100%;
    cursor: pointer;
    user-select: none;
    transition: 0.2s background ease;
}
#login:hover {
    background: #21a733;
    color: #FFFFFF;
    border: 2px solid #21a733;
}

message {
    display: flex;
    width: 100%;
    height: 16px;
    font-size: 14px;
    padding: 4px 0px 4px 0px;
    justify-content: center;
    align-items: center;
}
message span.success {
    color: #36ce4a;
}
message a:link {
    color: #0fadf7;
    font-weight: 900;
    text-decoration: underline;
    transition: 0.2s color ease;
}
message a:visited {
    color: #0fadf7;
}
message a:hover {
    color: #0e98d8;
}
hint {
    display: inline-block;
    color: #d80000;
    width: 100%;
    font-size: 14px;
    font-weight: 900;
    padding: 6px 0px 6px 0px;
}

div.toggle-password {
    width: 100%;
    padding: 4px 0px;
}
input[name="toggle-password"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 2px 0px 2px 0px;
    cursor: pointer;
}
label.toggle-password_label {
    display: inline-block;
    position: absolute;
    margin: 0px 0px 0px 4px;
    font-size: 12px;
}

br {
    user-select: none;
}

@media only screen and (max-width: 460px) {
    div#signup_form {
        width: 100%;
        height: 100%;
        padding: 0px 16px 0px 16px;
        border: 0px solid #262626;
        box-shadow: none;
    }
}