::-webkit-scrollbar {
    width: .8em;
    height: .8em;
}

::-webkit-scrollbar-track {
    background-color: var(--mud-palette-surface);
    border-radius: 100vh;
    margin-block: .5em;
    padding: 1em;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, .3);
    border-radius: 100vh;
    border: var(--mud-palette-surface) solid 2px;
    transition: background-color .5ms ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--mud-palette-primary);
}

/*:root {*/
/*    !* becomes about 14px to 18px across screen sizes *!*/
/*    --base-size: clamp(14px, 1.2vw, 18px);*/
/*}*/


body {

    overflow: hidden;
}

a {
    color: var(--mud-palette-primary);
    cursor: pointer;
}

a:hover {
    text-underline: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    border-bottom: var(--mud-palette-primary) solid 1px;
}

.hover-pointer {
    cursor: pointer;
}

.settings-container {
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: calc(100vh - 45px);
}

.settings-top-bar-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    width: 100%;
    background-color: var(--mud-palette-surface);

    & > :first-child {
        justify-self: start;
        width: 100%;
    }

    & > :last-child {
        justify-self: end;
    }
}

.organization-details-component-wrapper {
    display: grid;
}

.help-container {
    display: grid;
    gap: 1rem;
}

.help-body-wrapper {
    display: grid;
    gap: 1rem;
    height: 500px;
    align-content: start;
    overflow: auto;
}

.help-ul {
    & > li {
        margin-left: 1.5rem;
    }
}