* {
    -GtkArrow-arrow-scaling: 0.6;
    -GtkHTML-link-color: #a7bb85; /* @link_color */
    -GtkIMHtml-hyperlink-color: #a7bb85; /* @link_color */
    -GtkScrolledWindow-scrollbar-spacing: 0;
    -GtkTextView-error-underline-color: #df382c; /* @error_color doesn't work due to a gtk bug */
    -GtkToolButton-icon-spacing: 6;
    -GtkToolItemGroup-expander-size: 11;
    -GtkTreeView-expander-size: 8;
    -GtkTreeView-vertical-separator: 0;
    -GtkWindow-resize-grip-width: 0;
    -GtkWindow-resize-grip-height: 0;
    -WnckTasklist-fade-overlay-rect: 0;

    background-origin: border-box;
    background-clip: padding-box;
    -gtk-icon-style: regular; /* disable symbolic icons */
    outline-color: alpha(currentColor, 0.3);
    outline-style: dashed;
    outline-offset: -3px;
    outline-width: 1px;
    -gtk-outline-radius: 2px;
}

/* exclude widget for mate-menu */
.background:not(widget) {
    color: @fg_color;
    background-color: @bg_color;
}

/* override previous setting for rubberband of mate-screenshot */
.background.rubberband {
	background-color: transparent;
}

.background:backdrop {
    color: @backdrop_fg_color;
    box-shadow: inset -1px 0 shade (@bg_color, 0.94);
}

/* no madness on desktop windows */
window.background.caja-desktop-window:backdrop,
window.background.nemo-desktop-window:backdrop,
window.background.nautilus-desktop:backdrop {
    box-shadow: none;
}

.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.90);
	color: @theme_fg_color;
}

.gtkstyle-fallback:disabled {
	background-color: @insensitive_bg_color;
	color: @insensitive_fg_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 */
/* https://github.com/mate-desktop/mate-themes/issues/145 */
.monospace {
  font-family: Monospace;
}

assistant .sidebar .highlight {
        color: @fg_color;
        font-weight: bold;
}

assistant .sidebar {
        background-color: shade (@bg_color, 0.97);
        border-right-color: shade (@bg_color, 0.8);
        border-radius: 0;
        border-style: solid;
        border-width: 0 1px 0 0;
        padding: 12px;

        color: mix (@fg_color, @bg_color, 0.40);
        text-shadow: 0 1px shade (@bg_color, 1.04);
        box-shadow: inset -1px 0 shade (@bg_color, 0.94);
}

/**********
 * button *
 **********/

button,
button.color,
button.text-button.toggle,
button.text-button.radio,
button.titlebutton,
button.image-button,
button.flat,
button.font,
button.file,
button.toggle.popup,
button.link {
    -gtk-icon-style: regular;
    padding: 5px 6px;
    min-height: 18px;
    min-width: 14px;
}

button.combo {
    -gtk-icon-style: regular;
    padding: 4px 6px;
    min-height: 18px;
    min-width: 12px;
}

button {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@button_bg_color, 1.08)),
                                     color-stop (0.5, @button_bg_color),
                                     to (shade (@button_bg_color, 0.94)));

    color: @fg_color;
    text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.4);

    border: 1px solid transparent;
    border-radius: 8px;
    border-image-source: -gtk-scaled(url("assets/button.png"),
                                     url("assets/button@2.png"));

    /* all button border images have the same size and are sliced in the same way */
    border-image-width: 10px 12px 10px 12px;
    border-image-slice: 10 12 10 12;
    border-image-repeat: stretch;
    outline-style: none;
}

button.flat {
    background-image: none;
    border-image-source: none;
}

button:backdrop {
    background-image: none;
    background-color: @bg_color;
    border-image-source: -gtk-scaled(url("assets/backdrop-button.png"),
                                     url("assets/backdrop-button@2.png"));

    color: @backdrop_fg_color;
    text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.2);
}

button.flat:backdrop {
    border-image-source: none;
}

button:focus {
    border-image-source: -gtk-scaled(url("assets/button-focused.png"),
                                     url("assets/button-focused@2.png"));
}

button:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@button_bg_color, 1.12)),
                                     color-stop (0.5, @button_bg_color),
                                     to (shade (@button_bg_color, 0.96)));
    border-image-source: -gtk-scaled(url("assets/button-hover.png"),
                                     url("assets/button-hover@2.png"));
}

button:hover:backdrop {
    background-color: shade (@bg_color, 1.04);
    border-image-source: -gtk-scaled(url("assets/backdrop-button-hover.png"),
                                     url("assets/backdrop-button-hover@2.png"));
}

button:hover:focus {
    border-image-source: -gtk-scaled(url("assets/button-focused-hover.png"),
                                     url("assets/button-focused-hover@2.png"));
}

button:disabled {
    background-image: none;
    background-color: mix (#ebebeb, @bg_color, 0.5);

    text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.4);
    border-image-source: -gtk-scaled(url("assets/button-disabled.png"),
                                     url("assets/button-disabled@2.png"));
}

button:disabled:backdrop {
    background-color: #ebebeb;

    text-shadow: 0 1px alpha (shade (@button_bg_color, 1.25), 0.2);
    border-image-source: -gtk-scaled(url("assets/backdrop-button-disabled.png"),
                                     url("assets/backdrop-button-disabled@2.png"));
}

button.flat:disabled,
button.flat:disabled:backdrop {
    background-color: transparent;
    border-image-source: none;
}

button:checked {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#cecece),
                                     to (#e8e8e8));
    border-image-source: -gtk-scaled(url("assets/button-active.png"),
                                     url("assets/button-active@2.png"));
}

button:checked:focus {
    border-image-source: -gtk-scaled(url("assets/button-active-focused.png"),
                                     url("assets/button-active-focused@2.png"));
}

button:active {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#dcdcdc),
                                     to (#f3f3f3));
    border-image-source: -gtk-scaled(url("assets/button-active-hover.png"),
                                     url("assets/button-active-hover@2.png"));
}

button:active:focus {
    border-image-source: -gtk-scaled(url("assets/button-active-focused-hover.png"),
                                     url("assets/button-active-focused-hover@2.png"));
}

button:active:disabled {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#e3e3e3),
                                     to (#f3f3f3));
    border-image-source: -gtk-scaled(url("assets/button-active-disabled.png"),
                                     url("assets/button-active-disabled@2.png"));
}

button:checked:backdrop {
    border-image-source: -gtk-scaled(url("assets/backdrop-button-active.png"),
                                     url("assets/backdrop-button-active@2.png"));
}

button:active:backdrop {
    border-image-source: -gtk-scaled(url("assets/backdrop-button-active-hover.png"),
                                     url("assets/backdrop-button-active-hover@2.png"));
}

button:checked:disabled:backdrop {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (mix (#e3e3e3, @bg_color, 0.5)),
                                     to (mix (#f3f3f3, @bg_color, 0.5)));
    border-image-source: -gtk-scaled(url("assets/backdrop-button-active-disabled.png"),
                                     url("assets/backdrop-button-active-disabled@2.png"));
}

/*
.button.default {
    border-image-source: -gtk-scaled(url("assets/button-default.png"),
                                     url("assets/button-default@2.png"));
}

.button.default:hover {
    border-image-source: -gtk-scaled(url("assets/button-default-hover.png"),
                                     url("assets/button-default-hover@2.png"));
}

.button.default:focus {
    border-image-source: -gtk-scaled(url("assets/button-default-focused.png"),
                                     url("assets/button-default-focused@2.png"));
}

.button.default:focus:hover {
    border-image-source: -gtk-scaled(url("assets/button-default-focused-hover.png"),
                                     url("assets/button-default-focused-hover@2.png"));
}
*/

button.destructive-action {
    background-image: linear-gradient(to bottom, #e03d3d, #ef2929);
    border-color: #8e0b0b;
    border-image: none;
    color: white;
    -gtk-icon-shadow: 0 1px shade(#9d4242, 1.15);
    outline-color: rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px shade(#9d4242, 1.15);
}

/* eg. mate-appearance-properties */
button.link.flat.text-button:focus {
    outline-style: dashed;
    outline-offset: 0px;
    outline-color: shade (@theme_selected_bg_color, 1.3);
}

/******************
 * Linked Widgets *
 *****************/

/* Set up shadows and hilights for button visual separation */
.linked button,
.linked.horizontal > combobox > .linked > button.combo,
toolbar .raised.linked button,
toolbar .linked button.raised,
toolbar.inline-toolbar button,
toolbar.inline-toolbar toolbutton > button {
	box-shadow: inset 1px 0 @inset_light_color, inset -1px 0 @inset_dark_color;
}

.linked button:first-child,
.linked.horizontal > combobox:first-child > .linked > button.combo:first-child,
toolbar .raised.linked button:first-child,
toolbar .linked button.raised:first-child,
toolbar.inline-toolbar button:first-child,
toolbar.inline-toolbar toolbutton > button:first-child {
	box-shadow: inset -1px 0 @inset_dark_color;
}

.linked button:last-child,
.linked.horizontal > combobox:last-child > .linked > button.combo:last-child,
toolbar .raised.linked button:last-child,
toolbar .linked button.raised:last-child,
toolbar.inline-toolbar button:last-child,
toolbar.inline-toolbar toolbutton > button:last-child {
	box-shadow: inset 1px 0 @inset_light_color;
}

.linked button:checked,
.linked.horizontal > combobox > .linked > button.combo:checked,
toolbar .raised.linked button:checked,
toolbar .linked button.raised:checked,
toolbar.inline-toolbar button:checked,
toolbar.inline-toolbar toolbutton > button:checked {
	box-shadow: inset 1px 0 @inset_dark_color;
}

.linked button:disabled,
.linked.horizontal > combobox > .linked > button.combo:disabled,
toolbar .raised.linked button:disabled,
toolbar .linked button.raised:disabled,
toolbar.inline-toolbar button:disabled,
toolbar.inline-toolbar toolbutton > button:disabled {
	box-shadow: inset -1px 0 @inset_dark_color;
}

/* remove box shadow from last-child and only-child */
.linked button:disabled:last-child,
.linked button:only-child,
toolbar .raised.linked button:disabled:last-child,
toolbar .linked button.raised:disabled:last-child,
toolbar.inline-toolbar button:disabled:last-child,
toolbar.inline-toolbar button:only-child,
toolbar.inline-toolbar toolbutton > button:disabled:last-child,
toolbar.inline-toolbar toolbutton > button:only-child {
	box-shadow: none;
}

/* remove inset from first-child and only-child active buttons */
.linked button:checked:only-child,
toolbar .raised.linked button:checked:only-child,
toolbar .linked button.raised:checked:only-child,
toolbar.inline-toolbar button:only-child:checked,
toolbar.inline-toolbar toolbutton > button:checked:only-child,
.linked button:checked:first-child,
toolbar .raised.linked button:checked:first-child,
toolbar .linked button.raised:checked:first-child,
toolbar.inline-toolbar button:checked:first-child,
toolbar.inline-toolbar toolbutton > button:checked:first-child {
	box-shadow: inset 0 1px 1px alpha(black, 0.1);
}

.linked > entry,
.linked > button,
combobox > .linked button.combo,
.linked > combobox > .linked button.combo {
    border-radius: 0;
    border-image-width: 10px 0 10px 0;
    border-width: 1px 0 1px 0;
    box-shadow: inset -1px 0 shade (@bg_color, 0.84);
}

.linked > entry:first-child,
.linked > button:first-child,
combobox > .linked button.combo:first-child,
.linked > combobox:first-child > .linked button.combo:first-child {
    border-image-width: 10px 0 10px 12px;
    border-width: 1px 0px 1px 1px;
    border-radius: 8px 0 0 8px;
}

.linked > entry:last-child,
.linked > button:last-child,
combobox > .linked button.combo:last-child,
.linked > combobox:last-child > .linked button.combo:last-child {
    border-image-width: 10px 12px 10px 0;
    border-radius: 0 8px 8px 0;
    border-width: 1px 1px 1px 0px;
    box-shadow: none;
}

.linked > entry:only-child,
.linked > button:only-child,
combobox > .linked button.combo:only-child,
.linked > combobox:only-child > .linked button.combo:only-child {
    border-image-width: 10px 12px 10px 12px;
    border-radius: 8px;
    border-width: 1px;
}

/* vertical */
.vertical.linked > entry,
.vertical.linked > button {
    border-radius: 0;
    border-image-width: 0 12px 0 12px;
    border-width: 0 1px 0 1px;
    box-shadow: inset -1px -1px shade (@bg_color, 0.84);
}

.vertical.linked > button {
    padding: 5px 0px;
}

.vertical.linked > entry:first-child,
.vertical.linked > button:first-child {
    border-image-width: 10px 12px 0px 12px;
    border-width: 1px 1px 1px 1px;
    border-radius: 8px 8px 0 0;
    box-shadow: inset -1px -1px shade (@bg_color, 0.84);
}

.vertical.linked > entry:last-child,
.vertical.linked > button:last-child {
    border-image-width: 0px 12px 10px 12px;
    border-radius: 0 0 8px 8px;
    border-width: 0px 1px 1px 1px;
    box-shadow: none;
}

.vertical.linked > entry:only-child,
.vertical.linked > button:only-child {
    border-image-width: 10px 12px 10px 12px;
    border-radius: 8px;
    border-width: 1px;
}

.primary-toolbar:not(.libreoffice-toolbar) .linked button,
headerbar .linked button {
    box-shadow: inset 1px 0 shade (@dark_bg_color, 1.4),
                inset -1px 0 shade (@dark_bg_color, 0.9);
}

.primary-toolbar:not(.libreoffice-toolbar) .linked button:first-child,
headerbar .linked button:first-child {
    box-shadow: inset -1px 0 shade (@dark_bg_color, 0.9);
}

.primary-toolbar:not(.libreoffice-toolbar) .linked button:last-child,
headerbar .linked button:last-child {
    box-shadow: inset 1px 0 shade (@dark_bg_color, 1.4)
}

.primary-toolbar:not(.libreoffice-toolbar) .linked button:active,
headerbar .linked button:active,
.primary-toolbar:not(.libreoffice-toolbar) .linked button:disabled,
headerbar .linked button:disabled {
    box-shadow: none;
}

.primary-toolbar:not(.libreoffice-toolbar) .linked button:only-child,
headerbar .linked button:only-child {
    box-shadow: none;
}

messagedialog .linked.dialog-action-area button {
    border-image: none;
    border-width: 1px 0px 1px 0px;
    border-color: shade (@bg_color, 0.82);
    border-style: solid;
    border-radius: 0px;
    padding: 5px 0px;
    box-shadow: inset 1px 0 @inset_light_color, inset -1px 0 @inset_dark_color;
}

messagedialog .linked.dialog-action-area button:first-child {
    border-image: none;
    border-width: 1px 0px 1px 1px;
    border-radius: 7px 0px 0px 7px;
    box-shadow: inset -1px 0 @inset_dark_color;
}

messagedialog .linked.dialog-action-area button:last-child {
    border-image: none;
    border-width: 1px 1px 1px 0px;
    border-radius: 0px 7px 7px 0px;
    box-shadow: inset 1px 0 @inset_light_color;
}

messagedialog .linked.dialog-action-area button:only-child {
    border-image: none;
    border-radius: 7px;
    border-width: 1px;
}

messagedialog .linked.dialog-action-area button.default,
messagedialog .linked.dialog-action-area button:hover,
messagedialog .linked.dialog-action-area button:focus,
messagedialog .linked.dialog-action-area button.default:focus {
    border-color: @focus_color_dialog;
    border-style: solid;
}

/****************
 * cell and row *
 ****************/
.cell {
    background-color: @base_color;
    border-radius: 0;
    border-width: 0;
}

row:selected,
row.activatable:selected {
    background-image: -gtk-gradient (linear, left bottom, left top,
                                     from (shade (@selected_bg_color, 1.06)),
                                     to (shade (@selected_bg_color, 0.94)));
    border-top-color: shade (@selected_bg_color, 0.88);
    border-style: solid;
    border-width: 0;
}

row:selected:backdrop,
row.activatable:backdrop {
    background-image: -gtk-gradient (linear, left bottom, left top,
                                     from (shade (@backdrop_selected_bg_color, 1.06)),
                                     to (shade (@backdrop_selected_bg_color, 0.94)));
    border-top-color: shade (@backdrop_selected_bg_color, 0.9);
}

/*******************
 * check and radio *
 *******************/

check,
radio,
check:disabled,
radio:disabled {
	background-color: transparent;
	border-style: none;
}

check,
radio {
	padding: 0px 6px 0px 0px;
}

checkbutton:hover,
checkbutton:hover:active,
checkbutton:selected,
checkbutton:selected:focus,
checkbutton:disabled {
	background-color: transparent;
}

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

/*****************
 * column-header *
 *****************/

treeview header button {
    border-radius: 0;
    border-width: 0 1px 1px 0;
    border-image: none;
	padding: 0 4px;
}

treeview header button {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@bg_color, 1.06)),
                                     to (shade (@bg_color, 1.04)));
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@bg_color, 0.99)),
                                 to (shade (@bg_color, 0.9))) 1;
    box-shadow: inset -1px 0 shade (@bg_color, 1.1),
                inset 0 -1px shade (@bg_color, 1.1);

    text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.4);
}

treeview header button:backdrop {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@bg_color, 1.04)),
                                     to (shade (@bg_color, 1.02)));
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@bg_color, 0.94)),
                                 to (shade (@bg_color, 0.88))) 1;
    box-shadow: inset -1px 0 shade (@bg_color, 1.03),
                inset 0 -1px shade (@bg_color, 1.03);
}

treeview header button:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@bg_color, 1.0)),
                                     to (shade (@bg_color, 0.95)));
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@bg_color, 0.99)),
                                 to (shade (@bg_color, 0.9))) 1;
}

treeview header button:hover:backdrop {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@bg_color, 1.1)),
                                     to (shade (@bg_color, 1.06)));
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@bg_color, 0.99)),
                                 to (shade (@bg_color, 0.9))) 1;
}


treeview header button:nth-child(last) {
    border-width: 0 0 1px 0;
}

/****************
 * Content view *
 ****************/
.content-view.view {
    background-color: shade (@bg_color, 1.01);
}

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

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

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

.content-view.view:backdrop {
    background-color: @bg_color;
}

.content-view.view:selected:backdrop {
    background-color: @backdrop_selected_bg_color;
}

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

/*********
 * entry *
 *********/
entry {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@base_color, 0.96)),
                                     to (@base_color));
    padding: 5px 7px;
    color: @text_color;
}

entry.flat,
entry.flat:focus {
    padding: 2px;
}

entry:backdrop {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (mix (shade (@base_color, 0.96), @bg_color, 0.5)),
                                     to (mix (@base_color, @bg_color, 0.5)));
    color: @backdrop_text_color;
}

entry selection,
entry selection:focus,
entry:selected,
entry:selected:focus {
    color: @theme_selected_fg_color;
    background-color: @selected_bg_color;
}

entry:disabled {
    background-color: #f5f5f5;
    background-image: none;
    color: mix (@text_color, @base_color, 0.4);
}

entry.readonly {
    background-color: #f5f5f5;
    background-image: none;
}

entry:disabled:backdrop {
    background-color: mix (#f5f5f5, @bg_color, 0.5);
    color: mix (@text_color, @base_color, 0.4);
}

.primary-toolbar:not(.libreoffice-toolbar) entry progressbar,
.primary-toolbar:not(.libreoffice-toolbar) entry progressbar,
headerbar entry progressbar,
headerbar entry progressbar,
entry progressbar {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 0.8)),
                                     color-stop (0.1, shade (@selected_bg_color, 0.9)),
                                     to (shade (@selected_bg_color, 1.1)));
    border-width: 0;
    color: @selected_fg_color;
}

/*********************
 * App Notifications *
 *********************/

.app-notification,
.app-notification.frame {
    color: @theme_selected_fg_color;
    padding: 10px;
    border: none;
    border-radius: 0 0 4px 4px;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(to bottom,
                                      rgba(0, 0, 0, 0.2),
                                      transparent 2px);
    background-clip: padding-box;
}

.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_dark_fg_color;
    border-color: rgba(37, 88, 128, 0.7);
    background-image: linear-gradient(to bottom,
                                      rgba(0, 0, 0, 0.7),
				      rgba(0, 0, 0, 0.7));
    background-clip: padding-box;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
    text-shadow: none;
    -gtk-icon-shadow: 0 1px black;
    outline-color: rgba(238, 238, 236, 0.3);
    border-radius: 3px;
    padding: 0 0px 2px 0px;
}

.app-notification button.flat,
.app-notification button.text-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.flat,
.app-notification.frame button.text-button,
.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 {
    -gtk-icon-shadow: 0 1px black;
    text-shadow: none;
    border-image-source: none;
    border-image-width: 0px;
    border-radius: 3px;
}

.app-notification button:hover,
.app-notification.frame button:hover {
    color: black;
    border-color: rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(to bottom,
                                      rgba(203, 213, 217, 0.7),
                                      rgba(203, 213, 217, 0.7));
    background-clip: padding-box;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
    text-shadow: none;
    -gtk-icon-shadow: 0 1px black;
    outline-color: rgba(238, 238, 236, 0.3);
    border-radius: 3px;
    padding: 0 0px 2px 0px;
}

.app-notification button:checked,
.app-notification button:backdrop:checked,
.app-notification.frame button:checked,
.app-notification.frame button:backdrop:active {
    color: white;
    border-color: rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(to bottom,
                                      rgba(37, 88, 128, 0.7),
                                      rgba(37, 88, 128, 0.7));
    background-clip: padding-box;
    box-shadow: none;
    text-shadow: none;
    -gtk-icon-shadow: none;
    outline-color: rgba(238, 238, 236, 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(0, 0, 0, 0.7);
    background-image: linear-gradient(to bottom,
                                      rgba(52, 57, 57, 0.5),
                                      rgba(52, 57, 57, 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(0, 0, 0, 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;
}

/************
 * expander *
 ************/

expander {
    color: @fg_color;
}

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

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

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

/*********
 * frame *
 *********/
.frame,
frame > border { /* firefox location entry */
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: shade (@bg_color, 0.82);
  border-image: none;
  background: none;
}

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

/***********************
 * iconview & textview *
 ***********************/

.view text,
textview,
.view {
    background-color: @base_color;
    color: @text_color;
}

.view text selection:disabled,
.view:disabled {
	background-color: @insensitive_bg_color;
	color: @insensitive_fg_color;
}

.view text selection,
.view:selected,
.view:active {
    background-color: @theme_selected_bg_color;
    color: @theme_selected_fg_color;
}

.view text selection:hover,
.view:hover {
	background-color: shade (@theme_selected_bg_color, 1.55);
	color: shade (@theme_selected_bg_color, 0.35);
}

.view text selection:backdrop,
.view:selected:backdrop {
	background-color: shade(@theme_unfocused_bg_color, 0.94);
	color: @theme_fg_color;
}

iconview .cell:selected,
iconview .cell:selected:focus {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.0)),
                                     to (shade (@selected_bg_color, 0.9)));
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: shade (@selected_bg_color, 0.8);
    border-bottom-color: shade (@selected_bg_color, 0.7);
    box-shadow: inset 1px 0 shade (@selected_bg_color, 1.05),
                inset -1px 0 shade (@selected_bg_color, 1.05),
                inset 0 1px shade (@selected_bg_color, 1.08),
                inset 0 -1px shade (@selected_bg_color, 1.0);
}

iconview.view.cell:selected:focus {
    border-color: alpha(@text_color, 0.6);
    border-style: dashed;
}

.view.rubberband,
.rubberband,
flowbox rubberband,
treeview.view rubberband,
.content-view rubberband,
rubberband {
    background-color: alpha (@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: @selected_bg_color;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
}

iconview .cell {
    background-color: transparent;
}

/***********
 * infobar *
 ***********/
.info {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@info_bg_color, 1.04)),
                                     to (shade (@info_bg_color, 0.96)));
    border-style: solid;
    border-width: 1px;

    color: @info_fg_color;

    border-color: shade (@info_bg_color, 0.8);
    border-bottom-color: shade (@info_bg_color, 0.75);

    box-shadow: inset 1px 0 shade (@info_bg_color, 1.08),
                inset -1px 0 shade (@info_bg_color, 1.08),
                inset 0 1px shade (@info_bg_color, 1.1),
                inset 0 -1px shade (@info_bg_color, 1.04);
}

.warning {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@warning_bg_color, 1.04)),
                                     to (shade (@warning_bg_color, 0.96)));
    border-style: solid;
    border-width: 1px;

    color: @warning_fg_color;

    border-color: shade (@warning_bg_color, 0.8);
    border-bottom-color: shade (@warning_bg_color, 0.75);

    box-shadow: inset 1px 0 shade (@warning_bg_color, 1.08),
                inset -1px 0 shade (@warning_bg_color, 1.08),
                inset 0 1px shade (@warning_bg_color, 1.1),
                inset 0 -1px shade (@warning_bg_color, 1.04);
}

.question {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@question_bg_color, 1.04)),
                                     to (shade (@question_bg_color, 0.96)));
    border-style: solid;
    border-width: 1px;

    color: @question_fg_color;

    border-color: shade (@question_bg_color, 0.8);
    border-bottom-color: shade (@question_bg_color, 0.75);

    box-shadow: inset 1px 0 shade (@question_bg_color, 1.08),
                inset -1px 0 shade (@question_bg_color, 1.08),
                inset 0 1px shade (@question_bg_color, 1.1),
                inset 0 -1px shade (@question_bg_color, 1.04);
}

.error {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@error_bg_color, 1.04)),
                                     to (shade (@error_bg_color, 0.96)));
    border-style: solid;
    border-width: 1px;

    color: @error_fg_color;

    border-color: shade (@error_bg_color, 0.8);
    border-bottom-color: shade (@error_bg_color, 0.75);

    box-shadow: inset 1px 0 shade (@error_bg_color, 1.08),
                inset -1px 0 shade (@error_bg_color, 1.08),
                inset 0 1px shade (@error_bg_color, 1.1),
                inset 0 -1px shade (@error_bg_color, 1.04);
}

/********
 * menu *
 ********/

toolbar menu,
combobox menu,
treemenu menu,
toolbar headerbar menu,
toolbutton menu,
.primary-toolbar:not(.libreoffice-toolbar) button menu,
headerbar button menu,
menu,
.menu {
    background-image: none;
    background-color: shade (@dark_bg_color, 1.08);
    border-bottom-color: shade (@dark_bg_color, 0.96);
    border-left-color: shade (@dark_bg_color, 0.8);
    border-right-color: shade (@dark_bg_color, 0.8);
    border-top-color: shade (@dark_bg_color, 0.96);
    padding: 0;
    border-width: 1px;
    border-style: solid;

    color: @dark_fg_color;

    box-shadow: inset 0 1px shade (@dark_bg_color, 1.18),
                inset 0 -1px shade (@dark_bg_color, 1.18),
                inset -1px 0 shade (@dark_bg_color, 1.16),
                inset 1px 0 shade (@dark_bg_color, 1.18);

    margin: 1px;
}

menu:selected,
.menu:selected {
    background-color: @selected_bg_color;
}

menu button:hover,
menu button:checked,
menu button:checked:disabled,
menu button:disabled,
menu button,
.menu button:hover,
.menu button:checked,
.menu button:checked:disabled,
.menu button:disabled,
.menu button {
    background-color: shade (@dark_bg_color, 1.08);
    background-image: none;
    border-radius: 0;
    border-style: none;
    border-width: 1px;
}

.context-menu {
    font-size: medium;
    font-weight: normal;
}

/***********
 * menubar *
 ***********/
menubar,
.menubar {
    -GtkWidget-window-dragging: true;
    background-color: @dark_bg_color;
    background-image: none;
    border-width: 0;
    color: @dark_fg_color;
    text-shadow: 0 -1px shade (@dark_bg_color, 0.6);
}

menubar:backdrop,
.menubar:backdrop {
    color: @backdrop_dark_fg_color;
    text-shadow: 0 -1px shade (@dark_bg_color, 0.8);
}

/***************
 * menubaritem *
 ***************/

menubar menuitem:hover,
.menubar menuitem:hover {
    background-color: transparent;
    background-clip: border-box;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.38)),
                                     to (shade (@dark_bg_color, 1.11)));

    box-shadow: inset 0 1px 1px 0 shade (@dark_bg_color, 1.8);

    color: shade (@dark_fg_color, 1.1);
    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
}

menubar > menuitem,
.menubar > menuitem {
    padding: 3px 5px 3px 5px;
    border: 1px solid transparent;
}

/************
 * menuitem *
 ************/

menuitem,
menu > menuitem {
/*    -GtkMenuItem-horizontal-padding: 0; deprecated */
    background: transparent;
    border-radius: 0;
    padding: 3px 5px 3px 5px;
    text-shadow: none;
}

.primary-toolbar:not(.libreoffice-toolbar) menu menuitem {
/*    -GtkMenuItem-horizontal-padding: 0; deprecated */
    background-image: none;
    background-color: shade (@dark_bg_color, 1.08);
    border-radius: 0;
    padding: 3px 5px 3px 5px;
    text-shadow: none;
    color: @dark_fg_color;
}

popover menuitem:checked:hover,
menuitem:hover,
menu menuitem:hover,
.menu menuitem:hover {
    border-radius: 0;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.1)),
                                     to (shade (@selected_bg_color, 0.9)));
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@selected_bg_color, 0.7)),
                                 to (shade (@selected_bg_color, 0.7))) 1;
    border-image-width: 1px;
    box-shadow: inset 1px 0 shade (@selected_bg_color, 1.02),
                inset -1px 0 shade (@selected_bg_color, 1.02),
                inset 0 1px shade (@selected_bg_color, 1.16),
                inset 0 -1px shade (@selected_bg_color, 0.96);

    color: @selected_fg_color;
    text-shadow: 0 -1px shade (@selected_bg_color, 0.7);
}

/* mix of old and new syntax is for broken firefox */
menuitem check,
menuitem radio,
menuitem check:hover,
menuitem radio:hover,
menuitem check:checked,
menuitem check:disabled,
menuitem radio:disabled,
menu menuitem .check,
menu menuitem .radio,
menu menuitem .check:hover,
menu menuitem .radio:hover,
menu menuitem .check:checked,
menu menuitem .radio:checked,
menu menuitem .check:disabled,
menu menuitem .radio:disabled {
	background-image: none;
	background-color: transparent;
	min-height: 12px;
	min-width: 12px;
	background-position: center center;
}

menuitem check:checked,
menuitem radio:checked {
    color: @fg_color;
}

menu menuitem check:hover,
menu menuitem radio:hover,
.menu menuitem check:hover,
.menu menuitem radio:hover {
    box-shadow: none;
}

toolbar menu menuitem:disabled,
toolbar menu menuitem *:disabled,
combobox menu menuitem:disabled,
combobox menu menuitem *:disabled,
treemenu menu menuitem:disabled,
treemenu menu menuitem *:disabled,
headerbar toolbar menu menuitem:disabled,
headerbar toolbar menu menuitem *:disabled,
toolbutton menu menuitem:disabled,
toolbutton menu menuitem *:disabled,
.primary-toolbar:not(.libreoffice-toolbar) button menu menuitem:disabled,
.primary-toolbar:not(.libreoffice-toolbar) button menu menuitem *:disabled,
headerbar button menu menuitem:disabled,
headerbar button menu menuitem *:disabled,
menuitem:disabled,
menuitem *:disabled {
    color: mix (@dark_fg_color, @dark_bg_color, 0.5);
    text-shadow: 0 -1px shade (@dark_bg_color, 0.6);
}

menuitem calendar,
menuitem calendar button,
menuitem calendar.header,
menuitem calendar.view {
    background-color: @dark_bg_color;
    background-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    padding: 1px;

    color: @dark_fg_color;
}

menuitem calendar {
    background-color: shade (@dark_bg_color, 1.3);
    background-image: none;
}

menuitem calendar:indeterminate {
    color: shade (@bg_color, 0.6);
}

menuitem entry {
    background-color: shade (@dark_bg_color, 1.3);
    background-image: none;

    color: @dark_fg_color;

    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@dark_bg_color, 0.75)),
                                 to (shade (@dark_bg_color, 0.9))) 1;
    border-image-width: 1px;
}

.primary-toolbar:not(.libreoffice-toolbar) scale trough,
.primary-toolbar:not(.libreoffice-toolbar) scale trough:backdrop,
headerbar scale trough,
headerbar scale trough:backdrop,
menuitem scale trough {
    background-color: @dark_bg_color;
    background-image: none;
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@dark_bg_color, 0.75)),
                                 to (shade (@dark_bg_color, 1.15))) 1;
    border-image-width: 1px;
}

menuitem accelerator {
    color: alpha (@dark_fg_color, 0.5);
}

menuitem accelerator:hover {
    color: alpha (@selected_fg_color, 0.8);
}

menuitem accelerator:disabled {
    color: alpha (mix (@dark_fg_color, @dark_bg_color, 0.5), 0.5);
    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
}

menuitem > box > image + label {
    padding-left: 6px;
}

menu separator,
.menu separator,
menuitem separator {
    min-height: 1px;
    background-color: shade(@fg_color, 0.7);
    border-style: none;
}

/* fix for broken firefox */
menu separator,
menu .separator {
    color: shade(@dark_bg_color, 0.9);
}

menuitem > arrow {
    min-height: 16px;
    min-width: 16px;
    margin-left: 10px;
    color: @dark_fg_color;
}

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");
}

/************
 * notebook *
 ************/

notebook {
    padding: 0;
    border-style: none;
}

notebook.frame {
    padding: 0;
    border-style: solid;
    border-color: shade (@bg_color, 0.82);
    background-color: shade (@notebook_bg_color, 1.00);
    border-width: 1px;
    border-radius:  4px;
}

/* pavu-control */
window.background > box.vertical > notebook:not(.frame),
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) {
    background-color: shade (@notebook_bg_color, 1.00);
    border-radius: 4px 4px 0px 0px;
}

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: shade (@bg_color, 0.82);
}

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 {
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-color: shade (@bg_color, 0.82);
}

printdialog > box.view.vertical.dialog-vbox > box.vertical > notebook {
    background-color: shade (@notebook_bg_color, 1.00);
    border-radius: 0px;
    border-style: solid;
    border-color: @borders;
    border-width: 0px 0px 1px 0px;
}

dialog.background.csd > box.vertical.dialog-vbox > notebook, /* meld preferences */
dialog.background.ssd > box.vertical.dialog-vbox > notebook,
dialog.background.solid-csd > box.vertical.dialog-vbox > notebook {
    background-color: shade (@notebook_bg_color, 1.00);
}

notebook :hover {
    -gtk-icon-effect: highlight;
}

notebook header {
    background-image: none;
    background-color: shade (@theme_bg_color, 1.0);
    border-width: 0px;
}

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

printdialog notebook header.top,
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 {
    border-radius: 0px;
}

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

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

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

notebook header tab {
    border-color: shade (@bg_color, 0.82);
    border-style: solid;
    border-width: 1px;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                      @notebook_tab_gradient_a,
                      @notebook_tab_gradient_d);
    padding: 6px;
}

notebook header tab label {
    color: @theme_fg_color;
    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;
}

/* tabs and header in view areas, ie. pluma-, caja-tabs */
.gedit-bottom-panel-paned > grid > notebook > header.top,
window.background > notebook > header.top, /* nautilus preferences */
paned.horizontal > box.vertical > notebook > header.top,
paned.horizontal > paned.vertical > notebook > header.top {
    border-style: solid;
    border-color: shade (@bg_color, 0.82);
    border-width: 1px 0px 0px 1px;
    border-radius: 4px 4px 0px 0px;
    box-shadow: none;
}

paned.horizontal > box.vertical > notebook scrolledwindow.frame,
paned.horizontal > paned.vertical > notebook scrolledwindow.frame {
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: shade (@bg_color, 0.82);
}

.gedit-bottom-panel-paned > grid > notebook > header tab,
window.background > notebook > header tab,
paned.horizontal > notebook > header tab,
paned.horizontal > box.vertical > notebook > header tab,
paned.horizontal > paned.vertical > notebook > header tab {
    padding: 6px;
    margin: 0px -0px 0px -1px;
    border-width: 0px 1px 0 1px;
    border-style: solid;
    border-radius: 4px 4px 0 0;
}

.gedit-bottom-panel-paned > grid > notebook > header tab:checked,
.gedit-bottom-panel-paned > grid > notebook > header tab:checked:hover,
window.background > notebook > header.top tab:checked,
window.background > notebook > header.top tab:checked:hover,
paned.horizontal > notebook > header.top tab:checked,
paned.horizontal > notebook > header.top tab:checked:hover,
paned.horizontal > box.vertical > notebook > header.top tab:checked,
paned.horizontal > box.vertical > notebook > header.top tab:checked:hover,
paned.horizontal > paned.vertical > notebook > header.top tab:checked,
paned.horizontal > paned.vertical > notebook > header.top tab:checked:hover {
    background-image: linear-gradient(to bottom,
                                      shade(@notebook_bg_color, 1.18),
                                      shade(@notebook_bg_color, 1.00));
    border-radius: 4px 4px 0 0;
    border-width: 0px 1px 0 1px;
    border-style: solid;
    box-shadow: none;
}

.gedit-bottom-panel-paned > grid > notebook > header button.flat.small-button,
paned.horizontal > box.vertical > notebook > header button.flat,
paned.horizontal > paned.vertical > notebook > header button.flat {
    padding: 1px;
}

/* closable-page */
paned.horizontal > notebook {
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: shade (@bg_color, 0.82);
    border-radius: 4px 4px 0px 0px;
}

paned.horizontal > notebook > header {
    border-width: 0px 0px 0px 0px;
    border-style: solid;
    border-color: shade (@bg_color, 0.82);
    border-radius: 4px 4px 0px 0px;
}

paned.horizontal > notebook > header label {
    padding: 4px;
}

paned.horizontal > notebook > header button.flat.small-button {
    padding: 1px;
}

paned.horizontal > notebook > stack > box {
    background-color: shade (@notebook_bg_color, 1.00);
}

/* 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.csd > box.vertical.dialog-vbox > notebook > header.top tab, /* meld preferences */
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;
}

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.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: 6px;
    border-radius: 4px 4px 0px 0px;
}

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.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.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(@notebook_bg_color, 1.18),
                                      shade(@notebook_bg_color, 1.00));
    border-radius: 4px 4px 0px 0px;
    border-width: 0px 1px 0px 1px;
    border-style: solid;
}

notebook.frame > header.bottom tab {
    padding: 6px;
}

notebook.frame > header.bottom tab:checked,
notebook.frame > header.bottom tab:checked:hover {
    background-image: linear-gradient(to top,
                                      shade(@notebook_bg_color, 1.18),
                                      shade(@notebook_bg_color, 1.00));
    border-radius: 0px 0px 4px 4px;
    border-style: solid;
    border-width: 0px 1px 0px 1px;
}

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

notebook.frame > header.left tab {
    border-radius: 4px 0px 0px 4px;
}


notebook.frame > header.left tab:checked,
notebook.frame > header.left tab:checked:hover {
    background-image: linear-gradient(to right,
                                      shade(@notebook_bg_color, 1.18),
                                      shade(@notebook_bg_color, 1.00));
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-radius: 4px 0px 0px 4px;
}

notebook.frame > header.right tab {
    border-radius: 0px 4px 4px 0px;
}

notebook.frame > header.right tab:checked,
notebook.frame > header.right tab:checked:hover {
    background-image: linear-gradient(to left,
                                      shade(@notebook_bg_color, 1.18),
                                      shade(@notebook_bg_color, 1.00));
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-radius: 0px 4px 4px 0px;
}

notebook tab.reorderable-page:checked,
notebook tab.reorderable-page:checked:hover {
    background-image: linear-gradient(to bottom,
                                      shade(@notebook_bg_color, 1.18),
                                      shade(@notebook_bg_color, 1.00));
    border-radius: 4px 4px 0 0;
    box-shadow: none;
    border-style: solid;
}

/* outlines */
notebook header.top tab:checked {
    -gtk-outline-top-left-radius: 4px;
    -gtk-outline-top-right-radius: 4px;
    -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: 4px;
    -gtk-outline-bottom-right-radius: 4px;
}

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

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

/* close button styling */
notebook > header > tabs > tab > box > button.flat,
notebook > header > tabs > tab > box > button.flat.small-button {
    border-image: none;
    background-image: none;
    background-color: transparent;
    border-radius: 3px;
    border-style: none;
    border-color: transparent;
    border-width: 0px;
    -gtk-icon-shadow: none;
    padding: 0px;
}

notebook > header > tabs > tab > box > button.flat:hover,
notebook > header > tabs > tab > box > button.flat.small-button:hover {
    -gtk-icon-effect: highlight;
}

notebook > header > tabs > tab > box > button.flat:checked,
notebook > header > tabs > tab > box > button.flat:hover:active,
notebook > header > tabs > tab > box > button.flat.small-button:checked,
notebook > header > tabs > tab > box > button.flat.small-button:hover:active {
    color:  @button_active_text;
    background-color: alpha(black, 0.08);
    box-shadow: inset 0 1px alpha(black, 0.05);
    -gtk-icon-shadow: 0 1px @button_active_text_shadow;
    border-color: alpha(black, 0.27)
                        alpha(black, 0.13)
                        alpha(black, 0.13)
                        alpha(black, 0.13);
}

notebook > header > tabs > tab.prelight-page button.flat.small-button,
notebook > header > tabs > tab.active-page button.flat.small-button {
    color: mix(@theme_fg_color, @theme_base_color, 0.6);
    -gtk-icon-shadow: 0 1px @button_text_shadow;
}

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 {
    color: @theme_selected_bg_color;
}

notebook header tabs arrow:active {
    color: @theme_fg_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:disabled {
    color: #c7c7c7;
}

notebook header tab:checked label {
    color: @theme_fg_color;
    font-weight: normal;
}

notebook header tab label {
    color: shade (@theme_fg_color, 1.30);
    font-weight: normal;
}

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

combobox .linked button.combo:only-child {
    border-image-width: 10px 12px 10px 12px;
    border-radius: 8px;
    border-width: 1px;
}

.linked combobox .linked button.combo {
    border-image-width: 10px 0px 10px 0px;
    border-radius: 0px;
    border-width: 1px 0px;
}

.linked combobox:first-child .linked button.combo:first-child {
    border-image-width: 10px 0px 10px 12px;
    border-radius: 8px 0 0 8px;
    border-width: 1px 0px 1px 1px;
}

.linked combobox:last-child .linked button.combo:last-child {
    border-image-width: 10px 12px 10px 0px;
    border-radius: 0px 8px 8px 0px;
    border-width: 1px 1px 1px 0px;
}

/* vertical */
.vertical.linked > combobox .linked button.combo {
    border-radius: 0;
    border-image-width: 0 12px 0 12px;
    border-width: 0 1px 0 1px;
    box-shadow: inset -1px -1px shade (@bg_color, 0.84);
}

.vertical.linked combobox .linked button.combo:first-child {
    border-image-width: 10px 12px 0px 12px;
    border-width: 1px 1px 1px 1px;
    border-radius: 8px 8px 0 0;
    box-shadow: inset -1px -1px shade (@bg_color, 0.84);
}

combobox arrow {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    color: @theme_fg_color;
    min-height: 16px;
    min-width: 16px;
}

/*******************
 * Paned separator *
 *******************/

/* the small line between sidebar and view */
.sidebar paned > separator,
paned > separator {
    min-width: 3px;
    min-height: 3px;
    -gtk-icon-source: none;
    border-style: none;
    background-color: @theme_bg_color;
    background-size: 1px 1px;
}

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

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

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

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

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

progressbar.horizontal progress {
    min-height: 16px;
    border-radius: 6px;
}

progressbar.vertical trough {
    min-width: 18px;
    border-radius: 6px;
}

progressbar.vertical progress {
    min-width: 16px;
    border-radius: 6px;
}

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

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

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

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

progressbar.horizontal progress,
row progressbar progress,
row:hover progressbar progress,
row:selected progressbar progress,
row:selected:focus progressbar progress,
row:nth-child(odd) progressbar progress,
.progressbar row,
.progressbar row:hover,
.progressbar row:selected,
.progressbar row:selected:focus,
.progressbar row:nth-child(odd) {
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    background-image: linear-gradient(to bottom,
                                      @progressbar_fill_a,
                                      @progressbar_fill_b);
    border-top-color:    shade(@button_border_active, 0.80);
    border-left-color:   shade(@button_border_active, 0.85);
    border-right-color:  shade(@button_border_active, 0.85);
    border-bottom-color: shade(@button_border_active, 0.80);
/* Label font color of progressbar*/
    color: @theme_fg_color;
    text-shadow: none;
}

progressbar.vertical progress {
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    background-image: linear-gradient(to right,
                                      @progressbar_fill_a,
                                      @progressbar_fill_b);
    border-top-color:    shade(@button_border_active, 0.80);
    border-left-color:   shade(@button_border_active, 0.85);
    border-right-color:  shade(@button_border_active, 0.85);
    border-bottom-color: shade(@button_border_active, 0.80);
/* Label font color of progressbar*/
    color: @theme_fg_color;
    text-shadow: none;
}

progressbar:backdrop progress,
row:backdrop progressbar progress,
row:hover:backdrop progressbar progress,
row:selected:backdrop progressbar progress,
row:selected:focus:backdrop progressbar progress,
.progressbar row:backdrop progress,
.progressbar row:hover:backdrop progress,
.progressbar row:selected:backdrop progress,
.progressbar row:selected:focus:backdrop progress {
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    background-image: linear-gradient(to bottom,
                                      @progressbar_backdrop_fill_a,
                                      @progressbar_backdrop_fill_b);
    border-top-color:    shade(@button_border_backdrop_active, 0.80);
    border-left-color:   shade(@button_border_backdrop_active, 0.85);
    border-right-color:  shade(@button_border_backdrop_active, 0.85);
    border-bottom-color: shade(@button_border_backdrop_active, 0.80);
/* Label font color of progressbar*/
    color: @backdrop_fg_color;
    text-shadow: none;
}

progressbar.vertical:backdrop progress {
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    background-image: linear-gradient(to right,
                                      @progressbar_backdrop_fill_a,
                                      @progressbar_backdrop_fill_b);
    border-top-color:    shade(@button_border_backdrop_active, 0.80);
    border-left-color:   shade(@button_border_backdrop_active, 0.85);
    border-right-color:  shade(@button_border_backdrop_active, 0.85);
    border-bottom-color: shade(@button_border_backdrop_active, 0.80);
/* Label font color of progressbar*/
    color: @backdrop_fg_color;
    text-shadow: none;
}

progressbar trough {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#d1d1d1),
                                     to (#e8e8e8));
    border-style: solid;
    border-width: 1px;
    color: @text_color;
}

progressbar.vertical trough {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (#d1d1d1),
                                     to (#e8e8e8));
}

/* old syntax is for <= firefox-48 */
.progressbar.horizontal,
.progressbar.horizontal:selected,
treeview.view.progressbar,
treeview.view.progressbar:selected {
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    background-image: linear-gradient(to bottom,
                                      @progressbar_fill_a,
                                      @progressbar_fill_b);
    border-top-color:    shade(@button_border_active, 0.80);
    border-left-color:   shade(@button_border_active, 0.85);
    border-right-color:  shade(@button_border_active, 0.85);
    border-bottom-color: shade(@button_border_active, 0.80);
/* Label font color of progressbar*/
    color: @theme_fg_color;
    text-shadow: none;
}

.progressbar.horizontal:backdrop,
treeview.view.progressbar:backdrop {
    background-image: linear-gradient(to bottom,
                                      @progressbar_backdrop_fill_a,
                                      @progressbar_backdrop_fill_b);
    border-top-color:    shade(@button_border_backdrop_active, 0.80);
    border-left-color:   shade(@button_border_backdrop_active, 0.85);
    border-right-color:  shade(@button_border_backdrop_active, 0.85);
    border-bottom-color: shade(@button_border_backdrop_active, 0.80);
}

.trough.horizontal,
.trough.horizontal:selected,
treeview.view.trough,
treeview.view.trough:selected {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#d1d1d1),
                                     to (#e8e8e8));
    border-style: solid;
    border-width: 1px;
    color: @text_color;
    border-radius: 3px;
    border-top-color:    shade(@borders, 0.80);
    border-left-color:   shade(@borders, 0.85);
    border-right-color:  shade(@borders, 0.85);
    border-bottom-color: shade(@borders, 0.80);
}

.trough.horizontal:selected,
.treeview.view.trough:selected {
    border-top-color:    shade(@button_border_active, 0.80);
    border-left-color:   shade(@button_border_active, 0.85);
    border-right-color:  shade(@button_border_active, 0.85);
    border-bottom-color: shade(@button_border_active, 0.80);
}

/*************
 * Level bar *
 *************/

/* level bars as used for password quality or remaining power */
levelbar {
    min-width: 34px;
    min-height: 3px;
}

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

levelbar trough {
    padding: 2px;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#d1d1d1),
                                     to (#e8e8e8));
}

levelbar.horizontal block {
    min-height: 3px;
}

levelbar.vertical block {
    min-width: 3px;
}

levelbar block.filled {
    border-width: 1px;
    border-style: solid;
    border-color: @selected_bg_color;
    background-color: #8FAF53;
}

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

levelbar block.filled:backdrop,
levelbar block.filled.high:backdrop,
levelbar block.filled.low:backdrop {
    background-color: @backdrop_filling_bg;
    border-color: @backdrop_filling_bg;
    background-image: none;
}

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

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

levelbar block.low {
    border-color: shade(@warning_bg_color, 0.80);
    background-image: linear-gradient(to bottom,
                                      shade(@warning_bg_color, 1.3),
                                      @warning_bg_color 75%,
                                      shade(@warning_bg_color, 0.90)
                                      );
}

levelbar block.high {
    border-color: shade(@success_color, 0.85);
    background-image: linear-gradient(to bottom,
                                      shade(@success_color, 1.2),
                                      @success_color 75%,
                                      shade(@success_color, 0.95)
                                      );
}

levelbar block.full {
    border-color: shade(@success_color, 0.95);
    background-image: linear-gradient(to bottom,
                                      shade(@success_color, 1.2),
                                      @success_color 75%,
                                      shade(@success_color, 0.95));
}

levelbar block.empty {
    background-color: transparent;
    background-image: none;
    border-color: alpha(@bg_color, 0.1);
}

levelbar block.empty:backdrop {
    border-color: transparent;
    background-color: transparent;
}


/*********
 * scale *
 *********/

scale.vertical {
    min-width: 10px;
}

scale.horizontal {
    min-height: 10px;
}

scale.horizontal trough {
    min-height: 4px;
    margin: 8px 0;
    border-radius: 8px;
}

scale trough,
scale.vertical trough {
    min-width: 4px;
    margin: 0 6px;
    border-radius: 8px;
}

scale trough,
scale.horizontal trough {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#d1d1d1),
                                     to (#e8e8e8));
    border-style: solid;
    border-width: 1px;
}

scale.vertical trough {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (#d1d1d1),
                                     to (#e8e8e8));
}

scale trough:disabled,
scale.horizontal trough:disabled,
scale.vertical trough:disabled {
	background-color: shade(@insensitive_bg_color, 0.96);
	border-color: shade(@insensitive_scale_borders, 0.75);
	box-shadow: none;
	background-image: none;
}

scale  contents trough highlight,
scale.horizontal contents trough highlight,
scale.horizontal.marks-after contents trough highlight,
scale.vertical contents trough highlight {
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    background-image: linear-gradient(to bottom,
                                      @progressbar_fill_a,
                                      @progressbar_fill_b);
    border-top-color:    shade(@button_border_active, 0.80);
    border-left-color:   shade(@button_border_active, 0.85);
    border-right-color:  shade(@button_border_active, 0.85);
    border-bottom-color: shade(@button_border_active, 0.80);
}

scale contents trough highlight:disabled,
scale.horizontal contents trough highlight:disabled,
scale.vertical contents trough highlight:disabled {
    background-color: #b5b5b5;
    background-image: none;
    border-color: transparent;
}

scale contents trough highlight:backdrop,
scale.horizontal contents trough highlight:backdrop,
scale.vertical contents trough highlight:backdrop {
    background-color: #dcdcdc;
    background-image: none;
    border-color: transparent;
}


/* defines the color of the actuall marks on the scale */
scale marks indicator {
    color: shade (@bg_color, 0.8);
}

/* 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;
	background-color: transparent;
	/* background-image in -assets variant */
}

scale.vertical slider,
scale.horizontal slider {
    background-size: 105%;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 18px;
    margin: -9px 0px -9px 0px;
}

scale.vertical slider:hover,
scale.horizontal slider:hover {
    background-size: 110%;
}

scale.horizontal slider,
scale.horizontal.marks-after slider {
    min-width: 14px;
    margin: -9px 0px -9px 0px;
}

scale.vertical slider {
    min-height: 18px;
    margin: 0px -9px 0px -9px;
}

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

scale.horizontal.color.marks-before trough,
scale.vertical.color.marks-after trough {
      border-color: @scale_highlight_border;
      border-radius: 3px;
      background-repeat: no-repeat;
}

scale.vertical.color.marks-after slider {
    min-height: 18px;
    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: 18px;
    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%;
}

scale.horizontal.color.marks-before.fine-tune slider,
scale.vertical.color.marks-after.fine-tune slider,
scale.vertical.fine-tune slider:active,
scale.vertical.fine-tune slider:active:hover,
scale.horizontal.fine-tune slider:active,
scale.horizontal.fine-tune slider:hover:active {
	background-size: 80%;
}

/*************
 * scrollbar *
 *************/

scrollbar {
    background-image: none;
    border-style: solid;
    border-color: @borders;
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-forward-stepper: true;
}

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

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

/* broken firefox ignore background of trough */
scrollbar.vertical {
    background-image: linear-gradient(to right,
                                      @scrollbar_trough,
                                      shade (@scrollbar_trough, 1.08));
}

scrollbar.horizontal {
    background-image: linear-gradient(to bottom,
                                      @scrollbar_trough,
                                      shade (@scrollbar_trough, 1.08));
}

scrollbar trough {
    border-style: none;
    border-color: shade (@theme_bg_color, 0.94);
    border-radius: 0;
    border-image: none;
}

scrollbar trough.vertical {
    min-width: 13px;
    background-image: linear-gradient(to right,
                                      @scrollbar_trough,
                                      shade (@scrollbar_trough, 1.08));
}

scrollbar trough.horizontal {
    min-height: 13px;
    background-image: linear-gradient(to bottom,
                                      @scrollbar_trough,
                                      shade (@scrollbar_trough, 1.08));
}

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

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

scrollbar button,
scrollbar button:hover,
scrollbar button:hover:active,
scrollbar button:disabled,
scrollbar .button,
scrollbar .button:hover,
scrollbar .button:hover:active,
scrollbar .button:disabled {
    border-style: none;
    border-image: none;
    border-radius: 0;
    background-image: none;
    background-color: transparent;
}

scrollbar button:hover:active,
scrollbar .button:hover:active {
    background-color: alpha(shade(@scrollbar_trough, 0.8), 0.5);
}

scrollbar.vertical button.up,
scrollbar.vertical .button.up,
scrollbar.vertical button.up:hover,
scrollbar.vertical .button.up:hover {
    box-shadow: inset 0 -1px shade(mix(@scrollbar_slider, @scrollbar_trough, 0.6), 0.87);
}

scrollbar.vertical button.down,
scrollbar.vertical .button.down,
scrollbar.vertical button.down:hover,
scrollbar.vertical .button.down:hover {
    box-shadow: inset 0 1px shade(mix(@scrollbar_slider, @scrollbar_trough, 0.6), 0.93);
}

scrollbar.horizontal button.up,
scrollbar.horizontal .button.down,
scrollbar.horizontal button.up:hover,
scrollbar.horizontal .button.down:hover {
    box-shadow: inset -1px 0 shade(mix(@scrollbar_slider, @scrollbar_trough, 0.6), 0.87);
}

scrollbar.horizontal button.down,
scrollbar.horizontal .button.down,
scrollbar.horizontal button.down:hover,
scrollbar.horizontal .button.down:hover {
    box-shadow: inset 1px 0 shade(mix(@scrollbar_slider, @scrollbar_trough, 0.6), 0.93);
}

scrollbar button,
scrollbar .button,
scrollbar button:hover,
scrollbar .button:hover {
    color: @theme_fg_color;
}

scrollbar button:disabled,
scrollbar .button:disabled {
    color: @insensitive_fg_color;
}

scrollbar button:hover:active,
scrollbar .button:hover:active {
    color: @theme_fg_color;
}

scrollbar.vertical slider,
scrollbar.vertical .slider {
    min-width: 13px;
    min-height: 42px;
    margin: 0px -1px 0px -1px;
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    min-width: 42px;
    min-height: 14px;
    margin: -1px 0px -1px 0px;
}

scrollbar slider,
scrollbar .slider {
    background-color: @scrollbar_slider_bg_color;
    background-image: none;
    border-radius: 0;
    border-style: solid;
    border-image: none;
    border-color: shade(@scrollbar_slider_bg_color, 0.95);
    border-width: 1px;
}

scrollbar slider:hover,
scrollbar .slider:hover {
    background-color: @scrollbar_slider_hover_bg_color;
}

scrollbar slider:disabled,
scrollbar .slider:disabled {
    background-color: shade(@scrollbar_slider_bg_color, 0.85);
    border-color: shade(@scrollbar_slider_bg_color, 0.75);
}

scrollbar.vertical.fine-tune slider:hover:active,
scrollbar.vertical.fine-tune .slider:hover:active {
    background-image: linear-gradient(to bottom,
                                      shade(@scrollbar_slider_hover_bg_color, 1.00),
                                      shade(@scrollbar_slider_bg_color, 0.94));
    border-color: shade(@scrollbar_slider_bg_color, 0.95);
}

scrollbar.horizontal.fine-tune slider:hover:active,
scrollbar.horizontal.fine-tune .slider:hover:active {
    background-image: linear-gradient(to right,
                                      shade(@scrollbar_slider_hover_bg_color, 1.00),
                                      shade(@scrollbar_slider_bg_color, 0.94));
    border-color: shade(@scrollbar_slider_bg_color, 0.95);
}

/*******************
 * scrolled window *
 *******************/
.ubuntu-online-accounts.frame,
scrolledwindow.frame {
    border-top-color: shade (@bg_color, 0.84);
    border-right-color: shade (@bg_color, 0.76);
    border-bottom-color: shade (@bg_color, 0.86);
    border-left-color: shade (@bg_color, 0.76);
    border-radius: 0;
    border-style: solid;
}

.ubuntu-online-accounts.frame {
    border-top-width: 0;
}

scrolledwindow junction { /* the small square between scrollbars!!! */
	background-image: none;
	background-color: @theme_bg_color;
	border-width: 0;
	border-radius: 0;
	border-image: none;
	box-shadow: none;
}

/*************
 * separator *
 *************/
separator,
.separator {
    border-width: 1px;
    border-style: solid;
    border-image: none;
    border-color: shade (@bg_color, 0.92);
    border-bottom-color: alpha (shade (@bg_color, 1.26), 0.6);
    border-right-color: alpha (shade (@bg_color, 1.26), 0.6);
}

treeview.view separator,
treeview.view.separator,
treeview separator,
separator,
separator:hover,
.separator,
.separator:hover {
    color: shade (@bg_color, 0.92);
}

/*Keep treeviews from jumping, separators drawn at 0 by default until hovered*/
treeview.view.separator {
    min-height: 2px;
}

separator.horizontal {
    border-width: 1px 0 1px 0;
}

separator.vertical {
    border-width: 0 1px 0 1px;
}

combobox separator {
/*    -GtkWidget-wide-separators: true; deprecated */
    -GtkWidget-horizontal-separator: 0;
    -GtkWidget-vertical-separator: 0;
}

button separator {
    border-color: shade (@button_bg_color, 0.9);
    border-bottom-color: alpha (shade (@bg_color, 1.26), 0.6);
    border-right-color: alpha (shade (@bg_color, 1.26), 0.6);
}

button separator:disabled {
    border-color: shade (@button_insensitive_bg_color, 0.96);
    border-bottom-color: alpha (shade (@bg_color, 1.26), 0.3);
    border-right-color: alpha (shade (@bg_color, 1.26), 0.3);
}

treemenu menuitem separator,
toolbar headerbar menuitem separator,
toolbutton menuitem separator,
.primary-toolbar:not(.libreoffice-toolbar) button menuitem separator,
headerbar button menuitem separator,
menuitem separator {
    border-color: shade (@dark_bg_color, 0.99);
    border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
    border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
}

toolbar menuitem separator,
combobox menuitem separator {
    border-color: shade (@bg_color, 0.92);
    border-bottom-color: alpha (shade (@bg_color, 1.26), 0.6);
    border-right-color: alpha (shade (@bg_color, 1.26), 0.6);
}

/***********
 * sidebar *
 ***********/

.sidebar {
    background-color: shade (@bg_color, 0.98);
}

placessidebar.sidebar .view,
stacksidebar.sidebar viewport {
    background-color: shade (@bg_color, 0.98);
    color: @fg_color;
    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.04);
}

placessidebar.sidebar:backdrop,
stacksidebar.sidebar viewport:backdrop {
    color: mix (@fg_color, shade (@bg_color, 0.95), 0.2);
    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02);
}

placessidebar.sidebar row.activatable.sidebar-row:selected,
stacksidebar.sidebar viewport row:selected {
    color: @selected_fg_color;
    text-shadow: 0 1px shade (@selected_bg_color, 0.7);
}

placessidebar.sidebar row.activatable.sidebar-row:selected:backdrop,
stacksidebar.sidebar viewport row:selected:backdrop {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (shade (@bg_color, 0.95), 0.94)),
                                     to (shade (shade (@bg_color, 0.95), 0.86)));
    border-top-color: shade (shade (@bg_color, 0.95), 0.88);
    color: @fg_color;
    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96);
}

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

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

placessidebar.sidebar.frame row.activatable.sidebar-row revealer.sidebar-revealer button.image-button.sidebar-button {
    background-color: transparent;
    background-image: none;
    border-image:none;
    box-shadow: none;
    padding: 4px 12px 4px 0px;
}

/***************
 * filechooser *
 ***************/

filechooser placessidebar.frame.sidebar {
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    border-color: @borders;
}

filechooser revealer #pathbarbox {
    background-color: @theme_bg_color;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: @borders;
}

/**************
 * spinbutton *
 **************/

spinbutton,
spinbutton:focus,
spinbutton:backdrop {
    border-color: alpha (shade (@bg_color, 0.6), 0.22);
    border-width: 1px;
    border-style: solid;
    border-radius: 7px;
    padding: 0px;
}

spinbutton:disabled {
    background-color: @insensitive_bg_color;
    background-image: none;
    border-color: alpha (shade (@bg_color, 0.6), 0.22);
}

spinbutton button,
spinbutton button:focus,
spinbutton button:active,
spinbutton button:hover,
spinbutton button:focus:active,
spinbutton button:backdrop,
spinbutton button:active:backdrop,
spinbutton button:disabled,
row.activatable spinbutton button,
row.activatable spinbutton button:focus,
row.activatable spinbutton button:active,
row.activatable spinbutton button:hover,
row.activatable spinbutton button:focus:active,
row.activatable spinbutton button:backdrop,
row.activatable spinbutton button:active:backdrop,
row.activatable spinbutton button:disabled {
    border-style: none;
    border-image: none;
    border-radius: 0px;
    box-shadow: inset 1px 0 @inset_dark_color;
}

spinbutton button,
spinbutton button:focus,
row.activatable spinbutton button,
row.activatable spinbutton button:focus {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@button_bg_color, 1.08)),
                                     color-stop (0.5, @button_bg_color),
                                     to (shade (@button_bg_color, 0.94)));
    background-color: transparent;
    color: @fg_color;
}

spinbutton button:hover,
row.activatable spinbutton button:hover {
    background-color: transparent;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@button_bg_color, 1.12)),
                                     color-stop (0.5, @button_bg_color),
                                     to (shade (@button_bg_color, 0.96)));
    color: @fg_color;
}

spinbutton button:active,
row.activatable spinbutton button:active {
    background-image: -gtk-gradient (radial, center center, 0.0, center center, 0.5,
                                     from (alpha (@selected_bg_color, 0.2)),
                                     to (alpha (@selected_bg_color, 0.0)));
    background-color: transparent;
}

spinbutton button:disabled,
row.activatable spinbutton button:disabled {
    background-image: none;
    color: shade (@bg_color, 0.66);
    -gtk-icon-shadow: none;
}

spinbutton button:first-child,
row.activatable spinbutton button:first-child {
    border-radius: 0px;
}

spinbutton button:last-child,
row.activatable spinbutton button:last-child,
spinbutton button:last-child:active:last-child,
row.activatable spinbutton button:active:last-child {
    border-radius: 0 7px 7px 0;
}

spinbutton button:dir(rtl) {
    box-shadow: inset -1px 0 @inset_dark_color;
}

spinbutton.horizontal entry,
spinbutton.horizontal entry:focus,
spinbutton.horizontal entry:backdrop,
row.activatable spinbutton.horizontal entry,
row.activatable spinbutton.horizontal entry:focus,
row.activatable spinbutton.horizontal entry:backdrop {
    padding: 5px 10px 5px 4px;
    border-image:none;
    border-style: none;
    border-radius: 7px 0px 0px 7px;
    box-shadow: inset 1px 0 @inset_dark_color;
}

spinbutton.horizontal entry:disabled,
spinbutton.horizontal entry:backdrop:disabled,
row.activatable spinbutton.horizontal entry:disabled,
row.activatable spinbutton.horizontal entry:backdrop:disabled,
stack box.vertical.linked spinbutton.horizontal entry:disabled,
stack box.vertical.linked spinbutton.horizontal entry:backdrop:disabled {
    background-color: @insensitive_bg_color;
}

spinbutton.vertical entry,
spinbutton.vertical entry:focus,
spinbutton.vertical entry:backdrop {
    padding: 6px 4px 6px 2px;
    border-image:none;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: alpha (shade (@bg_color, 0.6), 0.22);
    border-radius: 0px;
}

spinbutton.vertical button,
spinbutton.vertical button:focus,
spinbutton.vertical button:backdrop {
    border-color: alpha (shade (@bg_color, 0.6), 0.22);
    border-width: 0px;
    border-style: solid;
    padding: 5px;
    color: @theme_fg_color;
}

spinbutton.vertical button:disabled {
    color: @insensitive_fg_color;
    -gtk-icon-shadow: none;
}

spinbutton.vertical button,
spinbutton.vertical button:active {
    border-radius: 7px 7px 0 0;
}

spinbutton.vertical button:last-child,
spinbutton.vertical button:active:last-child {
    border-radius: 0 0 7px 7px;
}

.vertical.linked > spinbutton.horizontal,
.vertical.linked > spinbutton.horizontal:focus,
.vertical.linked > spinbutton.horizontal:backdrop {
    border-color: alpha (shade (@bg_color, 0.6), 0.22);
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-radius: 0px;
    box-shadow: inset -1px -1px shade (@bg_color, 0.84);
}

.vertical.linked > spinbutton.horizontal button,
.vertical.linked > spinbutton.horizontal:focus button,
.vertical.linked > spinbutton.horizontal:backdrop button,
.vertical.linked > spinbutton.horizontal entry,
.vertical.linked > spinbutton.horizontal:focus entry,
.vertical.linked > spinbutton.horizontal:backdrop entry,
stack box.vertical.linked spinbutton.horizontal entry,
stack box.vertical.linked spinbutton.horizontal entry:focus,
stack box.vertical.linked spinbutton.horizontal entry:backdrop  {
    box-shadow: inset 1px 0 @inset_dark_color;
    border-radius: 0px;
}

spinbutton.horizontal > entry:focus,
spinbutton.vertical > entry:focus {
    border-color: alpha(@borders, 0.1);
    box-shadow: inset  0px  1px 0 0 shade (@theme_selected_bg_color, 1.3),
                inset  1px  0px 0 0 shade (@theme_selected_bg_color, 1.3),
                inset -1px  0px 0 0 shade (@theme_selected_bg_color, 1.3),
                inset  0px -1px 0 0 shade (@theme_selected_bg_color, 1.3);
}

/***********
 * spinner *
 ***********/

@keyframes spin {
    to { -gtk-icon-transform: rotate(1turn); }
}

spinner {
    -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
    color: @selected_bg_color;
	background: none;
    opacity: 0;
}

spinner:checked {
    animation: spin 1s linear infinite;
    opacity: 1;
}

spinner:checked:backdrop {
    color: @backdrop_fg_color;
}

spinner:checked:disabled {
    opacity: 0.5;
}

/*************
 * statusbar *
 *************/
statusbar {
}

/**********
 * switch *
 **********/

switch {
    padding: 2px;
    border-radius: 6px;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#cecece),
                                     to (#e8e8e8));
    color: @fg_color;
}

headerbar switch {
    padding: 2px;
    border-radius: 6px;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (#4E4C46),
                                     to (#5B5A56));
    color: @dark_fg_color;
}

switch:checked {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 0.93)),
                                     to (shade (@selected_bg_color, 0.99)));
    color: @selected_fg_color;
}

switch:focus,
switch:focus slider {
    outline: 2px solid @focus_color;
    outline-offset: -2px;
    -gtk-outline-radius: 6px;
}

switch:backdrop,
switch:disabled {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@bg_color, 0.93)),
                                     to (shade (@bg_color, 0.99)));
    color: shade (@bg_color, 0.6);
}

headerbar switch:backdrop,
headerbar switch:disabled {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 0.93)),
                                     to (shade (@dark_bg_color, 0.99)));
    color: shade (@dark_fg_color, 0.6);
}

headerbar switch:checked,
headerbar switch:checked:backdrop {
    color: shade (@dark_fg_color, 1.0);
}

switch slider,
switch:backdrop slider {
    border-radius: 6px;
    border-style: solid;
    border-width: 1px;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@button_bg_color, 1.08)),
                                     color-stop (0.5, @button_bg_color),
                                     to (shade (@button_bg_color, 0.94)));
}

headerbar switch slider,
headerbar switch:backdrop slider {
    border-radius: 6px;
    border-style: solid;
    border-width: 1px;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_slider_bg_color, 1.08)),
                                     color-stop (0.5, @dark_slider_bg_color),
                                     to (shade (@dark_slider_bg_color, 0.94)));
}

/*
switch:backdrop slider {
    background-image: none;
    background-color: @dark_bg_color;
    color: @backdrop_fg_color;
}
*/
/*************
 * headerbar *
 *************/

headerbar {
    padding: 2px 6px;
}

/*
 * Header Bars
 *
 * The following rules only style header bars when they are used as a window's
 * titlebar widget (i.e., they have .titlebar set as well).
 *
 * Some applications reuse their header bar as a primary toolbar on desktops
 * that prefer showing traditional title bars. The rules for those are further
 * down grouped with normal toolbars.
 */
.titlebar,
headerbar {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (@dark_bg_color));
    border-color: shade (@dark_bg_color, 1.5);
    border-style: solid;
    border-width: 1px 0 0 0;
    border-radius: 7px 7px 0 0;
    color: @dark_fg_color;
    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
    box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
}

.titlebar .title,
headerbar .title {
    font-weight: bold;
}

.titlebar .subtitle,
headerbar .subtitle {
    font-size: smaller;
    opacity: 0.5;
}

.titlebar:backdrop {
    color: @backdrop_fg_color;
    background-image: none;
    background-color: @dark_bg_color;
    border-top-color: @dark_bg_color;
    box-shadow: inset 0 1px shade (@dark_bg_color, 1.2);
}

.solid-csd .titlebar,
.maximized .titlebar {
    border-radius: 0;
    border: none;
}

.maximized .titlebar.toolbar-mode {
    box-shadow: none;
}

.titlebar button.titlebutton {
    background-clip: padding-box;
    border: 1px solid #383734;
    color: #3d3c37;
    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 0;
    box-shadow: none;
    background-image: linear-gradient(to top, #5a5955, #75746d 50%, #8e8d88);
}

.titlebar button.titlebutton.close {
    color: #323112;
    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.25);
    background-image: linear-gradient(to top, #de4c19, #e55e30 50%, #f58d6e);
}

.titlebar button.titlebutton.close:hover {
    background-image: linear-gradient(to top, #e24f1b, #f17750 50%, #fba992);
}

.titlebar button.titlebutton:hover,
.titlebar button.titlebutton:backdrop:hover {
    background-image: linear-gradient(to top, #969696, #bdbdbd 50%, #cacaca);
}

.titlebar button.titlebutton:active {
    -gtk-icon-shadow: none;
    background-image: linear-gradient(to top, #77766f, #74736c);
}

.titlebar button.titlebutton.close:active {
    background-image: linear-gradient(to top, #ec6e44, #e76b41);
}

.titlebar button.titlebutton:backdrop {
    color: #3d3c37;
    -gtk-icon-shadow: none;
    background-image: linear-gradient(to top, #605f59, #5b5a54);
}

/* don't use regular close button from icon themes */
.titlebar button.titlebutton.close image {
    -gtk-icon-style: symbolic;
}

/* fixed half backed implementation of regular icons in headerbar */
/* fixes https://github.com/flexiondotorg/ubuntu-mate-themes/issues/51 */
.titlebar button.titlebutton.toggle.popup,
headerbar button.titlebutton.toggle.popup {
    background: transparent;
    color: @dark_fg_color;
    border-width: 1px;
    border-image-width: 10px 12px 10px 12px;
    border-image-slice: 10 12 10 12;
    border-image-repeat: stretch;
    border-image-source: -gtk-scaled(url("assets/button-toolbar.png"),
                                     url("assets/button-toolbar@2.png"));
    padding: 5px 6px;
}

.titlebar button.titlebutton.toggle.popup:hover,
headerbar button.titlebutton.toggle.popup:hover,
.titlebar button.titlebutton.toggle.popup:checked,
headerbar button.titlebutton.toggle.popup:checked {
    background: transparent;
    color: @dark_fg_color;
    border-width: 1px;
    border-image-width: 10px 12px 10px 12px;
    border-image-slice: 10 12 10 12;
    border-image-repeat: stretch;
    border-image-source: -gtk-scaled(url("assets/backdrop-button-toolbar.png"),
                                     url("assets/backdrop-button-toolbar@2.png"));
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.2)),
                                     to (shade (@dark_bg_color, 1.1)));
    padding: 5px 6px;
}

headerbar.titlebar entry,
headerbar.titlebar button:not(.titlebutton) {
    padding: 5px 6px;
}

/***************************************
 * Window Decorations and window-frame *
 ***************************************/

/* workaround to avoid unwanted black frames if switching compositor on/off
   for none csd windows, eg. menus from mate-panel */
.background decoration  {
    box-shadow: none;
}

.background.csd decoration {
    border-radius: 10px 10px 0 0;
    border-width: 0px;
    box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.23);
    /* this is used for the resize cursor area */
    margin: 10px;
}

decoration:backdrop {
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.tiled decoration {
     border-radius: 0;
}

.csd.popup decoration {
     box-shadow: none;
}

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

.solid-csd decoration {
    border-radius: 0;
    background-color: @fg_color;
    border: 1px solid darker(@fg_color);
    box-shadow: none;
    margin: 0px;
}

.csd.popup decoration {
    border-style: none;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13);
}

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

messagedialog.csd decoration {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13);
}

/***********
 * toolbar *
 ***********/
toolbar {
    border-style: none;
    padding: 0px;

    background-color: @bg_color;
    color: @fg_color;
    text-shadow: none;
}

toolbar:backdrop {
    color: @backdrop_fg_color;
}

/*******************
 * primary-toolbar *
 *******************/
.primary-toolbar:not(.libreoffice-toolbar),
toolbar.primary-toolbar:not(.libreoffice-toolbar),
.primary-toolbar:not(.libreoffice-toolbar) toolbar, /* eom */
headerbar,
.maximized .titlebar.toolbar-mode:not(:backdrop) {
    -GtkWidget-window-dragging: true;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 0.96)),
                                     to (shade (@dark_bg_color, 1.4)));
    border-bottom-color: shade (@dark_bg_color, 1.1);
    border-top-color: shade (@dark_bg_color, 1.09);
    border-style: solid;
    border-width: 1px 0 1px 0;
    border-radius: 0;
    color: @dark_fg_color;
    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
    box-shadow: inset 0 1px shade (@dark_bg_color, 0.94);
}

.maximized .titlebar.toolbar-mode:not(:backdrop) {
    border-width: 0;
}

.primary-toolbar:not(.libreoffice-toolbar):backdrop,
toolbar.primary-toolbar:not(.libreoffice-toolbar):backdrop,
headerbar:backdrop {
    background-image: none;
    background-color: @dark_bg_color;
    box-shadow: none;
    border-top-color: @dark_bg_color;
    border-bottom-color: shade (@dark_bg_color, 0.9);

    color: @backdrop_dark_fg_color;
}

.primary-toolbar:not(.libreoffice-toolbar) :disabled,
toolbar.primary-toolbar:not(.libreoffice-toolbar) :disabled,
headerbar :disabled {
    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
}

headerbar switch:disabled {
    text-shadow: none;
}

.primary-toolbar:not(.libreoffice-toolbar) button,
.primary-toolbar:not(.libreoffice-toolbar) button.flat,
headerbar button,
.primary-toolbar:not(.libreoffice-toolbar) button.flat:hover {
    background: transparent;
    color: @dark_fg_color;
    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
    border-image-source: -gtk-scaled(url("assets/button-toolbar.png"),
                                     url("assets/button-toolbar@2.png"));
    padding: 5px;
}

headerbar button {
    padding: 9px;
}

.primary-toolbar:not(.libreoffice-toolbar) button.flat {
    border-image-source: none;
    background: transparent;
}

.primary-toolbar:not(.libreoffice-toolbar) button:focus,
headerbar button:focus,
headerbar button:hover:focus,
headerbar button:hover:backdrop {
    border-image-source: -gtk-scaled(url("assets/button-toolbar-focused.png"),
                                     url("assets/button-toolbar-focused@2.png"));
}

.primary-toolbar:not(.libreoffice-toolbar) button:active,
.primary-toolbar:not(.libreoffice-toolbar) button:checked,
headerbar button:active,
headerbar button:checked {
    border-image-source: -gtk-scaled(url("assets/button-toolbar-active.png"),
                                     url("assets/button-toolbar-active@2.png"));
}

.primary-toolbar:not(.libreoffice-toolbar) button:active:focus,
.primary-toolbar:not(.libreoffice-toolbar) button:checked:focus,
headerbar button:active:focus,
headerbar button:checked:focus {
    border-image-source: -gtk-scaled(url("assets/button-toolbar-active-focused.png"),
                                     url("assets/button-toolbar-active-focused@2.png"));
}

.primary-toolbar:not(.libreoffice-toolbar) button:backdrop,
headerbar button:backdrop {
    background-color: transparent;
    color: @backdrop_dark_fg_color;
    text-shadow: 0 -1px shade (@dark_bg_color, 0.9);
    border-image-source: -gtk-scaled(url("assets/backdrop-button-toolbar.png"),
                                     url("assets/backdrop-button-toolbar@2.png"));
}

.primary-toolbar:not(.libreoffice-toolbar) button.flat:backdrop {
    border-image-source: none;
}

.primary-toolbar:not(.libreoffice-toolbar) button:active:backdrop,
.primary-toolbar:not(.libreoffice-toolbar) button:checked:backdrop,
headerbar button:active:backdrop,
headerbar button:checked:backdrop {
    border-image-source: -gtk-scaled(url("assets/backdrop-button-toolbar-active.png"),
                                     url("assets/backdrop-button-toolbar-active@2.png"));
}

.primary-toolbar:not(.libreoffice-toolbar) button:hover,
.primary-toolbar:not(.libreoffice-toolbar) button:checked,
headerbar button:hover,
headerbar button:checked {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.2)),
                                     to (shade (@dark_bg_color, 1.1)));
    border-image-source: -gtk-scaled(url("assets/backdrop-button-toolbar.png"),
                                     url("assets/backdrop-button-toolbar@2.png"));
}

/*
headerbar button:hover {
    border-image: none;
}
*/

/* hack for yelp, https://github.com/flexiondotorg/ubuntu-mate-themes/issues/38 */
/* imo a bug in yelp button, seems that 'border-image: none;' from previous setting
   does not work */

headerbar.primary-toolbar.toolbar button:hover {
    border-image-slice: 10 12 10 12;
}

.primary-toolbar:not(.libreoffice-toolbar) button:active,
headerbar button:active {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 0.95)),
                                     to (shade (@dark_bg_color, 1.0)));
    text-shadow: 0 -1px shade (@dark_bg_color, 0.6);
}

.primary-toolbar:not(.libreoffice-toolbar) button:checked:disabled,
.primary-toolbar:not(.libreoffice-toolbar) button:disabled,
headerbar button:checked:disabled,
headerbar button:disabled {
    text-shadow: none;
}

.primary-toolbar:not(.libreoffice-toolbar) button:disabled,
headerbar button:disabled,
headerbar button:disabled:backdrop {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.01)),
                                     to (shade (@dark_bg_color, 0.99)));
    border-image-source: -gtk-scaled(url("assets/button-toolbar.png"),
                                     url("assets/button-toolbar@2.png"));
}

/* override previous setting to fix menulibre headerbar button */
headerbar button:disabled,
headerbar.titlebar button:disabled,
headerbar button:disabled:backdrop,
headerbar.titlebar button:disabled:backdrop,
headerbar button:hover:backdrop {
    background-color: transparent;
}

.primary-toolbar:not(.libreoffice-toolbar) button.flat:disabled {
    background-image: none;
    border-image-source: inherit;
}

.primary-toolbar:not(.libreoffice-toolbar) button:checked:disabled,
headerbar button:checked:disabled {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 0.94)),
                                     to (shade (@dark_bg_color, 1.02)));
    border-image-source: -gtk-scaled(url("assets/button-toolbar.png"),
                                     url("assets/button-toolbar@2.png"));
}

.primary-toolbar:not(.libreoffice-toolbar) toolitem separator,
.primary-toolbar:not(.libreoffice-toolbar) separator,
.primary-toolbar:not(.libreoffice-toolbar) separator:disabled,
headerbar toolitem separator,
headerbar separator,
headerbar separator:disabled {
    border-color: alpha (shade (@dark_bg_color, 0.94), 0.35);
    border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
    border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
}

/* inline-toolbar */
toolbar.inline-toolbar {
    -GtkToolbar-button-relief: normal;

    border-right-color: shade (@bg_color, 0.86);
    border-bottom-color: shade (@bg_color, 0.88);
    border-left-color: shade (@bg_color, 0.86);

    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (#f2f1ef, 0.93)),
                                     color-stop (0.08, #f2f1ef),
                                     to (#ffffff));
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-radius: 3px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 3px 4px 4px 4px;
}

toolbar.inline-toolbar button {
    padding: 4px;

    -gtk-icon-shadow: 0 1px shade (@bg_color, 1.16);
}

/* Middle button */
toolbar.inline-toolbar button,
toolbar.inline-toolbar button:active,
toolbar.inline-toolbar button:focus,
toolbar.inline-toolbar button:focus:active,
toolbar.inline-toolbar button:disabled,
toolbar.inline-toolbar button:backdrop,
toolbar.inline-toolbar button:backdrop:disabled,
toolbar.inline-toolbar toolbutton button,
toolbar.inline-toolbar toolbutton button:active,
toolbar.inline-toolbar toolbutton button:focus,
toolbar.inline-toolbar toolbutton button:focus:active,
toolbar.inline-toolbar toolbutton button:disabled,
toolbar.inline-toolbar toolbutton button:backdrop,
toolbar.inline-toolbar toolbutton button:backdrop:disabled {
    border-right-width: 0;
    border-left-width: 0;
    border-image-width: 10px 0 10px 0;
    border-radius: 0;
}

/* Leftmost button */
toolbar.inline-toolbar button:first-child,
toolbar.inline-toolbar button:active:first-child,
toolbar.inline-toolbar button:focus:first-child,
toolbar.inline-toolbar button:focus:active:first-child,
toolbar.inline-toolbar button:disabled:first-child,
toolbar.inline-toolbar button:backdrop:first-child,
toolbar.inline-toolbar button:backdrop:disabled:first-child,
toolbar.inline-toolbar toolbutton button:first-child,
toolbar.inline-toolbar toolbutton button:active:first-child,
toolbar.inline-toolbar toolbutton button:focus:first-child,
toolbar.inline-toolbar toolbutton button:focus:active:first-child,
toolbar.inline-toolbar toolbutton button:disabled:first-child,
toolbar.inline-toolbar toolbutton button:backdrop:first-child,
toolbar.inline-toolbar toolbutton button:backdrop:disabled:first-child {
    border-left-width: 1px;
    border-right-width: 0;
    border-image-width: 10px 0 10px 12px;
    border-radius: 8px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/* Rightmost button */
toolbar.inline-toolbar button:last-child,
toolbar.inline-toolbar button:active:last-child,
toolbar.inline-toolbar button:focus:last-child,
toolbar.inline-toolbar button:focus:active:last-child,
toolbar.inline-toolbar button:disabled:last-child,
toolbar.inline-toolbar button:backdrop:last-child,
toolbar.inline-toolbar button:backdrop:disabled:last-child,
toolbar.inline-toolbar toolbutton button:last-child,
toolbar.inline-toolbar toolbutton button:active:last-child,
toolbar.inline-toolbar toolbutton button:focus:last-child,
toolbar.inline-toolbar toolbutton button:focus:active:last-child,
toolbar.inline-toolbar toolbutton button:disabled:last-child,
toolbar.inline-toolbar toolbutton button:backdrop:last-child,
toolbar.inline-toolbar toolbutton button:backdrop:disabled:last-child {
    border-left-width: 0;
    border-right-width: 1px;
    border-image-width: 10px 12px 10px 0;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

/* Single button */
toolbar.inline-toolbar button:only-child,
toolbar.inline-toolbar button:active:only-child,
toolbar.inline-toolbar button:focus:only-child,
toolbar.inline-toolbar button:focus:active:only-child,
toolbar.inline-toolbar button:disabled:only-child,
toolbar.inline-toolbar button:backdrop:only-child,
toolbar.inline-toolbar button:backdrop:disabled:only-child,
toolbar.inline-toolbar toolbutton button:only-child,
toolbar.inline-toolbar toolbutton button:active:only-child,
toolbar.inline-toolbar toolbutton button:focus:only-child,
toolbar.inline-toolbar toolbutton button:focus:active:only-child,
toolbar.inline-toolbar toolbutton button:disabled:only-child,
toolbar.inline-toolbar toolbutton button:backdrop:only-child,
toolbar.inline-toolbar toolbutton button:backdrop:disabled:only-child {
    border-right-width: 1px;
    border-left-width: 1px;
    border-image-width: 10px 12px 10px 12px;
    border-radius: 8px;
}

/***********
 * tooltip *
 ***********/

tooltip,
.tooltip {
	border-radius: 2px;
	border-width: 1px;
	border-color: shade(@dark_bg_color, 1.8);
	border-style: solid;
}

tooltip.background,
.tooltip.background {
    background-color: @tooltip_bg_color;
    background-clip: padding-box;
    color: @tooltip_fg_color;
}

tooltip label,
.tooltip label {
    color: @tooltip_fg_color;
    text-shadow: 1px 1px alpha (#000000, 0.8);
	padding: 2px;
}

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: shade(@dark_bg_color, 1.8);
	border-radius: 2px;
}

/************
 * treeview *
 ************/
treeview.dnd {
    border-color: shade (@selected_bg_color, 1.12);
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
}

treeview entry {
    background-image: none;
}

treeview,
treeview.view {
	outline-color: alpha(currentColor, 0.6);
}

/* ie. ubiquity */
scrolledwindow.frame > treeview.view > check {
    background-color: transparent;
}

/************
 * viewport *
 ************/
viewport.frame {
    border-width: 0;
}

/************
 * listbox  *
 ************/
list row.activatable {
    border-image: none;
    border-style: none;
    border-radius: 0;
    background-image: none;
}

list row.activatable:selected {
    text-shadow: none;
}

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

.osd,
.background.osd {
	color: @osd_fg;
	background-image: none;
	background-color: @osd_bg;
	border-radius:20px;
}

overlay.osd {
    background-color: transparent;
}

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

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

.osd button,
.osd button:hover,
.osd button:checked,
button.osd,
button.osd:hover,
button.osd:checked {
    background-color: shade(@osd_bg, 1.10);
    border-radius: 5px;
    border-color: @osd_button_border;
}

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

.osd button:disabled,
button.osd:disabled {
    background-image: none;
    border-color: @osd_button_bg_insensitive;
    background-color: transparent;
    box-shadow: none;
    color: @osd_button_fg_insensitive;
}

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

.osd button,
.osd button:focus,
button.osd,
button.osd:focus {
    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: none;
    -gtk-icon-shadow: 0 -1px @osd_button_shadow;
}

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

.osd button:checked,
.osd button:checked:hover,
.osd button:checked:hover:active,
.osd button:hover:active,
.osd button:focus:hover:active,
.osd button.popup:checked,   /* GtkMenuButton */
button.osd:checked,
button.osd:checked:hover,
button.osd:checked:hover:active,
button.osd:hover:active,
button.osd:focus:hover:active,
button.osd.menu-button:checked {
    background-image: linear-gradient(to bottom,
                                      @osd_button_bg_active_a,
                                      @osd_button_bg_active_b 68%,
                                      @osd_button_bg_active_c);
    color: @osd_button_fg_active;
    text-shadow: none;
}

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

/* ie. gnome-weather */
.linked.stack-switcher.osd button {
    border-width: 1px 0 1px 0px;
    color: @osd_button_fg_hover;
    text-shadow: none;
}

.linked.stack-switcher.osd button:checked {
    color: shade(@theme_fg_color, 1.00);
}

.linked.stack-switcher.osd button:first-child {
    border-width: 1px 1px 1px 1px;
}

.linked.stack-switcher.osd button:last-child {
    border-width: 1px 1px 1px 0px;
}

.linked.stack-switcher.osd button:only-child {
    border-width: 1px;
}

/* ie. parole media-player */
/* previous/play/next */
.osd .horizontal .horizontal button {
    padding: 5px 8px;
}

.osd .horizontal .horizontal button:disabled {
    border-color: @osd_button_bg_disabled;
}

.osd .horizontal .horizontal label {
    padding: 5px 5px;
    background-color: transparent;
    background-image: linear-gradient(to bottom,
                                      @osd_button_bg_a,
                                      @osd_button_bg_b 68%,
                                      @osd_button_bg_c);
    border-color: @osd_button_bg_insensitive;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}

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

toolbar.osd button,
toolbar.osd button:hover,
toolbar.osd button:focus,
toolbar.osd button:focus:hover,
toolbar.osd button:focus:hover:active,
toolbar.osd button:hover:active,
toolbar.osd .linked button
toolbar.osd .linked button:hover,
toolbar.osd .linked button:hover:active,
toolbar.osd .linked button:focus,
toolbar.osd .linked button:focus:hover,
toolbar.osd .linked button:focus:hover:active,
toolbar.osd button.scale.flat.image-button {
    padding: 8px;
    border-width: 1px;
    border-radius: 5px;
}

toolbar.osd button:first-child,
toolbar.osd .linked button:first-child,
toolbar.osd .linked button:focus:hover:first-child,
toolbar.osd .linked button:focus:hover:active: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,
toolbar.osd .linked button:last-child,
toolbar.osd .linked button:focus:hover:last-child,
toolbar.osd .linked button:focus:hover:active:last-child {
    box-shadow: none;
    border-radius: 0 5px 5px 0;
    border-width: 1px 1px 1px 0;
}

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

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

/* used by gnome-settings-daemon's media-keys OSD
   and Epiphany */
.osd trough {
    background-color: @osd_trough_bg;
    border-width: 0;
}

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

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

.osd popover.background.scale-popup {
    color: @osd_fg;
    border-style: solid;
    border-width: 1px;
    border-color: shade (@theme_selected_bg_color, 0.8);
    border-radius: 4px;
    background-image: linear-gradient(to bottom,
                                      alpha(shade(@theme_selected_bg_color, 1.2), 0.7),
                                      alpha(shade(@theme_selected_bg_color, 0.95), 0.7));
    background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4);
}

.osd popover.background.scale-popup button.flat.image-button {
    background-image: linear-gradient(to bottom,
                                      @osd_button_bg_a,
                                      @osd_button_bg_b 68%,
                                      @osd_button_bg_c);
    border-radius: 4px;
    border-width: 1px;
    border-color: @osd_button_border;
    box-shadow: none;
    padding: 2px;
}

.osd popover.background.scale-popup button.flat.image-button:hover {
    background-image: linear-gradient(to bottom,
                                      @osd_button_bg_hover_a,
                                      @osd_button_bg_hover_b 68%,
                                      @osd_button_bg_hover_c);
    border-color: alpha(shade(@theme_selected_bg_color, 2.2), 0.8);
/*    -gtk-image-effect: highlight; */
}

.osd popover.background.scale-popup button.flat.image-button:disabled {
    background-image: none;
    background-color: transparent;
    border-image: none;
    border-color: transparent;
    box-shadow: none;
}

.osd progressbar,
progressbar .osd {
    padding: 0;
}

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

.osd .trough,
.osd progressbar trough,
progressbar .osd trough {
    padding: 0;
    border-image: none;
    border-style: none;
    border-width: 0;
    background-image: none;
    background-color: shade (@theme_fg_color, 0.6);
    border-radius: 2px;
}

.osd .progressbar,
.osd progressbar,
progressbar .osd {
	padding: 0;
	-progressbar-xspacing: 0;
	-progressbar-yspacing: 3px;
	-progressbar-min-horizontal-bar-height: 3px;
	border-style: none;
	background-color: shade(@osd_progressbar_background_b, 1.3);
	background-image: linear-gradient(to bottom,
	                                  @osd_progressbar_background_a,
	                                  @osd_progressbar_background_b);
	border-radius: 2px;
}

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

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

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

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

.osd scrollbar trough.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(#3D3E40, 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 > grid > spinbutton {
    color: @theme_selected_fg_color;
    text-shadow: 1px 1px alpha (#000000, 0.8);
}

.osd.popover spinbutton > button:hover,
.osd.popover spinbutton > button:active {
    background-image: linear-gradient(to bottom,
                                      alpha(shade(@theme_selected_bg_color, 1.2), 0.4),
                                      alpha(shade(@theme_selected_bg_color, 0.95), 0.4));
    background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4);
}

.osd.popover spinbutton.horizontal {
    border: 1px solid black;
    border-radius: 7px;
}

.osd.popover spinbutton.horizontal > entry {
    border-radius: 7px 0px 0px 7px;
    background-color: transparent;
    background-image: none;
}

.osd.popover spinbutton.horizontal > button {
    border-radius: 0px;
    border-image: none;
    border-style: none;
}

.osd.popover spinbutton.horizontal > button:first-child {
    border-radius: 0px;
    border-image: none;
}

.osd.popover spinbutton.horizontal > button:last-child {
    border-radius: 0px 7px 7px 0px;
    border-image: none;
}

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

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

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

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

/* 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;
}

/************
 * popover  *
 ************/

popover.background {
    background-clip: border-box;
    background-color: shade (@dark_bg_color, 1.08);
    border-radius: 5px;
    border: 1px solid darker(@bg_color);
    color: @dark_fg_color;
    box-shadow: 0 2px 3px @shadow_color;
    margin: 10px;
    padding: 2px;
}

popover.background:backdrop {
    box-shadow: none;
}

popover separator {
    background-color: shade (@theme_bg_color, 0.6);
    border: 0;
}

modelbutton.flat,
modelbutton.flat:checked,
modelbutton.flat:hover,
modelbutton.flat:active,
modelbutton.flat:disabled,
modelbutton.flat:backdrop {
    border-image: none;
    border: none;
    text-shadow: none;
    border-radius: 3px;
    padding: 5px;
}

modelbutton.flat:backdrop:hover {
    border: none;
    border-image: none;
    background: transparent;
    color: @fg_color;
}

modelbutton.flat:hover,
modelbutton.flat:backdrop:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.1)),
                                     to (shade (@selected_bg_color, 0.9)));
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@selected_bg_color, 0.7)),
                                 to (shade (@selected_bg_color, 0.7))) 1;
    color: @selected_fg_color;
    text-shadow: 0 -1px shade (@selected_bg_color, 0.7);
}

modelbutton.flat check,
modelbutton.flat check:hover,
modelbutton.flat check:checked,
modelbutton.flat radio,
modelbutton.flat radio:hover,
modelbutton.flat radio:checked {
    background-image: none;
    border: none;
    padding: 0px;
}

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.flat:disabled,
modelbutton.flat *:disabled {
    text-shadow: none;
    background: none;
}

.linked button.image-button.model,
.linked button.image-button.model:focus,
.linked button.image-button.model:first-child,
.linked button.image-button.model:focus:first-child,
.linked button.image-button.model:last-child,
.linked button.image-button.model:focus:last-child {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    border-image: none;
    border-style: none;
    box-shadow: none;
    border-radius: 6px;
}

/* middle button*/
.linked button.image-button.model,
.linked button.image-button.model:hover,
.linked button.image-button.model:hover:active,
.linked button.image-button.model:checked:hover,
.linked button.image-button.model:checked:hover:active {
    border-right-width: 0px;
    border-left-width:  0px;
    border-radius: 0;
}

.linked button.image-button.model,
.linked button.image-button.model:focus {
    box-shadow: inset  0px  1px shade (@theme_bg_color, 0.6),
                        inset  0px -1px shade (@theme_bg_color, 0.6);
}

.linked button.image-button.model:checked,
.linked button.image-button.model:hover,
.linked button.image-button.model:hover:active,
.linked button.image-button.model:checked:hover,
.linked button.image-button.model:checked:hover:active {
    box-shadow: inset 0 1px shade (@selected_bg_color, 1.16),
                        inset 0 -1px shade (@selected_bg_color, 0.96);
}

/* left button*/
.linked button.image-button.model:first-child,
.linked button.image-button.model:hover:first-child,
.linked button.image-button.model:hover:active:first-child,
.linked button.image-button.model:checked:hover:first-child,
.linked button.image-button.model:checked:hover:active:first-child {
    border-right-width: 0px;
    border-radius: 6px 0 0 6px;
}

.linked button.image-button.model:first-child,
.linked button.image-button.model:focus:first-child {
    box-shadow: inset  0px  1px shade (@theme_bg_color, 0.6),
                        inset  1px  0px shade (@theme_bg_color, 0.6),
                        inset -1px  0px shade (@theme_bg_color, 0.6),
                        inset  0px -1px shade (@theme_bg_color, 0.6);
}

/* right button*/
.linked button.image-button.model:last-child,
.linked button.image-button.model:hover:last-child,
.linked button.image-button.model:hover:active:last-child,
.linked button.image-button.model:checked:hover:last-child,
.linked button.image-button.model:checked:hover:active:last-child {
    border-left-width:  0px;
    border-radius: 0 6px 6px 0;
}

.linked button.image-button.model:last-child,
.linked button.image-button.model:focus:last-child {
    box-shadow: inset  0px  1px shade (@theme_bg_color, 0.6),
                        inset  1px  0px shade (@theme_bg_color, 0.6),
                        inset -1px  0px shade (@theme_bg_color, 0.6),
                        inset  0px -1px shade (@theme_bg_color, 0.6);
}

.linked button.image-button.model:checked:first-child,
.linked button.image-button.model:hover:first-child,
.linked button.image-button.model:hover:active:first-child,
.linked button.image-button.model:checked:hover:first-child,
.linked button.image-button.model:checked:hover:active:first-child,
.linked button.image-button.model:checked:last-child,
.linked button.image-button.model:hover:last-child,
.linked button.image-button.model:hover:active:last-child,
.linked button.image-button.model:checked:hover:last-child,
.linked button.image-button.model:checked:hover:active:last-child {
    box-shadow: inset 1px 0 shade (@selected_bg_color, 1.02),
                        inset -1px 0 shade (@selected_bg_color, 1.02),
                        inset 0 1px shade (@selected_bg_color, 1.16),
                        inset 0 -1px shade (@selected_bg_color, 0.96);
}


.linked button.image-button.model:checked,
.linked button.image-button.model:hover,
.linked button.image-button.model:hover:active,
.linked button.image-button.model:checked:hover,
.linked button.image-button.model:checked:hover:active {
    color: @selected_fg_color;
    text-shadow: 0 -1px shade (@selected_bg_color, 0.7);
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.1)),
                                     to (shade (@selected_bg_color, 0.9)));
    border-image: -gtk-gradient (linear, left top, left bottom,
                                 from (shade (@selected_bg_color, 0.7)),
                                 to (shade (@selected_bg_color, 0.7))) 1;
}

/* override theme_bg color */
popover button.default.text-button.suggested-action:disabled {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (shade(@dark_bg_color, 1.0)),
                                     to   (shade(@dark_bg_color, 1.0)));
}

popover button.default.text-button.suggested-action {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (shade(@dark_bg_color, 2.03)),
                                     to   (shade(@dark_bg_color, 1.17)));
    background-color: shade (@dark_bg_color, 1.2);
    color: @dark_fg_color;
    text-shadow: none;
    border-width: 0px;
    border-style: none;
    border-radius: 7px;
    border-image: none;
    box-shadow: inset  0px  1px shade (@theme_bg_color, 0.6),
                        inset  1px  0px shade (@theme_bg_color, 0.6),
                        inset -1px  0px shade (@theme_bg_color, 0.6),
                        inset  0px -1px shade (@theme_bg_color, 0.6);
}

popover button.default.text-button.suggested-action:hover {
    color: shade (@theme_selected_bg_color, 1.3);
    box-shadow: inset 1px 0 shade (@selected_bg_color, 1.02),
                        inset -1px 0 shade (@selected_bg_color, 1.02),
                        inset 0 1px shade (@selected_bg_color, 1.16),
                        inset 0 -1px shade (@selected_bg_color, 0.96);
}


/* Floating bars */
.floating-bar {
    background-color: @info_bg_color;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 1px;
    border-color: darker (@info_bg_color);
}

/*************
 * overshoot *
 *************/
overshoot.top {
    background: -gtk-gradient(radial, center top, 0, center top, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0)));
}

overshoot.right {
    background: -gtk-gradient(radial, right center, 0, right center, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0)));
}

overshoot.bottom {
    background: -gtk-gradient(radial, center bottom, 0, center bottom, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0)));
}

overshoot.left {
    background: -gtk-gradient(radial, left center, 0, left center, 0.7, from(shade(@bg_color, 0.92)), to(alpha(@bg_color, 0.0)));
}

/**************
 * undershoot *
 **************/
undershoot {
    background: none;
}

/**************
 * Calendar   *
 **************/

calendar {
	padding: 1px;
}

calendar.view {
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
    border-color: shade (@bg_color, 0.82);
	padding: 0px;
}

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

calendar button,
calendar button:disabled {
	background-image: none;
	background-color: transparent;
}

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;
}

/***************
 * weird hacks *
 ***************/

/* time admin */
button notebook {
    background-color: transparent;
}

/* override for headerbars to fix menulibre */
entry.search {
    text-shadow: none;
}

/*****************************************************************************
 * states [please keep this section at the end of the file (CSS precedence)] *
 *****************************************************************************/
.dim-label,
*:disabled {
    color: shade (@bg_color, 0.6);
    -gtk-icon-effect: dim;
}

*:selected,
*:selected:focus {
    background-color: alpha (@selected_bg_color, 0.9);

    color: @selected_fg_color;
}

*:selected:backdrop,
*:selected:focus:backdrop {
    background-color: alpha (@backdrop_selected_bg_color, 0.9);

    color: @backdrop_selected_fg_color;
}

*:link,
*:visited {
    color: #a7bb85; /* @link_color */
}
