dotfiles

root / themes / ColdMetal-NoLogo / gtk-4.0 / gtk-dark.css

gtk-dark.css (119708B)

---

 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
 /*
 widget text/foreground color */
 @define-color theme_fg_color #eff0f2;
 /*
 text color for entries, views and content in general */
 @define-color theme_text_color #eff0f2;
 /*
 widget base background color */
 @define-color theme_bg_color #1a1b26;
 /*
 text widgets and the like base background color */
 @define-color theme_base_color #1a1b26;
 /*
 base background color of selections */
 @define-color theme_selected_bg_color #d5d6db;
 /*
 text/foreground color of selections */
 @define-color theme_selected_fg_color rgba(0, 0, 0, 0.87);
 /*
 base background color of insensitive widgets */
 @define-color insensitive_bg_color #1a1b26;
 /*
 text foreground color of insensitive widgets */
 @define-color insensitive_fg_color rgba(239,240, 242, 0.5);
 /*
 insensitive text widgets and the like base background color */
 @define-color insensitive_base_color #343b58;
 /*
 widget text/foreground color on backdrop windows */
 @define-color theme_unfocused_fg_color #eff0f2;
 /*
 text color for entries, views and content in general on backdrop windows */
 @define-color theme_unfocused_text_color #eff0f2;
 /*
 widget base background color on backdrop windows */
 @define-color theme_unfocused_bg_color #1a1b26;
 /*
 text widgets and the like base background color on backdrop windows */
 @define-color theme_unfocused_base_color #1a1b26;
 /*
 base background color of selections on backdrop windows */
 @define-color theme_unfocused_selected_bg_color #d5d6db;
 /*
 text/foreground color of selections on backdrop windows */
 @define-color theme_unfocused_selected_fg_color rgba(0, 0, 0, 0.87);
 /*
 insensitive color on backdrop windows */
 @define-color unfocused_insensitive_color rgba(239,240, 242, 0.5);
 /*
 widgets main borders color */
 @define-color borders rgba(239,240, 242, 0.12);
 /*
 widgets main borders color on backdrop windows */
 @define-color unfocused_borders rgba(239,240, 242, 0.12);
 /*
 these are pretty self explicative */
 @define-color warning_color #FDD633;
 @define-color error_color #F28B82;
 @define-color success_color #81C995;
 /*
 these colors are exported for the window manager and shouldn't be used in applications,
 read if you used those and something break with a version upgrade you're on your own... */
 @define-color wm_title #eff0f2;
 @define-color wm_unfocused_title rgba(239,240, 242, 0.7);
 @define-color wm_highlight rgba(239,240, 242, 0.1);
 @define-color wm_bg #1a1b26;
 @define-color wm_unfocused_bg #1a1b26;
 @define-color wm_button_close_icon #1a1b26;
 @define-color wm_button_close_hover_bg #d5d6db;
 @define-color wm_button_close_active_bg #c7c7c7;
 /*
 FIXME this is really an API */
 @define-color content_view_bg #1a1b26;
 @define-color placeholder_text_color silver;
 /* Very contrasty background for text views (@theme_text_color foreground) */
 @define-color text_view_bg #1d1d1d;
 @define-color budgie_tasklist_indicator_color #eff0f2;
 @define-color budgie_tasklist_indicator_color_active #eff0f2;
 @define-color budgie_tasklist_indicator_color_active_window #999999;
 @define-color budgie_tasklist_indicator_color_attention #FDD633;
 @define-color STRAWBERRY_100 #FF9262;
 @define-color STRAWBERRY_300 #FF793E;
 @define-color STRAWBERRY_500 #F15D22;
 @define-color STRAWBERRY_700 #CF3B00;
 @define-color STRAWBERRY_900 #AC1800;
 @define-color ORANGE_100 #FFDB91;
 @define-color ORANGE_300 #FFCA40;
 @define-color ORANGE_500 #FAA41A;
 @define-color ORANGE_700 #DE8800;
 @define-color ORANGE_900 #C26C00;
 @define-color BANANA_100 #FFFFA8;
 @define-color BANANA_300 #FFFA7D;
 @define-color BANANA_500 #FFCE51;
 @define-color BANANA_700 #D1A023;
 @define-color BANANA_900 #A27100;
 @define-color LIME_100 #A2F3BE;
 @define-color LIME_300 #8ADBA6;
 @define-color LIME_500 #73C48F;
 @define-color LIME_700 #479863;
 @define-color LIME_900 #1C6D38;
 @define-color BLUEBERRY_100 #94A6FF;
 @define-color BLUEBERRY_300 #6A7CE0;
 @define-color BLUEBERRY_500 #3F51B5;
 @define-color BLUEBERRY_700 #213397;
 @define-color BLUEBERRY_900 #031579;
 @define-color GRAPE_100 #D25DE6;
 @define-color GRAPE_300 #B84ACB;
 @define-color GRAPE_500 #9C27B0;
 @define-color GRAPE_700 #830E97;
 @define-color GRAPE_900 #6A007E;
 @define-color COCOA_100 #9F9792;
 @define-color COCOA_300 #7B736E;
 @define-color COCOA_500 #574F4A;
 @define-color COCOA_700 #463E39;
 @define-color COCOA_900 #342C27;
 @define-color SILVER_100 #EEE;
 @define-color SILVER_300 #CCC;
 @define-color SILVER_500 #AAA;
 @define-color SILVER_700 #888;
 @define-color SILVER_900 #666;
 @define-color SLATE_100 #888;
 @define-color SLATE_300 #666;
 @define-color SLATE_500 #444;
 @define-color SLATE_700 #222;
 @define-color SLATE_900 #111;
 @define-color BLACK_100 #474341;
 @define-color BLACK_300 #403C3A;
 @define-color BLACK_500 #393634;
 @define-color BLACK_700 #33302F;
 @define-color BLACK_900 #2B2928;
 
 /***************
  * Base States *
  ***************/
 .background {
   background-color: #1a1b26;
   color: #eff0f2;
 }
 
 .background.csd {
   border-radius: 12px;
 }
 
 .background.maximized,
 .background.tiled,
 .background.fullscreen,
 .background.solid-csd {
   border-radius: 0;
 }
 
 dnd {
   color: #eff0f2;
 }
 
 .normal-icons {
   -gtk-icon-size: 16px;
 }
 
 .large-icons {
   -gtk-icon-size: 32px;
 }
 
 spinner:disabled,
 arrow:disabled,
 scrollbar:disabled,
 check:disabled,
 radio:disabled,
 treeview.expander:disabled {
   -gtk-icon-filter: opacity(0.5);
 }
 
 filechooser stack.view scrolledwindow treeview.view,
 iconview,
 .view {
   color: #eff0f2;
 }
 
 filechooser stack.view scrolledwindow treeview.view:disabled,
 iconview:disabled,
 .view:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 textview text {
   background-color: #1a1b26;
 }
 
 textview border {
   background-color: #343b58;
   color: rgba(239, 240, 242, 0.7);
 }
 
 iconview:hover,
 iconview:selected {
   border-radius: 3px;
 }
 
 rubberband,
 .content-view rubberband,
 .content-view columnview.view > rubberband,
 .content-view treeview.view > rubberband,
 .content-view .rubberband,
 columnview.view > rubberband,
 treeview.view > rubberband,
 gridview > rubberband,
 flowbox > rubberband {
   border: 1px solid #d5d6db;
   background-color: rgba(213, 214, 219, 0.3);
 }
 
 flowbox > flowboxchild {
   padding: 4px;
   border-radius: 6px;
 }
 
 .content-view .tile:selected {
   background-color: transparent;
 }
 
 gridview > child {
   padding: 3px;
 }
 
 gridview > child:selected {
   outline-color: alpha(currentColor, 0.06);
 }
 
 gridview > child box {
   border-spacing: 8px;
   margin: 12px;
 }
 
 coverflow cover {
   color: #eff0f2;
   background-color: #1a1b26;
   border: 1px solid black;
 }
 
 label.separator {
   color: rgba(239, 240, 242, 0.7);
 }
 
 label:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 headerbar label:disabled,
 tab label:disabled,
 button label:disabled {
   color: inherit;
 }
 
 label.osd {
   border-radius: 6px;
   background-color: rgba(25, 25, 25, 0.9);
   color: #eff0f2;
 }
 
 .dim-label {
   color: rgba(239, 240, 242, 0.7);
 }
 
 window.assistant .sidebar {
   padding: 4px 0;
 }
 
 window.assistant .sidebar label {
   min-height: 36px;
   padding: 0 12px;
   color: rgba(239, 240, 242, 0.5);
   font-weight: 500;
 }
 
 window.assistant .sidebar label.highlight {
   color: #eff0f2;
 }
 
 .osd popover.background > arrow,
 .osd popover.background > contents,
 popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents,
 popover.background.magnifier > arrow,
 popover.background.magnifier > contents,
 .osd {
   color: #eff0f2;
   background-color: #1a1b26;
   background-clip: padding-box;
   border-radius: 6px;
   border: none;
 }
 
 .osd {
   padding: 6px;
   margin: 6px;
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2),
     0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 }
 
 .osd.circular {
   border-radius: 9999px;
 }
 
 /*********************
  * Spinner Animation *
  *********************/
 @keyframes spin {
   to {
     transform: rotate(1turn);
   }
 }
 
 spinner {
   background: none;
   opacity: 0;
   -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
 }
 
 spinner:checked {
   opacity: 1;
   animation: spin 1s linear infinite;
 }
 
 spinner:checked:disabled {
   opacity: 0.5;
 }
 
 .large-title {
   font-weight: 300;
   font-size: 24pt;
 }
 
 .title-1 {
   font-weight: 800;
   font-size: 20pt;
 }
 
 .title-2 {
   font-weight: 800;
   font-size: 15pt;
 }
 
 .title-3 {
   font-weight: 700;
   font-size: 15pt;
 }
 
 .title-4 {
   font-weight: 700;
   font-size: 13pt;
 }
 
 .heading {
   font-weight: 700;
   font-size: 11pt;
 }
 
 .body {
   font-weight: 400;
   font-size: 11pt;
 }
 
 .caption {
   font-weight: 400;
   font-size: 9pt;
 }
 
 .caption-heading {
   font-weight: 700;
   font-size: 9pt;
 }
 
 /****************
  * Text Entries *
  ****************/
 
 entry {
   min-height: 36px;
   padding: 0 8px;
   border-spacing: 6px;
   border-radius: 6px;
   caret-color: currentColor;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1),
     box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.08);
   color: #eff0f2;
 }
 
 entry:focus-within {
   background-color: rgba(239, 240, 242, 0.08);
   box-shadow: inset 0 0 0 2px #d5d6db;
 }
 
 entry:drop(active) {
   background-color: alpha(currentColor, 0.08);
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
 }
 
 entry:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 entry.search {
   border-radius: 9999px;
 }
 
 entry.flat {
   min-height: 0;
   padding: 2px;
   border-radius: 0;
   background-color: transparent;
 }
 
 entry image {
   color: rgba(239, 240, 242, 0.7);
 }
 
 entry image:hover,
 entry image:active {
   color: #eff0f2;
 }
 
 entry image:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 entry image.left {
   margin-left: 2px;
   margin-right: 6px;
 }
 
 entry image.right {
   margin-left: 6px;
   margin-right: 2px;
 }
 
 entry undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(
     to top,
     transparent 50%,
     rgba(239, 240, 242, 0.3) 50%
   );
   padding-left: 1px;
   background-size: 1px 12px;
   background-repeat: repeat-y;
   background-origin: content-box;
   background-position: left top;
   margin: 0 4px;
   margin: 4px 0;
 }
 
 entry undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(
     to top,
     transparent 50%,
     rgba(239, 240, 242, 0.3) 50%
   );
   padding-right: 1px;
   background-size: 1px 12px;
   background-repeat: repeat-y;
   background-origin: content-box;
   background-position: right top;
   margin: 0 4px;
   margin: 4px 0;
 }
 
 entry.error {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1),
     box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.08);
   color: #eff0f2;
 }
 
 entry.error:focus-within {
   background-color: rgba(239, 240, 242, 0.08);
   box-shadow: inset 0 0 0 2px #f28b82;
 }
 
 entry.error:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 entry.warning {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1),
     box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.08);
   color: #eff0f2;
 }
 
 entry.warning:focus-within {
   background-color: rgba(239, 240, 242, 0.08);
   box-shadow: inset 0 0 0 2px #fdd633;
 }
 
 entry.warning:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 entry > progress,
 entry progress > trough > progress {
   margin: 2px -8px;
   border-bottom: 2px solid #d5d6db;
   background-color: transparent;
 }
 
 treeview entry.flat,
 treeview entry {
   background-color: #1a1b26;
 }
 
 treeview entry.flat,
 treeview entry.flat:focus-within,
 treeview entry,
 treeview entry:focus-within {
   border-image: none;
   box-shadow: none;
 }
 
 .entry-tag {
   margin: 2px;
   border-radius: 9999px;
   box-shadow: none;
   background-color: rgba(239, 240, 242, 0.12);
   color: #eff0f2;
 }
 
 .entry-tag:hover {
   background-image: image(alpha(currentColor, 0.08));
 }
 
 :dir(ltr) .entry-tag {
   margin-left: 4px;
   margin-right: 0;
   padding-left: 12px;
   padding-right: 8px;
 }
 
 :dir(rtl) .entry-tag {
   margin-left: 0;
   margin-right: 4px;
   padding-left: 8px;
   padding-right: 12px;
 }
 
 .entry-tag.button {
   box-shadow: none;
   background-color: transparent;
 }
 
 .entry-tag.button:not(:hover):not(:active) {
   color: rgba(239, 240, 242, 0.7);
 }
 
 editablelabel > stack > text {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1),
     box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.08);
   color: #eff0f2;
 }
 
 /***********
  * Buttons *
  ***********/
 @keyframes needs-attention {
   from {
     background-image: radial-gradient(
       farthest-side,
       #d5d6db 0%,
       rgba(213, 214, 219, 0) 0%
     );
   }
   to {
     background-image: radial-gradient(
       farthest-side,
       #d5d6db 95%,
       rgba(213, 214, 219, 0)
     );
   }
 }
 
 infobar.warning > revealer > box button,
 infobar.warning:backdrop > revealer > box button,
 popover.background.touch-selection button,
 popover.background.magnifier button,
 .titlebar.selection-mode
   button:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.7);
 }
 
 infobar.warning > revealer > box button:focus,
 popover.background.touch-selection button:focus,
 popover.background.magnifier button:focus,
 .titlebar.selection-mode
   button:focus:not(.suggested-action):not(.destructive-action),
 infobar.warning > revealer > box button:hover,
 popover.background.touch-selection button:hover,
 popover.background.magnifier button:hover,
 .titlebar.selection-mode
   button:hover:not(.suggested-action):not(.destructive-action),
 infobar.warning > revealer > box button:active,
 popover.background.touch-selection button:active,
 popover.background.magnifier button:active,
 .titlebar.selection-mode
   button:active:not(.suggested-action):not(.destructive-action),
 infobar.warning > revealer > box button:checked,
 popover.background.touch-selection button:checked,
 popover.background.magnifier button:checked,
 .titlebar.selection-mode
   button:checked:not(.suggested-action):not(.destructive-action) {
   color: #eff0f2;
 }
 
 infobar.warning > revealer > box button:disabled,
 popover.background.touch-selection button:disabled,
 popover.background.magnifier button:disabled,
 .titlebar.selection-mode
   button:disabled:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.3);
 }
 
 infobar.warning > revealer > box button:checked:disabled,
 popover.background.touch-selection button:checked:disabled,
 popover.background.magnifier button:checked:disabled,
 .titlebar.selection-mode
   button:checked:disabled:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.5);
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:not(.suggested-action):not(.destructive-action),
 button {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1),
     box-shadow 225ms cubic-bezier(0, 0, 0.2, 1);
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
   background-color: rgba(239, 240, 242, 0.08);
   color: #eff0f2;
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:focus:not(.suggested-action):not(.destructive-action),
 button:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08),
     inset 0 0 0 9999px transparent;
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:hover:not(.suggested-action):not(.destructive-action),
 button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:active:not(.suggested-action):not(.destructive-action),
 button:active {
   transition: box-shadow 225ms cubic-bezier(0, 0, 0.2, 1),
     background-color 225ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12);
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:disabled:not(.suggested-action):not(.destructive-action),
 button:disabled {
   box-shadow: none;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:checked:not(.suggested-action):not(.destructive-action),
 button:checked {
   box-shadow: none;
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:checked:hover:not(.suggested-action):not(.destructive-action),
 button:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
 actionbar
   > revealer
   > box
   .linked
   > button:checked:disabled:not(.suggested-action):not(.destructive-action),
 button:checked:disabled {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 button {
   min-height: 24px;
   min-width: 16px;
   padding: 6px 10px;
   border-radius: 6px;
   font-weight: 500;
 }
 
 button:drop(active) {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
 placessidebar .navigation-sidebar > row button.sidebar-button,
 calendar > header > button,
 columnview.view > header > button button.circular,
 treeview.view > header > button button.circular,
 row.activatable button.circular,
 check,
 radio,
 scrollbar button,
 notebook > header > tabs > arrow,
 spinbutton.vertical > button,
 spinbutton:not(.vertical) > button,
 modelbutton.flat,
 filechooser #pathbarbox > stack > box > button,
 window.dialog.message.csd .dialog-action-area > button,
 .app-notification button,
 actionbar
   > revealer
   > box
   button:not(.suggested-action):not(.destructive-action),
 popover.background.menu button,
 popover.background button.model,
 pathbar > button,
 headerbar button:not(.suggested-action):not(.destructive-action),
 .toolbar button,
 toolbar button,
 dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child),
 button.flat {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
   background-color: transparent;
   color: rgba(239, 240, 242, 0.7);
 }
 
 placessidebar .navigation-sidebar > row button.sidebar-button:focus,
 calendar > header > button:focus,
 columnview.view > header > button button.circular:focus,
 treeview.view > header > button button.circular:focus,
 row.activatable button.circular:focus,
 check:focus,
 radio:focus,
 scrollbar button:focus,
 notebook > header > tabs > arrow:focus,
 spinbutton.vertical > button:focus,
 spinbutton:not(.vertical) > button:focus,
 modelbutton.flat:focus,
 filechooser #pathbarbox > stack > box > button:focus,
 window.dialog.message.csd .dialog-action-area > button:focus,
 .app-notification button:focus,
 actionbar
   > revealer
   > box
   button:focus:not(.suggested-action):not(.destructive-action),
 popover.background.menu button:focus,
 popover.background button.model:focus,
 pathbar > button:focus,
 headerbar button:focus:not(.suggested-action):not(.destructive-action),
 .toolbar button:focus,
 toolbar button:focus,
 dropdown > .linked:not(.vertical) > button:focus:not(:only-child),
 combobox > .linked:not(.vertical) > button:focus:not(:only-child),
 button.flat:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: #eff0f2;
 }
 
 placessidebar .navigation-sidebar > row button.sidebar-button:hover,
 calendar > header > button:hover,
 columnview.view > header > button button.circular:hover,
 treeview.view > header > button button.circular:hover,
 row.activatable button.circular:hover,
 check:hover,
 radio:hover,
 scrollbar button:hover,
 notebook > header > tabs > arrow:hover,
 spinbutton.vertical > button:hover,
 spinbutton:not(.vertical) > button:hover,
 modelbutton.flat:hover,
 filechooser #pathbarbox > stack > box > button:hover,
 window.dialog.message.csd .dialog-action-area > button:hover,
 .app-notification button:hover,
 actionbar
   > revealer
   > box
   button:hover:not(.suggested-action):not(.destructive-action),
 popover.background.menu button:hover,
 popover.background button.model:hover,
 pathbar > button:hover,
 headerbar button:hover:not(.suggested-action):not(.destructive-action),
 .toolbar button:hover,
 toolbar button:hover,
 dropdown > .linked:not(.vertical) > button:hover:not(:only-child),
 combobox > .linked:not(.vertical) > button:hover:not(:only-child),
 button.flat:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
   color: #eff0f2;
 }
 
 placessidebar .navigation-sidebar > row button.sidebar-button:active,
 calendar > header > button:active,
 columnview.view > header > button button.circular:active,
 treeview.view > header > button button.circular:active,
 row.activatable button.circular:active,
 check:active,
 radio:active,
 scrollbar button:active,
 notebook > header > tabs > arrow:active,
 spinbutton.vertical > button:active,
 spinbutton:not(.vertical) > button:active,
 modelbutton.flat:active,
 filechooser #pathbarbox > stack > box > button:active,
 window.dialog.message.csd .dialog-action-area > button:active,
 .app-notification button:active,
 actionbar
   > revealer
   > box
   button:active:not(.suggested-action):not(.destructive-action),
 popover.background.menu button:active,
 popover.background button.model:active,
 pathbar > button:active,
 headerbar button:active:not(.suggested-action):not(.destructive-action),
 .toolbar button:active,
 toolbar button:active,
 dropdown > .linked:not(.vertical) > button:active:not(:only-child),
 combobox > .linked:not(.vertical) > button:active:not(:only-child),
 button.flat:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12);
   color: #eff0f2;
 }
 
 placessidebar .navigation-sidebar > row button.sidebar-button:disabled,
 calendar > header > button:disabled,
 columnview.view > header > button button.circular:disabled,
 treeview.view > header > button button.circular:disabled,
 row.activatable button.circular:disabled,
 check:disabled,
 radio:disabled,
 scrollbar button:disabled,
 notebook > header > tabs > arrow:disabled,
 spinbutton.vertical > button:disabled,
 spinbutton:not(.vertical) > button:disabled,
 modelbutton.flat:disabled,
 filechooser #pathbarbox > stack > box > button:disabled,
 window.dialog.message.csd .dialog-action-area > button:disabled,
 .app-notification button:disabled,
 actionbar
   > revealer
   > box
   button:disabled:not(.suggested-action):not(.destructive-action),
 popover.background.menu button:disabled,
 popover.background button.model:disabled,
 pathbar > button:disabled,
 headerbar button:disabled:not(.suggested-action):not(.destructive-action),
 .toolbar button:disabled,
 toolbar button:disabled,
 dropdown > .linked:not(.vertical) > button:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:disabled:not(:only-child),
 button.flat:disabled {
   box-shadow: none;
   background-color: transparent;
   color: rgba(239, 240, 242, 0.3);
 }
 
 filechooser #pathbarbox > stack > box > button:checked,
 window.dialog.message.csd .dialog-action-area > button:checked,
 .app-notification button:checked,
 actionbar
   > revealer
   > box
   button:checked:not(.suggested-action):not(.destructive-action),
 popover.background.menu button:checked,
 popover.background button.model:checked,
 pathbar > button:checked,
 headerbar button:checked:not(.suggested-action):not(.destructive-action),
 .toolbar button:checked,
 toolbar button:checked,
 dropdown > .linked:not(.vertical) > button:checked:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:not(:only-child),
 button.flat:checked,
 button.flat:checked:hover {
   background-color: alpha(currentColor, 0.1);
   color: #eff0f2;
 }
 
 filechooser #pathbarbox > stack > box > button:checked:disabled,
 window.dialog.message.csd .dialog-action-area > button:checked:disabled,
 .app-notification button:checked:disabled,
 actionbar
   > revealer
   > box
   button:checked:disabled:not(.suggested-action):not(.destructive-action),
 popover.background.menu button:checked:disabled,
 popover.background button.model:checked:disabled,
 pathbar > button:checked:disabled,
 headerbar
   button:checked:disabled:not(.suggested-action):not(.destructive-action),
 .toolbar button:checked:disabled,
 toolbar button:checked:disabled,
 dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 button.flat:checked:disabled {
   background-color: alpha(currentColor, 0.1);
   color: rgba(239, 240, 242, 0.5);
 }
 
 button.text-button {
   min-width: 32px;
   padding-left: 16px;
   padding-right: 16px;
 }
 
 button.text-button.flat {
   min-width: 48px;
   padding-left: 8px;
   padding-right: 8px;
 }
 
 button.image-button {
   min-width: 24px;
   padding: 6px;
 }
 
 button.text-button.image-button {
   min-width: 24px;
   padding: 6px;
   border-radius: 6px;
 }
 
 button.text-button.image-button label:first-child {
   margin-left: 10px;
 }
 
 button.text-button.image-button label:last-child {
   margin-right: 10px;
 }
 
 button.text-button.image-button.flat label:first-child {
   margin-left: 6px;
 }
 
 button.text-button.image-button.flat label:last-child {
   margin-right: 6px;
 }
 
 button.text-button.image-button image:not(:only-child) {
   margin: 0 4px;
 }
 
 .linked:not(.vertical) > button.flat:not(:only-child),
 .linked.vertical > button.flat:not(:only-child) {
   border-radius: 6px;
 }
 
 .linked:not(.vertical) > button.flat:focus,
 .linked.vertical > button.flat:focus {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
 button.osd {
   padding: 12px 16px;
 }
 
 button.osd.image-button {
   padding: 12px;
 }
 
 button.osd:disabled {
   opacity: 0;
 }
 
 button.suggested-action {
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
   box-shadow: none;
 }
 
 button.suggested-action:disabled {
   box-shadow: none;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 button.suggested-action:hover {
   box-shadow: inset 0 0 0 9999px transparent,
     0 2px 2.4px -1px rgba(213, 214, 219, 0.2),
     0 4px 3px 0 rgba(213, 214, 219, 0.14), 0 1px 6px 0 rgba(213, 214, 219, 0.12);
 }
 
 button.suggested-action:checked {
   background-color: rgba(168, 168, 168, 0.961);
 }
 
 button.suggested-action:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent,
     0 3px 3px -3px rgba(213, 214, 219, 0.3),
     0 2px 3px -1px rgba(213, 214, 219, 0.24),
     0 2px 5px 0 rgba(213, 214, 219, 0.12);
 }
 
 button.suggested-action:focus {
   box-shadow: 0 0 0 2px rgba(213, 214, 219, 0.35);
 }
 
 button.suggested-action.flat {
   background-color: transparent;
   color: #d5d6db;
 }
 
 button.suggested-action.flat:disabled {
   box-shadow: none;
   background-color: transparent;
   color: rgba(239, 240, 242, 0.3);
 }
 
 button.suggested-action.flat:checked {
   background-color: rgba(213, 214, 219, 0.3);
 }
 
 button.destructive-action {
   background-color: #f28b82;
   color: rgba(0, 0, 0, 0.87);
   box-shadow: none;
 }
 
 button.destructive-action:disabled {
   box-shadow: none;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 button.destructive-action:hover {
   box-shadow: inset 0 0 0 9999px transparent,
     0 2px 2.4px -1px rgba(242, 139, 130, 0.2),
     0 4px 3px 0 rgba(242, 139, 130, 0.14), 0 1px 6px 0 rgba(242, 139, 130, 0.12);
 }
 
 button.destructive-action:checked {
   background-color: rgba(182, 105, 98, 0.961);
 }
 
 button.destructive-action:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent,
     0 3px 3px -3px rgba(242, 139, 130, 0.3),
     0 2px 3px -1px rgba(242, 139, 130, 0.24),
     0 2px 5px 0 rgba(242, 139, 130, 0.12);
 }
 
 button.destructive-action:focus {
   box-shadow: 0 0 0 2px rgba(242, 139, 130, 0.35);
 }
 
 button.destructive-action.flat {
   background-color: transparent;
   color: #f28b82;
 }
 
 button.destructive-action.flat:disabled {
   box-shadow: none;
   background-color: transparent;
   color: rgba(239, 240, 242, 0.3);
 }
 
 button.destructive-action.flat:checked {
   background-color: rgba(242, 139, 130, 0.3);
 }
 
 stackswitcher > button > label {
   margin: 0 -6px;
   padding: 0 6px;
 }
 
 stackswitcher > button > image {
   margin: -3px -6px;
   padding: 3px 6px;
 }
 
 stackswitcher > button.needs-attention:checked > label,
 stackswitcher > button.needs-attention:checked > image {
   animation: none;
   background-image: none;
 }
 
 button.font > box,
 button.file > box {
   border-spacing: 6px;
 }
 
 button.font > box > box > label,
 button.file > box > box > label {
   font-weight: bold;
 }
 
 windowcontrols button:not(.suggested-action):not(.destructive-action),
 filechooser #pathbarbox > stack > box > button,
 check,
 radio,
 button.image-button,
 button.close,
 button.circular {
   border-radius: 9999px;
 }
 
 windowcontrols button:not(.suggested-action):not(.destructive-action) label,
 filechooser #pathbarbox > stack > box > button label,
 check label,
 radio label,
 button.image-button label,
 button.close label,
 button.circular label {
   padding: 0;
 }
 
 placessidebar .navigation-sidebar > row button.sidebar-button,
 notebook > header tab button.flat,
 popover.menu box.circular-buttons button.circular.image-button.model,
 spinbutton.vertical > button,
 spinbutton:not(.vertical) > button {
   min-height: 24px;
   min-width: 24px;
   padding: 0;
   border-radius: 9999px;
 }
 
 stacksidebar row.needs-attention > label,
 stackswitcher > button.needs-attention > label,
 stackswitcher > button.needs-attention > image {
   animation: needs-attention 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
   background-repeat: no-repeat;
   background-position: right 3px;
   background-size: 6px 6px;
 }
 
 stacksidebar row.needs-attention > label:dir(rtl),
 stackswitcher > button.needs-attention > label:dir(rtl),
 stackswitcher > button.needs-attention > image:dir(rtl) {
   background-position: left 3px;
 }
 
 .linked:not(.vertical) > entry,
 .linked:not(.vertical) > button,
 .linked:not(.vertical) > button.image-button {
   border-radius: 0;
 }
 
 .linked:not(.vertical) > entry:first-child,
 .linked:not(.vertical) > button:first-child {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
 }
 
 .linked:not(.vertical) > entry:last-child,
 .linked:not(.vertical) > button:last-child {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
 }
 
 .linked:not(.vertical) > entry:only-child,
 .linked:not(.vertical) > button:only-child {
   border-radius: 6px;
 }
 
 .linked.vertical > entry,
 .linked.vertical > button,
 .linked.vertical > button.image-button {
   border-radius: 0;
 }
 
 .linked.vertical > entry:first-child,
 .linked.vertical > button:first-child {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
 .linked.vertical > entry:last-child,
 .linked.vertical > button:last-child {
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
 
 .linked.vertical > entry:only-child,
 .linked.vertical > button:only-child {
   border-radius: 6px;
 }
 
 /* menu buttons */
 modelbutton.flat {
   min-height: 28px;
   padding: 0 9px;
   border-radius: 6px;
   color: #eff0f2;
 }
 
 modelbutton.flat arrow.left {
   -gtk-icon-source: -gtk-icontheme('go-previous-symbolic');
 }
 
 modelbutton.flat arrow.right {
   -gtk-icon-source: -gtk-icontheme('go-next-symbolic');
 }
 
 button.color {
   min-height: 24px;
   min-width: 24px;
   padding: 6px;
 }
 
 list > row button.image-button:not(.flat) {
   background-color: transparent;
   box-shadow: none;
   border: none;
 }
 
 list > row button.image-button:not(.flat):hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
 list > row button.image-button:not(.flat):active,
 list > row button.image-button:not(.flat):checked {
   transition: box-shadow 225ms cubic-bezier(0, 0, 0.2, 1),
     background-color 225ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12);
 }
 
 list > row button.image-button:not(.flat).suggested-action {
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 list > row button.image-button:not(.flat).destructive-action {
   background-color: #f28b82;
   color: rgba(0, 0, 0, 0.87);
 }
 
 /*********
  * Links *
  *********/
 link {
   color: #2196f3;
 }
 
 link:visited {
   color: #ce93d8;
 }
 
 button.link:link,
 button.link:link:focus,
 button.link:link:hover,
 button.link:link:active {
   color: #2196f3;
 }
 
 button.link:visited,
 button.link:visited:focus,
 button.link:visited:hover,
 button.link:visited:active {
   color: #ce93d8;
 }
 
 button.link > label {
   text-decoration-line: underline;
 }
 
 /*****************
  * GtkSpinButton *
  *****************/
 spinbutton {
   border-radius: 6px;
   padding: 0;
   border-spacing: 0;
   min-height: 0;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1),
     box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.08);
   color: #eff0f2;
 }
 
 spinbutton:focus-within {
   background-color: rgba(239, 240, 242, 0.08);
   box-shadow: inset 0 0 0 2px #d5d6db;
 }
 
 spinbutton:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 spinbutton:not(.vertical) > text {
   min-width: 32px;
   margin: 0;
   padding-left: 12px;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
 spinbutton:not(.vertical) > button {
   border: solid 6px transparent;
 }
 
 spinbutton:not(.vertical)
   > button:focus:not(:hover):not(:active):not(:disabled) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(239, 240, 242, 0.7);
 }
 
 spinbutton:not(.vertical) > button.up:dir(ltr),
 spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: -3px;
 }
 
 spinbutton:not(.vertical) > button.up:dir(rtl),
 spinbutton:not(.vertical) > button.down:dir(ltr) {
   margin-right: -3px;
 }
 
 spinbutton.vertical > text {
   margin: 0;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
   min-height: 36px;
   min-width: 42px;
   padding: 0;
 }
 
 spinbutton.vertical > button {
   padding: 0;
   border: solid 6px transparent;
 }
 
 spinbutton.vertical > button:focus:not(:hover):not(:active) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(239, 240, 242, 0.7);
 }
 
 spinbutton.vertical > button.up {
   margin: 0 3px;
 }
 
 spinbutton.vertical > button.down {
   margin: 0 3px;
 }
 
 list > row spinbutton:not(.vertical) > button {
   margin: 6px;
 }
 
 list > row spinbutton:not(.vertical) > button.up:dir(ltr),
 list > row spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: 3px;
 }
 
 list > row spinbutton:not(.vertical) > button.up:dir(rtl),
 list > row spinbutton:not(.vertical) > button.down:dir(ltr) {
   margin-right: 3px;
 }
 
 /**************
  * ComboBoxes *
  **************/
 dropdown > popover.menu.background > contents {
   padding: 0;
 }
 
 dropdown > button > box {
   border-spacing: 6px;
 }
 
 dropdown arrow,
 combobox arrow {
   -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
   min-height: 16px;
   min-width: 16px;
 }
 
 dropdown > popover.menu > contents modelbutton,
 combobox > popover.menu > contents modelbutton {
   padding-left: 9px;
   padding-right: 9px;
 }
 
 dropdown button.combo cellview:dir(ltr),
 combobox button.combo cellview:dir(ltr) {
   margin-left: -2px;
 }
 
 dropdown button.combo cellview:dir(rtl),
 combobox button.combo cellview:dir(rtl) {
   margin-right: -2px;
 }
 
 dropdown popover,
 combobox popover {
   margin-top: 4px;
   padding: 0;
 }
 
 dropdown popover listview,
 combobox popover listview {
   margin: 6px 0;
 }
 
 dropdown popover listview > row,
 combobox popover listview > row {
   padding: 6px;
 }
 
 dropdown popover listview > row:selected,
 combobox popover listview > row:selected {
   color: #eff0f2;
   background-color: alpha(currentColor, 0.06);
 }
 
 dropdown popover .dropdown-searchbar,
 combobox popover .dropdown-searchbar {
   padding: 6px;
 }
 
 dropdown.linked button:nth-child(2):dir(ltr),
 combobox.linked button:nth-child(2):dir(ltr) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 dropdown.linked button:nth-child(2):dir(rtl),
 combobox.linked button:nth-child(2):dir(rtl) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 dropdown > .linked:not(.vertical) > entry:not(:only-child),
 combobox > .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 6px;
 }
 
 dropdown > .linked:not(.vertical) > entry:not(:only-child):first-child,
 combobox > .linked:not(.vertical) > entry:not(:only-child):first-child {
   margin-right: -36px;
   padding-right: 36px;
 }
 
 dropdown > .linked:not(.vertical) > entry:not(:only-child):last-child,
 combobox > .linked:not(.vertical) > entry:not(:only-child):last-child {
   margin-left: -36px;
   padding-left: 36px;
 }
 
 dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child) {
   min-height: 16px;
   min-width: 16px;
   margin: 6px;
   padding: 4px;
   border-radius: 6px;
 }
 
 .linked:not(.vertical) > combobox:not(:first-child) > box > button.combo {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 .linked:not(.vertical) > combobox:not(:last-child) > box > button.combo {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .linked.vertical > combobox:not(:first-child) > box > button.combo {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
 .linked.vertical > combobox:not(:last-child) > box > button.combo {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 button.combo:only-child {
   border-radius: 6px;
   font-weight: normal;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1),
     box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(239, 240, 242, 0.08);
   color: #eff0f2;
 }
 
 button.combo:only-child:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: #eff0f2;
 }
 
 button.combo:only-child:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
   color: #eff0f2;
 }
 
 button.combo:only-child:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12);
   color: #eff0f2;
 }
 
 button.combo:only-child:checked {
   background-color: alpha(currentColor, 0.1);
   color: #eff0f2;
 }
 
 button.combo:only-child:disabled {
   box-shadow: none;
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 /************
  * Toolbars *
  ************/
 .toolbar,
 toolbar {
   padding: 3px 6px;
   background-color: #1a1b26;
   border-spacing: 6px;
 }
 
 .osd .toolbar,
 .osd toolbar {
   background-color: transparent;
 }
 
 .app-notification,
 .toolbar.osd,
 toolbar.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   padding: 6px;
   border-radius: 6px;
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2),
     0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12),
     inset 0 1px rgba(239, 240, 242, 0.1);
   background-color: #24283b;
 }
 
 .app-notification:backdrop,
 .toolbar.osd:backdrop,
 toolbar.osd:backdrop {
   box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3),
     0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12),
     inset 0 1px rgba(239, 240, 242, 0.1);
 }
 
 .left.app-notification,
 .right.app-notification,
 .top.app-notification,
 .bottom.app-notification,
 .toolbar.osd.left,
 .toolbar.osd.right,
 .toolbar.osd.top,
 .toolbar.osd.bottom,
 toolbar.osd.left,
 toolbar.osd.right,
 toolbar.osd.top,
 toolbar.osd.bottom {
   border-radius: 0;
 }
 
 .bottom.app-notification,
 .toolbar.osd.bottom,
 toolbar.osd.bottom {
   box-shadow: none;
   background-color: transparent;
   background-image: linear-gradient(
     to bottom,
     transparent,
     rgba(0, 0, 0, 0.1) 30%,
     rgba(0, 0, 0, 0.2) 50%,
     rgba(0, 0, 0, 0.4)
   );
 }
 
 .toolbar.horizontal > separator,
 toolbar.horizontal > separator {
   margin: 2px;
 }
 
 .toolbar.vertical > separator,
 toolbar.vertical > separator {
   margin: 2px;
 }
 
 .toolbar:not(.inline-toolbar):not(.osd) scale,
 .toolbar:not(.inline-toolbar):not(.osd) entry,
 .toolbar:not(.inline-toolbar):not(.osd) spinbutton,
 .toolbar:not(.inline-toolbar):not(.osd) button,
 toolbar:not(.inline-toolbar):not(.osd) scale,
 toolbar:not(.inline-toolbar):not(.osd) entry,
 toolbar:not(.inline-toolbar):not(.osd) spinbutton,
 toolbar:not(.inline-toolbar):not(.osd) button {
   margin: 2px;
 }
 
 .toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:first-child),
 .toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:first-child),
 .toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:first-child),
 toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:first-child),
 toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:first-child),
 toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:first-child) {
   margin-left: 0;
 }
 
 .toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:last-child),
 .toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:last-child),
 .toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:last-child),
 toolbar:not(.inline-toolbar):not(.osd) .linked entry:not(:last-child),
 toolbar:not(.inline-toolbar):not(.osd) .linked spinbutton:not(:last-child),
 toolbar:not(.inline-toolbar):not(.osd) .linked button:not(:last-child) {
   margin-right: 0;
 }
 
 .toolbar:not(.inline-toolbar):not(.osd) spinbutton entry,
 .toolbar:not(.inline-toolbar):not(.osd) spinbutton button,
 toolbar:not(.inline-toolbar):not(.osd) spinbutton entry,
 toolbar:not(.inline-toolbar):not(.osd) spinbutton button {
   margin: 0;
 }
 
 .toolbar:not(.inline-toolbar):not(.osd) switch,
 toolbar:not(.inline-toolbar):not(.osd) switch {
   margin: 8px 2px;
 }
 
 searchbar > revealer > box {
   padding: 6px;
   border-spacing: 6px;
   border-style: solid;
   border-width: 0 0 1px;
   border-color: rgba(239, 240, 242, 0.12);
   background-color: #1a1b26;
   background-clip: border-box;
 }
 
 /***************
  * Header bars *
  ***************/
 /* HACK: Header buttons border radius */
 headerbar button:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.7);
   border-radius: 6px;
 }
 
 headerbar
   .linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 9999px;
 }
 
 headerbar button:focus:not(.suggested-action):not(.destructive-action),
 headerbar button:hover:not(.suggested-action):not(.destructive-action),
 headerbar button:active:not(.suggested-action):not(.destructive-action),
 headerbar button:checked:not(.suggested-action):not(.destructive-action) {
   color: #eff0f2;
 }
 
 headerbar button:disabled:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.3);
 }
 
 headerbar
   button:checked:disabled:not(.suggested-action):not(.destructive-action) {
   background-color: transparent;
   color: rgba(239, 240, 242, 0.5);
 }
 
 headerbar button:backdrop:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.5);
 }
 
 headerbar button:backdrop:focus:not(.suggested-action):not(.destructive-action),
 headerbar button:backdrop:hover:not(.suggested-action):not(.destructive-action),
 headerbar
   button:backdrop:active:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.7);
 }
 
 headerbar
   button:backdrop:disabled:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.3);
 }
 
 headerbar
   button:backdrop:checked:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.7);
 }
 
 headerbar
   button:backdrop:checked:disabled:not(.suggested-action):not(.destructive-action) {
   color: rgba(239, 240, 242, 0.3);
 }
 
 .titlebar entry {
   background-color: rgba(239, 240, 242, 0.04);
   color: #eff0f2;
 }
 
 .titlebar entry:disabled {
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 .titlebar entry image {
   color: rgba(239, 240, 242, 0.7);
 }
 
 .titlebar entry image:hover,
 .titlebar entry image:active {
   color: #eff0f2;
 }
 
 .titlebar entry image:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 .titlebar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1),
     color 75ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 12px 12px 0 0;
   background-color: #1a1b26;
   color: #eff0f2;
 }
 
 .titlebar:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 .titlebar:backdrop {
   background-color: #1a1b26;
   color: rgba(239, 240, 242, 0.7);
 }
 
 .titlebar:backdrop:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 .titlebar .title {
   padding: 0 12px;
   font-weight: bold;
 }
 
 .titlebar .subtitle {
   padding: 0 12px;
   font-size: smaller;
 }
 
 .titlebar .subtitle,
 .titlebar .dim-label {
   transition: color 75ms cubic-bezier(0, 0, 0.2, 1);
   color: rgba(239, 240, 242, 0.7);
 }
 
 .titlebar .subtitle:backdrop,
 .titlebar .dim-label:backdrop {
   color: rgba(239, 240, 242, 0.5);
 }
 
 .titlebar .titlebar {
   background-color: transparent;
   box-shadow: none;
 }
 
 .titlebar headerbar + separator {
   background-color: rgba(239, 240, 242, 0.12);
 }
 
 .titlebar .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 6px;
 }
 
 .titlebar button.suggested-action:disabled,
 .titlebar button.destructive-action:disabled {
   background-color: rgba(239, 240, 242, 0.04);
   color: rgba(239, 240, 242, 0.5);
 }
 
 .titlebar stackswitcher {
   margin: 6px 0;
   border-radius: 9999px;
 }
 
 .titlebar
   stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action).text-button {
   border-radius: 9999px;
 }
 
 .titlebar
   stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action).text-button:active {
   box-shadow: inset 0 0 0 9999px rgba(239, 240, 242, 0.12);
 }
 
 .titlebar
   stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action).text-button:checked {
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 .titlebar.selection-mode {
   transition: background-color 0.1ms 225ms,
     color 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 1px rgba(239, 240, 242, 0);
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 .titlebar.selection-mode:backdrop {
   color: rgba(0, 0, 0, 0.6);
 }
 
 .titlebar.selection-mode .subtitle:link {
   color: rgba(0, 0, 0, 0.87);
 }
 
 .titlebar.selection-mode .selection-menu {
   padding-left: 16px;
   padding-right: 16px;
 }
 
 .titlebar.selection-mode .selection-menu .arrow {
   -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
 }
 
 .titlebar .selection-mode {
   box-shadow: inset 0 1px rgba(239, 240, 242, 0);
   background-color: #d5d6db;
 }
 
 .tiled .titlebar,
 .tiled-top .titlebar,
 .tiled-right .titlebar,
 .tiled-bottom .titlebar,
 .tiled-left .titlebar,
 .maximized .titlebar,
 .fullscreen .titlebar {
   border-radius: 0;
 }
 
 .titlebar.default-decoration {
   min-height: 24px;
   padding: 6px;
   border-radius: 6px 6px 0 0;
 }
 
 .titlebar.default-decoration windowcontrols button,
 .titlebar.default-decoration windowcontrols menubutton {
   min-height: 24px;
   min-width: 24px;
   margin: 0;
   padding: 0;
 }
 
 .solid-csd .titlebar:dir(rtl),
 .solid-csd .titlebar:dir(ltr) {
   border-radius: 0;
   box-shadow: none;
 }
 
 headerbar {
   min-height: 48px;
   padding: 0 6px;
 }
 
 headerbar:not(.titlebar) {
   box-shadow: none;
 }
 
 box.vertical headerbar {
   background-color: #1a1b26;
 }
 
 headerbar > windowhandle > box,
 headerbar > windowhandle > box > box.start,
 headerbar > windowhandle > box > box.end {
   border-spacing: 6px;
 }
 
 headerbar entry,
 headerbar spinbutton,
 headerbar button {
   margin-top: 6px;
   margin-bottom: 6px;
 }
 
 headerbar separator:not(.sidebar) {
   margin-top: 12px;
   margin-bottom: 12px;
   background-color: rgba(239, 240, 242, 0.12);
 }
 
 headerbar switch {
   margin-top: 12px;
   margin-bottom: 12px;
 }
 
 headerbar spinbutton button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
 headerbar .entry-tag {
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
 headerbar.windowhandle
   > viewswitcher
   > box
   > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
 
 headerbar.windowhandle > button.popup label,
 headerbar.windowhandle > button.popup image {
   min-height: 0;
 }
 
 headerbar.windowhandle viewswitchertitle > squeezer {
   margin-top: 0;
   margin-bottom: 0;
   background: none;
 }
 
 headerbar.windowhandle viewswitchertitle > squeezer > viewswitcher {
   margin: 0 0;
   background: none;
 }
 
 headerbar.windowhandle
   viewswitchertitle
   > squeezer
   > viewswitcher
   > box.horizontal
   > button.radio {
   margin: 0;
   padding: 0;
   border-radius: 0;
 }
 
 window.devel headerbar.titlebar {
   background: #1a1b26
       cross-fade(10% -gtk-icontheme('system-run-symbolic'), image(transparent))
       90% 0/256px 256px no-repeat,
     linear-gradient(to right, transparent 65%, rgba(213, 214, 219, 0.1)),
     linear-gradient(to top, #343434 3px, #393939);
 }
 
 window.devel headerbar.titlebar:backdrop {
   background: #1a1b26
       cross-fade(10% -gtk-icontheme('system-run-symbolic'), image(transparent))
       90% 0/256px 256px no-repeat,
     image(#1a1b26);
   /* background-color would flash */
 }
 
 /************
  * Pathbars *
  ************/
 
 pathbar > button {
   padding-left: 6px;
   padding-right: 6px;
   border-radius: 6px;
 }
 
 pathbar > button:checked,
 pathbar > button:checked:disabled {
   background-color: transparent;
 }
 
 pathbar > button label:not(:only-child):first-child {
   margin-left: 0;
 }
 
 pathbar > button label:not(:only-child):last-child {
   margin-right: 0;
 }
 
 pathbar > button.text-button {
   min-width: 0;
 }
 
 pathbar > button.slider-button {
   padding-left: 4px;
   padding-right: 4px;
 }
 
 /**************
  * Tree Views *
  **************/
 columnview.view,
 treeview.view {
   border-left-color: #4b4b4b;
   border-top-color: #4b4b4b;
 }
 
 columnview.view:selected,
 treeview.view:selected {
   background-color: #1a1b26;
   background-image: image(alpha(currentColor, 0.1));
   box-shadow: none;
 }
 
 columnview.view:hover,
 columnview.view:selected,
 treeview.view:hover,
 treeview.view:selected {
   border-radius: 0;
   box-shadow: none;
 }
 
 columnview.view.separator,
 treeview.view.separator {
   min-height: 5px;
   color: rgba(239, 240, 242, 0.12);
 }
 
 columnview.view:drop(active),
 treeview.view:drop(active) {
   box-shadow: none;
 }
 
 columnview.view:drop(active).after,
 treeview.view:drop(active).after {
   border-top-style: none;
 }
 
 columnview.view:drop(active).before,
 treeview.view:drop(active).before {
   border-bottom-style: none;
 }
 
 columnview.view > dndtarget:drop(active),
 treeview.view > dndtarget:drop(active) {
   border-style: solid none;
   border-width: 1px;
   border-color: alpha(currentColor, 0.06);
 }
 
 columnview.view > dndtarget:drop(active).after,
 treeview.view > dndtarget:drop(active).after {
   border-top-style: none;
 }
 
 columnview.view > dndtarget:drop(active).before,
 treeview.view > dndtarget:drop(active).before {
   border-bottom-style: none;
 }
 
 columnview.view.expander,
 treeview.view.expander {
   min-width: 16px;
   min-height: 16px;
   -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
   color: rgba(239, 240, 242, 0.7);
 }
 
 columnview.view.expander:dir(rtl),
 treeview.view.expander:dir(rtl) {
   -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
 }
 
 columnview.view.expander:hover,
 treeview.view.expander:hover {
   color: #eff0f2;
 }
 
 columnview.view.expander:selected,
 treeview.view.expander:selected {
   color: #eff0f2;
 }
 
 columnview.view.expander:selected:hover,
 treeview.view.expander:selected:hover {
   color: #eff0f2;
 }
 
 columnview.view.expander:checked,
 treeview.view.expander:checked {
   -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
 }
 
 columnview.view.expander:disabled,
 treeview.view.expander:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 columnview.view.progressbar,
 treeview.view.progressbar {
   border-bottom: 6px solid #d5d6db;
   box-shadow: none;
   background-color: transparent;
   background-image: none;
 }
 
 columnview.view.progressbar:selected:hover,
 treeview.view.progressbar:selected:hover {
   box-shadow: none;
 }
 
 columnview.view.trough,
 treeview.view.trough {
   border-bottom: 6px solid rgba(239, 240, 242, 0.12);
   box-shadow: none;
   background-color: transparent;
   background-image: none;
 }
 
 columnview.view.trough:selected:hover,
 treeview.view.trough:selected:hover {
   box-shadow: none;
 }
 
 columnview.view > header > button,
 treeview.view > header > button {
   padding: 2px 6px;
   border-style: none solid solid none;
   border-width: 1px;
   border-color: rgba(239, 240, 242, 0.12);
   border-radius: 0;
   background-clip: border-box;
 }
 
 columnview.view > header > button:not(:focus):not(:hover):not(:active),
 treeview.view > header > button:not(:focus):not(:hover):not(:active) {
   color: rgba(239, 240, 242, 0.7);
 }
 
 columnview.view > header > button,
 columnview.view > header > button:disabled,
 treeview.view > header > button,
 treeview.view > header > button:disabled {
   background-color: #1a1b26;
 }
 
 columnview.view > header > button:last-child,
 treeview.view > header > button:last-child {
   border-right-style: none;
 }
 
 columnview.view button.dnd,
 columnview.view header.button.dnd,
 treeview.view button.dnd,
 treeview.view header.button.dnd {
   padding: 2px 6px;
   border-style: none solid solid;
   border-width: 1px;
   border-color: rgba(239, 240, 242, 0.12);
   border-radius: 0;
   box-shadow: none;
   background-color: #1a1b26;
   background-clip: border-box;
   color: #d5d6db;
 }
 
 columnview.view acceleditor > label,
 treeview.view acceleditor > label {
   background-color: #d5d6db;
 }
 
 /*********
  * Menus *
  *********/
 menubar {
   padding: 0;
   background-color: #1a1b26;
   color: #eff0f2;
 }
 
 menubar:backdrop {
   background-color: #1a1b26;
   color: rgba(239, 240, 242, 0.7);
 }
 
 .csd menubar {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 menubar > item {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   min-height: 20px;
   padding: 4px 8px;
   color: rgba(239, 240, 242, 0.7);
 }
 
 menubar > item:selected {
   transition: none;
   background-color: alpha(currentColor, 0.1);
   color: #eff0f2;
 }
 
 menubar > item:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 menubar > item label:disabled {
   color: inherit;
 }
 
 menubar > item popover.menu.background > contents {
   padding: 12px;
   border-radius: 12px;
 }
 
 menubar > item popover.menu popover.menu {
   margin-left: 9px;
 }
 
 menubar > item popover.menu.background popover.menu.background > contents {
   margin: 0;
   border-radius: 12px;
 }
 
 /**********************
  * Popover Base Menus *
  **********************/
 popover.menu box.inline-buttons {
   padding: 0 6px;
 }
 
 popover.menu box.inline-buttons button.image-button.model {
   min-height: 28px;
   min-width: 28px;
   padding: 0;
   border: none;
   outline: none;
   transition: none;
 }
 
 popover.menu box.inline-buttons button.image-button.model:selected {
   background: image(alpha(currentColor, 0.06));
 }
 
 popover.menu box.circular-buttons {
   padding: 6px;
 }
 
 popover.menu box.circular-buttons button.circular.image-button.model {
   padding: 6px;
 }
 
 popover.menu box.circular-buttons button.circular.image-button.model:focus {
   background-color: alpha(currentColor, 0.06);
 }
 
 popover.menu > arrow,
 popover.menu.background > contents {
   padding: 6px;
   background-color: #24283b;
   background-clip: border-box;
   border-radius: 12px;
   border: 2px solid #d5d6db;
 }
 
 popover.menu.background separator {
   margin: 6px 0;
 }
 
 popover.menu arrow.left,
 popover.menu radio.left,
 popover.menu check.left {
   margin-left: 0;
   margin-right: 0;
 }
 
 popover.menu arrow.right,
 popover.menu radio.right,
 popover.menu check.right {
   margin-left: 0;
   margin-right: 0;
 }
 
 popover.menu modelbutton {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
   min-height: 22px;
   min-width: 56px;
   padding: 3px 9px;
   color: #eff0f2;
   font: initial;
   text-shadow: none;
   box-shadow: none;
   background: none;
 }
 
 popover.menu modelbutton:hover {
   transition: none;
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 popover.menu modelbutton:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 popover.menu label.title {
   font-weight: bold;
   padding: 4px 26px;
 }
 
 /************
  * Popovers *
  ************/
 popover.background {
   font: initial;
 }
 
 popover.background,
 popover.background:backdrop {
   background-color: transparent;
 }
 
 popover.background > arrow,
 popover.background > contents {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   padding: 6px;
   background-color: #24283b;
   border-radius: 12px;
   border: 2px solid #d5d6db;
 }
 
 popover.background:backdrop > arrow,
 popover.background:backdrop > contents {
   border: 2px solid #d5d6db;
 }
 
 popover.background > contents > list,
 popover.background > contents > .view,
 popover.background > contents > toolbar {
   border-style: none;
   box-shadow: none;
   background-color: transparent;
 }
 
 popover.background > contents separator {
   background-color: rgba(239, 240, 242, 0.12);
   margin: 3px 0;
 }
 
 popover.background > contents list separator {
   margin: 0;
 }
 
 popover.background .view:not(:selected),
 popover.background toolbar {
   background-color: #24283b;
 }
 
 popover.background .linked > button:not(.radio) {
   background-color: transparent;
   box-shadow: none;
   border-radius: 6px;
 }
 
 popover.background .linked > button:not(.radio):first-child {
   border-radius: 6px;
 }
 
 popover.background .linked > button:not(.radio):last-child {
   border-radius: 6px;
 }
 
 popover.background .linked > button:not(.radio):only-child {
   border-radius: 6px;
 }
 
 popover.background.menu button,
 popover.background button.model {
   min-height: 32px;
   padding: 0 8px;
   border-radius: 6px;
 }
 
 .osd popover.background,
 popover.background.touch-selection,
 popover.background.magnifier {
   background-color: transparent;
 }
 
 .osd popover.background > arrow,
 .osd popover.background > contents,
 popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents,
 popover.background.magnifier > arrow,
 popover.background.magnifier > contents {
   border: none;
   box-shadow: none;
 }
 
 magnifier {
   background-color: #1a1b26;
 }
 
 /*************
  * Notebooks *
  *************/
 notebook > header tab {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms,
     background-image 0ms;
   min-height: 24px;
   min-width: 24px;
   padding: 3px 12px;
   border: none;
   outline: none;
   background-clip: padding-box;
   color: rgba(239, 240, 242, 0.7);
   font-weight: 500;
   border-radius: 6px;
 }
 
 notebook > header tab:hover {
   background-color: rgba(239, 240, 242, 0.04);
   color: #eff0f2;
 }
 
 notebook > header tab:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 notebook > header tab:checked {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   background-color: rgba(239, 240, 242, 0.15);
   color: #eff0f2;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
 notebook > header tab:checked:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 frame > paned > notebook > header,
 notebook.frame > header {
   background-color: rgba(239, 240, 242, 0.04);
 }
 
 notebook,
 notebook.frame {
   background-color: #1a1b26;
   border-radius: 12px;
 }
 
 notebook.frame frame > border {
   border: none;
   border-radius: 6px;
 }
 
 notebook.frame frame > list row.activatable {
   border-radius: 6px;
 }
 
 notebook > header {
   border: none;
   background-color: rgba(239, 240, 242, 0.04);
   padding: 3px;
   margin: 3px;
   border-radius: 9px;
 }
 
 notebook > header.top > tabs > arrow {
   border-top-style: none;
 }
 
 notebook > header.bottom > tabs > arrow {
   border-bottom-style: none;
 }
 
 notebook > header.top > tabs > arrow,
 notebook > header.bottom > tabs > arrow {
   padding-left: 4px;
   padding-right: 4px;
 }
 
 notebook > header.top > tabs > arrow.down,
 notebook > header.bottom > tabs > arrow.down {
   margin-left: 0;
   -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
 }
 
 notebook > header.top > tabs > arrow.up,
 notebook > header.bottom > tabs > arrow.up {
   margin-right: 0;
   -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
 }
 
 notebook > header.left > tabs > arrow {
   border-left-style: none;
 }
 
 notebook > header.right > tabs > arrow {
   border-right-style: none;
 }
 
 notebook > header.left > tabs > arrow,
 notebook > header.right > tabs > arrow {
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
 notebook > header.left > tabs > arrow.down,
 notebook > header.right > tabs > arrow.down {
   margin-top: 0;
   -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
 }
 
 notebook > header.left > tabs > arrow.up,
 notebook > header.right > tabs > arrow.up {
   margin-bottom: 0;
   -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
 }
 
 notebook > header > tabs > arrow {
   min-height: 16px;
   min-width: 16px;
   border-radius: 6px;
 }
 
 notebook > header tab > box {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
   margin: -6px -12px;
   padding: 6px 12px;
 }
 
 notebook > header tab > box:drop(active) {
   background-color: rgba(239, 240, 242, 0.12);
   color: #eff0f2;
 }
 
 notebook > header tab button.flat:last-child {
   margin-left: 6px;
   margin-right: -6px;
 }
 
 notebook > header tab button.flat:first-child {
   margin-left: -6px;
   margin-right: 6px;
 }
 
 notebook > header tab button.close-button {
   min-width: 24px;
   min-height: 24px;
 }
 
 notebook > header.top tabs:not(:only-child):first-child,
 notebook > header.bottom tabs:not(:only-child):first-child {
   margin-left: 0;
 }
 
 notebook > header.top tabs:not(:only-child):last-child,
 notebook > header.bottom tabs:not(:only-child):last-child {
   margin-right: 0;
 }
 
 notebook > header.top tabs tab.reorderable-page,
 notebook > header.bottom tabs tab.reorderable-page {
   border-style: solid;
 }
 
 notebook > header.left tabs:not(:only-child):first-child,
 notebook > header.right tabs:not(:only-child):first-child {
   margin-top: 0;
 }
 
 notebook > header.left tabs:not(:only-child):last-child,
 notebook > header.right tabs:not(:only-child):last-child {
   margin-bottom: 0;
 }
 
 notebook > header.left tabs tab.reorderable-page,
 notebook > header.right tabs tab.reorderable-page {
   border-style: solid;
 }
 
 notebook > header > menubutton > button.image-button {
   padding: 3px;
   min-width: 24px;
   min-height: 24px;
   margin-left: 3px;
 }
 
 notebook > stack:not(:only-child) {
   background-color: transparent;
   border-radius: 6px;
 }
 
 /**************
  * Scrollbars *
  **************/
 scrollbar {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   background-color: #1a1b26;
 }
 
 scrollbar.top {
   border-bottom: transparent;
 }
 
 scrollbar.bottom {
   border-bottom: transparent;
 }
 
 scrollbar.left {
   border-bottom: transparent;
 }
 
 scrollbar.right {
   border-bottom: transparent;
 }
 
 scrollbar > range > trough > slider {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
   min-width: 8px;
   min-height: 8px;
   border: 4px solid transparent;
   border-radius: 9999px;
   background-clip: padding-box;
   background-color: rgba(239, 240, 242, 0.5);
 }
 
 scrollbar > range > trough > slider:hover {
   background-color: rgba(239, 240, 242, 0.7);
 }
 
 scrollbar > range > trough > slider:active {
   background-color: #eff0f2;
 }
 
 scrollbar > range > trough > slider:disabled {
   background-color: rgba(239, 240, 242, 0.3);
 }
 
 scrollbar > range.fine-tune > trough > slider {
   min-width: 4px;
   min-height: 4px;
 }
 
 scrollbar > range.fine-tune.horizontal > trough > slider {
   margin: 2px 0;
 }
 
 scrollbar > range.fine-tune.vertical > trough > slider {
   margin: 0 2px;
 }
 
 scrollbar.overlay-indicator:not(.fine-tune) > range > trough > slider {
   transition-property: background-color, min-height, min-width;
 }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
   border-color: transparent;
   background-color: transparent;
 }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering)
   > range
   > trough
   > slider {
   min-width: 4px;
   min-height: 4px;
   margin: 3px;
   border: 1px solid rgba(44, 44, 44, 0.3);
 }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
   min-width: 4px;
   min-height: 4px;
   margin: 3px;
   border: 1px solid rgba(44, 44, 44, 0.3);
   border-radius: 9999px;
   background-color: rgba(239, 240, 242, 0.5);
   background-clip: padding-box;
   -gtk-icon-source: none;
 }
 
 scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
   background-color: rgba(239, 240, 242, 0.3);
 }
 
 scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering)
   > range
   > trough
   > slider {
   min-width: 24px;
 }
 
 scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) button {
   min-width: 8px;
 }
 
 scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering)
   > range
   > trough
   > slider {
   min-height: 24px;
 }
 
 scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) button {
   min-height: 8px;
 }
 
 scrollbar.overlay-indicator.dragging,
 scrollbar.overlay-indicator.hovering {
   background-color: transparent;
 }
 
 scrollbar.horizontal > range > trough > slider {
   min-width: 24px;
 }
 
 scrollbar.vertical > range > trough > slider {
   min-height: 24px;
 }
 
 scrollbar button {
   min-width: 16px;
   min-height: 16px;
   padding: 0;
   border-radius: 0;
 }
 
 scrollbar.vertical button.down {
   -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
 }
 
 scrollbar.vertical button.up {
   -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
 }
 
 scrollbar.horizontal button.down {
   -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
 }
 
 scrollbar.horizontal button.up {
   -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
 }
 
 /**********
  * Switch *
  **********/
 switch {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   margin: 6px 0;
   padding: 0;
   border: 2px solid rgba(239, 240, 242, 0.7);
   border-radius: 9999px;
   background-color: transparent;
   background-clip: border-box;
   font-size: 0;
   color: transparent;
 }
 
 switch:checked {
   background-color: #d5d6db;
   border-color: #d5d6db;
 }
 
 switch:disabled {
   opacity: 0.5;
 }
 
 switch image {
   margin: -8px;
 }
 
 switch > slider {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   min-width: 16px;
   min-height: 16px;
   margin: 2px;
   border-radius: 9999px;
   outline: none;
   box-shadow: none;
   background-color: rgba(239, 240, 242, 0.7);
   border: none;
 }
 
 switch:focus > slider {
   box-shadow: 0 0 0 10px rgba(239, 240, 242, 0.04);
 }
 
 switch:hover > slider {
   box-shadow: 0 0 0 10px rgba(239, 240, 242, 0.12);
 }
 
 switch:focus:hover > slider {
   box-shadow: 0 0 0 10px rgba(239, 240, 242, 0.12);
 }
 
 switch:checked > slider {
   background-color: #1a1b26;
   color: #1a1b26;
 }
 
 /*************************
  * Check and Radio items *
  *************************/
 .view.content-view.check:not(list),
 .content-view .tile check:not(list) {
   min-height: 40px;
   min-width: 40px;
   margin: 0;
   padding: 0;
   box-shadow: none;
   background-color: transparent;
   background-image: none;
 }
 
 .view.content-view.check:not(list):hover,
 .view.content-view.check:not(list):active,
 .content-view .tile check:not(list):hover,
 .content-view .tile check:not(list):active {
   box-shadow: 0 0 0 10px rgba(239, 240, 242, 0.12);
 }
 
 .view.content-view.check:not(list),
 .content-view .tile check:not(list) {
   -gtk-icon-source: -gtk-scaled(
     url('assets/selectionmode-checkbox-unchecked-dark.png'),
     url('assets/selectionmode-checkbox-unchecked-dark@2.png')
   );
 }
 
 .view.content-view.check:not(list):checked,
 .content-view .tile check:not(list):checked {
   -gtk-icon-source: -gtk-scaled(
     url('assets/selectionmode-checkbox-checked-dark.png'),
     url('assets/selectionmode-checkbox-checked-dark@2.png')
   );
 }
 
 checkbutton,
 radiobutton {
   outline: none;
   border-spacing: 4px;
 }
 
 checkbutton.text-button,
 radiobutton.text-button {
   padding: 2px;
 }
 
 checkbutton.text-button label:not(:only-child),
 radiobutton.text-button label:not(:only-child) {
   margin: 0 4px;
 }
 
 check,
 radio {
   min-height: 24px;
   min-width: 24px;
   margin: -8px;
   padding: 8px;
 }
 
 check:checked,
 check:indeterminate,
 radio:checked,
 radio:indeterminate {
   color: #d5d6db;
 }
 
 check:checked:disabled,
 check:indeterminate:disabled,
 radio:checked:disabled,
 radio:indeterminate:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 check:not(:hover):focus,
 radio:not(:hover):focus {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
 popover modelbutton.flat check,
 popover modelbutton.flat check:focus,
 popover modelbutton.flat check:hover,
 popover modelbutton.flat check:focus:hover,
 popover modelbutton.flat check:active,
 popover modelbutton.flat check:disabled,
 popover modelbutton.flat radio,
 popover modelbutton.flat radio:focus,
 popover modelbutton.flat radio:hover,
 popover modelbutton.flat radio:focus:hover,
 popover modelbutton.flat radio:active,
 popover modelbutton.flat radio:disabled {
   transition: none;
   box-shadow: none;
   background-image: none;
 }
 
 popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled),
 popover
   modelbutton.flat
   radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(239, 240, 242, 0.7);
 }
 
 popover
   modelbutton.flat
   check:not(:checked):not(:indeterminate):not(:disabled):hover,
 popover
   modelbutton.flat
   radio:not(:checked):not(:indeterminate):not(:disabled):hover {
   color: inherit;
 }
 
 popover modelbutton.flat check,
 popover modelbutton.flat check:hover,
 popover modelbutton.flat check:disabled,
 popover modelbutton.flat radio,
 popover modelbutton.flat radio:hover,
 popover modelbutton.flat radio:disabled {
   box-shadow: none;
   color: inherit;
 }
 
 popover modelbutton.flat check.left:dir(rtl),
 popover modelbutton.flat radio.left:dir(rtl) {
   margin-left: -12px;
   margin-right: -4px;
 }
 
 popover modelbutton.flat check.right:dir(ltr),
 popover modelbutton.flat radio.right:dir(ltr) {
   margin-left: -4px;
   margin-right: -12px;
 }
 
 popover.menu check,
 popover.menu radio {
   transition: none;
   margin: 0;
   padding: 0;
 }
 
 popover.menu check:dir(ltr),
 popover.menu radio:dir(ltr) {
   margin-right: 8px;
 }
 
 popover.menu check:dir(rtl),
 popover.menu radio:dir(rtl) {
   margin-left: 8px;
 }
 
 popover.menu check:not(:checked):not(:indeterminate):not(:disabled),
 popover.menu radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(239, 240, 242, 0.7);
 }
 
 popover.menu check:not(:checked):not(:indeterminate):not(:disabled):hover,
 popover.menu radio:not(:checked):not(:indeterminate):not(:disabled):hover {
   color: inherit;
 }
 
 popover.menu check,
 popover.menu check:hover,
 popover.menu check:disabled,
 popover.menu radio,
 popover.menu radio:hover,
 popover.menu radio:disabled {
   box-shadow: none;
   color: inherit;
 }
 
 check {
   -gtk-icon-size: 24px;
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/checkbox-unchecked-symbolic.svg')
   );
 }
 
 check:checked {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/checkbox-checked-symbolic.svg')
   );
 }
 
 check:indeterminate {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/checkbox-mixed-symbolic.svg')
   );
 }
 
 radio {
   -gtk-icon-size: 24px;
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/radio-unchecked-symbolic.svg')
   );
 }
 
 radio:checked {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/radio-checked-symbolic.svg')
   );
 }
 
 radio:indeterminate {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/radio-mixed-symbolic.svg')
   );
 }
 
 popover.menu check {
   min-height: 16px;
   min-width: 16px;
   -gtk-icon-size: 16px;
   border-radius: 6px;
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/small-checkbox-unchecked-symbolic.svg')
   );
 }
 
 popover.menu check:checked {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/small-checkbox-checked-symbolic.svg')
   );
 }
 
 popover.menu check:indeterminate {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/small-checkbox-mixed-symbolic.svg')
   );
 }
 
 popover.menu radio {
   min-height: 16px;
   min-width: 16px;
   border-image: none;
   -gtk-icon-size: 16px;
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/small-radio-unchecked-symbolic.svg')
   );
 }
 
 popover.menu radio:checked {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/small-radio-checked-symbolic.svg')
   );
 }
 
 popover.menu radio:indeterminate {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/small-radio-mixed-symbolic.svg')
   );
 }
 
 treeview.view check,
 treeview.view radio,
 columnview.view check,
 columnview.view radio {
   padding: 0;
   margin: 0;
   box-shadow: none;
   background: none;
   color: rgba(239, 240, 242, 0.7);
 }
 
 treeview.view check:hover,
 treeview.view check:active,
 treeview.view radio:hover,
 treeview.view radio:active,
 columnview.view check:hover,
 columnview.view check:active,
 columnview.view radio:hover,
 columnview.view radio:active {
   color: #eff0f2;
 }
 
 treeview.view check:disabled,
 treeview.view radio:disabled,
 columnview.view check:disabled,
 columnview.view radio:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 treeview.view check:checked,
 treeview.view check:indeterminate,
 treeview.view radio:checked,
 treeview.view radio:indeterminate,
 columnview.view check:checked,
 columnview.view check:indeterminate,
 columnview.view radio:checked,
 columnview.view radio:indeterminate {
   color: #d5d6db;
 }
 
 treeview.view check:checked:disabled,
 treeview.view check:indeterminate:disabled,
 treeview.view radio:checked:disabled,
 treeview.view radio:indeterminate:disabled,
 columnview.view check:checked:disabled,
 columnview.view check:indeterminate:disabled,
 columnview.view radio:checked:disabled,
 columnview.view radio:indeterminate:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 treeview.view:hover check,
 treeview.view:hover radio,
 treeview.view:selected check,
 treeview.view:selected radio,
 treeview.view:focus check,
 treeview.view:focus radio,
 columnview.view:hover check,
 columnview.view:hover radio,
 columnview.view:selected check,
 columnview.view:selected radio,
 columnview.view:focus check,
 columnview.view:focus radio {
   box-shadow: none;
   background-color: transparent;
 }
 
 treeview.view radio:checked {
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/radio-checked-symbolic.svg')
   );
   border-image: none;
 }
 
 /************
  * GtkScale *
  ************/
 scale {
   min-height: 2px;
   min-width: 2px;
 }
 
 scale.horizontal {
   padding: 17px 12px;
 }
 
 scale.vertical {
   padding: 12px 17px;
 }
 
 scale slider {
   min-height: 18px;
   min-width: 18px;
   margin: -8px;
 }
 
 scale.fine-tune.horizontal {
   min-height: 4px;
   padding-top: 16px;
   padding-bottom: 16px;
 }
 
 scale.fine-tune.vertical {
   min-width: 4px;
   padding-left: 16px;
   padding-right: 16px;
 }
 
 scale.fine-tune slider {
   margin: -7px;
 }
 
 scale trough {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
   outline: none;
   background-color: rgba(239, 240, 242, 0.3);
 }
 
 scale trough:disabled {
   background-color: rgba(239, 240, 242, 0.12);
 }
 
 scale highlight {
   transition: background-image 75ms cubic-bezier(0, 0, 0.2, 1);
   background-image: image(#d5d6db);
 }
 
 scale highlight:disabled {
   background-color: #1a1b26;
   background-image: image(rgba(239, 240, 242, 0.3));
 }
 
 scale fill {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
   background-color: rgba(239, 240, 242, 0.3);
 }
 
 scale fill:disabled {
   background-color: transparent;
 }
 
 scale slider {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 9999px;
   color: #d5d6db;
   background-color: #1a1b26;
   box-shadow: inset 0 0 0 2px #d5d6db;
 }
 
 scale slider:hover {
   box-shadow: inset 0 0 0 2px #d5d6db, 0 0 0 8px rgba(239, 240, 242, 0.12);
 }
 
 scale slider:active {
   box-shadow: inset 0 0 0 4px #d5d6db, 0 0 0 8px rgba(239, 240, 242, 0.12);
 }
 
 scale slider:disabled {
   box-shadow: inset 0 0 0 2px rgba(239, 240, 242, 0.3);
 }
 
 scale marks,
 scale value {
   color: rgba(239, 240, 242, 0.7);
 }
 
 scale indicator {
   background-color: rgba(239, 240, 242, 0.3);
   color: transparent;
 }
 
 scale.horizontal > marks.top {
   margin-bottom: 7px;
   margin-top: -15px;
 }
 
 scale.horizontal.fine-tune > marks.top {
   margin-bottom: 6px;
   margin-top: -14px;
 }
 
 scale.horizontal > marks.bottom {
   margin-top: 7px;
   margin-bottom: -15px;
 }
 
 scale.horizontal.fine-tune > marks.bottom {
   margin-top: 6px;
   margin-bottom: -14px;
 }
 
 scale.vertical > marks.top {
   margin-right: 7px;
   margin-left: -15px;
 }
 
 scale.vertical.fine-tune > marks.top {
   margin-right: 6px;
   margin-left: -14px;
 }
 
 scale.vertical > marks.bottom {
   margin-left: 7px;
   margin-right: -15px;
 }
 
 scale.vertical.fine-tune > marks.bottom {
   margin-left: 6px;
   margin-right: -14px;
 }
 
 scale.horizontal indicator {
   min-height: 8px;
   min-width: 1px;
 }
 
 scale.vertical indicator {
   min-height: 1px;
   min-width: 8px;
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1),
     background-size 300ms cubic-bezier(0, 0, 0.2, 1),
     background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
   min-height: 32px;
   min-width: 32px;
   margin: -15px;
   border-radius: 50%;
   background-size: auto, 1000% 1000%;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent;
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider,
 scale.horizontal.marks-before:not(.marks-after) slider:hover,
 scale.horizontal.marks-before:not(.marks-after) slider:active,
 scale.horizontal.marks-before:not(.marks-after) slider:disabled {
   box-shadow: none;
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider:focus {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider:hover {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider:focus:hover {
   background-color: alpha(currentColor, 0.16);
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider:active {
   background-size: auto, 0% 0%;
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider {
   background-image: -gtk-scaled(
     url('assets/scale-horz-marks-before-slider-dark.png'),
     url('assets/scale-horz-marks-before-slider-dark@2.png')
   );
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider:disabled {
   background-image: -gtk-scaled(
     url('assets/scale-horz-marks-before-slider-disabled-dark.png'),
     url('assets/scale-horz-marks-before-slider-disabled-dark@2.png')
   );
 }
 
 scale.horizontal.marks-before:not(.marks-after) slider:active {
   background-image: -gtk-scaled(
     url('assets/scale-horz-marks-before-slider-dark.png'),
     url('assets/scale-horz-marks-before-slider-dark@2.png')
   );
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1),
     background-size 300ms cubic-bezier(0, 0, 0.2, 1),
     background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
   min-height: 32px;
   min-width: 32px;
   margin: -15px;
   border-radius: 50%;
   background-size: auto, 1000% 1000%;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent;
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider,
 scale.horizontal.marks-after:not(.marks-before) slider:hover,
 scale.horizontal.marks-after:not(.marks-before) slider:active,
 scale.horizontal.marks-after:not(.marks-before) slider:disabled {
   box-shadow: none;
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider:focus {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider:hover {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider:focus:hover {
   background-color: alpha(currentColor, 0.16);
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider:active {
   background-size: auto, 0% 0%;
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider {
   background-image: -gtk-scaled(
     url('assets/scale-horz-marks-after-slider-dark.png'),
     url('assets/scale-horz-marks-after-slider-dark@2.png')
   );
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider:disabled {
   background-image: -gtk-scaled(
     url('assets/scale-horz-marks-after-slider-disabled-dark.png'),
     url('assets/scale-horz-marks-after-slider-disabled-dark@2.png')
   );
 }
 
 scale.horizontal.marks-after:not(.marks-before) slider:active {
   background-image: -gtk-scaled(
     url('assets/scale-horz-marks-after-slider-dark.png'),
     url('assets/scale-horz-marks-after-slider-dark@2.png')
   );
 }
 
 scale.vertical.marks-before:not(.marks-after) slider {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1),
     background-size 300ms cubic-bezier(0, 0, 0.2, 1),
     background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
   min-height: 32px;
   min-width: 32px;
   margin: -15px;
   border-radius: 50%;
   background-size: auto, 1000% 1000%;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent;
 }
 
 scale.vertical.marks-before:not(.marks-after) slider,
 scale.vertical.marks-before:not(.marks-after) slider:hover,
 scale.vertical.marks-before:not(.marks-after) slider:active,
 scale.vertical.marks-before:not(.marks-after) slider:disabled {
   box-shadow: none;
 }
 
 scale.vertical.marks-before:not(.marks-after) slider:focus {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.vertical.marks-before:not(.marks-after) slider:hover {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.vertical.marks-before:not(.marks-after) slider:focus:hover {
   background-color: alpha(currentColor, 0.16);
 }
 
 scale.vertical.marks-before:not(.marks-after) slider:active {
   background-size: auto, 0% 0%;
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.vertical.marks-before:not(.marks-after) slider {
   background-image: -gtk-scaled(
     url('assets/scale-vert-marks-before-slider-dark.png'),
     url('assets/scale-vert-marks-before-slider-dark@2.png')
   );
 }
 
 scale.vertical.marks-before:not(.marks-after) slider:disabled {
   background-image: -gtk-scaled(
     url('assets/scale-vert-marks-before-slider-disabled-dark.png'),
     url('assets/scale-vert-marks-before-slider-disabled-dark@2.png')
   );
 }
 
 scale.vertical.marks-before:not(.marks-after) slider:active {
   background-image: -gtk-scaled(
     url('assets/scale-vert-marks-before-slider-dark.png'),
     url('assets/scale-vert-marks-before-slider-dark@2.png')
   );
 }
 
 scale.vertical.marks-after:not(.marks-before) slider {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1),
     background-size 300ms cubic-bezier(0, 0, 0.2, 1),
     background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
   min-height: 32px;
   min-width: 32px;
   margin: -15px;
   border-radius: 50%;
   background-size: auto, 1000% 1000%;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent;
 }
 
 scale.vertical.marks-after:not(.marks-before) slider,
 scale.vertical.marks-after:not(.marks-before) slider:hover,
 scale.vertical.marks-after:not(.marks-before) slider:active,
 scale.vertical.marks-after:not(.marks-before) slider:disabled {
   box-shadow: none;
 }
 
 scale.vertical.marks-after:not(.marks-before) slider:focus {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.vertical.marks-after:not(.marks-before) slider:hover {
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.vertical.marks-after:not(.marks-before) slider:focus:hover {
   background-color: alpha(currentColor, 0.16);
 }
 
 scale.vertical.marks-after:not(.marks-before) slider:active {
   background-size: auto, 0% 0%;
   background-color: alpha(currentColor, 0.08);
 }
 
 scale.vertical.marks-after:not(.marks-before) slider {
   background-image: -gtk-scaled(
     url('assets/scale-vert-marks-after-slider-dark.png'),
     url('assets/scale-vert-marks-after-slider-dark@2.png')
   );
 }
 
 scale.vertical.marks-after:not(.marks-before) slider:disabled {
   background-image: -gtk-scaled(
     url('assets/scale-vert-marks-after-slider-disabled-dark.png'),
     url('assets/scale-vert-marks-after-slider-disabled-dark@2.png')
   );
 }
 
 scale.vertical.marks-after:not(.marks-before) slider:active {
   background-image: -gtk-scaled(
     url('assets/scale-vert-marks-after-slider-dark.png'),
     url('assets/scale-vert-marks-after-slider-dark@2.png')
   );
 }
 
 scale.color {
   min-height: 0;
   min-width: 0;
 }
 
 scale.color.horizontal {
   padding: 0 0 12px 0;
 }
 
 scale.color.horizontal slider:dir(ltr),
 scale.color.horizontal slider:dir(rtl) {
   margin-bottom: -13.5px;
   margin-top: 11.5px;
 }
 
 scale.color.vertical:dir(ltr) {
   padding: 0 0 0 12px;
 }
 
 scale.color.vertical:dir(ltr) slider {
   margin-left: -13.5px;
   margin-right: 11.5px;
 }
 
 scale.color.vertical:dir(rtl) {
   padding: 0 12px 0 0;
 }
 
 scale.color.vertical:dir(rtl) slider {
   margin-right: -13.5px;
   margin-left: 11.5px;
 }
 
 /*****************
  * Progress bars *
  *****************/
 progressbar {
   color: rgba(239, 240, 242, 0.7);
   font-size: smaller;
 }
 
 progressbar.horizontal trough,
 progressbar.horizontal progress {
   min-height: 6px;
 }
 
 progressbar.vertical trough,
 progressbar.vertical progress {
   min-width: 6px;
 }
 
 progressbar trough {
   border-radius: 6px;
   background-color: rgba(239, 240, 242, 0.12);
 }
 
 progressbar progress {
   border-radius: 6px;
   background-color: #d5d6db;
 }
 
 progressbar.osd {
   min-width: 6px;
   min-height: 6px;
   background-color: transparent;
 }
 
 progressbar.osd trough {
   background-color: transparent;
 }
 
 progressbar.osd progress {
   background-color: #d5d6db;
 }
 
 progressbar trough.empty progress {
   all: unset;
 }
 
 /*************
  * Level Bar *
  *************/
 levelbar.horizontal block {
   min-height: 6px;
 }
 
 levelbar.horizontal.discrete block {
   min-width: 36px;
 }
 
 levelbar.horizontal.discrete block:not(:last-child) {
   margin-right: 2px;
 }
 
 levelbar.vertical block {
   min-width: 6px;
 }
 
 levelbar.vertical.discrete block {
   min-height: 36px;
 }
 
 levelbar.vertical.discrete block:not(:last-child) {
   margin-bottom: 2px;
 }
 
 levelbar trough {
   border-radius: 6px;
 }
 
 levelbar block.low {
   background-color: #fdd633;
 }
 
 levelbar block.high,
 levelbar block:not(.empty) {
   background-color: #d5d6db;
 }
 
 levelbar block.full {
   background-color: #81c995;
 }
 
 levelbar block.empty {
   background-color: rgba(239, 240, 242, 0.12);
 }
 
 /****************
  * Print dialog *
 *****************/
 window.dialog.print drawing {
   color: #eff0f2;
   background: none;
   border: none;
   padding: 0;
 }
 
 window.dialog.print drawing paper {
   padding: 0;
   border: 1px solid rgba(239, 240, 242, 0.12);
   background-color: #1a1b26;
   color: #eff0f2;
 }
 
 window.dialog.print .dialog-action-box {
   margin: 12px;
 }
 
 /**********
  * Frames *
  **********/
 frame,
 .frame {
   border: 1px solid rgba(239, 240, 242, 0.12);
 }
 
 frame > list,
 .frame > list {
   border: none;
 }
 
 frame.view,
 .frame.view {
   border-radius: 6px;
 }
 
 frame.flat,
 .frame.flat {
   border-style: none;
 }
 
 frame {
   border-radius: 6px;
 }
 
 frame > label {
   margin: 4px;
 }
 
 frame.flat > border,
 statusbar frame > border {
   border: none;
 }
 
 actionbar > revealer > box {
   padding: 6px;
   border-spacing: 6px;
   border-top: 1px solid rgba(239, 240, 242, 0.12);
   background-color: #1a1b26;
   background-clip: border-box;
 }
 
 .background.csd box.vertical > actionbar > revealer > box {
   border-radius: 0 0 12px 12px;
 }
 
 statusbar {
   padding: 6px 18px;
 }
 
 scrolledwindow viewport.frame {
   border: none;
 }
 
 stack scrolledwindow.frame viewport.frame list {
   border: none;
 }
 
 overshoot.top {
   background-size: 200% 70%;
   background-image: radial-gradient(
     farthest-side at top,
     rgba(213, 214, 219, 0.24) 99%,
     rgba(213, 214, 219, 0) 100%
   );
   background-repeat: no-repeat;
   background-position: center top;
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
 
 overshoot.bottom {
   background-size: 200% 70%;
   background-image: radial-gradient(
     farthest-side at bottom,
     rgba(213, 214, 219, 0.24) 99%,
     rgba(213, 214, 219, 0) 100%
   );
   background-repeat: no-repeat;
   background-position: center bottom;
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
 
 overshoot.left {
   background-size: 200% 70%;
   background-image: radial-gradient(
     farthest-side at left,
     rgba(213, 214, 219, 0.24) 99%,
     rgba(213, 214, 219, 0) 100%
   );
   background-repeat: no-repeat;
   background-position: left center;
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
 
 overshoot.right {
   background-size: 200% 70%;
   background-image: radial-gradient(
     farthest-side at right,
     rgba(213, 214, 219, 0.24) 99%,
     rgba(213, 214, 219, 0) 100%
   );
   background-repeat: no-repeat;
   background-position: right center;
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
 
 junction {
   border-style: solid none none solid;
   border-width: 1px;
   border-color: rgba(239, 240, 242, 0.12);
   background-color: #1a1b26;
 }
 
 junction:dir(rtl) {
   border-style: solid solid none none;
 }
 
 separator {
   min-width: 1px;
   min-height: 1px;
   background-color: rgba(239, 240, 242, 0.12);
 }
 
 stacksidebar + separator.vertical,
 stacksidebar separator.horizontal,
 button.font separator,
 button.file separator {
   min-width: 0;
   min-height: 0;
   background-color: transparent;
 }
 
 /*********
  * Lists *
  *********/
 listview,
 list {
   border-color: rgba(239, 240, 242, 0.12);
   background-color: #24283b;
 }
 
 listview row,
 list row {
   padding: 2px;
 }
 
 listview > row.expander,
 list > row.expander {
   padding: 0px;
 }
 
 listview > row.expander .row-header,
 list > row.expander .row-header {
   padding: 2px;
 }
 
 list.frame {
   border-radius: 6px;
 }
 
 columnview.view > header > button,
 treeview.view > header > button,
 row.activatable {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
 columnview.view > header > button:focus,
 treeview.view > header > button:focus,
 row.activatable:focus {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
 columnview.view > header > button:hover,
 treeview.view > header > button:hover,
 row.activatable:hover {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0ms;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
 columnview.view > header > button.has-open-popup,
 treeview.view > header > button.has-open-popup,
 columnview.view > header > button:active,
 treeview.view > header > button:active,
 row.activatable.has-open-popup,
 row.activatable:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.12);
 }
 
 button row.activatable:focus,
 button row.activatable:hover,
 button row.activatable:active {
   box-shadow: none;
 }
 
 row:selected image,
 row:selected label {
   color: #eff0f2;
 }
 
 row:selected button image,
 row:selected button label {
   color: inherit;
 }
 
 row:selected:disabled image,
 row:selected:disabled label {
   color: rgba(239, 240, 242, 0.5);
 }
 
 treeexpander {
   border-spacing: 4px;
 }
 
 columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
   outline: 2px solid alpha(currentColor, 0.06);
 }
 
 columnview row:not(:selected) cell editablelabel.editing:focus-within {
   outline: 2px solid #d5d6db;
 }
 
 columnview row:not(:selected) cell editablelabel.editing text selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #d5d6db;
 }
 
 .rich-list {
   /* rich lists usually containing other widgets than just labels/text */
 }
 
 .rich-list > row {
   padding: 9px 12px;
   min-height: 32px;
   /* should be tall even when only containing a label */
 }
 
 .rich-list > row > box {
   border-spacing: 12px;
 }
 
 /*********************
  * App Notifications *
  *********************/
 .app-notification {
   margin: 8px;
   border-spacing: 9px;
   padding: 9px;
   border: none;
 }
 
 .app-notification button.text-button:not(:disabled) {
   color: #d5d6db;
 }
 
 .app-notification.frame,
 .app-notification border {
   border-style: none;
 }
 
 /*************
  * Expanders *
  *************/
 expander {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   min-width: 16px;
   min-height: 16px;
   color: rgba(239, 240, 242, 0.7);
   -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
 }
 
 expander:dir(rtl) {
   -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
 }
 
 expander:hover,
 expander:active {
   color: #eff0f2;
 }
 
 expander:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 expander-widget > box > title {
   border-radius: 6px;
 }
 
 expander-widget > box > title:hover > expander {
   color: rgba(239, 240, 242, 0.7);
 }
 
 .navigation-sidebar:not(decoration):not(window):drop(active):focus,
 .navigation-sidebar:not(decoration):not(window):drop(active),
 placessidebar:not(decoration):not(window):drop(active):focus,
 placessidebar:not(decoration):not(window):drop(active),
 stackswitcher:not(decoration):not(window):drop(active):focus,
 stackswitcher:not(decoration):not(window):drop(active),
 expander-widget:not(decoration):not(window):drop(active):focus,
 expander-widget:not(decoration):not(window):drop(active) {
   box-shadow: none;
 }
 
 /************
  * Calendar *
  ************/
 calendar {
   padding: 0;
   border: 1px solid rgba(239, 240, 242, 0.12);
   border-radius: 6px;
   color: #eff0f2;
 }
 
 calendar:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 calendar:selected {
   border-radius: 6px;
 }
 
 calendar > header {
   padding: 3px;
   border-bottom: 1px solid rgba(239, 240, 242, 0.12);
 }
 
 calendar > header > button {
   min-height: 24px;
 }
 
 calendar > grid {
   margin: 3px;
 }
 
 calendar > grid > label {
   border-radius: 9999px;
   margin: 0;
 }
 
 calendar > grid > label.today:selected {
   box-shadow: none;
 }
 
 calendar > grid > label:focus {
   outline-style: none;
 }
 
 calendar > grid > label.day-number {
   padding: 9px;
 }
 
 calendar > grid > label.day-number.other-month {
   color: alpha(currentColor, 0.3);
 }
 
 /***********
  * Dialogs *
  ***********/
 window.dialog.message.background {
   background-color: #24283b;
 }
 
 window.dialog.message box.dialog-vbox.vertical {
   border-spacing: 10px;
 }
 
 window.dialog.message .titlebar {
   min-height: 24px;
   border-style: none;
   box-shadow: inset 0 1px rgba(239, 240, 242, 0.1);
   background-color: #24283b;
   color: #eff0f2;
 }
 
 window.dialog.message .titlebar:backdrop {
   background-color: #24283b;
   color: rgba(239, 240, 242, 0.7);
 }
 
 window.dialog.message.csd .dialog-action-area {
   margin-top: -6px;
   padding: 6px;
 }
 
 window.dialog.message.csd .dialog-action-area > button,
 window.dialog.message.csd .dialog-action-area > button:first-child,
 window.dialog.message.csd .dialog-action-area > button:last-child {
   border-radius: 6px;
 }
 
 window.dialog.message.csd .dialog-action-area > button:not(:last-child) {
   margin-right: 6px;
 }
 
 window.dialog.message.csd .dialog-action-area > button:not(:disabled) {
   color: #d5d6db;
 }
 
 window.dialog.message.csd
   .dialog-action-area
   > button.destructive-action:not(:disabled) {
   color: #f28b82;
 }
 
 .csd filechooser {
   background-color: #1a1b26;
   border-radius: 0 0 12px 12px;
 }
 
 filechooser .dialog-action-box {
   border-top: 1px solid rgba(239, 240, 242, 0.12);
 }
 
 filechooser #pathbarbox {
   border-bottom: 1px solid rgba(239, 240, 242, 0.12);
   background-color: #1a1b26;
 }
 
 filechooser stack.view {
   background-color: transparent;
 }
 
 filechooser stack.view scrolledwindow {
   background-color: transparent;
   border-radius: 0 0 12px 0;
 }
 
 filechooser stack.view scrolledwindow list {
   background-color: transparent;
 }
 
 filechooser stack.view scrolledwindow treeview.view {
   background-color: transparent;
 }
 
 filechooser stack.view > placesview {
   background-color: transparent;
 }
 
 filechooser stack.view > placesview > actionbar,
 filechooser stack.view > placesview > actionbar > revealer > box {
   background-color: transparent;
 }
 
 filechooser stack.view frame > border {
   border: none;
 }
 
 .csd filechooser placessidebar {
   background: none;
   border-bottom-left-radius: 12px;
 }
 
 filechooser actionbar,
 filechooser actionbar > revealer > box {
   background-color: transparent;
 }
 
 filechooserbutton > button > box {
   border-spacing: 6px;
 }
 
 filechooserbutton:drop(active) {
   box-shadow: none;
   border-color: transparent;
 }
 
 /***********
  * Sidebar *
  ***********/
 .sidebar {
   border-style: none;
   background-color: #343b58;
 }
 
 .sidebar:not(separator):dir(ltr),
 .sidebar:not(separator).left,
 .sidebar:not(separator).left:dir(rtl) {
   border-right: 1px solid rgba(239, 240, 242, 0.12);
   border-left-style: none;
 }
 
 .sidebar:not(separator):dir(rtl),
 .sidebar:not(separator).right {
   border-left: 1px solid rgba(239, 240, 242, 0.12);
   border-right-style: none;
 }
 
 .sidebar listview.view,
 .sidebar list {
   background-color: transparent;
 }
 
 paned .sidebar.left,
 paned .sidebar.right,
 paned .sidebar.left:dir(rtl),
 paned .sidebar:dir(rtl),
 paned .sidebar:dir(ltr),
 paned .sidebar {
   border-style: none;
 }
 
 stacksidebar list {
   padding: 6px;
   background-color: #343b58;
 }
 
 stacksidebar row {
   min-height: 24px;
   padding: 6px 9px;
   border-radius: 3px;
 }
 
 stacksidebar row:selected {
   font-weight: 500;
 }
 
 stacksidebar row + row {
   margin-top: 4px;
 }
 
 stacksidebar row > label {
   padding-left: 6px;
   padding-right: 6px;
   color: inherit;
 }
 
 separator.sidebar {
   background-color: rgba(239, 240, 242, 0.12);
   border-right: none;
 }
 
 separator.sidebar.selection-mode,
 .selection-mode separator.sidebar {
   background-color: rgba(239, 240, 242, 0.15);
 }
 
 /**********************
  * Navigation Sidebar *
  **********************/
 .navigation-sidebar {
   padding: 6px;
   border-right: none;
 }
 
 .navigation-sidebar > row {
   min-height: 24px;
   padding: 6px 9px;
   border-radius: 3px;
 }
 
 .navigation-sidebar > row:hover,
 .navigation-sidebar > row:focus-visible:focus-within {
   background-color: alpha(currentColor, 0.08);
 }
 
 .navigation-sidebar > row:selected label {
   color: #d5d6db;
 }
 
 .navigation-sidebar > row:selected:hover {
   background-color: alpha(currentColor, 0.16);
 }
 
 .navigation-sidebar > row:selected:focus-visible:focus-within {
   outline: none;
   background-color: alpha(currentColor, 0.08);
 }
 
 .navigation-sidebar > row:selected:focus-visible:focus-within:hover {
   background-color: alpha(currentColor, 0.16);
 }
 
 .navigation-sidebar > row:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 /****************
  * File chooser *
  ****************/
 row image.sidebar-icon {
   transition: color 75ms cubic-bezier(0, 0, 0.2, 1);
   color: rgba(239, 240, 242, 0.7);
 }
 
 row image.sidebar-icon:disabled {
   color: rgba(239, 240, 242, 0.3);
 }
 
 placessidebar > viewport.frame {
   border-style: none;
 }
 
 placessidebar list {
   padding: 1px 0 4px;
 }
 
 placessidebar .navigation-sidebar > row {
   min-height: 32px;
   margin: -1px 4px -1px 0;
   padding: 0;
   border-radius: 0 9999px 9999px 0;
 }
 
 placessidebar .navigation-sidebar > row > revealer {
   padding: 0 8px 0 16px;
 }
 
 placessidebar .navigation-sidebar > row:selected {
   background-color: alpha(currentColor, 0.1);
   color: #d5d6db;
   font-weight: 500;
 }
 
 placessidebar .navigation-sidebar > row:selected image.sidebar-icon {
   color: #d5d6db;
 }
 
 placessidebar .navigation-sidebar > row:disabled {
   color: rgba(239, 240, 242, 0.5);
 }
 
 placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) {
   padding-right: 8px;
 }
 
 placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) {
   padding-left: 8px;
 }
 
 placessidebar .navigation-sidebar > row label.sidebar-label {
   color: inherit;
 }
 
 placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) {
   padding-right: 2px;
 }
 
 placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) {
   padding-left: 2px;
 }
 
 placessidebar .navigation-sidebar > row.sidebar-placeholder-row {
   background-color: alpha(currentColor, 0.08);
 }
 
 placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row {
   color: #d5d6db;
 }
 
 placessidebar
   .navigation-sidebar
   > row.sidebar-new-bookmark-row
   image.sidebar-icon {
   color: #d5d6db;
 }
 
 placessidebar .navigation-sidebar > row:drop(active) {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 0ms;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
 placesview .server-list-button > image {
   transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -gtk-icon-transform: rotate(0turn);
 }
 
 placesview .server-list-button:checked > image {
   transition: 200ms cubic-bezier(0, 0, 0.2, 1);
   -gtk-icon-transform: rotate(-0.5turn);
 }
 
 placesview > actionbar > revealer > box > label {
   border-spacing: 6px;
 }
 
 /*********
  * Paned *
  *********/
 paned > separator {
   min-width: 1px;
   min-height: 1px;
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
   background-image: image(rgba(239, 240, 242, 0.12));
   background-size: 1px 1px;
   background-clip: content-box;
 }
 
 paned > separator.wide {
   min-width: 6px;
   min-height: 6px;
   background-color: #1a1b26;
   background-image: image(rgba(239, 240, 242, 0.12)),
     image(rgba(239, 240, 242, 0.12));
   background-size: 1px 1px, 1px 1px;
 }
 
 paned.horizontal > separator {
   background-repeat: repeat-y;
 }
 
 paned.horizontal > separator:dir(ltr) {
   margin: 0 -8px 0 0;
   padding: 0 8px 0 0;
   background-position: left;
 }
 
 paned.horizontal > separator:dir(rtl) {
   margin: 0 0 0 -8px;
   padding: 0 0 0 8px;
   background-position: right;
 }
 
 paned.horizontal > separator.wide {
   margin: 0;
   padding: 0;
   background-repeat: repeat-y, repeat-y;
   background-position: left, right;
 }
 
 paned.vertical > separator {
   margin: 0 0 -8px 0;
   padding: 0 0 8px 0;
   background-repeat: repeat-x;
   background-position: top;
 }
 
 paned.vertical > separator.wide {
   margin: 0;
   padding: 0;
   background-repeat: repeat-x, repeat-x;
   background-position: bottom, top;
 }
 
 /************
  * GtkVideo *
  ************/
 video {
   background: black;
   border-radius: 6px;
 }
 
 video image.osd {
   min-width: 64px;
   min-height: 64px;
   border-radius: 9999px;
   border: none;
 }
 
 /**************
  * GtkInfoBar *
  **************/
 infobar {
   border: none;
   margin-bottom: 0;
 }
 
 infobar > revealer > box {
   padding: 6px;
   border-spacing: 12px;
 }
 
 infobar.info > revealer > box,
 infobar.info:hover > revealer > box,
 infobar.info:backdrop > revealer > box {
   background-color: #1a1b26;
 }
 
 infobar.info > revealer > box button,
 infobar.info > revealer > box button.text-button:not(:disabled),
 infobar.info:hover > revealer > box button,
 infobar.info:hover > revealer > box button.text-button:not(:disabled),
 infobar.info:backdrop > revealer > box button,
 infobar.info:backdrop > revealer > box button.text-button:not(:disabled) {
   color: #d5d6db;
 }
 
 infobar.action > revealer > box,
 infobar.action:backdrop > revealer > box,
 infobar.question > revealer > box,
 infobar.question:backdrop > revealer > box {
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.action > revealer > box button,
 infobar.action > revealer > box button:hover,
 infobar.action > revealer > box button:focus,
 infobar.action > revealer > box button:active,
 infobar.action > revealer > box button:checked,
 infobar.action > revealer > box button.text-button:not(:disabled),
 infobar.action:backdrop > revealer > box button,
 infobar.action:backdrop > revealer > box button:hover,
 infobar.action:backdrop > revealer > box button:focus,
 infobar.action:backdrop > revealer > box button:active,
 infobar.action:backdrop > revealer > box button:checked,
 infobar.action:backdrop > revealer > box button.text-button:not(:disabled),
 infobar.question > revealer > box button,
 infobar.question > revealer > box button:hover,
 infobar.question > revealer > box button:focus,
 infobar.question > revealer > box button:active,
 infobar.question > revealer > box button:checked,
 infobar.question > revealer > box button.text-button:not(:disabled),
 infobar.question:backdrop > revealer > box button,
 infobar.question:backdrop > revealer > box button:hover,
 infobar.question:backdrop > revealer > box button:focus,
 infobar.question:backdrop > revealer > box button:active,
 infobar.question:backdrop > revealer > box button:checked,
 infobar.question:backdrop > revealer > box button.text-button:not(:disabled) {
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.action > revealer > box *:link,
 infobar.action:backdrop > revealer > box *:link,
 infobar.question > revealer > box *:link,
 infobar.question:backdrop > revealer > box *:link {
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.action:hover > revealer > box,
 infobar.question:hover > revealer > box {
   background-color: lightgray;
 }
 
 infobar.warning > revealer > box,
 infobar.warning:backdrop > revealer > box {
   background-color: #fdd633;
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.warning > revealer > box button,
 infobar.warning > revealer > box button:hover,
 infobar.warning > revealer > box button:focus,
 infobar.warning > revealer > box button:active,
 infobar.warning > revealer > box button:checked,
 infobar.warning > revealer > box button.text-button:not(:disabled),
 infobar.warning:backdrop > revealer > box button,
 infobar.warning:backdrop > revealer > box button:hover,
 infobar.warning:backdrop > revealer > box button:focus,
 infobar.warning:backdrop > revealer > box button:active,
 infobar.warning:backdrop > revealer > box button:checked,
 infobar.warning:backdrop > revealer > box button.text-button:not(:disabled) {
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.warning > revealer > box *:link,
 infobar.warning:backdrop > revealer > box *:link {
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.warning:hover > revealer > box {
   background-color: #fdd11a;
 }
 
 infobar.error > revealer > box,
 infobar.error:backdrop > revealer > box {
   background-color: #f28b82;
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.error > revealer > box button,
 infobar.error > revealer > box button:hover,
 infobar.error > revealer > box button:focus,
 infobar.error > revealer > box button:active,
 infobar.error > revealer > box button:checked,
 infobar.error > revealer > box button.text-button:not(:disabled),
 infobar.error:backdrop > revealer > box button,
 infobar.error:backdrop > revealer > box button:hover,
 infobar.error:backdrop > revealer > box button:focus,
 infobar.error:backdrop > revealer > box button:active,
 infobar.error:backdrop > revealer > box button:checked,
 infobar.error:backdrop > revealer > box button.text-button:not(:disabled) {
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.error > revealer > box *:link,
 infobar.error:backdrop > revealer > box *:link {
   color: rgba(0, 0, 0, 0.87);
 }
 
 infobar.error:hover > revealer > box {
   background-color: #f0766b;
 }
 
 /************
  * Tooltips *
  ************/
 tooltip {
   padding: 6px 12px;
   box-shadow: none;
 }
 
 tooltip.background {
   background-color: rgba(25, 25, 25, 0.9);
   color: #eff0f2;
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2),
     0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
   border-radius: 3px;
   margin: 2px 6px 8px 6px;
 }
 
 tooltip > box {
   border-spacing: 6px;
 }
 
 /*****************
  * Color Chooser *
  *****************/
 colorswatch.top {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
 
 colorswatch.top overlay {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
 
 colorswatch.bottom {
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
 colorswatch.bottom overlay {
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
 colorswatch.left,
 colorswatch:first-child:not(.top) {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
 }
 
 colorswatch.left overlay,
 colorswatch:first-child:not(.top) overlay {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
 }
 
 colorswatch.right,
 colorswatch:last-child:not(.bottom) {
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
 colorswatch.right overlay,
 colorswatch:last-child:not(.bottom) overlay {
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
 colorswatch.dark {
   color: #eff0f2;
 }
 
 colorswatch.light {
   color: rgba(0, 0, 0, 0.87);
 }
 
 colorswatch#add-color-button {
   border-radius: 12px 12px 0 0;
   color: #eff0f2;
 }
 
 colorswatch#add-color-button:only-child {
   border-radius: 12px;
 }
 
 colorswatch#add-color-button overlay {
   background-color: #24283b;
 }
 
 colorswatch:disabled {
   opacity: 0.5;
 }
 
 colorswatch:disabled overlay {
   box-shadow: none;
 }
 
 colorswatch#editor-color-sample {
   border-radius: 12px;
 }
 
 colorswatch#editor-color-sample overlay {
   border-radius: 12px;
 }
 
 colorchooser .popover.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 6px;
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2),
     0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12),
     inset 0 1px rgba(239, 240, 242, 0.1);
   background-color: #24283b;
 }
 
 colorchooser .popover.osd:backdrop {
   box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3),
     0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12),
     inset 0 1px rgba(239, 240, 242, 0.1);
 }
 
 /********
  * Misc *
  ********/
 .content-view {
   background-color: #1a1b26;
 }
 
 /**********************
  * Window Decorations *
  **********************/
 window.csd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 12px;
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2),
     0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12),
     0 0 0 2px #414868, 0 0 16px transparent;
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2),
     0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12),
     0 0 0 2px #414868, 0 0 16px transparent;
 }
 
 window.csd:backdrop {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3),
     0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17),
     0 0 0 2px #24283b, 0 0 16px transparent;
 }
 
 window.csd.popup {
   border-radius: 12px;
   box-shadow: none;
 }
 
 window.csd.dialog.message {
   border-radius: 12px;
 }
 
 .solid-csd window.csd {
   margin: 0;
   padding: 2px;
   border-radius: 0;
   background-color: #1a1b26;
   border: 2px solid #d5d6db;
 }
 
 .solid-csd window.csd:backdrop {
   background-color: #1a1b26;
 }
 
 /* Note: Border Radius in fullscreen */
 window.csd.maximized,
 window.csd.fullscreen,
 window.csd.tiled,
 window.csd.tiled-top,
 window.csd.tiled-right,
 window.csd.tiled-bottom,
 window.csd.tiled-left {
   border-radius: 0;
 }
 
 windowcontrols {
   border-spacing: 6px;
 }
 
 windowcontrols:not(.empty).start:dir(ltr),
 windowcontrols:not(.empty).end:dir(rtl) {
   margin-right: 6px;
   margin-left: 3px;
 }
 
 windowcontrols:not(.empty).start:dir(rtl),
 windowcontrols:not(.empty).end:dir(ltr) {
   margin-left: 6px;
   margin-right: 3px;
 }
 
 windowcontrols button:not(.suggested-action):not(.destructive-action) {
   min-height: 14px;
   min-width: 14px;
   padding: 0;
   margin: 0 3px;
   border-radius: 9999px;
 }
 
 windowcontrols button:not(.suggested-action):not(.destructive-action).minimize,
 windowcontrols button:not(.suggested-action):not(.destructive-action).maximize,
 windowcontrols button:not(.suggested-action):not(.destructive-action).close {
   color: transparent;
 }
 
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).minimize
   image,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).maximize
   image,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).close
   image {
   padding: 0;
 }
 
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).minimize:hover,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).minimize:active {
   background-color: #8f5e15;
   color: transparent;
 }
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).maximize:hover,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).maximize:active {
   background-color: #33635c;
   color: transparent;
 }
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).close:hover,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).close:active {
   color: transparent;
   background-color: #8c4351;
 }
 
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).minimize:backdrop,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).maximize:backdrop,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).close:backdrop {
   background-color: #414868;
   color: transparent;
 }
 
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).minimize:backdrop:hover,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).minimize:backdrop:active {
   background-color: #e0af68;
   color: transparent;
 }
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).maximize:backdrop:hover,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).maximize:backdrop:active {
   background-color: #9ece6a;
   color: transparent;
 }
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).close:backdrop:hover,
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).close:backdrop:active {
   background-color: #f7768e;
   color: transparent;
 }
 
 windowcontrols button:not(.suggested-action):not(.destructive-action).minimize {
   background-color: #e0af68;
 }
 
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).minimize:active {
   background-color: #e0af68;
 }
 
 windowcontrols button:not(.suggested-action):not(.destructive-action).maximize {
   background-color: #9ece6a;
 }
 
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).maximize:active {
   background-color: #9ece6a;
 }
 
 windowcontrols button:not(.suggested-action):not(.destructive-action).close {
   background-color: #f7768e;
 }
 
 windowcontrols
   button:not(.suggested-action):not(.destructive-action).close:active {
   background-color: #f7768e;
 }
 
 gridview > child:selected,
 modelbutton.flat:selected,
 row:selected,
 calendar:selected,
 calendar > grid > label.day-number:selected {
   background-color: alpha(currentColor, 0.06);
 }
 
 .view:selected,
 iconview:selected,
 flowbox > flowboxchild:selected,
 calendar > grid > label.today,
 filechooser stack.view scrolledwindow treeview.view:selected,
 stacksidebar row:selected,
 .navigation-sidebar > row:selected {
   color: #d5d6db;
   background-color: rgba(213, 214, 219, 0.2);
 }
 
 textview text selection:focus,
 textview text selection,
 label > selection,
 entry > text > selection,
 calendar > grid > label.today:selected {
   color: rgba(0, 0, 0, 0.87);
   background-color: #d5d6db;
 }
 
 .monospace {
   font-family: monospace;
 }
 
 /**********************
  * Touch Copy & Paste *
  **********************/
 cursor-handle {
   color: #d5d6db;
   -gtk-icon-source: -gtk-recolor(
     url('assets/scalable/cursor-handle-symbolic.svg')
   );
 }
 
 cursor-handle.insertion-cursor:dir(ltr),
 cursor-handle.insertion-cursor:dir(rtl) {
   padding-top: 6px;
 }
 
 shortcuts-section {
   margin: 20px;
 }
 
 .shortcuts-search-results {
   margin: 20px;
   border-spacing: 24px;
 }
 
 shortcut {
   border-spacing: 6px;
 }
 
 shortcut > .keycap {
   min-width: 12px;
   min-height: 26px;
   margin-top: 2px;
   padding-bottom: 2px;
   padding-left: 8px;
   padding-right: 8px;
   border: solid 1px rgba(239, 240, 242, 0.12);
   border-radius: 7px;
   box-shadow: inset 0 -2px rgba(239, 240, 242, 0.12);
   background-color: #24283b;
   color: #eff0f2;
   font-size: smaller;
 }
 
 :not(decoration):not(window):drop(active) {
   caret-color: #d5d6db;
 }
 
 stackswitcher {
   min-height: 0;
   border-radius: 9999px;
   padding: 2px;
   margin: 6px 0;
   background-color: transparent;
   border: 2px solid #d5d6db;
 }
 
 stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action) {
   margin: 0 0;
   border-radius: 9999px;
   background-color: transparent;
   min-height: 20px;
   padding: 5px 10px;
 }
 
 stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action).text-button {
   min-width: 100px;
 }
 
 stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action):focus:not(:hover) {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
 }
 
 stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action):active {
   box-shadow: inset 0 0 0 9999px alpha(#d5d6db, 0.16);
 }
 
 stackswitcher.linked:not(.vertical)
   > button:not(.suggested-action):not(.destructive-action):checked {
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 stackswitcher button.text-button {
   min-width: 100px;
 }
 
 stackswitcher.circular {
   border-spacing: 12px;
 }
 
 stackswitcher.circular button.circular,
 stackswitcher.circular button.text-button.circular {
   min-width: 36px;
   min-height: 36px;
   padding: 0;
 }
 
 /*************
  * App Icons *
  *************/
 .lowres-icon {
   -gtk-icon-shadow: none;
 }
 
 .icon-dropshadow {
   -gtk-icon-shadow: none;
 }
 
 /*********
  * Emoji *
  *********/
 popover.emoji-picker {
   padding: 0;
 }
 
 popover.emoji-picker > contents {
   padding: 0;
 }
 
 .emoji-searchbar {
   padding: 6px;
   border-spacing: 6px;
   border-bottom: 1px solid rgba(239, 240, 242, 0.12);
   background: none;
 }
 
 .emoji-searchbar entry text {
   background: none;
   box-shadow: none;
 }
 
 .emoji-toolbar {
   padding: 0;
   border-spacing: 3px;
   border-top: 1px solid rgba(239, 240, 242, 0.12);
   background: none;
 }
 
 button.emoji-section {
   margin: 0;
   padding: 6px;
   border-radius: 6px;
 }
 
 button.emoji-section:checked {
   color: #d5d6db;
 }
 
 popover.emoji-picker emoji {
   font-size: x-large;
   padding: 6px;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 6px;
 }
 
 popover.emoji-picker emoji:focus,
 popover.emoji-picker emoji:hover {
   background: alpha(currentColor, 0.08);
 }
 
 emoji-completion-row {
   min-height: 28px;
   padding: 0 12px;
 }
 
 emoji-completion-row > box {
   border-spacing: 6px;
   padding: 2px 6px;
 }
 
 emoji-completion-row:focus,
 emoji-completion-row:hover,
 emoji-completion-row emoji:hover,
 emoji-completion-row emoji:focus {
   background-color: alpha(currentColor, 0.08);
   color: #eff0f2;
 }
 
 popover.entry-completion > contents {
   padding: 0;
 }
 
 window.background.csd stack stack stack frame > list,
 window.background.csd > stack > stack > box > frame > list,
 window.background.csd > stack > stack > box > box > frame > list,
 window.background.csd > stack > box > stack > box > frame > list,
 window.background.csd
   > stack
   > box
   > stack
   > scrolledwindow
   > viewport
   frame
   > list,
 window.background.csd
   > stack
   > box
   > stack
   > box
   > scrolledwindow
   > viewport
   > frame
   > list,
 window.background.csd
   > stack
   > grid
   > scrolledwindow
   > viewport
   > box
   > frame
   > list,
 window.background.csd > stack > list,
 window.background.csd > stack > scrolledwindow > viewport > box > list,
 window.background.csd > box > stack > scrolledwindow > viewport > box > list {
   border-radius: 7px;
   box-shadow: none;
   border: 1px solid rgba(239, 240, 242, 0.12);
 }
 
 window.background.csd
   stack
   stack
   stack
   frame
   > list
   row.activatable:first-child,
 window.background.csd > stack > list row.activatable:first-child {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
 window.background.csd stack stack stack frame > list row.activatable:last-child,
 window.background.csd > stack > list row.activatable:last-child {
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
 
 window.background.csd stack stack stack frame > list row.activatable:only-child,
 window.background.csd > stack > list row.activatable:only-child {
   border-radius: 6px;
 }
 
 window.background.csd stack stack stack frame > list row.activatable:focus,
 window.background.csd > stack > list row.activatable:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
 }
 
 /**************
  * Extensions *
  **************/
 window.background.csd stack stack stack frame > border,
 window.background.csd > stack > stack > box > frame > border,
 window.background.csd > stack > stack > box > box > frame > border,
 window.background.csd > stack > box > stack > box > frame > border,
 window.background.csd
   > stack
   > box
   > stack
   > scrolledwindow
   > viewport
   frame
   > border,
 window.background.csd
   > stack
   > box
   > stack
   > box
   > scrolledwindow
   > viewport
   > frame
   > border,
 window.background.csd
   > stack
   > grid
   > scrolledwindow
   > viewport
   > box
   > frame
   > border {
   border: none;
 }
 
 window.background.csd > stack > box > box > list,
 window.background.csd > stack > box > stack > scrolledwindow > viewport > list {
   border-bottom-left-radius: 12px;
 }
 
 window.background.csd
   > stack
   > box
   > .sidebar
   > scrolledwindow
   > viewport
   > list {
   padding: 0 0;
 }
 
 /**********
  * Polari *
  **********/
 .polari-room-list .sidebar {
   background: none;
 }
 
 .polari-room-list .sidebar > row.activatable:selected {
   background-color: #d5d6db;
   color: rgba(0, 0, 0, 0.87);
 }
 
 .polari-room-list popover.background > arrow,
 .polari-room-list popover.background > contents {
   padding: 0;
 }