/* TODO: Minify. */

/* Body properties. */
body {
    background-color: #c0c0c0;
}

/* Content that will take up as small width as possible and be placed centrally.
*/
.packed-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 2em 0;
}

/* Content that will take up a maximum width and be placed centrally. */
.content {
    max-width: 29em;
    padding: 2em;
    margin: 0 auto;
}

/*
The Microsoft button follows Microsoft's guidelines.
(https://learn.microsoft.com/en-us/azure/active-directory/develop/howto-add-branding-in-azure-ad-apps#pictogram-and-sign-in-with-microsoft,
retrieved 2022-12-05)
The local button is designed similarly.
*/

/* Common button properties. */
.login-button {
    /* Layout */
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;

    /* Border */
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
    border-color: #8C8C8C;
    
    /* Text */
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #5E5E5E !important;
    text-decoration: none !important;
}

/* The buttons will have a light grey background when the user hovers it. */
.login-button:hover {
    background-color: #EEEEEE;
}

/* The Microsoft button has a bottom margin. */
.login-button-microsoft {
    margin-bottom: 1em;
}

/* The Microsoft logo has a right margin. */
.login-button-microsoft img {
    margin-right: 12px;
}

/* Any button icon has a right margin. */
.btn-icon {
    margin-right: 0.25em;
}

/* A list of errors. */
.error-list {
    color: #dc3545;
}

/* An error will be displayed as regular text and not as a list item. */
.error-list ul {
    list-style-type: none;
    padding-left: 0;
}

/* Cards does not have any border. */
.card {
    border: 0;
}

/* Card titles have very light blue text. */
.card-header {
    color: #E3F0F7;
}

/* Cards headers and primary buttons have dark blue backgrounds. */
.card-header,
.btn-primary,
.btn-primary:hover,
.btn-primary:active, 
.btn-primary:visited {
    background-color: #004379 !important;
    border-color: #004379 !important;
}