/*----------------- basic html layout ------------------------------ */
html,body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-size:12px;
}

html {
	overflow: auto;
}

body {
	min-width:1240px; /*This should be later replaced by responsive styles*/
}

/*----------------- basic elements --------------------------------- */
/*JHM TEST

td, button {
	font-size:0.75rem;
}

table {
	border-collapse:collapse;
	border-spacing: 0;
} /*JHM NOTE: to be applied and tested in the revamp version*/

/*----------------- basic containers ------------------------------ */
#document {
	width: 100%; 
}

#publicDocument {
	min-width: 320px;
	width: 99.5%;
}

#header {
	width: 100%;
	position: sticky;
	top: 0px;
	height: 40px;
	z-index: 4;
	box-shadow: 0 0px 6px 2px rgb(0 0 0 / 30%) /*0 2px 5px 0 rgb(0 0 0 / 10%)*/; /*JHM 230316 - Cloud style*/
}

.fullpage #header {
	position: relative;
	top: auto;
}

#content {
	clear: left;
	float: left;
	height: 100%; 
	width: calc(100vw - 1.5rem);
	padding: 1.5rem 1rem;
}

.fullpage #content {
	width: auto;
}

#content.leftPanelMenu {
	width: calc(100vw - 1.5em - 262px);
}

#content.leftPanelMenu.minimized {
	width: calc(100vw - 1.5em - 16px);
}

#contentstart {
	clear: left;
	float: left;
	width: 100%;
	/*margin-top: 2px;*/
	min-height: 750px;
}

#footer {
	clear: left;
	position: fixed;
	bottom: 0px;
	box-shadow: 0 -2px 4px 0 rgb(0 0 0 / 10%);
	width: 100%;
	text-align: left;
	float: left;
	z-index: 750;
	height: 22px;
	background-color: #fff;
}

.fullpage #footer {
	position: relative;
	bottom: auto;	
}

#footer #footerForm .ui-toolbar {
	padding: 2px;
	padding-right: 0.5rem;
}

#footer .left.footer {
	padding-top:0 !important;
	width:fit-content; /*added for calculator icon*/
}

/*.bottomtoolbar {
	height: 32px;
}/*JHM TEST*/

#tooltip {
	position: absolute;
	z-index: 3000;
	font-size: 8pt;
	font-style: normal;
	white-space: pre-wrap;
	border: 1px solid #A8A8A8;
	border-radius: 3px 3px 3px 3px;
	background-color: #fff;
	padding: 10px;
	opacity: 1;
}

.grid-item-1-2 {
  row-gap: 2px;
  column-gap: 0px;
  white-space: nowrap;
  grid-column: 1 / 3;
}
.grid-item-1 {
  row-gap: 2px;
  column-gap: 0px;
  white-space: nowrap;
  grid-column: 1 / 2;
}
.grid-item-2 {
  row-gap: 2px;
  column-gap: 0px;
  white-space: nowrap;
  grid-column: 2 / 3;
}

.grid-item {
  display: initial;
  row-gap: 2px;
  column-gap: 0px;
  grid-template-columns: min-content;
  grid-template-rows: min-content;
  white-space: nowrap;
}

.grid-item-center {
  display: flex;
  align-items: center;
  row-gap: 2px;
  column-gap: 0px;
  grid-template-columns: min-content;
  grid-template-rows: min-content;
  white-space: nowrap;
}

.grid-item-bottom {
  display: flex;
  align-items: flex-end;
  row-gap: 4px;
  column-gap: 0px;
  grid-template-columns: min-content;
  grid-template-rows: min-content;
  white-space: nowrap;
}

.grid-item-center {
  display: flex;
  align-items: center;
  row-gap: 4px;
  column-gap: 0px;
  grid-template-columns: min-content;
  grid-template-rows: min-content;
  white-space: nowrap;
}

.grid-item-normal {
	display: flex;
	align-items: normal;
	row-gap: 4px;
	column-gap: 0px;
	white-space: nowrap;
}

.grid-container-1-max {
	grid-template-columns: max-content !important;
}

.grid-container-2-max {
	grid-template-columns: max-content max-content !important;
}

.grid-container-3-max {
	grid-template-columns: max-content max-content max-content !important;
}

.grid-container-4-max {
	grid-template-columns: max-content max-content max-content max-content !important;
}

.grid-container-5-max {
	grid-template-columns: max-content max-content max-content max-content max-content !important;
}

.grid-container-6-max {
	grid-template-columns: max-content max-content max-content max-content max-content max-content !important;
}

.grid-container-7-max {
	grid-template-columns: max-content max-content max-content max-content max-content max-content max-content !important;
}

.grid-container-8-max {
	grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content !important;
}

.grid-container-1,
.grid-container-2,
.grid-container-3,
.grid-container-4,
.grid-container-5,
.grid-container-6,
.grid-container-7,
.grid-container-8,
.grid-container-9,
.grid-container-10,
.grid-container-11,
.grid-container-12,
.grid-container-narrow,
.grid-container-1-narrow,
.grid-container-2-responsive,
.grid-container-2-responsive-Plus,
.grid-container-3-responsive,
.grid-container-3-responsive-Plus {
  display: grid;
  row-gap: 4px;
  column-gap: 4px;
  grid-auto-rows: min-content;
  white-space: nowrap;
}

.grid-container-1 {
  grid-template-columns: min-content;
}

.grid-container-narrow,
.grid-container-1-narrow {
  row-gap: 2px;
  column-gap: 2px;
}

.grid-container-2 {
  grid-template-columns: min-content min-content;
}
.grid-container-3 {
  grid-template-columns: min-content min-content min-content;
}
.grid-container-4 {
  grid-template-columns: min-content min-content min-content min-content;
}
.grid-container-5 {
  grid-template-columns: min-content min-content min-content min-content min-content;
}
.grid-container-6 {
  grid-template-columns: min-content min-content min-content min-content min-content min-content;
}
.grid-container-7 {
  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
}
.grid-container-8 {
  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content min-content;
}
.grid-container-9 {
  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content min-content min-content;
}
.grid-container-10 {
  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content;
}

.grid-container-11 {
  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content;
}

.grid-container-12 {
  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content min-content;
}

.gridColumnGapPlus,
.grid-container-2-responsive-Plus,
.grid-container-3-responsive-Plus {
column-gap: 0.75rem;
}

.grid-container-2-responsive {
    grid-template-columns: calc(50% - 2px) calc(50% - 2px);
}

.grid-container-3-responsive {
    grid-template-columns: calc(33% - 1px) calc(33% - 1px) calc(33% - 1px);
}

.grid-container-3-responsive-Plus {
    grid-template-columns: calc(33% - 0.4rem) calc(33% - 0.4rem) calc(33% - 0.4rem);
}

.grid-container-2-responsive-Plus {
    grid-template-columns: calc(50% - 0.4rem) calc(50% - 0.4rem);
}

.gridRowGapPlus {
row-gap: 0.75rem;
}

.gridTemplateNone {
grid-template-columns:none;
}

.blocklabel {
	display:block;
}

#tooltip h3, #tooltip div { margin: 0; }

.prefmenu {
	border: none;
}

.left {
	padding-top: 4px;
}

.footer {
	font-size: 1rem;
}

.validationCalculationPopUp {
	z-index: 6000 !important;
	margin-left: 10% !important;
	margin-right: 10% !important;
	margin-top: 2% !important;
	margin-bottom: 5% !important;
}

.killSurroundingBorders td, .killSurroundingBorders tr {
	border: none !important;
}
.killSurroundingBorders .ui-datagrid-content {
	color: black;
	border: none !important;
	background: none !important;
}
.ui-datatable table.stopKillingBorders table {
	border-collapse: separate;
}

/*------------------- common classes ---------------------*/

.hidden{
	display: none;
}

.floatLeft {
	float:left;
}

.floatRight {
	float:right;
}

.clear {
	clear: both;
}

div[id$=reportButton_menu] {
	min-width: 14em;
	width: auto;
}

div[id$=reportButton_menu] .ui-splitbuttonmenu-list-wrapper {
	overflow-x: hidden;
}

div[id$=multiReportButton_menu] {
	min-width: 14em;
	width: auto;
}

div[id$=multiReportButton_menu] .ui-splitbuttonmenu-list-wrapper {
	overflow-x: hidden;
}

div[id$=reportButtonAsk_menu] {
	min-width: 14em;
	width: auto;
}

input.ui-inputfield::placeholder {
    color: #c0c0c0;
}

/*** Loading ***/
.nonBlockingAjaxStatus {
	pointer-events: none;
}

.loadingSpinner {
	z-index:10000;
}
.loadingSpinner .pi.pi-spinner{
	font-size: 7rem;
    color: var(--main-color-alt);
}
.loadingSpinner.ui-dialog-mask.ui-widget-overlay {
	cursor: wait;
}

/*** BUTTONS ***/
.buttonSelectClass {
	background-color: white;
	width: 53px;
	border: 1px solid #BFBFBF;
}

body .ui-button.ui-button-icon-only .ui-icon {
    margin-top: -0.5rem;
    margin-left: -1rem;
    width: 2rem;
}

.iconResetTimeout {
	margin-left: 3px;
}

.externalStatusButton {
	text-align: left; width: 89%
}

/*** Section common styles ***/

.sectionTitle {
	font-size: 1.5rem;
}

.sectionSubTitle , 
.subSectionTitle {
	font-size: 1.25rem;
}

.subSectionTitle,
.subSectionSubTitle {
	margin:0 auto 2rem;
	display: block;
}

.subSectionSubTitle {
	font-size: 1rem;
}

.subSectionTitle + .subSectionSubTitle {
	margin: -1.5rem auto 2rem;
}

.sectionContent {
	margin: auto;
}

.sectionButtons {
	margin-top: 2rem;
}

.sectionButtons button {
	float:left;	
}

.sectionButtons button.lastBT {
	float:right;
}

/***table footer split button***/
.ui-datatable-footer .ui-splitbutton .ui-button.ui-splitbutton-menubutton .ui-icon.ui-icon-triangle-1-s {
	width: auto;
	font-size: 0.75rem;
	margin-top: -0.35rem;
	margin-left: -0.4rem;
}

.ui-datatable-footer .ui-splitbutton .ui-button {
	border: 1px solid var(--gray-300) !important;
}

.ui-datatable-footer .ui-splitbutton .ui-button:first-child {
	border-right: 0 none !important;
}

/*** TABLES ***/
.tdleft, tr.tdleft td {
	text-align: left;
}

tfoot td.tdmiddle, .tdmiddle {
	text-align: center;
}

thead th.tdright {
	text-align: center !important;
}

tbody td.tdright, .tdright, td.tdright {
	text-align: right !important;
}
tfoot td.tdright  {
	text-align: right;
}

.pic {
	margin-bottom: -4px;
	margin-right: 2px;
}

.dataTableFooterRight .ui-datatable-footer {
	text-align: right;
	padding-right: 3px;
}

.highlight {
	color: red;
	font-size: 125%;
	font-weight: bold;
}

.highlight a {
	color: red;
}

.highlightNegativeAmount {
	color: red;
}
div.highlightNotAvailable a label, input.highlightNotAvailable, div.highlightNotAvailable > input {
	text-decoration: line-through !important;
	color: red !important;
}

.columnTitle {
	font-weight: bold;
}

.columnData {
	vertical-align: top;
	padding: 0px;
	margin: 0px;
}

.dataTableAlignTop>div>table>tbody>tr>td {
	vertical-align: top;
}

.tariffGridLayoter {
	vertical-align: top;
	padding: 0px;
	margin: 0px;
	border-spacing: 2px;
}
.panelGridLayouter {
	vertical-align: top;
	padding: 0px;
	margin: -2px;
	border-spacing: 2px;
}

table.panelGridLayouter>tbody>tr>td,
.default table.panelGridLayouter>tbody>tr>td,
.compact table.panelGridLayouter>tbody>tr>td {
	vertical-align: top !important;
	padding: 0 !important;
	margin: 0 !important;
}

.panelGridAlignTop {
	vertical-align: top;
}
table.panelGridAlignTop>tbody>tr>td {
	vertical-align: top !important;
}

.panelGridLayouterAlignBottom {
	vertical-align: bottom;
	padding: 0px;
	margin: -2px;
	border-spacing: 2px;
}
table.panelGridLayouterAlignBottom>tbody>tr>td {
	vertical-align: bottom !important;
	padding: 0 !important;
	margin: 0 !important;
}
.ui-datatable .ui-datatable-data td table.panelGridLayouterAlignBottom>tbody>tr>td {
	vertical-align: bottom;
	padding: 0 !important;
	margin: 0 !important;
}

.panelGridLayouterNoAlign {
	padding: 0px;
	margin: -2px;
	border-spacing: 2px;
}
table.panelGridLayouterNoAlign>tbody>tr>td,
.ui-datatable .ui-datatable-data td table.panelGridLayouterNoAlign>tbody>tr>td {
	padding: 0 !important;
	margin: 0 !important;
}

.panelGridLayouterAlignMiddle {
	vertical-align: middle;
	padding: 0px;
	margin: -2px;
	border-spacing: 2px;
}
table.panelGridLayouterAlignMiddle>tbody>tr>td {
	vertical-align: middle !important;
	padding: 0 !important;
	margin: 0 !important;
}
.ui-datatable .ui-datatable-data td table.panelGridLayouterAlignMiddle>tbody>tr>td {
	vertical-align: middle;
	padding: 0 !important;
	margin: 0 !important;
}

.referenceOrFreetext input {
	width: 160px;
}
.referenceOrFreetext .referenceOrFreetext-freetext {
	font-weight: normal !important;
	color: #0000ff !important;
}
.referenceOrFreetext .referenceOrFreetext-reference {
	font-weight: bold !important;
}

.spacer-between-label-and-component {
	width: 2px;
}

.spacer-to-next-component {
	width: 5px;
}

input[type=image]:hover, input[type=image]:focus {
	outline: dashed blue 1px;
}

.borderedDivText {
	padding: 2px;
	overflow: auto;
	border: #C4C0C9 1px solid;
	background-color: white;
}

.disabled,
a.disabled i {
	color: #C4C0B9;
}

label.ui-state-disabled {
	opacity: .35;	
}

.pallet {
	cursor: url("../images/forky.png"), move;
}

.clear {
	clear: both;
}

.businessrule_0 {
	background-color: #ffdddd;
	color:black;
	padding: 3px;
}
.businessrule_1 {
	background-color: #ddffdd;
	color:black;
	padding: 3px;
}
.businessrule_2 {
	background-color: #ECE5B6;
	color:black;
	padding: 3px;
}
.header a,table.header a {
	text-decoration: none;
}

.tariffTable td {
	vertical-align: top;
}

td.middle, table.panelGridLayouter > tbody > tr > td.middle {
	vertical-align: middle !important;
}

.panelGridLayouter .panelGridLayouter.stopKillingBorders {
	margin: 0;
	padding: 0;
}

.error {
	border-color: red !important;
}

.defaultCheckBoxMenuMulti {
	min-width: 150px;
	max-width: 410px;
}

.defaultCheckBoxMenu {
	min-width: 170px !important;
	max-width: 170px !important;
	display: block !important;
	margin: 0px !important;
	padding: 0px !important;
	white-space: nowrap;
	overflow: hidden;
}
.defaultCheckBoxMenu .ui-selectcheckboxmenu-label {
	white-space: pre-wrap !important;
}
.defaultCheckBoxMenu .ui-selectcheckboxmenu-panel {
	width: 180px !important;
}
.defaultCheckBoxMenu .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper {
	height: 100px !important;
}

.largeCheckBoxMenu {
	width: 220px !important;
	display: block !important;
	margin: 0px !important;
	padding: 0px !important;
	white-space: nowrap;
	overflow: hidden;
}
.largeCheckBoxMenu .ui-selectcheckboxmenu-panel {
	width: 180px !important;
}
.largeCheckBoxMenu .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items-wrapper {
	height: 100px !important;
}

body .defaultSelectOneMenu {
	min-width: 13rem !important; /*JHM 461*/
    max-width: 13.45rem !important; /*JHM 461*/
	display: block !important;
}

.defaultSelectOneMenu .ui-selectonemenu-label {
	white-space: nowrap !important;
}

.mediumSelectOneMenu {
	width: 220px !important;
	display: block !important;
}
.mediumSelectOneMenuPanel {
	width: 220px !important;
}
.largeSelectOneMenu {
	width: 265px !important;
	display: block !important;
}
.largeSelectOneMenuPanel {
	width: 265px !important;
}

/* This seems to be not useful anymore JHM-1578
.defaultAutocomplete {
	margin-right: 2px;
}*/
.relativeDateAutoComplete {
	margin-right: 0px;
}
.relativeDateAutoComplete input {
	width: 100px !important;
}
.defaultAutocomplete input {
	width: 138px !important;
}

span.ui-autocomplete.defaultAutocomplete.td-autocomplete {
	grid-template-columns: min-content min-content !important; /* We have to override element style! */
}

span.ui-autocomplete.realylargeautocomplete {
	grid-template-columns: min-content min-content !important; /* We have to override element style! */
}

a.tms {
	text-decoration: none;
}
a.fa {
	text-decoration: none;
}
a.far {
	text-decoration: none;
}

a.fas {
	text-decoration: none;
}

.tableimage.ui-icon {
	display: inline-block !important;
	margin-right: 4px;
	vertical-align: middle;
}

.tableimage.fa {
	display: inline-block !important;
	margin-right: 4px;
	vertical-align: middle;
	margin-top: 2px;
}

.tableimage.far {
	display: inline-block !important;
	margin-right: 4px;
	vertical-align: middle;
	margin-top: 2px;
}

.tableimage.fas {
	display: inline-block !important;
	margin-right: 4px;
	vertical-align: middle;
	margin-top: 2px;
}

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

.standardLayout {
	width: auto;
}

.standardLayout td {
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}



div.ui-dt-c img {
	vertical-align: middle;
}

.smallautocomplete input {
	width: 80px;
}
.mediumAutocomplete input {
	width: 274px !important;
}

.largeautocomplete input {
	width: 175px;
}
.realylargeautocomplete input {
	width: 474px;
}

.multipleAutocompleteVertical  {
	margin: 1px;
}

.multipleAutocompleteVertical .ui-autocomplete-token {
	background: none;
	float:none;
	margin-right: 7%;
}

.autoCompleteGrid {
	display: flex; 
	grid-template-columns: auto min-content;
}


.td-autocomplete .ui-autocomplete-dropdown {
	right: -1px;
}

.ui-autocomplete-input.ui-autocomplete-dd-input {
    padding-right: 0;
}

.ui-autocomplete .ui-autocomplete-dropdown {
	position: relative;
    right: unset;
    margin-left: -1px; /* so that input field's right border and button's left border overlap! */
    margin-right: 0; /* so that input field's right border and button's left border overlap! */
}

span.ui-autocomplete {
	display: inline-flex;
	grid-template-columns: auto min-content;
}

span.ui-autocomplete.defaultAutocomplete {
	display: inline-flex;
	grid-template-columns: min-content min-content;
}

.ui-autocomplete.ui-autocomplete-multiple.maximize-multi-autocomplete {
	display: grid;
	grid-template-columns: auto min-content;
}

.ui-autocomplete.ui-autocomplete-multiple.maximize-multi-autocomplete > ul.ui-autocomplete-multiple-container {
	min-width: 100%;
	box-sizing: border-box;
}

.ui-autocomplete input.ui-corner-left {
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-calendar > input.hasDatepicker {
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.ui-calendar > button.ui-datepicker-trigger {
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    text-shadow: none;
}

.coloumnCharginTerm1 {
	width: 25%;
}
.coloumnCharginTerm2 {
	width: 75%;
}

.sixtyPercent {
	width: 60%;
}

.thirtyPercent {
	width: 30%;
}

.addressPanel {
	width: 258px;
	height: 108px;
}

.orderAddressPanel {
	width: 256px;
	height: 78px;
}

.charginTermAddressPanel {
	width: 195px;
	height: 108px;
}

.dataListNoBorder .ui-datalist-content {
	border: none !important;
	background: none !important;
	padding: 0px !important;
}

.dataListNoBorder td.ui-datagrid-column, 
.dataListNoBorder .ui-datagrid-row td.ui-datagrid-column, 
.dataListNoBorder table.ui-datagrid-data,
.dataListNoBorder div.ui-widget-content {
	border: none !important;
	background: none !important;
	padding: 0px !important;
}

.dataListNoBorder .ui-widget-content .ui-datalist-data:not(.ui-datalist-item) {
	border: none;
	background: none;
	padding: 0px;
	margin: 0px;
}

.ui-widget .defaultManyMenu {
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: none;
	color: #313131;
	border: 1px solid #A8A8A8;
	padding: 4px;
	overflow-y: auto;
}

button.twoIcons>span.ui-button-text {
	padding: 0.4em 1em 0.4em 3.6em;
}

div.noInnerPadding>div.ui-panel-content {
	padding: 0px;
}

.ui-datatable .ui-datatable-data td.innertable,
table tr td.innertable,
.innertable td {
	padding: 0px;
	vertical-align: bottom;
}

.noborder .ui-datatable .ui-datatable-data td,
.noborder .ui-datatable .ui-datatable-data-empty td,
td.noborder,
.ui-datatable tbody td.noborder,
table.innertable td.noborder {
	border: none;
}

tr.topAlignedTR {
	vertical-align: top;
}

.autocompletenowrap {
	white-space: nowrap;
}

.currencyValueColumn {
	text-align: right;
}

.currencyColumn,
td.currencyColumn,
.ui-datatable .ui-datatable-data td.currencyColumn,
.ui-datatable .ui-datatable-data-empty td.currencyColumn {
	text-align: right;
	width: 5px;
	padding-left: 2px;
}
.ui-datatable tfoot td.currencyColumn,
.ui-datatable tfoot td.currencyValueColumn {
	text-align: right;
}

.welcomePageButton, .closeButton {
	background: linear-gradient(to bottom, #c2c1bc 0%,#f0f0f0 50%,#dedede 100%);
}

.welcomePreferences .ui-overlaypanel-content, 
.welcomePreferences .ui-menu {
	padding: 0 !important;
	border:none;
}

.closeButton:hover {
	box-shadow: 0 0 1.5em red;
}

.chargingConditionDistance {
	width: 63px;
}

.bottomAligned {
	vertical-align: bottom;
}
.topAligned {
	vertical-align: top !important;
}
.middleAligned {
	vertical-align: middle !important;
}

/** Icons**/
a.ui-icon {
	border:none;
	border-radius: 0;
}

/** Caret **/
.ui-icon-carat-2-n-s {
  background-image: none !important;
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-indent: 0px !important;
  text-align: center; 
}

.ui-icon-triangle-1-n,
.ui-icon-triangle-1-s {
  background-image: none !important;
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-indent: 0px !important;
  text-align: center; 
}

.ui-spinner .ui-icon-triangle-1-n {
    margin-top: -4px;
}

.ui-icon.ui-sortable-column-icon {
	height: auto;
}

.ui-menuitem .ui-menuitem-icon {
    line-height: inherit;
}

.noSpacePanel,
.noSpacePanel div.ui-panel-content {
	padding: 0px;
	border: 0 none;
}
.comparisonHelperPanel {
	margin-top:1px;
	margin-bottom:2px;
	margin-right:2px;
	padding: 0px;
	height:10px;
	width:10px;
}

/* fix for #947 */
div.ui-panel .ui-panel-content {
	padding: 0.5rem /*0.5em 0.4em*/;
}

.ui-widget-header.headerPanel {
	font-size:1.2rem;
	font-weight:500;
	border-bottom: 1px solid #cccdd1 !important;
}

.ui-widget-header.headerPanel .ui-panel-content.ui-widget-content {
	margin-left:0.75rem;
}

.actioncolumn {
	width: 80px;
}

.rowButton {
	height: 20px !important;
}

span.ui-autocomplete.dropDownIcon input.referenceOrFreetext-freetext.ui-autocomplete-input, span.ui-autocomplete.dropDownIcon input.referenceOrFreetext-reference.ui-autocomplete-input {
	background-image: url("../images/refOrFreetext.png");
	background-repeat: no-repeat;
	background-position: right center;
}

div div.clickableAutocompleteField {
	position: absolute;
	cursor: pointer;
	width: 16px;
	height: 23px;
	right: 4px;
	top: -5px;
	background-color: white;
	filter: alpha(opacity=0);
	opacity: 0.0;
}
.orderCustomizer {
	position: absolute;
	top:0.8%;
	right:0.5%;
}

.routingResource .ui-inputfield {
	width: 112px;
}

.iconColumn {
	width: 20px;
}
.iconColumn2 {
	width: auto;
}

td.halfWidthColumn {
	width: 50%;
}
td.oneThirdWidthColumn {
	width: 33%;
}
td.twoThirdWidthColumn {
	width: 66%;
}

.ui-datatable .ui-datatable-data td table>tbody>tr>td.middleAlignColumn {
	vertical-align: middle !important;
}

.largeValidatableInput {
	width: 250px;
}
.extraLargeValidatableInput {
	width: 500px;
}
.compactValidatableInput {
	width: 60px;
}
.normalValidatableInput {
	width: 137px;
}
.largeValidatableInputVertical {
	height: 125px;
}
.compactValidatableInputVertical {
	height: 30px;
}
.normalValidatableInputVertical {
	height: 68px;
}

.fakerow_true {
	background-color: #ccc;
}

.dottedBackground, table.dottedBackground > tbody > tr > td, table.dottedBackground > thead > tr > th {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=) !important;
}

tr.currentDragTarget {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=) !important;
}

div.ui-datatable.currentDragTarget > div.ui-datatable-tablewrapper > table > tbody > tr > td {
	border: 1px solid #A8A8A8;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=) !important;
}

div.dispoTourTile.currentDragTarget {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=) !important;
}

/*--- Dispo Resources ---*/

.resourcesButtons {
	white-space: nowrap; 
	padding-right: 4px;
}

.resourcesButtons .ui-button {
	margin-right: 1px; 
	padding-right: 0px; 
	margin-top: 4px;
}

.resourcesButtons .ui-button:first-of-type {
	margin-left: 4px; 
}

body .resourcesButtons .ui-button.ui-button-icon-only .ui-icon.tms {
	font-size: 1.2rem;
	margin-top: -0.65rem
}

/*--- Dispo - Tour TH ---*/

.dispoTourTHTourCaretUp,
.dispoTourTHTourCaretDown {
	position:relative;
	top:0.2rem;
}

.dispoTourTHTourCaretUp {
	left:0.8rem;
}

.dispoTourTHTourCaretDown {
	left:1rem;
}

.dispoTourTHTourPadding {
	 margin-left:1.5rem;
}

.noBorder div, .noBorder tr td {
	border: none;
	border-width: 0px !important;
}
.noBorder div ul {
	margin-left: 0px;
}
.noBorder div ul li{
	margin-left: 0px;
}

.dispoHeaderColumn1 {
	width: 12%;
}
.dispoHeaderColumn2 {
	width: 58%;
}
.dispoHeaderColumn3 {
	width: 30%;
}

/* ---- DispoCustomizer styles ----*/
.layout-item{
	border-radius:var(--base-border-radius);
	padding:4px;
}

.layout-header {
	display:inline-block !important;
	height:15px;
	border-radius:var(--base-border-radius);
	margin-bottom:5px;
	font-weight:bold;
	padding:5px 10px;
	width: calc(100% - 22px);
	box-sizing: content-box;
}

.layout-header div{
	vertical-align: baseline;
	display: inline;
}

.CodeMirror {
	min-width:500px;
}

.CodeMirror-completions {
	z-index:9999;
}
.codeMirrorWrapperMultiLine .CodeMirror {
	font-size: 12px;
}
.codeMirrorWrapperMultiLine .CodeMirror-gutter {
	z-index: auto;
}
.codeMirrorWrapperSingleLine textarea {
	overflow: hidden !important;
	border: 1px solid #a8a8a8;
	border-radius: var(--base-border-radius);
	padding: 4px;
	height: 14px !important;
	font-size: 12px;
	font-family: sans-serif;
	width: 290px;
}
.codeMirrorWrapperSingleLine .CodeMirror {
	border: 1px solid #a8a8a8;
	border-radius: var(--base-border-radius);
	padding: 4px;
	height: 14px !important;
	font-family: sans-serif;
	font-size: 12px;
}
.codeMirrorWrapperSingleLine .CodeMirror-scroll {
	height: 16px;
	font-family: sans-serif;
	font-size: 12px;
	overflow-y: hidden !important;
	overflow-x: hidden !important;
}
.codeMirrorWrapperSingleLine .CodeMirror-scrollbar {
	overflow-y: hidden !important;
	overflow-x: hidden !important;
}
.codeMirrorWrapperSingleLine .CodeMirror-lines {
	height: 16px;
	margin-top: -2px;
	font-family: sans-serif;
	font-size: 12px;
}
.codeMirrorWrapperSingleLine .CodeMirror-scroll .cm-s-default CodeMirror-scroll-focused {
	overflow: hidden !important;
	overflow-y: hidden !important;
	overflow-x: hidden !important;
}

.leftDataGrid .ui-datagrid-column {
	float: left;
}

table tbody tr td div.ui-datatable.ui-widget.blackRow div.ui-datatable-tablewrapper table tbody.ui-datatable-data.ui-widget-content tr.ui-widget-content.ui-datatable-empty-message td {
	color: black !important;
	text-shadow:none;
}

/*------------ Print Menu -------------*/

.printMenu .printMenuCol {
	min-width: 200px;
	display: inline-block;
}

.printMenu .printMenuCol.printMenuCol-left {
	max-width: 300px;
} 

.printMenu .printMenuCol.printMenuCol-right {
	margin-left: .5em; 
	margin-right: 1.5em;
} 

/* --- Lists - Mode---*/
.selectModeButtons .ui-widget-header{
	height:15px;
	padding:0.5rem 0.75rem;
	box-sizing: content-box;
}

.selectModeButtons .ui-widget-content button, 
.selectModeButtons .ui-widget-content .ui-selectonemenu {
	margin-right:0.5rem;
	margin-left:0;
}
.selectModeButtons .ui-widget-content button:last-of-type {
	margin-right:0;
	
}

/*--------------- BackgroundImage size - deprecated? ------------------------*/

.defaultBackgroundImage, 
.defaultBackgroundImage-2, 
.defaultBackgroundImage-mobile {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.defaultBackgroundImage,
.defaultBackgroundImage, 
.defaultBackgroundImage-2, 
.defaultBackgroundImage-mobile {
	margin: 0px;
	padding: 0px;
    width: 100%;
    height: 100%;
}

body.defaultBackgroundImage, 
.defaultBackgroundImage-2 {
	min-height: 100%;
    margin-top: 0.5%;
}

.defaultBackgroundImage {
    background-image:var(--genBG-1);
}

.defaultBackgroundImage-2 {
    background-image:var(--genBG-2);
}

.defaultBackgroundImage-mobile {
    background-image:var(--genBG-1);
}

/*-- End of BackgroundImage size - deprecated? --*/

.menuitemEllipsis > span.ui-menuitem-text {
	white-space: pre-wrap;
	overflow:hidden;  
	text-overflow: ellipsis;
}

.backgroundGridContent .ui-dialog-content {
	padding: 0;
}

.dataGridBackground > div {
	background-color: #EDEDED;
	vertical-align: top;
}

.ui-datagrid-column {
	vertical-align: top;
}

.hideCodeMirrorCursor .CodeMirror-focused pre.CodeMirror-cursor { 
	visibility: hidden;
}

.defaultColorPicker .ui-button {
	width: 80px !important;
}
.defaultColorPicker .ui-button-text span {
	margin-top: -5px;
	margin-left: -14px;
	width: 102px !important;
	height: 24px !important;
	border: none;
	font-size:0;
}

.label {
	font-weight: bold;
	padding-right: 10px;
}

.ui-datatable.compactFilterInput thead tr th.ui-filter-column .ui-column-filter {
	width: 100%; /*85%*/
}/*JHM 221129*/

div.ui-button.ui-button-text-icon-left.noLabel span.ui-button-icon-left.ui-icon {
	left: 0px;
}

.columnHeaderIcon {
	display: inline-block;
	margin-top: -3px;
	margin-bottom: -3px;
}

.ftoLeft {
	width: 65px;
}
.ftoRight {
	width: 100%;
}

.calendarDayButtonNoMargin button {
	margin:0px !important;
}

.calendarDayInline {
	display: inline-block;
}

.tinyCheckBox div.ui-chkbox-box {
	vertical-align: bottom;
	height: 14px;
	width: 15px;
}

.analysisControlLeft {
	width:310px;
}
.analysisControlRight {
	width:98%
}

.ui-datatable.noTopPadding > .ui-datatable-header {
	padding-top: 0px;
}

.ui-tabs .ui-tabs-nav li .ui-icon, .ui-tabs .ui-tabs-nav li .fa {
	margin: 0;
	margin-right: 5px;
}

.alignTfootTop .ui-datatable-tablewrapper table tfoot tr td {
	vertical-align: top;
}

fieldset.ui-fieldset.tinyFieldsetLayout  {
	padding: 0px;
	margin: 0px;
	border: none;
}

fieldset.ui-fieldset.tinyFieldsetLayout legend.ui-fieldset-legend {
	padding: 5px;
	margin: 0px;
}

fieldset.ui-fieldset.tinyFieldsetLayout table td {
	padding: 1px 3px;
	margin: 0px;
}

.gridAlignBottom td {
	vertical-align:bottom;
}
.highlightDroppableFileUpload {
    border: 2px solid #00aef0;
}

.mediumformattedAddressPanel {
	width: 195px;
	height: 108px;
}

.menuItems {
	width: 200px !important;
}

.wideMenuItems {
	width: 240px !important;
}

.ultraWideMenuItems {
	width: 300px !important;
}

.centerDiv {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ui-accordion.noAccordionPadding > .ui-accordion-content {
	padding: 0px;
}

.ui-datatable.dispoUsageTableClass th {
	padding: 1px !important;
}

.ui-colorpicker.defaultColorPicker > .ui-button {
	width: 101px !important;
	height: 27px !important;
	border: none !important;
}

.ui-colorpicker.defaultColorPicker > .ui-button > .ui-button-text {
	padding: 0px !important;
	margin: 0px !important;
	border: none !important;
}

.ui-colorpicker.defaultColorPicker > .ui-button > .ui-button-text > span {
	width: 100px !important;
	height: 26px !important;
	font-size:0 !important;
	margin: 0px !important;
	padding: 0px !important;
}
.relativeDateTable {
	margin-right: 0px;
}

.availability-to-come {
	color: green; 	
}

.availability-to-come a {
	color: green; 	
}

.marginTop2px {
	margin-top: 2px;
}

.marginLeft2px {
	margin-left: 2px;
}

.ui-selectonelistbox, .ui-selectmanymenu, .ui-multiselectlistbox-listcontainer {
	min-width: 150px;
	width: auto;
}

.redPlaceholder::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
    opacity: 0.6;
}
.redPlaceholder:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: red;
   opacity: 0.6;
}
.redPlaceholder::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: red;
   opacity: 0.6;
}
.redPlaceholder:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: red;
   opacity: 0.6;
}
.redPlaceholder::-ms-input-placeholder { /* Microsoft Edge */
   color: red;
   opacity: 0.6;
}

.smallSplitBtn {
	height: 18px;
	width: 29px;
}

.smallSplitBtn .ui-button {
	height: 18px;
	width: 18px;
}

.smallSplitBtn .ui-button.ui-splitbutton-menubutton {
	height: 18px;
	width: 12px;
}

.tableHeaderLeft .ui-datatable-header {
	text-align: left;
}

.ui-inputgroup .ui-inputgroup-addon {
	padding: 0px;
}

.gridField {
	display: block;
}

.cargoStatusOk {
	color: lightgreen;
}

.cargoStatusNotOk {
	color: orange;
}

.cargoStatusTransportChainInterrupted {
	color: red;
}

.cargoStatusNoStatus {
	color: gray;
}

.transportChain {
	width: 100%;
	height: 100%;
	text-align: center;
}

.ui-datatable-even .transportChain-highlight,
.ui-datatable-odd .transportChain-highlight,
.ui-datatable-even .transportChain-nohighlight,
.ui-datatable-odd .transportChain-nohighlight {
	background-color: inherit;
}

.transportChain-nohighlight {
	background-color: #fcfcfc;
}

.transportChain-highlight {
	background-color: #f7f7f7;
}

.transportChain-noStatus,
.ui-state-highlight .transportChain-noStatus {
	color: #ebebeb !important;
}

.transportChain-highlight .transportChain-noStatus,
.ui-state-highlight .transportChain-highlight .transportChain-noStatus {
	color: #cccccc !important;
}

.transportChain-statusOk,
.ui-state-highlight .transportChain-statusOk {
	color: lightgreen !important;
}

.transportChain-highlight .transportChain-statusOk,
.ui-state-highlight .transportChain-highlight .transportChain-statusOk {
	color: #22dd22 !important;
}

.transportChain-statusNotOk,
.transportChain-statusNotOk .ui-state-highlight .fa {
	color: #ffc966 !important;
}

.transportChain-highlight .transportChain-statusNotOk,
.ui-state-highlight .transportChain-highlight .transportChain-statusNotOk {
	color: orange !important;
}

.transportChain-statusTransportChainInterrupted,
.ui-state-highlight .transportChain-statusTransportChainInterrupted {
	color: #ff6666 !important;
}

.transportChain-highlight .transportChain-statusTransportChainInterrupted,
.ui-state-highlight .transportChain-highlight .transportChain-statusTransportChainInterrupted {
	color: red !important;
}

.ui-selectcheckboxmenu-token-label {
	color: black;
	white-space: pre-wrap;
}

.ui-state-active, .ui-widget-content .ui-state-active {
	text-shadow: none;
}

.ui-autocomplete-token-label {
	color: black;
}

.ui-selectcheckboxmenu-header .ui-inputfield {
	padding: 3px;
}

.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item label {
	white-space: pre-wrap;
}

.ui-selectcheckboxmenu-panel {
	margin-left: 25px;
	margin-right: 10px;
}

.packageTree {
	overflow-x: auto;
	overflow-y: auto;
}

/* ui-tree */
.packageTree .ui-tree-container {
	overflow: unset !important;
}

.ui-tree.uiTreeHeight {
	min-height: 12rem; 
	text-align: left;
	min-width: 64rem;
}

.ui-tree.uiTreeFile {
	max-width: 100rem; 
	min-width: 20rem; 
	min-height: 40rem;
}

.ui-tree.uiTreeSearch {
	max-width: 60em; 
	min-width: 20em; 
	min-height: 20em;
}

/* temp styles ui-tree */
.ui-tree.uiTreeAnalysis{
	max-width:295px;
}

.ui-tree.uiTreeCharging{
	width: 670px; height: 700px; overflow-y:auto; overflow-x: hidden;
}

.ui-tree.uiTreeW825{ 
	width:825px; text-align: left;
}

.ui-tree.uiTreeW925{ 
	width:925px; text-align: left;
}

.ui-tree.uiTreeW1000{ 
	width:1000px; text-align: left;
}
/* End of temp styles ui-tree */

.checkbox-spacer .ui-chkbox {
	margin-right: .5em;
}

.ui-state-enabled div.ui-chkbox-box {
	opacity: 1.0;
}
.crmDetails {
	font-size: 1.3em;
	font-weight: bold;
}

.flex-panel, .flex-togglePanel {
	display: flex;
	flex-flow: column;
}

.flex-panel > .ui-panel-content {
	flex-grow: 1;
}

.panel-flex > .ui-panel-content, .togglePanel-flex > .contentPanel > .ui-panel-content {
	display: flex;
	flex-flow: column;
}

.flex-togglePanel {
	flex-grow: 1;
}

.flex-togglePanel > .contentPanel {
	flex-grow: 1;
	display: flex;
	flex-flow: column;
}

.flex-togglePanel > .contentPanel > .ui-panel-content {
	flex-grow: 1;
}

fieldset.fullsize {
	height: 100%;
}

fieldset.legend {
	line-height: 16px;
}

input.ui-inputfield.invalidAutocomplete {
	color: red;
}

.companylogo-fixed {
	width: 256px;
	margin-bottom: 20px;
}

.noWrapMenuMedium .ui-menu-child {
	min-width: 30em;
}
.noWrapMenuMedium .ui-menuitem .ui-menuitem-text {
	white-space: nowrap;
	display: inline-block;
	width: 26em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-menu .ui-menuitem-link {
	width: 96%;
	box-shadow: none !important;
}


.fa-xs {
	font-size: 0.75em;
}

.fa-sm {
	font-size: 0.875em;
}

.fa-bg {
	font-size: 1.2em;
}
.fa-lg {
	font-size: 1.3333333333em;
	line-height: 0.75em;
	vertical-align: -0.0667em;
}
.fa-2x {
	font-size: 2em;
}
.fa-3x {
	font-size: 3em;
}
.fa-4x {
	font-size: 4em;
}
.fa-5x {
	font-size: 5em;
}
.fa-6x {
	font-size: 6em;
}
.fa-7x {
	font-size: 7em;
}
.fa-8x {
	font-size: 8em;
}
.fa-9x {
	font-size: 9em;
}
.fa-10x {
	font-size: 10em;
}

.ui-selectcheckboxmenu-multiple-container {
	min-height: 22px;
	/*JHM 20221212*/
}

.actionIconGrid {
	column-gap: 7px;
	text-align: center;
}

.maxWidth {
	width: 100%;
	box-sizing: border-box;
}

.forceMaxHeight {
	height: 100% !important;
}

.ui-fieldset-legend{
	width: max-content;
}
.stdBottomSpace {
	margin-bottom: .5em;
}
.stdTopSpace {
	margin-top: .5em;
}

.tms {
	display: inline-block;
}

*[class^="tms-driverslicense"]:before, *[class*=" tms-driverslicense"]:before {
	font-size: 28px;
}

.ui-icon.tms, .ui-widget .ui-icon.tms {
	background: none repeat scroll 0 0 transparent !important;
	text-indent: 0 !important;
	color: #3c5bab;
	top: 60%;
}
.subFieldsetInner {
	border: none;
}
.subFieldset legend.ui-fieldset-legend {
	background: none;	
	border: none;
}

#footerForm *[class^="tms-"]:before, #footerForm *[class*=" tms-"]:before{
	vertical-align: sub;
}

.footerIcon {
	margin-left: 4px;
}

.addressDialog .ui-dialog-title {
 	width: 98%;
	margin-right:0px;
}

.logoPreviewBackground {
	background: repeating-linear-gradient(
		45deg,
		#ffffff,
		#ffffff 3px,
		#e0e0e0 3px,
		#e0e0e0 6px
	);
}

.autoGrid {
	display: grid; 
	grid-template-columns: auto;
}

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

/* ----------------- CUSTOM COMPONENTS styles -----------------*/ /*added by JHM*/

/* --- Inputs --- */

.ui-inputfield {
  padding: 6px 4px;
}

body .ui-selectonemenu .ui-selectonemenu-label.ui-inputfield {
	border: 0 none !important;
}

.ui-selectcheckboxmenu .ui-selectcheckboxmenu-label {
    padding: 6px 24px 6px 4px;
}

.ui-selectcheckboxmenu-multiple-container.ui-inputfield {
    padding: 1px 22px 1px 0;
    border: 0 !important;
}

/* --- Input related buttons --- */

.ui-selectonemenu-trigger.ui-state-default {
	border-left: 1px solid #cccdd1 !important;
	border-top: 0 none !important;
	border-right: 0 none !important;
	border-bottom: 0 none !important
}

button.ui-datepicker-trigger {
	border-left: 0 none !important
}

/*.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
    padding: 0 4px;
    right: -1px;
    top: -1px;
} JHM removed to fix button position inside th*/

.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon {
    margin-top: 6px;
}

.ui-selectcheckboxmenu-multiple .ui-selectcheckboxmenu-trigger .ui-icon {
    top: 0;
}

.ui-datepicker-trigger.ui-button {
    margin: 0 0 0 -1px !important;
}

/* --- Buttons --- */
.ui-button > .ui-button-text {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin: 0 1px;
}

.advancedSearchButtons {
	width:auto;
}

.extendedSearchToolbar  {
	width:fit-content;
	margin-bottom:0.5rem;
}


.advancedSearchButtons button{
	margin-right:0.5rem;
}

.advancedSearchButtons button::last-of-type{
	margin-right:0;
}

 /* --- Generic --- */
.ui-state-default {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow:none;
}

.pi-ellipsis-v {
	font-size:0.75rem !important;
	padding: 1px 0.5rem;
}

.dialogSubtile {
	font-weight:bold;
	margin-bottom: 0.5rem;
}

table.dialogLoginTable {
	border-spacing: 0px;
    border-collapse: collapse;
}

table.dialogSupportLoginTable label { 
	margin-right: 2px;
}

.supportLoginDialog table td {
	padding-bottom: 0px !important;
}
.supportLoginDialog form {
	display: grid;	
}

.dialogSupportLoginFooter {
	margin-top:0.5rem;
	display: inline;
}

.selectModeButtons {
	max-width: 50%; 
	margin-top: 0.75rem;
	display: inline-block;
}


/*.ui-dialog-titlebar.ui-widget-header, .ui-dialog .ui-dialog-content button {
	background: #f2f4f6;
}/*

/* ----------------- end of CUSTOM COMPONENTS styles -----------------*/

/* ----------------- SCROLLBAR custom styles ----------------- */

/* Firefox*/
* { scrollbar-color: var(--ecovium-gray-500-main) var(--surface-300); /* Foreground, Background */
  	/* scrollbar-width: thin;*/
}

.dashBoardBody *,
.ui-selectonemenu-items-wrapper *, /* dropdown menues */
.menuContainer *, /* main menu */
.moduleMenu * /* main menu */ { 
  	scrollbar-width: thin;
}

/* Chrome, Edge, and Safari */
::-webkit-scrollbar {/* entire scrollbar scope */
    width: 1.25rem; /* Mostly for vertical scrollbars */
	height: 1.25rem; /* Mostly for horizontal scrollbars */
}
::-webkit-scrollbar-track { /* Background - space below the scrollbar */
	background:var(--surface-300);
}
::-webkit-scrollbar-thumb { /* Foreground - draggable scrollbar itself */
	border: 3px solid var(--surface-300);
	border-radius: 10px;
	background-color: var(--ecovium-gray-500-main);
}
::-webkit-scrollbar-thumb:hover {
	background-color: var(--ecovium-gray-600);
	border:2px solid var(--surface-300);
}

::-webkit-scrollbar-track-piece { /* Background not covered area by the scrollbar-thumb */
	border-radius: 0px;
}

::-webkit-scrollbar-button { /* arrows - directional buttons at the top and bottom of the scrollbar */
	display: block;
    background-color: var(--surface-300);
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar-button:hover {
	background-color: var(--ecovium-gray-200);
}

::-webkit-scrollbar-corner {/* bottom of the scrollbar without resizse */ 
	background: transparent;
}


::-webkit-scrollbar-button:vertical:start:decrement {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="5" viewBox="0 0 9 5" fill="dimgray" xmlns="http://www.w3.org/2000/svg"><path d="M0 5L9 5L4.5 -3.93402e-07L0 5Z"/></svg>');
    background-size: 60%;
    border-bottom: 1px solid lightgrey;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="5" viewBox="0 0 9 5" fill="dimgray" xmlns="http://www.w3.org/2000/svg"><path d="M9 0H0L4.5 5L9 0Z"/></svg>');
    background-size: 60%;
    border-top: 1px solid lightgrey;
}


::-webkit-scrollbar-button:horizontal:end:increment {
    background-image:url('data:image/svg+xml;charset=UTF-8,<svg width="5" height="9" viewBox="0 0 5 9" fill="dimgray" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L0 9L5 4.5L0 0Z"/></svg>'); 
    background-size: 30%;
    border-left: 1px solid lightgrey;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background-image:url('data:image/svg+xml;charset=UTF-8,<svg width="5" height="9" viewBox="0 0 5 9" fill="dimgray" xmlns="http://www.w3.org/2000/svg"><path d="M5 9L5 0L0 4.5L5 9Z"/></svg>');
    background-size: 30%;
    border-right: 1px solid lightgrey; 
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
}

.dashBoardBody ::-webkit-scrollbar,
.ui-selectonemenu-items-wrapper ::-webkit-scrollbar,
.menuContainer ::-webkit-scrollbar,
#menuForm ::-webkit-scrollbar {
	width: 0.75rem;
	height: 0.75rem;
}

.dashBoardBody ::-webkit-scrollbar-thumb,
.ui-selectonemenu-items-wrapper ::-webkit-scrollbar-thumb,
.menuContainer ::-webkit-scrollbar-thumb,
#menuForm ::-webkit-scrollbar-thumb {
	border: none;
}

.dashBoardBody ::-webkit-scrollbar-track,
.ui-selectonemenu-items-wrapper ::-webkit-scrollbar-track,
.menuContainer ::-webkit-scrollbar-track,
#menuForm ::-webkit-scrollbar-track {
	background: var(--ecovium-gray-100);
	border-radius:10px;
}

.dashBoardBody ::-webkit-scrollbar-button,
.ui-selectonemenu-items-wrapper ::-webkit-scrollbar-button,
.menuContainer ::-webkit-scrollbar-button,
#menuForm ::-webkit-scrollbar-button {
	display:none;
}


/* ----------------- END of SCROLLBAR custom styles -----------------*/

/* ----------------- HOVER styles -----------------*/

.ui-state-hover,
body .ui-inputfield.ui-state-hover {
  box-shadow: none !important;/*box-shadow: inset 0px -60px 0px rgba(0, 0, 0, 0.04), inset 0px -2px 1px #cccdd1 !important*/ /*JHM removed for new styling*/
}

textarea.ui-state-hover {
	box-shadow: none !important;
}

/*body .ui-inputfield.ui-state-hover {
	box-shadow: none !important;
	border-color: var(--gray-1000) !important;
}

/* ----------------- END of HOVER styles -----------------*/

/* ----------------- Custom BORDERS ----------------- /*JHM TEST - hidden*/

/*.ui-widget-header, 
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default,
.ui-widget-content {
  border: 1px solid #cccdd1;
}*/

.ui-tabs-nav.ui-widget-header {
	border-top: 0 none !important;
	border-right: 0 none !important;
	border-left: 0 none !important
}

/* ----------------- END of Custom BORDERS -----------------*/

/* ----------------- CUSTOM TABLES styles -----------------*/

/*body .ui-datatable {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
}*/

/*.ui-datatable-footer .ui-button {
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 1px;
}*/

/*body .ui-datatable thead th {
  text-align: left;
}

.ui-autocomplete-panel .ui-autocomplete-table th,
.ui-menu, 
.ui-menu .ui-menu-child {
	background: #f8f9fa !important;
}*/

body .ui-paginator .ui-paginator-first, 
body .ui-paginator .ui-paginator-prev, 
body .ui-paginator .ui-paginator-next, 
body .ui-paginator .ui-paginator-last,
body .ui-paginator .ui-paginator-pages {
	border: 0 none;
	padding: 0 !important;
}

.ui-paginator .ui-paginator-page, 
.ui-paginator .ui-paginator-pages, 
.ui-paginator .ui-paginator-current {
  border: none !important;
}

/*.ui-paginator .ui-paginator-page.ui-state-hover, 
.ui-paginator .ui-paginator-pages.ui-state-hover {
	color: #fff;
	background-color:var(--main-color-alt);
	box-shadow: none !important;
}*/

body .ui-paginator .ui-paginator-rpp-options {
	background-color: #ffffff;
	border-radius: 3px;
}

/*.ui-datatable-footer .ui-button {
	font-size:14px;
}*/

/*body .ui-datatable .ui-datatable-data > tr > td {
	border: 1px solid rgba(0, 0, 0, 0.08);
}/*JHM 221201 fix*/

.default .ui-datatable tfoot td,
body .default .ui-datatable .ui-paginator,
body .defautl .ui-datatable .ui-datatable-footer {
  padding:0.5rem 1rem !important;
}

body .ui-datatable .ui-datatable-data > tr > td, 
.ui-datatable tbody td, 
.ui-datatable .ui-datatable-data td[role="gridcell"], 
.ui-datatable .ui-datatable-data-empty td[role="gridcell"] {
	border-left: 0 solid transparent !important;
    border-right: 0 solid transparent !important;
    border-color: transparent !important; /*to override ant component style*/
    border-width:0 !important; /*to override ant component style*/
}/*JHM 221129*/

body .default .ui-datatable .ui-datatable-data > tr > td, 
.default .ui-datatable tbody td, 
.default .ui-datatable .ui-datatable-data td[role="gridcell"], 
.default .ui-datatable .ui-datatable-data-empty td[role="gridcell"],
.default .ui-datatable th[role="columnheader"] {
	padding:0.75rem 1rem !important;
}
 
.ui-datatable th[role="columnheader"] {
	text-align: left;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}/*JHM 221129*/

/*.default .ui-datatable th[role="columnheader"] {
	padding: 8px 20px !important;
}/*JHM 221129*/

.ui-datatable th[role="columnheader"]:first-child, .ui-datatable th[role="columnheader"]:last-child{
	border-right: 1px solid #cccdd1;
}/*JHM 221129*/

/*.default .ui-datatable .ui-icon.ui-sortable-column-icon {
  margin: -1px -14px -2px 0px !important;
}JHM 221129/230212*/

/*.default .ui-datatable th .ui-sortable-column-icon {
  color:transparent !important;
}JHM 221128/230212*/

.ui-datatable th.ui-state-hover .ui-sortable-column-icon, .ui-datatable th .ui-icon-triangle-1-n, .ui-datatable th .ui-icon-triangle-1-s {
  color:inherit !important;
}/*JHM 221128*/

body .ui-datatable .ui-datatable-header {
  text-align: left;
}
body .ui-datatable .ui-datatable-footer {
  text-align: left;
}

.ui-datatable-footer .ui-widget {
	vertical-align: middle;
}

.ui-datatable .ui-column-filter {
  margin: .25rem auto auto auto;
}

.ui-autocomplete-panel .ui-autocomplete-table th, .ui-autocomplete-panel .ui-autocomplete-table td {
	padding: 0.5rem 0.3rem;
}

.ui-selectonemenu-table th.ui-state-default, .ui-selectonemenu-table .ui-widget-content th.ui-state-default, .ui-selectonemenu-table .ui-widget-header th.ui-state-default {
	background: #f8f9fa;
}

.ui-datatable tbody td .killSurroundingBorders td {
	padding: 2px !important;
}

/* ----------------- end of CUSTOM TABLES styles ----------------- */

/* ----------------- EMAIL TEMPLATE custom styles ----------------- */
.emailTemplate .remove-tab {
	border: none !important;
	box-shadow: none;
	background: inherit !important;
}

.emailTemplate .ui-tabs-header a > span {
	margin-right:0.2rem;
}
.emailTemplate .ui-tabs-header button {
	margin-left:0.2rem;
}

.emailTemplate .ui-tabs-header button .ui-button-text  {
	display: inline-block;
}
			
.emailTemplate .add-tab {
	border: none !important;
	box-shadow: none;
}

.emailTemplate .add-tab.ui-state-hover, .remove-tab.ui-state-hover {
	box-shadow: none !important;
}
/* ----------------- end of EMAIL TEMPLATE custom styless ----------------- */

/* ----------------- variables ------------------------------ */ /*added by JHM*/
:root {
	/*colors*/
	--lightblue: #EAF0F6;
	--main-color: #152F4E;
	--main-color-001: #f2f4f6;
	--main-color-100: #DDE8F4;
	--main-color-200: #B0D4FB;
	--main-color-700: #193F6C;
	--main-color-2-250: #dee3eb;
	--main-color-2-300: #cdd3dd;
	--main-color-2-400: #b5bbc7;
	--main-color-2-450: #b5b8bf;
	--main-color-2-600: #737780;
	--main-color-alt:#2e629d;
	--secondary-color: #188B86;
	--alert-color: #E54646;
	--main-bg: #FFF;
	--secondary-bg: #F2F2F2;
	--terciary-bg: #F8F8F8;
	--gray-00: #FFF;
	--gray8: #646464;
	
	/*colors - brand gray*/
	--gray-900:#232628; /*text - titles*/
    --gray-800:#515252;
    --gray-700:#676869; /*subtitles - labels*/
    --gray-600:#7C7D7E;
    --gray-500-main:#929394;
    --gray-400-subordinate:#9EA9B7;
    --gray-300:#BEBEBF;
    --gray-200:#D3D4D4;
    --gray-100:#F5F5F5;
    --gray-50:#FAFAFA;
	
	/*font size*/
	--h1: 2.5rem;
	--h2: 2rem;
	--h3: 1.75rem;
	--h4: 1.5rem;
	--h5: 1rem;
	/*font size -  login*/
	--loginH1: calc(21px + 0.8vw);
	--loginH2: calc(12px + 0.7vw);
	--loginH3: calc(5px + 0.7vw);
	
	/* font-family */
	--arial: Arial, sans-serif;
	
	/*font-weight*/
	--regular: 400;
	--light:300;
	--bold:bold;
	--bolder:700;
	
	/*text-legibility --> THIS NEEDS TO BE TESTED*/
	--legibility: optimizeLegibility;
	--speed: optimizeSpeed;
	
	/* borders */
	--border-1: 1px solid;
	
	--base-border-radius: 3px;
	
	/* login background images -deprecated- */
	--genBG-0: url("../images/loginBackgroundGen.jpg");
	--genBG-1: url("../images/loginBackgroundEco-1.jpg");
	--genBG-2: url("../images/loginBackgroundEco-3.jpg");
	
}

.bold {
	font-weight: bold;
}

.normal {
	font-weight: normal;
}

.h1, .h2, .h3 {
	font-weight: var(--bold);
	/*text-legibility: var(--legibility);*//*JHM TEST*/
}

.h1, .pi.h1, .h1 .pi {
	font-size:var(--h1);
}

.h2, .pi.h2, .h2 .pi {
	font-size:var(--h2);
}

.h3, .pi.h3, .h3 .pi {
	font-size:var(--h3);
}

.h4, .pi.h4, .h4 .pi {
	font-size:var(--h4);
}

.h5, .pi.h5, .h5 .pi {
	font-size:var(--h5);
}

.h6, .pi.h6, .h6 .pi {
	font-size:var(--h6);
}

.title-division {
	border-bottom:var(--border-1);
	border-color:var(--gray-300);
	width:100%;
	margin-bottom: 1rem;
}

.h2.title-division {
	margin-bottom:3rem;
}

.h4.title-division {
	margin-bottom:2rem;
}

.main-color {
	color:var(--ecovium-500-main);
}

.width-0 {
	width: 0%;
}
.width-5 {
	width: 5%;
}
.width-10 {
	width: 10%;
}

.width-20 {
	width: 20%;
}

.width-25 {
	width: 25%;
}

.width-30 {
	width: 30%;
}

.width-33 {
	width: 33.3%;
}

.width-40 {
	width: 40%;
}

.width-50 {
	width: 50%;
}

.width-60 {
	width: 60%;
}

.width-65 {
	width: 65%;
}

.width-70 {
	width: 60%;
}

.width-75 {
	width: 75%;
}

.width-80 {
	width: 80%;
}

.width-90 {
	width: 90%;
}

.width-100 {
	width:100%;
}

@media screen and (min-width: 576px) {
  .sm\:width-0 {
		width: 0% !important;
	}
	.sm\:width-5 {
		width: 5% !important;
	}
	.sm\:width-10 {
		width: 10% !important;
	}
	.sm\:width-20 {
		width: 20% !important;
	}
	.sm\:width-25 {
		width: 25% !important;
	}
	.sm\:width-30 {
		width: 30% !important;
	}
	.sm\:width-33 {
		width: 33.3% !important;
	}
	.sm\:width-40 {
		width: 40% !important;
	}
	.sm\:width-50 {
		width: 50% !important;
	}
	.sm\:width-60 {
		width: 60% !important;
	}
	.sm\:width-65 {
		width: 65% !important;
	}
	.sm\:width-70 {
		width: 60% !important;
	}
	.sm\:width-75 {
		width: 75% !important;
	}
	.sm\:width-80 {
		width: 80% !important;
	}
	.sm\:width-90 {
		width: 90% !important;
	}
	.sm\:width-100 {
		width:100% !important;
	}
}
@media screen and (min-width: 768px) {
	.md\:width-0 {
		width: 0% !important;
	}
	.md\:width-5 {
		width: 5% !important;
	}
	.md\:width-10 {
		width: 10% !important;
	}
	.md\:width-20 {
		width: 20% !important;
	}
	.md\:width-25 {
		width: 25% !important;
	}
	.md\:width-30 {
		width: 30% !important;
	}
	.md\:width-33 {
		width: 33.3% !important;
	}
	.md\:width-40 {
		width: 40% !important;
	}
	.md\:width-50 {
		width: 50% !important;
	}
	.md\:width-60 {
		width: 60% !important;
	}
	.md\:width-65 {
		width: 65% !important;
	}
	.md\:width-70 {
		width: 60% !important;
	}
	.md\:width-75 {
		width: 75% !important;
	}
	.md\:width-80 {
		width: 80% !important;
	}
	.md\:width-90 {
		width: 90% !important;
	}
	.md\:width-100 {
		width:100% !important;
	}
}
@media screen and (min-width: 992px){
	.lg\:width-0 {
		width: 0% !important;
	}
	.lg\:width-5 {
		width: 5% !important;
	}
	.lg\:width-10 {
		width: 10% !important;
	}
	.lg\:width-20 {
		width: 20% !important;
	}
	.lg\:width-25 {
		width: 25% !important;
	}
	.lg\:width-30 {
		width: 30% !important;
	}
	.lg\:width-33 {
		width: 33.3% !important;
	}
	.lg\:width-40 {
		width: 40% !important;
	}
	.lg\:width-50 {
		width: 50% !important;
	}
	.lg\:width-60 {
		width: 60% !important;
	}
	.lg\:width-65 {
		width: 65% !important;
	}
	.lg\:width-70 {
		width: 60% !important;
	}
	.lg\:width-75 {
		width: 75% !important;
	}
	.lg\:width-80 {
		width: 80% !important;
	}
	.lg\:width-90 {
		width: 90% !important;
	}
	.lg\:width-98 {
		width: 98% !important;
	}
	.lg\:width-100 {
		width:100% !important;
	}
}
@media screen and (min-width: 1200px){
	.xl\:width-0 {
		width: 0% !important;
	}
	.xl\:width-5 {
		width: 5% !important;
	}
	.xl\:width-10 {
		width: 10% !important;
	}
	.xl\:width-20 {
		width: 20% !important;
	}
	.xl\:width-25 {
		width: 25% !important;
	}
	.xl\:width-30 {
		width: 30% !important;
	}
	.xl\:width-33 {
		width: 33.3% !important;
	}
	.xl\:width-40 {
		width: 40% !important;
	}
	.xl\:width-50 {
		width: 50% !important;
	}
	.xl\:width-60 {
		width: 60% !important;
	}
	.xl\:width-65 {
		width: 65% !important;
	}
	.xl\:width-70 {
		width: 60% !important;
	}
	.xl\:width-75 {
		width: 75% !important;
	}
	.xl\:width-80 {
		width: 80% !important;
	}
	.xl\:width-90 {
		width: 90% !important;
	}
	.xl\:width-100 {
		width:100% !important;
	}
}
@media screen and (min-width: 1600px){
	.xxl\:width-0 {
		width: 0% !important;
	}
	.xxl\:width-5 {
		width: 5% !important;
	}
	.xxl\:width-10 {
		width: 10% !important;
	}
	.xxl\:width-20 {
		width: 20% !important;
	}
	.xxl\:width-25 {
		width: 25% !important;
	}
	.xxl\:width-30 {
		width: 30% !important;
	}
	.xxl\:width-33 {
		width: 33.3% !important;
	}
	.xxl\:width-40 {
		width: 40% !important;
	}
	.xxl\:width-50 {
		width: 50% !important;
	}
	.xxl\:width-60 {
		width: 60% !important;
	}
	.xxl\:width-65 {
		width: 65% !important;
	}
	.xxl\:width-70 {
		width: 60% !important;
	}
	.xxl\:width-75 {
		width: 75% !important;
	}
	.xxl\:width-80 {
		width: 80% !important;
	}
	.xxl\:width-90 {
		width: 90% !important;
	}
	.xxl\:width-100 {
		width:100% !important;
	}
}


/*********** Common helpers **********/

.right-0 {
	margin-right: 0 !important;
}
.left-0 {
	margin-left: 0 !important;
}
.top-0 {
	margin-top: 0 !important;
}
.bottom-0 {
	margin-bottom: 0 !important;
}
.no-margin {
	margin: 0 !important;
}

.xtra-m-top-05 {
	margin-top:0.5rem;
}

.xtra-p-top-05 {
	padding-top:0.5rem;
}


/* ----------------- ADMIN ----------------- */
.devHeader {
	padding: 2rem;
}

.devHeader span {
	width: 100%;
	display:inline-block;
	padding-bottom:0.5rem;
}

.devHeader span.h1 {
	font-weight:normal;
}

.devPanel {
	margin: 0 auto;
	width: 90%;
	max-width:1024px;
	padding-top:2rem;
	overflow-y:auto;
	overflow-x:hidden;
}

.linkListTitleIcon {
	margin-right: 0.5rem;
}

.linkListTitle {
	color: gray;
	width: 100%;
	margin-bottom:1rem;
}

.linkListIcon {
	width:2.5rem;	
	display: inline-block;
	padding-left: 0.3rem;
}

.linkListTitle .linkListIcon {
	padding-left: 0;
}

.linkListlink {
	width:calc(100% - 2.5rem);	
	display: inline-block;
	margin-bottom: 0.7rem;
	font-size:1.1rem;
	text-decoration:none;
}

.linkListlink:hover {
	text-decoration:underline;
}

body .devPanel.ui-panelgrid .ui-panelgrid-cell {
	background: transparent;
}

body .devPanel.ui-panelgrid .adminLinkList.ui-panelgrid-cell {
	padding:0 1.5rem 3rem 1.5rem;
}
/* ----------------- End of ADMIN ----------------- */

.ui-layout-resizer.ui-draggable-disabled {
	pointer-events: none;
}

.ui-layout-resizer.ui-layout-resizer-closed.ui-draggable-disabled .ui-layout-toggler-closed {
	pointer-events: auto;
}

.ui-splitbuttonmenu {
	max-height: 80vh; /*height reduced for UX purposes, to prevent the menu to display outside the window*/
	overflow-y: auto; 
}


body .ui-datatable.detectionTable .ui-datatable-data > tr > td, .ui-datatable tbody td{
	border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    border-color: 1px solid transparent !important;
    border-width: 1px !important;
}

/*** Order List **/

.reorderList .reorderListStringNumber {
	width:2rem;
}

.reorderList .reorderListStringHandler {
	width: 1rem;
}

.reorderList .ui-orderlist-item .reorderListStringHandler::before {
	opacity: 0;
}

.reorderList .ui-orderlist-item.ui-state-hover .reorderListStringHandler::before,
.reorderList .ui-orderlist-item.ui-state-active .reorderListStringHandler::before,
.reorderList .ui-orderlist-item.ui-state-highlight .reorderListStringHandler::before {
	opacity: 70%;
}

.reorderListStringText {
	width:60%;
	text-align: left;
}

.reorderListStringRePosition {
	width:12rem;
	opacity:0;
	text-align:right;
}

.reorderList .ui-orderlist-item.ui-state-hover .reorderListStringRePosition,
.reorderList .ui-orderlist-item.ui-state-active .reorderListStringRePosition,
.reorderList .ui-orderlist-item.ui-state-highlight .reorderListStringRePosition {
	opacity:100%;
}

.reorderListSelect {
	width:4rem;
}

span.ui-calendar.maximized .ui-datepicker-trigger {
	width: 2em;
}

vid.ui-selectonemenu.maximized {
	width: 100%;
}

body .ui-fileupload .ui-fileupload-content::after {
	content: "Drop file here, or click Choose button";
}

.releasedDispatchLock {
	opacity: 0.5;
}

.showOnHover {
	opacity: 0.0;	
}

.showOnHover:hover {
	opacity: 1.0;	
}

.ui-splitbutton.maximized {
	width: 100%;
	display: grid;
	grid-template-columns: auto min-content;
}

body .ui-toggleswitch.display-only .ui-toggleswitch-slider {
	cursor: default;
}

input.maximized {
	width: 100%;
	box-sizing: border-box;
}

/*TEMP*/
#header {
	width: 100%;
	position: fixed;
	top: unset;
	height: unset;
}

#content {
	margin-bottom: -40px; /*compensates margin top to avoid extra space on bottom*/
	margin-top: 40px;
}

.welcomeContentWrapper {
	margin-top: 3.5rem;
}
/*#detail {/*this probably can leave again
	margin-bottom: 20px;
}*/

.positionRelative {
	position: relative;
}

/*orders*/
.order--footer--sticky {
	position: sticky; bottom: 0px; background-color: rgba(255, 255, 255, 0.8); border-style: solid; border-width: 1px; border-radius: 5px;  padding: .75em;
}

/*ExternalStartTemp*/
.external .startHeader {
	display: grid; grid-template-columns: auto max-content; align-items: center;
}

.external .startHeader .header--right {

	justify-items: end;
}

.external .startHeader .header--left {
	display: grid; grid-template-columns: min-content max-content; column-gap: .5em;align-items: center;
}

.external .startHeader .header--left.panelMenuOn {
	margin-left: 9px;
}

.external .startHeader .header--left .startIcon {
	width: 20px; height: 20px; display: inline-block; margin-top: 3px; vertical-align: bottom;
}

.external .startHeader .header--right .startRight {
	display: grid; grid-template-columns: auto auto; column-gap: .25em;
}

.external .externalDashboardContent .menuContainer {
	width: 262px; position: fixed; height: calc(100vh - 6rem); overflow-y: auto;
}

.external .externalDashboardContent .dashboardContent.dashMarginLeft {
	margin-left: 262px;}
}

.external .externalDashboardContent .dashboardContent #contentForm {
	margin-top: 50px;
	float: left; width: 100%;
}

.external .externalDashboardContent .dashboardContent.dashMarginLeft #contentForm {
	margin-top: unset;
}

.external .externalDashboardContent .dashboardContent #contentForm .dashBoardBody {
	height: calc(100vh - 10rem);
}

.external .externalDashboardContent .megaMenu .megaMenu--logo {
	max-width: 400px; max-height: 200px;
}

.external #header {
	grid-column: 1 / 2;
}

.external #leftPanelMenu.moduleMenu {
	grid-column: 1; position: fixed; top: 3.6rem; height: calc(100vh - 6rem); overflow-y: auto; width: 262px; z-index: 500;
}

.external #menuContainer {
	display: grid;
	grid-template-columns: auto;
}

.external #menuContainer.leftPanelMenu--fixed {
	grid-template-columns: 262px auto;
}

.external #content {
	grid-column: 1;
}

.external #content.leftPanelMenu {
	grid-column: 2;
	margin-right: -280px;
}

/* messages */
div.page-message-container {
	display: grid;
	grid-template-columns: auto;
	row-gap: .5em;
}

div.page-message-container .message-severity-container {
	display: grid;
	grid-template-columns: min-content auto;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: .5em !important;
	padding-bottom: .5em !important;
}

div.page-message-container .message-severity-container ul {
	margin-top: 0;
	margin-bottom: 0;
}

 .reloadIcon {
	 display: none;
	 color: red;
 }

.needsReload .reloadIcon {
	display: inline-block;
}

.ui-growl {
	z-index: 1100 !important;
}

span.ui-calendar.maximize {
	display: grid;
	grid-template-columns: auto min-content;
}

body .ui-tooltip .ui-tooltip-text {
	background: white;
	color: black;
	border: 1px solid black;
	border-radius: 0;
}

.ui-selectbooleancheckbox.ui-chkbox.nowrap .ui-chkbox-label {
	white-space: nowrap;
}