/* ============================================
   ADVICE ONLINE - SIDEBAR NAVIGATION
   Layout: Sidebar (left, 240px) + Content (810px) + Background fill
   Everything starts at top-left (0,0) of the browser window.
   ============================================ */

/* --- GLOBAL RESET FOR NEW LAYOUT --- */

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    overflow-x: auto;
}

body {
    background: #fff !important;
}

/* --- MAIN APP CONTAINER --- */

.ao-app {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    position: relative;
    background-attachment: fixed;
}

/* Kill the old centered wrapper */
.ao-app .wrapper {
    width: auto !important;
    margin: 0 !important;
    min-height: 100vh;
    height: auto;
    display: contents;
}

.ao-app .wrapper > form {
    display: contents;
    height: auto;
}

/* --- SIDEBAR (240px, full height, flush left) --- */

.ao-sidebar {
    width: 240px;
    min-width: 240px;
    flex: 0 0 240px;
    color: #fff;
    font-family: Conv_GOTHIC, Arial, sans-serif;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    order: 1;
}

/* User info block at top of sidebar: 129px so 1px delimiter + first item aligns with content at 130px */
.ao-sidebar-userinfo {
    height: 129px;
    min-height: 129px;
    max-height: 129px;
    box-sizing: border-box;
    padding: 12px 15px;
    font: 10px/15px Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.75);
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.ao-sidebar-email {
    color: #fff;
    display: block;
    font-size: 11px;
    text-align: right;
}

/* Language selector inside sidebar */
.ao-sidebar-userinfo .ao-lang-selector {
    margin-top: 6px;
}

.ao-sidebar-userinfo .ao-lang-selector a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    text-decoration: none;
    margin-right: 4px;
}

.ao-sidebar-userinfo .ao-lang-selector a:hover,
.ao-sidebar-userinfo .ao-lang-selector a.activeLg {
    color: #fff;
}

/* Logo inside sidebar */
.ao-sidebar-logo {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ao-sidebar-logo img {
    max-width: 200px;
    max-height: 50px;
    display: block;
}

/* --- SIDEBAR MENU --- */

/* The menu is a 192px-wide block, offset 48px from the left sidebar edge */
.ao-sidebar-menu {
    list-style: none;
    margin: 0 0 0 48px;
    padding: 0;
    width: 192px;
    float: none;
    flex: 1;
    /* Top separator line before first item */
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Each main topic row: fixed 26px height + 1px bottom separator */
.ao-sidebar-menu > li {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Main topic links and toggle spans: 10px left padding within the 192px */
.ao-sidebar-menu > li > a,
.ao-sidebar-menu > li > span.ao-sidebar-toggle {
    display: block;
    width: auto !important;
    height: 28px !important;
    line-height: 28px;
    padding: 0 0 0 10px !important;
    color: #fff;
    text-decoration: none;
    font: normal 14px/28px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    letter-spacing: 0.3px;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Hover: white bg spanning full 192px row */
.ao-sidebar-menu > li > a:hover,
.ao-sidebar-menu > li > span.ao-sidebar-toggle:hover {
    background-color: #fff;
    text-decoration: none;
}

/* Active (selected) main topic: white bg, font color = sidebar bg color */
.ao-sidebar-menu > li.ao-active > a,
.ao-sidebar-menu > li.ao-active > span.ao-sidebar-toggle {
    background-color: #fff;
    color: inherit;
}

/* Expandable toggle: use flex to push arrow to the right */
.ao-sidebar-menu > li > span.ao-sidebar-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px !important;
}

/* Expand/collapse arrow (right-aligned) */
.ao-sidebar-menu > li > span.ao-sidebar-toggle::after {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.6);
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.ao-sidebar-menu > li.ao-active > span.ao-sidebar-toggle::after {
    border-top-color: inherit;
}

.ao-sidebar-menu > li.ao-expanded > span.ao-sidebar-toggle::after {
    transform: rotate(180deg);
}

/* --- SUBMENU --- */

.ao-sidebar-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    float: none;
}

.ao-sidebar-menu > li.ao-expanded > .ao-sidebar-submenu {
    display: block;
}

/* Each sub-item row: same 26px height, 1px separator */
.ao-sidebar-submenu > li {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Remove double border on last sub-item (parent li already has bottom border) */
.ao-sidebar-submenu > li:last-child {
    border-bottom: none;
}

/* Subcategory links: 30px left padding within the 192px (indented from main topics) */
.ao-sidebar-submenu > li > a {
    display: block;
    width: auto !important;
    height: 28px !important;
    line-height: 28px;
    padding: 0 0 0 30px !important;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font: normal 14px/28px Conv_GOTHIC, Arial, sans-serif;
    text-transform: none;
    background: none;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hover: white bg spanning full 192px row */
.ao-sidebar-submenu > li > a:hover {
    background-color: #fff;
    text-decoration: none;
}

/* Active (selected) sub-item: white bg, font color = sidebar bg color */
.ao-sidebar-submenu > li.ao-sub-active > a {
    background-color: #fff;
    color: inherit;
}

/* Disabled items */
.ao-sidebar-submenu > li.ao-disabled > a {
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    cursor: default;
}

/* Expandable sub-items (e.g. Content Sharing with Teilen/Nutzen children) */
.ao-sidebar-submenu > li.ao-sub-expandable > a {
    cursor: pointer;
}

/* --- SUB-SUB-MENU (e.g. Teilen / Nutzen) --- */

.ao-sidebar-subsubmenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    float: none;
}

.ao-sidebar-submenu > li.ao-sub-expanded > .ao-sidebar-subsubmenu {
    display: block;
}

/* Each sub-sub-item row: same height, 1px separator */
.ao-sidebar-subsubmenu > li {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Remove double border on last sub-sub-item */
.ao-sidebar-subsubmenu > li:last-child {
    border-bottom: none;
}

/* Sub-sub-category links: 50px left padding (20px further than sub-cats) */
.ao-sidebar-subsubmenu > li > a {
    display: block;
    width: auto !important;
    height: 28px !important;
    line-height: 28px;
    padding: 0 0 0 50px !important;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font: normal 14px/28px Conv_GOTHIC, Arial, sans-serif;
    text-transform: none;
    background: none;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hover: white bg spanning full 192px row */
.ao-sidebar-subsubmenu > li > a:hover {
    background-color: #fff;
    text-decoration: none;
}

/* Active (selected) sub-sub-item: white bg, font color = sidebar bg color */
.ao-sidebar-subsubmenu > li.ao-subsub-active > a {
    background-color: #fff;
    color: inherit;
}

/* --- CONTENT FRAME (810px, white, full height) --- */

.ao-content-frame {
    flex: 0 0 810px;
    width: 810px;
    min-width: 810px;
    max-width: 810px;
    background: #fff;
    position: relative;
    min-height: 100vh;
    order: 2;
    padding-top: 131px;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- LOGO IN CONTENT TOP AREA (131px header zone) --- */

.ao-content-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 131px;
    box-sizing: border-box;
    padding-top: 30px;
    padding-left: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
}

.ao-content-logo img {
    max-height: 70px;
    width: auto;
    display: block;
    pointer-events: auto;
}

/* --- CRM QUICK-LIST (500px white panel, right of content, hidden by default) --- */
/* Shown on CRM pages via Crm.css override */

.ao-crm-list {
    display: none;
    flex: 0 0 500px;
    width: 500px;
    min-width: 500px;
    max-width: 500px;
    background: #fff;
    height: 100vh;
    order: 3;
    margin-left: 10px;
    box-sizing: border-box;
    padding-top: 131px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow: hidden;
}

/* Wizard start buttons in the 131px padding zone */
.ao-wizard-btns {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 2;
}

/* CRM quick-list scope (I / III) — same vertical band as wizard row, left */
.ao-crm-scope-top {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    z-index: 2;
    height: 24px;
}

button.ao-crm-scope-top-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: #59768D;
    color: #fff;
    font: 11px/1 Conv_GOTHIC, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.ao-crm-scope-top-btn:hover {
    background-color: #4D5A65;
    color: #fff;
}

button.ao-crm-scope-top-btn.ao-crm-scope-top-btn-active {
    background-color: #b8d9b8;
    color: #2a4a2a;
}

button.ao-crm-scope-top-btn.ao-crm-scope-top-btn-active:hover {
    background-color: #a8cfa8;
    color: #1f361f;
}
.ao-wizard-row {
    display: flex;
    gap: 8px;
}
.ao-wizard-btn {
    display: block;
    width: 120px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    background-color: #59768D;
    color: #fff;
    font: 11px/24px Conv_GOTHIC, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.15s;
}
.ao-wizard-btn.ao-wizard-ps {
    width: 248px;
}
.ao-wizard-btn:hover {
    background-color: #4D5A65;
    color: #fff;
    text-decoration: none;
}
.ao-wizard-wcdate {
    text-transform: none;
    letter-spacing: 0;
}

.ao-wizard-daily-btn {
    background: #59768D !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    min-width: 78px;
    text-align: center;
    border: none;
}

.ao-wizard-daily-btn.ao-wizard-daily-off {
    border-right: 10px solid #BC544B !important;
}

.ao-wizard-daily-btn.ao-wizard-daily-on {
    border-left: 10px solid #7A9A65 !important;
}

.ao-wizard-daily-btn.ao-wizard-daily-busy {
    opacity: 0.5;
    pointer-events: none;
}

.ao-crm-list-header {
    margin-top: -2px;
    padding: 0 15px;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.ao-crm-ctrl-row {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.ao-crm-list-search {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #c1cad2;
    border-radius: 3px 0 0 3px;
    font: normal 13px/32px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    outline: none;
    transition: border-color 0.15s;
}

.ao-crm-list-search:focus {
    border-color: #4D5A65;
}

.ao-crm-list-search::placeholder {
    color: #aab4bc;
}

.ao-crm-reset-btn {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 0 3px 3px 0;
    background: #4D5A65;
    color: #fff;
    font: normal 11px/32px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.ao-crm-reset-btn:hover {
    background: #3a454e;
}

.ao-crm-filter-row {
    margin-top: 6px;
    gap: 4px;
}

.ao-crm-name-sort {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    padding: 0 10px 0 8px;
    position: relative;
    border: 1px solid #4D5A65;
    border-radius: 3px;
    background: #4D5A65;
    color: #fff;
    font: normal 11px/26px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    text-align: left;
}

.ao-crm-name-sort:hover {
    background: #3a454e;
}

.ao-crm-sort-arrow {
    font-size: 8px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Custom div-based dropdown (invisible to selectik plugin) */
.ao-crm-dd {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

.ao-crm-dd-display {
    height: 28px;
    padding: 0 20px 0 8px;
    border: 1px solid #c1cad2;
    border-radius: 3px;
    background: #fff;
    color: #aab4bc;
    font: normal 11px/28px Conv_GOTHIC, Arial, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234D5A65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color 0.15s;
}

.ao-crm-dd-display.ao-crm-dd-active {
    color: #4D5A65;
}

.ao-crm-dd-display:hover,
.ao-crm-dd-open .ao-crm-dd-display {
    border-color: #4D5A65;
}

.ao-crm-dd-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c1cad2;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
}

.ao-crm-dd-open .ao-crm-dd-list {
    display: block;
}

.ao-crm-dd-item {
    padding: 5px 8px;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-crm-dd-item:hover {
    background: #f0f3f6;
}

.ao-crm-dd-item-reset {
    color: #8a9aa8;
    border-bottom: 1px solid #edf0f2;
}

.ao-crm-count {
    margin-top: 4px;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    text-align: right;
}

.ao-crm-list-body {
    padding: 6px 15px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    flex: 1 1 0;
    position: relative;
}

.ao-crm-vscroll {
    position: relative;
    width: 100%;
}

.ao-crm-vcontent {
    position: relative;
    width: 100%;
}

.ao-crm-row {
    position: absolute;
    left: 0;
    right: 0;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    text-decoration: none;
    color: #4D5A65;
    border-bottom: 1px solid #edf0f2;
    transition: background 0.1s;
    cursor: pointer;
}

.ao-crm-row-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.ao-crm-shortcuts {
    display: flex;
    gap: 5px;
    align-items: center;
    padding-right: 5px;
    flex-shrink: 0;
}

.ao-crm-sc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #59768D;
    color: #fff;
    font: normal 9px/1 Conv_GOTHIC, Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.ao-crm-sc:hover {
    opacity: 0.85;
}
.ao-crm-doc-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    opacity: 1 !important;
}
.ao-crm-doc-urgent {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    opacity: 1 !important;
}
.ao-crm-doc-overdue {
    background-color: #e4606d !important;
    color: #fff !important;
    opacity: 1 !important;
}

.ao-crm-row:hover {
    background: #f0f3f6;
    text-decoration: none;
    color: #4D5A65;
}

.ao-crm-row-active {
    background: #e8edf2;
    border-left: 3px solid #4D5A65;
    padding-left: 7px;
}

.ao-crm-row-name {
    font: normal 13px/17px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-crm-row-ptf {
    font: normal 10px/14px Conv_GOTHIC, Arial, sans-serif;
    padding: 0 5px;
    border-radius: 2px;
    background: #d6e4e3;
    color: #3D5958;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ao-crm-row-meta {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 1px;
}

.ao-crm-badge {
    font: normal 10px/14px Conv_GOTHIC, Arial, sans-serif;
    padding: 0 5px;
    border-radius: 2px;
    background: #e3e6e9;
    color: #5a6a78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ao-crm-badge.ao-crm-tt {
    background: #dce4ea;
}

.ao-crm-badge.ao-crm-ccy {
    background: #d4e4f7;
    color: #3a6a9b;
}

.ao-crm-badge.ao-crm-cc {
    background: #D4E4F7;
    color: #3a6a9b;
}

.ao-crm-list[data-quicklist="portfolios"] .ao-crm-badge.ao-crm-st-1 {
    background: #9ee0a0;
    color: #1f4f24;
}

.ao-crm-list[data-quicklist="portfolios"] .ao-crm-badge.ao-crm-st-3 {
    background: #e5abab;
    color: #5e1717;
}

.ao-crm-badge.ao-crm-ke {
    background: #E0CACA;
    color: #8b4a4a;
}

.ao-crm-badge.ao-crm-wc-low {
    background: #7A9A65;
    color: #ffffff;
}

.ao-crm-badge.ao-crm-wc-mid {
    background: #D4B84B;
    color: #4D5A65;
}

.ao-crm-badge.ao-crm-wc-high {
    background: #BC544B;
    color: #ffffff;
}

.ao-crm-radar {
    font: normal 10px/14px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    padding: 0 6px;
    border-radius: 2px;
    white-space: nowrap;
    color: #4D5A65;
}

.ao-crm-radar.ao-crm-radar-green {
    background: #c6dfc8;
}

.ao-crm-radar.ao-crm-radar-green-yellow {
    background: #dce7b9;
}

.ao-crm-radar.ao-crm-radar-yellow {
    background: #efe7b9;
}

.ao-crm-radar.ao-crm-radar-yellow-orange {
    background: #ead5bf;
}

.ao-crm-radar.ao-crm-radar-red {
    background: #e6c3c1;
}

.ao-crm-error {
    padding: 20px;
    text-align: center;
    color: #8a9aa8;
    font: normal 13px/18px Conv_GOTHIC, Arial, sans-serif;
}

/* --- BACKGROUND FILL (remaining space to the right, stretched to fill) --- */

.ao-bg-fill {
    flex: 1 1 auto;
    min-width: 0;
    background-image: none !important;
    order: 4;
}

/* --- HIDE OLD HEADER (no separate header bar) --- */

.ao-header {
    display: none !important;
}

/* --- HIDE OLD NAVIGATION ELEMENTS --- */

.ao-app .nav {
    display: none !important;
}

.ao-app .navR {
    display: none !important;
}

/* ======================================================================
   WIZARD MODAL: repositioned to align with main app layout
   ====================================================================== */

/* Hide sidebar menu on the wizard page (main wizard panel has no .subPopup) */
.ao-app:has(.editPageBlock.modalPop:not(.subPopup) > .pullPopup) .ao-sidebar .ao-sidebar-menu {
    visibility: hidden;
}

/* Container: reset old centering offsets, enable vertical scrolling (main wizard only) */
.ao-app .editPageBlock.modalPop:not(.subPopup) {
    left: 0 !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
}

/* Panel: CSS Grid — nav in col 1, content + footer in col 2 (main wizard only) */
.ao-app .editPageBlock.modalPop:not(.subPopup) > .pullPopup {
    display: grid !important;
    grid-template-columns: 210px auto !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 130px 0 60px 30px !important;
    width: auto !important;
    height: auto !important;
}

/* UpdatePanel + closePull: transparent to grid so children become grid items */
.ao-app .editPageBlock.modalPop:not(.subPopup) > .pullPopup > .editPageBlock,
.ao-app .editPageBlock.modalPop:not(.subPopup) > .pullPopup > .closePull {
    display: contents !important;
}

/* Default: all UpdatePanel children go to column 2 */
.ao-app .editPageBlock.modalPop:not(.subPopup) > .pullPopup > .editPageBlock > * {
    grid-column: 2 !important;
}

/* Darken the overlay behind the wizard */
.ao-app .bgPull {
    opacity: 0.65 !important;
}

/* --- WIZARD LEFT NAVIGATION (mirrors sidebar design, main wizard only) --- */

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL {
    display: block !important;
    grid-column: 1 !important;
    width: 210px !important;
    height: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: sticky !important;
    top: 130px !important;
    align-self: start !important;
}

/* SCHLIESSEN label: always first, above the category list */
.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL::before {
    content: "SCHLIESSEN";
    display: block;
    height: 28px;
    line-height: 28px;
    padding: 0 0 0 10px;
    color: rgba(255, 255, 255, 0.85);
    font: normal 14px/28px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL ul {
    float: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL li {
    padding: 0 !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL li span.notification {
    display: none !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    color: #fff !important;
    font: normal 14px/28px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL li a:hover {
    background-color: #fff !important;
    color: #4D5A65 !important;
    text-decoration: none !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .navL li a.active {
    background-color: #fff !important;
    color: #4D5A65 !important;
}

/* --- CLOSE LINK: invisible fixed overlay aligned with navL::before --- */

.ao-app .closePull a#lbtnCloseModal {
    position: fixed !important;
    top: 130px !important;
    left: 30px !important;
    width: 210px !important;
    height: 28px !important;
    z-index: 10001 !important;
    display: block !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer !important;
    float: none !important;
}

.ao-app .closePull a#lbtnCloseModal::after {
    content: none;
}

/* --- WIZARD CONTENT & FOOTER: column 2 --- */

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .contentPull {
    grid-column: 2 !important;
}

/* CRM name: positioned in the 130px header area, above the white content box */
.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .contentPull.wizard {
    position: relative !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .wizard .qBreadcrumbs {
    position: static !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .pullPopup .wizard .qBreadcrumbs span.crm-name-watermark {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    right: 10px !important;
    top: auto !important;
    left: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    color: #fff !important;
    font: normal 14px/20px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: none !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .naviStep {
    grid-column: 2 !important;
    padding-left: 0 !important;
}


/* --- WIZARD RIGHT-SIDE BUTTONS: moved to left column, bottom-aligned --- */

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom {
    display: block !important;
    position: fixed !important;
    left: 30px !important;
    width: 210px !important;
    bottom: calc(100vh - 564px) !important;
    height: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    top: auto !important;
    z-index: 10000 !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    color: #fff !important;
    font-size: 0 !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    background-image: none !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li a::after {
    font: normal 14px/28px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: inherit;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li a.btn-CQPH::after {
    content: "SIMULATOR";
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li a.btn-CQPD::after {
    content: "PROFIL-VERTEILUNG";
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li a.btn-CQVQnOP::after {
    content: "PROFILIERUNG VERGL.";
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li a:hover {
    background-color: #fff !important;
    color: #4D5A65 !important;
    text-decoration: none !important;
}

.ao-app .editPageBlock.modalPop:not(.subPopup) .navR.navBottom li a.active {
    background-color: #fff !important;
    color: #4D5A65 !important;
}

/* ======================================================================
   END WIZARD MODAL
   ====================================================================== */

/* --- WIZARD SUB-POPUPS (tickmap, distribution, simulator): SCHLIESSEN + layout --- */

/* Make these sub-popups fullscreen overlays like the main wizard */
.ao-app .editPageBlock.modalPop.tickmap,
.ao-app .editPageBlock.modalPop.outerPopup {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
}

/* Position pullPopup to match wizard content box coordinates */
.ao-app .tickmap .pullPopup,
.ao-app .outerPopup .pullPopup {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    padding: 90px 0 60px 240px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
}

/* Remove the old 60px content indent — handled by pullPopup padding now */
.ao-app .tickmap .contentPull,
.ao-app .outerPopup .contentPull {
    margin-left: 0 !important;
}

.ao-app .tickmap .naviStep,
.ao-app .outerPopup .naviStep {
    margin-left: 0 !important;
}

/* Hide the X image on the close button, replace with SCHLIESSEN */
.ao-app .tickmap .closePull,
.ao-app .outerPopup .closePull {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    position: static !important;
}

.ao-app .tickmap .closePull a,
.ao-app .outerPopup .closePull a {
    position: fixed !important;
    top: 130px !important;
    left: 30px !important;
    width: 210px !important;
    height: 28px !important;
    z-index: 10001 !important;
    display: block !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 28px !important;
    text-decoration: none !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer !important;
    float: none !important;
    box-sizing: border-box !important;
}

.ao-app .tickmap .closePull a::before,
.ao-app .outerPopup .closePull a::before {
    content: "SCHLIESSEN";
    font: normal 14px/28px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Keep CQPH simulator panel above wizard grid/overlay */
.ao-app #pnlMultiSimulatorWidget {
    z-index: 10020 !important;
}

.ao-app #pnlMultiSimulatorWidget .pullPopup {
    z-index: 10021 !important;
    padding-top: 89px !important;
}

    .ao-app #pnlMultiSimulatorWidget .contentPull {
        position: relative !important;
        z-index: 10022 !important;
        display: block !important;
        background: #ffffff !important;
        min-height: 520px !important;
        max-width: none;
        padding: 0;
    }

.ao-app #pnlMultiSimulatorWidget #simulator-widget-container {
    display: block !important;
    width: 810px !important;
    min-height: 520px !important;
}

.ao-app .bgWrapper {
    background: none;
}

.ao-app .loggedIn {
    display: none !important;
}

/* --- OVERRIDE OLD LAYOUT STYLES --- */

.ao-app .header {
    display: none !important;
}
.ao-app .dashboard-section .header {
    display: flex !important;
    align-items: center;
    margin-right: -20px !important;
}

.ao-app .dashboard-section .header .header-arrow {
    margin-left: auto;
    float: none !important;
    background-image: none !important;
    background-size: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 11px;
    color: #8a9aa8;
    flex: 0 0 auto;
}
.ao-app .dashboard-section .header .header-arrow::after {
    content: '\25BC';
}
.ao-app .dashboard-section .header .header-arrow.expanded::after {
    content: '\25B2';
}
.ao-app .dashboard-section .header .header-text {
    font: normal 15px/20px Conv_GOTHIC, Arial, sans-serif !important;
    width: auto !important;
    flex: 1 1 auto;
    padding: 0 !important;
}

.ao-app .content-holder {
    float: none;
    width: auto;
    position: static;
}

.ao-app .bgImg {
    display: none !important;
}

/* --- CONTENT AREA ADJUSTMENTS --- */

/* Remove the colored border: keep 10px padding but force white background */
.ao-app .content,
.ao-app .content.onlineForm {
    width: auto;
    background-color: #fff !important;
}

.ao-app .contentPull {
    width: auto;
    max-width: 790px;
}

/* Customise wrapper: remove CI color background, enforce width */
.ao-app .customise,
.ao-app .customise.customColor1 {
    width: 100% !important;
    max-width: 810px !important;
    background-color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* --- UNIVERSAL PAGE LAYOUT: 3 rows (Title 50px + Action 50px + Content) --- */
/* All containers inside .ao-content-frame are reset to 0 padding/margin/width auto,
   then the title h4 and content get consistent 30px horizontal padding. */

/* --- Container Reset: remove ALL intermediate padding so we control it precisely --- */
.ao-app .content,
.ao-app .content.onlineForm,
.ao-app .content.archive {
    width: 100% !important;
    max-width: 810px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.ao-app .customiseForm {
    width: 100% !important;
    max-width: 810px !important;
    padding: 0 30px 20px 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ao-app .contactFormPopup {
    width: 100% !important;
    max-width: 810px !important;
    padding: 0 30px 20px 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.ao-app .archiveBlock {
    width: 100% !important;
    max-width: 810px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
}

.ao-app .onlineArchive {
    width: 100% !important;
    max-width: 810px !important;
    padding: 0 30px 20px 30px !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Reset .module and .formSolutions padding/width (Module.css, Site.css) */
.ao-app .module {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ao-app .formSolutions {
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}
/* Row delimiters for .profile-table ONLY (ContentSharing / ContentUsing) */
.ao-app .custom-table.profile-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    margin-top: -10px !important;  /* compensate for top border-spacing */
}
.ao-app .profile-table th div.box,
.ao-app .profile-table td div.box {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.ao-app .profile-table td {
    padding: 0 !important;
    vertical-align: top !important;
}
.ao-app .profile-table td div.group-btn {
    float: none !important;
}
.ao-app .profile-table td input.isin {
    margin: 0 !important;
    float: none !important;
}

/* --- CRM LIST (Crms.aspx) --- */
/* Hide "Neue Beratung starten" button in table header */
.ao-app .data_tableCRM th div.new-advisoryProcess {
    display: none !important;
}
/* Ensure consistent 10px horizontal gaps — exclude .columnM which also has .solutSpace */
.ao-app .data_tableCRM td.solutSpace:not(.columnM),
.ao-app .data_tableCRM th.solutSpace:not(.columnM) {
    width: 10px !important;
    min-width: 10px !important;
    padding: 0 !important;
}
/* Reduce dropdown columns to free space for gaps */
.ao-app table.data_tableCRM .columnS {
    width: 100px !important;
}
.ao-app table.data_tableCRM .columnS span {
    width: 90px !important;
}
/* Button column: fit Edit + 10px gap + KYC side by side */
.ao-app table.data_tableCRM .columnM {
    width: 120px !important;
}
.ao-app .data_tableCRM .group-btn {
    display: flex !important;
    flex-wrap: nowrap !important;
    float: none !important;
    gap: 10px;
}
.ao-app .data_tableCRM .group-btn .btn {
    min-width: 0 !important;
    white-space: nowrap !important;
    float: none !important;
    margin: 0 !important;
}
/* KYC button: navigation style — darker color, wider, with right arrow */
.ao-app .data_tableCRM .group-btn .btn.btnKYC {
    background-color: #59768D !important;
    padding-right: 22px !important;
    position: relative !important;
}
.ao-app .data_tableCRM .group-btn .btn.btnKYC::after {
    content: '\25B6' !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 8px !important;
    color: #fff !important;
    line-height: 1 !important;
}
/* Fix dropdown arrow button height to match the bordered text area */
.ao-app .data_tableCRM th.filter .tfSelectWrapper div a.button {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: 19px !important;
    right: -1px !important;
}
/* CRM table: fixed layout so columns don't resize when switching to edit mode */
.ao-app table.data_tableCRM {
    table-layout: fixed !important;
}
.ao-app .data_tableCRM td div.box-no-padding-long a {
    width: 260px !important;
}
/* Filter row: align search/filter/reset with table columns below */
.ao-app .crm-list .crm-filter {
    display: flex !important;
    float: none !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}
.ao-app .crm-list .crm-filter * {
    float: none !important;
}
.ao-app .crm-list .crm-filter .crm-filter-name-input {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
}
.ao-app .crm-list .crm-filter .crm-filter-button,
.ao-app .crm-list .crm-filter .crm-filter-reset-button {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Hide the "press GO" leading instruction paragraph on Profile pages */
.ao-app .customiseForm > p:first-child {
    display: none !important;
}

/* Remove empty .error-box gap (Module.css sets min-height: 30px + padding-bottom: 10px) */
.ao-app .error-box {
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

/* --- ROW 1: PAGE TITLE (50px height) — CRM pages only --- */
/* Non-CRM pages: title is redundant since sidebar navigation shows location */
/* Hide all h4 titles on DATEIEN, PROFIL, ANLEGEN, FINANZIEREN pages */
.ao-app .contactFormPopup h4,
.ao-app .customiseForm .formAccount > h4,
.ao-app .customiseForm .module > h4,
.ao-app .customiseForm .formSolutions > h4,
.ao-app .customiseForm .formListInstr h4,
.ao-app .customiseForm .module_formAR > h4,
.ao-app .onlineArchive > h4 {
    display: none !important;
}

/* CRM pages: keep the CRM name as title (Crms.aspx + CrmPlus.master pages) */
.ao-app .crm-title h4,
.ao-app .titleContent h4 {
    display: flex !important;
    align-items: flex-start !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    font: 18px/22px Conv_GOTHICB, Arial, sans-serif !important;
    text-transform: uppercase !important;
    color: #4D5A65 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* --- ROW 2: ACTION ROW (50px height, top-aligned content) --- */
/* CRM List: action buttons row */
.ao-app .crm-action-buttons {
    display: flex !important;
    align-items: flex-start !important;
    height: 50px !important;
    min-height: 50px !important;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex-direction: row !important;
}

/* CRM Detail: title panel contains title + action row */
/* Title row is #divTitle > h4 (already styled above) */
/* Action row: buttons + worldcheck + dropdown all in one line */
.ao-app .customiseForm .titleContent.clear-fix {
    display: flex !important;
    flex-wrap: wrap !important;
}
.ao-app .customiseForm .titleContent #divTitle {
    width: 100% !important;
    flex: 0 0 100% !important;
}
.ao-app .fin-inv-start-btns.crm-action-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    gap: 10px !important;
}
.ao-app .refinitiv-world-check-btns,
.ao-app .namescan-world-check-btns {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    height: 50px !important;
    min-height: 50px !important;
    gap: 10px;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* CRM dropdown + prev/next buttons: removed from CrmPlus.master */

/* FileFolder: file controls row */
.ao-app .onlineArchive .fileControl {
    display: flex !important;
    align-items: flex-start !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* CRM List: #crmTitle width override (Crm.css sets calc(100% - 230px)) */
.ao-app #crmTitle {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* CRM Journal: title above journal table */
.ao-app .crm-journal-title {
    margin-top: 40px;
    margin-bottom: 15px;
    font: normal 15px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4d5a65;
}

/* CRM Detail: title-panel override (crm-journal.css sets padding 0 30px 0 20px) */
.ao-app .customiseForm .title-panel {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* --- ROW 3: CONTENT (everything below the first two rows) --- */
/* Content already flows naturally with the 30px container padding */

/* Journal table: remove extra left/right padding so it aligns with the 30px container padding */
.ao-app .crm-journal .crm-journal-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.ao-app .crm-journal .crm-journal-list .header-row {
    width: 100% !important;
}
/* Widen Beschreibung column to absorb recovered padding (minus 20px for button breathing room) */
.ao-app .crm-journal .crm-journal-list .header-row div.columnDescription,
.ao-app .crm-journal .crm-journal-list .columnDescription {
    width: 373px !important;
}
.ao-app .crm-journal .crm-journal-list div.add-new-item-row textarea.description {
    width: 353px !important;
}
.ao-app .crm-journal .crm-journal-list div.add-new-item-row input.isin {
    width: 400px !important;
}
.ao-app .crm-journal .crm-journal-list div.add-new-item-row .drop-area {
    width: 373px !important;
}
.ao-app .crm-journal .crm-journal-list .crm-journal-list-item-edit textarea.description {
    width: 353px !important;
}
.ao-app .crm-journal .linked-docs-row .linked-dropdown-holder {
    width: 373px !important;
}
/* Align HYBRID button with EDIT/SPEICHERN buttons in data rows */
.ao-app .crm-journal .crm-journal-list .header-row div.btn-right-arrow {
    margin-left: 10px !important;
}

/* --- DASHBOARD: remove colored backgrounds --- */

/* The dashboard container and its grid areas: white instead of CI color */
.ao-app .dashboard,
.ao-app .dashboard.customColor1,
.ao-app .db-row,
.ao-app .db-row.customColor1 {
    background-color: #fff !important;
}

.ao-app .dashboard {
    width: 100% !important;
    max-width: 810px !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

/* --- DASHBOARD POPUP: hide X close button --- */
.ao-app .dashboard-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.ao-app .dashboard-popup .pullPopup {
    position: absolute !important;
    top: 130px !important;
    left: 240px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 580px !important;
}
.ao-app .dashboard-popup .contentPull {
    margin-left: 0 !important;
}
.ao-app .dashboard-popup .db-pu-c-section-bar {
    left: 0 !important;
}
.ao-app .dashboard-popup .cost-transp-popup {
    width: 810px !important;
}
.ao-app .dashboard-popup .closePull {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
}

/* Ensure Product Suitability ISIN input keeps dashboard sizing in CRM context */
.ao-app .dashboard-popup .db-pu-c-large-input,
.dashboard-popup .db-pu-c-large-input {
    width: 440px !important;
    min-width: 440px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 23px !important;
    text-indent: 9px !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: 1px solid #4d5a65 !important;
    color: #4d5a65 !important;
    background: #fff !important;
    cursor: text !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
}
.ao-app .dashboard-popup .db-pu-c-large-input::placeholder,
.dashboard-popup .db-pu-c-large-input::placeholder {
    color: #8a9aa8 !important;
    opacity: 1 !important;
}

/* --- DASHBOARD BOXES: white (#fff) -> #D0D5DB --- */

.ao-app .dashboard-info-box {
    background-color: #D0D5DB !important;
}

.ao-app .dashboard-info-box.customColor2-important {
    background-color: rgb(var(--color-ci2)) !important;
}

/* --- MODULE/TOPIC BOXES (sub-category squares on other pages) --- */

.ao-app .customerTopics .topic1,
.ao-app .customerTopics .topic2,
.ao-app .customerTopics .topic3,
.ao-app .customerTopics .topic4,
.ao-app .customerTopics .topics {
    background: #D0D5DB !important;
}

.ao-app .customerTopics .topic1 p,
.ao-app .customerTopics .topic2 p,
.ao-app .customerTopics .topic3 p,
.ao-app .customerTopics .topic4 p {
    background: #D0D5DB !important;
}

.ao-app .contentPull .topics {
    background: #4D5A65 !important;
}

.ao-app .contentPull .topics p {
    background: #4D5A65 !important;
}

/* CQA Send form: dark button, bordered fields */
.ao-app .send-report .buttonSend {
    background: #4D5A65 !important;
    color: #fff !important;
    border: none !important;
}

.ao-app .send-report input.recipientEmail,
.ao-app .send-report input.subject,
.ao-app .send-report textarea.message {
    border: 1px solid #4D5A65 !important;
}

/* CQA: dark text for loading/progress messages */
.ao-app #divSend .loading,
.ao-app #divSave .loading,
.ao-app #divSendForCompliance .loading {
    color: #4D5A65 !important;
}

/* FIN mortgage initiate (Prüfen lassen): full-screen dark overlay + spinner — PostBackTrigger cannot use UpdateProgress */
.ao-app .ao-mortgage-val-busy {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999998;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.55);
}

.ao-app .ao-mortgage-val-busy.ao-mortgage-val-busy--visible {
    display: flex;
}

.ao-app .ao-mortgage-val-busy__spinner {
    display: block;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border: 4px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ao-mortgage-val-busy-spin 0.75s linear infinite;
}

@keyframes ao-mortgage-val-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* CQA Prüfen lassen INFO — same pill as REPORT HTML/PDF (ProposalControl ra1) */
.ao-app .ao-prufen-lassen-info-float {
    float: right;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.ao-app .ao-cqa-info-pill {
    display: inline-block;
    padding: 3px 8px;
    background: #273B55;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    cursor: help;
    vertical-align: middle;
    border: none;
    box-sizing: border-box;
}

/* CQA: dark text for status messages next to OK/NOK icons */
.ao-app .send-report .dropDownErr,
.ao-app .send-report .errMsg,
.ao-app .saveReportBlock-holder .dropDownErr,
.ao-app .saveReportBlock-holder .errorMsg {
    color: #4D5A65 !important;
}

/* Footer inside content frame: hide on all content pages (only div.footer, not input.footer) */
.ao-content-frame div.footer {
    display: none !important;
}

.ao-content-frame .footerTxt {
    display: none !important;
}

/* Archive/FileFolder: remove CI color background, make white */
/* Container reset is handled in universal layout section above */
.ao-app .archiveBlock.customColor1 {
    background-color: #fff !important;
}

/* All content wrappers that use customColor1 as background: force white
   But exclude table headers (th), list headers (a.reportTL), and color pickers */
.ao-app .content .customColor1:not(th):not(a.reportTL):not(input.inputColorpicker),
.ao-app .content.archive .customColor1:not(th):not(a.reportTL):not(input.inputColorpicker) {
    background-color: #fff !important;
}

/* Remove the maskBottomSpace (acts as footer spacer) */
.ao-app .maskBottomSpace {
    display: none !important;
}

/* Remove closePopup link (old navigation artifact) */
.ao-app .closePopup {
    display: none !important;
}

/* --- INSTRUMENT FILTER BAR: adapt for white background --- */

/* Filter text area: dark text on white bg instead of white text on colored bg */
.ao-app .instrumentsTxt {
    background: #fff !important;
    color: #4D5A65 !important;
}

.ao-app .instrumentsTxt input,
.ao-app .instrumentsTxt label,
.ao-app .instrumentsTxt span,
.ao-app .instrumentsTxt h4,
.ao-app .instrumentsTxt p {
    color: #4D5A65 !important;
}

/* Dropdowns and input fields: light grey bg, no border */
.ao-app .instrumentsBlock .tfSelectWrapper {
    border: none !important;
}

.ao-app .instrumentsBlock .tfSelectWrapper span.selectTxt {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}

.ao-app .instrumentsBlock .tfSelectWrapper div a.button {
    background-color: #D0D5DB !important;
    border: none !important;
}

.ao-app .instrumentsBlock .tfSelectWrapper ul {
    border-color: #D0D5DB !important;
}

.ao-app .instrumentsBlock input[type="text"]:not(.inputLarge),
.ao-app .instrumentsBlock input.tool,
.ao-app .instrumentsBlock select.tool {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}

/* Buttons in instrument filter: keep visible */
.ao-app .instrumentsBlock a.buttonSend,
.ao-app .instrumentsBlock input.buttonSend {
    background: #4D5A65 !important;
    color: #fff !important;
}

/* --- SEARCH PANEL (InstrumentFilter control): adapt for white background --- */

/* The search-panel labels: dark text instead of white */
.ao-app .search-panel {
    color: #4D5A65 !important;
}

.ao-app .search-panel p,
.ao-app .search-panel label,
.ao-app .search-panel span {
    color: #4D5A65 !important;
}

/* Search panel text inputs: white bg, dark border */
.ao-app .search-panel input {
    background: #fff !important;
    color: #4D5A65 !important;
    border: 1px solid #4D5A65 !important;
}

/* Search panel dropdown: white bg, dark border, dark arrow */
.ao-app .search-panel .tfSelectWrapper span.selectTxt {
    background: #fff !important;
    color: #4D5A65 !important;
    border: 1px solid #4D5A65 !important;
}

.ao-app .search-panel .tfSelectWrapper div a.button {
    background-color: #4D5A65 !important;
    border: 1px solid #4D5A65 !important;
}

.ao-app .search-panel .tfSelectWrapper ul {
    border-color: #4D5A65 !important;
}

.ao-app .search-panel .tfSelectWrapper {
    border: none !important;
}

/* Custom dropdown variant */
.ao-app .search-panel .custom-dropdown .custom-text {
    background: #fff !important;
    color: #4D5A65 !important;
    border: 1px solid #4D5A65 !important;
}

.ao-app .search-panel .custom-dropdown .custom-text span {
    color: #4D5A65 !important;
}

/* Search/Reset buttons: dark bg with white text, same height as input fields */
.ao-app .search-panel .buttons a.btn-search {
    background: #4D5A65 !important;
    color: #fff !important;
    border: none !important;
    height: 20px !important;
    line-height: 20px !important;
    margin-top: 10px;
}

/* Hide the title labels above the fields (now using placeholders) */
.ao-app .search-panel .instr-isin p,
.ao-app .search-panel .instr-name p,
.ao-app .search-panel .instr-group p {
    display: none !important;
}

/* Adjust vertical alignment: fields move up since labels are hidden */
.ao-app .search-panel .instr-isin,
.ao-app .search-panel .instr-name,
.ao-app .search-panel .instr-group,
.ao-app .search-panel .buttons {
    margin-top: 10px !important;
}

/* First field starts at 45px left (matching content area padding) */
.ao-app .search-panel .instr-isin {
    margin-left: 30px !important;
}

/* Shrink dropdown by 25px to compensate for the extra left padding */
.ao-app .search-panel .instr-group {
    width: 240px !important;
}
.ao-app .search-panel .instr-group .tfSelectWrapper,
.ao-app .search-panel .instr-group .custom-dropdown {
    width: 240px !important;
}

/* Reduce panel height since labels are removed */
.ao-app .search-panel {
    height: auto !important;
    min-height: 40px;
    padding: 0 0 10px 0;
}

/* TailorMade search/filter panel: CI color 2 bg, 60px, 20px padding */
.ao-app .search-panel.tailor-made {
    color: #fff !important;
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    padding: 20px 20px !important;
    margin: -10px -10px 0 -10px !important;
}

.ao-app .search-panel.tailor-made .instr-isin,
.ao-app .search-panel.tailor-made .instr-name,
.ao-app .search-panel.tailor-made .instr-group,
.ao-app .search-panel.tailor-made .buttons {
    margin-top: 0 !important;
}

.ao-app .search-panel.tailor-made input {
    margin-top: 0 !important;
    border: none !important;
}

.ao-app .search-panel.tailor-made .instr-group .tfSelectWrapper,
.ao-app .search-panel.tailor-made .instr-group .custom-dropdown {
    padding-top: 0 !important;
}

.ao-app .search-panel.tailor-made .instr-group .tfSelectWrapper span.selectTxt,
.ao-app .search-panel.tailor-made .instr-group .custom-dropdown .custom-text {
    border: none !important;
}

/* SUCHEN and REST buttons: white with dark text, no border, aligned with fields */
.ao-app .search-panel.tailor-made .buttons a.btn-search {
    background: #fff !important;
    color: #4D5A65 !important;
    border: none !important;
    height: 20px !important;
    line-height: 20px !important;
    margin-top: 0 !important;
}

/* --- LOGOUT ITEM --- */

.ao-sidebar-menu > li.ao-logout {
    margin-top: 10px;
    border-bottom: none;
}

.ao-sidebar-menu > li.ao-logout > a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
}

.ao-sidebar-menu > li.ao-logout > a:hover {
    color: rgba(255, 255, 255, 0.9);
    background: none !important;
}

/* --- CRM SEARCH PANEL: adapt for white background, single row --- */
.ao-app .search-panel.customColor1 {
    background: #fff !important;
    color: #4D5A65 !important;
    height: auto !important;
    min-height: 30px;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    padding: 10px 0;
}
.ao-app .search-panel.customColor1 input {
    background: #fff !important;
    color: #4D5A65 !important;
    border: 1px solid #4D5A65 !important;
    margin-top: 0 !important;
    height: 20px !important;
    line-height: 20px !important;
    box-sizing: border-box;
    text-transform: none !important;
}
.ao-app .search-panel.customColor1 .from-date,
.ao-app .search-panel.customColor1 .to-date,
.ao-app .search-panel.customColor1 .other-criterias,
.ao-app .search-panel.customColor1 .expand {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    margin-top: 0 !important;
    vertical-align: top;
    flex-shrink: 0;
}
.ao-app .search-panel.customColor1 .from-date {
    margin-left: 0 !important;
}
.ao-app .search-panel.customColor1 .other-criterias {
    width: auto !important;
}
.ao-app .search-panel.customColor1 .other-criterias input.search-input {
    width: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}
.ao-app .search-panel.customColor1 .expand a.btn-search,
.ao-app .search-panel.customColor1 .expand a.btn-reset {
    background: #4D5A65 !important;
    color: #fff !important;
    border: none !important;
    height: 20px !important;
    line-height: 20px !important;
    width: auto !important;
    padding: 0 12px !important;
    text-align: center;
    text-transform: uppercase;
    display: inline-block !important;
    vertical-align: top;
    margin-right: 10px;
}
.ao-app .search-panel.customColor1 .expand {
    margin-right: 0 !important;
}
/* Calendar icons removed; date fields widened by 20px */
.ao-app .search-panel.customColor1 .from-date input,
.ao-app .search-panel.customColor1 .to-date input {
    width: 95px !important;
}
/* Arrow buttons for expand/collapse */
.ao-app .search-panel.customColor1 .expand a.btn-expand-arrow,
.ao-app .search-panel.customColor1 .expand a.btn-collapse-arrow {
    background: #4D5A65 !important;
    color: #fff !important;
    border: none !important;
    height: 20px !important;
    line-height: 20px !important;
    width: 20px !important;
    text-align: center;
    display: inline-block !important;
    vertical-align: top;
    margin-right: 4px;
    font-size: 10px;
    text-decoration: none;
}
.ao-app .search-panel.customColor1 .expand a.btn-collapse-arrow {
    margin-right: 0 !important;
}
.ao-app .search-panel.customColor1 {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
}
.ao-app .search-panel.customColor1 .other-criterias {
    flex: 1 1 auto !important;
}
.ao-app .search-panel.customColor1 .expand {
    padding-right: 30px !important;
    flex-shrink: 0;
}
.ao-app .search-panel.customColor1 p {
    display: none !important;
}
/* CRM search results: reduce gap between search bar and results */
.ao-app .customise.customColor1 .result-list {
    margin-top: 10px !important;
}

/* --- CONTENT SHARING PAGE: adapt for white background --- */
.ao-app .module_form_sharing h4 {
    color: #4D5A65 !important;
}
.ao-app .module_form_sharing .select-width .tfSelectWrapper {
    border: none !important;
}
.ao-app .module_form_sharing .select-width .tfSelectWrapper span.selectTxt {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}
.ao-app .module_form_sharing .select-width .tfSelectWrapper div a.button {
    background: #D0D5DB url("../../images/arrFileDown.png") no-repeat 5px 7px !important;
    border: none !important;
}
.ao-app .module_form_sharing .select-width .tfSelectWrapper ul {
    border-color: #D0D5DB !important;
}
.ao-app .module_form_sharing .profile-table input.isinS {
    background: #fff !important;
    color: #4D5A65 !important;
    border: 1px solid #4D5A65 !important;
}
.ao-app .module_form_sharing .select-width {
    margin-bottom: 10px !important;
}
.ao-app .module_form_sharing .group-btn-transparent a.btn,
.ao-app .module_form_sharing .group-btn-transparent a.reportClose {
    border-color: #4D5A65 !important;
    color: #4D5A65 !important;
}
/* DELETE button: restore X by giving it a dark background so the white X image is visible */
.ao-app .group-btn-transparent a.reportClose {
    background-color: #4D5A65 !important;
}
.ao-app .module_form_sharing .err-span {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
}
.ao-app .module_form_sharing .profile-table .box.customColor2 {
    color: #fff !important;
}
.ao-app .module_form_sharing .profile-table .box.customColor2 label,
.ao-app .module_form_sharing .profile-table .box.customColor2 span {
    color: #fff !important;
}

/* --- CONTENT USING PAGE: adapt for white background --- */
.ao-app .module_form_using h4 {
    color: #4D5A65 !important;
}
.ao-app .module_form_using .select-width .tfSelectWrapper {
    border: none !important;
}
.ao-app .module_form_using .select-width .tfSelectWrapper span.selectTxt {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}
.ao-app .module_form_using .select-width .tfSelectWrapper div a.button {
    background: #D0D5DB url("../../images/arrFileDown.png") no-repeat 5px 7px !important;
    border: none !important;
}
.ao-app .module_form_using .select-width .tfSelectWrapper ul {
    border-color: #D0D5DB !important;
}
.ao-app .module_form_using .profile-table .box {
    margin-right: 10px !important;
}
.ao-app .module_form_using .profile-table .box.customColor2 {
    color: #fff !important;
}
.ao-app .module_form_using .profile-table .box.customColor2 label,
.ao-app .module_form_using .profile-table .box.customColor2 span {
    color: #fff !important;
}
.ao-app .module_form_using .profile-table .tfSelectWrapper {
    border: none !important;
}
.ao-app .module_form_using .profile-table .tfSelectWrapper span.selectTxt {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
}
.ao-app .module_form_using .profile-table .tfSelectWrapper div a.button {
    background: #D0D5DB url("../../images/arrFileDown.png") no-repeat 5px 7px !important;
    border: none !important;
}
.ao-app .module_form_using .group-btn-transparent a.btn,
.ao-app .module_form_using .group-btn-transparent a.reportClose {
    border-color: #4D5A65 !important;
    color: #4D5A65 !important;
}
.ao-app .module_form_using .err-span {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
}
.ao-app .module_form_using .text-block {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
}

/* --- Profiling Variety: keep table inside visible content width --- */
.ao-app .module-table-profiling th.columnDescription {
    width: 290px !important;
}
.ao-app .content.ao-page-profiling {
    padding: 0 0 0 30px !important;
    box-sizing: border-box !important;
}
.ao-app .ao-page-profiling .customise,
.ao-app .ao-page-profiling .customiseForm,
.ao-app .ao-page-profiling .module,
.ao-app .ao-page-profiling .module_formSC {
    display: block !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ao-app table.module-table-profiling {
    margin-left: 0 !important;
    width: 100% !important;
}
.ao-app .ao-page-profiling table.module-table-profiling td:first-child .box.customColor1 {
    background-color: rgb(var(--color-ci1)) !important;
    color: #fff !important;
}

/* --- CRM TABLES: restore CI color 1 on specific column headers --- */
.ao-app .content .customiseForm .custom-table .account-header-row .customColor1,
.ao-app .content .customiseForm .custom-table .disclaimer-header-row .customColor1,
.ao-app .content .customiseForm .module .custom-table .header-row .customColor1,
.ao-app .content .customiseForm .module th.customColor1 {
    background-color: rgb(var(--color-ci1)) !important;
    color: #fff !important;
}

/* --- MORTGAGES PAGE: restore CI color 1 on parameter row labels --- */
.ao-app .content .customiseForm .mortgage-params .table-row .customColor1,
.ao-app .content .customiseForm .hypo-split .table-row .customColor1,
.ao-app .content .customiseForm .additional-securities .table-row .customColor1 {
    background-color: rgb(var(--color-ci1)) !important;
    color: #fff !important;
}

/* --- KYC PAGE V2 ---------------------------------------------------- */

/* Container: full width, vertical stack */
.ao-app .kyc-v2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 20px 10px 40px 40px !important;
    box-sizing: border-box !important;
}

.ao-app .customiseForm:has(.kyc-v2) {
    max-width: none !important;
    padding: 0 !important;
}
.ao-app .customiseForm:has(.kyc-v2) .titleContent {
    padding-left: 40px !important;
}

/* Hide old table/attributes/fields markup when inside .kyc-v2 */
.ao-app .kyc-v2 .custom-table.module_formKYC,
.ao-app .kyc-v2 .additional-info,
.ao-app .kyc-v2 .custom-table.fileds-table {
    display: none !important;
}

/* ── 60px visual gap between major sections ── */
.ao-app .kyc-v2-gap-top {
    margin-top: 60px !important;
}

/* ── Row: label + value ── */
.ao-app .kyc-v2-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 32px !important;
    margin-bottom: 4px !important;
}
.ao-app .kyc-v2-row.kyc-v2-row-top {
    align-items: flex-start !important;
}
.ao-app .kyc-v2-row-top .kyc-v2-label {
    margin-top: 0 !important;
    align-self: flex-start !important;
}
.ao-app .kyc-v2-row-top .kyc-v2-value {
    align-items: flex-start !important;
    align-self: flex-start !important;
}

/* Label pill (left) */
.ao-app .kyc-v2-label {
    flex: 0 0 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 6px 0 10px !important;
    background: #D0D5DB !important;
    border-radius: 3px !important;
    font: normal 11px/28px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: uppercase !important;
    color: #4D5A65 !important;
    box-sizing: border-box !important;
}

.ao-app .kyc-v2-label-text {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ao-app .kyc-v2-label-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 20px !important;
    padding: 0 4px !important;
    border: 1px solid #b0bac3 !important;
    border-radius: 2px !important;
    font: normal 10px/20px Conv_GOTHIC, Arial, sans-serif !important;
    color: #4D5A65 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;
    text-transform: none !important;
}

.ao-app .kyc-v2-label-input:focus {
    border-color: #808F9D !important;
    outline: none !important;
}

.ao-app .kyc-v2-btn-label {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    border-radius: 2px !important;
    background: #808F9D !important;
    color: #fff !important;
    font: normal 10px/20px Conv_GOTHIC, Arial, sans-serif !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0 !important;
    transition: background 0.15s !important;
}

.ao-app .kyc-v2-btn-label:hover {
    background: #4D5A65 !important;
    color: #fff !important;
}

/* Value area (right) — flex 1 */
.ao-app .kyc-v2-value {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ── Text inputs ── */
.ao-app .kyc-v2-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #c1cad2 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #4D5A65 !important;
    font: normal 12px/26px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.15s !important;
    float: none !important;
    width: auto !important;
}
.ao-app .kyc-v2-input:focus {
    border-color: #59768D !important;
}
.ao-app .kyc-v2-input.kyc-short {
    flex: 0 0 200px !important;
    max-width: 200px !important;
}

/* Empty required indicator */
.ao-app .kyc-v2-input.kyc-empty,
.ao-app .kyc-v2-ta.kyc-empty {
    background-color: #E0CACA !important;
}

/* ── Textareas (multiline fields) ── */
.ao-app .kyc-v2-ta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    max-height: 200px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid #c1cad2 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #4D5A65 !important;
    font: normal 12px/18px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    outline: none !important;
    transition: border-color 0.15s !important;
    float: none !important;
    width: auto !important;
}
.ao-app .kyc-v2-ta:focus {
    border-color: #59768D !important;
}

/* ── Dropdowns (custom div-based, matching CRM quick-list) ── */
.ao-app .kyc-v2-select {
    display: none !important;
}
.ao-app .kyc-dd {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    position: relative !important;
}
.ao-app .kyc-dd.kyc-dd-categorization {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    flex: 0 1 auto !important;
}
.ao-app .kyc-dd-display {
    height: 28px !important;
    padding: 0 24px 0 10px !important;
    border: 1px solid #c1cad2 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #4D5A65 !important;
    font: normal 12px/28px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234D5A65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    transition: border-color 0.15s !important;
}
.ao-app .kyc-dd-display.kyc-dd-placeholder {
    color: #aab4bc !important;
}
.ao-app .kyc-dd-display:hover,
.ao-app .kyc-dd-open .kyc-dd-display {
    border-color: #4D5A65 !important;
}
.ao-app .kyc-dd.kyc-empty .kyc-dd-display {
    background-color: #E0CACA !important;
}
.ao-app .kyc-dd-list {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #c1cad2 !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    z-index: 100 !important;
}
.ao-app .kyc-dd-open .kyc-dd-list {
    display: block !important;
}
.ao-app .kyc-dd-item {
    padding: 5px 8px !important;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: none !important;
    color: #4D5A65 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.ao-app .kyc-dd-item:hover {
    background: #f0f3f6 !important;
}
.ao-app .kyc-dd-item.kyc-dd-item-selected {
    background: #edf0f2 !important;
}
.ao-app .kyc-dd-item-reset {
    color: #8a9aa8 !important;
    border-bottom: 1px solid #edf0f2 !important;
}

/* ── Checkbox inline ── */
.ao-app .kyc-v2-check {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}
.ao-app .kyc-v2-check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #59768D !important;
    cursor: pointer !important;
}
.ao-app .kyc-v2-check-label {
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif !important;
    color: #8a9aa8 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

/* ── Save button (S) ── */
.ao-app .kyc-v2-btn-save {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    border-radius: 3px !important;
    background: #808F9D !important;
    color: #fff !important;
    font: normal 11px/28px Conv_GOTHIC, Arial, sans-serif !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}
.ao-app .kyc-v2-btn-save:hover {
    background: #4D5A65 !important;
    color: #fff !important;
    text-decoration: none !important;
}
.ao-app .kyc-v2-btn-save.kyc-save-ok {
    background: #d4edda !important;
    color: #155724 !important;
}
.ao-app .kyc-v2-btn-save.kyc-save-ok:hover {
    background: #c3e6cb !important;
}
.ao-app .kyc-v2-btn-save.kyc-save-err {
    background: #f8d7da !important;
    color: #721c24 !important;
}
.ao-app .kyc-v2-btn-save.kyc-save-err:hover {
    background: #f5c6cb !important;
}

/* ── Bottom fields section: textarea + linked docs below ── */
.ao-app .kyc-v2-field-block {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 40px !important;
}

.ao-app .kyc-v2-field-header {
    font: normal 11px/20px Conv_GOTHICB, Arial, sans-serif !important;
    text-transform: uppercase !important;
    color: #4D5A65 !important;
    padding: 0 0 4px !important;
}

.ao-app .kyc-v2-field-ta {
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-height: 200px !important;
    max-height: 400px !important;
    padding: 8px 10px !important;
    border: 1px solid #c1cad2 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #4D5A65 !important;
    font: normal 12px/18px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    outline: none !important;
    transition: border-color 0.15s !important;
}
.ao-app .kyc-v2-field-ta:focus {
    border-color: #59768D !important;
}
.ao-app .kyc-v2-field-ta.kyc-empty {
    background-color: #E0CACA !important;
}

/* Linked docs row below textarea */
.ao-app .kyc-v2-docs {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-top: 6px !important;
}

.ao-app .kyc-v2-doc-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ao-app .kyc-v2-doc-link {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 8px !important;
    background: #edf0f2 !important;
    color: #4D5A65 !important;
    border-radius: 3px !important;
    font: normal 11px/24px Conv_GOTHIC, Arial, sans-serif !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.ao-app .kyc-v2-doc-link:hover {
    background: #e2e7ec !important;
    color: #4D5A65 !important;
    text-decoration: none !important;
}

.ao-app .kyc-v2-doc-unlink {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: #b0bac3 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.ao-app .kyc-v2-doc-unlink:hover {
    background: #c0392b !important;
    color: #fff !important;
    border-color: #c0392b !important;
    text-decoration: none !important;
}

/* Link new document row */
.ao-app .kyc-v2-doc-add {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 2px !important;
}
.ao-app .kyc-v2-doc-add select {
    display: none !important;
}
.ao-app .kyc-v2-doc-add .kyc-dd {
    flex: 1 1 0 !important;
}
.ao-app .kyc-v2-doc-add .kyc-dd-display {
    height: 24px !important;
    font: normal 11px/24px Conv_GOTHIC, Arial, sans-serif !important;
    padding: 0 24px 0 8px !important;
}
.ao-app .kyc-v2-doc-add .kyc-v2-btn-save {
    width: 28px !important;
    height: 28px !important;
}

/* Error box inside v2 container */
.ao-app .kyc-v2 .error-box {
    padding-left: 0 !important;
    min-height: 0 !important;
}
.ao-app .kyc-v2 .err-span {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
}

/* Hide old KYC markup from old path (.custom-table.module_formKYC etc) when .kyc-v2 is active */

/* --- KYC PAGE OLD (backward compat for wizard mode, keep) --- */

/* Main KYC table: dark text instead of white */
.ao-app .custom-table.module_formKYC {
    color: #4D5A65 !important;
    margin-top: 0 !important;
}

.ao-app .custom-table.kyc-strategy-table {
    margin-top: 0 !important;
    min-height: 60px;
}

/* Input fields & textareas: light grey, all 372px wide to match BANK field */
.ao-app .module_formKYC input.txtSmall,
.ao-app .module_formKYC input.txt,
.ao-app .module_formKYC textarea.istxt,
.ao-app .module_formKYC input.txtDate,
.ao-app .module_formKYC input.txtMed {
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
    width: 372px !important;
}

/* KYC form dropdowns (kyc-select-dropdown): fully grey, matching Content Sharing Teilen */
/* Uses .customiseForm in selectors to beat SiteBase.master inline CI-color-2 rules */
.ao-app .customiseForm .module_formKYC .kyc-select-dropdown.customColorBlueDark {
    background-color: transparent !important;
    width: 372px !important;
    position: relative !important;
}
.ao-app .customiseForm .module_formKYC .kyc-select-dropdown.customColorBlueDark span.custom-text,
.ao-app .customiseForm .module_formKYC .kyc-select-dropdown.customColorBlueDark span.custom-text:hover {
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
    width: 372px !important;
    min-width: 372px !important;
    max-width: 372px !important;
    padding: 0 !important;
}
.ao-app .customiseForm .custom-dropdown.kyc-select-dropdown.customColorBlueDark span.custom-text span {
    width: 343px !important;
    padding-left: 10px !important;
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
}
.ao-app .customiseForm .custom-dropdown.kyc-select-dropdown.customColorBlueDark .select-list ul {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
.ao-app .customiseForm .custom-dropdown.kyc-select-dropdown.customColorBlueDark span.custom-text::after {
    background-color: #D0D5DB !important;
    background-image: url("../../images/arrFileDown.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: none !important;
}
.ao-app .customiseForm .custom-dropdown.kyc-select-dropdown.customColorBlueDark .select-list {
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}
.ao-app .customiseForm .custom-dropdown.kyc-select-dropdown.customColorBlueDark .select-list .selected,
.ao-app .customiseForm .custom-dropdown.kyc-select-dropdown.customColorBlueDark .select-list li:hover {
    background-color: #4D5A65 !important;
    color: #fff !important;
}
.ao-app .customiseForm .custom-dropdown.kyc-select-dropdown.customColorBlueDark .select-list .select-scroll {
    background-color: #D0D5DB !important;
    border-left: 1px solid #fff !important;
}

/* KYC: Geburtstag datepicker - hide calendar icon */
.ao-app .module_formKYC .calendar-icon {
    display: none !important;
}

/* KYC: PEP checkbox inline with Spouse/Children/Name fields */
/* Order: [field] 10px [checkbox] 10px [label] */
.ao-app .module_formKYC .pep-inline {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    gap: 10px !important;
}
.ao-app .module_formKYC .pep-inline .checkbox-text {
    font-size: 11px !important;
    color: #4D5A65 !important;
    padding-top: 0 !important;
}
.ao-app .custom-table.module_formKYC .pep-inline .ez-checkbox {
    margin-top: 0 !important;
}

/* KYC: Required fields - soft red when empty, grey when filled */
/* Must match or exceed specificity of the grey background rules */
.ao-app .module_formKYC input.kyc-empty,
.ao-app .module_formKYC textarea.kyc-empty,
.ao-app .additional-info input.kyc-empty,
.ao-app .custom-table.fileds-table textarea.kyc-empty {
    background-color: #E0CACA !important;
}
.ao-app .customiseForm .module_formKYC .custom-dropdown.kyc-empty span.custom-text,
.ao-app .customiseForm .module_formKYC .custom-dropdown.kyc-empty span.custom-text:hover,
.ao-app .customiseForm .module_formKYC .custom-dropdown.kyc-empty span.custom-text span,
.ao-app .customiseForm .module_formKYC .custom-dropdown.kyc-empty span.custom-text::after {
    background-color: #E0CACA !important;
}

/* Checkboxes: dark border */
.ao-app .custom-table.module_formKYC .ez-checkbox {
    border: 1px solid #4D5A65 !important;
}

/* Attributes section: dark labels and input fields */
.ao-app .attributes .instrumL {
    color: #4D5A65 !important;
}
.ao-app .attributes input {
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}
.ao-app .attributes a.buttonGo {
    border-color: #4D5A65 !important;
    color: #4D5A65 !important;
    background-color: transparent !important;
}
.ao-app .attributes .group-btn .btn {
    border-color: #4D5A65 !important;
    color: #4D5A65 !important;
    background-color: transparent !important;
}

/* Fields table (bottom section): dark text */
.ao-app .fileds-table {
    color: #4D5A65 !important;
}
.ao-app .fileds-table textarea.isin {
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}

/* File select dropdowns in fields table */
.ao-app .fileds-table .rightColumn .file-select .custom-dropdown .custom-text {
    color: #4D5A65 !important;
}
.ao-app .fileds-table .rightColumn .file-select .custom-dropdown .custom-text span {
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}
.ao-app .fileds-table .rightColumn .file-select .custom-dropdown .custom-text::after {
    background-color: #D0D5DB !important;
    background-image: url("../../images/arrFileDown.png") !important;
    border: none !important;
}
.ao-app .fileds-table .rightColumn .file-select .custom-dropdown .select-list {
    background-color: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}
.ao-app .fileds-table .rightColumn .file-select .custom-dropdown .select-list .select-scroll {
    background-color: #D0D5DB !important;
}
.ao-app .fileds-table .rightColumn .file-select .select-list .selected,
.ao-app .fileds-table .rightColumn .file-select .select-list li:hover {
    background-color: #4D5A65 !important;
    color: #fff !important;
}

/* File list links */
.ao-app .fileds-table .rightColumn .file-list a.columnFile {
    background-color: rgb(var(--color-ci2)) !important;
    color: #fff !important;
    width: calc(100% - 28px) !important;
    box-sizing: border-box !important;
}
.ao-app .fileds-table .rightColumn .file-list a.buttonGo {
    border-color: #4D5A65 !important;
    color: #4D5A65 !important;
}

/* Save button in file-select */
.ao-app .fileds-table .rightColumn .file-select .btn-90 {
    border-color: #4D5A65 !important;
    color: #4D5A65 !important;
    background-color: transparent !important;
}

/* Error label */
.ao-app .upnl-crm-kyc-attributes .err-span {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
}

/* --- TEXTCHANGE PAGE: fixed height for Signatur & Disclaimer textareas --- */
.ao-app .AdviceInputs textarea.message {
    height: 130px !important;
}
.ao-app .AdviceInputs input.footer {
    width: 483px !important;
}

/* --- CRM JOURNAL / CRM DETAIL HEADER (CrmPlus.master) --- */

/* CRM title: h4 styling is handled by the universal title rule above */

/* Image picker box: light grey background */
.ao-app div.image-wrapper {
    background-color: #D0D5DB !important;
}

/* Four text phrase fields: light grey */
.ao-app div.phrase-wrapper input.text-phrase {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}

/* CRM dropdown (customColorBlueDark): CI Color 2 (set in SiteBase.master), white text/arrows */
.ao-app .customiseForm .custom-dropdown.customColorBlueDark .custom-text::after {
    border-left: 1px solid rgba(255,255,255,0.3) !important;
}
.ao-app .customiseForm .custom-dropdown.customColorBlueDark .select-list {
    border: none !important;
}
.ao-app .customiseForm .custom-dropdown.customColorBlueDark .select-list .select-scroll {
    border-left: 1px solid rgba(255,255,255,0.3) !important;
}

/* --- CRM WORLDCHECK BUTTON: match CRM action button style --- */
.ao-app a.btn-refinitiv-world-check,
.ao-app a.btn-refinitiv-world-check-lastcheck,
.ao-app a.btn-namescan-world-check,
.ao-app a.btn-namescan-world-check-lastcheck {
    background: #59768D !important;
    color: #fff !important;
    border: none !important;
    width: 150px !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-right: 10px !important;
    text-align: center !important;
    font: 11px/20px Conv_GOTHIC, Arial, sans-serif;
    box-sizing: border-box;
    float: none;
    display: inline-block;
}
.ao-app a.btn-refinitiv-world-check-lastcheck,
.ao-app a.btn-namescan-world-check-lastcheck {
    margin-top: 0 !important;
}
.ao-app a.btn-refinitiv-world-check .btn-arrow,
.ao-app a.btn-refinitiv-world-check-lastcheck .btn-arrow,
.ao-app a.btn-namescan-world-check .btn-arrow,
.ao-app a.btn-namescan-world-check-lastcheck .btn-arrow {
    display: none !important;
}

/* --- CRM ACTION BUTTONS: styled text buttons --- */
/* Note: layout (flex-direction, height, etc.) is set in the universal layout section above */
.ao-app .crm-action-buttons .crm-action-btn {
    display: block !important;
    float: none !important;
    width: 150px !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #59768D !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    font: 11px/20px Conv_GOTHIC, Arial, sans-serif;
    cursor: pointer;
    box-sizing: border-box;
}
/* CRM detail: Anlegen/Finanzieren as regular text buttons in action row */
.ao-app .fin-inv-start-btns.crm-action-buttons input.btn-start-investing,
.ao-app .fin-inv-start-btns.crm-action-buttons input.btn-start-financing {
    background-image: none !important;
    background-color: #5A768C !important;
    color: #fff !important;
    width: 150px !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font: 11px/20px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: none !important;
    text-align: center !important;
    cursor: pointer !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* --- PROFILE FORMS (AccountDetails, etc.): adapt for white background --- */
/* Container reset is handled in universal layout section above */
.ao-app .contactFormPopup {
    background: #fff !important;
}
.ao-app .contactFormPopup h4 {
    color: #4D5A65 !important;
}
.ao-app .contactFormPopup label,
.ao-app .contactFormPopup .formAccount label {
    color: #4D5A65 !important;
}
.ao-app .contactFormPopup .formAccount {
    width: 100% !important;
    box-sizing: border-box;
}
.ao-app .contactFormPopup .formAccount input,
.ao-app .contactFormPopup .formAccount select {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
    width: calc(100% - 200px) !important;
    box-sizing: border-box;
}
.ao-app .contactFormPopup .formAccount .tfSelectWrapper {
    border: none !important;
}
.ao-app .contactFormPopup .formAccount .tfSelectWrapper span.selectTxt {
    background: #D0D5DB !important;
    color: #4D5A65 !important;
    border: none !important;
}
.ao-app .contactFormPopup .formAccount .tfSelectWrapper div a.button {
    background-color: #D0D5DB !important;
    border: none !important;
}
.ao-app .contactFormPopup .formAccount input.buttonSend,
.ao-app .contactFormPopup .formAccount a.buttonSend {
    background: #4D5A65 !important;
    color: #fff !important;
    border: none !important;
    width: 240px !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    box-sizing: border-box;
}
/* Language dropdown: match button width */
.ao-app .contactFormPopup .formAccount.formProfile select,
.ao-app .contactFormPopup .formAccount.formProfile .tfSelectWrapper,
.ao-app .contactFormPopup .formAccount.formProfile .tfSelectWrapper span.selectTxt {
    width: 235px !important;
}
/* Upper button: wrapper div gets the left offset */
.ao-app .contactFormPopup .formAccount div.buttonSend {
    float: none !important;
    width: auto !important;
    padding-left: 200px !important;
    box-sizing: border-box;
}
/* Lower button: LinkButton directly in formAccount, needs margin to align */
.ao-app .contactFormPopup .formAccount > a.buttonSend {
    margin-left: 200px !important;
}
.ao-app .contactFormPopup .errMsg {
    color: #c00 !important;
}
/* Spacer between account data button and password section */
.ao-app .contactFormPopup .ao-password-spacer {
    display: block !important;
    height: 20px !important;
    min-height: 20px !important;
    width: 100% !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* --- JQUERY UI DATEPICKER: clean boxed design --- */
.ao-app .ui-datepicker {
    background: #fff !important;
    border: 1px solid #4D5A65 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-family: Conv_GOTHIC, Arial, sans-serif;
    font-size: 12px;
    width: 220px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.ao-app .ui-datepicker .ui-datepicker-header {
    background: #4D5A65 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
    font-weight: normal;
}
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    color: #fff !important;
    font-weight: normal;
}
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
    background: #3a444d !important;
    color: #fff !important;
    border: 1px solid #5a6570 !important;
    border-radius: 0 !important;
    font-size: 11px;
    padding: 2px 4px;
    margin: 0 2px;
}
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    top: 6px !important;
}
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-prev span,
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-next span {
    background: none !important;
    text-indent: 0 !important;
    color: #fff;
    font-size: 14px;
    margin: 0 !important;
    position: static !important;
    display: block;
    text-align: center;
}
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-prev span::after {
    content: "\25C0";
}
.ao-app .ui-datepicker .ui-datepicker-header .ui-datepicker-next span::after {
    content: "\25B6";
}
.ao-app .ui-datepicker table {
    margin: 0 !important;
    border-collapse: collapse;
    width: 100%;
}
.ao-app .ui-datepicker th {
    background: #E8EAED !important;
    color: #4D5A65 !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: normal;
    padding: 4px 0 !important;
    text-align: center;
    font-size: 11px;
}
.ao-app .ui-datepicker td {
    border: none !important;
    padding: 0 !important;
}
.ao-app .ui-datepicker td a,
.ao-app .ui-datepicker td span {
    background: none !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: #4D5A65 !important;
    text-align: center;
    padding: 4px 0 !important;
    display: block;
    font-size: 11px;
}
.ao-app .ui-datepicker td a:hover {
    background: #D0D5DB !important;
    border-color: #D0D5DB !important;
    color: #4D5A65 !important;
}
.ao-app .ui-datepicker td a.ui-state-active {
    background: #4D5A65 !important;
    border-color: #4D5A65 !important;
    color: #fff !important;
}
.ao-app .ui-datepicker td a.ui-state-highlight {
    background: #E8EAED !important;
    border-color: #4D5A65 !important;
    color: #4D5A65 !important;
}
.ao-app .ui-datepicker td.ui-datepicker-other-month a,
.ao-app .ui-datepicker td.ui-datepicker-other-month span {
    color: #aab0b5 !important;
}

/* --- CRM JOURNAL: hide 6 module-indicator columns, keep only DOK + doc count --- */
.ao-app .crm-journal .crm-journal-list .header-row div.columnDescription {
    width: 505px !important;
}

.ao-app .crm-journal .crm-journal-list .columnDescription {
    width: 505px !important;
}

.ao-app .crm-journal .crm-journal-list div.add-new-item-row textarea.description {
    width: 485px !important;
}

.ao-app .crm-journal .crm-journal-list div.add-new-item-row .drop-area {
    width: 505px !important;
    padding-top: 10px !important;
}

.ao-app .crm-journal .crm-journal-list div.add-new-item-row .drop-area .ajax__fileupload {
    background-color: #D0D5DB !important;
    border: none !important;
    padding: 0 !important;
    position: relative !important;
    height: 35px !important;
    overflow: hidden !important;
}

/* Envelope icon — visual only, sits under the dropzone overlay */
.ao-app .crm-journal .crm-journal-list div.add-new-item-row .drop-area .ajax__fileupload::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 25px !important;
    background: url(../../images/crm/email-drop.png) no-repeat center center !important;
    background-size: contain !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Dropzone: full-size overlay so it always captures drag events */
.ao-app .crm-journal .crm-journal-list div.add-new-item-row .drop-area .ajax__fileupload_dropzone {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    border: none !important;
    line-height: 35px !important;
    font: normal 11px/35px Arial, Helvetica, sans-serif !important;
    color: #4D5A65 !important;
    padding-left: 42px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

/* --- When file is queued: hide drop text + icon, show filename + SAVE inline --- */
.ao-app .crm-journal .drop-area .ajax__fileupload.has-file::before {
    display: none !important;
}
.ao-app .crm-journal .drop-area .ajax__fileupload.has-file .ajax__fileupload_dropzone {
    display: none !important;
}

.ao-app .crm-journal .drop-area .ajax__fileupload_queueContainer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 70px !important;
    height: 35px !important;
    max-height: 35px !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    padding-left: 10px !important;
    z-index: 3 !important;
}

.ao-app .crm-journal .drop-area .ajax__fileupload_fileItemInfo {
    background: transparent !important;
    height: 35px !important;
    overflow: hidden !important;
}

.ao-app .crm-journal .drop-area .ajax__fileupload_fileItemInfo .pendingState {
    background: transparent !important;
    font: normal 11px/35px Arial, Helvetica, sans-serif !important;
    color: #4D5A65 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    height: 35px !important;
    line-height: 35px !important;
}

.ao-app .crm-journal .drop-area .ajax__fileupload_footer {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 35px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 4 !important;
}

.ao-app .crm-journal .drop-area .ajax__fileupload_uploadbutton {
    background-color: #808F9D !important;
    color: #fff !important;
    text-transform: uppercase !important;
    font: normal 11px/24px Arial, Helvetica, sans-serif !important;
    padding: 0 12px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.ao-app .crm-journal .crm-journal-list div.add-new-item-row a.btn {
    margin-left: 40px !important;
}

.ao-app .crm-journal .crm-journal-list .crm-journal-list-item-edit textarea.description {
    width: 485px !important;
}

.ao-app .crm-journal .crm-journal-list .crm-journal-list-item-edit .update-cancel .btn {
    margin-left: 40px !important;
}

.ao-app .crm-journal .linked-docs-row .columnDescription {
    margin-right: 115px !important;
}

.ao-app .crm-journal .linked-docs-row .linked-dropdown-holder {
    width: 505px !important;
    margin-right: 40px !important;
}

/* --- JOURNAL EMAIL MODAL: stretch to content width, hide close buttons --- */
.ao-app div.show-email .contentPull {
    min-width: 810px !important;
    margin-top: 119px !important;
}

/* Hide both close buttons (sr-only for the top one so JS can still trigger it) */
.ao-app div.show-email .closePull {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
}

.ao-app div.show-email .email-container div.buttons {
    display: none !important;
}

/* --- DASHBOARD COUNTRY MAP --- */
.ao-app .dashboard-country-map-section {
    padding: 10px 0 0 0;
    margin: 0 0 10px 0;
}

.ao-app .dashboard-country-map-section .header {
    height: 20px;
    margin: 0 -20px 0 0;
    padding: 0;
    line-height: 20px;
}

.ao-app .dashboard-country-map-section .header .header-text {
    font: normal 15px/20px Conv_GOTHIC, Arial, sans-serif !important;
    color: #4d5a65;
    padding: 0 5px;
}

.ao-app .dashboard-country-map-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-right: -20px;
}

.ao-app .dashboard-country-map {
    flex: 1;
    height: 300px;
    background-color: #fff;
}

.ao-app .dashboard-country-table {
    width: 250px;
    min-width: 250px;
    height: 300px;
    overflow: hidden;
}

.ao-app .dashboard-country-table table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font: 11px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4d5a65;
}

.ao-app .dashboard-country-table table tr {
    background-color: transparent !important;
    border-bottom: 1px solid darkgrey;
}

.ao-app .dashboard-country-table table td {
    padding: 3px 4px;
    background-color: transparent !important;
}

.ao-app .dashboard-country-table table td.ctry-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.ao-app .dashboard-country-table table td.ctry-count {
    text-align: right;
    font-weight: bold;
}

.ao-app .dashboard-country-table table td.ctry-pct {
    text-align: right;
    color: #808f9d;
}

/* --- DASHBOARD CLIENT SEGMENTATION & ASSET ALLOCATION --- */
.ao-app .dashboard-segmentation-section,
.ao-app .dashboard-asset-allocation-section {
    padding: 10px 0 0 0;
    margin: 0 0 30px 0;
}

.ao-app .dashboard-segmentation-section .header,
.ao-app .dashboard-asset-allocation-section .header {
    height: 20px;
    margin: 0 -20px 0 0;
    padding: 0;
    line-height: 20px;
}

.ao-app .dashboard-segmentation-section .header .header-text,
.ao-app .dashboard-asset-allocation-section .header .header-text {
    font: normal 15px/20px Conv_GOTHIC, Arial, sans-serif !important;
    color: #4d5a65;
    padding: 0 5px;
}

.ao-app .seg-group {
    margin-top: 12px;
    margin-right: -20px;
}

/* CRM Radar summary section: align spacing/width like allocation bars */
.ao-app .dashboard-crm-radar-summary-content {
    margin-top: 12px;
    margin-right: -20px;
    padding: 0 0 8px 0 !important;
    background: transparent !important;
}

.ao-app .dashboard-crm-radar-summary-content .crm-radar-summary-card {
    width: 100%;
    box-sizing: border-box;
}

.ao-app .seg-group-label {
    font: normal 11px/16px Arial, Helvetica, sans-serif;
    color: #808f9d;
    padding: 0 5px 4px 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ao-app .seg-bar {
    display: flex;
    width: 100%;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
}

.ao-app .seg-bar .seg-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    transition: width 0.4s ease;
}

.ao-app .seg-bar .seg-zone .seg-pct {
    font: bold 11px/30px Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.ao-app .seg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 6px 5px 0 5px;
}

.ao-app .seg-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ao-app .seg-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ao-app .seg-label {
    font: normal 11px/16px Arial, Helvetica, sans-serif;
    color: #4d5a65;
    white-space: nowrap;
}

/* --- DASHBOARD DUE-DATE COLORIZATION --- */

.ao-app .dashboard-section .cell-content.due-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
}

.ao-app .dashboard-section .cell-content.due-urgent {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

.ao-app .dashboard-section .cell-content.due-overdue {
    background-color: #e4606d !important;
    color: #fff !important;
}

.ao-app .section-due-date-documents > .header + .table-container {
    margin-top: 10px !important;
}

.ao-app .section-due-date-documents > .table-container + .header {
    margin-top: 40px;
}

.ao-app .dashboard-section .duedate-dd {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 20px;
    vertical-align: top;
}

.ao-app .dashboard-section td.filter:first-child .duedate-dd {
    width: calc(100% - 25px);
}

.ao-app .dashboard-section .duedate-dd-display {
    height: 20px;
    padding: 0 16px 0 5px !important;
    border: 1px solid #c1cad2;
    border-radius: 0;
    background: #fff;
    color: #8a9aa8;
    font: normal 11px/20px Conv_GOTHIC, Arial, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%234D5A65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    transition: border-color 0.15s;
}

.ao-app .dashboard-section .duedate-dd-display.duedate-dd-active {
    color: #4D5A65;
}

.ao-app .dashboard-section .duedate-dd-display:hover,
.ao-app .dashboard-section .duedate-dd-open .duedate-dd-display {
    border-color: #4D5A65;
}

.ao-app .dashboard-section .duedate-dd-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c1cad2;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
}

.ao-app .dashboard-section .duedate-dd-open .duedate-dd-list {
    display: block;
}

.ao-app .dashboard-section .duedate-dd-item {
    padding: 0 5px !important;
    height: 20px;
    font: normal 11px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-app .dashboard-section .duedate-dd-item:hover {
    background: #f0f3f6;
}

.ao-app .dashboard-section .duedate-dd-item-reset {
    color: #8a9aa8;
    border-bottom: 1px solid #edf0f2;
}

/* --- DASHBOARD BOX ROWS: replace old left/right grid with flex rows --- */

.ao-app .dashboard-main.db-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: auto !important;
    min-height: auto !important;
    float: none !important;
    position: static !important;
}

.ao-app .db-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
}

.ao-app .db-row .w-120 {
    width: 120px;
    min-width: 120px;
    flex-shrink: 0;
}

.ao-app .db-row-tasks .db-tasks-wrap {
    width: 250px !important;
    min-width: 250px !important;
}

.ao-app .db-row-tasks .dashboard-info-box.tasks {
    width: 250px !important;
}

.ao-app .db-hidden-boxes {
    display: none !important;
}

/* Leading boxes in each row: CI color 2 with white text and white arrow */
.ao-app .db-lead-box,
.ao-app .db-lead-box.dashboard-info-box {
    color: #fff !important;
}

.ao-app .db-lead-box .dashboard-box-title,
.ao-app .db-lead-box .dashboard-box-stats {
    color: #fff !important;
}

.ao-app .db-lead-box .dashboard-box-title.dashboard-black-arrow {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M9 1H2M9 1v7' stroke='%23fff' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat 100% 5px !important;
    background-size: 10px 10px !important;
}

/* gap before the sortable sections (after boxes + tasks panel) */
.ao-app .dashboard-sortable {
    margin-top: 16px !important;
}

.ao-app .dashboard-sections {
    min-height: auto !important;
    width: 100% !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
}

.ao-app .section-due-date-documents,
.ao-app .section-strategies {
    padding-bottom: 20px !important;
}

.ao-app .section-workflow-open-tasks,
.ao-app .section-risk-class-gaps {
    padding-bottom: 60px !important;
}

/* --- DASHBOARD SORTABLE SECTIONS --- */

.ao-app .dashboard-sortable {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ao-app .db-drag-handle {
    display: inline-block;
    cursor: grab;
    color: #b0bac3;
    font-size: 14px;
    line-height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    user-select: none;
    transition: color 0.15s;
}

.ao-app .db-drag-handle:hover {
    color: #4D5A65;
}

.ao-app .db-sort-ghost {
    opacity: 0.4;
}

.ao-app .db-sort-chosen {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.ao-app .db-sort-drag {
    opacity: 0.9;
}

/* --- DASHBOARD CALENDAR MODAL --- */

.db-cal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 10000;
    display: block;
}

.db-cal-modal {
    position: absolute;
    top: 131px;
    left: 240px;
    width: 810px;
    background: transparent;
    font: 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    box-sizing: border-box;
}

.db-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

/* Header row: nav prev (span 2), title (span 3), nav next (span 2) */
.db-cal-nav {
    height: 28px;
    background: #fff;
    border: none;
    color: #4D5A65;
    cursor: pointer;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    padding: 0;
}

.db-cal-nav.db-cal-prev {
    grid-column: span 2;
}

.db-cal-nav.db-cal-next {
    grid-column: span 2;
}

.db-cal-nav:hover {
    background: #EBEEF1;
}

.db-cal-title {
    grid-column: span 3;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font: normal 15px/28px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    background: #fff;
}

/* Day cells */
.db-cal-day {
    aspect-ratio: 1 / 1;
    padding: 4px 5px;
    overflow: hidden;
    background: #fff;
}

.db-cal-day.db-cal-weekend {
    background: rgb(var(--color-ci2));
}

.db-cal-day.db-cal-weekend .db-cal-daylabel,
.db-cal-day.db-cal-weekend .db-cal-entry {
    color: #fff;
}

.db-cal-day.db-cal-blank {
    background: transparent;
}

.db-cal-daylabel {
    font: normal 9px/12px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    margin-bottom: 3px;
}

.db-cal-entry {
    display: block;
    font: normal 10px/14px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 3px;
    margin-bottom: 1px;
    cursor: pointer;
    border-radius: 2px;
}

.db-cal-entry.db-cal-birthday {
    background: rgba(var(--color-ci2), 0.15);
}

.db-cal-entry.db-cal-duedate {
    background: rgba(var(--color-ci1), 0.15);
}

.db-cal-entry:hover {
    opacity: 0.7;
}

/* --- CLIENT DASHBOARD (Client.aspx) --- */

.ao-app .customiseForm:has(.cd-root) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.ao-app .customiseForm:has(.cd-root) .title-panel {
    padding-left: 35px !important;
    padding-right: 10px !important;
}

.ao-app .cd-root {
    padding: 10px 0 40px 0;
}

.ao-app .cd-loading,
.ao-app .cd-empty {
    font: normal 13px/40px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    text-align: center;
}

.ao-app .cd-section {
    background: #fff;
    border-radius: 4px;
    padding: 20px 10px 20px 35px;
    margin-bottom: 16px;
}

.ao-app .cd-section-title {
    display: flex;
    align-items: center;
    font: normal 15px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    letter-spacing: 0;
    margin-bottom: 14px;
    cursor: pointer;
    user-select: none;
}
.ao-app .cd-section-title .cd-section-title-text {
    flex: 1 1 auto;
}
.ao-app .cd-collapse-arrow {
    margin-left: auto;
    font-size: 11px;
    color: #8a9aa8;
    flex: 0 0 auto;
}
.ao-app .cd-collapsed .cd-section-title {
    margin-bottom: 0;
}
.ao-app .cd-collapsed.cd-section-portfolio .cd-section-title {
    margin-bottom: 14px;
}

.ao-app .cd-drag-handle {
    display: inline-block;
    cursor: grab;
    color: #b0bac3;
    font-size: 14px;
    line-height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    user-select: none;
    transition: color 0.15s;
}
.ao-app .cd-drag-handle:hover {
    color: #4D5A65;
}
.ao-app .cd-sort-ghost {
    opacity: 0.4;
}
.ao-app .cd-sort-chosen {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ao-app .cd-sort-drag {
    opacity: 0.9;
}

.ao-app .cd-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ao-app .cd-section-link {
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #59768D;
    text-decoration: none;
}
.ao-app .cd-section-link:hover {
    text-decoration: underline;
    color: #4D5A65;
}

.ao-app .cd-empty-hint {
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #b0bac3;
}

/* -- Lifecycle eye-catcher -- */

.ao-app .cd-section-lifecycle {
    background: #ffffff;
}

.ao-app .cd-life-hero {
    display: block;
    margin-bottom: 14px;
}

.ao-app .cd-life-topbar {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    border-radius: 3px;
    overflow: hidden;
    background: #e3e6e9;
}

.ao-app .cd-life-bar-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    font: normal 12px/30px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-app .cd-life-bar-slices {
    flex: 0 0 34%;
    min-width: 210px;
    display: flex;
}

.ao-app .cd-life-bar-slice {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font: normal 11px/30px Conv_GOTHIC, Arial, sans-serif;
    letter-spacing: 0.2px;
}

.ao-app .cd-life-score-wrap.is-score-red,
.ao-app .cd-life-bar-main.is-score-red {
    background: #e6c3c1;
}

.ao-app .cd-life-score-wrap.is-score-yellow-orange,
.ao-app .cd-life-bar-main.is-score-yellow-orange {
    background: #ead5bf;
}

.ao-app .cd-life-score-wrap.is-score-yellow,
.ao-app .cd-life-bar-main.is-score-yellow {
    background: #efe7b9;
}

.ao-app .cd-life-score-wrap.is-score-green-yellow,
.ao-app .cd-life-bar-main.is-score-green-yellow {
    background: #dce7b9;
}

.ao-app .cd-life-score-wrap.is-score-green,
.ao-app .cd-life-bar-main.is-score-green {
    background: #c6dfc8;
}

.ao-app .cd-life-status-wrap {
    flex: 1;
    border-radius: 0;
    border: 0;
    background: #ffffff;
    padding: 12px 0;
}

.ao-app .cd-life-stage {
    font: normal 11px/14px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ao-app .cd-life-meta {
    display: flex;
    gap: 8px;
}

.ao-app .cd-life-meta span {
    display: inline-block;
    border-radius: 3px;
    padding: 2px 8px;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    letter-spacing: 0.3px;
}

.ao-app .cd-life-meta-ok {
    background: #6ab08a;
    color: #fff;
}

.ao-app .cd-life-meta-warn {
    background: #D4B84B;
    color: #4D5A65;
}

.ao-app .cd-life-meta-open {
    background: #b9c3cd;
    color: #fff;
}

.ao-app .cd-life-graph {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.ao-app .cd-life-step {
    position: relative;
    flex: 1 0 120px;
    min-width: 120px;
    border-radius: 3px;
    background: #eef2f5;
    border: 1px solid #dde4eb;
    padding: 8px 8px 7px 26px;
}

.ao-app .cd-life-step:after {
    content: "";
    position: absolute;
    right: -9px;
    top: 50%;
    margin-top: -1px;
    width: 10px;
    height: 2px;
    background: #cbd4dd;
}

.ao-app .cd-life-step:last-child:after {
    display: none;
}

.ao-app .cd-life-dot {
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #b9c3cd;
}

.ao-app .cd-life-step.is-done .cd-life-dot {
    background: #6ab08a;
}

.ao-app .cd-life-step.is-warning .cd-life-dot {
    background: #D4B84B;
}

.ao-app .cd-life-step-title {
    font: normal 11px/14px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-app .cd-life-step-topic {
    font: normal 10px/13px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-app .cd-life-checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ao-app .cd-life-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #edf0f2;
    border-radius: 3px;
    padding: 6px 8px;
}

.ao-app .cd-life-badge {
    flex: 0 0 44px;
    text-align: center;
    border-radius: 2px;
    font: normal 10px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #fff;
    letter-spacing: 0.2px;
}

.ao-app .cd-life-badge-ok {
    background: #6ab08a;
}

.ao-app .cd-life-badge-warn {
    background: #D4B84B;
    color: #4D5A65;
}

.ao-app .cd-life-badge-open {
    background: #a9b4bf;
}

.ao-app .cd-life-row-title {
    flex: 0 0 160px;
    font: normal 11px/18px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
}

.ao-app .cd-life-row-detail {
    flex: 1;
    min-width: 0;
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #5a6a78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Personal: Photo + Notes side by side -- */

.ao-app .cd-personal-row {
    display: flex;
    gap: 24px;
    align-items: center;
}

.ao-app .cd-photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ao-app .cd-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #edf0f2 no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ao-app .cd-photo-empty {
    font: normal 11px/1 Conv_GOTHIC, Arial, sans-serif;
    color: #b0bac3;
    letter-spacing: 1px;
}

.ao-app .cd-photo-edit {
    background: none;
    border: 1px solid #c1cad2;
    border-radius: 3px;
    padding: 3px 12px;
    font: normal 9px/14px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
}
.ao-app .cd-photo-edit:hover {
    border-color: #59768D;
    color: #4D5A65;
}

.ao-app .cd-notes {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 10px;
}

.ao-app .cd-note-input {
    width: 100%;
    box-sizing: border-box;
    font: normal 13px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    padding: 5px 10px;
    background: #f7f8fa;
    border: 1px solid transparent;
    border-left: 3px solid #59768D;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.ao-app .cd-note-input:focus {
    background: #fff;
    border-color: #c1cad2;
    border-left-color: #59768D;
}
.ao-app .cd-note-input::placeholder {
    color: #c1cad2;
}
.ao-app .cd-note-input.cd-note-saved {
    border-left-color: #3D7B5F;
}

/* -- Crop Modal -- */

.cd-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.cd-crop-dialog {
    position: relative;
    background: #fff;
    border-radius: 6px;
    width: 520px;
    max-width: 92vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.cd-crop-title {
    font: normal 13px/20px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    padding: 16px 20px;
    border-bottom: 1px solid #edf0f2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cd-crop-stage {
    position: relative;
    overflow: hidden;
    user-select: none;
    cursor: crosshair;
}

.cd-crop-img {
    display: block;
}

.cd-crop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
}

.cd-crop-box {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
    cursor: move;
    box-sizing: border-box;
}

.cd-crop-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #59768D;
    border-radius: 2px;
    cursor: nwse-resize;
}

.cd-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #edf0f2;
}

.cd-crop-btn {
    padding: 6px 20px;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.cd-crop-btn-cancel {
    background: #edf0f2;
    color: #4D5A65;
}
.cd-crop-btn-cancel:hover {
    background: #dde2e7;
}

.cd-crop-btn-save {
    background: #59768D;
    color: #fff;
}
.cd-crop-btn-save:hover {
    background: #4D5A65;
}
.cd-crop-btn-save:disabled {
    opacity: 0.6;
    cursor: default;
}

/* -- Regulatory grid -- */

.ao-app .cd-reg-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ao-app .cd-reg-item {
    flex: 1;
    min-width: 140px;
}

.ao-app .cd-reg-label {
    font: normal 10px/14px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.ao-app .cd-reg-value {
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    padding: 4px 0;
}

.ao-app .cd-reg-ok {
    color: #3D7B5F;
}

.ao-app .cd-reg-warn {
    color: #b5513c;
}

/* WorldCheck risk badge (same shape as K&E toggle) */
.ao-app .cd-wc-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 3px;
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #fff;
}
.ao-app .cd-wc-badge.cd-wc-none   { background: #8a9aa8; }
.ao-app .cd-wc-badge.cd-wc-low    { background: #7A9A65; }
.ao-app .cd-wc-badge.cd-wc-medium { background: #D4B84B; color: #4D5A65; }
.ao-app .cd-wc-badge.cd-wc-high   { background: #BC544B; }
.ao-app .cd-wc-badge-link {
    cursor: pointer;
    text-decoration: none;
}
.ao-app .cd-wc-badge-link:hover {
    opacity: 0.9;
}

.ao-app .cd-wc-date {
    margin-left: 8px;
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
}

/* K&E toggle button (green box) */
.ao-app .cd-ke-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 3px;
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.ao-app .cd-ke-toggle:hover {
    opacity: 0.85;
}
.ao-app .cd-ke-ok {
    background: #3D7B5F;
    color: #fff;
}
.ao-app .cd-ke-arrow {
    font-size: 9px;
    line-height: 1;
}

/* K&E expandable detail panel */
.ao-app .cd-ke-detail {
    display: none;
    margin-top: 14px;
    border-top: 1px solid #edf0f2;
    padding-top: 12px;
}
.ao-app .cd-ke-detail.cd-ke-open {
    display: block;
}
.ao-app .cd-ke-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 6px 0;
    font: normal 10px/14px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #edf0f2;
    margin-bottom: 4px;
}
.ao-app .cd-ke-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    font: normal 12px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    border-bottom: 1px solid #f7f8fa;
}
.ao-app .cd-ke-col-name {
    flex: 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ao-app .cd-ke-col-edu {
    flex: 1;
    text-align: center;
}
.ao-app .cd-ke-edu-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: #6b7885;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}
.ao-app .cd-ke-col-k,
.ao-app .cd-ke-col-e {
    flex: 1;
    text-align: center;
    font-weight: normal;
    border-radius: 3px;
    line-height: 22px;
}
.ao-app .cd-ke-green {
    background: #6ab08a;
    color: #fff;
}
.ao-app .cd-ke-red {
    background: #d48a7a;
    color: #fff;
}

/* -- Portfolio bar + details -- */

.ao-app .cd-port-bar {
    display: flex;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 14px;
}

.ao-app .cd-port-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transition: opacity 0.15s;
}

.ao-app .cd-port-seg span {
    font: normal 12px/30px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #fff;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ao-app .cd-port-seg:hover {
    opacity: 0.8;
}

.ao-app .cd-port-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ao-app .cd-port-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font: normal 12px/22px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    background: #f7f8fa;
    border: 1px solid transparent;
    border-left: 3px solid #c1cad2;
    border-radius: 3px;
    padding: 0 8px 0 7px;
}

.ao-app .cd-port-row.cd-port-total {
    margin-top: 0;
    padding-top: 0;
    border-left-color: #c1cad2 !important;
}

.ao-app .cd-port-lbl {
    width: 140px;
    flex-shrink: 0;
}

.ao-app .cd-port-amt {
    flex: 1;
    text-align: right;
    font-family: Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
}

.ao-app .cd-port-pct {
    width: 55px;
    text-align: right;
    color: #8a9aa8;
}

/* -- Positions table -- */

.ao-app .cd-pos-table {
    margin-top: 20px;
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ao-app .cd-pos-group-title {
    font: normal 12px/18px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    padding: 10px 0 4px;
}

.ao-app .cd-pos-header {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    font: normal 10px/16px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    border-bottom: 1px solid #dce2e8;
}

.ao-app .cd-pos-sort {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.ao-app .cd-pos-sort .cd-pos-sort-arrow {
    width: 10px;
    text-align: center;
    color: #8a9aa8;
}

.ao-app .cd-pos-sort.is-active .cd-pos-sort-arrow {
    color: #4D5A65;
}

/* Header alignment + arrow placement by column alignment */
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-id,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-name,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-ccy,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-refccy,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-whg,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-acc {
    justify-content: flex-start;
}

.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-qty,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-mv,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-amt,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-nom,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-verfall,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-kurs,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-fx,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-pfwhr,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-pct,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-einstand,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-nre,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-valor {
    justify-content: flex-end;
}

.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-ke {
    justify-content: center;
}

/* Right-aligned headers: arrow sits on the left side */
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-qty .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-mv .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-amt .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-nom .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-verfall .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-kurs .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-fx .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-pfwhr .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-pct .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-einstand .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-nre .cd-pos-sort-arrow,
.ao-app .cd-pos-header .cd-pos-sort.cd-pos-col-valor .cd-pos-sort-arrow {
    order: -1;
}

.ao-app .cd-pos-row {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: #edf0f2;
    border-radius: 3px;
    transition: background 0.1s;
}

.ao-app .cd-pos-row:hover {
    background: #e2e7ec;
}

.ao-app .cd-pos-ic-label {
    display: block;
    font: normal 12px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #59768D;
    padding: 8px 10px 2px;
    margin: 0;
    background: transparent !important;
    border: 0;
    box-sizing: border-box;
    letter-spacing: 0;
    text-transform: none;
}

.ao-app .cd-pos-col-id {
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ao-app .cd-pos-col-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ao-app .cd-pos-ke-warn {
    display: inline;
    max-width: 100%;
    padding: 0 4px;
    border-radius: 2px;
    background: #f8d7da;
    color: #721c24;
    box-shadow: inset 0 0 0 1px #f5c6cb;
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ao-app .cd-pos-col-qty {
    width: 55px;
    flex-shrink: 0;
    text-align: right;
}

.ao-app .cd-pos-col-ccy {
    width: 50px;
    flex-shrink: 0;
    text-align: left;
}

.ao-app .cd-pos-col-mv {
    width: 90px;
    flex-shrink: 0;
    text-align: right;
}

.ao-app .cd-pos-col-refccy {
    width: 50px;
    flex-shrink: 0;
    text-align: left;
}

.ao-app .cd-pos-col-amt {
    width: 90px;
    flex-shrink: 0;
    text-align: right;
}

/* Keep header and content cell alignment consistent in position lists */
.ao-app .cd-pos-header .cd-pos-col-id,
.ao-app .cd-pos-header .cd-pos-col-name,
.ao-app .cd-pos-header .cd-pos-col-ccy,
.ao-app .cd-pos-header .cd-pos-col-refccy {
    justify-content: flex-start;
}

.ao-app .cd-pos-header .cd-pos-col-qty,
.ao-app .cd-pos-header .cd-pos-col-mv,
.ao-app .cd-pos-header .cd-pos-col-amt {
    justify-content: flex-end;
}

/* -- List rows (journal + profilings) -- */

.ao-app .cd-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ao-app .cd-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: #edf0f2;
    border-radius: 3px;
    transition: background 0.1s;
}

.ao-app .cd-list-row:hover {
    background: #e2e7ec;
}

/* Open / ongoing validation (server: hasOpenValidation): red left accent — Offene Validierungen, journal list on Client + Journal.aspx */
.ao-app .cd-section-open-validations .cd-validation-list > .cd-list-row,
.ao-app .cd-section-journal .cd-list > .cd-list-row.cd-je-open-validation,
.ao-app #jouV2List > .cd-list-row.cd-je-open-validation {
    border-left: 5px solid #c62828;
    padding-left: 7px;
}

.ao-app .cd-list-date {
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    flex-shrink: 0;
    width: 76px;
}

.ao-app .cd-list-desc {
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-app .cd-doc-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: #59768D;
    color: #fff;
    font: normal 10px/1 Conv_GOTHIC, Arial, sans-serif;
    flex-shrink: 0;
}

.ao-app .cd-validation-info {
    position: relative;
    cursor: default;
    text-transform: none;
}

.ao-app .cd-validation-info-char {
    text-transform: lowercase;
    line-height: 1;
}

.ao-app .cd-validation-info-popup {
    display: none;
    position: fixed;
    z-index: 3000;
    min-width: 240px;
    max-width: 440px;
    padding: 8px 10px;
    border: none;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5);
    background: #ffffff;
    color: #4d5a65;
    text-align: left;
    pointer-events: none;
}

.ao-app .cd-validation-info.cd-validation-info-open .cd-validation-info-popup {
    display: block;
}

.ao-app .cd-validation-info-title {
    display: block;
    margin-bottom: 8px;
    font: normal 11px/16px Conv_GOTHICB, Arial, sans-serif;
}

.ao-app .cd-validation-info-empty {
    display: block;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
}

.ao-app .cd-validation-info-grid {
    display: grid;
    grid-template-columns: 64px auto;
    gap: 8px;
}

.ao-app .cd-validation-date,
.ao-app .cd-validation-details {
    display: block;
    font: normal 11px/14px Conv_GOTHIC, Arial, sans-serif;
}

.ao-app .cd-validation-msg,
.ao-app .cd-validation-action,
.ao-app .cd-validation-email,
.ao-app .cd-validation-note {
    display: block;
}

.ao-app .cd-validation-note {
    font-family: Conv_GOTHICI, Arial, sans-serif;
}

/* Journal entry interactivity */
.ao-app .cd-je-clickable {
    cursor: pointer;
}
.ao-app .cd-je-expandable {
    cursor: pointer;
}
.ao-app .cd-je-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.45;
    transition: opacity 0.15s;
}
.ao-app .cd-list-row:hover .cd-je-icon {
    opacity: 0.8;
}
.ao-app .cd-list-row.cd-je-has-goto {
    padding-right: 0;
    border-radius: 3px 0 0 3px;
}
.ao-app .cd-je-goto-btn {
    flex: 0 0 32px;
    align-self: stretch;
    margin: -8px 0;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 0 3px 3px 0;
    background: #5A768C;
    color: #fff;
    font: normal 11px/1 Conv_GOTHIC, Arial, sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ao-app .cd-list-row:hover .cd-je-goto-btn {
    background: #4a6578;
}
.ao-app .cd-je-pdf-badge {
    flex: 0 0 32px;
    align-self: stretch;
    margin: -8px 0;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 0 3px 3px 0;
    background: rgba(236, 28, 36, 0.65);
    color: #fff;
    font: normal 9px/1 Conv_GOTHIC, Arial, sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ao-app .cd-list-row:hover .cd-je-pdf-badge {
    background: rgba(236, 28, 36, 0.8);
}

/* ── Email Modal ── */
.jv2-email-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
    box-sizing: border-box;
}

.jv2-email-popup {
    position: relative;
    background: #fff;
    min-width: 700px;
    max-width: 900px;
    width: 60vw;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    padding: 30px 30px 20px;
    box-sizing: border-box;
}

.jv2-email-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 26px;
    line-height: 1;
    color: #8a9aa8;
    cursor: pointer;
    z-index: 1;
}

.jv2-email-close:hover {
    color: #4D5A65;
}

.jv2-email-title {
    font: normal 20px/24px Conv_GOTHICB, Arial, sans-serif;
    text-transform: uppercase;
    color: #4D5A65;
    margin-bottom: 20px;
    padding-right: 30px;
}

.jv2-email-meta {
    margin-bottom: 16px;
}

.jv2-email-row {
    font: normal 11px/20px Arial, Helvetica, sans-serif;
    color: #4D5A65;
}

.jv2-email-lbl {
    font-weight: bold;
}

iframe.jv2-email-body {
    border: none;
    width: 100%;
    height: 500px;
}

.ao-app .cd-je-expanded {
    background: #dde3e9;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ao-app .cd-je-docs-panel {
    background: #f0f2f5;
    padding: 10px 14px;
    border-radius: 0 0 6px 6px;
    margin-top: -5px;
    margin-bottom: 5px;
}
.ao-app .cd-je-docs-loading {
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
}
.ao-app .cd-je-docs-empty {
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    padding: 2px 0;
}
.ao-app .cd-je-docs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.ao-app .cd-je-doc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    background: #fff;
    border-radius: 4px;
}
.ao-app .cd-je-doc-name {
    flex: 1;
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #59768D;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ao-app .cd-je-doc-name:hover {
    text-decoration: none;
    color: #4D5A65;
}
.ao-app .cd-je-wc-action {
    padding: 4px 6px 6px;
}
.ao-app .cd-je-wc-open {
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #59768D;
    text-decoration: none;
    cursor: pointer;
}
.ao-app .cd-je-wc-open:hover {
    color: #4D5A65;
    text-decoration: none;
}
.ao-app .cd-je-doc-unlink {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #b0b8c0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ao-app .cd-je-doc-unlink:hover {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

/* --- Client Dashboard: PIP section (mirrors PIP module styling) --- */
.ao-app .cd-section-pip .pip-module {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ao-app .cd-section-pip .pip-module input,
.ao-app .cd-section-pip .pip-module input[type="text"] {
    height: 28px !important;
    font: normal 12px/28px Conv_GOTHIC, Arial, sans-serif !important;
    padding: 0 10px !important;
    margin: 0 !important;
    color: #4D5A65 !important;
    border: 1px solid #ccd3da !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    text-transform: none !important;
}

.ao-app .cd-section-pip .pip-module input:focus {
    outline: none !important;
    border-color: #59768D !important;
}

.ao-app .cd-section-pip .pip-create {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ao-app .cd-section-pip .pip-amount-input {
    flex: 0 0 120px;
    width: 120px !important;
}

.ao-app .cd-section-pip .pip-note-input {
    flex: 1 1 auto;
    min-width: 80px;
}

.ao-app .cd-section-pip .pip-list {
    width: 100%;
}

.ao-app .cd-section-pip .pip-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
    table-layout: fixed;
}

.ao-app .cd-section-pip .pip-table thead th {
    text-align: left;
    font: normal 10px/16px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 8px 2px;
}

.ao-app .cd-section-pip .pip-table tbody td {
    padding: 6px 10px;
    background: #edf0f2;
    vertical-align: middle;
}

.ao-app .cd-section-pip .pip-table tbody td:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.ao-app .cd-section-pip .pip-table tbody td:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.ao-app .cd-section-pip .pip-row {
    transition: background 0.15s;
}

.ao-app .cd-section-pip .pip-row:hover td {
    background: #e2e7ec;
}

.ao-app .cd-section-pip .pip-row-editing {
    border: 1px solid #ccd3da;
}

.ao-app .cd-section-pip .pip-row-editing td {
    background: #fff !important;
}

.ao-app .cd-section-pip .pip-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 2px;
    font: normal 10px/20px Conv_GOTHIC, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
}

.ao-app .cd-section-pip .pip-st-active { background: #4a90a4; }
.ao-app .cd-section-pip .pip-st-realized { background: #6ab08a; }
.ao-app .cd-section-pip .pip-st-dismissed { background: #b0bac3; }

.ao-app .cd-section-pip .pip-dir-in {
    background: #d4edda;
    color: #3d6b4a;
}

.ao-app .cd-section-pip .pip-dir-out {
    background: #f5d5d5;
    color: #8b4a4a;
}

.ao-app .cd-section-pip .pip-amount {
    min-width: 90px;
    text-align: right;
    display: block;
    font: normal 13px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
}

.ao-app .cd-section-pip .pip-reason {
    display: block;
    width: 100%;
    font: normal 11px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ao-app .cd-section-pip .pip-note {
    display: block;
    font: normal 11px/20px Conv_GOTHIC, Arial, sans-serif;
    color: #8a9aa8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-app .cd-section-pip .pip-col-status { width: 82px; }
.ao-app .cd-section-pip .pip-col-dir { width: 92px; }
.ao-app .cd-section-pip .pip-col-amount { width: 96px; }
.ao-app .cd-section-pip .pip-col-reason { width: 130px; }
.ao-app .cd-section-pip .pip-col-note { width: auto; }
.ao-app .cd-section-pip .pip-col-actions { width: 118px; }

.ao-app .cd-section-pip .pip-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ao-app .cd-section-pip .pip-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 3px !important;
    font: normal 11px/28px Conv_GOTHIC, Arial, sans-serif !important;
    text-transform: uppercase;
    cursor: pointer !important;
    color: #fff !important;
    background: #808F9D !important;
}

.ao-app .cd-section-pip .pip-btn:hover { background: #4D5A65 !important; }

.ao-app .cd-section-pip .pip-btn-edit,
.ao-app .cd-section-pip .pip-btn-del {
    flex-shrink: 0;
    height: 24px !important;
    padding: 0 10px !important;
    border-radius: 3px !important;
    border: none !important;
    font: normal 10px/24px Conv_GOTHIC, Arial, sans-serif !important;
    cursor: pointer !important;
}

.ao-app .cd-section-pip .pip-btn-edit {
    background: #808F9D !important;
    color: #fff !important;
}

.ao-app .cd-section-pip .pip-btn-edit:hover { background: #4D5A65 !important; }

.ao-app .cd-section-pip .pip-btn-del {
    background: transparent !important;
    color: #b0bac3 !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
}

.ao-app .cd-section-pip .pip-btn-del:hover {
    background: #c0392b !important;
    color: #fff !important;
    border-color: #c0392b !important;
}

.ao-app .cd-section-pip .pip-btn-cancel { background: #b0bac3 !important; color: #fff !important; }
.ao-app .cd-section-pip .pip-btn-cancel:hover { background: #8a9aa8 !important; }
.ao-app .cd-section-pip .pip-btn-save { background: #808F9D !important; color: #fff !important; }
.ao-app .cd-section-pip .pip-btn-save:hover { background: #4D5A65 !important; }

.ao-app .cd-section-pip .pip-empty,
.ao-app .cd-section-pip .pip-error {
    padding: 18px;
    text-align: center;
    font: normal 12px/1 Conv_GOTHIC, Arial, sans-serif;
}
.ao-app .cd-section-pip .pip-empty { color: #8a9aa8; }
.ao-app .cd-section-pip .pip-error { color: #a85050; }

.ao-app .cd-section-pip .pip-dd {
    position: relative;
    flex: 0 0 auto;
}

.ao-app .cd-section-pip .pip-dd-display {
    height: 28px;
    padding: 0 20px 0 8px;
    border: 1px solid #c1cad2;
    border-radius: 3px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a9aa8'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: #aab4bc;
    font: normal 11px/28px Conv_GOTHIC, Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}

.ao-app .cd-section-pip .pip-dd-display.pip-dd-active { color: #4D5A65; }
.ao-app .cd-section-pip .pip-dd-display:hover,
.ao-app .cd-section-pip .pip-dd-open .pip-dd-display { border-color: #4D5A65; }

.ao-app .cd-section-pip .pip-dd-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #c1cad2;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    z-index: 100;
}

.ao-app .cd-section-pip .pip-dd-open .pip-dd-list { display: block; }

.ao-app .cd-section-pip .pip-dd-item {
    padding: 5px 8px;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    cursor: pointer;
}

.ao-app .cd-section-pip .pip-dd-item:hover { background: #f0f3f6; }
.ao-app .cd-section-pip .pip-dd-item-reset { color: #8a9aa8; border-bottom: 1px solid #edf0f2; }

.ao-app .cd-section-pip .pip-row-editing .pip-edit-amount {
    width: 100% !important;
}
.ao-app .cd-section-pip .pip-row-editing .pip-edit-note {
    width: 100% !important;
}
.ao-app .cd-je-docs-add {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}
.ao-app .cd-je-docs-select {
    display: none;
}
.ao-app .cd-je-docs-add .kyc-dd {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}
.ao-app .cd-je-docs-add .kyc-dd-display {
    height: 26px !important;
    font: normal 11px/26px Conv_GOTHIC, Arial, sans-serif !important;
    padding: 0 24px 0 8px !important;
}
.ao-app .cd-je-docs-link-btn {
    flex-shrink: 0;
    height: 26px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    background: #59768D;
    color: #fff;
    font: normal 11px/26px Conv_GOTHIC, Arial, sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}
.ao-app .cd-je-docs-link-btn:hover {
    background: #4D5A65;
}

/* ViSU overruled violation inline display */
.ao-app .cd-visu-violation {
    padding: 2px 0 0 0;
}
.ao-app .cd-visu-details {
    margin-bottom: 8px;
}
.ao-app .cd-visu-details table {
    border-collapse: collapse;
    border-spacing: 0;
}
.ao-app .cd-visu-details td {
    padding: 2px 0;
    vertical-align: top;
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
}
.ao-app .cd-visu-label {
    font-weight: bold;
    white-space: nowrap;
    color: #4D5A65;
    background: var(--color-light-gray, #eef0f2);
    padding: 2px 10px !important;
}
.ao-app .cd-visu-value {
    background: var(--color-light-gray, #eef0f2);
    padding: 2px 10px !important;
}
.ao-app .cd-visu-details .cd-visu-label {
    width: 140px;
    padding: 2px 0 2px 10px !important;
    background: none;
}
.ao-app .cd-visu-details .cd-visu-value {
    padding: 2px 0 2px 10px !important;
    background: none;
}
.ao-app .cd-visu-reason {
    max-width: 340px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 16px;
    max-height: 54px;
    overflow: auto;
    scrollbar-width: thin;
}
.ao-app .cd-visu-deviation {
    margin-top: 6px;
}
.ao-app .cd-visu-deviation table {
    border-collapse: separate;
    border-spacing: 6px 6px;
    table-layout: fixed;
}
.ao-app .cd-visu-deviation td {
    font: normal 11px/20px Conv_GOTHIC, Arial, sans-serif;
    text-align: center;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
    min-width: 32px;
}
.ao-app .cd-visu-ic-name {
    font-weight: bold;
    border-radius: 2px;
}
.ao-app .cd-visu-data {
    color: #454e57;
    background: var(--color-light-gray, #eef0f2);
    border-radius: 2px;
}
.ao-app .cd-visu-good {
    background: rgb(var(--color-good, 120, 190, 90)) !important;
    color: #fff;
}
.ao-app .cd-visu-bad {
    background: rgb(var(--color-bad, 210, 80, 70)) !important;
    color: #fff;
}

.ao-app .cd-prof-variety {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 2px;
    background: #e3e6e9;
    color: #5a6a78;
    font: normal 10px/18px Conv_GOTHIC, Arial, sans-serif;
}

/* --- DOCUMENTS v2: full-width stretch + override old float-based layout --- */

.ao-app .customiseForm:has(.doc-v2) {
    max-width: none !important;
    padding: 0 !important;
}

.ao-app .customiseForm:has(.doc-v2) .titleContent {
    padding-left: 40px !important;
}

/* --- RELATIONS v2: full-width stretch --- */

.ao-app .customiseForm:has(.rel-v2) {
    max-width: none !important;
    padding: 0 !important;
}

.ao-app .customiseForm:has(.rel-v2) .titleContent {
    padding-left: 40px !important;
}

/* --- CLIENT ACCESS v2: full-width stretch --- */

.ao-app .customiseForm:has(.acc-v2) {
    max-width: none !important;
    padding: 0 !important;
}

.ao-app .customiseForm:has(.acc-v2) .titleContent {
    padding-left: 40px !important;
}

/* --- CLIENT PORTAL v2: match office 131px header zone --- */

/* --- HIDE LOGO FROM OLD HEADER (now inside sidebar or hidden) --- */

.ao-app h1.costomer_logo,
.ao-app h1.logo {
    display: none !important;
}

/* --- WorldCheck Monitoring Alerts on Client Dashboard --- */

.ao-app .cd-mon-loading {
    padding: 10px 0;
    color: #b0bac3;
    font-style: italic;
}

.ao-app .cd-mon-list {
    padding: 0;
}

.ao-app .cd-mon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #edf0f2;
    font: normal 12px/20px Conv_GOTHIC, Arial, sans-serif;
}

.ao-app .cd-mon-row:last-child {
    border-bottom: none;
}

.ao-app .cd-mon-date {
    flex: 0 0 76px;
    color: #5a6a78;
}

.ao-app .cd-mon-info {
    flex: 1;
    color: #333;
}

.ao-app .cd-mon-review-btn {
    flex: 0 0 auto;
    padding: 4px 12px;
    background: #59768D;
    color: #fff;
    border: none;
    cursor: pointer;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    letter-spacing: 0.5px;
}

.ao-app .cd-mon-review-btn:hover {
    background: #4a6577;
}

.ao-app .cd-mon-review-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.ao-app .cd-mon-review-btn.cd-mon-reviewed {
    background: #7A9A65;
    cursor: default;
}

/* --- Monitoring alert detail rows (below REVIEWED line) --- */

.ao-app .cd-mon-changes {
    padding: 0 0 8px;
    border-bottom: 1px solid #edf0f2;
    margin-bottom: 4px;
}

.ao-app .cd-mon-change {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 8px;
    background: #edf0f2;
    border-radius: 3px;
    margin: 0 0 3px;
    font: normal 12px/18px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    transition: background 0.1s;
}

.ao-app .cd-mon-change:hover {
    background: #e2e7ec;
}

.ao-app .cd-mon-change-badge {
    flex: 0 0 76px;
    display: inline-block;
    padding: 1px 0;
    font: normal 11px/18px Conv_GOTHIC, Arial, sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #7a8a98;
    margin-top: 0;
}

.ao-app .cd-mon-change-badge.badge-new     { color: #59768D; }
.ao-app .cd-mon-change-badge.badge-updated { color: #C5A34B; }
.ao-app .cd-mon-change-badge.badge-removed { color: #9E6B6B; }

.ao-app .cd-mon-change-body {
    flex: 1;
    overflow: hidden;
}

.ao-app .cd-mon-change-entity {
    font: normal 12px/18px Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ao-app .cd-mon-change-cat {
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #7a8a98;
}

.ao-app .cd-mon-change-detail {
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #5a6a78;
    margin-top: 2px;
}

.ao-app .cd-mon-change-diff {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    margin-top: 2px;
}

.ao-app .cd-mon-diff-field {
    color: #7a8a98;
    flex: 0 0 auto;
}

.ao-app .cd-mon-diff-before {
    color: #4D5A65;
}

.ao-app .cd-mon-diff-arrow {
    color: #4D5A65;
    flex: 0 0 auto;
}

.ao-app .cd-mon-diff-after {
    color: #4D5A65;
    font-family: Conv_GOTHICB, Conv_GOTHIC, Arial, sans-serif;
}

/* Lane B / WorldCheck: Name, Kategorie, … inside grey NEU row, below intro line (aligned with cd-mon-change-detail) */
.ao-app .cd-mon-change-entity-details {
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.ao-app .cd-mon-change-entity-details-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ao-app .cd-mon-detail-th {
    width: 140px;
    padding: 3px 10px 3px 0;
    vertical-align: top;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #7a8a98;
    text-align: left;
    border-bottom: 1px solid rgba(77, 90, 101, 0.12);
}

.ao-app .cd-mon-detail-td {
    padding: 3px 0;
    vertical-align: top;
    font: normal 11px/16px Conv_GOTHIC, Arial, sans-serif;
    color: #4D5A65;
    border-bottom: 1px solid rgba(77, 90, 101, 0.12);
    word-wrap: break-word;
}

.ao-app .cd-mon-change-entity-details-table tr:last-child .cd-mon-detail-th,
.ao-app .cd-mon-change-entity-details-table tr:last-child .cd-mon-detail-td {
    border-bottom: none;
}

/* PIP page: use full width next to quick list */
.ao-content-frame:has(#pipRoot) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.ao-app .contentPull:has(#pipRoot),
.ao-app .content:has(#pipRoot),
.ao-app .content.onlineForm:has(#pipRoot),
.ao-app .customise:has(#pipRoot),
.ao-app .customise.customColor1:has(#pipRoot),
.ao-app .customiseForm:has(#pipRoot) {
    width: 100% !important;
    max-width: none !important;
}

.ao-app .customiseForm:has(#pipRoot) {
    padding-right: 10px !important;
}