/*
  login-btn
  ----------------------------------
  | --------------                           |
  | | btn-logo   |    btn-label           |
  | --------------                            |
  ----------------------------------
*/

/* Login Button Area */
.login-btn-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 295px;
}

/* Microsoft Login Button */
.microsoft-login-btn {
    background-color: #ffffff;
    border: 1px solid #a7a7a7;
    padding: 1px;
    margin-bottom: 10px;
    width: 100%;
    height: 28px;
    display: flex;
}

/* Microsoft Login Button Hover */
.microsoft-login-btn:hover {
    background-color: rgba(167, 167, 167, 0.56);
    border: 1px solid rgba(167, 167, 167, 0.56);

}

/* Microsoft Login Button Remove Decoration */
.microsoft-login-btn a {
    text-decoration: none;
    width: 100%;
}

/* Microsoft Login Button Logo Area */
.microsoft-btn-logo {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 28px;
    width: 28px;
}

.microsoft-btn-logo img {
    height: 28px;
    width: 28px;
}

/* Microsoft Login Button Label Area */
.microsoft-btn-label {
    color: rgba(95, 95, 106, 0.66);
    margin-top: -1px;
    width: 100%;
    text-align: center;
}

/* Button black in dark mode */
@media (prefers-color-scheme: dark) {
    .microsoft-login-btn {
        background-color: rgb(47, 47, 47);
        border: 1px solid rgb(47, 47, 47);
        padding: 1px;
        margin-bottom: 10px;
        width: 100%;
    }

    /* Microsoft Login Button Hover */
    .microsoft-login-btn:hover {
        background-color: rgba(167, 167, 167, 0.56);
        border: 1px solid rgba(167, 167, 167, 0.56);

    }

    /* Microsoft Login Button Remove Decoration */
    .microsoft-login-btn a {
        text-decoration: none;
    }

    /* Microsoft Login Button Logo Area */
    .microsoft-btn-logo {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    .microsoft-btn-logo img {
        height: 28px;
        width: 28px;
    }

    /* Microsoft Login Button Label Area */
    .microsoft-btn-label {
        color: white;
        margin-top: -1px;
        width: 100%;
        text-align: center;
    }
}