.login-card {
    display: inline-block;
    width: 300px; /* Adjust width as needed */
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.tbl-min-120 {
  min-width: 120px;
}

input[type="text"] {
  min-width: 50px;
  max-width: 100%;
  width: auto;
  padding-left: 5px;
}

is-invalid .form-check-input {
  border: 1px solid #dc3545 !important;
}

.is-invalid .form-check-label {
  color: #dc3545 !important;
}

.input-search input {
    width: 100px; /* Adjust the width of the input */
    height: 35px; /* Set the height to match label height */
    padding: 5px; /* Padding for input text */
    font-size: 14px; /* Font size for input text */
    border: 1px solid #ced4da; /* Border style */
    border-radius: 5px; /* Rounded corners for the input */
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

.card-header {
    width: 100%;
    text-align: left; /* Align text to the left */
    background-color: #f8f9fa; /* Match the card background */
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0; /* Remove any margin */
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
}

/* Ensure that the title does not affect the navbar layout */
#view.main.apptitle {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align title to the left */
    width: auto;  /* Ensure it doesn't stretch the container */
    margin-right: 20px; /* Optional: add space between title and navbar items */
}

/* Fixed width for title area to prevent shifting */
#title {
    white-space: nowrap;  /* Prevent the title text from wrapping */
    width: 200px;  /* Fixed width for the title */
    text-overflow: ellipsis;  /* Truncate text with ellipsis if it overflows */
    overflow: hidden;
    font-weight: bold;  /* Optional: make the title text bold */
}

/* Navbar items - keep them aligned and spaced out */
.navbar-nav .nav-item {
    padding: 0 15px; /* Adjust spacing between navbar items */
    z-index: 9999;
}

/* Flexbox for the entire navbar */
.navbar-nav {
    display: flex;
    justify-content: flex-end; /* Align navbar items to the right */
    width: 100%;
}

/* Additional mobile responsiveness (optional) */
@media (max-width: 1200px) {
    .navbar-nav {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: flex-start; /* Align items to the left */
    }

    .navbar-nav-spaced .nav-item {
        padding: 10px 0; /* Adjust vertical spacing between items */
    }
}

/* Make sure active navbar item color gets applied */
.navbar-nav .nav-item a.active {
    color: #fff !important; /* Set text color to white for active item */
    background-color: #004F84 !important; /* Darker blue for active background */
    font-weight: bold;
}

/* Default navbar item color */
.navbar-nav .nav-item a {
    color: #000 !important; /* Default color for links */
    transition: color 0.3s ease;
}

/* Navbar item hover state */
.navbar-nav .nav-item a:hover {
    color: #fff !important; /* Set hover text color to white */
    background-color: #286090 !important; /* Light blue on hover */
}

.nav-item {
    padding: 0 20px; /* Adjust this value for desired spacing between labels */
}

.mr-2 {
    margin-right: 0.5rem;
}

.custom-h4 {
    margin-bottom: 5px;
}

.custom-hr {
    margin-top: 5px;
    margin-bottom: 10px;
}

.custom-select-large {
        font-size: 1.25rem;
        padding: 0.5rem;
        height: 2.5rem;
}

.player-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.player-container audio {
  width: 100%;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.card-title {
    margin: 0;
    font-size: 1.25rem; /* Adjust font size as needed */
}


.card-body {
    padding: 2rem;
}

.table tbody tr:hover {
    background-color: #d1e7fd; /* Light blue color for hover effect */
    cursor: pointer;
    margin-top: 5px;
}

.form-input{
    display: table;
}

.form-cells{
    display: table-cell
}

.table tbody tr {
    transition: background-color 0.3s ease;
}

.table thead th{
    border: 2px;
    background-color: #e6e6e6;
}

.table thead {
    border-color: #e6e6e6;
}

.min-w-80 {
  min-width: 80px;
}

.table {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.navbar-nav {
    margin-left: auto; /* Align the dropdown to the right */
}

.container {
    margin-top: 50px; /* Adjust the top margin as needed */
}

@media (max-width: 1200px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table thead {
        display: none;
    }

    .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
    }

    .table tr {
        margin-bottom: 1rem;
    }

    .table td {
        text-align: right;
        padding-left: 50%; /* Adjust padding to accommodate the data-label */
        position: relative;
    }

    .table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px; /* Adjust as necessary */
        font-weight: bold;
        text-align: left;
    }

    .table td .transcript {
        margin-top: 20px; /* Set top margin to 20px */
        text-align: left; /* Ensure text alignment is left */
        margin-left: 8px;
        white-space: normal; /* Prevent text from being cut off */
    }
}

.btn-primary {
    background-color: #286090 !important;
    border-color: #286090 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #204d74 !important;
    border-color: #204d74 !important;
}

.login-navbar {
    max-width: 1200px; /* Set the max-width to match a medium screen */
    margin: auto;
    border-bottom-left-radius: 10px; /* Round the bottom left corner */
    border-bottom-right-radius: 10px; /* Round the bottom right corner */
    border: 1px solid #d3d3d3;
}

.navbar-toggler {
    display: none;
}

.dropdown-menu a {
    display: flex;           /* Use flexbox for alignment */
    align-items: center;     /* Vertically center the content */
    width: 100%;             /* Ensure they take up the full width */
    padding: 0.5rem 1rem;    /* Add padding to make them clickable */
    color: #000;             /* Adjust the text color if necessary */
    text-decoration: none;   /* Remove underlines */
}

.dropdown-menu a:hover {
    background-color: #204d74;
    color: #fff;
}

.dropdown-menu a span {
    flex-grow: 1;            /* Make the span take up the remaining space */
}

/* Style for the selected number */
.selected-number .page-link {
    background-color: #204d74;
    color: #fff !important;
}

/* Style for the unselected numbers and text (previous/next) */
.pagination .page-item a,
.pagination .page-item span {
    color: #204d74;
}

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    background-color: #204d74;
    border-color: #204d74;
    color: #fff !important;
}

.card {
    border: none !important;
    box-shadow: none !important; /* If shadow is causing the issue */
}


.color-column {
  width: 200px; /* Fixed width for the column */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* Adds ellipsis */
}



.grid-container {
    position: relative; /* Ensure the container is the reference for child positioning */
    height: 400px; /* Set the height for the grid */
    width: 100%; /* Full width of the parent container */
    overflow: hidden; /* Prevent unintended overflow */
}

#TFAddOrder_TMSFNCGrid2 {
    top: 0px !important; /* Reset the top offset */
    left: 0px !important; /* Reset the left offset */
    position: absolute !important; /* Use relative positioning to align with the grid container */
}

#TFAddOrder_TMSFNCGrid2_Canvas {
    position: relative !important; /* Ensure absolute positioning within the parent */
    width: 100% !important; /* Make the canvas fill the container width */
    height: 100% !important; /* Make the canvas fill the container height */
    left: 0px !important; /* Align canvas to the left */
}

#TFAddOrder_ScrollBar5 {
    top: 0px !important; /* Align scrollbar to the top */
    right: 0px !important; /* Align scrollbar to the right edge */
    position: absolute !important; /* Position within the grid container */
    height: 400px !important; /* Match the height of the grid container */
    box-sizing: border-box !important; /* Prevent borders from affecting dimensions */
}

#tblPhoneGrid {
  --bs-table-bg: #fff;
  --bs-table-border-color: #dee2e6; /* or whatever border tone you like */
}


/* and make sure the table collapses borders so there are no gaps */
#tblPhoneGrid {
  border-collapse: collapse !important;
}


@keyframes slideInLeft {
  from {
    transform: translateX(-120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.slide-in {
  animation: slideInLeft 0.4s ease-out forwards;
}

#spinner {
  position: fixed !important;
  z-index: 9999 !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

