:root {
  --iw-primary-color: #262d33; 
  --iw-action-btn-color: #00acac; 
  --iw-inner-action-btn-background:#adadad78;
  --iw-white-color:#f5f5f5;
  --text-color: #ffffff; 
  --shadow-color: rgba(0, 0, 0, 0.2); 
  --border-color:#ced4da;
}


/* common grid css */
.common-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* common grid css */

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
 
  .panel-heading {
    background: var(--iw-action-btn-color) !important;
    color: var(--bs-white);
    border-radius: unset !important;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    -ms-border-radius: unset !important;
    -o-border-radius: unset !important;
}

.app-content{padding: 0px;}

.panel-body{
  height: calc(100vh - 94px);
  overflow-y: auto;
  padding: 0px !important;
}

.panel{
  margin: 0px !important;
  overflow: visible !important;
}

.btn-zipcode{
  background: var(--iw-action-btn-color) !important;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  height: -webkit-fill-available;
  height: 100%;
  border-radius: 0px 5px 5px 0px;
}
#btnCountry,#btnLatLag{
  height: 100%;
  height: -webkit-fill-available;
}
.dt-scroll-body{
  height:calc(100vh - 190px) !important;
  max-height: none !important;
}

#data-table-fixed-columns_wrapper .row, #data-table-colreorder_wrapper .row {
    margin: 0px !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { 
  background: var(--iw-action-btn-color); color: #FFF; 
} 

.form-check-input:checked {
  background-color: var(--iw-action-btn-color) !important;
  border-color: var(--iw-action-btn-color) !important;
}

.app-header, .app-sidebar-content{
  background: var(--iw-primary-color) !important;
}

.app-sidebar-minify-btn{
  background: var(--bs-app-sidebar-minify-btn-hover-bg) !important;
}

.top-title b , .app-header .navbar-nav .navbar-item .navbar-link , .app-header .navbar-brand{
  color:var(--text-color) !important;
}

.top-title .Title{
  font-size:14px;
}

#header{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.top-title{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row{
  margin:0px !Important;
}

.tabContent ul li:first-child a{
  border-radius: 0px 5px 0px 0px !Important;
  -webkit-border-radius: 0px 5px 0px 0px !Important;
  -moz-border-radius: 0px 5px 0px 0px !Important;
  -ms-border-radius: 0px 5px 0px 0px !Important;
  -o-border-radius: 0px 5px 0px 0px !Important;
}

.InnerNavPills{
  margin: 5px;
  width: fit-content;
  box-shadow: rgba(0, 0, 0, 0.35) 2px 1px 4px;
  border-radius: 5px;
}

    .InnerNavPills a:first-child {
        border-radius: 5px !important;
        width: 100px;
        text-align: center;
        display: flex;
        align-items: center;
        gap: 5px;
    } 

.InnerNavPills .nav-link.active, .InnerNavPills .show>.nav-link{
  background-color: var(--iw-action-btn-color);
  border-radius: 5px !important;
}

.tabContent{
  height: calc(100vh - 199px);
}

.tabContent > ul{
  border-bottom: 1px solid var(--iw-action-btn-color) !Important;
}

.tab-content{
  height: calc(100vh - 234px);
  overflow: auto;
  max-width: 1860px;
}

#btnZipCode{
  height: 100%;
}

.map-container iframe{
  border-radius: 5px !important;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.btn:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(52, 143, 226, .25);
}
.modal-dialog{
  max-width:800px !important;
}

div.dt-processing{border: none !important;background: none;}
div.dt-processing>div:last-child>div{background: var(--bs-app-theme) !important;}

table{
  margin:0px !important;
  border-collapse: collapse !important;
  width: 100%;
  width: -webkit-fill-available !important;
}

thead{
  background: #f3f3f3 !important;
  position: sticky !important;
  top: 0 !important;
  z-index:1 !important;
}
.form-floating > label {
    transform: scale(.85) translateY(-.5rem) translateX(.15rem) !important;
}
/* 
tbody {
  display: block !important;
  overflow: auto !important;
}

tr {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
}  */

/* table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}

thead {
  background: #f3f3f3 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

th, td {
  border: 1px solid #ddd !important;
  padding: 8px;
}

th {
  background: #f3f3f3 !important;
  position: sticky !important;
  top: 0;
  z-index: 3;
}

tbody {
  display: block !important;
  overflow: auto !important;
}

tr {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
} */



table th{text-align:center !important;}

table.dataTable.table-striped > tbody > tr.highlight > * , table tbody tr.highlight{
  background: var(--iw-action-btn-color) !important;
}

table.dataTable.table-striped > tbody > tr.highlight > td, table tbody tr.highlight td{
  color: var(--bs-white) !important;
}

table.table-striped>tbody>tr.highlight:nth-of-type(odd)>* {
  --bs-table-bg-type: var(--iw-action-btn-color) !important;
}

.nav-tabs .nav-item a{
  width: 120px;
  text-align: center;
  padding: 8px 0px;
}

.btn-zipcode:hover .fa{
  transform: scale(1.2);
  transition: background-color 1s ease in out, transform 1s ease in out;
  -webkit-transition: background-color 1s ease in out, transform 1s ease in out;
  -moz-transition: background-color 1s ease in out, transform 1s ease in out;
  -ms-transition: background-color 1s ease in out, transform 1s ease in out;
  -o-transition: background-color 1s ease in out, transform 1s ease in out;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}


.inner-btn-action{
  background:var(--iw-inner-action-btn-background) !important;
  padding: 8px !important;
}

.inside-content{
  padding:5px;
}


#tblZipCode th:first-child,#tblZipCode td:first-child{
  width: 60%;
}

#data-table-colreorder_wrapper .col-12{
  padding:0px;
}
/* =================== only simple modal table css here start ==============  */
.modal-header{  
  background-color: var(--iw-primary-color);
  color: var(--iw-white-color);
  border: none;
}

 
.modal .modal-header button{
  filter: var(--bs-btn-close-white-filter);
}


.modal .modal-body{
  height: calc(100vh - 20rem) !important;
  overflow: auto;
  padding: 0;
}


.modal .modal-body table thead {
  position: sticky;
  top: 0;
  background-color: var(--iw-action-btn-color) !important;
  text-align: center;
}

.modal .modal-body table thead th{
  color: var(--iw-white-color);
}


.modal .modal-body table tr{
  display: table;
  table-layout: fixed;
  width: -webkit-fill-available !important;
  width: 100%;
  border-bottom: none;
  cursor: pointer;
}
/* =================== simple table css ==============  */


.form-floating .form-control, .form-floating .form-select {
  padding: 15px 12px 0px 12px !important;
  min-height: unset;
  height: 45px !important;
}

.GlobleSwitch .form-floating > label{
  padding: 8px;
}


/* .form-floating{
  overflow: hidden;
} */



#header > .navbar-nav .GlobleSwitch  .form-select{
  height: 35px !important;
  border: none;
  width: 250px;
  padding: 0px 10px!important;
  cursor: pointer;
}

body #gritter-notice-wrapper{
  display:none;
}

.InnerZipCodeIcon path , .LatLngGlobeIcon path{
  fill:#FFF;
}

#ProfilesAndSettings > .dropdown-item.active, .dropdown-item:active{
  background-color: var(--iw-action-btn-color) !Important;
}

.menu-submenu , .menu-item{
  cursor:pointer;
}


.SidebarMenusArea{
  display:grid;
  gap:8px;
}

.theme-collapse-btn{  
  display: none;
}

.mandatoryField{
  color: #fb1919;
  padding-left: 2px;
}


#mysidebar{
  z-index: 5;
}


/* Global CSS to hide autofill background and text */
input::-webkit-autofill,
textarea::-webkit-autofill,
select::-webkit-autofill {
  background-color: transparent !important;
  color: black !important; /* Adjust color to match your design */
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: transparent !important;
  color: black !important;
}



/* Preventing autofill suggestion styles on focus */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  box-shadow: none !important;
  background-color: transparent !important;
  color: black !important;
}


/* Hide input fields from autofill suggestions */
input[autocomplete="off"],
textarea[autocomplete="off"] {
  background-color: transparent !important;
}


table tr.highlight .custom-checkbox {
  border: 2px solid white !important;
  box-shadow: 0 0 2px white;
  opacity: 0.7;
}

input:disabled {
    background-color: #f5f5f5 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 1 !important; /* prevents Bootstrap fade */
}


.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent !important;
}