body {
    font-family: "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol", "Helvetica Neue", "BBAlpha Sans", "S60 Sans", Arial, "sans-serif";
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centre {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.login-dialog {
    transition: 0.2s ease all;
    opacity: 1;
    transform: translateX(0);
    transform-origin: center top;
}

.login-dialog.hide {
    opacity: 0;
    transform: translateX(-20px);
}

input[type=text], input[type=password] {
    border: none;
    outline: none;
    border-bottom: 1px solid gray;
    width: 250px;
}

input[type=text]:focus, input[type=password]:focus, input[type=password]:active {
    border-bottom: 1px solid #1976d2;
}

input[type=submit] {
    background: #1976d2;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 5px 15px;
    cursor: pointer;
    outline: none;
    transition: 0.2s ease background;
}

input[type=submit]:disabled {
    background: gray;
    color: #333;
    cursor: default;
}

input[type=submit]:hover:not(:disabled) {
    background: #1184b5;
}

input[type=submit]:focus {
    border: 1px solid #1184b5;
}

.login-dialog div {
    display: flex;
    padding: 10px;
}

.icon {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    fill: currentColor;
}

.dark, .dark input:not(input[type=submit]) {
    background: #282c34;
    color: #ddd;
}