/* ----> BUTTONS */
/* ------------------- */

/* small button should use a 16px icon */
/* <button class="smallButton"><img src="assets/images/semkhor/icons16/check.png" border=0 align="absmiddle"> Save</button> */
.smallButton {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.35em 0.7em;
	border: 1px solid #c5cdd6;
	border-radius: 4px;
	background: #f4f6f8;
	color: #243447;
	overflow: visible;
	cursor: pointer;
}
.smallButton:hover {
	background: #e8edf2;
	border-color: #aeb8c4;
}
.smallButton:disabled {
	opacity: 0.55;
	cursor: default;
}
.selectedButton {
	border: 1px solid #2154DE;
	padding: 2px;
	border-radius: 4px;
	cursor: auto;
}
.smallButton IMG.monoButton { display: none; }

/* large button should use a 24px icon */
/* <button class="largeButton"><img src="assets/images/semkhor/icons24/check.png" border=0 align="absmiddle"> Save</button> */
.largeButton {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.5em 0.9em;
	width: auto;
	border: 1px solid #2b6cb0;
	border-radius: 5px;
	background: #2f7dcc;
	color: #fff;
	overflow: visible;
	cursor: pointer;
}
.largeButton:hover {
	background: #2769ad;
	border-color: #245f9c;
}
.largeButton:disabled {
	opacity: 0.55;
	cursor: default;
}
.largeButton IMG { margin-right: 5px; vertical-align: middle; }

input[type=submit],
input[type=reset],
input[type=button] {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.5em 1.1em;
	border: 1px solid #2b6cb0;
	border-radius: 5px;
	background: #2f7dcc;
	color: #fff;
	cursor: pointer;
}
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover {
	background: #2769ad;
	border-color: #245f9c;
}
input[type=submit]:disabled,
input[type=reset]:disabled,
input[type=button]:disabled {
	opacity: 0.55;
	cursor: default;
}
input[type=submit]:focus-visible,
input[type=reset]:focus-visible,
input[type=button]:focus-visible,
.smallButton:focus-visible,
.largeButton:focus-visible {
	outline: 2px solid #4697e4;
	outline-offset: 2px;
}


/* -----> SYSTEM MESSAGES */
/* ------------------------- */
.message_success,
.message_warning,
.message_info,
.message_error,
div.warning {
	border: 1px solid #c5cdd6;
	border-radius: 5px;
	padding: 0.65em 0.85em 0.65em 0.95em;
	margin: 0 0 1em 0;
	border-left-width: 4px;
}
.message_success {
	background-color: #e8f8e8;
	border-color: #9fd49f;
	border-left-color: #2f9e44;
}
.message_warning,
.message_info,
div.warning {
	background-color: #fff8dc;
	border-color: #e6d98a;
	border-left-color: #c9a227;
}
.message_error {
	background-color: #fde8e4;
	border-color: #e8b4a8;
	border-left-color: #c92a2a;
}


/* ----> MISC */
/* -------------------------- */
/* alternating background colours for tables: */
TR.alt { background-color: #F7F7F7; }
DIV.alt { background-color: #F7F7F7; }

/* primary page headers are H2 */
H2 {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.6em 0;
	color: #243447;
}
/* sub page headers are H4 */
H4 {
	font-size: 1.05em;
	font-weight: 700;
	margin: 1em 0 0.5em 0;
	color: #243447;
}
/* sometimes pages are subdivied with block headers */
H4.block {
	border: 1px solid #3d5878;
	border-radius: 4px;
	padding: 0.45em 0.75em;
	background-color: #4C6B91;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0 0 15px 0;
}
/* or divider lines */
.dividerLine {
	background-color: #c5cdd6;
	margin: 10px 2px 10px 0;
	height: 1px;
	padding: 0;
	border: 0;
}

TABLE.tight {
	border-spacing: 0 !important;
	border: 0 solid #FFFFFF !important;
	border-collapse: collapse !important;
	margin: 0 !important;
	padding: 0 !important;
}
TABLE.tight TD {
	padding: 0 !important;
}

/* Bare label/value tables used by many ASP forms (change_pwd, profile, etc.) */
form > table:not(.dataForm):not(.dataGrid):not(.tight) {
	border-collapse: collapse;
	border-spacing: 0;
}
form > table:not(.dataForm):not(.dataGrid):not(.tight) > tr > td,
form > table:not(.dataForm):not(.dataGrid):not(.tight) > tbody > tr > td {
	padding: 0.4em 0.85em 0.4em 0;
	vertical-align: middle;
}
form > table:not(.dataForm):not(.dataGrid):not(.tight) > tr > td:first-child,
form > table:not(.dataForm):not(.dataGrid):not(.tight) > tbody > tr > td:first-child {
	color: #3d4f5f;
	padding-right: 1em;
}

.fieldRequired { background-color: #e8eef8; }
.fieldSemiRequired { background-color: #f2f3f4; }


/* ----> DATA GRID
   -------------------------
TABLE:  dataGrid
HEADER TR: dataGrid_header, TD: header
DATA TR: dataGrid_data, TD: data, dataGrid_spacer
*/
.dataGrid {
	empty-cells: show;
	border-collapse: collapse;
	border-spacing: 10px 50px;
	border: 1px solid #D6D6D6;
	background: #fff;
}

TR.dataGrid_header { background-color: #e4e8ee; }
.dataGrid_header TD {
	padding: 8px 10px;
	color: #383838;
	font-weight: bold;
}

.dataGrid_header .sortable:hover {
	cursor: pointer;
	background-image: url('assets/images/semkhor/dataGrid_sort.png');
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 16px;
}

td.dataGrid_spacer {
	background-image: url('assets/images/semkhor/dataGrid_spacer.png');
	background-repeat: repeat-y;
	background-position: 50% 0%;
	width: 10px;
}

.dataGrid_data { border-bottom: 1px solid #D6D6D6; }
.dataGrid_data TD { padding: 8px 10px; }
.dataGrid_data:hover { background-color: #f5f8fb; }

/* above datagrids there is a div which labels the dataset and gives the # of records and allows paging: */
.dataGrid_pager {
	background-color: #E8E8EB;
	padding: 6px 10px;
	width: 80%;
	margin-bottom: 6px;
	border-radius: 4px;
}


/* ----> DATA (ENTRY) FORM
   -----------------------
for interfaces of form:
label:  [html input]
TABLE: dataForm
TR: dataForm_data
TD: dataForm_label, dataForm_spacer, dataForm_value, dataForm_input
*/
.dataForm {
	empty-cells: show;
	border-collapse: collapse;
	border-spacing: 10px 50px;
	border: 0 solid #121212;
}

td.dataForm_spacer {
	width: 20px;
}

.dataForm_data TD {
	padding: 6px 4px;
	vertical-align: middle;
}

td.dataForm_label {
	color: #3d4f5f;
	white-space: nowrap;
}

.dataForm_data TD.dataForm_wysiwyg * {
	padding: 0;
}

.required .dataForm_spacer:before {
	content: "*";
	font-weight: bold;
	font-size: 10pt;
	color: #CE0000;
	padding: 0;
	margin: 0;
}

.semi-required .dataForm_spacer:before {
	content: "*";
	font-weight: bold;
	font-size: 10pt;
	color: #D9D7D7;
	padding: 0;
	margin: 0;
}


/* ----> DATA (ENTRY) FORM - responsive
   -----------------------
form interfaces using div layout, responsive for mobile & touch screens.
-for small screens, labels go on top of fields
-for very large screens, labels become right aligned.
-use:  <div class="formField"><label>Name</label><div>Value</div></div>
*/

div.formField {
	clear: both;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	padding: 1px;
	margin: 0 0 12px 0;
	text-align: left;
}

div.formField > label {
	width: 25%;
	flex: 0 0 25%;
	float: none;
	padding-right: 10px;
	padding-top: 0.45em;
	color: #3d4f5f;
	box-sizing: border-box;
}

/* for use with formField */
.required > label:after {
	content: "*";
	font-weight: bold;
	font-size: 10pt;
	color: #CE0000;
	padding: 0;
	margin-left: 5px;
}
.semi-required > label:after {
	content: "*";
	font-weight: bold;
	font-size: 10pt;
	color: #D9D7D7;
	padding: 0;
	margin-left: 5px;
}

div.formField > div {
	width: 75%;
	flex: 1 1 auto;
	float: none;
	min-width: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=tel],
input[type=number],
input[type=search],
textarea,
select {
	box-sizing: border-box;
	width: 75%;
	max-width: 600px;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.35;
	color: #243447;
	background: #fff;
	border: 1px solid #c5cdd6;
	border-radius: 5px;
	padding: 0.45em 0.6em;
}

textarea {
	min-height: 6em;
	resize: vertical;
}

select {
	padding-right: 1.75em;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: #4697e4;
	box-shadow: 0 0 0 3px rgba(70, 151, 228, 0.22);
}

input[type=text]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=password]:disabled,
textarea:disabled,
select:disabled {
	background: #f0f2f4;
	color: #6a7a88;
}

@media (max-width: 600px) {
	div.formField {
		flex-direction: column;
		margin: 0 0 15px 0;
	}
	div.formField > label {
		width: 100%;
		flex-basis: auto;
		float: none;
		margin: 0 0 5px 0;
		padding-top: 0;
	}
	div.formField > div {
		width: 100%;
		max-width: 100%;
		float: none;
	}

	input[type=text],
	input[type=email],
	input[type=url],
	input[type=password],
	input[type=tel],
	input[type=number],
	input[type=search],
	textarea,
	select {
		width: 100%;
		max-width: 100%;
	}

	input[type=text],
	input[type=url],
	input[type=email],
	input[type=password],
	input[type=tel],
	input[type=number],
	input[type=search] {
		-webkit-appearance: none;
		appearance: none;
		display: block;
		margin: 0;
		min-height: 44px;
		font-size: 17px;
		border: 1px solid #bbb;
	}

	select {
		min-height: 44px;
		font-size: 17px;
	}
	textarea {
		font-size: 17px;
	}

	form > table:not(.dataForm):not(.dataGrid):not(.tight) {
		width: 100%;
	}
	form > table:not(.dataForm):not(.dataGrid):not(.tight) > tr,
	form > table:not(.dataForm):not(.dataGrid):not(.tight) > tbody > tr {
		display: block;
		margin-bottom: 0.75em;
	}
	form > table:not(.dataForm):not(.dataGrid):not(.tight) > tr > td,
	form > table:not(.dataForm):not(.dataGrid):not(.tight) > tbody > tr > td {
		display: block;
		padding: 0.15em 0;
		white-space: normal;
	}

	input[type=submit],
	input[type=reset],
	input[type=button] {
		min-height: 44px;
		width: 100%;
		max-width: 320px;
	}
}
@media (min-width: 1200px) {
	div.formField > label {
		text-align: right;
	}
}


/* ----> QUICK PURCHASE
  -----------------------------
*/
#quickPurchase {
	visibility: hidden;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1000;
	background-image: url(assets/images/semkhor/bg-semitrans.png);
	overflow-y: scroll;
	font-size: 12px;
}
#quickPurchase div#qp_dialog {
	width: 600px;
	margin: 100px auto;
	background-color: #fff;
	border: 1px solid #c5cdd6;
	border-radius: 8px;
	padding: 20px;
	color: #000000;
	box-shadow: 0 12px 32px rgba(20, 40, 60, 0.18);
}

#qp_contentTop {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2em;
	align-items: center;
}
#qp_productInfo { column-width: 60%; break-inside: avoid-column; }
#qp_thumbnail { max-width: 100px; }
#qp_notMember, #qp_member { column-width: 40%; text-align: right; vertical-align: top; }
#qp_notMember { padding-top: 3em; }

#qp_contentBottom { column-count: 2; }
#qp_customerInfo { column-width: 45%; break-inside: avoid-column; }
#qp_paymentInfo { column-width: 45%; }

#qp_paymentType { text-align: left; }

#qp_productInfo TD { vertical-align: middle; font-weight: bold; }

@media (max-width: 600px) {
	#quickPurchase div#qp_dialog { width: auto; margin: 10px auto; }
	#qp_contentTop { column-count: 1; }
	#qp_contentBottom { column-count: 1; }
	#qp_productInfo { margin-bottom: 3em; }
}


/* ----> OTHER
  -----------------------------
*/

/* event registration header details: */
.registration_details { border-spacing: 10px; margin: 0 auto; }
.registration_details TD.label { color: #005984; font-weight: bold; vertical-align: top; }

.registrationForm_fieldsSectionHeader { border-bottom: 1px solid #C0C0C0; padding-bottom: 0.35em; margin-bottom: 0.75em; }


#category_crowdfunding_expired {
	border: 1px solid #c5cdd6;
	border-radius: 5px;
	padding: 10px;
	background-color: #DBD7D8;
	font-weight: bold;
	color: #9E233B;
	width: 75%;
	margin: 0 auto;
}
#category_crowdfunding_stats table {
	border: 1px solid #c5cdd6;
	padding: 10px;
}


/* discussion forum */
.forum_threadSearchResult {
	border: 1px solid #C0C0C0;
	border-radius: 5px;
	padding: 8px 10px;
	margin-bottom: 10px;
}
.forum_threadSearchResult:hover {
	border: 1px solid #696969;
	background-color: #DFEDF2;
}

.forum_threadSearchResultDetailsSide {
	float: right;
	font-size: 10pt;
}

.forum_threadSearchResultDetailsBottom {
	margin-top: 10px;
	font-size: 10pt;
}

.memberAreaHeader {
	font-size: 1.25em;
	font-weight: bold;
}


/* messages.asp */
.privateMessage_conversation { margin-bottom: 20px; }
.privateMessage_user { margin-bottom: 3px; }
.privateMessage_msgFrom { margin: 2px 2px 2px 50px; background-color: #eeefef; padding: 8px 10px; border-radius: 6px; }
.privateMessage_msgTo { margin: 2px; background-color: #d3e6f6; padding: 8px 10px; border-radius: 6px; }
.privateMessage_loadMore { margin-left: 50px; }
.privateMessage_timestamp { font-size: 8px; color: #737475; }
.privateMessage_new { background-color: #f4f89f; padding: 3px; border-radius: 3px; }


/* live chat module */
.semchat_message { background-color: #000000; border-top: 1px solid #C0C0C0; clear: both; }  /* container */
.semchat_member { float: left; width: 20%; font-weight: bold; margin-bottom: 10px; }
.semchat_content { float: right; width: 80%; color: #656565; margin-bottom: 10px; }
.semchat_timestamp { display: none; }
.semchat_selector_chosen { width: 16px; }
.semchat_selector_unchosen { width: 16px; filter: opacity(10%) grayscale(100%); }
#semchat_interface { margin-bottom: 5px; }
#semchat_msgText { max-width: 500px; }