:root {
    --content-padding: 15px;
    --section-padding: 7.5px;
    --base-font-size: 1rem;
}

html {
    overscroll-behavior: none;
}

body {
    margin: auto;
    background: white;
    min-height: 100vh;
    user-select: none;
    --webkit-user-select: none;
}

/* TEXT */
h1, h2, h3, p {
    margin: 0;
}

.bold {
    font-weight: bold;
}

.ellips {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

/* FONT-SIZES */
.font-size-l {
    font-size: calc(1.2 * var(--base-font-size));
}

.font-size-xl {
    font-size: calc(1.5 * var(--base-font-size));
}

.font-size-lm {
    font-size: calc(1.1 * var(--base-font-size));
}

.font-size-base {
    font-size: var(--base-font-size);
}

.font-size-m {
    font-size: calc(0.9 * var(--base-font-size));
}

.font-size-s {
    font-size: calc(0.8 * var(--base-font-size));
}

.font-size-xs {
    font-size: calc(0.7 * var(--base-font-size));
}

/* WIDTH */
.full-width {
    width: 100%;
}

.max-content {
    width: max-content;
}

.fit-content {
    width: fit-content;
}

/* HEIGHT */
.full-height {
    height: 100%;
}

.full-vh {
    height: 100vh;
}

.fit-content-height {
    height: fit-content !important;
}

/* ALIGNMENT */
.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

.flex {
    display: flex;
}

.flex-basis {
    flex-basis: 100%;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: end;
}

.justify-items-end {
    justify-items: end;
}

.grid {
    display: grid;
}

.place-items-center {
    place-items: center;
}

.place-items-end {
    place-items: end;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: end;
}

.align-self-end {
    align-self: end;
}

.box-sizing-border {
    box-sizing: border-box;
}

.text-align-end {
    text-align: end;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-align-left {
    text-align: left;
}

.right {
    text-align: end;
}

.justify-self-end {
    justify-self: end;
}

.grid_topRight {
    grid-column: 2;
    grid-row: 1;
}

.grid_bottomRight {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
}

.grid_bottomLeft {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}

.grid_fullHeight {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
}

.gap-section-padding {
    gap: var(--section-padding);
}

.gap-content-padding {
    gap: var(--content-padding);
}

/* TRANSITIONS */
.fade {
    transition: opacity 0.25s ease-in-out;
}

.fade-show {
    opacity: 1;
}

.fade-hide {
    opacity: 0;
}

.fold {
    overflow: hidden;
    transform-origin: top;
    transition: all 0.25s ease-in-out;
    overflow-y: auto;
}

.fold-open {
    max-height: 3000px;
    transform: scaleY(1);
}

.fold-close {
    max-height: 0;
    transform: scaleY(0);
}

.vertical-fold {
    overflow: hidden;
    transform-origin: right;
}

.vertical-fold-open {
    max-width: 950px;
    transform: scaleX(1);
    transition: all 0.5s linear;
}

.vertical-fold-close {
    max-width: 0 !important;
    transform: scaleX(0);
    transition: all 0.5s cubic-bezier(0, 1, 0, 1);
}

/* COLORS */
.index {
    color: var(--index-1);
}

/* MISC */
.border {
    border: 0.5px solid var(--input-border-color);
}

a {
    color: black;
}

.cursor-pointer {
    cursor: pointer;
}


/* Blazor error dialog */

.blazor-info {
    background: var(--card-background);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.blazor-info > button {
    padding: var(--section-padding);
    border-radius: var(--section-padding);
    background: yellow;
    color: var(--button-color);
    text-transform: uppercase;
}