.yith-faqs-container.yith-faqs-loading:after {
    background: rgba(255,255,255,.1);
	border-radius: 6px;
}

ul.yith-faqs-categories {
    text-align: center;
}

.yith-faqs b {
    font: 300 20px/26px "Roboto", sans-serif;
}

.yith-faqs p {
    font: 400 16px/26px "Roboto", sans-serif;
}


:root {
    --yfwp-search-field-background: var(--background);
    --yfwp-search-field-background-active: #fafafa;
    --yfwp-search-field-border: #d3d3d3;
    --yfwp-search-field-border-active: #9ac3c5;
    --yfwp-search-field-placeholder-text: #b6b6b6;
    --yfwp-search-field-active-text: #000000;
    --yfwp-search-button-background: var(--background);
    --yfwp-search-button-background-hover: #09b5bc;
    --yfwp-search-button-icon: #ffffff;
    --yfwp-search-button-icon-hover: #ffffff;
    --yfwp-filters-colors-background: var(--background);
    --yfwp-filters-colors-background-hover: var(--primary);
    --yfwp-filters-colors-background-active: var(--primary);
    --yfwp-filters-colors-border: var(--onBackground);
    --yfwp-filters-colors-border-hover: var(--primary);
    --yfwp-filters-colors-border-active: var(--primary);
    --yfwp-filters-colors-text: var(--onBackground);
    --yfwp-filters-colors-text-hover: var(--onPrimary);
    --yfwp-filters-colors-text-active: var(--onPrimary);
    --yfwp-filters-border-dimensions: 9px;
    --yfwp-icon-colors-background: var(--background);
    --yfwp-icon-colors-background-hover: var(--background);
    --yfwp-icon-colors-background-active: var(--background);
    --yfwp-icon-colors-icon: var(--onBackground);
    --yfwp-icon-colors-icon-hover: var(--primary);
    --yfwp-icon-colors-icon-active: var(--primary);
    --yfwp-icon-border-dimensions: 6px;
    --yfwp-faq-colors-background: var(--background);
    --yfwp-faq-colors-background-hover: var(--background);
    --yfwp-faq-colors-background-active: var(--background);
    --yfwp-faq-colors-border: var(--outline);
    --yfwp-faq-colors-border-hover: var(--outline);
    --yfwp-faq-colors-border-active: var(--outline);
    --yfwp-faq-colors-text: var(--onBackground);
    --yfwp-faq-colors-text-hover: var(--onBackground);
    --yfwp-faq-colors-text-active: var(--onBackground);
    --yfwp-faq-colors-content: var(--onBackground);
    --yfwp-faq-colors-content-hover: var(--onBackground);
    --yfwp-faq-colors-content-active: var(--onBackground);
    --yfwp-faq-border-dimensions: 6px;
    --yfwp-faq-copy-button-color-background: #ffffff;
    --yfwp-faq-copy-button-color-background-hover: #f3f9f9;
    --yfwp-faq-copy-button-color-icon: #009f8b;
    --yfwp-faq-copy-button-color-icon-hover: #009f8b;
    --yfwp-faq-copy-button-color-border: #009f8b;
    --yfwp-faq-copy-button-color-border-hover: #009f8b;
    --yfwp-faq-copy-button-border-dimensions: 20px 20px 20px 20px;
    --yfwp-faq-loader-color: var(--onBackground);
    --yfwp-pagination-colors-background: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-background-hover: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-background-active: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-border: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-border-hover: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-border-active: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-text: #8f8f8f;
    --yfwp-pagination-colors-text-hover: #000000;
    --yfwp-pagination-colors-text-active: #009f8b;
    --yfwp-pagination-border-dimensions: 6px;
    --ywfp-icon-font-size: 14px
}

/*

    --background: rgb(255,255,255);
    --backgroundBlack: rgb(0, 0, 0);
    --onBackground: rgb(42, 36, 34);
    --onBackgroundWhite: rgb(244, 240, 238);
	--surface: rgb(29, 28, 28);
    --onSurface: rgb(222, 217, 214);
	--primary: rgb(237, 105, 31);
	--onPrimary: rgb(255, 255, 255);
	--primaryContainer: rgb(237, 105, 31);
	--onSurfaceVariant: rgb(198, 192, 188);
	--outline: rgb(220, 220, 220);
	--secondary: rgb(179, 65, 2);
	--navbar: rgb(0, 0, 0);
	--onNavbar: rgb(244, 240, 238);
	--surfaceVariant: rgb(245, 245, 245);
	--onSurfaceVariant: rgb(64, 64, 64);	
	
*/

body.appTheme-light {
	--yfwp-search-field-background: rgb(255,255,255);
    --yfwp-search-field-background-active: #fafafa;
    --yfwp-search-field-border: #d3d3d3;
    --yfwp-search-field-border-active: #9ac3c5;
    --yfwp-search-field-placeholder-text: #b6b6b6;
    --yfwp-search-field-active-text: #000000;
    --yfwp-search-button-background: rgb(255,255,255);
    --yfwp-search-button-background-hover: #09b5bc;
    --yfwp-search-button-icon: #ffffff;
    --yfwp-search-button-icon-hover: #ffffff;
    --yfwp-filters-colors-background: rgb(255,255,255);
    --yfwp-filters-colors-background-hover: var(--primary);
    --yfwp-filters-colors-background-active: var(--primary);
    --yfwp-filters-colors-border: var(--onBackground);
    --yfwp-filters-colors-border-hover: var(--primary);
    --yfwp-filters-colors-border-active: var(--primary);
    --yfwp-filters-colors-text: var(--onBackground);
    --yfwp-filters-colors-text-hover: var(--onPrimary);
    --yfwp-filters-colors-text-active: var(--onPrimary);
    --yfwp-filters-border-dimensions: 9px;
    --yfwp-icon-colors-background: rgb(255,255,255);
    --yfwp-icon-colors-background-hover: rgb(255,255,255);
    --yfwp-icon-colors-background-active: rgb(255,255,255);
    --yfwp-icon-colors-icon: rgb(42, 36, 34);
    --yfwp-icon-colors-icon-hover: var(--primary);
    --yfwp-icon-colors-icon-active: var(--primary);
    --yfwp-icon-border-dimensions: 6px;
    --yfwp-faq-colors-background: rgb(255,255,255);
    --yfwp-faq-colors-background-hover: rgb(255,255,255);
    --yfwp-faq-colors-background-active: rgb(255,255,255);
    --yfwp-faq-colors-border: var(--outline);
    --yfwp-faq-colors-border-hover: var(--outline);
    --yfwp-faq-colors-border-active: var(--outline);
    --yfwp-faq-colors-text: rgb(42, 36, 34);
    --yfwp-faq-colors-text-hover: rgb(42, 36, 34);
    --yfwp-faq-colors-text-active: rgb(42, 36, 34);
    --yfwp-faq-colors-content: rgb(42, 36, 34);
    --yfwp-faq-colors-content-hover: rgb(42, 36, 34);
    --yfwp-faq-colors-content-active: rgb(42, 36, 34);
    --yfwp-faq-border-dimensions: 6px;
    --yfwp-faq-copy-button-color-background: #ffffff;
    --yfwp-faq-copy-button-color-background-hover: #f3f9f9;
    --yfwp-faq-copy-button-color-icon: #009f8b;
    --yfwp-faq-copy-button-color-icon-hover: #009f8b;
    --yfwp-faq-copy-button-color-border: #009f8b;
    --yfwp-faq-copy-button-color-border-hover: #009f8b;
    --yfwp-faq-copy-button-border-dimensions: 20px 20px 20px 20px;
    --yfwp-faq-loader-color: rgb(42, 36, 34);
    --yfwp-pagination-colors-background: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-background-hover: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-background-active: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-border: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-border-hover: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-border-active: rgba(255, 255, 255, 0);
    --yfwp-pagination-colors-text: #8f8f8f;
    --yfwp-pagination-colors-text-hover: #000000;
    --yfwp-pagination-colors-text-active: #009f8b;
    --yfwp-pagination-border-dimensions: 6px;
    --ywfp-icon-font-size: 14px
}

ul.yith-faqs-categories.pill li a {
    padding: 10px 25px;
    margin: 0 15px 15px 0;
}

ul.yith-faqs-categories li a {
    display: block;
    text-decoration: none;
    color: var(--yfwp-filters-colors-text);
    background: var(--yfwp-filters-colors-background);
    border-color: var(--yfwp-filters-colors-border);
    outline: 0;
    font-size: 1rem;
}