* {
  accent:           #d32f2f;
  background:       #303030;
  background-text:  #00000000;
  background-alt:   #282828;
  foreground:       #eeeeee;
  foreground-alt:   #dedede;
  on:               #66bb6a;
  off:              #ef5350;
}

* {
  /* General */
  
  option-6-listview-spacing:            6px;
  menu-window-padding:                  5px 5px;
  menu-element-padding:                 3px 0px -3px 3px;
}

#window {
  width: 2.8%;
  height: 23.7%;
  anchor: east;
  location: east;
  x-offset: -10px;
  y-offset: 0%;
  border: 0px;
  border-radius: 5px;
}

* {
  background-color: @background;
  text-color: @foreground;
  font: @icon-font;
}

#horibox {
  children: [ listview ];
}

#listview {
  cycle: false;
  spacing: 2.5%;
  dynamic: true;
  layout: vertical;
}

#element {
  orientation: horizontal;
  border: 0px;
  border-radius: 100%;
  background-color: @background-alt;
}

element-text{
  background-color: @background-text;
  text-color: inherit;
  font: "Material Icons 32";
  margin: -3px -5px 3px -3px;
}

element.selected {
  background-color: @accent;
  text-color: @foreground-alt;
}

* {
  font: @text-font;
}

#window {
  padding: @menu-window-padding;
  children: [ horibox ];
}

listview {
  spacing: @option-6-listview-spacing;
  lines: 6;
}

element {
  font: @icon-font;
  border: @menu-element-border;
  padding: @menu-element-padding;
  border-color: @background-alt;
}

element.active,
element.selected.urgent {
  background-color: @off;
  text-color: @foreground-alt;
  border-color: @on;
}

element.selected.urgent {
  border-color: @accent;
  text-color: @foreground-alt;
}

element.urgent,
element.selected.active {
  background-color: @off;
  border-color: @accent;
  text-color: @foreground-alt;
}