.sideBarLink {
    display: flex; /* ✅ Makes the icon and text align in a row */
    align-items: center; /* ✅ Ensures vertical alignment */
    padding: 0.5rem 1rem;
    color: #ffffff !important;
    text-decoration: none;
    background-color: #343a40 !important;
    border-radius: 0.25rem;
}

    .sideBarLink:active, .sideBarLink:focus {
        color: #ffffff !important;
        font-weight: bold;
        background-color: #495057 !important;
        text-decoration: none;
    }

    .sideBarLink:hover, .sideBarLink:focus {
        color: #ffffff;
        text-decoration: underline;
    }

    .sideBarLink i {
        margin-right: 8px; /* ✅ Adds space between icon and text */
    }

.underConstruction {
    color: orange !important;
}

/*    Label => .col-form-label */
.wid-label {
    padding-top: calc(0.375rem + 1px); /* Aligns label with input */
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0; /* Removes extra spacing */
    /* font-size: var(--bs-body-font-size);  Matches default text size */
    font-size: 0.75rem !important;
    line-height: var(--bs-body-line-height);
}

/*Input => form-control-sm */
.wid-input {
    height: 28px !important;
    padding: 0.25rem 0.5rem !important; /* Left & Right padding added */
    font-size: 0.75rem !important;
    line-height: var(--bs-body-line-height-sm);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius-sm, 0.2rem) !important;
}

/*Select => .form-select-sm */
.wid-select {
    height: var(--bs-form-select-height-sm, calc(1.5rem + 2px)); /* Smaller height */
    padding: var(--bs-form-select-padding-y-sm) var(--bs-form-select-padding-x-sm); /* Adjusted padding */
    font-size: var(--bs-body-font-size-sm); /* Smaller font size */
    line-height: var(--bs-body-line-height-sm);
    border-radius: var(--bs-border-radius-sm); /* Rounded corners */
}
/*Checkbox => .form-check-input */
.wid-checkBox {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: middle; /* Ensures proper alignment */
    background-color: white; /* Default background */
    border: 1px solid var(--bs-border-color, #ced4da); /* Ensures visible border */
    appearance: auto; /* Restores default checkbox styling */
    border-radius: 0.25em; /* Rounded corners */
}

    .wid-checkBox:checked {
        background-color: var(--bs-primary, #0d6efd); /* Uses Bootstrap primary color */
        border-color: var(--bs-primary, #0d6efd);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M5.5 10.5l-3-3 1.5-1.5 1.5 1.5 4.5-4.5 1.5 1.5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
    }

    .wid-checkBox:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
    }

    .wid-checkBox:disabled {
        opacity: 0.5;
    }

.wid-textarea {
    width: 100%; /* Ensures full width */
    height: auto; /* Adjusts height dynamically */
    padding: 0.375rem 0.75rem; /* Matches Bootstrap's default padding */
    font-size: 1rem; /* Standard font size */
    line-height: 1.5;
    /* Border and Border Radius */
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius, 0.25rem);
    /* Background and Focus */
    background-color: var(--bs-body-bg, #fff);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .wid-textarea:focus {
        border-color: var(--bs-primary, #0d6efd);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
    }

/*button*/
.btn-grey {
    color: #fff;
    background-color:gray ;
    border-color: #212529;
    border-radius: var(--bs-border-radius, 0.25rem);
}

    .btn-grey:hover {
        color: #fff;
        background-color: #1c1f23;
        border-color: #1a1e21;
    }