.docs-header {
	& .name {
		font-size: 50px;
	}
}

.docs-material {
	display: flex;
	flex-direction: column;
	gap: 40px;

	& .docs-filter {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;

		& .filter {
			cursor: pointer;
			color: var(--grayish);
			user-select: none;
			border: 1px solid var(--grayish);
			border-radius: 10px;
			padding: 15px;
			transition: .3s all ease;

			/* &.active {
				color: var(--white);
				background-color: var(--midnight);
			} */
		}
	}

	& .docs-carousel {
		display: flex;

		& .item {
			display: flex;
			flex-direction: column;
			justify-content: end;
			padding: 25px;
			border: 1px solid #CAD2DD;
			border-radius: 25px;
			min-height: 370px;
			overflow: hidden;

			& .info {
				display: flex;
				flex-direction: column;
				gap: 20px;

				& .name {
					font-weight: 600;
				}

				& .link {
					padding: 17px;
					border-radius: 8px;
					font-weight: 600;
				}
			}

			& .category {
				position: absolute;
				top: 25px;
				right: 25px;
				background-color: var(--breeze);
				border-radius: 10px;
				padding: 0px 10px;
				max-width: 65%;
			}

			& .bg-item {
				position: absolute;
				top: -10px;
				left: 0;
				user-select: none;
			}
		}

		& .owl-nav {
			display: none;
		}
	}
}

.dropdown_wrapper {
	width: 100%;
	min-width: 0;

    & .show-section {
        padding: 15px 20px;
    }

    & .dropdown_list {
		position: absolute;
		top: calc(100% + 4px);
		left: 0;

		width: 100%;
		max-height: 0;

		padding: 0 10px;

		border-left: .5px solid #00000030;
		border-right: .5px solid #00000030;
		border-bottom: .5px solid #00000030;
		border-radius: 8px;

		background-color: var(--white);
		z-index: 20;

		display: flex;
		flex-direction: column;

		opacity: 0;
		pointer-events: none;
		overflow: hidden;

		transition: max-height .2s ease, opacity .2s ease, padding .2s ease;

		&.active {
			max-height: 300px;
			padding: 10px;
			opacity: 1;
			pointer-events: auto;
			overflow-y: auto;
		}

		.item {
			flex: 0 0 auto;
			min-height: 24px;
		}

		.item.hidden {
			display: none !important;
		}

		._check-box + label {
			margin: 0;
			cursor: pointer;
		}
	}

    & .disabled {
        background: #b0bbc6;
        user-select: none;
        cursor: initial;
        color: var(--black) !important;
    }
}

@media screen and (max-width: 1200px) {
	.docs-header {
		& .name {
			font-size: 30px;
		}
	}

	.docs-material {
		& .docs-filter {
			gap: 20px;
		}

		& .docs-carousel {
			& .item {
				min-height: 350px;

				& .info {
					gap: 15px;
				}
			}
		}
	}
}

@media screen and (max-width: 767.98px) {
	.dropdown_wrapper.position-relative {
		position: relative !important;
	}
	.dropdown_wrapper {
		& .dropdown_list {
			position: static;
			width: 100%;
			margin-top: 4px;
		}
	}

	.dropdown_list.active {
		max-height: 240px;
	}

	.show-section {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.docs-header {
		& .name {
			font-size: 24px !important;
		}
	}

	.docs-material {
		& .docs-filter {
			overflow-x: scroll;
			flex-wrap: nowrap;
			padding-bottom: 20px;

			& .filter {
				text-wrap: nowrap;
			}
		}
	}
}