:root {
	--step: 20px;
	--fontFamily: "Montserrat", sans-serif;
	--fontWeight: 400;
	--fontWeightBold: 700;
	--fontSize: 16px;
	--fontSizeSmall: calc(var(--fontSize) * .75);
	--headerHeight: calc(var(--step) * 2.5);
	
	--color1: blue;
	--color2: green;

	--colorWhite: #ffffff;
	--colorBlack: #000000;
	--colorError: red;

	/*від світлого до темного*/
	--colorSilver1: #F8F8F8;
	--colorSilver2: #F5F5F5;/*WhiteSmoke*/
	--colorSilver3: #F0F0F0;
	--colorSilver4: #E8E8E8;
	--colorSilver5: #E0E0E0;
	--colorSilver6: #DCDCDC;/*Gainsboro*/
	--colorSilver7: #D8D8D8;
	--colorSilver8: #D3D3D3;/*LightGray*/
	--colorSilver9: #D0D0D0;
	--colorSilver10: #C8C8C8;
	--colorSilver11: #C0C0C0;/*Silver*/
	--colorSilver12: #BEBEBE;/*Gray*/
	--colorSilver13: #B8B8B8;
	--colorSilver14: #B0B0B0;
	--colorSilver15: #A9A9A9;/*DarkGray*/
	--colorSilver16: #A8A8A8;
	--colorSilver17: #A0A0A0;
	--colorSilver18: #989898;
	--colorSilver19: #909090;
	--colorSilver20: #888888;
	--colorSilver21: #808080;/*Gray*/
	--colorSilver22: #787878;
	--colorSilver23: #707070;
	--colorSilver24: #696969;
	--colorSilver25: #686868;
	--colorSilver26: #606060;
	--colorSilver27: #585858;
	--colorSilver28: #505050;
	--colorSilver29: #484848;
	--colorSilver30: #404040;
	--colorSilver31: #383838;
	--colorSilver32: #303030;
	--colorSilver33: #282828;
	--colorSilver34: #202020;
	--colorSilver35: #181818;
	--colorSilver36: #101010;
	--colorSilver37: #080808;
}

body {
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	font-weight: var(--fontWeight);
	background-color: var(--colorWhite);
	color:var(--colorBlack);
	line-height:1.5;
	overflow-wrap: break-word;
}
html.dbg.ug1:before {
	content: "!start";
	font-size:10px;
	font-family: var(--fontFamily);
	color:#a9a9a9;
	transform: rotate(90deg);
	transform-origin: top right;
	position:fixed;
	top:55px;
	right:0;
	z-index:5;
	display:block;
	width:50px;
}
/* .work*/
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(246, 246, 246, 0.5); /* #f6f6f6 з 50% прозорістю */
	z-index: 3;
	display: none; /* Приховано за замовчуванням */
}

/* Контейнер work через псевдоелемент body::after */
body::after {
	content: "";
	position: absolute;
	width: calc(var(--step)*2);
	height: calc(var(--step)*2);
	top: calc(50vh - var(--step));
	left: calc(50vw - var(--step));
	z-index: 4;
	border: 20px solid var(--colorSilver15);
	border-left-color: var(--color1);
	border-right-color: var(--color2);
	background-color: var(--colorWhite);
	border-radius: 100%;
	display:none;
/* Додаємо перехід для плавного завершення */
    transition: transform 1s ease-out;
}

/* Анімація та overlay активуються при класі work на html */
html.work body::after {
	animation: work 0.5s infinite linear;
	transition: none; /* Вимикаємо перехід під час анімації */
}

html.work body::before,
html.work body::after{
	display: block;
}
@keyframes work {
	100% {
		transform: rotate(360deg);
	}
}
/*\ .work*/
nav.tm {
	height:calc(var(--step) * 2);
}
nav.tm ul {
	list-style: none outside;
	padding:0;
	margin:0;
}
nav.tm ul ul {
	margin-top: calc(var(--step) / 2);
	margin-bottom: calc(var(--step) / 2);
	margin-left:calc(var(--step) / 2);
}
nav.tm li {
	position:relative;
	min-height: calc(var(--step) * 2);
}
nav.tm li:last-child{
	border:none;
}
nav.tm > div {
	padding: var(--step);
	position: fixed;
	top: var(--headerHeight);
	left: 0;
	z-index: 2;
	width: 80%;
	height: calc(100vh - var(--headerHeight));
	max-height: calc(100vh - var(--headerHeight));
	overflow: auto;
	transform: translateX(-125%);
	transition: .35s all cubic-bezier(.65,.05,.36,1);
	background-color:var(--colorWhite);
}

nav.tm input[type="checkbox"]:checked ~ div {
	transform: translateX(0);
}	
.container {
	margin:0 calc(var(--step) / 2);
	overflow:hidden;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6 {
	margin-top: var(--step);
	display:block;
}
.col1 > *:after{
	content:"";
	display:table;
	clear:both;
}
a {
	color: var(--color1);
}
.bold {
	font-weight:bold;
}
ul,
p {
	margin:var(--step) 0 0;
}
.breadcrumbs {
	font-size:var(--fontSizeSmall);
	list-style: none outside;
	padding:0;
}
.breadcrumbs li {
	display: inline-block;
}
.breadcrumbs > li + li:before {
	content: "/";
	padding: 0 calc(var(--step) / 4);
	color: var(--colorSilver15);
}	
#to-top{
	position: fixed;
	right: 0;
	bottom: calc(var(--step) * 2);
	padding: calc(var(--step) / 2);
	transform: translateX(100%);
	transition: transform 0.5s;
}
#to-top.show{
	transform: unset;
}
svg {
	display: inline-block;
	width: calc(var(--step) * 2);
	height: calc(var(--step) * 2);
	fill: var(--colorBlack);
}
.line {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.pagination {
	text-align: center;
}
.pagination li {
	display: none;
	vertical-align:top;
}
.pagination li[class] {
	display: inline-block;
}
.pagination a,
.pagination span {
	display: block;
	line-height:1;
	width:100%;
	height:100%;
}
.pagination a {
	text-decoration: none;
}
header,
header .line {
	height:var(--headerHeight);
}
header{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	background-color:var(--colorWhite);
}
.wrapper{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	padding-top: var(--headerHeight);
}

label {
	cursor:pointer;
}
.debug {
	position:fixed;
	bottom:0;
	left:0;
	background-color: var(--color1);
	width:var(--step);
	height:var(--step);
	overflow:hidden;
}
td,th{
	padding: calc(var(--step) / 4);
}
tr{
	border-top:1px solid var(--colorSilver3);
}
table{
	margin-top:var(--step);
}
.tabs > label,
.accordion > label {
	padding:calc(var(--step) / 4);
	margin-right:calc(var(--step) / 4);
	border:1px solid var(--colorSilver3);
	background-color:var(--colorSilver2);
	margin-bottom:calc(var(--step) / 4);
}

.tabs{
	margin-top:var(--step);
	display:flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: center;
}	
ul.language-panel {
	list-style: none outside;
	padding: 0;
	margin-top:0;
}
ul.language-panel li {
	display:inline-block;
	margin-left:calc(var(--step) / 2);
}
form .block.error {
	border:1px solid var(--colorError);
}
form .block.error .message {
	display:block;
	color: var(--colorError);
}
.hidden{
	display:none;
}
img {
	margin-top:var(--step);
}
.siteName {
	font-weight:bold;
}
.col1 > *,
.col2 > *,
.col3 > *,
.col4 > *,
.col5 > *,
.col6 > * {
	clear:both;
	margin-top: var(--step);
}

.song {
	margin-bottom: calc(var(--step) * 2);
	line-height:1.2;
	max-height: 50vh;
	overflow-y: auto;
	border: 1px solid var(--colorSilver6);
	padding: calc(var(--step) / 2);
	margin-top: var(--step);
}
.song br{
	display:inline-block;
	height:0;
}
.song > div{
	margin-top: calc(var(--step) / 2);
	position:relative;
}
.song > div:first-child{
	margin-top:0;
}
.song b{
	font-weight: normal;
	display: inline-block;
	margin-left: calc(var(--step) / 4);
}
.song > div > b:first-child{
	margin-left:0;
}
.song i{
	position:absolute;
	top: calc(var(--step) * -1.5);
	font-style: normal;
}
.song b{
	padding: 4px;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	border-width: 1px;
	border-color: transparent;
	border-style:solid;
}
.song b.a {
	border-color: var(--colorSilver5);
	background-color: var(--colorSilver1);
}
.song i.a{
	padding-block: 4px;
	color:#fff;
	background-color:blue;
}
.song i:before{
	content:"[";
}.song i:after{
	content:"]";
}
.song.noAccord i{
	display:none;
	top:0;
}
.song.big{
	font-size:32px;
}
textarea#markup{
	height: 50px;
	position: fixed;
	top: 0;
	left: 200px;
	width: 50%;
	z-index: 3;
}
.dN,
.dN.col2,
.dN.col3,
.dN.col4,
.dN.col5,
.dN.col6{
	display:none;
}

@media only screen and (min-width: 375px) {

}
@media only screen and (min-width: 576px) {
.col2,
.col3,
.col4,
.col5,
.col6 {
	display: flex;
	flex-wrap: wrap;
	margin-left:-calc(var(--step) / 2);
	margin-right: -calc(var(--step) / 2);
	justify-content:center;
}

.col2 > *,
.col3 > *,
.col4 > *,
.col5 > *,
.col6 > * {
	width: calc(50% - var(--step));
	margin:var(--step) calc(var(--step) / 2) 0;
}
.col2.overflowlay > *,
.col3.overflowlay > *,
.col4.overflowlay > *,
.col5.overflowlay > *,
.col6.overflowlay > * {
    overflow: overlay;
}
}
@media only screen and (min-width: 768px) {
ul.pagination li {
	display: inline-block;
}
footer .line{
	display:flex;
}
footer .accordion{
	display:flex;
	max-width:50vw;
	margin:0;
}

footer .accordion > div{
	white-space:nowrap;
}

.col3 > *,
.col4 > *,
.col5 > *,
.col6 > * {
	width: calc(100%/3 - var(--step));
}	
}
@media only screen and (min-width: 992px) {
nav.tm > div {
	transform: none;
	position: static;
	height: auto;
	max-height: unset;
	padding: 0;
	overflow: unset;
	width: auto;
	display: flex;
	
}
header nav.tm > div{
	background-color:transparent;
}
nav.tm > label{
	display:none;
}
nav.tm > div > ul {
	display: flex;
}
nav.tm > div > ul > li {
	margin: 0 calc(var(--step) / 4);
	padding: 0 0 0 calc(var(--step) / 4);
	width: auto;
	height: calc(var(--step) * 2);
	white-space: nowrap;
	border: none;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--colorBlack);
}
.line .siteName {
	order: -1;
}	
.col4 > *,
.col5 > *,
.col6 > * {
	width: calc(25% - var(--step));
}	
}
@media only screen and (min-width: 1200px) {
.debug {
	display:block;
	opacity:0.3;
}
.debug:hover {
	width: unset;
	height: unset;
	background-color: var(--colorWhite);
	opacity:1;
	overflow:auto;
	max-width:80vw;
	max-height:80vh;
}
.container {
	max-width: calc([fileNameWExt] - var(--step) * 2);
	margin: 0 auto;
}
.col5 > *{
	width: calc(20% - var(--step));
}
.col6 > * {
	width: calc(100%/6 - var(--step));
}		
}
@media only screen and (min-width: 1440px) {

}