fix(font) gyliphicons for datepicker

fix(font) gyliphicons for datepicker

@mw-home:'\e800';
@mw-comment-empty:'\e801';
@mw-comment:'\e802';
@mw-hospital-o:'\e803';
@mw-mobile:'\e804';
@mw-mobile-1:'\e805';
@mw-language:'\e806';
@mw-user-md:'\e807';
@mw-book:'\e808';
@mw-eye-off:'\e809';
@mw-list:'\e80a';
@mw-times:'\e80b';
@mw-server:'\e80c';
@mw-cogs:'\e80d';
@mw-plus-squared:'\e80e';
@mw-var-chevron-circle-down:'\e80f';
@mw-var-chevron-circle-left:'\e810';
@mw-var-chevron-circle-right:'\e811';
@mw-var-chevron-circle-up:'\e812';
@mw-search:'\e813';
@mw-cancel-circled:'\e814';
@mw-mwach-baby-phone:'\e815';
@mw-mwach-phone-add:'\e816';
@mw-mwach-phone-d:'\e817';
@mw-mwach-phone:'\e818';
@mw-var-chevron-left:'\e819';
@mw-var-chevron-right:'\e81a';
@mw-var-chevron-down:'\e81d';
@mw-var-chevron-up:'\e81b';
@mw-reply:'\e81c';
@mw-calendar: '\e81e';
@mw-language-1: '\e81f';
@mw-redo: '\e820';
@mw-baby-2:'\e821';
@mw-baby-1:'\e822';
@mw-baby-noun: '\e823';
@mw-monitor-bdr: '\e824';
@font-face {
  font-family: 'mwachx';
  src: url('../fonts/mwachx.eot?13650801');
  src: url('../fonts/mwachx.eot?13650801#iefix') format('embedded-opentype'),
       url('../fonts/mwachx.woff?13650801') format('woff'),
       url('../fonts/mwachx.ttf?13650801') format('truetype'),
       url('../fonts/mwachx.svg?13650801#mwachx') format('svg');
  font-weight: normal;
  font-style: normal;
}
.mw, .glyphicon {
    font-family: 'mwachx';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Fixed Width Icons
// -------------------------
.mw-fw {
  width: (18em / 14);
  text-align: center;
}

// Icon Sizes
// -------------------------

/* makes the font 33% larger relative to the icon container */
.mw-lg {
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -15%;
}
.mw-2x { font-size: 2em; }
.mw-3x { font-size: 3em; }
.mw-4x { font-size: 4em; }
.mw-5x { font-size: 5em; }

// Stacked Icons
// -------------------------

.mw-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.mw-stack-1x, .mw-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.mw-stack-1x { line-height: inherit; }
.mw-stack-2x { font-size: 2em; }

.mw-warning {color: @brand-warning;}

.mw-home:before { content: @mw-home; } /* '' */
.mw-comment-empty:before { content: @mw-comment-empty; } /* '' */
.mw-comment:before { content: @mw-comment; } /* '' */
.mw-hospital-o:before,.mw-hospital:before { content: @mw-hospital-o; } /* '' */
.mw-mobile:before { content: @mw-mobile; } /* '' */
.mw-mobile-1:before { content: @mw-mobile-1; } /* '' */
.mw-language:before { content: @mw-language; } /* '' */
.mw-user-md:before { content: @mw-user-md; } /* '' */
.mw-book:before { content: @mw-book; } /* '' */
.mw-eye-off:before { content: @mw-eye-off; } /* '' */
.mw-list:before { content: @mw-list; } /* '' */
.mw-cancel:before, .mw-times:before { content: @mw-times; } /* '' */
.mw-server:before { content: @mw-server; } /* '' */
.mw-cogs:before { content: @mw-cogs; } /* '' */
.mw-plus-squared:before { content: @mw-plus-squared; } /* '' */
.mw-var-chevron-circle-down:before, .mw-angle-circled-down:before { content: @mw-var-chevron-circle-down; } /* '' */
.mw-var-chevron-circle-left:before, .mw-angle-circled-left:before { content: @mw-var-chevron-circle-left; } /* '' */
.mw-var-chevron-circle-right:before, .mw-angle-circled-right:before { content: @mw-var-chevron-circle-right; } /* '' */
.mw-var-chevron-circle-up:before, .mw-angle-circled-up:before { content: @mw-var-chevron-circle-up; } /* '' */
.mw-search:before { content: @mw-search; } /* '' */
.mw-cancel-circled:before { content: @mw-cancel-circled; } /* '' */
.mw-mwach-baby-phone:before { content: @mw-mwach-baby-phone; } /* '' */
.mw-mwach-phone-add:before { content: @mw-mwach-phone-add; } /* '' */
.mw-mwach-phone-d:before { content: @mw-mwach-phone-d; } /* '' */
.mw-mwach-phone:before { content: @mw-mwach-phone; } /* '' */
.mw-angle-left:before, .mw-var-chevron-left:before, .mw-chevron-left:before, .glyphicon-chevron-left:before { content: @mw-var-chevron-left; } /* '' */
.mw-angle-right:before, .mw-var-chevron-right:before, .mw-chevron-right:before, .glyphicon-chevron-right:before  { content: @mw-var-chevron-right; } /* '' */
.mw-angle-down:before, .mw-var-chevron-down:before, .mw-chevron-down:before, .glyphicon-chevron-down:before { content: @mw-var-chevron-down; } /* '' */
.mw-angle-up:before, .mw-var-chevron-up:before, .mw-chevron-up:before, .glyphicon-chevron-up:before { content: @mw-var-chevron-up; } /* '' */
.mw-reply:before { content: @mw-reply; } /* '' */
.mw-calendar:before, .glyphicon-calendar:before { content: @mw-calendar; } /* '' */
.mw-language-1:before { content: @mw-language-1; } /* '' */
.mw-redo:before { content: @mw-redo; } /* '' */
.mw-baby-2:before { content: @mw-baby-2; } /* '' */
.mw-baby-1:before { content: @mw-baby-1; } /* '' */
.mw-baby-noun:before { content: @mw-baby-noun; } /* '' */
.mw-monitor-bdr:before { content: @mw-monitor-bdr; } /* '' */
.mw-huge {
    font-size: 20em;
    display: block;
    margin-top: 0.2em;
}

.mw-label {
    text-align: center;
    display: block;
    font-size: 2em;
    margin-bottom: 1em;
}

@mw-home:'\e800';
@mw-comment-empty:'\e801';
@mw-comment:'\e802';
@mw-hospital-o:'\e803';
@mw-mobile:'\e804';
@mw-mobile-1:'\e805';
@mw-language:'\e806';
@mw-user-md:'\e807';
@mw-book:'\e808';
@mw-eye-off:'\e809';
@mw-list:'\e80a';
@mw-times:'\e80b';
@mw-server:'\e80c';
@mw-cogs:'\e80d';
@mw-plus-squared:'\e80e';
@mw-var-chevron-circle-down:'\e80f';
@mw-var-chevron-circle-left:'\e810';
@mw-var-chevron-circle-right:'\e811';
@mw-var-chevron-circle-up:'\e812';
@mw-search:'\e813';
@mw-cancel-circled:'\e814';
@mw-mwach-baby-phone:'\e815';
@mw-mwach-phone-add:'\e816';
@mw-mwach-phone-d:'\e817';
@mw-mwach-phone:'\e818';
@mw-var-chevron-left:'\e819';
@mw-var-chevron-right:'\e81a';
@mw-var-chevron-down:'\e81d';
@mw-var-chevron-up:'\e81b';
@mw-reply:'\e81c';
@mw-calendar: '\e81e';
@mw-language-1: '\e81f';
@mw-redo: '\e820';
@mw-baby-2:'\e821';
@mw-baby-1:'\e822';
@mw-baby-noun: '\e823';
@mw-monitor-bdr: '\e824';
@font-face {
  font-family: 'mwachx';
  src: url('../fonts/mwachx.eot?13650801');
  src: url('../fonts/mwachx.eot?13650801#iefix') format('embedded-opentype'),
       url('../fonts/mwachx.woff?13650801') format('woff'),
       url('../fonts/mwachx.ttf?13650801') format('truetype'),
       url('../fonts/mwachx.svg?13650801#mwachx') format('svg');
  font-weight: normal;
  font-style: normal;
}
.mw, .glyphicon {
    font-family: 'mwachx';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Fixed Width Icons
// -------------------------
.mw-fw {
  width: (18em / 14);
  text-align: center;
}

// Icon Sizes
// -------------------------

/* makes the font 33% larger relative to the icon container */
.mw-lg {
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -15%;
}
.mw-2x { font-size: 2em; }
.mw-3x { font-size: 3em; }
.mw-4x { font-size: 4em; }
.mw-5x { font-size: 5em; }

// Stacked Icons
// -------------------------

.mw-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.mw-stack-1x, .mw-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.mw-stack-1x { line-height: inherit; }
.mw-stack-2x { font-size: 2em; }

.mw-warning {color: @brand-warning;}

.mw-home:before { content: @mw-home; } /* '' */
.mw-comment-empty:before { content: @mw-comment-empty; } /* '' */
.mw-comment:before { content: @mw-comment; } /* '' */
.mw-hospital-o:before,.mw-hospital:before { content: @mw-hospital-o; } /* '' */
.mw-mobile:before { content: @mw-mobile; } /* '' */
.mw-mobile-1:before { content: @mw-mobile-1; } /* '' */
.mw-language:before { content: @mw-language; } /* '' */
.mw-user-md:before { content: @mw-user-md; } /* '' */
.mw-book:before { content: @mw-book; } /* '' */
.mw-eye-off:before { content: @mw-eye-off; } /* '' */
.mw-list:before { content: @mw-list; } /* '' */
.mw-cancel:before, .mw-times:before { content: @mw-times; } /* '' */
.mw-server:before { content: @mw-server; } /* '' */
.mw-cogs:before { content: @mw-cogs; } /* '' */
.mw-plus-squared:before { content: @mw-plus-squared; } /* '' */
.mw-var-chevron-circle-down:before, .mw-angle-circled-down:before { content: @mw-var-chevron-circle-down; } /* '' */
.mw-var-chevron-circle-left:before, .mw-angle-circled-left:before { content: @mw-var-chevron-circle-left; } /* '' */
.mw-var-chevron-circle-right:before, .mw-angle-circled-right:before { content: @mw-var-chevron-circle-right; } /* '' */
.mw-var-chevron-circle-up:before, .mw-angle-circled-up:before { content: @mw-var-chevron-circle-up; } /* '' */
.mw-search:before { content: @mw-search; } /* '' */
.mw-cancel-circled:before { content: @mw-cancel-circled; } /* '' */
.mw-mwach-baby-phone:before { content: @mw-mwach-baby-phone; } /* '' */
.mw-mwach-phone-add:before { content: @mw-mwach-phone-add; } /* '' */
.mw-mwach-phone-d:before { content: @mw-mwach-phone-d; } /* '' */
.mw-mwach-phone:before { content: @mw-mwach-phone; } /* '' */
.mw-angle-left:before, .mw-var-chevron-left:before, .mw-chevron-left:before, .glyphicon-chevron-left { content: @mw-var-chevron-left; } /* '' */
.mw-angle-right:before, .mw-var-chevron-right:before, .mw-chevron-right:before, .glyphicon-chevron-right  { content: @mw-var-chevron-right; } /* '' */
.mw-angle-down:before, .mw-var-chevron-down:before, .mw-chevron-down:before, .glyphicon-chevron-down { content: @mw-var-chevron-down; } /* '' */
.mw-angle-up:before, .mw-var-chevron-up:before, .mw-chevron-up:before, .glyphicon-chevron-up { content: @mw-var-chevron-up; } /* '' */
.mw-reply:before { content: @mw-reply; } /* '' */
.mw-calendar:before, .glyphicon-calendar:before { content: @mw-calendar; } /* '' */
.mw-language-1:before { content: @mw-language-1; } /* '' */
.mw-redo:before { content: @mw-redo; } /* '' */
.mw-baby-2:before { content: @mw-baby-2; } /* '' */
.mw-baby-1:before { content: @mw-baby-1; } /* '' */
.mw-baby-noun:before { content: @mw-baby-noun; } /* '' */
.mw-monitor-bdr:before { content: @mw-monitor-bdr; } /* '' */
.mw-huge {
    font-size: 20em;
    display: block;
    margin-top: 0.2em;
}

.mw-label {
    text-align: center;
    display: block;
    font-size: 2em;
    margin-bottom: 1em;
}


gui-ng: Added blur state style to dataviews (#136)

@charset "UTF-8";
/*!
 * OS.js - JavaScript Operating System
 *
 * Copyright (c) 2011-2015, 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
 */

@base_background_color  : #ebebeb;
@base_foreground_color  : #242424;
@base_shadow_unfocused  : 0px 0px 10px 1px rgba(0, 0, 0, .3);
@base_shadow_focused    : 0px 0px 10px 1px rgba(0, 0, 0, .6);

@gui_selected_background_color       : rgb(45, 115, 210);
@gui_selected_blur_background_color  : rgba(45, 115, 210, .8);
@gui_selected_foreground_color       : #ffffff;

@gui_border_color                    : #b2b2b2;
@gui_background_color                : #d9d9d9;

@gui_input_border_color              : #c1c1c1;
@gui_input_background_color          : #ffffff;
@gui_input_foreground_color          : @base_foreground_color;

@gui_input_disabled_border_color     : #cccccc;
@gui_input_disabled_background_color : #dddddd;
@gui_input_disabled_foreground_color : #C7C7C7;

@gui_button_border_color             : @gui_input_border_color;
@gui_button_background_color         : #f8f8f8;
@gui_button_foreground_color         : @base_foreground_color;
@gui_button_background               : linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);

@gui_button_active_border_color      : #242424;
@gui_button_active_background_color  : @gui_button_background_color;
@gui_button_active_foreground_color  : @base_foreground_color;
@gui_button_active_background        : linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);

@gui_button_disabled_border_color    : @gui_input_disabled_border_color;
@gui_button_disabled_background_color: @gui_input_disabled_background_color;
@gui_button_disabled_foreground_color: @base_foreground_color;
@gui_button_disabled_background      : @gui_input_disabled_background_color;

/**
 * ===========================================================================
 *                                 CLASSES
 * ===========================================================================
 */

.theme_border(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.theme_border_top(@radius) {
  -webkit-border-top-left-radius: @radius;
     -moz-border-top-left-radius: @radius;
          border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
     -moz-border-top-right-radius: @radius;
          border-top-right-radius: @radius;
}

.theme_border_bottom(@radius) {
  -webkit-border-bottom-left-radius: @radius;
     -moz-border-bottom-left-radius: @radius;
          border-bottom-left-radius: @radius;
  -webkit-border-bottom-right-radius: @radius;
     -moz-border-bottom-right-radius: @radius;
          border-bottom-right-radius: @radius;
}

.theme_button() {
  cursor : pointer;
  padding : 4px;
  background-color: @gui_button_background_color;
  background: @gui_button_background;
  border: 1px solid @gui_button_border_color;
  color: @gui_button_foreground_color;
}
.theme_button_disabled() {
  border-color : @gui_button_disabled_border_color;
  color : @gui_button_disabled_foreground_color;
  background-color: @gui_button_disabled_background_color;
  background: @gui_button_disabled_background;
}
.theme_button_active() {
  border-color : @gui_button_active_border_color;
  color : @gui_button_active_foreground_color;
  background-color: @gui_button_active_background_color;
  background: @gui_button_active_background;
}

.theme_label_disabled() {
  color : @gui_input_disabled_foreground_color;
}
.theme_text_input() {
  padding : 4px;
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
.theme_text_input_disabled() {
  border-color : @gui_input_disabled_border_color;
  background-color : @gui_input_disabled_background_color;
  color : @gui_input_disabled_foreground_color;
}

/**
 * ===========================================================================
 *                                 OVERRIDES
 * ===========================================================================
 */

body, input, button, textarea, label, select {
  font-family:Karla, Sans-serif;
  font-weight:normal;
  font-style:normal;
  color: @base_foreground_color;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-button {
  background : @gui_border_color;
  color : @gui_background_color;
  width : 12px;
  height : 12px;
  display : none;
}
::-webkit-scrollbar-track {
  background : @base_background_color;
}
::-webkit-scrollbar-track-piece {
  background : @base_background_color;
}
::-webkit-scrollbar-thumb {
  background : @gui_border_color;
}
::-webkit-scrollbar-corner {
  background : @base_background_color;
}
::-webkit-resizer {
  background : @base_background_color;
}

/**
 * ===========================================================================
 *                                  WM
 * ===========================================================================
 */

body[data-attention="true"]:after {
  background-color : @base_foreground_color;
}

corewm-panel {
  color : #ffffff; /* Window Manager manages this */
  padding : 4px;
}
corewm-panel:before {
  background : #101010; /* Window Manager manages this */
  box-shadow : 0px 0px 10px 1px rgba(34, 34, 34, .3);
  opacity : .85;
}
  corewm-panel li.Button {
    margin-top : -1px;
    cursor : pointer;
    background : transparent !important;
  }

corewm-panel .PanelItemClock {
  font-weight : bold;
  text-align : right;
  line-height : 26px;
}

corewm-panel .PanelItemWindowList li.Button {
  opacity : .50;
}
corewm-panel .PanelItemWindowList li.Button.Focused {
  opacity : 1;
}

corewm-panel-container {
  padding : 4px;
}

/* Notifications */
application-splash {
  box-shadow : @base_shadow_focused;
  background : @base_background_color;
  box-shadow : 0px 0px 10px 1px rgba(34, 34, 34, .3);
  opacity : .85;
  cursor : pointer;
}
corewm-notification {
  color : #fff; /* Window Manager manages this */
  cursor : pointer;
}
corewm-notification:before {
  background : #101010; /* Window Manager manages this */
  box-shadow : 0px 0px 10px 1px rgba(34, 34, 34, .3);
  opacity : .85;
}
corewm-notification .Title {
  font-weight : bold;
}

corewm-notification .Title,
corewm-notification .Message {
  line-height : 16px;
}

/* Desktop drop wallpaper effect */
#Background.Blinking {
  background : #fff;
}

/* Window Switcher */
corewm-window-switcher {
  opacity : 0.8;
  box-shadow : @base_shadow_focused;
  background : @base_background_color;
}
corewm-window-switcher > div.Active {
  background : @gui_selected_background_color;
}
corewm-window-switcher > div.Active > span {
  color : @gui_selected_foreground_color;
}

/**
 * ===========================================================================
 *                                WINDOW
 * ===========================================================================
 */
application-window {
  opacity : 0.8;
}
application-window:before {
  box-shadow : @base_shadow_unfocused;
  background : @base_background_color;
}
application-window[data-focused="true"] {
  opacity : 1.0;
}
application-window[data-focused="true"]:before {
  box-shadow : @base_shadow_focused;
}
application-window-top {
}
application-window-content {
  overflow : hidden;
}
application-window-top:active {
  cursor : move;
  cursor : pointer;
}
application-window-title {
  font-weight : bold;
  color : @base_foreground_color;
  opacity : .5;
}
application-window-title:active {
  cursor : move;
  cursor : pointer;
}
application-window[data-focused="true"] application-window-title {
  opacity : 1;
}
application-window-buttons > .application-window-button-entry {
  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, .7);
  border-radius : 1px;
  .theme_border_top(3px);
  margin : -4px;
}
application-window-disabled {
  background : #000;
  opacity : 0.5;
  cursor : not-allowed;
}
application-window-warning {
  background : #FFB800;
  color : #fff;
  border-color : #DF9F15;
}
application-window-warning > div:nth-child(1) {
}
application-window-warning > div:nth-child(1):hover {
  color : #111;
  cursor : pointer;
  opacity : .9;
}

/**
 * ===========================================================================
 *                              CONTAINERS
 * ===========================================================================
 */

/* Container */
gui-container {
  margin : 4px;
}

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

/* Paned View */
  gui-paned-view > gui-paned-view-handle {
    min-width : 8px;
    width : 8px;
    cursor : ew-resize;
  }

/* IFrame */
gui-iframe {
  background-color : @gui_input_background_color;
}
  gui-iframe > iframe {
    background-color : @gui_input_background_color;
  }

/* Button Bar */
/* Toolbar */
gui-toolbar > *,
gui-button-bar > * {
  margin : 4px;
}

gui-toolbar {
}

gui-toolbar[data-orientation="vertical"] {
  margin-left : 0;
  margin-right : 0;
  margin-top : 4px;
  margin-bottom : 4px;
}

/* Tabs */
  gui-tabs > ul {
    height : 25px;
  }
    gui-tabs > ul > li {
      padding-left : 8px;
      padding-right : 8px;
      cursor : pointer;
      background-color : @gui_background_color;
      border : 1px solid transparent;
      border-bottom : 0 none;
      line-height : 25px;
    }
    gui-tabs > ul > li.gui-active {
      background-color : transparent;
      border-color : @gui_border_color;
    }
      gui-tabs > ul > li.gui-active:after {
        bottom : -1px;
        border-bottom : 1px solid @base_background_color;
      }
  gui-tabs > div {
    height : ~"calc(100% - 25px)";
    border : 1px solid @gui_border_color;
  }

    gui-tab-container {
      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 {
    .theme_button();
  }
  gui-button button.gui-active,
  gui-button button:active {
    .theme_button_active();
  }
  gui-button button.gui-active:disabled,
  gui-button button:disabled:active,
  gui-button button:disabled {
    .theme_button_disabled();
  }
  gui-button button:disabled img {
    opacity : .5;
  }
  gui-button button:disabled {
    cursor : default;
    color : @gui_input_disabled_foreground_color;
  }
  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: @gui_input_background_color;
    border: 1px solid @gui_input_border_color;
    width : 16px;
    height : 16px;
    line-height: 12px;
    color : @gui_input_foreground_color;
    font-family: Arial;
  }

  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 : @gui_input_disabled_foreground_color;
  }

  gui-radio input:disabled,
  gui-checkbox input:disabled {
    border-color : @gui_input_disabled_border_color;
    background-color : @gui_input_disabled_background_color;
  }

  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 {
    .theme_text_input();
    padding-right : 20px;
  }
  gui-select select:disabled {
    .theme_text_input_disabled();
  }

  gui-select:before {
    right: 1px;
    top: 1px;
    bottom : 1px;
    width: 22px;
    background: @gui_input_background_color;
  }
  gui-select:after {
    content: '<>';
    font: 11px "Consolas", monospace;
    color: @gui_input_border_color;
    right: 2px;
    top: 5px;
    padding: 0 0 2px;
    border-bottom: 1px solid @gui_input_border_color;

    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  gui-select[data-disabled="true"]:before {
    background-color : @gui_input_disabled_background_color;
  }

/* Select List */
gui-select-list select {
  .theme_text_input();
}
gui-select-list select:disabled {
  .theme_text_input_disabled();
}

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

  gui-slider input::-webkit-slider-runnable-track {
    height : 4px;
    background-color : @gui_background_color;
  }

  gui-slider input::-ms-track {
    height : 4px;
    background-color : @gui_background_color;
  }

  /*
   * RANGE THUMB
   *
   * TODO
   * TODO DISABLED STATE
   * TODO
   */

  gui-slider input::-moz-range-thumb {
    .theme_button();
    height : 18px;
    width : 10px;
  }
  gui-slider input:disabled::-moz-range-thumb {
    border-color : @gui_input_disabled_border_color;
  }

  gui-slider input::-webkit-slider-thumb {
    .theme_button();
    height : 24px;
    width : 16px;
    margin-top : -10px;
  }
  gui-slider input:disabled::-webkit-range-thumb {
    background-color : @gui_background_color;
    border-color : @gui_input_disabled_border_color;
  }

  gui-slider input::-ms-thumb {
    .theme_button();
    height : 24px;
    width : 16px;
  }
  gui-slider input:disabled::-ms-thumb {
    border-color : @gui_input_disabled_border_color;
  }

  /**
   * MISC
   */
  gui-slider input[type=range]::-ms-fill-lower {
    border : 0 none;
    background-color : @gui_background_color;
  }
  gui-slider input[type=range]::-ms-fill-upper {
    border : 0 none;
    background-color : @gui_background_color;
  }
  gui-slider input[type=range]:focus::-ms-fill-lower {
    background-color : @gui_background_color;
  }
  gui-slider input[type=range]:focus::-ms-fill-upper {
    background-color : @gui_background_color;
  }

/* Switch */
gui-switch {
  height : 26px;
}
  gui-switch div {
    width : 48px;

    .theme_text_input();
    padding : 0;
  }

  gui-switch button {
    .theme_button();
  }

  gui-switch > label > div {
    margin-left : 4px;
  }

  gui-switch[data-disabled="true"] button {
    .theme_button_disabled();
  }
  gui-switch[data-disabled="true"] div {
    .theme_text_input_disabled();
    padding : 0;
  }

  gui-switch[data-disabled="true"] button,
  gui-switch[data-disabled="true"] label {
    .theme_label_disabled();
  }

/* Text Field */
/* Password Field */
gui-password,
gui-text {
  height : 26px;
}
  gui-password input,
  gui-text input {
    .theme_text_input();
    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 {
    .theme_text_input_disabled();
  }

  gui-password[data-disabled="true"] label,
  gui-text[data-disabled="true"] label {
    .theme_label_disabled();
  }

/* Text Area */
  gui-textarea textarea {
    .theme_text_input();
  }
  gui-textarea textarea:disabled {
    .theme_text_input_disabled();
  }

  gui-textarea[data-disabled="true"] label {
    .theme_label_disabled();
  }

/* Rich Text */
gui-richtext {
  padding : 4px;
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
  gui-richtext > iframe {
    background-color : @gui_input_background_color;
  }

/* Grid */
gui-grid > gui-grid-row > gui-grid-entry { /* li */
  margin: 4px;
}

/* Modal Input */
gui-input-modal input {
  .theme_text_input();
  .theme_text_input_disabled();
}
gui-input-modal button {
  margin-left : 4px;
  .theme_button();
  padding-left : 8px;
  padding-right : 8px;
}

/**
 * ===========================================================================
 *                                 MISC
 * ===========================================================================
 */

/* Video */
gui-video {
}
  gui-video > video {
  }

/* Color Swatch */
gui-color-swatch {
  border: 1px solid @gui_input_border_color;
}

/* Color Box */
gui-color-box {
  .theme_button();
}
  gui-color-box > div {
    background : #fff;
  }

/* Menu */
gui-menu {
  border : 1px solid transparent;
  background: @base_background_color;
  box-shadow : @base_shadow_focused;
  color : @base_foreground_color;
}
  gui-menu > gui-menu-entry {
    color: @base_foreground_color;
  }
  gui-menu > gui-menu-entry > label {
    cursor : pointer;
    line-height : 18px;
    padding : 4px;
  }

  gui-menu > gui-menu-entry.gui-menu-expand {
    padding-right : 16px;
  }
  gui-menu > gui-menu-entry.gui-menu-expand:after {
    content : '>';
    padding : 4px;
  }

  gui-menu > gui-menu-entry:hover {
    background-color: @gui_selected_background_color;
  }
  gui-menu > gui-menu-entry:hover > label {
    color: @gui_selected_foreground_color;
  }
    gui-menu > gui-menu-entry {
      background-position : 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 : @gui_input_disabled_foreground_color;
    }

/* 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: @gui_selected_background_color;
    color: @gui_selected_foreground_color;
  }
  gui-menu-bar-entry[data-disabled="true"] > span {
    color : @gui_input_disabled_foreground_color;
  }

/* Progressbar */
gui-progress-bar {
  display : block;
  line-height : 26px;
  height : 26px;
}
  gui-progress-bar:before {
    background-color : @gui_background_color;
    border: 1px solid @gui_input_border_color;
    padding : 4px;
  }
  gui-progress-bar > div {
    background: @gui_selected_background_color url('/themes/styles/default/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 : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
  padding : 4px;
}
  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: @gui_selected_background_color;
      color: @gui_selected_foreground_color;
    }
    gui-icon-view-entry.gui-active > div > span {
      background: @gui_selected_background_color;
    }

/* List View */
gui-list-view {
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
  gui-list-view-head {
    background-color : @gui_background_color;
  }
      gui-list-view-row {
        padding : 4px;
      }
      gui-list-view-column {
      }
      gui-list-view-column.gui-has-image {
        padding-left : 24px;
      }
      gui-list-view[data-icon-size="32"] gui-list-view-column.gui-has-image {
        padding-left : 40px;
      }

    gui-list-view-row.gui-active {
      background-color: @gui_selected_blur_background_color;
      color: @gui_selected_foreground_color;
    }
    gui-list-view.gui-element-focused gui-list-view-row.gui-active {
      background-color: @gui_selected_background_color;
      color: @gui_selected_foreground_color;
    }

    gui-list-view-column-resizer {
      cursor : ew-resize;
      width : 3px;
      right : -3px;
    }
      gui-list-view-column-resizer:after {
        background : @gui_input_border_color;
      }

/* Tree View */
gui-tree-view {
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
    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-active > div {
      background-color: @gui_selected_background_color;
      color: @gui_selected_foreground_color;
    }

  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;
  }
  gui-tree-view-entry.gui-expandable.gui-expanded > gui-tree-view-expander:before {
    content : '\25BC';
  }

@charset "UTF-8";
/*!
 * OS.js - JavaScript Operating System
 *
 * Copyright (c) 2011-2015, 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
 */

@base_background_color  : #ebebeb;
@base_foreground_color  : #242424;
@base_shadow_unfocused  : 0px 0px 10px 1px rgba(0, 0, 0, .3);
@base_shadow_focused    : 0px 0px 10px 1px rgba(0, 0, 0, .6);

@gui_selected_background_color       : #2d73d2;
@gui_selected_foreground_color       : #ffffff;

@gui_border_color                    : #b2b2b2;
@gui_background_color                : #d9d9d9;

@gui_input_border_color              : #c1c1c1;
@gui_input_background_color          : #ffffff;
@gui_input_foreground_color          : @base_foreground_color;

@gui_input_disabled_border_color     : #cccccc;
@gui_input_disabled_background_color : #dddddd;
@gui_input_disabled_foreground_color : #C7C7C7;

@gui_button_border_color             : @gui_input_border_color;
@gui_button_background_color         : #f8f8f8;
@gui_button_foreground_color         : @base_foreground_color;
@gui_button_background               : linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);

@gui_button_active_border_color      : #242424;
@gui_button_active_background_color  : @gui_button_background_color;
@gui_button_active_foreground_color  : @base_foreground_color;
@gui_button_active_background        : linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);

@gui_button_disabled_border_color    : @gui_input_disabled_border_color;
@gui_button_disabled_background_color: @gui_input_disabled_background_color;
@gui_button_disabled_foreground_color: @base_foreground_color;
@gui_button_disabled_background      : @gui_input_disabled_background_color;

/**
 * ===========================================================================
 *                                 CLASSES
 * ===========================================================================
 */

.theme_border(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.theme_border_top(@radius) {
  -webkit-border-top-left-radius: @radius;
     -moz-border-top-left-radius: @radius;
          border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
     -moz-border-top-right-radius: @radius;
          border-top-right-radius: @radius;
}

.theme_border_bottom(@radius) {
  -webkit-border-bottom-left-radius: @radius;
     -moz-border-bottom-left-radius: @radius;
          border-bottom-left-radius: @radius;
  -webkit-border-bottom-right-radius: @radius;
     -moz-border-bottom-right-radius: @radius;
          border-bottom-right-radius: @radius;
}

.theme_button() {
  cursor : pointer;
  padding : 4px;
  background-color: @gui_button_background_color;
  background: @gui_button_background;
  border: 1px solid @gui_button_border_color;
  color: @gui_button_foreground_color;
}
.theme_button_disabled() {
  border-color : @gui_button_disabled_border_color;
  color : @gui_button_disabled_foreground_color;
  background-color: @gui_button_disabled_background_color;
  background: @gui_button_disabled_background;
}
.theme_button_active() {
  border-color : @gui_button_active_border_color;
  color : @gui_button_active_foreground_color;
  background-color: @gui_button_active_background_color;
  background: @gui_button_active_background;
}

.theme_label_disabled() {
  color : @gui_input_disabled_foreground_color;
}
.theme_text_input() {
  padding : 4px;
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
.theme_text_input_disabled() {
  border-color : @gui_input_disabled_border_color;
  background-color : @gui_input_disabled_background_color;
  color : @gui_input_disabled_foreground_color;
}

/**
 * ===========================================================================
 *                                 OVERRIDES
 * ===========================================================================
 */

body, input, button, textarea, label, select {
  font-family:Karla, Sans-serif;
  font-weight:normal;
  font-style:normal;
  color: @base_foreground_color;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-button {
  background : @gui_border_color;
  color : @gui_background_color;
  width : 12px;
  height : 12px;
  display : none;
}
::-webkit-scrollbar-track {
  background : @base_background_color;
}
::-webkit-scrollbar-track-piece {
  background : @base_background_color;
}
::-webkit-scrollbar-thumb {
  background : @gui_border_color;
}
::-webkit-scrollbar-corner {
  background : @base_background_color;
}
::-webkit-resizer {
  background : @base_background_color;
}

/**
 * ===========================================================================
 *                                  WM
 * ===========================================================================
 */

body[data-attention="true"]:after {
  background-color : @base_foreground_color;
}

corewm-panel {
  color : #ffffff; /* Window Manager manages this */
  padding : 4px;
}
corewm-panel:before {
  background : #101010; /* Window Manager manages this */
  box-shadow : 0px 0px 10px 1px rgba(34, 34, 34, .3);
  opacity : .85;
}
  corewm-panel li.Button {
    margin-top : -1px;
    cursor : pointer;
    background : transparent !important;
  }

corewm-panel .PanelItemClock {
  font-weight : bold;
  text-align : right;
  line-height : 26px;
}

corewm-panel .PanelItemWindowList li.Button {
  opacity : .50;
}
corewm-panel .PanelItemWindowList li.Button.Focused {
  opacity : 1;
}

corewm-panel-container {
  padding : 4px;
}

/* Notifications */
application-splash {
  box-shadow : @base_shadow_focused;
  background : @base_background_color;
  box-shadow : 0px 0px 10px 1px rgba(34, 34, 34, .3);
  opacity : .85;
  cursor : pointer;
}
corewm-notification {
  color : #fff; /* Window Manager manages this */
  cursor : pointer;
}
corewm-notification:before {
  background : #101010; /* Window Manager manages this */
  box-shadow : 0px 0px 10px 1px rgba(34, 34, 34, .3);
  opacity : .85;
}
corewm-notification .Title {
  font-weight : bold;
}

corewm-notification .Title,
corewm-notification .Message {
  line-height : 16px;
}

/* Desktop drop wallpaper effect */
#Background.Blinking {
  background : #fff;
}

/* Window Switcher */
corewm-window-switcher {
  opacity : 0.8;
  box-shadow : @base_shadow_focused;
  background : @base_background_color;
}
corewm-window-switcher > div.Active {
  background : @gui_selected_background_color;
}
corewm-window-switcher > div.Active > span {
  color : @gui_selected_foreground_color;
}

/**
 * ===========================================================================
 *                                WINDOW
 * ===========================================================================
 */
application-window {
  opacity : 0.8;
}
application-window:before {
  box-shadow : @base_shadow_unfocused;
  background : @base_background_color;
}
application-window[data-focused="true"] {
  opacity : 1.0;
}
application-window[data-focused="true"]:before {
  box-shadow : @base_shadow_focused;
}
application-window-top {
}
application-window-content {
  overflow : hidden;
}
application-window-top:active {
  cursor : move;
  cursor : pointer;
}
application-window-title {
  font-weight : bold;
  color : @base_foreground_color;
  opacity : .5;
}
application-window-title:active {
  cursor : move;
  cursor : pointer;
}
application-window[data-focused="true"] application-window-title {
  opacity : 1;
}
application-window-buttons > .application-window-button-entry {
  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, .7);
  border-radius : 1px;
  .theme_border_top(3px);
  margin : -4px;
}
application-window-disabled {
  background : #000;
  opacity : 0.5;
  cursor : not-allowed;
}
application-window-warning {
  background : #FFB800;
  color : #fff;
  border-color : #DF9F15;
}
application-window-warning > div:nth-child(1) {
}
application-window-warning > div:nth-child(1):hover {
  color : #111;
  cursor : pointer;
  opacity : .9;
}

/**
 * ===========================================================================
 *                              CONTAINERS
 * ===========================================================================
 */

/* Container */
gui-container {
  margin : 4px;
}

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

/* Paned View */
  gui-paned-view > gui-paned-view-handle {
    min-width : 8px;
    width : 8px;
    cursor : ew-resize;
  }

/* IFrame */
gui-iframe {
  background-color : @gui_input_background_color;
}
  gui-iframe > iframe {
    background-color : @gui_input_background_color;
  }

/* Button Bar */
/* Toolbar */
gui-toolbar > *,
gui-button-bar > * {
  margin : 4px;
}

gui-toolbar {
}

gui-toolbar[data-orientation="vertical"] {
  margin-left : 0;
  margin-right : 0;
  margin-top : 4px;
  margin-bottom : 4px;
}

/* Tabs */
  gui-tabs > ul {
    height : 25px;
  }
    gui-tabs > ul > li {
      padding-left : 8px;
      padding-right : 8px;
      cursor : pointer;
      background-color : @gui_background_color;
      border : 1px solid transparent;
      border-bottom : 0 none;
      line-height : 25px;
    }
    gui-tabs > ul > li.gui-active {
      background-color : transparent;
      border-color : @gui_border_color;
    }
      gui-tabs > ul > li.gui-active:after {
        bottom : -1px;
        border-bottom : 1px solid @base_background_color;
      }
  gui-tabs > div {
    height : ~"calc(100% - 25px)";
    border : 1px solid @gui_border_color;
  }

    gui-tab-container {
      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 {
    .theme_button();
  }
  gui-button button.gui-active,
  gui-button button:active {
    .theme_button_active();
  }
  gui-button button.gui-active:disabled,
  gui-button button:disabled:active,
  gui-button button:disabled {
    .theme_button_disabled();
  }
  gui-button button:disabled img {
    opacity : .5;
  }
  gui-button button:disabled {
    cursor : default;
    color : @gui_input_disabled_foreground_color;
  }
  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: @gui_input_background_color;
    border: 1px solid @gui_input_border_color;
    width : 16px;
    height : 16px;
    line-height: 12px;
    color : @gui_input_foreground_color;
    font-family: Arial;
  }

  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 : @gui_input_disabled_foreground_color;
  }

  gui-radio input:disabled,
  gui-checkbox input:disabled {
    border-color : @gui_input_disabled_border_color;
    background-color : @gui_input_disabled_background_color;
  }

  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 {
    .theme_text_input();
    padding-right : 20px;
  }
  gui-select select:disabled {
    .theme_text_input_disabled();
  }

  gui-select:before {
    right: 1px;
    top: 1px;
    bottom : 1px;
    width: 22px;
    background: @gui_input_background_color;
  }
  gui-select:after {
    content: '<>';
    font: 11px "Consolas", monospace;
    color: @gui_input_border_color;
    right: 2px;
    top: 5px;
    padding: 0 0 2px;
    border-bottom: 1px solid @gui_input_border_color;

    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  gui-select[data-disabled="true"]:before {
    background-color : @gui_input_disabled_background_color;
  }

/* Select List */
gui-select-list select {
  .theme_text_input();
}
gui-select-list select:disabled {
  .theme_text_input_disabled();
}

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

  gui-slider input::-webkit-slider-runnable-track {
    height : 4px;
    background-color : @gui_background_color;
  }

  gui-slider input::-ms-track {
    height : 4px;
    background-color : @gui_background_color;
  }

  /*
   * RANGE THUMB
   *
   * TODO
   * TODO DISABLED STATE
   * TODO
   */

  gui-slider input::-moz-range-thumb {
    .theme_button();
    height : 18px;
    width : 10px;
  }
  gui-slider input:disabled::-moz-range-thumb {
    border-color : @gui_input_disabled_border_color;
  }

  gui-slider input::-webkit-slider-thumb {
    .theme_button();
    height : 24px;
    width : 16px;
    margin-top : -10px;
  }
  gui-slider input:disabled::-webkit-range-thumb {
    background-color : @gui_background_color;
    border-color : @gui_input_disabled_border_color;
  }

  gui-slider input::-ms-thumb {
    .theme_button();
    height : 24px;
    width : 16px;
  }
  gui-slider input:disabled::-ms-thumb {
    border-color : @gui_input_disabled_border_color;
  }

  /**
   * MISC
   */
  gui-slider input[type=range]::-ms-fill-lower {
    border : 0 none;
    background-color : @gui_background_color;
  }
  gui-slider input[type=range]::-ms-fill-upper {
    border : 0 none;
    background-color : @gui_background_color;
  }
  gui-slider input[type=range]:focus::-ms-fill-lower {
    background-color : @gui_background_color;
  }
  gui-slider input[type=range]:focus::-ms-fill-upper {
    background-color : @gui_background_color;
  }

/* Switch */
gui-switch {
  height : 26px;
}
  gui-switch div {
    width : 48px;

    .theme_text_input();
    padding : 0;
  }

  gui-switch button {
    .theme_button();
  }

  gui-switch > label > div {
    margin-left : 4px;
  }

  gui-switch[data-disabled="true"] button {
    .theme_button_disabled();
  }
  gui-switch[data-disabled="true"] div {
    .theme_text_input_disabled();
    padding : 0;
  }

  gui-switch[data-disabled="true"] button,
  gui-switch[data-disabled="true"] label {
    .theme_label_disabled();
  }

/* Text Field */
/* Password Field */
gui-password,
gui-text {
  height : 26px;
}
  gui-password input,
  gui-text input {
    .theme_text_input();
    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 {
    .theme_text_input_disabled();
  }

  gui-password[data-disabled="true"] label,
  gui-text[data-disabled="true"] label {
    .theme_label_disabled();
  }

/* Text Area */
  gui-textarea textarea {
    .theme_text_input();
  }
  gui-textarea textarea:disabled {
    .theme_text_input_disabled();
  }

  gui-textarea[data-disabled="true"] label {
    .theme_label_disabled();
  }

/* Rich Text */
gui-richtext {
  padding : 4px;
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
  gui-richtext > iframe {
    background-color : @gui_input_background_color;
  }

/* Grid */
gui-grid > gui-grid-row > gui-grid-entry { /* li */
  margin: 4px;
}

/* Modal Input */
gui-input-modal input {
  .theme_text_input();
  .theme_text_input_disabled();
}
gui-input-modal button {
  margin-left : 4px;
  .theme_button();
  padding-left : 8px;
  padding-right : 8px;
}

/**
 * ===========================================================================
 *                                 MISC
 * ===========================================================================
 */

/* Video */
gui-video {
}
  gui-video > video {
  }

/* Color Swatch */
gui-color-swatch {
  border: 1px solid @gui_input_border_color;
}

/* Color Box */
gui-color-box {
  .theme_button();
}
  gui-color-box > div {
    background : #fff;
  }

/* Menu */
gui-menu {
  border : 1px solid transparent;
  background: @base_background_color;
  box-shadow : @base_shadow_focused;
  color : @base_foreground_color;
}
  gui-menu > gui-menu-entry {
    color: @base_foreground_color;
  }
  gui-menu > gui-menu-entry > label {
    cursor : pointer;
    line-height : 18px;
    padding : 4px;
  }

  gui-menu > gui-menu-entry.gui-menu-expand {
    padding-right : 16px;
  }
  gui-menu > gui-menu-entry.gui-menu-expand:after {
    content : '>';
    padding : 4px;
  }

  gui-menu > gui-menu-entry:hover {
    background-color: @gui_selected_background_color;
  }
  gui-menu > gui-menu-entry:hover > label {
    color: @gui_selected_foreground_color;
  }
    gui-menu > gui-menu-entry {
      background-position : 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 : @gui_input_disabled_foreground_color;
    }

/* 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: @gui_selected_background_color;
    color: @gui_selected_foreground_color;
  }
  gui-menu-bar-entry[data-disabled="true"] > span {
    color : @gui_input_disabled_foreground_color;
  }

/* Progressbar */
gui-progress-bar {
  display : block;
  line-height : 26px;
  height : 26px;
}
  gui-progress-bar:before {
    background-color : @gui_background_color;
    border: 1px solid @gui_input_border_color;
    padding : 4px;
  }
  gui-progress-bar > div {
    background: @gui_selected_background_color url('/themes/styles/default/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 : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
  padding : 4px;
}
  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: @gui_selected_background_color;
      color: @gui_selected_foreground_color;
    }
    gui-icon-view-entry.gui-active > div > span {
      background: @gui_selected_background_color;
    }

/* List View */
gui-list-view {
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
  gui-list-view-head {
    background-color : @gui_background_color;
  }
      gui-list-view-row {
        padding : 4px;
      }
      gui-list-view-column {
      }
      gui-list-view-column.gui-has-image {
        padding-left : 24px;
      }
      gui-list-view[data-icon-size="32"] gui-list-view-column.gui-has-image {
        padding-left : 40px;
      }

    gui-list-view-row.gui-active {
      background: @gui_selected_background_color;
      color: @gui_selected_foreground_color;
    }

    gui-list-view-column-resizer {
      cursor : ew-resize;
      width : 3px;
      right : -3px;
    }
      gui-list-view-column-resizer:after {
        background : @gui_input_border_color;
      }

/* Tree View */
gui-tree-view {
  background-color : @gui_input_background_color;
  border : 1px solid @gui_input_border_color;
}
    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-active > div {
      background-color: @gui_selected_background_color;
      color: @gui_selected_foreground_color;
    }

  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;
  }
  gui-tree-view-entry.gui-expandable.gui-expanded > gui-tree-view-expander:before {
    content : '\25BC';
  }


Added Roboto font

Added Roboto font


SW-7892 Fixed: Zipcode field length in mobile view

/* Standard input fields. */
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"] {
    @boxShadowColor: rgba(red(@borderColor), green(@borderColor), blue(@borderColor), .9);
    .appearance(none);
    .border-radius(3px);
    .box-sizing();
    .unitize-width(290);
    .unitize-padding(9, 10, 10, 10);
    .box-shadow(inset 0 1px 1px @boxShadowColor);
    background: @lightGradientEnd;
    border: 1px solid @borderColor;
    border-top-color: darken(@borderColor, 5%);
    color: @lightTextColor;

    &:focus {
	.box-shadow(0 0 0 transparent);
	outline: none;
	border-color: @primaryColor;
	background: #fff;
	color: @primaryTextColor;
    }

    &.has--error {
	color: @errorText;
	background: @errorBackground;
	border-color: @errorBorderColor;
    }

    // Input field spacing
    &.input--field {
	.unitize(10, 16, margin-bottom);
	width: 100%;

	&.input--field-street {
	    margin-right: 2%;
	    width: 74%;
	    float: left;
	}

	&.input--field-streetnumber {
	    width: 24%;
	    float: left;
	}

	&.input--field-zipcode {
	    margin-right: 2%;
	    width: 30%;
	    float: left;
	}

	&.input--field-city {
	    width: 68%;
	    float: left;
	}
    }

}

.js--fancy-select {
    .border-radius(3px);
    .box-sizing();
    .unitize-width(290);
    .unitize(44, 16, line-height);
    .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.1));
    .linear-gradient(#ffffff, #f7f8fa);
    .clearfix();
    display: inline-block;
    position: relative;
    border: 1px solid @borderColor;
    overflow: hidden;
    cursor: pointer;

    &:hover {
	.linear-gradient(#f7f8fa, #ffffff);
    }

    &.js--is--focused {
	border-color: @primaryColor;
    }

    select {
	.unitize-height(44);
	.appearance(none);
	.opacity(0);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	cursor: pointer;
	z-index: 1000;

	// Removes the blue glow around the select field
	// see: http://www.faridesign.net/2012/02/remove-border-around-input-chrome-safari/
	&:focus {
	    outline: none;
	}
    }

    .js--fancy-select-text {
	.unitize-padding(0, 40, 0, 10);
	border-right: 1px solid #fff;
	font-weight: bold;
	width: 100%;

	// CSS truncating
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    }

    .js--fancy-select-trigger {
	.unitize-width(30);
	position: absolute;
	right: 0;
	top: 0;
	border-left: 1px solid @borderColor;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	font-weight: bold;
    }

    // State disabled
    &.is--disabled {
	.opacity(.5);

	select {
	    cursor: not-allowed;
	}
    }

    // Error state
    &.has--error {
	color: @errorText;
	border-color: @errorBorderColor;
	background: @errorBackground;

	.js--fancy-select-trigger {
	    border-color: @errorBorderColor;
	}

	.js--fancy-select-text {
	    border-color: lighten(@errorBorderColor, 10%);
	}
    }
}

// Quantity field
.js--quantity-field {
    .clearfix();

    input[type="number"] {
	width: 78%;
	margin: 0 2% 0 0;
    }

    input[type="number"],
    .js--quantity-button {
	float: left;
    }

    .js--quantity-button {
	width: 20%;
    }

    .js--quantity-button > a {
	.user-select(none);
	.unitize-height(20, 16);
	.unitize(18, 16, line-height);
	display: block;
	padding: 0;
	font-weight: bold;
	text-align: center;
    }
    .js--quantity-button-plus {
	.unitize-margin(0, 0, 4, 0, 16);
    }
}

@media screen and (min-width: @tabletViewportWidth) {

    /* Standard input fields. */
    .input--field {
	.unitize(15, 16, margin-bottom);

	.input--field-street {
	    margin-right: 2%;
	    width: 86%;
	}
	.input--field-streetnumber {
	    width: 12%;
	}
	.input--field-zipcode {
	    margin-right: 2%;
	    width: 20%;
	}
	.input--field-city {
	    width: 78%;
	}
    }

}

@media screen and (min-width: @desktopViewportWidth) {

    // Input field styling
    .input--field {
	.unitize(15, 16, margin-bottom);
    }

    .js--fancy-select {
        .unitize-width(290);
        .unitize(34, 16, line-height);
        .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.1));

	select {
	    .unitize-height(34);
	}
    }

}

/* Standard input fields. */
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"] {
    @boxShadowColor: rgba(red(@borderColor), green(@borderColor), blue(@borderColor), .9);
    .appearance(none);
    .border-radius(3px);
    .box-sizing();
    .unitize-width(290);
    .unitize-padding(9, 10, 10, 10);
    .box-shadow(inset 0 1px 1px @boxShadowColor);
    background: @lightGradientEnd;
    border: 1px solid @borderColor;
    border-top-color: darken(@borderColor, 5%);
    color: @lightTextColor;

    &:focus {
	.box-shadow(0 0 0 transparent);
	outline: none;
	border-color: @primaryColor;
	background: #fff;
	color: @primaryTextColor;
    }

    &.has--error {
	color: @errorText;
	background: @errorBackground;
	border-color: @errorBorderColor;
    }

    // Input field spacing
    &.input--field {
	.unitize(10, 16, margin-bottom);
	width: 100%;

	&.input--field-street {
	    margin-right: 2%;
	    width: 78%;
	    float: left;
	}

	&.input--field-streetnumber {
	    width: 20%;
	    float: left;
	}

	&.input--field-zipcode {
	    margin-right: 2%;
	    width: 20%;
	    float: left;
	}

	&.input--field-city {
	    width: 78%;
	    float: left;
	}
    }

}

.js--fancy-select {
    .border-radius(3px);
    .box-sizing();
    .unitize-width(290);
    .unitize(44, 16, line-height);
    .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.1));
    .linear-gradient(#ffffff, #f7f8fa);
    .clearfix();
    display: inline-block;
    position: relative;
    border: 1px solid @borderColor;
    overflow: hidden;
    cursor: pointer;

    &:hover {
	.linear-gradient(#f7f8fa, #ffffff);
    }

    &.js--is--focused {
	border-color: @primaryColor;
    }

    select {
	.unitize-height(44);
	.appearance(none);
	.opacity(0);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	cursor: pointer;
	z-index: 1000;

	// Removes the blue glow around the select field
	// see: http://www.faridesign.net/2012/02/remove-border-around-input-chrome-safari/
	&:focus {
	    outline: none;
	}
    }

    .js--fancy-select-text {
	.unitize-padding(0, 40, 0, 10);
	border-right: 1px solid #fff;
	font-weight: bold;
	width: 100%;

	// CSS truncating
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    }

    .js--fancy-select-trigger {
	.unitize-width(30);
	position: absolute;
	right: 0;
	top: 0;
	border-left: 1px solid @borderColor;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	font-weight: bold;
    }

    // State disabled
    &.is--disabled {
	.opacity(.5);

	select {
	    cursor: not-allowed;
	}
    }

    // Error state
    &.has--error {
	color: @errorText;
	border-color: @errorBorderColor;
	background: @errorBackground;

	.js--fancy-select-trigger {
	    border-color: @errorBorderColor;
	}

	.js--fancy-select-text {
	    border-color: lighten(@errorBorderColor, 10%);
	}
    }
}

// Quantity field
.js--quantity-field {
    .clearfix();

    input[type="number"] {
	width: 78%;
	margin: 0 2% 0 0;
    }

    input[type="number"],
    .js--quantity-button {
	float: left;
    }

    .js--quantity-button {
	width: 20%;
    }

    .js--quantity-button > a {
	.user-select(none);
	.unitize-height(20, 16);
	.unitize(18, 16, line-height);
	display: block;
	padding: 0;
	font-weight: bold;
	text-align: center;
    }
    .js--quantity-button-plus {
	.unitize-margin(0, 0, 4, 0, 16);
    }
}

@media screen and (min-width: @tabletViewportWidth) {

    /* Standard input fields. */
    .input--field {
	.unitize(15, 16, margin-bottom);

	.input--field-street {
	    margin-right: 2%;
	    width: 86%;
	}
	.input--field-streetnumber {
	    width: 12%;
	}
	.input--field-zipcode {
	    margin-right: 2%;
	    width: 20%;
	}
	.input--field-city {
	    width: 78%;
	}
    }

}

@media screen and (min-width: @desktopViewportWidth) {

    // Input field styling
    .input--field {
	.unitize(15, 16, margin-bottom);
    }

    .js--fancy-select {
        .unitize-width(290);
        .unitize(34, 16, line-height);
        .box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.1));

	select {
	    .unitize-height(34);
	}
    }

}