/* This file defines the page structure for this layout */

@import "header.css";
@import "footer.css";

body {
	display: flex;
	flex-direction: column;
    background: var(--wbs-grey-bg);
}

#content-container {
    --header-height: 112px;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    overflow: auto;

    /* The container also contains the footer, CSS in separate file */

    #content-wrapper {
/*        padding: var(--padding-xl) 0 calc(var(--padding-xl) * 4) 0;*/
        flex: 1;

        padding: 16px;
        width: 100%;
        margin: 0 auto;

        @media (min-width: 640px){
            & {
                padding: 32px;
                width: 100%;
                min-width: 576px;
            }
        }

        @media (min-width: 1024px){
            & {
                min-width: 960px;
            }
        }

        @media (min-width: 1280px){
            & {
                width: 1216px;
            }
        }
    }
}

/*
/* Alert close button styles */
/*.alert-dismissible .btn-close {
    padding: 0.5rem !important;
    width: 1em;
    height: 1em;
    opacity: 0.5;
}

.alert-dismissible .btn-close:hover {
    opacity: 0.75;
}
*/