/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f0f0f0;
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #bfbfbf;
    --border: #d9d9d9;
    --divider: #f0f0f0;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.65);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    --nav-active-bg: rgba(22, 119, 255, 0.12);
    --nav-active-border: rgba(22, 119, 255, 0.35);
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring */
    --focus: rgba(22, 119, 255, 0.35);
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #2a2f3a;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        --nav-active-bg: rgba(64, 150, 255, 0.22);
        --nav-active-border: rgba(64, 150, 255, 0.55);
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        --focus: rgba(64, 150, 255, 0.45);
        --ps-thumb: rgba(255,255,255,0.22);
    }

/* latin-ext */
@font-face {
    font-family: 'Crete Round';
    font-style: italic;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/creteround/v9/55xqey1sJNPjPiv1ZZZrxK1-4bHoLlxN.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Crete Round';
    font-style: italic;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/creteround/v9/55xqey1sJNPjPiv1ZZZrxK1-4b_oLg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:"Glyphicons Halflings";src:url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot);src:url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2) format("woff2"),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff) format("woff"),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf) format("truetype"),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg")}.glyphicon{position:relative;top:1px;display:inline-block;font-family:"Glyphicons Halflings";font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\002a"}.glyphicon-plus:before{content:"\002b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:focus,a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:focus,a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:focus,a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:focus,a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:"\2014 \00A0"}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:""}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:"\00A0 \2014"}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row-no-gutters{margin-right:0;margin-left:0}.row-no-gutters [class*=col-]{padding-right:0;padding-left:0}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=checkbox]:focus,input[type=file]:focus,input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],.input-group-sm input[type=time],input[type=date].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm,input[type=time].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],.input-group-lg input[type=time],input[type=date].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg,input[type=time].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);opacity:.65;-webkit-box-shadow:none;box-shadow:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.focus,.btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;background-image:none;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;background-image:none;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;background-image:none;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;background-image:none;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;background-image:none;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;background-image:none;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-right:15px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-right:-15px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);margin-top:8px;margin-bottom:8px}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0%;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out,-o-transform .3s ease-out}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover>.arrow{border-width:11px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out,-o-transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);left:0}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);left:0}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);left:0}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;outline:0;filter:alpha(opacity=90);opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:"\2039"}.carousel-control .icon-next:before{content:"\203a"}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0);src:url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}

@font-face {
	font-family: 'themify';
	src:url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/themify-icons/fonts/themify.eot);
	src:url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/themify-icons/fonts/themify.eot?#iefix) format('embedded-opentype'),
		url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/themify-icons/fonts/themify.woff) format('woff'),
		url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/themify-icons/fonts/themify.ttf) format('truetype'),
		url(/assets/vendor/portal-runtime/26.25082026.14/bower_components/themify-icons/fonts/themify.svg) format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="ti-"], [class*=" ti-"] {
	font-family: 'themify';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ti-wand:before {
	content: "\e600";
}
.ti-volume:before {
	content: "\e601";
}
.ti-user:before {
	content: "\e602";
}
.ti-unlock:before {
	content: "\e603";
}
.ti-unlink:before {
	content: "\e604";
}
.ti-trash:before {
	content: "\e605";
}
.ti-thought:before {
	content: "\e606";
}
.ti-target:before {
	content: "\e607";
}
.ti-tag:before {
	content: "\e608";
}
.ti-tablet:before {
	content: "\e609";
}
.ti-star:before {
	content: "\e60a";
}
.ti-spray:before {
	content: "\e60b";
}
.ti-signal:before {
	content: "\e60c";
}
.ti-shopping-cart:before {
	content: "\e60d";
}
.ti-shopping-cart-full:before {
	content: "\e60e";
}
.ti-settings:before {
	content: "\e60f";
}
.ti-search:before {
	content: "\e610";
}
.ti-zoom-in:before {
	content: "\e611";
}
.ti-zoom-out:before {
	content: "\e612";
}
.ti-cut:before {
	content: "\e613";
}
.ti-ruler:before {
	content: "\e614";
}
.ti-ruler-pencil:before {
	content: "\e615";
}
.ti-ruler-alt:before {
	content: "\e616";
}
.ti-bookmark:before {
	content: "\e617";
}
.ti-bookmark-alt:before {
	content: "\e618";
}
.ti-reload:before {
	content: "\e619";
}
.ti-plus:before {
	content: "\e61a";
}
.ti-pin:before {
	content: "\e61b";
}
.ti-pencil:before {
	content: "\e61c";
}
.ti-pencil-alt:before {
	content: "\e61d";
}
.ti-paint-roller:before {
	content: "\e61e";
}
.ti-paint-bucket:before {
	content: "\e61f";
}
.ti-na:before {
	content: "\e620";
}
.ti-mobile:before {
	content: "\e621";
}
.ti-minus:before {
	content: "\e622";
}
.ti-medall:before {
	content: "\e623";
}
.ti-medall-alt:before {
	content: "\e624";
}
.ti-marker:before {
	content: "\e625";
}
.ti-marker-alt:before {
	content: "\e626";
}
.ti-arrow-up:before {
	content: "\e627";
}
.ti-arrow-right:before {
	content: "\e628";
}
.ti-arrow-left:before {
	content: "\e629";
}
.ti-arrow-down:before {
	content: "\e62a";
}
.ti-lock:before {
	content: "\e62b";
}
.ti-location-arrow:before {
	content: "\e62c";
}
.ti-link:before {
	content: "\e62d";
}
.ti-layout:before {
	content: "\e62e";
}
.ti-layers:before {
	content: "\e62f";
}
.ti-layers-alt:before {
	content: "\e630";
}
.ti-key:before {
	content: "\e631";
}
.ti-import:before {
	content: "\e632";
}
.ti-image:before {
	content: "\e633";
}
.ti-heart:before {
	content: "\e634";
}
.ti-heart-broken:before {
	content: "\e635";
}
.ti-hand-stop:before {
	content: "\e636";
}
.ti-hand-open:before {
	content: "\e637";
}
.ti-hand-drag:before {
	content: "\e638";
}
.ti-folder:before {
	content: "\e639";
}
.ti-flag:before {
	content: "\e63a";
}
.ti-flag-alt:before {
	content: "\e63b";
}
.ti-flag-alt-2:before {
	content: "\e63c";
}
.ti-eye:before {
	content: "\e63d";
}
.ti-export:before {
	content: "\e63e";
}
.ti-exchange-vertical:before {
	content: "\e63f";
}
.ti-desktop:before {
	content: "\e640";
}
.ti-cup:before {
	content: "\e641";
}
.ti-crown:before {
	content: "\e642";
}
.ti-comments:before {
	content: "\e643";
}
.ti-comment:before {
	content: "\e644";
}
.ti-comment-alt:before {
	content: "\e645";
}
.ti-close:before {
	content: "\e646";
}
.ti-clip:before {
	content: "\e647";
}
.ti-angle-up:before {
	content: "\e648";
}
.ti-angle-right:before {
	content: "\e649";
}
.ti-angle-left:before {
	content: "\e64a";
}
.ti-angle-down:before {
	content: "\e64b";
}
.ti-check:before {
	content: "\e64c";
}
.ti-check-box:before {
	content: "\e64d";
}
.ti-camera:before {
	content: "\e64e";
}
.ti-announcement:before {
	content: "\e64f";
}
.ti-brush:before {
	content: "\e650";
}
.ti-briefcase:before {
	content: "\e651";
}
.ti-bolt:before {
	content: "\e652";
}
.ti-bolt-alt:before {
	content: "\e653";
}
.ti-blackboard:before {
	content: "\e654";
}
.ti-bag:before {
	content: "\e655";
}
.ti-move:before {
	content: "\e656";
}
.ti-arrows-vertical:before {
	content: "\e657";
}
.ti-arrows-horizontal:before {
	content: "\e658";
}
.ti-fullscreen:before {
	content: "\e659";
}
.ti-arrow-top-right:before {
	content: "\e65a";
}
.ti-arrow-top-left:before {
	content: "\e65b";
}
.ti-arrow-circle-up:before {
	content: "\e65c";
}
.ti-arrow-circle-right:before {
	content: "\e65d";
}
.ti-arrow-circle-left:before {
	content: "\e65e";
}
.ti-arrow-circle-down:before {
	content: "\e65f";
}
.ti-angle-double-up:before {
	content: "\e660";
}
.ti-angle-double-right:before {
	content: "\e661";
}
.ti-angle-double-left:before {
	content: "\e662";
}
.ti-angle-double-down:before {
	content: "\e663";
}
.ti-zip:before {
	content: "\e664";
}
.ti-world:before {
	content: "\e665";
}
.ti-wheelchair:before {
	content: "\e666";
}
.ti-view-list:before {
	content: "\e667";
}
.ti-view-list-alt:before {
	content: "\e668";
}
.ti-view-grid:before {
	content: "\e669";
}
.ti-uppercase:before {
	content: "\e66a";
}
.ti-upload:before {
	content: "\e66b";
}
.ti-underline:before {
	content: "\e66c";
}
.ti-truck:before {
	content: "\e66d";
}
.ti-timer:before {
	content: "\e66e";
}
.ti-ticket:before {
	content: "\e66f";
}
.ti-thumb-up:before {
	content: "\e670";
}
.ti-thumb-down:before {
	content: "\e671";
}
.ti-text:before {
	content: "\e672";
}
.ti-stats-up:before {
	content: "\e673";
}
.ti-stats-down:before {
	content: "\e674";
}
.ti-split-v:before {
	content: "\e675";
}
.ti-split-h:before {
	content: "\e676";
}
.ti-smallcap:before {
	content: "\e677";
}
.ti-shine:before {
	content: "\e678";
}
.ti-shift-right:before {
	content: "\e679";
}
.ti-shift-left:before {
	content: "\e67a";
}
.ti-shield:before {
	content: "\e67b";
}
.ti-notepad:before {
	content: "\e67c";
}
.ti-server:before {
	content: "\e67d";
}
.ti-quote-right:before {
	content: "\e67e";
}
.ti-quote-left:before {
	content: "\e67f";
}
.ti-pulse:before {
	content: "\e680";
}
.ti-printer:before {
	content: "\e681";
}
.ti-power-off:before {
	content: "\e682";
}
.ti-plug:before {
	content: "\e683";
}
.ti-pie-chart:before {
	content: "\e684";
}
.ti-paragraph:before {
	content: "\e685";
}
.ti-panel:before {
	content: "\e686";
}
.ti-package:before {
	content: "\e687";
}
.ti-music:before {
	content: "\e688";
}
.ti-music-alt:before {
	content: "\e689";
}
.ti-mouse:before {
	content: "\e68a";
}
.ti-mouse-alt:before {
	content: "\e68b";
}
.ti-money:before {
	content: "\e68c";
}
.ti-microphone:before {
	content: "\e68d";
}
.ti-menu:before {
	content: "\e68e";
}
.ti-menu-alt:before {
	content: "\e68f";
}
.ti-map:before {
	content: "\e690";
}
.ti-map-alt:before {
	content: "\e691";
}
.ti-loop:before {
	content: "\e692";
}
.ti-location-pin:before {
	content: "\e693";
}
.ti-list:before {
	content: "\e694";
}
.ti-light-bulb:before {
	content: "\e695";
}
.ti-Italic:before {
	content: "\e696";
}
.ti-info:before {
	content: "\e697";
}
.ti-infinite:before {
	content: "\e698";
}
.ti-id-badge:before {
	content: "\e699";
}
.ti-hummer:before {
	content: "\e69a";
}
.ti-home:before {
	content: "\e69b";
}
.ti-help:before {
	content: "\e69c";
}
.ti-headphone:before {
	content: "\e69d";
}
.ti-harddrives:before {
	content: "\e69e";
}
.ti-harddrive:before {
	content: "\e69f";
}
.ti-gift:before {
	content: "\e6a0";
}
.ti-game:before {
	content: "\e6a1";
}
.ti-filter:before {
	content: "\e6a2";
}
.ti-files:before {
	content: "\e6a3";
}
.ti-file:before {
	content: "\e6a4";
}
.ti-eraser:before {
	content: "\e6a5";
}
.ti-envelope:before {
	content: "\e6a6";
}
.ti-download:before {
	content: "\e6a7";
}
.ti-direction:before {
	content: "\e6a8";
}
.ti-direction-alt:before {
	content: "\e6a9";
}
.ti-dashboard:before {
	content: "\e6aa";
}
.ti-control-stop:before {
	content: "\e6ab";
}
.ti-control-shuffle:before {
	content: "\e6ac";
}
.ti-control-play:before {
	content: "\e6ad";
}
.ti-control-pause:before {
	content: "\e6ae";
}
.ti-control-forward:before {
	content: "\e6af";
}
.ti-control-backward:before {
	content: "\e6b0";
}
.ti-cloud:before {
	content: "\e6b1";
}
.ti-cloud-up:before {
	content: "\e6b2";
}
.ti-cloud-down:before {
	content: "\e6b3";
}
.ti-clipboard:before {
	content: "\e6b4";
}
.ti-car:before {
	content: "\e6b5";
}
.ti-calendar:before {
	content: "\e6b6";
}
.ti-book:before {
	content: "\e6b7";
}
.ti-bell:before {
	content: "\e6b8";
}
.ti-basketball:before {
	content: "\e6b9";
}
.ti-bar-chart:before {
	content: "\e6ba";
}
.ti-bar-chart-alt:before {
	content: "\e6bb";
}
.ti-back-right:before {
	content: "\e6bc";
}
.ti-back-left:before {
	content: "\e6bd";
}
.ti-arrows-corner:before {
	content: "\e6be";
}
.ti-archive:before {
	content: "\e6bf";
}
.ti-anchor:before {
	content: "\e6c0";
}
.ti-align-right:before {
	content: "\e6c1";
}
.ti-align-left:before {
	content: "\e6c2";
}
.ti-align-justify:before {
	content: "\e6c3";
}
.ti-align-center:before {
	content: "\e6c4";
}
.ti-alert:before {
	content: "\e6c5";
}
.ti-alarm-clock:before {
	content: "\e6c6";
}
.ti-agenda:before {
	content: "\e6c7";
}
.ti-write:before {
	content: "\e6c8";
}
.ti-window:before {
	content: "\e6c9";
}
.ti-widgetized:before {
	content: "\e6ca";
}
.ti-widget:before {
	content: "\e6cb";
}
.ti-widget-alt:before {
	content: "\e6cc";
}
.ti-wallet:before {
	content: "\e6cd";
}
.ti-video-clapper:before {
	content: "\e6ce";
}
.ti-video-camera:before {
	content: "\e6cf";
}
.ti-vector:before {
	content: "\e6d0";
}
.ti-themify-logo:before {
	content: "\e6d1";
}
.ti-themify-favicon:before {
	content: "\e6d2";
}
.ti-themify-favicon-alt:before {
	content: "\e6d3";
}
.ti-support:before {
	content: "\e6d4";
}
.ti-stamp:before {
	content: "\e6d5";
}
.ti-split-v-alt:before {
	content: "\e6d6";
}
.ti-slice:before {
	content: "\e6d7";
}
.ti-shortcode:before {
	content: "\e6d8";
}
.ti-shift-right-alt:before {
	content: "\e6d9";
}
.ti-shift-left-alt:before {
	content: "\e6da";
}
.ti-ruler-alt-2:before {
	content: "\e6db";
}
.ti-receipt:before {
	content: "\e6dc";
}
.ti-pin2:before {
	content: "\e6dd";
}
.ti-pin-alt:before {
	content: "\e6de";
}
.ti-pencil-alt2:before {
	content: "\e6df";
}
.ti-palette:before {
	content: "\e6e0";
}
.ti-more:before {
	content: "\e6e1";
}
.ti-more-alt:before {
	content: "\e6e2";
}
.ti-microphone-alt:before {
	content: "\e6e3";
}
.ti-magnet:before {
	content: "\e6e4";
}
.ti-line-double:before {
	content: "\e6e5";
}
.ti-line-dotted:before {
	content: "\e6e6";
}
.ti-line-dashed:before {
	content: "\e6e7";
}
.ti-layout-width-full:before {
	content: "\e6e8";
}
.ti-layout-width-default:before {
	content: "\e6e9";
}
.ti-layout-width-default-alt:before {
	content: "\e6ea";
}
.ti-layout-tab:before {
	content: "\e6eb";
}
.ti-layout-tab-window:before {
	content: "\e6ec";
}
.ti-layout-tab-v:before {
	content: "\e6ed";
}
.ti-layout-tab-min:before {
	content: "\e6ee";
}
.ti-layout-slider:before {
	content: "\e6ef";
}
.ti-layout-slider-alt:before {
	content: "\e6f0";
}
.ti-layout-sidebar-right:before {
	content: "\e6f1";
}
.ti-layout-sidebar-none:before {
	content: "\e6f2";
}
.ti-layout-sidebar-left:before {
	content: "\e6f3";
}
.ti-layout-placeholder:before {
	content: "\e6f4";
}
.ti-layout-menu:before {
	content: "\e6f5";
}
.ti-layout-menu-v:before {
	content: "\e6f6";
}
.ti-layout-menu-separated:before {
	content: "\e6f7";
}
.ti-layout-menu-full:before {
	content: "\e6f8";
}
.ti-layout-media-right-alt:before {
	content: "\e6f9";
}
.ti-layout-media-right:before {
	content: "\e6fa";
}
.ti-layout-media-overlay:before {
	content: "\e6fb";
}
.ti-layout-media-overlay-alt:before {
	content: "\e6fc";
}
.ti-layout-media-overlay-alt-2:before {
	content: "\e6fd";
}
.ti-layout-media-left-alt:before {
	content: "\e6fe";
}
.ti-layout-media-left:before {
	content: "\e6ff";
}
.ti-layout-media-center-alt:before {
	content: "\e700";
}
.ti-layout-media-center:before {
	content: "\e701";
}
.ti-layout-list-thumb:before {
	content: "\e702";
}
.ti-layout-list-thumb-alt:before {
	content: "\e703";
}
.ti-layout-list-post:before {
	content: "\e704";
}
.ti-layout-list-large-image:before {
	content: "\e705";
}
.ti-layout-line-solid:before {
	content: "\e706";
}
.ti-layout-grid4:before {
	content: "\e707";
}
.ti-layout-grid3:before {
	content: "\e708";
}
.ti-layout-grid2:before {
	content: "\e709";
}
.ti-layout-grid2-thumb:before {
	content: "\e70a";
}
.ti-layout-cta-right:before {
	content: "\e70b";
}
.ti-layout-cta-left:before {
	content: "\e70c";
}
.ti-layout-cta-center:before {
	content: "\e70d";
}
.ti-layout-cta-btn-right:before {
	content: "\e70e";
}
.ti-layout-cta-btn-left:before {
	content: "\e70f";
}
.ti-layout-column4:before {
	content: "\e710";
}
.ti-layout-column3:before {
	content: "\e711";
}
.ti-layout-column2:before {
	content: "\e712";
}
.ti-layout-accordion-separated:before {
	content: "\e713";
}
.ti-layout-accordion-merged:before {
	content: "\e714";
}
.ti-layout-accordion-list:before {
	content: "\e715";
}
.ti-ink-pen:before {
	content: "\e716";
}
.ti-info-alt:before {
	content: "\e717";
}
.ti-help-alt:before {
	content: "\e718";
}
.ti-headphone-alt:before {
	content: "\e719";
}
.ti-hand-point-up:before {
	content: "\e71a";
}
.ti-hand-point-right:before {
	content: "\e71b";
}
.ti-hand-point-left:before {
	content: "\e71c";
}
.ti-hand-point-down:before {
	content: "\e71d";
}
.ti-gallery:before {
	content: "\e71e";
}
.ti-face-smile:before {
	content: "\e71f";
}
.ti-face-sad:before {
	content: "\e720";
}
.ti-credit-card:before {
	content: "\e721";
}
.ti-control-skip-forward:before {
	content: "\e722";
}
.ti-control-skip-backward:before {
	content: "\e723";
}
.ti-control-record:before {
	content: "\e724";
}
.ti-control-eject:before {
	content: "\e725";
}
.ti-comments-smiley:before {
	content: "\e726";
}
.ti-brush-alt:before {
	content: "\e727";
}
.ti-youtube:before {
	content: "\e728";
}
.ti-vimeo:before {
	content: "\e729";
}
.ti-twitter:before {
	content: "\e72a";
}
.ti-time:before {
	content: "\e72b";
}
.ti-tumblr:before {
	content: "\e72c";
}
.ti-skype:before {
	content: "\e72d";
}
.ti-share:before {
	content: "\e72e";
}
.ti-share-alt:before {
	content: "\e72f";
}
.ti-rocket:before {
	content: "\e730";
}
.ti-pinterest:before {
	content: "\e731";
}
.ti-new-window:before {
	content: "\e732";
}
.ti-microsoft:before {
	content: "\e733";
}
.ti-list-ol:before {
	content: "\e734";
}
.ti-linkedin:before {
	content: "\e735";
}
.ti-layout-sidebar-2:before {
	content: "\e736";
}
.ti-layout-grid4-alt:before {
	content: "\e737";
}
.ti-layout-grid3-alt:before {
	content: "\e738";
}
.ti-layout-grid2-alt:before {
	content: "\e739";
}
.ti-layout-column4-alt:before {
	content: "\e73a";
}
.ti-layout-column3-alt:before {
	content: "\e73b";
}
.ti-layout-column2-alt:before {
	content: "\e73c";
}
.ti-instagram:before {
	content: "\e73d";
}
.ti-google:before {
	content: "\e73e";
}
.ti-github:before {
	content: "\e73f";
}
.ti-flickr:before {
	content: "\e740";
}
.ti-facebook:before {
	content: "\e741";
}
.ti-dropbox:before {
	content: "\e742";
}
.ti-dribbble:before {
	content: "\e743";
}
.ti-apple:before {
	content: "\e744";
}
.ti-android:before {
	content: "\e745";
}
.ti-save:before {
	content: "\e746";
}
.ti-save-alt:before {
	content: "\e747";
}
.ti-yahoo:before {
	content: "\e748";
}
.ti-wordpress:before {
	content: "\e749";
}
.ti-vimeo-alt:before {
	content: "\e74a";
}
.ti-twitter-alt:before {
	content: "\e74b";
}
.ti-tumblr-alt:before {
	content: "\e74c";
}
.ti-trello:before {
	content: "\e74d";
}
.ti-stack-overflow:before {
	content: "\e74e";
}
.ti-soundcloud:before {
	content: "\e74f";
}
.ti-sharethis:before {
	content: "\e750";
}
.ti-sharethis-alt:before {
	content: "\e751";
}
.ti-reddit:before {
	content: "\e752";
}
.ti-pinterest-alt:before {
	content: "\e753";
}
.ti-microsoft-alt:before {
	content: "\e754";
}
.ti-linux:before {
	content: "\e755";
}
.ti-jsfiddle:before {
	content: "\e756";
}
.ti-joomla:before {
	content: "\e757";
}
.ti-html5:before {
	content: "\e758";
}
.ti-flickr-alt:before {
	content: "\e759";
}
.ti-email:before {
	content: "\e75a";
}
.ti-drupal:before {
	content: "\e75b";
}
.ti-dropbox-alt:before {
	content: "\e75c";
}
.ti-css3:before {
	content: "\e75d";
}
.ti-rss:before {
	content: "\e75e";
}
.ti-rss-alt:before {
	content: "\e75f";
}

/*! 
 * angular-loading-bar v0.9.0
 * https://chieffancypants.github.io/angular-loading-bar
 * Copyright (c) 2016 Wes Cruver
 * License: MIT
 */

/* Make clicks pass-through */
#loading-bar,
#loading-bar-spinner {
  pointer-events: none;
  -webkit-pointer-events: none;
  -webkit-transition: 350ms linear all;
  -moz-transition: 350ms linear all;
  -o-transition: 350ms linear all;
  transition: 350ms linear all;
}

#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
  opacity: 0;
}

#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
  opacity: 1;
}

#loading-bar .bar {
  -webkit-transition: width 350ms;
  -moz-transition: width 350ms;
  -o-transition: width 350ms;
  transition: width 350ms;
  background: #EFEFF4  !important;
  position: fixed;
  z-index: 10002;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
  color: red !important;
}

/* Fancy blur effect */
#loading-bar .peg {
  position: absolute;
  width: 70px;
  right: 0;
  top: 0;
  height: 2px;
  opacity: .45;
  -moz-box-shadow: #29d 1px 0 6px 1px;
  -ms-box-shadow: #29d 1px 0 6px 1px;
  -webkit-box-shadow: #29d 1px 0 6px 1px;
  box-shadow: #29d 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#loading-bar-spinner {
  display: block;
  position: fixed;
  z-index: 10002;
  top: 50%;
  left: 50%;
  /*top: 10px;
  left: 10px;*/
}

    #loading-bar-spinner .spinner-icon {
        /*width: 14px;
  height: 14px;*/
        width: 54px;
        height: 54px;
        border: solid 2px transparent;
        border-top-color: #29d;
        border-left-color: #29d;
        border-radius: 50%;
        -webkit-animation: loading-bar-spinner 400ms linear infinite;
        -moz-animation: loading-bar-spinner 400ms linear infinite;
        -ms-animation: loading-bar-spinner 400ms linear infinite;
        -o-animation: loading-bar-spinner 400ms linear infinite;
        animation: loading-bar-spinner 400ms linear infinite;
    }

@-webkit-keyframes loading-bar-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-bar-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-bar-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes loading-bar-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f0f0f0;
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #bfbfbf;
    --border: #d9d9d9;
    --divider: #f0f0f0;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.65);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    --nav-active-bg: rgba(22, 119, 255, 0.12);
    --nav-active-border: rgba(22, 119, 255, 0.35);
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring */
    --focus: rgba(22, 119, 255, 0.35);
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #2a2f3a;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        --nav-active-bg: rgba(64, 150, 255, 0.22);
        --nav-active-border: rgba(64, 150, 255, 0.55);
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        --focus: rgba(64, 150, 255, 0.45);
        --ps-thumb: rgba(255,255,255,0.22);
    }

/* ---------------------------------------------------------------------- 
>>> TABLE OF CONTENT
-------------------------------------------------------------------------
1 - Basic Elements & Classes
2 - Top Navbar
3 - Sidebar
4 - Nav
5 - Main Container
6 - Footer
7 - Settings
8 - Off sidebar
9 - Utilities
10 - Dropdown Menu
11 - Tabs
12 - Panles
13 - Pagination
14 - Accordion
15 - Animations
16 - Progress Bars
17 - Labels and Badges
18 - Form Elements
19 - Icons
20 - Buttons
21 - Links
22 - Form Wizard
23 - Login
24 - Invoice
25 - Timeline
26 - Tables
27 - User Profile
28 - Calendar
29 - Todo
30 - Chat
31 - Messages
32 - Modals
33 - Maps
34 - Pricing Table
35 - Error
36 - Page Title
37 - Tooltips
38 - Popovers
39 - Date Picker
/* ---------------------------------------------------------------------- */
/*



*/
/* ---------------------------------------------------------------------- */
/*  Basic Elements & Classes
/* ---------------------------------------------------------------------- */
html, body {
    height: 100%;
    width: 100%;
}

html {
    font-size: 100%;
}

body {
    color: var(--text-muted);
    direction: ltr;
    overflow-x: hidden;
    height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    padding: 0;
    margin: 0;
    background: var(--bg);
    -webkit-font-smoothing: antialiased !important;
}

.dx-scrollable-scroll {
    visibility: hidden !important;
    opacity: 0;
    transition: all 1s;
}

.dx-state-hover .dx-scrollable-scroll {
    visibility: visible !important;
    opacity: 1;
    transition: all 1s;
}

body.bg_style_1 {
    background: var(--bg) !important;
}

body.bg_style_2 {
    background: var(--bg) !important;
}

body.bg_style_3 {
    background: var(--bg) !important;
}

body.bg_style_4 {
    background: var(--bg) !important;
}

body.bg_style_5 {
    background: var(--bg) !important;
}

::-moz-selection {
    background: var(--text-muted);
    text-shadow: none;
    color: var(--surface);
}

::selection {
    background: var(--text-muted);
    text-shadow: none;
    color: var(--surface);
}

a, a:focus, a:hover, a:active {
    outline: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
}

button {
    outline: 0 !important;
}

a {
    color: var(--primary);
}

    a:hover, a:focus, a:active {
        color: var(--primary-active);
    }

h1, h2 {
    font-family: "Raleway", sans-serif;
}

h3, h4, h5 {
    font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
    font-weight: 300;
    margin-top: 0;
    color: var(--text);
}

    .text-bold h1, h1.text-bold, h1 .text-bold, .text-bold h2, h2.text-bold, h2 .text-bold, .text-bold h3, h3.text-bold, h3 .text-bold, .text-bold h4, h4.text-bold, h4 .text-bold, .text-bold h5, h5.text-bold, h5 .text-bold {
        font-weight: 600;
    }

    h5.over-title {
        font-family: "Lato", sans-serif;
        font-size: 16px;
    }

.mainTitle {
    margin: 20px 0;
}

    .mainTitle small {
        color: var(--text-muted);
        font-size: 17px;
        font-weight: 300;
        letter-spacing: 0;
        display: block;
        margin: 10px 0;
    }

    .mainTitle i {
        font-size: 17px;
    }

.ct-callout {
    border-color: var(--primary);
    border-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 0 5px;
    margin: 20px 0;
    padding: 10px;
    background: var(--surface);
}

.main-wrapper {
    position: relative;
}

.ajax-var(--surface)-backdrop {
    background-color: var(--surface);
    display: none;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1049;
}

    .ajax-var(--surface)-backdrop:before {
        background: var(--text);
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        top: 60px;
        left: 50%;
        margin-left: -20px;
        content: "";
        position: absolute;
    }

    .ajax-var(--surface)-backdrop:after {
        content: "\f110";
        font-family: FontAwesome;
        width: 40px;
        height: 40px;
        line-height: 40px;
        top: 60px;
        color: var(--surface);
        text-align: center;
        position: absolute;
        left: 50%;
        margin-left: -20px;
        -webkit-animation: spin 2s infinite linear;
        -moz-animation: spin 2s infinite linear;
        -o-animation: spin 2s infinite linear;
        animation: spin 2s infinite linear;
    }

@media (min-width: 992px) { /*Michael Michael*/
    .app-navbar-fixed {
        /*position:absolute;*/
        /*top:-65px;*/
        padding-top: 65px;
        /* background: linear-gradient(45deg, var(--info), var(--info));*/
    }
}

#app {
    height: auto;
    min-height: 100%;
    position: relative;
    width: 100%;
    overflow: hidden;
}

    #app .app-content {
        height: 100%;
    }

        #app .app-content:before, #app .app-content:after {
            content: " ";
            display: table;
        }

        #app .app-content:after {
            clear: both;
        }

@media (max-width: 991px) {
    #app {
        width: 100%;
    }

        #app .app-content {
            -moz-transition: -moz-transform 300ms ease 0s;
            -o-transition: -o-transform 300ms ease 0s;
            -webkit-transition: -webkit-transform 300ms ease;
            -webkit-transition-delay: 0s;
            transition: transform 300ms ease 0s;
            height: 100%;
            width: 100%;
            position: relative;
        }

        #app.app-slide-off > .app-content {
            box-shadow: 0 0 4px var(--text);
            overflow: hidden;
            z-index: 2;
            position: absolute;
            -webkit-transform: translate3d(260px, 0, 0);
            transform: translate3d(260px, 0, 0);
            -moz-transition: -moz-transform 300ms ease 0s;
            -o-transition: -o-transform 300ms ease 0s;
            -webkit-transition: -webkit-transform 300ms ease;
            -webkit-transition-delay: 0s;
            transition: transform 300ms ease 0s;
        }

        #app.app-slide-off > #off-sidebar {
            -webkit-transform: translate3d(260px, 0, 0);
            transform: translate3d(260px, 0, 0);
            -moz-transition: -moz-transform 300ms ease 0s;
            -o-transition: -o-transform 300ms ease 0s;
            -webkit-transition: -webkit-transform 300ms ease;
            -webkit-transition-delay: 0s;
            transition: transform 300ms ease 0s;
        }

        #app.app-offsidebar-open > .app-content {
            box-shadow: 0 0 4px var(--text);
            overflow: hidden;
            z-index: 2;
            position: absolute;
            -webkit-transform: translate3d(-260px, 0, 0);
            transform: translate3d(-260px, 0, 0);
            -moz-transition: -moz-transform 300ms ease 0s;
            -o-transition: -o-transform 300ms ease 0s;
            -webkit-transition: -webkit-transform 300ms ease;
            -webkit-transition-delay: 0s;
            transition: transform 300ms ease 0s;
        }
}

.app-content-loading {
    background: var(--text);
    border-radius: 10px;
    height: 100px;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100px;
    z-index: 1051;
}

.loading-spinner {
    font-size: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
}

.well {
    box-shadow: none;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: var(--primary);
    color: var(--surface);
}

.nav-pills > li > a {
    border-radius: 10px;
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background-color: var(--primary);
    border-color: var(--primary);
}

/*.container-fullw {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--divider);
}*/
@media (max-width: 768px) {
    .container-fullw {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.text-var(--surface) {
    color: var(--surface) !important;
}
/* ---------------------------------------------------------------------- */
/*  Top Navbar
/* ---------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .panel-heading h1 {
        display: none;
    }
}

.navbar {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1089;
    border: none;
    margin-bottom: 0;
    height: 65px;
}

    .navbar .loading-bar-wrapper {
        position: absolute;
        bottom: 0;
        height: 3px;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .navbar .navbar-header {
        z-index: 10;
        background: var(--surface);
        border-bottom: 1px solid var(--text-disabled);
        position: relative;
        height: 65px;
    }

@media (min-width: 768px) {
    .navbar .navbar-header {
        width: 260px;
    }
}

@media (min-width: 992px) {
    .navbar .navbar-header {
        border-right: 1px solid var(--text-disabled);
    }
}

.navbar .navbar-header a {
    line-height: 65px;
    height: 65px;
}

.navbar .navbar-header .navbar-brand {
    padding: 0 15px;
}

    .navbar .navbar-header .navbar-brand img {
        display: inline-block;
        margin-top: -6px;
    }

.navbar .navbar-header .menu-toggler {
    margin-right: 60px;
    padding: 0 15px;
    font-size: 17px;
    color: var(--text-disabled);
}

.navbar .navbar-header .sidebar-toggler {
    font-size: 17px;
    padding-right: 15px;
    color: var(--text-disabled);
}

    .navbar .navbar-header .sidebar-toggler:hover {
        color: var(--text-disabled);
    }

.navbar .navbar-header .sidebar-mobile-toggler {
    font-size: 17px;
    padding-left: 15px;
    padding-right: 15px;
    color: var(--text-disabled);
}

    .navbar .navbar-header .sidebar-mobile-toggler:hover {
        color: var(--text-disabled);
    }

.navbar .navbar-collapse {
    border-bottom: 1px solid var(--text-disabled);
    border-top: none;
    background: var(--surface);
    padding-left: 15px !important;
    padding-right: 15px !important;
    position: relative;
}

@media (min-width: 768px) {
    .navbar .navbar-collapse {
        margin-left: 260px;
        height: 65px !important;
    }

        .navbar .navbar-collapse .nav {
            height: auto !important;
        }
}

@media (max-width: 767px) {
    .navbar .navbar-collapse {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }

        .navbar .navbar-collapse .nav {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
}

.navbar .navbar-collapse.in {
    overflow-y: visible;
}

@media (max-width: 991px) {
    .app-slide-off .navbar, .app-offsidebar-open .navbar {
        position: absolute !important;
    }
}

@media (min-width: 992px) {
    .app-navbar-fixed .navbar .navbar-collapse, .app-navbar-fixed .navbar .navbar-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: translateZ(0);
    }

    .app-navbar-fixed .navbar .dropdown-off-sidebar {
        position: fixed;
        top: 0;
        -webkit-transform: translateZ(0);
    }
}

@media (min-width: 992px) {
    .app-sidebar-closed .navbar .navbar-header {
        width: 70px;
    }

        .app-sidebar-closed .navbar .navbar-header .navbar-brand {
            display: none;
        }

        .app-sidebar-closed .navbar .navbar-header .sidebar-toggler {
            float: none !important;
            display: block;
            margin: 0;
            padding: 0;
            text-align: center;
        }

    .app-sidebar-closed .navbar .navbar-collapse {
        margin-left: 70px;
    }
}

@media (max-width: 991px) {
    .navbar {
        left: 0;
        margin: 0;
        position: fixed;
        right: 0;
        width: 100%;
        -webkit-transform: translateZ(0);
    }
}

@media (min-width: 992px) {
    .app-sidebar-fixed .navbar .navbar-header {
        position: fixed;
        top: 0;
    }
}

.navbar .close-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    cursor: pointer;
    z-index: 1001;
    min-height: 40px;
}

    .navbar .close-handle .arrow-left, .navbar .close-handle .arrow-right {
        background-color: var(--text-disabled);
        border-radius: 10px;
        bottom: 15px;
        height: 8px;
        left: 50%;
        position: absolute;
        -moz-transition: -moz-transform 0.2s ease 0s;
        -o-transition: -o-transform 0.2s ease 0s;
        -webkit-transition: -webkit-transform 0.2s ease;
        -webkit-transition-delay: 0s;
        transition: transform 0.2s ease 0s;
        width: 24px;
        margin-left: -12px;
        cursor: pointer;
    }

    .navbar .close-handle .arrow-left {
        -moz-transform: translate3d(-8px, 0px, 0px) rotate(-10deg);
        -ms-transform: translate3d(-8px, 0px, 0px) rotate(-10deg);
        -webkit-transform: translate3d(-8px, 0px, 0px) rotate(-10deg);
        transform: translate3d(-8px, 0px, 0px) rotate(-10deg);
    }

    .navbar .close-handle .arrow-right {
        -moz-transform: translate3d(8px, 0px, 0px) rotate(10deg);
        -ms-transform: translate3d(8px, 0px, 0px) rotate(10deg);
        -webkit-transform: translate3d(8px, 0px, 0px) rotate(10deg);
        transform: translate3d(8px, 0px, 0px) rotate(10deg);
    }

.navbar .navbar-right .nav {
    margin: 0;
}

    .navbar .navbar-right .nav .dropdown-light:after {
        right: 36px;
        left: auto;
        top: -9px;
    }

    .navbar .navbar-right .nav .dropdown-light:before {
        right: 35px;
        left: auto;
        top: -11px;
    }

.navbar .navbar-right .badge {
    background-color: var(--error);
    color: var(--surface);
    padding: 4px 6px;
    position: absolute;
    top: 3px;
    font-size: 10px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    right: auto;
    margin-left: 13px;
}

.navbar .navbar-right .dot-badge {
    border-radius: 100%;
    border-style: solid;
    border-width: 2px;
    height: 10px;
    margin: 2px;
    position: absolute !important;
    border-color: var(--surface);
    top: 6px;
    width: 10px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    right: auto;
    margin-left: 10px;
}

.navbar .navbar-right .view-all {
    text-align: center;
}

.navbar .navbar-right .drop-down-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 5px 5px 0 5px;
}

.navbar .dropdown-off-sidebar {
    position: absolute;
    z-index: 11;
    top: 0;
    right: 0;
    border-left: 1px solid var(--text-disabled);
    width: 30px;
    background: var(--surface);
    line-height: 64px;
    color: var(--text-disabled);
}

    .navbar .dropdown-off-sidebar:after {
        position: absolute;
        font-size: 17px;
        padding: 0;
        margin: 0;
        font-family: 'themify';
        content: "\e6da";
        left: 5px;
        top: 0;
    }

.app-offsidebar-open .navbar .dropdown-off-sidebar:after {
    content: "\e6d9";
}

@media (min-width: 992px) {
    .app-offsidebar-open .navbar .dropdown-off-sidebar {
        position: fixed;
    }
}

@media (max-width: 991px) {
    .navbar .dropdown-off-sidebar {
        width: 50px;
    }

        .navbar .dropdown-off-sidebar:after {
            left: 15px;
        }
}

@media (min-width: 992px) {
    .navbar .navbar-right {
        position: relative;
        margin: 1px 15px 0 0;
    }
}

@media (max-width: 991px) and (min-width: 767px) {
    .navbar .navbar-right {
        position: relative;
        margin: 1px 35px 0 0;
    }
}

@media (min-width: 768px) {
    .navbar .navbar-right > li {
        float: left;
    }
}

@media (max-width: 767px) {
    .navbar .navbar-right > li {
        border-bottom: 1px solid var(--text-disabled);
    }

        .navbar .navbar-right > li:last-child {
            margin-bottom: 40px;
        }
}

.navbar .navbar-right > li > a {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 27px;
    text-transform: uppercase;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    opacity: 0.9;
    padding: 5px 15px 5px 15px;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    .navbar .navbar-right > li > a {
        margin-right: 3px;
    }
}

.navbar .navbar-right > li > a:hover {
    background: var(--topbar-hover);
}

.navbar .navbar-right > li > a i {
    display: block;
    margin-top: 7px;
    color: var(--text-disabled);
    font-size: 17px;
}

.navbar .navbar-right > li > a .angular-notifications-container {
    display: block;
}

    .navbar .navbar-right > li > a .angular-notifications-container .angular-notifications-icon {
        height: 20px !important;
        min-width: 20px !important;
        padding-top: 0 !important;
        right: 5px !important;
        line-height: 20px !important;
    }

@media (max-width: 767px) {
    .navbar .navbar-right > li > a .angular-notifications-container .angular-notifications-icon {
        margin: 0;
        position: absolute !important;
        border-color: var(--surface);
        width: 20px;
        left: 50% !important;
        right: auto;
        margin-left: 5px;
    }
}

.navbar .navbar-right > li.current-user > a {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    float: left;
}

    .navbar .navbar-right > li.current-user > a img {
        float: left;
        margin-right: 5px;
        width: 39px;
        margin-top: -2px;
        border-radius: 100%;
    }

    .navbar .navbar-right > li.current-user > a span {
        float: left;
        line-height: 18px;
        margin-top: 3px;
    }

    .navbar .navbar-right > li.current-user > a i {
        margin: 0;
        font-size: 14px;
    }

@media (max-width: 767px) {
    .navbar .navbar-right > li.current-user a {
        display: block;
        float: none;
    }

        .navbar .navbar-right > li.current-user a img {
            display: inline-block;
            margin-right: 0;
            float: none;
        }

        .navbar .navbar-right > li.current-user a span {
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 0;
            line-height: 0px;
            float: none;
            margin-top: 0;
        }

        .navbar .navbar-right > li.current-user a i {
            font-size: 14px;
            line-height: 60px;
            color: var(--surface) !important;
            -moz-transition: opacity 0.3s ease;
            -o-transition: opacity 0.3s ease;
            -webkit-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
            background: var(--text);
            height: 39px;
            line-height: 39px;
            margin: 10px auto;
            width: 39px;
            border-radius: 20%;
        }

        .navbar .navbar-right > li.current-user.open i, .navbar .navbar-right > li.current-user a:hover i {
            opacity: 0;
        }
}

.navbar .navbar-right .dropdown-menu:before {
    top: -11px;
    right: 35px;
    left: auto;
}

.navbar .navbar-right .dropdown-menu:after {
    top: -9px;
    right: 36px;
    left: auto;
}

.navbar .navbar-right .dropdown-menu.dropdown-subview .fa-stack {
    height: 1.9em;
    line-height: 1.9em;
    vertical-align: top;
    margin-right: 5px;
}

.navbar .navbar-right .dropdown-menu.dropdown-large {
    width: 300px;
}

.navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper .media-body {
    width: auto !important;
}

.navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper ul > li a {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 5px;
    padding: 10px;
    border-bottom: none;
    background-color: var(--bg);
    text-align: left;
}

    .navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper ul > li a.unread {
        background-color: var(--surface-3);
    }

    .navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper ul > li a:hover {
        background-color: var(--surface-3);
    }

    .navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper ul > li a .thread-image {
        float: left;
        height: 50px;
        margin-right: 8px;
        width: 50px;
    }

    .navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper ul > li a .author {
        display: block;
        font-size: 12px;
        font-weight: 600;
        line-height: normal;
    }

    .navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper ul > li a .preview {
        display: block;
        font-size: 11px;
        line-height: normal;
        color: var(--text-disabled);
    }

    .navbar .navbar-right .dropdown-menu.dropdown-messages .drop-down-wrapper ul > li a .time {
        display: block;
        float: right;
        font-size: 11px;
        font-style: italic;
        font-weight: 600;
        color: var(--text-disabled);
    }

@media (max-width: 767px) {
    .navbar .navbar-right .dropdown-menu {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none;
        margin: 0;
    }

        .navbar .navbar-right .dropdown-menu:before {
            left: 50% !important;
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .navbar .navbar-right .dropdown-menu:after {
            left: 50% !important;
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
}

@media (max-width: 767px) {
    .navbar .navbar-right > li {
        float: left;
        width: 100%;
        padding: 10px;
    }
}

/* ---------------------------------------------------------------------- */
/*  Sidebar
/* ---------------------------------------------------------------------- */
#sidebar {
    width: 260px;
    float: left;
    left: 0;
    bottom: 0;
    background: var(--bg);
    overflow: visible;
    z-index: 1051;
}

    #sidebar > div, #sidebar .sidebar-container {
        height: 100%;
    }

.app-sidebar-fixed #sidebar > .sidebar-container {
    overflow-y: hidden;
    overflow-x: visible;
    position: relative;
}

.app-mobile #sidebar {
    overflow: auto;
}

#sidebar .wrapper {
    padding: 20px 15px;
}

.app-navbar-fixed.app-sidebar-fixed #sidebar {
    top: 0;
}

#sidebar nav {
    min-height: 100%;
}

@media (min-width: 992px) {
    #sidebar {
        margin-top: 65px;
    }
}

@media (min-width: 992px) and (min-width: 992px) {
    #sidebar:before {
        background-color: inherit;
        border: inherit;
        bottom: 0;
        content: "";
        position: absolute;
        top: 0;
        width: inherit;
        z-index: -1;
        border-right: 1px solid var(--text-disabled);
    }
}

@media (min-width: 992px) {
    #sidebar nav {
        border-right: 1px solid var(--text-disabled);
    }

    .app-navbar-fixed #sidebar {
        margin-top: 0;
    }

    .app-sidebar-fixed #sidebar {
        position: fixed;
        top: 44px !important;
        margin-top: 0;
    }

        .app-sidebar-fixed #sidebar > div {
            z-index: 1000;
        }

    .app-sidebar-closed #sidebar {
        width: 70px;
    }
}

@media (max-width: 991px) {
    #sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 0;
        float: none;
        -webkit-transform: translate3d(-260px, 0, 0);
        transform: translate3d(-260px, 0, 0);
        -moz-transition: -moz-transform 300ms ease 0s;
        -o-transition: -o-transform 300ms ease 0s;
        -webkit-transition: -webkit-transform 300ms ease;
        -webkit-transition-delay: 0s;
        transition: transform 300ms ease 0s;
    }

        #sidebar > div {
            z-index: 1000;
        }

    .app-slide-off #sidebar {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -moz-transition: -moz-transform 300ms ease 0s;
        -o-transition: -o-transform 300ms ease 0s;
        -webkit-transition: -webkit-transform 300ms ease;
        -webkit-transition-delay: 0s;
        transition: transform 300ms ease 0s;
    }

    #sidebar nav {
        border-right: none !important;
    }

    #sidebar > .sidebar-container {
        overflow-y: hidden;
        overflow-x: visible;
        position: relative;
    }
}

/* ---------------------------------------------------------------------- */
/*  Nav
/* ---------------------------------------------------------------------- */
.item-content {
    align-items: center;
    display: table-row;
}

    .item-content .item-media {
        display: table-cell;
        padding: 10px 15px 10px 15px;
    }

    .item-content .item-inner {
        align-items: center;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: var(--text-disabled);
        display: table-cell;
        padding: 10px 15px 10px 0;
        width: 100%;
    }

.no-touch .item-content .item-inner {
    -moz-transition: border 300ms linear;
    -o-transition: border 300ms linear;
    -webkit-transition: border 300ms linear;
    transition: border 300ms linear;
}

.active .item-content .item-inner, .open .item-content .item-inner, li:last-child .item-content .item-inner {
    border-bottom-color: transparent !important;
}

#sidebar > div nav > ul {
    background: var(--surface);
    list-style: none;
    margin: 10px 0;
    padding: 0;
    border-top: 1px solid var(--text-disabled);
    border-bottom: 1px solid var(--text-disabled);
}

    #sidebar > div nav > ul > li a {
        color: var(--text-muted);
        border-bottom: none;
    }

        #sidebar > div nav > ul > li a i {
            font-weight: normal;
        }

    #sidebar > div nav > ul > li > a {
        display: table;
    }

    #sidebar > div nav > ul > li.hover {
        background: var(--topbar-hover);
    }

.no-touch #sidebar > div nav > ul > li:hover {
    background: var(--topbar-hover);
}

#sidebar > div nav > ul > li.active {
    background: var(--text-disabled);
}

    #sidebar > div nav > ul > li.active > a {
        border-top: none !important;
        color: var(--surface);
    }

        #sidebar > div nav > ul > li.active > a i {
            color: var(--surface);
        }

#sidebar > div nav > ul li {
    border: none;
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}

.no-touch #sidebar > div nav > ul li {
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -webkit-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

@media (min-width: 992px) {
    .app-sidebar-closed #sidebar > div nav > ul li ul.sub-menu {
        display: none !important;
    }
}

#sidebar > div nav > ul li.active > ul.sub-menu {
    display: block;
    padding: 0;
}

#sidebar > div nav > ul li > a {
    margin-top: -1px !important;
    font-size: 14px;
}

    #sidebar > div nav > ul li > a:active:focus {
        background: var(--border);
    }

.no-touch #sidebar > div nav > ul li > a:hover .item-inner {
    border-bottom-color: transparent;
}

#sidebar > div nav > ul li a {
    border: none;
    font-weight: 300;
    margin: 0;
    position: relative;
    text-decoration: none;
}

    #sidebar > div nav > ul li a i[class*="ti-"] {
        margin-right: 5px;
        display: inline-block;
        font-size: 17px;
        position: relative;
        top: 2px;
    }

    #sidebar > div nav > ul li a .icon-arrow {
        float: right;
        margin-right: 6px !important;
        font-style: normal;
        font-weight: normal;
        color: var(--text-disabled);
        font-size: 12px;
    }

        #sidebar > div nav > ul li a .icon-arrow:before {
            content: "\e64a";
            font-family: themify;
        }

#sidebar > div nav > ul li.open {
    background: var(--surface-3);
}

    #sidebar > div nav > ul li.open > a .icon-arrow {
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }

        #sidebar > div nav > ul li.open > a .icon-arrow:before {
            content: "\e64b";
        }

ul.sub-menu {
    clear: both;
    list-style: none;
    padding: 1px 0;
    display: none;
    margin: 0;
    background: var(--bg);
}

    ul.sub-menu li {
        background: none;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 1px !important;
        padding: 0;
    }

        ul.sub-menu li.active, ul.sub-menu li.open {
            background: var(--surface-3) !important;
        }

.no-touch ul.sub-menu li:hover {
    background: var(--surface-3);
}

ul.sub-menu li a {
    background: none;
    display: block;
    font-size: 13px !important;
    font-weight: 300;
    border: none;
    margin: 0;
    padding-bottom: 10px;
    padding-left: 52px !important;
    padding-right: 15px;
    padding-top: 10px;
    text-decoration: none;
}

    ul.sub-menu li a .icon-arrow {
        margin-right: 22px;
    }

ul.sub-menu li.dropdown-header {
    padding-left: 40px !important;
}

ul.sub-menu li.divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    margin-left: 40px !important;
}

ul.sub-menu li ul.sub-menu li a {
    padding-left: 60px !important;
}

ul.sub-menu li ul.sub-menu li ul.sub-menu li a {
    padding-left: 80px !important;
}

@media (min-width: 992px) {
    .app-sidebar-closed ul.sub-menu {
        border-right: 1px solid var(--text-disabled);
        border-bottom: 1px solid var(--text-disabled);
        background: var(--surface);
        left: 70px;
        position: absolute;
        padding: 1px 0;
        overflow-y: auto;
        overflow-x: visible;
        height: auto;
        bottom: auto;
        width: 260px;
        z-index: 1050;
        display: none;
    }

        .app-sidebar-closed ul.sub-menu > li a {
            padding-left: 20px !important;
            padding-right: 5px;
        }

        .app-sidebar-closed ul.sub-menu > li ul.sub-menu {
            position: relative;
            left: 0;
            width: 100%;
            border: none !important;
        }

            .app-sidebar-closed ul.sub-menu > li ul.sub-menu li a {
                padding-left: 30px !important;
            }

            .app-sidebar-closed ul.sub-menu > li ul.sub-menu li ul.sub-menu li a {
                padding-left: 50px !important;
            }
}

@media (min-width: 992px) {
    .app-aside div {
        -webkit-transform: translateZ(0);
    }

    .app-sidebar-closed .app-aside {
        overflow: visible !important;
    }

        .app-sidebar-closed .app-aside .search-form {
            background: var(--border);
            border-bottom: 1px solid var(--text-disabled);
        }

            .app-sidebar-closed .app-aside .search-form > a {
                height: 45px;
                display: block;
                padding: 13px 15px;
                text-align: center;
                font-size: 17px;
                color: var(--text-disabled);
            }

            .app-sidebar-closed .app-aside .search-form .navbar-form {
                display: none;
            }

        .app-sidebar-closed .app-aside li a .icon-arrow {
            float: right;
            margin-right: 6px !important;
            font-style: normal;
            font-weight: normal;
            color: var(--text-disabled);
            font-size: 12px;
        }

            .app-sidebar-closed .app-aside li a .icon-arrow:before {
                content: "\e64a";
                font-family: themify;
            }

        .app-sidebar-closed .app-aside li.open > a .icon-arrow {
            filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
            opacity: 1;
        }

            .app-sidebar-closed .app-aside li.open > a .icon-arrow:before {
                content: "\e64b";
            }

        .app-sidebar-closed .app-aside > .item-inner {
            width: 260px;
            left: 70px;
            top: 0;
            padding: 13px 0;
            border-bottom: none !important;
            width: 260px;
            background: var(--topbar-hover);
            margin-left: 0;
            z-index: 1051;
            -webkit-transform: translateZ(0);
        }

            .app-sidebar-closed .app-aside > .item-inner.active {
                background: var(--text-disabled) !important;
            }

            .app-sidebar-closed .app-aside > .item-inner:before {
                content: "";
                background: none;
                border-bottom: 12px solid transparent;
                border-left: 12px solid var(--text-disabled);
                border-right: none;
                border-top: 12px solid transparent;
                display: block;
                float: right;
                height: 0;
                position: absolute;
                left: 0;
                top: 11px;
                width: 0;
                z-index: 1;
            }

            .app-sidebar-closed .app-aside > .item-inner:after {
                content: "";
                background: none;
                border-bottom: 12px solid transparent;
                border-left: 12px solid var(--topbar-hover);
                border-top: 12px solid transparent;
                display: block;
                float: right;
                height: 0;
                position: absolute;
                left: -1px;
                top: 11px;
                width: 0;
                z-index: 1;
            }

            .app-sidebar-closed .app-aside > .item-inner .title {
                margin-left: 20px;
                color: var(--text-disabled) !important;
                font-size: 14px;
            }

            .app-sidebar-closed .app-aside > .item-inner .icon-arrow {
                display: none;
            }

        .app-sidebar-closed .app-aside > ul.sub-menu {
            width: 260px;
            display: block !important;
            overflow: auto;
            padding: 0;
            left: 70px;
            z-index: 1000;
        }

            .app-sidebar-closed .app-aside > ul.sub-menu > li {
                z-index: 1000;
            }

                .app-sidebar-closed .app-aside > ul.sub-menu > li a {
                    color: var(--text-muted);
                    font-size: 14px;
                }
}

@media (min-width: 992px) and (min-width: 992px) {
    .app-sidebar-closed #sidebar > div nav > ul {
        padding: 1px 0;
    }

    .no-touch .app-sidebar-closed #sidebar > div nav > ul li {
        -moz-transition: background-color 0ms linear;
        -o-transition: background-color 0ms linear;
        -webkit-transition: background-color 0ms linear;
        transition: background-color 0ms linear;
    }

    .app-sidebar-closed #sidebar > div nav > ul > li.open {
        background: inherit;
    }

    .app-sidebar-closed #sidebar > div nav > ul > li.hover {
        background: var(--topbar-hover);
    }

    .app-sidebar-closed #sidebar > div nav > ul > li.active:before {
        border-right: none !important;
    }

    .app-sidebar-closed #sidebar > div nav > ul > li.active:after {
        border-right: none !important;
    }

    .app-sidebar-closed #sidebar > div nav > ul > li.active:hover:after {
        border-left-color: var(--text-disabled);
    }

    .app-sidebar-closed #sidebar > div nav > ul > li.active a {
        margin: 0 !important;
    }

    .app-sidebar-closed #sidebar > div nav > ul > li > a {
        height: 45px;
        display: block;
    }

        .app-sidebar-closed #sidebar > div nav > ul > li > a i:not([class*="fa-stack"]) {
            font-size: 17px;
        }

        .app-sidebar-closed #sidebar > div nav > ul > li > a .item-content {
            display: block;
            padding-left: 0;
        }

        .app-sidebar-closed #sidebar > div nav > ul > li > a .item-media {
            display: block;
            text-align: center;
            padding: 13px 15px;
        }

        .app-sidebar-closed #sidebar > div nav > ul > li > a .item-inner {
            display: none;
            position: absolute;
            left: 70px;
            top: 0;
            padding: 13px 0;
            bottom: 0;
            border-bottom: none !important;
            width: 260px;
            background: var(--topbar-hover);
            margin-left: 0;
        }

            .app-sidebar-closed #sidebar > div nav > ul > li > a .item-inner .title {
                margin-left: 20px;
                color: var(--text-disabled) !important;
            }

            .app-sidebar-closed #sidebar > div nav > ul > li > a .item-inner .icon-arrow {
                display: none;
            }

    .app-sidebar-closed #sidebar .s-open {
        width: 70px;
    }

    .app-sidebar-closed #sidebar .navbar-form {
        height: 45px;
        position: absolute;
        z-index: 1060;
        width: 70px;
    }

        .app-sidebar-closed #sidebar .navbar-form .s-remove, .app-sidebar-closed #sidebar .navbar-form .form-group {
            display: block;
        }

        .app-sidebar-closed #sidebar .navbar-form a {
            font-size: 17px;
            display: block;
            text-align: center;
            padding: 3px 0;
            color: var(--text-disabled);
        }

            .app-sidebar-closed #sidebar .navbar-form a.s-remove {
                display: none;
            }

        .app-sidebar-closed #sidebar .navbar-form .form-group {
            left: 69px;
            border-bottom: 1px solid var(--text-disabled);
            border-right: 1px solid var(--text-disabled);
            border-top: 1px solid var(--text-disabled);
            top: 0;
            position: absolute;
            width: 210px;
            z-index: 1;
            background: var(--border);
            padding: 10px 10px 10px 0;
            display: none;
            bottom: -1px;
            top: -1px;
        }

            .app-sidebar-closed #sidebar .navbar-form .form-group input {
                background: var(--surface);
            }

            .app-sidebar-closed #sidebar .navbar-form .form-group .search-button {
                top: 8px;
            }

    .app-sidebar-closed #sidebar > .navbar-form .s-remove {
        display: block !important;
        padding: 3px 0;
        text-align: center;
    }

    .app-sidebar-closed #sidebar > .navbar-form .form-group {
        display: block !important;
    }

    .app-sidebar-closed #sidebar .navbar-title {
        display: none;
    }
}

.navbar-title {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.2px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 20px !important;
    padding-bottom: 5px !important;
    text-transform: uppercase;
}

.s-open {
    display: none;
}

.navbar-form {
    background: var(--border);
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 8px;
    position: relative;
}

    .navbar-form a {
        display: none;
    }

    .navbar-form .search-button {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none !important;
        color: var(--text-disabled);
        position: absolute;
        right: 5px;
        top: -2px;
        transition: all 100ms ease-in 0s;
    }

        .navbar-form .search-button:hover {
            transition: all 300ms ease-in 0s;
        }

    .navbar-form .form-control {
        background: transparent;
        border: none !important;
        border-radius: 0;
        box-shadow: none !important;
        color: var(--text-muted);
        display: block;
        transition: all 300ms ease-in 0s;
        width: 100%;
        font-size: 12px;
        height: 25px;
        border-radius: 3px !important;
    }

        .navbar-form .form-control:focus {
            background-color: var(--surface) !important;
            border-color: var(--text-disabled);
            transition: all 300ms ease-in 0s;
        }

            .navbar-form .form-control:focus + .search-button {
                color: var(--text-disabled);
            }

    .navbar-form .form-group {
        display: block;
    }

/* ---------------------------------------------------------------------- */
/*  Main Content
/* ---------------------------------------------------------------------- */
.main-content {
    min-height: 100%;
    position: relative;
}

    .main-content .container {
        max-width: none !important;
        width: 100% !important;
        display: inline-block;
    }

    .main-content > .container {
        padding-bottom: 50px;
    }

@media (min-width: 992px) {
    .main-content {
        margin-top: 65px;
        margin-left: 260px;
    }

    .app-navbar-fixed .main-content {
        margin-top: 0;
    }

        .app-navbar-fixed .main-content:before, .app-navbar-fixed .main-content:after {
            content: " ";
            display: table;
        }

        .app-navbar-fixed .main-content:after {
            clear: both;
        }

    .app-sidebar-closed .main-content {
        margin-left: 70px;
    }
}

@media (max-width: 991px) {
    .main-content {
        padding-top: 65px;
    }
}

/* ---------------------------------------------------------------------- */
/*  Footer
/* ---------------------------------------------------------------------- */
#app > footer {
    background-color: var(--surface);
    border-top: 1px solid var(--text-disabled);
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    font-size: 12px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 1088;
}

    #app > footer .footer-inner {
        padding: 0 20px;
        line-height: 50px;
    }

@media (min-width: 992px) {
    #app > footer {
        margin-left: 260px;
    }

    #app.app-sidebar-closed > footer {
        margin-left: 70px;
    }

    #app.app-footer-fixed > footer {
        position: fixed;
    }
}

@media (max-width: 991px) {
    #app > footer {
        z-index: 0;
    }

    #app.app-slide-off > footer, #app.app-offsidebar-open > footer {
        display: none;
    }
}

.go-top {
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 0;
    margin-right: 0;
    text-decoration: none;
    line-height: 50px;
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/*  Settings
/* ---------------------------------------------------------------------- */
.settings {
    position: fixed !important;
    right: -240px;
    top: 120px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -moz-transition: right 0.2s ease 0s;
    -o-transition: right 0.2s ease 0s;
    -webkit-transition: right 0.2s ease;
    -webkit-transition-delay: 0s;
    transition: right 0.2s ease 0s;
    border-left: 1px solid var(--text-disabled) !important;
    border-bottom: 1px solid var(--text-disabled) !important;
    width: 240px;
    z-index: 1050;
}

    .settings.active {
        right: 0;
    }

    .settings > .btn {
        background: var(--surface) !important;
        border-color: var(--text-disabled) !important;
        border-right-width: 0;
        left: -44px;
        padding: 10px 15px;
        position: absolute;
        top: 41px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        -webkit-transform: translateZ(0);
    }

        .settings > .btn:hover, .settings > .btn:active, .settings > .btn:focus {
            box-shadow: none !important;
        }

    .settings.panel {
        border-radius: 0 !important;
        border-top: none;
        border-right: none;
        background: var(--surface);
        border-color: var(--text-disabled) !important;
    }

        .settings.panel .panel-heading {
            border-top-width: 1px;
            border-top-style: solid;
            padding: 11px 15px;
            background: var(--topbar-hover);
            border-color: var(--text-disabled);
            border-radius: 0 !important;
        }

        .settings.panel .panel-body {
            padding: 0;
        }

        .settings.panel .setting-box {
            border-bottom: 1px solid var(--text-disabled);
            padding: 11px 10px 10px;
        }

            .settings.panel .setting-box .setting-title {
                padding: 5px 0;
            }

            .settings.panel .setting-box:last-child {
                border-bottom: none;
            }

.colors-row {
    display: table;
    height: 100%;
    table-layout: fixed;
    width: 100%;
    padding-bottom: 0 !important;
    padding-top: 5px !important;
    border-bottom: none !important;
}

.color-theme {
    display: table-cell;
    height: 100%;
    vertical-align: top;
    padding-right: 5px;
}

    .color-theme:last-child {
        padding-right: 0;
    }

    .color-theme .color-layout > label {
        border: 1px solid var(--text);
        cursor: pointer;
        display: block;
        overflow: hidden;
        position: relative;
    }

        .color-theme .color-layout > label .ti-check {
            color: var(--surface);
            display: block;
            font-size: 12px;
            height: 100%;
            opacity: 0;
            position: absolute;
            text-align: center;
            width: 100%;
            z-index: 1;
            background: var(--text);
            padding: 10px;
        }

        .color-theme .color-layout > label > input[type="radio"] {
            opacity: 0;
            position: absolute;
            visibility: hidden;
        }

            .color-theme .color-layout > label > input[type="radio"]:checked + .ti-check {
                opacity: 1 !important;
            }

        .color-theme .color-layout > label > .color {
            display: block;
            height: 18px;
            position: relative;
        }

        .color-theme .color-layout > label > .split {
            display: block;
            position: relative;
        }

            .color-theme .color-layout > label > .split:before, .color-theme .color-layout > label > .split:after {
                content: " ";
                display: table;
            }

            .color-theme .color-layout > label > .split:after {
                clear: both;
            }

            .color-theme .color-layout > label > .split > .color {
                display: block;
                height: 20px;
                position: relative;
            }

                .color-theme .color-layout > label > .split > .color:first-child {
                    float: left;
                    width: 30%;
                }

                .color-theme .color-layout > label > .split > .color:last-child {
                    float: right;
                    width: 70%;
                }

                .color-theme .color-layout > label > .split > .color .element {
                    position: absolute;
                    height: 5px;
                    width: 100%;
                    top: 5px;
                }

            .color-theme .color-layout > label > .split.header > .color {
                height: 10px;
            }

.theme-1 .th-header {
    background: var(--surface);
}

.theme-1 .th-collapse {
    background: var(--surface);
}

.theme-1 .th-sidebar {
    background: var(--surface);
}

.theme-1 .th-body {
    background: var(--bg);
}

.theme-1 .element {
    background: var(--primary);
}

.theme-2 .th-header {
    background: var(--text);
}

.theme-2 .th-collapse {
    background: var(--surface);
}

.theme-2 .th-sidebar {
    background: var(--text);
}

.theme-2 .th-body {
    background: var(--surface-3);
}

.theme-2 .element {
    background: var(--error);
}

.theme-3 .th-header {
    background: var(--text-muted);
}

.theme-3 .th-collapse {
    background: var(--text-muted);
}

.theme-3 .th-sidebar {
    background: var(--accent-purple);
}

.theme-3 .th-body {
    background: var(--surface-3);
}

.theme-3 .element {
    background: var(--primary);
}

.theme-4 .th-header {
    background: var(--surface-3);
}

.theme-4 .th-collapse {
    background: var(--surface-3);
}

.theme-4 .th-sidebar {
    background: var(--bg);
}

.theme-4 .th-body {
    background: var(--surface-2);
}

.theme-4 .element {
    background: var(--primary);
}

.theme-5 .th-header {
    background: var(--text);
}

.theme-5 .th-collapse {
    background: var(--text);
}

.theme-5 .th-sidebar {
    background: var(--text-muted);
}

.theme-5 .th-body {
    background: var(--surface-2);
}

.theme-5 .element {
    background: var(--success);
}

.theme-6 .th-header {
    background: var(--text);
}

.theme-6 .th-collapse {
    background: var(--surface);
}

.theme-6 .th-sidebar {
    background: var(--text);
}

.theme-6 .th-body {
    background: var(--surface-3);
}

.theme-6 .element {
    background: var(--text);
}

/* ---------------------------------------------------------------------- */
/*  OFF SIDEBAR
/* ---------------------------------------------------------------------- */
#off-sidebar {
    bottom: 0;
    position: fixed;
    right: -260px;
    top: 64px;
    -moz-transition: all 0.3s !important 0s;
    -o-transition: all 0.3s !important 0s;
    -webkit-transition: all 0.3s !important;
    -webkit-transition-delay: 0s;
    transition: all 0.3s !important 0s;
    width: 260px;
    z-index: 1091;
    background: var(--surface);
    border-left: 1px solid var(--text-disabled);
    border-top: 1px solid var(--text-disabled);
    overflow: hidden;
}

    #off-sidebar .tab-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 45px;
    }

@media (max-width: 991px) {
    #off-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 0;
        -webkit-transform: translate3d(260px, 0, 0);
        transform: translate3d(260px, 0, 0);
        -moz-transition: -moz-transform 300ms ease 0s;
        -o-transition: -o-transform 300ms ease 0s;
        -webkit-transition: -webkit-transform 300ms ease;
        -webkit-transition-delay: 0s;
        transition: transform 300ms ease 0s;
    }
}

#off-sidebar .tab-pane {
    height: 100%;
    padding: 0;
}

#off-sidebar div[perfect-scrollbar] {
    overflow: hidden !important;
}

.app-mobile #off-sidebar div[perfect-scrollbar] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

@media (min-width: 992px) {
    .app-offsidebar-open #off-sidebar {
        right: 0;
    }
}

@media (max-width: 991px) {
    .app-offsidebar-open #off-sidebar {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -moz-transition: -moz-transform 300ms ease 0s;
        -o-transition: -o-transform 300ms ease 0s;
        -webkit-transition: -webkit-transform 300ms ease;
        -webkit-transition-delay: 0s;
        transition: transform 300ms ease 0s;
    }
}

#off-sidebar .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
}

    #off-sidebar .nav-tabs.nav-justified > li.active > a, #off-sidebar .nav-tabs.nav-justified > li.active > a:hover, #off-sidebar .nav-tabs.nav-justified > li.active > a:focus {
        border-bottom-color: var(--surface);
    }

    #off-sidebar .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid var(--text-disabled);
        border-right: 1px solid var(--text-disabled);
        border-left: none;
        border-radius: 0;
        border-top: none;
    }

        #off-sidebar .nav-tabs.nav-justified > li > a i {
            font-size: 17px;
        }

    #off-sidebar .nav-tabs.nav-justified > li.active > a, #off-sidebar .nav-tabs.nav-justified > li.active > a:hover, #off-sidebar .nav-tabs.nav-justified > li.active > a:focus {
        color: var(--text-disabled);
    }

    #off-sidebar .nav-tabs.nav-justified > li:first-child > a {
        border-left: none !important;
    }

    #off-sidebar .nav-tabs.nav-justified > li:last-child > a {
        border-right: none !important;
    }

#off-sidebar .save-options {
    padding: 10px;
}

#off-sidebar .sidebar-wrapper {
    position: relative;
    min-height: 100%;
}

#off-sidebar #users {
    position: relative;
    right: 0;
    top: 0;
    height: 100%;
}

.app-offsidebar-open #off-sidebar #users {
    -moz-transition: right 0.3s ease 0s;
    -o-transition: right 0.3s ease 0s;
    -webkit-transition: right 0.3s ease;
    -webkit-transition-delay: 0s;
    transition: right 0.3s ease 0s;
}

.app-slide-off #off-sidebar #users {
    right: 0 !important;
}

#off-sidebar #users.chat-open {
    right: 260px;
}

#off-sidebar #users .user-chat {
    position: relative;
    left: 260px;
    top: 0;
    height: 100%;
}

#off-sidebar #users .chat-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 50px;
}

#off-sidebar .users-list {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    height: 100%;
}

#off-sidebar .media-list .media {
    border-bottom: 1px solid var(--text-disabled);
    margin: 0;
}

    #off-sidebar .media-list .media a {
        padding: 10px;
        display: block;
    }

        #off-sidebar .media-list .media a:hover {
            background: var(--topbar-hover);
            text-decoration: none;
        }

#off-sidebar .sidebar-title {
    color: var(--text-disabled);
    font-size: 11px;
    margin: 15px 10px 10px 10px;
    text-transform: uppercase;
}

#off-sidebar .sidebar-back {
    position: absolute;
    text-decoration: none;
    padding: 10px;
    top: -40px;
}

    #off-sidebar .sidebar-back i {
        display: inline-block;
        font-size: 17px;
        margin-right: -2px;
        margin-top: 2px;
        font-weight: 600;
        vertical-align: top;
    }

    #off-sidebar .sidebar-back span {
        font-size: 15px;
        position: relative;
    }

#off-sidebar .media-list .media .media-object {
    border-radius: 50% !important;
    float: left;
    margin-right: 10px;
    opacity: 0.8;
    width: 40px;
}

#off-sidebar .media-list .media .ff-avatar-placeholder {
    align-items: center;
    background: var(--surface-3);
    color: var(--text-muted);
    display: flex;
    font-size: 18px;
    height: 40px;
    justify-content: center;
}

#off-sidebar .media-list .media .user-label {
    display: inline-block;
    margin-top: 10px;
    position: absolute;
    right: 25px;
}

#off-sidebar .media-list .media .status-online {
    line-height: 40px;
    font-size: 6px;
    position: absolute;
    right: 10px;
    display: inline-block;
    color: var(--primary);
}

#off-sidebar .media-list .media .media-heading {
    color: var(--text-muted) !important;
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

#off-sidebar .media-list .media .media-body span {
    color: var(--text-disabled);
    display: block;
    font-size: 12px;
}

#off-sidebar .sidebar-content {
    height: 100%;
    position: relative;
}

#off-sidebar .discussion .avatar img {
    border-radius: 50% !important;
    width: 40px;
}

#off-sidebar .discussion .messages {
    margin-top: 10px;
}

    #off-sidebar .discussion .messages p {
        font-size: 12px;
    }

#off-sidebar .message-bar {
    position: absolute;
    bottom: 0;
}

/* ---------------------------------------------------------------------- */
/*  Utilities
/* ---------------------------------------------------------------------- */
.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.inline {
    display: inline;
}

.no-radius {
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0;
    border-radius: 0 !important;
}

.no-border {
    border: none !important;
}

.border-right {
    border-right-style: solid;
    border-right-width: 1px;
    border-color: var(--text);
}

.border-left {
    border-left-style: solid;
    border-left-width: 1px;
    border-color: var(--text);
}

.border-top {
    border-top-style: solid;
    border-top-width: 1px;
    border-color: var(--text);
}

.border-bottom {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: var(--text);
}

.border-light {
    border-color: var(--surface) !important;
}

.border-around {
    border: 1px solid var(--text-disabled);
}

.panel-var(--surface) .border-light, .partition-var(--surface) .border-light {
    border-color: var(--text) !important;
}

.border-dark {
    border-color: var(--text);
}

.panel-var(--surface) .border-dark, .partition-var(--surface) .border-dark {
    border-color: var(--text) !important;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.no-display {
    display: none !important;
}

.display-table {
    display: table !important;
}

.display-table-cell {
    display: table-cell !important;
}

.example {
    margin: 15px 0;
    padding: 14px 19px;
}

.space5 {
    display: block;
    margin-bottom: 5px !important;
    clear: both;
}

.space7 {
    margin-bottom: 7px !important;
    clear: both;
}

.space10 {
    margin-bottom: 10px !important;
    clear: both;
}

.space12 {
    margin-bottom: 12px !important;
    clear: both;
}

.space15 {
    margin-bottom: 15px !important;
    clear: both;
}

.space20 {
    margin-bottom: 20px !important;
    clear: both;
}

.padding-5 {
    padding: 5px !important;
}

.padding-10 {
    padding: 10px !important;
}

.padding-15 {
    padding: 15px !important;
}

.padding-20 {
    padding: 20px !important;
}

.padding-25 {
    padding: 25px !important;
}

.padding-30 {
    padding: 30px !important;
}

.padding-35 {
    padding: 35px !important;
}

.padding-40 {
    padding: 40px !important;
}

.padding-horizontal-5 {
    padding: 0 5px !important;
}

.padding-horizontal-10 {
    padding: 0 10px !important;
}

.padding-horizontal-15 {
    padding: 0 15px !important;
}

.padding-horizontal-20 {
    padding: 0 20px !important;
}

.padding-vertical-10 {
    padding: 10px 0 !important;
}

.padding-vertical-15 {
    padding: 15px 0 !important;
}

.padding-vertical-20 {
    padding: 20px 0 !important;
}

.padding-bottom-0 {
    padding-bottom: 0px !important;
}

.padding-bottom-5 {
    padding-bottom: 5px !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-15 {
    padding-bottom: 15px !important;
}

.padding-bottom-20 {
    padding-bottom: 20px !important;
}

.padding-bottom-25 {
    padding-bottom: 25px !important;
}

.padding-bottom-30 {
    padding-bottom: 30px !important;
}

.padding-top-0 {
    padding-top: 0px !important;
}

.padding-top-5 {
    padding-top: 5px !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-top-15 {
    padding-top: 15px !important;
}

.padding-top-20 {
    padding-top: 20px !important;
}

.padding-top-25 {
    padding-top: 25px !important;
}

.padding-top-30 {
    padding-top: 30px !important;
}

.padding-left-0 {
    padding-left: 0px !important;
}

.padding-left-5 {
    padding-left: 5px !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-left-15 {
    padding-left: 15px !important;
}

.padding-left-20 {
    padding-left: 20px !important;
}

.padding-left-25 {
    padding-left: 25px !important;
}

.padding-left-30 {
    padding-left: 30px !important;
}

.padding-right-0 {
    padding-right: 0px !important;
}

.padding-right-5 {
    padding-right: 5px !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}

.padding-right-15 {
    padding-right: 15px !important;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.padding-right-25 {
    padding-right: 25px !important;
}

.padding-right-30 {
    padding-right: 30px !important;
}

.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-25 {
    margin-bottom: 25px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px !important;
}

.margin-top-0 {
    margin-top: 0px !important;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-15 {
    margin-top: 15px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-25 {
    margin-top: 25px !important;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.margin-right-0 {
    margin-right: 0px !important;
}

.margin-right-5 {
    margin-right: 5px !important;
}

.margin-right-10 {
    margin-right: 10px !important;
}

.margin-right-15 {
    margin-right: 15px !important;
}

.margin-right-20 {
    margin-right: 20px !important;
}

.margin-right-25 {
    margin-right: 25px !important;
}

.margin-right-30 {
    margin-right: 30px !important;
}

.margin-left-0 {
    margin-left: 0px !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-10 {
    margin-left: 10px !important;
}

.margin-left-15 {
    margin-left: 15px !important;
}

.margin-left-20 {
    margin-left: 20px !important;
}

.margin-left-25 {
    margin-left: 25px !important;
}

.margin-left-30 {
    margin-left: 30px !important;
}

.min-height-155 {
    min-height: 155px !important;
}

.min-height-180 {
    min-height: 180px !important;
}

.min-height-200 {
    min-height: 200px !important;
}

.min-height-230 {
    min-height: 230px !important;
}

.min-height-250 {
    min-height: 250px !important;
}

.min-height-270 {
    min-height: 270px !important;
}

.min-height-280 {
    min-height: 280px !important;
}

.min-height-300 {
    min-height: 300px !important;
}

.min-height-350 {
    min-height: 350px !important;
}

.height-155 {
    height: 155px !important;
}

.height-180 {
    height: 180px !important;
}

.height-200 {
    height: 200px !important;
}

.height-230 {
    height: 230px !important;
}

.height-250 {
    height: 250px !important;
}

.height-270 {
    height: 270px !important;
}

.height-300 {
    height: 300px !important;
}

.height-330 {
    height: 330px !important;
}

.height-350 {
    height: 350px !important;
}

.width-200 {
    width: 200px !important;
}

.vertical-align-bottom {
    vertical-align: bottom !important;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.vertical-align-top {
    vertical-align: top !important;
}

.text-muted {
    color: var(--text-disabled);
}

.text-bold {
    font-weight: bold !important;
}

.text-extra-small {
    font-size: 11px !important;
}

.text-small {
    font-size: 12px !important;
}

.text-large {
    font-size: 16px !important;
}

.text-extra-large {
    font-size: 17px !important;
}

h1.text-extra-large {
    font-size: 50px !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-var(--text-muted) {
    color: var(--text-disabled) !important;
}

.text-azure {
    color: var(--primary) !important;
}

.text-var(--warning) {
    color: var(--warning) !important;
}

.text-var(--success) {
    color: var(--primary) !important;
}

.text-var(--primary) {
    color: var(--text-muted) !important;
}

.text-pink {
    color: var(--error) !important;
}

.text-var(--accent-purple) {
    color: var(--error) !important;
}

.text-bricky {
    color: var(--text-muted) !important;
}

.text-var(--warning) {
    color: var(--warning) !important;
}

.text-var(--error) {
    color: var(--error) !important;
}

.text-var(--surface) {
    color: var(--surface) !important;
}

a.text-var(--surface) {
    color: var(--surface) !important;
}

    a.text-var(--surface):hover {
        color: var(--surface) !important;
    }

.text-dark {
    color: var(--text) !important;
}

a.text-dark:hover {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-disabled) !important;
}

a.text-light:hover {
    color: var(--text-disabled) !important;
}

.text-var(--surface)-transparent {
    color: var(--surface) !important;
}

/* ---------------------------------------------------------------------- */
/*  Background Colors
/* ---------------------------------------------------------------------- */
.no-bg {
    background: none !important;
}
/*Edited by Michael*/
.bg-var(--surface) {
    background: var(--surface-2) /*var(--surface)*/ !important;
}

.bg-var(--text) {
    background: var(--text) !important;
    color: var(--surface);
}

.bg-primary {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-light-primary {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-dark-primary {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-success {
    background: var(--success) !important;
    color: var(--surface);
}

.bg-info {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-warning {
    background: var(--warning) !important;
    color: var(--surface);
}

.bg-danger {
    background: var(--error) !important;
    color: var(--surface);
}

.bg-azure {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-light-azure {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-dark-azure {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-var(--error) {
    background: var(--error) !important;
    color: var(--surface);
}

.bg-light-var(--error) {
    background: var(--error) !important;
    color: var(--surface);
}

.bg-dark-var(--error) {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-var(--success) {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-light-var(--success) {
    background: var(--primary) !important;
    color: var(--surface);
}

.bg-dark-var(--success) {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-var(--warning) {
    background: var(--warning) !important;
    color: var(--surface);
}

.bg-light-var(--warning) {
    background: var(--warning) !important;
    color: var(--surface);
}

.bg-dark-var(--warning) {
    background: var(--error) !important;
    color: var(--surface);
}

.bg-var(--primary) {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-light-var(--primary) {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-dark-var(--primary) {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-pink {
    background: var(--error) !important;
    color: var(--surface);
}

.bg-light-pink {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-dark-pink {
    background: var(--error) !important;
    color: var(--surface);
}

.bg-var(--accent-purple) {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-light-var(--accent-purple) {
    background: var(--accent-purple) !important;
    color: var(--surface);
}

.bg-dark-var(--accent-purple) {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-beige {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-light-beige {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-dark-beige {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-var(--text-muted) {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-light-var(--text-muted) {
    background: var(--bg) !important;
}

.bg-dark-var(--text-muted) {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-var(--warning) {
    background: var(--warning) !important;
    color: var(--surface);
}

.bg-light-var(--warning) {
    background: var(--text-disabled) !important;
    color: var(--surface);
}

.bg-dark-var(--warning) {
    background: var(--warning) !important;
    color: var(--surface);
}

.bg-bricky {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-light-bricky {
    background: var(--accent-purple) !important;
    color: var(--surface);
}

.bg-dark-bricky {
    background: var(--text-muted) !important;
    color: var(--surface);
}

.bg-body {
    background: var(--bg);
}

.center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.circle-100 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    -moz-box-shadow: 0, 1px, 2px, var(--text-disabled);
    -webkit-box-shadow: 0, 1px, 2px, var(--text-disabled);
    box-shadow: 0, 1px, 2px, var(--text-disabled);
}

.circle-50 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 55px;
    text-align: center;
    display: inline-block;
    -moz-box-shadow: 0, 1px, 2px, var(--text-disabled);
    -webkit-box-shadow: 0, 1px, 2px, var(--text-disabled);
    box-shadow: 0, 1px, 2px, var(--text-disabled);
}

.rate .value {
    font-size: 30px;
    font-weight: 600;
}

.rate i {
    vertical-align: middle;
    padding-bottom: 15px;
}

.rate .percentage {
    vertical-align: middle;
    font-size: 15px;
    padding-bottom: 15px;
}

.rate img {
    display: block;
    position: relative;
    width: 100%;
}

.overlayer {
    display: block;
    position: absolute;
    z-index: 101;
    background-image: linear-gradient(transparent 0px, var(--text) 100%);
    opacity: 1;
}

    .overlayer.fullwidth {
        width: 100%;
    }

    .overlayer .overlayer-wrapper {
        display: block;
        position: relative;
        z-index: 100;
    }

.bottom-left {
    bottom: 0;
    left: 0;
    position: absolute;
}

.tags {
    display: inline-block;
    background: var(--text-disabled);
    color: var(--surface) !important;
    text-decoration: none;
    cursor: pointer;
    margin: 0 0 10px 18px;
    padding: 2px 10px 1px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    position: relative;
    transition: all .25s linear;
    var(--surface)-space: nowrap;
    line-height: 21px;
}

    .tags:before {
        content: "";
        border-style: solid;
        border-color: transparent var(--text-disabled) transparent transparent;
        border-width: 12px 13px 12px 0;
        position: absolute;
        left: -13px;
        top: 0;
        transition: all .25s linear;
    }

    .tags:hover {
        background-color: var(--text-muted);
        color: var(--surface);
    }

        .tags:hover:before {
            border-color: transparent var(--text-muted) transparent transparent;
        }

    .tags:after {
        background: none repeat scroll 0 0 var(--surface);
        border-radius: 50% 50% 50% 50%;
        content: "";
        height: 5px;
        left: -1px;
        position: absolute;
        top: 10px;
        width: 5px;
    }

.tooltip-notification {
    cursor: pointer;
    right: 0;
    margin-top: 3px;
    padding: 5px 0;
    position: absolute;
    top: 25px;
    z-index: 10000;
}

.toolbar .tooltip-notification {
    top: 60px;
    right: 20px;
}

.tooltip-notification .tooltip-notification-arrow {
    border-width: 0 5px 5px;
    left: 80%;
    margin-left: -5px;
    top: 0;
    border-color: transparent;
    border-bottom-color: var(--text);
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
}

.tooltip-notification .tooltip-notification-inner {
    background-color: var(--text);
    border-radius: 4px;
    color: var(--surface);
    font-size: 12px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    line-height: normal;
}

    .tooltip-notification .tooltip-notification-inner .message {
        color: var(--text-disabled);
        font-size: 11px;
        margin-top: -4px;
    }

    .tooltip-notification .tooltip-notification-inner > div {
        width: 100px;
    }

.float-none {
    float: none;
}

.background-dark {
    background: var(--text);
}

.background-light {
    background: var(--surface) !important;
}

.radius-3 {
    border-radius: 3px;
}

.radius-5 {
    border-radius: 5px;
}

.radius-10 {
    border-radius: 10px;
}

.stack-right-bottom {
    left: auto !important;
    right: -0.5em !important;
    top: auto !important;
    bottom: -0.5em !important;
    text-shadow: 2px 0 0 var(--surface), -2px 0 0 var(--surface), 0 2px 0 var(--surface), 0 -2px 0 var(--surface), 1px 1px var(--surface), -1px -1px 0 var(--surface), 1px -1px 0 var(--surface), -1px 1px 0 var(--surface);
}

.noTransform {
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.vertical-bottom {
    vertical-align: bottom;
}

.vertical-middle {
    vertical-align: middle;
}

.vertical-top {
    vertical-align: top;
}

.show-grid {
    margin-bottom: 15px;
}

    .show-grid [class^="col-"] {
        background-color: var(--text);
        border: 1px solid var(--text);
        padding-bottom: 10px;
        padding-top: 10px;
    }

.no-wrap {
    var(--surface)-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Dropdown Menu
/* ---------------------------------------------------------------------- */
.dropdown-menu.dropdown-dark {
    background-color: var(--text);
    border: 1px solid var(--text);
    border-radius: 0;
    box-shadow: none;
    list-style: none outside none;
    max-width: 300px;
    min-width: 166px;
    padding: 0;
    position: absolute;
    text-shadow: none;
    z-index: 1000;
}

    .dropdown-menu.dropdown-dark:after {
        border-color: transparent;
        border-style: solid;
        display: block;
        height: 0;
        position: absolute;
        width: 0;
        border-width: 10px;
        content: "";
        border-bottom-color: var(--text);
        border-top-width: 0;
        content: " ";
        top: -9px;
        left: 10px;
    }

    .dropdown-menu.dropdown-dark.pull-right:after {
        left: auto;
        right: 10px;
    }

    .dropdown-menu.dropdown-dark .dropdown-header {
        padding: 8px 8px 6px;
        color: var(--bg);
        font-size: 11px;
    }

    .dropdown-menu.dropdown-dark .divider {
        background: none;
    }

    .dropdown-menu.dropdown-dark li p, .dropdown-menu.dropdown-dark li a, .dropdown-menu.dropdown-dark .drop-down-wrapper li p, .dropdown-menu.dropdown-dark .drop-down-wrapper li a {
        color: var(--surface-3);
        border-bottom-color: var(--text);
        color: var(--surface);
        font-size: 12px;
        font-weight: 300;
        margin: 0;
        padding: 8px 8px 6px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        var(--surface)-space: normal !important;
        display: block;
    }

    .dropdown-menu.dropdown-dark li:last-child a {
        border-bottom: none !important;
        border-radius: 0 0 6px 6px;
    }

    .dropdown-menu.dropdown-dark > li > a:hover, .dropdown-menu.dropdown-dark > li > a:focus, .dropdown-menu.dropdown-dark .dropdown-submenu:hover > a, .dropdown-menu.dropdown-dark .dropdown-submenu:focus > a, .dropdown-menu.dropdown-dark .drop-down-wrapper li a:hover, .dropdown-menu.dropdown-dark .drop-down-wrapper li a:focus {
        background-color: var(--text);
    }

.dropdown-menu.dropdown-light {
    background-color: var(--surface);
    border: 1px solid var(--text);
    max-width: 300px;
    min-width: 166px;
    border-radius: 7px;
    padding: 0;
}

    .dropdown-menu.dropdown-light:before, .dropdown-menu.dropdown-light:after {
        border-color: transparent;
        border-style: solid;
        display: block;
        height: 0;
        position: absolute;
        width: 0;
    }

    .dropdown-menu.dropdown-light:before {
        border-bottom-color: var(--text);
        border-style: solid;
        display: block;
        height: 0;
        position: absolute;
        width: 0;
        border-width: 11px;
        content: "";
        border-top-width: 0;
        content: " ";
        top: -11px;
        left: 10px;
    }

    .dropdown-menu.dropdown-light:after {
        border-color: transparent;
        border-style: solid;
        display: block;
        height: 0;
        position: absolute;
        width: 0;
        border-width: 10px;
        content: "";
        border-bottom-color: var(--surface);
        border-top-width: 0;
        content: " ";
        top: -9px;
        left: 11px;
    }

    .dropdown-menu.dropdown-light.pull-right:after {
        left: auto;
        right: 11px;
    }

    .dropdown-menu.dropdown-light.pull-right:before {
        left: auto;
        right: 10px;
    }

    .dropdown-menu.dropdown-light li a {
        border-bottom: 1px solid var(--border);
        font-size: 14px;
        line-height: 35px;
        color: var(--primary);
        text-align: center;
    }

    .dropdown-menu.dropdown-light li:first-child a {
        border-radius: 7px 7px 0 0;
    }

    .dropdown-menu.dropdown-light li:last-child a {
        border-radius: 0 0 7px 7px;
    }

    .dropdown-menu.dropdown-light li:last-child a {
        border-bottom: none;
    }

.drop-down-wrapper .list-group-item {
    border-left: none;
    border-right: none;
    margin-top: 0;
}

    .drop-down-wrapper .list-group-item:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .drop-down-wrapper .list-group-item:last-child {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

.dropdown-header {
    padding: 5px 10px;
}

/* ---------------------------------------------------------------------- */
/* Tabs
/* ---------------------------------------------------------------------- */
.nav-tabs {
    margin-bottom: 0;
    padding: 0;
}

    .nav-tabs.nav-justified > li > a {
        border-left: none !important;
        border-radius: 0;
        border-top: none !important;
        border-right: none !important;
    }

    .nav-tabs > li {
        margin-bottom: -3px;
        text-align: center;
        border-left: 1px solid var(--text-disabled);
    }


        .nav-tabs > li.dropdown.active a {
            cursor: pointer;
        }

        .nav-tabs > li.dropdown .dropdown-menu > .active a, .nav-tabs > li.dropdown .dropdown-menu > .active a:hover, .nav-tabs > li.dropdown .dropdown-menu > .active a:focus {
            background-color: var(--bg);
            color: var(--surface);
        }

        .nav-tabs > li > a {
            border: 0 none;
            border-radius: 0;
            color: var(--text-disabled);
            min-width: 70px;
            padding: 15px 20px;
        }

        .nav-tabs > li.active a, .nav-tabs > li.active a:hover, .nav-tabs > li.active a:focus {
            border-width: 0;
        }

    .nav-tabs > .active a, .nav-tabs > .active a:hover, .nav-tabs > .active a:focus {
        border: 0 none;
        -moz-box-shadow: 1px 1px 2px var(--text);
        -webkit-box-shadow: 1px 1px 2px var(--text);
        box-shadow: 1px 1px 2px var(--text);
        color: var(--text-muted);
    }

.panel-tabs, .tabbable {
    background-color: var(--surface-3);
    padding: 1px;
    margin-bottom: 15px;
}

    .tabbable[type="pills"] {
        background: none;
    }

        .tabbable[type="pills"] > .nav {
            margin-bottom: 10px;
        }

.panel-tabs {
    padding: 0;
}

    .panel-tabs .panel-heading {
        background: var(--bg);
    }

    .panel-tabs .panel-body {
        padding: 0;
    }

    .panel-tabs .tabbable {
        margin: 0;
        padding: 0;
    }

    .panel-tabs .nav-tabs {
        border: medium none;
        float: right;
        margin-top: -48px;
    }

        .panel-tabs .nav-tabs > li > a {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

.tab-content {
    background-color: var(--surface);
    position: relative;
}

    .tab-content > .tab-pane, .pill-content > .pill-pane {
        display: none;
        padding: 15px;
    }

    .tab-content > .active, .pill-content > .active {
        display: block;
    }

.tabs-left.tabbable {
    background-color: none;
    padding: 0;
}

.tabs-left .tab-content {
    border-top: 1px solid var(--bg);
    border-right: 1px solid var(--bg);
    border-bottom: 1px solid var(--bg);
    overflow: hidden;
}

.tabs-left > .nav-tabs {
    border: none;
    float: left;
    margin-bottom: 0;
    top: auto;
}

    .tabs-left > .nav-tabs > li {
        float: none;
        text-align: left;
    }

        .tabs-left > .nav-tabs > li > a, .tabs-left > .nav-tabs > li a:focus, .tabs-left > .nav-tabs > li a:hover {
            border-color: var(--bg);
            margin: 0 -1px 0 0;
        }

        .tabs-left > .nav-tabs > li.active > a, .tabs-left > .nav-tabs > li.active a:focus, .tabs-left > .nav-tabs > li.active a:hover {
            border-color: var(--bg);
            border-right: none;
            border-left: 1px solid var(--bg);
            border-top-width: 1px;
            margin: 0 -1px;
        }

.tabs-right.tabbable {
    background-color: none;
    padding: 0;
}

.tabs-right .tab-content {
    border-top: 1px solid var(--bg);
    border-left: 1px solid var(--bg);
    border-bottom: 1px solid var(--bg);
    overflow: hidden;
}

.tabs-right > .nav-tabs {
    border: none;
    float: right;
    margin-bottom: 0;
    top: auto;
}

    .tabs-right > .nav-tabs > li {
        text-align: left;
        float: none;
    }

        .tabs-right > .nav-tabs > li > a, .tabs-right > .nav-tabs > li a:focus, .tabs-right > .nav-tabs > li a:hover {
            border-color: var(--bg);
            margin: 0 0 0 -1px;
        }

        .tabs-right > .nav-tabs > li.active > a, .tabs-right > .nav-tabs > li.active a:focus, .tabs-right > .nav-tabs > li.active a:hover {
            border-color: var(--bg);
            border-right: 1px solid var(--bg) !important;
            border-left: none;
            border-top-width: 1px;
            margin: 0 -1px;
        }

.tabs-below > .nav-tabs {
    border-bottom-width: 0;
    border-color: var(--bg);
    margin-bottom: 0;
    margin-top: 0;
    top: auto;
}

    .tabs-below > .nav-tabs > li {
        margin-bottom: 0;
    }

        .tabs-below > .nav-tabs > li > a, .tabs-below > .nav-tabs > li a:focus, .tabs-below > .nav-tabs > li a:hover {
            border-color: var(--bg);
        }

        .tabs-below > .nav-tabs > li.active > a, .tabs-below > .nav-tabs > li.active a:focus, .tabs-below > .nav-tabs > li.active a:hover {
            border-bottom: none;
            border-color: transparent var(--bg) var(--bg);
            margin-top: 0;
        }

.partition-dark .nav-tabs {
    border: none;
}

    .partition-dark .nav-tabs > li {
        margin-bottom: 0;
    }

        .partition-dark .nav-tabs > li.active > a, .partition-dark .nav-tabs > li.active > a:hover, .partition-dark .nav-tabs > li.active a:focus {
            background-color: var(--text);
            border: none;
            color: var(--surface);
        }

            .partition-dark .nav-tabs > li.active > a:before, .partition-dark .nav-tabs > li.active a:after {
                border-color: transparent;
                border-style: solid;
                display: block;
                height: 0;
                position: absolute;
                width: 0;
            }

            .partition-dark .nav-tabs > li.active > a:after {
                content: " ";
                height: 0;
                position: absolute;
                width: 0;
                border: 5px solid transparent;
                border-top-color: var(--text);
                top: 100%;
                left: 50%;
                margin-left: -5px;
                z-index: 1;
            }

        .partition-dark .nav-tabs > li > a {
            border: none;
            color: var(--bg);
            padding: 10px 15px;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
        }

            .partition-dark .nav-tabs > li > a:hover, .partition-dark .nav-tabs > li a:focus {
                background-color: var(--text);
            }

.partition-dark .tab-content {
    z-index: 0;
    color: var(--text);
}

/* ---------------------------------------------------------------------- */
/*  Panels
/* ---------------------------------------------------------------------- */
.panel {
    background: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: var(--text-muted);
    border: none;
    position: relative;
}

.panel-footer {
    position: relative;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: inherit;
    padding: 15px;
    background: none;
}

.panel-heading {
    position: relative;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: 15px;
    min-height: 50px;
}

    .panel-heading .panel-heading-tabs {
        list-style: none;
        top: 0;
        right: 0;
        position: absolute;
        margin: 0;
        padding: 0;
    }

        .panel-heading .panel-heading-tabs > li {
            float: left;
            padding: 0 15px;
            border-left-width: 1px;
            border-left-style: solid;
            border-left-color: inherit;
            height: 50px;
            line-height: 50px;
        }

            .panel-heading .panel-heading-tabs > li.panel-tools {
                position: relative;
                filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
                opacity: 1;
                right: auto;
                top: auto;
            }

                .panel-heading .panel-heading-tabs > li.panel-tools .tmp-tool {
                    right: 20px;
                    top: auto;
                }

                .panel-heading .panel-heading-tabs > li.panel-tools .dropdown {
                    line-height: normal;
                }

.core-box .heading {
    margin-bottom: 15px;
}

.core-box .core-icon {
    width: 33.3333%;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

    .core-box .core-icon .icon-big {
        line-height: 80px;
    }

.core-box .core-content {
    margin-left: 33.3333%;
    min-height: 120px;
}

.core-box .heading {
    font-size: 12px;
}

.core-box .title {
    font-size: 20px;
    line-height: 21px;
    margin-bottom: 0;
    font-weight: 400;
}

.core-box .subtitle {
    font-size: 14px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
}

.core-box .content {
    line-height: 20px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 60px;
}

    .core-box .content .fa {
        font-size: 50px;
        left: 0;
        top: 0;
        position: absolute;
        width: 40px;
    }

.core-box .view-more {
    float: right;
}

    .core-box .view-more i {
        display: inline-block;
    }

.panel-tools {
    position: absolute;
    right: 10px;
    top: 14px;
    font-size: 12px;
}

.panel-portfolio .portfolio-grid {
    padding: 0;
    text-align: center;
    overflow: hidden;
    max-height: 200px;
    position: relative;
}

    .panel-portfolio .portfolio-grid .item {
        overflow: hidden !important;
    }

.panel-portfolio .navigator {
    position: relative;
    text-align: center;
    margin-top: -40px;
    margin-bottom: 10px;
    z-index: 101;
}

.panel-transparent, .partition-transparent {
    background: none;
    position: relative;
    box-shadow: none;
    color: var(--text);
}

    .panel-transparent .panel-tools .btn, .panel-transparent .panel-tools > a, .partition-transparent .panel-tools .btn, .partition-transparent .panel-tools > a {
        color: var(--text) !important;
    }

        .panel-transparent .panel-tools .btn:hover, .panel-transparent .panel-tools > a:hover, .partition-transparent .panel-tools .btn:hover, .partition-transparent .panel-tools > a:hover {
            color: var(--text-muted) !important;
        }

.panel-primary, .partition-primary {
    background-color: var(--primary);
    position: relative;
    color: var(--surface);
}

    .panel-primary .panel-heading, .partition-primary .panel-heading {
        background-color: var(--primary);
        border: none;
    }

    .panel-primary .panel-tools .btn, .panel-primary .panel-tools > a, .partition-primary .panel-tools .btn, .partition-primary .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-primary .panel-tools .btn:hover, .panel-primary .panel-tools > a:hover, .partition-primary .panel-tools .btn:hover, .partition-primary .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-light-primary, .partition-light-primary {
    background-color: var(--primary);
    position: relative;
    color: var(--surface);
}

    .panel-light-primary .panel-heading, .partition-light-primary .panel-heading {
        background-color: var(--primary);
        border: none;
    }

    .panel-light-primary .panel-tools .btn, .panel-light-primary .panel-tools > a, .partition-light-primary .panel-tools .btn, .partition-light-primary .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-light-primary .panel-tools .btn:hover, .panel-light-primary .panel-tools > a:hover, .partition-light-primary .panel-tools .btn:hover, .partition-light-primary .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-dark-primary, .partition-dark-primary {
    background-color: var(--primary);
    position: relative;
    color: var(--surface);
}

    .panel-dark-primary .panel-heading, .partition-dark-primary .panel-heading {
        background-color: var(--primary);
        border: none;
    }

    .panel-dark-primary .panel-tools .btn, .panel-dark-primary .panel-tools > a, .partition-dark-primary .panel-tools .btn, .partition-dark-primary .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-dark-primary .panel-tools .btn:hover, .panel-dark-primary .panel-tools > a:hover, .partition-dark-primary .panel-tools .btn:hover, .partition-dark-primary .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-var(--text-muted), .partition-var(--text-muted) {
    background-color: var(--text-disabled);
    position: relative;
    color: var(--text-muted);
}

    .panel-var(--text-muted) .panel-tools .btn, .panel-var(--text-muted) .panel-tools > a, .partition-var(--text-muted) .panel-tools .btn, .partition-var(--text-muted) .panel-tools > a {
        color: var(--text) !important;
    }

        .panel-var(--text-muted) .panel-tools .btn:hover, .panel-var(--text-muted) .panel-tools > a:hover, .partition-var(--text-muted) .panel-tools .btn:hover, .partition-var(--text-muted) .panel-tools > a:hover {
            color: var(--text-muted) !important;
        }

.panel-light-var(--text-muted), .partition-light-var(--text-muted) {
    background-color: var(--bg);
    position: relative;
    color: var(--text-muted);
}

    .panel-light-var(--text-muted) .panel-tools .btn, .panel-light-var(--text-muted) .panel-tools > a, .partition-light-var(--text-muted) .panel-tools .btn, .partition-light-var(--text-muted) .panel-tools > a {
        color: var(--info) !important;
    }

        .panel-light-var(--text-muted) .panel-tools .btn:hover, .panel-light-var(--text-muted) .panel-tools > a:hover, .partition-light-var(--text-muted) .panel-tools .btn:hover, .partition-light-var(--text-muted) .panel-tools > a:hover {
            color: var(--text-muted) !important;
        }

.panel-var(--warning), .partition-var(--warning) {
    background-color: var(--warning);
    position: relative;
    color: var(--surface);
}

    .panel-var(--warning) .panel-tools .btn, .panel-var(--warning) .panel-tools > a, .partition-var(--warning) .panel-tools .btn, .partition-var(--warning) .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-var(--warning) .panel-tools .btn:hover, .panel-var(--warning) .panel-tools > a:hover, .partition-var(--warning) .panel-tools .btn:hover, .partition-var(--warning) .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-var(--accent-purple), .partition-var(--accent-purple) {
    background-color: var(--text-muted);
    position: relative;
    color: var(--surface);
}

    .panel-var(--accent-purple) .panel-tools .btn, .panel-var(--accent-purple) .panel-tools > a, .partition-var(--accent-purple) .panel-tools .btn, .partition-var(--accent-purple) .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-var(--accent-purple) .panel-tools .btn:hover, .panel-var(--accent-purple) .panel-tools > a:hover, .partition-var(--accent-purple) .panel-tools .btn:hover, .partition-var(--accent-purple) .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-pink, .partition-pink {
    background-color: var(--error);
    position: relative;
    color: var(--surface);
}

    .panel-pink .panel-tools .btn, .panel-pink .panel-tools > a, .partition-pink .panel-tools .btn, .partition-pink .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-pink .panel-tools .btn:hover, .panel-pink .panel-tools > a:hover, .partition-pink .panel-tools .btn:hover, .partition-pink .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-azure, .partition-azure {
    background-color: var(--primary);
    position: relative;
    color: var(--surface);
}

    .panel-azure .panel-tools .btn, .panel-azure .panel-tools > a, .partition-azure .panel-tools .btn, .partition-azure .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-azure .panel-tools .btn:hover, .panel-azure .panel-tools > a:hover, .partition-azure .panel-tools .btn:hover, .partition-azure .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-bricky, .partition-bricky {
    background-color: var(--text-muted);
    position: relative;
    color: var(--surface);
}

    .panel-bricky .panel-tools .btn, .panel-bricky .panel-tools > a, .partition-bricky .panel-tools .btn, .partition-bricky .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-bricky .panel-tools .btn:hover, .panel-bricky .panel-tools > a:hover, .partition-bricky .panel-tools .btn:hover, .partition-bricky .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-var(--success), .partition-var(--success) {
    background-color: var(--primary);
    position: relative;
    color: var(--surface);
}

    .panel-var(--success) .panel-tools .btn, .panel-var(--success) .panel-tools > a, .partition-var(--success) .panel-tools .btn, .partition-var(--success) .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-var(--success) .panel-tools .btn:hover, .panel-var(--success) .panel-tools > a:hover, .partition-var(--success) .panel-tools .btn:hover, .partition-var(--success) .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-var(--error), .partition-var(--error) {
    background-color: var(--error);
    position: relative;
    color: var(--surface);
}

    .panel-var(--error) .panel-tools .btn, .panel-var(--error) .panel-tools > a, .partition-var(--error) .panel-tools .btn, .partition-var(--error) .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-var(--error) .panel-tools .btn:hover, .panel-var(--error) .panel-tools > a:hover, .partition-var(--error) .panel-tools .btn:hover, .partition-var(--error) .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-var(--primary), .partition-var(--primary) {
    background-color: var(--text-muted);
    position: relative;
    color: var(--surface);
}

    .panel-var(--primary) .panel-tools .btn, .panel-var(--primary) .panel-tools > a, .partition-var(--primary) .panel-tools .btn, .partition-var(--primary) .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-var(--primary) .panel-tools .btn:hover, .panel-var(--primary) .panel-tools > a:hover, .partition-var(--primary) .panel-tools .btn:hover, .partition-var(--primary) .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-var(--warning), .partition-var(--warning) {
    background-color: var(--warning);
    position: relative;
    color: var(--text);
}

    .panel-var(--warning) .panel-tools .btn, .panel-var(--warning) .panel-tools > a, .partition-var(--warning) .panel-tools .btn, .partition-var(--warning) .panel-tools > a {
        color: var(--text) !important;
    }

        .panel-var(--warning) .panel-tools .btn:hover, .panel-var(--warning) .panel-tools > a:hover, .partition-var(--warning) .panel-tools .btn:hover, .partition-var(--warning) .panel-tools > a:hover {
            color: var(--text) !important;
        }

/*Dashboard Icons Michael*/


.panel-var(--surface), .partition-var(--surface) {
    background-color: var(--surface);
    position: relative;
    color: var(--primary);
    /*var(--text);*/
    border: 1px solid var(--text);
}

.dashboard-panel {
    border-radius: 15px;
    text-align: center;
    background-color: var(--surface-2);
    transition: 0.15s ease;
}

    .dashboard-panel:hover {
        background-color: var(--text);
        box-shadow: 3px 4px 5px var(--text);
    }

.panel-dark, .partition-dark {
    background-color: var(--text);
    position: relative;
    color: var(--surface);
}

    .panel-dark .panel-tools .btn, .panel-dark .panel-tools > a, .partition-dark .panel-tools .btn, .partition-dark .panel-tools > a {
        color: var(--surface) !important;
    }

        .panel-dark .panel-tools .btn:hover, .panel-dark .panel-tools > a:hover, .partition-dark .panel-tools .btn:hover, .partition-dark .panel-tools > a:hover {
            color: var(--surface) !important;
        }

.panel-scroll {
    overflow: hidden;
    position: relative;
    width: auto;
    padding-right: 10px !important;
}

.panel-note {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: none;
}

    .panel-note .panel-heading {
        background: var(--surface-2);
        border-top: 1px dashed var(--border);
        border-bottom: 0 none;
        padding-top: 30px;
        padding-bottom: 10px;
        top: 0;
        z-index: 3;
        position: relative;
    }

        .panel-note .panel-heading h3 {
            margin: 0;
        }

    .panel-note .panel-body {
        background-color: var(--surface);
        background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 17px, var(--border) 18px);
        padding: 0;
        margin: 0 15px;
        line-height: 18px;
    }

    .panel-note .panel-footer {
        background: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top: none;
        padding: 10px 15px;
        margin-bottom: 0;
    }

        .panel-note .panel-footer .avatar-note {
            width: 30px;
            height: 30px;
            float: left;
            margin-right: 10px;
        }

            .panel-note .panel-footer .avatar-note img {
                -moz-border-radius: 2px;
                -webkit-border-radius: 2px;
                border-radius: 2px;
            }

        .panel-note .panel-footer .author-note {
            display: block;
            line-height: 14px;
        }

        .panel-note .panel-footer .timestamp {
            color: var(--text-disabled);
            display: inline-block;
            font-size: 11px;
        }

    .panel-note .note-options a {
        margin-left: 10px;
        font-size: 12px;
    }

        .panel-note .note-options a:hover {
            text-decoration: none;
        }

[class^="partition-"]:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

/* ---------------------------------------------------------------------- */
/*  Backdrop
/* ---------------------------------------------------------------------- */
.full-var(--surface)-backdrop {
    background-color: var(--surface);
    display: none;
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1049;
}

.panel.panel-full-screen {
    bottom: 0;
    left: 10px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1048;
    background-color: var(--surface);
}

.tmp-tool {
    position: fixed;
    right: 40px;
    top: 20px;
}

/* ---------------------------------------------------------------------- */
/*  Spinner
/* ---------------------------------------------------------------------- */
/*.loading {
    display: inline-block;
    overflow: hidden;
    height: 1.3em;
    margin-top: -0.3em;
    line-height: 1.5em;
    vertical-align: text-bottom;
}

    .loading::before {
        content: "Loading";
    }

    .loading::after {
        display: inline-table;
        var(--surface)-space: pre;
        content: "🕐\A🕑\A🕒\A🕓\A🕔\A🕕\A🕖\A🕗\A🕘\A🕙\A🕚\A🕛";
        animation: spin12 3s steps(12) infinite;
        width: 1.5em;
    }

@keyframes spin12 {
    to {
        transform: translateY(-18.0em);
    }
}*/



.csspinner {
    position: relative;
}

    .csspinner:before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--surface);
    }

    .csspinner:after {
        z-index: 2;
        content: "";
        position: absolute;
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
    }

.load1:after {
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    border-top: 2px solid var(--text);
    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    border-left: 2px solid var(--primary);
    -webkit-animation: load1 1.1s infinite linear;
    animation: load1 1.1s infinite linear;
}

@-webkit-keyframes load1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.load2:after {
    width: 30px;
    height: 30px;
    background-color: var(--primary);
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px;
    -webkit-animation: load2 1.2s infinite ease-in-out;
    animation: load2 1.2s infinite ease-in-out;
}

@-webkit-keyframes load2 {
    0% {
        -webkit-transform: perspective(120px);
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(180deg);
    }

    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    }
}

@keyframes load2 {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
/* ---------------------------------------------------------------------- */
/*  Pagination
/* ---------------------------------------------------------------------- */
.pagination > li > a, .pagination > li > span {
    margin-left: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--primary);
}

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--primary);
    border-color: var(--primary);
}

.pagination.squared {
    border-radius: 0 !important;
}

    .pagination.squared li:first-child a, .pagination.squared li:first-child > span {
        border-bottom-left-radius: 0px !important;
        border-left-width: 1px;
        border-top-left-radius: 0px !important;
    }

    .pagination.squared li:last-child > a, .pagination.squared li:last-child > span {
        border-bottom-right-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }

.pagination-var(--primary) li a {
    background: var(--bg);
    border: none !important;
    color: var(--text-muted);
    display: inline-block;
    margin-right: 1px;
}

    .pagination-var(--primary) li a:hover {
        background: var(--surface-3);
        color: var(--text-muted);
        cursor: pointer;
    }

.pagination-var(--primary) li:first-child a {
    border: none !important;
}

.pagination-var(--primary) li.disabled a {
    background: var(--bg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    opacity: 0.2;
}

    .pagination-var(--primary) li.disabled a:hover, .pagination-var(--primary) li.disabled a:focus {
        background: var(--bg);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
        opacity: 0.2;
        cursor: default !important;
    }

.pagination-var(--primary) li.active a {
    background: var(--text-muted) !important;
    border: none !important;
    color: var(--surface) !important;
    cursor: default !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
}

.pagination-var(--primary) li [class^="fa-"], .pagination-var(--primary) li [class*=" fa-"], .pagination-var(--primary) li [class*="ti-"] {
    color: var(--text-muted);
}

.pagination-var(--success) li a {
    background: var(--bg);
    border: none !important;
    color: var(--text-muted);
    display: inline-block;
    margin-right: 1px;
}

    .pagination-var(--success) li a:hover {
        background: var(--surface-3);
        color: var(--text-muted);
        cursor: pointer;
    }

.pagination-var(--success) li:first-child a {
    border: none !important;
}

.pagination-var(--success) li.disabled a {
    background: var(--bg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    opacity: 0.2;
}

    .pagination-var(--success) li.disabled a:hover, .pagination-var(--success) li.disabled a:focus {
        background: var(--bg);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
        opacity: 0.2;
        cursor: default !important;
    }

.pagination-var(--success) li.active a {
    background: var(--primary) !important;
    border: none !important;
    color: var(--surface) !important;
    cursor: default !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
}

.pagination-var(--success) li [class^="fa-"], .pagination-var(--success) li [class*=" fa-"], .pagination-var(--success) li [class*="ti-"] {
    color: var(--primary);
}

.pagination-var(--error) li a {
    background: var(--bg);
    border: none !important;
    color: var(--text-muted);
    display: inline-block;
    margin-right: 1px;
}

    .pagination-var(--error) li a:hover {
        background: var(--surface-3);
        color: var(--text-muted);
        cursor: pointer;
    }

.pagination-var(--error) li:first-child a {
    border: none !important;
}

.pagination-var(--error) li.disabled a {
    background: var(--bg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    opacity: 0.2;
}

    .pagination-var(--error) li.disabled a:hover, .pagination-var(--error) li.disabled a:focus {
        background: var(--bg);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
        opacity: 0.2;
        cursor: default !important;
    }

.pagination-var(--error) li.active a {
    background: var(--error) !important;
    border: none !important;
    color: var(--surface) !important;
    cursor: default !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
}

.pagination-var(--error) li [class^="fa-"], .pagination-var(--error) li [class*=" fa-"], .pagination-var(--error) li [class*="ti-"] {
    color: var(--error);
}

/* ---------------------------------------------------------------------- */
/*  Accordion
/* ---------------------------------------------------------------------- */
.accordion .panel {
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: 0, 0, 0, transparent;
    -webkit-box-shadow: 0, 0, 0, transparent;
    box-shadow: 0, 0, 0, transparent;
}

.accordion .panel-heading {
    padding: 0;
    background-image: none;
    height: auto;
    min-height: 0;
    -moz-box-shadow: 0, 0, 0, transparent;
    -webkit-box-shadow: 0, 0, 0, transparent;
    box-shadow: 0, 0, 0, transparent;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

    .accordion .panel-heading .accordion-toggle {
        background-color: var(--surface-3);
        color: var(--text);
        display: block;
        font-size: 13px;
        line-height: 20px;
        padding: 10px;
        position: relative;
    }

        .accordion .panel-heading .accordion-toggle:hover, .accordion .panel-heading .accordion-toggle:focus {
            text-decoration: none;
        }

        .accordion .panel-heading .accordion-toggle.collapsed {
            background-color: var(--bg);
            border-color: var(--border);
            border-width: 0 0 0 1px;
            color: var(--text-disabled);
            font-weight: 300;
        }

            .accordion .panel-heading .accordion-toggle.collapsed > .icon-arrow {
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
                opacity: 0.75;
            }

                .accordion .panel-heading .accordion-toggle.collapsed > .icon-arrow:before {
                    content: "\f067" !important;
                }

        .accordion .panel-heading .accordion-toggle > .icon-arrow {
            font-family: FontAwesome;
            font-size: 11px;
            padding: 0 5px;
            display: inline-block;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: var(--bg);
        }

            .accordion .panel-heading .accordion-toggle > .icon-arrow:before {
                content: "\f068";
            }

.accordion .panel-body {
    border: none !important;
}

.accordion.panel-group .panel + .panel {
    margin-top: 1px;
}

.accordion.accordion-var(--surface) .panel-heading .accordion-toggle {
    background-color: var(--surface);
}

    .accordion.accordion-var(--surface) .panel-heading .accordion-toggle.collapsed {
        background-color: var(--surface);
    }

.accordion.accordion-var(--surface).panel-group .panel + .panel {
    margin-top: 0;
    border-top: 1px solid var(--text-disabled);
}

.accordion.heading-var(--surface) .accordion-toggle {
    background-color: var(--surface);
    color: var(--text-muted);
}

.accordion.heading-var(--surface) .panel-group .panel + .panel {
    margin-top: 0;
    border-top: 1px solid var(--text);
}

.accordion.no-padding .panel-body {
    padding: 0;
}

.accordion.body-light-var(--text-muted) .panel-body {
    background: var(--bg) !important;
}

.accordion .panel-group {
    margin-bottom: 0;
}

    .accordion .panel-group .panel + .panel {
        margin-top: 0;
        border-top: 1px solid transparent;
    }

/* ---------------------------------------------------------------------- */
/*  Animations
/* ---------------------------------------------------------------------- */
@-webkit-keyframes fadeOutUpShort {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
}

@keyframes fadeOutUpShort {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
}

.fadeOutUpShort {
    -webkit-animation-name: fadeOutUpShort;
    animation-name: fadeOutUpShort;
}

@-webkit-keyframes fadeInUpShort {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUpShort {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInUpShort {
    -webkit-animation-name: fadeInUpShort;
    animation-name: fadeInUpShort;
}

.smooth.ng-animate {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fade-in-right-big.ng-enter {
    -webkit-animation: fadeInRightBig 0.5s;
    animation: fadeInRightBig 0.5s;
}

.fade-in-right-big.ng-leave {
    -webkit-animation: fadeOutLeftBig 0.5s;
    animation: fadeOutLeftBig 0.5s;
}

.fade-in-up-big.ng-enter {
    -webkit-animation: fadeInUpBig 0.5s;
    animation: fadeInUpBig 0.5s;
}

.fade-in-up-big.ng-leave {
    -webkit-animation: fadeOutUpBig 0.5s;
    animation: fadeOutUpBig 0.5s;
}

.fade-in-down-big.ng-enter {
    -webkit-animation: fadeInDownBig 0.5s;
    animation: fadeInDownBig 0.5s;
}

.fade-in-down-big.ng-leave {
    -webkit-animation: fadeOutDownBig 0.5s;
    animation: fadeOutDownBig 0.5s;
}

.fade-in.ng-enter {
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

.fade-in.ng-leave {
    -webkit-animation: fadeOut 0.5s;
    animation: fadeOut 0.5s;
}

.fade-in-right.ng-enter {
    -webkit-animation: fadeInRight 0.5s;
    animation: fadeInRight 0.5s;
}

.fade-in-right.ng-leave {
    -webkit-animation: fadeOutLeft 0.5s;
    animation: fadeOutLeft 0.5s;
}

.fade-in-left.ng-enter {
    -webkit-animation: fadeInLeft 0.5s;
    animation: fadeInLeft 0.5s;
}

.fade-in-left.ng-leave {
    -webkit-animation: fadeOutRight 0.5s;
    animation: fadeOutRight 0.5s;
}

.fade-in-up.ng-enter {
    -webkit-animation: fadeInUpShort 0.5s;
    animation: fadeInUpShort 0.5s;
}

.fade-in-up.ng-leave {
    -webkit-animation: fadeOutUpShort 0.5s;
    animation: fadeOutUpShort 0.5s;
}

.fade-in-down.ng-enter {
    -webkit-animation: fadeInDown 0.5s;
    animation: fadeInDown 0.5s;
}

.fade-in-down.ng-leave {
    -webkit-animation: fadeOutDown 0.5s;
    animation: fadeOutDown 0.5s;
}

.heart-pulse {
    -webkit-animation: heart-pulse 1s linear infinite;
    -moz-animation: heart-pulse 1s linear infinite;
    -ms-animation: heart-pulse 1s linear infinite;
    animation: heart-pulse 1s linear infinite;
}

@keyframes

"heart-pulse" {
    0%

{
    color: var(--error);
}

90% {
    color: transparent;
}

100% {
    color: var(--error);
}

}

@-moz-keyframes heart-pulse {
    0% {
        color: var(--error);
    }

    90% {
        color: transparent;
    }

    100% {
        color: var(--error);
    }
}

@-webkit-keyframes

"heart-pulse" {
    0%

{
    color: var(--error);
}

90% {
    color: transparent;
}

100% {
    color: var(--error);
}

}
@-ms-keyframes

"heart-pulse" {
    0%

{
    color: var(--error);
}

90% {
    color: transparent;
}

100% {
    color: var(--error);
}

}
/* ---------------------------------------------------------------------- */
/* Progress Bar
/* ---------------------------------------------------------------------- */
.progress {
    box-shadow: none;
}

    .progress.progress-xs {
        height: 7px;
    }

    .progress.progress-sm {
        height: 12px;
    }

    .progress.progress-lg {
        height: 20px;
    }

    .progress.transparent-var(--text) {
        background-color: var(--text);
    }

.progress-bar {
    background-color: var(--primary);
}

.progress-bar-success {
    background-color: var(--success);
}

.progress-bar-info {
    background-color: var(--primary);
}

.progress-bar-warning {
    background-color: var(--warning);
}

.progress-bar-danger {
    background-color: var(--error);
}

/* ---------------------------------------------------------------------- */
/*  Labels and Badges
/* ---------------------------------------------------------------------- */
.badge {
    background-color: var(--primary);
}

.badge-success {
    background-color: var(--success);
}

    .badge-success[href]:hover, .badge-success[href]:focus {
        background-color: var(--success);
    }

.badge-warning {
    background-color: var(--warning);
}

    .badge-warning[href]:hover, .badge-warning[href]:focus {
        background-color: var(--warning);
    }

.badge-info {
    background-color: var(--text-disabled);
}

    .badge-info[href]:hover, .badge-info[href]:focus {
        background-color: var(--primary);
    }

.badge-danger {
    background-color: var(--error);
}

    .badge-danger[href]:hover, .badge-danger[href]:focus {
        background-color: var(--error);
    }

.badge-new {
    background-color: var(--primary);
    border-radius: 12px 12px 12px 12px !important;
    font-size: 11px !important;
    font-weight: 300;
    height: 18px;
    padding: 3px 6px;
    text-align: center;
    text-shadow: none !important;
    vertical-align: middle;
}

.label-default {
    background-color: var(--primary);
}

.label {
    font-size: 85% !important;
    padding: 0.4em 0.6em !important;
}

.label-inverse, .badge-inverse {
    background-color: var(--text-muted);
}

/* ---------------------------------------------------------------------- */
/*  Forms
/* ---------------------------------------------------------------------- */
fieldset {
    background: var(--surface);
    border: 1px solid var(--surface-3);
    border-radius: 5px;
    margin: 20px 0 30px 0;
    padding: 25px;
    position: relative;
    padding-bottom: 0px !important;
}

    fieldset .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    fieldset legend {
        background: inherit;
        font-family: "Lato", sans-serif;
        color: var(--primary);
        font-size: 15px;
        left: 10px;
        padding: 0 10px;
        position: absolute;
        top: -12px;
        font-weight: 400;
        width: auto !important;
        border: none !important;
    }

.form-control::-moz-placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

.form-control::-webkit-input-placeholder {
    color: var(--text-disabled);
    opacity: 1;
}

textarea, select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--text-disabled) !important;
    border-radius: 0 0 0 0 !important;
    color: var(--text) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 5px 4px !important;
    transition-duration: 0.1s !important;
    box-shadow: none !important;
    -webkit-transition: 300ms ease-in-out !important;
    -moz-transition: 300ms ease-in-out !important;
    -ms-transition: 300ms ease-in-out !important;
    -o-transition: 300ms ease-in-out !important;
    transition: 300ms ease-in-out !important;
}

    textarea:hover, select:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="date"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, input[type="number"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="color"]:hover {
        border-color: var(--text-disabled) !important;
    }

    textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus {
        box-shadow: none !important;
        border-color: var(--text-disabled) !important;
        background-color: var(--surface-2) !important;
    }

    textarea.underline, select.underline, input[type="text"].underline, input[type="password"].underline, input[type="datetime"].underline, input[type="datetime-local"].underline, input[type="date"].underline, input[type="month"].underline, input[type="time"].underline, input[type="week"].underline, input[type="number"].underline, input[type="email"].underline, input[type="url"].underline, input[type="search"].underline, input[type="tel"].underline, input[type="color"].underline {
        background: none !important;
        background-image: none;
        border: 1px solid var(--text-disabled);
        border-top: none;
        border-left: none;
        border-right: none;
        border-radius: 0 0 0 0 !important;
        color: var(--text);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.2;
        padding: 5px 4px;
        transition-duration: 0.1s;
        box-shadow: none !important;
        -moz-transition: border 300ms ease-out;
        -o-transition: border 300ms ease-out;
        -webkit-transition: border 300ms ease-out;
        transition: border 300ms ease-out;
    }

        textarea.underline:hover, select.underline:hover, input[type="text"].underline:hover, input[type="password"].underline:hover, input[type="datetime"].underline:hover, input[type="datetime-local"].underline:hover, input[type="date"].underline:hover, input[type="month"].underline:hover, input[type="time"].underline:hover, input[type="week"].underline:hover, input[type="number"].underline:hover, input[type="email"].underline:hover, input[type="url"].underline:hover, input[type="search"].underline:hover, input[type="tel"].underline:hover, input[type="color"].underline:hover {
            border-color: var(--text-disabled);
        }

        textarea.underline:focus, select.underline:focus, input[type="text"].underline:focus, input[type="password"].underline:focus, input[type="datetime"].underline:focus, input[type="datetime-local"].underline:focus, input[type="date"].underline:focus, input[type="month"].underline:focus, input[type="time"].underline:focus, input[type="week"].underline:focus, input[type="number"].underline:focus, input[type="email"].underline:focus, input[type="url"].underline:focus, input[type="search"].underline:focus, input[type="tel"].underline:focus, input[type="color"].underline:focus {
            box-shadow: none !important;
            border-color: var(--primary) !important;
            background-color: none !important;
        }

    textarea[disabled], input[disabled], select[disabled] {
        background: var(--divider) !important;
        border-color: var(--divider) !important;
        /*  color: var(--text) !important;*/
    }

        textarea[disabled]:hover, textarea[disabled]:focus, input[disabled]:hover, input[disabled]:focus, select[disabled]:hover, select[disabled]:focus {
            background: var(--bg) !important;
            border-color: var(--surface-2);
        }

legend {
    color: inherit;
    font-size: 16px;
    font-weight: 300;
}


.input-group-addon-var(--text-muted) {
    background-color: var(--text-disabled) !important;
    border: 1px solid var(--text-disabled) !important;
}

select[multiple="multiple"]:focus option {
    background: var(--surface-2) !important;
}

.has-error .form-control:focus, .has-error .form-control:hover, .has-warning .form-control:focus, .has-warning .form-control:hover, .has-success .form-control:focus, .has-success .form-control:hover {
    box-shadow: none;
}

.validation-invalid, .validation-valid {
    font-size: 12px;
    padding: 0 5px;
}

.has-error .control-label {
    color: var(--text-muted) !important;
}

.has-error .error {
    color: var(--text-muted);
}

.has-error .form-control {
    color: var(--text);
    border-color: var(--surface-2);
    border-bottom-color: var(--text-muted) !important;
    border-bottom-width: 1px !important;
    border-bottom-style: dotted;
    border-color: var(--text-muted) !important;
    border-width: 1px !important;
    border-style: dotted;
}

    .has-error .form-control:focus, .has-error .form-control:hover {
        border-color: var(--surface-2);
        border-bottom-color: var(--text-muted) !important;
    }

.has-error label {
    color: var(--text-muted) !important;
}

.has-warning {
    color: var(--warning);
}

    .has-warning .control-label {
        color: var(--text-muted) !important;
    }

    .has-warning .form-control {
        color: var(--text);
        border-color: var(--surface-2);
        border-bottom-color: var(--text-muted) !important;
        border-bottom-width: 1px !important;
        border-bottom-style: dotted;
        border-color: var(--text-muted) !important;
        border-width: 1px !important;
        border-style: dotted;
    }

        .has-warning .form-control:focus, .has-warning .form-control:hover {
            border-color: var(--surface-2);
            border-bottom-color: var(--text-muted) !important;
        }

    .has-warning label {
        color: var(--text-muted);
    }

.has-success {
    color: var(--success);
}

    .has-success .control-label {
        color: var(--text-muted) !important;
    }

    .has-success .form-control {
        color: var(--text);
        border-color: var(--surface-2);
        border-bottom-color: var(--text-muted) !important;
        border-bottom-width: 1px !important;
        border-bottom-style: dotted;
        border-color: var(--text-muted) !important;
        border-width: 1px !important;
        border-style: dotted;
    }

        .has-success .form-control:focus, .has-success .form-control:hover {
            border-color: var(--surface-2);
            border-bottom-color: var(--text-muted) !important;
        }

    .has-success label {
        color: var(--text-muted);
    }

label {
    font-weight: normal;
    color: var(--text-muted);
}

span.input-icon, span.input-help {
    display: block;
    position: relative;
}

.input-icon > input {
    padding-left: 30px !important;
    padding-right: 6px;
}

.input-icon.input-icon-right > input {
    padding-left: 6px !important;
    padding-right: 30px !important;
}

span.input-help > input {
    padding-left: 30px;
    padding-right: 6px;
}

.input-icon > [class*="fa-"], .input-icon > [class*="ti-"] {
    bottom: 0;
    color: var(--primary);
    display: inline-block;
    left: 2px;
    line-height: 35px;
    padding: 0 3px;
    position: absolute;
    top: -1px;
    z-index: 2;
}

.input-icon.input-icon-right > [class*="fa-"], .input-icon.input-icon-right > [class*="ti-"] {
    left: auto;
    right: 4px;
}

.help-button {
    background-color: var(--text-disabled);
    border-radius: 100% 100% 100% 100%;
    color: var(--surface);
    cursor: default;
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    height: 20px;
    padding: 0;
    text-align: center;
    width: 20px;
    line-height: 20px;
    top: 7px;
    left: 7px;
}

    .help-button:before {
        content: "\f128";
        display: inline;
        font-family: FontAwesome;
        font-weight: 300;
        height: auto;
        text-shadow: none;
        font-style: normal;
    }

.form-control {
    color: inherit;
}

select.form-control {
    background-color: var(--surface);
    border: 1px solid var(--text-disabled);
    border-radius: 0 0 0 0;
    color: var(--text);
}

    select.form-control option {
        padding: 3px 4px;
    }

.form-control.search-select {
    padding: 0 !important;
    box-shadow: none;
    border: none;
}

textarea.autosize {
    min-height: 71px;
}

    textarea.autosize.area-animated:focus {
        vertical-align: top;
        transition: height 0.2s;
        -webkit-transition: height 0.2s;
        -moz-transition: height 0.2s;
        transition: height 0.2s;
        overflow: hidden;
        word-wrap: break-word;
        resize: horizontal;
    }

.note-editor {
    position: relative;
    padding-top: 12px;
    background: var(--surface);
}

    .note-editor textarea {
        background-color: var(--surface);
        background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 19px, var(--border) 20px);
        line-height: 20px;
        margin-top: 10px;
        min-height: 140px;
        border: none;
        padding: 0;
        position: relative;
    }

        .note-editor textarea:focus {
            background-color: var(--surface) !important;
        }

    .note-editor:before {
        background-color: var(--surface-2);
        background-image: repeating-linear-gradient(to right, var(--border) 0, var(--border) 2px, transparent 2px, transparent 6px);
        position: absolute;
        height: 12px;
        top: 0;
        left: 0;
        right: 0;
        content: "";
        padding-top: 1px;
    }

.radio label.radio-inline, .checkbox label.checkbox-inline {
    display: inline-block;
}

.radio-inline, .radio-inline + .radio-inline, .checkbox-inline, .checkbox-inline + .checkbox-inline {
    margin-right: 10px !important;
    margin-top: 5px !important;
    margin-left: 0 !important;
    margin-bottom: 10px !important;
}

.checkbox-table {
    display: inline-block;
    margin: 2px 0 0 0;
    line-height: 10px;
}

    .checkbox-table label {
        margin-bottom: 0;
    }

.help-inline {
    margin-top: 6px;
    color: var(--text-muted);
}

.help-block.error {
    color: var(--error);
}

.symbol.required:before {
    content: "*";
    display: inline;
    color: var(--error);
}

.has-success .symbol:before {
    content: "\f00c";
    display: inline;
    font-family: FontAwesome;
    color: var(--text-muted);
}

.has-error .symbol:before {
    content: "\f00d";
    display: inline;
    font-family: FontAwesome;
    color: var(--error);
}

.has-warning .symbol:before {
    content: "\f071";
    display: inline;
    font-family: FontAwesome;
    color: var(--warning);
}

.has-error .note-editor, .has-error .cke_chrome {
    border-color: var(--error) !important;
}

.form-group {
    position: relative;
}

    .form-group .text {
        display: block;
        font-size: 14px;
        font-weight: 400;
        margin-top: 7px;
    }

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: default;
}

.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
    max-width: auto;
}

/* Default custom select inspired by tympanus.net */
div.cs-select {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
    background: var(--surface);
    z-index: 100;
    font-size: 100%;
    width: 100%;
    max-width: 1500px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    div.cs-select.disabled {
        opacity: 0.5;
    }

        div.cs-select.disabled span {
            cursor: default !important;
        }

    div.cs-select:focus {
        outline: none;
        /* For better accessibility add a style for this in your skin */
    }

.cs-select select {
    display: none;
}

.cs-select span {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 5px 4px;
    var(--surface)-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placeholder and selected option */
.cs-select > span {
    padding-right: 3em;
}

    .cs-select > span::after,
    .cs-select .cs-selected span::after {
        speak: none;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .cs-select > span::after {
        content: '\25BE';
        right: 1em;
    }

.cs-select .cs-selected span::after {
    content: '\e64c';
    margin-left: 1em;
    font-family: "themify";
    font-size: 60%;
}

.cs-select.cs-active > span::after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

.cs-select.cs-active {
    z-index: 101;
}

/* Options */
.cs-select .cs-options {
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: var(--surface);
    visibility: hidden;
}

.cs-select.cs-active .cs-options {
    visibility: visible;
}

.cs-select ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

    .cs-select ul span {
        padding: 1em;
    }

    .cs-select ul li.cs-focus span {
        background-color: var(--border);
    }

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
    padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
    cursor: default;
}

div.cs-skin-slide {
    color: var(--text);
    font-size: 14px;
    width: 100%;
}

    div.cs-skin-slide::before {
        content: '';
        background: var(--surface);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

.cs-skin-slide.cs-active::before {
    -webkit-transform: scale3d(1, 4, 1);
    transform: scale3d(1, 4, 1);
    background: var(--bg);
    box-shadow: 0 0 4px var(--text);
}

.cs-skin-slide > span {
    height: 34px;
    line-height: 20px;
    border: 1px solid var(--text-disabled);
    -webkit-transition: text-indent 0.3s, opacity 0.3s;
    transition: text-indent 0.3s, opacity 0.3s;
}

.cs-skin-slide.cs-active > span {
    text-indent: -290px;
    opacity: 0;
}

    .cs-skin-slide > span::after,
    .cs-skin-slide.cs-active > span::after {
        font-family: 'themify';
        content: '\e68e';
        color: var(--primary);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        font-size: 17px;
    }

    .cs-skin-slide.cs-active > span::after {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

.cs-skin-slide .cs-options {
    background: transparent;
    width: 100%;
    height: 400%;
    padding: 5px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.cs-skin-slide.cs-active .cs-options {
    overflow-y: auto;
}

.cs-skin-slide .cs-options li {
    opacity: 0;
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    margin-bottom: 5px;
}

.cs-skin-slide.cs-active .cs-options li {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

    .cs-skin-slide.cs-active .cs-options li:first-child {
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
    }

    .cs-skin-slide.cs-active .cs-options li:nth-child(2) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .cs-skin-slide.cs-active .cs-options li:nth-child(3) {
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }

    .cs-skin-slide.cs-active .cs-options li:nth-child(4) {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .cs-skin-slide.cs-active .cs-options li:nth-child(5) {
        -webkit-transition-delay: 0.25s;
        transition-delay: 0.25s;
    }

    .cs-skin-slide.cs-active .cs-options li:nth-child(6) {
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

    .cs-skin-slide.cs-active .cs-options li:nth-child(7) {
        -webkit-transition-delay: 0.35s;
        transition-delay: 0.35s;
    }

/* more options need more delay declaration */
.cs-skin-slide .cs-options li span {
    padding: 0.8em 1em;
}

    .cs-skin-slide .cs-options li span:empty {
        display: none;
    }

.cs-skin-slide .cs-options li:hover,
.cs-skin-slide .cs-options li.cs-focus {
    background: var(--surface-3);
}

.cs-skin-slide .cs-options li.cs-selected {
    color: var(--surface);
    background: var(--primary);
}

.cs-select [class^="ti-"],
.cs-select [class*=" ti-"],
.cs-select [class^="fa-"],
.cs-select [class*=" fa-"] {
    line-height: inherit !important;
    display: block !important;
}

    .cs-select [class^="ti-"] span,
    .cs-select [class*=" ti-"] span,
    .cs-select [class^="fa-"] span,
    .cs-select [class*=" fa-"] span {
        font-family: Helvetica, Arial, sans-serif;
        padding-left: 30px !important;
    }

    .cs-select [class^="ti-"]:before,
    .cs-select [class*=" ti-"]:before,
    .cs-select [class^="fa-"]:before,
    .cs-select [class*=" fa-"]:before {
        font-family: 'themify';
        position: absolute;
        left: 5px;
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
        font-size: 17px;
    }

    .cs-select [class^="ti-"]:before,
    .cs-select [class*=" ti-"]:before {
        font-family: 'themify';
    }

    .cs-select [class^="fa-"]:before,
    .cs-select [class*=" fa-"]:before {
        font-family: 'fontawesome';
    }

/* Skin Elastic */
div.cs-skin-elastic {
    background: transparent;
    font-size: 14px;
    color: var(--text);
}

.cs-skin-elastic > span {
    background-color: var(--surface);
    z-index: 100;
    border: 1px solid var(--text-disabled);
    height: 34px;
    line-height: 20px;
}

    .cs-skin-elastic > span::after {
        font-family: 'themify';
        content: '\e64b';
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        color: var(--primary);
    }

.cs-skin-elastic .cs-options {
    overflow: visible;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.cs-skin-elastic.cs-active .cs-options {
    pointer-events: auto;
}

.cs-skin-elastic .cs-options > ul::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    background: var(--bg);
    box-shadow: 0 0 4px var(--text);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.cs-skin-elastic.cs-active .cs-options > ul::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: none;
    transition: none;
    -webkit-animation: expand 0.6s ease-out;
    animation: expand 0.6s ease-out;
}

.cs-skin-elastic .cs-options ul li {
    opacity: 0;
    -webkit-transform: translate3d(0, -25px, 0);
    transform: translate3d(0, -25px, 0);
    -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
    transition: opacity 0.15s, transform 0.15s;
}

.cs-skin-elastic.cs-active .cs-options ul li {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    -webkit-transition: none;
    transition: none;
    -webkit-animation: bounce 0.6s ease-out;
    animation: bounce 0.6s ease-out;
}

.cs-skin-elastic .cs-options span {
    background-repeat: no-repeat;
    background-position: 1.5em 50%;
    background-size: 2em auto;
    padding: 0.8em 1em 0.8em 1em;
}

.cs-skin-elastic .cs-options li:hover,
.cs-skin-elastic .cs-options li.cs-focus {
    background: var(--surface-3);
}

.cs-skin-elastic .cs-options .cs-selected,
.cs-skin-elastic .cs-options .cs-selected:hover {
    color: var(--surface) !important;
    background: var(--primary) !important;
}

@-webkit-keyframes expand {
    0% {
        -webkit-transform: scale3d(1, 0, 1);
    }

    25% {
        -webkit-transform: scale3d(1, 1.2, 1);
    }

    50% {
        -webkit-transform: scale3d(1, 0.85, 1);
    }

    75% {
        -webkit-transform: scale3d(1, 1.05, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@keyframes expand {
    0% {
        -webkit-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1);
    }

    25% {
        -webkit-transform: scale3d(1, 1.2, 1);
        transform: scale3d(1, 1.2, 1);
    }

    50% {
        -webkit-transform: scale3d(1, 0.85, 1);
        transform: scale3d(1, 0.85, 1);
    }

    75% {
        -webkit-transform: scale3d(1, 1.05, 1);
        transform: scale3d(1, 1.05, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, -25px, 0);
        opacity: 0;
    }

    25% {
        -webkit-transform: translate3d(0, 10px, 0);
    }

    50% {
        -webkit-transform: translate3d(0, -6px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 2px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0);
        opacity: 0;
    }

    25% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    50% {
        -webkit-transform: translate3d(0, -6px, 0);
        transform: translate3d(0, -6px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 2px, 0);
        transform: translate3d(0, 2px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    cursor: pointer;
    line-height: normal;
}

.clip-check {
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 0;
}

    .clip-check label {
        cursor: pointer;
        display: inline-block;
        font-size: 13px;
        margin-right: 15px;
        padding-left: 30px !important;
        position: relative;
        line-height: 23px;
        transition: border 0.2s linear 0s, color 0.2s linear 0s;
        var(--surface)-space: nowrap;
    }

        .clip-check label:before {
            background-color: var(--surface);
            border: 1px solid var(--text-disabled);
            content: "";
            display: inline-block;
            height: 20px;
            left: 0;
            margin-right: 10px;
            position: absolute;
            width: 20px;
            border-radius: 0;
            top: 1px;
            transition: border 0.2s linear 0s, color 0.2s linear 0s;
        }

        .clip-check label:after {
            display: inline-block;
            font-size: 11px;
            height: 19px;
            left: 4px;
            position: absolute;
            top: -1px;
            transition: border 0.2s linear 0s, color 0.2s linear 0s;
            width: 19px;
        }

    .clip-check input[type="checkbox"] {
        display: none;
    }

        .clip-check input[type="checkbox"]:checked + label:before {
            border-width: 10px;
        }

        .clip-check input[type="checkbox"]:checked + label:after {
            color: var(--surface);
            content: "\f00c";
            font-family: "FontAwesome";
        }

        .clip-check input[type="checkbox"][disabled] + label {
            opacity: 0.65;
        }

            .clip-check input[type="checkbox"][disabled] + label:before {
                background-color: var(--surface-2);
            }

    .clip-check.check-sm label {
        margin-right: 15px;
        padding-left: 24px !important;
        line-height: 22px;
    }

        .clip-check.check-sm label:before {
            height: 14px;
            width: 14px;
            top: 4px;
        }

        .clip-check.check-sm label:after {
            font-size: 11px;
            height: 13px;
            left: 2px;
            width: 13px;
        }

    .clip-check.check-sm input[type="checkbox"]:checked + label:before {
        border-width: 7px;
    }

    .clip-check.check-md label {
        margin-right: 15px;
        padding-left: 35px !important;
        line-height: 28px;
    }

        .clip-check.check-md label:before {
            height: 25px;
            width: 25px;
        }

        .clip-check.check-md label:after {
            font-size: 14px;
            height: 24px;
            left: 5px;
            width: 24px;
        }

    .clip-check.check-md input[type="checkbox"]:checked + label:before {
        border-width: 12px;
    }

    .clip-check.check-lg label {
        margin-right: 15px;
        padding-left: 40px !important;
        line-height: 33px;
    }

        .clip-check.check-lg label:before {
            height: 30px;
            width: 30px;
        }

        .clip-check.check-lg label:after {
            font-size: 17px;
            height: 29px;
            left: 6px;
            width: 29px;
        }

    .clip-check.check-lg input[type="checkbox"]:checked + label:before {
        border-width: 15px;
    }

    .clip-check.check-success input[type="checkbox"]:checked + label:before {
        border-color: var(--success);
    }

    .clip-check.check-primary input[type="checkbox"]:checked + label:before {
        border-color: var(--primary);
    }

    .clip-check.check-warning input[type="checkbox"]:checked + label:before {
        border-color: var(--warning);
    }

    .clip-check.check-danger input[type="checkbox"]:checked + label:before {
        border-color: var(--error);
    }

    .clip-check.check-info input[type="checkbox"]:checked + label:before {
        border-color: var(--primary);
    }

    .clip-check.check-var(--accent-purple) input[type="checkbox"]:checked + label:before {
        border-color: var(--text-muted);
    }

.clip-radio {
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 0;
}

    .clip-radio label {
        cursor: pointer;
        display: inline-block;
        font-size: 13px;
        margin-right: 15px;
        padding-left: 25px !important;
        position: relative;
        margin-bottom: 6px;
        line-height: 23px;
    }

        .clip-radio label:before {
            background-color: var(--surface);
            border: 1px solid var(--border);
            content: "";
            display: inline-block;
            height: 20px;
            left: 0;
            margin-right: 10px;
            position: absolute;
            width: 20px;
            border-radius: 99px;
            bottom: 2px;
            transition: all 0.3s cubic-bezier(0.455, 0.03, 0.215, 1.33) 0s;
        }

        .clip-radio label:after {
            border: 1px solid var(--text-disabled);
            content: "";
            display: inline-block;
            height: 20px;
            left: 0;
            margin-right: 10px;
            position: absolute;
            width: 20px;
            border-radius: 99px;
            bottom: 2px;
            transition: all 0.3s cubic-bezier(0.455, 0.03, 0.215, 1.33) 0s;
        }

    .clip-radio input[type="radio"] {
        display: none;
    }

        .clip-radio input[type="radio"]:checked + label:before {
            border-width: 6px;
            background: var(--surface-2);
            border-color: var(--surface);
        }

        .clip-radio input[type="radio"][disabled] + label {
            opacity: 0.65;
        }

    .clip-radio.radio-md label {
        padding-left: 30px !important;
        line-height: 28px;
    }

        .clip-radio.radio-md label:before {
            height: 25px;
            width: 25px;
        }

        .clip-radio.radio-md label:after {
            height: 25px;
            width: 25px;
        }

    .clip-radio.radio-md input[type="radio"] {
        display: none;
    }

        .clip-radio.radio-md input[type="radio"]:checked + label:before {
            border-width: 7px;
        }

    .clip-radio.radio-lg label {
        padding-left: 35px !important;
        line-height: 33px;
    }

        .clip-radio.radio-lg label:before {
            height: 30px;
            width: 30px;
        }

        .clip-radio.radio-lg label:after {
            height: 30px;
            width: 30px;
        }

    .clip-radio.radio-lg input[type="radio"] {
        display: none;
    }

        .clip-radio.radio-lg input[type="radio"]:checked + label:before {
            border-width: 8px;
        }

    .clip-radio.radio-success input[type="radio"]:checked + label:before {
        background: var(--success);
    }

    .clip-radio.radio-primary input[type="radio"]:checked + label:before {
        background: var(--primary);
    }

    .clip-radio.radio-info input[type="radio"]:checked + label:before {
        background: var(--primary);
    }

    .clip-radio.radio-warning input[type="radio"]:checked + label:before {
        background: var(--warning);
    }

    .clip-radio.radio-danger input[type="radio"]:checked + label:before {
        background: var(--error);
    }

    .clip-radio.radio-var(--accent-purple) input[type="radio"]:checked + label:before {
        background: var(--text-muted);
    }

.clip-datepicker {
    padding: 10px;
}

    .clip-datepicker.well {
        background: var(--surface);
        box-shadow: none;
    }

    .clip-datepicker table {
        outline: none !important;
    }

        .clip-datepicker table thead .btn {
            font-size: 17px;
        }

    .clip-datepicker button {
        border: none;
        line-height: 1.8;
    }

        .clip-datepicker button span.text-info, .clip-datepicker button span.text-current {
            color: var(--primary) !important;
            font-weight: bold;
        }

            .clip-datepicker button span.text-info::before, .clip-datepicker button span.text-current::before {
                border-left: 6px solid transparent;
                border-top: 6px solid var(--primary);
                content: "";
                height: 0;
                position: absolute;
                right: 2px;
                top: 2px;
                width: 0;
            }

        .clip-datepicker button.active {
            background-color: var(--primary) !important;
        }

            .clip-datepicker button.active:active, .clip-datepicker button.active:focus {
                background-color: var(--primary) !important;
            }

            .clip-datepicker button.active span {
                color: var(--surface) !important;
            }

                .clip-datepicker button.active span.text-info::before {
                    border-top-color: var(--surface);
                }

        .clip-datepicker button.btn-current {
            background-color: var(--bg);
        }

.range-picker .end-date .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
    border: none !important;
}

/* ---------------------------------------------------------------------- */
/*  Icons
/* ---------------------------------------------------------------------- */
.fa-round {
    border: 0.1em solid var(--divider);
    border-radius: 100%;
    padding: 0.2em 0.25em 0.15em;
}

.the-icons {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

    .the-icons .fa-hover {
        display: block;
        height: 32px;
        line-height: 32px;
        padding-left: 10px;
        color: var(--text-muted);
        cursor: pointer;
    }

.no-touch .the-icons .fa-hover {
    -moz-transition: font-size, 0.2s, ease 0s;
    -o-transition: font-size, 0.2s, ease 0s;
    -webkit-transition: font-size, 0.2s, ease 0s;
    transition: font-size, 0.2s, ease 0s;
}

    .no-touch .the-icons .fa-hover:hover {
        font-size: 20px;
    }

        .no-touch .the-icons .fa-hover:hover .fa, .no-touch .the-icons .fa-hover:hover [class*="ti-"] {
            font-size: 20px;
        }

.the-icons .fa-hover .fa, .the-icons .fa-hover [class*="ti-"] {
    display: inline-block;
    font-size: 14px;
    margin-right: 10px;
    text-align: right;
    width: 32px;
    color: var(--primary);
}

.big-icon {
    font-size: 100px;
}

/* ---------------------------------------------------------------------- */
/*  Buttons
/* ---------------------------------------------------------------------- */
.btn {
    transition: all 0.3s ease 0s !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
}

    .btn:after {
        content: "";
        position: absolute;
        transition: all 0.3s ease 0s;
        z-index: -1;
    }

.btn-wide {
    min-width: 120px;
}

.ladda-button[data-style="contract"][data-loading] {
    border-radius: 50%;
    min-width: 38px !important;
    overflow: hidden;
    width: 38px !important;
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    box-shadow: none;
}

.btn-o {
    background: none !important;
}

.btn-default {
    background-color: var(--surface);
    border-color: var(--text-disabled);
    color: var(--text-muted);
}

    .btn-default:hover {
        background-color: var(--surface);
        border-color: var(--text-disabled);
        color: var(--text-muted) !important;
    }

    .btn-default:active, .btn-default.active, .btn-default.active:focus, .btn-default:active:focus, .btn-default:active:hover {
        background-color: var(--surface-2);
        border-color: var(--border);
        color: var(--text) !important;
    }

    .btn-default:focus {
        background-color: var(--surface);
        border-color: var(--text-disabled);
        color: var(--text) !important;
    }

    .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
        background-color: var(--surface);
        border-color: var(--border);
        color: var(--border);
    }

    .btn-default .caret {
        border-top-color: var(--text-muted);
    }

.dropup .btn-default .caret {
    border-bottom: 4px solid var(--text-muted);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.open .btn-primary.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
    color: var(--surface);
}

.btn-primary:active, .btn-primary.active, .btn-primary.active:focus, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.dropdown-toggle:active:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.btn-primary:focus {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-primary.btn-o {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .btn-primary.btn-o:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: none !important;
    }

    .btn-primary.btn-o:active, .btn-primary.btn-o.active, .btn-primary.btn-o.active:focus, .btn-primary.btn-o:active:focus, .btn-primary.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
    }

    .btn-primary.btn-o:focus {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-primary.btn-o.disabled:hover, .btn-primary.btn-o.disabled:focus, .btn-primary.btn-o.disabled:active, .btn-primary.btn-o.disabled.active, .btn-primary.btn-o[disabled], .btn-primary.btn-o[disabled]:hover, .btn-primary.btn-o[disabled]:focus, .btn-primary.btn-o[disabled]:active, .btn-primary.btn-o[disabled].active, fieldset[disabled] .btn-primary.btn-o:hover, fieldset[disabled] .btn-primary.btn-o:focus, fieldset[disabled] .btn-primary.btn-o:active, fieldset[disabled] .btn-primary.btn-o.active {
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-primary.btn-o .caret {
        border-top-color: var(--primary);
    }

.btn-primary .caret {
    border-top-color: var(--surface);
}

.dropup .btn-primary .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--surface);
}

.open .btn-success.dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-success:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-success:active, .btn-success.active, .btn-success.active:focus, .btn-success:active:focus, .btn-success:active:hover, .btn-success.dropdown-toggle:active:hover {
    background-color: var(--success) !important;
    border-color: var(--success);
}

.btn-success:focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success[disabled].active, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-success.btn-o {
    border: 1px solid var(--success);
    color: var(--success);
}

    .btn-success.btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-success.btn-o:active, .btn-success.btn-o.active, .btn-success.btn-o.active:focus, .btn-success.btn-o:active:focus, .btn-success.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-success.btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-success.btn-o.disabled:hover, .btn-success.btn-o.disabled:focus, .btn-success.btn-o.disabled:active, .btn-success.btn-o.disabled.active, .btn-success.btn-o[disabled], .btn-success.btn-o[disabled]:hover, .btn-success.btn-o[disabled]:focus, .btn-success.btn-o[disabled]:active, .btn-success.btn-o[disabled].active, fieldset[disabled] .btn-success.btn-o:hover, fieldset[disabled] .btn-success.btn-o:focus, fieldset[disabled] .btn-success.btn-o:active, fieldset[disabled] .btn-success.btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-success.btn-o .caret {
        border-top-color: var(--success);
    }

.btn-success .caret {
    border-top-color: var(--surface);
}

.dropup .btn-success .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-info {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.open .btn-info.dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-info:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-info:active, .btn-info.active, .btn-info.active:focus, .btn-info:active:focus, .btn-info:active:hover, .btn-info.dropdown-toggle:active:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.btn-info:focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled]:active, .btn-info[disabled].active, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-info.btn-o {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .btn-info.btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-info.btn-o:active, .btn-info.btn-o.active, .btn-info.btn-o.active:focus, .btn-info.btn-o:active:focus, .btn-info.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
    }

    .btn-info.btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-info.btn-o.disabled:hover, .btn-info.btn-o.disabled:focus, .btn-info.btn-o.disabled:active, .btn-info.btn-o.disabled.active, .btn-info.btn-o[disabled], .btn-info.btn-o[disabled]:hover, .btn-info.btn-o[disabled]:focus, .btn-info.btn-o[disabled]:active, .btn-info.btn-o[disabled].active, fieldset[disabled] .btn-info.btn-o:hover, fieldset[disabled] .btn-info.btn-o:focus, fieldset[disabled] .btn-info.btn-o:active, fieldset[disabled] .btn-info.btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-info.btn-o .caret {
        border-top-color: var(--primary);
    }

.btn-info .caret {
    border-top-color: var(--surface);
}

.dropup .btn-info .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.open .btn-warning.dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-warning:hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
    color: var(--surface);
}

.btn-warning:active, .btn-warning.active, .btn-warning.active:focus, .btn-warning:active:focus, .btn-warning:active:hover, .btn-warning.dropdown-toggle:active:hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
}

.btn-warning:focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-warning.btn-o {
    border: 1px solid var(--warning);
    color: var(--warning);
}

    .btn-warning.btn-o:hover {
        color: var(--warning);
        border-color: var(--warning);
        background: none !important;
    }

    .btn-warning.btn-o:active, .btn-warning.btn-o.active, .btn-warning.btn-o.active:focus, .btn-warning.btn-o:active:focus, .btn-warning.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--warning) !important;
        color: var(--warning) !important;
    }

    .btn-warning.btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--warning);
    }

    .btn-warning.btn-o.disabled:hover, .btn-warning.btn-o.disabled:focus, .btn-warning.btn-o.disabled:active, .btn-warning.btn-o.disabled.active, .btn-warning.btn-o[disabled], .btn-warning.btn-o[disabled]:hover, .btn-warning.btn-o[disabled]:focus, .btn-warning.btn-o[disabled]:active, .btn-warning.btn-o[disabled].active, fieldset[disabled] .btn-warning.btn-o:hover, fieldset[disabled] .btn-warning.btn-o:focus, fieldset[disabled] .btn-warning.btn-o:active, fieldset[disabled] .btn-warning.btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-warning.btn-o .caret {
        border-top-color: var(--warning);
    }

.btn-warning .caret {
    border-top-color: var(--surface);
}

.dropup .btn-warning .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-danger {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.open .btn-danger.dropdown-toggle {
    background-color: var(--error);
    border-color: var(--error);
}

.btn-danger:hover {
    background-color: var(--error) !important;
    border-color: var(--error);
    color: var(--surface);
}

.btn-danger:active, .btn-danger.active, .btn-danger.active:focus, .btn-danger:active:focus, .btn-danger:active:hover, .btn-danger.dropdown-toggle:active:hover {
    background-color: var(--error) !important;
    border-color: var(--error);
}

.btn-danger:focus {
    background-color: var(--error);
    border-color: var(--error);
}

.btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-danger.btn-o {
    border: 1px solid var(--error);
    color: var(--error);
}

    .btn-danger.btn-o:hover {
        color: var(--error);
        border-color: var(--error);
        background: none !important;
    }

    .btn-danger.btn-o:active, .btn-danger.btn-o.active, .btn-danger.btn-o.active:focus, .btn-danger.btn-o:active:focus, .btn-danger.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-danger.btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--error);
    }

    .btn-danger.btn-o.disabled:hover, .btn-danger.btn-o.disabled:focus, .btn-danger.btn-o.disabled:active, .btn-danger.btn-o.disabled.active, .btn-danger.btn-o[disabled], .btn-danger.btn-o[disabled]:hover, .btn-danger.btn-o[disabled]:focus, .btn-danger.btn-o[disabled]:active, .btn-danger.btn-o[disabled].active, fieldset[disabled] .btn-danger.btn-o:hover, fieldset[disabled] .btn-danger.btn-o:focus, fieldset[disabled] .btn-danger.btn-o:active, fieldset[disabled] .btn-danger.btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-danger.btn-o .caret {
        border-top-color: var(--error);
    }

.btn-danger .caret {
    border-top-color: var(--surface);
}

.dropup .btn-danger .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-azure {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.open .btn-azure.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-azure:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
    color: var(--surface);
}

.btn-azure:active, .btn-azure.active, .btn-azure.active:focus, .btn-azure:active:focus, .btn-azure:active:hover, .btn-azure.dropdown-toggle:active:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.btn-azure:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-azure.disabled:hover, .btn-azure.disabled:focus, .btn-azure.disabled:active, .btn-azure.disabled.active, .btn-azure[disabled], .btn-azure[disabled]:hover, .btn-azure[disabled]:focus, .btn-azure[disabled]:active, .btn-azure[disabled].active, fieldset[disabled] .btn-azure:hover, fieldset[disabled] .btn-azure:focus, fieldset[disabled] .btn-azure:active, fieldset[disabled] .btn-azure.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-azure.btn-o {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .btn-azure.btn-o:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: none !important;
    }

    .btn-azure.btn-o:active, .btn-azure.btn-o.active, .btn-azure.btn-o.active:focus, .btn-azure.btn-o:active:focus, .btn-azure.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-azure.btn-o:focus {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-azure.btn-o.disabled:hover, .btn-azure.btn-o.disabled:focus, .btn-azure.btn-o.disabled:active, .btn-azure.btn-o.disabled.active, .btn-azure.btn-o[disabled], .btn-azure.btn-o[disabled]:hover, .btn-azure.btn-o[disabled]:focus, .btn-azure.btn-o[disabled]:active, .btn-azure.btn-o[disabled].active, fieldset[disabled] .btn-azure.btn-o:hover, fieldset[disabled] .btn-azure.btn-o:focus, fieldset[disabled] .btn-azure.btn-o:active, fieldset[disabled] .btn-azure.btn-o.active {
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-azure.btn-o .caret {
        border-top-color: var(--primary);
    }

.btn-azure .caret {
    border-top-color: var(--surface);
}

.dropup .btn-azure .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-azure {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.open .btn-light-azure.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-light-azure:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
    color: var(--surface);
}

.btn-light-azure:active, .btn-light-azure.active, .btn-light-azure.active:focus, .btn-light-azure:active:focus, .btn-light-azure:active:hover, .btn-light-azure.dropdown-toggle:active:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.btn-light-azure:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-light-azure.disabled:hover, .btn-light-azure.disabled:focus, .btn-light-azure.disabled:active, .btn-light-azure.disabled.active, .btn-light-azure[disabled], .btn-light-azure[disabled]:hover, .btn-light-azure[disabled]:focus, .btn-light-azure[disabled]:active, .btn-light-azure[disabled].active, fieldset[disabled] .btn-light-azure:hover, fieldset[disabled] .btn-light-azure:focus, fieldset[disabled] .btn-light-azure:active, fieldset[disabled] .btn-light-azure.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-light-azure.btn-o {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .btn-light-azure.btn-o:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: none !important;
    }

    .btn-light-azure.btn-o:active, .btn-light-azure.btn-o.active, .btn-light-azure.btn-o.active:focus, .btn-light-azure.btn-o:active:focus, .btn-light-azure.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
    }

    .btn-light-azure.btn-o:focus {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-light-azure.btn-o.disabled:hover, .btn-light-azure.btn-o.disabled:focus, .btn-light-azure.btn-o.disabled:active, .btn-light-azure.btn-o.disabled.active, .btn-light-azure.btn-o[disabled], .btn-light-azure.btn-o[disabled]:hover, .btn-light-azure.btn-o[disabled]:focus, .btn-light-azure.btn-o[disabled]:active, .btn-light-azure.btn-o[disabled].active, fieldset[disabled] .btn-light-azure.btn-o:hover, fieldset[disabled] .btn-light-azure.btn-o:focus, fieldset[disabled] .btn-light-azure.btn-o:active, fieldset[disabled] .btn-light-azure.btn-o.active {
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-light-azure.btn-o .caret {
        border-top-color: var(--primary);
    }

.btn-light-azure .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-azure .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-azure {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.open .btn-dark-azure.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-dark-azure:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
    color: var(--surface);
}

.btn-dark-azure:active, .btn-dark-azure.active, .btn-dark-azure.active:focus, .btn-dark-azure:active:focus, .btn-dark-azure:active:hover, .btn-dark-azure.dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-dark-azure:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-dark-azure.disabled:hover, .btn-dark-azure.disabled:focus, .btn-dark-azure.disabled:active, .btn-dark-azure.disabled.active, .btn-dark-azure[disabled], .btn-dark-azure[disabled]:hover, .btn-dark-azure[disabled]:focus, .btn-dark-azure[disabled]:active, .btn-dark-azure[disabled].active, fieldset[disabled] .btn-dark-azure:hover, fieldset[disabled] .btn-dark-azure:focus, fieldset[disabled] .btn-dark-azure:active, fieldset[disabled] .btn-dark-azure.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-dark-azure.btn-o {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .btn-dark-azure.btn-o:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: none !important;
    }

    .btn-dark-azure.btn-o:active, .btn-dark-azure.btn-o.active, .btn-dark-azure.btn-o.active:focus, .btn-dark-azure.btn-o:active:focus, .btn-dark-azure.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text) !important;
        color: var(--text) !important;
    }

    .btn-dark-azure.btn-o:focus {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-dark-azure.btn-o.disabled:hover, .btn-dark-azure.btn-o.disabled:focus, .btn-dark-azure.btn-o.disabled:active, .btn-dark-azure.btn-o.disabled.active, .btn-dark-azure.btn-o[disabled], .btn-dark-azure.btn-o[disabled]:hover, .btn-dark-azure.btn-o[disabled]:focus, .btn-dark-azure.btn-o[disabled]:active, .btn-dark-azure.btn-o[disabled].active, fieldset[disabled] .btn-dark-azure.btn-o:hover, fieldset[disabled] .btn-dark-azure.btn-o:focus, fieldset[disabled] .btn-dark-azure.btn-o:active, fieldset[disabled] .btn-dark-azure.btn-o.active {
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-dark-azure.btn-o .caret {
        border-top-color: var(--primary);
    }

.btn-dark-azure .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-azure .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-var(--primary) {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--surface);
}

.open .btn-var(--primary).dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-var(--primary):hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-var(--primary):active, .btn-var(--primary).active, .btn-var(--primary).active:focus, .btn-var(--primary):active:focus, .btn-var(--primary):active:hover, .btn-var(--primary).dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-var(--primary):focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-var(--primary).disabled:hover, .btn-var(--primary).disabled:focus, .btn-var(--primary).disabled:active, .btn-var(--primary).disabled.active, .btn-var(--primary)[disabled], .btn-var(--primary)[disabled]:hover, .btn-var(--primary)[disabled]:focus, .btn-var(--primary)[disabled]:active, .btn-var(--primary)[disabled].active, fieldset[disabled] .btn-var(--primary):hover, fieldset[disabled] .btn-var(--primary):focus, fieldset[disabled] .btn-var(--primary):active, fieldset[disabled] .btn-var(--primary).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-var(--primary).btn-o {
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

    .btn-var(--primary).btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-var(--primary).btn-o:active, .btn-var(--primary).btn-o.active, .btn-var(--primary).btn-o.active:focus, .btn-var(--primary).btn-o:active:focus, .btn-var(--primary).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-var(--primary).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-var(--primary).btn-o.disabled:hover, .btn-var(--primary).btn-o.disabled:focus, .btn-var(--primary).btn-o.disabled:active, .btn-var(--primary).btn-o.disabled.active, .btn-var(--primary).btn-o[disabled], .btn-var(--primary).btn-o[disabled]:hover, .btn-var(--primary).btn-o[disabled]:focus, .btn-var(--primary).btn-o[disabled]:active, .btn-var(--primary).btn-o[disabled].active, fieldset[disabled] .btn-var(--primary).btn-o:hover, fieldset[disabled] .btn-var(--primary).btn-o:focus, fieldset[disabled] .btn-var(--primary).btn-o:active, fieldset[disabled] .btn-var(--primary).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-var(--primary).btn-o .caret {
        border-top-color: var(--text-muted);
    }

.btn-var(--primary) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-var(--primary) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-var(--primary) {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.open .btn-light-var(--primary).dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-light-var(--primary):hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--primary):active, .btn-light-var(--primary).active, .btn-light-var(--primary).active:focus, .btn-light-var(--primary):active:focus, .btn-light-var(--primary):active:hover, .btn-light-var(--primary).dropdown-toggle:active:hover {
    background-color: var(--accent-purple) !important;
    border-color: var(--accent-purple);
}

.btn-light-var(--primary):focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--primary).disabled:hover, .btn-light-var(--primary).disabled:focus, .btn-light-var(--primary).disabled:active, .btn-light-var(--primary).disabled.active, .btn-light-var(--primary)[disabled], .btn-light-var(--primary)[disabled]:hover, .btn-light-var(--primary)[disabled]:focus, .btn-light-var(--primary)[disabled]:active, .btn-light-var(--primary)[disabled].active, fieldset[disabled] .btn-light-var(--primary):hover, fieldset[disabled] .btn-light-var(--primary):focus, fieldset[disabled] .btn-light-var(--primary):active, fieldset[disabled] .btn-light-var(--primary).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--primary).btn-o {
    border: 1px solid var(--text-disabled);
    color: var(--text-disabled);
}

    .btn-light-var(--primary).btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-light-var(--primary).btn-o:active, .btn-light-var(--primary).btn-o.active, .btn-light-var(--primary).btn-o.active:focus, .btn-light-var(--primary).btn-o:active:focus, .btn-light-var(--primary).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-light-var(--primary).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--primary).btn-o.disabled:hover, .btn-light-var(--primary).btn-o.disabled:focus, .btn-light-var(--primary).btn-o.disabled:active, .btn-light-var(--primary).btn-o.disabled.active, .btn-light-var(--primary).btn-o[disabled], .btn-light-var(--primary).btn-o[disabled]:hover, .btn-light-var(--primary).btn-o[disabled]:focus, .btn-light-var(--primary).btn-o[disabled]:active, .btn-light-var(--primary).btn-o[disabled].active, fieldset[disabled] .btn-light-var(--primary).btn-o:hover, fieldset[disabled] .btn-light-var(--primary).btn-o:focus, fieldset[disabled] .btn-light-var(--primary).btn-o:active, fieldset[disabled] .btn-light-var(--primary).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--primary).btn-o .caret {
        border-top-color: var(--text-disabled);
    }

.btn-light-var(--primary) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-var(--primary) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-var(--primary) {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--surface);
}

.open .btn-dark-var(--primary).dropdown-toggle {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
}

.btn-dark-var(--primary):hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
    color: var(--surface);
}

.btn-dark-var(--primary):active, .btn-dark-var(--primary).active, .btn-dark-var(--primary).active:focus, .btn-dark-var(--primary):active:focus, .btn-dark-var(--primary):active:hover, .btn-dark-var(--primary).dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-dark-var(--primary):focus {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
    color: var(--surface);
}

.btn-dark-var(--primary).disabled:hover, .btn-dark-var(--primary).disabled:focus, .btn-dark-var(--primary).disabled:active, .btn-dark-var(--primary).disabled.active, .btn-dark-var(--primary)[disabled], .btn-dark-var(--primary)[disabled]:hover, .btn-dark-var(--primary)[disabled]:focus, .btn-dark-var(--primary)[disabled]:active, .btn-dark-var(--primary)[disabled].active, fieldset[disabled] .btn-dark-var(--primary):hover, fieldset[disabled] .btn-dark-var(--primary):focus, fieldset[disabled] .btn-dark-var(--primary):active, fieldset[disabled] .btn-dark-var(--primary).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-dark-var(--primary).btn-o {
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

    .btn-dark-var(--primary).btn-o:hover {
        color: var(--text-muted);
        border-color: var(--text-muted);
        background: none !important;
    }

    .btn-dark-var(--primary).btn-o:active, .btn-dark-var(--primary).btn-o.active, .btn-dark-var(--primary).btn-o.active:focus, .btn-dark-var(--primary).btn-o:active:focus, .btn-dark-var(--primary).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text) !important;
        color: var(--text) !important;
    }

    .btn-dark-var(--primary).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--text-muted);
    }

    .btn-dark-var(--primary).btn-o.disabled:hover, .btn-dark-var(--primary).btn-o.disabled:focus, .btn-dark-var(--primary).btn-o.disabled:active, .btn-dark-var(--primary).btn-o.disabled.active, .btn-dark-var(--primary).btn-o[disabled], .btn-dark-var(--primary).btn-o[disabled]:hover, .btn-dark-var(--primary).btn-o[disabled]:focus, .btn-dark-var(--primary).btn-o[disabled]:active, .btn-dark-var(--primary).btn-o[disabled].active, fieldset[disabled] .btn-dark-var(--primary).btn-o:hover, fieldset[disabled] .btn-dark-var(--primary).btn-o:focus, fieldset[disabled] .btn-dark-var(--primary).btn-o:active, fieldset[disabled] .btn-dark-var(--primary).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-dark-var(--primary).btn-o .caret {
        border-top-color: var(--text-muted);
    }

.btn-dark-var(--primary) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-var(--primary) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-var(--success) {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.open .btn-var(--success).dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-var(--success):hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
    color: var(--surface);
}

.btn-var(--success):active, .btn-var(--success).active, .btn-var(--success).active:focus, .btn-var(--success):active:focus, .btn-var(--success):active:hover, .btn-var(--success).dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-var(--success):focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-var(--success).disabled:hover, .btn-var(--success).disabled:focus, .btn-var(--success).disabled:active, .btn-var(--success).disabled.active, .btn-var(--success)[disabled], .btn-var(--success)[disabled]:hover, .btn-var(--success)[disabled]:focus, .btn-var(--success)[disabled]:active, .btn-var(--success)[disabled].active, fieldset[disabled] .btn-var(--success):hover, fieldset[disabled] .btn-var(--success):focus, fieldset[disabled] .btn-var(--success):active, fieldset[disabled] .btn-var(--success).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-var(--success).btn-o {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .btn-var(--success).btn-o:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: none !important;
    }

    .btn-var(--success).btn-o:active, .btn-var(--success).btn-o.active, .btn-var(--success).btn-o.active:focus, .btn-var(--success).btn-o:active:focus, .btn-var(--success).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-var(--success).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--primary);
    }

    .btn-var(--success).btn-o.disabled:hover, .btn-var(--success).btn-o.disabled:focus, .btn-var(--success).btn-o.disabled:active, .btn-var(--success).btn-o.disabled.active, .btn-var(--success).btn-o[disabled], .btn-var(--success).btn-o[disabled]:hover, .btn-var(--success).btn-o[disabled]:focus, .btn-var(--success).btn-o[disabled]:active, .btn-var(--success).btn-o[disabled].active, fieldset[disabled] .btn-var(--success).btn-o:hover, fieldset[disabled] .btn-var(--success).btn-o:focus, fieldset[disabled] .btn-var(--success).btn-o:active, fieldset[disabled] .btn-var(--success).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-var(--success).btn-o .caret {
        border-top-color: var(--primary);
    }

.btn-var(--success) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-var(--success) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-var(--success) {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.open .btn-light-var(--success).dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-light-var(--success):hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--success):active, .btn-light-var(--success).active, .btn-light-var(--success).active:focus, .btn-light-var(--success):active:focus, .btn-light-var(--success):active:hover, .btn-light-var(--success).dropdown-toggle:active:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.btn-light-var(--success):focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--success).disabled:hover, .btn-light-var(--success).disabled:focus, .btn-light-var(--success).disabled:active, .btn-light-var(--success).disabled.active, .btn-light-var(--success)[disabled], .btn-light-var(--success)[disabled]:hover, .btn-light-var(--success)[disabled]:focus, .btn-light-var(--success)[disabled]:active, .btn-light-var(--success)[disabled].active, fieldset[disabled] .btn-light-var(--success):hover, fieldset[disabled] .btn-light-var(--success):focus, fieldset[disabled] .btn-light-var(--success):active, fieldset[disabled] .btn-light-var(--success).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--success).btn-o {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .btn-light-var(--success).btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-light-var(--success).btn-o:active, .btn-light-var(--success).btn-o.active, .btn-light-var(--success).btn-o.active:focus, .btn-light-var(--success).btn-o:active:focus, .btn-light-var(--success).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-light-var(--success).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--success).btn-o.disabled:hover, .btn-light-var(--success).btn-o.disabled:focus, .btn-light-var(--success).btn-o.disabled:active, .btn-light-var(--success).btn-o.disabled.active, .btn-light-var(--success).btn-o[disabled], .btn-light-var(--success).btn-o[disabled]:hover, .btn-light-var(--success).btn-o[disabled]:focus, .btn-light-var(--success).btn-o[disabled]:active, .btn-light-var(--success).btn-o[disabled].active, fieldset[disabled] .btn-light-var(--success).btn-o:hover, fieldset[disabled] .btn-light-var(--success).btn-o:focus, fieldset[disabled] .btn-light-var(--success).btn-o:active, fieldset[disabled] .btn-light-var(--success).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--success).btn-o .caret {
        border-top-color: var(--primary);
    }

.btn-light-var(--success) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-var(--success) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-var(--success) {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--surface);
}

.open .btn-dark-var(--success).dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-dark-var(--success):hover {
    background-color: var(--primary) !important;
    border-color: var(--primary);
    color: var(--surface);
}

.btn-dark-var(--success):active, .btn-dark-var(--success).active, .btn-dark-var(--success).active:focus, .btn-dark-var(--success):active:focus, .btn-dark-var(--success):active:hover, .btn-dark-var(--success).dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-dark-var(--success):focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-dark-var(--success).disabled:hover, .btn-dark-var(--success).disabled:focus, .btn-dark-var(--success).disabled:active, .btn-dark-var(--success).disabled.active, .btn-dark-var(--success)[disabled], .btn-dark-var(--success)[disabled]:hover, .btn-dark-var(--success)[disabled]:focus, .btn-dark-var(--success)[disabled]:active, .btn-dark-var(--success)[disabled].active, fieldset[disabled] .btn-dark-var(--success):hover, fieldset[disabled] .btn-dark-var(--success):focus, fieldset[disabled] .btn-dark-var(--success):active, fieldset[disabled] .btn-dark-var(--success).active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--surface);
}

.btn-dark-var(--success).btn-o {
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

    .btn-dark-var(--success).btn-o:hover {
        color: var(--primary);
        border-color: var(--primary);
        background: none !important;
    }

    .btn-dark-var(--success).btn-o:active, .btn-dark-var(--success).btn-o.active, .btn-dark-var(--success).btn-o.active:focus, .btn-dark-var(--success).btn-o:active:focus, .btn-dark-var(--success).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text) !important;
        color: var(--text) !important;
    }

    .btn-dark-var(--success).btn-o:focus {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-dark-var(--success).btn-o.disabled:hover, .btn-dark-var(--success).btn-o.disabled:focus, .btn-dark-var(--success).btn-o.disabled:active, .btn-dark-var(--success).btn-o.disabled.active, .btn-dark-var(--success).btn-o[disabled], .btn-dark-var(--success).btn-o[disabled]:hover, .btn-dark-var(--success).btn-o[disabled]:focus, .btn-dark-var(--success).btn-o[disabled]:active, .btn-dark-var(--success).btn-o[disabled].active, fieldset[disabled] .btn-dark-var(--success).btn-o:hover, fieldset[disabled] .btn-dark-var(--success).btn-o:focus, fieldset[disabled] .btn-dark-var(--success).btn-o:active, fieldset[disabled] .btn-dark-var(--success).btn-o.active {
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-dark-var(--success).btn-o .caret {
        border-top-color: var(--text-muted);
    }

.btn-dark-var(--success) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-var(--success) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-var(--warning) {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.open .btn-var(--warning).dropdown-toggle {
    background-color: var(--warning);
    border-color: var(--warning);
}

.btn-var(--warning):hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
    color: var(--surface);
}

.btn-var(--warning):active, .btn-var(--warning).active, .btn-var(--warning).active:focus, .btn-var(--warning):active:focus, .btn-var(--warning):active:hover, .btn-var(--warning).dropdown-toggle:active:hover {
    background-color: var(--error) !important;
    border-color: var(--error);
}

.btn-var(--warning):focus {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.btn-var(--warning).disabled:hover, .btn-var(--warning).disabled:focus, .btn-var(--warning).disabled:active, .btn-var(--warning).disabled.active, .btn-var(--warning)[disabled], .btn-var(--warning)[disabled]:hover, .btn-var(--warning)[disabled]:focus, .btn-var(--warning)[disabled]:active, .btn-var(--warning)[disabled].active, fieldset[disabled] .btn-var(--warning):hover, fieldset[disabled] .btn-var(--warning):focus, fieldset[disabled] .btn-var(--warning):active, fieldset[disabled] .btn-var(--warning).active {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.btn-var(--warning).btn-o {
    border: 1px solid var(--warning);
    color: var(--warning);
}

    .btn-var(--warning).btn-o:hover {
        color: var(--warning);
        border-color: var(--warning);
        background: none !important;
    }

    .btn-var(--warning).btn-o:active, .btn-var(--warning).btn-o.active, .btn-var(--warning).btn-o.active:focus, .btn-var(--warning).btn-o:active:focus, .btn-var(--warning).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--error) !important;
        color: var(--error) !important;
    }

    .btn-var(--warning).btn-o:focus {
        background-color: var(--warning);
        border-color: var(--warning);
        color: var(--warning);
    }

    .btn-var(--warning).btn-o.disabled:hover, .btn-var(--warning).btn-o.disabled:focus, .btn-var(--warning).btn-o.disabled:active, .btn-var(--warning).btn-o.disabled.active, .btn-var(--warning).btn-o[disabled], .btn-var(--warning).btn-o[disabled]:hover, .btn-var(--warning).btn-o[disabled]:focus, .btn-var(--warning).btn-o[disabled]:active, .btn-var(--warning).btn-o[disabled].active, fieldset[disabled] .btn-var(--warning).btn-o:hover, fieldset[disabled] .btn-var(--warning).btn-o:focus, fieldset[disabled] .btn-var(--warning).btn-o:active, fieldset[disabled] .btn-var(--warning).btn-o.active {
        border-color: var(--warning);
        color: var(--warning);
    }

    .btn-var(--warning).btn-o .caret {
        border-top-color: var(--warning);
    }

.btn-var(--warning) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-var(--warning) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-var(--warning) {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.open .btn-light-var(--warning).dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-light-var(--warning):hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
    color: var(--surface);
}

.btn-light-var(--warning):active, .btn-light-var(--warning).active, .btn-light-var(--warning).active:focus, .btn-light-var(--warning):active:focus, .btn-light-var(--warning):active:hover, .btn-light-var(--warning).dropdown-toggle:active:hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
}

.btn-light-var(--warning):focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--warning).disabled:hover, .btn-light-var(--warning).disabled:focus, .btn-light-var(--warning).disabled:active, .btn-light-var(--warning).disabled.active, .btn-light-var(--warning)[disabled], .btn-light-var(--warning)[disabled]:hover, .btn-light-var(--warning)[disabled]:focus, .btn-light-var(--warning)[disabled]:active, .btn-light-var(--warning)[disabled].active, fieldset[disabled] .btn-light-var(--warning):hover, fieldset[disabled] .btn-light-var(--warning):focus, fieldset[disabled] .btn-light-var(--warning):active, fieldset[disabled] .btn-light-var(--warning).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--warning).btn-o {
    border: 1px solid var(--warning);
    color: var(--warning);
}

    .btn-light-var(--warning).btn-o:hover {
        color: var(--warning);
        border-color: var(--warning);
        background: none !important;
    }

    .btn-light-var(--warning).btn-o:active, .btn-light-var(--warning).btn-o.active, .btn-light-var(--warning).btn-o.active:focus, .btn-light-var(--warning).btn-o:active:focus, .btn-light-var(--warning).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--error) !important;
        color: var(--error) !important;
    }

    .btn-light-var(--warning).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--warning);
    }

    .btn-light-var(--warning).btn-o.disabled:hover, .btn-light-var(--warning).btn-o.disabled:focus, .btn-light-var(--warning).btn-o.disabled:active, .btn-light-var(--warning).btn-o.disabled.active, .btn-light-var(--warning).btn-o[disabled], .btn-light-var(--warning).btn-o[disabled]:hover, .btn-light-var(--warning).btn-o[disabled]:focus, .btn-light-var(--warning).btn-o[disabled]:active, .btn-light-var(--warning).btn-o[disabled].active, fieldset[disabled] .btn-light-var(--warning).btn-o:hover, fieldset[disabled] .btn-light-var(--warning).btn-o:focus, fieldset[disabled] .btn-light-var(--warning).btn-o:active, fieldset[disabled] .btn-light-var(--warning).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--warning).btn-o .caret {
        border-top-color: var(--warning);
    }

.btn-light-var(--warning) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-var(--warning) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-var(--warning) {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.open .btn-dark-var(--warning).dropdown-toggle {
    background-color: var(--warning);
    border-color: var(--warning);
}

.btn-dark-var(--warning):hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
    color: var(--surface);
}

.btn-dark-var(--warning):active, .btn-dark-var(--warning).active, .btn-dark-var(--warning).active:focus, .btn-dark-var(--warning):active:focus, .btn-dark-var(--warning):active:hover, .btn-dark-var(--warning).dropdown-toggle:active:hover {
    background-color: var(--error) !important;
    border-color: var(--error);
}

.btn-dark-var(--warning):focus {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.btn-dark-var(--warning).disabled:hover, .btn-dark-var(--warning).disabled:focus, .btn-dark-var(--warning).disabled:active, .btn-dark-var(--warning).disabled.active, .btn-dark-var(--warning)[disabled], .btn-dark-var(--warning)[disabled]:hover, .btn-dark-var(--warning)[disabled]:focus, .btn-dark-var(--warning)[disabled]:active, .btn-dark-var(--warning)[disabled].active, fieldset[disabled] .btn-dark-var(--warning):hover, fieldset[disabled] .btn-dark-var(--warning):focus, fieldset[disabled] .btn-dark-var(--warning):active, fieldset[disabled] .btn-dark-var(--warning).active {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.btn-dark-var(--warning).btn-o {
    border: 1px solid var(--error);
    color: var(--error);
}

    .btn-dark-var(--warning).btn-o:hover {
        color: var(--warning);
        border-color: var(--warning);
        background: none !important;
    }

    .btn-dark-var(--warning).btn-o:active, .btn-dark-var(--warning).btn-o.active, .btn-dark-var(--warning).btn-o.active:focus, .btn-dark-var(--warning).btn-o:active:focus, .btn-dark-var(--warning).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text) !important;
        color: var(--text) !important;
    }

    .btn-dark-var(--warning).btn-o:focus {
        background-color: var(--warning);
        border-color: var(--warning);
        color: var(--warning);
    }

    .btn-dark-var(--warning).btn-o.disabled:hover, .btn-dark-var(--warning).btn-o.disabled:focus, .btn-dark-var(--warning).btn-o.disabled:active, .btn-dark-var(--warning).btn-o.disabled.active, .btn-dark-var(--warning).btn-o[disabled], .btn-dark-var(--warning).btn-o[disabled]:hover, .btn-dark-var(--warning).btn-o[disabled]:focus, .btn-dark-var(--warning).btn-o[disabled]:active, .btn-dark-var(--warning).btn-o[disabled].active, fieldset[disabled] .btn-dark-var(--warning).btn-o:hover, fieldset[disabled] .btn-dark-var(--warning).btn-o:focus, fieldset[disabled] .btn-dark-var(--warning).btn-o:active, fieldset[disabled] .btn-dark-var(--warning).btn-o.active {
        border-color: var(--warning);
        color: var(--warning);
    }

    .btn-dark-var(--warning).btn-o .caret {
        border-top-color: var(--error);
    }

.btn-dark-var(--warning) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-var(--warning) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-var(--error) {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.open .btn-var(--error).dropdown-toggle {
    background-color: var(--error);
    border-color: var(--error);
}

.btn-var(--error):hover {
    background-color: var(--error) !important;
    border-color: var(--error);
    color: var(--surface);
}

.btn-var(--error):active, .btn-var(--error).active, .btn-var(--error).active:focus, .btn-var(--error):active:focus, .btn-var(--error):active:hover, .btn-var(--error).dropdown-toggle:active:hover {
    background-color: var(--error) !important;
    border-color: var(--error);
}

.btn-var(--error):focus {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.btn-var(--error).disabled:hover, .btn-var(--error).disabled:focus, .btn-var(--error).disabled:active, .btn-var(--error).disabled.active, .btn-var(--error)[disabled], .btn-var(--error)[disabled]:hover, .btn-var(--error)[disabled]:focus, .btn-var(--error)[disabled]:active, .btn-var(--error)[disabled].active, fieldset[disabled] .btn-var(--error):hover, fieldset[disabled] .btn-var(--error):focus, fieldset[disabled] .btn-var(--error):active, fieldset[disabled] .btn-var(--error).active {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.btn-var(--error).btn-o {
    border: 1px solid var(--error);
    color: var(--error);
}

    .btn-var(--error).btn-o:hover {
        color: var(--error);
        border-color: var(--error);
        background: none !important;
    }

    .btn-var(--error).btn-o:active, .btn-var(--error).btn-o.active, .btn-var(--error).btn-o.active:focus, .btn-var(--error).btn-o:active:focus, .btn-var(--error).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-var(--error).btn-o:focus {
        background-color: var(--error);
        border-color: var(--error);
        color: var(--error);
    }

    .btn-var(--error).btn-o.disabled:hover, .btn-var(--error).btn-o.disabled:focus, .btn-var(--error).btn-o.disabled:active, .btn-var(--error).btn-o.disabled.active, .btn-var(--error).btn-o[disabled], .btn-var(--error).btn-o[disabled]:hover, .btn-var(--error).btn-o[disabled]:focus, .btn-var(--error).btn-o[disabled]:active, .btn-var(--error).btn-o[disabled].active, fieldset[disabled] .btn-var(--error).btn-o:hover, fieldset[disabled] .btn-var(--error).btn-o:focus, fieldset[disabled] .btn-var(--error).btn-o:active, fieldset[disabled] .btn-var(--error).btn-o.active {
        border-color: var(--error);
        color: var(--error);
    }

    .btn-var(--error).btn-o .caret {
        border-top-color: var(--error);
    }

.btn-var(--error) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-var(--error) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-var(--error) {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.open .btn-light-var(--error).dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-light-var(--error):hover {
    background-color: var(--error) !important;
    border-color: var(--error);
    color: var(--surface);
}

.btn-light-var(--error):active, .btn-light-var(--error).active, .btn-light-var(--error).active:focus, .btn-light-var(--error):active:focus, .btn-light-var(--error):active:hover, .btn-light-var(--error).dropdown-toggle:active:hover {
    background-color: var(--error) !important;
    border-color: var(--error);
}

.btn-light-var(--error):focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--error).disabled:hover, .btn-light-var(--error).disabled:focus, .btn-light-var(--error).disabled:active, .btn-light-var(--error).disabled.active, .btn-light-var(--error)[disabled], .btn-light-var(--error)[disabled]:hover, .btn-light-var(--error)[disabled]:focus, .btn-light-var(--error)[disabled]:active, .btn-light-var(--error)[disabled].active, fieldset[disabled] .btn-light-var(--error):hover, fieldset[disabled] .btn-light-var(--error):focus, fieldset[disabled] .btn-light-var(--error):active, fieldset[disabled] .btn-light-var(--error).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--error).btn-o {
    border: 1px solid var(--error);
    color: var(--error);
}

    .btn-light-var(--error).btn-o:hover {
        color: var(--error);
        border-color: var(--error);
        background: none !important;
    }

    .btn-light-var(--error).btn-o:active, .btn-light-var(--error).btn-o.active, .btn-light-var(--error).btn-o.active:focus, .btn-light-var(--error).btn-o:active:focus, .btn-light-var(--error).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--error) !important;
        color: var(--error) !important;
    }

    .btn-light-var(--error).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--error);
    }

    .btn-light-var(--error).btn-o.disabled:hover, .btn-light-var(--error).btn-o.disabled:focus, .btn-light-var(--error).btn-o.disabled:active, .btn-light-var(--error).btn-o.disabled.active, .btn-light-var(--error).btn-o[disabled], .btn-light-var(--error).btn-o[disabled]:hover, .btn-light-var(--error).btn-o[disabled]:focus, .btn-light-var(--error).btn-o[disabled]:active, .btn-light-var(--error).btn-o[disabled].active, fieldset[disabled] .btn-light-var(--error).btn-o:hover, fieldset[disabled] .btn-light-var(--error).btn-o:focus, fieldset[disabled] .btn-light-var(--error).btn-o:active, fieldset[disabled] .btn-light-var(--error).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--error).btn-o .caret {
        border-top-color: var(--error);
    }

.btn-light-var(--error) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-var(--error) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-var(--error) {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--surface);
}

.open .btn-dark-var(--error).dropdown-toggle {
    background-color: var(--error);
    border-color: var(--error);
}

.btn-dark-var(--error):hover {
    background-color: var(--error) !important;
    border-color: var(--error);
    color: var(--surface);
}

.btn-dark-var(--error):active, .btn-dark-var(--error).active, .btn-dark-var(--error).active:focus, .btn-dark-var(--error):active:focus, .btn-dark-var(--error):active:hover, .btn-dark-var(--error).dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-dark-var(--error):focus {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.btn-dark-var(--error).disabled:hover, .btn-dark-var(--error).disabled:focus, .btn-dark-var(--error).disabled:active, .btn-dark-var(--error).disabled.active, .btn-dark-var(--error)[disabled], .btn-dark-var(--error)[disabled]:hover, .btn-dark-var(--error)[disabled]:focus, .btn-dark-var(--error)[disabled]:active, .btn-dark-var(--error)[disabled].active, fieldset[disabled] .btn-dark-var(--error):hover, fieldset[disabled] .btn-dark-var(--error):focus, fieldset[disabled] .btn-dark-var(--error):active, fieldset[disabled] .btn-dark-var(--error).active {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--surface);
}

.btn-dark-var(--error).btn-o {
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

    .btn-dark-var(--error).btn-o:hover {
        color: var(--error);
        border-color: var(--error);
        background: none !important;
    }

    .btn-dark-var(--error).btn-o:active, .btn-dark-var(--error).btn-o.active, .btn-dark-var(--error).btn-o.active:focus, .btn-dark-var(--error).btn-o:active:focus, .btn-dark-var(--error).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text) !important;
        color: var(--text) !important;
    }

    .btn-dark-var(--error).btn-o:focus {
        background-color: var(--error);
        border-color: var(--error);
        color: var(--error);
    }

    .btn-dark-var(--error).btn-o.disabled:hover, .btn-dark-var(--error).btn-o.disabled:focus, .btn-dark-var(--error).btn-o.disabled:active, .btn-dark-var(--error).btn-o.disabled.active, .btn-dark-var(--error).btn-o[disabled], .btn-dark-var(--error).btn-o[disabled]:hover, .btn-dark-var(--error).btn-o[disabled]:focus, .btn-dark-var(--error).btn-o[disabled]:active, .btn-dark-var(--error).btn-o[disabled].active, fieldset[disabled] .btn-dark-var(--error).btn-o:hover, fieldset[disabled] .btn-dark-var(--error).btn-o:focus, fieldset[disabled] .btn-dark-var(--error).btn-o:active, fieldset[disabled] .btn-dark-var(--error).btn-o.active {
        border-color: var(--error);
        color: var(--error);
    }

    .btn-dark-var(--error).btn-o .caret {
        border-top-color: var(--text-muted);
    }

.btn-dark-var(--error) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-var(--error) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-var(--accent-purple) {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--surface);
}

.open .btn-var(--accent-purple).dropdown-toggle {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
}

.btn-var(--accent-purple):hover {
    background-color: var(--accent-purple) !important;
    border-color: var(--accent-purple);
    color: var(--surface);
}

.btn-var(--accent-purple):active, .btn-var(--accent-purple).active, .btn-var(--accent-purple).active:focus, .btn-var(--accent-purple):active:focus, .btn-var(--accent-purple):active:hover, .btn-var(--accent-purple).dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-var(--accent-purple):focus {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
    color: var(--surface);
}

.btn-var(--accent-purple).disabled:hover, .btn-var(--accent-purple).disabled:focus, .btn-var(--accent-purple).disabled:active, .btn-var(--accent-purple).disabled.active, .btn-var(--accent-purple)[disabled], .btn-var(--accent-purple)[disabled]:hover, .btn-var(--accent-purple)[disabled]:focus, .btn-var(--accent-purple)[disabled]:active, .btn-var(--accent-purple)[disabled].active, fieldset[disabled] .btn-var(--accent-purple):hover, fieldset[disabled] .btn-var(--accent-purple):focus, fieldset[disabled] .btn-var(--accent-purple):active, fieldset[disabled] .btn-var(--accent-purple).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-var(--accent-purple).btn-o {
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

    .btn-var(--accent-purple).btn-o:hover {
        color: var(--accent-purple);
        border-color: var(--accent-purple);
        background: none !important;
    }

    .btn-var(--accent-purple).btn-o:active, .btn-var(--accent-purple).btn-o.active, .btn-var(--accent-purple).btn-o.active:focus, .btn-var(--accent-purple).btn-o:active:focus, .btn-var(--accent-purple).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-var(--accent-purple).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--accent-purple);
    }

    .btn-var(--accent-purple).btn-o.disabled:hover, .btn-var(--accent-purple).btn-o.disabled:focus, .btn-var(--accent-purple).btn-o.disabled:active, .btn-var(--accent-purple).btn-o.disabled.active, .btn-var(--accent-purple).btn-o[disabled], .btn-var(--accent-purple).btn-o[disabled]:hover, .btn-var(--accent-purple).btn-o[disabled]:focus, .btn-var(--accent-purple).btn-o[disabled]:active, .btn-var(--accent-purple).btn-o[disabled].active, fieldset[disabled] .btn-var(--accent-purple).btn-o:hover, fieldset[disabled] .btn-var(--accent-purple).btn-o:focus, fieldset[disabled] .btn-var(--accent-purple).btn-o:active, fieldset[disabled] .btn-var(--accent-purple).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-var(--accent-purple).btn-o .caret {
        border-top-color: var(--text-muted);
    }

.btn-var(--accent-purple) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-var(--accent-purple) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-var(--accent-purple) {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
    color: var(--surface);
}

.open .btn-light-var(--accent-purple).dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-light-var(--accent-purple):hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--accent-purple):active, .btn-light-var(--accent-purple).active, .btn-light-var(--accent-purple).active:focus, .btn-light-var(--accent-purple):active:focus, .btn-light-var(--accent-purple):active:hover, .btn-light-var(--accent-purple).dropdown-toggle:active:hover {
    background-color: var(--accent-purple) !important;
    border-color: var(--accent-purple);
}

.btn-light-var(--accent-purple):focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--accent-purple).disabled:hover, .btn-light-var(--accent-purple).disabled:focus, .btn-light-var(--accent-purple).disabled:active, .btn-light-var(--accent-purple).disabled.active, .btn-light-var(--accent-purple)[disabled], .btn-light-var(--accent-purple)[disabled]:hover, .btn-light-var(--accent-purple)[disabled]:focus, .btn-light-var(--accent-purple)[disabled]:active, .btn-light-var(--accent-purple)[disabled].active, fieldset[disabled] .btn-light-var(--accent-purple):hover, fieldset[disabled] .btn-light-var(--accent-purple):focus, fieldset[disabled] .btn-light-var(--accent-purple):active, fieldset[disabled] .btn-light-var(--accent-purple).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-light-var(--accent-purple).btn-o {
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
}

    .btn-light-var(--accent-purple).btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-light-var(--accent-purple).btn-o:active, .btn-light-var(--accent-purple).btn-o.active, .btn-light-var(--accent-purple).btn-o.active:focus, .btn-light-var(--accent-purple).btn-o:active:focus, .btn-light-var(--accent-purple).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-light-var(--accent-purple).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--accent-purple).btn-o.disabled:hover, .btn-light-var(--accent-purple).btn-o.disabled:focus, .btn-light-var(--accent-purple).btn-o.disabled:active, .btn-light-var(--accent-purple).btn-o.disabled.active, .btn-light-var(--accent-purple).btn-o[disabled], .btn-light-var(--accent-purple).btn-o[disabled]:hover, .btn-light-var(--accent-purple).btn-o[disabled]:focus, .btn-light-var(--accent-purple).btn-o[disabled]:active, .btn-light-var(--accent-purple).btn-o[disabled].active, fieldset[disabled] .btn-light-var(--accent-purple).btn-o:hover, fieldset[disabled] .btn-light-var(--accent-purple).btn-o:focus, fieldset[disabled] .btn-light-var(--accent-purple).btn-o:active, fieldset[disabled] .btn-light-var(--accent-purple).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-light-var(--accent-purple).btn-o .caret {
        border-top-color: var(--accent-purple);
    }

.btn-light-var(--accent-purple) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-var(--accent-purple) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-var(--accent-purple) {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--surface);
}

.open .btn-dark-var(--accent-purple).dropdown-toggle {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
}

.btn-dark-var(--accent-purple):hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
    color: var(--surface);
}

.btn-dark-var(--accent-purple):active, .btn-dark-var(--accent-purple).active, .btn-dark-var(--accent-purple).active:focus, .btn-dark-var(--accent-purple):active:focus, .btn-dark-var(--accent-purple):active:hover, .btn-dark-var(--accent-purple).dropdown-toggle:active:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted);
}

.btn-dark-var(--accent-purple):focus {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
    color: var(--surface);
}

.btn-dark-var(--accent-purple).disabled:hover, .btn-dark-var(--accent-purple).disabled:focus, .btn-dark-var(--accent-purple).disabled:active, .btn-dark-var(--accent-purple).disabled.active, .btn-dark-var(--accent-purple)[disabled], .btn-dark-var(--accent-purple)[disabled]:hover, .btn-dark-var(--accent-purple)[disabled]:focus, .btn-dark-var(--accent-purple)[disabled]:active, .btn-dark-var(--accent-purple)[disabled].active, fieldset[disabled] .btn-dark-var(--accent-purple):hover, fieldset[disabled] .btn-dark-var(--accent-purple):focus, fieldset[disabled] .btn-dark-var(--accent-purple):active, fieldset[disabled] .btn-dark-var(--accent-purple).active {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
    color: var(--surface);
}

.btn-dark-var(--accent-purple).btn-o {
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

    .btn-dark-var(--accent-purple).btn-o:hover {
        color: var(--text-muted);
        border-color: var(--text-muted);
        background: none !important;
    }

    .btn-dark-var(--accent-purple).btn-o:active, .btn-dark-var(--accent-purple).btn-o.active, .btn-dark-var(--accent-purple).btn-o.active:focus, .btn-dark-var(--accent-purple).btn-o:active:focus, .btn-dark-var(--accent-purple).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text) !important;
        color: var(--text) !important;
    }

    .btn-dark-var(--accent-purple).btn-o:focus {
        background-color: var(--accent-purple);
        border-color: var(--accent-purple);
        color: var(--text-muted);
    }

    .btn-dark-var(--accent-purple).btn-o.disabled:hover, .btn-dark-var(--accent-purple).btn-o.disabled:focus, .btn-dark-var(--accent-purple).btn-o.disabled:active, .btn-dark-var(--accent-purple).btn-o.disabled.active, .btn-dark-var(--accent-purple).btn-o[disabled], .btn-dark-var(--accent-purple).btn-o[disabled]:hover, .btn-dark-var(--accent-purple).btn-o[disabled]:focus, .btn-dark-var(--accent-purple).btn-o[disabled]:active, .btn-dark-var(--accent-purple).btn-o[disabled].active, fieldset[disabled] .btn-dark-var(--accent-purple).btn-o:hover, fieldset[disabled] .btn-dark-var(--accent-purple).btn-o:focus, fieldset[disabled] .btn-dark-var(--accent-purple).btn-o:active, fieldset[disabled] .btn-dark-var(--accent-purple).btn-o.active {
        border-color: var(--accent-purple);
        color: var(--accent-purple);
    }

    .btn-dark-var(--accent-purple).btn-o .caret {
        border-top-color: var(--text-muted);
    }

.btn-dark-var(--accent-purple) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-var(--accent-purple) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-beige {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.open .btn-beige.dropdown-toggle {
    background-color: var(--border);
    border-color: var(--border);
}

.btn-beige:hover {
    background-color: var(--border) !important;
    border-color: var(--border);
    color: var(--surface);
}

.btn-beige:active, .btn-beige.active, .btn-beige.active:focus, .btn-beige:active:focus, .btn-beige:active:hover, .btn-beige.dropdown-toggle:active:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
}

.btn-beige:focus {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--surface);
}

.btn-beige.disabled:hover, .btn-beige.disabled:focus, .btn-beige.disabled:active, .btn-beige.disabled.active, .btn-beige[disabled], .btn-beige[disabled]:hover, .btn-beige[disabled]:focus, .btn-beige[disabled]:active, .btn-beige[disabled].active, fieldset[disabled] .btn-beige:hover, fieldset[disabled] .btn-beige:focus, fieldset[disabled] .btn-beige:active, fieldset[disabled] .btn-beige.active {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--surface);
}

.btn-beige.btn-o {
    border: 1px solid var(--text-disabled);
    color: var(--text-disabled);
}

    .btn-beige.btn-o:hover {
        color: var(--border);
        border-color: var(--border);
        background: none !important;
    }

    .btn-beige.btn-o:active, .btn-beige.btn-o.active, .btn-beige.btn-o.active:focus, .btn-beige.btn-o:active:focus, .btn-beige.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--warning) !important;
        color: var(--warning) !important;
    }

    .btn-beige.btn-o:focus {
        background-color: var(--surface-3);
        border-color: var(--surface-3);
        color: var(--border);
    }

    .btn-beige.btn-o.disabled:hover, .btn-beige.btn-o.disabled:focus, .btn-beige.btn-o.disabled:active, .btn-beige.btn-o.disabled.active, .btn-beige.btn-o[disabled], .btn-beige.btn-o[disabled]:hover, .btn-beige.btn-o[disabled]:focus, .btn-beige.btn-o[disabled]:active, .btn-beige.btn-o[disabled].active, fieldset[disabled] .btn-beige.btn-o:hover, fieldset[disabled] .btn-beige.btn-o:focus, fieldset[disabled] .btn-beige.btn-o:active, fieldset[disabled] .btn-beige.btn-o.active {
        border-color: var(--surface-3);
        color: var(--surface-3);
    }

    .btn-beige.btn-o .caret {
        border-top-color: var(--text-disabled);
    }

.btn-beige .caret {
    border-top-color: var(--surface);
}

.dropup .btn-beige .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-beige {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.open .btn-light-beige.dropdown-toggle {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
}

.btn-light-beige:hover {
    background-color: var(--border) !important;
    border-color: var(--border);
    color: var(--surface);
}

.btn-light-beige:active, .btn-light-beige.active, .btn-light-beige.active:focus, .btn-light-beige:active:focus, .btn-light-beige:active:hover, .btn-light-beige.dropdown-toggle:active:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
}

.btn-light-beige:focus {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--surface);
}

.btn-light-beige.disabled:hover, .btn-light-beige.disabled:focus, .btn-light-beige.disabled:active, .btn-light-beige.disabled.active, .btn-light-beige[disabled], .btn-light-beige[disabled]:hover, .btn-light-beige[disabled]:focus, .btn-light-beige[disabled]:active, .btn-light-beige[disabled].active, fieldset[disabled] .btn-light-beige:hover, fieldset[disabled] .btn-light-beige:focus, fieldset[disabled] .btn-light-beige:active, fieldset[disabled] .btn-light-beige.active {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--surface);
}

.btn-light-beige.btn-o {
    border: 1px solid var(--text-disabled);
    color: var(--text-disabled);
}

    .btn-light-beige.btn-o:hover {
        color: var(--border);
        border-color: var(--border);
        background: none !important;
    }

    .btn-light-beige.btn-o:active, .btn-light-beige.btn-o.active, .btn-light-beige.btn-o.active:focus, .btn-light-beige.btn-o:active:focus, .btn-light-beige.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-disabled) !important;
        color: var(--text-disabled) !important;
    }

    .btn-light-beige.btn-o:focus {
        background-color: var(--surface-3);
        border-color: var(--surface-3);
        color: var(--border);
    }

    .btn-light-beige.btn-o.disabled:hover, .btn-light-beige.btn-o.disabled:focus, .btn-light-beige.btn-o.disabled:active, .btn-light-beige.btn-o.disabled.active, .btn-light-beige.btn-o[disabled], .btn-light-beige.btn-o[disabled]:hover, .btn-light-beige.btn-o[disabled]:focus, .btn-light-beige.btn-o[disabled]:active, .btn-light-beige.btn-o[disabled].active, fieldset[disabled] .btn-light-beige.btn-o:hover, fieldset[disabled] .btn-light-beige.btn-o:focus, fieldset[disabled] .btn-light-beige.btn-o:active, fieldset[disabled] .btn-light-beige.btn-o.active {
        border-color: var(--surface-3);
        color: var(--surface-3);
    }

    .btn-light-beige.btn-o .caret {
        border-top-color: var(--text-disabled);
    }

.btn-light-beige .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-beige .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-beige {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.open .btn-dark-beige.dropdown-toggle {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
}

.btn-dark-beige:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-dark-beige:active, .btn-dark-beige.active, .btn-dark-beige.active:focus, .btn-dark-beige:active:focus, .btn-dark-beige:active:hover, .btn-dark-beige.dropdown-toggle:active:hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
}

.btn-dark-beige:focus {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-dark-beige.disabled:hover, .btn-dark-beige.disabled:focus, .btn-dark-beige.disabled:active, .btn-dark-beige.disabled.active, .btn-dark-beige[disabled], .btn-dark-beige[disabled]:hover, .btn-dark-beige[disabled]:focus, .btn-dark-beige[disabled]:active, .btn-dark-beige[disabled].active, fieldset[disabled] .btn-dark-beige:hover, fieldset[disabled] .btn-dark-beige:focus, fieldset[disabled] .btn-dark-beige:active, fieldset[disabled] .btn-dark-beige.active {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--surface);
}

.btn-dark-beige.btn-o {
    border: 1px solid var(--text-disabled);
    color: var(--text-disabled);
}

    .btn-dark-beige.btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-dark-beige.btn-o:active, .btn-dark-beige.btn-o.active, .btn-dark-beige.btn-o.active:focus, .btn-dark-beige.btn-o:active:focus, .btn-dark-beige.btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-muted) !important;
    }

    .btn-dark-beige.btn-o:focus {
        background-color: var(--border);
        border-color: var(--border);
        color: var(--text-disabled);
    }

    .btn-dark-beige.btn-o.disabled:hover, .btn-dark-beige.btn-o.disabled:focus, .btn-dark-beige.btn-o.disabled:active, .btn-dark-beige.btn-o.disabled.active, .btn-dark-beige.btn-o[disabled], .btn-dark-beige.btn-o[disabled]:hover, .btn-dark-beige.btn-o[disabled]:focus, .btn-dark-beige.btn-o[disabled]:active, .btn-dark-beige.btn-o[disabled].active, fieldset[disabled] .btn-dark-beige.btn-o:hover, fieldset[disabled] .btn-dark-beige.btn-o:focus, fieldset[disabled] .btn-dark-beige.btn-o:active, fieldset[disabled] .btn-dark-beige.btn-o.active {
        border-color: var(--border);
        color: var(--border);
    }

    .btn-dark-beige.btn-o .caret {
        border-top-color: var(--text-disabled);
    }

.btn-dark-beige .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-beige .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-var(--warning) {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.open .btn-var(--warning).dropdown-toggle {
    background-color: var(--border);
    border-color: var(--border);
}

.btn-var(--warning):hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-var(--warning):active, .btn-var(--warning).active, .btn-var(--warning).active:focus, .btn-var(--warning):active:focus, .btn-var(--warning):active:hover, .btn-var(--warning).dropdown-toggle:active:hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
}

.btn-var(--warning):focus {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--surface);
}

.btn-var(--warning).disabled:hover, .btn-var(--warning).disabled:focus, .btn-var(--warning).disabled:active, .btn-var(--warning).disabled.active, .btn-var(--warning)[disabled], .btn-var(--warning)[disabled]:hover, .btn-var(--warning)[disabled]:focus, .btn-var(--warning)[disabled]:active, .btn-var(--warning)[disabled].active, fieldset[disabled] .btn-var(--warning):hover, fieldset[disabled] .btn-var(--warning):focus, fieldset[disabled] .btn-var(--warning):active, fieldset[disabled] .btn-var(--warning).active {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--surface);
}

.btn-var(--warning).btn-o {
    border: 1px solid var(--warning);
    color: var(--warning);
}

    .btn-var(--warning).btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-var(--warning).btn-o:active, .btn-var(--warning).btn-o.active, .btn-var(--warning).btn-o.active:focus, .btn-var(--warning).btn-o:active:focus, .btn-var(--warning).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--warning) !important;
        color: var(--warning) !important;
    }

    .btn-var(--warning).btn-o:focus {
        background-color: var(--border);
        border-color: var(--border);
        color: var(--text-disabled);
    }

    .btn-var(--warning).btn-o.disabled:hover, .btn-var(--warning).btn-o.disabled:focus, .btn-var(--warning).btn-o.disabled:active, .btn-var(--warning).btn-o.disabled.active, .btn-var(--warning).btn-o[disabled], .btn-var(--warning).btn-o[disabled]:hover, .btn-var(--warning).btn-o[disabled]:focus, .btn-var(--warning).btn-o[disabled]:active, .btn-var(--warning).btn-o[disabled].active, fieldset[disabled] .btn-var(--warning).btn-o:hover, fieldset[disabled] .btn-var(--warning).btn-o:focus, fieldset[disabled] .btn-var(--warning).btn-o:active, fieldset[disabled] .btn-var(--warning).btn-o.active {
        border-color: var(--border);
        color: var(--border);
    }

    .btn-var(--warning).btn-o .caret {
        border-top-color: var(--warning);
    }

.btn-var(--warning) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-var(--warning) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-var(--warning) {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.open .btn-light-var(--warning).dropdown-toggle {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
}

.btn-light-var(--warning):hover {
    background-color: var(--border) !important;
    border-color: var(--border);
    color: var(--surface);
}

.btn-light-var(--warning):active, .btn-light-var(--warning).active, .btn-light-var(--warning).active:focus, .btn-light-var(--warning):active:focus, .btn-light-var(--warning):active:hover, .btn-light-var(--warning).dropdown-toggle:active:hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
}

.btn-light-var(--warning):focus {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--surface);
}

.btn-light-var(--warning).disabled:hover, .btn-light-var(--warning).disabled:focus, .btn-light-var(--warning).disabled:active, .btn-light-var(--warning).disabled.active, .btn-light-var(--warning)[disabled], .btn-light-var(--warning)[disabled]:hover, .btn-light-var(--warning)[disabled]:focus, .btn-light-var(--warning)[disabled]:active, .btn-light-var(--warning)[disabled].active, fieldset[disabled] .btn-light-var(--warning):hover, fieldset[disabled] .btn-light-var(--warning):focus, fieldset[disabled] .btn-light-var(--warning):active, fieldset[disabled] .btn-light-var(--warning).active {
    background-color: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--surface);
}

.btn-light-var(--warning).btn-o {
    border: 1px solid var(--text-disabled);
    color: var(--text-disabled);
}

    .btn-light-var(--warning).btn-o:hover {
        color: var(--border);
        border-color: var(--border);
        background: none !important;
    }

    .btn-light-var(--warning).btn-o:active, .btn-light-var(--warning).btn-o.active, .btn-light-var(--warning).btn-o.active:focus, .btn-light-var(--warning).btn-o:active:focus, .btn-light-var(--warning).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--warning) !important;
        color: var(--warning) !important;
    }

    .btn-light-var(--warning).btn-o:focus {
        background-color: var(--surface-3);
        border-color: var(--surface-3);
        color: var(--border);
    }

    .btn-light-var(--warning).btn-o.disabled:hover, .btn-light-var(--warning).btn-o.disabled:focus, .btn-light-var(--warning).btn-o.disabled:active, .btn-light-var(--warning).btn-o.disabled.active, .btn-light-var(--warning).btn-o[disabled], .btn-light-var(--warning).btn-o[disabled]:hover, .btn-light-var(--warning).btn-o[disabled]:focus, .btn-light-var(--warning).btn-o[disabled]:active, .btn-light-var(--warning).btn-o[disabled].active, fieldset[disabled] .btn-light-var(--warning).btn-o:hover, fieldset[disabled] .btn-light-var(--warning).btn-o:focus, fieldset[disabled] .btn-light-var(--warning).btn-o:active, fieldset[disabled] .btn-light-var(--warning).btn-o.active {
        border-color: var(--surface-3);
        color: var(--surface-3);
    }

    .btn-light-var(--warning).btn-o .caret {
        border-top-color: var(--text-disabled);
    }

.btn-light-var(--warning) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-light-var(--warning) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-dark-var(--warning) {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.open .btn-dark-var(--warning).dropdown-toggle {
    background-color: var(--warning);
    border-color: var(--warning);
}

.btn-dark-var(--warning):hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
    color: var(--surface);
}

.btn-dark-var(--warning):active, .btn-dark-var(--warning).active, .btn-dark-var(--warning).active:focus, .btn-dark-var(--warning):active:focus, .btn-dark-var(--warning):active:hover, .btn-dark-var(--warning).dropdown-toggle:active:hover {
    background-color: var(--warning) !important;
    border-color: var(--warning);
}

.btn-dark-var(--warning):focus {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--surface);
}

.btn-dark-var(--warning).disabled:hover, .btn-dark-var(--warning).disabled:focus, .btn-dark-var(--warning).disabled:active, .btn-dark-var(--warning).disabled.active, .btn-dark-var(--warning)[disabled], .btn-dark-var(--warning)[disabled]:hover, .btn-dark-var(--warning)[disabled]:focus, .btn-dark-var(--warning)[disabled]:active, .btn-dark-var(--warning)[disabled].active, fieldset[disabled] .btn-dark-var(--warning):hover, fieldset[disabled] .btn-dark-var(--warning):focus, fieldset[disabled] .btn-dark-var(--warning):active, fieldset[disabled] .btn-dark-var(--warning).active {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-dark-var(--warning).btn-o {
    border: 1px solid var(--warning);
    color: var(--warning);
}

    .btn-dark-var(--warning).btn-o:hover {
        color: var(--warning);
        border-color: var(--warning);
        background: none !important;
    }

    .btn-dark-var(--warning).btn-o:active, .btn-dark-var(--warning).btn-o.active, .btn-dark-var(--warning).btn-o.active:focus, .btn-dark-var(--warning).btn-o:active:focus, .btn-dark-var(--warning).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--warning) !important;
        color: var(--warning) !important;
    }

    .btn-dark-var(--warning).btn-o:focus {
        background-color: var(--text-disabled);
        border-color: var(--text-disabled);
        color: var(--warning);
    }

    .btn-dark-var(--warning).btn-o.disabled:hover, .btn-dark-var(--warning).btn-o.disabled:focus, .btn-dark-var(--warning).btn-o.disabled:active, .btn-dark-var(--warning).btn-o.disabled.active, .btn-dark-var(--warning).btn-o[disabled], .btn-dark-var(--warning).btn-o[disabled]:hover, .btn-dark-var(--warning).btn-o[disabled]:focus, .btn-dark-var(--warning).btn-o[disabled]:active, .btn-dark-var(--warning).btn-o[disabled].active, fieldset[disabled] .btn-dark-var(--warning).btn-o:hover, fieldset[disabled] .btn-dark-var(--warning).btn-o:focus, fieldset[disabled] .btn-dark-var(--warning).btn-o:active, fieldset[disabled] .btn-dark-var(--warning).btn-o.active {
        border-color: var(--text-disabled);
        color: var(--text-disabled);
    }

    .btn-dark-var(--warning).btn-o .caret {
        border-top-color: var(--warning);
    }

.btn-dark-var(--warning) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-var(--warning) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-var(--text-muted) {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.open .btn-var(--text-muted).dropdown-toggle {
    background-color: var(--topbar-hover);
    border-color: var(--topbar-hover);
}

.btn-var(--text-muted):hover {
    background-color: var(--border) !important;
    border-color: var(--border);
    color: var(--surface);
}

.btn-var(--text-muted):active, .btn-var(--text-muted).active, .btn-var(--text-muted).active:focus, .btn-var(--text-muted):active:focus, .btn-var(--text-muted):active:hover, .btn-var(--text-muted).dropdown-toggle:active:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
}

.btn-var(--text-muted):focus {
    background-color: var(--topbar-hover);
    border-color: var(--topbar-hover);
    color: var(--surface);
}

.btn-var(--text-muted).disabled:hover, .btn-var(--text-muted).disabled:focus, .btn-var(--text-muted).disabled:active, .btn-var(--text-muted).disabled.active, .btn-var(--text-muted)[disabled], .btn-var(--text-muted)[disabled]:hover, .btn-var(--text-muted)[disabled]:focus, .btn-var(--text-muted)[disabled]:active, .btn-var(--text-muted)[disabled].active, fieldset[disabled] .btn-var(--text-muted):hover, fieldset[disabled] .btn-var(--text-muted):focus, fieldset[disabled] .btn-var(--text-muted):active, fieldset[disabled] .btn-var(--text-muted).active {
    background-color: var(--surface-2);
    border-color: var(--surface-2);
    color: var(--surface);
}

.btn-var(--text-muted).btn-o {
    border: 1px solid var(--text-disabled);
    color: var(--text-disabled);
}

    .btn-var(--text-muted).btn-o:hover {
        color: var(--border);
        border-color: var(--border);
        background: none !important;
    }

    .btn-var(--text-muted).btn-o:active, .btn-var(--text-muted).btn-o.active, .btn-var(--text-muted).btn-o.active:focus, .btn-var(--text-muted).btn-o:active:focus, .btn-var(--text-muted).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--text-disabled) !important;
        color: var(--text-disabled) !important;
    }

    .btn-var(--text-muted).btn-o:focus {
        background-color: var(--surface-2);
        border-color: var(--surface-2);
        color: var(--border);
    }

    .btn-var(--text-muted).btn-o.disabled:hover, .btn-var(--text-muted).btn-o.disabled:focus, .btn-var(--text-muted).btn-o.disabled:active, .btn-var(--text-muted).btn-o.disabled.active, .btn-var(--text-muted).btn-o[disabled], .btn-var(--text-muted).btn-o[disabled]:hover, .btn-var(--text-muted).btn-o[disabled]:focus, .btn-var(--text-muted).btn-o[disabled]:active, .btn-var(--text-muted).btn-o[disabled].active, fieldset[disabled] .btn-var(--text-muted).btn-o:hover, fieldset[disabled] .btn-var(--text-muted).btn-o:focus, fieldset[disabled] .btn-var(--text-muted).btn-o:active, fieldset[disabled] .btn-var(--text-muted).btn-o.active {
        border-color: var(--surface-2);
        color: var(--surface-2);
    }

    .btn-var(--text-muted).btn-o .caret {
        border-top-color: var(--text-disabled);
    }

.btn-var(--text-muted) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-var(--text-muted) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-light-var(--text-muted) {
    background-color: var(--bg);
    border-color: var(--bg);
    color: var(--text-muted);
}

.open .btn-light-var(--text-muted).dropdown-toggle {
    background-color: var(--surface);
    border-color: var(--surface);
}

.btn-light-var(--text-muted):hover {
    background-color: var(--surface) !important;
    border-color: var(--surface);
    color: var(--text-muted);
}

.btn-light-var(--text-muted):active, .btn-light-var(--text-muted).active, .btn-light-var(--text-muted).active:focus, .btn-light-var(--text-muted):active:focus, .btn-light-var(--text-muted):active:hover, .btn-light-var(--text-muted).dropdown-toggle:active:hover {
    background-color: var(--surface-3) !important;
    border-color: var(--surface-3);
}

.btn-light-var(--text-muted):focus {
    background-color: var(--surface);
    border-color: var(--surface);
    color: var(--text-muted);
}

.btn-light-var(--text-muted).disabled:hover, .btn-light-var(--text-muted).disabled:focus, .btn-light-var(--text-muted).disabled:active, .btn-light-var(--text-muted).disabled.active, .btn-light-var(--text-muted)[disabled], .btn-light-var(--text-muted)[disabled]:hover, .btn-light-var(--text-muted)[disabled]:focus, .btn-light-var(--text-muted)[disabled]:active, .btn-light-var(--text-muted)[disabled].active, fieldset[disabled] .btn-light-var(--text-muted):hover, fieldset[disabled] .btn-light-var(--text-muted):focus, fieldset[disabled] .btn-light-var(--text-muted):active, fieldset[disabled] .btn-light-var(--text-muted).active {
    background-color: var(--surface);
    border-color: var(--surface);
    color: var(--text-disabled);
}

.btn-light-var(--text-muted).btn-o {
    border: 1px solid var(--bg);
    color: var(--bg);
}

    .btn-light-var(--text-muted).btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--surface);
        background: none !important;
    }

    .btn-light-var(--text-muted).btn-o:active, .btn-light-var(--text-muted).btn-o.active, .btn-light-var(--text-muted).btn-o.active:focus, .btn-light-var(--text-muted).btn-o:active:focus, .btn-light-var(--text-muted).btn-o:active:hover {
        background-color: var(--surface-3) !important;
        border-color: var(--border) !important;
        color: var(--text-muted) !important;
    }

    .btn-light-var(--text-muted).btn-o:focus {
        background-color: var(--surface);
        border-color: var(--surface);
        color: var(--surface);
    }

    .btn-light-var(--text-muted).btn-o.disabled:hover, .btn-light-var(--text-muted).btn-o.disabled:focus, .btn-light-var(--text-muted).btn-o.disabled:active, .btn-light-var(--text-muted).btn-o.disabled.active, .btn-light-var(--text-muted).btn-o[disabled], .btn-light-var(--text-muted).btn-o[disabled]:hover, .btn-light-var(--text-muted).btn-o[disabled]:focus, .btn-light-var(--text-muted).btn-o[disabled]:active, .btn-light-var(--text-muted).btn-o[disabled].active, fieldset[disabled] .btn-light-var(--text-muted).btn-o:hover, fieldset[disabled] .btn-light-var(--text-muted).btn-o:focus, fieldset[disabled] .btn-light-var(--text-muted).btn-o:active, fieldset[disabled] .btn-light-var(--text-muted).btn-o.active {
        border-color: var(--surface);
        color: var(--text-disabled);
    }

    .btn-light-var(--text-muted).btn-o .caret {
        border-top-color: var(--text-muted);
    }

.btn-light-var(--text-muted) .caret {
    border-top-color: var(--text-muted);
}

.dropup .btn-light-var(--text-muted) .caret {
    border-bottom: 4px solid var(--text-muted);
}

.btn-dark-var(--text-muted) {
    background-color: var(--text-disabled);
    border-color: var(--text-disabled);
    color: var(--surface);
}

.open .btn-dark-var(--text-muted).dropdown-toggle {
    background-color: var(--border);
    border-color: var(--border);
}

.btn-dark-var(--text-muted):hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
    color: var(--surface);
}

.btn-dark-var(--text-muted):active, .btn-dark-var(--text-muted).active, .btn-dark-var(--text-muted).active:focus, .btn-dark-var(--text-muted):active:focus, .btn-dark-var(--text-muted):active:hover, .btn-dark-var(--text-muted).dropdown-toggle:active:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-disabled);
}

.btn-dark-var(--text-muted):focus {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--surface);
}

.btn-dark-var(--text-muted).disabled:hover, .btn-dark-var(--text-muted).disabled:focus, .btn-dark-var(--text-muted).disabled:active, .btn-dark-var(--text-muted).disabled.active, .btn-dark-var(--text-muted)[disabled], .btn-dark-var(--text-muted)[disabled]:hover, .btn-dark-var(--text-muted)[disabled]:focus, .btn-dark-var(--text-muted)[disabled]:active, .btn-dark-var(--text-muted)[disabled].active, fieldset[disabled] .btn-dark-var(--text-muted):hover, fieldset[disabled] .btn-dark-var(--text-muted):focus, fieldset[disabled] .btn-dark-var(--text-muted):active, fieldset[disabled] .btn-dark-var(--text-muted).active {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--surface);
}

.btn-dark-var(--text-muted).btn-o {
    border: 1px solid var(--text-disabled);
    color: var(--text-disabled);
}

    .btn-dark-var(--text-muted).btn-o:hover {
        color: var(--text-disabled);
        border-color: var(--text-disabled);
        background: none !important;
    }

    .btn-dark-var(--text-muted).btn-o:active, .btn-dark-var(--text-muted).btn-o.active, .btn-dark-var(--text-muted).btn-o.active:focus, .btn-dark-var(--text-muted).btn-o:active:focus, .btn-dark-var(--text-muted).btn-o:active:hover {
        background-color: var(--text-disabled) !important;
        border-color: var(--accent-purple) !important;
        color: var(--accent-purple) !important;
    }

    .btn-dark-var(--text-muted).btn-o:focus {
        background-color: var(--border);
        border-color: var(--border);
        color: var(--text-disabled);
    }

    .btn-dark-var(--text-muted).btn-o.disabled:hover, .btn-dark-var(--text-muted).btn-o.disabled:focus, .btn-dark-var(--text-muted).btn-o.disabled:active, .btn-dark-var(--text-muted).btn-o.disabled.active, .btn-dark-var(--text-muted).btn-o[disabled], .btn-dark-var(--text-muted).btn-o[disabled]:hover, .btn-dark-var(--text-muted).btn-o[disabled]:focus, .btn-dark-var(--text-muted).btn-o[disabled]:active, .btn-dark-var(--text-muted).btn-o[disabled].active, fieldset[disabled] .btn-dark-var(--text-muted).btn-o:hover, fieldset[disabled] .btn-dark-var(--text-muted).btn-o:focus, fieldset[disabled] .btn-dark-var(--text-muted).btn-o:active, fieldset[disabled] .btn-dark-var(--text-muted).btn-o.active {
        border-color: var(--border);
        color: var(--border);
    }

    .btn-dark-var(--text-muted).btn-o .caret {
        border-top-color: var(--text-disabled);
    }

.btn-dark-var(--text-muted) .caret {
    border-top-color: var(--surface);
}

.dropup .btn-dark-var(--text-muted) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-transparent-var(--surface) {
    background: none;
    border-color: var(--surface);
    border-width: 1px;
    color: var(--surface) !important;
}

    .btn-transparent-var(--surface):hover, .btn-transparent-var(--surface):focus, .btn-transparent-var(--surface):active, .btn-transparent-var(--surface).active {
        background-color: var(--text);
        border-color: var(--surface);
    }

    .btn-transparent-var(--surface).disabled:hover, .btn-transparent-var(--surface).disabled:focus, .btn-transparent-var(--surface).disabled:active, .btn-transparent-var(--surface).disabled.active, .btn-transparent-var(--surface)[disabled]:hover, .btn-transparent-var(--surface)[disabled]:focus, .btn-transparent-var(--surface)[disabled]:active, .btn-transparent-var(--surface)[disabled].active, fieldset[disabled] .btn-transparent-var(--surface):hover, fieldset[disabled] .btn-transparent-var(--surface):focus, fieldset[disabled] .btn-transparent-var(--surface):active, fieldset[disabled] .btn-transparent-var(--surface).active {
        background: none;
        border-color: var(--surface);
        color: var(--surface);
    }

    .btn-transparent-var(--surface) .caret {
        border-top-color: var(--text);
    }

.dropup .btn-transparent-var(--surface) .caret {
    border-bottom: 4px solid var(--text);
}

.btn-transparent-var(--text-muted) {
    background: none;
    border-color: var(--info);
    border-width: 1px;
    color: var(--text-disabled) !important;
}

    .btn-transparent-var(--text-muted):hover, .btn-transparent-var(--text-muted):focus, .btn-transparent-var(--text-muted):active, .btn-transparent-var(--text-muted).active {
        background-color: var(--info);
        border-color: var(--info);
        box-shadow: none !important;
    }

    .btn-transparent-var(--text-muted).disabled:hover, .btn-transparent-var(--text-muted).disabled:focus, .btn-transparent-var(--text-muted).disabled:active, .btn-transparent-var(--text-muted).disabled.active, .btn-transparent-var(--text-muted)[disabled]:hover, .btn-transparent-var(--text-muted)[disabled]:focus, .btn-transparent-var(--text-muted)[disabled]:active, .btn-transparent-var(--text-muted)[disabled].active, fieldset[disabled] .btn-transparent-var(--text-muted):hover, fieldset[disabled] .btn-transparent-var(--text-muted):focus, fieldset[disabled] .btn-transparent-var(--text-muted):active, fieldset[disabled] .btn-transparent-var(--text-muted).active {
        background: none;
        border-color: var(--info);
        color: var(--text-disabled);
    }

    .btn-transparent-var(--text-muted) .caret {
        border-top-color: var(--text-disabled);
    }

.dropup .btn-transparent-var(--text-muted) .caret {
    border-bottom: 4px solid var(--text-disabled);
}

.btn-transparent-var(--error) {
    background: none;
    border-color: var(--text);
    border-width: 2px;
    color: var(--error) !important;
}

    .btn-transparent-var(--error):hover, .btn-transparent-var(--error):focus, .btn-transparent-var(--error):active, .btn-transparent-var(--error).active {
        background-color: var(--text);
        border-color: var(--text);
    }

    .btn-transparent-var(--error).disabled:hover, .btn-transparent-var(--error).disabled:focus, .btn-transparent-var(--error).disabled:active, .btn-transparent-var(--error).disabled.active, .btn-transparent-var(--error)[disabled]:hover, .btn-transparent-var(--error)[disabled]:focus, .btn-transparent-var(--error)[disabled]:active, .btn-transparent-var(--error)[disabled].active, fieldset[disabled] .btn-transparent-var(--error):hover, fieldset[disabled] .btn-transparent-var(--error):focus, fieldset[disabled] .btn-transparent-var(--error):active, fieldset[disabled] .btn-transparent-var(--error).active {
        background: none;
        border-color: var(--text);
        color: var(--error);
    }

    .btn-transparent-var(--error) .caret {
        border-top-color: var(--surface);
    }

.dropup .btn-transparent-var(--error) .caret {
    border-bottom: 4px solid var(--surface);
}

.btn-squared {
    border-radius: 0 !important;
}

.btn-icon {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px 0 var(--surface);
    cursor: pointer;
    height: 80px;
    display: block;
    font-size: 14px;
    padding: 5px 0 0;
    position: relative;
    text-align: center;
    transition: all 0.3s ease 0s;
    color: var(--text-muted);
}

    .btn-icon:hover {
        border-color: var(--text-disabled);
        box-shadow: 0 0 3px var(--text);
        color: var(--text-muted);
        text-decoration: none;
        text-shadow: 0 1px 0 var(--surface);
    }

    .btn-icon .badge {
        border-radius: 12px 12px 12px 12px !important;
        border-style: solid;
        border-width: 0;
        box-shadow: none;
        color: var(--surface) !important;
        font-size: 11px !important;
        font-weight: 300;
        padding: 3px 7px;
        position: absolute;
        right: -5px;
        text-shadow: none;
        top: -5px;
    }

    .btn-icon [class^="fa-"], .btn-icon [class*=" fa-"] {
        clear: both;
        display: block;
    }

.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file .svg-inject {
        vertical-align: middle;
    }

.iconic-elem-primary {
    fill: var(--primary) !important;
}

.iconic-elem-secondary {
    stroke: var(--surface) !important;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: var(--surface);
    cursor: inherit;
    display: block;
}

.buttons-widget .btn, .buttons-widget .bootstrap-switch, .buttons-widget button {
    margin-bottom: 10px;
}

.buttons-widget .btn-group button, .buttons-widget .btn-group-vertical button, .buttons-widget .btn-group .btn, .buttons-widget .btn-group-vertical .btn {
    margin-bottom: 0;
}

.button-o {
    background: none;
    border: 1px solid var(--primary);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--primary);
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 14px;
    height: 29px;
    line-height: 27px;
    margin: 0;
    overflow: hidden;
    padding: 0 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    var(--surface)-space: nowrap;
}

/***
Dropdown checkboxes
***/
.dropdown-checkboxes {
    padding: 5px;
}

    .dropdown-checkboxes label {
        display: block;
        font-weight: normal;
        line-height: 20px;
    }

.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
    border-left-color: var(--surface) !important;
    margin: 0;
}

.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
    border-top-color: var(--surface) !important;
    margin: 0;
}

/***
Social Icons
***/
.social-icons ul {
    list-style: none;
    margin: 0 0 -1px 0;
    padding: 0;
}

    .social-icons ul li {
        display: inline-block;
        margin: 0;
        padding: 0;
        height: 40px;
        overflow: hidden;
    }

        .social-icons ul li a {
            background-position: 0 0;
            background-repeat: no-repeat;
            display: block;
            height: 80px;
            opacity: 0.6;
            text-indent: -9999px;
            transition: all 0.2s ease 0s;
            width: 40px;
            top: 0;
            font-size: 16px;
            position: relative;
            -moz-transition: all, 0.3s, ease;
            -o-transition: all, 0.3s, ease;
            -webkit-transition: all, 0.3s, ease;
            transition: all, 0.3s, ease;
        }

            .social-icons ul li a:hover {
                top: -40px;
            }

            .social-icons ul li a:before {
                position: absolute;
                width: 40px;
                height: 40px;
                font-family: FontAwesome;
                text-indent: 0;
                line-height: 40px;
                top: 0;
                left: 0;
                text-align: center;
                color: var(--text-disabled);
            }

            .social-icons ul li a:after {
                position: absolute;
                width: 40px;
                height: 40px;
                font-family: FontAwesome;
                text-indent: 0;
                line-height: 40px;
                top: 40px;
                left: 0;
                text-align: center;
                color: var(--surface);
            }

        .social-icons ul li.social-twitter a:before, .social-icons ul li.social-twitter a:after {
            content: "\f099";
        }

        .social-icons ul li.social-twitter a:after {
            background: var(--primary);
        }

        .social-icons ul li.social-dribbble a:before, .social-icons ul li.social-dribbble a:after {
            content: "\f17d";
        }

        .social-icons ul li.social-dribbble a:after {
            background: var(--error);
        }

        .social-icons ul li.social-facebook a:before, .social-icons ul li.social-facebook a:after {
            content: "\f09a";
        }

        .social-icons ul li.social-facebook a:after {
            background: var(--text-muted);
        }

        .social-icons ul li.social-google a:before, .social-icons ul li.social-google a:after {
            content: "\f0d5";
        }

        .social-icons ul li.social-google a:after {
            background: var(--error);
        }

        .social-icons ul li.social-linkedin a:before, .social-icons ul li.social-linkedin a:after {
            content: "\f0e1";
        }

        .social-icons ul li.social-linkedin a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-youtube a:before, .social-icons ul li.social-youtube a:after {
            content: "\f167";
        }

        .social-icons ul li.social-youtube a:after {
            background: var(--error);
        }

        .social-icons ul li.social-rss a:before, .social-icons ul li.social-rss a:after {
            content: "\f09e";
        }

        .social-icons ul li.social-rss a:after {
            background: var(--warning);
        }

        .social-icons ul li.social-behance a:before, .social-icons ul li.social-behance a:after {
            content: "\f1b4";
        }

        .social-icons ul li.social-behance a:after {
            background: var(--primary);
        }

        .social-icons ul li.social-dropbox a:before, .social-icons ul li.social-dropbox a:after {
            content: "\f16b";
        }

        .social-icons ul li.social-dropbox a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-github a:before, .social-icons ul li.social-github a:after {
            content: "\f09b";
        }

        .social-icons ul li.social-github a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-skype a:before, .social-icons ul li.social-skype a:after {
            content: "\f17e";
        }

        .social-icons ul li.social-skype a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-spotify a:before, .social-icons ul li.social-spotify a:after {
            content: "\f1bc";
        }

        .social-icons ul li.social-spotify a:after {
            background: var(--success);
        }

        .social-icons ul li.social-stumbleupon a:before, .social-icons ul li.social-stumbleupon a:after {
            content: "\f1a4";
        }

        .social-icons ul li.social-stumbleupon a:after {
            background: var(--error);
        }

        .social-icons ul li.social-tumblr a:before, .social-icons ul li.social-tumblr a:after {
            content: "\f173";
        }

        .social-icons ul li.social-tumblr a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-vimeo a:before, .social-icons ul li.social-vimeo a:after {
            content: "\f194";
        }

        .social-icons ul li.social-vimeo a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-wordpress a:before, .social-icons ul li.social-wordpress a:after {
            content: "\f19a";
        }

        .social-icons ul li.social-wordpress a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-xing a:before, .social-icons ul li.social-xing a:after {
            content: "\f168";
        }

        .social-icons ul li.social-xing a:after {
            background: var(--text-muted);
        }

        .social-icons ul li.social-yahoo a:before, .social-icons ul li.social-yahoo a:after {
            content: "\f19e";
        }

        .social-icons ul li.social-yahoo a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-vk a:before, .social-icons ul li.social-vk a:after {
            content: "\f189";
        }

        .social-icons ul li.social-vk a:after {
            background: var(--accent-purple);
        }

        .social-icons ul li.social-instagram a:before, .social-icons ul li.social-instagram a:after {
            content: "\f16d";
        }

        .social-icons ul li.social-instagram a:after {
            background: var(--text-disabled);
        }

        .social-icons ul li.social-reddit a:before, .social-icons ul li.social-reddit a:after {
            content: "\f1a1";
        }

        .social-icons ul li.social-reddit a:after {
            background: var(--error);
        }

        .social-icons ul li.social-flickr a:before, .social-icons ul li.social-flickr a:after {
            content: "\f16e";
        }

        .social-icons ul li.social-flickr a:after {
            background: var(--error);
        }

        .social-icons ul li.social-foursquare a:before, .social-icons ul li.social-foursquare a:after {
            content: "\f180";
        }

        .social-icons ul li.social-foursquare a:after {
            background: var(--text-disabled);
        }

.btn-scroll {
    position: relative;
    overflow: hidden;
    font-family: Helvetica, Arial, sans-serif !important;
    line-height: inherit !important;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease;
    -webkit-transition-delay: 0s;
    transition: all 0.3s ease 0s;
    font-size: 14px;
}

    .btn-scroll[class*="fa-"]:before {
        font-family: FontAwesome;
    }

    .btn-scroll[class*="ti-"]:before {
        font-family: themify;
    }

    .btn-scroll:after {
        content: "";
        position: absolute;
        transition: all 0.3s ease 0s;
        z-index: -1;
    }

    .btn-scroll:before {
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        position: relative;
        text-transform: none;
        font-size: 100%;
        height: 100%;
        line-height: 2.5;
        position: absolute;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

    .btn-scroll span {
        backface-visibility: hidden;
        display: inline-block;
        height: 100%;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

    .btn-scroll.btn-scroll-top:hover span {
        -moz-transform: translateY(300%);
        -ms-transform: translateY(300%);
        -webkit-transform: translateY(300%);
        transform: translateY(300%);
    }

    .btn-scroll.btn-scroll-top:hover:before {
        top: 0;
    }

    .btn-scroll.btn-scroll-top:before {
        left: 0;
        top: -100%;
    }

    .btn-scroll.btn-scroll-left:hover span {
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -webkit-transform: translateX(200%);
        transform: translateX(200%);
    }

    .btn-scroll.btn-scroll-left:hover:before {
        left: 0;
    }

    .btn-scroll.btn-scroll-left:before {
        left: -100%;
        top: 0;
    }

/* ---------------------------------------------------------------------- */
/*  Links
/* ---------------------------------------------------------------------- */
/*from http://tympanus.net/Development/CreativeLinkEffects/*/
nav.links {
    text-align: center;
}

    nav.links a {
        color: var(--text-muted);
        display: inline-block;
        font-size: 1.35em;
        font-weight: 400;
        letter-spacing: 1px;
        margin: 15px 25px;
        outline: medium none;
        position: relative;
        text-decoration: none;
        text-shadow: 0 0 1px var(--surface);
        text-transform: uppercase;
    }

[class^="cl-effect-"] a, [class*=" cl-effect-"] a {
    position: relative;
}

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.cl-effect-1 a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

    .cl-effect-2 a span {
        position: relative;
        display: inline-block;
        padding: 0 14px;
        background: var(--primary);
        color: var(--surface);
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

.csstransforms3d .cl-effect-2 a span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
    background: var(--primary);
}

/* Effect 3: bottom line slides/fades in */
.cl-effect-3 a {
    padding: 8px 0;
}

    .cl-effect-3 a::after {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--text);
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: opacity 0.3s, -moz-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }

    .cl-effect-3 a:hover::after,
    .cl-effect-3 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

/* Effect 4: bottom border enlarge */
.cl-effect-4 a {
    padding: 0 0 10px;
}

    .cl-effect-4 a::after {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--primary);
        content: '';
        opacity: 0;
        -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
        transition: height 0.3s, opacity 0.3s, transform 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-4 a:hover::after,
    .cl-effect-4 a:focus::after {
        height: 5px;
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

/* Effect 5: same word slide in */
.cl-effect-5 a {
    overflow: hidden;
    padding: 0 4px;
    height: 1.35em;
}

    .cl-effect-5 a span {
        position: relative;
        display: inline-block;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }

        .cl-effect-5 a span::before {
            position: absolute;
            top: 100%;
            content: attr(data-hover);
            font-weight: 700;
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

    .cl-effect-5 a:hover span,
    .cl-effect-5 a:focus span {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
    }

/* Effect 5: same word slide in and border bottom */
.cl-effect-6 a {
    margin: 0 10px;
    padding: 10px 20px;
}

    .cl-effect-6 a::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--primary);
        content: '';
        -webkit-transition: top 0.3s;
        -moz-transition: top 0.3s;
        transition: top 0.3s;
    }

    .cl-effect-6 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 2px;
        background: var(--primary);
        content: '';
        -webkit-transition: height 0.3s;
        -moz-transition: height 0.3s;
        transition: height 0.3s;
    }

    .cl-effect-6 a:hover::before {
        top: 100%;
        opacity: 1;
    }

    .cl-effect-6 a:hover::after {
        height: 100%;
    }

/* Effect 7: second border slides up */
.cl-effect-7 a {
    padding: 12px 10px 10px;
    color: var(--text-muted);
    text-shadow: none;
    font-weight: 700;
}

    .cl-effect-7 a::before,
    .cl-effect-7 a::after {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--text-muted);
        content: '';
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform: scale(0.85);
        -moz-transform: scale(0.85);
        transform: scale(0.85);
    }

    .cl-effect-7 a::after {
        opacity: 0;
        -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
        transition: top 0.3s, opacity 0.3s, transform 0.3s;
    }

    .cl-effect-7 a:hover::before,
    .cl-effect-7 a:hover::after,
    .cl-effect-7 a:focus::before,
    .cl-effect-7 a:focus::after {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    .cl-effect-7 a:hover::after,
    .cl-effect-7 a:focus::after {
        top: 0%;
        opacity: 1;
    }

/* Effect 8: border slight translate */
.cl-effect-8 a {
    padding: 10px 20px;
}

    .cl-effect-8 a::before,
    .cl-effect-8 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid var(--text-muted);
        content: '';
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }

    .cl-effect-8 a::after {
        border-color: var(--primary);
        opacity: 0;
        -webkit-transform: translateY(-7px) translateX(6px);
        -moz-transform: translateY(-7px) translateX(6px);
        transform: translateY(-7px) translateX(6px);
    }

    .cl-effect-8 a:hover::before,
    .cl-effect-8 a:focus::before {
        opacity: 0;
        -webkit-transform: translateY(5px) translateX(-5px);
        -moz-transform: translateY(5px) translateX(-5px);
        transform: translateY(5px) translateX(-5px);
    }

    .cl-effect-8 a:hover::after,
    .cl-effect-8 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0px);
        -moz-transform: translateY(0px) translateX(0px);
        transform: translateY(0px) translateX(0px);
    }

/* Effect 9: second text and borders */
.cl-effect-9 a {
    margin: 0 20px;
    padding: 18px 20px;
}

    .cl-effect-9 a::before,
    .cl-effect-9 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--primary);
        content: '';
        opacity: 0.2;
        -webkit-transition: opacity 0.3s, height 0.3s;
        -moz-transition: opacity 0.3s, height 0.3s;
        transition: opacity 0.3s, height 0.3s;
    }

    .cl-effect-9 a::after {
        top: 100%;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-9 a span:first-child {
        z-index: 2;
        display: block;
        font-weight: 300;
    }

    .cl-effect-9 a span:last-child {
        z-index: 1;
        display: block;
        padding: 8px 0 0 0;
        color: var(--text);
        text-shadow: none;
        text-transform: none;
        font-size: 0.75em;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .cl-effect-9 a:hover::before,
    .cl-effect-9 a:focus::before {
        height: 6px;
    }

    .cl-effect-9 a:hover::before,
    .cl-effect-9 a:hover::after,
    .cl-effect-9 a:focus::before,
    .cl-effect-9 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

    .cl-effect-9 a:hover span:last-child,
    .cl-effect-9 a:focus span:last-child {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        transform: translateY(0%);
    }

/* Effect 10: reveal, push out */
.cl-effect-10 {
    position: relative;
    z-index: 1;
}

    .cl-effect-10 a {
        overflow: hidden;
        margin: 0 15px;
    }

        .cl-effect-10 a span {
            display: block;
            padding: 10px 20px;
            background: var(--primary);
            color: var(--surface);
            -webkit-transition: -webkit-transform 0.3s;
            -moz-transition: -moz-transform 0.3s;
            transition: transform 0.3s;
        }

        .cl-effect-10 a::before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            padding: 10px 20px;
            width: 100%;
            height: 100%;
            background: var(--primary);
            color: var(--surface);
            content: attr(data-hover);
            -webkit-transition: -webkit-transform 0.3s;
            -moz-transition: -moz-transform 0.3s;
            transition: transform 0.3s;
            -webkit-transform: translateX(-25%);
        }

        .cl-effect-10 a:hover span,
        .cl-effect-10 a:focus span {
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            transform: translateX(100%);
        }

        .cl-effect-10 a:hover::before,
        .cl-effect-10 a:focus::before {
            -webkit-transform: translateX(0%);
            -moz-transform: translateX(0%);
            transform: translateX(0%);
        }

/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
.cl-effect-11 a {
    padding: 10px 0;
    border-top: 2px solid var(--primary);
    color: var(--primary);
    text-shadow: none;
}

    .cl-effect-11 a::before {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        padding: 10px 0;
        max-width: 0;
        border-bottom: 2px solid var(--primary);
        color: var(--primary);
        content: attr(data-hover);
        -webkit-transition: max-width 0.5s;
        -moz-transition: max-width 0.5s;
        transition: max-width 0.5s;
    }

    .cl-effect-11 a:hover::before,
    .cl-effect-11 a:focus::before {
        max-width: 100%;
    }

/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid var(--text);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.cl-effect-12 a::after {
    width: 90px;
    height: 90px;
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.cl-effect-12 a:hover::before,
.cl-effect-12 a:hover::after,
.cl-effect-12 a:focus::before,
.cl-effect-12 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Effect 13: three circles */
.cl-effect-13 a {
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

    .cl-effect-13 a::before {
        position: absolute;
        top: 100%;
        left: 50%;
        color: transparent;
        content: '\2022';
        text-shadow: 0 0 transparent;
        font-size: 1.2em;
        -webkit-transition: text-shadow 0.3s, color 0.3s;
        -moz-transition: text-shadow 0.3s, color 0.3s;
        transition: text-shadow 0.3s, color 0.3s;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%);
        pointer-events: none;
    }

    .cl-effect-13 a:hover::before,
    .cl-effect-13 a:focus::before {
        color: var(--primary);
        text-shadow: 10px 0 var(--primary), -10px 0 var(--primary);
    }

    .cl-effect-13 a:hover,
    .cl-effect-13 a:focus {
        color: var(--primary);
    }

/* Effect 14: border switch */
.cl-effect-14 a {
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
}

    .cl-effect-14 a::before,
    .cl-effect-14 a::after {
        position: absolute;
        width: 45px;
        height: 2px;
        background: var(--primary);
        content: '';
        opacity: 0.2;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        pointer-events: none;
    }

    .cl-effect-14 a::before {
        top: 0;
        left: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .cl-effect-14 a::after {
        right: 0;
        bottom: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: 100% 0;
        -moz-transform-origin: 100% 0;
        transform-origin: 100% 0;
    }

    .cl-effect-14 a:hover::before,
    .cl-effect-14 a:hover::after,
    .cl-effect-14 a:focus::before,
    .cl-effect-14 a:focus::after {
        opacity: 1;
    }

    .cl-effect-14 a:hover::before,
    .cl-effect-14 a:focus::before {
        left: 50%;
        -webkit-transform: rotate(0deg) translateX(-50%);
        -moz-transform: rotate(0deg) translateX(-50%);
        transform: rotate(0deg) translateX(-50%);
    }

    .cl-effect-14 a:hover::after,
    .cl-effect-14 a:focus::after {
        right: 50%;
        -webkit-transform: rotate(0deg) translateX(50%);
        -moz-transform: rotate(0deg) translateX(50%);
        transform: rotate(0deg) translateX(50%);
    }

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
    color: var(--primary) !important;
    font-weight: 700;
    text-shadow: none;
}

    .cl-effect-15 a::before {
        color: var(--text-muted);
        content: attr(data-hover);
        position: absolute;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }

    .cl-effect-15 a:hover::before,
    .cl-effect-15 a:focus::before {
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }

/* Effect 16: fall down */
.cl-effect-16 a {
    color: var(--text-muted);
    text-shadow: 0 0 1px var(--text);
}

    .cl-effect-16 a::before {
        color: var(--primary);
        content: attr(data-hover);
        position: absolute;
        opacity: 0;
        text-shadow: 0 0 1px var(--surface);
        -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
        -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
        transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        pointer-events: none;
    }

    .cl-effect-16 a:hover::before,
    .cl-effect-16 a:focus::before {
        -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
        -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
        transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
        opacity: 1;
    }

/* Effect 17: move up fade out, push border */
.cl-effect-17 a {
    color: var(--text-muted);
    text-shadow: none;
    padding: 10px 0;
}

    .cl-effect-17 a::before {
        color: var(--primary);
        text-shadow: 0 0 1px var(--surface);
        content: attr(data-hover);
        position: absolute;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        pointer-events: none;
    }

    .cl-effect-17 a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--primary);
        opacity: 0;
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        transform: translateY(5px);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        pointer-events: none;
    }

    .cl-effect-17 a:hover::before,
    .cl-effect-17 a:focus::before {
        opacity: 0;
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    .cl-effect-17 a:hover::after,
    .cl-effect-17 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

/* Effect 18: cross */
.cl-effect-18 {
    position: relative;
    z-index: 1;
}

    .cl-effect-18 a {
        padding: 0 5px;
        color: var(--text-muted);
        font-weight: 700;
        -webkit-transition: color 0.3s;
        -moz-transition: color 0.3s;
        transition: color 0.3s;
    }

        .cl-effect-18 a::before,
        .cl-effect-18 a::after {
            position: absolute;
            width: 100%;
            left: 0;
            top: 50%;
            height: 2px;
            margin-top: -1px;
            background: var(--primary);
            content: '';
            z-index: -1;
            -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
            -moz-transition: -moz-transform 0.3s, opacity 0.3s;
            transition: transform 0.3s, opacity 0.3s;
            pointer-events: none;
        }

        .cl-effect-18 a::before {
            -webkit-transform: translateY(-20px);
            -moz-transform: translateY(-20px);
            transform: translateY(-20px);
        }

        .cl-effect-18 a::after {
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            transform: translateY(20px);
        }

        .cl-effect-18 a:hover,
        .cl-effect-18 a:focus {
            color: var(--primary);
        }

            .cl-effect-18 a:hover::before,
            .cl-effect-18 a:hover::after,
            .cl-effect-18 a:focus::before,
            .cl-effect-18 a:focus::after {
                opacity: 0.3;
            }

            .cl-effect-18 a:hover::before,
            .cl-effect-18 a:focus::before {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .cl-effect-18 a:hover::after,
            .cl-effect-18 a:focus::after {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

/* Effect 19: 3D side */
.cl-effect-19 a {
    line-height: 2em;
    margin: 15px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    width: 200px;
}

    .cl-effect-19 a span {
        position: relative;
        display: inline-block;
        width: 100%;
        padding: 0 14px;
        background: var(--primary);
        color: var(--surface);
        -webkit-transition: -webkit-transform 0.4s, background 0.4s;
        -moz-transition: -moz-transform 0.4s, background 0.4s;
        transition: transform 0.4s, background 0.4s;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;
        -moz-transform-origin: 50% 50% -100px;
        transform-origin: 50% 50% -100px;
    }

.csstransforms3d .cl-effect-19 a span::before {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: var(--primary);
    content: attr(data-hover);
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    transition: background 0.4s;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    transform-origin: 0 50%;
    pointer-events: none;
}

.cl-effect-19 a:hover span,
.cl-effect-19 a:focus span {
    background: var(--primary);
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

.csstransforms3d .cl-effect-19 a:hover span::before,
.csstransforms3d .cl-effect-19 a:focus span::before {
    background: var(--primary);
}

/* Effect 20: 3D side */
.cl-effect-20 a {
    line-height: 2em;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}

    .cl-effect-20 a span {
        position: relative;
        display: inline-block;
        padding: 3px 15px 0;
        background: var(--primary);
        box-shadow: inset 0 3px var(--primary);
        color: var(--surface);
        -webkit-transition: background 0.6s;
        -moz-transition: background 0.6s;
        transition: background 0.6s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }

        .cl-effect-20 a span::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary);
            color: var(--surface);
            content: attr(data-hover);
            -webkit-transform: rotateX(270deg);
            -moz-transform: rotateX(270deg);
            transform: rotateX(270deg);
            -webkit-transition: -webkit-transform 0.6s;
            -moz-transition: -moz-transform 0.6s;
            transition: transform 0.6s;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            pointer-events: none;
        }

    .cl-effect-20 a:hover span,
    .cl-effect-20 a:focus span {
        background: var(--primary);
    }

        .cl-effect-20 a:hover span::before,
        .cl-effect-20 a:focus span::before {
            -webkit-transform: rotateX(10deg);
            -moz-transform: rotateX(10deg);
            transform: rotateX(10deg);
        }

/* Effect 21: borders slight translate */
.cl-effect-21 a {
    padding: 10px;
    color: var(--text-muted);
    font-weight: 700;
    text-shadow: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

    .cl-effect-21 a::before,
    .cl-effect-21 a::after {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--surface);
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: opacity 0.3s, -moz-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-21 a::before {
        top: 0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-21 a::after {
        bottom: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }

    .cl-effect-21 a:hover,
    .cl-effect-21 a:focus {
        color: var(--surface);
    }

        .cl-effect-21 a:hover::before,
        .cl-effect-21 a:focus::before,
        .cl-effect-21 a:hover::after,
        .cl-effect-21 a:focus::after {
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            transform: translateY(0px);
        }

/* ---------------------------------------------------------------------- */
/*  Form Wizard
 /* ---------------------------------------------------------------------- */
.swMain > ul {
    display: table;
    list-style: none;
    margin: 0 0 40px 0;
    padding: 10px 0;
    position: relative;
    width: 100%;
    background: var(--bg);
    border-radius: 5px;
}

    .swMain > ul li {
        display: table-cell;
        text-align: center;
        width: 1%;
    }

        .swMain > ul li > a:before {
            border-top: 4px solid var(--text-disabled);
            content: "";
            display: block;
            font-size: 0;
            height: 1px;
            overflow: hidden;
            position: relative;
            top: 21px;
            width: 100%;
            z-index: 1;
        }

        .swMain > ul li:first-child > a:before {
            left: 50%;
            max-width: 51%;
        }

        .swMain > ul li:last-child > a:before {
            max-width: 50%;
            width: 50%;
        }

        .swMain > ul li > a.selected:before, .swMain li > a.done:before {
            border-color: var(--primary);
        }

    .swMain > ul .stepNumber {
        background-color: var(--surface);
        border: 5px solid var(--text-disabled);
        border-radius: 100% 100% 100% 100%;
        color: var(--text-muted);
        display: inline-block;
        font-size: 15px;
        height: 40px;
        line-height: 30px;
        position: relative;
        text-align: center;
        width: 40px;
        z-index: 2;
    }

    .swMain > ul li > a.selected .stepNumber {
        border-color: var(--primary);
    }

    .swMain ul li > a.done .stepNumber, .swMain > ul li:last-child > a.selected .stepNumber {
        border-color: var(--primary);
        background-color: var(--primary);
        color: var(--surface);
        text-indent: -9999px;
    }

        .swMain ul li > a.done .stepNumber:before, .swMain > ul li:last-child > a.selected .stepNumber:before {
            content: "\f00c";
            display: inline;
            float: right;
            font-family: FontAwesome;
            font-weight: 300;
            height: auto;
            text-shadow: none;
            margin-right: 7px;
            text-indent: 0;
        }

.swMain ul li > a.done.wait .stepNumber {
    background-color: var(--bg) !important;
    color: var(--border) !important;
    text-indent: -0px !important;
}

    .swMain ul li > a.done.wait .stepNumber:before {
        content: "" !important;
    }

.swMain > ul li .stepDesc {
    color: var(--text-muted);
    display: block;
    font-size: 14px;
    margin-top: 4px;
    max-width: 100%;
    table-layout: fixed;
    text-align: center;
    word-wrap: break-word;
    z-index: 104;
}

.swMain > ul li > a.selected .stepDesc, .swMain li > a.done .stepDesc {
    color: var(--text-muted);
}

.swMain > ul li > a:hover {
    text-decoration: none;
}

.swMain > ul li > a.disabled {
    cursor: default;
}

.swMain .progress {
    margin-bottom: 30px;
}

.swMain .stepContainer {
    height: auto !important;
}

.swMain .loader {
    display: none;
}

.swMain [class^="button"], .swMain [class*=" button"] {
    display: none;
}

/*.swMain .close {
  display: none;
}*/

/* ---------------------------------------------------------------------- */
/*  Login
/* ---------------------------------------------------------------------- */
.main-login {
    margin-top: 0;
    position: relative;
}

@media (max-width: 991px) {
    .main-login {
        margin-top: 65px;
    }
}

.main-login .logo {
    padding: 0 10px;
}

.main-login .box-login, .main-login .box-forgot, .main-login .box-register {
    background: var(--surface);
    border-radius: 5px;
    overflow: hidden;
    padding: 15px;
    margin: 15px 0 65px 0;
}

.main-login .form fieldset {
    border: none;
    margin: 0;
    padding: 10px 0 0;
}

.main-login a.forgot {
    color: var(--accent-purple);
    font-size: 12px;
    position: absolute;
    right: 10px;
    text-shadow: 1px 1px 1px var(--surface);
    top: 9px;
}

.main-login input.password {
    padding-right: 130px;
}

.main-login label {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 5px;
}

.main-login .copyright {
    font-size: 11px;
    margin: 0 auto;
    padding: 10px 10px 0;
    text-align: center;
}

.main-login .form-actions:before, .main-login .form-actions:after {
    content: "";
    display: table;
    line-height: 0;
}

.main-login .form-actions:after {
    clear: both;
}

.main-login .form-actions {
    margin-top: 15px;
    padding-top: 10px;
    display: block;
}

.main-login .new-account {
    border-top: 1px dotted var(--divider)EEE;
    margin-top: 15px;
    padding-top: 10px;
    display: block;
}

.text-danger {
    color: crimson;
    margin-bottom: -30px;
    margin-top: 10px;
}
/* ---------------------------------------------------------------------- */
/*  Lock Screen
/* ---------------------------------------------------------------------- */
.lock-screen {
    margin: -150px 0 0 -100px;
    width: 200px;
    left: 50%;
    position: absolute;
    top: 50%;
}

    .lock-screen .box-ls {
        overflow: hidden;
        text-align: center;
    }

    .lock-screen .user-info {
        margin: 10px 0;
    }

        .lock-screen .user-info h4 {
            color: var(--text-muted);
            font-family: 'Raleway', sans-serif;
            font-weight: 300;
            margin-top: 0;
        }

        .lock-screen .user-info > span {
            color: var(--text-muted);
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
        }

/* ---------------------------------------------------------------------- */
/*  Invoice
/* ---------------------------------------------------------------------- */
.invoice {
    margin-bottom: 20px;
}

    .invoice .invoice-logo {
        margin-bottom: 20px;
    }

    .invoice table {
        margin: 30px 0;
    }

    .invoice .invoice-logo p {
        font-size: 20px;
        line-height: 28px;
        padding: 25px 0;
        text-align: right;
    }

        .invoice .invoice-logo p small {
            display: block;
            font-size: 14px;
        }

    .invoice h4 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300 !important;
    }

.invoice-details {
    padding-top: 30px;
}

.invoice .invoice-block {
    text-align: right;
}

    .invoice .invoice-block .amounts {
        font-size: 14px;
        margin-top: 20px;
    }

/* ---------------------------------------------------------------------- */
/*  Timeline
/* ---------------------------------------------------------------------- */
div.timeline {
    margin: 0;
    overflow: hidden;
    position: relative;
}

    div.timeline .columns {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        div.timeline .columns > li:nth-child(2n+1) {
            float: left;
            width: 50%;
            clear: left;
        }

            div.timeline .columns > li:nth-child(2n+1) .timeline_element {
                float: right;
                left: 10%;
                margin-right: 30px;
                left: 0;
                opacity: 1;
            }

                div.timeline .columns > li:nth-child(2n+1) .timeline_element:before {
                    right: -27px;
                    top: 15px;
                }

                div.timeline .columns > li:nth-child(2n+1) .timeline_element:after {
                    right: -35px;
                    top: 10px;
                }

        div.timeline .columns > li:nth-child(2n+2) {
            float: right;
            margin-top: 20px;
            width: 50%;
            clear: right;
        }

            div.timeline .columns > li:nth-child(2n+2) .timeline_element {
                float: left;
                margin-left: 30px;
                right: 10%;
                opacity: 1;
                right: 0;
            }

                div.timeline .columns > li:nth-child(2n+2) .timeline_element:before {
                    left: -27px;
                    top: 15px;
                }

                div.timeline .columns > li:nth-child(2n+2) .timeline_element:after {
                    left: -35px;
                    top: 10px;
                }

    div.timeline .date_separator {
        clear: both;
        height: 60px;
        position: relative;
        text-align: center;
    }

        div.timeline .date_separator span {
            border-radius: 5px;
            height: 30px;
            line-height: 30px;
            margin-top: -16px;
            position: absolute;
            top: -200%;
            width: 200px;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            background-color: var(--primary);
            color: var(--surface);
        }

    div.timeline .spine {
        border-radius: 2px;
        position: absolute;
        top: 0;
        width: 4px;
        left: 50%;
        margin-left: -2px;
        bottom: 0;
        background-color: var(--text);
    }

    div.timeline .column_center .timeline_element {
        margin: 20px auto;
        opacity: 1;
    }

        div.timeline .column_center .timeline_element:before, div.timeline .column_center .timeline_element:after {
            display: none;
        }

.timeline_element {
    border-radius: 5px;
    clear: both;
    margin: 30px 0;
    padding: 20px;
    opacity: 0;
    position: relative;
    transition: all 0.2s linear 0s;
    min-width: 66.6667%;
    text-shadow: none;
    box-shadow: 0px 0px 6px var(--text);
}

    .timeline_element.partition-var(--surface) {
        border: 1px solid var(--text);
    }

        .timeline_element.partition-var(--surface):hover {
            border: 1px solid var(--text);
        }

        .timeline_element.partition-var(--surface):after {
            background-color: var(--surface);
        }

        .timeline_element.partition-var(--surface):hover:after {
            background-color: var(--text-disabled);
            border: 1px solid var(--surface);
        }

    .timeline_element.partition-var(--success) {
        border: none;
        color: var(--surface);
    }

        .timeline_element.partition-var(--success):hover {
            border: none;
        }

        .timeline_element.partition-var(--success):after {
            background-color: var(--primary);
        }

        .timeline_element.partition-var(--success):hover:after {
            background-color: var(--surface);
            border: 1px solid var(--primary);
        }

    .timeline_element.partition-var(--warning) {
        border: none;
        color: var(--surface);
    }

        .timeline_element.partition-var(--warning):hover {
            border: none;
        }

        .timeline_element.partition-var(--warning):after {
            background-color: var(--warning);
        }

        .timeline_element.partition-var(--warning):hover:after {
            background-color: var(--surface);
            border: 1px solid var(--warning);
        }

    .timeline_element.partition-var(--primary) {
        border: none;
        color: var(--surface);
    }

        .timeline_element.partition-var(--primary):hover {
            border: none;
        }

        .timeline_element.partition-var(--primary):after {
            background-color: var(--text-muted);
        }

        .timeline_element.partition-var(--primary):hover:after {
            background-color: var(--surface);
            border: 1px solid var(--text-muted);
        }

    .timeline_element.partition-var(--error) {
        border: none;
        color: var(--surface);
    }

        .timeline_element.partition-var(--error):hover {
            border: none;
        }

        .timeline_element.partition-var(--error):after {
            background-color: var(--error);
        }

        .timeline_element.partition-var(--error):hover:after {
            background-color: var(--surface);
            border: 1px solid var(--error);
        }

    .timeline_element.partition-azure {
        border: none;
        color: var(--surface);
    }

        .timeline_element.partition-azure:hover {
            border: none;
        }

        .timeline_element.partition-azure:after {
            background-color: var(--primary);
        }

        .timeline_element.partition-azure:hover:after {
            background-color: var(--surface);
            border: 1px solid var(--primary);
        }

    .timeline_element.partition-var(--accent-purple) {
        border: none;
        color: var(--surface);
    }

        .timeline_element.partition-var(--accent-purple):hover {
            border: none;
        }

        .timeline_element.partition-var(--accent-purple):after {
            background-color: var(--text-muted);
        }

        .timeline_element.partition-var(--accent-purple):hover:after {
            background-color: var(--surface);
            border: 1px solid var(--text-muted);
        }

    .timeline_element:hover {
        box-shadow: 0px 0px 6px var(--text);
    }

    .timeline_element:before {
        content: "";
        display: block;
        height: 0;
        position: absolute;
        width: 26px;
        border-top: 1px dashed var(--border);
    }

    .timeline_element:after {
        border-radius: 100%;
        content: "";
        display: block;
        height: 10px;
        position: absolute;
        width: 10px;
        background-color: var(--text-disabled);
        border: 1px solid var(--surface);
        box-shadow: 0px 0px 2px var(--text);
    }

    .timeline_element:hover:after {
        z-index: 100;
        background-color: var(--surface);
        border: 1px solid var(--border);
        z-index: 100;
    }

    .timeline_element .timeline_title {
        overflow: hidden;
        position: relative;
        text-transform: uppercase;
        padding-top: 10px;
        var(--surface)-space: nowrap;
    }

        .timeline_element .timeline_title h4 {
            line-height: 30px;
        }

    .timeline_element .timeline_date {
        display: block;
    }

        .timeline_element .timeline_date .day {
            font-size: 52px;
            letter-spacing: -2px;
        }

    .timeline_element .timeline_content {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .timeline_element .readmore {
        padding: 10px 0;
        text-align: right;
    }

.timeline-scrubber {
    padding: 8px 0 8px 1px;
    top: 60px;
    right: 0;
    width: 100px;
    z-index: 1;
    list-style: none;
    position: absolute;
}

    .timeline-scrubber li {
        margin-bottom: 1px;
    }

        .timeline-scrubber li:nth-last-child(2) a {
            border-color: var(--surface);
            color: var(--surface);
        }

        .timeline-scrubber li:last-child a {
            border-color: var(--surface);
            color: var(--surface);
        }

    .timeline-scrubber a {
        border-left: 5px solid var(--bg);
        color: var(--bg);
        display: block;
        font-weight: normal;
        outline: medium none;
        padding: 4px 0 4px 6px;
    }

        .timeline-scrubber a:hover {
            border-color: var(--text-disabled) !important;
            color: var(--text-disabled) !important;
        }

    .timeline-scrubber .selected > a {
        border-left-color: var(--text-disabled) !important;
        color: var(--text-disabled) !important;
        font-weight: bold !important;
    }

/* ie8 fixes */
.ie8 div.timeline_element:after {
    display: none;
}

.ie8 div.timeline_element:before {
    display: none;
}

/**/
.timeline-xs {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .timeline-xs .timeline-item {
        position: relative;
        border-left: 1px solid var(--text-disabled);
    }

        .timeline-xs .timeline-item:after {
            background-color: var(--surface);
            border-color: var(--primary);
            border-radius: 10px;
            border-style: solid;
            border-width: 1px;
            bottom: 0;
            content: "";
            height: 9px;
            left: 0;
            margin-left: -5px;
            position: absolute;
            width: 9px;
        }

        .timeline-xs .timeline-item p {
            margin: 0;
            padding-bottom: 10px;
        }

        .timeline-xs .timeline-item.success {
            border-left-color: var(--success);
        }

            .timeline-xs .timeline-item.success:after {
                border-color: var(--success);
            }

        .timeline-xs .timeline-item.danger {
            border-left-color: var(--error);
        }

            .timeline-xs .timeline-item.danger:after {
                border-color: var(--error);
            }

        .timeline-xs .timeline-item.info {
            border-left-color: var(--primary);
        }

            .timeline-xs .timeline-item.info:after {
                border-color: var(--primary);
            }

        .timeline-xs .timeline-item.warning {
            border-left-color: var(--warning);
        }

            .timeline-xs .timeline-item.warning:after {
                border-color: var(--warning);
            }

        .timeline-xs .timeline-item:before, .timeline-xs .timeline-item:after {
            content: " ";
            display: table;
        }

        .timeline-xs .timeline-item:after {
            clear: both;
            bottom: auto;
            top: 4px;
        }

@media (max-width: 991px) {
    /* 991px */
    div.timeline {
        margin: 0;
    }

        div.timeline .columns li {
            float: none !important;
            width: 100% !important;
        }

    .timeline_element {
        margin: 20px auto !important;
    }

        .timeline_element:after {
            display: none;
        }

        .timeline_element:before {
            display: none;
        }

    .timeline-scrubber {
        display: none;
    }
}
/* ---------------------------------------------------------------------- */
/*  Tables
/* ---------------------------------------------------------------------- */
input.custom-form-control {
    background-color: transparent !important;
    border: transparent !important;
    width: 100%;
    color: var(--text) !important;
    font-weight: 400 !important;
    -webkit-text-size-adjust: none !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif !important;
}

.align-right {
    text-align: right;
}

.custom-dx-icon {
    display: inline-block;
    cursor: pointer;
    color: var(--primary);
    font-size: 18px !important;
    width: 18px;
    height: 18px;
    background-position: 0 0;
    background-size: 18px 18px;
    padding: 0;
    text-align: center;
    line-height: 18px !important;
    margin: 0 3px;
}

.custom-dx-table {
    color: var(--text-disabled);
    font-weight: 400 !important;
    -webkit-text-size-adjust: none !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif !important;
}

.table {
    border-collapse: separate;
}

    .table > thead > tr > th {
        border-top: none;
    }

.table-bordered.table > thead > tr > th {
    border-bottom: 1px solid var(--border);
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-bottom: 1px solid var(--border);
    color: var(--text) !important;
    border-top: none;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: var(--surface-3);
}

.table > tbody > tr.active > td, .table > tbody > tr.active > th {
    background-color: var(--surface-3) !important;
    color: var(--text) !important;
}

.table > tbody > tr.active:hover > td, .table > tbody > tr.active:hover > th {
    background-color: var(--border) !important;
    color: var(--text) !important;
}

th.center, td.center {
    text-align: center;
}

    td.center .dropdown-menu {
        text-align: left;
    }

td.small-width {
    width: 15%;
}

.table thead tr {
    color: var(--text-muted);
    font-weight: normal;
}

.table.table-bordered {
    border-right: none;
    border-bottom: none;
}

    .table.table-bordered thead tr th {
        vertical-align: middle;
    }

    .table.table-bordered > thead > tr > th, .table.table-bordered > tbody > tr > th, .table.table-bordered > tfoot > tr > th, .table.table-bordered > thead > tr > td, .table.table-bordered > tbody > tr > td, .table.table-bordered > tfoot > tr > td {
        border-top: none;
        border-left: none;
    }

    .table.table-bordered > thead > tr > th, .table.table-bordered > tbody > tr > th, .table.table-bordered > tfoot > tr > th, .table.table-bordered > thead > tr > td, .table.table-bordered > tbody > tr > td, .table.table-bordered > tfoot > tr > td {
        border-top: none;
        border-left: none;
    }

.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td {
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-child(2n+1) {
    background-color: var(--topbar-hover);
}

.editable-element {
    border-bottom: 1px dashed var(--primary);
    text-decoration: none;
    opacity: 0.5;
    display: inline;
}

.ng-table th {
    text-align: left !important;
}

.ng-table .plus, .ng-table .minus {
    font-weight: bold;
    padding-left: 18px;
    position: relative;
}

    .ng-table .plus:before, .ng-table .minus:before {
        content: "";
        border-width: 4px;
        border-style: solid;
        left: 8px;
        top: 50%;
        position: absolute;
        margin-top: -2px;
    }

.ng-table .plus {
    color: var(--success);
}

    .ng-table .plus:before {
        border-color: var(--success);
        border-top: none;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }

.ng-table .minus {
    color: var(--error);
}

    .ng-table .minus:before {
        border-color: var(--error);
        border-bottom: none;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }

.odd {
    background: var(--topbar-hover);
}

.even {
    background: var(--surface);
}

@media (max-width: 767px) {
    .ng-table-pager {
        text-align: center;
    }

        .ng-table-pager .ng-table-counts {
            float: none !important;
        }

        .ng-table-pager .pagination {
            display: block;
        }

            .ng-table-pager .pagination li {
                display: inline-block;
            }
}

/* ---------------------------------------------------------------------- */
/*  User profile
/* ---------------------------------------------------------------------- */
.user-left {
    border-right: 1px solid var(--border);
    padding-right: 15px;
}

@media (max-width: 991px) {
    .user-left {
        border-right: none;
        padding-right: 0;
        margin-bottom: 15px;
    }
}

.user-left a:hover, .user-left a:focus {
    text-decoration: none;
}

.user-left td .edit-user-info {
    visibility: hidden;
}

.user-left tr:hover .edit-user-info {
    visibility: visible;
}

.user-image {
    position: relative;
    display: inline-block;
}

    .user-image img {
        max-width: 150px;
    }

    .user-image .user-image-buttons {
        position: absolute;
        top: 10px;
        right: 10px;
        display: none;
    }

    .user-image:hover .user-image-buttons {
        display: block;
    }

.user-edit-image-buttons {
    display: inline;
}

#projects .progress {
    margin-bottom: 0;
}

.ltwt {
    font-size: 12px;
    line-height: 15px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

    .ltwt .ltwt_tweet {
        margin-bottom: 30px;
        padding: 0 0 0 45px;
        position: relative;
    }

        .ltwt .ltwt_tweet:before {
            content: "\e74b";
            font-family: 'themify';
            font-size: 30px;
            margin-left: -45px;
            position: absolute;
            top: 6px;
            color: var(--primary);
        }

        .ltwt .ltwt_tweet .ltwt_tweet_text {
            margin-bottom: 5px;
            margin-top: 0;
        }

/* ---------------------------------------------------------------------- */
/*  Calendar
/* ---------------------------------------------------------------------- */
.calAlert {
    width: 595px;
    float: right;
    margin-bottom: 5px;
}

.calXBtn {
    float: right;
    margin-top: -5px;
    margin-right: -5px;
}

.calWell {
    float: left;
    margin-bottom: 40px;
}

.fc-event.openSesame .fc-event-skin {
    background-color: var(--warning);
    color: var(--text);
}

.fc-event.customFeed .fc-event-skin {
    background-color: var(--text-disabled);
    color: var(--text);
}

.calTools {
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------------- */
/*  ToDo
/* ---------------------------------------------------------------------- */
.todo {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .todo li .todo-actions {
        background: var(--surface);
        border-bottom: 1px solid var(--surface-3);
        margin-left: 0 !important;
        padding: 10px 10px 10px 35px !important;
        position: relative;
        display: block;
        color: var(--text-muted);
    }

        .todo li .todo-actions:hover, .todo li .todo-actions:focus {
            text-decoration: none;
            background-color: var(--bg) !important;
        }

        .todo li .todo-actions > i {
            color: var(--border);
            font-size: 18px;
            margin: 0 5px 0 0;
            position: absolute;
            left: 10px;
            top: 11px;
            cursor: pointer;
        }

    .todo li .label {
        position: absolute;
        right: 10px;
        padding: 6px;
    }

    .todo .todo-tools {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

/* ---------------------------------------------------------------------- */
/*  Chat
/* ---------------------------------------------------------------------- */
.discussion {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
}

    .discussion .other {
        float: left;
    }

        .discussion .other .message:last-child .message-text {
            border-radius: 16px 16px 16px 0;
            float: left;
        }

        .discussion .other .message:last-child .message-avatar {
            display: block;
        }

        .discussion .other .message:last-child .message-name {
            display: none;
        }

        .discussion .other .message {
            float: left;
        }

            .discussion .other .message:first-child .message-name {
                display: block !important;
            }

        .discussion .other .message-text {
            background-color: var(--surface-3);
            color: var(--text);
            padding-left: 22px;
            margin-left: 32px;
        }

        .discussion .other .message-avatar {
            left: 10px;
        }

    .discussion .self {
        float: right;
    }

        .discussion .self .message:last-child .message-text {
            border-radius: 16px 16px 0;
            float: left;
        }

        .discussion .self .message:last-child .message-avatar {
            display: block;
        }

        .discussion .self .message:last-child .message-name {
            display: none;
        }

        .discussion .self .message {
            float: right;
        }

            .discussion .self .message:first-child .message-name {
                display: block !important;
            }

        .discussion .self .message-text {
            background-color: var(--success);
            color: var(--surface);
            padding-right: 22px;
            margin-right: 32px;
        }

        .discussion .self .message-avatar {
            float: right;
        }

        .discussion .self .message-name {
            margin-left: auto !important;
            margin-right: 48px;
            text-align: right;
        }

        .discussion .self .message-avatar {
            right: 10px;
        }

    .discussion li {
        position: relative;
        margin: 0 0 10px 0;
        width: 80%;
    }

        .discussion li.messages-date {
            display: inline-block;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 500;
            line-height: 1;
            margin: 10px 0;
            text-align: center;
            width: 100% !important;
        }

        .discussion li.nextSame {
            margin-bottom: 0 !important;
        }

            .discussion li.nextSame .message-text {
                border-radius: 16px !important;
            }

            .discussion li.nextSame .message-avatar {
                display: none !important;
            }

    .discussion .message {
        margin: 1px 10px 0 10px;
        clear: both;
    }

    .discussion .message-name {
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1;
        margin-bottom: 2px;
        margin-top: 7px;
        margin-left: 48px;
        display: none;
    }

    .discussion .message-text {
        border-radius: 16px;
        box-sizing: border-box;
        font-size: 15px;
        line-height: 1.2;
        min-height: 30px;
        min-width: 48px;
        padding: 6px 16px 9px;
    }

    .discussion .message-avatar {
        display: none;
        position: absolute;
        bottom: -5px;
        height: 29px;
        width: 29px;
    }

        .discussion .message-avatar img {
            border-radius: 100%;
            width: 100%;
        }

.message-bar {
    position: relative;
    background: var(--bg);
    height: 44px;
    width: 100%;
    display: table;
}

    .message-bar .message-inner {
        height: 100%;
        padding: 0 8px;
        display: table-row;
        width: 100%;
    }

    .message-bar .message-area {
        display: table-cell;
    }

    .message-bar textarea, .message-bar input {
        background: var(--surface);
        border: 1px solid var(--text-disabled);
        border-radius: 5px;
        box-shadow: none;
        font-family: inherit;
        height: 28px;
        line-height: 20px;
        margin: 8px 0;
        padding: 3px 8px;
        resize: none;
        width: 100%;
    }

    .message-bar .link {
        padding: 0 10px;
        line-height: 44px;
        position: relative;
        display: table-cell;
        width: 30px;
        vertical-align: middle;
    }

    .message-bar a.icon-only {
        color: var(--text-muted);
        font-size: 20px;
        margin: 0;
        margin-right: 8px;
    }

/* ---------------------------------------------------------------------- */
/*  Messages
/* ---------------------------------------------------------------------- */
.panel-body.messages {
    padding: 0;
}

.messages-list {
    border-right: 1px solid var(--surface);
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    top: 65px;
    bottom: 0;
}

    .messages-list .messages-item {
        border-bottom: 1px solid var(--text-disabled);
        padding: 5px 15px 5px 25px;
        position: relative;
    }

        .messages-list .messages-item:hover {
            background-color: var(--surface);
            cursor: pointer !important;
        }

            .messages-list .messages-item:hover .messages-item-star {
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
                opacity: 0.3;
            }

        .messages-list .messages-item.active {
            background-color: var(--surface);
        }

        .messages-list .messages-item.starred .messages-item-star {
            display: block;
            filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
            opacity: 1;
        }

        .messages-list .messages-item span {
            color: var(--primary);
            display: block;
        }

            .messages-list .messages-item span .spam {
                font-style: normal;
            }

        .messages-list .messages-item .messages-item-star, .messages-list .messages-item .messages-item-attachment, .messages-list .messages-item .messages-item-time, .messages-list .messages-item .messages-item-actions {
            position: absolute;
        }

        .messages-list .messages-item .messages-item-star {
            color: var(--primary);
            left: 7px;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
            opacity: 0;
            -moz-transition: opacity, 0.3s, ease-in-out 0s;
            -o-transition: opacity, 0.3s, ease-in-out 0s;
            -webkit-transition: opacity, 0.3s, ease-in-out 0s;
            transition: opacity, 0.3s, ease-in-out 0s;
        }

            .messages-list .messages-item .messages-item-star:hover, .messages-list .messages-item .messages-item-star:active, .messages-list .messages-item .messages-item-star:focus {
                filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
                opacity: 1;
            }

        .messages-list .messages-item .messages-item-attachment {
            left: 7px;
            top: 25px;
            color: var(--text-muted);
        }

        .messages-list .messages-item .messages-item-avatar {
            border-radius: 4px;
            float: left;
            height: 40px;
            width: 40px;
        }

        .messages-list .messages-item .messages-item-from, .messages-list .messages-item .messages-item-subject, .messages-list .messages-item .messages-item-content {
            margin-left: 45px;
        }

        .messages-list .messages-item .messages-item-from {
            font-weight: bold;
            margin-top: 2px;
            color: var(--text-disabled);
        }

        .messages-list .messages-item .messages-item-time {
            right: 15px;
            top: 8px;
        }

            .messages-list .messages-item .messages-item-time .text {
                color: var(--text-muted);
                font-size: 11px;
            }

            .messages-list .messages-item .messages-item-time .messages-item-actions {
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: 0;
                right: 0;
                top: 0;
                -moz-transition: opacity, 0.3s, ease-in-out 0s;
                -o-transition: opacity, 0.3s, ease-in-out 0s;
                -webkit-transition: opacity, 0.3s, ease-in-out 0s;
                transition: opacity, 0.3s, ease-in-out 0s;
                width: 65px;
            }

                .messages-list .messages-item .messages-item-time .messages-item-actions > a, .messages-list .messages-item .messages-item-time .messages-item-actions .dropdown > a {
                    margin-left: 5px;
                }

                .messages-list .messages-item .messages-item-time .messages-item-actions > div {
                    display: inline-block;
                }

                .messages-list .messages-item .messages-item-time .messages-item-actions .dropdown-menu {
                    margin-top: 0;
                }

                .messages-list .messages-item .messages-item-time .messages-item-actions .tag-icon {
                    border-radius: 30px;
                    display: inline-block;
                    height: 11px;
                    margin: 0 5px 0 -13px;
                    width: 11px;
                }

                    .messages-list .messages-item .messages-item-time .messages-item-actions .tag-icon.var(--error) {
                        background: var(--error);
                    }

                    .messages-list .messages-item .messages-item-time .messages-item-actions .tag-icon.var(--primary) {
                        background: var(--text-muted);
                    }

                    .messages-list .messages-item .messages-item-time .messages-item-actions .tag-icon.var(--success) {
                        background: var(--primary);
                    }

        .messages-list .messages-item .messages-item-subject {
            font-size: 14px;
            margin-bottom: 4px;
            color: var(--text);
        }

        .messages-list .messages-item .messages-item-content {
            font-size: 12px;
            color: var(--text-disabled);
            margin-bottom: 4px;
        }

        .messages-list .messages-item .messages-item-preview {
            color: var(--text-disabled);
            font-size: 12px;
        }

.wrap-options {
    border-bottom: 1px solid var(--text-disabled);
    min-height: 65px;
}

.messages-search {
    padding: 15px;
    width: 100%;
}

@media (max-width: 1200px) {
    .messages-search {
        display: none;
        position: absolute;
        top: 0;
    }
}

.message-actions {
    height: 65px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: var(--bg);
}

    .message-actions .actions {
        list-style: none;
    }

        .message-actions .actions > li {
            float: left;
            height: 65px;
            position: relative;
        }

@media (max-width: 480px) {
    .message-actions .actions > li {
        display: none;
    }
}

.message-actions .actions > li:after {
    background: var(--text);
    content: "";
    height: 14px;
    position: absolute;
    right: -4px;
    top: 26px;
    width: 1px;
}

.message-actions .actions > li.actions-dropdown {
    display: none;
}

@media (max-width: 480px) {
    .message-actions .actions > li.actions-dropdown {
        display: block;
    }
}

.message-actions .actions > li > a, .message-actions .actions > li > span > a {
    font-size: 12px;
    font-weight: 600;
    line-height: 65px;
    padding: 0 13px;
    var(--surface)-space: nowrap;
    color: var(--text-muted);
}

.message-actions .actions > li.email-list-toggle {
    display: none;
}

@media (max-width: 768px) {
    .message-actions .actions > li.email-list-toggle {
        display: block !important;
    }
}

.message-header {
    border-bottom: 1px solid var(--surface);
    padding: 75px 15px 10px;
}

    .message-header .message-item-avatar {
        border-radius: 4px;
        float: left;
        height: 50px;
        width: 50px;
        margin-right: 10px;
    }

    .message-header .message-from {
        font-weight: bold;
        color: var(--text);
    }

    .message-header .message-to {
        color: var(--text-disabled);
    }

    .message-header .message-time {
        color: var(--text-disabled);
        font-size: 11px;
    }

.message-subject {
    padding: 20px 10px 0;
    color: var(--text);
    font-size: 16px;
}

.message-content {
    padding: 20px 10px;
    color: var(--text-muted);
}

.inbox {
    border-spacing: 0;
    height: 100%;
    margin: 0 -15px;
}

    .inbox .col {
        float: left;
        height: 100%;
        vertical-align: top;
    }

    .inbox .email-options {
        width: 240px !important;
        border-right: 1px solid var(--border);
        overflow: hidden;
    }

@media (max-width: 1200px) {
    .inbox .email-options {
        display: none;
    }
}

.inbox .email-options .email-options-title {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.inbox .email-options .main-options {
    margin: 0;
    list-style: none;
    padding: 0;
}

    .inbox .email-options .main-options li {
        line-height: 34px;
    }

        .inbox .email-options .main-options li .badge {
            margin-top: 8px;
        }

.no-messages {
    bottom: 0;
    left: 0;
    margin-top: -34px;
    opacity: 0.5;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
}

.inbox .email-list {
    width: 360px !important;
    border-right: 1px solid var(--border);
    background: var(--surface);
}

@media (max-width: 768px) {
    .inbox .email-list {
        width: 100% !important;
        border-right: none;
        background: var(--surface);
        position: relative;
    }
}

.inbox .wrap-list {
    width: 359px;
    height: 100% !important;
    position: relative;
}

    .inbox .wrap-list .close-message-search {
        position: absolute;
        right: 15px;
        top: 15px;
        z-index: 100;
        display: none;
    }

    .inbox .wrap-list .search-open .close-message-search {
        display: block;
    }

    .inbox .wrap-list .search-open .open-message-search {
        display: none;
    }

    .inbox .wrap-list .search-open .messages-options .btn-group {
        display: none;
    }

    .inbox .wrap-list .search-open .messages-search {
        display: block !important;
        right: 50px;
        left: 0;
        width: auto;
    }

@media (max-width: 768px) {
    .inbox .wrap-list {
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    .inbox .wrap-list .messages-options {
        display: none;
    }
}

.inbox .email-reader {
    height: 100%;
    margin-left: 600px;
    overflow: hidden;
    position: relative;
    padding: 0;
    background: var(--surface);
}

@media (max-width: 1200px) {
    .inbox .email-reader {
        margin-left: 360px;
    }
}

@media (max-width: 768px) {
    .inbox .email-reader {
        margin-left: 0;
    }
}

/* ie8 fixes */
.ie8 .messages-list .messages-item .messages-item-star {
    display: none;
}

.ie8 .messages-list .messages-item:hover .messages-item-star {
    display: block;
}

/**/
/* ie8 fixes */
.ie8 .messages-list .messages-item .messages-item-time .messages-item-actions {
    display: none;
}

/**/
/* ---------------------------------------------------------------------- */
/*  Modals
/* ---------------------------------------------------------------------- */
.modal-backdrop {
    background-color: var(--text);
    bottom: 0;
    position: fixed;
}

    .modal-backdrop.in {
        opacity: 0.4;
    }

.modal-backdrop {
    z-index: 9998 !important;
}

.modal {
    z-index: 9999 !important;
}

.modal-content {
    background: var(--surface-3);
    box-shadow: none;
}

.modal-footer, .modal-header {
    border-color: var(--text-disabled);
}

.ng-aside.horizontal .modal-dialog {
    min-height: 100% !important;
    bottom: 0;
    height: auto !important;
}

    .ng-aside.horizontal .modal-dialog .modal-content {
        height: auto !important;
        min-height: 100% !important;
    }

/* ---------------------------------------------------------------------- */
/*  Maps
/* ---------------------------------------------------------------------- */
#map_canvas {
    position: relative;
}

.angular-google-map-container {
    height: 400px;
}

/* ---------------------------------------------------------------------- */
/*  Pricing Tables
/* ---------------------------------------------------------------------- */
.pricing-table .plan {
    border: none;
    margin: 20px 0;
    position: relative;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-bottom: none;
    text-align: center;
}

    .pricing-table .plan li {
        padding: 10px 15px;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
    }

        .pricing-table .plan li.plan-name {
            padding: 15px;
            font-size: 18px;
            line-height: 18px;
            color: var(--surface);
            background: var(--border);
            border-top: 0;
            border-bottom: 0;
        }

        .pricing-table .plan li.plan-price {
            background: var(--text-disabled);
            color: var(--surface);
            font-size: 18px;
            padding: 6px 20px;
            border-bottom: none;
        }

            .pricing-table .plan li.plan-price h3 {
                margin-bottom: 0;
                margin-top: 0;
                font-size: 2em;
                padding: 30px 0;
                font-weight: 600;
                color: var(--surface);
            }

                .pricing-table .plan li.plan-price h3 .price-cents {
                    font-size: 50%;
                    vertical-align: super;
                    margin-left: -10px;
                }

                .pricing-table .plan li.plan-price h3 .price-month {
                    font-size: 30%;
                    font-style: italic;
                    margin-left: -20px;
                    font-weight: 300;
                    color: var(--surface);
                }

        .pricing-table .plan li.plan-action {
            margin-top: 10px;
            border-top: 0;
        }

    .pricing-table .plan.featured {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
        box-shadow: 0 3px 25px -4px var(--text) !important;
    }

        .pricing-table .plan.featured .plan-name {
            background: var(--text-disabled);
        }

.pricing-var(--success) .plan li strong {
    color: var(--error);
}

.pricing-var(--success) .plan li.plan-name {
    background: var(--primary);
}

.pricing-var(--success) .plan li.plan-price {
    background: var(--primary);
    color: var(--surface);
}

.pricing-var(--success) .plan.featured .plan-name {
    background: var(--text-muted);
}

.pricing-var(--primary) .plan li strong {
    color: var(--text-muted);
}

.pricing-var(--primary) .plan li.plan-name {
    background: var(--accent-purple);
}

.pricing-var(--primary) .plan li.plan-price {
    background: var(--text-muted);
    color: var(--surface);
}

.pricing-var(--primary) .plan.featured .plan-name {
    background: var(--text-muted);
}

.pricing-var(--error) .plan li strong {
    color: var(--error);
}

.pricing-var(--error) .plan li.plan-name {
    background: var(--error);
}

.pricing-var(--error) .plan li.plan-price {
    background: var(--error);
    color: var(--surface);
}

.pricing-var(--error) .plan.featured .plan-name {
    background: var(--text);
}

/* ---------------------------------------------------------------------- */
/*  404 and 500 error
/* ---------------------------------------------------------------------- */
.error-full-page .page-error {
    margin-top: 60px;
}

.page-error {
    text-align: center;
}

    .page-error .error-number {
        display: block;
        font-size: 158px;
        font-weight: 300;
        letter-spacing: -10px;
        line-height: 128px;
        margin-top: 0;
        text-align: center;
    }

    .page-error .error-details {
        display: block;
        padding-top: 0;
        text-align: center;
    }

        .page-error .error-details .btn-return {
            margin: 10px 0;
        }

        .page-error .error-details h3 {
            margin-top: 0;
        }

.error-full-page {
    overflow: hidden;
}

    .error-full-page img {
        display: none;
    }

    .error-full-page #canvas {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .error-full-page #sound {
        position: absolute;
        width: 30%;
        height: 30%;
        overflow-y: auto;
        margin-left: 35%;
        -moz-border-radius: 15px;
        border-radius: 15px;
        opacity: 0.3;
        margin-top: 5%;
    }

    .error-full-page .video {
        position: absolute;
        width: 90%;
        height: 80%;
        margin-left: 5%;
        margin-top: 5%;
    }

/* ---------------------------------------------------------------------- */
/*  Page Title
/* ---------------------------------------------------------------------- */
#page-title {
    border-bottom: 1px solid var(--divider);
    padding: 50px 0;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
}

@media (max-width: 767px) {
    #page-title {
        text-align: center;
        padding: 20px 0;
    }
}

#page-title .row {
    margin: 0 15px;
}

#page-title h1 {
    color: var(--text);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    #page-title h1 {
        font-size: 24px;
    }
}

#page-title .mainDescription {
    font-family: "Lato", sans-serif;
    color: var(--text-muted);
    display: block;
    font-size: 18px;
    font-weight: 300;
    margin-top: 10px;
}

    #page-title .mainDescription small {
        font-size: 60%;
        margin-top: 10px;
        display: block;
    }

#page-title .breadcrumb {
    background-color: transparent !important;
    font-size: 12px;
    left: auto !important;
    margin: -30px 0 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 30px !important;
    top: 50% !important;
    width: auto !important;
    font-family: "Lato", sans-serif;
}

@media (max-width: 767px) {
    #page-title .breadcrumb {
        left: 0 !important;
        margin: 15px 0 0 !important;
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
    }
}

#page-title .breadcrumb > li + li {
    padding: 0 5px;
    position: relative;
}

    #page-title .breadcrumb > li + li:before {
        color: var(--primary);
        content: "/ ";
        padding: 0 5px;
    }

#page-title.page-title-center {
    text-align: center;
}

    #page-title.page-title-center .breadcrumb {
        left: 0 !important;
        margin: 15px 0 0 !important;
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
    }

/* ---------------------------------------------------------------------- */
/*  Tooltips
/* ---------------------------------------------------------------------- */
.static-tooltip .tooltip {
    display: inline-block;
    margin: 10px 20px;
    opacity: 1;
    position: relative;
}

/* ---------------------------------------------------------------------- */
/*  Popover
/* ---------------------------------------------------------------------- */
.static-popover .popover {
    display: block;
    float: left;
    margin: 20px;
    position: relative;
    width: 260px;
}

/* ---------------------------------------------------------------------- */
/*  Datepicker
/* ---------------------------------------------------------------------- */
.picker__box {
    border-color: var(--surface) !important;
}

.picker__nav--prev:before, .picker__nav--next:before {
    border: none !important;
    display: block;
    height: auto !important;
    margin: 0 auto;
    width: auto !important;
    font-family: 'themify';
}

.picker__nav--next:before {
    content: "\e649" !important;
}

.picker__nav--prev:before {
    content: "\e64a" !important;
}

.picker__button--close:before {
    content: "\e646" !important;
    font-family: 'themify';
}

.picker__button--clear:before {
    border: none !important;
    top: auto !important;
    width: auto !important;
    font-family: 'themify';
    content: "\e6a5" !important;
    font-size: 1.1em;
}

.picker__weekday {
    color: var(--primary) !important;
    text-align: center;
}

[pick-a-date], [pick-a-time] {
    cursor: pointer !important;
}

[date-picker] {
    padding: 5px 20px !important;
    min-width: 230px;
}

    [date-picker] th {
        color: var(--primary);
        font-weight: bold;
    }

    [date-picker] .switch {
        color: var(--text);
    }

    [date-picker] .active, [date-picker] .now {
        background-color: var(--primary) !important;
        background-image: none !important;
        border: none !important;
        text-shadow: none !important;
        color: var(--surface) !important;
    }

    [date-picker] .now {
        background-color: var(--surface) !important;
        color: var(--primary) !important;
        font-weight: bold;
    }

        [date-picker] .active:hover, [date-picker] .now:hover, [date-picker] .active:active, [date-picker] .now:active, [date-picker] .active.active, [date-picker] .now.active, [date-picker] .active.disabled, [date-picker] .now.disabled, [date-picker] .active[disabled], [date-picker] .now[disabled] {
            color: var(--surface) !important;
            background-color: var(--primary) !important;
        }

    [date-picker] .disabled {
        color: var(--text-disabled) !important;
    }

        [date-picker] .disabled.active, [date-picker] .disabled.now {
            color: var(--surface) !important;
        }


.dx-cell-modified, .dx-datagrid-invalid {
    padding: 7px;
    padding: 7px !important;
}


/*Michael NEW CSS*/
/** {
    margin: 0px;
    padding: 0px;
}*/

#login-box {
    display: grid;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg);
    /*    display: flex;
    justify-content: center;
    align-content: center;
    background: linear-gradient(45deg, var(--info), var(--info));
    height: 100vh;
    align-items: center;
        width: 100vw;
    height: 100vh;*/
}

#login-logo {
    width: 100%;
}

/* ===== Login header mask ===== */
.login-header {
    height: 230px; /* pick any fixed height you like */
    overflow: hidden; /* hides overflow & clips rounded corners */
    border-top-left-radius: 28px; /* match your card’s radius */
    border-top-right-radius: 28px;
    position: relative; /* create containing block for img if needed */
}

/* the image safely fills & crops */
.login-banner {
    width: 100%;
    height: 100%;
    object-fit: cover; /* center-crop without distortion */
    object-position: center; /* keep focal point centered */
    display: block; /* removes inline-img whitespace */
}


#login-container {
    display: grid;
    align-content: center;
    justify-items: center;
    background: var(--surface);
    position: relative;
    width: 400px;
    border-radius: 28px;
    /*    width: max(30vw, 40vh);
    padding: max(2vw, 10px);
    border: solid 1px var(--text);
    border-radius: 1.5vw;*/
}

#login-form {
    width: 100%;
    padding: 0px 30px 0px 30px;
}

.login-form-control, input[type="text"], input[type="password"] {
    border: none;
    border-bottom: 2px solid var(--border);
    background: none;
    padding: 8px 20px !important;
    padding-left: 24px;
    font-weight: 700;
    width: 100%;
    transition: .2s;
}

/*#login-form-control1 {
    border: none;
    border-bottom: 2px solid var(--border);
    background: none;
    padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 250px;
    transition: .2s;
}
#login-form-control2 {
    border: none;
    border-bottom: 2px solid var(--border);
    background: none;
    padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 250px;
    transition: .2s;
}
#login-form-control3 {
    border: none;
    border-bottom: 2px solid var(--border);
    background: none;
    padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 250px;
    transition: .2s;
}*/

/* --- eye inside password ------------------------- */
.password-group .btn-eye {
    position: absolute;
    top: 50%; /* vertically centre */
    right: 40px; /* space from right edge */
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 1rem;
}

/* add a little space so text doesn’t slide under the icon */
.password-group .login-form-control {
    padding-right: 2.25rem; /* eye width + gap */
}



.track-divider {
    margin: 15px;
    border-top: 1px solid var(--surface-3);
}

.justify-spacebetween {
    display: flex;
    justify-content: space-around;
    padding: 6px 0;
}

.track-cta {
    width: 100%;
    padding-bottom: 15px;
}

    .track-cta .btn {
        padding: 0 20px;
        font-weight: 600;
        border-radius: 20px;
        height: 40px;
    }

.login-form-button {
    border: none;
    background-color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0rem;
    line-height: 1.4285714286;
    height: 40px;
    color: var(--surface);
    border-radius: 20px;
    padding: 0 30px;
    transition: 0.04s ease;
}

.login-form-control:hover,
.login-form-control:focus,
.login-form-control:active {
    background-color: var(--error);
}

.login-form-button:hover {
    background-color: var(--primary-active);
}

.login-form-group2 {
    /* border: none;
    border-bottom: 2px solid var(--border);*/
    /* background: none;*/
    display: flex;
    justify-content: center;
    padding: 10px;
    font-weight: 700;
    transition: .2s;
}

.login-form-group {
    display: flex;
    var(--surface)-space: nowrap;
    padding: 8px 0px;
    position: relative;
    align-items: center;
}

.btn-group-login {
    height: 30px;
    width: 70%;
}

.login-icon {
    font-size: 25px;
    border: none;
    color: var(--primary);
    padding-right: 10px;
    width: 28px;
}

#login-heading {
    font-weight: 500;
    font-size: 25px;
    padding-top: 35px;
    padding-bottom: 15px;
}

.login-btn-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    padding-top: 20px;
    justify-content: space-around;
}

#copyright {
    padding-bottom: 5px;
    text-align: center;
    color: var(--text-muted)
}

    #copyright a {
        color: var(--text-muted);
    }

        #copyright a:hover {
            color: var(--primary-active);
        }

.quick-filter-checkboxes {
    display: flex
}

.cursor_pointer {
    cursor: pointer;
}

.quick-filter-checkboxes {
    display: flex
}

.cursor_pointer {
    cursor: pointer;
}

.ui-select-multiple.ui-select-bootstrap {
    height: auto !important;
    padding: 3px 3px 0 3px;
}


.badge a {
    color: var(--surface);
}

.trackingInfoLabelTD {
    text-align: right !important;
    font-weight: bold !important;
    width: 120px !important;
}


/*    .login-container legend {
        text-align: center;
        font-size: max(2em,18px);
    }

    .login-container label {
        font-size: max(1.25em, 12px);
    }

    .login-container p {
        text-align: center;
        font-size: max(1.25em, 12px);
    }*/
/*.login-logo {
    margin-bottom: 2em;
    text-align: center;
    width: 100px !important;
    border-radius: 1em;
}*/
/*.login-form-dropdown {
    width: 2em;
}

.login-btn-container {
    margin-top: 2em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
}

.login-container button {
    border-color: var(--text);
    border-radius: 0.7em;
    font-size: max(1em, 13px);
    color: var(--surface);
    padding: 0.7em 2em;
    background-color: var(--primary);
    transition: 0.15s ease;
}

    .login-container button:hover {
        box-shadow: 1px 3px 3px var(--text);
        background-color: var(--primary);
    }

.copyright {
    margin-top: 2em;
    text-align: center;
    font-size: max(1em, 12px);
    color: var(--text-muted)
}*/
/*WaybillView Page Style Michael*/

#pq633a0f2j0c1687495910590 {
    bottom: 32px !important;
}


.imagingSpinner {
    height: 100px;
    width: 100px;
    margin: 100px auto;
    border: 10px solid var(--text);
    border-radius: 50%;
    border-top: 10px solid var(--primary); /* Change color as needed */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.highlighted-row {
    background-color: var(--warning) !important; /* Light var(--primary) background */
}

    .highlighted-row td {
        background-color: var(--warning) !important; /* Light var(--primary) background */
    }

.dx-datagrid-content {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
}


.main-navigation-menu > li > .sub-menu {
    max-height: calc(100vh - 150px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
}


    .main-navigation-menu > li > .sub-menu::-webkit-scrollbar {
        width: 6px;
    }

    .main-navigation-menu > li > .sub-menu::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }





.skinny-checkbox-inline {
    padding-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f0f0f0;
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #bfbfbf;
    --border: #d9d9d9;
    --divider: #f0f0f0;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.65);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    --nav-active-bg: rgba(22, 119, 255, 0.12);
    --nav-active-border: rgba(22, 119, 255, 0.35);
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring */
    --focus: rgba(22, 119, 255, 0.35);
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #2a2f3a;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        --nav-active-bg: rgba(64, 150, 255, 0.22);
        --nav-active-border: rgba(64, 150, 255, 0.55);
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        --focus: rgba(64, 150, 255, 0.45);
        --ps-thumb: rgba(255,255,255,0.22);
    }

@charset "UTF-8";
/* ---------------------------------------------------------------------- 
>>> TABLE OF CONTENT
-------------------------------------------------------------------------
1 - PERFECT-SCROLLBAR
2 - BOOTSTRAP SLIDERS
3 - TREE
4 - IMAGE CROP
5 - FILE UPLOAD
6 - NESTABLE
7 - SWEET ALERT
8 - CALENDAR
9 - CHARTJS
10 - SPARKLINE
11 - NOTIFICATION ICONS
/* ---------------------------------------------------------------------- */
/*



*/
/* ---------------------------------------------------------------------- */
/* Bootsrap Slider
/* ---------------------------------------------------------------------- */
.slider {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.slider.slider-horizontal {
  margin: 10px 0;
  width: 210px !important;
}

.slider.slider-horizontal .slider-track {
  height: 5px !important;
  left: 0;
  margin-top: -5px;
  top: 50%;
  width: 100%;
}

.slider.slider-horizontal .slider-handle {
  margin-top: -10px !important;
}

.slider.slider-vertical {
  margin: 0 10px;
}

.slider.slider-vertical .slider-handle {
  margin-left: -10px !important;
}

.slider.slider-vertical .slider-track {
  width: 5px !important;
}

.slider.slider-vertical .slider-handle {
  margin-left: -10px !important;
}

.slider-handle.round {
  background: linear-gradient(to bottom, var(--border) 13%, var(--surface) 97%) repeat scroll 0 0 transparent;
  box-shadow: 0 2px 1px -1px var(--surface) inset, 0 1px 3px var(--text);
  height: 26px;
  opacity: 1;
  width: 26px;
}

.slider-selection {
  background-image: none !important;
  border-radius: none;
  box-shadow: none;
}

.slider.slider-primary .slider-selection {
  background: var(--primary);
}

.slider.slider-var(--primary) .slider-selection {
  background: var(--text-muted);
}

.slider.slider-var(--success) .slider-selection {
  background: var(--primary);
}

.slider.slider-var(--warning) .slider-selection {
  background: var(--warning);
}

.slider.slider-var(--error) .slider-selection {
  background: var(--error);
}

.slider.slider-var(--warning) .slider-selection {
  background: var(--warning);
}

.slider.slider-var(--accent-purple) .slider-selection {
  background: var(--text-muted);
}

.slider.slider-azure .slider-selection {
  background: var(--primary);
}

/* ---------------------------------------------------------------------- */
/*  Tree
/* ---------------------------------------------------------------------- */
.box-tree .nav > li > a {
  color: var(--accent-purple);
  font-size: 14px;
}
.box-tree .nav > li > a:hover, .box-tree .nav > li > a:focus {
  color: var(--text-muted);
}
.box-tree .nav > li > a i {
  color: var(--primary);
}
.box-tree .nav > li.active > a, .box-tree .nav > li.active > a:hover, .box-tree .nav > li.active a:focus {
  color: var(--surface);
}
.box-tree .nav > li.active > a i, .box-tree .nav > li.active > a:hover i, .box-tree .nav > li.active a:focus i {
  color: var(--surface);
}

/* ---------------------------------------------------------------------- */
/*  Crop Image
/* ---------------------------------------------------------------------- */
.cropBox {
  background-color: var(--bg);
  border-radius: 4px;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding: 10px;
}

.cropArea {
  height: 350px;
  overflow: hidden;
  background-color: var(--surface);
}

.croppedBox {
  width: 220px;
  height: 220px;
}
.croppedBox > div {
  background: var(--surface);
  border: 1px dashed var(--border);
  height: 200px;
}

img-crop {
  background-color: var(--surface);
}

/* ---------------------------------------------------------------------- */
/*  Perfect Scrollbar
/* ---------------------------------------------------------------------- */
*[perfect-scrollbar] {
  overflow-y: hidden !important;
}

.touch *[perfect-scrollbar] {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ---------------------------------------------------------------------- */
/*  File Upload
/* ---------------------------------------------------------------------- */
.my-drop-zone {
  border: dotted 1px lightgray;
}

.nv-file-over {
  border: dotted 1px var(--error);
}

/* Default class applied to drop zones on over */
.another-file-over-class {
  border: dotted 1px var(--primary);
}

.file-upload canvas {
  background-color: var(--bg);
  -webkit-box-shadow: 3px 3px 3px 0 var(--border);
  -moz-box-shadow: 3px 3px 3px 0 var(--border);
  box-shadow: 3px 3px 3px 0 var(--border);
  border: 1px solid var(--text-disabled);
  height: 100px;
  margin: 6px 0 0 6px;
}

/* ---------------------------------------------------------------------- */
/*  Nestable
/* ---------------------------------------------------------------------- */
.angular-ui-tree-handle {
  background: var(--bg);
  border: 1px solid var(--text-disabled);
  color: var(--accent-purple);
  padding: 10px 10px;
  font-size: 14px;
  font-weight: normal !important;
}

.angular-ui-tree-handle:hover {
  color: var(--text-muted);
  background: var(--surface-3);
  border-color: var(--text-disabled);
}

.angular-ui-tree-placeholder {
  background: var(--surface-2);
  border: 2px dashed var(--border);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.group-title {
  background-color: var(--text-muted) !important;
  color: var(--surface) !important;
}

/**
 * Nestable
 */
.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  max-width: 600px;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}

.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-list .dd-list {
  padding-left: 30px;
}

.dd-collapsed .dd-list {
  display: none;
}

.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
}

.dd-handle {
  display: block;
  margin: 5px 0;
  padding: 10px 10px;
  text-decoration: none;
  border: 1px solid var(--surface-3);
  background: var(--surface);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.dd-handle:hover {
  background: var(--surface);
}

.dd-item > button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 25px;
  height: 30px;
  margin: 5px 0;
  padding: 0;
  text-indent: 100%;
  var(--surface)-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}

.dd-item > button:before {
  content: '+';
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  text-indent: 0;
}

.dd-item > button[data-action="collapse"]:before {
  content: '-';
}

.dd-placeholder,
.dd-empty {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: var(--surface-2);
  border: 1px dashed var(--text-disabled);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.dd-empty {
  border: 1px dashed var(--text-disabled);
  min-height: 100px;
  background-color: var(--surface-3);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

.dd-dragel {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}

.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}

.dd-dragel .dd-handle {
  -webkit-box-shadow: 2px 4px 6px 0 var(--text);
  box-shadow: 2px 4px 6px 0 var(--text);
}

/**
 * Nestable Extras
 */
.nestable-lists {
  display: block;
  clear: both;
  padding: 30px 0;
  width: 100%;
  border: 0;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}

@media only screen and (min-width: 700px) {
  .dd + .dd {
    margin-left: 2%;
  }
}
.dd-hover > .dd-handle {
  background: var(--primary) !important;
}

/**
 * Nestable Draggable Handles
 */
.dd3-content {
  display: block;
  margin: 5px 0;
  padding: 10px 10px 10px 50px;
  text-decoration: none;
  border: 1px solid var(--surface-3);
  background: var(--surface);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.dd-dragel > .dd3-item > .dd3-content {
  margin: 0;
}

.dd3-item > button {
  margin-left: 40px;
}

.dd3-handle {
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
  width: 40px;
  text-indent: 100%;
  var(--surface)-space: nowrap;
  overflow: hidden;
  border: 1px solid var(--surface-3);
  background: var(--surface);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.dd3-handle:before {
  content: 'Ôëí';
  display: block;
  position: absolute;
  left: 0;
  top: 10px;
  width: 100%;
  text-align: center;
  text-indent: 0;
  color: var(--border);
  font-size: 20px;
  font-weight: normal;
}

.dd3-handle:hover {
  background: var(--bg);
}

.dd {
  max-width: none !important;
}

.dd-item > button:before {
  content: "\e649" !important;
  font-family: "themify";
  color: var(--primary);
}

.dd-item > button[data-action="collapse"]:before {
  content: "\e64b" !important;
}

.dd-handle {
  background: var(--bg) !important;
  border: 1px solid var(--text-disabled) !important;
  color: var(--accent-purple) !important;
}

.dd-handle:hover {
  background: var(--surface-3) !important;
  border-color: var(--text-disabled) !important;
}

/* ---------------------------------------------------------------------- */
/*  Sweet Alert
/* ---------------------------------------------------------------------- */
.sweet-overlay {
  z-index: 9998 !important;
}

.sweet-alert {
  z-index: 9999 !important;
}
.sweet-alert h2 {
  color: var(--text-muted) !important;
  font-family: "Raleway", sans-serif !important;
  font-weight: 300 !important;
}
.sweet-alert button {
  padding: 5px 32px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------- */
/*  Calendar
/* ---------------------------------------------------------------------- */
.cal-month-box {
  border-right: none !important;
  border-bottom: none !important;
}

.event {
  border: none !important;
  box-shadow: none !important;
  height: 8px !important;
  width: 8px !important;
}

.event-job {
  background-color: var(--primary) !important;
}

.event-home {
  background-color: var(--text-muted) !important;
}

.event-to-do {
  background-color: var(--warning) !important;
}

.event-cancelled {
  background-color: var(--warning) !important;
}

.event-generic {
  background-color: var(--primary) !important;
}

.event-off-site-work {
  background-color: var(--primary) !important;
}

.day-highlight.dh-event-job {
  border: none !important;
  background-color: var(--primary) !important;
}

.day-highlight.dh-event-home {
  border: none !important;
  background-color: var(--text) !important;
}

.day-highlight.dh-event-to-do {
  border: none !important;
  background-color: var(--error) !important;
}

.day-highlight.dh-event-cancelled {
  border: none !important;
  background-color: var(--warning) !important;
}

.day-highlight.dh-event-generic {
  border: none !important;
  background-color: var(--success) !important;
}

.day-highlight.dh-event-off-site-work {
  border: none !important;
  background-color: var(--success) !important;
}

.cal-slide-content {
  background-color: var(--surface-3) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.cal-slide-content li {
  padding: 20px;
  border-bottom: 1px dotted var(--text-disabled);
}
.cal-slide-content li:hover {
  background-color: var(--border) !important;
}
.cal-slide-content li a.event-item {
  color: var(--accent-purple) !important;
  font-weight: 400;
}

.cal-day-today {
  background: none !important;
}

.cal-month-box .cal-day-today span[data-cal-date] {
  font-size: 1.2em !important;
  color: var(--surface) !important;
  background: var(--primary) !important;
  opacity: 1 !important;
  padding: 2px 5px;
  border-radius: 50%;
  min-width: 26px;
  text-align: center;
}

.cal-events-num {
  display: none;
}

/* ---------------------------------------------------------------------- */
/*  Chartjs
/* ---------------------------------------------------------------------- */
.tc-chart-js-legend {
  list-style-type: none;
  padding-left: 0;
}

.tc-chart-js-legend li {
  clear: both;
  display: block;
  float: left;
  padding: 10px;
  line-height: 25px;
  font-size: 11px;
}

.tc-chart-js-legend li span {
  display: block;
  float: left;
  height: 25px;
  margin-right: 10px;
  width: 25px;
}

.legend-xs .tc-chart-js-legend li {
  line-height: 15px;
}
.legend-xs .tc-chart-js-legend li span {
  height: 15px;
  width: 15px;
  margin-right: 5px;
}

.inline .tc-chart-js-legend li {
  clear: none;
  display: inline-block;
  float: none;
  padding: 10px;
}

canvas[tc-chartjs-line], canvas[tc-chartjs-bar], canvas[tc-chartjs-radar] {
  max-width: 100% !important;
}

.mini-pie {
  height: 150px;
  position: relative;
  width: 100px;
  display: inline-block;
}
.mini-pie canvas {
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
}
.mini-pie span {
  line-height: 150px;
}

/* ---------------------------------------------------------------------- */
/*  Sparkline
/* ---------------------------------------------------------------------- */
.mini-stats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mini-stats li {
  text-align: center;
  margin: 0 0 0 25px;
  display: inline-block;
}
.mini-stats li:last-child {
  border-right: 0 none;
}
.mini-stats .values {
  font-size: 12px;
  padding: 5px 0 0 0;
}
.mini-stats .values strong {
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
  line-height: 18px;
}
@media (max-width: 767px) {
  .mini-stats {
    width: 100%;
    padding: 20px 0;
  }
}

.jqstooltip {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.mini-stats .sparkline-bar {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: normal !important;
}

.sparkline > canvas span {
  box-shadow: none;
  border: none;
  background: var(--error);
}

/* ---------------------------------------------------------------------- */
/*  Notification Icons
/* ---------------------------------------------------------------------- */
.demo-notification-icons notification-icon {
  display: table;
  margin: 0 auto;
}

.custom-style .angular-notifications-icon {
  left: -10px;
  background: var(--warning);
  color: var(--text);
  width: 30px;
  height: 30px;
  font-weight: bolder;
  font-size: 1.2em;
}

.angular-notifications-icon.my-custom-animation {
  -moz-transition: linear 0.5s all;
  -o-transition: linear 0.5s all;
  -webkit-transition: linear 0.5s all;
  transition: linear 0.5s all;
}

.angular-notifications-icon.my-custom-animation-add {
  background: var(--text);
  color: var(--surface);
}

.angular-notifications-icon.my-custom-animation-add-active {
  background: var(--warning);
  color: var(--text);
}

@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
.printModal {
    font-family: sans-serif;
    display: flex;
    text-align: center;
    font-weight: 300;
    font-size: 30px;
    left: 0;
    top: 0;
    position: absolute;
    color: #0460b5;
    width: 100%;
    height: 100%;
    background-color: hsla(0,0%,100%,.91)
}

.printClose {
    position: absolute;
    right: 10px;
    top: 10px
}

    .printClose:before {
        content: "\00D7";
        font-family: Helvetica Neue,sans-serif;
        font-weight: 100;
        line-height: 1px;
        padding-top: .5em;
        display: block;
        font-size: 2em;
        text-indent: 1px;
        overflow: hidden;
        height: 1.25em;
        width: 1.25em;
        text-align: center;
        cursor: pointer
    }

/**
* DevExtreme (dx.common.css)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
/*!
This file is kept for backward compatibility.
It is no longer required.
*/
/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f0f0f0;
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #bfbfbf;
    --border: #d9d9d9;
    --divider: #f0f0f0;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.65);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    --nav-active-bg: rgba(22, 119, 255, 0.12);
    --nav-active-border: rgba(22, 119, 255, 0.35);
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring */
    --focus: rgba(22, 119, 255, 0.35);
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #2a2f3a;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        --nav-active-bg: rgba(64, 150, 255, 0.22);
        --nav-active-border: rgba(64, 150, 255, 0.55);
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        --focus: rgba(64, 150, 255, 0.45);
        --ps-thumb: rgba(255,255,255,0.22);
    }

#page-title {
    padding: 0px 0px !important;
    border-bottom: 1px solid var(--text-disabled) !important;
}

label {
    font-weight: bold !important;
    color: var(--text) !important;
    font-size: 12px !important;
}

fieldset legend {
    font-weight: bold !important;
}

.item-inner {
    font-weight: bold !important;
}


.liLine {
    line-height: 0px !important;
    padding-left: 5px !important;
    width: 100%;
    border-bottom: 1px solid var(--border);
    text-align: left !important;
}


.liNoLine {
    border-bottom: none !important;
}

.mini-stats li {
    margin: 0px !important;
}

.panel-heading .panel-heading-tabs > li {
    line-height: 5px !important;
    font-weight: bolder !important;
    color: var(--text) !important;
    text-transform: uppercase !important;
}

.text30 {
    font-size: 22px !important;
}

.whitebg {
    background-color: var(--surface) !important;
}

tr.row-selected {
    background-color: var(--success) !important;
    /*box-shadow: var(--primary) 0px 0px 5px 3px;*/
}

tr.rightClicked {
    box-shadow: var(--primary) 0px 0px 5px 3px;
}

tr.show-pointer {
    cursor: pointer;
}

.info_content {
    position: absolute;
    background: var(--text);
    padding: 24px;
    color: var(--surface);
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 15px;
}

thead {
    background-color: var(--primary);
}

.table > thead > tr > th {
    color: var(--surface) !important;
}

.position-fixed {
    position: fixed;
}

.width100 {
    width: 100%;
}

.bottom-bar {
    /* margin-top: 10px; */
    position: sticky;
    bottom: 0px;
    height: 50px;
    background-color: var(--text);
    z-index: 1000;
    margin-top: 10px;
}

.checkTB {
    transform: scale(1.5);
}


.fab2 {
    background-color: var(--primary);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: var(--primary);
    border: none;
    outline: none;
    color: var(--surface);
    font-size: 36px;
    box-shadow: 0 3px 6px var(--text), 0 3px 6px var(--text);
    transition: .3s;
    -webkit-tap-highlight-color: transparent;
    right: 80px;
    bottom: 80px;
}

.fab {
    width: 70px;
    height: 70px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 6px 10px 0 var(--text-muted);
    font-size: 50px;
    line-height: 70px;
    color: var(--surface);
    text-align: center;
    position: fixed;
    right: 50px;
    bottom: 60px;
    transition: all 0.1s ease-in-out;
    border: none;
    outline: none;
}

    .fab:hover {
        box-shadow: 0 6px 14px 0 var(--text-muted);
        transform: scale(1.05);
        cursor: pointer;
    }

tr.row-selected-noshadow {
    background-color: var(--success) !important;
}


.tablecheckbox > thead:first-child > tr:first-child > th:first-child {
    text-align: center !important;
}

.liRight {
    border-bottom: 1px solid var(--divider) !important;
}

.aRight {
    font-size: 16px !important;
    font-weight: 400 !important;
}

a.aRight {
    padding-left: 10px !important;
}

/*.has-error .form-control:focus, .has-error .form-control:hover {
    border-color: var(--surface-2);
    border-bottom-color: var(--text-muted) !important;
}*/

.has-error .txt {
    border-color: var(--surface-2);
    border-bottom-color: var(--text-muted) !important;
}

.color-var(--text) {
    color: var(--text) !important;
}

.trackingError {
    padding: 2px 25px 2px 2px !important;
    margin-bottom: 5px !important;
}


.table > tbody > tr.warning > td {
    background-color: var(--border) !important;
}

.table > tbody > tr.success > td {
    background-color: var(--border) !important;
}

.label-inverse, .badge-inverse {
    background-color: var(--text);
}

.modalfieldset {
    border: 1px solid var(--text-disabled);
    background-color: var(--surface-2);
}

.table > tbody > tr.active > td, .table > tbody > tr.active > th {
    color: var(--text) !important;
}

.table > tbody > tr > td {
    color: var(--text) !important;
}

h1, h2, h3, h4, h5 {
    color: var(--text) !important;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.text-left {
    text-align: left !important;
}

.table-dropdown.dropdown-menu.dropdown-light {
    min-width: 100px !important;
}

    .table-dropdown.dropdown-menu.dropdown-light li a {
        line-height: 25px !important;
        color: var(--text) !important;
    }

.menudd.clip-radio label {
    margin-bottom: 0px !important;
}

/*span.btn.btn-default.form-control.ui-select-toggle{
    overflow-x: hidden !important;
}*/

span.ui-select-match-text.ui-select-allow-clear {
    max-width: 83%;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.ui-select-match-text {
    max-width: 93%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol.required:before {
    display: table-caption;
    color: var(--error);
    font-size: 25px;
    height: 16px;
}

.has-error .symbol:before {
    font-size: 12px !important;
    height: 13px !important;
}

.has-success .symbol:before {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    height: 13px !important;
}

.has-error label {
    color: var(--error) !important;
}

.has-error .error {
    color: var(--error) !important;
}

.has-error .form-control {
    border-color: var(--error) !important;
}

.ng-table th.sortable.sort-desc, .ng-table th.sortable.sort-asc {
    background-color: var(--text-disabled) !important;
    color: var(--text) !important;
}

/*.tag-indexed {
    box-shadow: inset var(--text) 5px 0px 0px 0px;
}*/
/*table.tableRed tr > td.rowTd {
    color: var(--text-muted) !important;
}*/
tr.tag-indexed > td.rowTd {
    color: var(--error) !important;
}


.inactive {
    color: var(--border) !important;
    pointer-events: none !important;
    cursor: default !important;
}

.label-var(--text) {
    background-color: var(--text);
}

.dropdown-menu > li > button {
    color: var(--text) !important;
    border: none !important;
    font-size: 12px;
    display: block;
    padding: 0px 10px;
    clear: both;
    font-weight: bold;
    color: var(--text);
    var(--surface)-space: nowrap;
}

.panel-heading .panel-heading-tabs > li > button {
    color: var(--text) !important;
    border: none !important;
    font-size: 12px;
    display: block;
    padding: 0px 10px;
    clear: both;
    font-weight: bold;
    color: var(--text);
    var(--surface)-space: nowrap;
}

.uploader {
    max-height: 50px;
    max-width: 50px;
}

.page_aside {
    min-height: 200px;
    width: 240px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 25px;
    -webkit-transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    left: 0;
    z-index: 1000;
}

aside#page_aside {
    min-height: 100vh !important;
}

.page_aside + * {
    -webkit-transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 265px;
}

@media only screen and (max-width: 959px) {
    .page_aside + * {
        margin-left: 25px;
    }
}

.page_aside_inner {
    /*padding: 12px 12px;*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}

.page_aside_toggle {
    position: absolute;
    top: 0;
    right: -26px;
    height: 100%;
    width: 24px;
    background: var(--error);
    cursor: pointer;
    background: var(--bg);
    border-right: 1px solid var(--border);
    -webkit-transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .page_aside_toggle:hover {
        background: var(--border);
    }

    .page_aside_toggle:after {
        position: absolute;
        left: 3px;
        top: 25px;
        content: '\f0a8';
        /* '<<'; '\e314';*/
        font-family: "FontAwesome";
        font-size: 18px;
        display: block;
        color: var(--text-muted);
    }

.page_aside_collapsed .page_aside {
    -webkit-transform: translate3d(-240px, 0, 0);
    transform: translate3d(-240px, 0, 0);
}

    .page_aside_collapsed .page_aside + * {
        margin-left: 25px;
    }

.page_aside_collapsed .page_aside_toggle:after {
    content: '\f0a9'; /*'\e315';*/
    color: var(--primary);
}

.panel-heading-tabs > li > a {
    color: var(--text) !important;
}
/*Edited by Michael*/
#page-title .panel.panel-var(--surface) {
    border: none !important;
    background-color: var(--surface) /*var(--surface-2)*/ !important;
}

#page-title .border-light {
    border-bottom: none !important;
}

#page-title .panel-heading {
    padding: 0px !important
}

#page-title .mainTitle {
    padding-top: 10px !important
}

aside {
    height: 100% !important;
}

fieldset {
    padding: 15px !important;
    padding-bottom: 0px !important;
}

.show-hand {
    cursor: pointer !important;
}

.minWidth50 {
    min-width: 50px !important;
}

.minWidth100 {
    min-width: 100px !important;
}

.text18 {
    font-size: 18px;
}

.modalImage {
    position: relative !important;
    width: 100% !important;
}

/*.notopnavbar {
    margin-top: -50px !important;
    z-index: 100 !important;
}

.navbar {
    z-index: 50 !important;
}*/

/*.container-fullw{
    padding-top:10px !important;
    padding-bottom : 10px !important;
}*/


.navbar-default {
    background-color: var(--surface) !important;
}

.mini-stats {
    border-bottom: none !important;
    border: 1px solid var(--text-disabled) !important;
    border-radius: 10px 10px 10px 10px;
    margin-top: -2px !important;
}

    .mini-stats > li:first-child {
        border-left: none !important;
    }

.panel-heading .panel-heading-tabs > li {
    border-left-color: var(--text-disabled) !important;
}

.panel-var(--surface) .border-light, .partition-var(--surface) .border-light {
    border-color: var(--text-disabled) !important;
}

.panel-heading {
    min-height: 49px !important;
}

.swMain > ul {
    margin: 10px 0 10px 0 !important;
}

@media (min-width: 992px) {
    .app-sidebar-closed .app-aside > .item-inner .title {
        margin-left: 0px !important;
    }

        .app-sidebar-closed .app-aside > .item-inner .title:first-child {
            margin-left: 20px !important;
        }
}


.title-icon {
    display: inline-grid;
    text-align: center;
    padding: 0px 5px;
    border-left: 1px solid;
    cursor: pointer;
    min-width: 60px;
}

    .title-icon:first-child {
        border-left: none;
    }

    .title-icon > i {
        margin-bottom: 3px;
    }

.shipmentheader {
    font-weight: bold !important;
    margin-left: 15px !important;
    background-color: var(--text) !important;
    padding: 5px 10px !important;
}

.timeline-xs .timeline-item.info:after {
    width: 15px !important;
    height: 15px !important;
    margin-left: -8px !important;
}

.text-var(--text) {
    color: var(--text) !important;
}

/*div.uib-daypicker .btn-default {
    border-color: transparent;
}*/

.uib-daypicker {
    padding: 15px;
    outline: none !important;
}

    .uib-daypicker .btn-default {
        border-color: transparent !important;
    }

.dropdown-menu > li > button.uib-close {
    padding: 5px 10px !important;
    clear: none;
}

.uib-daypicker table > thead {
    background-color: var(--surface) !important;
}

textarea, select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    border-radius: 4px !important;
}

.trTotal {
    color: var(--surface) !important;
    font-weight: bold !important;
    background-color: var(--text-disabled) !important;
}

.tableTotal > .table > tbody > tr > td {
    color: var(--surface) !important;
}

/*#sidebar nav > ul .sub-menu > li.active a {
    background: var(--success) !important;
}*/

ul.sub-menu li ul.sub-menu li a {
    padding-left: 70px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

#sidebar nav > ul .sub-menu > li.open {
    background: var(--text) !important;
}

.app-sidebar-closed .app-aside > .item-inner .title {
    color: var(--surface) !important;
}


.app-sidebar-closed .app-aside .sub-menu {
    background: var(--bg) !important;
}



.inline-switches {
    height: 20px !important;
    width: 42px !important;
}

.switch small {
    height: 20px !important;
    width: 20px !important;
}

.ng-table-filters {
    background-color: var(--surface-3) !important;
}

.bgoffwhite {
    background-color: var(--surface-2) !important;
}

.borderradius5 {
    border-radius: 5px !important;
}

.font20 {
    font-size: 20px !important
}

.settings.panel .setting-boxff {
    border-bottom: 1px solid var(--text-disabled);
    padding-left: 8px;
}

.radio-inline, .radio-inline + .radio-inline, .checkbox-inline, .checkbox-inline + .checkbox-inline {
    margin-bottom: 5px !important;
}

table.tableheadernowrap th.header {
    var(--surface)-space: nowrap !important;
}

.tableheadernowrap2 {
    var(--surface)-space: nowrap !important;
}

ul.dropdown-menu.generate-menu {
    top: 120% !important;
    right: 0 !important;
    left: unset;
}

.width50 {
    width: 50px !important;
}

.width70 {
    width: 70px !important;
}

.width100td {
    width: 100px !important;
}

.widthMinMax70 {
    min-width: 70px !important;
    max-width: 70px !important;
    width: 70px !important
}

.widthMinMax20 {
    min-width: 20px !important;
    max-width: 20px !important;
    width: 20px !important
}

.width120 {
    width: 120px !important;
}

.width160 {
    width: 160px !important;
}

.minwidth160 {
    min-width: 160px !important;
}

.margin-top-35 {
    margin-top: 35px !important;
}

.width300 {
    width: 300px !important;
}

.width30 {
    width: 30px !important;
}


.padding-0 {
    padding: 0px !important;
}

.border-0 {
    border: 0px !important;
}

fieldset {
    margin: 15px 0 15px 0;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: pink;
}

.userli {
    cursor: pointer;
    margin-top: 1px;
    background: transparent !important;
    outline: 0px !important;
    text-decoration: none !important;
    border-radius: 5px !important;
}

.font16 {
    font-size: 16px !important
}


input.form-control.partialallocated {
    background-color: #ff000054 !important;
}

input.form-control.fullyallocated {
    background-color: #5cb85c73 !important;
}

span.amt.partialallocated {
    background-color: #ff0000ba !important;
    border: 1px solid #ff0000ba !important;
}

span.amt.fullyallocated {
    background-color: #5cb85cd4 !important;
    border: 1px solid #5cb85cd4 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.editable-span input {
    /*border: none !important;
    background: transparent !important;*/
}


    .editable-span input:focus {
        background: var(--success) !important;
    }

.editable-span .form-control {
    height: 20px !important;
}

.noborder.table tbody > tr > td {
    border-bottom: none !important;
}

.grid {
    /* width: 100%;*/
    height: 75vh;
}

.totalUL {
    border-bottom: 2px solid var(--text);
    margin-top: 10px;
}

.ui-grid-cell-contents {
    /* Old Solution */
    min-width: max-content !important;
    /* New Solution */
    display: grid;
    grid-auto-columns: max-content;
    /* IE Solution */
    display: -ms-grid;
    -ms-grid-columns: max-content;
}

/*.dropdown-menu {
    min-width:100px !important;
}*/
/*.textdarkGrey{
    color:var(--text-muted) !important;
}*/
/* Slide Effect*/
/*[ui-view].ng-enter, [ui-view].ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

[ui-view].ng-enter {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

[ui-view].ng-leave {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}*/
/* End Slide Effect*/
.tableinputtext {
    height: 25px;
    padding: 2px 5px !important;
}

.tableFixHead {
    overflow-y: auto;
    height: 75vh;
}

.tableFixHead50vh {
    overflow-y: auto;
    height: 50vh;
}

.ng-table th.sortable.sort-asc, .ng-table th.sortable.sort-desc {
    background-color: var(--text-muted);
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
    background-color: var(--primary);
    var(--surface)-space: nowrap !important;
}

.tableFixHead thead th {
    background-color: var(--primary);
}

.nowrap {
    var(--surface)-space: nowrap !important;
}

.nopager .ng-table-pager.ng-scope {
    display: none;
}

.btn-var(--text-muted):active, .btn-var(--text-muted).active, .btn-var(--text-muted).active:focus, .btn-var(--text-muted):active:focus, .btn-var(--text-muted):active:hover, .btn-var(--text-muted).dropdown-toggle:active:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-muted) !important;
    color: var(--text-muted) !important;
}

.errorH4 {
    color: var(--text-muted) !important
}

.text-capitalize {
    text-transform: capitalize !important;
}

table.thheadernowrap th {
    var(--surface)-space: nowrap !important;
}

.linkDisabled {
    cursor: not-allowed;
    pointer-events: none;
    color: var(--text-muted) !important;
}

.table-dropdown.dropdown-menu.dropdown-light li button {
    background: none;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    var(--surface)-space: nowrap;
    font-size: 14px;
}

.greyBorderBottom {
    border-bottom: 1px solid var(--border);
}

.ff-clear-filters:before {
    content: "\f0b0";
}

.multiselect-parent.btn-group.dropdown-multiselect, .multiselect-parent.btn-group.dropdown-multiselect button {
    width: 100%;
}
/*ul.dropdown-menu.dropdown-menu-form{
    max-height:250px !important;
}*/
.dropdown-multiselect .checkbox {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    /*var(--surface)-space:  break-spaces;*/
}

.dropdown-multiselect ul li a label {
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--text) !important;
}

.multiselect-group ul li a > span {
    display: none !important;
}

    .multiselect-group ul li a > span.glyphicon {
        display: initial !important;
    }

.multiselect-group li.dropdown-header {
    font-weight: bold !important;
    color: var(--text) !important;
    font-size: 13px !important;
}

.no-display {
    display: none !important;
}

.alert-danger h4.alert-heading, .alert-danger h5.alert-heading {
    color: var(--text-muted) !important;
}

.swal2-title {
    color: var(--text-muted) !important;
    /*font-family: "Raleway", sans-serif !important;*/
    font-size: 30px !important;
    text-align: center !important;
    font-weight: 300 !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 10px !important;
    padding: 0 !important;
    line-height: 40px !important;
    display: block !important;
    overflow-x: auto;
}

h2 .swal2 {
    color: var(--text-muted) !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 300 !important;
}

.swal2-html-container {
    color: var(--text) !important;
    font-size: 14px !important;
    text-align: center !important;
    font-weight: 300 !important;
    position: relative !important;
    /*    text-align: inherit !important;*/
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

.margin-0 {
    margin: 0px !important;
}

.swal2-styled.swal2-confirm {
    margin-right: 30px !important;
}

.radiocheck-col {
    margin-top: 28px !important;
}

.modal-body {
    padding: 15px 25px !important;
}

.input-group-addon + .form-control {
    border-radius: 0px 4px 4px 0px !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    font-weight: bold;
}

li.uib-tab.nav-item a {
    color: var(--text) !important;
}

.nav-tabs > li:first-child {
    border-left: none !important;
}

.font12 {
    font-size: 12px;
}

.favpage-ul {
    max-height: 415px;
    overflow-y: auto;
}

.favpage-li-a {
    text-align: left !important;
    line-height: 20px !important;
}

span.error {
    color: var(--error);
}

.favourite-page {
    color: gold !important
}

.unfavourite-page {
    color: var(--text) !important
}

header .navbar-collapse .navbar-right > li.open > a {
    background: transparent !important;
}

header .navbar-collapse .navbar-right > li > a:hover, header .navbar-collapse .navbar-right > li > a:focus, header .navbar-collapse .navbar-right > li > a:active {
    background: transparent !important;
}

.input-group-addon-less-padding {
    padding: 0px 0px !important;
}

.input-padding23 > input {
    padding-left: 20px !important;
    padding-right: 1px !important;
}

.agentLegend {
    background-color: var(--bg);
    padding: 5px 15px;
    border-radius: 5px;
}

#gridContainer, #gridContainer1 {
    max-height: 70vh;
    /*  min-height: 120px;*/
}


/*.dx-datagrid {
    height: 70vh;
}*/
.dx-popup-content .dx-list-item {
    display: block !important;
}

.dx-overlay-content.dx-popup-normal.dx-resizable.dx-dropdowneditor-overlay-flipped {
    width: max-content !important;
}

tr.dx-row.dx-column-lines.dx-header-row {
    color: var(--surface) !important;
    font-weight: 500;
    background-color: var(--primary);
}

.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-vertical,
.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-vertical .dx-scrollable-scroll {
    width: 15px;
}


.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-horizontal,
.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-horizontal .dx-scrollable-scroll {
    height: 15px;
}

.dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button) {
    width: 100%;
}

.margin-top-22 {
    margin-top: 22px !important;
}

.accordion-no-display .panel-heading {
    display: none !important;
}

.btnLi .dropdownBtn {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: var(--text) !important;
    var(--surface)-space: nowrap;
    background-color: var(--surface);
    font-size: 14px;
    cursor: pointer;
}

.btn-group .txt-postfix-rd {
    border-radius: 4px 0px 0px 4px !important;
}
/*.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1,
    .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10,
    .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11,
    .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 .col-md-1-5 {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }*/
/*table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px 16px;
}

th {
    background: "var(--divider)";
}*/

.input-dropdown {
    display: inline-flex !important;
}

    .input-dropdown > input {
        margin-right: -15px !important;
    }

    .input-dropdown > .dropdown-toggle {
        padding-left: 3px !important;
        padding-right: 3px !important;
        border: 1px solid var(--text-disabled) !important
    }

.padding-right-0 {
    padding-right: 0px !important
}

.padding-left-0 {
    padding-left: 0px !important
}

.border-radius-0 {
    border-radius: 0px;
}

.left-border-rd-0 .border-rd-left-0 {
    border-radius: 0px 4px 4px 0px !important;
}

.dropdown-header {
    text-align: center;
    padding: 5px 0px 0px 0px;
    font-weight: bold;
    color: var(--text);
}


.valuesonly .checkbox {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.check-inline {
    display: inline
}

.dx-datagrid-summary-item {
    color: var(--text);
}

.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    border-color: var(--text);
}

.dx-checkbox .dx-checkbox-icon {
    border-color: var(--text);
}

.text-big {
    font-size: 18px !important;
    font-weight: 800 !important;
}

.label100 {
    font-size: 100% !important;
}

input[disabled].editable-rates {
    background-color: var(--surface) !important;
    border: none !important;
}

.maxWidth100 {
    max-width: 100px !important;
}

.height25 {
    height: 25px !important;
}

.noresDiv {
    margin-top: 20px !important;
    border: 1px solid var(--border);
    padding: 10px;
    background-color: var(--surface);
    color: var(--text);
    font-size: 14px;
}

.form-control {
    height: 30px !important;
}


.dx-button-has-icon .dx-icon {
    width: 18px;
    height: 5px;
    background-position: 0 0;
    background-size: 5px 5px;
    padding: 0;
    font-size: 18px;
    text-align: center;
    line-height: 8px;
    margin-right: 0;
    margin-left: 0;
    font-weight: bold;
}

.dx-dropdownbutton-content .dx-list .dx-empty-message, .dx-dropdownbutton-content .dx-list .dx-list-item {
    border-bottom: 1px solid var(--border);
}

.btn {
    padding: 6px 9px;
    line-height: 1.1;
}

.dx-texteditor-input {
    min-height: 30px;
}

.autoExpand {
    width: 100%;
}

.StepTitle, h2 {
    font-size: 15px;
    font-weight: bold;
    margin: 0px !important;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 10px;
    padding-left: 10px;
}

.input-group-addon {
    font-size: 12px;
}

.div-shadow {
    box-shadow: 6px 11px 10px 1px lightgrey;
}

.fieldset.chart {
    border: 2px solid lightgrey;
}

.swal2-center-field .swal2-input {
    margin: 0 auto; /* Centers the input horizontally */
}

#submitNewRow:focus, #submitNewRow:hover {
    all: unset;
    background-color: unset !important;
}

/* History Tabs */
.history-tabs {
    overflow-x: scroll;
    overflow-y: hidden;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 43px;
    scrollbar-gutter: stable;
    var(--surface)-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Optional for smoother scroll on mobile */
    scrollbar-width: thin; /* Firefox */
}

#history-tabs-inner {
}

.history-tabs .nav-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    min-width: max-content; /* Important for Chrome */
    border-bottom: unset;
}

    .history-tabs .nav-tabs > li {
        border: unset;
        margin-left: 1px;
        display: inline-block;
        float: none; /* Ok to keep as fallback */
    }


.nav-tabs > li > a {
    color: var(--surface);
    margin: 0px;
    padding: 5px 15px;
    background-color: var(--text);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

    .nav-tabs > li > a:hover {
        color: var(--surface);
        background-color: var(--text);
    }

.tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    color: var(--surface);
    background-color: var(--text);
    border-radius: 50%;
    font-size: 8px;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

    .tab-close:hover {
        background-color: var(--error);
        color: var(--surface);
    }

.swal2-input, .swal2-file, .swal2-textarea, .swal2-select, .swal2-radio, .swal2-checkbox {
    margin: 1em 0 0 !important;
}
/* History Tabs Container */
/*.history-tabs {
    margin: 20px 60px;
    padding: 10px;
    background-color: var(--surface);
    border-radius: 10px;
    box-shadow: 0 1px 3px var(--text);
    overflow-x: auto;*/ /* Keep horizontal scrolling if needed */
/*var(--surface)-space: nowrap;
}*/
/* Nav Tabs List */
/*.nav-tabs {
    margin: 0;
    border-bottom: none;
    list-style: none;
    padding-left: 0;
    display: inline-flex;
}*/
/* Individual History Tab */
/*.history-tab {
    display: inline-block;
    margin: 0 5px;
}

    .history-tab a {
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        background-color: var(--surface-3);
        border-radius: 20px;
        text-decoration: none;
        color: var(--text-muted);
        transition: background-color 0.3s ease;
    }

        .history-tab a:hover {
            background-color: var(--border);
        }*/
/* Tab Message & Close Button */
/*.tab-message {
    margin-right: 8px;
}

.tab-close {
    font-weight: bold;
    color: var(--accent-purple);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .tab-close:hover {
        color: var(--error);
    }*/



/* =========================================================
   FreightFocus Theme (Clean Foundation)
   Contract:
   - Tokens live here
   - Base styles are minimal and safe
   - New UI uses ff-* primitives
   - Page-specific tweaks go in "Islands"
========================================================= */

/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f3f5f7;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef2f6; /* subtle panel */
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #9ca3af;
    --border: #d0d7de;
    --divider: #e3e7ee;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.85);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    /* Primary-tinted surfaces derived from the seed (replaces hard-coded rgba(22,119,255,...) ) */
    --nav-active-bg: color-mix(in srgb, transparent 88%, var(--primary-seed)); /* ≈ 0.12 */
    --nav-active-border: color-mix(in srgb, transparent 65%, var(--primary-seed)); /* ≈ 0.35 */
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 28px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring linked to brand seed (≈ 35% opacity) */
    --focus: color-mix(in srgb, transparent 65%, var(--primary-seed));
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    --warning-bg: color-mix(in srgb, transparent 88%, var(--warning));
    --warning-brd: color-mix(in srgb, transparent 55%, var(--warning));
    --success-bg: color-mix(in srgb, transparent 88%, var(--success));
    --success-brd: color-mix(in srgb, transparent 55%, var(--success));
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #6b7280;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        /* Use --primary here so it follows your "brighter in dark mode" primary */
        --nav-active-bg: color-mix(in srgb, transparent 78%, var(--primary)); /* ≈ 0.22 */
        --nav-active-border: color-mix(in srgb, transparent 45%, var(--primary)); /* ≈ 0.55 */
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        /* Slightly stronger in dark mode (≈ 45% opacity) */
        --focus: color-mix(in srgb, transparent 55%, var(--primary-seed));
        --warning-bg: color-mix(in srgb, transparent 78%, var(--warning));
        --warning-brd: color-mix(in srgb, transparent 40%, var(--warning));
        --success-bg: color-mix(in srgb, transparent 78%, var(--success));
        --success-brd: color-mix(in srgb, transparent 40%, var(--success));
        --ps-thumb: rgba(255,255,255,0.22);
    }



/* =========================================================
   02) BASE (safe, minimal fights)
========================================================= */
html, body {
    height: 100%;
    margin: 0;
}

/* #app is the direct parent of the footer in your markup */
#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* This is the big wrapper before the footer in your HTML */
    #app > .ff-shell.ng-scope {
        flex: 1 1 auto;
    }

    /* Footer should be in normal flow (not absolute) */
    #app > footer {
        position: static; /* key change */
        left: auto;
        right: auto;
        bottom: auto;
    }

.main-content > .container {
    padding-bottom: 0;
}

/* Keep your sidebar offsets WITHOUT causing overflow */
@media (min-width: 992px) {
    #app > footer {
        margin-left: 260px;
        width: calc(100% - 260px);
    }

    #app.app-sidebar-closed > footer {
        margin-left: 70px;
        width: calc(100% - 70px);
    }
}
body.ff-app {
    background: var(--bg);
    color: var(--text-muted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    body.ff-app h1,
    body.ff-app h2,
    body.ff-app h3,
    body.ff-app h4,
    body.ff-app h5 {
        color: var(--text);
    }

    body.ff-app small,
    body.ff-app .text-muted {
        color: var(--text-muted);
    }

    body.ff-app [json-dbl] {
        display: inline-flex;
        align-items: center;
        min-height: 18px;
        padding: 1px 6px;
        border-radius: var(--radius-sm);
        font-size: 11px;
        font-weight: 650;
        line-height: 1.2;
    }

    body.ff-app:not([data-theme="dark"]) [json-dbl] {
        background: #e9edf2;
        border: 1px solid #d4dbe4;
        color: color-mix(in srgb, var(--text) 62%, var(--surface)) !important;
    }

    body.ff-app[data-theme="dark"] [json-dbl] {
        color: var(--text-muted) !important;
    }

    body.ff-app ::selection {
        background: var(--focus);
        color: var(--text);
    }

    body.ff-app a {
        color: var(--primary);
        text-decoration: none;
    }

        body.ff-app a:hover,
        body.ff-app a:focus {
            color: var(--primary-hover);
        }

    body.ff-app hr {
        border-top: 1px solid var(--divider);
    }

.row {
    margin-right: 0;
    margin-left: 0;
}

.container {
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
}
.panel-body{
    padding:0;
}
/* =========================================================
   03) VENDOR BRIDGES (Bootstrap-ish surfaces)
========================================================= */
body.ff-app .label {
    border-radius: var(--radius-sm);
}

    body.ff-app .label-primary {
        background: var(--primary);
        color: var(--on-primary);
    }

/*    body.ff-app .panel,
    body.ff-app .panel-default,
    body.ff-app .panel-white {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
    }*/

    body.ff-app .panel-heading {
        background: var(--surface-2);
        border-bottom-color: var(--border);
        color: var(--text);
        padding: 0;
    }

    body.ff-app .panel-footer {
        background: var(--surface-2);
        border-top-color: var(--border);
    }

    body.ff-app .modal-content {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
        border-radius: var(--radius-md);
    }

    body.ff-app .modal-header,
    body.ff-app .modal-footer {
        background: var(--surface-2);
        border-color: var(--border);
    }

    body.ff-app .dropdown-menu {
        background: var(--surface);
        border-color: var(--border);
        color: var(--text);
        border-radius: var(--radius-sm);
    }

        body.ff-app .dropdown-menu > li > a,
        body.ff-app .dropdown-menu > li > button {
            color: var(--text);
        }

    /* =========================================================
   04) PRIMITIVES (ff-*)
========================================================= */
    body.ff-app .ff-page {
        background: var(--bg);
    }

    body.ff-app .ff-card,
    body.ff-app .ff-surface {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
    }

    body.ff-app .ff-heading {
        color: var(--text);
    }

    body.ff-app .ff-input {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }

        body.ff-app .ff-input::placeholder {
            color: var(--text-muted) !important;
        }

        body.ff-app .ff-input:focus {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
            outline: none !important;
        }

    body.ff-app .ff-btn {
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
    }

    body.ff-app .ff-btn-primary {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
    }

        body.ff-app .ff-btn-primary:hover {
            background: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
        }

    body.ff-app .ff-btn-outline {
        background: transparent !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
    }

        body.ff-app .ff-btn-outline:hover {
            background: var(--focus) !important;
        }

    body.ff-app .ff-seg {
        display: flex;
        gap: 6px;
    }

        body.ff-app .ff-seg .ff-seg-item {
            flex: 1;
            text-align: center;
            border: 1px solid var(--border) !important;
            background: var(--surface-2) !important;
            color: var(--text) !important;
        }

            body.ff-app .ff-seg .ff-seg-item.active {
                background: var(--primary) !important;
                border-color: var(--primary) !important;
                color: var(--on-primary) !important;
            }

    body.ff-app .ff-tile {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: none !important;
        transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }

        body.ff-app .ff-tile:hover {
            border-color: var(--primary) !important;
            transform: translateY(-1px);
        }

        body.ff-app .ff-tile:focus-within {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    body.ff-app .ff-tile-title {
        color: var(--text) !important;
        font-weight: 600;
    }

    body.ff-app .ff-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    body.ff-app .ff-icon-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
    }

        body.ff-app .ff-icon-btn:hover {
            border-color: var(--primary);
            background: var(--surface-2);
        }

        body.ff-app .ff-icon-btn:focus-visible {
            box-shadow: 0 0 0 3px var(--focus);
        }

    body.ff-app :focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus);
    }

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
    body.ff-app * {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   05) ISLANDS (page-specific)
========================================================= */
/* --- Login page island --- */
#login-box.ff-login.ff-page {
    background: var(--bg) !important;
    color: var(--text-muted);
}

#login-box.ff-login #login-container.login-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-1) !important;
}

#login-box.ff-login #login-heading {
    color: var(--text) !important;
}

#login-box.ff-login .login-banner {
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    width: 400px;
}

#login-box.ff-login .login-header {
    position: relative;
}

#login-box.ff-login .login-theme-toggle {
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    #login-box.ff-login .login-theme-toggle:hover {
        background: var(--surface-2) !important;
    }

#login-box.ff-login {
    padding: 16px 8px;
}

#login-box.ff-login #login-container.login-container {
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    width: min(400px, calc(100vw - 32px));
}

#login-box.ff-login .login-header {
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    height: clamp(172px, 28vh, 230px) !important;
    min-height: 160px !important;
    margin-bottom: 24px;
    padding: 12px 18px;
    overflow: visible;
}

#login-box.ff-login .login-header::before,
#login-box.ff-login .login-banner {
    grid-area: 1 / 1;
}

#login-box.ff-login .login-header::before {
    width: 100% !important;
    height: 100% !important;
}

#login-box.ff-login .login-banner {
    display: block;
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
}

#login-box.ff-login #login-heading {
    margin: 0;
    padding: 10px 0 8px !important;
    font-size: 22px;
    line-height: 1.2;
}

#login-box.ff-login #login-form {
    padding: 0 28px;
}

#login-box.ff-login .login-form-group2 {
    padding: 4px 10px 7px;
}

#login-box.ff-login .login-form-group {
    padding: 4px 0;
}

#login-box.ff-login #login-form .login-form-group {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    column-gap: 8px;
    align-items: center;
}

#login-box.ff-login #login-form .login-form-group > .login-icon {
    width: 30px;
    padding-right: 0;
    text-align: center;
}

#login-box.ff-login #login-form .login-form-group > .login-icon:last-child {
    grid-column: 3;
}

#login-box.ff-login .login-form-control {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    height: 36px;
    padding: 6px 10px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

#login-box.ff-login #login-form .login-form-control {
    grid-column: 2;
    min-width: 0;
    width: 100% !important;
}

#login-box.ff-login .login-form-control:hover,
#login-box.ff-login .login-form-control:active {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
}

#login-box.ff-login .login-form-control:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--focus) !important;
    outline: none !important;
}

body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control {
    border-color: color-mix(in srgb, var(--border) 72%, var(--text)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent) !important;
}

body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control:hover,
body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control:focus {
    border-color: var(--primary) !important;
}

body.ff-app[data-theme="dark"] #login-box.ff-login .login-form-control:focus {
    box-shadow: 0 0 0 3px var(--focus) !important;
}

#login-box.ff-login .password-group .login-form-control {
    padding-right: 42px !important;
}

#login-box.ff-login #login-form .password-group .btn-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    right: 42px;
}

#login-box.ff-login .login-btn-container {
    padding-top: 10px;
}

#login-box.ff-login .track-cta {
    padding-bottom: 10px;
}

#login-box.ff-login .track-divider {
    margin: 10px 30px 8px;
}

#login-box.ff-login .track-copy {
    margin-bottom: 6px;
}

#login-box.ff-login .ff-login-meta {
    width: min(400px, calc(100vw - 32px));
}

@media (max-height: 650px) {
    #login-box.ff-login {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #login-box.ff-login .login-header {
        height: 150px !important;
        min-height: 150px !important;
        margin-bottom: 16px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    #login-box.ff-login #login-heading {
        padding-top: 7px !important;
        padding-bottom: 5px !important;
        font-size: 20px;
    }

    #login-box.ff-login .login-form-group2 {
        padding-top: 2px;
        padding-bottom: 5px;
    }

    #login-box.ff-login .login-btn-container {
        padding-top: 8px;
    }

    #login-box.ff-login .track-divider {
        margin-top: 8px;
        margin-bottom: 6px;
    }
}

/* --- Dashboard island: dash buttons strip --- */
.ff-dashboard .ff-dash-tiles {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    .ff-dashboard .ff-dash-tiles a {
        display: block;
        color: inherit !important;
        text-decoration: none !important;
    }

.ff-dashboard .ff-dashboard-chart-status {
    margin-top: 10px;
}

.ff-dashboard .ff-dashboard-chart-status__inner {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    min-height: 38px;
    padding: 6px 10px;
}

.ff-dashboard .ff-dashboard-chart-status__text {
    color: var(--text-muted);
    font-weight: 600;
    margin-right: auto;
}

.ff-dashboard .ff-dashboard-chart-status__text .fa {
    color: var(--primary);
    margin-right: 6px;
}

.ff-dashboard .ff-dashboard-chart-refresh {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    min-height: 28px;
    padding-bottom: 4px;
    padding-top: 4px;
}

/* --- Footer island --- */
body.ff-app .ff-footer {
    align-items: center;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    color: var(--text-muted);
    line-height: 22px !important;
    min-height: 32px;
    padding: 3px 16px !important;
}

    body.ff-app .ff-footer .text-bold {
        color: var(--text) !important;
    }

body.ff-app #app > footer .footer-inner.ff-footer > .pull-left,
body.ff-app #app > footer .footer-inner.ff-footer > .pull-right {
    line-height: 22px !important;
}

body.ff-app #app > footer .footer-inner.ff-footer .go-top.ff-icon-btn {
    font-size: 14px;
    height: 26px !important;
    line-height: 24px !important;
    min-height: 0;
    width: 30px !important;
}

body.ff-app .ff-footer-version {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   NAV / SIDEBAR (token-driven)
   Containers: #sidebar.sidebar, .sidebar-container
   Scope: .ff-shell
========================================================= */

/* Paint the actual sidebar containers */
.ff-shell #sidebar.sidebar {
    background: var(--nav-bg) !important;
    border-right: 1px solid var(--nav-border) !important;
}

    .ff-shell #sidebar.sidebar .sidebar-container {
        background: var(--nav-bg) !important;
    }

/* Title */
.ff-shell #sidebar .ff-nav-title,
.ff-shell #sidebar .navbar-title {
    padding: 12px 14px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nav-text-muted) !important;
    border-bottom: 1px solid var(--nav-border) !important;
    background: transparent !important;
}

/* Menu base */
.ff-shell #sidebar .ff-nav-menu,
.ff-shell #sidebar .main-navigation-menu {
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none !important;
    background: transparent !important;
}

    /* Top-level anchors */
    .ff-shell #sidebar .ff-nav-menu > li > a,
    .ff-shell #sidebar .main-navigation-menu > li > a {
        display: block;
        padding: 10px 14px;
        margin: 2px 8px;
        border-radius: var(--radius-sm);
        color: var(--nav-text) !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    /* Clip-Two item layout */
    .ff-shell #sidebar .main-navigation-menu .item-content,
    .ff-shell #sidebar .ff-nav-menu .item-content {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Icons + arrow */
    .ff-shell #sidebar .main-navigation-menu .item-media i,
    .ff-shell #sidebar .ff-nav-menu .item-media i,
    .ff-shell #sidebar .main-navigation-menu i.ti,
    .ff-shell #sidebar .ff-nav-menu i.ti {
        color: var(--nav-icon) !important;
    }

    .ff-shell #sidebar .main-navigation-menu .icon-arrow,
    .ff-shell #sidebar .ff-nav-menu .icon-arrow {
        color: var(--nav-text-muted) !important;
    }

    /* Text */
    .ff-shell #sidebar .main-navigation-menu .title,
    .ff-shell #sidebar .ff-nav-menu .title,
    .ff-shell #sidebar .main-navigation-menu .item-inner,
    .ff-shell #sidebar .ff-nav-menu .item-inner {
        color: var(--nav-text) !important;
    }

    /* Hover */
    .ff-shell #sidebar .ff-nav-menu > li > a:hover,
    .ff-shell #sidebar .main-navigation-menu > li > a:hover {
        background: var(--nav-bg-2) !important;
    }

    /* Active/open */
    .ff-shell #sidebar .ff-nav-menu > li.active > a,
    .ff-shell #sidebar .ff-nav-menu > li.open > a,
    .ff-shell #sidebar .main-navigation-menu > li.active > a,
    .ff-shell #sidebar .main-navigation-menu > li.open > a {
        background: var(--nav-active-bg) !important;
        border: 1px solid var(--nav-active-border) !important;
    }

    .ff-shell #sidebar .ff-nav-menu > li.active .item-media i,
    .ff-shell #sidebar .ff-nav-menu > li.open .item-media i,
    .ff-shell #sidebar .main-navigation-menu > li.active .item-media i,
    .ff-shell #sidebar .main-navigation-menu > li.open .item-media i {
        color: var(--nav-active) !important;
    }

    /* Submenu container */
    .ff-shell #sidebar .ff-nav-menu > li > .sub-menu,
    .ff-shell #sidebar .main-navigation-menu > li > .sub-menu {
        background: transparent !important;
        padding: 6px 0 10px;
        margin: 0 8px 8px;
        border-left: 1px solid var(--nav-border) !important;
    }

        /* Submenu links */
        .ff-shell #sidebar .ff-nav-menu > li > .sub-menu > li > a,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li > a {
            display: block;
            padding: 8px 12px;
            margin: 2px 0 2px 10px;
            border-radius: var(--radius-sm);
            color: var(--nav-text-muted) !important;
            text-decoration: none !important;
            background: transparent !important;
        }

            .ff-shell #sidebar .ff-nav-menu > li > .sub-menu > li > a:hover,
            .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li > a:hover {
                background: var(--nav-bg-2) !important;
                color: var(--nav-text) !important;
            }

        /* Submenu active */
        .ff-shell #sidebar .ff-nav-menu > li > .sub-menu > li.active > a,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li.active > a,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu > li.active-state > a {
            background: var(--nav-active-bg) !important;
            border: 1px solid var(--nav-active-border) !important;
            color: var(--nav-text) !important;
        }

        /* Long submenu scroll */
        .ff-shell #sidebar .ff-nav-menu > li > .sub-menu.sub-menu-scroll,
        .ff-shell #sidebar .main-navigation-menu > li > .sub-menu.sub-menu-scroll {
            max-height: calc(100vh - 180px) !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }

.ff-shell #sidebar .sub-menu.sub-menu-scroll.margin-bottom-30,
.ff-shell #sidebar .sub-menu.sub-menu-scroll.padding-bottom-30 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Perfect Scrollbar thumbs */
.ff-shell #sidebar .ps__rail-y,
.ff-shell #sidebar .ps-scrollbar-y-rail {
    background: transparent !important;
}

.ff-shell #sidebar .ps__thumb-y,
.ff-shell #sidebar .ps-scrollbar-y {
    background: var(--ps-thumb) !important;
    border-radius: 10px;
}

/* =========================================================
   TOP NAVBAR (token-driven)
   Scope: .ff-shell .ff-topnav
========================================================= */

/* Base header */
.ff-shell .ff-topnav.navbar,
.ff-shell .ff-topnav.navbar.navbar-default {
    background: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--topbar-border) !important;
    color: var(--topbar-text) !important;
    z-index: 1030; /* keep dropdowns above content */
}

/* If legacy fixed-navbar is enabled, ensure content is not hidden underneath */
/*#app.app-navbar-fixed .ff-shell .main-content.notopnavbar {
    padding-top: var(--ff-topbar-height) !important;
}*/

/* Brand + togglers */
.ff-shell .ff-topnav .navbar-header {
    background: transparent !important;
}

.ff-shell .ff-topnav .navbar-brand {
    height: auto;
    padding: 6px 12px;
}

.ff-shell .ff-topnav .btn.btn-navbar,
.ff-shell .ff-topnav .sidebar-toggler,
.ff-shell .ff-topnav .menu-toggler {
    color: var(--topbar-text) !important;
}

    .ff-shell .ff-topnav .btn.btn-navbar:hover,
    .ff-shell .ff-topnav .sidebar-toggler:hover,
    .ff-shell .ff-topnav .menu-toggler:hover {
        background: var(--topbar-hover) !important;
        border-radius: var(--radius-sm);
    }

/* Collapse area with optional banner image */
.ff-shell .ff-topnav .ff-topnav-bg {
    position: relative;
    background-color: var(--topbar-bg) !important;
    background-size: cover !important;
    background-position: center !important;
}

    /* Readability overlay when an image exists */
    .ff-shell .ff-topnav .ff-topnav-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, var(--topbar-overlay-from), var(--topbar-overlay-to));
        pointer-events: none;
    }

    /* Ensure nav content sits above overlay */
    .ff-shell .ff-topnav .ff-topnav-bg > * {
        position: relative;
        z-index: 1;
    }

/* Right nav links */
.ff-shell .ff-topnav .navbar-nav > li > a {
    color: var(--topbar-text) !important;
    background: transparent !important;
}

    .ff-shell .ff-topnav .navbar-nav > li > a:hover,
    .ff-shell .ff-topnav .navbar-nav > li > a:focus {
        background: var(--topbar-hover) !important;
        color: var(--topbar-text) !important;
        border-radius: var(--radius-sm);
    }

    .ff-shell .ff-topnav .navbar-nav > li > a i {
        color: var(--topbar-text) !important;
    }

/* Dropdown open state */
.ff-shell .ff-topnav .navbar-nav > li.dropdown.open > a,
.ff-shell .ff-topnav .navbar-nav > li.dropdown.open > a:hover,
.ff-shell .ff-topnav .navbar-nav > li.dropdown.open > a:focus {
    background: var(--topbar-hover) !important;
    color: var(--topbar-text) !important;
    border-radius: var(--radius-sm);
}

/* Dropdown menus */
.ff-shell .ff-topnav .dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    z-index: 1060 !important;
}

    .ff-shell .ff-topnav .dropdown-menu > li > a {
        color: var(--text) !important;
    }

        .ff-shell .ff-topnav .dropdown-menu > li > a:hover,
        .ff-shell .ff-topnav .dropdown-menu > li > a:focus {
            background: var(--surface-2) !important;
            color: var(--text) !important;
        }

/* User dropdown avatar */
.ff-shell .ff-topnav li.current-user > a img {
    border-radius: 999px;
    border: 1px solid var(--border);
}

/* Favourite pages dropdown legacy normalize */
.ff-shell .ff-topnav .favpage-ul,
.ff-shell .ff-topnav .favpage-li,
.ff-shell .ff-topnav .favpage-li-a {
    background: transparent !important;
    color: inherit !important;
}

/* =========================================================
   TOP NAVBAR + TAB BAR (white-on-white fix)
   Put at VERY END (after theme-purple.css)
========================================================= */

/* 1) Make the topbar surface + text always readable */
body.ff-app .ff-shell header.navbar.navbar-default,
body.ff-app .ff-shell .navbar.navbar-default.navbar-static-top,
body.ff-app .ff-shell .navbar-header,
body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
    background: var(--topbar-bg) !important;
    color: var(--topbar-text) !important;
    border-bottom: 1px solid var(--topbar-border) !important;
}

    /* Force ALL link/text/icon colors in the topbar */
    body.ff-app .ff-shell .navbar-header a,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg a,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .text-username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .title {
        color: var(--topbar-text) !important;
    }

        body.ff-app .ff-shell .navbar-header a i,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg a i {
            color: var(--topbar-text) !important;
        }

        /* Hover/active states */
        body.ff-app .ff-shell .navbar-header a:hover,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right > li > a:hover,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right > li > a:focus {
            background: var(--topbar-hover) !important;
            color: var(--topbar-text) !important;
            border-radius: var(--radius-sm) !important;
        }

    /* 2) Only show the banner readability overlay when a banner image exists
   (ng-style only adds background-image inline when BannerPath is set) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg::before {
        content: none !important; /* default: no overlay */
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg[style*="background-image"]::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(to bottom, var(--topbar-overlay-from), var(--topbar-overlay-to)) !important;
        pointer-events: none !important;
    }

/*body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {*/
    /*position: relative !important;*/ /* so ::before can anchor */
/*}*/

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg > * {
        position: relative !important;
        z-index: 1 !important;
    }

    /* 3) Fix the Favourite Pages dropdown being transparent (white-on-white inside) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .favpage-ul.dropdown-menu {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .favpage-ul > li > a {
        color: var(--text) !important;
        background: transparent !important;
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .favpage-ul > li > a:hover {
            background: var(--surface-2) !important;
            color: var(--text) !important;
        }

/* 4) Tab-bar include host: give it the same topbar surface + readable tab links
   (this targets your wrapper div with ng-include=tab-bar.html) */
body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] {
    background: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--topbar-border) !important;
}

    /* Common tab patterns inside tab-bar.html */
    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-tabs > li > a,
    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-pills > li > a {
        color: var(--topbar-text) !important;
    }

    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-tabs > li.active > a,
    body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] .nav-pills > li.active > a {
        background: var(--topbar-hover) !important;
        border-color: var(--topbar-border) !important;
        color: var(--topbar-text) !important;
    }


/* Gold star stays gold */
.ff-shell .ff-topnav .fa-star {
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
}

/* =========================================================
   06) BROWSER QUIRKS (autofill)
========================================================= */

/* Firefox autofill */
body.ff-app input.ff-input:-moz-autofill,
body.ff-app textarea.ff-input:-moz-autofill,
body.ff-app select.ff-input:-moz-autofill,
body.ff-app input.ff-input:-moz-autofill-preview,
body.ff-app textarea.ff-input:-moz-autofill-preview,
body.ff-app select.ff-input:-moz-autofill-preview {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    caret-color: var(--text) !important;
}

/* Chrome / Edge / Safari autofill */
body.ff-app input.ff-input:-webkit-autofill,
body.ff-app textarea.ff-input:-webkit-autofill,
body.ff-app select.ff-input:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    transition: background-color 999999s ease-in-out 0s;
}

    body.ff-app input.ff-input:-webkit-autofill:hover,
    body.ff-app input.ff-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text) !important;
        box-shadow: 0 0 0 1000px var(--surface) inset !important;
    }

/* =========================================================
   VENDOR OVERRIDES (token-aware) — fix legacy !important
========================================================= */
body.ff-app h1,
body.ff-app h2,
body.ff-app h3,
body.ff-app h4,
body.ff-app h5 {
    color: var(--text) !important;
}

body.ff-app label {
    color: var(--text) !important;
}

body.ff-app .panel-heading .panel-heading-tabs > li,
body.ff-app .panel-heading .panel-heading-tabs > li > a,
body.ff-app .panel-heading .panel-heading-tabs > li > button {
    color: var(--text) !important;
}

body.ff-app .panel-heading .panel-heading-tabs .values p,
body.ff-app .panel-heading .panel-heading-tabs .text-small {
    color: var(--text-muted) !important;
}

body.ff-app .panel-heading .panel-heading-tabs i {
    color: var(--text) !important;
}

body.ff-app #page-title {
    background: transparent !important;
}

/* =========================================================
   SIDEBAR HARD OVERRIDES (beats theme-blue + styles.css)
   Fixes hover backgrounds + submenu flyout + wedge colors
   This section intentionally lives at the end so it can win.
========================================================= */
body.ff-app #sidebar,
body.ff-app #sidebar .sidebar-container,
body.ff-app #sidebar nav,
body.ff-app #sidebar .navbar-title,
body.ff-app #sidebar .main-navigation-menu {
    background: var(--nav-bg) !important;
}

    body.ff-app #sidebar nav > ul.main-navigation-menu > li,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li > a {
        background: transparent !important;
        color: var(--nav-text) !important;
        text-decoration: none !important;
    }

    body.ff-app #sidebar nav .item-media i,
    body.ff-app #sidebar nav .icon-arrow {
        color: var(--nav-icon) !important;
    }

    /* Hover (kills the theme-blue grey/white hover) */
    body.ff-app #sidebar > div nav > ul.main-navigation-menu > li:hover,
    body.ff-app #sidebar > div nav > ul.main-navigation-menu > li:hover > a,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li:hover,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li:hover > a {
        background: var(--nav-bg-2) !important;
        color: var(--nav-text) !important;
    }

    /* Active / Open */
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.active,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.active > a,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.open,
    body.ff-app #sidebar nav > ul.main-navigation-menu > li.open > a {
        background: var(--nav-active-bg) !important;
        border-color: var(--nav-active-border) !important;
    }

        /* Clip-Two triangle/wedge color (this was white before) */
        body.ff-app #sidebar > div nav > ul.main-navigation-menu > li:hover:before,
        body.ff-app #sidebar > div nav > ul.main-navigation-menu > li.active:before,
        body.ff-app #sidebar > div nav > ul.main-navigation-menu > li.open:before,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li:hover:before,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li.active:before,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li.open:before {
            border-left-color: var(--nav-wedge) !important;
        }

    /* Submenu flyout background */
    body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu {
        background: var(--nav-bg) !important;
        border-left: 1px solid var(--nav-border) !important;
    }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a {
            background: transparent !important;
            color: var(--nav-text-muted) !important;
            text-decoration: none !important;
        }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:hover > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active-state > a {
            background: var(--nav-bg-2) !important;
            color: var(--nav-text) !important;
        }


/* =========================================================
   ISLAND: Waybill Full (Quick Capture)
========================================================= */
body.ff-app .ff-waybill .ff-page-header {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    padding: 12px 14px;
    margin-bottom: 12px;
}

body.ff-app .ff-waybill .ff-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

body.ff-app .ff-waybill .ff-page-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text) !important;
    font-weight: 700;
    font-size: 22px;
}

body.ff-app .ff-waybill .ff-page-subtitle {
    color: var(--text-muted);
    font-weight: 600;
}

body.ff-app .ff-waybill .ff-fav-btn i {
    font-size: 18px;
}

/* Toolbar “tiles” */
body.ff-app .ff-waybill .ff-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.ff-app .ff-waybill .ff-action {
    width: 74px;
    height: 54px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    cursor: pointer;
    user-select: none;
}

    /* Default actions hover (but NOT primary/danger, and not when disabled) */
    body.ff-app .ff-waybill .ff-action:not(.ff-action-primary):not(.ff-action-danger):not([disabled]):not(.disabled):hover {
        background: var(--surface-2) !important;
        border-color: var(--primary) !important;
    }
    /* Primary action: keep primary background on hover */
    body.ff-app .ff-waybill .ff-action.ff-action-primary {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--on-primary);
    }

        body.ff-app .ff-waybill .ff-action.ff-action-primary:not([disabled]):not(.disabled):hover {
            background: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
            color: var(--on-primary) !important;
        }

        body.ff-app .ff-waybill .ff-action.ff-action-primary:not([disabled]):not(.disabled):active {
            background: var(--primary-active) !important;
            border-color: var(--primary-active) !important;
        }
    /* Ensure FA icons follow the button's text color */
    body.ff-app .ff-waybill .ff-action i,
    body.ff-app .ff-waybill .ff-action .ff-action-label {
        color: currentColor !important;
    }


    body.ff-app .ff-waybill .ff-action i {
        font-size: 20px;
    }

body.ff-app .ff-waybill .ff-action-label {
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted);
}

body.ff-app .ff-waybill .ff-action-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

    body.ff-app .ff-waybill .ff-action-primary .ff-action-label {
        color: var(--on-primary);
    }

body.ff-app .ff-waybill .ff-action-danger {
    border-color: rgba(255, 77, 79, 0.55) !important;
}

    body.ff-app .ff-waybill .ff-action-danger:hover {
        border-color: var(--error) !important;
    }

/* Page body */
body.ff-app .ff-waybill .ff-page-body {
    background: transparent;
}

/* Modern fieldset sections (no markup change needed) */
body.ff-app .ff-waybill fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-waybill legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Inputs */
body.ff-app .ff-waybill .ff-input {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

    body.ff-app .ff-waybill .ff-input:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ui-select-container .btn.form-control.ui-select-toggle,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ui-select-container .btn.form-control {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text) !important;
    opacity: 1 !important;
}

body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control:disabled,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control[disabled],
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .form-control[readonly],
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input:disabled,
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input[disabled],
body.ff-app[data-theme="dark"] .ff-waybill .ff-additional-details > .row .ff-input[readonly] {
    color: var(--text-muted) !important;
}

body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.QuoteID"],
body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.CollectionID"],
body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.ManifestNO"] {
    max-width: 9.5rem;
    width: min(100%, 9.5rem) !important;
}

body.ff-app .ff-waybill .ff-additional-details input[ng-model="waybillvm.ClientDetails.InvDate"] {
    max-width: 9rem;
    width: min(100%, 9rem) !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-list .input-group {
    max-width: 15rem;
    width: min(100%, 15rem) !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-row,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 0;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-row::after,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row::after,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-row > [class*="col-"],
body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row > [class*="col-"],
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-id-field {
    flex: 0 0 9.5rem;
    max-width: 9.5rem;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-id-action {
    flex: 0 0 34px;
    max-width: 34px;
    margin-right: 8px !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-row .ff-additional-id-action {
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-linked-wrap {
    flex: 0 1 auto;
    margin-right: 8px;
    min-width: calc(9.5rem + 34px);
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap {
    flex-basis: calc(9.5rem + 34px + 9rem + 8px);
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-date-field {
    flex: 0 0 9rem;
    margin-left: 8px;
    max-width: 9rem;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair {
    flex: 0 1 310px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-wide {
    flex: 1 1 520px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-field {
    flex: 1 1 145px;
    min-width: 135px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-pair-row > [class*="col-"]:not(.ff-additional-meta-field) {
    flex: 1 1 220px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-id-field label,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-date-field label,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-field label {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-wildcard-toggle {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 700;
}

body.ff-app .ff-waybill .ff-wildcard-toggle.is-active,
body.ff-app .ff-waybill .ff-wildcard-mode-label {
    color: var(--error) !important;
}

body.ff-app .ff-waybill .ff-wildcard-mode-label {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ui-select Bootstrap theme bridge */
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap > .ui-select-match > .btn {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap > .ui-select-match > .btn:hover {
        background: var(--surface-2) !important;
    }

body.ff-app .ff-waybill .ui-select-bootstrap .ui-select-search {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.ff-app .ff-waybill .ui-select-bootstrap .ui-select-choices-row > a {
    color: var(--text) !important;
}

    body.ff-app .ff-waybill .ui-select-bootstrap .ui-select-choices-row > a:hover {
        background: var(--surface-2) !important;
    }



/* Badge wrap fix (replaces inline <style>) */
body.ff-app .ff-waybill .badge-warning {
    white-space: normal;
    display: inline-block;
    word-wrap: break-word;
    max-width: 100%;
}

/* Remove forced white containers */
body.ff-app .ff-waybill .container-fullw.bg-white {
    background: transparent !important;
}

body.ff-app .ff-card-pad {
    padding: 14px;
}





/* =========================================================
   ISLAND BRIDGE: Waybill Full
   - ng-dropdown-multiselect (Surcharges)
   - DevExtreme dx-select-box dropdown button (Driver Name)
   Put this at the END of the file.
========================================================= */

/* === ng-dropdown-multiselect (the "Select" button) ====================== */
body.ff-app .ff-waybill
.multiselect-parent.btn-group.dropdown-multiselect > button.dropdown-toggle.btn {
    width: 100% !important;
    min-height: 34px;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > button.dropdown-toggle.btn:hover {
        background: var(--surface-2) !important;
        border-color: var(--primary-hover) !important;
    }

    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > button.dropdown-toggle.btn:focus,
    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect.open > button.dropdown-toggle.btn {
        background: var(--surface) !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* caret color */
body.ff-app .ff-waybill
.multiselect-parent.btn-group.dropdown-multiselect > button .caret {
    color: var(--text-muted) !important;
    border-top-color: currentColor !important;
}

/* dropdown menu */
body.ff-app .ff-waybill
.multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}

    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu > li > a,
    body.ff-app .ff-waybill
    .multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu label {
        color: var(--text) !important;
    }

        body.ff-app .ff-waybill
        .multiselect-parent.btn-group.dropdown-multiselect > ul.dropdown-menu > li > a:hover {
            background: var(--surface-2) !important;
        }




/* FIX: ng-dropdown-multiselect "Surcharges" button still white
   (button is inside: .multiselect-parent > div > button)
   Put at END of file.
*/
body.ff-app .ff-waybill [ng-dropdown-multiselect] .multiselect-parent.btn-group.dropdown-multiselect,
body.ff-app .ff-waybill [ng-dropdown-multiselect] .multiselect-parent.btn-group.dropdown-multiselect > div {
    background: transparent !important;
}

    /* Target the real button (descendant, not direct child) */
    body.ff-app .ff-waybill [ng-dropdown-multiselect]
    .multiselect-parent.btn-group.dropdown-multiselect
    button.dropdown-toggle.btn.btn-default {
        width: 100% !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: var(--surface) !important; /* key */
        background-image: none !important; /* kills bootstrap gradients */
        background: var(--surface) !important; /* belt + suspenders */

        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--text) !important;
        box-shadow: none !important;
    }

        body.ff-app .ff-waybill [ng-dropdown-multiselect]
        .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:hover {
            background-color: var(--surface-2) !important;
            background: var(--surface-2) !important;
            border-color: var(--primary-hover) !important;
        }

        body.ff-app .ff-waybill [ng-dropdown-multiselect]
        .multiselect-parent.btn-group.dropdown-multiselect.open
        button.dropdown-toggle.btn.btn-default,
        body.ff-app .ff-waybill [ng-dropdown-multiselect]
        .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:focus {
            background-color: var(--surface) !important;
            background: var(--surface) !important;
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    /* caret */
    body.ff-app .ff-waybill [ng-dropdown-multiselect]
    .multiselect-parent.btn-group.dropdown-multiselect
    button.dropdown-toggle .caret {
        color: var(--text-muted) !important;
        border-top-color: currentColor !important;
    }


/* =========================================
   UI-SELECT: improve dropdown readability
   (choices rows + highlight + active state)
   Put at END of file
========================================= */

/* Choices container */
body.ff-app .ui-select-bootstrap .ui-select-choices {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

/* Force readable text inside each row (your example uses .ui-select-choices-row-inner + div) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row-inner * {
    color: var(--text) !important; /* key contrast bump */
}

/* Hover + active row background (covers both "row div" and the <a> when present) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover > a,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active > a {
    background: var(--surface-2) !important;
}

    /* Active row text stays bright */
    body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner,
    body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner * {
        color: var(--text) !important;
    }

/* Disabled rows */
body.ff-app .ui-select-bootstrap .ui-select-choices-row.disabled .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.disabled .ui-select-choices-row-inner * {
    color: var(--text-disabled) !important;
}

/* Search highlight inside results (usually <span class="ui-select-highlight">) */
body.ff-app .ui-select-bootstrap .ui-select-highlight {
    color: var(--primary) !important;
    font-weight: 700 !important;
    background: transparent !important;
}


/* =========================================
   UI-SELECT: fix white-on-white on hover
   Put at END of file
========================================= */

/* Ensure the dropdown itself isn't inheriting a light hover theme */
body.ff-app .ui-select-bootstrap .ui-select-choices,
body.ff-app .ui-select-bootstrap .ui-select-choices-content {
    background: var(--surface) !important;
}

/* Hover row (covers both the row div and the <a> when present) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover > a,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row:hover .ui-select-choices-row-inner * {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* Active (keyboard / selected highlight) */
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active > a,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner,
body.ff-app .ui-select-bootstrap .ui-select-choices-row.active .ui-select-choices-row-inner * {
    background: var(--nav-active-bg) !important;
    color: var(--text) !important; /* or var(--nav-active-text) if you prefer */
}

/* If some stylesheet specifically targets a:hover */
body.ff-app .ui-select-bootstrap .ui-select-choices-row > a:hover,
body.ff-app .ui-select-bootstrap .ui-select-choices-row > a:focus {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* =========================================================
   UI-SELECT: kill stray white background rectangle
   (wrapper layers + empty no-choice div + focus class)
   Put at END of file
========================================================= */

body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap,
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-match.btn-default-focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

    /* The real “control” surface is the toggle element (your span.btn.form-control.ui-select-toggle) */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle.btn,
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle.form-control {
        background: var(--surface) !important;
        background-image: none !important; /* kills bootstrap gradients */
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
    }

    /* Some themes add pseudo backgrounds to toggles */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle::before,
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-toggle::after {
        background: transparent !important;
    }

    /* The “no choice” element can paint a small block even when empty */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-no-choice {
        background: transparent !important;
        color: var(--text-muted) !important;
        padding: 6px 10px !important;
        margin: 0 !important;
    }

        body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap .ui-select-no-choice:empty {
            display: none !important; /* prevents the empty white rectangle */
        }

    /* Just in case the caret/clear link is getting a background */
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap i.caret,
    body.ff-app .ff-waybill .ff-ui-select.ui-select-bootstrap a.btn-link {
        background: transparent !important;
    }


/* =========================================================
   VENDOR ADAPTERS (opt-in via .ff-control + vendor class)
   Put at END of file.
========================================================= */

/* ---------- Shared control surface (optional) ---------- */
body.ff-app .ff-control {
    --ff-ctrl-bg: var(--surface);
    --ff-ctrl-bg-hover: var(--surface-2);
    --ff-ctrl-border: var(--border);
    --ff-ctrl-text: var(--text);
    --ff-ctrl-muted: var(--text-muted);
}

/* =======================================================
   1) ng-dropdown-multiselect adapter (.ff-ms)
======================================================= */
body.ff-app .ff-ms .multiselect-parent,
body.ff-app .ff-ms .multiselect-parent > div {
    background: transparent !important;
}

    body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect
    button.dropdown-toggle.btn.btn-default {
        width: 100% !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: var(--ff-ctrl-bg) !important;
        background-image: none !important;
        border: 1px solid var(--ff-ctrl-border) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--ff-ctrl-text) !important;
        box-shadow: none !important;
    }

        body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:hover {
            background: var(--ff-ctrl-bg-hover) !important;
            border-color: var(--primary-hover) !important;
        }

        body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect.open
        button.dropdown-toggle.btn.btn-default,
        body.ff-app .ff-ms .multiselect-parent.btn-group.dropdown-multiselect
        button.dropdown-toggle.btn.btn-default:focus {
            background: var(--ff-ctrl-bg) !important;
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    body.ff-app .ff-ms .multiselect-parent button .caret {
        color: var(--ff-ctrl-muted) !important;
        border-top-color: currentColor !important;
    }

    body.ff-app .ff-ms .multiselect-parent > ul.dropdown-menu {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
    }


/* =======================================================
   2) ui-select adapter (.ff-ui)
   Fixes: contrast, hover white-on-white, stray white rectangle
======================================================= */

/* Kill any wrapper backgrounds (THIS is usually the “small white rectangle”) */
body.ff-app .ff-ui.ui-select-bootstrap,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match.btn-default-focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

    /* The real control */
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .btn {
        background: var(--ff-ctrl-bg) !important;
        background-image: none !important;
        color: var(--ff-ctrl-text) !important;
        border: 1px solid var(--ff-ctrl-border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: none !important;
    }

    /* Defensive: some themes paint pseudo elements */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-toggle::before,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-toggle::after {
        background: transparent !important;
    }

    /* Hover/focus */
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .btn:hover {
        background: var(--ff-ctrl-bg-hover) !important;
        border-color: var(--primary-hover) !important;
    }

    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match > .btn:focus,
    body.ff-app .ff-ui.ui-select-bootstrap.open > .ui-select-match > .btn {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

    /* Keyboard tab focus lands on ui-select's off-screen focusser, which
       toggles .btn-default-focus on the match wrapper instead of focusing
       the visible button directly. Mirror the same ring onto the visible
       control so tab users get a clear focus state before opening it. */
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match.btn-default-focus > .ui-select-toggle.btn,
    body.ff-app .ff-ui.ui-select-bootstrap > .ui-select-match.btn-default-focus > .btn,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-search:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        outline: none !important;
    }

    /* Search input when open */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-search {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }

    /* Dropdown menu */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-content {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
    }

    /* Text contrast inside rows (your “hard to read” issue) */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row-inner,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row-inner * {
        color: var(--text) !important;
    }

    /* Hover + active (your “white on white” issue) */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row:hover,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row:hover > a,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row.active,
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-choices-row.active > a {
        background: var(--surface-2) !important;
        color: var(--text) !important;
    }

    /* Highlight */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-highlight {
        color: var(--primary) !important;
        font-weight: 700 !important;
        background: transparent !important;
    }

    /* This element can render as a tiny white block even when empty */
    body.ff-app .ff-ui.ui-select-bootstrap .ui-select-no-choice {
        background: transparent !important;
        margin: 0 !important;
        padding: 6px 10px !important;
    }

        body.ff-app .ff-ui.ui-select-bootstrap .ui-select-no-choice:empty {
            display: none !important;
        }

    /* Caret/clear should never paint */
    body.ff-app .ff-ui.ui-select-bootstrap i.caret,
    body.ff-app .ff-ui.ui-select-bootstrap a.btn-link {
        background: transparent !important;
    }




/* =========================================================
   ISLAND: Collection Management
   Add: class="ff-collection ff-dx ff-ms" on the page wrapper
========================================================= */

body.ff-app .ff-collection #page-title {
    background: transparent !important;
}

/* Stop legacy "bg-white" containers from forcing bright blocks */
body.ff-app .ff-collection .container-fullw.bg-white {
    background: transparent !important;
}

/* Make fieldsets match the Waybill island (clean + consistent) */
body.ff-app .ff-collection fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-collection legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}



/* Collection page toolbar: prevent overlap + keep it “button-like” */
body.ff-app .ff-collection .panel-heading .panel-heading-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
}

    body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li {
        padding-top: 0 !important; /* kills the legacy push-down */
    }

        /* Apply a consistent button surface to links/buttons + dropdown toggles */
        body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > a,
        body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > button,
        body.ff-app .ff-collection .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

            body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > a:hover,
            body.ff-app .ff-collection .panel-heading .panel-heading-tabs > li > button:hover,
            body.ff-app .ff-collection .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle:hover {
                background: var(--surface-2) !important;
                border-color: var(--primary-hover) !important;
            }

    /* Tighten the icon + label layout */
    body.ff-app .ff-collection .panel-heading .panel-heading-tabs .sparkline {
        line-height: 1;
    }

    body.ff-app .ff-collection .panel-heading .panel-heading-tabs .values p {
        margin: 0 !important;
        line-height: 1.1;
    }

/* Date range picker: keep the shared compact date range layout intact */
body.ff-app .ff-collection .range-picker {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-width: 248px;
}

    body.ff-app .ff-collection .range-picker .start-date,
    body.ff-app .ff-collection .range-picker .end-date {
        flex: 0 0 112px;
        min-width: 0;
        max-width: 112px;
    }

    body.ff-app .ff-collection .range-picker .input-group-addon {
        flex: 0 0 24px;
    }

/* Optional: give the grid container a clean surface so it doesn’t “float” */
body.ff-app .ff-collection #gridContainer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

body.ff-app .ff-collection-update {
    overflow: visible;
}

body.ff-app .ff-collection-update-form {
    margin: 0;
}

body.ff-app .ff-collection-update-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

body.ff-app .ff-collection-update-actions {
    align-items: flex-end;
    margin-top: 6px;
}

body.ff-app .ff-collection-update .ff-collection-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
    margin: 0;
}

body.ff-app .ff-collection-update label {
    margin: 0;
    line-height: 1.2;
}

body.ff-app .ff-collection-update .ff-collection-field-driver,
body.ff-app .ff-collection-update .ff-collection-field-vehicle {
    flex: 0 1 170px;
    max-width: 190px;
    min-width: 150px;
}

body.ff-app .ff-collection-update .ff-collection-field-cell {
    flex: 0 0 150px;
    min-width: 130px;
}

body.ff-app .ff-collection-update .ff-collection-field-date {
    flex: 0 0 92px;
    max-width: 98px;
    min-width: 90px;
}

body.ff-app .ff-collection-update .ff-collection-field-time {
    flex: 0 0 72px;
    max-width: 76px;
    min-width: 68px;
}

body.ff-app .ff-collection-update .ff-collection-field-note,
body.ff-app .ff-collection-update .ff-collection-field-comment {
    flex: 1 1 0;
    min-width: 260px;
    align-self: flex-start;
}

body.ff-app .ff-collection-update .ff-collection-field-button {
    flex: 0 0 152px;
    margin-left: auto;
    min-width: 140px;
    position: relative;
    z-index: 2;
}

body.ff-app .ff-collection-update .ff-collection-field-clear {
    flex: 0 0 auto;
    justify-content: flex-end;
    min-height: 37px;
    padding-bottom: 2px;
}

body.ff-app .ff-collection-update .ff-collection-field-clear .checkbox {
    margin: 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

body.ff-app .ff-collection-update .ff-control,
body.ff-app .ff-collection-update .form-control,
body.ff-app .ff-collection-update .input-icon,
body.ff-app .ff-collection-update .ff-dx,
body.ff-app .ff-collection-update .dx-selectbox,
body.ff-app .ff-collection-update .dx-texteditor,
body.ff-app .ff-collection-update .ff-ui.ui-select-bootstrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.ff-app .ff-collection-update .dx-field,
body.ff-app .ff-collection-update .dx-field-value {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-collection-update .ui-select-match-text,
body.ff-app .ff-collection-update .ui-select-placeholder {
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

body.ff-app .ff-collection-update .ff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    line-height: 1.2;
    transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

body.ff-app .ff-collection-update .ff-collection-field-button .ff-btn:hover,
body.ff-app .ff-collection-update .ff-collection-field-button .ff-btn:focus,
body.ff-app .ff-collection-update .ff-collection-field-button .ff-btn:active {
    transform: none !important;
}

@media (max-width: 991px) {
    body.ff-app .ff-collection-update-fields {
        gap: 8px 10px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-driver,
    body.ff-app .ff-collection-update .ff-collection-field-vehicle {
        flex: 0 1 150px;
        max-width: 175px;
        min-width: 135px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-cell {
        flex: 0 1 120px;
        max-width: 140px;
        min-width: 108px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-date {
        flex: 0 0 92px;
        max-width: 98px;
        min-width: 90px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-time {
        flex: 0 0 72px;
        max-width: 76px;
        min-width: 68px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-note,
    body.ff-app .ff-collection-update .ff-collection-field-comment {
        flex: 1 1 220px;
        min-width: 180px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-button {
        flex: 0 0 132px;
        margin-left: auto;
        min-width: 120px;
    }

    body.ff-app .ff-collection-update .ff-collection-field-clear {
        flex: 0 0 auto;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    body.ff-app .ff-collection-update .ff-collection-field-driver,
    body.ff-app .ff-collection-update .ff-collection-field-vehicle,
    body.ff-app .ff-collection-update .ff-collection-field-cell,
    body.ff-app .ff-collection-update .ff-collection-field-date,
    body.ff-app .ff-collection-update .ff-collection-field-time,
    body.ff-app .ff-collection-update .ff-collection-field-note,
    body.ff-app .ff-collection-update .ff-collection-field-comment,
    body.ff-app .ff-collection-update .ff-collection-field-button,
    body.ff-app .ff-collection-update .ff-collection-field-clear {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }
}




body.ff-app .uib-datepicker-popup.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}

body.ff-app .uib-datepicker-popup .btn {
    color: var(--text) !important;
}

    body.ff-app .uib-datepicker-popup .btn:hover {
        background: var(--surface-2) !important;
    }

/* =========================================================
   ISLAND: Manifest Generate
   Add: class="ff-manifest" on the page wrapper
========================================================= */



/* Fieldsets match your modern sections */
body.ff-app .ff-manifest fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-manifest legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bridge legacy Bootstrap controls on this page */
body.ff-app .ff-manifest .form-control,
body.ff-app .ff-manifest select.form-control,
body.ff-app .ff-manifest textarea.form-control {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .ff-manifest .form-control::placeholder {
        color: var(--text-muted) !important;
    }

    body.ff-app .ff-manifest .form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        outline: none !important;
    }

/* Fix toolbar layout + make the actions look like buttons */
body.ff-app .ff-manifest .panel-heading .panel-heading-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
}

    body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li {
        padding-top: 0 !important;
    }

        /* Targets BOTH <button> and <a> in your toolbar */
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > a,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > button,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

    /* Beat the inline style="color:#333 !important" on dropdown toggles */
    body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
        color: var(--text) !important;
    }

        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > a:hover,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs > li > button:hover,
        body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle:hover {
            background: var(--surface-2) !important;
            border-color: var(--primary-hover) !important;
        }

    body.ff-app .ff-manifest .panel-heading .panel-heading-tabs .values p {
        margin: 0 !important;
        line-height: 1.1;
    }

body.ff-app .ff-waybill .ff-manifest-details {
    margin-bottom: 6px !important;
    padding: 10px 12px 8px !important;
}

body.ff-app .ff-waybill .ff-manifest-details > legend {
    margin-bottom: 5px !important;
}

body.ff-app .ff-waybill .ff-manifest-details > .row {
    margin-bottom: 4px;
}

body.ff-app .ff-waybill .ff-manifest-details > .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-manifest-final-row,
body.ff-app .ff-waybill .ff-manifest-lookup-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-manifest-final-row::before,
body.ff-app .ff-waybill .ff-manifest-final-row::after,
body.ff-app .ff-waybill .ff-manifest-lookup-row::before,
body.ff-app .ff-waybill .ff-manifest-lookup-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-final-row > [class*="col-"],
body.ff-app .ff-waybill .ff-manifest-lookup-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .col-md-2 {
    flex: 1 1 165px;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .col-md-3 {
    flex: 1.4 1 235px;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .ff-manifest-status-option {
    flex: 0 0 auto;
    min-width: 92px;
}

body.ff-app .ff-waybill .ff-manifest-final-row > .ff-manifest-status-related {
    min-width: 172px;
}

body.ff-app .ff-waybill .ff-manifest-status-option .checkbox-inline {
    margin: 0;
    padding-top: 6px !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-lookup-field {
    flex: 0 1 195px;
}

body.ff-app .ff-waybill .ff-manifest-lookup-related {
    flex: 0 1 235px;
}

body.ff-app .ff-waybill .ff-manifest-lookup-actions {
    align-items: flex-end;
    display: flex;
    flex: 1 1 360px;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 19px !important;
}

body.ff-app .ff-waybill .ff-manifest-lookup-actions .btn {
    min-height: var(--ff-control-h);
    padding-bottom: 6px;
    padding-top: 6px;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-grid-row {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel {
    margin-bottom: 8px !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel .panel-heading {
    min-height: 0;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    line-height: 22px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row::before,
body.ff-app .ff-waybill .ff-manifest-grid-heading-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0 !important;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row h4 {
    font-size: 15px;
    line-height: 1.2;
    margin: 2px 0;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row strong {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-grid-count {
    flex: 0 1 185px;
}

body.ff-app .ff-waybill .ff-manifest-grid-heading-row > .ff-manifest-wb-entry-row {
    flex: 1 1 560px;
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel .panel-body {
    padding: 4px 8px 8px !important;
}

body.ff-app .ff-waybill .ff-manifest-grid-panel .panel-body > .row {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-manifest-footer-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: -4px 0 0 0 !important;
}

body.ff-app .ff-waybill .ff-manifest-footer-row::before,
body.ff-app .ff-waybill .ff-manifest-footer-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-footer-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-footer-print {
    align-items: center;
    display: flex;
    flex: 0 1 210px;
    min-height: var(--ff-control-h);
}

body.ff-app .ff-waybill .ff-manifest-footer-checkbox {
    margin: 0 !important;
    padding-top: 0 !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-footer-actions {
    flex: 1 1 430px;
}

body.ff-app .ff-waybill .ff-manifest-footer-action-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

body.ff-app .ff-waybill .ff-manifest-footer-action-group .btn {
    min-height: var(--ff-control-h);
    padding-bottom: 6px;
    padding-top: 6px;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: flex-end;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-row::before,
body.ff-app .ff-waybill .ff-manifest-wb-entry-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-option {
    flex: 0 0 auto;
    float: none;
    min-width: 92px;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-option .checkbox-inline {
    margin: 0;
    padding-top: 3px;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-input {
    flex: 1 1 240px;
    min-width: 220px;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-input .input-group {
    width: 100%;
}

body.ff-app .ff-waybill .ff-manifest-wb-entry-input .margin-top-5 {
    margin-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row {
    gap: 2px 8px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row .form-group,
body.ff-app .ff-generate-manifest .ff-manifest-final-row .dx-field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row label {
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ff-control,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-container,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-generate-manifest .ff-manifest-schedule-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row {
    align-items: center !important;
    gap: 1px 8px !important;
    line-height: 20px !important;
    padding-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > [class*="col-"] {
    padding-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-count {
    flex: 0 1 160px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-load-mass,
body.ff-app .ff-generate-manifest .ff-manifest-vehicle-max,
body.ff-app .ff-generate-manifest .ff-manifest-available-mass,
body.ff-app .ff-generate-manifest .ff-manifest-overloaded-mass {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > .ff-manifest-wb-entry-row {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 440px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 6px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-bottom: 0 !important;
    min-height: 20px !important;
    padding: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 6px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .ff-manifest-wb-entry-option,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .col-sm-2.ff-manifest-wb-entry-option {
    flex: 0 0 auto !important;
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

/* Generate Manifest: keep the bottom grid contained and give it enough vertical room. */
body.ff-app .ff-generate-manifest .ff-manifest-grid-row {
    margin-top: 6px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel {
    margin-bottom: 0 !important;
    overflow: visible !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel .panel-heading {
    padding-bottom: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel .panel-body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

body.ff-app .ff-generate-manifest .ff-grid-toolbar-row {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-grid-result-row,
body.ff-app .ff-generate-manifest .ff-grid-result-row > .col-md-12 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-manifest #gridContainer {
    height: clamp(320px, calc(100vh - 335px), 680px) !important;
    min-height: 320px !important;
    overflow: hidden !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-datagrid-rowsview {
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-command-select,
body.ff-app .ff-generate-manifest #gridContainer .dx-command-select > td,
body.ff-app .ff-generate-manifest #gridContainer .dx-command-select > tr > td {
    max-width: 30px !important;
    min-width: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 30px !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-command-select .dx-checkbox,
body.ff-app .ff-generate-manifest #gridContainer .dx-command-select .dx-checkbox-container {
    display: inline-flex !important;
    height: 18px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: 18px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-command-col,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-command-col > td,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-command-col > tr > td {
    max-width: 34px !important;
    min-width: 34px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 34px !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-dropdownbutton,
body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-button {
    height: 20px !important;
    min-height: 20px !important;
    width: 24px !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-button-content {
    justify-content: center !important;
    padding: 0 !important;
}

body.ff-app .ff-generate-manifest #gridContainer .ff-manifest-row-actions .dx-button-text {
    display: none !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-footer-row {
    clear: both !important;
    margin: 8px 0 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-footer-action-group {
    position: static !important;
}

/* Generate Manifest filters: page-scoped wrapping so hub/list fields can use spare row space. */
body.ff-app .ff-generate-manifest .ff-sr-card {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 3px !important;
}

body.ff-app .ff-generate-manifest .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-generate-manifest .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-generate-manifest .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-generate-manifest .ff-sr-card > .ff-filter-flow-row {
    display: contents !important;
}

body.ff-app .ff-generate-manifest .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-generate-manifest .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-generate-manifest .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field,
body.ff-app .ff-generate-manifest .ff-filter-field .form-group {
    align-self: flex-start !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field .ff-control,
body.ff-app .ff-generate-manifest .ff-filter-field .form-control,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-container,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-generate-manifest .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-generate-manifest .ff-filter-field .ff-dx,
body.ff-app .ff-generate-manifest .ff-filter-field .dx-widget,
body.ff-app .ff-generate-manifest .ff-filter-field .dx-texteditor {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field label {
    line-height: 16px !important;
    margin: 0 0 1px !important;
    min-height: 16px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-filter-id {
    flex: 1 1 255px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-date-type {
    flex: 0 1 150px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-date-period {
    flex: 0 1 155px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-date-range {
    flex: 0 1 292px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-branch,
body.ff-app .ff-generate-manifest .ff-filter-client,
body.ff-app .ff-generate-manifest .ff-filter-agent,
body.ff-app .ff-generate-manifest .ff-filter-driver,
body.ff-app .ff-generate-manifest .ff-filter-vehicle {
    flex: 1 1 240px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-acc,
body.ff-app .ff-generate-manifest .ff-filter-internal-id,
body.ff-app .ff-generate-manifest .ff-filter-receiver-acc {
    flex: 0 1 112px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-ref,
body.ff-app .ff-generate-manifest .ff-filter-order,
body.ff-app .ff-generate-manifest .ff-filter-manifest-no,
body.ff-app .ff-generate-manifest .ff-filter-courier,
body.ff-app .ff-generate-manifest .ff-filter-invoice,
body.ff-app .ff-generate-manifest .ff-filter-parcel-desc {
    flex: 0 1 165px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-schedule,
body.ff-app .ff-generate-manifest .ff-filter-origin-hub,
body.ff-app .ff-generate-manifest .ff-filter-destination-hub,
body.ff-app .ff-generate-manifest .ff-filter-town,
body.ff-app .ff-generate-manifest .ff-filter-route,
body.ff-app .ff-generate-manifest .ff-filter-service,
body.ff-app .ff-generate-manifest .ff-filter-party,
body.ff-app .ff-generate-manifest .ff-filter-box,
body.ff-app .ff-generate-manifest .ff-filter-capture-method,
body.ff-app .ff-generate-manifest .ff-filter-user {
    flex: 1 1 210px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-pc-kgs-group,
body.ff-app .ff-generate-manifest .ff-filter-extra-group {
    flex: 0 1 auto !important;
}

body.ff-app .ff-generate-manifest .ff-filter-inline-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 6px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 64px !important;
    max-width: 76px !important;
    min-width: 58px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-generate-manifest .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 78px !important;
    max-width: 92px !important;
    min-width: 70px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-bool-group select.form-control {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .checkbox,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .checkbox label {
    line-height: 18px !important;
    margin-right: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-option .clip-check input[type="checkbox"]:checked + label:after {
    left: 2px !important;
}

/* uib-datepicker popup */
body.ff-app .uib-datepicker-popup.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}




/* =========================================================
   SHARED ISLAND: Form Pages
   Add: .ff-formpage to any page wrapper that should look modern
========================================================= */

body.ff-app .ff-formpage fieldset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 14px 10px;
    margin-bottom: 14px;
}

body.ff-app .ff-formpage legend {
    width: auto;
    padding: 0 8px;
    margin-bottom: 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bootstrap inputs */
body.ff-app .ff-formpage .form-control,
body.ff-app .ff-formpage select.form-control,
body.ff-app .ff-formpage textarea.form-control {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .ff-formpage .form-control::placeholder {
        color: var(--text-muted) !important;
    }

    body.ff-app .ff-formpage .form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        outline: none !important;
    }

body.ff-app .ff-formpage #page-title {
    background: transparent !important;
}

body.ff-app .ff-formpage .container-fullw.bg-white {
    background: transparent !important;
}
/* =========================================================
   SHARED: legacy panel-heading tabs -> modern button strip
========================================================= */
body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
}

    body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li {
        padding-top: 0 !important;
    }

        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > a,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > button,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

    /* beats inline color:#333 !important */
    body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle {
        color: var(--text) !important;
    }

        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > a:hover,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs > li > button:hover,
        body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .btn-group > a.dropdown-toggle:hover {
            background: var(--surface-2) !important;
            border-color: var(--primary-hover) !important;
        }

    body.ff-app .ff-toolbar-legacy .panel-heading .panel-heading-tabs .values p {
        margin: 0 !important;
        line-height: 1.1;
    }

/* =========================================================
   SHARED ISLAND: Form Pages
   Add: .ff-formpage to any page wrapper that should look modern
========================================================= */

/* =========================================================
   SHARED: Wizard / Stepper (1-2-3-4)
   Add: .ff-wizard on the page wrapper
========================================================= */

/* ---------- A) SmartWizard / ClipTwo style (very common) ---------- */
body.ff-app .ff-wizard .swMain,
body.ff-app .ff-wizard .swMain .stepContainer {
    background: transparent !important;
}

    /* the step strip container */
    body.ff-app .ff-wizard .swMain ul.anchor,
    body.ff-app .ff-wizard ul.anchor {
        list-style: none !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }

        /* each step link */
        body.ff-app .ff-wizard .swMain ul.anchor li a,
        body.ff-app .ff-wizard ul.anchor li a {
            display: inline-flex !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 10px 12px !important;
            border-radius: var(--radius-sm) !important;
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            text-decoration: none !important;
            box-shadow: none !important;
        }

            /* number bubble (often .stepNumber) */
            body.ff-app .ff-wizard .swMain ul.anchor li a .stepNumber,
            body.ff-app .ff-wizard ul.anchor li a .stepNumber {
                width: 26px !important;
                height: 26px !important;
                border-radius: 999px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                border: 1px solid var(--border) !important;
                background: var(--surface-2) !important;
                color: var(--text) !important;
                font-weight: 700 !important;
            }

            /* selected/current step */
            body.ff-app .ff-wizard .swMain ul.anchor li a.selected,
            body.ff-app .ff-wizard ul.anchor li a.selected {
                border-color: var(--primary) !important;
                background: var(--nav-active-bg) !important;
            }

                body.ff-app .ff-wizard .swMain ul.anchor li a.selected .stepNumber,
                body.ff-app .ff-wizard ul.anchor li a.selected .stepNumber {
                    background: var(--primary) !important;
                    border-color: var(--primary) !important;
                    color: var(--on-primary) !important;
                }

            /* done step */
            body.ff-app .ff-wizard .swMain ul.anchor li a.done,
            body.ff-app .ff-wizard ul.anchor li a.done {
                border-color: rgba(82,196,26,0.45) !important;
            }

                body.ff-app .ff-wizard .swMain ul.anchor li a.done .stepNumber,
                body.ff-app .ff-wizard ul.anchor li a.done .stepNumber {
                    background: rgba(82,196,26,0.18) !important;
                    border-color: rgba(82,196,26,0.45) !important;
                }

            /* disabled/future step */
            body.ff-app .ff-wizard .swMain ul.anchor li a.disabled,
            body.ff-app .ff-wizard ul.anchor li a.disabled {
                opacity: 0.6 !important;
                cursor: not-allowed !important;
            }

/* ---------- B) If your “steps” are Bootstrap nav-pills ---------- */
body.ff-app .ff-wizard .nav.nav-pills {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
    margin-bottom: 12px !important;
}

    body.ff-app .ff-wizard .nav.nav-pills > li > a {
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        border-radius: var(--radius-sm) !important;
    }

    body.ff-app .ff-wizard .nav.nav-pills > li.active > a,
    body.ff-app .ff-wizard .nav.nav-pills > li.active > a:hover,
    body.ff-app .ff-wizard .nav.nav-pills > li.active > a:focus {
        border-color: var(--primary) !important;
        background: var(--nav-active-bg) !important;
        color: var(--text) !important;
    }
body.ff-app .ff-formpage .badge-warning {
    white-space: normal;
    display: inline-block;
    word-wrap: break-word;
    max-width: 100%;
}

/* --- Wizard step bar (1-2-3-4) BACKPLATE --- */
body.ff-app #wizard.swMain > ul{
  background: var(--surface) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 8px !important;
}

/* Dark theme override */
body.ff-app[data-theme="dark"] #wizard.swMain > ul{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Make sure the individual step links aren’t painting white */
body.ff-app #wizard.swMain > ul > li > a{
  background: transparent !important;
  box-shadow: none !important;
}

/* Optional: nicer step circles */
body.ff-app #wizard.swMain > ul > li > a .stepNumber{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
}
body.ff-app[data-theme="dark"] #wizard.swMain > ul > li > a .stepNumber{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}


/* =========================================================
   UI Bootstrap Datepicker (uib-datepicker-popup) — token driven
   Put this at the END of the file.
========================================================= */

/* Popup shell */
body.ff-app .uib-datepicker-popup.dropdown-menu {
    padding: 10px 10px 8px !important;
    min-width: auto !important;
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
}

/* Kill any “table defaults” that paint white */
body.ff-app .uib-datepicker-popup .uib-daypicker,
body.ff-app .uib-datepicker-popup table,
body.ff-app .uib-datepicker-popup thead,
body.ff-app .uib-datepicker-popup tbody,
body.ff-app .uib-datepicker-popup tr,
body.ff-app .uib-datepicker-popup th,
body.ff-app .uib-datepicker-popup td {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

    /* Header strip (month + arrows) */
    body.ff-app .uib-datepicker-popup .uib-daypicker table thead tr:first-child th {
        padding-bottom: 6px !important;
    }

body.ff-app .uib-datepicker-popup .uib-title,
body.ff-app .uib-datepicker-popup .uib-left,
body.ff-app .uib-datepicker-popup .uib-right {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--text) !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .uib-datepicker-popup .uib-title strong {
        color: var(--text) !important;
        font-weight: 700 !important;
    }

    body.ff-app .uib-datepicker-popup .uib-title:hover,
    body.ff-app .uib-datepicker-popup .uib-left:hover,
    body.ff-app .uib-datepicker-popup .uib-right:hover {
        background: var(--surface-2) !important;
        background-color: var(--surface-2) !important;
    }

/* Day-of-week labels */
body.ff-app .uib-datepicker-popup small {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

/* Cells spacing */
body.ff-app .uib-datepicker-popup th,
body.ff-app .uib-datepicker-popup td {
    padding: 2px !important;
}

/* Day buttons: make btn-default not “white” */
body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-default {
    width: 32px !important;
    height: 28px !important;
    padding: 0 !important;
    line-height: 28px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-default:hover:not(:disabled) {
        background: var(--surface-2) !important;
        background-color: var(--surface-2) !important;
        border-color: var(--border) !important;
    }

    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-default:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* Secondary month days (the ones with .text-muted) */
body.ff-app .uib-datepicker-popup .uib-day .text-muted {
    color: var(--text-disabled) !important;
}

/* “Today” marker (uib uses .text-info on the span) */
body.ff-app .uib-datepicker-popup .uib-day .text-info {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Selected day: uib uses btn-info + active; force correct contrast,
   and FIX the span that still has .text-info (blue-on-blue bug) */
body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info,
body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info.active {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info span,
    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info.active span,
    body.ff-app .uib-datepicker-popup .uib-day button.btn.btn-info .text-info {
        color: var(--on-primary) !important; /* key: beats .text-info */
    }

/* Disabled days */
body.ff-app .uib-datepicker-popup .uib-day button.btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Week numbers (if showWeeks=true) */
body.ff-app .uib-datepicker-popup td.h6,
body.ff-app .uib-datepicker-popup td.h6 em {
    color: var(--text-muted) !important;
}

/* Button bar */
body.ff-app .uib-datepicker-popup .uib-button-bar {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--divider) !important;
    background: transparent !important;
}

    body.ff-app .uib-datepicker-popup .uib-button-bar .btn {
        border-radius: var(--radius-sm) !important;
        box-shadow: none !important;
    }

    /* Map bootstrap semantic btn colors to your tokens (optional but consistent) */
    body.ff-app .uib-datepicker-popup .uib-button-bar .btn-info {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
    }

    body.ff-app .uib-datepicker-popup .uib-button-bar .btn-danger {
        background: var(--error) !important;
        border-color: var(--error) !important;
        color: #fff !important;
    }

    body.ff-app .uib-datepicker-popup .uib-button-bar .btn-success {
        background: var(--success) !important;
        border-color: var(--success) !important;
        color: #fff !important;
    }


/* =========================================================
   ISLAND: Anonymous Tracking (Public / External Tracking)
   Put at END of file.
========================================================= */

body.ff-app .ff-anon-container {
    padding: 0 50px;
}

@media (max-width: 992px) {
    body.ff-app .ff-anon-container {
        padding: 0 16px;
    }
}

/* Make panels behave like ff-cards on this page */
body.ff-app .ff-anon-tracking .panel {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden;
}

body.ff-app .ff-anon-tracking .panel-heading {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border) !important;
}

body.ff-app .ff-anon-tracking .panel-title {
    color: var(--text) !important;
}

/* Tabs (uib-tabset renders Bootstrap nav-tabs) */
body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 0 !important;
}

    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li > a {
        border: 1px solid transparent !important;
        color: var(--text) !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    }

        body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li > a:hover {
            background: var(--surface-2) !important;
            color: var(--text) !important;
            border-color: var(--border) var(--border) transparent !important;
        }

    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li.active > a,
    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li.active > a:hover,
    body.ff-app .ff-anon-tracking .ff-tabs .nav-tabs > li.active > a:focus {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--border) var(--border) transparent !important;
    }

/* Tab content plate */
body.ff-app .ff-anon-tracking .ff-tabs .tab-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    padding: 14px;
}

/* Tables in dark mode */
body.ff-app .ff-anon-tracking .table {
    color: var(--text) !important;
}

    body.ff-app .ff-anon-tracking .table > tbody > tr > td {
        border-top: 1px solid var(--divider) !important;
    }

body.ff-app .ff-anon-tracking .trackingInfoLabelTD {
    color: var(--text-muted) !important;
    font-weight: 600;
    width: 140px;
}

/* Misc */
body.ff-app .ff-anon-tracking .shipmentheader {
    margin: 10px 0 6px;
    color: var(--text) !important;
    font-weight: 700;
}

body.ff-app .ff-anon-tracking .ff-inline-muted {
    color: var(--text) !important;
    font-weight: 700;
}

/* Make iframe responsive (override old width=800 usage) */
body.ff-app .ff-anon-tracking #iframepdf {
    width: 100% !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

/* =========================================================
   SIDEBAR FLYOUT + SUBMENU (FINAL OVERRIDE)
   - Fix flyout header not taking blue
   - Fix flyout panel looking transparent
   - Ensure active item highlighting is obvious
   Put at VERY END after theme-purple.css
========================================================= */

/* Helper: match BOTH possible placements of .app-sidebar-closed */
body.ff-app .app-sidebar-closed .app-aside,
body.ff-app #app.app-sidebar-closed .app-aside {
    z-index: 40000 !important;
}

    /* =========================================================
   A) CLONED FLYOUT HEADER (the "Finance" bar)
   This is a cloned .item-inner appended directly under .app-aside.
   Theme-purple often paints overlays via ::before/::after — we kill those.
========================================================= */

    body.ff-app .app-sidebar-closed .app-aside > .item-inner,
    body.ff-app #app.app-sidebar-closed .app-aside > .item-inner {
        /* Make it clearly “section header” blue */
        background: var(--nav-active-bg) !important;
        background-color: var(--nav-active-bg) !important;
        background-image: none !important;
        border: 1px solid var(--nav-active-border) !important;
        border-left: 4px solid var(--nav-active) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-1) !important;
        opacity: 1 !important;
        filter: none !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        z-index: 40001 !important;
    }

        /* Force header text/icon colors (theme-purple often targets .title specifically) */
        body.ff-app .app-sidebar-closed .app-aside > .item-inner,
        body.ff-app .app-sidebar-closed .app-aside > .item-inner *,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner * {
            color: var(--nav-active-text) !important;
        }

            /* Kill any overlay wedges/gradients/pseudo-painting on the header */
            body.ff-app .app-sidebar-closed .app-aside > .item-inner::before,
            body.ff-app .app-sidebar-closed .app-aside > .item-inner::after,
            body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::before,
            body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::after {
                content: none !important;
                background: none !important;
                border: 0 !important;
                box-shadow: none !important;
            }

    /* =========================================================
   B) CLONED FLYOUT PANEL (the UL appended to .app-aside)
========================================================= */

    body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu,
    body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu {
        /* Solid panel (no wash-out) */
        background: var(--nav-bg) !important;
        background-color: var(--nav-bg) !important;
        background-image: none !important;
        border: 1px solid var(--nav-border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
        opacity: 1 !important; /* <- fixes the “transparent” look */
        filter: none !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        max-height: calc(100vh - 12px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 40001 !important;
    }

        /* Kill any pseudo painting on the popup UL too */
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu::before,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu::after,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu::before,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu::after {
            content: none !important;
            background: none !important;
            border: 0 !important;
        }

        /* Rows / links */
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a {
            display: block !important;
            background: transparent !important;
            background-image: none !important;
            color: var(--nav-text) !important;
            padding: 10px 12px !important;
            margin: 0 !important;
            border: 0 !important;
            border-bottom: 1px solid var(--nav-border) !important;
            text-decoration: none !important;
            opacity: 1 !important;
        }

            /* Ensure link descendants are readable */
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a *,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a * {
                color: inherit !important;
            }

        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:last-child > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:last-child > a {
            border-bottom: 0 !important;
        }

        /* Hover */
        html.no-touch body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
        html.no-touch body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a {
            background: var(--nav-bg-2) !important;
            background-color: var(--nav-bg-2) !important;
            color: var(--nav-text) !important;
        }

        /* Active/current row (supports legacy patterns) */
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
        body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a.active,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
        body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a.active {
            background: var(--nav-active-bg) !important;
            background-color: var(--nav-active-bg) !important;
            color: var(--nav-active-text) !important;
            border-left: 4px solid var(--nav-active) !important;
            margin: 0 !important;
            border-radius: var(--radius-sm) !important;
            padding-left: 4px !important;
            font-weight: normal;
        }

            /* Don’t let hover override the active state */
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a:hover,
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a:hover,
            body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a.active:hover,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active > a:hover,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a:hover,
            body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a.active:hover {
                background: var(--nav-active-bg) !important;
                background-color: var(--nav-active-bg) !important;
                color: var(--nav-active-text) !important;
            }

/* =========================================================
   C) NORMAL (NON-CLONED) SUBMENUS (sidebar open)
========================================================= */

body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu {
    background: transparent !important;
}

    body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a {
        background: transparent !important;
        color: var(--nav-text-muted) !important;
        text-decoration: none !important;
    }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a:hover {
            background: var(--nav-bg-2) !important;
            color: var(--nav-text) !important;
        }

        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.active-state > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li.open > a,
        body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li > a.active {
            background: var(--nav-active-bg) !important;
            color: var(--nav-active-text) !important;
            border-left: 4px solid var(--nav-active) !important;
        }

/* =========================================================
   Flyout (collapsed sidebar hover) — make the title/header SOLID
   The title is the cloned .item-inner appended directly under .app-aside
========================================================= */

body.ff-app .app-sidebar-closed .app-aside > .item-inner,
body.ff-app #app.app-sidebar-closed .app-aside > .item-inner {
    /* solid blue instead of rgba(--nav-active-bg) */
    background: var(--nav-active) !important;
    background-color: var(--nav-active) !important;
    background-image: none !important;
    border-color: var(--nav-active) !important;
    border-left-color: var(--nav-active) !important;
    opacity: 1 !important;
}

    /* force header text/icons readable on solid blue */
    body.ff-app .app-sidebar-closed .app-aside > .item-inner,
    body.ff-app .app-sidebar-closed .app-aside > .item-inner *,
    body.ff-app #app.app-sidebar-closed .app-aside > .item-inner,
    body.ff-app #app.app-sidebar-closed .app-aside > .item-inner * {
        color: #fff !important;
    }

        /* kill any theme pseudo overlays that can “wash out” the header */
        body.ff-app .app-sidebar-closed .app-aside > .item-inner::before,
        body.ff-app .app-sidebar-closed .app-aside > .item-inner::after,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::before,
        body.ff-app #app.app-sidebar-closed .app-aside > .item-inner::after {
            content: none !important;
            background: none !important;
            border: 0 !important;
        }


/* =========================================================
   1) ICON ALIGNMENT (expanded + collapsed)
   The old look is basically: fixed media box + centered icon + line-height reset
========================================================= */

/* Make the icon box behave consistently */
body.ff-app #sidebar nav .item-content {
    display: flex !important;
    align-items: center !important;
}

body.ff-app #sidebar nav .item-media {
    flex: 0 0 44px !important; /* fixed box */
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    body.ff-app #sidebar nav .item-media i {
        display: block !important;
        line-height: 1 !important; /* kills vertical drift */
        position: static !important; /* beats any legacy top/relative tweaks */
    }

        /* If any legacy CSS added padding to the <i> itself, neutralize it */
        body.ff-app #sidebar nav .item-media i::before {
            line-height: 1 !important;
        }

/* =========================================================
   2) COLLAPSED SIDEBAR (icon-only) — restore old centering
========================================================= */

body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a,
body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important; /* matches the “old” hard edge */
    height: 56px !important; /* old look: equal rows */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    /* Center the icon row content */
    body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-content,
    body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-content {
        width: 100% !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    /* Hide text container in collapsed mode (prevents accidental offset) */
    body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-inner,
    body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li > a .item-inner {
        display: none !important;
    }

/* Active icon tile in collapsed mode (solid + obvious) */
body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a,
body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a {
    background: var(--nav-active) !important; /* solid */
    border: 0 !important;
}

    body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i,
    body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i {
        color: var(--ff-flyout-header-text) !important;
    }

/* =========================================================
   PATCH (paste at END): Ignore Date checkbox + number spinners
========================================================= */

/* 1) Make native controls follow the CURRENT theme (fixes dark grey spinners/checkboxes) */
body.ff-app {
    color-scheme: light !important;
}

    body.ff-app[data-theme="dark"] {
        color-scheme: dark !important;
    }

    /* 2) Date filter addon surface (stops the addon from looking like a legacy grey block) */
    body.ff-app .input-group-addon.input-group-addon-grey.input-group-addon-less-padding {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--border) !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    /* 3) "Ignore" checkbox (id="ignoreDate") — styled without changing HTML */
    body.ff-app #ignoreDate {
        /* visually hide native checkbox but keep it accessible */
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

        body.ff-app #ignoreDate + label {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            margin: 0 !important;
            min-height: 32px !important;
            height: 32px !important;
            padding: 0 8px 0 28px !important;
            border-radius: var(--radius-sm) !important;
            cursor: pointer !important;
            position: relative !important;
            user-select: none !important;
            color: var(--text) !important;
            white-space: nowrap !important;
        }

            /* box */
            body.ff-app #ignoreDate + label::before {
                content: "" !important;
                width: 16px !important;
                height: 16px !important;
                border-radius: 4px !important;
                border: 1px solid var(--border) !important;
                background: var(--surface) !important;
                box-shadow: none !important;
                left: 8px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
            }

            /* checkmark */
            body.ff-app #ignoreDate + label::after {
                content: "" !important;
                width: 8px !important;
                height: 4px !important;
                border-left: 2px solid transparent !important;
                border-bottom: 2px solid transparent !important;
                left: 12px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-70%) rotate(-45deg) !important;
            }

        /* checked state */
        body.ff-app #ignoreDate:checked + label::before {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
        }

        body.ff-app #ignoreDate:checked + label::after {
            border-left-color: var(--on-primary) !important;
            border-bottom-color: var(--on-primary) !important;
        }

        /* hover/focus */
        body.ff-app #ignoreDate + label:hover {
            background: var(--surface-2) !important;
        }

        body.ff-app #ignoreDate:focus-visible + label::before {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

    /* Date Period filter: keep the Ignore segment and period select on the same baseline. */
    body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) {
        display: flex !important;
        align-items: stretch !important;
        width: 100%;
        max-width: 230px;
    }

        body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) > .input-group-addon.input-group-addon-grey.input-group-addon-less-padding {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 76px;
            width: 76px !important;
            min-width: 76px !important;
            height: 34px !important;
            min-height: 34px !important;
            box-sizing: border-box !important;
            line-height: 1 !important;
            vertical-align: middle !important;
        }

            body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) > .input-group-addon.input-group-addon-grey.input-group-addon-less-padding #ignoreDate + label {
                width: 100% !important;
                min-width: 100% !important;
            }

        body.ff-app .input-group:has(> .input-group-addon.input-group-addon-grey.input-group-addon-less-padding + select.form-control) > select.form-control {
            flex: 1 1 auto;
            width: auto !important;
            min-width: 0;
            height: 34px !important;
            min-height: 34px !important;
            line-height: 20px !important;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
        }

    /* Compact reusable filter panels: keep filter controls and grid toolbars dense. */
    body.ff-app .ff-filter-panel fieldset {
        padding-bottom: 8px !important;
    }

        body.ff-app .ff-filter-panel fieldset > .row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 6px 10px;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 6px;
        }

            body.ff-app .ff-filter-panel fieldset > .row::before,
            body.ff-app .ff-filter-panel fieldset > .row::after {
                content: none;
                display: none;
            }

            body.ff-app .ff-filter-panel fieldset > .row > [class*="col-"] {
                float: none;
                min-width: 0;
                padding-left: 0;
                padding-right: 0;
                width: auto;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-1 {
                flex: 0 1 82px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-2 {
                flex: 0 1 165px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-3 {
                flex: 0 1 220px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-4 {
                flex: 1 1 275px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-8 {
                flex: 2 1 520px;
            }

            body.ff-app .ff-filter-panel fieldset > .row > .col-md-12 {
                flex: 1 1 100%;
            }

        body.ff-app .ff-filter-panel textarea.form-control,
        body.ff-app .ff-filter-panel textarea.autoExpand,
        body.ff-app .ff-page fieldset:has(input[ng-model="filtermodel.KeepFilterOpen"]) textarea.form-control,
        body.ff-app .ff-page fieldset:has(input[ng-model="filtermodel.KeepFilterOpen"]) textarea.autoExpand,
        body.ff-app .ff-page .accordion-no-display fieldset textarea.form-control,
        body.ff-app .ff-page .accordion-no-display fieldset textarea.autoExpand {
            height: var(--ff-control-h) !important;
            min-height: var(--ff-control-h) !important;
            max-height: var(--ff-control-h) !important;
            overflow-y: auto;
            resize: none;
        }

        body.ff-app .ff-filter-panel .ff-filter-final-row {
            align-items: flex-end;
            margin-bottom: 0;
        }

            body.ff-app .ff-filter-panel .ff-filter-final-row > .ff-filter-area-from,
            body.ff-app .ff-filter-panel .ff-filter-final-row > .ff-filter-area-to {
                flex: 0 1 145px;
            }

            body.ff-app .ff-filter-panel .ff-filter-final-row > .ff-filter-footer-actions {
                flex: 1 1 360px;
            }

        body.ff-app .ff-filter-panel .ff-filter-footer-actions-inner {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            min-height: var(--ff-control-h);
        }

            body.ff-app .ff-filter-panel .ff-filter-footer-actions-inner .checkbox,
            body.ff-app .ff-filter-panel .ff-filter-footer-actions-inner .btn {
                margin: 0 !important;
            }

    body.ff-app .ff-grid-toolbar-row {
        margin-top: 0;
        margin-bottom: 4px;
    }

    body.ff-app .ff-grid-toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

        body.ff-app .ff-grid-toolbar > .label,
        body.ff-app .ff-grid-toolbar > .badge,
        body.ff-app .ff-grid-toolbar > .valuesonly,
        body.ff-app .ff-grid-toolbar > .checkbox-inline {
            margin: 0 !important;
        }

    body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) {
        margin-top: 0;
        margin-bottom: 0;
    }

        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) > .col-md-12 {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px 10px;
            min-height: var(--ff-control-h);
            padding-left: 0;
            padding-right: 0;
        }

        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) .pull-right {
            float: none !important;
        }

        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) .checkbox,
        body.ff-app .ff-page fieldset > .row:has(input[ng-model="filtermodel.KeepFilterOpen"]) .btn {
            margin: 0 !important;
        }

    /* Tariff filters: keep Effective Date compact and stop it overlapping the Ignore checkbox. */
    body.ff-app .ff-tariff-effective-date {
        width: 235px !important;
        min-width: 235px;
        max-width: 235px;
    }

        body.ff-app .ff-tariff-effective-date .ff-tariff-date-group {
            display: flex !important;
            align-items: stretch !important;
            width: 204px !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

            body.ff-app .ff-tariff-effective-date .ff-tariff-date-group > .input-group-addon {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 0 0 76px !important;
                width: 76px !important;
                min-width: 76px !important;
                height: 34px !important;
                min-height: 34px !important;
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                box-sizing: border-box !important;
            }

            body.ff-app .ff-tariff-effective-date .ff-tariff-date-group > .ff-tariff-date-icon {
                flex: 0 0 127px !important;
                width: 127px !important;
                min-width: 0 !important;
                max-width: 127px !important;
                display: block !important;
                margin-left: 1px !important;
            }

    body.ff-app #filterIgnoreDate {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

        body.ff-app #filterIgnoreDate + label {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            width: 100% !important;
            min-height: 32px !important;
            height: 32px !important;
            margin: 0 !important;
            padding: 0 6px 0 28px !important;
            border-radius: var(--radius-sm) !important;
            cursor: pointer !important;
            position: relative !important;
            user-select: none !important;
            color: var(--text) !important;
            white-space: nowrap !important;
        }

            body.ff-app #filterIgnoreDate + label::before {
                content: "" !important;
                width: 16px !important;
                height: 16px !important;
                border-radius: 4px !important;
                border: 1px solid var(--border) !important;
                background: var(--surface) !important;
                left: 8px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
            }

            body.ff-app #filterIgnoreDate + label::after {
                content: "" !important;
                width: 8px !important;
                height: 4px !important;
                border-left: 2px solid transparent !important;
                border-bottom: 2px solid transparent !important;
                left: 12px !important;
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-70%) rotate(-45deg) !important;
            }

        body.ff-app #filterIgnoreDate:checked + label::before {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
        }

        body.ff-app #filterIgnoreDate:checked + label::after {
            border-left-color: var(--on-primary) !important;
            border-bottom-color: var(--on-primary) !important;
        }

    body.ff-app .ff-tariff-effective-date .ff-tariff-date-icon > input.form-control[uib-datepicker-popup] {
        width: 127px !important;
        min-width: 0 !important;
        max-width: 127px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding-left: 24px !important;
        padding-right: 6px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer;
    }

    body.ff-app .ff-tariff-effective-date .ff-tariff-date-icon > i.ti-calendar {
        left: 5px !important;
        top: 0 !important;
        line-height: 34px !important;
        pointer-events: none;
    }

    /* 4) Native number input spinner arrows (Waybill ID / Quote ID) */
    body.ff-app input[type="number"]::-webkit-inner-spin-button,
    body.ff-app input[type="number"]::-webkit-outer-spin-button {
        opacity: 0.65 !important;
    }

    body.ff-app[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
    body.ff-app[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
        opacity: 0.9 !important;
        filter: invert(1) brightness(1.15) !important; /* makes the arrows readable on dark surfaces */
    }


/* =========================================================
   FINAL: HISTORY TABS — STUCK TO TOP BAR (true fixed)
   - Does NOT push layout
   - Stays put while you scroll
   - No margin calcs
========================================================= */

/* Wrapper must NOT take up layout space (and must NOT be fixed) */
html body.ff-app .ff-shell div[ng-include*="partials/tab-bar.html"] {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Keep vars here (single source of truth) */
html body.ff-app {
    --ff-history-top: 6px;
    --ff-history-left-collapsed: 80px;
    --ff-history-left-open: 260px;
}

    /* The pill: MUST be fixed */
    html body.ff-app #historyTabs {
        overflow-x: auto;
          height: 43px;
        position: fixed !important;
        top: var(--ff-history-top) !important;
        left: var(--ff-history-left-collapsed) !important;
        right: 12px !important;
        z-index: 9999 !important; /* you said required */
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
        /* defensive: helps some GPU/compositing edge cases */
        transform: translateZ(0) !important;
    }

    html body.ff-app #app:not(.app-sidebar-closed) #historyTabs {
        left: var(--ff-history-left-open) !important;
    }

    html body.ff-app #app.app-sidebar-closed #historyTabs {
        left: var(--ff-history-left-collapsed) !important;
    }

@media (max-width: 992px) {
    html body.ff-app #historyTabs {
        left: 8px !important;
        right: 8px !important;
    }
}

/* =========================================================
   CRITICAL: "fixed scrolling" happens when an ancestor has transform/filter.
   Neutralize on common ClipTwo wrappers (targeted but stronger coverage).
   If you notice any side effects, keep only the selector that was transformed.
========================================================= */
/*html body.ff-app #app,
html body.ff-app .app-content,
html body.ff-app .main-content,
html body.ff-app .wrap-content,
html body.ff-app .container-fluid,
html body.ff-app .page-container,
html body.ff-app .app-aside {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}*/


/* =========================================================
   TOPBAR BANNER — "Apple-ish" frosted aurora (LIGHT + DARK)
   - darker in light mode
   - separate, tuned dark mode
   - seed-driven via color-mix()
========================================================= */

/* ---------- LIGHT THEME (default) ---------- */
body.ff-app {
    --ff-banner-seed: var(--primary);
    /* Darker, richer base in light mode */
    --ff-base-a: color-mix(in srgb, var(--ff-banner-seed) 70%, #07101f 30%);
    --ff-base-b: color-mix(in srgb, var(--ff-banner-seed) 82%, #ffffff 18%);
    /* Aurora colors */
    --ff-aurora-a: color-mix(in srgb, var(--ff-banner-seed) 72%, #ffffff 28%);
    --ff-aurora-b: color-mix(in srgb, var(--ff-banner-seed) 55%, #9bd6ff 45%);
    --ff-aurora-c: color-mix(in srgb, var(--ff-banner-seed) 45%, #c7b8ff 55%);
}

    /* Apply banner */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg,
    body.ff-app .ff-shell .ff-topnav .ff-topnav-bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: translateZ(0);
        background-color: var(--ff-base-a) !important;
        background-image:
        /* 1) sheen */
        linear-gradient(to bottom, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 55%),
        /* 2) aurora band (a touch more contrast) */
        radial-gradient(140% 120% at 18% 35%, color-mix(in srgb, var(--ff-aurora-b) 60%, transparent) 0 45%, transparent 68%), radial-gradient(120% 110% at 55% 18%, color-mix(in srgb, var(--ff-aurora-c) 52%, transparent) 0 42%, transparent 68%), radial-gradient(140% 120% at 88% 40%, color-mix(in srgb, var(--ff-aurora-a) 48%, transparent) 0 44%, transparent 72%),
        /* 3) micro grain */
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 0 1px, transparent 1.2px),
        /* 4) base */
        linear-gradient(90deg, var(--ff-base-a), var(--ff-base-b)) !important;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
        background-size: cover, cover, cover, cover, 18px 18px, cover !important;
        background-position: center, center, center, center, 0 0, center !important;
        /*position: relative;*/
    }

        /* Depth overlay */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg::before,
        body.ff-app .ff-shell .ff-topnav .ff-topnav-bg::before {
            content: "" !important;
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.26));
        }

        /* Keep content above overlays */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg > *,
        body.ff-app .ff-shell .ff-topnav .ff-topnav-bg > * {
            position: relative;
            z-index: 1;
        }

    /* ---------- DARK THEME (tuned separately) ---------- */
    body.ff-app[data-theme="dark"] {
        --ff-banner-seed: var(--primary);
        /* Much darker base, less “milky” */
        --ff-base-a: color-mix(in srgb, var(--ff-banner-seed) 38%, #05070c 62%);
        --ff-base-b: color-mix(in srgb, var(--ff-banner-seed) 46%, #0b1220 54%);
        /* Aurora shifts slightly cooler + less bright */
        --ff-aurora-a: color-mix(in srgb, var(--ff-banner-seed) 46%, #6aa8ff 54%);
        --ff-aurora-b: color-mix(in srgb, var(--ff-banner-seed) 40%, #5fb8ff 60%);
        --ff-aurora-c: color-mix(in srgb, var(--ff-banner-seed) 34%, #9b86ff 66%);
    }

        body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg,
        body.ff-app[data-theme="dark"] .ff-shell .ff-topnav .ff-topnav-bg {
            background-color: var(--ff-base-a) !important;
            background-image:
            /* subtle sheen (dimmer in dark mode) */
            linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 60%),
            /* aurora band (lower intensity, still visible) */
            radial-gradient(140% 120% at 18% 35%, color-mix(in srgb, var(--ff-aurora-b) 38%, transparent) 0 46%, transparent 72%), radial-gradient(120% 110% at 55% 18%, color-mix(in srgb, var(--ff-aurora-c) 34%, transparent) 0 44%, transparent 74%), radial-gradient(140% 120% at 88% 40%, color-mix(in srgb, var(--ff-aurora-a) 32%, transparent) 0 44%, transparent 76%),
            /* grain (even quieter) */
            radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 0 1px, transparent 1.2px),
            /* base */
            linear-gradient(90deg, var(--ff-base-a), var(--ff-base-b)) !important;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
            background-size: cover, cover, cover, cover, 20px 20px, cover !important;
            background-position: center, center, center, center, 0 0, center !important;
        }

            /* Dark mode depth overlay (stronger, cleaner) */
            body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg::before,
            body.ff-app[data-theme="dark"] .ff-shell .ff-topnav .ff-topnav-bg::before {
                background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.40));
            }




    /* LOGIN LOGO: skeleton + fade-in (prevents bland alt-text flash) */
    body.ff-app .ff-login .ff-logo {
        opacity: 0;
        transition: opacity .18s ease;
    }

    /* reserve space so layout doesn't jump */
    body.ff-app .ff-login .login-header {
        min-height: 120px; /* set to your logo height */
    }

        /* lightweight skeleton behind logo while loading */
        body.ff-app .ff-login .login-header::before {
            content: "";
            display: block;
            width: 400px; /* match your .login-banner width */
            max-width: 100%;
            height: 120px; /* match your logo area */
            border-radius: var(--radius-md);
            background: linear-gradient(90deg, color-mix(in srgb, var(--surface-2) 70%, transparent) 0%, color-mix(in srgb, var(--surface-3) 70%, transparent) 35%, color-mix(in srgb, var(--surface-2) 70%, transparent) 70% );
            background-size: 220% 100%;
            animation: ff-shimmer 1.1s linear infinite;
        }

    /* once logo loads, show it and hide skeleton */
    body.ff-app .ff-login .ff-logo.is-loaded {
        opacity: 1;
    }

    body.ff-app .ff-login .login-header:has(.ff-logo.is-loaded)::before {
        display: none;
    }

/* no motion users */
@media (prefers-reduced-motion: reduce) {
    body.ff-app .ff-login .login-header::before {
        animation: none;
    }
}

@keyframes ff-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -20% 0;
    }
}


/* =========================
   FF "Clean UI" layer (TOKENIZED)
   Drop-in replacement for your "Clean UI" CSS
   Load AFTER bootstrap + existing ff css
   ========================= */

/* No new top-level tokens required: this layer binds to your existing ones. */
body.ff-app {
    /* Bind "Clean UI" vars to your tokens */
    --ff-bg: var(--bg);
    --ff-surface: var(--surface);
    --ff-surface-2: var(--surface-2);
    --ff-border: var(--border);
    --ff-text: var(--text);
    --ff-muted: var(--text-muted);
    --ff-primary: var(--primary);
    --ff-primary-600: var(--primary-active);
    --ff-danger: var(--error);
    --ff-success: var(--success);
    --ff-warning: var(--warning);
    --ff-radius: var(--radius-md);
    --ff-radius-sm: var(--radius-sm);
    --ff-shadow: var(--shadow-1);
    --ff-shadow-sm: var(--shadow-1);
    --ff-focus-ring: var(--focus);
    --ff-hover-surface: var(--surface-2);
    /* Table header (uses nav surfaces so it looks right in light & dark) */
    --ff-table-head-bg: var(--nav-bg-2);
    --ff-table-head-text: var(--nav-text);
    /* Keep your original non-color design tokens */
    --ff-gap-1: 6px;
    --ff-gap-2: 10px;
    --ff-gap-3: 14px;
    --ff-gap-4: 18px;
    --ff-gap-5: 24px;
    --ff-control-h: 40px;
    --ff-font: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-family: var(--ff-font);
    background: var(--ff-bg);
    color: var(--ff-text);
}

/* Make the main content breathe */
#container.wrap-content.container {
    width: 100%;
    max-width: 1600px; /* adjust */
    /* padding: var(--ff-gap-5); */
}

/* Reduce “everything touches everything” feeling */
.row {
    margin-bottom: var(--ff-gap-3);
}

    .row:last-child {
        margin-bottom: 0;
    }

/* Fieldsets become clean cards */
.ff-form fieldset,
fieldset {
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    padding: var(--ff-gap-5);
    box-shadow: var(--ff-shadow-sm);
}

    /* Better legend */
    .ff-form legend,
    fieldset legend {
        width: auto;
        padding: 0 var(--ff-gap-2);
        margin: 0 0 var(--ff-gap-4) 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ff-muted);
        border: none;
    }

/* Standard form control look */
.form-control,
.ff-input {
    height: var(--ff-control-h);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    background-color: var(--ff-surface);
    color: var(--ff-text);
}

    .form-control:focus,
    .ff-input:focus {
        border-color: var(--ff-primary);
        box-shadow: 0 0 0 4px var(--ff-focus-ring);
        outline: none;
    }

/* Labels less shouty, more consistent */
.form-group > label {
    font-size: 12px;
    font-weight: 650;
    color: var(--ff-muted);
    margin-bottom: 6px;
}

/* Compact default rhythm for portal form pages. Page-specific rules can tighten further. */
body.ff-app .ff-page {
    --ff-control-h: 34px;
}

body.ff-app .ff-page:not(.ff-login) {
    font-size: var(--ff-page-font-size, 12px);
}

body.ff-app .ff-page:not(.ff-login) .form-control,
body.ff-app .ff-page:not(.ff-login) .ff-input,
body.ff-app .ff-page:not(.ff-login) .btn,
body.ff-app .ff-page:not(.ff-login) label,
body.ff-app .ff-page:not(.ff-login) .control-label,
body.ff-app .ff-page:not(.ff-login) .checkbox,
body.ff-app .ff-page:not(.ff-login) .radio,
body.ff-app .ff-page:not(.ff-login) .ui-select-container,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .btn,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .ui-select-match-text,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .ui-select-container .ui-select-search,
body.ff-app .ff-page:not(.ff-login) .dx-widget,
body.ff-app .ff-page:not(.ff-login) .dx-texteditor-input {
    font-size: var(--ff-control-font-size, 12px);
}

body.ff-app .ff-page .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-page .form-group > label {
    margin-bottom: 2px;
    line-height: 1.2;
}

body.ff-app .ff-page textarea.form-control,
body.ff-app .ff-page textarea.ff-input {
    height: auto;
    min-height: 68px;
}

body.ff-app .ff-page fieldset {
    padding: 8px 12px 10px !important;
    margin-bottom: 8px !important;
}

body.ff-app:not([data-theme="dark"]) .ff-page fieldset:has([ng-model^="filtermodel."]),
body.ff-app:not([data-theme="dark"]) .ff-filter-panel fieldset {
    background: var(--surface-2) !important;
}

body.ff-app .ff-page fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

body.ff-app .ff-page .row {
    margin-bottom: 4px;
}

body.ff-app .ff-page .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-page .panel-body,
body.ff-app .ff-page .panel-body .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-page .row.padding-10 {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

body.ff-app .ff-page .row.padding-bottom-30,
body.ff-app .ff-page .padding-bottom-30 {
    padding-bottom: 12px !important;
}

body.ff-app .ff-page .row.padding-bottom-20,
body.ff-app .ff-page .padding-bottom-20 {
    padding-bottom: 8px !important;
}

body.ff-app .ff-page .padding-top-30 {
    padding-top: 12px !important;
}

body.ff-app .ff-page .padding-top-20 {
    padding-top: 8px !important;
}

body.ff-app .ff-page .checkbox.clip-check,
body.ff-app .ff-page .radio.clip-radio {
    margin-top: 2px;
    margin-bottom: 2px;
}

body.ff-app .clip-check label:after {
    left: 3px !important;
    top: 1px !important;
    line-height: 20px !important;
    text-align: center;
}

body.ff-app .clip-check.check-sm label:after {
    left: 1px !important;
    top: 4px !important;
    line-height: 14px !important;
}

body.ff-app .clip-check.check-md label:after {
    left: 4px !important;
    top: 1px !important;
    line-height: 25px !important;
}

body.ff-app .clip-check.check-lg label:after {
    left: 5px !important;
    top: 1px !important;
    line-height: 30px !important;
}

body.ff-app .ff-page .table.table-condensed > thead > tr > th,
body.ff-app .ff-page .table.table-condensed > thead > tr > td,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > thead > tr > th,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > thead > tr > td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.2 !important;
}

body.ff-app .ff-page .table.table-condensed > tbody > tr > th,
body.ff-app .ff-page .table.table-condensed > tbody > tr > td,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tbody > tr > th,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tbody > tr > td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.25 !important;
}

body.ff-app .ff-page .table.table-condensed > tfoot > tr > th,
body.ff-app .ff-page .table.table-condensed > tfoot > tr > td,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tfoot > tr > th,
body.ff-app .ff-page table.custom-dx-table:not(.ff-parcel-grid) > tfoot > tr > td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.2 !important;
}

body.ff-app .ff-page .dx-datagrid-headers .dx-header-row > td,
body.ff-app .ff-page .dx-datagrid-rowsview .dx-row > td,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-row > td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.2 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-row {
    min-height: var(--ff-grid-row-height);
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid-rowsview .dx-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid-total-footer .dx-row > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.15 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-row {
    min-height: var(--ff-grid-row-height) !important;
}

/* ui-select (Bootstrap theme) - match height */
.ui-select-container .btn.form-control.ui-select-toggle,
.ui-select-container .btn.form-control {
    height: var(--ff-control-h);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    box-shadow: none;
    background: var(--ff-surface);
    color: var(--ff-text);
    text-align: left;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .btn {
    justify-content: flex-start !important;
    text-align: left !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text span {
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text {
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-placeholder {
    display: none !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}

/* Placeholder color */
.ui-select-placeholder,
.form-control::placeholder {
    color: var(--ff-muted);
    opacity: .75;
}

/* Validation states */
.has-error .form-control {
    border-color: var(--ff-danger);
}

.has-success .form-control {
    border-color: var(--ff-success);
}

.has-warning .form-control {
    border-color: var(--ff-warning);
}

.has-error .error,
.has-error .help-block {
    color: var(--ff-danger);
}

.has-success .help-block {
    color: var(--ff-success);
}

.has-warning .help-block {
    color: var(--ff-warning);
}

.ff-toolbar {
    display: flex;
    gap: var(--ff-gap-2);
    align-items: center;
}

.ff-action {
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--ff-border);
    background: var(--ff-surface);
    padding: 0 14px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--ff-text);
    box-shadow: none;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

    .ff-action:hover {
        border-color: var(--ps-thumb); /* already a theme-aware alpha color */
        background: var(--ff-hover-surface);
        box-shadow: var(--ff-shadow-sm);
        transform: translateY(-1px);
    }

.ff-action-primary {
    background: var(--ff-primary);
    border-color: var(--ff-primary);
    color: var(--on-primary);
}

    .ff-action-primary:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

.ff-action .ff-action-label {
    font-weight: 650;
    font-size: 12px;
}

.ff-historybar-wrap {
    background: transparent;
    padding: 8px 0;
}

#historyTabs .nav.nav-tabs {
    border-bottom: 0;
    display: flex;
    gap: 8px;
    padding: 0 10px;
}

    #historyTabs .nav.nav-tabs > li > a {
        border: 1px solid var(--ff-border);
        border-radius: 999px;
        background: var(--ff-surface);
        color: var(--ff-text);
        padding: 8px 12px;
        line-height: 1;
    }

        #historyTabs .nav.nav-tabs > li.active > a,
        #historyTabs .nav.nav-tabs > li > a:hover {
            border-color: var(--ff-primary);
            box-shadow: 0 0 0 4px var(--ff-focus-ring);
        }

.tab-close i {
    opacity: .7;
}

    .tab-close i:hover {
        opacity: 1;
    }



/* Make the + button look like an action */
#addNewParcel.btn {
    height: 34px;
    width: 34px;
    border-radius: 999px;
    background: var(--ff-primary);
    border-color: var(--ff-primary);
    color: var(--on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ff-shadow-sm);
}

    #addNewParcel.btn:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }


/* =========
   Theme tokens (light defaults)
   ========= */
:root {
    --ff-topbar-bg: #ffffff;
    --ff-topbar-border: rgba(0, 0, 0, 0.08);
    --ff-topbar-fg: rgba(0, 0, 0, 0.86);
    --ff-topbar-muted: rgba(0, 0, 0, 0.55);
    --ff-topbar-hover: rgba(0, 0, 0, 0.05);
    --ff-topbar-icon-bg: rgba(0, 0, 0, 0.06);
}

/* Try common dark-mode roots (keep whichever matches your app) */
body.dark,
body.dark-mode,
.theme-dark,
.layout-dark,
html[data-theme="dark"] {
    --ff-topbar-bg: rgba(255, 255, 255, 0.03);
    --ff-topbar-border: rgba(255, 255, 255, 0.10);
    --ff-topbar-fg: rgba(255, 255, 255, 0.92);
    --ff-topbar-muted: rgba(255, 255, 255, 0.62);
    --ff-topbar-hover: rgba(255, 255, 255, 0.06);
    --ff-topbar-icon-bg: rgba(255, 255, 255, 0.08);
}

/* =========
   OPTIONAL: Make the entire top bar section go edge-to-edge (viewport)
   If you only want "to the edges of the container", remove this block.
   ========= */
/*#page-title.ff-topbar-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}*/
#page-title h1 {
    padding: 0 16px;
}
/* Kill the Bootstrap row/col gutters for the top bar so the background truly fills */
#page-title.ff-topbar-bleed > .row {
    margin-left: 0;
    margin-right: 0;
}

        #page-title.ff-topbar-bleed > .row > .col-md-12 {
            padding-left: 0;
            padding-right: 0;
        }

/* =========
   Top bar container
   ========= */
.ff-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* NEW: allow the row to wrap instead of forcing overflow */
    flex-wrap: wrap;
    gap: 12px;
    /* keep your styling */
    background: var(--ff-topbar-bg);
    border: 1px solid var(--ff-topbar-border);
    /* NEW: don't let borders/padding push it wider than the container */
    max-width: 100%;
    box-sizing: border-box;
}


/* Make sure the card doesn't “clip” weirdly in dark mode */
.ff-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* =========
   Title styling: fixes “background space” feeling by giving the BAR padding,
   and keeping title clean and aligned.
   ========= */
.ff-topbar-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--ff-topbar-fg);
}

    .ff-topbar-title sup {
        top: 0; /* stop weird vertical offset */
    }

    .ff-topbar-title .unfavourite-page {
        /* Your fa-3x was making the header feel cramped and messy */
        font-size: 16px !important;
        opacity: 0.85;
    }

        .ff-topbar-title .unfavourite-page:hover {
            opacity: 1;
        }

/* =========
   Right-side actions: remove clunky stacked layout,
   convert to consistent “icon button” controls.
   ========= */
.ff-topbar-actions {
    /* override old float-based layout */
    float: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Remove the awkward per-li top padding that makes them look misaligned */
    .ff-topbar-actions > li {
        padding-top: 0 !important;
        margin: 0 !important;
    }

/* The clickable control */
.ff-topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--ff-topbar-border);
    background: transparent;
    color: var(--ff-topbar-fg) !important; /* fixes dark mode + kills the old inline #333 issue */
    text-decoration: none !important;
    transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
}

    .ff-topbar-action:hover {
        background: var(--ff-topbar-hover);
        transform: translateY(-1px);
    }



    /* Icon container becomes a clean “icon chip” */
    .ff-topbar-action .sparkline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--ff-topbar-icon-bg);
    }

        /* Your icons were huge (text30). This makes them feel like real header controls. */
        .ff-topbar-action .sparkline i {
            font-size: 18px !important;
            line-height: 1 !important;
        }

    /* Dropdown caret: keep, but don’t let it distort layout */
    .ff-topbar-action .caret {
        margin-left: 6px;
        opacity: 0.75;
    }

/* Make dropdown toggle behave like the other actions */
.btn-group.dropdown .dropdown-toggle.ff-topbar-action {
    cursor: pointer;
}



/* =========================
   Topbar actions: normalize ALL action controls
   Works for <a.ff-action> and dropdown toggles from ng-include
   ========================= */

/* Keep the UL itself consistent (kills bootstrap pull-right/panel-heading-tabs quirks) */
.ff-topbar-actions {
    float: none !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    /* allow wrap on smaller widths */
    flex-wrap: wrap;
    max-width: 100%;
}

/* Remove per-li padding/margins that make items misalign */
.ff-topbar-actions > li {
    padding-top: 0 !important;
    margin: 0 !important;
    display: flex;          /* keeps include/dropdown aligned */
    align-items: center;
}

/* ---- The unified “action button” target ----
   1) your anchors: a.ff-action
   2) dropdown toggles inside the include: .dropdown-toggle / button / a
*/
    .ff-topbar-actions > li > a.ff-action,
    .ff-topbar-actions > li > button.ff-action,
    .ff-topbar-actions .btn-group > .dropdown-toggle,
    .ff-topbar-actions .dropdown > .dropdown-toggle,
    .ff-topbar-actions button.dropdown-toggle,
    .ff-topbar-actions a.dropdown-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px;
        min-width: 42px;
        padding: 0 10px;
        border-radius: 12px;
        border: 1px solid var(--ff-topbar-border);
        background: transparent;
        color: var(--ff-topbar-fg) !important;
        text-decoration: none !important;
        line-height: 1 !important;
        transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
    }

        .ff-topbar-actions > li > a.ff-action:hover,
        .ff-topbar-actions > li > button.ff-action:hover,
        .ff-topbar-actions .btn-group > .dropdown-toggle:hover,
        .ff-topbar-actions .dropdown > .dropdown-toggle:hover,
        .ff-topbar-actions button.dropdown-toggle:hover,
        .ff-topbar-actions a.dropdown-toggle:hover {
            background: var(--ff-topbar-hover);
            transform: translateY(-1px);
        }

/* Make sparkline (icon chip) consistent for both your anchors + include */
.ff-topbar-actions .sparkline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ff-topbar-icon-bg);
}

/* Your icons are huge because of text30 — normalize only inside the topbar */
.ff-topbar-actions .sparkline i,
.ff-topbar-actions i.text30 {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Caret: keep but prevent layout distortion */
.ff-topbar-actions .caret {
    margin-left: 6px;
    opacity: 0.75;
}

/* Ensure btn-group wrapper doesn’t add spacing/line-height weirdness */
.ff-topbar-actions .btn-group,
.ff-topbar-actions .dropdown {
    display: flex;
    align-items: center;
}

/* OPTIONAL: make dropdown menus visually consistent (only if you want) */
.ff-topbar-actions .dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--ff-topbar-border);
}


/* =========================================================
   SweetAlert2 (swal2) — FF Theme (token-based)
   Uses ONLY existing FF tokens from body.ff-app
========================================================= */
body.ff-app .swal2-container.swal2-backdrop-show {
    /* subtle backdrop using text color (works light/dark) */
    background: rgba(0, 0, 0, 0.45) !important;
}

/* Modal card */
body.ff-app .swal2-container .swal2-popup.swal2-modal {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-1) !important;
    /* spacing */
    padding: 18px 18px 14px !important;
    /* keep layout consistent */
    box-sizing: border-box !important;
}

/* Title + content */
body.ff-app .swal2-container .swal2-title {
    color: var(--text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.25 !important;
    margin: 10px 0 6px !important;
}

body.ff-app .swal2-container .swal2-html-container {
    color: var(--text-muted) !important;
}

/* Icon styling (warning shown in your example) */
body.ff-app .swal2-container .swal2-icon.swal2-warning {
    border-color: color-mix(in srgb, var(--warning) 60%, transparent) !important;
    color: var(--warning) !important;
}

    body.ff-app .swal2-container .swal2-icon.swal2-warning .swal2-icon-content {
        color: var(--warning) !important;
    }

/* Actions row spacing */
body.ff-app .swal2-container .swal2-actions {
    gap: 10px !important;
    margin-top: 14px !important;
}

    /* Base button style (normalize SweetAlert2 defaults) */
    body.ff-app .swal2-container .swal2-actions .swal2-styled {
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        padding: 10px 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        transition: background 120ms ease, transform 120ms ease, border-color 120ms ease !important;
    }

        /* Hover */
        body.ff-app .swal2-container .swal2-actions .swal2-styled:hover {
            background: var(--surface-2) !important;
            transform: translateY(-1px);
        }

        /* Focus ring */
        body.ff-app .swal2-container .swal2-actions .swal2-styled:focus,
        body.ff-app .swal2-container .swal2-actions .swal2-styled:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

/* Confirm button (maps nicely to warning/error flows)
   Your example is a destructive "Yes, Clear" => use --error
*/
body.ff-app .swal2-container .swal2-confirm.swal2-styled {
    background: color-mix(in srgb, var(--error) 14%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--error) 45%, var(--border)) !important;
    color: var(--text) !important;
}

    /* Confirm hover */
    body.ff-app .swal2-container .swal2-confirm.swal2-styled:hover {
        background: color-mix(in srgb, var(--error) 20%, var(--surface-2)) !important;
    }

/* Clearing a capture page is reversible form navigation, so present it as a
   compact warning rather than using the destructive/error confirmation style. */
body.ff-app .swal2-container .swal2-popup.ff-clear-page-warning-dialog {
    width: min(520px, calc(100vw - 32px)) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-clear-page-warning-dialog .swal2-icon.swal2-warning {
    width: 3.5em !important;
    height: 3.5em !important;
    margin: 0.6em auto 0.25em !important;
}

body.ff-app .swal2-container .swal2-popup.ff-clear-page-warning-dialog
    .swal2-icon.swal2-warning .swal2-icon-content {
    font-size: 2.5em !important;
}

body.ff-app .swal2-container .swal2-popup.ff-clear-page-warning-dialog
    .swal2-confirm.ff-clear-page-warning-confirm.swal2-styled {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border)) !important;
    color: var(--text) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-clear-page-warning-dialog
    .swal2-confirm.ff-clear-page-warning-confirm.swal2-styled:hover {
    background: color-mix(in srgb, var(--primary) 27%, var(--surface-2)) !important;
    border-color: color-mix(in srgb, var(--primary) 68%, var(--border)) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-actions.ff-copy-on-click-actions {
    gap: 12px !important;
    justify-content: center !important;
}

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-actions.ff-copy-on-click-actions .swal2-styled {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-confirm.ff-copy-selected-rows-button.swal2-styled {
    background: var(--success-bg) !important;
    border-color: var(--success-brd) !important;
    color: var(--text) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-copy-on-click-dialog .swal2-confirm.ff-copy-selected-rows-button.swal2-styled:hover {
    background: color-mix(in srgb, var(--success) 24%, var(--surface-2)) !important;
    border-color: color-mix(in srgb, var(--success) 68%, var(--border)) !important;
}

/* Printing, linked collection creation and draft resume are non-destructive actions. */
body.ff-app .swal2-container .swal2-popup.ff-manifest-print-copies-dialog
    .swal2-confirm.ff-manifest-print-copies-button.swal2-styled,
body.ff-app .swal2-container .swal2-popup.ff-waybill-to-collection-dialog
    .swal2-confirm.ff-waybill-to-collection-confirm.swal2-styled,
body.ff-app .swal2-container .swal2-popup.ff-quote-draft-dialog
    .swal2-confirm.ff-quote-draft-resume.swal2-styled {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border)) !important;
    color: var(--text) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-manifest-print-copies-dialog
    .swal2-confirm.ff-manifest-print-copies-button.swal2-styled:hover,
body.ff-app .swal2-container .swal2-popup.ff-waybill-to-collection-dialog
    .swal2-confirm.ff-waybill-to-collection-confirm.swal2-styled:hover,
body.ff-app .swal2-container .swal2-popup.ff-quote-draft-dialog
    .swal2-confirm.ff-quote-draft-resume.swal2-styled:hover {
    background: color-mix(in srgb, var(--primary) 27%, var(--surface-2)) !important;
    border-color: color-mix(in srgb, var(--primary) 68%, var(--border)) !important;
}

/* Cancel button (neutral) */
body.ff-app .swal2-container .swal2-cancel.swal2-styled {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Optional: match dropdown/menu borders if you use swal lists */
body.ff-app .swal2-container .swal2-footer {
    border-top: 1px solid var(--divider) !important;
    color: var(--text-muted) !important;
}

/* Optional: inputs (if you ever use swal input dialogs) */
body.ff-app .swal2-container .swal2-input,
body.ff-app .swal2-container .swal2-textarea,
body.ff-app .swal2-container .swal2-select {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

    body.ff-app .swal2-container .swal2-input:focus,
    body.ff-app .swal2-container .swal2-textarea:focus,
    body.ff-app .swal2-container .swal2-select:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border)) !important;
    }

/* =========================================================
   Add to: body.ff-app  (LIGHT)
========================================================= */
body.ff-app {
    /* Destructive-ish secondary action (Clear) */
    --clear: #dd6b55;
    --clear-hover: #e9826f;
    --clear-active: #c95a46;
    --on-clear: #ffffff;
}

    /* =========================================================
   Add to: body.ff-app[data-theme="dark"]  (DARK)
========================================================= */
    body.ff-app[data-theme="dark"] {
        --clear: #ff8a7a;
        --clear-hover: #ff9c8f;
        --clear-active: #ff7664;
        --on-clear: #0b1220; /* matches your dark on-primary pattern */
    }

    /* Confirm button for WARNING modals uses Clear tokens */
    body.ff-app .swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm.swal2-styled {
        background: var(--clear) !important;
        border-color: color-mix(in srgb, var(--clear) 65%, var(--border)) !important;
        color: var(--on-clear) !important;
    }

        body.ff-app .swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm.swal2-styled:hover {
            background: var(--clear-hover) !important;
            transform: translateY(-1px);
        }

        body.ff-app .swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm.swal2-styled:active {
            background: var(--clear-active) !important;
        }


    /* =========================================================
   FF Page Header (Waybill-capture style)
   Applies to: <section id="page-title" class="ff-page-header">
========================================================= */
/*    body.ff-app .ff-page-header {
        background: var(--topbar-bg);
        border: 1px solid var(--topbar-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        padding: 12px 14px;
        margin-bottom: 12px;
    }*/

        /* Row layout */
        body.ff-app .ff-page-header .ff-page-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;  /*prevents overflow on smaller widths */
        }

       /*  Title wrap */
        body.ff-app .ff-page-header .ff-page-title-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 220px;  /*stops title collapsing too aggressively*/
        }

        /* Title */
        /*body.ff-app .ff-page-header .ff-page-title {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 0.2px;
            color: var(--topbar-text);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }*/

        /* Subtitle inside title */
        /*body.ff-app .ff-page-header .ff-page-subtitle {
            color: var(--topbar-text-muted);
            font-weight: 600;
            margin-left: 8px;
        }*/

        /* Toolbar */
        /*body.ff-app .ff-page-header .ff-toolbar {
            margin-left: auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }*/

        /* Action buttons (align with your system) */
        /*body.ff-app .ff-page-header .ff-action {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 38px;
            padding: 0 12px;
            border-radius: var(--radius-md);
            border: 1px solid var(--topbar-border);
            background: transparent;
            color: var(--topbar-text);
            text-decoration: none;
            line-height: 1;
            transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
        }

            body.ff-app .ff-page-header .ff-action:hover {
                background: var(--topbar-hover);
                transform: translateY(-1px);
            }

            body.ff-app .ff-page-header .ff-action:active {
                transform: translateY(0);
            }*/

            /* Icons in actions */
            /*body.ff-app .ff-page-header .ff-action i {
                color: var(--topbar-text);
            }*/

        /* Labels */
        /*body.ff-app .ff-page-header .ff-action-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.2px;
            color: var(--topbar-text);
        }*/

        /* Dropdown caret */
        /*body.ff-app .ff-page-header .ff-action .caret {
            margin-left: 4px;
            opacity: 0.75;
        }*/

        /* Favourite button (uses your existing favourite/unfavourite icons) */
        /*body.ff-app .ff-page-header .ff-icon-btn.ff-fav-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            width: 38px;
            border-radius: var(--radius-md);
            border: 1px solid var(--topbar-border);
            background: transparent;
            color: var(--topbar-text);
            transition: background 120ms ease, transform 120ms ease;
        }

            body.ff-app .ff-page-header .ff-icon-btn.ff-fav-btn:hover {
                background: var(--topbar-hover);
                transform: translateY(-1px);
            }*/

        /* Keep the included admin dropdown from bringing old inline color along */
        /*body.ff-app .ff-page-header .ff-toolbar .dropdown-toggle {
            color: var(--topbar-text) !important;
        }*/

    /* =========================================
   Compact header height + make action content horizontal
   (fixes waybill extra height + matches collections)
   Drop this AFTER your current header styles
   ========================================= */

    body.ff-app #page-title.ff-page-header {
        /* If you already set padding elsewhere, this will normalize it */
        padding: 10px 14px;
    }

        /* Default h1 margins often add “mystery height” */
        body.ff-app #page-title.ff-page-header .ff-page-title {
            margin: 0;
            line-height: 1.15;
        }

        /* Force label NEXT TO icon (undo any stacking rule that may exist on waybill) */
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
            display: inline-flex;
            flex-direction: row; /* <-- key: stop icon/text stacking */
            align-items: center;
            gap: 8px;
            height: 42px; /* match your “normal” action height */
            padding: 0 12px;
        }

        /* Ensure label isn’t being forced to block (which can stack it) */
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action-label {
            display: inline-block;
            margin: 0;
        }

    /* =========================================================
   DASHBOARD topbar: match ff-page-header sizing + horizontal buttons
   (compact vertical space + label next to icon)
   ========================================================= */

    body.ff-app #page-title.ff-topbar-bleed .panel-heading.ff-topbar {
        /* Bootstrap .panel-heading adds padding — normalize it */
        padding: 10px 14px !important;
        gap: 10px;
        flex-wrap: wrap;
        background: var(--topbar-bg);
        border: 1px solid var(--topbar-border);
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Kill any inherited h1 padding/margins that inflate height */
    body.ff-app #page-title.ff-topbar-bleed .ff-topbar-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15;
        color: var(--topbar-text);
    }

        /* Star icon: prevent fa-3x from making the bar tall */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-title .fa-star {
            font-size: 16px !important;
        }

    /* Actions UL: remove bootstrap quirks and keep it tight */
    body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }

        /* Remove the li padding that adds vertical height */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions > li {
            padding-top: 0 !important;
            margin: 0 !important;
            display: flex;
            align-items: center;
        }

            /* Make ALL dashboard actions match the ff-page-header (icon + label inline) */
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions > li > a.ff-action,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .btn-group > .dropdown-toggle,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .dropdown > .dropdown-toggle,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions a.dropdown-toggle,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions button.dropdown-toggle {
                display: inline-flex !important;
                flex-direction: row !important; /* <-- key: label beside icon */
                align-items: center !important;
                justify-content: center !important;
                gap: 8px;
                height: 42px;
                min-width: 42px;
                padding: 0 12px;
                border-radius: 12px;
                border: 1px solid var(--topbar-border);
                background: transparent;
                color: var(--topbar-text) !important;
                text-decoration: none !important;
                line-height: 1 !important;
                transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
            }

                body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions > li > a.ff-action:hover,
                body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .dropdown-toggle:hover {
                    background: var(--topbar-hover);
                    transform: translateY(-1px);
                }

        /* Keep the icon chip, but don’t let it dictate height */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .sparkline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--surface-2);
        }

            /* Normalize icons (text30 was huge) */
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions i.text30,
            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .sparkline i {
                font-size: 18px !important;
                line-height: 1 !important;
            }

        /* Show the label inline (your dashboard uses .values > p) */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .values {
            display: inline-flex !important;
            align-items: center;
        }

            body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .values p {
                margin: 0 !important;
                line-height: 1 !important;
                color: var(--topbar-text);
            }

        /* Caret: keep it compact */
        body.ff-app #page-title.ff-topbar-bleed .ff-topbar-actions .caret {
            margin-left: 6px;
            opacity: 0.75;
        }


/* =========================================================
   WAYBILL STAGES: legacy header -> capture header look
   (keeps row/col/panel/ul/li intact to avoid breaking pages)
========================================================= */

.ff-waybill #page-title.ff-page-header.ff-page-header-legacy {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: 10px 12px;
    margin-bottom: 12px;
}

/* Remove panel chrome/padding that inflates height */
.ff-waybill #page-title .panel,
.ff-waybill #page-title .panel-heading {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Title row alignment */
.ff-waybill #page-title .ff-page-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.ff-waybill #page-title .ff-page-subtitle {
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 2px;
}

/* Fav button like capture */
.ff-waybill #page-title .ff-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    margin-left: 4px;
}

    .ff-waybill #page-title .ff-fav-btn:hover {
        background: var(--surface-2);
    }

    .ff-waybill #page-title .ff-fav-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px var(--focus);
    }

/* Toolbar = horizontal, no extra top padding from legacy li */
.ff-waybill #page-title .ff-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ff-waybill #page-title .ff-toolbar > li {
        padding-top: 0 !important;
    }

/* Make legacy anchors/buttons look like capture buttons */
.ff-waybill #page-title .ff-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    line-height: 1;
    text-decoration: none;
}

    /* Neutralize bootstrap .btn look inside header */
    .ff-waybill #page-title .ff-action.btn {
        box-shadow: none !important;
    }

    /* Flatten legacy icon/label wrappers into a single row */
    .ff-waybill #page-title .ff-action .sparkline,
    .ff-waybill #page-title .ff-action .values {
        display: inline-flex;
        align-items: center;
    }

    .ff-waybill #page-title .ff-action .values {
        margin: 0;
    }

    .ff-waybill #page-title .ff-action .sparkline span {
        display: inline-flex;
        align-items: center;
    }

    /* Icon size: treat text30 as "icon" */
    .ff-waybill #page-title .ff-action i,
    .ff-waybill #page-title .ff-action .text30 {
        font-size: 16px !important;
    }

/* Label: inline next to icon (fixes height + matches capture) */
.ff-waybill #page-title .ff-action-label {
    margin: 0 !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
}

/* Hover/focus */
.ff-waybill #page-title .ff-action:hover {
    background: var(--surface-2);
}

.ff-waybill #page-title .ff-action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--focus);
}

/* Primary + danger (uses your tokens) */
.ff-waybill #page-title .ff-action-primary,
.ff-waybill #page-title .btn.btn-o.ff-action { /* SAVE buttons are .btn-o in legacy */
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* Only non-primary/non-danger actions get the "surface" hover */
body.ff-app .ff-waybill .ff-action:not(.ff-action-primary):not(.ff-action-danger):hover {
    background: var(--surface-2) !important;
    border-color: var(--primary) !important;
}


.ff-waybill #page-title .ff-action-danger {
    background: var(--error);
    border-color: var(--error);
    color: var(--on-primary);
}

/* Primary actions must stay primary so --on-primary remains readable */
body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:hover,
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:focus,
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:focus-visible {
        background: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
        color: var(--on-primary) !important;
    }

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:active {
        background: var(--primary-active) !important;
        border-color: var(--primary-active) !important;
        color: var(--on-primary) !important;
    }

    /* Disabled should still be readable (your screenshot shows disabled) */
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary[disabled],
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:disabled {
        opacity: 0.65;
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
    }

    /* Ensure the icon follows the same color */
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary i {
        color: currentColor !important;
    }


/* Give the submenu inner padding so rows can be full-width without margins */
/*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu {
    padding: 6px 8px !important;*/ /* instead of 6px 0 */
    /*box-sizing: border-box;
}*/

    /* Make every row link fill the available width */
    /*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a {
        width: 100%;
        margin: 0 !important;*/ /* kill any inherited margin */
        /*border-radius: var(--radius-sm);
    }*/

    /* Active row: remove the margin that was clipping it */
    /*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a {
        margin: 0 !important;*/ /* overrides your margin: 0 8px */
        /*border-bottom-color: transparent !important;*/ /* optional: looks cleaner */
    /*}*/

    /* Prevent the LI background from creating a weird “double highlight” */
    /*body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active,
    body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.open {
        background: transparent !important;
    }*/

.ff-action.ff-action-primary:disabled,
.ff-action.ff-action-primary[disabled] {
    opacity: .55;
    color: var(--on-primary);
}
/* If your disabled state changes background, also force it: */
.ff-action.ff-action-primary:disabled,
.ff-action.ff-action-primary[disabled] {
    background: var(--primary);
}

/* force scrolling on the original fixed sidebar submenu */
body.ff-app #sidebar .main-navigation-menu > li > ul.sub-menu.sub-menu-scroll {
    position: fixed !important;
    bottom: 0 !important;
    /* your example inline style has top: 466px; so this height matches that.
     If top changes, update 466px or use the JS snippet below. */
    height: calc(100vh - 466px) !important;
    max-height: calc(100vh - 466px) !important;
    overflow: auto !important; /* overrides any overflow:hidden/visible */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.symbol.required::before,
.symbol.required::after {
    color: var(--error); /* or whatever token you want */
}
.has-success .symbol::before{
    color: var(--success) !important;
}

.has-error .error {
    color: var(--error) !important;
}

/* Required error: user has touched it and it's still empty */
.ff-input.ng-invalid-required.ng-touched {
    border-color: var(--error) !important;
    background: color-mix(in srgb, var(--error) 8%, transparent) !important;
}

    /* Keep it red on focus too */
    .ff-input.ng-invalid-required.ng-touched:focus {
        outline: 0 !important;
        border-color: var(--error) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 28%, transparent) !important;
    }

/* Angular invalid (required) — wins over .ff-waybill .form-control + .has-error + generic :hover */
body.ff-app .ff-waybill .ff-input.form-control.ng-invalid-required.ng-touched,
body.ff-app .ff-waybill .has-error .ff-input.form-control {
    border: 1px solid var(--error) !important;
    border-style: solid !important; /* cancels dotted rules */
    border-bottom-style: solid !important; /* cancels dotted bottom-only rules */
    background: color-mix(in srgb, var(--error) 8%, var(--surface)) !important;
}

    /* Keep the error border on hover (beats input[type="text"]:hover !important) */
    body.ff-app .ff-waybill .ff-input.form-control.ng-invalid-required.ng-touched:hover,
    body.ff-app .ff-waybill .has-error .ff-input.form-control:hover {
        border-color: var(--error) !important;
    }

    /* Error focus ring */
    body.ff-app .ff-waybill .ff-input.form-control.ng-invalid-required.ng-touched:focus,
    body.ff-app .ff-waybill .has-error .ff-input.form-control:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 28%, transparent) !important;
    }





body.ff-app .ff-waybill fieldset > legend {
    position: static !important;
    display: inline-block;
    margin: 0 0 0 0 !important;
    padding: 6px 10px !important;
    border: 1px solid var(--divider) !important;
    border-radius: 999px;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.ff-app .ff-waybill .ff-stages-capture fieldset {
    padding: 10px 12px 8px;
    margin-bottom: 10px;
}

body.ff-app .ff-waybill .ff-stages-capture fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2;
}

body.ff-app .ff-waybill .ff-stages-capture .form-group {
    margin-bottom: 8px;
}

body.ff-app .ff-waybill .ff-stages-capture label {
    margin-bottom: 3px;
    line-height: 1.25;
}

body.ff-app .ff-waybill .ff-stages-capture .row.padding-bottom-30 {
    padding-bottom: 12px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .row.padding-bottom-20,
body.ff-app .ff-waybill .ff-stages-capture .padding-bottom-20 {
    padding-bottom: 8px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .padding-top-20 {
    padding-top: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-client-row,
body.ff-app .ff-waybill .ff-stages-id-row,
body.ff-app .ff-waybill .ff-stages-parcel-options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-stages-client-row::before,
body.ff-app .ff-waybill .ff-stages-client-row::after,
body.ff-app .ff-waybill .ff-stages-id-row::before,
body.ff-app .ff-waybill .ff-stages-id-row::after,
body.ff-app .ff-waybill .ff-stages-parcel-options-row::before,
body.ff-app .ff-waybill .ff-stages-parcel-options-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-stages-client-row > [class*="col-"],
body.ff-app .ff-waybill .ff-stages-id-row > [class*="col-"],
body.ff-app .ff-waybill .ff-stages-parcel-options-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-stages-client-acc {
    flex: 0 0 105px;
}

body.ff-app .ff-waybill .ff-stages-client-name {
    flex: 1 1 280px;
}

body.ff-app .ff-waybill .ff-stages-capture-waybill {
    flex: 0 0 360px;
}

body.ff-app .ff-waybill .ff-stages-id-row {
    flex-wrap: nowrap;
    gap: 8px;
}

body.ff-app .ff-waybill .ff-stages-capture-date {
    flex: 0 0 104px;
}

body.ff-app .ff-waybill .ff-stages-waybill-no {
    flex: 1 1 150px;
    min-width: 145px;
}

body.ff-app .ff-waybill .ff-stages-capture-date label,
body.ff-app .ff-waybill .ff-stages-value-field label {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-stages-capture-date label.width100 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.ff-app .ff-waybill .ff-stages-capture-date label.width100 .pull-right {
    float: none !important;
}

body.ff-app .ff-waybill .ff-stages-courier {
    flex: 0 1 185px;
}

body.ff-app .ff-waybill .ff-stages-courier-action {
    flex: 0 0 38px;
    padding-top: 22px;
}

body.ff-app .ff-waybill .ff-stages-courier-action .btn {
    min-width: 34px;
    height: 34px;
    padding: 6px 10px;
}

body.ff-app .ff-waybill .ff-stages-package-field {
    flex: 1 1 240px;
    max-width: 320px;
}

body.ff-app .ff-waybill .ff-stages-value-field {
    flex: 0 0 158px;
}

body.ff-app .ff-waybill .ff-stages-checks {
    flex: 1 1 300px;
    padding-top: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .checkbox.clip-check,
body.ff-app .ff-waybill .ff-stages-capture .radio.clip-radio {
    margin-top: 2px;
    margin-bottom: 4px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-parcel-fieldset {
    padding-bottom: 12px;
    overflow: visible;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-parcel-grid-responsive {
    padding-bottom: 2px;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid {
    margin-bottom: 6px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > th,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > td {
    position: relative;
    z-index: 1;
    padding: 8px 8px !important;
    line-height: 1.35;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child {
    min-width: 96px;
    white-space: nowrap;
}

@media (max-width: 520px) {
    body.ff-app .ff-waybill .ff-stages-id-row {
        flex-wrap: wrap;
    }

    body.ff-app .ff-waybill .ff-stages-capture-waybill,
    body.ff-app .ff-waybill .ff-stages-capture-date,
    body.ff-app .ff-waybill .ff-stages-waybill-no,
    body.ff-app .ff-waybill .ff-stages-value-field {
        flex: 1 1 160px;
    }
}

body.ff-app .ff-waybill.ff-full-capture fieldset {
    padding: 10px 12px 8px;
    margin-bottom: 10px;
}

body.ff-app .ff-waybill.ff-full-capture fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2;
}

body.ff-app .ff-waybill.ff-full-capture .form-group {
    margin-bottom: 6px;
}

body.ff-app .ff-waybill.ff-full-capture label {
    margin-bottom: 3px;
    line-height: 1.25;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid,
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row::after,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) {
    display: contents;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 {
    flex: 0 0 105px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 {
    flex: 1 1 245px;
    max-width: 360px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs {
    flex: 999 1 620px;
    max-width: none;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > [class*="col-"]:not(.ff-full-courier-field):not(.ff-full-courier-action):not(.ff-full-capture-date),
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) > [class*="col-"]:not(.ff-full-courier-field):not(.ff-full-courier-action):not(.ff-full-capture-date) {
    flex: 1 1 170px;
    max-width: 240px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-field {
    flex: 0 1 165px;
    max-width: 185px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action {
    flex: 0 0 34px;
    max-width: 34px;
    padding-top: 18px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action .btn-group,
body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action .dropdown-toggle {
    width: 100%;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-action .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    padding: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-capture-date {
    flex: 0 0 165px;
    max-width: 175px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-capture-date label.width100 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-capture-date label.width100 .pull-right {
    float: none !important;
    margin-left: auto;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture .ff-full-schedule-field {
    flex: 0 1 165px;
    max-width: 190px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid {
    flex: 0 1 345px;
    max-width: 380px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
    flex: 1 1 390px;
    max-width: 470px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-order-field {
    flex: 1 1 115px;
    min-width: 105px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field {
    flex: 0 0 128px;
    max-width: 128px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex: 0 0 72px;
    max-width: 72px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .ff-input {
    width: 100%;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime {
    width: 7ch !important;
    min-width: 7ch !important;
    max-width: 7ch !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-driver-field,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-schedule-field,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid,
    body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
        flex: 1 1 100%;
        max-width: none;
    }
}

body.ff-app .ff-waybill.ff-quick-capture fieldset {
    padding: 10px 12px 8px;
    margin-bottom: 10px;
}

body.ff-app .ff-waybill.ff-quick-capture fieldset > legend {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.2;
}

body.ff-app .ff-waybill.ff-quick-capture .form-group {
    margin-bottom: 8px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-main-fieldset .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-waybill.ff-quick-capture label {
    margin-bottom: 3px;
    line-height: 1.25;
}

body.ff-app .ff-waybill.ff-quick-capture .row.padding-10 {
    padding: 4px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .padding-top-30 {
    padding-top: 12px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .checkbox.clip-check,
body.ff-app .ff-waybill.ff-quick-capture .radio.clip-radio {
    margin-top: 2px;
    margin-bottom: 4px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row > .col-md-6,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .col-md-6 {
    flex: 1 1 420px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-name-row > .col-md-6 > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .col-md-6 > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row {
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card-wrap {
    margin-left: 0;
    margin-right: 0;
    padding: 2px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card {
    width: 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-full-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-address-block,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-pair-row {
    flex: 1 1 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-half-row {
    flex: 1 1 calc(50% - 6px);
    min-width: 220px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-body > .ff-quick-postal-row {
    flex: 1 1 calc(50% - 6px);
    min-width: 220px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pair-row > [class*="col-"] {
    flex: 1 1 calc(50% - 6px);
    min-width: 220px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > label {
    display: block;
    width: 100% !important;
    margin: 0 0 3px 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .form-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .input-icon,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group > .ui-select-container {
    width: 100%;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-status-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    min-height: 17px;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-caption {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-waybill-badges .label {
    float: none !important;
    display: inline-flex;
    align-items: center;
    height: 17px;
    line-height: 1;
    margin-left: 0 !important;
    padding: 2px 6px;
    font-size: 11px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field {
    display: grid;
    grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > label {
    grid-column: 1;
    margin: 0;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ui-select-container {
    grid-column: 2;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .error {
    grid-column: 2;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group {
    display: block;
    width: 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .form-control + .form-control {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill #SAddr1,
body.ff-app .ff-waybill #SAddr2,
body.ff-app .ff-waybill #SAddr3,
body.ff-app .ff-waybill #SAddr4,
body.ff-app .ff-waybill #RAddr1,
body.ff-app .ff-waybill #RAddr2,
body.ff-app .ff-waybill #RAddr3,
body.ff-app .ff-waybill #RAddr4 {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill #SAddr1,
body.ff-app .ff-waybill #SAddr2,
body.ff-app .ff-waybill #SAddr3,
body.ff-app .ff-waybill #SAddr4,
body.ff-app .ff-waybill #RAddr1,
body.ff-app .ff-waybill #RAddr2,
body.ff-app .ff-waybill #RAddr3,
body.ff-app .ff-waybill #RAddr4,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .ff-input {
    border-radius: 0 !important;
}

body.ff-app .ff-waybill #SAddr1,
body.ff-app .ff-waybill #RAddr1,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .ff-input:first-of-type {
    border-top-left-radius: var(--radius-sm) !important;
    border-top-right-radius: var(--radius-sm) !important;
}

body.ff-app .ff-waybill #SAddr4,
body.ff-app .ff-waybill #RAddr4,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-address-block .form-group > .ff-input:last-of-type {
    border-bottom-left-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-card .form-group label .pull-right {
    float: none !important;
    display: block;
}

body.ff-app .ff-waybill.ff-quick-capture #showSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #retainSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #BillRec + label:after {
    top: 1px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sr-switch-row {
    height: 16px;
    margin: -8px 0 -2px 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sr-switch-row > .col-md-12 {
    height: 16px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-sr-switch {
    width: 28px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    transform: translateY(-4px);
}

body.ff-app .ff-waybill .ff-geocode-inline {
    width: 28px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-field {
    padding-right: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-field input.form-control,
body.ff-app .ff-waybill .ff-linked-menu-field .ff-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-action {
    flex: 0 0 34px;
    max-width: 34px;
    width: 34px !important;
    margin-top: 0 !important;
    padding: 18px 0 0 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > .ff-linked-menu-action,
body.ff-app .ff-waybill .ff-stages-id-row > .ff-linked-menu-action {
    margin-left: -8px !important;
}

body.ff-app .ff-waybill .ff-linked-menu-action .btn-group,
body.ff-app .ff-waybill .ff-linked-menu-action .dropdown-toggle {
    width: 100%;
}

body.ff-app .ff-waybill .ff-linked-menu-action .dropdown-toggle {
    align-items: center;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
    display: inline-flex;
    height: var(--ff-control-h);
    justify-content: center;
    min-height: var(--ff-control-h);
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-linked-menu-action .caret {
    margin: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-geocode-row {
    margin: -2px 0 2px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-geocode-row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-geocode-row .mapboxgl-ctrl-geocoder--input {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row {
    margin-bottom: 2px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row .form-group {
    margin-bottom: 2px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row .checkbox.clip-check {
    margin-top: 0;
    margin-bottom: 1px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle-row {
    margin: 0 0 2px 0 !important;
    padding: 0 0 0 10px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle-row > [class*="col-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle {
    margin: 0 0 2px 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row {
    align-items: center;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col {
    flex: 1 1 380px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row > [class*="col-"] {
    float: none;
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field .ff-ms,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field .ui-select-container {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-toggle label:after {
    top: 1px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .form-group > label {
    display: block;
    width: 100% !important;
    margin: 0 0 3px 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ui-select-container,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-ms {
    width: 100%;
    min-width: 0;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .form-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .input-icon,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .ff-control,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-details .ui-select-container {
    width: 100%;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-linked-field {
    flex: 1 1 300px;
    min-width: 260px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-date-field {
    flex: 0 1 160px;
    min-width: 138px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-time-field {
    flex: 0 1 112px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-wide-field {
    flex: 1 1 230px;
    min-width: 190px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-date-field,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-id-field {
    flex: 0 1 160px;
    min-width: 138px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-mid-row > .ff-quick-check-field {
    flex: 0 1 120px;
    min-width: 110px;
    padding-top: 20px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-row {
    flex-wrap: nowrap;
    gap: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-number,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-date {
    flex: 1 1 130px;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-menu {
    flex: 0 0 34px;
    align-self: flex-end;
    margin-top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-linked-menu .btn {
    min-width: 34px;
    min-height: 34px;
    padding-left: 8px;
    padding-right: 8px;
}

body.ff-app .ff-waybill .ff-pod-row,
body.ff-app .ff-waybill .ff-pod-date-time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-pod-row::before,
body.ff-app .ff-waybill .ff-pod-row::after,
body.ff-app .ff-waybill .ff-pod-date-time-row::before,
body.ff-app .ff-waybill .ff-pod-date-time-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-pod-row > [class*="col-"],
body.ff-app .ff-waybill .ff-pod-date-time-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-pod-details .form-control,
body.ff-app .ff-waybill .ff-pod-details .input-icon,
body.ff-app .ff-waybill .ff-pod-details .ff-control,
body.ff-app .ff-waybill .ff-pod-details .ui-select-container {
    width: 100%;
    min-width: 0;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 270px;
    min-width: 246px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-person {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-notes {
    flex: 1.4 1 240px;
    min-width: 200px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-note-type {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill .ff-pod-row > .ff-pod-action {
    flex: 0 0 92px;
    min-width: 92px;
}

body.ff-app .ff-waybill .ff-pod-date-time-row {
    flex-wrap: nowrap;
    gap: 6px;
}

body.ff-app .ff-waybill .ff-pod-date-time-row > .ff-pod-date {
    flex: 1 1 150px;
    min-width: 0;
}

body.ff-app .ff-waybill .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 82px;
    min-width: 82px;
}

body.ff-app .ff-waybill .ff-pod-time input.time.settime {
    width: 7ch !important;
    min-width: 7ch !important;
    max-width: 7ch !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

body.ff-app .ff-waybill .ff-pod-action .btn {
    margin-top: 22px !important;
    white-space: nowrap;
    width: 100%;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-date-time {
    flex: 0 1 270px;
    min-width: 246px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-person {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-notes {
    flex: 1.4 1 240px;
    min-width: 200px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-note-type {
    flex: 1 1 190px;
    min-width: 170px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-row > .ff-quick-pod-action {
    flex: 0 0 92px;
    min-width: 92px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row {
    flex-wrap: nowrap;
    gap: 6px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row > .ff-quick-pod-date {
    flex: 1 1 150px;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-date-time-row > .ff-quick-pod-time {
    flex: 0 0 82px;
    min-width: 82px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-pod-action .btn {
    width: 100%;
    margin-top: 22px !important;
    white-space: nowrap;
}

@media (max-width: 680px) {
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > label,
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ff-control,
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .ui-select-container,
    body.ff-app .ff-waybill.ff-quick-capture .ff-quick-inline-field > .error {
        grid-column: 1;
    }
}


.custom-dx-table {
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    overflow: hidden;
}

    .custom-dx-table thead td,
    .custom-dx-table thead th {
        background: var(--ff-table-head-bg);
        color: var(--ff-table-head-text) !important;
        font-weight: 700;
        letter-spacing: .04em;
        font-size: 12px;
        border-color: var(--nav-border);
    }

    .custom-dx-table tbody td {
        border-color: var(--ff-border);
        vertical-align: middle;
        color: var(--ff-text);
    }

    .custom-dx-table tbody tr:nth-child(even) {
        background: var(--ff-surface-2);
    }

/* =========================================================
   FF WAYBILL – PARCEL GRID (custom-dx-table)
   Uses ONLY your tokens
   Place at end of stylesheet to win cascade.
========================================================= */

body.ff-app .ff-waybill table.custom-dx-table.table {
    /* Grid-local aliases (still driven by your tokens) */
    --grid-bg: var(--surface);
    --grid-border: var(--border);
    --grid-divider: var(--divider);
    --grid-head-bg: var(--primary);
    --grid-head-fg: var(--on-primary);
    --grid-head-sep: color-mix(in srgb, var(--on-primary) 22%, transparent);
    --grid-row-alt: var(--surface-2);
    --grid-row-hover: color-mix(in srgb, var(--primary) 7%, var(--surface));
    --grid-row-focus: color-mix(in srgb, var(--primary) 10%, var(--surface));
    --grid-row-selected: color-mix(in srgb, var(--primary) 14%, var(--surface));
    --grid-muted: var(--text-muted);
    --grid-disabled: var(--text-disabled);
    --grid-danger: var(--error);
    --grid-success: var(--success);
    --grid-warning: var(--warning);
    --grid-focus-ring: var(--focus);
    width: 100%;
    margin: 0 0 14px 0 !important;
    background: var(--grid-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--grid-border) !important;
    border-radius: var(--radius-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden; /* clips corners in most modern browsers */
}

    /* Optional: if corners don’t clip in a browser, wrap the table in a div and use this:
.ff-grid-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.ff-grid-wrap table { border: 0 !important; margin: 0 !important; }
*/

    /* ---------- HEADER ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table > thead {
        background: var(--grid-head-bg) !important;
    }

        body.ff-app .ff-waybill table.custom-dx-table.table > thead > tr > th,
        body.ff-app .ff-waybill table.custom-dx-table.table > thead > tr > td {
            /* NOTE: inline !important color in your markup will override this */
            color: var(--grid-head-fg) !important;
            padding: 10px 8px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            letter-spacing: .08em;
            text-transform: uppercase;
            vertical-align: middle !important;
            border: 0 !important;
            /* single-line separators (no double borders) */
            border-bottom: 1px solid color-mix(in srgb, var(--grid-head-bg) 78%, black) !important;
            border-right: 1px solid var(--grid-head-sep) !important;
        }

        body.ff-app .ff-waybill table.custom-dx-table.table > thead > tr > *:last-child {
            border-right: 0 !important;
        }

    /* ---------- BODY / CELLS ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr > th,
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr > td {
        padding: 8px 8px !important;
        color: var(--text) !important;
        background: transparent;
        border: 0 !important;
        border-right: 1px solid var(--grid-divider) !important;
        border-bottom: 1px solid var(--grid-divider) !important;
        vertical-align: middle !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr > *:last-child {
        border-right: 0 !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:last-child > * {
        border-bottom: 0 !important;
    }

    /* Zebra striping (skip header; applies to body rows) */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:nth-child(even) > * {
        background: var(--grid-row-alt);
    }

    /* Hover */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:hover > * {
        background: var(--grid-row-hover) !important;
    }

    /* Selected/active row support (use whichever class you already have) */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr.active > *,
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr.is-selected > * {
        background: var(--grid-row-selected) !important;
    }

    /* Cell highlight when interacting with inputs */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody td:focus-within {
        background: var(--grid-row-focus) !important;
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
    }

    /* Make the “entry row” (your first row with inputs) feel intentional */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:first-child > * {
        background: var(--surface-2) !important;
    }

    /* ---------- FOOTER (Totals) ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot > tr > th,
    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot > tr > td {
        padding: 10px 8px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 0 !important;
        border-top: 1px solid var(--grid-divider) !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot .text-right,
    body.ff-app .ff-waybill table.custom-dx-table.table > tfoot .text-center {
        color: var(--text) !important;
    }

    /* ---------- INPUTS INSIDE GRID ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control,
    body.ff-app .ff-waybill table.custom-dx-table.table select.form-control,
    body.ff-app .ff-waybill table.custom-dx-table.table textarea.form-control {
        width: 100%;
        height: 30px !important;
        padding: 6px 8px !important;
        line-height: 1.2 !important;
        border-radius: var(--radius-sm) !important;
        /* Make grid inputs consistent regardless of global input rules */
        background: transparent !important;
        color: var(--text) !important;
        border: 1px solid transparent !important;
        border-bottom-width: 1px !important;
        box-shadow: none !important;
        outline: 0 !important;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

    /* Entry row inputs look like “real inputs” by default */
    body.ff-app .ff-waybill table.custom-dx-table.table > tbody > tr:first-child input.form-control {
        background: var(--surface) !important;
        border-color: var(--border) !important;
    }

    /* Focus state */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control:focus {
        background: var(--surface) !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--grid-focus-ring) !important;
    }

    /* Placeholder */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control::placeholder {
        color: var(--text-muted) !important;
    }

    /* Disabled/readonly in grid */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control:disabled,
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control[readonly] {
        background: var(--surface-3) !important;
        color: var(--grid-disabled) !important;
        border-color: var(--divider) !important;
        cursor: not-allowed;
    }

    /* ---------- VALIDATION INSIDE GRID (Angular + bootstrap wrappers) ---------- */
    /* Angular invalid */
    body.ff-app .ff-waybill table.custom-dx-table.table input.form-control.ng-invalid.ng-touched,
    body.ff-app .ff-waybill table.custom-dx-table.table .has-error input.form-control {
        border-color: var(--grid-danger) !important;
    }

        /* Keep error border on hover (beats generic input:hover rules) */
        body.ff-app .ff-waybill table.custom-dx-table.table input.form-control.ng-invalid.ng-touched:hover,
        body.ff-app .ff-waybill table.custom-dx-table.table .has-error input.form-control:hover {
            border-color: var(--grid-danger) !important;
        }

        /* Error focus ring */
        body.ff-app .ff-waybill table.custom-dx-table.table input.form-control.ng-invalid.ng-touched:focus,
        body.ff-app .ff-waybill table.custom-dx-table.table .has-error input.form-control:focus {
            border-color: var(--grid-danger) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--grid-danger) 28%, transparent) !important;
        }

    /* Success / warning (optional if you use these states) */
    body.ff-app .ff-waybill table.custom-dx-table.table .has-success input.form-control {
        border-color: var(--grid-success) !important;
    }

    body.ff-app .ff-waybill table.custom-dx-table.table .has-warning input.form-control {
        border-color: var(--grid-warning) !important;
    }

    /* Kill legacy dotted error borders inside the grid */
    body.ff-app .ff-waybill table.custom-dx-table.table .has-error .form-control {
        border-style: solid !important;
        border-bottom-style: solid !important;
    }

    /* ---------- ACTION / ICON CELL ---------- */
    body.ff-app .ff-waybill table.custom-dx-table.table .custom-dx-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        color: var(--text-muted);
        cursor: pointer;
        user-select: none;
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

        body.ff-app .ff-waybill table.custom-dx-table.table .custom-dx-icon:hover {
            background: color-mix(in srgb, var(--primary) 10%, var(--surface));
            color: var(--primary);
        }

        body.ff-app .ff-waybill table.custom-dx-table.table .custom-dx-icon:active {
            background: color-mix(in srgb, var(--primary) 16%, var(--surface));
        }
/* Table shell */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid {
    width: 100%;
    min-width: 1080px;
    margin: 0 !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed;
    overflow: hidden; /* clips corners in most browsers */
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 72px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-qty {
    width: 62px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-code {
    width: 112px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: auto;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim {
    width: 94px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-volume,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 108px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-value {
    width: 112px;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-action {
    width: 44px;
}

body.ff-app .ff-waybill .ff-parcel-fieldset {
    padding: 0 12px 8px !important;
    margin-bottom: 8px !important;
    overflow: visible;
}

body.ff-app .ff-waybill .ff-parcel-fieldset > legend {
    margin-bottom: 4px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

body.ff-app .ff-waybill .ff-parcel-fieldset .container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-parcel-fieldset .row.margin-bottom-10 {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-grid-responsive {
    position: relative;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: visible;
}

body.ff-app .ff-waybill .ff-parcel-grid-responsive--dropdowns {
    padding-bottom: 4px;
}

    /* Remove bootstrap double borders inside */
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid.table-bordered {
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

/* ---------- THEAD (this is what fixes your light-mode “terrible”) ---------- */
/* Light: integrated surface header, readable text */
body.ff-app:not([data-theme="dark"]) .ff-waybill table.custom-dx-table.ff-parcel-grid > thead {
    background: var(--surface-3) !important;
}

/* Dark: keep your nice dark look */
body.ff-app[data-theme="dark"] .ff-waybill table.custom-dx-table.ff-parcel-grid > thead {
    background: var(--nav-bg-2) !important;
}

/* Header cells */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > td {
    padding: 5px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--divider) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    line-height: 1.15 !important;
    text-transform: uppercase;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Header text colors per theme */
body.ff-app:not([data-theme="dark"]) .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > * {
    color: var(--text) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > * {
    color: var(--nav-text) !important;
    border-right-color: rgba(255,255,255,0.10) !important;
    border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent) !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > thead > tr > *:last-child {
    border-right: 0 !important;
}

/* ---------- TBODY / CELLS ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td {
    padding: 3px 6px !important;
    color: var(--text) !important;
    border: 0 !important;
    border-right: 1px solid var(--divider) !important;
    border-bottom: 1px solid var(--divider) !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > *:last-child {
    border-right: 0 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr:last-child > * {
    border-bottom: 0 !important;
}

/* Zebra + hover tuned for BOTH themes */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr:nth-child(even) > * {
    background: var(--surface-2) !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important;
}

/* Entry row (first row) is intentional */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > * {
    background: var(--surface-2) !important;
}

/* Highlight cell while editing */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody td:focus-within {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* ---------- Inputs inside grid (form-control + custom-form-control) ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.form-control,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.custom-form-control,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid textarea.form-control,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid select.form-control {
    width: 100%;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    /* Focus ring uses your token */
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.form-control:focus,
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.custom-form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* Disabled state */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input:disabled {
    background: var(--surface-3) !important;
    color: var(--text-disabled) !important;
    border-color: var(--divider) !important;
}

/* ---------- ui-select in grid (match token inputs) ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap .ui-select-search {
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 22px 2px 6px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn {
    position: relative;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn > .btn-link {
    align-items: center;
    display: inline-flex;
    height: 14px;
    justify-content: center;
    line-height: 14px;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn > .btn-link .glyphicon {
    line-height: 1;
    top: 0;
}

    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap > .ui-select-match > .btn:focus,
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap .ui-select-search:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px var(--focus) !important;
    }

/* ---------- Validation in grid (Angular + bootstrap wrappers) ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.ng-invalid.ng-touched,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .has-error input {
    border-color: var(--error) !important;
}

    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid input.ng-invalid.ng-touched:focus,
    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .has-error input:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 28%, transparent) !important;
    }

/* Kill legacy dotted borders inside this table */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .has-error .form-control {
    border-style: solid !important;
    border-bottom-style: solid !important;
}

/* ---------- Action icons ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .custom-dx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .custom-dx-icon:hover {
        background: color-mix(in srgb, var(--primary) 10%, var(--surface));
        color: var(--primary);
    }

/* ---------- Footer totals row ---------- */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > td {
    padding: 5px 6px !important;
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border: 0 !important;
    border-top: 1px solid var(--divider) !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child {
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child .margin-left-20,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child .margin-right-20,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child .margin-right-5 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:first-child span + span {
    margin-left: 5px !important;
}

/* ---------- OPTIONAL: STICKY HEADER (requires a scroll wrapper) ----------
.ff-grid-wrap { max-height: 360px; overflow: auto; }
.ff-grid-wrap table.custom-dx-table thead > tr > * { position: sticky; top: 0; z-index: 2; }
----------------------------------------------------------------------- */
/* =========================================================
   PARCEL DETAILS GRID – token based (light + dark)
========================================================= */

/* Column sizing moved out of inline styles */
body.ff-app .ff-waybill .ff-col-code {
    min-width: 112px;
}

body.ff-app .ff-waybill .ff-col-desc {
    min-width: 150px;
}

body.ff-app .ff-waybill .ff-col-actions {
    width: 44px;
    min-width: 44px;
}

body.ff-app .ff-waybill.ff-quick-capture table.custom-dx-table.ff-parcel-grid > thead > tr > td:last-child,
body.ff-app .ff-waybill.ff-quick-capture table.custom-dx-table.ff-parcel-grid > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-quick-capture table.custom-dx-table.ff-parcel-grid > tfoot > tr > th:last-child {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    text-align: center;
}

/* Add button (plus) – token based */
body.ff-app .ff-waybill #addNewParcel.ff-parcel-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 3;
    float: none !important;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0 !important;
    border-radius: 999px;
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 70%, black) !important;
    box-shadow: var(--shadow-1);
}

    body.ff-app .ff-waybill #addNewParcel.ff-parcel-add:hover {
        background: var(--primary-hover) !important;
    }

    body.ff-app .ff-waybill #addNewParcel.ff-parcel-add:active {
        background: var(--primary-active) !important;
    }

    body.ff-app .ff-waybill #addNewParcel.ff-parcel-add:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 3px var(--focus), var(--shadow-1) !important;
    }



/* Toggle icon in header */
body.ff-app .ff-waybill .ff-parcel-grid-toggle {
    font-weight: 400;
    cursor: pointer;
    margin-left: 6px !important;
    color: color-mix(in srgb, var(--text-muted) 85%, var(--primary)) !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .margin-left-25 {
    margin-left: 6px !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot .margin-left-20,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tfoot .margin-right-20 {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

body.ff-app[data-theme="dark"] .ff-waybill .ff-parcel-grid-toggle {
    color: color-mix(in srgb, var(--nav-text-muted) 85%, var(--primary)) !important;
}

body.ff-app .ff-waybill .ff-parcel-grid-toggle:hover {
    color: var(--primary) !important;
}



/* =========================================================
   GLOBAL TOP BAR (PAGE HEADER) – unified + long-label safe
   Applies everywhere via #page-title.ff-page-header
   Uses ONLY your tokens
========================================================= */

/* --- 0) Neutralize legacy #page-title rules that fight the new header --- */
body.ff-app #page-title {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    /* --- 1) Header shell (consistent across all pages/themes) --- */
    body.ff-app #page-title.ff-page-header {
        background: var(--surface) !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: var(--shadow-1) !important;
        padding: 12px 14px !important;
        margin: 0 0 12px 0 !important;
    }

        /* Inner row: subtle “production” polish (works in light + dark via tokens) */
/*        body.ff-app #page-title.ff-page-header .ff-page-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px 16px;
            flex-wrap: wrap;
            background: var(--surface) !important;
            padding: 10px 12px !important;
            border-radius: calc(var(--radius-md) - 2px) !important;
            box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 55%, white) !important;
        }*/

        /* --- 2) Title area (stable, clean, consistent) --- */
        body.ff-app #page-title.ff-page-header .ff-page-title-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 240px;  /*keeps layout stable as toolbar wraps*/
        }

        body.ff-app #page-title.ff-page-header .ff-page-title {
            margin: 0 !important;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text) !important;
            font-weight: 750;
            font-size: 22px;
            letter-spacing: .02em;
            line-height: 1.1;
            text-transform: uppercase;
        }

        body.ff-app #page-title.ff-page-header .ff-page-subtitle {
            color: var(--text-muted);
            font-weight: 700;
            letter-spacing: .08em;
            opacity: .9;
        }

        /* Favourite/star button */
        body.ff-app #page-title.ff-page-header .ff-fav-btn,
        body.ff-app #page-title.ff-page-header .ff-icon-btn {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            padding: 0;
            transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
        }

            body.ff-app #page-title.ff-page-header .ff-fav-btn:hover,
            body.ff-app #page-title.ff-page-header .ff-icon-btn:hover {
                background: var(--surface-2);
                border-color: color-mix(in srgb, var(--border) 80%, black);
                transform: translateY(-1px);
            }

            body.ff-app #page-title.ff-page-header .ff-fav-btn:active,
            body.ff-app #page-title.ff-page-header .ff-icon-btn:active {
                transform: translateY(0);
                background: var(--surface-3);
            }

            body.ff-app #page-title.ff-page-header .ff-fav-btn:focus,
            body.ff-app #page-title.ff-page-header .ff-icon-btn:focus {
                box-shadow: 0 0 0 3px var(--focus);
            }

        /* --- 3) Toolbar layout --- */
        body.ff-app #page-title.ff-page-header .ff-toolbar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            margin-left: auto !important;
            text-align: right;
        }

        body.ff-app .ff-finance.ff-capture-page:not(.ff-supplier-invoice) #page-title.ff-page-header .ff-page-title-wrap,
        body.ff-app .ff-view-crdr #page-title.ff-page-header .ff-page-title-wrap {
            flex: 0 0 auto;
        }

        body.ff-app .ff-finance.ff-capture-page:not(.ff-supplier-invoice) #page-title.ff-page-header .ff-toolbar,
        body.ff-app .ff-view-crdr #page-title.ff-page-header .ff-toolbar {
            flex: 1 1 auto;
            justify-content: flex-end !important;
            margin-left: auto !important;
            min-width: 0;
        }

            /* --- 4) Actions (THIS is the big win for long labels) --- */
            /* Icon on top + label underneath, consistent sizing */
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action,
            body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
                width: 96px;  /*uniform + looks like your “old production” toolbar */
                height: 56px !important;  /*enough for 2-line labels */
                padding: 8px 10px !important;
                display: inline-flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                border-radius: var(--radius-md) !important;
                border: 1px solid var(--border) !important;
                background: var(--surface) !important;
                color: var(--text) !important;
                text-align: center;
                user-select: none;
                box-shadow: none !important;
                transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
            }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:hover,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:hover {
                    background: var(--surface-2) !important;
                    border-color: color-mix(in srgb, var(--border) 80%, black) !important;
                    transform: translateY(-1px);
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:active,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:active {
                    transform: translateY(0);
                    background: var(--surface-3) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:focus,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:focus {
                    box-shadow: 0 0 0 3px var(--focus) !important;
                }

                /* Icon + label styling */
                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action i,
                body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle i {
                    font-size: 16px !important;
                    line-height: 1 !important;
                    color: currentColor !important;
                }

            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action-label {
                font-size: 11px !important;
                font-weight: 750 !important;
                line-height: 1.05 !important;
                letter-spacing: .06em;
                text-transform: uppercase;
                color: currentColor !important;
                 /*keep long labels tidy*/
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            body.ff-app #page-title.ff-page-header .ff-toolbar a.dropdown-toggle:has(.sparkline):has(.values) {
                width: 96px;
                height: 56px;
                padding: 8px 10px;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border-radius: var(--radius-md);
                border: 1px solid var(--border);
                background: var(--surface);
                color: var(--text) !important;
                text-align: center;
            }

            body.ff-app #page-title.ff-page-header .ff-toolbar a.dropdown-toggle:has(.values p) .values p {
                margin: 0;
                font-size: 11px;
                font-weight: 750;
                line-height: 1.05;
                letter-spacing: .06em;
                text-transform: uppercase;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: currentColor !important;
            }


            /* Primary action */
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary {
                background: var(--primary) !important;
                border-color: var(--primary) !important;
                color: var(--on-primary) !important;
            }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:hover {
                    background: var(--primary-hover) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:active {
                    background: var(--primary-active) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:focus {
                    box-shadow: 0 0 0 3px var(--focus), var(--shadow-1) !important;
                }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary[disabled],
                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-primary:disabled {
                    opacity: .55 !important;
                    transform: none !important;
                    box-shadow: none !important;
                }

            /* Danger action (works even if some pages use .btn-danger instead) */
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-danger,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.btn-danger {
                border-color: color-mix(in srgb, var(--error) 55%, var(--border)) !important;
                color: var(--error) !important;
                background: color-mix(in srgb, var(--error) 6%, var(--surface)) !important;
            }

                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-action-danger:hover,
                body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.btn-danger:hover {
                    background: color-mix(in srgb, var(--error) 10%, var(--surface)) !important;
                    border-color: color-mix(in srgb, var(--error) 70%, var(--border)) !important;
                }

        /* --- 5) Dropdown menu polish (token based) --- */
        body.ff-app #page-title.ff-page-header .dropdown-menu {
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius-md) !important;
            box-shadow: var(--shadow-1) !important;
            padding: 6px !important;
        }

            body.ff-app #page-title.ff-page-header .dropdown-menu .liLine {
                border-bottom: 1px solid var(--divider) !important;
                padding: 8px 10px !important;
                line-height: 1.2 !important;
            }

                body.ff-app #page-title.ff-page-header .dropdown-menu .liLine:last-child {
                    border-bottom: 0 !important;
                }

            body.ff-app #page-title.ff-page-header .dropdown-menu label {
                color: var(--text) !important;
                font-weight: 650;
            }

        /* Disabled action buttons (works for <button>, <a>, and .btn btn-o patterns) */
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action[disabled],
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:disabled,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle[disabled],
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle:disabled,
        body.ff-app #page-title.ff-page-header .ff-toolbar .btn[disabled],
        body.ff-app #page-title.ff-page-header .ff-toolbar .btn:disabled,
        body.ff-app #page-title.ff-page-header .ff-toolbar .btn.disabled,
        body.ff-app #page-title.ff-page-header fieldset[disabled] .ff-toolbar .btn {
            cursor: not-allowed !important;
            pointer-events: none !important; /* prevents dropdown toggles firing */
            opacity: 0.55 !important;
            background: var(--surface-2) !important;
            border-color: var(--divider) !important;
            color: var(--text-disabled) !important;
            transform: none !important;
            box-shadow: none !important;
            filter: none !important;
        }

            /* Ensure icon + label inherit the disabled color (your sparkline/values structure) */
            /*body.ff-app #page-title.ff-page-header .ff-toolbar .btn[disabled] i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .btn:disabled i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .btn[disabled] p,
            body.ff-app #page-title.ff-page-header .ff-toolbar .btn:disabled p,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action[disabled] i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:disabled i,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action[disabled] .ff-action-label,
            body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:disabled .ff-action-label {
                color: var(--text-disabled) !important;
            }*/

        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action i,
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action .fa,
        body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action .ff-action-label,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle i,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .fa,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .sparkline,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .values,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .values p,
        body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle .caret {
            color: currentColor !important;
        }

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-chart-toolbar-action {
    min-width: 56px !important;
    width: 56px !important;
    padding: 8px 10px !important;
}

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-chart-toolbar-action i {
        color: var(--primary) !important;
        font-size: 18px !important;
    }

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-dashboard-menu-toggle {
    min-width: 56px !important;
    width: 56px !important;
    padding: 8px 10px !important;
}

    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action.ff-dashboard-menu-toggle i {
        color: var(--primary) !important;
        font-size: 17px !important;
    }

body.ff-app .ff-dashboard #page-title.ff-page-header {
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

body.ff-app .ff-dashboard #page-title.ff-page-header .ff-page-header-row {
    align-items: center !important;
    min-height: 0 !important;
}

body.ff-app .ff-dashboard #page-title.ff-page-header .ff-toolbar {
    gap: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header {
    margin-bottom: 6px !important;
    padding: 3px 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-page-title {
    font-size: 18px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-fav-btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-icon-btn {
    height: 26px !important;
    width: 26px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar {
    gap: 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
    gap: 2px !important;
    height: 34px !important;
    padding: 3px 4px !important;
    width: 58px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action.ff-chart-toolbar-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action.ff-dashboard-menu-toggle {
    min-width: 34px !important;
    width: 34px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action i,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .dropdown-toggle i {
    font-size: 13px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-dashboard #page-title.ff-page-header .ff-toolbar .ff-action-label {
    font-size: 8px !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
    -webkit-line-clamp: 1 !important;
}


/* --- 6) Mobile/smaller widths: allow a tighter button width automatically --- */
@media (max-width: 1200px) {
    body.ff-app #page-title.ff-page-header .ff-toolbar .ff-action:not(.ff-chart-toolbar-action):not(.ff-dashboard-menu-toggle),
    body.ff-app #page-title.ff-page-header .ff-toolbar .dropdown-toggle {
        width: 88px;
    }
}


/* =========================================================
   TOPBAR RIGHT NAV (Enterprise polish) – token-only
   No HTML changes. Put at END of stylesheet.
========================================================= */

@media (min-width: 768px) {

    /* ---------- 1) Layout / rhythm ---------- */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li {
            float: none !important;
        }

            /* Topbar “control system” */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
                --tb-ctl-h: 34px;
                --tb-ctl-pad-x: 10px;
                --tb-ctl-radius: 999px;
                --tb-ctl-border: color-mix(in srgb, var(--topbar-text) 16%, transparent);
                --tb-ctl-bg: color-mix(in srgb, var(--topbar-bg) 20%, transparent);
                --tb-ctl-bg-hover: color-mix(in srgb, var(--topbar-hover) 35%, transparent);
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important;
                height: var(--tb-ctl-h) !important;
                padding: 0 var(--tb-ctl-pad-x) !important;
                border-radius: var(--tb-ctl-radius) !important;
                border: 1px solid var(--tb-ctl-border) !important;
                background: var(--tb-ctl-bg) !important;
                color: var(--topbar-text) !important;
                opacity: 1 !important;
                font-size: 12px !important;
                font-weight: 650 !important;
                letter-spacing: .02em !important;
                text-transform: none !important; /* enterprise: stop shouting */

                line-height: 1 !important;
                white-space: nowrap !important;
                transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a:hover {
                    background: var(--tb-ctl-bg-hover) !important;
                    border-color: color-mix(in srgb, var(--topbar-text) 24%, transparent) !important;
                    transform: translateY(-1px);
                }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a:active {
                    transform: none;
                }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a:focus-visible {
                    outline: 0 !important;
                    box-shadow: 0 0 0 3px var(--focus) !important;
                }

                /* ---------- 2) Icons: stop inline margin-top + normalize sizes ---------- */
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a i {
                    display: inline-block !important;
                    margin: 0 !important;
                    font-size: 16px !important; /* consistent */
                    line-height: 1 !important;
                    color: currentColor !important;
                    transform: translateY(0) !important; /* cancel inline “margin-top” */
                }

                /* The two icon-only items (dash toggle + helpdesk): turn into true icon buttons */
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a > span.title {
                    display: inline-flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    width: 32px !important;
                    height: 32px !important;
                }

            /* ---------- 3) Favourite Pages: reduce shoutiness + unify styling ---------- */
            /* Normalize label + star; override inline gold and large font-size */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding {
                font-weight: 700 !important;
                letter-spacing: .04em !important;
                text-transform: uppercase !important; /* just this one can stay “label-like” */
                padding: 0 12px !important;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding > i.fa-star {
                    color: var(--warning) !important; /* token, not hardcoded gold */
                    font-size: 16px !important; /* override inline 26px */
                }

            /* Make Favourite Pages “quieter” at rest, more visible on hover */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding {
                background: color-mix(in srgb, var(--topbar-bg) 14%, transparent) !important;
                border-color: color-mix(in srgb, var(--topbar-text) 14%, transparent) !important;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.dropdown > a.ng-binding:hover {
                    background: color-mix(in srgb, var(--topbar-hover) 38%, transparent) !important;
                }

            /* ---------- 4) User chip: make it look “account control”, not a random button ---------- */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a {
                padding: 0 10px !important;
                gap: 10px !important;
                font-weight: 650 !important;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a img {
                    width: 26px !important;
                    height: 26px !important;
                    border-radius: 999px !important;
                    border: 1px solid color-mix(in srgb, var(--topbar-text) 18%, transparent) !important;
                    margin: 0 !important;
                }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .username,
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .text-username {
                    color: var(--topbar-text) !important; /* beats legacy .text-username forcing white */
                    display: inline-flex !important;
                    align-items: center !important;
                    gap: 6px !important;
                    margin: 0 !important;
                    line-height: 1 !important;
                }

            /* Optional enterprise separator before account cluster (subtle) */
            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user {
                margin-left: 6px !important;
                padding-left: 10px !important;
                position: relative;
            }

                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user:before {
                    content: "" !important;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    width: 1px;
                    height: 18px;
                    transform: translateY(-50%);
                    background: color-mix(in srgb, var(--topbar-text) 14%, transparent);
                }

    /* ---------- 5) Dropdown menus: unify, fix padding, fix separators ---------- */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-1) !important;
        padding: 6px !important;
        margin-top: 10px !important;
        min-width: 220px !important;
        z-index: 1060 !important;
    }

        /* ✅ KILL the “black triangle” pointer / default caret/arrow (the big offender) */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu:before,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu:after,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark:before,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark:after,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light:before,
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light:after {
            display: none !important;
            content: none !important;
            border: 0 !important;
        }

        /* Clean dropdown rows */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu .liLine {
            border: 0 !important;
            padding: 0 !important;
            line-height: normal !important;
        }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu > li > a {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 10px 10px !important;
            border-radius: var(--radius-sm) !important;
            color: var(--text) !important;
            background: transparent !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
        }

            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu > li > a:hover {
                background: var(--surface-2) !important;
            }

        /* Add subtle dividers between items (enterprise menu feel) */
        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu > li + li > a {
            border-top: 1px solid var(--divider) !important;
        }
}

/* Dark mode: ensure dropdowns still look correct */
body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu,
body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-light,
body.ff-app[data-theme="dark"] .ff-shell .navbar-collapse.ff-topnav-bg .navbar-right .dropdown-menu.dropdown-dark {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* =========================================================
   TOPBAR – density pass (reduce vertical space)
   No HTML changes
========================================================= */

@media (min-width: 768px) {

    /* 1) Reduce overall navbar vertical padding */
    body.ff-app .ff-shell .navbar-header,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        min-height: 44px !important;
    }

    /* 2) Tighten the "top-left square" (brand / togglers) */
    body.ff-app .ff-shell .navbar-header {
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        gap: 10px !important;
    }

        /* Brand/logo should not set the bar height */
        body.ff-app .ff-shell .navbar-header .navbar-brand img {
            max-height: 30px !important; /* was 50px */
            max-width: 160px !important;
        }

        /* Make the toggler buttons match the compact system */
        body.ff-app .ff-shell .navbar-header .btn.btn-navbar,
        body.ff-app .ff-shell .navbar-header .sidebar-toggler,
        body.ff-app .ff-shell .navbar-header .sidebar-mobile-toggler,
        body.ff-app .ff-shell .navbar-header #menu-toggler {
            height: 32px !important;
            width: 32px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            border-radius: 999px !important;
            border: 1px solid color-mix(in srgb, var(--topbar-text) 16%, transparent) !important;
            background: color-mix(in srgb, var(--topbar-bg) 16%, transparent) !important;
        }

    /* 3) Tighten right controls you already styled */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
        height: 32px !important; /* was 34 */
        padding: 0 9px !important; /* slightly tighter */
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a > span.title {
            width: 28px !important;
            height: 28px !important;
        }

    /* 4) Tab/history chips: make them fit the compact bar */
    body.ff-app .ff-historybar-wrap {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
        /* If your tab-bar partial uses common "pill/chip" classes, this will help.
     Adjust selectors to match your chip class if needed. */
        body.ff-app .ff-historybar-wrap .btn,
        body.ff-app .ff-historybar-wrap a,
        body.ff-app .ff-historybar-wrap .nav > li > a {
            height: 30px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
        }

    /* 5) Reduce banner visual weight (if you’re using gradient/image) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        background-position: center !important;
        background-size: cover !important;
    }
}

/* =========================================================
   TOP BAR – hard override (actually shrinks + fixes left togglers)
   Place at END of stylesheet.
========================================================= */

@media (min-width: 768px) {

    /* 1) Force the actual navbar row height */
    body.ff-app .navbar,
    body.ff-app .ff-shell .navbar,
    body.ff-app .ff-shell .ff-topnav,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        min-height: 44px !important;
        height: 44px !important;
    }

    /* 2) Header (top-left block) must not set its own tall height */
    body.ff-app .navbar-header {
        height: 44px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

        /* Logo must not dictate height */
        body.ff-app .navbar-header .navbar-brand {
            height: 44px !important;
            padding: 0 10px !important;
            display: inline-flex !important;
            align-items: center !important;
        }

            body.ff-app .navbar-header .navbar-brand img {
                max-height: 28px !important; /* key shrink */
                max-width: 160px !important;
            }

        /* 3) Make the LEFT togglers look like proper icon buttons (and stop the weird blobs) */
        body.ff-app .navbar-header a.sidebar-mobile-toggler,
        body.ff-app .navbar-header a.sidebar-toggler,
        body.ff-app .navbar-header a#menu-toggler {
            width: 32px !important;
            height: 32px !important;
            padding: 0 !important;
            margin: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 999px !important;
            border: 1px solid color-mix(in srgb, var(--topbar-text) 16%, transparent) !important;
            background: color-mix(in srgb, var(--topbar-bg) 18%, transparent) !important;
            box-shadow: none !important;
            color: var(--topbar-text) !important;
            text-decoration: none !important;
        }

            /* Kill any inline-ish icon offsets so they center */
            body.ff-app .navbar-header a.sidebar-mobile-toggler i,
            body.ff-app .navbar-header a.sidebar-toggler i,
            body.ff-app .navbar-header a#menu-toggler i {
                margin-top: 0 !important;
                font-size: 18px !important;
                line-height: 1 !important;
            }

    /* If bootstrap visibility utilities are misbehaving, enforce them */
    @media (min-width: 992px) {
        body.ff-app .navbar-header a.sidebar-mobile-toggler {
            display: none !important;
        }
    }

    @media (min-width: 768px) {
        body.ff-app .navbar-header a#menu-toggler {
            display: none !important;
        }
    }

    /* 4) Blue bar content (right side) */
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
    }

        body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right {
            margin: 0 0 0 auto !important;
            height: 44px !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

            body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
                height: 32px !important;
                line-height: 32px !important;
                padding: 0 10px !important;
                display: inline-flex !important;
                align-items: center !important;
                border-radius: 999px !important;
            }

                /* Remove the inline icon vertical nudges in the right nav too */
                body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a i {
                    margin-top: 0 !important;
                }
}

/* If you use --ff-topbar-height for fixed offsets, update it to match the new height */
body.ff-app {
    --ff-topbar-height: 44px;
}

/* =========================================================
   TOPBAR FIX: respect Bootstrap hidden/visible togglers again
   Paste AFTER your existing topbar shrink block.
========================================================= */

/* Desktop / tablet */
@media (min-width: 768px) {
    /* Hide the XS menu toggler on non-XS */
    body.ff-app .navbar-header a#menu-toggler {
        display: none !important;
    }
}

/* Large screens: show ONLY the desktop sidebar toggler */
@media (min-width: 992px) {
    body.ff-app .navbar-header a.sidebar-toggler {
        display: inline-flex !important;
    }

    body.ff-app .navbar-header a.sidebar-mobile-toggler {
        display: none !important;
    }
}

/* Small/medium: show ONLY the mobile sidebar toggler */
@media (max-width: 991px) {
    body.ff-app .navbar-header a.sidebar-mobile-toggler {
        display: inline-flex !important;
    }

    body.ff-app .navbar-header a.sidebar-toggler {
        display: none !important;
    }
}

/* IMPORTANT: stop our styling from “reviving” hidden buttons */
body.ff-app .navbar-header a.sidebar-mobile-toggler,
body.ff-app .navbar-header a.sidebar-toggler,
body.ff-app .navbar-header a#menu-toggler {
    /* keep sizing/shape, but DO NOT force display with !important here */
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

    /* Kill the inline-ish vertical nudges so icons center */
    body.ff-app .navbar-header a.sidebar-mobile-toggler i,
    body.ff-app .navbar-header a.sidebar-toggler i,
    body.ff-app .navbar-header a#menu-toggler i {
        margin-top: 0 !important;
        line-height: 1 !important;
    }

body.ff-app .navbar-header a.sidebar-toggler.ff-sidebar-toggler--busy {
    cursor: progress;
    pointer-events: none;
}

body.ff-app .navbar-header a.sidebar-toggler.ff-sidebar-toggler--busy i {
    color: var(--primary);
}

body.ff-app .navbar-header a.ff-support-screenshot-btn {
    align-items: center;
    border-radius: 999px;
    color: inherit;
    display: inline-flex;
    float: right;
    height: 32px;
    justify-content: center;
    margin: 0 4px 0 0;
    opacity: .68;
    padding: 0;
    width: 32px;
}

@media (min-width: 768px) {
    body.ff-app .ff-shell .ff-topnav .navbar-header {
        flex: 0 0 70px !important;
        justify-content: center !important;
        max-width: 70px !important;
        min-width: 70px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 70px !important;
    }

    body.ff-app .navbar-header a.ff-support-screenshot-btn {
        flex: 0 0 32px;
        margin: 0 !important;
    }
}

body.ff-app .navbar-header a.ff-support-screenshot-btn {
    order: 20;
}

body.ff-app .navbar-header a.sidebar-mobile-toggler,
body.ff-app .navbar-header a.sidebar-toggler,
body.ff-app .navbar-header a#menu-toggler {
    order: 21;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn:hover,
body.ff-app .navbar-header a.ff-support-screenshot-btn:focus {
    background: rgba(0,0,0,.06);
    opacity: 1;
    text-decoration: none;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn i {
    font-size: 15px;
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn.ff-support-screenshot-btn--busy {
    cursor: progress;
    opacity: 1;
    pointer-events: none;
}

body.ff-app .navbar-header a.ff-support-screenshot-btn.ff-support-screenshot-btn--busy i {
    color: var(--primary);
}

/* Browser-tab screenshot fallback must capture the page itself, not its own
   confirmation dialog, backdrop, button, or wait indicators. */
body.ff-app.ff-support-capture-clean .swal2-container,
body.ff-app.ff-support-capture-clean .ff-support-screenshot-btn,
body.ff-app.ff-support-capture-clean .ff-portal-wait,
body.ff-app.ff-support-capture-clean #loading-bar,
body.ff-app.ff-support-capture-clean #loading-bar-spinner {
    display: none !important;
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-dialog .swal2-confirm.swal2-styled {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-dialog .swal2-confirm.swal2-styled:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-success .swal2-confirm.swal2-styled {
    background: #dff3d7 !important;
    border-color: #95cf82 !important;
    color: var(--text) !important;
}

body.ff-app .swal2-container .swal2-popup.ff-support-mail-success .swal2-confirm.swal2-styled:hover {
    background: #d3edc8 !important;
    border-color: #7fbd6a !important;
}

@media (min-width: 992px) {
    .app-navbar-fixed {
        padding-top: 44px;
    }
}

.ff-shell #sidebar .ff-nav-menu, .ff-shell #sidebar .main-navigation-menu {
    padding: 0 0 !important;
}

#sidebar > div nav > ul li a i[class*="ti-"] {
    margin-right: 0;
}

body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i, body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.active > a .item-media i {
  color: #fff !important;
}

/* Primary action polish (Save) */
body.ff-app .ff-action.ff-action-primary {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08)), var(--primary) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: var(--on-primary) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, var(--shadow-1) !important;
    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

    body.ff-app .ff-action.ff-action-primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, var(--shadow-2) !important;
        filter: saturate(1.08);
    }

    body.ff-app .ff-action.ff-action-primary:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-1) !important;
        filter: saturate(1.02);
    }

    body.ff-app .ff-action.ff-action-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 0 0 6px rgba(255,255,255,.35), var(--shadow-2) !important;
    }

    body.ff-app .ff-action.ff-action-primary:disabled {
        cursor: not-allowed;
        opacity: .55;
        filter: saturate(.75);
    }

div.ff-page-body.ng-isolate-scope[block-ui="BlockUI"] {
    padding: 0 20px;
}

/* =========================================================
   PRIMITIVE: action chip (for header tools)
========================================================= */
body.ff-app .ff-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

    body.ff-app .ff-action:hover {
        background: var(--surface-2) !important;
    }
.ff-dash-button{
    padding: 0 0 0 0;
}
.ff-dash-button > a {
    padding: 5px !important;
}

.ff-dash-button .panel-body {
    padding: 14px 0 !important;
}


/* footer/version row layout */
.ff-login-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* subtle toggle next to version */
.login-theme-toggle--meta {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    transition: opacity .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

    .login-theme-toggle--meta:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--text) 6%, transparent);
        border-color: var(--border);
    }

    .login-theme-toggle--meta:active {
        transform: translateY(1px);
    }

    .login-theme-toggle--meta:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus);
    }

#login-box.ff-login .login-theme-toggle--meta {
    position: static !important;
    top: auto !important;
    right: auto !important;
}


/* --- Login footer meta row: 3 items, perfectly aligned --- */
#login-box.ff-login .ff-login-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    box-sizing: border-box;
    padding: 6px 14px;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px !important;
    line-height: 16px !important;
}

/* ensure each cell centers vertically */
#login-box.ff-login .ff-login-meta__item {
    display: flex;
    align-items: center;
    min-height: 28px;
    font-size: inherit !important;
    line-height: inherit !important;
}

#login-box.ff-login .ff-login-meta__left {
    justify-content: flex-start;
    white-space: nowrap;
}

#login-box.ff-login .ff-login-meta__center {
    justify-content: center;
}

#login-box.ff-login .ff-login-meta__right {
    justify-content: flex-end;
}

#login-box.ff-login .ff-login-meta a,
#login-box.ff-login .ff-login-meta span {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* kill the old baseline offset that makes copyright sit “lower/higher” */
#login-box.ff-login #copyright {
    padding-bottom: 0 !important;
}

/* --- Sliding theme switch (2 obvious states) --- */
#login-box.ff-login .ff-theme-switch {
    position: static !important;
    width: 54px;
    height: 28px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}

#login-box.ff-login .ff-theme-switch__thumb {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background .15s ease, color .15s ease;
}

/* LIGHT state */
#login-box.ff-login .ff-theme-switch:not(.is-dark) {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

/* DARK state */
#login-box.ff-login .ff-theme-switch.is-dark {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

    #login-box.ff-login .ff-theme-switch.is-dark .ff-theme-switch__thumb {
        transform: translateX(26px);
        background: var(--primary);
        color: var(--surface);
    }

/* Ensure the li behaves like a topbar icon slot */
body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-theme {
    height: var(--ff-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

/* Topbar switch sizing + visuals */
body.ff-app .ff-theme-switch.ff-theme-switch--topbar {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    body.ff-app .ff-theme-switch.ff-theme-switch--topbar .ff-theme-switch__thumb {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--border); /* the visible ring you wanted */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform: translateX(2px);
        transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    }

        body.ff-app .ff-theme-switch.ff-theme-switch--topbar .ff-theme-switch__thumb .fa {
            font-size: 12px;
            color: var(--text-muted);
        }

    /* Dark state */
    body.ff-app .ff-theme-switch.ff-theme-switch--topbar.is-dark {
        background: color-mix(in srgb, var(--primary) 28%, var(--surface-2));
        border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    }

        body.ff-app .ff-theme-switch.ff-theme-switch--topbar.is-dark .ff-theme-switch__thumb {
            transform: translateX(20px);
            background: var(--primary);
            border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
        }

            body.ff-app .ff-theme-switch.ff-theme-switch--topbar.is-dark .ff-theme-switch__thumb .fa {
                color: var(--on-primary);
            }

    body.ff-app .ff-theme-switch.ff-theme-switch--topbar:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus);
    }

body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-font,
body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-density {
    height: var(--ff-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 4px;
}

body.ff-app .ff-grid-font-toggle,
body.ff-app .ff-grid-density-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

body.ff-app .ff-grid-font-toggle__button,
body.ff-app .ff-grid-density-toggle__button {
    width: 24px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

body.ff-app .ff-grid-font-toggle__button:hover,
body.ff-app .ff-grid-density-toggle__button:hover {
    background: var(--topbar-hover);
    color: var(--text);
}

body.ff-app .ff-grid-font-toggle__button:focus,
body.ff-app .ff-grid-density-toggle__button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus);
}

body.ff-app .ff-grid-font-toggle__button.is-active,
body.ff-app .ff-grid-density-toggle__button.is-active {
    background: var(--primary);
    color: var(--on-primary);
}

body.ff-app .ff-resource-mode-menu {
    border-bottom: 1px solid var(--border);
    padding: 8px 10px 10px;
}

body.ff-app .ff-resource-mode-menu__label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
}

body.ff-app .ff-resource-mode-toggle {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    width: 100%;
}

body.ff-app .ff-resource-mode-toggle__button {
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 12px;
    min-height: 30px;
    padding: 4px 8px;
    white-space: nowrap;
}

body.ff-app .ff-resource-mode-toggle__button + .ff-resource-mode-toggle__button {
    border-left: 1px solid var(--border);
}

body.ff-app .ff-resource-mode-toggle__button:hover,
body.ff-app .ff-resource-mode-toggle__button:focus {
    background: var(--topbar-hover);
    outline: none;
}

body.ff-app .ff-resource-mode-toggle__button:focus {
    box-shadow: inset 0 0 0 2px var(--focus);
}

body.ff-app .ff-resource-mode-toggle__button.is-active {
    background: var(--primary);
    color: var(--on-primary);
}

body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-report-method-host {
    align-items: center;
    display: flex;
    height: var(--ff-topbar-height);
    position: relative;
}

body.ff-app .ff-report-method-host > a {
    align-items: center;
    display: inline-flex !important;
    justify-content: center;
    min-width: 38px;
    position: relative;
}

body.ff-app .ff-report-method-host > a > .fa-cog {
    font-size: 20px;
}

body.ff-app .ff-report-method-host__state {
    background: var(--text-muted);
    border: 2px solid var(--topbar-bg);
    border-radius: 999px;
    bottom: 9px;
    height: 9px;
    position: absolute;
    right: 7px;
    width: 9px;
}

body.ff-app .ff-report-method-host__state.is-modern {
    background: var(--success);
}

body.ff-app .ff-report-method-host__state.is-crystal {
    background: var(--warning);
}

body.ff-app .ff-report-method-menu {
    color: var(--text);
    min-width: 320px;
    padding: 0;
}

body.ff-app .ff-report-method-menu__heading {
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 8px;
}

body.ff-app .ff-report-method-menu__heading strong {
    color: var(--text);
    font-size: 13px;
}

body.ff-app .ff-report-method-menu__heading span,
body.ff-app .ff-report-method-menu__scope,
body.ff-app .ff-report-method-menu__notice,
body.ff-app .ff-report-method-menu__loading {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

body.ff-app .ff-report-method-menu__scope {
    padding: 6px 12px;
}

body.ff-app .ff-report-method-menu__choice {
    padding: 0 8px 6px;
}

body.ff-app .ff-report-method-menu__choice > button {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
    display: grid;
    gap: 8px;
    grid-template-columns: 20px minmax(0, 1fr) 16px;
    min-height: 46px;
    padding: 6px 9px;
    text-align: left;
    width: 100%;
}

body.ff-app .ff-report-method-menu__choice > button:hover:not(:disabled),
body.ff-app .ff-report-method-menu__choice > button:focus:not(:disabled) {
    background: var(--topbar-hover);
    border-color: var(--primary);
    outline: none;
}

body.ff-app .ff-report-method-menu__choice > button.is-active {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

body.ff-app .ff-report-method-menu__choice > button:disabled {
    cursor: not-allowed;
    opacity: .62;
}

body.ff-app .ff-report-method-menu__choice > button > .fa:first-child {
    color: var(--primary);
    font-size: 17px;
    text-align: center;
}

body.ff-app .ff-report-method-menu__choice > button > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.ff-app .ff-report-method-menu__choice > button strong {
    font-size: 12px;
}

body.ff-app .ff-report-method-menu__choice > button small {
    color: var(--text-muted);
    font-size: 10px;
    white-space: normal;
}

body.ff-app .ff-report-method-menu__notice,
body.ff-app .ff-report-method-menu__loading {
    border-top: 1px solid var(--border);
    padding: 7px 12px;
    white-space: normal;
}

body.ff-app .ff-report-method-menu__notice.is-error {
    color: var(--danger);
}

body.ff-app.ff-low-resource-mode .ff-capture-page *,
body.ff-app.ff-low-resource-mode .ff-view-waybills * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

body.ff-app.ff-low-resource-mode .ff-capture-page fieldset,
body.ff-app.ff-low-resource-mode .ff-capture-page .ff-card,
body.ff-app.ff-low-resource-mode .ff-view-waybills .ff-card {
    box-shadow: none !important;
}

body.ff-app .ff-grid-font-toggle__button--small .fa {
    font-size: 10px;
}

body.ff-app .ff-grid-font-toggle__button--normal .fa {
    font-size: 12px;
}

body.ff-app .ff-grid-font-toggle__button--large .fa {
    font-size: 15px;
}

@media (min-width: 768px) {
    body.ff-app .ff-shell header.ff-topnav.navbar {
        display: flex !important;
        align-items: center !important;
        gap: 4px;
        width: 100%;
        overflow: visible;
    }

    body.ff-app .ff-shell .ff-topnav .navbar-header {
        flex: 0 0 auto;
        order: 1;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap {
        border-bottom: 0 !important;
        flex: 1 1 auto;
        margin: 0 !important;
        min-width: 0;
        order: 2;
        overflow: hidden;
        padding-left: 4px !important;
        padding-right: 6px !important;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap .history-tabs,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        padding-left: 4px;
        padding-right: 4px;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li {
        flex: 0 0 auto;
        min-width: 0;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
        flex: 1 1 124px;
        max-width: 150px;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a {
        justify-content: center;
        min-width: 30px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg {
        flex: 0 0 auto;
        margin-left: auto !important;
        min-width: 0;
        order: 3;
        padding-left: 6px !important;
        padding-right: 6px !important;
        width: auto !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right {
        gap: 4px !important;
        margin-right: 0 !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-favourites > a {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 32px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-favourites > a > i.fa-star {
        color: var(--warning) !important;
        font-size: 16px !important;
    }

    body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-theme,
    body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-font,
    body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-grid-density {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user {
        margin-left: 3px !important;
        padding-left: 5px !important;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a {
        gap: 6px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
        max-width: 120px;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .text-username {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
        max-width: 94px;
    }

    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .username,
    body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.current-user > a .text-username {
        max-width: 78px;
    }
}

.form-group{
    margin-bottom: 0;
}

fieldset{
    padding: 0 16px 16px 16px !important;
    margin: 0 0 8px 0 !important;
}

/* 1) Legend becomes a neutral "chip row" (no pill styling on legend itself) */
body.ff-app .ff-waybill fieldset > legend.ff-sr-legend {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    /* remove the pill look from the legend container */
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* 2) Text gets the "legend pill" styling instead */
body.ff-app .ff-waybill .ff-sr-legend__text {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border: 1px solid var(--divider) !important;
    border-radius: 999px !important;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* 3) Button becomes its own separate bubble pill */
body.ff-app .ff-waybill .ff-sr-legend .ff-sr-clear {
    position: static !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    opacity: .85;
    border-color: color-mix(in srgb, var(--error) 55%, var(--border)) !important;
    color: var(--error) !important;
    background: color-mix(in srgb, var(--error) 6%, var(--surface)) !important;
}

/* 4) Icon-only sizing (slightly larger reads better as its own bubble) */
body.ff-app .ff-waybill .ff-action.ff-action--icon {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    opacity: 80%;
}
    body.ff-app .ff-waybill .ff-action.ff-action--icon:hover{
        opacity: 100%;
    }

    body.ff-app .ff-waybill .ff-action.ff-action--icon i {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* keep ng-show/ng-hide reliable */
body.ff-app .ff-waybill .ff-action.ff-action--icon.ng-hide,
body.ff-app .ff-waybill .ff-action.ff-action--icon.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

body.ff-app .ff-action.ff-action--icon.ff-sr-switch {
    padding: 14px 28px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-action.ff-action--icon.ff-sr-switch {
    padding: 0 !important;
}

/* Busy filter rows should wrap into clean columns instead of allowing controls to collide. */
body.ff-app .ff-waybill .ff-waybill-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(150px, 180px)
        minmax(165px, 190px)
        minmax(170px, 210px)
        minmax(248px, 260px)
        minmax(180px, 220px);
    justify-content: start;
    column-gap: 18px;
    row-gap: 12px;
    align-items: end;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid::before,
body.ff-app .ff-waybill .ff-waybill-filter-grid::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .form-control,
body.ff-app .ff-waybill .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-waybill .ff-waybill-filter-grid .ui-select-container {
    width: 100%;
    max-width: 100%;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid textarea.form-control,
body.ff-app .ff-waybill .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-waybill .ff-filter-inline-row textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
    max-width: 248px;
}

body.ff-app .ff-waybill .ff-waybill-filter-grid .ff-filter-branch {
    min-width: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 18px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row::before,
body.ff-app .ff-waybill .ff-filter-flow-row::after,
body.ff-app .ff-waybill .ff-filter-inline-row::before,
body.ff-app .ff-waybill .ff-filter-inline-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-waybill .ff-filter-inline-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row .form-group,
body.ff-app .ff-waybill .ff-filter-inline-row .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row .form-control,
body.ff-app .ff-waybill .ff-filter-flow-row .ff-control,
body.ff-app .ff-waybill .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-waybill .ff-filter-inline-row .form-control,
body.ff-app .ff-waybill .ff-filter-inline-row .ff-control,
body.ff-app .ff-waybill .ff-filter-inline-row .ui-select-container {
    width: 100%;
    max-width: 100%;
}

body.ff-app .ff-waybill .ff-filter-inline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-field {
    flex: 0 1 220px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-party {
    flex: 1 1 300px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-client {
    flex: 0 1 240px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-agent,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-driver,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-town,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-hub,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-service,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-route,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-schedule,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-box,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-user {
    flex: 0 1 210px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-invoice {
    flex: 0 1 168px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-branch,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-area {
    flex: 0 1 155px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-vehicle,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-ref,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-order,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-courier,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-parcel-desc {
    flex: 0 1 160px;
}

body.ff-app .ff-waybill .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill .ff-filter-client-row > .ff-filter-order {
    flex: 1 1 132px;
    min-width: 118px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-capture-method,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-user {
    flex: 0 1 210px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-parcel-desc {
    flex-basis: 260px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-acc,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-receiver-acc,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-internal-id {
    flex: 0 1 112px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-zone {
    flex: 0 1 88px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-ring-code {
    flex: 0 1 105px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-bool,
body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-bool {
    flex: 0 1 86px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-bool-wide,
body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-bool-wide {
    flex: 0 1 112px;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-extra-group,
body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-pc-kgs-group {
    flex: 0 1 auto;
}

body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-bool-group {
    flex: 1 1 100%;
}

body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-capture-method {
    flex: 0 1 170px;
}

body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-security {
    flex-basis: 76px;
}

body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-pc,
body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-kgs {
    flex: 0 1 86px;
}

body.ff-app .ff-waybill .ff-filter-admin-id-row > .ff-filter-waybill-id {
    order: 0;
    margin-left: 0;
}

body.ff-app .ff-waybill .ff-filter-admin-id-row > .ff-filter-quote-id {
    order: 0;
    margin-left: 0;
}

body.ff-app .ff-waybill .ff-filter-acc label,
body.ff-app .ff-waybill .ff-filter-receiver-acc label,
body.ff-app .ff-waybill .ff-filter-zone label,
body.ff-app .ff-waybill .ff-filter-ref label,
body.ff-app .ff-waybill .ff-filter-order label {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-filter-actions-row {
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-filter-actions::before,
body.ff-app .ff-waybill .ff-filter-actions::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-filter-actions .btn,
body.ff-app .ff-waybill .ff-filter-actions .valuesonly,
body.ff-app .ff-waybill .ff-filter-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill .ff-filter-actions .btn {
    flex: 0 0 auto;
}

body.ff-app .ff-waybill .ff-filter-actions .valuesonly {
    display: inline-flex;
    align-items: center;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-clear {
    order: 1;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-show-dormant {
    order: 2;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-keep-open {
    order: 4;
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-search {
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-close {
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-close + .ff-filter-search {
    margin-left: 0 !important;
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-close {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    order: 5;
    padding-left: 0;
    padding-right: 0;
    width: var(--ff-control-h);
}

body.ff-app .ff-waybill .ff-filter-actions .ff-filter-search {
    order: 6;
}

body.ff-app .ff-view-waybills .ff-sr-card {
    padding: 0 10px 6px 10px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-waybills fieldset > legend.ff-sr-legend {
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-waybills .ff-sr-legend__text {
    padding: 4px 8px !important;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--bottom {
    display: block !important;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--top .ff-filter-actions-row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--top .ff-filter-actions {
    gap: 6px 10px;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-filter-actions-slot--top .btn {
    min-height: var(--ff-control-h);
    padding-top: 5px;
    padding-bottom: 5px;
}

body.ff-app .ff-view-waybills .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(140px, 165px)
        minmax(150px, 175px)
        minmax(165px, 190px)
        minmax(236px, 248px)
        minmax(150px, 180px);
    align-items: start;
    column-gap: 10px;
    row-gap: 4px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row,
body.ff-app .ff-view-waybills .ff-filter-inline-row {
    gap: 6px 10px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row:last-of-type,
body.ff-app .ff-view-waybills .ff-filter-inline-row:last-of-type {
    margin-bottom: 0;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row label,
body.ff-app .ff-view-waybills .ff-filter-inline-row label,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid label {
    display: block;
    line-height: 18px;
    margin-bottom: 1px;
    min-height: 20px;
    white-space: nowrap;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row label [json-dbl],
body.ff-app .ff-view-waybills .ff-filter-inline-row label [json-dbl],
body.ff-app .ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    margin-left: 6px;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app .ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h);
    max-height: var(--ff-control-h) !important;
    box-sizing: border-box;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
    white-space: pre-wrap;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    align-items: center;
    display: flex;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    display: block;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor-container,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor-container,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-container,
body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 4px;
    margin: 0;
    min-height: 32px;
    padding: 0 270px 0 0;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row::before,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .label,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .checkbox,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn {
    min-height: 30px;
    padding: 4px 9px;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .ff-grid-option-show-values,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .ff-grid-filter-exceptions {
    margin-left: 4px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    line-height: 22px;
    margin-right: 4px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .skinny-checkbox-inline .checkbox {
    display: inline-flex;
    align-items: center;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    padding-left: 25px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label:after {
    left: 2px !important;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-row {
    margin-top: 0;
}

body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel {
    background: transparent;
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: -32px;
    min-height: 32px;
    pointer-events: none;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar {
    background: transparent;
    min-height: 32px;
    padding: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-after {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    right: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-item {
    padding: 0 2px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-button {
    margin: 0;
}

body.ff-app .ff-view-waybills #pageInfoBadge {
    padding: 0 2px !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-headers {
    margin-top: 0;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-datagrid-filter-row > td,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-datagrid-filter-row > tr > td {
    box-sizing: border-box;
    overflow: hidden !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 30px;
    padding: 2px 4px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    margin: 0 0 0 6px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-info {
    margin: 0 6px;
    padding: 2px 4px;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 20px;
    margin: 0 1px;
    min-height: 24px;
    padding: 2px 6px;
}

body.ff-app[data-grid-font-size="normal"] .ff-view-waybills {
    --ff-grid-row-height: 16px;
    --ff-grid-cell-padding-x: 4px;
    --ff-grid-cell-padding-y: 0;
    --ff-grid-header-padding-y: 1px;
}

body.ff-app[data-grid-font-size="normal"] .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-font-size="normal"] .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-font-size="normal"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row > td {
    font-size: 12px !important;
    line-height: 1.15 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills {
    --ff-control-h: 28px;
    --ff-grid-row-height: 16px;
    --ff-grid-cell-padding-x: 4px;
    --ff-grid-cell-padding-y: 0;
    --ff-grid-header-padding-y: 1px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid label {
    font-size: 11px;
    height: 16px;
    line-height: 14px;
    margin-bottom: 0;
    max-height: 16px;
    min-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row label [json-dbl],
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row label [json-dbl],
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    display: inline-block;
    float: right;
    line-height: 14px;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    box-sizing: border-box;
    font-size: 11px;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-match,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-match,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-match {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    display: flex;
    font-size: 11px !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-search,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    font-size: 11px !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    align-items: center;
    display: flex;
    height: calc(var(--ff-control-h) - 2px);
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px);
    min-height: 0;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    font-size: 11px;
    min-height: 28px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .label {
    min-height: 20px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn {
    font-size: 11px;
    min-height: 24px;
    padding: 2px 7px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    font-size: 11px;
    line-height: 20px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row > td {
    font-size: 11px !important;
    line-height: 1.12 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-search-panel .dx-texteditor-input {
    font-size: 11px !important;
    min-height: 22px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-rowsview .dx-button,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-rowsview .dx-button-content {
    min-height: 16px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-rowsview .dx-button-content {
    padding: 0 2px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-container,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-icon {
    height: 12px !important;
    min-height: 12px !important;
    width: 12px !important;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager {
    font-size: 11px;
    min-height: 26px;
    padding-top: 1px;
    padding-bottom: 1px;
}

body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app[data-grid-font-size="small"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 18px;
    min-height: 20px;
    padding: 1px 5px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills {
    --ff-control-h: 28px;
    --ff-grid-row-height: 16px;
    --ff-grid-cell-padding-x: 4px;
    --ff-grid-cell-padding-y: 0;
    --ff-grid-header-padding-y: 1px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid label {
    font-size: 13px;
    line-height: 18px;
    min-height: 21px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input {
    font-size: 14px;
    height: var(--ff-control-h);
    min-height: var(--ff-control-h);
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    font-size: 13px;
    min-height: 34px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .btn {
    font-size: 13px;
    min-height: 32px;
    padding: 5px 10px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills .ff-view-waybills-grid-toolbar-row .clip-check label {
    font-size: 13px;
    line-height: 24px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-headers .dx-header-row > td,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row > td {
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-filter-row .dx-texteditor-input,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-search-panel .dx-texteditor-input {
    font-size: 15px !important;
    min-height: 30px;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-container,
body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid .dx-checkbox-icon {
    height: 22px !important;
    width: 22px !important;
}

body.ff-app[data-grid-font-size="large"] .ff-view-waybills #gridContainer .dx-datagrid-pager {
    font-size: 14px;
}

body.ff-app .ff-view-compact .ff-sr-card {
    padding: 0 10px 6px 10px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-compact fieldset > legend.ff-sr-legend {
    margin-bottom: 4px !important;
}

body.ff-app .ff-view-compact .ff-sr-legend__text {
    padding: 4px 8px !important;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--bottom {
    display: block !important;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--top .ff-filter-actions-row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--top .ff-filter-actions {
    gap: 6px 10px;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-compact .ff-filter-actions-slot--top .btn {
    min-height: var(--ff-control-h);
    padding-top: 5px;
    padding-bottom: 5px;
}

body.ff-app .ff-view-compact .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(140px, 165px)
        minmax(150px, 175px)
        minmax(165px, 190px)
        minmax(236px, 248px)
        minmax(150px, 180px);
    column-gap: 10px;
    row-gap: 4px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-filter-flow-row,
body.ff-app .ff-view-compact .ff-filter-inline-row {
    gap: 6px 10px;
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-filter-flow-row:last-of-type,
body.ff-app .ff-view-compact .ff-filter-inline-row:last-of-type {
    margin-bottom: 0;
}

body.ff-app .ff-view-compact .ff-filter-flow-row label,
body.ff-app .ff-view-compact .ff-filter-inline-row label,
body.ff-app .ff-view-compact .ff-waybill-filter-grid label {
    display: block;
    line-height: 18px;
    margin-bottom: 1px;
    min-height: 20px;
    white-space: nowrap;
}

body.ff-app .ff-view-compact .ff-filter-flow-row label [json-dbl],
body.ff-app .ff-view-compact .ff-filter-inline-row label [json-dbl],
body.ff-app .ff-view-compact .ff-waybill-filter-grid label [json-dbl] {
    margin-left: 6px;
}

body.ff-app .ff-view-compact .ff-filter-flow-row .ff-control,
body.ff-app .ff-view-compact .ff-filter-inline-row .ff-control,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-view-compact .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-view-compact .ff-filter-inline-row .ui-select-container,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-view-compact .ff-filter-flow-row .form-control,
body.ff-app .ff-view-compact .ff-filter-inline-row .form-control,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .form-control {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-view-compact .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-view-compact .ff-filter-inline-row textarea.form-control,
body.ff-app .ff-view-compact .ff-waybill-filter-grid textarea.form-control,
body.ff-app .ff-view-compact .accordion-no-display fieldset textarea.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
    white-space: pre-wrap;
}

body.ff-app .ff-view-compact .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-compact .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-compact .ff-filter-flow-row .dx-texteditor,
body.ff-app .ff-view-compact .ff-filter-inline-row .dx-texteditor,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .dx-texteditor,
body.ff-app .ff-view-compact .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-view-compact .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-view-compact .ff-waybill-filter-grid .dx-texteditor-input {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row {
    margin: 0;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 4px;
    min-height: 32px;
    padding: 0 220px 0 0;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .label,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .btn,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-btn,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .checkbox,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .btn,
body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-btn {
    min-height: 30px;
    padding: 4px 9px;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-grid-option-show-values {
    margin-left: 4px !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .ff-grid-toolbar-back {
    margin-left: auto !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .clip-check label {
    line-height: 22px;
    margin-right: 4px !important;
    padding-left: 25px !important;
}

body.ff-app .ff-view-compact .ff-grid-toolbar-row .clip-check label:after {
    left: 2px !important;
}

body.ff-app .ff-view-compact .ff-grid-result-row {
    margin-top: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel {
    background: transparent;
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: -32px;
    min-height: 32px;
    pointer-events: none;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar {
    background: transparent;
    min-height: 32px;
    padding: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar-after {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    right: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-toolbar-item {
    padding: 0 2px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-header-panel .dx-button {
    margin: 0;
}

body.ff-app .ff-view-compact #pageInfoBadge {
    padding: 0 2px !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-headers {
    margin-top: 0;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 30px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    margin: 0 0 0 6px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-info {
    margin: 0 6px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 20px;
    margin: 0 1px;
    min-height: 24px;
    padding: 2px 6px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel {
    background: transparent;
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: -32px;
    min-height: 32px;
    pointer-events: none;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar {
    background: transparent;
    min-height: 32px;
    padding: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-after {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    right: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-item {
    padding: 0 2px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-header-panel .dx-button {
    margin: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-headers {
    margin-top: 0;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 30px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    margin: 0 0 0 6px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-info {
    margin: 0 6px;
    padding: 2px 4px;
}

body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-navigate-button {
    line-height: 20px;
    margin: 0 1px;
    min-height: 24px;
    padding: 2px 6px;
}

body.ff-app .ff-view-compact .ff-sr-card > .row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-sr-card > .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-view-compact .ff-sr-card .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-view-compact .ff-sr-card .row:last-child > .col-md-12 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-end;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-compact .ff-sr-card .row:last-child .checkbox,
body.ff-app .ff-view-compact .ff-sr-card .row:last-child .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-collections .ff-grid-status-filters {
    align-items: center;
    display: flex;
    float: none !important;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

body.ff-app .ff-view-collections .ff-grid-status-filters .label {
    line-height: 18px;
}

body.ff-app .ff-view-collections .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    padding-right: 190px;
}

body.ff-app .ff-view-collections .ff-grid-result-row .dx-datagrid-header-panel {
    height: 0;
    margin-top: -32px;
    min-height: 0;
    overflow: visible;
}

body.ff-app .ff-view-collections .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-view-collections .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 32px;
    min-height: 32px;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 2px;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions .checkbox,
body.ff-app .ff-view-invoices .ff-finance-filter-actions .valuesonly,
body.ff-app .ff-view-invoices .ff-finance-filter-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions .checkbox label {
    display: inline-block;
    line-height: 20px;
    margin-bottom: 0;
    min-height: 0;
}

body.ff-app .ff-view-invoices .ff-finance-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-invoices .ff-finance-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-invoices #clientGridContainer .dx-command-edit .dx-button-content {
    align-items: center !important;
    display: inline-flex !important;
    overflow: visible !important;
    padding-top: 1px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-invoices #clientGridContainer .dx-command-edit .fa-eye {
    display: inline-block !important;
    line-height: 1 !important;
    transform: translateY(1px) !important;
}

/* Credit/Debit Note capture: compact header, line-items grid, and footer alignment. */
body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-detail-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-value-row > [class*="col-"],
body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row > [class*="col-"] {
    float: none !important;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row {
    gap: 3px 8px;
    margin-bottom: 2px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-row > [class*="col-"] {
    margin-top: 0 !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-field {
    flex: 0 1 150px;
    max-width: 165px;
    min-width: 112px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-period {
    flex-basis: 104px;
    max-width: 112px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-export-date-field {
    flex: 0 1 145px;
    max-width: 155px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-status-field,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check {
    align-items: center;
    display: flex;
    padding-top: 18px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-status-field {
    flex: 0 0 116px;
    justify-content: center;
    margin-right: 4px;
    max-width: 126px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-status-field .label {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--ff-control-h);
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check {
    flex: 0 0 78px;
    max-width: 86px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-onhold-check {
    flex-basis: 88px;
    margin-left: 4px;
    max-width: 94px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox {
    align-items: center;
    display: flex;
    margin: 0 !important;
    min-height: var(--ff-control-h);
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox label,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox label {
    align-items: center;
    display: inline-flex !important;
    line-height: calc(var(--ff-control-h) - 2px);
    margin-bottom: 0;
    min-height: var(--ff-control-h);
    padding-left: 26px !important;
    white-space: nowrap;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check label::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check label:before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check label::before,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check label:before {
    top: 50% !important;
    transform: translateY(-50%);
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-meta-check .checkbox.clip-check input[type="checkbox"]:checked + label:after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox.clip-check input[type="checkbox"]:checked + label:after {
    align-items: center;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    left: 0 !important;
    line-height: 20px !important;
    text-align: center;
    top: 50% !important;
    transform: translateY(-50%);
    width: 20px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-identification-group {
    flex: 0 1 404px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row {
    flex-wrap: nowrap;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-trans-no {
    flex: 0 0 118px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-date {
    flex: 0 0 154px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-acc-no {
    flex: 0 0 116px;
}

body.ff-app .ff-finance.ff-capture-page #transId {
    text-align: left !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-client {
    flex: 1 1 360px;
    min-width: 290px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-group {
    flex: 1 1 500px;
    min-width: 420px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-no {
    flex: 0 1 150px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-date {
    flex: 0 0 150px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-amount {
    flex: 0 0 170px;
    max-width: 170px;
    min-width: 145px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-reason-field {
    flex: 1 1 300px;
    min-width: 240px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-currency-field {
    flex: 0 1 150px;
    min-width: 130px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field {
    align-items: center;
    display: flex;
    flex: 0 1 280px;
    flex-wrap: nowrap;
    gap: 2px 6px;
    min-width: 270px;
    padding-top: 18px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .checkbox,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .valuesonly {
    align-items: center;
    display: inline-flex;
    float: none !important;
    margin: 0 !important;
    white-space: nowrap;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field .valuesonly .checkbox {
    margin: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .ff-crdr-status-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .ff-crdr-meta-check,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .ff-crdr-option-field {
    padding-top: 13px !important;
}

body.ff-app .ff-finance.ff-capture-page .bootstrap-touchspin {
    align-items: stretch;
    display: flex;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page .bootstrap-touchspin .form-control {
    min-width: 0;
    text-align: right;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-finance.ff-capture-page .bootstrap-touchspin-prefix {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 10px !important;
    height: var(--ff-control-h) !important;
    justify-content: center;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 5px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items {
    margin: 4px 0 5px !important;
    padding: 5px 8px 6px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items > legend {
    margin-bottom: 1px !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items-inner {
    margin: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar-row,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-grid-row {
    margin: 0 !important;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    min-height: 28px;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar-row > .col-md-12,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-grid-row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-toolbar .btn {
    margin: 0 !important;
    min-height: 26px;
    padding: 3px 10px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items .table-wrapper,
body.ff-app .ff-finance.ff-capture-page .ff-crdr-line-items .ff-parcel-grid-reponsive {
    margin: 0;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table {
    --ff-crdr-line-control-height: 28px;
    border-collapse: separate;
    margin: 0 !important;
    table-layout: fixed;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-waybill-col {
    width: 19%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-amount-col {
    width: 14.5%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-comment-col {
    width: 15.5%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-reason-col {
    width: 12%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table col.ff-crdr-actions-col {
    width: 10%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tbody > tr > td,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tfoot > tr > th {
    vertical-align: middle !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tbody > tr > td {
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-amount-cell,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-amount-total {
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: right !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-saved-row .ff-crdr-amount-cell input.custom-form-control {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.custom-form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap .ui-select-search {
    box-sizing: border-box !important;
    font-size: 13px !important;
    height: var(--ff-crdr-line-control-height) !important;
    line-height: calc(var(--ff-crdr-line-control-height) - 8px) !important;
    margin: 0 !important;
    min-height: var(--ff-crdr-line-control-height) !important;
    width: 100%;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table input.custom-form-control {
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ui-select-bootstrap .ui-select-search {
    align-items: center;
    display: flex;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-entry-row .ff-crdr-amount-cell input.form-control,
body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table .ff-crdr-saved-row .ff-crdr-amount-cell input.custom-form-control {
    font-variant-numeric: tabular-nums;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
}

body.ff-app .ff-finance.ff-capture-page table.ff-crdr-line-table > tfoot .ff-crdr-amount-total {
    font-variant-numeric: tabular-nums;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row {
    align-items: flex-end;
    margin-top: 2px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row > .ff-crdr-comment-col {
    flex: 1 1 520px;
    max-width: 760px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-comment {
    min-height: 58px;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-save-col {
    align-self: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-save {
    float: none !important;
    margin: 0 0 1px !important;
    min-width: 140px;
}

@media (max-width: 960px) {
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-identification-group,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-client,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-group,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-reason-field,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-option-field,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-footer-row > .ff-crdr-comment-col {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    body.ff-app .ff-finance.ff-capture-page .ff-crdr-id-date-row,
    body.ff-app .ff-finance.ff-capture-page .ff-crdr-invoice-row {
        flex-wrap: wrap;
    }
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-start;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .clip-radio,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .checkbox,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .valuesonly,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-search-type {
    margin-right: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .ff-finance-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .ff-finance-close-filter {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: var(--ff-control-h, 30px);
    padding-left: 0;
    padding-right: 0;
    width: var(--ff-control-h, 30px);
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .ff-finance-close-filter .fa {
    line-height: 1;
}

body.ff-app .ff-view-crdr .ff-finance-crdr-actions .clip-radio label,
body.ff-app .ff-view-crdr .ff-finance-crdr-actions .checkbox label {
    line-height: 22px;
    margin-bottom: 0;
    min-height: 0;
}

body.ff-app .ff-view-crdr .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    padding-right: 0;
}

body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel {
    height: 32px;
    margin-top: 0;
    min-height: 32px;
    overflow: visible;
    pointer-events: none;
}

body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 30px;
    min-height: 30px;
}

body.ff-app .ff-view-crdr #gridContainer .dx-datagrid-header-panel .dx-toolbar-after,
body.ff-app .ff-view-crdr .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-after {
    pointer-events: auto;
}

body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .accordion-no-display,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .accordion-no-display .panel,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .accordion-no-display .panel-body,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-toolbar-row,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page #gridContainer .dx-datagrid-header-panel,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row .dx-datagrid-header-panel {
    height: 24px !important;
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page.ff-view-crdr.ff-query-grid-page .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters::before,
body.ff-app .ff-view-crdr .ff-finance-primary-filters::after,
body.ff-app .ff-view-crdr .ff-finance-date-block > .row::before,
body.ff-app .ff-view-crdr .ff-finance-date-block > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-view-crdr .ff-finance-date-block > .row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-view-crdr .ff-finance-primary-filters > .col-md-2:not(.ff-finance-branch-filter) {
    flex: 0 1 132px;
}

body.ff-app .ff-view-crdr .ff-finance-date-block {
    flex: 0 1 420px;
    max-width: 100%;
}

body.ff-app .ff-view-crdr .ff-finance-date-block > .row {
    align-items: flex-start;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px 8px;
    margin: 0;
}

body.ff-app .ff-view-crdr .ff-finance-secondary-filters {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-secondary-filters > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-period {
    flex: 0 0 170px;
    max-width: 170px;
}

body.ff-app .ff-view-crdr .ff-finance-date-period .input-group {
    display: flex;
    width: 100%;
}

body.ff-app .ff-view-crdr .ff-finance-date-period .input-group-addon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 66px;
    justify-content: center;
    min-width: 66px;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 66px;
}

body.ff-app .ff-view-crdr .ff-finance-date-period select.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

body.ff-app .ff-view-crdr .ff-finance-date-range {
    flex: 1 1 240px;
    min-width: 230px;
}

body.ff-app .ff-view-crdr .ff-finance-branch-filter {
    flex: 0 1 160px;
    max-width: 170px;
    min-width: 135px;
}

body.ff-app .ff-view-crdr .ff-finance-client-filter {
    flex: 1 1 320px;
    min-width: 260px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block {
    flex-basis: 392px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period {
    flex-basis: 154px;
    max-width: 154px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period .input-group-addon {
    flex-basis: 60px;
    min-width: 60px;
    width: 60px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range {
    min-width: 224px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-branch-filter {
    flex-basis: 145px;
    max-width: 155px;
    min-width: 128px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-crdr-actions .clip-radio label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-crdr-actions .checkbox label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .checkbox label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .checkbox-inline label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period .input-group-addon,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period .input-group-addon label {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 16px !important;
    min-height: 16px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-crdr-actions .valuesonly,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .valuesonly,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-grid-toolbar-row .checkbox-inline {
    font-size: var(--ff-control-font-size, 11px) !important;
}

@media (max-width: 700px) {
    body.ff-app .ff-view-crdr .ff-finance-date-block,
    body.ff-app .ff-view-crdr .ff-finance-date-period,
    body.ff-app .ff-view-crdr .ff-finance-date-range,
    body.ff-app .ff-view-crdr .ff-finance-branch-filter,
    body.ff-app .ff-view-crdr .ff-finance-client-filter {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    body.ff-app .ff-view-crdr .ff-finance-date-block > .row {
        flex-wrap: wrap;
    }
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters::before,
body.ff-app .ff-view-invoices .ff-finance-primary-filters::after,
body.ff-app .ff-view-invoices .ff-finance-date-block > .row::before,
body.ff-app .ff-view-invoices .ff-finance-date-block > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-view-invoices .ff-finance-invoice-number {
    flex: 0 1 150px;
}

body.ff-app .ff-view-invoices .ff-finance-date-block {
    flex: 0 1 480px;
    max-width: 100%;
}

body.ff-app .ff-view-invoices .ff-finance-date-block > .row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    margin: 0;
}

body.ff-app .ff-view-invoices .ff-finance-date-block > .row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-view-invoices .ff-finance-date-period {
    flex: 0 1 200px;
}

body.ff-app .ff-view-invoices .ff-finance-date-range {
    flex: 0 1 248px;
}

body.ff-app .ff-view-invoices .ff-finance-date-range .range-picker {
    max-width: 100%;
}

body.ff-app .ff-view-invoices .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-view-invoices .ff-finance-date-range .range-picker .end-date {
    flex: 1 1 104px;
    max-width: none;
}

body.ff-app .ff-view-invoices .ff-finance-branch-filter {
    flex: 0 1 180px;
}

body.ff-app .ff-view-invoices .ff-finance-client-filter {
    flex: 1 1 220px;
    min-width: 130px;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters,
body.ff-app .ff-view-invoices .ff-finance-secondary-filters,
body.ff-app .ff-view-invoices .ff-finance-user-row {
    gap: 2px 8px;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.ff-app .ff-view-invoices .ff-finance-primary-filters .form-group,
body.ff-app .ff-view-invoices .ff-finance-secondary-filters .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-invoices .ff-finance-filter-actions-row {
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    body.ff-app .ff-view-invoices .ff-finance-invoice-number,
    body.ff-app .ff-view-invoices .ff-finance-date-block,
    body.ff-app .ff-view-invoices .ff-finance-date-period,
    body.ff-app .ff-view-invoices .ff-finance-date-range,
    body.ff-app .ff-view-invoices .ff-finance-branch-filter,
    body.ff-app .ff-view-invoices .ff-finance-client-filter {
        flex-basis: 100%;
        min-width: 0;
    }
}

body.ff-app .ff-view-manifests .ff-sr-card > .row {
    margin-bottom: 4px;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row:last-child {
    margin-bottom: 0;
}

body.ff-app .ff-view-manifests .ff-sr-card .form-group {
    margin-bottom: 4px;
}

body.ff-app .ff-view-manifests .ff-sr-card label {
    display: block;
    line-height: 18px;
    margin-bottom: 1px;
    min-height: 20px;
    white-space: nowrap;
}

body.ff-app .ff-view-manifests .ff-sr-card .form-control,
body.ff-app .ff-view-manifests .ff-sr-card .ff-control,
body.ff-app .ff-view-manifests .ff-sr-card .ui-select-container {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-view-manifests .ff-sr-card textarea.form-control {
    height: var(--ff-control-h) !important;
    max-height: none !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: vertical;
    white-space: pre-wrap;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 20px;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-actions .valuesonly,
body.ff-app .ff-view-manifests .ff-manifest-filter-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions .checkbox label {
    display: inline-block;
    line-height: 20px;
    margin-bottom: 0;
    min-height: 0;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-manifests .ff-grid-toolbar-row .ff-grid-option-show-values {
    display: inline-flex;
    align-items: center;
    margin-left: 28px !important;
}

body.ff-app .ff-view-manifests .ff-grid-toolbar-row .ff-grid-option-copy-on-click {
    display: inline-flex;
    align-items: center;
    padding-top: 0 !important;
}

body.ff-app .ff-view-manifests .ff-sr-card .row:last-child > .col-md-12 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-end;
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-manifests .ff-sr-card .row:last-child .checkbox,
body.ff-app .ff-view-manifests .ff-sr-card .row:last-child .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row::before,
body.ff-app .ff-view-manifests .ff-manifest-filter-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row > [class*="col-"] {
    flex: 0 1 170px !important;
    float: none !important;
    max-width: 205px !important;
    min-width: 135px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-date-filters {
    flex: 0 0 424px !important;
    max-width: 430px !important;
    min-width: 405px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-type-filter {
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 132px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row {
    grid-template-columns: minmax(136px, 150px) minmax(252px, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-self: flex-end !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-search {
    margin-left: 0 !important;
}

/* View Manifests: flow filter fields across row breaks and keep fixed grid rows in lockstep. */
body.ff-app .ff-view-manifests {
    --ff-grid-row-height: 26px;
    --ff-grid-cell-padding-y: 1px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests {
    --ff-grid-cell-padding-y: 0;
}

body.ff-app[data-grid-font-size="small"] .ff-view-manifests {
    --ff-grid-row-height: 18px;
    --ff-grid-cell-padding-y: 0;
}

body.ff-app[data-grid-font-size="large"] .ff-view-manifests {
    --ff-grid-row-height: 34px;
    --ff-grid-cell-padding-y: 2px;
}

body.ff-app .ff-view-manifests .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .ff-sr-legend {
    flex: 0 0 100% !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row {
    display: contents !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > [class*="col-"] {
    flex: 0 1 170px !important;
    float: none !important;
    max-width: 205px !important;
    min-width: 135px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-date-filters {
    flex: 0 1 424px !important;
    max-width: 430px !important;
    min-width: 405px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-type-filter {
    align-self: flex-start !important;
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 132px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-type-filter select.form-control {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row {
    align-items: flex-start !important;
    margin: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row > [class*="col-"] {
    align-self: flex-start !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row :is(.input-group, .range-picker) {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row :is(.start-date, .end-date, .input-icon, .form-control) {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-row .input-group-addon {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-self: flex-end !important;
    flex: 1 1 520px !important;
    max-width: none !important;
    min-width: 360px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-actions {
    flex: 1 1 520px !important;
    max-width: none !important;
    min-width: 360px !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-period,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-range,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 330px !important;
    min-width: 292px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period .ff-date-period-group {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 154px !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
    width: 154px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 58px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 3px 0 22px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 14px !important;
    left: 5px !important;
    top: 5px !important;
    width: 14px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    left: 8px !important;
    top: 4px !important;
}

body.ff-app .ff-view-manifests .ff-filter-date-period .ff-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 18px 0 6px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-range .range-picker {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifests .ff-manifest-date-range .range-picker .start-date,
body.ff-app .ff-view-manifests .ff-manifest-date-range .range-picker .end-date {
    flex: 1 1 0 !important;
    max-width: none !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 760px !important;
    flex-wrap: nowrap !important;
    gap: 8px 14px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    min-width: 620px !important;
    padding-top: 18px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options {
    justify-content: flex-start !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser .valuesonly {
    display: inline-flex !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    justify-content: flex-end !important;
    margin-left: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-options .valuesonly,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit .checkbox,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit .valuesonly {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: 0 !important;
}

body.ff-app .ff-view-manifests .ff-manifest-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-search {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    margin-left: 0 !important;
    min-height: var(--ff-control-h) !important;
    min-width: 132px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    width: 150px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-options-under-webuser {
    align-self: flex-end !important;
    flex: 1 1 470px !important;
    max-width: none !important;
    min-width: 430px !important;
    padding-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-actions {
    align-self: flex-end !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 300px !important;
    padding-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser label,
body.ff-app .ff-view-manifests .ff-manifest-filter-submit label {
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row,
body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-data-row,
body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row > td {
    height: var(--ff-grid-row-height) !important;
    max-height: var(--ff-grid-row-height) !important;
    min-height: var(--ff-grid-row-height) !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row > td {
    box-sizing: border-box !important;
    line-height: calc(var(--ff-grid-row-height) - 4px) !important;
    overflow: hidden !important;
    padding-bottom: var(--ff-grid-cell-padding-y) !important;
    padding-top: var(--ff-grid-cell-padding-y) !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview .dx-row > td :is(span, div) {
    max-height: calc(var(--ff-grid-row-height) - 2px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifests #gridContainer .dx-datagrid-rowsview :is(.dx-button, .dx-button-content, .dx-dropdownbutton, .dx-dropdownbutton-action) {
    height: calc(var(--ff-grid-row-height) - 4px) !important;
    line-height: calc(var(--ff-grid-row-height) - 6px) !important;
    max-height: calc(var(--ff-grid-row-height) - 4px) !important;
    min-height: calc(var(--ff-grid-row-height) - 4px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 1180px) {
    body.ff-app .ff-view-manifests .ff-manifest-filter-actions,
    body.ff-app .ff-view-manifests .ff-manifest-filter-options {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-options-under-webuser {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-period,
    body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-filter-date-range {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
        flex: 1 1 100% !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        padding-top: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-options {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
        margin-left: 0 !important;
    }
}

/* Manifest Routes filter: keep the older Bootstrap markup compact without touching View Waybills. */
body.ff-app .ff-route-filter-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-route-filter-row::before,
body.ff-app .ff-route-filter-row::after,
body.ff-app .ff-route-date-row::before,
body.ff-app .ff-route-date-row::after,
body.ff-app .ff-route-actions-row::before,
body.ff-app .ff-route-actions-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-route-filter-row > [class*="col-"],
body.ff-app .ff-route-date-row > [class*="col-"],
body.ff-app .ff-route-actions-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-route-filter-row .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-route-filter-row label {
    display: block;
    line-height: 16px;
    margin-bottom: 1px;
    min-height: 16px;
    white-space: nowrap;
}

body.ff-app .ff-route-filter-row .form-control,
body.ff-app .ff-route-filter-row .ff-control,
body.ff-app .ff-route-filter-row .ui-select-container {
    min-height: var(--ff-control-h);
}

body.ff-app .ff-route-manifest-no {
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 130px !important;
}

body.ff-app .ff-route-waybill-list {
    flex: 0 1 180px !important;
    max-width: 205px !important;
    min-width: 150px !important;
}

body.ff-app .ff-route-date-type {
    flex: 0 1 175px !important;
    max-width: 195px !important;
    min-width: 150px !important;
}

body.ff-app .ff-route-date-filters {
    flex: 0 1 430px !important;
    max-width: 455px !important;
    min-width: 375px !important;
}

body.ff-app .ff-route-date-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin: 0 !important;
}

body.ff-app .ff-route-date-period {
    flex: 0 1 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app .ff-route-date-range {
    flex: 1 1 260px !important;
    max-width: 290px !important;
    min-width: 245px !important;
}

body.ff-app .ff-route-date-range .range-picker {
    max-width: 100% !important;
}

body.ff-app .ff-route-date-range .range-picker .start-date,
body.ff-app .ff-route-date-range .range-picker .end-date {
    flex: 1 1 104px;
    max-width: none;
}

body.ff-app .ff-route-client {
    flex: 1 1 300px !important;
    max-width: 380px !important;
    min-width: 250px !important;
}

body.ff-app .ff-route-driver,
body.ff-app .ff-route-vehicle {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 205px !important;
}

body.ff-app .ff-route-manifest-type {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 150px !important;
}

body.ff-app .ff-route-route {
    flex: 1 1 250px !important;
    max-width: 330px !important;
    min-width: 210px !important;
}

body.ff-app .ff-route-google-map {
    flex: 0 0 168px !important;
    max-width: 178px !important;
    min-width: 168px !important;
}

body.ff-app .ff-route-google-map .form-group {
    margin-top: 18px !important;
}

body.ff-app .ff-route-google-map .checkbox {
    margin: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-route-google-map .checkbox label {
    display: inline-block !important;
    line-height: 20px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-route-date-type .ui-select-bootstrap:not(.open) .ui-select-search {
    border: 0 !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    width: 0 !important;
}

body.ff-app .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 8px !important;
    padding-right: 28px !important;
}

body.ff-app .ff-route-date-type .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-route-date-type .ui-select-bootstrap .ui-select-match-text span {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-route-actions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

body.ff-app .ff-route-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-route-filter-actions .btn,
body.ff-app .ff-route-filter-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-route-keep-filter {
    order: 1 !important;
}

body.ff-app .ff-route-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    order: 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-route-search {
    order: 3 !important;
}

body.ff-app[data-grid-density="compact"] .ff-route-filter-row,
body.ff-app.ff-grid-density-compact .ff-route-filter-row {
    gap: 2px 7px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-route-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-route-date-range {
        flex: 1 1 250px !important;
    }
}

/* Manifest Routes: page-scoped final layout and ui-select fixes. */
body.ff-app .ff-view-manifest-routes .ff-route-filter-card {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 3px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-card > .ff-sr-legend {
    flex: 0 0 100% !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-card > .ff-route-filter-row,
body.ff-app .ff-view-manifest-routes .ff-route-filter-card > .ff-route-actions-row {
    display: contents !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-row,
body.ff-app .ff-view-manifest-routes .ff-route-actions-row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-google-map .form-group {
    margin-top: 18px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-filter-actions {
    align-self: flex-start !important;
    flex: 1 1 315px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: none !important;
    min-width: 280px !important;
    padding-top: 18px !important;
    width: auto !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap:not(.open) > input.ui-select-search,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap:not(.open) .ui-select-search {
    display: none !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    overflow: hidden !important;
    padding-right: 48px !important;
    position: relative !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-match-text span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-toggle > a.btn {
    height: 18px !important;
    line-height: 18px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    z-index: 2 !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-type .ui-select-bootstrap .ui-select-toggle > .caret {
    right: 10px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results .ff-grid-result-row,
body.ff-app .ff-view-manifest-routes .ff-route-results .ff-grid-result-row > .col-md-12,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-datagrid,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer {
    min-height: 300px !important;
    overflow: hidden !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-results #gridContainer .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select > td,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select > tr > td {
    max-width: 30px !important;
    min-width: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 30px !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select .dx-checkbox,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select .dx-checkbox-container {
    align-items: center !important;
    display: inline-flex !important;
    height: 18px !important;
    justify-content: center !important;
    margin: 0 auto !important;
    min-height: 18px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-select .dx-checkbox-icon {
    margin: 0 !important;
}

body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-edit,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-edit > td,
body.ff-app .ff-view-manifest-routes #gridContainer .dx-command-edit > tr > td {
    max-width: 38px !important;
    min-width: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    width: 38px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifest-routes .ff-route-filter-actions {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        padding-top: 2px !important;
    }
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifests .ff-manifest-date-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

body.ff-app .ff-waybill .ff-manifest-filter-row > [class*="col-"] {
    min-width: 0;
}

body.ff-app .ff-waybill .ff-manifest-date-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(248px, 1.45fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: end;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-manifest-date-row::before,
body.ff-app .ff-waybill .ff-manifest-date-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-manifest-date-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-manifest-date-filters .range-picker {
    max-width: 100%;
}

body.ff-app .ff-waybill .ff-manifest-date-filters .range-picker .start-date,
body.ff-app .ff-waybill .ff-manifest-date-filters .range-picker .end-date {
    flex: 1 1 0;
    max-width: none;
}

@media (max-width: 1320px) and (min-width: 992px) {
    body.ff-app .ff-waybill .ff-manifest-date-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1500px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns:
            minmax(150px, 180px)
            minmax(165px, 190px)
            minmax(170px, 210px)
            minmax(248px, 260px)
            minmax(180px, 220px);
    }

    body.ff-app .ff-view-waybills .ff-waybill-filter-grid {
        grid-template-columns:
            minmax(140px, 165px)
            minmax(150px, 175px)
            minmax(165px, 190px)
            minmax(236px, 248px)
            minmax(150px, 180px);
    }
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body.ff-app .ff-waybill .ff-waybill-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.ff-app .ff-waybill .ff-filter-flow-row > .ff-filter-field,
    body.ff-app .ff-waybill .ff-filter-inline-row > .ff-filter-field {
        flex: 1 1 100%;
    }
}

/* Base: ALL fieldset legends get the "chip" look (keep) */
body.ff-app fieldset > legend {
    position: static !important;
    display: inline-block;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid var(--divider) !important;
    border-radius: 999px;
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Sub legends: just a touch smaller */
body.ff-app fieldset fieldset > legend {
    font-size: 12.5px !important; /* was 14px */
    padding: 5px 9px !important; /* slightly tighter */
    letter-spacing: .07em; /* optional */
}



/* Flat subsection inside a fieldset (no nested card look) */
body.ff-app .ff-subsection {
    /* Pull to the fieldset edges (match your fieldset padding: 14px) */
    margin-left: -14px;
    margin-right: -14px;
    /* Space it from the content above without looking like a separate card */
    margin-top: 10px;
    /* Give it its own internal padding */
    padding: 10px 14px 8px;
    /* Visually separate it, but don't create a "nested card" */
    border-top: 1px solid var(--divider);
    background: transparent; /* or var(--surface-2) if you want a faint band */
}

body.ff-app .ff-subsection__title {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px;
}

body.ff-app .ff-subsection__table {
    margin-bottom: 0 !important;
}

    body.ff-app .ff-subsection__table td {
        padding: 0 !important;
        line-height: 1.2;
    }

body.ff-app .ff-subsection__divider-row td {
    padding: 8px 0 !important;
}

body.ff-app .ff-subsection__divider {
    height: 1px;
    background: var(--divider);
    width: 100%;
}

body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap .ui-select-match-text span {
    line-height: 1.35 !important;
}

body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill .ff-ui.ui-select-bootstrap > .ui-select-match > .btn {
    min-height: 34px !important;
    line-height: 1.35 !important;
    align-items: center !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill .ff-subsection__table > tbody > tr > td:first-child {
    width: 58%;
    padding-right: 0 !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill .ff-subsection__table > tbody > tr > td:last-child {
    width: 42%;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr.ff-charge-divider-row > td {
    padding: 8px 0 !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:first-child {
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child {
    padding: 0 10px 0 0 !important;
}

/* Waybill rating: keep charge/rating rows dense so more of the capture page is visible. */
body.ff-app .ff-waybill fieldset.ff-legend--main {
    padding: 10px 12px 8px !important;
    margin-bottom: 10px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main fieldset {
    padding: 4px 10px 6px !important;
    margin-bottom: 6px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main fieldset > legend {
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    transform: translateY(-50%);
}

body.ff-app .ff-waybill .ff-rating-compact-row,
body.ff-app .ff-waybill .ff-rating-split-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 6px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-rating-compact-row::before,
body.ff-app .ff-waybill .ff-rating-compact-row::after,
body.ff-app .ff-waybill .ff-rating-split-row::before,
body.ff-app .ff-waybill .ff-rating-split-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-rating-compact-row > [class*="col-"],
body.ff-app .ff-waybill .ff-rating-split-row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-rating-settings-col {
    flex: 0 1 165px;
}

body.ff-app .ff-waybill .ff-rating-charges-col {
    flex: 1.12 1 520px;
}

body.ff-app .ff-waybill .ff-rating-calc-col {
    flex: 1 1 420px;
}

body.ff-app .ff-waybill .ff-rating-charges-section {
    flex: 1 1 220px;
}

body.ff-app .ff-waybill .ff-rating-vars-section {
    flex: 1.18 1 270px;
}

body.ff-app .ff-waybill .ff-rating-fcalc-section {
    flex: 1 1 245px;
}

body.ff-app .ff-waybill .ff-rating-mass-section {
    flex: 0.72 1 155px;
}

body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-charges-section,
body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-vars-section,
body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-fcalc-section,
body.ff-app .ff-waybill .ff-stages-rating-row .ff-rating-mass-section {
    flex-basis: 220px;
}

body.ff-app .ff-waybill .ff-rating-vars-section table.table-condensed > tbody > tr > td.text-bold {
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    white-space: nowrap;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .checkbox.clip-check {
    display: block;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    min-height: 22px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .checkbox.clip-check label {
    box-sizing: border-box;
    display: block !important;
    line-height: 20px !important;
    min-height: 22px !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    user-select: none;
    width: 100%;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .checkbox.clip-check input[type="checkbox"][disabled] + label {
    cursor: not-allowed;
}

body.ff-app .clip-check input[type="checkbox"][disabled] + label {
    color: var(--text-disabled) !important;
    cursor: not-allowed;
    opacity: .7;
}

body.ff-app .clip-check input[type="checkbox"][disabled] {
    cursor: not-allowed;
    filter: grayscale(100%);
}

body.ff-app .ff-waybill fieldset.ff-legend--main table.table-condensed {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main table.table-condensed > tbody > tr > th,
body.ff-app .ff-waybill fieldset.ff-legend--main table.table-condensed > tbody > tr > td {
    padding: 1px 4px !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td {
    height: 21px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main input.editable-rates.form-control {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 5px !important;
    line-height: 18px !important;
    font-size: 13px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .ff-icon-tooltip.margin-top-10 {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-divider-row > td,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__divider-row > td {
    padding: 2px 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    border-bottom-width: 1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-total-row > td {
    height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 1px !important;
    padding: 3px 0 3px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__title {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check-cell {
    height: 20px !important;
    line-height: 20px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 !important;
    width: 20px;
}

body.ff-app .ff-waybill .ff-rating-variable-check label {
    display: inline-block !important;
    height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 !important;
    width: 20px !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check label:before {
    left: 0 !important;
    margin-right: 0 !important;
    top: 0 !important;
}

body.ff-app .ff-waybill .ff-rating-variable-check label:after {
    left: 1px !important;
    top: -1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-rating-note {
    margin: 10px 0 6px;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-rating-note .label {
    display: inline-block;
    line-height: 1.2;
    white-space: normal;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-rating-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-right: 10px;
}

body.ff-app[data-theme="dark"] .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    border-bottom-color: var(--border) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill fieldset.ff-legend--main .ff-subsection {
    border-top-color: var(--border) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill fieldset.ff-legend--main .ff-subsection__divider {
    background: var(--border) !important;
}

body.ff-app :is(input, textarea, select, .form-control):focus,
body.ff-app :is(input, textarea, select, .form-control):focus-visible {
    background-color: var(--surface) !important;
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--focus) !important;
}



/* =========================================================
   FF WIZARD - FINAL (single rail + fill, NO segments)
   Uses ONLY existing tokens from body.ff-app
   Requires: #wizard has class "ff-wizard" and ff-step-* ff-steps-* via ng-class
   ========================================================= */

    /* --- HARD KILL: all connector segments from any prior CSS/plugin --- */
    body.ff-app #wizard.ff-wizard.swMain > ul > li > a::before,
    body.ff-app #wizard.ff-wizard.swMain > ul > li > a::after,
    body.ff-app #wizard.ff-wizard.swMain > ul > li::before,
    body.ff-app #wizard.ff-wizard.swMain > ul > li::after {
        content: none !important;
    }

    /* Step row */
    body.ff-app #wizard.ff-wizard.swMain > ul {
        position: relative !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 14px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 16px 16px 12px !important;
        background: var(--surface) !important;
        border-bottom: 1px solid var(--divider) !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

        body.ff-app #wizard.ff-wizard.swMain > ul,
        body.ff-app #wizard.ff-wizard.swMain > ul * {
            box-sizing: border-box !important;
        }

            /* Step items */
            body.ff-app #wizard.ff-wizard.swMain > ul > li {
                flex: 1 1 0 !important;
                min-width: 150px !important;
                text-align: center !important;
                margin: 0 !important;
                padding: 0 !important;
                position: relative !important;
            }

                /* Click target */
                body.ff-app #wizard.ff-wizard.swMain > ul > li > a {
                    width: 100% !important;
                    position: relative !important;
                    display: inline-flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    gap: 6px !important;
                    padding: 4px 10px 8px !important;
                    margin: 0 !important;
                    text-decoration: none !important;
                    background: transparent !important;
                    border: 0 !important;
                    border-radius: var(--radius-sm) !important;
                    color: var(--text) !important;
                    cursor: pointer !important;
                    user-select: none !important;
                }

                    body.ff-app #wizard.ff-wizard.swMain > ul > li > a:focus,
                    body.ff-app #wizard.ff-wizard.swMain > ul > li > a:focus-visible {
                        outline: none !important;
                    }

                    body.ff-app #wizard.ff-wizard.swMain > ul > li > a:focus-visible {
                        box-shadow: 0 0 0 5px var(--focus) !important;
                    }

            /* =========================
   SINGLE RAIL + SINGLE FILL
   ========================= */

            /* Base rail (sits behind everything) */
            body.ff-app #wizard.ff-wizard.swMain > ul::before {
                content: "" !important;
                position: absolute !important;
                /* circle 36px, ul padding-top 16px => centerline = 16 + 18 = 34 */
                top: 34px !important;
                /* rail starts/ends under first/last circle centers */
                left: 34px !important; /* 16 padding + 18 radius */
                right: 34px !important;
                height: 4px !important;
                background: var(--divider) !important;
                border-radius: 999px !important;
                z-index: 0 !important;
            }

            /* Filled rail */
            body.ff-app #wizard.ff-wizard.swMain > ul::after {
                content: "" !important;
                position: absolute !important;
                top: 34px !important;
                left: 34px !important;
                height: 4px !important;
                /* full inner width then scaled down by step */
                width: calc(100% - 68px) !important;
                background: var(--primary) !important;
                border-radius: 999px !important;
                transform-origin: left center !important;
                transform: scaleX(0) !important;
                z-index: 1 !important;
            }

/* edit mode fills with success (optional) */
body.ff-app #wizard.ff-wizard.ff-edit.swMain > ul::after {
    background: var(--success) !important;
}

/* 4 steps */
body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-1.swMain > ul::after {
    transform: scaleX(0) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-2.swMain > ul::after {
    transform: scaleX(0.333333) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-3.swMain > ul::after {
    transform: scaleX(0.666666) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-4.ff-step-4.swMain > ul::after {
    transform: scaleX(1) !important;
}

/* 6 steps */
body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-1.swMain > ul::after {
    transform: scaleX(0) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-2.swMain > ul::after {
    transform: scaleX(0.2) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-3.swMain > ul::after {
    transform: scaleX(0.4) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-4.swMain > ul::after {
    transform: scaleX(0.6) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-5.swMain > ul::after {
    transform: scaleX(0.8) !important;
}

body.ff-app #wizard.ff-wizard.ff-steps-6.ff-step-6.swMain > ul::after {
    transform: scaleX(1) !important;
}

/* =========================
   CIRCLES + LABELS
   ========================= */

body.ff-app #wizard.ff-wizard .stepNumber {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    background: var(--surface) !important;
    border: 2px solid var(--border) !important;
    color: var(--text-muted) !important;
    position: relative !important;
    z-index: 2 !important; /* above rails */
}

/* active halo */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.selected:not(.done) .stepNumber::before {
    content: "" !important;
    position: absolute !important;
    inset: -7px !important;
    border-radius: 999px !important;
    background: var(--nav-active-bg) !important;
    border: 1px solid var(--nav-active-border) !important;
    z-index: -1 !important;
}

/* current */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.selected:not(.done) .stepNumber {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    box-shadow: var(--shadow-1) !important;
}

/* done */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepNumber {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--on-primary) !important;
    box-shadow: var(--shadow-1) !important;
}

/* checkmark on done (optional; remove if you want numbers) */
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepNumber {
    font-size: 0 !important;
}

    body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepNumber::after {
        content: "✓" !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

body.ff-app #wizard.ff-wizard .stepDesc {
    display: block !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.ff-app #wizard.ff-wizard.swMain > ul > li > a.selected:not(.done) .stepDesc,
body.ff-app #wizard.ff-wizard.swMain > ul > li > a.done .stepDesc {
    color: var(--text) !important;
    font-weight: 600 !important;
}

/* hover */
@media (hover:hover) {
    body.ff-app #wizard.ff-wizard.swMain > ul > li > a {
        transition: background .15s ease, transform .15s ease;
    }

        body.ff-app #wizard.ff-wizard.swMain > ul > li > a:hover {
            background: var(--surface-2) !important;
        }

            body.ff-app #wizard.ff-wizard.swMain > ul > li > a:hover .stepNumber {
                transform: translateY(-1px);
            }
}

svg text {
    fill: var(--ff-text) !important; /* your token */
}

/* Only icons you explicitly mark as destructive */
.ff-icon-clear {
    color: var(--clear) !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 999px !important;
    opacity: .85;
}

    .ff-icon-clear:hover {
        opacity: 1;
        color: var(--clear-hover) !important;
        border-color: color-mix(in srgb, var(--clear-hover) 65%, var(--border)) !important;
        background: color-mix(in srgb, var(--clear-hover) 10%, var(--surface)) !important;
    }

    .ff-icon-clear:active {
        color: var(--clear-active) !important;
    }


.nav-tabs > li > a{
    background-color: var(--suface);
}

.nav-tabs > li > a:hover{
    background-color: var(--surface-2);
}

.nav-tabs > li.active > a{
    background-color: var(--text-muted) !important;
}
.panel {
    color: var(--text);
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover {
        border-bottom-color: var(--border);
    }
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover {
    border: 1px solid var(--border);
}

li.uib-tab.nav-item a {
    color: var(--text) !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus {
    color: var(--on-primary) !important;
}

/* =========================================================
   TABLES: border + hover styling (token-based, no new vars)
   Drop-in override to replace the old pink hover rule.
   ========================================================= */

/* 1) Normal state: make table borders match your theme tokens (instead of Bootstrap #ddd) */
body.ff-app .table-bordered,
body.ff-app .table-bordered > thead > tr > th,
body.ff-app .table-bordered > tbody > tr > th,
body.ff-app .table-bordered > tbody > tr > td,
body.ff-app .table-bordered > tfoot > tr > th,
body.ff-app .table-bordered > tfoot > tr > td {
    border-color: var(--border); /* uses your existing --border (#d0d7de) */
}

/* 2) Hover state: replace pink with a subtle primary-tinted surface */
body.ff-app .table-hover > tbody > tr:hover > td,
body.ff-app .table-hover > tbody > tr:hover > th {
    /* Subtle highlight that fits your palette */
    background-color: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

/* 3) Optional: if you also want a clearer separation on hover for bordered tables */
body.ff-app .table-hover.table-bordered > tbody > tr:hover > td,
body.ff-app .table-hover.table-bordered > tbody > tr:hover > th {
    /* Slightly stronger edge to match the hover without looking harsh */
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

/* 4) Optional: keyboard accessibility (tabbing into links/buttons inside a row)
   Gives a similar effect as hover when a child control is focused */
body.ff-app .table-hover > tbody > tr:focus-within > td,
body.ff-app .table-hover > tbody > tr:focus-within > th {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

/* =========================================
   Range Picker: fix inner rounding + borders
   (scoped to .input-group.range-picker)
   ========================================= */

body.ff-app .input-group.range-picker {
    /* Stop relying on Bootstrap's table-cell expectations (your markup wraps inputs) */
    display: flex !important;
    align-items: stretch;
    width: 100%;
    max-width: 248px;
}

    body.ff-app .input-group.range-picker .start-date,
    body.ff-app .input-group.range-picker .end-date {
        flex: 0 0 112px;
        min-width: 0; /* prevents overflow pushing layout */
        max-width: 112px;
    }

        body.ff-app .input-group.range-picker .start-date .input-icon,
        body.ff-app .input-group.range-picker .end-date .input-icon {
            display: block;
            height: 100%;
        }

    /* IMPORTANT: override your global input[type="text"] rule that forces radius 0 */
    body.ff-app .input-group.range-picker input.form-control[type="text"] {
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        border-radius: var(--radius-sm) !important; /* baseline (outer corners) */
        box-shadow: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        line-height: 20px !important;
        padding-left: 24px !important;
        padding-right: 4px !important;
    }

    /* Left input: remove INNER (right) rounding + avoid double border with "to" */
    body.ff-app .input-group.range-picker .start-date input.form-control[type="text"] {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-right: 0 !important;
    }

    /* Right input: remove INNER (left) rounding + avoid double border with "to" */
    body.ff-app .input-group.range-picker .end-date input.form-control[type="text"] {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-left: 0 !important;
    }

    /* The "to" pill in the middle */
    body.ff-app .input-group.range-picker .input-group-addon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        /* keep it crisp + square so it butts up cleanly */
        border-radius: 0 !important;
        /* match borders so the join looks seamless */
        border-top: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        line-height: 1 !important;
    }

    /* Your class makes the "to" too tight; fix only inside range-picker */
    body.ff-app .input-group.range-picker .input-group-addon-less-padding {
        padding: 0 !important;
    }

    /* A) Segmented divider */
    body.ff-app .input-group.range-picker .input-group-addon {
        background: var(--surface) !important; /* neutral */
        color: var(--text-muted, var(--text)) !important;
        font-weight: 600;
        flex: 0 0 24px;
        width: 24px !important;
        min-width: 24px !important;
        padding: 0 !important;
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        border-top: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
    }

/* Date inputs: show pointer cursor */
body.ff-app .range-picker .start-date input.form-control,
body.ff-app .range-picker .end-date input.form-control {
    cursor: pointer;
}

/* Let clicks pass through the calendar icon to the input underneath */
body.ff-app .range-picker .start-date .ti-calendar,
body.ff-app .range-picker .end-date .ti-calendar {
    pointer-events: none;
}

/* Force the calendar icon to stay visible (some themes hide it on input:focus) */
body.ff-app .input-group.range-picker .input-icon > i.ti-calendar,
body.ff-app .input-group.range-picker .input-icon > input.form-control:focus + i.ti-calendar,
body.ff-app .input-group.range-picker .input-icon > input.form-control:focus ~ i.ti-calendar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: 0;
    left:4px;
    line-height:34px;
    font-size: 16px;
}

/* Optional: if you don’t want the “text caret” to show in readonly date fields */
body.ff-app .input-group.range-picker input.form-control[readonly] {
    caret-color: transparent;
}



/* =========================================
   Single datepicker: match range-picker look
   Apply only to .ff-date-icon so we don't affect other input-icon fields
   ========================================= */

body.ff-app .ff-date-icon {
    position: relative;
    display: block;
}

    body.ff-app .ff-date-icon > input.form-control {
        cursor: pointer;
        padding-left: 40px !important; /* room for bigger icon */
    }

        /* Keep icon visible and sized like the range-picker */
        body.ff-app .ff-date-icon > i.ti-calendar,
        body.ff-app .ff-date-icon > input.form-control:focus + i.ti-calendar,
        body.ff-app .ff-date-icon > input.form-control:focus ~ i.ti-calendar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: absolute;
            left: 8px;
            top: 0;
            line-height: 30px; /* match your .form-control height */
            font-size: 16px !important;
            width: 18px;
            text-align: center;
            pointer-events: none; /* click passes through */
        }

        /* Optional: hide caret on readonly date inputs */
        body.ff-app .ff-date-icon > input.form-control[readonly] {
            caret-color: transparent;
        }

body.ff-app input.form-control[uib-datepicker-popup] {
    min-width: 140px;
}


/* =========================================
   Mapbox Geocoder -> match ff form controls
   Scope to ff pages so it doesn't affect other embeds
   ========================================= */

body.ff-app .ff-page .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
    width: 100% !important;
    max-width: none !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    /* match your input height */
    display: flex !important;
    align-items: center !important;
}

/* The actual input */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input {
    background: transparent !important;
    color: var(--text) !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 13px !important; /* match your inputs */
    padding: 0 40px 0 34px !important; /* room for icons */
    width: 100% !important;
}

    /* Placeholder color */
    body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::placeholder {
        color: var(--text-muted, #888) !important;
    }

/* Left search icon positioning + color */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--icon-search {
    left: 7px !important;
    top: 50% !important;
    transform: translateY(-50%);
    fill: var(--text-muted, #666) !important;
    opacity: 0.75 !important;
}

/* Right side controls (clear/loading) */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--pin-right {
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%);
}

body.ff-app .ff-page .mapboxgl-ctrl-geocoder--button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Focus state similar to your form controls */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder.mapboxgl-ctrl:focus-within {
    border-color: var(--primary) !important;
}

/* Suggestions dropdown: match surface + borders */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    overflow: hidden;
    margin-top: 4px !important;
}

    body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions > li > a {
        color: var(--text) !important;
    }

        body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions > li.active > a,
        body.ff-app .ff-page .mapboxgl-ctrl-geocoder .suggestions > li > a:hover {
            background: rgba(0,0,0,.04) !important; /* keep neutral */
        }


.mapboxgl-ctrl-geocoder--input {
    height: 30px;
}

@media screen and (min-width: 640px) {
    .mapboxgl-ctrl-geocoder--input {
        height: 30px;
    }
    }

/* Mapbox geocoder placeholder styling */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

/* Vendor fallbacks */
body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::-webkit-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input::-moz-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

body.ff-app .ff-page .mapboxgl-ctrl-geocoder--input:-ms-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    opacity: .75 !important;
}

.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
    z-index: 2;
    position: absolute;
    right: 8px;
    top: -9px;
    display: none;
}

@media screen and (min-width: 640px) {
    .mapboxgl-ctrl-geocoder--icon-close {
        width: 16px;
        height: 16px;
        margin-top: 0;
        margin-right: 0;
    }
}

/* Center the back-to-top button in the footer, regardless of left/right content */
#app > footer .footer-inner {
    position: relative; /* anchor for absolute centering */
}

    /* The wrapper that contains the go-top button */
    #app > footer .footer-inner > .pull-right:has(.go-top) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        float: none !important;
        line-height: normal; /* avoid line-height 50px shifting */
        z-index: 2;
    }

    /* Ensure side content doesn't overlap the centered button */
    #app > footer .footer-inner > .pull-left,
    #app > footer .footer-inner > .pull-right:not(:has(.go-top)) {
        position: relative;
        z-index: 1;
    }

#app > footer .footer-inner {
    position: relative;
}

    #app > footer .footer-inner .footer-go-top {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

.label-inverse{
    color:var(--surface);
}


/* =========================================
   FF Imaging – consolidated drop-in rules
   (Queue | Index Rail | Preview)
   ========================================= */

body.ff-app .ff-imaging #content-wrapper {
    padding: 6px 10px;
}

body.ff-app .ff-imaging .ff-scan-main {
    padding: 8px 10px !important;
}

body.ff-app .ff-imaging .ff-scan-main > .row {
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-imaging .ff-scan-main .col-md-12.padding-left-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-imaging .ff-scan-index-fieldset {
    margin-bottom: 4px !important;
    padding: 8px 10px 6px !important;
}

body.ff-app .ff-imaging .ff-scan-index-fieldset > .row {
    margin-left: -5px;
    margin-right: -5px;
}

body.ff-app .ff-imaging .ff-scan-index-fieldset > .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

body.ff-app .ff-imaging .ff-scan-index-form .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-imaging .ff-scan-index-form label {
    margin-bottom: 1px !important;
}

body.ff-app .ff-imaging .ff-scan-index-action-row {
    margin-top: 2px;
    padding-bottom: 0 !important;
}

body.ff-app .ff-imaging .ff-scan-index-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.ff-app .ff-imaging .ff-scan-index-actions .btn {
    height: 34px;
    margin: 0;
}

body.ff-app .ff-imaging .ff-scan-index-button {
    flex: 0 0 180px;
    max-width: 220px;
}

body.ff-app .ff-imaging .ff-scan-icon-button {
    align-items: center;
    display: inline-flex;
    flex: 0 0 34px;
    justify-content: center;
    min-width: 34px;
    padding-left: 0;
    padding-right: 0;
    width: 34px;
}

body.ff-app .ff-imaging .ff-scan-preview-meta {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 18px;
    padding: 0 0 2px;
}

body.ff-app .ff-imaging .ff-scan-preview-meta label {
    margin: 0;
}

body.ff-app .ff-imaging .ff-scan-preview-frame {
    height: calc(100vh - 285px);
    min-height: 420px;
}

body.ff-app .ff-imaging .ff-scan-preview-frame embed {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

@media (max-width: 992px) {
    body.ff-app .ff-imaging .ff-scan-index-actions {
        flex-wrap: wrap;
    }

    body.ff-app .ff-imaging .ff-scan-index-button {
        flex: 1 1 180px;
        max-width: none;
    }

    body.ff-app .ff-imaging .ff-scan-preview-frame {
        height: 65vh;
    }
}

/* --- Main grid layout --- */
body.ff-app .ff-imaging .ff-imaging-grid {
    display: grid;
    grid-template-columns: minmax(420px, 460px) 360px minmax(520px, 1fr);
    gap: 14px;
    align-items: start;
}

/* --- Cards --- */
body.ff-app .ff-imaging .ff-imaging-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    overflow: hidden;
}

body.ff-app .ff-imaging .ff-imaging-card__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.ff-app .ff-imaging .ff-imaging-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Queue panel --- */
body.ff-app .ff-imaging .ff-imaging-queue__body {
    padding: 12px 12px 14px;
}

body.ff-app .ff-imaging .ff-imaging-queue__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    body.ff-app .ff-imaging .ff-imaging-queue__filters .btn {
        border-radius: 999px;
        padding: 5px 10px;
    }

body.ff-app .ff-imaging .ff-imaging-queue__table {
    height: calc(100vh - 280px);
    min-height: 420px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

    body.ff-app .ff-imaging .ff-imaging-queue__table thead td {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 2;
    }

    body.ff-app .ff-imaging .ff-imaging-queue__table td {
        padding: 6px 8px;
    }

        body.ff-app .ff-imaging .ff-imaging-queue__table td:last-child {
            white-space: normal;
            word-break: break-word;
        }

/* --- Index rail --- */
body.ff-app .ff-imaging .ff-imaging-index__body {
    padding: 12px 12px 14px;
}

/* Condense vertical rhythm ONLY for the index form */
body.ff-app .ff-imaging .ff-imaging-index-form .row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-imaging .ff-imaging-index-form .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-imaging .ff-imaging-index-form label {
    margin-bottom: 0 !important;
}

/* Selected doc banner */
body.ff-app .ff-imaging .ff-imaging-selected {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 10px;
    margin-bottom: 10px;
}

body.ff-app .ff-imaging .ff-imaging-selected__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

body.ff-app .ff-imaging .ff-imaging-selected__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Skinny form: one field per row */
body.ff-app .ff-imaging .ff-imaging-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.ff-app .ff-imaging .ff-imaging-field label {
    display: block;
    margin-bottom: 4px;
}

body.ff-app .ff-imaging .ff-imaging-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

    body.ff-app .ff-imaging .ff-imaging-actions .btn {
        height: 34px;
    }

    body.ff-app .ff-imaging .ff-imaging-actions .btn-index {
        flex: 1 1 auto;
    }

/* --- Preview panel --- */
body.ff-app .ff-imaging .ff-imaging-preview {
    position: sticky;
    top: 92px; /* adjust if header height changes */
}

body.ff-app .ff-imaging .ff-imaging-preview__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.ff-app .ff-imaging .ff-imaging-preview__count {
    font-size: 12px;
    color: var(--text-muted);
}

body.ff-app .ff-imaging .ff-imaging-preview__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.ff-app .ff-imaging .ff-imaging-preview__body {
    padding: 0;
    height: calc(100vh - 170px);
    min-height: 520px;
}

    body.ff-app .ff-imaging .ff-imaging-preview__body embed,
    body.ff-app .ff-imaging .ff-imaging-preview__body iframe {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }

body.ff-app .ff-imaging .ff-imaging-empty {
    padding: 16px;
    color: var(--text-muted);
    text-align: center;
}

/* --- Upload input: hide accessibly (keeps label click working) --- */
body.ff-app .ff-imaging .ff-upload-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* --- Inputs in Imaging should match app surface --- */
body.ff-app .ff-imaging .form-control,
body.ff-app .ff-imaging .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-imaging .ui-select-bootstrap .ui-select-search {
    background: var(--surface) !important; /* change to transparent if preferred */
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* --- Date + Time row (no outer edge padding) --- */
body.ff-app .ff-imaging .ff-dt-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-imaging .ff-dt-col-left {
    padding-left: 0 !important;
    padding-right: 6px !important;
}

body.ff-app .ff-imaging .ff-dt-col-right {
    padding-left: 6px !important;
    padding-right: 0 !important;
}

/* Compact time control */
body.ff-app .ff-imaging .ff-time-compact {
    width: 96px;
    min-width: 88px;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 6px;
    display: inline-block;
}

/* --- Responsive --- */
@media (max-width: 1400px) {
    body.ff-app .ff-imaging .ff-imaging-grid {
        grid-template-columns: 320px 1fr;
    }

    body.ff-app .ff-imaging .ff-imaging-preview {
        grid-column: 1 / -1;
        position: relative;
        top: auto;
    }

    body.ff-app .ff-imaging .ff-imaging-preview__body {
        height: 70vh;
    }
}

@media (max-width: 992px) {
    body.ff-app .ff-imaging .ff-imaging-grid {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-imaging .ff-imaging-queue__table {
        height: 50vh;
    }
}

/* Only a subtle left indicator */
.ff-imaging .ff-imaging-queue__table tr {
    position: relative;
}

    .ff-imaging .ff-imaging-queue__table tr::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
    }

    .ff-imaging .ff-imaging-queue__table tr.tag-indexed::before {
        background: #f59e0b; /* amber for "Needs indexing" */
    }

    .ff-imaging .ff-imaging-queue__table tr:not(.tag-indexed)::before {
        background: #22c55e; /* green for "Indexed" */
    }

/* ---- Kill the harsh red/green styling (override whatever exists) ---- */
body.ff-app .ff-imaging .ff-imaging-queue__table tr,
body.ff-app .ff-imaging .ff-imaging-queue__table tr td {
    background: transparent !important;
    color: var(--text) !important;
}

    /* Selected row: subtle highlight */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr.row-selected td {
        background: rgba(59,130,246,.10) !important; /* subtle primary tint */
    }

/* Left status bar indicator */
body.ff-app .ff-imaging .ff-imaging-queue__table tr {
    position: relative;
}

    body.ff-app .ff-imaging .ff-imaging-queue__table tr::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
    }

    /* Needs indexing (your existing tag-indexed class) */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr.tag-indexed::before {
        background: #f59e0b; /* amber */
    }

    /* Indexed rows: muted text */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr:not(.tag-indexed):not(.row-selected) td {
        color: var(--on-primary) !important;
    }

    /* =========================================
   Imaging Queue: token-safe status styling
   ========================================= */

    /* Remove any legacy harsh row coloring */
    body.ff-app .ff-imaging .ff-imaging-queue__table tr,
    body.ff-app .ff-imaging .ff-imaging-queue__table tr td {
        background: transparent !important;
        color: var(--text) !important;
    }

        /* Selected row highlight derived from the primary seed */
        body.ff-app .ff-imaging .ff-imaging-queue__table tr.row-selected td {
            background: var(--nav-active-bg) !important; /* derived from --primary-seed */
        }

        body.ff-app .ff-imaging .ff-imaging-queue__table tr.row-selected {
            box-shadow: inset 0 0 0 1px var(--nav-active-border); /* derived from --primary-seed */
        }

/* Compact table cells a bit */
body.ff-app .ff-imaging .ff-imaging-queue__table td {
    padding: 6px 8px;
    vertical-align: middle;
}

/* Status chip (uses semantic tokens only) */
body.ff-app .ff-imaging .ff-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Needs indexing = warning/orange (matches your warning token / "tab" vibe) */
body.ff-app .ff-imaging .ff-status--todo {
    color: color-mix(in srgb, var(--warning) 70%, var(--text));
    background: var(--warning-bg);
    border-color: var(--warning-brd);
}

/* Indexed = success/green but subtle */
body.ff-app .ff-imaging .ff-status--ok {
    color: color-mix(in srgb, var(--success) 70%, var(--text));
    background: var(--success-bg);
    border-color: var(--success-brd);
}

/* Optional: tiny dot inside chip for extra clarity */
body.ff-app .ff-imaging .ff-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: .9;
}

/* Info button ("i" bubble) */
body.ff-app .ff-imaging .ff-rowinfo {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

    body.ff-app .ff-imaging .ff-rowinfo:hover {
        border-color: var(--nav-active-border);
        background: var(--surface-2);
        color: var(--text);
    }

/* Popover styling (token-compliant) */
body.ff-app .ff-imaging .popover {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-1) !important;
    border-radius: var(--radius-sm) !important;
    max-width: 320px;
}

    body.ff-app .ff-imaging .popover .popover-content {
        color: var(--text);
        font-size: 12px;
    }

body.ff-app .ff-imaging .ff-pop-title {
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 6px;
}

body.ff-app .ff-imaging .ff-pop-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 10px;
}

body.ff-app .ff-imaging .ff-pop-k {
    color: var(--text-muted);
}

body.ff-app .ff-imaging .ff-pop-v {
    color: var(--text);
    word-break: break-word;
}

/* =========================================
   Queue filter pills (token-only colors)
   ========================================= */

body.ff-app {
    /* If you haven't added these yet, they derive from existing tokens */
    --warning-bg: color-mix(in srgb, transparent 88%, var(--warning));
    --warning-brd: color-mix(in srgb, transparent 55%, var(--warning));
    --primary-bg: var(--nav-active-bg); /* derived from --primary-seed */
    --primary-brd: var(--nav-active-border); /* derived from --primary-seed */
}

    body.ff-app[data-theme="dark"] {
        --warning-bg: color-mix(in srgb, transparent 78%, var(--warning));
        --warning-brd: color-mix(in srgb, transparent 40%, var(--warning));
    }

    /* Base pill */
    body.ff-app .ff-imaging .ff-qfilter {
        appearance: none;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: 999px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }

    /* Active state (seed-derived for ALL/INDEX) */
    body.ff-app .ff-imaging .ff-qfilter--all.is-active,
    body.ff-app .ff-imaging .ff-qfilter--indexed.is-active {
        background: var(--primary-bg);
        border-color: var(--primary-brd);
        color: var(--text);
    }

    /* UNINDEX uses warning token (orange) */
    body.ff-app .ff-imaging .ff-qfilter--unindexed {
        border-color: var(--warning-brd);
        color: color-mix(in srgb, var(--warning) 80%, var(--text));
        background: var(--warning-bg);
    }

        /* UNINDEX active can be slightly stronger (still token-derived) */
        body.ff-app .ff-imaging .ff-qfilter--unindexed.is-active {
            background: color-mix(in srgb, var(--warning-bg) 70%, var(--surface));
            border-color: var(--warning);
        }

    /* Disabled (ALL/INDEX/UNINDEX) */
    body.ff-app .ff-imaging .ff-qfilter:disabled {
        cursor: not-allowed;
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--text-disabled);
        opacity: 1; /* keep consistent; don't fade */
    }

    /* Ensure disabled UNINDEX is NOT orange */
    body.ff-app .ff-imaging .ff-qfilter--unindexed:disabled {
        background: var(--surface-2);
        border-color: var(--border);
        color: var(--text-disabled);
    }

    body.ff-app .ff-imaging .popover {
        width: 320px;
        max-width: 360px !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-1) !important;
        background: var(--surface) !important;
    }

        body.ff-app .ff-imaging .popover .popover-content {
            padding: 12px 12px !important;
            color: var(--text);
            font-size: 12px;
        }

    body.ff-app .ff-imaging .ff-pop-title {
        font-weight: 800;
        font-size: 12px;
        margin-bottom: 8px;
        color: var(--text);
    }

    body.ff-app .ff-imaging .ff-pop-grid {
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 6px 10px;
    }

    body.ff-app .ff-imaging .ff-pop-k {
        color: var(--text-muted);
    }

    body.ff-app .ff-imaging .ff-pop-v {
        color: var(--text);
        font-weight: 600;
        min-width: 0;
        word-break: break-word;
    }

    /* =========================================
   Token-safe Popover styling (UI Bootstrap)
   Works with append-to-body + light/dark
   ========================================= */

    /* Target ALL uib popovers (they may be appended to body, so don't rely on .ff-imaging parent) */
    body.ff-app [uib-popover-popup].popover,
    body.ff-app [uib-popover-html-popup].popover,
    body.ff-app [uib-popover-template-popup].popover,
    body.ff-app .popover {
        font-family: inherit !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-1) !important;
        max-width: 360px !important;
        width: 320px;
        padding: 0 !important; /* we'll control padding inside */
    }

        /* Content padding */
        body.ff-app [uib-popover-popup].popover .popover-content,
        body.ff-app [uib-popover-html-popup].popover .popover-content,
        body.ff-app [uib-popover-template-popup].popover .popover-content,
        body.ff-app .popover .popover-content {
            padding: 12px 12px !important;
            background: transparent !important;
            color: var(--text) !important;
        }

        /* If a title is ever used */
        body.ff-app [uib-popover-popup].popover .popover-title,
        body.ff-app [uib-popover-html-popup].popover .popover-title,
        body.ff-app [uib-popover-template-popup].popover .popover-title,
        body.ff-app .popover .popover-title {
            background: var(--surface-2) !important;
            color: var(--text) !important;
            border-bottom: 1px solid var(--border) !important;
            font-weight: 700 !important;
        }

        /* Arrow must match surface + border (Bootstrap uses rgba(0,0,0,...) by default) */
        body.ff-app .popover > .arrow,
        body.ff-app .popover > .arrow:after {
            border-color: transparent !important;
        }

        /* Right placement arrow */
        body.ff-app .popover.right > .arrow {
            border-right-color: var(--border) !important;
        }

            body.ff-app .popover.right > .arrow:after {
                border-right-color: var(--surface) !important;
            }

        /* Left placement arrow */
        body.ff-app .popover.left > .arrow {
            border-left-color: var(--border) !important;
        }

            body.ff-app .popover.left > .arrow:after {
                border-left-color: var(--surface) !important;
            }

        /* Top placement arrow */
        body.ff-app .popover.top > .arrow {
            border-top-color: var(--border) !important;
        }

            body.ff-app .popover.top > .arrow:after {
                border-top-color: var(--surface) !important;
            }

        /* Bottom placement arrow */
        body.ff-app .popover.bottom > .arrow {
            border-bottom-color: var(--border) !important;
        }

            body.ff-app .popover.bottom > .arrow:after {
                border-bottom-color: var(--surface) !important;
            }

    /* Your popover internal layout */
    body.ff-app .ff-pop-title {
        font-weight: 800;
        font-size: 12px;
        margin-bottom: 8px;
        color: var(--text) !important;
    }

    body.ff-app .ff-pop-grid {
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 6px 10px;
    }

    body.ff-app .ff-pop-k {
        color: var(--text-muted) !important;
    }

    body.ff-app .ff-pop-v {
        color: var(--text) !important;
        font-weight: 600;
        min-width: 0;
        word-break: break-word;
    }

    /* Scan buttons when prerequisites are missing: look "disabled-ish" but still clickable */
    body.ff-app .ff-imaging .ff-action--requires-setup {
        opacity: 1;
        border-color: var(--border);
        background: var(--surface-2);
        color: var(--text-muted);
    }

        body.ff-app .ff-imaging .ff-action--requires-setup:hover {
            border-color: var(--warning);
            box-shadow: 0 0 0 2px color-mix(in srgb, transparent 80%, var(--warning));
            color: var(--text);
        }

    /* =========================================
   Scan prereq modal polish (token-safe)
   ========================================= */

    body.ff-app .modal-content {
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-1);
    }

    /* Header */
    body.ff-app .modal-header {
        padding: 14px 18px;
        border-bottom: 1px solid var(--divider);
        background: var(--surface);
        border-top-left-radius: var(--radius-md);
        border-top-right-radius: var(--radius-md);
    }

    body.ff-app .modal-title {
        font-weight: 800;
        font-size: 16px;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 10px;
    }

        body.ff-app .modal-title .fa {
            color: var(--info);
        }

    /* Body */
    body.ff-app .modal-body {
        padding: 18px 18px 10px;
        color: var(--text);
    }

        body.ff-app .modal-body p {
            margin-bottom: 10px;
            color: var(--text);
        }

        body.ff-app .modal-body ol {
            margin: 8px 0 14px 22px;
            color: var(--text);
        }

            body.ff-app .modal-body ol li {
                margin-bottom: 6px;
            }

        /* Download buttons: consistent height + tighter */
        body.ff-app .modal-body .btn.btn-primary.btn-block {
            height: 40px;
            border-radius: var(--radius-sm);
            font-weight: 800;
            letter-spacing: .01em;
        }

        /* Small helper text under download buttons */
        body.ff-app .modal-body small {
            color: var(--text-muted);
            line-height: 1.35;
        }

        /* Callout box (replace “alert” look) */
        body.ff-app .modal-body .alert {
            margin-top: 14px !important;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border) !important;
            background: var(--surface-2) !important;
            color: var(--text) !important;
            padding: 12px 12px !important;
        }

    /* Footer */
    body.ff-app .modal-footer {
        padding: 12px 18px;
        border-top: 1px solid var(--divider);
        background: var(--surface-2);
        border-bottom-left-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
    }

        /* Footer buttons */
        body.ff-app .modal-footer .btn {
            height: 34px;
            border-radius: var(--radius-sm);
            padding: 0 14px;
            font-weight: 700;
        }

            /* Make the secondary button feel calmer */
            body.ff-app .modal-footer .btn.btn-default {
                background: var(--surface);
                border-color: var(--border);
                color: var(--text);
            }

                body.ff-app .modal-footer .btn.btn-default:hover {
                    background: var(--surface-2);
                }

            /* Improve spacing between footer buttons */
            body.ff-app .modal-footer .btn + .btn {
                margin-left: 10px;
            }

    /* =========================================
   Modal download button polish
   ========================================= */

    body.ff-app .modal-body .ff-dl-btn {
        height: 44px; /* slightly taller = more premium */
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 14px !important; /* override bootstrap padding */
        line-height: 1 !important;
        border-radius: var(--radius-sm) !important;
        font-weight: 800 !important;
        font-size: 13px !important;
        letter-spacing: .01em;
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--on-primary) !important;
        text-decoration: none !important;
    }

        /* Icon sizing/alignment */
        body.ff-app .modal-body .ff-dl-btn > i.fa {
            font-size: 14px;
            line-height: 1;
        }

        /* Hover/active using your derived tokens */
        body.ff-app .modal-body .ff-dl-btn:hover {
            background: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
            color: var(--on-primary) !important;
        }

        body.ff-app .modal-body .ff-dl-btn:active {
            background: var(--primary-active) !important;
            border-color: var(--primary-active) !important;
        }

        /* Focus ring uses token */
        body.ff-app .modal-body .ff-dl-btn:focus {
            outline: none !important;
            box-shadow: 0 0 0 3px var(--focus) !important;
        }

        /* Make the helper text sit closer + read nicer */
        body.ff-app .modal-body .ff-dl-btn + small {
            margin-top: 8px !important;
            display: block;
            color: var(--text-muted) !important;
            line-height: 1.35;
        }

    /* ============================================================
   Pending Queue table: header = primary/onPrimary
   body = surface/text
   selected = nav-active-bg
   hover = lighter version of nav-active-bg (derived from tokens)
   ============================================================ */

    body.ff-app .ff-imaging #pendingQueueTable {
        /* tokens */
        --pq-selected-bg: var(--nav-active-bg);
        /* fallback hover (if color-mix unsupported) */
        --pq-hover-bg: var(--topbar-hover);
    }

/* Derive hover from tokens: mix selected bg with surface to make it lighter */
@supports (background: color-mix(in srgb, black, white)) {
    body.ff-app .ff-imaging #pendingQueueTable {
        /* tweak the % to taste: more surface = lighter */
        --pq-hover-bg: color-mix(in srgb, var(--nav-active-bg) 70%, var(--surface) 30%);
    }
}

/* HEADER */
body.ff-app .ff-imaging #pendingQueueTable thead td {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* BODY baseline: always readable */
body.ff-app .ff-imaging #pendingQueueTable tbody td {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Body baseline: explicitly beat the problematic rule */
body.ff-app .ff-imaging #pendingQueueTable tbody tr:not(.tag-indexed):not(.row-selected) td {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* SELECTED row (no hover reaction) */
body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected td {
    background: var(--pq-selected-bg) !important;
    color: var(--text) !important;
}

/* HOVER only for NON-selected rows */
body.ff-app .ff-imaging #pendingQueueTable tbody tr:not(.row-selected):hover td {
    background: var(--pq-hover-bg) !important;
    color: var(--text) !important;
}

/* Safety: if any other hover rule exists elsewhere, force selected to stay selected */
body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected:hover td {
    background: var(--pq-selected-bg) !important;
    color: var(--text) !important;
}
/* ============================================================
   #pendingQueueTable — BORDER SYSTEM RESET + REBUILD (token-based)
   Goal: flawless single-source-of-truth borders (no clashes with Bootstrap)
   ============================================================ */

body.ff-app .ff-imaging #pendingQueueTable {
    /* Border tokens (single palette) */
    --pq-border: var(--border);
    /* Slightly stronger divider for header row (derived, not hard-coded) */
    --pq-border-strong: var(--border);
}

/* Derive a stronger header divider from tokens (if supported) */
@supports (border-color: color-mix(in srgb, black, white)) {
    body.ff-app .ff-imaging #pendingQueueTable {
        /* Mix border with text a bit to increase contrast */
        --pq-border-strong: color-mix(in srgb, var(--border) 70%, var(--text) 30%);
    }
}

/* --- TABLE FRAME --- */
body.ff-app .ff-imaging #pendingQueueTable {
    border-collapse: separate !important; /* needed for clean radius + predictable dividers */
    border-spacing: 0 !important;
    /* One consistent outer border */
    border: 1px solid var(--pq-border) !important;
    /* Optional: modern look */
    border-radius: 10px;
    background: var(--surface) !important;
    /* Helps avoid weird “double edges”/bleed */
    background-clip: padding-box;
}

    /* If your border-radius doesn’t clip in a particular browser/layout,
   apply overflow:hidden to the wrapper instead:
   body.ff-app .ff-imaging .ff-imaging-queue__table { border-radius:10px; overflow:hidden; }
*/

    /* --- HARD RESET any existing borders on this table (Bootstrap + legacy) --- */
    body.ff-app .ff-imaging #pendingQueueTable,
    body.ff-app .ff-imaging #pendingQueueTable * {
        border-color: var(--pq-border) !important;
    }

        body.ff-app .ff-imaging #pendingQueueTable th,
        body.ff-app .ff-imaging #pendingQueueTable td {
            /* nuke all border declarations coming from .table-bordered, etc. */
            border: 0 !important;
            /* also prevent legacy “border-like” effects from looking like random borders */
            background-clip: padding-box;
        }

        /* Normalize row shadow/border effects so borders don’t “fight” */
        body.ff-app .ff-imaging #pendingQueueTable tbody tr {
            box-shadow: none !important;
            outline: none !important;
        }

        /* --- INTERNAL GRIDLINES (single system) --- */
        /* We draw only:
   - right borders for vertical dividers
   - bottom borders for horizontal dividers
   This guarantees: no double-thick lines anywhere.
*/
        body.ff-app .ff-imaging #pendingQueueTable thead td,
        body.ff-app .ff-imaging #pendingQueueTable tbody td {
            border-right: 1px solid var(--pq-border) !important;
            border-bottom: 1px solid var(--pq-border) !important;
        }

        /* Remove right divider on the last column (outer border handles it) */
        body.ff-app .ff-imaging #pendingQueueTable tr > td:last-child,
        body.ff-app .ff-imaging #pendingQueueTable tr > th:last-child {
            border-right: 0 !important;
        }

        /* Remove bottom divider on the last body row (outer border handles it) */
        body.ff-app .ff-imaging #pendingQueueTable tbody tr:last-child > td,
        body.ff-app .ff-imaging #pendingQueueTable tbody tr:last-child > th {
            border-bottom: 0 !important;
        }

        /* Stronger divider under the header row */
        body.ff-app .ff-imaging #pendingQueueTable thead td {
            border-bottom: 1px solid var(--pq-border-strong) !important;
            font-weight: bold;
        }

        /* Optional: if you want a subtle vertical emphasis in the header only,
   keep the same pq-border; otherwise omit. (Already covered by border-right.) */


        /* --- SELECTED ROW “BORDER” (clean + consistent) --- */
        /* Selected row gets an inset outline so it reads as selected without
   changing gridline thickness or introducing mixed border colors. */
        body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected {
            box-shadow: inset 0 0 0 1px var(--nav-active-border) !important;
        }

            /* Make sure selected outline doesn't appear to thicken any cell borders */
            body.ff-app .ff-imaging #pendingQueueTable tbody tr.row-selected td {
                /* keep cell dividers consistent */
                border-right-color: var(--pq-border) !important;
                border-bottom-color: var(--pq-border) !important;
            }



/* Tooltips are help text only; never let them steal hover/click events from controls. */
.tooltip,
.tooltip.ff-tooltip-noevents {
    pointer-events: none;
}

/* Top navbar tooltips are appended to body so the fixed toolbar/history strip cannot cover them. */
body.ff-app > .tooltip,
body.ff-app .tooltip.ff-topnav-tooltip {
    z-index: 2147483000 !important;
    pointer-events: none !important;
}

/* Make the icon easier to hover/click (reduces accidental mouseout) */
.ff-icon-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px; /* bigger hit area */
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}

    /* Optional: hover affordance without changing layout */
    .ff-icon-tooltip:hover {
        background: var(--topbar-hover);
    }

.csspinner::before{
background-color:transparent;
}

.shipmentheader {
    font-weight: 700 !important;
    margin: 0 0 8px 15px !important;
    padding: 6px 10px !important;
    background-color: var(--surface-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.timeline-xs .timeline-item .shipmentheader {
    display: inline-block;
    font-weight: 700 !important;
    margin: 0 0 8px 15px !important;
    padding: 6px 10px !important;
    background-color: var(--surface-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.timeline-xs .timeline-item.info {
    border-left-color: var(--primary);
}

.timeline-xs .timeline-item p,
.timeline-xs .timeline-item .text-black {
    color: var(--text) !important;
}



body.ff-app .ff-internal-tracking {
    --ff-card-pad-x: 20px;
    --ff-card-pad-y: 18px;
}

    body.ff-app .ff-internal-tracking .ff-card.panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        overflow: hidden;
        margin-bottom: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-card-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--divider);
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
    }

    body.ff-app .ff-internal-tracking .ff-card-body {
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking .ff-card-header-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking .ff-card-title {
        margin: 0;
        color: var(--text) !important;
        font-size: 18px;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking .ff-card-title-inline {
        color: var(--text-muted);
        font-weight: 600;
        margin-left: 6px;
    }

    body.ff-app .ff-internal-tracking .ff-card-meta {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking .ff-search-grid .form-group {
        margin-bottom: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-search-submit-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 74px;
    }

    body.ff-app .ff-internal-tracking .ff-search-submit {
        width: 100%;
        min-height: 40px;
    }

    body.ff-app .ff-internal-tracking .ff-tracking-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking .ff-summary-item {
        min-width: 140px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-2);
    }

    body.ff-app .ff-internal-tracking .ff-summary-label {
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking .ff-summary-value {
        display: block;
        color: var(--text);
        font-weight: 600;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking .ff-results-scroll {
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking .ff-results-table {
        margin-bottom: 0;
        background: var(--surface);
    }

        body.ff-app .ff-internal-tracking .ff-results-table thead th {
            background: var(--surface-3);
            color: var(--text) !important;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking .ff-results-table tbody tr:hover {
            background: var(--surface-2);
        }

    body.ff-app .ff-internal-tracking .ff-results-actions {
        margin-top: 14px;
        text-align: right;
    }

    body.ff-app .ff-internal-tracking .ff-tracking-tabs {
        margin-top: 8px;
    }

    body.ff-app .ff-internal-tracking .ff-tab-pane-wrap {
        padding-top: 12px;
    }

    body.ff-app .ff-internal-tracking .ff-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-head {
        margin: 0 0 8px 15px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking .ff-timeline-head-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.ff-app .ff-internal-tracking .timeline-xs .timeline-item {
        border-left-color: var(--primary);
        padding-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking .shipmentheader.ff-timeline-date {
        display: inline-block;
        margin: 0 0 8px 15px !important;
        padding: 6px 10px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-weight: 700 !important;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-row {
        margin: 0 0 0 15px;
        padding: 10px 0;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking .timeline-item .ff-timeline-row:last-child {
        border-bottom: 0;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell p,
    body.ff-app .ff-internal-tracking .ff-text,
    body.ff-app .ff-internal-tracking .text-black {
        color: var(--text) !important;
        margin: 0;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell-label {
        display: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 6px;
    }

    body.ff-app .ff-internal-tracking .ff-action-link {
        color: var(--primary);
        font-weight: 600;
    }

        body.ff-app .ff-internal-tracking .ff-action-link:hover,
        body.ff-app .ff-internal-tracking .ff-action-link:focus {
            color: var(--primary-hover);
            text-decoration: underline;
        }

    body.ff-app .ff-internal-tracking .ff-notify-textarea {
        resize: vertical;
        min-height: 110px;
    }

    body.ff-app .ff-internal-tracking .ff-field-help {
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking .ff-summary-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    body.ff-app .ff-internal-tracking .ff-summary-line {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking .ff-summary-line:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

    body.ff-app .ff-internal-tracking .ff-summary-line-label {
        color: var(--text-muted);
        font-weight: 600;
        min-width: 90px;
    }

    body.ff-app .ff-internal-tracking .ff-summary-line-value {
        color: var(--text);
        font-weight: 600;
        text-align: right;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking .ff-detail-list {
        margin: 0;
    }

    body.ff-app .ff-internal-tracking .ff-detail-item {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 12px;
        align-items: start;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking .ff-detail-item:last-child {
            border-bottom: 0;
        }

        body.ff-app .ff-internal-tracking .ff-detail-item dt {
            margin: 0;
            color: var(--text-muted);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking .ff-detail-item dd {
            margin: 0;
            color: var(--text);
            font-weight: 500;
            word-break: break-word;
        }

    body.ff-app .ff-internal-tracking .ff-images-pane {
        padding: 0;
        min-height: 75vh;
    }

    body.ff-app .ff-internal-tracking .ff-images-frame {
        display: block;
        width: 100%;
        min-height: 75vh;
        border: 0;
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking .ff-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 260px;
        text-align: center;
    }

    body.ff-app .ff-internal-tracking .ff-empty-state-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking .ff-empty-state-title {
        margin: 0 0 6px;
        color: var(--text);
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking .ff-empty-state-copy {
        max-width: 560px;
        margin: 0;
        color: var(--text-muted);
    }

    body.ff-app .ff-internal-tracking .ff-visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

@media (max-width: 991px) {
    body.ff-app .ff-internal-tracking .ff-summary-line {
        flex-direction: column;
        align-items: flex-start;
    }

    body.ff-app .ff-internal-tracking .ff-summary-line-value {
        text-align: left;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking .ff-card-header,
    body.ff-app .ff-internal-tracking .ff-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-head {
        display: none;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-row {
        margin-left: 15px;
        padding: 12px 0;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell {
        margin-bottom: 8px;
    }

    body.ff-app .ff-internal-tracking .ff-timeline-cell-label {
        display: inline-block;
    }

    body.ff-app .ff-internal-tracking .ff-detail-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

body.ff-app .ff-internal-tracking--refined {
    --ff-card-pad-x: 20px;
    --ff-card-pad-y: 16px;
    --ff-card-pad-tight-y: 14px;
    --ff-card-gap: 16px;
}

    body.ff-app .ff-internal-tracking--refined .container-fullw {
        background: transparent;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card.panel {
        margin-bottom: var(--ff-card-gap);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        overflow: hidden;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--divider);
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-header--tight {
        padding-top: var(--ff-card-pad-tight-y);
        padding-bottom: var(--ff-card-pad-tight-y);
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-body {
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-body--compact {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-header-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-title {
        margin: 0;
        color: var(--text) !important;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-title-inline {
        color: var(--text-muted);
        font-weight: 600;
        margin-left: 6px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card-meta {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-shell .ff-card-body {
        padding-top: 14px;
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-row .form-group {
        margin-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-row label {
        margin-bottom: 6px;
        color: var(--text);
        font-weight: 700;
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-submit-wrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 68px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-search-submit {
        width: 100%;
        min-height: 40px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-item {
        min-width: 120px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 8px 10px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-item--status {
        flex: 1 1 360px;
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-label {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-value {
        display: block;
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-inline-sep {
        color: var(--text-disabled);
        padding: 0 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-results-scroll {
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--refined .ff-results-table {
        margin-bottom: 0;
        background: var(--surface);
    }

        body.ff-app .ff-internal-tracking--refined .ff-results-table thead th {
            background: var(--surface-3);
            color: var(--text) !important;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--refined .ff-results-table tbody tr:hover {
            background: var(--surface-2);
        }

    body.ff-app .ff-internal-tracking--refined .ff-results-actions {
        margin-top: 12px;
        text-align: right;
    }

    body.ff-app .ff-internal-tracking--refined .ff-tracking-tabs {
        margin-top: 2px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        overflow: hidden;
    }

        body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li {
            margin-bottom: 0;
        }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a {
                margin-right: 0;
                border: 0 !important;
                border-right: 1px solid var(--divider) !important;
                background: var(--surface);
                color: var(--text-muted);
                font-weight: 700;
                font-size: 12px;
                letter-spacing: 0.02em;
                padding: 13px 18px;
                text-transform: uppercase;
                transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
            }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li:last-child > a {
                border-right: 0 !important;
            }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a:hover,
            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a:focus {
                background: var(--surface-2);
                color: var(--text);
            }

            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li.active > a,
            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li.active > a:hover,
            body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li.active > a:focus {
                background: color-mix(in srgb, var(--primary) 8%, var(--surface));
                color: var(--text);
                box-shadow: inset 0 -3px 0 var(--primary);
            }

    body.ff-app .ff-internal-tracking--refined .ff-tab-pane-wrap {
        padding-top: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-main-layout {
        display: flex;
        flex-wrap: wrap;
    }

        body.ff-app .ff-internal-tracking--refined .ff-main-layout > [class*="col-"] {
            margin-bottom: 0;
        }

    body.ff-app .ff-internal-tracking--refined .ff-card--timeline {
        min-height: 100%;
    }

    body.ff-app .ff-internal-tracking--refined .ff-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-card--compact {
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-banner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 14px;
        border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 52px;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--primary);
        color: var(--on-primary);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: var(--text);
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-meta {
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-head {
        margin: 0 0 10px 15px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-head-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.ff-app .ff-internal-tracking--refined .timeline-xs .timeline-item {
        border-left-color: var(--primary);
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--refined .shipmentheader.ff-timeline-date {
        display: inline-block;
        margin: 0 0 8px 15px !important;
        padding: 6px 10px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-weight: 700 !important;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-row {
        margin: 0 0 0 15px;
        padding: 11px 0;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--refined .timeline-item .ff-timeline-row:last-child {
        border-bottom: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-row--highlight {
        background: color-mix(in srgb, var(--primary) 4%, transparent);
        border-radius: 8px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell {
        min-height: 1px;
    }

        body.ff-app .ff-internal-tracking--refined .ff-timeline-cell p,
        body.ff-app .ff-internal-tracking--refined .ff-text,
        body.ff-app .ff-internal-tracking--refined .text-black {
            color: var(--text) !important;
            margin: 0;
        }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell-label {
        display: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 6px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-action-link {
        color: var(--primary);
        font-weight: 600;
        line-height: 1.4;
    }

        body.ff-app .ff-internal-tracking--refined .ff-action-link:hover,
        body.ff-app .ff-internal-tracking--refined .ff-action-link:focus {
            color: var(--primary-hover);
            text-decoration: underline;
        }

    body.ff-app .ff-internal-tracking--refined .ff-notify-textarea {
        resize: vertical;
        min-height: 96px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-field-help {
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.35;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-stack {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking--refined .ff-summary-line:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        body.ff-app .ff-internal-tracking--refined .ff-summary-line:first-child {
            padding-top: 0;
        }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line-label {
        color: var(--text-muted);
        font-weight: 600;
        min-width: 80px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line-value {
        color: var(--text);
        font-weight: 600;
        text-align: right;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-group {
        min-width: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-group-title {
        margin: 0 0 10px;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-list {
        margin: 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-item {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px;
        align-items: start;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking--refined .ff-detail-item:last-child {
            border-bottom: 0;
        }

        body.ff-app .ff-internal-tracking--refined .ff-detail-item dt {
            margin: 0;
            color: var(--text-muted);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--refined .ff-detail-item dd {
            margin: 0;
            color: var(--text);
            font-weight: 500;
            word-break: break-word;
        }

    body.ff-app .ff-internal-tracking--refined .ff-images-pane {
        padding: 0;
        min-height: 75vh;
    }

    body.ff-app .ff-internal-tracking--refined .ff-images-frame {
        display: block;
        width: 100%;
        min-height: 75vh;
        border: 0;
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 250px;
        text-align: center;
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state-title {
        margin: 0 0 6px;
        color: var(--text);
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--refined .ff-empty-state-copy {
        max-width: 560px;
        margin: 0;
        color: var(--text-muted);
    }

    body.ff-app .ff-internal-tracking--refined .ff-visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

@media (max-width: 1199px) {
    body.ff-app .ff-internal-tracking--refined .ff-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.ff-app .ff-internal-tracking--refined .ff-summary-line {
        flex-direction: column;
        align-items: flex-start;
    }

    body.ff-app .ff-internal-tracking--refined .ff-summary-line-value {
        text-align: left;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-grid {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-internal-tracking--refined .ff-shipbar-item--status {
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking--refined .ff-card-header,
    body.ff-app .ff-internal-tracking--refined .ff-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-tabs-modern > .nav-tabs > li > a {
        padding: 11px 12px;
        font-size: 11px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-head {
        display: none;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-row {
        margin-left: 15px;
        padding: 12px 0;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell {
        margin-bottom: 8px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-timeline-cell-label {
        display: inline-block;
    }

    body.ff-app .ff-internal-tracking--refined .ff-detail-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--refined .ff-latest-event-banner {
        flex-direction: column;
    }
}

body.ff-app .ff-internal-tracking--final {
    --ff-card-pad-x: 20px;
    --ff-card-pad-y: 16px;
    --ff-card-pad-tight-y: 14px;
    --ff-card-gap: 16px;
}

    body.ff-app .ff-internal-tracking--final .container-fullw {
        background: transparent;
    }

    body.ff-app .ff-internal-tracking--final .ff-card.panel {
        margin-bottom: var(--ff-card-gap);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        overflow: hidden;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-header {
        background: var(--surface-2);
        border-bottom: 1px solid var(--divider);
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
    }

    body.ff-app .ff-internal-tracking--final .ff-card-header--tight {
        padding-top: var(--ff-card-pad-tight-y);
        padding-bottom: var(--ff-card-pad-tight-y);
    }

    body.ff-app .ff-internal-tracking--final .ff-card-body {
        padding: var(--ff-card-pad-y) var(--ff-card-pad-x);
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--final .ff-card-body--compact {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-header-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-title {
        margin: 0;
        color: var(--text) !important;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--final .ff-card-meta {
        margin: 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-shell .ff-card-body {
        padding-top: 14px;
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        margin-left: -8px;
        margin-right: -8px;
    }

        body.ff-app .ff-internal-tracking--final .ff-search-row > .ff-search-col {
            float: none;
            padding-left: 8px;
            padding-right: 8px;
        }

        body.ff-app .ff-internal-tracking--final .ff-search-row .form-group {
            margin-bottom: 12px;
        }

        body.ff-app .ff-internal-tracking--final .ff-search-row label {
            margin-bottom: 6px;
            color: var(--text);
            font-weight: 700;
            font-size: 12px;
        }

    body.ff-app .ff-internal-tracking--final .ff-search-submit-wrap {
        min-height: 0;
        margin-bottom: 12px;
        display: flex;
        align-items: flex-end;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-submit {
        width: 100%;
        min-height: 30px;
    }

@media (min-width: 1200px) {
    body.ff-app .ff-internal-tracking--final .ff-search-col-main {
        width: 34%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-acc {
        width: 16%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-type {
        width: 16%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-action {
        width: 16%;
    }

    body.ff-app .ff-internal-tracking--final .ff-search-col-submit {
        width: 18%;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking--final .ff-search-row > .ff-search-col {
        width: 100%;
    }
}

    body.ff-app .ff-internal-tracking--final .ff-summary-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-item {
        min-width: 130px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 8px 10px;
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-item--latest {
        flex: 1 1 360px;
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-label {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-value {
        display: block;
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        word-break: break-word;
    }

    body.ff-app .ff-internal-tracking--final .ff-summary-strip-sep {
        color: var(--text-disabled);
        padding: 0 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-results-scroll {
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--final .ff-results-table {
        margin-bottom: 0;
        background: var(--surface);
    }

        body.ff-app .ff-internal-tracking--final .ff-results-table thead th {
            background: var(--surface-3);
            color: var(--text) !important;
            border-bottom: 1px solid var(--border);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--final .ff-results-table tbody tr:hover {
            background: var(--surface-2);
        }

    body.ff-app .ff-internal-tracking--final .ff-results-actions {
        margin-top: 12px;
        text-align: right;
    }

    body.ff-app .ff-internal-tracking--final .ff-tracking-tabs {
        margin-top: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs {
        margin: 0 0 14px;
        border-bottom: 0;
        background: transparent;
    }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified {
            width: 100%;
        }

            body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li {
                float: none;
            }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a {
            margin-right: 0;
            border: 1px solid var(--border) !important;
            border-bottom-color: var(--border) !important;
            background: var(--surface);
            color: var(--text-muted);
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            padding: 13px 18px;
            transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li:not(:first-child) > a {
            border-left-width: 0 !important;
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li:first-child > a {
            border-top-left-radius: var(--radius-md);
            border-bottom-left-radius: var(--radius-md);
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs.nav-justified > li:last-child > a {
            border-top-right-radius: var(--radius-md);
            border-bottom-right-radius: var(--radius-md);
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a:hover,
        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a:focus {
            background: var(--surface-2);
            color: var(--text);
        }

        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li.active > a,
        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li.active > a:hover,
        body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li.active > a:focus {
            background: color-mix(in srgb, var(--primary) 8%, var(--surface));
            color: var(--text);
            border-color: var(--border) !important;
            box-shadow: none;
        }

    body.ff-app .ff-internal-tracking--final .ff-tab-pane-wrap {
        padding-top: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-sidebar-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    body.ff-app .ff-internal-tracking--final .ff-card--compact {
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-banner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 14px;
        border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
        background: color-mix(in srgb, var(--primary) 7%, var(--surface));
        border-radius: var(--radius-sm);
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-badge {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 52px;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--primary);
        color: var(--on-primary);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: var(--text);
        line-height: 1.4;
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-meta {
        color: var(--text-muted);
        font-size: 12px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-head {
        margin: 0 0 10px 15px;
        padding: 0 0 10px;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-head-label {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.ff-app .ff-internal-tracking--final .timeline-xs .timeline-item {
        border-left-color: var(--primary);
        padding-bottom: 12px;
    }

    body.ff-app .ff-internal-tracking--final .shipmentheader.ff-timeline-date {
        display: inline-block;
        margin: 0 0 8px 15px !important;
        padding: 6px 10px !important;
        background: var(--surface-3) !important;
        color: var(--text) !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-weight: 700 !important;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-row {
        margin: 0 0 0 15px;
        padding: 11px 0;
        border-bottom: 1px solid var(--divider);
    }

    body.ff-app .ff-internal-tracking--final .timeline-item .ff-timeline-row:last-child {
        border-bottom: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-row--highlight {
        background: color-mix(in srgb, var(--primary) 4%, transparent);
        border-radius: 8px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell p,
    body.ff-app .ff-internal-tracking--final .ff-text,
    body.ff-app .ff-internal-tracking--final .text-black {
        color: var(--text) !important;
        margin: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell-label {
        display: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 6px;
    }

    body.ff-app .ff-internal-tracking--final .ff-action-link {
        color: var(--primary);
        font-weight: 600;
        line-height: 1.4;
    }

        body.ff-app .ff-internal-tracking--final .ff-action-link:hover,
        body.ff-app .ff-internal-tracking--final .ff-action-link:focus {
            color: var(--primary-hover);
            text-decoration: underline;
        }

    body.ff-app .ff-internal-tracking--final .ff-notify-textarea {
        resize: vertical;
        min-height: 96px;
    }

    body.ff-app .ff-internal-tracking--final .ff-field-help {
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.35;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-group {
        min-width: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-group-title {
        margin: 0 0 10px;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-list {
        margin: 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-item {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px;
        align-items: start;
        padding: 9px 0;
        border-bottom: 1px solid var(--divider);
    }

        body.ff-app .ff-internal-tracking--final .ff-detail-item:last-child {
            border-bottom: 0;
        }

        body.ff-app .ff-internal-tracking--final .ff-detail-item dt {
            margin: 0;
            color: var(--text-muted);
            font-weight: 700;
        }

        body.ff-app .ff-internal-tracking--final .ff-detail-item dd {
            margin: 0;
            color: var(--text);
            font-weight: 500;
            word-break: break-word;
        }

    body.ff-app .ff-internal-tracking--final .ff-images-pane {
        padding: 0;
        min-height: 75vh;
    }

    body.ff-app .ff-internal-tracking--final .ff-images-frame {
        display: block;
        width: 100%;
        min-height: 75vh;
        border: 0;
        background: var(--surface);
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 250px;
        text-align: center;
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        color: var(--primary);
        font-size: 22px;
        margin-bottom: 14px;
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state-title {
        margin: 0 0 6px;
        color: var(--text);
        font-weight: 700;
    }

    body.ff-app .ff-internal-tracking--final .ff-empty-state-copy {
        max-width: 560px;
        margin: 0;
        color: var(--text-muted);
    }

    body.ff-app .ff-internal-tracking--final .ff-visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

@media (max-width: 991px) {
    body.ff-app .ff-internal-tracking--final .ff-summary-strip-item--latest {
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-internal-tracking--final .ff-card-header,
    body.ff-app .ff-internal-tracking--final .ff-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.ff-app .ff-internal-tracking--final .ff-tabs-clean > .nav-tabs > li > a {
        padding: 11px 10px;
        font-size: 11px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-head {
        display: none;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-row {
        margin-left: 15px;
        padding: 12px 0;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell {
        margin-bottom: 8px;
    }

    body.ff-app .ff-internal-tracking--final .ff-timeline-cell-label {
        display: inline-block;
    }

    body.ff-app .ff-internal-tracking--final .ff-detail-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body.ff-app .ff-internal-tracking--final .ff-latest-event-banner {
        flex-direction: column;
    }
}

.acc-field-col,
.ff-acc-col {
    min-width: 10rem;
}

.acc-field,
.ff-acc-input,
body.ff-app input[name="AcctNo"],
body.ff-app input[name="accNo"],
body.ff-app input[name="AccNo"],
body.ff-app input[name="SAcctNumber"],
body.ff-app input[name="RAcctNumber"],
body.ff-app input[id="accClient"],
body.ff-app input[id="SAccNo"],
body.ff-app input[id="RAccNo"] {
    min-width: 12ch;
    width: 100%;
    font-family: Consolas, "Courier New", monospace !important;
    letter-spacing: 0.02em;
}

/* Portal-wide compact field spacing.
   styles.css still leaks a login-era input[type="text"]/input[type="password"]
   rule into the app shell, adding oversized horizontal padding and bold text.
   Tighten the common case here, then preserve extra inset only where icons
   or date affordances genuinely need it. */
body.ff-app input[type="text"]:not(.search-select),
body.ff-app input[type="password"],
body.ff-app input[type="number"],
body.ff-app input[type="email"],
body.ff-app input[type="search"],
body.ff-app input[type="tel"],
body.ff-app input[type="url"],
body.ff-app select.form-control,
body.ff-app textarea.form-control,
body.ff-app .ff-input:not(.search-select) {
    padding: 5px 10px !important;
    font-weight: 400 !important;
}

body.ff-app .ui-select-container .btn.form-control.ui-select-toggle,
body.ff-app .ui-select-container .btn.form-control,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-search {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-weight: 400 !important;
}

body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-ui.ui-select-bootstrap .ui-select-placeholder {
    line-height: 1.35 !important;
}

/* View Waybills filter fields must stay compact and top-aligned even after
   the generic waybill/ui-select rules later in this file are applied. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    align-items: start;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-field,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row > .ff-filter-field {
    align-self: flex-start;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row label [json-dbl],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row label [json-dbl],
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    display: inline-block;
    float: right;
    line-height: 16px;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match.btn-default-focus,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match.btn-default-focus,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match.btn-default-focus,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-widget,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-widget,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-widget {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row textarea.form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row textarea.form-control,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid textarea.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text span,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor-input,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor-input,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-input,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-dropdowneditor-input-wrapper,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-dropdowneditor-input-wrapper,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-dropdowneditor-input-wrapper,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-texteditor-buttons-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-texteditor-buttons-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-texteditor-buttons-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-dropdowneditor-button,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-dropdowneditor-button,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-dropdowneditor-button {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app span.input-icon > input.form-control,
body.ff-app span.input-help > input.form-control {
    padding-left: 28px !important;
    padding-right: 8px !important;
}

body.ff-app .input-icon.input-icon-right > input.form-control {
    padding-left: 8px !important;
    padding-right: 28px !important;
}

body.ff-app .ff-date-icon > input.form-control {
    padding-left: 36px !important;
    padding-right: 10px !important;
}

/* Surcharges form alignment */
body.ff-app .ff-surcharges .container-fullw {
    padding-top: 8px !important;
}

body.ff-app .ff-surcharges fieldset {
    max-width: 1220px;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
}

body.ff-app .ff-surcharges .ff-surcharges-form {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body.ff-app .ff-surcharges .ff-surcharges-row,
body.ff-app .ff-surcharges .ff-surcharges-grid {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

body.ff-app .ff-surcharges .ff-surcharges-select-row,
body.ff-app .ff-surcharges .ff-surcharges-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 10px;
    row-gap: 4px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-select,
body.ff-app .ff-surcharges .ff-surcharges-field-name {
    flex: 0 1 430px;
    max-width: 430px;
    min-width: 260px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-code {
    flex: 0 0 78px;
    max-width: 78px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-short-name {
    flex: 0 1 160px;
    max-width: 170px;
    min-width: 130px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-first-kgs,
body.ff-app .ff-surcharges .ff-surcharges-field-charge,
body.ff-app .ff-surcharges .ff-surcharges-field-percent {
    flex: 0 1 122px;
    max-width: 138px;
    min-width: 104px;
}

body.ff-app .ff-surcharges .ff-surcharges-field-priority {
    flex: 0 0 44px;
    max-width: 44px;
    min-width: 44px;
}

body.ff-app .ff-surcharges .ff-surcharges-row > [class*="col-"],
body.ff-app .ff-surcharges .ff-surcharges-grid > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-surcharges .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-surcharges .form-group > label {
    display: flex;
    align-items: flex-end;
    min-height: 16px;
    margin-bottom: 2px;
    line-height: 1.1;
    white-space: nowrap;
}

body.ff-app .ff-surcharges .form-control,
body.ff-app .ff-surcharges .input-group,
body.ff-app .ff-surcharges .ff-ui {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.ff-app .ff-surcharges .input-group .form-control {
    min-width: 0;
}

body.ff-app .ff-surcharges .input-group-addon {
    width: 34px;
    padding-left: 8px;
    padding-right: 8px;
}

body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap > .ui-select-match > .btn {
    height: auto !important;
    min-height: var(--ff-control-h) !important;
    align-items: center !important;
    line-height: 1.35 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-surcharges .ff-ui.ui-select-bootstrap .ui-select-match-text span {
    line-height: 1.35 !important;
    overflow: visible !important;
}

body.ff-app .ff-surcharges .ff-surcharges-check-field {
    min-height: calc(18px + var(--ff-control-h));
    display: flex;
    align-items: center;
    padding-top: 18px;
}

body.ff-app .ff-surcharges .ff-surcharges-dormant-field {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 86px;
}

body.ff-app .ff-surcharges .ff-surcharges-check-field .checkbox {
    margin: 0;
}

body.ff-app .ff-surcharges .ff-surcharges-check-field .clip-check label {
    line-height: 22px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .bootstrap-touchspin.input-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .form-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .form-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .input-group.bootstrap-touchspin .input-group-addon {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    vertical-align: top !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-surcharges .ff-surcharges-check-field {
    min-height: calc(13px + var(--ff-control-h)) !important;
    padding-top: 13px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-surcharges .ff-surcharges-check-field {
        min-height: auto;
        padding-top: 0;
    }
}

/* Escalations form alignment */
body.ff-app .ff-escalation fieldset {
    padding-bottom: 8px !important;
}

body.ff-app .ff-escalation .container-fullw {
    padding-top: 8px !important;
}

body.ff-app .ff-escalation .ff-escalation-form-fieldset {
    margin-bottom: 2px !important;
    padding-top: 8px !important;
}

body.ff-app .ff-escalation .ff-escalation-grid {
    display: grid;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    max-width: 100%;
}

body.ff-app .ff-escalation .ff-escalation-category-row {
    margin-bottom: 4px !important;
}

body.ff-app .ff-escalation .ff-escalation-category-options {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 26px;
    padding-left: 12px;
}

body.ff-app .ff-escalation .ff-escalation-category-options .radio {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    min-height: 24px;
}

body.ff-app .ff-escalation .ff-escalation-category-options .clip-radio label {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    min-height: 24px;
    line-height: 22px;
    padding-left: 30px !important;
}

body.ff-app .ff-escalation .ff-escalation-category-options .clip-radio label:before,
body.ff-app .ff-escalation .ff-escalation-category-options .clip-radio label:after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

body.ff-app .ff-escalation .ff-escalation-grid-main {
    grid-template-columns:
        minmax(180px, 220px)
        minmax(180px, 240px)
        minmax(180px, 240px)
        minmax(420px, 2fr)
        minmax(150px, 180px)
        minmax(180px, 240px)
        minmax(180px, 240px);
}

body.ff-app .ff-escalation .ff-escalation-grid-options {
    grid-template-columns: minmax(145px, 165px) minmax(95px, 115px) auto auto auto;
    column-gap: 14px;
    justify-content: start;
    margin-top: 6px;
    align-items: start;
}

body.ff-app .ff-escalation .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-escalation .ff-escalation-field,
body.ff-app .ff-escalation .ff-escalation-field > .form-group,
body.ff-app .ff-escalation .multiselect-group,
body.ff-app .ff-escalation .ff-ms,
body.ff-app .ff-escalation .multiselect-parent,
body.ff-app .ff-escalation .multiselect-parent > div {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.ff-app .ff-escalation .ff-escalation-field-rates,
body.ff-app .ff-escalation .ff-escalation-field-value,
body.ff-app .ff-escalation .ff-escalation-field-rates > .form-group,
body.ff-app .ff-escalation .ff-escalation-field-value > .form-group {
    align-self: start;
    margin-top: 0 !important;
}

body.ff-app .ff-escalation .form-group > label,
body.ff-app .ff-escalation .ff-escalation-field > .form-group > label,
body.ff-app .ff-escalation .ff-escalation-field-acc label {
    display: block;
    line-height: 18px;
    min-height: 16px;
    margin-bottom: 3px;
    white-space: nowrap;
}

body.ff-app .ff-escalation .form-group > label:has(.symbol.required),
body.ff-app .ff-escalation .ff-escalation-field > .form-group > label:has(.symbol.required) {
    display: flex;
    align-items: center;
    gap: 2px;
}

body.ff-app .ff-escalation .symbol.required,
body.ff-app .ff-escalation .symbol.required:before {
    display: inline-block !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-escalation .form-group > label .symbol.required:before,
body.ff-app .ff-escalation .ff-escalation-field > .form-group > label .symbol.required:before {
    font-size: 12px;
}

body.ff-app .ff-escalation .form-control,
body.ff-app .ff-escalation .input-group,
body.ff-app .ff-escalation .multiselect-group .dropdown-toggle,
body.ff-app .ff-escalation .ff-ms .dropdown-toggle {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.ff-app .ff-escalation select.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    line-height: 1.35 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body.ff-app .ff-escalation textarea.form-control {
    height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    resize: vertical;
}

body.ff-app .ff-escalation .input-group-btn > .btn {
    height: var(--ff-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-toggle,
body.ff-app .ff-escalation .ff-ms .dropdown-toggle {
    min-height: var(--ff-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-toggle .caret,
body.ff-app .ff-escalation .ff-ms .dropdown-toggle .caret {
    flex: 0 0 auto;
    margin-left: 8px;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-menu,
body.ff-app .ff-escalation .ff-ms .dropdown-menu {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

body.ff-app .ff-escalation .multiselect-group .dropdown-menu label,
body.ff-app .ff-escalation .ff-ms .dropdown-menu label {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.ff-app .ff-escalation .ff-escalation-check-field {
    min-height: 0;
    display: flex;
    align-items: center;
    padding-top: 19px;
}

body.ff-app .ff-escalation .ff-escalation-check-field .checkbox {
    align-items: center;
    display: inline-flex;
    margin: 0 !important;
    min-height: var(--ff-control-h);
}

body.ff-app .ff-escalation .ff-escalation-check-field .clip-check label {
    display: inline-flex;
    align-items: center;
    min-height: var(--ff-control-h);
    line-height: var(--ff-control-h);
    margin-bottom: 0;
    white-space: nowrap;
}

body.ff-app .ff-escalation .ff-escalation-action-row {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
}

@media (max-width: 1700px) {
    body.ff-app .ff-escalation .ff-escalation-grid-main {
        grid-template-columns:
            minmax(180px, 220px)
            minmax(180px, 240px)
            minmax(180px, 240px)
            minmax(360px, 2fr);
    }

    body.ff-app .ff-escalation .ff-escalation-grid-options {
        grid-template-columns: minmax(145px, 165px) minmax(95px, 115px) repeat(3, auto);
        column-gap: 14px;
        justify-content: start;
    }
}

@media (max-width: 1280px) {
    body.ff-app .ff-escalation .ff-escalation-grid-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.ff-app .ff-escalation .ff-escalation-field-party {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    body.ff-app .ff-escalation .ff-escalation-grid-main,
    body.ff-app .ff-escalation .ff-escalation-grid-options {
        grid-template-columns: 1fr;
    }

    body.ff-app .ff-escalation .ff-escalation-field-party {
        grid-column: auto;
    }

    body.ff-app .ff-escalation .ff-escalation-check-field {
        min-height: auto;
        align-items: center;
        padding-top: 0;
    }
}

/* Make the full left-navigation row clickable, not only the text/icon content. */
body.ff-app #sidebar nav > ul.main-navigation-menu > li > a {
    display: block !important;
    width: 100% !important;
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-content {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-inner {
    flex: 1 1 auto;
    width: auto !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

body.ff-app #sidebar nav ul.sub-menu > li > a,
body.ff-app .app-aside > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 36px;
    box-sizing: border-box;
    cursor: pointer;
}

body.ff-app #sidebar nav ul.sub-menu > li > a .title,
body.ff-app .app-aside > ul.sub-menu > li > a .title {
    display: block;
    width: 100%;
}

/* Consolidation filters: one responsive field flow plus a standard bottom action row. */
body.ff-app .ff-consolidation .ff-cons-filter-grid {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 6px;
}

body.ff-app .ff-consolidation .ff-cons-filter-grid::before,
body.ff-app .ff-consolidation .ff-cons-filter-grid::after,
body.ff-app .ff-consolidation .ff-cons-filter-actions-row::before,
body.ff-app .ff-consolidation .ff-cons-filter-actions-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-consolidation .ff-cons-filter-grid > [class*="col-"],
body.ff-app .ff-consolidation .ff-cons-filter-actions-row > [class*="col-"] {
    float: none;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-consolidation .ff-cons-field .form-group {
    margin-bottom: 0;
}

body.ff-app .ff-consolidation .ff-cons-field .ff-control,
body.ff-app .ff-consolidation .ff-cons-field .form-control,
body.ff-app .ff-consolidation .ff-cons-field textarea.autoExpand {
    max-width: 100%;
    width: 100%;
}

body.ff-app .ff-consolidation .ff-cons-date-period {
    flex: 0 0 164px;
    max-width: 164px;
    min-width: 150px;
}

body.ff-app .ff-consolidation .ff-cons-date-period .ff-date-period-group {
    max-width: 164px;
    width: 164px;
}

body.ff-app .ff-consolidation .ff-date-period-select {
    -webkit-appearance: menulist !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    padding-right: 24px !important;
}

body.ff-app .ff-consolidation .ff-cons-date-range {
    flex: 0 0 248px;
    max-width: 248px;
    min-width: 248px;
}

body.ff-app .ff-consolidation .ff-cons-date-range .range-picker {
    display: flex;
    max-width: 248px;
    min-width: 0;
    width: 100%;
}

body.ff-app .ff-consolidation .ff-cons-date-range .range-picker .start-date,
body.ff-app .ff-consolidation .ff-cons-date-range .range-picker .end-date {
    flex: 0 1 112px;
    max-width: 112px;
    min-width: 0;
}

body.ff-app .ff-consolidation .ff-cons-query,
body.ff-app .ff-consolidation .ff-cons-service {
    flex: 0 1 190px;
    max-width: 230px;
    min-width: 160px;
}

body.ff-app .ff-consolidation .ff-cons-client {
    flex: 1 1 310px;
    max-width: 470px;
    min-width: 260px;
}

body.ff-app .ff-consolidation .ff-cons-origin,
body.ff-app .ff-consolidation .ff-cons-destination {
    flex: 1 1 220px;
    max-width: 300px;
    min-width: 190px;
}

body.ff-app .ff-consolidation .ff-cons-small-list {
    flex: 0 0 118px;
    max-width: 128px;
    min-width: 105px;
}

body.ff-app .ff-consolidation .ff-cons-small-list textarea.autoExpand {
    height: var(--ff-control-h);
    max-height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    resize: vertical;
}

body.ff-app .ff-consolidation .ff-cons-filter-actions-row {
    margin: 0;
}

body.ff-app .ff-consolidation .ff-cons-actions-field {
    flex: 1 1 100%;
}

body.ff-app .ff-consolidation .ff-cons-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: flex-end;
    min-height: var(--ff-control-h);
    width: 100%;
}

body.ff-app .ff-consolidation .ff-cons-actions .btn,
body.ff-app .ff-consolidation .ff-cons-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .btn-wide {
    min-width: 0;
    width: auto;
}

body.ff-app .ff-consolidation .ff-cons-actions .ff-cons-preview {
    margin-right: auto !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .ff-cons-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .ff-cons-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-consolidation .ff-cons-actions .checkbox label {
    line-height: var(--ff-control-h);
    margin-bottom: 0;
    min-height: var(--ff-control-h);
    padding-top: 0;
    white-space: nowrap;
}

body.ff-app .ff-consolidation .ff-cons-search-btn {
    order: 20;
}

body.ff-app .ff-consolidation .ff-cons-consolidate-btn {
    margin-left: 0;
}

body.ff-app .ff-consolidation .ff-cons-grid-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 8px;
}

body.ff-app .ff-consolidation .ff-cons-grid-counts,
body.ff-app .ff-consolidation .ff-cons-grid-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

body.ff-app .ff-consolidation .ff-cons-grid-options {
    justify-content: flex-end;
    margin-left: auto;
}

body.ff-app .ff-consolidation .ff-cons-grid-options .checkbox-inline {
    margin-left: 0;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period {
    flex-basis: 142px;
    max-width: 142px;
    min-width: 142px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period .ff-date-period-group {
    max-width: 142px;
    width: 142px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range {
    flex-basis: 232px;
    max-width: 232px;
    min-width: 232px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker {
    max-width: 232px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker .end-date {
    flex-basis: 104px;
    max-width: 104px;
}

@media (max-width: 560px) {
    body.ff-app .ff-consolidation .ff-cons-date-period,
    body.ff-app .ff-consolidation .ff-cons-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    body.ff-app .ff-consolidation .ff-cons-date-period .ff-date-period-group,
    body.ff-app .ff-consolidation .ff-cons-date-range .range-picker,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-period .ff-date-period-group,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-consolidation .ff-cons-date-range .range-picker {
        max-width: none;
        width: 100%;
    }
}

/* Compact density should shrink the full page chrome, not only the grid. */
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) {
    --ff-control-h: 24px;
    font-size: var(--ff-page-font-size, 11px) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) fieldset {
    padding: 4px 8px 6px !important;
    margin-bottom: 5px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) fieldset > legend {
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    padding: 2px 6px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .row,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .panel-body,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .panel-body .form-group {
    margin-bottom: 2px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group {
    margin-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .control-label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row label,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid label {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 12px !important;
    margin-bottom: 1px !important;
    min-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) input.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) select.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-control {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid textarea.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) fieldset:has(input[ng-model="filtermodel.KeepFilterOpen"]) textarea.form-control {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match.ng-scope,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match.btn-default-focus {
    box-sizing: border-box;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container .btn.form-control.ui-select-toggle,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container .btn.form-control,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-search,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-container .ui-select-search {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text span,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-placeholder {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row .dx-texteditor,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid .dx-texteditor {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > .dx-texteditor .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid .dx-texteditor-container,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-panel .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > .dx-texteditor .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-flow-row .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-filter-inline-row .dx-texteditor-input,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .ff-waybill-filter-grid .dx-texteditor-input {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .btn {
    font-size: var(--ff-control-font-size, 11px) !important;
    min-height: var(--ff-control-h);
    padding-top: 2px;
    padding-bottom: 2px;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .checkbox,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .radio,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .checkbox-inline,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .radio-inline {
    font-size: var(--ff-control-font-size, 11px) !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    min-height: 18px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .checkbox label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .checkbox-inline label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .radio label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .radio-inline label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .clip-check label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .clip-radio label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .valuesonly,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page:not(.ff-login) .input-group-addon label {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 16px !important;
    min-height: 16px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 .form-group,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .form-group,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 label,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 label,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs label {
    align-items: center;
    display: flex;
    line-height: 16px;
    margin-bottom: 2px;
    min-height: 18px;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-basic-docs label {
    line-height: 12px !important;
    margin-bottom: 1px !important;
    min-height: 12px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-1 input.form-control,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .ui-select-match,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .ui-select-toggle,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .col-md-3 .btn.form-control,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs input.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

/* Generate Manifest must retain DX's inline native-scrollbar gutter. */
body.ff-app .ff-page:not(.ff-generate-manifest) .dx-datagrid-total-footer {
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-total-footer .dx-row > td {
    height: 22px !important;
    min-height: 22px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app .ff-page .dx-datagrid-rowsview .dx-freespace-row,
body.ff-app .ff-page .dx-datagrid-rowsview .dx-freespace-row > td {
    border-top: 0 !important;
    border-bottom: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-pager {
    margin-top: 0 !important;
    min-height: 26px !important;
    padding: 0 4px !important;
}

body.ff-app .ff-page .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid-pager .dx-pages {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-pager .dx-info {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-pager .dx-page,
body.ff-app .ff-page .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid-pager .dx-navigate-button {
    line-height: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 22px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-linked-menu-action,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-courier-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > div:not([class]) > .ff-linked-menu-action {
    margin-left: -8px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action {
    align-self: flex-start;
    flex: 0 0 78px;
    max-width: 78px;
    padding-top: 18px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-clone-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action .btn {
    margin-top: 0 !important;
    min-width: 58px;
    width: 58px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column {
    align-self: flex-start;
    display: flex;
    flex: 0 0 32px;
    justify-content: center;
    max-width: 32px;
    padding-top: 8px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    width: 28px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column {
    padding-top: 5px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    height: 22px !important;
    min-height: 22px !important;
    width: 24px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card .form-group:has(> .ff-geocode-inline) {
    position: relative;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card .form-group:has(> .ff-geocode-inline) > label {
    align-items: center;
    display: flex;
    gap: 6px;
    padding-right: 34px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card .ff-geocode-inline {
    float: none !important;
    margin: 0 !important;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-card .ff-geocode-inline {
    height: 22px !important;
    min-height: 22px !important;
    width: 24px !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row::after,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row::before,
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row > [class*="col-"],
body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-meta-row > .col-md-3 {
    flex: 1 1 300px;
    max-width: none;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > .ff-linked-menu-field {
    flex: 0 1 115px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > .ff-linked-menu-action {
    flex: 0 0 34px;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-invoice-row > .padding-left-0 {
    flex: 1 1 128px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-pod-action {
    padding-top: 13px;
}

body.ff-app .ff-waybill .ff-pod-action {
    padding-top: 18px;
}

body.ff-app .ff-waybill .ff-pod-action .btn,
body.ff-app .ff-waybill .ff-pod-action > .btn {
    margin-top: 0 !important;
    white-space: nowrap;
    width: 100%;
}

body.ff-app .ff-page .dx-datagrid-total-footer,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-datagrid-table {
    height: auto !important;
    min-height: 0 !important;
}

body.ff-app .ff-page .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app .ff-page .dx-datagrid-total-footer .dx-total-footer > td {
    height: 18px !important;
    line-height: 16px !important;
    min-height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager {
    border-top: 0 !important;
    min-height: 24px !important;
    padding-top: 0 !important;
}

/* Full capture final spacing refinements */
body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column {
    flex-basis: 26px;
    max-width: 26px;
    padding-top: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    width: 24px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column {
    flex-basis: 22px;
    max-width: 22px;
    padding-top: 4px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-sr-switch-column .ff-sr-switch {
    width: 22px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row {
    column-gap: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex-basis: 244px;
    min-width: 238px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-person {
    flex-basis: 180px;
    min-width: 160px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-additional-details .ff-linked-menu-action {
    padding-top: 14px !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap {
    flex-basis: calc(9.5rem + 34px + 9rem);
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-linked-row {
    flex-wrap: nowrap;
    gap: 0;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-id-field {
    flex: 0 0 9.5rem;
    max-width: 9.5rem;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-id-action {
    flex: 0 0 34px;
    max-width: 34px;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-additional-details .ff-additional-manifest-wrap .ff-additional-date-field {
    flex: 0 0 9rem;
    margin-left: 0;
    max-width: 9rem;
}

/* Keep compact filter controls top-aligned on View Waybills. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .form-group {
    align-self: flex-start;
    margin-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group {
    align-items: stretch;
    display: flex;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    align-items: center;
    display: inline-flex;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    margin-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon label {
    line-height: 1 !important;
    margin: 0 0 0 4px !important;
    min-height: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .form-control {
    flex: 1 1 auto;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .dx-widget,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .dx-widget,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .dx-widget {
    display: block;
    margin-top: 0 !important;
    vertical-align: top;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Shared compact grid footer/pager rules for view/query grids. */
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-wrapper,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-container,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-table {
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer > td {
    height: 18px !important;
    line-height: 16px !important;
    min-height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer > td {
    height: 16px !important;
    line-height: 15px !important;
    min-height: 16px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-freespace-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-freespace-row > td {
    border: 0 !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row > td {
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-page .dx-datagrid .dx-pager {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 22px !important;
    padding: 0 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-pager {
    min-height: 20px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-pages {
    align-items: center;
    display: inline-flex;
    height: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-page .dx-datagrid .dx-pager .dx-pages {
    height: 20px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-info,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-info {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-navigate-button {
    line-height: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 22px !important;
    padding: 0 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-compact #gridContainer .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-view-compact .ff-grid-result-row .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-view-waybills #gridContainer .dx-datagrid-pager {
    min-height: 20px !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-view-compact #gridContainer .dx-datagrid-pager .dx-pages,
body.ff-app[data-grid-density="compact"] .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-pages,
body.ff-app[data-grid-density="compact"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app[data-grid-density="compact"] .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages {
    height: 20px !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-info,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-info,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-info {
    margin: 0 4px !important;
    padding: 0 !important;
}

body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact #gridContainer .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-compact .ff-grid-result-row .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button {
    line-height: 18px !important;
    margin: 0 1px !important;
    min-height: 20px !important;
    padding: 0 5px !important;
}

/* Shared compact result lead-in/footer for view pages. */
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fullw,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fluid.container-fullw {
    padding: 4px 10px 8px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fullw > .row,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) > .container-fluid.container-fullw > .row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion.panel-group,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .panel-group {
    margin: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel-default {
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel-heading {
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .accordion-no-display .panel-body {
    padding: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-menu,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-tiles {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-button > a {
    padding: 4px 6px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .ff-dash-button .panel-body {
    padding: 6px 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .progress {
    height: 8px !important;
    margin: 0 0 2px !important;
    min-height: 8px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .progress .progress-bar,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) .progress .label {
    font-size: 10px !important;
    line-height: 8px !important;
    min-height: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar-inner,
body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar-inner,
body.ff-app .ff-page .ff-grid-toolbar-row > .ff-grid-toolbar {
    min-height: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .label,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 16px !important;
    margin: 0 !important;
    min-height: 20px !important;
    padding: 2px 6px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .btn,
body.ff-app .ff-page .ff-grid-toolbar-row .ff-btn,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .btn {
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 24px !important;
    padding: 2px 8px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .checkbox,
body.ff-app .ff-page .ff-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-page .ff-grid-toolbar-row .valuesonly,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .checkbox,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .clip-check label,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .clip-check label {
    line-height: 20px !important;
    min-height: 20px !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row .pull-right,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row .pull-right {
    float: none !important;
    margin-left: auto !important;
}

body.ff-app .ff-page .ff-grid-status-filters {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 2px 4px !important;
    margin-left: auto !important;
}

body.ff-app .ff-page .ff-grid-status-filters .label {
    margin: 0 !important;
}

body.ff-app .ff-page .ff-grid-toolbar-row + .ff-grid-result-row,
body.ff-app .ff-page .ff-view-waybills-grid-toolbar-row + .ff-grid-result-row {
    margin-top: 0 !important;
}

body.ff-app .ff-page .ff-grid-result-row > [class*="col-"],
body.ff-app .ff-page .ff-view-waybills-grid-row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel {
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-button,
body.ff-app .ff-page:is(.ff-view-compact, .ff-view-waybills, .ff-tariffs, .ff-payment, .ff-stock-history, .ff-stock-master) #gridContainer .dx-datagrid-header-panel .dx-button-content {
    min-height: 22px !important;
}

/* Shared compact pass for filter cards and alternate DevExtreme grid hosts. */
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) {
    margin-bottom: 3px !important;
    padding: 2px 10px 5px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > legend,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > legend.ff-sr-legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > .row {
    margin-bottom: 3px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .form-group,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .dx-field {
    margin-bottom: 1px !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) textarea.form-control,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) textarea.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .padding-top-25,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .margin-top-30,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .padding-top-20 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .padding-bottom-15,
body.ff-app .ff-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) .margin-bottom-10 {
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
}

body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel,
body.ff-app .ff-page .ff-grid-result-row :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel {
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-datagrid-pager,
body.ff-app .ff-page :is(#clientGridContainer, #waybillGridContainer, #gridContainer2, #gridContainer3) .dx-pager {
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 2px !important;
}

body.ff-app .ff-page:not(.ff-generate-manifest) .dx-datagrid .dx-datagrid-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-wrapper,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-container,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-scrollable-content,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-table {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-footer-row > td,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-total-footer .dx-total-footer > td {
    height: 16px !important;
    line-height: 15px !important;
    min-height: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-page .dx-datagrid .dx-pager {
    margin: 0 !important;
    min-height: 20px !important;
    padding: 0 2px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-pages {
    height: 20px !important;
    min-height: 20px !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-info,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-info {
    line-height: 18px !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-page-size,
body.ff-app .ff-page .dx-datagrid .dx-pager .dx-navigate-button {
    line-height: 16px !important;
    margin: 0 1px !important;
    min-height: 18px !important;
    padding: 0 4px !important;
}

/* Query page compact filters: make ad hoc query filters match the dense view pages. */
body.ff-app .ff-query .ff-query-select-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
    overflow: visible !important;
    position: relative;
    z-index: 30;
}

body.ff-app .ff-query .ff-query-select-row::before,
body.ff-app .ff-query .ff-query-select-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-query .ff-query-select-row > [class*="col-"] {
    float: none;
    min-width: 0;
    overflow: visible !important;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    width: auto;
}

body.ff-app .ff-query .ff-query-select-row > .col-md-2 {
    flex: 0 1 165px;
}

body.ff-app .ff-query .ff-query-select-row > .col-md-3 {
    flex: 0 1 205px;
}

body.ff-app .ff-query .ff-query-select-row > .col-md-4 {
    flex: 1 1 340px;
    max-width: 620px;
}

body.ff-app .ff-query .ff-query-select-row > .ff-query-query-col {
    flex: 0 1 310px !important;
    max-width: 340px;
}

body.ff-app .ff-query .ff-query-select-row > .ff-query-recent-col {
    flex: 1 1 630px !important;
    max-width: none;
}

body.ff-app .ff-query .ff-query-select-row .form-group {
    margin-bottom: 0 !important;
    overflow: visible !important;
    position: relative;
}

body.ff-app .ff-query .ff-query-select-row .ff-query-recent-form-group {
    min-width: 0;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap.open,
body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap.open .ui-select-choices,
body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap.open .ui-select-no-choice,
body.ff-app .ff-ui.ui-select-bootstrap.open .ui-select-choices,
body.ff-app .ff-ui.ui-select-bootstrap.open .ui-select-no-choice {
    z-index: 3000 !important;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap .ui-select-no-choice,
body.ff-app .ff-ui.ui-select-bootstrap.open .ui-select-no-choice {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #d4dbe6) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important;
    color: var(--text, #111827) !important;
    line-height: 18px !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
}

body.ff-app .ff-query .ff-query-select-row label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .form-group > label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .dx-field > label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row > [class*="col-"] > label,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ff-filter-field > label {
    display: block;
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    white-space: nowrap;
}

body.ff-app .ff-query .ff-query-select-row .form-control,
body.ff-app .ff-query .ff-query-select-row .ff-control,
body.ff-app .ff-query .ff-query-select-row .ui-select-container,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .form-control,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ff-control,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-container,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ff-dx,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .dx-texteditor {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100%;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap,
body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-bootstrap,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-bootstrap > .ui-select-match {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-query .ff-query-select-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    display: flex;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-query .ff-query-recent-row {
    margin: 2px 0 4px !important;
}

body.ff-app .ff-query .ff-query-recent-inner {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px 6px;
    height: var(--ff-control-h);
    max-height: var(--ff-control-h);
    min-height: var(--ff-control-h);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 !important;
    width: 100%;
}

body.ff-app .ff-query .ff-query-recent-title {
    color: var(--text-muted, #5f6b7a);
    font-weight: 700;
    line-height: 20px;
    margin-right: 2px;
    white-space: nowrap;
}

body.ff-app .ff-query .ff-query-recent-item {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d4dbe6);
    border-radius: 4px;
    color: var(--text, #111827);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 3px;
    height: 22px;
    line-height: 20px;
    max-width: 320px;
    min-height: 22px;
    overflow: hidden;
    padding: 0 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-query .ff-query-recent-item:hover,
body.ff-app .ff-query .ff-query-recent-item:focus {
    background: var(--ff-primary-soft, #e9f1ff);
    border-color: var(--ff-primary, #337ef5);
    color: var(--ff-primary, #337ef5);
}

body.ff-app .ff-query .ff-query-recent-group,
body.ff-app .ff-query .ff-query-recent-query {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

body.ff-app .ff-query .ff-query-recent-group {
    max-width: 88px;
}

body.ff-app .ff-query .ff-query-recent-query {
    max-width: 190px;
}

body.ff-app .ff-query .ff-query-recent-separator {
    color: var(--text-muted, #5f6b7a);
    flex: 0 0 auto;
}

body.ff-app .ff-query .ff-query-filter-row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
}

body.ff-app .ff-query .ff-query-filter-row > .accordion-no-display {
    width: 100%;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card {
    margin-bottom: 2px !important;
    padding: 0 10px 4px !important;
}

body.ff-app .ff-query .accordion-no-display fieldset > legend.ff-sr-legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-legend__text {
    padding: 3px 8px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row),
body.ff-app .ff-query .ff-finance-primary-filters,
body.ff-app .ff-query .ff-finance-date-block > .row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row)::before,
body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row)::after,
body.ff-app .ff-query .ff-finance-primary-filters::before,
body.ff-app .ff-query .ff-finance-primary-filters::after,
body.ff-app .ff-query .ff-finance-date-block > .row::before,
body.ff-app .ff-query .ff-finance-date-block > .row::after {
    content: none;
    display: none;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > [class*="col-"],
body.ff-app .ff-query .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-query .ff-finance-date-block > .row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-2,
body.ff-app .ff-query .ff-finance-primary-filters > .col-md-2 {
    flex: 0 1 145px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-3 {
    flex: 0 1 190px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-4,
body.ff-app .ff-query .ff-finance-primary-filters > .col-md-4 {
    flex: 1 1 260px;
}

body.ff-app .ff-query .ff-finance-client-filter,
body.ff-app .ff-query .ff-filter-client,
body.ff-app .ff-query .ff-query-generic-client-filter {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 130px !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-6 {
    flex: 1 1 400px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card > .row:not(.ff-waybill-filter-grid):not(.ff-filter-flow-row):not(.ff-filter-inline-row):not(.ff-filter-actions-row):not(.ff-finance-primary-filters):not(.ff-finance-filter-actions-row):not(.ff-finance-crdr-actions-row) > .col-md-12 {
    flex: 1 1 100%;
}

body.ff-app .ff-query .ff-finance-date-block {
    flex: 1 1 455px !important;
    max-width: 100%;
}

body.ff-app .ff-query .ff-finance-date-period {
    flex: 0 1 210px;
}

body.ff-app .ff-query .ff-finance-date-range {
    flex: 1 1 236px;
}

body.ff-app .ff-query .ff-finance-date-range .range-picker,
body.ff-app .ff-query .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-query .ff-finance-date-range .range-picker .end-date {
    max-width: 100%;
}

body.ff-app .ff-query .accordion-no-display .ff-waybill-filter-grid {
    column-gap: 8px;
    grid-template-columns:
        minmax(140px, 0.75fr)
        minmax(135px, 0.72fr)
        minmax(165px, 0.85fr)
        minmax(236px, 1.05fr)
        minmax(160px, 0.9fr);
    margin-bottom: 3px;
    row-gap: 4px;
}

body.ff-app .ff-query .accordion-no-display .ff-filter-flow-row,
body.ff-app .ff-query .accordion-no-display .ff-filter-inline-row {
    gap: 4px 8px;
    margin-bottom: 3px;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card .form-group,
body.ff-app .ff-query .accordion-no-display .ff-sr-card .dx-field {
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .accordion-no-display .ff-sr-card textarea.form-control,
body.ff-app .ff-query .accordion-no-display .ff-sr-card textarea.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto;
    resize: none;
    white-space: pre-wrap;
}

body.ff-app .ff-query .ff-filter-actions-row,
body.ff-app .ff-query .ff-finance-filter-actions-row,
body.ff-app .ff-query .ff-finance-crdr-actions-row,
body.ff-app .ff-query .ff-image-actions-row,
body.ff-app .ff-query .ff-query-generic-actions-row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions,
body.ff-app .ff-query .ff-finance-filter-actions,
body.ff-app .ff-query .ff-finance-crdr-actions,
body.ff-app .ff-query .ff-image-filter-actions,
body.ff-app .ff-query .ff-query-generic-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    justify-content: flex-start;
    margin-bottom: 0 !important;
    min-height: var(--ff-control-h);
    padding-top: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .btn,
body.ff-app .ff-query .ff-filter-actions .checkbox,
body.ff-app .ff-query .ff-filter-actions .valuesonly,
body.ff-app .ff-query .ff-finance-filter-actions .btn,
body.ff-app .ff-query .ff-finance-filter-actions .checkbox,
body.ff-app .ff-query .ff-finance-filter-actions .valuesonly,
body.ff-app .ff-query .ff-finance-crdr-actions .btn,
body.ff-app .ff-query .ff-finance-crdr-actions .checkbox,
body.ff-app .ff-query .ff-finance-crdr-actions .valuesonly,
body.ff-app .ff-query .ff-image-filter-actions .btn,
body.ff-app .ff-query .ff-image-filter-actions .checkbox,
body.ff-app .ff-query .ff-query-generic-actions .btn,
body.ff-app .ff-query .ff-query-generic-actions .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-keep-open,
body.ff-app .ff-query .ff-finance-filter-actions .ff-finance-keep-filter,
body.ff-app .ff-query .ff-finance-crdr-actions .ff-finance-keep-filter,
body.ff-app .ff-query .ff-image-filter-actions .ff-image-keep-filter,
body.ff-app .ff-query .ff-query-generic-actions .ff-query-generic-keep-filter {
    margin-left: auto !important;
    order: 90;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-close,
body.ff-app .ff-query .ff-finance-filter-actions .ff-filter-close,
body.ff-app .ff-query .ff-finance-crdr-actions .ff-filter-close,
body.ff-app .ff-query .ff-image-filter-actions .ff-filter-close,
body.ff-app .ff-query .ff-query-generic-actions .ff-filter-close {
    align-items: center;
    display: inline-flex;
    flex: 0 0 var(--ff-control-h);
    justify-content: center;
    min-width: var(--ff-control-h);
    order: 95;
    padding-left: 0;
    padding-right: 0;
    width: var(--ff-control-h);
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-search,
body.ff-app .ff-query .ff-finance-filter-actions .ff-finance-search,
body.ff-app .ff-query .ff-finance-crdr-actions .ff-finance-search,
body.ff-app .ff-query .ff-image-filter-actions .ff-image-search,
body.ff-app .ff-query .ff-query-generic-actions .ff-query-generic-search {
    order: 100;
}

body.ff-app .ff-query .ff-grid-toolbar-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-grid-toolbar-row > .ff-grid-toolbar-inner {
    gap: 1px 6px !important;
    min-height: 22px !important;
}

body.ff-app .ff-query .ff-grid-toolbar-row .padding-top-5 {
    padding-top: 0 !important;
}

body.ff-app .ff-query .ff-grid-result-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-grid-result-row > .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-query #gridContainer .dx-datagrid-header-panel,
body.ff-app .ff-query .ff-grid-result-row .dx-datagrid-header-panel {
    height: 0 !important;
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 0 !important;
    overflow: visible;
}

body.ff-app .ff-query #gridContainer .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-query #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container,
body.ff-app .ff-query .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-query .ff-grid-result-row .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Generate Invoice / Supplier Invoice: keep the invoice date and client/waybill grids tight. */
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row::before,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row > [class*="col-"] {
    float: none;
    max-width: 145px;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row label {
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    white-space: nowrap;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row .input-icon,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-date-row input.form-control {
    display: block;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 120px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0 0 2px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row::before,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row > .col-md-6:first-child {
    flex: 1 1 auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row > .col-md-6:last-child {
    flex: 0 0 auto;
    margin-left: auto;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row h4 {
    font-size: 13px;
    line-height: 20px;
    margin: 0 !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-selected-row .btn {
    min-height: 24px !important;
    padding: 2px 8px !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-client-grid,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-waybill-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-client-grid > .col-md-12,
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-supplier-invoice) .ff-invoice-generate-waybill-grid > .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Generate Invoice: remove the dead space around Invoice Date and give the grid room for rows. */
body.ff-app .ff-generate-invoice .ff-page-header {
    margin-bottom: 2px !important;
}

body.ff-app .ff-generate-invoice > .container-fullw,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw {
    padding-top: 0 !important;
}

body.ff-app .ff-generate-invoice > .container-fullw > .row,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw > .row {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice .accordion-no-display,
body.ff-app .ff-generate-invoice .accordion.panel-group,
body.ff-app .ff-generate-invoice .panel-group,
body.ff-app .ff-generate-invoice .accordion-no-display .panel,
body.ff-app .ff-generate-invoice .accordion-no-display .panel-default {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row {
    gap: 0 8px !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row > [class*="col-"] {
    max-width: 126px !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row .form-group {
    margin: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row label {
    line-height: 14px !important;
    margin: 0 !important;
    min-height: 14px !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) {
    height: clamp(320px, calc(100vh - 165px), 720px) !important;
    min-height: 320px !important;
    overflow: hidden !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) .dx-datagrid-rowsview {
    min-height: calc(var(--ff-grid-row-height) * 8) !important;
}

/* Capture page compact field alignment and narrow date/time controls. */
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field {
    margin-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap .ui-select-match,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field-value,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-widget {
    display: block;
    float: none !important;
    margin-top: 0 !important;
    vertical-align: top;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center;
    display: flex;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field > label {
    display: block;
    float: none;
    margin-bottom: 1px !important;
    width: 100%;
}

body.ff-app[data-grid-density="compact"] .ff-waybill .ff-stages-capture .dx-field-value {
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .form-group > .row:has([mapbox-geocoder]) {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .form-group > .row:has([mapbox-geocoder]) > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

body.ff-app .ff-waybill .ff-stages-capture [mapbox-geocoder],
body.ff-app .ff-waybill .ff-stages-capture .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .mapboxgl-ctrl-geocoder--input {
    font-size: var(--ff-control-font-size, 12px) !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-postal-field {
    width: 110px !important;
    max-width: 110px;
    min-width: 96px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-reference-field {
    width: 25% !important;
    max-width: 430px;
    min-width: 240px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-date-field {
    width: 118px !important;
    max-width: 118px;
    min-width: 112px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-time-field {
    width: 78px !important;
    max-width: 78px;
    min-width: 72px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-date-field .input-icon,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-time-field input.time.settime {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-time-field input.time.settime {
    max-width: 7ch !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-grid {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture .ff-full-schedule-field {
    flex-basis: 168px;
    max-width: 190px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid {
    flex-basis: 300px;
    max-width: 330px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
    flex-basis: 330px;
    max-width: 395px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field {
    flex-basis: 108px;
    max-width: 108px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 68px;
    max-width: 68px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-date-field .input-icon,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-time-field input.time.settime {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-time-field input.time.settime {
    max-width: 7ch !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-date-field {
    flex-basis: 122px;
    min-width: 112px;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-additional-top-row > .ff-quick-time-field {
    flex-basis: 76px;
    min-width: 72px;
}

/* Compact polish: keep required markers, filter lists, and narrow date/time fields aligned. */
body.ff-app .symbol.required {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: 2px;
    vertical-align: baseline;
}

body.ff-app .symbol.required::before {
    display: inline-block;
    line-height: 1;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: baseline;
}

body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .form-group > label .symbol.required,
body.ff-app[data-grid-density="compact"] .ff-page:not(.ff-login) .control-label .symbol.required {
    align-self: center;
    margin-top: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid {
    flex-basis: 292px;
    max-width: 315px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid {
    flex-basis: 426px;
    max-width: 445px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-order-field {
    flex: 1 1 104px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field {
    flex-basis: 96px;
    max-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 62px;
    max-width: 62px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-collection-grid > .row,
body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid > .row {
    gap: 4px 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row::before,
body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-other-value-row > .ff-full-value-field {
    flex: 0 1 160px;
    max-width: 190px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture .ff-full-date-field input.form-control[uib-datepicker-popup],
body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field input.time.settime {
    max-width: none !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row {
    column-gap: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 168px;
    min-width: 166px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-person {
    flex: 0 1 110px;
    min-width: 104px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row {
    gap: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-date {
    flex: 0 0 96px;
    min-width: 96px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 62px;
    min-width: 62px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-time input.time.settime {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row {
    align-items: flex-start;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .dx-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label.width100,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field .dx-field > label {
    align-items: center;
    display: flex;
    flex: 0 0 12px;
    height: 12px !important;
    line-height: 12px !important;
    margin: 0 0 1px !important;
    max-height: 12px !important;
    min-height: 12px !important;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label .pull-right,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label [json-dbl] {
    align-self: center;
    display: inline-block;
    float: none !important;
    font-size: 9px !important;
    line-height: 10px !important;
    margin-left: auto;
    margin-top: 0 !important;
    max-height: 11px;
    overflow: hidden;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    box-sizing: border-box;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    padding: 0 6px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-dx {
    flex: 0 0 var(--ff-control-h);
    margin-top: 0 !important;
}

/* Full capture polish: spacing, linked action alignment, and light-mode section glare. */
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-basic-details,
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-additional-details,
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-sr-card,
body.ff-app:not([data-theme="dark"]) .ff-waybill.ff-full-capture .ff-other-details {
    background: var(--surface-2);
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 20px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 16px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-wrap {
    flex-basis: calc(9.5rem + 34px + 9rem + 6px);
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-wrap .ff-additional-date-field {
    margin-left: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-list {
    flex: 0 1 15rem;
    margin-left: 4px;
    max-width: 15rem;
    min-width: 12rem;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-manifest-list .input-group {
    max-width: 100%;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-invoice-row {
    column-gap: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-invoice-row > .padding-left-0:not(.ff-linked-menu-action) {
    margin-left: 6px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-meta-pair-row {
    column-gap: 8px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-meta-field {
    min-width: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 78px;
    max-width: 78px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field label,
body.ff-app .ff-waybill.ff-full-capture .ff-pod-time label {
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 184px;
    min-width: 184px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 78px;
    min-width: 78px;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 1 208px;
    min-width: 208px;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-pod-date-time-row > .ff-pod-date {
    flex: 0 0 124px;
    min-width: 124px;
}

/* View Waybills filter width polish: keep hub fields paired and let lists use spare row space. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(140px, 0.7fr)
        minmax(150px, 0.75fr)
        minmax(165px, 0.85fr)
        minmax(236px, 1.05fr)
        minmax(190px, 1.1fr);
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row {
    gap: 6px 8px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 2 1 300px;
    min-width: 250px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.2 1 220px;
    min-width: 180px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 112px;
    min-width: 92px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 1 1 145px;
    min-width: 124px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1 1 180px;
    min-width: 160px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.8 1 132px;
    min-width: 116px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 92px;
    min-width: 82px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.1 1 180px;
    min-width: 158px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 1.2 1 230px;
    min-width: 190px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 1 1 190px;
    min-width: 160px;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.4 1 300px;
    min-width: 240px;
}

/* Compact-mode cleanup after field compression: keep required markers and filter rows aligned. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) {
    align-items: center !important;
    display: flex !important;
    gap: 2px;
    line-height: 12px !important;
    min-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 12px;
    line-height: 12px;
    margin-left: 1px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before {
    align-items: center;
    display: inline-flex;
    font-size: 18px;
    height: 12px;
    line-height: 12px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label:has(.symbol.required) .pull-right {
    margin-left: auto;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ff-control.ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-bootstrap {
    margin-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    align-items: start;
    column-gap: 8px;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(130px, 0.72fr)
        minmax(180px, 0.9fr)
        minmax(330px, 1.6fr)
        minmax(160px, 0.85fr);
    row-gap: 4px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row {
    align-items: start;
    display: grid !important;
    gap: 4px 8px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    margin-left: 0;
    margin-right: 0;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > [class*="col-"],
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field {
    flex: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0;
    padding-right: 0;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-client,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-party,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-parcel-desc {
    grid-column: span 2;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-pc-kgs-group {
    grid-column: span 4;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-bool-group {
    grid-column: 1 / -1;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label {
    align-items: center;
    display: flex;
    gap: 3px;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-field label [json-dbl],
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label [json-dbl] {
    align-items: center;
    display: inline-flex;
    float: none !important;
    font-size: 9px !important;
    height: 12px !important;
    line-height: 10px !important;
    margin-left: auto;
    margin-top: 0 !important;
    max-height: 12px !important;
    max-width: 58%;
    min-height: 12px !important;
    overflow: hidden;
    padding: 0 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .form-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .form-group {
    margin-bottom: 0 !important;
}

/* Compact final alignment pass: keep required labels and list controls on the same baseline. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label.width100 {
    align-items: center !important;
    display: flex !important;
    gap: 2px;
    height: 12px !important;
    line-height: 12px !important;
    margin: 0 0 1px !important;
    min-height: 12px !important;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > label .symbol.required,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label.width100 .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 12px !important;
    line-height: 12px !important;
    margin-left: 1px !important;
    min-height: 12px !important;
    vertical-align: middle !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > label .symbol.required::before,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture label.width100 .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 18px !important;
    height: 12px !important;
    line-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ff-input,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .form-group > .ui-select-bootstrap {
    margin-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center !important;
    display: flex !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 8px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > [class*="col-"],
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field {
    flex: 0 1 132px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 1.7 1 260px !important;
    min-width: 220px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.2 1 180px !important;
    min-width: 160px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 0.9 1 128px !important;
    min-width: 112px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 96px !important;
    min-width: 86px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1.1 1 170px !important;
    min-width: 150px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.8 1 122px !important;
    min-width: 108px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1 1 168px !important;
    min-width: 148px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.2 1 190px !important;
    min-width: 160px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 0.95 1 150px !important;
    min-width: 128px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-pc-kgs-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-extra-group {
    flex: 1 1 auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-client,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-party,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-parcel-desc,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-pc-kgs-group {
    grid-column: auto;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid label {
    align-items: center !important;
    display: flex !important;
    gap: 3px;
    height: 13px !important;
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    overflow: visible;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .form-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-control,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ui-select-container,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-inline-row .ff-dx,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-dx {
    margin-top: 0 !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-flow-row > .ff-filter-field {
        flex-basis: 150px !important;
    }

    body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client,
    body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
        flex-basis: 100% !important;
    }
}

/* Full capture finishing pass: normal-mode required markers, time widths, charge density, and linked action buttons. */
body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) {
    align-items: center !important;
    display: flex !important;
    gap: 2px;
    line-height: 16px !important;
    min-height: 18px !important;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    height: 16px !important;
    line-height: 16px !important;
    margin-left: 1px !important;
    min-height: 16px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 20px !important;
    height: 16px !important;
    line-height: 16px !important;
}

body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .pull-right {
    margin-left: auto;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 70px;
    max-width: 70px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-time-field {
    flex-basis: 60px;
    max-width: 60px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-ready-time-field {
    margin-right: 6px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-time-field {
    flex-basis: 66px;
    max-width: 66px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-time-field {
    flex-basis: 56px;
    max-width: 56px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-delivery-grid .ff-full-ready-time-field {
    margin-right: 5px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 18px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle,
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs .ff-linked-menu-action .dropdown-toggle {
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-divider-row > td,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__divider-row > td {
    height: 5px !important;
    line-height: 5px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-charge-summary-table .totalUL,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__divider {
    margin: 2px 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent {
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__title {
    color: var(--primary) !important;
    left: 0;
    line-height: 18px !important;
    margin: 0 !important;
    position: absolute;
    top: 0;
}

/* View Waybills compact filter final sizing: preserve the grid/footer while widening lists and taming Date Period. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    grid-template-columns:
        minmax(170px, 0.95fr)
        minmax(150px, 0.82fr)
        minmax(150px, 0.75fr)
        minmax(280px, 1.35fr)
        minmax(190px, 1fr);
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 170px;
    min-width: 150px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group {
    align-items: stretch;
    display: flex;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100%;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 54px;
    gap: 2px;
    justify-content: center;
    min-width: 54px;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    height: 12px !important;
    margin: 0 !important;
    position: static !important;
    width: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 2.1 1 330px !important;
    min-width: 280px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.45 1 240px !important;
    min-width: 200px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1.35 1 230px !important;
    min-width: 190px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.35 1 230px !important;
    min-width: 190px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.5 1 250px !important;
    min-width: 210px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 1.15 1 185px !important;
    min-width: 160px !important;
}

/* Full capture charges: make client/agent split clearer and keep subtotal dividers tight. */
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__title--client,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__title {
    color: var(--primary) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    line-height: 16px !important;
    text-transform: uppercase;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection__title--client {
    margin: -1px 0 1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent {
    border-top: 2px solid var(--primary) !important;
    margin-top: 2px !important;
    padding-top: 1px !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td {
    height: 18px !important;
    line-height: 1.05 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider-row > td {
    height: 3px !important;
    line-height: 3px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider {
    height: 1px;
    margin: 1px 0 !important;
}

/* Full capture rating/charges: keep label/value pairs compact and easier to follow. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex-basis: 405px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex-basis: 182px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex-basis: 196px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table {
    table-layout: auto !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr:not(:last-child),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr:not(:last-child):not(.ff-charge-divider-row),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr:not(:last-child):not(.ff-subsection__divider-row) {
    box-shadow: inset 0 -1px 0 var(--divider);
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 112px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 112px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 70px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 70px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 78px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 78px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 98px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 98px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr.ff-charge-total-row > td:last-child {
    padding-right: 0 !important;
}

/* Full capture linked action buttons: normal mode sits a touch lower and inside the field height. */
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-courier-action,
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 19px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-basic-docs .ff-linked-menu-action .dropdown-toggle,
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
}

/* View Waybills compact filter hard override: keep lists useful and prevent stranded hub/user fields. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-flow-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-inline-row {
    align-items: flex-start !important;
    gap: 3px 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
    column-gap: 6px !important;
    display: grid !important;
    grid-template-columns: 170px 150px 146px minmax(272px, 1fr) minmax(190px, 220px) !important;
    row-gap: 3px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 146px !important;
    min-width: 146px !important;
    width: 146px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group {
    align-items: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 48px !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 48px !important;
    padding: 0 3px !important;
    white-space: nowrap !important;
    width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    height: 11px !important;
    margin: 0 2px 0 0 !important;
    min-height: 11px !important;
    position: static !important;
    vertical-align: middle !important;
    width: 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period .input-group-addon label {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-date-period select.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 1.75 1 300px !important;
    min-width: 260px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 1.25 1 220px !important;
    min-width: 185px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0.95 1 150px !important;
    min-width: 128px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 0.85 1 126px !important;
    min-width: 112px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 82px !important;
    min-width: 76px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1 1 150px !important;
    min-width: 130px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.8 1 116px !important;
    min-width: 104px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.2 1 165px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.35 1 230px !important;
    min-width: 190px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-area,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box {
    flex: 0.95 1 150px !important;
    min-width: 128px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 1.2 1 220px !important;
    min-width: 180px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user {
    flex: 1.05 1 160px !important;
    min-width: 140px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-pc-kgs-group {
    flex: 1 1 420px !important;
    min-width: 360px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 54px !important;
    min-width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-ring-code,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 110px !important;
    min-width: 96px !important;
}

@media (max-width: 1100px) {
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    }

    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
        flex-basis: 180px !important;
    }
}

/* Final page-scoped polish: use a root class so compact View Waybills filters are not dependent on body selector support. */
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-courier-action {
    padding-top: 20px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 19px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    align-items: center !important;
    display: inline-flex !important;
    height: calc(var(--ff-control-h) - 4px) !important;
    justify-content: center !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 4px) !important;
    min-height: calc(var(--ff-control-h) - 4px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr.ff-subsection__divider-row,
body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr.ff-subsection__divider-row > td {
    border: 0 !important;
    height: 1px !important;
    line-height: 1px !important;
    max-height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider {
    border-bottom: 1px solid var(--divider) !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-sr-card {
    padding: 4px 12px 6px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-flow-row,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-inline-row {
    align-items: flex-start !important;
    gap: 4px 10px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(210px, .9fr) minmax(160px, .7fr) 152px minmax(392px, 1.45fr) minmax(220px, .95fr) !important;
    row-gap: 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-inline-row > [class*="col-"] {
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .form-group {
    margin-bottom: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field label,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid label {
    align-items: center !important;
    display: flex !important;
    gap: 3px !important;
    height: 13px !important;
    line-height: 13px !important;
    margin: 0 0 1px !important;
    min-height: 13px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field label [json-dbl],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid label [json-dbl] {
    align-items: center !important;
    display: inline-flex !important;
    float: none !important;
    font-size: 9px !important;
    height: 12px !important;
    line-height: 10px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 12px !important;
    max-width: 58% !important;
    min-height: 12px !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .form-control,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ff-control,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ff-dx,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .dx-widget {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center !important;
    display: flex !important;
    line-height: 1.1 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period {
    max-width: 152px !important;
    min-width: 152px !important;
    width: 152px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 50px !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 50px !important;
    padding: 0 3px !important;
    white-space: nowrap !important;
    width: 50px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon input[type="checkbox"] {
    flex: 0 0 auto !important;
    height: 11px !important;
    margin: 0 2px 0 0 !important;
    min-height: 11px !important;
    position: static !important;
    width: 11px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-client {
    flex: 1.8 1 280px !important;
    min-width: 240px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 132px !important;
    min-width: 112px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 1.35 1 240px !important;
    min-width: 200px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-vehicle {
    flex: 1.1 1 220px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 1 1 210px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 1.35 1 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0.95 1 170px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 118px !important;
    min-width: 96px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 1.35 1 230px !important;
    min-width: 195px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1.45 1 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 1.15 1 205px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 1.2 1 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-pc-kgs-group {
    flex: 1 1 500px !important;
    min-width: 420px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-area,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-zone,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-ring-code,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 132px !important;
    min-width: 110px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    }
}

/* Compact header: keep page-history chips close together and fully visible in the blue banner. */
body.ff-app[data-grid-density="compact"] #historyTabs,
body.ff-app.ff-grid-density-compact #historyTabs {
    height: 38px !important;
    top: 3px !important;
    overflow: hidden !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap {
    overflow: visible !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner {
    height: 36px !important;
    overflow: visible !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs {
    align-items: center !important;
    gap: 2px !important;
    height: 36px !important;
    overflow: visible !important;
    padding: 3px 4px 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
    flex: 0 1 auto !important;
    max-width: 122px !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li > a,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li > a {
    box-sizing: border-box !important;
    height: 28px !important;
    line-height: 1 !important;
    max-height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a {
    min-width: 28px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

/* Full capture final nudge: normal-mode date fields need the full year, courier action should match field height. */
body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-date-field {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill.ff-full-capture .ff-full-courier-action .dropdown-toggle {
    height: calc(var(--ff-control-h) + 2px) !important;
    max-height: calc(var(--ff-control-h) + 2px) !important;
    min-height: calc(var(--ff-control-h) + 2px) !important;
}

/* Full capture: show existing-waybill verification without adding another row. */
body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    align-items: flex-start;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    min-height: 17px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row > label {
    margin-bottom: 0;
    min-width: 0;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    flex: 0 0 auto;
    margin: 0 !important;
    min-height: 16px !important;
    padding-left: 0 !important;
    position: relative;
    top: -4px;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline.clip-check label {
    line-height: 16px !important;
    margin: 0 !important;
    min-height: 16px !important;
    padding-left: 22px !important;
    white-space: nowrap;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-verified-inline {
    top: -7px;
}

/* View Waybills compact filter trim: keep wrapped fields useful instead of full-row wide. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period {
    flex: 0 0 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: center !important;
    overflow: hidden !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    flex: 0 0 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    width: 48px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    font-size: 10px !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 2px 0 17px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label::before {
    border-radius: 3px !important;
    height: 10px !important;
    left: 2px !important;
    width: 10px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label::after {
    height: 3px !important;
    left: 4px !important;
    width: 6px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    padding-left: 5px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-client {
    max-width: 520px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    max-width: 430px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-vehicle {
    max-width: 330px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 190px !important;
    max-width: 260px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 230px !important;
    max-width: 300px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 170px !important;
    max-width: 230px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 118px !important;
    max-width: 135px !important;
    min-width: 90px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 230px !important;
    max-width: 330px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    max-width: 520px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 0 1 195px !important;
    max-width: 270px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 260px !important;
    max-width: 360px !important;
    min-width: 190px !important;
}

/* View Waybills compact filter second pass: prevent single-field orphan rows. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: flex-start !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    align-items: flex-start !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label {
    height: 18px !important;
    line-height: 18px !important;
    max-height: 18px !important;
    min-height: 18px !important;
    transform: translateY(-1px);
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    padding-top: 1px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 360px !important;
    max-width: 430px !important;
    min-width: 300px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 300px !important;
    max-width: 350px !important;
    min-width: 245px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 260px !important;
    max-width: 300px !important;
    min-width: 215px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 190px !important;
    max-width: 220px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 250px !important;
    max-width: 280px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 116px !important;
    max-width: 125px !important;
    min-width: 88px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 1 1 470px !important;
    max-width: 560px !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1 1 390px !important;
    max-width: 430px !important;
    min-width: 280px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 150px !important;
    max-width: 175px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-box {
    flex: 0 1 210px !important;
    max-width: 240px !important;
    min-width: 160px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 290px !important;
    max-width: 330px !important;
    min-width: 205px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-capture-method,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-user {
    flex: 0 1 215px !important;
    max-width: 245px !important;
    min-width: 165px !important;
}

/* View Waybills compact filter final pass: reduce orphan rows and lift Date Period contents. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group {
    align-items: flex-start !important;
    height: 22px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    transform: translateY(-2px);
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .input-group-addon {
    align-items: center !important;
    height: 22px !important;
    line-height: 14px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    padding: 0 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate {
    margin-top: 0 !important;
    position: relative !important;
    top: -1px;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label {
    height: 14px !important;
    line-height: 14px !important;
    max-height: 14px !important;
    min-height: 14px !important;
    transform: translateY(-1px);
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period select.form-control {
    height: 22px !important;
    line-height: 18px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    padding-bottom: 1px !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 160px !important;
    max-width: 190px !important;
    min-width: 130px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 0 1 275px !important;
    max-width: 310px !important;
    min-width: 200px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 120px !important;
}

/* View Waybills compact filter spacing: keep common fields close and avoid oversized yes/no controls. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    grid-template-columns: 170px 150px 146px 330px minmax(210px, 250px) !important;
    justify-content: start !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 330px !important;
    min-width: 310px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 260px !important;
    max-width: 290px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 340px !important;
    max-width: 420px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 82px !important;
    max-width: 92px !important;
    min-width: 64px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-inline-row {
    gap: 3px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 90px !important;
    max-width: 98px !important;
    min-width: 76px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 116px !important;
    max-width: 126px !important;
    min-width: 96px !important;
}

/* View Waybills compact Date Period: override the global ignore-date checkbox height directly. */
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group {
    align-items: flex-start !important;
    display: inline-flex !important;
    height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    transform: none !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 66px !important;
    height: 24px !important;
    justify-content: flex-start !important;
    line-height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 66px !important;
    padding: 0 !important;
    vertical-align: top !important;
    width: 66px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: 24px !important;
    justify-content: flex-start !important;
    line-height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding: 0 4px 0 24px !important;
    transform: none !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 12px !important;
    left: 6px !important;
    top: 50% !important;
    width: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    height: 4px !important;
    left: 9px !important;
    top: 50% !important;
    width: 7px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    flex: 1 1 auto !important;
    height: 24px !important;
    line-height: 20px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding-bottom: 1px !important;
    padding-left: 6px !important;
    padding-top: 1px !important;
    width: auto !important;
}

/* View Waybills normal mode: use the same space-saving field priorities as compact mode. */
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-waybill-filter-grid {
    grid-template-columns: 170px 170px 190px 330px minmax(210px, 250px) !important;
    justify-content: start !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 330px !important;
    min-width: 310px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 250px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row {
    gap: 5px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 360px !important;
    max-width: 430px !important;
    min-width: 300px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 260px !important;
    max-width: 290px !important;
    min-width: 210px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 340px !important;
    max-width: 420px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 260px !important;
    max-width: 300px !important;
    min-width: 215px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 190px !important;
    max-width: 220px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 250px !important;
    max-width: 280px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 116px !important;
    max-width: 125px !important;
    min-width: 88px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-town {
    flex: 0 1 265px !important;
    max-width: 300px !important;
    min-width: 185px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 0 1 275px !important;
    max-width: 310px !important;
    min-width: 200px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-receiver-acc {
    flex: 0 1 150px !important;
    max-width: 175px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-area,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-user,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-capture-method {
    flex: 0 1 215px !important;
    max-width: 245px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 82px !important;
    max-width: 92px !important;
    min-width: 64px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 120px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-inline-row {
    gap: 4px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 96px !important;
    max-width: 108px !important;
    min-width: 82px !important;
}

body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills:not(.ff-view-waybills-compact) .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 126px !important;
    max-width: 138px !important;
    min-width: 106px !important;
}

/* Full capture rating polish: fixed-width rating blocks and value-side guide lines only. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 420px !important;
    max-width: 420px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    flex: 0 0 395px !important;
    max-width: 395px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 204px !important;
    max-width: 204px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 190px !important;
    max-width: 190px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-fcalc-section {
    flex: 0 0 232px !important;
    max-width: 232px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-mass-section {
    flex: 0 0 150px !important;
    max-width: 150px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr:not(.ff-charge-divider-row),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr:not(.ff-subsection__divider-row),
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr {
    box-shadow: none !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr:not(:last-child) > td:last-child {
    box-shadow: inset 0 -1px 0 var(--divider);
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    border-bottom-color: var(--border) !important;
    border-bottom-width: 2px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__divider {
    background: var(--border) !important;
    height: 2px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-left: 34px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 62px !important;
    width: 62px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 86px !important;
    width: 86px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed {
    table-layout: auto !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 76px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 76px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 64px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 64px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card label.width100 {
    align-items: center;
    display: flex;
    gap: 2px;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-sr-card label.width100 > .text-primary.pull-right {
    float: none !important;
    margin-left: auto !important;
    text-align: right;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    margin-bottom: 3px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    margin-left: 8px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-additional-verified {
    display: none !important;
}

@media (min-width: 768px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill {
        flex: 0 0 auto !important;
        max-width: 220px !important;
    }

    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
        max-width: 220px !important;
        width: max-content !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
        max-width: 180px !important;
    }
}

@media (min-width: 768px) and (max-width: 1000px) {
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
    body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
        max-width: 150px !important;
    }
}

body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
body.ff-app[data-grid-density="compact"] .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a,
body.ff-app.ff-grid-density-compact .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
    max-width: 170px !important;
}

/* View Waybills filter final layout: keep date/branch and hub/town fields on useful rows. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 8px !important;
    grid-template-columns:
        minmax(150px, .85fr)
        minmax(132px, .72fr)
        154px
        minmax(292px, 320px)
        minmax(220px, 1fr) !important;
    justify-content: start !important;
    row-gap: 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 320px !important;
    min-width: 292px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 280px !important;
    min-width: 220px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 154px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    width: 154px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-ignore,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    flex: 0 0 auto !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: flex !important;
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 2px 0 20px !important;
    position: relative !important;
    transform: none !important;
    width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 11px !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 11px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    height: 4px !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-70%) rotate(-45deg) !important;
    width: 7px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: 1.15 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-town-inline {
    flex: 0 1 225px !important;
    max-width: 260px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-town-inline {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns:
            minmax(128px, .78fr)
            minmax(124px, .68fr)
            148px
            minmax(270px, 300px)
            minmax(200px, 1fr) !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
        max-width: 300px !important;
        min-width: 270px !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
        min-width: 200px !important;
    }
}

/* Normal header history: compact the chips and prevent bottom clipping. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #historyTabs {
    height: 38px !important;
    overflow: hidden !important;
    top: 4px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #history-tabs-inner {
    height: 36px !important;
    overflow: visible !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs {
    align-items: center !important;
    gap: 2px !important;
    height: 36px !important;
    overflow: visible !important;
    padding: 3px 4px 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
    flex: 0 1 auto !important;
    max-width: 132px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li > a {
    align-items: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    height: 30px !important;
    line-height: 1 !important;
    max-height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-action > a {
    min-width: 28px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
    max-width: 170px !important;
}

/* Full capture rating final sizing: keep charge labels clear and give value columns breathing room. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 540px !important;
    max-width: 540px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 286px !important;
    max-width: 286px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 230px !important;
    max-width: 230px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    flex: 0 0 440px !important;
    max-width: 440px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-fcalc-section {
    flex: 0 0 250px !important;
    max-width: 250px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-mass-section {
    flex: 0 0 172px !important;
    max-width: 172px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table {
    margin-left: 30px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-left: 70px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 92px !important;
    width: 92px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 104px !important;
    width: 104px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__divider {
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 126px !important;
    width: 126px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 88px !important;
    width: 88px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 82px !important;
    width: 82px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 76px !important;
    width: 76px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    transform: translateX(-14px);
}

/* View Waybills filter sizing final pass: keep compact mode predictable at smaller widths. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 8px !important;
    grid-template-columns: 184px 140px 144px 300px 230px !important;
    justify-content: start !important;
    row-gap: 3px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 144px !important;
    min-width: 144px !important;
    width: 144px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    max-width: 300px !important;
    min-width: 300px !important;
    width: 300px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 0 230px !important;
    max-width: 230px !important;
    min-width: 230px !important;
    width: 230px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-group,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-group {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: 54px 88px !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    max-width: 142px !important;
    min-height: 24px !important;
    overflow: hidden !important;
    width: 142px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-ignore,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-ignore {
    align-self: start !important;
    display: block !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    position: relative !important;
    width: 54px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    display: block !important;
    font-size: 11px !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 2px 0 19px !important;
    position: absolute !important;
    top: 0 !important;
    transform: none !important;
    width: 54px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 11px !important;
    left: 4px !important;
    top: 6px !important;
    transform: none !important;
    width: 11px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    left: 7px !important;
    top: 9px !important;
    transform: rotate(-45deg) !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    height: 24px !important;
    line-height: 22px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    width: 88px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 260px !important;
    max-width: 300px !important;
    min-width: 220px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 178px !important;
    max-width: 210px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-town-inline {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-bool-group,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 0 1 auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-bool-group .ff-filter-bool,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 72px !important;
    max-width: 84px !important;
    min-width: 64px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-bool-group .ff-filter-security,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 88px !important;
    max-width: 102px !important;
    min-width: 76px !important;
}

@media (max-width: 1200px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: 160px 132px 142px 292px 220px !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
        max-width: 292px !important;
        min-width: 292px !important;
        width: 292px !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
        max-width: 220px !important;
        min-width: 220px !important;
        width: 220px !important;
    }
}

/* Full capture final top-row/rating balance. */
body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row {
    column-gap: 12px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .ff-full-account-field {
    flex: 0 0 100px !important;
    max-width: 100px !important;
    min-width: 0 !important;
    width: 100px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .ff-full-account-field #accClient {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-row > .ff-full-client-field {
    flex: 0 1 400px !important;
    max-width: 400px !important;
    min-width: 300px !important;
    width: 400px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-basic-docs > .row > .col-md-3:has(#waybillNo) {
    flex: 0 1 190px !important;
    max-width: 198px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-courier-field {
    flex: 0 1 132px !important;
    max-width: 148px !important;
    min-width: 116px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    margin-bottom: 1px !important;
    min-height: 17px !important;
    padding-right: 82px !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-verified-inline {
    margin: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: -5px !important;
    transform: translateX(-10px) !important;
    z-index: 2;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-waybill-label-row,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture .ff-full-waybill-label-row {
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-verified-inline,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture .ff-full-verified-inline {
    top: -12px !important;
    transform: translateX(-12px) !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 552px !important;
    max-width: 552px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 286px !important;
    max-width: 286px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 242px !important;
    max-width: 242px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    flex: 0 0 452px !important;
    max-width: 452px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-mass-section {
    flex: 0 0 184px !important;
    max-width: 184px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 132px !important;
    width: 132px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 96px !important;
    padding-right: 4px !important;
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 86px !important;
    width: 86px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-mass-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 82px !important;
    padding-right: 4px !important;
    width: 82px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-left: 54px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__title--client:not(.ng-hide) + .ff-charge-summary-table {
    margin-top: -16px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:first-child {
    min-width: 92px !important;
    width: 92px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection__table > tbody > tr > td:last-child {
    min-width: 104px !important;
    width: 104px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent {
    padding-top: 1px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL {
    width: 100% !important;
}

/* View Waybills final compact corrections: prevent overflow, keep booleans on one line, and tighten pager chrome. */
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-inline-row {
    gap: 3px 6px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool {
    flex: 0 1 64px !important;
    max-width: 72px !important;
    min-width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-bool-wide,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group .ff-filter-security {
    flex: 0 1 78px !important;
    max-width: 88px !important;
    min-width: 68px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-bool-group select.form-control {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    line-height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

@media (max-width: 1050px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
        max-width: 100% !important;
        min-width: 0 !important;
        width: auto !important;
    }

    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-filter-date-range .range-picker,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 850px) {
    body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
    body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-datagrid-content {
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer .dx-row > td {
    height: 20px !important;
    line-height: 18px !important;
    min-height: 20px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    align-items: center !important;
    border-top: 0 !important;
    display: flex !important;
    margin: 0 !important;
    min-height: 22px !important;
    padding: 0 4px !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-pages {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    line-height: 20px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-info,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-info {
    line-height: 20px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-page,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-page-size,
body.ff-app .ff-view-waybills #gridContainer .dx-pager .dx-navigate-button {
    line-height: 18px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 20px !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

/* Full capture rating final balance: widen rating variables and keep agent charges aligned to client charges. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 580px !important;
    max-width: 580px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 0 292px !important;
    max-width: 292px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 0 264px !important;
    max-width: 264px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed {
    table-layout: fixed !important;
    width: 250px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:first-child {
    min-width: 136px !important;
    width: 136px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed > tbody > tr > td:last-child {
    min-width: 108px !important;
    padding-right: 8px !important;
    width: 108px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table {
    border-collapse: collapse !important;
    margin-left: 54px !important;
    table-layout: fixed !important;
    width: 216px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:first-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:first-child {
    box-sizing: border-box !important;
    min-width: 96px !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table > tbody > tr > td:last-child,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__table > tbody > tr > td:last-child {
    box-sizing: border-box !important;
    min-width: 110px !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
    width: 110px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-charge-summary-table .totalUL,
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-subsection--agent .ff-subsection__divider-row > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* View Waybills filter overflow guard: wrap date/branch before the fieldset edge and keep destination with route/service. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    column-gap: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
    max-width: 100% !important;
    overflow: visible !important;
    row-gap: 3px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    grid-column: span 2 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-filter-date-range .range-picker,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-destination-town-inline {
    flex: 0 1 230px !important;
    max-width: 260px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-destination-town-inline {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 220px !important;
    max-width: 260px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-service {
    flex: 0 1 205px !important;
    max-width: 240px !important;
    min-width: 160px !important;
}

/* View Waybills top filter guard: branch/date need a two-slot footprint so they wrap before clipping. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    box-sizing: border-box !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    padding-right: 12px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    grid-column: span 2 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-date-period .ff-date-period-select,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-view-waybills .ff-filter-date-period .ff-date-period-select {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    vertical-align: top !important;
}

/* Full capture rating: remove leftover space between Rating Variables and Freight Calculation. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-compact-row,
body.ff-app .ff-waybill.ff-full-capture .ff-rating-split-row {
    column-gap: 6px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col {
    flex: 0 0 562px !important;
    max-width: 562px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-calc-col {
    margin-left: 0 !important;
}

/* View Waybills filter/footer final layout: keep related top fields together and avoid orphan controls. */
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    padding-right: 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > [class*="col-"] {
    float: none !important;
    grid-column: auto !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 385px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 385px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 230px !important;
    max-width: 230px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 405px !important;
    max-width: 405px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 385px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 330px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 305px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 160px !important;
    max-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 340px !important;
    max-width: 405px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 330px !important;
    max-width: 385px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-container,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch .ui-select-match > .btn,
body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid .ff-filter-date-range .range-picker,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid .ff-filter-date-range .range-picker {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 185px !important;
    max-width: 230px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-destination-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-origin-town-inline,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-destination-town-inline {
    flex: 0 1 225px !important;
    max-width: 260px !important;
    min-width: 170px !important;
}

body.ff-app .ff-view-waybills > .container-fullw,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills #gridContainer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* View Waybills final flow: let filter fields continue across previous row boundaries. */
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-sr-legend {
    flex: 0 0 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-client-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-manifest-row,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-waybill-route-row {
    display: contents !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > [class*="col-"],
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 315px !important;
    max-width: 370px !important;
    min-width: 245px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 305px !important;
    max-width: 360px !important;
    min-width: 230px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 155px !important;
    max-width: 170px !important;
    min-width: 145px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 340px !important;
    min-width: 285px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 240px !important;
    max-width: 275px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 310px !important;
    max-width: 410px !important;
    min-width: 250px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-agent {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 195px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 245px !important;
    max-width: 290px !important;
    min-width: 195px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 220px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 140px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-schedule {
    flex: 0 1 235px !important;
    max-width: 270px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-invoice,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-manifest-no,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-courier {
    flex: 0 1 175px !important;
    max-width: 205px !important;
    min-width: 132px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-internal-id {
    flex: 0 1 110px !important;
    max-width: 125px !important;
    min-width: 86px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex: 0 1 215px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 1 1 245px !important;
    max-width: 310px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-route,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-service,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-box,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-capture-method,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user {
    flex: 0 1 190px !important;
    max-width: 230px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-pc-kgs-group {
    flex: 0 1 455px !important;
    max-width: 520px !important;
    min-width: 360px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 180px !important;
    max-width: 220px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-receiver-acc,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-ring-code {
    flex: 0 1 125px !important;
    max-width: 150px !important;
    min-width: 100px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-area {
    flex: 0 1 170px !important;
    max-width: 205px !important;
    min-width: 130px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-zone {
    flex: 0 1 80px !important;
    max-width: 94px !important;
    min-width: 58px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex: 1 1 560px !important;
    max-width: none !important;
    min-width: 360px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-actions-slot--bottom {
    flex: 1 1 100% !important;
    margin-top: 2px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 285px !important;
    max-width: 340px !important;
    min-width: 215px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 265px !important;
    max-width: 320px !important;
    min-width: 205px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 300px !important;
    max-width: 325px !important;
    min-width: 275px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 225px !important;
    max-width: 260px !important;
    min-width: 180px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-client-row > .ff-filter-order {
    flex-basis: 165px !important;
    max-width: 195px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-origin-hub,
body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex-basis: 200px !important;
    max-width: 235px !important;
    min-width: 160px !important;
}

body.ff-app .ff-waybill.ff-view-waybills.ff-view-waybills-compact .ff-filter-waybill-route-row > .ff-filter-bool-group {
    flex-basis: 520px !important;
    min-width: 330px !important;
}

body.ff-app .ff-view-waybills > .container-fullw,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12,
body.ff-app .ff-view-waybills #gridContainer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-rowsview,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    min-height: 26px !important;
    padding-top: 0 !important;
}

/* View Waybills final pass: keep flattened filter rows flowing and remove footer slack. */
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-client-row::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-client-row::after,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-manifest-row::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-manifest-row::after,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-waybill-route-row::before,
body.ff-app .ff-waybill.ff-view-waybills .ff-sr-card > .ff-filter-waybill-route-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-town,
body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-party {
    flex: 0 1 240px !important;
    max-width: 285px !important;
    min-width: 175px !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-manifest-row > .ff-filter-destination-hub {
    flex-grow: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-client-row > .ff-filter-order {
    flex-grow: 0 !important;
}

body.ff-app .ff-waybill.ff-view-waybills .ff-filter-waybill-route-row > .ff-filter-user {
    flex-grow: 0 !important;
}

body.ff-app .ff-view-waybills > .container-fluid.container-fullw,
body.ff-app .ff-view-waybills > .container-fullw,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-rowsview,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-total-footer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-pager {
    align-items: center !important;
    min-height: 22px !important;
}

body.ff-app .ff-view-waybills.ff-view-waybills-compact #gridContainer .dx-datagrid-headers .dx-header-row > td {
    height: 24px !important;
    min-height: 24px !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-view-waybills.ff-view-waybills-compact #gridContainer .dx-datagrid-headers .dx-checkbox,
body.ff-app .ff-view-waybills.ff-view-waybills-compact #gridContainer .dx-datagrid-headers .dx-checkbox-container {
    height: 16px !important;
    min-height: 16px !important;
}

/* Full capture tablet-fit pass: let rating and parcel areas shrink/wrap before controls leave the viewport. */
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col,
body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-col > .ff-rating-split-row {
    display: contents !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-charges-section {
    flex: 0 1 292px !important;
    max-width: 292px !important;
    min-width: 270px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-rating-vars-section {
    flex: 0 1 276px !important;
    max-width: 276px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-legend--main .ff-rating-vars-section table.table-condensed {
    width: 260px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid {
    min-width: 960px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 64px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-qty {
    width: 54px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-code {
    width: 96px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: clamp(168px, 18vw, 280px) !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim {
    width: 84px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-volume,
body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 88px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-value {
    width: 98px !important;
}

body.ff-app .ff-waybill.ff-full-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-action {
    width: 38px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action {
    flex: 0 0 62px !important;
    max-width: 62px !important;
    min-width: 58px !important;
    padding-top: 18px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture .ff-full-clone-action,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture .ff-full-clone-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-clone-action .btn {
    min-width: 54px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: 54px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-additional-details .ff-additional-meta-row {
    margin-bottom: 1px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-additional-details > .row.margin-bottom-20 {
    margin-bottom: 1px !important;
    min-height: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill.ff-full-capture .ff-additional-details .ff-pod-details {
    margin-top: 0 !important;
}

/* View Waybills final grid chrome: keep export buttons from overlaying quick filters on narrower screens. */
body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
    padding-right: 320px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-toolbar {
    align-items: center !important;
    display: inline-flex !important;
    gap: 3px !important;
    margin-right: 4px !important;
    max-width: 100% !important;
    min-height: 24px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-caption {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-select {
    border-color: var(--border) !important;
    box-shadow: none !important;
    display: inline-block !important;
    font-size: 13px !important;
    height: 24px !important;
    line-height: 20px !important;
    max-width: 105px !important;
    min-width: 82px !important;
    padding: 1px 22px 1px 7px !important;
    width: 92px !important;
}

body.ff-app.ff-grid-density-compact .ff-view-waybills .ff-grid-view-select,
body.ff-app[data-grid-density="compact"] .ff-view-waybills .ff-grid-view-select {
    max-width: 100px !important;
    min-width: 80px !important;
    width: 90px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-icon-btn {
    align-items: center !important;
    display: inline-flex !important;
    height: 24px !important;
    justify-content: center !important;
    min-height: 24px !important;
    min-width: 26px !important;
    padding: 1px 6px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-icon-btn .fa {
    font-size: 13px !important;
    line-height: 1 !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-menu {
    display: inline-flex !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-menu .dropdown-menu {
    font-size: 13px !important;
    min-width: 170px !important;
}

body.ff-app .ff-view-waybills .ff-grid-view-dirty {
    color: var(--error) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    margin-left: 1px !important;
}

@media (max-width: 3000px) {
    body.ff-app .ff-view-waybills .ff-view-waybills-grid-toolbar-row {
        padding-right: 0 !important;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel {
        margin-top: 0 !important;
        min-height: 26px !important;
        pointer-events: none;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar,
    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-items-container {
        min-height: 26px !important;
        height: 26px !important;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-after {
        align-items: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }

    body.ff-app .ff-view-waybills #gridContainer .dx-datagrid-header-panel .dx-toolbar-item {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
}

/* View Waybills pager: trim the leftover empty band below page options. */
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row,
body.ff-app .ff-view-waybills .ff-view-waybills-grid-row > .col-md-12,
body.ff-app .ff-view-waybills #gridContainer,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-bottom-load-panel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager {
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    height: 26px !important;
    max-height: 26px !important;
    min-height: 20px !important;
    overflow: visible !important;
    padding: 0 4px !important;
}

body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-datagrid-pager .dx-pages,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager .dx-page-sizes,
body.ff-app .ff-view-waybills #gridContainer .dx-datagrid .dx-pager .dx-pages {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Multi-page capture/generate density: reuse the accepted full-capture rhythm without touching full capture itself. */
body.ff-app .ff-capture-page > .container-fullw,
body.ff-app .ff-capture-page > .container-fluid.container-fullw {
    padding: 4px 10px 8px !important;
}

body.ff-app .ff-capture-page fieldset {
    margin-bottom: 4px !important;
    padding: 6px 10px 8px !important;
}

body.ff-app:not([data-theme="dark"]) .ff-capture-page fieldset:not(.ff-legend--main) {
    background: var(--surface-2) !important;
}

body.ff-app .ff-capture-page fieldset > legend {
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
    padding: 2px 8px !important;
}

body.ff-app .ff-capture-page .row {
    margin-bottom: 3px !important;
}

body.ff-app .ff-capture-page .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-capture-page .form-group > label,
body.ff-app .ff-capture-page label.control-label,
body.ff-app .ff-capture-page .dx-field-label {
    line-height: 1.15 !important;
    margin-bottom: 1px !important;
    min-height: 0 !important;
}

body.ff-app .ff-capture-page .form-control,
body.ff-app .ff-capture-page .ff-control,
body.ff-app .ff-capture-page .ui-select-container,
body.ff-app .ff-capture-page .ui-select-container .ui-select-match,
body.ff-app .ff-capture-page .ui-select-container .btn.form-control,
body.ff-app .ff-capture-page .ui-select-container .ui-select-toggle {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-capture-page textarea.form-control,
body.ff-app .ff-capture-page textarea.ff-control {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    resize: vertical;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page,
body.ff-app.ff-grid-density-compact .ff-capture-page {
    --ff-control-h: 28px;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page fieldset,
body.ff-app.ff-grid-density-compact .ff-capture-page fieldset {
    margin-bottom: 3px !important;
    padding: 4px 8px 6px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .row,
body.ff-app.ff-grid-density-compact .ff-capture-page .row {
    margin-bottom: 2px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .form-group,
body.ff-app.ff-grid-density-compact .ff-capture-page .form-group {
    margin-bottom: 1px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-capture-page label.control-label,
body.ff-app.ff-grid-density-compact .ff-capture-page .form-group > label,
body.ff-app.ff-grid-density-compact .ff-capture-page label.control-label {
    font-size: 11px !important;
    line-height: 12px !important;
}

body.ff-app .ff-capture-page .padding-top-30,
body.ff-app .ff-capture-page .padding-top-25,
body.ff-app .ff-capture-page .padding-top-20 {
    padding-top: 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page .padding-top-30,
body.ff-app[data-grid-density="compact"] .ff-capture-page .padding-top-25,
body.ff-app[data-grid-density="compact"] .ff-capture-page .padding-top-20,
body.ff-app.ff-grid-density-compact .ff-capture-page .padding-top-30,
body.ff-app.ff-grid-density-compact .ff-capture-page .padding-top-25,
body.ff-app.ff-grid-density-compact .ff-capture-page .padding-top-20 {
    padding-top: 2px !important;
}

/* Shared capture-page control alignment.
   Keep list widgets on the same top baseline as normal text/date fields.
   Full Waybill Capture does not use ff-capture-page and keeps its page-specific accepted layout. */
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 2px !important;
    min-width: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label,
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label.width100,
body.ff-app .ff-capture-page:not(.ff-full-capture) .control-label,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field-label {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label .pull-right,
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label .text-primary.pull-right,
body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label [json-dbl],
body.ff-app .ff-capture-page:not(.ff-full-capture) .control-label .pull-right {
    align-self: center !important;
    float: none !important;
    line-height: 1 !important;
    margin-left: auto !important;
    margin-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-group > label .symbol.required,
body.ff-app .ff-capture-page:not(.ff-full-capture) .control-label .symbol.required {
    align-self: center !important;
    margin-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .form-control,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ff-control,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ff-ui.ui-select-bootstrap,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-container,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-capture-page:not(.ff-full-capture) .select2-container,
body.ff-app .ff-capture-page:not(.ff-full-capture) .select2-choice,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ff-dx,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-widget,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-texteditor,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-texteditor-container {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    vertical-align: top !important;
    width: 100% !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    line-height: 1.15 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-texteditor-input {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.15 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-placeholder {
    display: block !important;
    flex: 1 1 auto !important;
    line-height: 1.15 !important;
    max-height: calc(var(--ff-control-h) - 4px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-placeholder.ng-hide,
body.ff-app .ff-capture-page:not(.ff-full-capture) .ui-select-bootstrap .ui-select-placeholder[aria-hidden="true"] {
    display: none !important;
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app .ff-capture-page .ui-select-container.ff-capture-ui-select-keyboard-focus {
    outline: none !important;
}

body.ff-app .ff-capture-page .ui-select-container.ff-capture-ui-select-keyboard-focus > .ui-select-match > .btn,
body.ff-app .ff-capture-page .ui-select-container.ff-capture-ui-select-keyboard-focus > .ui-select-match > .ui-select-toggle {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--focus) !important;
    outline: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row .ui-select-bootstrap .ui-select-placeholder {
    display: inline-block !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 60px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row .ui-select-bootstrap .ui-select-placeholder:empty,
body.ff-app .ff-waybill.ff-full-capture .ui-select-bootstrap .ui-select-placeholder:empty {
    display: none !important;
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
    margin-left: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
    margin-left: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock {
    border-radius: 4px !important;
    height: 20px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock {
    border-radius: 4px !important;
    height: 20px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    width: 20px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock:not(.is-locked) {
    background: color-mix(in srgb, transparent 92%, var(--primary)) !important;
    border-color: color-mix(in srgb, var(--border) 62%, var(--primary)) !important;
    color: var(--primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock:not(.is-locked) {
    background: color-mix(in srgb, transparent 92%, var(--primary)) !important;
    border-color: color-mix(in srgb, var(--border) 62%, var(--primary)) !important;
    color: var(--primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock.is-locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock.is-locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock i {
    font-size: 11px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock i {
    font-size: 11px !important;
}

/* Quick Capture final alignment: keep client, sender/receiver and town rows on the same left edge. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin: 0 0 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .acc-field-col {
    flex: 0 1 135px !important;
    max-width: 155px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-client-field {
    flex: 1 1 310px !important;
    min-width: 235px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-ref-field {
    flex: 1.25 1 360px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 5px !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > .col-md-12 {
    flex: 1 1 auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    align-self: flex-start !important;
    flex: 0 0 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    align-self: flex-start !important;
    flex: 0 0 104px !important;
    max-width: 108px !important;
    min-width: 98px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > .col-md-12 {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px 12px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .checkbox {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-height: 17px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    padding-top: 12px !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field-label,
body.ff-app .ff-capture-page:not(.ff-full-capture) .dx-field-value {
    float: none !important;
    width: 100% !important;
}

body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .form-group > label.width100,
body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .control-label,
body.ff-app[data-grid-density="compact"] .ff-capture-page:not(.ff-full-capture) .dx-field-label,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .form-group > label,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .form-group > label.width100,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .control-label,
body.ff-app.ff-grid-density-compact .ff-capture-page:not(.ff-full-capture) .dx-field-label {
    line-height: 12px !important;
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) {
    align-items: center !important;
    display: flex !important;
    gap: 2px !important;
    line-height: 14px !important;
    min-height: 14px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 1px !important;
    margin-top: 0 !important;
    min-height: 14px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 18px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .pull-right {
    margin-left: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required),
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    height: 12px !important;
    line-height: 12px !important;
    min-height: 12px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    font-size: 16px !important;
}

/* Quick Capture sender/receiver controls: keep action checkboxes tight and move the switch beside Receiver. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 {
    flex: 1 1 460px !important;
    min-width: 340px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6 > .row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6:first-child > .row > .col-md-8 {
    flex: 1 1 260px !important;
    min-width: 225px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .col-md-6:first-child > .row > .col-md-4 {
    flex: 0 0 136px !important;
    max-width: 142px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-options {
    gap: 1px !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-options .checkbox {
    display: block !important;
    line-height: 17px !important;
    margin: 0 !important;
    min-height: 17px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-options .checkbox label,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver label {
    line-height: 17px !important;
    min-height: 17px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture #showSender + label:before,
body.ff-app .ff-waybill.ff-quick-capture #retainSender + label:before,
body.ff-app .ff-waybill.ff-quick-capture #showAdditionalDetails + label:before,
body.ff-app .ff-waybill.ff-quick-capture #BillRec + label:before {
    top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture #showSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #retainSender + label:after,
body.ff-app .ff-waybill.ff-quick-capture #showAdditionalDetails + label:after,
body.ff-app .ff-waybill.ff-quick-capture #BillRec + label:after {
    top: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    flex: 0 0 32px !important;
    max-width: 32px !important;
    min-width: 30px !important;
    padding-top: 16px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 210px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 104px !important;
    max-width: 108px !important;
    min-width: 98px !important;
    padding-top: 16px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell .ff-sr-switch {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    transform: none !important;
    width: 30px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    padding-top: 12px !important;
}

/* Quick Capture Other Details: remove the spare vertical padding around the two controls. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details {
    margin-top: 2px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details > legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-row {
    align-items: flex-start !important;
    gap: 2px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col {
    flex: 1 1 330px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col > .row > [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-col .padding-left-20 {
    padding-left: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .form-group > label {
    margin-bottom: 1px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-quick-service-lock-label {
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 18px !important;
    padding-right: 0 !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-quick-service-lock {
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 58px !important;
    top: -8px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-other-details .ff-quick-service-lock i {
    line-height: 1 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-other-details {
    margin-top: 1px !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

/* Quick Capture last-pass field row overrides, placed after older quick rules so these widths win. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin: 0 0 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .acc-field-col {
    flex: 0 1 135px !important;
    max-width: 155px !important;
    min-width: 115px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-client-field {
    flex: 1 1 310px !important;
    min-width: 235px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-row > .ff-quick-ref-field {
    flex: 1.25 1 360px !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 5px !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row::after,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::before,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 > .row > .col-md-12 {
    flex: 1 1 auto !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    align-self: flex-start !important;
    flex: 0 0 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 104px !important;
    max-width: 108px !important;
    min-width: 98px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > .col-md-12 {
    flex: 1 1 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px 12px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .checkbox {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-height: 17px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    padding-top: 12px !important;
}

/* Quick Capture: top-row settings and wider sender/receiver lookups. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row {
    align-items: flex-start !important;
    gap: 2px 10px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-waybill-field {
    flex: 1 1 300px !important;
    max-width: 420px !important;
    min-width: 250px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-courier-field {
    flex: 0.8 1 245px !important;
    max-width: 330px !important;
    min-width: 205px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-capture-date-field {
    flex: 0 0 170px !important;
    max-width: 178px !important;
    min-width: 160px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    align-self: flex-start !important;
    flex: 1.4 1 420px !important;
    min-width: 360px !important;
    padding-top: 18px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    padding-top: 14px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Page history chips: keep the label and close button from squeezing into each other. */
body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page {
    min-width: 82px !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    width: auto !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--waybill > a {
    max-width: 100% !important;
    width: auto !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a > .ff-history-page-label {
    display: block !important;
    flex: 1 1 auto !important;
    line-height: 1.18 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: translateY(-2px) !important;
    white-space: nowrap !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a > .tab-close {
    flex: 0 0 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    margin-left: 0 !important;
    min-width: 20px !important;
    width: 20px !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page > a > .tab-close > i {
    line-height: 1 !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--busy > a {
    background: rgba(59, 120, 246, .14) !important;
    background: color-mix(in srgb, var(--ff-primary) 14%, var(--ff-surface)) !important;
    border-color: var(--ff-primary) !important;
    box-shadow: 0 0 0 3px var(--ff-focus-ring) !important;
    color: var(--ff-text) !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--busy > a > .ff-history-page-spinner {
    color: var(--ff-primary) !important;
    flex: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin-right: 1px !important;
}

body.ff-app .ff-shell .ff-topnav .ff-historybar-wrap #historyTabs .nav.nav-tabs > li.ff-history-page.ff-history-page--busy > a > .tab-close {
    opacity: .45 !important;
    pointer-events: none !important;
}

/* Bulk Capture: compact responsive field rows without leaking into other capture pages. */
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset .form-group,
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset .dx-field {
    margin-bottom: 2px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row,
body.ff-app .ff-bulk-capture .ff-bulk-party-row,
body.ff-app .ff-bulk-capture .ff-bulk-details-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row::before,
body.ff-app .ff-bulk-capture .ff-bulk-header-row::after,
body.ff-app .ff-bulk-capture .ff-bulk-party-row::before,
body.ff-app .ff-bulk-capture .ff-bulk-party-row::after,
body.ff-app .ff-bulk-capture .ff-bulk-details-row::before,
body.ff-app .ff-bulk-capture .ff-bulk-details-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row > [class*="col-"],
body.ff-app .ff-bulk-capture .ff-bulk-party-row > [class*="col-"],
body.ff-app .ff-bulk-capture .ff-bulk-details-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-batch-field {
    flex: 0 0 90px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-client-field {
    flex: 0 1 230px !important;
    max-width: 250px !important;
    min-width: 205px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-route-field,
body.ff-app .ff-bulk-capture .ff-bulk-branch-field,
body.ff-app .ff-bulk-capture .ff-bulk-hub-field {
    flex: 0 1 140px !important;
    max-width: 150px !important;
    min-width: 120px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-date-field {
    flex: 0 0 108px !important;
    min-width: 104px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-date-field label {
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-driver-field {
    flex: 0 1 230px !important;
    max-width: 250px !important;
    min-width: 190px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset label,
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset .dx-field > label {
    display: block !important;
    float: none !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .dx-field > label {
    display: block !important;
    float: none !important;
    line-height: 14px !important;
    margin-bottom: 1px !important;
}

body.ff-app .ff-bulk-capture .dx-field-value {
    float: none !important;
    width: 100% !important;
}

body.ff-app .ff-bulk-capture .ff-dx,
body.ff-app .ff-bulk-capture .dx-widget,
body.ff-app .ff-bulk-capture .dx-texteditor,
body.ff-app .ff-bulk-capture .dx-texteditor-container {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-date-field .input-icon,
body.ff-app .ff-bulk-capture .ff-bulk-date-field .input-icon > .form-control {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-code-field {
    flex: 0 0 112px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-name-field,
body.ff-app .ff-bulk-capture .ff-bulk-origin-field {
    flex: 1 1 300px !important;
    min-width: 240px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-field {
    flex: 1 1 330px !important;
    min-width: 250px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 14px !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 18px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-bulk-capture .ff-bulk-options-row {
    padding-top: 14px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row .valuesonly,
body.ff-app .ff-bulk-capture .ff-bulk-options-row .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-service-field,
body.ff-app .ff-bulk-capture .ff-bulk-store-field,
body.ff-app .ff-bulk-capture .ff-bulk-schedule-field,
body.ff-app .ff-bulk-capture .ff-bulk-ref-field {
    flex: 1 1 180px !important;
    min-width: 150px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-qty-field,
body.ff-app .ff-bulk-capture .ff-bulk-prefix-field,
body.ff-app .ff-bulk-capture .ff-bulk-start-field {
    flex: 0 1 86px !important;
    max-width: 98px !important;
    min-width: 72px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-parcel-grid-responsive {
    overflow-x: auto !important;
    padding-bottom: 2px !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid {
    min-width: 620px !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 72px !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: clamp(180px, 38vw, 520px) !important;
}

body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim,
body.ff-app .ff-bulk-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 88px !important;
}

/* Bulk Capture: let filter controls from the header/party/detail rows share wrapping space. */
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset > legend {
    flex: 0 0 auto !important;
    margin-bottom: 3px !important;
    order: -2 !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset::before {
    content: "" !important;
    flex: 0 0 100% !important;
    height: 0 !important;
    order: -1 !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-header-row,
body.ff-app .ff-bulk-capture .ff-bulk-party-row,
body.ff-app .ff-bulk-capture .ff-bulk-details-row {
    display: contents !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset > .row:not(.ff-bulk-header-row):not(.ff-bulk-party-row):not(.ff-bulk-details-row),
body.ff-app .ff-bulk-capture .ff-bulk-main-fieldset > .container {
    flex: 1 1 100% !important;
    width: 100% !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-driver-field {
    flex: 0 1 230px !important;
    max-width: 250px !important;
    min-width: 190px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-options-row {
    padding-top: 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-bulk-capture .ff-bulk-options-row {
    padding-top: 6px !important;
}

body.ff-app .ff-bulk-capture .ff-bulk-schedule-field .dx-field,
body.ff-app .ff-bulk-capture .ff-bulk-schedule-field .dx-field-value,
body.ff-app .ff-bulk-capture .ff-bulk-schedule-field .ff-dx {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Multi-page view/query grid chrome: compact toolbar, totals, pager, and export row without changing row colours. */
body.ff-app .ff-query-grid-page > .container-fullw,
body.ff-app .ff-query-grid-page > .container-fluid.container-fullw,
body.ff-app .ff-query-grid-page .ff-grid-result-row,
body.ff-app .ff-query-grid-page .ff-grid-result-row > [class*="col-"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-grid-result-row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-grid-toolbar-row,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin-bottom: 2px !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .label,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .label,
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .btn,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .btn {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 22px !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .checkbox,
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row .valuesonly,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .checkbox,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .checkbox-inline,
body.ff-app .ff-query-grid-page .ff-view-waybills-grid-toolbar-row .valuesonly {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel {
    margin-bottom: 0 !important;
    margin-top: -24px !important;
    min-height: 24px !important;
}

body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel .dx-toolbar,
body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: 24px !important;
    min-height: 24px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 2350px) {
    body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel {
        margin-top: 0 !important;
        min-height: 26px !important;
    }

    body.ff-app .ff-query-grid-page :is(#gridContainer, #gridContainer1, #gridContainer2, #gridContainer3, #clientGridContainer, #waybillGridContainer) .dx-datagrid-header-panel .dx-toolbar-after {
        align-items: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }
}

body.ff-app .ff-query-grid-page .dx-datagrid-total-footer,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-datagrid-content,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-scrollable-wrapper,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-scrollable-container,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-scrollable-content,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-datagrid-table {
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-row,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-row > td,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-footer-row,
body.ff-app .ff-query-grid-page .dx-datagrid-total-footer .dx-footer-row > td {
    height: 18px !important;
    line-height: 16px !important;
    min-height: 18px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager,
body.ff-app .ff-query-grid-page .dx-pager {
    align-items: center !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    height: 26px !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    max-height: 26px !important;
    min-height: 20px !important;
    overflow: visible !important;
    padding: 0 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .dx-datagrid-pager,
body.ff-app[data-grid-density="compact"] .ff-query-grid-page .dx-pager,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .dx-datagrid-pager,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .dx-pager {
    height: 22px !important;
    max-height: 22px !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-page-sizes,
body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-pages,
body.ff-app .ff-query-grid-page .dx-pager .dx-page-sizes,
body.ff-app .ff-query-grid-page .dx-pager .dx-pages {
    align-items: center !important;
    display: inline-flex !important;
    height: 22px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-info,
body.ff-app .ff-query-grid-page .dx-pager .dx-info {
    line-height: 20px !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-page,
body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-page-size,
body.ff-app .ff-query-grid-page .dx-datagrid-pager .dx-navigate-button,
body.ff-app .ff-query-grid-page .dx-pager .dx-page,
body.ff-app .ff-query-grid-page .dx-pager .dx-page-size,
body.ff-app .ff-query-grid-page .dx-pager .dx-navigate-button {
    line-height: 18px !important;
    margin: 0 1px !important;
    min-height: 20px !important;
    padding: 0 5px !important;
}

/* Collection full-capture polish from menu sweep. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-id-field {
    flex: 0 0 122px !important;
    max-width: 130px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-date-field {
    flex-basis: 110px !important;
    max-width: 114px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-date-field .input-icon,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-full-basic-docs > .row > .ff-full-collection-date-field input.form-control[uib-datepicker-popup] {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row {
    align-items: flex-end;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-actions-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-convert,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-additional-reschedule {
    flex: 0 0 auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-convert-btn,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-reschedule-btn {
    align-items: center;
    display: inline-flex;
    height: var(--ff-control-h) !important;
    justify-content: center;
    margin-top: 16px !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 10px !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-id-row {
    gap: 4px 10px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-quote-action {
    margin-left: -10px !important;
    margin-right: 10px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-id-row > .ff-additional-linked-wrap {
    flex: 0 1 350px;
    margin-right: 0;
    min-width: 315px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-id-row .ff-additional-linked-row {
    flex-wrap: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-original-collection-field {
    flex: 1 1 145px;
    margin-left: 8px;
    min-width: 135px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-wrap {
    flex: 0 1 285px;
    margin-right: 8px;
    min-width: 245px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-user-branch-row > [class*="col-"] {
    flex: 1 1 115px;
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-meta-wide {
    flex: 1 1 455px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-meta-pair-row > .ff-additional-meta-field {
    flex: 0 1 125px;
    max-width: 145px;
    min-width: 112px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-additional-comment-field {
    flex: 1 1 210px;
    min-width: 180px;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-convert-btn,
body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-reschedule-btn,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-convert-btn,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-reschedule-btn {
    margin-top: 13px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: 0;
    margin-right: 0;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row::after {
    content: none;
    display: none;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row > [class*="col-"] {
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-value-row > .col-md-3 {
    flex: 0 1 160px;
    max-width: 190px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-transport-order-field {
    align-self: flex-end;
    flex: 0 0 138px;
    max-width: 145px;
    min-width: 132px;
    padding-bottom: 7px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-transport-order-field .checkbox {
    margin: 0 !important;
    min-height: 22px;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-check-field {
    align-self: flex-end;
    padding-bottom: 2px !important;
}

body.ff-app[data-grid-density="compact"] .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-check-field .checkbox,
body.ff-app.ff-grid-density-compact .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-check-field .checkbox {
    margin-top: 12px !important;
}

/* Compact dropdown popups: keep list items in the same density as the field that opened them. */
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .dropdown-menu,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-row-inner,
body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-content,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .dropdown-menu,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-row-inner,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-content,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu > li > a,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu label,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu > li > a,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu label,
body.ff-app[data-grid-density="compact"] .dx-overlay-wrapper .dx-list-item,
body.ff-app[data-grid-density="compact"] .dx-overlay-wrapper .dx-list-item-content,
body.ff-app.ff-grid-density-compact .dx-overlay-wrapper .dx-list-item,
body.ff-app.ff-grid-density-compact .dx-overlay-wrapper .dx-list-item-content {
    font-size: var(--ff-control-font-size, 11px) !important;
    line-height: 1.2 !important;
}

body.ff-app[data-grid-density="compact"] .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app.ff-grid-density-compact .ui-select-bootstrap .ui-select-choices-row > a,
body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent > ul.dropdown-menu > li > a,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent > ul.dropdown-menu > li > a {
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app[data-grid-density="compact"] .ff-ms .multiselect-parent.btn-group.dropdown-multiselect button.dropdown-toggle.btn.btn-default,
body.ff-app.ff-grid-density-compact .ff-ms .multiselect-parent.btn-group.dropdown-multiselect button.dropdown-toggle.btn.btn-default {
    font-size: var(--ff-control-font-size, 11px) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Shared view/query filter alignment: keep list captions and Date Period compact. */
body.ff-app .ff-query-grid-page .ff-sr-card .form-group,
body.ff-app .ff-query-grid-page .ff-sr-card .dx-field {
    margin-bottom: 0 !important;
}

body.ff-app .ff-query-grid-page .ff-sr-card .form-group > label,
body.ff-app .ff-query-grid-page .ff-sr-card .dx-field > label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-sr-card .form-group > label,
body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-sr-card .dx-field > label,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-sr-card .form-group > label,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-sr-card .dx-field > label {
    line-height: 12px !important;
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app .ff-query-grid-page .ff-sr-card label .text-muted,
body.ff-app .ff-query-grid-page .ff-sr-card label span.text-muted {
    font-size: 10px !important;
    line-height: 10px !important;
    margin-top: 0 !important;
    max-height: 12px !important;
    padding: 1px 4px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group {
    align-items: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group > .ff-date-period-ignore {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 76px !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    min-height: var(--ff-control-h) !important;
    min-width: 76px !important;
    padding: 0 !important;
    width: 76px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group #ignoreDate + label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: inherit !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 6px 0 25px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group #ignoreDate + label::before {
    height: 14px !important;
    left: 6px !important;
    width: 14px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group #ignoreDate + label::after {
    left: 9px !important;
}

body.ff-app .ff-query-grid-page .ff-date-period-group > .ff-date-period-select {
    flex: 1 1 auto !important;
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 18px 0 8px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group > .ff-date-period-ignore,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group > .ff-date-period-ignore {
    flex-basis: 68px !important;
    min-width: 68px !important;
    width: 68px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group #ignoreDate + label,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group #ignoreDate + label {
    padding-left: 22px !important;
    padding-right: 4px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group #ignoreDate + label::before,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group #ignoreDate + label::before {
    left: 5px !important;
}

body.ff-app[data-grid-density="compact"] .ff-query-grid-page .ff-date-period-group #ignoreDate + label::after,
body.ff-app.ff-grid-density-compact .ff-query-grid-page .ff-date-period-group #ignoreDate + label::after {
    left: 8px !important;
}

/* View Collections filter flow: reuse the compact View Waybills sizing pattern. */
body.ff-app .ff-view-collections .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
}

body.ff-app .ff-view-collections .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-view-collections .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-flow-row {
    display: contents !important;
}

body.ff-app .ff-view-collections .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-view-collections .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-flow-row::before,
body.ff-app .ff-view-collections .ff-sr-card > .ff-filter-flow-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-view-collections .ff-filter-flow-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 115px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 135px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 155px !important;
    max-width: 170px !important;
    min-width: 145px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 340px !important;
    min-width: 285px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 240px !important;
    max-width: 275px !important;
    min-width: 190px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-client {
    flex: 1 1 310px !important;
    max-width: 410px !important;
    min-width: 250px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 115px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-driver {
    flex: 0 1 245px !important;
    max-width: 285px !important;
    min-width: 195px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 220px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 180px !important;
    max-width: 210px !important;
    min-width: 140px !important;
}

body.ff-app .ff-view-collections .ff-filter-schedule {
    flex: 0 1 235px !important;
    max-width: 270px !important;
    min-width: 175px !important;
}

body.ff-app .ff-view-collections .ff-filter-user {
    flex: 0 1 190px !important;
    max-width: 230px !important;
    min-width: 150px !important;
}

body.ff-app .ff-view-collections .ff-filter-bool-wide {
    flex: 0 1 150px !important;
    max-width: 180px !important;
    min-width: 125px !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row > .col-md-12 {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 2px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row .checkbox {
    margin: 0 !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 95px !important;
    max-width: 120px !important;
    min-width: 82px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 265px !important;
    max-width: 320px !important;
    min-width: 205px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 300px !important;
    max-width: 325px !important;
    min-width: 275px !important;
}

body.ff-app[data-grid-density="compact"] .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app.ff-grid-density-compact .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 225px !important;
    max-width: 260px !important;
    min-width: 180px !important;
}

/* Shared query/view filter final alignment.
   Keep list controls on the same baseline as text fields; this is the View Waybills fix generalized for other grid pages. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row {
    align-items: flex-start !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field .form-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field .dx-field {
    align-self: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label.width100,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field .dx-field > label {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 12px !important;
    height: 12px !important;
    line-height: 12px !important;
    margin: 0 0 1px !important;
    max-height: 12px !important;
    min-height: 12px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label .pull-right,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-field label [json-dbl] {
    align-self: center !important;
    display: inline-block !important;
    float: none !important;
    font-size: 9px !important;
    line-height: 10px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 11px !important;
    overflow: hidden !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .ui-select-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .ui-select-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .ui-select-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .dx-widget,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .dx-widget,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .dx-widget {
    box-sizing: border-box !important;
    display: block !important;
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    vertical-align: top !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-inline-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period .ff-date-period-group {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    max-width: 142px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period .ff-date-period-ignore {
    align-self: start !important;
    display: block !important;
    height: 24px !important;
    line-height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 54px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    display: block !important;
    font-size: 11px !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    padding: 0 2px 0 19px !important;
    position: absolute !important;
    top: 0 !important;
    transform: none !important;
    width: 54px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 11px !important;
    left: 4px !important;
    top: 6px !important;
    transform: none !important;
    width: 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    left: 7px !important;
    top: 9px !important;
    transform: rotate(-45deg) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query-grid-page .ff-filter-date-period .ff-date-period-select {
    height: 24px !important;
    line-height: 22px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    vertical-align: top !important;
    width: auto !important;
}

/* Collection capture Other Details: align the first field and keep Trans Order beside Order #. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid {
    flex: 0 1 382px !important;
    max-width: 410px !important;
    min-width: 335px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
    flex: 0 1 302px !important;
    max-width: 325px !important;
    min-width: 284px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid > .row,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid > .row {
    gap: 4px 5px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-order-field {
    flex: 1 1 96px !important;
    max-width: 126px !important;
    min-width: 88px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-transport-order-field {
    align-self: flex-start !important;
    flex: 0 0 94px !important;
    max-width: 98px !important;
    min-width: 88px !important;
    padding-bottom: 0 !important;
    padding-top: 21px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-transport-order-field .checkbox {
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-time-field {
    flex-basis: 62px !important;
    max-width: 62px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid {
    flex-basis: 360px !important;
    min-width: 318px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
    flex-basis: 286px !important;
    min-width: 270px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid .ff-full-transport-order-field {
    padding-top: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-time-field {
    flex-basis: 58px !important;
    max-width: 58px !important;
}

/* Full capture Other Details: keep the row aligned with Service and make room for Book Date after Del Time. */
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-other-grid,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid {
    gap: 4px 5px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-other-grid > .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-other-grid > .ff-full-schedule-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid > .ff-full-driver-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-other-grid > .ff-full-schedule-field {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-schedule-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-schedule-field {
    flex-basis: 162px !important;
    max-width: 182px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-collection-grid,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-collection-grid {
    flex-basis: 276px !important;
    max-width: 304px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-order-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-order-field {
    flex-basis: 94px !important;
    min-width: 86px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-delivery-grid,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
    flex-basis: 426px !important;
    max-width: 446px !important;
    min-width: 410px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-col-time-field,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-close-time-field,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-del-time-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-col-time-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-close-time-field,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-del-time-field {
    flex: 0 0 58px !important;
    max-width: 58px !important;
    min-width: 54px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-col-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-close-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-del-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-col-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-close-time-field input.time.settime,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-del-time-field input.time.settime {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-delivery-grid .ff-full-book-date-field {
    flex: 0 1 108px !important;
    max-width: 116px !important;
    min-width: 104px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-waybill.ff-full-capture .ff-other-details .ff-full-delivery-grid,
    body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-other-details .ff-full-delivery-grid {
        min-width: 0 !important;
    }
}

/* Collection capture Debrief Details: keep fields tight and align the Debrief action with the input row. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details {
    margin-top: 4px !important;
    padding: 8px 10px 7px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details > legend {
    margin-bottom: 5px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row::after,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row::after {
    content: none !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row > [class*="col-"],
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details label {
    margin-bottom: 1px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time {
    flex: 0 1 206px !important;
    max-width: 220px !important;
    min-width: 182px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date {
    flex: 1 1 116px !important;
    max-width: 130px !important;
    min-width: 108px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-time {
    flex: 0 0 70px !important;
    max-width: 72px !important;
    min-width: 66px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-person {
    flex: 0 1 150px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-comment {
    flex: 1 1 210px !important;
    max-width: 310px !important;
    min-width: 165px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-note {
    flex: 0 1 170px !important;
    max-width: 205px !important;
    min-width: 140px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action {
    align-self: flex-start !important;
    flex: 0 0 78px !important;
    max-width: 82px !important;
    min-width: 74px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-btn {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    margin-top: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 10px !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details {
    margin-top: 2px !important;
    padding: 6px 8px 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-details > legend {
    margin-bottom: 3px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time-row {
    gap: 3px 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time {
    flex-basis: 190px !important;
    max-width: 202px !important;
    min-width: 176px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date {
    flex-basis: 110px !important;
    max-width: 118px !important;
    min-width: 104px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-time {
    flex-basis: 62px !important;
    max-width: 64px !important;
    min-width: 60px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-person {
    flex-basis: 132px !important;
    max-width: 160px !important;
    min-width: 112px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-comment {
    flex-basis: 185px !important;
    max-width: 280px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-note {
    flex-basis: 150px !important;
    max-width: 185px !important;
    min-width: 130px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action {
    flex-basis: 72px !important;
    max-width: 76px !important;
    min-width: 70px !important;
    padding-top: 12px !important;
}

/* Collection debrief: compact date field and paired Debrief/Clear actions. */
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row::before,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row::after,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row::before,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row::after {
    content: none !important;
}

body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-row > [class*="col-"],
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time {
    flex: 0 1 184px !important;
    max-width: 196px !important;
    min-width: 170px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date {
    flex: 0 1 104px !important;
    max-width: 112px !important;
    min-width: 98px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-time,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-time {
    flex: 0 0 66px !important;
    max-width: 68px !important;
    min-width: 62px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 150px !important;
    gap: 6px !important;
    max-width: 156px !important;
    min-width: 144px !important;
    padding-top: 15px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action .ff-col-debrief-btn,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action .ff-col-debrief-btn {
    flex: 1 1 0 !important;
    gap: 5px !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action .ff-col-debrief-clear-btn,
body.ff-app .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action .ff-col-debrief-clear-btn {
    flex-basis: 68px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date-time,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date-time {
    flex-basis: 170px !important;
    max-width: 182px !important;
    min-width: 162px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-date {
    flex-basis: 98px !important;
    max-width: 104px !important;
    min-width: 94px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--collection .ff-additional-details .ff-col-debrief-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture.ff-capture-page .ff-additional-details .ff-col-debrief-action {
    flex-basis: 138px !important;
    max-width: 144px !important;
    min-width: 132px !important;
    padding-top: 12px !important;
}

/* Capture required markers need optical baseline alignment with the label text. */
body.ff-app .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before,
body.ff-app .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    transform: translateY(2px) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture label:has(.symbol.required) .symbol.required::before,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-capture-page:not(.ff-full-capture) label:has(.symbol.required) .symbol.required::before {
    transform: translateY(1px) !important;
}

/* View Collections final filter widths: keep the shared top-alignment fix without shrinking list fields. */
body.ff-app .ff-view-collections .ff-sr-card {
    gap: 3px 8px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 135px !important;
    max-width: 165px !important;
    min-width: 105px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 155px !important;
    max-width: 180px !important;
    min-width: 135px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 150px !important;
    max-width: 160px !important;
    min-width: 142px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 315px !important;
    max-width: 340px !important;
    min-width: 285px !important;
}

body.ff-app .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 285px !important;
    max-width: 340px !important;
    min-width: 230px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-client {
    flex: 1.4 1 360px !important;
    max-width: 520px !important;
    min-width: 285px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 145px !important;
    max-width: 175px !important;
    min-width: 115px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-driver {
    flex: 1 1 285px !important;
    max-width: 360px !important;
    min-width: 225px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle {
    flex: 0 1 245px !important;
    max-width: 290px !important;
    min-width: 195px !important;
}

body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-view-collections .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 205px !important;
    max-width: 245px !important;
    min-width: 155px !important;
}

body.ff-app .ff-view-collections .ff-filter-schedule {
    flex: 0 1 270px !important;
    max-width: 330px !important;
    min-width: 210px !important;
}

body.ff-app .ff-view-collections .ff-filter-user {
    flex: 0 1 225px !important;
    max-width: 275px !important;
    min-width: 175px !important;
}

body.ff-app .ff-view-collections .ff-filter-bool-wide {
    flex: 0 1 132px !important;
    max-width: 150px !important;
    min-width: 112px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 118px !important;
    max-width: 150px !important;
    min-width: 95px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-type {
    flex-basis: 145px !important;
    max-width: 170px !important;
    min-width: 130px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 144px !important;
    max-width: 148px !important;
    min-width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-date-range {
    flex-basis: 300px !important;
    max-width: 325px !important;
    min-width: 278px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-waybill-filter-grid > .ff-filter-branch {
    flex-basis: 265px !important;
    max-width: 320px !important;
    min-width: 220px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-client {
    flex-basis: 340px !important;
    max-width: 500px !important;
    min-width: 275px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-agent,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver {
    flex-basis: 270px !important;
    max-width: 340px !important;
    min-width: 220px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-schedule {
    flex-basis: 240px !important;
    max-width: 300px !important;
    min-width: 190px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-user {
    flex-basis: 210px !important;
    max-width: 260px !important;
    min-width: 165px !important;
}

/* Shared query/view list control guard: keep useful field widths all the way through nested list widgets. */
body.ff-app .ff-query-grid-page .ff-filter-field > .form-group,
body.ff-app .ff-query-grid-page .ff-filter-field > .dx-field {
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ff-control,
body.ff-app .ff-query-grid-page .ff-filter-field .ff-dx,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-container,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-query-grid-page .ff-filter-field .select2-container,
body.ff-app .ff-query-grid-page .ff-filter-field .select2-choice,
body.ff-app .ff-query-grid-page .ff-filter-field .dx-widget,
body.ff-app .ff-query-grid-page .ff-filter-field .dx-texteditor,
body.ff-app .ff-query-grid-page .ff-filter-field .dx-texteditor-container {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-placeholder {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-view-collections .ff-filter-field .ff-dx {
    margin-top: -1px !important;
}

body.ff-app .ff-view-collections .ff-filter-field .ui-select-bootstrap .ui-select-placeholder {
    flex: 0 0 auto !important;
    min-width: 52px !important;
}

body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-placeholder.ng-hide,
body.ff-app .ff-query-grid-page .ff-filter-field .ui-select-bootstrap .ui-select-placeholder[aria-hidden="true"] {
    display: none !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .ff-dx {
    overflow: visible !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-selectbox,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-selectbox,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-texteditor,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-texteditor,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-texteditor-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-texteditor-container {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-texteditor-input,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-texteditor-input {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder {
    line-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-dropdowneditor-button,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-dropdowneditor-button {
    height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap:not(.open) .ui-select-search {
    border: 0 !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    justify-content: flex-start !important;
    padding-left: 8px !important;
    padding-right: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap .ui-select-match-text,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-type .ui-select-bootstrap .ui-select-match-text span {
    display: block !important;
    flex: 1 1 auto !important;
    line-height: calc(var(--ff-control-h) - 4px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder {
    align-items: center !important;
    display: flex !important;
    height: 100% !important;
    line-height: 1.2 !important;
    top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder::before,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder::before {
    display: block !important;
    line-height: 1.2 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-driver .dx-placeholder::after,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-client-row > .ff-filter-vehicle .dx-placeholder::after {
    display: none !important;
}

/* View Images filter: keep date fields from spilling into Branch and align staff selectors. */
body.ff-app .ff-imaging-list .ff-image-filter-top-row,
body.ff-app .ff-imaging-list .ff-image-date-row,
body.ff-app .ff-imaging-list .ff-image-party-row,
body.ff-app .ff-imaging-list .ff-image-reference-row,
body.ff-app .ff-imaging-list .ff-image-user-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-imaging-list .ff-image-filter-top-row::before,
body.ff-app .ff-imaging-list .ff-image-filter-top-row::after,
body.ff-app .ff-imaging-list .ff-image-date-row::before,
body.ff-app .ff-imaging-list .ff-image-date-row::after,
body.ff-app .ff-imaging-list .ff-image-party-row::before,
body.ff-app .ff-imaging-list .ff-image-party-row::after,
body.ff-app .ff-imaging-list .ff-image-reference-row::before,
body.ff-app .ff-imaging-list .ff-image-reference-row::after,
body.ff-app .ff-imaging-list .ff-image-user-row::before,
body.ff-app .ff-imaging-list .ff-image-user-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-imaging-list .ff-image-filter-top-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-date-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-party-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-reference-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-user-row > [class*="col-"],
body.ff-app .ff-imaging-list .ff-image-staff-fields > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-imaging-list .ff-image-document-field {
    flex: 0 1 210px !important;
    max-width: 255px !important;
    min-width: 155px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-block {
    flex: 0 1 520px !important;
    max-width: 560px !important;
    min-width: 410px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period {
    flex: 0 0 158px !important;
    max-width: 158px !important;
    min-width: 148px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range {
    flex: 1 1 335px !important;
    max-width: 390px !important;
    min-width: 270px !important;
}

body.ff-app .ff-imaging-list .ff-image-branch-field {
    flex: 1 1 245px !important;
    max-width: 340px !important;
    min-width: 190px !important;
}

body.ff-app .ff-imaging-list .ff-image-client-field {
    flex: 1 1 360px !important;
    max-width: 500px !important;
    min-width: 270px !important;
}

body.ff-app .ff-imaging-list .ff-image-supplier-field {
    flex: 0 1 270px !important;
    max-width: 340px !important;
    min-width: 220px !important;
}

body.ff-app .ff-imaging-list .ff-image-hub-field {
    flex: 0 1 230px !important;
    max-width: 285px !important;
    min-width: 185px !important;
}

body.ff-app .ff-imaging-list .ff-image-reference-row > .ff-filter-field,
body.ff-app .ff-imaging-list .ff-image-user-row > .ff-filter-field {
    flex: 0 1 175px !important;
    max-width: 220px !important;
    min-width: 132px !important;
}

body.ff-app .ff-imaging-list .ff-image-reference-row > .ff-image-courier-field {
    flex: 0 1 145px !important;
    max-width: 170px !important;
    min-width: 118px !important;
}

body.ff-app .ff-imaging-list .ff-image-courier-field textarea.form-control {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 6px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: auto !important;
    resize: vertical !important;
    white-space: nowrap !important;
}

body.ff-app .ff-imaging-list .ff-image-staff-fields {
    display: contents !important;
}

body.ff-app .ff-imaging-list .ff-image-user-field,
body.ff-app .ff-imaging-list .ff-image-webuser-field {
    flex: 0 1 190px !important;
    max-width: 235px !important;
    min-width: 150px !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-inline {
    align-self: flex-start !important;
    display: flex !important;
    flex: 1 1 290px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: 100% !important;
    min-width: 250px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 16px !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-inline .ff-image-filter-actions {
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-row {
    display: flex !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-imaging-list .ff-image-actions-row::before,
body.ff-app .ff-imaging-list .ff-image-actions-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-imaging-list .ff-image-filter-actions {
    align-items: center !important;
    display: flex !important;
    gap: 6px 12px !important;
    justify-content: flex-end !important;
    margin-bottom: 4px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-keep-filter {
    float: none !important;
    margin: 0 !important;
    order: 1 !important;
}

body.ff-app .ff-imaging-list .ff-image-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h, 30px) !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: var(--ff-control-h, 30px) !important;
    order: 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h, 30px) !important;
}

body.ff-app .ff-imaging-list .ff-image-clear-filter {
    float: none !important;
    margin: 0 !important;
    min-width: 92px !important;
    order: 2 !important;
}

body.ff-app .ff-imaging-list .ff-image-search {
    float: none !important;
    margin: 0 !important;
    order: 3 !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-group {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-width: 158px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    width: 158px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-ignore {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    width: 58px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-ignore-label {
    display: block !important;
    font-size: 11px !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    margin: 0 !important;
    padding-left: 18px !important;
    position: relative !important;
    white-space: nowrap !important;
}

body.ff-app .ff-imaging-list .ff-image-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .range-picker {
    align-items: stretch !important;
    display: flex !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .start-date,
body.ff-app .ff-imaging-list .ff-image-date-range .end-date {
    flex: 1 1 0 !important;
    min-width: 96px !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .input-icon,
body.ff-app .ff-imaging-list .ff-image-date-range .form-control {
    width: 100% !important;
}

body.ff-app .ff-imaging-list .ff-image-date-range .range-picker > .input-group-addon {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 28px !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-document-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-document-field {
    flex-basis: 175px !important;
    min-width: 135px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-block,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-block {
    flex-basis: 412px !important;
    max-width: 445px !important;
    min-width: 330px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex-basis: 112px !important;
    max-width: 112px !important;
    min-width: 108px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    max-width: 112px !important;
    width: 112px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    width: 42px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore-label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    font-size: 9px !important;
    line-height: 1.1 !important;
    padding-left: 12px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-select,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-range,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-range {
    flex-basis: 285px !important;
    max-width: 335px !important;
    min-width: 245px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-branch-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-branch-field {
    flex-basis: 215px !important;
    max-width: 285px !important;
    min-width: 170px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-user-field,
body.ff-app .ff-imaging-list.ff-view-compact .ff-image-webuser-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-user-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-webuser-field {
    flex-basis: 175px !important;
    max-width: 220px !important;
    min-width: 142px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-actions-inline,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-actions-inline {
    min-width: 230px !important;
    padding-top: 13px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-reference-row > .ff-image-courier-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-reference-row > .ff-image-courier-field {
    flex-basis: 132px !important;
    max-width: 150px !important;
    min-width: 110px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-block {
    flex-basis: 430px !important;
    max-width: 465px !important;
    min-width: 330px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex-basis: 124px !important;
    max-width: 124px !important;
    min-width: 118px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    max-width: 124px !important;
    width: 124px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    width: 48px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    font-size: 10px !important;
    padding-left: 14px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-imaging-list .ff-image-date-block,
    body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-block,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-block,
    body.ff-app .ff-imaging-list .ff-image-date-range,
    body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-range,
    body.ff-app .ff-imaging-list .ff-image-branch-field,
    body.ff-app .ff-imaging-list.ff-view-compact .ff-image-branch-field,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-branch-field {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Debriefing: keep Trip Expenses compact and align SAVE with the filter SEARCH button. */
body.ff-app .ff-debriefing .ff-trip-expenses {
    margin-bottom: 4px !important;
    padding: 8px 12px 10px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses > legend {
    margin-bottom: 3px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-row {
    align-items: flex-end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-row::before,
body.ff-app .ff-debriefing .ff-trip-expenses-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-field {
    flex: 1 1 138px !important;
    max-width: 175px !important;
    min-width: 120px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-action {
    align-self: flex-end !important;
    flex: 0 0 120px !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses .form-group {
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses .form-control,
body.ff-app .ff-debriefing .ff-trip-expenses-save {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debriefing .ff-trip-expenses-save {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: 120px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

/* View Quotes filter sizing: trim small fields and keep list controls on the same baseline. */
body.ff-app .ff-view-quotes .ff-waybill-filter-grid {
    align-items: start !important;
    grid-template-columns:
        minmax(108px, 112px)
        minmax(165px, 190px)
        minmax(146px, 158px)
        minmax(248px, 260px)
        minmax(180px, 220px) !important;
}

body.ff-app .ff-view-quotes .ff-waybill-filter-grid > .ff-filter-id,
body.ff-app .ff-view-quotes .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 112px !important;
    max-width: 112px !important;
    min-width: 108px !important;
}

body.ff-app .ff-view-quotes .ff-waybill-filter-grid > .ff-filter-date-period {
    max-width: 158px !important;
    min-width: 146px !important;
}

body.ff-app .ff-view-quotes .ff-filter-client-row > .ff-filter-client {
    flex: 1.3 1 312px !important;
    max-width: 430px !important;
    min-width: 270px !important;
}

body.ff-app .ff-view-quotes .ff-filter-client-row > .ff-filter-agent {
    flex: 1.15 1 273px !important;
    max-width: 355px !important;
    min-width: 235px !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid {
    gap: 6px 10px !important;
}

body.ff-app .ff-view-quotes .ff-filter-quote-row > .ff-filter-field {
    align-self: flex-start !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-quote-row > .ff-filter-field > .form-group {
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row label,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row label.width100,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid label.width100 {
    align-items: flex-start !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row label.width100 > .pull-right.text-muted,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid label.width100 > .pull-right.text-muted {
    float: none !important;
    flex: 0 1 auto !important;
    line-height: 16px !important;
    margin-left: 6px !important;
    max-width: 50% !important;
    overflow: hidden !important;
    position: static !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ff-control,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ff-control,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-container,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-container,
body.ff-app .ff-view-quotes .ff-filter-flow-row .form-control,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .form-control,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    line-height: 1.2 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap .ui-select-search,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-search {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1.2 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-quotes .ff-filter-flow-row .ui-select-bootstrap .ui-select-placeholder,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-view-quotes .ff-waybill-filter-grid .ui-select-bootstrap .ui-select-placeholder {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* View Collections update panel: tighten the handoff to the grid toolbar and give key fields enough room. */
body.ff-app .ff-view-collections .ff-collection-update {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
}

body.ff-app .ff-view-collections .ff-collection-update + .ff-grid-toolbar-row {
    margin-top: 0 !important;
}

body.ff-app .ff-view-collections .ff-collection-update-actions .ff-collection-field-clear {
    margin-left: auto !important;
}

body.ff-app .ff-view-collections .ff-collection-update-actions .ff-collection-field-button {
    margin-left: 0 !important;
}

body.ff-app .ff-view-collections .ff-collection-body > .row:has(.accordion-no-display) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-view-collections .ff-collection-body > .row:has(.accordion-no-display) + .ff-collection-update {
    margin-top: 2px !important;
}

body.ff-app .ff-view-collections .ff-grid-toolbar-row + .ff-collection-update,
body.ff-app .ff-view-collections .accordion-no-display + .ff-collection-update {
    margin-top: 2px !important;
}

@media (min-width: 641px) {
    body.ff-app .ff-view-collections .ff-collection-update .ff-collection-field-driver {
        flex: 0 1 210px !important;
        max-width: 235px !important;
        min-width: 178px !important;
    }

    body.ff-app .ff-view-collections .ff-collection-update .ff-collection-field-date {
        flex: 0 0 126px !important;
        max-width: 132px !important;
        min-width: 120px !important;
    }
}

/* View Collections compact edit/filter polish: keep the optional update panel usable in compact mode. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update {
    margin-bottom: 1px !important;
    margin-top: 1px !important;
    padding: 5px 10px 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update legend {
    font-size: 14px !important;
    line-height: 16px !important;
    margin-bottom: 3px !important;
    padding: 0 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update-fields {
    align-items: flex-end !important;
    gap: 4px 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update-actions {
    margin-top: 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field {
    gap: 1px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update label {
    font-size: 12px !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    min-height: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .form-control,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .input-icon,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-dx,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-selectbox,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-texteditor,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-texteditor-container,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-texteditor-input,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .dx-dropdowneditor-button,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-ui.ui-select-bootstrap {
    height: 28px !important;
    line-height: 26px !important;
    max-height: 28px !important;
    min-height: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    align-items: center !important;
    display: flex !important;
    height: 28px !important;
    line-height: 26px !important;
    max-height: 28px !important;
    min-height: 28px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-driver,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-vehicle {
    flex: 1 1 178px !important;
    max-width: 220px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-cell {
    flex: 0 1 122px !important;
    max-width: 140px !important;
    min-width: 108px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-date {
    flex: 0 1 124px !important;
    max-width: 132px !important;
    min-width: 118px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-time {
    flex: 0 1 76px !important;
    max-width: 82px !important;
    min-width: 68px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-note {
    flex: 1 1 250px !important;
    min-width: 210px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-comment {
    flex: 1.5 1 285px !important;
    min-width: 230px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-clear {
    flex: 0 0 140px !important;
    min-height: 28px !important;
    padding-bottom: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-clear .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    min-height: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-button {
    flex: 0 1 150px !important;
    margin-left: 0 !important;
    max-width: 170px !important;
    min-width: 132px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-btn {
    height: 28px !important;
    line-height: 26px !important;
    min-height: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-range .range-picker .input-icon,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-date .input-icon {
    position: relative !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-filter-date-range .range-picker .input-icon > i.ti-calendar,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-collections .ff-collection-update .ff-collection-field-date .input-icon > i.ti-calendar {
    line-height: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* View Collections grid header: give the select-all checkbox enough clearance in the column-name row. */
body.ff-app .ff-view-collections #gridContainer .dx-datagrid-headers .dx-header-row > td {
    height: 28px !important;
    min-height: 28px !important;
    overflow: visible !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}

body.ff-app .ff-view-collections #gridContainer .dx-datagrid-headers .dx-checkbox,
body.ff-app .ff-view-collections #gridContainer .dx-datagrid-headers .dx-checkbox-container {
    height: 18px !important;
    min-height: 18px !important;
}

/* Safety net for view/query pages: don't show a toolbar if its grid row is still hidden. */
body.ff-app .ff-query-grid-page .ff-grid-toolbar-row:has(+ .ff-grid-result-row.ng-hide) {
    display: none !important;
}

/* Waybill Stages: carry over accepted full-capture linked-button and compact field rhythm. */
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    flex: 0 0 34px !important;
    margin-left: -8px !important;
    max-width: 34px !important;
    padding-top: 18px !important;
    width: 34px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .btn,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-invoice-row {
    gap: 4px 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-invoice-row > .padding-left-0:not(.ff-linked-menu-action) {
    margin-left: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details {
    margin-bottom: 4px !important;
    padding-bottom: 6px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details > .row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .form-group {
    margin-bottom: 1px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .radio.clip-radio,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .checkbox.clip-check {
    margin-bottom: 1px !important;
    margin-top: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .ff-ms {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-basic-details .ff-stages-origin-field {
    padding-left: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .form-group > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .form-group > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field label,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input.form-control {
    margin-left: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field [mapbox-geocoder],
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .mapboxgl-ctrl-geocoder.mapboxgl-ctrl,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input.form-control {
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav {
    --ff-stages-nav-button-w: 120px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-bottom-wb-label {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex !important;
    justify-content: center;
    max-width: var(--ff-stages-nav-button-w);
    min-width: var(--ff-stages-nav-button-w);
    overflow: hidden;
    text-align: center;
    width: var(--ff-stages-nav-button-w);
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-bottom-wb-label strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav::before,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
    box-sizing: border-box !important;
    display: flex !important;
    float: none !important;
    justify-content: center !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > td {
    vertical-align: middle !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > td > div {
    margin: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow input.form-control,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-container,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-match {
    display: block !important;
    height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
}

/* Waybill Stages final polish: mirror the accepted full-capture pairing without changing full capture itself. */
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-waybill {
    flex-basis: 392px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-id-row {
    gap: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-date {
    flex-basis: 136px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-date label.width100 {
    gap: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-capture-date label.width100 .pull-right {
    margin-left: auto !important;
}

/* Quote capture: let Quote Date and Quote # wrap independently instead of as one grouped block. */
body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-capture-waybill,
body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-id-row {
    display: contents !important;
}

body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-capture-date {
    flex: 0 0 136px !important;
    max-width: 142px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill .ff-stages-capture.ff-stages-capture--quote .ff-stages-waybill-no {
    flex: 0 1 175px !important;
    max-width: 210px !important;
    min-width: 150px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    margin-left: -12px !important;
    padding-top: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    padding-top: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .btn-group,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .btn-group,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle,
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill .ff-stages-capture .ff-stages-courier-action .dropdown-toggle {
    height: calc(var(--ff-control-h) + 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) + 2px) !important;
    min-height: calc(var(--ff-control-h) + 2px) !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 16px !important;
}

body.ff-app:not([data-grid-density="compact"]) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action .dropdown-toggle {
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: calc(var(--ff-control-h) - 2px) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-wrap .ff-additional-date-field {
    margin-left: 10px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-meta-pair-row {
    gap: 4px 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 11px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow > td {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap:not(.open):not(.ff-capture-ui-select-stable) .ui-select-search {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap > .ui-select-match > .btn {
    align-items: center !important;
    display: flex !important;
    height: 24px !important;
    line-height: 18px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    overflow: hidden !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap .ui-select-match-text {
    line-height: 18px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid > tbody > tr.ff-parcel-grid-entryrow .ui-select-bootstrap .caret {
    align-self: center !important;
    margin-top: 0 !important;
}

/* Waybill Stages final alignment: linked buttons, parcel grid, rate footer, and address lookup stack. */
body.ff-app .ff-stages-top-ref-row {
    align-items: flex-start !important;
    clear: both !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 0 -14px 4px !important;
    min-height: 22px !important;
    overflow: visible !important;
    pointer-events: none !important;
    position: relative !important;
    z-index: 30 !important;
}

body.ff-app .ff-stages-top-ref-row > .ff-stages-top-ref {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 4px 8px !important;
    pointer-events: auto !important;
    position: relative !important;
    white-space: nowrap !important;
    z-index: 31 !important;
}

body.ff-app #wizard.ff-stages-capture {
    clear: both !important;
    margin-top: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row {
    gap: 6px 10px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-date-time {
    flex: 0 0 208px !important;
    min-width: 208px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-date-time-row {
    gap: 6px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-date-time-row > .ff-pod-date {
    flex: 0 0 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-date-time-row > .ff-pod-time {
    flex: 0 0 82px !important;
    min-width: 82px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-person {
    flex: 0 1 135px !important;
    min-width: 128px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-notes {
    flex: 1 1 168px !important;
    min-width: 155px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-note-type {
    flex: 1 1 220px !important;
    min-width: 190px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-row > .ff-pod-action {
    align-items: flex-end !important;
    display: inline-flex !important;
    flex: 0 0 176px !important;
    gap: 6px !important;
    min-width: 176px !important;
    padding-top: 18px !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-action .btn,
body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-action > .btn {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-clear-action {
    gap: 5px !important;
    min-width: 72px !important;
    order: 1 !important;
}

body.ff-app .ff-waybill #wizard.ff-stages-capture .ff-pod-save-action {
    min-width: 84px !important;
    order: 2 !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-client-row {
    column-gap: 16px !important;
    row-gap: 8px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-client-name {
    flex: 0 1 clamp(320px, 35vw, 720px) !important;
    max-width: clamp(320px, 35vw, 720px) !important;
    min-width: 320px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-waybill {
    flex: 0 0 430px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-date {
    flex: 0 0 166px !important;
    max-width: 174px !important;
    min-width: 158px !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-date label.width100 {
    justify-content: flex-start !important;
}

body.ff-app .ff-waybill .ff-stages-capture:not(.ff-stages-capture--quote) .ff-stages-capture-date label.width100 .pull-right {
    margin-left: 8px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    padding-top: 17px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-stages-client-row > .ff-stages-courier-action {
    padding-top: 13px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 13px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid {
    min-width: 960px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-pieces {
    width: 64px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-qty {
    width: 54px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-code {
    width: 96px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-desc {
    width: clamp(168px, 18vw, 280px) !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-dim {
    width: 84px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-volume,
body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-mass {
    width: 88px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-value {
    width: 98px !important;
}

body.ff-app .ff-waybill .ff-stages-capture table.custom-dx-table.ff-parcel-grid col.ff-parcel-col-action {
    width: 38px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 6px 0 4px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .back-step {
    flex: 0 0 136px !important;
    order: 1 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
    align-items: center !important;
    display: inline-flex !important;
    flex: 1 1 260px !important;
    height: 32px !important;
    justify-content: center !important;
    max-width: none !important;
    min-height: 32px !important;
    min-width: 220px !important;
    order: 2 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .ff-stages-bottom-wb-label--plain {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text) !important;
    display: block !important;
    float: none !important;
    height: auto !important;
    line-height: 1.2 !important;
    margin: 4px 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-step-nav > .ff-stages-bottom-wb-label--plain strong {
    color: inherit !important;
    display: inline !important;
    font-weight: 700 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn:not(.back-step):not(.next-step) {
    flex: 0 0 136px !important;
    order: 3 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .next-step {
    flex: 0 0 136px !important;
    order: 4 !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field label {
    align-items: center !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field label .pull-right {
    float: none !important;
    margin-left: auto !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .form-group > .row:has([mapbox-geocoder]) {
    margin: 0 0 4px !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field [mapbox-geocoder] {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field .mapboxgl-ctrl-geocoder--input,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input#SAddr1,
body.ff-app .ff-waybill .ff-stages-capture .ff-stages-address-line1-field input#RAddr1 {
    border-radius: var(--radius-sm) !important;
    margin-left: 0 !important;
    width: 100% !important;
}

@media (max-width: 720px) {
    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .back-step,
    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .btn:not(.back-step):not(.next-step),
    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .next-step {
        flex: 1 1 calc(50% - 4px) !important;
    }

    body.ff-app .ff-waybill .ff-stages-capture .ff-stages-rate-nav > .ff-stages-bottom-wb-label {
        flex: 1 1 100% !important;
        order: 2 !important;
    }
}

/* Waybill Stages service-rate selection: plain table, kept scoped to avoid DevExtreme grid cost. */
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table {
    background: var(--surface) !important;
    color: var(--text) !important;
    table-layout: fixed !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th {
    background: var(--surface-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td {
    border-color: var(--border) !important;
    color: var(--text) !important;
    overflow: hidden !important;
    padding: 7px 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(1),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(1) {
    width: 20% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(2),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(2) {
    width: 5% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(3),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(3) {
    width: 17% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(4),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(4) {
    width: 7% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(5),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(5) {
    width: 6% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(6),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(6),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(7),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(7),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(8),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(8) {
    width: 7% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(9),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(9) {
    width: 8% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(10),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(10) {
    width: 5% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > thead > tr > th:nth-child(11),
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table > tbody > tr > td:nth-child(11) {
    width: 11% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-table.table-hover > tbody > tr.show-pointer:not(.row-selected):hover > td {
    background-color: color-mix(in srgb, var(--primary) 18%, var(--surface)) !important;
}

body.ff-app[data-theme="dark"] .ff-waybill .ff-stages-capture .ff-service-rate-table.table-hover > tbody > tr.show-pointer:not(.row-selected):hover > td {
    background-color: color-mix(in srgb, var(--primary) 28%, var(--surface-2)) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav {
    --ff-service-rate-action-w: 136px;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav > .btn {
    flex: 0 0 var(--ff-service-rate-action-w) !important;
    max-width: var(--ff-service-rate-action-w) !important;
    min-width: var(--ff-service-rate-action-w) !important;
    width: var(--ff-service-rate-action-w) !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav--next,
body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav--actions {
    justify-content: flex-end !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-service-rate-nav--actions > .back-step {
    margin-right: auto !important;
}

/* Shared capture polish: keep parcel-grid dropdowns and placeholders aligned across capture pages. */
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td {
    vertical-align: middle !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td > div {
    margin: 0 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-container,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-match {
    display: block !important;
    height: 24px !important;
    margin: 0 !important;
    max-height: 24px !important;
    min-height: 24px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap > .ui-select-match > .btn {
    min-width: 0 !important;
    overflow: hidden !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-match-text span {
    max-width: 100% !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap .ui-select-placeholder {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    min-width: 72px !important;
    width: auto !important;
}

/* Waybill parcel grids: keep parcel description/code dropdowns above totals rows. */
body.ff-app .ff-waybill .ff-parcel-fieldset:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-fieldset .container:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-fieldset .row:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-fieldset .table-wrapper:has(table.ff-parcel-grid .ui-select-bootstrap.open),
body.ff-app .ff-waybill .ff-parcel-grid-responsive:has(table.ff-parcel-grid .ui-select-bootstrap.open) {
    overflow: visible !important;
    position: relative !important;
    z-index: 2200 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid:has(.ui-select-bootstrap.open) {
    overflow: visible !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid > tbody > tr > td:has(.ui-select-bootstrap.open) {
    overflow: visible !important;
    position: relative !important;
    z-index: 2300 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap.open,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap.open .ui-select-choices,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid .ui-select-bootstrap.open .ui-select-dropdown {
    z-index: 2400 !important;
}

body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid:has(.ui-select-bootstrap.open) > tfoot > tr > th,
body.ff-app .ff-waybill table.custom-dx-table.ff-parcel-grid:has(.ui-select-bootstrap.open) > tfoot > tr > td {
    z-index: 0 !important;
}

/* Waybill Stages: align Additional Details manifest controls. */
body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list {
    flex: 0 0 15rem !important;
    margin-left: 10px !important;
    max-width: 15rem !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group {
    max-width: 15rem !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group > input.form-control {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group > .input-group-btn {
    vertical-align: top !important;
    width: 34px !important;
}

body.ff-app .ff-waybill .ff-stages-capture .ff-additional-details .ff-additional-manifest-list .input-group > .input-group-btn > .dropdown-toggle {
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin-left: -1px !important;
    min-height: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 34px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 16px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill .ff-stages-capture .ff-additional-details .ff-linked-menu-action {
    padding-top: 12px !important;
}

/* Quick Capture final sender/receiver controls: single checkbox row and wider lookup lists. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row > .col-md-12 {
    flex: 1 1 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 14px !important;
    justify-content: flex-start !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-checkbox-row .ff-quick-sender-options .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row {
    gap: 2px 10px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 410px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    flex: 0 0 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 260px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver-cell {
    flex: 0 0 56px !important;
    max-width: 58px !important;
    min-width: 54px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-bill-receiver label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 21px !important;
}

/* Quick Capture final winning override: sender/receiver lists should match Origin/Destination width. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 330px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Quick Capture final top/party layout: keep option checkboxes tight and give sender/receiver lists full half-row width. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    align-self: flex-start !important;
    flex: 1 1 100% !important;
    margin-top: -2px !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    margin-top: -3px !important;
    padding-top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 16px !important;
    justify-content: flex-start !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row .ff-quick-sender-options .checkbox label {
    line-height: 18px !important;
    min-height: 18px !important;
    padding-left: 22px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row {
    gap: 2px 8px !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-sender-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-receiver-row > .ff-quick-receiver-name-wrap,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-row > .col-md-6 {
    flex: 1 1 calc(50% - 4px) !important;
    max-width: none !important;
    min-width: 330px !important;
    width: calc(50% - 4px) !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-row,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-row {
    flex: 1 1 100% !important;
    position: relative !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    flex: 0 0 0 !important;
    left: -21px !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding-top: 16px !important;
    position: absolute !important;
    top: 0 !important;
    width: 0 !important;
    z-index: 2 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-receiver-switch-cell {
    padding-top: 12px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-sender-name-cell,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-receiver-name-cell {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* Quick Capture: keep top option checkboxes clear of the waybill field border. */
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row {
    row-gap: 5px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    margin-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row {
    row-gap: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-quick-capture .ff-quick-route-party-row > .ff-quick-top-options {
    margin-top: 0 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
    padding-right: 45px !important;
}

body.ff-app .ff-waybill .ff-client-lock-label,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-label,
body.ff-app .ff-waybill .ff-stages-capture .ff-full-service-lock-label {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-label-actions,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-label-actions,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-label-actions {
    align-items: center !important;
    display: inline-flex !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    min-width: 67px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-hub-code,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-hub-code,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-hub-code {
    display: inline-block !important;
    flex: 0 0 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock {
    border-radius: 4px !important;
    flex: 0 0 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    width: 22px !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock:not(.is-locked),
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock:not(.is-locked),
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock:not(.is-locked),
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock:not(.is-locked),
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock:not(.is-locked) {
    background: color-mix(in srgb, transparent 92%, var(--primary)) !important;
    border-color: color-mix(in srgb, var(--border) 62%, var(--primary)) !important;
    color: var(--primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock.is-locked,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock.is-locked,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock.is-locked,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock.is-locked,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock.is-locked,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock.is-locked,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock.is-locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    opacity: 1 !important;
}

body.ff-app .ff-waybill.ff-quick-capture .ff-quick-party-lock i,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-client-lock i,
body.ff-app .ff-waybill.ff-quick-capture .ff-quick-town-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-party-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-client-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-town-lock i,
body.ff-app .ff-waybill.ff-full-capture .ff-quick-service-lock i,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-party-lock i,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-client-lock i,
body.ff-app .ff-waybill .ff-stages-capture .ff-quick-town-lock i {
    font-size: 12px !important;
}

body.ff-app .ff-waybill .ff-stages-capture legend .ff-stages-party-lock {
    margin-left: 6px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label {
    line-height: 18px !important;
    margin-bottom: 0 !important;
    min-height: 18px !important;
    padding-right: 42px !important;
    position: relative !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label .ff-quick-town-label-actions {
    line-height: 22px !important;
    min-height: 22px !important;
    position: absolute !important;
    right: 28px !important;
    top: -4px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label .ff-quick-service-lock {
    flex: 0 0 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    width: 22px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-full-service-lock-label .ff-quick-service-lock i {
    font-size: 12px !important;
    line-height: 1 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > .form-group.ff-manifest-wb-entry-row,
body.ff-app .ff-generate-manifest .ff-manifest-grid-heading-row > .row.ff-manifest-wb-entry-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .ff-manifest-wb-entry-option,
body.ff-app .ff-generate-manifest .ff-manifest-wb-entry-row > .col-sm-2.ff-manifest-wb-entry-option {
    flex: 0 0 auto !important;
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

/* Final quote capture override: keep linked quote actions compact, but let
   Collection # / Waybill # share the first Basic Details row when space allows. */
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row > div:not([class]) {
    display: contents !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-row .ff-full-quote-id-field {
    flex: 0 0 150px !important;
    max-width: 165px !important;
    min-width: 135px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row > .ff-full-quote-links,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-docs > .row > div:not([class]) > .ff-full-quote-links,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-basic-row .ff-full-quote-links {
    align-self: flex-start !important;
    flex: 0 1 500px !important;
    max-width: 500px !important;
    min-width: 0 !important;
    order: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px 12px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links > .row::before,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-link-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 0 1 382px !important;
    flex-wrap: nowrap !important;
    gap: 0 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-links .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-field {
    flex: 0 1 115px !important;
    max-width: 130px !important;
    min-width: 105px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action {
    flex: 0 0 34px !important;
    margin-left: -6px !important;
    margin-top: 0 !important;
    max-width: 34px !important;
    min-width: 34px !important;
    padding: 20px 0 0 0 !important;
    width: 34px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action .btn-group,
body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action .dropdown-toggle {
    width: 100% !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action .dropdown-toggle {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-convert-action {
    flex: 0 0 66px !important;
    max-width: 72px !important;
    min-width: 64px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 20px !important;
    width: 66px !important;
}

body.ff-app .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-convert-action .btn {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 0 !important;
    text-align: center !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-linked-action,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-waybill.ff-full-capture.ff-full-capture--quote .ff-full-quote-convert-action {
    padding-top: 13px !important;
}

/* View Credits/Debits: keep compact finance date filters from overflowing into Branch. */
body.ff-app .ff-view-crdr .ff-finance-date-block {
    flex: 0 0 410px !important;
    max-width: 410px !important;
    min-width: 410px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-block > .row {
    flex-wrap: nowrap !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-period.ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range {
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker {
    max-width: 248px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: 112px !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker input.form-control[uib-datepicker-popup] {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-width: 100% !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-crdr .ff-finance-date-range .range-picker .input-icon > i.ti-calendar {
    line-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block {
    flex-basis: 382px !important;
    max-width: 382px !important;
    min-width: 382px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period.ff-filter-date-period {
    flex-basis: 142px !important;
    max-width: 142px !important;
    min-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range {
    flex-basis: 232px !important;
    max-width: 232px !important;
    min-width: 232px !important;
    width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range .range-picker {
    max-width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range .range-picker .end-date {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

@media (max-width: 450px) {
    body.ff-app .ff-view-crdr .ff-finance-date-block,
    body.ff-app .ff-view-crdr .ff-finance-date-period.ff-filter-date-period,
    body.ff-app .ff-view-crdr .ff-finance-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-period.ff-filter-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-range {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-view-crdr .ff-finance-date-block > .row,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-crdr .ff-finance-date-block > .row {
        flex-wrap: wrap !important;
    }
}

/* Statement / Month End: compact responsive rows so controls do not overlap at narrower widths. */
body.ff-app .ff-statement .ff-statement-top-row,
body.ff-app .ff-statement .ff-statement-type-row,
body.ff-app .ff-statement .ff-statement-period-client-row,
body.ff-app .ff-statement .ff-statement-acc-row,
body.ff-app .ff-statement .ff-statement-email-row,
body.ff-app .ff-statement .ff-statement-process-row,
body.ff-app .ff-statement .ff-monthend-period-row,
body.ff-app .ff-statement .ff-monthend-report-row,
body.ff-app .ff-statement .ff-monthend-button-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-statement .ff-monthend-grid-row:not(.ng-hide) {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-statement .ff-statement-top-row::before,
body.ff-app .ff-statement .ff-statement-top-row::after,
body.ff-app .ff-statement .ff-statement-type-row::before,
body.ff-app .ff-statement .ff-statement-type-row::after,
body.ff-app .ff-statement .ff-statement-period-client-row::before,
body.ff-app .ff-statement .ff-statement-period-client-row::after,
body.ff-app .ff-statement .ff-statement-email-row::before,
body.ff-app .ff-statement .ff-statement-email-row::after,
body.ff-app .ff-statement .ff-monthend-report-row::before,
body.ff-app .ff-statement .ff-monthend-report-row::after,
body.ff-app .ff-statement .ff-monthend-button-row::before,
body.ff-app .ff-statement .ff-monthend-button-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-statement .ff-statement-top-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-period-client-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-acc-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-email-row > [class*="col-"],
body.ff-app .ff-statement .ff-statement-process-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-period-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-report-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-button-row > [class*="col-"],
body.ff-app .ff-statement .ff-monthend-grid-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-statement .ff-statement-panel-col {
    flex: 1 1 640px !important;
    max-width: none !important;
}

body.ff-app .ff-statement .ff-monthend-panel-col {
    flex: 1 1 380px !important;
    max-width: none !important;
}

body.ff-app .ff-statement .ff-statement-options-fieldset,
body.ff-app .ff-statement .ff-monthend-fieldset,
body.ff-app .ff-statement .ff-statement-result-fieldset {
    margin-bottom: 6px !important;
    padding: 7px 10px 8px !important;
}

body.ff-app .ff-statement .ff-statement-options-fieldset > legend,
body.ff-app .ff-statement .ff-monthend-fieldset > legend,
body.ff-app .ff-statement .ff-statement-result-fieldset > legend {
    margin-bottom: 2px !important;
}

body.ff-app .ff-statement .form-group {
    margin-bottom: 3px !important;
}

body.ff-app .ff-statement label,
body.ff-app .ff-statement .checkbox label {
    line-height: 16px !important;
    margin-bottom: 1px !important;
    min-height: 16px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-statement .ff-statement-type-options {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-statement .ff-statement-type-options .pull-right,
body.ff-app .ff-statement .ff-statement-type-options .valuesonly,
body.ff-app .ff-statement .ff-statement-type-options .checkbox,
body.ff-app .ff-statement .ff-statement-dormant-field .valuesonly,
body.ff-app .ff-statement .ff-statement-dormant-field .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-statement .ff-statement-period-client-row {
    gap: 4px 12px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 20 !important;
}

body.ff-app .ff-statement .ff-statement-period-field {
    flex: 0 0 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
}

body.ff-app .ff-statement .ff-statement-period-field .start-date,
body.ff-app .ff-statement .ff-statement-period-field .input-icon,
body.ff-app .ff-statement .ff-statement-period-field #month {
    max-width: 140px !important;
    width: 140px !important;
}

body.ff-app .ff-statement .ff-statement-period-field .input-icon,
body.ff-app .ff-statement .ff-statement-period-field #month {
    height: 34px !important;
    min-height: 34px !important;
}

body.ff-app .ff-statement .ff-monthend-period-field {
    flex: 0 0 128px !important;
    max-width: 138px !important;
    min-width: 118px !important;
}

body.ff-app .ff-statement .ff-statement-client-field {
    flex: 1 1 360px !important;
    min-width: 250px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 21 !important;
}

body.ff-app .ff-statement .ff-statement-dormant-field {
    align-items: center !important;
    flex: 0 0 126px !important;
    max-width: 136px !important;
    padding-top: 17px !important;
}

body.ff-app .ff-statement .ff-statement-dormant-field:not(.ng-hide) {
    display: flex !important;
}

body.ff-app .ff-statement .ff-statement-client-field .ff-ms,
body.ff-app .ff-statement .ff-statement-client-field .btn-group,
body.ff-app .ff-statement .ff-statement-client-field .dropdown-toggle,
body.ff-app .ff-statement .ff-statement-client-field .dropdown-multiselect {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}

body.ff-app .ff-statement .ff-statement-client-field .dropdown-multiselect.open,
body.ff-app .ff-statement .ff-statement-client-field .multiselect-parent.open,
body.ff-app .ff-statement .ff-statement-client-field .ff-ms .multiselect-parent.open {
    z-index: 1200 !important;
}

body.ff-app .ff-statement .ff-statement-client-field .ff-ms .multiselect-parent > ul.dropdown-menu,
body.ff-app .ff-statement .ff-statement-client-field .dropdown-multiselect > ul.dropdown-menu {
    left: 0 !important;
    max-height: min(56vh, 420px) !important;
    min-width: 100% !important;
    overflow-y: auto !important;
    position: absolute !important;
    right: auto !important;
    top: 100% !important;
    width: 100% !important;
    z-index: 1201 !important;
}

body.ff-app .ff-statement .ff-statement-acc-field,
body.ff-app .ff-statement .ff-statement-invoice-list-field {
    flex: 1 1 100% !important;
}

body.ff-app .ff-statement .ff-statement-acc-field textarea,
body.ff-app .ff-statement .ff-statement-invoice-list-field textarea {
    height: 44px !important;
    min-height: 36px !important;
}

body.ff-app .ff-statement .ff-statement-email-row {
    gap: 4px 8px !important;
    position: relative !important;
    z-index: 1 !important;
}

body.ff-app .ff-statement .ff-statement-bcc-field,
body.ff-app .ff-statement .ff-statement-test-mail-field {
    flex: 1 1 240px !important;
    min-width: 185px !important;
}

body.ff-app .ff-statement .ff-statement-attachments-field {
    flex: 0 0 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app .ff-statement #bcc,
body.ff-app .ff-statement #test-email,
body.ff-app .ff-statement #attachments {
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-statement .ff-statement-process-field,
body.ff-app .ff-statement .ff-monthend-report-actions,
body.ff-app .ff-statement .ff-monthend-buttons {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
    padding-bottom: 4px !important;
    padding-top: 2px !important;
}

body.ff-app .ff-statement .ff-statement-process-field .btn-group,
body.ff-app .ff-statement .ff-monthend-report-actions .btn-group {
    margin: 0 !important;
}

body.ff-app .ff-statement .ff-monthend-report-actions .checkbox,
body.ff-app .ff-statement .ff-monthend-report-actions .checkbox-inline {
    margin: 0 !important;
}

body.ff-app .ff-statement .ff-monthend-buttons .btn {
    margin: 0 !important;
    min-width: 118px;
}

body.ff-app .ff-statement .ff-monthend-grid-row {
    margin-top: 2px !important;
}

body.ff-app .ff-statement .ff-monthend-grid-col,
body.ff-app .ff-statement .ff-statement-result-section > .col-md-12,
body.ff-app .ff-statement .ff-grid-result-row > .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-statement .ff-grid-toolbar-row {
    margin-bottom: 2px !important;
}

body.ff-app .ff-statement .ff-grid-result-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-statement #gridContainer2 {
    min-height: calc(var(--ff-grid-row-height) * 8) !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-statement .ff-statement-period-field,
    body.ff-app .ff-statement .ff-statement-client-field,
    body.ff-app .ff-statement .ff-statement-dormant-field,
    body.ff-app .ff-statement .ff-statement-bcc-field,
    body.ff-app .ff-statement .ff-statement-test-mail-field,
    body.ff-app .ff-statement .ff-statement-attachments-field,
    body.ff-app .ff-statement .ff-monthend-period-field {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-statement .ff-statement-dormant-field {
        padding-top: 0 !important;
    }
}

/* Debtors view: compact the custom filter panel to match the shared query-grid standard. */
body.ff-app .ff-debtors .ff-debtors-filter-card {
    padding-bottom: 8px !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    margin: 0 0 6px !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid::before,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid::after,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row::before,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row::after,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row::before,
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row::after {
    content: none !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-filter-grid > [class*="col-"],
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-list-row > [class*="col-"],
body.ff-app .ff-debtors .ff-debtors-filter-card > .ff-debtors-options-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block {
    flex: 0 0 410px !important;
    max-width: 410px !important;
    min-width: 410px !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row::before,
body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row::after {
    content: none !important;
}

body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-debtors .ff-finance-date-period.ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-debtors .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range {
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker {
    display: flex !important;
    max-width: 248px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .start-date,
body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: 112px !important;
    min-width: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker input.form-control[uib-datepicker-popup],
body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker input.form-control[uib-datepicker-popup] {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-date-range .range-picker .input-icon > i.ti-calendar {
    line-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-acc-field {
    flex: 0 0 132px !important;
    max-width: 132px !important;
    min-width: 112px !important;
}

body.ff-app .ff-debtors .ff-debtors-client-field {
    flex: 0 1 250px !important;
    max-width: 320px !important;
    min-width: 150px !important;
}

body.ff-app .ff-debtors .ff-debtors-branch-field {
    flex: 0 1 175px !important;
    max-width: 224px !important;
    min-width: 154px !important;
}

body.ff-app .ff-debtors .ff-debtors-list-field {
    flex: 0 1 150px !important;
    max-width: 174px !important;
    min-width: 94px !important;
}

body.ff-app .ff-debtors .ff-debtors-filter-card textarea.form-control.autoExpand {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    resize: vertical !important;
}

body.ff-app .ff-debtors .ff-debtors-show-dormant {
    align-self: flex-end !important;
    flex: 0 0 180px !important;
    max-width: 180px !important;
    min-width: 160px !important;
}

body.ff-app .ff-debtors .ff-debtors-show-dormant .checkbox {
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-options-field {
    flex: 0 1 486px !important;
    max-width: 506px !important;
    min-width: 430px !important;
}

body.ff-app .ff-debtors .ff-debtors-trans-field {
    flex: 0 1 330px !important;
    max-width: 350px !important;
    min-width: 320px !important;
}

body.ff-app .ff-debtors .ff-debtors-clear-field {
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
    padding-top: 28px !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field {
    align-self: flex-start !important;
    display: flex !important;
    flex: 1 1 320px !important;
    justify-content: flex-end !important;
    max-width: none !important;
    min-width: 300px !important;
    padding-top: 28px !important;
}

body.ff-app .ff-debtors .ff-debtors-inline-fieldset {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 12px 10px 7px !important;
    width: 100% !important;
}

body.ff-app .ff-debtors .ff-debtors-inline-fieldset > legend {
    margin-bottom: 2px !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row .checkbox,
body.ff-app .ff-debtors .ff-debtors-checkbox-row .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-left: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row .clip-check label,
body.ff-app .ff-debtors .ff-debtors-show-dormant .clip-check label,
body.ff-app .ff-debtors .ff-debtors-actions-row .clip-check label,
body.ff-app .ff-debtors .ff-debtors-actions-field .clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debtors .ff-debtors-checkbox-row .clip-check label::before,
body.ff-app .ff-debtors .ff-debtors-checkbox-row .clip-check label::after,
body.ff-app .ff-debtors .ff-debtors-show-dormant .clip-check label::before,
body.ff-app .ff-debtors .ff-debtors-show-dormant .clip-check label::after,
body.ff-app .ff-debtors .ff-debtors-actions-field .clip-check label::before,
body.ff-app .ff-debtors .ff-debtors-actions-field .clip-check label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.ff-app .ff-debtors .ff-debtors-attachments {
    align-items: center !important;
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 190px !important;
}

body.ff-app .ff-debtors .ff-debtors-attachments label {
    flex: 0 0 auto !important;
    height: auto !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-attachments input {
    flex: 0 0 64px !important;
    width: 64px !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-row {
    margin: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-row .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-row .ff-filter-keep-open,
body.ff-app .ff-debtors .ff-debtors-actions-row .ff-filter-search,
body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-keep-open,
body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-close,
body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-search {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-keep-open {
    align-items: center !important;
    display: inline-flex !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-close {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-debtors .ff-debtors-actions-field .ff-filter-search {
    flex: 0 0 180px !important;
    width: 180px !important;
}

body.ff-app .ff-debtors .ff-debtors-clear-field .ff-filter-clear {
    flex: 0 0 130px !important;
    float: none !important;
    margin: 0 !important;
    width: 130px !important;
}

body.ff-app .ff-debtors .ff-debtors-results {
    border: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-block {
    flex-basis: 382px !important;
    max-width: 382px !important;
    min-width: 382px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-finance-date-period.ff-filter-date-period {
    flex-basis: 142px !important;
    max-width: 142px !important;
    min-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range {
    flex-basis: 232px !important;
    max-width: 232px !important;
    min-width: 232px !important;
    width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range .range-picker {
    max-width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range .range-picker .end-date {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-debtors .ff-debtors-date-block,
    body.ff-app .ff-debtors .ff-debtors-list-field,
    body.ff-app .ff-debtors .ff-debtors-options-field,
    body.ff-app .ff-debtors .ff-debtors-trans-field,
    body.ff-app .ff-debtors .ff-debtors-clear-field,
    body.ff-app .ff-debtors .ff-debtors-actions-field,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-block {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-debtors .ff-debtors-checkbox-row {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 1120px) {
    body.ff-app .ff-debtors .ff-debtors-clear-field {
        padding-top: 0 !important;
    }

    body.ff-app .ff-debtors .ff-debtors-actions-field {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 450px) {
    body.ff-app .ff-debtors .ff-debtors-date-block > .ff-filter-inline-row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-debtors .ff-finance-date-period.ff-filter-date-period,
    body.ff-app .ff-debtors .ff-debtors-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-finance-date-period.ff-filter-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-debtors .ff-debtors-date-range {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* View Payments: align and compact the shared finance filter for payment searches. */
body.ff-app .ff-view-payments .ff-sr-card {
    padding-bottom: 8px !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters,
body.ff-app .ff-view-payments .ff-finance-secondary-filters,
body.ff-app .ff-view-payments .ff-finance-payment-options-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin: 0 0 6px !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters::before,
body.ff-app .ff-view-payments .ff-finance-primary-filters::after,
body.ff-app .ff-view-payments .ff-finance-secondary-filters::before,
body.ff-app .ff-view-payments .ff-finance-secondary-filters::after,
body.ff-app .ff-view-payments .ff-finance-payment-options-row::before,
body.ff-app .ff-view-payments .ff-finance-payment-options-row::after,
body.ff-app .ff-view-payments .ff-finance-date-block > .row::before,
body.ff-app .ff-view-payments .ff-finance-date-block > .row::after,
body.ff-app .ff-view-payments .ff-finance-user-row::before,
body.ff-app .ff-view-payments .ff-finance-user-row::after {
    content: none !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-secondary-filters > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-payment-options-row > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-date-block > .row > [class*="col-"],
body.ff-app .ff-view-payments .ff-finance-user-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-payments .ff-finance-primary-filters > .ff-finance-payment-id {
    flex: 0 0 120px !important;
    max-width: 126px !important;
    min-width: 112px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-block {
    flex: 0 0 410px !important;
    max-width: 410px !important;
    min-width: 410px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-block > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-date-period.ff-filter-date-period {
    flex: 0 0 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 154px !important;
    width: 154px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range {
    flex: 0 0 248px !important;
    max-width: 248px !important;
    min-width: 248px !important;
    width: 248px !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker {
    display: flex !important;
    max-width: 248px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .start-date,
body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: 112px !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker input.form-control[uib-datepicker-popup],
body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .input-group-addon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker input.form-control[uib-datepicker-popup] {
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-date-range .range-picker .input-icon > i.ti-calendar {
    line-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-branch-filter {
    flex: 0 1 230px !important;
    max-width: 260px !important;
    min-width: 185px !important;
}

body.ff-app .ff-view-payments .ff-finance-client-filter {
    flex: 1 1 390px !important;
    max-width: 520px !important;
    min-width: 300px !important;
}

body.ff-app .ff-view-payments .ff-finance-batch-filter,
body.ff-app .ff-view-payments .ff-finance-waybill-filter,
body.ff-app .ff-view-payments .ff-finance-ref-filter,
body.ff-app .ff-view-payments .ff-finance-acc-filter,
body.ff-app .ff-view-payments .ff-payment-group-field,
body.ff-app .ff-view-payments .ff-payment-order-field {
    flex: 0 0 132px !important;
    max-width: 142px !important;
    min-width: 112px !important;
}

body.ff-app .ff-view-payments .ff-finance-user-group {
    flex: 1 1 520px !important;
    max-width: 640px !important;
    min-width: 420px !important;
}

body.ff-app .ff-view-payments .ff-finance-user-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-user-filter,
body.ff-app .ff-view-payments .ff-finance-webuser-filter {
    flex: 1 1 185px !important;
    min-width: 160px !important;
}

body.ff-app .ff-view-payments .ff-payment-unsettled-field,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field {
    align-self: flex-end !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-payment-unsettled-field {
    flex: 0 0 125px !important;
    max-width: 130px !important;
    min-width: 110px !important;
}

body.ff-app .ff-view-payments .ff-payment-show-dormant-field {
    flex: 0 0 150px !important;
    max-width: 160px !important;
    min-width: 140px !important;
}

body.ff-app .ff-view-payments .ff-payment-unsettled-field .checkbox,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .checkbox {
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions-row {
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .valuesonly,
body.ff-app .ff-view-payments .ff-finance-payment-actions .checkbox,
body.ff-app .ff-view-payments .ff-finance-payment-actions .btn,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .checkbox,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .checkbox {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .ff-finance-keep-filter {
    margin-left: auto !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .ff-finance-close-filter {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check label,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check label,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check label::before,
body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check label:before,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check label::before,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check label:before,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check label::before,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check label:before {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-view-payments .ff-finance-payment-actions .clip-check input[type="checkbox"]:checked + label:after,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-view-payments .ff-payment-unsettled-field .clip-check input[type="checkbox"]:checked + label:after,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-view-payments .ff-payment-show-dormant-field .clip-check input[type="checkbox"]:checked + label:after {
    line-height: 19px !important;
    text-align: center !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-block {
    flex-basis: 382px !important;
    max-width: 382px !important;
    min-width: 382px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-period.ff-filter-date-period {
    flex-basis: 142px !important;
    max-width: 142px !important;
    min-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-period.ff-filter-date-period .ff-date-period-group {
    max-width: 142px !important;
    width: 142px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range {
    flex-basis: 232px !important;
    max-width: 232px !important;
    min-width: 232px !important;
    width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range .range-picker {
    max-width: 232px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range .range-picker .start-date,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range .range-picker .end-date {
    flex-basis: 104px !important;
    max-width: 104px !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-view-payments .ff-finance-date-block,
    body.ff-app .ff-view-payments .ff-finance-client-filter,
    body.ff-app .ff-view-payments .ff-finance-user-group,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-block {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-view-payments .ff-finance-user-row {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 450px) {
    body.ff-app .ff-view-payments .ff-finance-date-block > .row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-payments .ff-finance-date-period.ff-filter-date-period,
    body.ff-app .ff-view-payments .ff-finance-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-period.ff-filter-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-payments .ff-finance-date-range {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Generate Manifest/Invoice: override compact default grid shells so result grids are not clipped. */
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-generate-manifest) .ff-grid-result-row:not(.ng-hide),
body.ff-app .ff-page:is(.ff-generate-invoice, .ff-generate-manifest) .ff-grid-result-row:not(.ng-hide) > .col-md-12 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-invoice :is(.ff-invoice-generate-client-grid, .ff-invoice-generate-waybill-grid) {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) {
    height: clamp(520px, calc(100vh - 238px), 1320px) !important;
    max-height: none !important;
    min-height: 520px !important;
    overflow: hidden !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) {
    height: clamp(540px, calc(100vh - 218px), 1360px) !important;
    min-height: 540px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-grid-panel .panel-body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-manifest #gridContainer {
    height: auto !important;
    max-height: none !important;
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
    overflow: visible !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-manifest #gridContainer {
    height: auto !important;
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
}

body.ff-app .ff-generate-invoice :is(#clientGridContainer, #waybillGridContainer) .dx-datagrid {
    height: 100% !important;
    max-height: 100% !important;
}

body.ff-app .ff-generate-manifest #gridContainer .dx-datagrid {
    height: auto !important;
    max-height: none !important;
    min-height: calc(var(--ff-grid-row-height) * 3) !important;
}

/* Payment capture: compact, page-specific alignment without affecting View Payments. */
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .row > [class*="col-md-"] {
    float: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    align-items: baseline !important;
    display: inline-flex !important;
    line-height: 16px !important;
    margin: 0 0 2px !important;
    min-height: 16px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-posted-status {
    align-items: flex-start !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    padding-top: 18px !important;
}

body.ff-app .ff-payment-capture .ff-payment-posted-status .label {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-height: var(--ff-control-h, 40px) !important;
    padding: 0 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset label:has(.symbol.required) .symbol.required {
    display: inline-flex !important;
    height: auto !important;
    margin-left: 2px !important;
    position: static !important;
    transform: none !important;
    vertical-align: baseline !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset label:has(.symbol.required) .symbol.required::before {
    line-height: 1 !important;
    position: static !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row > .ff-payment-id-field {
    flex: 1 1 0 !important;
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-payment-capture .ff-payment-amount-field .input-group,
body.ff-app .ff-payment-capture .ff-payment-balance-field .input-group {
    width: 100% !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field {
    flex: 1 1 0 !important;
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell,
body.ff-app .ff-payment-capture [class*="col-"]:has(> .checkbox.clip-check) {
    margin-top: 0 !important;
    padding-top: 15px !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell {
    flex: 0 0 auto !important;
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check {
    display: inline-flex !important;
    margin: 0 !important;
    min-height: 20px !important;
    vertical-align: middle !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check label {
    line-height: 20px !important;
    margin: 0 !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .valuesonly {
    display: inline-flex !important;
    margin-left: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .row {
    margin-bottom: 2px !important;
    row-gap: 1px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .bootstrap-touchspin .bootstrap-touchspin-prefix {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: var(--ff-control-font-size, 11px) !important;
    font-weight: 400 !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    line-height: 1 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .bootstrap-touchspin .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .checkbox.clip-check label::after {
    left: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group {
    flex: 0 0 33.33333333% !important;
    max-width: 33.33333333% !important;
    width: 33.33333333% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
    width: calc((100% - 16px) / 2) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-show-dormant-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture [class*="col-"]:has(> .checkbox.clip-check) {
    padding-top: 11px !important;
}

/* Payment capture final alignment lock: keep the amount and balance columns identical. */
body.ff-app .ff-payment-capture .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-reference-row {
    align-items: start !important;
    column-gap: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(350px, 4fr) minmax(260px, 4fr) minmax(170px, 2fr) minmax(170px, 2fr) !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row::before,
body.ff-app .ff-payment-capture .ff-payment-main-row::after,
body.ff-app .ff-payment-capture .ff-payment-reference-row::before,
body.ff-app .ff-payment-capture .ff-payment-reference-row::after,
body.ff-app .ff-payment-capture .ff-payment-balance-group > .row::before,
body.ff-app .ff-payment-capture .ff-payment-balance-group > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-reference-row > [class*="col-md-"] {
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-row > .ff-payment-id-field {
    flex: 1 1 108px !important;
    min-width: 108px !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field {
    align-self: start !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-container,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    margin-top: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
    grid-column: 1 / span 2 !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group {
    flex: none !important;
    grid-column: 3 / span 2 !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    column-gap: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field {
    float: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    width: 100% !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .input-group-addon.bootstrap-touchspin-prefix {
    align-items: center !important;
    display: inline-flex !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    font-weight: 400 !important;
    justify-content: center !important;
    line-height: 1 !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label:after {
    left: 0 !important;
    text-align: center !important;
    width: 20px !important;
}

@media (max-width: 1080px) {
    body.ff-app .ff-payment-capture .ff-payment-main-row,
    body.ff-app .ff-payment-capture .ff-payment-reference-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-id-group,
    body.ff-app .ff-payment-capture .ff-payment-client-field,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px) {
    body.ff-app .ff-payment-capture .ff-payment-main-row,
    body.ff-app .ff-payment-capture .ff-payment-reference-row,
    body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row {
    display: grid !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > [class*="col-md-"] {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app.ff-grid-density-compact .ff-payment-capture .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app[data-grid-density="compact"] .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app.ff-grid-density-compact .ff-payment-capture .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-id-field {
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row .input-icon {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label:has(.symbol.required) {
    align-items: center !important;
    display: inline-flex !important;
    gap: 2px !important;
    line-height: 14px !important;
    min-height: 14px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    min-height: 14px !important;
    vertical-align: middle !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label:has(.symbol.required),
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    height: 13px !important;
    line-height: 13px !important;
    min-height: 13px !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    align-items: flex-start !important;
    display: flex !important;
    margin-top: 0 !important;
    padding-top: 17px !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .valuesonly,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check label::before,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .checkbox.clip-check label::after {
    top: calc((var(--ff-control-h) - 20px) / 2) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    padding-top: 15px !important;
}

/* Payment capture dense layout: left-aligned fields, compact gaps, wrap only when needed. */
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin-bottom: 1px !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > [class*="col-md-"] {
    float: none !important;
    grid-column: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 1px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    line-height: 13px !important;
    margin-bottom: 1px !important;
    min-height: 13px !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-group {
    flex: 0 1 600px !important;
    min-width: 450px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-id-field {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field {
    flex: 0 1 440px !important;
    min-width: 300px !important;
}

body.ff-app .ff-payment-capture .ff-payment-amount-field,
body.ff-app .ff-payment-capture .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    min-width: 240px !important;
    width: 300px !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
    flex: 0 1 auto !important;
    max-width: none !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:not(.ff-payment-inline-checkboxes) {
    flex: 0 0 320px !important;
    float: none !important;
    max-width: 320px !important;
    min-width: 240px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 320px !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell {
    flex: 0 0 auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 14px !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group {
    flex: 0 0 610px !important;
    max-width: 610px !important;
    min-width: 490px !important;
    width: 610px !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
    flex: 0 0 610px !important;
    max-width: 610px !important;
    min-width: 490px !important;
    width: 610px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    min-width: 240px !important;
    width: 300px !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    align-self: flex-start !important;
    padding-top: 14px !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .valuesonly {
    margin-left: 0 !important;
}

@media (max-width: 1320px) {
    body.ff-app .ff-payment-capture .ff-payment-id-group {
        flex-basis: 520px !important;
        min-width: 390px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-client-field {
        flex-basis: 380px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-amount-field,
    body.ff-app .ff-payment-capture .ff-payment-balance-field,
    body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
        flex-basis: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-balance-group {
        flex-basis: 570px !important;
        max-width: 570px !important;
        width: 570px !important;
    }

    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
        flex-basis: 570px !important;
        max-width: 570px !important;
        width: 570px !important;
    }

    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
        flex-basis: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
}

@media (max-width: 980px) {
    body.ff-app .ff-payment-capture .ff-payment-id-group,
    body.ff-app .ff-payment-capture .ff-payment-client-field {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-id-field {
        flex: 1 1 150px !important;
        min-width: 150px !important;
    }
}

/* Payment capture header: screenshot-style compact alignment. */
body.ff-app .ff-payment-capture .ff-payment-details-fieldset {
    --ff-payment-gap-x: 14px;
    --ff-payment-gap-y: 0px;
    --ff-payment-money-w: 134px;
    --ff-payment-balance-w: var(--ff-payment-money-w);
    --ff-payment-balance-group-w: calc((var(--ff-payment-money-w) * 2) + var(--ff-payment-gap-x));
    --ff-payment-id-w: 344px;
    --ff-payment-id-gap-x: 10px;
    --ff-payment-reference-w: 191px;
    --ff-payment-customs-w: 127px;
    --ff-payment-right-reserve: 60px;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row {
    align-items: flex-start !important;
    box-sizing: border-box !important;
    column-gap: var(--ff-payment-gap-x) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin: 0 0 var(--ff-payment-gap-y) !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row {
    margin-bottom: 0 !important;
    row-gap: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row {
    padding-right: var(--ff-payment-right-reserve) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-main-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-customs-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row::after,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::before,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-main-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-reference-row > .col-md-8 > .row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group > .row > [class*="col-md-"],
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-inline-checkboxes > .row > [class*="col-md-"] {
    float: none !important;
    grid-column: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label {
    align-items: center !important;
    display: inline-flex !important;
    gap: 2px !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    align-items: center !important;
    display: inline-flex !important;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 !important;
    min-height: 16px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .form-group > label .symbol.required::before {
    font-size: 16px !important;
}

body.ff-app .ff-payment-capture .ff-payment-id-group {
    flex: 0 0 var(--ff-payment-id-w) !important;
    max-width: var(--ff-payment-id-w) !important;
    min-width: var(--ff-payment-id-w) !important;
    width: var(--ff-payment-id-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
    column-gap: var(--ff-payment-id-gap-x) !important;
    display: grid !important;
    grid-template-columns: 88px 116px 120px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-acc-field {
    grid-column: auto !important;
    margin-left: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field > .form-group,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field .input-icon,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field input.form-control[uib-datepicker-popup] {
    box-sizing: border-box !important;
    max-width: 116px !important;
    min-width: 0 !important;
    width: 116px !important;
}

body.ff-app .ff-payment-capture .ff-payment-client-field {
    flex: 1 1 120px !important;
    min-width: 80px !important;
}

body.ff-app .ff-payment-capture .ff-payment-main-row > .ff-payment-amount-field {
    flex: 0 0 var(--ff-payment-money-w) !important;
    max-width: var(--ff-payment-money-w) !important;
    min-width: var(--ff-payment-money-w) !important;
    width: var(--ff-payment-money-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row {
    flex-wrap: nowrap !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
    flex: 1 1 auto !important;
    min-width: 620px !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row {
    align-items: flex-start !important;
    column-gap: var(--ff-payment-gap-x) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:first-child {
    flex: 0 0 var(--ff-payment-reference-w) !important;
    max-width: var(--ff-payment-reference-w) !important;
    width: var(--ff-payment-reference-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:nth-child(2) {
    flex: 1 1 360px !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group {
    flex: 0 0 var(--ff-payment-balance-group-w) !important;
    margin-left: auto !important;
    max-width: var(--ff-payment-balance-group-w) !important;
    min-width: var(--ff-payment-balance-group-w) !important;
    width: var(--ff-payment-balance-group-w) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-reference-row > .ff-payment-balance-group {
    flex: 0 0 var(--ff-payment-balance-group-w) !important;
    margin-left: auto !important;
    max-width: var(--ff-payment-balance-group-w) !important;
    min-width: var(--ff-payment-balance-group-w) !important;
    width: var(--ff-payment-balance-group-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
    align-items: flex-start !important;
    column-gap: var(--ff-payment-gap-x) !important;
    display: grid !important;
    grid-template-columns: repeat(2, var(--ff-payment-balance-w)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: var(--ff-payment-gap-y) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field {
    flex: 0 0 var(--ff-payment-balance-w) !important;
    max-width: var(--ff-payment-balance-w) !important;
    min-width: var(--ff-payment-balance-w) !important;
    width: var(--ff-payment-balance-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
    flex: 0 0 var(--ff-payment-customs-w) !important;
    max-width: var(--ff-payment-customs-w) !important;
    min-width: var(--ff-payment-customs-w) !important;
    width: var(--ff-payment-customs-w) !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-inline-checkboxes {
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row > .ff-payment-inline-checkboxes,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > .ff-payment-inline-checkboxes {
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
}

body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
    align-items: center !important;
    column-gap: 22px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 20px !important;
    row-gap: 4px !important;
}

body.ff-app .ff-payment-capture .ff-payment-checkbox-cell {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    min-height: 20px !important;
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-checkbox-cell,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-checkbox-cell {
    padding-top: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row .ff-payment-checkbox-cell,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row [class*="col-"].ff-payment-checkbox-cell:has(> .checkbox.clip-check),
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row .ff-payment-checkbox-cell {
    padding-top: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    align-items: center !important;
    align-self: flex-start !important;
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
    min-height: 20px !important;
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell,
body.ff-app .ff-payment-capture .ff-payment-details-fieldset > .ff-payment-customs-row > .ff-payment-show-dormant-cell {
    padding-top: calc(17px + ((var(--ff-control-h) - 20px) / 2)) !important;
}

body.ff-app .ff-payment-capture .ff-payment-show-dormant-cell .valuesonly {
    margin-left: 0 !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .valuesonly,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check label {
    height: 20px !important;
    line-height: 20px !important;
    min-height: 20px !important;
}

body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check label::before,
body.ff-app .ff-payment-capture .ff-payment-customs-row > .ff-payment-show-dormant-cell .checkbox.clip-check label::after {
    top: 0 !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check {
    display: inline-flex !important;
    margin: 0 !important;
    min-height: 20px !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 20px !important;
    margin: 0 !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check label::before,
body.ff-app .ff-payment-capture .checkbox.clip-check label::after {
    left: 0 !important;
}

body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label::after,
body.ff-app .ff-payment-capture .checkbox.clip-check input[type="checkbox"]:checked + label:after {
    left: 0 !important;
    text-align: center !important;
    width: 20px !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    width: 100% !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .input-group-addon.bootstrap-touchspin-prefix {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 28px !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    font-weight: 400 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 28px !important;
    padding: 0 !important;
    width: 28px !important;
}

body.ff-app .ff-payment-capture .bootstrap-touchspin .form-control,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-container,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-payment-capture .ff-payment-client-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle {
    min-width: 0 !important;
    width: 100% !important;
}

@media (max-width: 1700px) {
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset {
        --ff-payment-money-w: 134px;
        --ff-payment-id-w: 344px;
        --ff-payment-reference-w: 191px;
        --ff-payment-customs-w: 127px;
        --ff-payment-right-reserve: 32px;
    }

    body.ff-app .ff-payment-capture .ff-payment-client-field {
        min-width: 80px !important;
    }
}

@media (max-width: 1320px) {
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset {
        --ff-payment-money-w: 134px;
        --ff-payment-id-w: 344px;
        --ff-payment-reference-w: 191px;
        --ff-payment-customs-w: 127px;
        --ff-payment-right-reserve: 0px;
    }

    body.ff-app .ff-payment-capture .ff-payment-reference-row {
        flex-wrap: nowrap !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
        flex: 1 1 auto !important;
        min-width: 420px !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-balance-group {
        margin-left: auto !important;
    }
}

@media (max-width: 760px) {
    body.ff-app .ff-payment-capture .ff-payment-id-group,
    body.ff-app .ff-payment-capture .ff-payment-client-field,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row,
    body.ff-app .ff-payment-capture .ff-payment-balance-group > .row,
    body.ff-app .ff-payment-capture .ff-payment-inline-checkboxes > .row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field > .form-group,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field .input-icon,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-date-field input.form-control[uib-datepicker-popup] {
        max-width: none !important;
        width: 100% !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-id-row > .ff-payment-acc-field {
        grid-column: auto !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:first-child,
    body.ff-app .ff-payment-capture .ff-payment-reference-row > .col-md-8 > .row > .col-md-4:nth-child(2) {
        flex: 1 1 280px !important;
        max-width: none !important;
        width: auto !important;
    }
}

@media (max-width: 640px) {
    body.ff-app .ff-payment-capture .ff-payment-main-row > .ff-payment-amount-field,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group,
    body.ff-app .ff-payment-capture .ff-payment-details-fieldset .ff-payment-balance-group .ff-payment-balance-field,
    body.ff-app .ff-payment-capture .ff-payment-customs-row > .col-md-2 {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-payment-capture .ff-payment-balance-group > .row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Parcel tracking capture */
body.ff-app .ff-waybill #page-title.ff-parcel-tracking-header .ff-page-header-row {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-waybill #page-title.ff-parcel-tracking-header .ff-page-title-wrap {
    flex: 0 0 auto !important;
}

body.ff-app .ff-waybill #page-title.ff-parcel-tracking-header .ff-toolbar {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-form-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-fieldset {
    padding-top: 10px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-fieldset .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-top-row,
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-top-row::before,
body.ff-app .ff-waybill .ff-parcel-tracking-top-row::after,
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row::before,
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row::after,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row::before,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-top-row > [class*="col-"],
body.ff-app .ff-waybill .ff-parcel-tracking-id-date-row > [class*="col-"],
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-id-date-group {
    flex: 0 1 334px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-track-field {
    flex: 0 0 132px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-date-field {
    flex: 1 1 180px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-activity-field,
body.ff-app .ff-waybill .ff-parcel-tracking-agent-field {
    flex: 1 1 285px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-group {
    flex: 1 1 390px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-field {
    flex: 0 1 150px !important;
    max-width: 170px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-action {
    flex: 0 0 34px !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-manifest-action .btn-group,
body.ff-app .ff-waybill .ff-parcel-tracking-manifest-action .dropdown-toggle {
    width: 34px !important;
}

body.ff-app .ff-waybill .ff-parcel-tracking-reference-field {
    flex: 1 1 170px !important;
}

body.ff-app .ff-waybill.ff-view-compact .ff-parcel-tracking-fieldset {
    padding-top: 7px !important;
}

body.ff-app .ff-waybill.ff-view-compact .ff-parcel-tracking-fieldset .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-waybill.ff-view-compact .ff-parcel-tracking-manifest-action {
    padding-top: 13px !important;
}

/* Sender/receiver filters: compact fields without affecting the receiver grid. */
body.ff-app .ff-receivers .ff-receivers-filter-primary-row,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 8px !important;
    margin: 0 0 3px !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-primary-row::before,
body.ff-app .ff-receivers .ff-receivers-filter-primary-row::after,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row::before,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-primary-row > [class*="col-"],
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-primary-row .form-group,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-receivers .ff-receivers-name-field {
    flex: 0 0 196px !important;
    max-width: 196px !important;
    min-width: 196px !important;
}

body.ff-app .ff-receivers .ff-receivers-acc-field {
    flex: 0 0 110px !important;
    max-width: 110px !important;
}

body.ff-app .ff-receivers .ff-receivers-client-field {
    flex: 1 1 260px !important;
    max-width: 360px !important;
    min-width: 220px !important;
}

body.ff-app .ff-receivers .ff-receivers-route-field {
    flex: 1 1 210px !important;
    max-width: 300px !important;
    min-width: 180px !important;
}

body.ff-app .ff-receivers .ff-receivers-group-field {
    flex: 1 1 190px !important;
    max-width: 260px !important;
    min-width: 165px !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-checkbox-field,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-search-field {
    padding-top: 15px !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .checkbox,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin-right: 0 !important;
    min-height: var(--ff-control-h) !important;
    white-space: nowrap !important;
}

body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .clip-check label:before,
body.ff-app .ff-receivers .ff-receivers-filter-secondary-row .ff-receivers-checkbox-field .clip-check label:after {
    top: calc((var(--ff-control-h) - 20px) / 2) !important;
}

body.ff-app .ff-receivers .ff-receivers-search-field .btn {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
}

body.ff-app .ff-receivers .ff-receivers-search-field {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: none !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-search-field,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-receivers .ff-receivers-filter-secondary-row--has-dates .ff-receivers-checkbox-field,
body.ff-app .ff-receivers.ff-view-compact .ff-receivers-filter-secondary-row--has-dates .ff-receivers-checkbox-field,
body.ff-app .ff-receivers.ff-view-compact .ff-receivers-filter-secondary-row--has-dates .ff-receivers-search-field {
    padding-top: 12px !important;
}

/* Client/Agent master: keep top-row captions, required marks, and fields level. */
body.ff-app .ff-client .ff-client-master-top-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-client .ff-client-master-top-row::before,
body.ff-app .ff-client .ff-client-master-top-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-client .ff-client-master-top-row > .ff-client-master-mode-fields {
    display: contents !important;
}

body.ff-app .ff-client .ff-client-master-top-row > [class*="col-"],
body.ff-app .ff-client .ff-client-master-top-row > .ff-client-master-mode-fields > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-master-action-field {
    flex: 0 1 160px !important;
}

body.ff-app .ff-client .ff-client-master-list-field {
    flex: 1 1 205px !important;
}

body.ff-app .ff-client .ff-client-master-name-field {
    flex: 1 1 190px !important;
}

body.ff-app .ff-client .ff-client-master-acc-field {
    flex: 0 1 88px !important;
}

/* Client master: reserve room for the Acc # copy button without letting it
   overlap Billing Client. The three client text fields contribute equally. */
body.ff-app .ff-client .ff-client-master-client-fields > .ff-client-master-list-field {
    flex-basis: 193px !important;
}

body.ff-app .ff-client .ff-client-master-client-fields > .ff-client-master-name-field {
    flex-basis: 178px !important;
}

body.ff-app .ff-client .ff-client-master-client-fields > .ff-client-master-acc-field {
    flex-basis: 116px !important;
    margin-right: 8px !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 3px !important;
    min-width: 0 !important;
}

body.ff-app .ff-client .ff-client-master-top-row > .ff-client-master-mode-fields .form-group {
    margin-top: -1px !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label {
    align-items: center !important;
    display: flex !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label.width100 {
    justify-content: space-between !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label .pull-right {
    float: none !important;
    height: 15px !important;
    line-height: 15px !important;
    margin-left: auto !important;
    max-width: 86px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-client .ff-client-master-top-row .form-group > label .symbol.required::before {
    display: inline-block !important;
    font-size: inherit !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: baseline !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-client .form-group .dropdown-toggle.btn:not(.ff-action),
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-client .ff-ms .multiselect-parent.btn-group.dropdown-multiselect button.dropdown-toggle.btn {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-client .tabbable {
    margin-top: 4px !important;
}

body.ff-app .ff-client .tabbable .nav-tabs {
    margin-bottom: 0 !important;
}

body.ff-app .ff-client .tabbable .nav-tabs > li > a {
    line-height: 16px !important;
    min-height: 26px !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}

body.ff-app .ff-client .tabbable .tab-content {
    padding-top: 6px !important;
}

body.ff-app .ff-client .tabbable .tab-content .form-group {
    margin-bottom: 4px !important;
}

body.ff-app .ff-client .tabbable .tab-content .form-group > label {
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
}

body.ff-app .ff-client .tabbable .tab-content fieldset {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    padding-top: 5px !important;
}

body.ff-app .ff-client .tabbable .tab-content legend {
    line-height: 16px !important;
    margin-bottom: 4px !important;
}

body.ff-app .ff-client .tabbable .tab-content .checkbox {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
}

body.ff-app .ff-client .tabbable .tab-content .clip-check label {
    line-height: 16px !important;
    min-height: 16px !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-row {
    align-items: flex-start !important;
    clear: both !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 0 !important;
    margin-top: 2px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-cell {
    flex: 0 1 25% !important;
    min-width: 230px !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-cell .checkbox.clip-check {
    display: block !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    white-space: normal !important;
}

body.ff-app .ff-client .ff-client-waybill-checkbox-cell .clip-check label {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    padding-left: 28px !important;
    white-space: normal !important;
}

@media (max-width: 1199px) {
    body.ff-app .ff-client .ff-client-waybill-checkbox-cell {
        flex-basis: 50% !important;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-client .ff-client-waybill-checkbox-cell {
        flex-basis: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }
}

body.ff-app .ff-client .ff-client-billing-layout {
    align-items: flex-start !important;
    display: flex !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-client .ff-client-billing-main {
    flex: 1 1 auto !important;
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-billing-aside {
    flex: 0 0 25% !important;
    float: none !important;
    min-width: 300px !important;
    padding-left: 6px !important;
    padding-right: 0 !important;
    width: 25% !important;
}

body.ff-app .ff-client .ff-client-billing-side {
    padding: 0 !important;
}

body.ff-app .ff-client .ff-client-billing-grid {
    column-gap: 16px !important;
    display: grid !important;
    flex: 1 1 auto !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    row-gap: 4px !important;
    width: 100% !important;
}

body.ff-app .ff-client .ff-client-billing-grid > [class*="col-md-"] {
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-billing-grid > .ff-client-wbs-per-inv-field {
    grid-column: 1 !important;
}

body.ff-app .ff-client .ff-client-billing-grid > :nth-last-child(-n+3) .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-client .ff-client-billing-grid .form-group {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-client .tabbable .tab-content .bootstrap-touchspin {
    align-items: stretch !important;
    display: flex !important;
    overflow: hidden !important;
    width: 100% !important;
}

body.ff-app .ff-client .tabbable .tab-content .bootstrap-touchspin .input-group-addon.bootstrap-touchspin-prefix {
    align-items: center !important;
    background: var(--ff-surface) !important;
    border: 1px solid var(--ff-border) !important;
    border-radius: var(--ff-radius-sm) 0 0 var(--ff-radius-sm) !important;
    border-right: 0 !important;
    box-sizing: border-box !important;
    color: var(--ff-text) !important;
    display: inline-flex !important;
    flex: 0 0 28px !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    font-weight: 400 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 28px !important;
    padding: 0 !important;
    width: 28px !important;
}

body.ff-app .ff-client .tabbable .tab-content .bootstrap-touchspin .form-control {
    border-left: 0 !important;
    border-radius: 0 var(--ff-radius-sm) var(--ff-radius-sm) 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;
}

body.ff-app .ff-client .ff-client-billing-rate-client {
    margin: 0 0 4px !important;
}

body.ff-app .ff-client .ff-client-billing-rate-client .form-group {
    margin-bottom: 3px !important;
}

body.ff-app .ff-client .ff-client-rate-history-btn {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 16px !important;
    margin-top: 0 !important;
    min-height: 26px !important;
    padding: 4px 8px !important;
}

body.ff-app .ff-client .ff-client-billing-options-row {
    column-gap: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    row-gap: 6px !important;
}

body.ff-app .ff-client .ff-client-billing-options-row::before,
body.ff-app .ff-client .ff-client-billing-options-row::after,
body.ff-app .ff-client .ff-client-additional-grid::before,
body.ff-app .ff-client .ff-client-additional-grid::after,
body.ff-app .ff-client .ff-client-pod-option-grid::before,
body.ff-app .ff-client .ff-client-pod-option-grid::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-client .ff-client-billing-options-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-option-column {
    align-content: start !important;
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

body.ff-app .ff-client .ff-client-billing-options-row > .ff-client-option-wide {
    grid-column: 1 / -1 !important;
}

body.ff-app .ff-client .ff-client-billing-options-row .ff-client-order-number-field .form-group {
    margin: 0 !important;
}

body.ff-app .ff-client .ff-client-billing-options-row .ff-client-order-required-field {
    align-items: center !important;
    display: flex !important;
    min-height: var(--ff-control-h, 32px) !important;
}

body.ff-app .ff-client .ff-client-additional-information {
    margin-top: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-client .ff-client-pod-settings {
    margin-top: 6px !important;
    width: 100% !important;
}

body.ff-app .ff-client .ff-client-additional-information > fieldset,
body.ff-app .ff-client .ff-client-pod-settings > fieldset {
    margin-bottom: 0 !important;
}

body.ff-app .ff-client .ff-client-additional-grid {
    display: grid !important;
    gap: 6px 12px !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    margin: 0 !important;
}

body.ff-app .ff-client .ff-client-additional-grid > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-pod-options {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

body.ff-app .ff-client .ff-client-pod-master-toggle {
    border-bottom: 1px solid var(--ff-border, var(--border, #d5dce6)) !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
}

body.ff-app .ff-client .ff-client-pod-option-grid {
    display: block !important;
    margin: 0 !important;
}

body.ff-app .ff-client .ff-client-pod-option-grid > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

body.ff-app .ff-client .ff-client-consolidation-column {
    padding-left: 6px !important;
}

body.ff-app .ff-client .ff-client-consolidation-panel {
    padding: 7px 10px 9px !important;
}

body.ff-app .ff-client .ff-client-consolidation-settings {
    align-items: end !important;
    display: grid !important;
    gap: 8px 14px !important;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) !important;
    margin-bottom: 8px !important;
}

body.ff-app .ff-client .ff-client-consolidate-toggle {
    min-height: var(--ff-control-h, 32px) !important;
}

body.ff-app .ff-client .ff-client-consolidation-fee {
    margin: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-client .ff-client-consolidation-rules-title {
    border-top: 1px solid var(--ff-border, var(--border, #d5dce6)) !important;
    color: var(--ff-text, var(--text, #222)) !important;
    font-size: var(--ff-control-font-size, 12px) !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    margin: 0 0 6px !important;
    padding-top: 7px !important;
}

body.ff-app .ff-client .ff-client-consolidation-grid {
    display: grid !important;
    gap: 4px 16px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.ff-app .ff-client .tabbable .tab-content :is(.ff-client-billing-options-row, .ff-client-pod-options, .ff-client-consolidation-panel) .checkbox.clip-check {
    align-items: center !important;
    display: flex !important;
    margin: 0 !important;
    min-height: 24px !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-client .tabbable .tab-content .checkbox.clip-check > input[type="checkbox"] {
    display: none !important;
}

body.ff-app .ff-client .tabbable .tab-content :is(.ff-client-billing-options-row, .ff-client-pod-options, .ff-client-consolidation-panel) .clip-check label {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 16px !important;
    margin: 0 !important;
    min-height: 24px !important;
    overflow-wrap: anywhere !important;
    padding-left: 28px !important;
    white-space: normal !important;
}

body.ff-app .ff-client .tabbable .tab-content :is(.ff-client-billing-options-row, .ff-client-pod-options, .ff-client-consolidation-panel) .clip-check label::before,
body.ff-app .ff-client .tabbable .tab-content :is(.ff-client-billing-options-row, .ff-client-pod-options, .ff-client-consolidation-panel) .clip-check label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 1599px) {
    body.ff-app .ff-client .ff-client-billing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1199px) {
    body.ff-app .ff-client .ff-client-billing-layout {
        display: block !important;
    }

    body.ff-app .ff-client .ff-client-billing-main,
    body.ff-app .ff-client .ff-client-billing-aside {
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-client .ff-client-billing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    body.ff-app .ff-client .ff-client-billing-aside {
        margin-top: 8px !important;
    }

    body.ff-app .ff-client .ff-client-consolidation-column {
        padding-left: 15px !important;
    }
}

@media (max-width: 767px) {
    body.ff-app .ff-client .ff-client-billing-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ff-app .ff-client .ff-client-pod-settings {
        flex-basis: auto !important;
        width: 100% !important;
    }

    body.ff-app .ff-client .ff-client-consolidation-settings,
    body.ff-app .ff-client .ff-client-consolidation-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Driver master: keep the Driver lookup and required markers aligned in the top row. */
body.ff-app .ff-driver .ff-driver-master-top-row .form-group {
    margin-bottom: 3px !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group > label {
    align-items: center !important;
    display: flex !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group > label .symbol.required::before {
    display: inline-block !important;
    font-size: 16px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-driver .ff-driver-master-top-row .form-group.has-error > label .symbol.required::before,
body.ff-app .ff-driver .ff-driver-master-top-row .form-group.has-success > label .symbol.required::before {
    font-size: 12px !important;
}

/* User master: keep the first identity row aligned and compact. */
body.ff-app .ff-users .ff-users-identity-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-users .ff-users-identity-row::before,
body.ff-app .ff-users .ff-users-identity-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-users .ff-users-identity-row > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-users .ff-users-action-field {
    flex: 0 1 160px !important;
}

body.ff-app .ff-users .ff-users-select-field {
    flex: 1 1 180px !important;
}

body.ff-app .ff-users .ff-users-username-field,
body.ff-app .ff-users .ff-users-password-field {
    flex: 1 1 160px !important;
}

body.ff-app .ff-users .ff-users-identity-row .form-group {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 3px !important;
    min-width: 0 !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .form-group {
    margin-top: -1px !important;
}

body.ff-app .ff-users .ff-users-identity-row label {
    align-items: center !important;
    display: flex !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-users .ff-users-identity-row label .pull-right {
    float: none !important;
    margin-left: auto !important;
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-users .ff-users-identity-row label [json-dbl].pull-right {
    height: 15px !important;
    line-height: 15px !important;
    min-height: 15px !important;
    padding: 0 4px !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-container,
body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-match,
body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-toggle,
body.ff-app .ff-waybill.ff-users .ff-users-identity-row .ff-users-select-field .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    height: 30px !important;
    margin-top: 0 !important;
    min-height: 30px !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-match,
body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-toggle {
    display: block !important;
}

body.ff-app .ff-users .ff-users-identity-row .ff-users-select-field .ui-select-toggle,
body.ff-app .ff-waybill.ff-users .ff-users-identity-row .ff-users-select-field .ff-ui.ui-select-bootstrap > .ui-select-match > .ui-select-toggle.btn {
    line-height: 16px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-users .ff-users-identity-row {
    gap: 2px 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-users .ff-users-identity-row .form-group {
    margin-bottom: 2px !important;
}

body.ff-app .ff-users .ff-users-identity-row .error {
    line-height: 12px !important;
    margin-top: 1px !important;
    min-height: 12px !important;
}

body.ff-app .ff-users .ff-users-main-col > .row:not(.ff-users-identity-row) .form-group > label:has(.symbol.required):not(.width100) {
    align-items: center !important;
    display: inline-flex !important;
    line-height: 15px !important;
    margin-bottom: 2px !important;
    min-height: 15px !important;
}

body.ff-app .ff-users .ff-users-identity-row label .symbol.required,
body.ff-app .ff-users .ff-users-main-col .form-group > label .symbol.required {
    align-items: center !important;
    display: inline-flex !important;
    height: 14px !important;
    line-height: 14px !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-users .ff-users-identity-row label .symbol.required::before,
body.ff-app .ff-users .ff-users-main-col .form-group > label .symbol.required::before {
    display: inline-block !important;
    font-size: 16px !important;
    height: 14px !important;
    line-height: 14px !important;
    position: static !important;
    top: auto !important;
    transform: translateY(1px) !important;
    vertical-align: baseline !important;
}

body.ff-app .ff-users .has-error .symbol.required::before,
body.ff-app .ff-users .has-success .symbol.required::before {
    font-size: 12px !important;
    height: 13px !important;
    line-height: 13px !important;
    transform: none !important;
}

body.ff-app .ff-users .ff-users-show-dormant-checkbox {
    clear: both !important;
    display: block !important;
    margin: 10px 0 0 !important;
    padding-top: 4px !important;
}

body.ff-app .ff-users .ff-users-show-dormant-checkbox label {
    line-height: 18px !important;
    margin-bottom: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-users .ff-users-show-dormant-checkbox {
    margin-top: 8px !important;
    padding-top: 3px !important;
}

/* User master: find and highlight checkbox settings without changing their layout. */
body.ff-app .ff-users .ff-users-settings-search-row {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin: -5px 0 7px;
    min-height: 32px;
}

body.ff-app .ff-users .ff-users-settings-search {
    align-items: center;
    display: flex;
    gap: 8px;
    max-width: 470px;
    width: 100%;
}

body.ff-app .ff-users .ff-users-settings-search-control {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

body.ff-app .ff-users .ff-users-settings-search-control > .fa-search {
    color: var(--ff-muted);
    left: 10px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

body.ff-app .ff-users .ff-users-settings-search-control > .form-control {
    height: 32px !important;
    padding: 4px 36px 4px 30px !important;
}

body.ff-app .ff-users .ff-users-settings-search-clear {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ff-muted);
    display: flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 32px;
    z-index: 2;
}

body.ff-app .ff-users .ff-users-settings-search-clear:hover:not(:disabled),
body.ff-app .ff-users .ff-users-settings-search-clear:focus-visible {
    color: var(--ff-primary);
}

body.ff-app .ff-users .ff-users-settings-search-clear:disabled {
    cursor: default;
    opacity: 0.35;
}

body.ff-app .ff-users .ff-users-settings-search-count {
    color: var(--ff-muted);
    flex: 0 0 72px;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

body.ff-app .ff-users .checkbox.ff-users-setting-match {
    background: rgba(255, 193, 7, 0.18) !important;
    background: color-mix(in srgb, var(--ff-warning) 22%, var(--ff-surface)) !important;
    border-radius: var(--ff-radius-sm);
    box-shadow: inset 3px 0 0 var(--ff-warning), 0 0 0 1px color-mix(in srgb, var(--ff-warning) 55%, transparent);
    color: var(--ff-text) !important;
}

body.ff-app .ff-users .checkbox.ff-users-setting-match > label {
    color: var(--ff-text) !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    body.ff-app .ff-users .ff-users-settings-search-row {
        justify-content: stretch;
        margin-top: 0;
    }

    body.ff-app .ff-users .ff-users-settings-search {
        max-width: none;
    }
}

/* Query operations filters: keep the shared filter partial tight without changing other view pages. */
body.ff-app .ff-query .ff-query-filter-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-query .ff-query-filter-row .panel-body {
    padding: 2px 0 !important;
}

body.ff-app .ff-query .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    margin: 0 !important;
    padding-bottom: 6px !important;
}

body.ff-app .ff-query .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-query .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-query .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-query .ff-sr-card > .ff-filter-flow-row,
body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    display: contents !important;
}

body.ff-app .ff-query .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-query .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-query .ff-sr-card > .ff-filter-flow-row::before,
body.ff-app .ff-query .ff-sr-card > .ff-filter-flow-row::after,
body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row::before,
body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-query .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-query .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-query .ff-filter-field .form-group,
body.ff-app .ff-query .ff-filter-field .dx-field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
}

body.ff-app .ff-query .ff-filter-field label {
    align-items: flex-end !important;
    display: flex !important;
    line-height: 14px !important;
    margin-bottom: 1px !important;
    min-height: 14px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-query .ff-filter-field label .pull-right {
    float: none !important;
    margin-left: auto !important;
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 245px !important;
    max-width: 270px !important;
    min-width: 175px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 150px !important;
    max-width: 170px !important;
    min-width: 130px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 1 138px !important;
    max-width: 148px !important;
    min-width: 128px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 1 305px !important;
    max-width: 325px !important;
    min-width: 275px !important;
}

body.ff-app .ff-query .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-client,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-agent,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-driver,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app .ff-query .ff-filter-service,
body.ff-app .ff-query .ff-filter-town {
    flex: 0 1 220px !important;
    max-width: 260px !important;
    min-width: 165px !important;
}

body.ff-app .ff-query .ff-filter-client-row > .ff-filter-acc,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-query .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-query .ff-filter-quote-row > .ff-filter-ref,
body.ff-app .ff-query .ff-filter-quote-row > .ff-filter-medium:not(:first-child),
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-schedule,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-invoice,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-internal-id,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-manifest-no,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-courier,
body.ff-app .ff-query .ff-filter-receiver-acc,
body.ff-app .ff-query .ff-filter-box,
body.ff-app .ff-query .ff-filter-ring-code {
    flex: 0 1 125px !important;
    max-width: 150px !important;
    min-width: 96px !important;
}

body.ff-app .ff-query .ff-filter-pc-kgs-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-query .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-query .ff-filter-pc-kgs-group .ff-filter-pc,
body.ff-app .ff-query .ff-filter-pc-kgs-group .ff-filter-kgs {
    flex: 0 0 62px !important;
    max-width: 62px !important;
    min-width: 58px !important;
    width: 62px !important;
}

body.ff-app .ff-query .ff-filter-zone {
    flex: 0 0 48px !important;
    max-width: 52px !important;
    min-width: 44px !important;
}

body.ff-app .ff-query .ff-filter-zone select.form-control {
    padding-left: 3px !important;
    padding-right: 10px !important;
}

body.ff-app .ff-query .ff-filter-field .ui-select-container,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap > .ui-select-match,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap > .ui-select-match > .btn,
body.ff-app .ff-query .ff-filter-field .ui-select-bootstrap > .ui-select-match > .ui-select-toggle,
body.ff-app .ff-query .ff-filter-field .ff-dx,
body.ff-app .ff-query .ff-filter-field .dx-widget,
body.ff-app .ff-query .ff-filter-field .dx-texteditor {
    margin-top: 0 !important;
    vertical-align: top !important;
}

body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-waybill-id,
body.ff-app .ff-query .ff-filter-admin-id-row > .ff-filter-quote-id {
    flex-basis: 105px !important;
    max-width: 125px !important;
    min-width: 88px !important;
}

body.ff-app .ff-query .ff-filter-party {
    flex: 0 1 255px !important;
    max-width: 315px !important;
    min-width: 190px !important;
}

body.ff-app .ff-query .ff-filter-parcel-desc,
body.ff-app .ff-query .ff-filter-capture-method,
body.ff-app .ff-query .ff-filter-user {
    flex: 0 1 178px !important;
    max-width: 215px !important;
    min-width: 135px !important;
}

body.ff-app .ff-query .ff-filter-bool-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 1 1 720px !important;
    max-width: 100% !important;
    min-width: 320px !important;
    width: auto !important;
}

body.ff-app .ff-query .ff-filter-bool-group > .ff-filter-inline-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query .ff-filter-bool-group > .ff-filter-inline-row::before,
body.ff-app .ff-query .ff-filter-bool-group > .ff-filter-inline-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-query .ff-filter-bool,
body.ff-app .ff-query .ff-filter-bool-wide {
    flex: 0 1 105px !important;
    max-width: 118px !important;
    min-width: 88px !important;
}

body.ff-app .ff-query .ff-filter-bool-wide {
    flex-basis: 118px !important;
    max-width: 132px !important;
}

body.ff-app .ff-query .ff-filter-bool select,
body.ff-app .ff-query .ff-filter-bool-wide select {
    padding-left: 6px !important;
    padding-right: 16px !important;
}

body.ff-app .ff-query .ff-filter-actions-row {
    margin: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-query .ff-filter-actions::before,
body.ff-app .ff-query .ff-filter-actions::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-query .ff-filter-actions .valuesonly,
body.ff-app .ff-query .ff-filter-actions .btn {
    float: none !important;
    margin: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .valuesonly {
    order: 1 !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-clear {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 0 !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-keep-open {
    margin-left: auto !important;
    order: 4 !important;
}

body.ff-app .ff-query .ff-filter-actions:not(:has(.ff-filter-keep-open)) .ff-filter-close {
    margin-left: auto !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-close {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 var(--ff-control-h) !important;
    justify-content: center !important;
    min-width: var(--ff-control-h) !important;
    order: 5 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

body.ff-app .ff-query .ff-filter-actions .ff-filter-search {
    order: 6 !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row .checkbox {
    white-space: normal !important;
}

body.ff-app .ff-view-collections .ff-filter-collection-status-row .checkbox label {
    white-space: normal !important;
}

body.ff-app .ff-view-collections .ff-filter-actions .ff-filter-close {
    order: 5 !important;
}

body.ff-app .ff-view-collections .ff-filter-actions .ff-filter-search {
    order: 6 !important;
}

body.ff-app .ff-query .ff-date-period-group > .ff-date-period-ignore {
    flex-basis: 62px !important;
    min-width: 62px !important;
    width: 62px !important;
}

body.ff-app .ff-query .ff-date-period-group #ignoreDate + label {
    padding-left: 21px !important;
    padding-right: 3px !important;
}

body.ff-app .ff-query .ff-date-period-group #ignoreDate + label::before {
    left: 5px !important;
}

body.ff-app .ff-query .ff-date-period-group #ignoreDate + label::after {
    left: 8px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-sr-card {
    gap: 1px 5px !important;
    padding-bottom: 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-field label {
    line-height: 12px !important;
    margin-bottom: 0 !important;
    min-height: 12px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-waybill-filter-grid > .ff-filter-date-period {
    flex-basis: 122px !important;
    max-width: 130px !important;
    min-width: 116px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-waybill-filter-grid > .ff-filter-id {
    flex-basis: 210px !important;
    max-width: 235px !important;
    min-width: 165px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-waybill-filter-grid > .ff-filter-branch,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-client,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-agent,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-driver,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-client-row > .ff-filter-vehicle,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-service,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-town {
    flex-basis: 195px !important;
    max-width: 235px !important;
    min-width: 150px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-date-period-group > .ff-date-period-ignore {
    flex-basis: 56px !important;
    min-width: 56px !important;
    width: 56px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-party {
    flex-basis: 230px !important;
    max-width: 285px !important;
    min-width: 180px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-pc-kgs-group .ff-filter-pc,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-pc-kgs-group .ff-filter-kgs {
    flex-basis: 58px !important;
    max-width: 58px !important;
    min-width: 54px !important;
    width: 58px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-zone {
    flex-basis: 44px !important;
    max-width: 48px !important;
    min-width: 42px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-parcel-desc,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-capture-method,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-user {
    flex-basis: 160px !important;
    max-width: 195px !important;
    min-width: 128px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool-group {
    flex-basis: 620px !important;
    min-width: 280px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool-group > .ff-filter-inline-row {
    gap: 1px 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-query .ff-filter-bool-wide {
    flex-basis: 90px !important;
    max-width: 102px !important;
    min-width: 82px !important;
}

/* View Manifests final filter alignment: pack filter fields without changing shared filter layout. */
body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-date-period,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-date-period {
    flex: 0 0 184px !important;
    max-width: 184px !important;
    min-width: 184px !important;
    width: 184px !important;
}

body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-type-filter,
body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-agent-filter,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-type-filter,
body.ff-app .ff-view-manifests .ff-manifest-filter-row > .ff-manifest-agent-filter {
    flex: 0 0 16.66666667% !important;
    max-width: 16.66666667% !important;
    min-width: 0 !important;
    width: 16.66666667% !important;
}

body.ff-app .ff-view-manifests .ff-manifest-agent-filter :is(.ff-control, .ui-select-container, .ui-select-bootstrap),
body.ff-app .ff-view-manifests .ff-manifest-type-filter select.form-control {
    width: 100% !important;
}

/* View Manifests final action alignment: keep actions at the far right and centre the Date Period Ignore tick. */
body.ff-app .ff-view-manifests .ff-sr-card > .row > .ff-manifest-filter-actions,
body.ff-app .ff-view-manifests .ff-manifest-filter-actions {
    align-self: flex-end !important;
    display: flex !important;
    flex: 1 1 320px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: none !important;
    min-width: 300px !important;
    padding-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-manifests .ff-manifest-filter-submit {
    align-items: center !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifests .ff-manifest-keep-filter {
    margin-left: 0 !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-group {
    align-items: stretch !important;
    overflow: hidden !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period .ff-date-period-ignore {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
    position: relative !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 3px 0 21px !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::before {
    height: 12px !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
}

body.ff-app .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifests.ff-query-grid-page .ff-filter-date-period #ignoreDate + label.ff-date-period-ignore-label::after {
    height: 4px !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-70%) rotate(-45deg) !important;
    width: 7px !important;
}

/* View Manifest Routes final compact Date Period sizing. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-filters {
    flex-basis: 390px !important;
    max-width: 405px !important;
    min-width: 350px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period {
    flex: 0 0 124px !important;
    max-width: 124px !important;
    min-width: 124px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-group {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
    width: 124px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-ignore {
    align-items: center !important;
    display: flex !important;
    height: var(--ff-control-h) !important;
    justify-content: flex-start !important;
    line-height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 52px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label {
    align-items: center !important;
    display: flex !important;
    font-size: var(--ff-control-font-size) !important;
    height: var(--ff-control-h) !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 2px 0 18px !important;
    width: 52px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::before {
    height: 11px !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::after {
    height: 4px !important;
    left: 7px !important;
    top: 50% !important;
    transform: translateY(-70%) rotate(-45deg) !important;
    width: 7px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period select.form-control {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    width: 100% !important;
}

/* View Manifest Routes final filter date alignment. Keep Date Range beside Date Period. */
body.ff-app .ff-view-manifest-routes .ff-route-date-filters {
    flex: 0 1 460px !important;
    max-width: 480px !important;
    min-width: 408px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-row {
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 3px 8px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-period {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-range {
    flex: 1 1 260px !important;
    max-width: 300px !important;
    min-width: 260px !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-range .range-picker {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-view-manifest-routes .ff-route-date-range .range-picker .start-date,
body.ff-app .ff-view-manifest-routes .ff-route-date-range .range-picker .end-date {
    flex: 1 1 112px !important;
    max-width: none !important;
    min-width: 104px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-filters {
    flex-basis: 408px !important;
    max-width: 420px !important;
    min-width: 384px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period {
    flex: 0 0 116px !important;
    max-width: 116px !important;
    min-width: 116px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-group {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    width: 116px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-ignore {
    width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label {
    padding-left: 16px !important;
    width: 48px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::before {
    left: 3px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period #ignoreDate + label::after {
    left: 6px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-range {
    flex: 1 1 260px !important;
    max-width: 292px !important;
    min-width: 260px !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-view-manifest-routes .ff-route-date-filters,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-filters {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifest-routes .ff-route-date-row {
        flex-wrap: wrap !important;
    }

    body.ff-app .ff-view-manifest-routes .ff-route-date-period,
    body.ff-app .ff-view-manifest-routes .ff-route-date-range,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-range {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.ff-app .ff-view-manifest-routes .ff-route-date-period-group,
    body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-view-manifest-routes .ff-route-date-period-group {
        width: 100% !important;
    }
}

/* Debriefing filter width polish.
   Keep seldom-used/numeric filters compact so wrapped rows do not waste a full line. */
body.ff-app .ff-debriefing .ff-sr-card {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
}

body.ff-app .ff-debriefing .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-actions-slot,
body.ff-app .ff-debriefing .ff-sr-card > .ff-waybill-filter-grid {
    flex: 0 0 100% !important;
}

body.ff-app .ff-debriefing .ff-waybill-filter-grid {
    align-items: flex-start !important;
    display: grid !important;
    gap: 4px 10px !important;
    grid-template-columns:
        minmax(108px, 112px)
        minmax(165px, 190px)
        minmax(146px, 158px)
        minmax(248px, 260px)
        minmax(180px, 220px) !important;
}

body.ff-app .ff-debriefing .ff-waybill-filter-grid::before,
body.ff-app .ff-debriefing .ff-waybill-filter-grid::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-waybill-filter-grid > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-client-row,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-admin-id-row,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-waybill-route-row {
    display: contents !important;
}

body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-client-row::before,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-client-row::after,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-admin-id-row::before,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-admin-id-row::after,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-waybill-route-row::before,
body.ff-app .ff-debriefing .ff-sr-card > .ff-filter-waybill-route-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-filter-field .form-group,
body.ff-app .ff-debriefing .ff-filter-field .dx-field {
    margin-bottom: 0 !important;
}

body.ff-app .ff-debriefing .ff-filter-field label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 1px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-filter-field :is(.ff-control, .ff-ui, .ui-select-container, .ui-select-bootstrap, .ui-select-match, .ui-select-toggle, .form-control, .ff-dx, .dx-widget, .dx-texteditor) {
    height: var(--ff-control-h) !important;
    margin-top: 0 !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-debriefing .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 112px !important;
    max-width: 125px !important;
    min-width: 96px !important;
}

body.ff-app .ff-debriefing .ff-filter-waybill-route-row > .ff-filter-sender,
body.ff-app .ff-debriefing .ff-filter-waybill-route-row > .ff-filter-receiver {
    flex: 0 1 150px !important;
    max-width: 185px !important;
    min-width: 128px !important;
}

body.ff-app .ff-debriefing .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 156px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

/* Generate Invoice filter width polish.
   Keep high-volume search fields compact so the filter area wraps neatly. */
body.ff-app .ff-generate-invoice .ff-sr-card {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 5px !important;
}

body.ff-app .ff-generate-invoice .ff-sr-card > .ff-sr-legend,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-actions-slot {
    flex: 0 0 100% !important;
}

body.ff-app .ff-generate-invoice .ff-sr-card > .ff-waybill-filter-grid,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-flow-row,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    display: contents !important;
}

body.ff-app .ff-generate-invoice .ff-sr-card > .ff-waybill-filter-grid::before,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-waybill-filter-grid::after,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-flow-row::before,
body.ff-app .ff-generate-invoice .ff-sr-card > .ff-filter-flow-row::after,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row::before,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > [class*="col-"],
body.ff-app .ff-generate-invoice .ff-filter-flow-row > [class*="col-"],
body.ff-app .ff-generate-invoice .ff-filter-inline-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 0 136px !important;
    max-width: 136px !important;
    min-width: 136px !important;
    width: 136px !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 0 172px !important;
    max-width: 172px !important;
    min-width: 172px !important;
    width: 172px !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-date-range {
    box-sizing: border-box !important;
    flex: 0 0 224px !important;
    max-width: 224px !important;
    min-width: 224px !important;
    padding-left: 8px !important;
    width: 224px !important;
}

body.ff-app .ff-generate-invoice .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 170px !important;
    max-width: 195px !important;
    min-width: 142px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-client-row > .ff-filter-ref,
body.ff-app .ff-generate-invoice .ff-filter-client-row > .ff-filter-order,
body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-schedule {
    flex: 0 1 118px !important;
    max-width: 134px !important;
    min-width: 96px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-sender,
body.ff-app .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-receiver {
    flex: 0 1 160px !important;
    max-width: 190px !important;
    min-width: 132px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex: 0 1 156px !important;
    max-width: 180px !important;
    min-width: 120px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group {
    align-items: flex-start !important;
    display: flex !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group > .ff-filter-inline-row {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group .ff-filter-pc,
body.ff-app .ff-generate-invoice .ff-filter-pc-kgs-group .ff-filter-kgs {
    flex: 0 0 92px !important;
    max-width: 96px !important;
    min-width: 82px !important;
    width: 92px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-hub,
body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-origin-hub,
body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-destination-hub {
    flex: 0 1 178px !important;
    max-width: 210px !important;
    min-width: 140px !important;
}

body.ff-app .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-destination-hub {
    margin-right: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-client-row > .ff-filter-ref,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-client-row > .ff-filter-order,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-schedule {
    flex-basis: 108px !important;
    max-width: 124px !important;
    min-width: 92px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-sender,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-receiver,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-waybill-route-row > .ff-filter-parcel-desc {
    flex-basis: 145px !important;
    max-width: 170px !important;
    min-width: 118px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-hub,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-origin-hub,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-generate-invoice .ff-filter-admin-id-row > .ff-filter-destination-hub {
    flex-basis: 160px !important;
    max-width: 190px !important;
    min-width: 128px !important;
}

/* Generate Invoice date row final tightening. */
body.ff-app .ff-generate-invoice #page-title.ff-page-header {
    margin-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice > .container-fullw,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw.bg-white {
    padding-top: 0 !important;
}

body.ff-app .ff-generate-invoice > .container-fullw > .row,
body.ff-app .ff-generate-invoice > .container-fluid.container-fullw > .row {
    margin-top: 0 !important;
}

body.ff-app .ff-generate-invoice .accordion-no-display .panel-body,
body.ff-app .ff-generate-invoice .accordion-no-display fieldset,
body.ff-app .ff-generate-invoice .accordion-no-display .ff-sr-card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row {
    align-items: flex-start !important;
    gap: 0 6px !important;
    height: auto !important;
    margin: 0 0 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-client-grid {
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row > [class*="col-"] {
    align-items: flex-start !important;
    display: block !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row .form-group {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row label {
    display: block !important;
    line-height: 14px !important;
    margin: 0 0 1px !important;
    min-height: 14px !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row .input-icon,
body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row input.form-control {
    flex: 0 0 120px !important;
    margin: 0 !important;
    width: 120px !important;
}

body.ff-app .ff-generate-invoice .ff-invoice-generate-date-row + .ff-invoice-generate-client-grid {
    margin-top: 0 !important;
}

/* View Invoices final filter spacing. */
body.ff-app .ff-query.ff-view-invoices .ff-finance-primary-filters,
body.ff-app .ff-query.ff-view-invoices .ff-finance-secondary-filters,
body.ff-app .ff-query.ff-view-invoices .ff-finance-user-row,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row,
body.ff-app .ff-view-invoices.ff-query-grid-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > .ff-finance-primary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .accordion-no-display fieldset:has([ng-model^="filtermodel."]) > .ff-finance-secondary-filters {
    gap: 0 6px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.ff-app .ff-query.ff-view-invoices .ff-finance-primary-filters .form-group,
body.ff-app .ff-query.ff-view-invoices .ff-finance-secondary-filters .form-group,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters .form-group,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters .form-group {
    margin-bottom: 0 !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters {
    align-items: flex-start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-group,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row {
    display: contents !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters::after,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters::after,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row::after,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row::before,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-primary-filters > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-secondary-filters > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-block > .row > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-row > [class*="col-"],
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-filter-actions-row > [class*="col-"] {
    float: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-invoice-number {
    flex: 0 0 170px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-period {
    flex: 0 0 168px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-range {
    flex: 0 0 300px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-branch-filter {
    flex: 0 0 180px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-client-filter {
    flex: 1 1 200px !important;
    min-width: 130px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-batch-filter,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-waybill-filter,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-ref-filter {
    flex: 0 0 205px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-filter,
body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-webuser-filter {
    flex: 0 0 220px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-acc-filter {
    flex: 0 0 175px !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-filter-actions {
    justify-content: flex-start !important;
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-keep-filter {
    margin-left: auto !important;
}

@media (max-width: 760px) {
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-invoice-number,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-period,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-date-range,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-branch-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-client-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-batch-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-waybill-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-ref-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-user-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-webuser-filter,
    body.ff-app .ff-view-invoices.ff-query-grid-page .ff-finance-acc-filter {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

body.ff-app .ff-view-invoices.ff-query-grid-page .ff-grid-toolbar-row.ng-hide {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* View Tracking final filter and empty-grid chrome cleanup. */
body.ff-app .ff-view-tracking > .container-fullw,
body.ff-app .ff-view-tracking > .container-fullw > [block-ui],
body.ff-app .ff-view-tracking > .container-fullw > [block-ui] > .row,
body.ff-app .ff-view-tracking .accordion-no-display {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-tracking .accordion-no-display > .accordion,
body.ff-app .ff-view-tracking .accordion-no-display .panel,
body.ff-app .ff-view-tracking .accordion-no-display .panel-collapse,
body.ff-app .ff-view-tracking .accordion-no-display .panel-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-view-tracking .ff-sr-card {
    margin-top: 0 !important;
}

body.ff-app .ff-view-tracking .ff-grid-toolbar-row,
body.ff-app .ff-view-tracking .ff-grid-result-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid {
    align-items: flex-start !important;
    column-gap: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid::before,
body.ff-app .ff-view-tracking .ff-waybill-filter-grid::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-id {
    flex: 0 1 153px !important;
    max-width: 153px !important;
    min-width: 128px !important;
    order: 1 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-type {
    flex: 0 1 98px !important;
    max-width: 98px !important;
    min-width: 92px !important;
    order: 2 !important;
}

body.ff-app .ff-view-tracking .ff-filter-date-type .ui-select-toggle > a.btn.btn-xs.btn-link {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}

body.ff-app .ff-view-tracking .ff-filter-date-type .ui-select-match-text.ui-select-allow-clear {
    max-width: calc(100% - 16px) !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-period {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    min-width: 220px !important;
    order: 3 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-range {
    flex: 0 0 420px !important;
    max-width: 420px !important;
    min-width: 360px !important;
    order: 4 !important;
}

body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-branch {
    flex: 0 1 374px !important;
    max-width: 374px !important;
    min-width: 280px !important;
    order: 5 !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-id,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-type,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-period,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-date-range,
    body.ff-app .ff-view-tracking .ff-waybill-filter-grid > .ff-filter-branch {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

body.ff-app .ff-view-tracking .ff-filter-client-row {
    gap: 4px 8px !important;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-client {
    order: 1;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-acc {
    flex: 0 1 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    order: 2;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-order {
    flex: 0 1 112px !important;
    max-width: 112px !important;
    min-width: 112px !important;
    order: 3;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-agent {
    order: 4;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-driver {
    order: 5;
}

body.ff-app .ff-view-tracking .ff-filter-client-row > .ff-filter-vehicle {
    order: 6;
}

body.ff-app .ff-view-tracking .ff-filter-manifest-row > .ff-filter-tracking-actions {
    align-self: flex-end !important;
    flex: 1 1 480px !important;
    max-width: none !important;
    min-width: 420px !important;
    order: 99 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions > .ff-filter-actions-row {
    display: contents !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-actions {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-actions > * {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-show-dormant {
    margin-left: 0 !important;
    margin-right: auto !important;
    order: 1 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-close {
    flex: 0 0 var(--ff-control-h) !important;
    order: 4 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-keep-open {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 3 !important;
}

body.ff-app .ff-view-tracking .ff-filter-tracking-actions .ff-filter-search {
    order: 5 !important;
}

@media (max-width: 900px) {
    body.ff-app .ff-view-tracking .ff-filter-manifest-row > .ff-filter-tracking-actions {
        flex-basis: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

body.ff-app .ff-view-tracking .ff-grid-toolbar-row.ng-hide {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-header-panel,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-headers,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-rowsview,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-total-footer,
body.ff-app .ff-view-tracking #gridContainer.ff-grid-empty .dx-datagrid-nodata {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* View Images final filter polish.
   Keep this late so shared query-grid Date Period sizing does not steal width from the select. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex: 0 0 124px !important;
    max-width: 124px !important;
    min-width: 118px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-width: 124px !important;
    min-height: var(--ff-control-h) !important;
    width: 124px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    flex: 0 0 48px !important;
    height: var(--ff-control-h) !important;
    max-width: 48px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 48px !important;
    width: 48px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 10px !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    padding: 0 2px 0 14px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period {
    flex: 0 0 100px !important;
    max-width: 100px !important;
    min-width: 96px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 100px !important;
    min-height: var(--ff-control-h) !important;
    width: 100px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    flex: 0 0 38px !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    max-width: 38px !important;
    min-height: var(--ff-control-h) !important;
    min-width: 38px !important;
    width: 38px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    align-items: center !important;
    display: inline-flex !important;
    font-size: 9px !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    padding: 0 1px 0 11px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    height: var(--ff-control-h) !important;
    line-height: calc(var(--ff-control-h) - 2px) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-group,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-group {
    align-items: center !important;
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow: hidden !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore,
body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-select,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore {
    align-items: center !important;
    display: flex !important;
    line-height: 1 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-ignore-label,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-ignore-label {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: calc(var(--ff-control-h) - 2px) !important;
    line-height: 1 !important;
    max-height: calc(var(--ff-control-h) - 2px) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.ff-app .ff-imaging-list.ff-view-compact .ff-image-date-period-select,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-imaging-list .ff-image-date-period-select {
    line-height: 1.2 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Tariffs filter width polish.
   Keep this away from grid row-height rules; the accepted normal/compact grid density stays unchanged. */
body.ff-app .ff-tariffs #gridContainer .dx-datagrid-search-panel {
    max-width: 120px !important;
    min-width: 100px !important;
    width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-add-row-btn {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    min-width: 30px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

body.ff-app .ff-tariffs .ff-tariff-add-row-btn .fa {
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend {
    align-items: flex-start !important;
    column-gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 2px !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > legend {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row) {
    display: contents !important;
    margin: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row)::before,
body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row)::after {
    display: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .row:not(.ff-filter-final-row) > [class*="col-"] {
    flex: 0 1 190px !important;
    float: none !important;
    max-width: 230px !important;
    min-width: 130px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .form-group,
body.ff-app .ff-tariffs .ff-tariff-filter-panel :is(.form-control, .ff-control, .ff-ui, .ui-select-container, .ui-select-match) {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .form-group.ff-tariff-filter-populated label {
    color: color-mix(in srgb, var(--primary) 78%, var(--text)) !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .form-group.ff-tariff-filter-populated
    :is(.form-control, .ui-select-match, .ui-select-container .ui-select-match, .multiselect-group .btn, .multiselect-group button) {
    background: color-mix(in srgb, var(--primary) 5%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border)) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 48%, transparent) !important;
}

body.ff-app .ff-tariffs .ff-tariff-id-field,
body.ff-app .ff-tariffs .ff-tariff-category-field {
    flex: 0 1 145px !important;
    max-width: 160px !important;
    min-width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-type-field {
    flex: 0 1 220px !important;
    max-width: 250px !important;
    min-width: 170px !important;
}

body.ff-app .ff-tariffs .ff-tariff-effective-date {
    flex: 0 0 260px !important;
    max-width: 260px !important;
    min-width: 250px !important;
    width: 260px !important;
}

body.ff-app .ff-tariffs .ff-tariff-date-group,
body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group {
    align-items: stretch !important;
    display: flex !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group {
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-date-group > .input-group-addon,
body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group > .input-group-addon {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 74px !important;
    justify-content: center !important;
    max-width: 74px !important;
    min-width: 74px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 74px !important;
}

body.ff-app .ff-tariffs .ff-tariff-date-icon,
body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-group > .ff-tariff-date-icon {
    display: block !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 74px) !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app .ff-tariffs .ff-tariff-effective-date .ff-tariff-date-icon > input.form-control[uib-datepicker-popup] {
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-account-field {
    flex: 0 1 132px !important;
    margin-left: 0 !important;
    max-width: 150px !important;
    min-width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-account-field textarea.form-control {
    height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    overflow-y: auto !important;
    resize: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-client-field {
    flex: 0 1 520px !important;
    max-width: 620px !important;
    min-width: 270px !important;
}

body.ff-app .ff-tariffs .ff-tariff-service-field {
    flex: 0 1 260px !important;
    max-width: 320px !important;
    min-width: 190px !important;
}

body.ff-app .ff-tariffs .ff-tariff-agent-field {
    flex: 0 1 220px !important;
    max-width: 260px !important;
    min-width: 160px !important;
}

body.ff-app .ff-tariffs .ff-tariff-sender-field,
body.ff-app .ff-tariffs .ff-tariff-receiver-field {
    flex: 0 1 250px !important;
    max-width: 300px !important;
    min-width: 180px !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .ff-filter-final-row {
    align-items: flex-end !important;
    display: flex !important;
    flex: 0 0 100% !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .ff-filter-final-row::before,
body.ff-app .ff-tariffs .ff-tariff-filter-panel > fieldset.ff-sr-legend > .ff-filter-final-row::after {
    display: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-final-row > [class*="col-"] {
    float: none !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-area-from,
body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-area-to {
    flex: 0 1 170px !important;
    max-width: 180px !important;
    min-width: 145px !important;
    padding-left: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 260px !important;
    padding-right: 0 !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions-inner {
    align-items: center !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions-inner .btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-width: 120px !important;
}

body.ff-app .ff-tariffs .ff-tariff-filter-panel .ff-filter-footer-actions-inner .ff-filter-close {
    flex-basis: var(--ff-control-h) !important;
    min-width: var(--ff-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--ff-control-h) !important;
}

/* Service Master layout polish.
   Scope this tightly; older inline label rules on this page caused caption/control gaps and clipped checkbox labels. */
body.ff-app .ff-services .ff-services-form {
    max-width: 1180px;
}

body.ff-app .ff-services .form-group {
    margin-bottom: 8px;
}

body.ff-app .ff-services .form-group > label {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: flex-start;
    margin-bottom: 4px;
    max-width: 100%;
    min-height: 16px;
    overflow: visible;
    white-space: nowrap;
    width: auto;
}

body.ff-app .ff-services .form-group > label.width100 {
    width: auto !important;
}

body.ff-app .ff-services .form-group > label .pull-right {
    float: none !important;
    margin-left: 8px;
}

body.ff-app .ff-services .ff-services-detail-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
}

body.ff-app .ff-services .ff-services-fields {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

body.ff-app .ff-services .ff-services-fields > .row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-services .ff-services-fields > .row::before,
body.ff-app .ff-services .ff-services-fields > .row::after {
    display: none !important;
}

body.ff-app .ff-services .ff-services-fields > .row > [class*="col-"] {
    flex: 0 1 132px;
    float: none !important;
    max-width: 160px;
    min-width: 112px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-services .ff-services-fields > .row > .col-md-8 {
    flex: 1 1 420px;
    max-width: 520px;
    min-width: 260px;
}

body.ff-app .ff-services .ff-services-fields > .row > .col-md-10 {
    flex: 1 1 680px;
    max-width: 820px;
    min-width: 280px;
}

body.ff-app .ff-services .ff-services-fields :is(.form-control, .ff-control, .ff-ui, .ui-select-container, .ui-select-match) {
    max-width: 100%;
    width: 100%;
}

body.ff-app .ff-services .ff-services-flags {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-width: 250px;
    padding-top: 19px;
}

body.ff-app .ff-services .ff-services-flags .checkbox {
    flex: 0 1 124px;
    margin: 0 !important;
    min-height: 22px;
    overflow: visible;
    white-space: nowrap;
}

body.ff-app .ff-services .ff-services-flags label {
    overflow: visible;
    white-space: nowrap;
}

body.ff-app .ff-services .ff-services-actions-row .col-md-6 {
    max-width: 560px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .form-group {
    margin-bottom: 5px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-fields > .row {
    gap: 5px 8px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-fields > .row > [class*="col-"] {
    flex-basis: 120px;
    min-width: 104px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-fields > .row > .col-md-8 {
    flex-basis: 360px;
    min-width: 240px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-flags {
    gap: 4px 12px;
    padding-top: 17px;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-services .ff-services-flags .checkbox {
    flex-basis: 112px;
    min-height: 18px;
}

/* Left navigation hit-area final lock.
   Make each visible menu row act as one target, including caption whitespace and collapsed flyout rows. */
body.ff-app #sidebar nav > ul.main-navigation-menu > li,
body.ff-app #sidebar nav ul.sub-menu > li,
body.ff-app .app-aside > ul.sub-menu > li {
    cursor: pointer !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a,
body.ff-app #sidebar nav ul.sub-menu > li > a,
body.ff-app .app-aside > ul.sub-menu > li > a {
    align-items: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: flex !important;
    min-height: 40px;
    position: relative !important;
    width: 100% !important;
    z-index: 1;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a {
    min-height: 44px;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-content {
    align-items: center !important;
    display: flex !important;
    min-height: 44px;
    width: 100% !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a .item-inner {
    align-items: center !important;
    display: flex !important;
    flex: 1 1 auto;
    justify-content: space-between;
    min-height: 44px;
    width: 100% !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > a :is(.item-content, .item-media, .item-inner, .title, .icon-arrow, i),
body.ff-app #sidebar nav ul.sub-menu > li > a :is(.title, .icon-arrow, i),
body.ff-app .app-aside > ul.sub-menu > li > a :is(.title, .icon-arrow, i) {
    pointer-events: none;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li::before,
body.ff-app #sidebar nav > ul.main-navigation-menu > li::after,
body.ff-app #sidebar nav ul.sub-menu > li::before,
body.ff-app #sidebar nav ul.sub-menu > li::after,
body.ff-app .app-aside > ul.sub-menu > li::before,
body.ff-app .app-aside > ul.sub-menu > li::after {
    pointer-events: none;
}

/* Side menu hover visibility.
   CSS-only so the fast menu open/hover behaviour stays responsive. */
body.ff-app {
    --ff-menu-hover-bg: color-mix(in srgb, transparent 96%, var(--primary-seed));
    --ff-menu-hover-ring: color-mix(in srgb, transparent 28%, var(--primary-seed));
    --ff-menu-hover-halo: color-mix(in srgb, transparent 80%, var(--primary-seed));
    --ff-menu-hover-text: var(--nav-text);
    --ff-menu-press-bg: color-mix(in srgb, transparent 90%, var(--primary-seed));
    --ff-menu-press-ring: color-mix(in srgb, transparent 10%, var(--primary-seed));
}

body.ff-app[data-theme="dark"] {
    --ff-menu-hover-bg: color-mix(in srgb, transparent 90%, var(--primary));
    --ff-menu-hover-ring: color-mix(in srgb, transparent 18%, var(--primary));
    --ff-menu-hover-halo: color-mix(in srgb, transparent 70%, var(--primary));
    --ff-menu-hover-text: var(--nav-text);
    --ff-menu-press-bg: color-mix(in srgb, transparent 82%, var(--primary));
    --ff-menu-press-ring: color-mix(in srgb, transparent 4%, var(--primary));
}

body.ff-app #sidebar nav ul.sub-menu > li:active > a,
body.ff-app #sidebar nav ul.sub-menu > li.ff-menu-activating > a,
body.ff-app .app-aside > ul.sub-menu > li:active > a,
body.ff-app .app-aside > ul.sub-menu > li.ff-menu-activating > a {
    background: var(--ff-menu-press-bg) !important;
    background-color: var(--ff-menu-press-bg) !important;
    box-shadow: inset 0 0 0 2px var(--ff-menu-press-ring) !important;
    color: var(--ff-menu-hover-text) !important;
    outline: none !important;
    transition: none !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li,
body.ff-app #sidebar nav ul.sub-menu > li,
body.ff-app .app-aside > ul.sub-menu > li,
body.ff-app #sidebar nav > ul.main-navigation-menu > li > a,
body.ff-app #sidebar nav ul.sub-menu > li > a,
body.ff-app .app-aside > ul.sub-menu > li > a {
    transition: none !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-main-menu-hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li.hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open):hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open) > a:hover,
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open) > a:focus-visible,
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:focus-visible,
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:focus-visible {
    background: var(--ff-menu-hover-bg) !important;
    background-color: var(--ff-menu-hover-bg) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: inset 0 0 0 2px var(--ff-menu-hover-ring), 0 0 0 3px var(--ff-menu-hover-halo) !important;
    color: var(--ff-menu-hover-text) !important;
    outline: none !important;
    transition: none !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-main-menu-hover > a :is(.item-inner, .title, .item-media i, .icon-arrow),
body.ff-app #sidebar nav > ul.main-navigation-menu > li.hover > a :is(.item-inner, .title, .item-media i, .icon-arrow),
body.ff-app #sidebar nav > ul.main-navigation-menu > li:not(.active):not(.open):hover > a :is(.item-inner, .title, .item-media i, .icon-arrow),
body.ff-app #sidebar nav ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a :is(.title, i, .icon-arrow),
body.ff-app .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a :is(.title, i, .icon-arrow) {
    color: var(--ff-menu-hover-text) !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover,
body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open) > a:hover {
    background: var(--ff-menu-hover-bg) !important;
    background-color: var(--ff-menu-hover-bg) !important;
    color: var(--ff-menu-hover-text) !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:not(.active):not(.active-state):not(.open):hover > a {
    border-radius: var(--radius-sm) !important;
    box-shadow: inset 0 0 0 2px var(--ff-menu-hover-ring), 0 0 0 3px var(--ff-menu-hover-halo) !important;
}

/* Collapsed flyout rows are inside a scroll pane, so keep their row ring internal. */
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a:focus-visible,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
body.ff-app .app-sidebar-closed .app-aside > ul.sub-menu > li > a.active,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li:hover > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a:hover,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a:focus-visible,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.active-state > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li.open > a,
body.ff-app #app.app-sidebar-closed .app-aside > ul.sub-menu > li > a.active {
    box-shadow: inset 0 0 0 2px var(--ff-menu-hover-ring), inset 0 0 0 5px var(--ff-menu-hover-halo) !important;
    outline: none !important;
}

/* Full-width work mode.
   This is separate from app-sidebar-closed because the closed state drives the mini-sidebar flyout behaviour. */
body.ff-app #app.app-sidebar-hidden #sidebar,
body.ff-app #app.app-sidebar-hidden .app-aside {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app #app.app-sidebar-hidden .navbar .navbar-header {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ff-app #app.app-sidebar-hidden .navbar .navbar-collapse,
body.ff-app #app.app-sidebar-hidden .app-content,
body.ff-app #app.app-sidebar-hidden .main-content,
body.ff-app #app.app-sidebar-hidden > footer {
    margin-left: 0 !important;
}

body.ff-app #app.app-sidebar-hidden .navbar .navbar-collapse {
    left: 0 !important;
}

html body.ff-app #app.app-sidebar-hidden #historyTabs {
    left: 12px !important;
}

body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-sidebar-focus {
    align-items: center !important;
    align-self: center !important;
    display: inline-flex !important;
    float: none !important;
    height: var(--ff-topbar-height) !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 2px !important;
    position: relative !important;
    top: 0 !important;
}

body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-sidebar-focus > a {
    align-items: center !important;
    display: inline-flex !important;
    height: 32px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    width: 32px !important;
}

body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-sidebar-focus > a > span.title {
    align-items: center !important;
    display: inline-flex !important;
    height: 32px !important;
    justify-content: center !important;
    line-height: 1 !important;
    width: 32px !important;
}

body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg ul.nav.navbar-right > li.ff-topnav-sidebar-focus > a i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: translateY(1px) !important;
}

/* Final compact chrome lock: keep header actions and dashboard shortcuts compact after route changes. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header {
    margin-bottom: 6px !important;
    padding: 5px 10px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-page-header-row {
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-page-title-wrap {
    min-width: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-page-title {
    font-size: 18px !important;
    line-height: 1.05 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-fav-btn,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-icon-btn {
    height: 28px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    width: 28px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar {
    gap: 5px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    height: 36px !important;
    justify-content: center !important;
    max-width: 78px !important;
    min-height: 36px !important;
    min-width: 68px !important;
    overflow: hidden !important;
    padding: 3px 5px !important;
    width: 68px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) :is(i, .fa, .text30) {
    font-size: 13px !important;
    line-height: 1 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .sparkline,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .values {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .caret {
    margin-left: 2px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action-label, .values p) {
    color: currentColor !important;
    display: block !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .025em !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Final normal chrome lock: trim wasted space around page header toolbar buttons. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header {
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-page-header-row {
    align-items: center !important;
    gap: 8px 12px !important;
    min-height: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar {
    gap: 6px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) {
    gap: 4px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 4px 9px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action, .btn-group > .dropdown-toggle, button.dropdown-toggle, a.dropdown-toggle) :is(i, .fa, .text30) {
    font-size: 15px !important;
    line-height: 1 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar :is(.ff-action-label, .values p) {
    line-height: 1.05 !important;
    margin: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-menu {
    margin: 0 0 8px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-tiles {
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-tiles::before,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-tiles::after {
    content: none !important;
    display: none !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button {
    float: none !important;
    flex: 0 1 calc((100% - 30px) / 6) !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 160px !important;
    padding: 0 !important;
    width: auto !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button > a {
    display: block !important;
    height: 100% !important;
    padding: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .dashboard-panel {
    align-items: center !important;
    border-radius: 6px !important;
    display: flex !important;
    height: 44px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 44px !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .panel-body {
    align-items: center !important;
    display: flex !important;
    height: 44px !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    width: 100% !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .ff-tile-title,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-page:not(.ff-dashboard) .ff-dash-button .StepTitle {
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-menu {
    margin: 0 0 4px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-tiles {
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button {
    float: none !important;
    flex: 0 1 164px !important;
    max-width: 190px !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button > a {
    display: block !important;
    height: 100% !important;
    padding: 0 !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .dashboard-panel {
    align-items: center !important;
    border-radius: 6px !important;
    display: flex !important;
    height: 30px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 30px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .panel-body {
    align-items: center !important;
    display: flex !important;
    height: 30px !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    width: 100% !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .ff-tile-title,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) .ff-page .ff-dash-button .StepTitle {
    font-size: 13px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

/* Normal-mode filter alignment: keep ui-select/list fields level with text inputs. */
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-waybill-filter-grid,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-flow-row,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-inline-row {
    align-items: flex-start !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > label,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > label,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field > label {
    align-items: center !important;
    display: flex !important;
    gap: 4px !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 0 2px !important;
    min-height: 18px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field label .pull-right,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field label [json-dbl] {
    align-self: center !important;
    float: none !important;
    line-height: 16px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 18px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > .form-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > .ff-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field > .ui-select-container,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > .form-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > .ff-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .form-group > .ui-select-container,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field > .ff-control,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .dx-field > .ui-select-container,
body.ff-app:not([data-grid-density="compact"]):not(.ff-grid-density-compact) .ff-waybill:is(.ff-view-waybills, .ff-generate-invoice) .ff-filter-field .ff-dx {
    margin-top: 0 !important;
    width: 100% !important;
}

/* Generate Manifest final header/filter alignment.
   Keep these page-scoped so the accepted grid density and other pages stay untouched. */
body.ff-app .ff-generate-manifest {
    --ff-manifest-reference-field-w: 16.66666667%;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row,
body.ff-app .ff-generate-manifest .ff-manifest-lookup-row {
    gap: 2px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > [class*="col-"],
body.ff-app .ff-generate-manifest .ff-manifest-lookup-row > [class*="col-"] {
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-schedule-field,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-seal-field,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-comment-field,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-note-field,
body.ff-app .ff-generate-manifest .ff-manifest-lookup-row > .ff-manifest-lookup-field {
    flex: 0 1 var(--ff-manifest-reference-field-w) !important;
    max-width: var(--ff-manifest-reference-field-w) !important;
    min-width: 165px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-status-option {
    align-self: flex-start !important;
    padding-top: 15px !important;
}

body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-status-option .checkbox,
body.ff-app .ff-generate-manifest .ff-manifest-final-row > .ff-manifest-status-option .checkbox-inline {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    line-height: var(--ff-control-h) !important;
    margin: 0 !important;
    min-height: var(--ff-control-h) !important;
    padding-top: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-filter-driver,
body.ff-app .ff-generate-manifest .ff-filter-vehicle {
    flex: 1 1 240px !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field .form-group > label.width100,
body.ff-app .ff-generate-manifest .ff-filter-field .form-group > label:has([json-dbl]),
body.ff-app .ff-generate-manifest .ff-filter-field > label.width100,
body.ff-app .ff-generate-manifest .ff-filter-field > label:has([json-dbl]) {
    align-items: center !important;
    display: flex !important;
    gap: 4px !important;
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 0 1px !important;
    max-height: 16px !important;
    min-height: 16px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.ff-app .ff-generate-manifest .ff-filter-field label .pull-right,
body.ff-app .ff-generate-manifest .ff-filter-field label [json-dbl] {
    align-items: center !important;
    align-self: center !important;
    display: inline-flex !important;
    float: none !important;
    font-size: 9px !important;
    height: 12px !important;
    justify-content: center !important;
    line-height: 10px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    max-height: 12px !important;
    min-height: 12px !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Login responsive logo guard.
   Keep the banner inside its header when short windows collapse the login card. */
#login-box.ff-login .login-header {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
}

#login-box.ff-login .login-banner {
    box-sizing: border-box !important;
    height: calc(100% - 16px) !important;
    inset: 8px 14px !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain !important;
    position: absolute !important;
    width: 100% !important;
    width: calc(100% - 28px) !important;
}

/* Do not depend on an inline load handler to reveal the tenant logo. */
body.ff-app #login-box.ff-login .login-banner.ff-logo {
    opacity: 1 !important;
}

@media (max-height: 650px), (max-width: 480px) {
    #login-box.ff-login {
        align-content: start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #login-box.ff-login #login-container.login-container {
        max-height: none !important;
        overflow: visible !important;
    }

    #login-box.ff-login .login-header {
        height: clamp(104px, 27vh, 150px) !important;
        margin-bottom: 12px !important;
        min-height: 104px !important;
        padding: 8px 14px !important;
    }
}

/* Debriefing POD controls: keep bulk debrief fields aligned and compact. */
body.ff-app .ff-debriefing .ff-bulk-debrief-row {
    align-items: flex-end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row::before,
body.ff-app .ff-debriefing .ff-bulk-debrief-row::after {
    content: none !important;
    display: none !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row > [class*="col-"] {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row .form-group,
body.ff-app .ff-debriefing .ff-bulk-debrief-row .dx-field {
    margin: 0 !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row label {
    display: block !important;
    line-height: 18px !important;
    margin-bottom: 2px !important;
    min-height: 18px !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-row :is(.form-control, .ff-control, .ui-select-container, .input-icon, .dx-datebox, .dx-texteditor, .dx-texteditor-container) {
    box-sizing: border-box !important;
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    width: 100% !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-date {
    flex: 0 0 162px !important;
    min-width: 162px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-time {
    flex: 0 0 120px !important;
    min-width: 120px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-person {
    flex: 0 0 138px !important;
    min-width: 138px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-note {
    flex: 1 1 390px !important;
    max-width: 520px !important;
    min-width: 260px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-type {
    flex: 0 1 230px !important;
    min-width: 210px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-actions {
    align-items: flex-end !important;
    display: inline-flex !important;
    flex: 0 0 246px !important;
    gap: 8px !important;
    min-width: 246px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-actions .btn {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-btn {
    min-width: 138px !important;
}

body.ff-app .ff-debriefing .ff-bulk-debrief-clear {
    gap: 5px !important;
    min-width: 92px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-row > .ff-pod-action {
    align-items: flex-end !important;
    display: inline-flex !important;
    flex: 0 0 178px !important;
    gap: 6px !important;
    min-width: 178px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-action .btn,
body.ff-app .ff-waybill.ff-full-capture .ff-pod-action > .btn {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-pod-clear-action {
    gap: 5px !important;
    min-width: 72px !important;
}

/* Compact filter date ranges: keep both calendar icons optically centered. */
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon {
    height: var(--ff-control-h) !important;
    max-height: var(--ff-control-h) !important;
    min-height: var(--ff-control-h) !important;
    position: relative !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon > i.ti-calendar,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon > input.form-control:focus + i.ti-calendar,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact, [data-grid-font-size="small"]) .ff-page:not(.ff-login) .input-group.range-picker .input-icon > input.form-control:focus ~ i.ti-calendar {
    align-items: center !important;
    display: inline-flex !important;
    height: var(--ff-control-h) !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
}

/* Final selected-list placeholder guard.
   When a list/dropdown already has a value, keep the placeholder out of view
   so controls do not show "Select..." or "Search..." next to the chosen text. */
body.ff-app .ff-page:not(.ff-login) .ui-select-container.ng-not-empty .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .ui-select-bootstrap.ng-not-empty .ui-select-placeholder,
body.ff-app .ff-page:not(.ff-login) .dx-selectbox:not(.dx-texteditor-empty) .dx-placeholder,
body.ff-app .ff-page:not(.ff-login) .dx-dropdowneditor:not(.dx-texteditor-empty) .dx-placeholder,
body.ff-app .ff-page:not(.ff-login) .dx-texteditor:not(.dx-texteditor-empty) .dx-placeholder {
    display: none !important;
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}

/* Full capture freight calculation: preserve CHAR(13)/line breaks and spacing in rating output. */
.freight-calc {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* Full capture notes: keep the title visible and move add action out of the grid toolbar row. */
body.ff-app .ff-waybill.ff-full-capture fieldset.ff-notes-section {
    padding-top: 6px !important;
    position: relative;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-notes-section > legend {
    line-height: 16px !important;
    margin-bottom: 2px !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    width: auto !important;
}

body.ff-app .ff-waybill.ff-full-capture fieldset.ff-notes-section > .margin-bottom-10 {
    margin-bottom: 4px !important;
    margin-top: -2px !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-notes-add-btn {
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 1px rgba(27, 74, 140, .35) !important;
    display: inline-flex !important;
    height: 28px !important;
    justify-content: center !important;
    min-height: 28px !important;
    min-width: 34px !important;
    padding: 0 !important;
    position: absolute !important;
    right: 14px !important;
    top: 6px !important;
    width: 34px !important;
    z-index: 3;
}

body.ff-app .ff-waybill.ff-full-capture .ff-notes-add-btn i,
body.ff-app .ff-waybill.ff-full-capture .ff-notes-add-btn .fa {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app .ff-waybill.ff-full-capture .ff-notes-grid .dx-datagrid-header-panel {
    display: none !important;
}

/* Toolbar lock: fixed page action header without changing grid sizing. */
body.ff-app.ff-toolbar-locked #page-title.ff-page-header {
    box-sizing: border-box !important;
    left: var(--ff-toolbar-lock-left, 0px) !important;
    margin: 0 !important;
    max-width: none !important;
    position: fixed !important;
    right: auto !important;
    top: var(--ff-toolbar-lock-top, 44px) !important;
    width: var(--ff-toolbar-lock-width, 100vw) !important;
    z-index: 2600 !important;
}

body.ff-app .ff-toolbar-lock-spacer {
    display: block !important;
    height: var(--ff-toolbar-lock-height, 0px) !important;
    min-height: var(--ff-toolbar-lock-height, 0px) !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.ff-app:not(.ff-toolbar-locked) .ff-toolbar-lock-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle {
    align-items: center !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 36px !important;
    height: 36px !important;
    justify-content: center !important;
    max-width: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    width: 36px !important;
}

body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle i,
body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle .fa {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

body.ff-app.ff-toolbar-locked #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle,
body.ff-app #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle.ff-toolbar-lock-toggle--locked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary, #fff) !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle {
    flex-basis: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
}

body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle i,
body.ff-app:is([data-grid-density="compact"], .ff-grid-density-compact) #page-title.ff-page-header .ff-toolbar .ff-toolbar-lock-toggle .fa {
    font-size: 13px !important;
}

/* Keep the support screenshot button centred with the compact sidebar icon rail. */
@media (min-width: 768px) {
    body.ff-app .ff-shell .ff-topnav .navbar-header {
        align-items: center !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex: 0 0 70px !important;
        justify-content: center !important;
        max-width: 70px !important;
        min-width: 70px !important;
        padding: 0 !important;
        width: 70px !important;
    }

    body.ff-app .ff-shell .ff-topnav .navbar-header a.ff-support-screenshot-btn {
        float: none !important;
        left: 5px !important;
        margin: 0 !important;
        position: relative !important;
        right: auto !important;
        transform: none !important;
    }
}

/* Pilot module launchers use small local images and CSS-only interaction so
   they retain the side menu's immediate open, hover, and click feedback. */
body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-module-icon,
body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-new-badge {
    display: block !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-module-icon {
    flex: 0 0 36px !important;
    height: 36px !important;
    width: 36px !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .item-inner {
    flex: 1 1 auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: auto !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-new-badge {
    flex: 0 0 28px !important;
    height: 28px !important;
    margin: -2px 4px -2px auto !important;
    width: 28px !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item,
body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a,
body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .item-content {
    overflow: visible !important;
}

body.ff-app #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .item-content {
    position: relative !important;
}

/* The supplied pilot artwork is intentionally pale for the dark rail. Give
   it the same visible grey weight as the established icon font in light mode. */
body.ff-app:not([data-theme="dark"]) #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-module-icon {
    filter: brightness(0) saturate(100%) !important;
    opacity: .62 !important;
}

body.ff-app:not([data-theme="dark"]) #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item:hover > a .ff-menu-module-icon,
body.ff-app:not([data-theme="dark"]) #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a:focus-visible .ff-menu-module-icon {
    opacity: .88 !important;
}

body.ff-app[data-theme="dark"] #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-module-icon {
    filter: none !important;
    opacity: .9 !important;
}

/* Collapsed navigation hides .item-inner, so the NEW marker sits independently
   over the icon rail instead of disappearing with the caption. */
body.ff-app .app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-new-badge,
body.ff-app #app.app-sidebar-closed #sidebar nav > ul.main-navigation-menu > li.ff-pilot-menu-item > a .ff-menu-new-badge {
    flex: none !important;
    height: 24px !important;
    margin: 0 !important;
    position: absolute !important;
    right: 2px !important;
    top: -2px !important;
    width: 24px !important;
    z-index: 3 !important;
}

/* First-visit pilot introduction. This remains local and paint-only until the
   user chooses to open the separately secured module. */
body.ff-app .ff-pilot-intro-backdrop {
    align-items: center !important;
    background: rgba(9, 18, 32, .66) !important;
    display: flex !important;
    inset: 0 !important;
    justify-content: center !important;
    padding: 20px !important;
    position: fixed !important;
    z-index: 30050 !important;
}

body.ff-app .ff-pilot-intro {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #d7dee8) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .3) !important;
    color: var(--text, #1e293b) !important;
    max-width: 540px !important;
    padding: 26px !important;
    position: relative !important;
    width: 100% !important;
}

body.ff-app .ff-pilot-intro__close {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--text-muted, #64748b) !important;
    display: flex !important;
    font-size: 24px !important;
    height: 34px !important;
    justify-content: center !important;
    padding: 0 !important;
    position: absolute !important;
    right: 14px !important;
    top: 12px !important;
    width: 34px !important;
}

body.ff-app .ff-pilot-intro__eyebrow {
    color: var(--primary, #2563eb) !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    margin-bottom: 5px !important;
}

body.ff-app .ff-pilot-intro h2 {
    color: var(--text, #1e293b) !important;
    font-size: 26px !important;
    margin: 0 38px 8px 0 !important;
}

body.ff-app .ff-pilot-intro > p {
    color: var(--text-muted, #64748b) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
}

body.ff-app .ff-pilot-intro ul {
    color: var(--text, #1e293b) !important;
    display: grid !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    padding-left: 20px !important;
}

body.ff-app .ff-pilot-intro__note {
    background: color-mix(in srgb, var(--primary, #2563eb) 8%, var(--surface, #fff)) !important;
    border: 1px solid color-mix(in srgb, var(--primary, #2563eb) 25%, var(--border, #d7dee8)) !important;
    border-radius: 8px !important;
    display: grid !important;
    gap: 3px !important;
    margin-bottom: 20px !important;
    padding: 12px 14px !important;
}

body.ff-app .ff-pilot-intro__note span {
    color: var(--text-muted, #64748b) !important;
    line-height: 1.45 !important;
}

body.ff-app .ff-pilot-intro__error {
    background: color-mix(in srgb, var(--danger, #dc2626) 9%, var(--surface, #fff)) !important;
    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 35%, var(--border, #d7dee8)) !important;
    border-radius: 8px !important;
    color: var(--danger, #b91c1c) !important;
    line-height: 1.45 !important;
    margin: -8px 0 18px !important;
    padding: 10px 12px !important;
}

body.ff-app .ff-pilot-intro footer {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

/* Per-page report preview switch beside Companion; no extra stylesheet request. */
html body.ff-app .ff-topnav-bg .nav.navbar-right > li.ff-topnav-preview {
    display: inline-flex !important; align-items: center !important; align-self: center !important;
    height: var(--ff-topbar-height) !important; float: none !important; margin: 0 4px 0 0 !important; padding: 0 !important;
}
html body.ff-app .ff-topnav-preview .ff-report-preview-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 32px; padding: 0 8px; border: 1px solid currentColor; border-radius: 16px;
    background: transparent; color: inherit; font: inherit; font-size: 12px; line-height: 1; white-space: nowrap;
}
html body.ff-app .ff-topnav-preview .ff-report-preview-toggle.is-active { background: var(--surface, #fff); color: var(--text, #222); }
html body.ff-app .ff-topnav-preview .ff-report-preview-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html body.ff-app .ff-topnav-preview .ff-preview-toggle-state { font-size: 10px; font-weight: 700; }
html body.ff-app .ff-topnav-preview .ff-report-preview-toggle:disabled { opacity: .6; cursor: default; }