/*
MWK, 23OCT2022, removing a lot of manual overrides that were needed with early version of PF
and rejiggering overrides to jibe with the new PF component model
*/

/*
MWK, 09DEC2022, experimenting 
*/

/*
https://www.nomensa.com/blog/how-improve-web-accessibility-hiding-elements
*/

.hide-element {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hide-element-focusable:active,
.hide-element-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/* MWK, 21NOV2022, experimenting with menuButton in the options facet */
.fitMenuButton {
  width: max-content;
  min-width:  max-content;
  max-width:  max-content;
}

body .ui-commandlink.redCommandLink, body .ui-link {
  color: #EF0000;
}

body .ui-commandlink.blueCommandLink, body .ui-link {
  color: blue;
}

.whiteButtonRedText .ui-button  {
  background: white;
}

.whiteButtonRedText .ui-button-text  {
  padding: 0;
  font-size: 2em;
  color: #EF0000;
  background-color: white;
}

.whiteButtonBlueText .ui-button  {
  background: white;
}

.whiteButtonBlueText .ui-button-text  {
  padding: 0;
  font-size: 2em;
  color: blue;
  background-color: white;
}

.redMenuItem .ui-menuitem-text  {
  padding: 0;
  background-color: white;
  color: #EF0000 !important;
}

.ui-button.whiteButtonRedText {
  background: white;

}

.ui-button.greenButton {
  background: #006400;
}

.ui-button.greenButton .ui-button-text{
  background: #006400;
  padding-left: 1em;
}

.redRow {
  background:  lightcoral !important;
}

.ui-spinner {
  width: fit-content;
  font-size: 4em;
}

.ui-spinner-input.ui-inputfield {
  font-size: 4em;
}

.ui-spinner.regular .ui-spinner {
  width: fit-content;
  font-size: 2em;

}

.ui-spinner.regular .ui-spinner-input.ui-inputfield {
  font-size: 2em;

}

/* for resizable d3 graphs */

.svg-container {
  display: inline-block;
  position: relative;
  /* aspect ratio */
  width: 100%;
  vertical-align: top;
  /* padding-bottom: 100%; */
  /* overflow: hidden; */
}

.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}

/* this is applied to the dataGrid */

.panelColumns td {
  vertical-align: top;
}

.ui-widget-content{
  color: black;
}

/*
h1, h2, h3 {
  margin: 0em;
  padding: 0em;
  display: inline;
}
*/

/*
 #####     ##    #    #  ######  #        ####   #####      #    #####
 #    #   #  #   ##   #  #       #       #    #  #    #     #    #    #
 #    #  #    #  # #  #  #####   #       #       #    #     #    #    #
 #####   ######  #  # #  #       #       #  ###  #####      #    #    #
 #       #    #  #   ##  #       #       #    #  #   #      #    #    #
 #       #    #  #    #  ######  ######   ####   #    #     #    #####
*/

.ui-panelgrid.borderlessPanelGrid .ui-panelgrid-cell {
  border: none;
}

.ui-panelgrid.unpaddedPanelGrid .ui-panelgrid-cell {
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0em;
  padding-bottom: 0em;
}

.ui-panelgrid.borderlessAndUnpaddedPanelGrid .ui-panelgrid-cell {
  border: none;
  padding-left: 0.5em;
  padding-right: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
}

/*
 #####     ##    #    #  ######  #        
 #    #   #  #   ##   #  #       #       
 #    #  #    #  # #  #  #####   #       
 #####   ######  #  # #  #       #       
 #       #    #  #   ##  #       #       
 #       #    #  #    #  ######  ######  
*/

.ui-panel.unpaddedPanel .ui-panel-content {
  padding: 0em;
  border: none;
}

.ui-panel.boxedUnpaddedPanel .ui-panel {
  padding: 0em;
  border-color: green;
}

.ui-panel.boxedUnpaddedPanel .ui-panel-content {
  padding: 0em;
  border-color: green;
}

/*
 #    #  ######  #    #  #    #
 ##  ##  #       ##   #  #    #
 # ## #  #####   # #  #  #    #
 #    #  #       #  # #  #    #
 #    #  #       #   ##  #    #
 #    #  ######  #    #   #### 
*/

.ui-menu {
  /*
  border-width: thick !important;
  width: fit-content !important;
  */
  margin: 0em !important;
  padding: 0em !important;
}

.ui-menubar {
  /*
  width: fit-content !important;
  */

  border: none !important;
  margin: 0em !important;
  padding: 0em !important;
}

.ui-menuitem {
  margin: 0em;
  padding: 0em;
}

.ui-menu-list {
  margin: 0em;
  padding: 0em;
}

ul.ui-menu-child {
  white-space: nowrap;
  width: auto !important;
}

.ui-menuitem-text {
  padding: 0em;
  margin: 0em;
}

.boldMenuItem .ui-menuitem-text  {
  padding: 0;
  font-size: 1em;
  color: gray;
  font-weight: bolder;
}

.bigBoldMenuItem .ui-menuitem-text  {
  padding: 0;
  font-size: 2em;
  color: gray;
  font-weight: bolder;
}

.bigGreenMenuItem .ui-menuitem-text  {
  padding: 0;
  font-size: 2em;
  color: green;
  font-weight: bolder;
}

.redMenuItem .ui-menuitem-text  {
  padding: 0;
  background-color: white;
  color: #EF0000 !important;
}

.greenMenuItem .ui-menuitem-text {
  padding: 0;
  background-color: white;
  color: #006400 !important;
}

XXX.whiteMenuItem .ui-menuitem-text {
  padding: 0.5em;
  background-color: white;
  color: black;
}

/*
 #####    ####    #####    ##     #####  ######
 #    #  #    #     #     #  #      #    #
 #    #  #    #     #    #    #     #    #####
 #####   #    #     #    ######     #    #
 #   #   #    #     #    #    #     #    #
 #    #   ####      #    #    #     #    ######


/* Styles for rotateTableCellContent plugin*/
table div.rotated {
  -ms-transform:rotate(270deg); /* IE 9 */
  -moz-transform:rotate(270deg); /* Firefox */
  -webkit-transform:rotate(270deg); /* Safari and Chrome */
  -o-transform:rotate(270deg); /* Opera */
}

thead th {
  vertical-align:bottom;
}

table .vertical {
  white-space:nowrap;
  background-color:white;
}

/*
  ####   #    #   ####    #####   ####   #    #
 #    #  #    #  #          #    #    #  ##  ##
 #       #    #   ####      #    #    #  # ## #
 #       #    #       #     #    #    #  #    #
 #    #  #    #  #    #     #    #    #  #    #
  ####    ####    ####      #     ####   #    #


    #     ####    ####   #    #   ####
    #    #    #  #    #  ##   #  #
    #    #       #    #  # #  #   ####
    #    #       #    #  #  # #       #
    #    #    #  #    #  #   ##  #    #
    #     ####    ####   #    #   ####
*/

.ui-icon.structure {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.pulse {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.this_page_unselect_all {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.upload {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.documents {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.grid_view {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.append_rows {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.compare {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.logic {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.login {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.copy {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.columns {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.whale {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.turtle {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.configure {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.grid_rows_and_columns {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.pains {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.quad_bike {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.form_view {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.seahorse {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.all_pages_select_all {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.pig {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.grid_rows {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.append {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.running_man {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.question_mark {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.standard_compare {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.gorilla {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.structureGrid {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.tools {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.this_page_select_all {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.shopping_cart {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.overlay_mean_graphs {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.details {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.goose {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.dynamic_grid_view {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.panel_plots {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.set {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.reminder {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.horse {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.no_running {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.camera {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.heat_map {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.search {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.mountains {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.violin {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.play {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.bar_chart {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.combine {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.fish {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.chicken {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.csv {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.fit-to-page {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.insect {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.pick {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.set_columns {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.table_view {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.pear {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.center {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.mean_graphs {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.all_pages_unselect_all {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.id_card {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.unicorn {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.excel {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.scatter {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.octopus {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.grid_columns {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.set_rows {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.crab {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.rows {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.tanimoto {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.line_chart {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.mind_map {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.append_columns {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.running {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.grid_compare {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.summary {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.info {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.logout {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.connect {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.foodCan {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.redX {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.redXsolid {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.eye {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.tag {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.funnel {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.batch {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.home-outline {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.home-filled {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}
.ui-icon.compass {
  background: url("") !important;
  background-repeat: no-repeat;
  height:36px;
  width:36px;
}