{style}
.ow_quicksearch_table {
	width: 730px;
}
.ow_quicksearch_layout, .ow_quicksearch_layout_wrap {
	width: 334px;
}
.ow_quicksearch_list_wrap {
	width: 300px;
}

.ow_quicksearch_position_disabled, .ow_quicksearch_position {
    width: 100%;
	height: 48px;
	border: 0;
	text-align: center;
	overflow: hidden;
	padding: 12px 0 12px 16px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.ow_quicksearch_item, .ow_quicksearch_item_in_layout, .ow_quicksearch_item_placeholder {
	width: 100%;
	height: 24px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border: 1px solid #e8e8e8;
	margin-bottom: 26px;
	text-align: center;
	overflow: hidden;
	padding: 0 8px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.ow_quicksearch_item {
	background-color: #f0f0f0;
	color: #7b7b7b;
	cursor: move;
}

.ow_quicksearch_item_in_layout {
	background-color: #fff;
	color: #7b7b7b;
	cursor: move;
}

.ow_quicksearch_position_disabled .quicksearch_dnd_disbale_item
{
    cursor: auto;
}

.ow_quicksearch_item_placeholder {
	background-color: #f3f3f3;
	-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.05);
	box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.05);
	color: #bebebe;
}

.ow_quicksearch_item_placeholder.placeholder_hover {
	border: 1px dashed #b4b4b4;
}

.ow_quicksearch_item.item_draged {
	background: #f9f9f9;
	color: #e6e6e6;
}

.ow_quicksearch_item.item_draging {
	border: 1px dashed #b4b4b4;
}
.ow_quicksearch_label {
	line-height: 24px;
	font-size: 12px;
}
.ow_quicksearch_item_in_layout .ow_quicksearch_label {
	font-weight: bold;
}
.ow_quicksearch_item_placeholder .ow_quicksearch_label {
	font-size: 11px;
}
.ow_quicksearch_layout {
	background: #f3f3f3;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #e8e8e8;
	padding: 16px 16px 16px 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.ow_quicksearch_layout_wrap h3 {
	text-transform: uppercase;
	margin-bottom: 4px;
	font-family: 'UbuntuBold',"Trebuchet MS","Helvetica CY",sans-serif;
	padding-left: 16px;
}
.ow_quicksearch_layout_list {
	margin-bottom: 4px;
}
.ow_quicksearch_layout_list .layout_item:last-child {
	margin-bottom: 0;
}

.ow_quicksearch_layout.fixed {
    position: fixed;
    top: 100px;
}

.preview_button_div
{
    height: 24px;
}
{/style}


<script type="text/template" id="allowed_questions_template">
    <div class="ow_quicksearch_item available_field_item"><span class="ow_quicksearch_label"></span></div>
</script>
<script type="text/template" id="item-quick_search_template">
    <div class="ow_quicksearch_position" ><div class="ow_quicksearch_item_in_layout layout_item"><span class="ow_quicksearch_label"></span></div></div>
</script>
<script type="text/template" id="item-quick_empty_position">
    <div class="ow_quicksearch_position" ><div class="ow_quicksearch_item_placeholder layout_item"><span class="ow_quicksearch_label">{text key='usearch+admin_empty_position'}</span></div></div>
</script>

{$contentMenu}
<div class="ow_automargin ow_quicksearch_table clearfix" style="position:relative;">
    <div class="ow_std_margin">
    {text key="usearch+admin_settings_description"}
    </div>

	<div class="ow_quicksearch_list_wrap ow_left" >
		<div class="ow_quicksearch_list" >
            {foreach from=$allowedQuestionList item=question}
                <div class="ow_quicksearch_item available_field_item" question-name="{$question->name}"><span class="ow_quicksearch_label" >{question_lang name=$question->name}</span></div>
            {/foreach}
		</div>
	</div>

    <div class="ow_quicksearch_layout_wrap ow_right" >
		<div class="ow_quicksearch_layout">
			<h3>Quick Search</h3>
			<div class="ow_quicksearch_layout_list" >
                {foreach from=$positions key=position item=question}
                    <div class=" {if !empty($question) && ( $question=='sex' || $question=='match_sex' ) }ow_quicksearch_position_disabled{else}ow_quicksearch_position{/if}" position="{$position}" >
                    {if !empty($question)}
                        <div class="ow_quicksearch_item_in_layout {if $question=='sex' || $question=='match_sex' }quicksearch_dnd_disbale_item{else}quicksearch_dnd_item{/if} layout_item" question-name="{$question}">
                            <span class="ow_quicksearch_label">{question_lang name=$question}</span>
                        </div>
                    {else}
                        <div class="ow_quicksearch_item_placeholder layout_item">
                            <span class="ow_quicksearch_label">{text key='usearch+admin_empty_position'}</span>
                        </div>
                    {/if}
                    </div>
                {/foreach}
			</div>
            <div class="preview_button_div">
                <div class="ow_right">
                    <span class="ow_button">
                        <span class=" theme_select_submit ow_positive">
                            <input type="button" value="preview" class="theme_select_submit ow_positive ow_ic_picture" id="quicksearch_preview" />
                        </span>
                    </span>
                </div>
            </div>

		</div>
	</div>

</div>