:root {
    --ui-font: "Segoe UI", sans-serif;
    --ui-ink: #172b42;
    --ui-muted: #526579;
    --ui-line: #dce5ed;
    --ui-radius: 12px;
    --ui-shadow: 0 3px 16px #17365209;
    --font-display: var(--ui-font);
    --font-body: var(--ui-font);
    --font-wide: var(--ui-font);
    --font-mono: var(--ui-font);
    --fg: #172b42;
    --fg-muted: #595959;
    --fg-subtle: #526579;
    --fg-on-dark: #fff;
    --bg: #f3f7fa;
    --bg-surface: #fff;
    --bg-sunken: #f3f7fa;
    --border: #dce5ed;
    --border-strong: #164e63;
    --accent: #164e63;
    --accent-bg: #164e63;
    --danger: #b42338;
    --warning: #825212;
    --brafa-black: #111;
    --brafa-ink: #164e63;
    --brafa-graphite: #494949;
    --brafa-white: #fff;
    --brafa-fog: #dce5ed;
    --brafa-paper: #fff;
    --brafa-bone: #f3f7fa;
    --brafa-steel: #526579;
    --brafa-green: #15803d;
    --brafa-green-deep: #166534;
    --brafa-green-soft: #edf9f0;
    --brafa-red: #b42338;
    --brafa-red-soft: #fff7f7;
    --brafa-amber: #825212;
    --brafa-amber-soft: #fffaf1;
    --brafa-blue: #334e68;
    --weight-light: 400;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --text-body: 15px;
    --text-small: 13px;
    --dur-fast: 150ms;
    --dur-base: 180ms;
    --ease: ease
}

@media screen {
    html {
        scroll-padding-top: 96px
    }

    html body.brafa-app,
    html body.brafa-guest {
        margin: 0;
        background: var(--bg) !important;
        color: #164e63;
        font-family: var(--ui-font) !important;
        font-size: 15px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased
    }

    html body:is(.brafa-app, .brafa-guest) :not(.material-icons):not(.material-icons-round):not(.material-symbols-outlined):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.ni) {
        font-family: var(--ui-font) !important
    }

    html body:is(.brafa-app, .brafa-guest) * {
        box-sizing: border-box
    }

    html body:is(.brafa-app, .brafa-guest) h1,
    html body:is(.brafa-app, .brafa-guest) h2,
    html body:is(.brafa-app, .brafa-guest) h3,
    html body:is(.brafa-app, .brafa-guest) h4,
    html body:is(.brafa-app, .brafa-guest) h5,
    html body:is(.brafa-app, .brafa-guest) h6 {
        color: #172b42;
        letter-spacing: -.025em;
        line-height: 1.3;
        font-weight: 600
    }

    html body:is(.brafa-app, .brafa-guest) h1 {
        font-size: clamp(26px, 2.5vw, 34px)
    }

    html body:is(.brafa-app, .brafa-guest) h2 {
        font-size: clamp(22px, 2vw, 28px)
    }

    html body:is(.brafa-app, .brafa-guest) h3 {
        font-size: 22px
    }

    html body:is(.brafa-app, .brafa-guest) h4 {
        font-size: 20px
    }

    html body:is(.brafa-app, .brafa-guest) h5 {
        font-size: 18px
    }

    html body:is(.brafa-app, .brafa-guest) h6 {
        font-size: 15px
    }

    html body.brafa-app .main-content {
        margin: 0 !important;
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: none !important;
        min-height: 100dvh;
        overflow: visible;
        border-radius: 0 !important
    }

    html body.brafa-app .brafa-workspace>div,
    html body.brafa-app .brafa-workspace>section {
        min-width: 0;
        max-width: 100%
    }

    html body.brafa-app .brafa-workspace>.container,
    html body.brafa-app .brafa-workspace>.container-fluid,
    html body.brafa-app .brafa-workspace>div>.container,
    html body.brafa-app .brafa-workspace>div>.container-fluid,
    html body.brafa-app .brafa-screen {
        width: 100%;
        max-width: none !important;
        padding: 28px clamp(16px, 2.4vw, 40px)
    }

    html body.brafa-app .centered-container {
        max-width: none !important;
        width: 100%
    }

    html body.brafa-app :is(.row, .input-row, .form-grid, .grid, .grid-2, .grid-3, .grid-4, .brafa-kv-grid)>* {
        min-width: 0
    }

    html body.brafa-app :is(.profile-shell, .parking-shell, .ajax-shell, .notes-shell, .users-shell, .records-shell, .payments-shell, .property-shell, .rooms-shell) {
        max-width: none !important;
        width: 100%
    }

    html body.brafa-app :is(.profile-saas-page, .parking-saas-page, .ajax-saas-page, .notes-saas-page, .users-saas-page, .records-page, .payments-page, .property-details-page, .rooms-page) {
        background: #fff !important;
        color: #164e63 !important
    }

    html body.brafa-app .brafa-header {
        display: flex;
        align-items: center;
        gap: 32px;
        flex-wrap: wrap;
        position: sticky;
        top: 0;
        z-index: 1030;
        min-height: 78px;
        padding: 14px clamp(16px, 2.4vw, 40px);
        background: #fff !important;
        border-bottom: 1px solid #e9e9e9;
        box-shadow: 0 2px 12px #00000003
    }

    .brafa-brand {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        color: #111
    }

    .brafa-brand img {
        width: 108px;
        height: 42px;
        object-fit: contain
    }

    .brafa-navigation {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .brafa-navigation a {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #526579;
        padding: 10px 16px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap
    }

    .brafa-navigation a:hover {
        background: #edf5f8;
        color: #111
    }

    .brafa-navigation a.is-active {
        background: #164e63;
        color: #fff
    }

    .brafa-navigation .material-icons {
        font-size: 19px
    }

    .brafa-account {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 18px;
        margin: 0 0 0 auto;
        padding: 0
    }

    .brafa-account .nav-item {
        margin-right: 0 !important
    }

    .brafa-profile {
        position: relative
    }

    .brafa-profile summary {
        display: flex;
        align-items: center;
        gap: 10px;
        list-style: none;
        padding: 4px;
        cursor: pointer;
        border-radius: 8px
    }

    .brafa-profile summary::-webkit-details-marker {
        display: none
    }

    .brafa-profile summary img {
        width: 34px;
        height: 34px;
        object-fit: cover;
        border: 1px solid #e5edf3;
        border-radius: 50%
    }

    .brafa-profile summary span {
        font-size: 13px;
        font-weight: 600;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .brafa-profile-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 14px);
        z-index: 1050;
        width: 250px;
        max-width: calc(100vw - 32px);
        padding: 10px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #dce5ed;
        box-shadow: 0 16px 48px #00000014
    }

    .brafa-profile-panel strong {
        display: block;
        padding: 10px;
        overflow-wrap: anywhere;
        font-size: 13px
    }

    .brafa-profile-panel a,
    .brafa-profile-panel button {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border: 0;
        border-radius: 8px;
        background: #fff;
        color: #334e68;
        width: 100%;
        text-align: left;
        font-size: 13px;
        cursor: pointer
    }

    .brafa-profile-panel form {
        margin: 0
    }

    .brafa-profile-panel a:hover,
    .brafa-profile-panel button:hover {
        background: #edf5f8
    }

    .brafa-account .dropdown-menu {
        width: 340px;
        max-width: calc(100vw - 32px);
        max-height: 70dvh;
        overflow: auto;
        right: 0 !important;
        left: auto !important;
        margin-right: 0 !important;
        border: 1px solid #dce5ed;
        border-radius: 12px;
        box-shadow: 0 14px 44px #00000012
    }

    .brafa-account .dropdown-item {
        white-space: normal;
        overflow-wrap: anywhere
    }

    html body.brafa-app .card,
    html body.brafa-guest .card {
        border: 1px solid #dce5ed !important;
        background: #fff !important;
        background-image: none !important;
        color: #164e63 !important;
        border-radius: 16px !important;
        box-shadow: var(--ui-shadow) !important;
        min-width: 0
    }

    html body.brafa-app .card-header,
    html body.brafa-guest .card-header {
        padding: 22px 24px;
        background: #fff !important;
        border-bottom: 1px solid #e5edf3;
        border-radius: 15px 15px 0 0 !important;
        color: #164e63 !important;
        box-shadow: none !important
    }

    html body.brafa-app .card-header.mt-n4,
    html body.brafa-guest .card-header.mt-n4 {
        margin: 0 !important;
        padding: 20px 24px !important;
        position: static !important
    }

    html body.brafa-app .card-header :is(.bg-gradient-primary, .bg-gradient-dark, .bg-gradient-info, .bg-gradient-success, .bg-gradient-secondary, .bg-gradient-warning),
    html body.brafa-guest .card-header :is(.bg-gradient-primary, .bg-gradient-dark) {
        background: #fff !important;
        background-image: none !important;
        color: #164e63 !important;
        padding: 0 !important;
        box-shadow: none !important
    }

    html body:is(.brafa-app, .brafa-guest) .card-body {
        min-width: 0;
        padding: 24px
    }

    html body:is(.brafa-app, .brafa-guest) .card-footer {
        border-top: 1px solid #e5edf3;
        background: #fff !important;
        padding: 18px 24px
    }

    html body:is(.brafa-app, .brafa-guest) .card :is(.text-white, .text-light, .text-white-50) {
        color: #263c50 !important
    }

    html body:is(.brafa-app, .brafa-guest) .card :is(.text-secondary, .text-muted) {
        color: #526579 !important
    }

    html body:is(.brafa-app, .brafa-guest) .card :is(.bg-gradient-dark, .bg-gradient-primary, .bg-gradient-info, .bg-gradient-success, .bg-gradient-warning, .bg-gradient-secondary, .bg-gradient-danger):not(.btn):not(.badge):not(.icon):not(.icon-circle):not(.progress-bar):not(.alert):not(.pill):not(.status-pill) {
        background: #fff !important;
        background-image: none !important;
        color: #164e63 !important;
        box-shadow: none !important
    }

    html body.brafa-app .card img[src*="/shapes/"] {
        display: none
    }

    html body.brafa-app .stat-card .card-body {
        position: relative;
        text-align: left !important;
        padding: 22px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    html body.brafa-app .stat-card .icon-circle {
        width: 36px;
        height: 36px;
        margin: 0 0 8px !important;
        border: 1px solid #ececec;
        border-radius: 10px;
        background: #fff !important;
        color: #111 !important
    }

    html body.brafa-app .stat-card .icon-circle i {
        color: #111 !important;
        font-size: 20px
    }

    html body.brafa-app .stat-card h6 {
        font-size: 12px !important;
        letter-spacing: 0;
        text-transform: none !important;
        font-weight: 500 !important;
        color: #526579 !important;
        margin: 0 !important
    }

    html body.brafa-app .stat-card h2 {
        font-size: 29px !important;
        letter-spacing: -.04em;
        color: #164e63 !important;
        margin: 0 !important
    }

    html body.brafa-app .stat-card:hover {
        transform: none;
        box-shadow: 0 4px 20px #00000008 !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="image"]):not([type="file"]), select, textarea, .form-control, .form-select, .input) {
        background-color: #fff !important;
        color: #172b42 !important;
        border: 1px solid #b8c8d6 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        min-height: 46px;
        padding: 10px 13px !important;
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1.5;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        transition: border-color .15s, box-shadow .15s
    }

    html body:is(.brafa-app, .brafa-guest) :is(input, select, textarea, .input)::placeholder {
        color: #526579 !important;
        opacity: 1;
        font-size: 13px
    }

    html body:is(.brafa-app, .brafa-guest) :is(input, select, textarea, .input):focus {
        border-color: #000 !important;
        outline: 0;
        box-shadow: inset 0 2px 4px #00000005, 0 0 0 3px #0000000d !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(input, select, textarea):disabled {
        background-color: #fff !important;
        border-color: #b7b7b7 !important;
        box-shadow: none !important;
        color: #858585 !important;
        cursor: not-allowed
    }

    html body:is(.brafa-app, .brafa-guest) textarea {
        min-height: 120px;
        resize: vertical
    }

    html body:is(.brafa-app, .brafa-guest) input[type="file"] {
        width: 100%;
        max-width: 100%;
        padding: 9px;
        border: 1px solid #334e68;
        border-radius: 10px;
        background: #fff;
        font-size: 13px
    }

    html body:is(.brafa-app, .brafa-guest) input[type="file"]::file-selector-button {
        padding: 7px 12px;
        border: 0;
        background: #164e63;
        color: #fff;
        border-radius: 6px;
        margin-right: 12px;
        font-size: 12px
    }

    html body:is(.brafa-app, .brafa-guest) input[type="checkbox"],
    html body:is(.brafa-app, .brafa-guest) input[type="radio"] {
        width: 17px;
        height: 17px;
        min-height: 0;
        padding: 0 !important;
        accent-color: #172b42;
        flex-shrink: 0;
        box-shadow: none !important
    }

    html body:is(.brafa-app, .brafa-guest) .form-switch .form-check-input {
        width: 36px !important;
        height: 20px !important;
        border-radius: 999px !important;
        min-height: 0 !important
    }

    html body:is(.brafa-app, .brafa-guest) .form-check-input:checked {
        background-color: #164e63 !important;
        border-color: #164e63 !important
    }

    html body:is(.brafa-app, .brafa-guest) .form-check {
        min-height: 24px
    }

    html body:is(.brafa-app, .brafa-guest) label,
    html body:is(.brafa-app, .brafa-guest) .field-label {
        font-size: 13px;
        font-weight: 500;
        color: #303030;
        margin-bottom: 7px;
        line-height: 1.45;
        letter-spacing: 0
    }

    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline {
        display: flex;
        flex-direction: column;
        gap: 7px;
        align-items: stretch;
        border: 0 !important;
        background: transparent !important
    }

    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline>.form-label {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        font-size: 13px !important;
        color: #303030 !important;
        width: auto !important
    }

    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline>.form-label:before,
    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline>.form-label:after {
        display: none !important
    }

    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline>.form-control {
        width: 100% !important;
        padding: 11px 13px !important;
        border-top-color: #334e68 !important
    }

    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline:has(>button),
    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline:has(>.input-group-text) {
        flex-direction: row;
        align-items: center
    }

    html body:is(.brafa-app, .brafa-guest) .input-group.input-group-outline:has(>button)>.form-control {
        flex: 1;
        min-width: 0;
        width: 1% !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(.form-group, .mb-3:has(>label)) {
        margin-bottom: 20px
    }

    html body.brafa-app :is(.input-row, .form-grid) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: start
    }

    html body.brafa-app .input-row {
        gap: 16px
    }

    html body.brafa-app .form-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 20px;
        margin-top: 24px;
        border-top: 1px solid #e5edf3
    }

    html body:is(.brafa-app, .brafa-guest) :is(.is-invalid, .inputerror) {
        border-color: #b42338 !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(.invalid-feedback, .field-error, .inputerror) {
        font-size: 12px;
        line-height: 1.5;
        color: #b42338 !important;
        margin-top: 6px
    }

    html body:is(.brafa-app, .brafa-guest) .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 39px;
        padding: 9px 16px;
        border-radius: 9px !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0;
        text-transform: none !important;
        white-space: normal;
        vertical-align: middle;
        transition: background-color .15s, border-color .15s
    }

    html body:is(.brafa-app, .brafa-guest) :is(.btn-primary, .btn-dark, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn.bg-gradient-primary, .btn.bg-gradient-dark, .btn.bg-gradient-success, .btn.bg-gradient-info, .btn.bg-gradient-warning, .btn.bg-gradient-danger, .btn--solid) {
        background: #164e63 !important;
        background-image: none !important;
        color: #fff !important;
        border: 1px solid #164e63 !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is([class*="btn-outline"], .btn--outline, .btn-white, .btn-light, .btn.bg-gradient-light) {
        background: #fff !important;
        background-image: none !important;
        color: #334e68 !important;
        border: 1px solid #282828 !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is(.btn-link, .btn--ghost) {
        background: transparent !important;
        border-color: transparent !important;
        color: #334e68 !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:hover {
        filter: none;
        box-shadow: 0 2px 6px #00000009 !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    html body:is(.brafa-app, .brafa-guest) .btn :is(.text-white, .text-light, .text-dark, .material-icons) {
        color: inherit !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn-sm,
    html body.brafa-app .btn--sm {
        min-height: 32px;
        padding: 6px 11px;
        font-size: 12px !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn-icon-only {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0 !important;
        flex-shrink: 0
    }

    html body:is(.brafa-app, .brafa-guest) :is(.table-responsive, .brafa-table-scroll, .table-wrap, .table-wrapper) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-radius: 0 0 12px 12px
    }

    html body.brafa-app table {
        width: 100%;
        font-size: 13px;
        color: #263c50;
        border-collapse: collapse;
        background: #fff
    }

    html body.brafa-app :is(table, .table) th {
        padding: 14px 16px !important;
        border-bottom: 1px solid #e6e6e6;
        background: #f3f7fa !important;
        color: #6b6b6b !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .025em;
        text-transform: none !important;
        vertical-align: middle
    }

    html body.brafa-app :is(table, .table) td {
        padding: 14px 16px !important;
        border-color: #e5edf3;
        color: #292929 !important;
        vertical-align: middle;
        line-height: 1.5
    }

    html body.brafa-app table tbody tr:hover {
        background: #fcfcfc
    }

    html body.brafa-app table .btn {
        margin-bottom: 0
    }

    html body.brafa-app :is(.modal-content, .modal-content-custom, .modal-body-custom, .modal-header-custom) {
        background: #fff !important;
        color: #164e63 !important;
        border-color: #dce5ed !important;
        background-image: none !important
    }

    html body.brafa-app .modal-dialog:not(.modal-fullscreen):not(.custom-wizard-modal) {
        max-width: min(var(--bs-modal-width, 800px), calc(100vw - 32px));
        margin-right: auto;
        margin-left: auto
    }

    html body.brafa-app .modal-dialog.modal-lg {
        --bs-modal-width: 1000px
    }

    html body.brafa-app .modal-dialog.modal-xl {
        --bs-modal-width: 1240px
    }

    html body.brafa-app .modal-content {
        border: 1px solid #dfdfdf !important;
        border-radius: 16px !important;
        box-shadow: 0 24px 90px #00000025 !important;
        max-height: calc(100dvh - 48px);
        overflow: hidden
    }

    html body.brafa-app .custom-wizard-modal .modal-content,
    html body.brafa-app .modal-fullscreen .modal-content {
        max-height: 100dvh;
        border-radius: 0 !important
    }

    html body.brafa-app .modal-body {
        min-height: 0;
        overflow: auto;
        padding: 24px
    }

    html body.brafa-app .modal-header,
    html body.brafa-app .modal-footer {
        padding: 18px 24px;
        border-color: #e8e8e8;
        gap: 10px;
        flex-wrap: wrap;
        background: #fff !important;
        color: #164e63 !important
    }

    html body.brafa-app .modal-content :is(.text-white, .text-light) {
        color: #334e68 !important
    }

    html body.brafa-app .modal-content .btn:is(.btn-primary, .btn-dark, [class*="bg-gradient"]),
    html body.brafa-app .modal-content .btn:is(.btn-primary, .btn-dark, [class*="bg-gradient"]) .text-white {
        color: #fff !important
    }

    html body.brafa-app :is(.modal-title, .card-heading) {
        font-size: 18px;
        line-height: 1.35;
        margin: 0;
        color: #164e63
    }

    html body.brafa-app .pagination {
        flex-wrap: wrap;
        gap: 5px;
        margin: 0
    }

    html body.brafa-app .pagination .page-link {
        border: 1px solid #e0e0e0;
        border-radius: 8px !important;
        min-width: 34px;
        min-height: 34px;
        padding: 6px 10px;
        color: #334e68;
        background: #fff;
        box-shadow: none
    }

    html body.brafa-app .pagination .active .page-link {
        color: #fff !important;
        background: #164e63 !important;
        border-color: #164e63 !important
    }

    html body.brafa-app .pagination .disabled .page-link {
        color: #61758a;
        background: #fff
    }

    html body.brafa-app :is(.nav-pills, .nav-tabs) {
        gap: 7px;
        flex-wrap: wrap;
        background: #fff !important;
        box-shadow: none !important
    }

    html body.brafa-app :is(.nav-pills, .nav-tabs) .nav-link {
        color: #626262 !important;
        border-radius: 8px;
        box-shadow: none !important;
        font-size: 13px;
        text-transform: none;
        padding: 10px 14px
    }

    html body.brafa-app :is(.nav-pills, .nav-tabs) .nav-link.active {
        color: #fff !important;
        background: #164e63 !important
    }

    html body.brafa-app :is(.nav-pills, .nav-tabs) .nav-link i {
        color: inherit !important
    }

    html body.brafa-app .moving-tab {
        display: none !important
    }

    html body.brafa-app .badge {
        padding: 5px 9px;
        font-size: 11px;
        font-weight: 500;
        border-radius: 6px;
        letter-spacing: 0;
        text-transform: none
    }

    html body.brafa-app .badge:is(.bg-primary, .bg-secondary, .bg-info, .bg-dark, .bg-gradient-primary, .bg-gradient-dark) {
        background: #f6f6f6 !important;
        color: #334e68 !important;
        border: 1px solid #e7e7e7
    }

    html body.brafa-app .badge .text-white {
        color: inherit !important
    }

    html body.brafa-app :is(.alert, .status-banner) {
        border-radius: 10px;
        padding: 13px 16px;
        font-size: 13px;
        line-height: 1.55;
        box-shadow: none !important;
        background-image: none !important
    }

    html body.brafa-app :is(.alert-success, .status-banner--success) {
        background: #f6faf6 !important;
        border: 1px solid #dce8dc !important;
        color: #28552c !important
    }

    html body.brafa-app :is(.alert-danger, .status-banner--danger) {
        background: #fff7f7 !important;
        border: 1px solid #f0d7d7 !important;
        color: #8e2525 !important
    }

    html body.brafa-app .alert-warning {
        background: #fffaf2 !important;
        border: 1px solid #eee2ce !important;
        color: #77571d !important
    }

    html body.brafa-app .alert-info {
        background: #f3f7fa !important;
        border: 1px solid #e0e0e0 !important;
        color: #444 !important
    }

    html body.brafa-app .alert :is(.text-white, .text-light) {
        color: inherit !important
    }

    html body:is(.brafa-app, .brafa-guest) .text-primary {
        color: #164e63 !important
    }

    html body.brafa-app .spread {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap
    }

    html body.brafa-app .hstack {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex-wrap: wrap
    }

    html body.brafa-app .vstack {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0
    }

    html body.brafa-app :is(.subtle, .muted) {
        color: #526579
    }

    html body.brafa-app .eyebrow {
        font-size: 11px;
        color: #526579;
        letter-spacing: .08em;
        font-weight: 600;
        text-transform: uppercase
    }

    html body.brafa-app .card--pad-lg {
        padding: 24px
    }

    html body.brafa-app :is(.divider, hr) {
        height: 1px;
        background: #e8e8e8;
        border: 0;
        opacity: 1
    }

    html body.brafa-app .brafa-kv-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px
    }

    html body.brafa-app .brafa-kv-grid>div {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 14px
    }

    html body.brafa-app .brafa-kv-grid dt {
        font-size: 12px;
        color: #526579;
        font-weight: 500
    }

    html body.brafa-app .footer {
        padding: 20px clamp(16px, 2.4vw, 40px) !important;
        border-top: 1px solid #e5edf3;
        margin-top: 16px;
        font-size: 12px;
        color: #526579
    }

    html body.brafa-app .footer .container-fluid {
        padding: 0 !important
    }

    html body.brafa-app .footer a {
        color: #526579;
        font-size: 12px
    }

    html body.brafa-app img,
    html body.brafa-app video,
    html body.brafa-app canvas {
        max-width: 100%
    }

    html body.brafa-app pre {
        max-width: 100%;
        overflow: auto;
        background: #f3f7fa;
        color: #334e68;
        padding: 16px;
        border: 1px solid #dce5ed;
        border-radius: 10px
    }

    html body:is(.brafa-app, .brafa-guest) :focus-visible {
        outline: 2px solid #164e63 !important;
        outline-offset: 3px
    }

    html body.brafa-guest .page-header-bg-sign-in,
    html body.brafa-guest .page-header-bg-sign-up {
        background: #fff !important;
        background-image: none !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100dvh - 95px) !important
    }

    html body.brafa-guest .page-header>.mask {
        display: none
    }

    html body.brafa-guest .brafa-auth-page {
        margin: 0 auto !important;
        padding: 30px 16px;
        width: 100%;
        max-width: 1100px
    }

    html body.brafa-guest .signin-margin {
        margin: 0
    }

    html body.brafa-guest .card-header img {
        max-height: 54px;
        width: auto;
        max-width: 150px
    }

    html body.brafa-guest .card-header .social-icons {
        color: #164e63 !important
    }

    html body.brafa-guest .navbar {
        margin: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e5edf3;
        padding: 14px 24px !important;
        position: relative !important
    }

    html body.brafa-guest .navbar :is(.text-white, .text-light) {
        color: #334e68 !important
    }

    html body.brafa-guest .footer :is(.text-white, .text-light) {
        color: #526579 !important
    }

    html body.brafa-app .swal2-popup,
    html body.brafa-guest .swal2-popup {
        background: #fff !important;
        color: #334e68 !important;
        border: 1px solid #dce5ed;
        border-radius: 16px !important;
        box-shadow: 0 24px 90px #00000020 !important
    }

    html body:is(.brafa-app, .brafa-guest) .swal2-title {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: #164e63 !important
    }

    html body:is(.brafa-app, .brafa-guest) .swal2-html-container {
        font-size: 14px !important;
        color: #626262 !important
    }

    html body:is(.brafa-app, .brafa-guest) .swal2-styled.swal2-confirm {
        background: #164e63 !important;
        border: 1px solid #164e63 !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        box-shadow: none !important
    }

    html body:is(.brafa-app, .brafa-guest) .swal2-styled.swal2-cancel {
        background: #fff !important;
        color: #164e63 !important;
        border: 1px solid #164e63 !important;
        border-radius: 8px !important;
        font-size: 13px !important
    }

    html body.brafa-app :is(.permission-button, .permission-action-toggle, .permission-module-toggle) {
        accent-color: #164e63
    }

    html body.brafa-app .permission-dialog {
        background: #fff !important;
        border: 1px solid #ddd;
        border-radius: 16px;
        box-shadow: 0 24px 90px #00000025
    }

    html body.brafa-app .permission-search-wrap input {
        border: 0 !important;
        box-shadow: none !important;
        min-height: 42px;
        padding: 8px !important
    }

    @media(max-width:1199px) {
        html body.brafa-app .brafa-kv-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media(max-width:991px) {
        html body.brafa-app .brafa-header {
            gap: 18px
        }

        html body.brafa-app .brafa-workspace :is(.input-row, .form-grid) {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important
        }

        html body.brafa-app .card-header,
        html body.brafa-app .card-body {
            padding: 20px
        }

        html body.brafa-app .spread {
            align-items: flex-start
        }

        html body.brafa-app .brafa-screen .brafa-dash-row {
            grid-template-columns: 1fr
        }
    }

    @media(max-width:767px) {
        html body.brafa-app .brafa-workspace :is(.input-row, .form-grid, .brafa-kv-grid) {
            grid-template-columns: 1fr !important
        }

        html body.brafa-app .card--pad-lg {
            padding: 18px
        }

        html body.brafa-app .card .card-body.px-5 {
            padding-left: 18px !important;
            padding-right: 18px !important
        }

        html body.brafa-app .modal-body {
            padding: 18px
        }

        html body.brafa-app .modal-header,
        html body.brafa-app .modal-footer {
            padding: 16px 18px
        }

        html body.brafa-app .modal-content {
            max-height: calc(100dvh - 32px)
        }

        html body.brafa-app .brafa-profile summary span {
            display: none
        }

        html body.brafa-app .card-fixed-height {
            height: auto !important;
            min-height: 240px
        }
    }

    @media(max-width:575px) {
        html body.brafa-app .brafa-header {
            padding: 10px 16px;
            gap: 12px;
            min-height: 68px
        }

        .brafa-brand img {
            width: 90px;
            height: 36px
        }

        .brafa-account {
            gap: 12px
        }

        .brafa-navigation {
            order: 3;
            width: 100%;
            border-top: 1px solid #efefef;
            padding-top: 9px
        }

        .brafa-navigation a {
            flex: 1;
            justify-content: center;
            padding: 8px
        }

        .brafa-profile summary {
            padding: 0
        }

        html body.brafa-app .brafa-workspace>.container-fluid,
        html body.brafa-app .brafa-workspace>div>.container-fluid,
        html body.brafa-app .brafa-screen {
            padding: 20px 16px
        }

        html body.brafa-app .card-header,
        html body.brafa-app .card-body {
            padding: 18px
        }

        html body.brafa-app .modal-dialog:not(.custom-wizard-modal) {
            margin-top: 16px
        }

        .brafa-account .dropdown-menu {
            position: fixed !important;
            top: 68px !important;
            right: 16px !important;
            transform: none !important;
            left: auto !important
        }

        html body.brafa-app .form-actions {
            justify-content: stretch
        }

        html body.brafa-app .form-actions>.btn {
            flex: 1
        }

        .brafa-profile-panel {
            top: calc(100% + 20px)
        }
    }

    @media(prefers-reduced-motion:reduce) {
        html body.brafa-app * {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            transition-duration: .01ms !important
        }
    }
}

@media screen {
    .brafa-compact-menu {
        padding: 22px clamp(16px, 2.4vw, 40px) 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-height: calc(100dvh - 176px)
    }

    .brafa-compact-menu .menu-intro {
        margin: 0;
        flex-shrink: 0
    }

    .brafa-compact-menu .menu-intro h1 {
        font-size: 24px;
        margin: 0 0 4px;
        letter-spacing: -.025em
    }

    .brafa-compact-menu .menu-intro p {
        font-size: 13px
    }

    .menu-category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
        flex-shrink: 0
    }

    .menu-category {
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 9px;
        min-width: 0;
        min-height: 88px;
        padding: 14px 10px;
        border: 1px solid #dce5ed;
        border-radius: 12px;
        background: #fff;
        color: #626262;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        text-align: center;
        cursor: pointer;
        transition: background-color .15s, border-color .15s, box-shadow .15s
    }

    .menu-category>.material-icons {
        font-size: 24px;
        color: inherit
    }

    .menu-category:hover {
        background: #edf5f8;
        border-color: #b6b6b6
    }

    .menu-category[aria-selected="true"] {
        color: #fff;
        background: #164e63;
        border-color: #164e63;
        box-shadow: 0 3px 9px #15151516
    }

    .menu-detail-area {
        min-height: 0;
        overflow: visible;
        flex: 1;
        border: 1px solid #dce5ed;
        border-radius: 14px;
        background: #fff;
        scrollbar-gutter: stable
    }

    .menu-detail-panel {
        padding: 20px;
        min-width: 0
    }

    .menu-detail-panel[hidden] {
        display: none !important
    }

    .menu-detail-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 0 15px;
        margin-bottom: 16px;
        border-bottom: 1px solid #edf5f8;
        font-size: 14px;
        font-weight: 650;
        color: #164e63
    }

    .menu-detail-heading small {
        font-size: 12px;
        font-weight: 400;
        color: #526579
    }

    .menu-subitem-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
        gap: 10px;
        align-items: stretch
    }

    .menu-subitem {
        min-height: 68px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid #dce5ed;
        border-radius: 10px;
        color: #334e68;
        background: #fff;
        transition: background-color .15s, border-color .15s;
        min-width: 0
    }

    .menu-subitem:hover {
        color: #164e63;
        background: #f3f7fa;
        border-color: #61758a
    }

    .menu-subitem>.material-icons:first-child {
        font-size: 21px;
        color: #666;
        flex-shrink: 0
    }

    .menu-subitem>span {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow-wrap: anywhere
    }

    .menu-subitem strong {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4
    }

    .menu-subitem small {
        font-size: 11px;
        line-height: 1.4;
        color: #526579;
        margin-top: 3px
    }

    .menu-subitem .menu-subitem-arrow {
        font-size: 16px;
        margin-left: auto;
        color: #61758a;
        flex-shrink: 0
    }

    .menu-empty {
        font-size: 14px;
        color: #526579;
        margin: 0
    }

    @media(min-width:1600px) {
        .menu-category-grid {
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
        }
    }

    @media(max-width:767px) {
        .brafa-compact-menu {
            height: auto;
            min-height: calc(100dvh - 200px);
            gap: 16px
        }

        .menu-category-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px
        }

        .menu-category {
            min-height: 78px;
            padding: 10px 7px;
            font-size: 12px;
            gap: 7px
        }

        .menu-category>.material-icons {
            font-size: 22px
        }

        .menu-detail-area {
            overflow: visible
        }

        .menu-detail-panel {
            padding: 16px
        }

        .menu-subitem-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .menu-subitem {
            padding: 12px 10px;
            gap: 8px
        }

        .menu-subitem .menu-subitem-arrow {
            display: none
        }
    }

    @media(max-width:359px) {
        .menu-category {
            font-size: 11px
        }

        .menu-subitem-grid {
            grid-template-columns: 1fr
        }
    }

    @media(prefers-reduced-motion:reduce) {

        .menu-category,
        .menu-subitem {
            transition: none
        }
    }
}

@media screen {
    html body.brafa-app :is(.user-card, .staff-card, .property-card, .dashboard-card, .summary-card, .kpi-card, .mini-stat-card, .rooms-card, .booking-card, .device-card) {
        border: 1px solid #dce5ed !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: #164e63;
        box-shadow: 0 3px 14px #00000004 !important
    }

    html body.brafa-app :is(.user-card-header, .staff-page-header, .profile-page-header, .parking-page-header, .dashboard-welcome, .workspace-hero, .workspace-header, .property-hero, .rooms-hero, .records-hero, .page-hero) {
        background: #fff !important;
        background-image: none !important;
        border: 1px solid #dce5ed !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        padding: 22px 24px !important;
        color: #164e63 !important
    }

    html body.brafa-app :is(.staff-page-shell, .user-page-shell, .profile-shell, .parking-shell, .notes-shell, .ajax-shell) {
        max-width: none !important
    }

    html body.brafa-app :is(.users-premium-page, .staff-saas-page, .profile-saas-page, .parking-saas-page, .ajax-saas-page, .property-details-page, .port-map-dashboard) {
        --accent: #164e63;
        --accent-soft: #f3f7fa;
        --accent-2: #334e68;
        --saas-blue: #164e63;
        --saas-blue-dark: #334e68;
        --saas-navy: #164e63;
        --saas-ink: #164e63;
        --saas-muted: #526579;
        --saas-subtle: #61758a;
        --saas-line: #dce5ed;
        --saas-soft: #f3f7fa;
        --profile-ink: #164e63;
        --profile-text: #334e68;
        --profile-muted: #526579;
        --profile-border: #dce5ed;
        --profile-soft: #fff;
        --parking-soft: #fff;
        --bg-1: #fff;
        --bg-2: #fff;
        --bg-main: #fff;
        background: #fff !important
    }

    html body.brafa-app .users-premium-page:before {
        display: none
    }

    html body.brafa-app :is(.staff-saas-page, .profile-saas-page, .parking-saas-page, .port-map-dashboard) {
        min-height: 0 !important
    }

    html body.brafa-app .port-map-dashboard {
        padding: 28px clamp(16px, 2.4vw, 40px)
    }

    html body.brafa-app :is(.header-icon, .dashboard-heading-icon) {
        background: #fff !important;
        border: 1px solid #dce5ed;
        border-radius: 12px !important;
        color: #164e63 !important
    }

    html body.brafa-app .header-icon i {
        color: #164e63 !important
    }

    html body.brafa-app :is(.dashboard-welcome, .workspace-hero, .property-hero, .rooms-hero, .records-hero) :is(.text-white, .text-light) {
        color: #334e68 !important
    }

    html body.brafa-app :is(.filter-bar, .filters-bar, .filter-card, .user-search-wrap, .staff-filters, .search-toolbar, .filters-panel) {
        background: #fff !important;
        background-image: none !important;
        border-color: #dce5ed !important;
        box-shadow: none !important;
        border-radius: 12px !important;
        min-width: 0
    }

    html body.brafa-app :is(.btn-neo, .staff-primary-btn, .profile-primary-btn, .parking-primary-btn, .ajax-btn-primary, .permission-button-primary) {
        background: #164e63 !important;
        background-image: none !important;
        color: #fff !important;
        border-color: #164e63 !important;
        box-shadow: none !important
    }

    html body.brafa-app :is(.btn-neo, .staff-primary-btn, .profile-primary-btn, .parking-primary-btn, .ajax-btn-primary, .permission-button-primary) * {
        color: inherit !important
    }

    html body.brafa-app .card .icon-circle {
        background: #fff !important;
        color: #164e63 !important;
        border: 1px solid #dce5ed
    }

    html body.brafa-app .card .icon-circle .material-icons {
        color: #164e63 !important
    }

    html body.brafa-app .brafa-screen .btn--solid {
        background: #164e63 !important;
        border: 1px solid #164e63 !important;
        color: #fff !important
    }

    html body.brafa-app .brafa-screen .btn--solid * {
        color: inherit !important
    }

    html body.brafa-app :is(.pill, .status-pill) {
        border: 1px solid #dce5ed;
        border-radius: 6px;
        background: #fff;
        color: #555;
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px
    }

    html body.brafa-app .brafa-screen .table td .mono {
        font-size: 12px
    }

    html body.brafa-app .brafa-screen .status-banner {
        margin-bottom: 16px
    }

    html body.brafa-app :is(.progress-bar, .progress-bar.bg-gradient-primary) {
        background: #164e63 !important;
        background-image: none !important
    }

    html body.brafa-guest .login-social-icon {
        color: #164e63 !important;
        border-color: #dce5ed !important;
        background: #fff !important;
        box-shadow: none !important
    }

    html body.brafa-guest .login-social-icon svg {
        fill: #164e63 !important
    }

    html body.brafa-app :is(.qty, .input-counter) input {
        width: 64px !important;
        text-align: center
    }

    @media(max-width:991px) {
        html body.brafa-app :is(.staff-page-header, .profile-page-header, .parking-page-header, .dashboard-welcome, .workspace-hero, .workspace-header, .property-hero) {
            flex-wrap: wrap;
            gap: 16px
        }
    }

    @media(max-width:767px) {
        html body.brafa-app :is(.staff-page-header, .profile-page-header, .parking-page-header, .dashboard-welcome, .workspace-hero, .workspace-header, .property-hero) {
            padding: 18px !important
        }

        html body.brafa-app .port-map-dashboard {
            padding: 20px 16px
        }

        html body.brafa-app :is(.user-card-header, .staff-page-header, .filter-bar, .filters-bar, .staff-filters) {
            flex-wrap: wrap;
            gap: 12px
        }

        html body.brafa-app .brafa-workspace form :is(.form-grid, .input-row)[style*="grid-template-columns"] {
            grid-template-columns: 1fr !important
        }
    }
}

@media screen {
    html body.brafa-prearrival :is(.bar, .card, .code-card, .row, details) {
        background: #fff !important;
        border: 1px solid #e6e6e6 !important;
        box-shadow: none !important;
        color: #164e63 !important
    }

    html body.brafa-prearrival :is(.lang a, .muted, .k, label.f, details .body, summary:after, .dots) {
        color: #526579 !important
    }

    html body.brafa-prearrival :is(.hdr, .code-card .t, .upsell .price, .lang a.on) {
        color: #164e63 !important
    }

    html body.brafa-prearrival :is(.logo, .pill, button.save) {
        background: #164e63 !important;
        color: #fff !important;
        border-radius: 9px !important
    }

    html body.brafa-prearrival a.btn {
        color: #164e63 !important;
        border: 1px solid #164e63 !important;
        background: #fff !important
    }

    html body.brafa-prearrival .ok {
        background: #f6faf6;
        color: #28552c;
        border-color: #dce8dc
    }

    html body.brafa-prearrival .err {
        background: #fff7f7;
        color: #8e2525;
        border-color: #f0d7d7
    }

    html body.brafa-prearrival .btns {
        flex-wrap: wrap
    }

    html body.brafa-service .bar {
        background: #fff !important;
        border-top: 1px solid #e6e6e6
    }

    html body.brafa-service .bar button {
        background: #164e63 !important;
        color: #fff !important;
        border-radius: 10px !important
    }

    html body.brafa-service .item {
        border-color: #dce5ed;
        background: #fff
    }

    html body.brafa-service .item .price {
        color: #164e63
    }

    html body.brafa-service .qty input {
        width: 44px !important;
        min-height: 38px;
        padding: 6px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important
    }

    html body.brafa-service textarea {
        min-height: 80px
    }

    html body.brafa-service .bar form {
        align-items: end
    }

    html body.brafa-service .msg.guest {
        background: #f9f9f9;
        border: 1px solid #dce5ed;
        color: #164e63
    }

    html body.brafa-service .msg.hotel {
        background: #fff;
        border: 1px solid #dce5ed;
        color: #164e63
    }
}

@media screen {
    html body.brafa-app .ml-0 {
        margin-inline-start: 0 !important
    }

    html body.brafa-app .ml-1 {
        margin-inline-start: .25rem !important
    }

    html body.brafa-app .ml-2 {
        margin-inline-start: .5rem !important
    }

    html body.brafa-app .ml-3 {
        margin-inline-start: 1rem !important
    }

    html body.brafa-app .ml-4 {
        margin-inline-start: 1.5rem !important
    }

    html body.brafa-app .ml-5 {
        margin-inline-start: 3rem !important
    }

    html body.brafa-app .mr-0 {
        margin-inline-end: 0 !important
    }

    html body.brafa-app .mr-1 {
        margin-inline-end: .25rem !important
    }

    html body.brafa-app .mr-2 {
        margin-inline-end: .5rem !important
    }

    html body.brafa-app .mr-3 {
        margin-inline-end: 1rem !important
    }

    html body.brafa-app .mr-4 {
        margin-inline-end: 1.5rem !important
    }

    html body.brafa-app .mr-5 {
        margin-inline-end: 3rem !important
    }

    html body.brafa-app .pl-0 {
        padding-inline-start: 0 !important
    }

    html body.brafa-app .pl-1 {
        padding-inline-start: .25rem !important
    }

    html body.brafa-app .pl-2 {
        padding-inline-start: .5rem !important
    }

    html body.brafa-app .pl-3 {
        padding-inline-start: 1rem !important
    }

    html body.brafa-app .pl-4 {
        padding-inline-start: 1.5rem !important
    }

    html body.brafa-app .pl-5 {
        padding-inline-start: 3rem !important
    }

    html body.brafa-app .pr-0 {
        padding-inline-end: 0 !important
    }

    html body.brafa-app .pr-1 {
        padding-inline-end: .25rem !important
    }

    html body.brafa-app .pr-2 {
        padding-inline-end: .5rem !important
    }

    html body.brafa-app .pr-3 {
        padding-inline-end: 1rem !important
    }

    html body.brafa-app .pr-4 {
        padding-inline-end: 1.5rem !important
    }

    html body.brafa-app .pr-5 {
        padding-inline-end: 3rem !important
    }

    html body.brafa-app .ml-auto {
        margin-inline-start: auto !important
    }

    html body.brafa-app .mr-auto {
        margin-inline-end: auto !important
    }

    html body.brafa-app .text-left {
        text-align: left !important
    }

    html body.brafa-app .text-right {
        text-align: right !important
    }

    html body.brafa-app .font-weight-bold {
        font-weight: 600 !important
    }

    html body.brafa-app .font-weight-normal {
        font-weight: 400 !important
    }

    html body.brafa-app .form-row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -8px;
        margin-right: -8px
    }

    html body.brafa-app .form-row>[class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
        min-width: 0
    }

    @media(min-width:768px) {
        html body.brafa-app .ml-md-3 {
            margin-inline-start: 1rem !important
        }

        html body.brafa-app .text-md-left {
            text-align: left !important
        }
    }

    @media(min-width:992px) {
        html body.brafa-app .text-lg-right {
            text-align: right !important
        }
    }
}

@media screen {
    html body.brafa-app .property-picker-modal {
        max-height: calc(100dvh - 32px);
        overflow-y: auto !important;
        background: #fff !important;
        color: #164e63 !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 16px !important;
        box-shadow: 0 24px 90px #00000025 !important
    }

    html body.brafa-app .booking-modal-card {
        background: #fff !important;
        border-color: #e0e0e0;
        border-radius: 16px !important;
        box-shadow: 0 24px 90px #00000025 !important
    }

    html body.brafa-app .booking-modal-body {
        min-height: 0;
        overflow: auto
    }

    html body.brafa-app .brafa-account>.nav-item>.nav-link {
        color: #555 !important
    }
}

@media screen {
    :root {
        --ui-primary: #164e63;
        --ui-primary-hover: #0e3a4c;
        --ui-success: #166534;
        --ui-danger: #b42338;
        --ui-warning: #825212;
        --ui-info: #075985;
        --ui-focus: #0e7490;
        --ui-space: clamp(16px, 2.4vw, 40px);
        --ui-shadow-raised: 0 12px 32px #17365212;
        --bs-primary: #164e63;
        --bs-body-font-family: "Segoe UI", sans-serif
    }

    html body.brafa-app .main-content {
        background: var(--bg)
    }

    html body.brafa-app .brafa-header {
        border-bottom-color: var(--border);
        box-shadow: 0 2px 10px #17365206;
        gap: 24px
    }

    .brafa-navigation a:hover {
        color: var(--ui-primary);
        background: #edf5f8
    }

    .brafa-navigation a.is-active {
        background: #e7f2f6;
        color: var(--ui-primary);
        box-shadow: inset 0 -2px var(--ui-primary)
    }

    .brafa-compact-menu .menu-intro h1 {
        font-size: clamp(24px, 2.3vw, 32px);
        font-weight: 700
    }

    .brafa-compact-menu .menu-intro p {
        color: var(--ui-muted);
        font-size: 14px;
        margin: 6px 0 0
    }

    .menu-category {
        position: relative;
        min-height: 96px;
        border-color: var(--border);
        border-radius: 12px;
        box-shadow: var(--ui-shadow);
        color: #334e68;
        overflow-wrap: anywhere
    }

    .menu-category>.material-icons {
        background: #edf5f8;
        border-radius: 10px;
        padding: 8px;
        font-size: 22px
    }

    .menu-category[aria-selected="true"] {
        background: var(--ui-primary);
        color: #fff;
        border-color: var(--ui-primary);
        box-shadow: 0 6px 16px #164e6324
    }

    .menu-category[aria-selected="true"]>.material-icons {
        background: #ffffff1f
    }

    .menu-category:hover {
        border-color: #8aafbe;
        box-shadow: var(--ui-shadow-raised)
    }

    .menu-detail-area {
        box-shadow: var(--ui-shadow);
        border-color: var(--border)
    }

    .menu-detail-panel {
        padding: 24px
    }

    .menu-detail-heading {
        font-size: 16px;
        border-bottom-color: var(--border)
    }

    .menu-subitem {
        min-height: 80px;
        border-color: var(--border);
        border-radius: 10px
    }

    .menu-subitem:hover {
        background: #edf5f8;
        border-color: #8aafbe;
        color: var(--ui-primary)
    }

    .menu-subitem>.material-icons:first-child {
        color: var(--ui-primary);
        padding: 8px;
        background: #edf5f8;
        border-radius: 9px
    }

    html body:is(.brafa-app, .brafa-guest) .btn {
        max-width: 100%;
        min-height: 42px;
        overflow-wrap: anywhere;
        flex-shrink: 0
    }

    html body:is(.brafa-app, .brafa-guest) .btn:active {
        transform: translateY(1px)
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is(.btn-primary, .btn-dark, .btn--solid):hover {
        background: var(--ui-primary-hover) !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is(.btn-secondary, .btn.bg-gradient-secondary) {
        background: #475569 !important;
        border-color: #475569 !important;
        color: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is(.btn-success, .bg-gradient-success) {
        background: var(--ui-success) !important;
        border-color: var(--ui-success) !important;
        color: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is(.btn-danger, .bg-gradient-danger) {
        background: var(--ui-danger) !important;
        border-color: var(--ui-danger) !important;
        color: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is(.btn-warning, .bg-gradient-warning) {
        background: #fef3c7 !important;
        border-color: #e4ba56 !important;
        color: #713f12 !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is(.btn-info, .bg-gradient-info) {
        background: var(--ui-info) !important;
        border-color: var(--ui-info) !important;
        color: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn.btn-outline-danger {
        color: var(--ui-danger) !important;
        border-color: #d99ca6 !important;
        background: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn.btn-outline-success {
        color: var(--ui-success) !important;
        border-color: #91ba9d !important;
        background: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn.btn-outline-info {
        color: var(--ui-info) !important;
        border-color: #93b7ce !important;
        background: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn.btn-outline-warning {
        color: var(--ui-warning) !important;
        border-color: #d9bc78 !important;
        background: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn.btn-outline-white {
        color: var(--ui-primary) !important;
        border-color: #b8c8d6 !important;
        background: #fff !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn:is([class*="btn-outline"], .btn-light, .btn-white):hover {
        background: #edf5f8 !important
    }

    html body:is(.brafa-app, .brafa-guest) .btn :is(span, i, svg) {
        color: inherit !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(.btn-sm, .btn--sm) {
        min-height: 36px
    }

    html body.brafa-app :is(.page-actions, .header-actions, .action-buttons, .actions, .toolbar, .filter-toolbar, .staff-actions, .modal-footer, .spread) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        min-width: 0
    }

    html body.brafa-app .d-flex:has(>.btn) {
        flex-wrap: wrap;
        gap: 10px
    }

    html body.brafa-app .btn-group {
        flex-wrap: wrap;
        gap: 4px
    }

    html body.brafa-app td>.btn {
        margin: 3px 4px 3px 0
    }

    html body.brafa-app td>.d-flex {
        flex-wrap: wrap;
        gap: 8px
    }

    html body.brafa-app .table-responsive.mx-3 {
        width: calc(100% - 2rem)
    }

    html body.brafa-app :is(.card-body, .modal-body, .table-wrap, .table-wrapper) {
        min-width: 0;
        max-width: 100%
    }

    html body.brafa-app :is(.card-body, .modal-body):has(>table) {
        overflow-x: auto
    }

    html body.brafa-app :is(table, .table) th {
        background: #edf3f7 !important;
        color: #475569 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap
    }

    html body.brafa-app :is(table, .table) td {
        border-bottom: 1px solid #e5edf3
    }

    html body.brafa-app table tbody tr:hover {
        background: #f3f8fb
    }

    html body.brafa-app :is(.badge, .pill, .status-pill) {
        line-height: 1.45;
        white-space: normal;
        vertical-align: middle;
        font-weight: 600;
        border-radius: 6px;
        padding: 5px 9px
    }

    html body.brafa-app :is(.badge, .pill, .status-pill):is(.bg-success, .bg-gradient-success, .badge-success, .pill--success, .is-active) {
        background: #eaf7ee !important;
        color: #166534 !important;
        border-color: #bedfc8
    }

    html body.brafa-app :is(.badge, .pill, .status-pill):is(.bg-danger, .bg-gradient-danger, .badge-danger, .pill--danger) {
        background: #fff0f2 !important;
        color: #a61930 !important;
        border-color: #f0c6ce
    }

    html body.brafa-app :is(.badge, .pill, .status-pill):is(.bg-warning, .bg-gradient-warning, .badge-warning, .pill--warning) {
        background: #fff5d6 !important;
        color: #825212 !important;
        border-color: #e8d598
    }

    html body.brafa-app :is(.badge, .pill, .status-pill):is(.bg-info, .bg-gradient-info, .badge-info) {
        background: #eaf4fc !important;
        color: #075985 !important;
        border-color: #c0daed
    }

    html body.brafa-app .alert {
        border: 1px solid var(--border);
        border-radius: 10px;
        line-height: 1.55;
        overflow-wrap: anywhere
    }

    html body.brafa-app .alert:is(.alert-success, .alert-success.text-white) {
        background: #eaf7ee !important;
        color: #166534 !important;
        border-color: #bedfc8
    }

    html body.brafa-app .alert:is(.alert-danger, .alert-danger.text-white) {
        background: #fff0f2 !important;
        color: #a61930 !important;
        border-color: #f0c6ce
    }

    html body.brafa-app .alert:is(.alert-warning, .alert-warning.text-white) {
        background: #fff5d6 !important;
        color: #825212 !important;
        border-color: #e8d598
    }

    html body.brafa-app .alert:is(.alert-info, .alert-info.text-white) {
        background: #eaf4fc !important;
        color: #075985 !important;
        border-color: #c0daed
    }

    html body.brafa-app .alert :is(a, strong, span) {
        color: inherit !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(select, .form-select) {
        padding-inline-end: 36px !important;
        background-position: right 12px center;
        appearance: auto
    }

    html body:is(.brafa-app, .brafa-guest) :is(input, select, textarea):focus {
        border-color: var(--ui-focus) !important;
        box-shadow: 0 0 0 3px #0e749018 !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(input, select, textarea):disabled {
        color: #526579 !important;
        background: #f3f7fa !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(input, select, textarea)[readonly] {
        background: #f3f7fa !important;
        color: #475569 !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(.input-group-dynamic, .input-group-static) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px
    }

    html body:is(.brafa-app, .brafa-guest) :is(.input-group-dynamic, .input-group-static)>.form-label {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        color: #334e68 !important
    }

    html body:is(.brafa-app, .brafa-guest) :is(.input-group-dynamic, .input-group-static)>.form-control {
        width: 100% !important
    }

    html body:is(.brafa-app, .brafa-guest) option {
        background: #fff;
        color: #172b42
    }

    html body.brafa-app .dropdown-menu {
        max-width: calc(100vw - 24px);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: var(--ui-shadow-raised);
        padding: 8px;
        background: #fff;
        color: #172b42
    }

    html body.brafa-app .dropdown-item {
        white-space: normal;
        overflow-wrap: anywhere;
        border-radius: 6px;
        padding: 9px 12px;
        color: #334e68
    }

    html body.brafa-app .dropdown-item:is(:hover, :focus) {
        background: #edf5f8;
        color: var(--ui-primary)
    }

    html body.brafa-app .dropdown-item.active {
        background: var(--ui-primary);
        color: #fff
    }

    html body.brafa-app .stat-card .icon-circle {
        background: #edf5f8 !important;
        border-color: #d5e8ef;
        color: var(--ui-primary) !important
    }

    html body.brafa-app .stat-card h2 {
        font-variant-numeric: tabular-nums;
        font-size: 32px !important;
        color: #172b42 !important
    }

    html body.brafa-app .stat-card h6 {
        color: #526579 !important;
        font-size: 13px !important
    }

    html body.brafa-app :is(.dashboard-welcome, .workspace-hero, .workspace-header, .property-hero, .rooms-hero, .records-hero, .page-hero) {
        border-left: 3px solid var(--ui-primary) !important
    }

    html body.brafa-app :is(.card-header, .modal-header) :is(h4, h5, h6) {
        margin-bottom: 0
    }

    html body.brafa-app .modal-content {
        box-shadow: 0 24px 90px #172b4230 !important
    }

    html body.brafa-app .modal-header {
        background: #f3f7fa !important
    }

    html body.brafa-app .modal-header .btn-close {
        filter: none;
        opacity: .75;
        flex-shrink: 0
    }

    html body.brafa-app .modal-content :is(.btn-success, .btn-danger, .btn-info) :is(.text-white, .text-light) {
        color: inherit !important
    }

    html body.brafa-app .pagination .disabled .page-link {
        color: #61758a;
        background: #f3f7fa
    }

    html body.brafa-app .pagination .page-link {
        min-height: 38px;
        min-width: 38px
    }

    html body.brafa-app :is(.nav-pills, .nav-tabs) .nav-link.active {
        background: #164e63 !important
    }

    html body:is(.brafa-app, .brafa-guest) :focus-visible {
        outline-color: var(--ui-focus) !important
    }

    html body.brafa-guest .page-header-bg-sign-in,
    html body.brafa-guest .page-header-bg-sign-up {
        background: radial-gradient(ellipse at top, #e5f1f6, transparent 65%), #f3f7fa !important
    }

    html body.brafa-guest .brafa-auth-page .card {
        box-shadow: 0 16px 50px #17365214 !important
    }

    html body.brafa-guest .brafa-auth-page .card-header {
        padding-top: 28px
    }

    html body.brafa-guest .brafa-auth-page .card-header img {
        filter: brightness(0);
        opacity: .88
    }

    html body.brafa-guest .footer :is(a, p, .text-white) {
        color: #526579 !important
    }

    html body.brafa-app .brafa-brand img {
        filter: brightness(0);
        opacity: .88
    }

    html body:is(.brafa-prearrival, .brafa-service) {
        background: #f3f7fa !important;
        color: #172b42;
        font-family: "Segoe UI", sans-serif
    }

    html body:is(.brafa-prearrival, .brafa-service) :is(button, input, textarea, select) {
        font-family: inherit
    }

    html body.brafa-prearrival :is(.logo, .pill, button.save),
    html body.brafa-service .bar button {
        background: #164e63 !important
    }

    html body.brafa-service .msg.hotel {
        background: #edf5f8;
        color: #164e63
    }

    html body.brafa-service .bar form {
        flex-wrap: wrap;
        gap: 10px
    }

    @media(max-width:991px) {
        html body.brafa-app .d-flex.justify-content-between {
            flex-wrap: wrap;
            gap: 12px
        }

        html body.brafa-app :is(.page-header, .workspace-header) {
            flex-wrap: wrap;
            gap: 16px
        }
    }

    @media(max-width:767px) {
        .menu-detail-panel {
            padding: 16px
        }

        .menu-category {
            min-height: 94px
        }

        .menu-category>.material-icons {
            font-size: 21px;
            padding: 6px
        }

        html body.brafa-app :is(.toolbar, .filter-toolbar, .header-actions) {
            width: 100%
        }

        html body.brafa-app :is(.header-actions, .page-actions)>.btn {
            flex: 1 1 auto
        }

        html body.brafa-app .modal-dialog:not(.modal-fullscreen) {
            max-width: calc(100vw - 24px)
        }

        html body.brafa-app .brafa-workspace .container {
            max-width: 100%
        }

        html body.brafa-app :is(.col, .col-auto):has(>.form-control, >.form-select) {
            max-width: 100%
        }
    }

    @media(max-width:575px) {
        html body.brafa-app :is(.btn, .btn-sm, .btn-icon-only) {
            min-height: 44px
        }

        .menu-category-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .menu-subitem-grid {
            grid-template-columns: 1fr
        }

        .menu-subitem {
            min-height: 68px
        }

        html body.brafa-app .brafa-header {
            position: relative
        }

        .brafa-profile-panel {
            max-width: calc(100vw - 24px)
        }

        html body.brafa-app .card-header.mt-n4 {
            padding: 18px !important
        }

        html body.brafa-app .modal-footer>.btn {
            flex: 1 1 auto
        }

        html body.brafa-app :is(.form-grid, .input-row) {
            grid-template-columns: 1fr !important
        }

        html body.brafa-app .brafa-account {
            gap: 8px
        }
    }
}

@media screen {
    html body.brafa-app :is(.page-wrap, .property-portfolio-shell, .portfolio-toolbar-wrap, .table-shell, .assigned-table-shell, .records-table-shell, .guest-table-shell, .booking-table-shell, .rooms-grid-wrap, .table-panel) {
        min-width: 0;
        max-width: 100%
    }

    html body.brafa-app :is(.table-shell, .assigned-table-shell, .records-table-shell, .guest-table-shell, .booking-table-shell, .table-scroll-fix) {
        overflow-x: auto;
        overscroll-behavior-x: contain
    }

    html body.brafa-app :is(.panel, .integration-card, .wizard-review-card, .security-panel, .network-panel, .edit-panel, .chart-panel, .table-panel, .control-panel, .activity-panel, .guest-records-panel) {
        background: #fff !important;
        color: #172b42;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        box-shadow: var(--ui-shadow) !important;
        min-width: 0
    }

    html body.brafa-app :is(.panel__header, .edit-panel-header, .security-panel-header, .chart-panel-header, .table-panel-header) {
        padding: 18px 22px;
        border-bottom: 1px solid var(--border);
        background: #f3f7fa;
        color: #172b42
    }

    html body.brafa-app :is(.panel__body, .edit-panel-body, .chart-panel-body, .table-panel-body) {
        padding: 22px;
        min-width: 0
    }

    html body.brafa-app :is(.panel__footer, .chart-panel-footer) {
        padding: 16px 22px;
        border-top: 1px solid var(--border)
    }

    html body.brafa-app :is(.unifi-hero, .rooms-property-hero, .locks-hero-card, .lock-page-hero, .property-hero-card, .billing-hero, .panel--hero) {
        background: #fff !important;
        background-image: none !important;
        color: #172b42 !important;
        border: 1px solid var(--border) !important;
        border-left: 3px solid var(--ui-primary) !important;
        border-radius: 12px !important;
        box-shadow: var(--ui-shadow) !important
    }

    html body.brafa-app :is(.unifi-hero, .rooms-property-hero, .locks-hero-card, .lock-page-hero, .property-hero-card, .billing-hero, .panel--hero) :is(.text-white, .text-light, .hero-caption, .property-hero-eyebrow, .property-hero-meta) {
        color: #334e68 !important
    }

    html body.brafa-app :is(.property-toolbar, .directory-toolbar, .locks-toolbar, .records-filters, .records-header-actions, .notes-toolbar, .notes-toolbar-actions, .booking-table-toolbar, .booking-workspace-actions, .booking-modal-actions, .guest-records-toolbar, .guest-filters, .guest-export-actions, .room-card-actions, .assignment-card-actions, .wizard-step-actions, .profile-form-actions, .user-actions, .td-actions, .booking-actions) {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        min-width: 0
    }

    html body.brafa-app .property-toolbar .search-u486 {
        width: min(100%, 450px);
        flex: 1 1 240px;
        min-width: 0
    }

    html body.brafa-app .property-toolbar .search-u486 input {
        width: 100% !important;
        border-color: #b8c8d6 !important
    }

    html body.brafa-app .wizard-step-container {
        max-width: 1120px;
        padding: 24px clamp(0px, 1vw, 16px)
    }

    html body.brafa-app .wizard-step-container.wide {
        max-width: none
    }

    html body.brafa-app .wizard-step-container .row {
        row-gap: 16px
    }

    html body.brafa-app :is(.wizard-next-btn, .wizard-prev-btn) {
        min-height: 44px;
        border-radius: 8px;
        padding: 10px 18px;
        max-width: 100%;
        white-space: normal
    }

    html body.brafa-app .wizard-next-btn {
        background: var(--ui-primary) !important;
        color: #fff !important;
        box-shadow: none !important
    }

    html body.brafa-app :is(.table-search, .guest-filters, .directory-toolbar) :is(input, select) {
        max-width: 100%
    }

    html body.brafa-app :is(.booking-modal-card, .property-picker-modal, .permission-dialog) {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow: auto
    }

    html body.brafa-app :is(.permission-dialog-header, .permission-dialog-footer) {
        flex-wrap: wrap;
        gap: 10px
    }

    html body.brafa-app .property-action-wrapper {
        flex-wrap: wrap;
        gap: 10px
    }

    html body.brafa-app .update-api-button {
        white-space: normal
    }

    html body.brafa-app :is(.status-online, .online) {
        color: #166534
    }

    html body.brafa-app :is(.status-offline, .offline) {
        color: #b42338
    }

    @media(max-width:767px) {
        html body.brafa-app :is(.assignment-edit-grid, .profile-form-grid, .booking-detail-grid, .security-grid, .network-grid, .action-grid) {
            grid-template-columns: 1fr !important
        }

        html body.brafa-app :is(.property-hero-main, .property-hero-identity, .lock-hero__content, .billing-hero-main) {
            flex-wrap: wrap;
            gap: 16px
        }

        html body.brafa-app :is(.records-filter-grid, .property-stats-grid, .stats-premium-grid, .dashboard-stats-grid) {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important
        }

        html body.brafa-app :is(.panel__body, .edit-panel-body, .chart-panel-body, .table-panel-body) {
            padding: 16px
        }

        html body.brafa-app .wizard-step-container {
            padding: 16px 0
        }

        html body.brafa-app .property-toolbar .search-u486 {
            flex-basis: 100%
        }
    }

    @media(max-width:359px) {
        html body.brafa-app :is(.records-filter-grid, .property-stats-grid, .stats-premium-grid, .dashboard-stats-grid) {
            grid-template-columns: 1fr !important
        }
    }

    html body.brafa-public {
        background: #f3f7fa;
        color: #172b42;
        font-family: "Segoe UI", sans-serif
    }

    html body.brafa-public :not(i):not([class*="fa-"]) {
        font-family: "Segoe UI", sans-serif
    }

    html body.brafa-public :is(input, select, textarea) {
        max-width: 100%;
        border-radius: 8px;
        min-height: 44px
    }

    html body.brafa-public :is(.btn, .error-button, .error-btn, .primary-button, .primary-btn) {
        border-radius: 8px;
        min-height: 44px;
        white-space: normal
    }

    html body.brafa-public :is(.error-page, .error-card, .security-panel, .network-panel, .diagnostic-panel) {
        background: #fff;
        border-color: #dce5ed
    }

    html body.brafa-public :is(.error-actions, .hero-buttons) {
        flex-wrap: wrap;
        gap: 12px
    }

    html body.brafa-public .page-header {
        background: #164e63 !important;
        background-image: none !important
    }

    html body.brafa-public .page-header .text-white {
        color: #fff
    }

    html body.brafa-public .page-header .btn-outline-white {
        color: #fff;
        border: 1px solid #fff
    }

    html body.brafa-public :is(.error-label, .error-code, .error-title) {
        color: #164e63
    }

    @media(max-width:575px) {
        html body.brafa-public :is(.error-grid, .hero-layout) {
            grid-template-columns: 1fr
        }

        html body.brafa-public .error-actions>a {
            max-width: 100%
        }
    }
}

@media screen {
    html body.brafa-app .modal-header .close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: #334e68;
        font-size: 24px
    }

    html body.brafa-app .modal-header .close span {
        color: inherit !important
    }

    html body.brafa-app .kiosk-container .kiosk-card :is(input, textarea, select, option) {
        color: #172b42 !important;
        background-color: #fff !important
    }

    html body.brafa-app .kiosk-container .kiosk-card label {
        color: inherit !important
    }

    html body.brafa-app .modal-body-custom form.d-flex.flex-column>.form-group {
        width: 100%;
        max-width: 760px
    }

    html body.brafa-app .modal-body-custom form.d-flex.flex-column>.col-md-6:not(.form-group) {
        width: 100%;
        max-width: 760px
    }

    html body.brafa-app .card .badge :is(.text-white, .text-light) {
        color: inherit !important
    }

    html body.brafa-app .progress {
        background: #e5edf3
    }

    html body.brafa-app .progress-bar.bg-success {
        background: #166534 !important
    }

    html body.brafa-app .progress-bar.bg-danger {
        background: #b42338 !important
    }

    html body.brafa-app .progress-bar.bg-warning {
        background: #a16207 !important
    }

    html body.brafa-app .progress-bar.bg-info {
        background: #075985 !important
    }
}