html, body { 
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

body {
	-webkit-text-size-adjust:none;
}

.leftPane {
	border-right: 1px solid black;
	width: 300px;
	height: 100%;
	overflow: hidden;
}

.floatingPane {
	position: absolute;
	background-color: white;
	z-index: 3;
}

.floatingPaneDismissArea {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
}

.rightPane {
	height: 100%;
	overflow: hidden;
}

.hidden {
	border-right: 0px solid black;
}

@media (max-height: 500px) {
  .impressum {
    display: none;
  }
}

/* Login View */
.impressumbar {
	width: 100%;
	font-size: 15px;
	text-align: center;
	position: fixed;
	bottom: 0px;
}

#loginView {
	background: url();
	background-repeat:repeat;
	height: 100%;
}

.login-content{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    height: 90%;
}

.login-content .header{
	display: inline-flex;
    align-items: center;
}

.view-landscape .login-content .header{
	padding-right: 20px;
}

.view-portrait .login-content .header{
	padding-bottom: 10px;
}

.login-content .login{
	display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}

.view-landscape .login-content .login{
    flex-direction: row;
}

.login-content .form{
	width: auto;
	margin: 0;
}

.form {
	width: 259px;
	margin: 10px auto 0px auto;
}

.form .logo img {
	width: 150px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.form .field-set {
	border: 1px solid gray;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: white;
	padding: 10px;
	box-shadow: gray 3px 4px;
}

.form .set-title {
	font-weight: bold;
	font-size: 23px;
	margin-left: 10px;
	margin-bottom: 5px;
	color: white;
	text-shadow: gray 0px -1px;
}

.form #submit-button {
	/*margin-top: 5px;*/
}

.form span {
	width: 120px;
	margin-top: 5px;
	display: block;
}

.form input {
	width: 90%;
}

.form .field-row {
	height: 35px;
}

.form .list-button {
	float: right;
	background-color: green;
	width: 10px;
}

.form .list-value {
	float: right;
	text-align: center;
	font-weight: bold;
}

/* LOGIN Protait View */
.body{
  position: absolute;
  top: -20px;
  left: -20px;
  right: -40px;
  bottom: -40px;
  width: auto;
  height: auto;
  background-image: url('../image/the-internet.jpg');
  background-size: cover;
  -webkit-filter: blur(5px);
  z-index: 0;
}

.grad{
  position: absolute;
  top: -20px;
  left: -20px;
  right: -40px;
  bottom: -40px;
  width: auto;
  height: auto;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
  z-index: 1;
  opacity: 0.7;
}

.header{
  z-index: 2;
}

.header div{
  float: left;
  color: #fff;
  font-family: 'Exo', sans-serif;
  font-size: 35px;
  font-weight: 200;
}

.header div span{
  color: #5379fa !important;
}

.login {
  position: relative;
  height: 150px;
  width: 350px;
  padding: 10px;
  z-index: 2;
}

.login input[type=text]{
  width: 250px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
  color: #fff;
  font-family: 'Exo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 4px;
}

.login input[type=password]{
  width: 250px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
  color: #fff;
  font-family: 'Exo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 4px;
  margin-top: 10px;
}

.login button{
  width: 260px;
  height: 40px;
  background: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 2px;
  color: #a18d6c;
  font-family: 'Exo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 6px;
  margin-top: 10px;
}

.login button:hover{
  opacity: 0.8;
}

.login button:active{
  opacity: 0.6;
}

.login input[type=text]:focus{
  outline: none;
  border: 1px solid rgba(255,255,255,0.9);
}

.login input[type=password]:focus{
  outline: none;
  border: 1px solid rgba(255,255,255,0.9);
}

.login button:focus{
  outline: none;
}

.login .pts-link-button{
	color: white;
    text-decoration: underline;
    background: none;
    border: none;
    margin-top: 15px !important;
    padding: 0px;
    opacity: 0.8;
}

div.outer {
	position: relative; 
}

div.outer img { 
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
    margin-left: 20px;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}
div.outer p { 
    position: absolute;
    bottom: 5px;
    margin-left: 130px;
    color: white;
    font-size: 12px; 
}
/* Board View */
.mblIconItem {
	float: none !important;
	display: inline-block;
}

.components {
	text-align: center;
	margin: 10px 0px;
}

.apps {
	max-width: 340px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.logoutButton {
	position: absolute;
	right: 5px;
}

.componentsContainer {
	width: 100%;
}

.mblIconAreaInner img {
	height: 65px;
}

.mblIconAreaInner {
	margin-bottom: 4px;
}

.mblIconAreaTitle {
	color: #45617D;
	font-weight: bold;
	text-overflow: ellipsis;
	overflow: hidden;
	text-transform: uppercase;
	width: 100%;
	display: inline-block;
}

.mblIconArea {
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 15PX;
	height: 85px;
	width: 100px;
}

#docEditButton {
	position: absolute;
	right: 5px;
	display: none;
}

#docActionButton {
	float: right;
}

#personActionButton {
	position: absolute;
	right: 5px;
	display: none;
}

#folderActionButton {
	position: absolute;
	right: 5px;
}

/* Tooltip styles */
.mblTooltip.mblOpener {
	padding: 2px 4px;
	-webkit-box-shadow: 0 0 60px #808080;
}
.mblTooltip.mblOpener #cancel {
	display: none;
}
.mblTooltip.mblOpener button {
	margin: 2px 0px;
	width: 100%;
	height: 40px;
	-webkit-box-shadow: 0 1px 1px #343a4b;
}
/* Overlay styles */
.mblOverlay.mblOpener {
	padding-top: 10px;
	background-color: #60656f;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a6abb4), to(#5b616c), color-stop(0.1, #7b808b), color-stop(0.1, #60656f));
}
.mblOverlay.mblOpener button {
	margin: 5px;
	width: 90%;
	height: 44px;
	border: 3px inset #3a3d43;
	-webkit-border-radius: 12px;
	-webkit-box-shadow: 0 1px 1px #787c84;
	font-size: 18px;
	line-height: 38px;
}
.mblOverlay.mblOpener #cancel {
	margin: 15px 5px;
	background-color: #293039; /* for non-webkit browser */
	background-image: none; /* for non-webkit browser */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#6d7278), to(#383f49), color-stop(0.5, #343c44), color-stop(0.5, #293039));
	color: white;
}
.dj_bb button { /* BB BoxShadow Workaround */
	-webkit-box-shadow: none !important;
}

/* Vorschau */
#vorschauPDFContainer {
	position: absolute;
	left: 50% !important;
	top: -800px;
}
#vorschauPDF {
	position: relative;
	left: -50% !important;
	width: 740px;
	height: 500px;
	background-color: white;
	border: 1px solid black;
}

#vorschauPDFDoneButton {
	float: right;
}

/* Project galerie */
.gallery {
	text-align: center;
}

/*--------------------------*/

.login-scrollview {
	height: 100%;
}

.background-logo {
	background-image: url(../image/background.png);
	background-repeat: no-repeat;
	background-position: center 20px;
	background-size: 600px 600px;
}

.actionButton {
	float: right !important;
	display: none;
}

.homeButton {
	display: block;
}

.searchField {
	float: right !important;
	margin-top: 8px !important;
	margin-right: 5px !important;
	border-radius: 12px !important;
	display: none;
}

.componentDisabled {
	opacity: 0.4 !important;
}

.pathBar, .contentPathBar {
	overflow: hidden;
	white-space: nowrap;
}

#loading {
	position: absolute;
	right: 0px;
	padding: 5px;
	font-weight: bold;
	color: green;
	z-index: 1000;
	opacity: 0;
	display: block;
	pointer-events: none;
}

/* List icon hack */
.mblListItemIcon {
	margin-top: 12px !important;
}

img[src$=".svg"].mblListItemIcon,
.mblAccordionIconParent img[src$=".svg"].mblImageIcon
{
	width: 16px;
}

.rightToolbarButton {
	float: right !important;
}

/* Email - Row */
.message-row {
	height: 90px;
	border-bottom: 1px solid #adaaad;
	cursor: pointer;
}

.message-row-subject {
	font-weight: bold;
	font-size: 17px;
	line-height: 17px;
	margin: 5px 0px;
	overflow: hidden;
	white-space:nowrap;
  text-overflow:ellipsis;
}

.message-row-description {
	font-weight: normal;
	font-size: 17px;
	line-height: 17px;
	margin: 5px 0px;
	height: 35px;
	overflow: hidden;
}

.message-row-sender {
	font-weight: normal;
	font-size: 17px;
	line-height: 17px;
	overflow: hidden;
	white-space:nowrap;
  text-overflow:ellipsis;
	margin: 5px 0px;
}

.message-row-date {
	font-weight: normal;
	font-size: 17px;
	line-height: 17px;
	overflow: hidden;
	white-space:nowrap;
	float: right;
	text-align: right;
	margin: 5px 0px;
}

.message-row-status {
	height: 100%;
	position: absolute;
	width: 5px;
	left: 0px;
}

.message-row-unread {
	background-color: #00b0ec;
}

.message-row-unread-bg {
	background-color: rgba(0,176,236,0.1);
}

.message-row-attachment {
	display: none;
	position: absolute;
	top: -11px;
	right: -7px;
	width: 32px;
	height: 32px;
}

/* Email - detail */
.message-detail {
	font-weight: normal;
	font-size: 17px;
	line-height: 17px;
	height: 100% !important;
	background-color: white;
}

.message-detail > div {
	border-bottom: 1px solid #DBDBDB;
	padding: 10px 10px;
}

.message-detail > div > span.label {
	color: gray;
	margin-right: 5px;
}

.message-detail-subject .subject {
	font-weight: bold;
	font-size: 17px;
	line-height: 17px;
	margin: 0px;
}

.message-detail-subject .date {
	font-weight: normal;
	font-size: 17px;
	line-height: 17px;
	color: gray;
	margin: 5px 0px;
}

.message-detail-content {
	font-weight: normal;
	font-size: 16px;
	line-height: 16px;
	padding: 0px 10px;
}

.message-detail-attachments {
	padding: 0px; 
	margin: 0px;
	border-top: 1px solid #adaaad;
}

/* Badge styling */
.mblDomButtonRedBadge {
  position: relative;
  width: 29px;
  height: 29px;
  text-align: right;
  font-family: Helvetica;
  font-size: 16px;
  font-weight: bold;
}
.mblDomButtonRedBadge > div {
  position: absolute;
  display: inline;
  padding: 0px 5px;
  top: 2px;
  right: 2px;
  color: white;
  border: 2px solid white;
  border-radius: 12px;
  text-align: center;
  background: -webkit-gradient(linear, left top, left bottom, from(#f5bdc0), to(#ae0001), color-stop(0.5, #e44149), color-stop(0.5, #de151f));
  background: linear-gradient(to bottom, #f5bdc0 0%, #e44149 50%, #de151f 50%, #ae0001 100%);
  background-clip: padding-box;
  -webkit-box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5);
}
.mblDomButtonRedBadge > div > div {
  display: none;
}

/* Just for demo */
.mblEdgeToEdgeList   li, .leftPane .mblHeadingDivTitle, .mblIconContainer  li {
	cursor: pointer;
}

/* Dialog
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
*/
.dialog-outer {
	width: 100%; 
	height: 100%;
	overflow: hidden;
	display: table; 
	/*position: static;*/
	position: absolute;
	top: 0px;
	background-color: rgba(35,35,35,0.6);
	z-index: 1000;
}

.dialog-middle {
	top: 50%;
	display: table-cell; 
	vertical-align: middle; 
	width: 100%; 
	position: static;
}

.dialog-inner {
	position: relative;
	top: -50%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	overflow: hidden;
}

/* Termine - Row */
.termin-row {
	height: 50px;
	border-bottom: 1px solid #adaaad;
	cursor: pointer;
}

.termin-row-name {
	font-weight: bold;
	font-size: 17px;
	line-height: 17px;
	margin: 5px 0px;
	overflow: hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.termin-row-categorie {
	font-weight: normal;
	font-size: 17px;
	line-height: 17px;
	overflow: hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	margin: 5px 0px;
}

.termin-row-date {
	font-weight: normal;
	font-size: 17px;
	line-height: 17px;
	overflow: hidden;
	white-space:nowrap;
	float: right;
	text-align: right;
	margin: 5px 0px;
}

.termin-row-status {
	height: 100%;
	position: absolute;
	width: 5px;
	left: 0px;
}

.termin-row-not-done {
	background-color: #00b0ec;
}

.termin-row-not-done-bg {
	background-color: rgba(0,176,236,0.1);
}

.treePopover {
	width: 300px !important;
	overflow: hidden;
}

.ptsListListItemActionIcon {
	margin-top: 5px;
	width: 38px;
	text-align: center;
}
.ptsListListItemActionIcon[disabled='disabled']{
  background-color: white;   
}


.content {
	height: 100%;	
}

.mblToolBarButtonIcon .mblImageIcon {
	height: 21px;
	margin-right: 2px;
	margin-top: 3px;
	margin-left: 2px;
}

.mblAccordionTitle {
	height: 50px;
}

.mblAccordionTitleTextBox {
	padding-top: 10px;
	padding-left: 10px;
}

.mblAccordionIconParent .mblImageIcon {
	margin-top: 9px;
	margin-right: 3px;
	margin-left: 2px;
}

.message-body {
	background: white;
	width: 100%; 
	padding: 10px;
}

.emptyTreeNode {
	padding-top: 19px;
	text-align: center;
	height: 54px;
	font-size: 25px;
	color: gray;
}

/* @see PTSListItem : notwendig da values so lang sein koennen, dass sie mehrzeilig 
 * daregstellt werden muessen. steht hier weil rules aus deviceTheme ueberschrieben werden
 * muessen. sollte besser grundseaetzlich   */
 
 .ptsListItemInput{
  border: none;
  resize: none;
  font-size: 18px;
  font-weight: bold;
 }
 
 .ptsListItemInput[disabled='disabled']{
  background-color: white;   
}
.ptsListItem {
	height: auto;
	min-height: 43px;
}	

.ptsListItem .mblListItemLeftText {
    overflow-wrap: anywhere;	
}
	
.ptsListItem .mblListItemRightText {
	margin: 0px;			
}

.ptsListItem .mblListItemLabelContainer{
	display: flex;	
	justify-content: space-between;
	flex-wrap: wrap;
    align-items: center;
}

#search_form select {
	width: 30%;
	box-sizing: content-box;
	padding: 5px 0;
	float: left;
}

#search_form input {
	width: 60%;
	float: right;
	padding: 5px;
	box-sizing: content-box;
}

#search_form > * {	margin: 1%; }

/* Da die Titel oft zu lang sind, wird hier 
die Block Darstellung des Titels deaktiviert
und dafuer die Inline Darstellung genutzt.
Wahrscheinlich sollte das aber lieber durch
korrekte Verwendung des dojox Frameworks
geloest werden. */

.mblHeadingCenterTitle .mblHeadingSpanTitle,
.mblHeadingSpanTitle { display:initial; }
.mblHeadingCenterTitle .mblHeadingDivTitle, 
.mblHeadingDivTitle { display:none; }

/* Datepicker als overlay (wenn mit dj_phone gestartet)
nebeneinander darstellen. */

.mblOverlay.DatePickerContainer hr { display:none; }
.mblOverlay.DatePickerContainer .DatePickerSelector { 
	float:left;
	width: 50%;
	box-sizing: border-box; 
}

/* Toaster */
.dijitToasterMessage{ 
    color:#253f66;
    font-weight: bold;
}
.dijitToasterContent {
    padding:1em;
	border: 1px solid #253f66;
	border-bottom: 3px solid #253f66;
	border-right: 3px solid #253f66;
    padding-top:0.25em;
    background: white;
    border-radius: 8px;
}
.dijitToasterContent hr{
	border-top: 1px dashed grey;
	background-color: white;
}

.wwbHide {
	display: none;
}

/* Colors */
.treeNodeList .mblListItemSelected .mblListItemLabel{
	color: var(--table-fg-color);
}

div.app-version{
	position: absolute;
	bottom: 4px;
	left: 4px;
	font-style: italic;
    font-size: small;
}