@charset "utf-8";

/*
------------------------
/login.php
------------------------
*/

#login {
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    position: relative;
    top: 50%;
    max-width: 400px;
    margin: -216px auto 0;
    padding: 20px;
    border-radius: 16px;
    -webkit-box-shadow: 0px 0px 5px 1px var(--box-shadow-color);
       -moz-box-shadow: 0px 0px 5px 1px var(--box-shadow-color);
            box-shadow: 0px 0px 5px 1px var(--box-shadow-color);
}

#login.individual {
    margin: -220px auto 0;
}

#login.individual .main {
    border-left: none;
    padding-left: 0;
    margin-bottom: 0
}

#login,
#login form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#login input[type="text"],
#login input[type="email"],
#login input[type="password"] {
    width: 100%;
    font-size: 16px;
}

#login button[type="submit"] {
    width: 100%;
    margin: 26px 0 14px;
}

#login button[type="submit"] span {
    padding: 12px 0;
}

#login .main {
    border-left: solid 2px var(--title-background-color);
    padding-left: 16px;
    margin-bottom: 12px;
}

#login .title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--title-font-color);
    background-color: var(--title-background-color);
    line-height: 1;
    padding: 12px;
    border-radius: 2px;
}

#login .js-common-logout {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: -12px;
    cursor: pointer;
}

#login .small-text {
    line-height: 1.8em;
}

#login .link a {
    display: flex;
    gap: 8px;
}

#login .link a p {
    line-height: 20px;
}

#login .link a img {
    height: 20px;
}


@media only screen and (max-width: 640px) {
    #login input {
        padding: 6px 8px;
    }
}