.page {
    flex: 1;
    width: 100vw;
    height: calc(100% - 50px);
    opacity: 1;
    visibility: visible;
    /* transition: opacity 90ms ease-in-out; */
    gap: 0;
    background-color: #fffe;
    color: black;
    justify-content: space-between;
    position: absolute;
    top:0;
    left:0;
}

.system-bar {
    height: 24px;
    color: white;
    background-color: black;
    font-size: 11px;
    padding: 3px 6px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: flex-end;
    text-align: right;
    /*align-self: center;*/
    /*justify-self: center;*/
}

.system-bar .time {
    align-self: center;
    justify-self: center;
}

.page .header {
    gap: 0;
    background-color: #fffe;
    position: relative;
    padding: 0;
    z-index: 200;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.125); /* bottom only */
    min-height: 5rem;
}

#page-timeline.page .header{
    min-height: 2.75rem;
}

#page-collect.page .header,
#page-explore.page .header{
    min-height: 8rem;
}

.page .header > .title {
    z-index: 300;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.125); /* bottom only */
    min-height: 24px;
}

.card .title .icon,
.page .header .action-item .icon,
.page .header .title .action-item.menu .icon,
.page .footer .action-item .icon,
.page .footer .title .action-item.menu .icon
{
    max-width: 2rem;
    max-height: 2rem;
    width: 2rem;
    height: 2rem;
}

.page .header .title {
    padding: 6px;
    margin: 0;
}

.page>.content-panel .title {
    padding: 1px 3px;
}

.page .header .title .row,
.page .header .title .col {
    gap: 0;
}

.page .header .title .action-item.menu {
    /*margin-right: 40px;*/
}

.header .title .tooltip {
    align-self: flex-start;
}

.page > .content-panel > .choice-set {
    /*box-shadow: 1px 1px 3px #000000CC;*/
    z-index: 200;
    padding: 6px 6px 3px;
}

.page .header > label .icon-frame,
.page .header > label .icon {
    height: 16px;
    width: 16px;
}

.page .header > label {
    background-color: #fffb;
    flex-direction: row;
    justify-items: center;
    justify-content: center;
    padding: 3px;
}

.smart-ideas {
    margin: 3px;
}

.page.connect .add.message.action-item {
    /*width: 30px;*/
    /*height: 30px;*/
    /*border: none;*/

    /*position: absolute;*/
    /*right: 2px;*/
    /*top: 2px;*/
    /*z-index: 200;*/
}

.page.connect .add.message.action-item:hover {
    background-color: #0002;
}

.page.connect .add.message.action-item .icon {
    /*box-shadow: 0 0 1px black;*/
}

/*.page > .action-item {*/
/*    position: absolute;*/
/*    right: 8px;*/
/*    bottom: 8px;*/
/*    width: 48px;*/
/*    height: 48px;*/
/*    border: none;*/
/*    z-index: 300;*/
/*}*/

/*.page > .action-item .icon-frame {*/
/*    box-shadow: 0 0 1rem #0008;*/
/*    background-color: #0008;*/
/*}*/

.page .header > .action-item .icon {
    max-width: 24px;
    max-height: 24px;
    width: 24px;
    height: 24px;
}

/*.page > .action-item .icon {*/
/*    max-width: 48px;*/
/*    max-height: 48px;*/
/*    width: 48px;*/
/*    height: 48px;*/
/*}*/

.page .header .action-item .text {
    display: none;
}
.page .header .title .text {
    flex: 1;
}
.page .header .person.action-item .text {
    display: initial;
}
/*.tab-set {*/
/*    display: block;*/
/*    width: 100%;*/
/*    justify-content: space-evenly;*/
/*}*/

/*.tab-item {*/
/*    display: inline-flex;*/
/*    border-bottom: 2px solid #33669900;*/
/*}*/

/*.tab-item.selected {*/
/*    border-bottom: 2px solid #336699ff;*/
/*}*/

/*.tab-content {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    max-width: 100vw;*/
/*    max-height: 100vh;*/
/*    transition: all 300ms ease-in-out;*/
/*}*/

/*.tab-content.hidden {*/
/*    max-width: 0;*/
/*    max-height: 0;*/
/*    transition: all 300ms ease-in-out;*/
/*}*/

.results {
    width: 100%;
    min-height: 11em;
}

.results-option{
    border-bottom: 1px solid silver;
    line-height: 3em;
    width: 100%;
}

.results-option.selected {
    background-color: black;
    color: white;
}

/* input[type="text"] {
    width: clamp(100px, 100%, 200px);
} */
.taste-match input[type="text"] {
    width: clamp(100px, 100%, 100%);
}
.taste-match input[type="text"].searchText{
    width: 75%;
    display: inline-block;
}
.explore_edit.page input[type="text"] {
    width: clamp(100px, 100%, 95dvh);
}

input[name=amount]{
    text-align: right;
}
input[type="text"].vita-search {
    margin: 0;
    background-image: url(/static/images/icons/icon-search-black.svg);
    background-repeat: no-repeat;
    width: 100%;
    flex: 1;
    border-radius: 2em;
    padding: 0.75em 0.75em 0.75em 2.75em;
    border: none;
    box-shadow: 1px 1px 2px 0 #0008;
    background-position: 0.75em 0.75em;
}

#clearButton {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background-color: #ff4c4c;
    color: white;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 1;
}

/* .page.connect input[type="text"].vita-search{
    display: none;
} */
.page > .content-panel > .label {
    padding: 0;
    font-size: 14px;
}