/*!
 * WellFrame Web Library
 *
 * Copyright (©) Wellcode Software owned by Khamis Abuelkomboz
 *
 * ALL RIGHTS RESERVED, see http://wellcode.de
 *
 */

:root,
.theme-blue {
    --wf-font-family: Gotham Rounded, Gotham Regular, varela Round, Arial Rounded;
    --wf-caption-color: #334253; /*#334253*/
    --wf-caption-size: 0.9em;
    --wf-readonly-color: #F5F9F9; /*#F9FAFA;*/
    --wf-highlight-bgcolor: #fefdc5;
    --wf-border-color: lightgray;
    --wf-border-color2: #e2e2e2;
    --wf-hover-color: #FF3366;
    --wf-hover-bgcolor: #eeeeee;
    --wf-hover-bgcolor2: lightcyan;
    --wf-focus-color: #2eb5ef;
    --wf-h1-color: #0A2A9C; /*#0A5ACC*/
    --wf-h2-color: #0A2A9C; /*#0A5ACC*/
    --wf-h3-color: #334253; /*#637283*/
    --wf-h4-color: #334253; /*#637283*/
    --wf-h5-color: #334253; /*#637283*/
    --wf-text-color: black;
    --wf-text-bgcolor: white;
    --wf-title-bgcolor: #13D5D1;
    --wf-title-color: white;
    --wf-edit-bgcolor: #f3f3f3;
    --wf-warning-color: #FF3366;
    --wf-dialog-bgcolor: #bbbbbb;
    --wf-ask-bgcolor: lightgray;
    --wf-error-bgcolor: indianred; /*ActiveCaption;*/
    --wf-customer-color: #E01271; /*Berry*/
    --wf-menu-bgcolor: #e3e3e3;
    --wf-odd-bgcolor: #e7e7e7;
    --wf-archive-bgcolor: #FFDE28;
    --wf-followup-bgcolor: #FDD766;
}

.theme-red {
    --wf-font-family: Trebuchet, Trebuchet MS, Arial, Genova, Helvetica, sans-serif;
    --wf-caption-color: #8a1F06;
    --wf-readonly-color: #FFF9F9;
    --wf-border-color: lightgray;
    --wf-hover-color: #FF0000;
    --wf-hover-bgcolor: #eeeeee;
    --wf-h1-color: #8A0038;
    --wf-h2-color: #8A0038; /*#B04348*/
    --wf-h3-color: #4B5F46;
    --wf-h4-color: #4B5F46;
    --wf-h5-color: #525659;
    --wf-text-color: #2e2e2e;
    --wf-title-bgcolor: #feEF3E;
    --wf-warning-color: magenta; /*#FFFF00;*/
}

/*.theme-red button#header-owner-button img {
    content: url(../images/logo.red.svg);
}*/

.theme-gray {
    --wf-h1-color: black;
    --wf-h2-color: black;
    --wf-h2-color: black;
    --wf-h3-color: black;
    --wf-h4-color: black;
    --wf-h5-color: black;
    --wf-text-color: black;
}

.theme-classic {
    --wf-font-family: Arial, Geneva, sans-serif;
    --wf-h1-color: black;
    --wf-h2-color: black;
    --wf-h2-color: black;
    --wf-h3-color: black;
    --wf-h4-color: black;
    --wf-h5-color: black;
    --wf-text-color: black;
}

.theme-rounded {
    --wf-font-family: Gotham Rounded, Gotham Regular, varela Round, Arial Rounded;
}

.theme-roundedblack {
    --wf-font-family: Gotham Rounded, Gotham Regular, varela Round, Arial Rounded;
    --wf-h1-color: black;
    --wf-h2-color: black;
    --wf-h2-color: black;
    --wf-h3-color: black;
    --wf-h4-color: black;
    --wf-h5-color: black;
    --wf-text-color: black;
}

.theme-montserrat {
    --wf-font-family: Montserrat, Arial, Genova, Helvetica, sans-serif;
}

@font-face {
    font-family: "Gotham Regular";
    src: url('font/gotham-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('font/GothamRounded-Light.woff2') format('woff2');
    font-weight: 300; /*Light*/
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('font/GothamRounded-LightItalic.woff2') format('woff2');
    font-weight: 300; /*Light*/
    font-style: italic;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('font/GothamRounded-Book.woff2') format('woff2');
    font-weight: normal; /*book*/
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded Book';
    src: url('font/GothamRounded-BookItalic.woff2') format('woff2');
    font-weight: normal; /*Book*/
    font-style: italic;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('font/GothamRounded-Medium.woff2') format('woff2');
    font-weight: 500; /*medium*/
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('font/GothamRounded-MediumItalic.woff2') format('woff2');
    font-weight: 500; /*Medium*/
    font-style: italic;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('font/GothamRounded-Bold.woff2') format('woff2');
    font-weight: bold; /*bold*/
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('font/GothamRounded-BoldItalic.woff2') format('woff2');
    font-weight: bold; /*Bold*/
    font-style: italic;
}

/*
    Barcode 128 with underlined text (labelled)
*/
@font-face {
    font-family: "Barcode 128 Text";
    src: url('font/LibreBarcode128Text.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*
    Barcode 128 without text
*/
@font-face {
    font-family: "Barcode 128";
    src: url("font/LibreBarcode128.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/*
    Font family Montserrat
*/
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('font/montserrat-v26-latin-regular.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('font/montserrat-v26-latin-500.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('font/montserrat-v26-latin-600.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 600;
    src: url('font/montserrat-v26-latin-600italic.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('font/montserrat-v26-latin-700.woff2') format('woff2')
}


@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('font/montserrat-v26-latin-800.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 800;
    src: url('font/montserrat-v26-latin-800italic.woff2') format('woff2')
}

body {
    padding: 0px;
    margin: 0px;
    overflow: auto;
    font-family: var(--wf-font-family);
}

h1 {
    font-size: large;
    color: var(--wf-h1-color);
}

h2 {
    font-size: medium;
    color: var(--wf-h2-color);
}

h3 {
    font-size: smaller;
    color: var(--wf-h3-color);
}

h4 {
    font-size: smaller;
    color: var(--wf-h4-color);
}

h5 {
    font-size: smaller;
    color: var(--wf-h5-color);
}

.item-overlay h1,
.item-overlay h2,
.item-overlay h3,
.item-overlay h4,
.item-overlay h5,
.item h1,
.item h2,
.item h3,
.item h4,
.item h5,
h1,
h2,
h3,
h4,
h5 {
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (min-width: 641px) {
    html {
        height: 100%;
    }

    body {
        height: 100%;
    }
}

.page {
    height: 100%;
    overflow: inherit;
}

.sidebar {
    top: 70px;
    bottom: 0px;
    width: 50px;
    height: calc(100% - 71px);
    min-height: 200px;
    overflow: auto;
    float: left;
    overflow: hidden;
    display: none;
}

.sidebar .itemtemplate {
    overflow: hidden;
}

.sidebar .item-overlay {
    display: none;
}

.sidebar .subitemslist {
    display: none;
}

.sidebar > .itemtemplate:hover .subitemslist {
    position: absolute;
    display: block;
    left: 50px;
    z-index: 1;
}

.sidebar > .itemtemplate:hover .item-overlay {
    display: block;
}

.contents-area {
    position: relative;
    overflow: auto;
    /*z-index: 0;*/
    /*width: 100%;*/
    height: calc(100% - 71px);
}

.contents-area print {
    height: initial;
}

.parent-details-container {
    overflow: hidden;
}

.contents-parent-details {
    border: 1px groove;
    border-radius: 0px;
    overflow: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
}

.commands-area {
    position: relative;
    overflow: auto;
    /*z-index: 0;*/
    margin: 5px;
}

.title {
    overflow: auto;
    background-color: var(--wf-title-bgcolor);
    color: var(--wf-title-color);
    padding: 5px;
    margin-top: 5px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.titled-container {
    overflow: auto;
}

.titled-container .title-text {
    /*float: left;
        width: calc(100% - 105px);*/
}

.itemstemplate {
    overflow: auto;
}

.itemstemplate .itemtemplate {
    height: 100%;
}


.itemtemplate, .mobiletemplate {
    margin: 5px 0px 5px 0px;
    border: 1px solid var(--wf-border-color);
    border-radius: 3px;
    overflow: hidden;
}

.itemtemplate:hover, .mobiletemplate:hover {
    border-color: var(--wf-hover-color);
}

.itemtemplate .parent {
    width: 100%;
}

.itemtemplate .parent .itemtemplate {
    border: none;
}

/*.itemtemplate .item {
        width: calc(100% - 10px);
    }*/

.item-table {
    display: table;
    width: calc(100% - 0px);
    height: 100%;
    overflow: auto;
}

.item-row {
    display: table-row;
    overflow: auto;
}

.item-cell {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    overflow: auto;
}

.item-commands {
    display: none;
    position: absolute;
    top: auto;
    bottom: 1px;
    left: auto;
    right: 1px;
    /*left: 110px;
    right: auto;*/
    margin-top: auto;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: 0px;
}

.mobiletemplate:hover > .item .item-commands,
.itemtemplate .item:hover > .item-commands {
    display: block;
}

.itemstable-body-tr .item-commands {
    /*display: none;
    position: absolute;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: 0px;
    top: auto;
    right: auto;
    right: auto;
    left: 41px;*/
    bottom: auto;
}

.itemstable-body-tr:hover > .item-commands,
.itemstable-body-td:hover > .item-commands,
.itemstable-image-td:hover > .item-commands {
    /*position: relative;*/
    display: block;
    /*z-index: 3;*/
}

.item-commands {
    opacity: 0.3;
}

.item-commands:hover {
    opacity: 0.90 !important;
}

.cmd-edit, .cmd-remove, .cmd-menu {
    margin: 0px;
    padding: 0px;
}

.cmd-edit .image,
.cmd-remove .image,
.cmd-menu .image {
    width: 24px;
    height: 24px;
    overflow: inherit;
}


.cmd-move {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    padding: 0px;
    bottom: auto;
    margin-top: -20px;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: 0px;
}

.itemtemplate:hover > .cmd-move {
    display: block;
    cursor: move;
}

.move-shape {
    padding: 0px;
    position: absolute;
    border: 1px solid blue;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: gray;
    opacity: 0.5;
}

.item-with-commands {
    /*width: calc(100% - 5px);*/
}

.item {
    overflow: auto;
    position: relative;
    height: auto;
    /*padding: 5px 5px 5px 5px;*/
}


.item-text {
    overflow: auto;
    position: relative;
}

.item-VContent {
    font-family: monospace, monospace;
    display: inherit;
    white-space: pre-wrap;
}

.subitemslist {
    overflow: auto;
    width: 100%;
    height: unset;
    float: left;
    /*transition: all 0.5s ease;*/
    opacity: 1;
}

.subitemslist.collapsed {
    height: 0px;
    opacity: 0;
}


.subitemtemplate {
    width: 182px;
    height: 200px;
    margin: 5px 5px 5px 5px;
    border: 1px solid var(--wf-border-color);
    border-radius: 3px;
    float: inherit;
    overflow: hidden;
    position: relative;
}

.subitemtemplate:hover {
    border-color: var(--wf-hover-color);
}

.contents-itemslist {
    margin: 0px;
    padding: 0px;
    position: relative;
    /*z-index: 0;*/
    /*overflow: auto;*/
}

.item-a {
    float: left;
    padding: 0px;
    margin: 0px;
    /*background-color: ButtonFace;
    -ms-progress-appearance: bar;
    -webkit-appearance: button;*/
    width: 100px;
    height: 100px;
    overflow: hidden;
}

a.item-a {
    border: 1px solid var(--wf-border-color); /*transparent*/
}

button.item-a {
    border: 0px;
    background-color: inherit;
}

.item-a:hover {
    border-color: var(--wf-hover-color);
    background-color: var(--wf-hover-bgcolor);
    cursor: pointer;
}

.item-image {
    overflow: inherit;
    border: 0px;
    margin: 0px;
}

@media screen and (min-width: 641px) {
    .item-image {
        padding: 5px;
        height: calc(100% - 10px);
        width: calc(100% - 10px);
    }
}

@media screen and (max-width: 640px) {
    .item-image {
        padding: 2px;
        height: calc(100% - 4px);
        width: calc(100% - 4px);
    }
}

.mobiletemplate .item-image {
    padding: 1px;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
}

.subitem-button {
    position: relative;
    padding: 0px;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: 100px;
    overflow: hidden;
}

.subitem-image {
    width: calc(100% - 90px);
    /*height: 100%;*/
    position: relative;
    overflow: hidden;
    left: 41px;
}

.item-overlay {
    overflow: hidden;
    position: relative;
    padding: 5px 5px 5px 5px;
}

.item-overlayxh2 {
    overflow: auto;
    position: inherit;
}

.editpage {
    position: absolute;
    overflow: auto;
    top: 72px;
    left: 2%;
    width: calc(96% - 12px);
    background-color: var(--wf-edit-bgcolor);
    padding: 5px;
    border: 1px solid var(--wf-border-color);
    box-shadow: 0px 0px 30px 10px darkgray;
}

.editpage .title {
    margin: -5px -5px 0px -5px;
}

.editpage .title button {
    padding: 0px;
    border: 1px solid transparent;
    background-color: transparent;
}

.editpage .title button:hover {
    border: 1px solid darkgray;
}

.editpage .title button img,
.editpage .title img {
    height: 16px;
    width: 16px;
}

.editpage .title .item-image {
    height: 16px;
    width: 16px;
    padding: 0px 5px 0px 0px;
    border: 1px solid transparent;
}

.editpage .title .item-image:hover {
    border-color: var(--wf-border-color);
}

.editpage .title .title-text {
    overflow: hidden;
}

.editpage-fields {
    float: left;
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
}

.editpage-commands {
    float: left;
    width: 100%;
    margin: 5px;
}

.editpage-commands > .cmd-save {
    float: left;
    margin-right: 1px;
    padding: 5px 5px 5px 2px;
}


.verticaleditpage {
    width: auto;
    left: auto;
}

.fieldbutton {
    width: 16px;
    height: 16px;
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 37px;
    right: 1px;
    border: 1px solid transparent;
}

.fieldbutton:hover {
    border: 1px solid darkgray;
}

.fieldbutton img {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

.verticaleditpage .editpage-fields {
    float: none;
}

.verticaleditpage .editpage-fields .fieldtemplate {
    float: none;
}

.verticalfields .fieldgroup {
    width: auto;
}

.verticaleditpage .fieldgroup {
    width: auto;
    float: none;
}

.verticalfields fieldset .fieldtemplate {
    float: none;
}

.command-button {
    margin: 5px 5px 5px 0px;
    font-size: medium;
    padding: 5px;
    float: left;
}

.command-button .cmd-image {
    width: 19px;
    float: left;
    padding-right: 3px;
}

.disabled {
    opacity: 0.5;
}

.command-button:disabled .cmd-image {
    opacity: 0.5;
}

.quick-command {
    border-width: 1px;
}

.quick-command img {
    width: 42px;
    height: 42px;
}

.fieldtemplate {
    float: left;
    position: relative;
    /*height: 65px;*/
    overflow: hidden;
}

@media screen and (min-width: 641px) {
    .fieldtemplate .inputfield-String,
    .fieldtemplate .inputfield-Boolean,
    .fieldtemplate .inputfield-Number,
    .fieldtemplate .inputfield-Decimal,
    .fieldtemplate .inputfield-Date,
    .fieldtemplate .inputfield-DateTime,
    .fieldtemplate .inputfield-ComboBox,
    .fieldtemplate .inputfield-EditableComboBox,
    .fieldtemplate .inputfield-List {
        height: 56px;
    }

    .fieldtemplate .inputfield-Memo,
    .fieldtemplate .inputfield-MemoFormatted,
    .fieldtemplate .fieldtemplate-Memo.inputfield {
        height: unset;
    }

    .sidelabelfield .fieldtemplate .inputfield {
        height: auto;
    }

    .verticalfields .inputfield {
        /*height: auto;*/
    }
}

.fieldgroup {
    overflow: auto;
    float: left;
    width: 100%;
}

.fieldgroup-elements {
    overflow: auto;
}

.inputfield {
    overflow: hidden;
    position: relative;
    width: 260px;
    margin: 5px;
}

input, select, button {
    font-family: var(--wf-font-family);
}

input, select {
    background-color: var(--wf-text-bgcolor);
    border-color: var(--wf-border-color);
}

.field-value,
.fieldtemplate-Boolean .field-title {
    font-size: medium;
    overflow: hidden;
    position: relative;
    width: calc(100% - 12px);
    padding: 5px;
    font-family: inherit;
    color: var(--wf-text-color);
}

.field-ComboBox {
    width: 100%;
}

/*.field-DateTime {
    -webkit-padding-before: 3px;
    -webkit-padding-after: 3px;
}*/

.field-Number,
.field-NumberList,
.field-Decimal,
.field-Time,
.field-Money,
.field-Percent {
    text-align: right;
}

.fieldtemplate-Boolean .field-title {
    padding: 0px;
    vertical-align: -webkit-baseline-middle;
}

.field-value {
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    border-color: var(--wf-border-color2);
    min-height: 24px;
}

.field-ComboBox {
    min-height: 36px;
}

:focus {
    outline-color: var(--wf-focus-color);
}

td .field-value {
    border: 0px;
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: unset;
}

fieldset {
    border: 1px solid var(--wf-border-color);
    border-radius: 3px;
}

@media screen and (max-width: 640px) {
    fieldset {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
    }
}

fieldset legend {
    font-weight: bold;
    color: var(--wf-caption-color);
}


.field-value-memo {
    overflow: auto;
    white-space: pre-wrap;
    height: 8em;
}

.field-Memo .item-value,
.field-value .field-Memo,
.field-value.field-Memo {
    white-space: pre-wrap;
}

.field-title {
    overflow: hidden;
    position: relative;
    color: var(--wf-caption-color);
    font-size: var(--wf-caption-size);
    padding-top: 3px;
}

.fieldtemplate-Boolean .field-value {
    float: left;
    width: auto;
}

.fieldtemplate-Boolean .field-title {
    width: auto;
}

.doc-upload .field-title {
    min-height: 100px;
}

.editpage input.field-NumberList {
    float: none;
    width: calc(100% - 45px);
    height: 24px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.editpage input.field-List,
.editpage input.field-Image,
.editpage input.field-Places,
.editpage input.field-TextList {
    float: none;
    width: calc(100% - 11px);
    height: 24px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.editpage input.field-List:focus,
.editpage input.field-Image:focus,
.editpage input.field-Places:focus,
.editpage input.field-TextList:focus {
    width: calc(100% - 45px);
}

.fieldview .field-List {
    float: none;
    width: auto;
}

.field-button {
    overflow: hidden;
    position: absolute;
    display: flex;
    top: 0px;
    right: 0px;
    width: 35px;
    height: 35px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    border: 1px solid var(--wf-border-color);
    /*background: transparent;*/
    opacity: 0.35;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.field-button.field-button-qrcode {
    right: 35px;
}

.field-button:hover {
    border-color: var(--wf-hover-color);
    opacity: 1;
}

.field-button-clear {
    display: none;
    width: 20px;
    height: 18px;
    position: absolute;
    top: auto;
    bottom: 1px;
    left: auto;
    right: 1px;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px;
    z-index: 1;
}

.sidelabelfield .fieldtemplate .field-overlay .field-button-clear {
    width: 32px;
    height: 35px;
    right: 35px;
}

.sidelabelfield .fieldtemplate-Date .field-button-clear,
.sidelabelfield .fieldtemplate-DateTime .field-button-clear {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
}

.sidelabelfield .fieldtemplate-DateTime:hover > .field-button-clear,
.sidelabelfield .fieldtemplate-Date:hover > .field-button-clear {
    display: inline-block;
}

.sidelabelfield .inputfield-Boolean {
    display: flex;
}

.fieldtemplate-List:hover .field-overlay > .field-button-clear,
.fieldtemplate-NumberList:hover .field-overlay > .field-button-clear,
.fieldtemplate-DateTime:hover > .field-button-clear,
.fieldtemplate-Date:hover > .field-button-clear {
    display: inline-block;
}

.fieldtemplate-List:hover .field-overlay > .field-button-clear.hide,
.fieldtemplate-DateTime:hover > .field-title-area .field-button-hide,
.fieldtemplate-Date:hover > .field-title-area .field-button-clear.hide {
    display: none;
}

.field-button-image {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    padding: 0px;
    margin: 0px;
}

.field-overlay {
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

.field-Notice-area,
.field-Notiz-area {
    width: 100%;
}

.fieldtemplate-Memo {
    width: auto;
}

.fieldtemplate-Signature .field-Canvas {
    min-height: 9em;
}

.editpage.sidelabelfield .fieldtemplate-Signature .field-Canvas {
    width: 100%;
}

.fieldtemplate-Signature .cmd-clear {
    padding: 0px;
    margin: 0px;
    float: right;
    border-color: var(--wf-border-color);
    border-style: dashed;
    cursor: pointer;
}

.sidelabelfield .fieldtemplate-Signature .cmd-clear {
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.listdialog .item-a {
    width: 32px;
    height: 32px;
}

.listdialog .item h2 {
    font-size: medium;
}

.itemstable {
    position: relative;
    overflow: auto;
    border-width: 1px;
    border-style: solid;
    border-color: var(--wf-border-color);
    padding: 0px;
    width: 100%;
}

.itemstable-caption {
    font-weight: bold;
    border: 1px solid var(--wf-border-color);
    border-bottom: 0px;
    background-color: aliceblue;
    text-align: center;
}

.itemstable tr td {
    padding: 5px;
    border-left: 1px solid lightblue;
}

thead td.itemstable-image-td {
    padding: 0px 0px 0px 5px;
}

.itemstable-header {
    position: relative;
    overflow: inherit;
    font-weight: bold;
}

.itemstable-body {
    position: relative;
    overflow: auto;
}


table, tr, td, thead, tbody {
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-style: solid;
    border-spacing: 0px;
}

.itemstable td {
    border-color: var(--wf-border-color);
    border-top-width: 1px;
    vertical-align: top;
}

.itemstable-header-td {
    white-space: nowrap;
}

.itemstable-body-tr:hover {
    border-color: var(--wf-hover-color);
    background-color: var(--wf-hover-bgcolor2);
}


.itemstable-body-td {
    /*white-space: nowrap;*/
    vertical-align: top;
}

/*.itemstable-body-td .field-Number {
    text-align: right;
}*/

.itemstable-td-secondline {
    border-top: 1px solid var(--wf-border-color);
}

.itemstable-image {
    width: 24px;
    height: 24px;
    border: 2px solid transparent;
}

.itemstable-image:hover {
    border-color: var(--wf-hover-color);
}

.td-Vzweck,
.td-Empfaenger {
    white-space: normal;
}

table.itemstable thead {
    background: var(--wf-edit-bgcolor);
}

thead tr {
    overflow: auto;
}

tbody {
    overflow: auto;
}

.field-nowrap {
    white-space: nowrap;
}

/*
    Property listing
*/
.Prop-itemslist {
    overflow: auto;
    padding-top: 3px;
}

.Prop-itemslist .proptemplate {
    float: left;
}

.Prop-itemslist .prop-title {
    width: inherit;
}

.Prop-itemslist .prop-value {
    text-align: right;
}

.Prop-itemslist img {
    display: none;
}

.proptemplate {
    overflow: auto;
    position: inherit;
    border: 1px solid var(--wf-border-color);
}

.prop-overlay {
    overflow: auto;
}

.prop-title {
    float: left;
    width: 40%;
    padding: 5px;
}

.prop-value {
    padding: 5px;
    padding-left: 5px;
}

.prop-image {
    float: left;
    overflow: auto;
    height: 50px;
    width: 50px;
}

.text-readonly {
    background-color: var(--wf-readonly-color);
}

.docviewer {
    border: 2px inset;
    border-color: var(--wf-h1-color);
    width: calc(100% - 4px);
}

.UserLogin-page {
    width: 450px;
    left: 0px;
}

.UserLogin-page.sidelabelfield .field-Notice,
.ChangePassword-page.sidelabelfield .field-Notice {
    height: 6em;
    margin-left: auto;
    width: calc(100% - 12px);
    max-width: unset;
}

.UserLogin-page .field-UserPin-area {
    margin: 20px !important;
}

.UserLogin-page .field-UserPin-area .inputfield {
    width: unset;
}

.UserLogin-page .field-UserPin {
    font-size: 2em;
    letter-spacing: 20px;
}

.parent {
    width: auto;
}

.container {
    overflow: auto;
}


.columnstemplate {
    overflow: hidden;
}

.columnstemplate .left,
.columnstemplate .right {
    float: left;
}

.columns-row {
    display: table-row;
    vertical-align: top;
}

.left-cell,
.right-cell {
    display: table-cell;
    vertical-align: top;
}


.contents-area .Document-item {
    float: none;
    width: auto;
}


.listeditorpage {
    position: relative;
    overflow: auto;
    top: 0px;
    left: auto;
    width: auto;
}

.doccal-page {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
}

.checked-image,
.unchecked-image {
    width: 15px;
    height: 15px;
}

.ui-timepicker-div {
    display: none;
}

.find-page {
    box-shadow: none;
}

.odd {
    background: var(--wf-odd-bgcolor);
}

.completed {
    background-image: url(../images/done.png);
}

.followup {
    background-color: var(--wf-followup-bgcolor);
}

.hide {
    display: none !important;
}

.hidden {
    display: none !important;
}

.show {
    display: block;
}

.minilist {
    border-color: var(--wf-border-color);
}

.minilist tr td {
    padding: 1px;
}

.minilist thead tr td {
    border-top: 0px;
}

.minilist img {
    width: 16px;
    height: 16px;
}

.minilist .field-value {
    padding: 1px;
}

.sublist {
    border: 1px solid var(--wf-border-color);
    border-left: 0px;
    border-right: 0px;
    border-radius: 0px;
    margin-top: 3px;
    /*transition: all 1s ease;*/
    opacity: 1;
}

.sublist .title {
    margin: 0px;
    background-color: var(--wf-edit-bgcolor);
    border-bottom: 1px solid var(--wf-border-color);
    padding: 0px;
}

.sublist .title.collapsed {
    border-bottom: 0px;
}

.sublist .title .title-text {
    margin: 0px;
    padding: 5px 0px 5px 5px;
    font-weight: normal;
    color: var(--wf-caption-color);
}


.dialog-header .commands button,
.sublist .title button {
    padding: 0px;
    border: 1px solid transparent;
    background-color: transparent;
}

.dialog-header .commands button:hover,
.sublist .title button:hover {
    border: 1px solid darkgray;
}

.dialog-header .commands button img,
.sublist .title button img {
    height: 100%;
    width: 24px;
}

.sublist .title .cmd-collapse {
}

.sublist .container {
    padding: 0px;
}

.sublist .container .itemstable {
    border: 0px;
    border-right: 1px solid lightblue;
    overflow: hidden;
}

.sublist .container.grid {
    padding: 3px;
}

.sublist .container.collapsed {
    display: none;
    opacity: 0;
}

.sublist .commands {
    margin: 0px;
    padding-right: 3px;
}

.sublist .sublist-commands {
    /*float: right;*/
    overflow: hidden;
}

.contents-itemslist > .sublist.WebEntity-List {
    padding: 0px;
    margin: 0px;
}

.fieldview.sublist .field-ComboBox {
    min-height: unset;
}

.fieldview.sublist .field-value {
    background-color: var(--wf-readonly-color);
    min-height: unset;
}

.fieldview.sublist .field-title {
    padding-top: 3px;
}

.fieldview.sublist .field-String,
.fieldview.sublist .field-DateTime {
    white-space: nowrap;
}

.fieldview.sublist .field-Image {
    width: unset;
    float: none;
}

.fieldview.sublist .field-Memo {
    white-space: pre-wrap;
    font-family: monospace, monospace;
    height: auto;
}

.fieldview.sublist .field-DateTime {
    -webkit-padding-before: 5px;
    -webkit-padding-after: 5px;
}

.fieldview.sublist .inputfield {
    width: auto;
    height: unset;
}

.emptyfield {
    display: none;
}

.newvalue {
    color: green;
}

.oldvalue {
    color: var(--wf-warning-color);
}

.centered {
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    min-width: 50%;
    /*max-width: 500px;*/
    min-height: 200px;
    /*max-height: 60%;*/
    /*z-index: 3; is set using js*/
}

.hcentered {
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    max-width: 600px;
}

.rightbottom {
    position: absolute;
    top: auto;
    bottom: 1px;
    left: auto;
    right: 1px;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: 0px;
}

@media screen and (max-width: 640px) {
    .rightbottom {
        position: relative;
        overflow: auto;
    }
}

/*
.sidelabelfield .fieldtemplate {
    width: 380px;
}
.verticaleditpage .fieldtemplate {
    width: auto;
}
*/

.sidelabelfield .fieldtemplate .field-title {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    max-height: 22px;
}

.sidelabelfield .fieldtemplate .field-value {
    position: relative;
    /*left: 160px;*/
    top: 0px;
    bottom: 0px;
    margin: auto;
    margin-left: 160px;
    min-height: 22px;
    width: auto;
    max-width: calc(100% - 171px);
    z-index: 1;
}

.sidelabelfield .fieldtemplate .field-overlay {
    display: flex;
    align-items: center;
}

.sidelabelfield .fieldtemplate .field-value.field-DateTime {
    max-height: 22px;
}

.sidelabelfield .fieldtemplate .inputfield {
    width: 435px;
    min-height: 36px;
    max-width: unset;
    overflow: hidden;
}

.verticaleditpage.sidelabelfield .fieldtemplate .inputfield {
    width: auto;
}

.sidelabelfield .fieldtemplate .inputfield-Notice {
    width: auto;
}

.sidelabelfield .fieldtemplate .field-Decimal,
.sidelabelfield .fieldtemplate .field-Number,
.sidelabelfield .fieldtemplate .field-Time {
    text-align: left;
}

.sidelabelfield .fieldtemplate .field-Memo,
.sidelabelfield .fieldtemplate .field-String,
.sidelabelfield .fieldtemplate .field-EditableComboBox {
    width: calc(100% - 172px);
    max-width: unset;
}

.sidelabelfield .fieldtemplate .field-ComboBox {
    width: calc(100% - 160px);
    max-width: unset;
}

.sidelabelfield .fieldtemplate .field-NumberList {
    width: calc(100% - 206px);
    min-height: 24px;
}

.sidelabelfield .fieldtemplate .field-List,
.sidelabelfield .fieldtemplate .field-ImageName,
.sidelabelfield .fieldtemplate .field-Places {
    width: calc(100% - 172px);
    min-height: 24px;
}

.sidelabelfield .fieldtemplate .field-List:focus,
.sidelabelfield .fieldtemplate .field-ImageName:focus,
.sidelabelfield .fieldtemplate .field-Places:focus {
    width: calc(100% - 206px);
}

.sidelabelfield .fieldtemplate .fieldtemplate .fieldgroup {
    float: none;
}

.selected {
    background: linear-gradient(to right, aqua 0%, royalblue 200%);
}

/*
 Register new!!
*/
.a-divider.a-divider-break {
    text-align: center;
    position: relative;
    top: 2px;
    padding-top: 30px;
    margin-bottom: 14px;
    line-height: 0;
    display: inline-block;
    /*z-index: 2;*/
    width: 100%;
}

.a-divider.a-divider-break:after {
    content: "";
    width: calc(100% - 10px);
    background-color: transparent;
    display: block;
    height: 1px;
    border-top: 1px solid lightskyblue; /*#e7e7e7;*/
    position: absolute;
    top: 25%;
    margin-top: -1px;
    z-index: -1;
}

.a-button {
    background: #e7e9ec;
    border-radius: 0px;
    border-color: #adb1b8 #a2a6ac #8d9096;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    width: calc(100% - 25px);
}

.googlediv {
    background: white;
    padding: 5px;
    border: 1px solid gray;
}

.list-entity {
    position: relative;
    background: var(--wf-text-bgcolor);
    top: 0px;
    padding: 0px;
    margin: 0px;
}

.list-entity.sidelabelfield {
    left: 160px;
    width: calc(100% - 195px);
}

.invalid-value,
td .invalid-value {
    border: 1px solid var(--wf-warning-color);
}

.validation-messages {
    border: 0px;
    color: var(--wf-warning-color);
    padding: 5px;
    margin: 5px;
    white-space: pre-wrap;
}

.warning {
    color: var(--wf-warning-color);
}

.redmarker,
.redmarker h2,
.redmarker h3,
.redmarker h4,
.redmarker h4,
.redmarker div,
.redmarker label,
.redmarker .field-title {
    background-color: var(--wf-color-parking);
}

.yellowmarker,
.yellowmarker h2,
.yellowmarker h3,
.yellowmarker h4,
.yellowmarker h4,
.yellowmarker div,
.yellowmarker label,
.yellowmarker .field-title {
    background-color: var(--wf-followup-bgcolor);
}

.ImageProfile-item,
.mediaimage {
    width: 300px;
    height: 366px;
    float: left;
    margin: 5px;
}

.ImageProfile-item .item-a,
.mediaimage .item-a {
    width: 300px;
    height: 300px;
    border: 1px solid var(--wf-border-color);
}

.ImageProfile-item .item-image,
.mediaimage .item-image {
    left: auto;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    /*max-height: 280px;*/
}

.ImageProfile-item .item-overlay {
    height: 65px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.dialogbox.camera-dialog {
    max-width: 100% !important;
    max-height: 100% !important;
}

.dialogbox.camera-dialog button.command-button {
    font-size: 1.5em;
}

.dialogbox.camera-dialog button.command-button img {
    width: 32px;
}

.dialogbox.camera-dialog .dialog-message-div {
    height: calc(100% - 140px);
}

.subitemslist.subtree {
    position: relative;
    left: 30px;
    max-width: calc(100% - 30px);
}

.subitemslist > .itemtemplate .item-a {
    height: 70px;
    width: 70px;
}

.ImportExport-page .inputfield {
    width: unset;
}

.ImportExport-page .field-value-memo {
    height: 5em;
}

.cmd-expand {
    border: 0px;
    background-color: transparent;
    height: 24px;
    width: 24px;
    position: absolute;
    bottom: 5px;
    left: 5px;
    padding: 0px;
    margin: 0px;
    display: none;
    cursor: zoom-in;
    /*cursor: url(../images/expand.png), zoom-in;*/
}

.expanded > .item-table button.cmd-expand {
    cursor: zoom-out;
    /*cursor: url(../images/collapse.png), zoom-out;*/
}

.itemtemplate.expanded .vitems-container {
    display: none;
}

.show-more,
.show-less {
    padding-left: 10px;
    text-align: right;
    color: blue;
    cursor: pointer;
}

.itemhalfsize {
    width: 50%;
}

.left.itemhalfsize {
    padding-right: 1px;
    width: calc(50% - 1px);
}

.right.itemhalfsize {
    padding-left: 1px;
    width: calc(50% - 1px);
}

.header-table {
    width: calc(100% - 125px);
}

/*
    archive mode highlighting
*/
html.archive-mode header {
    background-color: var(--wf-archive-bgcolor);
}

@media screen and (min-width: 641px) {

    .titled-container .title .commands {
        display: none;
    }

    .titled-container:hover .title .commands {
        display: block;
    }

    .itemtemplate .item:hover > div > .cmd-expand.expandable {
        display: block;
    }

    .itemtemplate .item:hover > .cmd-expand.expandable {
        display: block;
    }
}

/*
    Phone
*/
@media screen and (max-width: 640px) {

    html {
        height: initial;
    }

    body {
        height: initial;
    }


    .contents-area {
        height: auto;
    }

    .itemtemplate {
        padding: 0px;
        margin: 2px 0px 0px 0px;
    }

    .columns-row,
    .left-cell,
    .right-cell {
        display: block;
        vertical-align: top;
        vertical-align: top;
    }

    .item-table {
        display: block;
    }

    .item-row {
        display: block;
        overflow: hidden;
    }

    .item-cell {
        display: block;
        width: auto;
    }

    .item-a {
        padding: 0px;
        margin: 0px;
    }

    .item-a {
        width: 50px;
        height: 50px;
        padding: 0px;
        margin: 0px;
    }

    .Mobile-item .item-a {
        width: 50px;
        height: 50px;
    }

    .menu-button {
        width: 50px;
        height: 50px;
    }

    .mobiletemplate h2 {
        font-size: large;
    }

    .subitemslist.subtree {
        left: 15px;
        max-width: calc(100% - 15px);
    }

    .subitemslist > .itemtemplate .item-a {
        height: 34px;
        width: 34px;
    }

    .subitemtemplate {
        width: 100px;
        height: 155px;
    }

    .item-overlay h2,
    .subitemtemplate .item-overlay h2 {
        font-size: 0.9em;
        padding: 0px;
        margin: 0px;
    }

    .subitem-button {
        width: 100px;
        height: 100px;
    }

    .subitem-image {
        left: 14px;
        top: 14px;
        width: calc(100% - 32px);
        height: calc(100% - 32px);
    }

    .fieldtemplate {
        width: 100%;
        max-width: unset;
        min-width: unset;
    }

    .Find-page .fieldtemplate {
        width: auto;
    }

    .field-value, fieldtemplate-Boolean .field-title {
        font-size: large;
    }

    .field-value-memo {
        height: 8em;
        white-space: normal;
    }

    .inputfield {
        width: auto;
        max-width: calc(100% - 10px);
    }



    .itemstable-image {
        width: 25px;
        height: 25px;
    }

    .prop-image {
        height: 100px;
        width: 100px;
    }

    .editpage {
        position: fixed;
        top: 0px;
        left: auto;
        width: calc(100% - 11px);
        max-height: calc(100% - 12px);
        margin: auto;
        /*top: 0px;
        bottom: 0px;*/
    }

    .editpage .fieldgroup {
        width: 100%;
    }

    .editpage fieldset {
        height: auto;
    }

    .login-page {
        left: 0px;
        width: calc(100% - 12px);
    }

    .Document-item {
        float: none;
        width: auto;
    }

    .statement-summary .proptemplate {
        float: none;
    }

    .statement-summary .prop-title {
        width: 50%;
    }

    .columnstemplate .left,
    .columnstemplate .right {
        float: none;
        width: 100%;
        padding: 0px;
    }

    .columnstemplate .itemtemplate {
        min-width: unset;
        float: none;
        width: auto;
    }

    .dialog-header .commands button img,
    .sublist .title button img {
        height: 24px;
        width: 24px;
    }

    .fieldview.sublist .field-String,
    .fieldview.sublist .field-DateTime {
        white-space: unset;
    }

    .fieldview.sublist .field-Memo {
        height: auto;
    }

    .itemhalfsize {
        min-width: unset;
        width: unset;
    }

    .itemtemplate .item > div > .cmd-expand.expandable {
        display: block;
    }
}

/*
    Error reports
*/
div#content p {
    white-space: pre-wrap;
}