/*CB Bakery */  
	/* ==========================================================================
   	1. VARIABLES & TOKENS
   	========================================================================== */
	:root {
		/* CB PRIMITIVE TOKEN STYLES*/
		/*--color-brand-100: #BC9976;*/
		--color-brand-100: #e3d5c8;
		--color-brand-500: #A67B51; /* Bronze */
		--color-brand-900: #7B5C3D;
		
		--cb-bg: #DDEEE4; /* Mint */
		--cb-main: #61726F; /* Sage */
		--cb-accent: #A67B51; /* Bronze */

		
		/* SEMANTIC TEMPLATE STYLES */
		--bg-secondary: var(--cb-bg, #DDEEE4);
		--bg-tertiary: var(--cb-main, #61726F);
		--bg-accent: var(--color-brand-500, #A67B51);
		
		--brand-light: var(--color-brand-100, #BC9976);
		--brand-main: var(--color-brand-500, #A67B51);
		--brand-dark: var(--color-brand-900, #7B5C3D);
		
		--font-title: "Cardo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}
	
	/* ==========================================================================
	2. Reset / Normalize
	========================================================================== */

	/* ==========================================================================
	3. BASE / Typography ELEMENTS
	========================================================================== */
	
	.cardo-regular {
		font-family: "Cardo", serif;
		font-weight: 400;
		font-style: normal;
	}

	.cardo-bold {
		font-family: "Cardo", serif;
		font-weight: 700;
		font-style: normal;
	}

	.cardo-regular-italic {
		font-family: "Cardo", serif;
		font-weight: 400;
		font-style: italic;
	}
	
	html {
		background: var(--bg-secondary);
	}
	
	
	h1, .text-title {
		font-size: var(--text-title);
		font-family: var(--font-title);
		text-transform: uppercase;
		color: var(--brand-main);
		line-height: var(--lh-base);
		letter-spacing: 0.107em ;
	}

	h2, .text-heading {
		font-size: var(--text-heading);
		font-family: var(--font-title);
		text-transform: uppercase;
		color: var(--bg-tertiary);
	}

	h3, .text-subheading {
		font-size: var(--text-subheading);
		font-family: var(--font-title);
		color: var(--bg-tertiary);
	}

	h4, .text-caption {
		font-family: var(--font-title);
		font-size: var(--text-subheading);
		color: var(--bg-tertiary);
		margin: var(--mar-xs ) auto;
	}

	h5, .text-caption-light {
		font-family: var(--font-body);
		font-size: var(--text-subheading);
		color: var(--text-xlight);
	}


	p {
		font-size: var(--text-body);
		font-family: var(--font-body);
		color: var(--text-main);
		line-height: var(--lh-base);
		margin: var(--mar-s) ;
	}


	
	
	
	/* ==========================================================================
	4. LAYOUT
	========================================================================== */
			
	.img-signature {
		border: 1px solid var(--bg-secondary); 
	}
	
	.phrase-box {
		border-left: 4px solid var(--bg-tertiary);
	}
	
	.feedback-form h1 {
		color: var(--text-brand);
	}

	.feedback-form h2 {
		color: var(--bg-tertiary);
	}
	
	.feedback-form h3 {
		color: var(--bg-tertiary);
	}
	
	/* UserPlayback */
	.playback-header {
		background: var(--bg-tertiary);
	}
	
	.message-header {
		border-bottom: 2px solid var(--bg-tertiary);
	}
	
	.message-title {
		color: var(--bg-tertiary)
	}
	
	.detail-item {
		background: var(--bg-secondary);
	}
	
	/*Landing page */
	.stat-card {
		border: 1px solid var(--brand-main);
	}

	.stat-card-value {
		color: var(--text-bold);
	}
	
	.landing-content {
		border: 1px solid var(--brand-main);
	}

	.landing-content-title {
		font-size: var(--text-body);
		color: var(--text-main);
	}
	
	.subject-focus-container {
		border:1px solid var(--brand-main);
	}

	
	
	/* ==========================================================================
	5. COMPONENTS (e.g., Cards, Buttons, Nav, Syncfusion )
	========================================================================== */
	/* Appbar */
	.e-appbar {
		background-color: var(--bg-primary);
		color: var(--text-main);
		border-bottom: 1px solid var(--bg-secondary);
	}
	
	/* hamburger button */
	.hamburger-btn.e-btn {
		color: var(--brand-main) !important;
	}
	
	.hamburger-btn.e-btn:hover {
		background: var(--bg-tertiary) !important;
		border-color: var(--bg-tertiary) !important;
		color: var(--bg-primary) !important;
	}

	.hamburger-btn.e-btn:active {
		background: var(--bg-tertiary) !important;
		border-color: var(--bg-tertiary) !important;
	}
	
	
	/* Sidebar */
	.e-sidebar {
		background-color: var(--bg-primary);
		border: 1px solid var(--bg-secondary);
		color: var(--text-main);
	}
	
	/* NavLink & Container */
	.nav-footer {
		border-top: 1px solid var(--bg-secondary);
	}
	
	.nav-item {
		color: var(--text-main) !important;
		border: 1px solid var(--bg-tertiary);
	}
	
	.nav-item:hover {
		background: var(--bg-tertiary) !important;
		border-color: var(--bg-tertiary) !important;
	}

	.nav-item.active {
		background: var(--bg-tertiary) !important;
		border-color: var(--bg-tertiary) !important;
	}
	
	.nav-icon {
		color: var(--brand-main);
	}
	
	.nav-text {
		font-family: var(--font-title);
		font-size: clamp(0.9375rem, 0.1vw + 0.9rem,   1.0rem);
	}
	
	
	/* Button Styles  */
	.e-primary {
		background: var(--bg-tertiary) !important;
		border: 2px solid var(--bg-tertiary) !important;
		color: var(--bg-primary) !important;
	}
	
	.e-primary:hover {
		background: var(--bg-primary) !important;
		border-color: var(--bg-tertiary) !important;
		color: var(--bg-tertiary) !important;
	}
	
	.e-primary:active {
		background: var(--bg-primary) !important;
		border-color: var(--bg-tertiary) !important;
	}
	
	.e-link {
		color: var(--bg-tertiary) !important;
	}
	
	.e-link:hover {
		background: var(--bg-primary) !important;
		border-color: var(--bg-tertiary) !important;
		color: var(--text-brand) !important;
	}
	
	.e-link:active {
		background: var(--bg-tertiary) !important;
		border-color: var(--bg-tertiary) !important;
	}
	
	.e-accent {
		background: var(--brand-main) !important;
		border: 2px solid var(--brand-main) !important;
		color: var(--bg-primary) !important;
	}
	
	.e-accent:hover {
		background: var(--bg-primary) !important;
		border-color: var(--brand-main) !important;
		color: var(--brand-main) !important;
	}
	
	.e-accent:active {
		background: var(--brand-main) !important;
		border-color: var(--brand-main) !important;
		color: var(--bg-primary) !important;
		transform: scale(0.98);
	}

	.e-action {
		color: var(--text-main) !important;
	}

	.e-action .e-btn-icon,
	.e-action .e-icons {
		color: var(--text-light) !important;
	}

	
	.e-action:hover .e-btn-icon,
	.e-action:hover .e-icons {
		color: var(--brand-main) !important;
	}

	

	.e-action:active .e-btn-icon,
	.e-action:active .e-icons {
		color: var(--brand-main) !important;
	}

	.e-plain-icon {
		color: var(--brand-main) !important;
	}

	.e-plain-icon:hover {
		color: var(--brand-main) !important;
	}

	.e-plain-icon:active {
		color: var(--brand-main) !important;
	}


	/* Scrollbar  WebKit browsers (Chrome, Safari, Edge) ===========================================  */
		
	::-webkit-scrollbar-track {
		background: var(--bg-secondary);
	}
	
	::-webkit-scrollbar-thumb {
		background: var(--bg-tertiary);
	}
	
	::-webkit-scrollbar-thumb:hover {
		background: var(--brand-main);
	}
	
	/* Calendar */
	.e-calendar {
		border: 1px solid var(--bg-secondary);
	}
	
	/* To specify background color, color, and border date elements on hovering */
	.e-calendar .e-content td:hover span.e-day, .e-calendar .e-content td:focus span.e-day, .e-bigger.e-small .e-calendar .e-content td:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
		background-color: var(--bg-secondary);
		border: 1px solid var(--bg-tertiary);
		color: var(--text-main);
	}
	
	/* To specify border of date cell grid */
	.e-calendar .e-content span.e-day, .e-bigger.e-small .e-calendar .e-content span.e-day {
		border: 1px solid transparent;
	}
	
	/* To specify color and font size Calendar title */
	.e-calendar .e-header .e-title, .e-bigger.e-small .e-calendar .e-header .e-title {
		color: var(--text-main);
		font-size: var(--text-body);
	}
	
	/* Customizing the previous and next icon */
	.e-calendar .e-header span, .e-bigger.e-small .e-calendar .e-header span {
		border: 1px solid var(--bg-secondary);
		color: var(--text-brand);
	}
	
	/* To specify background color, color, and border-color footer button  */
	.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
		color: var(--bg-primary);
	}
	
	/* To specify background color and color selected date cell grid  */
	.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
		background-color: var(--bg-tertiary);
		color: var(--bg-primary);
	}
	
	/* To specify background content header in Calendar */
	.e-calendar .e-content thead, .e-bigger.e-small .e-calendar .e-content thead {
		/*background: var(--color-secondary);*/
	}
	
	/*GRID */
	.e-grid {
		border: 1px solid var(--bg-secondary) !important;
	}

	.e-grid .e-row {
		color: var(--text-main);
		transition: background var(--transition-fast);
	}

	.e-grid .e-row:hover .e-rowcell {
		background: var(--bg-secondary) !important;
		color: var(--text-main) !important;
	}

	.e-grid .e-row.e-altrow {
		background: color-mix(in srgb, var(--bg-secondary) 40%, var(--bg-primary));
	}

	.e-grid .e-rowcell {
		font-size: var(--text-body);
		color: var(--text-main);
		border-color: var(--bg-secondary) !important;
	}
	
	.e-grid .e-headercell {
		background: var(--bg-tertiary) !important;
		border-color: var(--bg-tertiary) !important;
		/*padding: var(--pad-s) var(--pad-xs) !important;*/
	}

	.e-grid .e-headercell .e-headertext {
		color: var(--bg-primary);
		font-size: var(--text-body);
		font-weight: 600;
	}

	.e-grid .e-gridheader {
		border-color: var(--bg-tertiary) !important;
	}

	.e-grid .e-toolbar {
		border-color: var(--bg-secondary) !important;
	}

	.e-grid .e-pager {
		border-color: var(--bg-secondary) !important;
		color: var(--text-main);
	}

	.e-grid .e-pager .e-currentitem {
		background: var(--bg-tertiary);
		border-radius: var(--radius-s);
	}
	
	/* Textbox */
	.service-section-wrapper{
		border: 1px solid var(--bg-secondary); 
	}

	/* Tabs */
	.e-tab {
		border: 1px solid var(--bg-secondary);
		border-radius: var(--radius-m);
		overflow: hidden;
		box-shadow: var(--shadow-s);
	}

	/*Header items of Tab*/
	.e-tab .e-tab-header .e-toolbar-items {
		border: none;
	}
	
	/*Items of Tab*/
	.e-tab .e-content .e-item {
		color: var(--text-main);
		font-size: var(--text-body);
	}

	/*Tab item */
	.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap{
		color: var(--text-main);
	}

	/*Tab item ON HOVER*/
	.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
		background: var(--bg-tertiary) !important;
	}
	.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text {
		color: var(--text-xlight) !important;
	}

	/*SELECTED tab item*/
	.e-tab .e-tab-header .e-toolbar-item.e-active {
		background: var(--bg-accent);
		border-bottom: 2px solid var(--brand-main);
	}
	
	/*SELECTED tab item text and icon*/
	.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
	.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
		color: var(--text-xlight) !important;
	}
	
	/*header of Tab control*/
	.e-tab .e-tab-header {
		border-bottom: 1px solid var(--bg-secondary);
		color: var(--text-main);
	}
	
	/*Header Item icon of Tab control.*/
	.e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
		color: var(--brand-main) !important;
	}

	
	/* ==========================================================================
	6. UTILITIES
	========================================================================== */

	/* ==========================================================================
   7. MEDIA QUERIES
   ========================================================================== */