/* Below Styles are copied from Mullvad, on which the base design is based of. */

:root {
    --font-body: "Open Sans", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-weight-body: 400;
    --font-header: "Source Sans Pro", var(--font-body);
    --font-weight-header: 600;
    --font-mono: "Source Code Pro", monospace;
    --focus-outline-color: var(--warning);
    --focus-outline-offset: .1rem;
    --focus-outline-style: solid;
    --focus-outline-width: 2px;
    --focus-outline-border-radius: .1rem;
    --blue-dark: #192e45;
    --blue: #294d73;
    --blue-link: #366699;
    --blue-info: #588cc3;
    --success: #44ad4d;
    --success-with-white: #008a00;
    --danger: #e34039;
    --danger-with-white: #e03127;
    --warning: #ffd524;
    --grey-dark: #4a4a4a;
    --grey: #7a7a7a;
    --grey-7: #757575;
    --grey-light: #dbdbdb;
    --grey-lighter: #f5f5f5;
    --form-control-disabled: #959495;
    --text-grey-dark: #4a4a4a;
    --color-text: var(--grey-dark);
    --code-background: #363636;
    --code-color: #dbdbdb;
    --yellow: #ddca00;
    --light-sand: #f8f7f1;
    font-family: var(--font-body);
    font-weight: var(--font-weight-body);
    color: var(--color-text);
    --panel-bg: var(--light-sand);
    --surface: #fff;
    --surface-raised: #f9f9f9;
    --surface-muted: var(--grey-lighter);
    --border: var(--grey-light);
    --border-strong: var(--grey);
    --control-height: 2.5rem;
    --control-radius: 4px;
    --control-padding-block: .55rem;
    --control-padding-inline: .75rem;
    --control-border: var(--grey-light);
    --control-border-hover: var(--grey);
    --control-border-focus: var(--blue-info);
    --control-background: var(--surface);
    --control-background-disabled: var(--grey-lighter);
    --control-shadow-focus: 0 0 0 2px #588cc333;
    --control-shadow-resting: 0 1px 2px #0a0a0a12;
    --surface-shadow: 0 0 #0a0a0a1a,0 0 0 1px #0a0a0a33;
    --table-header-background: var(--blue);
    --table-header-border: var(--blue-dark);
    --table-row-stripe: var(--grey-lighter);
    --table-row-hover: var(--light-sand);
    --button-background-hover: #ffec0a
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(./open-sans-latin-400-normal.Bk63H6sG.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(./open-sans-latin-ext-400-normal.URAvo6nN.woff2)format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(./open-sans-cyrillic-400-normal.DvjyhnTk.woff2)format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(./open-sans-latin-600-normal.Cp4N6AwT.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(./open-sans-latin-ext-600-normal.CXDaa6Q7.woff2)format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(./open-sans-cyrillic-600-normal.BuMhxFId.woff2)format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(./open-sans-latin-700-normal.CceUhp2e.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(./open-sans-latin-ext-700-normal.DatbY7Hl.woff2)format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(./open-sans-cyrillic-700-normal.Db4W_Rwa.woff2)format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Source Sans Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(./source-sans-pro-latin-600-normal.BM2CBz6W.woff2)format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Source Sans Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(./source-sans-pro-latin-ext-600-normal.XGkkjFz7.woff2)format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Source Sans Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(./source-sans-pro-cyrillic-600-normal.7IW-0rI7.woff2)format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Martian Mono Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url(data:font/woff2;base64,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)format("woff2-variations");
    unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: Martian Mono Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url(./martian-mono-latin-wght-normal.5W32yIyr.woff2)format("woff2-variations");
    unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul {
    margin: 0;
    padding: 0
}

img,video {
    max-width: 100%;
    height: auto
}

:where(html) {
    --ease-1: cubic-bezier(.25,0,.5,1);
    --ease-2: cubic-bezier(.25,0,.4,1);
    --ease-3: cubic-bezier(.25,0,.3,1);
    --ease-4: cubic-bezier(.25,0,.2,1);
    --ease-5: cubic-bezier(.25,0,.1,1);
    --ease-in-1: cubic-bezier(.25,0,1,1);
    --ease-in-2: cubic-bezier(.5,0,1,1);
    --ease-in-3: cubic-bezier(.7,0,1,1);
    --ease-in-4: cubic-bezier(.9,0,1,1);
    --ease-in-5: cubic-bezier(1,0,1,1);
    --ease-out-1: cubic-bezier(0,0,.75,1);
    --ease-out-2: cubic-bezier(0,0,.5,1);
    --ease-out-3: cubic-bezier(0,0,.3,1);
    --ease-out-4: cubic-bezier(0,0,.1,1);
    --ease-out-5: cubic-bezier(0,0,0,1);
    --ease-in-out-1: cubic-bezier(.1,0,.9,1);
    --ease-in-out-2: cubic-bezier(.3,0,.7,1);
    --ease-in-out-3: cubic-bezier(.5,0,.5,1);
    --ease-in-out-4: cubic-bezier(.7,0,.3,1);
    --ease-in-out-5: cubic-bezier(.9,0,.1,1);
    --ease-elastic-out-1: cubic-bezier(.5,.75,.75,1.25);
    --ease-elastic-out-2: cubic-bezier(.5,1,.75,1.25);
    --ease-elastic-out-3: cubic-bezier(.5,1.25,.75,1.25);
    --ease-elastic-out-4: cubic-bezier(.5,1.5,.75,1.25);
    --ease-elastic-out-5: cubic-bezier(.5,1.75,.75,1.25);
    --ease-elastic-in-1: cubic-bezier(.5,-.25,.75,1);
    --ease-elastic-in-2: cubic-bezier(.5,-.5,.75,1);
    --ease-elastic-in-3: cubic-bezier(.5,-.75,.75,1);
    --ease-elastic-in-4: cubic-bezier(.5,-1,.75,1);
    --ease-elastic-in-5: cubic-bezier(.5,-1.25,.75,1);
    --ease-elastic-in-out-1: cubic-bezier(.5,-.1,.1,1.5);
    --ease-elastic-in-out-2: cubic-bezier(.5,-.3,.1,1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5,-.5,.1,1.5);
    --ease-elastic-in-out-4: cubic-bezier(.5,-.7,.1,1.5);
    --ease-elastic-in-out-5: cubic-bezier(.5,-.9,.1,1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --ease-elastic-1: var(--ease-elastic-out-1);
    --ease-elastic-2: var(--ease-elastic-out-2);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-elastic-5: var(--ease-elastic-out-5);
    --ease-squish-1: var(--ease-elastic-in-out-1);
    --ease-squish-2: var(--ease-elastic-in-out-2);
    --ease-squish-3: var(--ease-elastic-in-out-3);
    --ease-squish-4: var(--ease-elastic-in-out-4);
    --ease-squish-5: var(--ease-elastic-in-out-5);
    --ease-spring-1: linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);
    --ease-spring-2: linear(0,.007,.029 2.2%,.118 4.7%,.625 14.4%,.826 19%,.902,.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,.999 61.6%,.995 71.2%,1);
    --ease-spring-3: linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
    --ease-spring-4: linear(0,.009,.037 1.7%,.153 3.6%,.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,.973,.955 39.2%,.953 41.1%,.957 43.3%,.998 53.3%,1.009 59.1% 63.7%,.998 78.9%,1);
    --ease-spring-5: linear(0,.01,.04 1.6%,.161 3.3%,.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,.999 29.4%,.955 32.1%,.942,.935 34.9%,.933,.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,.996 70.2%,1.001 87.2%,1);
    --ease-bounce-1: linear(0,.004,.016,.035,.063,.098,.141,.191,.25,.316,.391 36.8%,.563,.766,1 58.8%,.946,.908 69.1%,.895,.885,.879,.878,.879,.885,.895,.908 89.7%,.946,1);
    --ease-bounce-2: linear(0,.004,.016,.035,.063,.098,.141 15.1%,.25,.391,.562,.765,1,.892 45.2%,.849,.815,.788,.769,.757,.753,.757,.769,.788,.815,.85,.892 75.2%,1 80.2%,.973,.954,.943,.939,.943,.954,.973,1);
    --ease-bounce-3: linear(0,.004,.016,.035,.062,.098,.141 11.4%,.25,.39,.562,.764,1 30.3%,.847 34.8%,.787,.737,.699,.672,.655,.65,.656,.672,.699,.738,.787,.847 61.7%,1 66.2%,.946,.908,.885 74.2%,.879,.878,.879,.885 79.5%,.908,.946,1 87.4%,.981,.968,.96,.957,.96,.968,.981,1);
    --ease-bounce-4: linear(0,.004,.016 3%,.062,.141,.25,.391,.562 18.2%,1 24.3%,.81,.676 32.3%,.629,.595,.575,.568,.575,.595,.629,.676 48.2%,.811,1 56.2%,.918,.86,.825,.814,.825,.86,.918,1 77.2%,.94 80.6%,.925,.92,.925,.94 87.5%,1 90.9%,.974,.965,.974,1);
    --ease-bounce-5: linear(0,.004,.016 2.5%,.063,.141,.25 10.1%,.562,1 20.2%,.783,.627,.534 30.9%,.511,.503,.511,.534 38%,.627,.782,1 48.7%,.892,.815,.769 56.3%,.757,.753,.757,.769 61.3%,.815,.892,1 68.8%,.908 72.4%,.885,.878,.885,.908 79.4%,1 83%,.954 85.5%,.943,.939,.943,.954 90.5%,1 93%,.977,.97,.977,1)
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    font-size: 16px
}

*,:before,:after {
    box-sizing: inherit
}

body {
    background-color: var(--blue-dark);
    line-height: 1.5
}

@media (prefers-reduced-motion) {
    ::view-transition-group(*) {
        animation: none!important
    }

    ::view-transition-old(*) {
        animation: none!important
    }

    ::view-transition-new(*) {
        animation: none!important
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: auto;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow: hidden
}

input[type=search]::-webkit-search-decoration {
    display: none
}

.content {
    max-width: 83.5rem;
    margin: 0 auto
}

.container {
    margin: 0 auto
}

.container.medium {
    max-width: 70rem
}

.container.narrow {
    max-width: 50rem
}

.container.extra-narrow {
    max-width: 30rem
}

.container.very-narrow {
    max-width: 40rem
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-header);
    font-weight: var(--font-weight-header)
}

h1 {
    margin-bottom: 1.5rem;
    font-size: 3rem;
    line-height: 1.125
}

h2 {
    font-size: 1.75rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.25em
}

p {
    margin: 0 0 1rem
}

.small {
    font-size: .75rem
}

a {
    cursor: pointer;
    color: var(--blue-link);
    text-decoration: underline
}

a:hover {
    color: var(--blue);
    text-decoration: underline
}

a.hero-link {
    color: #fff
}

a.hero-link:hover {
    color: #e6e6e6
}

a[href$=\.pdf i]:after {
    content: "";
    background: url(../../../images/file-type-pdf.svg) 0 0/100%;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    position: relative;
    bottom: -3px
}

a.no-icon:after {
    background: 0 0;
    width: 0;
    height: 0
}

button {
    cursor: pointer
}

img {
    max-width: 100%;
    height: auto
}

pre,code {
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: auto;
    direction: ltr;
    font-family: monospace
}

pre {
    -webkit-overflow-scrolling: touch;
    word-wrap: normal;
    background-color: var(--code-background);
    color: var(--code-color);
    white-space: pre;
    border-radius: 5px;
    padding: 1.25em 1.5em;
    font-size: .875em;
    overflow-x: auto
}

pre:not(:last-child) {
    margin-bottom: 1em
}

.break-word {
    word-break: break-word
}

.bg-success {
    background-color: var(--success-with-white);
    color: #fff
}

.bg-loading {
    background-color: var(--blue-link)
}

.bg-danger {
    background-color: var(--danger-with-white);
    color: #fff
}

.bg-warning {
    background-color: var(--warning);
    color: #000000b3
}

.text-grey-7 {
    color: var(--grey-7)
}

.help {
    font-weight: var(--font-weight-body);
    margin-block-start:.25rem;font-size: .75rem
}

p.error {
    color: var(--danger)
}

.capitalize {
    text-transform: capitalize
}

section.dark {
    background-color: var(--blue-dark);
    color: #fff;
    padding: 0 1.5rem 3rem
}

@media screen and (width<=500px) {
    .not-mobile {
        display: none
    }
}

.text-center {
    text-align: center
}

.box {
    background: var(--surface-raised);
    border-radius: .375rem;
    padding: 1rem;
    box-shadow: var(--surface-shadow);
    overflow-x: auto
}

@media (width>=500px) {
    .box {
        padding: 2rem
    }
}

.box:not(:last-child) {
    margin-bottom: 1.5rem
}

#main form {
    color: var(--color-text);
    display: grid;
    gap: 1rem
}

#main .box form {
    margin-block-start: 1.5rem;
    max-width: 44rem
}

#main .box form[data-expense-formset] {
    max-width: none
}

#main .box form[data-charge-formset] {
    max-width: none
}

#main .box form.expense-filter-form {
    max-width: none
}

#main form p {
    display: grid;
    gap: .375rem;
    margin: 0
}

#main :where(fieldset) {
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    margin: 0;
    min-width: 0;
    padding: 1rem
}

#main :where(legend) {
    color: var(--blue-dark);
    font-family: var(--font-header);
    font-size: 1.125rem;
    font-weight: var(--font-weight-header);
    padding-inline: .25rem
}

#main :where(label) {
    color: var(--blue-dark);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35
}

#main form p:has(:is(input,select,textarea)[required]) > label::after {
    color: var(--danger);
    content: " *";
    font-weight: 700
}

#main :where(input,select,textarea,button) {
    font: inherit
}

#main :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]),select,textarea) {
    background: var(--control-background);
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    box-shadow: var(--control-shadow-resting);
    color: var(--color-text);
    inline-size: 100%;
    line-height: 1.4;
    min-height: var(--control-height);
    padding: var(--control-padding-block) var(--control-padding-inline);
    transition: border-color .15s var(--ease-2), box-shadow .15s var(--ease-2), background-color .15s var(--ease-2)
}

#main :where(select) {
    padding-inline-end: 2.25rem
}

#main select[multiple] {
    min-height: 8rem;
    padding-block: .35rem
}

#main :where(textarea) {
    min-height: 8rem;
    resize: vertical
}

#main :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]),select,textarea):hover {
    border-color: var(--control-border-hover)
}

#main :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]),select,textarea):focus {
    border-color: var(--control-border-focus);
    box-shadow: var(--control-shadow-focus);
    outline: 0
}

#main :where(input,select,textarea):disabled,
#main :where(input,select,textarea)[readonly] {
    background: var(--control-background-disabled);
    border-color: var(--form-control-disabled);
    color: var(--grey-7);
    cursor: not-allowed
}

#main input::placeholder,
#main textarea::placeholder {
    color: var(--grey-7);
    opacity: 1
}

#main :where(input[type=checkbox],input[type=radio]) {
    accent-color: var(--blue);
    block-size: 1rem;
    inline-size: 1rem;
    margin: .2rem .5rem .2rem 0
}

#main :where(input[type=file]) {
    color: var(--color-text);
    font-size: .9375rem
}

#main :where(input[type=file])::file-selector-button {
    background: var(--surface);
    border: 1px solid var(--blue-link);
    border-radius: var(--control-radius);
    color: var(--blue-link);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    margin-inline-end: .75rem;
    min-height: 2.25rem;
    padding: .45rem .75rem
}

#main :where(input[type=file])::file-selector-button:hover {
    background: var(--grey-lighter);
    color: var(--blue)
}

#main :where(input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true],.is-invalid) {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px #e3403933
}

#main :where(.helptext,.help,.form-help) {
    color: var(--grey-7);
    display: block;
    font-size: .8125rem;
    line-height: 1.45
}

#main :where(.errorlist) {
    color: var(--danger);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    margin: .25rem 0 0;
    padding: 0
}

#main :where(.errorlist li + li) {
    margin-block-start: .25rem
}

#main :where(.form-row,.field-row) {
    display: grid;
    gap: 1rem
}

@media (width>=700px) {
    #main :where(.form-row,.field-row) {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

#main :where(.form-actions) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block-start: .5rem
}

#main .payment-lines-section {
    overflow-x: auto
}

#main .payment-line-formset {
    margin-block: .75rem 1rem;
    min-inline-size: 52rem
}

#main .payment-line-formset :where(select,input) {
    min-inline-size: 9rem
}

.reservation-editor-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1fr) minmax(24rem,32rem)
}

.reservation-editor-shell {
    max-width: 96rem
}

.reservation-editor-layout > .box {
    min-inline-size: 0
}

#main .reservation-editor-layout #reservation-form {
    max-width: none
}

#main .reservation-editor-layout .payment-lines-section {
    overflow-x: visible
}

#main .reservation-editor-layout .payment-line-formset {
    inline-size: 100%;
    min-inline-size: 0;
    table-layout: fixed
}

#main .reservation-editor-layout .payment-line-formset :where(select,input) {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0
}

#main .reservation-editor-layout .payment-line-formset :where(th,td):last-child {
    inline-size: 5rem;
    text-align: center
}

.reservation-form-section {
    background: var(--surface);
    display: grid;
    gap: 1rem
}

.reservation-form-section + .reservation-form-section {
    margin-block-start: .5rem
}

.reservation-field-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.reservation-field-grid--compact {
    grid-template-columns: repeat(2,minmax(7rem,1fr))
}

.reservation-field-grid--payment {
    align-items: end;
    grid-template-columns: minmax(12rem,18rem) minmax(14rem,1fr)
}

.reservation-inline-header h2 {
    color: var(--blue-dark);
    font-size: 1.125rem
}

.reservation-new-guests {
    border-block-start: 1px solid var(--border);
    margin-block-start: .25rem;
    padding-block-start: 1rem
}

.reservation-new-guest-list {
    display: grid;
    gap: .75rem
}

.reservation-new-guest-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem
}

.reservation-new-guest-row.is-removed {
    display: none
}

.reservation-new-guest-grid {
    align-items: end
}

.reservation-new-guest-section {
    border-block-start: 1px solid var(--border);
    display: grid;
    gap: .75rem;
    margin-block-start: .25rem;
    padding-block-start: 1rem
}

.reservation-new-guest-section h3 {
    color: var(--blue-dark);
    font-size: 1rem
}

.reservation-new-guest-address-grid,
.reservation-new-guest-document-grid {
    align-items: end
}

.reservation-new-guest-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

.reservation-new-guest-primary {
    align-items: center;
    color: var(--text);
    display: inline-flex;
    font-weight: 700;
    gap: .5rem
}

.reservation-new-guest-delete-field {
    display: none
}

.reservation-occupancy-warning {
    background: #fff9db;
    border: 1px solid #ffd524;
    border-radius: var(--control-radius);
    color: #5f4a00;
    display: grid;
    gap: .15rem;
    padding: .75rem .9rem
}

.reservation-occupancy-warning[hidden] {
    display: none
}

.reservation-document-list {
    display: grid;
    gap: .75rem
}

.reservation-document-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: .75rem;
    padding: 1rem
}

.reservation-document-row.is-removed {
    display: none
}

.reservation-document-grid {
    align-items: end
}

.reservation-document-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end
}

.reservation-document-delete-field {
    display: none
}

.reservation-document-delete-field :where(input,label) {
    display: none
}

.reservation-charge-delete-field,
.reservation-charge-delete-field :where(input,label) {
    display: none
}

.form-field {
    display: grid;
    gap: .375rem;
    min-inline-size: 0
}

.form-field[hidden] {
    display: none !important;
}

.form-field--wide {
    grid-column: 1 / -1
}

#main .form-field:has(:is(input,select,textarea)[required]) > label::after {
    color: var(--danger);
    content: " *";
    font-weight: 700
}

#main .form-field--required > label::after {
    color: var(--danger);
    content: " *";
    font-weight: 700
}

.form-field--checkbox {
    align-self: center
}

.form-field--checkbox label {
    align-items: center;
    display: inline-flex;
    gap: .5rem
}

.form-field--checkbox input {
    margin: 0
}

.form-field--toggle {
    align-self: end
}

.profile-gstin-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-grid;
    gap: .625rem;
    grid-template-columns: auto minmax(0,1fr);
    max-inline-size: max-content;
    position: relative
}

.profile-gstin-toggle input {
    block-size: 1px;
    inline-size: 1px;
    margin: 0;
    opacity: 0;
    position: absolute
}

.profile-toggle-control {
    background: var(--grey-light);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    block-size: 1.5rem;
    display: inline-block;
    inline-size: 2.75rem;
    position: relative;
    transition: background-color .15s var(--ease-2), border-color .15s var(--ease-2), box-shadow .15s var(--ease-2)
}

.profile-toggle-control::after {
    background: var(--surface);
    border-radius: 999px;
    block-size: 1.125rem;
    box-shadow: 0 1px 3px #00000030;
    content: "";
    inline-size: 1.125rem;
    inset-block-start: 50%;
    inset-inline-start: .1875rem;
    position: absolute;
    transform: translateY(-50%);
    transition: inset-inline-start .15s var(--ease-2)
}

.profile-gstin-toggle input:checked + .profile-toggle-control {
    background: var(--blue);
    border-color: var(--blue)
}

.profile-gstin-toggle input:checked + .profile-toggle-control::after {
    inset-inline-start: 1.375rem
}

.profile-gstin-toggle input:focus-visible + .profile-toggle-control {
    box-shadow: var(--control-shadow-focus)
}

.profile-gstin-field[hidden] {
    display: none
}

.reservation-summary-card {
    position: sticky;
    top: 1rem;
    overflow-x: visible
}

.reservation-summary-grid {
    grid-template-columns: 1fr
}

.reservation-summary-grid dd {
    overflow-wrap: anywhere
}

.payment-form-breakdown {
    border-block-start: 1px solid var(--border);
    margin-block-start: 1rem;
    padding-block-start: 1rem
}

.payment-form-breakdown h3 {
    color: var(--blue-dark);
    font-size: 1.125rem;
    margin-block-end: .75rem
}

.fully-paid-notice {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    border-radius: .375rem;
    padding: .25rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    margin-block-end: .75rem;
}

@media (width<=1000px) {
    .reservation-editor-layout {
        grid-template-columns: 1fr
    }

    .reservation-summary-card {
        position: static
    }
}

@media (width<=760px) {
    .reservation-field-grid,
    .reservation-field-grid--compact,
    .reservation-field-grid--payment {
        grid-template-columns: 1fr
    }
}

#main :where(.button,.btn,button:not(.banner-button),input[type=submit],input[type=button],input[type=reset]) {
    align-items: center;
    background: var(--yellow);
    border: 1px solid var(--yellow);
    border-radius: var(--control-radius);
    box-shadow: var(--control-shadow-resting);
    color: var(--blue-dark);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: .5rem;
    justify-content: center;
    line-height: 1.25;
    min-height: var(--control-height);
    padding: .55rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s var(--ease-2), border-color .15s var(--ease-2), box-shadow .15s var(--ease-2), color .15s var(--ease-2)
}

#main :where(.button,.btn,button:not(.banner-button),input[type=submit],input[type=button],input[type=reset]):hover {
    background: var(--button-background-hover);
    border-color: var(--button-background-hover);
    color: var(--blue-dark);
    text-decoration: none
}

#main button[style*=background-color] {
    border-color: transparent;
    color: #fff
}

#main :where(.button,.btn,button:not(.banner-button),input[type=submit],input[type=button],input[type=reset]):focus-visible {
    outline-offset: var(--focus-outline-offset);
    outline: var(--focus-outline-color) var(--focus-outline-style) var(--focus-outline-width)
}

#main :where(.button,.btn,button:not(.banner-button),input[type=submit],input[type=button],input[type=reset]):active {
    box-shadow: none;
    transform: translateY(1px)
}

#main :where(.btn-secondary,.button.secondary,input[type=reset]) {
    background: var(--surface);
    border-color: var(--blue-link);
    color: var(--blue-link)
}

#main :where(.btn-secondary,.button.secondary,input[type=reset]):hover {
    background: var(--grey-lighter);
    border-color: var(--blue);
    color: var(--blue)
}

#main :where(.btn-danger,.button.danger) {
    background: var(--danger-with-white);
    border-color: var(--danger-with-white);
    color: #fff
}

#main :where(.btn-danger,.button.danger):hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff
}

#main .btn-dark {
    background: #192e45 !important;
    border-color: #192e45 !important;
    color: #fff !important
}

#main .btn-dark:hover {
    background: #294d73 !important;
    border-color: #294d73 !important;
    color: #fff !important
}

#main :where(.btn-sm,.button.small) {
    min-height: 2rem;
    padding: .35rem .75rem
}

#main :where(button,input[type=submit],input[type=button],input[type=reset],.button,.btn):disabled,
#main :where(button,input[type=submit],input[type=button],input[type=reset],.button,.btn)[aria-disabled=true] {
    background: var(--grey-light);
    border-color: var(--grey-light);
    color: var(--grey-7);
    cursor: not-allowed;
    opacity: 1;
    transform: none
}

.m-content .section {
    background-color: #fff;
    padding: 3rem 1.5rem
}

@media screen and (width>=1024px) {
    .m-content .section {
        padding: 3rem
    }
}

.m-content .container {
    margin: 0 auto
}

@media screen and (width>=1024px) {
    .m-content .container {
        max-width: 960px
    }
}

.m-content .container.narrow {
    max-width: 50rem!important
}

.m-content :is(h1,h2,h3,h4) {
    line-height: 1.125
}

.m-content h2:not(:first-child) {
    margin-top: 1.1428em
}

.m-content h2 {
    margin-bottom: .5rem
}

.m-content h3:not(:first-child) {
    margin-top: 1.3333em
}

.m-content h3 {
    margin-bottom: .5rem
}

.m-content .preamble {
    font-size: 1.3125rem
}

.m-content p:not(:last-child) {
    margin-bottom: 1em
}

.m-content figure:not(:last-child) {
    margin-bottom: 3rem
}

.m-content ol {
    margin: 1rem 0 1rem 2rem
}

.platform-tabs {
    background-color: var(--blue-dark);
    color: #fff;
    white-space: nowrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    display: flex;
    overflow: auto hidden
}

.platform-tabs ul {
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    list-style: none;
    display: flex
}

.platform-tabs a {
    font-family: var(--font-header);
    color: #ffffff80;
    border-bottom: 1px solid var(--blue);
    justify-content: center;
    align-items: center;
    gap: .5em;
    padding: .5em 1em;
    text-decoration: none;
    display: flex
}

.platform-tabs .is-active a,.platform-tabs .is-active a:hover {
    color: #fff;
    border-color: var(--warning);
    cursor: default
}

.platform-tabs li:not(.is-active) a:hover {
    color: #ffffffb3;
    background-color: #0a0a0a1a
}

.isOld {
    filter: sepia(80%)
}

.oldPostMessage {
    background-color: var(--warning);
    margin-block-end:2rem;padding: 1rem;
    font-size: 1rem
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

:where(footer,.navigation) :where(a,button):focus-visible {
    outline-offset: var(--focus-outline-offset);
    outline: var(--focus-outline-color) var(--focus-outline-style) var(--focus-outline-width);
    border-radius: var(--focus-outline-border-radius)
}


.wrapper {
    min-height: calc(40px + 4 * var(--focus-outline-width));
    font-size: 1rem;
    display: flex;
}

.navigation {
    --nav-block-padding: .8125rem;
    --nav-inline-padding: 1rem;
    --c-link-fg: #fff;
    --c-link-hover-bg: #325e8c;
    --c-nav-bg: var(--blue);
    --hamburger-indent: -6px;
    --nav-link-height: 46px;
    background: var(--c-nav-bg);
    position: relative;
}

a.navigation svg {
    display: block
}

.logo-burger.navigation,.language-account-menu.svelte-rfuq4y {
    flex-shrink: 0;
    align-items: center;
    display: flex
}

.navigation:before,.navigation:after {
    content: "";
    height: calc(var(--nav-link-height) + 2 * var(--nav-block-padding));
    pointer-events: none;
    width: var(--nav-inline-padding);
    z-index: 2;
    display: block;
    position: absolute;
    top: 0;
}

.navigation:before {
    background: linear-gradient(270deg, transparent, var(--c-nav-bg));
    left: 0;
}

.navigation:after {
    background: linear-gradient(90deg, transparent, var(--c-nav-bg));
    right: 0;
}

.navigation {
    max-height: 72px;
}


.navbar {
    scrollbar-width: thin;
    max-width: 86rem;
    padding: var(--nav-block-padding) var(--nav-inline-padding);
    align-items: center;
    margin-inline: auto;
    display: flex;
    overflow-x: auto;
    container-type: inline-size;
    
}

.logo-burger {
    margin-inline-end: 1rem;
    flex-shrink: 0;
    align-items: center;
    display: flex;
    padding-inline-end: 1.5rem;
    position: relative;
}

.beta-badge {
    align-items: center;
    background: var(--warning);
    border: 1px solid #f0c000;
    border-radius: 4px;
    color: var(--blue-dark);
    display: inline-flex;
    font-family: var(--font-header);
    font-size: .5625rem;
    font-weight: var(--font-weight-header);
    height: 1rem;
    letter-spacing: 0;
    line-height: 1;
    padding-inline: .3rem;
    position: absolute;
    inset-block-start: -.125rem;
    inset-inline-start: 2rem;
    text-transform: uppercase;
}

.nav-links {
    align-items: center;
    margin-inline: .5rem;
    list-style: none;
    display: flex;
}

ul.nav-links {
    align-items: center;
    margin-inline:.5rem;list-style: none;
    display: flex;
}

ul.nav-links a:where(.nav-links) {
    height: var(--nav-link-height);
    align-items: center;
    padding-inline:1rem;display: flex;
}

a.nav-links {
    color: var(--c-link-fg);
    font-weight: 700;
    position: relative;
    text-decoration: none;
    transition: background-color .15s var(--ease-2), box-shadow .15s var(--ease-2)
}

a.nav-links:hover {
    background: var(--c-link-hover-bg)
}

a.nav-links.is-active,
a[aria-current=page].nav-links {
    background: var(--blue-dark);
    box-shadow: inset 0 -4px 0 var(--warning)
}

a.nav-links.is-active:hover,
a[aria-current=page].nav-links:hover {
    background: var(--blue-dark)
}

.navigation.navbar {
    --nav-block-padding: .8125rem;
    --nav-inline-padding: 1rem;
    --c-link-fg: #fff;
    --c-link-hover-bg: #325e8c;
    --c-nav-bg: var(--blue);
    --hamburger-indent: -6px;
    --nav-link-height: 46px;
    background: var(--c-nav-bg);
    position: relative
}

nav.navbar {
    scrollbar-width: thin;
    max-width: 86rem;
    padding: var(--nav-block-padding) var(--nav-inline-padding);
    align-items: center;
    margin-inline:auto;display: flex;
    overflow-x: auto;
    container-type: inline-size
}

a.navbar svg {
    display: block
}

.logo-burger.navbar, .account-menu {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.logo-burger.navbar {
    margin-inline-end:1rem;}

.logo-burger.navbar button {
    margin-inline-start:var(--hamburger-indent)}

.language-account-menu.navbar {
    margin-inline-start: auto
}

.language-account-menu.navbar a:where(.navbar) {
    text-decoration: none
}


button.logout {
    font-size: inherit;
    background: 0 0;
    border: 0;
    font-family: inherit;
    color: var(--c-link-fg);
    height: var(--nav-link-height);
    align-items: center;
    padding-inline: 1rem;
    font-weight: 700;
    display: flex;
}

button.logout:hover {
    background: var(--c-link-hover-bg);
}

.account-menu {
    margin-inline-start: auto;
}

a.account {
    height: var(--nav-link-height);
    align-items: center;
    padding-inline: 1rem;
    font-weight: 700;
    display: flex;
    background: var(--yellow);
    color: var(--blue-dark);
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    text-decoration: none;
}

a.create-btn {
    height: 40px;
    align-items: center;
    padding-inline: 1rem;
    font-weight: 700;
    display: flex;
    background: var(--yellow);
    color: var(--blue-dark);
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    text-decoration: none;
    align-self: self-start;
}

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

.billing-rates-shell {
    max-width: 96rem
}

.property-setup-shell {
    max-width: 96rem
}

.billing-rates-header {
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 1rem
}

.billing-rates-header h1 {
    color: var(--blue-dark);
    margin-block-end: .35rem
}

.billing-rates-secondary-action {
    min-height: 40px;
    align-items: center;
    display: inline-flex
}

a.account:hover {
    background: #ffec0a;
}

a.create-btn:hover {
    background: #ffec0a;
}

#main :where(.create-btn,.room-type-sidebar__action,.text-action[href*="/update/"],.update-action) {
    align-items: center;
    display: inline-flex;
    gap: .4rem
}

#main :where(.create-btn,.room-type-sidebar__action,.text-action[href*="/update/"],.update-action)::before {
    background: currentColor;
    block-size: 1em;
    content: "";
    flex: 0 0 auto;
    inline-size: 1em;
    -webkit-mask: var(--action-icon) center / contain no-repeat;
    mask: var(--action-icon) center / contain no-repeat
}

#main :where(.create-btn,.room-type-sidebar__action) {
    --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E")
}

#main :where(.create-btn[href*="/update/"],.text-action[href*="/update/"],.update-action) {
    --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E")
}

a.current-property {
    justify-items: center;
    gap: .25rem 1rem;
    margin-inline: auto;
    padding: .5rem;
    text-decoration: none;
    display: grid;
}

.current-property .icon {
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
}


span.current-property-item :first-child {
    grid-area: 1;
}

span.current-property-item {
    color: var(--success);
    display: flex;
    align-items: center;
}

.current-property:hover .current-property-item {
    color: #53c95d
}

#main {
    background-color: var(--grey-lighter);
    padding: 3rem 1.5rem;
    position: relative;
}

.page-shell {
    display: grid;
    gap: 1.5rem
}

.page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between
}

.page-header h1 {
    color: var(--blue-dark);
    margin-block-end: .35rem
}

.overview-date {
    color: var(--danger-with-white);
    flex: 0 0 auto;
    font-weight: 700;
    margin-block-start: 1.65rem
}

.overview-header-actions {
    align-items: end;
    display: grid;
    gap: .65rem;
    justify-items: end
}

#main form.overview-filter-form {
    margin-block-start: 0;
    max-width: none
}

.overview-date-fields {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end
}

.overview-date-fields label {
    color: var(--grey-7);
    display: grid;
    font-size: .8125rem;
    gap: .2rem
}

.overview-date-fields input {
    min-inline-size: 9.5rem
}

.page-header-alert {
    background: #fff4f3;
    border: 1px solid #e3403966;
    border-radius: var(--control-radius);
    color: var(--danger);
    display: grid;
    gap: .15rem;
    margin-block-start: .85rem;
    max-inline-size: 36rem;
    padding: .75rem .9rem
}

.page-header-alert strong {
    color: var(--danger-with-white)
}

.eyebrow {
    color: var(--blue-link);
    font-size: .8125rem;
    font-weight: 700;
    margin-block-end: .25rem;
    text-transform: uppercase
}

.eyebrow a {
    color: inherit;
    text-decoration: none
}

.eyebrow a:hover {
    color: var(--blue);
    text-decoration: underline
}

.page-subtitle,
.section-subtitle,
.detail-muted,
.metric-note {
    color: var(--grey-7)
}

.page-subtitle,
.section-subtitle {
    margin: 0
}

.section-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-block-end: 1rem
}

.section-header h2 {
    color: var(--blue-dark);
    margin-block-end: .25rem
}

.action-group,
.table-actions,
.pill-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.metric-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit,minmax(10rem,1fr))
}

.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--blue);
    border-radius: var(--control-radius);
    box-shadow: var(--control-shadow-resting);
    display: grid;
    gap: .25rem;
    padding: 1rem
}

.overview-summary-grid {
    grid-template-columns: repeat(4,minmax(9.5rem,1fr))
}

.overview-summary-card {
    align-content: center;
    min-block-size: 6rem
}

.overview-occupancy-card {
    border-inline-start-color: var(--success-with-white);
    grid-column: span 2
}

.reports-shell {
    max-width: 96rem
}

.reports-panel {
    margin-block: 0
}

.daily-collection-panel {
    margin-block: 1rem
}

.daily-collection-grid .metric-card {
    border-inline-start-color: var(--warning)
}

@media (width<=900px) {
    .overview-summary-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (width<=520px) {
    .page-header,
    .overview-header-actions {
        display: grid;
        justify-items: stretch
    }

    .overview-date {
        margin-block-start: 0
    }

    .overview-date-fields {
        align-items: stretch;
        justify-content: stretch
    }

    .overview-summary-grid {
        grid-template-columns: 1fr
    }

    .overview-occupancy-card {
        grid-column: auto
    }
}

.sales-overview-panel {
    margin-block: 1rem
}

.sales-overview-header {
    align-items: flex-start;
    gap: 1.25rem
}

.sales-filter-form {
    align-items: flex-end;
    display: grid;
    gap: .75rem;
    justify-items: end
}

.sales-date-fields {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.sales-date-fields label {
    color: var(--grey-7);
    display: grid;
    font-size: .8125rem;
    gap: .2rem
}

.sales-date-fields input {
    min-inline-size: 9.5rem
}

.sales-summary-grid {
    margin-block-end: 1rem
}

.sales-chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    overflow-x: auto;
    padding: 1.25rem 1rem .75rem
}

.sales-axis-chart {
    display: block;
    inline-size: 100%;
    min-block-size: 22rem
}

.sales-chart-grid {
    stroke: #e8edf2;
    stroke-width: 1
}

.sales-x-axis,
.sales-y-axis {
    stroke: var(--blue-dark);
    stroke-linecap: square;
    stroke-width: 2.25
}

.sales-chart-y-label,
.sales-chart-x-label,
.sales-chart-axis-title {
    fill: var(--grey-7);
    font-size: .75rem
}

.sales-chart-y-label {
    text-anchor: end
}

.sales-chart-x-label {
    text-anchor: end
}

.sales-chart-axis-title {
    font-weight: 700;
    text-anchor: middle
}

.sales-chart-axis-title-y {
    dominant-baseline: middle
}

.sales-chart-bar {
    fill: #2e5a88
}

.sales-chart-value-label {
    fill: var(--blue-dark);
    font-size: .7rem;
    font-weight: 700;
    text-anchor: middle;
    transform: translateY(-7px)
}

.sales-chart-column:hover .sales-chart-bar {
    fill: var(--blue-dark)
}

.revenue-overview-panel .metric-card {
    border-inline-start-color: var(--success-with-white)
}

.revenue-overview-panel .sales-x-axis,
.revenue-overview-panel .sales-y-axis {
    stroke: var(--success-with-white)
}

.revenue-overview-panel .sales-chart-bar {
    fill: var(--success-with-white)
}

.revenue-overview-panel .sales-chart-column:hover .sales-chart-bar {
    fill: var(--success)
}

.reports-panel-header {
    align-items: flex-start;
    gap: 1.25rem
}

#main .box form.report-filter-form {
    align-items: flex-end;
    display: grid;
    gap: .75rem;
    justify-items: end;
    margin-block-start: 0;
    max-width: none
}

#main .report-tab-toggle {
    background: var(--blue-dark);
    border: 1px solid var(--blue-dark);
    border-radius: var(--control-radius);
    display: inline-flex;
    gap: .4rem;
    padding: .25rem
}

#main .report-tab-button {
    background: var(--blue-dark);
    border: 0;
    border-block-end: 4px solid transparent;
    border-radius: 2px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    min-height: 2.35rem;
    padding: .55rem .85rem;
}

#main .report-tab-button:hover {
    background: var(--blue);
    border-block-end-color: transparent;
    color: #fff
}

#main .report-tab-button.is-active,
#main .report-tab-button.is-active:hover {
    background: var(--blue-dark);
    border-block-end-color: var(--warning);
    color: #fff;
}

.report-date-fields {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.report-date-fields label {
    color: var(--grey-7);
    display: grid;
    font-size: .8125rem;
    gap: .2rem
}

.report-date-fields input {
    min-inline-size: 9.5rem
}

.report-summary-grid {
    margin-block-end: 1rem
}

.report-chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    overflow-x: auto;
    padding: 1.25rem 1rem .75rem
}

.report-axis-chart {
    display: block;
    inline-size: 100%;
    min-block-size: 22rem
}

.report-chart-grid {
    stroke: #e8edf2;
    stroke-width: 1
}

.report-x-axis,
.report-y-axis {
    stroke: var(--blue-dark);
    stroke-linecap: square;
    stroke-width: 2.25
}

.report-chart-y-label,
.report-chart-x-label,
.report-chart-axis-title {
    fill: var(--grey-7);
    font-size: .75rem
}

.report-chart-y-label {
    text-anchor: end
}

.report-chart-x-label {
    text-anchor: end
}

.report-chart-axis-title {
    font-weight: 700;
    text-anchor: middle
}

.report-chart-axis-title-y {
    dominant-baseline: middle
}

.report-chart-bar {
    fill: #2e5a88
}

.report-chart-value-label {
    fill: var(--blue-dark);
    font-size: .7rem;
    font-weight: 700;
    text-anchor: middle;
    transform: translateY(-7px)
}

.report-chart-column:hover .report-chart-bar {
    fill: var(--blue-dark)
}

.report-table-section {
    margin-block-start: 1rem
}

.report-table-header {
    align-items: center
}

.report-table-scroll {
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    overflow-x: auto
}

.report-ledger-table {
    font-size: .8125rem;
    margin-block-start: 0;
    min-inline-size: 116rem
}

.report-ledger-table th,
.report-ledger-table td {
    padding: .55rem .65rem;
    white-space: nowrap
}

.report-ledger-table .empty-state {
    white-space: normal
}

.report-number-cell {
    font-variant-numeric: tabular-nums;
    text-align: right
}

.report-date-cell {
    font-variant-numeric: tabular-nums
}

@media (width<=900px) {
    .sales-overview-header {
        display: grid
    }

    .sales-filter-form {
        justify-items: stretch
    }

    .sales-date-fields {
        align-items: stretch
    }

    .reports-panel-header {
        display: grid
    }

    #main .box form.report-filter-form {
        justify-items: stretch
    }

    .report-date-fields {
        align-items: stretch
    }

    .report-table-header {
        align-items: flex-start;
        display: grid
    }
}

@media (width<=640px) {
    .sales-chart {
        padding: .75rem
    }

    .report-chart {
        padding: .75rem
    }
}

.reservation-list-shell,
.profile-list-shell {
    max-width: 96rem
}

.reservation-list-layout,
.profile-list-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1fr) minmax(18rem,22rem)
}

.reservation-list-panel,
.profile-list-panel {
    min-inline-size: 0
}

.reservation-sidebar,
.profile-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1rem
}

.reservation-filter-panel,
.profile-filter-panel {
    overflow-x: visible
}

.reservation-filter-form,
.profile-filter-form {
    display: grid;
    gap: .875rem;
    grid-template-columns: 1fr
}

.expense-list-shell {
    max-width: 96rem
}

.expense-list-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1fr) minmax(18rem,22rem)
}

.expense-list-panel {
    min-inline-size: 0
}

.reservation-list-layout > .box,
.reservation-sidebar > .box,
.expense-list-layout > .box,
.expense-sidebar > .box,
.profile-list-layout > .box,
.profile-sidebar > .box {
    margin-bottom: 0
}

.expense-list-header {
    align-items: center
}

.expense-add-button {
    flex: 0 0 auto
}

.expense-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 1rem
}

.expense-filter-panel {
    overflow-x: visible
}

.expense-filter-form {
    display: grid;
    gap: .875rem;
    grid-template-columns: 1fr
}

.filter-field {
    display: grid;
    gap: .375rem;
    min-inline-size: 0
}

.filter-field--search {
    min-inline-size: 0
}

.filter-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    white-space: nowrap
}

.quick-filter-bar {
    align-items: center;
    border-block-start: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-block-end: .875rem;
    padding-block-start: .875rem
}

.quick-filter-label {
    color: var(--blue-dark);
    font-size: .875rem;
    font-weight: 700
}

.quick-filter-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: .375rem
}

#main .quick-filter-button {
    font-size: .8125rem;
    min-height: 1.875rem;
    padding: .3rem .625rem
}

#main .quick-filter-button[aria-current=true] {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

#main .quick-filter-button[aria-current=true]:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: #fff
}

.pagination {
    align-items: center;
    border-block-start: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    justify-content: space-between;
    margin-block-start: 1rem;
    padding-block-start: 1rem
}

.pagination__links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

.pagination__summary,
.pagination__disabled {
    color: var(--grey-7);
    font-size: .9375rem
}

@media (width<=1050px) {
    .reservation-list-layout,
    .profile-list-layout {
        grid-template-columns: 1fr
    }

    .reservation-sidebar,
    .profile-sidebar {
        position: static
    }

    .reservation-filter-form,
    .profile-filter-form {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .filter-actions {
        grid-column: 1 / -1
    }

    .expense-list-layout {
        grid-template-columns: 1fr
    }

    .expense-sidebar {
        position: static
    }

    .expense-filter-form {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

}

@media (width<=650px) {
    .reservation-filter-form,
    .profile-filter-form,
    .expense-filter-form {
        grid-template-columns: 1fr
    }
}

.metric-label {
    color: var(--blue-dark);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase
}

.metric-value {
    color: var(--blue-dark);
    font-family: var(--font-header);
    font-size: 2rem;
    line-height: 1
}

.metric-note,
.detail-muted {
    display: block;
    font-size: .8125rem;
    line-height: 1.4
}

.status-badge,
.pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    inline-size: fit-content;
    justify-self: start;
    max-inline-size: 100%;
    padding: .25rem .55rem;
    white-space: nowrap
}

.status-pending {
    background: var(--warning);
    color: #000000b3
}

.status-confirmed,
.status-paid {
    background: var(--blue-info);
    color: #fff
}

.status-checked_in {
    background: var(--success-with-white);
    color: #fff
}

.status-available {
    background: var(--success-with-white);
    color: #fff
}

.status-reserved {
    background: var(--warning);
    color: #000000b3
}

.status-occupied {
    background: var(--blue-info);
    color: #fff
}

.status-dirty {
    background: var(--grey);
    color: #fff
}

.status-out_of_service,
.status-out_of_order {
    background: var(--danger-with-white);
    color: #fff
}

.status-checked_out,
.status-refund,
.status-partial_refund {
    background: var(--grey);
    color: #fff
}

.status-cancelled,
.status-no_show {
    background: var(--danger-with-white);
    color: #fff
}

.pill {
    background: var(--light-sand);
    border: 1px solid var(--border);
    color: var(--blue-dark)
}

.record-link {
    color: var(--blue-dark);
    display: block;
    font-weight: 700;
    text-decoration: none
}

.record-link:hover {
    color: var(--blue-link);
    text-decoration: underline
}

.text-action {
    color: var(--blue-link);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none
}

.text-action:hover {
    color: var(--blue);
    text-decoration: underline
}

.empty-state {
    align-items: center;
    display: grid;
    justify-items: center;
    padding: 2rem;
    text-align: center
}

.empty-state h3 {
    color: var(--blue-dark);
    margin-block-end: .35rem
}

.empty-state p {
    color: var(--grey-7);
    margin-block-end: 1rem
}

.floor-map {
    display: grid;
    gap: 1rem
}

.floor-map-legend {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-block-end: 1rem;
    padding: .75rem 1rem
}

.floor-map-legend__item {
    align-items: center;
    color: var(--blue-dark);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    gap: .4rem
}

.floor-map-legend__swatch {
    background: var(--blue-info);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    block-size: .75rem;
    inline-size: .75rem
}

.floor-map-legend__swatch--available {
    background: var(--success-with-white)
}

.floor-map-legend__swatch--reserved {
    background: #d0933a
}

.floor-map-legend__swatch--occupied {
    background: var(--blue)
}

.floor-map-legend__swatch--dirty {
    background: var(--warning)
}

.floor-map-legend__swatch--unavailable {
    background: var(--danger-with-white)
}

.floor-row {
    align-items: start;
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    display: grid;
    gap: 1rem;
    grid-template-columns: 7rem minmax(0,1fr);
    padding: 1rem
}

.floor-label {
    background: var(--light-sand);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    display: grid;
    gap: .15rem;
    justify-items: center;
    min-block-size: 6rem;
    padding: .75rem;
    text-align: center
}

.floor-label__eyebrow,
.floor-label__count {
    color: var(--grey-7);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase
}

.floor-label h3 {
    color: var(--blue-dark);
    font-family: var(--font-header);
    font-size: 2rem;
    line-height: 1
}

.room-tile-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill,minmax(11.5rem,1fr))
}

.room-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-block-start: 4px solid var(--blue-info);
    border-radius: var(--control-radius);
    box-shadow: var(--control-shadow-resting);
    display: grid;
    gap: .45rem;
    min-block-size: 7.25rem;
    padding: .75rem
}

.room-tile__top {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
    justify-content: space-between
}

.room-tile__top strong {
    color: var(--blue-dark);
    font-family: var(--font-header);
    font-size: 1.35rem;
    line-height: 1
}

.room-tile__top span {
    color: var(--grey-7);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: end;
    text-transform: uppercase
}

.room-tile__type {
    color: var(--blue-dark);
    font-weight: 700;
    line-height: 1.25
}

.room-tile__meta {
    color: var(--grey-7);
    font-size: .8125rem
}

.room-reservation-quick {
    background: #fff7ea;
    border-block-start: 1px solid var(--border);
    border-radius: var(--control-radius);
    margin-block-start: .15rem;
    min-inline-size: 0;
    padding: .55rem .6rem .6rem
}

.room-reservation-quick__header {
    align-items: flex-start;
    display: flex;
    gap: .45rem;
    justify-content: space-between
}

.room-reservation-quick__header .status-badge {
    flex: 0 1 auto;
    font-size: .64rem;
    line-height: 1.15;
    padding: .18rem .35rem;
    text-align: end
}

.room-reservation-quick__label {
    color: var(--grey-7);
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase
}

.room-reservation-quick__name {
    display: block;
    font-size: .95rem;
    line-height: 1.2;
    overflow-wrap: anywhere
}

.room-reservation-quick__body {
    display: grid;
    gap: .35rem;
    padding-block-start: .45rem
}

.room-reservation-quick__line {
    color: var(--grey-7);
    font-size: .78rem;
    line-height: 1.35;
    overflow-wrap: anywhere
}

.room-reservation-quick__term {
    color: var(--blue-dark);
    font-weight: 700
}

.room-reservation-quick__link {
    color: var(--blue-link);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none
}

.room-reservation-quick__link:hover {
    color: var(--blue);
    text-decoration: underline
}

.room-tile--available {
    border-block-start-color: var(--success-with-white)
}

.room-tile--reserved {
    background: #fffbf3;
    border-block-start-color: #d0933a
}

.room-tile--occupied {
    border-block-start-color: var(--blue)
}

.room-tile--dirty {
    background: #fff9d6;
    border-block-start-color: var(--warning)
}

.room-tile--out_of_service,
.room-tile--out_of_order {
    background: #fff1f0;
    border-block-start-color: var(--danger-with-white)
}

.floor-empty {
    align-items: center;
    background: var(--grey-lighter);
    border: 1px dashed var(--border-strong);
    border-radius: var(--control-radius);
    color: var(--grey-7);
    display: flex;
    min-block-size: 5rem;
    padding: 1rem
}

@media (width<=700px) {
    .floor-row {
        grid-template-columns: 1fr
    }

    .floor-label {
        align-items: center;
        grid-template-columns: auto auto 1fr;
        justify-items: start;
        min-block-size: auto;
        text-align: start
    }

    .floor-label__count {
        justify-self: end
    }
}

.detail-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.detail-subtabs {
    align-items: center;
    border-block-end: 1px solid var(--border);
    display: flex;
    gap: .25rem;
    overflow: auto hidden
}

.detail-subtabs a {
    border-block-end: 3px solid transparent;
    color: var(--grey-7);
    font-weight: 700;
    padding: .5rem .75rem;
    text-decoration: none;
    white-space: nowrap
}

.detail-subtabs a:hover {
    color: var(--blue)
}

.detail-subtabs a.is-active {
    border-block-end-color: var(--warning);
    color: var(--blue-dark)
}

.reservation-detail-shell {
    gap: 1rem
}

.reservation-detail-layout {
    gap: .75rem
}

.reservation-detail-shell .box {
    padding: 1rem
}

.reservation-detail-shell .section-header {
    margin-block-end: .65rem
}

.reservation-detail-shell .section-header h2 {
    font-size: 1.2rem;
    margin-block-end: .1rem
}

.reservation-detail-shell .definition-grid {
    gap: .65rem;
    grid-template-columns: repeat(auto-fit,minmax(10rem,1fr))
}

.reservation-detail-shell .definition-grid div {
    padding-block-start: .5rem
}

.reservation-detail-shell .compact-table {
    font-size: .875rem;
    min-inline-size: 0;
    width: 100%
}

.reservation-detail-shell .compact-table th,
.reservation-detail-shell .compact-table td {
    padding: .45rem .55rem
}

.detail-panel-wide {
    grid-column: 1 / -1
}

.definition-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit,minmax(12rem,1fr))
}

.definition-grid div {
    border-block-start: 1px solid var(--border);
    padding-block-start: .75rem
}

.definition-grid dt {
    color: var(--grey-7);
    font-size: .8125rem;
    font-weight: 700;
    margin-block-end: .2rem;
    text-transform: uppercase
}

.definition-grid dd {
    color: var(--blue-dark);
    font-weight: 700
}

.detail-subsection {
    margin-block-start: 1.5rem
}

.detail-subsection h3 {
    color: var(--blue-dark);
    margin-block-end: .75rem
}

.stacked-line {
    display: block
}

.note-block {
    background: var(--light-sand);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    margin: 0;
    padding: 1rem
}

@media (width<=900px) {
    .detail-layout {
        grid-template-columns: 1fr
    }
}

@media (width<=700px) {
    .page-header,
    .section-header,
    .billing-rates-header {
        display: grid
    }
}

.columns {
    grid-template-columns: fit-content(27%) 1fr;
        gap: .75rem;
        display: grid;
}

.main-sidebar {
    background-color: #f5f5f5;
    height: 100%;
    padding-inline: .75rem;
    overflow: visible;
}

.list-with-sidebar {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(13rem,16rem) minmax(0,1fr)
}

.property-setup-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(13rem,16rem) minmax(0,1fr)
}

.property-setup-content {
    display: grid;
    gap: 1.5rem;
    min-width: 0
}

.property-setup-content > .box {
    margin-bottom: 0
}

.property-setup-section {
    scroll-margin-top: 1rem
}

.room-status-cell {
    display: grid;
    gap: .5rem;
    min-inline-size: 14rem
}

#main .box form.room-status-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    max-width: none
}

#main .room-status-form select {
    min-height: 2rem;
    min-inline-size: 11rem;
    padding-block: .35rem
}

#main .room-status-form button {
    min-height: 2rem;
    padding: .35rem .75rem
}

.floor-map--setup {
    gap: .75rem
}

.floor-row--setup {
    background: var(--surface);
    padding: .875rem
}

.room-tile-grid--setup {
    grid-template-columns: repeat(auto-fill,minmax(14rem,1fr))
}

.room-tile--setup {
    gap: .55rem;
    min-block-size: auto
}

.room-tile--setup .status-badge {
    justify-self: end;
    white-space: normal
}

#main .box form.room-status-form.room-status-form--compact {
    align-items: stretch;
    display: grid;
    gap: .4rem;
    grid-template-columns: minmax(0,1fr) auto;
    margin-block-start: .2rem;
    max-width: none
}

#main .room-status-form--compact select {
    min-height: 2rem;
    min-inline-size: 0;
    padding-block: .35rem
}

#main .room-status-form--compact button {
    min-height: 2rem;
    padding: .35rem .6rem
}

.room-status-alert {
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    display: grid;
    gap: .2rem;
    margin-block: 0 1rem;
    max-inline-size: 42rem;
    padding: .75rem .9rem
}

.room-status-alert strong {
    color: inherit
}

.room-status-alert span {
    line-height: 1.4
}

.room-status-alert--success {
    background: #eef8ef;
    border-color: #008a0044;
    color: var(--success-with-white)
}

.room-status-alert--error {
    background: #fff4f3;
    border-color: #e3403966;
    color: var(--danger-with-white)
}

.room-status-feedback {
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    padding: .5rem .6rem
}

.room-status-feedback--success {
    background: #eef8ef;
    border-color: #008a0044;
    color: var(--success-with-white)
}

.room-status-feedback--error {
    background: #fff4f3;
    border-color: #e3403966;
    color: var(--danger-with-white)
}

.setup-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    box-shadow: var(--control-shadow-resting);
    display: grid;
    gap: .875rem;
    padding: 1rem;
    position: sticky;
    top: 1rem
}

.setup-sidebar__header h2 {
    color: var(--blue-dark);
    font-size: 1.125rem;
    line-height: 1.2
}

.setup-nav {
    display: grid;
    gap: .35rem
}

.setup-nav__item {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    color: var(--blue-dark);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    line-height: 1.25;
    min-height: 2.25rem;
    padding: .5rem .625rem;
    text-decoration: none
}

.setup-nav__item:hover,
.setup-nav__item:focus-visible {
    background: var(--grey-lighter);
    color: var(--blue-dark);
    text-decoration: none
}

.setup-nav__count {
    background: var(--light-sand);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--blue-dark);
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    min-inline-size: 1.75rem;
    padding: .1rem .45rem;
    text-align: center
}

.room-type-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    box-shadow: var(--control-shadow-resting);
    display: grid;
    gap: .875rem;
    padding: 1rem;
    position: sticky;
    top: 1rem
}

.room-type-sidebar__header {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between
}

.room-type-sidebar__header h2 {
    color: var(--blue-dark);
    font-size: 1.125rem;
    line-height: 1.2
}

.room-type-nav {
    display: grid;
    gap: .35rem
}

.room-type-nav__item {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    color: var(--blue-dark);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    line-height: 1.25;
    min-height: 2.25rem;
    padding: .5rem .625rem;
    text-decoration: none
}

.room-type-nav__item:hover {
    background: var(--grey-lighter);
    color: var(--blue-dark);
    text-decoration: none
}

.room-type-nav__item.is-active {
    background: var(--blue);
    border-color: var(--blue-dark);
    color: #fff
}

.room-type-nav__count {
    background: var(--grey-lighter);
    border-radius: 999px;
    color: var(--blue-dark);
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    min-inline-size: 1.75rem;
    padding: .1rem .45rem;
    text-align: center
}

.room-type-nav__item.is-active .room-type-nav__count {
    background: #fff
}

.room-type-sidebar__empty {
    color: var(--grey-7);
    font-size: .875rem;
    margin: 0
}

.room-type-sidebar__action {
    align-items: center;
    border: 1px solid var(--blue-link);
    border-radius: var(--control-radius);
    color: var(--blue-link);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 2.25rem;
    padding: .45rem .75rem;
    text-align: center;
    text-decoration: none
}

.room-type-sidebar__action:hover {
    background: var(--grey-lighter);
    color: var(--blue);
    text-decoration: none
}

@media (width<=900px) {
    .list-with-sidebar,
    .property-setup-layout {
        grid-template-columns: 1fr
    }

    .room-type-sidebar,
    .setup-sidebar {
        position: static
    }
}

button.banner-button {
    vertical-align: middle;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: auto;
    height: auto;
    min-height: 2.572em;
    padding: 4px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.715em;
    text-decoration: none;
    display: inline-flex;
    position: relative;
}


.top-labels {
    margin: 2rem 0;
}



table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-collapse: separate;
    border-radius: var(--control-radius);
    border-spacing: 0;
    box-shadow: var(--control-shadow-resting);
    color: var(--color-text);
    inline-size: 100%;
    line-height: 1.45;
    margin-block-start: 1rem;
    min-inline-size: 42rem;
    overflow: hidden;
    text-align: left
}

.reservation-table {
    font-size: .9375rem;
    min-inline-size: 58rem;
    table-layout: fixed
}

.reservation-table th,
.reservation-table td {
    padding: .65rem .75rem
}

.reservation-table tbody tr {
    transition: background-color .15s var(--ease-2)
}

.reservation-table .record-link {
    display: inline-flex
}

.reservation-col-number {
    width: 18%
}

.reservation-col-guest {
    width: 25%
}

.reservation-col-stay {
    width: 22%
}

.reservation-col-room {
    width: 24%
}

.reservation-col-actions {
    width: 11%
}

.reservation-table .cell-stack {
    gap: .25rem
}

.reservation-table .detail-muted {
    font-size: .75rem
}

.reservation-table .pill,
.reservation-table .status-badge {
    font-size: .6875rem;
    padding: .2rem .45rem
}

.reservation-number-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

.reservation-serial,
.profile-serial {
    align-items: center;
    background: var(--light-sand);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: .8125rem;
    justify-content: center;
    min-inline-size: 2rem;
    padding: .15rem .45rem
}

.profile-table {
    font-size: .9375rem;
    min-inline-size: 58rem;
    table-layout: fixed
}

.profile-table th,
.profile-table td {
    padding: .65rem .75rem
}

.profile-table .record-link {
    display: inline-flex
}

.profile-table .cell-stack {
    gap: .25rem
}

.profile-table .detail-muted {
    font-size: .75rem
}

.profile-table .pill,
.profile-table .status-badge {
    font-size: .6875rem;
    padding: .2rem .45rem
}

.billing-rates-table {
    min-inline-size: 58rem;
    table-layout: fixed
}

.billing-rates-table th,
.billing-rates-table td {
    padding: .7rem .8rem
}

.billing-rate-col-code {
    width: 11%
}

.billing-rate-col-room {
    width: 15%
}

.billing-rate-col-description {
    width: 20%
}

.billing-rate-col-price {
    width: 13%
}

.billing-rate-col-tax-sac {
    width: 21%
}

.billing-rate-col-ac {
    width: 12%
}

.billing-rate-col-actions {
    width: 8%
}

.billing-rates-table th {
    white-space: normal;
    vertical-align: bottom;
}

.billing-rate-price {
    color: var(--blue-dark);
    font-weight: 700;
    white-space: nowrap
}

.billing-rate-tax-sac {
    display: grid;
    gap: .35rem
}

.billing-rate-sac {
    color: var(--grey-7);
    display: inline-flex;
    font-size: .6875rem;
    font-weight: 700;
    gap: .25rem;
    line-height: 1.2;
    text-transform: uppercase
}

.billing-rate-sac strong {
    color: var(--blue-dark)
}

.billing-rate-tax-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem
}

.billing-rate-tax-pill {
    align-items: center;
    background: var(--light-sand);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--blue-dark);
    display: inline-flex;
    font-size: .6875rem;
    font-weight: 700;
    gap: .25rem;
    line-height: 1.1;
    max-inline-size: 100%;
    padding: .2rem .4rem
}

.billing-rate-tax-pill span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.billing-rate-tax-pill strong {
    flex: 0 0 auto
}

.room-type-table,
.tax-table {
    font-size: .9375rem;
    table-layout: fixed
}

.room-type-table {
    min-inline-size: 42rem
}

.tax-table {
    min-inline-size: 58rem
}

.room-type-table th,
.room-type-table td,
.tax-table th,
.tax-table td {
    padding: .65rem .75rem
}

.room-type-col-name {
    width: 22%
}

.room-type-col-occupancy {
    width: 14%
}

.room-type-col-rooms {
    width: 10%
}

.room-type-col-features {
    width: 44%
}

.room-type-col-actions {
    width: 10%
}


.tax-col-name {
    width: 17%
}

.tax-col-component {
    width: 14%
}

.tax-col-percentage {
    width: 10%
}

.tax-col-status {
    width: 10%
}

.tax-col-applies {
    width: 18%
}

.tax-col-description {
    width: 23%
}

.tax-col-actions {
    width: 8%
}

.tax-table .contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem
}

.tax-table .pill,
.tax-table .status-badge {
    font-size: .6875rem;
    padding: .2rem .45rem
}

.tax-table .detail-muted {
    font-size: .75rem
}

.profile-col-number {
    width: 7%
}

.profile-col-profile {
    width: 20%
}

.profile-col-contact {
    width: 23%
}

.profile-col-identity {
    width: 16%
}

.profile-col-address {
    width: 23%
}

.profile-col-actions {
    width: 11%
}

.property-switcher-table {
    table-layout: fixed
}

.property-switcher-table tr.is-active td {
    background: #edf8ee
}

.property-col-property {
    width: 42%
}

.property-col-role {
    width: 20%
}

.property-col-rooms {
    width: 13%
}

.property-col-actions {
    width: 25%
}

.property-switcher-table td:last-child {
    text-align: end
}

.property-action-cell {
    display: flex;
    justify-content: flex-end
}

#main .property-switcher-table .property-action-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    max-width: none;
    width: 8.75rem
}

.property-select-action,
.property-open-action {
    align-items: center;
    border-radius: var(--control-radius);
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 2.25rem;
    padding: .45rem .75rem;
    text-align: center;
    text-decoration: none;
    width: 8.75rem
}

#main .property-switcher-table .property-select-action {
    width: 100%
}

.property-select-action {
    background: var(--yellow);
    border: 0;
    color: var(--blue-dark)
}

.property-select-action:hover {
    background: var(--button-background-hover)
}

.property-open-action {
    background: var(--blue-link);
    color: #fff
}

.property-open-action:hover {
    background: var(--blue);
    color: #fff;
    text-decoration: none
}

.cell-stack {
    display: grid;
    gap: .35rem
}

.booking-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.row-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem
}

.contact-list {
    display: grid;
    gap: .45rem
}

.contact-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem
}

.contact-line strong {
    color: var(--blue-dark)
}

.danger-action {
    color: var(--danger-with-white)
}

.danger-action:hover {
    color: var(--danger)
}

.profile-editor-shell {
    max-width: 96rem
}

.profile-detail-shell {
    max-width: 110rem
}

.profile-compact-stats {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit,minmax(9.5rem,1fr));
    margin-block: .75rem 1rem
}

.profile-compact-stats .metric-card {
    border-inline-start-width: 3px;
    gap: .15rem;
    padding: .75rem
}

.profile-compact-stats .metric-value {
    font-size: 1rem;
    overflow-wrap: anywhere
}

.profile-compact-layout {
    align-items: start;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr)
}

.profile-compact-panel {
    overflow-x: auto;
    padding: .85rem
}

.profile-identity-panel {
    grid-column: span 2
}

.profile-compact-section-header {
    align-items: center;
    gap: .75rem;
    margin-block-end: .65rem
}

.profile-compact-section-header h2 {
    font-size: 1.05rem;
    margin: 0
}

.profile-compact-definition {
    gap: .55rem;
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.profile-compact-definition div {
    padding-block-start: .5rem
}

.profile-compact-definition dt {
    font-size: .72rem;
    margin-block-end: .15rem
}

.profile-compact-definition dd {
    font-size: .9rem;
    overflow-wrap: anywhere
}

.profile-compact-table {
    font-size: .875rem;
    margin-block-start: .5rem;
    min-inline-size: 100%
}

.profile-compact-table th,
.profile-compact-table td {
    padding: .55rem .65rem
}

.profile-inline-section {
    margin-block-start: .75rem
}

.profile-inline-section h3 {
    color: var(--blue-dark);
    font-size: .95rem;
    margin: 0 0 .35rem
}

.profile-contact-list {
    display: grid;
    gap: .45rem
}

.profile-contact-row {
    align-items: center;
    border-block-start: 1px solid var(--border);
    display: grid;
    gap: .5rem;
    grid-template-columns: 4.5rem minmax(0,1fr) auto;
    padding-block-start: .55rem
}

.profile-contact-type {
    color: var(--grey-7);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase
}

.profile-contact-value {
    color: var(--blue-dark);
    font-size: .9rem;
    overflow-wrap: anywhere
}

.profile-reservations-panel,
.profile-documents-panel {
    grid-column: 1 / -1
}

.profile-detail-table {
    min-inline-size: 28rem
}

.profile-reservations-panel .profile-detail-table {
    min-inline-size: 58rem
}

.profile-document-list {
    display: grid;
    gap: .75rem
}

.profile-document-card {
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(14rem,.42fr) minmax(0,1fr);
    overflow: hidden;
    padding: .75rem
}

.profile-document-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    min-block-size: 18rem;
    overflow: hidden
}

.profile-document-preview--split {
    display: flex;
    gap: 0;
}

.document-preview-side {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
}

.document-preview-side--half {
    border-inline-start: 1px solid var(--border);
}

.doc-side-label {
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--grey);
    padding: .25rem 0;
    background: var(--grey-lighter);
    border-block-end: 1px solid var(--border);
}

.doc-preview-link {
    display: block;
    flex: 1;
}

.profile-document-preview img,
.doc-preview-link img {
    block-size: 18rem;
    border: 0;
    display: block;
    inline-size: 100%;
    object-fit: contain;
    transition: opacity .15s;
}

.doc-preview-link:hover img {
    opacity: .85;
}

.doc-pdf-placeholder {
    align-items: center;
    background: var(--grey-lighter);
    block-size: 100%;
    color: var(--grey-dark);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    min-block-size: 18rem;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}

.doc-pdf-placeholder:hover {
    background: var(--grey-light);
}

.doc-pdf-label {
    background: var(--danger);
    border-radius: 3px;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 6px;
    text-transform: uppercase;
}

.doc-pdf-open {
    color: var(--blue);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: underline;
}

.profile-document-placeholder {
    align-items: center;
    block-size: 100%;
    color: var(--grey-7);
    display: flex;
    justify-content: center;
    min-block-size: 18rem;
    text-align: center
}

.profile-document-meta {
    align-content: start;
    display: grid;
    gap: .55rem;
    min-inline-size: 0
}

.profile-document-meta h3 {
    color: var(--blue-dark);
    font-family: var(--font-sans);
    font-size: 1rem;
    margin: 0
}

.profile-document-specifics {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.document-file-name {
    color: var(--grey-7);
    display: block;
    font-size: .8125rem;
    margin-block-start: .25rem;
    overflow-wrap: anywhere
}

@media (width<=900px) {
    .profile-compact-layout {
        grid-template-columns: 1fr
    }

    .profile-identity-panel {
        grid-column: auto
    }

    .profile-document-card {
        grid-template-columns: 1fr
    }
}

@media (width<=620px) {
    .profile-document-preview,
    .profile-document-placeholder {
        min-block-size: 16rem
    }

    .profile-document-preview img,
    .doc-preview-link img,
    .doc-pdf-embed {
        block-size: 16rem
    }

    .profile-compact-definition,
    .profile-document-specifics {
        grid-template-columns: 1fr
    }

    .profile-contact-row {
        grid-template-columns: 1fr
    }
}

.empty-copy {
    color: var(--grey-7);
    margin: 0
}

.profile-editor-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1fr) minmax(22rem,28rem)
}

.profile-editor-layout > .box {
    min-inline-size: 0
}

#main .profile-form-panel form {
    max-width: none
}

.profile-form-section {
    background: var(--surface);
    display: grid;
    gap: 1rem
}

.profile-form-section + .profile-form-section {
    margin-block-start: .5rem
}

.profile-field-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.contact-method-list,
.identity-document-list {
    display: grid;
    gap: 1rem
}

.contact-method-row,
.identity-document-row {
    border-block-end: 1px solid var(--border);
    display: grid;
    gap: .75rem;
    padding-block-end: 1rem
}

.contact-method-row:last-child,
.identity-document-row:last-child {
    border-block-end: 0;
    padding-block-end: 0
}

.contact-method-actions,
.identity-document-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end
}

.contact-method-delete-field,
.identity-document-delete-field {
    display: none
}

.profile-summary-card {
    overflow-x: visible;
    position: sticky;
    top: 1rem
}

.profile-checklist-panel {
    border-block-end: 1px solid var(--border);
    display: grid;
    gap: .75rem;
    margin-block-end: 1rem;
    padding-block-end: 1rem
}

.profile-checklist-panel h3 {
    color: var(--blue-dark);
    font-size: 1rem;
    margin: 0
}

.profile-checklist {
    display: grid;
    gap: .625rem;
    list-style: none;
    margin: 0;
    padding: 0
}

.profile-checklist-item {
    align-items: center;
    color: var(--grey-7);
    display: grid;
    gap: .625rem;
    grid-template-columns: auto minmax(0,1fr) auto
}

.profile-checklist-marker {
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    block-size: 1rem;
    display: inline-block;
    inline-size: 1rem;
    position: relative
}

.profile-checklist-marker::after {
    background: var(--success-with-white);
    border-radius: inherit;
    block-size: .5rem;
    content: "";
    inline-size: .5rem;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%,-50%)
}

.profile-checklist-item strong {
    color: var(--grey-7);
    font-size: .8125rem;
    text-transform: uppercase
}

.profile-checklist-item.is-complete {
    color: var(--blue-dark)
}

.profile-checklist-item.is-complete .profile-checklist-marker {
    border-color: var(--success-with-white)
}

.profile-checklist-item.is-complete .profile-checklist-marker::after {
    opacity: 1
}

.profile-checklist-item.is-complete strong {
    color: var(--success-with-white)
}

.profile-summary-grid {
    grid-template-columns: 1fr
}

.profile-summary-grid dd {
    overflow-wrap: anywhere
}

@media (width<=1000px) {
    .profile-editor-layout {
        grid-template-columns: 1fr
    }

    .profile-summary-card {
        position: static
    }
}

@media (width<=760px) {
    .profile-field-grid {
        grid-template-columns: 1fr
    }
}

.profile-delete-shell {
    max-inline-size: 76rem
}

.delete-blocker-panel {
    border-block-start: 4px solid var(--danger-with-white)
}

.delete-callout {
    background: #fff5f4;
    border: 1px solid #e0312740;
    border-inline-start: 4px solid var(--danger-with-white);
    border-radius: var(--control-radius);
    display: grid;
    gap: .25rem;
    margin-block: 1rem;
    padding: 1rem
}

.delete-callout strong {
    color: var(--danger-with-white)
}

.delete-callout p {
    margin: 0
}

.blocking-reservation-table {
    min-inline-size: 48rem
}

.delete-profile-summary {
    margin-block-start: 1rem
}

#main .delete-confirmation-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block-start: 1.5rem
}

.compact-table {
    font-size: .9375rem;
    min-inline-size: 30rem
}

.compact-table th,
.compact-table td {
    padding: .625rem .75rem
}

.expense-formset-table {
    min-inline-size: 58rem
}

.charge-formset-table {
    min-inline-size: 0;
    table-layout: fixed;
    inline-size: 100%
}

.charge-formset-table th:last-child,
.charge-formset-table td:last-child {
    inline-size: 7rem
}

.expense-formset-table textarea {
    min-height: 4rem
}

.expense-table {
    min-inline-size: 66rem;
    table-layout: fixed
}

.expense-table th,
.expense-table td {
    padding: 1rem 1.125rem
}

.expense-col-date {
    width: 13%
}

.expense-col-particular {
    width: 20%
}

.expense-col-amount {
    width: 14%
}

.expense-col-created-by {
    width: 19%
}

.expense-col-note {
    width: 24%
}

.expense-col-actions {
    width: 10%
}

.expense-amount {
    color: var(--blue-dark);
    font-weight: 700;
    white-space: nowrap
}

.expense-note {
    color: var(--grey-dark);
    overflow-wrap: anywhere
}

.filter-grid {
    display: grid;
    gap: 1rem
}

@media (width>=800px) {
    .filter-grid {
        grid-template-columns: 2fr 1fr 1fr
    }
}

caption {
    color: var(--blue-dark);
    font-family: var(--font-header);
    font-size: 1.125rem;
    font-weight: var(--font-weight-header);
    padding-block-end: .75rem;
    text-align: left
}

thead {
    background: var(--table-header-background);
    color: #fff
}

tfoot {
    background: var(--light-sand);
    color: var(--blue-dark);
    font-weight: 700
}

th,
td {
    border-block-end: 1px solid var(--border);
    padding: .875rem 1rem;
    vertical-align: top
}

th {
    border-block-end-color: var(--table-header-border);
    color: #fff;
    font-family: var(--font-header);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap
}

td {
    background: var(--surface)
}

tbody tr:nth-child(even) td {
    background: var(--table-row-stripe)
}

tbody tr:hover td {
    background: var(--table-row-hover)
}

tbody tr:last-child td,
tfoot tr:last-child td,
tfoot tr:last-child th {
    border-block-end: 0
}

td strong {
    color: var(--blue-dark);
    font-weight: 700
}

td a {
    font-weight: 700
}

td p:last-child {
    margin-block-end: 0
}

@media (width<=700px) {
    table {
        font-size: .9375rem;
        min-inline-size: 36rem
    }

    th,
    td {
        padding: .625rem .75rem
    }
}

.asteriskField {
    color: var(--danger);
    font-weight: 700
}

#main .ts-wrapper {
    max-width: 44rem;
    width: 100%
}

#main .ts-wrapper.multi .ts-control > div,
#main .ts-wrapper.single .ts-control .item {
    background: var(--blue);
    border-radius: 4px;
    color: #fff;
    padding: .25rem .5rem;
}

#main .ts-control {
    background: var(--control-background);
    border-color: var(--control-border);
    border-radius: var(--control-radius);
    box-shadow: var(--control-shadow-resting);
    min-height: var(--control-height);
}

#main .ts-control:hover {
    border-color: var(--control-border-hover)
}

#main .ts-control.focus {
    border-color: var(--control-border-focus);
    box-shadow: var(--control-shadow-focus);
}

#main .ts-dropdown {
    border-color: var(--control-border);
    border-radius: var(--control-radius);
    box-shadow: 0 8px 20px #0a0a0a1a;
    overflow: hidden;
}

#main .ts-dropdown .active {
    background: var(--grey-lighter);
    color: var(--blue-dark)
}

.tom-select-profile-option {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}

.tom-select-profile-name {
    font-weight: 600;
}

.tom-select-profile-phone {
    color: var(--grey-7);
    font-size: .875rem;
    white-space: nowrap;
}

.ts-wrapper .item .tom-select-profile-phone {
    color: #ffffffcc;
}