/* TODO: Once we get a feel on how much ends up in this file we can decide if it should be broken up or not. #JoshD */

/* Card */

/* TODO:
 * This is a bit of an anti-pattern:
 *  - Goes against Tailwind utility-first
 *  - Mobile only override
 *
 * Explore alternatives if this usage becomes prevalent? #JoshD
 */
@media screen and (max-width: 1299px) {
    .card-stack > natgen-card:not(:last-child),
    .card-stack > a:not(:last-child) > natgen-card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card-stack > natgen-card + natgen-card,
    .card-stack > a + a > natgen-card {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

/* NavBar */

natgen-nav-bar {
    position: sticky;
    top: 0;
    z-index: 1;
}

    natgen-nav-bar::part(side-bar) {
        padding: calc(var(--space-design-unit) * 10px);
        padding-bottom: 0;
        overflow-y: auto;
    }

/* Phone Select */

natgen-select.phone {
    width: 80px;
    --design-unit: 3;
}

    natgen-select.phone::part(indicator) {
        margin: 4px;
    }

    natgen-select.phone::part(selected-value) {
        text-align: right;
    }

    natgen-select.phone::part(start),
    natgen-select.phone::part(end) {
        display: none;
    }

    natgen-select.phone::part(listbox) {
        width: auto;
    }

/* Footer */
footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Built-In Blazor Component Styles */

.validation-message {
    color: var(--color-error);
}

#blazor-error-ui {
    background: var(--secondary-fill-rest);
    color: var(--foreground-on-secondary-rest);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.smartbanner__button {
    position: absolute;
    top: 32px;
    right: 2rem;
    z-index: 1;
    display: block;
    padding: 0 10px;
    min-width: 10%;
    border-radius: 5px;
    background: #f3f3f3;
    color: #1474fc;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
}

.notifications-count {
    top: -1em;
}

.notifications-count-user-circle {
    /*margin-left: -0.5em;*/
    top: -1em;
}

.notifications-count-notification {
    margin-left: -1em;
    top: -1em;
}

.notification-alert-icon {
    display: inline;
    height: calc(var(--typography-type-ramp-base-font-size) + 4px);
    margin-top: -4px;
}

.ho-phone-type-select {
    width: 230px;
}

.ho-phone-entry {
    width: auto;
}

@media (max-width: 1025px) {
    .ho-phone-type-select {
        width: 105px;
    }
}

@media (max-width: 400px) {
    .ho-phone-entry {
        width: 195px;
    }
}

@media (max-width: 360px) {
    .ho-phone-entry {
        width: 155px;
    }
}

@media (max-width: 320px) {
    .ho-phone-entry {
        width: 145px;
    }
}

/* Encompass Privacy Statement */
.encompass-privacy ul, .encompass-privacy ol {
    padding-left: 2rem;
}

.encompass-privacy ol {
    list-style-type: upper-alpha;
}

.encompass-privacy ul {
    list-style-type: disc;
}

    .encompass-privacy ul ul li {
        list-style-type: circle;
    }

    .encompass-privacy ul .style-type-none {
        list-style-type: none;
    }

.encompass-privacy table {
    text-align: left;
}

.encompass-privacy th {
    background-color: rgb(197, 55, 16);
    color: white;
    padding: 10px;
    font-size: 1.3em;
}

.encompass-privacy td {
    padding: 1em;
    font-size: 1em;
}

    .encompass-privacy td:first-child {
        background-color: rgb(240, 240, 240);
    }