/** base.css changes only for Account **/

h3 {
    color: var(--iduid--color--light-gray2);
    font-size: var(--iduid--FontSize--md);
}
/* ==========================================================================
   HEADER
   ========================================================================== */

.iduid-header-nav_account {
    margin-right: calc(var(--iduid--spacer--2xs) + 2px);
}

.iduid-header-nav_account input {
    background-color: transparent;
    color: var(--iduid--color--black);
    font-size: var(--iduid--FontSize--xs);
    padding: var(--iduid--spacer--2xs);
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

/** ACCOUNT MENU **/
.iduid-account-list {
    gap: var(--iduid--spacer--md);
}

/** ACCOUNT DETAILS **/

.iduid-account-close p {
    color: var(--iduid--color--dark-gray);
    font-size: calc(var(--iduid--FontSize--xs) - 2px);
}

.iduid-account-close a {
    color: var(--iduid--color--red);
    font-size: var(--iduid--FontSize--sm);
}

.iduid-account-client-info {
    display: grid;
    justify-content: center;
}

.idjs-clientInfo--hidden {
    display: none;
}

.iduid-account-client-logo-wrapper {
    align-items: center;
    background-color: var(--iduid--color--lighter-gray);
    border-radius: var(--iduid--BorderRadius--sm);
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.17);
    display: grid;
    padding: var(--iduid--spacer--xs);
}

.iduid-account-verification {
    text-align: right;
    font-size: var(--iduid--FontSize--sm);
}

.iduid-main-header-account.iduid-main-header {
    flex-direction: column;

    & > p {
        margin-bottom: var(--iduid--spacer--4xl);
    }
}
/** View for screens larger than 31.25em (= 500px) **/
@media screen and (min-width: 31.25em) {
    .iduid-gray-container {
        margin: 0 0 var(--iduid--spacer--xl);
    }
}

.iduid-account-validation-error {
    color: red;
}