html, body {
    color: var(--neutrals-700);
}

*, *::before, *::after {
    box-sizing: border-box;
}

.col-max {
    grid-column: 1/-1;
}

.align-start {
    align-items: start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: end;
}

.justify-start {
    justify-items: start;
}

.justify-center {
    justify-items: center;
}

.justify-end {
    justify-items: end;
}

.active-link {
    text-decoration: underline;
}

.filter-select .clear-icon svg path {
    stroke: #5F6773;
}

.filter-select .clear-icon:hover svg path {
    stroke: #3B4048;
}

/* This is specific to the ASButton since we can't apply styles to the SVG due to the use of MarkupString. */
.as-button-wrapper .btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translateY(0.15em);
}

.space12 {
    width: 100%;
    height: 12px;
    display: block;
}

.space16 {
    width: 100%;
    height: 16px;
    display: block;
}

.space20 {
    width: 100%;
    height: 20px;
    display: block;
}

.space24 {
    width: 100%;
    height: 24px;
    display: block;
}

.space32 {
    width: 100%;
    height: 32px;
    display: block;
}

.mud-alert-filled-success {
    background-color: var(--success-light);
    color: var(--success-default);
}

.mud-alert-filled-error {
    background-color: var(--error-light);
    color: var(--error-default);
}

.mud-alert-filled-warning {
    background-color: var(--warning-light);
    color: var(--warning-default);
}

.mud-alert-filled-info {
    background-color: var(--info-light);
    color: var(--info-default);
}

.registerHeaderCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.registerHeaderCenterSubtext {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .registerHeaderCenterSubtext h3 {
        padding-bottom: 4px;
    }

.registerHeaderTitle {
    color: var(--neutrals-700, var(--neutrals-700, #3B4048));
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

@media (max-width: 520px) {
    .session-expired-modal.mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        --mud-default-borderradius: 0 !important;
        border-radius: 0 !important;
    }

        .session-expired-modal.mud-dialog .mud-dialog-title {
            border-radius: 0 !important;
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }
}

.grid-container .filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    align-items: flex-start;
    margin-bottom: 12px;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.grid-container .page-header.with-create {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.grid-container .filters-container {
    padding: 16px 0px;
}

.grid-container .btn-add {
    height: 48px;
    min-width: 116px;
    font-size: var(--fontSize-16, 16px);
    font-weight: var(--fontWeight-semibold, 600);
    line-height: 1;
}

    .grid-container .btn-add .button-icon,
    .grid-container .btn-add .btn-icon,
    .grid-container .btn-add svg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-top: 0;
    }

.filters-container .filters-sub-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-input {
    flex-grow: 1;
    min-width: 180px;
    max-width: 220px;
    width: fit-content;
}

.filter-text-input {
    flex-grow: 1;
    min-width: 300px;
    max-width: 540px;
}

@media (max-width: 768px) {
    .filters-container {
        flex-direction: column;
    }

    .filter-input,
    .filter-text-input {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
}

.user-info-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

::deep .mud-avatar-filled.mud-avatar-filled-secondary {
    color: #235488;
}

.user-container {
    display: flex;
    align-content: center;
    gap: 12px;
}

.username-container {
    display: flex;
    flex-direction: column;
    line-height: 20px;
}

    .username-container span:first-child {
        color: #181D27;
        font-weight: 500;
    }

    .username-container span:last-child {
        color: #5F6773;
        font-weight: 500;
    }

.smartform-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: flex-end;
    margin-top: 24px;
}

    .smartform-actions > div {
        width: auto !important;
    }


.smartforms .file-container {
    padding: 20px;
    background: white;
}



.quickgrid tbody tr td {
    font-weight: 500;
}

.grid-container .actions-container .btn {
    padding: 10px 16px !important;
    font-family: var(--fontFamily-Roboto, Roboto) !important;
    font-size: var(--fontSize-14, 14px) !important;
    font-style: normal !important;
    font-weight: var(--fontWeight-semibold, 600) !important;
    line-height: 20px !important;
}

    .grid-container .actions-container .btn .btn-icon {
        width: 20px !important;
        height: 20px !important;
    }


.grid-container h4 .badge {
    font-family: var(--fontFamily-Roboto, Roboto) !important;
    font-size: var(--fontSize-12, 12px) !important;
    font-style: normal !important;
    font-weight: var(--fontWeight-medium, 500) !important;
    line-height: 18px !important;
}

.filters-sub-container .as-multi-select-label {
    line-height: 12px;
}

.pagination .btn {
    line-height: 20px !important;
    padding: 8px 14px !important;
    font-weight: var(--fontWeight-semibold, 600) !important;
}

.pagination .mud-button-label {
    font-size: var(--fontSize-14, 14px);
    font-weight: var(--fontWeight-medium, 500);
}

.grid .col-title {
    padding: 0 !important;
}


.smartforms .file-container {
    padding: 20px;
    background: white;
}


.smart-form-col-1 {
    width: 100%;
}

.smart-form-col-2 {
    width: 100%;
}

.smart-form-col-3 {
    width: 100%;
}

.smart-form-col-4 {
    width: 100%;
}

@media (min-width: 768px) {
    .smart-form-col-2 {
        width: 50%;
    }

    .smart-form-col-3 {
        width: 33.333333%;
    }

    .smart-form-col-1 {
        width: 25%;
    }
}

.smart-form-container {
    background-color: white;
    padding: 24px;
    border-radius: 12px;
}

.smart-form-tab {
    margin-left: -12px;
    margin-right: -12px;
    display: flex;
    flex-wrap: wrap;
}

.smart-form-field {
    padding: 0 12px 16px 12px;
    box-sizing: border-box;
}

    .smart-form-field.Section {
        padding: 0 12px;
    }

        .smart-form-field.Section:not(:first-child) {
            padding-top: 24px;
        }

.smart-form-actions {
    justify-content: flex-end;
}

    .smart-form-actions .previous-button {
        margin-right: 12px;
    }

.smart-form-blurb h3 {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
}

.smart-form-progress-indicator {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 24px;
}

.elevated-container {
    background-color: var(--base-white);
    padding: 24px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    gap: 16px;
    display: flex;
    flex-direction: column;
}

.modal-grid-record .as-styled-icon svg {
    width: 24px;
    height: 24px;
}


.modal-grid-record-create .as-styled-icon svg path {
    stroke: #039855 !important;
    fill: none;
}

.modal-grid-record-edit .as-styled-icon svg path {
    stroke: #DC6803 !important;
    fill: none;
}

.modal-grid-record .modal-body {
    margin: 16px 0 0 0;
    width: 100%;
}

.modal-grid-record .mud-dialog-actions {
    padding: 0;
}

.modal-grid-record .modal-actions {
    width: 100%;
}

    .modal-grid-record .modal-actions .modal-button-group {
        width: 100%;
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

        .modal-grid-record .modal-actions .modal-button-group .as-button-wrapper {
            width: 100%;
        }

            .modal-grid-record .modal-actions .modal-button-group .as-button-wrapper .btn {
                width: 100%;
            }

.grid-container .mud-pagination {
    gap: 0px;
}

.modal-grid-record-edit .as-styled-icon svg g {
    stroke: #DC6803 !important;
    fill: none;
}

.modal-grid-record-bulkstatus .as-styled-icon svg g {
    stroke: #DC6803 !important;
    fill: none;
}

.base-modal-content.success-state .modal-icon svg path {
    stroke: #039855 !important;
    fill: none;
}

.visitor-checkin-modal .success-state {
    align-items: center !important;
}

.visitor-checkin-modal .modal-subheading {
    text-align: center;
}

.visitor-checkin-modal .modal-actions {
    width: 100%;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .page-header p {
        color: var(--neutrals-600);
        font-size: var(--font-size-16);
        line-height: var(--line-height-24);
        font-weight: var(--font-weight-regular);
    }
    
.session-expired-modal {
    padding: 15px;
}

.hide {
    display: none !important;
}

:root {
    --mud-zindex-snackbar: 20000;
}

.empty-state-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 400px;
    padding: 48px 24px;
}