/* General Modal Styles */
.confirmbox {
  padding: 24px 10px 23px;
}

.modalstylecontent h4 {
  font-weight: 500;
  font-size: 20px;
  color: #221E1E;
  text-align: center;
  margin-bottom: 20px;
}

.modalstylecontent p {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: #606167;
}

.modalformbtn a,
.modalformbtn button {
  border-radius: 5px;
  color: #fff;
  min-width: 110px;
  text-align: center;
  padding: 7px 10px;
  display: inline-block;
  font-size: 14px;
  outline: none;
}

.modalformbtn a:hover,
.modalformbtn button:hover {
  text-decoration: none;
}

.modalformbtn a:not(:last-child),
.modalformbtn button:not(:last-child) {
  margin-right: 20px;
}

.modalformbtn .btn-submit {
  background: linear-gradient(180deg, #67B0F9 0%, #368CF6 100%);
  border: 1px solid #67A8EB;
}

.modalformbtn .btn-cancel {
  border: 1px solid #CCD2DA;
  border-radius: 5px;
  color: #469CF8;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
}

.card-header.with-elements {
  padding: 0.4375rem 0;
}

.white_line_btn {
  background: #fff;
  border: 1px solid #0092FF;
  color: #0092FF !important;
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
}

.white_line_btn i {
  margin-right: 10px;
}

table.dataTable thead th {
  background: rgb(0 146 255 / 10%);
  color: #000;
  font-size: 14px;
  font-weight: 600;
  padding: 20px 12px;
  border-right: 1px solid #E2E2E2;
}
table.dataTable thead th:first-child {
  border-radius: 10px 0 0 0;
}

table.dataTable thead th:last-child {
  border-radius: 0 10px 0 0;
}

table.dataTable td {
  padding: 15px 12px;
}

.free-hours {
  color: red;
}

/* Modal Specific Adjustments */
.resourcehourshistorymodal .close img {
  width: 13px;
}

.resourcehourshistorymodal .close {
  display: flex;
  justify-content: center;
  align-items: center;
  right: -8px;
  top: 10px;
}

.exportExcelConfirmationModal .modal-dialog {
  min-height: auto !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.resourcehourshistorymodal .modal-dialog {
  max-width: 80%; /* Adjust to desired width */
  width: 100%;
  max-height: 80vh; /* Adjust to desired height */
  min-height: auto !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.resourcehourshistorymodal .modal-content {
  height: auto; /* Adjust height to fit content */
  max-height: 80vh; /* Ensure it fits within viewport */
}

/* Scrollbar for Modal Body */
.resourcehourshistorymodal .modal-body {
  max-height: 60vh; /* Adjust height as needed */
  overflow-y: auto;
  padding-bottom: 10px; /* Reduce white space below */
}

/* Responsive Adjustments */
@media screen and (max-width: 767px) {
  .exportExcelConfirmationModal .modal-dialog {
      min-width: calc(100% - 20px) !important;
  }
  .resourcehourshistorymodal .modal-dialog {
      min-width: calc(100% - 20px) !important;
  }
}