/* font settings */
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Display:wght@300');
*/

@font-face {
    font-family: "Inter";
    src: url("./font/Inter/Inter-VariableFont_slnt,wght.ttf");
}

:root {
    --primary-color: #007DB8;
    --primary-color-rgb: 0,125,184;
    --primary-color-filter: invert(33%) sepia(55%) saturate(1947%) hue-rotate(173deg) brightness(94%) contrast(101%);
    --accent-color: #C2185B;
    --accent-color-rgb: 194,24,91;
    --accent-color-filter: invert(16%) sepia(95%) saturate(2908%) hue-rotate(322deg) brightness(90%) contrast(96%);
    --red-color: #DC3545;
    --red-color-rgb: 220,53,69;
    --red-color-filter: invert(27%) sepia(64%) saturate(2580%) hue-rotate(334deg) brightness(90%) contrast(90%);
    --yellow-color-rgb: 255,193,7;
    --yellow-color-filter: invert(78%) sepia(55%) saturate(2617%) hue-rotate(355deg) brightness(107%) contrast(101%);
    --green-color-rgb: 40,167,69;
    --green-color-filter: invert(47%) sepia(94%) saturate(402%) hue-rotate(81deg) brightness(93%) contrast(87%);
    --white-color-filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(187deg) brightness(113%) contrast(110%);
    --bg-light-color: #f7f7f7;
    --bg-dark-color: #f0f0f0;
    --bg-darker-color: #e0e0e0;
    --fg-light-color: #6b7b93;
    --caption-light-color: #999999;
    --caption-color: #767676;
    --caption-dark-color: #666666;
    --line-color: #d7d7d7;
    --separator-text-color: #16192c;
    --menu-bg-color: #FFFFFF;
    --menu-bg-hover-color: #F5F5F5;
    --font-family: 'Inter', Segoe UI, Helvetica Neue, Arial;
    --field-gap: 24px;
    --field-lineheight: 18px;
    --field-vmargin: 4px;
    --field-vpadding: 4px;
    --field-hpadding: 8px;
    --border-radius: 6px;
    --hover-gray: #eeeeee;
    --pop-shadow: 0px 3px 8px #00000033;
    --home-top-bar-bg-color: black;
    --home-top-bar-text-color: white;
    --home-top-bar-menu-width: 160px;
    --home-top-bar-menu-height: 50px;
    --root-font-size: 12px;
    --caption-width: 185px;
}

html, body {
    font-size: var(--root-font-size);
    line-height: 1.42;
}

body, table, select, input, textarea {
    font-family: var(--font-family);
    font-size: 1rem;
    color: #000000;
}


a, a span {
    text-decoration: none;
    color: var(--primary-color);
    /*    padding: 4px 8px;
*/
}

/* default settings for HTML elements */

body {
    background-color: var(--bg-light-color);
    margin: 0px 0px 0px 0px;
    /*      background: white;
*/ /*    min-width: 900px;
*/
}

img {
    border: none;
    vertical-align: middle;
}


.showmore {
    position: relative;
}

.overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}

.expander {
    font-size: .95em;
    position: relative;
    border: 0 !important;
    padding: 0 !important;
    background: none;
    color: #4E77E0;
    cursor: pointer;
}

[data-showmore] {
    cursor: pointer;
    /*-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 2rem, rgb(0, 0, 0) 2rem, rgb(0, 0, 0) 100%), linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0) 100%);*/
}

[data-showmore="expanded"] {
    cursor: default;
}

[data-showmore="hidden"] + [data-showmore-expander] {
    display: inline-block;
}

    [data-showmore="hidden"] + [data-showmore-expander]::before {
        font-weight: 600;
        background: none;
        content: '... ';
    }

[data-showmore="expanded"] + [data-showmore-expander] {
    margin-top: .5em;
}


/* fields */
.field-caption {
    font-weight: normal;
    /*font-size: 0.7rem;*/
    color: #666666;
    vertical-align: middle;
}


.field-error input, .field-error select, .field-error textarea {
    background-color: #ffcccc;
    color: #cc0000;
}

.field-required, .field-required input, .field-required select, .field-required textarea, .field-required .field-caption {
    color: #07f;
}

.field-search {
    color: #777777;
}

.field {
}

    .field td {
        vertical-align: top;
    }

.aspradio input {
    float: left;
}

.aspradio label {
    margin-left: 25px;
    margin-bottom: -12px;
    display: block;
}

.aspcheck input {
    float: left;
}

.aspcheck label {
    margin-left: 25px;
    display: block;
}

.field-textbox {
    /*    padding-bottom: 8px;
*/ /*padding-right: 16px;*/
}

    .field-textbox tr {
        vertical-align: top;
    }

    .field-textbox select, .field-textbox input, .field-textbox textarea {
        resize: none;
        outline: 0;
        /*        border: 1px solid rgba(0,0,0,.24);
*/ /*padding: 2px 2px 2px 2px;*/
        background-color: White;
        resize: none;
        outline: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        /*        border-radius: 0;
*/
    }

        .field-textbox input::-ms-input-placeholder,
        .field-textbox input::-moz-placeholder,
        .field-textbox input::-webkit-input-placeholder {
            color: #90949c
        }

        .field-textbox input::-ms-clear {
            width: 0;
            height: 0;
            visibility: hidden;
            display: none
        }

.field-textbox-large {
    font-size: 1.3rem;
    padding-bottom: 8px;
}

    .field-textbox-large input {
        color: Black;
        border: solid 1px #bbbbbb;
        padding: 2px 2px 2px 2px;
        background-color: White;
        font-size: 1.3rem;
    }

.field-textbox-autocomplete a {
    padding: 0px 2px 0px 2px;
    color: Black;
    background-color: White;
    cursor: hand;
    text-decoration: none;
    display: block;
    width: 100%;
}

textarea {
    resize: none;
}


.field-black {
    color: black;
    border: solid 1px #bbbbbb;
    padding: 0px 2px 0px 2px;
    background-color: white;
}


.field-errormessage {
    display: inline-block;
    padding: 2px 4px 2px 4px;
    color: red;
    font-size: 0.7rem;
    font-weight: bold;
}

.field-error, .field-error .field-caption, .field--error .field__caption {
    color: var(--red-color);
}

.field-hint {
    font-family: var(--font-family);
    font-size: 0.7rem;
    color: Gray;
}


/*.lblGL {
    border: solid 1px var(--line-color);
    color: var(--fg-light-color);
    border-radius: var(--border-radius);
    padding: 6px 11px;
    width: 95%;
}*/

.hint-small-letter-i {
    padding: 0px 8px;
    font: bold 13px/16px Georgia, serif !important;
    background: none;
    color: #626262 !important;
    text-shadow: none;
    border: 1px solid #C2C2C2;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, #FFF, #E2E2E2);
    background-image: -moz-linear-gradient(top, #FFF, #E2E2E2);
    background-image: -ms-linear-gradient(top, #FFF, #E2E2E2);
    background-image: -o-linear-gradient(top, #FFF, #E2E2E2);
    background-image: linear-gradient(top, #FFF, #E2E2E2);
    background-clip: padding-box;
}

br {
    clear: both;
}


.separator {
    font-size: 1.2rem;
    color: var(--separator-text-color);
    padding: 0px 0px 8px 0px;
    margin: 20px 0px 20px 0;
    clear: both;
    font-weight: 600;
    letter-spacing: 0.32px;
    border-bottom: solid 2px var(--line-color);
    font-family: var(--font-family);
}


.separator-line hr {
    margin: 0 0 0 0;
    height: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 2px var(--line-color);
    padding: 0 0 0 0;
}

.separator hr {
    margin: 0 0 0 36px;
    margin-left: +36px;
    height: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 2px var(--line-color);
    padding: 0 0 0 0;
    display: none; /* use separator border bottom*/
}

.treeview {
    background-color: #e6e6fa;
}

.treenode {
    color: Gray;
}

    .treenode a {
        color: #2278ff;
    }

        .treenode a:hover {
            color: #599aff;
        }

.webpart-zonecontainer {
    padding: 0px 5px 0px 5px;
    border-left: dashed 1px gray;
}

.webpart-zonecontainerleft {
    padding: 0px 5px 0px 5px;
    background-color: #f8f8f8;
}

.homediv {
    border: solid 1px #e2e2e2;
    background-color: #f8f8f8;
    padding: 6px 6px 6px 6px;
}

.hometitle {
    background-color: #626262;
    padding: 6px 9px 6px 9px;
    margin-bottom: 7px;
    font-size: 0.85rem;
    font-weight: bold;
}

.contextmenu {
    width: 200px;
    z-index: 20;
    border: solid 1px #aaaaaa;
    background-color: #ffff;
    padding: 4px 0 6px 0;
}

    .contextmenu div {
    }

        .contextmenu div a {
            color: var(--primary-color);
            transition: background 150ms ease-in-out;
            border: 0;
            width: 100%;
            text-align: left;
            margin-bottom: 0;
            height: unset;
        }

            .contextmenu div a:hover {
                background: #eaeaea;
            }

.searchabledropdown {
    padding-bottom: 8px;
    padding-right: 16px;
}

    .searchabledropdown div a {
        padding: 0px 2px 0px 2px;
        color: Black;
        background-color: White;
        cursor: hand;
        text-decoration: none;
        display: block;
        width: 100%;
    }

.sddnormal {
    /*    border: solid 1px silver;
*/ background-color: white;
    background-image: url('../../images/sdd0.gif');
    background-repeat: no-repeat;
    background-position: right;
}

.sddhover {
    /*    border: solid 1px black;
*/ background-color: white;
    background-image: url('../../images/sdd1.gif');
    background-repeat: no-repeat;
    background-position: right;
}

.sddsearch {
    /*    border: solid 1px black;
*/ background-color: white;
    background-image: url('../../images/sdds.gif');
    background-repeat: no-repeat;
    background-position: right;
}

.menu {
    color: white;
    background-color: #00102f;
    border: none;
    font-size: 1rem;
    text-align: right;
}

.menulogo {
    float: left;
    padding-left: 10px;
}

.home-linkbutton, .home-linkbutton:hover {
    background-color: transparent;
}

.menu-logo {
    background-repeat: no-repeat;
    width: 500px;
}

.menu-apptop {
    background-color: #000;
}

.menu-top a, .menu-top a:visited, .menu-top a:visited {
    color: #2af;
    text-decoration: none;
}

.menu-top {
    padding: 6px 0;
}

.menu-staticitem a {
    text-decoration: none;
    display: inline-block;
    color: #bbbbbb;
    font-size: 0.85rem;
    cursor: pointer;
    text-transform: lowercase;
    padding: 5px 12px 5px 12px;
    height: 18px;
    border-bottom: solid 4px black;
}

    .menu-staticitem a:hover, .menu-staticitem a:active {
        color: white;
        font-size: 0.85rem;
        cursor: pointer;
        text-transform: lowercase;
        padding: 5px 12px 5px 12px;
        height: 18px;
        border-bottom: solid 4px white;
    }

.menu-dropdown {
    background-color: white;
    z-index: 1000000;
    border: solid 1px #aaaaaa;
    margin-top: 5px;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 1.1rem;
}

.menu-dropdown-templates {
    background-color: Transparent;
    z-index: 1000000;
}

.menu-dynamicitemheader {
    display: inline-block;
    background-color: #0058b3;
    color: white;
    font-size: 1.2rem;
    cursor: default;
    padding: 8px 24px 8px 16px;
    width: 100%;
}

a.menu-dynamicitem {
    text-decoration: none;
    display: inline-block;
    background-color: #107FC9;
    border-bottom: solid 1px #0E4EAD;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px 24px 8px 16px;
    width: 100%;
}

    a.menu-dynamicitem:hover, a.menu-dynamicitem:active {
        background-color: black;
        border-bottom: solid 1px #0E4EAD;
        color: white;
        cursor: pointer;
        padding: 8px 24px 8px 16px;
    }

a.menu-dynamicitem2 {
    text-decoration: none;
    display: inline-block;
    background-color: #0058b3;
    border-bottom: solid 1px #004080;
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 8px 24px 8px 16px;
    width: 100%;
}

    a.menu-dynamicitem2:hover, a.menu-dynamicitem2:active {
        background-color: black;
        border-bottom: solid 1px #004080;
        color: white;
        cursor: pointer;
        padding: 8px 24px 8px 16px;
    }


.hint {
    padding-top: 8px;
    padding-bottom: 8px;
}

    .hint img {
        vertical-align: -2px;
    }

    .hint table {
        /*border-top: solid 1px #dddd88;
        border-bottom: solid 4px #dddd88;
        background-color: #ffffbb;*/
        background: #FDF7F2 0% 0% no-repeat padding-box;
        border: 1px solid #D96704;
        border-radius: 4px;
        color: #D96704;
        font-size: 0.9rem;
        padding: 4px 10px;
    }

        .hint table table {
            border: solid 1px #eeeeaa;
            background-color: white;
        }

.grid-outer table {
    empty-cells: show;
    border-collapse: collapse; /* solves IE7 empty cells problem */
}

.grid {
    border: none;
}

.grid-headerscrollable {
    background: var(--bg-dark-color);
    color: #555555;
}

div.grid-headerscrollable > div > table.grid-rowscrollable {
    width: 100% !important;
}


.grid-footerscrollable {
    border-top: solid 2px #aaaaaa;
    border-bottom: solid 1px #cccccc;
}

.grid-caption {
    color: var(--caption-dark-color);
    padding-bottom: 8px;
}

    .grid-caption div {
        font-weight: bold;
        font-size: 1.1rem;
        padding: 0px 0px 2px 0px;
        margin: 8px 0px 0px 0px;
        clear: both;
    }

    .grid-caption input[type="text"] {
        vertical-align: top;
    }

.grid-caption-text, .grid-caption-asterisk {
    line-height: 36px;
    vertical-align: middle;
}

.grid-caption-error div, .grid-caption-error img {
    border-bottom: solid 1px #cfcfcf;
    font-weight: bold;
    font-size: 0.7rem;
    padding: 0px 0px 2px 0px;
    margin: 8px 0px 0px 0px;
    clear: both;
}

.grid-cell--numeric,
.grid-cell--date, .grid-cell--time, .grid-cell--datetime {
    white-space: nowrap;
}

.grid-searchtextbox {
    width: 200px;
    max-width: 200px;
}

.grid-caption-error {
    color: #cc0000;
}

.grid-command {
    padding: 6px 0px 6px 0px;
    border: none;
}


.grid-export {
    padding-left: 20px;
    padding-right: 20px;
    width: 120px;
}

.grid-column-chooser {
    background-color: #ebebeb;
    padding-left: 5px;
    padding-right: 5px;
    width: 90px;
}

    .grid-column-chooser .actions-column-menu {
        margin: 5px auto;
        clear: both;
        width: 240px;
        max-width: 350px;
        border: 1px solid #d6d6d6 !Important;
        background-color: #FFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 0px 17px rgba(0,0,0,0.3);
        text-align: left;
    }

        .grid-column-chooser .actions-column-menu .actions-column-menu-content {
            padding: 10px 0px 10px 10px;
        }

        .grid-column-chooser .actions-column-menu .actions-column-menu-box {
            max-height: 280px;
            overflow: auto;
        }

        .grid-column-chooser .actions-column-menu .actions-column-menu-button {
            padding: 5px;
            text-align: right
        }

            .grid-column-chooser .actions-column-menu .actions-column-menu-button a.hlink-black {
                margin-right: 10px;
            }

    .grid-export .actions-export, .grid-column-chooser .actions-chooser {
        text-align: right;
        white-space: nowrap
    }


.grid-outer .actions-chooser a.columnchooser {
    height: 30px;
    max-height: 30px;
    line-height: 30px;
    padding: 0 5px;
    margin: 0
}

.grid-outer .actions-export a.exportcsv img,
.grid-outer .actions-export a.exportword img,
.grid-outer .actions-export a.exportexcel img {
    width: 20px;
    max-width: 20px;
    height: 20px;
    max-height: 20px;
}

.grid-outer .actions-export a.btn {
    padding: 4px;
    padding-top: 7px;
}

.grid-outer .actions-export a {
    background: transparent;
    border: 0;
}


.grid-header {
    color: black;
    border: none;
    text-transform: capitalize;
    font-weight: bold;
    font-size: 1rem;
    /*background-color: #ddeeff;*/
    /*background-color: White;*/
    vertical-align: top;
    color: #000000d9;
    font-weight: 600;
    background: var(--bg-dark-color);
    transition: background .3s ease;
    font-family: var(--font-family);
    word-wrap: break-word;
}

    .grid-header a, .grid-header a:hover, .grid-header a:visited {
        font-weight: 600;
        color: var(--caption-color);
        text-decoration: none;
        background-color: transparent;
        padding: 0;
        transition: all 0.2s ease-in-out;
        margin-right: 4px;
    }

    .grid-header input[type=checkbox], .grid-row input[type=checkbox] {
        width: 15px;
        height: 15px;
        cursor: pointer;
    }


.grid-outer {
    /*overflow: auto;*/
}

    .grid-outer .grid-header th, .grid-outer .grid-header td {
        white-space: normal;
        font-weight: 600;
        color: var(--caption-color);
        padding: 6px 8px 6px 8px;
        font-size: 1rem;
        word-break: keep-all;
        border: 0;
        border-top: 1px solid var(--line-color);
        border-bottom: 1px solid var(--line-color);
    }

.grid .grid-header th, .grid .grid-header td {
    white-space: normal;
    font-weight: 600;
    color: var(--caption-color);
    padding: 6px 8px 6px 8px;
    font-size: 1rem;
    word-break: keep-all;
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
}

.grid-rowscrollable .grid-header th, .grid-rowscrollable .grid .grid-header td {
    white-space: normal;
    font-weight: 600;
    color: var(--caption-color);
    padding: 6px 8px 6px 8px;
    font-size: 1rem;
    word-break: break-word;
    box-sizing: border-box;
    border: 0;
    vertical-align: middle;
    /* border-top: 1px solid var(--line-color); */
    /* border-bottom: 1px solid var(--line-color); */
}

div.grid-rowscrollable > table.grid-rowscrollable {
    width: 100% !important;
}

.grid .grid-header th:not(:first-child):not(:last-child), .grid-rowscrollable .grid-header th:not(:first-child):not(:last-child) {
    border-left: 1px solid var(--line-color);
    border-right: 1px solid var(--line-color);
    vertical-align: middle;
}

.grid .grid-header th:first-child:last-child, .grid-rowscrollable .grid-header th:first-child:last-child {
    border-left: 1px solid var(--bg-dark-color) !important;
    border-left: 1px solid var(--bg-dark-color) !important;
    vertical-align: middle;
}

.grid .grid-header th:first-child, .grid-rowscrollable .grid-header th:first-child {
    border-left: 1px solid var(--bg-dark-color);
    border-right: 1px solid var(--line-color);
    vertical-align: middle;
}

.grid .grid-header th:last-child, .grid-rowscrollable .grid-header th:last-child {
    border-left: 1px solid var(--line-color);
    border-right: 1px solid var(--bg-dark-color);
    vertical-align: middle;
}

.grid .grid-header th img {
    width: 18px;
    vertical-align: middle;
}

.grid-footer {
    border-top: solid 2px var(--line-color);
    border-bottom: solid 1px var(--line-color);
}

    .grid-footer td {
        font-weight: bold;
        border: none;
        height: 16px;
        border-bottom: solid 1px var(--line-color);
        border-right: solid 1px transparent;
        padding: 4px 8px;
    }


.grid-row {
    border: none;
}

.grid-outer .grid-row td {
    border-bottom: solid 1px var(--line-color);
    border-right: solid 1px transparent;
    padding: var(--field-vpadding) var(--field-hpadding);
    height: 20px;
    word-break: keep-all;
    vertical-align: middle;
}

.grid-cell {
    border-bottom: solid 1px var(--line-color);
    border-right: solid 1px transparent;
    padding: var(--field-vpadding) var(--field-hpadding);
    height: 20px;
    word-break: keep-all;
    box-sizing: border-box;
    vertical-align: middle;
}

    .grid-cell span.field--layout-flow {
        padding: 0px;
        margin: 0px;
    }

    .grid-cell span.field--layout-flow .field-input--numeric,
    .grid-cell span.field--layout-flow .field-input--datetime {
        padding: 0px;
        margin: 0px;
        border: 0px;
        white-space: nowrap;
    }

.grid-rowscrollable .grid-cell--header {
    width: 150px;
}

.grid-rowscrollable .grid-cell {
    width: 150px;
}


.grid-rowscrollable .grid-row td {
    border-right: solid 1px transparent;
    padding: var(--field-vpadding) var(--field-hpadding);
    font-size: 1rem;
    word-break: break-word;
    box-sizing: border-box;
    vertical-align: middle;
}

.grid-emptyrow td {
    height: 20px;
    border-bottom: solid 1px var(--line-color);
    white-space: normal;
    text-align: center;
    vertical-align: middle;
    color: Gray;
    padding: 6px 8px;
}

.grid-row td table {
    border: none;
    padding: 0 0 0 0;
    height: auto;
}

    .grid-row td table td {
        padding: 0 0 0 0;
        border: none;
        height: auto;
    }

.grid-pager {
    padding-bottom: 20px;
    table-layout: fixed;
}

    .grid-pager td {
        padding: 2px 1px;
        border: none;
    }

    .grid-pager > td {
        padding-bottom: 12px;
    }

    /*.grid-pager td:first-child {
        padding-left: 0;
    }

    .grid-pager td:last-child {
        padding-right: 0;
    }*/

    .grid-pager > td {
        padding-top: 20px;
    }

    .grid-pager td div {
        display: inline-block;
        float: left;
    }

        .grid-pager td div,
        .grid-pager td div table,
        .grid-pager td div table td {
            border: none;
        }

    .grid-pager a {
        display: inline-block;
        height: 34px;
        width: 34px;
        text-align: center;
        color: black;
        text-decoration: none;
        background-color: transparent;
        border: 0;
        box-sizing: border-box;
        transition: color 0.15s ease-in-out, border 0.1s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .grid-pager a:hover {
            /*            background-color: #eeeeee;
            */ color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }

    .grid-pager span {
        display: inline-block;
        height: 34px;
        width: 34px;
        text-align: center;
        border: 0;
        background-color: var(--primary-color);
        color: white;
        font-weight: bold;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .grid-pager table td:only-child {
        display: none;
    }


.div-form {
    border: none;
    /*background-color: white;*/
    padding: 12px 12px 12px 12px;
}

    .div-form .grid-outer {
    }

        .div-form .grid-outer table {
            background: white;
            /*background: transparent;*/
        }

    .div-form .grid-pager > td {
        padding-left: 40px;
        padding-right: 40px;
    }

#gridCustomersDetails {
    background: rgba(245,249,252,255) !important;
}

.div-main {
    padding: 0 0px 0 0;
    background: var(--bg-light-color) 0% 0% no-repeat padding-box;
}

.div-tree {
    background-color: white;
}

.div-userlicense {
    padding: 16px;
}

.task-title {
    font-weight: bold;
    color: white;
    background-color: #3377ff;
    height: 20px;
}

.task-header {
    font-weight: bold;
    color: White;
    background-color: #66ccff;
    height: 20px;
}

.task-urgentitem {
    color: red;
}

.task-item {
    height: 20px;
}

.task-altitem {
    height: 20px;
    background-color: #eeece1;
}

.tooltip-header {
    padding: 2px 2px 2px 2px;
    background-color: #aaddff;
    border: solid 1px #aaddff;
}

.tooltip-body {
    padding: 2px 2px 2px 2px;
    background-color: white;
    border: solid 1px #aaddff;
}


.object-top {
    /*background-image:url(../../images/edit-top-corporate.gif);*/
    /*background-position: bottom;*/
    height: 20px;
    padding: none;
    background-color: white;
}

.object-workflow .field-caption, .object-workflow a {
    color: White;
    font-weight: normal;
}


.object-workflow, .object-workflow table {
    color: White;
    font-weight: bold;
}

    .object-workflow td {
        padding-top: 3px;
        padding-bottom: 3px;
    }

.object-caption {
    font-size: 1.55rem;
    color: black;
    font-weight: 600;
    white-space: nowrap;
}

.object-buttons-hideable {
    white-space: nowrap;
    display: inline-block;
}

.subobject-buttons {
    padding: 16px 24px 12px 24px;
    background-color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    box-sizing: border-box;
    text-align: right;
    border-top: solid 1px #dddddd;
    border-radius: 0 0 6px 6px;
}

.object-buttons-div {
    background-color: var(--bg-light-color);
}

.object-buttons {
    box-sizing: border-box;
    padding: 18px 18px 10px 24px;
    transition: background 0.25s ease-in-out, top 0.35s ease-in-out;
}

    .object-buttons table {
        width: 100%;
    }

    .object-buttons .btn {
        margin-bottom: 0;
    }

.object-buttons-fixed {
    position: fixed;
    background-color: white;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    /*    min-width: 900px;
*/ box-shadow: 2px 1px 2px 1px lightgrey;
    margin-top: 0;
    padding-top: 10px;
}

.object-button-fixed-animation-start {
    top: -56px;
}

.object-buttons-fixed--content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 16px;
    white-space: nowrap;
}

.object-buttons-fixed--content-right {
    display: flex;
    align-items: center;
}
/* search page */
.search-caption {
    font-size: 1.6rem;
    color: var(--primary-color);
    padding-top: 0;
    padding-bottom: 6px;
}

.search-hint {
    font-size: 0.9rem;
    color: #777777;
    display: block;
    padding-bottom: 3px;
    max-width: 70%;
}

.search-icon {
    background-image: url(../../images/remix/search-line.svg);
    background-repeat: no-repeat;
    background-position: top left;
}

    .search-icon .btn {
        margin-bottom: -4px;
    }

.search-icon-new {
    width: 35px;
    filter: var(--primary-color-filter);
    margin-left: 55px;
}

.search-create {
    top: 5px;
    position: relative;
}


/* report */

.imgClass {
    height: 70px !important;
    width: 70px !important;
    filter: brightness(0) invert(1);
}


#panelMain {
    height: 100%;
}

.reportpage {
    width: 100%;
    height: 100vh;
}

.report-name {
    background-color: var(--primary-color);
    padding: 0;
}

.report-name-container {
    font-family: Century Gothic, Arial;
    color: #f0f0f0;
    font-size: 1.6rem;
    font-weight: bold;
    /*display: flex;*/
    padding: 24px;
    align-items: flex-end;
    max-width: 1200px;
    margin: auto;
}

    .report-name-container .field span {
        font-size: 24px;
        padding: 0;
    }

.report-footer {
    background-color: var(--primary-color);
    padding: 10px 0px 5px 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    /*height: 2.5rem;*/
}


#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
    padding-bottom: 2.5rem; /* Footer height */
}

.report-buttons {
    max-width: 1200px;
    margin: auto;
}

.div-report {
    padding: 24px;
    padding-bottom: 0;
    max-width: 1200px;
    margin: auto;
    box-sizing: border-box;
}

.home-pinboard .field {
    margin-right: 8px;
}

.home-pinboard .field-field__input {
    border-bottom: 0 !important;
}


.object-message, .search-message {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgrey;
    background-color: #ffffaa;
    z-index: 1000000;
    background-color: #FDF7F2;
    border: 1px solid #D96704;
    border-radius: 4px;
    left: 50%;
    transform: translate(-50%, 0px);
    max-width: 95%;
}

    .object-message span, .search-message span {
        color: #D96704;
    }

.gantt- .gantt-PendingAssignment,
.gantt-PendingHelpdesk,
.gantt-PendingPlanning {
    height: 16px;
    border: solid 1px black;
    font-family: Arial;
    font-size: 0.6rem;
    background-color: #bbbbff;
}

.gantt-PendingApproval {
    height: 16px;
    border: solid 1px black;
    font-family: Arial;
    font-size: 0.6rem;
    background-color: #bbbbff;
}

.gantt-PendingAssignment {
    height: 16px;
    border: solid 1px black;
    font-family: Arial;
    font-size: 0.6rem;
    background-color: #bbbbff;
}

.gantt-PendingExecution {
    height: 16px;
    border: solid 1px black;
    font-family: Arial;
    font-size: 0.6rem;
    background-color: #bbffbb;
}


.gantt-Rejected,
.gantt-Cancelled,
.gantt-Close {
    height: 16px;
    border: solid 1px black;
    font-family: Arial;
    font-size: 0.6rem;
    background-color: #eeeeee;
}

.gantt-PendingClosure {
    height: 16px;
    border: solid 1px black;
    font-family: Arial;
    font-size: 0.6rem;
    background-color: #bbffff;
}

.gantt-background {
    background-color: #ffffff;
    border: solid 1px #cccccc;
    font-family: Arial;
    font-size: 0.6rem;
    padding: 1px 1px 1px 1px;
    height: 0px;
}

.gantt-rangeheader {
    background-color: #dddddd;
    border: solid 1px #cccccc;
    font-family: Arial;
    font-size: 0.4rem;
    font-weight: normal;
    padding: 0px 1px 0px 1px;
    height: 0px;
    font-size: 1.2rem;
    padding: 5px;
    font-weight: bold;
}

.gantt-today {
    background-color: #ddddff;
    border: solid 1px #cccccc;
    font-family: Arial;
    font-size: 0.6rem;
    padding: 1px 1px 1px 1px;
    height: 0px;
}

.gantt-weekend {
    background-color: #dddddd;
    border: solid 1px #cccccc;
    font-family: Arial;
    font-size: 0.6rem;
    font-weight: normal;
    padding: 1px 1px 1px 1px;
    height: 0px;
}

.gantt-title {
    padding: 5px;
    background-color: #dddddd;
    border: solid 1px #cccccc;
    font-family: Arial;
    font-size: 0.6rem;
    font-weight: normal;
    height: 0px;
    width: 200px;
    font-size: 1.2rem;
}

.gantt-tooltip-body {
    width: 280px;
    background-color: #ffffff;
    border: solid 1px var(--line-color);
    padding: 2px 4px 2px 4px;
    font-size: 0.8rem;
}

    .gantt-tooltip-body table {
        background-color: #ffffff;
        font-size: 0.8rem;
    }

    .gantt-tooltip-body td {
        font-size: 0.8rem;
    }

        .gantt-tooltip-body td.gantt-caption {
            width: 100px;
            color: var(--caption-color);
        }

.gantt-tooltip-header {
    width: 280px;
    background-color: var(--bg-dark-color);
    border: solid 1px var(--line-color);
    padding: 2px 4px 2px 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.gantt-complete {
    height: 100%;
    background-color: green;
    color: White;
    text-align: center;
    font-size: 12px;
}

/*----------------------------------------------
 CSS for charts
----------------------------------------------*/

.chartsubmitbutton {
    font-family: Arial;
    font-size: 0.6rem;
    background-color: #ddddff;
    border: solid 1px #608161;
}

.chartdroparea {
    font-family: Arial;
    font-size: 0.6rem;
    color: black;
    border-style: groove;
    border-width: thin;
    padding: 2px;
}

.chartsetuparea {
    font-family: Arial;
    font-size: 0.6rem;
    color: black;
    border-bottom-width: 2px;
    border-bottom-style: ridge;
    padding: 2px;
}



.advancedreportagggroupheader {
    font-family: Arial;
    font-size: 0.6rem;
    color: #0000A3;
    background-color: #ddffdd;
    padding: 2px;
}

.advancedreportgroup {
    font-family: Arial;
    font-size: 0.6rem;
    color: black;
    background-color: #ffffdd;
    padding: 2px;
}

.advancedreportitem {
    font-family: Arial;
    font-size: 0.6rem;
    color: black;
    background-color: white;
    padding: 2px;
}

.reportgridpager {
    font-family: Arial;
    font-size: 0.6rem;
    color: black;
    padding: 4px;
}

.advancedreportaltitem {
    font-family: Arial;
    font-size: 0.6rem;
    color: black;
    background-color: #eeeeee;
    padding: 2px;
}

.reporttitle {
    background: transparent url(../../images/reportTop.gif) top left;
    font-weight: bold;
    font-size: 0.6rem;
    font-family: Arial;
    color: white;
    height: 25px;
}


.advancedreportungroupcolheader {
    font-family: Arial;
    font-size: 0.6rem;
    color: black;
    background-color: #ddddff;
}

.advancedreportgroupcolheader {
    font-family: Arial;
    font-size: 0.6rem;
    color: blue;
    background-color: #ddddff;
}


.advancedreportdropnormal {
    background-color: #ddddff;
}

.advancedreportdropover_agg {
    border: solid 1px #0000ff;
}

.advancedreportdropover_ungroup {
    border: solid 1px black;
    background-color: Black;
}


.advancedreportdropover_ungrouppivot {
    border: solid 1px black;
    background-color: Black;
}


.advancedreportdropover_groupY {
    border: solid 2px #7777ff;
    background-color: #7777ff;
}


.advancedreportdropover_groupx {
    border: solid 1px #7777ff;
    background-color: #7777ff;
}

.reportheaderbuttonnormal {
    font-weight: normal;
    font-size: 0.6rem;
    font-family: Arial;
    border: solid 1px #4A6F9B;
    cursor: pointer;
    height: 21px;
    height: 21px;
}


.reportheaderbuttonmouseover {
    font-weight: normal;
    font-size: 0.6rem;
    font-family: Arial;
    background-color: #6085B0;
    border: solid 1px #6085B0;
    cursor: pointer;
    height: 21px;
    width: 21px;
}

.advancedreportbuttonnormal {
    border: solid 1px #AED3F0;
    cursor: pointer;
    height: 21px;
    width: 21px;
    font-weight: normal;
    font-size: 0.6rem;
    font-family: Arial;
    background-color: #AED3F0;
}


.advancedreportbuttonmouseover {
    background-color: #8BBEE7;
    border: solid 1px #3F668F;
    cursor: pointer;
    height: 21px;
    width: 21px;
    font-weight: normal;
    font-size: 0.6rem;
    font-family: Arial;
}

.reportbarleft {
    font-weight: normal;
    font-size: 0.6rem;
    font-family: Arial;
    border-right-style: solid;
    border-right-color: #103B5D;
    border-right-width: 1px;
    border-top-style: solid;
    border-top-color: #103B5D;
    border-top-width: 1px;
    background-color: #AED3F0;
}

.reportbackground {
    border-top-width: 2px;
    border-top-style: groove;
    border-top-color: #5F3FD6;
    border-left-style: groove;
    border-left-width: 2px;
    border-left-color: #5F3FD6;
    border-right-style: inset;
    border-right-width: 2px;
    border-right-color: #6887BB;
    border-bottom-style: inset;
    border-bottom-width: 2px;
    border-bottom-color: #6887BB;
}

.reportbarright {
    font-weight: normal;
    font-size: 0.6rem;
    font-family: Arial;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #103B5D;
    background-color: #AED3F0;
}

.leftpanelrow {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #103B5D;
}

.parallelviewdivide {
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #6887BB;
}

.tabstrip {
    font-family: var(--font-family);
}

    .tabstrip ul {
        margin: 0;
        list-style: none;
        padding: 10px 0px 0 0px;
        display: flex;
        border-bottom: 1px solid var(--caption-color);
        margin-bottom: 16px;
        overflow: auto;
        max-width: 100%;
    }

    .tabstrip li {
        display: inline-block;
        margin: 0;
        padding: 0px;
        white-space: nowrap;
    }

    .tabstrip ul li a {
    }

    .tabstrip a, .tabstrip a:visited {
        display: inline-block;
        padding: 0px;
        text-decoration: none;
        color: var(--caption-color);
        cursor: pointer;
        font-family: var(--font-family);
    }

        .tabstrip a:hover, .tabstrip a:active {
            color: var(--caption-color);
            background-color: transparent;
        }

        .tabstrip a sup {
            line-height: 0px;
        }

    .tabstrip .selected a {
        color: white;
        font-weight: bold;
    }

.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 99999;
}

.modalPopup {
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: Gray;
    padding: 8px 8px 8px 8px;
    width: 550px;
    z-index: 100000;
}


/*----------------------------------------
   v7.0 styles
----------------------------------------*/
.tabstrip-bg {
    background-color: inherit;
}

.tabmbl {
    background-color: #e7e7e7;
    border-bottom: solid 1px #f9f9f9;
}

    .tabmbl a {
        text-decoration: none;
        color: #888888;
        display: block;
        padding: 7px 0px 7px 0px;
        cursor: pointer;
    }

.selectedmbl {
    background-color: #e7e7e7;
    border-bottom: solid 1px #f9f9f9;
}

    .selectedmbl a {
        text-decoration: none;
        background-color: #e7e7e7;
        color: Black;
        display: block;
        padding: 7px 0px 7px 0px;
        cursor: default;
    }

.tab-ver {
    background-position: top right;
    background-repeat: no-repeat;
    background-color: transparent;
    padding-right: 12px;
    padding: 28px 0 28px 0px;
    flex: 1 1 220px;
    max-width: 220px;
    padding-top: 0;
    font-family: var(--font-family);
}

.tabstrip-ver {
    font-size: 1rem;
    font-weight: normal;
}

.tab-ver td {
    vertical-align: top;
}

.tab-ver ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
}

.tab-ver li {
    display: inline;
    margin: 0;
    padding: 8px 12px;
}

.tab-ver a {
    text-decoration: none;
    color: var(--caption-dark-color);
    display: block;
    border-left: none;
    cursor: pointer;
    text-transform: capitalize;
    box-sizing: border-box;
    font-family: var(--font-family);
    word-wrap: break-word;
}

    .tab-ver a sup {
        line-height: 0px;
    }

    .tab-ver li:hover, .tab-ver li:active {
        color: var(--caption-dark-color);
        background: var(--bg-darker-color);
        border-radius: var(--border-radius);
    }

.tab-ver .selected a, .tab-ver .selected a:hover, .tab-ver .selected a:active {
    color: white;
    font-weight: bold;
}

.tabstrip-ver-content {
    background-color: var(--bg-light-color);
    flex: 1 1 0;
    min-height: 86vh;
    margin-right: 16px;
    margin-bottom: 16px;
    margin-top: -4px; /* hide the box shadow of the previous tabstrip ver content*/
    position: relative;
}


/* ---- buttons ---- */

/* common styles */
.btn-d, .btn-d:hover, .btn-d:active,
.btnblack-d, .btnblack-d:hover, .btnblack-d:active,
.btnblue-d, .btnblue-d:hover, .btnblue-d:active,
.btngray-d, .btngray-d:hover, .btngray-d:active,
.btnblackpnmbl-d, .btnblackpnmbl-d:hover, .btnblackpnmbl-d:active,
.btnblackmbl-d, .btnblackmbl-d:hover, .btnblackmbl-d:active {
    opacity: 0.25;
    -moz-opacity: 0.25;
    filter: alpha(opacity=25);
}

    .btn img, .btn-d img,
    .btnblue img, .btnblue-d img,
    .btngray img, .btngray-d img,
    .btnblackpnmbl img, .btnblackpnmbl-d img,
    .btnblackmbl img, .btnblackmbl-d img,
    .btnblack img, .btnblack-d img {
        width: calc(var(--field-lineheight) - 6px);
        height: calc(var(--field-lineheight) - 6px);
        vertical-align: -2px;
    }

.btn a, .btn span {
    text-decoration: none;
    color: #444;
    padding: 0;
}


/* standard button */

.btn, .btn:visited,
.btn-d, .btn-d:hover, .btn-d:active, .btn-d:visited {
    display: inline-block;
    text-decoration: none;
    /*    background-image: none;
*/ padding: var(--field-vpadding) calc(var(--field-hpadding) + 2px);
    margin-bottom: 5px;
    margin: 0 5px 0 0;
    line-height: var(--field-lineheight);
    height: calc(var(--field-lineheight) + var(--field-vpadding) * 2 + 2px);
    text-wrap: none;
    /*     font-size: 1rem;
   border: 1px solid #6c757d;
    background-color: #e6e6e6;
    border-radius: .25rem;
    transition: all 0.12s ease-in-out;*/
    margin-bottom: var(--field-vmargin);
}


/* black button */

.btnblack, .btnblack:visited,
.btnblack-d, .btnblack-d:hover, .btnblack-d:active, .btnblack-d:visited {
    display: inline-block;
    text-decoration: none;
    background-image: none;
    padding: 6px 16px;
    margin: 0 5px 5px 0;
    font-size: 1rem;
    color: white;
    background: grey;
    border: 1px solid #777;
}

, btnblack.btn--normal {
    background: grey;
}

.btnwhite {
    transition: background 150ms ease-in-out;
}

    .btnwhite:hover {
        background: #f5f5f5;
    }

.btnblack span {
    color: white;
}

.btnblack:hover, .btnblack-d:hover {
    /*  color: #aaa;
        background-color: transparent;*/
}

/* black (mobile) button for prev/next buttons */

.btnblackpnmbl, .btnblackpnmbl:visited,
.btnblackpnmbl-d, .btnblackpnmbl-d:hover, .btnblackpnmbl-d:active, .btnblackpnmbl-d:visited {
    width: 146px;
    display: inline-block;
    text-decoration: none;
    background-image: none;
    padding: 6px 16px;
    margin-bottom: 5px;
    font-size: 1rem;
    color: white;
    background-color: #224466;
    border: solid 1px #446688;
}

    .btnblackpnmbl:hover {
        background-color: #6688aa;
        border: solid 1px #cccccc;
    }

/* black (mobile) button for action buttons */

.btnblackmbl, .btnblackmbl:visited,
.btnblackmbl-d, .btnblackmbl-d:hover, .btnblackmbl-d:active, .btnblackmbl-d:visited {
    width: 320px;
    display: inline-block;
    text-decoration: none;
    background-image: none;
    padding: 6px 8px 6px 8px;
    margin-bottom: 5px;
    font-size: 1rem;
    color: white;
    background-color: #224466;
    border: solid 1px #446688;
}

    .btnblackmbl:hover {
        background-color: #6688aa;
        border: solid 1px #cccccc;
    }

/* blue button */

.btnblue, .btnblue:visited,
.btnblue-d, .btnblue-d:hover,
.btnblue-d:active, .btnblue-d:visited {
    display: inline-block;
    text-decoration: none;
    background-image: none;
    padding: 6px 16px;
    margin-bottom: 5px;
    font-size: 1rem;
    color: #fff;
    background-color: #3D6A90;
    /*    border: 1px solid #aaa;
*/
}

    .btnblue:hover {
        color: #ccc;
    }

/* gray button */
.btngray, .btngray:visited,
.btngray-d, .btngray-d:hover, .btngray-d:active, .btngray-d:visited {
    display: inline-block;
    text-decoration: none;
    background-image: none;
    padding: 6px 16px;
    margin-bottom: 5px;
    font-size: 1rem;
    color: #ffffff;
    background-color: #9FA0A5;
    border: solid 1px #9FA0A5;
}

    .btngray:hover {
        background-color: #aaaaaa;
    }




/* hyper links */

/* white */
.hlink-white, .hlink-white:hover, .hlink-white:active, .hlink-white:visited,
.hlink-white-d, .hlink-white-d:hover, .hlink-white-d:active, .hlink-white-d:visited {
    color: White;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    background-color: transparent;
}

/* gray */
.hlink-gray, .hlink-gray:hover, .hlink-gray:active, .hlink-gray:visited,
.hlink-gray-d, .hlink-gray-d:hover, .hlink-gray-d:active, .hlink-gray-d:visited {
    color: gray;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
}

/* blue */
.hlink-blue, .hlink-blue:hover, .hlink-blue:active, .hlink-blue:visited,
.hlink-blue-d, .hlink-blue-d:hover, .hlink-blue-d:active, .hlink-blue-d:visited {
    color: var(--primary-color);
    text-decoration: underline;
    font-size: 0.9rem;
    cursor: pointer;
    background: unset;
    border: unset;
}

/* black */
.hlink-black, .hlink-black:hover, .hlink-black:active, .hlink-black:visited,
.hlink-black-d, .hlink-black-d:hover, .hlink-black-d:active, .hlink-black-d:visited {
    color: Black;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
}

    .hlink-white-d, .hlink-white-d:hover, .hlink-white-d:active, .hlink-white-d:visited,
    .hlink-gray-d, .hlink-gray-d:hover, .hlink-gray-d:active, .hlink-gray-d:visited,
    .hlink-blue-d, .hlink-blue-d:hover, .hlink-blue-d:active, .hlink-blue-d:visited,
    .hlink-black-d, .hlink-black-d:hover, .hlink-black-d:active, .hlink-black-d:visited {
        opacity: 0.25;
        -moz-opacity: 0.25;
        filter: alpha(opacity=25);
    }


.login {
    margin-bottom: 5px;
}

.login-logo {
    border-width: 0px;
    width: 280px;
    /* padding: 30px 30px; */
    /* height: 100px; */
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    object-fit: contain;
}


.div-searchfom {
    border: solid 1px #dddddd;
    background-color: #f7f7f7;
    padding: 8px 8px 8px 8px;
    clear: both;
}

.div-edit {
    padding: 0 42px 20px 38px;
    box-sizing: border-box;
    max-width: calc(100vw - 278px);
}

    .div-edit .div-edit {
        padding-left: 0;
        padding-right: 0;
    }

.div-audit {
    padding: 10px 42px 20px 38px;
    box-sizing: border-box;
    max-width: calc(100vw - 220px);
}

.div-status {
    text-align: center;
    vertical-align: middle;
    padding: 10px 10px 10px 10px;
    font-size: 0pt;
    font-weight: bold;
    color: White;
    width: 319px;
    height: 36px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    border-radius: 18px;
    margin-left: 18px;
    margin-right: 18px;
}

    .div-status span {
        font-size: 1rem;
        color: white;
        padding: 0;
        margin: -1px;
        border-bottom: none;
    }

    .div-status .field span, .div-status .field label {
        font-size: 0.85rem;
        color: white;
        padding: 0;
        margin: -1px;
        border-bottom: none;
    }

    .div-status .field {
        width: 100%;
    }

.object-base-workflow {
    position: relative;
    right: 0;
}

    .object-base-workflow .btn:last-child {
        margin-right: 0;
    }

.object-base-workflow-dropdown {
    display: none;
}


.div-urgent {
}

.div-urgent-no {
    padding: 5px 5px 5px 10px;
    width: 140px;
    text-align: left;
    vertical-align: middle;
    border-left: solid 10px var(--bg-light-color);
    font-size: 1pt;
    font-weight: bold;
    color: #cccccc;
    border-top-left-radius: 4px;
}

    .div-urgent-no label {
        color: #cccccc;
        font-size: 1rem;
        width: 110px;
        display: inline-block;
    }

    .div-urgent-no br {
        height: 0px;
    }

.div-urgent-yes {
    padding: 5px 5px 5px 10px;
    width: 140px;
    text-align: left;
    vertical-align: middle;
    border-left: solid 10px var(--bg-dark-color);
    font-size: 1pt;
    font-weight: bold;
    color: Red;
    border-top-left-radius: 4px;
}

    .div-urgent-yes label {
        color: Red;
        font-size: 1rem;
        display: inline-block;
    }


.div-objectbase-int {
    padding: 0px 38px 0px 38px;
    width: calc(100% - 450px);
}

#objectBase__objectNumber label.field__input-group {
    padding-top: 0;
    font-weight: bold;
    font-size: 1.2rem;
    border-bottom: 0;
}

.div-tabbuttons {
    padding: 8px 8px 8px 8px;
}

.div-home {
    border: none;
    padding: 24px;
    background-color: var(--bg-light-color);
    padding-bottom: 32px;
}

.homepage {
    background-color: #eeeeee;
}

.editpage {
    background-color: var(--bg-light-color);
    background-position: top;
    background-repeat: repeat-x;
}


.hint-top {
    padding: 8px 0px 8px 0px;
}

    .hint-top table {
        border: solid 1px #cccc00;
        background-color: #ffffcc;
    }

.span-inboxdate {
    padding-top: 3px;
    color: Gray;
    font-size: 0.4rem;
}

.subobject-panel {
    border: 0;
    background-color: var(--bg-light-color);
    padding: 24px;
    height: calc(100% - 120px);
    overflow: scroll;
    box-sizing: border-box;
}


.separator2 {
    background-color: #333;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px 0px 5px 0px;
    margin: 15px 0px 15px 0px;
    clear: both;
}

.separator-small {
    font-weight: bold;
    font-size: 0.6rem;
    padding: 0px 0px 2px 0px;
    margin: 8px 0px 12px 0px;
    clear: both;
}

.dialog {
    z-index: 1000000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 6px;
    box-shadow: var(--pop-shadow);
    transform: translateX(-50%) translateY(-50%);
}

.dialog-bg {
    background-color: black;
    opacity: 0.4;
    z-index: 99999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
}

.dialog-title {
    background-color: white;
    color: #033E8C;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 17px 30px 17px 30px;
    border-bottom: solid 1px #dddddd;
    border-radius: 4px 0 0 0;
}

.dialog-title-closebutton {
    background-color: white;
    color: gray;
    font-size: 1.1rem;
    padding: 8px 8px 8px 8px;
    border-bottom: solid 1px #dddddd;
    border-radius: 0 4px 0 0;
}

    .dialog-title-closebutton a {
        color: #2278ff;
    }

.dialog-main {
    background-color: var(--bg-light-color);
    padding: 20px 30px 20px 30px;
    height: calc(80vh - 160px);
    max-height: unset !important;
}

    .dialog-main .field-field-search {
        margin: 0;
    }

    .dialog-main .grid-headerscrollable {
        margin-top: 16px;
        border-top: solid 1px #cfcfcf;
        border-bottom: solid 1px #cfcfcf;
    }

.dialog-buttons {
    background-color: white;
    padding: 16px 8px 16px 8px;
    text-align: center;
    border-radius: 0 0 4px 4px;
}

.normal-dialog {
    width: calc(80vw);
    height: calc(80vh);
}

.subpanel-dialog {
    width: calc(90vw);
    height: calc(90vh);
}

.search-dialog-div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .search-dialog-div > .grid-outer {
        flex: 1 1 auto;
        min-height: 280px;
    }

        .search-dialog-div > .grid-outer > .grid-rowscrollable {
            max-height: unset !important;
            min-height: 200px;
            height: calc(100% - 80px);
        }

.search-dialog-div--textbox {
    width: 500px;
}

.search-dialog-div--searchbutton {
    padding-top: 0px;
    vertical-align: top;
}

.div-audit table {
    font-size: 0.7rem;
    color: Gray;
}

.div-audit-int, .div-audit-int .field__caption {
    color: var(--caption-color);
    font-size: 0.85rem;
}

.div-indent {
    padding-left: 20px;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}



.stateBox {
    background-color: Pink;
    text-align: center;
    font-weight: bold;
    border: .1rem solid #900;
    position: absolute;
    z-index: -1;
}

.stateBox-current {
    background-color: LightBlue;
    text-align: center;
    font-weight: bold;
    border: .1rem solid #900;
    position: absolute;
    z-index: -1;
}

.actionBox {
    position: absolute;
    z-index: 4;
    background-color: white;
}

.stateBox div {
    font-size: 9px;
    font-weight: normal;
}

.stateBox-current div {
    font-size: 9px;
    font-weight: normal;
}


.text-sub {
    font-family: Tahoma;
    font-size: 0.5rem;
    color: Gray;
}

.object-base, .object-base input {
    font-size: 0.85rem;
    font-weight: bold;
}

/* month view calendar */
.monthv {
}

    .monthv > tbody > tr > td {
        border: none;
    }

    .monthv span {
        font-size: 0.9rem;
        font-weight: normal;
        color: Black;
        cursor: pointer;
    }

.monthv-day-today {
    font-size: 1.1rem;
    font-weight: bold;
    min-height: 100px;
    border: solid 1px #dddddd;
    padding: 4px 8px 4px 8px;
    color: var(--primary-color);
}

.monthv-day-day {
    font-size: 1.1rem;
    height: 80px;
    border: solid 1px var(--line-color) !important;
    padding: 4px 8px 4px 8px;
}

.monthv-day-weekend {
    font-size: 1.1rem;
    min-height: 100px;
    border: solid 1px #dddddd;
    background-color: #ddeeff;
    padding: 4px 8px 4px 8px;
}

.monthv-day-othermonth {
    font-size: 1.1rem;
    min-height: 100px;
    border: solid 1px #dddddd;
    background-color: var(--bg-light-color);
    color: #cccccc;
    padding: 4px 8px 4px 8px;
}

.monthv-dayheader {
    background-color: var(--bg-dark-color);
    padding: 4px 8px 4px 8px;
    border: none;
}

.monthv-header {
    background-color: White;
    border: none;
}

    .monthv-header td {
        background-color: White;
        border: none;
        font-size: 1.3rem;
        padding: 4px 20px 4px 20px;
    }

.ajax__calendar_container {
    z-index: 1;
}


/* --- Desktop Menu --- */
.cssmenu-container {
    box-shadow: 0px 1px 6px #19191914;
    padding: 8px 24px 8px 14px;
    display: flex;
    align-items: center;
    background: white;
    white-space: nowrap;
    position: relative;
    background: var(--home-top-bar-bg-color);
    display: flex;
    height: 60px;
}

    .cssmenu-container .menulogo {
        width: 140px;
    }

    .cssmenu-container > *:not(:last-child) {
        margin-right: 24px;
    }

.cssmenu-detail ul,
.cssmenu-detail li,
.cssmenu-detail span,
.cssmenu-detail a,
.cssmenu ul,
.cssmenu li,
.cssmenu span,
.cssmenu a {
    margin: 0;
    padding: 0;
    position: relative;
    color: #ccc;
}

.cssmenu {
    background: white;
    border-bottom: 0px;
    overflow: hidden;
    position: relative;
    margin-right: 12px;
    height: var(--home-top-bar-menu-height);
    background-color: var(--home-top-bar-bg-color);
    flex: 1 0 0;
}

.cssmenu-container .hlink-white {
    display: none;
}

.cssmenu-detail {
    display: none;
    position: absolute;
    border-radius: 6px;
    z-index: 1;
    margin-right: 0px;
    max-height: calc(100vh - 90px);
}


.cssmenu-scrollRight {
    z-index: 10001;
    height: var(--home-top-bar-menu-height);
    background-color: black;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    opacity: 0.7;
    width: 30px;
    text-align: center;
}

    .cssmenu-scrollRight:hover {
        opacity: 1;
    }

.cssmenu-scrollLeft {
    z-index: 10001;
    height: var(--home-top-bar-menu-height);
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    opacity: 0.7;
    width: 30px;
    text-align: center;
}

    .cssmenu-scrollLeft:hover {
        opacity: 1;
    }

    .cssmenu-scrollRight img, .cssmenu-scrollLeft img {
        height: 15px;
        position: relative;
        top: calc((var(--home-top-bar-menu-height) - 15px) / 2 - 3px);
    }

.cssmenu-item-label {
    display: inline-block;
    vertical-align: 3px;
    color: white;
    font-size: 1.1rem;
}

.cssmenu-item-right {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.80;
    background-image: url(../../images/downcaret.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    height: var(--home-top-bar-menu-height);
    padding-right: 6px;
    border-left: solid 1px #ffffff33;
    padding-right: 6px;
    display: none;
}

.has-sub .cssmenu-item-right {
    display: initial;
}

/*.cssmenu:after,
.cssmenu ul:after {
    content: '';
    background: black;
    display: block;
    clear: both;
}*/

.cssmenu a {
    /*    background: black;
*/ color: #ccc;
    display: inline-block;
    font-family: var(--font-family);
    font-size: 16px;
    padding-left: 0 5px;
    text-decoration: none;
}

.cssmenu ul {
    background: var(--home-top-bar-bg-color);
    list-style: none;
    box-shadow: 0px 1px 6px #19191914;
    opacity: 1;
}

.cssmenu-detail ul {
    list-style: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 6px;
}


.cssmenu > ul {
    display: flex;
    align-items: center;
    padding: 0 0;
    overflow: auto;
    height: var(--home-top-bar-menu-height);
    box-shadow: none;
    scrollbar-width: none;
}

.cssmenu-detail > ul {
    margin-right: 12px;
    display: inline-block;
    border-radius: 6px;
}

.cssmenu > ul::-webkit-scrollbar {
    height: 0px;
    width: 100%;
    background: gray;
}

.cssmenu > ul::-webkit-scrollbar-thumb:horizontal {
}


.cssmenu > ul > li {
    /*float: left;
        white-space: normal*/
    margin-right: 12px;
    display: inline-block;
    width: var(--home-top-bar-menu-width);
    height: var(--home-top-bar-menu-height);
}



.cssmenu-detail > ul > li {
    color: #000;
    word-wrap: normal;
    vertical-align: bottom;
    padding: 5px;
    white-space: normal;
    display: flex;
    border-bottom: solid 1px var(--line-color);
}

.cssmenu > ul > li:last-child {
    margin-right: 0;
}

.cssmenu > ul > li > span {
    line-height: 40px;
    padding: 0 5px;
}

.cssmenu-detail > span {
    line-height: 40px;
    padding: 0 5px;
}

.cssmenu > ul > li > a {
    color: #000;
    word-wrap: normal;
    vertical-align: bottom;
    padding: 3px 10px;
    padding-right: 26px;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    width: var(--home-top-bar-menu-width);
    height: var(--home-top-bar-menu-height);
    white-space: normal;
    display: flex;
}

.cssmenu-detail > ul > li > a {
    color: #000;
    word-wrap: normal;
    vertical-align: bottom;
    padding: 5px 10px;
    padding-right: 26px;
    box-sizing: border-box;
    white-space: normal;
    display: flex;
    min-width: 320px;
}


.cssmenu > ul > li.active > a {
    background: var(--menu-bg-hover-color);
    border-radius: 6px;
    /*            color: #fff;
*/
}

.cssmenu-detail > ul > li.active > a {
    background: var(--menu-bg-hover-color);
    border-radius: 6px;
}

.cssmenu > ul > li:hover > a {
    background: var(--menu-bg-hover-color);
    /*            color: #fff;
*/
}

.cssmenu-detail > ul > li:hover {
    background: var(--menu-bg-hover-color);
}

.cssmenu > ul > li:hover > a .cssmenu-item-right {
    /*background-image: url(../../images/downcarethover.png);
                border-left: 1px solid #fff;*/
}

.cssmenu > ul > li > a > .cssmenu-item-label {
    align-self: flex-end;
}

.cssmenu-detail > ul > li > a > .cssmenu-item-label {
    align-self: flex-end;
}

.cssmenu .has-sub {
}

    .cssmenu .has-sub ul {
        display: none;
        position: fixed;
        width: 320px;
        left: 0px;
        top: 0px;
        box-shadow: 0px 1px 6px #19191929;
        border-radius: 6px;
        overflow: auto;
        max-height: 60%;
    }

.cssmenu-detail .has-sub ul {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    overflow: auto;
    max-height: 60%;
}

.cssmenu .has-sub ul li {
    *margin-bottom: -1px;
}

    .cssmenu .has-sub ul li a {
        background: white;
        filter: none;
        font-size: var(--root-font-size);
        display: block;
        /* line-height: 120%; */
        padding: 10px 20px 10px 20px;
        color: black;
        /* overflow: hidden; */
        max-width: 280px;
        /* text-overflow: ellipsis; */
        position: relative;
        white-space: normal;
        min-width: 320px;
    }

.cssmenu-detail .has-sub ul li a {
    filter: none;
    font-size: var(--root-font-size);
    display: block;
    padding: 10px 20px 10px 20px;
    color: black;
    position: relative;
    white-space: normal;
}

.cssmenu .has-sub ul li:hover a {
    background: var(--menu-bg-hover-color);
}

.cssmenu-detail .has-sub ul li:hover a {
    background: var(--menu-bg-hover-color);
}

.cssmenu .has-sub .has-sub ul {
    display: none;
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
}

.cssmenu-detail .has-sub .has-sub ul {
    display: none;
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
}

.cssmenu .has-sub > ul > .has-sub > a::after {
    /*background-image: url(../../images/submenu.gif);
        background-position: center right;
        background-repeat: no-repeat;*/

    content: '';
    border: solid #666666;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-left: auto;
    position: absolute;
    top: 18px;
    right: 12px;
}

.cssmenu-detail .has-sub > a::after {
    content: '';
    border: solid #666666;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-left: auto;
    position: absolute;
    top: 12px;
    right: 12px;
}

.cssmenu .has-sub .has-sub ul li a {
    width: 300px;
    background: white;
}

.cssmenu-detail .has-sub .has-sub ul li a {
    width: 320px;
    background: white;
}

.cssmenu-detail .has-sub a {
    width: 320px;
}

.cssmenu .has-sub .has-sub ul li a:hover {
    background: var(--menu-bg-hover-color);
}

.cssmenu-detail .has-sub .has-sub ul li a:hover {
    background: var(--menu-bg-hover-color);
}

.cssmenu > ul {
    z-index: 10000;
    padding-right: 24px;
}

.cssmenu-detail > ul {
    z-index: 10000;
    word-wrap: break-word;
    padding: 0px;
    margin: 0px;
    border-radius: 6px;
    max-height: calc(100vh - 90px);
    overflow: auto;
    background-color: var(--menu-bg-color);
}

.cssmenu > ul > li > ul {
    z-index: 20000;
}

.cssmenu-detail > ul > li > ul {
    z-index: 20000;
    border-radius: 6px;
    background-color: var(--menu-bg-color);
}

.cssmenu > ul > li > ul > li > ul {
    z-index: 30000;
    border-radius: 6px;
}

.cssmenu-detail > ul > li > ul {
    z-index: 30000;
    border-radius: 6px;
}

    .cssmenu-detail > ul > li > ul > li {
        border-bottom: solid 1px var(--line-color);
    }

.cssmenu > ul > li.has-sub > ul > li.has-sub > ul {
    z-index: 30000;
    border-radius: 6px;
}

.cssmenu-detail > ul > li.has-sub > ul {
    z-index: 30000;
    border-radius: 6px;
}

.menu-search {
    padding: 8px 10px;
    border: 1px solid var(--line-color);
    border-radius: 24px;
    cursor: pointer;
    background-color: var(--home-top-bar-bg-color);
}

    .menu-search img {
        height: 20px;
    }


/* --- Mobile Menu --- */
.cssmenum,
.cssmenum ul,
.cssmenum li,
.cssmenum a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    /*font-family: Segoe UI, Arial;*/
    font-family: var(--font-family);
    font-size: var(--root-font-size);
    position: relative;
}

    .cssmenum a {
        line-height: 1.3;
        padding: 6px 15px;
    }

.cssmenum {
    width: 100%;
}

    .cssmenum > ul > li {
        cursor: pointer;
        background-color: #000;
        border-bottom: 1px solid #555333;
    }

        .cssmenum > ul > li > a {
            font-size: var(--root-font-size);
            display: block;
            color: #ffffff;
            background-color: black;
            padding: 9px 0px 9px 15px;
        }

        /* Sub menu */
        .cssmenum > ul > li > ul {
            padding: 0;
            display: none;
        }

            .cssmenum > ul > li > ul > li > ul {
                padding: 0;
                display: none;
            }

    .cssmenum ul ul a {
        background-color: #107FC9;
        display: block;
        color: white;
        font-size: var(--root-font-size);
        padding: 9px 0px 9px 30px;
    }

    .cssmenum ul ul li {
        border-bottom: 1px solid #0E4EAD;
    }

    .cssmenum ul ul ul a {
        background-color: #0058b3;
        display: block;
        color: white;
        font-size: 13px;
        padding: 9px 0px 9px 45px;
    }

    .cssmenum .has-sub > a {
        background-image: url(../../images/submenu.gif);
        background-position: center right;
        background-repeat: no-repeat;
    }

.cssmenum-detail .has-sub > a {
    background-image: url(../../images/submenu.gif);
    background-position: center right;
    background-repeat: no-repeat;
}


.cssmenum ul ul ul li {
    border-bottom: 1px solid #0E4EAD;
}



.user-profile-container {
    padding: 0px;
    border: 1px solid var(--line-color);
    border-radius: 24px;
    cursor: pointer;
    background-color: var(--home-top-bar-bg-color);
}

    .user-profile-container > div {
        display: flex;
        align-items: center;
        column-gap: 8px;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 0;
        margin-top: 20px;
    }

    .user-profile-container img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin-bottom: 5px;
    }

    .user-profile-container > a {
        align-items: center;
        text-align: center;
        padding: 0;
        margin: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: var(--home-top-bar-bg-color);
    }

        .user-profile-container > a:hover {
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: white;
        }

.user-tenant-label {
    user-select: none;
    color: white;
    position: absolute;
    top: 2px;
    right: 2px;
    text-transform: uppercase;
    font-size: 9px;
    background-color: var(--primary-color);
    border-radius: 20px;
    padding-left: 5px;
    padding-right: 5px;
}

.home-profile-container {
    border: 1px solid var(--line-color);
    border-radius: 24px;
    background-color: var(--home-top-bar-bg-color);
    padding: 6px 12px;
    box-sizing: border-box;
    height: 38px;
    color: var(--home-top-bar-text-color);
}

    .home-profile-container > div {
        display: flex;
        align-items: center;
        column-gap: 8px;
    }

    .home-profile-container img, .home-profile-container input[type=image] {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .home-profile-container a {
        padding: 0;
        color: var(--home-top-bar-text-color);
    }

        .home-profile-container a img {
            padding: 0;
            width: 16px;
            height: 16px;
        }

    .home-profile-container .profile-username {
        max-width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
/*-----------------------
  Date Picker
-------------------------*/
#AUFCalSlide {
    overflow: hidden;
    width: 245px;
    height: 252px;
}

#AUFMYSlide {
    overflow: hidden;
}

#AUFCal, #AUFMY {
    font-family: Segoe UI, Arial;
    width: 245px;
    border: none;
    position: absolute;
    background-color: White;
    border: solid 1px #fff;
    box-shadow: 0 7px 40px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 7px 40px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 7px 40px rgba(0,0,0,0.8);
    z-index: 1000001;
}

#AUFMY {
    width: 245px;
}

#AUFCalHeader, #AUFMYHeader {
    color: white;
    background-color: #eee;
    height: 43px;
    width: 246px;
}

#AUFCalMonthYear, #AUFMYYear {
    padding-top: 3px;
}

#AUFCalLeft, #AUFCalRight, #AUFMYLeft, #AUFMYRight {
    width: 40px;
}

    #AUFCalLeft a, #AUFMYLeft a,
    #AUFCalRight a, #AUFMYRight a {
        padding-top: 8px;
        text-align: center;
        display: block;
        width: 40px;
        height: 32px;
        cursor: pointer;
    }

        #AUFCalLeft a div, #AUFMYLeft a div {
            display: inline-block;
            border: solid 6px transparent;
            border-right: solid 6px black;
        }

        #AUFCalRight a div, #AUFMYRight a div {
            display: inline-block;
            border: solid 6px transparent;
            border-left: solid 6px black;
        }

#AUFCalMonthYear, #AUFMYYear {
    text-align: center;
    width: 200px;
}

#AUFCalWeeks td {
    color: #bbb;
    font-size: 12px;
}

#AUFCalCells, #AUFMYCells {
    font-family: Segoe UI, Arial;
    font-size: 12px;
    width: 245px;
    border-spacing: none;
    position: relative;
    top: 0px;
    left: 0px;
}

    #AUFCalCells td, #AUFMYCells td {
        width: 35px;
        height: 35px;
        text-align: center;
        vertical-align: center;
        font-size: 14px;
    }

    #AUFMYCells td {
        width: 60px;
        height: 60px;
    }

    #AUFCalCells a,
    #AUFMYCells a {
        text-decoration: none;
        display: inline-block;
        padding-top: 8px;
        width: 18px;
        height: 22px;
        color: black;
        font-size: 14px;
    }

    #AUFMYCells a {
        padding-top: 22px;
        width: 40px;
        height: 36px;
    }

#AUFCalToday, #AUFMYThisMonth {
    border-top: solid 1px #bbb;
    padding: 1px;
}

    #AUFCalToday a,
    #AUFMYThisMonth a {
        text-decoration: none;
        display: block;
        padding-top: 6px;
        height: 24px;
        color: #24A0DA;
    }

        #AUFCalCells a:hover,
        #AUFMYCells a:hover,
        #AUFCalToday a:hover,
        #AUFMYThisMonth a:hover {
            color: white;
        }

.AUFSel select, .AUFSelY select {
    font-family: Segoe UI, Arial;
    font-size: 16px;
    background: transparent;
    width: 90px;
    height: 33px;
    border: 0;
    color: black;
    line-height: 1;
    border-radius: 0;
    -webkit-appearance: none;
}

.AUFSel, .AUFSelY {
    display: inline-block;
    width: 60px;
    height: 33px;
    overflow: hidden;
    background: url('../../images/datepicker-dn.gif') no-repeat right transparent;
    border: none;
    color: white;
}

a.calsel {
    background-color: #24A0DA !important;
    color: white !important;
}

a.calday {
    background-color: white;
    color: black;
}

a.calnor {
    color: rgba(189, 195, 199, 0.90) !important;
}

#AUFMYCells a {
    background-color: white !important;
    color: black !important;
}

    #AUFMYCells a:hover, #AUFMYCells a.calsel {
        background-color: #24A0DA !important;
        color: white !important;
    }

a.caldis {
    color: rgba(189, 195, 199, 0.90) !important;
    cursor: not-allowed
}

.calday:not(.caldis):hover,
.calsel:hover, #AUFCalToday a:hover, #AUFMYThisMonth a:hover {
    background-color: #24A0DA;
}

.grid-dayheader {
    border: none;
    padding: 3px 3px 3px 3px;
    background-color: #eeece1;
}

.grid-day {
    text-align: center;
    padding: 3px 3px 3px 3px;
}

.grid-day-big {
    padding: 3px 3px 3px 3px;
}

.default-node {
    font-family: Segoe UI, Arial;
    font-size: 0.85rem;
    color: #888888;
    padding-top: 5px;
    padding-bottom: 5px;
}

.selected-node {
    font-weight: bold;
}

.hover-node {
    color: var(--primary-color);
}

.leaf-node {
    margin: 0px 0px 0px -19px;
}

.home-calendar {
    margin-bottom: 50px;
}

.home-calendar-cell {
    font-family: Segoe UI, Arial;
    font-size: 0.7rem;
    text-align: center;
    padding: 5px 3px 5px 3px;
    background-color: #ffffff;
    color: #000000;
}

.home-calendar-today {
    padding: 5px 3px 5px 3px;
}

.home-calendar-dayheader {
    font-family: Segoe UI, Arial;
    font-size: 0.7rem;
    border: none;
    padding: 3px 3px 3px 3px;
    background-color: silver;
}

.home-calendar-header {
    color: black;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.6rem;
    background-color: #ebebeb;
}

.home-calendar-weekend {
    text-align: center;
    padding: 3px 3px 3px 3px;
    background-color: #eeeeee;
}

.home-separator {
    font-family: Segoe UI, Arial;
    font-size: 1.3rem;
    color: #0077ff;
    padding: 0px 0px 2px 0px;
    margin: 0px 0px 0px 0px;
    clear: both;
}

.dashboard-tooltip-header {
    padding: 2px 10px 0px 5px;
    background-color: #0378b5 !important;
    white-space: nowrap;
    font-weight: bold;
    border: solid 0px #666;
    border-bottom: none;
    font-size: 1rem;
    color: #FFF;
}

.dashboard-tooltip-body td {
    font-size: 1rem;
}

.dashboard-tooltip-body {
    padding: 5px 10px 5px 5px;
    font-size: 1rem;
    background-color: #0378b5 !important;
    color: #FFF;
    white-space: nowrap;
    border: solid 0px #666;
    border-top: none;
}

.collapsible-panel-container {
    margin: 0px 0px 10px 0px;
}

.collapsible-panel-collapsed {
    /*    background: url('../../images/icon_plus.png') 10px center no-repeat #07F;
*/ display: block;
    /*    border: 1px solid #666;
*/ padding: 8px 12px 9px 36px;
    margin-bottom: 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    /*    color: #FFF;
*/ min-height: 15px;
    color: var(--separator-text-color);
    position: relative;
    background-color: var(--bg-dark-color);
    font-size: 1.2rem;
}

    .collapsible-panel-collapsed::after {
        content: '';
        border: solid #033E8C;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        left: 10px;
        top: 14px;
        font-weight: 400;
    }

.collapsible-panel-expanded {
    /*    background: url('../../images/icon_minus.png') 10px center no-repeat #07F;
*/ display: block;
    /*    border: 1px solid #666;
*/ padding: 8px 12px 8px 36px;
    margin-bottom: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    /*    color: #FFF;
*/ min-height: 15px;
    color: var(--separator-text-color);
    position: relative;
    border-bottom: 1px solid var(--line-color);
    font-size: 1.2rem;
}

    .collapsible-panel-expanded::after {
        content: '';
        border: solid #033E8C;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        position: absolute;
        left: 10px;
        top: 17px;
        font-weight: 400;
    }
/** Dashboard css  **/
.dashboard-container {
    font-family: Arial;
    width: 300px;
    float: left;
    border: solid 1px #9C9E73;
}

.dashboard-header {
    font-family: Arial;
    width: 300px;
    height: 20px;
    background-color: #C3C49C;
    font-weight: bold;
    color: black;
    vertical-align: middle;
}

.dashboard-iframe {
    font-family: Arial;
    width: 300px;
    height: 320px;
}

.dashboard-expand {
    position: absolute;
    top: 0;
    left: 0;
    margin: 15px;
    z-index: 99999;
    background-color: #fff;
}

.dashboard-expand-head {
    background: url('../../images/pinboard-icons/dashboard.png') no-repeat;
    background-color: #ccc;
    padding: 5px 8px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

.dashboard-expand-close {
    cursor: pointer;
    float: right;
    width: 34px;
    height: 33px;
    margin-top: -7px;
    margin-right: -8px;
    font-size: 20px;
}

    .dashboard-expand-close:hover {
        color: white;
    }

.dashboard-expand-overlay {
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    z-index: 99998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dashboard-popup-title {
    font-weight: bold;
    text-align: center;
    height: 25px;
    line-height: 25px;
    display: block;
    padding-top: 5px;
}

.dashboard-popup-close-btn {
    width: 25px;
    height: 25px;
    line-height: 25px;
    right: 0;
    top: 0;
    position: absolute;
    font-size: x-large;
    text-align: center;
    padding-top: 5px;
    padding-right: 5px;
    color: black;
}

    .dashboard-popup-close-btn:hover {
        color: #ccc;
        cursor: pointer;
    }

.dashboard-popup-content {
    border: none;
    margin-top: 10px;
}


.object-base-br {
    height: 10px;
}

.warning {
    border: 1px solid;
    margin: 10px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: orangered !important;
    background-color: #F6E3CE;
    background-image: url('../../images/warn-True.gif');
    font: 13px/16px !important;
    font-weight: bold;
}

.error {
    border: 1px solid;
    margin: 10px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #D8000C !important;
    background-color: #FFBABA;
    background-image: url('../../images/delete-big.png');
    font: 13px/16px !important;
    font-weight: bold;
}

.asp-caption {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.7rem;
    color: #666666;
}

.search_limit_controls {
    right: 0;
    width: 275px;
    position: absolute;
    padding-top: 10px;
}

.treeview-inbox {
    width: 100%;
}

    .treeview-inbox table {
        position: relative;
        empty-cells: show;
        border-collapse: separate;
        word-wrap: break-word;
        border-spacing: 0;
        border: none;
        color: #2c3e50;
    }

        .treeview-inbox table:hover {
        }

        .treeview-inbox table tr td img {
            padding: 0.7rem 0.5rem 0.7rem 0;
            color: #626668;
            outline: none;
            empty-cells: show;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
            text-overflow-multiline: ellipsis;
        }

    .treeview-inbox a.treenode {
        color: #2c3e50;
        display: block;
        outline: 0;
        text-transform: uppercase;
        width: 100%
    }

    .treeview-inbox td.treenode {
        width: 100%;
        padding: 0.7rem 0.5rem;
        border: solid 1px transparent
    }

        .treeview-inbox td.treenode.treenode-leaf {
            padding-left: 10px;
            padding-right: 0.2rem;
            font-size: 0.90rem;
        }

        .treeview-inbox td.treenode.hover, .treeview-inbox td.treenode.selected, .treeview-inbox a.treenode.selected {
            font-weight: 500;
            color: #000;
            background-color: #fff
        }

        .treeview-inbox td.treenode.hover, .treeview-inbox td.treenode.selected {
            border-color: #e5e5e5
        }

        .treeview-inbox td.treenode.treenode-leaf .treevalue {
        }

        .treeview-inbox td.treenode.selected .treecount, .treeview-inbox td.treenode.selected .treecountsub {
            color: #000;
        }

        .treeview-inbox td.treenode .treecountsub, .treeview-inbox td.treenode .treecount {
            font-weight: 500;
            float: right;
            letter-spacing: 2px;
            text-align: center;
            color: #90949c
        }

.inbox-search-text {
    height: calc(var(--field-lineheight) + var(--field-vpadding) * 2 + 2px);
}

.dropdown-button-menu {
    position: relative;
}

    .dropdown-button-menu > .btn {
        margin-bottom: 0;
        padding-right: 28px;
    }

    .dropdown-button-menu.hide {
        display: none;
    }

    .dropdown-button-menu::before {
        content: '';
        border: solid black;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 2px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        top: 36%;
        right: 16px;
        z-index: 2;
        pointer-events: none;
        margin-top: 2px;
    }

    .dropdown-button-menu.dropdown--primary::before {
        border-color: white;
    }


.dropdown-button-menu--content {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    box-shadow: 0px 4px 4px #19191929;
    min-width: 200px;
    padding: 6px 0;
    opacity: 1;
    transition: all 0.12s ease-in-out;
    max-width: 320px;
    z-index: 3;
    border-radius: 6px;
    padding: 12px;
    padding-bottom: 4px;
}

.dropdown-user-detail {
    position: absolute;
    right: 0;
    background: white;
    box-shadow: 0px 4px 4px #19191929;
    min-width: 150px;
    padding: 6px 0;
    opacity: 1;
    max-width: 250px;
    border-radius: 6px;
    z-index: 1;
}

    .dropdown-user-detail div {
        top: 60px;
        z-index: 10007;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dropdown-user-detail > div {
        top: 60px;
        z-index: 10007;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.dropdown-button-menu--content.hide .dropdown-user-detail.hide {
    display: none;
    opacity: 0;
}

.dropdown-button-menu--content .dropdown-user-detail .btn {
    margin: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.dropdown-user-detail > span {
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

.dropdown-user-detail > a {
    padding: 0;
    margin: 0;
    margin-bottom: -10px;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

    .dropdown-user-detail > a > img {
        width: 50px;
        height: 50px;
        margin: 10px;
    }


.dropdown-button-menu--content > span, .dropdown-button-menu--content > .btn {
    margin-bottom: 8px;
    display: inline-block;
    width: 100%;
}

    .dropdown-button-menu--content > span > .btn:not(:last-child) {
        margin-bottom: 8px;
        display: inline-block;
    }

.dropdown-on-wrap.force-dropdown .dropdown-button-menu--content .dropdown-user-detail .btn {
    text-align: left;
    border-radius: 0px;
    /*  border: solid 1px white;
color: black;
background-color: white;*/
}

/* force dropdown to not working */
.dropdown-on-mobile:not(.force-dropdown), .dropdown-on-wrap:not(.force-dropdown) {
    margin-right: 4px;
}

    .dropdown-on-mobile:not(.force-dropdown) > .btn, .dropdown-on-wrap:not(.force-dropdown) > .btn {
        display: none;
    }

    .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail,
    .dropdown-on-wrap:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail {
        display: inline-block;
        position: static;
        min-width: unset;
        max-width: unset;
        box-shadow: none;
        background: unset;
        padding: 0;
    }

    .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content.hide .dropdown-user-detail.hide,
    .dropdown-on-wrap:not(.force-dropdown) .dropdown-button-menu--content.hide .dropdown-user-detail.hide {
        opacity: 1;
        display: inline-block;
    }

    .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail .btn,
    .dropdown-on-wrap:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail .btn {
        display: inline-block;
        width: auto;
        margin-right: 4px;
        margin-bottom: 0;
    }

    .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail > span > span:last-child .btn,
    .dropdown-on-wrap:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail > span > span:last-child .btn {
        margin-right: 0;
    }

    .dropdown-on-mobile:not(.force-dropdown)::before, .dropdown-on-wrap:not(.force-dropdown)::before {
        display: none;
    }

    .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail > span, .dropdown-on-mobile:not(.force-dropdown) .dropdown-button-menu--content > .btn,
    .dropdown-on-wrap:not(.force-dropdown) .dropdown-button-menu--content .dropdown-user-detail > span, .dropdown-on-wrap:not(.force-dropdown) .dropdown-button-menu--content > .btn {
        margin-bottom: 0;
        display: inline-block;
        width: auto;
    }

.home-tabstrip-container {
    padding: 0;
    min-width: 400px;
}

.home-tabstrip {
    background-color: #FFFFFF;
    box-shadow: 0px 1px 6px #19191914;
    opacity: 1;
    position: relative;
    z-index: 4;
    max-width: 100%;
    overflow: auto;
    white-space: nowrap;
}

    .home-tabstrip ul {
        padding: 10px 24px 0px 24px;
        border-bottom: 0;
        margin-bottom: 0;
    }

        .home-tabstrip ul li a, .home-tabstrip ul li a:visited {
            font-size: 1.1rem;
            padding-bottom: 6px;
            line-height: 26px;
            vertical-align: -7px;
            margin-right: 16px;
        }

        .home-tabstrip ul li.selected a {
            color: var(--primary-color);
            border-bottom: solid 2px var(--primary-color);
        }

        .home-tabstrip ul li a:hover {
            color: var(--primary-color);
        }

.object-base-workflow-container {
    display: flex;
    justify-content: space-between;
}

.object-base-workflow-button-container.dropdown-button-menu, .dropdown-on-mobile:not(.force-dropdown).object-base-workflow-button-container {
    margin-right: 0;
}

.object-base-workflow-button-container .dropdown-button-menu--content {
    display: flex;
    column-gap: 6px;
}

.home-title {
    letter-spacing: 0.64px;
    color: #191919;
    opacity: 1;
    font-size: 32px;
    padding: 0;
    margin: 0;
    font-size: 1.5rem;
}

.div-home .grid-pager > td {
    padding-left: 40px;
    padding-right: 40px;
}

.home-search-panel-container > a {
    margin: 0;
    margin-left: 8px;
}

.home-search-panel-container .field {
    margin-right: 8px;
}

    .home-search-panel-container .field .field__input-group {
        padding-top: 0;
    }

.home-search-panel-container #SearchDropDownList table a {
    color: #2278ff;
    padding: 4px 8px;
    font-size: 1rem;
}

.home-search-panel-container > input {
    margin-right: 8px;
}

.pinboard-message {
    background: #FFFAE6 0% 0% no-repeat padding-box;
    box-shadow: 0px 1px 6px #19191914;
    border: 1px solid #FAC905;
    border-radius: 6px;
    opacity: 1;
    margin: 24px;
    padding: 24px;
    margin-top: 0;
}

    .pinboard-message h1 {
        margin: 0;
    }

    .pinboard-message td {
        vertical-align: top;
    }

    .pinboard-message img.pinboard-icon {
        width: 64px;
        box-shadow: 0px 0px 4px #1919191F;
        background: white;
        border-radius: 50%;
        margin-right: 32px;
    }


.subobject-dialog-close-button {
    float: right;
}


/*for customer account and customer account group inconsistency*/
.div-main .div-form .grid-outer table {
    background: rgba(245,249,252,255);
}


.leaseType {
    padding: 0px !important;
}



.DepositTable .field__input-group > label {
    padding: 0px;
}

#panelDownload > span > span > div:first-child {
    padding-left: 50px;
    background-color: rgba(235,239,242,255); /*235,235,235*/
}


.comment .grid {
    overflow: visible !important;
}

    .comment .grid .grid-row td {
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none !important;
    }

.comment .field-input-group {
    border-bottom: none;
}

.memo {
    position: relative;
    background: 0 0;
    padding: 0;
    margin: .5em 0 0;
    border: none;
    border-top: none;
}

    .memo .memo {
        padding: 0 0 0 29px;
    }

        .memo .memo > .memo__content > .memo__message {
            margin-right: 0px;
        }

.memo__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebebeb;
    width: 28px;
    height: 28px;
    font-weight: 600;
    float: left;
    margin: .25em 0 0;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.memo__avatar-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.memo__avatar label {
    color: #fff;
}

.memo__avatar ~ .memo__content {
    margin-left: 2.6em;
}

.memo__replies .memo__avatar {
    width: 28px;
    height: 28px;
}

    .memo__replies .memo__avatar ~ .memo__content {
        margin-left: 2.4em;
    }

.memo__reply {
    display: flex;
    position: relative;
    margin: 0 0 0 .5em;
    /*-webkit-box-shadow: -2px 0 0 rgba(34, 36, 38, .15);
        box-shadow: -2px 0 0 rgba(34, 36, 38, .15);*/
}

    .memo__reply .grid-content__scrollable {
        overflow: visible !important;
    }

        .memo__reply .grid-content__scrollable .grid-cell {
            padding-top: 0;
            padding-bottom: 0;
            border-bottom: none !important;
        }

.memo__content > .memo__arrow-head {
    top: -.5em;
    left: -59px;
    position: absolute;
    width: 1.7em;
    height: 1.6em;
    border: none;
    border-left-style: solid;
    border-left-width: 2px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-left-radius: 14px;
    border-color: #e5e5e5;
}

.memo__content > .memo__arrow-line {
    top: .25em;
    left: -18px;
    bottom: 0px;
    position: absolute;
    border-left-style: solid;
    border-left-width: 2px;
    border-color: #e5e5e5;
}

.memo__addreply[data-action="Comment"] .memo__content > .memo__arrow-head,
.memo__addreply[data-action="Comment"] .memo__content > .memo__arrow-line {
    display: none;
}

.memo__replies .memo__content > .memo__arrow-line {
    left: -66px;
}

.memo__author {
    font-size: .9em;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 600;
}

.memo__audit {
    font-weight: 700;
    font-size: .875em;
    display: inline-flex;
    margin-left: 0em;
    color: rgba(0, 0, 0, 0.4);
}

.memo__header {
    height: 18px;
    display: inline-flex;
    align-content: center;
    align-items: center;
    line-height: 1em;
}

.memo__content {
    position: relative;
    padding-bottom: 2px;
}

.memo__wrapper {
    width: 100%;
    display: inline-flex;
    align-items: center;
}

.memo__attachments {
    margin-top: 2px;
}

.memo__img {
    width: 96px;
    height: 128px;
    margin: 0;
    display: inline-flex;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: #000;
    background-position: center;
    background-clip: padding-box;
    background-attachment: scroll;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.memo__files {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3px;
    margin-left: 2px;
    margin-top: 7px;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 1;
    order: 1;
    width: 100%;
}

.memo__file {
    -webkit-align-items: center;
    align-items: center;
    -webkit-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
    -webkit-box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.2);
    box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.2);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 30px;
    padding: 0 12px 0 36px;
    margin-right: 8px;
    max-width: 160px;
    min-width: 64px;
    background-position: 8px center;
    background-clip: padding-box;
    background-attachment: scroll;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-image: url("../../images/attachment.svg");
}

.memo__file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
    font-size: .975em;
    letter-spacing: normal;
}

.memo__message {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    position: relative;
    border-radius: var(--border-radius);
    padding: .4rem 1rem .6rem 1.4rem;
    margin-right: 0px;
    background-color: #EDEEF2;
}

.memo__text {
    display: inline-flex;
    flex-direction: column;
    padding: 0 32px 0 0;
    font-size: 1em;
    word-wrap: break-word;
    color: rgba(0, 0, 0, 0.87);
}

    .memo__text pre {
        margin: 0;
        display: inline-flex;
        white-space: pre-wrap;
        font-family: inherit;
        overflow: unset;
    }

.memo__actions {
    /*
            display: inline-flex;
            align-items: center;
        */
    margin-left: 4px;
    display: inline-block;
}

.memo__addreply[data-action="Reply"] {
    margin-left: 3.6em;
    position: relative;
    margin-right: 2em;
    display: block
}

.memo__addreply[data-action="Comment"] {
    margin-left: 0;
    position: relative;
    display: block
}

.memo__btn {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.65);
    padding: 2px 4px;
    min-height: 0;
    font-size: .825em;
}

.memo__smallbuttons > .memo__btn {
    height: 24px;
    line-height: 20px;
    background-color: transparent;
}

.memo__file > .btn {
    min-height: unset;
    line-height: 20px;
    padding: 0;
}

.memo__actions .memo__btn:first-child {
    margin-left: 0px;
}

.chip {
    display: inline-flex;
    max-width: 640px;
    color: rgba(0, 0, 0, 0.6);
    padding: 2px 4px 2px 10px;
    margin: 2px 4px 2px 0;
    border-radius: var(--border-radius);
    /*border: solid 1px #ececec;*/
    white-space: nowrap;
    background-color: #ebebeb;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

.chip__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.chip__close {
    width: 24px;
    height: 24px;
    margin-left: 4px;
    min-height: unset;
    min-width: unset;
}

    .chip__close .btn__icon {
        height: 18px;
    }

.dms-filetype {
    padding: 3px 6px;
    border-radius: 4px;
    color: white;
    display: inline-block;
    font-family: Arial;
    font-size: 10px;
    width: 20px;
    text-align: center;
}

.dms-image-container {
    /*padding: 3px 6px;*/
    display: inline-block;
    width: 32px;
    vertical-align: central;
}

    .dms-image-container img {
        width: 24px;
    }

.dms-filetype-xls {
    background-color: #74BB71;
}

.dms-filetype-doc {
    background-color: #3696d2;
}

.dms-filetype-htm {
    background-color: #539469;
}

.dms-filetype-zip {
    background-color: #eebd27;
}

.dms-filetype-csv {
    background-color: #000000;
}

.dms-filetype-dat {
    background-color: #000000;
}

.dms-filetype-jpg {
    background-color: #74bb71;
}

.dms-filetype-png {
    background-color: #7bb1d2;
}

.dms-filetype-mht {
    background-color: #000000;
}

.dms-filetype-msg {
    background-color: #000000;
}

.dms-filetype-pdf {
    background-color: #d84a53;
}

.dms-filetype-ppt {
    background-color: #f58753;
}

.dms-filetype-rdlc {
    background-color: #000000;
}

.dms-filetype-txt {
    background-color: #5e67b0;
}

.dms-filetype-unknown {
    background-color: #528147;
}

/*Kanban Board*/
.kanban {
    margin: 5px;
    display: flex;
    overflow: auto;
    width: 100%;
}

    .kanban .kanban-column {
        background-color: var(--bg-dark-color);
        box-shadow: 0px 0px 4px #19191929;
        border-radius: var(--border-radius);
        flex: 1 1 0;
        /*min-height: 86vh;*/
        margin-right: 24px;
        margin-bottom: 32px;
        /*margin-top: -4px;*/
        position: relative;
        padding-top: 0px;
        max-width: 300px;
    }

.kanban-column-header-collapsed {
    display: block;
    padding: 8px 12px 9px 36px;
    margin-bottom: 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    min-height: 15px;
    color: var(--separator-text-color);
    position: relative;
    background-color: var(--bg-dark-color);
    font-size: 1.2rem;
}

    .kanban-column-header-collapsed ::after {
        content: '';
        border: solid #033E8C;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        left: 10px;
        top: 14px;
        font-weight: 400;
    }

.kanban-column-header {
    display: flex;
    padding: 8px 12px 8px 36px;
    margin-bottom: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 15px;
    color: var(--separator-text-color);
    position: relative;
    border-bottom: 1px solid var(--line-color);
    font-size: 1.2rem;
}

    .kanban-column-header::after {
        content: '';
        border: solid #033E8C;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(-135deg);
        -webkit-transform: rotate(-45deg);
        position: absolute;
        left: 10px;
        top: 21px;
        font-weight: 400;
    }

    .kanban-column-header .kanban-header-title {
        margin: auto;
        padding-left: 10px;
        /*width:0%;*/
    }

    .kanban-column-header > a {
        padding: 6px;
        margin: 0;
        height: 40px;
        width: 45.2px;
        /*margin-top:auto;*/
    }

        .kanban-column-header > a:hover {
            background-color: var(--bg-dark-color);
        }

.kanban-header-button img {
    height: 24px;
    width: 24px;
    vertical-align: middle;
}

.kanban-column-header img:hover {
    background-color: var(--bg-dark-color);
}

.kanban-column-item {
    height: 100%;
}

.kanban-item-button {
    position: absolute;
    right: 0;
    top: 0;
}

.kanban-column-item-detail {
    background-color: var(--bg-light-color);
    box-shadow: 0px 0px 4px #19191929;
    border-radius: var(--border-radius);
    flex: 1 1 0;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    padding: 12px;
    cursor: move;
    overflow-wrap: break-word;
}

.kanban-tag {
    height: 30px;
    text-decoration: none;
    display: inline-block;
}

.kanban-column-item-detail .kanban-item-header {
    margin-bottom: 1px;
    margin-top: 3px;
}

.kanban-column-item-detail .kanban-item-text {
    margin: 0;
}

.kanban-column-item-detail > a {
    margin: 2px;
    margin-right: 5px;
    border: 0;
    padding: 2px;
    border-collapse: collapse;
    display: inline;
}

/* Workflow History Dialog Box */
.objectworkflowhistory-sort-div {
    display: flex;
    align-items: center;
}

.objectworkflowhistory-timeline {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.objectworkflowhistory-event {
    display: grid;
    grid-template-columns: 3px 230px 1fr 200px;
    padding-left: 10px;
}

    .objectworkflowhistory-event > .objectworkflowhistory-timeline-line {
        position: relative;
        background-color: #ddd;
    }

    .objectworkflowhistory-event:last-child > .objectworkflowhistory-timeline-line {
        background: none;
    }

.objectworkflowhistory-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid #ddd;
}

.objectworkflowhistory-time {
    margin-left: 15px;
}

.objectworkflowhistory-action {
    padding-right: 15px;
}

.objectworkflowhistory-comments {
    word-break: break-all;
}

.objectworkflowhistory-time, .objectworkflowhistory-action, .objectworkflowhistory-state {
    margin-top: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--line-color);
}

    .objectworkflowhistory-state > .objectworkflowhistory-dot {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        display: inline-block;
    }

.objectworkflowhistory-sort-asc {
    content: url("../../images/remix/sort-asc.svg");
    margin-left: 3px;
    margin-right: 5px;
    width: 20px;
    height: 20px;
}

.objectworkflowhistory-sort-desc {
    content: url("../../images/remix/sort-desc.svg");
    margin-left: 3px;
    margin-right: 5px;
    width: 20px;
    height: 20px;
}

@media print {
    .tab-ver {
        display: none;
    }

    .tabstrip-ver-content {
        width: 8.3in;
    }

    body {
        zoom: 50%;
    }
}