			<div id="customcolumns" class="panel-outer">
				<a href="#" id="customcolumns-close" class="close-button pull-left"></a>
				<div class="slider-right">
					<div class="panel" id="customcolumns-control">
						<h3 class="text-center">Add Custom Domain Columns</h3>
						<div class="row">
							<div class="col-sm-8">
								<div class="row" id="customcolumns-edit">
									<div class="col-sm-12">
										<p class="text-justify">The column names will be converted to lower case and spaces changed to underscore ( _ ) before
										creating the corresponding database field. 
										Use only a-z, 0-9 and Unicode characters for column names (<b>don't use punctuations and other symbols</b>) and avoid
										names that contain reserved words like <b>double</b>, <b>usage</b> etc.
										You can label the columns differently when you setup the display columns.</p>
										<div class="form-group" style="margin-bottom:0;">
											<div class="row" style="margin-bottom: 10px;">
												<div class="col-sm-4 text-right">
													<label for "field_name" style="padding-top:6px;">Field Name</label>
												</div>
												<div class="col-sm-8 text-right">
													<input type="text" id="field_name" name="field_name" value="" autocomplete="off" class="input-sm form-control">
												</div>
											</div>
											<div class="row" style="margin-bottom: 10px;">
												<div class="col-sm-4 text-right">
													<label for "field_type" style="padding-top:6px;">Field Type</label>
												</div>
												<div class="col-sm-6">
													<select id="field_type" class="form-control input-sm">
													  <option value="varchar">Small Text</option>
													  <option value="text">Text</option>
													  <option value="date">Date</option>
													  <option value="datetime">Date + Time</option>
													  <option value="bigint">Number</option>
													</select>
												</div>
												<div class="col-sm-2"></div>
											</div>
											<div class="row" style="margin-bottom: 20px;">
												<div class="col-sm-4 text-right">
													<label for "field_width" style="padding-top:6px;">Field Widh</label>
												</div>
												<div class="col-sm-6">
													<input type="text" id="field_width" name="field_width" value="128" class="input-sm form-control">
												</div>
												<div class="col-sm-2"></div>
											</div>
											
											<p style="margin-top: 10px;">Field width should be between 10 and 255 for &quot;<b>small text</b>&quot;. It will be ignored for other field types.</p>
										</div>
										<hr class="panelruler">
										<div class="form-group">
											<div class="row">
												<div class="col-sm-6">
													<button id="insertcolumn" class="btn btn-danger btn-sm btn-block">Insert Column</button>
												</div>
												<div class="col-sm-6">
													<hr class="visible-xs">
													<button id="deletecolumn" class="btn btn-primary btn-sm btn-block">Delete Column</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<h4 id="cch4" style="margin-top:0;">Existing Columns</h4>
								<ul id="domaincolumns" class="bullets">
								</ul>
							</div>
						</div>
						<div id="customcolumns-error"></div>
					</div>
				</div>
			</div>