idsci/application/admin/view/cms/manuscript/edit.html

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Upload Manuscript</li>
        <li>Manuscript Information </li>
        <li>Author Information </li>
        <li>Statement</li>
        <li>Recommended</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <div class="form-group" data-field="image">
            <label for="c-manuscript_zip" class="control-label col-xs-12 col-sm-2">{:__('Manuscript ( Word / Zip )')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-manuscript_zip" class="form-control" size="50" name="row[manuscript_zip]" type="text" value="{$row.manuscript_zip}" readonly>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-manuscript_zip" data-preview-id="p-manuscript_zip"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-manuscript_zip"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-manuscript_zip"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-manuscript_zip"></ul>
            </div>
        </div>
        <div class="form-group" data-field="image">
            <label for="c-manuscript_pdf" class="control-label col-xs-12 col-sm-2">{:__('Manuscript ( PDF Version )')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-manuscript_pdf" class="form-control" size="50" name="row[manuscript_pdf]" type="text" value="{$row.manuscript_pdf}" readonly>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-manuscript_pdf" data-preview-id="p-manuscript_pdf"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-manuscript_pdf"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-manuscript_pdf"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-manuscript_pdf"></ul>
            </div>
        </div>
        <div class="form-group" data-field="image">
            <label for="c-cover_letter" class="control-label col-xs-12 col-sm-2">{:__('Cover Letter')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-cover_letter" class="form-control" size="50" name="row[cover_letter]" type="text" value="{$row.cover_letter}" readonly>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-cover_letter" data-preview-id="p-cover_letter"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-cover_letter"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-cover_letter"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-cover_letter"></ul>
            </div>
        </div>
        <div class="form-group" data-field="image">
            <label for="c-graphical_abstract" class="control-label col-xs-12 col-sm-2">{:__('Graphical Abstract ')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-graphical_abstract" class="form-control" size="50" name="row[graphical_abstract]" type="text" value="{$row.graphical_abstract}" readonly>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-graphical_abstract" data-preview-id="p-graphical_abstract"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-graphical_abstract"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-graphical_abstract"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-graphical_abstract"></ul>
            </div>
        </div>
        <div class="form-group" data-field="image">
            <label for="c-non_material" class="control-label col-xs-12 col-sm-2">{:__('Non-published Material： ( Word / Zip / PDF ) ')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-non_material" class="form-control" size="50" name="row[non_material]" type="text" value="{$row.non_material}" readonly>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-non_material" data-preview-id="p-non_material"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-non_material"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-non_material"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-non_material"></ul>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Copyright Permisson')}:</label>
            <div class="col-xs-12 col-sm-8">
                {:build_radios('row[is_copyright]', ['hidden'=>__('Upload here'), 'normal'=>__('No copyrights issues')], $row.is_copyright)}
            </div>
        </div>
        <div class="form-group" data-field="image">
            <label for="c-copyright_files" class="control-label col-xs-12 col-sm-2">{:__('Copyright Permisson Files： ( Zip / PDF )')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-copyright_files" class="form-control" size="50" name="row[copyright_files]" type="text" value="{$row.copyright_files}" readonly>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-copyright_files" data-preview-id="p-copyright_files"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-copyright_files"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-copyright_files"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-copyright_files"></ul>
            </div>
        </div>
        <div class="form-button"><input type="button" name="next" class="next action-button" value="下一步"></div>
    </fieldset>
    <fieldset>
        <div class="form-group" data-field="image">
            <label for="c-image" class="control-label col-xs-12 col-sm-2">{:__('Cover Image')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-image" class="form-control" size="50" name="row[image]" type="text" value="{$row.image}" readonly>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-image" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-image"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-image"></ul>
            </div>
        </div>
        <div class="form-group required">
            <label class="control-label col-xs-12 col-sm-2">{:__('Choose Journal')}:</label>
            <div class="col-xs-12 col-sm-7">
                <select id="c-journal" data-rule="required" class="form-control selectpicker" name="row[journal]" readonly="">
                    <option value="">Please select</option>
                    {cms:channellist id="channel" type="son" typeid="1"}
                    <option value="{$channel.id}" {if condition="$row.journal == $channel.id"}selected{/if}>{$channel.name}</option>
                    {/cms:channellist}
                </select>
            </div>
        </div>
        <div class="form-group required">
            <label class="control-label col-xs-12 col-sm-2">{:__('Choose Article Type')}:</label>
            <div class="col-xs-12 col-sm-7">
                <select id="c-article_type" data-rule="required" class="form-control selectpicker" name="row[article_type]" readonly="">
                    <option value="">Please select</option>
                    {foreach name="site.manuscript_article_type" item="vo"}
                    <option value="{$key}" {if condition="$row.article_type == $key"}selected{/if}>{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-title" class="control-label col-xs-12 col-sm-2">Title:</label>
            <div class="col-xs-12 col-sm-7">
                <textarea data-rule="required" class="form-control editor" name="row[title]" id="c-title" cols="30" rows="10" readonly>{$row.title}</textarea>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-abstract" class="control-label col-xs-12 col-sm-2">Abstract:</label>
            <div class="col-xs-12 col-sm-7">
                <textarea data-rule="required" class="form-control editor" name="row[abstract]" id="c-abstract" cols="30" rows="10" readonly>{$row.abstract}</textarea>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-keywords" class="control-label col-xs-12 col-sm-2">{:__('Keywords')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-keywords" data-role="tagsinput" class="form-control" name="row[keywords]" value="{$row.keywords}" data-rule="required" readonly>
                <div class="input-group-addon no-border no-padding">
                    <span class="msg-box n-right" for="c-keywords"></span>
                </div>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('Number of Pages')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-number_page" class="form-control" name="row[number_page]" value="{$row.number_page}" data-rule="required" readonly>
            </div>
        </div>
        <div class="form-button">
            <input type="button" name="previous" class="previous action-button-previous" value="上一步">
            <input type="button" name="next" class="next action-button" value="下一步">
        </div>
    </fieldset>
    <fieldset>
        <!-- 作者信息 -->
        {foreach name="row.author_content" item="author"}
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('Institution E-Mail Address')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-email" class="form-control" name="row[author][{$key}][email]" value="{$author.email}" data-rule="required" readonly>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('First Name')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-first_name" class="form-control" name="row[author][{$key}][first_name]" value="{$author.first_name}" data-rule="required" readonly>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('Middle Name')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-middle_name" class="form-control" name="row[author][{$key}][middle_name]" value="{$author.middle_name}" data-rule="required" readonly>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('Last Name')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-last_name" class="form-control" name="row[author][{$key}][last_name]" value="{$author.last_name}" data-rule="required" readonly>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('Display E-Mail')}:</label>
            <div class="col-xs-12 col-sm-7">
                <div class="input-group mb-3">
                    <div class="radio radio-inline pl-0">
                        <label for="c-e-mail-yes-{$key}"><input data-rule="required" id="c-e-mail-yes-{$key}" name="row[author][{$key}][display_email]" type="radio" value="yes" {if condition="$author.display_email == 'yes'"}checked{/if} />Yes</label>
                        <label for="c-e-mail-no-{$key}"><input data-rule="required" id="c-e-mail-no-{$key}" name="row[author][{$key}][display_email]" type="radio" value="no" {if condition="$author.display_email == 'no'"}checked{/if} />No</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('Correspondsing Author')}:</label>
            <div class="col-xs-12 col-sm-7">
                <div class="input-group mb-3">
                    <div class="radio radio-inline pl-0">
                        <label for="c-correspondsing-author-yes-{$key}"><input data-rule="required" id="c-correspondsing-author-yes-{$key}" name="row[author][{$key}][correspondsing_author]" type="radio" value="yes" {if condition="$author.correspondsing_author == 'yes'"}checked{/if} />Yes</label>
                        <label for="c-correspondsing-author-no-{$key}"><input data-rule="required" id="c-correspondsing-author-no-{$key}" name="row[author][{$key}][correspondsing_author]" type="radio" value="no" {if condition="$author.correspondsing_author == 'no'"}checked{/if} />No</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group required">
            <label for="c-number_page" class="control-label col-xs-12 col-sm-2">{:__('Affiliation')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-affiliation" class="form-control" name="row[author][{$key}][affiliation]" value="{$author.author_affiliation}" data-rule="required" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Country / Temitory')}:</label>
            <div class="col-xs-12 col-sm-7">
                <select id="c-author_country" data-rule="required" class="form-control" name="row[author][{$key}][author_country]">
                    <option value="">Please select</option>
                    {foreach name="site.country" item="vo"}
                    <option value="{$key}" {if condition="$author.author_country == $key"}selected{/if}>{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <hr>
        {/foreach}
        <div class="form-button">
            <input type="button" name="previous" class="previous action-button-previous" value="上一步">
            <input type="button" name="next" class="next action-button" value="下一步">
        </div>
    </fieldset>
    <fieldset>
        <!-- 陈述 -->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('I have received funding')}:</label>
            <div class="col-xs-12 col-sm-8">
                {:build_radios('row[is_funding]', ['normal'=>__('Yes'), 'hidden'=>__('No')], $row.is_funding)}
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('I have received funding')}:</label>
            <div class="col-xs-12 col-sm-7">
                <textarea data-rule="required" class="form-control editor" name="row[funding_content]" id="c-funding_content" cols="30" rows="10" readonly>{$row.funding_content}</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Potential confilict of interest exists Choose')}:</label>
            <div class="col-xs-12 col-sm-7">
                {:build_radios('row[is_interest]', ['normal'=>__('Yes'), 'hidden'=>__('No')], $row.is_interest)}
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Potential confilict of interest exists')}:</label>
            <div class="col-xs-12 col-sm-7">
                <textarea data-rule="required" class="form-control editor" name="row[interest_content]" id="c-interest_content" cols="30" rows="10" readonly>{$row.interest_content}</textarea>
            </div>
        </div>

        <div class="form-button">
            <input type="button" name="previous" class="previous action-button-previous" value="上一步">
            <input type="button" name="next" class="next action-button" value="下一步">
        </div>
    </fieldset>
    <fieldset>
        <!-- 推荐 -->
        <div class="form-group">
            <div class="col-xs-12 col-sm-12">
                <div class="table-responsive">
                    <table class="table inbox-table" id="recommended-table">
                        <thead style="background: #FAFAFA;" class="thead">
                        <tr>
                            <th>Name</th>
                            <th>E-mail Address</th>
                            <th>First Name</th>
                            <th width="100px">Last Name</th>
                            <th>Affiliation</th>
                            <th>Field</th>
                        </tr>
                        </thead>
                        <tbody class="tbody">
                        {foreach name="row.review_content" item="review"}
                        <tr>
                            <td><?php echo $review['reviewer-name'] ?></td>
                            <td><?php echo $review['reviewer-email'] ?></td>
                            <td><?php echo $review['reviewer-first-name'] ?></td>
                            <td><?php echo $review['reviewer-last-name'] ?></td>
                            <td><?php echo $review['reviewer-affiliation'] ?></td>
                            <td><?php echo $review['reviewer-field'] ?></td>
                        </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_one" class="control-label col-xs-12 col-sm-2">{:__('Article1')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-article_one" class="form-control" name="row[article_one]" value="{$row.article_one}" data-rule="required" readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_two" class="control-label col-xs-12 col-sm-2">{:__('Article2')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-article_two" class="form-control" name="row[article_two]" value="{$row.article_two}" data-rule="required" readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Article3')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="c-article_three" class="form-control" name="row[article_three]" value="{$row.article_three}" data-rule="required" readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Country/Temitory')}:</label>
            <div class="col-xs-12 col-sm-7">
                <select id="c-country" data-rule="required" class="form-control" name="row[country]" readonly="">
                    <option value="">Please select</option>
                    {foreach name="site.country" item="vo"}
                    <option value="{$key}" {in name="key" value="$row.country" }selected{/in}>{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Affiliation')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" data-rule="required" class="form-control" id="c-affiliation" name="row[affiliation]" value="{$row.affiliation|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" data-rule="required" class="form-control" id="c-name" name="row[name]" value="{$row.name|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Invoice Email')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" data-rule="required" class="form-control" id="c-invoice-email" name="row[invoice_email]" value="{$row.invoice_email|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Order Email')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" data-rule="required" class="form-control" id="c-order-email" name="row[order_email]" value="{$row.order_email|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Address')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" data-rule="required" class="form-control" id="c-address" name="row[address]" value="{$row.address|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Zip Code')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" data-rule="required" class="form-control" id="c-zip-code" name="row[zip_code]" value="{$row.zip_code|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('City')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" data-rule="required" class="form-control" id="c-city" name="row[city]" value="{$row.city|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Telephone')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" class="form-control" id="c-telephone" name="row[telephone]" value="{$row.telephone|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('Fax')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" class="form-control" id="c-fax" name="row[fax]" value="{$row.fax|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-group required">
            <label for="c-article_three" class="control-label col-xs-12 col-sm-2">{:__('VAT')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" class="form-control" id="c-vat" name="row[vat]" value="{$row.vat|htmlentities}" placeholder="Type here..." readonly>
            </div>
        </div>

        <div class="form-button">
            <input type="button" name="previous" class="previous action-button-previous" value="上一步">
            <input type="button" name="Submit" class="disabled Submit action-button submit-button" value="完成设置">
        </div>
    </fieldset>
</form>

<style>
    /*form styles*/
    #edit-form {
        position: relative;
        margin-top: 30px;
    }

    #edit-form fieldset {
        background: white;
        border: 0 none;
        border-radius: 0px;
        box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
        padding: 20px 30px;
        box-sizing: border-box;
        width: 90%;
        margin: 0 5%;
        /*stacking fieldsets above each other*/
        position: relative;
    }

    /*Hide all except first fieldset*/
    #edit-form fieldset:not(:first-of-type) {
        display: none;
    }

    /*buttons*/
    #edit-form .form-button {
        text-align: center;
    }
    #edit-form .form-radio {
        padding-top: 8px;
    }
    #edit-form .action-button {
        width: 100px;
        background: #33bf0b;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 3px;
        cursor: pointer;
        padding: 6px 12px;
        margin: 10px 5px;
    }


    #edit-form .action-button-previous {
        width: 100px;
        background: #C5C5F1;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 3px;
        cursor: pointer;
        padding: 6px 12px;
        margin: 10px 5px;
    }

    #edit-form .action-button-previous:hover, #edit-form .action-button-previous:focus {
        box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
    }

    /*headings*/
    .fs-title {
        font-size: 18px;
        color: #2C3E50;
        margin-bottom: 10px;
        letter-spacing: 2px;
        font-weight: bold;
    }

    .fs-subtitle {
        font-weight: normal;
        font-size: 13px;
        color: #666;
        margin-bottom: 20px;
    }

    /*progressbar*/
    #progressbar {
        margin-bottom: 30px;
        overflow: hidden;
        /*CSS counters to number the steps*/
        counter-reset: step;
        text-align: center;
    }

    #progressbar li {
        list-style-type: none;
        color: #c6c2bd;
        /*text-transform: uppercase;*/
        font-size: 9px;
        width: 220px;
        float: left;
        position: relative;
        letter-spacing: 1px;
    }

    #progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 24px;
        height: 24px;
        line-height: 26px;
        display: block;
        font-size: 12px;
        color: #333;
        background: #c6c2bd;
        border-radius: 25px;
        margin: 0 auto 10px auto;
        position: relative;
        z-index: 1;
    }

    /*progressbar connectors*/
    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: #c6c2bd;
        position: absolute;
        left: -50%;
        top: 9px;
        z-index: 0; /*put it behind the numbers*/
    }

    #progressbar li:first-child:after {
        /*connector not needed before the first step*/
        content: none;
    }

    /*marking active/completed steps green*/
    /*The number of the step and the connector before it = green*/
    #progressbar li.active:before, #progressbar li.active:after {
        background: #33bf0b;
        color: white;
    }

    /* Not relevant to this form */
    .dme_link {
        margin-top: 30px;
        text-align: center;
    }
    .dme_link a {
        background: #FFF;
        font-weight: bold;
        color: #33bf0b;
        border: 0 none;
        border-radius: 25px;
        cursor: pointer;
        padding: 5px 25px;
        font-size: 12px;
    }

    .dme_link a:hover, .dme_link a:focus {
        background: #C5C5F1;
        text-decoration: none;
    }

    .pull-left.pagination-detail{
        display:none;
    }
    .msg-box.n-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
    }
</style>