/*
Origin: SNC 20190116

*/

/* Global CSS vars */
:root {
	--TC_Footerheight: 1.75em;

	/* from style guide */
	--TC_Putty: #CEDFD7;
	--TC_Rust: #EA6852;
	--TC_LBlue: #005677;
	--TC_DBlue: #262947;

	/* variations */
	--TC_LPutty: #e0ebe6; /* this is putty converted to hsl(152, 21%, 84%) and then luminosity raised to 90% */
	--TC_XLPutty: #f0f5f2; /* this is putty converted to hsl(152, 21%, 84%) and then luminosity raised to 95% */
	--TC_LRust: 	#f09584; /* this is rust converted to hsl(9, 78%, 62%) and then luminosity raised to 73% */

	/* better look for indicator icon colors */
	--TC_icon_green: limegreen;
	--TC_icon_red: orangered;

	--TC_accentPink: hotpink;
	--TC_accentOrange: orangered;
	--TC_accentPurple: #4205f4;
	
	--TC_bg: var(--TC_Putty);
	--TC_fg: var(--TC_DBlue);
	--TC_label_fg: var(--TC_LBlue);
	--TC_accent: var(--TC_Rust);
	--TC_light_accent: var(--TC_LRust);

	/* */
	--TC_box_bg: var(--TC_LPutty);
	--TC_chart_bg: var(--TC_LPutty);

	--TC_Sans: 'Montserrat', sans-serif;
	--TC_Serif: 'Cormorant Garamond', serif;

	--TC_dflt_textcol: black;
	--TC_emph_textcol: blue;

	--TC_radius: 3px;
	--TC_thinline: 1px;
	--TC_medline: 2px;
	--TC_thickline: 3px;

	/* left-right split */
	/* --TC_controls_width: 35%; */
	--TC_results_width: 65%;

	/* */
	--TC_button_pad_h: 1.0em;
	--TC_button_pad_v: 0.25em;

	/* adaptation of JQUI slider*/
	--TC_slider_bar_thickness: 0.5em;
	--TC_slider_bar_ends: 2px;
	--TC_slider_bar_radius: calc(2 * var(--TC_slider_bar_thickness));

	--TC_slider_handle_ht: 1.6em;
	--TC_slider_horiz_handle_wd: 6em; /* fixed bc need to calculate a margin L/R at inception */
	--TC_slider_vert_handle_wd: 2em; /* fixed bc need to calculate a margin L/R at inception */
	--TC_slider_handle_radius: 4px;
	--TC_slider_handle_text_pad_h: 0.3em;

}

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: var(--TC_Sans); background-color: var(--TC_bg); color: var(--TC_fg); }

input, textarea, .mimic_input
	{
	border-width: var(--TC_thinline) !important;
	border-style: inset !important;
	padding: 0.1em !important;
	background: var(--TC_box_bg) !important;

	/* help align widths of select among input fields */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
         box-sizing: border-box;	}

.readonly_input /* like input, but disabled, so remove inset */
	{
	border-width: 0px !important;
	border-style: none !important;
	padding: 0.1em !important;
	background: var(--TC_bg) !important;
	}

select 	
	{
	border-width: 0px 1px 1px 0px;
	border-style: outset;
	padding: 0.1em;
	background: var(--TC_box_bg);
	}

button { 
	color: var(--TC_label_fg); 
	background: var(--TC_box_bg);
	border: var(--TC_medline) solid var(--TC_light_accent);
	border-radius: var(--TC_radius); 
	padding: var(--TC_button_pad_v) var(--TC_button_pad_h); 
	}
button:disabled {
	color: grey;
	opacity: 40%;
}

button.TC_major_button {
	color: var(--TC_LPutty); 
	background: var(--TC_Rust);
}

/* whhg scalable icons */
/* [class^="icon-"], [class*=" icon-"] { padding: .15em; color: var(--TC_accent); border: solid var(--TC_medline) transparent; } */
[class^="icon-"], [class*=" icon-"] { color: var(--TC_accent); }
[class^="icon-"]:hover, [class*=" icon-"]:hover { background-color: var(--TC_light_accent); cursor: pointer; color: white; }
.hover-inset:hover { border: inset var(--TC_medline) var(--TC_light_accent); cursor: grabbing; opacity: .5;  }
.hover-nothing { cursor: default; color: white; }
.hover-nothing:hover { cursor: default; background-color: inherit; }


/* sticky footer pushed to bottom */
/* adapting https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?rq=1 */
.unpushed_wrapper
	{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto calc(-1 * var(--TC_Footerheight)); /* subtract height of footer */
	}

.pushed_footer, .footer_pusher 
	{
	height: var(--TC_Footerheight);
	}


//.page_horizontal_strip_flex_content	{ margin-left: 0.6em; margin-right: 0.6em; position: relative; display: flex; justify-content: space-between; }
.page_horizontal_strip_flex_content	{ margin-left: 0.6em; margin-right: 0.6em; position: relative; display: flex; }
.page_horizontal_strip_divider 	{ height: var(--TC_thinline); background-color: var(--TC_accent); }
.page_tab_group	{ width: 100%; }

/* for confirm and alert replacements */
.JQUI_modal_replacement {  }
.JQUI_modal_replacement_content { margin: 2em 2em 1em 2em; color: var(--TC_label_fg); font-size: medium; font-weight: bold; }

.grouped_controls { color: var(--TC_label_fg); border: var(--TC_thinline) solid var(--TC_label_fg); border-radius: var(--TC_radius);}
.help_button { padding: 0; margin: 0; border-top-left-radius: 1.5em; border-bottom-right-radius: 1.5em; }
.help_dialog {
	padding: .4em 1em .4em 20px;
	text-decoration: none;
	position: relative;
	font-family: var(--TC_Serif) !important;
	font-size: larger;
	font-weight: bold;
}
.help_dialog li:not(:last-child) { margin-bottom: .6em; }

.help_dialog span.ui-icon {
	margin: 0 5px 0 0;
	// position: absolute;
	left: .2em;
	top: 50%;
	margin-top: -8px;
}

.hot-icons { background-image: url(/TRBS/img/ui-icons_ff0084_256x240.png) !important; }

.controls_pane	{
	margin-right: 1em;
/*
	SNC commenting 20210405 -- REFLOW/RESPONSIVE-- less specificity has better reflow in horizontal constraints  
	width: var(--TC_controls_width);
	min-width: 10em;
*/
	height: 100%;
}

.results_pane	{
	max-width: var(--TC_results_width);
}
.results_pane_full_width	{
	min-width: var(--TC_results_width); // set min-width only to reserve space for a chart, for example
}

.fieldset_table 	{ width: 100% }
.fieldset_table input	{ width: 100% }
.fieldset_left_label 	{ color: var(--TC_label_fg); padding-left: 0.5em; margin-right: 1.0em; text-align: right; min-width: 1em;}
.fieldset_button_label 	{ display: inline-block; color: var(--TC_label_fg); }

.field_width_xskinny	{ width: 2em !important; }
.field_width_skinny	{ width: 4em !important; }
.field_width_normal	{ width: 6em !important; }
.field_width_fat	{ width: 12em !important; }

.TC_editor_wide_field	{ width: 35em; }

.numeric_input:disabled { background:transparent; border: none; }

.TC_outMM 	{ min-width: 9em;  background:transparent; border: none; text-align: right; padding-right: 1em; }

.TC_dfltResultValue	{
	color: var(--TC_dflt_textcol);
}

.TC_emphResultValue	{
	color: var(--TC_emph_textcol);
	font-size: larger;
}


/* ***** TC_slider family adapts JQUI .slider */

.TC_slider.TC_slider	/* double up on class to raise CSS specificity above .ui-slider-handle */
	{
	border: 1px solid var(--TC_fg);
	border-radius: var(--TC_slider_bar_radius);
	}

.TC_slider_text_handle.TC_slider_text_handle	/* double up on class to raise CSS specificity above .ui-slider-handle */
	{
	font-size: small;
	height: var(--TC_slider_handle_ht);
	margin-top: calc(-0.5 * var(--TC_slider_handle_ht));
	text-align: center;
	line-height: var(--TC_slider_handle_ht);
	color: var(--TC_label_fg); 
	background: var(--TC_box_bg);
	border: 1px solid var(--TC_label_fg);
	border-radius: var(--TC_slider_handle_radius);
	}


/* .TC_slider_horizontal.TC_slider_horizontal */	/* double up on class to raise CSS specificity above .ui-slider-handle */
.TC_slider_horizontal.TC_slider_horizontal	/* double up on class to raise CSS specificity above .ui-slider-handle */
	{
	height: var(--TC_slider_bar_thickness);
	margin-left: calc(0.5 * var(--TC_slider_horiz_handle_wd));
	margin-right: calc(0.5 * var(--TC_slider_horiz_handle_wd));
	margin-top: calc(0.5 * var(--TC_slider_handle_ht));
	margin-bottom: calc(0.5 * var(--TC_slider_handle_ht));
	border-left: var(--TC_slider_bar_ends) solid var(--TC_fg);
	border-right: var(--TC_slider_bar_ends) solid var(--TC_fg);
	}

/* .TC_slider_horizontal > .TC_slider_text_handle */
.TC_slider_horizontal .TC_slider_text_handle
	{
	top: 50%;
	width: var(--TC_slider_horiz_handle_wd);
	margin-left: calc(-0.5 * var(--TC_slider_horiz_handle_wd));
	}

.TC_slider_vertical.TC_slider_vertical	/* double up on class to raise CSS specificity above .ui-slider-handle */
	{
	width: var(--TC_slider_bar_thickness);
	margin: auto;
	margin-top: calc(0.5 * var(--TC_slider_handle_ht));
	margin-bottom: calc(0.5 * var(--TC_slider_handle_ht));
	border-top: var(--TC_slider_bar_ends) solid var(--TC_fg);
	border-bottom: var(--TC_slider_bar_ends) solid var(--TC_fg);
	}

.TC_slider_vertical > .TC_slider_text_handle
	{
	width: var(--TC_slider_vert_handle_wd);
	padding-left: var(--TC_slider_handle_text_pad_h);
	padding-right: var(--TC_slider_handle_text_pad_h);
	margin-left: calc( (-0.5 * var(--TC_slider_vert_handle_wd)) + ( 0.5 * var(--TC_slider_bar_thickness) ) );
	}

table.TC_GCbb1 { border-collapse: collapse; padding: 0px; }	/* BlackBorder1px */
table.TC_GCbb1 th { border-collapse: collapse; border: 1px solid black; padding: 0.2em .35em; background: var(--TC_light_accent); font-size: small; }
table.TC_GCbb1 td { border: 1px solid black; padding: 0.1em .25em; font-size: small; }
.TC_GCbbSpanRight { border-right: 1px solid transparent !important; }
table.TC_GCbbFatTable th { font-size: large !important; }
table.TC_GCbbFatTable td { font-size: large !important; }
.TC_GCbbSpanningHeader { font-size: large !important; color: white !important; background: var(--TC_LBlue) !important; }

/* this requires relative position div of parent */
.TC_div_spinwait	{ position: absolute !important; height: 100%; width: 100%; background: url(/trbs/img/spinner32.gif) no-repeat center center var(--TC_bg); z-index: 10000; }

.TC_dimmer		{ background-color: var(--TC_fg); opacity: 0.45; } /* yes, _fg - it just looks nice */
.TC_popover_container	{ display: flex; flex-direction: column; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 80%; max-width: 80%; background-color: var(--TC_bg); border: 3px solid var(--TC_light_accent); border-radius: var(--TC_radius); box-shadow:0px 0px 7px 1px #FFFFFF, 7px 7px 10px var(--TC_medline) #555555; -moz-box-shadow:0px 0px 7px 1px #FFFFFF, 7px 7px 10px var(--TC_medline) #555555; -webkit-box-shadow:0px 0px 7px 1px #FFFFFF, 7px 7px 10px var(--TC_medline) #555555; }
.TC_popover		{ display:none; }

.TC_popover_header_row	{ display: flex; flex-direction: row; justify-content: flex-end; margin-right: 1.0em; }
.TC_popover_close		{ margin-left: auto; font-size:8pt; }

.TC_popover_content	{ padding:8px 16px; overflow: auto; }

.TC_popover_footer_row	{ display: flex; flex-direction: row; justify-content: flex-end; margin-right: 1.0em; margin-top: 0.5em; }
.TC_popover_footer_row_button	{ margin-left: 0.5em; }
.TC_popover_footer_row_msg	{ color: var(--TC_accent); font-weight: bold; margin-left: 0.5em; padding: var(--TC_button_pad_v) var(--TC_button_pad_h); }

.TC_look_changed	{ background-color: linen !important }
.TC_look_busy		{ background: #BBBBBB url(/trbs/img/loadingbar_grey.gif) no-repeat top right }

table.TC_GCbb1 { border-collapse: collapse; padding: 0px; }	/* BlackBorder1px */
table.TC_GCbb1 th { border-collapse: collapse; border: 1px solid black; padding: 0.2em .35em; background: var(--TC_light_accent); font-size: small; }
table.TC_GCbb1 td { border: 1px solid black; padding: 0.1em .25em; font-size: small; }

.TC_menu		{ width: max-content; z-index: 1000; position: absolute; transform: translateX(-100%); font-size: normal; }
.TC_menu, .TC_menu ul		{ box-shadow: 0.5em 0.5em 0.8em var(--TC_accent); border: var(--TC_medline) solid var(--TC_light_accent); border-radius: var(--TC_radius); }
li.TC_menu_label	{ font-weight: bolder; border-bottom: var(--TC_thinline) solid black; color: var(--TC_label_fg); background: var(--TC_light_accent); }

/* SEE handy ref: http://keith-wood.name/uiTabs.html */
.tab_group { 
	background: transparent; 
	border: none; 
} 
.tab_group .ui-widget-header { 
	background: transparent; 
	border: none; 
	border-bottom: 1px solid #c0c0c0; 
	-moz-border-radius: 0px; 
	-webkit-border-radius: 0px; 
	border-radius: 0px; 
} 
.tab_group .ui-tabs-nav .ui-state-default { 
	background: transparent; 
	border: none; 
} 
.tab_group .ui-tabs-nav .ui-state-active { 
	background: transparent url(/TRBS/img/uiTabsArrow.png) no-repeat bottom center; 
	border: none; 
} 
.tab_group .ui-tabs-nav .ui-state-focus a { 
	outline: none; // jquery ui glitch -- otherwise see blue outline on focus 
} 
.tab_group .ui-tabs-nav .ui-state-default a { 
	color: var(--TC_label_fg); 
	font-weight: normal;
	border: none; 
} 
.tab_group .ui-tabs-nav .ui-state-active a { 
	color: var(--TC_label_fg); 
	font-weight: bold; 
	border: none; 
}

/* jquery ui overrides */
//.ui-button .ui-icon
//{
//   background-image: url(/TRBS/img/ui-icons_ff0084_256x240.png);
//}

.ui-spinner-input
	{
	margin-left: 0;
	margin-top: 0;
	margin-right: 14px;
	}

.ui-spinner-button
	{
	font-size: 0.5em !important; // not sure if this is a bug in jq ui or induced by these overrides
	}

.ui-widget 
	{
	font-family: var(--TC_Sans);
	color: var(--TC_fg);
	background: var(--TC_box_bg);
//////	font-size: 80% !important;
	font-size: smaller;
	}

.ui-tooltip
	{
	background: var(--TC_box_bg);
	border: var(--TC_medline) solid grey;
	padding: 5px 10px;
	border-radius: var(--TC_radius);
	box-shadow: 0.5em 0.5em 0.8em var(--TC_accent);
	white-space: pre-line; // gets newline \nl accepted into title / tooltip
	}

.ui-dialog
	{
	box-shadow: 0.5em 0.5em 0.8em var(--TC_accent);
	}

.ui-accordion-header
	{
	color: var(--TC_fg) !important;
	background: var(--TC_box_bg) !important;
	}	

.ui-widget button
	{
	font-size: revert;	// otherwise e.g. Go buttons too big
	}