/* CUSTOM PROPERTIES */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

:root {

	/* ROLES */

	--color_Paper: var(--color_Grayscale_10);
	--color_Light: var(--color_Primary_10);
	--color_Highlight: var(--color_Primary_20);
	--color_Overlay: var(--color_Primary_30);
	--color_Accent: var(--color_Primary_40);
	--color_Marker: var(--color_Primary_50);
	--color_Solid: var(--color_Primary_60);
	--color_SolidText: var(--color_Primary_10);
	--color_Emphasis: var(--color_Primary_70);
	--color_Contrast: var(--color_Primary_80);
	--color_Dark: var(--color_Primary_90);
	--color_Ink: var(--color_Primary_100);
	--color_Error: var(--color_Red_60);
	--color_ErrorText: var(--color_Red_10);
	--color_Warning: var(--color_Yellow_60);
	--color_WarningText: var(--color_Yellow_10);
	--color_Link: var(--color_Primary_10);
	--color_LinkText: var(--color_Primary_60);
	--color_LinkHover: var(--color_Primary_60);
	--color_LinkHoverText: var(--color_Primary_10);

	/* SHADES */

	--color_Primary_10: var(--color_Blue_10);
	--color_Primary_20: var(--color_Blue_20);
	--color_Primary_30: var(--color_Blue_30);
	--color_Primary_40: var(--color_Blue_40);
	--color_Primary_50: var(--color_Blue_50);
	--color_Primary_60: var(--color_Blue_60);
	--color_Primary_70: var(--color_Blue_70);
	--color_Primary_80: var(--color_Blue_80);
	--color_Primary_90: var(--color_Blue_90);
	--color_Primary_100: var(--color_Blue_100);

	--color_Secondary_10: var(--color_Orange_10);
	--color_Secondary_20: var(--color_Orange_20);
	--color_Secondary_30: var(--color_Orange_30);
	--color_Secondary_40: var(--color_Orange_40);
	--color_Secondary_50: var(--color_Orange_50);
	--color_Secondary_60: var(--color_Orange_60);
	--color_Secondary_70: var(--color_Orange_70);
	--color_Secondary_80: var(--color_Orange_80);
	--color_Secondary_90: var(--color_Orange_90);
	--color_Secondary_100: var(--color_Orange_100);

	--color_Tertiary_10: var(--color_Green_10);
	--color_Tertiary_20: var(--color_Green_20);
	--color_Tertiary_30: var(--color_Green_30);
	--color_Tertiary_40: var(--color_Green_40);
	--color_Tertiary_50: var(--color_Green_50);
	--color_Tertiary_60: var(--color_Green_60);
	--color_Tertiary_70: var(--color_Green_70);
	--color_Tertiary_80: var(--color_Green_80);
	--color_Tertiary_90: var(--color_Green_90);
	--color_Tertiary_100: var(--color_Green_100);

	--color_Grayscale_10: #ffffff;
	--color_Grayscale_20: #f1f1f1;
	--color_Grayscale_30: #dedede;
	--color_Grayscale_40: #b7b7b7;
	--color_Grayscale_50: #8f8f8f;
	--color_Grayscale_60: #727272;
	--color_Grayscale_70: #555555;
	--color_Grayscale_80: #2d2d2d;
	--color_Grayscale_90: #1a1a1a;
	--color_Grayscale_100: #050505;

	--color_Red_10: #fcf3f3;
	--color_Red_20: #f9e2e2;
	--color_Red_30: #f2c2c2;
	--color_Red_40: #f4abab;
	--color_Red_50: #ea7a7a;
	--color_Red_60: #d94a4a;
	--color_Red_70: #f44242;
	--color_Red_80: #c62a2a;
	--color_Red_90: #aa1313;
	--color_Red_100: #720707;

	--color_Orange_10: #fef2ec;
	--color_Orange_20: #fde5da;
	--color_Orange_30: #fcccb4;
	--color_Orange_40: #fab28e;
	--color_Orange_50: #f9a57b;
	--color_Orange_60: #f77f43;
	--color_Orange_70: #e86015;
	--color_Orange_80: #a85d33;
	--color_Orange_90: #70360f;
	--color_Orange_100: #4c2109;

	--color_Yellow_10: #fff8e8;
	--color_Yellow_20: #fcedd0;
	--color_Yellow_30: #f9e1b7;
	--color_Yellow_40: #f7d092;
	--color_Yellow_50: #edb769;
	--color_Yellow_60: #e9a646;
	--color_Yellow_70: #da8b1a;
	--color_Yellow_80: #aa7631;
	--color_Yellow_90: #71480e;
	--color_Yellow_100: #4e3209;

	--color_Green_10: #e4f7e4;
	--color_Green_20: #d1edd1;
	--color_Green_30: #b7ecb7;
	--color_Green_40: #98e498;
	--color_Green_50: #79dc79;
	--color_Green_60: #0ecd00;
	--color_Green_70: #02a802;
	--color_Green_80: #6aad3e;
	--color_Green_90: #196619;
	--color_Green_100: #104c10;

	--color_Blue_10: #ebf7ff;				/* H:204 S:8   B:100 */
	--color_Blue_20: #d8efff;				/* H:205 S:15  B:100 */
	--color_Blue_30: #b1dfff;				/* H:205 S:31  B:100 */
	--color_Blue_40: #62beff;				/* H:205 S:62  B:100 */
	--color_Blue_50: #0096ff;				/* H:205 S:100 B:100 */
	--color_Blue_60: #0068ff;				/* H:216 S:100 B:100 */
	--color_Blue_70: #0019ff;				/* H:234 S:100 B:100 */
	--color_Blue_80: #0068b1;				/* H:205 S:100 B:69 */
	--color_Blue_90: #033f60;				/* H:201 S:97  B:38 */
	--color_Blue_100: #092035;				/* H:209 S:83  B:21 */

	--color_Purple_10: #eaeafb;
	--color_Purple_20: #dadaf8;
	--color_Purple_30: #c9c9f5;
	--color_Purple_40: #a8a8ef;
	--color_Purple_50: #9797ec;
	--color_Purple_60: #7474d6;
	--color_Purple_70: #6345dd;
	--color_Purple_80: #6863ad;
	--color_Purple_90: #40366b;
	--color_Purple_100: #2b054c;

	--color_Pink_10: #fdf4fa;
	--color_Pink_20: #f9e4f3;
	--color_Pink_30: #f6d4ec;
	--color_Pink_40: #f1b4e8;
	--color_Pink_50: #ed8ee8;
	--color_Pink_60: #d643ad;
	--color_Pink_70: #e507a6;
	--color_Pink_80: #a32b87;
	--color_Pink_90: #7c1158;
	--color_Pink_100: #4f043a;

	--link-color: var(--color_Primary_60);
	--link-background: var(--color_Primary_10);
	--link-hover-background: var(--color_Primary_60);
	--link-hover-color: var(--color_Primary_10);

	/* FONTS */

	--typeface_Default: "Inter", sans-serif;
	--typeface_Body: "Inter", sans-serif;
	--typeface_Heading: "Titillium Web", sans-serif;
	--typeface_Code: "Roboto Mono", monospace;
}

/* STANDARD COMPONENTS */

.component_WindowFrame {
	border: 1px solid #e0e0e0;
	box-shadow: 0 0 48px 1px rgb(0, 0, 0, 0.2);
	border-radius: 4px;
}

.component_WindowTitle {
	padding: 48px 32px 24px 32px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;

	text-align: center;
}

.component_DialogTitle {
	margin: 0;
	padding: 12px 24px 12px 24px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;

	font-family: var(--typeface_Heading);
	font-size: 14pt;
	text-align: left;
	line-height: 32px;
}

.component_WindowError {
	padding: 8px 8px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;

	font-size: 12pt;
	font-weight: bold;
	text-align: center;
	color: #f7fcff;
	background-color: #ff6f00;
}

.component_DefaultButton {
	padding: 8px 24px;

	background-color: var(--color_Solid);
	border-radius: 3px;
	border: 1px solid #667480;
	font-size: 12pt;
	color: var(--color_SolidText);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.component_DefaultButton:hover {
	box-shadow: inset 0 0 8px 2px var(--color_SolidText);
	background-color: #1a9cff;
}

.component_Button {
	display: flex;	/* Needed to center text vertically */
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;

	padding: 8px 24px;

	background-color: #f7fcff;
	border-radius: 3px;
	border: 1px solid #667480;
	font-size: 12pt;
	color: #292f33;
	text-decoration: none;
	cursor: pointer;

	position: relative;	/* Needed for the pseudo element below. */
}

.component_Button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	box-shadow: inset 0 0 8px 2px #ffffff;
	background-color: rgb(255,255,255,0.1);
	opacity: 0;
	transition: opacity 0.1s;
}

.component_Button:hover::after {
	opacity: 0.9;
}

.component_Button_Disabled {
	display: flex;	/* Needed to center text vertically */
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;

	padding: 8px 24px;

	background-color: #f7fcff;
	border-radius: 3px;
	border: 1px solid #667480;
	font-size: 12pt;
	color: #292f33;
	text-decoration: none;
	cursor: pointer;

	position: relative;	/* Needed for the pseudo element below. */
}

.component_Button_Disabled::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background-color: rgb(128,128,128,0.7);
	opacity: 1;
}

/*

.component_Button:hover {
	background-color: #b2deff;
}
*/

.component_Checkbox {
	background-color: var(--color_Paper);
	border-radius: 3px;
	border: 1px solid #667480;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
	color: var(--color_Ink);
}

.component_CheckboxLeft {
	margin: 0 8px 0 0;
}

.component_CheckboxRight {
	margin: 0 0 0 8px;
}

.component_CheckboxLabel {
	display: inline-block;
}

.component_Link {
	display: block;
	padding: 2px 8px;

	font-size: 12pt;
	font-weight: bold;
	color: var(--color_Solid);
	text-decoration: none;
	cursor: pointer;
}

.component_Link:hover {
	background-color: var(--color_Paper);
	border-radius: 3px;
}

.component_PopupMenu {
	border-radius: 3px;
	border: 1px solid var(--color_Faded);
	box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 36px 0px, rgba(247, 252, 255, 0.5) 0px 0px 0px 1px;
}

.component_PopupMenuItem {
}

.component_PopupMenuItem:hover {
	color: var(--color_SolidText);
	background-color: var(--color_Solid);
}

.component_PopupMenuLine {
	border: 0;
	border-top: 1px solid #667480;
}

.component_PopupMenuText {
	color: #8fa2b3;
}

.text_WindowTitle {
	font-family: var(--typeface_Heading);
	font-size: 24pt;
}

.text_WindowSubTitle {
	font-size: 12pt;
}

/* TABS --------------------------------------------------------------------- */

.component_SelectedTopTab {
	padding: 4px 16px 2px 16px;

	font-size: 12pt;
	font-weight: bold;
	color: var(--color_Solid);
	text-align: center;

	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	background: var(--color_Light);
	border-bottom: 4px solid var(--color_Solid);

	/* This is needed to align the text to the bottom */

	display: flex;
	align-items: flex-end;
}

.component_TopTab {
	padding: 4px 16px 2px 16px;

	font-size: 12pt;
	font-weight: bold;
	color: var(--color_Grayscale_60);

	border-bottom: 1px solid #c0c0c0;
	margin-bottom: 3px;

	/* This is needed to align the text to the bottom */

	display: flex;
	align-items: flex-end;
}

.component_TopTab:hover {
	color: var(--color_Solid);
}

.component_HorzFill {
	border-bottom: 1px solid var(--color_Grayscale_40);
	margin-bottom: 3px;
}

/* BUTTON ------------------------------------------------------------------- */

.button_default {
	margin: 0 12px 0 0;
	padding: 2px 12px;

	font-size: 11pt;
	font-weight: bold;
	color: var(--color_Accent);
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
	text-align: center;

	background-color: var(--color_Dark);
	border: 1px solid var(--color_Ink);
	border-radius: 3px;

	text-decoration: none;
	cursor: pointer;
}

.button_default:hover {
	color: var(--color_Accent);
	background-color: var(--color_Dark);
}

/* BORDERS ------------------------------------------------------------------ */

/* boxed */

.border_boxed_left {
	padding-left: 24px;
	border-left: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_boxed_right {
	padding-right: 24px;
	border-right: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_boxed_top {
	padding-top: 24px;
	border-top: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_boxed_bottom {
	padding-bottom: 24px;
	border-bottom: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

/* narrow */

.border_narrow_left {
	padding-left: 8px;
}

.border_narrow_right {
	padding-right: 8px;
}

.border_narrow_top {
	padding-top: 8px;
}

.border_narrow_bottom {
	padding-bottom: 8px;
}

/* page */

.border_page_left {
	max-width: 8.5in;
	margin-left: auto;
	margin-right: auto;

	padding-left: 1in;
	border-left: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_page_right {
	padding-right: 1in;
	border-right: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_page_top {
	height: 100%;
	margin-top: 20px;

	padding-top: 1in;
	border-top: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_page_bottom {
	margin-bottom: 20px;

	padding-bottom: 1in;
	border-bottom: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

/* raised */

.border_raised_left {
	margin-left: 8px;
	padding-left: 24px;
	border-left: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_raised_right {
	margin-right: 8px;
	padding-right: 24px;
	border-right: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_raised_top {
	margin-top: 8px;
	padding-top: 24px;
	border-top: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

.border_raised_bottom {
	margin-bottom: 8px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e0e0e0;
	box-shadow: 0 0 20px 1px rgb(0, 0, 0, 0.1);
}

/* selected */

.border_selected_left {
	padding-left: 7px;
	border-left: 2px solid #003a66;
}

.border_selected_right {
	padding-right: 7px;
	border-right: 2px solid #003a66;
}

.border_selected_top {
	padding-top: 7px;
	border-top: 2px solid #003a66;
}

.border_selected_bottom {
	padding-bottom: 7px;
	border-bottom: 2px solid #003a66;
}

/* thinLine */

.border_thinLine_left {
	padding-left: 8px;
	border-left: 1px solid #e0e0e0;
}

.border_thinLine_right {
	padding-right: 8px;
	border-right: 1px solid #e0e0e0;
}

.border_thinLine_top {
	padding-top: 8px;
	border-top: 1px solid #e0e0e0;
}

.border_thinLine_bottom {
	padding-bottom: 8px;
	border-bottom: 1px solid #e0e0e0;
}

/* thinLineWide */

.border_thinLineWide_left {
	padding-left: 24px;
	border-left: 1px solid #e0e0e0;
}

.border_thinLineWide_right {
	padding-right: 24px;
	border-right: 1px solid #e0e0e0;
}

.border_thinLineWide_top {
	padding-top: 24px;
	border-top: 1px solid #e0e0e0;
}

.border_thinLineWide_bottom {
	padding-bottom: 24px;
	border-bottom: 1px solid #e0e0e0;
}

/* wide */

.border_wide_left {
	padding-left: 24px;
}

.border_wide_right {
	padding-right: 24px;
}

.border_wide_top {
	padding-top: 24px;
}

.border_wide_bottom {
	padding-bottom: 24px;
}

/* CONTROL BASICS ----------------------------------------------------------- */

.control_content {
}

.background_TheGrid {
	background: linear-gradient(#a1a4a6, #ebeff2, #a1a4a6);
}

/* TEXT --------------------------------------------------------------------- */

.text_dial {
	color: #000000;
	font-size: 24pt;
}

.text_label {
	color: #808080;
	font-size: 10pt;
}