#page-loader {
    position: relative;
    top: 30vh;
    width: 100%;
    text-align: center
}

    #page-loader:focus-visible {
        outline: unset !important;
    }

    #page-loader h1:focus-visible {
        outline: unset !important;
    }

.top-row {
    background-color: #495057 !important;
    border-bottom: 1px solid #495057;
    color: #d7d7d7;
    height: 3.5rem;
}

.brand-name {
    background-color: #000;
    height: 3.5rem;
    min-width: 300px !important;
    padding: 1px;
    line-height: 4;
    display: flex;
    font-size: 20px;
    font-stretch: inherit;
    font-weight: lighter;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
}

.cover {
    font-family: Arial, sans-serif;
    height: calc(100vh - 56px);
    background: url(../images/login_background_volvo.jpg) no-repeat center center fixed;
    background-size: cover;
}

.login-container {
    display: flex;
    justify-content: center;
    height: calc(100vh - 57px);
    /* background-color: rgba(0, 0, 0, 0.5); /* optional for overlay */
}

.login-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 500px;
    height: 300px;
    margin-top: 100px;
}

h3 {
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

    .input-group label {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
        color: #555; /* Softer label color */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Slight shadow for softness */
    }

    .input-group input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        /* Style the input field when focused */
        .input-group input:focus {
            border-color: #4CAF50; /* Change border color when focused */
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Add an outer shadow for focus */
            outline: none; /* Remove default outline */
        }

.login-button {
    margin-top: 20px;
}

    .login-button button {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        border: none;
        border-radius: 4px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Slight shadow for softness */
    }

        .login-button button:hover {
            background-color: #45a049;
        }

        .login-button button:focus {
            border-color: #45a049;
        }

.toast {
    transform: translateX(100%); /* push further out */
    opacity: 0;
    transition: transform 0.4s ease-in-out;
}

    .toast .toast-body span {
        font-size: 100% !important;
    }

    .toast.show {
        transform: translateX(0);
        opacity: 1;
    }