@charset "UTF-8";
/*!
 * OS.js - JavaScript Cloud/Web Desktop Platform
 *
 * 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
 */

html, body {
  height : 100%;
  overflow : hidden;
}
body {
  margin : 0;
  padding : 0;
  background-color : #572a79;
}
body, input, button, textarea, label, select {
  font-size : 12px;
  font-family : Sans-serif, Arial;
}
#Login {
  background : #fff;
  width : 400px;
  height : 230px;
  padding : 20px;
  position : absolute;
  left : 50%;
  top : 50%;
  z-index : 9999;
  margin-left : -200px;
  margin-top : -155px; 
  border : 4px solid rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 5px 4px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 0 5px 4px rgba(0,0,0,0.15);
  box-shadow: 0 0 5px 4px rgba(0,0,0,0.15);
  box-sizing : border-box;
  display : none;
}
  #LoginForm > div {
    margin-bottom : 20px;
  }
  #Login label {
    display : block;
    font-weight : bold;
    height : 30px;
    line-height : 30px;
  }
  #Login input[type=text],
  #Login input[type=password] {
    display : block;
    width : 100%;
    height : 24px;
    padding : 4px;
    line-height : 12px;
    box-sizing : border-box;
  }
  #Login input[type=submit] {
    height : 40px;
    padding : 10px;
    padding-left : 20px;
    padding-right : 20px;
    box-sizing : border-box;
    background : rgba(0, 0, 0, .1);
    border : 0 none;
    cursor : pointer;
  }
  #Login .Submit {
    text-align : right;
  }
#LoadingScreen {
  position : absolute;
  width : 320px;
  height : 182px;
  top : 50%;
  left : 50%;
  margin-top : -91px;
  margin-left : -160px;
  z-index : 999;
}
  #LoadingScreen span {
    color : #fff;
    font-family : sans-serif, Arial;
    font-size : 30px;
    display : block;
  }
application-splash {
  display : block;
  position : absolute;
  top : 50%;
  left : 50%;
  width : 300px;
  height : 55px;
  margin-left : -150px;
  margin-top : -28px;
  z-index : 99999998;
}
  application-splash > img {
    display : block;
    position : absolute;
    top : 5px;
    left : 5px;
    width : 16px;
    height : 16px;
  }
  application-splash > span {
    display : block;
    position : absolute;
    top : 5px;
    left : 26px;
    height : 16px;
    line-height : 16px;
  }
  application-splash > gui-progress-bar {
    position : absolute;
    bottom : 5px;
    left : 5px;
    right : 5px;
  }
#LoadingScreen application-splash {
  position : absolute;
  height : 30px;
  width : auto;
  top : auto;
  left : 0;
  right : 0;
  bottom : -40px;
  margin : 0;
  background : #fff;
  z-index : 99999999;
}
  #LoadingScreen application-splash > span {
    display : none;
  }
  #LoadingScreen application-splash > gui-progress-bar {
    top : 5px;
    left : 5px;
    right : 5px;
    bottom : 5px;
    height : auto;
  }
    #LoadingScreen application-splash > gui-progress-bar:before {
      border : 1px solid #ccc;
      background : #ddd;
    }
    #LoadingScreen application-splash > gui-progress-bar > span {
      display : none;
    }
    #LoadingScreen application-splash > gui-progress-bar > div {
      background : rgb(87, 42, 121);
    }
body[data-attention="true"]:after {
  content : '';
  display : block;
  position : fixed;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
  z-index : 1;
}
#DebugNotice {
  position : absolute;
  bottom : 5px;
  right : 5px;
  font-size : 12px;
  color : #fff;
  text-shadow: 0 0 2px rgba(34, 34, 34, .5);
  text-align : right;
  line-height : 20px;
  z-index : 2;
  opacity : .7;
  cursor : default;
}
  #DebugNotice a {
    color : #fff;
    text-decoration : underline;
    font-weight : normal;
    cursor : pointer;
  }
.application-window-button-entry,
application-window,
application-window-top,
application-window-content,
application-window-icon,
application-window-title,
application-window-loading,
application-window-disabled,
application-window-loading-indicator {
  display : block;
}
application-window {
  position : absolute;
  top : 0;
  left : 0;
  overflow : visible;
}
application-window:before {
  content : '';
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
}
application-window-top {
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  height : 20px;
  z-index : 5;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
     -moz-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
       -o-flex-wrap: nowrap;
          flex-wrap: nowrap;
}
  application-window-top > * {
    min-width : 16px;
    min-height : 16px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 0 auto;
       -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
         -o-flex: 0 0 auto;
            flex: 0 0 auto;
  }
application-window-icon {
  text-align : center;
  position : relative;
  background-position : center center;
  background-repeat : no-repeat;
  background-size : 16px;
}
application-window-title {
  height : 100%;
  z-index : 1;
  overflow : hidden;
  white-space : nowrap;
  line-height : 20px;
  display : block;
  -webkit-text-overflow: ellipsis;
     -moz-text-overflow: ellipsis;
      -ms-text-overflow: ellipsis;
       -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
  -webkit-flex: 1 1 auto;
     -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
       -o-flex: 1 1 auto;
          flex: 1 1 auto;
}
.application-window-button-entry {
  padding : 0;
  margin : 0;
  height : 100%;
  text-align : center;
  display : inline-block;
  position : relative;
  display : none;
}
  application-window[data-allow-maximize="true"] application-window-button-maximize {
    display : block;
  }
  application-window[data-allow-minimize="true"] application-window-button-minimize {
    display : block;
  }
  application-window[data-allow-close="true"] application-window-button-close {
    display : block;
  }
application-window-content {
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
  z-index : 1;
}
application-window-resize {
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
  z-index : -1;
}
application-window[data-allow-resize="false"] > application-window-resize {
  display : none;
  cursor : default !important;
}
  application-window-resize-handle {
    position : absolute;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
  }
  application-window-resize-handle[data-direction="n"] {
    cursor : n-resize;
    top : 0;
    height : 30px;
    left : 20px;
    right : 20px;
  }
  application-window-resize-handle[data-direction="s"] {
    cursor : s-resize;
    bottom : 0;
    height : 30px;
    left : 20px;
    right : 20px;
  }
  application-window-resize-handle[data-direction="w"] {
    cursor : w-resize;
    left : 0;
    width : 30px;
    top : 20px;
    bottom : 20px;
  }
  application-window-resize-handle[data-direction="e"] {
    cursor : e-resize;
    right : 0;
    width : 30px;
    top : 20px;
    bottom : 20px;
  }
  application-window-resize-handle[data-direction="sw"] {
    cursor : sw-resize;
    bottom : 0;
    left : 0;
    height : 30px;
    width : 30px;
  }
  application-window-resize-handle[data-direction="se"] {
    cursor : se-resize;
    bottom : 0;
    right : 0;
    height : 30px;
    width : 30px;
  }
  application-window-resize-handle[data-direction="nw"] {
    cursor : nw-resize;
    top : 0;
    left : 0;
    height : 30px;
    width : 30px;
  }
  application-window-resize-handle[data-direction="ne"] {
    cursor : ne-resize;
    top : 0;
    right : 0;
    height : 30px;
    width : 30px;
  }
application-window-loading {
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
  z-index : 999999;
}
  application-window-loading-indicator {
    position : absolute;
    left : 50%;
    top : 50%;
  }
application-window-disabled {
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
  z-index : 999998;
}
application-window[data-dnd-state="true"]:after {
  content : '';
  position : absolute;
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
}
application-window[data-hint="resizing"] iframe,
application-window[data-hint="moving"] iframe {
  pointer-events: none;
}
application-window-warning  {
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  height : 30px;
  line-height : 20px;
  margin : 4px;
  border : 1px solid transparent;
  z-index : 99999;
  box-sizing : border-box;
}
  application-window-warning > div:nth-child(1) {
    position : absolute;
    top : 0;
    right : 0;
    bottom : 0;
    padding : 4px;
    box-sizing : border-box;
  }
  application-window-warning > div:nth-child(2) {
    position : absolute;
    top : 0;
    left : 0;
    right : 20px;
    bottom : 0;
    padding : 4px;
    overflow : hidden;
    box-sizing : border-box;
  }
application-window.DialogWindow gui-label label {
  white-space : inherit;
}
application-window.DialogWindow gui-button-bar gui-button {
  min-width : 80px;
}
application-window.DialogWindow gui-label[data-id="Message"] span {
  font-weight : bold;
}
.IFrameApplicationWindow application-window-content {
  background : #000;
}
.IframeApplicationFrame {
  box-sizing : border-box;
  margin : 0;
  padding : 0;
  width : 100%;
  height : 100%;
  border : 0 none;
  outline : 0 none;
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
}
application-window[data-focused="false"] iframe {
  pointer-events : none;
}
@media all and (max-width: 800px) {
  body {
    overflow : hidden;
  }
  application-window {
    width : auto !important;
    height : auto !important;
    left : 0 !important;
    right : 0 !important;
    bottom : 0 !important;
    top : 0 !important;
  }
  application-window-button-maximize,
  application-window-button-minimize {
    display : none !important;
  }
  application-window-content {
    overflow : auto !important;
  }
}

button, div, span, p, a, img, label, .gui-element, application-window {
  cursor : default;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.gui-bold > label,
.gui-bold {
  font-weight : bold;
}
.gui-italic > label,
.gui-italic {
  font-style : italic;
}
.gui-underline > label,
.gui-underline {
  text-decoration : underline;
}
.gui-align-left {
  text-align : left;
}
.gui-align-center {
  text-align : center;
}
.gui-align-right {
  text-align : right;
}
.gui-disable-events {
  pointer-events : none;
}
.gui-no-overflow {
  overflow : hidden;
}
.gui-has-emblem {
  background-repeat : no-repeat;
  background-position : right center;
}
.gui-focus-element {
  -webkit-appearance: none;
     -moz-appearance: none;
      -ms-appearance: none;
       -o-appearance: none;
          appearance: none;
  display : block;
  outline : 0 none;
  resize : none;
  border : 0 none;
  background : transparent;
  color : transparent;
  position : absolute;
  margin : 0;
  padding : 0;
  left : 0;
  bottom : 0;
  top : 0;
  right : 0;
  width : 100%;
  height : 100%;
  z-index : 1;
  overflow : hidden;
  box-sizing : border-box;
}
.gui-flex-align-start {
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-box-align: start;
         -o-box-align: start;
            box-align: start;
    -webkit-align-self: flex-start;
       -moz-align-self: flex-start;
        -ms-align-self: flex-start;
         -o-align-self: flex-start;
            align-self: flex-start;
}
.gui-flex-align-end {
    -webkit-box-align: end;
       -moz-box-align: end;
        -ms-box-align: end;
         -o-box-align: end;
            box-align: end;
    -webkit-align-self: flex-end;
       -moz-align-self: flex-end;
        -ms-align-self: flex-end;
         -o-align-self: flex-end;
            align-self: flex-end;
}
.gui-flex-align-center {
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-box-align: center;
         -o-box-align: center;
            box-align: center;
    -webkit-align-self: center;
       -moz-align-self: center;
        -ms-align-self: center;
         -o-align-self: center;
            align-self: center;
}
.gui-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
     -moz-box-orient: horizontal;
      -ms-box-orient: horizontal;
       -o-box-orient: horizontal;
          box-orient: horizontal;
  -webkit-flex-direction: row;
     -moz-flex-direction: row;
      -ms-flex-direction: row;
       -o-flex-direction: row;
          flex-direction: row;
}
  .gui-flex > * {
    display : block;
  }
.gui-flex-normal {
  -webkit-box-flex: 0 0 auto;
     -moz-box-flex: 0 0 auto;
      -ms-box-flex: 0 0 auto;
       -o-box-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
     -moz-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
       -o-flex: 0 0 auto;
          flex: 0 0 auto;
}
.gui-flex-grow-shrink {
  -webkit-box-flex: 1 1 auto;
     -moz-box-flex: 1 1 auto;
      -ms-box-flex: 1 1 auto;
       -o-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
     -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
       -o-flex: 1 1 auto;
          flex: 1 1 auto;
}
.gui-flex-grow {
  -webkit-box-flex: 1 0 auto;
     -moz-box-flex: 1 0 auto;
      -ms-box-flex: 1 0 auto;
       -o-box-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
     -moz-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
       -o-flex: 1 0 auto;
          flex: 1 0 auto;
}
.gui-flex-shrink {
  -webkit-box-flex: 0 1 auto;
     -moz-box-flex: 0 1 auto;
      -ms-box-flex: 0 1 auto;
       -o-box-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
     -moz-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
       -o-flex: 0 1 auto;
          flex: 0 1 auto;
}
gui-container {
  display : block;
  position : relative;
  overflow : auto;
}
gui-hbox,
gui-vbox {
  width : 100%;
  height : 100%;
  position : relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
gui-hbox {
  -webkit-box-orient: horizontal;
     -moz-box-orient: horizontal;
      -ms-box-orient: horizontal;
       -o-box-orient: horizontal;
          box-orient: horizontal;
  -webkit-flex-direction: row;
     -moz-flex-direction: row;
      -ms-flex-direction: row;
       -o-flex-direction: row;
          flex-direction: row;
}
gui-vbox {
  -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
      -ms-box-orient: vertical;
       -o-box-orient: vertical;
          box-orient: vertical;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;
}
  gui-hbox-container {
    height : 100%;
  }
  gui-hbox-container,
  gui-vbox-container {
    display : block;
    position : relative;
    -webkit-box-flex: 0 0 auto;
       -moz-box-flex: 0 0 auto;
        -ms-box-flex: 0 0 auto;
         -o-box-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
       -moz-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
         -o-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  gui-hbox-container[data-fill='true'],
  gui-vbox-container[data-fill='true'] {
    -webkit-align-items: stretch;
       -moz-align-items: stretch;
        -ms-align-items: stretch;
         -o-align-items: stretch;
            align-items: stretch;
    -webkit-align-content: stretch;
       -moz-align-content: stretch;
        -ms-align-content: stretch;
         -o-align-content: stretch;
            align-content: stretch;
  }
    gui-hbox-container[data-expand='true'] > *,
    gui-vbox-container[data-expand='true'] > * {
      display : block;
    }
    gui-hbox-container[data-fill='true'] > *,
    gui-vbox-container[data-fill='true'] > * {
      position : absolute;
      top : 0;
      left : 0;
      bottom : 0;
      right : 0;
    }
    gui-hbox-container[data-fill='true'] > gui-hbox,
    gui-hbox-container[data-fill='true'] > gui-vbox,
    gui-vbox-container[data-fill='true'] > gui-hbox,
    gui-vbox-container[data-fill='true'] > gui-vbox {
      width : 100%;
      height : 100%;
    }
    gui-hbox-container[data-fill='true'] > gui-vbox,
    gui-hbox-container[data-fill='true'] > gui-hbox,
    gui-vbox-container[data-fill='true'] > gui-vbox,
    gui-vbox-container[data-fill='true'] > gui-hbox {
      top : 0;
      left : 0;
      right : 0;
      bottom : 0;
    }
gui-scroll-view {
  display : block;
  position : relative;
  overflow : auto;
  width : 100%;
  height : 100%;
}
gui-paned-view {
  position : relative;
  overflow : hidden;
  width : 100%;
  height : 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
     -moz-box-orient: horizontal;
      -ms-box-orient: horizontal;
       -o-box-orient: horizontal;
          box-orient: horizontal;
  -webkit-flex-direction: row;
     -moz-flex-direction: row;
      -ms-flex-direction: row;
       -o-flex-direction: row;
          flex-direction: row;
}
gui-paned-view[data-orientation='vertical'] {
  -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
      -ms-box-orient: vertical;
       -o-box-orient: vertical;
          box-orient: vertical;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;
}
  gui-paned-view > * {
    display : block;
    position : relative;
    -webkit-box-flex: 1 1 auto;
       -moz-box-flex: 1 1 auto;
        -ms-box-flex: 1 1 auto;
         -o-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
       -moz-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
         -o-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  gui-paned-view > gui-paned-view-container {
    height : 100%;
    overflow : hidden; 
  }
    gui-paned-view > gui-paned-view-container > * {
      height : 100%;
      display : block;
    }
    gui-paned-view > gui-paned-view-container[data-fill='true'] > * {
      position : absolute;
      top : 0;
      left : 0;
      bottom : 0;
      right : 0;
    }
  gui-paned-view > gui-paned-view-handle {
    height : 100%;
    -webkit-box-flex: 0 1 auto;
       -moz-box-flex: 0 1 auto;
        -ms-box-flex: 0 1 auto;
         -o-box-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
       -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
         -o-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  gui-paned-view > gui-paned-view-container {
    min-width : 16px;
    min-height : auto;
  }
  gui-paned-view[data-orientation='vertical'] > gui-paned-view-container {
    min-width : auto;
    min-height : 16px;
  }
gui-iframe {
  display : inline-block;
  position : relative;
  min-width : 16px;
  min-height : 16px;
}
  gui-iframe > iframe {
    display : block;
    width : 100%;
    height : 100%;
    margin : 0;
    padding : 0;
    border : 0 none;
    box-sizing : border-box;
  }
gui-toolbar,
gui-button-bar {
  display : block;
  position : relative;
  overflow : hidden;
  font-size : 0;
  min-width : 16px;
  min-height : 16px;
}
gui-button-bar {
  white-space: nowrap;
}
gui-toolbar[data-orientation="vertical"],
gui-button-bar[data-orientation="vertical"] {
  width : 100%;
  height : 100%;
}
gui-toolbar-separator {
  display : inline-block;
}
gui-expander {
  display : block;
  position : relative;
}
  gui-expander-label {
    display : block !important;
    position : relative;
  }
  gui-expander[data-expanded="false"] > * {
    display : none;
  }
gui-tabs {
  display : block;
  position : relative;
}
  gui-tabs > ul {
    display : block;
    list-style-type : none;
    margin : 0;
    padding : 0;
    white-space: nowrap;
  }
    gui-tabs > ul > li {
      position : relative;
      display : inline-block;
      margin : 0;
      padding : 0;
      height : 100%;
    }
      gui-tabs > ul > li.gui-active:after {
        content : '';
        position : absolute;
        left : 0;
        right : 0;
        bottom : 0;
        z-index : 999999999;
      }
  gui-tabs > gui-tab-container {
    overflow : hidden;
    display : none;
    position : relative;
  }
    gui-tab-container.gui-active {
      display : block;
    }
application-window-content > gui-tabs {
  width : 100%;
  height : 100%;
}
gui-grid {
  position : relative;
  display : block;
}
  gui-grid > gui-grid-row { 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
       -moz-box-orient: horizontal;
        -ms-box-orient: horizontal;
         -o-box-orient: horizontal;
            box-orient: horizontal;
    -webkit-flex-direction: row;
       -moz-flex-direction: row;
        -ms-flex-direction: row;
         -o-flex-direction: row;
            flex-direction: row;
    justify-content: space-around;
  }
    gui-grid > gui-grid-row > gui-grid-entry { 
      margin: 5px;
      -webkit-box-flex: 1 0 auto;
         -moz-box-flex: 1 0 auto;
          -ms-box-flex: 1 0 auto;
           -o-box-flex: 1 0 auto;
      -webkit-flex: 1 0 auto;
         -moz-flex: 1 0 auto;
          -ms-flex: 1 0 auto;
           -o-flex: 1 0 auto;
              flex: 1 0 auto;
      height: auto;
      position: relative;
    }
      gui-grid > gui-grid-row > gui-grid-entry > * {
        position : absolute;
        top : 0;
        left : 0;
        right : 0;
        bottom : 0;
        width : 100%;
        height : 100%;
        margin : 0;
        box-sizing : border-box;
        overflow : hidden;
      }
        gui-grid > gui-grid-row > gui-grid-entry > * > * {
          height : 100%;
        }
  gui-grid > gui-grid-row > gui-grid-entry:before {
    content:'';
    float:left;
    padding-top:100%;
  }
gui-label {
  display : inline-block;
  position : relative;
}
  gui-label > label {
    display : inline;
    white-space: nowrap;
  }
gui-button {
  position : relative;
  display : inline-block;
  box-sizing : content-box;
}
  gui-button button {
    display : block;
    margin : 0;
    padding : 0;
    outline : 0 none;
    white-space: nowrap;
    min-width : 16px;
    min-height : 16px;
    width : 100%;
    height : 100%;
  }
  gui-button button::-moz-focus-inner {
    border : 0;
    padding : 0;
  }
  gui-button[data-icon-size="32"] {
    min-width : 32px;
    min-height : 32px;
  }
  gui-button.gui-has-image img {
    vertical-align : middle;
  }
  gui-button.gui-has-image.gui-has-label img {
    position : absolute;
    top : 50%;
    margin-top : -8px;
    left : 8px;
  }
  gui-button[data-icon-size="32"].gui-has-image.gui-has-label img {
    margin-top : -16px;
  }
gui-radio,
gui-checkbox {
  display : inline-block;
  position : relative;
}
  gui-radio input,
  gui-checkbox input {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    display: inline-block;
    vertical-align : middle;
    position: relative;
    background: transparent;
    border: 0 none;
    margin : 0;
    padding : 0;
    overflow : hidden;
    outline : none;
  }
  gui-radio input:checked:after {
    display : inline;
    vertical-align: middle;
  }
  gui-checkbox input:checked:after {
    display : inline;
    vertical-align: middle;
  }
  gui-radio > label > span,
  gui-checkbox > label > span {
    vertical-align : middle;
  }
gui-radio {
  display : inline-block;
  position : relative;
}
gui-select {
  display : inline-block;
  position : relative;
}
  gui-select select {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
    display : block;
    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;
    outline : none;
    box-sizing : border-box;
  }
  gui-select:before {
    content: '';
    position: absolute;
    z-index: 99;
    pointer-events: none;
    display: block;
  }
  gui-select:after {
    position: absolute;
    z-index: 100;
    pointer-events: none;
  }
gui-select-list {
  display : inline-block;
  position : relative;
  min-height : 32px;
}
  gui-select-list select {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
    display : block;
    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;
    outline : none;
    box-sizing : border-box;
  }
gui-slider {
  display : inline-block;
  position : relative;
}
  gui-slider input {
    display : inline-block;
    position : relative;
    width : 100%;
    padding : 0;
    margin : 0;
    vertical-align : middle;
    outline : 0 none;
    box-sizing : border-box;
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
  }
  gui-slider input::-moz-range-track {
    -moz-appearance: none;
         appearance: none;
    background : transparent;
    border : 0 none;
    width : 100%;
    box-sizing : border-box;
  }
  gui-slider input::-webkit-slider-runnable-track {
    width : 100%;
    border : 0 none;
    box-sizing : border-box;
  }
  gui-slider input::-ms-track {
    width: 100%;
    border : 0 none;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
    box-sizing : border-box;
  }
  gui-slider input::-moz-range-thumb {
    -moz-appearance: none;
    -moz-border-radius : 0;
    border-radius : 0;
  }
  gui-slider input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    -webkit-border-radius : 0;
    border-radius : 0;
  }
  gui-slider input::-ms-thumb {
    -ms-appearance : none !important;
    -ms-border-radius : 0;
    border-radius : 0;
  }
  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;
  }
gui-switch {
  display : inline-block;
  position : relative;
}
  gui-switch div {
    display : inline-block;
    position : relative;
  }
  gui-switch button {
    display : inline-block;
    outline : 0 none;
    margin : 0;
    width : 50%;
    box-sizing : border-box;
  }
  gui-switch button.gui-active {
    margin-left : 50%;
  }
  gui-switch input {
    display : none;
    pointer-events : none;
  }
gui-password,
gui-text {
  display : inline-block;
  position : relative;
}
  gui-password input,
  gui-text input {
    display : block;
    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;
    background : transparent;
    border : 0 none;
    outline : none;
    box-sizing : border-box;
  }
  gui-password > label > input,
  gui-text > label > input {
    display : inline-block;
    width : auto;
  }
gui-textarea {
  display : inline-block;
  position : relative;
}
  gui-textarea textarea {
    display : block;
    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;
    border : 0 none;
    resize : none;
    outline : none;
    box-sizing : border-box;
  }
gui-richtext {
  display : inline-block;
  position : relative;
  min-height : 100px !important;
}
  gui-richtext > iframe {
    display : block;
    width : 100%;
    height : 100%;
    margin : 0;
    padding : 0;
    border : 0 none;
    box-sizing : border-box;
  }
gui-file-upload {
  display : inline-block;
  position : relative;
}
gui-input-modal {
  position : relative;
  display : inline-block;
}
  gui-input-modal > div {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
    gui-input-modal input {
      display : inline-block;
      padding : 0;
      margin : 0;
      border : 0 none;
      outline : none;
      -webkit-box-flex: 1 0 auto;
         -moz-box-flex: 1 0 auto;
          -ms-box-flex: 1 0 auto;
           -o-box-flex: 1 0 auto;
      -webkit-flex: 1 0 auto;
         -moz-flex: 1 0 auto;
          -ms-flex: 1 0 auto;
           -o-flex: 1 0 auto;
              flex: 1 0 auto;
    }
    gui-input-modal button {
      display : inline-block;
      -webkit-box-flex: 0 1 auto;
         -moz-box-flex: 0 1 auto;
          -ms-box-flex: 0 1 auto;
           -o-box-flex: 0 1 auto;
      -webkit-flex: 0 1 auto;
         -moz-flex: 0 1 auto;
          -ms-flex: 0 1 auto;
           -o-flex: 0 1 auto;
              flex: 0 1 auto;
    }
gui-audio {
  display : inline-block;
  position : relative;
}
gui-video {
  display : inline-block;
  position : relative;
  min-width : 16px;
  min-height : 16px;
}
gui-image {
  display : inline-block;
  position : relative;
}
  gui-image > img {
    border : 0 none;
    outline : 0 none;
    vertical-align : middle;
  }
gui-canvas {
  display : inline-block;
  position : relative;
  min-width : 16px;
  min-height : 16px;
}
gui-color-swatch {
  display : inline-block;
  position : relative;
  min-width : 100px !important;
  min-height : 100px !important;
}
  gui-color-swatch canvas {
    width : 100%;
    height : 100%;
    display : block;
  }
gui-color-box {
  display : inline-block;
  position : relative;
  background-color : #fff;
}
gui-color-box[data-disabled="true"] {
  cursor : default !important;
}
  gui-color-box > div {
    min-width : 16px;
    min-height : 16px;
  }
gui-menu {
  display : inline-block;
  position : relative;
}
gui-menu.gui-root-menu {
  display : block;
  position : absolute;
  z-index : 99999999;
}
  gui-menu > gui-menu-entry {
    display : block;
    position : relative;
    white-space : nowrap;
  }
  gui-menu > gui-menu-entry[data-disabled="true"] {
    pointer-events: none;
  }
  gui-menu > .gui-menu-expand:after {
    position : absolute;
    right : 0;
    top : 0;
    bottom : 0;
  }
  html[dir="rtl"] gui-menu > .gui-menu-expand:after {
    right : auto;
    left : 0;
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
    gui-menu > gui-menu-entry {
      background-repeat : no-repeat;
      background-position : left center;
      background-size : 16px;
    }
    gui-menu > gui-menu-entry > label {
      vertical-align : middle;
      display : inline-block;
      pointer-events : none;
    }
    gui-menu > gui-menu-entry > label > input {
      margin : 0;
      padding : 0;
      vertical-align : middle;
      margin-top : -2px;
      padding-right : 2px;
      pointer-events : none;
    }
  gui-menu > gui-menu-entry > gui-menu {
    position : absolute;
    z-index : 99999;
  }
  .gui-showing gui-menu-entry > gui-menu {
    display : none;
  }
  gui-menu > .gui-hover > gui-menu,
  gui-menu > gui-menu-entry:hover > gui-menu {
    display : inline-block;
    left : 100%;
    top : 0;
  }
  .gui-overflowing > gui-menu-entry:hover > gui-menu {
    left : auto;
    top : 0;
  }
  gui-menu.gui-root-menu > gui-menu-entry:hover > gui-menu {
    display : block;
  }
  gui-menu.gui-root-menu > gui-menu-entry[data-disabled="true"]:hover > gui-menu {
    display : none;
  }
gui-menu-bar {
  position : relative;
  display : block;
  min-height : 16px;
}
  gui-menu-bar-entry {
    position : relative;
    display : inline-block;
  }
  gui-menu-bar-entry > span {
    pointer-events : none;
    display : block;
  }
  gui-menu-bar-entry > gui-menu {
    display : none;
    position : absolute;
    z-index : 99999;
  }
  gui-menu-bar-entry.gui-active > gui-menu {
    display : inline-block;
    top : 100%;
    left : 0;
  }
gui-progress-bar {
  position : relative;
  display : inline-block;
  text-align : center;
  overflow : hidden;
}
  gui-progress-bar:before {
    content : '';
    position : absolute;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
    z-index : -1;
  }
  gui-progress-bar > div {
    position : absolute;
    left : 1px;
    bottom : 1px;
    top : 1px;
    z-index : -1;
  }
  gui-progress-bar > span {
    display : inline-block;
    vertical-align : middle;
    position : absolute;
    top : 50%;
    left : 0;
    right : 0;
    bottom : 0;
    height : 16px;
    margin-top : -8px;
  }
gui-statusbar {
  position : relative;
  display : block;
  min-height : 16px;
  overflow : hidden;
  white-space : nowrap;
  -webkit-text-overflow: ellipsis;
     -moz-text-overflow: ellipsis;
      -ms-text-overflow: ellipsis;
       -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
}
  gui-statusbar-label {
    display : inline-block;
    vertical-align : middle;
  }
gui-file-view {
  position : relative;
  display : inline-block;
}
  gui-file-view > * {
    display : block;
    width : 100%;
    height : 100%;
  }
gui-icon-view {
  position : relative;
  display : inline-block;
  overflow : auto;
  min-width : 16px;
  min-height : 16px;
}
  gui-icon-view-body {
    position : absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    z-index : 2;
  }
  gui-icon-view-entry {
    float : left;
    width : 34px;
    width : 54px;
  }
    gui-icon-view-entry > div {
      pointer-events: none;
      position : relative;
    }
    gui-icon-view-entry > div > img {
      pointer-events: none;
      width : 32px;
      height : 32px;
    }
    gui-icon-view-entry > div > span {
      pointer-events: none;
      position : absolute;
      display : block;
      left : -2px;
      right : -2px;
      top : 0;
      padding : 2px;
      z-index : 9999;
      white-space : nowrap;
      overflow: hidden;
      -webkit-text-overflow: ellipsis;
         -moz-text-overflow: ellipsis;
          -ms-text-overflow: ellipsis;
           -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
    }
    gui-icon-view-entry.gui-active > div > span {
      pointer-events: none;
      overflow: visible;
      white-space : pre-wrap;
      word-wrap : break-word;
      text-overflow: inherit;
      -o-text-overflow: inherit;
    }
gui-list-view {
  position : relative;
  display : inline-block;
  overflow : auto;
  min-width : 16px;
  min-height : 16px;
}
  gui-list-view-inner {
    display : table;
    width : 100%;
    z-index : 2;
    position : relative;
    table-layout : fixed;
    border-collapse : collapse;
  }
  gui-list-view-body {
    position : relative;
    z-index : 2;
    display : table-row-group;
    width : 100%;
  }
  gui-list-view-head {
    display : table-header-group;
    width : 100%;
    visibility : hidden;
    pointer-events: none;
  }
    gui-list-view-row {
      position : relative;
      display : table-row;
      width : 100%;
    }
    gui-list-view-column {
      position : relative;
      display : table-cell;
      background-repeat : no-repeat;
      background-position : left center;
      background-size : 16px;
      line-height : 16px;
    }
    gui-list-view[data-icon-size="32"] gui-list-view-column {
      line-height : 32px;
      background-size : 32px;
    }
      gui-list-view-column > span {
        pointer-events: none;
        white-space: nowrap;
        display : block;
        overflow : hidden;
        -webkit-text-overflow: ellipsis;
           -moz-text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
             -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
      }
    gui-list-view-fake-head {
      position : absolute;
      display : block;
      top : 0;
    }
      gui-list-view-fake-head gui-list-view-head {
        visibility : visible;
      }
    gui-list-view-column-resizer {
      width : 1px;
      position : absolute;
      top : 0;
      bottom : 0;
      left : 0;
      z-index : 999999999;
      pointer-events: all;
    }
      gui-list-view-column-resizer:after {
        content : '';
        background : #b2b2b2;
        position : absolute;
        top : 0;
        left : 1px;
        width : 1px;
        bottom : 0;
      }
gui-tree-view {
  position : relative;
  display : inline-block;
  overflow : auto;
  min-width : 16px;
  min-height : 16px;
}
  gui-tree-view-body {
    position : absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    z-index : 2;
  }
  gui-tree-view-entry {
    display : block;
    position : relative;
  }
    gui-tree-view-entry > div {
      pointer-events: none;
    }
      gui-tree-view-entry > div > span {
        pointer-events: none;
        background-repeat : no-repeat;
        background-position : left center;
        display : inline-block;
        vertical-align : middle;
        -webkit-text-overflow: ellipsis;
           -moz-text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
             -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
      }
  gui-tree-view-entry.gui-expandable {
    padding-left : 16px;
  }
  gui-tree-view-entry.gui-expandable gui-tree-view-expander {
    display : block;
    position : absolute;
    left : 0;
    top : 0;
    width : 16px;
    height : 16px;
    overflow : visible;
  }
gui-toolbar > .gui-element {
  vertical-align : middle;
}