:root {
    /* Base Colors */
    --color-basic-100: #FFFFFF;
    --color-basic-500: #D1D7E3;
    --color-basic-600: #959DAD;
    --color-basic-900: #2D3038;
    --color-basic-1100: #16171C;
    --color-basic-transparent-100: #959DAD14;

    /* Status Colors */
    --color-success-500: #09C687;
    --color-success-transparent-100: #03C18314;
    --color-success-transparent-300: #03C1833D;
    
    --color-warning-500: #E8BA06;
    --color-warning-transparent-300: #E8BA063D;
    
    --color-danger-500: #D63D36;
    --color-danger-transparent-300: #D63D363D;
    
    --color-info-500: #0CB7E5;
    --color-info-transparent-300: #0CB7E53D;
    
    --color-data-500: #8F5CFF;
    --color-data-transparent-300: #8F5CFF3D;

    /* Layout Variables */
    --header-height: 2.9375rem;
    --border-radius-sm: 0.125rem;
    --border-radius-md: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.375rem;
    --spacing-lg: 1.875rem;

    /* Typography */
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 17px;
    --line-height-sm: 1rem;
    --line-height-md: 1.5;

    /* Icon Sizes */
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.75rem;
    --icon-xl: 2rem;

    /* Component Variables */
    --header-background-color: var(--color-basic-1100);
    --body-background-color: var(--color-basic-1100);
    --card-background-color: var(--color-basic-transparent-100);
    --card-title-text-color: var(--color-basic-100);
    --card-text-color: var(--color-basic-500);
    --card-date-text-color: var(--color-basic-600);
    --notification-background-color: var(--color-success-transparent-100);
    --notification-text-color: var(--color-success-500);
    --input-background-color: var(--color-basic-900);
    --input-border-color: var(--color-basic-900);
    --input-text-color: var(--color-basic-600);
    --input-min-height: 2rem;
    --input-border-radius: 0.25rem;
    --search-input-height: 45px;
    --feedback-input-padding: 0.5rem var(--spacing-lg) 0.5rem 0.5rem;
}

/* Base Layout */
.embed .news {
    background-color: var(--header-background-color) !important;
    height: calc(100vh - 46px) !important;
}

.embed .headerTitle a {
    text-decoration: underline;
}

.embed .panel {
    background-color: var(--body-background-color);
}

/* Header */
.embed .container .header {
    height: var(--header-height);
    min-height: 0;
    background-color: var(--body-background-color) !important;
}

.embed .container .header:before {
    display: none;
}

.embed .headerTitle {
    padding: 12px 16px 11px 16px !important;
    border-bottom: 1px solid var(--input-border-color);
    font-size: var(--font-size-lg) !important;
    font-weight: bold;
}

/* Header Icons */
.embed .headerClose,
.embed .headerClose svg {
    width: var(--icon-md);
    height: var(--icon-md);
    top: 0.75rem !important;
}

.embed .headerNav,
.embed .headerNav svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.embed .headerNav {
    top: 0.875rem !important;
}

.embed .headerNav svg,
.embed .headerClose svg {
    fill: var(--input-text-color) !important;
}

/* Cards/Features */
.embed .feature:not(.notificationsPrompt) {
    background-color: var(--card-background-color) !important;
    border: 1px solid var(--color-basic-transparent-100);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm);
}

.embed .feature .featureTitle {
    color: var(--card-title-text-color) !important;
    font-size: var(--font-size-xl) !important;
}

.embed .feature .featureContent {
    color: var(--card-text-color) !important;
}

.embed .feature .featureContent h1,
.embed .feature .featureContent h2,
.embed .feature .featureContent h3 {
    color: var(--card-title-text-color) !important;
}

.embed .feature .featureContent p {
    font-size: var(--font-size-md) !important;
}

.embed .feature .featureContent p,
.embed .feature .featureContent b,
.embed .feature .featureContent span {
    color: var(--card-text-color) !important;
}

.embed .feature h2 {
    font-size: var(--font-size-sm);
}

/* Content Spacing */
.embed .featureContent p,
.embed .featureContent h1,
.embed .featureContent h2,
.embed .featureContent h3,
.embed .featureTitle {
    margin-bottom: 10px;
}

.embed .featureContent h3 {
    margin-bottom: 6px;
}

.embed figure {
    margin-bottom: 10px !important;
}

/* Dates */
.embed .featureDate span {
    color: var(--card-date-text-color) !important;
    font-size: var(--font-size-xs);
}

/* Categories */
.embed .category {
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: bold;
    padding: 0 3px;
    text-transform: none;
    margin-right: var(--spacing-xs);
}

/* Notifications */
.embed .notificationsPrompt {
    background-color: var(--notification-background-color) !important;
    color: var(--notification-text-color) !important;
    fill: var(--notification-text-color) !important;
    height: 28px;
    margin: 0 0 var(--spacing-sm) 0;
    max-width: none;
}

.embed .notificationsPrompt .feedbackSend {
	bottom: 7px !important;
}

.embed .notificationsIcon {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

/* Search */
.embed .streamSearch {
    height: var(--search-input-height);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    padding: 0 !important;
}

.embed #panel-nav {
	padding-top: var(--search-input-height);
}

.embed .streamSearchInput {
    height: var(--search-input-height) !important;
    background-color: var(--header-background-color);
    color: var(--input-text-color);
    border-color: var(--input-border-color);

}

.embed .streamSearchBack,
.embed .streamSearchIcon,
.embed .streamSearchBack svg,
.embed .streamSearchIcon svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.embed .streamSearchBack {
    top: 10px !important;
}

.embed .streamSearchIcon {
    top: 5px !important;
}

.embed .streamSearchBack svg,
.embed .streamSearchIcon svg {
    fill: var(--input-text-color) !important;
}

.embed .catItemLink {
	color: var(--card-text-color) !important;
	font-size: var(--font-size-sm);
	display: flex !important;
	align-items: center;
	
}

/* Form Inputs */
.embed .feedbackInput,
.embed .emailSubscriptionInput {
    background-color: var(--input-background-color) !important;
    border-color: var(--input-border-color) !important;
    color: var(--input-text-color) !important;
    font-size: var(--font-size-sm);
    min-height: var(--input-min-height);
    line-height: var(--line-height-sm);
    padding: var(--feedback-input-padding);
    border: none;
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius) !important;
}

/* Placeholders */
.embed .feedbackInput::-webkit-input-placeholder,
.embed .emailSubscriptionInput::-webkit-input-placeholder,
.embed .feedbackInput::placeholder,
.embed .emailSubscriptionInput::placeholder,
.embed .streamSearchInput::placeholder,
.embed .streamSearchInput::-webkit-input-placeholder {
    color: var(--input-text-color) !important;
}

/* Feedback */
.embed .socialShare {
	background-image: url("https://sauibakerypublic.blob.core.windows.net/cloud-assets/beamer-share-fill.svg") !important;
	opacity: 1 !important;
	height: var(--icon-md);
	width: var(--icon-md);
}

.embed .featureFeedback {
    background-color: transparent;
    border-color: var(--input-border-color);
    padding: 21px 16px 20px 16px;
    margin-top: var(--spacing-md) !important;
}

.embed .materialIcon.feedbackSend {
    box-shadow: none !important;
    background: transparent !important;
    fill: var(--input-text-color) !important;
    bottom: 11px;
    width: var(--icon-md);
    height: var(--icon-md);
}

.embed .feedbackEmailForm .feedbackSend {
    bottom: 5px !important;
}

.embed .feedbackSubmited {
    color: var(--card-text-color) !important;
}

/* Prompts */
.embed .promptContentText {
    text-align: center;
    padding: 0 !important;
    font-size: var(--font-size-xs);
    border-color: var(--input-border-color);
}

.embed .promptClose {
    top: 4px !important;
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.embed .promptClose svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.embed .promptInput {
    padding: 0;
}

/* Container */
.embed .newsContainerDiv {
    padding: var(--spacing-sm) var(--spacing-xs);
}

/* Emojis */
.embed .emojis {
    top: -1rem;
}

.embed .emojis img {
    height: var(--icon-lg) !important;
}

.embed .emojis img:hover {
    height: var(--icon-xl) !important;
}