Balance Sheet and Profit table

atms-web/src/main/webapp/app/vat/preview/vat-preview-cash-flow-manual/vat-preview-cash-flow-manual-search.html

+<div class="popover">
+    <div class="arrow"></div>
+    <div class="popover-content">
+        <div>
+            <table class="table table-responsive">
+                <tr>
+                    <td>
+                        <span translate="InvoiceRZRQQuery"></span>
+                        <input class="form-control input-width-small" id="certificationDateStart" ng-model="queryParams.certificationDateStart" />&nbsp;-&nbsp;
+                        <input class="form-control input-width-small" id="certificationDateEnd" ng-model="queryParams.certificationDateEnd" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span translate="InvoiceFPDMQuery"></span>
+                        <input class="form-control input-width-middle" type="text" id="invoiceCode" ng-model="queryParams.invoiceCode" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span translate="InvoiceFPHMQuery"></span>
+                        <input class="form-control input-width-middle" type="text" id="invoiceNumber" ng-model="queryParams.invoiceNumber" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span translate="InvoiceGHFSHQuery"></span>
+                        <input class="form-control input-width-middle" type="text" id="sellerTaxNumber" ng-model="queryParams.sellerTaxNumber" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span translate="InvoiceJEQuery"></span>
+                        <input class="form-control input-width-small" type="text" id="amountStart" ng-model="queryParams.amountStart" onkeyup="PWC.inputNumberFormat(this);" />&nbsp;-&nbsp;
+                        <input class="form-control input-width-small" type="text" id="amountEnd" ng-model="queryParams.amountEnd" onkeyup="PWC.inputNumberFormat(this);" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span translate="InvoiceSEQuery"></span>
+                        <input class="form-control input-width-small" type="text" id="taxAmountStart" ng-model="queryParams.taxAmountStart" onkeyup="PWC.inputNumberFormat(this);" />&nbsp;-&nbsp;
+                        <input class="form-control input-width-small" type="text" id="taxAmountEnd" ng-model="queryParams.taxAmountEnd" onkeyup="PWC.inputNumberFormat(this);" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span translate="InvoiceFPLXQuery"></span>
+                        <div class="ui-select-has-border input-width-middle">
+                            <ui-select ng-model="InvoiceType.selected" search-enabled="false" style="text-align:left;" class="input-width-middle">
+                                <ui-select-match>{{$select.selected.name}}</ui-select-match>
+                                <ui-select-choices repeat="item in invoiceTypeList | propsFilter: {name: $select.search}">
+                                    <div title="{{item.name}}" ng-bind-html="item.name"></div>
+                                </ui-select-choices>
+                            </ui-select>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span translate="InvoiceRZJGQuery"></span>
+                        <div class="ui-select-has-border input-width-middle">
+                            <ui-select ng-model="CertificationStatus.selected" search-enabled="false" style="text-align: left; " class="input-width-middle">
+                                <ui-select-match>{{$select.selected.name}}</ui-select-match>
+                                <ui-select-choices repeat="item in cetificationResultList | propsFilter: {name: $select.search}">
+                                    <div title="{{item.name}}" ng-bind-html="item.name"></div>
+                                </ui-select-choices>
+                            </ui-select>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="row">
+            <div style="float:right;margin-right:10px;">
+                <button class="btn btn-default btn-primary" ng-click="doDataFilter('')">
+                    <span class="fa fa-chevron-down" aria-hidden="true"> </span> <span translate="Confirm"></span>
+                </button>
+                <button class="btn btn-default margin-right10" ng-click="doDataFilterReset()">
+                    <span class="fa fa-times" aria-hidden="true"> </span> <span translate="Reset"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

atms-web/src/main/webapp/app/vat/preview/vat-preview-cash-flow-manual/vat-preview-cash-flow-manual.ctrl.js

+vatModule.controller('VatPreviewCashFlowManualController', ['$rootScope', '$scope', '$log', '$translate', '$timeout', 'SweetAlert', '$q', 'uiGridConstants', '$interval', 'vatPreviewService', 'browserService', 'vatSessionService', 'region', 'enums', 'vatExportService', '$filter',
+    function ($rootScope, $scope, $log, $translate, $timeout, SweetAlert, $q, uiGridConstants, $interval, vatPreviewService, browserService, vatSessionService, region, enums, vatExportService, $filter) {
+        'use strict';
+
+        $scope.startDate = new Date(vatSessionService.project.year, 0, 1);
+        $scope.endDate = new Date(vatSessionService.project.year, 11, 31);
+        $scope.dateFormat = $translate.instant('dateFormat4YearMonthDay');
+        $scope.startMonth = vatSessionService.month;
+        $scope.endMonth = vatSessionService.month;
+        $scope.ledgerNameFirst = '';
+        $scope.ledgerCurrencyCodeFirst = '';
+        $scope.ledgerStatusFirst = '';
+        $scope.importDate = '';
+
+        $scope.selectedDate = new Date(vatSessionService.year, vatSessionService.month - 1, 1);
+        $scope.dateFormatMomth = $translate.instant('dateFormat4YearMonth');
+        $scope.viewMode = 1;
+
+        var minDate = [1, vatSessionService.project.year];
+        // var minDate = moment().startOf('month').subtract(0, 'months');
+        var maxDate = [12, vatSessionService.project.year];
+        var setDate = [
+            [vatSessionService.month, vatSessionService.project.year],
+            [vatSessionService.month, vatSessionService.project.year]];
+
+        $scope.monthList = [$translate.instant('Month01'),
+            $translate.instant('Month02'),
+            $translate.instant('Month03'),
+            $translate.instant('Month04'),
+            $translate.instant('Month05'),
+            $translate.instant('Month06'),
+            $translate.instant('Month07'),
+            $translate.instant('Month08'),
+            $translate.instant('Month09'),
+            $translate.instant('Month10'),
+            $translate.instant('Month11'),
+            $translate.instant('Month12')
+        ];
+
+        //发票类型
+        $scope.invoiceTypeList = [
+            {id: 999, name: $translate.instant('AllTheItems')},
+            {id: enums.invoiceType.VATInvoice, name: $translate.instant('VATInvoice')},
+            {id: enums.invoiceType.FreightTransport, name: $translate.instant('FreightTransport')},
+            {id: enums.invoiceType.MotorVehicle, name: $translate.instant('MotorVehicle')},
+            {id: enums.invoiceType.AgriculturalProduct, name: $translate.instant('AgriculturalProduct')}
+        ];
+
+        $scope.InvoiceType = {};
+        $scope.CertificationStatus = {};
+
+        //初始化期间
+        var initPeriods = function () {
+            var curMonth = new Date().getMonth() + 1;
+            $scope.queryParams = {
+                pageInfo: {},
+                periodStart: '',
+                periodEnd: '',
+                orgId: ''
+            };
+        };
+
+        //从数据库中load数据
+        var loadIncomeInvoiceItemDataFromDB = function (pageIndex) {
+            initIncomeInvoiceItemPagination();
+
+            $scope.curIncomeInvoiceItemPage = pageIndex;
+
+            //初始化查询信息
+            $scope.queryParams.pageInfo = {
+                totalCount: $scope.queryIncomeInvoiceItemResult.pageInfo.total,
+                pageIndex: pageIndex,
+                pageSize: constant.pagesize,
+                totalPage: 0,
+            };
+
+            vatPreviewService.getCFManualDataForDisplay($scope.queryParams).success(function (data) {
+                if (data) {
+                    if (data.list.length > 0) {
+                        var itemFirst = data.list[0];
+                        $scope.ledgerNameFirst = itemFirst.ledgerName;
+                        $scope.ledgerCurrencyCodeFirst = itemFirst.ledgerCurrencyCode;
+                        $scope.ledgerStatusFirst = itemFirst.status;
+                        //TODO
+                        $scope.importDate = $filter('date')(data.list[0].date, "yyyy-MM-dd hh:mm:ss");
+                    }
+                    $scope.gridOptions.data = data.list;
+                    $scope.queryIncomeInvoiceItemResult.pageInfo = data;
+                    computeIncomeInvoiceItemPage();
+                }
+            });
+        };
+
+        //点击任意一页加载数据事件
+        var loadIncomeInvoiceDataByPage = function (pageIndex) {
+            loadIncomeInvoiceItemDataFromDB(pageIndex);
+        };
+
+        //计算页数，创建分页栏
+        var computeIncomeInvoiceItemPage = function () {
+
+            if ($scope.queryIncomeInvoiceItemResult.pageInfo && $scope.queryIncomeInvoiceItemResult.pageInfo.total > 0) {
+
+                var totalPage = parseInt($scope.queryIncomeInvoiceItemResult.pageInfo.total / constant.pagesize);
+                totalPage = $scope.queryIncomeInvoiceItemResult.pageInfo.total % constant.pagesize == 0 ? totalPage : totalPage + 1;
+
+                //计算本页记录数
+                if ($scope.queryIncomeInvoiceItemResult.pageInfo.pageNum === totalPage) {
+                    var pageItemCount = $scope.queryIncomeInvoiceItemResult.pageInfo.total % constant.pagesize;
+                    $scope.curPageItemCount = pageItemCount == 0 ? constant.pagesize : pageItemCount;
+                } else {
+                    $scope.curPageItemCount = constant.pagesize;
+                }
+
+                $scope.queryIncomeInvoiceItemResult.pageInfo.totalPage = totalPage;
+
+                var createPage = $("#totalInvoicePage").createPage({
+                    pageCount: totalPage,
+                    current: $scope.curIncomeInvoiceItemPage,
+                    backFn: function (p) {
+                        //单击回调方法，p是当前页码
+                        loadIncomeInvoiceDataByPage(p);
+                    }
+                });
+
+                $('#totalInvoicePage').css('display', 'inline-block');
+            } else {
+                //如果查询结果为0，则直接设置本页记录数为0
+                $scope.curPageItemCount = 0;
+                var createPage = $("#totalInvoicePage").createPage({
+                    pageCount: 0,
+                    current: $scope.curIncomeInvoiceItemPage,
+                    backFn: function (p) {
+                        //单击回调方法，p是当前页码
+                        loadIncomeInvoiceDataByPage(p);
+                    }
+                });
+
+                $('#totalInvoicePage').css('display', 'inline-block');
+            }
+        };
+
+        //初始化分页信息
+        var initIncomeInvoiceItemPagination = function () {
+            $scope.queryIncomeInvoiceItemResult = {
+                list: [],
+                pageInfo: {
+                    totalCount: -1,
+                    pageIndex: 1,
+                    pageSize: constant.pagesize,
+                    totalPage: 0,
+                }
+            }
+            $scope.curIncomeInvoiceItemPage = 1;
+        };
+
+        //在popover打开时执行事件
+        var showPopover = function () {
+            $timeout(function () {
+                initDatePickers();
+            }, 500);
+        };
+
+        //初始化时间控件
+        var initDatePickers = function () {
+            //认证开始时间
+            var ele1 = $("#input-invoice-period-picker");
+            ele1.datepicker({
+                startDate: $scope.startDate,
+                endDate: $scope.endDate,
+                language: region,
+                viewMode: $scope.viewMode,
+                minViewMode: $scope.viewMode,
+                autoclose: true,//选中之后自动隐藏日期选择框
+                clearBtn: true,//清除按钮
+                todayBtn: false,//今日按钮
+                format: $scope.dateFormat//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
+            }).on('changeDate', function (e) {
+                // 开始月份
+                var startMonth = vatSessionService.project.year * 100 + e.date.getMonth() + 1;
+                $scope.queryParams.periodStart = startMonth;
+                $scope.queryParams.periodEnd = startMonth;
+                loadIncomeInvoiceItemDataFromDB(1);
+            });
+            ele1.datepicker("setDate", $scope.selectedDate);
+            //认证结束时间
+
+
+            // $('#input-invoice-period-picker').focus(function () {
+            //     $('.filter-button').popover("hide");
+            // });
+            // //初始化month-picker
+            // $('#input-invoice-period-picker').rangePicker({
+            //     minDate: minDate,
+            //     maxDate: maxDate,
+            //     setDate: setDate,
+            //     months: $scope.monthList,//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            //     ConfirmBtnText: $translate.instant('Confirm'),
+            //     CancelBtnText: $translate.instant('ButtonCancel')
+            // })
+            //     .on('datePicker.done', function (e, result) {
+            //         //开始月份
+            //         var startMonth = result[0][1] * 100 + result[0][0];
+            //         //结束月份
+            //         var endMonth = result[1][1] * 100 + result[1][0];
+            //         $scope.startMonth = startMonth;
+            //         $scope.endMonth = endMonth;
+            //
+            //         $scope.queryParams.periodStart = startMonth;
+            //         $scope.queryParams.periodEnd = endMonth;
+            //         loadIncomeInvoiceItemDataFromDB(1);
+            //     });
+
+
+
+            // var ele2 = $("#certificationDateEnd");
+            // ele2.datepicker({
+            //     startDate: $scope.startDate,
+            //     endDate: $scope.endDate,
+            //     language: region,
+            //     autoclose: true,//选中之后自动隐藏日期选择框
+            //     clearBtn: true,//清除按钮
+            //     todayBtn: false,//今日按钮
+            //     format: $scope.dateFormat//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
+            // })
+            // ele2.datepicker("setDate", $scope.queryParams.certificationDateEnd);
+
+
+            //初始化已选择的发票类型和认证结果
+            // $scope.InvoiceType.selected = _.find($scope.invoiceTypeList, function (v) {
+            //     return v.id == $scope.queryParams.invoiceType;
+            // })
+            //
+            // $scope.CertificationStatus.selected = _.find($scope.cetificationResultList, function (v) {
+            //     return v.id == $scope.queryParams.certificationStatus;
+            // })
+        };
+
+        //导出现金流量信息
+        $scope.downloadCashFlow = function () {
+            var localDate = $filter('date')(new Date(), 'yyyyMMddHHmmss');
+            var fileName = "现金流量信息";
+            vatPreviewService.initExportCFData($scope.queryParams, fileName).then(function (data) {
+                if (data) {
+                    ackMessageBox.success(translate('FileExportSuccess'));
+                }
+            });
+        };
+
+        (function initialize() {
+            $log.debug('VatPreviewInputInvoiceController.ctor()...');
+
+
+
+            initPeriods();
+
+            showPopover();
+
+
+            // $('#input-invoice-period-picker').focus(function () {
+            //     $('.filter-button').popover("hide");
+            // });
+            // //初始化month-picker
+            // $('#input-invoice-period-picker').rangePicker({
+            //     minDate: minDate,
+            //     maxDate: maxDate,
+            //     setDate: setDate,
+            //     months: $scope.monthList,//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            //     ConfirmBtnText: $translate.instant('Confirm'),
+            //     CancelBtnText: $translate.instant('ButtonCancel')
+            // })
+            //  .on('datePicker.done', function (e, result) {
+            //      //开始月份
+            //      var startMonth = result[0][1] * 100 + result[0][0];
+            //      //结束月份
+            //      var endMonth = result[1][1] * 100 + result[1][0];
+            //      $scope.startMonth = startMonth;
+            //      $scope.endMonth = endMonth;
+            //
+            //      $scope.queryParams.periodStart = startMonth;
+            //      $scope.queryParams.periodEnd = endMonth;
+            //      loadIncomeInvoiceItemDataFromDB(1);
+            //  });
+
+            // var ele = $('#input-invoice-period-picker');
+            // ele.datepicker({
+            //     startDate: $scope.startDate,
+            //     endDate: $scope.endDate,
+            //     language: region,
+            //     viewMode: 2,
+            //     minViewMode: 2,
+            //     autoclose: true,//选中之后自动隐藏日期选择框
+            //     clearBtn: false,//清除按钮
+            //     todayBtn: false,//今日按钮
+            //     format: $scope.dateFormat//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
+            // });
+            // ele.datepicker("setDate",$scope.selectedDate);
+
+
+            $scope.gridOptions = {
+                rowHeight: constant.UIGrid.rowHeight,
+                selectionRowHeaderWidth: constant.UIGrid.rowHeight,
+                virtualizationThreshold: 50,//默认加载50条数据，避免在数据展示时，只显示前面4条
+                enableSorting: false,
+                enableColumnMenus: false,
+                columnDefs: [
+                    {
+                        name: $translate.instant('CashFlowEntry'),
+                        width: '32%',
+                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.itemName}}<span></div>'
+                    },
+                    {
+                        name: $translate.instant('Item'),
+                        width: '38%',
+                        cellTemplate: '<div class="ui-grid-cell-contents"><span>{{row.entity.itemName2}}<span></div>'
+                    },
+                    {
+                        name: $translate.instant('CurrentPeriodAmount'),
+                        headerCellClass: 'rightHeader',
+                        width: '15%',
+                        cellTemplate: '<div class="ui-grid-cell-contents" style="text-align: right"><span>{{row.entity.periodAmt | number:2}}<span></div>'
+                    },
+                    {
+                        name: $translate.instant('ThisYearAccumulatedAmount'),
+                        headerCellClass: 'rightHeader',
+                        width: '15%',
+                        cellTemplate: '<div class="ui-grid-cell-contents" style="text-align: right"><span>{{row.entity.ytdAmt | number:2}}<span></div>'
+                    }
+                ]
+            };
+
+            $scope.showPopover = showPopover;
+            initPeriods();
+            initIncomeInvoiceItemPagination();
+            //初始化查询条件-期间范围
+            $scope.queryParams.periodStart = vatSessionService.year * 100 + vatSessionService.month;
+            $scope.queryParams.periodEnd = vatSessionService.year * 100 + vatSessionService.month;
+            $scope.queryParams.orgId = vatSessionService.project.organizationID;
+            if ($rootScope.currentLanguage === 'en-us') {
+                $('.periodInput')[0].style.left = "240px";
+            } else {
+                $('.periodInput')[0].style.left = "140px";
+            }
+            loadIncomeInvoiceItemDataFromDB(1);
+
+        })();
+    }
+]);
+
+
+
+

atms-web/src/main/webapp/app/vat/preview/vat-preview-cash-flow-manual/vat-preview-cash-flow-manual.html

+<div class="vat-preview-cash-flow-manual" id="mainPreviewDiv">
+    <div class="top-area-wrapper" style="margin-top: 10px">
+        <span translate="CashFlowDDTitle" class="text-bold"></span> &nbsp;&nbsp;|&nbsp;&nbsp;<span class="text-bold"
+                                                                                                   translate="InvoiceQJ"></span>：
+        <input type="text" class="form-control input-width-middle periodInput"
+               style="position: relative; top: -30px; width: 120px; left: 130px;" id="input-invoice-period-picker"/>
+        <span ng-click="downloadCashFlow()" style="position: relative; top: -13px; left: 95%;"><i
+                class="fa fa-file-excel-o" aria-hidden="true"></i>{{'ExportBtn' | translate}}</span>
+    </div>
+
+    <div style="margin-bottom: 10px;margin-left: 20px;margin-top: 10px;">
+        {{'EnterpriseAccountSetName' | translate }}：<span class="numAmount">{{ledgerNameFirst}}</span>&nbsp;&nbsp;&nbsp;
+        {{'ImportTime' | translate }}：<span class="numAmount">{{importDate| date:'yyyy-MM-dd hh:mm:ss'}}</span>
+    </div>
+
+    <div id="mainAreaDiv" class="main-area">
+        <div class="inputInvoiceGrid" ui-grid="gridOptions">
+            <div class="watermark" ng-show="!gridOptions.data.length"><span translate="NoDataAvailable"></span></div>
+        </div>
+        <div class="pagination-container">
+            <span>本页{{curPageItemCount}}条记录，共{{queryIncomeInvoiceItemResult.pageInfo.total}}条记录</span>
+            <div id="totalInvoicePage" class="common-pagination" style="display:none;">
+            </div>
+        </div>
+    </div>
+
+</div>

atms-web/src/main/webapp/app/vat/preview/vat-preview-cash-flow-manual/vat-preview-cash-flow-manual.js

+vatModule.directive('vatPreviewCashFlowManual', ['$log', 'browserService', '$translate', 'region', '$timeout',
+    function ($log, browserService, $translate, region, $timeout) {
+        $log.debug('vatPreviewCashFlowManual.ctor()...');
+
+        return {
+            restrict: 'E',
+            templateUrl: '/app/vat/preview/vat-preview-cash-flow-manual/vat-preview-cash-flow-manual.html' + '?_=' + Math.random(),
+            scope: {},
+            controller: 'VatPreviewCashFlowManualController',
+            link: function ($scope, element) {
+
+            }
+        }
+    }
+]);
\ No newline at end of file

atms-web/src/main/webapp/app/vat/preview/vat-preview-cash-flow-manual/vat-preview-cash-flow-manual.less

+@import "~/app-resources/less/theme.less";
+
+.vat-preview-cash-flow-manual {
+    background-color: white;
+    height: 100%;
+
+    .numAmount {
+        padding: 0 3px;
+        height: 21px;
+        margin-left: 5px;
+        /* font-family: 'Arial'; */
+        font-weight: 600;
+        border-radius: 2px;
+        font-style: normal;
+        outline: none;
+        border: none;
+        min-width: 20px;
+        background-color: #DDDDDD;
+        color: #AA0000;
+    }
+
+    .top-area-wrapper {
+        height: 30px;
+        width: 98%;
+        margin: 0 20px;
+
+        .filter-button {
+            width: 30px;
+            margin-top: 16px;
+        }
+
+        .operation-wrapper {
+            margin: 15px 25px 10px 10px;
+
+            span {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .filter-popup-wrapper {
+        display: none;
+    }
+
+
+
+    .margin-left20 {
+        margin-left: 20px;
+    }
+    /*******************************************/
+    /*Filter Criteria tags:*/
+    .tag {
+        font-size: 12px;
+        padding: .3em .4em .4em;
+        margin: 0 .1em;
+
+        a {
+            color: #bbb;
+            cursor: pointer;
+            opacity: 0.6;
+            margin: 0 0 0 .3em;
+
+
+            &:hover {
+                opacity: 1.0;
+            }
+
+            .glyphicon-white {
+                color: #fff;
+                margin-bottom: 2px;
+            }
+        }
+
+        .remove {
+            vertical-align: bottom;
+            top: 0;
+        }
+    }
+    /*Filter Criteria tags:*/
+    /*******************************************/
+    .main-area {
+        height: 100%;
+        margin: 0 20px;
+
+        .watermark {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            opacity: .25;
+            font-size: 3em;
+            width: 100%;
+            text-align: center;
+            z-index: 1000;
+        }
+
+        .inputInvoiceGrid {
+            width: 100%;
+            height: calc(~'100% - 158px');
+
+            .ui-grid-header-cell-wrapper .ui-grid-header-cell-row .ui-grid-cell-contents {
+                height: 40px;
+
+                i {
+                    display: none;
+                }
+            }
+        }
+    }
+
+
+    .form-control {
+
+        &:focus {
+            border-color: transparent;
+            -webkit-box-shadow: none;
+            box-shadow: none;
+            border: 1px solid #ccc;
+        }
+    }
+
+    .input-width-middle {
+        width: 217px;
+    }
+}
+
+.rightHeader{
+    text-align: right;
+}
+
+.popover {
+    min-width: 370px;
+    left: 119px !important;
+
+    .arrow {
+        left: 5% !important;
+    }
+}
+
+.popover-content {
+    td {
+        text-align: right;
+        padding: 6px;
+
+        span {
+            float: left;
+        }
+    }
+
+    .form-control {
+        display: inline-block;
+
+        &:focus {
+            border-color: transparent;
+            -webkit-box-shadow: none;
+            box-shadow: none;
+            border: 1px solid #ccc;
+        }
+    }
+
+    .input-width-small {
+        width: 100px;
+    }
+
+    .input-width-middle {
+        width: 217px;
+    }
+}