/*necessary to put classes for EditForms and other components here and not in a 'page css' because else Blazor doesn't recognize it*/

:root {
    /*--blazor-default-gradienttop-color: rgb(5,39,103);*/
    /*--blazor-default-gradientbottom-color: #3a0647;*/
    /*--app-first-dark-color: #50627a; rgb(80,98,122)*/ /*blue*/
    /*--app-first-light-color: #a4d4eb; rgb(164,212,235)*/ /*blue*/
    /*--app-second-dark-color: #989b4c; rgb(152,155,76)*/ /*green*/
    /*--app-second-light-color: #d0d555; *rgb(205,213,85)*/ /*green*/

    --app-first-dark-color: #be283d; /*rgb(190,40,61)*/ /*red*/
    --app-first-light-color: #e0a6ae; /*rgb(224,166,174)*/ /*red*/
    --app-second-dark-color: #28b496; /*rgb(40,180,150)*/ /*green*/
    --app-second-light-color: #bae8de; /*rgb(186,232,222)*/ /*green*/

    --error-color: rgb(160 19 19);
    --message-color: rgb(160 19 19);
    --accept-color: green;
    --reject-color: red;
}

.as-spinner {
    margin-inline-end: 0.5rem;
    width: 1rem;
    height: 1rem;
    border: 0.3rem solid var(--app-second-light-color); /*#ddd;*/
    border-top: 0.4rem solid var(--app-first-dark-color); /* #3498db;*/
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

    /*remove default margin from lists*/
    ul, ol {
        margin: 0px;
    }

    table {
        margin-block: 1rem;
        border-collapse: collapse;
        width: 100%;
    }

    table:not(.noselection) tbody tr:not(.noselection):hover td:not(.noselection) { /* IMPORTANT td is necessary, because 'color' is not changed on row level, without td, only backcolor is changed */
        background-color: var(--app-first-dark-color);
        color: white;
    }

    td.as-child-table {
        overflow-x: auto;
        border-block-end: none;
        padding-block: 0rem;
        padding-inline-end: 0;
    }

    .as-child-table > table {
        margin-inline-start: 1.25rem;
        width: calc(100% - 1.25rem); /*ensure child table is not larger than parent - margin-inline */
        border-block-end: none;
        margin-block: 0;
    }

    th {
        background-color: var(--app-second-dark-color);
        color: white;
    }

    th, td {
        padding: 0.25rem 0.25rem;
        border-block-end: 1px solid var(--app-second-dark-color);
        text-align: left;
    }

    th.as-cellbtn, td.as-cellbtn {
        width: 0;
    }

        td.as-cellbtn > .as-btn, td.as-cellbtn > form > .as-btn {
            height: 1.75rem;
            width: 1.75rem;
            margin-inline: 0;
        }

            td.as-cellbtn > .as-btn span, td.as-cellbtn > form > .as-btn span {
                font-size: 0.9rem;
            }

    th.as-cellimg, td.as-cellimg {
        width: 0;
    }

    td.as-cellimg > span {
        display: block;
        text-align: center;
        font-size: 1.25rem;
    }

    td.as-separator {
        background-color: var(--app-second-light-color);
    }

    h1 {
    }

    h1 > span {
        font-size: 1rem;
        font-weight: bold;
    }

    h2 {
        background-color: var(--app-first-dark-color);
        padding: 0.25rem;
        text-align: center;
        color: white;
        font-size: 1rem;
        margin-block-end: 0.5rem;
    }

    h3, h4 {
        display: flex;
        margin-block: 0;
        margin-inline-start: 3rem;
        padding-inline-start: 1rem;
        padding-block: 0.25rem;
        border-inline-start: 2px solid var(--app-second-dark-color);
        font-size: 1rem;
        font-weight: bold;
    }

    h3:empty,h4:empty {
        display: none;
    }

    .as-reload h3, .as-reload h4 {
        margin-inline-start: 0.5rem; /*should be 2.5rem less than normal h3,h4 margin*/
    }

    h4 {
        font-style: italic;
        font-weight: initial;
    }

    .as-autoscroll {
        overflow: auto auto;
        scrollbar-width: none;
    }

    .as-autoscroll-h {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .as-autoscroll-v {
        overflow-y: auto;
        scrollbar-width: none;
    }

    .as-multiline {
        white-space: pre-line; /*Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks*/
    }

    .as-collapse {
        display: none !important;
    }

    .as-modal {
        /*background for modal content*/
        display: flex;
        position: fixed;
        z-index: 1; /*top*/
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }

    .as-hdr-only {
        max-width: 100%;
        margin-block-end: 3rem;
    }

    .as-hdr-only > img {
        display: flex;
        max-width: 100%;
        margin-inline: auto;
        margin-bottom: 2rem;
        height: 20vh;
        min-height: 6rem;
    }

    .as-dlg {
        background-color: white;
        width: 100%;
        margin: auto;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--app-first-dark-color);
        border-radius: 30px;
        outline: 3px solid white;
    }

    #login.as-dlg, #confirmaccount.as-dlg, #resetpassword.as-dlg, #forgotpassword.as-dlg, #sendaccountverification.as-dlg, #signaturerequest.as-dlg {
        max-width: 410px;
    }

    #asmessage.as-dlg {
        border-radius: 0;
        border-color: var(--message-color);
        width: fit-content;
        margin-block: auto;
        min-width: 250px;
        max-width: 95%;
        max-height: 75%;
        justify-self: center;
        align-self: center;
    }

    #asmessage > .as-dlg-content, #asapproval > .as-dlg-content {
        background-color: white;
        font-weight: bold;
        border-radius: 0;
    }

    #asmessage.as-dlg > h1 {
        background-color: var(--message-color);
        border-radius: 0;
    }

    #asapproval.as-dlg {
        border-radius: 0;
        border-color: var(--message-color);
        width: fit-content;
        margin-block: auto;
        min-width: 250px;
        max-width: 95%;
        max-height: 75%;
        justify-self: center;
        align-self: center;
    }

    #asapproval.as-dlg > h1 {
        background-color: var(--message-color);
        border-radius: 0;
    }

    #register.as-dlg {
        max-width: 600px;
    }

    .as-dlg > h1, .as-hdr-only > h1 {
        margin: 0;
        padding: 0.5rem 0.25rem 0.5rem 0.25rem;
        background-color: var(--app-first-dark-color);
        color: white;
        font-weight: 300;
        font-size: 1.25rem;
        text-align: center;
        font-variant: small-caps;
    }

    .as-dlg.as-noimage > h1 {
        border-top-left-radius: 27px;
        border-top-right-radius: 27px;
    }

    .as-dlg > img {
        display: flex;
        max-width: 100%;
        margin: auto;
        max-height: 6rem;
    }

    .as-dlg-content {
        background-color: var(--app-first-light-color);
        border-bottom-left-radius: 27px;
        border-bottom-right-radius: 27px;
        padding: 0.75rem 1rem 0.75rem 1rem;
        vertical-align: middle;
    }

    .as-dlg-item {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 0.5rem;
        vertical-align: middle;
    }

    .as-dlg-item > label {
        min-width: 250px;
        width: auto;
        padding-right: 0.75rem;
    }

    .as-dlg-item > label.as-small {
        min-width: 150px;
        width: auto;
        padding-right: 0.75rem;
    }

    .as-dlg-item > .as-input-stretch {
        flex: auto;
        min-width: 250px;
    }

    .as-dlg-item > .as-check {
        margin-block: auto;
    }

    .as-dlg-verify {
        display: flex;
        flex-direction: column;
        margin-inline: auto;
        margin-block: 1rem;
        max-inline-size: 22rem;
        padding-block: 0.5rem 1.5rem;
        border: 5px solid var(--app-first-dark-color);
        background-color: white;
        color: var(--app-first-dark-color);
    }

    .as-dlg-verify > label {
        margin: auto;
        font-size: 2rem;
        font-variant-caps: all-small-caps;
    }

    .as-dlg-verify > .as-input-stretch {
        margin: auto;
        max-width: 16rem;
        padding-inline-start: 1.6rem;
        border: 2px solid var(--app-second-dark-color);
        color: var(--app-second-dark-color);
        font-size: 3rem;
        font-family: Consolas, "Lucida Console", monospace;
        font-weight: bold;
        text-transform: uppercase;
        text-align: left;
        letter-spacing: 0.5rem;
    }

    .as-dlg-item.no-column {
        display: inline-flex;
        justify-content: left;
        padding-block: 0.25rem;
        width: 100%;
    }

    .as-dlg-item.no-column > label {
        padding-left: 0.5rem;
        width: auto;
    }

    .as-dlg > .as-msg {
        border-radius: 0;
        border-inline-width: 0;
        padding-inline-start: 0.75rem;
        padding-inline-end: 0.25rem;
        margin-block-end: 0;
    }

    .as-dlg-buttons {
        display: flex;
        flex-direction: column;
    }

    .as-dlg-buttons > div {
        margin-top: 1rem;
        margin-inline: auto;
    }

    .as-dlg-buttons > div > button {
        margin-inline: 0.25rem;
        justify-content: center;
        min-width: 8.5rem;
    }

    .as-dlg-buttons > div:last-of-type:not(:only-of-type):not(:empty) {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
        margin-inline: 0;
        padding-top: 0.5rem;
        padding-inline: 0rem;
        border-top: 2px solid var(--app-first-dark-color);
    }

    .as-dlg-validation {
        padding-inline: 0.5rem;
        padding-block: 0.5rem;
        color: black;
        background-color: rgba(255,0,0,0.5);
        text-transform: lowercase;
    }

    .as-dlg-validation:empty {
        padding-block: 0;
    }

    .as-dlg-validation > ul {
        padding-inline: 1.5rem;
        padding-block: initial;
    }

    .as-dlg-validation.white {
        color: red;
        font-weight: normal;
        background-color: inherit;
    }

    .as-dlg-validation.bold {
        font-weight: bold;
    }

    .as-msg {
        display: flex;
        margin: auto;
        padding-inline: 1.5rem;
        padding-block: 0.5rem;
        justify-content: center;
        align-items: center;
        text-align: left;
        margin-block-start: 1rem;
        margin-block-end: 2rem;
        border-block: 1px solid var(--app-first-dark-color);
        border-inline: 10px solid var(--app-first-dark-color);
        border-radius: 2rem;
        font-size: 1rem;
        font-weight: bold;
        background-color: white;
    }

    .as-no-block-space {
        margin-block: 0 !important;
    }

    .as-msg > .oi {
        padding-inline-end: 2.5rem;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--app-first-dark-color);
    }

    .as-msg.as-large {
        font-size: 2rem;
    }

    .as-msg.as-large > .oi {
        font-size: 3rem;
        padding-block: 1rem;
    }

    .as-msg.as-small {
        padding-block: 0.1rem;
        margin-block-start: 0;
    }

    .as-msg.as-small > .oi {
        font-size: 1rem;
        padding-inline-end: 1.25rem;
        padding-block: 0rem;
    }

    .as-msg.as-info {
    }

    .as-msg.as-success > .oi {
        /*color:var(--app-second-dark-color);*/
    }

    .as-msg.as-confirm {
        background-color: var(--app-first-light-color);
    }

    .as-msg.as-error {
        border-color: var(--error-color);
        color: var(--error-color);
    }

    .as-msg.as-error > .oi {
        color: var(--error-color);
    }

    .as-block-space {
        margin-block: 1rem;
    }

    .as-block-start-space {
        margin-block-start: 1rem;
    }

    .as-block-end-space {
        margin-block-end: 1rem;
    }

    .as-chat-list {
        display: flex;
        flex-direction: column;
        max-width: max-content;
        margin-inline-end: auto;
        padding-inline: 2rem;
        height: auto;
        max-height: 50vh;
        font-weight: normal;
    }

    .as-chat-list > div.as-separator {
        height: auto;
        min-height: 0.25rem;
        margin-block: 0.5rem;
        background-color: darkred;
    }

.as-chat {
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    margin-block: 0.5rem;
    border-style: solid;
    border-color: var(--error-color);
    border-block-width: 1px;
    border-inline-width: 5px;
    background-color: white;
    border-block-start-color: var(--app-second-dark-color);
    border-block-end-color: var(--app-first-dark-color);
    border-inline-start-color: var(--app-first-dark-color);
    border-inline-end-color: var(--app-second-dark-color);
}

    .as-chat.as-receiver, .as-chat.as-companyreceiver:not(.as-sender) {
        margin-inline-start: auto;
        padding-inline-start: 1.25rem;
        border-inline-start-width: 15px;
        border-inline-end-width: 5px;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-color: var(--app-first-dark-color);
    }

        .as-chat.as-sender, .as-chat.as-companysender:not(.as-receiver) {
            margin-inline-end: auto;
            padding-inline-end: 1.25rem;
            border-inline-end-width: 15px;
            border-inline-start-width: 5px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            border-top-right-radius: 2rem;
            border-bottom-right-radius: 2rem;

            border-color: var(--app-second-dark-color);
        }

        .as-chat.as-receiver{
            background-color: #dbf3ff;
        }

        .as-chat.as-sender {
            background-color: #f7f8d2;
        }

        .as-chat.as-receiver.as-companysender {
            border-inline-start-color: var(--error-color);
        }

        .as-chat.as-sender.as-companyreceiver {
            border-inline-end-color: var(--error-color);
        }

        .as-chat.as-sender.as-receiver {
            margin-inline: 0;
            padding-inline: 1.25rem;
            border-inline-width: 15px;
            border-radius: 2rem;
            background-color: white;
            border-block-color: var(--error-color);
            border-inline-start-color: var(--app-first-dark-color);
            border-inline-end-color: var(--app-second-dark-color);
        }

        .as-chat.as-companysender.as-companyreceiver {
            margin-inline: 0;
            padding-inline: 0.5rem;
            border-inline-width: 5px;
            border-radius: 0;
            border-color: var(--error-color);
        }

    .as-chat-list > .as-chat:last-of-type:not(:first-of-type) {
        /*add here style for last but not first chat item*/
        }

    .as-chat-hdr {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
        padding-block-end: 0.5rem;
        color: darkred;
        font-size: 0.75rem;
        font-weight: bold;
    }

    .as-chat-hdr > div {
        min-width: 3rem; /*used to allow spacing with empty div*/
    }

    .as-chat-content {
        display: block;
        margin-inline-start: 2rem;
        white-space: pre-line;
        font-size: 1rem;
    }

    .as-chat-content span {
        margin-inline-start: -1.75rem;
        margin-inline-end: 0.75rem;
        margin-block: 0;
        padding-block: 0;
    }

    .as-chat-ftr {
        display: block;
        margin-block-start: 0.25rem;
        margin-inline-start: 0;
        padding-block-start: 0.25rem;
        border-block-start: 1px solid;
        font-size: 0.65rem;
        color: darkred;
        font-weight: bold;
    }

    .as-chat-ftr span {
        margin-inline-start: 0.5rem;
        margin-inline-end: 0.85rem;
        margin-block: 0;
        padding-block: 0;
    }

    .as-navlink {
        display: inline-flex;
        color: var(--app-first-dark-color);
        font-weight: normal;
        text-align: left;
        vertical-align: middle;
    }

    .as-navlink:hover {
        color: var(--app-second-dark-color);
    }

    .as-navlink > h6 span {
        margin-inline-end: 0.5rem;
        text-decoration: none;
    }

    .as-toolbar {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        border-block-end: 2px solid var(--app-first-dark-color);
        padding-inline-start: 0.25rem;
        padding-block: 0.25rem;
        margin-block-end: 0.5rem;
    }

    div.as-horizontal-line {
        display: flex;
        width: 100%;
        border-block-end: 2px solid;
        border-block-end-color: inherit;
        padding-block: 0;
        margin-block: 0.25rem;
    }

    .as-btn {
        display: inline-flex;
        background-color: white;
        border: 3px solid var(--app-first-dark-color);
        color: black;
        margin: 0;
        padding-block: 0.25rem;
        padding-inline: 0.75rem;
        width: auto;
        border-radius: 1rem;
        font-size: 1rem;
        font-weight: bold;
        text-transform: lowercase;
        transition-duration: 0.5s;
    }

    .as-btn span {
        margin-inline-end: 0.5rem;
        margin-block: 0;
        padding-block: 0;
        font-size: 1rem;
    }

    .as-btn.as-imageonly {
        padding-inline: 0.25rem;
        margin-inline-end: 0.25rem;
        height: 2rem;
        width: 2rem;
        justify-content: center;
        border-width: 2px;
        border-radius: 0.25rem;
        color: var(--app-first-dark-color);
        outline: none;
    }

    .as-btn.as-imageonly > span {
        margin-inline-end: 0;
    }

    .as-btn.as-btnaccept {
        background-color: var(--accept-color);
        color: white;
    }

    .as-btn.as-btnreject {
        background-color: var(--reject-color);
        color: white;
    }

    .as-btn:hover {
        opacity: 0.75;
    }

    .as-btn.as-imageonly:not(:disabled):hover {
        background-color: var(--app-first-dark-color) !important;
        color: white !important;
        opacity: initial;
    }

    .as-btn:disabled {
        opacity: 0.2;
        cursor: not-allowed;
    }

    .as-btn:focus, .as-check:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem black;
    }

    .as-btn.as-reload:focus, .as-btn.as-imageonly:focus {
        box-shadow: none;
    }

    .as-btn.as-login, .as-btn.as-logout, .as-btn.as-register {
        font-size: 0.9rem;
    }

    .as-btn.as-logout {
        border-color: var(--error-color);
        background-color: var(--error-color);
        color: white;
    }

    .as-btn.as-reload {
        transition-duration: 0s !important; /*necessary to unset any transition duration because this causes flicker by setting margin to prevent moving side elements on hovering*/
        color: inherit;
        border: none;
        border-radius: 4px;
    }

    .as-btn.as-reload > span {
        margin-inline: 0;
        justify-content: center;
    }

    .as-btn.as-reload:active {
        background-color: var(--app-first-light-color);
    }

    .as-btn.as-reload:hover {
        border: 2px solid;
        margin: -2px; /*ensure no elements are moved by hovering over button*/
    }

    .as-btn.as-confirm {
        background-color: var(--app-second-light-color);
    }

    .as-btn.as-yes {
        background-color: white;
        color: var(--accept-color);
    }

    .as-btn.as-no {
        background-color: white;
        color: var(--reject-color);
    }

    .as-btn.as-cancel, .as-btn.as-close {
        color: var(--error-color);
    }

    .as-row {
        display: flex;
        flex-flow: row nowrap;
        list-style: none;
        gap: 0.75rem;
        margin-block-end: 0.75rem; /*necessary between separate as-rows*/
    }

    .as-flow-row {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
        list-style: none;
        padding: 0;
        gap: 0.75rem; /*space between items in a flow, but not after last item in col or last row*/
    }

    .as-flow-col {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        gap: 0.75rem; /*space between items in a flow, but not after last item in col or last row*/
    }

    .as-flow-col.as-nogap {
        gap: 0;
    }

    .as-flow-row > div, .as-flow-row > li {
        display: flex;
        flex-direction: row;
        flex: 1 1 auto;
    }

    .as-flow-col > div, .as-flow-col > li {
        display: flex;
        flex-direction: column;
    }

    .as-nostyle, .as-nostyle:hover {
        display: contents;
        color: initial;
        text-decoration: none;
    }

    .as-card:not(.as-nostyle) {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 2px solid var(--app-first-dark-color);
        border-radius: 10px;
        background-color: white;
    }

    .as-card-tree > .as-card:not(.as-nostyle) {
        width: max-content;
        max-width: 100%;
    }

    .as-card > h1 {
        margin: 0;
        padding: 0.5rem 1.25rem;
        background-color: var(--app-first-light-color);
        border-block-end: 1px solid var(--app-first-dark-color);
        font-weight: bold;
        font-size: 1rem;
        text-align: center;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    .as-card:not(.noselection):hover > h1, .as-card:not(.noselection):focus-within > h1 {
        background-color: var(--app-first-dark-color);
        color: white;
    }

    .as-card-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        padding: 0.5rem 0.75rem 1rem 0.75rem;
    }

    .as-card-tree {
        display: flex;
        flex-flow: column wrap;
        list-style: none;
        border-inline-start: 5px solid var(--app-second-light-color);
        padding-inline-start: 1rem;
        margin-block-end: 1.5rem;
    }

    .as-card-tree .as-card-tree {
        border: none;
        padding-inline: 0rem;
        margin-inline: 0.75rem;
        margin-block: 1rem 0rem;
    }

    .as-card-children {
        display: flex;
        list-style: none;
        flex-flow: row wrap;
        border-inline-start: 3px dotted var(--app-first-dark-color);
        margin-inline: 2.5rem 0.5rem;
        padding-inline: 1rem 1.50rem;
        padding-block: 0.5rem 0rem;
    }

    .as-card-item {
        display: flex;
        flex-flow: row wrap;
        justify-items: stretch;
        margin-bottom: 0.5rem;
        vertical-align: middle;
    }

    .as-card-description {
        display: flex;
        margin-block-start: auto;
        margin-block-end: 0.25rem;
        padding-block-start: 0.5rem;
        border-block-start: 1px solid var(--app-first-dark-color);
        text-align: left;
        word-wrap: normal;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        font-size: 0.85rem;
        font-style: italic;
    }

    .as-card-description:empty {
        display: none;
    }

    .w100 > .as-card-item > div:first-child {
        min-width: 100px;
    }

    .w125 > .as-card-item > div:first-child {
        min-width: 125px;
    }

    .w150 > .as-card-item > div:first-child {
        min-width: 150px;
    }

    .w175 > .as-card-item > div:first-child {
        min-width: 175px;
    }

    .w200 > .as-card-item > div:first-child {
        min-width: 200px;
    }

    .w225 > .as-card-item > div:first-child {
        min-width: 225px;
    }

    .w250 > .as-card-item > div:first-child {
        min-width: 250px;
    }

    .w275 > .as-card-item > div:first-child {
        min-width: 275px;
    }

    .w300 > .as-card-item > div:first-child {
        min-width: 300px;
    }

    .w325 > .as-card-item > div:first-child {
        min-width: 325px;
    }

    .w350 > .as-card-item > div:first-child {
        min-width: 350px;
    }

    .w375 > .as-card-item > div:first-child {
        min-width: 375px;
    }

    .w400 > .as-card-item > div:first-child {
        min-width: 400px;
    }

    .w450 > .as-card-item > div:first-child {
        min-width: 450px;
    }

    .w500 > .as-card-item > div:first-child {
        min-width: 500px;
    }

    .w550 > .as-card-item > div:first-child {
        min-width: 550px;
    }

    .w600 > .as-card-item > div:first-child {
        min-width: 600px;
    }

    .w650 > .as-card-item > div:first-child {
        min-width: 650px;
    }

    .w750 > .as-card-item > div:first-child {
        min-width: 750px;
    }

    .w750 > .as-card-item > div:first-child {
        min-width: 750px;
    }

    .as-card-item > div > span {
        padding-inline: 0.5rem;
    }

    .as-card-item > div:first-child {
        display: flex;
        width: auto;
        padding-right: 0.75rem;
    }

    .as-card-item > div:not(div:first-child) {
        display: flex;
        flex: auto;
    }

    .as-card-buttons {
        display: flex;
        flex-direction: column;
        padding-block: 0.25rem 0.75rem;
        margin-inline: 0;
        padding-inline: 0rem;
    }

    .as-card-buttons > div {
        margin-top: auto;
        margin-inline: auto;
    }

    .as-card-buttons > div > button {
        margin-inline: 0.25rem;
        border-width: 2px;
        font-size: 0.85rem;
    }

    @media (max-width: 724.98px) { /*640.98*/
        .as-card:not(.as-nostyle) {
    }

}


@media (min-width: 725px) { /*641*/
    .as-flow-row > div:last-of-type, .as-flow-row > li:last-of-type{
        display: flex;
        flex-direction: row;
        min-width: 30%; /*prevent too small display if not on last row */
        flex: 0 1 auto; /*prevent last item in grid being stretched on wide screens*/
    }
}