.bz-monospace {
    font-family: monospace;
}

.bz-debug {
    background-color: darkorange;
    color: black;
}

.bz-donations-dialog {
    background: linear-gradient(to bottom left, #1f2d8f, #159eff);
    color: white;
}

.bz-donations-banner {
    --banner-color: #159eff;
}

.updates-amount {
	background-color: white;
	color: var(--accent-bg-color);
	font-size: 0.60em;
	border-radius: 9999px;
	font-weight: 900;
}

.updates-amount-border {
  background-color: var(--accent-bg-color);
  	border-radius: 9999px;
}

.search-box {
  outline: 0 solid transparent;
  outline-offset: 6px;
  transition-property: outline, outline-offset;
  transition-duration: 200ms;
  padding: 8px 12px;
  border-radius: 9999px;
  background-color: var(--card-bg-color);
}

.search-box:focus-within {
  outline-color: color-mix(in srgb, var(--accent-color), transparent);
  outline-offset: 0;
  outline-width: 2px;
}

.rich-screenshot-box {
	background-color: var(--sidebar-bg-color);
}

@media (prefers-color-scheme: light) {
  .search-box {
    background-color: var(--shade-color);
  }

  .rich-screenshot-box {
	  background-color: var(--sidebar-bg-color);
  }
}

.search-box > text placeholder {
    opacity: 0.55;
}

.clear-button {
  min-height: 24px;
}

.search-grid {
  background-color: var(--window-bg-color);
}

.search-grid > child {
	padding: 0;
	margin: 6px 6px;
	border-radius: 12px;
	transition: background-color 200ms;
}

.narrow .search-grid > child {
	margin: 6px 12px;
}

.card-row-btn {
    border-radius: 0;
}

.screenshot {
    border-radius: 20px;
}

.browser-banner {
    border-radius: 25px;
    background-color: transparent;
}
.browser-banner-title {
    font-size: 3.2em;
    font-weight: bolder;
}
.browser-banner-subtitle {
    font-size: 2.0em;
    font-weight: bold;
}
.browser-banner-description {
    font-size: 1.33em;
    font-weight: normal;
}

.installed-size {
	font-weight: 500;
}

.verified {
  color: @blue_2;
}

.support {
    --accent-fg-color : #f06292;
    --accent-bg-color : alpha(#f06292, 0.25);
    --accent-color : #f06292;
}

.favorite {
    --accent-fg-color: @accent_bg_color;
    --accent-bg-color : alpha(@accent_bg_color, 0.25);
    --accent-color: @accent_color;
}

.favorite * {
    --accent-fg-color: @accent_fg_color;
    --accent-bg-color:  @accent_bg_color;
    --accent-color: @accent_color;
}

.orange {
  --accent-fg-color: @orange_5;
  --accent-color: alpha(@orange_5, 0.25);
  --accent-bg-color: @orange_5;
}

.green {
    --accent-fg-color : #8ff0a4;
    --accent-bg-color : alpha(#2ec27e, 0.25);
    --accent-color : #8ff0a4;
}

.blue {
    --accent-fg-color : #99c1f1;
    --accent-bg-color : alpha(#1a5fb4, 0.25);
    --accent-color : #99c1f1;
}

.dark-blue {
    --accent-fg-color : #99c1f1;
    --accent-bg-color : #1a5fb4;
    --accent-color : #99c1f1;
}

@media (prefers-color-scheme: light) {
    .green {
        --accent-fg-color : #2ec27e;
        --accent-bg-color : alpha(#8ff0a4, 0.25);
        --accent-color : #2ec27e;
    }
    .blue {
        --accent-fg-color : #1a5fb4;
        --accent-bg-color : alpha(#99c1f1, 0.25);
        --accent-color : #1a5fb4;
    }
    .dark-blue {
        --accent-fg-color : #1C71D8;
        --accent-bg-color : #1C71D8;
        --accent-color : #1C71D8;
    }
}

.grey {
	--accent-color: alpha(@window_fg_color,0.75);
	--accent-bg-color: @window_fg_color;
}

.grey.colored {
    --accent-fg-color : @window_fg_color;
    --accent-bg-color : alpha(@window_fg_color,0.05);
    --accent-color : alpha(@window_fg_color,0.75);
}

.circular-lozenge.green,
.lozenge.green {
	color: @green_5;
	background-color: alpha(@green_3, .25);
}

.circular-lozenge.yellow,
.lozenge.yellow {
	color: #ae7b03;
	background: alpha(@yellow_5, .25);
}

.circular-lozenge.orange,
.lozenge.orange {
	color: @orange_5;
	background-color: alpha(@orange_4, .25);
}

.circular-lozenge.red,
.lozenge.red {
	color: @red_4;
	background-color: alpha(@red_2, .25);
}

.circular-lozenge.grey,
.lozenge.grey {
  color: @window_fg_color;
	background-color: alpha(@dark_3, .25);
}

@media (prefers-color-scheme: dark) {
  .circular-lozenge.green,
  .lozenge.green {
	  color: @green_1;
	  background-color: alpha(@green_4, .25);
  }

  .circular-lozenge.yellow,
  .lozenge.yellow {
	  color: @yellow_2;
	  background: alpha(#cd9309, .25);
  }

  .circular-lozenge.orange,
  .lozenge.orange {
	  color: @orange_1;
  }

  .circular-lozenge.red,
  .lozenge.red {
	  color: #ff7b63;
  }

  .circular-lozenge.grey,
  .lozenge.grey {
	  background-color: alpha(@light_5, .25);
  }
}

.floating-tooltip {
	background-color: var(--dialog-bg-color);
}

.floating-tooltip .monospace {
	font-size: 1em;
}

.flathub {
	--accent-color: alpha(@window_fg_color,0.75);
	--accent-bg-color: @window_fg_color;
}

@media (prefers-color-scheme: dark) {
  .flathub {
    --accent-color: alpha(#fafafa,0.75);
    --accent-bg-color: #7847b8;
  }
}

global-progress {
  color: var(--accent-bg-color);
}

global-progress > *:first-child {
  background: var(--flag-gradient, var(--accent-bg-color));
}

global-progress image {
  color: var(--window-fg-color);
}

.global-progress-button {
	padding: 5px;
}

.lozenge {
	  font-size: 18px;
	  font-weight: bold;
	  border-radius: 99999px;
	  padding: 5px 11px;
	  min-width: 18px;
	  min-height: 22px;
	  color: var(--accent-color);
	  background-color: alpha(var(--accent-bg-color),0.15);
	  transition: background-color 150ms ease;
}

.lozenge.small {
	padding: 1px 9px;
	font-size: 12px;
	font-weight: bold;
}

.lozenge-ring-button {
	padding: 0;
	border-radius: 999999px;
	background: transparent;
}

.circular-lozenge {
	font-weight: bold;
	border-radius: 99999px;
	padding: 9px 11px;
	min-width: 18px;
	min-height: 22px;
	color: var(--accent-color);
	background-color: alpha(var(--accent-bg-color),0.15);
}

.circular-lozenge.large {
	font-size: 24px;
	padding: 15px 18px;
	min-width: 24px;
	min-height: 30px;
}

button.context-tile:hover .lozenge {
  background-color: alpha(var(--accent-bg-color),0.25);
}

button.context-tile:active .lozenge {
  background-color: alpha(var(--accent-bg-color),0.35);
}

.small-pill {
    padding: 2px 12px;
    border-radius: 99999px;
}

.medium-pill {
	border-radius: 99999px;
}

.colored {
    background-color: var(--accent-bg-color);
    color: var(--accent-color);
}

.card.colored {
    background-color: alpha(var(--accent-bg-color),0.15);
    color: var(--accent-color);
}

.small-pill.dimmed {
    background-color: alpha(@theme_fg_color, 0.15);
}

.small-pill.error {
    background-color: alpha(@error_bg_color, 0.15);
}

.installed-pill {
	background-color: alpha(@success_bg_color, 0.15);
	color: @success_color;
	font-weight: 500;
	font-size: 0.9em;
 	padding: 2px 7px 2px 4.5px;
}

.sp-section .installed-pill {
  background-color: alpha(@window_fg_color, 0.10);
  color: alpha(@window_fg_color, 0.75);
}

.download-size-pill{
  padding: 2px 8px;
}

.flathub-page-section {
    border-radius: 10px;
}

.transaction-list-view row {
    margin: 0;
    padding: 0;
}

window.narrow .app-title {
  font-size: 16pt;
}

.developer-badge > button {
	padding: 0;
  	background-color: transparent;
}

.developer-badge:focus > button {
	border-radius: 5px;
}

window.narrow .app-developer {
	font-size: small;
}

.context-tile {
  box-shadow: none;
	padding: 4px;
}

button.context-tile {
  background-color: transparent;
}

.context-tile-text {
	font-size: 10pt;
	font-weight: 500;
}

.wide-image {
	margin-top: -28px;
	margin-bottom: -28px;
}

.screenshot-carousel.frame {
	border-width: 1px 0;
}

.screenshot-carousel button{
	margin: 12px;
}

.carousel-box {
  background-color: var(--view-bg-color);
}

toggle-group.huge,
toggle-group.huge * {
  border-radius: 9999px;
}

.huge > toggle {
  padding: 3px 12px;
}

.otg {
  background: linear-gradient(to right, #2f3d9f, #682889);
}

.wlg {
  background: linear-gradient(to right, #821756, #136673);
}

.sp-section .card:not(:hover):not(:active) {
  background: transparent;
}

.sp-section .card {
  box-shadow: none;
}

@media (prefers-color-scheme: light) {
  .otg {
    background: linear-gradient(to right, #c6eaf8, #c4f3c9);
  }

  .wlg {
    background: linear-gradient(to right, #fdcde0, #b0e5f0);
  }

  .sp-section .card:hover {
    background: rgba(255, 255, 255, 0.50);
  }

  .sp-section .card:active {
    background: rgba(255, 255, 255, 0.75);
  }
}

.sp-section-image {
	margin-top: -95px;
	margin-bottom: -95px;
}

.sp-section-title {
	font-size: 3.5em;
}

.decorated-screenshot {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.indicator-box button {
  margin: 0 4px 4px 0;
}

.pip-button.osd-box {
  padding: 0;
}

.pip-button > button {
  margin: 5px;
}

window,
headerbar,
.global-search {
  transition: background-color 0.2s ease;
}

.header-osd windowcontrols button image {
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
  background-image: none;
}

.osd-box {
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.65);
  padding: 6px;
  color: white;
}

.view-dark {
  background-color: black;
  color: white;
}

.header-osd box.horizontal:not(.end) {
	background-color: rgba(0, 0, 0, 0.65);
	border-radius: 10px;
}

.accent-button {
  border-radius: 9999px;
  padding: 3px;
  background: var(--flag-gradient, var(--accent-bg-color));
  min-width: 32px;
  min-height: 32px;
  outline: none;
  background-clip: content-box;
  background-origin: content-box;
  box-shadow: none;
  transition: transform 0.3s ease;
}

.accent-button.horizontal {
  transform: rotate(-90deg);
}

.accent-button-box > flowboxchild {
  padding: 0;
  background-color: transparent;
}

.accent-button:checked {
  box-shadow: 0 0 0 3px var(--accent-bg-color);
}
.accent-button:focus:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
}
.accent-button:checked:focus:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-bg-color),
              0 0 0 6px color-mix(in srgb, var(--accent-color) 30%, transparent);
}


/* Category buttons styling modified from GNOME Software*/
.category-tile {
  font-weight: 700;
  font-size: 13pt;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  padding-left: 32px;
  padding-right: 32px;
}

window.narrow .category-tile {
  font-size: 14pt;
  padding-left: 24px;
  padding-right: 24px;
}

/* All background gradients are at 135deg for consistency */

.category-tile.category-recently-updated {
  background: linear-gradient(135deg, #f9ef69, #26a269);
  color: #0c3020;
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}
.category-tile.category-recently-updated:hover {
  background: linear-gradient(135deg, shade(#f9ef69, 1.1), shade(#26a269, 1.1));
}
.category-tile.category-recently-updated:active {
  background: linear-gradient(135deg, shade(#f9ef69, 0.95), shade(#26a269, 0.95));
}

.category-tile.category-recently-added {
  background: linear-gradient(135deg, #99a3eb, #495ade);
}
.category-tile.category-recently-added:hover {
  background: linear-gradient(135deg, shade(#99a3eb, 1.1), shade(#495ade, 1.1));
}
.category-tile.category-recently-added:active {
  background: linear-gradient(135deg, shade(#99a3eb, .95), shade(#495ade, .95));
}

.category-tile.category-trending {
  background: linear-gradient(135deg, #99c1f1, #3584e4);
}
.category-tile.category-trending:hover {
  background: linear-gradient(135deg, shade(#99c1f1, 1.1), shade(#3584e4, 1.1));
}
.category-tile.category-trending:active {
  background: linear-gradient(135deg, shade(#99c1f1, .95), shade(#3584e4, .95));
}

.category-tile.category-popular {
  background: linear-gradient(135deg, #f7ef74, #ffbf6f);
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}
.category-tile.category-popular:hover {
  background: linear-gradient(135deg, shade(#f7ef74, 1.1), shade(#ffbf6f, 1.1));
}
.category-tile.category-popular:active {
  background: linear-gradient(135deg, shade(#f7ef74, .95), shade(#ffbf6f, .95));
}

.category-tile.category-mobile {
  background: linear-gradient(135deg, #c6eaf8, #c4f3c9);
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}
.category-tile.category-mobile:hover {
  background: linear-gradient(135deg, shade(#c6eaf8, 1.1), shade(#c4f3c9, 1.1));
}
.category-tile.category-mobile:active {
  background: linear-gradient(135deg, shade(#c6eaf8, .95), shade(#c4f3c9, .95));
}

.category-tile.category-graphics {
  background: linear-gradient(135deg, #ce8cd7 0%, #2861c6 100%);
}
.category-tile.category-graphics:hover {
  background: linear-gradient(135deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
}
.category-tile.category-graphics:active {
  background: linear-gradient(135deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
}

.category-tile.category-development {
  background: linear-gradient(135deg, #444449 30%, #333337 100%);
}
.category-tile.category-development:hover {
  background: linear-gradient(135deg, shade(#444449, 1.06) 30%, shade(#333337, 1.06) 100%);
}
.category-tile.category-development:active {
  background: linear-gradient(135deg, shade(#444449, .95) 30%, shade(#333337, .95) 100%);
}

.category-tile.category-education {
  background: linear-gradient(135deg, #2ec27e 30%, #27a66c 100%);
}
.category-tile.category-education:hover {
  background: linear-gradient(135deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
}
.category-tile.category-education:active {
  background: linear-gradient(135deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
}

.category-tile.category-game {
  background: linear-gradient(135deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
  color: #393484;
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}
.category-tile.category-game:hover {
  background: linear-gradient(135deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
}
.category-tile.category-game:active {
  background: linear-gradient(135deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
}

.category-tile.category-network {
  background: linear-gradient(135deg, #ff6b35, #ed333b);
}
.category-tile.category-network:hover {
  background: linear-gradient(135deg, shade(#ff6b35, 1.1), shade(#ed333b, 1.1));
}
.category-tile.category-network:active {
  background: linear-gradient(135deg, shade(#ff6b35, .95), shade(#ed333b, .95));
}

.category-tile.category-office {
  padding: 1px;
  color: #1c71d8;
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
  background-color: #fdf8d7;
  background-image: linear-gradient(#deddda 1px, transparent 1px),
                    linear-gradient(90deg, #deddda 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px;
  background-position: -1px -4px, center -1px;
}
.category-tile.category-office:hover {
  background-color: shade(#fdf8d7, 1.03);
  background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px),
                    linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px);
}
.category-tile.category-office:active {
  background-color: shade(#fdf8d7, .93);
  background-image: linear-gradient(shade(#deddda, .97) 1px, transparent 1px),
                    linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px);
}

.category-tile.category-audiovideo {
  background: linear-gradient(135deg, #ffcd3c 0%, #ff6b35 100%);
}
.category-tile.category-audiovideo:hover {
  background: linear-gradient(135deg, shade(#ffcd3c, 1.08) 0%, shade(#ff6b35, 1.08) 100%);
}
.category-tile.category-audiovideo:active {
  background: linear-gradient(135deg, shade(#ffcd3c, .95) 0%, shade(#ff6b35, .95) 100%);
}

.category-tile.category-science {
  background: linear-gradient(135deg, #8ff0a4 0%, #1c71d8 100%);
}
.category-tile.category-science:hover {
  background: linear-gradient(135deg, shade(#8ff0a4, 1.1) 0%, shade(#1c71d8, 1.1) 100%);
}
.category-tile.category-science:active {
  background: linear-gradient(135deg, shade(#8ff0a4, .95) 0%, shade(#1c71d8, .95) 100%);
}

.category-tile.category-system {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.category-tile.category-system:hover {
  background: linear-gradient(135deg, shade(#6c757d, 1.15) 0%, shade(#495057, 1.15) 100%);
}
.category-tile.category-system:active {
  background: linear-gradient(135deg, shade(#6c757d, .95) 0%, shade(#495057, .95) 100%);
}

.category-tile.category-utility {
  color: #ee5f50;
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #f6f5f4 0%, #deddda 100%);
}
.category-tile.category-utility:hover {
  background: linear-gradient(135deg, shade(#f6f5f4, 1.08) 0%, shade(#deddda, 1.08) 100%);
}
.category-tile.category-utility:active {
  background: linear-gradient(135deg, shade(#f6f5f4, .95) 0%, shade(#deddda, .95) 100%);
}

.category-tile.category-adwaita {
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
  background: linear-gradient(45deg, #1c71d8 0%, #57e289 100%);
}
.category-tile.category-adwaita:hover {
  background: linear-gradient(45deg, shade(#1c71d8, 1.08) 0%, shade(#57e289, 1.08) 100%);
}
.category-tile.category-adwaita:active {
  background: linear-gradient(45deg, shade(#1c71d8, .95) 0%, shade(#57e289, .95) 100%);
}

.category-tile.category-kde {
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #3584e4 0%, #704dac 100%);
}
.category-tile.category-kde:hover {
  background: linear-gradient(135deg, shade(#3584e4, 1.08) 0%, shade(#704dac, 1.08) 100%);
}
.category-tile.category-kde:active {
  background: linear-gradient(135deg, shade(#3584e4, .95) 0%, shade(#704dac, .95) 100%);
}

.category-tile.category-adwaita image,
.category-tile.category-kde image {
	-gtk-icon-shadow: none;
}

.installed-list-view > * {
    padding: 0;
    transition: background-color 200ms;
    	min-height: 0;
    margin: 5px 4.5px;
}

.narrow .installed-list-view > * {
    margin: 4px 4.5px;
}

.no-vertical-margin > row.hidden {
    margin-top: 0px;
    margin-bottom: 0px;
}

.no-vertical-margin > row:not(.hidden) {
  margin-bottom: 6px;
}

.user-data-list-view > * {
  margin: 0;
}

.user-data-list-view row {
	min-height: 0;
}

.no-min-height {
  min-height: 0;
}

.transaction-tile-title {
  font-size: 1.05em;
  font-weight: 450;
}

.operations {
	background-color: rgba(0, 0, 0, 0.10);
	border-radius: 0px 0px 12px 12px;
}

@media (prefers-color-scheme: light) {
	.operations {
		background-color: rgba(0, 0, 0, 0.050);
	}
}

.ops-toggle {
	transition: transform 200ms ease;
	transform: rotate(90deg);
}

.ops-toggle:checked,
.ops-toggle.rotated {
	transform: rotate(270deg);
}

.update-list {
	background-color: alpha(@card_bg_color, 0.8);
	border-radius: 0 0 12px 12px;
}

.update-toggle {
	border-radius: 0;
}

.update-card {
  border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(0,0,6,0.03), 0 1px 3px 1px rgba(0,0,6,0.07), 0 2px 6px 2px rgba(0,0,6,0.03);
}

@media (prefers-color-scheme: dark) {
  separator {
	  opacity: 0.5;
  }
}

.disable-adw-flow-box-styling {
    background-color: transparent;
    box-shadow: none;
}

curated-list-view,
curated-list-view list {
  background: var(--bg-color);
}

.bz-popup {
    border-radius: 15px;
    background: var(--window-bg-color);
    /* box-shadow: 0 0 20px 1px black; */
}