/** Grid-related variables. **/
/* NOTE: Using Grid-related variables is difficult for two reasons:
 * - one could use var(), but it does not (and will not) work in media queries,
 * - one could use env(), but most of browsers do not support it.
 * Thus, hardcoding custom grid variables into a local Bootstrap instance is the only option for now.
 */
/*
:root{
	//Bootstrap grid brekapoints.
	--col-sm_min-width: 768px;
	--col-md_min-width: 992px;
	--col-lg_min-width: 1200px;
	//Bootstrap container widths for respective breakpoints.
	//Typically they are about 0.975 of the breakpoints.
	--container-sm_width: 750px;
	--container-md_width: 970px;
	--container-lg_width: 1170px;
}
*/

/** Layout-related variables. **/
:root{
	--menu_height: 50px;	/* Do not set less than 50px. */
	--header_height: 540px;
	--footer_height: 400px;
	--page_min-width: 320px;
	--page_max-width: 2560px;
	--section_margin_tb: 20px;	/* Top Bottom */
	--container_max-width: 1800px;
}
@media (max-width: 767px)
{
	:root{
		--header_height: 70vw;
	}
}

/** Font-related variables. **/
:root{
	--page_font-size: 14px;
	--page_line-height: 1.42857143;	/* NOTE: Not applied to the bootstrap CSS. */
}

/** Appearance-related variables. **/
:root{
	--page_background-color: #fff; /* rgba(255, 255, 255, 1.0) */
	--page_color: #414141;
	--page-a_color: rgba(150, 80, 91, 1.0);
	--page-a-hover_color: rgba(50, 67, 89, 1.0);
	--page-a-disabled_color: #b2b1b1;

	--menu_background-color: var(--page_background-color);
	--menu_color: #1a1a1a;
	--menu_box-shadow: 0px 0px 4px 0px #6e6e6e;

	--header_color: #000;
	--footer_background-color: #000;
	--footer_color: #fff;
}

/** Button-related variables. **/
:root{
	--button_color: var(--page_background-color);
	--button_background-color: var(--page-a_color);
	--button-hover_background-color: var(--page-a-hover_color);
	--button-disabled_background-color: var(--page-a-disabled_color);
}

/** Table-related variables. **/
:root{
	--table_font-size: 12px;
	--table_color: #000;
	--table-a_color: var(--page-a_color);
	--table-a-hover_color: var(--table-a_color);
	--table-a-disabled_color: var(--page-a-disabled_color);

	--table_background-color: var(--page_background-color);
	--table-border_color: var(--page_background-color);

	--table-thead-tr_background-color: var(--table_background-color);
	--table-thead-th_color: var(--button_color);
	--table-thead-th_background-color_odd: var(--button_background-color);
	--table-thead-th_background-color_even: var(--button-hover_background-color);
	--table-thead-td_background-color_odd: rgba(150, 80, 91, 0.55);
	--table-thead-td_background-color_even: rgba(50, 67, 89, 0.55);

	--table-tbody-tr_background-color: #f2f2f2;
	--table-tbody-th_background-color_odd: var(--table-thead-td_background-color_odd);
	--table-tbody-th_background-color_even: var(--table-thead-td_background-color_even);
	--table-tbody-td_background-color_odd: rgba(150, 80, 91, 0.20);
	--table-tbody-td_background-color_even: rgba(50, 67, 89, 0.20);

	--table-tfoot-tr_background-color: var(--table-tbody-tr_background-color);
}

/** Form-related variables. **/
:root{
	--form-disabled_color: rgba(0, 0, 0, 0.2);
}