/* Scroll bar color  */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0a1020;
}

::-webkit-scrollbar-thumb {
    background: #111c33;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #111c33;
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #16233f #0a1020;
}

/* /Scroll bar color  */

/* For Input search focus */
input#itemSearch:focus {
    border: 1px solid #e7eefc;
}

/* For Table Start */

.collapse {
    visibility: initial;
}

/* For Table End */

/* For Modal Start */
.modal_icon img {
    /* border-radius: 50%; */
    height: 60px;
    width: 60px;
    object-fit: contain;
}

.modal_icon {
    text-align: center;
    padding: 15px;
    width: 100%;
}

/* For Modal End */

/* For Text-area start */
textarea {
    display: block;
    width: 100%;
    padding: 0.56rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    /* color: #212529; */
    color: #e7eefc !important;
    background-color: #111c33;
    background-clip: padding-box;
    border: 1px solid #1f3050;
    appearance: none;
    border-radius: 2px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* For Text-area End */
.file-upload-browse {
    background-color: darkcyan;
}

/* Manage Table */
.manage-table th,
.manage-table td {
    text-align: center;
}

/* Manage Table */
.message-table td,
.message-table a {
    color: rgb(209, 207, 209);
}

.message-table th,
.message-table td {
    text-align: center;
}

.message-table .alignleft {
    text-align: left;
}

.alignleft {
    text-align: left;
}

.file-upload-info {
    background-color: #2a3038 !important;
}

.input-group:focus {
    border: 1px solid #ffffff;
}

.employee-show-img-area {
    height: 150px !important;
    width: 130px !important;
}

.employee-show-img {
    height: 100% !important;
    width: 100% !important;
    border-radius: 10px !important;
}


/* ====================== Custom CSS ================  */
.form-select {
    background-color: #2a3038 !important;
    border-radius: 2px !important;
    border: none !important;
    color: #e7eefc !important;
}

/* 
th {
    color: #111c33 !important;
    font-weight: bolder !important;
}

td {
    color: #111c33 !important;
} */

.page-title {
    color: #e7eefc !important;
    font-weight: 700 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    outline: none !important;
    background-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5em 0px !important;
}

.table-hover>tbody>tr:hover td {
    color: #e7eefc !important;
    /* font-weight: bold !important; */
}

table.dataTable thead th,
table.dataTable thead td {
    color: #e7eefc !important;

}

table.dataTable tbody th,
table.dataTable tbody td {
    color: #e7eefc !important;

}

.table-hover>tbody>tr:hover a {
    /* font-weight: bold !important; */
}

.table-hover>tbody>tr {
    /* font-weight: bold !important; */
    background-color: transparent !important;
    color: #e7eefc !important;

}

.table-hover thead th {
    /* font-weight: bold !important; */
    background-color: #0e1729 !important;
    color: #e7eefc !important;
}

.table-hover>thead>tr {
    text-transform: uppercase !important;
    font-weight: 400;
}

.table-title,
.modal-title {
    color: #ffffff;
}

/* table,
th,
td {
    border: 1px solid #dee2e6;
    border-collapse: collapse;
} */

.table {
    color: #e7eefc !important;
}

.card,
.form-control,
.form-select {
    background-color: #111c33 !important;
    color: #e7eefc !important;
}

.card {
    border: 1px #1f3050 solid !important;
}

.form-select {
    border: 1px #1f3050 solid !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #e7eefc !important;
}

.text-white {
    color: #e7eefc !important;
}

.dropify-wrapper .dropify-preview {
    background-color: #111c33 !important;
}

.bg-green {
    background-color: #2979FF !important;
}

.text-muted {
    color: #8ba0c4 !important;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: #1f3050 !important;
}

.btn-warning {
    background-color: #E2B84B !important;
}

.btn-danger {
    background-color: #E04747 !important;
}

/* Override DataTables processing indicator styles */
.dataTables_wrapper .dataTables_processing {
    background: transparent !important;
    border: none !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.form-switch-lg .form-check-input {
    width: 3rem;
    height: 1.2rem;
    cursor: pointer;
}

.form-switch-lg .form-check-input:checked {
    background-position: right center;
}

.form-switch-lg .form-check-label {
    font-size: 1rem;
    padding-left: 0.5rem;
}

.metismenu .has-arrow::after {
    color: #ffffff !important;
}

.sidebar #sidebar_menu>li.mm-active>a::after {
    color: #2979FF !important;
}

.modal-content {
    background-color: #111c33 !important;
    border: 1px solid #1f3050 !important;
    /* color: #e7eefc !important; */
}

.border-bottom {
    border-bottom: 1px #1f3050 solid !important;
}

.select2-results__options {
    color: #000 !important
}

/* Action Button */

/* Scoped Design Variables */
.custom-action-wrapper {
    --bg: #0a1020;
    --bg2: #0e1729;
    --panel: #111c33;
    --panel2: #16233f;
    --line: #1f3050;
    --line2: #27395c;
    --txt: #e7eefc;
    --muted: #8ba0c4;
    --muted2: #5f739b;
    --blue: #2f7bff;
    --blue2: #1c5fe0;
    --blueglow: rgba(47, 123, 255, .35);
    --cyan: #0ea5e9;
    --green: #22c55e;
    --amber: #f59e0b;
    --red: #ef4444;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --teal: #14b8a6;
    --radius: 14px;
    --radius2: 10px;
}

/* Container alignment and spacing */
.custom-action-wrapper .action-btn-container {
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

/* Base style for the buttons using your --bg2, --line, and --radius2 */
.custom-action-wrapper .custom-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius2);
    background-color: var(--bg2);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Target the specific component colors for icons */
.custom-action-wrapper .btn-view i {
    color: var(--cyan);
}

.custom-action-wrapper .btn-edit i {
    color: var(--amber);
}

.custom-action-wrapper .btn-delete i {
    color: var(--red);
}

/* Hover States - subtly brightens the border & background */
.custom-action-wrapper .custom-action-btn:hover {
    background-color: var(--panel);
    transform: translateY(-1px);
}

.custom-action-wrapper .btn-view:hover {
    border-color: var(--cyan);
}

.custom-action-wrapper .btn-edit:hover {
    border-color: var(--amber);
}

.custom-action-wrapper .btn-delete:hover {
    border-color: var(--red);
}

.callout-banner {
    background: linear-gradient(145deg, #111c33, #0e1729) !important;
    border: 1px solid rgba(59, 130, 246, .3) !important;
    border-radius: 12px;
    color: #93c5fd !important;
}


.form-switch .form-check-input {
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.border-border,
.border-secondary {
    border: 1px solid #1f3050 !important;
}

.btn-dark {
    background-color: #0e1729;
}

.dropdown-menu
 {    
    color: #e7eefc;
    background-color: #0e1729 !important;  
    border: 1px solid #1f3050 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}