/* 2022-09-02 This is where we can put sitewide Velogic stuff, to try to interfere as little as possible with the CSS provided by the base app */
/* It's included in both the Blazor app (via _Host.cshtml) and the Razor identity pages (va 2022-09-02 This is where we can put sitewide Velogic stuff, to try to interfere as little as possible with the CSS provided by the base app */
/* See also: vf-vars.css, which is loaded before this, and contains the variables used here */

/* Things that are only available because you've got reasonably high level authorisation, e.g. FrameEditor or Admin role */
.frame-editor-role {
    color: var(--special-auth-color) !important;
    /*For buttons too*/
    border-color: var(--special-auth-color);
}

/* Margins based on the above variables */
.vf-full-margin {
    margin: var(--vf-full-margin-size);
}

.vf-full-margin-top {
    margin-top: var(--vf-full-margin-size);
}

.vf-full-margin-left {
    margin-left: var(--vf-full-margin-size);
}

.vf-mid-margin {
    margin: var(--vf-full-margin-size);
}

.vf-mid-margin-top {
    margin-top: var(--vf-mid-margin-size);
}

.vf-mid-margin-top-bottom {
    margin-top: var(--vf-mid-margin-size);
    margin-bottom: var(--vf-mid-margin-size);
}

.vf-mid-margin-left {
    margin-left: var(--vf-mid-margin-size);
}

.vf-mid-margin-bottom {
    margin-bottom: var(--vf-mid-margin-size);
}

.vf-mid-margin-right {
    margin-right: var(--vf-mid-margin-size);
}

.vf-small-margin {
    margin: var(--vf-small-margin-size);
}

.vf-small-margin-left {
    margin-left: var(--vf-small-margin-size);
}

.vf-small-margin-top {
    margin-top: var(--vf-small-margin-size);
}

.vf-no-margin {
    margin: 0;
}

.validation-message {
    color: #a4262c;

}

/*Like a WPF stack panel; items run down the page, nicely spaced*/
.stack-panel-mid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--vf-mid-margin-size);
}
.stack-panel-small {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--vf-small-margin-size);
}


/*Start small as single-column design*/
.two-column-at-md{
    display: flex;
    gap: var(--vf-mid-margin-size);

    flex-direction: column;

    > * {
        /* "flex: 1" is the same as "flex: 1 1 0px" which means: 
          you can grow, you can shrink, you start at 0px wide (so all children get the same % of the width);*/
        flex: 1;
    }
}

/*At md size, switch to side-by-side (by switching to row basis)*/
body.bootstrap-md .two-column-at-md {
    flex-direction: row;
}


/*https://stackoverflow.com/a/23741988 */
.no-gutters{
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.row-no-gutters{
    [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}