/* 
.btn-xs, .btn-group-xs > .btn {
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-font-size: 0.3rem;
    --bs-btn-border-radius: 0.2rem;
    --bs-btn-line-height: 1;
}
 */
.btn-xs, .btn-xxs, .btn-group-xs > .btn, .btn-group-xxs > .btn {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    border-radius: 0.25rem !important;
}

.btn-xxxs {
    padding: 0.05rem 0.25rem;
    font-size: 0.5rem;
    line-height: 0.5;
    border-radius: 0.25rem !important;
}

.form-control[readonly] {
  background-color: var(--bs-secondary-bg); /* Use Bootstrap 5 CSS variables */
  opacity: 1; /* Ensure text remains readable */
}

.med-text {
    font-size: 1rem;
}

.small-text {
    font-size: 0.8rem;
}

.xs-text {
    font-size: 0.6rem;
}

h5 input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}


.ss-mandatory-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ss-mandatory-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    border: 1px solid;
    background: var(--bs-light-25);
    border-radius: 6px;
    padding: 5px 10px;
    margin: 2px 2px;
    line-height: 1.35;
}

.chip-note {
    font-size: 12px;
    font-style: italic;
}

/* Add a vertical divider between the two buttons */
.nav-divider {
    border-left: 1px solid #ccc; /* Adjust the color as needed */
    height: 30px; /* Adjust the height as needed */
    margin: 0 10px; /* Adjust the spacing as needed */
}
/* Show menu dropdown on hover for larger screens */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Show action menu dropdown on hover for smaller screens */
.action-menu {
    /* position: fixed;
    width: 50px;
    overflow: hidden; */
    min-width: 150px;
    padding: 0;
    margin: 0;
    border-radius: 0.5rem;
    background-color: #cff4fc;
    transition: width .25s ease;
    --bs-dropdown-zindex: 1050;
}

.action-menu li + li {
    border-top: 1px solid var(--bs-border-color);
}

.action-menu .dropdown-item {
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

.action-menu .dropdown-item.success {
    color: var(--bs-success);
}

.action-menu .dropdown-item.warning {
    color: var(--bs-warning);
}

.action-menu .dropdown-item.danger {
    color: var(--bs-danger);
}

.action-menu .dropdown-item:hover {
    text-decoration: none !important;
    color: white;
    font-weight: 600;
    background-color: var(--bs-primary);
}

.action-menu .dropdown-item.danger:hover {
    background-color: var(--bs-danger);
}

.action-menu .dropdown-item.warning:hover {
    background-color: var(--bs-warning);
}

.action-menu .dropdown-item.success:hover {
    background-color: var(--bs-success);
}

.action-menu .dropdown-item i {
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin-right: 0.5rem;
}

/* Accordion item header */
.accordion-item {
    margin-top: 2rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Host settings form */
#host_settings_form .mb-3 {
    margin-bottom: 0 !important;
    margin-top: 1rem !important;
}

.badge-button {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border: 1px solid var(--bs-border-color);
}

.badge-button:hover {
    text-decoration: none !important;
    color: white;
    font-weight: 600;
    background-color: var(--bs-primary);
}