body {
  /* background-color: #f5f5f5; */
  background-color: #ffffff;
}
.body-wrapper {
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 450px;
  position: relative;
  bottom: 0;
}

.card {
  width: 100%;
  max-width: 400px;
  margin: 15px auto;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.card-search { 
    width: 100%;
    /* max-width: 400px; */
    /* margin: 15px auto; */
    border-radius: 0px;
    /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
    background-color: #0dcaf0;
}

.card-header {
  background-image: url('your-image-url-here'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  height: 200px;
  border-radius: 15px 15px 0 0;
}

.card-body {
  padding: 20px;
}

.card-title {
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 20px;
}



.custom-button {
  background-color: #3D4DB7;
  color: white;
  width: 100%;
  border-radius: 10px;
  font-size: 1rem;
  padding: 10px;
}

.custom-button:hover {
  background-color: #2b3a97;
  color: white;
}

.select-container {
  background-color: #F2F3F4;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.select-container i {
  font-size: 1.2rem;
  margin-right: 10px;
  color: #6c757d;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 15px 15px 0 0;
}

.bottom-nav a {
  text-align: center;
  color: #3D4DB7;
  font-size: 1rem;
  text-decoration: none;
}

.bottom-nav a:hover {
  color: #2b3a97;
}

.bottom-nav i {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.logo-text {
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  padding: 15px;
  /* border-bottom: 1px solid #3D4DB7; */
  background-color:#007bff
}

@media (max-width: 400px) {
  .card, .bottom-nav {
    width: 100%;
  }
}

/* Modal Styling */
.modal.fade .modal-dialog {
max-width:100%;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.modal.fade.show .modal-dialog {
  transform: translateY(0);
}

 /* Modal Styling */
 .modal-fullscreen {
  max-width: 100%;
  height: 100vh;
  margin: 0;
}

/* Ensure modal content is full screen */
.modal-fullscreen .modal-content {
  /* height: 100vh; */
  height:100%;
  border-radius: 0;
}

.modal-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
  border-radius: 15px 15px 0 0;
  max-width:400px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-body {
  /* max-height: 50vh; */
  overflow-y: auto;
}


h2 {  
text-align: center;  
color: #333;  
}  

.guest-type {  
display: flex;  
align-items: center;  
justify-content: space-between;  
margin: 15px 0;  
}  

.icon {  
font-size: 24px;  
margin-right: 10px;  
}  

.info {  
flex-grow: 1;  
}  

.counter {  
display: flex;  
align-items: center;  
}  

button {  
background-color: #4A90E2;  
color: white;  
border: none;  
border-radius: 4px;  
padding: 5px 10px;  
cursor: pointer;  
margin: 0 5px;  
}  

button:hover {  
background-color: #357ABD;  
}


/* Calendar */
.icon-chevron {
display:block;
width:15px;
height:22px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAWCAMAAAAo0TYrAAAAElBMVEX///8AAAAAAAAAAAAAAAAAAABknMCaAAAABXRSTlMAEHCg0O5XV0MAAAAzSURBVHgBYwACJkYGZMDMysKIwmUFCyC4KAIsrKgCjPQQQPCpzUX4B9O/mOGBGV7o4QkA5zcCv3HiEZgAAAAASUVORK5CYII=);
}
.icon-chevron-rotate {
transform: rotate(180deg);
}
.page {
width: 500px;
margin: 0 auto;
padding: 1em;
}
.responsive-calendar-placeholder {}
.responsive-calendar-modal {
background-color: #1d86c8;
color: white;
padding: 1em;
}
.responsive-calendar .controls {
text-align: center;
}
.responsive-calendar .controls a {
cursor: pointer;
color: red;
}
.responsive-calendar .controls h4 {
display: inline;
}
.responsive-calendar .day-headers,
.responsive-calendar .days {
font-size: 0;
}
.responsive-calendar .day {
display: inline-block;
position: relative;
font-size: 14px;
width: 14.285714285714286%;
text-align: center;
}
.responsive-calendar .day a {
color: #000000;
display: block;
cursor: pointer;
padding: 20% 0 20% 0;
}
.responsive-calendar .day a:hover {
background-color: #eee;
text-decoration: none;
}
.responsive-calendar .day.header {
border-bottom: 1px gray solid;
}
.responsive-calendar .day.active a {
background-color: #1d86c8;
color: #ffffff;
}
.responsive-calendar .day.active a:hover {
background-color: #36a0e2;
}
.responsive-calendar .day.active .not-current {
background-color: #8fcaef;
color: #ffffff;
}
.responsive-calendar .day.active .not-current:hover {
background-color: #bcdff5;
}
.responsive-calendar .day.not-current a {
color: #ddd;
}
.responsive-calendar .day .badge {
position: absolute;
top: 2px;
right: 2px;
z-index: 1;
}

.sticky-card-header {
  position: sticky;
  top: 0; /* Adjust as needed */
  z-index: 10; /* Ensure it stays on top */
  background-color: #007bff; /* Background color to avoid transparency issues */
  padding-bottom: 1rem; /* Optional padding for spacing */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for effect */
}

.sticky-card {
  position: sticky;
  top: 0; /* Adjust as needed */
  z-index: 10; /* Ensure it stays on top */
  background-color: #fff; /* Background color to avoid transparency issues */
  padding-bottom: 1rem; /* Optional padding for spacing */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for effect */
}

/* bottomNav */
/* .bottom-nav {
  display: flex;
  justify-content: space-around;
  background-color: #f4f4f4;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1);
} */

/* .bottom-nav a {
  text-align: center;
  text-decoration: none;
  color: #555;
  font-size: 14px;
  transition: color 0.3s ease-in-out;
}

.bottom-nav a i {
  font-size: 18px;
  margin-bottom: 5px;
  display: block;
} */

.bottom-nav a.active {
  color: #007bff; /* Highlight color for active link */
  font-weight: bold;
}

.bottom-nav a.active i {
  color: #007bff; /* Highlight icon for active link */
}


/* trxsuccess page */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.container {
  max-width: 800px;
  margin: 0 auto;
  /* background-color: #fff; */
  padding: 30px;
  border-radius: 10px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
  width: 100%;
  box-sizing: border-box;
}

/* Header Section with Logo */
.header {
  text-align: center;
  margin-bottom: 30px;
}

.header img {
  width: 120px;
  height: auto;
}

.header h1 {
  font-size: 28px;
  color: #333;
  margin-top: 15px;
  letter-spacing: 1px;
}

/* Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table th, table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

table th {
  background-color: #f4f4f4;
  color: #555;
}

table td {
  font-size: 14px;
  color: #777;
}

/* Button Styles */
button.pay-btn {
  padding: 15px 30px;
  background-color: #007bff;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

button.pay-btn:hover {
  background-color: #0056b3;
}

/* Unpaid Status */
.unpaid-status {
  display: block;
  margin-top: 20px;
  color: #dc3545; /* Red for unpaid status */
  font-weight: bold;
  font-size: 18px;
}

/* Section Styles */
section {
  margin-bottom: 30px;
}

h2 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #555;
  font-weight: bold;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .container {
      padding: 20px;
  }

  h1 {
      font-size: 24px;
  }

  h2 {
      font-size: 18px;
  }

  table th, table td {
      padding: 10px;
      font-size: 12px;
  }

  button.pay-btn {
      font-size: 16px;
      padding: 12px;
  }
}

@media (max-width: 480px) {
  h1 {
      font-size: 20px;
  }

  button.pay-btn {
      font-size: 14px;
      padding: 10px;
  }
}

/* detailPenumpang */

/* General styling for passenger container */
#passenger-details {
  margin-top: 20px;
  border-top: 2px solid #007bff; /* Add a top border for separation */
  padding-top: 10px;
}

.passenger-list .passenger {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: #f9f9f9; /* Subtle background color */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Slight shadow for better visibility */
}

/* Passenger heading styling */
.passenger span strong {
  font-size: 16px;
  color: #007bff;
  margin-bottom: 1px;
  display: inline-block; /* Ensure alignment */
}

/* List styling for passenger details */
.passenger ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.passenger ul li {
  font-size: 14px;
  color: #333;
  margin: 3px 0; /* Minimal spacing between lines */
}

/* Highlight strong labels within the list */
.passenger ul li strong {
  color: #555;
}

.passenger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.passenger-header span {
  font-size: 14px;
  color: #333;
}

.trx-code {
  font-weight: bold;
  font-size: 14px;
  color: #007bff; /* Highlight the transaction code */
  white-space: nowrap; /* Prevent wrapping */
}

/* for calendar */
.disabled {
  background-color: #f0f0f0; /* Light grey background */
  color: #b3b3b3; /* Grey text color */
  opacity: 0.7; /* Slight transparency for disabled effect */
  cursor: not-allowed; /* Disabled cursor */
}

.disabled-link {
  text-decoration: none; /* Remove underline */
  color: #b3b3b3; /* Grey color for text */
}

/* checkIn css */
#ticket {
  border: 2px dashed #ccc;
  padding: 20px;
  border-radius: 10px;
  background: #f9f9f9;
  /* max-width: 600px; */
  margin: 0 auto;
  font-family: Arial, sans-serif;
  position: relative;
}

#ticket .subtotal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #28a745;
}

#ticket .section {
  margin-bottom: 15px;
}

#ticket .section-header {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

#ticket .section-content {
  font-size: 0.95rem;
  color: #555;
}

.icon {
  margin-right: 10px;
  font-size: 1.2rem;
  vertical-align: middle;
}

.badge-status {
  font-size: 0.9rem;
  padding: 5px 10px;
  border-radius: 20px;
}

#passenger-details {
  margin-top: 20px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.passenger-list {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.passenger-item {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 10px;
}