@extends('layouts.tenant.layout_1.app')

@section('page_css')
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="{{ asset('metro/vendor/jquery-steps/css/jquery.steps.css') }}" rel="stylesheet">
<style type="text/css">
#form-builder-wrapper{min-height: 400px;}
.row-wrapper{position: relative;border: 2px dashed #eaeaea;}
.row-option{position: absolute;right: 0px;}
.form-row{
    padding: 10px 5px;
    position: relative;
    border: 2px dashed #eaeaea;
}
.field{
    height: 30px;
    line-height: 30px;
    padding: 0px 4px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-left-width: 6px;
    cursor: pointer;
}
.field.clicked{
    border-color: red;
}
.field span{
    display: inline-block;
    margin: 0px 4px;
}
.set-field-option{display: none;}
.bg-gray{background-color: #eaeaea;}
/* OLD CSS */
.button_wrapper, .column_wrapper{
    
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    border: 2px dashed #eaeaea;
}
.button_wrapper{
    height: 100px;
}
.button_wrapper > .btn{
    margin: 0 auto;
}
.column_wrapper{
    height: 120px;
}
.column_wrapper > .column {
    width: 50%;
    height: 100%;
    cursor: pointer;
    float: left;
    /* background-color: red; */
    padding-top: 35px;
}
.column_wrapper > .column > svg {
    height: 50px;
    width: 100%;
    fill: #eaeaea;
}
.column_wrapper .btnclose, .form-row .btnclose{
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
}
.column_wrapper .btnclose{
    top:0px;
    right:0px;
}
.column_wrapper .btnclose svg, .form-row .btnclose svg{
    width: 15px;
    height: 15px;
    fill: #eaeaea;
}
.column_box{
    display: none;
}
/*\ OLD CSS */
</style>
@stop

@push('head')
@livewireStyles
@endpush

@push('body')
@livewireScripts
@endpush

@include('tenant.leads.sources.webform._builder')