/* Cards Scrool */
.scrollable-card {
  max-height: 300px; /* Adjust the desired height */
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox support, you can use 'auto' for better browser compatibility */
  scrollbar-color: transparent; /* Set the thumb and track colors to transparent */
}
.scroll {
  max-height: 82vh; /* Adjust the desired height */
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox support, you can use 'auto' for better browser compatibility */
  scrollbar-color: transparent; /* Set the thumb and track colors to transparent */
}
/* Hide the default scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #252231;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f1f1f169;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Buttons */
.btn-xxs {
  font-size: 10px !important;
  padding: 2px 8px !important;
}

/* .btn-x {
  font-size: 11px !important;
  padding: 2px 8px !important;
} */
.btn-x {
  font-size: 12px !important;
  padding: 3px 8px !important;
}

.btn-dark {
  color: #fff;
  background-color: #081624 !important;
  border-color: #081624 !important;
}

.btn-warning {
  background: #d3c944  !important;
  border-color: #d3c944  !important;
  color: rgb(46, 42, 53) !important;
}
.btn-warning:hover {
  background: #ffad46 !important;
  border-color: #ffad46 !important;
  color: #524e4e !important;
}

/* .btn-danger {
  background: #a11f1f  !important;
  border-color: #a11f1f  !important;
  color: rgb(228, 225, 235) !important;
}
.btn-danger:hover {
  background: #8b5109 !important;
  border-color: #8b5109 !important;
  color: #e9dede !important;
}

.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0);
} */

/* Background colors */
.bg-dark2 {
  background-color: #120e24e5 !important;
}
.bg-dark-fade {
  background-color: #120e2430 !important;
}
.bg-lightdark {
  background-color: #120e240c !important;
}

/* Select radio button */

.selectgroup-input:checked + .selectgroup-primary {
  border-color: #9c9c9a !important;
  z-index: 1 !important;
  color: #ffffff !important;
  background: rgb(61, 31, 145) !important;
}

/* Input css */
.input-cust {
  width: 100px;
  height: 25px;
  font-size: 12px;
  color: #fff;
  padding: 0.15rem 0.25rem!important;
  background-color: #1a2035!important;
  border-color: #2f374b!important;
}

.input-xxs {
  width: 85px;
  height: 30px;
  font-size: 14px;
  color: #fff;
  padding: 0.15rem 0.25rem!important;
  background-color: #1a2035!important;
  border-color: #2f374b!important;
}

/* .badge-xs {
  border-radius: 50px;
  margin-left: 6px;
  line-height: 1.5;
  padding: 2px 6px;
  vertical-align: middle;
  font-weight: 400;
  font-size: 14px;
  background: #3e3b4d00;
  color: #a4c1ff !important;
  border: 1px solid #ddd !important;
} */

/* .badge-fade {
  border-radius: 50px !important;
  margin-left: auto !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  vertical-align: middle !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  border: 1px solid #dddddde0 !important;
} */

.badge-general {
background: #ceff46;
color: #000 !important;
}
.badge-watch {
  background: #306a79;
  color: #e4dbdb !important;
}
.badge-punch {
  background: #f07922;
  color: #222121 !important;
}
/* Tables */
/* th {
height: 32px !important;
}
td {
height: 42px !important;
} */
.table-container {
  width: 100%;
  overflow: auto;
}

.table-font-sm td, .table-font-sm th {
  font-size: 12.5px !important;
  /* border-top-width: 0;
  border-bottom: 1px solid;
  border-color: #ebedf2 !important;
  padding: 0 25px !important;
  height: 60px;
  vertical-align: middle !important; */
}

.table-striped tbody tr:nth-of-type(2n+1) {
background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Nav pills */
.nav-pills.nav-secondary .nav-link.active {
background: #6861ce !important;
border: 1px solid #6861ce !important;
}

.nav-pills.nav-danger .nav-link.active, .nav-pills.nav-default .nav-link.active, .nav-pills.nav-info .nav-link.active, .nav-pills.nav-primary .nav-link.active, .nav-pills.nav-secondary .nav-link.active, .nav-pills.nav-success .nav-link.active, .nav-pills.nav-warning .nav-link.active {
color: #fff !important;
}

body[data-background-color="dark"] .nav-pills .nav-link:not(.active) {
background: #182035 !important;
}
.nav-pills > li:first-child > .nav-link {
border-radius: 4px 0 0 4px !important;
}
.nav-pills.nav-danger .nav-link, .nav-pills.nav-default .nav-link, .nav-pills.nav-info .nav-link, .nav-pills.nav-primary .nav-link, .nav-pills.nav-secondary .nav-link, .nav-pills.nav-success .nav-link, .nav-pills.nav-warning .nav-link {
border: 1px solid #30384f !important;
padding: 10px 20px !important;
font-size: 14px !important;
}
.nav-pills > li > .nav-link {
margin-left: -1px;
border-radius: 0 !important;
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #1572e8;
color: #8a8e8e;
}

/* Nav pill tab font color virtical */
.nav-pills.flex-column .nav-link {
border-radius: 0 !important;
border: 1px solid #1572e8;
color: #a9aeaf;
margin-top: -1px;
text-align: center;
word-wrap: normal;
padding: 10px 0;
}

/* Border fade */
.border-fade {
border-color: #6c757d33 !important;
}

/* Background body */
body[data-background-color="dark"] {
background: #04050f !important;
}

.spinner-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.spinner {
border: 4px solid rgba(255, 255, 255, 0.245);
border-top: 4px solid #ffffff;
border-radius: 50%;
width: 22px;
height: 22px;
animation: spin 1s linear infinite;
}
/* text-light */
.text-light2
{
  color: #f8f9fab2 !important;
}

/* card hover effect */
.card-hover {
  transition: transform 0.05s ease-in-out; /* Smooth transition for the transform property */
}
.card-hover:hover {
  transform: scale(1.007); /* Slightly increase the scale */
  box-shadow: 0 6px 10px rgba(51, 47, 47, 0.315) !important; /* Optional: Add a shadow for more depth */
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@media (min-width: 1601px) {
  .col-xxl-10 {
    flex: 0 0 83.333333%; /* 10 out of 12 columns */
    max-width: 83.333333%; /* 10 out of 12 columns */
  }
  /* Add additional custom styles for xxl breakpoint as needed */
}