body {
    margin: 0 !important;
    padding: 8px 8px 0 8px;
    min-height: 100vh;
    overscroll-behavior-y: none;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    max-width: 100vw;
    overflow-x: hidden;
}


.alert {
    text-shadow: 2px 2px 1px black;
}

form > * {
    margin: var(--text-padding);
}

/*Pictochat stylings*/
.pictochat-window {
    max-width: 90%;
    min-width: 50%;
}
.pictochat-message, .pictochat-status{
    width: unset;
}

/*Input box stylings*/
details {
    min-width: fit-content;
    margin: 4px;
}
details:open > summary {
    width: unset;
}

details > summary {
    padding-left: 10px;
    padding-right: 10px;
    text-wrap-mode: nowrap;
}

.ds-repeating {
    border: black solid 2px;
    background: repeating-linear-gradient(
            white,
            white 2px,
            var(--color-ds-grid-bg) 2px,
            var(--color-ds-grid-bg) 4px
    );
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ds-repeating > * {
    margin: var(--text-padding);
}

.info {
    /* shouldnt fit-content infobox, the margin on the image looks strange bc of it */
    /* ...but whatever its better than things touching the border */
    height: fit-content;
    border: black solid 2px;
    padding: var(--text-padding);
    background-repeat: round; /* Doesn't look *great*, but it looks fine enough on quick glances. */
}

.info-container > * {
    padding: calc(var(--text-padding) / 2);
}

.input-sm {
    height: 26px;
    background-size: 24px;
    width: stretch;
}

.info-label {
    width: stretch;
}

.info-square {
    width: 84px;
    height: 84px;
}

.button-slim {
    height: 24px;
    margin-top: 2px;
    font-size: smaller;
}

.bar-lg {
    width: 100vw;
    display: grid;
    justify-items: center;
    align-content: center;
}

.ds-div {
    width: fit-content;
    background: repeating-linear-gradient(
            var(--color-ds-grid-border),
            var(--color-ds-grid-border) 2px,
            oklab(0.795294 -0.0129662 -0.0228078) 2px,
            oklab(0.795294 -0.0129662 -0.0228078) 4px
    );
    border: 2px solid black;
    padding: 0 8px 0 8px;
    margin-top: 16px;
}

.permission-selector {
    max-width: calc(3.25 * var(--width-button));
    display: flex;
    align-self: center;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-self: center;
    justify-content: center;
}

/* Uppy mangling */

.uploader {
    min-width: 350px;
    width: 60vw;
    height: 300px;
}

.uppy-Dashboard-inner {
    width: unset !important;
    height: 100% !important;
}

.uppy-Dashboard, .uppy-Root {
    height: 100% !important;
}
.uppy-Root { 
    font-family: unset !important;
}
.uppy-DashboardContent-back, .uppy-DashboardContent-title {
    font-weight: bolder !important;
}

/*ive given up on trying to transform the button into a DS button. it looks fine enough as-is :shrump: */
/*.uppy-StatusBar-actions > button {*/
/*    background-color*/
/*    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAAgBAMAAAAVngxwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAASUExURfv7+7KyssPDw9PT0+Pj4/Pz88gsiOsAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA1LjEuMTITAUd0AAAAuGVYSWZJSSoACAAAAAUAGgEFAAEAAABKAAAAGwEFAAEAAABSAAAAKAEDAAEAAAACAAAAMQECABEAAABaAAAAaYcEAAEAAABsAAAAAAAAAGAAAAABAAAAYAAAAAEAAABQYWludC5ORVQgNS4xLjEyAAADAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAWgBAABAAAAlgAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAADZp5qVybcLXwAAAFpJREFUSMflzFEJAEEMA9FaWAu1sBZqof6tHETDDCxcAvP5qt7eASdwje2H3AWeGByh3UThsCncAE8ErgltkjY4bAq3wBODI7RNFA6bwE0t8GQEjtA2EbiX9wGu0a1QSmUDXgAAAABJRU5ErkJggg==);*/
/*}*/