* {
    font-family: "Poppins", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-attachment: fixed;
    margin: 0;
}

.centered {
    margin: auto;
    max-width: 30rem;
    text-align: center;
}

.content {
    letter-spacing: .04rem;
    position: relative;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 0;
    color: rgb(22,64,158);    
}

h2 {
    font-size: 1rem;
    margin-bottom: 1.7rem;
    margin-top: 0;
}

h3 {
    font-size: .9rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

p {
    margin: 0;
}

button {
    color: black;
}

input {
    font-size: 1rem;
    color: black;
}

textarea {
    letter-spacing: .05rem;
    font-size: 1rem;
}

li {
    font-size: 1rem;
    margin-bottom: 1rem;
}

select {
    font-size: 1rem;
    color: black;
}

.link-btn,.remove-btn {
    font-size: 1rem;
    padding: .3rem .7rem;
    text-align: left;
    border-radius: .3rem;
    color: white;
    background-color: #3a4c99;
    text-decoration: none;
    border: transparent solid .1rem;
    text-align: center;
}
.remove-btn {
    background-color: rgb(185, 63, 63);
}

.link {
    font-size: inherit;
    background-color: transparent;
    color: blue;
    text-decoration: underline;
    border-style: none;
    padding: 0rem;
}
.link:hover {
    cursor: pointer;
}

.link-btn:hover {
    background-color: #6171b4;
    cursor: pointer;
}

.link-btn-inverse {
    color: #3a4c99;
    background-color: transparent;
    border: #3a4c99 solid .1rem;
}
.link-btn-inverse:hover {
    background-color: #cecdcd;
}

.remove-btn {
    background-color: rgb(185, 63, 63);
}
.remove-btn:hover {
    background-color: rgb(192, 111, 111);
    cursor: pointer;
}
.link-btn:disabled,.remove-btn:disabled {
    border: gray solid .1rem;
    color: gray;
    background-color: transparent;
    cursor: unset;
}

.hide {
    display: none !important;
}

.error-section {
    color: rgb(192, 35, 35);
    margin-bottom: .5rem;
}

.page-status-container {
    margin: 2rem;
}

.spinner {
    animation: rotate 1.5s linear infinite;
    border: .2rem solid #eadbfc;
    border-top: .2rem solid #3a4c99;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
  }

@keyframes rotate {
    from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@-ms-keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}




.page-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .2rem;
    height: 4.5rem;
    padding-right: 2.5rem;
}

.down-arrow {
    display: inline-block;
    margin-left: .35rem;
    border-top: .35rem solid;
    border-right: .35rem solid transparent;
    border-left: .35rem solid transparent;
    vertical-align: middle;
}

.cancel-btn {
    border-radius: .5rem;
}
.cancel-btn:hover {
    cursor: pointer;
    background-color: #c2c1c1;
}
.cancel-img {
    width: .5rem;
    height: .5rem;
    padding: .25rem;
}

.user-heading {
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: .05rem;
    line-height: 1.6rem;
    color: rgb(22,64,158);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-heading-btn {
    display: flex;
    align-items: center;
    max-width: 75vw;
    border: none;
    border-radius: .5rem;
    box-shadow: none;
    background-color: transparent;
    font-size: 1rem;
}
.user-heading-btn:hover {
    cursor: pointer;
    background-color: #d9d9d9;
}

.user-greeting {
    margin-right: .35rem;
}
.user-name {
    text-transform: uppercase;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}

.top-nav {
    position: absolute;
    top: 3.65rem;
    right: 0;
    z-index: 10;
    padding: .5rem .5rem 1rem .5rem;
    background-color: white;
    border-radius: .5rem;

    display: none;
}
.top-nav-expanded {
    display: inline-flex;
    flex-direction: column;
}

.nav-link {
    margin: .5rem 1rem;
    color: #3a4c99;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.nav-link:visited {
    color: #3a4c99;
}
.nav-link:hover {
    color: rgb(122, 122, 122);
}
.nav-link-img {
    width: 1.25rem;
    margin-right: .5rem;
}
span.nav-link {
    text-align: center;
    display: inline-block;
}

.update-session-link {
    text-decoration: none;
    color: inherit;
}

.page-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;

    height: calc(100vh - 4.5rem);
    height: var(--content-height);
    background-color: #ededed;

    display: -ms-grid;
    -ms-grid-columns: auto 1fr;

    min-height: 46rem;
}

:root {
    --sidebar-width: 17rem;
    --header-height: 4.5rem;
    --content-height: calc(100vh - var(--header-height));
}

.branding-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #1670B6, #4765BF);
    font-size: 1rem;
}
.brand-logo {
    height: 3.125rem;
}

.branding-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1rem;

    min-width: 13.5rem;
    min-width: var(--sidebar-width);
    height: 4.5rem;
    height: var(--header-height);
}

.home-branding-container {
    flex-grow: 1;
    text-align: center;
    color: rgb(22,64,158);

    display: flex;
    align-items: center;
    gap: 1rem;
}


.product-branding {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1rem;
    color: rgb(22,64,158);
}

.home-logo-container {
    margin-left: 1rem;
}
.home-logo {
    height: 3.5rem;
}
.home-name {
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
    margin: 1rem 1rem 1rem 2.5rem;
}

.page-header-small .home-name {
    font-size: 1rem;
}
.page-header-small .user-heading-btn {
    font-size: .85rem;
}

.user-info-container {
    padding-bottom: 1rem;
}

.resident-name-container {
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.1rem;

    width: 13.5rem;
    width: var(--sidebar-width);
}
.resident-name-container p {
    font-weight: 600;
}

.user-pic-container {
    max-width: 10rem;
    max-height: 10rem;
    padding-bottom: 1rem;
    margin: auto;
}

.user-picture {
    width: 10rem;
    height: 10rem;
    background-color: white;
    clip-path: circle(50%);
}

.nav-container-vertical {
    background: linear-gradient(to right, #1670B6, #4765BF);

    -ms-grid-row: 1;
    -ms-grid-column: 1;

    width: 13.5rem;
    width: var(--sidebar-width);
}

.nav-sticky {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}

.nav-vertical {
    margin-top: .75rem;
    padding: .5rem 0 1rem 0;
}

.nav-drawer-item {
    margin-bottom: .25rem;
    text-align: center;
}

.nav-drawer-link {
    display: flex;
    align-items: center;
    font-size: 1rem;
    padding: 0.3rem;
    color: white;
    text-decoration: none;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    border-radius: 0.5rem;
}

.nav-drawer-link > div {
    position: relative;
}

.nav-drawer-img {
    padding: 0 .75rem;

}
.nav-drawer-img > img {
    width: 2rem;
    height: 2rem;
    padding: .25rem;
}

.nav-home-name {
    font-weight: 200 !important;
    text-transform: none;
    font-size: 0.9rem;
    padding-top: 0.25rem;
}
.staff-home-name {
    letter-spacing: .1rem;
    font-size: 1.1rem;
    padding-top: 0.25rem;
    color: white;
    width: var(--sidebar-width);
    text-align: center;
}


@media(hover: hover) and (pointer: fine) {
    .nav-drawer-link:hover {
        background: linear-gradient(to right, white, #ededed);
        color: #2766ae;
        overflow: hidden;
    }
    .nav-drawer-link:hover .img-inactive {
        display: none;
    }
    .nav-drawer-link:hover .img-active {
        display: unset;
    }
}

.nav-drawer-link-selected {
    background: linear-gradient(to right, white, #ededed);
    color: #2766ae;
}
.nav-drawer-img > .img-active {
    display: none;
}
.nav-drawer-link-selected .img-inactive {
    display: none;
}
.nav-drawer-link-selected .img-active {
    display: unset;
}

.horiz-nav-link-content {
    position: relative;
    display: inline-block;
}

.nav-link-badge {
    position: absolute;
    top: 0;
    right: -.3rem;
    width: .35rem;
    height: .35rem;
    background-color: red;
    border-radius: .5rem;
}

.nav-drawer-link-caption {
    display: block;
    font-size: .65rem;
}

.nav-drawer-item-count {
    font-size: .85rem;
}


.main-content-container {
    padding-top: 1rem;
    background-color: #f3f6fb;
    border-radius: .5rem;
    border-top-left-radius: 0;
    min-width: 0;

    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.main-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}
.page-content-section {
    padding: 0 .5rem;
}

.horiz-nav-container {
    text-align: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(to left, #1670B6, #4765BF);
    border-radius: .5rem;
}

.horiz-nav-bar {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: -.01rem;
}

.horiz-nav-item {
    position: relative;
    padding: 0 .5rem;
    text-align: center;
}

.horiz-nav-link {
    position: relative;
    bottom: 0;
    display: inline-block;
    padding: .5rem 2rem;
    margin-top: .25rem;
    text-align: left;
    color: white;
    text-decoration: none;
}
.horiz-nav-link-compact {
    padding: .5rem 1.25rem;
    font-size: .85rem;
}

.horiz-nav-link > .horiz-nav-link-content {
    position: relative;
}

@media(hover: hover) and (pointer: fine) {
    .horiz-nav-link:hover {
        background-color: #f3f6fb;
        color: #3a4c99;
        clip-path: url("#curved-tab");
    }
}

.horiz-nav-link-selected {
    background-color: #f3f6fb;
    color: #3a4c99;
    clip-path: url("#curved-tab");
}

.horiz-nav-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: none;
}

.error {
    color: red;
    font-weight: bold;
}

.success {
    color: rgb(18, 110, 25);
}

.success-section p,
.success-section {
    color: rgb(18, 110, 25);
}

.autosuggest-container {
    position: relative;
    flex-grow: 1;
}
.autosuggest-inline {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    flex-basis: 0;
}
.autosuggest-input {
    width: 100%;
}

.autosuggest-results {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: white;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.autosuggest-item, .autosuggest-loading-item {
    width: 100%;
    display: inline-block;
    padding: .25rem;
    border-bottom: 1px solid black;
    border-top-width: 0;
}

.autosuggest-item-selected {
    background-color: lightblue;
}

.autosuggest-item:hover {
    background-color: lightgray;
    cursor: pointer;
}

.autosuggest-chosen-item {
    border: 1px solid #3a4c99;
    border-radius: .5rem;
    padding: .15rem .25rem;
    word-break: break-word;
}
.autosuggest-chosen-item-multi {
    margin: 0 .25rem .25rem 0;
    display: inline-block;
}
.autosuggest-item-clickable {
    cursor: pointer;
}
.resident-select-expand {
    position: absolute;
    background-color: white;
    padding: .5rem;
    border-radius: .75rem;
    box-shadow: 0px 4px 7px #bbb;
}
.resident-select-expand > button {
    font-size: .6rem;
    margin: 0 .25rem;
}


.autosuggest-chosen-item-remove {
    border: none;
    background: transparent;
    padding: 0 0 0 .5rem;
}

.autosuggest-chosen-item-remove:hover {
    cursor: pointer;
}

.back-arrow-btn::before {
    display: inline-block;
    margin-right: .35rem;
    border-right: .35rem solid;
    border-top: .35rem solid transparent;
    border-bottom: .35rem solid transparent;
    content: '';
}

.obscure {
    background-color: black;
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.modal-content {
    text-align: center;
    width: 60%;
    max-width: 35rem;
    min-width: 15rem;
    margin: 0 auto;
    background: white;
    padding: 1rem;
    position: relative;
    top: 30%;
    z-index: 1;
    max-height: 80vh;
    overflow-y: auto;
}

.back-btn-container {
    flex: 0 0 auto;
    position: absolute;
    left: 1rem;
}

.header-container {
    position: relative;
    justify-content: center;
    display: flex;
    min-height: 1rem;
    margin-top: 0.5rem;
}

.header-title-container {
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center; 
  }

@media all and (max-width: 1000px) {
    .horiz-nav-link {
        padding: .5rem 1.25rem;
        font-size: .85rem;
    }
    .horiz-nav-link-compact {
        padding: .5rem 1.15rem;
        font-size: .75rem;
    }
    .horiz-nav-item {
        padding: 0;
    }
}

.expand-nav-drawer-btn {
    display: none;
}

@media all and (max-width: 850px) {
    .page-grid {
        grid-template-columns: auto; 
        -ms-grid-columns: auto;
        /* height: calc(100vh - 4.5rem - 1.2rem - 2rem); */
        height: calc(100% - 2.5rem);
    }
    .nav-container-vertical {
        height: 100%;
        position: fixed;
        overflow: auto;
        top: 0;
        left: 0;
        z-index: 9;
    
        transition: transform 1s;
        transform: translateX(-100%);
    }
    .expand-nav-drawer-btn {
        display: flex;
        align-items: center;
        position: fixed;
        left: .25rem;
        top: .25rem;
        border-radius: .5rem;
        border: none;
        box-shadow: none;
        z-index: 10;
        padding: .35rem;
        gap: 0.3rem;
        background-color: white;
    }
    .expand-nav-drawer-btn:hover {
        cursor: pointer;
        background-color: #d9d9d9;
    }
    .hamburger-img {
        width: 1rem;
        height: 1rem;
    }
    .top-nav {
        top: 2.2rem;
    }

    .branding-container {
        display: none;
    }

    .home-branding-container {
        padding: 0 .25rem;
    }
    .home-logo-container {
        margin-left: 3.5rem;
    }
    .home-logo {
        height: 2rem;
    }
    .home-name {
        font-size: 1rem;
    }

    .page-header-small .home-name {
        font-size: .85rem;
    }

    .nav-container-vertical-expanded {
        transform: translateX(0);
    }

    .page-header {
        height: 2.25rem;
        margin-left: 2rem;
    }

    .user-info-container {
        padding-top: 1rem;
    }

    .nav-link {
        font-size: .8rem;
    }

    .content {
        font-size: .9rem;
    }

    h1 {
        font-size: 1rem;
    }
    
    h2 {
        font-size: .9rem;
        margin-bottom: 1rem;
    }

    p {
        font-size: .9rem;
    }

    li {
        font-size: .9rem;
        margin-bottom:.5rem;
    }

    .link-btn {
        font-size: .8rem;
        padding: .3rem .7rem;
    }
    
    .back-btn-container {
        left: 0rem;
    }

    .nav-home-name {
        font-size:0.7rem;
    }
}

@media all and (max-width: 700px) {
    .horiz-nav-item {
        padding: 0 .1rem;
    }
    .horiz-nav-link,.horiz-nav-link-compact {
        padding: .5rem 1rem;
    }
    .horiz-nav-text {
        display: none;
    }
    .horiz-nav-icon:not(.horiz-nav-icon-selected) {
        display: inline-block;
    }
    .horiz-nav-container {
        max-width: 95vw;
        overflow-x: auto;
    }
    
    .horiz-nav-link-selected {
        clip-path: unset;
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
    }

    .header-title-container h1 {
        word-wrap: break-word; 
    }

    @media(hover: hover) and (pointer: fine) {
        .horiz-nav-link:hover {
            clip-path: unset;
            border-top-left-radius: .5rem;
            border-top-right-radius: .5rem;
        }
        .horiz-nav-link:hover img.horiz-nav-icon {
            display: none;
        }
        .horiz-nav-link:hover img.horiz-nav-icon-selected {
            display: inline-block;
        }
    }

    .horiz-nav-link-selected img.horiz-nav-icon  {
        display: none;
    }
    .horiz-nav-link-selected img.horiz-nav-icon-selected  {
        display: inline-block;
    }

    .modal-content {
        top: 10%;
    }
}

@media all and (max-width: 600px) {
    ul,ol {
        padding-left: 1rem;
    }
}

@media all and (max-width: 550px) {
    .user-greeting {
        display: none;
    }
    .page-grid {
        min-height: inherit;
    }
    .resident-name-container {
        padding-bottom: .5rem;
    }
    .user-pic-container {
        max-width: 8rem;
        max-height: 8rem;
    } 
    .user-picture {
        width: 8rem;
        height: 8rem;
    }
    .nav-vertical {
        margin-top: 0;
    }
    .nav-drawer-link {
        font-size: .8rem;
        padding: .5rem .5rem;
    }
    .nav-drawer-item-count {
        font-size: .75rem;
    }
    .nav-drawer-img > img {
        padding: 0;
    }

    .home-logo-container {
        margin-left: 0;
    }

    @media all and (max-height: 600px) {
        .user-pic-container {
            max-width: 6rem;
            max-height: 6rem;
        }
        .user-picture {
            width: 6rem;
            height: 6rem;
        }
        .nav-vertical {
            overflow-y: auto;
            max-height: 50vh;
        }
    }
}

@media all and (max-width: 400px) {
    .horiz-nav-bar {
        justify-content: flex-start;
    }

    ul,ol {
        padding-left: 1rem;
    }
}

@media all and (max-width: 1024px) {
    .main-content {
        padding: 0 .5rem;
    }
    .page-header {
        padding-right: 1rem;
    }
}

@media all and (max-width: 500px) {
    .main-content {
        padding: 0 .1rem;
    }
}