:root {
  --gtk-shadow-color: #0008;
  --gtk-highlight-color: #FFF8;
  --gtk-menu-shadow-color: #CCC4;
  --gtk-border-color: #888;
  --gtk-window-background-color: #FFF;
  --gtk-window-text-color: #000;
  --gtk-titlebar-background-color: #CCC;
  --gtk-titlebar-text-color: #000;
  --gtk-titlebar-border-color: #AAA;
  --gtk-menubar-background-color: #EEE;
  /* --gtk-menubar-text-color: #222; // use --gtk-menu-text-color */
  /* --gtk-menubaritem-hover-background-color: #CCC; // use --gtk-menu-item-hover-background-color */
  /* --gtk-menubaritem-disabled-color: #888; // use --gtk-menu-item-disabled-color */
  --gtk-menu-background-color: #EEED;
  --gtk-menu-text-color: #222;
  --gtk-menu-item-hover-background-color: #CCC;
  --gtk-menu-item-selected-background-color: #36C;
  --gtk-menu-item-selected-text-color: #FFF;
  --gtk-menu-item-disabled-color: #888;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;  
}

.inheritHeigth {
  height: inherit;
  min-height: inherit;
  max-height: inherit;
}

.gtkShadowTypeNone {
  box-shadow: none;
}
.gtkShadowTypeIn {
  box-shadow: inset 2px 2px 1px var(--gtk-shadow-color,rgba(0, 0, 0, 0.35));
}
.gtkShadowTypeOut {
  box-shadow: 2px 2px 1px var(--gtk-shadow-color,rgba(0, 0, 0, 0.35));
}
.gtkShadowTypeEtchedIn {
  box-shadow: inset 1px 1px 3px var(--gtk-shadow-color,rgba(0, 0, 0, 0.5)), inset -1px -1px 3px var(--gtk-highlight-color,rgba(255, 255, 255, 0.5));
}
.gtkShadowTypeEtchedOut {
  box-shadow: 1px 1px 3px var(--gtk-shadow-color,rgba(0, 0, 0, 0.5)), -1px -1px 3px var(--gtk-highlight-color,rgba(255, 255, 255, 0.5));
}

.gtkHScrollbarPolicyAlways    { overflow-x: scroll; }
.gtkHScrollbarPolicyNever     { overflow-x: hidden; }
.gtkHScrollbarPolicyAutomatic { overflow-x: auto;   }
.gtkVScrollbarPolicyAlways    { overflow-y: scroll; }
.gtkVScrollbarPolicyNever     { overflow-y: hidden; }
.gtkVScrollbarPolicyAutomatic { overflow-y: auto;   }

.gtkButtonBoxDefaultStyle { }
.gtkButtonBoxSpread { justify-content: space-around;  }
.gtkButtonBoxEdge   { justify-content: space-between; }
.gtkButtonBoxStart  { justify-content: flex-start;    }
.gtkButtonBoxEnd    { justify-content: flex-end;      }
.gtkButtonBoxCenter { justify-content: center;        }

.gtkWindow {
  max-height: 100vh;
  color: var(--gtk-window-text-color,#000000);
  border: 2px solid var(--gtk-border-color,#888);
  background-color: var(--gtk-window-background-color,#ffffff);
  box-shadow: 5px 5px 15px var(--gtk-shadow-color,rgba(0, 0, 0, 0.5));
  font-family: Arial, sans-serif;
  position: absolute;  
}
.gtkWindow .gtkWindowTitlebar {
  border: 2px solid var(--gtk-titlebar-border-color,#AAAAAA);
  background-color: var(--gtk-titlebar-background-color,#CCCCCC);
  color: var(--gtk-titlebar-text-color,#000000);
  padding: 5px;
  cursor: move;
  font-weight: bold;
  user-select: none;
  overflow: clip;
  white-space: nowrap;
  text-align: center;  
}
.gtkWindow .gtkWindowCloseButton {
  float: right;
  margin: 2.5px;
}
.gtkWindow .gtkWindowContentArea {
  /*scrollbar-gutter: stable;*/
  width: 100%;
  height: calc(100% - 2em); /*accounting for titlebar*/
  min-height: inherit;
  /*max-height: 95vh;*/
  box-sizing: border-box;
  overflow: auto;
  padding: 0;
  margin: 0;
}

.gtkWidget {  
  font-size: 13px;
}

.gtkToplevel {
  padding: 5px;
  margin: 5px;
  resize: both;
  overflow: hidden;
}

.gtkMenuBar {
  border-bottom: 1px solid var(--gtk-border-color,#888);
  background-color: var(--gtk-menubar-background-color,#EEEEEE);
  color: var(--gtk-menu-text-color,#222222);
  display: flex;
  position: relative;
  z-index: 1000;
  padding: 5px;
  flex-direction: row;
  white-space: nowrap;
}
.gtkMenuBar .gtkMenuBarItem {
  margin: 0;
  padding: 0;
  margin-right: 15px;
  cursor: pointer;
  user-select: none;    
}
.gtkMenuBar .gtkMenuBarItem:hover {
  background-color: var(--gtk-menu-item-hover-background-color,#CCCCCC);
  padding-top: 2px;
  margin-top: -2px;  
  padding-bottom: 2px;
  margin-bottom: -2px;  
  padding-left: 5px;
  margin-left: -5px;
  padding-right: 5px;
  margin-right: 10px;
}
.gtkMenuBarItem .gtkMenu { 
  background-color: var(--gtk-menu-background-color,rgba(238,238,238,0.9));
  border: 1px solid var(--gtk-border-color,#888);
  color: var(--gtk-menu-text-color,#222);
  display: none;
  position: absolute;
  margin-top: 6px;
  box-shadow: 5px 5px 15px var(--gtk-menu-shadow-color,rgba(192,192,192, 0.5)); 
}
.gtkMenuBarItem .gtkMenuVisible { /*must be after gtkMenuBarItem to work*/
  display: block;
}
.gtkMenuBarItem .gtkDisabled {
  color: var(--gtk-menu-item-disabled-color,#888888);
  cursor: not-allowed;
}
.gtkMenu .gtkMenuItem { 
  margin: 0;
  padding: 0.1em 0.2em;  
  cursor: pointer;
  user-select: none;
}
.gtkMenu .gtkCheckMenuItem .gtkMenuItemLabel { 
}

.gtkMenu .gtkMenuItem:hover {
  background-color: var(--gtk-menu-item-hover-background-color,#CCCCCC);
}
.gtkMenu .gtkDisabled {
  color: var(--gtk-menu-item-disabled-color,#888);
  cursor: not-allowed;
}

/* .gtkMenu: "position: absolute;background-color: gray;left:100%;top:0;"*/

.gtkFrame {
  border: 1px solid var(--gtk-border-color,#888);  
  margin: 0.6em 0 0 0;
  flex: 0.6;
  position: relative;
}
.gtkFrameWithLabel {
  padding: 0.6em 0 0 0;
}
.gtkFrame .gtkFrameLabel {
  background-color: var(--gtk-window-background-color,#FFF);
  /* add outline (filter) to cover border behind label */
  /*text-shadow: -2px -1px 0 var(--gtk-window-background-color,#FFF), */
  top: -.5em;  
  position: absolute;
  
}

.gtkTable {
  display: grid;  
}
.gtkTable .gtkTableHomogeneous {
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
}

.gtkLabel {
  text-align: center; /*left*/
  text-wrap-mode: nowrap;
  white-space: pre;
  margin: auto;
  padding: 0.3em;
}

.gtkModal {
  position: absolute;  
  margin: -10px;
  padding: 10px;
  width: inherit;
  height: inherit;
  background-color: rgba(255, 255, 255, 0.5);  
  z-index: 2000;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gtkCheckButton {  
  text-align: left;
  cursor: pointer;  
}

.gtkRadioButton {  
  text-align: left;
  cursor: pointer;  
}

.gtkButton {
  /*border: 1px solid var(--gtk-border-color,#888);
  background-color: var(--gtk-window-background-color,#FFF);
  padding: 5px 10px;
  margin: 2px;
  user-select: none; */
  cursor: pointer;  
}
.gtkDisabled {
  /*color: var(--gtk-menu-item-disabled-color,#888);*/
  cursor: not-allowed;
}

.gtkLinkButton {
  /*
  cursor: pointer;  
  color: blue;
  text-decoration: underline;
  */
}

.gtkSeparatorHorizontal {
  border-top: 1px solid var(--gtk-border-color,#888);
  margin: 5px 0;
  width: 100%;
}
.gtkSeparatorVertical {
  border-left: 1px solid var(--gtk-border-color,#888);
  margin: 0 5px;
  height: 100%;
}

.gtkPaned {
  display: flex;
  /* border: 1px solid var(--gtk-border-color,#888); */
}

.gtkVPaned {
  flex-direction: column;
}
.gtkHPaned {
  flex-direction: row;
}

.gtkTreeView {
  /* border: 1px solid var(--gtk-border-color,#888); */
  background-color: var(--gtk-window-background-color,#FFF);
  overflow: auto;  
}

/* affects all <tr> inside .gtkListStore that does not have the gtkListStoreHeader class */
.gtkListStore tr:not(.gtkListStoreHeader):not(.selected):nth-child(even) {
  background-color: var(--gtk-menubar-background-color,#EEE);
}
.gtkListStore tr:not(.gtkListStoreHeader):not(.selected):hover {
  background-color: var(--gtk-menu-item-hover-background-color,#CCC);
}

 /*hide 3rd column (internal use)*/
.gtkListStore td:nth-child(3), .gtkListStore th:nth-child(3) {
  display: none;
}

/*hide left and right border of first header column*/
.gtkListStore th:first-child{
  border-left: none;
  border-right: none;
}

/*right border of second header column*/
.gtkListStore th:nth-child(2){
  border-right: none;
}

.gtkListStore td:nth-child(1) { text-align: var(--align-col-1, left); }
.gtkListStore td:nth-child(2) { text-align: var(--align-col-2, left); }
.gtkListStore td:nth-child(3) { text-align: var(--align-col-3, left); }
.gtkListStore td:nth-child(4) { text-align: var(--align-col-4, left); }
.gtkListStore td:nth-child(5) { text-align: var(--align-col-5, left); }
.gtkListStore td:nth-child(6) { text-align: var(--align-col-6, left); }
.gtkListStore td:nth-child(7) { text-align: var(--align-col-7, left); }
.gtkListStore td:nth-child(8) { text-align: var(--align-col-8, left); }
.gtkListStore td:nth-child(9) { text-align: var(--align-col-9, left); }

.gtkListStore {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  font-family: inherit;
}
.gtkListStore .selected {
  background-color: var(--gtk-menu-item-selected-background-color,#36C);
  color: var(--gtk-menu-item-selected-text-color,#FFF);
}

.gtkListStoreHeader .gtkTreeColumn {  
  border: 1px solid var(---gtk-titlebar-border-color,#AAA);
}
.gtkListStoreHeader .clickable {
  cursor: pointer;
  /* button-like layout */
  padding: 2px 5px;  
}
.gtkListStoreHeader .clickable:hover {
  background-color: var(--gtk-menu-item-hover-background-color,#CCCCCC);
}  

.gtkBox { 
  display: flex;
  border: none; 
  padding: 0;
  margin: 0; 
}
.gtkHBox {
  flex-direction: row;
  width: inherit;
}
.gtkVBox {
  flex-direction: column;
  height: inherit;
}

.gtkButtonBox {
  display: flex;
  border: none; 
  padding: 5px;
  margin: 5px; 
  /* justify-content: center; */
  gap: 10px;
}

.gtkScrolledWindow {
  /*scrollbar-gutter: stable;*/
  overflow: auto;
  flex: 1;
}

.gtkEntry {
  border: 1px solid var(--gtk-border-color,#888);
  background-color: var(--gtk-window-background-color,#FFF);
  padding: 5px;
  margin: 5px;
  width: calc(100% - 22px); /*accounting for border and padding*/
  box-sizing: border-box;
}

.gtkTextView {
  /*border: 1px solid var(--gtk-border-color,#888);*/
  background-color: var(--gtk-window-background-color,#FFF);
  /*padding: 5px;
  margin: 5px;*/
  overflow: auto;  
  word-wrap: break-word; 
  resize: none; 
}
.gtkTextBuffer {
  width: 100%;
  /*height: 100%;*/
  max-height: 0;
  white-space: pre-wrap;
}

/* style for the DEFAULT control */
.gtkWidgetDefault {
  border: 2px solid #000; /* var(--gtk-shadow-color,#0008) */
}

.gtkHidden {
  display: none;
}