.categoryTabsSection {

    background-color: #fff;
    padding: 240px 0 107px;
    float: none;
    clear: both;

    &.lightBg {
        background: #fff;
    }

    @media @flyout {
        padding: 80px 0 64px;
    }

    @media @mobile {
        padding: 80px 0 64px;
    }



	//.categoryTabs {
    .categoryTabsAlt {
        margin: 0 0 64px;
        display: flex;
        justify-content: center;

        @media @flyout {
            width: ~"calc(100% + 48px)";
            margin-left: -24px;
            margin-right: -24px;
            height: 48px;
            overflow: hidden;
        }

        @media @mobile {
            margin-bottom: 32px;
        }


        ul {
            display: flex;
            width: auto;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 12px 16px rgba(0,0,0,0.08);
            border-radius: 100px;
            flex-wrap: nowrap;

            &:before, &:after {
                display: none;
            }

            @media @flyout {
                width: ~"calc(100% + 48px)";
                min-height: 72px;
                overflow-x: scroll;
                padding-bottom: 24px;
                padding-left: 24px;
                padding-right: 24px;
                box-shadow: none;
                border-radius: 0;
            }

            @media @mobile {

            }



            & > li {
                width: auto;
                float: none;
                clear: both;

                @media @flyout {
                    padding: 0 8px;

                    &:last-child {
                        padding-right: 24px;
                    }
                }

                @media @mobile {
                    padding: 0 4px;

                    &:last-child {
                        padding-right: 24px;
                    }
                }


                button, a {
                    .rems(17);
                    line-height: 23px;
                    color: color-mix(in srgb, var(--fade_mixin_color),   var(--text_color) 50%);
                    font-weight: 600;
                    border-radius: 100px;
                    background: var(--third_color);
                    transition: all 200ms linear;
                    padding: 24px 32px;
                    cursor: pointer;
                    outline: 0;
                    margin: 0;
                    white-space: nowrap;

                    @media @flyout {
                        border: 2px solid var(--border_color);
                        padding: 9px 24px;
                        .rems(14);
                        line-height: 20px;
                        height: 48px;
                    }

                    &:hover, &:focus {
                        color: var(--third_color);
                        border-color: var(--third_color);
                        transition: all 200ms linear;
                    }

                    &:active {
                        background: color-mix(in srgb, var(--fade_mixin_color), var(--third_color) 80%);
                        border-color: color-mix(in srgb, var(--fade_mixin_color), var(--third_color) 80%);
                        color: #fff;
                        transition: all 200ms linear;
                    }

                    &.active {
                        background: var(--third_color);
                        border-color: var(--third_color);
                        color: #fff !important;
                        transition: all 200ms linear;
                    }
                }
            }
        }
    }

    .onlineDoctorWrap {

        .categoryListWrap {

            &:not(.activeList) {
                display: none;
                visibility: hidden;
            }

            .activeList {
                display: block;
                visibility: visible;
            }

            & > ul {
                &:before, &:after {
                    display: none;
                }
            }


        }

    }

}



.categoryTabs {

	margin-top: 100px;
	padding: 0 0 var(--top_bottom_gutter);

	@media @flyout {
		padding: 0 0 var(--top_bottom_gutter_flyout);
	}

	@media @mobile {
		padding: 0 0 var(--top_bottom_gutter_mobile);
	}

	.wrapper {
		max-width: 1258px;
	}


	&__tabsWrap {

	}

	&__tabs {

		display: flex;

		&:before, &:after {
			display: none;
		}

		& > li {

			font-family: @secondary_font;
            cursor: pointer;

            span {

                padding: 19px 29px 15px;
                border-radius: 10px 10px 0 0;
                background: white;
                .rems(22);
                line-height: 25px;
                font-weight: 500;
                font-family: inherit;
                color: var(--primary_color);
                display: flex;

            }

            &.active, &:hover, &:visited {
                span {
                    background: var(--light_color);
                    color: var(--primary_color);
                }
            }
		}

	}

	&__body {

		background: var(--light_color);
		padding: 55px;

	}

	&__content {

	}

	&__list {
		display: none;
		flex-wrap: wrap;
		width: ~"calc(100% + 90px)";
		margin: 0 -45px -45px -45px;

        &.active {
            display: flex;
        }

		&:before, &:after {
			display: none;
		}

		& > li {
			flex: 0 0 25%;
			padding: 0 45px;
			margin: 0 0 50px;
		}

	}

	&__card {

		&:hover, &:active, &:focus-visible {

			.categoryTabs__imageWrap {

				img {
					transform: translate(-50%, -50%) scale(1.1);
					transition: transform 300ms;
				}

			}

		}

	}

	&__imageWrap {
		width: 100%;
		padding-bottom: 91.5%;
		border-radius: 12px;
		overflow: hidden;
		position: relative;
		border: 1px solid transparent;
        background-color: transparent;

		&.noImage {
			background: #fff;
		}

		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%) scale(1);
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 300ms;
		}
	}

	&__title {
		.rems(23);
		line-height: 25px;
		margin: auto 0 0 0;
		padding: 20px 0 0;
		color: var(--text_color);
		text-align: center;
        font-family: @primary_font;
	}


}
