.addlist {width: 100%; position: relative; font-size: 14px;}
.trigger, .addlist > div, .expanded-options .option, .edit-trigger {display: flex; align-items: center; gap: 10px;}
.option .text, .trigger {flex: 1 1 0; min-width: 50px; max-width: 100%;}
.addlist svg {display: block; width: 14px; aspect-ratio: 1/1; fill: var(--accent);}
.trigger-arrow::before, .edit-trigger:has(.text:first-child)::before {font-weight: 300; font-family:'Font Awesome 5 Pro';}

.trigger {border: 2px solid var(--accent); border-radius: 4px; justify-content: center; position: relative;
    height: 50px; position: relative; font-weight: 500; color: var(--accent); cursor: pointer;}
.edit-trigger:has(.text:first-child)::before {content:"\f055";}
.favorites-addnote, .favorites-addlist {cursor: pointer; height: 50px; aspect-ratio: 1/1; display: grid; place-items: center; 
    background-color: var(--bg-darker); color: var(--tt-fade); border-radius: 4px; display: none;}
.trigger-arrow::after {content: ''; position: absolute; inset: 0; z-index: 3;}
.trigger-arrow > div {display: none;}
.trigger-arrow::before {content:"\f078";}
.favorites-addnote svg, .favorites-addlist svg, .expanded-options svg {fill: var(--tt-fade);}
.expanded-options {position: absolute; left: 0; top: 100%; min-width: 100%; z-index: 100; background-color: var(--bg); 
    border-radius: 10px; box-shadow: var(--bsh-popover); padding: 15px; width: max-content; display: none;}
.expanded-options .option {cursor: pointer; padding: 8px 15px; border-radius: 6px; font-size: 14px;}
.expanded-options .option.is-active {background-color: var(--accent-2); color: #fff;}
.expanded-options .option.is-active svg, .trigger:hover svg, .addlist.active .trigger svg {fill: #fff;}
.option.remove-trigger, .option.remove-trigger svg {color: var(--red); fill: var(--red);}
.expanded-options .option:hover {background-color: var(--bg-darker);}
.trigger:hover, .addlist.active .trigger {background-color: var(--accent); color: #fff;}
.dt .trigger, .dt .trigger svg  {color: #fff; fill: #fff;}

#sidebar-fav-list {display: flex; flex-direction: column; gap: 10px;}
.line {display: flex; align-items: center;}
.x_label {width: 150px; text-align: right; font-size: 13px; order: 10; white-space: nowrap; line-height: 1;}
.line:nth-child(1), .ufavs__bar-fill:nth-child(1), .ufavs__btn:nth-child(1) {--clr: #57bb8a;}
.line:nth-child(2), .ufavs__bar-fill:nth-child(2), .ufavs__btn:nth-child(2) {--clr: #aed787;}
.line:nth-child(3), .ufavs__bar-fill:nth-child(3), .ufavs__btn:nth-child(3) {--clr: #ffd834;}
.line:nth-child(4), .ufavs__bar-fill:nth-child(4), .ufavs__btn:nth-child(4) {--clr: #ffb234;}
.line:nth-child(5), .ufavs__bar-fill:nth-child(5), .ufavs__btn:nth-child(5) {--clr: #ff8b5a;}
.line:nth-child(6), .ufavs__bar-fill:nth-child(6), .ufavs__btn:nth-child(6) {--clr: #da612d;}
.bar-container {height: 15px; flex-grow: 1; background-color: var(--bg-darker);}
.bar {height: 100%; background-color: var(--clr); border-radius: inherit; min-width: 20px; position: relative;}
.bar div {font-size: 12px; line-height: 1; position: absolute; left: 100%; top: 50%; translate: 5px -50%;}

.ufavs {margin-top: 20px;}
.ufavs .btn {font-weight: 400; font-size: 12px; text-transform: uppercase;}
.ufavs__bar {height: 16px; background-color: var(--bg-darker);}
.ufavs__bar-fill {background-color: var(--clr); color: #fff; font-size: 12px; text-align: center;}
.ufavs__btns > * {flex-grow: 1;}
.ufavs__btn a {background-color: var(--clr);}

.item-short .addlist {width: auto; z-index: 10; margin-left: auto;}
.item-short .trigger {height: 30px; padding: 0 10px; font-size: 12px; font-weight: 400; border-width: 1px;}
.item-short .option {font-weight: 400; --tt: #000; color: #000;}
.dt .item-short .option {--tt: #ccc; color: #ccc;}
.item-short:has(.addlist.active), .item-short:hover {z-index: 15;}
@media screen and (max-width: 760px) {
	.item-short .addlist {width: 100%; margin: 0; margin-top: 15px;}
}
.favs-links {margin-bottom: 20px;}
.favs-links ul {display: flex; align-items: center; flex-wrap: wrap; gap: 5px 5px;}
.fav_category, .fav_type_list {margin: 0;}
.favs-links a {display: block; padding: 10px 10px; border-radius: 4px; background-color: var(--bg-darker); 
    font-size: 12px; text-transform: uppercase; line-height: 1;}
.favs-links a:hover {background-color: var(--accent); color: #fff;}