.day-picker {
    /* padding: 0px 0; */
    height: auto;
    width: 100%; /*  Limit so we can scroll sideways  */
    display: block;
    overflow-x: scroll;
    overflow-y: hidden;

    background: none;
    color: black;
    min-height: 70px;
}

.day-picker .day {
    display: inline-flex;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 10px;
    width: 50px;
    height: 70px;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.day-picker .day.current-day {
    background-color: black;
    color: white;
}

.day-picker .day.adjacent-day {
    background-color: #eaeaea;
}

.day-picker .day-of-week {
    font-size: 10px;
    justify-content: flex-end;
}

.smart .detail .content-panel,
.smart.card .content-panel,
.smart .dialog .content-panel {
    min-height: auto;
}

.smart .card-inner {
    gap: 6px;
}

.mood {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 6px;
}

.memories {
    flex-direction: row;
    background-color: #0008;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.memories .image {
    border-radius: 0.25rem;
    width: 72px;
    height: 48px;
}

.timeline.card {
    border-radius: 13px;
    padding: 0;
    background-color: black;
}

.timeline.card .card-inner {
    border-radius: 13px;
    padding: 13px;

}

.card.not-current-period .content-panel {
    gap: 1px;
    padding: 3px;
}

.card.not-current-period .memories {
    display: none;
}

.card.not-current-period .memories .image {
    border-radius: 0.125rem;
    width: 36px;
    height: 24px;
}

.page.timeline .card {
    background-color: white;
}

.page.timeline .card {
    background-color: white;
    /*width: 100%;*/
}

.card {
    /* transition: opacity 100ms ease-in-out; */
}

.page.timeline .card.selected .card-inner {
    /*opacity: 1;*/
    /* transition: opacity 100ms ease-in-out; */
}

.page.timeline .card .card-inner {
    width: 100%;
    gap: 0;
    /* height: clamp(200px, auto, 300px); */
    /* min-height: clamp(200px, 33vh, 300px); */
    justify-content: space-between;
    /*opacity: 0.55;*/
    /* transition: opacity 100ms ease-in-out; */
}

.timeline .card .card-inner {
    padding: 7px;
}

.timeline .card .content-panel {
    padding: 0;
    text-shadow: none;
}

.action-button {
    background-color: goldenrod;
    color: white;

    text-align: center;
    margin: 0;
    padding: 0.5em 1em;
    border: none;
    border-radius: 3px;;
    /* box-shadow: 1px 1px 4px #0003; */
}

.action-button.search-destination {
    max-width: 36px;
    max-height: 36px;
}

/* .card.not-current-period .card-inner{
    background-blend-mode: darken;
} */

.page.timeline .card.not-current-period .card-inner > .content-panel,
.page.timeline .card.not-current-period .card-inner > .row,
.page.timeline .card.not-current-period .card-inner > .spread,
.page.timeline .card.not-current-period .card-inner > .text,
.page.timeline .card.not-current-period div.dot,
.page.timeline .card.not-current-period div.text,
.page.timeline .card.not-current-period .action-list .action-item,
.page.timeline .card.not-current-period .card-people,
.page.timeline .card.not-current-period .card-tags {
    /* display: none; */
}

.page.timeline .card.not-current-period.selected .card-inner > .content-panel,
.page.timeline .card.not-current-period.selected .card-inner > .row,
.page.timeline .card.not-current-period.selected .card-inner > .spread,
.page.timeline .card.not-current-period.selected .card-inner > .text,
.page.timeline .card.not-current-period.selected .dot,
.page.timeline .card.not-current-period.selected .text,
.page.timeline .card.not-current-period.selected .card-people {
    display: flex;
}

.page.timeline .card.not-current-period.selected .action-list .action-item {
    display: inline-block;
}

.page.timeline .card.not-current-period.selected .card-tags {
    display: block;
}

.page.timeline .card.not-current-period .action-item.plan,
.page.timeline .card.not-current-period .row > .card-subtitle {
    display: flex;
}

.row.action-list .action-item {
    width: 100%;

    justify-content: space-between;
    background: #dd8800;
    padding: 0.25rem 1.25rem 0.25rem 0.25rem;
    font-size: 1rem;
    align-self: self-end;

}

.row.action-list .action-item .icon {
    max-width: 12px;
    max-height: 12px;
}

.row.action-list .action-item.completed {
    background: #fa03;
}

.row.action-list .action-item.completed:hover {
    background: #888888ff;
    border: none;
}

.current-mood {
    text-align: center;
    width: 100%;
}

.timeline.card .card-subtitle {
    text-transform: capitalize;
}


.timeline .card-tags {
    display: inline-flex;
    flex-direction: row;
    margin: 0 0;
    /* overflow-x: scroll; */
    /* height: 3vh; */
    width: auto;
    /* white-space: nowrap; */
}

/* .timeline .restaurants .card-tags{
    white-space: nowrap;
} */
.tag-container .hash-tag,
.interest-list .hash-tag,
.PROFILE .hash-tag,
.timeline .hash-tag {
    white-space: nowrap;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    vertical-align: middle;
    margin: 0 0.25em 0.25em auto;
    padding: 1px 5px 2px;
    width: fit-content;
    box-shadow: 1px 1px 2px black;
    cursor: pointer;
    text-transform: capitalize;
}

/* .hash-tag.match {
    background-color: darkgray;
} */
.timeline .action-item.alarm{

    /*position: fixed;*/
    /*top:5rem;*/
    /*right:1rem;*/
    z-index: 9999;
}

.tag-container .hash-tag .action-item,
.interest-list .hash-tag .action-item,
.checkbox-control .hash-tag .action-item{
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    text-transform: none;
    z-index: 0;
    background-color: darkgray;
    width: 1rem;
    height: 1rem;
    font-size: 0.6rem;
    font-weight: normal;
}

.timeslot-question-control {
    font-size: 1.2rem;
    color: #757575;
}

.timeslot-p {
    padding: 0.5rem;
    padding-left: 1rem;
}