iframe.pbl_date_iframe {
    background-color: #fff;
    bottom: 19px;
    height: 142px;
    position: absolute;
    right: -84px;
    width: 184px;
    z-index: 1100;
    top: 28px;
}

div.PBLCal {
    background-color: #fff;
    border: solid 1px #999;
    bottom: 19px;
    height: 142px;
    position: absolute;
    right: -84px;
    width: 184px;
    z-index: 1100;
    top: 28px;
}

a.pblCalImage {
    background-image: url('../img/calendar-12-black.svg');
    background-repeat: no-repeat;
    width: 20px;
    cursor: pointer;
}

iframe.pbl_date_iframe_bottom {
    background-color: #fff;
    bottom: -141px;
    height: 140px;
    position: absolute;
    right: 9px;
    width: 184px;
    z-index: 1000;
}

div.PBLCal_bottom {
    background-color: #fff;
    border: solid 1px #999;
    bottom: -141px;
    height: 140px;
    position: absolute;
    right: 9px;
    width: 184px;
    z-index: 1100;
}

table.tbl tr.over div.PBLCal img {
    border-color: #fff;
    border-style: solid;
    border-width: 1px;
}

div.PBLWeekend {
    background-color: #e6e6fa;
    cursor: pointer;
}

div.PBLWeekday {
    background-color: #fff;
    cursor: pointer;
}

div.PBLCalCell {
    float: left;
    font: 10px/16px sans-serif;
    height: 16px;
    margin: 1px;
    padding: 0px;
    text-align: center;
    width: 24px;
}

div.PBLDayRow {
    background-color: #fee7b6;
    color: #000;
    font-weight: bold;
}

div.PBLOtherMonth {
    color: #777;
}

div.PBLThisMonth {
    color: #000;
}

div.PBLCalCellHover {
    background-color: #b7cadf;
    color: #000;
    font-weight: bold;
}

div.PBLSelected {
    background-color: #fee7b6;
    color: #000;
}

div.PBLToolbarLeft {
    float: left;
    height: 14px;
}

div.PBLToolbarRight {
    float: right;
    height: 14px;
}

div.PBLRow {
    padding: 0px;
    margin: 0px;
}

div.PBLToolbar {
    height: 14px;
    padding: 0px;
    margin: 0px;
}

div.tab_barN {
    background-image: url(../img/tabbar_bg.gif);
    background-position: 0px -1px;
    background-repeat: repeat;
    margin: 0 0 5px 0;
    text-align: left;
    width: 99%;
}

    div.tab_barN a {
        background-color: #e7e7e7;
        border-color: #999;
        border-style: solid;
        border-width: 1px;
        color: #555;
        font-size: 11px;
        line-height: 22px;
        margin: 0 0 0 3px;
        padding: 2px 5px 2px 5px;
        text-decoration: none;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

        div.tab_barN a:hover {
            border-bottom: solid 2px #ffa500;
        }

        div.tab_barN a.loading {
            background-image: url(../img/tab_loading.gif);
            background-repeat: repeat;
            background-position: center;
        }

        div.tab_barN a.selected {
            background-color: #fff;
            border-bottom-color: #fff;
            color: #000;
            font-weight: bold;
        }

img.PBLNavigate {
    cursor: pointer;
    height: 14px;
    width: 14px;
}

table.tbl td.highlighted_cell {
    background-color: #ff9;
}

table.tbl td.status_critical {
    background-color: #880c84;
    background-image: url(../img/status_critical.gif);
    background-position: bottom left;
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

table.tbl td.status_negligable {
    background-color: #adff2f;
    background-image: url(../img/status_negligable.gif);
    background-position: bottom left;
    background-repeat: repeat-x;
    color: #000;
    text-align: center;
    vertical-align: middle;
}

table.tbl td.status_moderate {
    background-color: #ff0;
    background-image: url(../img/status_moderate.gif);
    background-position: bottom left;
    background-repeat: repeat-x;
    color: #000;
    text-align: center;
    vertical-align: middle;
}

table.tbl td.status_significant {
    background-color: #f00;
    background-image: url(../img/status_significant.gif);
    background-position: bottom left;
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

div.grid_menu_image, div.grid_menu_image_only {
    background-color: transparent;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 18px;
    margin: 0;
    width: 26px;
}

div.grid_menu_label, div.grid_menu_label_only {
    background-color: transparent;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
    padding-left: 2px;
    padding-right: 2px;
    text-align: left;
    width: 80px;
}

div.grid_menu_image, div.grid_menu_label {
    float: left;
}

div.grid_menu_section_image_with_label {
    background-color: #fff;
    background-image: url(../img/office_dd_bg.png);
    background-position: left top;
    background-repeat: repeat-y;
    margin: 0;
    padding: 0;
    width: 110px;
}

div.grid_menu_section_image {
    margin: 0;
    padding: 0;
    width: 26px;
}

div.grid_menu_section_label {
    margin: 0;
    padding: 0;
    width: 80px;
}

div.grid_menu_pointer {
    cursor: pointer;
    color: #00407b;
}

div.grid_butn_container {
    border: 0px;
    background-color: var(--gray-200);
    padding: 0.25rem;
    border-radius: 50%;
    color: var(--gray-900);
    transition: 0.3s;
    min-height: 2rem;
    min-width: 2rem;
    max-height: 2rem;
    max-width: 2rem;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-top: 0.35rem;
}

    div.grid_butn_container:hover {
        background-color: var(--gray-300);
    }

table.tbl td.grid_button {
    overflow: hidden;
    padding: 0.25rem;
    text-align: center;
}

/* Auto Fill */

div.pbl_auto_fill {
    background-color: #fff;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    position: absolute;
    top: 2px;
    min-width: 300px;
    border-radius: 0.5rem;
    width: 100%;
}

    div.pbl_auto_fill .scroll-area {
        max-height: 300px;
        overflow-y: auto;
        border-radius: 0.5rem;
        list-style-type: none;
        margin-bottom: 0px;
    }

        div.pbl_auto_fill .scroll-area li {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
        }

    div.pbl_auto_fill .pbl_auto_count {
        border-top: solid 1px var(--gray-300);
        padding: 1rem;
        background-color: var(--gray-50);
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    div.pbl_auto_fill .avatar {
        border-radius: 50%;
        font-size: 11px !important;
        width: 24px;
        display: inline-block;
        height: 24px;
        min-height: 24px;
        min-width: 24px;
    }

div.pbl_auto_fill_icon {
    display: inline;
    margin: 0px;
    border-top: 1px solid var(--gray-300);
    border-left: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
    padding: 7px 12px 7px 10px;
    background-repeat: no-repeat;
    background-position: 4px 4px;
}

div.drop_box_form {
    margin-bottom: 10px;
}

    div.drop_box_form input.pbl_auto_fill {
        background-repeat: no-repeat;
        background-position: 0.5rem;
    }

div.input_form input.pbl_auto_fill {
    background-repeat: no-repeat;
    background-position: 0.5rem;
}

td.pbl_form_input_entry {
    position: relative;
}

    td.pbl_form_input_entry input.pbl_auto_fill {
        background-repeat: no-repeat;
        background-position: 0.5rem;
    }

    td.pbl_form_input_entry span {
        font-weight: 600;
    }

input.pbl_auto_fill.user,
input.pbl_auto.user {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath fill-rule='evenodd' d='M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z' /%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

input.pbl_auto_fill.plan,
input.pbl_auto.plan {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath fill-rule='evenodd' d='M13.5 1h-11a1 1 0 00-1 1v12a1 1 0 001 1h11a1 1 0 001-1V2a1 1 0 00-1-1zm-11-1a2 2 0 00-2 2v12a2 2 0 002 2h11a2 2 0 002-2V2a2 2 0 00-2-2h-11z' /%3e%3cpath d='M6.5 3a1 1 0 011-1h1a1 1 0 011 1v3a1 1 0 01-1 1h-1a1 1 0 01-1-1V3zm-4 0a1 1 0 011-1h1a1 1 0 011 1v7a1 1 0 01-1 1h-1a1 1 0 01-1-1V3zm8 0a1 1 0 011-1h1a1 1 0 011 1v10a1 1 0 01-1 1h-1a1 1 0 01-1-1V3z' /%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

input.pbl_auto_fill.contract,
input.pbl_auto.contract {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath fill-rule='evenodd' d='M8.186 1.113a.5.5 0 00-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 011.114 0l7.129 2.852A.5.5 0 0116 3.5v8.662a1 1 0 01-.629.928l-7.185 2.874a.5.5 0 01-.372 0L.63 13.09a1 1 0 01-.63-.928V3.5a.5.5 0 01.314-.464L7.443.184z' /%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

input.pbl_auto_fill.site,
input.pbl_auto.site {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath fill-rule='evenodd' d='M14.763.075A.5.5 0 0115 .5v15a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V14h-1v1.5a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5V10a.5.5 0 01.342-.474L6 7.64V4.5a.5.5 0 01.276-.447l8-4a.5.5 0 01.487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5V15h2V1.309l-7 3.5V15z' /%3e%3cpath d='M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z' /%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

input.pbl_auto_fill.supplier,
input.pbl_auto.supplier {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath d='M6.25 2.25V8.75Q6.22 8.97 6 9Q5.78 8.97 5.75 8.75V2.25Q5.75 1.72 6.12 1.38Q6.47 1 7 1H9Q9.53 1 9.88 1.38Q10.25 1.72 10.25 2.25V8.75Q10.22 8.97 10 9Q9.78 8.97 9.75 8.75V2.25Q9.69 1.56 9 1.5H7Q6.31 1.56 6.25 2.25ZM5 2.28V2.81Q3 3.47 1.78 5.12Q0.53 6.78 0.5 9V10H0V9Q0.03 6.59 1.41 4.78Q2.78 2.97 5 2.28ZM11 2.81V2.28Q13.19 2.97 14.56 4.75Q15.94 6.53 16 8.94V9V10H15.5V8.94Q15.44 6.75 14.22 5.12Q12.97 3.47 11 2.81ZM15.78 11.5H0.22Q-0.44 11.56 -0.5 12.22Q-0.5 12.53 -0.28 12.66Q0.34 13.12 2.34 13.78Q4.38 14.44 8 14.5Q11.62 14.44 13.66 13.78Q15.66 13.12 16.28 12.66Q16.5 12.53 16.5 12.22Q16.44 11.56 15.78 11.5ZM0.22 11H15.78Q16.31 11 16.66 11.34Q17 11.69 17 12.22Q17 12.75 16.56 13.06Q15.88 13.59 13.78 14.25Q11.72 14.94 8 15Q4.28 14.94 2.22 14.25Q0.12 13.59 -0.56 13.06Q-1 12.75 -1 12.22Q-1 11.69 -0.66 11.34Q-0.31 11 0.22 11Z'/%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

input.pbl_auto_fill.workspace,
input.pbl_auto.workspace {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath fill-rule='evenodd' d='M0 12.5A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-6h-1v6a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-6H0v6z' /%3e%3cpath fill-rule='evenodd' d='M0 4.5A1.5 1.5 0 011.5 3h13A1.5 1.5 0 0116 4.5v2.384l-7.614 2.03a1.5 1.5 0 01-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 00-.5.5v1.616l6.871 1.832a.5.5 0 00.258 0L15 6.116V4.5a.5.5 0 00-.5-.5h-13zM5 2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V3h-1v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V3H5v-.5z' /%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

input.pbl_auto_fill.task,
input.pbl_auto.task {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath fill-rule='evenodd' d='M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z' /%3e%3cpath fill-rule='evenodd' d='M9.5 1h-3a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3zm4.354 7.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 11.708-.708L7.5 9.793l2.646-2.647a.5.5 0 01.708 0z' /%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

input.pbl_auto_fill.search,
input.pbl_auto.search {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23343a40'%3e%3cpath fill-rule='evenodd' d='M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z' /%3e%3cpath fill-rule='evenodd' d='M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z' /%3e%3c/svg%3e");
    padding-left: 2.25rem;
}

div.pbl_drop_box div.pbl_auto_fill_icon {
    display: inline;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-bottom: none;
    padding: 4px 12px 4px 10px;
    background-repeat: no-repeat;
    background-position: 4px 2px;
}

div.pbl_auto_fill_container {
    border-width: 0;
    height: 1px;
    overflow: visible;
    position: relative;
    z-index: 3000;
}

div.pbl_auto_fill p.pbl_auto_item {
    background-color: #fff;
    cursor: pointer;
    margin: 1px;
    padding: 0.5rem 5px 0.5rem 5px;
}

div.pbl_auto_fill li.pbl_hover {
    background-color: var(--primary);
    color: #fff;
}

div.pbl_auto_fill li.pbl_auto_item {
    cursor: pointer;
    padding: 0.5rem;
}

    div.pbl_auto_fill li.pbl_auto_item:hover {
        background-color: var(--primary);
        color: #fff;
    }

div.pbl_auto_fill div.pbl_scroll_down, div.pbl_auto_fill div.pbl_scroll_up {
    background-color: #fff;
    background-position: center top;
    background-repeat: no-repeat;
    border-color: #eee;
    border-style: solid;
    border-width: 1px;
    font-size: 2px;
    height: 14px;
    margin: 1px;
    padding: 0;
    width: 138px;
}

div.pbl_auto_fill div.pbl_scroll_down {
    background-image: url(../img/scroll_down.gif);
    float: right;
    padding: 1rem;
    background-position: center;
}

@media screen and (max-width: 500px) {
    div.pbl_auto_fill div.pbl_scroll_down {
        padding: 2rem;
    }
}

div.pbl_auto_fill div.pbl_scroll_up {
    background-image: url(../img/scroll_up.gif);
    float: left;
    padding: 1rem;
    background-position: center;
}

@media screen and (max-width: 500px) {
    div.pbl_auto_fill div.pbl_scroll_up {
        padding: 2rem;
    }
}

div.pbl_form_input_entry {
    position: relative;
}

iframe.clear_ie {
    background-color: #fff;
    margin: 1px 0 0 0;
    position: absolute;
    width: 302px;
    height: 0;
    z-index: 10;
}

/* Drop box */

div.pbl_drop_box {
    background-color: #fff;
    border-color: #dee2e6;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    margin-bottom: 10px;
    padding: 0.5rem;
    transition: max-height 0.2s ease-out;
    /*overflow: hidden;*/
}

/* Ajax overlay emitted by postbackless_page.cs; the ramp keeps the scrim
   light-on-light / dark-on-dark. */
div.dropbox_loading {
    background-color: var(--gray-200);
}

p.pbl_drop_box {
    background-color: var(--gray-50);
    border-color: #dee2e6 !important;
    border-style: solid;
    border-width: 1px;
    line-height: 24px;
    margin: 10px 0 0 0;
    padding: 0.5rem;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

    p.pbl_drop_box a {
        background-color: var(--gray-50) !important;
        background-position: 2px 4px;
        background-repeat: no-repeat;
        color: #000;
        height: 24px;
        line-height: 24px;
        margin: 0 0 0 8px;
        padding: 5px 6px 5px 20px;
    }

    p.pbl_drop_box button {
        border: 0;
        background-color: var(--gray-50) !important;
        background-position: 2px 4px;
        background-repeat: no-repeat;
        color: #000;
        height: 24px;
        margin: 0 0 0 8px;
        padding: 0 6px 5px 20px;
        font-weight: 600;
    }

        p.pbl_drop_box button:focus-visible {
            outline: 2px solid var(--primary); /* width, style, color */
            outline-offset: 4px;
            border-radius: 0.375rem;
        }

    /* The expand button stores its open/closed/loading state in the inline
       background-image URL (pbl_actions.js reads it via indexOf('up') and
       rewrites it) - leave that mechanism alone, hide the image, and render
       the state as a Font Awesome glyph keyed off the same style attribute. */
    button.expand-btn {
        background-image: none !important;
        position: relative;
    }

        button.expand-btn::before {
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            content: "\f078"; /* chevron-down = collapsed */
            position: absolute;
            left: 4px;
            top: 50%;
            width: 1em;
            height: 1em;
            line-height: 1;
            margin-top: -0.5em;
        }

        button.expand-btn[style*="_up.gif"]::before {
            content: "\f077"; /* chevron-up = expanded */
        }

        button.expand-btn[style*="spinner"]::before {
            content: "\f1ce";
            animation: tab-loading-spin 1s linear infinite;
        }

div.pbl_drop_box input, div.pbl_drop_box textarea {
}

div.pbl_drop_box input, div.pbl_drop_box textarea, div.pbl_drop_box select {
}

p.pbl_drop_box a:hover {
    background-color: #eaecff;
}

div.drop_box_form table {
    color: var(--gray-700);
    width: 100%;
}

div.drop_box_form td {
    padding: 5px;
    /*border-bottom: dotted rgb(171, 195, 235) 1px;*/
}

div.drop_box_form table div.input-form-label-above {
}

div.drop_box_form td.colthird {
    width: 33%;
}

div.input-form-label-above label {
    font-weight: 500;
}

div .drop_box_form td.drop_box_form_title {
    border-width: 0;
    font-weight: bold;
}

div.input_save_notice {
    font-size: 12pt;
    padding: 5px;
}

div.pbl_selection {
}

    div.pbl_selection input.pbl_auto {
        background-position: 0.5rem center;
        background-repeat: no-repeat;
        float: left;
        padding: 0px 0px 0px 2rem;
        margin-left: -10px;
        max-width: 250px;
        min-width: 120px;
        width: 100%;
    }

    div.pbl_selection div.left {
        background-color: #fff;
        border-color: #ddd;
        border-style: solid;
        border-width: 1px;
        height: 200px;
        overflow: auto;
        margin-bottom: 5px;
        margin-right: 2px;
        width: 50%;
    }

    div.pbl_selection div.leftMax {
        width: 100% !important;
    }

    div .pbl_selection div.left p.empty, div.pbl_selection div.right p.empty {
        background-image: none;
        cursor: default;
        padding: 2px;
    }

    div.pbl_selection div.left p {
        background-image: url(../img/arrow_right_blue.gif);
        background-position: 3px center;
        background-repeat: no-repeat;
        cursor: pointer;
        margin: 2px;
        padding: 0.5rem 2px 2px 22px;
    }

    div.pbl_selection div.right {
        background-color: #fff;
        border-color: #ddd;
        border-style: solid;
        border-width: 1px;
        height: 200px;
        margin: 0 0 0 0;
        overflow: auto;
        width: 40%;
    }

    div.pbl_selection div.rightMax {
        width: 100% !important;
    }

    div.pbl_selection div.right p {
        background-image: url(../img/cross.gif);
        background-position: 3px center;
        background-repeat: no-repeat;
        cursor: pointer;
        margin: 2px;
        padding: 0.5rem 2px 2px 22px;
    }

    div.pbl_selection div.selection_head {
        /*background-color: #fff;
        background-image: url(../img/toolbar_bg.png);
        background-position: left bottom;
        background-repeat: repeat-x;*/
        padding: 5px 10px 5px 10px;
        /*width: 504px;*/
    }

    div.pbl_selection a.selection_reset span {
    }

    div.pbl_selection a.selection_reset {
        padding-top: 0px;
    }

select.auto_fill_sub_select {
    max-width: 250px;
    margin-top: 4px;
}

table.mceToolbar td.mceToolbarStart, table.mceToolbar td {
    width: 0;
}

    table.mceToolbar td.mceToolbarEnd {
        width: 100%;
    }

/*
	FILES
*/

/*table.tbl*/
div.pbl_file_list_area a.pbl_file_delete {
    color: #900;
    cursor: pointer;
    padding-top: 5px;
}

/*table.tbl*/
div.pbl_file_list_area a.pbl_file_download {
    color: #00f;
    cursor: pointer;
    font-weight: 500;
}

    /*table.tbl*/
    div.pbl_file_list_area a.pbl_file_delete:hover, /*table.tbl*/ div.pbl_file_list_area a.pbl_file_download:hover {
        text-decoration: underline;
    }

div.pbl_file_tab {
    /*background-color: transparent;*/
    /*background-image: url(../img/attachment_tab.gif);*/
    /*background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 32px;
    width: 24px;*/
}

div.pbl_file_tab_selected {
}

div.pbl_file_tab_hover {
}

/* Matches button.collapse-btn beside it so the two read as a pair. The glyph is a
   child element rather than a ::before, because the element is now a real button and
   the icon can simply be marked aria-hidden. */
button.pbl_file_tab_add {
    border-radius: 50% !important;
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    cursor: pointer;
}

div.pbl_file_tab_list {
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 2.5rem;
    width: 3rem;
    background-image: url(../img/index.gif);
    visibility: hidden;
}

table.pbl_file_area {
    width: 100%;
}

/* Bare selector included so the background also applies outside table.tbl
   (checklists) - it used to be inlined on the td for that reason, which
   blocked the dark-mode override. */
table.tbl td.pbl_file_crud_area,
td.pbl_file_crud_area {
    background-color: #fff;
    border-width: 0;
    padding: 5px;
}

table.tbl td.pbl_file_crud_area_expand {
    background-color: #fff;
    border-width: 0;
    width: 60px;
    vertical-align: top;
}

table.tbl td.pbl_file_tabbar_area {
    /*background-color: transparent;
    background-image: url(../img/attachment_tab_area.gif);
    background-position: center center;
    background-repeat: repeat-y;
    border-width: 0;
    padding: 0;
    width: 24px;*/
    border-width: 0;
}

div.pbl_file_form {
    border: solid 1px var(--gray-200);
    border-radius: 0.375rem;
    padding: 1rem;
}

    div.pbl_file_form div {
        background-color: #fff;
        padding: 0.5rem;
    }

        div.pbl_file_form div.file_form_head {
            background-image: url(../img/toolbar_bg.png);
            background-position: left bottom;
            background-repeat: repeat-x;
            height: 22px;
            padding: 5px 10px 5px 10px;
            vertical-align: middle;
            width: 280px;
        }

        div.pbl_file_form div.pbl_file_form_existing {
            /*background-color: #eaecff;
            background-image: url(../img/file_form_shadow.gif);
            background-position: left bottom;
            background-repeat: repeat-x;*/
            padding: 5px 5px 10px 5px;
        }

            div.pbl_file_form div.pbl_file_form_existing h1 {
                font-size: 11pt;
                font-weight: bold;
            }

    div.pbl_file_form a.pbl_file_form_delete {
        color: #900;
        padding-left: 5px;
    }

    /* Was a left-aligned paperclip.png background image, which stayed a fixed
       bitmap in dark mode - render it as a Font Awesome glyph so it inherits
       the link colour. The old padding-left made room for the image; the
       ::before now uses a margin-right gap instead. background-image: none
       suppresses the fallback attach.png from the global a.attach rule in
       horizon.css, which otherwise reappears once this rule stops setting one. */
    div.pbl_file_form div.pbl_file_form_existing a.attach {
        background-image: none;
        padding-bottom: 6px;
    }

        div.pbl_file_form div.pbl_file_form_existing a.attach::before {
            font-family: "Font Awesome 6 Pro";
            font-weight: 400; /* regular - loaded via regular.min.css in horizon.master */
            content: "\f0c6"; /* paperclip */
            margin-right: 0.4rem;
        }

    div.pbl_file_form a.pbl_file_form_delete:hover, div.pbl_file_form a.pbl_file_form_download:hover {
        text-decoration: underline;
    }

div.pbl_file_form_thumbnail {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
}

    div.pbl_file_form_thumbnail img {
        cursor: pointer;
    }


div.pbl_day_planner {
    padding: 0 0 15px 0;
}

    div.pbl_day_planner table {
        border-color: #ccc;
        border-style: solid;
        border-width: 0 0 0 1px;
    }

    div.pbl_day_planner td {
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 1px 0 0;
        vertical-align: top;
    }

    div.pbl_day_planner div.heading_background {
        background-image: url(../img/mnu_head.png);
        background-position: left bottom;
        background-repeat: repeat-x;
    }

    div.pbl_day_planner div.heading_cell {
        border-color: #ccc;
        border-style: solid;
        border-width: 0 0 1px 0;
        color: #10659e;
        font-weight: bold;
        height: 24px;
        padding: 3px 10px 3px 10px;
        overflow: hidden;
        text-align: center;
    }

    div.pbl_day_planner div.planner_fieldset {
        border-color: #ccc;
        border-style: solid;
        border-width: 0 0 1px 0;
        height: 16px;
        position: relative;
    }

    div.pbl_day_planner div.planner_legend, div.pbl_day_planner div.planner_legend_last {
        background-color: #efefef;
        border-color: #333;
        border-style: solid;
        border-width: 0 1px 0 1px;
        color: #333;
        font-size: 10px;
        margin: 0 5px 0 5px;
        padding: 2px 0 2px 0;
        position: absolute;
        text-align: center;
        width: 33px;
    }

    div.pbl_day_planner div.planner_legend {
        top: -8px;
    }

    div.pbl_day_planner div.planner_legend_last {
        bottom: -8px;
    }

    div.pbl_day_planner div.planner_legend_hour {
        background-color: #fddfa0;
    }

    div.pbl_day_planner div.room_booking {
        background-color: #ff9;
        border-color: #ccc;
        border-style: solid;
        border-width: 0 0 1px 0;
        cursor: pointer;
        padding: 3px;
        overflow: hidden;
    }

    div.pbl_day_planner div.room_cell, div.pbl_day_planner div.day_cell {
        border-color: #ccc;
        border-style: solid;
        border-width: 0 0 1px 0;
        cursor: pointer;
        height: 16px;
        padding: 0 3px 0 3px;
        overflow: hidden;
    }

    div.pbl_day_planner div.room_selected {
        background-color: #b7cadf;
    }

    div.pbl_day_planner div.planner_weekday, div.pbl_day_planner div.planner_weekend {
        padding: 0 3px 0 3px;
    }

    div.pbl_day_planner div.planner_weekday {
        background-color: #efefef;
    }

    div.pbl_day_planner div.planner_weekend {
        background-color: #fddfa0;
    }

    div.pbl_day_planner div.room_fully_available {
        background-color: #9f9;
    }

    div.pbl_day_planner div.room_mostly_available {
        background-color: #ff9;
    }

    div.pbl_day_planner div.room_mostly_booked {
        background-color: #fcc;
    }

    div.pbl_day_planner div.room_fully_booked {
        background-color: #f77;
    }

table.fixed_height th {
    height: 46px;
    padding: 0;
}

/* The following three items are about making the grid row height the same in ff/ie8 and ie6/ie7. */
table .fixed_height td {
    height: 17px;
}

html > body table.fixed_height td {
    height: 22px;
}

html > body table.fixed_height td {
    height: /**/ 17px;
}

html > body table.fixed_height th {
    height: 48px;
    padding: 0;
}

div.read_only_rtb {
    background-color: #fff;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    list-style-position: inside;
    margin: 5px;
    padding: 10px;
}

    div.read_only_rtb ul {
        padding-left: 15px;
    }

a.correct_behaviour:hover {
    text-decoration: underline;
}

/*
	SEARCH INPUT
*/

div.pbl_ipt_search {
    border-color: #000;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 340px;
}

    div.pbl_ipt_search div.pbl_ipt_search_results_container {
        height: 1px;
        margin: 0;
        padding: 0;
        position: relative;
        top: -1px;
        z-index: 120;
    }

    div.pbl_ipt_search div.pbl_ipt_search_results {
        background-color: #fff;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px; /*cursor: pointer;*/
        left: 0;
        margin: 0;
        overflow: scroll;
        overflow-x: hidden; /* css 3 */
        overflow-y: scroll; /* css 3 */
        padding: 0;
        position: absolute;
        top: 0;
        width: 280px;
    }

    div.pbl_ipt_search img {
        border-width: 0;
        cursor: pointer;
        margin: 0 0 3px 3px;
        padding: 0;
        vertical-align: bottom;
    }

    div.pbl_ipt_search input.pbl_ipt_search {
        background-position: 2px center;
        background-repeat: no-repeat;
        padding: 2px 2px 2px 20px;
        width: 240px;
    }

    div.pbl_ipt_search p.pbl_ipt_search {
        background-color: #eee;
        cursor: pointer;
        margin: 2px;
        padding: 3px;
    }

    div.pbl_ipt_search p.pbl_ipt_selected {
        background-color: #0a246a;
        color: #fff;
    }

iframe.pbl_ipt_search {
    position: absolute;
    width: 280px;
    z-index: -1;
}

/* **** ***** *****
WEEK PICKER
**** ***** ***** */

p.pbl_week_picker {
    align-items: center;
}

    p.pbl_week_picker span {
        /*color: #33a;
        font-weight: bold;
        padding: 2px 5px 2px 5px;*/
    }

        p.pbl_week_picker span.pbl_week_picker {
            /*color: #333;
            cursor: pointer;
            font-weight: normal;*/
        }

/*
	PAGING
*/
div.paging_bar {
}

span.paging_text, input.paging_text {
    color: var(--gray-700);
    bottom: 4px;
    padding: 3px;
    border: 1px solid var(--gray-300);
    font-weight: bold;
    background-color: var(--gray-200);
}

span.paging_blank {
    border: 0px;
    font-weight: normal;
    background-color: var(--gray-50);
}


input.paging_link {
    color: #00f;
    cursor: pointer;
    border: 0px;
    background-color: #fff;
    font-weight: normal;
}

/*
	GRID MENU
*/

/*
	Please be careful with the following width rules. IE6 will produce unsightly wide columns if
	the column width is narrower than the content width.
*/

/* n.b. Read the above comment before modding. */
td.pbl_grid_menu_dd_narrow {
    text-align: center;
    width: 65px;
}


td.pbl_grid_menu a:hover {
    color: #001f3b;
}

/*td.pbl_grid_menu button.options-btn {
    background-image: url(../img/menu-16.png);
    background-position: 1rem;
    background-repeat: no-repeat;
    padding-left: 3rem;
}

    td.pbl_grid_menu button.options-btn:hover {
        color: #fff;
    }*/


td.pbl_grid_menu button.options-btn {
    border: 0px;
    background-color: var(--gray-200);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--gray-900);
    transition: 0.3s;
    min-height: 2.5rem;
    min-width: 2.5rem;
    max-height: 2.5rem;
    max-width: 2.5rem;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

    td.pbl_grid_menu button.options-btn:hover {
        background-color: var(--gray-400);
        color: var(--gray-900);
        text-decoration: none;
    }

td.pbl_grid_menu img {
    vertical-align: middle;
}

td.pbl_grid_menu div.pbl_grid_menu_item_area {
    height: 1px;
    position: relative;
}

td.pbl_grid_menu div.pbl_grid_menu_item_list {
    background-color: #fff;
    background-image: url(../img/office_dd_bg.png);
    background-position: left top;
    background-repeat: repeat-y;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    left: 0px;
    position: absolute;
    text-align: left;
    top: 0;
    width: 300px;
    z-index: 110000;
}

td.pbl_grid_menu div.pbl_grid_menu_item_list_modern {
    background-image: none;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    border-radius: 0.375rem;
    padding: 1rem;
}

div.pbl_grid_menu_item_list_modern a:hover {
    text-decoration: none !important;
}

div.pbl_grid_menu_item_list_modern button {
    width: 100%;
    border: none;
    padding: 8px 0 5px 0;
    background-color: transparent;
    display: block;
    text-align: left;
}

    div.pbl_grid_menu_item_list_modern button svg {
        margin-top: -2px;
        margin-right: 5px;
    }


td.pbl_grid_menu iframe.pbl_grid_menu_item_list {
    /* Legacy IE6 shim kept only because PblGridMenu.open() navigates via this
       node and mirrors state onto it - opacity hides the white blank.html
       canvas (visible at the rounded menu corners) without breaking that. */
    opacity: 0;
    left: 0px;
    position: absolute;
    top: 0;
    width: 180px;
    z-index: 100000;
}

td.pbl_grid_menu p {
    background-image: url(../img/bullet.gif);
    background-position: 4px 2px;
    background-repeat: no-repeat;
    color: #00407b;
    padding: 6px 0 3px 28px;
    line-height: 1;
    margin-bottom: 3px;
}

td.pbl_grid_menu .pbl-modern {
    background-image: none;
    padding: 1rem 0 1rem 0.5rem;
    transition: 0.3s;
}

    td.pbl_grid_menu .pbl-modern:hover {
        background-color: var(--gray-200);
    }

    td.pbl_grid_menu .pbl-modern svg, td.pbl_grid_menu .pbl-modern img {
        margin-right: 1rem;
        margin-left: 0rem;
        width: 1.25rem;
    }

    td.pbl_grid_menu .pbl-modern a {
        color: #323338;
    }

    td.pbl_grid_menu .pbl-modern span {
        color: var(--gray-6500);
    }

td.pbl_grid_menu b {
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-900);
}

/*td.pbl_grid_menu i {
    color: #999;
    font-size: smaller;
    font-style: normal;
    text-decoration: none;
}*/

input[type=image].grid_menu_menu {
    border: 0px;
    padding: 0px;
    vertical-align: middle;
}

table.pblTable td.postbackless_grid_total_row {
    background-color: var(--gray-50);
    font-weight: 700;
}

table.pblTable td.postbackless_grid_subtotal_row {
    background-color: var(--gray-100);
    font-weight: 700;
}

table.pblTable {
}

    table.pblTable td.red-triangle {
        position: relative;
    }

        table.pblTable td.red-triangle:after { /* Magic Happens Here!!! */
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            display: block;
            border-left: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-top: 5px solid #f00;
        }

table.pblTableExternal td, div {
    white-space: normal;
    word-wrap: break-word;
}

span.tabCount {
    background-color: #ffcdcd;
    font-size: 11px;
    color: rgb(185 28 28);
    padding: 1px 4px 0px 4px;
    font-weight: bold;
    margin-left: 0.65rem;
    border-radius: 5px;
    display: inline-block;
    min-width: 18px;
}

a.selected span.tabCount {
    background-color: #c62828;
}

span.tabCountBlue {
    background-color: rgb(29 78 216 / 0.1);
    font-size: 11px;
    color: rgb(29 78 216);
    padding: 1px 4px 0px 4px;
    font-weight: bold;
    margin-left: 0.65rem;
    border-radius: 5px;
    display: inline-block;
    min-width: 18px;
}

a.selected span.tabCountBlue {
    background-color: #1A237E;
}

div.externalPbl {
    width: 700px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    text-align: left;
}

/* TREEVIEW */
div.pbl_tree {
}

    div.pbl_tree input.pbl_auto {
        background-position: 3px center;
        background-repeat: no-repeat;
        float: left;
        padding: 2px 2px 2px 20px;
        width: 218px;
    }

    div.pbl_tree div.tree {
        background-color: #fff;
        border-color: #ddd;
        border-style: solid;
        border-width: 1px;
        float: left;
        height: 220px;
        overflow: auto;
        width: 100%;
        padding: 1rem;
        border-radius: 0.375rem;
    }

div.tree td {
    background-color: #fff;
    padding: 0.25rem !important;
}

    div.tree td.icon {
        width: 16px;
    }

/* Icon-font glyphs in the document tree. The colours come from the gray ramp so the
   dark theme inverts them, which the legacy bitmaps could not do. */
div.tree i.pbl_tree_toggle,
div.tree i.pbl_tree_icon {
    color: var(--gray-600);
    width: 18px;
    text-align: center;
}

div.tree i.pbl_tree_toggle {
    cursor: pointer;
}

    div.tree i.pbl_tree_toggle:hover {
        color: var(--gray-900);
    }

div.pbl_tree div.pbl_selection div.selection_head {
}

div.pbl_tree div.pbl_tree_summary {
    width: 700px;
}

div.pbl_selection a.tree_reset span {
    background-image: url(../img/undo.gif);
    background-position: 6px center;
    background-repeat: no-repeat;
    color: var(--gray-900);
    padding: 0 8px 0 26px;
}

div.pbl_selection a.tree_reset {
    background-position: left bottom;
    background-repeat: repeat-x;
    cursor: pointer;
    float: right;
    padding: 4px 0 4px 0;
}

td.delButton {
    background-image: url(../img/delete.gif);
    background-repeat: no-repeat;
    padding-left: 5px;
    width: 20px;
    background-position: center;
}

div.tab_bar2 {
    /*background-image: url(../img/tabbar_bg.gif);
    background-position: 0px -1px;
    background-repeat: repeat;*/
    margin: 0 0 5px 0;
    text-align: left;
    width: 99%;
}

    div.tab_bar2 span.tab {
        display: inline-block;
        vertical-align: bottom;
        white-space: nowrap;
        vertical-align: top;
    }

    div.tab_bar2 a {
        background-color: #2980b9;
        color: #fff;
        font-size: 14px;
        line-height: 42px;
        margin: 0 0 0 3px;
        padding: 8px;
        text-decoration: none;
        overflow-wrap: normal;
    }

        div.tab_bar2 a:hover {
            /*border-bottom: solid 2px #ffa500;*/
            background-color: #000;
        }

        div.tab_bar2 a.loading,
        div.tab_bar2 button.loading {
            position: relative;
            opacity: 0.5;
        }

        div.tab_bar2 a.loading::after,
        div.tab_bar2 button.loading::after {
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            content: "\f1ce";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1em;
            height: 1em;
            line-height: 1;
            margin: -0.5em 0 0 -0.5em;
            animation: tab-loading-spin 1s linear infinite;
        }

        div.tab_bar2 a.selected {
            background-color: #fff;
            border-bottom-color: #fff;
            color: #000;
            font-weight: bold;
        }

        div.tab_bar2 a.red_tab {
            background-color: #c0392b;
            color: #FFF;
        }

span.blob-fail {
    background-color: red;
    padding: 4px 4px 4px 4px;
    font-weight: bold;
    color: White;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

span.blob-na {
    background-color: grey;
    padding: 4px 4px 4px 4px;
    font-weight: bold;
    color: White;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

span.blob-pass {
    background-color: green;
    padding: 4px 4px 4px 4px;
    font-weight: bold;
    color: White;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

h2.expanded, h3.expanded {
    background-image: url(../img/expanded.gif);
    background-repeat: no-repeat;
    padding-left: 20px;
    cursor: pointer;
}

h2.collapsed, h3.collapsed {
    background-image: url(../img/collapsed.gif);
    background-repeat: no-repeat;
    padding-left: 20px;
    cursor: pointer;
}

h3.expanded {
    background-image: url(../img/expanded-small.gif);
}

h3.collapsed {
    background-image: url(../img/collapsed-small.gif);
}


/* Annotation control (IptAnnotatableImage) */

canvas.pbl_annotate {
    cursor: pointer;
    width: 400px;
}

img.pbl_annotate {
    width: 400px;
}

div.pbl_annotate {
    white-space: nowrap;
    box-sizing: border-box;
}

div.pbl_annotate_image {
    display: inline-block;
    margin-right: 40px;
    vertical-align: top;
    box-sizing: border-box;
}

div.pbl_annotate_tools {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

div.pbl_popup_annotate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(150, 150, 150, 0.5);
    z-index: 1;
}

.pbl_popup_annotate div.pbl_annotate {
    position: fixed;
    top: 25%;
    left: 184px;
    transform: translate(0, -25%);
    width: 80%;
    min-width: 800px;
    background-color: #EFEFEF;
    border: 1px solid darkgray;
    padding: 20px;
    z-index: 1;
}

.pbl_popup_annotate div.pbl_annotate_image {
    width: 75%;
}

.pbl_popup_annotate div.pbl_annotate_tools {
    width: 20%;
    min-width: 150px;
}

.pbl_popup_annotate canvas.pbl_annotate {
    border: 1px inset darkgray;
    width: 100%;
    z-index: 99999;
}

input.pbl_annotate_colour {
    color: transparent !important;
}

div.attachment-error {
    margin-top: 10px;
    background-color: red;
    margin-bottom: 10px;
    padding: 4px 4px 4px 20px;
    border: solid 1px #ddd;
    font-weight: bold;
    color: White;
}

.fade-out {
    animation: fadeOut ease 8s;
    -webkit-animation: fadeOut ease 8s;
    -moz-animation: fadeOut ease 8s;
    -o-animation: fadeOut ease 8s;
    -ms-animation: fadeOut ease 8s;
}

div.team-mugshot {
    float: left;
    margin-right: 5px;
    padding: 1px;
    width: 28px;
    height: 28px;
    background-image: '';
    background-repeat: no-repeat;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border-radius: 412px;
}

div.boot-tool {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}


    div.boot-tool a.btn {
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        padding: 0.65rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-right: 0.5rem;
    }

    div.boot-tool button.btn {
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        padding: 0.65rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-right: 0.5rem;
    }

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none !important;
}

.btn-light:focus-visible {
    outline: 2px solid var(--gray-500) !important;
    background-color: var(--gray-100);
}

.btn-outline-dark:focus-visible {
    outline: 2px solid var(--gray-800) !important;
}

.btn-none:focus-visible {
    outline: 2px solid var(--gray-500) !important;
}

@media (max-width: 60em) {
    div.boot-tool.sticky-top {
        position: relative !important;
    }
}
/* Timeline holder */
ul.timeline {
    list-style-type: none;
    position: relative;
    padding-left: 1.5rem;
}

    /* Timeline vertical line */
    ul.timeline:before {
        content: ' ';
        background: var(--gray-300);
        display: inline-block;
        position: absolute;
        left: 17px;
        width: 2px;
        height: 100%;
        z-index: 400;
        border-radius: 1rem;
    }

li.timeline-item {
    margin: 20px 0;
    transition: 0.3s;
}

    li.timeline-item:hover {
        background-color: var(--gray-50) !important;
        border-color: var(--blue) !important;
    }


/* Timeline item arrow */
.timeline-arrow {
    border-top: 0.5rem solid transparent;
    border-right: 0.5rem solid #fff;
    border-bottom: 0.5rem solid transparent;
    display: block;
    position: absolute;
    left: 2rem;
}

/* Timeline item circle marker */
li.timeline-item::before {
    content: ' ';
    background: var(--gray-300);
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #fff;
    left: 11px;
    width: 14px;
    height: 14px;
    z-index: 400;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

li.timeline-item.blue::before {
    background-color: blue;
}

li.timeline-item.red::before {
    background-color: #c0392b;
}

li.timeline-item.green::before {
    background-color: #2ecc71;
}

li.timeline-item.amber::before {
    background-color: #f39c12;
}

li.timeline-item.email::before {
    content: url(../img/timeline-email.png);
    left: 5px;
    width: 25px;
    height: 25px;
    border: none;
    background-color: var(--gray-300);
    box-shadow: none;
    padding: 4px;
}

div .pbl-colorbox {
    padding: 6px;
}

div.card-content h3 {
    color: var(--gray-900);
    font-size: 14pt;
}

div.card-content h1 {
    color: #000;
    font-size: 22pt;
}

.div-initials {
    background-color: #e0d9f8;
    text-align: center;
    position: relative;
    font-size: 1rem;
    line-height: 2;
}

div.pbl-main-holder {
    background-color: #fff;
}

div.pbl-expand-area {
    background-color: #fff;
    padding: 3px 3px 3px 8px;
}

div.expand-col-1 {
    width: 65px;
    padding: 1rem;
    padding-left: 1.35rem;
}

div.ipt-checkboxes {
    width: 100%;
    height: 200px;
    background-color: #fff;
    border: solid 1px #ddd;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 0.375rem;
}

    div.ipt-checkboxes span {
        padding-top: 3px;
        padding-bottom: 3px;
    }

div.pbl-card {
    max-width: 20rem;
    min-width: 20rem;
}

div.pbl-card-wide {
    max-width: 30rem;
    min-width: 30rem;
}

div.pbl-card-narrow {
    max-width: 15rem;
    min-width: 15rem;
}



@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.qs-datepicker-container {
    font-size: 1rem;
    font-family: sans-serif;
    color: #000;
    position: absolute;
    width: 15.625em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 9001;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid grey;
    border-radius: .26392em;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 1.25em 1.25em -.9375em rgba(0,0,0,.3);
    box-shadow: 0 1.25em 1.25em -.9375em rgba(0,0,0,.3)
}

    .qs-datepicker-container * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

.qs-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.qs-hidden {
    display: none
}

.qs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.75);
    color: #fff;
    width: 100%;
    height: 100%;
    padding: .5em;
    z-index: 1;
    opacity: 1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

    .qs-overlay.qs-hidden {
        opacity: 0;
        z-index: -1
    }

    .qs-overlay .qs-overlay-year {
        background: rgba(0,0,0,0);
        border: none;
        border-bottom: 1px solid #fff;
        border-radius: 0;
        color: #fff;
        font-size: .875em;
        padding: .25em 0;
        width: 80%;
        text-align: center;
        margin: 0 auto;
        display: block
    }

        .qs-overlay .qs-overlay-year::-webkit-inner-spin-button {
            -webkit-appearance: none
        }

    .qs-overlay .qs-close {
        padding: .5em;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0
    }

    .qs-overlay .qs-submit {
        border: 1px solid #fff;
        border-radius: .26392em;
        padding: .5em;
        margin: 0 auto auto;
        cursor: pointer;
        background: hsla(0,0%,50.2%,.4)
    }

        .qs-overlay .qs-submit.qs-disabled {
            color: grey;
            border-color: grey;
            cursor: not-allowed
        }

    .qs-overlay .qs-overlay-month-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
    }

    .qs-overlay .qs-overlay-month {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: calc(100% / 3);
        cursor: pointer;
        opacity: .5;
        -webkit-transition: opacity .15s;
        transition: opacity .15s
    }

        .qs-overlay .qs-overlay-month.active, .qs-overlay .qs-overlay-month:hover {
            opacity: 1
        }

.qs-controls {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: #d3d3d3;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transition: -webkit-filter .3s;
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s,-webkit-filter .3s
}

    .qs-controls.qs-blur {
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }

.qs-arrow {
    height: 1.5625em;
    width: 1.5625em;
    position: relative;
    cursor: pointer;
    border-radius: .26392em;
    -webkit-transition: background .15s;
    transition: background .15s
}

    .qs-arrow:hover {
        background: rgba(0,0,0,.1)
    }

        .qs-arrow:hover.qs-left:after {
            border-right-color: #000
        }

        .qs-arrow:hover.qs-right:after {
            border-left-color: #000
        }

    .qs-arrow:after {
        content: "";
        border: .39062em solid rgba(0,0,0,0);
        position: absolute;
        top: 50%;
        -webkit-transition: border .2s;
        transition: border .2s
    }

    .qs-arrow.qs-left:after {
        border-right-color: grey;
        right: 50%;
        -webkit-transform: translate(25%,-50%);
        -ms-transform: translate(25%,-50%);
        transform: translate(25%,-50%)
    }

    .qs-arrow.qs-right:after {
        border-left-color: grey;
        left: 50%;
        -webkit-transform: translate(-25%,-50%);
        -ms-transform: translate(-25%,-50%);
        transform: translate(-25%,-50%)
    }

.qs-month-year {
    font-weight: 700;
    -webkit-transition: border .2s;
    transition: border .2s;
    border-bottom: 1px solid rgba(0,0,0,0);
    cursor: pointer
}

    .qs-month-year:hover {
        border-bottom: 1px solid grey
    }

    .qs-month-year:active:focus, .qs-month-year:focus {
        outline: none
    }

.qs-month {
    padding-right: .5ex
}

.qs-year {
    padding-left: .5ex
}

.qs-squares {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .3125em;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transition: -webkit-filter .3s;
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s,-webkit-filter .3s
}

    .qs-squares.qs-blur {
        -webkit-filter: blur(5px);
        filter: blur(5px)
    }

.qs-square {
    width: calc(100% / 7);
    height: 1.5625em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: background .1s;
    transition: background .1s;
    border-radius: .26392em
}

    .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover {
        background: orange
    }

.qs-current {
    font-weight: 700;
    text-decoration: underline
}

.qs-active, .qs-range-end, .qs-range-start {
    background: #add8e6
}

    .qs-range-start:not(.qs-range-6) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

.qs-range-middle {
    background: #d4ebf2
}

    .qs-range-middle:not(.qs-range-0):not(.qs-range-6) {
        border-radius: 0
    }

    .qs-range-middle.qs-range-0 {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .qs-range-end:not(.qs-range-0), .qs-range-middle.qs-range-6 {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

.qs-disabled, .qs-outside-current-month {
    opacity: .2
}

.qs-disabled {
    cursor: not-allowed
}

.qs-day, .qs-empty {
    cursor: default
}

.qs-day {
    font-weight: 700;
    color: grey
}

.qs-event {
    position: relative
}

    .qs-event:after {
        content: "";
        position: absolute;
        width: .46875em;
        height: .46875em;
        border-radius: 50%;
        background: #07f;
        bottom: 0;
        right: 0
    }


input.ie-date {
    background-image: url('../img/calendar-16-black.png');
    background-repeat: no-repeat;
    background-position: 128px;
    cursor: pointer;
}

div.pbl-config-tab {
    background-color: #fff;
    width: 300px;
    z-index: 9999;
    position: fixed;
}

div.pbl-config-tab-inner {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.5rem
}

div.card-confirm li {
    margin-left: 1rem;
}

#panorama {
    width: 100%;
    height: 500px;
}

.alert-ok {
    background-image: url(../img/big/ok.gif);
    background-repeat: no-repeat;
    background-position: 1rem 1.5rem;
    padding: 2rem 2rem 2rem 7rem !important;
}

div.pbl-config-cols {
    background-color: #fff;
    width: 200px;
    z-index: 9999;
    position: absolute;
}

.cbx {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.cbx-ro {
    cursor: default;
}

.cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

    .cbx span:first-child {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        transform: scale(1);
        vertical-align: middle;
        border: 1px solid #ced4da;
        background-color: #fff;
        transition: all 0.2s ease;
    }

.cbx-ro span:first-child {
    background-color: #e9ecef;
}

.cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.cbx span:first-child:before {
    content: "";
    width: 200%;
    height: 100%;
    background: #506EEC;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
    margin-left: -9px;
}

.cbx-no-margin span:first-child:before {
    width: 100% !important;
    margin-left: 0px !important;
}

.cbx span:last-child {
    padding-left: 8px;
}

.cbx:not(.cbx-ro):hover span:first-child {
    border-color: #506EEC;
}

.inp-cbx:checked + .cbx span:first-child {
    background: #506EEC;
    border-color: #506EEC;
    animation: wave 0.4s ease;
}

    .inp-cbx:checked + .cbx span:first-child svg {
        stroke-dashoffset: 0;
    }

    .inp-cbx:checked + .cbx span:first-child:before {
        transform: scale(3.5);
        opacity: 0;
        transition: all 0.6s ease;
    }

@keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

table.tbl tr.drag {
    border: solid 3px var(--blue);
    width: 100%;
}

    table.tbl tr.drag td {
        background-color: #fff;
        padding: 4px;
    }

div.close-button {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
}

div.tab_bar a.red_tab {
    background-color: #c0392b;
    color: #FFF;
}

div.last-looked {
    height: 200px;
    overflow-y: scroll;
}


tr.hidden_row {
    display: none;
}

.treeColor {
    color: green;
}

div.input_form_blank {
    margin-bottom: 0px;
    width: 100%;
}

    div.input_form_blank table {
        border-collapse: collapse;
        margin: 0;
        width: 100%;
    }

/*div.input_form_blank h2 {
        font-size: 2.5rem;
        /*border-bottom: 1px solid #dee2e6 !important;*/
padding-bottom: 1rem !important;
}

div.input_form_blank table {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}

div.input_form_blank td {
    padding: 1.25rem 1rem;
    vertical-align: top;
    line-height: 1.5;
}

div.input_form_blank label {
    font-size: 1.25rem;
    /*padding-left: 1rem;*/
}

div.input_form_blank td.item_desc30 {
    width: 20%;
    min-width: 200px;
    line-height: 1.2;
    vertical-align: top !important;
}


div.white-form td {
    background-color: #fff !important;
}


div.white-form h2 {
    color: #1e293b !important;
    font-size: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: solid 1px #ddd;
}

div.white-form div.input_form td.form_hdr p {
    color: #000 !important;
}

div.input_form_blank input {
    font-size: 1.25rem;
}

div.input_form_blank textarea {
    font-size: 1.25rem;
}

div.input_form_blank select {
    font-size: 1.25rem;
}

div.input_form_blank options {
    font-size: 1.25rem;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

.rounded-xxl {
    border-radius: 2rem !important;
}


div.pod-lg {
    width: 200px;
}

.table_fixed_head {
    overflow-y: auto;
    height: 500px;
}

    .table_fixed_head thead th {
        position: sticky;
        top: 0;
        z-index: 20;
    }

.node-selected {
    background-color: var(--gray-100);
}

table.table-summary {
    width: 100%;
}

/* Bootstrap sizes the summary columns against the viewport, but the block
   banner's summary sits in a much narrower container (beside the cover image,
   minus the side menu), so at higher zoom col-xxl-4 can drop below the fixed
   200px label width and crush the values. Floor each column at its content
   width (label + cell padding + value); once even that can't fit, the column
   wraps to the next line instead. */
.banner-summary .row > div {
    min-width: min(340px, 100%);
}

    table.table-summary th {
        padding: 1rem !important;
        border-top: none !important;
        vertical-align: text-top;
        font-weight: normal !important;
        border-bottom: none !important;
    }

        table.table-summary th.label {
            width: 200px;
            vertical-align: text-top;
            font-size: 1.1rem;
            color: var(--gray-600);
            background: none !important;
        }

    table.table-summary td {
        padding: 1rem;
        border-top: none !important;
        vertical-align: text-top;
    }

        table.table-summary td.label {
            width: 200px;
            vertical-align: text-top;
            font-size: 1.1rem;
            color: var(--gray-600);
        }

        table.table-summary td.data {
            margin: 0 !important;
            vertical-align: text-top;
            font-weight: 500;
            font-size: 1.1rem;
            color: var(--gray-900);
        }

@media (min-width: 768px) {
    table.table-summary td.label.wide-label {
        width: 300px;
    }
}

@media (min-width: 1200px) {
    table.table-summary td.label.wide-label {
        width: 500px;
    }
}

table.table-summary td.label.wide {
    width: 350px !important;
}

table.table-summary div.data {
    margin: 0 !important;
    vertical-align: text-top;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--gray-900);
    word-break: break-word;
}

table.table-summary div.label {
    font-size: 1.1rem;
    color: var(--gray-600);
}

.search-dropdown {
    background-color: #f9fafb;
    width: 120px;
    margin-right: 0.5rem;
}

@media (min-width: 1400px) {
    .search-dropdown {
        width: 180px;
    }
}

#drop_box_name {
    background-color: var(--gray-50);
}

    #drop_box_name:focus-visible {
        outline: 2px solid var(--primary); /* width, style, color */
        outline-offset: 4px;
        border-radius: 0.375rem;
    }

.form-entry {
    border: 1px solid var(--gray-100);
    padding: 3rem;
    box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,.175) !important;
    border-radius: 1rem;
    position: relative;
    background-color: #fff;
}

.scrollable-form {
    height: calc(100vh - 300px);
    overflow-y: scroll;
}

.btn-x {
    position: absolute;
    right: 1rem;
    border-radius: 50% !important;
    background-color: #d9d9d9 !important;
    transition: 0.3s;
    cursor: pointer;
}

.btn-img-download {
    position: absolute;
    right: 4rem;
    border-radius: 50% !important;
    background-color: #d9d9d9 !important;
    transition: 0.3s;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    border: 0;
    opacity: .5;
}

    .btn-img-download i {
        margin-left: -4px;
    }

    .btn-img-download:hover {
        background-color: var(--gray-400) !important;
    }

    .btn-img-download:focus {
        outline: 1px solid #fff;
        outline-offset: 2px;
    }

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border-radius: 0.375rem;
    border: 0;
    opacity: .5;
}


    .btn-close:hover {
        background-color: var(--gray-400) !important;
    }

#close-map-mask:focus {
    outline: 1px solid #fff;
    outline-offset: 2px;
}

#close-image:focus {
    outline: 1px solid #fff;
    outline-offset: 2px;
}

.btn-round-sm {
    width: 1.75em !important;
    height: 1.75em !important;
    min-width: 1.75em !important;
    min-height: 1.75em !important;
}

.btn-round {
    box-sizing: content-box;
    width: 3em;
    height: 3em;
    min-width: 3em;
    min-height: 3em;
    padding: 0.25em !important;
    color: var(--primary) !important;
    border-radius: 50% !important;
    border: 1px solid var(--gray-200) !important;
    background-color: var(--gray-50) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

    .btn-round i {
        margin: 0 !important;
        color: var(--blue);
    }

    /* Grid-row action buttons (e.g. the expand chevron) keep the container's
       neutral ink rather than the blue used by standalone round buttons. */
    button.grid_butn_container.btn-round i {
        color: inherit;
    }

    /* Tree expander (was tree_plus/tree_minus gifs): chevron flips while the row
       is expanded. State class is toggled by PblExpand.legacyExpandDiv. */
    button.grid_butn_container i.tree-expand {
        transition: transform 0.2s ease;
    }

    button.grid_butn_container i.tree-expand.tree-expanded {
        transform: rotate(180deg);
    }

    .btn-round svg {
        margin: 0 !important;
    }
    /*a.btn-round i {
    padding-top: 1.5rem;
        var(--gray-700);
}*/

    .btn-round:hover {
        background-color: var(--gray-300) !important;
    }

    .btn-round:focus {
        outline: 1px solid var(--primary); /* width, style, color */
        outline-offset: 2px;
    }

.helpdesk-widget {
    padding: 2rem;
    margin-bottom: 1rem;
    border: solid 1px var(--gray-200);
    border-radius: 1rem;
    margin-right: 2rem;
}

.sticky-top-bar {
    position: sticky;
    z-index: 1030;
    top: 0;
}

@media only screen and (max-width: 60em) {
    .sticky-top-bar {
        position: relative;
    }
}

.chk-span-label {
    float: left;
    padding: 0.2rem;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

.multi-select {
    border-radius: 0.375rem;
    padding: 1rem;
}

    .multi-select .avatar {
        border-radius: 50%;
        font-size: 11px !important;
        width: 24px;
        display: inline-block;
        height: 24px;
        min-height: 24px;
        min-width: 24px;
    }

    .multi-select:focus {
        box-shadow: none !important;
        border-color: var(--primary) !important;
    }

    .multi-select:focus-visible {
        outline: none;
        box-shadow: none !important;
        border-color: var(--primary) !important;
    }

.input-form-with-above {
    position: relative;
}

    .input-form-with-above button.pbl-popup-button {
        position: absolute;
        right: 0.25rem;
        top: 0.7rem;
        width: 2rem;
        height: 16px;
        border: none;
        background-color: transparent;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 0.75rem center/12px 12px;
    }

.pbl_form_input_entry button.pbl-popup-button {
    position: absolute;
    right: 1.1rem;
    top: 1.5rem;
    width: 2rem;
    height: 16px;
    border: none;
    background-color: transparent;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
}

.radio-inputs .radio {
    flex: 1 1 auto;
    text-align: center;
}

    .radio-inputs .radio input {
        display: none;
    }

    .radio-inputs .radio .name {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        border: none;
        padding: .5rem 0;
        color: var(--slate-700);
        transition: all .15s ease-in-out;
        border: var(--gray-300) 1px solid;
    }

    .radio-inputs .radio input:checked + .name {
        background-color: var(--gray-200);
        font-weight: 600;
    }

        .radio-inputs .radio input:checked + .name.green {
            background-color: var(--green);
            color: #fff;
            font-weight: 600;
        }

        .radio-inputs .radio input:checked + .name.red {
            background-color: var(--red);
            color: #fff;
            font-weight: 600;
        }

.steps-top {
    border-top: 4px solid var(--gray-200);
    padding-top: 1rem;
}

    .steps-top.blue {
        border-color: var(--blue);
    }

.container-summary {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-summary {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-summary {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-summary {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-summary {
        max-width: 1140px;
    }
}

@media (min-width: 1600px) {
    .container-summary {
        max-width: 1440px;
    }
}

@media (min-width: 2000px) {
    .container-summary {
        max-width: 1840px;
    }
}

@media (min-width: 2000px) {
    .col-xxxl-2 {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        max-width: 16.66666667%;
    }
}


.bg-grad {
    background: rgb(221,221,222);
    background: linear-gradient(0deg, rgba(221,221,222,1) 0%, rgba(255,255,255,1) 42%, rgba(232,255,254,1) 100%);
}

table.tbl th.red {
    background-color: #d5c2c5;
    color: #750114;
    text-align: center;
}

table.tbl th.amber {
    background-color: #efccae;
    color: #8f4200;
    text-align: center;
}

table.tbl th.green {
    background-color: #c6ffd1;
    color: #006b15;
    text-align: center;
}

table.tbl th.purple {
    background-color: #d4c6ed;
    color: #341a63;
    text-align: center;
}

table.tbl th.total {
    text-align: center;
}

.collapsable-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

div.audit-avatar {
    border-radius: 50%;
    font-size: 11px !important;
    width: 24px;
    display: inline-block;
    height: 24px;
    min-height: 24px;
    min-width: 24px;
}

.accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: 250ms grid-template-rows ease;
}

    .accordion-body > div {
        overflow: hidden;
    }

.accordion-show {
    grid-template-rows: 1fr !important;
}

#ai-container {
}

.ai-message-box {
    position: absolute;
    bottom: 2rem;
    width: 100%;
    left: 0;
    right: 0;
}

    .ai-message-box input {
        border-radius: 1rem;
        padding: 2rem 4rem 2rem 2rem;
        margin-right: 2rem;
        margin-left: 2rem;
    }

    .ai-message-box button {
        position: absolute !important;
        top: 0.9rem !important;
        right: 3rem !important;
    }

.permit-task {
    position: fixed;
    right: 3rem;
    top: 100px;
    z-index: 9999;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    padding: 1rem;
    background-color: #fff;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 1rem;
}

#sig-canvas {
    border: 2px dotted #CCCCCC;
    border-radius: 15px;
    cursor: crosshair;
}

.action-box {
    transition: 0.3s;
    background-color: var(--gray-100);
    border: solid 2px var(--gray-100);
    border-radius: 1rem;
    padding: 1.5rem;
    min-width: 200px
}

    .action-box.email {
        border-radius: 100%;
        min-height: 180px;
        min-width: 180px;
    }

    .action-box.suppressed {
        background-color: var(--gray-300);
    }

    .action-box:hover {
        border: solid 2px var(--primary);
        background-color: var(--gray-200);
    }

.action-box-holder {
    min-width: 260px;
}

.allow-scroll {
    overflow-y: auto !important;
}

.doc-button {
    max-width: 250px;
    align-items: center;
    min-width: 100px;
}

.alert-success {
    color: #155724 !important;
    background-color: #f3fff6 !important;
    border-color: #e4f1e7 !important;
    line-height: 1.75rem;
}

.btn-lg > span {
    font-size: 1.25rem;
    line-height: 1.5;
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 100;
}

@media (max-width: 60em) {
    .sticky-bottom {
        position: relative !important;
        bottom: 0;
    }
}

.planner-entry {
    text-align: center;
    border: solid 1px var(--gray-300);
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: var(--gray-50);
    font-weight: 500;
    transition: 0.3s;
}

    .planner-entry:hover {
        border: solid 1px var(--primary);
        background-color: var(--gray-200);
    }

.end-badge {
    position: absolute;
    top: -1rem;
    right: -1rem;
    padding: 0.5rem;
    border-radius: 0 0 0 0.375rem;
}

table.risk-matrix {
    border: solid 1px var(--gray-500);
    border-collapse: collapse;
}

    table .risk-matrix td {
        padding: 0.5rem;
        text-align: center;
        min-height: 40px;
        min-width: 40px;
        height: 40px;
        width: 40px;
        border: solid 1px var(--gray-500) !important;
    }

        table.risk-matrix td.green {
            background-color: var(--lighter-green) !important;
        }

        table.risk-matrix td.yellow {
            background-color: var(--yellow) !important;
        }

        table.risk-matrix td.orange {
            background-color: var(--orange) !important;
        }

        table.risk-matrix td.red {
            background-color: var(--red) !important;
        }

        table.risk-matrix td.purple {
            background-color: var(--purple) !important;
        }

        table.risk-matrix td.silver {
            background-color: var(--gray-100) !important;
        }


.raid-widgets {
    gap: 1rem;
    margin-bottom: 1.5rem;
}

a.raid-widget {
    --raid-bg: var(--gray-100);
    --raid-border: var(--gray-200);
    --raid-icon-bg: var(--gray-200);
    --raid-accent: var(--gray-800);
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--raid-bg);
    border: solid 1px var(--raid-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: 0.3s;
    color: var(--gray-800);
    font-weight: 500;
    text-align: left;
}

    a.raid-widget:hover {
        text-decoration: none;
        border-color: var(--raid-accent);
    }

    a.raid-widget .raid-head {
        display: flex;
        align-items: center;
    }

    a.raid-widget .raid-icon {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.75rem;
        height: 3.75rem;
        margin-right: 1rem;
        border-radius: 50%;
        background-color: var(--raid-icon-bg);
        color: var(--raid-accent);
        font-size: 1.25rem;
    }

    a.raid-widget .raid-figures {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    a.raid-widget .raid-title {
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 2;
        color: var(--gray-700);
    }

    a.raid-widget .raid-number {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--gray-900);
    }

    a.raid-widget .raid-link {
        margin-top: 1.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--raid-accent);
    }

        a.raid-widget .raid-link i {
            margin-left: 0.4rem;
            font-size: 0.75rem;
            transition: 0.3s;
        }

    a.raid-widget:hover .raid-link i {
        margin-left: 0.7rem;
    }

    a.raid-widget.risks {
        --raid-bg: #fdf3f2;
        --raid-border: #f4d5d2;
        --raid-icon-bg: #fbe3e0;
        --raid-accent: #c0392b;
    }

    a.raid-widget.assumptions {
        --raid-bg: #f4faf2;
        --raid-border: #d3e9cd;
        --raid-icon-bg: #e4f3df;
        --raid-accent: #2f8149;
    }

    a.raid-widget.issues {
        --raid-bg: #f1f6fd;
        --raid-border: #cfe0f5;
        --raid-icon-bg: #dfebfb;
        --raid-accent: #2563a8;
    }

    a.raid-widget.dependencies {
        --raid-bg: #f8f4fb;
        --raid-border: #e4d5f0;
        --raid-icon-bg: #eee2f7;
        --raid-accent: #7c3aed;
    }

/* Circular icon badges for the project home summary blocks. Both containers are
   d-flex, so these sit to the left of the text. Each is tinted to its container:
   amber for the alert-warning update, neutral for the gray description well. */
.note-bell,
.note-info {
    flex: none;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    margin-right: 1rem;
    border-radius: 50%;
}

.note-bell {
    background-color: #fbeecd;
    color: #856404;
}

.note-info {
    background-color: var(--gray-200);
    color: var(--gray-700);
}

/* Labelled detail rows, the replacement for the two-column tblview layout on the
   home pages. Three across, dropping to two then one as the column narrows.
   Horizontal rules only - the columns are separated by whitespace, so the cells
   have to stay flush for the rules to run unbroken across the row. */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

@media (max-width: 992px) {
    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

    /* Column spacing is right padding rather than a grid gap, so the bottom
       borders meet and read as one rule instead of a dashed line. Grid items
       stretch to the row height, which keeps those borders aligned. */
    .detail-item {
        display: flex;
        align-items: flex-start;
        padding: 0.875rem 1.5rem 0.875rem 0;
        min-width: 0;
        border-bottom: solid 1px var(--gray-200);
    }

    /* The last row is usually part-filled, so its cells only rule across the columns
       they occupy. This is a zero-height full-width grid item laid over the bottom
       edge - the negative margin makes its border overlap that short one rather
       than sit below it, so the finished rule stays a single pixel everywhere. */
    .detail-grid::after {
        content: "";
        grid-column: 1 / -1;
        border-top: solid 1px var(--gray-200);
        margin-top: -1px;
    }

    /* Long free text - background, lead details, wordy custom fields. */
    .detail-item-full {
        grid-column: 1 / -1;
    }

    /* The project description: two columns, leaving the third for the client
       logo. Below the three-column breakpoint the grid itself is two wide, so
       the tile still fills a row and the logo drops beneath it. */
    .detail-item-wide {
        grid-column: span 2;
    }

    @media (max-width: 576px) {
        .detail-item-wide {
            grid-column: 1 / -1;
        }
    }

    /* The client logo tile has no label or icon, just the capped image. */
    .detail-item-logo {
        justify-content: flex-start;
    }

        .detail-item-logo img {
            max-width: 180px;
        }

    .detail-item-icon {
        flex: none;
        width: 1.25rem;
        margin-right: 0.875rem;
        margin-top: 0.2rem;
        color: var(--gray-500);
        font-size: 1.25rem;
        text-align: center;
    }

    .detail-item-body {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .detail-item-label {
        font-size: 1rem;
        line-height: 1.4;
        color: var(--gray-700);
        margin-bottom:0.25rem;
    }

    .detail-item-value {
        font-weight: 600;
        line-height: 1.5;
        color: var(--gray-900);
    }

        /* These values carry PblNav links - organisation, parent project, client,
           programme, portfolio. They used to pick this up from "table.tblview a",
           which no longer applies now the rows are not a table. */
        .detail-item-value a {
            cursor: pointer;
            font-weight: bold;
        }

            .detail-item-value a:hover {
                text-decoration: underline;
            }

.product_info {
    background-color: #fff;
    padding: 0.5rem;
    width: 100%;
    margin-top: 2rem;
}


button.collapse-btn {
    border-radius: 50% !important;
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
}

table.scrollable-table tbody {
    display: block !important;
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}

table.scrollable-table thead {
    display: block !important;
}

.dropdown-item > svg {
    margin-right: 0.75rem;
}

.play-button {
    transition: 0.3s ease-in-out;
    border: solid 1px var(--gray-200);
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
}

    .play-button:hover {
        background-color: var(--gray-100);
        border: solid 1px var(--primary);
    }


.small-tile {
    padding: 1rem !important;
    display: inline-block !important;
    border-radius: .375rem !important;
    border: 1px solid #dee2e6 !important;
    cursor: pointer;
}

    .small-tile:hover {
        border: 1px solid var(--primary) !important;
        background-color: var(--gray-100);
    }

    .small-tile.amber {
        background-color: #fbd65c !important;
        color: #000 !important;
        border-color: #ffc100 !important;
    }

        .small-tile.amber:hover {
            border: solid 1px #f7bf00 !important;
            background-color: #f9c61b !important;
        }

        .small-tile.amber > i {
            color: #000 !important;
        }

        .small-tile.amber > div {
            color: #000 !important;
        }


.ql-editor a {
    font-size: inherit;
}

.alert a {
    font-size: inherit;
}

.fixed-width-td {
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
}

.page-link:focus {
    z-index: 3;
    outline: 2px solid var(--primary) !important;
    box-shadow: none !important;
}

p.pbl_drop_box span.pbl-search-options-btn {
    width: 26px;
    height: 26px;
    background-color: var(--gray-300);
    text-align: center;
    cursor: pointer !important;
    border-radius: 50% !important;
    display: inline-block;
    transition: 0.3s;
}

    p.pbl_drop_box span.pbl-search-options-btn:hover {
        background-color: var(--gray-400);
        color: var(--gray-900);
        text-decoration: none;
    }

.product_info {
    background-color: #fff;
    padding: 0.5rem;
    width: 100%;
    margin-top: 2rem;
}

.node-row {
    font-weight: 600 !important;
    margin-bottom: .5rem !important;
    display: flex !important;
    align-items: center !important;
    transition: 0.1s;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .node-row:hover {
        background-color: var(--gray-100);
        border-radius: 0.375rem;
    }

    .node-row.highlight {
        background-color: var(--gray-100);
    }

.node-holder {
    border-left: 2px solid var(--gray-100);
    margin-left: 1rem;
    padding-left: 0.5rem;
}

.slideout-header {
    position: sticky;
    width: 100%;
    top: 0;
    background-color: #fff;
    z-index: 1000;
}

/* Icon fallback for PictureFromField (pbl_grid.cs defaultIcon) - shown when
   a row has no photo. Ramp variables flip it in dark mode. */
div.mugshot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-100);
    color: var(--gray-500);
}

/* Selector (multi-select) head inputs get their glyph from the same
   variant classes as the autocomplete inputs. */
div.selection_head input.pbl_auto {
    background-repeat: no-repeat;
    background-position: 0.5rem;
}

.list-group-item{
    background-color:transparent!important;
}

.ai-flex-item {
    flex: 1 1 300px; /* Grow, shrink, preferred width */
    min-width: 300px; /* Never get smaller than this */
}

/* Shared slide-out drawer, opened by pbl_tools.showAjaxDrawer. Sits over the page rather than splitting the
   layout the way the col3 slide-out does. Mirrors the drawer on flow.aspx. */
#pbl_drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 90vw;
    height: 100vh;
    background-color: #fff;
    border-left: solid var(--gray-200) 1px;
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.08);
    transform: translateX(105%);
    transition: transform 0.25s ease;
    z-index: 9000;
    display: flex;
    flex-direction: column;
}

    #pbl_drawer.open {
        transform: translateX(0);
    }

    #pbl_drawer .pbl-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: solid var(--gray-200) 1px;
        flex-shrink: 0;
    }

        #pbl_drawer .pbl-drawer-header h2 {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
        }

        #pbl_drawer .pbl-drawer-header a {
            color: var(--gray-600, #4b5563);
            font-size: 1.1rem;
            padding: 0.25rem 0.5rem;
        }

    #pbl_drawer .pbl-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 1rem 1.5rem 1rem;
    }

body.dark-mode #pbl_drawer {
    background-color: #1f2937;
    border-left-color: #374151;
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.5);
}

    body.dark-mode #pbl_drawer .pbl-drawer-header {
        border-bottom-color: #374151;
    }

    body.dark-mode #pbl_drawer .pbl-drawer-header h2 {
        color: #e5e7eb;
    }

    body.dark-mode #pbl_drawer .pbl-drawer-header a {
        color: #9ca3af;
    }


/* Dashboard summary cards. A grid rather than a flex wrap so every card is the same width and the rows line
   up - flex sizes each card to its label, which leaves the row ragged. */
.pbl-card-grid {
    display: grid;
    /* auto-fill, not auto-fit: empty tracks are kept, so a row of three cards keeps the same card width as a
       row of five above it instead of stretching to fill the width. */
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

    .pbl-card-grid .landing-container {
        padding: 1.25rem 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0;
    }

    /* Labels run to one or two lines. Reserving the taller of the two keeps every figure on the same
       baseline across the row. */
    .pbl-card-grid .pbl-card-label {
        min-height: 2.6em;
        margin-bottom: 0.25rem;
    }

    .pbl-card-grid .pbl-card-value {
        margin-bottom: 0;
        line-height: 1.1;
    }

/* Inline (no-iframe) rendering of the IptFile attachment control (INLINE_FILE_UPLOAD
   system setting). Everything is scoped under .pbl-file-inline (the control) or
   .pbl-file-inline-host (the whole control including the server-rendered list of
   already-saved files) so nothing else on the host page changes, and the legacy
   iframe rendering - which emits neither class - is untouched. Gray ramp tokens
   invert in horizon_dark.css, so dark mode needs no separate rules. */

/* postbackless.css applies `div.pbl_file_form div { background-color:#fff; padding:.5rem }`
   to EVERY div inside the control. That padding is what shrank the thumbnail badge and
   let white show around it, so the inline rendering's own elements opt out here. Listed
   explicitly rather than as a descendant selector so the component rules below - which
   have the same specificity and come later - still win where they set a value. */
.pbl-file-inline-host .pbl-file-inline,
.pbl-file-inline-host .pbl-file-inline-fields,
.pbl-file-inline-host .pbl-file-inline-fields-head,
.pbl-file-inline-host .pbl-file-inline-field,
.pbl-file-inline-host .pbl-file-inline-associate,
.pbl-file-inline-host .pbl-file-inline-associate-row,
.pbl-file-inline-host .pbl-file-inline-locked-note,
.pbl-file-inline-host .pbl-file-inline-busy-label,
.pbl-file-inline-host .pbl-file-inline-progress,
.pbl-file-inline-host .pbl-file-inline-progress-bar,
.pbl-file-inline-host .pbl-file-inline-drop-inner,
.pbl-file-inline-host .pbl-file-inline-drop-icon,
.pbl-file-inline-host .pbl-file-inline-drop-title,
.pbl-file-inline-host .pbl-file-inline-drop-sub,
.pbl-file-inline-host .pbl-file-inline-drop-actions,
.pbl-file-inline-host .pbl-file-inline-busy-state,
.pbl-file-inline-host .pbl-file-inline-hint,
.pbl-file-inline-host .pbl-file-inline-selected,
.pbl-file-inline-host .pbl-file-inline-confirm,
.pbl-file-inline-host .pbl-file-inline-pending,
.pbl-file-inline-host .pbl-file-inline-pending-list,
.pbl-file-inline-host .pbl-file-inline-file-icon,
.pbl-file-inline-host .pbl-file-inline-file-main,
.pbl-file-inline-host .pbl-file-inline-file-name,
.pbl-file-inline-host .pbl-file-inline-file-meta,
.pbl-file-inline-host .pbl-file-inline-file-tags,
.pbl-file-inline-host .pbl-file-inline-file-actions {
    background-color: transparent;
    padding: 0;
}

/* ---- extra fields (document type / compliance date) ---- */
/* These sit above the drop zone and gate it: until they are filled the zone is
   locked, so a file can never be chosen that the upload would then reject. */
/* Amber accent for the required-fields panel, used ONLY for the decorative left edge -
   never for text. --orange (#e67e22) measures 2.85:1 on white and 2.59:1 on the locked
   zone, well under the 4.5:1 WCAG AA minimum for normal text, which is why the heading
   and the locked note below use the gray ramp instead. This accent is declared per
   theme because --orange is defined once and does not invert like the ramps do:
   #b45309 is 5.02:1 on white, #fbbf24 is 10.63:1 on the dark panel. */
.pbl-file-inline {
    --pbl-file-accent: #b45309;
}

body.dark-mode .pbl-file-inline {
    --pbl-file-accent: #fbbf24;
}

.pbl-file-inline .pbl-file-inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .875rem 1rem 1rem 1rem;
    border: 1px solid var(--gray-300);
    border-left: 3px solid var(--pbl-file-accent);
    border-radius: .5rem;
}

/* Full width so the fields wrap underneath it. The padlock icon and the wording carry
   the meaning; the gray ramp keeps the text well clear of AA in both themes. */
.pbl-file-inline .pbl-file-inline-fields-head {
    flex: 0 0 100%;
    font-weight: 600;
    color: var(--gray-900);
}

.pbl-file-inline .pbl-file-inline-field {
    min-width: 14rem;
}

    .pbl-file-inline .pbl-file-inline-field label {
        display: block;
    }

    .pbl-file-inline .pbl-file-inline-field .form-control {
        width: 100%;
    }

/* ---- link an existing document ---- */
/* Sits under the drop zone as the alternative to uploading, separated by a rule rather
   than a box so it does not read as another required field. */
.pbl-file-inline .pbl-file-inline-associate {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-300);
}

    .pbl-file-inline .pbl-file-inline-associate label {
        display: block;
        color: var(--gray-900);
    }

.pbl-file-inline .pbl-file-inline-associate-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

    /* The document name needs the room, so it takes the spare width; the folder filter
       is short by nature and the button keeps its natural size. */
    .pbl-file-inline .pbl-file-inline-associate-row .form-control {
        flex: 1 1 14rem;
        min-width: 0;
    }

    .pbl-file-inline .pbl-file-inline-associate-row .pbl-file-inline-link-folder {
        flex: 0 1 12rem;
    }

    .pbl-file-inline .pbl-file-inline-associate-row .pbl-file-inline-link-select {
        flex: 1 1 16rem;
    }

/* Matches how the drop zone behaves mid-upload: inert and visibly so, but still read
   by a screen reader via aria-busy on the button. */
.pbl-file-inline.pbl-file-inline-linking .pbl-file-inline-associate {
    opacity: .6;
}

.pbl-file-inline .pbl-file-inline-link[disabled] {
    pointer-events: none;
}

/* ---- drop zone ---- */
.pbl-file-inline .pbl-file-inline-drop {
    position: relative;
    border: 2px dashed var(--gray-400);
    border-radius: .5rem;
    background-color: var(--gray-50);
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .pbl-file-inline .pbl-file-inline-drop:hover {
        border-color: var(--blue);
    }

    .pbl-file-inline .pbl-file-inline-drop.highlight-drop {
        border-color: var(--blue);
        background-color: var(--slate-200);
    }

    /* The file input is driven by the Choose button and the zone itself, but stays
       in the DOM: pbl_actions.js reads its value to warn about unsent selections. */
    .pbl-file-inline .pbl-file-inline-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

.pbl-file-inline .pbl-file-inline-drop-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto .75rem auto;
    border-radius: 50%;
    background-color: var(--gray-200);
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.pbl-file-inline .pbl-file-inline-drop-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--gray-900);
}

.pbl-file-inline .pbl-file-inline-drop-sub {
    color: var(--gray-500);
    margin-top: .15rem;
}

.pbl-file-inline .pbl-file-inline-drop-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

    .pbl-file-inline .pbl-file-inline-drop-actions .btn {
        margin: 0;
    }

/* Busy state swaps the zone's content without the script rebuilding its markup. */
.pbl-file-inline .pbl-file-inline-busy-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* Progress track under the spinner. Reflects bytes sent, so it reaches 100% and then
   holds while the server validates and stores - the spinner carries that wait. */
.pbl-file-inline .pbl-file-inline-progress {
    width: 12rem;
    max-width: 60%;
    height: .375rem;
    margin-top: .625rem;
    border-radius: 999px;
    background-color: var(--gray-300);
    overflow: hidden;
}

.pbl-file-inline .pbl-file-inline-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--blue);
    transition: width .15s linear;
}

/* Sits under the progress bar; only ever visible while an upload is in flight,
   because the whole busy state is hidden otherwise. */
/* A real button for the semantics, still drawn as a link: it is a quiet escape hatch
   under the progress bar, and a second solid button there would compete with the
   upload it is cancelling. */
.pbl-file-inline .pbl-file-inline-cancel {
    display: block;
    margin: .5rem auto 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gray-500);
    text-decoration: underline;
    cursor: pointer;
}

    .pbl-file-inline .pbl-file-inline-cancel:hover {
        color: var(--red);
    }

/* Some uploads report no total (chunked bodies), so show motion instead of a lie. */
.pbl-file-inline .pbl-file-inline-progress-indeterminate .pbl-file-inline-progress-bar {
    width: 40%;
    transition: none;
    animation: pbl-file-inline-progress-slide 1.1s ease-in-out infinite;
}

@keyframes pbl-file-inline-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .pbl-file-inline .pbl-file-inline-progress-bar {
        transition: none;
    }

    .pbl-file-inline .pbl-file-inline-progress-indeterminate .pbl-file-inline-progress-bar {
        width: 100%;
        animation: none;
    }
}

.pbl-file-inline.pbl-file-inline-busy .pbl-file-inline-drop-inner {
    display: none;
}

.pbl-file-inline.pbl-file-inline-busy .pbl-file-inline-busy-state {
    display: flex;
}

.pbl-file-inline.pbl-file-inline-busy .pbl-file-inline-drop {
    cursor: default;
}

/* Locked: the zone is inert until the fields above it are filled. The controls stay
   visible but dimmed so it is clear what becomes available, and the note says why. */
.pbl-file-inline .pbl-file-inline-locked-note {
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: .75rem;
    font-weight: 600;
    color: var(--gray-900);
}

.pbl-file-inline.pbl-file-inline-locked .pbl-file-inline-drop {
    cursor: not-allowed;
    background-color: var(--gray-100);
    border-style: dashed;
}

.pbl-file-inline.pbl-file-inline-locked .pbl-file-inline-drop:hover {
    border-color: var(--gray-400);
}

.pbl-file-inline.pbl-file-inline-locked .pbl-file-inline-drop-inner {
    opacity: .45;
    pointer-events: none;
}

.pbl-file-inline.pbl-file-inline-locked .pbl-file-inline-locked-note {
    display: flex;
}

/* Busy wins over locked - an upload in flight shows the spinner, not the note. */
.pbl-file-inline.pbl-file-inline-busy .pbl-file-inline-locked-note {
    display: none;
}

/* ---- hint, selection strip and errors ---- */
.pbl-file-inline .pbl-file-inline-hint {
    margin-top: 1rem;
    color: var(--gray-600);    
}

.pbl-file-inline .pbl-file-inline-selected {
    display: none;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .75rem;
}

.pbl-file-inline .pbl-file-inline-chip {
    background-color: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 1rem;
    padding: .15rem .65rem;
    font-size: .8125rem;
    color: var(--gray-700);
}

.pbl-file-inline .pbl-file-inline-confirm {
    margin-top: .75rem;
}

.pbl-file-inline .pbl-file-inline-error {
    margin-top: .75rem;
}

/* ---- attached file rows (pending uploads, and saved files via the host class) ---- */
/* The two selectors below carry a div.pbl_file_form prefix purely to outrank the
   legacy div.pbl_file_form div.pbl_file_form_existing rules further up this file. */
.pbl-file-inline .pbl-file-inline-pending-title,
div.pbl_file_form.pbl-file-inline-host div.pbl_file_form_existing h1 {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-900);
    margin: 1.25rem 0 .5rem 0;
    padding: 0;
}

div.pbl_file_form.pbl-file-inline-host div.pbl_file_form_existing {
    background-image: none;
    padding: 0;
}

/* Saved rows get the same square badge as pending ones, in place of the inline
   paperclip the legacy rendering puts in front of the file name. */
div.pbl_file_form.pbl-file-inline-host div.pbl_file_form_existing a.attach::before {
    content: none;
}

/* Two inherited paddings have to go here, both left over from the paperclip this link
   used to carry: horizon.css sets `a.attach { padding-left: 18px }` globally, which
   indents the file name 18px from the caption beneath it, and the postbackless rule
   above adds padding-bottom: 6px, which pushes that caption down so the text block
   outgrows the badge. The badge supplies the icon now, so neither is wanted. The
   div.pbl_file_form prefix is needed to outrank the postbackless rule. */
div.pbl_file_form.pbl-file-inline-host div.pbl_file_form_existing a.attach {
    padding-left: 0;
    padding-bottom: 0;
}

/* Rows are scoped to the host, not to .pbl-file-inline, because the saved-file list
   is a sibling of the upload control rather than a child of it - this way both lists
   share one set of rules and cannot drift apart. */
.pbl-file-inline-host .pbl-file-inline-file,
.pbl-file-inline-host .pbl_file_form_existing_file {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--gray-200);
    border-radius: .5rem;
    background-color: var(--gray-50);
    padding: .625rem .75rem;
    margin: 0 0 .5rem 0;
}

.pbl-file-inline-host .pbl-file-inline-file-icon {
    position: relative;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--gray-200);
    color: var(--gray-700);
}

    .pbl-file-inline-host .pbl-file-inline-file-icon i {
        font-size: 1.35rem;
        line-height: 1;
    }

    .pbl-file-inline-host .pbl-file-inline-file-icon span {
        font-size: .5625rem;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1;
        margin-top: .25rem;
    }

    /* Absolute fill so the thumbnail covers the badge edge to edge - any gap would
       show the badge's grey through, which reads as an unintended border. */
    .pbl-file-inline-host .pbl-file-inline-file-icon img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* File type is carried by the icon glyph and the extension text in the badge, plus
   the written kind on the meta line - never by colour alone, so the badge stays on
   the neutral ramp and reads the same to every user and in both themes. */

.pbl-file-inline-host .pbl-file-inline-file-main {
    flex: 1 1 auto;
    min-width: 0;
}

.pbl-file-inline-host .pbl-file-inline-file-name {
    font-weight: 600;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbl-file-inline-host .pbl-file-inline-file-meta {
    font-size: .8125rem;
    color: var(--gray-500);
    margin-top: .1rem;
}

.pbl-file-inline-host .pbl-file-inline-file-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.pbl-file-inline-host .pbl-file-inline-file-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--gray-300);
    border-radius: 1rem;
    padding: .1rem .5rem;
    font-size: .75rem;
    color: var(--gray-700);
    white-space: nowrap;
}

.pbl-file-inline-host .pbl-file-inline-file-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .35rem;
}

/* Delete is destructive, so it reads red - with the trash glyph, not colour alone.
   padding:0 is load-bearing: it overrides the legacy a.pbl_file_form_delete
   padding-left, which otherwise pushes the glyph off-centre in the square. */
.pbl-file-inline-host .pbl-file-inline-remove,
.pbl-file-inline-host .pbl_file_form_existing_file .pbl_file_form_delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: .375rem;
    border: 1px solid var(--red);
    background-color: transparent;
    color: var(--red);
    text-decoration: none;
}

    .pbl-file-inline-host .pbl-file-inline-remove:hover,
    .pbl-file-inline-host .pbl_file_form_existing_file .pbl_file_form_delete:hover {
        background-color: var(--red);
        color: #fff;
        text-decoration: none;
    }

/* Saved-file rows keep their server-rendered markup (a link plus a "delete now"
   link), so give the name link the row's remaining width and shrink the delete
   link's wording to fit the same square button as the pending rows. */
/* The name and its caption are wrapped in .pbl-file-inline-file-main, so the link is
   no longer a direct flex child of the row - it needs to fill that wrapper instead. */
.pbl-file-inline-host .pbl_file_form_existing_file .pbl_file_form_download {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--gray-900);
    text-decoration: none;
}

/* Saved rows use spans (a <p> may not contain a <div>, and mustHaveFileDDL counts the
   <p> elements in the existing block), so these two need to lay out as blocks. */
.pbl-file-inline-host .pbl_file_form_existing_file .pbl-file-inline-file-main,
.pbl-file-inline-host .pbl_file_form_existing_file .pbl-file-inline-file-meta {
    display: block;
}

.pbl-file-inline-host .pbl_file_form_existing_file .pbl-file-inline-file-icon {
    display: flex;
}

.pbl-file-inline-host .pbl_file_form_existing_file .pbl_file_form_delete {
    font-size: 0;
}

    .pbl-file-inline-host .pbl_file_form_existing_file .pbl_file_form_delete::before {
        font: var(--fa-font-regular);
        content: "\f2ed";
        font-size: .875rem;
    }

/* Two blanket rules paint every div inside the control: `div.pbl_file_form div`
   (#fff) in this file, and `body.dark-mode div.pbl_file_form div` (#111827) in
   horizon_dark.css. Both outrank the component rules above, so in dark mode every
   inner div flattened to the panel colour - the progress bar and the drop-zone icon
   vanished, and the locked panel showed darker patches. Neutralise the whole subtree
   once, then restate only the fills that must differ. The fills carry one more
   element than the wildcard, so they win regardless of source order. Non-div
   elements (the saved-row badge span, the remove link) are not matched by either
   blanket rule and are handled by the component rules alone. */
div.pbl_file_form.pbl-file-inline-host .pbl-file-inline div {
    background-color: transparent;
}

div.pbl_file_form.pbl-file-inline-host .pbl-file-inline div.pbl-file-inline-drop,
div.pbl_file_form.pbl-file-inline-host .pbl-file-inline div.pbl-file-inline-file {
    background-color: var(--gray-50);
}

div.pbl_file_form.pbl-file-inline-host .pbl-file-inline div.pbl-file-inline-drop-icon,
div.pbl_file_form.pbl-file-inline-host .pbl-file-inline div.pbl-file-inline-file-icon {
    background-color: var(--gray-200);
}

div.pbl_file_form.pbl-file-inline-host .pbl-file-inline div.pbl-file-inline-progress {
    background-color: var(--gray-300);
}

div.pbl_file_form.pbl-file-inline-host .pbl-file-inline div.pbl-file-inline-progress-bar {
    background-color: var(--blue);
}

div.pbl_file_form.pbl-file-inline-host .pbl-file-inline.pbl-file-inline-locked div.pbl-file-inline-drop {
    background-color: var(--gray-100);
}

@media (max-width: 575.98px) {
    .pbl-file-inline .pbl-file-inline-drop {
        padding: 1.25rem .75rem;
    }

    .pbl-file-inline .pbl-file-inline-drop-actions .btn {
        width: 100%;
    }
}

/* Custom field editor, shared by the report template and note type administration screens.

   The column percentages the editor sets on its header are only hints under the default auto
   layout, which never shrinks a column below the width of its header text: Mandatory and
   Suppressed each claimed about 95px whatever they were given, leaving Name and Prompt clipping
   their content. Fixed layout makes the percentages authoritative and lets those two headers wrap
   instead.

   Scoped to this editor's own container, so no other PBL grid is affected. */
#div_report_custom_fields > .table-responsive-sm > table#tbl_report_custom_fields {
    table-layout: fixed;
    width: 100%;
}