#modulesTabs .nav-link {
    padding: 4px 6px;
}

#modulesTabs .nav-link.active {
    background:  var(--bs-primary);
}

#modulesTabs .nav-link:hover {
    background:  var(--bs-primary);
}

#modulesTabs .nav-link img {
    width: 32px;
    height: 32px;
}

#modulesList .list-group-item:hover {
    background:  var(--bs-primary);
}

#installedModules input {
    width: 70px;
    flex: none;
}

#sunlight {
    width: 60px;
}

.accordion.reverted .accordion-button {
    /* Ensure the button is a flex container for easy alignment */
    display: flex;
    align-items: center;
}

.accordion.reverted .accordion-button::after {
    /* Hide the default Bootstrap arrow */
    display: none;
}

.accordion.reverted .accordion-button::before {
    /* Style the new arrow on the left */
    content: ""; /* Essential for pseudo-elements */
    display: block;
    width: 1.25rem; /* Adjust size as needed */
    height: 1.25rem; /* Adjust size as needed */
    background-image: var(--bs-accordion-btn-icon); /* Use Bootstrap's icon variable */
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform 0.2s ease-in-out; /* Add transition for rotation */
    margin-right: 0.5rem; /* Add some space between arrow and text */
}

.accordion.reverted .accordion-button:not(.collapsed)::before {
    /* Rotate the arrow when the accordion is open */
    transform: rotate(-180deg);
}

.list-group-item {
    padding: 4px 8px;
    background: none;
    border-radius: 0;
}

.list-group {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.nav-item {
    border-radius: 0;
    --bs-nav-tabs-border-radius: 0;
}

.form-check-input[type="checkbox"],
input[type="text"],
input[type="number"] {
    border-radius: 0;
    padding: 2px 6px;
}

.accordion {
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-active-bg: var(--bs-body-bg);
}