/* Default styles for badges */
.badge-custom {
    font-size: 1.5rem;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid black; /* Border width, style, and color */
    color: black; /* Inside text color */
    font-weight: 300; /* Lighter font weight */
}

/* Default styles for progress bars */
.progress-custom {
    height: 50px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid black;
    position: relative;  /* Containing block for the label */
}

.progress-custom .progress-bar {
    color: transparent;  /* Hide default label inside the bar */
    font-size: 1.5rem;
}

.progress-custom .progress-bar::after {
    content: attr(aria-valuenow) "%"; /* Display the percentage dynamically */
    position: absolute;              /* Position the label */
    top: 50%;                        /* Center the label vertically */
    right: 10px;                     /* Set the label near the right end */
    transform: translateY(-50%);     /* vertically center the label */
    color: black;
    font-size: 1.5rem;
}

.progress-custom .progress-bar .progress-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    font-size: 1.5rem;
}


.no-gutter {
    --bs-gutter-x: 0;
}

.custom-gutter {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}


.fade-out {
    animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; display: none; }
}

.navbar {
    z-index: 1050 !important;
}

