.card-subtitle {
    margin-bottom: 0.2rem;
    width: 100%;
    white-space: nowrap;
    flex-direction: row;
    display: flex;
    align-items: center;
}

.dialog .results .card .card-subtitle {
    margin-bottom: 0;
}

.card-list {
    width: 100%;
    flex-direction: column;
    /*justify-content: start;*/
    align-items: flex-start;
    padding: 0.6rem 0.6rem 14.4rem 0.6rem;
    gap: clamp(0px, 1vh, 0.9rem);
    background: none;
    height: calc(100vh - 94px); /* fits plan and broadcast */
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 0 0 0.3rem #000;
}

.dialog .card-list {
    padding: 0;
    height: inherit;
}

.dialog .stack {
    gap: 0.8rem;
}

.card-list-section {
    gap: 0.2rem;
    padding: 0;
    display: block;
}

.page.explore .content-panel{
    padding-bottom: 20vh;
}

.page.timeline .card-list {
    /*padding-top: 50vh;*/
    /*padding-bottom: 50vh;*/
    gap: 0.3rem;
    align-items: end;
    justify-content: space-around;
}

.activity-list {
    width: 100%;
}

.activity-list .collapse .card-list {
    gap: 0;
}

.card-people {
    flex-direction: row;
    gap: 0.25rem;
}

.card select,
.card option {
    background-color: #0008;
    color: white;
    border: none;
}

.image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.card.canceled {
    opacity: .6;
}

.can-cancel{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    opacity: 1;
}

.delete-attachment {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.card.canceled .can-cancel
.action-item.cancel
{
    display: none;
}

.card.canceled
.action-list {
    display: none;
}

.canceled-message {
    align-items: center;
    opacity: 1;
    font-size: 1.2rem;
}

.card {
    border-radius: 1.3rem;
    background-color: #FFF3;
    color: #ffffff;
    padding: 0;
    margin: 0;
    /*width: auto;*/
    /*width: calc(100% - 16px);*/
    width: 100%;
    align-self: center;
    user-select: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    text-shadow: 1px 1px 0 black;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    height: auto;
    position: relative;
    /* transition: all 300ms ease-in-out; */
}

.dialog .card.settle,
.page.settle_split .card,
.page.settle .card {
    background: #dddddd;
    border-radius: 0.5rem;
    color: black;
    text-shadow: none;
    width: clamp(388px, 36dvh, 500px);
    height: auto;
    min-height: fit-content;
    padding: 1rem;
    gap: 1rem;
}
.dialog .card-list,
.page.settle_split .card-list,
.page.settle .card-list {
    flex-flow: wrap;
    justify-content: center;
}
.dialog .content-panel .person .text {
    font-size: 0.9rem;
}

.card-inner {
    padding: 1.5rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 1.3rem;
    /* transition: all 300ms ease-in-out; */
}

.smart .card-inner {
    background-color: grey;
}

.smart.early-morning .card-inner {
    background-color: darkred;
}

.smart.breakfast .card-inner {
    background-color: darkorange;
}

.smart.morning .card-inner {
    background-color: goldenrod;
}

.smart.lunch .card-inner {
    background-color: darkgreen;
}

.smart.afternoon .card-inner {
    background-color: darkslateblue;
}

.smart.dinner .card-inner {
    background-color: indigo;
}

.smart.evening .card-inner {
    background-color: darkviolet;
}

.smart.late-night .card-inner {
    background-color: black;
}

.card.smart .content-panel {
    border-radius: 0;
}

.smart .card-tags {
    white-space: normal;
    flex-direction: row;
    width: auto;
}

.smart .hash-tag.gold {
    padding: 0.25rem 0.5rem;
    border-radius: 1.2rem;
    background-color: white;
    color: black;
}

.card-tags {
    display: flex;
    flex-direction: row;
    margin: 0 0;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 1.5rem; /* changed to scale as the font height driven tags scale. */
}

.page.explore .hash-tag {
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.page.explore .hash-tag.match {
    background-color:darkgray;
}

.explore.page .action-item.book {
    font-size: 1rem;
}

.page.explore .card-people .circle .text {
    margin: 0 0 0 1px;
    padding-top: 1px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.page.explore .card.collapsed .card-tags,
.page.explore .card.collapsed .card-people,
.page.explore .card.collapsed .content-panel {
    display: none;
}

.page.explore .card .action-list .icon {
    width: 1rem;
    height: 1rem;
    /* transition: width 300ms ease-in-out, height 300ms ease-in-out; */
}

.page.explore .card .background.image {
    opacity: 0.50;
}

.page.explore .card.collapsed .background.image {
    opacity: 0.20;
}

.page.explore .card.collapsed {
    min-height: 92px;
}

.page.explore .card-list > .card-title {
    margin-bottom: 1rem;
    flex-direction: column;
}

.page .card-list > .card-title {
    display: none;
}

.page.explore .card-list > .card-title {
    display: flex;
}

.page.explore .card-list > .card-title .card-title {
    font-weight: bolder;
    font-size: 11px;
}

.card .content-panel {
    background-color: #0006;
}

.page.explore .card.explore .icon {
    position: static;
    margin: 0;
}

.card .titles .row .col {
    margin-left: 1.2rem;
}

.page.explore .action-list .text {
    /*display: none;*/
}

.page.explore .card.explore .card-title {
    font-size: 1.05rem;
}

.page.explore .card.explore .sub-title {
    font-size: clamp(6px, min(1.05dvw, 1.05dvh), 2.4rem);
}

.page.explore .card.explore .row {
    justify-content: space-between;
}

.page.explore .card.explore .content-panel .action-item {
    padding: 0;
}

.dialog .card,
.page .card {
    /*min-height: 60px;*/
    /*background-size: 72%;*/
    box-shadow: 2px 2px 4px 1px #00000088;
    width: 100%;
    padding: 0.6rem;
    /* min-height: 100%; BREAKS TIMELINE */
}

.page .message-panel .card{
    width: calc(100% - 12px);
    height: min(100vw, 75vh);
    min-height: min(100vw, 75vh);
    max-height: min(100vw, 75vh);
}

.page .attachments .card{
    /*width: min-content;*/
}

.card-inner {
    margin-left: 0.3rem;
    color:#000000;
}

.page.timeline .card {
    padding: 0;
    margin: 0.6rem auto 0;
    width: 98%;
    border-left: 0.9rem solid #0004;
    border-radius: 0;
    background: none;
    box-shadow: none;
    /* transition: none; */

}

.page.timeline .activity.card {
    border-left: none;
    padding: 1em;
}

.page.explore_detail .card {
    min-height: 77vh;
}

.page.explore_detail .card .action-item.open {
    display: none;
}

.page.collect .card {
    /* background-blend-mode: darken; */
    /*filter: brightness(50%);*/
}

.page.collect .card .background.image {
    display: none;
}

.page.explore .card {
    min-height: 44vh;
    /* transition: opacity 200ms ease-in-out, min-height 200ms ease-in-out; */
    padding: 0.6rem;
    width: 100%;
}

.page.collect .card {
    background-color: #0005;
    padding: 1.2rem;
}

/*.card .card-inner > * {*/
/*    z-index: 200;*/
/*}*/

.card .background {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0.85;
    z-index: 100;
}

.card .background.top {
    top: 0;
}

.card .background.bottom {
    bottom: 0;
}

.card .amount {
    height: min-content;
    background: white;
    padding: 0.5em;
    border-radius: 1em;
    font-size: 0.9rem;
    text-align: center;
}

.page.settle_day .card .amount {
    padding: 0;
}

.page.settle_split .card .turn > .amount,
.page.settle_split .card .turn > .rack > .amount {
    /* padding: 0; */
    color: whitesmoke;
    background-color: dimgray;
    font-weight: bold;
}

.page.settle_day .card {
    text-shadow: none;
}

.card .titles .amount {
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-self: center;
}

.docs,
.bulletin {
    background: cornflowerblue;
    padding: 1em;
    border-radius: 1em;
    color: white;
    font-size: 1.3rem;
    justify-self: center;
    text-align: center;
    width: calc(100% - 2em);
    margin: 1em;
}

.docs {
    font-size: 0.9rem;
    color: #321;
    justify-self: flex-start;
    text-align: left;
    background: lightgoldenrodyellow;
}

.docs p {
    margin: 1em 0 0 -0.5em;
}

.settle.page > .content-panel .title {
    font-size: 2em;
    padding: 0;
}

.card-section {
    display: flex;
    flex: initial;
    flex-direction: column;
    align-content: center;
    justify-content: right;
    gap: 0.9rem; /* added for settle */
    overflow-y: scroll; /* kicks in when max height is reached */
}

.card-quadrant {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    gap: 0.5rem;
}

.card.connect .card-quadrant {
    flex-direction: row;
    justify-content: space-evenly;
}

.card.connect .card-quadrant .action-list {
    width: auto;
    flex-direction: column;
    justify-content: center;
}

.card-subtitle {
    font-size: 0.8rem;
}

.card-text {
    font-size: 10pt;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    border-radius: 0.25em;
    padding: 0.25em 0.125em;
    margin: 0.25em 0;
}

.card-you {
    font-size: 10pt;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5em;
    width: 100%;
    text-align: right;
}

.card-title {
    font-size: 1.2rem;
    flex-direction: row;
    align-items: flex-start;
    display: flex;
    align-content: space-around;
    justify-content: space-between;
    width: 100%;
}

.page.collect_board .card-title {
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.card-title-text {
    padding: 0.3rem 0.6rem;
    border-radius: 0.33rem;
    font-size: 1em;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    vertical-align: middle;
    margin-right: 1em;
}

.card.explore {
    background-color: #ff6666;
    box-shadow: 2px 2px 4px 1px #00000088;
}

.card.connect {
    background-color: #e99821;
    padding: 1rem;
}

/* .page.explore .row > * {
    align-self: auto;
} */

.page.explore > .content-panel > .row {
    width: 100%;
    gap: 0.25em;
    /*padding: 0;*/
}

.page.explore .card-list {
    padding: 3px 3px 50vh 3px;
    width: 100%;
}

.page.explore .card.explore {
    background-color: #ff6666;
    box-shadow: 2px 2px 4px 1px #00000088;
    width: 47vw;
    margin: 0 3px 3px 0;
    background-size: auto;
}

/*.page.explore .card.explore:nth-child(odd) {*/
/*    align-self: flex-start;*/
/*}*/
/*.page.explore .card.explore:nth-child(even) {*/
/*    align-self: flex-end;*/
/*}*/

.page.explore .card .card-inner > .row,
.page.explore .card .card-inner > .row .col .row,
.page.explore .card .card-inner > .row .col .row .col {
    /*width: 100%;*/
    /*margin: 0 auto;*/
}

.page.explore .row .icon-frame {
    align-self: center;
}

.card {
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)), black center/cover no-repeat;
    /* prevents the exported black frames from figma from showing. */
    background-size: 103%;
    gap: 0;
}

.card.split {
    gap: 0.9rem;
}

.card-inner {
    box-shadow: 0vw 0vw .5vw rgba(0, 0, 0, 0.7);
    /* background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), black center/cover no-repeat; */
    /* background-size: 103%; */
    gap: 0;
}

.card.collect,
.card.board {
    background-color: #5667bc;
}

.card.plan {
    background-color: #67bc67;
}

.card.settle {
    background-color: #5623dE;
}

.card.settle .titles {
    width: 100%;
}

.card.settle .title {
    text-align: right;
    width: max-content;
    align-self: flex-end;
    justify-self: flex-end;
    color: white;
    border: 0 solid white;
    box-shadow: none;
}

.card.settle .content-panel > .title {
    background: none;
}

.card.settle .card-title {
    font-size: 15pt;
}

/*.card.settle .content-panel,*/
/*.card.settle .content-panel .text,*/
/*.settle .title .col .row,*/
/*.settle.page .card.settle .content-panel>.row {*/
/*    text-align: center;*/
/*    align-self: center;*/
/*    justify-self: center;*/
/*    justify-content: center;*/
/*    justify-items: center;*/
/*    padding: 0;*/
/*}*/

.settle-who .who,
.settle-who .amount,
.settle-who {
    text-align: center;
    align-self: center;
    justify-self: center;
}

.title .amount {
    margin: auto;
    text-align: center;
}

.settle-who .amount {
    font-size: 0.9rem;
}

.settle-who .who {
    font-size: 0.8rem;
}

.card-list .title .row .col {
    align-items: center;
    align-content: center;
    margin: 0 auto;
    justify-content: center;
    align-self: center;
    justify-self: center;
}

.green {
    color: #339966;
}

.red {
    color: #993333;
}

.black {
    color: #333333;
}

.dashboard-item .title,
.dashboard-item .text,
.dashboard-item .action-item {
    text-align: center;
    justify-self: center;
    justify-content: center;
    align-self: center;
    align-content: center;
}

.card.settle .action-item {
    align-self: flex-start;
}

.person .icon-frame {
    padding: 1.5px;
}

.person .icon {
    border-radius: 50%;
}

.titles .row .action-item .icon-frame {
    padding: 0.4rem;
}

.settle-who {
    margin: 0;
    background-color: #ffffffaa;
    font-size: 1em;
    padding: 1rem;
    border-radius: 0.5em;
}

.card-list .card-list .row {
    width: 100%;
}

.card-list > .card {
    width: 100%;
    height: clamp(200px, auto, 300px);
    /*min-height: clamp(200px, 33vh, 300px);*/
    white-space: break-spaces;
    /* transition: opacity 300ms ease-in-out, padding 300ms ease-in-out, max-height 300ms ease-in-out, max-height 300ms ease-in-out, min-height 300ms ease-in-out, minwidth 300ms ease-in-out; */
}

/*.action-item.person .text,*/
.message-item .text,
.person .text {
    /* transition: all 300ms ease-in-out; */
    padding-right: 1rem;
}

.message-item:hover .text,
.person:hover .text {
    /* transition: all 300ms ease-in-out; */
}
.div.text,
.page.explore .action-item .text {
    /*display: none;*/
}
.page.explore .action-item:hover .text {
    display: flex;
    /*position: absolute;*/
    /*background-color: black;*/
    /*z-index: 999;*/
    /*margin-right:2em;*/
    /*bottom:0;*/
}

.person text {
    /*display: none;*/
}
.person:hover text {
    display: flex;
    position: absolute;
    background-color: black;
    z-index: 99999;
    margin-right: 2em;
    bottom: 0;
}

.page.explore .action-item.collapse:hover .text {
    display: none;
}

.person-icon:hover .text {
    display: block;
    background: #0008;
    position: absolute;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 1rem;
    z-index: 99999;
    top: -66%;
    opacity: 1;
    visibility: visible;
    /* transition: all 1300ms ease-in-out; */
}

.activity-list .collapse .card {
    opacity: 0;
    min-height: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    /* transition: opacity 300ms ease-in-out, padding 300ms ease-in-out, max-height 300ms ease-in-out, max-height 300ms ease-in-out, min-height 300ms ease-in-out, minwidth 300ms ease-in-out; */
}

.activity-list .collapse .card > * {
    display: none;
}

.activity-list > .row > .row > .action-item {
    background-color: transparent;
}

.activity-list > .row {
    border-top: 1px solid #bbb;
    padding: 1px;
}

.activity-list .row > .title {
    font-size: 1.6rem;
    background: none;
}

.activity-list > .row > .action-item .icon {
    transform: rotate(90deg);
    /* transition: transform 300ms ease-in-out; */
}

.activity-list > .row.collapse > .action-item .icon {
    transform: rotate(0deg);
    /* transition: transform 300ms ease-in-out; */
}

.activity-list > .card-list {
    padding-bottom: 1em;
    height: auto;
}

.activity-list > .card-list.collapse {
    gap: 0;
    padding-bottom: 0;
}

.page.explore .card.explore .content-panel .action-item.favorite .text {
    display: block;
}

.page.explore .action-item.favorite .text {
    display: block;
}

.section-title {
    margin: 0 -0.125em;
    flex-direction: row;
    background: none;
    width: 100%;
    padding: 0.125rem;
    gap: 0.125rem;
    justify-content: space-between;
    align-content: space-between;
}

.titles {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
}

.card.contact {
    background: #dddddd;
}

.card.contact > .row {
    justify-content: space-between;
}

.card.contact > .row > select {
    padding: 1rem;
    border-radius: 1rem;
}

.card.contact .card-tags {
    width: 100%;
}

.card.connect .titles .col {
    align-items: end;
}

.expense-list {
    width: 100%;
    gap: 0.5rem;
    height: 172px;
    overflow-y: scroll;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 0.9rem;
}

.page.settle_split .card.expense-item,
.page.settle .card.expense-item {
    color: black;
    background: rgba(255, 255, 255, 0.75) none;
    padding: 0.5rem 0;
    border-radius: 0.5em;
    gap: 0.5rem;
}

.expense-item .text {

}

.page > .content-panel .card.expense-item .title {
    padding: 0;
}

.card.expense-item .split-amounts .rack {
    padding: 0;
}

.card.expense-item > .rack {
    padding: 0 2em;
    justify-content: space-between;
}

.page.collect_board .card .action-item.collect {
    display: none;
}

.page.timeline .card.activity {
    width: 100%;
    border-radius: 0.25em;
    margin: 0 0.36rem 0.25rem auto;
    height: auto;
}

.page.timeline .card-inner .spaced {
    color: fuchsia;
    margin-bottom: 1rem;
}

.page.timeline .card-actions.spread {
    flex-direction: column;
    align-items: flex-start;
}

.page.timeline .card .suggestion-card {
    width: auto;
    background-color: #ef5656 !important;
    border-radius: 15px;
    margin: 1vw;
    height: fit-content;
    min-height: 7rem;
    min-width: 16rem;
}
.cato-suggestion .suggestion-card {
    border-left: 2vw solid goldenrod !important;
    border-radius: 15px;
}

.suggestion-card .card-section .titles .col .card-title {
    padding: 1vw;
    margin-top: 1vw !important;
}

.suggestion-card .card-section .titles .col {
    overflow-x: hidden;
}

.suggestion-card .card-section {
    padding: 1vw;
}

.suggestions {
    flex-direction: row;
    overflow-x: scroll;
}

.icon.suggestion {
    height: 1rem;
}