.api_group {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	position: relative;
}
.api_group__title__wrap {
	width: 20px;
	height: 100%;
	position: absolute;
	left: 0;
	border-right: 1px solid;
}
.api_group__title {
	line-height: 100%;
	margin: 0;
	height: 0%;
	width: fit-content;
	transform: rotate(-90deg) translateX(-100%);
	transform-origin: top left;
	position: absolute;
	font-size: 1rem;
}
.api_cards__title {
	margin: 0;
	margin-bottom: 8px;
	display: inline-block;
	text-decoration: underline;
}
.api_cards__title:hover {
	color: var(--accent-color);
}
.api_cards__title {
	color: var(--light-text-color);
}
.dark .api_cards__title {
	color: var(--light-bg-color);
}
.api_cards__title[href=""] {
	text-decoration: none;
	pointer-events: none;
}
.api_cards__paragraph {
	margin-bottom: 16px;
	flex-grow: 1;
}
.api_cards__wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 16px;
	margin-left: 20px;
	position: relative;
}
.api_cards__card, .api_cards__card_100w {
	padding: 20px;
	border-radius: 6px;
	border: 1px solid black;
	width: calc(50% - 10px);
	box-sizing: border-box;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}
.api_cards__card_100w{
	width: 100%;
}
.no_mb{
	margin-bottom: 0;
}
.api_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tag__api {
	font-size: 14px;
	border: 1px solid black;
	border-radius: 50px;
}
.api_group__divider__wrap {
	margin-left: 18px;
	position: relative;
	min-width: 8px;
}
.api_group__divider{
	width: 1px;
	border-right: 1px solid black;
}
.divider_1lvl {
	height: 100%;
	}
.api_group__divider__wrap svg {
	position: absolute;
	bottom: -15px;
	left: 0;
	stroke: black;
}
.tag__api_double, .tag__api_triple {
	display: flex;
}
.tag__api_double span:first-child {
	border-right: 1px solid black;
}
.tag__api_triple span:first-child, .tag__api_triple span:nth-child(2) {
	border-right: 1px solid black;
}
.tag__api span {
	padding: 2px 8px;
	display: inline-block;
}
.union_line {
	border-right: 1px solid black;
	height: calc(100% - 20px);
	position: absolute;
	left: -8px;
}
.union_svg {
	position: absolute;
	left: -16px;
	top: -22px;
}
.api_cards__union {
	position: relative;
	border: none;
}
.union_line__wrap {
	position: absolute;
	height: 100%;
}

.card__auth {
	border-color: hsla(240,100%,80%,0.52);
}
.auth__title a {
	font-weight: 600;
	white-space: nowrap;
	color: hsla(241,100%,70%,1) !important;
}
.auth__tag, .tag__api_double span:first-child, .auth_union, .api_group__wrap__auth {
	border-color: hsla(241,98%,77%,0.97);
}
.auth_svg {
	stroke: hsla(241,98%,77%,0.97);
}
.card__autorization {
	border-color: hsla(9,100%,80%,0.53);
}
.autorization__tag, .tag__api_double.autorization__tag span:first-child, .api_group__wrap__autorization {
	border-color: hsla(10,98%,75%,0.7);
}	
.autorization__title a {
	font-weight: 600;
	white-space: nowrap;
	color: hsla(0,100%,75%,1) !important;
}
.card__self_service {
	border-color: hsla(215,100%,70%,0.4);
}
.self_service__title a {
	font-weight: 600;
	white-space: nowrap;
	color: hsla(215,99%,49%,0.69) !important;
}
.self_service__tag, .tag__api_double.self_service__tag span:first-child, .api_group__wrap__self_service, .self_service_union {
	border-color: hsla(215,100%,70%,0.67);
}	
.self_service_svg {
	stroke: hsla(215,100%,70%,0.67);
}
.crm_integration__title a {
	font-weight: 600;
	white-space: nowrap;
	color: hsla(274,99%,50%,0.69) !important;
}
.card__crm_integration {
	border-color: hsla(274,100%,72%,0.26);
}
.crm_integration__tag, .tag__api_triple.crm_integration__tag span, .tag__api_double.crm_integration__tag span:first-child, .api_group__wrap__crm_integration {
	border-color: hsla(274,100%,71%,0.61);
}	
.card__other {
	border-color: hsla(0,0%,69%,0.26);
}
.other__tag, .tag__api_double.other__tag span:first-child, .api_group__wrap__other {
	border-color: hsla(0,0%,68%,0.61);
}
.other__title {
	color: hsla(0,0%,68%,1);
}

.api_cards__union:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	border-radius: 6px;
	-webkit-mask:
		linear-gradient(#fff 0 0) padding-box, 
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) padding-box, 
		linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.card__auth_autorization:before {
	background: linear-gradient(to bottom, hsla(240,100%,80%,0.52), hsla(9,100%,80%,0.53)) border-box;
}
.card__crm_integration_self_service:before {
	background: linear-gradient(to bottom, hsla(215,100%,70%,0.4), hsla(274,100%,72%,0.26)) border-box;
}
.api_group:first-child {
	margin-top: 28px;
}


@media (max-width: 640px) {
	.no_mb, .api_cards__card {
		margin-bottom: 16px;
	}
	.api_cards__card {
		width: 100%;
	}
	.api_cards__card:last-child {
		margin-bottom: 0;
	}
	.api_cards__card:first-child {
		margin-bottom: 16px;
	}
}