Notes

.payroll-header h1 {
font-size: 25px;
}
.payroll #getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
max-height: calc(100vh - 366px)
}
.payroll .card-section {
margin: 0px;
}

.payroll h2 {
font-size: 28px;
}

.payroll h5 {
font-size: 16px;
}

.payroll div#getEmployeetbl_wrapper {
margin-top: 0px;
}
.employeelist #getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
/* max-height:450px;
min-height: 550px;
overflow: auto;*/
max-height: calc(100vh - 270px) !important;
height: auto;
overflow: auto;
}
:is(.employeelist) div#getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
max-height: 500px;
}

.costosTable-outer h2 {
color: #080248;
}
.costosTable-outer {
margin: 16px 0px 0px 0px;
}
table#getEmployeetbl thead tr th:nth-child(1),
table#getEmployeetbl thead tr th:nth-child(2)
/*table#getEmployeetbl thead tr th:nth-child(3),
table#getEmployeetbl thead tr th:nth-child(4),
table#getEmployeetbl thead tr th:nth-child(5)*/
/*table#getEmployeetbl thead tr th:nth-child(6)*/ {
z-index: 3;
}

.payroll #getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
max-height: calc(100vh - 366px)
}

.employeelist #getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
/* max-height:450px;
min-height: 550px;
overflow: auto;*/
max-height: calc(100vh - 270px) !important;
height: auto;
overflow: auto;
}

table#getEmployeetbl thead {
position: sticky;
top: 0;
z-index:2;
}

table#getEmployeetbl {
margin: 0 !important;
}

div#getEmployeetbl_wrapper .row:nth-child(1) {
padding-bottom: 10px;
}

table#getEmployeetbl th {
color: white;
background: #080248;
text-align: center;
}
table#getEmployeetbl td,
table#getEmployeetbl th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
text-wrap: nowrap; /*21-02-24*/
font-size: 14px;
padding: 4px;
}

table#getEmployeetbl th {
color: white;
background: #080248;
text-align: center;
}

div#getEmployeetbl_wrapper .col-sm-12 {
display: block;
/* width: 100%; */
overflow-x: auto;
}

div#getEmployeetbl_wrapper {
margin-top: 20px;
}

div.dataTables_wrapper div.dataTables_paginate {
margin-top: 10px;
}

table#getEmployeetbl td,
table#getEmployeetbl th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
text-wrap: nowrap; /*21-02-24*/
font-size: 14px;
padding: 4px;
}
//////////////////////
@{
ViewBag.Title = "SMX Services Consulting - Company List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model SMXServicesConsulting.DataModel.ViewModel.CompanyMasterModel;
<div class="p-3 payroll employeelist">

<div class="card-section ">
<div>
<button type="button" id="BtnAddCompany" class="btn btn-primary float-end border-0 " style="background-color:#080248;">Add Company</button>
</div>
<h2><strong>Company List</strong></h2>
</div>
<div class="costosTable-outer">
<div class="table-responsive">

<table id="getEmployeetbl" class="table table-striped" style="width:100%">
<thead>
<tr>
<th hidden>TableId</th>
<th>S.No.</th>
<th>Company Name</th>
<th>Company ID</th>
<th>Action</th>
<th>Status</th>
<th hidden>IsActive</th>
</tr>
</thead>
<tbody id="myTable">
@{
var srNo = 1;
}
@if (Model != null)
{
if (Model.CompanyModelList != null && Model.CompanyModelList.Any())
{
if (@Model.CompanyModelList.Count() == 0)
{
<tr>
<td colspan="4">No Records Available</td>
</tr>
}
else
{
@foreach (var item in Model.CompanyModelList)
{
<tr>
<td hidden>@item.Id</td>
<td>@srNo</td>
<td>@item.CompanyName</td>
<td>@item.CompanyCode</td>
<td class="text-center">
<span class="edit-icon"><i class="fa-regular fa-pen-to-square" id="BtnUpdateCompany" style="color:cornflowerblue;"></i></span>
</td>
<td class="text-center">
@if (item.IsActive == true)
{
<label class="switch">
<input type="checkbox" value="" id="companyStatus" checked>
<span class="slider round" style="height: 24px;width: 48px"></span>
</label>
}
else
{
<label class="switch">
<input type="checkbox" value="" id="companyStatus">
<span class="slider round" style="height: 24px;width: 48px"></span>
</label>
}
</td>
<td hidden>@item.IsActive</td>
</tr>
srNo = srNo + 1;
}
}
}
}
</tbody>
</table>
</div>
</div>

</div>
<div class="modal addCompanyPopup" role="dialog" tabindex="-1" aria-labelledby="gridSystemModalLabel" data-bs-backdrop="static" data-bs-keyboard="false">
</div>
<script src="~/js/site.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/common.js"></script>
<script src="~/js/company.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
new DataTable('#getEmployeetbl', {
fixedHeader: true,
"pageLength": 25,
});
</script>

////////////////Responsive
@media screen and (max-device-width: 1180px) and (min-device-width: 1024px) and (orientation : landscape) {
}

@media screen and (max-device-width: 1180px) and (min-device-width: 1180px) and (orientation : landscape) {
.banner-section {
min-height: 85vh;
}

.form-section-outer {
margin-top: 113px;
}
}

@media screen and (max-device-width: 1024px) and (min-device-width: 1024px) and (orientation : landscape) {
.banner-section {
min-height: 85vh;
}

.form-section-outer {
margin-top: 113px;
}
}

@media screen and (max-device-width: 768px) and (min-device-width: 768px) and (orientation : portrait) {
.registration-form-section {
margin: 150px 20px 35px 20px;
}
}

@media(max-width:1023px) {
}

@media(max-height:720px) {
div#getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
max-height: 170px;
}
}

@media(min-height:900px) {
div#getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
max-height: 520px;
}
}

@media(min-height:1200px) {
div#getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
max-height: 720px;
}
}

@media(min-height:1400px) {
div#getEmployeetbl_wrapper .row.dt-row .col-sm-12 {
max-height: 920px;
}
}



@media(max-width: 991px) {

.smx-header button {
display: none;
}
}

@media(max-width:767px) {
}

@media(max-width: 600px) {
.form-section-outer {
width: 100%;
margin: 0px 20px;
margin-top: 113px;
}

.banner-section {
min-height: 85vh;
}

.pattern h6 {
font-size: 12px;
text-align: center;
margin: 0px 20px;
margin-top: -20px;
}

.pattern img {
height: 66px;
}

.smx-header {
padding: 0px;
}

.registration-form-section {
/* margin: 150px 20px 35px 20px;*/
margin: 35px 20px 35px 20px;
}
}

@media(min-width: 319px) and (max-width: 360px) {
.banner-section {
min-height: 94vh;
}
}


@media(max-width:767px) {
.main .left-sidebar {
margin-left: -266px;
}
}