.form-control.is-invalid {
    border-color: #f1556c !important; /* Adminox's default invalid border color */
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f96a74'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f96a74' stroke='none'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}


.card .header-title {
    margin:0px;
}
.btn-light {
    border:1px solid #dfdfdf;
}
.btn-label {
 
    padding: 5px 10px;
    background-color: rgba(var(--bs-dark-rgb), .1);
}
.btn-light:hover {
    
     border:1px solid #dfdfdf;
}
.invalid-feedback {
    display: none;
}
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}
.host-stats-card {
    width: 250px !important; /* Increase card width */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle drop shadow */
}
.host-stats-card .card-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
}
.switchery {
    width: 36px !important;
    height: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}
.switchery > small {
    width: 18px !important;
    height: 18px !important;
}
/* Ensure the Close button matches Bootstrap 4 default styling */
.modal-header .close {
    padding: 0.5rem 1rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.5;
    color: #000;
    text-shadow: none;
}
.modal-header .close:hover {
    opacity: 0.75;
    color: #000;
}
.chart-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px; /* Matches the max-height of the canvas */
    background: rgba(255, 255, 255, 0.5); /* Translucent white background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Ensure it appears above the chart */
}
[data-bs-theme="dark"] .chart-loader {
    background: rgba(0, 0, 0, 0.5); /* Dark translucent background for dark mode */
}
.chart-loader img {
    display: block;
}
/* Style for host stats cards */
.host-stats-card .stat-label {
    color: #4a4a4a; /* Dark gray for labels */
    font-weight: 500; /* Slightly bold for better readability */
}
.host-stats-card .stat-value {
    color: #353535;
    font-weight: 400; /* Normal weight for values */
}
/* Highlight issues */
.host-stats-card .highlight-issue {
    color: #dc3545; /* Bootstrap's danger red for issues */
    font-weight: 600; /* Bold to draw attention */
}
#nettesters-table [data-lucide] {
    width: 24px;
    height: 24px;
    color: #4b81a0;
}
.host-stats-card .card-body p {
    margin-bottom: 6px;
}
/* Style for host stats cards table */
.host-stats-card .stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em; /* Slightly smaller font for compactness */
    margin-bottom: 8px; /* Space between table and View Pings link */
    table-layout: fixed; /* Prevent column resizing */
}
.host-stats-card .stats-table tr {
    border-bottom: 1px solid #e0e0e0; /* Light border between rows */
}
.host-stats-card .stats-table td {
    padding: 4px 6px; /* Reduced padding for a tighter layout */
}
.host-stats-card .stats-table .stat-label {
    text-align: left !important; /* Left-align labels, override any defaults */
    color: #4a4a4a; /* Dark gray for labels */
    font-weight: 500; /* Slightly bold for labels */
    width: 120px; /* Fixed width for label column */
    background-color: #f9f9f9; /* Subtle gray background for labels */
}
.host-stats-card .stats-table .stat-value {
    text-align: right !important; /* Right-align values, override any defaults */
    color: #1a1a1a; /* Darker color for values */
    font-weight: 400; /* Normal weight for values */
    width: auto; /* Allow value column to take remaining space */
}
/* Highlight issues */
.host-stats-card .highlight-issue {
    color: #dc3545; /* Red for issues */
    font-weight: 600; /* Bold to draw attention */
    background-color: #ff000026; /* Light red background for emphasis */
}
/* Ensure the card body doesn't overflow */
.host-stats-card .card-body {
    padding: 8px; /* Reduced padding for a more compact card */
}
/* Style for the View Pings link */
.host-stats-card .view-pings {
    margin: 0; /* Remove margin to reduce spacing */
    text-align: center; /* Center the link */
    margin-top:10px;
}
.host-stats-card-dimmed {
    opacity: 0.5; /* Reduce opacity to make the card look dimmed */
    transition: opacity 0.3s ease; /* Smooth transition for the opacity change */
}
/* Dark mode adjustments for host stats cards */
[data-bs-theme="dark"] .host-stats-card {
    background-color: #2c323f; /* Match Adminox dark mode card background */
    border-color: rgba(255, 255, 255, 0.05); /* Match Adminox dark mode border */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15); /* Match Adminox dark mode shadow */
}
[data-bs-theme="dark"] .host-stats-card .card-header {
    background-color: #2f3749; /* Match Adminox dark mode card header */
    color: #ced4da; /* Light text for header */
}
[data-bs-theme="dark"] .host-stats-card .stats-table tr {
    border-bottom: 1px solid #444; /* Darker border for dark mode */
}
[data-bs-theme="dark"] .host-stats-card .stats-table .stat-label {
    color: #ced4da; /* Light gray for labels in dark mode, matching Adminox */
    background-color: #ffffff08; /* Slightly darker background for labels */
}
[data-bs-theme="dark"] .host-stats-card .stats-table .stat-value {
    color: #e0e0e0; /* Lighter gray for values in dark mode */
}
/* Highlight issues in dark mode */
[data-bs-theme="dark"] .host-stats-card .highlight-issue {
    color: #ff6666; /* Brighter red for issues in dark mode */
    background-color: #ff010152; /* Darker red background for contrast */
}
/* Ensure View Pings link is visible in dark mode */
[data-bs-theme="dark"] .host-stats-card .view-pings a {
    color: #66b0ff; /* Lighter blue for links in dark mode */
}
.profile-image-circle {
    width: 32px;
    height: 32px;
    object-fit: cover;
    box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.75);
}
.profile-image-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Target the selected items (chips) for #hostSelect only */
#hostSelect + .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #135da5 !important; /* Darker blue (dodgerblue) */
    color: #fff !important; /* White text for contrast */
    font-size: 12px !important; /* Larger font size */
    padding: 6px 10px !important; /* More padding around text */
    border: 1px solid rgb(22, 104, 185) !important; /* Slightly darker border */
    border-radius: 4px !important; /* Rounded corners */
    margin: 2px !important; /* Space between chips */
}
#hostSelect + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important; /* White "x" for contrast */
    margin-right: 5px !important; /* Space between "x" and text */
}
/* Adjust the overall selection area for #hostSelect */
#hostSelect + .select2-container--multiple .select2-selection--multiple {
    padding: 5px !important; /* Padding inside the selection area */
}
#hostSelect + .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #000 1px;
    outline: 0;
    padding: 2px 6px;
    padding-top: 5px;
}
#hostSelect + .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
    background-color: #1f86ec !important; 
    font-size: 14px;
}
#hostSelect + .select2-container .select2-selection--multiple .select2-selection__choice__remove {
   
    font-size: 14px;
}
#hostSelect +.select2-container .select2-selection--multiple {
    padding-top:5px;
}
#hostSelect {
    display: none;
}
.dashbox_arrow {
    font-size: 17px;
    margin-right: -6px;
}
#downloadExeButton {
    padding: 7px 11px;
    border: 1px solid #94a6bd;
    color: #c0d9f9;
    background-color: #282d35;
}
#downloadExeButton:hover {
    background-color: #f0f0f0;
    color: #000;
    border-color: #ccc;
}
#downloadExeButton svg {
    margin-left:10px !important; /* Remove any default margin */
}
html[data-layout=topnav] .topnav .nav-item .nav-link, html[data-layout=topnav] .topnav .nav-item>a {
    color: #c5dfff;
}
html[data-layout=topnav] .topnav .nav-item .nav-link.active, html[data-layout=topnav] .topnav .nav-item>a.active {
    color: #fff;
}
 #nettesters-table td {
    color:#000;
    
}
[data-bs-theme="dark"] #nettesters-table td {
    color:#FFF;
    
}
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.01);
}
#nettesters-table th {
    background-color: #f7f7f7;
    color: #000;
}
#hosts-table th {
    background-color: #f7f7f7;
    color: #000;
}
.device-type-container {
    position: relative;
}
.device-type-display {
    cursor: pointer;
    transition: all 0.2s ease;
}
.device-type-display:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.device-type-select option {
    padding: 5px 10px;
}
.active>.page-link, .page-link.active {
    z-index: 3;
    color: #FFF;
    background-color: #5ea3cb;
    border-color: #4b81a0;
}
.active>.page-link:hover, .page-link.active:hover {
    color: #FFF;
    background-color: #4b81a0;
    border-color: #3d6f8c;
}
.btn-primary {
    background-color: #5ea3cb;
    border-color: #4b81a0;
    color: #FFF;
}
.btn-primary:hover {
    background-color: #4b81a0;
    border-color: #3d6f8c;
    color: #FFF;
}
.btn-outline-primary {
    color: #5ea3cb;
    border-color: #5ea3cb;
}
.btn-outline-primary:hover {
    color: #FFF;
    background-color: #5ea3cb;
    border-color: #4b81a0;
}
.btn-outline-primary .btn-label {
    background-color:#efefef;
}

.table-action-btn {
    color: #5ea3cb;
    font-size: 16px;
    transition: color 0.2s ease;
    border:1px solid #5ea3cb;
    padding:4px 8px;
    border-radius: 2px;
    background-color: #FFF;
}
.table-action-btn:hover {
    color: #FFF;
    background-color: #5ea3cb;
    border-color: #4b81a0;
}
a {
    color: #5ea3cb;
    text-decoration: none;
}