.app-full-width {
    width: 100%;
}
.app-full-height {
    height: 100%;
}

.app-container,
.app-container-fluid,
.app-container-xxl,
.app-container-xl,
.app-container-lg,
.app-container-md,
.app-container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}
:root {
    --app-breakpoint-xs: 0;
    --app-breakpoint-sm: 576px;
    --app-breakpoint-md: 768px;
    --app-breakpoint-lg: 992px;
    --app-breakpoint-xl: 1200px;
    --app-breakpoint-xxl: 1400px;
    --app-container-width: 100%;
    --app-headerbar-left-display: none;
    --app-font-xxlarge: 2.0em;
    --app-font-xlarge: 1.5em;
    --app-font-large: 1.17em;
    --app-font-medium: 1.0em;
    --app-font-small: 0.83em;
    --app-font-xsmall: 0.67em;
}

@media (min-width: 576px) {
    .app-container-sm, .app-container {
        max-width: 540px;
    }

    :root {
        --app-container-width: 100%;
    }
}

@media (min-width: 768px) {
    .app-container-md, .app-container-sm, .app-container {
        max-width: 720px;
    }

    :root {
        --app-container-width: 100%;
        --app-headerbar-left-display: flex;
    }
}

@media (min-width: 992px) {
    .app-container-lg, .app-container-md, .app-container-sm, .app-container {
        max-width: 960px;
    }

    :root {
        --app-container-width: 100%;
    }
}

@media (min-width: 1200px) {
    .app-container-xl, .app-container-lg, .app-container-md, .app-container-sm, .app-container {
        max-width: 1140px;
    }

    :root {
        --app-container-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .app-container-xxl, .app-container-xl, .app-container-lg, .app-container-md, .app-container-sm, .app-container {
        max-width: 1320px;
    }

    :root {
        --app-container-width: 1320px;
    }
}

/* Document
//
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*/
*, *::before, *::after {
    box-sizing: border-box;
}


/* App predefined sizes */
:root {
    --app-section-subtitle-width: 75%;
    --app-contact-card-width: 30%;
    --app-section-subtitle-font-size: 1.125rem;
}