#web4sl-call-button {
	position: fixed;
	display: flex;
	width: 40px;
	height: 40px;
	left: 10px;
	transition: 0.35s ease-in-out;
	transition: var(--wp--custom--transition-time);
	z-index: 215;
	padding: 0;
	border-radius: 200px;
	background-color: var(--wp--preset--color--primary);
	background-color: var(--wp--custom--search-menu-icon-color);
	box-shadow: var(--wp--preset--shadow--light);
	margin-top: 0;
	text-align: center;
	justify-content: center;
	align-items: center;
	color: var(--wp--preset--color--base);
	border: none;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;

	> span {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	&:hover {
		box-shadow: var(--wp--preset--shadow--dark);
		background-color: var(--wp--preset--color--secondary);
		background-color: var(--wp--custom--search-menu-icon-hover-color);
	}
}

.admin-bar {

	#web4sl-call-button[style*="fixed"] {
		transform: translate(0, var(--wp-admin--admin-bar--height));
	}
}

@media only screen and (max-width: 1325px) {

	#web4sl-call-button {
		width: 35px;
		height: 35px;
		left: 5px;

		> span {

			&::before {
				font-size: 25px;
			}
		}
	}
}

/* Media Queries
    ---------------------------------------- */

/* Large screens (desktops,992px and up) */
@media only screen and (min-width: 992px) {

	.web4sl-hide-on-desktop {
		display: none !important;
	}
}

/* Medium screens (tablets, between 781.98px and992px) */
@media (min-width: 781.98px) and (max-width: 992px) {

	.web4sl-hide-on-tablet {
		display: none !important;
	}
}

/* Small screens (mobile devices, less than 781.98px) */
@media only screen and (max-width: 781.98px) {

	.web4sl-hide-on-mobile {
		display: none !important;
	}
}

body.flexline {

	/* ==================================================
      Keys for Theming
    ================================================== */
	--flexline-tabs-headline-font: var(--wp--preset--font-family--display);
	--flexline-tabs-list-underline-color: var(--wp--preset--color--neutral-light);
	--flexline-tabs-accordion-header-text-color: var(--wp--preset--color--base);
	--flexline-pds-tabs-color-accent: var(--wp--preset--color--primary, #333);
	--flexline-pds-tabs-active-tab-text-color-basic: var(--wp--preset--color--primary, #333);
	--flexline-pds-tabs-active-tab-text-color: var(--wp--preset--color--primary-dark, #333);
	--flexline-pds-tabs-color-background: transparent;
	--flexline-pds-tabs-color-accent-contrast: var(--flexline-pds-tabs-color-background);

	/* ==================================================
       Layout & Spacing
    ================================================== */
	--pds-tabs-padding: 1rem;
	--pds-tabs-margin: 0;
	--pds-tabs-tab-gap: 1em;
	--pds-tabs-vertical-column-gap: var(--wp--style--block-gap, 2em);
	--pds-tabs-vertical-column-gap-mobile: 1em;
	--pds-tabs-v-padding-mobile: var(--pds-tabs-padding) var(--pds-tabs-padding) var(--pds-tabs-padding) 0;

	/* ==================================================
       Tab Line Colors
    ================================================== */
	--pds-tabs-tab-line-color: currentcolor;
	--pds-tabs-tab-line-color-active: currentcolor;
	--pds-tabs-h-tab-line-color: transparent;

	/* ==================================================
       Typography & Fonts
    ================================================== */

	/* Tabs Header - Default */
	--pds-tabs-header-font-family: var(--flexline-tabs-headline-font);

	/* Inherit header font for related elements */
	--pds-tabs-acc-header-font-family: var(--pds-tabs-header-font-family);
	--pds-tabs-v-tab-font-family: var(--pds-tabs-header-font-family);
	--pds-tabs-h-tab-font-family: var(--pds-tabs-header-font-family);

	/* ==================================================
       Accordion Header Styles
    ================================================== */
	--pds-tabs-acc-header-font-weight: 700;
	--pds-tabs-acc-header-font-size: 1.0625rem;
	--pds-tabs-acc-header-line-height: 1.375rem;
	--pds-tabs-acc-header-padding: 1.25rem;
	--pds-tabs-acc-header-gap: 0.3125rem;
	--pds-tabs-accordion-icon-size: 0.75rem;
	--pds-tabs-accordion-icon-offset: 0.9375rem;

	/* ==================================================
       Basic Tab Styling
    ================================================== */
	--pds-tabs-h-tab-line-width-basic: 0.1875rem;
	--pds-tabs-h-tab-gap-basic: 1.25rem;
	--pds-tabs-h-tabs-list-underline-width-basic: 1px;
	--pds-tabs-h-content-margin-basic: 2.5em 0 0 0;
	--pds-tabs-v-content-margin-basic: 0;
	--pds-tabs-v-tab-padding-basic: 0.75em 1em;
	--pds-tabs-v-tab-padding-mobile-basic: 1vw 2vw;
	--pds-tabs-v-tab-min-height-basic: 2.75em;
	--pds-tabs-v-tab-line-height-basic: 1.4;
	--pds-tabs-vertical-column-gap-mobile-basic: 0;
	--pds-tabs-v-tab-gap-basic: 0.625rem;
	--pds-tabs-v-tab-line-width-basic: 0.25em;
	--pds-tabs-acc-header-gap-basic: var(--pds-tabs-acc-header-gap);
	--pds-tabs-h-tabs-list-underline-color-basic: var(--flexline-tabs-list-underline-color);
	--pds-tabs-acc-content-padding-basic: 1.5625em 1.25em;
	--pds-tabs-accordion-header-background-basic: var(--pds-tabs-color-accent);
	--pds-tabs-acc-header-padding-basic: var(--pds-tabs-acc-header-padding);
	--pds-tabs-h-tab-line-color-active: var(--pds-tabs-tab-line-color-active);
	--pds-tabs-v-tab-line-color: var(--wp--custom--color--neutral-light);
	--pds-tabs-v-tab-line-color-active: var(--pds-tabs-tab-line-color-active);
	--pds-tabs-tab-text-color-basic: var(--pds-tabs-color-accent);
	--pds-tabs-accordion-header-text-color-basic: var(--flexline-tabs-accordion-header-text-color);

	/* ==================================================
       Tabby Theme Styles
    ================================================== */
	--pds-tabs-tab-background-color-tabby: var(--pds-tabs-color-accent);
	--pds-tabs-tab-background-color-alt-tabby: rgba(0, 0, 0, 0.5);
	--pds-tabs-tab-text-color-tabby: var(--pds-tabs-color-accent-contrast);
	--pds-tabs-vertical-column-gap-mobile-tabby: var(--pds-tabs-vertical-column-gap-mobile);
	--pds-tabs-active-tab-background-color-tabby: var(--pds-tabs-color-background);
	--pds-tabs-active-tab-text-color-tabby: var(--pds-tabs-color-accent);
	--pds-tabs-border-radius-tabby: 0;
	--pds-tabs-tab-border-radius-tabby: var(--pds-tabs-border-radius-tabby);
	--pds-tabs-acc-border-radius-tabby: var(--pds-tabs-border-radius-tabby);
	--pds-tabs-h-tab-flex-grow-last-tabby: 0;
	--pds-tabs-acc-header-padding-tabby: var(--pds-tabs-acc-header-padding);
	--pds-tabs-tab-padding-tabby: 1em;
	--pds-tabs-h-tab-padding-tabby: var(--pds-tabs-tab-padding-tabby);
	--pds-tabs-v-tab-padding-tabby: var(--pds-tabs-tab-padding-tabby);
	--pds-tabs-h-content-padding-tabby: 1em;
	--pds-tabs-v-content-padding-tabby: 1em 1em 1em 0;
	--pds-tabs-acc-content-padding-tabby: 1.5625em 1.25em;
	--pds-tabs-tab-gap-tabby: 1px;
	--pds-tabs-h-tab-gap-tabby: var(--pds-tabs-tab-gap-tabby);
	--pds-tabs-v-tab-gap-tabby: var(--pds-tabs-tab-gap-tabby);
	--pds-tabs-acc-header-gap-tabby: var(--pds-tabs-acc-header-gap);
	--pds-tabs-v-padding-tabby: 0;
	--pds-tabs-accordion-header-background-tabby: var(--pds-tabs-color-accent);
	--pds-tabs-accordion-header-text-color-tabby: var(--pds-tabs-color-accent-contrast);

	/* ==================================================
       General Tab Colors
    ================================================== */
	--pds-tabs-content-text-color: inherit;
	--pds-tabs-tab-text-color: var(--pds-tabs-color-accent);

	/* ==================================================
       Accordion Header General Colors
    ================================================== */
	--pds-tabs-accordion-header-background: none;
	--pds-tabs-accordion-header-text-color: inherit;

	/* ==================================================
       Tabs Header Active Styles
    ================================================== */
	--pds-tabs-active-tab-text-color-basic: var(--flexline-pds-tabs-active-tab-text-color-basic);

	/* ==================================================
       Color Variables
    ================================================== */
	--pds-tabs-color-accent: var(--flexline-pds-tabs-color-accent);
	--pds-tabs-active-tab-text-color: var(--flexline-pds-tabs-active-tab-text-color);
	--pds-tabs-color-background: var(--flexline-pds-tabs-color-background);
	--pds-tabs-color-accent-contrast: var(--flexline-pds-tabs-color-accent-contrast);
}
