.card.exit-actions-card,
.card-header.exit-actions-card-header{
    background-color: #74BBC9;
}
.card-header.exit-actions-card-header{
    font-weight: bold;
    padding: 25px 5px 15px 15px;
    margin-bottom: 0;
    color: white;
    border-bottom: 2px solid white;
    border-radius: 25px 25px 0 0;
}
.exit-actions-line  {
    border: 2px solid white;
    opacity: 1;
}
div.list-group.list-group-flush.exit-actions {
    --bs-list-group-color: inherit;
    --bs-list-group-bg: #74BBC9;
    --bs-list-group-border-color: #fff;
    --bs-list-group-border-width: 2px;
    --bs-list-group-border-radius: 0.5rem;
}

.exit-actions-card, .exit-actions-card .card-content-headers{
    color: white;
}

.completion-status{
    background-color: #76787C;
}
.warning-status{
    background-color: #00164e;
}

.card-title {
    color: #00164e;
    font-weight: bold;
}

/* forms */
.form-select {
    border: 1px solid #6c757d;
}
/* Style the custom select container */
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%; /* Adjust the width as needed */
    border: 1px solid #6c757d; /* Add border styles as needed */
    background-color: #fff; /* Background color for the select */
    overflow: hidden;
    border-radius: 5px;
}


/* Style the actual select element inside the custom select */
.custom-select select {
    appearance: none; /* Remove default arrow styles in modern browsers */
    width: 100%;
    height: 100%;
    padding: 5px; /* Adjust padding as needed */
    background-color: transparent; /* Make the select transparent */
    border: none; /* Remove select border */
    outline: none; /* Remove focus outline */

}

/* Style the custom arrow element on the right */
.custom-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px; /* Adjust the width as needed */
    height: 100%;
    background-color: #547A91; /* Background color for the square area */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style the arrow icon (you can use an icon font or custom SVG here) */
.custom-arrow::after {
    content: "\25BC"; /* Unicode arrow-down character */
    font-size: 18px; /* Adjust the font size as needed */
    color: #fff; /* Color of the arrow icon */
}

.custom-select select:disabled {
    background-color: #e9ecef;
    color: black;
}

.bg-tertiary{
    background-color: #6C9BBC;
}

.bg-blue-grey{
    background-color: #6C9BBC;
}

.bg-light-blue{
    background-color: #74BBC9!important;
}

label {
    font-size: .75rem;
    font-weight: normal;
    margin-bottom: .5rem;
    color: #000000;
    margin-left: .25rem;
    display: inline-block;
}
div {
    font-size: 14px;
}
textarea.form-control {
    border: 1px solid #6c757d;
}

/*table*/
.table-container {
    overflow-x: auto; /* Enable horizontal scrolling */
}
table {
    border-collapse: separate;
    width: 100%;
    font-size: 10px!important;
}

th {
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 10px!important;
}

td {
    border: 1px solid lightgray;
    padding: 8px;
    font-size: 10px!important;
}

th {
    text-align: center;
    color: #fff;
}

td {
    text-align: center;
    background-color: #E2F0F4; /* Default background color for cells */
    color: #000000; /* Default text color for cells */
}

/* Target the first and second cells of each row */
tr td:first-child,
tr td:nth-child(2) {
    background-color: #D9E5ED; /* Background color for the first and second cells */
    color: #000000; /* Text color for the first and second cells */
}

a.dt-completed {
    color: black;
    font-size: 10px !important;
}
.dt-completed i, i {
    color: black;
    font-size: 10px!important;
}