/* ----> 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:7pt; font-weight:bold;padding:0px 2px; overflow: visible;cursor:pointer;}
.selectedButton { border: 1px solid #2154DE; padding:2px; 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: 9pt;	font-weight: bold;padding:0px 3px;width: auto; overflow: visible;	cursor:pointer;	}
.largeButton IMG {margin-right:5px;}






/* -----> SYSTEM MESSAGES */
/* ------------------------- */
.message_success {border:1px solid black;background-color:#BDFFBB;padding:2px 2px 2px 2px;}
.message_warning {border:1px solid black;background-color:#FFFEBB;padding:2px 2px 2px 2px;}
.message_info {border:1px solid black;background-color:#FFFEBB;padding:2px 2px 2px 2px;}
.message_error {border:1px solid black;background-color:#FFD0BB;padding:2px 2px 2px 2px;}



/* ----> MISC */
/* -------------------------- */
/* alternating background colours for tables: */
TR.alt {background-color:#F7F7F7;}
DIV.alt  {background-color:#F7F7F7;}
/* primary page headers are H2 */
H2 {}
/* sub page headers are H4 */
H4 {}
/* sometimes pages are subdivied with block headers */
H4.block {border: 1px solid #535080; padding: 2px 2px 2px 10px; background-color: #4C6B91; color: #FFFFFF; font-weight:bold; margin:0px 0px 15px 0px;}
/* or divider lines */
.dividerLine {background-color:#565656; margin: 10px 2px 10px 0px; height:3px; padding: 0px;}

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


/* ----> 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;
}


TR.dataGrid_header {background-color: #D0D5DB;}
.dataGrid_header TD {padding: 5px; 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 #C0C0C0;}
.dataGrid_data TD{
	padding: 5px;
}

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





/* ----> 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: 0px solid #121212;
}

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

.dataForm_data TD {
	padding: 4px;
}

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

.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;
	overflow: hidden;
	padding: 1px;
	margin: 0 0 10px 0;
	text-align: left;
}

div.formField > label {
	width: 25%;
	float: left;
	padding-right: 10px;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	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%;
	float: right;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
	width: 75%;
	max-width:600px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	border-radius: 3px;
	padding: 5px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
	outline: 0;
	border-color: #4697e4;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
}

@media (max-width: 600px) {
	div.formField {
		margin: 0 0 15px 0; 
	}
	div.formField > label {
		width: 100%;
		float: none;
		margin: 0 0 5px 0;
	}
	div.formField > div {
		max-width: 100%;
		float: none;
	}
	
	input[type=text],
	input[type=email],
	input[type=url],
	input[type=password],
	textarea,
	select {
		width: 98%;
	}
  	
	input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {
		-webkit-appearance: none; -moz-appearance: none;
		display: block;
		margin: 0;
		height: 40px;
		line-height: 40px; font-size: 17px;
		border: 1px solid #bbb;
	}
	
	select {
		line-height: 40px; font-size: 17px;
	}
	textarea {
		font-size: 17px;
	}
  
}
@media (min-width: 1200px) {
	div.formField > label {
		text-align: right;
	}
}




/* ----> QUICK PURCHASE
  -----------------------------
*/
#quickPurchase {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     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 #000;
     padding:20px;
	 color: #000000;
}

#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;}




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


/* discussion forum */
.forum_threadSearchResult {
	border: 1px solid #C0C0C0;
	padding: 5px;
	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:5px;}
.privateMessage_msgTo {margin: 2px; background-color:#d3e6f6; padding:5px;}
.privateMessage_loadMore {margin-left:50px;}
.privateMessage_timestamp {font-size:8px; color: #737475;}
.privateMessage_new {background-color: #f4f89f; padding: 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;}