body {
    font-family: 'Nunito Sans';
    -webkit-tap-highlight-color: transparent;
}

#app {
    background: var(--connect-colors-gutters);
}

/*#layout {*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    position: fixed;*/
/*    box-shadow: 0px 11px 15px -7px rgba(0,0,0,.2),0px 24px 38px 3px rgba(0,0,0,.14),0px 9px 46px 8px rgba(0,0,0,.12);*/
/*}*/

.background-gutter {
    background: var(--connect-colors-gutters);
}

.layout-container {
    height: 100dvh;
    max-width: var(--connect-max-width) !important;
    margin: 0 auto;
    position: relative;
    padding: 0 !important;
}

:focus {
    outline: none;
}

.disable-select {
    user-select: none !important; /* supported by Chrome and Opera */
    -webkit-user-select: none !important; /* Safari */
    -khtml-user-select: none !important; /* Konqueror HTML */
    -moz-user-select: none !important; /* Firefox */
    -ms-user-select: none !important; /* Internet Explorer/Edge */
}

.dialog-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    transform: translateY(100%);
    animation: dialog-drawer-transition ease-in forwards 0.4s !important;
    -webkit-animation: dialog-drawer-transition ease-in forwards 0.2s !important;
}

.header-button {
    background: var(--connect-colors-menu-background) !important;
    color: var(--connect-colors-mid-emphasis) !important;
    min-height: 32px !important;
    min-width: 32px !important;
    box-shadow: 0 3px 8px -4px var(--connect-colors-black) !important;
}

    .header-button .mud-icon-button-label {
        color: var(--connect-colors-mid-emphasis) !important;
    }

.prewrap-text {
    white-space: pre-wrap;
}

@keyframes dialog-drawer-transition {
    0% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.dialog-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.dialog-content {
    height: 100%;
    margin: 8px;
}

.scrollable-dialog-content {
    height: calc(100dvh - 68px);
    padding: 0 !important;
}

.floating-dialog {
    max-height: 99vh !important;
    width: 90vw;
    max-width: 500px !important;
    overflow: hidden;
}

.menu-background {
    background: var(--mud-palette-drawer-background) !important;
}

.app-background {
    background: var(--connect-colors-app-background);
}

.menu-background-80 {
    background: var(--mud-palette-drawer-background) !important; /*TODO - FIGURE OUT OPACITY*/
}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.center-horizontal {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll {
    max-width: 100%;
    overflow-x: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.mdi {
    display: flex !important;
    align-items: center;
    justify-content: center;
}


.core-card {
    height: 644px;
    max-width: 400px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    margin: 0 auto
}

.core-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.clickable {
    cursor: pointer;
}

.disabled {
    cursor: default;
}

.outlined-card {
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-drawer-background);
    border-radius: var(--connect-border-radius-large) !important;
}

.connect-border-radius {
    border-radius: var(--connect-border-radius) !important;
}

.app-background {
    background: var(--connect-colors-app-background);
}

.outlined {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--connect-border-radius-large) !important;
}
.outlined-drawer {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--connect-border-radius-large) var(--connect-border-radius-large) 0px 0px !important;
}

.tutorial-active-item {
    z-index: 9999; /* Probably overkill, but better safe than sorry */
}

::deep.skeleton {
    background-color: var(--mud-palette-secondary);
}

::deep.skeleton::after {
    background: linear-gradient(90deg,var(--mud-palette-info),rgba(0,0,0,.04),var(--mud-palette-info));
}

/*needed for google symbols icon library*/

.symbols-filled {
    font-variation-settings: 'FILL' 1;
}

.symbols-home::before {
    content: "location_home";
}

.symbols-sms::before {
    content: "sms";
}

.symbols-settings::before {
    content: "settings";
}

.symbols-apartment::before {
    content: "apartment";
}

.symbols-arrow-left::before {
    content: "arrow_circle_left";
}

.symbols-arrow-right::before {
    content: "arrow_circle_right";
}

.symbols-where-to-vote::before {
    content: "where_to_vote";
}

.symbols-celebration::before {
    content: "celebration";
}

.symbols-archive::before {
    content: "archive";
}

.symbols-unarchive::before {
    content: "unarchive";
}

.symbols-groups::before {
    content: "groups";
}

.symbols-forum::before {
    content: "forum";
}

.symbols-chat::before {
    content: "chat";
}

.symbols-home::before {
    content: "location_home";
}

.symbols-cheer::before {
    content: "cheer";
}

.progress-bar {
    max-width:1200px;
    margin: 0 auto;
}

.progress-bar-parent {
    width:100%;
    max-width: 600px;
}
.hover-pointer{
    cursor:pointer !important;
}
.hover-default {
    cursor: default !important;
}

.connect-separator {
    display: flex;
    align-items: center;
    text-align: center;
}

    .connect-separator::before,
    .connect-separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--connect-colors-border);
    }

    .connect-separator:not(:empty)::before {
        margin-right: 1.25em;
    }

    .connect-separator:not(:empty)::after {
        margin-left: 1.25em;
    }

.profile-button-chips {
    color: var(--connect-colors-mid-emphasis) !important;
    border-color: var(--connect-colors-mid-emphasis) !important;
    font-weight: 700;
    background-color: var(--connect-colors-app-background);
}
.profile-button-chips-red {
    color: var(--connect-colors-alert) !important;
    border-color: var(--connect-colors-alert) !important;
    font-weight: 700;
    background-color: var(--connect-colors-app-background);
}

.text-underline {
    text-decoration: underline;
}
.white-space-pre-wrap{
    white-space:pre-wrap;
}

.message-render-text a {
    user-select: auto;
    word-break: break-all;
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.auth-animate-in {
    animation: authanimation 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.core-card-base {
    max-width: 384px !important;
    position: relative;
}

.core-card-override {
    border-radius: var(--connect-border-radius-large) !important;
    background: var(--connect-colors-accent) !important;
    max-width: 384px !important;
}

.core-card-override-supplementary {
    border-radius: var(--connect-border-radius) !important;
    background: var(--connect-colors-accent) !important;
    max-width: 384px !important;
} 

.disable-outline {
    border: 1px solid transparent !important;
}

@keyframes authanimation {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.wrap-anywhere {
    word-break: break-all;
}