/* ===================================================================
   ! Font
   ===================================================================*/
stage {
  font-family: Droid Sans, Sans-Serif;
  font-size: 9pt;
}

.cinnamon-link {
  color: #d64937;
  font-weight: normal;
}

.cinnamon-link:hover {
  color: #e0776a;
  text-decoration: underline;
}

.label-shadow {
  color: rgba(0, 0, 0, 0);
}

/* ===================================================================
   ! Tooltips
   ===================================================================*/
#Tooltip {
  border-image: url("background-assets/tooltip.svg") 4;
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 9pt;
  font-weight: normal;
  font-weight: normal;
  text-align: left;
  spacing: .3em;
}

/* ===================================================================
   ! Scrollbars
   ===================================================================*/
StScrollView.vfade {
  -st-vfade-offset: 0;
}

StScrollView.hfade {
  -st-hfade-offset: 0;
}

StScrollBar {
  padding: 3px;
  padding-right: 6px;
  min-width: 8px;
  min-height: 16px;
}

StScrollBar StBin#trough {
  background-color: transparent;
}

StScrollBar StButton#vhandle,
StScrollBar StButton#hhandle {
  border-image: url("widget-assets/scroll-handle.svg") 3;
}

StScrollBar StButton#vhandle:hover,
StScrollBar StButton#hhandle:hover,
StScrollBar StButton#vhandle:active,
StScrollBar StButton#hhandle:active,
StScrollBar StButton#vhandle:focus,
StScrollBar StButton#hhandle:focus {
  border-image: url("widget-assets/scroll-handle-hover.svg") 3;
}

/* ===================================================================
   ! Entries
   ===================================================================*/
.menu StEntry,
.modal-dialog StEntry,
#notification StEntry {
  background-gradient-direction: vertical;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  border: 0;
  border-width: 0;
  box-shadow: 0 0 transparent;
  border-radius: 0;
  border-image: url("widget-assets/entry.svg") 6;
  padding: 4px 8px 3px 8px;
  height: 22px;
  width: 220px;
  font-size: 10pt;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.4);
}

.popup-menu StEntry:focus, .popup-menu StEntry:active, .popup-menu StEntry:pressed,
.modal-dialog StEntry:focus,
.modal-dialog StEntry:active,
.modal-dialog StEntry:pressed,
#notification StEntry:focus,
#notification StEntry:active,
#notification StEntry:pressed {
  border-image: url("widget-assets/entry-focused.svg") 6;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  caret-color: rgba(255, 255, 255, 0.8);
  caret-size: 1px;
  selected-color: white;
  selection-background-color: #d64937;
}

.popup-menu StEntry StIcon,
.modal-dialog StEntry StIcon,
#notification StEntry StIcon {
  color: #888;
}

.popup-menu StEntry:focus > StIcon,
.popup-menu StEntry:active > StIcon,
.popup-menu StEntry:pressed > StIcon,
.modal-dialog StEntry:focus > StIcon,
.modal-dialog StEntry:active > StIcon,
.modal-dialog StEntry:pressed > StIcon,
#notification StEntry:focus > StIcon,
#notification StEntry:active > StIcon,
#notification StEntry:pressed > StIcon {
  color: #dcdcdc;
}

/* ===================================================================
   ! Switchers
   ===================================================================*/
.toggle-switch {
  width: 28px;
  height: 14px;
  background-size: contain;
}

.toggle-switch-us, .toggle-switch-intl {
  background-image: url("widget-assets/off.svg");
}

.toggle-switch-us:checked, .toggle-switch-intl:checked {
  background-image: url("widget-assets/on.svg");
}

/* ===================================================================
   ! Checkboxes + Radio buttons
   ===================================================================*/
.check-box CinnamonGenericContainer {
  spacing: .2em;
  min-height: 16px;
}

.check-box StLabel {
  padding-top: 1px;
}

.check-box StBin {
  width: 16px;
  height: 16px;
  background-image: url("widget-assets/check-box.svg");
}

.check-box:focus StBin {
  background-image: url("widget-assets/check-box-focused.svg");
}

.check-box:checked StBin {
  background-image: url("widget-assets/check-box-checked.svg");
}

.check-box:focus:checked {
  background-image: url("widget-assets/check-box-focused-checked.svg");
}

.radiobutton CinnamonGenericContainer {
  spacing: .2em;
  min-height: 16px;
}

.radiobutton StLabel {
  padding-top: 1px;
}

.radiobutton StBin {
  width: 16px;
  height: 16px;
  background-image: url("widget-assets/radiobutton.svg");
}

.radiobutton:focus StBin {
  background-image: url("widget-assets/radiobutton-focused.svg");
}

.radiobutton:checked StBin {
  background-image: url("widget-assets/radiobutton-checked.svg");
}

.radiobutton:focus:checked {
  background-image: url("widget-assets/radiobutton-focused-checked.svg");
}

/* ===================================================================
   ! Slider
   ===================================================================*/
.slider {
  -slider-height: 2px;
  -slider-background-color: transparent;
  -slider-border-color: transparent;
  -slider-active-background-color: #d64937;
  -slider-active-border-color: transparent;
  -slider-border-width: 2px;
  -slider-handle-radius: 4px;
  color: #dcdcdc;
  border-image: url("widget-assets/slider.svg") 9 6 8 8;
  border: 0 solid transparent;
  min-width: 15em;
  height: 16px;
}

.popup-menu-item:active .slider {
  -slider-handle-radius: 5px;
  color: white;
}

/* ===================================================================
   ! Separator
   ===================================================================*/
.separator {
  background-color: rgba(255, 255, 255, 0.1);
  height: 1px;
}

/* ===================================================================
   ! Popup Menus
   ===================================================================*/
.popup-menu {
  min-width: 100px;
}

.popup-menu-boxpointer {
  padding: 0;
  -arrow-background-color: #2d2d2d;
  -arrow-border-width: 1px;
  -arrow-border-color: #484848;
  -arrow-border-radius: 2px;
  -arrow-base: 16px;
  -arrow-rise: 8px;
  -boxpointer-gap: 2px;
}

.popup-menu .popup-menu-content {
  border-image: url("background-assets/popup-inside.svg") 9;
  padding: .7em 0;
  color: rgba(255, 255, 255, 0.8);
}

.popup-menu-icon, .popup-menu StIcon {
  icon-size: 16px;
  color: #dcdcdc;
}

.popup-menu-arrow {
  width: 10px;
  height: 10px;
  padding: 0;
}

.popup-menu-item {
  padding: .4em 1.3em;
  spacing: .8em;
}

.popup-menu-item:active {
  border-image: url("background-assets/hover.svg") 9;
  color: white;
}

.popup-menu-item:active .popup-menu-icon, .popup-menu-item:active StIcon {
  color: #fff;
}

.popup-menu-item:active .popup-menu-item-dot {
  background-image: url("widget-assets/check-dot-hover.svg");
  background-size: 10px;
  color: transparent;
}

.popup-menu-item:insensitive {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.1);
}

.popup-menu-item:insensitive .popup-menu-icon, .popup-menu-item:insensitive StIcon {
  color: #444;
}

.popup-menu-item-dot {
  background-image: url("widget-assets/check-dot.svg");
  background-size: 10px;
  color: transparent;
}

.popup-sub-menu {
  border-image: url("background-assets/submenu-bg.svg") 9;
  box-shadow: none;
  background-gradient-direction: none;
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.8);
}

.popup-sub-menu .popup-menu-item:active {
  border-image: url("background-assets/hover.svg") 9;
  color: white;
}

.popup-sub-menu .popup-slider-menu-item {
  border-image: url("widget-assets/slider--submenu.svg") 9 32 8 8;
}

.popup-submenu-menu-item:open {
  background-color: transparent;
}

.popup-combo-menu {
  border-image: url("background-assets/popup.svg") 9;
  padding: .8em .2em;
  color: rgba(255, 255, 255, 0.8);
}

.popup-separator-menu-item {
  background-color: rgba(255, 255, 255, 0.1);
  height: 1px;
}

.popup-slider-menu-item {
  -slider-height: 2px;
  -slider-background-color: transparent;
  -slider-border-color: transparent;
  -slider-active-background-color: #d64937;
  -slider-active-border-color: transparent;
  -slider-border-width: 2px;
  -slider-handle-radius: 4px;
  color: #dcdcdc;
  border-image: url("widget-assets/slider.svg") 9 6 8 8;
  border: 0 solid transparent;
  min-width: 15em;
  height: 16px;
}

.popup-menu-item:active .popup-slider-menu-item {
  -slider-handle-radius: 5px;
  color: white;
}

.popup-inactive-menu-item {
  color: rgba(255, 255, 255, 0.4);
}

/* used mainly for the notif-applet */
.popup-menu-item .popup-subtitle-menu-item {
  font-weight: bold;
  color: white;
}

.popup-device-menu-item {
  spacing: .5em;
}

.popup-device-menu-item .popup-inactive-menu-item {
  color: #f0ad4e;
}

/* ===================================================================
   ! Panel
   ===================================================================*/

#panel {
}

#panelLeft, #panelCenter {
    spacing: 4px;
}

/*---panel-edit-mode---*/
#panelLeft:dnd,
#panelCenter:dnd,
#panelRight:dnd {
}

.panel-top #panelLeft:dnd {
    border-image: url("panel-assets/DND-top-left.svg") 4;
}

.panel-top #panelCenter:dnd {
    border-image: url("panel-assets/DND-top-center.svg") 4;
}

.panel-top #panelRight:dnd {
    border-image: url("panel-assets/DND-top-right.svg") 4;
}

.panel-bottom #panelLeft:dnd {
    border-image: url("panel-assets/DND-bottom-left.svg") 4;
}

.panel-bottom #panelCenter:dnd {
    border-image: url("panel-assets/DND-bottom-center.svg") 4;
}

.panel-bottom #panelRight:dnd {
    border-image: url("panel-assets/DND-bottom-right.svg") 4;
}

#panelLeft:ltr {
    padding-right: 4px;
}

#panelLeft:rtl {
    padding-left: 4px;
}

#panelRight:ltr {
    padding-left: 0;
    spacing: 0;
}

#panelRight:rtl {
    padding-right: 0;
    spacing: 0;
}

.panel-top {
    border-image: url("panel-assets/panel-top.svg") 4;
    color: #dcdcdc;
    font-size: 9pt;
    height: 25px;
}

.panel-bottom {
    border-image: url("panel-assets/panel-bottom.svg") 4;
    color: #dcdcdc;
    font-size: 9pt;
    height: 25px;
}

.panel-status-button {
    -natural-hpadding: 4px;
    -minimum-hpadding: 4px;
    padding: 0 2px;
    font-weight: bold;
    color: #dcdcdc;
    height: 25px;
}

.panel-status-button:hover,
.panel-status-button:active {
}

.panel-top .panel-status-button:hover {
    border-image: url("panel-assets/top-item-hover.svg") 4;
}

.panel-bottom .panel-status-button:hover {
    border-image: url("panel-assets/bottom-item-hover.svg") 4;
}

.system-status-icon {
    icon-size: 16px;
    padding-left: 0;
    padding-right: 0;
    spacing: 0;
    margin: 0;
}

.panel-bottom .system-status-icon {
    padding-top: 1px;
}

.panel-bottom #appMenuIcon {
    padding-top: 1px;
}

#appMenu {
}

#appMenuIcon {
}

#iconLabelButton {
    color: #dcdcdc;
    padding: 0;
}

.panel-button #appMenuIcon {
    app-icon-bottom-clip: 0;
}

.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 0;
}

.panel-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 2px;
    font-weight: bold;
    color: #dcdcdc;
}

.panel-button:hover {
}

.panel-button:active,
.panel-button:focus {
}

.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow: rgba(0,0,0,0) 0 2px 2px;
}

.panel-menu {
}

.popup-menu-item-dot {
}
/* ===================================================================
   ! Expo view
   ===================================================================*/
.expo-background {
  background-color: rgba(34, 34, 34, 0.85);
  background-repeat: repeat;
}

.expo-workspace-thumbnail-frame {
  border: 5px transparent;
  border-image: url("expo-scale-assets/workspace-shadow.svg") 6;
}

.expo-workspace-thumbnail-frame#active {
  border: 5px transparent;
  border-image: url("expo-scale-assets/workspace-shadow.svg") 6;
}

.workspace-thumbnails {
  spacing: 26px;
  padding-left: 10px;
  padding-right: 9px;
}

/* This shades the workspace thumbnails */
.workspace-thumbnails .workspace-overview-background-shade {
  background-color: transparent;
}

.expo-workspaces-name-entry {
  border-image: url("expo-scale-assets/workspace-name.svg") 6;
  height: 15px;
  padding: 10px 12px;
  text-align: center;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
}

.expo-workspaces-name-entry#selected {
  border-image: url("expo-scale-assets/workspace-name-focused.svg") 6;
  color: white;
}

.expo-workspaces-name-entry:focus, .expo-workspaces-name-entry#selected:focus {
  border-image: url("expo-scale-assets/workspace-name-pressed.svg") 12;
  color: #d64937;
  selected-color: rgba(255, 255, 255, 0.8);
  caret-color: rgba(255, 255, 255, 0.8);
  caret-size: 1px;
  selection-background-color: #d64937;
}

.workspace-close-button {
  background-image: url("widget-assets/close.svg");
  background-size: 41px 61px;
  width: 41px;
  height: 61px;
  -cinnamon-close-overlap: 28px;
}

.workspace-add-button {
  border-image: url("expo-scale-assets/add-workspace-bg.svg") 6;
  background-image: url("expo-scale-assets/plus.svg");
  background-size: 25px 24px;
  height: 200px;
  width: 35px;
}

.workspace-add-button:hover {
  border-image: url("expo-scale-assets/add-workspace-bg.svg") 6;
  background-image: url("expo-scale-assets/plus-hover.svg");
}

.window-close-area {
  border-image: url("expo-scale-assets/workspace-close-area-bg.svg") 9;
  background-image: url("expo-scale-assets/trash.svg");
  height: 100px;
  width: 350px;
}

/* ===================================================================
   ! Scale
   ===================================================================*/
/* The background for the scale view */
.workspace-overview-background-shade {
  background-color: rgba(0, 0, 0, 0.65);
}

.window-caption {
  border-image: url("expo-scale-assets/window-name.svg") 6;
  color: rgba(255, 255, 255, 0.8);
  font-size: 9pt;
  font-weight: bold;
  padding: 6px 8px;
  spacing: 25px;
  -cinnamon-caption-spacing: 10px;
}

.window-caption#selected {
  border-image: url("expo-scale-assets/window-name-focused.svg") 6;
  color: white;
}

.window-close {
  background-image: url("widget-assets/close.svg");
  background-size: 41px 61px;
  width: 41px;
  height: 45px;
  -cinnamon-close-overlap: 24px;
}

/* ===================================================================
   ! Desklets
   ===================================================================*/
.desklet {
  color: rgba(255, 255, 255, 0.8);
}

.desklet-with-borders {
  border-image: url("background-assets/popup.svg") 9;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  padding: 5px;
}

.desklet-with-borders-and-header {
  border-image: url("background-assets/desklet-body.svg") 9;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  padding: 5px;
}

.desklet-header {
  border-image: url("background-assets/desklet-header.svg") 11;
  font-size: 10pt;
  font-weight: bold;
  text-shadow: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 5px;
}

.desklet-drag-placeholder {
  border: 0 solid transparent;
  border-radius: 0;
  background: none;
}

/* ===================================================================
   ! Clock
   ===================================================================*/
.clock-desklet-label {
  font-weight: normal;
  padding: 10px;
}

/* ===================================================================
   ! Photoframe
   ===================================================================*/
.photoframe-box {
  border-image: url("background-assets/popup.svg") 9;
  padding: 3px;
}

/* ===================================================================
   ! Xkcd
   ===================================================================*/
.xkcd-box {
  padding: 0;
  border: 0 transparent;
  box-shadow: none;
  background-color: transparent;
  border-radius: 0;
}

/* ===================================================================
   ! Notifications
   ===================================================================*/
/*
    The highlighter gets it's opacity from the
    color property
    Tweak default $link color to fix
*/
.url-highlighter {
  link-color: #ff604b;
}

#notification {
  border-image: url("background-assets/popup.svg") 7;
  padding: 1.3em;
  spacing-rows: .5em;
  spacing-columns: 10px;
  width: 34em;
  margin-from-right-edge-of-screen: 15px;
  margin-from-top-edge-of-screen: 1060px;
  font-weight: normal;
  font-size: 10pt;
  color: rgba(255, 255, 255, 0.8);
}

#notification CinnamonGenericContainer * {
  font-weight: normal;
  font-size: 9pt;
  color: #f0ad4e;
}

#notification CinnamonGenericContainer *:first-child {
  font-weight: bold;
  font-size: 10pt;
  padding: .2em 0;
  color: rgba(255, 255, 255, 0.8);
}

#notification CinnamonGenericContainer *:last-child {
  padding: .3em 0;
  color: rgba(255, 255, 255, 0.8);
}

#notification-body {
  font-weight: normal;
  font-size: 9pt;
  padding: .5em 0;
}

#notification-actions {
  spacing: .2em;
}

#notification.notification-with-image {
  min-height: 159px;
}

.popup-menu-content #notification.notification-with-image {
  min-height: 172px;
}

#notification.notification-with-image #notification-body {
  padding: 0;
}

.notification-button,
.notification-icon-button {
  background-color: transparent;
  background-gradient-direction: none;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  box-shadow: 0 0 transparent;
  border: none;
  border-width: 0;
  border-radius: 0;
  font-weight: normal;
  font-size: 9pt;
  border-image: url("button-assets/button-primary.svg") 10;
  color: rgba(255, 255, 255, 0.8);
}

.notification-button:grayed, .notification-button:disabled, .notification-button:insensitive,
.notification-icon-button:grayed,
.notification-icon-button:disabled,
.notification-icon-button:insensitive {
  border-image: url("button-assets/button-insensitive.svg") 10;
  color: rgba(255, 255, 255, 0.1);
}

.notification-button:grayed StIcon, .notification-button:disabled StIcon, .notification-button:insensitive StIcon,
.notification-icon-button:grayed StIcon,
.notification-icon-button:disabled StIcon,
.notification-icon-button:insensitive StIcon {
  color: #444;
}

.notification-button > StIcon,
.notification-icon-button > StIcon {
  width: 16px;
  height: 16px;
  icon-size: 16px;
}

.notification-button:hover,
.notification-icon-button:hover {
  border-image: url("button-assets/button-primary-hover.svg") 10;
}

.notification-button:active, .notification-button:pressed,
.notification-icon-button:active,
.notification-icon-button:pressed {
  border-image: url("button-assets/button-primary-pressed.svg") 10;
}

.notification-button:focus,
.notification-icon-button:focus {
  border-image: url("button-assets/button-orange.svg") 10;
  color: rgba(255, 255, 255, 0.8);
}

.notification-button:focus:hover,
.notification-icon-button:focus:hover {
  border-image: url("button-assets/button-orange-hover.svg") 10;
}

.notification-button:focus:active, .notification-button:focus:pressed,
.notification-icon-button:focus:active,
.notification-icon-button:focus:pressed {
  border-image: url("button-assets/button-orange-pressed.svg") 10;
}

.notification-button > StIcon,
.notification-icon-button > StIcon {
  color: #dcdcdc;
}

.notification-button:hover > StIcon,
.notification-button:active > StIcon,
.notification-button:pressed > StIcon,
.notification-icon-button:hover > StIcon,
.notification-icon-button:active > StIcon,
.notification-icon-button:pressed > StIcon {
  color: #dcdcdc;
}

.notification-button:focus > StIcon,
.notification-button:focus:hover > StIcon,
.notification-button:focus:active > StIcon,
.notification-button:focus:pressed > StIcon,
.notification-icon-button:focus > StIcon,
.notification-icon-button:focus:hover > StIcon,
.notification-icon-button:focus:active > StIcon,
.notification-icon-button:focus:pressed > StIcon {
  color: #dcdcdc;
}

.notification-button {
  padding: .9em 2.2em .9em 2.2em;
  -st-natural-width: 8em;
}

.notification-icon-button {
  padding: .9em;
}

/* ===================================================================
   ! Notification applet
   ===================================================================*/
.notification-applet-padding {
  padding: .6em .8em;
}

.notification-applet-padding:first-child {
  padding-top: 1.3em;
}

.notification-applet-padding:last-child {
  padding-bottom: .8em;
}

/* Notifs look inside the notification applet & other popups. */
.popup-menu-content #notification {
  border-image: url("background-assets/dark-bg-marked-orange.svg") 7;
  padding: .8em .8em .6em 1em;
}

.popup-menu-content #notification.multi-line-notification {
  border-image: url("background-assets/dark-bg-marked-blue.svg") 7;
}

.popup-menu-content #notification.notification-with-image {
  border-image: url("background-assets/dark-bg-marked-green.svg") 7;
  padding-bottom: .8em;
}

/* ===================================================================
   ! Alt Tab

   * The styles are namespaced under the "#altTabPopup" selector
   ===================================================================*/
#altTabPopup {
  padding: 0;
  spacing: 4px;
}

#altTabPopup .switcher-list:last-child {
  border-image: url("background-assets/popup.svg") 7;
  color: rgba(255, 255, 255, 0.8);
  padding: 0;
  font-size: 10pt;
  font-weight: bold;
}

#altTabPopup .switcher-list:last-child .item-box {
  padding: 10px;
}

#altTabPopup .switcher-list:last-child .item-box:selected {
  border-image: none;
  color: rgba(255, 255, 255, 0.8);
}

#altTabPopup .switcher-list:last-child .item-box StLabel {
  padding-top: .8em;
}

#altTabPopup .switcher-list:first-child:last-child,
#altTabPopup .switcher-list:first-child {
  border-image: url("background-assets/popup.svg") 7;
  color: rgba(255, 255, 255, 0.8);
  padding: 2px;
  font-size: 10pt;
  font-weight: bold;
}

#altTabPopup .switcher-list:first-child:last-child .item-box,
#altTabPopup .switcher-list:first-child .item-box {
  padding: 10px;
}

#altTabPopup .switcher-list:first-child:last-child .item-box:selected,
#altTabPopup .switcher-list:first-child .item-box:selected {
  border-image: url("background-assets/hover.svg") 7;
  color: white;
}

#altTabPopup .switcher-list:first-child:last-child .item-box StLabel,
#altTabPopup .switcher-list:first-child .item-box StLabel {
  padding-top: .4em;
}

#altTabPopup .switcher-list-item-container {
  spacing: 0;
}

#altTabPopup .thumbnail {
  width: 256px;
}

/* ===================================================================
  ! Lightbox + flashspot
   ===================================================================*/
/* The background shade when a dialog appears */
.lightbox {
  background-color: rgba(0, 0, 0, 0.65);
}

/* Among other places, appears when adding an applet */
.flashspot {
  background-color: rgba(255, 255, 255, 0.6);
}

/* ===================================================================
   ! Modal dialogs
   ===================================================================*/
.modal-dialog {
  border-image: url("background-assets/popup.svg") 9;
  border-radius: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.8);
}

.modal-dialog > * {
  padding: 24px;
  border-radius: 0;
}

.modal-dialog > .modal-dialog-button-box {
  border-image: url("background-assets/buttonbox-bg.svg") 8;
  spacing: 0;
  margin: 0;
  padding: 5px 8px 6px 8px;
}

.modal-dialog-button {
  background-color: transparent;
  background-gradient-direction: none;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  box-shadow: 0 0 transparent;
  border: none;
  border-width: 0;
  border-radius: 0;
  font-weight: bold;
  font-size: 9pt;
  border-image: url("button-assets/button-primary.svg") 10;
  color: rgba(255, 255, 255, 0.8);
  padding: .9em;
}

.modal-dialog-button:grayed, .modal-dialog-button:disabled, .modal-dialog-button:insensitive {
  border-image: url("button-assets/button-insensitive.svg") 10;
  color: rgba(255, 255, 255, 0.1);
}

.modal-dialog-button:grayed StIcon, .modal-dialog-button:disabled StIcon, .modal-dialog-button:insensitive StIcon {
  color: #444;
}

.modal-dialog-button > StIcon {
  width: 16px;
  height: 16px;
  icon-size: 16px;
}

.modal-dialog-button:hover {
  border-image: url("button-assets/button-primary-hover.svg") 10;
}

.modal-dialog-button:active, .modal-dialog-button:pressed {
  border-image: url("button-assets/button-primary-pressed.svg") 10;
}

.modal-dialog-button:focus {
  border-image: url("button-assets/button-orange.svg") 10;
  color: rgba(255, 255, 255, 0.8);
}

.modal-dialog-button:focus:hover {
  border-image: url("button-assets/button-orange-hover.svg") 10;
}

.modal-dialog-button:focus:active, .modal-dialog-button:focus:pressed {
  border-image: url("button-assets/button-orange-pressed.svg") 10;
}

.modal-dialog-button > StIcon {
  color: #dcdcdc;
}

.modal-dialog-button:hover > StIcon,
.modal-dialog-button:active > StIcon,
.modal-dialog-button:pressed > StIcon {
  color: #dcdcdc;
}

.modal-dialog-button:focus > StIcon,
.modal-dialog-button:focus:hover > StIcon,
.modal-dialog-button:focus:active > StIcon,
.modal-dialog-button:focus:pressed > StIcon {
  color: #dcdcdc;
}

/* ===================================================================
   ! Run dialog
   ===================================================================*/
.run-dialog > * {
  padding: 8px;
  font-weight: normal;
}

.run-dialog > .modal-dialog-button-box {
  background-color: transparent;
  border-image: none;
  box-shadow: none;
  padding: 0;
  height: 0;
}

.run-dialog-error-box {
  padding: 12px 4px 6px 4px;
  spacing: 1em;
  color: #ff2e2e;
  font-weight: normal;
}

.run-dialog-error-box StIcon {
  width: 16px;
  height: 16px;
  color: #ff2e2e;
}

.run-dialog-completion-box {
  font-size: 10pt;
  padding: 1em .7em;
}

.run-dialog-label {
  font-size: 0;
}

.run-dialog-entry {
  /*!*/
  font-weight: normal;
}

/* ===================================================================
   ! About Dialog
   ===================================================================*/
.about-content {
  width: 550px;
  height: 250px;
  spacing: 8px;
}

.about-title {
  font-size: 2em;
  font-weight: bold;
}

.about-uuid {
  font-size: 9pt;
  color: rgba(255, 255, 255, 0.4);
}

.about-description {
  padding-top: 6px;
  padding-bottom: 8px;
}

.about-version {
  padding-left: 7px;
  font-size: 9pt;
  color: #f0ad4e;
}

.about-icon {
  padding-right: 20px;
  padding-bottom: 14px;
  color: #dcdcdc;
}

.about-scrollBox {
  border-image: url("background-assets/dark-bg.svg") 7;
  padding: 4px;
  padding-right: 0;
  border-radius: 0;
}

.about-scrollBox-innerBox {
  padding: 1.2em;
  spacing: 1.2em;
}

/* ===================================================================
   ! Looking Glass dialog
   ===================================================================*/
#LookingGlassDialog {
  border-image: url("background-assets/popup.svg") 7;
  padding: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* ===================================================================
   ! On screen keyboard
   ===================================================================*/
#keyboard {
  border-image: url("background-assets/keyboard-bg.svg") 9;
}

.keyboard-layout {
  spacing: 8px;
  padding: 8px;
}

.keyboard-row {
  spacing: 15px;
}

.keyboard-key {
  background-color: transparent;
  background-gradient-direction: none;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  box-shadow: 0 0 transparent;
  border: none;
  border-width: 0;
  border-radius: 0;
  font-weight: bold;
  font-size: 9pt;
  border-image: url("button-assets/button-primary.svg") 10;
  color: rgba(255, 255, 255, 0.8);
  padding: .9em;
  font-size: 12pt;
}

.keyboard-key:grayed, .keyboard-key:disabled, .keyboard-key:insensitive {
  border-image: url("button-assets/button-insensitive.svg") 10;
  color: rgba(255, 255, 255, 0.1);
}

.keyboard-key:grayed StIcon, .keyboard-key:disabled StIcon, .keyboard-key:insensitive StIcon {
  color: #444;
}

.keyboard-key > StIcon {
  width: 16px;
  height: 16px;
  icon-size: 16px;
}

.keyboard-key:hover {
  border-image: url("button-assets/button-primary-hover.svg") 10;
}

.keyboard-key:active, .keyboard-key:pressed {
  border-image: url("button-assets/button-primary-pressed.svg") 10;
}

.keyboard-key:focus {
  border-image: url("button-assets/button-orange.svg") 10;
  color: rgba(255, 255, 255, 0.8);
}

.keyboard-key:focus:hover {
  border-image: url("button-assets/button-orange-hover.svg") 10;
}

.keyboard-key:focus:active, .keyboard-key:focus:pressed {
  border-image: url("button-assets/button-orange-pressed.svg") 10;
}

.keyboard-key > StIcon {
  color: #dcdcdc;
}

.keyboard-key:hover > StIcon,
.keyboard-key:active > StIcon,
.keyboard-key:pressed > StIcon {
  color: #dcdcdc;
}

.keyboard-key:focus > StIcon,
.keyboard-key:focus:hover > StIcon,
.keyboard-key:focus:active > StIcon,
.keyboard-key:focus:pressed > StIcon {
  color: #dcdcdc;
}

.keyboard-subkeys {
  padding: 0;
  -arrow-background-color: #2d2d2d;
  -arrow-border-width: 1px;
  -arrow-border-color: #484848;
  -arrow-border-radius: 2px;
  -arrow-base: 16px;
  -arrow-rise: 8px;
  -boxpointer-gap: 2px;
}

/* ===================================================================
   ! Applets
   ===================================================================*/
.applet-separator {
  background-image: url("panel-assets/panel-separator.svg");
  background-repeat: repeat;
  width: 9px;
  padding: 0;
}

.applet-separator-line {
  /*!*/
}

.applet-label {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}

.applet-icon {
  icon-size: 16px;
}

.applet-box {
  padding-left: 3px;
  padding-right: 3px;
  font-weight: bold;
  color: #dcdcdc;
}

/* Different images used in top & bottom panels. */
.panel-top .applet-box:hover {
  border-image: url("panel-assets/panel-top-item-hover.svg") 4;
}

.panel-bottom .applet-box:hover {
  border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
}

/* ===================================================================
   ! Calendar
   ===================================================================*/
.datemenu-date-label {
  padding: .7em 1.3em .4em 1.3em;
  font-size: 10pt;
  font-weight: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.calendar {
  padding: .8em 1.3em .6em 1.3em;
  spacing-rows: 2px;
  spacing-columns: 2px;
}

.calendar-month-label {
  padding-top: 2px;
  font-size: 9pt;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.4);
}

.calendar-change-month-back,
.calendar-change-month-forward:rtl {
  background-image: url("widget-assets/calendar-arrow-left.svg");
  background-size: 16px;
  width: 16px;
  height: 16px;
}

.calendar-change-month-back:hover,
.calendar-change-month-forward:rtl:hover {
  background-image: url("widget-assets/calendar-arrow-left-hover.svg");
}

.calendar-change-month-forward,
.calendar-change-month-back:rtl {
  background-image: url("widget-assets/calendar-arrow-right.svg");
  background-size: 16px;
  width: 16px;
  height: 16px;
}

.calendar-change-month-forward:hover,
.calendar-change-month-back:rtl:hover {
  background-image: url("widget-assets/calendar-arrow-right-hover.svg");
}

.calendar-day {
  /* ! */
}

.calendar-day-top {
  /* ! */
}

.calendar-day-left {
  /* ! */
}

.calendar-day-base {
  font-size: 9pt;
  font-weight: bold;
  text-align: center;
  width: 2.3em;
  height: 2.5em;
}

.calendar-day-heading {
  color: rgba(255, 255, 255, 0.8);
  padding: 1.2em 0 .6em 0;
  height: 1.5em;
}

.calendar-work-day {
  border-image: url("misc-assets/calendar-work-day.svg") 6;
  border: none;
  color: rgba(255, 255, 255, 0.8);
}

.calendar-nonwork-day {
  border-image: url("misc-assets/calendar-nonwork-day.svg") 6;
  border: none;
  color: rgba(255, 255, 255, 0.4);
}

.calendar-today {
  border-image: url("misc-assets/calendar-today.svg") 6;
  color: white;
  font-weight: bold;
}

.calendar-other-month-day {
  border-image: url("misc-assets/calendar-other-month-day.svg") 6;
  color: rgba(255, 255, 255, 0.1);
  font-weight: normal;
}

.calendar-week-number {
  color: rgba(255, 255, 255, 0.4);
  font-size: 9pt;
  font-weight: normal;
  width: 1.2em;
  height: 1.6em;
  padding-top: .7em;
  padding-right: .6em;
}

/* ===================================================================
   ! Window list
   ===================================================================*/
.window-list-box {
  spacing: 0px;
  padding-left: 0;
}

.window-list-item-label {
  width: 15em;
  min-width: 5px;
}

.window-list-item-box {
  color: white;
  padding-top:0px;
  font-weight: normal;
  padding-left: 0px;
  padding-right: 0px;
  max-width: 150px;
}

/* Different images used in top & bottom panels. */
.panel-top .window-list-item-box:hover {
  color: white;
}

.panel-top .window-list-item-box:active,
.panel-top .window-list-item-box:checked,
.panel-top .window-list-item-box:focus {
  border-image: url("panel-assets/panel-top-item-active.svg") 4;
}

.panel-top .window-list-item-box:checked:hover,
.panel-top .window-list-item-box:focus:hover,
.panel-top .window-list-item-box:active:hover {
  border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
}

.panel-top .window-list-item-demands-attention {
  border-image: url("panel-assets/panel-top-item-attention.svg") 4;
}

.panel-top .window-list-item-demands-attention:hover {
  border-image: url("panel-assets/panel-top-item-attention-hover.svg") 4;
}

.panel-bottom .window-list-item-box:hover {
  color: white;
}

.panel-bottom .window-list-item-box:active,
.panel-bottom .window-list-item-box:checked,
.panel-bottom .window-list-item-box:focus {
  border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
}

.panel-bottom .window-list-item-box:checked:hover,
.panel-bottom .window-list-item-box:focus:hover,
.panel-bottom .window-list-item-box:active:hover {
  border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
}

.panel-bottom .window-list-item-demands-attention {
  border-image: url("panel-assets/panel-bottom-item-attention.svg") 4;
}

.panel-bottom .window-list-item-demands-attention:hover {
  border-image: url("panel-assets/panel-bottom-item-attention-hover.svg") 4;
}

/* This styles the window-list preview and window name
   in "cover" and "timeline" alt-tab modes */
.switcher-list {
  border-image: url("background-assets/tooltip.svg") 7;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 3px;
  font-weight: normal;
}

.switcher-list > StBoxLayout {
  spacing: .4em;
}

.switcher-list > StBoxLayout > StBoxLayout {
  spacing: .4em;
}

/* ===================================================================
   ! Sound Applet
   ===================================================================*/
.sound-player {
  padding: 0 0 1px 0;
}

.sound-player > StBoxLayout:first-child {
  padding: .4em 1.3em .6em 1.3em;
  spacing: .4em;
  font-weight: bold;
  font-size: 10pt;
}

.sound-player > StBoxLayout:first-child StButton:small {
  width: 16px;
  height: 16px;
  padding: 1px;
}

.sound-player > StBoxLayout:first-child StButton:small:hover * {
  color: #d64937;
}

.sound-player-generic-coverart {
  padding: 0 2px;
}

.sound-player-overlay {
  border-image: url("background-assets/sound-applet-album-overlay.svg") 7;
  width: 290px;
  height: 70px;
  padding: 1.3em 1.3em 2.5em 1.3em;
  spacing: .5em;
  color: rgba(255, 255, 255, 0.8);
}

.sound-player-overlay StButton {
  background-color: transparent;
  background-gradient-direction: none;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  box-shadow: 0 0 transparent;
  border: none;
  border-width: 0;
  border-radius: 0;
  font-weight: bold;
  font-size: 9pt;
  border-image: url("button-assets/button-primary.svg") 10;
  color: rgba(255, 255, 255, 0.8);
  padding: .9em;
}

.sound-player-overlay StButton:grayed, .sound-player-overlay StButton:disabled, .sound-player-overlay StButton:insensitive {
  border-image: url("button-assets/button-insensitive.svg") 10;
  color: rgba(255, 255, 255, 0.1);
}

.sound-player-overlay StButton:grayed StIcon, .sound-player-overlay StButton:disabled StIcon, .sound-player-overlay StButton:insensitive StIcon {
  color: #444;
}

.sound-player-overlay StButton > StIcon {
  width: 16px;
  height: 16px;
  icon-size: 16px;
}

.sound-player-overlay StButton:hover {
  border-image: url("button-assets/button-primary-hover.svg") 10;
}

.sound-player-overlay StButton:active, .sound-player-overlay StButton:pressed {
  border-image: url("button-assets/button-primary-pressed.svg") 10;
}

.sound-player-overlay StButton:focus {
  border-image: url("button-assets/button-orange.svg") 10;
  color: rgba(255, 255, 255, 0.8);
}

.sound-player-overlay StButton:focus:hover {
  border-image: url("button-assets/button-orange-hover.svg") 10;
}

.sound-player-overlay StButton:focus:active, .sound-player-overlay StButton:focus:pressed {
  border-image: url("button-assets/button-orange-pressed.svg") 10;
}

.sound-player-overlay StButton > StIcon {
  color: #dcdcdc;
}

.sound-player-overlay StButton:hover > StIcon,
.sound-player-overlay StButton:active > StIcon,
.sound-player-overlay StButton:pressed > StIcon {
  color: #dcdcdc;
}

.sound-player-overlay StButton:focus > StIcon,
.sound-player-overlay StButton:focus:hover > StIcon,
.sound-player-overlay StButton:focus:active > StIcon,
.sound-player-overlay StButton:focus:pressed > StIcon {
  color: #dcdcdc;
}

.sound-player-overlay StBoxLayout {
  padding-top: .2em;
  spacing: .4em;
}

.sound-player .slider {
  border-image: none;
  padding: 0;
  height: .5em;
  -slider-height: .4em;
  -slider-background-color: #333;
  -slider-active-background-color: #d64937;
  -slider-handle-radius: 0;
}

/* ===================================================================
   ! Number-mode Workspace Switcher applet
   ===================================================================*/
.workspace-switcher {
  spacing: 0;
}

.workspace-button {
  padding-left: 8px;
  padding-right: 8px;
  padding-top:2px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: normal;
}

/* Different images used in top & bottom panels. */
.panel-top .workspace-button:outlined {
  border-image: url("panel-assets/panel-top-item-active.svg") 4;
  color: white;
}

.panel-top .workspace-button:hover {
  border-image: url("panel-assets/panel-top-item-hover.svg") 4;
  color: rgba(255, 255, 255, 0.8);
}

.panel-top .workspace-button:outlined:hover {
  border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
}

.panel-bottom .workspace-button:outlined {
  border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
  color: white;
}

.panel-bottom .workspace-button:hover {
  border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
  color: rgba(255, 255, 255, 0.8);
}

.panel-bottom .workspace-button:outlined:hover {
  border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
}

/* ===================================================================
   ! Visual-mode Workspace Switcher applet
   ===================================================================*/
.workspace-graph {
  padding: 0 4px;
  spacing: 3px;
}

/* Different images/paddings used in top & bottom panels. */
.panel-top .workspace {
  border-image: url("panel-assets/panel-top-item-hover.svg") 4;
  padding: 0 0 3px 0;
}

.panel-top .workspace .windows {
  -inactive-window-background: rgba(120, 120, 120, 0.9);
  -inactive-window-border: rgba(0, 0, 0, 0.7);
}

.panel-top .workspace:active {
  border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
}

.panel-top .workspace:active .windows {
  -active-window-background: rgba(210, 210, 210, 0.9);
  -active-window-border: rgba(0, 0, 0, 0.85);
  -inactive-window-background: rgba(150, 150, 150, 0.9);
  -inactive-window-border: rgba(0, 0, 0, 0.85);
}

.panel-bottom .workspace {
  border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
  padding: 1px 0 3px 0;
}

.panel-bottom .workspace .windows {
  -inactive-window-background: rgba(120, 120, 120, 0.9);
  -inactive-window-border: rgba(0, 0, 0, 0.7);
}

.panel-bottom .workspace:active {
  border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
}

.panel-bottom .workspace:active .windows {
  -active-window-background: rgba(210, 210, 210, 0.9);
  -active-window-border: rgba(0, 0, 0, 0.85);
  -inactive-window-background: rgba(150, 150, 150, 0.9);
  -inactive-window-border: rgba(0, 0, 0, 0.85);
}

/* ===================================================================
   ! Panel Launchers Applet (panelLaunchers.js)
   ===================================================================*/
.panel-launcher {
  margin: 0;
  padding: 0 2px;
}

/* Different images used in top & bottom panels. */
.panel-top .panel-launcher:hover {
  border-image: url("panel-assets/panel-top-item-active.svg") 4;
}

.panel-bottom .panel-launcher:hover {
  border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
}

/* ===================================================================
   ! User Applet
   ===================================================================*/
.user-box {
  padding: .8em 1.3em;
  spacing: 10px;
}

.user-icon {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.user-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 10pt;
  font-weight: bold;
  margin: 0;
}

/* ===================================================================
   ! Menu applet
   ===================================================================*/
/* Favourites */
.menu-favorites-box {
  border-image: url("background-assets/dark-bg.svg") 7;
  padding: 0.5em;
}

.menu-favorites-button {
  padding: 10px 12px;
}

.menu-favorites-button:hover {
  border-image: url("background-assets/hover.svg") 9;
  color: white;
}

/* Places */
.menu-places-box {
  margin: auto;
  padding: 8px;
  border: 0 solid #dcdcdc;
}

.menu-places-button {
  padding: 10px;
}

/* Categories */
.menu-categories-box {
  padding: 10px 10px;
  font-weight: normal;
}

.menu-category-button {
  padding: 7px;
  color: rgba(255, 255, 255, 0.7);
}

.menu-category-button-greyed {
  padding: 7px;
  color: rgba(255, 255, 255, 0.9);
  font-style: normal;
}

.menu-category-button-selected {
  padding: 7px;
  border-image: url("background-assets/hover.svg") 7;
  color: white;
}

.menu-category-button-label:ltr {
  padding-left: 5px;
}

.menu-category-button-label:rtl {
  padding-right: 5px;
}

/* Applications */
.menu-applications-inner-box,
.menu-applications-outer-box {
  padding: 10px;
  padding-bottom: 0;
}

.menu-application-button {
  padding: 7px;
  max-width: 10px;
}

.menu-application-button-selected {
  padding: 7px;
  border-image: url("background-assets/hover.svg") 7;
  color: white;
}

.menu-application-button:highlighted {
  border-image: url("misc-assets/highlighted.svg") 6;
}

.menu-application-button-selected:highlighted {
  border-image: url("background-assets/hover.svg") 7;
  color: rgba(255, 255, 255, 0.8);
}

.menu-application-button-label:ltr {
  padding-left: 5px;
}

.menu-application-button-label:rtl {
  padding-right: 5px;
}

/* Application hover description */
.menu-selected-app-box {
  padding-right: 30px;
  padding-left: 30px;
  text-align: left;
}

.menu-selected-app-title {
  font-weight: bold;
}

.menu-selected-app-description {
  max-width: 150px;
}

/* Menu search box */
.menu-search-box {
  padding-left: 20px;
}

/* Right-click menu */
.menu-applications-inner-box StScrollView {
  border-image: url("background-assets/dark-bg.svg") 7;
  padding: .5em .1em;
}

/* ===================================================================
   ! Window Quicky List applet
   ===================================================================*/
.window-sticky {
  color: #f0ad4e;
  font-weight: bold;
}

.popup-menu-item:active .window-sticky {
  color: white;
}

/* ===================================================================
   ! Hot corners icons
   ===================================================================*/
#overview-corner {
  background-image: url("widget-assets/hotcorner-icon.svg");
}

#overview-corner:hover {
  background-image: url("widget-assets/hotcorner-icon-hover.svg");
}

/* ===================================================================
   ! Hot corner ripple
   ===================================================================*/
.ripple-box {
  width: 24px;
  height: 24px;
  background-image: url("misc-assets/corner-ripple.svg");
}

/* ===================================================================
 * ! OSD
 * ===================================================================*/
.info-osd {
  text-align: center;
  font-weight: bold;
  spacing: .4em;
  padding: 1.4em;
  font-size: 14pt;
  color: rgba(255, 255, 255, 0.8);
  border-image: url("background-assets/popup.svg") 7;
}

.osd-window {
  spacing: .4em;
  padding: 1.0em;
  color: rgba(255, 255, 255, 0.8);
  border-image: url("background-assets/popup.svg") 10;
  font-size: 20pt;
}

.osd-window StIcon {
  color: #dcdcdc;
}

.osd-window .level {
  height: 5px;
  color: #d64937;
}

.workspace-osd {
  border-image: url("background-assets/popup.svg") 7;
  padding: 12px 17px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  font-size: 18pt;
}

/* ===================================================================
   ! Looking Glass OSD
   ===================================================================*/
#LookingGlassDialog {
  border-image: url("background-assets/popup.svg") 7;
  padding: 1.4em;
  spacing: .4em;
  color: rgba(255, 255, 255, 0.8);
}

#LookingGlassDialog StLabel:first-child {
  font-weight: bold;
  font-size: 14pt;
}

#LookingGlassDialog StLabel:last-child {
  padding-top: .4em;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12pt;
}

/* ===================================================================
   ! Magnifier
   ===================================================================*/
.magnifier-zoom-region {
  border: 4px red;
}

.magnifier-zoom-region.full-screen {
  border: none;
}

/* ===================================================================
 * ! Tile Previews
 * ===================================================================*/
.tile-preview, .tile-hud {
  background-color: rgba(30, 30, 30, 0.65);
}

.tile-preview.snap, .tile-hud.snap {
  background-color: rgba(214, 73, 55, 0.8);
}

/* ===================================================================
   ! Weather applet
   ===================================================================*/
/* Use to override the '.popup-menu-content' selector. */
.weather-menu .popup-menu-content {
  padding-left: 20px;
  padding-right: 20px;
}

/* Current */
.current {
  padding: 2px 10px;
}

.weather-current-location-link {
  font-size: 14pt;
}

.weather-current-location-link:selected, .weather-current-location-link:hover {
  background-gradient-direction: vertical;
  background-gradient-start: rgba(255, 255, 255, 0);
  background-gradient-end: rgba(255, 255, 255, 0);
  color: #d64937;
  text-decoration: underline;
}

.weather-current-summarybox {
  padding: 0;
  spacing: .1em;
}

.weather-current-summary {
  font-size: 35px;
  color: rgba(255, 255, 255, 0.8);
}

.weather-current-iconbox {
  padding: .2em 1em 1em 1em;
}

.weather-current-icon {
  padding: 15px 30px 15px 10px;
  color: #dcdcdc;
}

.weather-current-databox {
  padding-top: 15px;
  padding-bottom: .4em;
  padding-left: 30px;
  font-size: 9pt;
  spacing: .2em;
}

.weather-current-databox > * {
  spacing: .2em;
}

.weather-current-databox-captions {
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
}

.weather-current-databox-values {
  color: rgba(255, 255, 255, 0.8);
}

.weather-current-astronomy {
  color: rgba(255, 255, 255, 0.4);
  font-size: 9pt;
}

/* Forecast */
.forecast {
  /* ! */
}

.weather-forecast-icon {
  padding: 10px 10px 0 30px;
  color: #dcdcdc;
}

.weather-forecast-databox {
  padding: 14px 30px 0 0;
  spacing: .2em;
}

.weather-forecast-databox > *:last-child {
  color: rgba(255, 255, 255, 0.8);
  font-size: 9pt;
  font-weight: bold;
}

.weather-forecast-day {
  color: rgba(255, 255, 255, 0.8);
  font-size: 10pt;
  font-weight: bold;
}

/* ===================================================================
   ! System tray collapsible
   ===================================================================*/
.systray-collapsible-gradient,
.systray-collapsible-border {
  background-gradient-direction: none;
  background: transparent;
  box-shadow: none;
  border-radius: 6px;
  spacing: 2px;
  padding: 0;
}

.systray-collapsible-gradient:focus,
.systray-collapsible-border:focus {
  background-gradient-direction: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.systray-collapsible-gradient .popup-menu-icon,
.systray-collapsible-border .popup-menu-icon {
  icon-size: 16px;
  color: #dcdcdc;
  padding-left: 2px;
  padding-right: 2px;
}

.systray-collapsible-gradient:focus .popup-menu-icon,
.systray-collapsible-border:focus .popup-menu-icon {
  color: #dcdcdc;
  padding: 0;
  padding-left: 2px;
  padding-right: 2px;
}

/* ===================================================================
   ! Configurable menu
   ===================================================================*/
.menu-main-box {
  padding-top: 4px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 0;
}

.menu-control-button {
  border-image: url("button-assets//button.svg") 7;
  padding: 8px;
}

.menu-control-button-selected {
  border-image: url("button-assets//button-hover.svg") 7;
  padding: 8px;
}

.menu-control-button:open {
  border-image: url("button-assets//button-pressed.svg") 7;
  padding: 8px;
}

.menu-control-button-selected:open {
  border-image: url("button-assets//button-pressed.svg") 7;
  padding: 8px;
}

/* Fixes for stylized & classic layouts */
.menu-main-box-stylized,
.menu-main-box-classic {
  padding-top: 4px;
  padding-left: 10px;
  padding-right: 2px;
  padding-bottom: 0;
}

.menu-categories-box-stylized,
.menu-categories-box-classic,
.menu-top-box-stylized,
.menu-top-box-classic {
  padding-left: 10px;
}

.menu-search-box-stylized,
.menu-search-box-classic {
  padding-left: 0;
  padding-top: 0;
}

/* Favorites box */
.menu-favorites-box-stylized,
.menu-favorites-box-classic {
  padding: .3em;
}

/* Right-click menu box */
.menu-main-box-stylized .menu-context-menu,
.menu-main-box-claassic .menu-context-menu {
  border-image: url("background-assets/dark-bg.svg") 7;
  padding: .5em .1em;
}

/* ===================================================================
   ! Slingshot
   ===================================================================*/
/* Use to override the '.popup-menu-content' selector */
.slingshot {
  padding: 0;
}

/* Separator */
.slingshot .separator {
  background-color: rgba(255, 255, 255, 0);
}

/* Entry */
.slingshot .entry {
  background-gradient-direction: none;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  height: 25px;
}

.slingshot .entry:focus {
  background-gradient-direction: none;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.8);
  height: 25px;
}

/* Paginator */
.slingshot .button {
  border-image: url("button-assets//button.svg") 7;
  background-gradient-direction: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 8pt;
  padding: 8px 0;
}

.slingshot .button:hover {
  border-image: url("button-assets//button-hover.svg") 7;
  background-gradient-direction: none;
  background-color: transparent;
}

.slingshot .button:active {
  border-image: url("button-assets//button-pressed.svg") 7;
  background-gradient-direction: none;
  background-color: transparent;
}

.slingshot .button:checked {
  border-image: url("button-assets//button-focused.svg") 7;
  background-gradient-direction: none;
  background-color: transparent;
  color: white;
}

.slingshot .button:hover:checked, .slingshot .button:hover:active {
  background-gradient-direction: none;
  background-color: transparent;
}

/* Applications */
.slingshot .button.app {
  border-image: none;
  border-width: 0;
  font-size: 9pt;
  padding: 0;
}

.slingshot .button.app:hover {
  border-image: url("background-assets/hover.svg") 7;
  background-color: transparent;
  color: white;
}

.slingshot .button.app:focus {
  border-image: url("background-assets/hover.svg") 7;
  background-color: transparent;
  color: white;
}

/* Categories */
.slingshot .sidebar {
  padding-left: 8px;
  padding-right: 0;
}

.slingshot .sidebar .button {
  border-image: none;
  padding: 5px;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-color: transparent;
  font-size: 9pt;
  padding-top: 8px;
  padding-bottom: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: bold;
}

.slingshot .sidebar .button:hover {
  border-image: url("background-assets/hover.svg") 7;
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: white;
}

.slingshot .sidebar .button:active, .slingshot .sidebar .button:hover:active {
  background-color: transparent;
  border-color: transparent;
  box-shadow: inset 0 0 0 transparent;
  color: white;
}

.slingshot .sidebar .button:checked {
  border-image: url("misc-assets/highlighted-mirrored.svg") 7;
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: white;
}

.slingshot .sidebar .button:hover:checked {
  border-image: url("background-assets/hover.svg") 7;
  color: white;
}

/* Linked buttons */
/* Middle button */
.slingshot .linked .button {
  border-image: url("button-assets//linked-button-middle.svg") 9;
  background-gradient-direction: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  color: #dcdcdc;
}

.slingshot .linked .button:hover {
  border-image: url("button-assets//linked-button-middle-hover.svg") 9;
}

.slingshot .linked .button:active {
  border-image: url("button-assets//linked-button-middle-pressed.svg") 9;
}

.slingshot .linked .button:checked {
  border-image: url("button-assets//linked-button-middle-pressed.svg") 9;
  color: #fff;
}

/* Leftmost button */
.slingshot .linked .button:first-child {
  border-image: url("button-assets//linked-button-left.svg") 9;
  background-gradient-direction: none;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 6px;
  color: #dcdcdc;
}

.slingshot .linked .button:first-child:hover {
  border-image: url("button-assets//linked-button-left-hover.svg") 9;
}

.slingshot .linked .button:first-child:active {
  border-image: url("button-assets//linked-button-left-pressed.svg") 9;
}

.slingshot .linked .button:first-child:checked {
  border-image: url("button-assets//linked-button-left-checked.svg") 9;
  color: #fff;
}

/* Rightmost button */
.slingshot .linked .button:last-child {
  border-image: url("button-assets//linked-button-right.svg") 9;
  background-gradient-direction: none;
  background-color: transparent;
  border-right-width: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 6px;
  color: #dcdcdc;
}

.slingshot .linked .button:last-child:hover {
  border-image: url("button-assets//linked-button-right-hover.svg") 9;
}

.slingshot .linked .button:last-child:active, .slingshot .linked .button:last-child:active:hover {
  border-image: url("button-assets//linked-button-right-pressed.svg") 9;
  border-right-width: 0;
}

.slingshot .linked .button:last-child:checked {
  border-image: url("button-assets//linked-button-right-checked.svg") 9;
  color: #fff;
}

/* Linked single button */
.slingshot .linked .button:only-child {
  border-image: url("button-assets//button.svg") 9;
  background-gradient-direction: none;
  background-color: transparent;
  border-width: 0;
  box-shadow: none;
  border-radius: 0;
  color: #dcdcdc;
}

.slingshot .linked .button:only-child:hover {
  border-image: url("button-assets//button-hover.svg") 9;
}

.slingshot .linked .button:only-child:active {
  border-image: url("button-assets//button-pressed.svg") 9;
}

.slingshot .linked .button:only-child:checked {
  border-image: url("button-assets//button-pressed.svg") 9;
  color: #fff;
}

/* ===================================================================
   ! Xcenter
   ===================================================================*/
/* Use to override the '.popup-menu-content' selector */
.xCenter-menu .popup-menu-content {
  padding: 0;
  max-height: 500px;
}

.xCenter-menu .popup-menu-item {
  padding: .4em 1.3em;
}

.xCenter-menu .popup-menu-item:hover {
  border-image: url("background-assets/hover.svg") 7;
}

.xCenter-mainBox StIcon {
  color: #dcdcdc;
  padding-bottom: 1px;
}

.xCenter-title {
  border: 0 transparent;
  border-bottom-width: 4px;
  font-size: 9pt;
  font-weight: bold;
}

.xCenter-pane {
  border-image: url("misc-assets/separator-vertical.svg") 11;
  padding: 7px 0;
  padding-right: 1px;
}

.xCenter-pane:last-child {
  border-image: none;
  padding-right: 0;
}

.xCenter-menuItemLabel {
  max-width: 12em;
}

/* ===================================================================
   ! Stopwatch
   ===================================================================*/
.stopwatch-ready,
.stopwatch-ready:hover,
.stopwatch-running,
.stopwatch-running:hover,
.stopwatch-paused,
.stopwatch-day-exceeded,
.stopwatch-running-day-exceeded,
.stopwatch-paused-day-exceeded {
  background-color: transparent;
  padding: 3px 5px;
}

/* Different images used in top & bottom panels */
.panel-top .stopwatch-ready:hover {
  border-image: url("panel-assets/panel-top-item-hover.svg") 4;
}

.panel-top .stopwatch-running {
  border-image: url("panel-assets/panel-top-item-active.svg") 4;
  color: white;
}

.panel-top .stopwatch-running:hover {
  border-image: url("panel-assets/panel-top-item-active-hover.svg") 4;
}

.panel-top .stopwatch-paused,
.panel-top .stopwatch-paused:hover,
.panel-top .stopwatch-day-exceeded,
.panel-top .stopwatch-running-day-exceeded,
.panel-top .stopwatch-paused-day-exceeded {
  border-image: url("panel-assets/panel-top-item-attention.svg") 4;
}

.panel-bottom .stopwatch-ready:hover {
  border-image: url("panel-assets/panel-bottom-item-hover.svg") 4;
}

.panel-bottom .stopwatch-running {
  border-image: url("panel-assets/panel-bottom-item-active.svg") 4;
  color: white;
}

.panel-bottom .stopwatch-running:hover {
  border-image: url("panel-assets/panel-bottom-item-active-hover.svg") 4;
}

.panel-bottom .stopwatch-paused,
.panel-bottom .stopwatch-paused:hover,
.panel-bottom .stopwatch-day-exceeded,
.panel-bottom .stopwatch-running-day-exceeded,
.panel-bottom .stopwatch-paused-day-exceeded {
  border-image: url("panel-assets/panel-bottom-item-attention.svg") 4;
}

.stopwatch-running * {
  color: white;
}

/* ===================================================================
   ! Desktop Capture applet
   ===================================================================*/
/* Panel icon */
StBoxLayout.applet-box.desktop-capture StBin {
  min-width: 22px;
}

/* Display of preview image in notifications */
.screenshot-thumbnail {
  border-image: url("background-assets/dark-bg.svg") 7;
  border: 0;
  padding: 4px;
}

.screenshot-thumbnail-hover {
  border-image: url("background-assets/hover.svg") 7;
}

/* Window capture mode */
.capture-outline-background {
  background-color: rgba(214, 73, 55, 0.8);
}

.capture-outline-frame {
  border: 0;
  border-radius: 0;
}

.capture-outline-frame.desktop {
  border: none;
}

/* App icon (window capture mode) */
.overlay-icon {
  padding: 5px;
  border: 0;
  width: 32px;
  height: 32px;
  box-shadow: 0 0 transparent;
  icon-shadow: white 0 0 0;
}

.overlay-label-title {
  padding-top: 5px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 0 transparent;
  font-weight: bold;
  text-align: center;
}

.overlay-label-size {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 0 transparent;
  text-align: center;
  vertical-align: top;
  font-family: Droid Sans, Sans-Serif;
  font-size: 10pt;
  font-weight: bold;
  clear: both;
}

.capture-countdown-timer {
  border-image: url("background-assets/popup.svg") 7;
  width: 50px;
  padding: 14px 12px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.8);
}

/* Dashed border in area selection */
.border-h, .border-v {
  border-image: none;
  background-color: #000;
}

.handle {
  border: 1px solid #000;
  background-color: rgba(255, 255, 255, 0.7);
}

.area-selection {
  background-color: rgba(74, 144, 217, 0.5);
  border: 1px solid #4a90d9;
}

/* Desktop overlay */
.cover {
  background-color: rgba(0, 0, 0, 0.65);
}

/* Instructions dialog */
.instructions-container {
  border-image: url("background-assets/popup.svg") 7;
}

.instructions-label-header {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 transparent;
}

.instructions-label-text {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 22px;
  text-shadow: 0 0 transparent;
}

.menuitem-detail {
  color: rgba(255, 255, 255, 0.4);
}

.popup-menu-item:active .menuitem-detail {
  color: rgba(255, 255, 255, 0.4);
}

/* ===================================================================
   ! Color Picker applet
   ===================================================================*/
.color-inspector {
  padding: 6px 10px 10px 10px;
  border-image: none;
  border: 0;
  spacing: 10px;
}

.color-entry {
  min-width: 150px;
}

.color-spectrum {
  min-width: 14px;
  min-height: 100px;
  padding: 0 4px 4px 4px;
}

.color-gradient {
  padding: 8px 12px 12px 12px;
  min-width: 100px;
  min-height: 100px;
}

.color-cursor {
  width: 16px;
  height: 16px;
}

.color-palette {
  padding: 10px 10px;
  border-image: none;
}

.color-button .color-button-box {
  border-radius: 2px;
  border: 0;
}

.color-button, .color-button:disabled, .color-button:hover {
  border-image: none;
  border: 0;
}

.icon-button {
  padding: 2px;
  border-radius: 0;
}

.popup-scale-menu-item {
  border-image: none;
}

/* ===================================================================
 * ! Window list with app grouping
 *
 * - This applet has no stylesheet; it uses the alt-tab styles
 * - The elements are placed inside ".popup-menu-content"
 * - A combinator is used to isolate the styles
 * ===================================================================*/
.popup-menu-content {
  spacing: 0;
  padding: 0;
  border-image: url("background-assets/tooltip--window-app-grouping.svg") 6;
}

.popup-menu-content .switcher-list {
  spacing: 0;
  padding: 0;
  border-image: none;
}

.popup-menu-content .switcher-list .item-box {
  padding: 0;
  spacing: 0;
  border-image: none;
  color: rgba(255, 255, 255, 0.8);
}

.popup-menu-content .switcher-list .item-box:selected {
  border-image: none;
  color: rgba(255, 255, 255, 0.8);
}

.popup-menu-content .switcher-list .item-box .thumbnail-iconLabel {
  spacing: 4px;
  padding: 0;
  font-size: 9pt;
}

.popup-menu-content .switcher-list .item-box .window-close {
  background-image: url("widget-assets/close-2.svg");
  background-size: 20px;
}

/* ===================================================================
   ! Sticky Notes desklet
   ===================================================================*/
#sticky-scrollview StScrollBar {
  padding: 0;
  padding-left: 6px;
}

.sticky-button {
  height: 24px;
  width: 24px;
}

.sticky-button-selected {
  border-image: none;
  height: 24px;
  width: 24px;
}

.sticky-button-selected * {
  color: #d64937;
}

.sticky-button-box {
  padding: 0;
  padding-top: 4px;
  height: 24px;
}

.sticky-main-box-staples {
  border-image: url("background-assets/popup.svg") 7;
  background-color: transparent;
  border-radius: 0;
  text-shadow: none;
  min-width: 210px;
  padding: 4px 10px;
  padding-top: 0;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
}

.sticky-main-box-none {
  border-image: url("background-assets/popup.svg") 7;
  background-color: transparent;
  border-radius: 0;
  text-shadow: none;
  min-width: 210px;
  padding: 4px 10px;
  padding-top: 0;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
}

.sticky-top-box {
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
}

.sticky-bottom-box {
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
}

.sticky-title-label {
  padding: 0 4px 0 4px;
  max-width: 100px;
  text-align: center;
}

.sticky-information-label {
  padding: 0 4px 0 4px;
}

.sticky-text-box {
  background-gradient-direction: vertical;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  border: 0;
  border-width: 0;
  box-shadow: 0 0 transparent;
  border-radius: 0;
  border-image: url("widget-assets/entry.svg") 6;
  padding: 4px 8px 3px 8px;
  font-size: 10pt;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.4);
  padding: 6px;
}

.sticky-text-box:focus, .sticky-text-box:active, .sticky-text-box:pressed {
  border-image: url("widget-assets/entry-focused.svg") 6;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  caret-color: rgba(255, 255, 255, 0.8);
  caret-size: 1px;
  selected-color: white;
  selection-background-color: #d64937;
}

.sticky-text-box StIcon {
  color: #888;
}

.sticky-text-box:focus > StIcon,
.sticky-text-box:active > StIcon,
.sticky-text-box:pressed > StIcon {
  color: #dcdcdc;
}

.sticky-text-box:active {
  background-gradient-direction: vertical;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  border: 0;
  border-width: 0;
  box-shadow: 0 0 transparent;
  border-radius: 0;
  padding: 6px;
}

.sticky-text-box StEntry {
  border-image: none;
}

#sticky-note-entry {
  color: rgba(255, 255, 255, 0.8);
  selected-color: rgba(255, 255, 255, 0.8);
  caret-color: rgba(255, 255, 255, 0.8);
  caret-size: 1px;
  selection-background-color: #d64937;
}

/* ===================================================================
   ! Reddit reader
   ===================================================================*/
.reddit-reader {
  border-image: url("background-assets/popup.svg") 7;
  padding: 4px;
  color: rgba(255, 255, 255, 0.8);
}

.reddit-reader StScrollBar {
  padding: 3px 5px 8px 3px;
}

/* Title */
.reddit-title-bar {
  border-image: url("widget-assets/entry.svg") 7;
  padding: 10px;
  font-size: 10pt;
  font-weight: bold;
}

.reddit-header-icon {
  padding-right: 6px;
  icon-size: 16px;
  color: #dcdcdc;
}

.reddit-title {
  padding-right: 6px;
  font-size: 14pt;
}

.reddit-subtitle {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10pt;
}

/* Posts */
.reddit-posts-box {
  spacing: 2px;
  padding: 2px 1px 8px 1px;
}

.reddit-post {
  border-image: url("background-assets/dark-bg-top.svg") 7;
  padding: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 8pt;
}

.reddit-info-box {
  border-image: url("background-assets/dark-bg-bottom.svg") 7;
  padding: 0 10px 10px 10px;
  spacing: 10px;
  font-size: 7pt;
  color: rgba(255, 255, 255, 0.4);
}

/* ===================================================================
   ! Calculator
   ===================================================================*/
.calc-mainBox {
  padding: 0;
}

.calc-displayArea {
  padding: 0;
}

.calc-displayWindow {
  border-image: url("widget-assets/entry-focused.svg") 7;
  padding: 8px;
  padding-top: 4px;
  padding-bottom: 2.4em;
}

.calc-displayWindow-rpn {
  border-image: url("widget-assets/entry-focused.svg") 7;
  padding: 8px;
  padding-top: 4px;
}

.calc-displayText-primary {
  font-size: 32pt;
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
}

.calc-displayText-secondary {
  font-size: 10pt;
  color: #f0ad4e;
  text-align: right;
  padding-bottom: 8px;
}

.calc-displayText-operation {
  color: #f0ad4e;
}

.calc-displayText-status {
  font-size: 10pt;
  color: rgba(255, 255, 255, 0.4);
}

.calc-displayText-rpn {
  color: rgba(255, 255, 255, 0.8);
  font-size: 10pt;
}

.calc-stackArea {
  height: 85px;
  padding-top: .8em;
  padding-bottom: 0;
}

.calc-navigation-box {
  padding: 0 0 0 8px;
  width: 16px;
  border: none;
}

.calc-navigation-icon {
  color: #dcdcdc;
  icon-size: 16px;
}

.calc-navigation-button {
  border: none;
}

.calc-navigation-button:hover .calc-navigation-icon {
  color: #d64937;
}

.calc-button {
  background-color: transparent;
  background-gradient-direction: none;
  background-gradient-start: transparent;
  background-gradient-end: transparent;
  box-shadow: 0 0 transparent;
  border: none;
  border-width: 0;
  border-radius: 0;
  font-weight: bold;
  font-size: 9pt;
  border-image: url("button-assets/button-primary.svg") 10;
  color: rgba(255, 255, 255, 0.8);
  width: 3.4em;
  height: 2.8em;
}

.calc-button:grayed, .calc-button:disabled, .calc-button:insensitive {
  border-image: url("button-assets/button-insensitive.svg") 10;
  color: rgba(255, 255, 255, 0.1);
}

.calc-button:grayed StIcon, .calc-button:disabled StIcon, .calc-button:insensitive StIcon {
  color: #444;
}

.calc-button > StIcon {
  width: 16px;
  height: 16px;
  icon-size: 16px;
}

.calc-button:hover {
  border-image: url("button-assets/button-primary-hover.svg") 10;
}

.calc-button:active, .calc-button:pressed {
  border-image: url("button-assets/button-primary-pressed.svg") 10;
}

.calc-button:focus {
  border-image: url("button-assets/button-orange.svg") 10;
  color: rgba(255, 255, 255, 0.8);
}

.calc-button:focus:hover {
  border-image: url("button-assets/button-orange-hover.svg") 10;
}

.calc-button:focus:active, .calc-button:focus:pressed {
  border-image: url("button-assets/button-orange-pressed.svg") 10;
}

.calc-button > StIcon {
  color: #dcdcdc;
}

.calc-button:hover > StIcon,
.calc-button:active > StIcon,
.calc-button:pressed > StIcon {
  color: #dcdcdc;
}

.calc-button:focus > StIcon,
.calc-button:focus:hover > StIcon,
.calc-button:focus:active > StIcon,
.calc-button:focus:pressed > StIcon {
  color: #dcdcdc;
}

.calc-button-padding {
  padding: .2em;
}

/* ===================================================================
   ! G-tile
   ===================================================================*/
.grid-panel {
  border-image: url("background-assets/popup.svg") 7;
  width: 220px;
  padding: 4px;
  spacing: 0;
}

.grid-title {
  padding: 4px;
  font-size: 12px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.table {
  padding: 6px;
}

.table-element {
  border-image: url("misc-assets/calendar-work-day.svg") 7;
}

.table-element:hover, .table-element:activate {
  border-image: url("misc-assets/calendar-today.svg") 7;
}

.top-box {
  border-image: url("background-assets/sub.svg") 7;
  padding: 8px;
  padding-bottom: 12px;
}

.bottom-box {
  padding: 0 8px;
}

.bottom-box:last-child {
  padding: 8px;
  padding-top: 2px;
}

.very-bottom-box {
  padding: 0;
}

.grid-preview {
  background-color: transparent;
  border-color: transparent;
}

.grid-preview:activate {
  background-color: rgba(214, 73, 55, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 2px;
}

/* buttons */
.settings-button {
  border-image: url("button-assets//button.svg") 7;
  padding: 3px;
  width: 46px;
  height: 34px;
  color: rgba(255, 255, 255, 0.8);
}

.settings-button:activate {
  border-image: url("button-assets//button-focused-pressed.svg") 7;
  color: rgba(255, 255, 255, 0.8);
}

.settings-button:activate:hover {
  border-image: url("button-assets//button-focused-pressed.svg") 7;
  color: rgba(255, 255, 255, 0.8);
}

.settings-button:hover {
  border-image: url("button-assets//button-hover.svg") 7;
  color: rgba(255, 255, 255, 0.8);
}

.close-button {
  background-image: url("misc-assets/auto-close.svg");
  width: 24px;
  height: 24px;
}

.close-button:hover {
  background-image: url("misc-assets/auto-close.svg");
}

/* button-icons */
.tiling-icon {
  width: 24px;
  height: 24px;
}

.animation-icon {
  background-image: url("misc-assets/animation.svg");
  width: 24px;
  height: 24px;
}

.auto-close-icon {
  background-image: url("misc-assets/auto-close.svg");
  width: 24px;
  height: 24px;
}

.action-main-list {
  background-image: url("misc-assets/auto-tile-1.svg");
  width: 24px;
  height: 24px;
}

.action-two-list {
  background-image: url("misc-assets/auto-tile-2.svg");
  width: 24px;
  height: 24px;
}

.action-scale {
  width: 24px;
  height: 24px;
}