._b-standards{
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 16px;
}


/* Filters */
._b-standards > .filters{
	display: flex;
	width: calc(100% - var(--page-hor-padding) * 2);
	position: sticky;
	top: var(--menu-height);
	z-index: 1;
	padding: 10px var(--page-hor-padding);
	box-shadow: 0 0 4px rgb(var(--bgrey-20-rgb),0.6);
	background-color: #fff;
	gap: 15px 40px;
}

._b-standards > .filters > .list{
	display: flex;
	/* flex-wrap: wrap; */
	gap: 10px 30px;
}

._b-standards > .filters > .list > div{
	display: flex;
	position: relative;
	padding: 10px 10px;
	border: 1px solid var(--bgrey-140);
	border-radius: var(--r-1);
	align-items: center;
	gap: 15px;
}

._b-standards > .filters > .list > div > .controls{
	display: flex;
	position: absolute;
	right: -9px;
	padding: 3px 0;
	background-color: #fff;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}
._b-standards > .filters > .list > div > .controls > button{
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 13px;
	color: var(--bgrey-40);
}
._b-standards > .filters > .list > div > .controls > button:hover{
	color: var(--green);
}

._b-standards > .filters > .list > div > h2{
	margin: 0;
	font-weight: 300;
	font-size: 1.2em;
	color: var(--bgrey);
}

/* Тип */
._b-standards > .filters .type{
	display: flex;
	gap: 5px 20px;
	align-items: center;
	flex-wrap: wrap;
}

._b-standards > .filters .type > div{
	user-select: none;
}

._b-standards > .filters .type > .__checkbox.green{ --marker: var(--green); }
._b-standards > .filters .type > .__checkbox.blue{ --marker: var(--blue); }
._b-standards > .filters .type > .__checkbox.grey{ --marker: var(--bgrey); }
._b-standards > .filters .type > .__checkbox.yellow{ --marker: var(--yellow); }
._b-standards > .filters .type > .__checkbox.red{ --marker: var(--red); }
._b-standards > .filters .type > .__checkbox.purple{ --marker: var(--purple); }


/* Дата */
._b-standards > .filters .date{
	display: flex;
	align-items: center;
	gap: 5px;
}
._b-standards > .filters .date > input{
	width: 4em;
}


/* Кнопки управління */
._b-standards > .filters > .controls{
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 10px;
}

._b-standards > .filters > .controls > .apply{
	font-size: 1.1em;
}

._b-standards > .filters > .controls > .open,
._b-standards > .filters > .controls > .close{
	display: none;
}

._b-standards > .filters > .controls > .open{
	margin-left: auto;
}
._b-standards > .filters.opened > .controls > .open{
	display: none;
}


/* Table */
._b-standards > .table{
	display: inline-block;
	width: 100%;
}

._b-standards > .table > div{
	display: grid;
	padding: 0 var(--page-hor-padding);
	grid-template-columns: 20px auto auto repeat(3, 1fr);
	justify-content: center;
	gap: 10px 0;
}

._b-standards > .table > div > div{
	display: contents;
	position: relative;
	background-color: #fff;
}
._b-standards > .table > div > div > *{
	transition: opacity 200ms ease;
}	
._b-standards > .table > div > div.hidden > *{
	opacity: 0;
}

._b-standards > .table > div > div > div{
	padding: 10px 30px;
	background-color: rgba(255,255,255,0.9);
}

._b-standards > .table > div > div:hover > div{
	background-color: rgba(var(--green-5-rgb), 0.9);
}

._b-standards > .table > div > div.selected > div{
	background-color: rgba(var(--green-10-rgb), 0.9);
}

._b-standards > .table > div > div.selected:hover > div{
	background-color: rgba(var(--green-20-rgb), 0.9);
}

._b-standards > .table > div > div > div.marker{
	width: 20px;
	height: 100%;
	padding: 0;
	border-left: 8px solid black;
	border-radius: var(--r-1) 0 0 var(--r-1);
}

._b-standards > .table > div > div .marker.green{ border-color: var(--green); }
._b-standards > .table > div > div .marker.blue{ border-color: var(--blue); }
._b-standards > .table > div > div .marker.grey{ border-color: var(--bgrey-60); }
._b-standards > .table > div > div .marker.yellow{ border-color: var(--yellow); }
._b-standards > .table > div > div .marker.red{ border-color: var(--red); }
._b-standards > .table > div > div .marker.purple{ border-color: var(--purple); }

._b-standards > .table > div > div .header{
	display: flex;
	width: 390px;
	flex-direction: column;
	align-items: start;
	justify-content: center;
}

._b-standards > .table > div > div .header > div{
	display: flex;
	align-items: center;
	gap: 15px;
}

._b-standards > .table > div > div .header > div > div{
	cursor: pointer;
	color: var(--green);
}
._b-standards > .table > div > div .header > div > div:hover{
	color: var(--green-60);
}

._b-standards > .table > div > div .header > div > a{
	margin: 0;
	white-space: nowrap;
	font-weight: 300;
	font-size: 1.5em;
}

._b-standards > .table > div > div .header > span{
	display: inline-block;
	height: 22px;
	color: var(--bgrey-60);
}

._b-standards > .table > div > div .buttons{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

._b-standards > .table > div > div .buttons > a{
	width: 100px;
	font-size: 0.8em;
}

._b-standards > .table > div > div .text{
	text-align: justify;
	font-size: 0.9em;
}