.content {
    width: 100%;
}

form {
    margin: 0px;
    padding: 0px;
}

.form_table {
    margin-top: 16px;
    margin-bottom: 10px;
    width: 100%;
}

.grid-table.table-narrow {
    width: auto;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.HintContainer {
    margin: 1em;
    font-weight: bold;
    font-size: larger;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.LineContainer {
    position: relative;
    vertical-align: top;
}

.narrow {
    display: inline-block;
    width: auto;
    margin: 1em;
    border: 1px solid darkgrey;
    padding: 0.5em;
    vertical-align: top;
}

.floating {
    float: left;
    margin: 1em;
    border: 1px solid darkgrey;
    padding: 0.5em;
}

.narrow.block {
    display: block;
}

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

.buttonbar_table .bar {
    padding-left: 10px;
    text-align: left;
}

.container th.Number {
    text-align: right;
}

.container_default .SubContainer {
    margin-top: 40px;
}

    .container_default .SubContainer.First {
        margin-top: 0px;
    }

    .container_default .SubContainer .ContainerHeader {
        margin-bottom: 10px;
    }

.Tabbed .form_table {
    margin-top: 0px;
}

.form_table tr:not(:last-child) .formrow_label,
.body.label {
    vertical-align: top;
    min-width: 20em;
    border-bottom: 1px solid #DDD;
}

.formrow_divider,
.body.separator {
    vertical-align: top;
    width: 10px;
    display: none;
}

.formrow_content,
.body.value {
    border-bottom: 1px solid #DDD;
    font-size: inherit;
    line-height: 35px;
}

.multicolumn_container2 {
    width: 100%;
}

    .multicolumn_container2 .multicolumn_col1_2 {
        width: 50%;
    }

    .multicolumn_container2 .multicolumn_col2_2 {
        width: 50%;
        border-left: 1px solid #ddd;
    }

.PickList {
    width: 100%;
    border-spacing: 0px;
    border: 1px solid #808080;
}

    .PickList th {
        padding: 4px;
    }

    .PickList td {
        vertical-align: top;
    }

    .PickList .ContainerAvailable {
        min-height: 50px;
        max-height: 400px;
        overflow: auto;
    }

    .PickList .ContainerSelected {
        margin: 4px;
        min-height: 50px;
        max-height: 400px;
        overflow: auto;
    }

    .PickList .ContainerAvailable div {
        cursor: pointer;
        padding: 4px;
    }

        .PickList .ContainerAvailable div:hover {
            background-color: #FFFFFF;
        }

    .PickList .ContainerSelected div {
        cursor: pointer;
        padding: 4px;
    }

        .PickList .ContainerSelected div:hover {
            background-color: #FFFFFF;
        }

.ButtonBarSub {
    margin-top: 8px;
    margin-bottom: 8px;
}

    .ButtonBarSub .Button {
        cursor: pointer;
        padding: 4px;
        background-color: #E0E0E0;
        border-radius: 4px;
        border: 1px solid #C0C0C0;
        margin-right: 4px;
    }

        .ButtonBarSub .Button:hover {
            background-color: #A0A0A0;
            color: #FFFFFF;
        }

        .ButtonBarSub .Button .icon {
            display: inline-block;
            vertical-align: middle;
        }

.PageLoading {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: 50% 50% no-repeat rgba(249, 249, 249, 0.5);
    background: rgb(249, 249, 249);
}

.ButtonBarSub.LiveEditor {
    display: inline-block;
}

.PageLoading table {
    width: 100%;
    height: 100%;
}

.PageLoading .Content {
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

.grid-table td {
    vertical-align: top;
}

.grid-table tfoot {
    font-weight: bold;
    border-top: 1px solid #000000;
    background-color: #F5F5F5;
}

.grid-table.Select {
    width: auto;
}

.grid-table tfoot tr td {
    padding: 4px;
}

.grid-table caption {
    text-align: left;
}

.hidden {
    display: none;
}

.Hidden {
    display: none;
}

.HelpText {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}

    .HelpText .Subject {
        font-weight: bold;
    }

    .HelpText .Body {
        font-weight: normal;
    }

.SubHeader {
    margin-top: 4px;
    margin-bottom: 4px;
    font-weight: bold;
}

.Filter_Print {
    display: none;
}

.Filter_Edit {
    display: block;
}

.Report_Images {
    margin-top: 10px;
    margin-bottom: 10px;
}

.LabelTotal {
    white-space: nowrap;
    font-weight: bold;
}

.CellNumber {
    text-align: right;
    white-space: nowrap;
}

.CellLink {
    width: 20px;
}

.RowHeader {
    font-weight: bold;
    font-size: larger;
    background-color: transparent;
    border-top: 4px solid #000;
    border-bottom: 1px solid #000;
}

    .RowHeader td {
        padding-top: 4px;
        padding-bottom: 8px;
    }

.ChapterHeader {
    background-color: transparent;
    color: rgb(60, 60, 60);
    font-size: larger;
    font-weight: bold;
    margin-left: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.ReportWeb .ChapterHeader {
    font-size: 16px;
}

.Section {
    margin: 1em;
}

    .Section .Header {
        color: #FFF;
        font-size: larger;
        font-weight: bold;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        text-align: left;
        padding: 0.5em;
    }

        .Section .Header.Sub {
            color: black;
        }

    .Section .Section .Header.Sub {
        color: black;
        font-size: inherit;
        margin: 0em;
        padding-left: 0.5em;
        padding-top: 0.1em;
        padding-bottom: 0.1em;
    }

    .Section .Amount {
        float: right;
    }

    .Section td.Amount {
        float: none;
    }

    .Section .Header.Button {
        cursor: pointer;
    }

    .Section .Content {
        font-weight: bold;
    }

    .Section .Block.Light {
        border-left: 0.5em solid lightgray;
    }

    .Section .Block.Dark {
        border-left: 0.5em solid gray;
    }

.ReportWeb .Section .Content {
    font-weight: normal;
}

.Section table th {
    text-align: left;
}

.Section table td:first-child {
    min-width: 15em;
}

.Hierarchy {
    /*border: 1px solid black;*/
    display: inline-block;
    min-width: 200px;
}

    .Hierarchy .TopBar {
        height: 20px;
        background-color: #DEC;
        cursor: pointer;
    }

    .Hierarchy .Category {
        margin: 6px;
        line-height: 1.5em;
        /*font-size: larger;*/
    }

        .Hierarchy .Category .Title {
            font-weight: bold;
            margin-bottom: 0.5em;
        }

        .Hierarchy .Category .Content .Item {
            margin: 8px;
        }

        .Hierarchy .Category .Content .NewItem {
            margin: 8px;
            height: 6px;
        }

            .Hierarchy .Category .Content .NewItem:hover {
                margin-left: 20px;
                background-color: #000000;
                cursor: pointer;
            }

    .Hierarchy .NewCategory {
        margin: 4px;
        height: 6px;
        cursor: pointer;
    }

        .Hierarchy .NewCategory:hover {
            background-color: #000000;
        }

.SubResult td {
    font-style: italic;
}

.HighLight {
    background-color: #F08080;
}

.Tree {
    margin-top: 10px;
}

    .Tree :first-child {
        margin-top: 0px;
    }

    .Tree .Label {
        font-weight: bold;
        vertical-align: middle;
        line-height: 2em;
    }

    .Tree.Label {
        font-weight: bold;
        line-height: 2em;
        margin: 0px;
    }

.SubTree {
    margin-left: 20px;
}

    .SubTree .Label {
        font-weight: normal;
    }

        .SubTree .Label.Active {
            font-weight: bold;
        }

.ButtonBar {
    background-color: #333F48;
    padding-right: 10px;
    margin-bottom: 20px;
    vertical-align: middle;
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 1em;
    color: #FFFFFF;
    text-align: right;
}

    .ButtonBar .Button {
        display: inline-block;
        vertical-align: middle;
    }

    .ButtonBar .Divider {
        display: inline-block;
        margin-left: 0.5em;
        margin-right: 0.5em;
        vertical-align: middle;
    }

.SettingHeader {
    font-weight: bold;
    font-size: larger;
    padding-left: 0px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #000;
}

.formrow_header {
    font-weight: bold;
    font-size: larger;
    padding-left: 0px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #000;
}

.InfoIcon {
    cursor: default;
    color: #6c6b66;
}

.CustomSourceButton {
    /*float:left;*/
    display: inline-block;
    background-color: #008800;
    color: #FFFFFF;
    padding: 4px;
    cursor: pointer;
    width: 32px;
    height: 16px;
    text-align: center;
    vertical-align: top;
    /*line-height:16px;*/
    text-transform: uppercase;
    border-radius: 3px;
    /*border: 1px solid black;*/
}

.CustomValue {
    display: inline-block;
    margin-left: 1em;
    white-space: nowrap;
    line-height: none;
    padding-top: 0.2em;
}

.InheritedValue {
    display: inline-block;
    margin-left: 1em;
    white-space: nowrap;
    line-height: normal;
    padding-top: 0.5em;
}

.InheritedSourceInfo {
    display: inline-block;
    margin-left: 2em;
    white-space: nowrap;
    line-height: normal;
}

.Settings .Warning {
    display: inline-block;
    margin-left: 2em;
    white-space: nowrap;
    line-height: normal;
    color: darkred;
}

.InheritedSourceButton {
    /*float:left;*/
    display: inline-block;
    background-color: #880000;
    color: #FFFFFF;
    padding: 4px;
    cursor: pointer;
    width: 32px;
    height: 16px;
    text-align: center;
    vertical-align: top;
    /*line-height:16px;*/
    text-transform: uppercase;
    border-radius: 3px;
    /*border: 1px solid black;*/
}

.pna {
    background-color: yellow;
    color: black;
    border-right-color: brown;
    border-bottom-color: brown;
    border-left-color: white;
    border-top-color: white;
}

.clt {
    background-color: silver;
    border-right-color: gray;
    border-bottom-color: gray;
    border-left-color: white;
    border-top-color: white;
}

.vde {
    background-color: green;
    color: white;
    border-right-color: darkgreen;
    border-bottom-color: darkgreen;
    border-left-color: white;
    border-top-color: white;
}

.vdc {
    background-color: orange;
    color: white;
    border-right-color: darkorange;
    border-bottom-color: darkorange;
    border-left-color: white;
    border-top-color: white;
}

tr.Settings td {
    vertical-align: middle;
}


/*div.isgeneral { height: 3em; line-height:3em; }
div.iscustom { height: 3em; line-height:3em; }*/

div.isgeneral {
    display: inline-block;
    vertical-align: middle;
}

tr.Settings td.formrow_label {
    min-width: 400px;
}

.SettingBitSelected {
    color: black;
}

.list_icon {
    cursor: pointer;
}

.DateTimePickTable td {
    vertical-align: top;
}

.DateTimePickTable .Years {
    width: 4em;
}

.DateTimePickTable .Months {
    width: 4em;
}

.DateTimePickTable .Days {
    width: 25em;
}

.DateTimePickTable .Hours {
    width: 10em;
}

.DateTimePickTable .Minutes {
    width: 10em;
}

.PickTime .PickYear {
    padding: 0.5em;
}

    .PickTime .PickYear .Item {
        display: block;
    }

.PickTime .PickMonth {
    padding: 0.5em;
}

    .PickTime .PickMonth .Item {
        display: block;
    }

.PickTime .PickDay {
    padding: 0.5em;
}

    .PickTime .PickDay .Item {
        display: inline-block;
    }

.PickTime .PickHour {
    padding: 0.5em;
}

    .PickTime .PickHour .Item {
        display: inline-block;
        font-size: smaller;
    }

.PickTime .PickMinute {
    padding: 0.5em;
}

    .PickTime .PickMinute .Item {
        display: inline-block;
        font-size: smaller;
    }

.PickTime .Row {
    color: lightgrey;
}

    .PickTime .Row:hover {
        color: black;
    }

    .PickTime .Row:not(:last-child) {
        margin-bottom: 0.2em;
    }

.PickTime .Item {
    background-color: white;
    width: 2em;
    margin: 0px;
    text-align: center;
    cursor: pointer;
    border: 1px solid lightgrey;
    border-radius: 0.3em;
}

    .PickTime .Item.Disabled:not(.Hover) {
        background-color: lightgray;
        color: white;
        cursor: initial;
    }

    .PickTime .Item:hover {
        background-color: lightgreen;
    }

    .PickTime .Item:active {
        background-color: darkgreen;
        color: white;
    }

    .PickTime .Item.Selected {
        background-color: darkgreen;
        color: white;
    }

.PickTime .PickYear .Item {
    width: 4em;
}

.formrow_content .Button {
    padding: 0.3em;
    cursor: pointer;
    border: 2px solid #47525a;
    border-radius: 0.2em;
}

    .formrow_content .Button:hover {
        color: white;
        background-color: darkgreen;
    }

    .formrow_content .Button:active {
        background-color: lightgreen;
    }

.formrow_content {
    font-size: inherit;
}

.Icon {
    width: 1em;
}

    .Icon.Button {
        cursor: pointer;
        padding: 0.2em;
        border: 0;
        background: transparent;
        color: inherit;
    }

        .Icon.Button:hover {
            padding: 0.2em;
            border: 0;
            background: transparent;
            color: #23DC50;
        }

        .Icon.Button:active {
            color: #23DC50;
        }

.notification_dark {
    color: darkgreen;
}

.dialogContainer {
    height: auto;
    max-height: none;
}

.Hierarchy .Category .Title {
    font-weight: bold;
}

.Hierarchy .Category .Content {
    padding-left: 2em;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.Display.Amount {
    font-size: normal;
}

.TableAmount .fa {
    font-size: smaller;
    color: darkgray;
    white-space: nowrap;
}


/* header changes (Lex) */


.HeaderTable {
    font-size: inherit;
    background: #fff;
    width: auto;
    box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.15);
    height: 50px;
    z-index: 3; /* show on top of the menu (=2) */
    position: fixed;
    min-width: 100%;
    vertical-align: middle;
    overflow-y: hidden;
}

    .HeaderTable tbody,
    .HeaderTable tr {
        width: 100%;
        font-size: inherit;
    }

    .HeaderTable td img {
        height: 40px;
    }


.Logo {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    width: 250px;
    text-align: center;
}

    .Logo img {
        width: auto;
        height: auto;
        /* height: 40px; */
        max-height: 100%;
        /* margin: 0 auto; */
    }

div.Warning.environment {
    display: inline-block;
    height: 50px;
    margin: 0 10px 0 0;
    font-weight: bold;
    font-size: larger;
    vertical-align: middle;
}

.SubQuickLaunchContainer {
    display: inline-block;
    height: 50px;
    text-align: center;
    margin: 0 auto;
}

/* hide the quick-buttons when there is not enough space */
@media screen and (max-width: 800px) {
    .SubQuickLaunchContainer {
        display: none;
}
}

.InlineButton {
    padding: 0.2em;
    border-radius: 0.3em;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    border: 1px solid white;
}

    .InlineButton:hover {
        border: 1px solid black;
    }


/* groen: #23DC50 */

a,
a:link,
a:visited,
a:active {
    text-decoration: none;
    color: inherit;
}

    a:hover {
        text-decoration: underline;
    }

    a.Obvious {
        font-style: italic;
        color: #101010;
    }

th {
    text-align: left;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #4F672E;
    /*#23DC50*/
    vertical-align: top;
    line-height: 1.8em;
    text-decoration: none;
}


    /* let op: a:text vervangen door alleen a, want firefox herkent zo te zien a:text niet ... */

    th A,
    th A:link,
    th A:visited,
    th A:active {
        font-weight: bold;
        /*color: #FFFFFF;*/
        text-decoration: none;
        cursor: pointer;
    }

        th A:hover {
            text-decoration: underline;
            /*color: #FFFFFF;*/
        }

.error {
    font-weight: bold;
    color: #992222;
}

.error_dark {
    font-weight: normal;
    color: #992222;
    /*font-size: 8pt;*/
}

.warning_dark {
    font-weight: normal;
    background-color: #992222;
    color: white;
    padding: 1em;
}

/*.confirm {
font-weight: bold;
color: #229922;
}*/


.menu_table {
    width: 100%;
    height: 48px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.menu_bg {
    background-image: url(../images/lcs/menu_bg.gif);
    background-repeat: repeat-x;
    background-position: top left;
}

.menu_button {
    padding-left: 34px;
    padding-right: 34px;
    font-size: 16px;
    font-weight: bold;
}

    .menu_button A,
    .menu_button A:link,
    .menu_button A:visited,
    .menu_button A:active {
        color: #FFFFFF;
        text-decoration: none;
    }

        .menu_button A:hover {
            color: #424242;
            text-decoration: none;
        }

.menu_button_divider {
    border-left: 1px solid #6B8221;
    background-color: #D6E752;
}

.content {
    background-color: #F2F0E5;
}

.linkHeader_on A,
.linkHeader_on A:hover,
.linkHeader_on A:link,
.linkHeader_on A:visited,
.linkHeader_on A:active {
    color: #606060;
    font-weight: bold;
    /*font-size: 8pt;*/
}

.linkHeader_off {
    color: #808080;
    /*font-size: 8pt;*/
}

.linkHeader_divider {
    color: #CCCCCC;
    padding-left: 4px;
    padding-right: 4px;
    /*font-size: 8pt;*/
}

.PageHeader {
    color: #333F48;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica;
    /*font-size: 12pt;*/
    font-size: larger;
    text-align: left;
    padding-left: 0px;
}

.SubSection .PageHeader {
    /*font-size: 10pt;*/
    font-size: larger;
    padding-left: 0px;
}

.SubPageHeader {
    color: #8C8B86;
    font-size: initial;
    font-weight: normal;
}

.form_header {
    height: 20px;
    background-color: #fff;
}

.FormHeader {
    height: 20px;
    background-color: #8FC73E;
}

.FormTextField,
.textbox,
.FormPulldown,
select {
    /*background-color: white;
#C9C9C9;*/
    color: #414141;
    /*font-family: Verdana,Arial,Helvetica;
font-size: 8pt;*/
    border: 1px solid #A7A7A7;
    padding-left: 4px;
}

.container {
    background-color: #F5F5F5;
    /*font-family: Verdana,Arial,Helvetica;
font-size: 8pt;*/
    margin-bottom: 13px;
}

@media screen and (max-width: 1024px) {
    .container {
        font-size: 8pt;
    }
}

.container .row_odd .TDClickable:hover {
    background-color: #D08070;
    cursor: pointer;
}

.container .row_even .TDClickable:hover {
    background-color: #F09080;
    cursor: pointer;
}

.blackwhite {
    color: #505050;
}

.buttonbar_table {
    background-color: #333F48;
    height: 30px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.buttonbar_divider {
    color: #FFFFFF;
}

.buttonbar_button {
    font-family: Verdana, Arial, Helvetica;
    font-size: 8pt;
    vertical-align: middle;
    height: 30px;
}


    /* weggehaald (want FireFox herkent dit niet): .buttonbar_button A:text, */

    .buttonbar_button A,
    .buttonbar_button A:link,
    .buttonbar_button A:visited,
    .buttonbar_button A:active {
        color: #FFFFFF;
        text-decoration: none;
    }


/* vreemd: IE gebruiktt deze Hover (-->underline) niet. */

/*
.buttonbar_button A:hover
{
color : #FFFFFF;
text-decoration : underline;
}
*/

hr {
    color: #C9C9C9;
    width: 98%;
    height: 1px;
}

.row_odd {
    background-color: #F5F5F5;
    /*ECECEC*/
}

.row_even {
    background-color: #F5F5F5;
}

    .row_even td,
    .row_odd td {
        border-bottom: 1px solid #DDD;
        line-height: 1.5em;
    }

        .row_even td.CellTotal,
        .row_odd td.CellTotal {
            text-align: right;
            white-space: nowrap;
            border-top: 2px solid black;
            font-weight: bold;
        }

        .row_even td.ColumnTotal,
        .row_odd td.ColumnTotal {
            white-space: nowrap;
            border-left: 2px solid black;
            font-weight: bold;
        }

.row_odd.Alert {
    background-color: #A07070;
}

.row_even.Alert {
    background-color: #D08080;
}


/* Tabs */

.tab_table {
    margin-right: 2px;
    margin-left: 2px;
}

.tab_on {
    border-top: 2px solid #A7A7A7;
    border-left: 1px solid #A7A7A7;
    border-right: 1px solid #A7A7A7;
    padding: 3px;
    font-family: Verdana, Arial;
    font-size: 10px;
    color: #717171;
    font-weight: bold;
    background-color: #C9C9C9;
    text-decoration: none;
}

.tab_off {
    border-top: 2px solid #A7A7A7;
    border-left: 1px solid #A7A7A7;
    border-right: 1px solid #A7A7A7;
    padding: 3px;
    font-family: Verdana, Arial;
    font-weight: bold;
    background-color: #FFFFFF;
}


    /* weggehaald: .tab_off A:text, (vanwege FireFox) */

    .tab_off A,
    .tab_off A:link,
    .tab_off A:active,
    .tab_off A:visited,
    .tab_off A:hover {
        font-family: Verdana, Arial;
        /* font-size: 10px; */
        font-weight: bold;
        text-decoration: none;
        color: #717171;
    }

.tab_divider {
    width: 4px;
}

.tab_content_table {
    border: 1px solid #CBCBCB;
    background-color: #F1F1F1;
    padding: 4px;
}

.neg_credits {
    font-family: Verdana, Arial, Helvetica;
    font-size: 8pt;
    font-weight: bold;
    color: #EE0000;
}

.no_card {
    font-family: Verdana, Arial, Helvetica;
    font-size: 6pt;
    font-weight: bold;
    color: #880000;
}

.clickable {
    background-color: #FFFFFF;
    cursor: pointer;
    /* een handje */
}

.listemail {
    font-size: 7pt;
    font-weight: normal;
}

.listlogin {
    font-size: 7pt;
    font-weight: bold;
}

.listcarduser {
    font-size: 7pt;
    font-weight: normal;
}

.checkboxHidden {
    width: 16px;
    height: 16px;
    display: none;
    background-color: transparent;
}

.TopNavMenuOff {
    padding: 0 16px 0 16px;
    font-size: 16px;
    font-weight: bold;
    background-image: url(../images/lcs/separator_2x18.gif);
    background-repeat: no-repeat;
    background-position: right center;
}

    .TopNavMenuOff A,
    .TopNavMenuOff A:link,
    .TopNavMenuOff A:visited,
    .TopNavMenuOff A:active {
        color: #FFFFFF;
        text-decoration: none;
    }


/* let op: A:hover werkt niet, dat wordt in de on/off class gesimuleert van het javascriptmenu */

.TopNavMenuOn {
    padding: 0 16px 0 16px;
    font-size: 16px;
    font-weight: bold;
    background-image: url(../images/lcs/separator_2x18.gif);
    background-repeat: no-repeat;
    background-position: right center;
}

    .TopNavMenuOn A,
    .TopNavMenuOn A:link,
    .TopNavMenuOn A:visited,
    .TopNavMenuOn A:active {
        color: #000000;
        text-decoration: none;
    }

.footer,
.footer A,
.footer A:link,
.footer A:visited,
.footer A:active {
    font-size: 10px;
    font-weight: normal;
    /*font-family : Arial,Verdana;*/
    color: #8C8B86;
    padding: 20px;
}

.KeyPad * {
    color: #F0F0F0;
    font-size: 24px;
    font-family: Arial, Verdana;
    font-weight: bold;
}

.KeyPad TD {
    table-layout: fixed;
    /*width: 32px;*/
    /*height: 32px;*/
    text-align: center;
}


/*
Blauw:
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000066), to(#2020a6));
background: -moz-linear-gradient(#000066, #2020a6);
background: linear-gradient(#000066, #2020a6);
-pie-background: linear-gradient(#000066, #2020a6);

Rood:
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#660000), to(#a62020));
background: -moz-linear-gradient(#660000, #a62020);
background: linear-gradient(#660000, #a62020);
-pie-background: linear-gradient(#660000, #a62020);

Groen:
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006600), to(#20a620));
background: -moz-linear-gradient(#006600, #20a620);
background: linear-gradient(#006600, #20a620);
-pie-background: linear-gradient(#006600, #20a620);

*/

.KeyPadButton {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: 1px solid #888;
    background-color: #006600;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006600), to(#20a620));
    background: -moz-linear-gradient(#006600, #20a620);
    background: linear-gradient(#006600, #20a620);
    -pie-background: linear-gradient(#006600, #20a620);
    behavior: url(./PIE.htc);
}

.KeyPadButtonDel {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: 1px solid #888;
    background-color: #000066;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000066), to(#2020a6));
    background: -moz-linear-gradient(#000066, #2020a6);
    background: linear-gradient(#000066, #2020a6);
    -pie-background: linear-gradient(#000066, #2020a6);
    behavior: url(./PIE.htc);
}

.KeyPadButtonOk {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: 1px solid #888;
    background-color: #006600;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006600), to(#20a620));
    background: -moz-linear-gradient(#006600, #20a620);
    background: linear-gradient(#006600, #20a620);
    -pie-background: linear-gradient(#006600, #20a620);
    behavior: url(./PIE.htc);
}

.Formbutton {
    color: #A0A0A0;
    background-color: Transparent;
    font-weight: bold;
}

.FormbuttonClient {
    color: #D0D0D0;
    background-color: Transparent;
    font-weight: bold;
}

.paging_table {
    font-size: 10px;
    font-weight: bold;
}

.paging_tr {
    height: auto;
}

.paging_td_active {
    background-color: #23DC50;
    /*border : solid 1px #FFF;*/
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/icons/zoom_16x16.gif);
    font-weight: bold;
    color: #FFF;
    text-align: center;
}

.choice_list {
    background-color: #F5F5F5;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10pt;
    margin-top: 16px;
    margin-left: 16px;
    margin-bottom: 13px;
    margin-right: 10px;
    border: 1px solid black;
    padding: 10px;
}

.color_list {
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica;
    padding: 16px;
    border: 1px solid black;
}

.color_item {
    width: 200px;
    height: 16px;
    cursor: pointer;
    margin-top: 4px;
    margin-bottom: 4px;
}

.placement_list {
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica;
    font-size: 12px;
    padding: 8px;
    border: 1px solid black;
}

.placement_item {
    width: 200px;
    height: 16px;
    cursor: pointer;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 4px;
    padding-right: 4px;
}

.main_tab_content {
    border-top: 8px solid #23DC50;
    border-left: 1px solid #23DC50;
    border-right: 1px solid #23DC50;
    border-bottom: 1px solid #23DC50;
    padding-top: 4px;
    padding-left: 4px;
    padding-right: 4px;
}

.dropdowntable_list {
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica;
    font-size: 12px;
    padding: 4px;
    border: 1px solid black;
    overflow: auto;
    position: absolute;
}

.dropdowntable_result {
    cursor: pointer;
    border: 1px solid black;
    overflow: hidden;
}

.biginput {
    font-family: Verdana, Arial, Helvetica;
    font-size: 32px;
    padding: 0px;
    text-align: center;
}

.pick_body {
    border: 1px solid black;
    font-size: 10px;
    line-height: 2em;
    padding: 4px;
}

.pick_title {
    font-size: 12px;
    font-weight: bold;
    padding: 4px;
}

.header_login {
    color: #000000;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    padding-bottom: 30px;
}

.date_edit {
    background-color: #DDDDDD;
    cursor: pointer;
    border: 1px solid black;
    padding: 4px;
}

.date_edit_item.Selected {
    background-color: #FFFFFF;
}

.date_edit_item {
    padding: 0.3em;
    line-height: 12px;
    font-size: 12px;
    white-space: nowrap;
}

.date_edit_separator {
    border: 1px solid gray;
    margin-top: 4px;
    margin-bottom: 4px;
}

.date_edit_title {
    padding: 0.3em;
    line-height: 12px;
    font-size: 12px;
    white-space: nowrap;
}

.editable {
    border: 1px solid grey;
    width: 200px;
    height: 40px;
    cursor: pointer;
}

.container_default_header {
    color: #FFFFFF;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica;
    font-size: 12pt;
    margin-bottom: 10px;
}

.container_default_content_top {
    width: 100%;
    height: 16px;
    background-color: #94B65A;
}

.grid-table {
    width: 100%;
    border-collapse: collapse;
}

    .grid-table thead tr th {
        padding: 4px;
    }

    .grid-table tbody tr td {
        padding: 4px;
    }

.list_icon {
    width: 20px;
}

.SectionHeader {
    color: #FFFFFF;
    background-color: #94B65A;
    border-bottom: 2px solid #84964A;
    margin-top: 16px;
    margin-bottom: 0px;
    padding: 8px 2px 8px 2px;
    font-size: 14px;
    font-weight: bold;
}

.OrderDetails {
    border-top: 8px solid #BBB;
    border-bottom: 8px solid #BBB;
    border-left: 2px solid #BBB;
    border-right: 2px solid #BBB;
    padding: 0px;
    margin: 6px;
}

    .OrderDetails th {
        background-color: #AAA;
    }

    .OrderDetails .row_even {
        background-color: #DDD;
    }

    .OrderDetails .row_odd {
        background-color: #D8D8D8;
    }

    .OrderDetails .container {
        margin: 0px;
    }

.row_even.OrderHighlight {
    background-color: #DDD;
    /*font-weight: bold;*/
}

.row_odd.OrderHighlight {
    background-color: #D8D8D8;
    /*font-weight: bold;*/
}

.row_even.ErrorHighlight {
    background-color: #FFDCDC;
}

.row_odd.ErrorHighlight {
    background-color: #FFE1E1;
}

.Active {
    background-color: #00DD00;
    color: #000000;
}

.Inactive {
    background-color: #880000;
    color: #FFFFFF;
}

.HeaderUserInfo {
    color: #333F48;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    text-align: left;
}

    .HeaderUserInfo .Item {
        padding: 2px 6px 2px 6px;
        cursor: pointer;
    }

.HeaderLinks {
    color: #333F48;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    text-align: right;
}

    .HeaderLinks .Item {
        padding: 2px 6px 2px 6px;
    }

#zenbox_tab {
    border-left: 0px;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    background-color: #23DC50;
    background-image: url('./images/tab_nl_helpdesk_40x150.png');
    background-position: center;
    background-repeat: no-repeat;
    width: 40px;
    height: 150px;
}

    #zenbox_tab img {
        display: none;
    }

@media screen and (max-width: 1200px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }

    #zenbox_tab {
        top: 0px;
        width: 40px;
        height: 100px;
        position: absolute;
        background-image: url('./images/tab_nl_helpdesk_40x100.png');
    }

    .HeaderUserInfo {
        padding-left: 50px;
    }

    .linkHeader_table {
        padding-left: 50px;
    }

    .PageHeader {
        padding-left: 50px;
    }

    /* de dagrapportage heeft geen zenbox, maar wel een smal scherm. Vandaar deze class in de body... */
    body.PDF .PageHeader {
        padding-left: 0px;
    }
}

.ContainerSplit .SubContainer {
    display: table-cell;
    vertical-align: top;
}

.TabList .Item {
    cursor: pointer;
    line-height: 2em;
    padding-left: 4px;
    padding-right: 4px;
}

    .TabList .Item.Active {
        cursor: inherit;
        background-color: #FFFFFF;
        border: 1px solid green;
        border-radius: 3px;
    }

    .TabList .Item:hover {
        background-color: #A0A0A0;
    }

.ContainerHeader {
    color: #333F48;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11pt;
}

#toondisplay {
    width: 832px;
    height: 392px;
    background-color: gray;
    margin: 0;
    padding: 10px 0px 0px 10px;
    position: relative;
}

#expandabledisplay {
    width: 832px;
    height: 392px;
    max-width: 1500px;
    background-color: darkgray;
    overflow: hidden;
}

#toondisplay ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: relative;
}

#toondisplay .pitem .ui-resizable-se {
    display: none;
}

#menupage .ui-draggable-dragging {
    position: absolute;
    text-align: center;
    cursor: default;
    border: 1px solid #22b0da;
}

    #menupage .ui-draggable-dragging.text {
        position: relative;
        left: 50%;
        top: 60%;
        transform: translate(-50%, -40%);
    }

    #menupage .ui-draggable-dragging.price {
        position: relative;
        left: 50%;
        top: 35%;
        transform: translate(-50%, -35%);
    }

.pitem {
    position: absolute;
    cursor: default;
    display: block;
    /*width: 100%;*/
    overflow: hidden;
    transition: box-shadow .2s ease-in-out;
    cursor: move;
}

    .pitem:hover {
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
        box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    }

    .pitem.ui-draggable-dragging {
        border: 3px solid #22b0da !important;
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
        box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    }

    .no-touch .pitem span,
    .pitem.nohover span {
        visibility: hidden;
    }

.no-touch .pitem:not(.nohover):hover span {
    visibility: visible;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .pitem .fa.fa-paint-brush {
        width: 35px;
        height: 35px;
    }

    .pitem .fa.fa-times {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .pitem .fa.fa-paint-brush {
        width: 35px;
        height: 35px;
    }

    .pitem .fa.fa-times {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (min-device-width:321px) and (max-device-width: 1024px) {
    .pitem .fa.fa-paint-brush {
        width: 35px;
        height: 35px;
    }

    .pitem .fa.fa-times {
        width: 35px;
        height: 35px;
    }
}

.pitem .subs {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.subs .text {
    display: list-item;
    white-space: normal;
    line-height: 1em;
}

.subs .price {
    display: list-item;
}

.ui-helper-fade {
    opacity: 0.10;
    filter: alpha(opacity=10);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    z-index: 1;
}

.pitem.fade {
    opacity: 0.25;
    filter: alpha(opacity=25);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.pitem ui-icon-gripsmall-diagonal-se,
.pitem .fa.fa-chevron-down {
    right: 0px;
    bottom: 0px;
    font-size: 25px;
    position: absolute;
    cursor: se-resize;
    width: 25px;
    height: 25px;
}

.pitem .fa.fa-times {
    left: 2px;
    top: 0px;
    font-size: 25px;
    position: absolute;
    cursor: pointer;
    width: 25px;
    height: 25px;
}

.pitem .fa.fa-paint-brush {
    right: 2px;
    top: 2px;
    font-size: 25px;
    position: absolute;
    cursor: pointer;
    width: 25px;
    height: 25px;
    z-index: 2;
}

.pitem .fa.fa-check {
    left: 2px;
    bottom: 2px;
    font-size: 25px;
    position: absolute;
    cursor: default;
    width: 25px;
    height: 25px;
    z-index: 20;
}

#colorpicker li,
#mainselectie li {
    list-style-type: none;
    cursor: default;
    z-index: 10;
}

#mainselectie .kop2 {
    font-size: 15px;
    font-weight: 600;
}

.portlet-placeholder {
    /*border: 1px dotted black;*/
    height: 100px;
}


/*
.paging_table {
padding-left: 220px;
}*/

/*#frmForm {
width: 832px;
}*/

.selectiedisplay {
    padding-left: 2px;
}

.citem,
.coloritem {
    width: 30px;
    height: 30px;
}

#colorpicker {
    padding: 0px;
    margin: 0px;
}

#colordisplay {
    display: none;
}

#colorpicker ul {
    float: left;
    padding: 0px;
    margin: 0px;
}

    #colorpicker ul li ul {
        float: left;
        width: 210px;
    }

        #colorpicker ul li ul li {
            display: inline-block;
        }


/* PP: Waarom werd dit overruled? Vanwege dialog vensters die ik er beter uit wilde laten zien.
.ui-dialog-titlebar-close {
visibility: hidden;
background-image: none;
}

.ui-icon, .ui-menu-item, .ui-widget-content .ui-icon, .ui-widget-header .ui-state-default, .ui-widget-header,
.ui-widget-overlay {
background-image: none;
background: none;
}

.ui-icon, .ui-widget-content .ui-icon, .ui-widget-header .ui-state-default, .ui-widget-header, .ui-widget-content,
.ui-widget-overlay {
background-image: none;
}

.ui-dialog-title, .ui-dialog-titlebar {
background-color: rgb(204, 204, 204);
}
*/

.placer td,
.placer th,
.placer tr {
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}

.placer th {
    border-left: 1px solid;
}

.placer {
    overflow: hidden;
    background-color: darkgray;
    margin: 5px 0px 10px 0px;
}

.nextpage {
    height: 60px;
    width: 35px;
    border-radius: 40px 0px 0px 40px;
    -moz-border-radius: 40px 0px 0px 40px;
    -webkit-border-radius: 40px 0px 0px 40px;
    background-color: darkgray;
    position: absolute;
    top: 41%;
    right: 5px;
    text-align: center;
    border: 5px solid gray;
    z-index: 30;
}

.previouspage {
    height: 60px;
    width: 35px;
    border-radius: 0px 40px 40px 0px;
    -moz-border-radius: 0px 40px 40px 0px;
    -webkit-border-radius: 0px 40px 40px 0px;
    background-color: darkgray;
    position: absolute;
    top: 41%;
    left: 5px;
    text-align: center;
    border: 5px solid gray;
}

    .previouspage .fa.fa-angle-double-left {
        right: 15px;
        top: 17px;
        font-size: 25px;
        position: absolute;
        display: block;
        cursor: pointer;
        width: 25px;
        height: 25px;
    }

.nextpage .fa.fa-angle-double-right {
    right: 5px;
    top: 17px;
    font-size: 25px;
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.nextpage .fa.fa-plus {
    right: 6px;
    top: 20px;
    font-size: 20px;
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

#menupageTD {
    background-color: #F5F5F5;
    width: 150px;
}

#menupage {
    overflow-y: scroll;
    margin: 10px 0px 0px 0px;
}

#mainselectie {
    height: 432px;
    list-style-type: none;
    padding: 0px 20px 0px 10px;
    margin: 0px;
    min-width: 120px;
}

    #colorpicker li,
    #mainselectie li ul li,
    #mainselectie li {
        list-style-type: none;
        font-size: 8pt;
        font-weight: 400;
    }

.indelingTable {
    overflow: hidden;
    margin: 5px 0px 10px 0px;
}

#categorylist {
    width: 832px;
    position: relative;
    margin: 0px;
    padding: 0px;
    padding: 2px 2px 5px 2px;
    border: 3px solid gray;
    white-space: initial;
    background-color: darkgray;
}

    #categorylist div {
        list-style-type: none;
        padding: 0.2em 0.2em;
        display: inline-block;
    }

    #categorylist .kop2 {
        color: white;
    }

.ditem:hover {
    cursor: pointer;
}

#group {
    font-size: 8pt;
    padding: 5px 10px 0px 10px;
}

h2 {
    text-align: center;
}

.kop2 {
    font-size: 15px;
    font-weight: 600;
}

.languagePicker {
    float: right;
}

    .languagePicker div {
        float: left;
    }

    .languagePicker .flag-en {
        background-position: -132px -854px;
    }

.dull {
    opacity: 0.4;
    filter: alpha(opacity=40);
    /* msie */
}

.border {
    border: 2px solid Cyan;
}

.gridMLT {
    padding: 0px;
    margin: 0px;
}

    .gridMLT li {
        list-style-type: none;
    }

    .gridMLT .odd {
        background-color: #ECECEC;
    }

    .gridMLT .flag {
        margin: 0px 10px 0px 5px;
    }

.textboxMLT.flagMLT {
    margin-left: 10px;
}

.PageHeader .gridMLT li {
    display: inline;
    margin-right: 10px;
}

.PageHeader .gridMLT .flag {
    margin: 0px;
}

.infotext {
    font-size: 8pt;
    font-weight: 400;
}

.normal {
    background-color: #F2F0E5;
}

#imageUploader {
    position: relative;
    width: 100%;
}

    #imageUploader .fa {
        color: gray;
    }

.fileinputs {
    float: left;
    margin-top: 5px;
    /*height:65px;*/
}

.progress {
    float: left;
    height: 20px;
    width: 350px;
}

    .progress.small {
        display: none;
    }

.progress-bar {
    background-color: gray;
    height: 20px;
    width: 0%;
}

#fileupload {
    display: none;
    height: 0px;
    width: 0px;
}

.foldercreate {
    cursor: pointer;
    float: left;
    position: relative;
}

    .foldercreate.small {
        width: 64px;
    }

        .foldercreate.small .fa-folder-o {
            font-size: 4em;
            position: absolute;
            top: -5px;
        }

    .foldercreate .fa-folder-o {
        font-size: 7em;
    }

#imageUploader .fa-plus {
    font-size: 1em;
    position: absolute;
    left: 7px;
    top: 12px;
    color: #23DC50;
}

#imageUploader .small .fa-plus {
    font-size: 0.6em;
    left: 5px;
    top: 5px;
}

.fileupload.small .fa.fa-file-o {
    font-size: 3em;
}

.fileupload .fa.fa-file-o {
    font-size: 5.9em;
    position: relative;
}

.fileupload.small .fa-camera {
    font-size: 1.5em;
    left: 5px;
    top: 12px;
}

.fileupload .fa-camera {
    font-size: 3em;
    position: absolute;
    left: 12px;
    top: 34px;
}

#imageOverview,
#videoOverview,
#newsOverview {
    clear: both;
}

.fileinputs .fa {
    color: gray;
}

.imagecontainer,
.videocontainer,
.newscontainer {
    border: 1px solid black;
    position: relative;
    height: 365px;
    overflow-y: scroll;
    padding: 0px;
    margin-top: 0px;
}

    .imagecontainer.small {
        width: 290px;
        height: 126px;
    }

    .videocontainer.small {
        width: 335px;
        height: 260px;
    }

    .newscontainer.small {
        width: 335px;
        height: 260px;
    }

#videopopup,
#imagepopup,
#newspopup,
#colorpopup {
    padding: 0px;
    overflow: hidden;
}

.imagepopup li {
    width: 50px;
    height: 50px;
}

.imagecontainer.small li {
    width: 50px;
    padding: 2px;
}

.videocontainer.small li {
    width: 100px;
    height: 80px;
    padding: 2px;
}

.news .newsheader {
    background-color: gray;
    border-bottom: 1px solid black;
    height: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.videocontainer.small li .duration {
    color: white;
    position: absolute;
    left: 2px;
    top: 2px;
}

.videocontainer.small .videoimg {
    background-color: black;
    text-align: center;
}

.videocontainer.small img {
    max-width: 100px;
    max-height: 56px;
}

.imagecontainer li,
.video {
    list-style-type: none;
    float: left;
    width: 150px;
    padding: 4px;
    position: relative;
}

.news {
    width: 100px;
    height: 100px;
    margin: 2px;
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    position: relative;
    list-style-type: none;
    float: left;
    border: 1px solid black;
}

.video {
    border: 1px solid black;
    font-size: 8pt;
}

.imagecontainer li span {
    visibility: hidden;
}

.imagecontainer li:hover span {
    visibility: visible;
}

.image .fa-times {
    left: 1px;
    top: 0px;
    font-size: 2em;
    position: absolute;
    cursor: pointer;
    width: 1em;
    height: 1em;
}

.small .image .fa-times {
    left: 1px;
    top: 0px;
    font-size: 0.5em;
    width: 0.5em;
    height: 0.5em;
}

.image .fa-circle {
    left: 0px;
    top: 0px;
    font-size: 2em;
    position: absolute;
    cursor: pointer;
    width: 1em;
    height: 1em;
    color: white;
}

.small .image .fa-circle {
    left: 0px;
    top: 0px;
    font-size: 0.6em;
    width: 0.6em;
    height: 0.6em;
}

.header {
    background-color: #fff;
    font-size: 8pt;
    color: white;
    font-weight: bold;
    width: 100vw;
    height: 21px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.imagecontainer .folder {
    position: relative;
    width: 150px;
    height: 112px;
}

.imagecontainer.small .folder {
    width: 50px;
    height: 38px;
    font-size: 11px;
}

.imagecontainer .folder {
    position: relative;
    width: 150px;
    height: 112px;
}

.imagecontainer.small .folder {
    width: 50px;
    height: 38px;
    font-size: 11px;
}

.Tabbed {
    border-top: none;
    padding-top: 8px;
}

.folder .fa {
    position: absolute;
    color: gray;
}

.imagecontainer .fa-folder {
    top: -5px;
    left: 15px;
    font-size: 13em;
    color: GoldenRod;
    cursor: default;
}

.imagecontainer.small .fa-folder {
    font-size: 4.5em;
    top: -4px;
    left: 0px;
    cursor: default;
}

.folder .fa-level-up {
    bottom: 10px;
    right: 20px;
    font-size: 3em;
}

.small .folder .fa-level-up {
    left: 24px;
    font-size: 2em;
}

.folder .fa-pencil-square-o {
    top: 3px;
    left: 80px;
    font-size: 1.3em;
    cursor: pointer;
}

.small .folder .fa-pencil-square-o {
    left: 26px;
    font-size: 1em;
    top: -2px;
}

.folder .fa-times {
    top: 3px;
    left: 108px;
    font-size: 1.3em;
    cursor: pointer;
}

.small .folder .fa-times {
    top: -3px;
    left: 38px;
    font-size: 1em;
}

.folder div {
    position: absolute;
    width: 60px;
    top: 35px;
    left: 20px;
    cursor: default;
    white-space: normal;
}

.small .folder div {
    width: 45px;
    top: 10px;
    left: 3px;
    font-size: 10px;
    word-wrap: break-word;
}

#breadcrumb {
    position: relative;
}

    #breadcrumb li {
        list-style-type: none;
        float: left;
        margin-right: 4px;
        cursor: pointer;
    }

        #breadcrumb li:after {
            content: " > ";
        }

        #breadcrumb li:last-child:after {
            content: "";
        }

#sortedproducts {
    width: 280px;
    background-color: #F5F5F5;
}

    #sortedproducts ul {
        width: 100%;
        min-height: 250px;
        padding: 10px 0px 10px 10px;
    }

.no-touch #sortedproducts li span {
    visibility: hidden;
}

.no-touch #sortedproducts li:hover span {
    visibility: visible;
}

#sortedproducts li .fa-times {
    position: absolute;
    left: 0px;
    top: 2px;
    font-size: 12px;
    cursor: pointer;
}

#screenproducts .kop2 {
    font-size: 15px;
    font-weight: bold;
}

#screenproducts {
    padding: 0px 0px 0px 10px;
}

    #screenproducts li ul li,
    #screenproducts li {
        font-size: 8pt;
        font-weight: normal;
    }

    #sortedproducts li,
    #screenproducts .ui-draggable-dragging {
        list-style-type: none;
        width: 260px;
        display: block;
        height: 19px;
        margin-bottom: 3px;
        border: 1px solid black;
        background-color: #F2F0E5;
        font-size: 16px;
        position: relative;
    }

#sortedproducts .ui-sortable-placeholder {
    background: #22b0da;
    visibility: visible !important;
    border: none;
}

#sortedproducts .ui-sortable-helper {
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    border: 2px solid #22b0da;
    border
}

#sortedproducts li {
    list-style-type: none;
    cursor: default;
}

#sortedproducts div.text,
#screenproducts .ui-draggable-dragging div.text {
    float: left;
    padding-left: 10px;
}

#sortedproducts .priceamount,
#sortedproducts .pricesymbol,
#screenproducts .ui-draggable-dragging .priceamount,
#screenproducts .ui-draggable-dragging .pricesymbol {
    float: right;
}

iframe {
    padding: 0;
    margin: 0;
}

.ui-widget-content {
    background-color: #f5f5f5;
    background-image: none;
}

.bannergrid ul,
.mediagrid ul {
    padding: 0px;
    margin: 4px 0px 0px 0px;
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.bannergrid li,
.mediagrid li {
    list-style-type: none;
    display: table-row;
}

.bannergrid #gridheader,
.mediagrid #gridheader {
    height: 21px;
}

.bannergrid li div,
.mediagrid li div {
    float: left;
    display: table-cell;
    margin-left: 4px;
}

.bannergrid li[data-id] div.txt,
.mediagrid li[data-id] div.txt {
    margin-top: 4px;
    height: 30px;
    overflow: hidden;
}

.bannergrid li div.txt,
.mediagrid li div.txt,
#gridheader div {
    width: 10%;
}

.bannergrid li div.title,
.mediagrid li div.title {
    width: 200px;
}

.bannergrid #buttonbar_table,
.mediagrid #buttonbar_table {
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #333F48;
    height: 30px;
}

.bannergrid li:first-child,
.mediagrid li:first-child {
    text-align: left;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #23DC50;
    vertical-align: top;
    font-size: 8pt;
    text-decoration: none;
}

.bannergrid #editHead,
.bannergrid #deleteHead,
.mediagrid #editHead,
.mediagrid #deleteHead {
    width: 24px;
}

.bannergrid .icon,
.mediagrid .icon {
    margin: 4px;
}

#addbanner .button_text,
#addmedia .button_text {
    text-align: left;
    vertical-align: middle;
    padding-left: 15px;
    cursor: pointer;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica;
    font-size: 8pt;
    width: 100px;
}

.bannergrid #addbanner,
.mediagrid #addmedia {
    float: right;
    width: 120px;
    padding-top: 5px;
}

.mediaselector ul {
    position: relative;
    height: 62px;
    padding: 0px;
}

.mediaselector li {
    list-style-type: none;
    display: block;
    float: left;
    width: 105px;
    height: 62px;
    border: 1px solid black;
}

.clear {
    clear: both;
}

.newspopup .fa-newspaper-o {
    font-size: 6.5em;
    padding-left: 10px;
}

.imagepopup {
    padding-left: 10px;
    width: 70px;
    padding-left: 30px;
}

    .imagepopup .fa.fa-file-o {
        font-size: 5.6em;
        position: relative;
    }

    .imagepopup .fa-camera {
        font-size: 0.5em;
        position: absolute;
        left: 12px;
        top: 25px;
    }

.MediaAdder label {
    float: left;
    width: 120px;
}

.MediaAdder input {
    width: 180px;
    margin-bottom: 5px;
}

.MediaAdder #psl_duration {
    width: 140px;
}

.MediaAdder .input {
    float: left;
}

.timerelements .content {
    display: none;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
    position: relative;
    left: 90px;
    top: -8px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    position: relative;
    left: 90px;
    top: -8px;
}

.emptyBannerGridItem,
.emptyMediaGridItem {
    /*border: 1px solid black;*/
    height: 49px;
    width: 100%;
    float: left;
    background-color: #DCDCDC;
}

.notificationItem {
    position: fixed;
    background-color: #FFF;
    width: 100vw;
    max-width: 99.8%;
    font-size: 16px;
    border-bottom: 1px solid #888888;
    box-shadow: 0px 10px 10px #d0d0d0;
}

.notificationSubject {
    font-weight: bold;
    text-align: left;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    padding: 10px;
    white-space: normal;
    margin: 0 10px 0 0;
}

.notificationCloseBtn {
    float: right;
}

    .notificationCloseBtn .fa {
        color: white;
        font-size: larger;
        vertical-align: top;
    }

.notificationBody {
    margin: 0px 30px 0px 30px;
    font-size: 12pt;
    padding: 10px;
}

    .notificationBody a {
        color: #23DC50;
    }

.Stacked {
    margin-top: 20px;
}

    .Stacked #breadcrumb .fa-camera {
        margin-left: 4px;
    }

.mediagrid .preview {
    margin: 0px;
}

.preview .news {
    width: 90px;
    height: 30px;
    position: relative;
    font-size: 6px;
    margin: 0px;
}

    .preview .news .newsheader {
        height: 8px;
        width: 90px;
        margin: 0px;
        -webkit-line-clamp: 1;
    }

    .preview .news .newscontent {
        width: 90px;
        margin: 0px;
        -webkit-line-clamp: 2;
    }

#td_template div {
    margin-bottom: 20px;
}

.preview .imagefolder {
    position: relative;
    color: gray;
    height: 30px;
}

.preview .fa-folder-o {
    font-size: 3em;
    position: absolute;
    top: -6px;
}

.preview .fa-camera {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.3em;
}

.templateSelect {
    float: left;
    margin-left: 5px;
}

    .templateSelect .long {
        height: 200px;
    }

    .templateSelect .short {
        height: 150px;
    }

.colorselector {
    border: 1px solid black;
    cursor: pointer;
    float: left;
    width: 20px;
    height: 20px;
}

.TabSeparator {
    height: 8px;
    background-color: #23DC50;
}

.background-selector input[name=rbbackground] {
    margin: 0;
    padding-right: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: none;
}

.background-selector .bkg {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    height: 58px;
    opacity: 0.50;
}

    .background-selector .bkg:hover {
        opacity: 1.00;
    }

.background-selector .default {
    background-image: url(../images/pricelist/background-small.jpg);
}

.background-selector .blue {
    background-image: url(../images/pricelist/blue-background-small.jpg);
}

.background-selector .green {
    background-image: url(../images/pricelist/green-background-small.jpg);
}

.background-selector .knip {
    background-image: url(../images/pricelist/knip-background-small.jpg);
}

.background-selector .grad {
    background-image: url(../images/pricelist/gradient-background-small.jpg);
}

.background-selector .twlv {
    background-image: url(../images/pricelist/twelve-background-small.jpg);
}

.background-selector input:checked + .bkg {
    opacity: 1;
    border: solid 2px lightblue;
}

.background-selector input:active + .bkg {
    opacity: 0.50;
    border: 0;
}


/* lcsmenu */

.MenuContainer1 {
}

.MenuContainer {
    height: 100%;
    /* 100% Full-height - top bar 50px*/
    width: auto;
    position: fixed;
    padding-top: 50px;
    /* Stay in place */
    z-index: 2; /* hide under the header-line */
    background-color: #36404a;
    overflow: visible;
}

.ContentContainer {
    vertical-align: top;
}

.ui-menu .ui-menu-divider {
    display: none;
}

.ui-menu {
    -ms-user-select: none;
    user-select: none;
    padding: 4px 5px 4px 5px;
    font-family: Verdana, Arial;
    /*font-size: 10px;*/
    font-size: smaller;
    z-index: 99;
}

    .ui-menu,
    .ui-menu A,
    .ui-menu A:link,
    .ui-menu A:active,
    .ui-menu A:visited,
    .ui-menu A:hover,
    .ui-menu .ui-menu-item a.ui-state-active,
    .ui-menu .ui-menu-item a.ui-state-focus {
        font-family: Verdana, Arial;
        /*font-size: 10px;*/
        font-weight: bold;
        text-decoration: none;
        color: #717171;
    }

        .ui-menu .ui-menu-item A,
        .ui-menu .ui-menu-item span {
            display: block;
            line-height: 1.5em;
            padding: 6px;
        }

        .ui-menu.Level1 .ui-menu-item {
            border-radius: 0px;
            /*padding: 4px;*/
            border: none;
        }

        .ui-menu.Level0 {
            background-color: transparent;
            border: none;
            padding: 0px;
            font-size: smaller;
            border-radius: 3px;
        }

        .ui-menu.Level1 {
            display: block;
            background-color: #F0F0F0;
            border-radius: 3px;
            /*padding: 4px;*/
            font-size: inherit;
        }

        .ui-menu.Level2 {
            display: inline-block;
            background-color: #F0F0F0;
            border-radius: 3px;
            /*padding: 4px;*/
            font-size: inherit;
        }

        .ui-menu .ui-menu-item {
            display: block;
            width: auto;
            cursor: pointer;
            margin-left: 1px;
            margin-right: 1px;
            white-space: nowrap;
            background-color: #FFFFFF;
            /*border-top: 2px solid #A7A7A7;
border-left: 1px solid #A7A7A7;
border-right: 1px solid #A7A7A7;*/
            /*border-bottom: 1px solid #A7A7A7;*/
            /*padding: 2px;*/
            font-weight: bold;
        }

            .ui-menu .ui-menu-item.PartOfPath {
                font-family: Verdana, Arial;
                /*font-size: 10px;*/
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                color: #717171;
                font-weight: bold;
                background-color: #C9C9C9;
                text-decoration: none;
            }

            .ui-menu .ui-menu-item .ui-menu .ui-menu-item {
                font-weight: normal;
                display: block;
                width: auto;
            }

li.ui-menu-item:hover {
    background-color: #e8e8e8;
}

.MenuIcon {
    width: 1.5em;
}

.QuickLinks {
    display: inline-block;
    font-family: Verdana, Arial;
    font-size: 1.2em;
    background-color: transparent;
    margin-top: 4px;
    /*border-top: 2px solid #A7A7A7;
border-left: 1px solid #A7A7A7;
border-right: 1px solid #A7A7A7;*/
}

    .QuickLinks .Item,
    .QuickLinks .Item a {
        display: inline-block;
        padding: 3px;
        white-space: nowrap;
        color: #999;
        /*border-bottom: 1px solid #A7A7A7;*/
    }

    .QuickLinks .Button .fa.fa-plus {
        color: #566676;
    }

    .QuickLinks .Item a.Button:hover .fa.fa-plus {
        color: #fff;
    }


/* NIEUWE SKIN */

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: Verdana, Arial, Helvetica;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    /*separate*/
    border-spacing: 0;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}


/***** Site changes ****/

/* HTML elements */

* {
    transition: background .2s;
    /* color .2s, background .2s, border .2s; */
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 0.5px;
    font-size: inherit;
    color: inherit;
    box-sizing: border-box;
    line-height: 1.3em;
}

body {
    color: #3c3c3c;
    /*#797979*/
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #ebeff2;
    margin: 0;
    letter-spacing: 0.5px;
}

td,
th,
.placer th,
.formrow_header,
.form_header {
    padding: 0.5em 5px;
    /*0.8em*/
    background: inherit;
    font-size: inherit;
    line-height: 1.5em;
}

th,
.placer th,
.formrow_header,
.form_header {
    color: inherit;
    border: 0;
    border-bottom: 2px solid #000;
    background: #fff;
    line-height: inherit;
    padding-top: 1.5em;
    padding-bottom: 0.5em;
    /* position: absolute; */
    word-wrap: break-word;
    white-space: pre-line;
}

.placer .ui-draggable {
    /*padding: 10px 0; 22 mei 2017*/
    cursor: move;
}

    .placer .ui-draggable:hover {
        background: #fff;
    }

a {
    color: #23DC50;
}


/* 'General Changes reporting for duty sir' -General Changes */

th A,
th A:link,
th A:visited,
th A:active {
    color: inherit;
}

th[onclick]:hover {
    color: #23DC50;
}

th[onclick].headerSortDown:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    position: relative;
    top: 10px;
    margin: 0 0 0 10px;
}

th[onclick].headerSortUp:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
    position: relative;
    top: -10px;
    margin: 0 0 0 10px;
}

.Tabbed {
    border: 0;
}

.listcarduser,
.neg_credits,
.buttonbar_button,
.listemail {
    font-size: inherit;
}

.FormTextField,
.textbox,
.FormPulldown,
select,
input[type=text],
input[type=textbox],
input[type=file],
textarea,
.ui-dialog-content input {
    background: #fff;
    padding: 0.5em;
    border: 1px solid #E3E3E3;
    /* IE9+ */
    border-radius: 5px;
}

    .FormTextField:hover,
    .textbox:hover,
    .FormPulldown:hover,
    select:hover,
    .ui-dialog-content input:hover {
        border: 1px solid #ccc;
    }

        select:hover option[selected="selected"] {
            color: #fff;
        }

    .FormTextField:focus,
    .textbox:focus,
    .FormPulldown:focus,
    select:focus,
    .ui-dialog-content input:focus {
        border: 1px solid #AAAAAA;
    }

.select2-container .select2-choice > .select2-chosen {
    margin-right: 26px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: none;
    width: auto;
    line-height: 26px;
}

.select2-container .select2-choice abbr {
    top: 5px;
}

td.SideFilter {
    width: 315px;
    box-sizing: border-box;
    border-right: solid 3px #DDD !important;
    padding: 0 20px 0 10px
}

    td.SideFilter .row_even td,
    td.SideFilter .row_odd td,
    td.SideFilter .container tr,
    td.SideFilter .row_even,
    td.SideFilter .row_odd,
    td.SideFilter #table_frmForm tr,
    td.SideFilter .container tr:hover,
    td.SideFilter .row_even:hover,
    td.SideFilter .row_odd:hover,
    td.SideFilter #table_frmForm tr:hover {
        border-bottom: none;
        background: none !important;
        padding: 5px 0px;
    }

    td.SideFilter input, td.SideFilter select {
        width: 100%;
    }

        td.SideFilter select[name="filter_ageOperator"],
        td.SideFilter input[name="filter_ageValue"],
        td.SideFilter select[name="filter_creditsOperator"],
        td.SideFilter input[name="filter_creditsAmount"],
        td.SideFilter select[name="filter_limitOperator"],
        td.SideFilter input[name="filter_limitAmount"],
        td.SideFilter select[name="filter_dateOperator"] {
            width: auto;
        }

.SideFilterResults {
    padding-left: 20px
}

.EditArea input[type="text"] {
    width: 100%;
    color: inherit;
    color: #414141;
    margin: 5px 0;
}

.content,
.container {
    background: transparent;
    font-size: inherit;
}

.content {
    height: 100%;
    display: block;
    position: relative;
}

    .content::after {
        content: "";
        display: table;
        clear: both;
    }

.container_default {
    position: relative;
    z-index: 0;
}

.content > table + table + table {
    margin: 0 0 140px 0;
}

.container tr,
.row_even,
.row_odd,
#table_frmForm tr {
    background: inherit;
    border-bottom: 1px solid #DDD;
}

    .container tr:hover,
    .row_even:hover,
    .row_odd:hover,
    #table_frmForm tr:hover {
        background: #f1f1f1 !important;
        z-index: 0;
    }

.container_default .SubContainer.First {
    margin-top: 0px;
}

#strSearchOptions_Main .AdvancedFilter {
    display: none;
}

.AdvancedFilterCount {
    background-color: #f1f1f1;
    padding: 0.4em;
    border-radius: 0.2em;
}

.PageContentContainer {
    background: #fff;
    border-radius: 5px;
    margin: 1em 0;
    display: inline-block;
    min-width: 100%;
}

    .PageContentContainer .container_default {
        float: none;
        padding: 0;
    }

.form_table tr:not(:last-child) .formrow_label,
.body.label {
    min-width: 0;
    vertical-align: top;
}



.right {
    height: 50px;
    float: right;
}



ul#UserProfileMenu .ui-menu-item {
    margin: auto;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-user-select: none;
    padding: 0 15px;
    cursor: pointer;
    height: 50px;
    float: left;
}

.QuickLinks {
    display: inline-block;
    /*display: none;*/
    font-family: Verdana, Arial;
    background: transparent;
    margin-top: 0;
    /*border-top: 2px solid #A7A7A7;
border-left: 1px solid #A7A7A7;
border-right: 1px solid #A7A7A7;*/
}

    .QuickLinks .Item a {
        white-space: nowrap;
        color: #566676;
        height: 50px;
        vertical-align: middle;
        white-space: nowrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-user-select: none;
        padding: 0 15px;
        min-width: 50px;
        text-align: center;
    }

        .QuickLinks .Item a .fa {
            margin: 0 auto;
        }

    .QuickLinks .Item {
        padding: 0;
        display: block;
        float: left;
    }

        .QuickLinks .Item a.Button {
            background: none;
            border-radius: 0;
            color: #566676;
            padding: 0 15px;
            border: none;
        }

ul#UserProfileMenu .ui-menu-item i.fa {
    font-size: 24px;
    color: #566676;
    padding: 13px;
}

.QuickLinks .Item a.Button:hover,
.QuickLinks .Item a:hover,
ul#UserProfileMenu .ui-menu-item:hover {
    text-decoration: none;
    background: #566676;
    color: #fff;
    border: none;
}

    ul#UserProfileMenu .ui-menu-item:hover i.fa {
        color: #fff;
        font-size: 24px;
        padding: 13px;
    }

ul#UserProfileMenu .ui-menu-item a {
    padding: 0;
    margin: 0;
}

ul#UserProfileMenu .ui-menu-item {
    min-width: 50px;
    display: block;
    padding: 0;
    cursor: pointer;
    color: #566676;
    text-align: center;
}

    ul#UserProfileMenu .ui-menu-item:hover {
        color: #566676;
    }

    ul#UserProfileMenu .ui-menu-item .Level1 i.fa {
        color: #cbd2d6;
        padding: 0;
        font-size: 18px;
    }

    ul#UserProfileMenu .ui-menu-item .Level1 .ui-menu-item {
        color: #cbd2d6;
        font-size: 16px;
    }

        ul#UserProfileMenu .ui-menu-item .Level1 .ui-menu-item:hover,
        ul#UserProfileMenu .ui-menu-item .Level1 .ui-menu-item:hover i.fa {
            color: #fff;
        }

    ul#UserProfileMenu .ui-menu-item .Level1 .ui-menu-item {
        width: 100%;
        text-align: left;
        padding: 5px 10px;
        height: auto;
    }

    ul#UserProfileMenu .ui-menu-item .ui-menu.Level1 {
        padding: 10px 0;
        background: #414d59;
    }


/* content */

.MiddleTable {
    display: block;
    /*white-space: nowrap; do not use this because of the submenu*/
}

    .MiddleTable .ContentContainer1 {
        float: left;
        min-width: 100%;
        box-sizing: border-box;
        padding: 50px 15px 0 265px;
    }

.SubMenuContainer {
    position: sticky;
    top: 50px;
    z-index: 1;
}

.MiddleTable.Hidden .ContentContainer1 {
    padding-left: 85px;
}

.MiddleTable.Hidden .container_default .container_default {
    padding-left: 0;
}

.form_table {
    background: transparent;
    padding: 1em;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
}

.error {
    padding: 1em;
    background: #ffd0d0;
    border: 2px solid #ffd0d0;
    border-radius: 5px;
    font-weight: bold;
    color: #992222;
    font-size: inherit;
}

.confirm {
    padding: 1em;
    background: #abedab;
    border: 2px solid #abedab;
    border-radius: 5px;
    font-weight: bold;
    color: #1b7e1b;
    font-size: inherit;
}

.PickList td {
    min-width: 370px;
}

.TabContainer {
    background: #f4f8fb;
    /* #ebeff2 */
}

.tab_table * {
    padding: 0;
}

.tab_on {
    cursor: pointer;
    border: 0;
    font-size: inherit;
    font-weight: bold;
    font-family: Verdana, Arial;
    color: #23DC50;
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 0.03em;
}

.tab_off {
    cursor: pointer;
    border: 0;
    font-size: inherit;
    font-weight: bold;
    font-family: Verdana, Arial;
    background: transparent;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 0.03em;
}

    .tab_off A,
    .tab_off A:link,
    .tab_off A:active,
    .tab_off A:visited {
        border: 0;
        color: inherit;
        background-color: transparent;
        /*line-height: 50px;
        padding-left: 20px;
        padding-right: 20px;
        letter-spacing: 0.03em;*/
        display: block;
    }

        .tab_off A:hover {
            color: #23DC50;
        }

.tab_table {
    margin: 0;
}

    .tab_table .tab_divider {
        display: none;
    }

.ButtonBar .Divider,
.Divider {
    display: none;
}

.grid-table tbody tr td {
    /*
padding: 5px 8px;
vertical-align: top;
line-height: 20px;
white-space: normal;
*/
    padding: 5px 8px;
    vertical-align: top;
    line-height: 20px;
    white-space: normal;
    padding: 0.5em 0.8em;
    background: inherit;
    font-size: inherit;
    line-height: 1.5em;
}

.grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: inherit;
}

    .grid-table thead tr th {
        padding: 4px 8px;
    }

    .grid-table tfoot {
        border-top: 2px solid black;
        font-weight: bold;
        text-align: right;
        white-space: nowrap;
        background: transparent;
    }

        .grid-table tfoot tr td {
            padding: 8px;
        }

.list_icon {
    width: 20px;
}

.TerminalCategoryBlock {
    display: inline-block;
}


.GridBlock {
    /*float: left;*/
    min-width: 300px;
    max-width: 1100px;
    display: inline-flex;
    flex-wrap: wrap;
    margin: 5px;
    box-sizing: border-box;
}

    /*    .GridBlock:nth-child(1) {
        max-width: 400px;
    }

    .GridBlock:nth-child(2) {
        width: 250px;
        padding: 0 0.5em;
    }
*/
    .GridBlock .TerminalName {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 270px;
    }

    .GridBlock.Active,
    .GridBlock.Mixed,
    .GridBlock.Inactive {
        background-color: inherit;
        color: #000000;
        box-sizing: border-box;
    }


    .GridBlock .GridHeader {
        display: block;
        font-size: inherit;
        padding: 0.5em;
        margin: 0 0 5px 0;
        background: #fff;
        border: 0;
        color: inherit;
        border-bottom: 2px solid #000;
        column-span: all;
        font-weight: bold;
    }

    .GridBlock .TerminalBlock {
        display: grid;
        grid-template-areas: "vtname vtname vtname vtname vtname""tname tname tname stars stars""time date version version version""load load load load load";
        box-sizing: border-box;
        padding: 0.5em;
        margin: 0.5em;
        border: 0;
        min-width: 250px;
        min-height: 88px;
        font-size: 12px;
        break-inside: avoid;
        /*float: left;*/
    }



        .GridBlock .TerminalBlock .TerminalVersionNumber {
            grid-area: version;
            font-size: 10px;
            text-align: right;
        }

        .GridBlock .TerminalBlock .TerminalName {
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 11px;
            grid-area: tname;
            font-weight: bold;
            line-height: 15px;
        }

        .GridBlock .TerminalBlock .VirtualTerminalName {
            font-weight: normal;
            white-space: pre-wrap;
            font-size: 12px;
            font-weight: bold;
            grid-area: vtname;
            box-sizing: border-box;
            text-transform: uppercase;
            min-height: 35px;
            padding-bottom: 5px;
        }

        /*laatst sync*/
        .GridBlock .TerminalBlock .Time {
            font-size: 10px;
            grid-area: time;
            white-space: nowrap;
        }

        /*laatst sync*/
        .GridBlock .TerminalBlock .Date {
            font-size: 10px;
            grid-area: date;
            padding: 0 0 0 3px;
            white-space: nowrap;
        }

        .GridBlock .TerminalBlock .stars {
            grid-area: stars;
            text-align: right;
            white-space: nowrap;
        }

        .GridBlock .TerminalBlock.Active,
        .GridBlock tr.Active {
            background-color: #23DC50;
            color: #000000;
        }

        .GridBlock .TerminalBlock.Inactive,
        .GridBlock tr.Inactive {
            background-color: #ffd0d0;
            color: #000;
        }

        .GridBlock .TerminalBlock.Mixed,
        .GridBlock tr.Mixed {
            background-color: #FF8800;
            color: #000000;
        }

        /*laatst aangemeld*/
        .GridBlock .TerminalBlock .Load {
            grid-area: load;
            font-size: 10px;
            text-align: left;
            line-height: normal;
        }

    .GridBlock .TerminalDeviceID {
        font-size: 10px;
        grid-area: terDevID;
    }

    .GridBlock .IpAddress {
        font-size: 10px;
        grid-area: terIP;
            text-align: right;
        }

    .GridBlock .Battery {
        font-size: 12px;
        grid-area: terBattery;
        text-align: right;
}

.TerminalPage .TerminalCategoryBlock .GridBlock .TerminalBlock {
    grid-template-areas: "tname tname tname tname terBattery" "terDevID terDevID terDevID stars stars" "time date version version version" "load load load terIP terIP";
}

.TerminalPage .TerminalCategoryBlock .GridBlock .TerminalName {
    font-weight: normal;
    white-space: pre-wrap;
    font-size: 12px;
    font-weight: bold;
    grid-area: tname;
    box-sizing: border-box;
    text-transform: uppercase;
    min-height: 35px;
    padding-bottom: 5px;
}


.OrderDetails {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding: 0px;
    margin: 6px;
}

    .OrderDetails th {
        background-color: inherit;
    }

    .OrderDetails .row_even {
        background-color: inherit;
    }

    .OrderDetails .row_odd {
        background-color: inherit;
    }

    .OrderDetails .container {
        margin: 0px;
    }

.row_even.OrderHighlight {
    background-color: #f1f1f1;
    /*font-weight: bold;*/
}

.row_odd.OrderHighlight {
    background-color: #f1f1f1;
    /*font-weight: bold;*/
}

.FormHeader {
    display: none;
}

#ctl00_Head1 + body .HeaderTable {
    margin: 0;
}

.HeaderTable td {
    padding: 0.5em;
    vertical-align: middle;
    width: 100%;
}


/* buttonbar */

.buttonbar_table,
.ButtonBar {
    background-color: #47525a;
    height: auto;
    padding-right: inherit;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: left;
    padding: 1px;
    /*direction: rtl;*/
}

td.buttonbar_button,
.Button {
    cursor: pointer;
    color: inherit;
}

.Button {
    padding: 0;
    margin: 0 0.7em 0 0;
    border: 2px solid #47525a;
    /*#36404a*/
    ;
    background: #47525a;
    /*#36404a*/
    direction: ltr;
}

.buttonbar_button a {
    color: #cbd2d6;
    padding: 1em;
}

.Button:hover,
.Button:active {
    color: #fff;
    background: #566676;
    border: 2px solid #566676;
}

    .Button:hover .button_text,
    .Button:active .button_text {
        color: #fff;
    }

.Header.Button {
    border: 0;
}

.buttonbar_button {
    border-radius: 5px 0 0 5px;
    border-right: 0;
    border-left: 2px solid #47525a;
    border-top: 2px solid #47525a;
    border-bottom: 2px solid #47525a;
    display: none;
}

    .buttonbar_button:hover,
    .buttonbar_button:active {
        border-radius: 5px 0 0 5px;
        border-right: 0;
        border-left: 2px solid #566676;
        border-top: 2px solid #566676;
        border-bottom: 2px solid #566676;
        background: #668f29;
    }

        .buttonbar_button:hover a,
        .buttonbar_button:active a {
            color: #fff;
        }

    .buttonbar_button + .buttonbar_button {
        border-radius: 5px;
        border: 2px solid #47525a;
        display: table-cell;
        font-weight: bold;
        padding: 0.5em;
    }

.Button {
    border-radius: 5px;
}

div#BannerContainerLeft {
    background: none;
    border: none;
}

.ButtonBarSub {
    margin-top: 28px;
    margin-bottom: 28px;
}

    .ButtonBarSub .Button {
        border: 2px solid #47525a;
        padding: 0.5em;
        background: #47525a;
        color: #fff;
    }

        .ButtonBarSub .Button:hover,
        .ButtonBarSub .Button:active {
            border: 2px solid #566676;
            padding: 0.5em;
            background: #566676;
        }

.ButtonBar .Button .button_table td {
    padding: 0.3em;
    vertical-align: middle;
    line-height: normal;
}

.button_text {
    color: #fff;
    /*#cbd2d6*/
    font-size: inherit;
    padding: 0 0.5em 0 0;
}

.Formbutton {
    color: #47525a;
    background-color: Transparent;
    font-weight: bold;
    border-radius: 5px;
    border: 2px solid #23DC50;
    cursor: pointer;
}

    .Formbutton:hover,
    .Formbutton:active {
        color: #fff;
        background: #566676;
    }

.Action.Upload,
div#StatusButton_2,
.Action.Activate {
    width: 85%;
    margin: auto;
    border: 2px solid #566676;
}

    .Action.Upload:hover,
    div#StatusButton_2:hover,
    .Action.Activate:hover,
    .Action.Upload:active,
    div#StatusButton_2:active,
    .Action.Activate:active {
        background: #566676;
        color: #fff;
    }

.Button tr:hover {
    background: transparent;
}

.formrow_content .Button:hover {
    color: #fff;
    background-color: #566676;
}

.InlineButton {
    padding: 0.2em;
    border-radius: 0.3em;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    border: 0;
}

    .InlineButton:hover {
        border: 0;
        text-decoration: underline;
    }


/* seperate button */

.ButtonSeparate {
    border-radius: 0.3em;
    border: 2px solid #47525a;
    background: #47525a;
    padding: 0.5em 0.5em;
    color: white;
}

    .ButtonSeparate:hover {
        border: 2px solid #566676;
        padding: 0.5em;
        background: #566676;
    }

    .ButtonSeparate .icon {
        display: inline-block;
        vertical-align: middle;
    }

    .ButtonSeparate .Text {
        display: inline-block;
        margin-left: 1em;
        vertical-align: middle;
        color: white;
    }


/* buttongrid */

.ButtonGridBorder {
    background: #808080;
    display: inline-block;
    border: 2px solid black;
}

.ButtonGrid {
    margin: 10px;
}

    .ButtonGrid .Button {
        display: inline-block;
        border: 2px solid #47525a;
        background-color: #47525a;
        width: 190px;
        height: 190px;
        line-height: 190px;
        text-align: center;
        vertical-align: middle;
        cursor: move;
    }

        .ButtonGrid .Button:hover {
            border: 2px solid #566676;
            background-color: #566676;
        }

        .ButtonGrid .Button.Account {
            cursor: auto;
        }

        .ButtonGrid .Button .DisplayArea {
            width: 100%;
            height: 100%;
            line-height: normal;
            margin-top: 7px;
        }

            .ButtonGrid .Button .DisplayArea tr td {
                text-align: center;
                vertical-align: middle;
            }

        .ButtonGrid .Button .EditArea {
            display: none;
            margin-top: 10px;
            line-height: 1.5em;
        }

    .ButtonGrid .Action {
        padding: 4px;
        cursor: pointer;
        border: 1px solid black;
        border-radius: 4px;
    }


    /* edit tonen ipv de display */

    .ButtonGrid .Button:hover .DisplayArea {
        display: none;
    }

    .ButtonGrid .Button:hover .EditArea {
        display: inline-block;
    }

    .ButtonGrid .Action :hover {
        background-color: #566676;
        border: 2px solid #566676;
    }

    .ButtonGrid .Button.Disabled {
        background-color: #808080;
    }

        .ButtonGrid .Button.Disabled .DisplayArea {
            display: none;
        }

    .ButtonGrid .Button.Default {
        background-color: #47525a;
    }

        .ButtonGrid .Button.Default .DisplayArea {
            display: none;
        }

    .ButtonGrid .Button .DefaultArea {
        display: none;
    }

    .ButtonGrid .Button.Default .DefaultArea {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        line-height: 1.5em;
        position: absolute;
        left: 2px;
        font-size: 14px;
        top: 87px;
    }

    .ButtonGrid .Button .NotUsedArea {
        display: none;
    }

    .ButtonGrid .Button.Disabled .NotUsedArea {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        line-height: 1.5em;
        position: static;
        font-size: 12px;
        margin: 0 auto;
    }

    .ButtonGrid .Button:hover .NotUsedArea {
        display: none;
    }

.main_tab_content {
    border-radius: 5px;
}

span.SubOption {
    font-size: 14px;
    color: inherit;
}

    span.SubOption .fa-circle-o {
        display: none;
    }


/* form changes */

form {
    position: relative;
}


/*.label,*/

.body.label,
.formrow_label,
tr.Settings td.formrow_label {
    text-align: right;
    height: 35px;
    width: 300px;
    min-width: 0px;
    line-height: 35px;
    font-size: inherit;
    max-width: 500px;
    word-wrap: break-word;
    white-space: pre-line;
    /*padding: 1em 0;*/
    vertical-align: top;
}

.InheritedSourceButton,
.CustomSourceButton {
    display: inline-block;
    color: #FFFFFF;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 0.5em;
    width: auto;
    height: auto;
}

#ID_FilterPeriod td div[onclick]:hover {
    text-decoration: underline;
}

.CustomSourceButton {
    color: #3c3c3c;
}

/* paging changes */

.paging_table,
#tra_grid_paging {
    font-size: inherit;
    font-weight: normal;
    width: auto;
    margin: 10px auto;
    border-spacing: 5px;
}

.paging_tr,
.paging_buttons_center a {
    height: 20px;
}

tr.paging_tr:hover {
    background: transparent;
}

.paging_td {
    background: transparent;
    border: 1px solid #ddd;
    color: inherit;
    cursor: pointer;
    text-align: center;
    min-width: 20px;
    font-weight: normal;
    border-radius: 5px;
    padding-bottom: 0;
    padding: 7px 11px;
    background: inherit;
    font-size: inherit;
    min-height: 0;
    line-height: normal;
    display: block;
    margin: 1px;
    float: left;
}

    .paging_td:hover {
        background: #f1f1f1;
    }

.paging_td_active {
    background: #23DC50;
    border: 1px solid #23DC50;
    color: #fff;
    cursor: pointer;
    text-align: center;
    min-width: 20px;
    font-weight: normal;
    border-radius: 5px;
    padding-bottom: 0;
    padding: 7px 11px;
    background: inherit;
    font-size: inherit;
    min-height: 0;
    line-height: normal;
    display: block;
    margin: 1px;
    float: left;
}


/* wbf grid paging changes */

.paging_area {
    padding-left: 6px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: auto;
    margin: 20px auto;
}

.paging_right {
    text-align: right;
}

    .paging_right:empty {
        display: none;
    }

    .paging_right span {
        font-weight: bold;
    }

.paging_buttons_left:after,
.paging_buttons_right:after,
.paging_buttons_center:after {
    content: "";
    display: table;
    clear: both;
}

.paging_buttons_left,
.paging_buttons_right,
.paging_buttons_center {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.paging_button {
    float: left;
    height: 22px;
    width: 22px;
    background-color: transparent;
    font-size: 1px;
    padding: 0px;
    margin: 0px;
    border-collapse: separate;
    cursor: pointer;
    line-height: 22px;
    border: 0px;
    background-repeat: no-repeat;
    transition: initial;
}

.paging_button {
    margin-right: 2px !important;
}

.pagging_button:hover {
    background: #f1f1f1;
}

.paging_buttons_center a {
    margin-right: 1px !important;
}

.paging_buttons_center {
    margin: 0 5px 0 3px;
}

    .paging_buttons_center a {
        background: transparent;
        border: 1px solid #ddd;
        color: inherit;
        cursor: pointer;
        text-align: center;
        min-width: 20px;
        vertical-align: middle;
        font-weight: normal;
        border-radius: 5px;
        padding: 8px 12px;
        background: inherit;
        font-size: inherit;
        min-height: auto;
        line-height: normal;
        float: none;
        text-decoration: none;
    }

    .paging_buttons_center span {
        background-repeat: repeat;
        line-height: normal;
        white-space: inherit;
        float: none;
        cursor: inherit;
        margin: 0;
        padding: 0;
        padding-left: 0;
        text-decoration: inherit;
    }

    .paging_buttons_center a:hover {
        background: #f1f1f1;
    }

        .paging_buttons_center a:hover span {
            background: transparent;
        }

    .paging_buttons_center a.paging_currentpage,
    .paging_buttons_center a.paging_currentpage:hover {
        background: #23DC50;
        border: 1px solid #23DC50;
        color: #fff;
    }

        .paging_buttons_center a.paging_currentpage span,
        .paging_buttons_center a.paging_currentpage:hover span {
            background: #23DC50;
            color: #fff;
        }


/* login specific changes */

.Logo img {
    width: auto;
    height: auto;
    /* height: 40px; */
    max-height: 100%;
    max-width: 100%;
    /* margin: 0 auto; */
}

.content.login {
    position: static;
}

    .content.login .HeaderTable {
        display: none;
    }

    .content.login .container_default {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: auto;
        padding: 0;
        min-width: auto;
        float: none;
        line-height: normal;
    }

        .content.login .container_default .PageHeader {
            text-align: center;
            font-weight: 100;
            font-size: 22pt;
            color: #484848;
        }

        .content.login .container_default .formrow_label,
        .content.login .container_default .body.label,
        .content.login .container_default .formrow_content,
        .content.login .container_default .body.value {
            border: 0;
            vertical-align: middle;
            line-height: normal;
        }

        .content.login .container_default span.required {
            display: none;
        }

        .content.login .container_default .container {
            margin-bottom: 2.5em;
        }

    .content.login #tr_row_usr_login_label,
    .content.login #tr_row_usr_login_content,
    .content.login #tr_row_usr_login,
    .content.login #tr_row_usr_password,
    .content.login #tr_row_usr_password_label,
    .content.login #tr_row_usr_password_content,
    .content.login #tr_row_language,
    .content.login #tr_row_language_label,
    .content.login #tr_row_language_content,
    .content.login #tr_row_usr_email_label {
        display: block;
        height: auto;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: left;
        min-height: initial;
    }

    .content.login #tr_row_usr_login_label,
    .content.login #tr_row_usr_password_label,
    .content.login #tr_row_language_label,
    .content.login #tr_row_usr_email_label {
        margin: 20px 0 5px 0;
    }

    .content.login #tr_row_usr_password_content input,
    .content.login #tr_row_usr_login_content input,
    .content.login #tr_row_usr_password_content span,
    .content.login #tr_row_usr_login_content span {
        display: block;
        width: 100%;
        text-align: left;
    }

    .content.login #frmLogin .content.login .WBF_Hint_Required {
        display: none;
    }

    .content.login + .footer .footer {
        display: none;
    }

    .content.login #loginContainer .ButtonBar,
    .content.login #resendContainer .ButtonBar {
        background: transparent;
        margin: 10px 0 0 0;
    }

    .content.login #loginContainer .Button:first-child {
        width: 100%;
        margin: 0;
    }

        .content.login #loginContainer .Button:first-child .button_icon {
            display: none;
        }

        .content.login #loginContainer .Button:first-child .button_text {
            text-align: center;
        }

        .content.login #loginContainer .Button:first-child .button_table {
            width: 100%;
        }

    .content.login #loginContainer .Button:last-child {
        background: transparent;
        padding: 0;
        margin: 0;
        border: none;
        direction: ltr;
        float: right;
    }

    .content.login .Button:last-child .button_icon {
        display: none;
    }

    .content.login #loginContainer .Button:last-child .button_text {
        color: #23DC50;
        font-size: 14px;
        padding: 10px 0;
    }

        .content.login #loginContainer .Button:last-child .button_text:hover {
            text-decoration: underline;
        }


    /* forgot password */

    .content.login #resendContainer {
        margin-top: 0;
    }

        .content.login #resendContainer table {
            width: 100%;
        }

#resendContainer .formrow_label {
    width: 100%;
    display: block;
    text-align: left;
}

#resendContainer .formrow_content {
    width: 100%;
    display: block;
}

#resendContainer #tr_row_usr_email_content {
    padding: 5px 1px;
}

#resendContainer .Button:first-child {
    float: left;
}

#resendContainer .Button:last-child {
    width: calc(100% - 99px);
    padding: 0.4em 0 0.4em 0.4em;
    margin: 0;
}

    #resendContainer .Button:last-child .button_text {
        text-align: center;
    }

#resendContainer input[type=text] {
    width: 100%;
}

.linkHeader_on,
.linkHeader_off {
    padding: 0;
}

    .linkHeader_on A,
    .linkHeader_on A:hover,
    .linkHeader_on A:link,
    .linkHeader_on A:visited,
    .linkHeader_on A:active {
        color: #23DC50;
        font-size: inherit;
    }

.linkHeader_off {
    color: inherit;
    font-size: inherit;
}

#frmLogin th {
    display: none;
}

.PageHeaderContainer {
    padding-top: 0.5em;
}


/* 'General menu Changes reporting for duty sir' -General menu Changes */

.linkHeader_table {
    padding: 0;
}

    .linkHeader_table td {
        line-height: normal;
    }

.PageHeader {
    color: #505458;
    font-size: 22px;
    line-height: normal;
}

.HeaderUserInfo {
    margin: 0 0 0 10px;
    font-size: inherit;
}

    .HeaderUserInfo .Warning {
        font-size: 24px;
    }


/* menu changes */

#LCSMenu {
    background: #36404a;
    border-radius: 0px;
    overflow-x: hidden;
    overflow: visible;
    border: 0px;
    width: 250px;
    font-size: inherit;
    position: static;
}




.ContentContainer {
    vertical-align: top;
    padding: 1em;
    border: 1px solid rgba(54, 64, 74, 0.05);
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.15);
}


.ReportWeb .Section .Header {
    background-color: #23DC50;
    color: white;
    margin-bottom: 0em;
    padding: 0.2em;
    width: 100%;
}

.MenuToggle .Button {
    display: block;
    padding: 10px 21px;
    background: none;
    border: 0;
    color: #cbd2d6;
    font-size: 21px;
}

    .MenuToggle .Button:hover {
        color: #fff;
    }

.ui-menu {
    -ms-user-select: none;
    user-select: none;
    padding: 4px 5px 4px 5px;
    font-family: Verdana, Arial;
    /*font-size: 10px;*/
    font-size: smaller;
    z-index: 99;
}

    .ui-menu > .ui-menu-item:hover {
        color: #fff;
        background: #566676;
    }

    .ui-menu,
    .ui-menu A,
    .ui-menu A:link,
    .ui-menu A:active,
    .ui-menu A:visited,
    .ui-menu A:hover,
    .ui-menu .ui-menu-item a.ui-state-active,
    .ui-menu .ui-menu-item a.ui-state-focus {
        font-family: Verdana, Arial;
        font-weight: normal;
        text-decoration: none;
        color: inherit;
        font-size: inherit;
    }

        .ui-menu.Level1 .ui-menu-item {
            border-radius: 0px;
            /*padding: 4px;*/
            border: none;
        }

        .ui-menu.Level0 {
            background: transparent;
            border: none;
            padding: 0px;
            border-radius: 3px;
        }

.Level0.ui-menu .ui-menu-item A,
.Level0.ui-menu .ui-menu-item span {
    display: block;
    padding: 12px 10px 12px 20px;
    margin: 4px 0px;
}

    .Level0.ui-menu .ui-menu-item span.MenuLabel {
        padding: 0;
        display: inline-block;
        margin: 0;
        width: calc(100% - 30px);
        overflow: hidden;
        vertical-align: middle;
        text-overflow: ellipsis;
    }

#UserProfileMenu .ui-menu .ui-menu-item span.MenuLabel {
    width: 100%
}

.Level1.ui-menu .ui-menu-item span.MenuLabel,
.Level2.ui-menu .ui-menu-item span.MenuLabel {
    overflow: auto;
    text-overflow: clip;
    width: 100%;
}

.Level1.ui-menu .ui-menu-item .MenuIcon + span.MenuLabel,
.Level2.ui-menu .ui-menu-item .MenuIcon + span.MenuLabel {
    min-width: calc(100% - 35px);
    max-width: calc(100% - 35px);
    overflow: visible;
}

.Level0.ui-menu .ui-menu-item span.MenuLabel1 {
    padding: 0;
    display: inline-block;
    margin: 0;
}

.Level1.ui-menu .ui-menu-item span.MenuLabel2,
.Level2.ui-menu .ui-menu-item span.MenuLabel2 {
    padding: 0;
    display: inline-block;
    margin: 0 15px 0 0;
    width: auto;
}

.Level1.ui-menu .ui-menu-item span.MenuLabel3 {
    padding: 0;
    display: inline-block;
    margin: 0;
}

.ui-menu.Level1 {
    display: block;
    background: #414d59;
    border-radius: 0;
    position: fixed;
    padding: 0px;
    margin: 0 0 2px 0;
    font-size: inherit;
    /* apple issue met submenu? 28aug17 */
    max-height: 100%;
    /*overflow-x: hidden;*/
    overflow: visible;
    border: 0;
}

.Level1.ui-menu .ui-menu-item A,
.Level1.ui-menu .ui-menu-item span {
    display: block;
    padding: 5px;
    margin: 0;
    font-weight: normal;
}

span.ui-menu-icon.ui-icon.ui-icon-carat-1-e {
    display: none;
}

.Level1 .ui-menu {
    display: inline-block;
    background: #414d59;
    border-radius: 0;
    position: fixed;
    padding: 0;
    margin: 0 0 2px 0;
    font-size: inherit;
    border: 0;
}

.Level2 .ui-menu {
    display: inline-block;
    background: #414d59;
    border-radius: 0;
    position: fixed;
    padding: 0;
    margin: 0 0 2px 0;
    font-size: inherit;
    border: 0;
}


span.ui-menu-icon.ui-icon.ui-icon-carat-1-e {
    display: none;
}

.ui-menu .fa-caret-right {
    float: right;
    line-height: 1.5em;
    margin: 0 0 0 -21px;
}

.ui-menu .ui-menu-item {
    display: block;
    width: auto;
    cursor: pointer;
    margin-left: 0;
    margin-right: 0;
    white-space: nowrap;
    background: transparent;
    font-weight: normal;
    color: #cbd2d6;
    border: 0;
    padding: 0;
    position: relative;
}

    .ui-menu .ui-menu-item.PartOfPath {
        font-family: Verdana, Arial;
        font-size: inherit;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #fff;
        font-weight: normal;
        background: #23DC50;
        /*#566676*/
        text-decoration: none;
        border-radius: 0;
        /* color: #000; */
        text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    }

    .ui-menu .ui-menu-item .ui-menu .ui-menu-item {
        font-weight: normal;
        display: block;
        width: auto;
        padding: 2px;
    }

        .ui-menu .ui-menu-item .ui-menu .ui-menu-item > *::after {
            content: '';
            display: table;
            clear: both;
        }

span.ui-corner-all::after {
    content: "";
    display: table;
    clear: both;
}

.SubMenu {
    padding: 0 25px 0 5px;
    width: 100%;
    min-height: 30px;
    /*50px*/
    font-size: inherit;
    background: #414d59;
    margin: 0 0 0 -15px;
    color: #fff;
    z-index: 1;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: content-box;
}

    .SubMenu .Item {
        display: inline-block;
        padding: 0 0.2em;
        white-space: nowrap;
        background: transparent;
        border: none;
    }

        .SubMenu .Item.Selected {
            background: transparent;
            text-decoration: none;
            color: #fff;
        }

        .SubMenu a,
        .SubMenu .Item div {
            color: #fff;
            font-weight: normal;
            text-decoration: none;
            height: 30px;
            /*50px*/
            line-height: 30px;
            /*50px*/
            display: block;
            padding: 0 5px;
        }

            .SubMenu a:hover,
            .SubMenu .Item div:hover {
                color: #23DC50;
                font-weight: normal;
                border: 0;
                border-bottom: 3px #23DC50 solid;
                margin: 0;
                border-radius: 0;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                text-decoration: none;
                background: none;
            }

            .SubMenu a.Selected {
                color: #23DC50;
                font-weight: normal;
                border-bottom: 3px #23DC50 solid;
            }

[id^=SubMenu] {
    background: #475a6d;
}

li.ui-menu-item:hover {
    background: transparent;
}

.MenuIcon {
    font-size: 18px;
}

.MiddleTable.Hidden #LCSMenu .MenuLabel2,
.MiddleTable.Hidden #LCSMenu .MenuLabel1 {
    display: none;
}

.MiddleTable.Hidden #LCSMenu .Level1 .MenuLabel2,
.MiddleTable.Hidden #LCSMenu .Level1 .MenuLabel1 {
    display: inline-block;
}

.MiddleTable.Hidden #LCSMenu {
    width: 100%;
}


/* Digitale prijslijst */

.imagecontainer .fa-folder {
    top: -5px;
    left: 15px;
    font-size: 9em;
    color: GoldenRod;
    cursor: default;
}

#imageUploader .fa-plus {
    font-size: 1em;
    position: absolute;
    left: 12px;
    top: 16px;
    color: #23DC50;
}

#imageUploader .fileupload {
    cursor: pointer;
    width: 65px;
    float: left;
    position: relative;
    margin: 10px;
}

    #imageUploader .fileupload.small {
        width: 15px;
    }


.foldercreate {
    cursor: pointer;
    float: left;
    position: relative;
    margin: 10px;
}


/* tooltip */

.ui-tooltip.ui-widget-content {
    background: #222;
    color: #fff;
    border-radius: 2px;
    border: 0px;
}


/* dateTimePicker */

.ui-datepicker th {
    background: #23DC50;
}


/* Datepicker */


/* the table (within the div) that holds the date picker calendar */

.dpTable {
    font-family: inherit;
    font-size: inherit;
    text-align: center;
    color: #363179;
    border: 1px solid #ADAFFF;
    background-color: #E0E0FF;
}

    .dpTable td {
        line-height: 14px;
        font-size: 14px;
    }


/* a table row that holds date numbers (either blank or 1-31) */

.dpTR {
    background-color: #FF9900;
}


/* the top table row that holds the month, year, and forward/backward buttons */

.dpTitleTR {
    text-align: center;
    background-color: #000099;
    padding: 2px;
    font-family: inherit;
    font-size: inherit;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */

.dpDayTR {
    text-align: center;
    background-color: #FF9900;
}

/* a table cell that holds a date number (either blank or 1-31) */

.dpTD {
    background-color: #E0E0FF;
    border: 1px solid #E0E0FF;
}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */

.dpDayHighlightTD {
    text-align: center;
    background-color: #FFFFFF;
    color: #363179;
    font-weight: bold;
    border: 1px solid #ADAFFF;
    /* line-height: 35px; */
    /* font-size: 14px; */
}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it
apparent which cell is being hovered over) */

.dpTDHover {
    background-color: #FFFFFF;
    border: 1px solid #ADAFFF;
    cursor: pointer;
}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */

.dpDayTD {
    text-align: center;
}


/* additional style information for the text that indicates the month and year */

.dpTitleText {
    font-family: inherit;
    font-size: inherit;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current
date field value) */

.dpDayHighlight {
    font-weight: bold;
}


/* the forward/backward buttons at the top */

A.dpButton,
A.dpButton:active,
A.dpButton:text,
A.dpButton:link,
A.dpButton:hover,
A.dpButton:visited {
    font-size: inherit;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}


/* the "This Month" and "Close" buttons at the bottom */

.dpTodayButton {
    font-family: inherit;
    font-size: inherit;
    color: gray;
    font-weight: bold;
}


/* productindeling*/

#colorpicker li,
#mainselectie li ul li,
#mainselectie li,
#screenproducts li ul li,
#screenproducts li {
    font-size: inherit;
    padding: 5px;
}

.kop2 {
    font-size: inherit;
}

.nextpage .fa.fa-plus {
    right: 0px;
    top: 16px;
    font-size: 20px;
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.kop2:hover {
    color: #23DC50;
}

.selectiedisplay {
    color: #3c3c3c;
}

#tr_timerexpander {
    cursor: pointer;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    position: relative;
    left: 140px;
    top: -8px;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
    position: relative;
    left: 140px;
    top: -8px;
}


/* rapportage custom dropdown */

.placement_list {
    font-size: inherit;
}

.dropdowntable_list {
    font-size: inherit;
}

.dropdowntable_result {
    cursor: pointer;
    padding: 0.5em;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
    height: auto !important;
    width: auto !important;
}


/* popup */

#popupwindow {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
    height: auto;
    z-index: 2 !important;
}

#popupwindow_header_close::before {
    content: ' ';
    position: fixed;
    top: 0;
    bottom: 0;
    Right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: -1;
}

#popupwindow_table {
    border: 0px;
}

#popupwindow_header {
    background-color: #23DC50;
    border-bottom: none;
    color: #fff;
}

#popupwindow_header_text {
    color: inherit !important;
    font-size: inherit !important;
    padding: 15px 0 0 15px;
}

#popupwindow_header_close i.fa.fa-times {
    font-size: 24px;
}

.container_default.Popup {
    padding: 0;
}

.container_default.Popup {
    padding: 0;
    margin: 0;
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

    .container_default.Popup * {
        font-size: 16px;
    }

    .container_default.Popup input[type=text],
    .container_default.Popup input[type=password],
    .container_default.Popup select {
        width: 94%;
    }

        .container_default.Popup #tr_row_dateStart_content select,
        .container_default.Popup #tr_row_dateEnd_content select,
        .container_default.Popup select#DateChange_prd_0_d,
        .container_default.Popup select#DateChange_prd_0_m,
        .container_default.Popup select#DateChange_prd_0_y {
            width: auto;
        }

    .container_default.Popup td,
    .container_default.Popup th,
    .container_default.Popup .placer th,
    .container_default.Popup .formrow_header,
    .container_default.Popup .form_header {
        padding: 0.5em;
    }

    .container_default.Popup .formrow_label,
    .container_default.Popup .body.label,
    .container_default.Popup .formrow_content,
    .container_default.Popup .body.value {
        padding: 0.5em;
        vertical-align: top;
        width: auto;
    }

    .container_default.Popup .istoolbar_container td {
        padding: 0;
    }

.container_all table tr td {
    vertical-align: top;
}

.Popup .PageContentContainer {
    margin: 0;
}

.Popup .PageHeaderContainer {
    background: #fff;
}

#popupwindow_content {
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Arial;
    font-size: inherit;
    color: inherit;
    background: #fff;
}


/* supplementen */

.Supplement {
    margin-left: 2em;
    font-style: italic;
}

.Survey .Title {
    font-weight: bold;
    font-size: larger;
}

.Survey .Question {
    margin: 1em;
    padding: 0.3em;
}

    .Survey .Question .DragButton {
        cursor: move;
    }

    .Survey .Question:hover {
        background: #f1f1f1;
    }

    .Survey .Question .Title {
        display: inline-block;
        font-weight: bold;
        font-size: inherit;
        border-bottom: 1px solid black;
    }

    .Survey .Question .Information {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

#answergrid td {
    padding: 6px 0;
}

.Button {
    cursor: pointer;
    padding: 0.3em;
    color: #fff;
    display: inline-block;
}

.Buttons {
    background: transparent;
    display: inline-block;
    padding: transparent;
    margin: transparent;
}

.fa.fa-times {
    font-size: 16px;
}

.Button.fa.fa-times {
    color: black;
    border: none;
    background: transparent;
    margin: 0;
}

    .Button.fa.fa-times:hover {
        color: red;
        border: none;
        background: transparent;
        margin: 0;
    }

.Button .fa.fa-plus {
    color: #329932;
}

.SurveyResponse .Title {
    font-weight: bold;
    font-size: larger;
}

.SurveyResponse .SubTitle {
    font-weight: bold;
    margin: 0.5em;
}

.SurveyResponse .SurveyStates {
    margin: 1em;
    padding: 0.3em;
}

.SurveyResponse .Question {
    margin: 1em;
    padding: 0.3em;
}

    .SurveyResponse .Question .Title {
        display: inline-block;
        font-weight: bold;
        font-size: inherit;
        border-bottom: 1px solid black;
        margin-bottom: 0.5em;
    }

    .SurveyResponse .Question .Information {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

.SurveyResponse table {
    border-collapse: collapse;
}

    .SurveyResponse table td {
        padding: 0.3em;
        border: 1px dotted gray;
    }

        .SurveyResponse table td.Answer {
            width: 15em;
        }

        .SurveyResponse table td.Percentage {
            text-align: right;
        }

        .SurveyResponse table td.Summary {
            border-top: 1px solid gray;
            font-weight: bold;
        }

.ui-state-highlight {
    /*height: 50px;*/
    background: #ececec;
}

.ui-sortable-helper {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    /* IE 5-7 */
    filter: alpha(opacity=95);
    /* Mozilla */
    -moz-opacity: 0.95;
    /* Safari 1.x */
    -khtml-opacity: 0.95;
    /* Good browsers */
    opacity: 0.95;
}

#psg_grid .ui-sortable-helper {
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    border: 2px solid #22b0da;
    background: #fff;
}

#psg_grid .ui-sortable-placeholder {
    background: #22b0da;
    visibility: visible !important;
}

.Survey .TextReplies .TextReply {
    margin: 1em;
    padding: 0.5em;
}

    .Survey .TextReplies .TextReply:not(:last-child) {
        border-bottom: 1px solid gray;
    }

.Title .fa-arrow-right {
    background: #333F48;
    padding: 3px 5px;
    color: #fff;
}

    .Title .fa-arrow-right:hover {
        background: gray;
        color: #fff;
    }


/* panel pc */

.panelpc_form {
    border: 1px solid black;
    background-color: #F0F0F0;
}

.panelpc_buttonbar {
    border: 1px solid black;
    background-color: #A0A0A0;
}

.panelpc_form .row_even {
    background-color: #F5F5F5;
}

.panelpc_form .row_odd {
    background-color: #ECECEC;
}

.panelpc_form .container {
    background-color: #F5F5F5;
    margin-bottom: 13px;
}


/* footer */

.footer,
.footer A,
.footer A:link,
.footer A:visited,
.footer A:active {
    font-size: 10px;
    font-weight: normal;
    /* font-family: Arial,Verdana; */
    color: #8C8B86;
    padding: 20px 20px 20px 105px;
}

.menu_table {
    height: auto;
}

/* notify bar */

#notificationItems {
    z-index: 4;
    position: relative;
}

.footer a.notificationCloseBtn {
    padding: 0;
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.notificationItem {
    position: fixed;
    background-color: #4c5667;
    right: 0px;
    left: initial;
    width: 430px;
    max-width: 99.8%;
    font-size: inherit;
    border-bottom: 0;
    box-shadow: 0px 5px 5px #d0d0d0;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

.notificationSubject {
    font-weight: bold;
    text-align: left;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    padding: 10px;
}

.notificationBody {
    margin: 0;
    font-size: 11pt;
    /* calc(100% - 2px) */
    padding: 0;
    white-space: normal;
    line-height: 1.3;
    padding: 0 10px 10px 10px;
}

.footer .notificationBody a {
    padding: 0;
    color: #23DC50;
    text-decoration: none;
    font-size: inherit;
}

    .footer .notificationBody a:hover,
    .footer .notificationBody a:active {
        text-decoration: underline;
    }

@media screen and (max-width: 1024px) {

    body,
    #notificationItems {
        font-size: 11px;
    }

    * {
        font-size: 11px;
    }

    .Level0.ui-menu .ui-menu-item A,
    .Level0.ui-menu .ui-menu-item span {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .Level1.ui-menu .ui-menu-item A,
    .Level1.ui-menu .ui-menu-item span {
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {

    body,
    #notificationItems {
        font-size: 12px;
    }

    * {
        font-size: 12px;
    }

    .Level0.ui-menu .ui-menu-item A,
    .Level0.ui-menu .ui-menu-item span {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .Level1.ui-menu .ui-menu-item A,
    .Level1.ui-menu .ui-menu-item span {
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1680px) {

    body,
    #notificationItems {
        font-size: 13px;
    }

    * {
        font-size: 13px;
    }

    .Level0.ui-menu .ui-menu-item A,
    .Level0.ui-menu .ui-menu-item span {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .Level1.ui-menu .ui-menu-item A,
    .Level1.ui-menu .ui-menu-item span {
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }
}

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

    body,
    #notificationItems {
        font-size: 14px;
    }

    * {
        font-size: 14px;
    }
}

@media screen and (max-height: 575px) {

    body,
    #notificationItems {
        font-size: 12px;
    }

    * {
        font-size: 12px;
    }

    .Level0.ui-menu .ui-menu-item A,
    .Level0.ui-menu .ui-menu-item span {
        padding: 1px 10px 1px 20px;
    }

    .Level1.ui-menu .ui-menu-item A,
    .Level1.ui-menu .ui-menu-item span {
        padding: 1px 5px;
    }

    .notificationItem {
        width: 120px;
        padding: 4px;
    }

        .notificationItem .notificationBody {
            font-size: 10px;
        }

        .notificationItem .notificationSubject {
            font-size: 8px;
        }
}

@media screen and (min-height: 575px) and (max-height: 650px) {

    body,
    #notificationItems {
        font-size: 12px;
    }

    * {
        font-size: 12px;
    }

    .Level0.ui-menu .ui-menu-item A,
    .Level0.ui-menu .ui-menu-item span {
        padding: 5px 10px 5px 20px;
    }

    .Level1.ui-menu .ui-menu-item A,
    .Level1.ui-menu .ui-menu-item span {
        padding: 2px 5px;
    }
}

@media screen and (min-height: 650px) and (max-height: 830px) {

    body,
    #notificationItems {
        font-size: 13px;
    }

    * {
        font-size: 13px;
    }

    .Level0.ui-menu .ui-menu-item A,
    .Level0.ui-menu .ui-menu-item span {
        padding: 7px 10px 7px 20px;
    }

    .Level1.ui-menu .ui-menu-item A,
    .Level1.ui-menu .ui-menu-item span {
        padding: 2px 5px;
    }
}

@media screen and (min-height: 830px) {

    body,
    #notificationItems {
        font-size: 14px;
    }

    * {
        font-size: 14px;
    }
}

.GridColumnSelectionDialog .Label {
    display: inline-block;
}


.row_odd.modified {
    background-color: #E8E8E8;
}

.row_even.modified {
    background-color: #E8E8E8;
}

.row_odd.ui-sortable-handle,
.row_even.ui-sortable-handle {
    cursor: move;
}

.InlineHelp {
    line-height: 1.2em;
    font-size: smaller;
}

.BreadCrumbs {
    margin-bottom: 10px;
    vertical-align: middle;
    padding: 0.5em;
}

.LinkHeaderContainer {
    display: inline-block;
}

.RelatedActionsContainer {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
}

    .RelatedActionsContainer .RelatedActionList {
        position: absolute;
        background: white;
        padding: 1em;
        border: 1px solid lightgrey;
        border-radius: 0.5em;
    }

.TabItem {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

    .TabItem .TabButton {
        display: inline-block;
        padding: 0.5em;
        cursor: pointer;
        border: 1px solid black;
        border-radius: 0.3em;
    }

    .TabItem .ProductName {
        display: inline-block;
        font-weight: bold;
    }

    .TabItem .TabCount {
        display: inline-block;
        font-weight: normal;
        margin-right: 0.5em;
    }

    .TabItem .TabItemInfo {
        display: inline-block;
        font-weight: normal;
        margin-left: 1em;
    }

    .TabItem .TabAction {
        display: inline-block;
        font-weight: normal;
        margin-right: 0.5em;
        width: 8em;
    }

    .TabItem .TabWarning {
        display: inline-block;
        font-weight: normal;
        margin-left: 1em;
        color: darkgreen;
    }

    .TabItem .TabError {
        display: inline-block;
        font-weight: normal;
        margin-left: 1em;
        color: darkred;
    }

.TabBlock {
    display: inline-block;
    width: 10em;
    height: 10em;
    margin: 0.5em;
    vertical-align: middle;
}

    .TabBlock.TabButton {
        display: inline-block;
        padding: 0.5em;
        cursor: pointer;
        border: 1px solid black;
        border-radius: 0.3em;
    }

        .TabBlock.TabButton:hover {
            background-color: white !important;
        }

    .TabBlock .TabLabel {
        font-weight: bold;
        margin-right: 0.5em;
    }

    .TabBlock .TabCredits {
        font-weight: bold;
        margin-right: 0.5em;
    }


.HeaderButton {
    cursor: pointer;
    display: inline-block;
}

    .HeaderButton .HeaderButtonImage {
        display: inline-block;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .HeaderButton.Closed {
        text-decoration: none;
    }

    .HeaderButton.Open {
        text-decoration: underline;
    }

.Item.Line {
    padding: 5px 10px;
    min-height: 45px;
    display: flex;
    align-items: center;
    white-space: normal;
    border-bottom: #f1f1f1 1px solid;
}

    .Item.Line:last-child {
        border: none;
    }

.Item.Label {
    width: 30em;
    display: inline-block;
}

.Item.Label {
    width: 30em;
    display: inline-block;
}

.Item.Value {
    display: inline-block;
}

.Overview .Label {
    display: flex;
    flex-direction: row;
    background: green;
    align-items: center;
    flex-flow: row wrap;
    flex: 1
}

    .Overview .Label:hover,
    .Item.Line:hover {
        background: #f1f1f1;
    }

.Overview .Tree .SubTree .Label input {
    order: 1;
    margin-left: 10px;
    margin-right: 10px;
}

.Overview .Tree .SubTree .Label .Button {
    order: 2;
    background: transparent;
    color: inherit;
    /* #FFAE50 */
    border: none;
    padding: 5px 10px;
}

    .Overview .Tree .SubTree .Label .Button:hover,
    .Overview .Tree .SubTree .Label .Button:focus {
        order: 2;
        background: #3c3c3c;
        color: #fff;
        border: none;
    }

.Overview .Tree .SubTree .Label label {
    order: 3;
    min-width: 300px;
}

.Overview .Tree .SubTree .Label i[class~=fa-check-circle-o] {
    order: 4;
    margin-left: 50px;
    color: green;
    font-size: 24px;
}


tr.Active {
    /*font-weight: bold;*/
    background: transparent;
    color: inherit;
    border-bottom: 1px solid #DDD;
}

    tr.Active:hover {
        color: inherit;
        background-color: #F1F1f1;
    }

tr.Inactive {
    background: transparent;
    color: #AAA;
    /*background: #501010;
color: white;*/
    border-bottom: 1px solid #DDD;
}

    tr.Inactive:hover {
        color: inherit;
        background-color: #F1F1f1;
    }

/* changes lex*/

.Label:last-child {
    border-bottom: none;
}

.SubItems i.fa.fa-circle-o {
    visibility: hidden;
}

.Item.Line {
    padding: 5px 10px;
    min-height: 45px;
    display: flex;
    align-items: center;
    white-space: normal;
    border-bottom: #f1f1f1 1px solid;
}

.ReportWeb .Section .Header {
    background-color: #8fc73e;
    padding: 5px 10px;
    border-radius: 5px;
}

    .ReportWeb .Section .Header.Sub,
    .ReportWeb .Section .Header.Sub .HeaderButton {
        color: #fff;
        font-size: 18px
    }

        .ReportWeb .Section .Header.Sub .HeaderButton {
            width: 100%;
        }

        .ReportWeb .Section .Header.Sub + .Section .Header.Sub {
            background: #566676;
            color: #fff;
            font-size: 16px;
            padding: 5px 10px;
        }

            .ReportWeb .Section .Header.Sub + .Section .Header.Sub + .Section .Header.Sub {
                background: transparent;
                border-bottom: 1px solid #f1f1f1;
                color: #333;
                font-size: inherit;
            }

                .ReportWeb .Section .Header.Sub + .Section .Header.Sub + .Section .Header.Sub + .Section .Header.Sub {
                    background: transparent;
                    color: #333;
                    margin: 2em 0 0 0;
                }

            .ReportWeb .Section .Header.Sub + .Section .Header.Sub.AuthorisationAdmin {
                background: gray;
            }

            .ReportWeb .Section .Header.Sub + .Section .Header.Sub.AuthorisationClient {
                background: lightgray;
                color: #333;
            }

.ReportWeb .Section .Section .Section .Section .Section {
    margin: 0 1em;
}

.BodySection {
    background-color: #F8F8F8;
}

.Chart_HalfPage {
    width: 500px;
    display: inline-block;
}

.Chart_FullPage {
    width: 800px;
    display: inline-block;
}


.optionPlaceholder {
    color: gray;
}

    .optionPlaceholder:checked, .optionPlaceholder:active, .optionPlaceholder:first-of-type {
        color: gray;
    }


/*.TabLabel {
    font-size: larger;
    font-weight: bold;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    display: inline-block;
    background-color: white;
    color: dimgray;
    cursor: pointer;
    padding: 0.5em;
    margin-left: 1em;
    margin-right: 0em;
}

    .TabLabel.Active {
        background-color: white;
        cursor: default;
    }*/

.TabContent {
    display: none;
    background-color: transparent;
}

    .TabContent.Active {
        display: block;
        background-color: transparent;
    }

.tab_table tr {
    border-bottom: 1px solid #DDD;
}


.GridHeader {
    font-size: inherit;
    padding: 0.5em;
    margin: 0 0 5px 0;
    background: #fff;
    border: 0;
    color: inherit;
    border-bottom: 2px solid #000;
    column-span: all;
    font-weight: bold;
}

.iframe-container {
	overflow: hidden;
    border: 0;
}

.responsive-iframe {
	-moz-transform-origin: top left;
	-webkit-transform-origin: top left;
	-o-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
}


.SelectionTable tr:not(.Selected) {
    color: #c0c0c0;
}

.SelectionTable tr:not(.Selected) td input[type=textbox] {
    color: #c0c0c0;
    display: none;
}


tr .Header {
    font-weight: bold;
}

.LabelFilter {
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
}