@charset "UTF-8";
/*!
 * OS.js - JavaScript Cloud/Web Desktop Platform
 *
 * Copyright (c) 2011-2016, Anders Evenrud <andersevenrud@gmail.com>
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met: 
 * 
 * 1. Redistributions of source code must retain the above copyright notice, this
 *    list of conditions and the following disclaimer. 
 * 2. Redistributions in binary form must reproduce the above copyright notice,
 *    this list of conditions and the following disclaimer in the documentation
 *    and/or other materials provided with the distribution. 
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
 * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * @author  Anders Evenrud <andersevenrud@gmail.com>
 * @licence Simplified BSD License
 */
/**
 * ===========================================================================
 *                                 CLASSES
 * ===========================================================================
 */
.gui-has-emblem {
  background-repeat: no-repeat;
  background-position: calc(96%) center;
  padding-right: calc(20px);
}
.gui-generic-container {
  padding: 4px;
  color: #656565;
}
.gui-generic-zebra-container {
  background-color: #ffffff;
}
.gui-generic-zebra-container > * {
  padding: 4px;
}
.gui-generic-zebra-container > *:nth-child(even) {
  background: rgba(254, 254, 254, 0.5);
}
.gui-generic-hoverable:hover {
  background-color: #33a550;
}
.gui-generic-padded {
  padding: 4px;
}
.gui-generic-double-padded {
  padding: calc(8px);
}
.gui-generic-margin {
  margin: 4px;
}
/**
 * ===========================================================================
 *                                 OVERRIDES
 * ===========================================================================
 */
body,
input,
button,
textarea,
label,
select {
  font-family: Karla, Sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  color: #656565;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-button {
  background: #c3c3c3;
  color: #d9d9d9;
  width: 12px;
  height: 12px;
  display: none;
}
::-webkit-scrollbar-track {
  background: #fefefe;
}
::-webkit-scrollbar-track-piece {
  background: #fefefe;
}
::-webkit-scrollbar-thumb {
  background: #c3c3c3;
}
::-webkit-scrollbar-corner {
  background: #fefefe;
}
::-webkit-resizer {
  background: #fefefe;
}
/**
 * ===========================================================================
 *                                  WM
 * ===========================================================================
 */
body[data-attention="true"]:after {
  background-color: #656565;
}
corewm-panel {
  color: #ffffff;
  /* Window Manager manages this */
  font-size: 0;
  padding: 4px;
}
corewm-panel:before {
  background: #101010;
  /* Window Manager manages this */
  box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.3);
  opacity: .85;
}
corewm-panel-container {
  padding: 8px;
}
corewm-panel[data-orientation="horizontal"] corewm-panel-container {
  width: calc(100% -  8px);
}
corewm-panel[data-orientation="vertical"] corewm-panel-container {
  height: calc(100% -  8px);
}
corewm-panel corewm-panel-item .corewm-panel-buttons > li {
  cursor: pointer;
  font-size: 12px;
}
corewm-panel[data-orientation="horizontal"] corewm-panel-item .corewm-panel-buttons > li {
  margin-right: 4px;
  margin-left: 4px;
}
corewm-panel[data-orientation="vertical"] corewm-panel-item .corewm-panel-buttons > li {
  margin-top: 4px;
  margin-bottom: 4px;
}
corewm-panel .PanelItemClock {
  font-family: Monospace, Courier New;
  font-weight: normal;
  text-align: right;
}
corewm-panel .PanelItemWindowList li {
  opacity: .50;
}
corewm-panel .PanelItemWindowList li.Focused {
  opacity: 1;
}
corewm-panel .PanelItemWindowList li img {
  margin-right: 4px;
}
html[dir="rtl"] corewm-panel .PanelItemWindowList li img {
  margin-right: 0;
  margin-left: 4px;
}
/* Notifications */
application-splash {
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
  background: #fefefe;
  box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.3);
  opacity: .85;
  cursor: pointer;
}
.custom-notification {
  color: #fff;
  /* Window Manager manages this */
}
corewm-notifications {
  top: 10px;
  right: 10px;
}
corewm-notification {
  color: #fff;
  /* Window Manager manages this */
  cursor: pointer;
  padding: 8px;
  margin-bottom: 4px;
}
.custom-notification:before,
corewm-notification:before {
  content: '';
  background: #101010;
  /* Window Manager manages this */
  box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.3);
  opacity: .85;
}
.custom-notification .Title,
corewm-notification .Title {
  font-weight: bold;
}
.custom-notification .Title,
.custom-notification .Message,
corewm-notification .Title,
corewm-notification .Message {
  line-height: 16px;
}
/* Desktop drop wallpaper effect */
#Background.Blinking {
  background: #fff;
}
/* Window Switcher */
corewm-window-switcher {
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
  background: #fefefe;
}
corewm-window-switcher > div.Active {
  background: #33a550;
}
corewm-window-switcher > div.Active > span {
  color: #ffffff;
}
corewm-search {
  padding: 4px;
  min-width: 200px;
  max-width: 40%;
  right: 10px;
  top: 10px;
}
corewm-search > div {
  margin-top: 4px;
}
corewm-search > ul {
  margin-top: 4px;
  cursor: pointer;
}
corewm-search > ul > li {
  padding: 4px;
  padding-left: 24px;
}
corewm-search > ul > li > img {
  top: 4px;
  left: 4px;
}
corewm-search > ul > .active,
corewm-search > ul > li:hover {
  background: #fff;
  color: #000;
}
/**
 * ===========================================================================
 *                                WINDOW
 * ===========================================================================
 */
application-window {
  opacity: 0.8;
  margin-top: 30px;
}
application-window:before {
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
  background: #fefefe;
  top: calc(-35px);
  left: -5px;
  right: -5px;
  bottom: -5px;
}
application-window[data-focused="true"] {
  opacity: 1.0;
}
application-window[data-focused="true"]:before {
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
}
application-window[data-dnd-state="true"]:after {
  top: -30px;
}
application-window-top {
  top: -30px;
  height: 30px;
}
application-window-top application-window-icon {
  width: 30px;
}
/* application-window-content {overflow : hidden;}*/
application-window-top:active {
  cursor: move;
  cursor: pointer;
}
application-window-title {
  font-weight: bold;
  color: #656565;
  opacity: .5;
  left: 24px;
  line-height: 30px;
  text-align: center;
}
application-window-title:active {
  cursor: move;
  cursor: pointer;
}
application-window[data-focused="true"] application-window-title {
  opacity: 1;
}
.application-window-button-entry {
  width: 22px;
  text-align: center;
  cursor: pointer;
}
application-window-resize {
  cursor: move;
}
application-window-top,
application-window-top > * {
  cursor: default;
}
application-window-loading {
  background: #000;
  opacity: 0.8;
}
application-window-loading-indicator {
  position: absolute;
  width: 48px;
  height: 48px;
  left: 50%;
  top: 50%;
  margin-left: -24px;
  margin-top: -24px;
}
application-window-loading-indicator:before {
  display: block;
  content: '';
  width: 44px;
  height: 44px;
  border-top: 4px solid #fff;
  border-right: 4px solid #666;
  border-left: 4px solid #666;
  border-bottom: 4px solid #fff;
  border-radius: 100%;
  -webkit-animation: windowloadinganim 0.75s linear infinite;
  -moz-animation: windowloadinganim 0.75s linear infinite;
  -ms-animation: windowloadinganim 0.75s linear infinite;
  animation: windowloadinganim 0.75s linear infinite;
}
application-window[data-dnd-state="true"]:after {
  border: 4px solid rgba(0, 0, 0, 0.7);
  border-radius: 1px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  margin: -4px;
}
application-window-disabled {
  background: #000;
  opacity: 0.5;
  cursor: not-allowed;
}
application-window-warning {
  background: #FFB800;
  color: #fff;
  border-color: #DF9F15;
  height: 30px;
  line-height: 20px;
  margin: 4px;
  border: 1px solid transparent;
}
application-window-warning > div:nth-child(1) {
  padding: 4px;
}
application-window-warning > div:nth-child(2) {
  right: 20px;
  padding: 4px;
}
application-window-warning > div:nth-child(1):hover {
  color: #111;
  cursor: pointer;
  opacity: .9;
}
application-window-resize {
  top: -38px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}
/**
 * ===========================================================================
 *                              CONTAINERS
 * ===========================================================================
 */
/* Container */
gui-container {
  margin: 4px;
}
gui-container[data-borders="true"] {
  cursor: pointer;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
}
/* Box */
gui-hbox-container > .gui-element,
gui-vbox-container > .gui-element {
  margin: 4px;
}
gui-hbox-container[data-fill='true'] > *,
gui-vbox-container[data-fill='true'] > * {
  width: calc(100% -  8px);
  height: calc(100% -  8px);
}
gui-hbox-container > .perc-100 {
  height: calc(100% -  8px);
}
gui-vbox-container > .perc-100 {
  width: calc(100% -  8px);
}
gui-hbox-container > .perc-90 {
  height: calc(90% -  8px);
}
gui-vbox-container > .perc-90 {
  width: calc(90% -  8px);
}
gui-hbox-container > .perc-80 {
  height: calc(80% -  8px);
}
gui-vbox-container > .perc-80 {
  width: calc(80% -  8px);
}
gui-hbox-container > .perc-70 {
  height: calc(70% -  8px);
}
gui-vbox-container > .perc-70 {
  width: calc(70% -  8px);
}
gui-hbox-container > .perc-60 {
  height: calc(60% -  8px);
}
gui-vbox-container > .perc-60 {
  width: calc(60% -  8px);
}
gui-hbox-container > .perc-50 {
  height: calc(50% -  8px);
}
gui-vbox-container > .perc-50 {
  width: calc(50% -  8px);
}
gui-hbox-container > .perc-40 {
  height: calc(40% -  8px);
}
gui-vbox-container > .perc-40 {
  width: calc(40% -  8px);
}
gui-hbox-container > .perc-30 {
  height: calc(30% -  8px);
}
gui-vbox-container > .perc-30 {
  width: calc(30% -  8px);
}
gui-hbox-container > .perc-20 {
  height: calc(20% -  8px);
}
gui-vbox-container > .perc-20 {
  width: calc(20% -  8px);
}
gui-hbox-container > .perc-10 {
  height: calc(10% -  8px);
}
gui-vbox-container > .perc-10 {
  width: calc(10% -  8px);
}
/* Paned View */
gui-paned-view > gui-paned-view-handle {
  min-width: 8px;
  width: 8px;
  cursor: ew-resize;
}
gui-paned-view[data-orientation='vertical'] > gui-paned-view-handle {
  min-width: auto;
  width: auto;
  min-height: 8px;
  height: 8px;
  cursor: ns-resize;
}
/* IFrame */
gui-iframe {
  background-color: #ffffff;
}
gui-iframe > iframe {
  background-color: #ffffff;
}
/* Button Bar */
/* Toolbar */
gui-toolbar > *,
gui-button-bar > *,
gui-toolbar > gui-expander > *,
gui-button-bar > gui-expander > * {
  margin: 4px;
}
gui-toolbar > gui-expander,
gui-button-bar > gui-expander {
  margin: 0;
}
gui-toolbar[data-orientation="vertical"] {
  margin-left: 0;
  margin-right: 0;
  margin-top: 4px;
  margin-bottom: 4px;
}
/* Expander */
gui-expander {
  font-size: 12px;
}
gui-expander-label {
  cursor: pointer;
  padding: 4px;
  background-color: #d9d9d9;
  margin-bottom: 4px;
}
gui-expander-label:before {
  content: '▼';
  font-family: sans-serif;
  padding-right: 4px;
}
gui-expander[data-expanded="false"] > gui-expander-label:before {
  content: '►';
}
/* Tabs */
gui-tabs > ul {
  height: 25px;
}
gui-tabs > ul > li {
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
  background-color: #d9d9d9;
  border: 1px solid transparent;
  border-bottom: 0 none;
  line-height: 25px;
}
gui-tabs > ul > li.gui-active {
  background-color: transparent;
  border-color: #c3c3c3;
}
gui-tabs > ul > li.gui-active:after {
  bottom: -1px;
  border-bottom: 1px solid #fefefe;
}
gui-tabs > gui-tab-container {
  height: calc(100% - 25px);
  border: 1px solid #c3c3c3;
  padding: 4px;
}
/* Button Bar */
/**
 * ===========================================================================
 *                                INPUTS
 * ===========================================================================
 */
/* Label */
gui-label {
  height: 26px;
  line-height: 26px;
}
gui-hbox-container > gui-label,
gui-vbox-container > gui-label {
  height: 16px;
  line-height: 16px;
  min-height: 16px;
}
/* Button */
gui-button {
  height: 26px;
}
gui-button[data-icon-size="32"] {
  height: 42px;
}
gui-button button {
  cursor: pointer;
  padding: 4px;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
  border: 1px solid #c3c3c3;
  color: #656565;
}
gui-button button:focus {
  outline: 0 none transparent;
}
gui-button button.gui-active,
gui-button button:active {
  border-color: #242424;
  color: #656565;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
}
gui-button button.gui-active:disabled,
gui-button button:disabled:active,
gui-button button:disabled {
  border-color: #cccccc;
  color: #656565;
  background-color: #dddddd;
  background: #dddddd;
}
gui-button button:disabled img {
  opacity: .5;
}
gui-button button:disabled {
  cursor: default;
  color: #C7C7C7;
}
gui-button button.gui-has-image img {
  padding-right: 4px;
}
gui-button.gui-has-image.gui-has-label button {
  padding-left: 28px;
}
gui-button[data-icon-size="32"].gui-has-image.gui-has-label button {
  padding-left: 44px;
}
/* Checkbox Button */
/* Radio Button */
gui-radio,
gui-checkbox {
  height: 26px;
}
gui-radio input,
gui-checkbox input {
  text-align: center;
  background: #ffffff;
  border: 1px solid #c3c3c3;
  width: 16px;
  height: 16px;
  line-height: 12px;
  color: #656565;
  font-family: Arial;
}
gui-radio input:focus,
gui-checkbox input:focus {
  outline: 0 none transparent;
}
gui-radio input {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  border-radius: 16px;
}
gui-radio input:checked:after {
  content: "\2022";
  font-size: 32px;
}
gui-checkbox input:checked:after {
  content: "\2713";
  font-size: 12px;
}
gui-radio[data-disabled="true"] label,
gui-checkbox[data-disabled="true"] label {
  color: #C7C7C7;
}
gui-radio input:disabled,
gui-checkbox input:disabled {
  border-color: #cccccc;
  background-color: #dddddd;
}
gui-radio > label,
gui-checkbox > label {
  line-height: 26px;
}
gui-radio > label > span,
gui-checkbox > label > span {
  padding-left: 4px;
}
/* Select Dropdown */
gui-select {
  height: 26px;
}
gui-select select {
  cursor: pointer;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
  padding-right: 20px;
}
gui-select select:disabled {
  border-color: #cccccc;
  background-color: #dddddd;
  color: #C7C7C7;
}
gui-select select:focus {
  outline: 0 none transparent;
}
gui-select:before {
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 22px;
  background: #ffffff;
}
gui-select:after {
  content: '<>';
  font: 11px "Consolas", monospace;
  color: #c3c3c3;
  right: 2px;
  top: 5px;
  padding: 0 0 2px;
  border-bottom: 1px solid #c3c3c3;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
gui-select[data-disabled="true"]:before {
  background-color: #dddddd;
}
/* Select List */
gui-select-list select {
  cursor: pointer;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
}
gui-select-list select:focus {
  outline: 0 none transparent;
}
gui-select-list select:disabled {
  border-color: #cccccc;
  background-color: #dddddd;
  color: #C7C7C7;
}
/* Slider */
gui-slider {
  height: 26px;
}
gui-slider input {
  background: transparent;
  border: 0 none;
  height: 26px;
}
/*
   * RANGE TRACK
   */
gui-slider input::-moz-range-track {
  height: 4px;
  background-color: #d9d9d9;
}
gui-slider input::-webkit-slider-runnable-track {
  height: 4px;
  background-color: #d9d9d9;
}
gui-slider input::-ms-track {
  height: 4px;
  background-color: #d9d9d9;
}
/*
   * RANGE THUMB
   */
gui-slider input::-moz-range-thumb {
  cursor: pointer;
  padding: 4px;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
  border: 1px solid #c3c3c3;
  color: #656565;
  height: 18px;
  width: 10px;
}
gui-slider input:disabled::-moz-range-thumb {
  border-color: #cccccc;
  color: #656565;
  background-color: #dddddd;
  background: #dddddd;
}
gui-slider input::-webkit-slider-thumb {
  cursor: pointer;
  padding: 4px;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
  border: 1px solid #c3c3c3;
  color: #656565;
  height: 24px;
  width: 16px;
  margin-top: -10px;
}
gui-slider input:disabled::-webkit-range-thumb {
  border-color: #cccccc;
  color: #656565;
  background-color: #dddddd;
  background: #dddddd;
}
gui-slider input::-ms-thumb {
  cursor: pointer;
  padding: 4px;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
  border: 1px solid #c3c3c3;
  color: #656565;
  height: 24px;
  width: 16px;
}
gui-slider input:disabled::-ms-thumb {
  border-color: #cccccc;
  color: #656565;
  background-color: #dddddd;
  background: #dddddd;
}
/**
   * MISC
   */
gui-slider input[type=range]::-ms-fill-lower {
  border: 0 none;
  background-color: #d9d9d9;
}
gui-slider input[type=range]::-ms-fill-upper {
  border: 0 none;
  background-color: #d9d9d9;
}
gui-slider input[type=range]:focus::-ms-fill-lower {
  background-color: #d9d9d9;
}
gui-slider input[type=range]:focus::-ms-fill-upper {
  background-color: #d9d9d9;
}
/* Switch */
gui-switch {
  height: 26px;
}
gui-switch div {
  width: 48px;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
  cursor: pointer;
  padding: 0;
}
gui-switch button {
  cursor: pointer;
  padding: 4px;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
  border: 1px solid #c3c3c3;
  color: #656565;
}
gui-switch button:focus {
  outline: 0 none transparent;
}
gui-switch > label > div {
  margin-left: 4px;
}
gui-switch[data-disabled="true"] button {
  border-color: #cccccc;
  color: #656565;
  background-color: #dddddd;
  background: #dddddd;
}
gui-switch[data-disabled="true"] div {
  border-color: #cccccc;
  background-color: #dddddd;
  color: #C7C7C7;
  padding: 0;
}
gui-switch[data-disabled="true"] button,
gui-switch[data-disabled="true"] label {
  color: #C7C7C7;
}
/* Text Field */
/* Password Field */
gui-password,
gui-text {
  height: 26px;
}
gui-password input,
gui-text input {
  cursor: pointer;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
  padding-left: 8px;
  padding-right: 8px;
}
gui-password > label > input,
gui-text > label > input {
  margin-left: 4px;
}
gui-password input:disabled,
gui-text input:disabled {
  border-color: #cccccc;
  background-color: #dddddd;
  color: #C7C7C7;
}
gui-password input:focus,
gui-text input:focus {
  outline: 0 none transparent;
}
gui-password[data-disabled="true"] label,
gui-text[data-disabled="true"] label {
  color: #C7C7C7;
}
/* Text Area */
gui-textarea textarea {
  cursor: pointer;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
}
gui-textarea textarea:focus {
  outline: 0 none transparent;
}
gui-textarea textarea:disabled {
  border-color: #cccccc;
  background-color: #dddddd;
  color: #C7C7C7;
}
gui-textarea[data-disabled="true"] label {
  color: #C7C7C7;
}
/* Rich Text */
gui-richtext {
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
}
gui-richtext > iframe {
  background-color: #ffffff;
}
/* Grid */
gui-grid > gui-grid-row > gui-grid-entry {
  /* li */
  margin: 4px;
}
/* Modal Input */
gui-input-modal input {
  cursor: pointer;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
  border-color: #cccccc;
  background-color: #dddddd;
  color: #C7C7C7;
}
gui-input-modal button {
  margin-left: 4px;
  cursor: pointer;
  padding: 4px;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
  border: 1px solid #c3c3c3;
  color: #656565;
  padding-left: 8px;
  padding-right: 8px;
}
gui-input-modal button:focus {
  outline: 0 none transparent;
}
/**
 * ===========================================================================
 *                                 MISC
 * ===========================================================================
 */
/* Video */
/* Color Swatch */
gui-color-swatch {
  border: 1px solid #c3c3c3;
}
/* Color Box */
gui-color-box {
  cursor: pointer;
  padding: 4px;
  background-color: #f8f8f8;
  background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
  border: 1px solid #c3c3c3;
  color: #656565;
}
gui-color-box > div {
  background: #fff;
}
/* Menu */
gui-menu {
  border: 1px solid transparent;
  background: #fefefe;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
  color: #656565;
}
gui-menu > gui-menu-entry {
  color: #656565;
}
gui-menu > gui-menu-entry > label {
  cursor: pointer;
  line-height: 18px;
  padding: 4px;
}
gui-menu > gui-menu-entry.gui-menu-expand {
  padding-right: 16px;
}
html[dir="rtl"] gui-menu > gui-menu-entry.gui-menu-expand {
  padding-right: 0;
}
html[dir="rtl"] gui-menu > gui-menu-entry[data-icon] {
  padding-right: 16px;
}
gui-menu > gui-menu-entry.gui-menu-expand:after {
  content: '►';
  font-family: sans-serif;
  line-height: 18px;
  padding: 4px;
}
gui-menu > gui-menu-entry.gui-hover,
gui-menu > gui-menu-entry:hover {
  background-color: #33a550;
}
gui-menu > gui-menu-entry.gui-hover > label,
gui-menu > gui-menu-entry:hover > label {
  color: #ffffff;
}
gui-menu > gui-menu-entry {
  background-position: 4px center;
}
html[dir="rtl"] gui-menu > gui-menu-entry {
  background-position: right 4px center;
}
gui-menu > gui-menu-entry > label.gui-has-image {
  padding-left: 22px;
}
gui-menu > gui-menu-entry[data-disabled="true"],
gui-menu > gui-menu-entry[data-disabled="true"] > label {
  color: #C7C7C7;
}
/* Menu Bar */
gui-menu-bar {
  padding-left: 4px;
  padding-right: 4px;
}
gui-menu-bar-entry {
  cursor: pointer;
  padding: 4px;
}
gui-menu-bar-entry:hover {
  background: #33a550;
  color: #ffffff;
}
gui-menu-bar-entry[data-disabled="true"] > span {
  color: #C7C7C7;
}
/* Progressbar */
gui-progress-bar {
  display: block;
  height: 26px;
}
gui-progress-bar:before {
  background-color: #d9d9d9;
  border: 1px solid #c3c3c3;
  padding: 4px;
}
gui-progress-bar > div {
  background: #33a550 url('/themes/styles/glass/gui/progressbar.png') repeat-x center;
}
gui-progress-bar > span {
  color: #fff;
}
/* Statusbar */
gui-statusbar {
  margin: 4px;
  padding-bottom: 4px;
}
/**
 * ===========================================================================
 *                                VIEWS
 * ===========================================================================
 */
/* Icon View */
gui-icon-view {
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
  padding: 4px;
}
gui-icon-view.gui-element-focused {
  outline: 0 none transparent;
}
gui-icon-view-entry {
  cursor: pointer;
  margin: 2px;
  padding: 2px;
  text-align: center;
  min-width: 60px !important;
  min-height: 60px !important;
}
gui-icon-view-entry.gui-active {
  background: rgba(51, 165, 80, 0.8);
  color: #ffffff;
}
gui-icon-view-entry.gui-active > div > span {
  background: rgba(51, 165, 80, 0.8);
}
gui-icon-view.gui-element-focused gui-icon-view-entry.gui-active {
  background: #33a550;
}
gui-icon-view.gui-element-focused gui-icon-view-entry.gui-active > div > span {
  background: #33a550;
}
/* List View */
gui-list-view {
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
}
gui-list-view.gui-element-focused {
  outline: 0 none transparent;
}
gui-list-view-head {
  background-color: #d9d9d9;
}
gui-list-view[data-zebra="true"] gui-list-view-body gui-list-view-row:nth-child(2n) {
  background-color: #F9F9F9;
  color: inherit;
}
gui-list-view-column {
  padding: 4px;
}
gui-list-view-column.gui-has-image {
  padding-left: 24px;
  background-position: 4px;
}
html[dir="rtl"] gui-list-view gui-list-view-column.gui-has-image {
  padding-left: 0;
  padding-right: 24px;
  background-position: right 4px center;
}
gui-list-view[data-icon-size="32"] gui-list-view-column.gui-has-image {
  padding-left: 40px;
}
html[dir="rtl"] gui-list-view[data-icon-size="32"] gui-list-view-column.gui-has-image {
  padding-left: 0;
  padding-right: 40px;
}
gui-list-view-row.gui-active {
  background-color: rgba(51, 165, 80, 0.8);
  color: #ffffff;
}
gui-list-view.gui-element-focused gui-list-view-row.gui-active {
  background-color: #33a550;
}
gui-list-view-column-resizer {
  cursor: ew-resize;
  width: 3px;
  right: 0px;
}
gui-list-view-column-resizer:after {
  background: #c3c3c3;
}
/* Tree View */
gui-tree-view {
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
}
gui-tree-view.gui-element-focused {
  outline: 0 none transparent;
}
gui-tree-view-entry.dnd-over > div {
  font-weight: bold;
  text-decoration: underline;
}
gui-tree-view-entry > div {
  padding: 4px;
}
gui-tree-view-entry > div > span {
  cursor: pointer;
  padding: 2px;
}
gui-tree-view-entry > div > span.gui-has-image {
  padding-left: 20px;
}
gui-tree-view-entry > gui-tree-view-entry {
  margin-left: 16px;
}
gui-tree-view-entry > gui-tree-view-entry.gui-expandable {
  margin-left: 2px;
}
gui-tree-view-entry.gui-active > div {
  background-color: rgba(51, 165, 80, 0.8);
  color: #ffffff;
}
gui-tree-view.gui-element-focused gui-tree-view-entry.gui-active > div {
  background-color: #33a550;
}
gui-tree-view-entry.gui-expandable {
  padding-left: 16px;
}
gui-tree-view-entry.gui-expandable gui-tree-view-expander {
  padding-left: 4px;
  cursor: pointer;
  line-height: 24px;
}
gui-tree-view-entry.gui-expandable gui-tree-view-expander:before {
  content: '\25BA';
  font-family: Arial;
  color: #c3c3c3;
}
gui-tree-view-entry.gui-expandable.gui-expanded > gui-tree-view-expander:before {
  content: '\25BC';
}
application-window-top {
  height: 25px;
}
application-window-title {
  line-height: 25px;
}
.application-window-button-entry {
  width: 20px;
}
application-window-content {
  background: #fefefe;
}
application-window:before {
  opacity: .7;
  border: 1px solid #fefefe;
}
/* Max */
application-window-button-maximize,
application-window-button-maximize:hover,
application-window-button-maximize:active,
application-window[data-focused="true"] application-window-button-maximize,
application-window[data-focused="true"] application-window-button-maximize:hover,
application-window[data-focused="true"] application-window-button-maximize:active {
  background: url('glass/wm/maximize.png') no-repeat center center;
}
/* Min */
application-window-button-minimize,
application-window-button-minimize:hover,
application-window-button-minimize:active,
application-window[data-focused="true"] application-window-button-minimize,
application-window[data-focused="true"] application-window-button-minimize:hover,
application-window[data-focused="true"] application-window-button-minimize:active {
  background: url('glass/wm/minimize.png') no-repeat center 70%;
}
/* Close */
application-window-button-close,
application-window-button-close:hover,
application-window-button-close:active,
application-window[data-focused="true"] application-window-button-close,
application-window[data-focused="true"] application-window-button-close:hover,
application-window[data-focused="true"] application-window-button-close:active {
  background: url('glass/wm/close.png') no-repeat center center;
}