* {
    padding: 0px;
    background-clip: padding-box;
    /* Style properties */
    -GtkToolButton-icon-spacing: 4;
    -GtkTextView-error-underline-color: @error_color;
    -GtkScrolledWindow-scrollbar-spacing: 0;
    -GtkToolItemGroup-expander-size: 12;
    -GtkTreeView-expander-size: 12; /* arrow size in list/tree views */
    -GtkTreeView-horizontal-separator: 4;
    -GtkIMHtml-hyperlink-color: @link_color;
    -GtkHTML-link-color: @link_color;
    -WnckTasklist-fade-overlay-rect: 0;
    outline-color: @focus_border;
    outline-style: dashed;
    outline-offset: -3px;
    outline-width: 1px;
    -gtk-outline-radius: 2px;
    /*-gtk-icon-style: regular; *//* no symbolic icons */
}

/***************
 * Base States *
 ***************/
.background {
    color: @theme_fg_color;
    text-shadow: none;
    background-color: @theme_bg_color;
    border-style: none;
    border-width: 0px;
    border-radius: 0px;
}

.background:backdrop {
    text-shadow: none;
    -gtk-icon-shadow: none;
}

*:hover {
/*    background-color: shade(@theme_bg_color, 1.02);
    color: @theme_fg_color;*/
    text-shadow: none;
}

*:selected {
/*    background-color: shade(@theme_selected_bg_color, 1.23);
    color: @theme_selected_fg_color;*/
    text-shadow: none;
}

/* seems like firefox needs this stupid wildcard in several places */
*:selected:focus {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
    text-shadow: none;
}

*:selected:backdrop {
    text-shadow: none;
    -gtk-icon-shadow: none;
}

*:disabled {
    /* no need to a different background */
/*    background-color: @theme_bg_color; *//*@insensitive_bg_color;*/
/*    color: @insensitive_fg_color;
    border-color: @insensitive_border_color;*/
}

*:active {
/*    background-color: shade(@theme_bg_color, 0.915);*/
}

.gtkstyle-fallback {
    background-color: @theme_bg_color;
    color: @theme_fg_color;
}

.gtkstyle-fallback:hover {
    background-color: shade(@theme_bg_color, 1.10);
    color: @theme_fg_color;
}

.gtkstyle-fallback:active {
    background-color: shade(@theme_bg_color, 0.915);
    color: @theme_fg_color;
}

.gtkstyle-fallback:disabled {
    background-color: @less_dark_color; /*@insensitive_bg_color;*/
    color: @insensitive_fg_color;
    border-color: @insensitive_border_color;
}

.gtkstyle-fallback:selected {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

/* Fix for applications that have issues finding a default monospace font */
.monospace {
  font-family: Monospace;
}

image,
image:disabled,
label,
label:disabled,
box,
box:disabled,
grid,
grid:disabled {
	background-color: transparent;
}

/************
 * Tooltips *
 ************/

tooltip,
tooltip.background,
.tooltip,
.tooltip.background {
    color: @theme_selected_fg_color;
    padding: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: @theme_fg_color;
    border-radius: 3px;
    background-image: linear-gradient(to left,
                                      shade(@theme_selected_bg_color, 1.1),
                                      shade(@theme_selected_bg_color, 0.65));
	text-shadow: none;
}

/* needed for override CSD setting */
tooltip decoration,
.tooltip decoration,
tooltip.csd decoration,
.tooltip.csd decoration,
tooltip.ssd decoration,
.tooltip.ssd decoration,
tooltip.solid-csd decoration,
.tooltip.solid-csd decoration,
tooltip.background.csd decoration,
.tooltip.background.csd decoration,
tooltip.background.ssd decoration,
.tooltip.background.ssd decoration,
tooltip.background.solid-csd decoration,
.tooltip.background.solid-csd decoration {
    background-color: alpha(@theme_selected_bg_color, 0.55);
    border-style: solid;
    border-width: 1px;
    border-color: alpha(@theme_fg_color, 0.85);
    border-radius: 3px;
    box-shadow: 0 1px 5px @wm_shadow;
    padding: 1px;
}

tooltip label,
.tooltip label {
    color: @theme_selected_fg_color;
	text-shadow: none;
    padding: 3px;
}

/*****************
 * Miscellaneous *
 *****************/

content-view.view.rubberband,
.content-view.view.rubberband,
view.rubberband,
rubberband,
.view.rubberband,
.rubberband {
    background-color: alpha(@theme_selected_bg_color, 0.35);
    background-image: linear-gradient(to bottom,
                                      alpha (@theme_selected_bg_color, 0.35),
                                      alpha (@theme_selected_bg_color, 0.35));
    border-color: @theme_selected_bg_color;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
}

/************************
 * overshoot/undershoot *
 ************************/

/* displays at end of mouse scrolling */
overshoot.top {
    background-image: -gtk-gradient(radial,
                                    center top, 0,
                                    center top, 0.5,
                                    to(@overshoot_bg_color),
                                    to(rgba(158, 179, 137, 0)));
    background-size: 100% 20%, 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.top:backdrop {
    background-image: -gtk-gradient(radial,
                                    center top, 0,
                                    center top, 0.5,
                                    to(@overshoot_backdrop_bg_color),
                                    to(rgba(137, 145, 131, 0)));
    background-size: 100% 20%;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.bottom {
    background-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to(@overshoot_bg_color),
                                    to(rgba(158, 179, 137, 0)));
    background-size: 100% 20%, 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.bottom:backdrop {
    background-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to(@overshoot_backdrop_bg_color),
                                    to(rgba(137, 145, 131, 0)));
    background-size: 100% 20%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.left {
    background-image: -gtk-gradient(radial,
                                    left center, 0,
                                    left center, 0.5,
                                    to(@overshoot_bg_color),
                                    to(rgba(158, 179, 137, 0)));
    background-size: 20% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.left:backdrop {
    background-image: -gtk-gradient(radial,
                                    left center, 0,
                                    left center, 0.5,
                                    to(@overshoot_backdrop_bg_color),
                                    to(rgba(137, 145, 131, 0)));
    background-size: 20% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.right {
    background-image: -gtk-gradient(radial,
                                    right center, 0,
                                    right center, 0.5,
                                    to(@overshoot_bg_color),
                                    to(rgba(158, 179, 137, 0)));
    background-size: 20% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: right center;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot.right:backdrop {
    background-image: -gtk-gradient(radial,
                                    right center, 0,
                                    right center, 0.5,
                                    to(@overshoot_backdrop_bg_color),
                                    to(rgba(137, 145, 131, 0)));
    background-size: 20% 100%;
    background-repeat: no-repeat;
    background-position: right center;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* result is disable undershoot */
undershoot.top {
    background-color: transparent;
    background-image: linear-gradient(to left,
                                      rgba(255, 255, 255, 0.2) 50%,
                                      rgba(0, 0, 0, 0.2) 50%);
    background-size: 10px 0px;
    background-repeat: repeat-x;
    background-origin: content-box;
    background-position: center top;
}

undershoot.bottom {
    background-color: transparent;
    background-image: linear-gradient(to left,
                                      rgba(255, 255, 255, 0.2) 50%,
                                      rgba(0, 0, 0, 0.2) 50%);
    background-size: 10px 0px;
    background-repeat: repeat-x;
    background-origin: content-box;
    background-position: center bottom;
}

undershoot.left {
    background-color: transparent;
    background-image: linear-gradient(to top,
                                      rgba(255, 255, 255, 0.2) 50%,
                                      rgba(0, 0, 0, 0.2) 50%);
    background-size: 0px 10px;
    background-repeat: repeat-y;
    background-origin: content-box;
    background-position: left center;
}

undershoot.right {
    background-color: transparent;
    background-image: linear-gradient(to top,
                                      rgba(255, 255, 255, 0.2) 50%,
                                      rgba(0, 0, 0, 0.2) 50%);
    background-size: 0px 10px;
    background-repeat: repeat-y;
    background-origin: content-box;
    background-position: right center;
}

/****************
 * Floating Bar *
 ****************/
.floating-bar {
    border-radius: 3px;
    border-width: 0px;
    border-style: solid;
    text-shadow: 0 1px @theme_bg_color;

    color: @theme_fg_color;
    background-image: linear-gradient(to bottom,
                                      shade(@button_gradient_color_a, 1.5),
                                      @theme_bg_color 40%,
                                      shade(@button_gradient_color_b, 0.7));
}

.floating-bar.top {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.floating-bar.right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.floating-bar.bottom {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.floating-bar.left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*********
 * Views *
 *********/

view,
.view,
.view.frame,
.view:disabled,
iconview.view,
viewport.frame {
    background-color: shade(@base_color, 1.04);
    color: @theme_text_color;
    border-radius: 0px;
    padding: 0px;
}

view:selected,
view:active, 
.view:selected,
.view:active {
    background-color: shade(@theme_selected_bg_color, 1.4);
    color: @theme_selected_fg_color;
}

view:selected:focus, 
.view:selected:focus {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

/* ie. pluma open dialog */
.view row:hover {
    background-image:  linear-gradient(to bottom,
                                      @theme_bg_color,
                                      shade(@theme_bg_color, 0.80));
    color: shade (@theme_selected_bg_color, 0.35);
}

/* Exceptional views */
textview text,
textview.view:disabled,
calendar.view,
dialog .view,
dialog view  {
    background-color: @theme_main_color;
    color: @theme_text_color;
}

textview text selection,
textview text selection:focus {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

/* ie. mate-appearance-properties */
iconview.view {
    background-color: shade(@base_color, 1.04);
    color: @theme_text_color;
    border-radius: 0px;
}

iconview.view:selected,
iconview.view:selected:focus,
iconview.view:selected:hover,
iconview.view:selected:focus:hover {
    background-color: alpha(@theme_selected_bg_color, 0.35);
    border-style: solid;
    border-width: 2px;
    border-radius: 12px;
    border-color: alpha(@theme_selected_bg_color, 0.75);
    color: @theme_text_color;
}

iconview.view:hover,
iconview.view:hover:focus {
    background-color: alpha(@theme_selected_bg_color, 0.15);
    border-style: solid;
    border-width: 2px;
    border-radius: 12px;
    border-color: alpha(@theme_selected_bg_color, 0.35);
}

/* ie. caja bg properties left side button area */
viewport {
    background-color: shade(@theme_bg_color, 1.00);
    border-radius: 0px;
    padding: 0px;
}

/* for firefox and probably other apps */
label:selected,
label selection,
label selection:focus,
label selection:hover {
  background-color: @theme_selected_bg_color;
  color: @theme_selected_fg_color;
}

label:selected:disabled,
label selection:disabled {
    color: @insensitive_fg_color;
}

label:backdrop:selected,
label selection:backdrop {
    color: @theme_fg_color;
}

label:backdrop:disabled:selected,
label selection:backdrop:disabled {
    color: @insensitive_fg_color;
}

/**************
 * Separators *
 **************/

treeview separator,
separator,
.separator {
    color: alpha(@frame_color, 0.6);
	background-color: alpha(@frame_color, 0.6);
}

paned > separator {
    border-style: none;
    border-image: none;
    border-width: 0px;
    border-radius: 0;
    background-color: transparent;
    color: shade(@inactive_frame_color, 0.80);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("assets/pane-separator-grip.svg");
}

paned > separator:hover,
paned > separator:selected {
    background-image: url("assets/pane-separator-grip-hover.svg");
}

paned > separator.vertical {
    background-image: url("assets/pane-separator-grip-vertical.svg");
}

paned > separator.vertical:hover,
paned > separator.vertical:selected {
    background-image: url("assets/pane-separator-grip-vertical-hover.svg");
}

.dnd {
    border-width: 1px;
    border-style: solid;
    border-color: @theme_selected_bg_color;
    border-radius: 0px;
}

/*********************
 * Spinner Animation *
 *********************/
/* This is could be CPU-intensive */

@keyframes spin {
    to { -gtk-icon-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;
}

/****************
 * Text Entries *
 ****************/

entry {
    background-color: shade(@theme_bg_color, 1.09);
    border-width: 1px;
    border-style: none;
    border-radius: 3px;
    padding: 4px;
    color: @theme_text_color;
    min-height: 22px;
    margin: 0px 1px 0px 0px; /* move button away from entry */
}

entry:focus {
    box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1),
        inset 1px 1px alpha(@theme_selected_bg_color, 0.1),
        inset -1px -1px alpha(@theme_selected_bg_color, 0.2);
}

entry:selected,
entry selection {
    background-color: shade(@theme_selected_bg_color, 1.0);
    color: @theme_selected_fg_color;
}

entry:selected:focus,
entry selection:focus {
    background-color: shade(@theme_selected_bg_color, 0.8);
}

entry:disabled {
    background-image: none;
    background-color: @insensitive_bg_color;
    border-image: none;
    border-style: solid;
    border-color: @inactive_frame_color;
    color: @insensitive_fg_color;
}

entry:active {
    background-color: shade(@theme_selected_bg_color, 1.23);
    color: @theme_selected_fg_color;
}

toolbar entry {
    background-image: linear-gradient(to bottom,
                                      shade(@internal_element_color, 1.45),
                                      shade(@internal_element_color, 1.57) 20%,
                                      shade(@internal_element_color, 1.7) 50%,
                                      @theme_main_color);
}

entry progressbar,
entry progressbar:focus {
    margin-left: 2px;
    margin-right: 2px;
    border-image: none;
    border-style: none;
    background-color: transparent;
    background-image: linear-gradient(to top, 
                                      transparent 2px,
                                      white 2px,
                                      white 3px,
                                      @theme_selected_bg_color 3px,
                                      @theme_selected_bg_color 5px,
                                      transparent 5px);
    background-size: auto;
}

entry progressbar.pulse,
entry progressbar.pulse:focus {
    background-image: linear-gradient(to top,
                                      transparent 2px,
                                      white 2px,
                                      white 3px,
                                      @borders 3px,
                                      @borders 5px,
                                      transparent 5px);
}

entry.cursor-handle,
cursor-handle {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border-style: none;
}

cursor-handle.top,
cursor-handle.bottom {
    background-color:transparent;
    box-shadow: none;
    border-style: none;
    border-radius: 0px;
    border-width: 0px;
}

entry.cursor-handle.top,
cursor-handle.top {
    -gtk-icon-source: -gtk-icontheme("selection-start-symbolic");
}

entry.cursor-handle.bottom,
cursor-handle.bottom {
    -gtk-icon-source: -gtk-icontheme("selection-end-symbolic");
}

entry image.left {
	padding-right: 6px;
}

entry image.right {
	padding-left: 6px;
}

/*******************
 * Symbolic images *
 *******************/

image,
image:hover,
image:selected,
image:selected:hover,
image:focus,
image:selected:focus,
.view image,
.view image:hover,
.view image:selected,
.view image:selected:hover,
.view image:focus,
.view image:selected:focus {
    color: shade(@theme_selected_bg_color, 0.75);
}

/****************
 * Progress bar *
 ****************/

progressbar {
    border-radius: 16px;
    padding: 0px;
    font-size: smaller;
}

progressbar.horizontal {
    min-height: 20px;
}

progressbar.vertical {
    min-width: 20px;
}

/* progress component */
progressbar.horizontal trough,
progressbar.horizontal progress {
    min-height: 20px;
    border-radius: 16px;
}

progressbar.vertical trough,
progressbar.vertical progress {
    min-width: 20px;
    border-radius: 16px;
}

statusbar progressbar.horizontal {
    min-height: 13px;
}

/* progress component */
statusbar progressbar.horizontal trough,
statusbar progressbar.horizontal progress {
    min-height: 13px;
    border-radius: 6px;
}

progressbar progress.left {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

progressbar progress.right {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

progressbar progress.top {
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}

progressbar progress.bottom {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

treeview.view.progressbar,
treeview.view.progressbar:selected,
progressbar progress {
    border-style: none;
    color: @theme_fg_color;
    background-image: linear-gradient(-45deg,
                                      alpha(@progressbar_pattern, 0.15),
                                      alpha(@progressbar_pattern, 0.15) 25%,
                                      transparent 25%,
                                      transparent 50%,
                                      alpha(@progressbar_pattern, 0.15) 50%,
                                      alpha(@progressbar_pattern, 0.15) 75%,
                                      transparent 75%,
                                      transparent),
                      linear-gradient(to bottom,
                                      @progressbar_background_a,
                                      shade(@progressbar_background_a, 0.98));
}

progressbar.vertical progress {
    background-image: linear-gradient(-135deg,
                                      alpha(@progressbar_pattern, 0.15),
                                      alpha(@progressbar_pattern, 0.15) 25%,
                                      transparent 25%,
                                      transparent 50%,
                                      alpha(@progressbar_pattern, 0.15) 50%,
                                      alpha(@progressbar_pattern, 0.15) 75%,
                                      transparent 75%,
                                      transparent),
                      linear-gradient(to right,
                                      @progressbar_background_a,
                                      shade(@progressbar_background_a, 0.98));
}

treeview.view.trough,
treeview.view.trough:selected,
progressbar trough {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 1.0));
    border-width: 1px;
    border-style: solid;
    border-color: shade(@theme_bg_color, 0.7);
    color: @theme_fg_color;
}

treeview.view.trough {
    padding: 1px;
}

progressbar.vertical trough {
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 1.0));
    border-width: 1px;
    border-style: solid;
    border-color: shade(@theme_bg_color, 0.7);
}

/**********
 * Frames *
 **********/

.frame,
frame > border,  /* firefox location entry */
filechooser stack > box > scrolledwindow {
    background-color: shade(@base_color, 1.02);
    color: lighter (@theme_fg_color);
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    border-color: alpha(@frame_color, 0.6);
    padding: 0px;
}

.frame.flat,
frame > border.flat,
overlay > frame > border {
    border-style: none;
}

/*scrolledwindow,*/
scrolledwindow.frame {
    -gtk-icon-style: regular;
    border-radius: 2px;
}

/* avoid double borders when a viewport is 
 * packed into a GtkScrolledWindow, + avoid double borders in general */
scrolledwindow > viewport.frame,
scrolledwindow.frame > viewport.frame {
	border-style: none;
}

/***************
 * GtkLevelBar *
 ***************/

levelbar {
    min-width: 34px;
    min-height: 5px;
}

levelbar.vertical {
    min-width: 5px;
    min-height: 34px;
}

levelbar trough {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                      shade(@theme_bg_color, 0.7),
                      shade(@theme_bg_color, 1.2));
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: @progressbar_border;
    padding: 1px;
    min-height: 4px;

}

levelbar block.filled {
    min-height: 5px;
    border-radius: 3px;
    border-width: 0px;
    border-style: none;
    background-image: linear-gradient(to bottom,
                                      shade(@link_color, 1.2),
                                      shade(@link_color, 0.6));
}

levelbar.continuous block.filled {
    padding: 0px;
    border-radius: 3px;
}

levelbar.discrete.horizontal block.filled {
    margin: 0 1px;
}

levelbar.discrete.vertical block.filled {
    margin: 1px 0;
}

levelbar block.low {
    background-image: linear-gradient(to bottom,
                                      shade(@warning_bg_color, 1.2),
                                      shade(@warning_bg_color, 0.7));
}

levelbar block.high {
    background-image: linear-gradient(to bottom,
                                      shade(@success_color, 1.2),
                                      shade(@success_color, 0.7));
}

levelbar block.full {
    background-image: linear-gradient(to bottom,
                                      shade(@success_color, 1.2),
                                      shade(@success_color, 0.7));
}

levelbar block.empty {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                      shade(@theme_bg_color, 0.7),
                      shade(@theme_bg_color, 1.2));
}

/*************
 * Notebooks *
 *************/

notebook {
    padding: 0px;
    background-clip: border-box;
    background-color: shade(@base_color, 1.02);
    color: @theme_fg_color;
    border-style: none;
}

notebook.frame {
    border-color: @notebook_border;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
}

window.background > box.vertical > notebook:not(.frame), /* pavu-control */
window.background.csd > box.vertical > notebook:not(.frame),
window.background.ssd > box.vertical > notebook:not(.frame),
window.background.solid-csd > box.vertical > notebook:not(.frame),
dialog.background > box.vertical.dialog-vbox > notebook:not(.frame) { /* e. shotwell, meld  */
    border-radius: 3px;
    background-color: shade(@base_color, 1.02);
}

window.background > box.vertical > notebook:not(.frame) > stack > box,
window.background.csd > box.vertical > notebook:not(.frame) > stack > box,
window.background.ssd > box.vertical > notebook:not(.frame) > stack > box,
window.background.solid-csd > box.vertical > notebook:not(.frame) > stack > box {
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: @notebook_border;
}

window.background > box.vertical > notebook:not(.frame) > header.top,
window.background.csd > box.vertical > notebook:not(.frame) > header.top,
window.background.ssd > box.vertical > notebook:not(.frame) > header.top,
window.background.solid-csd > box.vertical > notebook:not(.frame) > header.top,
dialog.background > box.vertical.dialog-vbox > notebook:not(.frame) > header.top { /* e. shotwell, meld  */
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-color: @notebook_border;
}

printdialog > box.view.vertical.dialog-vbox > box.vertical > notebook {
    border-radius: 0px;
    border-style: solid;
    border-color: @notebook_border;
    border-width: 0px 0px 1px 0px;
}

notebook header.top {
    border-radius: 3px 3px 0px 0px;
    border-width: 0px 0px 1px 0px;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.86),
                                      shade(@theme_bg_color, 1.00));
    box-shadow: inset  0px -1px @notebook_border;
}

dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top,
dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top,
dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top,
printdialog notebook header.top {
    border-radius: 0px;
}

notebook header.bottom {
    border-radius: 0px 0px 3px 3px;
    border-width: 1px 0px 0px 0px;
    background-image: linear-gradient(to top,
                                      shade(@theme_bg_color, 0.86),
                                      shade(@theme_bg_color, 1.00));
    box-shadow: inset  0px  1px @notebook_border;
}

notebook header.left {
    border-radius: 3px 0px 0px 3px;
    border-width: 1px 1px 0px 0px;
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 0.86),
                                      shade(@theme_bg_color, 1.00));
    box-shadow: inset -1px  0px @notebook_border;
}

notebook header.right {
    border-radius: 0px 3px 3px 0px;
    border-width: 0px 0px 0px 1px;
    background-image: linear-gradient(to left,
                                      shade(@theme_bg_color, 0.86),
                                      shade(@theme_bg_color, 1.00));
    box-shadow: inset  1px  0px @notebook_border;
}

notebook header tab {
    border-color: transparent;
    border-width: 0px;
    background-image: none;
    background-color: transparent;
}

notebook header tab label {
    color: mix (@theme_fg_color, @theme_bg_color, 0.40);
    font-weight: normal;
}

notebook header .prelight-page,
notebook header .prelight-page label {
    color: mix (@theme_fg_color, @theme_bg_color, 0.15);
}

notebook header .active-page,
notebook header tab .active-page label {
    color: @theme_fg_color;
}

/* notebooks, view, header and tabs in caja and pluma view */
paned.horizontal notebook {
    border-style: none;
    border-color: @notebook_border;
    border-width: 0px;
    border-radius: 3px 3px 0px 0px;
}

paned.horizontal notebook header.top {
    border-style: solid;
    border-color: @notebook_border;
    border-width: 1px 0px 0px 1px;
    border-radius: 3px 3px 0px 0px;
    box-shadow: none;
}

paned.horizontal notebook header.top tab {
    background-image: linear-gradient(to top,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    padding: 2px 4px;
    margin: 0px -0px 0px -1px;
    border-width: 0px 1px 0 1px;
    border-style: solid;
    border-radius: 3px 3px 0 0;
    border-color: @notebook_border;
}

paned.horizontal notebook header.top tab:checked,
paned.horizontal notebook header.top tab:checked:hover {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-radius: 3px 3px 0 0;
    border-width: 0px 1px 0 1px;
    border-style: solid;
    border-color: @notebook_border;
    box-shadow: none;
}

paned.horizontal notebook header.top tab:hover {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.1),
                                      shade(@theme_bg_color, 0.77));
    border-radius: 3px 3px 0 0;
    border-width: 0px 1px 0 1px;
    border-style: solid;
    border-color: @notebook_border;
    box-shadow: none;
}

/* closable-page */
paned.horizontal > notebook > header > tabs > tab > label {
    min-height: 20px;
}

paned.horizontal > notebook > stack > box {
    background-color: shade(@base_color, 1.02);
    border-style: solid;
    border-color: @notebook_border;
    border-width: 0px 1px 1px 1px;
}

/* tabs in dialog windows */
/* horizontal tabs */
window.background > box.vertical > notebook > header.top tab, /* pavu-control */
window.background.csd > box.vertical > notebook > header.top tab,
window.background.ssd > box.vertical > notebook > header.top tab,
window.background.solid-csd > box.vertical > notebook > header.top tab,
dialog.background > box.vertical.dialog-vbox > notebook > header.top tab, /* meld preferences */
dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab,
dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab,
dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab,
printdialog notebook > header.top tab,
notebook.frame > header.top tab,
notebook.frame > header.bottom tab {
    margin: 0px 0px 0px -1px;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: transparent;
}

window.background > box.vertical > notebook > header.top tab, /* pavu-control */
window.background.csd > box.vertical > notebook > header.top tab,
window.background.ssd > box.vertical > notebook > header.top tab,
window.background.solid-csd > box.vertical > notebook > header.top tab,
dialog.background > box.vertical.dialog-vbox > notebook > header.top tab, /* meld preferences */
dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab,
dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab,
dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab,
printdialog notebook > header.top tab,
notebook.frame > header.top tab {
    padding: 4px 10px 5px;
}

window.background > box.vertical > notebook > header.top tab:checked, /* pavu-control */
window.background.csd > box.vertical > notebook > header.top tab:checked,
window.background.ssd > box.vertical > notebook > header.top tab:checked,
window.background.solid-csd > box.vertical > notebook > header.top tab:checked,
dialog.background > box.vertical.dialog-vbox > notebook > header.top tab:checked, /* meld preferences */
dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab:checked,
dialog.background > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab:checked:hover,
printdialog notebook > header.top tab:checked,
printdialog notebook > header.top tab:checked:hover,
notebook.frame > header.top tab:checked,
notebook.frame > header.top tab:checked:hover {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-radius: 3px 3px 0px 0px;
    border-width: 0px 1px 0px 1px;
    border-style: solid;
    border-color: @notebook_border;
}

window.background > box.vertical > notebook > header.top tab:hover, /* pavu-control */
window.background.csd > box.vertical > notebook > header.top tab:hover,
window.background.ssd > box.vertical > notebook > header.top tab:hover,
window.background.solid-csd > box.vertical > notebook > header.top tab:hover,
dialog.background > box.vertical.dialog-vbox > notebook > header.top tab:hover, /* meld preferences */
dialog.background.csd > box.vertical.dialog-vbox > notebook > header.top tab:hover,
dialog.background.ssd > box.vertical.dialog-vbox > notebook > header.top tab:hover,
dialog.background.solid-csd > box.vertical.dialog-vbox > notebook > header.top tab:hover,
printdialog notebook > header.top tab:hover,
notebook.frame > header.top tab:hover {
    background-image: linear-gradient(to top,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      shade(@base_color, 1.02));
    border-radius: 3px 3px 0px 0px;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: @notebook_border;
}

notebook.frame > header.bottom tab {
    padding: 5px 10px 4px;
}

notebook.frame > header.bottom tab:checked,
notebook.frame > header.bottom tab:checked:hover {
    background-image: linear-gradient(to top,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-radius: 0px 0px 3px 3px;
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    border-color: @notebook_border;
}

notebook.frame > header.bottom tab:hover {
    background-image: linear-gradient(to top,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-radius: 0px 0px 3px 3px;
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    border-color: @notebook_border;
}

/* vertical tabs */
notebook.frame > header.left tab,
notebook.frame > header.right tab {
    padding: 4px 10px;
    margin: -1px 0px 0px 0px;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: transparent;
}

notebook.frame > header.left tab:checked,
notebook.frame > header.left tab:checked:hover {
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: @notebook_border;
    border-radius: 3px 0px 0px 3px;
}

notebook.frame > header.left tab:hover {
    background-image: linear-gradient(to left,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: @notebook_border;
    border-radius: 3px 0px 0px 3px;
}

notebook.frame > header.right tab:checked,
notebook.frame > header.right tab:checked:hover {
    background-image: linear-gradient(to left,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: @notebook_border;
    border-radius: 0px 3px 3px 0px;
}

notebook.frame > header.right tab:hover {
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: @notebook_border;
    border-radius: 0px 3px 3px 0px;
}

notebook tab.reorderable-page:hover {
    background-image: linear-gradient(to top,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-radius: 0;
    box-shadow: inset 1px 0 alpha(@borders, 0.6), inset -1px 0 alpha(@borders, 0.6);
    border-style: none;
}

notebook tab.reorderable-page:checked {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.9),
                                      shade(@theme_bg_color, 0.98) 40%,
                                      shade(@theme_bg_color, 1.02) 70%,
                                      @theme_bg_color);
    border-radius: 3px 3px 0 0;
    box-shadow: none;
    border-style: solid;
}

 /* ie. caja properties-window notes tab */
dialog notebook.frame > stack > scrolledwindow.frame {
     border-style: none;
}

/* outlines */
notebook header.top tab:checked {
    -gtk-outline-top-left-radius: 3px;
    -gtk-outline-top-right-radius: 3px;
    -gtk-outline-bottom-left-radius: 0px;
    -gtk-outline-bottom-right-radius: 0px;
}

notebook header.bottom tab:checked {
    -gtk-outline-top-left-radius: 0px;
    -gtk-outline-top-right-radius: 0px;
    -gtk-outline-bottom-left-radius: 3px;
    -gtk-outline-bottom-right-radius: 3px;
}

notebook header.left tab:checked {
    -gtk-outline-top-left-radius: 3px;
    -gtk-outline-top-right-radius: 0px;
    -gtk-outline-bottom-left-radius: 0px;
    -gtk-outline-bottom-right-radius: 3px;
}

notebook header.right tab:checked {
    -gtk-outline-top-left-radius: 0px;
    -gtk-outline-top-right-radius: 3px;
    -gtk-outline-bottom-left-radius: 3px;
    -gtk-outline-bottom-right-radius: 0px;
}

notebook.frame > header > button.flat.toggle.image-button.popup.circular {
    padding: 0px;
    border-radius: 3px;
    border-image: none;
}

/* close button styling */
notebook button.flat,
notebook button.flat.small-button {
    padding: 1px;
    border-radius: 3px;
    border-image: none;
    border-style: none;
    background-image: none;
    background-color: transparent;
}

notebook button.flat:hover,
notebook button.flat.small-button:hover {
    -gtk-icon-effect: highlight;
    border-image: none;
    border-style: none;
    background-image: none;
    background-color: transparent;
}

notebook header.top tabs arrow.up,
notebook header.bottom tabs arrow.up {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

notebook header.top tabs arrow.down,
notebook header.bottom tabs arrow.down {
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}

notebook header.left tabs arrow.up,
notebook header.right tabs arrow.up {
    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}

notebook header.left tabs arrow.down,
notebook header.right tabs arrow.down {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

notebook header tabs arrow {
    color: @theme_fg_color;
}

notebook header tabs arrow:hover,
notebook header tabs arrow:checked {
    color: @theme_selected_bg_color;
}

notebook header tabs arrow:disabled {
    color: rgba(141, 144, 145, 0.3);
}

notebook header tabs arrow:backdrop {
    color: rgba(84, 89, 90, 0.4);
}

notebook header tabs arrow:backdrop:disabled {
    color: #c7c7c7;
}

notebook paned separator {
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 1.5),
                                      shade(@theme_bg_color, 0.85));
    color: shade(@theme_selected_bg_color, 2.0);
}

notebook paned separator.vertical {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.5),
                                      shade(@theme_bg_color, 0.85));
}

/***************
 * treeview *
 ***************/

treeview,
treeview.view {
    background-color: shade(@theme_bg_color, 1.04);
    -GtkTreeView-vertical-separator: 0;
    outline-color: alpha(currentColor, 0.6);
}

treeview:selected {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 1.45),
                                      shade(@theme_selected_bg_color, 0.95));
}

treeview:selected:focus {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 0.9),
                                      shade(@theme_selected_bg_color, 1.3));
}

treeview:selected:disabled {
    color: @theme_selected_fg_color;
}

treeview:hover {
    background-color: shade(@treeview_even_row, 0.93);
}

treeview header {
    padding: 1px 2px;
}

treeview header button {
    background-image: linear-gradient(to bottom,
                                      @button_gradient_color_a,
                                      shade(@button_gradient_color_b, 0.98));
    border-image: none;
    border-width: 0px 1px 1px 0px;
    border-radius: 0px;
    border-style: solid;
    border-color: @button_border;
    min-height: 18px;
    padding: 0px 4px;
}

treeview header button:hover {
    background-image: linear-gradient(to bottom,
                                      shade(@button_gradient_color_a, 0.95),
                                      shade(@button_gradient_color_b, 1.07));
    border-image: none;
}

treeview header button label {
    padding: 0px 4px 0px 4px;
}


/*Keep treeviews from jumping, separators drawn at 0 by default until hovered*/
treeview.view.separator,
treeview.view.separator:hover {
    min-height: 2px;
    color: shade(@theme_bg_color, 0.87);
    background-color: shade(@theme_bg_color, 0.87);
}

row {
    border-width: 0px;
    min-height: 22px;
}

list row {
    transition: all 400ms ease-out;
}

list row.activatable {
    background-image: none;
    border-image: none;
    border-color: transparent
}

list row.activatable:selected,
list row.activatable:selected:hover {
    background-color: transparent;
    background-image:  linear-gradient(to bottom,
                                       shade(@theme_selected_bg_color, 1.3),
                                       shade(@theme_selected_bg_color, 0.73));
    color: @theme_selected_fg_color;
}

list row.activatable:hover {
    background-color: transparent;
    background-image:  linear-gradient(to bottom,
                                       shade(@theme_selected_bg_color, 1.8),
                                       shade(@theme_selected_bg_color, 1.53));
    color: shade (@theme_fg_color, 1.0);
}

list row label,
list row.activatable label {
    padding: 0px 4px;
}

.cell {
    padding: 2px;
    border-width: 0px;
}

.cell:selected,
.cell:selected:focus,
.cell.image:selected,
.cell.image:selected:focus {
    color: @theme_selected_fg_color;
}

/************
 * GtkScale *
 ************/

scale.vertical {
    background-color: transparent;
    min-width: 10px;
    padding: 0px 4px;
}

scale.horizontal {
    background-color: transparent;
    min-height: 10px;
    padding: 6px 0px;
}

scale.horizontal trough {
    min-height: 3px;
    margin-left: 8px;
    margin-right: 8px;
}

scale.vertical trough {
    min-width: 3px;
    margin-top: 8px;
    margin-bottom: 8px;
}

scale trough {
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    background-image: -gtk-gradient (linear,
                                     left top,
                                     left bottom,
                                     from (alpha (#000, 0.20)),
                                     color-stop (0.20, alpha (#000, 0.16)),
                                     to (alpha (#000, 0.06)));
    box-shadow: inset  1px  1px alpha(#000, 0.08),
                inset -1px -1px alpha(#000, 0.08);
}

scale trough,
scale.horizontal trough,
scale.vertical trough {
    border-color: @scale_border_b;

}

scale trough:disabled {
    background-image: -gtk-gradient (linear,
                                     left top,
                                     left bottom,
                                     from (alpha (#000, 0.03)),
                                     to   (alpha (#000, 0.03)));
    border-style: none;
    box-shadow: inset  1px  1px alpha(#000, 0.15),
                          inset -1px -1px alpha(#000, 0.15);
}

scale trough highlight,
scale.vertical trough highlight,
scale.horizontal trough highlight {
    border-style: solid;
    border-width: 1px;
    border-color: @scale_highlight_border;
    border-radius: 8px;
    background-color: @success_color;
}

scale trough highlight:disabled,
scale.vertical trough highlight:disabled,
scale.horizontal trough highlight:disabled {
    background-color: transparent;
    border-color: transparent;
}

scale highlight.left {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (shade (@scale_fill_a, 0.90)),
                                     to (shade (@scale_fill_b, 1.31)));
    border-style: none;
    border-width: 0px;
    border-radius: 8px;
    box-shadow: inset  1px  1px alpha(#000, 0.08),
                inset -1px -1px alpha(#000, 0.08);
    color:       @theme_selected_fg_color;
    text-shadow: none;
}

scale highlight.bottom {
    background-image: -gtk-gradient (linear,
                                     left top, right top,
                                     from (shade (@scale_fill_a, 0.90)),
                                     to (shade (@scale_fill_b, 1.31)));
    border-style: none;
    border-width: 0px;
    border-radius: 8px;
    box-shadow: inset  1px  1px alpha(#000, 0.08),
                inset -1px -1px alpha(#000, 0.08);
    color:       @theme_selected_fg_color;
    text-shadow: none;
}

scale highlight.left:disabled {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_bg_color, 0.85)),
                                     to (shade (@theme_bg_color, 0.85)));
    box-shadow: inset  1px  1px alpha(#000, 0.02),
                inset -1px -1px alpha(#000, 0.02);
}

scale highlight.bottom:disabled {
    background-image: -gtk-gradient (linear,  left top, right top,
                                     from (shade (@theme_bg_color, 0.85)),
                                     to (shade (@theme_bg_color, 0.85)));
    box-shadow: inset  1px  1px alpha(#000, 0.02),
                inset -1px -1px alpha(#000, 0.02);
}

scale marks {
    color: mix(@theme_bg_color, @theme_text_color, 0.56);
    background-color: transparent;
}

scale marks.top,
scale.fine-tune marks.top {
    margin-bottom: 6px;
}

scale marks.bottom,
scale.fine-tune marks.bottom  {
    margin-top: 6px;
}

/* this makes marks visible */
scale.horizontal indicator,
scale.horizontal.fine-tune indicator {
    min-height: 8px;
    min-width: 1px;
}

scale.vertical indicator,
scale.vertical.fine-tune indicator {
    min-height: 1px;
    min-width: 8px;
}

scale slider,
scale slider:hover,
scale slider:disabled {
    border-radius: 8px;
    border-style: none;
}

scale.horizontal slider {
    /* background-image in -assets variant */
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 18px;
    min-width: 18px;
    margin: -9px 0px -9px 0px;
}

scale.horizontal.marks-after slider {
    min-height: 22px;
    min-width: 14px;
}

scale.horizontal.fine-tune slider:active,
scale.horizontal.fine-tune slider:hover:active {
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Why different values ? */
scale.vertical slider {
    /* background-image in -assets variant */
    background-size: 130%;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 18px;
    min-width: 18px;
    margin: 0px -9px 0px -9px;
}

scale.vertical.fine-tune slider:active,
scale.vertical.fine-tune slider:hover:active {
    background-size: 115%;
    background-repeat: no-repeat;
    background-position: center;
}

scale.horizontal.color.marks-before,
scale.vertical.color.marks-after {
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

scale.scale-has-marks-above.color trough,
scale.scale-has-marks-below.color trough {
      border-color: @notebook_border;
      border-radius: 5px;
      background-repeat: no-repeat;
}

scale.vertical.color.marks-after slider {
    min-height: 20px;
    min-width: 20px;
    padding: 0px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0px 0px 0px 0px;
}

scale.horizontal.color.marks-before slider {
    min-height: 12px;
    min-width: 16px;
    margin: 0px 0px 0px 0px;
    padding: 5px 0px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

scale.horizontal.color.marks-before slider:hover,
scale.vertical.color.marks-after slider:hover {
    background-size: 105%;
    background-color: transparent;
}

/**************
 * ComboBoxes *
 **************/

combobox {
    /* align with side buttons */
    padding: 0;
    color: @theme_fg_color;
}

combobox separator {
    /* always disable separators */
    -GtkWidget-horizontal-separator: 0;
    -GtkWidget-vertical-separator: 0;
}

/* since gtk+-3.18, avoid flat text background */
combobox button.combo cellview {
    background-color: transparent;
}

#gtk-combobox-popup-menu menuitem {
    color: @theme_selected_fg_color;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}

combobox > box > button.combo > box > arrow {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    color: @theme_fg_color;
    min-height: 16px;
    min-width: 16px;
    padding: 0px 3px 0px 0px;
}

combobox > box > button.combo > box > arrow:disabled {
    color: @insensitive_fg_color;
    background-color: transparent;
}

/***********
 * Buttons *
 ***********/

button {
    -gtk-icon-style: regular;
    -gtk-outline-radius: 3px;
    padding: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    color: @theme_fg_color;
    /*border-image is defined in gtk-widgets-assets.css*/
    background-image: linear-gradient(to bottom,
                                      @button_gradient_color_a,
                                      @button_gradient_color_b);
    transition: all 400ms ease-out;
    min-height: 22px;
    min-width: 22px;
}

button.default {
    text-shadow: none;
    color: @theme_fg_color;
    border-color: shade(@button_border, 1.1);
}

/* ie. mate-control-center */
button.flat {
    padding: 0px;
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: inset 0 1px rgba(255,255,255,0), 0 1px rgba(255,255,255,0);
    text-shadow: none;
    -gtk-icon-shadow: none;
    border-image: none;
}

button.flat:hover {
    border-radius: 3px;
}

/* ie. controls gnome-mplayer, virtual-manager */
button.flat.image-button,
button.flat.image-button:hover,
button.scale.flat {
    padding: 4px;
}

button.combo,
button.text-button,
button.font,
button.file {
    padding: 3px;
}

button.image-button.circular-button {
   border-image: none;
   border-width: 1px;
   border-style: solid;
   border-color: @button_border;
   padding: 2px;
}

button image,
button image:hover,
button image:checked,
button image:hover:active,
button image:disabled,
button label,
button label:hover,
button label:checked,
button label:hover:active,
button label:disabled {
    background-color: transparent;
}

button label {
    color: @fg_color;
}

button image,
button image:hover,
button image:checked,
button image:hover:active {
    color: shade(@theme_selected_bg_color, 0.75);
}

button image:disabled {
    color: @insensitive_fg_color;
}

button:hover,
button.flat:hover {
    border-style: solid;
    border-color: shade(@button_border, 1.1);
    background-image: linear-gradient(to bottom,
                                      @button_hover_gradient_color_a,
                                      @button_hover_gradient_color_b);
}

button:checked,
button.default:checked,
button:hover:active {
    border-style: solid;
    background-image: linear-gradient(to bottom,
                                      @button_gradient_color_b,
                                      @button_gradient_color_a);
}

button:disabled {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      alpha(@button_gradient_color_a, 0.5),
                                      alpha(@button_gradient_color_b, 0.6));
    border-image: none;
    border-style: solid;
    border-color: shade(@button_border, 1.2);
    color: @insensitive_fg_color;
}

button:disabled image,
.button:disabled image,
button:active:disabled image,
.button:active:disabled image{
	 opacity: 0.5;
}

/* insensitive active toggle buttons */
button:checked:disabled {
    background-image: linear-gradient(to bottom,
                                      alpha(@button_gradient_color_b, 0.5),
                                      alpha(@button_gradient_color_a, 0.4));
    border-image: none;
    border-style: solid;
    border-color: shade(@button_border, 1.2);
    color: @insensitive_fg_color
}

button.default {
    background-image: linear-gradient(to bottom,
                                      #ffffff,
                                      shade(@theme_bg_color, 0.9) 50%,
                                      shade(@button_gradient_color_b, 0.78));
}

button.default:hover {
    border-image: none;
}

button.image-button.radio {
    margin: 0px 1px;
}

buttonbox.horizontal.linked.dialog-action-area button {
    margin: 0px 1px;
}

button.needs-attention label {
     background-color: @warning_bg_color;
}

/******************
 * Linked Buttons *
 ******************/

.linked.horizontal combobox .linked.horizontal button.combo {
    margin: 0px 1px;
}

.linked.vertical button {
    margin: 1px 0px;
}

/* We don't make them different. */

/*****************
 * GtkSpinButton *
 *****************/

spinbutton,
spinbutton.vertical {
    padding: 0px;
    border-style: solid;
    border-width: 1px;
    background-color: transparent;
    border-color: shade(@selected_bg_color, 1.7);
    border-radius: 3px;
}

spinbutton.vertical {
    border-radius: 4px;
}

spinbutton.horizontal entry {
    border-image: none;
    border-width: 0px;
    border-style: none;
    border-radius: 3px 0px 0px 3px;
        box-shadow: none;
    padding: 3px 10px 3px 3px;
}

spinbutton button:disabled {
    color: @internal_element_insensitive;
    background-image: none;
    background-color: @insensitive_bg_color;
    border-image: none;
}

spinbutton button:active,
spinbutton button:hover {
    color: @internal_element_prelight;
}

spinbutton.horizontal button {
    border-radius: 0px;
    border-image: none;
    border-width: 0px 0px 0px 1px;
    border-color: shade(@selected_bg_color, 1.7);
    padding: 0px 2px;
}

spinbutton.horizontal button:last-child {
    border-radius: 0 3px 3px 0;
}

spinbutton.vertical entry {
    border-image: none;
    border-width: 1px 0px 1px 0px;
    border-color: shade(@selected_bg_color, 1.7);
    border-style: solid;
    border-radius: 0px;
    box-shadow: none;
}

spinbutton.vertical button {
    border-image: none;
    box-shadow: none;
    padding: 4px;
    -gtk-icon-shadow: 0 1px @button_text_shadow;
}

spinbutton.vertical button:active,
spinbutton.horizontal button:active {
    background-image: linear-gradient(to bottom,
                                      @button_gradient_color_b,
                                      @button_gradient_color_a);
}

spinbutton.vertical button {
    border-width: 0px;
    border-radius: 4px 4px 0px 0px;
}

spinbutton.vertical button:last-child {
    border-radius:  0px 0px 4px 4px;
}

/**************
 * Scrollbars *
 **************/

scrollbar {
    background-image: none;
    border-style: none;
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-forward-stepper: true;
    -GtkScrollbar-activate-slider: 1;
    -GtkScrolledWindow-scrollbar-spacing: 0;
}

scrollbar.vertical {
    border-width: 0px;
    min-width: 10px;
}

scrollbar.horizontal {
    border-width: 0px;
    min-height: 10px;
}

scrollbar trough {
    background-color: shade(@theme_bg_color, 0.95);
    background-image: none;
    border-style: solid;
    border-color: alpha(@frame_color, 0.6);
    border-radius: 0px;
}

scrollbar trough:hover {
    background-color: shade(@theme_bg_color, 0.95);
}

scrollbar.vertical trough {
    min-width: 13px;
    border-width: 0px 0px 0px 1px;
}

scrollbar.horizontal trough {
    min-height: 13px;
    border-width: 1px 0px 0px 0px;
}

scrollbar slider,
scrollbar .slider {
    border-width: 1px;
    border-radius: 6px;
    border-style: solid;
    border-color: transparent;
}

scrollbar.vertical slider,
scrollbar.vertical .slider {
    min-width: 11px;
    min-height: 31px;
    background-image: linear-gradient(to top,
                                      shade(@toolbar_gradient_base, 0.82),
                                      white);
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    min-width: 31px;
    min-height: 13px;
    background-image: linear-gradient(to left,
                                      shade(@toolbar_gradient_base, 0.82),
                                      white);
}

scrollbar slider:hover,
scrollbar slider:hover:active,
scrollbar .slider:hover,
scrollbar .slider:hover:active {
    border-color: shade(@button_border, 1.1);
}

scrollbar.vertical slider:hover,
scrollbar.vertical .slider:hover {
    background-image: linear-gradient(to top,
                                      shade(@toolbar_gradient_base, 0.88),
                                      shade(@theme_bg_color, 1.6));
}

scrollbar.horizontal slider:hover,
scrollbar.horizontal .slider:hover {
    background-image: linear-gradient(to left,
                                      shade(@toolbar_gradient_base, 0.88),
                                      shade(@theme_bg_color, 1.6));
}

scrollbar.vertical slider:hover:active,
scrollbar.vertical .slider:hover:active {
    background-image: linear-gradient(to top,
                                      shade(@theme_bg_color, 1.5),
                                      shade(@theme_bg_color, 0.9));
}

scrollbar.horizontal slider:hover:active,
scrollbar.horizontal .slider:hover:active {
    background-image: linear-gradient(to left,
                                      shade(@theme_bg_color, 1.5),
                                      shade(@theme_bg_color, 0.9));
}

scrollbar slider:disabled,
scrollbar .slider:disabled {
    background-image: none;
    background-color: @insensitive_bg_color;
}

scrollbar slider.fine-tune:hover:active,
scrollbar .slider.fine-tune:hover:active {
    background-image: url("assets/slider_fine_horizontal.svg"),
                      linear-gradient(to top,
                                      shade(@theme_bg_color, 1.5),
                                      shade(@theme_bg_color, 0.9));
    background-repeat: no-repeat;
    background-position: center;
}

scrollbar.vertical slider.fine-tune:hover:active,
scrollbar.vertical .slider.fine-tune:hover:active {
    background-image: url("assets/slider_fine_vertical.svg"),
                      linear-gradient(to left,
                                      shade(@theme_bg_color, 1.5),
                                      shade(@theme_bg_color, 0.9));
    background-repeat: no-repeat;
    background-position: center;
}

/* Buttons */
scrollbar.vertical button,
scrollbar.vertical .button {
    min-width:13px;
    min-height: 16px;
    padding: 0px;
}

scrollbar.horizontal button,
scrollbar.horizontal .button {
    min-width:16px;
    min-height: 13px;
    padding: 0px;
}

scrollbar button,
scrollbar button.vertical,
scrollbar button.horizontal,
scrollbar .button,
scrollbar .button.vertical,
scrollbar .button.horizontal {
    color: @theme_fg_color;
    border-image: none;
    border-style: solid;
    border-color: alpha(@frame_color, 0.6);
    border-radius: 0px;
    background-image: none;
    background-color: shade(@theme_bg_color, 0.9);
}

scrollbar button:hover,
scrollbar button.horizontal:hover,
scrollbar button.vertical:hover,
scrollbar .button:hover,
scrollbar .button.horizontal:hover,
scrollbar .button.vertical:hover {
    color: @theme_selected_bg_color;
    border-image: none;
}

scrollbar button:hover:active,
scrollbar button.horizontal:hover:active,
scrollbar .button:hover:active,
scrollbar .button.horizontal:hover:active {
    background-image: linear-gradient(to top,
                                    shade(@theme_bg_color, 1.6),
                                     shade(@toolbar_gradient_base, 0.88));
    color: @theme_selected_bg_color;
    border-image: none;
}

scrollbar button.vertical:hover:active,
scrollbar .button.vertical:hover:active {
    background-image: linear-gradient(to left,
                                      shade(@theme_bg_color, 1.6),
                                      shade(@toolbar_gradient_base, 0.88));
    color: @theme_selected_bg_color;
    border-image: none;
}

scrollbar button:disabled,
scrollbar .button:disabled {
    background-image: none;
    background-color: @insensitive_bg_color;
    border-color: @insensitive_border_color;
    color: @insensitive_fg_color;
}

scrollbar.vertical button.up,
scrollbar.vertical .button.up {
    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
    -gtk-icon-effect: highlight;
    border-width: 0px 0px 0px 1px;
}

scrollbar.vertical button.down,
scrollbar.vertical .button.down {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    -gtk-icon-effect: highlight;
    border-width: 0px 0px 0px 1px;
}

scrollbar.horizontal button.up,
scrollbar.horizontal .button.up {
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
    -gtk-icon-effect: highlight;
    border-width: 1px 0px 0px 0px;
}

scrollbar.horizontal button.down,
scrollbar.horizontal .button.down {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
    -gtk-icon-effect: highlight;
    border-width: 1px 0px 0px 0px;
}

 /* the small square between scrollbars!!! */
scrolledwindow junction,
scrolledwindow.frame junction {
	background-image: none;
	background-color: shade(@theme_bg_color, 0.9);
	border-style: none;
	border-radius: 0;
}

/* junction does not work here */
filechooser paned.horizontal box.vertical box.horizontal .view box.vertical {
	background-color: shade(@theme_bg_color, 0.9);
}


/*********
 * Menus *
 *********/

/* Decouple the font of context menus from their entry/textview */
.context-menu {
        font: initial;
        text-shadow: none;
}

/* this controls the general appearance of the menubar */
menubar,
.menubar {
    background-image: none;
    background-color: @theme_bg_color;
    border-width: 0px;
    border-style: none;
    padding: 0px;
    color: @theme_text_color;
    -GtkWidget-window-dragging: true;
    text-shadow: none;
}

menubar > menuitem,
.menubar > menuitem {
    min-height: 20px;
    -gtk-icon-style: regular;
    transition: all 100ms ease-out;
    padding: 3px 7px;
    border-width: 0px;
    border-style: none;
    background-color: transparent;
    text-shadow: none;
}

menubar > menuitem:hover,
.menubar > menuitem:hover {
    background-image: none;
    background-color: shade(@theme_selected_bg_color, 1.1);
    border-style: none;
    border-image: none;
    /* join menuitem to menu */
    border-radius: 3px 3px 0px 0px;
    border-width: 0px;
    color: @theme_selected_fg_color;
    text-shadow: none;
}

menubar > menuitem:disabled,
.menubar > menuitem:disabled {
    color: @theme_fg_color;
    text-shadow: none;
}

menu,
.menu {
    background-color: transparent;
    background-image: linear-gradient(to right,
                                      shade(@theme_selected_bg_color, 1.0),
                                      shade(@theme_selected_bg_color, 0.65));
    border-style: none;
    border-width: 0px;
    border-radius: 0px;
    text-shadow: none;
}

menu menuitem,
.menu menuitem {
    min-height: 22px;
    transition: all 300ms ease-out;
    background-color: transparent;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 0px;
    padding: 4px;
    color: @theme_selected_fg_color;
    text-shadow: none;
}

menu menuitem:hover,
.menu menuitem:hover {
    background-color: transparent;
    background-image:  linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 1.4),
                                      shade(@theme_selected_bg_color, 0.8));
    color: @theme_selected_fg_color;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    border-image: url("assets/menu-border.svg") 2 / 2px stretch;
    text-shadow: none;
}

menu menuitem:disabled,
.menu menuitem:disabled,
menu menuitem:disabled label,
.menu menuitem:disabled label {
    text-shadow: none;
    background-color: transparent;
    border-color: transparent;
    color: @insensitive_fg_color;
}

menuitem:disabled image,
.menuitem:disabled image,
menuitem:active:disabled image,
.menuitem:active:disabled image{
	 opacity: 0.6;
}


menu menuitem label {
    color: @theme_selected_fg_color;
    text-shadow: none;
}

menu separator,
.menu separator {
    min-height: 1px;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 1.05),
                                      shade(@theme_selected_bg_color, 1.05));
}

menuitem arrow {
    min-height: 16px;
    min-width: 16px;
    margin-left: 10px;
}

menu menuitem arrow:dir(ltr),
.menu menuitem arrow:dir(ltr) {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

menu menuitem arrow:dir(rtl),
.menu menuitem arrow:dir(rtl) {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
}

menu > arrow.top,
.menu > arrow.top {
      -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}

menu > arrow.bottom,
.menu > arrow.bottom {
      -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

/* settings for 4 menu level, this is needed to override the menuitem:hover
   state from previous menu level, as GtkArrow itself don't support states.
   thanks gtk+ devs for this madness */
menu > menuitem > arrow,
menu > menuitem:hover menu > menuitem arrow,
menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
.menu > menuitem > arrow,
.menu > menuitem:hover .menu > menuitem arrow,
.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow,
.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow,
.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow  {
   -gtk-icon-shadow:  0px  1px shade (@theme_fg_color, 0.8),
                      1px  0px shade (@theme_fg_color, 0.8),
                     -1px  0px shade (@theme_fg_color, 0.8),
                      0px -1px shade (@theme_fg_color, 0.8);
}

menu > menuitem:hover > arrow,
menu > menuitem:hover menu > menuitem:hover arrow,
menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
.menu > menuitem:hover > arrow,
.menu > menuitem:hover .menu > menuitem:hover arrow,
.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow,
.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow,
.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow {
   -gtk-icon-shadow:  0px  1px shade (@theme_selected_fg_color, 0.8),
                      1px  0px shade (@theme_selected_fg_color, 0.8),
                     -1px  0px shade (@theme_selected_fg_color, 0.8),
                      0px -1px shade (@theme_selected_fg_color, 0.8);
}

menuitem accelerator,
menu menuitem accelerator,
.menu menuitem accelerator {
    color: alpha(@theme_main_color, 0.66);
}

menuitem accelerator:hover,
menuitem accelerator:active,
menu menuitem accelerator:hover,
menu menuitem accelerator:active,
.menu menuitem accelerator:hover,
.menu menuitem accelerator:active {
    color: alpha(@theme_text_color, 0.45);
}

/* scroll arrows */
menu > arrow,
.menu > arrow {
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    min-height: 16px;
    min-width: 16px;
    padding: 4px;
    background-color: @theme_selected_bg_color;
}

menu > arrow.top,
.menu > arrow.top {
    margin-top: -2px;
    margin-left: -2px;
}

menu > arrow.bottom,
.menu > arrow.bottom {
    margin-bottom: -2px;
    margin-left: -2px;
}

menu > arrow:hover,
.menu > arrow:hover {
    background-color: shade(@theme_selected_bg_color, 1.4);
}

menu > arrow:disabled,
.menu > arrow:disabled {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/************
 * Toolbars *
 ************/
toolbar {
    background-image: linear-gradient(to bottom,
                                      shade(@toolbar_gradient_base, 0.94),
                                      shade(@theme_bg_color, 1.0));
    border-style: solid;
    border-width: 0;
    border-bottom-width: 1px;
    border-color: shade(@toolbar_gradient_base, 0.98);
    border-radius: 0px;
    padding: 1px;

    -GtkWidget-window-dragging: true;
    -GtkToolbar-button-relief: normal;
}

toolbar.vertical {
    background-image: linear-gradient(to right,
                                      shade(@toolbar_gradient_base, 0.94),
                                      shade(@theme_bg_color, 1.0));
    border-width: 0px 1px 0px 0px;
}

toolbar.horizontal button {
    margin: 0px 1px;
}

toolbar.vertical button {
    margin: 1px 0px;
}

toolbar button.text-button {
    padding: 2px 5px;
}

toolbar button.image-button {
    padding: 5px 4px 4px 5px;
}

/********************
 * Primary Toolbars *
 ********************/

/* (primary) toolbar buttons */
toolbar button,
toolbar.primary-toolbar button,
toolbar button:disabled,
toolbar.primary-toolbar button:disabled,
toolbar button:disabled:hover,
toolbar.primary-toolbar button:disabled:hover {
    border-style: solid;
    border-width: 1px;
    border-image: none;
    border-color: transparent;
    background-image: none;
    background-color: transparent;
}

toolbar button:checked,
toolbar.primary-toolbar button:checked,
toolbar combobox button.combo,
toolbar.primary-toolbar combobox button.combo {
    border-radius: 3px;
    background-image: none;
    /*border-color: shade(@button_border, 1.12);*/
    /*border-image is defined in gtk-widgets-assets.css*/
}

toolbar button:hover,
toolbar.primary-toolbar button:hover,
toolbar button:active:hover,
toolbar.primary-toolbar button:active:hover,
toolbar combobox button.combo:hover,
toolbar.primary-toolbar combobox button.combo:hover {
    border-image: none;
    border-style: solid;
    border-color: shade(@theme_main_color, 0.8);
    background-image: linear-gradient(to bottom,
                                      @button_hover_gradient_color_a,
                                      @button_hover_gradient_color_b);
}

toolbar button:checked:disabled,
toolbar.primary-toolbar button:checked:disabled,
toolbar button:active:disabled,
toolbar combobox button.combo:disabled,
toolbar.primary-toolbar combobox button.combo:disabled {
    border-image: none;
    border-style: solid;
    border-color: @inactive_frame_color;
    background-image: linear-gradient(to bottom,
                                      @button_hover_gradient_color_a,
                                      @button_hover_gradient_color_b);
}

toolbar separator {
    border-style: solid;
    border-width: 1px;
    border-color: shade(@theme_bg_color, 0.85);
}

/* progressbars on primary toolbar entries are special */
toolbar entry progressbar {
    background-image: linear-gradient(to bottom,
                                      @trough_bg_color_a,
                                      @trough_bg_color_b);
    border-width: 1px;
    border-radius: 2px;
    border-style: solid;
    border-color: shade(@inactive_frame_color, 0.925);
    border-image: none;
    color: @internal_element_color;
}

/*******************
 * Inline toolbars *
 *******************/

toolbar.inline-toolbar {
    border-width: 0px 1px 1px 1px;
    border-radius: 0px;
    border-style: solid;
    border-color: darker (@theme_bg_color);
    background-image: linear-gradient(to top,
                                      shade(@toolbar_gradient_base, 0.88),
                                      shade(@theme_bg_color, 1.5));
}

/******************
 * Stack switcher *
 ******************/

stackswitcher > button > label,
headerbar stackswitcher > button.titlebutton > label,
.titlebar stackswitcher > button.titlebutton > label,
calendar.header stackswitcher > button.titlebutton > label {
    padding-left: 6px;
    padding-right: 6px;
}

stackswitcher > button > image,
headerbar stackswitcher > button.titlebutton > image,
.titlebar stackswitcher > button.titlebutton > image,
calendar.header stackswitcher > button.titlebutton > image {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 3px;
    padding-bottom: 3px;
}

stackswitcher > button {
    margin: 0px 1px;
}

stackswitcher > button.text-button {
    padding: 4px 10px 5px;
}

stackswitcher > button.image-button,
headerbar stackswitcher > button.titlebutton,
.titlebar stackswitcher > button.titlebutton,
calendar.header stackswitcher > button.titlebutton {
    padding: 5px 2px;
}

stackswitcher > button.needs-attention > label,
stackswitcher > button.needs-attention > image {
    animation: needs_attention 150ms ease-in;
    background-color: @warning_bg_color;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    background-position: right 3px, right 4px;
}

stackswitcher > button.needs-attention > label:backdrop,
stackswitcher > button.needs-attention > image:backdrop {
    background-size: 6px 6px, 0 0;
}
stackswitcher > button.needs-attention > label:dir(rtl),
stackswitcher > button.needs-attention > image:dir(rtl) {
    background-position: left 3px, left 4px;
}
stackswitcher > button.needs-attention:active > label,
stackswitcher > button.needs-attention:active > image,
stackswitcher > button.needs-attention:checked > label,
stackswitcher > button.needs-attention:checked > image {
    animation: none;
    background-image: none;
}

/*******
 * OSD *
 *******/

.background.osd {
    color: @osd_fg;
    background-image: none;
    background-color: @osd_bg;
}

overlay.osd {
    background-color: transparent;
}

.osd.frame {
    background-clip: border-box;
    background-origin: border-box;
}

button.osd,
button.osd:checked,
.osd button,
.osd button:hover,
.osd button:checked,
.osd button.flat:hover,
.osd button:checked:hover {
    border-width: 1px;
    border-style: solid;
    border-image: none;
    border-color: @osd_button_border;
    border-radius: 5px;
}

button.osd,
.osd button {
    margin: 0px 1px;
    padding: 4px;
    background-image: linear-gradient(to bottom,
                                      @osd_button_bg_a,
                                      @osd_button_bg_b 68%,
                                      @osd_button_bg_c);
    color: @osd_button_fg;
    text-shadow: 0 -1px @osd_button_shadow;
    -gtk-icon-shadow: 0 -1px @osd_button_shadow;
}

button.osd,
button.osd:hover,
button.osd:checked {
    background-color: shade(@osd_bg, 1.10);
}

.osd button,
.osd button:hover,
.osd button:checked {
    background-color: transparent;
}

button.osd:disabled,
.osd button:disabled {
    background-image: none;
    background-color: @osd_button_bg_insensitive;
}

button.osd:checked:disabled,
.osd button:checked:disabled {
    background-image: none;
    background-color: @osd_button_bg_insensitive_active;
}

button.osd:hover,
.osd button:hover {
    color: @osd_button_fg_hover;
}

button.osd:checked,
.osd button:checked {
    color: @osd_button_fg_active;
}

button.osd:disabled,
button.osd:checked:disabled,
.osd button:disabled,
.osd button:checked:disabled {
    color: @osd_button_fg_insensitive;
}

button.osd:hover,
.osd button:hover,
.osd.popover spinbutton button:hover {
    background-image: linear-gradient(to bottom,
                                      @osd_button_bg_hover_a,
                                      @osd_button_bg_hover_b 68%,
                                      @osd_button_bg_hover_c);
}

button.osd:checked,
.osd button:checked,
.osd .menuitem.button:checked,
button.osd:active:hover,
.osd button:active:hover,
.osd .menuitem.button:active:hover,
.osd.popover spinbutton button:active {
    background-image: linear-gradient(to bottom,
                                      @osd_button_bg_active_a,
                                      @osd_button_bg_active_b 68%,
                                      @osd_button_bg_active_c);
}

.osd .menuitem.button:checked {
    background-color: transparent;
    border-color: @osd_button_border;
}

.osd .menuitem.button:checked {
    color: @osd_button_fg_active;
    text-shadow: 0 -1px @osd_button_shadow;
}

toolbar.osd {
    color: @osd_fg;
    text-shadow: 0 1px @osd_text_shadow;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-radius: 7px;
    border-color: shade (@theme_selected_bg_color, 0.9);
    background-image: linear-gradient(to left,
                                      alpha (shade(@theme_selected_bg_color, 1.05), 0.7),
                                      alpha (shade(@theme_selected_bg_color, 0.95), 0.7));
    background-color: transparent;
    -GtkToolbar-button-relief: normal;
}

toolbar.osd button,
toolbar.osd .linked button {
    background-color: transparent;
    border-color: @osd_button_border;
    padding: 6px;
    border-width: 1px;
    border-radius: 5px;
    box-shadow: inset -1px 0 @osd_button_inset;
}

toolbar.osd button:hover {
    padding: 6px;
}

toolbar.osd button:first-child {
    border-radius: 5px 0 0 5px;
    border-width: 1px 0 1px 1px;
    box-shadow: inset -1px 0 @osd_button_inset;
}

toolbar.osd button:last-child {
    box-shadow: none;
    border-radius: 0 5px 5px 0;
    border-width: 1px 1px 1px 0;
}

toolbar.osd button:only-child,
toolbar.osd toolitem button,
toolbar.osd toolitem:only-child button,
toolbar.osd toolitem:last-child button,
toolbar.osd toolitem:first-child button {
    border-width: 1px;
    border-radius: 5px;
    border-style: solid;

    box-shadow: none;
}

toolbar.osd button.flat.image-button {
    box-shadow: none;
}

toolbar.osd separator {
    color: shade(@osd_lowlight, 0.80);
}

/* ie. parole media-player */
.osd scale trough,
.osd scale.horizontal trough {
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    background-image: -gtk-gradient (linear,
                                     left top,
                                     left bottom,
                                     from (alpha (#fff, 0.10)),
                                     color-stop (0.20, alpha (#fff, 0.10)),
                                     to (alpha (#fff, 0.04)));
    box-shadow: inset  1px  1px alpha(#000, 0.08),
                inset -1px -1px alpha(#000, 0.08);
    border-color: @osd_button_border;
}

.osd scale.horizontal trough {
    min-height: 3px;
}

.osd scale.vertical trough {
    min-width: 3px;
}

.osd progressbar {
    background-color: @osd_fg;
}

.osd scale trough {
    border: 1px solid rgba(0,0,0,0.1);
    border-image: none;
    background-image: linear-gradient(to bottom,
                                      shade(@osd_button_border, 0.70),
                                      shade(@osd_button_border, 0.90));
    background-color: transparent;
}

.osd scale trough.highlight {
    background-image: none;
    background-color: @theme_selected_bg_color;
}

.osd scale trough:disabled,
.osd scale trough.highlight:disabled {
    background-image: none;
    background-color: transparent;
}

.osd progressbar,
progressbar.osd {
    padding: 0;
    min-height: 3px;
}

.osd progressbar trough,
progressbar.osd trough {
    padding: 0;
    border-image: none;
    border-style: none;
    border-width: 0;
    background-image: none;
    background-color: transparent;
    border-radius: 0;
}

.osd progressbar,
progressbar.osd {
    border-style: none;
    background-color: @theme_selected_bg_color;
    background-image: none;
    border-radius: 0;
}

.osd .view,
.osd.view {
    background-color: @osd_view_bg;
}

.osd scrollbar trough {
    background-color: @osd_scrollbar_trough;
}

.osd scrollbar slider {
    background-color: @osd_scrollbar_slider;
}

.osd scrollbar slider:hover {
    background-color: @osd_scrollbar_slider_prelight;
}

.osd scrollbar slider:active {
    background-color: @osd_scrollbar_slider_active;
}

.osd iconview.cell:selected,
.osd iconview.cell:selected:focus {
    background-color: transparent;

    border-style: solid;
    border-radius: 15px;
    border-width: 3px;
    border-color: @osd_button_fg;

    outline-color: transparent;
}

/* ie. colorchooser */
.osd.popover {
    background-image: none;
    background-color: alpha(shade(#3E403D, 0.85), 0.35);
    border: 1px solid black;
    box-shadow: none;
    color: @theme_selected_fg_color;
}

.osd.popover > grid {
    text-shadow: 1px 1px alpha (#000000, 0.8);
}

.osd.popover toolbar {
    background-image: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.osd.popover button {
    text-shadow: 0 -1px @osd_text_shadow;
    -gtk-icon-shadow: 0 -1px @osd_text_shadow;
}

.osd.popover button:checked {
        box-shadow: none;
}

.osd.popover button:disabled {
    color: alpha(@theme_selected_fg_color, 0.4);
}

.osd.popover {
    background-image: linear-gradient(to left,
                                      alpha (shade(@theme_selected_bg_color, 1.05), 0.5),
                                      alpha (shade(@theme_selected_bg_color, 0.95), 0.3));
    border-width: 1px;
    border-style: solid;
    border-image: none;
    border-color: shade (@theme_selected_bg_color, 0.9);
    border-radius: 3px;
    padding: 0px;
}

.osd.popover label {
    color: @osd_fg;
}

.osd.popover > grid > spinbutton {
    text-shadow: none;
    color: @theme_fg_color;
}

.osd.popover spinbutton entry,
.osd.popover spinbutton entry:focus,
.osd.popover spinbutton entry:backdrop {
    border-width: 1px;
    border-style: none;
    border-radius: 0px;
    box-shadow: none;
    padding: 4px 10px 4px 3px;
    color: @theme_fg_color;
}

.osd.popover spinbutton,
.osd.popover spinbutton:focus,
.osd.popover spinbutton:backdrop {
    color: @theme_fg_color;
}

.osd.popover spinbutton button,
.osd.popover spinbutton button:focus
.osd.popover spinbutton button:backdrop {
    min-width: 16px;
    min-height: 16px;
    border-width: 1px;
    border-style: none;
    border-radius: 0px;
    box-shadow: none;
    padding: 4px;
}

.osd popover.background.scale-popup {
    color: @osd_fg;
    text-shadow: none;
    border-color: shade (@theme_selected_bg_color, 0.9);
    border-radius: 5px;
    background-image: linear-gradient(to left,
                                      alpha (shade(@theme_selected_bg_color, 1.05), 0.7),
                                      alpha (shade(@theme_selected_bg_color, 0.95), 0.7));
    background-color: transparent;
}

.osd popover.background.scale-popup button.flat.image-button,
.osd popover.background.scale-popup button.flat.image-button:hover {
    background-color: transparent;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: @osd_button_border;
    padding: 2px;
}

.osd popover.background.scale-popup button.flat.image-button:disabled {
    border-color: alpha (@osd_button_border, 0.0);
}

/* ie. parole control bar */
revealer.bottom > box.background.horizontal.osd {
    background-color: transparent;
    background-image: linear-gradient(to left,
                                      alpha (shade(@theme_selected_bg_color, 1.05), 0.3),
                                      alpha (shade(@theme_selected_bg_color, 0.95), 0.1));
    border-width: 1px;
    border-style: solid;
    border-color: shade (@theme_selected_bg_color, 0.9);
    color: @osd_fg;
}

/* used by Documents */
.osd .page-thumbnail {
    border-style: solid;
    border-width: 1px;
    border-color: @osd_lowlight;

    /* when there's no pixbuf yet */
    background-color: @osd_bg;
}

/*************
 * Popovers *
 *************/

popover.background {
    background-clip: initial;
    margin: 10px;
    padding: 2px;
    border-color: shade(@theme_bg_color, 0.8);
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    background-color: transparent;
    background-image: linear-gradient(to right,
                                      shade(@theme_selected_bg_color, 1.0),
                                      shade(@theme_selected_bg_color, 0.65));
    box-shadow: 0 1px 5px @wm_shadow;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

popover > list,
popover > .view,
popover > toolbar popover.osd > .toolbar,
popover > toolbar.inline-toolbar popover.osd > .toolbar,
popover > searchbar popover.osd > .toolbar,
popover > .location-bar popover.osd > .toolbar,
popover > .toolbar popover.osd > toolbar.inline-toolbar,
popover > toolbar.inline-toolbar popover.osd > toolbar.inline-toolbar,
popover > searchbar popover.osd > toolbar.inline-toolbar,
popover > .location-bar popover.osd > toolbar.inline-toolbar,
popover > .toolbar popover.osd > searchbar,
popover > toolbar.inline-toolbar popover.osd > searchbar,
popover > searchbar popover.osd > searchbar,
popover > .location-bar popover.osd > searchbar,
popover > .toolbar popover.osd > .location-bar,
popover > toolbar.inline-toolbar popover.osd > .location-bar,
popover > searchbar popover.osd > .location-bar,
popover > .location-bar popover.osd > .location-bar {
    border-style: none;
    background-color: transparent;
}

popover separator {
    font-size: 80%;
    font-weight: bold;
    color: alpha(@theme_fg_color,0.1);
    text-shadow: none;
    background-color: transparent;
    -gtk-icon-shadow: none;
    border: 0;
}

/* volume +- buttons */
popover.scale-popup button.flat.image-button {
    padding: 0px;
    border-style: none;
    border-radius: 0px;
    border-width: 0px;
    box-shadow: none;
    text-shadow: none;
}

popover.scale-popup button.flat.image-button:hover {
    background-image: linear-gradient(to left,
                                      shade(@theme_selected_bg_color, 1.1),
                                      shade(@theme_selected_bg_color, 0.95));
}

popover list {
    background-color: @theme_base_color;
}

popover label,
popover button label {
    color: @theme_selected_fg_color;
}

modelbutton {
    color: @theme_selected_fg_color;
    border-radius: 3px;
}

modelbutton,
modelbutton:checked,
modelbutton:disabled,
modelbutton:checked:disabled,
modelbutton:focus,
modelbutton:focus:active,
modelbutton:focus:checked,
modelbutton.flat:checked,
modelbutton.flat:disabled,
modelbutton.flat:checked:disabled,
modelbutton.flat,
modelbutton.flat:focus,
modelbutton.flat:focus:active,
modelbutton.flat:focus:checked {
    color: @theme_selected_fg_color;
    background-color: transparent;
    background-image: none;
    border-color: @button_border;
    border-image: none;
    border-style: none;
    box-shadow: none;
    border-radius: 3px;
}

modelbutton arrow,
modelbutton:checked arrow,
modelbutton:focus arrow,
modelbutton:focus:active arrow,
modelbutton:focus:checked arrow,
modelbutton.flat:checked arrow,
modelbutton.flat arrow,
modelbutton.flat:focus arrow,
modelbutton.flat:focus:active arrow,
modelbutton.flat:focus:checked arrow {
   -gtk-icon-shadow:  0px  1px shade (@theme_fg_color, 0.8),
                      1px  0px shade (@theme_fg_color, 0.8),
                     -1px  0px shade (@theme_fg_color, 0.8),
                      0px -1px shade (@theme_fg_color, 0.8);
}

modelbutton:hover:active,
modelbutton:hover,
modelbutton:selected,
modelbutton.flat:hover:active,
modelbutton.flat:hover,
modelbutton.flat:selected {
    color: @theme_fg_color;
    background-image:  linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 1.4),
                                      shade(@theme_selected_bg_color, 0.8));
    text-shadow: none;
    border-width: 0;
    border-color: transparent;
    border-radius: 3px;
}

modelbutton:hover:active arrow,
modelbutton:hover arrow,
modelbutton:selected arrow,
modelbutton.flat:hover:active arrow,
modelbutton.flat:hover arrow,
modelbutton.flat:selected arrow {
   -gtk-icon-shadow:  0px  1px shade (@theme_selected_fg_color, 0.8),
                      1px  0px shade (@theme_selected_fg_color, 0.8),
                     -1px  0px shade (@theme_selected_fg_color, 0.8),
                      0px -1px shade (@theme_selected_fg_color, 0.8);
}

modelbutton.flat {
  min-height: 22px;
}

modelbutton arrow {
    background-color: transparent;
    padding: 0px 4px 0px 0px;
    min-height: 20px;
    min-width: 20px;
}

modelbutton.flat arrow.left {
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}

modelbutton.flat arrow.right {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

modelbutton check,
modelbutton radio {
    min-height: 16px;
    min-width: 16px;
    background-color: transparent;
}

modelbutton arrow:hover,
modelbutton check:hover,
modelbutton radio:hover,
modelbutton arrow:disabled,
modelbutton check:disabled,
modelbutton radio:disabled {
    background-color: transparent;
}

modelbutton label {
    padding: 0px 0px 0px 4px
}

popover.background.menu button.image-button.model image {
    color: @theme_selected_fg_color;
}

popover separator {
    font-size: 80%;
    font-weight: bold;
    color: alpha(@theme_text_color,0.4);
    text-shadow: none;
    background-color: transparent;
    -gtk-icon-shadow: none;
    border: 0;
}

popover .horizontal label {
    color: @theme_selected_fg_color;
}

/* ie. gnome-weather */
popover list row.activatable label {
    color: @theme_fg_color;
}

.linked button.image-button.model {
    min-height: 28px;
    margin: 0px 1px;
}

.linked button.image-button.model,
popover button.text-button,
popover button.default.suggested-action.text-button {
    background-color: transparent;
    background-image: none;
    text-shadow:none;
    border-style: none;
    box-shadow: none;
    border-radius: 3px;
}

.linked button.image-button.model:hover,
popover button.text-button:hover,
popover button.default.suggested-action.text-button:hover {
    color: @theme_selected_fg_color;
    background-image:  linear-gradient(to bottom,
                                      shade(@theme_selected_bg_color, 1.6),
                                      shade(@theme_selected_bg_color, 0.6));
    text-shadow: none;
    border-width: 0;
    border-color: transparent;
    border-radius: 3px;
}

/***************
 * Header bars *
 ***************/

/*******
 * CSD *
 *******/

headerbar,
.titlebar,
.titlebar:backdrop {
    text-shadow: none;
    background-image: linear-gradient(to bottom,
                                      shade (@theme_bg_color, 1.20),
                                      shade (@theme_bg_color, 1.0));
    border-radius: 7px 7px 0 0;
    padding: 3px 5px;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: shade(@theme_bg_color, 0.8);
}

.tiled .titlebar {
    border-radius: 0;
}

.maximized .titlebar {
    border-radius: 0;
}

.horizontal.titlebar headerbar:first-child,
paned.horizontal.titlebar headerbar:first-child {
	border-top-right-radius: 0px;
}

.horizontal.titlebar headerbar:last-child,
paned.horizontal.titlebar headerbar:last-child {
	border-top-left-radius: 0px;
}

paned.horizontal.titlebar separator,
.horizontal.titlebar separator.vertical.tilix-title-separator {
	background-color: transparent;
	background-image: none;
	color: transparent;
}

/* this is the default titlebar that is added by GTK
 * when client-side decorations are in use and the application
 * did not set a custom titlebar.
 */
.titlebar.default-decoration {
    border: none;
    box-shadow: none;
}
 
.titlebar .title {
    font-weight: bold;
    font-size: 100%;
    background: none;
    color: @theme_fg_color;
}

.titlebar button,
.titlebar button.slider-button,
.titlebar button.image-button,
.titlebar button.image-button.popup,
.titlebar button.toggle.image-button,
.titlebar button.toggle.image-button.popup,
.titlebar button.toggle.image-button.text-button,
.titlebar button.toggle.popup.titlebutton,
headerbar.frame.titlebar button.image-button.titlebutton,
button.text-button.titlebutton {
    padding: 2px;
    margin: 0px 1px;
}

.titlebar stackswitcher button.text-button.radio {
    padding: 1px 6px;
}

button.titlebutton.close,
button.titlebutton.minimize ,
button.titlebutton.maximize {
    margin: 0px -5px;
}

.titlebar separator.vertical.titlebutton {
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 0.85),
                                      shade(@theme_bg_color, 0.85));
}

/* workaround to avoid unwanted black frames if switching compositor on/off */
.background decoration  {
    box-shadow: none;
}

.background.csd decoration {
    border-radius: 7px 7px 0px 0px;
    border-width: 0px;
    box-shadow: 0 0 0 2px @wm_csd_border_color, 0 2px 8px 3px @wm_shadow;
    /* this is used for the resize cursor area */
    margin: 10px;
}

.tiled decoration {
    border-radius: 0;
    background-color: @theme_bg_color;
}

/* workaround to avoid unwanted black frames if switching compositor on/off */
decoration:backdrop {
/*    box-shadow: 0 0 0 2px shade(@wm_border,1.1), 0 2px 5px 1px @wm_shadow;*/
    box-shadow: none;
}

.ssd decoration {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23);
}

.solid-csd decoration {
    border-radius: 0px;
    margin: 2px;
    margin-top: 0px;
    background-color: @wm_csd_solid_bg;
    border: solid 2px @wm_csd_solid_border_color;
    box-shadow: none;
}

/* workaround to avoid unwanted black frames if switching compositor on/off */
.csd.popup decoration {
    border-radius: 0;
    box-shadow: none;
}

messagedialog.csd decoration {
    border-radius: 7px;
    box-shadow: 0 1px 5px @wm_shadow;
}

/****************************
 * Suggested action buttons *
 ****************************/

/* Not different from other buttons */

/******************************
 * Destructive action buttons *
 ******************************/

/* not different from other buttons */

/**************************
 * Selection Mode classes *
 **************************/

/* Not different from other toolbars */

/****************
 * GtkAssistant *
 ****************/

assistant .sidebar .highlight {
    color: @theme_text_color;
    background-color: shade(@theme_bg_color, 0.9);
    border-style: none;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: inset 0 2px 1px alpha(black, 0.2),
                inset 1px 1px 1px alpha(black, 0.3),

                inset 0 -2px 1px alpha(white, 0.4),
                inset -1px -1px 1px alpha(white, 0.6);
}

assistant .sidebar {
    padding: 12px;
    border-style: solid;
    border-color: shade(@theme_bg_color, 0.9);
    border-width: 1px;
    border-radius: 3px;
    color: mix (@theme_fg_color, @theme_bg_color, 0.40);
    background-color: shade(@theme_bg_color, 1.02);
}

/*************
 * GtkSwitch *
 *************/

switch,
switch:backdrop {
    font-weight: bold;
    font-size: smaller;
    font-stretch:  condensed;
    color: @internal_element_color;
    border-radius: 3px;
    border-width: 1px;
    border-image: none;
    border-style: solid;
    border-color: shade(@frame_color, 0.9);
    background-image: linear-gradient(to bottom,
                                      @trough_bg_color_a,
                                      @trough_bg_color_b);
}

switch:checked,
switch:backdrop:checked {
    color: @theme_main_color;
    border-style: solid;
    /*border-image is defined in gtk-widgets-assets.css*/
    background-image: linear-gradient(to bottom,
                                      @active_switch_bg_color_a,
                                      @active_switch_bg_color_b);
}

switch:disabled,
switch:backdrop:disabled {
    background-image: none;
    background-color: shade(@theme_bg_color, 0.9);
    border-color: shade(@inactive_frame_color, 0.845);
    border-image: none;
}

switch slider,
switch slider:backdrop {
    min-width: 45px;
    border-width: 1px;
    border-radius: 2px;
    border-color: shade(@frame_color, 1.31);
    border-style: solid;
    padding: 2px;
    color: shade(@switch_slider_color, 0.8);
    background-image: url("assets/switch-slider-grip.svg"),
                      linear-gradient(to bottom,
                                      @button_gradient_color_a,
                                      @switch_slider_color);
    background-repeat: no-repeat;
    background-position: center;
}

switch slider:checked,
switch slider:backdrop:checked {
    border-color: @switch_slider_border;
}

switch slider:disabled,
switch slider:backdrop:disabled {
    border-style: none;
    background-image: none;
    background-color: shade(@insensitive_bg_color, 1.02);
}

switch slider:disabled > label,
switch slider:backdrop:disabled > label {
    color: inherit;
}

list row switch,
list row switch:backdrop,
list row:selected switch,
list row:selected switch:backdrop {
    box-shadow: none;
    border-color: shade(@button_border, 1.0);
}

list row:selected switch slider:dir(rtl) {
    border-left-color: @borders;
}

list row:selected switch slider:dir(ltr) {
    border-right-color: @borders;
}

list row:selected switch slider,
list row:selected switch slider:checked {
    border-color: shade(@button_border, 1.0);
}

/*****************
 * GtkSStatusBar *
 *****************/

statusbar {
    padding: 0px;
    color: @theme_fg_color;
    font-size: smaller;
}

/*****************
 * Color Chooser *
 *****************/

button.color > colorswatch.activatable {
   padding: 2px;
}

colorchooser {
    border-style: solid;
    border-color: @notebook_border;
    border-width: 1px;
    border-radius: 4px;
    background-color: shade (@theme_bg_color, 1.03);
    color: @theme_fg_color;
    box-shadow: none;
}

colorchooser box.vertical {
    padding: 6px;
}

colorchooser #editor-color-sample,
colorchooser colorswatch.activatable,
colorchooser colorswatch.activatable:selected {
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    border-color: @notebook_border;
    background-color: transparent;
    background-clip: border-box;
}

colorchooser #editor-color-sample:hover,
colorchooser colorswatch.activatable:hover {
    border-color: alpha(black, 0.45);
}

colorchooser #editor-color-sample.dark:hover,
colorchooser colorswatch.activatable.dark:hover {
    background-image: linear-gradient(to bottom,
                                      alpha(white, 0) 40%,
                                      alpha(white, 0.3));
}

colorchooser #editor-color-sample.light:hover,
colorchooser colorswatch.activatable.light:hover {
    background-image: linear-gradient(to top,
                                      alpha(black, 0) 40%,
                                      alpha(black, 0.1));
}

colorchooser colorswatch.activatable:selected:hover {
    background-image: none;
}

colorchooser colorswatch {
    border-radius: 3px;
}

colorchooser #add-color-button {
    background-clip: padding-box;
    border-color: mix(@borders, @theme_bg_color, 0.3);
    background-color: mix(@borders, @theme_bg_color, 0.8);
}

colorchooser #add-color-button:hover {
    border-color: @borders;
    background-color: @borders;
    color: @theme_base_color;
}

/* GtkColorEditor */
colorchooser box.horizontal {
    padding: 6px;
}

/***************************
 * Radio and Check Buttons *
 ***************************/

radio,
check,
radio:selected,
check:selected,
radio:selected:focus,
check:selected:focus,
.cell.radio,
.cell.check,
.cell.radio:selected,
.cell.check:selected,
.cell.radio:selected:focus,
.cell.check:selected:focus {
 background-color: transparent;
 border-width: 0px;
 border-style: none;
}

/********************************
 * GtkCheckButton GtkRadioButton*
 ********************************/

checkbutton:selected:focus,
radiobutton:selected:focus {
    background-color: shade(@theme_bg_color, 0.95);
}

/* move label to the right, min-height/width makes image visible in menus*/
check,
radio,
window.background.popup menuitem check,
window.background.popup menuitem radio,
window.background.popup menu menuitem check,
window.background.popup menu menuitem radio {
    padding: 0px 6px 0px 0px;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 16px;
    min-width: 16px;
    background-color: transparent;
}

/* kill unwanted bg colors */
treeview.view check,
treeview.view radio,
treeview.view check:selected,
treeview.view radio:selected,
treeview.view check:backdrop:checked,
treeview.view radio:backdrop:checked,
treeview.view check:selected:focus,
treeview.view radio:selected:focus {
    background-color: transparent;
    background-image: none;
}

checkbutton.text-button,
radiobutton.text-button {
	padding: 1px 2px 4px;
	outline-offset: 0;
}

/*************
 * Expanders *
 *************/

treeview.view.expander {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
    color: @theme_fg_color;
}

treeview.view.expander:dir(rtl) {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
}

treeview.view.expander:hover {
    color: @theme_fg_color;
}

treeview.view.expander:selected {
    color: @theme_selected_fg_color;
}

treeview.view.expander:selected:hover {
    color: @theme_selected_fg_color;
}

treeview.view.expander:checked {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

expander arrow {
    min-height: 16px;
    min-width: 16px;
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

expander arrow:dir(rtl) {
    min-height: 16px;
    min-width: 16px;
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
}

expander arrow:hover {
    color: @theme_fg_color;
}

expander arrow:checked {
    min-height: 16px;
    min-width: 16px;
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

expander title {
    padding: 4px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: @internal_element_color;
    border-image: url("assets/button-border.svg") 3 / 3px stretch;
    background-image: linear-gradient(to bottom,
                                      @button_gradient_color_a,
                                      @button_gradient_color_b);
    transition: all 400ms ease-out;
    color: @theme_fg_color;
    min-height: 22px;
    min-width: 22px;
}

/* does that work? */
expander title:active {
    border-color: @internal_element_color;
    color: @theme_fg_color;
    background-color: transparent;
}

expander title:hover {
    border-style: solid;
    border-color: shade(@button_border, 1.1);
    background-image: linear-gradient(to bottom,
                                      @button_hover_gradient_color_a,
                                      @button_hover_gradient_color_b);
    border-image: url("assets/button-active-border.svg") 3 3 3 3 / 3px 3px 3px 3px stretch;
    color: @theme_fg_color;
}

expander row {
    border-color: @internal_element_color;
    color: @internal_element_color;
}

expander row:selected,
expander row:selected:focus,
expander row:nth-child(odd):selected,
expander row:nth-child(even):selected,
expander row:nth-child(odd):focus,
expander row:nth-child(even):focus {
    border-image: none;
    border-color: @expander_row_selected_color;
    color: @expander_row_selected_color;
    background-image: none;
    background-color: transparent;
}

expander row:selected:hover,
expander row:nth-child(odd):selected:hover,
expander row:nth-child(even):selected:hover {
    background-color: transparent;
}

expander column:sorted:selected,
expander column:sorted:selected:hover {
    background-image: none;
    background-color: transparent;
}

/****************
 * Content view *
 ****************/
.content-view.view {
    background-color: @content_view_bg;
}

.content-view.view:hover {
    background-color: shade(@content_view_bg, 1.1);
}

.content-view.view:selected,
.content-view.view:active {
    background-color: @theme_selected_bg_color;
}

.content-view.view:disabled {
    background-color: @theme_unfocused_base_color;
}

GdMainIconView.content-view {
    -GdMainIconView-icon-size: 40;
}

iconview.content-view.check {
    background-image: url("assets/grid-selection-unchecked.svg");
    background-color: transparent;
}

iconview.content-view.check:checked {
    background-image: url("assets/grid-selection-checked.svg");
    background-color: transparent;
}

.content-view.view.check,
.content-view.view.check:checked {
    background-color: transparent;
}

iconview.content-view.check:hover,
iconview.content-view.check:disabled,
iconview.content-view.check:checked {
    background-color: transparent;
}

/******************
 * GtkAboutDialog *
 ******************/

dialog.background .vertical.dialog-vbox  grid.vertical {
    background: transparent;
}

/*********************
 * App Notifications *
 *********************/
.app-notification,
.app-notification.frame {
    border-style: solid;
    border-color: rgba(112, 129, 106, 0.9);
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 5px 5px;
    padding: 8px;
    background-color: rgba(112, 129, 106, 0.3);
    background-image: linear-gradient(to bottom,
                                      rgba(112, 129, 106, 0.2),
                                      transparent 2px);
    background-clip: padding-box;
    color: @theme_fg_color;
}

.app-notification:backdrop,
.app-notification.frame:backdrop {
    background-image: none;
}

.app-notification button,
.app-notification headerbar button.titlebutton,
headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification calendar.header button.titlebutton,
calendar.header .app-notification button.titlebutton,
.app-notification.frame button {
    color: @theme_selected_fg_color;
    border-color: rgba(112, 129, 106, 0.9);
    border-image: none;
    background-image: linear-gradient(to bottom,
                                      rgba(177, 204, 168, 0.9),
                                      rgba(177, 204, 168, 0.9));
    background-clip: padding-box;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
    text-shadow: none;
    -gtk-icon-shadow: 0 1px black;
    outline-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    padding: 0 0px 2px 0px;
}

.app-notification button.flat,
.app-notification headerbar button.titlebutton,
headerbar .app-notification button.titlebutton,
.app-notification .titlebar button.titlebutton,
.titlebar .app-notification button.titlebutton,
.app-notification calendar.header button.titlebutton,
calendar.header .app-notification button.titlebutton,
.app-notification.frame button.flat,
.app-notification.frame headerbar button.titlebutton,
headerbar .app-notification.frame button.titlebutton,
.app-notification.frame .titlebar button.titlebutton,
.titlebar .app-notification.frame button.titlebutton,
.app-notification.frame calendar.header button.titlebutton,
calendar.header .app-notification.frame button.titlebutton {
    border-image: none;
    -gtk-icon-shadow: 0 1px black;
    text-shadow: 0 1px black;
}

.app-notification button:hover,
.app-notification.frame button:hover {
    color: @theme_selected_fg_color;
    border-color: rgba(112, 129, 106, 0.7);
    border-image: none;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(177, 204, 168, 0.1),
                                      rgba(177, 204, 168, 0.1));
    background-clip: padding-box;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
    text-shadow: none;
    -gtk-icon-shadow: 0 1px black;
    outline-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.app-notification button,
.app-notification button:checked,
.app-notification button:backdrop:checked,
.app-notification.frame button,
.app-notification.frame button:checked,
.app-notification.frame button:backdrop:checked {
    color: white;
    border-color: rgba(112, 129, 106, 0.7);
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      rgba(170, 196, 161, 0.9),
                                      rgba(170, 196, 161, 0.9));
    background-clip: padding-box;
    box-shadow: none;
    text-shadow: none;
    -gtk-icon-shadow: none;
    outline-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.app-notification button:disabled,
.app-notification button:backdrop:disabled,
.app-notification.frame button:disabled,
.app-notification.frame button:backdrop:disabled {
    color: #878989;
    border-color: rgba(112, 129, 106, 0.7);
    background-image: linear-gradient(to bottom,
                                      rgba(198, 207, 181, 0.5),
                                      rgba(198, 207, 181, 0.5));
    background-clip: padding-box;
    box-shadow: none;
    text-shadow: none;
    -gtk-icon-shadow: none;
    border-radius: 3px;
    padding: 0px;
}

.app-notification button:backdrop,
.app-notification.frame button:backdrop {
    color: #eeeeec;
    border-color: rgba(112, 129, 106, 0.7);
    background-image: linear-gradient(to bottom,
                                      rgba(172, 205, 138, 0.7),
                                      rgba(172, 205, 138, 0.7));
    background-clip: padding-box;
    box-shadow: none;
    text-shadow: none;
    -gtk-icon-shadow: none;
    border-radius: 3px;
    padding: 0px;
}

/*************
 * Calendars *
 *************/

calendar {
    padding: 1px;
}

calendar.view {
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: @notebook_border;
    padding: 0px;
}

calendar.header {
    border-radius: 3px 3px 0px 0px;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.1),
                                      shade(@theme_bg_color, 0.86));
    border-width: 0px;
}

calendar.button {
    background-image: linear-gradient(to bottom,
                                      rgba (0, 0, 0, 0),
                                      rgba (0, 0, 0, 0));
}

calendar {
    color: @theme_fg_color;
    text-shadow: none;
}

calendar:indeterminate {
    color: alpha(@theme_fg_color, 0.4);
}

calendar.highlight {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
    border-radius: 0px;
    padding: 0px;
    border-width: 0px;
}

/**************
 * GtkInfoBar *
 **************/
infobar {
    border-width: 0;
    border-style: none;
	-gtk-icon-style: regular;
}

entry.info,
entry.info:focus,
entry.warning,
entry.warning:focus,
entry.error,
entry.error:focus {
    border-image: none;
    border-style: none;
}

.info {
    background-color: @info_bg_color;
    color: @info_fg_color;
}

.warning {
    background-color: @warning_bg_color;
    color: @warning_fg_color;
}

.question {
    background-color: @question_bg_color;
    color: @question_fg_color;
}

.error {
    background-color: @error_bg_color;
    color: @error_fg_color;
}

infobar revealer button {
    background-image: linear-gradient(to bottom,
                                      alpha(shade(@button_gradient_color_a, 1.0), 0.5),
                                      alpha(shade(@button_gradient_color_b, 1.0), 0.5));
    background-color: transparent;
}

infobar revealer button:hover {
    background-image: linear-gradient(to bottom,
                                      alpha(shade(@button_hover_gradient_color_a, 1.0), 0.5),
                                      alpha(shade(@button_hover_gradient_color_b, 1.0), 0.5));
    background-color: transparent;
}

infobar revealer button:disabled {
    background-image: none;
    background-color: @insensitive_bg_color;
    color: @insensitive_fg_color;
}

infobar revealer button label {
    color: shade(@theme_selected_fg_color, 0.3);
}

/**************
 * Dim labels *
 **************/
.dim-label,
.dim-label:hover,
.dim-label:focus,
.view.dim-label,
list row.activatable .dim-label {
    color: mix (@theme_fg_color, @theme_bg_color, 0.50);
}

.dim-label:selected,
.dim-label:selected:focus,
list row.activatable:selected .dim-label {
    color: mix (@theme_selected_bg_color, @theme_base_color, 0.60);
    text-shadow: none;
}

popover .dim-label {
    color: @theme_selected_fg_color;
}

/***********
 * Sidebar *
 ***********/

.sidebar,
.sidebar treeview.view,
placessidebar.sidebar {
    -gtk-icon-style: regular;
    background-color: shade(@theme_bg_color, 1.02);
    padding: 0px;
}

/* ie. nemo */
.sidebar treeview.view {
    padding: 2px 0px;
}

.sidebar:backdrop {
    background-color: shade(@theme_bg_color, 1.02);
}

.sidebar .frame {
    background-color: transparent;
    border-style: none;
}

/* dialog open, nautilus */
placessidebar.sidebar.frame > viewport.frame > list > row.activatable.sidebar-row {
    background-color: shade(@theme_bg_color, 1.02);
    border-radius: 0px;
    padding: 0px 0px 0px 6px;
}

placessidebar.sidebar.frame > viewport.frame > list > row.activatable.sidebar-row:selected,
placessidebar.sidebar.frame > viewport.frame > list > row.activatable.sidebar-row:selected:hover {
    background-image:  linear-gradient(to bottom,
                                       shade(@theme_selected_bg_color, 1.3),
                                       shade(@theme_selected_bg_color, 0.73));
    color: @theme_selected_fg_color;
}

placessidebar.sidebar.frame > viewport.frame > list > row.activatable.sidebar-row:hover {
    background-image:  linear-gradient(to bottom,
                                       shade(@theme_selected_bg_color, 1.8),
                                       shade(@theme_selected_bg_color, 1.53));
    color: shade (@theme_fg_color, 1.0);
}

placessidebar.sidebar.frame > viewport.frame > list > row.activatable.sidebar-row .sidebar-revealer .sidebar-icon {
    padding: 4px 8px 4px 6px;
}

placessidebar.sidebar.frame > viewport.frame > list > row.activatable.sidebar-row .sidebar-revealer .sidebar-label {
    padding: 4px 0px 4px 1px;
}

placesview viewport list row.activatable button.sidebar-button.image-button,
placessidebar.sidebar.frame > viewport.frame > list row.activatable button.sidebar-button.image-button {
    background-color: transparent;
    background-image: none;
    border-image:none;
    box-shadow: none;
    border-width: 0px;
    padding: 4px 12px 4px 0px;
}

.sidebar separator,
.sidebar separator:hover {
    min-height: 1px;
}

/* ie. dconf-editor */
.sidebar treeview:selected,
.sidebar treeview:focus:selected,
.sidebar treeview:selected:hover {
    background-image:  linear-gradient(to bottom,
                                       shade(@theme_selected_bg_color, 1.3),
                                       shade(@theme_selected_bg_color, 0.73));
    color: @theme_selected_fg_color;
}

.sidebar treeview:hover {
    background-image:  linear-gradient(to bottom,
                                       shade(@theme_selected_bg_color, 1.8),
                                       shade(@theme_selected_bg_color, 1.53));
    color: shade (@theme_fg_color, 1.0);
}

stacksidebar.sidebar scrolledwindow  {
    background-image: linear-gradient(to right,
                                      shade(@toolbar_gradient_base, 0.94),
                                      shade(@theme_bg_color, 1.0));
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: alpha(@frame_color, 0.6);
    border-radius: 2px 0px 0px 2px;
}

stacksidebar.sidebar viewport.frame {
 background-color:transparent;
}

/***************
 * Filechooser *
 ***************/

filechooser #pathbarbox {
    background-color: shade(@theme_bg_color, 1.02);
    border-color: alpha(@frame_color, 0.6);
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-radius: 3px 0px 0px 0px;
}

filechooser #pathbarbox button {
    margin: 0px 1px;
    padding: 4px;
}

filechooser stack scrolledwindow {
    background-color: shade(@theme_bg_color, 1.02);
    border-color: alpha(@frame_color, 0.6);
    border-width: 1px;
    border-style: solid;
    border-radius: 0px;
}

filechooser actionbar {
    border-width: 0px 1px 1px 1px;
}

/****************
 * GtkActionBar *
 ****************/

actionbar {
    padding: 2px;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: alpha(@frame_color, 0.6);
}

actionbar stackswitcher.horizontal.linked button.image-button.radio  {
    padding: 5px 2px;
}

actionbar button.toggle.image-button.popup {
    padding: 5px;
}

/* hyperlinks */
/* ie. yelp */
*:link,
*:visited {
  color: @link_color;
}

button.link:link,
button.link:link:focus,
button.link:link:backdrop,
button.link:link:focus:hover,
button.flat.link:link:hover,
button.link:link:focus:hover:active {
    text-shadow: none;
    padding: 4px;
    border-style: solid;
}

/******************
 * Dialog Windows *
 ******************/

dialog scrolledwindow.frame viewport .vertical {
    background-color: shade (@theme_bg_color, 1.03);
}

dialog scrolledwindow.frame viewport .vertical expander .vertical {
    background-color: shade (@theme_bg_color, 1.10);
    border-radius: 3px;
    border-color: alpha(@frame_color, 0.6);
    border-style: solid;
    border-width: 1px;
}

/* print dialog */
printdialog.background > box.view.vertical.dialog-vbox {
    background-color: shade (@theme_bg_color, 1.0);
}

printdialog.background paper {
    border-style: solid;
    border-width: 0.9px;
    border-radius: 0px;
    border-color: @notebook_border;
    background-color: @theme_main_color;
}

/* ie. meld */
dialog.background.csd notebook toolbar.horizontal,
dialog.background.ssd notebook toolbar.horizontal,
dialog.background.solid-csd notebook toolbar.horizontal {
    border-style: solid;
    border-color: @borders;
    border-width: 0px 1px 1px 1px;
    border-radius: 0px;
}

dialog.background.csd notebook scrolledwindow.frame treeview.view header button:last-child,
dialog.background.ssd notebook scrolledwindow.frame treeview.view header button:last-child,
dialog.background.solid-csd notebook scrolledwindow.frame treeview.view header button:last-child {
    border-width: 0px;
}

/******************
 * FlowBox *
 ******************/

flowbox {
    background-color: shade(@base_color, 1.02);
    -gtk-icon-style: regular;
    border-style: solid;
    border-color: alpha(@frame_color, 0.6);
    border-width: 1px 1px 1px 1px;
    border-radius: 3px;
    padding: 8px;
}

flowbox > flowboxchild,
flowbox > flowboxchild:focus,
flowbox > flowboxchild:backdrop {
    border-style: solid;
    border-width: 2px;
    border-radius: 3px;
    border-color: transparent;
    color: @theme_text_color;

}

flowbox > flowboxchild:selected,
flowbox > flowboxchild:selected:focus,
flowbox > flowboxchild:selected:hover,
flowbox > flowboxchild:selected:focus:hover {
    border-style: solid;
    border-width: 2px;
    border-radius: 3px;
    border-color: alpha(@theme_selected_bg_color, 0.75);
    color: @theme_text_color;
}