.hipaa-auth-content {
    display: grid;
    grid-area: text;
    padding-bottom: 20px;
    white-space: pre-wrap;
}

.hipaa-body {
    display: grid;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
     "text"
     "personal"
     "prompt";

    padding-bottom: 10px;
}

.hipaa-personal {
    display: flex;
    flex-flow: row wrap;
    grid-area: personal;
    padding-bottom: 20px;
}

.hipaa-personal-block {
    display: block;
    min-width: 300px;
    padding-bottom: 10px;
}

.hipaa-personal-title {
    font-size: 18px;
}

.hipaa-personal-value {
    font-size: 25px;
}

.hipaa-prompt {
    display: grid;
    grid-area: prompt;
}

.hipaa-consent-view .fullpage-modal-content-buttons button:disabled span {
    opacity: 0.6;
}

.hipaa-consent-view .fullpage-modal-content-buttons {
    padding-top: 20px;
    padding-bottom: 20px;
}

.hipaa-consent-view .fullpage-modal-content-buttons button {
    width: 200px !important;
}

.hipaa-error-view .fullpage-modal-icon {
    margin-left: -6px;
    justify-self: start;
}

/*  Styles unique to the page */
.hipaa-body {
    display: grid;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
     "text"
     "personal"
     "prompt";

    padding-bottom: 10px;
}

/* =============================================================================
    Styles for the HIPAA confirmation screen.
*/
.hipaa-confirm .fullpage-modal-body {
    padding-top: 50px;
}

.hipaa-confirm .fullpage-modal-content {
    padding-left: 20px;
}

.hipaa-confirm .fullpage-modal-content-body {
    padding-bottom: 0px;
}

.hipaa-confirm .fullpage-modal-description {
    padding-top: 50px;
    padding-left: 20px;
}

.hipaa-confirm a {
    text-decoration: none;
    color: var(--primary-button-text);
}


/*  The content width of the default full page modal is 560px. We have set ours
    to 480px. We need to enforce that with a more specific rule. However, the
    two extra grid columns outside the main content, which are used to center
    it, are removed when the screen size is within 32px of that width. The extra
    32px is to accomodate the 16px padding on either side. By default, this
    would happen at 592px. For us that is 512px. We will define the column width
    rule only until we want to remove those columns at the smaller size. At that
    point, the width is whatever space is available. */
@media only screen and (min-width: 513px) {
    .hipaa-confirm.fullpage-modal {
        grid-template-columns: auto 480px auto;
    }
}