@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: auto;
}
body, html {
    margin: 0;
    padding: 0;
    height:100vh;
    width:100vw;
}

* {
    box-sizing: border-box;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

:root {
    --dark: #16182A; /* background & buttons color */
    --grey: #737373;
    --grey-light: #999999;
    --outline: #D5D7DD;
    --wideScreenActive: #2A2E50; /*side nav link active*/
    --wideScreenDarkHover: #232643; /*side nav link hover*/
    --wideScreenGrey: #D5D7DD; /*borders color*/
    --wideScreenGreyHover: #EBEDEF; /*background and grid hover color*/
    --topBar: #fff;
    --accent: #555A86;
    --error: #D32F2F;
    --sp: 1.5rem; /*Standard padding*/
    --standardPadding: 1.5rem; /*Standard padding*/

    --lightActionLink: rgb(85, 90, 134); /*table(grid) headers*/
    --whiteFontOnSolidBackground: #fff;
    --white: #fff;
    --inputHeight: 3rem;
    --buttonHeight: 2.75rem;
    --dialogHeader: #f2f2f2; /*replace raw usages in Chat project*/
}

body {
    --mdc-theme-primary: rgba(0,0,0,.68);
    --mdc-theme-secondary: rgba(0,0,0,.55);
}

.btn-primary {
    color: #fff;
    background-color: var(--dark);
    border-color: var(--dark);
}
.bg-primary {
    background-color: var(--dialogHeader) !important;
}

.content {
    padding-top: 1.1rem;
    height: 100%;
}

.fullScreen {
    position: absolute;
    overflow: auto;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,1);
}
.fullScreenOnTop {
    position: absolute;
    overflow: auto;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,1);
}

.footer {
    width: 100vw;
    padding-top: 24px;
    padding-bottom: 32px;
    border-top: 1px solid var(--wideScreenGreyHover);
}

.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

main {
    flex: 1;
    overflow: auto;
    background-color: var(--wideScreenGreyHover);
}
    main>* {
        background-color: white;
    }

    main main {
        background-color: white;
    }

.pageContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.mdc-button:not(:disabled) i {
    color: var(--dark);
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }



/*Our custom styles///////////////////////////////////////////////////////*/
    .app-fab--absolute {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        font-size: 10pt;
    }

    .app-fab2--absolute {
        position: fixed;
        bottom: 4.75rem;
        right: 1.5rem;
        font-size: 10pt;
        visibility: visible;
        max-width: 50px;
        max-height: 50px;
    }

    .app-fab3--absolute {
        position: fixed;
        bottom: 8.25rem;
        right: 2rem;
        font-size: 10pt;
        visibility: visible;
        max-width: 40px;
        max-height: 40px;
    }

    .appfabsubhide {
        visibility: collapse;
    }

    .mtheaderrow {
        background-color: red;
    }

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar, .hiddenScrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example, .hiddenScrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}


/* Hide scrollbar for IE, Edge and Firefox */




.topBar {
    padding: 5px 0px 5px 0px;
    display: flex;
    align-items: center;
    width:100%;
}
.topBar span {
    font-size: 20px;
    font-weight: bold;

}
.topBar button {
    margin-right: 5px;
}

.m0 {
    margin: 0px !important;
}

.p0 {
    padding: 0px !important;
}
.p24 {
    padding: 24px;
}

.pt-1rem {
    padding-top: 1.1rem;
}
.pb-1rem {
    padding-bottom: 1.1rem;
}

.m10 {
    margin: 10px !important;
}

.itemStatus {
    margin-left: auto;
    width: fit-content;
    height: fit-content;
    padding: 2px;
    white-space: nowrap;
}
.itemStatus p {
    margin: 0 6px 0 6px;
    font-size: 12px;
    line-height: 16px;
}

.statusColorOrange {
    background-color: rgba(230, 81, 0, 0.05);
    color: #ED6C02;
}

.statusColorGreen {
    background-color: rgba(46, 125, 50, 0.05);
    color: green;
}

.statusColorRed {
    background-color: rgba(211, 47, 47, 0.05);
    color: red;
}
.statusColorBlue {
    background-color: rgba(2, 136, 209, 0.05);
    color: #0288D1;
}
.statusColorYellow {
    background-color: lightgoldenrodyellow;
    color: orange;
}
.statusColorGray {
    background-color: rgba(100, 100, 100, 0.05);
    color: black;
}

.right {
    margin-left: auto;
    float: right;
    max-width: 60%;
}

.right span {
    white-space:nowrap;
}

.emptyState {
    height: 100%;
    min-height: 250px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align:center;
}

.emptyState i {
    font-size: 100px;
    align-self:center;    
    color:var(--grey-light);
    /*   height: 50px;
        width: 50px;*/
    /*transform: scale(5);*/
}

.emptyState p {
    font-size: 20px;
    font-weight: bold;
    margin-bottom:0px;
    align-self:center;  
}

.emptyState span {
    font-size: 14px;
    align-self:center;  
}

button.mdc-button {
    white-space: nowrap;
    height: 44px;
    text-transform: initial;
    /*border-radius:0;*/
}
span.mdc-tab__text-label {
    text-transform: initial;
}

button.mdc-ripple-upgraded:not(:disabled) {
    color: var(--dark);
}

button.mdc-ripple-upgraded.whiteWithBorder:not(:disabled), .whiteWithBorder:not(:disabled) {
    border: solid 1px var(--dark);
}

button.mdc-ripple-upgraded.grayButton {
    color: var(--dark);
    border: solid 1px var(--grey-light);
    border-style: dashed;
    background-color: #F9F9FB;
    align-self: center;
}

button.mdc-button--raised.mdc-ripple-upgraded {
    border-color: var(--dark);
    background-color: var(--dark);
    color: white;
}

button.mdc-button--raised.mdc-ripple-upgraded:disabled {
    border-color: rgba(0,0,0,.38);
    background-color: rgba(0,0,0,.38);
}

button.mdc-ripple-upgraded:disabled {
    background-color: white;
    color: rgba(0,0,0,.38);
}

button.mdc-ripple-upgraded.whiteWithBorder:disabled, .whiteWithBorder:disabled {
    border: solid 1px rgba(0,0,0,.38);
}


.flatpickr-day.selected {
    background-color: var(--dark) !important;
    border: var(--dark);
}
.leftLabel {
    width: 46%;
    font-size: 12px;
    color: gray;
    margin-right: 5px;
}

@media screen and (min-width: 100vh) and (min-width: 700px) {
    .leftLabel {
        width: 28%;
    }
}
.roundWrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 24px;
    width: 24px;
    background-color: #F0F0F0;
    border-radius: 50%;
}

.grayCard {
    background-color: #f2f3f4;
    padding: 16px;
    margin-top: 12px;
}
.standardInput {
    height: 48px;
    font-size: 14px;
    width: 100%;
}

.compactStandardInput {
    height: 32px;
    font-size: 10px;
    width: 125px;
}

.standardInput .mdc-select__anchor {
    height: 48px;
    font-size: 14px;
}
.standardInput.mdc-select .mdc-select__anchor {
    height: 48px;
    font-size: 14px;
}
.standardInput.mdc-text-field--outlined {
    height: 48px;
    font-size: 14px;
}
.standardInput.mdc-select .mdc-select__anchor{
    height: 48px;
    font-size: 14px;
}

.m-b-8 {
    margin-bottom: 8px;
}

.m-b-16 {
    margin-bottom: 16px;
}

.subHeader {
    font-size: 14px;
    font-weight: bold;
}

.standardTextInput {
    height: 48px;
    font-size: 14px;
    width: 100%;
}

/*border for a focused MatTextField*/
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused div,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused span {
    border-color: var(--wideScreenGreyHover) !important;
}

.mdc-text-field .mdc-text-field__input {
    caret-color: var(--grey-light) !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    color: var(--wideScreenGreyHover) !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: rgba(0,0,0,.55) !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-primary) !important;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) span.mdc-floating-label {
    color: var(--mdc-theme-primary);
}

div.mdc-menu-surface {
    z-index: 250; /*greater than .fullScreenOnTop; fixes dropdowns not working for popup like pages*/
}

/*receipt viewer telerikWindow*/
.viewerdiv {
    position: absolute;
    top: 0;
    height: 98vh;
    width: 98vw;
    z-index: 9999;
}

.viewerimg {
    border: 10px solid #ffffff;
}


.logoParent {
    height: 85px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sideMenuLogoParent {
    height: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
img.logo {
    display: block;
    height: 100%;
    width: auto;
    max-width: 175px;
}
.sideMenuLogoParent img.logo {
    height: auto;
    width: 100%;
}
.popupBackground {
    background-color: rgba(160,160,160,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
}


@media (max-width: 99.99vh) {
    .hiddenOnMobile {
        display: none !important;
    }

    fullWidthMobile {
        width: 100%;
    }
}

.fullScreenOnTop.page, .fullScreen.page {
    flex-direction: column;
}

@media screen and (min-width: 100vh) {
    .page {
        flex-direction: row; /*side position of navMenu*/
    }

    .hiddenWideScreen {
        display: none !important;
    }

    .px-4WideScreen {
        padding-left: 24px;
        padding-right: 24px;
    }
/*    main {
        position: relative;
    }*/

    .relativeWideScreen {
        position:relative;
    }
}

@media screen and (min-width: 100vh) { /*Nullifying extra default paddings for full page stuff*/
    .content:has( .fullScreenOnTop), .content:has( .fullScreen) {
        padding: 0px;
    }

    article.px-4:has( .fullScreenOnTop), article.px-4:has( .fullScreen) {
        padding: 0px !important;
    }

    .fullScreenOnTop, .fullScreen {
        width: 100%;
        /*position: unset;*/
    }

    .footer {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-left: 1px solid var(--wideScreenGreyHover);
        border-right: 1px solid var(--wideScreenGreyHover);
    }

    .footer button {
        flex-basis:auto !important;
    }

    .footer > div[style*="display:flex"] { /*displaying small action buttons at the right*/
            justify-content: flex-end !important;
    }        

    button.mdc-ripple-upgraded.grayButton {
        max-width: 425px;
    }

    /******** WEB ONLY *******/
    .grayWeb {
        background: var(--wideScreenGreyHover);
    }
    .pb-1remWeb {
        padding-bottom: 1.1rem;
    }
    .pt-1remWeb {
        padding-top: 1.1rem;
    }
    .px-4Web {
        padding-left: 24px;
        padding-right: 24px;
    }
    .p24Web {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .mdc-tab-bar {
        /*border-top: 1px solid var(--wideScreenGrey) !important;*/ /*overlapps with topbar :-( :-( creating 2px thick line */
        border-bottom: 1px solid var(--wideScreenGrey) !important;
    }
    .mat-tab-label:hover {
        background-color: var(--wideScreenGreyHover) !important;
    }
    .mdc-tab__ripple:hover {
        background-color: var(--wideScreenGreyHover) !important;
        opacity: 1 !important;
    }
    .mdc-tab-scroller__scroll-content {
        flex: 0 0 auto !important;
    }
    .grayBackground {
        min-width: 100%;
        flex: 1;
        padding: var(--sp);
        background: var(--wideScreenGreyHover);
    }
    .gridWithCards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: min-content;
        width: fit-content;
        column-gap: var(--sp);
        row-gap: var(--sp);
        background: var(--wideScreenGreyHover);
    }
    .grid3Columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: min-content;
        width: 100%;
        column-gap: var(--sp);
        row-gap: var(--sp);
        background: var(--wideScreenGreyHover);
    }
    .gridWithColumns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: min-content;
        width: 100%;
        column-gap: var(--sp);
        row-gap: var(--sp);
        background: var(--wideScreenGreyHover);
    }
    .m-sp {
        margin:var(--sp);
    }
    .grid1Columns {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid2Columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid3Columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid4Columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid5Columns {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid6Columns {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid7Columns {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .grid8Columns {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .grid9Columns {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
    .grid10Columns {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    .grid11Columns {
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }
    .grid12Columns {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    span.mdc-tab__text-label {
        font-size: 16px;
    }
    .addressCardWide {
        margin: var(--sp) var(--sp) var(--sp) var(--sp);
        background: white;
        border: 1px solid var(--wideScreenGrey);
    }

    .addressCardHeader {
        border-bottom: 1px solid var(--wideScreenGrey);
        padding: 16px var(--sp);
    }

    .addressCardBody {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-row-gap: var(--sp);
        grid-column-gap: 12px; /*custom, not present in wireframes*/
        padding: var(--sp);
    }

    .addressCardBodyFiveAcross {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-row-gap: var(--sp);
        grid-column-gap: 9px; /*custom, not present in wireframes*/
        padding: 18px;
    }

    .cardBody, .sp {
        padding: var(--sp);
    }

    .addressCardMini {
    }

    .addressCardMiniHeader {
        font-size: 14px;
        color: gray;
        margin-bottom:5px;
    }

    .popupPage {
        margin: auto auto auto auto;
        max-height:80%;
        max-width:80%; 
        min-width:50%; 
        min-height:50%;
        box-shadow: 1px 3px 16px gray;
        background-color:white; 
        overflow:auto;
    }

    .popupPageHeader {
        background: var(--dialogHeader);
        border-bottom: 1px solid var(--wideScreenGreyHover);
        display: flex;
        flex-direction: column;
    }

}


.mat-tab-group-content {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.myDetailGridClass .k-pager-info.k-pager {
    display: none !important;
}

.scrollableFullHeight {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}


.inputWeb .mdc-select__anchor {
    height: 3rem;
    font-size: 14px;
}

.inputWeb.mdc-select .mdc-select__anchor {
    height: 3rem;
    font-size: 14px;
}

.inputWeb.mdc-text-field--outlined {
    height: 3rem;
    font-size: 14px;
}

.inputWeb.mdc-select .mdc-select__anchor {
    height: 3rem;
    font-size: 14px;
}


.borderIfNotEmbedded, .standardBorder {
    border: 1px solid var(--wideScreenGrey);
}

/*.groupableColumnHeader {
    color: darkgreen !important;
}*/

.groupableColumnHeader span span {
    /*font-style: italic !important;*/
    font-weight: bold !important;
    color: var(--lightActionLink) !important;
}
.capitalizedSubSpan span {
    text-transform: capitalize;
}

.level2tab {
}

.level2tab .mat-tab-label {
    background: white;
    border: 1px solid var(--wideScreenGrey);
}

.level2tab .mat-tab-label.mdc-tab--active, .level2tab .mat-tab-label.mdc-tab--active .mat-tab-label:hover {
    background: var(--dark) !important;
    border: 1px solid var(--dark);
}

.level2tab .mat-tab-label.mdc-tab--active .mdc-tab__ripple:hover { /*same color remains on hover*/
    background: var(--dark) !important;
}


.level2tab span {
    font-size: 14px;
}

.level2tab .mat-tab-label.mdc-tab--active span {
    color: white;
}

.level2tab div.mdc-tab-bar {
    /*background:*/
    border: none !important;
}

.tabdiv {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp);
    margin-top: 24px;
}

.toggleContainer {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
}

.standardToggle {
    height: 18px;
    width: 18px;
}

.spGapRow {
    display: flex;
    flex-direction: row;
    gap: var(--sp);
}
.spGapColumn {
    display: flex;
    flex-direction: column;
    gap: var(--sp);
}


.buttonsContainer {
    flex-shrink: inherit;
    width: 100%;
    display: flex;
    gap: 1rem;
    word-wrap:normal;
    justify-content:end;
}

.bottomActionButton {
    flex-basis: 50%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ==== submit-time required/validation highlight (dynamic pages) ====
   OaPageSection puts .fieldInvalid on a field's wrapper div when the validator flags it on submit.
   The inputs themselves are a mix of MatBlazor (text field / date picker / select / radio group) and
   Telerik, and none of them render an error state on their own here: these forms have no EditForm /
   EditContext, so MatBlazor's own Required handling never kicks in, and MatRadioGroup has no Required
   at all. Colouring from the shared wrapper is what keeps all four looking the same.
   !important mirrors the base .mdc-notched-outline rules above, which use it too. */

/* text fields, date pickers - outlined variant draws its border in 3 notched-outline pieces */
.fieldInvalid .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.fieldInvalid .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.fieldInvalid .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing,
/* dropdowns (MatSelectValue) */
.fieldInvalid .mdc-select:not(.mdc-select--disabled) .mdc-notched-outline__leading,
.fieldInvalid .mdc-select:not(.mdc-select--disabled) .mdc-notched-outline__notch,
.fieldInvalid .mdc-select:not(.mdc-select--disabled) .mdc-notched-outline__trailing {
    border-color: var(--error) !important;
}

/* floating labels of the same, incl. the dropdown's own label element */
.fieldInvalid .mdc-text-field:not(.mdc-text-field--disabled) span.mdc-floating-label,
.fieldInvalid .mdc-select:not(.mdc-select--disabled) span.mdc-floating-label,
.fieldInvalid .mdc-select:not(.mdc-select--disabled) label.mdc-floating-label {
    color: var(--error);
}

/* radio groups have no floating label and no notched outline - they carry their own 1px border on
   .outlinedLabelContainer plus an absolutely positioned group label. Recolour both (border-color only,
   so the existing 1px solid geometry is untouched); without the border the group reads as noticeably
   less "wrong" than the four bordered controls next to it. */
.fieldInvalid .outlinedLabelContainer {
    border-color: var(--error);
}

.fieldInvalid .outlinedLabelContainer > label {
    color: var(--error);
}