/* fixes issue with built in controls like datepicker not obeying the prefered colors  */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* fixes issue with built in controls like autofill when preferred theme is not the same as requested site theme */
[data-theme=light],
.theme-light {
    color-scheme: light;
}


[data-theme=dark],
.theme-dark {
    color-scheme: dark;
}




/* bulma expects an item to be hidden "is-hidden" and then shown with a new display type like "is-flex" for example, the "is-flex" overrides the "is-hidden" but sometimes you want to do it in reverse so use this */
.is-display-none-forced,
.is-hidden-forced {
    display: none !important;
}


/* bulma has is-clickable and is-unselectable but nothing to stop pointer events so added is-unclickable  */
.is-unclickable,
.is-unclickable * {
    pointer-events: none;
}


/* bulma has a loading animation for inputs but not a general loading overlay so added is-loading to div element */
div.is-loading {

    color: transparent !important;
    pointer-events: none;
    position: relative;

    * {
        visibility: hidden;
    }

    &::after {
        content: "";
        animation: spinAround 500ms infinite linear;
        border: 2px solid #fff;
        border-radius: 50%;
        border-right-color: transparent;

        display: block;
        width: 5rem;
        height: 5rem;
        left: calc(50% - (5em / 2));
        top: calc(50% - (5em / 2));
        position: absolute !important;
    }
}

@keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}



/*bulma table - adds sticky headers and footers */
.table.is-fullheight {
    height: 100%;
}

.table.is-transparent {
    background-color: unset;
}

.table.has-stickyheader,
.table.has-stickyfooter {

    &.is-bordered {
        border: none;
        border-collapse: separate;

        th,
        td {
            border: none;
            border-left: 1px solid;
            border-bottom: 1px solid;
            border-color: var(--bulma-table-cell-border-color);

            &:last-child {
                box-shadow: 1px 0 0 0 var(--bulma-table-cell-border-color);
            }
        }

        th {
            border-top: 1px solid;
            border-color: var(--bulma-table-cell-border-color);
        }
    }
}

.table.has-stickyheader thead {
    position: sticky;
    top: 0;
}

.table.has-stickyfooter tfoot {
    position: sticky;
    bottom: 0;
}

/* mobile */
@media screen and (max-width: 768px) {

    .table.is-stacked-mobile {

        th {
            display: none;
        }

        td {
            display: grid;
            grid-template-columns: 16ch auto;
            gap: 0.5rem;
            border: none !important;
            white-space: unset;
            width: unset;

            &::before {
                content: attr(data-title) ": ";
                font-weight: 700;
            }

            &:empty {
                display: none;
            }
        }

    }

}



/* bulma checkbox add on ( would prefer this to be a toggle button but not enough time ) */
.field.has-addons .checkbox {
    cursor: pointer;
    align-items: center;
    appearance: none;
    border-color: var(--bulma-input-border-color);
    border-style: solid;
    border-width: var(--bulma-control-border-width);
    border-radius: var(--bulma-control-radius);
    box-shadow: none;
    display: inline-flex;
    font-size: var(--bulma-control-size);
    height: var(--bulma-control-height);
    justify-content: flex-start;
    line-height: var(--bulma-control-line-height);
    padding-bottom: var(--bulma-control-padding-vertical);
    padding-left: var(--bulma-control-padding-horizontal);
    padding-right: var(--bulma-control-padding-horizontal);
    padding-top: var(--bulma-control-padding-vertical);
    position: relative;
    transition-duration: var(--bulma-duration);
    transition-property: background-color, border-color, box-shadow, color;
    vertical-align: top;
}

.field.has-addons .control:not(:first-child):not(:last-child) .checkbox {
    border-radius: 0;
}

.field.has-addons .control:first-child:not(:only-child) .checkbox {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.field.has-addons .control:last-child:not(:only-child) .checkbox {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}











/* bulma allows you to use is-expanded to fill remaining space which might make sense on smaller screens like on tablets but on desktop you may not want a control to expand across half the screen so added is-autowidth-{device} */
/* mobile */
@media screen and (max-width: 768px) {

    .select.is-autowidth-mobile,
    .select.is-autowidth-mobile select {
        width: auto !important;
    }

    button.is-autowidth-mobile {
        display: flex;
        width: auto !important;
    }

}

/* tablet */
@media screen and (min-width: 769px) {

    .select.is-autowidth-tablet,
    .select.is-autowidth-tablet select {
        width: auto !important;
    }

    button.is-autowidth-tablet {
        display: flex;
        width: auto !important;
    }

    /* .is-visibility-visible-tablet,
    .is-visible-tablet {
        visibility: visible !important;
    } */
}

/* tablet-only */
/* @media screen and (min-width: 769px) and (max-width: 1023px) {} */


/* desktop */
@media screen and (min-width: 1024px) {

    .select.is-autowidth-desktop,
    .select.is-autowidth-desktop select {
        width: auto !important;
    }

    button.is-autowidth-desktop {
        display: flex;
        width: auto !important;
    }

    /* .is-visibility-visible-desktop,
    .is-visible-desktop {
        visibility: visible !important;
    } */

}

/* desktop-only */
/* @media screen and (min-width: 1024px) and (max-width: 1215px) {} */

/* widescreen */
@media screen and (min-width: 1216px) {

    .select.is-autowidth-widescreen,
    .select.is-autowidth-widescreen select {
        width: auto !important;
    }

    button.is-autowidth-widescreen {
        display: flex;
        width: auto !important;
    }

    /* .is-visibility-visible-widescreen,
    .is-visible-widescreen {
        visibility: visible !important;
    } */
}

/* widescreen-only */
/* @media screen and (min-width: 1216px) and (max-width: 1407px) {} */

/* fullscreen */
@media screen and (min-width: 1408px) {

    .select.is-autowidth-fullhd,
    .select.is-autowidth-fullhd select {
        width: auto !important;
    }

    button.is-autowidth-fullhd {
        display: flex;
        width: auto !important;
    }

    /* .is-visibility-visible-fullhd,
    .is-visible-fullhd {
        visibility: visible !important;
    } */

}





/* bulma has media queries for device size but this allows you to use columns on containing element sizes using [xs, sm, md, lg, xl] instead of [mobile, tablet, desktop, widescreen, fullhd]  */
.columns {
    container-type: inline-size;
}

/* mobile - extra small */
@container (max-width: 768px) {

    .column.is-full-xs {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-xs {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-xs {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-xs {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-xs {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-xs {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-xs {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-xs {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-xs {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-xs {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-xs {
        margin-inline-start: 75%;
    }

    .column.is-offset-two-thirds-xs {
        margin-inline-start: 66.6666%;
    }

    .column.is-offset-half-xs {
        margin-inline-start: 50%;
    }

    .column.is-offset-one-third-xs {
        margin-inline-start: 0.3333%;
    }

    .column.is-offset-one-quarter-xs {
        margin-inline-start: 25%;
    }

    .column.is-offset-one-fifth-xs {
        margin-inline-start: 20%;
    }

    .column.is-offset-two-fifths-xs {
        margin-inline-start: 40%;
    }

    .column.is-offset-three-fifths-xs {
        margin-inline-start: 60%;
    }

    .column.is-offset-four-fifths-xs {
        margin-inline-start: 80%;
    }

    .column.is-0-xs {
        flex: none;
        width: 0%;
    }

    .column.is-offset-0-xs {
        margin-inline-start: 0%;
    }

    .column.is-1-xs {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-xs {
        margin-inline-start: 8.3333333333%;
    }

    .column.is-2-xs {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-xs {
        margin-inline-start: 16.6666666667%;
    }

    .column.is-3-xs {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-xs {
        margin-inline-start: 25%;
    }

    .column.is-4-xs {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-xs {
        margin-inline-start: 33.3333333333%;
    }

    .column.is-5-xs {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-xs {
        margin-inline-start: 41.6666666667%;
    }

    .column.is-6-xs {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-xs {
        margin-inline-start: 50%;
    }

    .column.is-7-xs {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-xs {
        margin-inline-start: 58.3333333333%;
    }

    .column.is-8-xs {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-xs {
        margin-inline-start: 66.6666666667%;
    }

    .column.is-9-xs {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-xs {
        margin-inline-start: 75%;
    }

    .column.is-10-xs {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-xs {
        margin-inline-start: 83.3333333333%;
    }

    .column.is-11-xs {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-xs {
        margin-inline-start: 91.6666666667%;
    }

    .column.is-12-xs {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-xs {
        margin-inline-start: 100%;
    }



    /* display */
    .is-display-block-xs,
    .is-block-xs {
        display: block !important;
    }

    .is-display-flex-xs,
    .is-flex-xs {
        display: flex !important;
    }

    .is-display-inline-xs,
    .is-inline-xs {
        display: inline !important;
    }

    .is-display-inline-block-xs,
    .is-inline-block-xs {
        display: inline-block !important;
    }

    .is-display-inline-flex-xs,
    .is-inline-flex-xs {
        display: inline-flex !important;
    }

    .is-display-grid-xs,
    .is-grid-xs {
        display: grid !important;
    }

    .is-display-none-xs,
    .is-hidden-xs {
        display: none !important;
    }

    .is-visibility-hidden-xs,
    .is-invisible-xs {
        visibility: hidden !important;
    }




    /* see container further down in this file  */
    .select.is-autowidth-xs,
    .select.is-autowidth-xs select {
        width: auto !important;
    }

    button.is-autowidth-xs {
        display: flex;
        width: auto !important;
    }


    /* .table.is-stacked-xs {

        th {
            display: none;
        }

        td {
            display: grid;
            grid-template-columns: 16ch auto;
            gap: 0.5rem;
            border: none !important;

            &::before {
                content: attr(data-title) ": ";
                font-weight: 700;
            }

            &:empty {
                display: none;
            }
        }

    } */

}

/* tablet - small*/
@container (min-width: 769px) {

    .column.is-full-sm {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-sm {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-sm {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-sm {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-sm {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-sm {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-sm {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-sm {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-sm {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-sm {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-sm {
        margin-inline-start: 75%;
    }

    .column.is-offset-two-thirds-sm {
        margin-inline-start: 66.6666%;
    }

    .column.is-offset-half-sm {
        margin-inline-start: 50%;
    }

    .column.is-offset-one-third-sm {
        margin-inline-start: 0.3333%;
    }

    .column.is-offset-one-quarter-sm {
        margin-inline-start: 25%;
    }

    .column.is-offset-one-fifth-sm {
        margin-inline-start: 20%;
    }

    .column.is-offset-two-fifths-sm {
        margin-inline-start: 40%;
    }

    .column.is-offset-three-fifths-sm {
        margin-inline-start: 60%;
    }

    .column.is-offset-four-fifths-sm {
        margin-inline-start: 80%;
    }

    .column.is-0-sm {
        flex: none;
        width: 0%;
    }

    .column.is-offset-0-sm {
        margin-inline-start: 0%;
    }

    .column.is-1-sm {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-sm {
        margin-inline-start: 8.3333333333%;
    }

    .column.is-2-sm {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-sm {
        margin-inline-start: 16.6666666667%;
    }

    .column.is-3-sm {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-sm {
        margin-inline-start: 25%;
    }

    .column.is-4-sm {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-sm {
        margin-inline-start: 33.3333333333%;
    }

    .column.is-5-sm {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-sm {
        margin-inline-start: 41.6666666667%;
    }

    .column.is-6-sm {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-sm {
        margin-inline-start: 50%;
    }

    .column.is-7-sm {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-sm {
        margin-inline-start: 58.3333333333%;
    }

    .column.is-8-sm {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-sm {
        margin-inline-start: 66.6666666667%;
    }

    .column.is-9-sm {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-sm {
        margin-inline-start: 75%;
    }

    .column.is-10-sm {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-sm {
        margin-inline-start: 83.3333333333%;
    }

    .column.is-11-sm {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-sm {
        margin-inline-start: 91.6666666667%;
    }

    .column.is-12-sm {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-sm {
        margin-inline-start: 100%;
    }



    /* display */
    .is-display-block-sm,
    .is-block-sm {
        display: block !important;
    }

    .is-display-flex-sm,
    .is-flex-sm {
        display: flex !important;
    }

    .is-display-inline-sm,
    .is-inline-sm {
        display: inline !important;
    }

    .is-display-inline-block-sm,
    .is-inline-block-sm {
        display: inline-block !important;
    }

    .is-display-inline-flex-sm,
    .is-inline-flex-sm {
        display: inline-flex !important;
    }

    .is-display-grid-sm,
    .is-grid-sm {
        display: grid !important;
    }

    .is-display-none-sm,
    .is-hidden-sm {
        display: none !important;
    }

    .is-visibility-hidden-sm,
    .is-invisible-sm {
        visibility: hidden !important;
    }



    /* see container further down in this file  */
    .select.is-autowidth-sm,
    .select.is-autowidth-sm select {
        width: auto !important;
    }

    button.is-autowidth-sm {
        display: flex;
        width: auto !important;
    }
}

/* desktop - medium */
@container (min-width: 1024px) {
    .column.is-full-md {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-md {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-md {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-md {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-md {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-md {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-md {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-md {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-md {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-md {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-md {
        margin-inline-start: 75%;
    }

    .column.is-offset-two-thirds-md {
        margin-inline-start: 66.6666%;
    }

    .column.is-offset-half-md {
        margin-inline-start: 50%;
    }

    .column.is-offset-one-third-md {
        margin-inline-start: 0.3333%;
    }

    .column.is-offset-one-quarter-md {
        margin-inline-start: 25%;
    }

    .column.is-offset-one-fifth-md {
        margin-inline-start: 20%;
    }

    .column.is-offset-two-fifths-md {
        margin-inline-start: 40%;
    }

    .column.is-offset-three-fifths-md {
        margin-inline-start: 60%;
    }

    .column.is-offset-four-fifths-md {
        margin-inline-start: 80%;
    }

    .column.is-0-md {
        flex: none;
        width: 0%;
    }

    .column.is-offset-0-md {
        margin-inline-start: 0%;
    }

    .column.is-1-md {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-md {
        margin-inline-start: 8.3333333333%;
    }

    .column.is-2-md {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-md {
        margin-inline-start: 16.6666666667%;
    }

    .column.is-3-md {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-md {
        margin-inline-start: 25%;
    }

    .column.is-4-md {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-md {
        margin-inline-start: 33.3333333333%;
    }

    .column.is-5-m {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-md {
        margin-inline-start: 41.6666666667%;
    }

    .column.is-6-md {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-md {
        margin-inline-start: 50%;
    }

    .column.is-7-md {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-md {
        margin-inline-start: 58.3333333333%;
    }

    .column.is-8-md {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-md {
        margin-inline-start: 66.6666666667%;
    }

    .column.is-9-md {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-md {
        margin-inline-start: 75%;
    }

    .column.is-10-md {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-md {
        margin-inline-start: 83.3333333333%;
    }

    .column.is-11-md {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-md {
        margin-inline-start: 91.6666666667%;
    }

    .column.is-12-md {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-md {
        margin-inline-start: 100%;
    }



    /* display */
    .is-display-block-md,
    .is-block-md {
        display: block !important;
    }

    .is-display-flex-md,
    .is-flex-md {
        display: flex !important;
    }

    .is-display-inline-md,
    .is-inline-md {
        display: inline !important;
    }

    .is-display-inline-block-md,
    .is-inline-block-md {
        display: inline-block !important;
    }

    .is-display-inline-flex-md,
    .is-inline-flex-md {
        display: inline-flex !important;
    }

    .is-display-grid-md,
    .is-grid-md {
        display: grid !important;
    }

    .is-display-none-md,
    .is-hidden-md {
        display: none !important;
    }

    .is-visibility-hidden-md,
    .is-invisible-md {
        visibility: hidden !important;
    }





    .select.is-autowidth-md,
    .select.is-autowidth-md select {
        width: auto !important;
    }

    button.is-autowidth-md {
        display: flex;
        width: auto !important;
    }
}

/* widescreen - large */
@container (min-width: 1216px) {
    .column.is-full-lg {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-lg {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-lg {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-lg {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-lg {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-lg {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-lg {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-lg {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-lg {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-lg {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-lg {
        margin-inline-start: 75%;
    }

    .column.is-offset-two-thirds-lg {
        margin-inline-start: 66.6666%;
    }

    .column.is-offset-half-lg {
        margin-inline-start: 50%;
    }

    .column.is-offset-one-third-lg {
        margin-inline-start: 0.3333%;
    }

    .column.is-offset-one-quarter-lg {
        margin-inline-start: 25%;
    }

    .column.is-offset-one-fifth-lg {
        margin-inline-start: 20%;
    }

    .column.is-offset-two-fifths-lg {
        margin-inline-start: 40%;
    }

    .column.is-offset-three-fifths-lg {
        margin-inline-start: 60%;
    }

    .column.is-offset-four-fifths-lg {
        margin-inline-start: 80%;
    }

    .column.is-0-lg {
        flex: none;
        width: 0%;
    }

    .column.is-offset-0-lg {
        margin-inline-start: 0%;
    }

    .column.is-1-lg {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-lg {
        margin-inline-start: 8.3333333333%;
    }

    .column.is-2-lg {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-lg {
        margin-inline-start: 16.6666666667%;
    }

    .column.is-3-lg {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-lg {
        margin-inline-start: 25%;
    }

    .column.is-4-lg {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-lg {
        margin-inline-start: 33.3333333333%;
    }

    .column.is-5-lg {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-lg {
        margin-inline-start: 41.6666666667%;
    }

    .column.is-6-lg {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-lg {
        margin-inline-start: 50%;
    }

    .column.is-7-lg {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-lg {
        margin-inline-start: 58.3333333333%;
    }

    .column.is-8-lg {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-lg {
        margin-inline-start: 66.6666666667%;
    }

    .column.is-9-lg {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-lg {
        margin-inline-start: 75%;
    }

    .column.is-10-lg {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-lg {
        margin-inline-start: 83.3333333333%;
    }

    .column.is-11-lg {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-lg {
        margin-inline-start: 91.6666666667%;
    }

    .column.is-12-lg {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-lg {
        margin-inline-start: 100%;
    }



    /* display */
    .is-display-block-lg,
    .is-block-lg {
        display: block !important;
    }

    .is-display-flex-lg,
    .is-flex-lg {
        display: flex !important;
    }

    .is-display-inline-lg,
    .is-inline-lg {
        display: inline !important;
    }

    .is-display-inline-block-lg,
    .is-inline-block-lg {
        display: inline-block !important;
    }

    .is-display-inline-flex-lg,
    .is-inline-flex-lg {
        display: inline-flex !important;
    }

    .is-display-grid-lg,
    .is-grid-lg {
        display: grid !important;
    }

    .is-display-none-lg,
    .is-hidden-lg {
        display: none !important;
    }

    .is-visibility-hidden-lg,
    .is-invisible-lg {
        visibility: hidden !important;
    }



    /* see container further down in this file  */
    .select.is-autowidth-lg,
    .select.is-autowidth-lg select {
        width: auto !important;
    }

    button.is-autowidth-lg {
        display: flex;
        width: auto !important;
    }

}

/* fullscreen - extra large */
@container (min-width: 1408px) {

    .column.is-full-xl {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-xl {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-xl {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-xl {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-xl {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-xl {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-xł {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-xl {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-xl {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-xl {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-xl {
        margin-inline-start: 75%;
    }

    .column.is-offset-two-thirds-xl {
        margin-inline-start: 66.6666%;
    }

    .column.is-offset-half-xl {
        margin-inline-start: 50%;
    }

    .column.is-offset-one-third-xl {
        margin-inline-start: 0.3333%;
    }

    .column.is-offset-one-quarter-xl {
        margin-inline-start: 25%;
    }

    .column.is-offset-one-fifth-xl {
        margin-inline-start: 20%;
    }

    .column.is-offset-two-fifths-xl {
        margin-inline-start: 40%;
    }

    .column.is-offset-three-fifths-xl {
        margin-inline-start: 60%;
    }

    .column.is-offset-four-fifths-xl {
        margin-inline-start: 80%;
    }

    .column.is-0-xl {
        flex: none;
        width: 0%;
    }

    .column.is-offset-0-xl {
        margin-inline-start: 0%;
    }

    .column.is-1-xl {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-xl {
        margin-inline-start: 8.3333333333%;
    }

    .column.is-2-xl {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-xl {
        margin-inline-start: 16.6666666667%;
    }

    .column.is-3-xl {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-xl {
        margin-inline-start: 25%;
    }

    .column.is-4-xl {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-xl {
        margin-inline-start: 33.3333333333%;
    }

    .column.is-5-xl {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-xl {
        margin-inline-start: 41.6666666667%;
    }

    .column.is-6-xl {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-xl {
        margin-inline-start: 50%;
    }

    .column.is-7-xl {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-xl {
        margin-inline-start: 58.3333333333%;
    }

    .column.is-8-xl {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-xl {
        margin-inline-start: 66.6666666667%;
    }

    .column.is-9-xl {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-xl {
        margin-inline-start: 75%;
    }

    .column.is-10-xl {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-xl {
        margin-inline-start: 83.3333333333%;
    }

    .column.is-11-xl {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-xl {
        margin-inline-start: 91.6666666667%;
    }

    .column.is-12-xl {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-xl {
        margin-inline-start: 100%;
    }



    /* display */
    .is-display-block-xl,
    .is-block-xl {
        display: block !important;
    }

    .is-display-flex-xl,
    .is-flex-xl {
        display: flex !important;
    }

    .is-display-inline-xl,
    .is-inline-xl {
        display: inline !important;
    }

    .is-display-inline-block-xl,
    .is-inline-block-xl {
        display: inline-block !important;
    }

    .is-display-inline-flex-xl,
    .is-inline-flex-xl {
        display: inline-flex !important;
    }

    .is-display-grid-xl,
    .is-grid-xl {
        display: grid !important;
    }

    .is-display-none-xl,
    .is-hidden-xl {
        display: none !important;
    }

    .is-visibility-hidden-xl,
    .is-invisible-xl {
        visibility: hidden !important;
    }




    /* see container further down in this file  */
    .select.is-autowidth-xl,
    .select.is-autowidth-xl select {
        width: auto !important;
    }

    button.is-autowidth-xl {
        display: flex;
        width: auto !important;
    }

}

















/* bulma has is-flex and is-flex-direction-column / is-flex-direction-row but doesnt have a way of controlling it by device size this adds that */
/* mobile */
@media screen and (max-width: 768px) {

    .is-flex-direction-row-mobile {
        flex-direction: row;
    }

    .is-flex-direction-column-mobile {
        flex-direction: column;
    }
}

/* tablet */
@media screen and (min-width: 769px) {

    .is-flex-direction-row-tablet {
        flex-direction: row;
    }

    .is-flex-direction-column-tablet {
        flex-direction: column;
    }

}

/* desktop */
@media screen and (min-width: 1024px) {

    .is-flex-direction-row-desktop {
        flex-direction: row;
    }

    .is-flex-direction-column-desktop {
        flex-direction: column;
    }
}

/* widescreen */
@media screen and (min-width: 1216px) {

    .is-flex-direction-row-widescreen {
        flex-direction: row;
    }

    .is-flex-direction-column-widescreen {
        flex-direction: column;
    }
}

/* fullscreen */
@media screen and (min-width: 1408px) {

    .is-flex-direction-row-fullscreen {
        flex-direction: row;
    }

    .is-flex-direction-column-fullscreen {
        flex-direction: column;
    }
}






/* bulma has columns but they are fixed in row height to the tallest element , these classes give you columns that appear more like a image list or news article layout. the items fit where they can */
/* mobile */
@media screen and (max-width: 768px) {

    .columns-mobile-1 {
        columns: 1;
    }

    .columns-mobile-2 {
        columns: 2;
    }

    .columns-mobile-3 {
        columns: 3;
    }

    .columns-mobile-4 {
        columns: 4;
    }

    .columns-mobile-5 {
        columns: 5;
    }

    .columns-mobile-6 {
        columns: 6;
    }
}

/* tablet */
@media screen and (min-width: 769px) {

    .columns-tablet-1 {
        columns: 1;
    }

    .columns-tablet-2 {
        columns: 2;
    }

    .columns-tablet-3 {
        columns: 3;
    }

    .columns-tablet-4 {
        columns: 4;
    }

    .columns-tablet-5 {
        columns: 5;
    }

    .columns-tablet-6 {
        columns: 6;
    }

}

/* desktop */
@media screen and (min-width: 1024px) {

    .columns-desktop-1 {
        columns: 1;
    }

    .columns-desktop-2 {
        columns: 2;
    }

    .columns-desktop-3 {
        columns: 3;
    }

    .columns-desktop-4 {
        columns: 4;
    }

    .columns-desktop-5 {
        columns: 5;
    }

    .columns-desktop-6 {
        columns: 6;
    }
}

/* widescreen */
@media screen and (min-width: 1216px) {

    .columns-widescreen-1 {
        columns: 1;
    }

    .columns-widescreen-2 {
        columns: 2;
    }

    .columns-widescreen-3 {
        columns: 3;
    }

    .columns-widescreen-4 {
        columns: 4;
    }

    .columns-widescreen-5 {
        columns: 5;
    }

    .columns-widescreen-6 {
        columns: 6;
    }
}

/* fullscreen */
@media screen and (min-width: 1408px) {

    .columns-fullhd-1 {
        columns: 1;
    }

    .columns-fullhd-2 {
        columns: 2;
    }

    .columns-fullhd-3 {
        columns: 3;
    }

    .columns-fullhd-4 {
        columns: 4;
    }

    .columns-fullhd-5 {
        columns: 5;
    }

    .columns-fullhd-6 {
        columns: 6;
    }
}



/* bulma doesnt have any classes for changing the text wrapping */
.is-text-wrap-nowrap {
    white-space: nowrap;
}

.is-text-wrap-wrap {
    white-space: normal;
}

.is-text-wrap-preline {
    white-space: pre-line;
}


/* bulma doesnt have any classes for changing the box sizing */
.is-boxsizing-border {
    box-sizing: border-box;
}

.is-boxsizing-content {
    box-sizing: content-box;
}



.has-background-main {
    background-color: var(--bulma-scheme-main);
}

.has-background-main-bis {
    background-color: var(--bulma-scheme-main-bis);
}



/* bulma stacks is-horizontal form fields on mobile this forces it not to with is-mobile /*
/* mobile */
@media screen and (max-width: 768px) {
    .field.is-horizontal.is-mobile {
        display: flex;
        align-items: center;
    }

    .field.is-horizontal.is-mobile .field-label {
        margin-right: 1.5rem;
        margin-bottom: 0;
    }
}



/* is-static on input doesnt remove the place holder text for date time inputs this resolves that must have required attribute to work though */
input.is-static:invalid {

    /* // WebKit browsers (Chrome, Safari, Edge) */
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-year-field {
        color: transparent;
    }

    /* // Firefox browser */
    &::-moz-placeholder {
        opacity: 0;
    }
}








/* bulma has flex alignments but not for different device sizes */
/* mobile */
@media screen and (max-width: 768px) {

    .is-align-items-flex-start-mobile {
        align-items: start;
    }

    .is-align-items-flex-end-mobile {
        align-items: end;
    }
}

/* tablet */
@media screen and (min-width: 769px) {

    .is-align-items-flex-start-tablet {
        align-items: start;
    }

    .is-align-items-flex-end-tablet {
        align-items: end;
    }
}

/* desktop */
@media screen and (min-width: 1024px) {

    .is-align-items-flex-start-desktop {
        align-items: start;
    }

    .is-align-items-flex-end-desktop {
        align-items: end;
    }
}

/* widescreen */
@media screen and (min-width: 1216px) {

    .is-align-items-flex-start-widescreen {
        align-items: start;
    }

    .is-align-items-flex-end-widescreen {
        align-items: end;
    }
}

/* fullscreen */
@media screen and (min-width: 1408px) {

    .is-align-items-flex-start-fullhd {
        align-items: start;
    }

    .is-align-items-flex-end-fullhd {
        align-items: end;
    }
}