/* Елементи оформлення */
/* Посилання */
/* Main */
.__link{
	--gap: 5px;
	--font-size: 1em;
	--icon-size: 1.3em;
	--icon-size-text: 1.15em;
	--icon-width: auto;
	--icon-color: inherit;

	cursor: pointer;
	text-decoration: none;
	font-size: var(--font-size);
}
/* Icon */
.__link.__i{
	display: flex;
	align-items: center;
	gap: var(--gap);
}
.__link.__i > i{
	display: flex;
	width: var(--icon-width);
	justify-content: center;
	font-size: var(--icon-size);
	color: var(--icon-color);
}
.__link.__i.__t > i{
	font-size: var(--icon-size-text);
}
/* Light */
.__link.__l{
	color: #fff;
}
.__link.__l:not(.__i):not(.__wu){
	text-decoration: underline;
}
.__link.__l.__i:not(.__wu) > span{
	text-decoration: underline;
}
.__link.__l:hover{
	color: var(--bgrey-140);
}
.__link.__l.__t:not(.__i):hover{
	text-decoration: none;
}
.__link.__l.__t.__i:hover > span{
	text-decoration: none;
}
/* Dark */
.__link.__d{
	color: var(--blue);
}
.__link.__d:hover{
	color: var(--red);
}
.__link.__d.__t:not(.__i):hover{
	text-decoration: underline;
}



/* Таблиці */
/* Type 0 */
table.__table.__type-0{
	border-collapse: collapse;
	border-radius: var(--r-1);
	overflow: hidden;
}

table.__table.__type-0 > thead th,
table.__table.__type-0 > tbody td{
	padding: 5px 10px;
}

table.__table.__type-0 > thead th{
	background-color: var(--green);
	text-align: center;
	font-weight: 500;
	color: #fff;
}

table.__table.__type-0 > thead > tr:last-child > th{
	border-bottom: 2px solid var(--bgrey-140);
}

table.__table.__type-0 > tbody > tr:not(:last-child) > td{
	border-bottom: 1px solid var(--bgrey-140);
}

table.__table.__type-0 > tbody > tr:hover td{
	background-color: var(--green-10);
}

table.__table.__type-0 > tbody td{
	background-color: var(--bgrey-160);
	text-align: center;
	font-weight: 400;
	color: var(--bgrey-20);
}

/* Type 1 */
.__table.__type-1{
	display: flex;
	flex-direction: column;
}

.__table.__type-1 > div{
	display: flex;
	padding: 10px 0;
	align-items: flex-start;
	gap: 30px;
}

.__table.__type-1 > div:not(:last-child){
	border-bottom: 1px solid var(--bgrey-140);
}

.__table.__type-1 > div > div{
	text-align: left;
	color: var(--bgrey-80);
}

.__table.__type-1 > div > span{
	margin-left: auto;
	text-align: right;
	color: var(--bgrey-20);
}



/* Кнопки */
.__btn{
	display: flex;
	padding: 0.15em 0.45em; /* For font-size = 14px, padding = 2px 6px */
	background: transparent;
	border: 1px solid white;
	border-radius: var(--r-0);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: inherit;
	font-family: 'Nunito';
	font-weight: 400;
	color: #fff;
}
.__btn:hover{
	background-color: var(--green);
}

/* Dark */
.__btn.__dark{
	border: 1px solid var(--bgrey-20);
	color: var(--bgrey-20);
}
.__btn.__dark:hover{
	border: 1px solid var(--green);
	color: #fff;
}

/* Inverted */
.__btn.__inv{
	border: 0.15em solid var(--green);
	color: var(--bgrey-20);
}
.__btn.__inv:hover{
	background-color: var(--green-10);
}



/* Тексти */
.__text{
	display: block;
}

.__text h2{
	margin: 0;
	line-height: normal;
	font-size: 2em;
}

.__text h3{
	margin: 0;
	line-height: normal;
	font-size: 1.6em;
}

.__text p{
	margin: 0;
	text-align: justify;
}

.__text h2:not(:first-child){ margin-top: 1em; }
.__text h2:not(:last-child){ margin-bottom: 0.33em; }

.__text h3:not(:first-child){ margin-top: 0.75em; }
.__text h3:not(:last-child){ margin-bottom: 0.25em; }

.__text div:not(:last-child),
.__text p:not(:last-child),
.__text ol:not(:last-child),
.__text ul:not(:last-child),
.__text .list:not(:last-child){
	margin-bottom: 0.5em;
}

.__text b{
	font-weight: 700;
}

.__text strong{
	font-weight: 700;
}

.__text i{
	font-style: italic;
}

.__text em{
	font-style: italic;
}

.__text .list{
	margin-left: 1.5em;
}

.__text ul{
	margin: 0;
	padding-left: 2em;
}
.__text ul > li{

}

.__text ol{
	margin: 0;
	padding-left: 2em;
}
.__text ol > li{

}

.__text img{
	margin: 0.25em 0;
	border-radius: var(--r-1);
}
.__text img.left{
	float: left;
	margin-right: 1em;
}
.__text img.right{
	float: right;
	margin-left: 1em;
}

.__text .quote{
	text-align: right;
	font-style: italic;
	color: var(--grey-60);
}


/* Список */

/* List */
.__list{
	/* vars */
	--width: 8px;
	--thick: 1px;
	--coef: 1.6;
	--gap: 2px;
	--text-align: left;
	--color: #000;

	/* styles */
	display: flex;
	position: relative;
	padding: 0;
	margin: 0 0 0 calc(var(--width) * var(--coef));
	flex-direction: column;
	gap: var(--gap);
}
.__list > li{
	display: flex;
	position: relative;
	list-style-type: none;
	align-items: center;
	text-align: var(--text-align);
}
.__list::before,
.__list > li::before, 
.__list > li::after{
	content: '';
	position: absolute;
	left: calc(var(--width) * var(--coef) * -1);
	background-color: var(--color);
}
.__list::before{
	display: none;
}
.__list > li::before{ 
	width: var(--width);
	height: var(--thick);
	top: 0.5em;
}
.__list > li::after{
	width: var(--thick);
	height: calc(100% + var(--gap));
}
.__list > li:first-child::after{
	top: 0.5em;
}
.__list > li:last-child::after{
	height: 1em;
	top: -0.5em;
}

.__list.__line::before{
	display: inline-block;
	width: var(--thick);
	height: 1em;
	top: -0.5em;
}



/* Input [checkbox] */
.__checkbox{
	--marker: #000;
	display: flex;
	align-items: center;
}

.__checkbox > input[type = "checkbox"]{
	display: none;
}

.__checkbox > input[type = "checkbox"] ~ label{
	display: flex;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	align-items: center;
	gap: 5px;
}
.__checkbox.__m > input[type = "checkbox"] ~ label{
	padding: 0 8px;
	background-color: #fff;
	border-left: 3px solid var(--marker);
	border-radius: var(--r-0) 0 0 var(--r-0);
	box-shadow: var(--box-shadow-1);
}
.__checkbox.__m > input[type = "checkbox"] ~ label:hover{
	background-color: var(--green-10);
}

.__checkbox > input[type = "checkbox"] ~ label::before{
	content: "";
	display: inline-block;
	border: 1px solid var(--bgrey);
	border-radius: var(--r-0);
}
.__checkbox:not(.__m) > input[type = "checkbox"] ~ label::before{
	width: 1em;
	height: 1em;
	border: 1px solid var(--green);
}
.__checkbox:not(.__m) > input[type = "checkbox"]:not(:checked) ~ label:hover::before{
	background-color: var(--green-10);
}
.__checkbox.__m > input[type = "checkbox"] ~ label::before{
	width: 0.9em;
	height: 0.9em;
}

.__checkbox > input[type = "checkbox"] ~ label::after{
	content: "";
	display: inline-block;
	position: absolute;
	background-color: var(--bgrey-80);
	visibility: hidden;
}
.__checkbox.__m > input[type = "checkbox"] ~ label::after{
	left: calc(0.15em + 1px + 8px);
	width: 0.6em;
	height: 0.6em;
}
.__checkbox:not(.__m) > input[type = "checkbox"] ~ label::after{
	left: calc(0.15em + 1px);
	width: 0.7em;
	height: 0.7em;
	background-color: var(--green);
}
.__checkbox > input[type = "checkbox"]:checked + label::after{
	visibility: visible;
}



/* Input [radio] */
.__input-radio{
	--marker: #000;
	display: flex;
	align-items: center;
}

.__input-radio > input[type = "radio"]{
	display: none;
}

.__input-radio > input[type = "radio"] ~ label{
	display: flex;
	position: relative;
	padding: 0 8px;
	border-radius: var(--r-0);
	box-shadow: var(--box-shadow-1);
	overflow: hidden;
	cursor: pointer;
	align-items: center;
	gap: 5px;
}

.__input-radio.__m > input[type = "radio"] ~ label{
	border-left: 3px solid var(--marker);
	border-radius: var(--r-0) 0 0 var(--r-0);
}

.__input-radio > input[type = "radio"] ~ label:hover{
	background-color: var(--green-10);
}

.__input-radio > input[type = "radio"]:checked ~ label{
	background-color: var(--green);
}



/* Hidden download link */
.__hidden-download-link{
	display: none;
}