@import url('jquery-ui.css');
@import url('jquery-ui.structure.css');
@import url('jquery-ui.theme.css');

/* High Contrast Material Design*/
input {
    background: white;
    border: 1px solid black;
}

input[type],
.eConTextINPUT,
textarea,
input[role="textbox"] {
    background: #f4f4f4;
}
.eConSliderSlider.ui-slider,
.touch .ui-spinner a.ui-spinner-button,
.ui-progressbar-value.ui-widget-header,
.touch .eConTabularComboboxTableContainer,
.configure-input-dialog.ui-dialog-content,
#oMainContainer,
.configViewbox,
.title-bar {
	background: #F1F1F1;
}

input.eConMandatoryNotFilledField,
.eConRadioLabel.eConMandatoryNotFilledField:after {
    border: 1px solid #FF0000 !important;
}

table.eConTABLE td.eConTD.extra-column {
	border-left: 1px solid #F1F1F1;
}

table.eConTABLE td.eConTD {
    padding: 0 10px;
    border-bottom: none;
    vertical-align: top;
}

table.dataTable th, table.eConTABLE .eConTH, .eConMatrixPropertiesLabel, .eConMatrixLabel {
    color: #888;
}

/* normal Material Design*/
.ui-widget {
    font-size: 14px;
}

#headerBar {
    height: 48px;
    background-color: #000;
}

#header {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 100%;
}

#header span {
    overflow: hidden;
    flex-grow: 1;
}

#header span.verticalAlignFix {
    display: none;
}

#title {
    font-size: 2em;
    color: #fff;
    line-height: 2em;
    font-weight: 300;
    padding: 0 10px;
}

.eConLogo {
    background: #FFF;
    display: block;
    height: 100%;
    float: none;
    margin-right: 0;
    flex-shrink: 1;
    padding: 0 10px;
}

.eConLogo:hover {
    background: #EAEAEA;
}

/* Ribbon buttons + tabs */
.buttonTabBar {
    background-color: #002050;
    height: 40px;
}

.buttonTabBar .scroll-wrapper > .scroll-content {
    overflow: hidden !important;
}

.tabsContainer,
#oButtonsContainer {
    display: flex;
    height: 40px;
}

.eConTabs {
    padding: 0px;
    min-width: 100px;
}

.eConTabs .tabs {
    display: inline-block;
    white-space: nowrap;
    margin-left: 25px;
}

.buttonTabBar .eConTabs.scroll-wrapper {
    display: inline-block;
}

.buttonTabBar .eConTabs .tabs {
    margin: 0;
    padding: 0 !important;
}

.ui-ribbon-item {
    height: 100%;
}

.ui-ribbon-button-text:hover {
    background: #001637;
}

.ui-ribbon-button-text {
    clear: both;
    display: block;
    float: none;
    white-space: nowrap;
    position: inherit;
    top: 0;
    text-align: center;
    width: 100%;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 14px;
}

.eConTabs.ui-widget ul,
.eConRibbon.ui-widget ul {
    background: none;
    border: none;
    padding: 0px !important;
    float: right;
    height: 100%;

}

.eConTabs.ui-widget ul {
      width: calc((100%) - 50px) !important;
      display: flex;
}

.scroll-wrapper > .eConTabs.scroll-content {
    overflow-y: hidden !important;
    margin-right: 0px !important;
    height: 100% !important;
}

.eConTabs .scroll-element.scroll-y { /* No vertical scroll */
    display: none !important;
}

#eConRibbonButtonsPopup .eConRibbon ul {
    height: auto;
}

.eConRibbonButtonIcon-whatif.eConRibbonButtonIcon {
    background: url('../../../images/material_design/whatif.png') no-repeat;
}

.ui-dialog[aria-describedby=eConRibbonButtonsPopup] {
    border: 0px;
    padding: 0px;
}

.eConTabs .tab,
.eConRibbon .eConButton {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 100%;
    margin: 0px !important;
    border-radius: 0px;
    border-color: #DDDDDD !important;
    background: none;
}

.tabs .tab,
.eConLabelText,
.touch .eConTabularComboboxTableContainer .title-bar .ui-state-default {
    font-family: "Segoe UI",Tahoma,Arial,sans-serif;
}

.eConTabs .tab.ui-state-default {
    font-size: 1em;
    border-width: 0px;
}

.eConTabs.scroll-scrollx_visible .tab.ui-state-default:last-child {
    border-width: 0px;
}

.eConTabs.ui-widget.scroll-scrollx_visible ul {
    margin: 0px 30px !important;
}

.eConTabs .scroll-bar {
    display: none !important; /* Only show the scroll buttons, but allow the user to scroll using mouse / touch */
}

.buttonTabBar .eConTabs.ui-tabs .tab a {
    color: #fff;
}

.eConTabs.ui-tabs .tab a {
    color: #666;
    padding: 0 10px;
    white-space: normal;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: normal;
}

.eConTabs.ui-tabs .tab.ui-state-active a {
    color: white;
}

.buttonTabBar .eConTabs.ui-tabs .tab a {
    font-size: 14px;
    font-weight: 400;
}

.buttonTabBar .eConTabs.ui-tabs .tab.ui-state-active {
    background-color: white;
}

.ui-tabs .ui-tabs-nav li.ui-state-hover {
    border-bottom: 1px solid transparent !important;
    transition: background 150ms ease-out;
}

.buttonTabBar .ui-tabs .ui-tabs-nav li.ui-state-hover {
    background: #001637;
}

.buttonTabBar .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #3A96DD;
}

/* buttons in tab row ... */
.eConTabs,
.eConRibbon.ui-ribbon.ui-widget-header {
    display: inline-block;
    width: auto;
    height: auto;
    border: none;
    overflow: hidden;
    flex: 1;
}

.tabsContainer .eConRibbon { /* Only when next to tabs, align right */
    text-align: right;
    float: right;
}

.eConRibbon li,
.eConRibbon .eConButton {
    margin: 0;
}

.eConRibbon .eConLogo,
.eConRibbon .eConButton:not(#overflowButton) .ui-ribbon-button-icon + .ui-ribbon-button-text {
    display: none;
}

.eConRibbonButtonIcon {
    background-image: none;
}

.eConRibbon .eConButton.ui-ribbon-button.ui-widget {
    border-width: 0px;
    display: flex;
    height: 100%;
    min-width: 40px;
}

.eConButton .ui-ribbon-button-icon + .ui-ribbon-button-text { /* Fix for IE8 */
    display: none;
}

.eConButton .ui-ribbon-button-text {
    top: 0;
    padding: 13px;
    line-height: 14px;
    width: auto !important;
    border-right: 1px solid rgba(255,255,255,0.3);
}

.ui-ribbon-button:hover {
    background-color: #001637;
}

.configViewbox .tabsContainer { /* Tab in pane */
    margin: 0px;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: #DDDDDD;
    display: block;
}

.configViewboxesContainer .tabsContainer,
.configViewboxesContainer .pane-scrollbar .tabsContainer {
    margin-top: 8px !important;
    border-top: 1px solid #DDDDDD !important;
    margin-bottom: 15px;
}

.configViewbox .tabsContainer .eConTabs {
    display: block;
}

.configViewbox .tabsContainer .eConTabs .tab {
    margin: 3px 2px !important;
    background: #f4f4f4;
    height:34px;
}

.configViewbox .tabsContainer .eConTabs .tab.ui-state-hover,
.configViewbox .tabsContainer .eConTabs .tab.ui-state-active {
    background: #3a96dd;
}

#oMainContainer,
.configViewbox,
.title-bar {
    background: white;
}

.configViewboxesContainer.use-rows {
    border-spacing: 0px;
    margin: 0;
}

.configViewboxesContainer:last-child {
    margin-bottom: 0px;
}

.configViewboxesContainer:last-child .configViewbox {
    padding-bottom: 0px;
    height: inherit !important;
}

.configViewboxColumn .configViewboxTable {
    border-spacing: 0px 20px;
    height: auto;
}

.use-columns,
.configViewboxColumn {
    padding-left: 0px !important;
}

.configViewboxColumn {
    padding-right: 30px;
}

.configViewboxColumn:last-child {
    padding-right: 0px;
}

.configViewboxColumn:last-child .configViewbox {
    padding-right: 0px; /* TODO: improve */
}

.configViewboxColumn:last-child .closePaneButton {
    right: 1px !important; /* TODO: improve;*/
}

.configViewbox .title-bar {
    margin-right: 0px;
}

.configViewbox.floating-pane {
    transition: box-shadow .3s;
    -webkit-transition: box-shadow .3s;
}

.configViewbox.floating-pane.floating {
    box-shadow: #bbbbbb -2px 0px 10px 1px;
}

.configViewbox.floating-pane.location-Right {
    top: 0px;
}

.title-bar.ui-widget-header {
    text-align: left;
    position: relative;
    margin-left: 25px !important;
    margin-top: 0 !important;
    padding-top: 10px;
}

.title-bar {
    padding: 0 !important;
}

.title-bar span {
    font-size: 28px;
    line-height: 40px;
    font-weight: 200;
}

.title-bar:before { /* Show a little line at begin of title-bar */
    content: "";
    color: transparent;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background-color: transparent !important;
    border-color: transparent !important;
}

.configViewboxesContainer.use-rows .configViewbox:first-child {
    margin-left: 0;
}

.closePaneButton + .title-bar.hidden {
    display: block;
}

.closePaneButton.ui-button,
.pinPaneButton.ui-button {
    border: 0px;
    width: 21px;
    height: 21px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    top: 1px;
    right: 1px;
}

.closePaneButton.ui-button,
.pinPaneButton.ui-button,
.slideInPaneButton.ui-button {
    background: white !important;
}

#slideInPaneButtonsRight {
    top: 171px; /* 115px + 50px + 6*/
}

.configViewbox:not(.ui-widget) table.configTable {
    margin-top: 10px;
    margin-bottom: 10px;
    width: calc((100%) - 80px);
    min-width: inherit !important;
    max-width: inherit !important;
}

.configViewbox {
    border: 0px;
}

.configViewbox:not(:last-of-type):not(.floating-pane) {
    margin-right: 20px;
}

.configViewbox.uipane-Url {
    background-color: white;
}

.configViewbox.uipane-Text div.text-container {
    padding: 10px 10px 10px 25px;
}

table.eConTABLE.configTable,
table.dataTable {
    border-spacing: 0px;
    padding: 0 0 0 25px;
}

table.dataTable th,
table.eConTABLE .eConTH,
.eConMatrixPropertiesLabel,
.eConMatrixLabel {
    padding: 0px 10px;
    font-size: 0.9em;
    font-weight: normal;
}

table.eConTABLE tr.eConTR {
    height: 46px;
}

table.eConTABLE td {
    background: white;
    border: none;
}

table.eConTABLE td.eConTD {
    padding: 5px 10px 5px 0;
    border-bottom: none;
}

table.eConTABLE tr.eConTR:first-child td.eConTD {
    border-top:  none;
}

table.eConTABLE tr.eConTR:last-child td.eConTD {
    border-bottom: 1px solid #DDDDDD;
}

table.eConTABLE td.eConTD:first-child {
    white-space: nowrap;
}

table.eConTABLE td.eConTD:first-child .eConLabelText {
    white-space: normal;
    display: inline-block;
    padding-top: 8px;
}

table.eConTABLE td.eConTD.extra-column {
    border-left: 1px solid #F8F8F8;
}

.eConControl,
.eConControl INPUT,
.eConControl SELECT,
.eConControl img,
.eConControl > span,
.eConControl > table {
    min-height: 30px;
    font-size: 14px;
}

button.eConButton.eConExpandCollapseReferenceButton.ui-button {
    margin-left: 5px;
}

.eConLabelText {
    font-size: 14px;
}

.eConLabelText.expandable {
    margin-left: 24px;
}

button.eConButton.eConExpandCollapseReferenceButton.ui-button + .eConLabelText {
    margin-left: 0px;
}

.touch .ui-preloadedCombobox,
.touch .ui-preloadedCombobox input.ui-preloadedCombobox-input,
.touch .ui-preloadedCombobox .ui-preloadedCombobox-toggle,
.eConTabularCombobox .ui-preloadedCombobox-toggle {
    padding-right: 0;
    height: 30px;
    position: relative;
}

.touch .ui-preloadedCombobox .ui-preloadedCombobox-toggle,
.touch .eConTabularCombobox .ui-preloadedCombobox-toggle {
    border: 0px;
    width: 30px;
    height: 30px;
    position: absolute;
    outline: none;
}

.eConRadioButtonsRow,
.eConRadioButtonsCell {
    display: inline-block;
}

.eConRadioButtons.cols .eConRadioButtonsRow {
    display: flex;
    flex-flow: row nowrap;
}

.touch .eConRadioButtonsCell {
    margin-right: 0px !important;
    margin-left: 10px;
}

.touch input[type=radio]:not(.hidden) + label:not(.ui-button):after {
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 5px;
    border-radius: 50%;
    border: none;
    transition-property: background-color, border-color, box-shadow;
    transition-duration: .1s;
    -webkit-transition-property: background-color, border-color, box-shadow;
    -webkit-transition-duration: .1s;
    background-repeat: no-repeat;
    background-position: -1000px -1000px;
    background-size: 80%;
 }

.touch input[type=radio]:not(.hidden) + label:not(.ui-button):after {
    content: "";
    display: inline-block;
    left: 0;
    width: 21px;
    height: 21px;
    border: 1px solid #DDDDDD;
    top: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: absolute;
    border-radius: 50%;
}

TD.likertscale input[type="radio"] {
    opacity: 1;
    position: absolute;
    top: 0;
        transform: translatex(-50%);
    width: 16px;
    height: 16px;
    z-index: 1;
}

.touch input[type=radio]:not(.hidden) + label.top:not(.ui-button):after {
    right: auto;
}

 .touch input[type=radio]:not(.hidden) + label.eConImageRadioLabel img {
    border: 1px solid #ccc;
}

.touch input[type=radio]:checked + label.eConImageRadioLabel img {
    border: 1px solid #3A96DD;
}

label.eConImageRadioLabel {
    padding-left: 0px !important;
}

label.eConImageRadioLabel:before,
label.eConImageRadioLabel:after {
     display: none !important;

}

label.eConImageRadioLabel.top:before,
label.eConImageRadioLabel.bottom:before,
label.eConImageRadioLabel.left:before,
label.eConImageRadioLabel.right:before,
label.eConImageRadioLabel.top:after,
label.eConImageRadioLabel.bottom:after,
label.eConImageRadioLabel.left:after,
label.eConImageRadioLabel.right:after {
    display: inline-block !important;
}

.sectionlabel:before,
.ui-dialog .ui-dialog-title:before,
.touch input[type=radio]:checked:not(.hidden) + label:not(.ui-button):after,
.title-bar:before {
    background-color: #3A96DD !important;
    border-color: #3A96DD !important;
}

.touch input[type=radio]:not(.hidden) + label.top:not(.ui-button) {
    padding-top:0;
}

.touch input[type=radio]:not(.hidden) + label.top:not(.ui-button),
.touch input[type=radio]:not(.hidden) + label:not(.left):not(.top):not(.bottom):not(.radioblock):not(.ui-button) {
    padding-left: 30px;
    padding-right: 20px;
}

.touch input[type=radio]:not(.hidden) + label.left:not(.ui-button):after {
    left: 0px;
    right: auto;
}

.touch input[type=radio]:not(.hidden) + label.left:not(.ui-button) {
    padding-left: 40px;
    padding-right: 0px;
}

.touch input[type="checkbox"]:not(.eConImageCheckbox) + label {
    height: 21px;
    margin-top: 5px;
}

.touch input[type="checkbox"]:checked:not(.eConImageCheckbox) + label {
    width:21px;
}

.touch input[type="checkbox"]:not(.eConImageCheckbox) + label:before {
    width: 15px;
    height: 15px;
}

.touch .eConRadioButtonsRow input[type=radio].radioblock:not(.hidden) + label.radioblock:not(.ui-button) {
    margin-right: -15px;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.eConDisabled {
    /* Vertical alignment of text */
    display: inline-block;
    padding-top: 8px;
    min-height: auto;
}

.touch .eConButtons .eConButton { /* Array buttons */
    height: 30px;
    width: 30px;
}

.touch table.eConTABLE.max1buttons .eConButtons {
    width: 30px;
}

.touch table.eConTABLE.max2buttons .eConButtons {
    width: 60px;
}

.touch table.eConTABLE.max3buttons .eConButtons {
    width: 90px;
}

.touch table.eConTABLE.max4buttons .eConButtons {
    width: 120px;
}

.touch table.eConTABLE.max5buttons .eConButtons {
    width: 150px;
}

.touch table.eConTABLE.max6buttons .eConButtons {
    width: 180px;
}

.eConSliderSlider.ui-slider {
    background: #eee;
    border: 0px;
    margin: 11px 0px 0px 0px;
    height: 5px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -6px !important;
    border-color: #3a96dd !important;
    background-color: #3a96dd !important;
}

.eConSlider .ui-slider-handle {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50%;
    background-image: none; /* Make sure accentcolor fills the whole handle */
}

.touch .ui-spinner:not(.notouch) {
    padding-right: 30px;
}

.touch .ui-spinner:not(.notouch) .eConSpinner {
    margin-right: 30px;
    left: 30px;
}

.touch .ui-spinner a.ui-spinner-button {
    border: 0px;
    background: #f8f8f8;
}

.touch .ui-spinner:not(.notouch) a.ui-spinner-button {
    height: 30px;
    width: 30px;
}

/* Center */
#oDocumentContentContainer {
    background: #F3F3F3;
    border-width: 0px;
    transition: width .3s;
    -webkit-transition: width .3s;
}

#oInfoContainerRow {
    left: auto;
}

#oMainContainer {
    position: relative;
}

/* Status bar */
#oMessageBoxContainer {
    background-color: white;
    position: absolute; /* IE fix */
}

#oMessageContainer .ui-preloadedPanel-header {
    border: 0px;
    padding-left: 10px;
}

.ui-preloadedPanel .ui-preloadedPanel-header .ui-icon {
    left: auto;
}

.ui-preloadedPanel .ui-preloadedPanel-header a {
    padding-left: 31px;
}

#oMessageBoxContainer .ui-preloadedPanel-content {
    padding-left: 10px;
}

#oInfoContainerRow {
    border-top: 1px solid #DDDDDD;
    border-width: 1px 0px 0px 0px;
    min-height: auto;
}

#oInfoContainerRow.hideshow {
    animation: hideshow .4s normal forwards;
    -webkit-animation: hideshow .4s normal forwards;
}

@keyframes hideshow {
    0% {
        bottom: 0px;
        left: auto;
    }

    25% {
        bottom: -60px;
        left: auto;
    }

    75% {
        bottom: -60px;
        left: auto;
    }

    100% {
        bottom: 0px;
        left: auto;
    }
}

#oInfoContainer {
    padding-top: 12px;
    padding-left: 10px;
    padding-right: 10px;
    height: 57px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#oInfoContainer,
#oInfoContainer * {
    text-align: left;
}

#oInfoContainer a:hover {
    color: #333;
}

.eConInfo {
    float: none;
}

#oInfoContainer .eConSwitchStyle {
    display: none;
    float: right;
}

.warning-icon {
    height: 34px;
    background-repeat: no-repeat;
    background-image: url("../../../images/MessageIcon.png");
    background-position: center center;
    margin-right: 5px;
    width: 25px;
    display: inline-block;
    float: left;
}

#htmMandatoryFields,
#oMessageButton {
    margin-top: 9px;
}

#htmMandatoryFields .ui-icon.ui-icon-alert,
#oMessageButton .ui-icon.ui-icon-alert {
    display: none;
}

div.econ-progressbar-small {
    position: fixed;
    bottom: 5px;
    width: 100%;
    max-width: 1500px;
    margin: 0px;
}

#oInfoContainerRow + div.econ-progressbar-small {
    bottom: 59px;
}

/* Progresstab in statusbar */
#oInfoContainerRow .eConTabs {
    display: block;
    position: static;
    clear: both; /* when using in combination with statusbar columns */
}

#oInfoContainer + .eConTabs .tab {
    border-top: 1px solid #ddd !important;
}

/* Status bar column value */
.statusbar-columns,
.statusbar-labels {
    float: right;
}

.statusbar-column {
    float: left;
}

.statusbar-column,
.statusbar-labels {
    height: 58px;
    margin-top: -12px;
    padding: 14px 0px 14px 50px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.statusbar-column .eConLabelText, .statusbar-column .value,
.statusbar-labels .eConLabelText, .statusbar-labels .value {
    text-align: right !important;
}

.statusbar-column .eConLabelText,
.statusbar-labels .eConLabelText {
    margin-left: 0px;
    padding-right: 0px;
    text-align: right;
    font-size: 0.8em;
}

.statusbar-column .value,
.statusbar-labels .value {
    text-align: right;
    font-size: 1.2em;
    font-style: italic;
    margin-top: 5px;
    margin-right: 2px;
}

/* Mandatory indicator */
.eConLabelMandatoryIndicatorText {
    display: none;
}

td.mandatory {
    position: relative;
}

td.mandatory.matrixproperties .eConControl:after,
td.mandatory.matrix .eConControl:after {
    top: 0px;
    right: 2px;
}

.ui-autocomplete {
    box-shadow: #bbbbbb -2px 0px 20px 1px;
}

.ui-progressbar-value.ui-widget-header {
    background: #F8F8F8 url("images/ui-bg_flat_75_f8f8f8_40x100.png") 50% 50% repeat-x;
}

/* Zoom Window */
.touch .eConTabularComboboxTableContainer {
    background-color: #f8f8f8;
    box-shadow: #bbbbbb -2px 0px 20px 1px;
}

.touch .eConTabularComboboxTableContainer th {
    border: 0px;
    padding-bottom: 0px;
    text-align: left;
}

.touch .eConTabularComboboxTableContainer .dataTables_scrollBody .dataTable {
    border-style: solid;
    border-color: #ddd;
    border-width: 1px 0px;
}

.touch .eConTabularComboboxTableContainer .dataTables_scrollHead,
.touch .eConTabularComboboxTableContainer .dataTables_scrollHead tr,
.touch .eConTabularComboboxTableContainer .dataTables_scrollHead th {
    background: none;
}

.touch .eConTabularComboboxTableContainer .ui-toolbar {
    background-color: white;
    height: 58px;
    padding: 16px 13px 0px 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.touch .eConTabularComboboxTableContainer .title-bar .ui-state-default {
    font-size: 16px;
}

.touch .eConTabularComboboxTableContainer .title-bar {
    margin: 53px 20px 20px 20px;
    padding-top: 0px;
    padding-right: 25px; /* Close Button */
}

.touch .eConTabularComboboxTableContainer .title-bar:before {
    height: 23px;
}

.touch .eConTabularComboboxTableContainer .dataTables_scroll {
    margin: 0px 20px;
}

.touch .eConTabularComboboxTableContainer .closePaneButton {
    top: 10px;
    right: 20px;
}

.touch .eConTabularComboboxTableContainer table.dataTable tbody tr {
    border: 0px;
}

/* Focus */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #ffffff;
}

/* Dialogs */
.ui-dialog .ui-dialog-titlebar {
    border: 0;
    padding-top: 12px;
}

.ui-dialog .ui-dialog-title {
    font-size: 1.1em;
    text-transform: uppercase;
}

.ui-dialog .ui-dialog-title:before {
    content: "";
    position: relative;
    left: 0px;
    top: 0px;
    color: transparent;
}

.ui-dialog .ui-dialog-titlebar-close {
    margin-top: -6px;
    margin-right: 8px;
}

.ui-dialog {
    padding: 0px;
    border: 0px;
    box-shadow: #666 0px 0px 15px 0px;
    background: white;
}

/* Run As Child Dialog */
.configure-input-dialog.ui-dialog-content {
    background: #f8f8f8;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* HowWhy */
.howwhy .ui-state-default.eConLabelText { /* Row Headers */
    font-size: 1em;
}

.howwhy h3 {
    text-transform: uppercase;
}

.howwhy th,
.howwhy td {
    padding-left: 0px;
}

.howwhy .sectionlabel {
    padding-left: 2px;
    padding-top: 10px;
}

.howwhy input:not([type=radio]) { /* otherwise iPad shows a annoying gradient + rounded corners */
    -webkit-border-radius: 0;
    border-radius: 0px;
    -webkit-appearance: none;
}

/* Labelclass styles */
.notcapital {
    text-transform: none;
    font-size: 11.55px;
}

.notbold {
    font-weight: normal;
    letter-spacing: 0px;
    font-family: 'Segoe UI',Tahoma,Arial,sans-serif;
}

/* Tree styles */
#oTreeContainer {
    margin-top: 10px;
    border-right: 1px solid #ddd;
}

.eConTree ul {
    padding-left: 0px;
}

.eConTree ul .eConTreeNodeLine {
    border: 0px;
    min-height: 30px;
    padding-left: 5px;
}

.eConTree ul .eConTreeNodeLine .eConButton {
    border: 0px;
    background: none;
}

.eConTree ul .eConTreeNodeLine .eConTreeNodeLink {
    padding-top: 12px;
    padding-bottom: 12px;
    width: auto;
}

.eConTree ul .eConTreeNodeLine .eConTreeNodeLabel {
    font-size: 0.95em;
    text-transform: uppercase;
}

#oMain3Container {
    border-left: 0px;
}

/* Scroll styles */
.scroll-wrapper .scroll-element .scroll-arrow {
    display: none;
}

.scroll-wrapper .scroll-element.scroll-element_arrows_visible .scroll-arrow {
    display: block;
    z-index: 12;
    cursor: pointer;
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_less {
    height: 100%;
    width: 30px;
    border-right: 1px solid #ddd;
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_more {
    height: 100%;
    left: auto;
    right: 0;
    width: 30px;
    border-left: 1px solid #ddd;
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_outer {
    left: 30px;
    right: 30px;
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_inner {
    left: -60px;
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_size {
    left: -60px !important;
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow {
    top: -50px;
    height: 50px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_less {
    background-image: url(images/arrow_left.png?v=3);
}

.scroll-wrapper .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_more {
    background-image: url(images/arrow_right.png?v=3);
}

/* Responsive */

@media only screen and (max-height: 750px) {
    #oInfoContainer {
        height: 45px;
        padding-top: 5px;
    }

    #oInfoContainerRow + div.econ-progressbar-small {
        bottom: 47px;
    }
}

@media only screen and (max-height: 600px) {
    .configViewbox:not(.ui-widget) table.configTable {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    #oTreeContainer {
        margin-top: 5px;
    }

    #oInfoContainer {
        height: auto;
        padding: 0px;
    }

    #oInfoContainerRow + div.econ-progressbar-small {
        bottom: 36px;
    }
}

@media only screen and (max-height: 400px) {
    .eConTabs.ui-widget li.tab.ui-state-active.ui-state-default a,
    .eConTabs.ui-widget li.tab.ui-state-hover.ui-state-default a {
        padding-bottom: 10px;
    }

    #overflowButton .ui-ribbon-button-text {
        top: 7px;
    }

    .configViewbox:not(.ui-widget) table.configTable {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .configViewbox:not(.ui-widget) table.eConTABLE tr.eConTR:first-child td.eConTD {
        border-top-width: 0px;
    }

    .configViewbox:not(.ui-widget) table.eConTABLE tr.eConTR:last-child td.eConTD {
        border-bottom-width: 0px;
    }

    #oTreeContainer {
        margin-top: 0px;
    }
}

.ui-ribbon-button {
    width: 100%;
}

.ui-ribbon-button-icon {
    left: 0;
}

.ui-tooltip {
    background: white;
}

table.eConTABLE .eConTH {
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    height: 30px;
    text-transform: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 10px;
    width: calc((100%) - 10px);
    padding: 0;
    color: #333;
}

.touch input[type=checkbox]:not(.hidden):not(.ui-state-disabled):not(.eConImageCheckbox):active + label,
.touch input[type=checkbox]:not(.hidden):not(.ui-state-disabled):not(.eConImageCheckbox):focus + label,
.touch input[type=radio]:not(.hidden):not(.ui-state-disabled):not(.ui-button):active + label:after,
.touch input[type=radio]:not(.hidden):not(.ui-state-disabled):not(.ui-button):focus + label:after {
    box-shadow: none;
}

.touch input[type="checkbox"]:not(.eConImageCheckbox) + label {
    background: #DDD;
}

.touch input[type=checkbox]:checked:not(.hidden):not(.eConImageCheckbox).ui-state-disabled + label {
    background: #3A96DD;
    opacity: 0.35;
}

.touch input[type=checkbox]:not(.hidden):not(.eConImageCheckbox).ui-state-disabled + label,
.touch input[type=radio]:not(.hidden).ui-state-disabled + label:after {
    background: #DDD;
    opacity: 0.35;
}

A.eConP:hover {
    color: #3A96DD;
}

div.eConTabs .tab.ui-state-active,
div.eConTabs .tab.ui-state-hover,
div.eConRibbon li .eConButton.ui-ribbon-button:hover,
div.eConRibbon li .eConButton.ui-ribbon-button.ui-state-active {
    border-bottom: none !important;
}

.ui-ribbon-button .ui-ribbon-button-icon {
    margin: 0;
    top: 0;
    height: 28px;
    width: 28px;
    margin: 6px;
    left: 0;
    background-repeat: no-repeat !important;
}

.eConRibbonButtonIcon-help {
    background: url('images/ui-icon_help.svg');
}

.eConRibbonButtonIcon-exit {
    background: url('images/ui-icon_exit.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-collapseall {
    background: url('images/ui-icon_collapseall.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-expandall {
    background: url('images/ui-icon_expandall.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-post {
    background: url('images/ui-icon_post.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-postandexit {
   background: url('images/ui-icon_postandexit.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-print {
    background: url('images/ui-icon_print.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-process {
    background: url('images/ui-icon_process.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-processandexit {
    background: url('images/ui-icon_processandexit.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-refresh {
    background: url('images/ui-icon_refresh.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-restart {
    background: url('images/ui-icon_restart.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-save {
    background: url('images/ui-icon_save.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-saveandexit {
    background: url('images/ui-icon_saveandexit.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-saveastemplate {
    background: url('images/ui-icon_saveastemplate.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-savetemplateandexit {
    background: url('images/ui-icon_savetemplateandexit.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-delete {
   background: url('images/ui-icon_delete.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-new {
    background: url('images/ui-icon_new.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-function {
    background: url('images/ui-icon_function.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-ok {
    background: url('images/ui-icon_ok.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-cancel {
    background: url('images/ui-icon_cancel.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-true {
   background: url('images/ui-icon_true.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-false {
  background: url('images/ui-icon_false.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-previous {
 background: url('images/ui-icon_previous.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-next {
   background: url('images/ui-icon_next.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-last {
    background: url('images/ui-icon_last.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-home {
    background: url('images/ui-icon_home.svg');
}

.ui-ribbon-button .eConRibbonButtonIcon-wizard {
    background: url('images/ui-icon_wizard.svg');
}

.eConRibbon li.ui-ribbon-item .eConButton.ui-ribbon-button:hover {
    border-bottom: none !important;
}

.ui-state-default .ui-icon {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ui-buttonset {
    display: flex;
    flex-direction: row;
}

.ui-buttonset .ui-button {
    width: 30px;
    height: 30px;
    border: 0;
}

table.dataTable thead th div.DataTables_sort_wrapper {
    padding-right: 34px;
}

table.dataTable thead th div.DataTables_sort_wrapper span {
    margin-top: -2px;
    left: inherit;
    right: -8px;
}

.touch .ui-spinner:not(.notouch) a.ui-spinner-down .ui-icon.ui-icon-triangle-1-s,
.touch .ui-spinner:not(.notouch) a.ui-spinner-up .ui-icon {
    margin: 0px;
}

.ui-dialog .ui-dialog-titlebar-buttonpane > a {
    position: relative;
}

.eConTree ul ul .eConTreeNodeLine.selected {
    background: #3a98DD;
}

.eConTree ul ul .eConTreeNodeLine.selected .eConTreeNodeLink {
    color: white;
}

table.dataTable thead th div.DataTables_sort_wrapper span {
    right: 6px !important;
}

.sectionlabel:before {
    padding: 0;
    margin-right: 0;
}

.eConTree {
    width: 100% !important;
    height: 100% !important;
}

.eCon32x32IconButton.ui-button-icon-only .ui-icon {
    margin-left: 0;
    margin-top: 0;
}

.touch input[type=text] {
    box-sizing: content-box;
}

TD.eConMatrixPropertiesLabel, TD.eConMatrixLabel {
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 2px !important;
}

#header {
    background: #636466;
}

.eConLogo {
    display: none !important;
}

.buttonTabBar {
    background: #00A8E3;
}

#header {
  background: #231f20;
}

.buttonTabBar {
  background: #fbe100;
}

.buttonTabBar .ui-ribbon-button-text:hover {
  background-color: #000000;
}

.buttonTabBar .ui-state-hover {
  background-color: #000000;
}

.buttonTabBar ul {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.table tr td[data-column-name="Bekijken"] a {
  color: transparent;
  position: relative;
}

.table tr td[data-column-name="Bekijken"] a::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000000' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
  width: 18px;
  height: 18px;
  position: absolute;
  top: -5px;
  left: 10px;
}

.table.t\:table.font-j.elements-table tr th:last-child,
.table.t\:table.font-j.elements-table tr:not(:last-child) td:last-child {
  display: none !important;
}