/* 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;
    }

/* Built-In Blazor Component Styles */

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

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-show #components-reconnect-modal-active,
#components-reconnect-modal.components-reconnect-failed #components-reconnect-modal-failed,
#components-reconnect-modal.components-reconnect-rejected #components-reconnect-modal-failed {
    display: flex;
}

/* Other */

.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;
}

.horizontal-line-with-text {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    gap: 15px; 
}

    .horizontal-line-with-text .line {
        flex-grow: 1;
        border-top: 1px solid #ccc;
    }

    .horizontal-line-with-text .text {
        white-space: nowrap;
        color: #555;
        font-family: sans-serif;
    }


.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);
    }