/* Project:		gtkDecorator
 * Version:		2.7.16 @ 2022-08-12::2022-07-21::2021-08-25::2021-07-05::2020-09-14
 * Author:		Grzegorz Petri
 * Contact:		gpetri13@gmail.com
 * Descripton:	Based on GTK3 UI, sets of ready-to-use classes for node Containers, form Controls and site Layout-sets
 */
 
.gtkVersion:after {
	content: '2.7.16';
}
.gtkCompleteTest {
	width: var(--finished-color);
	background-color: red;
}
.gtkComplete > hr {	width: 30%; }
.gtkComplete > hr + div:after {	content: '30'; }
	/* 7.3: (done.length*100)/ds = dt.length-dd.length */
 
/*############*//*### MAIN ###*//*############*/
:root {
	/* kolory */
	--text-color-bk: #000;
	--text-color-wh: #fff;
	--link-color: #4a90d9;
	--hover-color: #2562c7;
	--h3lst-color: #606060;
	--bg-hdr-grad: linear-gradient( 180deg, #f4f4f4 90%, #dbdbd9 100% );
	--bg-btn-grad: linear-gradient( 180deg, rgb(237,237,237),#c3c6c5 );
	--bg-btn-sbmt-color: #5682b7;
	--bg-btn-sbmt-grad: linear-gradient(180deg,#6f9ccd,#4776b1);
	--bg-btn-sbmt-hover-color: #6f9ccd;
	--bg-btn-sbmt-hover-grad: linear-gradient(180deg,#6f9ccd,#6f9ccd);
	--bg-active: #4a90d9;
	--bg-selected: #4a90d9;
	--bg-white: #fff;
	--bg-gray-light: #e5e8e7;
	--bg-gray-dark: #c3c6c5;
	--bg-paper: #fffde3;
}
html {
	font-size: 16px !important;
}
html, body {
	height: 100%;
	width: 100%;
}
body {
	margin: 0px;
	font-family: Lato, Verdana, DejaVu Sans;
	font-size: 10px;
}
*:link,
a:visited {	color: var(--link-color);}
a:hover {	color: var(--hover-color);/*4787c9;*/ }
h1, h2, h3, h4, h5, h6, p {
	margin: 0px;
}

 /* DESKTOP */

html { font-size: 12px; }
.gDesk {
	background-color: #808080;
	margin: 0px;
	font-family: Cantarell;
}
.gDesk > header a {
	color: #fff;
	text-decoration: none;
}
/* ### top MAIN PANEL ### */
.gDesk > header {
	background-color: #000;
	color: #fff;
	display: block;
	font-size: 1.25rem;
	font-size: 1rem;
	font-weight: 800;
	line-height: 2rem;
	line-height: 1.75rem;
	text-align: center;
	padding: 0px 0.5%;
	height: 3%;/*2.2rem;*/
	width: 99%;
}
.gDesk > header a, .gDesk > header a:hover, .gDesk > header a:visited { color: #fff; }
.gDesk > header > .putLeft > *,
.gDesk > header > .putRight > * {
	display: inline-block;
	padding: 0px 0.5rem;
}
.gDesk > header > div > div {	vertical-align: top; }
.gDesk > header > div > *:active  {
	border-bottom: solid 2px #4a90d9;
}
.gDesk > header div > p,
.gDesk > header div > ul {
	display: inline-block;
	margin: 0px;
}
.gDesk > header div > ul {
	list-style-type: none;
	padding: 0px;
}
/* ### aside DOCK ### */
.slide {
	position: fixed;
	transition: 300ms ease;
	background-color: inherit;
}
.slide.left {
	left: -4rem;
	padding-right: 1.5rem;
}
.slide.right {
	right: -4rem;
	padding-left: 1.5rem;
}
.slide.left > div, .slide.right > div {
	height: 1055px;
	/*width: 4rem;*/
}
.slide.top {
	top: -4rem;
	padding-bottom: 1.5rem;
}
.slide.bottom {
	bottom: -4rem;
	padding-top: 1.5rem;
}
.slide.top, .slide.bottom {
	/*height: 4rem;*/
	width: 100%;
}
.slide:hover { transition: 300ms ease;}
.slide.left:hover {
	left: 0px;
	padding-right: 0rem;
}
.slide.right:hover {
	right: 0px;
	padding-left: 0rem;
}
.slide.top:hover {
	left: 0px;
	top: 0px;
	padding-bottom: 0rem;
}
.slide.bottom:hover {
	left: 0px;
	bottom: 0px;
	padding-top: 0rem;
}
#appsIcon,
nav.slide > div > div {
	background-color: inherit;
	border-radius: 5px;
	color: #fff;
	display: block;
	text-align: center;
	margin: 2px;
	margin-left: 0px;
	height: 4rem;
	width: 4rem;
}
nav img {
	border-radius: 5px;
	height: 4rem;
	width: 4rem;
}
#appsIcon {
	position: absolute;
	bottom: 0px;
	left: 0px;
	color: #fff;
	font-size: 8px;
	line-height: 12px;
	margin-left: 4px;
	text-align: center;
}
#appsIcon:after {
	content: " • • • • • • • • • ";
	font-size: 10px;
	letter-spacing: 2px;
	word-wrap: break-word;
	white-space: normal;
	height: 2rem;
	width: 2rem;
}
aside.slide > div {
	height: 80px;
	width: 80%;
}
nav.slide > div { background-color: #2A3E51; }
#appsIcon:hover, nav > div > div:hover {
	background-color: #4F5F6D;
}
.slide.top > div > div, .slide.bottom > div > div {
	display: inline-block;
	margin: 2px 0px 0px 1px;
}
/* ### central WORKAREA ### */
.gDesk > section {
	/*position: absolute;
	top: 100px;
	left: 0px;* /
	padding-top: 2.2rem;*/
	min-height: 900px;/*1052px;*/
}
.wallPaper {
	background: url('../../wallhaven-bsod.png') center;
	background-size: cover;
}
#apps {
	background: radial-gradient( circle, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
	color: #fff;
	text-align: center;
	height: 1052px;
	width: 100%;
}
#appsOverview {
	padding: 2rem 0px;
}
#appsOverview a {
	margin: 3rem;
}
#appsOverview a, #appsOverview img {
	border-radius: 8px;
	height: 10rem;
	width: 10rem;
}
/* ### top MAIN PANEL elements ### */
.gtkDropdown {
	overflow: hidden;
	height: 1.5rem;/*2.2rem;*/
}
.gtkDropdown:hover { overflow: visible;	}
.gtkDropdown > a + div {
	position: relative;
	display: block;
	float: right;
	/*padding-top: 1rem;*/
	width: var(--width);
	z-index: 2;
}
.gtkDropdown > a + div::before {
    position: relative;
    left: 45%;
    top: 5px;
	content: '♦';/*▲';*/
	color: #3A4241;
	font-size: 2rem;
    float: left;
	height: 10px;
	line-height: 1rem;
	transform: rotate(90deg);
}
.gtkDropdown > a {	display: block;	}
.gtkDropdown > a + div ul {
	background-color: #3A4241;
	border: solid 1px #2D3232;
	border-radius: 1rem;
	padding: 1rem 0px;
	width: 100%;
}
.gtkDropdown > a + div li:hover {	background-color: #6c7272;}

 /* DISPLAY */

/*### Label @ gtkLabel ###*/
.gtkLabel,
.gtkLabelLine {
	color: #000;
	cursor: default;
	display: inline-block;/*block;*/
	font-size: 1.1rem;
	line-height: 1.875rem;
	min-height: 1.875rem;
	margin: 0;
	margin-bottom: .188rem;
	vertical-align: middle;
	min-width: 1.2rem;
	width: var(--width-lbls, 100%);
}
a.gtkLabel { cursor: pointer; }
.gtkLabel.wDesc {
	padding: 0;
	vertical-align: top;
}
.gtkLabel.wDesc > p { text-align: inherit; }
.gtkLabel + p, .gtkLabel.wDesc + p { display: inline-block; }
/* blueBubble problem 
.gtkLabel + p,
.gtkLabel > p {
	color: #808080;
	font-size: .7rem;
	line-height: .8rem;
	padding: 0;
	text-align: inherit;
}*/
.gtkLabelCateg {
	align-self: stretch;
	display: block;
	font-weight: 800;
	margin-bottom: .188rem;
	padding: .563rem 0 .188rem 0;
	width: 100%;
}
.gtkLabel.autoWidth { --width-lbls: auto; }
.setJustify {	text-align: justify; }
.setEllips { text-overflow: ellipsis; }

	/* .gtkLabel
	line-height: 1.125rem;
	height: 1.125rem;
	padding: .375rem .5rem;
	margin: .0625rem .3rem;*/

/*### ImageIcon @ gtkImage ###*/
.gtkImage {
	display: inline-block;
	margin: 1rem;
	text-align: center;
	height: 2.5rem;
	min-width: 2.5rem;
	width: auto;
	vertical-align: middle;
}
.gtkImage img {
	height: 2.5rem;
	width: auto;
}
.gtkImage.mar0500 {	margin: 0 1rem 0 0;}
.gtkImage.preview:hover {
	position: relative;
}
.gtkImage.preview:hover img,
.gtkImage.preview:hover img:hover {
	position: absolute;
	top: -50px;
	height: 10rem !important;
	width: auto;
}

/*### Scrollbar ###*/
.gtkScrollNot { overflow: hidden; }
.gtkScroll { overflow: scroll; }
.gtkScrollX { overflow-x: scroll; }
.gtkScrollY { overflow-y: scroll; }
.gtkScrollX {	width: var(--scrollWidth); }
.gtkScrollY {	height: var(--scrollHight); }
.gtkScrollX.autoSbar {	overflow-x: auto; }
.gtkScrollY.autoSbar {	overflow-y: auto; }

textarea.gtkScroll { resize: both; overflow: auto; }
textarea.gtkScrollX { resize: horizontal; overflow-x: auto; }
textarea.gtkScrollY { resize: vertical; overflow-y: auto; }

/*### Separator @ gtkSeparator ###*/
.gtkSeparator {
	display: inline-block;
	border-right: solid 1px #c3c6c5;
	height: 2rem;
	margin: 0px 0.3rem;
	vertical-align: top;
}
.putLeft.gtkSeparator {
	border-right: solid 1px #c3c6c5;
	padding-right: 0.3rem;
}
.putRight.gtkSeparator {
	border-left: solid 1px #c3c6c5;
	padding-left: 0.3rem;
}
.gtkHbarSeparator {
	height: 2.4rem;
	margin-top: -0.4rem;
	padding-top: 0.4rem;
	text-align: left;
}
.putRight.gtkHbarSeparator {
	border-left: solid 1px #c3c6c5;
	padding-left: 0.4rem;
}
.putLeft.gtkHbarSeparator {
	border-right: solid 1px #c3c6c5;
	padding-right: 0.4rem;
}

/*### gtkIntro ###*/
.gtkIntro {
	border: solid 0px #c3c6c5;
	font-size: 1.6em;
	text-align: center;
	padding-top: 1%;
	padding-bottom: 1%;
}
.newContent.gtkIntro {	margin-top: -1%; }
.gtkIntro img {
	filter: invert(50%);
	margin-bottom: 0.5em;
}
.gtkIntro p {
	color: #000;
	font-weight: 400;
	margin: 0px;
}
.gtkIntro p + ol,
.gtkIntro p + ul {
	display: inline-block;
	list-style-type: none;
	padding-left: 0px;
	margin: 0.5em 0px;
	width: auto;
}
.gtkIntro li > p {
	display: inline-block;
	width: auto;
}
.gtkIntro p + p,
.gtkIntro p + ol p,
.gtkIntro p + ul p {
	color: #404040;
	font-style: italic;
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 2rem;
	margin: 0px;
}
.gtkIntro.x:before {
	position: relative;
	top: 1.9rem;
	color: #808080;
	content: "x";
	display: block;
}
.hiddenContent.gtkIntro:before {	content: '~';}
.newContent.gtkIntro:before {	content: '->';}

.bgPaper {	background: #fffde3; }
.bgGray { background-color: var(--bg-gray-light); }
.bgWhite { background-color: #fff; };

 /* BUTTONS */

/*### MenuButton @ gtkBtn ###*/
.gtkBtn, .gtkButton, .gtkToggleButton, .gtkFlatBtn {
	color: #000;
	font-size: 1.0rem;
	line-height: 1.1rem;
	font-weight: 300;
	vertical-align: middle;
}
.gtkBtn, .gtkButton,
.gtkToggleButton, input.gtkToggleButton + label,
.gtkFlatBtn:focus, .gtkFlatBtn:hover,
.gtkComboBox:focus > .gtkFlatBtn, .gtkComboBox:hover > .gtkFlatBtn {
	background-color: #c3c6c5;
	background-image: linear-gradient(180deg,rgb(237,237,237),#c3c6c5);
	border-style: solid;
	border-color: #B6B6B3;
	border-width: 1px;
	border-bottom: solid 1px #91918c;
	border-radius: .3rem;
	font-style: normal;
/*	vertical-align: top;*/
}
.gtkBtn, .gtkFlatBtn, .gtkToggleButton, input.gtkToggleButton + label, .gtkButton, .gtkLabelX, .gtkComboBox, .gtkComboBox > options,
.gtkBtn:visited, .gtkFlatBtn:visited, .gtkButton:visited, .gtkLabelX, .gtkComboBox:visited, .gtkComboBox > options {
	color: #000;
	cursor: pointer;/*default;*/
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 1.1rem;
	height: 1.2rem;
	min-width: 1.2rem;
	padding: .3rem .5rem;
	margin: 0 .3rem;
	vertical-align: middle;
	width: auto;
}
.gtkBtn {
	padding: .3rem;
	width: 1.2rem;
}
button.gtkBtn { 	height: 1.9rem; width: 1.9rem; }
button.gtkButton { 	height: 1.9rem; width: auto; }
.gtkBtn > span,
.gtkButton > span {	vertical-align: top; }
.gtkComboBox:focus > .gtkFlatBtn, .gtkComboBox:hover > .gtkFlatBtn {
	background-color: #d9d9d7;
	background-image: none;
}
.gtkBtn.selected,
.gtkButton.selected {
	background: #d9d9d7;
	border: solid 1px #B6B6B3;
	font-weight: 400;
}
.gtkBtn:focus, .gtkBtn:hover,
.gtkButton:focus, .gtkButton:hover {
	background-image: linear-gradient( 180deg, rgb(237,237,237), rgb(237,237,237) ) !important;
	color: #000;
}
.gtkEntry + .gtkBtn, .gtkEntry + .gtkBtn + .gtkBtn, .gtkLabel + * {
	margin-left: 0px;
	margin-right: 0px;
}

/*### Button @ gtkButton ###*/

/*### Submit @ gtkSubmit ###*/
.gtkSubmit, submitBtn,
.gtkButton.btnSubmit {
	background-color: #5682b7;
	background-image: linear-gradient(180deg,#6f9ccd,#4776b1);
	border: solid 1px #215d9c;
	border-bottom: solid 1px #184472;
	color: #fff !important;
}
.gtkSubmit, .submitBtn,
.gtkButton.btnSubmit,
input[type="submit"] {	height: auto; }
.gtkSubmit:focus, .gtkSubmit:hover,
.submitBtn:focus, .submitBtn:hover,
.btnSubmit:focus, .btnSubmit:hover {
	background-color: #6f9ccd;
	background-image: linear-gradient(180deg,#6f9ccd,#6f9ccd) !important;
}

/*### ToggleButton @ gtkFlatBtn ###*/
.gtkToggleButton,
input.gtkToggleButton + label {
	background-color: #c3c6c5;
	background-image: linear-gradient( 180deg,#f4f4f4 , #e5e8e7 80% );
	font-weight: 300;
	margin: 0px;
}
.gtkBtn.toggled,
.gtkButton.toggled,
.gtkToggleButton.toggled,
input.gtkToggleButton:checked + label {
	background: #d9d9d7;
	border: solid 1px #B6B6B3;
}
.gtkToggleButton:hover,
.gtkToggleButton:focus {
	color: #000;
}
input.gtkToggleButton { display: none; }
.gtkFlatBtn {
	background: initial;
	background-color: initial;
	background-image: initial;
	margin: 0px 1px;
	margin-top: 1px;
	border-width: 0px;
	border-radius: 0px;
}
.gtkFlatBtn:focus, .gtkFlatBtn:hover { --comment: "było razem z .gtkToggleButton oraz line 17"}
.gtkComboBox:hover > .gtkFlatBtn {
	margin: 0px;
}

/*### LockButton ###*/
/*
 * #TODO
 * */

/*### SwitchButton @ gtkSwitchBtn ###*/
.gtkStackSw .gtkButton,
.gtkStackSwitch .gtkButton {/* przyciski w Stacku */
	border-radius: 0;
	border-right: solid 0 #B6B6B3;
	color: #000;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.2rem;
	height: 1.2rem;
	margin: 0;
	padding: .3rem 1rem;
	min-width: 100px;
	width: auto;
}
/*### Stack Switcher BUTTONS ###*/
.gtkStackSw .gtkButton.selected,
.gtkStackSw .gtkRadioBtn:checked + label.gtkButton {
	background: #d9d9d7;/*-image: linear-gradient(180deg,rgb(237,237,237),rgb(237,237,237)) !important;*/
	border-top: solid 1px #808080;
	border-left: solid 1px #808080;
	border-bottom: solid 1px #808080;
	font-weight: 400;
}
.gtkStackSw .gtkButton.selected:last-child,
.gtkStackSw .gtkRadioBtn:last-child:checked + label.gtkButton {
	background: #d9d9d7;/*-image: linear-gradient(180deg,rgb(237,237,237),rgb(237,237,237)) !important;*/
	border-top: solid 1px #808080;
	border-left: solid 1px #B6B6B3;
	border-right: solid 1px #808080;
	border-bottom: solid 1px #808080;
	font-weight: 400;
}
.gtkStackSw > .gtkRadioBtn:checked + label.gtkButton:last-child {
	border-left: solid 1px #B6B6B3;
	border-right: solid 1px #808080;
}
/* ??testy?? */
.switchBtns { display: none; }
.switchBtns + .btnSwitch { display: inline-block; }
.switchBtns + .btnSwitch .dspIfOff {	display: inline-block; }
.switchBtns + .btnSwitch .dspIfOn {	display: none; }
.switchBtns:checked + .btnSwitch .dspIfOff {	display: none; }
.switchBtns:checked + .btnSwitch .dspIfOn {	display: inline-block; }

/*### ComboBox @ gtkComboBox ###*/
.gtkComboBox {
	--lstBox-bgColor: #fff;
	--lstBox-radius: 5px;
	--lstBox-width: 20%;
	position: relative;
	height: 1.9rem;
	padding-top: 0;
	padding-bottom: 0;
}
.gtkComboBox > .gtkListBox {
	display: none;
	/*transform: translateX(50%);*/
}
.gtkComboBox a.active + .gtkListBox,
.gtkComboBox > .gtkFlatBtn:focus + .gtkListBox,
.gtkComboBox:focus-within > .gtkListBox,
.gtkComboBox:hover > .gtkListBox,
.gtkComboBox:focus > .gtkListBox,
.gtkComboBox > .gtkListBox:hover,
.gtkComboBox > .gtkListBox:focus {
	position: absolute;
	left: var(--lstBox-width);
	display: block;
	z-index: 10;
}
.gtkComboBox > .gtkListBox li > a {
	white-space: nowrap;
}
.gtkComboBox.pullUp .gtkListBox {
	margin-top: -2.4rem;
}
.gtkComboBox.rndList > .gtkListBox {
	border-radius: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.gtkComboBox.ttList > .gtkListBox {
	margin-top: 10px;
}
.gtkComboBox.ttList > .gtkListBox::before {
	position: relative;
	top: -20px;
	content: "\25B2";
	display: block;
	color: var(--lstBox-bgColor);
	text-align: center;
	text-shadow: #c3c6c5 0 -1px 1px;
	margin-bottom: -25px;
	height: 25px;
}

/*### PickButton @ gtkPickBox ###*/
.gtkPickBox {
	position: relative;
	height: var(--pick-height);
	width: var(--pick-width);
}
.gtkPick {
	position: absolute;
	border: solid 1px #b4b5b1;
	margin: 0;
	overflow: hidden;
	height: var(--pick-height);
	width: var(--pick-width);
}
.gtkPick .gtkRadioListItem{}
.gtkPick .gtkRadioListItem+label {
	display: none;
}
.gtkPick:hover {
	top: 0;
	background-color: #ededed;
	height: auto;
	z-index: 101;
}
.gtkPick:hover .gtkRadioListItem+label {
	height: auto;
	max-height: 640px;
	display: inline-block;
}
.gtkPick .gtkRadioListItem+label {}
.gtkPick .gtkRadioListItem:checked+label {
	height: auto;
	display: inline-block;
}

/*### ColorButton @ gtkColorPick ###*/
.gtkColorPicker {
	position: relative;
	height: 45px;
	width: 60px;
}
.gtkColorPicker > label {
	display: block;
	font-size: 0;
	line-height: 0;
}
.gtkColorPicker > label + div {
	background-color: var(--bg-gray-light);
	border: solid 1px #808080;
	border-radius: 5px;
	position: relative;
	display: inline-block;
	font-size: 1.4em;
	padding: .1em;
	height: 1.6em;
	width: 2.3em;
	overflow: hidden;
	vertical-align: top;
}
.gtkColorPicker > label + div > input {	display: none; }
.gtkColorPicker > label + div > input + label {
	background-color: var(--picker-color);
	border: solid 1px #808080;
	border-radius: 5px;
	display: none;
	font-size: 1em;
	line-height: 1.3em;
	text-align: center;
	margin: .1em;
	height: 1.3em;
	width: 2em;
	vertical-align: top;
}
.gtkColorPicker > label + div > input + label + div {
	color: #000;
	display: inline-block;
	font-size: 1em;
	line-height: 1em;
	text-align: center;
	height: 2em;
	width: 2em;
}
.gtkColorPicker > label + div:hover {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: 6.9em;
}
.gtkColorPicker:hover > label + div > input + label,
.gtkColorPicker > label + div:hover > input + label,
.gtkColorPicker > label + div > input:checked + label {
	border-radius: 0;
	border-color: var(--picker-color);
	display: block;
	float: left;
}
.gtkColorPicker:hover > label + div > input + label,
.gtkColorPicker:hover > label + div:hover > input + label {
	border: solid 1px #808080;
}
.gtkColorPicker:hover > label + div > input + label:hover,
.gtkColorPicker > label + div > input + label:hover {
	border: solid 1px #404040;
}
.gtkColorPicker > label + div:hover > input:checked + label > div:after {
	content: '✓';
}
.gtkColorPicker > label + div:hover > .rndBox + label {
	border-radius: 5px 5px 0 0;
}
.gtkColorPicker > label + div:hover > .sqrBox + label {
	border-radius: 0;
}
.gtkColorPicker > label + div:hover > .endBox + label {
	border-radius: 0 0 5px 5px;
}
 
/*### CheckBtn @ gtkCheckBtn ###*/
/*### RadioBtn @ gtkRadioBtn ###*/
.gtkCheckBtn, .gtkRadioBtn {	display: none !important; }
*:not(.gtkStackSw) > .gtkCheckBtn + label:before,
*:not(.gtkStackSw) > .gtkRadioBtn + label:before {
	background-color: #c3c6c5;
	background-image: linear-gradient( 180deg, #f4f4f4, #e5e8e7 80% );
	border: solid 1px #B6B6B3;
	border-radius: 35%;
	color: #000;
	content: ' ';
	display: inline-block;
	font-size: 1rem;
	font-weight: 800 !important;
	margin: 0px 0px 0.2rem 0px;
	margin-right: 0.6rem;
	text-align: center;
	vertical-align: middle;
	line-height: 1rem;
	height: 1rem;
	width: 1rem;
}
/*### CheckBtn @ gtkCheckBtn ###*/
.gtkCheckBtn:checked + label:before {
	content: '✓';
	font-size: 1.4rem;
}
.gtkCheckBtn.chkBoxNo:checked + label:before {
	content: '-';
	line-height: 0.8rem;
}
/*### RadioBtn @ gtkRadioBtn ###*/
*:not(.gtkStackSw) > .gtkRadioBtn + label:before {
	border-radius: 50%;
}
*:not(.gtkStackSw) > .gtkRadioBtn:checked + label:before {
	content: '•';
	font-size: 0.9rem;
	line-height: 0.9rem;
}

/*### Switch @ gtkSwitch ###*/
.gtkSwitch > input {	display: none; }
.gtkSwitch > input + div {
	background-color: #c3c6c5;
	border: solid 1px #999;
	border-radius: 3px;
	cursor: grab;
	display: inline-block;
	height: 20px;
	width: 62px;
	vertical-align: middle;
}
.gtkSwitch > input:checked + div {
	border-color: #015294;
	background-color: #4a90d9;
}
.gtkSwitch > input + div:before, .gtkSwitch > input + div:after {
	border-radius: 3px;
	color: #000;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	line-height: 16px;
	height: 20px;
	width: 30px;
	vertical-align: top;
}
.gtkSwitch > input + div:before {
	content: ' ';
	box-shadow: #999 0px 1px 1px;
}
.gtkSwitch > input + div:after {
	content: '◯';
}
.gtkSwitch > input + div:before {
	background: linear-gradient(180deg, #f4f4f4, #e7e7e7);
	border-right: solid 1px #999;
}
.gtkSwitch > input:checked + div:before {
	background: initial;
	border-right: none;
	color: #fff;
	content: '|';
	box-shadow: none;
}
.gtkSwitch > input:checked + div:after {
	border-left: solid 1px #015294;
	background: linear-gradient(180deg, #f4f4f4, #e7e7e7);
	content: '';
	box-shadow: #808080 1px 1px 1px;
	margin-left: 1px;
}

/*### SpinButton @ gtkSpinButton ###*/
.gtkSpinButton {
	display: inline-block;
}
.gtkSpinButton .gtkBtn {
	background-color: #fff;
	background-image: initial;
	border-top: solid 1px #c3c6c5;
	border-left: solid 1px #e3e3e3;
	border-right: solid 0px #e3e3e3;
	border-bottom: solid 1px #c3c6c5;
	border-radius: 0px;
	color: #000;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2rem;
	height: 1.3rem;
	min-width: 1.3rem;
	padding: 0.3rem;
	vertical-align: top;
	width: auto;
}
.gtkSpinButton .gtkBtn:focus, .gtkSpinButton .gtkBtn:hover {
	background-color: #f4f4f4;
}
.gtkSpinButton .gtkBtn::after {	content: '—'; }
.gtkSpinButton .gtkBtn:last-child::after {	content: '+'; }
.gtkSpinButton.typeUpDown .gtkBtn { transform: rotate(-90deg); }
.gtkSpinButton.typeUpDown .gtkBtn::after {	content: '⟨'; }
.gtkSpinButton.typeUpDown .gtkBtn:last-child::after {	content: '⟩'; transform: rotate(90deg); }
.gtkSpinButton .gtkBtn:last-child {
	border-right: solid 1px #c3c6c5;
	border-radius: 0px 3px 3px 0px;
}
.gtkSpinButton .gtkEntry + .gtkBtn, .gtkSpinButton .gtkEntry + .gtkBtn + .gtkBtn {
	float: none;
}
.gtkSpinButton .gtkEntry:focus + .gtkBtn {
	border-top: solid 2px #4a90d9;
	border-bottom: solid 2px #4a90d9;
	margin-top: -1px;
	margin-bottom: 0px;
}
.gtkSpinButton .gtkEntry:focus ~ .gtkBtn:last-child {
	border: solid 2px #4a90d9;
	border-left: solid 1px #e3e3e3;
	margin-top: -1px;
	margin-bottom: 0px;
}
.gtkSpinButton.upDown {
	display: inline-grid;
	grid-template-areas:
		"ent up"
		"ent dw"
	;
	height: 3.2rem;
}
.gtkSpinButton.upDown > .gtkEntry {
	grid-area: ent;
	height: 2.6rem;
	margin: 0;
}
.gtkSpinButton.upDown > .gtkBtn {
	grid-area: up;
	border-right: solid 1px #c3c6c5;
	border-radius: 0 5px 0 0;
	height: 1rem;
}
.gtkSpinButton.upDown > .gtkBtn + .gtkBtn {
	grid-area: dw;
	border-top: 0;
	border-radius: 0 0 5px 0;
}
.gtkSpinButton.upDown > .gtkBtn::after,
.gtkSpinButton.upDown > .gtkBtn + .gtkBtn::after {
	display: inline-block;
	content: "⟩";
}
.gtkSpinButton.upDown > .gtkBtn::after {
	letter-spacing: -3px;
	transform: rotate(-90deg);
}
.gtkSpinButton.upDown > .gtkBtn + .gtkBtn::after {
	letter-spacing: 3px;
	margin-left: 3px;
	transform: rotate(90deg);
}
.gtkSpinButton > .gtkEntry:active,
.gtkSpinButton > .gtkEntry:focus {
	border-right: 0;
}
.gtkSpinButton.upDown > .gtkEntry:active + .gtkBtn,
.gtkSpinButton.upDown > .gtkEntry:focus + .gtkBtn {
	border-right: solid 2px var(--bg-active);
	border-bottom: 0;
}
.gtkSpinButton.upDown > .gtkEntry:active + .gtkBtn + .gtkBtn,
.gtkSpinButton.upDown > .gtkEntry:focus + .gtkBtn + .gtkBtn {
	border-top: solid 1px #c3c6c5;
}

/*### Custom Buttons ###*/
.countBubble,
.blueBubble,
.bubblesInside > span,
.bubblesInside > li span {
	display: inline-block;
	background: #4a90d9;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	line-height: 1.4rem;
	text-align: center;
	text-decoration: none;
	padding: .3rem;
	margin: .1rem .3rem;
	height: 1.4rem;
	width: 1.4rem;
}
.countBubble:link,
.blueBubble:link,
.countBubble:visited,
.blueBubble:visited { color: #fff; }
.countBubble.wide,
.blueBubble.wide,
.bubblesInside.wide > span,
.bubblesInside.wide > li span {
	border-radius: 1rem;
	width: auto;
}
.countBubble,
.blueBubble,
a.blueBubble,
a.blueBubble:hover,
a.blueBubble:focus,
.blueBubble > a { color: #fff; }
.countBubble.blue { background-color: #4a90d9; }
.countBubble.green { background-color: green; }
.countBubble.red { background-color: red; }

.btnDirUp, .btnDirUpSp {
	font-weight: 800;
	text-align: center;
	line-height: 1.6rem;
	height: 1.6rem;
	width: 1.6rem;
	transform: rotate(-90deg);
}
.btnDirUpSp:after, .btnDirUp span:after {
	content: '\2936';
	content: '\21B1';
}
.btnReload {
	/*width: 2rem;*/
}
.btnReloadSa:after, .btnReload span:after {	content: "↻"; }
.btnBackSa:after, .btnBack span:after {
	content: "‹";
	font-size: 2rem;
	font-weight: 400;
	line-height: 0.6rem;
}
.btnToMainSa:after, .btnToMain span:after {	content: "↶"; }
.btnPrevSa:after, .btnPrev span:after {	content: "⟨⟨"; }
.btnNextSa:after, .btnNext span:after {	content: "⟩⟩"; }
.btnsCombine { display: inline-block; vertical-align: top; }
.btnsCombine .btnNext { margin-left: 0px; }
.btnsCombine .btnPrev { margin-right: 0px; }
.btnNext.last {
	border-radius: 0px 0.3rem 0.3rem 0px;
	border-left: solid 0px #000;
	margin-left: 0px;
}
.btnPrev.frst {
	border-radius: 0.3rem 0px 0px 0.3rem;
	margin-right: 0px;
}
.btnDropDown {
	color: #000;
	line-height: 1rem;
	padding: .5rem .3rem .5rem .8rem;
	height: 1rem;
	width: 1rem;
}
.btnDropDown.art:before, .toggleBtn + .btnDropDown:before  { content: '\25B6'; }
.btnDropDown.adw:before, .toggleBtn:checked + .btnDropDown:before { content: '\25BC'; }
.btnDropDownSa:after, .btnDropDown span:after {	content: " ▾ "; }
.btnDropDwnSa:after, .btnDropDwn span:after {	content: " ▾ "; }
.btnDownloadSa, .btnDownload span {
	border-left: solid 2px #808080;
	border-right: solid 2px #808080;
	border-bottom: solid 2px #000;
	border-radius: 0px 0px 3px 3px;
	font-size: 4px;
}
.btnDownloadSa:after, .btnDownload span:after {
	content: "⇓";
	font-size: 16px;
	padding: 0px 2px;
}
.btnFindSa:after, .btnFind span:after {}
.btnFindSa:after, .btnFind span:after {
	content: "⌕"; 
	font-size: 160%;
	font-weight: 550;
	line-height: 0.75rem;
	transform: scaleX(-1);
}
.btnAnnotSa:after, .btnAnnot span:after {
	border: solid 2px #000;
	border-top: dotted 2px #000;
	border-radius: 0px 0px 3px 3px;
	content: "≡";
	color: #404040;
	padding: 0px 2px;
}
.btnPhoneSa:after, .btnPhone span:after {
	content: "☎";
	color: #606060;
	font-size: 1rem;
}
.btnLoginSa, .btnLogin {
	background-color: #5682b7;
	background-image: linear-gradient(180deg,#6f9ccd,#4776b1);
	color: #fff !important;
}
.btnLogin:focus, .btnLogin:hover,
.btnLoginSa:focus, .btnLoginSa:hover {
	background-color: #6f9ccd;
	background-image: initial !important;
}
.btnLogin, .btnLoginSa {
	font-size: 1.4rem;
	line-height: 1rem;
}
.btnLoginSa:after, .btnLogin span:after {
	content: "\27B2";
	font-size: 2rem;
	line-height: .8rem;
	margin-left: -.2rem;
}
.btnLogoutSa:after, .btnLogout span:after {	content: "\2622"; }
.btnPhoneSa.colGray:after, .btnPhone.colGray span:after {	color: #c3c6c5; }
.btnClock:after {
    border: solid 2px #808080;
    border-radius: 12px;
	content: "⌎";
	display: block;
    font-size: 1em;	
    margin: 0 auto;
    line-height: .8rem;
    letter-spacing: 0;
    text-indent: 0;
    text-shadow: initial;
    padding: 0;
    height: .92rem;
    width: .92rem;
    word-wrap: break-word;
    white-space: normal;
}
.btnCalend {
	background-color: #5682b7;
	background-image: linear-gradient(180deg,rgb(237,237,237),#c3c6c5);
	border-style: solid;
	border-color: #808080;
	border-width: 1px;
	border-radius: 4px;
	color: #000;
	display: inline-block;
	/*font-size: 14px;*/
	font-style: normal;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 0 1px #404040;
	/*padding: 5px;
	/*margin-left: 5px;
	margin-right: 8px;
	
	/*line-height: 18px;
	/*height: 24px;
	width: 24px;*/
	vertical-align: top;
}
.btnCalend:after {
    border: solid 1px #808080;
    border-top: solid 3px #000;
    content: "◻◻◻ ◻◼◼ ◼◼◻";
    display: block;
    font-size: 5px;
    line-height: 5px;
    letter-spacing: 1px;
    text-shadow: initial;
    margin: 0 auto;
    margin-top: -1px;
    padding-left: 2px;
    padding-bottom: 2px;
    word-wrap: break-word;
    white-space: normal;
    width: 1rem;
}
.btnApplySa:after, .btnApply span:after {
	border: solid 2px #000;
	border-top: solid 4px #808080;
	border-radius: 0 0;
	content: "√";
	padding: 0 2px;
}
.btnEditSa, .btnEdit {
	padding: .3rem .1rem;
	width: 1.6rem;
}
.btnEditSa:after, .btnEdit span:after {
	border: solid 1px #c3c6c5;
	border-bottom: solid 2px #808080;
	content: "E⇙";
	letter-spacing: -1px;
	text-decoration: underline;
}
.btnListSp::before, .btnList span::before {	content: "≔"; }
.btnParagSa::after, .btnParag span::after {	content: "¶"; }
.btnProjSa::after, .btnProj span::after {
	border: dashed 1px #808080;
	content: " ∡ ";
}
.btnViewSa::before, .btnView span::before {	content: " ∢ "; }
.btnTargetSp::before, .btnTarget span::before {
	content: "⌖";
	font-size: 2rem;
}
.btnHelp {
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1rem;
	text-align: left;
}
.btnHelp::before {
	content: "1 2";
	display: inline-block;
	font-size: .6rem;
	line-height: .6rem;
	text-align: center;
	margin: 0;
    word-wrap: break-word;
    white-space: normal;
    width: 10px;
    vertical-align: top;
}
.btnHelp span::after {
	content: "?";
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2rem;
}
.btnActionSa::after, .btnAction span::after {
	border: solid 2px #808080;
	border-radius: 0 0;
	content: "✓";
	color: #000;
	/*background-color: #c3c6c5;*/
	display: block;
	font-size: 2em;
	line-height: .5em;
	padding: 0;
}
.btnSettSa, .btnSett {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1rem;
}
.btnSettSa::after, .btnSett span::after {	content: "≡"; }
.btnNewWinSp:after, .btnNewWin span:after {	content: "⧉"; }
.btnCloseSp:after, .btnClose span:after {
	content: "⨯";
	font-weight: 700;
}
.btnTrashSp::after, .btnTrash span::after {	content: "⨯"; }
.btnTrashSp:hover, .btnTrash:hover {
	background-image: linear-gradient(180deg,#EB222C,#D10018) !important;
	color: #fff;
	font-weight: 800;
	text-shadow: 0px -1px 1px #000;
}
.btnRemove {
	background-image: linear-gradient(180deg,#EB222C,#D10018) !important;
	color: #fff !important;
	text-shadow: 0px -1px 1px #000;
}
.btnRemove:focus, .btnRemove:hover {
	background-image: linear-gradient(180deg,#EB222C,#EB222C) !important;
}
.btnImp span {
	border: solid 1px #000;
	border-right: double 3px #000;
	border-left: solid 0px #808080;
	padding: 0 .2rem;
}
.btnExp span {
	border: solid 1px #000;
	border-left: double 3px #000;
	border-right: solid 0px #808080;
	padding: 0 .2rem;
}
.btnImp span:after, .btnExp span:after {
	content: "⇾";/*"⇒";*/
}
.btnFullScr {
	line-height: .6em;
	text-align: center;
	height: 1em;
	width: inherit;
}
.btnFullScr::before,
.btnFullScr::after {
	display: block;
	font-size: .65em;
	font-weight: 800;
	letter-spacing: -3px;
	line-height: .5em;
	text-align: center;
	width: 1.5em;
}
.btnFullScr::before {	content: '↖↗';  }
.btnFullScr::after {	content: '↙↘';  }
.btnFullScr.full::before,
.btnFullScr.full::after {
	line-height: .9em;
	letter-spacing: 0;
	width: 1.2em;
}
.btnFullScr.full::before {	content: '↘↙';  }
.btnFullScr.full::after {	content: '↗↖';  }
/*### KeyboardButton @ gtkKeyBtn ###*/
.gtkKeyBtn, kbd {
	background-color: #fff;
	border: solid 1px #d4d4d2;
	border-radius: 5px;
	color: #000;
	display: inline-block;
	font-family: Lato;
	text-align: center;
	padding: .25rem 0 0 0;
	/* FIRST padding: .5rem 1rem;
	 * SECOND padding: .25rem 1rem .5rem 1rem;
	 * #ecedeb */
	width: 30px;
}
.gtkKeyBtn.spc, kbd.spc {
	width: 50px;
}
.gtkKeyBtn::after, kbd::after {
	background-color: #ecedeb;
	border-radius: 0 0 6px 6px;
	content: "";
	display: block;
	margin-top: .35rem;
	height: 4px;
	width: 100%;
}

 /* ENTRIES */

/*### Entry @ gtkEntry ###*/
.gtkEntry {
	background-color: #fff;
	border: solid 1px #c3c6c5;
	border-radius: 4px;
	font-size: 1.1rem;
	line-height: 1.3rem;
	height: 1.25rem;
	margin: 0 1px .375rem 1px;
	padding: .313rem .3rem .188rem .3rem;
	min-height: 1rem;
	width: var(--width-ents, 240px);
}
.gtkSpinButton > .gtkEntry {
	border-right: solid 0 #e3e3e3;
	border-radius: 3px 0 0 3px;
	float: none;
	font-size: 1rem;
	line-height: 1.2rem;
	padding: .3rem;
	margin-right: 0;
	height: 1.3rem;
	width: 2.1rem;
}
.gtkEntry.error,
.gtkListBox.error {
	border: solid 2px #da2f29;
	margin: -1px 0 .313rem 0;
	outline: none;
}
.gtkEntry:active,
.gtkEntry:focus {
	border: solid 2px #4a90d9;
	margin: -1px 0 .313rem 0;
	outline: none;
}
.gtkEntry.error + .errorBx,
.gtkSelect.error + .errorBx,
.gtkListBox.error + .errorBx {
	display: none;
}
.gtkSelect.error + .errorBx,
.gtkListBox.error + .errorBx {
	display: inline-block;
	margin-left: 12px;
	position: absolute;
	width: auto;
	z-index: 3;
}
.gtkSelect.error + .errorBx::before,
.gtkListBox.error + .errorBx::before {
	content: '\25C0';
	position: relative;
	top: -2px;
	left: -28px;
	color: #da2f29;
}
.gtkEntry.error:active + .errorBx,
.gtkEntry.error:focus + .errorBx,
.gtkEntry.error:hover + .errorBx {
	display: inline-block;
	position: relative;
	width: 50%;
	/*left: 35%;*/
	margin: .7rem;
	z-index: 3;
}
.gtkEntry.error + .errorBx::before {
	color: #da2f29;
	content: '\25B2';
	position: relative;
	top: -1.8rem;
	left: 10%;
	float: left;
}
p.errorBx {
	border-style: solid;
    border-color: #da2f29;
    border-width: 3px 8px;
	background-color: #fff;
	color: #404040;
	font-size: 1rem;
	line-height: 1.2rem;
	margin: 1rem 0;
}
textarea.gtkEntry {

}
/*### TextView @ gtkTextView ###*/
.gtkTextView {
	border: solid 1px #a7aba7;
	padding: .8rem;
}

 /* CONTAINERS */

/*### Box container @ gtkBox ###*/
/* gtkBox main class */
.gtkHeaderBar,
.gtkActionBar,
.gtkInfoBar,
.gtkStatusBar,
.gtkBox {
	display: flex;
	flex-wrap: nowrap;
	/*flex-flow: row nowrap;*/
	justify-content: flex-start;/* hor-align */
	/*align-items: center; 		/* ver-align */
}
.gtkBox.fullWidth { flex-wrap: nowrap; }
.gtkBox.fullWidth > * {	flex-basis: 100%; }
.gtkHeaderBar {	justify-content: space-between; }
.gtkInfoBar,
.gtkStatusBar {	justify-content: center; }
/* gtkBox vertical */
.gtkHeaderBar,
.gtkBox,
.gtkBox.hor,
.gtkBox.ltr { flex-direction: row; }
.gtkBox.horr,
.gtkBox.rtl { flex-direction: row-reverse; }
/* gtkBox horizontal */
.gtkBox.ver,
.gtkBox.ttb { flex-direction: column; }
/* gtkBox bottom To top */
.gtkBox.verr,
.gtkBox.btt { flex-direction: column-reverse; }

.gtkBox.itemsSta { align-items: flex-start; }
.gtkBox.itemsMid { align-items: center; }
.gtkBox.itemsEnd { align-items: flex-end; }
/* gtkHeaderBar html-flex Fix */
/* compatible old-HTML code with new-HTML code */
	.gtkHeaderBar > .putLeft,
	.gtkHeaderBar > .putRight { display: flex; }
	.putLeft + div,
	.gtkHeaderBar > .putRight + div {
		flex-basis: 50%;	/* pozwala zachować elementy kontenera z bazową szerokością, niezależnie od zawartości lub jej braku w elemencie */
		flex-grow: 2;		/* pozwala zachować stosunek rozmiarów dla elementów, jednak ich pozycja (wyśrodkowanie środkowego elelmentu) jest nie mozliwe - zależne od zawartości lewego i prawego elementu */
		order: 2;
	}
	.gtkHeaderBar > div:only-child { flex-basis: 100%; }
	.gtkHeaderBar > .putLeft {
		order: 1;
		text-align: left;
		justify-content: flex-start;
	}
	.gtkHeaderBar > .putRight {
		order: 3;
		text-align: right;
		justify-content: flex-end;
	}
	.putLeft,
	.putRight,
	.gtkHeaderBar > .putLeft,
	.gtkHeaderBar > .putRight {
		float: none;
	/* fixes overflowing content when window WIDTH too small */
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 25%; /* 0% */
		min-width: 0;
	/*	overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;*/
	}
	.putLeft, .putLeft > *,
	.putRight, .putRight > * {
		/*overflow: hidden;*/
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.putRight {	float: none; min-width: 0; order: 3; }

DIV.gtkHeaderBar > div > h1 { display: block; width: 100%;}
DIV.gtkHeaderBar > div > h1 + p { display: block; width: 100%;}

/*### Status Bar @ gtkStatusBar ###*/
.gtkStatusBar {
	background: #c3c6c5;
	font-size: 1.0rem;
	padding: .5rem;
	margin: 0;
	text-align: center;
	line-height: 1.8rem;
	height: 2rem;
}
.gtkStatusBar.compat,
.gtkStatusBar.compat + .gtkStatusBar {
	font-size: .8rem;
	line-height: 1rem;
	height: 1rem;
	padding: .25rem;
}
.gtkStatusBar p {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.8rem;
}
.gtkStatusBar.compat p {
	line-height: initial;
}
.gtkStatusBar:empty {
	/*display: none;*/
	margin-bottom: 0;
	padding: 0;
}

/*### Info Bar @ gtkInfoBar ###*/
.gtkInfoBar {
	background: #c3c6c5;
	border-bottom: 1px solid #a7aba7;
	font-size: 1.0rem;
	padding: .35rem .5rem;
	margin-top: 0;
	text-align: center;
	line-height: 1.8rem;
	height: auto;
	/* margin-bottom: 0.5rem;
	* width: 100%;*/
}
.innSpace .gtkInfoBar {/* #TODO */
	margin: -0.8rem;
	margin-bottom: .5rem;
}
/* TEXT MESSAGES */
.gtkInfoBar > .errorTx { color: #da2f29; }
.gtkInfoBar > .alertTx { color: #ffd800; }
.gtkInfoBar > .infoTx { color: #4776b1;/*0b3a6b;*/ }
.gtkInfoBar > .successTx { color: #247f24; }
.gtkInfoBar > .errorTx, .gtkInfoBar > .alertTx, .gtkInfoBar > .infoTx, .gtkInfoBar > .successTx {
	padding: 0 .6rem;
}
/* BOX MESSAGES */
.gtkInfoBar > .errorBx, .gtkInfoBar > .alertBx, .gtkInfoBar > .infoBx, .gtkInfoBar > .successBx {
	border: solid 2px #808080;
	border-left: solid 0.4rem #808080;
	border-right: solid 0.4rem #808080;
	background-color: #fff;
	color: #404040;
	padding: 0 .5rem;
}
.gtkInfoBar > .errorBx { border-color: #da2f29; }
.gtkInfoBar > .alertBx { border-color: #ffd800; }
.gtkInfoBar > .infoBx { border-radius: .3rem; border-color: #4776b1;/*0b3a6b;*/ }
.gtkInfoBar > .successBx {  border-radius: .3rem; border-color: #247f24; }
/* GTK MESSAGES */
.gtkMessage {
	color: #fff;
	display: block;
	flex-grow: 2;
	font-weight: 600;
	text-align: left;
	padding: .3rem .6rem;
}
.errorGtk, .alertGtk, .infoGtk, .successGtk {
	color: #fff;
	display: block;
	font-weight: 800;
	margin: -0.35rem -0.5rem;
}
.gtkInfoBar > .gtkMessage.error, .gtkInfoBar > .errorGtk { background-color: #da2f29; }
.gtkInfoBar > .gtkMessage.alert, .gtkInfoBar > .alertGtk { background-color: #ffd800; color: #000; font-weight: 400; }
.gtkInfoBar > .gtkMessage.info, .gtkInfoBar > .infoGtk { background-color: #4776b1;/*0b3a6b;*/ }
.gtkInfoBar > .gtkMessage.success, .gtkInfoBar > .successGtk { background-color: #247f24; }
.msgInfo, .msgSuccess, .msgAlert, .msgError, .errorTx, .alertTx, .infoTx, .successTx {	display: inline-block; }
.blk, .gtkInfoBar > .blk {
	display: block !important;
}

/*### Action Bar @ gtkActionBar ###*/
.gtkActionBar {
	background: #EDEDED;/*D9D9D7;*/
	border-top: 0 solid #a1a1a1;/*c7c7c4;*/
	border-bottom: 1px solid #a1a1a1;/*c2c2c0;*/
	font-size: 1.0rem;
	padding: .35rem .5rem;
	margin-top: 0;
	text-align: center;
	line-height: 1.8rem;
	height: auto;
	max-height: 1.85rem;
	/* margin-bottom: 0.5rem;
	* width: 100%;*/
}

/* BAR Commons */
.gtkActionBar:empty, .gtkInfoBar:empty {
	/*display: none;*/
	margin-bottom: 0;
	padding: 0;
	visibility: hidden;
}
.gtkLayout .gtkActionBar:empty,
.gtkLayout .gtkInfoBar:empty {
/*	display: none;*/
	height: 0;
}
.gtkActionBar p, .gtkInfoBar > p {
	color: #000;
	display: inline-block;
	font-size: 1rem;
	padding: 0 .5rem;
}

/*### Header Bar @ gtkHeaderBar ###*/
.gtkHeaderBar {
	background-color: var(--bg-gray-light);
	background-image: linear-gradient( 180deg, #f4f4f4 90%, #dbdbd9 100% );
	border-top: 1px solid #fff;
	border-bottom: 1px solid #91918c;
	border-radius: .9rem .9rem 0 0;
	text-align: center;		/* legacy */
	justify-content: center;/* poziomo */
	align-items: center;	/* pionowo */
	min-height: 2rem;
	margin: 0;
	padding: .4rem .5rem;
}
.gtkHeaderBar h2 {
	color: #000;
	font-size: 1.1rem;
	line-height: 1.2rem;
	margin: 0;
}
.gtkHeaderBar h2 + p
/* blueBubble problem
 ,
.gtkLabel + p,
.gtkLabel > p*/ {
	color: #808080;
	font-size: .7rem;
	line-height: .8rem;
	padding: 0;
}
.gtkHeaderBar h2 + p {	text-align: center; }
.gtkHeaderBar .putLeft {	max-width: 45%;}
.gtkHeaderBar .putLeft h2 {
	display: inline;
	line-height: 1.0rem;
}

/* Stack Switcher ( A ][ B ) @ gtkStackSwitch */
/* ### ### ### ### ### ### */
.gtkStackSw, .gtkStackSwitch {	display: inline-block; }
.gtkStackSw a, .gtkStackSwitch a {
	border-radius: 0px !important;
	vertical-align: top;
}
.gtkStackSw a:first-child, .gtkStackSw .gtkRadioBtn:first-child + label.gtkButton,
.gtkStackSwitch a:first-child, .gtkStackSwitch .gtkRadioBtn:first-child + label.gtkButton {
	border-radius: 4px 0px 0px 4px !important;
}
.gtkStackSw a:last-child,
.gtkStackSwitch a:last-child {
	border-radius: 0px 4px 4px 0px !important;
	border-right: solid 1px #B6B6B3;
}
.gtkStackSw + section, .gtkStackSwitch + section {
	background-color: white;
	min-height: 100px;
}

/*### List Box @ gtkListBox ###*/
/* ### ### ### ### ### ### ### */
.gtkListBox,  h3.gtkListBox, .gtkTreeView
{	/* tło, ramka, kolory bazowe, wyświetlanie, wysokość linii, czcionka */
	background-color: #fff;
	border: solid 1px #c3c6c5;
	/*border-bottom: solid 0px #c3c6c5;*/
	border-radius: 0;
	color: #606060;
	display: block;
	font-size: 1.1rem;
	line-height: 1.2rem;
	padding: 0;/*0.5rem 0.5rem;*/
	margin: 0 0;
}
.gtkListBox {	border-bottom: solid 1px #c3c6c5; }
.gtkListBox > h3 {/* nagłówek tekstowy ListBox'a */
	border: solid 0 #c3c6c5;
	border-bottom: solid 1px #c3c6c5;
	padding: .5rem .5rem;
	padding-top: 0;
	padding-bottom: 0;
}
ul.gtkListBox, .gtkListBox ul, .gtkComboBox ul.gtkListBox {
	border: solid 1px #c3c6c5;
}
.gtkListBox ul {	float: none; }
.gtkListBox > ul, .gtkListBox + ul, .gtkListBox.hasToggle ul,
.gtkComboBox .gtkListBox, .gtkNotebook .gtkListBox,
.gtkNotebook > ul + div > .gtkListBox,
.gtkTreeView ul { /* węzeł listy */
	border: solid 0 #c3c6c5;
	margin: 0;
	padding: 0;
	list-style-type: none; 
}

.gtkSideBar.grid {
	display: grid;
	grid-auto-flow: row;
	grid-template-areas: "sideBar contentBox";
	grid-template-rows:	auto;
	grid-template-columns: minmax(200px,20%) auto;
	align-content: stretch;
}
.gtkSideBar {
	display: flex;
	flex-direction: row;
}
.gtkSideBar.col30-70 {
	grid-template-columns: minmax(240px, 30%) auto;
}
.gtkSidrBar > .sideBar {
	grid-column: sideBar;
	grid-row: 1;
}
.gtkSidrBar > .sideBar + div,
.gtkSidrBar > .sideBar + section,
.gtkSidrBar > .sideBar + article {
	grid-column: contentBox;
	grid-row: 1;
}

.gtkListBox > h3, .gtkListBox > ul > li, .gtkListBox.hasToggle li,
.gtkComboBox ul.gtkListBox > li, .gtkListBox .sideBar > li,
.gtkSideBar > ul li, .gtkSideBar .sideBar > li, .gtkSideBar .sideBar > ul li {
	color: #606060;
	min-height: 2.2rem;
	line-height: 2.2rem;
	padding-left: 1rem;
	padding-right: 1rem;
}
.gtkListBox li > a,
.gtkListBox li > a:link,
.gtkListBox li > a:active,
.gtkListBox li > a:not(.active),
.gtkSideBar .sideBar li > a,
.gtkSideBar .sideBar li > a:link,
.gtkSideBar .sideBar li > a:active,
.gtkSideBar .sideBar li > a:not(.active) {
	color: #000;
	text-decoration: none;
}
.gtkListBox li > a,
.gtkListBox li > div:not(.gtkBox),
.gtkListBox li > label,
.gtkSideBar .sideBar li > a,
.gtkSideBar .sideBar li > div:not(.gtkBox),
.gtkSideBar .sideBar li > label {
	display: block;
	margin: 0rem -1rem;
	padding: .5rem 1rem;
	line-height: 1.2rem;
}
.gtkListBox li .active, .gtkListBox li .active:hover, .gtkListBox li .active:focus,
.gtkListBox li a.active, .gtkListBox li a.active:hover, .gtkListBox li a.active:focus,
.gtkSideBar li a.active, .gtkSideBar li a.active:hover, .gtkSideBar li a.active:focus,
.gtkSideBar .sideBar li a.active, .gtkSideBar .sideBar li a.active:hover, .gtkSideBar .sideBar li a.active:focus,
.gtkComboBox .gtkListBox li a:hover,
.gtkComboBox .gtkListBox li a:focus {
	background-color: #4a90d9;
	background-image: initial !important;
	color: #fff;
	/*margin-top: 1px;*/
}
.gtkListBox > ul li:hover, .gtkListBox > ul li:focus,
.gtkListBox + ul li:hover, .gtkListBox + ul li:focus,
ul.gtkListBox li:hover, ul.gtkListBox li:focus,
.gtkSideBar > ul li > a:hover, .gtkSideBar .sideBar > li >a :hover, .gtkSideBar .sideBar > ul li > a:hover,
.gtkTreeView ul li:hover, .gtkTreeView ul li:focus,
table.gtkTreeView tr:hover, table.gtkTreeView tr:focus,
.gtkNotebook .gtkListBox li:hover, .gtkNotebook .gtkListBox li:focus {
	background-color: #f5f5f5;
}

/*### TreeView @ gtkTreeView ###*/
.gtkTreeView {
	display: table;
	padding: 0;
	border: solid 1px #c3c6c5;
	border-collapse: collapse;
	width: 100%;
}
.gtkTreeView.tblLayFixed {	table-layout: fixed; }
.gtkTreeView > ul {
	border: solid 0 #c3c6c5;
	display: table;
	margin-bottom: .2rem;
	width: 100%;
}
/*.gtkListBox + ul > li,*/
.gtkTreeView ul > li
/*, .gtkNotebook .gtkListBox > li*/ {
	background-color: #fff;
	border-bottom: solid 0 #e3e3e3;
	font-size: 1.1rem;
	padding: .2em .8em;
}
.gtkTreeView ul li {
	display: table-row;
	border-bottom: solid 0 #e3e3e3;
	width: 100%;
}
.gtkTreeView > ul > li {
}
/*.gtkListBox + ul li a,*/
.gtkTreeView > ul li a {
	color: #000;
	display: inline-block;
	text-decoration: none;
	padding: .65em 0;
}
.gtkTreeView li > a,
table.gtkTreeView tr > th {
	border: solid 0 #c3c6c5;
	border-right: solid 1px #e3e3e3;
}
.gtkTreeView li > a:last-child,
table.gtkTreeView tr > th:last-child {
	border-right: solid 0 #c3c6c5;
}
.gtkTreeView li > div {	display: table-cell;}
.gtkTreeView li > div,
table.gtkTreeView tr > td {	padding: .2rem .4rem;}
.gtkTreeView > ul > li:first-child, table.gtkTreeView tr > th {	border-bottom: solid 1px #e3e3e3;}
.gtkTreeView li:first-child > a,
table.gtkTreeView tr:first-child > th > a {
	color: #808080;
	display: table-cell;
	font-weight: 800;
	text-decoration: none;
	padding: .5rem;
}
.gtkTreeView li > a:focus,.gtkTreeView li > a:hover {
	color: #404040;
}

/*### Stack SideBar @ gtkSideBar ###*/
.gtkSideBar { /* cały obszar */
	color: #000;
	background-color: #fff;
/*	border: solid 1px #c3c6c5;*/
	margin: 0;
	text-align: center;
}
.gtkSideBar > ul,
.gtkSideBar .sideBar,
.gtkSideBar .sideBar > ul {
	background-color: #fff;
	border: solid 0 #c3c6c5;
/*	border-right: solid 1px #e3e3e3;*/
	color: #808080;
/*	clear: none;
	display: inline-block;
	float: left;*/
	list-style-type: none; 
	margin: 0;
	padding: 0;
	min-width: 20%;
}
.gtkSideBar .sideBar > ul { min-width: 100%; }
.gtkSideBar .sideBar + div,
.gtkSideBar .sideBar + section,
.gtkSideBar .sideBar + article { width: 100%; }
/*### Frame @ gtkFrame ###*/
.gtkFrame {
	border: solid 1px #A7ABA7;
	padding: .5rem;
	margin: .2rem;
	text-align: left;
}
.gtkFrame > legend,
.gtkFrameLabel {
	font-weight: 700;
	padding: 0 .2rem;
	width: auto;
}
/*### Panes @ gtkPaned ###*/
.gtkPaned {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content: center; 
    align-items: stretch; 
	margin: 0px;
	height: 85%;
}
.gtkPaned.vertical {
	height: 80%;
}
.gtkPaned .gtkPane1, .gtkPaned .gtkPane2 {
	background-color: var(--bg-gray-light);
	border: solid 1px #b8b9b5;/*a7aba7;*/
	overflow: auto;
	width: 45%;
}
.gtkPaned.vertical .gtkPane1, .gtkPaned.vertical .gtkPane2 {
	width: 99%;
}
.gtkPaned .gtkPaneGrab {
	color: #808080;
	cursor: no-drop;
	font-size: 1rem;
	text-align: center;
	align-self: center;
}/*.horizontal* /
.gtkPaned .gtkPane1, .gtkPaned .gtkPane2 { flex-grow: 2; }*/
.gtkPaned.horizontal .gtkPaneGrab {	width: 16px; }
.gtkPaned.horizontal .gtkPaneGrab:after { content: '⋮';/* ⋮*/ }
.gtkPaned.horizontal .gtkPaneGrab.resizable {	cursor: col-resize; }
.gtkPaned.vertical { flex-direction: column; }
.gtkPaned.vertical .gtkPaneGrab.resizable {		cursor: row-resize; }
.gtkPaned.vertical .gtkPaneGrab {	line-height: .8rem; }
.gtkPaned.vertical .gtkPaneGrab:after {	content: '⋯';/*⋯*/ }

/*### Toggles ###*/
.hasToggle li > *:first-child {	padding-left: 1.4rem; }
.hasToggle li > .toggleBtn + label,
.hasToggle li > .toggleBtn + label + * { display: inline-block; }
.hasToggle li > .toggleBtn + label:before {
	content: '►';
	display: inline-block;
	font-size: .8rem;
	line-height: 1rem;
	margin-left: -0.6rem;
	width: 1.0rem;
}
ul li > .toggleBtn { display: none; }
ul li > .toggleBtn ~ ul {
	display: none;
	width: 100%;
}
.hasToggle li > .toggleBtn:checked + label:before {	content: '▼'; }
.hasToggle li > .toggleBtn:checked ~ ul { display: block; }
.dspGrid td {
	border: solid 1px #e3e3e3;/*#c3c6c5;*/
}

/*### NotebookBar @ gtkNotebook ###*/
.gtkNotebook {
	background-color: var(--bg-gray-light);
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100%;
}
.gtkNotebook.left,
.gtkNotebook.right {
	flex-direction: row;
}
.gtkNotebook > ul {
	background-color: #DADAD8;
	border: solid 1px #a7aba7;
	display: flex;
	flex-direction: row;
	font-size: 1rem;
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-left: 0;
	min-height: 2rem;
	text-align: center;
}
.gtkNotebook.left > ul,
.gtkNotebook.right > ul {
	flex-direction: column;
}
.gtkNotebook ul + div {
	background-color: #fff;
	border: solid 1px #a7aba7;
	border-top: solid 0px #a7aba7;
	flex-grow: 2;
	font-size: 1.2rem;
	text-align: center;
	padding: .8rem;
	/*min-height: 100px;*/
}
.gtkNotebook.left ul + div {
	border-top: solid 1px #a7aba7;
	border-left: solid 0px #a7aba7;
}
.gtkNotebook.right ul + div {
	border-top: solid 1px #a7aba7;
	border-right: solid 0px #a7aba7;
}
.gtkNotebook ul li {
	color: #808080;
	text-align: center;
}
.gtkNotebook > ul li a {
	border-bottom: solid .25rem transparent;
	color: #808080;
	display: block;
	font-weight: 600;
	text-decoration: none;
}
.gtkNotebook > ul li a {
	margin: 0 .2rem 0 .2rem;
	padding: .5rem 1rem .3rem 1rem;
}
.gtkNotebook > ul li a:hover,
.gtkNotebook > ul li a:focus {
	border-bottom: solid .25rem #a7aba7;
	color: #404040;
	text-decoration: none;
}
.gtkNotebook > ul li .active,
.gtkNotebook > ul li a.active:hover,
.gtkNotebook > ul li a.active:focus {
	background-color: initial !important;
	background-image: initial !important;
	border-bottom: solid .25rem #4a90d9;
	color: #000;
	font-weight: 800;
}
/* gtkNotebook @ Left */
.gtkNotebook.left > ul li a {
	border-right: solid .25rem transparent;
	border-bottom: solid 0 transparent;
	margin: .2rem 0 .2rem 0;
	padding: .5rem .8rem .5rem 1rem;
}
.gtkNotebook.left > ul li a:hover,
.gtkNotebook.left > ul li a:focus {
	border-right: solid .25rem #a7aba7;
	border-bottom: solid 0 transparent;
}
.gtkNotebook.left > ul li .active,
.gtkNotebook.left > ul li a.active:hover,
.gtkNotebook.left > ul li a.active:focus {
	border-bottom: solid 0 transparent;
	border-right: solid .25rem #4a90d9;
}
/* gtkNotebook @ Right */
.gtkNotebook.right > ul { order: 2; }
.gtkNotebook.right > ul li a {
	border-left: solid .25rem transparent;
	border-bottom: solid 0 transparent;
	margin: .2rem 0 .2rem 0;
	padding: .5rem 1rem .5rem .8rem;
}
.gtkNotebook.right > ul li a:hover,
.gtkNotebook.right > ul li a:focus {
	border-left: solid .25rem #a7aba7;
	border-bottom: solid 0 transparent;
}
.gtkNotebook.right > ul li .active,
.gtkNotebook.right > ul li a.active:hover,
.gtkNotebook.right > ul li a.active:focus {
	border-bottom: solid 0 transparent;
	border-left: solid .25rem #4a90d9;
}
.markActive[data-active="true"] {
	background-color: #4a90d9;
	background-image: initial !important;
	color: #fff;
}
/* gtkBorders */
.setBorder {	border: solid 1px #b4b5b1; }
.setBorderTop {	border-top: solid 1px #b4b5b1; }
.setBorderBtm {	border-bottom: solid 1px #b4b5b1; }
.setBorderLft {	border-left: solid 1px #b4b5b1; }
.setBorderRgt {	border-right: solid 1px #b4b5b1; }

 /* LAYOUTS */
 
/*### Layout base ###*/
.gtkLayout {
	--hdr-hgt: 2.8rem;
	display: grid;
	height: 100%;
}
.gtkLayout-basic {
	grid-template-areas:
		"headerBar"
		"contentBox"
	;
	grid-template-columns: 100%;
	grid-template-rows: var(--hdr-hgt) auto;
}
.gtkLayout-basic > .gtkHeaderBar,
.gtkLayout-normal > .gtkHeaderBar {
	grid-area: headerBar;
}
.gtkLayout-basic > .gtkBox,
.gtkLayout-normal > .gtkBox,
.gtkLayout-full > .gtkBox {	grid-area: contentBox;}
.gtkLayout.gtkWindow::after,
.gtkLayout > .gtkBox::after {	content: unset;}

/* ### Layout: NORMAL with InfoBar ### */
.gtkLayout-normal {
	grid-template-areas:
		"headerBar"
		"infoBar"
		"contentBox"
	;
	grid-template-columns: 100%;
	grid-template-rows:
		var(--hdr-hgt)
		minmax(0,2.5rem)
		auto;
}
.gtkLayout-normal > .gtkInfoBar {
	display: initial;
	grid-area: infoBar;
}
.gtkLayout-normal > .gtkInfoBar:empty + .gtkBox {	grid-row: 2 / -1;}
.gtkLayout-basic > .gtkSideBar {	grid-area: contentBox;}

/* ### Layout: didicated SIDE ### */
.gtkLayout-side {
	grid-template-areas:
		"sideHdr headerBar"
		"sideBox contentBox"
	;
	grid-template-columns: 30% 70%;
	grid-template-rows: var(--hdr-hgt) auto;
}
.gtkLayout-side > .gtkHeaderBar {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}
.gtkLayout-side > .gtkSideBar {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}
.gtkLayout-side > .gtkHeaderBar > .sideHeader {	grid-area: sideHdr;}
.gtkLayout-side > .gtkHeaderBar > .mainHeader {	grid-area: headerBar;}
.gtkLayout-side > .gtkHeaderBar > div:only-child {	grid-column: 1 / -1;}
.gtkLayout-side > .gtkSideBar > .sideBar {	grid-area: sideBox;}
.gtkLayout-side > .gtkSideBar > .sideBar + * {	grid-area: contentBox;}

/* ### Layout: ALL-in ### */
.gtkLayout-full {
	grid-template-areas:
		"headerBarSide headerBar"
		"actionBarSide actionBar"
		"infoBarSide infoBar"
		"sideBar contentBox"
		"statusBarSide statusBar"
	;
	grid-template-columns: 25% 75%;
	grid-template-rows:
		var(--hdr-hgt)
		auto
		auto
		auto
		1.5rem;
}
.gtkLayout-full > .gtkHeaderBar + .gtkHeaderBar,
.gtkLayout-full > .gtkActionBar + .gtkActionBar,
.gtkLayout-full > .gtkStatusBar + .gtkStatusBar {
	border-left: solid 1px #c5c6c3;
}
.gtkLayout-full > .gtkSideBar + .gtkBox {
	border-left: solid 1px #d6d6d5;
}
.gtkLayout-full > .gtkInfoBar + .gtkInfoBar {
	border-left: solid 1px #a7aba7;
}
.spread,
.layFull {	grid-column: 1 / -1; }

 /* WINDOWS */
.gtkVersion { color: red; }
/*### Window @ gtkWindow ###*/
.gtkWindow {
	align-content: flex-start;
	background-color: var(--bg-gray-light);/*c3c6c5;*/
	border: 1px solid #808080;
	border-radius: 10px;
	cursor: default;
	font-size: 1rem;
	margin: .5rem;
	padding: .5rem;
}
.gtkWindow:after, .gtkBox:after, .gtkSideBar:after, .gtkClr:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.gtkHeaderBar {
	background-color: var(--bg-gray-light);
	background-image: linear-gradient( 180deg, #f4f4f4 90%, #dbdbd9 100% );
	border-top: 1px solid #fff;
	border-bottom: 1px solid #91918c;
	border-radius: 0.9rem 0.9rem 0px 0px;
	/*box-shadow: 0px 1px 1px #808080;*/
	text-align: center;
	height: 2rem;
	margin: 0;
	padding: .4rem .5rem;
}
.gtkWindow > *:last-child {
	/*border-radius: 10px;* /
	margin-bottom: 0.8rem; #TODO*/
}
.fullScrn {
	border: 0px solid #808080;
	border-radius: 0;
	margin: 0;
	height: 100%;
}
.gDesktop .fullScrn {	height: 100%; }
/*.fullScrn > header {
box-shadow: 0px 1px 0px #808080;
}*/
.fullScrn > header, .fullScrn > form > header {	border-radius: 0; }


/*### Message Dialog @ gtkDialog ###*/
.gtkDialog::after { min-height: 0; }
.gtkDialog > footer {
	border: solid 0px black;
	margin-top: .5rem;
	margin-bottom: 0;
	padding: 0;
}
.gtkDialog > footer .gtkButton {
	border-left: none;
	border-right: none;
	font-size: 1.4rem;
	padding: 1rem 0;
	margin: 0;
	min-height: 1.2rem;
	width: 50%;
}
.gtkDialog > footer .gtkButton:first-child { border-radius: 0 0 0 8px; float: left; }
.gtkDialog > footer .gtkButton:last-child { border-radius: 0 0 8px 0; float: right; }

.gtkMessageDialog {
	margin: 0;
	text-align: center;
}
.gtkMessageDialog .gtkButton {
	display: block;
	margin: 0;
}

/*### Assistant Page ###*/
.gtkAssistantPage {
	background-color: #e6e6e6;
	border-color: #c4cec1;
	border-style: solid;
	display: block;
	min-width: 200px;
	max-width: 20%;
}
.gtkAssistantPage,
.gtkAssistantPage.left {
	border-width: 0 1px 0 0;
	border-radius: 0 0 0 10px;
	float: left;
}
.gtkAssistantPage.right {
	border-width: 0 0 0 1px;
	border-radius: 0 0 10px 0;
	float: right;
}

 /* CUSTOMS */

.gtkReveal {
	top: 20px;
	transition: 500ms;
	z-index: 2;
}
.gtkReveal.hide.fromLeft {
	left: unset;
	margin-left: unset;
}
.gtkReveal.hide.fromRight {
	right: unset;
	margin-right: unset;
}
			.gtkReveal.hide {	outline: solid 0px red;}
.gtkReveal.fromLeft {
	left:0;
	margin-left: var(--hide-pos);
}
.gtkReveal.fromRight { right: 0;}
			.gtkReveal:hover {	outline: solid 0px yellow;}
.gtkReveal.fromLeft:hover {
	left: unset;
	border-right: unset;
}
.gtkReveal.fromRight:hover {
	right: unset;
	border-left: unset;
}
.gtkReveal.pinHide.fromLeft {
	left: var(--hide-pos);
	margin-left: var(--hide-pos);
}
.gtkReveal.pinHide.fromRight {
	right: var(--hide-pos);
	margin-right: var(--hide-pos);
}
.gtkReveal.pinHide.fromLeft:hover {
	left: var(--open-pos);
	border-right: solid 1px #808080;
}
.gtkReveal.pinHide.fromRight:hover {
	right: var(--open-pos);
	border-left: solid 1px #808080;
}
.gtkReveal::before,
.gtkReveal.pinHide::before {
	position: absolute;
	top: 0;
	border-left: dashed 1px #808080;
	border-right: dashed 1px var(--bg-gray-dark);
	color: black;
	content: '';
	display: block;
	height: 100%;
	width: 0;
}
.gtkReveal.pinOpen::before { display: none; }
.gtkReveal.fromLeft::before {
	right: 0;
	margin-right: 4px;
}
.gtkReveal.fromRight::before {
	left: 0;
	margin-left: 4px;
}
.gtkBox.gtkReveal {	width: var(--width) !important; }
.gtkBox.gtkReveal.pinHide { width: var(--hide-wid); }
.gtkReveal::before {	display: none;}
.gtkReveal.pinHide:hover::before { display: none; }
.gtkReveal.pinHide.rgtBoxWidth100 + .gtkBox { width: 95% !important; }
@media screen and (max-width: 1000px){
	.gtkBox.gtkReveal { width: var(--hide-wid) !important; }
	.gtkBox.gtkReveal.hide { width: var(--hide-wid); }
	.gtkReveal.hide.fromLeft {
		left: var(--hide-pos);
		margin-left: var(--hide-pos);
	}
	.gtkReveal.hide.fromRight {
		right: var(--hide-pos);
		margin-right: var(--hide-pos);
	}
	.gtkReveal.fromLeft:hover {
		left: var(--open-pos);
		border-right: solid 1px #808080;
	}
	.gtkReveal.fromRight:hover {
		right: var(--open-pos);
		border-left: solid 1px #808080;
	}
	.gtkReveal::before {
		position: absolute;
		top: 0;
		border-left: dashed 1px #808080;
		border-right: dashed 1px var(--bg-gray-dark);
		color: black;
		content: '';
		display: block;
		height: 100%;
		width: 0;
	}
	.gtkReveal:hover::before { display: none; }
	.gtkReveal.rgtBoxWidth100 + .gtkBox { width: 95% !important; }
}
.sticky {	position: sticky; }
.stickyT08 { top: .8rem; }
}
.gtkBox > * {
	flex-grow: 0;
}

/* ### statusBar 4 WOM-Pnl ### */
#gBody { height: 92.4%; }
.stickyFooter #gBody { margin-bottom: 2.4%; }
.stickyFooter .gtkStatusBar {
	position: fixed;
	bottom: 0px;
	background-color: #c3c6c5;
	font-size: 1em;
	text-align: center;
	height: auto;
	min-height: 24px;
	height: 3%;/*4em;*/
	width: calc(100% - 0.5rem);/*99.3%;*/
}
 
/*############*//*### UTILITY ###*//*############*/

/* disabled elements */
.disbld, .disabled, *:disabled {
	color: #8D9090 !important;
	user-select: none;
}
input.disbld, input.disabled, input:disabled + label { cursor: not-allowed; }
.gtkComboBox .disbld:hover, .gtkListBox .disbld:hover {	background-color: initial !important; }
.disbld > span { border-color: #808080; }
/*, .gtkLabel.disbld, .gtkLabelLine.disbld*/
.gtkBtn.disbld, .gtkButton.disbld, .gtkEntry.disbld, .gtkSpinButton.disbld {
	border: solid 1px #B6B6B3;
	background-color: #f1f1f1;
	background-image: initial;
}
/* displaying */
[data-section], [data-zone] { display: none; }
.hidden, .noDsp { display: none !important; }
.doDsp { display: initial !important; }
.inhDsp { display: inherit !important; }
.dspSect { display: block; }
.dspInl { display: inline !important; }
.dspInb { display: inline-block !important; }

.autoIncrement { counter-reset: lis; }
.autoIncrement p:before {
	counter-increment: lis;
	content: counter(lis) ". ";
	color: #000;
	display: inline-block;
	margin-right: .5rem;
}

/*### Margins & Paddings ###*/
.innSpace	{ padding: 0.8rem !important;/*10px;*/ }
.iSpcHor	{ padding: 0px 0.5rem !important; }
.iSpcHorL	{ padding: 0px 0px 0px 0.5rem !important; }
.iSpcHorR	{ padding: 0px 0.5rem 0px 0px !important; }
.iSpcVer	{ padding: 0.5rem 0px !important; }
.outSpace	{ margin: 0.8rem !important; }
.oSpcHor	{ margin: 0px 0.5rem !important; }
.oSpcHorL	{ margin: 0px 0px 0px 0.5rem !important; }
.oSpcHorR	{ margin: 0px 0.5rem 0px 0px !important; }
.oSpcVer	{ margin: 0.5rem 0px !important; }
.NOinnSpace	{ padding: 0px !important; }
.NOoutSpace	{ margin: 0px !important; }
.mrgLd { margin-left: .5rem; }
.mrgRd { margin-right: .5rem; }
.mrgLz {	margin-left: 0;}
.mrgRz {	margin-right: 0;}
.mrgLRz {
	margin-left: 0;
	margin-right: 0;
}
.mrgTBz {
	margin-top: 0;
	margin-bottom: 0;
}

/*### Text positions & Elemenets placement ###*/
.putLeft	{ float: left; }
.putRight	{ float: right !important; /* IMP bo MadForms.css się wpieprza*/ }
.center { margin: 0px auto; }
.txtLeft	{ text-align: left; }
.txtLeftChilds * { text-align: left; }
.txtCenter	{ text-align: center; }
.txtCenterChilds * { text-align: center; }
.txtRight	{ text-align: right; }
.txtRightChilds * { text-align: right; }
/* horizontal alignment */
.itmBeg { justify-content: flex-start; }
.itmCnt { justify-content: center; }
.itmEnd { justify-content: flex-end; }
/* vertical alignment */
.itmTop	{ align-items: center; }
.itmMid	{ align-items: center; }
.itmBtm	{ align-items: center; }
/* legacy horizontal alignment */
.putLeft { float: left; }
.putRight { float: right; }
.putMiddle { display: inline-block; }
/* legacy vertical alignment - block-elements */
.vTop { vertical-align: top; }
.vMid { vertical-align: middle; }
.vBtm { vertical-align: bottom; }

.ha { height: auto; }
.wa { width: auto; }
.h100 { height: 100%; }
.w25 { width: 25%; }
.w50 { width: 50%; }
.w75 { width: 75%; }
.w100 { width: 100%; }
.w05r {	width: 5rem; }
.w10r {	width: 10rem; }
.w15r {	width: 15rem; }
.w20r {	width: 20rem; }
.w25r {	width: 25rem; }

.defaultTabInfo { font-style: italic; }
.noDsp ~ .defaultTabInfoNOT { display: block; }
.noCell {	height: 0;}
.dbgOutRed { outline: dashed 1px red; }

/*
 * CHANGE LOG 2.7.16
 *  cssMod# fix for gtkComboBox
 *  cssMod# fix for gtkBtn btn*
 *  cssAdd# .gtkToggleButton
 *  cssAdd# .gtkSpinButton upDown
 * CHANGE LOG 2.7.15
 *  cssAdd# some new buttons .btn*
 *  cssAdd# .gtkKeyBtn
 *  cssMod# fix for .gtkTreeView
 * CHANGE LOG 2.7.14
 *  fileAdd# gtkDecorator-Basic
 *  cssMod# moved rules @gtkDecorator -> @gtkDecorator-Basic
 *  fileAdd# gtkDecorator-Utility
 *  cssMod# moved rules @gtkDecorator -> @gtkDecorator-Utility
 *  fileAdd# gtkDecorator-Layouts
 *  cssAdd# .gtkLayout + layouts
 *  cssMod# cleanup of minor Helper Selectors
 * CHANGE LOG 2.7.13
 *  cssMod# lots of PRE-GRID tweaks
 *  cssMod# lots of PRE-FLEX tweaks
 * CHANGE LOG 2.7.12
 *  cssMod# lots of minor tweaks
 *  cssAdd# .gDesktop + dependence pack
 * CHANGE LOG 2.7.01
 *  cssMod# split CSS file into Section-Files
 * CHANGE LOG 2.6.16
 *	cssAdd# .gtkAssistantPage
 *  cssAdd# .gtkTextView
 *  cssMod# .gtkEntry .error: new error messages containers
 * CHANGE LOG 2.6.15
 *  cssAdd# .toggleBtn: ability to toggle Sections with the Button (needs JS)
 *  cssAdd# .gtkLabel .wDesc: added text line with description inside gtkLabel
 *  cssMod# .gtkComboBox .pullUp: takes CB menu higher (puts Submit button where CB click starts)
 *  cssAdd# .gtkNbTabs
 *  cssAdd# .gtkTable + .gtkSort
 * CHANGE LOG 2.6.14
 *  cssAdd# html,body { width, height }
 *  cssMod# .gtkBox: flex
 *  cssAdd# new buttons added to .gtkBtn
 *	cssMod# .gtkListBox: padItem
 *  cssAdd# .gtkScroll: add scrollable, scrollX, scrollY
 *  cssAdd# .gtkDialog
 * CHANGE LOG 2.6.11
 *  cssAdd# .gtkImage: add clas for image management in LI's
 * CHANGE LOG 2.6.10
 *	cssMod# .btn<ICON>: add classes .btn<ICON>Sp:after in addition to .btn<ICON> span:after
 *	cssAdd# .gtkBox: hor, ver classes to gtkBox display layout
 * 	cssFix# .gtkListBox: active listItem A & LABEL, +futureFixes
 * 	cssRem# .gtkStackSw: gtkBtn in favor of gtkButton
 * 	cssAdd# .gtkMessages: switch <message>Gtk in favor of gtkMessage <message>
 * CHANGE LOG 2.6.5
 * 	cssFix# .gtkSeparator 3rem -> 0.3rem
 *	cssAdd# .sideBar
 *	cssAdd# .center; .gtkClr
 * */