:root {
	--tabX-height : 	40px;
}
	
.tabX {
	/* overflow: hidden;
	height: var(--tabX-height); */
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	/* justify-content : center; */
}

.tabXbutton {
	display: none; /* js */ 
	/* height: 100%; */
	font-weight : var(--font-weight);
	min-width: 164px;
	max-width: 25%;
	overflow: clip;
	text-overflow: ellipsis;
	background-color: var(--szary);
	/* float: left; */
	/* outline: none; */
	cursor: pointer;
	padding: 8px 16px;
	margin : 0px
	transition: 0.3s;
	border: 1px solid var(--szary2);
	text-transform : uppercase;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	white-space : nowrap;
	flex : 1;
}
.tabXbutton:last-child,
.tabXbutton:last-child:hover { 
	/* width: 100%; */
	cursor : initial;
	min-width : initial;
	max-width: initial;
	border: none;
	background : none;
	border-bottom : 1px solid var(--szary2);
	color : var(--niebieski);
	/* margin: auto 0px; */
	flex : auto;
	font-size: var(--font-small);
	}
.tabXfill {
	width : 100%;
	height: var(--tabX-height);
	border-bottom : 1px dotted var(--niebieski);
	padding: 8px 16px;
	margin-left : 16px;
	text-align : right;
	color : var(--niebieski);
	font-size : var(--font-small);
	white-space : nowrap;
	overflow: clip;
	text-overflow: ellipsis;
}

.tabXbutton:hover {
  background-color: #ddd;
}


.tabXbutton.tabXactive {
	background	: white;
	border		: 1px dotted  var(--niebieski);
	border-bottom 	: none;
	font-weight 	: var(--font-bold);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	flex-basis	: auto;
}

.tabXcontent {
	width		: 100%;
	display		: block; /* none dodamy w JS, jeśli zadziała! none;*/
	padding		: 6px 12px;
	border 		: none; /* border dodamy w jS */
	animation	: fadeEffect 0.5s;
} 


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

.tabXhint, .tabXhint A {
	display		: none; /* wyłączymy  w JS, jeśli zadziała;*/
	font-size	: var(--font-small);
	color		: var(--niebieski);
}
.tabXclose {
	display		: none; /* wyłączymy  w JS, jeśli zadziała;*/
	float		: right;
	cursor 		: pointer;
}

.tabXcontent > div.fle > div {  
	flex-basis	: 304px;
	margin		: 16px;
	padding		: 16px;
}

@media (max-width: 850px) {
	.tabXbutton {
		max-width: initial;
		min-width: initial;
		flex : initial;
		padding: 6px 12px;
	}
	.tabXcontent {
		padding: 4px 8px;
	}
	
	.tabXcontent > div.fle > div {  
	padding: 0px;
	}
}


.tabXcontent {
	display: none;
	border: 1px solid #ccc;
	border-top: none;
}

.tabXbutton,
.tabXclose,
.tabXhint,
 .tabXhint A {
	display: initial;
}

.more {
	display: none;
}

.krotkie {
	display: initial;
	cursor: pointer;
}