/**
 * Hier werden common Styles definiert, die
 *   - für alle Produkte verwendet werden
 *
 * Diese Datei muss ALS ERSTE CSS Dateie eingebunden werden.
 * (Siehe auch common.extra.css)
 */


/*
  * TODO: refactor:
  *  - Inhaltsverzeichnis
  *  - Rename class 'read' to 'readonly' (Done in AQTIO.web RV 19.12.08)
  *  - Rename class 'noteditable' to 'readonly' (Done in AQTIO.web RV 19.12.08)
  *  - Rename class 'withField' to 'data'
  *  - Class 'data' should be omittable, if 'readonly' is set
  *  - Class 'text' should be omittable, if 'data' or 'readonly' is set
  */

/**
* HS[05.10.2016] DO NOT REMOVE!
*/
.gshDisplay {
  border-color: #6cd8ed;
  font-size: 13;
  margin-bottom: 18;
}

/**
 * General formatting
 */


/* TODO: sollten wir nicht lieber pt nehmen? */
* {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    /*font-size: 12px;*/
}
:focus {
    outline: none;
}

body {
    margin: 0;
    padding: 0;
    background-color: #EAEDED;
}

html,body,table,textarea,input[type='text'] {
    font-size: 12px;
    color: #414B50;
}

/* Added class default, didn't want to break it for everybody */
input[type='text'].default {
    border: 1px solid #D8DEDE;
    border-radius: 4px;
    padding: 3px;
}

.tiny-info {
	font-size: 11px;
	font-weight: lighter;
}

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

.boxSizing {
    width: 100%;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* This class can be set on HTML and be removed by JS after initial loading and updates to
   reduce flickering. */
.loadPending {
	/*display: none;*/
	visibility: hidden;
}

table.login input,table.login select {
    /* Password input has different size than a text input in IE */
    width: 15em;
}

h1 {
    font-size: 12pt;
}

h2 {
    font-size: 10pt;
}

th {
    text-align: left;
    padding: 3px;
}

td.align-right,
th.align-right {
    text-align: right;
}

td.align-center,
th.align-center {
    text-align: center;
}

/* TODO: Wirklich? */
/*  Note: the 'body' prefix is required for FF. */

/*  Achtung die Reihenfolge beachten:
    a:link
    a:visited
    a:focus
    a:hover
    a:active
*/
a,a:hover,a:visited,a:active,a:focus {
    cursor: pointer;
    text-decoration: none;
    color: #28C8DC;
}

a,a img {
    border: none;
}

a img {
    margin: 0;
}

/**
 * Useful classes
 */

div.languageText{
    margin-top: 10px;
    /*border-top: 1px solid #ffffff;*/
	color: #de841f; /*#e47900;*/
}

.bold {
    font-weight: bold;
}

.warning { /* for dynamic created warnings */
    color: red;
    font-weight: bold;
    font-style: italic;
}

.pointer {
    cursor: pointer;
}

.hide,
.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

.italic {
    font-style: italic;
}

.unselectable {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

/**
 * Standard formatting for forms
 */

.label {
    font-size: 12px;
    padding: 10px 0 5px 5px;
    text-decoration: none;
}

/* Use this to center e.g. tables in div in both, IE and FF */
div.centerEverything {
    text-align: center;
}

div.spacing,
span.spacing {
    margin: 5px;
}

.centerEverything table {
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

/**
 * Waiting status (message banner on a blocking-veil)
 */
div.overlay {
    border: none;
    margin: 0pt;
    padding: 0pt;
    z-index: 1000;
    top: 0pt;
    left: 0pt;
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
    filter: alpha(opacity = 20);
    position: absolute;
    cursor: wait;
}

.overlayMsg {
    border: 1px outset gray;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 1001;
    position: absolute;
    width: 275px;
    top: 40%;
    left: 35%;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    cursor: wait;
    text-align: center;
    background-image: url("../img/waiting_24x24.gif");
    background-repeat: no-repeat;
    background-position: center;
}

#loadingBox,
#blockingMsg {
	min-width: 50px;
    min-height: 50px;
    background-image: url("../img/waiting_24x24.gif");
    background-repeat: no-repeat;
    background-position: center;
}

#blockingMsg.busy {
    background-image: url("../img/busy.gif");
}

#blockingMsg {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/**
 * Banners
 */
div.load {
    border: 1px solid #D2D2D2;
    background-color: white;
    margin-top: 50px;
    padding: 10px;
    text-align: center;
    /* Rounded corners */
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
div.load.redirect {
    margin: 3px;
}

img.load {
    padding-bottom: 10px;
}

div.info {
	border: 1px solid gray;
	border-radius: 5px;
	padding: 5px;
	margin: 5px 0;
	color: 	#000;
    color: InfoText;
    background-color: #ffffd0; /* tooltip light yellow */
    background-color: InfoBackground; /* tooltip light yellow */
    text-align: center;
}

.divFormHint,.divError,.divSuccess,.divNote { /* Common banner properties  */
    margin: 5px;
    text-align: center; /* Center text inside the tag */
    background-color: #efefef; /* light gray */
    border-width: 1px;
    border-color: gray;
    border-style: solid;
    padding: 5px;
    z-index: 2;
}

.divFormHint { /* Info banner at the top of the mask */
    background-color: InfoBackground; /* tooltip light yellow */
    color: InfoText;
}

.divNote { /* Info banner, mostly at the bottom if the mask */
    background-color: #efefef; /* light gray */
    color: black;
    font-style: italic;
    border-color: #d2d2d2;
}

.divError {
    /* Red on yellow banner (usually displayed for 5 seconds, then hidden) */
    position: absolute; /* Popup */
    top: 30px;
    left: 30px;
    right: 30px;
    background-color: #ffffd0; /* tooltip light yellow */
    border-color: red;
    font-weight: bold;
    color: red;
}

.divSuccess {
    /* Green message banner (usually displayed for 5 seconds, then hidden) */
    position: absolute; /* Popup */
    top: 30px;
    left: 30px;
    right: 30px;
    background-color: #ffffd0; /* tooltip light yellow */
    font-weight: bold;
    color: green;
}

.divDebug { /* Debug box*/
    background-color: #efefef; /* light gray */
    color: green;
    font-family: monospace;
    font-size: 8pt;
    white-space: pre;
    border-color: gray;
    margin-top: 5px;
    margin-bottom: 5px;
    border-width: 1px;
    padding: 2px;
}

.button {
    font-size: 8pt;
    font-weight: bold;
    background-color: #ECECEC;
    border-top: #FFFFFF 1px solid;
    border-left: #FFFFFF 1px solid;
    border-right: #000000 1px solid;
    border-bottom: #000000 1px solid;
}

td.tdRight {
    text-align: right;
    padding-right: 13px;
}

/*
 *      Navigation formatting
 */

body .nopadding {
    padding: 0;
    margin: 0;
    border: 0 none;
}

/* Obsolete in AQTIO.web */
#logo {
    height: 52px;
    width: 155px;
    text-align: center;
    background-color: white;
    position: absolute;
    border-bottom: 1px solid silver;
}

#navigationNav {
    padding-top: 40px;
}

a.navLinksLinks {
    font-weight: bold;
    vertical-align: middle;
    line-height: 35px;
}

/**
 * Support for expanders:
 * <span class="ui-icon expander">
 */

span.ui-icon.expander {
	background-position: -32px -16px;
}

span.ui-icon.expander.expanded {
	background-position: -64px -16px;
}


/*********************************************************
 *  Standard table formatting: table.plato
 *
 *  Has two columns (20% and 80%)
 */

table.labelContent {
    border: 1px solid #DADDDE;
    border-spacing: 0;
    width: 100%;
}

table.labelContent th {
    font-weight: bold;
    padding: 10px 15px;
}

table.labelContent tr td:first-child {
    cursor: default;
    font-weight: bold;
    padding: 10px 15px;
    width: 20%;
}

table.labelContent tr td:last-child {
    padding: 5px;
    width: 80%;
}

table.labelContent > tr td input[type=text],
table.labelContent > tr > td > span,
#actionTakenTitle {
    padding: 5px 5px 5px 20px;
}

table.labelContent tbody tr td textarea {
    resize: vertical;
}

table.labelContent tbody tr td.valueCell {
	padding-left: 18px;
}
table.labelContent tbody tr td.valueCell:hover, 
table.labelContent tbody tr td.valueCell:focus {
	background: #FFF url("../img/pencil.png") no-repeat 3px center;
}

table.labelContent tbody tr td:not(.read) input[type=text].error,
table.labelContent tbody tr td:not(.read) input[type=text].error:hover,
table.labelContent tbody tr td:not(.read) input[type=text].error:focus  {
    background-color: #FEF1EC;
    border-radius: 4px;
    color: #D1003B;
}

table.labelContent tbody tr td:not(.read) textarea:hover,
table.labelContent tbody tr td:not(.read) textarea:focus {
    background: #FFF url("../img/pencil.png") no-repeat 3px 8px;
    border-radius: 4px;
}

table.labelContent tbody tr td:not(.read) input[type=text]:focus, table.plato tbody tr td:not(.read) textarea:focus {
    box-shadow: 0 0 5px #28C8DC;
}

table.plato a,
table.plato a:hover,
table.plato a:visited,
table.plato a:focus {
    color: 28C8DC;
}


table.plato tr td.read,
table.labelContent tr td.read input[type=text],
table.labelContent tr td.read textarea,
table.labelContent tr td.read span {
    color: #707070;
    cursor: default;
    font-style: italic;
}

/* Odd row*/
table.labelContent tr:nth-child(2n+0) td:first-child {
    background-color: #FDFCFD;
}
table.labelContent tr:nth-child(2n+0) td:nth-child(2n+1) {
    background-color: #F1F1F1;
}
table.labelContent tr:nth-child(2n+0) td:nth-child(2n+2) {
    background-color: #F7F7F7;
}

/* Even row*/
table.labelContent tr:nth-child(2n+1) td:first-child {
    background-color: #F6F6F6;
}
table.labelContent tr:nth-child(2n+1) td:nth-child(2n+1) {
    background-color: #E9E9E9;
}
table.labelContent tr:nth-child(2n+1) td:nth-child(2n+2) {
    background-color: #EEE;
}

/*********************************************************
 *  Standard table formatting: tableView
 *  Used for tables that display a item list of the same type
 */
table.tableView {
    margin: 5px;
    width: 98%;
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
    /* removed - convoy
    border: #000000 1px solid;
    background-color: white;
    */
}

table.tableView th {
    /* removed - convoy
    border-bottom: #000000 1px solid;
    background-color: #D5D5D5;
    */
    padding-right: 17px;
}

table.tableView td {
    padding: 2px 5px;
    border-bottom: #C0C0C0 solid 1px;
}

table.tableView tbody th {
    border-bottom: #C0C0C0 solid 1px;
}

table.tableView th.date,table.tableView th.icon16 {
    width: 25px;
}

table.tableView th.number {
    width: 108px;
}

/* Column type icon image: 13 x 11, 16 x 16, 8 x 8 */
table.tableView th.icon8,table.tableView th.icon13,table.tableView th.icon16 {
    width: 20px;
    text-align: center;
}

table.tableView td.icon8,table.tableView td.icon13,table.tableView td.icon16 {
    text-align: center;
    vertical-align: middle;
}

table.tableView td.icon8 img {
    border: none;
    width: 8px;
    height: 8px;
}

table.tableView td.icon13 img {
    border: none;
    width: 13px;
    height: 11px;
}

table.tableView td.icon16 img {
    border: none;
    width: 16px;
    height: 16px;
}

/* Column type 'number': numeric value (up to 5 digits) */
table.tableView th.number {
    width: 50px;
    text-align: right;
}

table.tableView td.number {
    text-align: right;
}

/* Column type datetime: 2008-08-23 17:23:03 */
table.tableView th.datetime {
    width: 130px;
    text-align: left;
}

table.tableView td.datetime {
    text-align: right;
}

/* Column type date: 2008-08-23 */
table.tableView th.date {
    width: 100px;
    text-align: right;
}

table.tableView td.date {
    text-align: right;
}

/* Column type time: 17:23:03 */
table.tableView th.time {
    width: 100px;
    text-align: right;
}

table.tableView td.time {
    text-align: right;
}

/* Column type name: Martin Wendt/PLATO */
table.tableView th.name {
    width: 150px;
}

table.tableView td.name {
    
}

/* Column type 'status': 'approved' */
table.tableView th.status {
    width: 60px;
}

table.tableView td.status {
    font-style: italic;
    color: green;
}

/*********************************************************
 *  Standard table formatting: tableData
 *  Used for tables that display a labels and data.
 *  used in forms (label + input)
 */
table.tableData {
    width: 95%;
    font-size: 8pt;
    background-color: #EFEFEF;
}

table.tableData tbody tr td {
    border: 0 none;
    padding: 3px 10px 3px 5px;
}

table.tableData input.field {
    width: 100%;
}

/*
 *      Response formatting
 */
.tableResponse {
    border: #000000 1px solid;
    font-size: 8pt;
    margin-top: 10px;
    margin-left: 10px;
    width: 99%;
}

.trTop {
    background-color: #FFFFFF;
    font-weight: bold;
    font-size: 12pt;
    color: #FF0000;
}

.trMiddle {
    background-color: #D5D5D5;
}

.trBottom {
    background-color: #EFEFEF;
}

.textareaResponse {
    font-size: 8pt;
    border-style: none;
    background-color: #EFEFEF;
    width: 100%;
}

/*
 * Wenn eine Reihe leer ist, wird sie nicht angezeigt. Deshalb ist
 * Schrift- und Hintergrundfarbe(siehe 'trMiddle') gleich.
 */
.responseEmptyRow {
    color: #D5D5D5;
}

/*
 *      Menu formatting
 */

/*
    Achtung die Reihenfolge beachten:
    a:link
    a:visited
    a:focus
    a:hover
    a:active
*/
a.menuButton {
    text-decoration: none;
    color: #761E32;
}

.Unsel a:link {
    text-decoration: none;
    color: #575757;
}

.Sel a:visited {
    text-decoration: none;
    font-weight: bold;
    color: #C2150D;
}

.Unsel a:visited {
    text-decoration: none;
    color: #575757;
}

a.menuButton:hover {
    border: 1px outset;
    border-color: ThreeDLightShadow;
    background-color: ButtonFace;
}

.Unsel a:hover {
    color: #C2150D;
    text-decoration: none;
}

.Unsel a:active {
    text-decoration: none;
    color: #C2150D;
}

td.Unsel:hover {
    color: #c2150d;
    text-decoration: none;
    background-color: #F7F7F7;
}

td.Sel:hover {
    color: #C2150D;
    text-decoration: none;
    background-color: #F7F7F7;
}

.Unsel {
    font-size: 8pt;
    line-height: 13pt;
    border: 2px outset threedshadow;
    border-bottom-style: none;
    padding: 4px 8px;
    text-align: center;
    color: #575757;
}

.Sel {
    font-size: 9pt;
    font-weight: bold;
    background-color: threedface;
    border: 2px outset threedshadow;
    border-bottom: 2px solid threedface;
    padding: 5px 8px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #C20D00;
}

.linkSpace {
    position: relative;
    z-index: 1;
    top: 10px;
}

.closePreviewWindow {
    background-color: #B3B1B9;
    border: inherit;
    border-color: #B3B1B9;
    cursor: pointer;
    width: 15px;
    font-size: 10px;
    text-align: center;
}

#navigation-level1 {
    background-color: #BFBFBF;
}

#navigation-level2 {
    background-color: #D9D9D9;
}

#navigation-level3 {
    background-color: #ECECEC;
}

#navigation-level4 {
    background-color: #F7F7F7;
}

#frameborder {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

#arrows {
    z-index: 1;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

* html .Sel {
    display: inline;
}

* html .Unsel {
    display: inline;
}

* html td.Sel {
    display: inline;
}

* html td.Unsel {
    display: inline;
}

/* Create action for owner oder delegated*/
#delegated {
    visibility: hidden;
    display: none;
}

.navLinksLinks {
    height: 20px;
    vertical-align: middle;
}

/* Form Validtator */
label.error {
    color: red;
}

.success {
    color: green;
}

/*  */
.copyright {
    font-size: 7pt;
    color: gray;
}

.copyright a {
    color: gray;
}

/*
 *      Attachment formatting
 */
.tableWrapping {
    width: 99%;
}

.tableWrapping th {
    background-color: inherit;
    padding-bottom: 5px;
}

.tableAttachment th {
    border: black solid 1px;
    background-color: #D5D5D5;
}

.tableAttachment td {
    border-bottom: silver solid 1px;
    padding: 3px;
}

.tableAttachment {
    width: 99%;
    border-collapse: collapse;
    border: black solid 1px;
}

.tableFileUpload {
    width: 99%;
    padding: 3px;
    background-color: white;
}

/*
*       Debug table
*/
.debugText {
    font-family: monospace;
    color: gray;
}

.tableDebug {
    width: 97%;
    border-color: gray;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    margin-left: 3px;
}

table.tableDebug tbody tr td {
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}

table.tableDebug thead th {
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}

.loadingText {
    margin-left: 5px;
}

.tableHelp {
    border-color: gray;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    margin-left: 3px;
    background-color: white;
}

table.tableHelp tbody tr td {
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}

table.tableHelp thead th {
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}

/********************
 * Response page
 */
table.response {
    /*border-collapse: collapse; old design
    border-bottom: 1px solid #D5D5D5;
    border-right: 1px solid #D5D5D5; */
    border: 1px solid rgb(59, 64, 67);
    border-radius: 6px 6px 6px 6px;
    color: rgb(255, 255, 255);
    width: 98%;
    padding: 4px;
    margin: 10px 15px 0px 15px;
    background: #2a2d30; /* Old browsers */
    background: -moz-linear-gradient(top, #666f75 0%, #2a2d30 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666f75), color-stop(94%,#2a2d30)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #666f75 0%,#2a2d30 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #666f75 0%,#2a2d30 94%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #666f75 0%,#2a2d30 94%); /* IE10+ */
    background: linear-gradient(top, #666f75 0%,#2a2d30 94%); /* W3C */
    
    
}

table.response thead tr th {
    padding-left: 53px;
    font-weight: bold;
    border-bottom: 1px solid #D5D5D5;
    
    /* Old design
    text-align: center;
    border-right: 1px solid #D5D5D5;
    background-color: #BFBFBF;
    */
}

table.response a {
    color: rgb(40, 200, 220);/*maroon; old design
    text-decoration: underline;*/
}

table.response a#showDetails {
    margin-top: 8px;
    margin-bottom: 8px;
display: block;
}

table.response tbody {
    background-color: -moz-linear-gradient(center top , rgb(102, 111, 117) 0%, rgb(42, 45, 48) 94%) repeat scroll 0 0 transparent;/* white; old design */
}
/* Icon */
table.response tbody>tr>td>img {
    padding: 8px;
}

table.response tbody tr td textarea {
    width: 100%;
}

table.response tbody tr td.tdIcon {
    vertical-align: top;
}

/********************
 *
 */
.labelGray {
    color: gray;
}

/*********************************************************************/
/***** Table 1 formatting: Table with active Elements ******/
.tableActiveElements {
    width: 100%;
    background-color: #C0C0C0;
    position: fixed;
    top: 0px;
    left: 0px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #828282;
    margin-bottom: 5px;
    padding-left: 3px;
    font-size: 8pt;
    z-index: 2;
    /*background: #C0C0C0 none repeat fixed; color, picture, repeat, scrolling*/
}

.tableActiveElements td {
    vertical-align: middle;
}

.tableActiveElements button {
    font-size: 1em;
    height: 19px;
}

.tableActiveElements select {
    font-size: 1em;
    border: 1px solid gray;
    background-color: #FFFFFF;
    margin-bottom: 4px;
    margin-top: 0px;
    height: 17px;
}

.actionHeadSpacer {
    padding-top: 45px;
}

.pathLable {
    padding-top: 40px;
    margin-left: 10px;
}

.activityLable {
    text-align: right;
}

/*******************************************************************************
 * <table class="tableEdit">
 * Table that contains label/value pairs in edit mode.
 *
 * Supported data types:
 *    text, number, date, datetime, textarea, (TODO: )
 */
table.tableEdit {
    width: 100%;
    background-color: #EAEDED;
}

table.tableEdit th {
    height: 0px;
    font-size: 1px;
    background-color: transparent;
}

table.tableEdit th.hlabel1,table.tableEdit th.hlabel2 {
    width: 150px;
}

table.tableEdit td {
    border: none 0px;
    padding: 3px 5px 3px 5px; /* inner space: top, right, bottom, left*/
}

table.tableEdit fieldset {
    width: 98%;
}

table.tableEdit select {
    width: 100%;
}

table.tableEdit textarea {
    width: 100%;
}

table.tableEdit .label,table.tableEdit label {
    text-align: left;
    width: 120px;
}

table.tableEdit label.radio {
    width: 100%;
}

table.tableEdit input.field,table.tableEdit input.mandField {
    width: 100%;
}

table.tableEdit .commentbox {
    text-align: justify;
    white-space: pre; /* shows text as it is with breaks included */
    background-color: #FFFFFF;
    border: solid InactiveCaption 1px;
}

table.tableEdit .comment p {
    padding: 5px;
    text-align: justify;
}

table.tableEdit td.number input {
    text-align: right;
    width: 8em;
}

table.tableEdit td.date input {
    width: 8em;
}

.noteditable, /* TODO: 'noteditable' is deprecated: use 'readonly' */ .readonly {
    color: gray;
}

/* FIXME: fuer alle produkte anzunehmen,  dass dies einen weissen hintergrund hat, ist vermutlich nicht so schlau. */
.read, /* TODO: 'read' is deprecated: 'readonly' */ .readonly,.withField,
    /* TODO: 'withField' is deprecated: use 'data' */ .data {
    background-color: #FFF;
    /*border-right: 1px solid #D5D5D5;
    border-bottom: 1px solid #D5D5D5;*/
}

.read input, /* TODO: 'read' is deprecated */ .readonly input {
    cursor: default;
    border: 0;
}

table.tableAttachment {
    background-color: #FFFFFF;
}


/**
 * Common dialog boxes
 */
 
#dialog input[type="text"],
#dialog textarea {
    border: 1px solid #D8DEDE;
    border-radius: 4px;
    margin: 10px 0px 10px 0px;
    padding: 3px;
}

#dialog div.errorMsg {
    margin: 0px 0px 10px;
    background-color: #D1003B;
    border-radius: 4px;
    padding: 5px;
}

#dialog div.faultMeta {
    color: #D8DEDE;
    font-size: smaller;
}

.ui-dialog-content table {
    width: 100%;
}

/* td containing the icon */
#dialogIcon {
    width: 43px; /*34px;*/
    vertical-align: top;
}

/* td containing the content */
#dialogMessage {
    vertical-align: top;
    color: #FFFFFF;
    padding-top: 5px;
}

#dialogMessage>div {
    overflow: auto;
}


/**
 * Response table (diagnosis)
 */


table.result {
    margin: 8px;
}

table.result tbody tr.section td {
    font-weight: bold;
    font-size: larger;
    padding-top: 10px;
    padding-bottom: 5px;
}

table.result tbody tr td {
    color: black;
    font-weight: normal;
    padding: 2px 5px;
    vertical-align: top;
}

table.result tbody tr td.content {
    background-color: white;
}

table.result tbody tr.warning td.content {
    color: crimson;
}

table.result tbody tr.error td.content {
    color: red;
}

/***************
 *  List (Sorting)
 **********/
table.sort thead tr .header {
    background-image: url(../img/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.sort thead tr .headerSortUp {
    background-image: url(../img/asc.gif);
}

table.sort thead tr .headerSortDown {
    background-image: url(../img/desc.gif);
}

/*******************************************************************************
 * Dynamic Ajax content
 */
#content {
    /*    border: 1px solid gray;*/
    width: 100%;
    padding: 0px;
    /*
    z-index: 1;
    position: absolute;
    top: 25px;
    left: 22px;
    width: 95%;
*/
}


.divAbout {
    width: 404px;
    height: 351px;
    color: #C20D00;
    margin-top: 10px;
}

.divAbout a:hover {
    text-decoration: none;
}

div.infoBox {
    z-index: 1002;
    position: absolute; /* Popup */
    top: 20%;
    left: 30%;
    right: 30%;
    padding: 2px 5px;
    /*background-color: infobackground;*/
    background-color: #ecfaec;
    /*  font-weight: bold;
    font-size: 12px; */
    text-align: center;
    border: 1px solid gray;
    /* Rounded corners */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div.infoBoxFixed {
    z-index: 1002;
    position: fixed; /* Popup */
    top: 20%;
    left: 30%;
    right: 30%;
    padding: 2px 5px;
    /*background-color: infobackground;*/
    background-color: #ecfaec;
    /*  font-weight: bold;
    font-size: 12px; */
    text-align: center;
    border: 1px solid gray;
    /* Rounded corners */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/*******************************************************************************
* actionlist - top
*/
#actionListFilter {
    margin: 20px 0 27px 0;
    height: 31px;
    white-space: nowrap;
}

#btnRefresh {
    background: url(../img/misc/icon_refresh_green_big.png) 0 0 transparent
        no-repeat;
    width: 32px;
    height: 31px;
    /* text-indent: -9999px; */
    border: none;
    margin-left: 13px;
    /*float: right; */
}

a#showTreeFrame {
    display: block;
    width: 13px;
    height: 65px;
    background: url(../img/common/icon_showTreeFrame.png) 0 0 transparent no-repeat;
    position: absolute;
    left: 0px;
    top: 50%; /* 50% == vCenter */
    margin: -32px 0 0 0;
    display: none;
}

/*label{
    font-weight:bold;
}*/
#labelFromDate {
    margin-left: 26px;
}

#labelToDate {
    margin-left: 10px;
}

.inpDate .ui-datepicker-trigger {
    margin: 0 0 0 5px;
    position: absolute;;
    top: 6px;
    left: 6px;
    cursor: pointer;
}

/*.ui-datepicker-trigger {
    margin: 0 0 0 5px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}*/

/* actionContent */
.tableActiveElements {
    background: url(../img/common/table_top_black_middle.gif) transparent 0 0
        repeat-x;
    border: none;
}

.actionbarLink {
    background-color: none;
}

.contentWrapper{
    padding: 0 20px 0 20px;
    height: 100%;
}

.contentMinWidth{
    /* Used to get a stable layout in lower resulutions. */
    min-width: 800px;
}

.float-left, .floatL {
    float: left;
}

.float-right, .floatR {
    float: right;
}

.clear {
    clear: both;
}


/**
 * Table Top Black
 */
 
 
.tableTopWrapper {
    height: 35px;
    margin: 0 0 0 5px;
    position: relative;
    /* z-index: 1; */
}

.tableTopWrapper .content {
    position: relative;
    zoom: 1;
    _overflow-y: hidden;
    padding: 0 9px 0 0;
    height: 35px;
}

.tableTopWrapper .content p {
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
    margin: 0px;
    padding: 8px 0 0 8px;
}

/** TREE TOP BUTTONS - HOVER */
.tableTopWrapper .content a.treeTopButtons {
    float: right;
    margin: 11px 0 0 5px;
    padding: 0;
    width: 15px;
    height: 13px;
    text-indent: -9999px;
    display: block;
    background-repeat: no-repeat;
}

.tableTopWrapper .content a.treeTopButtons:hover {
    background-position: 0 -13px;
}

.tableTopWrapper .content a.closeTree {
    background-image: url(../img/tree/icon_tree_close.png);
}

.tableTopWrapper .content a.reload {
    background-image: url(../img/tree/icon_tree_reload.png);
}

.tableTopWrapper .content a.iconInfo {
    background-image: url("../../common/img/icon_info_small.png");
}

.tableTopWrapper .content a.bomIcon {
    background-image: url(../img/bom_icon.png);
}

.tableTopWrapper .content a.bomIcon.filterByBom {
    background-image: url(../img/bom_icon_active.png);
}

#toggleBom {
    height: 17px;
    width: 36px;
    margin: 9px 5px 0 0;
}

#toggleBom:hover {
    background-position: 0 -17px;
}

#deleteJobsIcon {
    height: 18px;
    width: 16px;
    margin-top: 7px;
    margin-left: 20px;
	background: url("../../common/img/misc/trash_bin_grey.png");
}

#deleteJobsIcon:hover,
#deleteJobsIcon.deleteJobsExist:hover {
    background-position: 0 -40px;
}

#deleteJobsIcon.deleteJobsExist {
    background-position: 0 -20px;
}


.tableTopWrapper .content,.tableTopWrapper .t {
    background: #31373C url(../img/tree/table_top_black_1200x35.png) no-repeat top right;
}

.tableTopWrapper .t {
    /* top+left vertical slice */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 5px; /* top slice width */
    margin-left: -5px;
    height: 100%;
    _height: 1600px; /* arbitrary long height, IE 6 */
    background-position: top left;
}

a.closeArr {
    float: right;
    display: block;
    width: 20px;
    height: 33px;
    padding: 0;
    margin: 0;
    text-indent: -9999px;
    background: url(../img/common/arr_open_close.png) 4px 0 transparent no-repeat;
}

a.closeArr:hover {
    background-position: -30px 0;
}

a.closeArr.closed {
    background-position: 4px -34px;
}

a.closeArr.closed:hover {
    background-position: -30px -34px;
}

/***************************/
/** messageWrapper - START */
/***************************/
.messageWrapper {
    /* removed, absolute won't work when placed in absolute positioned div (--> no height)
    height: 100px;
    position:absolute;
    top: 50%;
    text-align:center;
    color: #DC2823;
    margin: -50px 0 0 0;
    padding: 0;
    width: 100%;
    */
    position: relative;
    width: 60%;
    min-width: 400px;
    min-height: 100px;
    padding: 28px 25px 28px 35px;
    margin: 75px auto 0 auto;
    line-height: 18px;
    color: #FFF;
    border: solid 1px #3b4043;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 2px 6px #b3b3b3;
    -moz-box-shadow: 0 2px 6px #b3b3b3;
    -webkit-box-shadow: 0 2px 6px #b3b3b3;
    background: #2a2d30; /* Old browsers */
    background: -moz-linear-gradient(top, #666f75 0%, #2a2d30 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666f75),
        color-stop(94%, #2a2d30)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #666f75 0%, #2a2d30 94%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #666f75 0%, #2a2d30 94%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #666f75 0%, #2a2d30 94%); /* IE10+ */
    background: linear-gradient(top, #666f75 0%, #2a2d30 94%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#666f75',
        endColorstr='#2a2d30', GradientType=0); /* IE6-9 */
}

.messageWrapper .messageIcon {
    position: absolute;
    top: -18px;
    left: -18px;
}

.messageWrapper h4 {
    display: block;
    padding: 15px 0 0 0;
    margin: 0 0 0 0;
}

.messageWrapper ul {
    list-style: none;
    display: block;
    padding: 3px 0 0 0;
    margin: 0 0 0 0;
}

.messageWrapper ul li {
    background: url(../img/common/icon_arr_list_white.png) 0 -2px no-repeat
        transparent;
    padding: 0 0 0 20px;
}

.messageWrapper ul li a {
    color: #FFF;
}

.messageWrapper ul li:hover {
    background-position: 0 -22px;
}

.messageWrapper ul li:hover a,.messageWrapper ul li a:hover {
    color: #28C8DC;
}

.messageWrapper pre#details {
    overflow: auto;
}

/**************************/
/** messageWrapper - END */
/**************************/

/**************************/
/** RSS FEED -           */
/**************************/
.rssWrapper {
    height: 20px;
    margin: 15px 0 15px 0;
}

.rssWrapper a {
    color: #414B50;
    float: right;
    margin: 0;
    padding: 0;
}

.rssWrapper a:hover {
    color: #28C8DC;
}

.rssWrapper span {
    display: block;
    float: left;
    padding: 3px 6px 0 0;
}

/*******************************************************************************
 * Info
 */
.compatibilityWarning {
    text-align: center;
    font-size: 16pt;
    color: red;
}

/*******************************************************************************
 * Special treatment in print-mode
 */
@media print { /* Print-only */
    .noPrinting, .noPrint, .no-print {
        display: none;
    }
} /* end of media print */
@media handheld, projection, screen, tty, tv { /* Non-Print only */
    .printOnly, .print-only {
        display: none;
    }
} /* end of media screen */

/*****************************************************************************************************************
 * From AQTIO
 */
 
 
 input.placeholder {
    color: #999999 !important;
}
 
.darkBg {
    color: #FFFFFF;
}

textarea {
    overflow: auto;
}

ul {
    padding: 0;
    margin: 0;
}

/**
 * PLATO buttons (without themeroller)
 */

.platoButton,
.platoButton:link{
    display: inline-block;
    min-height: 30px;
    padding: 6px 20px;
    color: #FFF;
    background: 0 0 repeat-x transparent;
    border-radius: 3px;
    border:none;
    cursor: pointer;
}

.platoButton.active,
.platoButton.active:link,
.platoButton:hover,
.platoButton.hover{
    background-position: 0 -55px;
}

.platoButton.toggle.active,
.platoButton.toggle.active:link,
.platoButton.toggle:hover,
.platoButton.toggle.hover{
    background-position: 0 -28px;
}

.platoButton.red{
    background-image:url(../img/buttons/button_red_bg.gif);
}
.platoButton.green{
    background-image:url(../img/buttons/button_green_bg.gif);
}
.platoButton.black{
	background: linear-gradient(#667176, #2A2E30) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.platoButton.red:hover,
.platoButton.green:hover,
.platoButton.black:hover {
    background: #5A9BB9;
}

.platoButton.width158{
    width: 158px;
    margin: 0;
}

.platoButton.tab{
    border-radius: 4px 4px 0 0;
    background-image: url(../img/buttons/button_tab_bg.gif);
    margin-right: 0px;
    text-align: left;
    padding: 6px 7px;
    float:left;
    margin-right: 3px;
    height: 28px;
}

.platoButton.tab:hover{
    background-position: 0 -28px;
}

.platoButton.tab.active{
    background-position: 0 -55px;
}

/* See common.js setButtonBusy() */
button.plato.busy {
    cursor: wait;
    /*
    background-image: url("../img/waiting_24x24.gif");
    background-repeat: no-repeat;
    background-position: center;
    */
}

/**
 * PLATO tables
 */


.leftTopBorder{
    border-top-left-radius:         6px;
    -moz-border-radius-topleft:     6px;
    -webkit-border-top-left-radius: 6px;
}

.rightTopBorder{
    border-top-right-radius:            6px;
    -moz-border-radius-topright:        6px;
    -webkit-border-top-right-radius:    6px;
}

.leftBottomBorder{
    border-bottom-left-radius:          6px;
    -moz-border-radius-bottomleft:      6px;
    -webkit-border-bottom-left-radius:  6px;
}

.rightBottomBorder{
    border-bottom-right-radius:         6px;
    -moz-border-radius-bottomright:     6px;
    -webkit-border-bottom-right-radius: 6px;
}

.platoContent{
    vertical-align: top;
}

table span{
    text-align: left;
    margin: 0;
    padding: 0;
}

td.vAlignTop{
    vertical-align:top;
}

td.vAlignBottom{
    vertical-align:bottom;
}

.light,
td .light {
    color: #7D8787;
}

.darkBg .light,
.darkBg td .light{
    color: #FFF;
}

td.alignBottom{
    vertical-align: bottom;
}

.hint{
    display: block;
    padding: 8px 0 6px 4px;
    font-size:12px;
    font-style: italic;
}

.alignRight{
    text-align:right;
}

/* TODO: brauchen wir radioButton? */
td.radioButton input[type='radio']{
    display: inline-block;
    margin: 8px 3px 0 0;
}
td.radioButton label {
    display: inline-block;
    margin: 8px 12px 0 0;
}

.h100p{
    height: 100%;
}

a.cancelProgress{
    width: 16px;
    height: 16px;
    /*copied from ../img/icon_close_red.png to resolve caching problems
    the image was not loaded in time right after deleting the cache*/
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAACBUlEQVRIic1VsWrjQBDdJr0a9yryAS7yIYH7gQX/QLgvEP4Bk1TuhJsUaRZzpFEjXIQYG7ImYMMFGwUsCKjwYjiDMIaXJrueWa1Ik+IGBsEy82bem9mVEJ4BkAByNC0HIP14mhgD0ABwMga7scK2n2DbT7AbK5yMsUAaQBxKNgCw7SeYdyI8Xwjm806Ej7uBBTEMxFZe92Qj0fd1T7pOKGd83A1YEE16veqys91YWRAprGAvlzGrUI1Sl2z525jXq64TVgDAYaFZxWqUAgATz+/KngsA2E/yBlfSZlCb/SRvB6BtUzqtACdjgsnrnnR0fBBrTsS/v64ZAG27GqU4LLTbDzLK3I2xfi9cQNsi2S+hJ9ki0Sohn3ciHBaaL5K/yidj8P77xs38+ULg5TLGtp/QynyV/cv0jTUv049c5x99D0x9hNqUSKZLJNMl1KaEqY/tFKiIyXSJaKggbh+YR0OFgX4Li2gry2zWSPRdZjM+xi/OGOg3FkSTuvcZO1Ob0oKc34M4fWQV0lXhki1/G9O9z5ywAgB0ZVjFdFUAABPP78qeCwDIy6rBlbQZ1CYvq3YA2jal0wpg6mMwWWYzR8cHseZEvP7zxABo2+mqgK6M2w8yyvN7UOz/uYC2RbJfQo+/B7RKyKOhgq7Ov7jgKpv6iJuJdjMXtw+I00ck0yWt/B+9B5/5UVCcFUQw8AAAAABJRU5ErkJggg==") 0 0 no-repeat transparent;
    position: absolute;
    right: -34px;
    top: 53px;
    
    border-color:#FFF;
    border-radius:          7px;
    -moz-border-radius:     7px;
    -webkit-border-radius:  7px;
    -webkit-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow:    0px 0px 7px 2px rgba(0, 0, 0, .2);
    box-shadow:         0px 0px 7px 2px rgba(0, 0, 0, .2);
    display: none;
}

a.cancelProgress:hover {
    background-position: 0 -16px;
}


#blockingProgress.ui-progressbar.error {
    background-color: #c73d35; /* red */	
}


/*************** Login-Design *************************************************/
span#platoLogoTop {
    background: url(../../common/img/plato_logo_transparent.png) no-repeat transparent !important;
    width: 113px;
    height: 44px;
    bottom: 20px;
    right: 25px;
    position: absolute;
}

div#productLogo {
    position: absolute;
    left: 25px;
    top: 22px;
}

div#productLogo.hasTopNav {
    top: 60px;
}

form[name="login"].hasTopNav {
	margin: -82px 0 0 -169px;
}
#productLogo span {
    background: url(../../common/img/PLATO_e1ns_Logo_small.png) no-repeat transparent;
    width: 63px;
    height: 63px;
    position:absolute;
}

#productLogo span.logoActions {
    background-image: url("../../common/img/product/plato_e1ns.actions_red.png");
}

#productLogo span.logoAspects {
    background-image: url("../../common/img/product/plato_e1ns.aspects_red.png");
}

#productLogo span.logoDashboard {
    background-image: url("../../common/img/product/plato_e1ns.dashboard_red.png");
}

#productLogo span.logoDocuments {
    background-image: url("../../common/img/product/plato_e1ns.documents_red.png");
}

#productLogo span.logoMethods {
    background-image: url("../../common/img/product/plato_e1ns.methods_red.png");
}

#productLogo span.logoOutputCenter {
    background-image: url("../../common/img/product/plato_e1ns.outputcenter_red.png");
}

#productLogo span.logoScioPortal {
    background-image: url("../../common/img/product/plato_e1ns.scioPortal_red.png");
}

#productLogo span.logoFlow {
    background-image: url("../../common/img/product/plato_e1ns.flow_red.png");
}

#productLogo span.logoArchitect {
    background-image: url("../../common/img/product/plato_e1ns.architect_red.png");
}


/**
 * PLATO tabs
 */

#tabs .docHead {
    padding: 5px 10px;
    min-height: 66px;
    border-top-left-radius: 6px;
    word-break: break-all;
    border-top-right-radius: 6px;
}

.headTable > tbody > tr > td {
    padding: 10px;
    font-weight: bold;
}

.headTable .title {
    color: #0996B3;
    font-size: 18px;
}

#tabs .docTab {
    background: transparent;
    margin: 0 0 0 15px;
    border: 0;
    padding: 0;
}

#tabs .docTab > li {
    float: left;
    margin: 0px 5px 0px 0px;
    font-size: 13px;
    font-weight: bold;
    height: 33px;
    padding-bottom: 1px;
}

#tabs .docTab li a {
    padding: 0.6em 1.2em;
    outline: medium none;
}

#tabs .ui-tabs-panel {
    background: transparent;
    padding: 0;
}

#tabs {
    background: url("../img/document/document_body.png");
    border: 0;
    border-top-left-radius: 6px;
    box-shadow: 0px 15px 10px -10px #BBBBBB;
    color: #414B50;
    margin: 0;
    padding: 0;
    -moz-box-shadow: 0px 15px 10px -10px #BBBBBB;
    
}

.subHead {
    width: 100%;
    height: 26px;
    background: url("../img/document/document_subHead.png") bottom;
}

.head {
	width: 100%;
	height: 32px;
	background: url("../img/document/document_head.png");
	cursor: pointer;
}

.head .headline, .subHead .headline {
	height: 19px;
	padding: 7px 0 0 12px;
	font-size: 14px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	cursor: pointer;
	color: white;
    font-weight: bold;
/*     float: left; */
    margin: 0;
}

.subHead .headline {
	font-size: 12px;
}


span.searchHistory.fancytree-node span.fancytree-title {
  font-weight: normal;
}

/* Mark Fancytree nodes during updates */

span.fancytree-node.pending span.fancytree-title {
    color: navy;
    font-style: italic;
}
span.fancytree-node.pending span.fancytree-title:after {
    content: "...";
    padding-left: 4px;
}

/* Deactivated entries (e.g. system elements) */
td.deactivated span.fancytree-title {
    color: #7D8787;
    text-decoration: line-through;
}


#logoE1ns {
    left: 21px;
    position: absolute;
    top: 57px;
}




#fileWrapper {
    background: white;
    color: black;
    min-height: 100px;
}

#fileTable {
	border-collapse: collapse;
}

#fileTable tr {
	height: 30px;
	border-bottom: thin solid silver;
}

#fileTable tr td {
	padding: 5px 10px;
}

#fileTable tr.uploadSuccessRow {
    background-color: #e3ffe3;
}

#fileTable tbody tr.errorRow {
    color: #C80037;
    background-color: #ffd8d8;
}

#fileTable tbody tr.errorRow div.ui-progressbar-value {
    background-color: #C80037;
}

#fileTable tr td.fileName {
	max-width: 250px;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
#fileTable tr td.cancelUpload {
    background-image: url("../../common/img/delete.png");
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 16px;
}
#fileTable tr td.cancelUpload:hover {
    cursor: pointer;
}
#fileTable tr td.uploadSuccess {
    background-image: url("../../common/img/ok.png");
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 16px;
}
#fileTable tr td.errorInfo {
    background-image: url("../../common/img/iconError_16x16.png");
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 20px;
}
#fileTable tr td.fileSize { max-width: 150px; }
#fileTable tr td.fileProgress { max-width: 230px; }
#fileTable tr td.uploadSuccess { max-width: 30px; }
#fileTable tr td.cancelUpload { max-width: 30px; }

#fileTable .upload-progress {
    border: none;
    border-radius: 0;
    bottom: 0;
    height: 8px;
}

#fileTable .upload-progress.error {
    border: 1px solid red;
}

#uploadInfoText {
    margin-top: 42px;
    text-align: center;
}

/*** Symbolic date *****************************************************/

input.symbolicDate {
    margin-left: 15px;
}

.symbolicDatePicker {
    padding-left: 6px;
    padding-top: 5px;
    position: absolute;
}

#milestoneListContent, #milestoneOffsetContent, #milestoneBeforeAfter, #calcTargetDate {
    margin-top: 20px;
}

#beforeAfter, #offsetContainer {
    margin-right: 10px;
}

#offsetContainer #offset {
    width: 30px;
    text-align: center;
    border: 0;
}

#milestoneDateLable {
    background: url("../img/elements/actions/milestone_active.png") no-repeat 0 center
        transparent;
    padding-left: 20px;
}

#calcTargetDateLable {
    background: url("../../common/img/date/symbolic_date_enabled.png") no-repeat 0 center
        transparent;
    padding-left: 20px;
}

select#milestoneList {
    width: 100%;
}

#milestoneList-menu {
    /* Otherwise the selectbox is bigger than the dialog and is cut off.*/
    height: 100px;
}

/*** **************************************************************************/

.textareaWrapper, .inpWrapper {
    background-color: #D8DEDE;
    border: 1px solid #D8DEDE;
    border-top-color: #c8d1d1;
    border-radius: 4px 4px 4px 4px;
}

.inpWrapper {
	position: relative;
	padding: 5px;
}

.inpWrapper input {
    background-color: transparent;
    border: none;
}

textarea.validationError,
.inpWrapper input.error {
    background-color: #FEF1EC;
    color: #CD0A0A;
}

.inpWrapper input.error {
    border: 1px solid #CD0A0A;
}

/*****************************************************************************/
/** General Styles for Graph Views
	used by: architect, aspects, methods and deltamanager
**/

#diagramTypeMenu {
    padding: 10px 0;
}


#depthMenu {
    padding: 10px 0;
}

#myOverviewDiv {
    background-color: aliceblue;
    border: 1px solid blue;
    height: 100px;
    left: 10px;
    position: absolute;
    top: 70px;
    width: 200px;
    z-index: 300;
}

#diagramWrapper span {
    padding-left: 20px;
}

/*******************************************************************************
 * Table layout
 */

table.plato {
	border: 0px solid #667176;
	border-spacing: 0;
	width: 100%;
}

table.plato thead {
	color: #FFFFFF;
}

table.plato th {
	background: linear-gradient(#667176, #2A2E30) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border-right: 1px solid #667176;
	padding: 6px;
	text-align: left;
}

table.plato th:last-of-type {
    border-right: 0;
}

table.plato tr {
	/* Stop text cursor on text */
	cursor: default;
}

table.plato td {
	padding: 6px 15px;
}

/* TODO: koennte allgemein fuer alle container gelten?*/
.plato-shadow,
table.plato.plato-shadow {
	box-shadow: 2px 2px 4px #B2B2B2;
}

/**
 * List table
 * This is a normal table.
 */

table.plato.plato-list {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

table.plato.plato-list.embedded {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

/* Defines a date column */
table.plato.plato-list th.plato-date {
	width: 65px;
}

/* Defines a toggle button column */
table.plato.plato-list th.plato-toggle {
	width: 66px;
}

/* Defines a icon column */
table.plato.plato-list th.plato-icon {
	width: 16px;
}

/* Defines a user column */
table.plato.plato-list th.plato-user {
	width: 256px;
}

/* Every odd row */
table.plato.plato-list tbody tr:nth-child(2n+1) {
	background-color: #FDFDFD;
}

/* Every even row */
table.plato.plato-list tbody tr:nth-child(2n) {
	background-color: #F5F5F5;
}

table.plato.plato-list tbody tr:hover {
	background-color: #E6F0F2;
}

/* Shows the pointer cursor when the hovered tr is selectable. */
table.plato.plato-list tbody tr.plato-selectable {
	cursor: pointer;
}

table.plato.plato-list tbody tr.plato-selected {
	background-color: #09A4BD;
	color: #FFFFFF;
	border: none;
}

table.plato.plato-list tr.plato-selected td {
	border-right: none; /* No borders, when row is selected */
}

table.plato.plato-list td {
	border-right: 1px solid #EFEFEF;
}

/**
 * Form table
 * Has a lable column and a data coulmn.
 */

table.plato.plato-form tr td:first-child {
	font-weight: bold;
	vertical-align: top;
	width: 20%;
}

table.plato.plato-form tr td:last-child {
	width: 80%;
}

table.plato.plato-form.plato-min tr td:first-child {
	min-width: 300px;
}

table.plato.plato-form.plato-min tr td:last-child {
	min-width: 700px;
}

/* Odd row*/
table.plato.plato-form tr:nth-child(2n+1) td:nth-child(2n+1) {
	background: #E9E9E9;
}
table.plato.plato-form tr:nth-child(2n+1) td:nth-child(2n+2) {
	background: #EEEEEE;
}

/* Even row*/
table.plato.plato-form tr:nth-child(2n+0) td:nth-child(2n+1) {
	background: #F5F5F5;
}
table.plato.plato-form tr:nth-child(2n+0) td:nth-child(2n+2) {
	background: #FDFDFD;
}

caption.plato {
    display: table-caption;
    text-align: center;
    caption-side: bottom;
    padding: 6px;
    background: linear-gradient(#667176, #2A2E30) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF
}

@keyframes loadingBackground {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: 13px 0px;
    }
}

table.busy tbody tr td,
table tbody tr.busy td,
table tbody tr td.busy,
table.invalid tbody tr td,
table tbody tr.invalid td,
table tbody tr td.invalid
{
    color: gray;
    background-position: top left;
    background-repeat: repeat;
    background-image: url("../img/stripe_bg_gray.png");
    animation-name: loadingBackground;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

table.invalid tbody tr td,
table tbody tr.invalid td,
table tbody tr td.invalid
{
    background-image: url("../img/stripe_bg_red.png");
}

/*******************************************************************************
 * Table-like key values, based on <DL> structure
 */

dl.dl-flex { 
  width: 100%;
  max-width: 100%; 
  display: flex;
  flex-flow: row wrap;
/*   flex-wrap: wrap; */
  align-items: flex-start;
  margin: 0 2px;
}
dl.dl-flex * { 
  box-sizing: border-box;
}
dl.dl-flex dt {
/*   padding: 2px 0; */
    margin: 0;
    padding: 0;
  flex: 0 1 10%;
/*   flex: 0 0 20%; */
/*   font-weight: bold; */
  overflow: hidden; /* Prevents long words in labels from causing layout to break */
}
/* Use padding rather than margin in bottom to avoid extra spacing overflowing to the top of the next column */
dl.dl-flex dd {
/*   padding: 2px 0 2px 5px; */
/*   margin-left: 0; */
    margin: 0;
    padding: 0;
    padding-left: 4px;
    flex: 1 1 90%;
    max-width: 90%; /* Fix for IE issue in which box-sizing is not taken into account when using flex */
/*   flex: 80% 0 0; */
/*   color: #555; */
}
/* Multi-value DD */
/* dl.dl-flex dd + dd {
    margin-left: 20%;
} */


/*******************************************************************************
 * Overlay
 */

.plato-overlay {
	top: 0;
	left: 0;
	z-index: 900;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #FFFFFF;
	opacity: 0.6;
}

.plato-overlay.active,
.plato-overlay.visible {
  position: fixed;
}
.plato-overlay.disabled,
.plato-overlay.hidden {
  display: none;
}

/*******************************************************************************
 * Loader
 */

/* Standard Size */
.plato-loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0px;
  text-align: center;
  z-index: 1000;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

/* Static Shape */
.plato-loader:before {
  position: absolute;
  content: '';
  top: 0%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 500rem;
  border: 0.2em solid rgba(0, 0, 0, 0.1);
}

/* Active Shape */
.plato-loader:after {
  position: absolute;
  content: '';
  top: 0%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-animation: loader 0.6s linear;
          animation: loader 0.6s linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 500rem;
  border-color: #767676 transparent transparent;
  border-style: solid;
  border-width: 0.2em;
  box-shadow: 0px 0px 0px 1px transparent;
}

/* Active Animation */
@-webkit-keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* Sizes */
.mini.plato-loader:before,
.mini.plato-loader:after {
  width: 1rem;
  height: 1rem;
  margin: 0em 0em 0em -0.5rem;
}
.tiny.plato-loader:before,
.tiny.plato-loader:after {
  width: 1.14285714rem;
  height: 1.14285714rem;
  margin: 0em 0em 0em -0.57142857rem;
}
.small.plato-loader:before,
.small.plato-loader:after {
  width: 1.71428571rem;
  height: 1.71428571rem;
  margin: 0em 0em 0em -0.85714286rem;
}
.plato-loader:before,
.plato-loader:after {
  width: 2.28571429rem;
  height: 2.28571429rem;
  margin: 0em 0em 0em -1.14285714rem;
}
.large.plato-loader:before,
.large.plato-loader:after {
  width: 3.42857143rem;
  height: 3.42857143rem;
  margin: 0em 0em 0em -1.71428571rem;
}
.big.plato-loader:before,
.big.plato-loader:after {
  width: 3.71428571rem;
  height: 3.71428571rem;
  margin: 0em 0em 0em -1.85714286rem;
}
.huge.plato-loader:before,
.huge.plato-loader:after {
  width: 4.14285714rem;
  height: 4.14285714rem;
  margin: 0em 0em 0em -2.07142857rem;
}
.massive.plato-loader:before,
.massive.plato-loader:after {
  width: 4.57142857rem;
  height: 4.57142857rem;
  margin: 0em 0em 0em -2.28571429rem;
}

/*-------------------
      Coupling
--------------------*/

/* Show inside active dimmer */
.dimmer .plato-loader {
  display: block;
}

/* Black Dimmer */
.dimmer .plato-loader {
  color: rgba(255, 255, 255, 0.9);
}
.dimmer .plato-loader:before {
  border-color: rgba(255, 255, 255, 0.15);
}
.dimmer .plato-loader:after {
  border-color: #FFFFFF transparent transparent;
}

/* White Dimmer (Inverted) */
.inverted.dimmer .plato-loader {
  color: rgba(0, 0, 0, 0.87);
}
.inverted.dimmer .plato-loader:before {
  border-color: rgba(0, 0, 0, 0.1);
}
.inverted.dimmer .plato-loader:after {
  border-color: #767676 transparent transparent;
}

/*******************************
             Types
*******************************/

/*-------------------
        Text
--------------------*/

.text.plato-loader {
  width: auto !important;
  height: auto !important;
  text-align: center;
  font-style: normal;
}

/*******************************
            States
*******************************/

.indeterminate.plato-loader:after {
  -webkit-animation-direction: reverse;
          animation-direction: reverse;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
}
.plato-loader.active,
.plato-loader.visible {
  display: block;
}
.plato-loader.disabled,
.plato-loader.hidden {
  display: none;
}

/*******************************
            Variations
*******************************/

/*-------------------
        Sizes
--------------------*/

/* Loader */
.inverted.dimmer .mini.plato-loader,
.mini.plato-loader {
  width: 1rem;
  height: 1rem;
  font-size: 0.78571429em;
}
.inverted.dimmer .tiny.plato-loader,
.tiny.plato-loader {
  width: 1.14285714rem;
  height: 1.14285714rem;
  font-size: 0.85714286em;
}
.inverted.dimmer .small.plato-loader,
.small.plato-loader {
  width: 1.71428571rem;
  height: 1.71428571rem;
  font-size: 0.92857143em;
}
.inverted.dimmer .plato-loader,
-loader {
  width: 2.28571429rem;
  height: 2.28571429rem;
  font-size: 1em;
}
.inverted.dimmer .large.plato-loader,
.large.plato-loader {
  width: 3.42857143rem;
  height: 3.42857143rem;
  font-size: 1.14285714em;
}
.inverted.dimmer .big.plato-loader,
.big.plato-loader {
  width: 3.71428571rem;
  height: 3.71428571rem;
  font-size: 1.28571429em;
}
.inverted.dimmer .huge.plato-loader,
.huge.plato-loader {
  width: 4.14285714rem;
  height: 4.14285714rem;
  font-size: 1.42857143em;
}
.inverted.dimmer .massive.plato-loader,
.massive.plato-loader {
  width: 4.57142857rem;
  height: 4.57142857rem;
  font-size: 1.71428571em;
}

/* Text Loader */
.mini.text.plato-loader {
  min-width: 1rem;
  padding-top: 1.78571429rem;
}
.tiny.text.plato-loader {
  min-width: 1.14285714rem;
  padding-top: 1.92857143rem;
}
.small.text.plato-loader {
  min-width: 1.71428571rem;
  padding-top: 2.5rem;
}
.text.plato-loader {
  min-width: 2.28571429rem;
  padding-top: 3.07142857rem;
}
.large.text.plato-loader {
  min-width: 3.42857143rem;
  padding-top: 4.21428571rem;
}
.big.text.plato-loader {
  min-width: 3.71428571rem;
  padding-top: 4.5rem;
}
.huge.text.plato-loader {
  min-width: 4.14285714rem;
  padding-top: 4.92857143rem;
}
.massive.text.plato-loader {
  min-width: 4.57142857rem;
  padding-top: 5.35714286rem;
}

/*-------------------
       Inverted
--------------------*/

.inverted.plato-loader {
  color: rgba(255, 255, 255, 0.9);
}
.inverted.plato-loader:before {
  border-color: rgba(255, 255, 255, 0.15);
}
.inverted.plato-loader:after {
  border-top-color: #FFFFFF;
}

/*-------------------
       Inline
--------------------*/

.inline.plato-loader {
  position: relative;
  vertical-align: middle;
  margin: 0em;
  left: 0em;
  top: 0em;
  -webkit-transform: none;
          transform: none;
}

.inline.plato-loader.active,
.inline.plato-loader.visible {
  display: inline-block;
}

/* Centered Inline */
.centered.inline.plato-loader.active,
.centered.inline.plato-loader.visible {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*PDF-Viewer and Overlays*/

.pdfOverlay {
	background: #bfbfbf;
	opacity: .3;
	filter: Alpha(Opacity=30); /* support: IE8 */
	height: 700px;
	width: 100%;
	position: absolute;
	top: 0px;
	visibility: hidden;
}

.pdfOverlay p {
	margin-top: 341px;
	color: black;
	font-size: 64px;
	font-weight: bold;
	text-align: center;
}

/*** Toggle button ************************************************************/

h2 {
  color: #777;
}

h4 {
  color: #999;
}

/**
 * Toggle Button
 */
.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl[disabled] + .tgl-btn {
  cursor: auto;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-flat + .tgl-btn {
  padding: 2px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
/*   background: #fff; */
  background: #D1003B;
/*   border: 4px solid #f2f2f2; */
  border: 4px solid #fff;
  border-radius: 2em;
}
.tgl-flat + .tgl-btn:after {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
/*   background: #f2f2f2; */
  background: #888;
  content: "";
  border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn {
/*   background: #fff; */
  background: #8DBE22;
/*   border: 4px solid #7FC6A6; */
}
.tgl-flat:checked + .tgl-btn:after {
  left: 50%;
/*   background: #7FC6A6; */
  background: #fff;
}

.tgl-btn.hidden {
    display: none;
}

/* Importdialog */

div.plato-popup-wrapper div.uploadIconWrapper {
    width: 64px;
    height: 48px;
    position: relative;
    margin: auto;
    cursor: pointer;
    left: 0px;
    top: 10px;
    transition-property: left;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}

div.plato-popup-wrapper .uploadIconCloud {
    width: 64px;
    height: 48px;
    margin: auto;
    background: url('../../common/img/upload/upload_icon_cloud_FFF.png');
    cursor: pointer;
    z-index: 2;
    position: absolute;
}

div.plato-popup-wrapper .totalUploadProgress {
    background-color: #66CCFF;
    height: 0%;
    position: absolute;
    width: 64px;
    z-index: 2;
    bottom: 0px;
}

div.plato-popup-wrapper div.dz-file-preview:not(:first-child) {
	border-top: 1px dotted grey;
}

div.plato-popup-wrapper div.dz-file-preview {
	padding: 20px 50px;
	margin: 0px 50px;
	transition: color 0.4s linear;
}

div.plato-popup-wrapper div.dz-file-preview div.uploadProgress {
    height: 5px;
}

div.plato-popup-wrapper div.dz-file-preview div.ui-progressbar-value {
    transition: background 0.4s linear;
}

div.plato-popup-wrapper div.dz-file-preview.dz-success div.ui-progressbar-value {
    background: #7aff77;
}

div.plato-popup-wrapper div.dz-file-preview.dz-error div.ui-progressbar-value {
    background: #ff6a6a;
}

div.plato-popup-wrapper div.dz-file-preview.dz-success {
	color: green;
}

div.plato-popup-wrapper div.dz-file-preview.dz-error {
	color: red;
}

div.plato-popup-wrapper div.dz-file-preview div.fileName,
div.plato-popup-wrapper div.dz-file-preview div.uploadResult {
    padding-bottom: 5px;
}

div.plato-popup-wrapper div.dz-file-preview div.uploadProgress {
    margin-bottom: 5px;
}

div.plato-popup-wrapper form.importForm {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -32px;
}

div.plato-popup-wrapper div.fileProgressWrapper {
	text-align: center;
	position: absolute;
	width: 100%;
	left: 0px;
	top: 80px;
	bottom: 95px;
	overflow: auto;
	border-top: 1px solid #cfcfcf;
	border-bottom: 1px solid #cfcfcf;
}

div.plato-popup-wrapper .uploadIconArrow {
    width: 64px;
    height: 48px;
    margin: auto;
    background: url('../../common/img/upload/upload_icon_arrow.png');
    background-repeat: no-repeat;
    background-position: center 20px;
    cursor: pointer;
    z-index: 2;
    transition: background-position 0.3s ease-out;
    position: absolute;
}

div.plato-popup-wrapper .uploadIconArrow:hover {
    background-position: center 15px;
}

div.plato-popup-wrapper.noIframeBorder iframe {
    border: none;
}

div.frameResizingOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    cursor: ew-resize;
    z-index: 9999;
}

div.frameResizingHelper {
    width: 1;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    border-left: 1px dashed black;
    display: none;
}

/* Icon overview */

.icon-help-column {
	float:left;
	padding-right: 20px;
	width: 200px;
}

.icon-help-section-header {
	border-bottom: 1px solid #414B50;
	font-weight: bold;
	margin-bottom: 10px;
}

.icon-help-column li {
	border-bottom: 1px solid #CDCFD1;
	list-style-type: none;
	margin: 0px 0px 10px 0px;
}

.icon-help-column li .icon-help-label{
	/* font-style: italic; */
	margin: 1px 0px 0px 5px;
	position: absolute;
}

/* Fancytree document count */

span.fancytree-node span.document-counter {
    font-size: 9px;
}

div.plato_lightbox_wrapper td.lbLeftSide {
	background: #f1f3f2;
	padding: 20px;
	vertical-align: top;
}

div.plato_lightbox_wrapper td.lbRightSide {
	vertical-align: top;
	background: #ebeded;
	border-left: 1px solid #daddde;
	text-align: center;
	padding: 20px 0px 0px 0px;
}

div.plato_lightbox_wrapper td.lbRightSide button.platoButton {
	margin-left: 20px;
	display: blocK;
}

div.plato_lightbox_wrapper input.lightboxInput {
    line-height: 18px;
    padding: 0;
    resize: none;
    background-color: transparent;
    border: none;
}

div.plato_lightbox_wrapper input.title[type="text"], .title input[type="text"] {
	font-size: 17px;
	font-weight: bold;
}

div.plato_lightbox_wrapper td.lbFooter {
	color: #7D8787;
	padding: 5px 5px 0px 0px;
	font-style: italic;
	text-align: right;
}

div.plato_lightbox_wrapper input.hasDatepicker {
	padding-left: 10px;
}

div.plato_lightbox_wrapper td.inpDate div.inpWrapper {
	padding: 2px 2px 0px 24px;
	position: relative;
}

div.plato_lightbox_wrapper td.inpDate input[type="text"] {
	height: 26px;
}

div.plato_lightbox_wrapper h1.type {
	color: #919B9B;
	padding-left: 5px;
}

div.plato_lightbox_wrapper .label label {
	color: #7D8787;
}

.ui-dialog {
    z-index: 4000 !important;
}

.ui-autocomplete {
    z-index: 4001 !important;
}

div.plato_lightbox_wrapper div.user-control-entry-wrapper {
	margin-top: 5px;
}

/*******************************************************************************
 * jGrowl customization
 */

.jGrowl .plato.jGrowl-notification,
.jGrowl .plato.jGrowl-closer {
	background-color: #414B50;
	margin-right: 21px; /* PLATO default space to browser border is 21px */
	min-height: 15px;
	opacity: 1;
	width: 300px;
}

.jGrowl .plato.jGrowl-notification {
	padding: 15px;
}

.jGrowl .plato.jGrowl-closer {
	padding: 5px 15px;
}

.jGrowl .plato .jGrowl-message {
	cursor: default;
	word-wrap: break-word;
}

.jGrowl .plato .jGrowl-message span.counter{
	border-radius: 1em;
	border: 1px solid #ffffff;
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
	padding: 0.1em 0.4em;
	background-color: #414B50;
	margin-right: 6px;
}

.jGrowl .plato.ui-state-highlight {
	color: #fff;
	border: none;
}

.jGrowl .plato.ui-state-highlight.bright {
	background-color: #fff;
	color: #414B50;
	border: solid 1px #414B50;
}

.jGrowl .plato.jGrowl-notification.error {
	background-color: #c73d35;
}

.jGrowl .plato.jGrowl-notification.warning {
	background-color: #fdf2f6;
	border: solid 1px #c73d35;
	color: #c73d35;
}

/*
.jGrowl .ui-state-highlight.bright {
    background-color: #fff;
    color: #637272;
    border: solid 1px #637272;
}

.jGrowl .jGrowl-notification.error {
    background-color: #D1003B;
}

.jGrowl .jGrowl-notification.warning {
    background-color:       #fdf2f6;
    border: solid 1px #D1003B;
    color: #C80037;
}
*/

.jGrowl .plato.ui-state-highlight{
	background-image: none;
}

.jGrowl-copy {
	margin-top: 5px;
	font-weight: 700;
	font-size: .85em;
	opacity: 0.75;
}

.jGrowl-copy:hover {
	cursor: pointer;
	opacity: 1;
}

.writeLocked .fancytree-custom-icon:before {
	content: "";
	width: 8px;
	height: 8px;
	background-image: url("../img/misc/lock_8x8.png");
	background-repeat: no-repeat;
	display: block;
	margin-left: -3px;
}

/* Hide ckeditor bottom bar html path */
#cke_1_path {
	display: none;
}

/******************************************************************************
 ** PLATO dialog // TODO ?: Move to own file,
 */

.plato-dialog.ui-dialog .ui-dialog-content {
	background: #fff;
    color: #414B50;
	overflow: hidden;
}

.plato-dialog .main-content,
.plato-dialog .selection-content {
	position: relative;
    height: 100%;
    padding: 5px;
    overflow-x: hidden;
}

.plato-dialog .selection-content {
    display: none;
}

.plato-dialog .selection-content h3 {
    margin: 5px 0 15px 0;
}

.plato-dialog .result,
.plato-dialog .selection {
	overflow-y: auto;
}

.plato-dialog .btn-selected {
    position: absolute;
    left: 1em;
}
.plato-dialog .btn-selected span {
    margin-left: 0.5em;
}

.plato-dialog .btn-remove {
    position: absolute;
    right: 2px;
    top: -5px;
    height: 24px;
    font-size: 22px;
    padding: 0;
    color: #314040;
    cursor: pointer;
    background: none transparent;
    border: none;
}
.plato-dialog .btn-remove:hover {
    color: #378998;
}
.plato-dialog .btn-remove::after {
	content: "";
	clear: both;
	display: table;
}

.plato-dialog .ui-selectable,
.plato-dialog .selection {
	/*list-style-type: none;*/
	margin: 0;
	padding: 2px;
	height: 90%;
	border: 1px solid #D0D0D0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
	white-space: nowrap;
}

.plato-dialog .ui-selectable,
.plato-dialog .selection.no-data-available {
    list-style-type: none;
}

.plato-dialog .ui-selectable li,
.plato-dialog .selection li {
    position: relative;
	margin: 5px;
	padding: 5px;
    background-color: #EAEDED;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
	/*color: #314040;*/
    font-size: 1.0em;
    overflow: hidden;
    list-style-position: inside;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.plato-dialog .ui-selectable li[data-selectable="false"] {
    background-color: #fff;
    color: #aaa;
}
.plato-dialog .ui-selectable li[data-selectable="false"].no-data-available,
.plato-dialog .selection li[data-selectable="false"].no-data-available {
    background-color: transparent;
    border: none;
    color: #314040;
}

.plato-dialog .ui-selectable li .description {
    font-size: 90%;
}

.plato-dialog .ui-selectable .ui-selected.pending {
	border-color: navy;
}
.plato-dialog .ui-selectable .ui-selected {
	background-color: #09A4BD ;
	color: #fff;
}
.plato-dialog .ui-selectable .pending {
	color: navy;
	background-color: #D8DEDE;
}

.plato-dialog .pending {
	color: navy;
	font-style: italic;
}

.plato-dialog .input-wrapper {
    margin: 0 0 10px 0;
}

.plato-dialog .input-wrapper fieldset {
    margin: 5px 0;
    background-color: #D8DEDE;
    border-radius: 3px;
    border: 1px solid #D8DEDE;
}

.plato-dialog .input-wrapper fieldset legend {
    color: #414B50;
    background-color: #D8DEDE;
    border-radius: 3px;
    border: 1px solid #D8DEDE;
}
.plato-dialog .input-wrapper fieldset[disabled] {
    display: none;
}

.plato-dialog .input-wrapper fieldset input {
    box-sizing: border-box;
    width: 100%;
	padding: 5px;
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    font-size: 12px;
    line-height: 14px;
    resize: none;
    color: #414B50;
    background-color: #fff;
}
.plato-dialog .input-wrapper fieldset input[type="checkbox"],
.plato-dialog .input-wrapper fieldset input[type="radio"] {
    width: auto;
}

.plato-dialog .input-wrapper fieldset input:first-of-type {
    font-weight: bold;
}

.plato-dialog .input-wrapper fieldset label {
	color: #314040;
    padding: 2px;
}

.plato-dialog .input-wrapper table {
    border-collapse: separate;
    border-spacing: 5px;
}