.btn-custom {
    min-width: 120px;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 10px;
}

.ui-front {
    z-index: 9999 !important;
}
.ui-state-active {
    background: #ffd507 !important;
    color: #fff !important;
    border: 1px #ffd507 !important;
}
.imgMultipleShow {
    max-width: 150px;
    margin: 5px;
    object-fit: cover;
    align-items: center;
}
td.dtfc-fixed-left {
    background-color: #fff;
}
th.dtfc-fixed-left {
    background-color: #fafbfe;
}

.td-sub-table{
    /* padding-left: 2em !important; */
    background: #fafbfe !important;
}
.sub-table-profile td {
    height: 2em !important;
}
.sub-table,.sub-table-profile td .form-control-sm {
    height: 2em !important;
    min-height: 2em !important;
}
/* .sub-table .sub-table-lender { width: 15em; }
.sub-table .sub-table-status { width: 10em; }
.sub-table .sub-table-amount { width: 10em; }
.sub-table .sub-table-rate { width: 7em; }
.sub-table .sub-table-term { width: 7em; }
.sub-table .sub-table-daily-weekly { width: 10em; }
.sub-table .sub-table-offered-date { width: 10em; }
.sub-table .sub-table-expired-date { width: 10em; }
.sub-table .sub-table-action { width: 4em; } */

.sub-table tr:first-child td {
    color: #000 !important;
    background-color: #e8e8e8;
}
.sub-table-profile tr:first-child td {
    color: #000 !important;
    background-color: #e8e8e8;
}

.sub-table tbody tr td {
    max-width: 8.5em;
    min-width: 8.5em;
}
.sub-table-profile tbody tr td {
    max-width: 8.5em;
    min-width: 8.5em;
}
.sub-table-profile tbody tr td.col-default {
    max-width: 1.5em;
    min-width: 1.5em;
}
.sub-table tbody tr td.col-default {
    max-width: 1.5em;
    min-width: 1.5em;
}
.sub-table input[type=checkbox] {
    zoom: 1.5;
}

tbody tr td.editable .form-control-sm {
    height: 2em !important;
    min-height: 2em !important;
}

tbody tr td.date .form-control-sm {
    width: 8em;
}
tbody tr td.dateTime .form-control-sm {
    width: 8em;
}

.iframe-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

hr {
    background-color: #ffd507 !important;
}

.unread {
    background: #eee;
}
.fc-day-grid-event {
    height: 2em !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
::-webkit-scrollbar {
    width: 1em;
    height: 1em;
}

.z-index-100 {
    z-index: 100;
}
.icon-sm {
    color: black;
    width: 1.2em;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
  }

  .separator::before,
  .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ffd507;
  }

  .separator:not(:empty)::before {
    margin-right: .25em;
  }

  .separator:not(:empty)::after {
    margin-left: .25em;
  }
  .hidden {
    display: none !important;
  }
  .dropdown-menu.emojis {
    width: 22.2em;
    max-height: 20em;
    overflow-y: auto;
    left: -4.3em;
}
.btn-emoji{
    width: 3.5em;
}
.chat-cont-right .chat-scroll
{
    max-height: unset;
}
.dropdown-more {
    position: absolute;
    inset: 0px 0px auto auto;
    margin: 0px;
    transform: translate(-2em, 0px);
    min-width: 3.3em !important;
}
tr td a img.show-table {
    transform: rotate(-90deg);
}
tr.shown td a img.show-table {
    transform: rotate(0deg) !important;
}
.genPAL {
    padding-left: 1.5em;
}
.ginner-container{
    max-width: 90% !important;
    height:90vh !important;
}
td.editable {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.disabled {
    opacity: .5;
}

/* Check-in/Check-out Button Styles */
#checkinBtnContainer {
    min-width: 140px; /* Tăng width để tránh nhảy nội dung và không bị hình vuông */
}

#checkinBtnContainer .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap; /* Tránh text bị xuống dòng */
    min-width: 100%; /* Đảm bảo button chiếm full width của container */
}

/* Check In - Màu xanh */
#checkinBtnContainer .nav-link.checkin-btn-checkin {
    background-color: #28c76f; /* Success green */
    color: #fff;
}

#checkinBtnContainer .nav-link.checkin-btn-checkin:hover {
    background-color: #22b863;
    color: #fff;
}

#checkinBtnContainer .nav-link.checkin-btn-checkin .checkin-icon,
#checkinBtnContainer .nav-link.checkin-btn-checkin .checkin-text {
    color: #fff;
}

/* Check Out - Màu đỏ */
#checkinBtnContainer .nav-link.checkin-btn-checkout {
    background-color: #ea5455; /* Danger red */
    color: #fff;
}

#checkinBtnContainer .nav-link.checkin-btn-checkout:hover {
    background-color: #e42728;
    color: #fff;
}

#checkinBtnContainer .nav-link.checkin-btn-checkout .checkin-icon,
#checkinBtnContainer .nav-link.checkin-btn-checkout .checkin-text {
    color: #fff;
}

/* Responsive: Desktop - Icon + Text */
@media (min-width: 768px) {
    #checkinBtnContainer .checkin-text {
        display: inline !important;
        font-weight: 500;
        font-size: 14px;
    }
    
    #checkinBtnContainer {
        min-width: 140px; /* Đủ chỗ cho icon + text, không bị hình vuông */
    }
    
    #checkinBtnContainer .nav-link {
        min-width: 140px;
    }
}

/* Responsive: Mobile - Chỉ Icon */
@media (max-width: 767.98px) {
    #checkinBtnContainer .checkin-text {
        display: none !important;
    }
    
    #checkinBtnContainer {
        min-width: 50px; /* Chỉ cần chỗ cho icon */
    }
    
    #checkinBtnContainer .nav-link {
        padding: 8px;
        justify-content: center;
    }
}