<table class="table table-bordered table-hover table-condensed table-striped table-md">
        <thead>
            <tr>
                <th></th>
                <th>@Localizer["Actually"]</th>
                <th>@Localizer["Barcode"]</th>
                <th>@Localizer["Name"]</th>
                <th>@Localizer["Unit"]</th>
                <th>@Localizer["Price"]</th>
                <th>@Localizer["Currency"]</th>
                <th>@Localizer["TradeDiscount"]</th>
                <th>@Localizer["DescriptionOfOffers"]</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        @foreach (var service in Model.PageModel.Offers)
        {
            <tr>
                <td>
                    <div class="icon-color">
                        <span class="glyphicon glyphicon-plus-sign"></span>
                    </div>
                </td>
                <td>
                    <div class="checkbox-md" style="height: 10px; width: 10px;">
                        <label>
                            <input type="checkbox" checked="@service.Actually" spellcheck="0">
                            <span class="label-text"></span>
                        </label>
                    </div>
                </td>
                <td>@service.Barcode</td>
                <td style="color: #2196F3;">@service.Name</td>
                <td>@service.Unit</td>
                <td>@service.Price</td>
                <td>@service.Currency</td>
                <td>@service.Discount</td>
                <td>@service.Description</td>
                <td>
                    <a class="pull-right" data-modal-page="Offers" data-modal-action="delete" data-id="@service.Id">
                        <h3 class="glyphicon glyphicon-remove-circle item-box-icon"></h3></a>
                    <a class="pull-right" data-modal-page="Offers" data-modal-action="update" data-id="@service.Id">
                        <h3 class="glyphicon glyphicon-edit item-box-icon"></h3></a>
                </td>
            </tr>
            <tr hidden="true">
                <td colspan="10">
                    <table class="table table-bordered table-hover table-condensed table-striped">
                        <thead>
                        <tr>
                            <th>@Localizer["ParamName"]</th>
                            <th>@Localizer["ParamValue"]</th>
                            <th>@Localizer["ParamUnit"]</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach (var param in service.Parameters)
                        {
                            <tr>
                                <td>@Localizer[param.Name]</td>
                                <td>@Localizer[param.Value]</td>
                                <td>@Localizer[param.Unit]</td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </td>
            </tr>
        }
        </tbody>
    </table>

.table-md tr:hover {
    cursor: pointer;
}

.table-md tbody:nth-child(4n+1) {
    background: #CCC;
}


.table-md td{
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
    margin-top: 20px;
    border-radius: 2px;
    transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
}

.table-md td:hover {
    background-color: #e0effd;
    transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    transform: scale(1.02);
    -moz-transform: scale(1.02);
    -webkit-transform: scale(1.02);
}

.table-md thead {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #878787;
    background-color: #fff;
}