.action-panel {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 24px;
}

.action-button {
    margin: 1rem;
}
.content-panel .action-button {
    /* display: flex;
    justify-content: space-between; */
    min-width: 144px;
    line-height: 3em;
}

.action-list {
    width: 100%;
    height: auto;
    background: #dddddd;
    display: flex;
    flex-direction: row-reverse;
    align-content: space-evenly;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.scrollx{
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    height: fit-content;
}
.scrollx .card-actions{
    width: auto;
}
.action-list,
.card-actions {
    gap: 0;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.timeline .card .col,
.timeline .card .row{
    overflow-y: hidden;
    overflow-x: scroll;
}

/* .card-actions .action-item {
    min-height: 54px;
} */
.edit-tastematch-button,
.action-item {
    width: fit-content;
    height: fit-content;
    margin: 0;
    /**/
    user-select: none;
    cursor: pointer;
    display: inline-flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    /*background: #dd8800;*/
    color: white;
    border-radius: 3rem;
    flex-direction: row;
    gap: 0.25rem;
    padding: 0.5rem;
    /*padding: 0;*/
    transform: rotate(0deg);
    /* transition: background 300ms ease-in-out,
    color 300ms ease-in-out,
    transform 300ms ease-in-out; */
}

.message-text .action-item{
    padding: 0.125rem;
}

.map .action-item{
    z-index: 1000;
}

.person-icon .action-item{
    display: inline-flex; /* cards people lists need this */
}


.dialog .card-search-results .card .action-item.close,
.connect_chat.page .card .action-item.close {
    display: none;
}

.connect_chat.page  .action-item.add.chat{
    display: none;
}

.connect_chat.page .attachments .card .action-item.close {
    display: block;
}
.attachments .card .action-item {
    display: none;
}
.attachments .card .action-item.person {
    display: flex;
}
.attachments .card .action-item.invite {
    display: block;
}
.explore.page .action-item.small {
    padding: 1px 2px;
    margin: 0;
    gap: 0;
    /*background: none;*/
    border-radius: 3px;
    font-size: 11px;
}

.explore.page .action-item.small.clear {
    margin: 6px 3px;
}

.action-item.book{
    background: #dd8800;
}
.action-item.book:hover{
    background: #dd8800FF;
}
.card-title .action-item{
    background: none;
}
.page.explore .col:last-child{
    align-self: self-end;
    flex-direction: column;
    align-content: center;
    /*align-self: center;*/
    justify-content: center;
    justify-self: center;
    justify-items: center;
    width: 100%;
}
.page.explore .col:last-child .action-item.book {
    align-self: self-end;
    /*flex-direction: column;*/
    align-content: center;
    /*align-self: center;*/
    justify-content: center;
    justify-self: center;
    justify-items: center;
    height: max-content;
    text-align: center;
    /*border-radius: 6px;*/
    text-shadow: none;
}
.collapsed .action-item.collapse{
    transform: rotate(180deg);
    /* transition: transform 300ms ease-in-out; */
}

.collapse-arrow {
    transform: rotate(180deg);
}

.row.compact-row {
    margin: 0;
    gap:0
}

.arrow-button.button {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
}

.chat-down-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/*.card-title .action-item {*/
/*    padding: 0;*/
/*}*/

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

.profile > .action-item.person .text {
    font-size: 2em;
}

.profile > .action-item.person .icon {
    max-width: none;
    max-height: none;
    width: 5rem;
    height: 5rem;
}

.action-list .action-item .icon {
    max-width: 1.5rem;
    max-height: 1.5rem;
}

.title .action-item .icon {
    max-width: 2rem;
    max-height: 2rem;
}

.search.fill .action-item.clear-input .icon {
    max-width: 1.5rem;
    max-height: 1.5rem;
}

/* This is the X in the sidebar menu */
.menu-panel .tooltip .action-item { 
    margin: 0px!important;
    
}

.title .action-item {
    border: none;
    margin: 5px;
}
.title .action-item.title-nav-lightbulb:hover {
    background:rgb(251, 233, 172)

}

/*.page.explore .card .action-item .icon,*/
/*.page.explore .cato-tooltip .action-item .icon,*/
/*.page.explore .action-item.action-item.title-nav-lightbulb .icon,*/
/*.page .header .action-item.title-nav-lightbulb .icon{*/
/*    max-width: 1rem;*/
/*    max-height: 1rem;*/
/*    width: 1rem;*/
/*    height: 1rem;*/
/*}*/
.page.explore .title .action-item.action-item.title-nav-lightbulb .icon{
    max-width: 2rem;
    max-height: 2rem;
    width: 2rem;
    height: 2rem;
}

.page.explore .card .action-menu .action-item .icon {
    max-width: 1.5rem;
    max-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}
/* This was affecting too many things, needs to be more specific */
/* .action-item.title-nav-lightbulb {
    padding:calc(0.5em - 3px);
} */
.title .action-item .text {
    display: none;
}
.action-item .text {
    white-space: nowrap;
}

.overview .action-item .text {
    white-space: unset;
    font-size: 1rem;
    margin-right: 0.5rem;
    margin-left: 0.125rem;
}

.overview .action-item .text h4 {
    font-size: 1.25rem;
}

.overview-page .title{
    font-size: 1.5rem;
}
.overview-page .story-box,
.overview-page .section{
    font-size: 1.25rem;
}
.page.settle .title .action-item .text {
    display: flex;
}

.action-list {
    background: none;
}
.title > .action-item{
    background: white;
}
.title > .action-item{
    background: white;
}

.dialog .title > .action-item.close{
    background: black;
    position: absolute;
    top: 0;
    right: 0;
}

.header .title > .action-item{
    background: none;
}

.action-item {
    background: #88888888;
    border: none;
}
.action-item:hover {
    background: #888888ff;
    border: none;
}

.activity-list .action-item {
    background: #00000022;
    border: none;
}

.activity-list .action-item:hover {
    background: #0008;
    border: none;
}
.message-text .action-item{
    /* background-color: #e99821; */
    background-color: black;
}
.action-item.Accept {
    background: #33993388;
}
.action-item.Maybe {
    background: #99999988;
}
.action-item.Counter {
background: #CC990088;
}
.action-item.Considering {
    background: #33669988;
}
.action-item.Pending {
    background: #66666688;
}
.action-item.Decline {
    background: #ff666688;
}
/* .dialog .action-item.cancel{
    position: absolute;
    right: 0;
    bottom: 0;
} */

.action-item.clear-input {
    background: none;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0;
    border: none;
    z-index: 1;

}

.title .badge {
    position: absolute;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    top: -0.6rem;
    right: -0.6rem;
    background-color: red;
    border-radius: 9rem;
    font-size: 0.85em;
    min-width: 2rem;
    min-height: 2rem;
    border: 0.15rem solid rgba(255, 255, 255, 1);
    font-weight: bold;
}