.icon-small {
    zoom: 0.7;
}

.menu-social .nav-link {
    padding-block: 0;
    padding-inline: 0.5rem;
}

.content div {
    align-items: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: center;
}

.contenthead {
    padding: 3px;
}

.contentheading {
    display: flex;
    font-family: inherit;
    font-size: 20px;
    justify-content: center;
    margin: 0%;
    padding: 5px;
    text-shadow: 0 0 3px #fff;
}

.animatedText {
    font-size: 18px;
    height: 5vh;
    padding-bottom: 10px;
    text-shadow: 0 0 5px #fff;
    width: 100%;
}

/* Style for both button and anchor */
.contentbtn button,
.contentbtn a {
    border-radius: 5px;
    display: inline-block; /* Ensure consistent spacing */
    letter-spacing: .025em;
    margin-bottom: 20px;
    text-decoration: none; /* Remove default underline on anchor elements */
    text-shadow: 0 0 1px #fff;
    transition: all .15s ease;
    width: 100%;
}

.contentbtn button:hover,
.contentbtn a:hover {
    background-color: #fff;
    color: black;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
}

footer p {
    color: whitesmoke;
    margin: 0;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: grey;
}

th {
    white-space: nowrap;
    user-select: none;
}

th.sortable {
    cursor: pointer;
}

th.sorted-asc::after {
    /* content: ' ↑'; */
    /* use FontAwesome font and character code for up arrow */
    font-family: 'Font Awesome 5 Free';
    content: '\f062';
    margin-inline-start: 0.5rem;
}

th.sorted-desc::after {
    /* content: ' ↓'; */
    /* use FontAwesome font and character code for down arrow */
    font-family: 'Font Awesome 5 Free';
    content: '\f063';
    margin-inline-start: 0.5rem;
}

td.icon {
    width: 5%;
}

td.number {
    width: 14%;
}

td.percentage {
    width: 18%;
}

td.icon img {
    border-radius: var(--bs-border-radius);
    background: radial-gradient(circle, #7b7d6b 15%, #424542 100%);
}


.accordion-body {
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
}
.accordion-body-btn {
    --bs-btn-border-radius: 0;
    --bs-btn-border-width: 0;

    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-color: var(--bs-tertiary-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-color: var(--bs-secondary-color);

    width: 100%;
    text-align: start;
    position: relative;
    padding-inline-end: calc(var(--bs-btn-padding-x) * 2)
}

.accordion-body-btn.active::after {
    /* check icon using font awesome */
    font-family: 'Font Awesome 5 Free';
    content: '\f00c';
    font-weight: 900;

    margin-inline-end: 0.5rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Scroling sidebar */

@property --top-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
  }
  
  @property --bottom-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
  }
  
  @keyframes scrollfade {
    0% {
      --top-fade: 0;
    }
    10%, 100% {
      --top-fade: 3rem;
    }
    0%, 90% {
      --bottom-fade: 3rem;
    }
    100% {
      --bottom-fade: 0;
    }
  }


@media (min-width: 992px) {
    .sticky-left-col {
        max-height: calc(100vh - 6rem);
        /* 9rem is around the height of the navbar */
        overflow-y: scroll;
        position: sticky;
        top: calc(40px + 2rem);
        /* 1rem from the padding of .container, and 40px from the nav, finally we add 1rem to the top to account for a small padding*/

        scrollbar-width: thin;
        scrollbar-color: var(--bs-secondary-bg) var(--bs-body-bg);

        /* progressive enhancement, add shadows on top and bottom of the scrollable area if there's content outside of it */
        mask: linear-gradient(to bottom,
        #0000,
        #ffff var(--top-fade) calc(100% - var(--bottom-fade)),
        #0000
        );
        animation: scrollfade;
        animation-timeline: --scrollfade;
        scroll-timeline: --scrollfade y;
    }
}