/* MY STUFF NAV*/
#dev_menu {
	display: none;
}

.mystuff-nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mystuff-nav-top .page-name {
    margin: 0 auto;
}

.mystuff-nav.mystuff .mystuff-nav-top,
.mystuff-nav.favourites .mystuff-nav-top,
.mystuff-nav.myprofile .mystuff-nav-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.mystuff-title {
	font-weight: var(--fontweight_heavy);
	color: var(--textMain);
	font-size: 32px;
	line-height: 40px;
	cursor: pointer;
}

.mystuff-logo {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
	height: 40px;
}

.mystuff-logo img {
	height: 28px;
	width: 28px;
	display:none; /*decided to remove as too many + icons */
}

.page-title {
	color: var(--textMain);
    font-size: var(--font_title);
    font-weight: var(--fontweight_heavy);	
}

.page-subtitle {
	text-align: center;
}

.mystuff-nav.makes .page-title, 
.mystuff-nav.settings .page-title, 
.mystuff-nav.ribblrplus .page-title, 
.mystuff-nav.patterns .page-title, 
.mystuff-nav.materials .page-title, 
.mystuff-nav.shops .page-title, 
.mystuff-nav.makers .page-title, 
.mystuff-nav.archive .page-title, 
.mystuff-nav.testing .page-title {
	line-height: 29px;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 40px;
	display: flex;
	align-items: center;
}


.mystuff-nav .page-nav {
	display: flex;
}

.mystuff-nav.board .page-nav,
.mystuff-nav.mat_board .page-nav,
.mystuff-nav.wish_board .page-nav,
.mystuff-nav.stash .page-nav,
.mystuff-nav.allpatterns .page-nav,
.mystuff-nav.boards .page-nav {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.search_btn,
.page-btn .board-actions::part(base),
.page-btn .stash-actions::part(base),
.page-btn .add-board,
.search_filter,
.search_sort,
.back-btn {
	height: 40px;
	width: 40px;
	background: var(--menu);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	position: relative;
	box-sizing: border-box;
	cursor: pointer;
}

.search_sort.filtered, .search_filter.filtered {
    border: 2px solid var(--textSecondary);
}

.search_sort.filtered:after, .search_filter.filtered:after {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    background: var(--textSecondary);
    z-index: 100;
    border-radius: 15px;
    top: -9px;
    right: -9px;
}

.page-btn .add-pattern {
	height: 48px;
	background: var(--menu);
	border-radius: 12px;
	align-items: center;
	justify-content: center;
	display: flex;
	padding: 0 16px;
	cursor: pointer;
	font-weight:var(--fontweight_500);
}

.search_btn svg,
.page-btn svg,
.search_filter svg,
.search_sort svg,
.back-btn svg {
	height: 22px;
	width: 22px;
	color:var(--textSecondary);
}

.page-btn .board-actions::part(label),
.page-btn .stash-actions::part(label) {
	color: var(--textSecondary);
	padding: 0;
	display: flex;
}

.mystuff-tabs {
	display: flex;
	flex-direction: row;
	gap: 20px;
	color: var(--textMain);
	font-weight: var(--fontweight_500);
	font-size: var(--font_large);
	line-height: 20px;
}

.mystuff-tabs .tab {
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.mystuff-tabs .tab.selected {
    color: var(--Purple);
    font-weight: var(--fontweight_heavy);
    border-bottom: 2px dashed var(--Purple);
    display: flex;
    align-items: center;
}

/* for long names */
.mystuff-tabs .myprofiletab, .mystuff-tabs .myprofiletab.selected {
	overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    display: block;
    align-content: center;
}

.mystuff-nav-bottom .mystuff-container-search {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
}

.mystuff-filter-sort {
	display: flex;
	flex-direction: row;
	gap: 8px;
}


/*MY STUFF CONTENT*/
.mystuff-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ribblrplus-arcade {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.ribblrplus-arcade p {
    margin: 0;
    color: var(--textSupport);
}

.ribblrplus-arcade-embed {
    max-width: 820px;
    margin: 0 auto;
}

.ribblrplus-arcade-embed iframe {
    border-radius: 12px;
}

.mystuff-page sl-card.section::part(base) {
    border-radius: 24px;
    border: none;
    box-shadow: none;
    background-color: var(--White);
    padding: 16px;
    width: 100%;
	overflow: auto;
}

.mystuff-page sl-card.section::part(body) {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-header {
    color: var(--textMain);
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}

.patterns-header {
    flex-direction: row;
    justify-content: space-between;
}

.section-title {
    font-weight: var(--fontweight_heavy);
    font-size: var(--font_title);
    color: var(--textMain);
    line-height: 20px;
    height: 24px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.section-title svg {
    height: 20px;
    width: 20px;
    color: var(--textSecondary);
}

.viewall-btn {
    color: var(--Purple);
    font-weight: var(--fontweight_heavy);
    cursor: pointer;
}

/* Pattern items*/
.pat-actions::part(base), .pin-pat {
    width: 32px;
    height: 24px;
    transition: transform .15s ease;
    background: var(--wishlistBg);
    border-radius: 31px;
    padding: 0px 8px;
    box-sizing: border-box;
    border: 0.5px solid var(--White);
    display: flex;
    justify-content: center;
    min-height: 24px;
    color: var(--textMain);
    align-items: center;
    cursor: pointer;
}

.pin-pat::before { /* increase pin click area */
    content: "";
    position: absolute;
    top: -12.5px;
    bottom: -12.5px;
    left: -12.5px;
    right: -12.5px;
    background: transparent;
}

.pin-pat {
    position: absolute;
    top: 4px;
    left: 4px;
}

.pin-pat.pinned {
    background: var(--btnSelected);
    color: var(--White);
    /* border: var(--textMain); */
}

sl-card.mypattern-item .pat-action-dropdown {
    position: absolute;
    top: 4px;
    right: 4px;
}

.pat-actions svg {
    height: 16px;
    width: 16px;
    color: var(--textMain);
}

sl-button.board-actions::part(label), sl-button.pat-actions::part(label) {
    display: flex;
    align-items: center;
}

.mypattern-menu {
    border-radius: 16px;
    border: none;
    box-shadow: none;
    border: 1px solid var(--background);
    width: 250px;
    z-index: 1;
    top: 4px;
    display: none;
}

.mypattern-menu sl-menu-item::part(base) {
    color: var(--textMain);
    border-bottom: 1px solid var(--background);
    height: 44px;
    align-items: center;
    display: flex;
    box-sizing: border-box;
    padding: 12px 0;
    background: var(--White);
}

.mypattern-menu sl-menu-item::part(checked-icon) {
    display: none;
}

.mypattern-menu sl-menu-item::part(label) {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
}

sl-menu-item::part(submenu-icon) {
    display: none;
}

.mypattern-menu .icon {
    height: 20px;
    width: 20px;
}

/* Favourites */
.all-makers-list, .all-shops-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.all-makers-list .designer-name {
	display:none; /* not needed for makes */
}

.fav-shop {
    display: flex;
    flex-direction: row;
    gap: 12px;
    min-width: 325px;
    align-items: center;
    justify-content: space-between;
}

.designer-section {
    display: flex;
    gap: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.designer-image {
    height: 48px;
    width: 48px;
}

.designer-image #logo_img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    margin: auto;
    border-radius: 50%;
    transition: var(--transition);
}

.designer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 166px;
}

.designer-user {
    white-space: nowrap;
    display: block;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: var(--font_large);
    color: var(--textMain);
    font-weight: var(--fontweight_heavy);
    cursor: pointer;
}

.designer-name {
    color: var(--textSecondary);
    line-height: 17px;
    display: flex;
    gap: 2px;
    flex-direction: row;
}

.designer-store {
    text-decoration: underline;
    white-space: nowrap;
    display: block;
    cursor: pointer;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 89px;
}

.fav-shop sl-button::part(base) {
    background: var(--background);
    color: var(--textSecondary);
    border: none;
    height: 36px;
    box-sizing: border-box;
    padding: 10px 20px;
    line-height: 0;
    display: flex;
    align-items: center;
    font-size: var(--font_main);
    max-height: 36px;
    width: 104px;
}

.fav-shop sl-button::part(label) {
    padding: 0;
    line-height: 20px;
}

/* My Profile */
.profile-body {
    width: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

sl-card.profile-info::part(base) {
    padding: 20px 16px;
    border-radius: 24px;
    background: var(--White);
    box-shadow: none;
    border: none;
}

sl-card.profile-info::part(body) {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.profile-detail {
    display: flex;
    gap: 16px;
    flex-direction: row;
    align-items: center;
}

.profile-image {
    height: 64px;
}

.my_profile_img img, .profile-image svg {
    width: 64px;
    height: 64px;
    color: var(--textMain);
    border-radius: 50%;
	background:var(--background);
}

.profile-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.full-name {
    font-size: var(--font_large);
    line-height: 20px;
    color: var(--textMain);
    display: flex;
    gap: 5px;
}

.first-name {
	flex:1;
}

.username {
    font-size: var(--font_main);
    line-height: 17px;
    color: var(--textSecondary);
    font-weight: var(--fontweight_500);
}

.photoupdate {
	display:none;
}

.edit-on {
	display:block;
}

.save-profile-btn, .edit-profile-btn {
    background: var(--background);
    height: 36px;
    width: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.save-profile-btn svg, .edit-profile-btn svg {
    height: 16px;
    width: 16px;
    color: var(--Purple);
}

sl-card.profile-options::part(base) {
    padding: 24px 16px;
    border-radius: 24px;
    background: var(--White);
    box-shadow: none;
    border: none;
}


sl-card.profile-options::part(body) {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.option-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 58px;
    align-items: center;
    cursor: pointer;
}

.option-btn:nth-last-child(n+2) {
    border-bottom: 1px solid var(--background);
}
.profile-option-ribbot, .profile-option-icon {
    color: var(--textMain);
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    font-size: var(--font_large);
    line-height: 20px;
    height: 24px;
}

.profile-option-icon span {
    height: 24px;
}

.profile-options svg {
    height: 24px;
    width: 24px;
    color: var(--textSecondary);
}

/*Search*/
.mystuff-container-search {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.mystuff-container-search sl-input.mystuff-search-bar::part(base) {
    border: 1px solid var(--White);
    height: 40px;
    padding: 0 12px;
    border-radius: 16px;
    background: var(--White);
    width: 100%;
    display: flex;
    align-items: center;
    font-size: var(--font_large);
    font-family: var(--font);
    line-height: 20px;
    font-weight: var(--fontweight_main);
}

.mystuff-container-search sl-input.mystuff-search-bar::part(input) {
    color: var(--textMain);
    box-shadow: none !important;
}

.mystuff-container-search sl-input.mystuff-search-bar sl-icon {
    color: var(--textSecondary);
}

.mystuff-container-search .search_cancel {
  color: var(--textSupport);
  font-weight: var(--fontweight_heavy);
  display: block
}

.mystuff-container-search .search-item {
    min-width: 247px;
    background: var(--background);
    width: 100%;
}

sl-drawer.add-board-modal::part(footer),
sl-drawer.add-board-modal .board-cnt {
	display: none;
}

/* Makes */
.makes-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.selfee-card .profile-image {
	height: 64px;
	width: 64px;
}

.makes-profile-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.makes-follow-info {
	line-height: 17px;
	font-size: var(--font_main);
	color: var(--textSecondary);
}

.shopmanager-btn::part(base) {
	background: var(--Purple);
	color: var(--White-500);
	border: none;
}

.shopmanager-icon {
	height:16px;
	width: 16px;
	display: flex;
	align-items: center;
}
.shopmanager-icon svg{
	height: 16px;
	width: 16px;
}

.set-it {
	position: absolute;
	bottom: 4px;
	right: 4px;
}

.set-it::part(base) {
	height: 24px;
	padding: 0 8px;
	border-radius: 31px;
	background: var(--Purple);
	border: none;
	font-size: var(--font_second);
	color: var(--White-500);
	cursor: pointer;
	font-weight: var(--fontweight_500);
}

/* -- Pop up Pricing and Sales */
#makes-form::part(body) {
	text-align: left;
}

#makes-form form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#makes-form sl-select::part(form-control-label),
#makes-form sl-input::part(form-control-label) {
	color: var(--textSecondary);
	font-weight: var(--fontweight_500);
	font-size: var(--font_main);
	line-height: 17px;
	padding-bottom: 4px;
}

#makes-form sl-select::part(display-input),
#makes-form sl-input::part(base),
#makes-form sl-input::part(input){
	height: 44px;
	background: var(--White);
	border: none;
	border-radius: 12px;
	color:var(--textMain);
}

#makes-form sl-textarea::part(textarea) {
	color: var(--textMain);
	height: 120px;
}

#makes-form sl-select::part(combobox),
#makes-form sl-select::part(listbox),
#makes-form sl-textarea::part(base) {
	background: var(--White);
	border: none;
	border-radius: 12px;
}

#makes-form sl-input::part(suffix) {
    padding-right: 12px;
}

.price_status {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.price_status sl-option::part(label) {
	color: var(--textSecondary);
}

.shipping_sub {
	font-weight: var(--fontweight_main);
	line-height: 18px;
}

.product-cost0 {
	font-weight: var(--fontweight_500);
}

.learnmore-makes {
	background: var(--menu);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 12px;
	border-radius: 16px;
	color: var(--textSecondary)
}

.info-icon {
	height: 16px;
	width: 16px;
	padding-right: 8px;
	color: var(--menuIcon);
}

.learnmore-makes a {
	text-decoration: underline;
	color: var(--Purple);
}

.stash_del {
	width:40px;
	height:40px;
	position:absolute;
	left:0;
	top:0;
}

.stash_edit {
	width:40px;
	height:40px;
	position:absolute;
	right:0;
	top:0;
}

/*Stash CTA*/
.stash_cta {
	position: absolute;
	bottom: 4px;
	right: 4px;
	font-family: var(--fontInter);
  }
  
  .stash_cta::part(base) {
	background: var(--Blue);
	color: var(--White-500);
	font-size: var(--second);
	font-size: 12px;
    height: 24px;
  }
  
  .stash_cta.sale::part(base) {
	background: var(--Pink);
    color: var(--White-500);
  }

/* STASH */
sl-drawer.stash-menu-modal::part(body) {
	display: flex;
    flex-direction: column;
	gap: 8px;
}

sl-drawer.stash-menu-modal::part(header) {
	display: none;
}

.stash-menu-modal .edit-stash-settings,
.stash-menu-modal .share-stash {
	background: var(--White);
	border-radius: 16px;
	padding: 12px 16px;
	display: flex;
	flex-direction: row;
	gap: 12px;
	color: var(--textMain);
	font-size: var(--font_large);
	line-height: 20px;
	align-items: center;
	width: -webkit-fill-available;
}

.stash-menu-modal .edit-stash-settings svg,
.stash-menu-modal .share-stash svg{
	height: 24px;
    width: 24px;
    color: var(--textSecondary);
}

.stash-menu {
    border-radius: 16px;
    border: none;
    box-shadow: none;
    border: 1px solid var(--background);
    width: 250px;
    z-index: 1;
    top: 4px;
}


sl-menu.stash-menu { 
	display: none!important;
}

.stash-menu sl-menu-item::part(base) {
    color: var(--textMain);
    border-bottom: 1px solid var(--background);
    height: 44px;
    align-items: center;
    display: flex;
    box-sizing: border-box;
    padding: 12px 0;
    background: var(--White);
}

.stash-menu sl-menu-item::part(checked-icon) {
    display: none;
}

.stash-menu sl-menu-item::part(label) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}

.stash-menu .icon {
	height: 20px;
	width: 20px;
}

sl-button.add-stash::part(base) {
	background: none;
	border-color: var(--Purple);
	color: var(--Purple);
	display: flex;
	align-items: center;
	padding-left: 16px;
	border:1px solid;
}

sl-button.add-stash::part(label) {
	padding: 0 16px 0 4px;
}

.stash-item-details::part(panel) {
  height: 88%;
  max-height:80%;
}

.stash-item-details::part(body) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stash-item-details::part(title) {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.stash-details-img {
  position: relative;
  max-height: 400px;
  margin: auto;
}

.stash-details-img .qty-cnt {
  left: 8px;
  bottom: 8px;
}

.stash-details-img img {
  object-fit: cover;
  border-radius: 16px;
  height:100%;
  max-width:100%;
}

.stash-notes-section, .stash-tags-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--menu);
    padding-bottom: 8px;
}

.selected-tag {
    background: var(--Purple);
    color: var(--White-500)!important;
}

.selected-tag .stash_tag_total {
    color: var(--menu);
}

.stash-notes-section {
    border-bottom: none;
}

.stash-notes-header,
.stash-details-header {
    font-family: var(--fontInter);
    color: var(--textMain);
    font-weight: var(--fontweight_500);
	text-align: left;
}

.stash_tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stash_tag {
    display: flex;
    background: var(--background);
    padding: 0 16px;
    border-radius: 24px;
    font-size: var(--font_main);
    cursor: pointer;
    transition: var(--transition);
    height: 32px;
    align-items: center;
}

.stash_tag::before {
    content: "#";
}	

.stash_tag:hover,
.stash_tag:active {
  opacity: var(--opacityHover);
}

.note_info {
  background: var(--background);
  padding: 8px 16px;
  border-radius: 16px;
  height: 100px;
  overflow: scroll;
}

.edit-stash-body {
	text-align: left;
}

.privacy-switch {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 87px;
    align-items: center;
}

.switch-stash-text {
	font-size: var(--font_large);
    font-weight: var(--fontweight_500);
    line-height: 20px;
    color: var(--textMain);
}
.switch-stash-subtext {
	font-size: var(--font_main);
    line-height: 18px;
    color: var(--textSecondary);
    font-weight: 400;
}

.add-stash-icon {
	height: 18px;
	width: 18px;
	display: flex;
}

.del-stash {
	position: absolute;
	top: 4px;
	left: 4px;
	background: var(--wishlistBg);
	border: 1px solid var(--White);
	padding: 0 8px;
	border-radius: 31px;
	height: 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.edit-stash {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--wishlistBg);
	border: 1px solid var(--White);
	padding: 0 8px;
	border-radius: 31px;
	height: 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.del-stash svg,
.edit-stash svg {
	height: 16px;
	width: 16px;
	color: var(--textMain);
}

.qty-cnt {
	position: absolute;
	bottom: 4px;
	left: 4px;
}

.qty-cnt::part(base) {
	background: var(--wishlistBg);
	color: var(--textMain);
	height: 24px;
	font-size: var(--font_second);
	font-weight: var(--fontweight_500);
	padding: 0 10px;
	border-color: var(--White);
}

#stash_img_edit {
	width: 90%;
	max-width: 400px;
	display: block;
	margin: auto;
	position: relative;
	border: 1px dashed var(--textSupport);
	border-radius: 16px;
	height:323px;
}

#edit_photo_src {
    width: 100%;
    border-radius: 16px;
    background: var(--background);
    /* border: 1px dashed var(--textSupport); */
    /* opacity: 0; */
	height: -webkit-fill-available;
    object-fit: contain;
}

.edit_photo_info {
    position: absolute;
    top: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding: 0 12px;
    gap: 12px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.upload_text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upload_h1 {
    color: var(--textMain);
    font-weight: var(--fontweight_500);
    font-size: var(--font_main);
}

.upload_p {
    font-size: var(--font_second);
    color: var(--textSecondary);
}

.share_it {
	margin: 0;
    margin-left: auto;
    background: var(--background);
    border-radius: 8px;
    padding: 8px;
	width:18px;
	height:18px;
}

sl-drawer#sortMenu::part(panel) {
	height: max-content;  
	padding-bottom:32px;
  }

.smart_match_info {
    font-size: var(--font_second);
    color: var(--textSecondary);
    background: var(--White);
    padding: 4px 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}

.upload_icon {
    height: 24px;
    width: 24px;
    background: var(--White);
    padding: 8px;
    border-radius: 12px;
    color: var(--textSecondary);
}

.stash_img_add,
.stash_edit_in {
	position: absolute;
	top: 10px;
	height: 28px;
	cursor: pointer;
	background: var(--wishlistBg);
	border-radius: 31px;
	padding: 0px 10px;
	box-sizing: border-box;
	transition: filter 0.15s ease, transform 0.15s ease;
	display: flex;
	align-items: center;
}

.stash_edit_in {
	right: 10px;
}

.stash_img_add {
	left: 10px;
}

.stash_img_add svg,
.stash_edit_in svg {
	height: 18px;
	width: 18px;
	color: var(--textMain);
}

#edit_container {
	display: none;
	flex-direction: column;
	gap: 12px;
}

.stash_edit_details {
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: space-between;
}

.stash_footer {
	display: flex;
	gap: 8px;
	padding: 16px;
	border-top: 1px solid var(--menu);
	background: var(--White);
}

.my_stash_info {
	background: var(--background);
	display: flex;
	flex-direction: row;
	border-radius: 16px;
	padding: 12px;
	gap: 8px;
	color: var(--textSecondary);
}

.my_stash_info svg {
	height: 16px;
	width: 16px;
	min-width: 16px;
	color: var(--menuIcon);
}

.stash-info-text {
	color: var(--textSecondary);
	font-size: var(--font_main);
	font-weight: var(--fontweight_main);
}

#cover-tags {
    display: block;
}

.stash_note_qty label,
#cover-tags label {
	color: var(--textSecondary);
	padding-bottom: 4px;
	font-weight: var(--fontweight_500);
}

.tagify {
	--tag-bg: var(--background);
	--tag-text-color: var(--textMain);
	--tag-remove-btn-color: var(--textMain);
	border: none;
	font-size: 14px;
}

.tagify__tag {
	border-radius: 24px;
	white-space:nowrap;
	background: var(--background);
    color: var(--textMain);
}

.tagify__input {
    height: 44px;
    border-radius:12px;
    overflow:scroll;
    order: -1;
    flex: 100%;
    border: 1px solid var(--background);
    transition: .1s;
    margin: 4px 0;
    padding: 7px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
	
.tagify__input::before {
    color:var(--textMain)!important;
    font-size: var(--font_large);
    display: flex;
    align-items: center;
    line-height: 20px;
    height: 20px;
}
.tagify__dropdown {
    color:var(--textMain)!important;
}

.tagify__tag>div {
	border-radius: 24px;
	padding: 0 8px 0 16px;
	height: 32px;
	display: flex;
	align-items: center;
}

.tagify__tag__removeBtn {
	display: flex;
	align-items: center;
	color: var(--textSupport);
	top: 2px;
    position: relative;
}

.tagify__tag__removeBtn::after {
    display: flex;
    align-items: center;
}

.tagify--focus .tagify__input {
		transition: 0s;
		border-color: var(--Purple);
		border-bottom: none;
		border-radius: 12px 12px 0 0;
}

/* Suggestions items */
.tagify__dropdown.color-blue .tagify__dropdown__item{
    padding: .5em .7em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1em;
    grid-template-areas: "avatar name";
    text-transform: capitalize;
	background: var(--White);
}

.tagify__dropdown.color-blue .tagify__dropdown__item:hover .tagify__dropdown__item__avatar-wrap{
    transform: scale(1.2);
}

.tagify__dropdown.color-blue .tagify__dropdown__item__avatar-wrap{
    grid-area: avatar;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: #EEE;
    transition: .1s ease-out;
}

.tagify__dropdown.color-blue img{
    width: 100%;
    vertical-align: top;
}

.tagify__dropdown.color-blue strong{
    grid-area: name;
    width: 100%;
    align-self: center;
}

.tagify__dropdown.color-blue .tagify__dropdown__item__addAll{
    border-bottom: 1px solid var(--background);
    gap: 0;
}

.tagify__tag:hover .tagify__tag__avatar-wrap{
    transform: scale(1.6) translateX(-10%);
}

.tagify__tag .tagify__tag__avatar-wrap{
    width: 30px;
    height: 30px;
    white-space: normal;
    border-radius: 50px;
    background: silver;
    margin-right: 5px;
    transition: .12s ease-out;
}

.tagify__tag img{
    width: 100%;
    vertical-align: top;
    pointer-events: none;
}

#stash_note {
    display: block;
    border-radius: 12px;
    border: 1px solid var(--background);
    resize: none;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 12px;
    font-family: var(--font);
    background: transparent;
    color: var(--textMain);
    font-size: var(--font_large);
}

#stash_note::placeholder {
	color: var(--textMain);
}

.stash_qty_group {
	display: flex; 
	flex-direction: row;
	gap: 8px;
	width: 100%;
}

#stash_qty_input {
	padding: 0 12px;
	border: 1px solid var(--background);
	background: none;
	height: 44px;
	border-radius: 12px;
	font-size: var(--font_large);
	color: var(--textMain);
	width: 50%;
	box-sizing: border-box;
}

#qty_type::part(combobox) {
	background: none;
	color: var(--textMain);
	border-radius: 12px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--background);
}

#qty_type::part(display-input) {
	color: var(--textMain);
	font-size: var(--font_large);
	height: 44px;
}

#qty_type::part(expand-icon) {
	color: var(--textMain);
}

#qty_type::part(listbox) {
	background: var(--White);
	color: var(--textMain);
	font-size: var(--font_large);
	box-shadow: none;
	border-radius: 12px;
	border: 1px solid var(--background);
}

#qty_type sl-option::part(base) {
	color: var(--textMain);
	background: none;
	padding-left: 12px;
}

#qty_type sl-option::part(checked-icon) {
	display: none;
}

/*More actions*/
sl-drawer.pattern-menu::part(body) {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pattern-menu .share-pattern,
.pattern-menu .add-pat-board, 
.pattern-menu .unarchive-pat,
.pattern-menu .archive-pat {
	background: var(--White);
	border-radius: 16px;
	padding: 12px 16px;
	display: flex;
	flex-direction: row;
	gap: 12px;
	color: var(--textMain);
	font-size: var(--font_large);
	line-height: 20px;
	align-items: center;
	height: 20px;
}

.pattern-menu svg {
	height: 24px;
	width: 24px;
}

img.ribblrplus_alert {
    border-radius: 16px;
    /* max-height: 100%; */
    max-width: 400px;
	width:100%;
}

sl-dialog::part(panel) {
	width: 625px;
	max-height: 576px;
	border-radius: 24px;
}

sl-dialog#delete-board-modal::part(panel) {
	width: 500px;
	height:max-content;
}
sl-dialog#delete-board-modal::part(body) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#cancel-add-board {
	display: none;
}

#cancel-add-board::part(base) {
	background: none;
	border: none;
	font-weight: var(--fontweight_heavy);
	color: var(--textSupport);
	font-size: var(--font_large);
}

sl-dropdown::part(panel) {
	box-shadow: none;
}

sl-menu-item::part(submenu-icon) {
	display: none;
}

.mystuff-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#sortMenu::part(footer) {
	display: none;
}

sl-button.cancel-btn {
	width: min-content;
}

sl-button.save-btn,
sl-button.confirm-btn {
	width: 100%;
}

sl-button.save-btn::part(label),
sl-button.confirm-btn::part(label),
sl-button.cancel-btn::part(label) {
	font-size: var(--font_large);
}

sl-button.cancel-btn::part(base) {
    background: transparent;
    border: transparent;
    color: var(--textSupport);
}

.add-board-list {
	display: grid;
    margin: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 16px;
}

.confirm-archive::part(header-actions) {
	display: none;
}

.confirm-archive::part(title) {
	text-align: center;
}


/*SETTINGS */
.settings-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.access-options,
.notif-options {
	display: flex;
	flex-direction: column;
}

.access-option,
.notif-option {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 87px;
	align-items: center;
	gap:12px;
}

.access-option:nth-last-child(n+2),
.notif-option:nth-last-child(n+2) {
	border-bottom: 1px solid var(--background);
}

.access-btn {
	color: var(--textSecondary);
	font-weight: var(--fontweight_500);
	line-height: 18px;
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.access-btn svg {
 height: 20px;
	width: 20px;
}

.notif-text {
	display: flex;
	flex-direction: column;
}

.access-h1,
.notif-h1 {
	font-size: var(--font_large);
	font-weight: var(--fontweight_500);
	line-height: 20px;
	color: var(--textMain);
}

.access-p,
.notif-p {
	font-size: var(--font_main);
	line-height: 18px;
	color: var(--textSecondary);
	font-weight: 400;
}

sl-switch::part(control) {
	background: var(--menu);
	border-color: var(--menu);
}

sl-switch[checked]::part(control) {
	background: var(--Purple);
	border-color: var(--Purple)
}

sl-switch::part(thumb) {
	background: var(--White);
	border: none;
	height: 20px;
	width: 20px;
}

.notif-info {
	display: flex;
	align-items: center;
	line-height: 18px;
	margin: 16px 0;
	color: var(--textSecondary);
}

.update-link {
	color: var(--Purple);
	text-decoration: underline;
}

sl-drawer#theme-modal::part(body),
sl-drawer#hand-modal::part(body) {
	text-align: left;
}

.theme-info::part(form-control-input),
.hand-info::part(form-control-input) {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
sl-radio.theme-option::part(control),
sl-radio.hand-option::part(control) {
	border-color: var(--menu);
}
	
sl-radio.theme-option::part(control--checked),
sl-radio.hand-option::part(control--checked) {
	background: var(--Purple);
	border-color: var(--Purple);
}

.account-h1 {
	color: var(--Pink);
	font-size: var(--font_large);
	font-weight: var(--fontweight_500);
}

/* TESTING */
/* TESTING*/
.mypattern-item {
    display: block;
    width: 100%;
    float: left;
    transition: all .5s ease-out;
    box-sizing: border-box;
}

.mypattern-image {
    width: 100%;
    position: relative;
    padding-bottom: 78.36%;
    height: 0;
    /* overflow: hidden; */
}

.rem_tester {
	cursor: pointer;
}

.rem_tester::part(base) {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    padding: 0 8px;
    height: 24px;
    background: var(--wishlistBg);
    border-color: var(--White);
    border-radius: 31px;
    width: 32px;
    display: flex;
}

.need_help::part(base) {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    padding: 0 8px;
    height: 24px;
    background: var(--wishlistBg);
    border-color: var(--White);
    border-radius: 31px;
    width: 32px;
    display: flex;
    align-items: center;
}

.need_help a {
    height: 24px;
    display: flex;
    align-items: center;
}

.need_help svg, .rem_tester svg {
    height: 16px;
    width: 16px;
    color: var(--textMain);
}

.tester_deadline::part(base) {
    position: absolute;
    bottom: 4px;
    left: 4px;
    border-radius: 31px;
    font-size: var(--font_second);
    padding: 0 8px;
    height: 24px;
    color: var(--White-500);
	background:var(--Pink);
    border-color: var(--Pink);
	z-index: 2;
}

/* HIDE MOBILE */
.hidemobile {
	display: none;
}

.myownpatternTag::part(base) {
	background: var(--Purple) !important;
	top:unset!important;
	bottom:4px;
} 

.myownpatternTag img {
	background: transparent;
    width: 14px !important;
    height: 14px !important;
    margin-right: 5px;
    margin-top: -1px;
}

/* tags */

.tagify__dropdown__item__avatar-wrap {
	display:none!important; /* don't show photos of categories */
	}
	
	.tagify__dropdown.color-blue .tagify__dropdown__item {
	gap:0;
	}
	
	.tagify__dropdown.color-blue strong {
	font-weight:500;
	font-size:16px;
	}
	
	.tagify__dropdown__item--active {
	color:inherit!important;
	opacity:0.6;
	}
	
	.tagify__dropdown__wrapper {
	border-color:var(--Purple)!important;
	border-radius:0px 0px 12px 12px;
	}

.stash_tag_item {
	display: flex  ;
	overflow-x: auto; overflow-y: hidden;
	width: 100%;
  }

  .tagify__tag>div::before {
	position:relative!important;
  }

  .tagify.tagify--focus {
    border-color: var(--Purple);
}
  .stash_tag_total {
	color:var(--textSupport);
  }

  sl-select[size="medium"]::part(combobox) {
	font-family: var(--fontInter);
	background: none;
	color: var(--textMain);
	border-radius: 12px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--background);
  }

  sl-select:not([disabled])[open]::part(combobox),
  sl-select:not([disabled]):focus::part(combobox) {
	border-color: var(--Purple) !important;
  }

  sl-option::part(base) {
	font-family: var(--fontInter);
	background-color: transparent;
	color: var(--textMain);
  }
  
  /* Style for the selected option */
  sl-option[aria-selected="true"]::part(base) {
	background-color: var(--Purple) !important;
	color: var(--White-500);
  }
  
  .stash_tag_name {
	margin: 10px;
	cursor: pointer;
	/* width: 200px; */
	/* flex: 1; */
	white-space: nowrap;
	border: 1px solid var(--menu);
	color: var(--textMain);
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 4px !important;
	font-size: var(--font_main);
	font-weight: var(--fontweight_main);
	font-family: var(--fontInter);
  }

  .mystuff-page .journal_by {
	display:none; /* silly to show on my own page */
  }

@media screen and (min-width:640px) {
	.all-makers-list, .all-shops-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 768px) {
	.mystuff-container-search sl-input.mystuff-search-bar::part(base) {
		width: 100%;
	}
}

@media screen and (min-width:1024px) {
	#dev_menu {
		display: flex;
	}

	.stash_footer {
		padding: 0;
	}

	#stash_img_edit {
		height:400px;
	}

	.mystuff-nav.makes .mystuff-nav-top,
	.mystuff-nav.settings .mystuff-nav-top,
	.mystuff-nav.ribblrplus .mystuff-nav-top, 
	.mystuff-nav.board .mystuff-nav-top,
	.mystuff-nav.wish_board .mystuff-nav-top,
	.mystuff-nav.mat_board .mystuff-nav-top,
	.mystuff-nav.patterns .mystuff-nav-top,
	.mystuff-nav.materials .mystuff-nav-top,
	.mystuff-nav.shops .mystuff-nav-top,
	.mystuff-nav.makers .mystuff-nav-top,
	.mystuff-nav.stash .mystuff-nav-top,
	.mystuff-nav.allpatterns .mystuff-nav-top,
	.mystuff-nav.boards .mystuff-nav-top,
	.mystuff-nav.archive .mystuff-nav-top,
	.mystuff-nav.testing .mystuff-nav-top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.mystuff-nav.makes .page-nav,
	.mystuff-nav.settings .page-nav,
	.mystuff-nav.ribblrplus .page-nav,
	.mystuff-nav.board .page-nav,
	.mystuff-nav.wish_board .page-nav,
	.mystuff-nav.mat_board .page-nav,
	.mystuff-nav.patterns .page-nav,
	.mystuff-nav.materials .page-nav,
	.mystuff-nav.shops .page-nav,
	.mystuff-nav.makers .page-nav,
	.mystuff-nav.stash .page-nav,
	.mystuff-nav.allpatterns .page-nav,
	.mystuff-nav.boards .page-nav,
	.mystuff-nav.archive .page-nav,
	.mystuff-nav.testing .page-nav {
		gap: 12px;
	}

	.mystuff-nav.makes .page-title,
	.mystuff-nav.settings .page-title,
	.mystuff-nav.ribblrplus .page-title,
	.mystuff-nav.board .page-title,
	.mystuff-nav.mat_board .page-title,
	.mystuff-nav.wish_board .page-title,
	.mystuff-nav.patterns .page-title,
	.mystuff-nav.materials .page-title,
	.mystuff-nav.shops .page-title,
	.mystuff-nav.makers .page-title,
	.mystuff-nav.archive .page-title,
	.mystuff-nav.testing .page-title {
		position: relative;
	}

	.page-subtitle {
		text-align: left;
	}

	.mystuff-container-search .search-item {
		width: 276px;
	}

	.search_btn,
	.page-btn .board-actions::part(base),
	.page-btn .stash-actions::part(base),
	.page-btn .add-board,
	.search_filter,
	.search_sort,
	.back-btn {
		height: 48px;
		width: 48px;
		min-height: 48px;
	}

	sl-menu.stash-menu {
		display: block!important;
	}
	
	.hidemobile {
		display: flex;
	}

	.hidedesktop {
		display: none;
	}

	.designer-info {
        min-width: 166px;
        width: fit-content;
    }

	.fav-shop sl-button::part(base) {
        padding: 10px 12px;
    }


	/* ================*/
	
	.mypattern-menu {
		display: block;
	}

	.makes-profile-details {
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
	}
	
	#edit_container {
		flex-direction: row;
	}

	.stash_edit_details,
	.stash-img-section {
		width: 50%;
	}

	.stash_footer {
		background: none;
		border-top: none;
	}
	
	.stash_cancel {
		display: none;
	}

	sl-menu-item.share_it {
			fill: none;
			width: auto;
			padding: 0;
			border-radius: initial;
	}
}

@media screen and (min-width:1280px) {
	.mypatterns-page {
		margin: -16px 2% 0 2%;
	}

	sl-card.section::part(base) {
		padding: 24px;
	}

	.patterns-title svg {
		height: 24px;
		width: 24px;
	}

	.patterns-title .add-pattern svg {
		height: 20px;
		width: 20px;
	}
	
	sl-card.section::part(body) {
		border-radius: 24px;
		box-sizing: border-box;
	}
	
	sl-menu.mypattern-menu {
	    width: 250px;
	    border-radius: 16px;
	    background: var(--White);
	    border: 1px solid var(--background);
	    display: none;
	    z-index: 1;
	    top: 4px;
	}

	sl-menu.mypattern-menu sl-menu-item::part(checked-icon) {
		display: none;
	}

	.mypattern-menu .add-pat-board::part(label),
	.mypattern-menu .unarchive-pat::part(label),
	.mypattern-menu .archive-pat::part(label) {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 0 16px;
	}

	.mypattern-menu .icon {
		height: 20px;
	}

	.mypattern-menu .icon svg{
		height: 20px;
		width: 20px;
	}

	sl-menu-item.share-pattern::part(base),
	sl-menu-item.add-pat-board::part(base),
	sl-menu-item.unarchive-pat::part(base),
	sl-menu-item.archive-pat::part(base) {
		color: var(--textMain);
		border-bottom: 1px solid var(--background);
		height: 44px;
		align-items: center;
		display: flex;
		box-sizing: border-box;
		padding: 12px 0;
	}
	
	sl-menu-item:hover.add-pat-board::part(base),
	sl-menu-item:focus.add-pat-board::part(base),
	sl-menu-item:hover.unarchive-pat::part(base),
	sl-menu-item:focus.unarchive-pat::part(base),
	sl-menu-item:hover.archive-pat::part(base),
	sl-menu-item:focus.archive-pat::part(base) {
		background: var(--btnBackground);
	}

	sl-menu-item.unarchive-pat::part(base),
	sl-menu-item.archive-pat::part(base) {
		border-bottom: none;
	}
	
	#cancel-add-board {
		display: flex;
	}
}