.left-panel {
	position:absolute;
	top:16px;
	left:16px;
	bottom:16px;
	width:300px;
}

.left-panel .graphicList-listItem-Button {
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAABARJREFUSMe9VU1olFcUPed9M/mbidHYTGk6+WkSwbSKNlQEDSlJEQpuBkrJtnRjHVrooqCLAVsx1aVF0ZUUkk3FdhG7qBBtigtba+ug2DaCBX86UcfWTEhMMpnvvdPFfDMdMQmW/jx48Pi+e9+9755zzwX+48W/69CdSjVWNzVtB1C7kM3+4E9P37xx9Kj7VwJsPnx4/esDA1+0RyLdvnO8MTt75+uxsfemr107fWt4WEv5mKe9vDOZNL19fZ90RCLdkuCR6IpG46/09w/VtbauXc7vqQOEotHwhoaGXkOCFfvFVavWAYj94wCmqsrPW5tj4CQJBsCCtY8kTS+b2HI/Xtq/v94tLraVcKLn4at7904PtrS8Uyq2A3j2/v1xkrHuVKqx0l9SZmJo6OGyIL954cKewZaWISuhcgMwAlBwjg6Q75yzEgTAl6DA7uT4+NvpZHJ42RcY0qsyxvjOwSPpS/Ik+pJsADIkhIwxnkQriQBEkpIAeCuWiAA8kjAGi86BAA0JU0FtAXRSEXCABoArYkOST2IQHxykCYWMV1vrSMKQshLCRWv5Eg0gV0yABGQA2OB7gA0NqSdA3njwYFtbb28yVlPTcX1y8uqC7zd5JB0JC8BI9IpZ0QQvFFC+6UE+fzedy30ZIrGhoSEBwJYDbD5ypCWVSHzTWlfXZiX47e1vZObnHxGQISGAHikn/ZV18AICuD4zc+XM6OjOn/btmwSAnuPHU3ZuLlKWivfT6UNvtbfv8SU5CQUJvnO0kvwiK1hwTr5ztICsBF+iCwA/cubM4OXdu08t22gvRCJdHlkEtVgCmqAcQa3hkQwZU6o9QwGwADSfydxcsZMf5PPpgAkKGyOPlCFReS4B55HyHj+zrrV1e2cyuaQqeACwODBwpTsW2/FMdXWzC6h2e25usj4crg/qSFfkCIMuhQuoKABrYrGNv2Yy1xu3br27dts27/lEoufZHTvi98fGMmVOv3zsWM36np5EjTGtE7dvf98Rj/clu7o+chIKzsFKyBUKM+ey2c8XrP1tXTTa3xmN9rqgc3OFwtyPU1PXCNhNq1dvGh4ff/fyrl2flmmaTiYX0sBn5cFy6dI2j1QgzfxjcXH649HRnQ8vXrxwa2RE3amU6UskDvXHYh84gA3hcO2rTU1bbAD+U6mpKdYZhsTJO3dOTaXT394aGREA/HLggPvu/PkPZ31/qtQXXGKCmZUuNyQ9koZEdnY2c/PEicdG43wms/B7Pp8JZkTZ1pR0YqUALNJWCBqra82arev37q2vtKltbm6O19V1EEAosA3oriW1qHLN+f7P57LZ0yX5jdfUFKoaG58DMFOyad6y5bWrudxZW2QVFMi2lWDn5yfwf6w/AVsj8D+SOjLFAAAAAElFTkSuQmCC');
}

.right-panel {
	position:absolute;
	top:0;
	left:316px;
	bottom:0;
	right:0;
}

.topbar {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:32px;
	overflow:hidden;
	padding:16px;
}

.topbar BUTTON {
	min-width:60px;
}

.center {
	position:absolute;
	top:64px;
	left:16px;
	right:16px;
	bottom:64px;
}

.editor-js, .editor-css, .editor-html, .editor-ajax {
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

.editor-js, .editor-css, .editor-html{
	background-color:#F8F8F8;
	padding:0;
	border: solid silver 1px;
}

.editor-js .CodeMirror,
.editor-css .CodeMirror,
.editor-html .CodeMirror,
.editor-ajax-center-panel-margin .CodeMirror {
	height: 100%;
}


.editor-ajax-right-panel {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:300px;
}

.editor-ajax-right-panel .simple-list {
	position:absolute;
	top:16px;
	left:16px;
	right:16px;
	bottom:64px;
	overflow-y:auto;
}

.editor-ajax-center-panel {
	position:absolute;
	top:0;
	left:0;
	right:300px;
	bottom:0;
}

.editor-ajax-center-panel-margin {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:#F8F8F8;
	padding:0;
	border: solid silver 1px;
}

.ComponentEditor-current {
  padding: 9px;
  text-align: center;
  height: 17px;
  color: dodgerblue;
  font-weight: bold;
  font-size: 15px;
}
[component="TrunkDouble"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Panel current */
[component="TrunkDouble"] .current-panel {
  position: absolute;
  top: 0;
  left: 100%;
  right:0;
  height: 37px;
  z-index: 999;
  overflow: hidden;

  transition: left 0.4s ease;

  background: white;
}

[component="TrunkDouble"] .current-panel .current-back {
  height: 37px;
  float: left;
  width: 50px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: transparent;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAWCAYAAAAfD8YZAAAAAXNSR0IArs4c6QAAAI9JREFUOMu1lMENg0AMBMehgXSSFiiFl990kv++oJOUQDpJCXwAgcRJd7ayT0uzvrNXhkpJekoaz7VHLQh8gLekaa9bA/g6lWd3HywAHgZdEAQwC4JfoLco6O4/i4KXabeCBxwBASwKViespNyz0wNLryodknQ8WwyKq9r+1W9d7rT87xgUDGZ3H5rSdHcAV2fiaIZsvF6tAAAAAElFTkSuQmCC');
}

[component="TrunkDouble"] .current-panel .current-info {
  border: solid transparent 1px;
  margin-left: 50px;
  height: 35px;
  border-left: none;
  overflow: hidden;
}

/* Panel left */
[component="TrunkDouble"] .left-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  /*z-index: 98;*/
  overflow: hidden;

  background-color: white;

  transition: width 0.4s ease, right 0.4s ease;
}

[component="TrunkDouble"] .left-panel [component="TrunkInputButton"] {
  max-width: 100%;
}

/* Panel splitter */
[component="TrunkDouble"] .splitter-panel {
  position: absolute;
  left: 300px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: pointer;
  transition: left 0.4s ease;
}

[component="TrunkDouble"].splitted .splitter-panel {
  background-color: dodgerblue;
}

[component="TrunkDouble"] .splitter-panel:hover {
  background-color: dodgerblue;
}

/* Panel right */
[component="TrunkDouble"] .right-panel {
  position: absolute;
  left: 308px;
  top: 0;
  bottom: 0;
  right: 0;
  /*z-index: 99;*/
  transition: left 0.4s ease;
  overflow: hidden;

  background: white;
}

/* Splitted functionality */
[component="TrunkDouble"].splitted .left-panel {
  width: 0;
}

[component="TrunkDouble"].splitted .splitter-panel {
  left: 0;
}

[component="TrunkDouble"].splitted .right-panel {
  left: 8px;
}

/* Mobile devices */
@media (max-width: 1024px) {

  [component="TrunkDouble"] .splitter-panel {
    display: none;
  }

  [component="TrunkDouble"] .left-panel {
    right: 0 !important;
    width: auto !important;
  }

  [component="TrunkDouble"] .right-panel {
    top: 37px !important;
    left: 100% !important;
  }

  /* Detailed behaviour */
  [component="TrunkDouble"].detailed .left-panel {
    /*display: none;*/
    right: 100% !important;
  }

  [component="TrunkDouble"].detailed .right-panel {
    left: 0 !important;
  }

  [component="TrunkDouble"].detailed .current-panel {
    left: 0;
  }

}
.code-editor {
	display:block;
	border:none;
	background-color:#F8F8F8;
	width:100%;
	height:100%;
}
.comGraphicTab BUTTON {
	margin-right:4px;
}/* SHADOW BUTTON */

.shadow-button {
	color:white;
	padding:7px;
	margin:0px;
	border-radius:3px;
	background-color: silver;
	border:0px;
	cursor:pointer;
	border:solid silver 1px;
	font-weight:bold;
	text-transform:uppercase;
	font-size:12px;
}

.shadow-button:hover {
	box-shadow:2px 2px 2px rgba(0,0,0,0.1);
	border-color:gray;
}

.shadow-button-blue {
	background-color:#4D90FE;
}

.shadow-button-red {
	background-color:#DD4B39;
}

.shadow-button-green {
	background-color:#3D9400;
}

.shadow-button-white {
	background-color:white;
	color:silver;
	cursor:default;
}

.shadow-button-white:hover {
	box-shadow:none;
	border-color:silver;
}
/* SIMPLE LIST */

.simple-list {
	overflow-y:auto;
}

.simple-list BUTTON {
	display:block;
	border:none;
	padding:8px;
	width:100%;
	background-color:transparent;
	cursor:pointer;
	text-align:left;
}

.simple-list BUTTON:hover {
	background-color:#EEEEEE;
}

.simple-list BUTTON.selected {
	font-weight:bold;
	color:#DD4B39;
}
.graphicList-docked {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.graphicList-docked .graphicList-searchBox {
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.graphicList-docked .graphicList-listBox {
  position:absolute;
  bottom:37px;
  top:37px;
  left:0;
  right:0;
  overflow-y:hidden;
}

.graphicList-docked .graphicList-listBox:hover {
  overflow-y:auto;
}

.graphicList-docked .graphicList-newBox {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

.graphicList-listItem {
  display:block;
  margin:0;
  padding:0;
  border:none;
  background-color:transparent;
  cursor:pointer;
}

.graphicList-listItem:hover {
  background-color:#EEEEEE;
}

.graphicList-listItem-selected .graphicList-listItem-Button {
  color: dodgerblue;
  font-weight: bold;
}

.graphicList-listItem-Button {
  border:none;
  margin:0;
  padding:8px;
  padding-left:32px;
  min-height:32px;
  width:100%;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:5px 5px;
  text-align:left;
  cursor:pointer;
}

.graphicList-listItem-Button {
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IArs4c6QAAADZQTFRFMU5sMU5sMU5sMU5sMU5sMU5sMU5sMU5sMU5sMU5sMU5sMU5sMU5sQ156R2F8SWWCWnGK////PwxnKgAAAAF0Uk5TAEDm2GYAAAA/SURBVCjPY2DAA7h4eBgYGBkZkQkQEMBUygciuLEZAtLDg0uCEZcE6YCRZDtGLcc0hhdTnB8qjZoO4IkBOwAA70MAn3O8RkEAAAAASUVORK5CYII=');
}

.graphicList-listItem-Delete {
  border:none;
  color:red;
  width:32px;
  height:32px;
  margin:0 0 0 -32px;
  padding:0;
  position: absolute;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAALHRFWHRDcmVhdGlvbiBUaW1lAFN1biAxOCBPY3QgMjAwOSAxMDowMjo0MCAtMDAwMJA/7VAAAAAHdElNRQfZChIKHwiHU2OIAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGPC/xhBQAAAHZJREFUeNpj/M9AGmAiUT0DCzbBRrC19YxYdfzHgA3/n4Bhw///WGQZ/6OYigsgbENyUj3DUyQlN5FYr7D7oZEoTzMiXNL4H5sdIPORvY8WrFuheAMQb4FiCuNhVMPw0OANxQFA7APFqAAlxxGTXhlpXgiQrAEAqc4zxVjDvIoAAAAASUVORK5CYII=') no-repeat center center transparent;
  cursor:pointer;
  visibility:hidden;
}

.graphicList-listItem:hover .graphicList-listItem-Delete {
  visibility:visible;
}

.graphicList-listItem-Delete:hover {

}

/* Mobile devices */
@media (max-width: 1024px) {

  .graphicList-docked .graphicList-listBox {
    overflow-y: scroll;
  }

}[component=TrunkInputButton] {
  text-align: center;
  padding: 0;
  margin: auto;
  max-width: 400px;
}

[component=TrunkInputButton] .input-border {
  padding: 0;
  margin: 0;
  border: solid silver 1px;
  border-right: none;
  margin-right: 50px;
  background-color: white;
}

[component=TrunkInputButton] input {
  padding: 8px 0;
  margin: 0;
  height: 19px;
  border: none;
  display: block;
  width: 100%;
}

[component=TrunkInputButton] button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  display: block;
  float: right;
  width: 50px;
  height: 37px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAHNJREFUOMvtlEEKgDAMBLf9xoL4E+vL7U9EYR/QF+hJ6SEHsQE9dG8JYchmaYGuVgWrKWkguT8BSDrqOhoDI4Dt7YbRgK0tlqMn7L6hpAlAdsikBEeYHcr/LFehJADLVZMMTZZJZgCz6w29oNZzSv1X+k4nXy4pS4KwuvEAAAAASUVORK5CYII=');
}

[component=TrunkInputButton].search button {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWBJREFUSMetlc11g0AMhD94uTt3HUw6oAR34HQA7oASXILTAXTgEijB7oAcdCcd5CLyNmL5e2ZuwK5GGklDwgRUtQROQOY+tUAtIh0rkEQCfwI34LhwtwEqEelXE6hqDRSsxw9wEpHHIsFE8G/gDgxZ5sB5C8lbIEvhLlUiUkckzEzCgegA1EYer0BVu0DzxbInKr7EEkptWsKGVkvBAUSkNAkHXGPnUhvFP81jWcwgDHo0+UYE4cs72+DPRwlC9FuiL+1AjGB3eIJ8y2VVzdcQtMHzOdaoGVROsjZG4KfmtiH7wnnTuAJzxcZVUa8I3s6M7GiT34HO1j70oStwH6bFAlcThtjY8k2a3ZDV4YWhGZGkQYMettXPFwgKL2/qpuAhIjlwcT7j7bkBPiYa+48kWWhm5tffj+LMT6oRkTLZY1tnSL52sQprbEyuLNnTd1wlT+CU7G1uqnqzvpUi0v8CaSmPya/yj2AAAAAASUVORK5CYII=');
}

[component=TrunkInputButton].new button {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAFdJREFUOMtjZCAAnj59+oGBgYEfyv0oLS0tgE89EwNhwI+DTbaBJIFRAwehgYxPnz79T0XzPlLbhfw0CcOP1PQyIxF5GSWMpaWlGUfT4aiBRKQtHGysAABkgRG24U1vqQAAAABJRU5ErkJggg==');
}
.CodeMirror-fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  height: auto;
  z-index: 9;
}.CodeMirror-foldmarker {
  color: blue;
  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
  font-family: arial;
  line-height: .3;
  cursor: pointer;
}
.CodeMirror-foldgutter {
  width: .7em;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
  color: #555;
  cursor: pointer;
}
.CodeMirror-foldgutter-open:after {
  content: "\25BE";
}
.CodeMirror-foldgutter-folded:after {
  content: "\25B8";
}/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
}
.CodeMirror-scroll {
  /* Set scrolling behaviour here */
  overflow: auto;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* CURSOR */

.CodeMirror div.CodeMirror-cursor {
  border-left: 1px solid black;
  z-index: 3;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
  width: auto;
  border: 0;
  background: #7e7;
  z-index: 1;
}
/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}

.cm-tab { display: inline-block; }

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable {color: black;}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-property {color: black;}
.cm-s-default .cm-operator {color: black;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  line-height: 1;
  position: relative;
  overflow: hidden;
  background: white;
  color: black;
}

.CodeMirror-scroll {
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actuall scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  padding-bottom: 30px;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding-bottom: 30px;
  margin-bottom: -32px;
  display: inline-block;
  /* Hack to make IE7 behave */
  *zoom:1;
  *display:inline;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-lines {
  cursor: text;
}
.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
}
.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  overflow: auto;
}

.CodeMirror-widget {}

.CodeMirror-wrap .CodeMirror-scroll {
  overflow-x: hidden;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.CodeMirror-measure pre { position: static; }

.CodeMirror div.CodeMirror-cursor {
  position: absolute;
  visibility: hidden;
  border-right: none;
  width: 0;
}
.CodeMirror-focused div.CodeMirror-cursor {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }

.cm-searching {
  background: #ffa;
  background: rgba(255, 255, 0, .4);
}

/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursor {
    visibility: hidden;
  }
}[component="TrunkLogin"] {
  position:absolute;
  margin-top:-100px;
  top:40%;
  left: 0;
  right: 0;
}

[component="TrunkLogin"] form {
  padding: 8px;
  border:solid gray 1px;
  max-width:300px;
  margin: auto;
  border-radius:3px;
  box-shadow:2px 2px 8px rgba(0,0,0,0.4);

  font-family: sans-serif;
  font-size: 14px;
  background-color: white;
}

[component="TrunkLogin"] .errors,
[component="TrunkLogin"] .inputs,
[component="TrunkLogin"] .buttons {
  margin: 8px;
}

[component="TrunkLogin"] .errors {
  color: red;
  margin-left: -8px;
  margin-right: -8px;
  padding:8px 16px;
  background-color: #FFE0E0;
  text-align: center;
}

[component="TrunkLogin"] .inputs label {
  display:block;
  border: solid silver 1px;
  margin: 8px 0;
}

[component="TrunkLogin"] .inputs input {
  border: 0;
  margin: 0;
  padding: 7px 0;
  display: block;
  width: 100%;
  background-color: white;
}

[component="TrunkLogin"] .buttons {
  text-align: right;
  background-repeat: no-repeat !important;
  background-position: 8px center !important;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPNJREFUWMPtlTEKwkAQRZ+2qTT2egVBsBFS2gYPlSY5Qw6Qwt4mB7DxCpJa9AAB12YCS1hjYlYDuh8Gls3OzMvMLAv/rlHH8ztgCyyBBTCR/RtwBk7AAdjbhJwBKaDE7tq6bvq3VHx7KW5I1tbidxJPgcJC8soKidlKc6CslbNaX4AI2ACe5uPJXiRnlMG/lNgv/7w09PkKhB0qGIqPMkA0VqIwJM96zFBmgCi6DFxi4RYlbQbTN/Qts3iVM8M8+fVDK+Co9dy2qpk4Sq6nWgPBBwACif07yrW+5t96jHQpG7HGQ5fRATgAB+AAHIADGBzA6QGaI31VVX87mAAAAABJRU5ErkJggg==') !important;
}[component="TrunkButton"] {
  display: inline-block;
  text-decoration: none;
  padding: 8px 12px;
  margin: 0px;
  border-radius: 4px;
  cursor: pointer;
  border: solid 1px;
  text-transform: capitalize;
  font-size: 14px;
  text-align: center;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;

  /* custom styles */
  color: #333;
  background-color: white;
  border-color: #adadad;
}

[component="TrunkButton"]:hover {
  background-color: #ebebeb;
  border-color: #adadad;
}

[component="TrunkButton"].blue {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

[component="TrunkButton"].blue:hover {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

[component="TrunkButton"].green {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

[component="TrunkButton"].green:hover {
  color: #fff;
  background-color: #47a447;
  border-color: #398439;
}

[component="TrunkButton"].aqua {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

[component="TrunkButton"].aqua:hover {
  color: #fff;
  background-color: #39b3d7;
  border-color: #269abc;
}

[component="TrunkButton"].orange {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

[component="TrunkButton"].orange:hover {
  color: #fff;
  background-color: #ed9c28;
  border-color: #d58512;
}

[component="TrunkButton"].red {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

[component="TrunkButton"].red:hover {
  color: #fff;
  background-color: #d2322d;
  border-color: #ac2925;
}

[component="TrunkButton"].purple {
  color: #fff;
  background-color: #ca8bca;
  border-color: #bd7ebd;
}

[component="TrunkButton"].purple:hover {
  color: #fff;
  background-color: #b176b1;
  border-color: #8e5e8e;
}

[component="TrunkButton"].gray {
  color: #fff;
  background-color: #888888;
  border-color: #777777;
}

[component="TrunkButton"].gray:hover {
  color: #fff;
  background-color: #555555;
  border-color: #555555;
}

[component="TrunkButton"].none {
  color: #428bca;
  background-color: transparent;
  border-color: transparent;
}

[component="TrunkButton"].none:hover {
  color: #2a6496;
  border-color: #2a6496;
}

[component="TrunkButton"]:focus,
[component="TrunkButton"]:focus {
  outline: none;
  box-shadow: 0 0 4px dodgerblue;
}

[component="TrunkButton"][disabled] {
  opacity: 0.65;
  cursor: none;
}[component="TrunkToolbar"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

[component="TrunkToolbar"] .toolbar {
  background-color: #222222;
  border-bottom: solid black 1px;
}

/* link styles */
[component="TrunkToolbar"],
[component="TrunkToolbar"] .link {
  color: white;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 14px;
}

[component="TrunkToolbar"] .link {
  display: inline-block;
  height: 16px;
  padding: 6px 12px 8px;
  border-top-style: solid;
  border-top-width: 2px;
  border-color: transparent;
  cursor: pointer;
  opacity: 0.75;
}

[component="TrunkToolbar"] .link:hover {
  background-color: rgba(0,0,0,0.6);
}

[component="TrunkToolbar"] .link.selected {
  border-color: white;
  opacity: 1;
}

/* Icon styles */
[component="TrunkToolbar"] .link.icon {
  background-position: 9px center;
  background-repeat: no-repeat;
}

[component="TrunkToolbar"] .link.icon:before {
  display: inline-block;
  width: 24px;
  content: '';
  background-color: white;
}

/* Expand button */
[component="TrunkToolbar"] .expand-button {
  display: none;
  float: left;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAADlJREFUSMft0lENACAMA9EbBvDvkik4VAx+egKaNHmQflfqAfbQfpfq5IMF9OB+B0kURVEURVF60gXZuyBu3PIh+gAAAABJRU5ErkJggg==');
}

/* logo */
[component="TrunkToolbar"] .logo {
  display: inline-block;
  float: left;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAUNJREFUSMftlDFKg0EQhd+EmFIIGKsUgqUEFC8QsPMEVrlAbhDS2HoQ8QRWkXgBMY1dBLuACCnSGXifzSYsIWj+XwMWec3uz86bt/N25pe2jPgpAKgDZxFxBNQjQpKmkt4kPUfEtJSy7YbtW2Bie2Z7DmCbtJ/ZnqSYxsaJgRrQXyTL1xxrzvpA7VuLbB9ExJ2kC0DJDkl6kvQCvEtSRBxKOpF0vpLvQdJVRHyssySA8eKC6XaPQAvYB6pZlVVg33YrxSw5wNh2rBMYZuXPbV8XsPUamGf84WpAN7P3E+iUaIpO4i7QzQVObY/SwU3ZngduUgUj4HRdQBto/kKgCbQLDVpGPpZ0mT7vI+L1T0ce6GV939uUVymgsZdmYLn/a4FSqBS0absC2a9DO4t2FpUSiIhYiGzsVbWAwEBSLb3DQP8FX8BoW+3VBAaNAAAAAElFTkSuQmCC');
}

/* user */
[component="TrunkToolbar"] .user {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAJpJREFUSMfdlMERhCAQBHcvAkIwFEI5M9AMCMWQCMEQMIK+z33wwXKIZxX9pewpnGJEngbwQCQnAr6XvIS/GhCNgGg51AjAFKgWHa+CfOrR4XM36MX4AatxPl8q2SraKnjwDgAHBOP3BcD9uj/u+2GijlQdBLyBnTYSsJRmuVV8Zs9mHNi4h01ERGsGrXlJVXWMd3Dc5D7kH3wAOZeq86WpPscAAAAASUVORK5CYII=');
}
/* logout */
[component="TrunkToolbar"] .logout {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAQlJREFUSMfNVVERgzAMTVBQCTgACZUwCUioFCRUwiRMAjhAQh28/ZRb1qM0gdvd3h0/bfJemyYPIiUARHwQtXlsEMBXIrMqt6Mfozs5sTPcrjepAgi51kmWSOJgPVx5TBgE2o8vTr5jUwhsxVao1rEITABGhcCYYyX6ZmkA+LJNjwTynj8tFQBXBMzWQQMwFxxObk7NKypateCY5BxIwpWZN6tAzlnFUl8btHRjcNNfWIW7wedqArLmw9VHJqJBLG2mNlUI1NtUM2gNct/0pIpVeCV5Us3RgdkhX72vHGg+iA8muxZYALzyt1RiovWHY0G44i1RQRzP2poVQo6IHoVf7X3+ZOZTa3kDwwHSEN4i+N4AAAAASUVORK5CYII=');
}

[component="TrunkToolbar"] .form-logout {
  display: none;
}

/* Left menu */
[component="TrunkToolbar"] .left {
  display: block;
}

/* Right menu */
[component="TrunkToolbar"] .right {
  display: block;
  float: right;
}

/* Mobile devices */
@media (max-width: 1024px) {

  [component="TrunkToolbar"] .shadow {
    z-index: 9998;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.4s ease;
  }

  [component="TrunkToolbar"] .expand-button {
    display: block;
  }

  [component="TrunkToolbar"] .logo {
    float: none;
  }

  [component="TrunkToolbar"] .user-name {
    display:none;
  }

  [component="TrunkToolbar"] .left {
    margin-left: -400px;
    position: absolute;
    top: 33px;
    left: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    background: #222222;
    width: 300px;
    max-width: 80%;
    box-shadow: 8px 0 8px rgba(0,0,0,0.6);
    transition: margin-left 0.4s ease;
  }

  /* Expanded behaviour */
  [component="TrunkToolbar"].expanded {
    bottom: 0;
  }

  [component="TrunkToolbar"].expanded .shadow {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
  }

  [component="TrunkToolbar"].expanded .left {
    margin-left: 0;
  }

  [component="TrunkToolbar"].expanded .left .link {
    display: block;
    padding: 8px 12px;
    border-top: none;
    border-left-style: solid;
    border-left-width: 2px;
  }

}


/* Special styles to fit the rest of the screen */
[component="TrunkToolbarWorkspace"] {
  position: absolute;
  top: 33px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
[component] {
   font-family: sans-serif;
}

.TrunkMargin {
   margin: 16px;
}

/* Mobile devices */
@media (max-width: 1024px) {

   .TrunkMargin {
      margin: 0;
   }

}
/* Your CSS here */