/* CSS Variables / Custom Properties */
.frametrail-body, .titlebar, .editingOptions, body > .ui-dialog, body > .ui-draggable, body > .contentViewAnimationDiv, body > .resourceAnimationDiv, .message, .viewResources:not(.resourceManager), .themeItem {
	--primary-bg-color: rgba(47, 50, 58, 1); /* Backgrounds */
	--secondary-bg-color: rgba(73, 76, 81, .6); /* Secondary Backgrounds, Timelines, Tile-BG, Panels etc. NEEDS TO BE SEMI-TRANSPARENT */
	--semi-transparent-bg-color: rgba(47, 50, 58, .8); 
	--primary-fg-color: rgba(255, 255, 255, 1); /* Texts Borders etc. */
	--secondary-fg-color: rgba(220, 220, 220, 1); /* Secondary Texts, Borders, Editable Panels etc. */
	--semi-transparent-fg-color: rgba(255, 255, 255, .3);
	--semi-transparent-fg-highlight-color: rgba(255, 255, 255, .4);
	--semi-transparent-fg-active-color: var(--secondary-fg-color);
	--annotation-preview-bg-color: rgba(100 ,100, 100, .2);
	--highlight-color: #D8D3AD; /* Highlighted Elements */
	--tooltip-bg-color: #D8D3AD; /* Tooltips */
	--video-background-color: #000;
}

.frametrail-body[data-frametrail-theme="dark"] .mainContainer:not([data-edit-mode="layout"]):not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]), .frametrail-body[data-frametrail-theme="dark"] .loadingScreen, .frametrail-body[data-frametrail-theme="dark"] .userLoginOverlay, .frametrail-body[data-frametrail-theme="dark"] .titlebar:not(.editActive), .themeItem[data-theme="dark"] {
	--primary-bg-color: rgba(0, 0, 0, 1);
	--secondary-bg-color: rgba(50, 50, 50, .6);
	--semi-transparent-bg-color: rgba(50, 50, 50, .8);
	--primary-fg-color: rgba(255, 255, 255, 1);
	--secondary-fg-color: rgba(210, 210, 210, 1);
	--semi-transparent-fg-color: rgba(255, 255, 255, .3);
	--semi-transparent-fg-highlight-color: rgba(255, 255, 255, .4);
	--semi-transparent-fg-active-color: var(--secondary-fg-color);
	--annotation-preview-bg-color: rgba(100 ,100, 100, .2);
	--highlight-color: #D8D3AD;
	--tooltip-bg-color: #D8D3AD;
	--video-background-color: #000;
}

.frametrail-body[data-frametrail-theme="bright"] .mainContainer:not([data-edit-mode="layout"]):not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]), .frametrail-body[data-frametrail-theme="bright"] .loadingScreen, .frametrail-body[data-frametrail-theme="bright"] .userLoginOverlay, .frametrail-body[data-frametrail-theme="bright"] .titlebar:not(.editActive), .themeItem[data-theme="bright"] {
	--primary-bg-color: rgba(255, 255, 255, 1);
	--secondary-bg-color: rgba(235, 235, 235, .6);
	--semi-transparent-bg-color: rgba(255, 255, 255, .8);
	--primary-fg-color: rgba(80, 80, 80, 1);
	--secondary-fg-color: rgba(100, 100, 100, 1);
	--semi-transparent-fg-color: rgba(80, 80, 80, .3);
	--semi-transparent-fg-highlight-color: rgba(80, 80, 80, .4);
	--semi-transparent-fg-active-color: var(--secondary-fg-color);
	--annotation-preview-bg-color: rgba(255 ,255, 255, .2);
	--highlight-color: #D8D3AD;
	--tooltip-bg-color: #D8D3AD;
	--video-background-color: var(--secondary-bg-color);
}

.frametrail-body[data-frametrail-theme="blue"] .mainContainer:not([data-edit-mode="layout"]):not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]), .frametrail-body[data-frametrail-theme="blue"] .loadingScreen, .frametrail-body[data-frametrail-theme="blue"] .userLoginOverlay, .frametrail-body[data-frametrail-theme="blue"] .titlebar:not(.editActive), .themeItem[data-theme="blue"] {
	--primary-bg-color: rgba(80, 93, 110, 1);
	--secondary-bg-color: rgba(107, 125, 148, .6);
	--semi-transparent-bg-color: rgba(44, 62, 80, .8);
	--primary-fg-color: rgba(238, 243, 249, 1);
	--secondary-fg-color: rgba(218, 222, 230, 1);
	--semi-transparent-fg-color: rgba(255, 255, 255, .3);
	--semi-transparent-fg-highlight-color: rgba(255, 255, 255, .4);
	--semi-transparent-fg-active-color: var(--secondary-fg-color);
	--annotation-preview-bg-color: rgba(100 ,100, 100, .2);
	--highlight-color: #D8D3AD;
	--tooltip-bg-color: #D8D3AD;
	--video-background-color: #000;
}

.frametrail-body[data-frametrail-theme="green"] .mainContainer:not([data-edit-mode="layout"]):not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]), .frametrail-body[data-frametrail-theme="green"] .loadingScreen, .frametrail-body[data-frametrail-theme="green"] .userLoginOverlay, .frametrail-body[data-frametrail-theme="green"] .titlebar:not(.editActive), .themeItem[data-theme="green"] {
	--primary-bg-color: rgba(22, 160, 133, 1);
	--secondary-bg-color: rgba(30, 139, 115, .6);
	--semi-transparent-bg-color: rgba(22, 160, 133, .8);
	--primary-fg-color: rgba(250, 255, 255, 1);
	--secondary-fg-color: rgba(227, 237, 234, 1);
	--semi-transparent-fg-color: rgba(255, 255, 255, .3);
	--semi-transparent-fg-highlight-color: rgba(255, 255, 255, .4);
	--semi-transparent-fg-active-color: var(--secondary-fg-color);
	--annotation-preview-bg-color: rgba(100 ,100, 100, .2);
	--highlight-color: #D8D3AD;
	--tooltip-bg-color: #D8D3AD;
	--video-background-color: #000;
}

.frametrail-body[data-frametrail-theme="orange"] .mainContainer:not([data-edit-mode="layout"]):not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]), .frametrail-body[data-frametrail-theme="orange"] .loadingScreen, .frametrail-body[data-frametrail-theme="orange"] .userLoginOverlay, .frametrail-body[data-frametrail-theme="orange"] .titlebar:not(.editActive), .themeItem[data-theme="orange"] {
	--primary-bg-color: rgba(255, 255, 255, 1);
	--secondary-bg-color: rgba(234, 225, 211, .6);
	--semi-transparent-bg-color: rgba(250, 250, 250, .8);
	--primary-fg-color: rgba(244, 107, 59, 1);
	--secondary-fg-color: rgba(125, 120, 120, 1);
	--semi-transparent-fg-color: rgba(125, 120, 120, .3);
	--semi-transparent-fg-highlight-color: rgba(125, 120, 120, .4);
	--semi-transparent-fg-active-color: var(--secondary-fg-color);
	--annotation-preview-bg-color: rgba(255, 255, 255, .9);
	--highlight-color: #D8D3AD;
	--tooltip-bg-color: #D8D3AD;
	--video-background-color: #000;
}

.frametrail-body[data-frametrail-theme="grey"] .mainContainer:not([data-edit-mode="layout"]):not([data-edit-mode="overlays"]):not([data-edit-mode="codesnippets"]):not([data-edit-mode="annotations"]), .frametrail-body[data-frametrail-theme="blue"] .loadingScreen, .frametrail-body[data-frametrail-theme="grey"] .userLoginOverlay, .frametrail-body[data-frametrail-theme="grey"] .titlebar:not(.editActive), .themeItem[data-theme="grey"] {
	--primary-bg-color: rgba(210, 210, 210, 1);
	--secondary-bg-color: rgba(240, 240, 240, .6);
	--semi-transparent-bg-color: rgba(210, 210, 210, .8);
	--primary-fg-color: rgba(80, 80, 80, 1);
	--secondary-fg-color: rgba(110, 110, 110, 1);
	--semi-transparent-fg-color: rgba(50, 50, 50, .3);
	--semi-transparent-fg-highlight-color: rgba(50,50,50, .4);
	--semi-transparent-fg-active-color: var(--secondary-fg-color);
	--annotation-preview-bg-color: rgba(100 ,100, 100, .2);
	--highlight-color: #D8D3AD;
	--tooltip-bg-color: #D8D3AD;
	--video-background-color: #000;
}