/*************************************
 *            Colors                 *
 *************************************/
:root {
    /* PowerFolder */
    --background_color: #ffffff;
    --link_color: #182a38;

    --slash_color: #dddddd;

    --dark_fg: #ffffff;
    --dark_bg: #ffffff;

    --light_fg: #000000;
    --light_bg: #ffffff;

    --dialog_bg: #ffffff;

    --placeholder_color: #999999;
    --highlight_color: #fcf8e3;
    --stripe_color: #dee8fa;
    --special_color: #182a38;

    --border_color: #dddddd;

    --chart1: #4a5b6d;
    --chart2: #bbdf73;
    --chart3: #f3f3f3;
    --chart4: #f9f9f9;
    --upgrade-banner-h: 0px;

    /* Activity page operation colors (global so the filter bar works even
     * when relocated into the top action bar, outside #pica_content) */
    --pf-act-border: #e5e9ef;
    --pf-act-muted: #7b8794;
    --pf-act-blue: #1976d2;   /* added / new */
    --pf-act-green: #388e3c;  /* updated / changed */
    --pf-act-red: #d32f2f;    /* deleted */
    --pf-act-navy: #182a38;
}

/*************************************
 *             Charts                *
 *************************************/

.pica-chart-color1 {
    color: var(--chart1);
}

.pica-chart-color2 {
    color: var(--chart2);
}

.pica-chart-color3 {
    color: var(--chart3);
}

/*************************************
 *           Pagination              *
 *************************************/

.pagination > li > a,
.pagination > li > span {
    color: var(--chart1);
    border-color: var(--border_color);
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    color: var(--dark_fg);
    background-color: var(--chart1);
    border-color: var(--chart1);
}

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

.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus,
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus {
    color: var(--placeholder_color);
    border-color: var(--border_color);
}

/*************************************
 *            Elements               *
 *************************************/

*[draggable=true] {
    -moz-user-select: none;
    -khtml-user-drag: element;
    cursor: move;
}

body.wallpaper {
    background-image: url("../images/wallpaper.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

#pica_logo {
    background-color: var(--background_color);
    padding: 10px;
}

#pica_logo_big {
    background-image: url("../images/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100px;
}

#pica_logo_small {
    background-image: url("../images/logo_small.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 86px;
    line-height: 86px;
}

#pica_ghost {
    position: absolute;
    top: -1000px;
    border: 1px solid var(--border_color);
    border-radius: 4px;
    overflow: hidden;
    background-color: #f9f9f9 !important;
}

#pica_ghost span + span,
#pica_ghost img + span {
    padding-left: 10px;
}

/*************************************
 *            Layout big             *
 *************************************/

@media (min-width: 992px) {
    #pica_menu {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 120px;
        margin: 0px;
        padding: 0px;
        background-color: var(--background_color);
        border-right: 1px solid var(--border_color);
        overflow: hidden;
    }

    #pica_menu table td {
        padding-bottom: 0px;
    }

    #pica_pane {
        position: absolute;
        top: 0px;
        left: 120px;
        right: 0px;
        bottom: 0px;
        width: auto;
        margin: 0px;
        padding: 0px;
        background-color: var(--dark_bg);
        overflow: hidden;
    }

    #pica_transparent_pane {
        position: absolute;
        top: 0px;
        left: 120px;
        right: 0px;
        bottom: 0px;
        width: auto;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    #pica_footer {
        position: absolute;
        left: 100px;
        right: 0px;
        bottom: 0px;
        width: auto;
        line-height: 36px;
    }

    #pica_action_search {
        position: absolute;
        top: 25px;
        left: 10px;
        right: 19%;
        height: 36px;
        width: auto;
        border: 1px solid var(--border_color);
        border-radius: 4px;
    }

    #pica_action_hamburger {
        display: none;
        line-height: 86px;
    }

    #pica_action_normal {
        position: absolute;
        top: 0px;
        right: 10px;
        bottom: 0px;
        width: 120px;
        line-height: 86px;
    }

    .pica-hidden-on-big {
        display: none;
    }

    .pica-hidden-on-small {
    }

    .pica-block-on-big {
        display: block !important;
    }

    .pica-block-on-small {
    }

    .pica-dialog-small {
        width: 400px !important;
    }

    .pica-dialog-medium {
        width: 700px !important;
    }
}

/*************************************
 *           Layout small            *
 *************************************/

@media (max-width: 992px) {
    #pica_menu {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 65px;
        margin: 0px;
        padding: 0px;
        background-color: var(--background_color);
        border-right: 1px solid var(--border_color);
        overflow: hidden;
    }

    #pica_menu table td {
        padding-bottom: 5px;
    }

    #pica_pane {
        position: absolute;
        top: 0px;
        left: 65px;
        right: 0px;
        bottom: 0px;
        width: auto;
        margin: 0px;
        padding: 0px;
        background-color: var(--dark_bg);
        overflow: hidden;
    }

    #pica_footer {
        position: absolute;
        left: 65px;
        right: 0px;
        bottom: 0px;
        width: auto;
        line-height: 36px;
    }

    #pica_action_search {
        position: absolute;
        top: 25px;
        left: 10px;
        right: 19%;
        bottom: 0px;
        height: 36px;
        width: auto;
        border: 1px solid var(--border_color);
    }

    #pica_action_hamburger {
        position: absolute;
        top: 0px;
        right: 10px;
        bottom: 0px;
        width: 55px;
        line-height: 86px;
    }

    #pica_action_normal {
        display: none;
        line-height: 86px;
    }

    .pica-hidden-on-big {
    }

    .pica-hidden-on-small {
        display: none;
    }

    .pica-block-on-big {
    }

    .pica-block-on-small {
        display: block !important;
        width: 100%;
    }

    .pica-dialog-small {
    }

    .profile_storage_bar {
        display: none;
    }

    /* Vertical scroll layout for tables on mobile.
     * The desktop layout pins tbody absolutely within a fixed-height #pica_content.
     * On mobile we let the table flow top-to-bottom and make #pica_content scroll. */
    #pica_content {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .pica-table-scroll tbody,
    .pica-table-scroll-with-nav tbody {
        position: static;
        height: auto;
        overflow: visible;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }
}

/*************************************
 *          Notifications             *
 *************************************/

#pica_notifications ul {
    overflow-y: auto;
    max-height: 400px;
    width: auto;
}

#pica_notifications ul li {
    padding: 5px;
    line-height: 30px;
    border-bottom: 1px solid var(--border_color);
    white-space: nowrap;
}

#pica_notifications ul li .glyphicons {
    margin-right: 10px;
}

#pica_notifications ul li:last-child {
    border: none;
}

.pica-notification {
  position: fixed;
  bottom: 10px;
  right: 10px;
  min-width: 200px;
  max-width: 33%;
  z-index: 99999;
  text-align: center;
}

.pica-notification-box {
    padding: 15px;
    margin: 0px;
    text-align: left;
    display: flex;
    align-items: flex-start;
}

.pica-notification-box .badge,
.pica-notification-box button {
    margin-left: 5px;
    flex-shrink: 0;
}

.pica-notification-box button.close {
    margin-left: auto;
    padding-left: 10px;
}

.pica-notification-box .glyphicons {
    margin-right: 10px;
}

/* Override BS5 alert colors to match BS3 appearance */
.alert-success {
    background-color: #dff0d8 !important;
    color: #3c763d !important;
    border-color: #b2dba1 !important;
}
.alert-info {
    background-color: #d9edf7 !important;
    color: #31708f !important;
    border-color: #9acfea !important;
}
.alert-warning {
    background-color: #fcf8e3 !important;
    color: #8a6d3b !important;
    border-color: #f5e79e !important;
}
.alert-danger {
    background-color: #f2dede !important;
    color: #a94442 !important;
    border-color: #dca7a7 !important;
}

/*************************************
 *              Menu                 *
 *************************************/

#pica_menu a .pica-glyph,
#pica_menu a {
    color: var(--link_color) !important;
}

#pica_menu a.active {
    text-decoration: underline;
}

#pica_menu a.active:hover {
    text-decoration: none;
}

#pica_menu table {
    margin: 0px auto;
}

#pica_menu table td {
    color: var(--link_color) !important;
    line-height: 27px;
    padding-top: 5px;
}

/* BS5: .show is no longer a global utility (was display:block!important in BS3).
   Sidebar icons have class="pica-glyph show glyphicons ..." and need block display
   to stack icon above the text label, matching the BS3 layout. */
#pica_menu .pica-glyph.show {
    display: block !important;
    margin-right: 0;
}

#pica_menu td a lang {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

/*************************************
 *              Action               *
 *************************************/

#pica_action .media {
    line-height: initial;
    padding: 10px 10px 0px 10px;
}

/* BS5: .media-* removed, target both old and new class names */
#pica_action .media-heading,
#pica_action .media-body,
#pica_action h4,
#pica_action .flex-grow-1 {
    white-space: nowrap;
}

#pica_action .media-object,
#pica_action img.rounded-circle {
    width: 50px;
    height: 50px;
    max-width: initial;
}

/*************************************
 *            TagInput               *
 *************************************/

.pica-taginput .pica-taginput-div {
    position: relative;
    padding: 1px;
    white-space: nowrap;
    height: auto !important;
    z-index: 999999 !important;
}

.pica-taginput .pica-taginput-div > * {
    height: auto !important;
}

/* The wrapper carries the field border and background, so it has to grey out together with a
   disabled input - otherwise only the inner input looks disabled. */
.pica-taginput .pica-taginput-div:has(> .pica-taginput-input:disabled) {
    background-color: #e9ecef;
}

.pica-taginput .pica-taginput-input {
    float: left;
    border: none;
    padding-left: 12px;
    width: 100%;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.pica-taginput:focus-within {
    border-color: #66afe9 !important;
    box-shadow: 0 0 8px rgba(102, 175, 233, .6) !important;
}

.pica-taginput .pica-taginput-input::-webkit-input-placeholder {
    color: var(--placeholder_color) !important;
}

.pica-taginput .pica-taginput-input:-moz-placeholder {
    color: var(--placeholder_color) !important;
}

.pica-taginput .pica-taginput-input::-moz-placeholder {
    color: var(--placeholder_color) !important;
}

.pica-taginput .pica-taginput-input:-ms-input-placeholder {
    color: var(--placeholder_color) !important;
}

.pica-taginput .pica-taginput-input::-moz-placeholder {
    color: var(--placeholder_color) !important;
    opacity: 1;
}

.pica-taginput .pica-taginput-input:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: #66afe9 !important;
}

.pica-taginput .pica-taginput-tag {
    float: left;
    margin: 2px;
    padding: 4px;
    background-color: var(--border_color);
    color: var(--link_color);
    border-radius: 4px;
}

.pica-taginput .pica-taginput-tag > span:first-child {
    margin-right: 8px;
}

.pica-taginput .pica-taginput-tag > span:last-child {
    margin-left: 8px;
    margin-right: 4px;
}

.pica-taginput .pica-taginput-dropdown {
    overflow-y: auto;
    max-height: 50vh;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
}

.pica-taginput .pica-taginput-dropdown li:not(".divider"):not(".dropdown-divider") {
    padding: 5px;
}

.pica-taginput .pica-taginput-dropdown li.pica-taginput-dropdown-spinner {
    text-align: center;
    padding: 5px;
}

.pica-taginput .pica-taginput-dropdown li.selected a {
    background-color: #e8e8e8;
    background-image: linear-gradient(to bottom, #f5f5f5, #e8e8e8 100%);
}

/*************************************
 *            InputList              *
 *************************************/

.pica-inputlist-scroller {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.pica-inputlist-scroller .dropdown-menu {
    position: fixed;
}

.pica-inputlist-table {
    table-layout: fixed;
}

.pica-inputlist-loading-message {

    width: 100%;
    max-width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pica-inputlist-loading-spinner {
    margin-left: 10px;
}

/*************************************
 *              Action               *
 *************************************/

#pica_action {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: var(--light_bg);
}

#pica_action_search > a.pica-crumb {
    float: left;
    margin-left: 5px;
    /* PFS-5653: 8px puts the crumb text on the same baseline as the filter chips next to it. */
    margin-top: 8px;
    color: var(--link_color);
    cursor: pointer;
}

#pica_action_search > a.pica-crumb:not(:first-child):before {
    content: "/";
    padding-right: 5px;
    color: var(--slash_color);
}

#pica_action_search_input {
    border: none;
    /* PFS-5653: 0.5em keeps the typed text on the baseline of the crumbs and the chips before it. */
    margin-top: 0.5em;
    margin-left: 0.3em;
    width: 100%;
    box-sizing: border-box;
}

#pica_action_search_input::-webkit-search-cancel-button,
#pica_action_search_input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

#pica_action_search_input:focus {
    outline: none;
}

#pica_action_search_input:after {
    content: "";
    clear: both;
}

/* PFS-5653: the placeholder used to be transparent here - in WebKit only, so Firefox always showed it.
   An empty search box says what it is for, and the completion overlay hides itself while it is empty. */
#pica_action_search_input::placeholder {
    color: var(--placeholder_color);
    opacity: 1;
}

#pica_action_search_input:-moz-placeholder { /* FF 4-18 */
    color: transparent;
}

#pica_action_search_input::-moz-placeholder { /* FF 19+ */
    color: transparent;
}

#pica_action_search_input:-ms-input-placeholder { /* IE 10+ */
    color: transparent;
}

#pica_action_search_input:hover::-webkit-input-placeholder {
    color: var(--border_color);
}

#pica_action_search_input:hover:-moz-placeholder { /* FF 4-18 */
    color: var(--border_color)
}

#pica_action_search_input:hover::-moz-placeholder { /* FF 19+ */
    color: var(--border_color);
}

#pica_action_search_input:hover:-ms-input-placeholder { /* IE 10+ */
    color: var(--border_color);
}

#pica_action_search_button {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 0px;
}

#pica_action_search_button:hover {
    text-decoration: none;
}

#pica_action_search_clear {
    position: absolute;
    top: 5px;
    right: 34px;
    color: #999;
    font-size: 12px;
    cursor: pointer;
}

#pica_action_search_clear:hover {
    color: #333;
    text-decoration: none;
}

.pica_ldap_edit_button {
    margin-right: 15px;
}

/*************************************
 *              Content              *
 *************************************/

#pica_content {
    position: absolute;
    top: 86px;
    left: 0px;
    right: 0px;
    bottom: 46px;
    padding: 10px;
    overflow: hidden;
}

#pica_content table {
    background-color: var(--light_bg);
}

#pica_content table th, #pica_content table td, .pica-line {
    vertical-align: middle;
    line-height: 60px;
    padding: 0px 5px 0px 5px;
}

#pica_content table td pre {
    line-height: 1.4;
    margin: 10px 0;
}
/*************************************
 *              Footer               *
 *************************************/

#pica_footer {
    padding: 10px 10px 0px 10px;
}

#pica_footer > div {
    border-top: 1px solid var(--border_color);
    padding: 0px 5px 0px 5px;
}

/*************************************
 *              Timeline             *
 *************************************/

.pica-timeline {
    line-height: 1.4em;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.pica-timeline h1, h2, h3, h4, h5, h6 {
    line-height: inherit;
}

.pica-timeline-item {
    padding-left: 40px;
    position: relative;
}

.pica-timeline-item:last-child {
    padding-bottom: 0;
}

.pica-timeline-info {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0 0 .5em 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.pica-timeline-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15px;
}

.pica-timeline-marker:before {
    background: var(--special_color);
    border: 3px solid transparent;
    border-radius: 100%;
    content: "";
    display: block;
    height: 15px;
    position: absolute;
    top: 4px; left: 0;
    width: 15px;
    transition: background 0.3s ease-in-out,
    border 0.3s ease-in-out;
}

.pica-timeline-marker:after {
    content: "";
    width: 3px;
    background: var(--link_color);
    display: block;
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 6px;
}

.pica-timeline-marker .pica-timeline-item:last-child:after {
    content: none;
}

.pica-timeline-item:hover .pica-timeline-marker:before {
    background: transparent;
    border: 3px solid var(--special_color);
}

.pica-timeline-content {
    padding-bottom: 40px;
}

.pica-timeline-content p:last-child {
    margin-bottom: 0;
}

.pica-timeline-files {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

@media (min-width: 992px) {
    .pica-timeline-centered,
    .pica-timeline-centered .pica-timeline-item,
    .pica-timeline-centered .pica-timeline-info,
    .pica-timeline-centered .pica-timeline-marker,
    .pica-timeline-centered .pica-timeline-content {
        display: block;
        margin: 0;
        padding: 0;
    }

    .pica-timeline-centered .pica-timeline-item {
        padding-bottom: 40px;
        overflow: hidden;
    }

    .pica-timeline-centered .pica-timeline-marker {
        position: absolute;
        left: 50%;
        margin-left: -7.5px;
    }

    .pica-timeline-centered .pica-timeline-info,
    .pica-timeline-centered .pica-timeline-content {
        width: 50%;
    }

    .pica-timeline-centered > .pica-timeline-item:nth-child(odd) .pica-timeline-info {
        float: left;
        text-align: right;
        padding-right: 30px;
    }

    .pica-timeline-centered > .pica-timeline-item:nth-child(odd) .pica-timeline-content {
        float: right;
        text-align: left;
        padding-left: 30px;
    }

    .pica-timeline-centered > .pica-timeline-item:nth-child(even) .pica-timeline-info {
        float: right;
        text-align: left;
        padding-left: 30px;
    }

    .pica-timeline-centered > .pica-timeline-item:nth-child(even) .pica-timeline-content {
        float: left;
        text-align: right;
        padding-right: 30px;
    }
}

/*************************************
 *              Gallery              *
 *************************************/

.pica-gallery {
}

.pica-gallery.modal-dialog {
    max-width: 80%;
    width: 80%;
}

.pica-gallery .modal-body {
    /* padding: 0px; */
}

.pica-gallery .carousel-indicators li {
    border: 1px solid var(--border_color);
}

.pica-gallery .carousel-indicators .active {
    background-color: var(--border_color);
}

.pica-gallery .carousel-inner .carousel-item img {
    display: block;
    width: 100%;
    object-fit: contain;
    max-height: 90vh;
    margin: 0px auto;
}

.pica-gallery .carousel-control-prev,
.pica-gallery .carousel-control-next {
    width: 10%;
    opacity: 0.7;
}

.pica-gallery .carousel-control-prev:hover,
.pica-gallery .carousel-control-next:hover {
    opacity: 1;
}

.pica-gallery .carousel-control-prev .pica-table,
.pica-gallery .carousel-control-next .pica-table {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.pica-gallery .carousel-control-prev .glyphicons,
.pica-gallery .carousel-control-next .glyphicons {
    font-size: 2em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/*************************************
 *                Box                *
 *************************************/

.pica-boxes {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.pica-boxes .pica-box {
    display: table-cell;
    padding: 10px;
}

.pica-chart-legend {
    margin-top: 8px;
    text-align: left;
}

.pica-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.6;
}

.pica-dashboard-info {
    font-size: 14px;
    padding: 6px 0;
}

.pica-dashboard-info-row {
    padding: 3px 0;
}

.pica-chart-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pica-boxes .pica-box.rowspan {
}

.pica-boxes .pica-box-head {
    padding: 5px;
    border-bottom: 1px solid var(--border_color);
}

.pica-boxes .pica-box-body {
    padding: 5px;
    vertical-align: center;
}

.pica-boxes .pica-box-body-scroll {
    overflow-x: hidden;
    padding: 5px 0px 5px 0px;
    max-height: 400px;
}

.pica-boxes .pica-box-body table {
    width: 100%;
}

.pica-boxes .pica-box-body table tr {
    margin-bottom: 10px;
}

.pica-boxes .pica-box-body table th,
.pica-boxes .pica-box-body table td {
    line-height: 30px !important;
}

.pica-card-box table td {
    padding: 20px;
    line-height: 30px;
}

/*************************************
 *            Datepicker             *
 *************************************/

.pica-datepicker {
  top: 0;
  left: 0;
  padding: 4px;
  margin-top: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  z-index: 1100;
}

.pica-datepicker > div {
  display: none;
}

.pica-datepicker table {
  width: 100%;
  margin: 0;
}

.pica-datepicker td, .pica-datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.pica-datepicker td.day:hover {
  background: #eeeeee;
  cursor: pointer;
}

.pica-datepicker td.day.disabled {
  color: #eeeeee;
}

.pica-datepicker td.old,
.pica-datepicker td.new {
  color: #999999;
}

.pica-datepicker td span {
  display: block;
  width: 47px;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 2px;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.pica-datepicker td span:hover {
  background: #eeeeee;
}

.pica-datepicker td span.old {
  color: #999999;
}

.pica-datepicker th.switch {
  width: 145px;
}

.pica-datepicker th.next, .pica-datepicker th.prev {
  font-size: 21px;
}

.pica-datepicker thead tr:first-child th {
  cursor: pointer;
}

.pica-datepicker thead tr:first-child th:hover {
  background: #eeeeee;
}

/*************************************
 *             Checkbox              *
 *************************************/

.pica-button-checkbox + .progress{
    left: 10px;
    top: 6px;
}

.pica-button-checkbox + .pica-button-checkbox,
.btn + .pica-button-checkbox {
    margin-left: 10px;
}

.pica-button-checkbox .state-icon {
    vertical-align: baseline !important;
}

.pica-button-checkbox-custom {
    display: block;
}

.pica-button-checkbox-custom .state-icon {
    vertical-align: baseline !important;
}

/* Match BS3 btn-default for unchecked toggle buttons */
.pica-button-checkbox .btn-light,
.pica-button-checkbox-custom .btn-light {
    background-color: #fff;
    background-image: linear-gradient(#fff 0%, #e0e0e0 100%);
    background-repeat: repeat-x;
    border-color: #ccc;
    color: #333;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.pica-button-checkbox .btn-light:hover,
.pica-button-checkbox-custom .btn-light:hover {
    background-color: #e6e6e6;
    background-image: none;
    border-color: #adadad;
    color: #333;
}

/*************************************
 *              Dialogs              *
 *************************************/

.pica-dialog {
    display: table;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

.pica-dialog > div {
    display: table-cell;
    vertical-align: middle;
}

.pica-dialog > div > *:not(.pica-dialog-outside) {
    background-color: var(--dialog_bg);
    margin: 50px auto 0px auto;
    border: 1px solid #000;
    padding: 10px 50px 10px 50px;
}

.pica-dialog-scroll {
    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#pica_preference_dialog > .modal-dialog,#pica_account_dialog > .modal-dialog {
    width: 800px;
}

#pica_group_dialog > .modal-dialog {
    width: 960px;
}

/* PFC-3613: The inheritance dialog opens out of the sharing dialog and shows the same kind of
   holder list, so it keeps the same width - one rule, so the two cannot drift apart. */
#pica_share_dialog .modal-dialog,
#pica_inheritance_dialog .modal-dialog {
    width: 800px;
}

#pica_video_dialog > .modal-dialog, #pica_audio_dialog > .modal-dialog  {
    display: table;
}
.pref-btn-with-label {
    /* A value is not a text field: the dropdown takes the room it needs, it does not stretch across
       the rest of the row. */
    flex: 0 1 auto;
}

.pref-btn-with-label > button {
    min-width: 150px;
    max-width: 100%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    /* The value starts where the text of a neighbouring input field starts. A very long option is
       cut rather than widening the button past the label column - the list shows it in full. */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pref-content > .content > .form-group {
    width: 100%;
}

.input-group-text.pref-input-label,
.input-group-addon.pref-input-label {
    text-align: left;
    width: 320px;
    flex: 0 0 320px;
    white-space: normal;
}

.pref-input-label b {
    font-weight: normal;
}

.pref-btn-checkbox > button {
    text-align: left;
    min-width: 250px;
}

.input-group:has(> .pref-btn-checkbox) {
    width: auto;
}

.pref-form-check .form-check-input {
    cursor: pointer;
}

.pref-form-check .form-check-label {
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
}

/* Compact checkbox rows: they stack without extra spacing, the label line height
   keeps them readable. The left padding keeps the focus ring clear of the dialog edge. */
.form-group:has(.pref-form-check) {
    margin-bottom: 0;
    padding-left: 4px;
}

#pref-tabs {
    margin-bottom: 20px;
}

.nav > li > a {
    padding: 10px;
}

#pica_organization_dialog label {
    display: block;
    text-align: right;
    font-size: 20px;
}
/*************************************
 *              Flex                 *
 *************************************/

.pica-flex {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: start;
}

.pica-flex .pica-flex-file {
    width: 120px;
    height: 100px;
}

/*************************************
 *              Tables               *
 *************************************/

.pica-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.pica-table > * {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/* BS5: .input-group uses display:flex + width:100% which breaks .pica-table's
   table-cell layout. Use flex instead for form rows containing input-groups. */
.form-group.pica-table {
    display: flex;
    align-items: center;
}

.form-group.pica-table > * {
    flex: 1 1 0;
    min-width: 0;
}

.form-group.pica-table > .input-group {
    width: auto;
}

/* Gap between children in .pica-table form rows */
.form-group.pica-table {
    gap: 10px;
}

/* Vertical gap between stacked buttons inside .pica-table (e.g. Change/Delete) */
.form-group.pica-table .btn-block + .btn-block {
    margin-top: 5px;
}

.pica-table-fixed {
    table-layout: fixed;
}

.pica-table-list {
    background-color: initial !important;
}

.pica-table-list td {
    line-height: initial !important;
}

.pica-table-list tr + tr {
    margin-top: 5px;
}

.pica-table-scroll tbody {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    position: absolute;
    top: 72px;
    left: 10px;
    right: 10px;
    bottom: 0px;
}

.pica-table-scroll-with-nav tbody {
    top: 114px;
}

.pica-table-scroll-with-nav thead th {
    border-top: none !important;
}

.pica-table-scroll thead,
.pica-table-scroll tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#files_files_table.pica-table-scroll tbody {
    scrollbar-gutter: stable;
}

#files_files_table.pica-table-scroll thead {
    display: block;
    box-sizing: border-box;
    padding-right: var(--pica-scrollbar-width, 0px);
}

#files_files_table.pica-table-scroll thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.pica-table-no-striping {
    background: none !important;
}

.pica-table-selection-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Border between anchors */
.pica-separated lang + lang,
.pica-table-selection-title span + a,
.pica-table-selection-context a + a {
    border-left: 1px solid var(--border_color) !important;
    margin-left: 5px;
    padding-left: 5px;
}

.pica-icon-column {
    width: 45px;
    white-space: nowrap;
    vertical-align: middle !important;
    text-align: center;
}

.pica-icon-column a:hover {
    text-decoration: none;
}

.pica-small-column {
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pica-column-tiny,
.pica-column-button {
    width: 130px;
}

.pica-column-avatar {
    width: 300px;
}

.pica-sortable-table-head {
    font-weight: bold;
}

hr.pica-sortable-table-head-body-divider {
    margin-top: 10px;
    margin-bottom: 5px;
}

.pica-sortable-table-body:before {
    line-height: 1em;
    content: "";
    color: white;
    display: block;
}

.pica-sortable-table-cell {
    margin-top: 6px;
    margin-bottom: 6px;
    cursor: grab;
    user-select: none;
    pointer-events: none;
}

tr[draggable="true"]:active .pica-sortable-table-cell,
tr[draggable="true"].pica-dragging .pica-sortable-table-cell {
    cursor: grabbing;
}

.pica-sortable-table-body.pica-drag-over {
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
    min-height: 40px;
}

.pica-sortable-arrow-placeholder {
    height: 60px
}

.pica-sortable-arrow {
    font-size: 2.5em;
    border: none !important;
}

.pica-sortable-table-placeholder {
    margin-top: 15px;
}

#auth-active-placeholder {
    margin-top: 15px;
}

#auth-inactive-placeholder {
    margin-top: 15px;
}

/*************************************
 *              Nav                  *
 *************************************/

.pica-nav-tabs {
    /*border: none;*/
    flex-wrap: nowrap;
}

.pica-nav-tabs > li > a {
    white-space: nowrap;
}

.pica-nav-content {
    border-left: 1px solid var(--border_color);
}

.pica-nav-tab-extra .progress {
    top: 7px;
}

.pica-nav-tab-extra .progress:first-child {
    left: 10px;
}

/*************************************
 *             Content               *
 *************************************/

.pica-content {
    padding: 10px;
}

.pica-content-scroll {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.pica-content-scroll-with-header {
    position: absolute;
    top: 72px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/*************************************
 *              Public content       *
 *************************************/

.pica-public-content {
    left: 0px !important;
}

/*************************************
 *              Misc                 *
 *************************************/

.pica-drag-yes {
    outline: 4px solid #dff0d8;
}

.pica-drag-no {
    outline: 4px solid #f2dede;
}

#files_files_table tbody > tr.success > td {
    background-color: #dff0d8 !important;
    --bs-table-bg-type: transparent;
}

#files_files_table tbody > tr.danger > td {
    background-color: #f2dede !important;
    --bs-table-bg-type: transparent;
}

.pica-arrow-left, .pica-arrow-right {
}

.pica-arrow-left:before, .pica-arrow-right:before {
  content: "";
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
}

.pica-arrow-left:after, .pica-arrow-right:after {
  content: "";
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  position: absolute;
  top: -6px;
}

.pica-arrow-left:before {
  left: 10px;
}

.pica-arrow-left:after {
  left: 11px;
}

.pica-arrow-right:before {
  right: 10px;
}

.pica-arrow-right:after {
  right: 11px;
}

.pica-pipe-group > a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}

.pica-pipe-group > a + a:before {
    content: "|";
    margin-left: 5px;
    margin-right: 5px;
    color: var(--slash_color);
}

.pica-border {
    border: 1px solid var(--border_color);
}

.pica-space {
    margin-top: 20px;
    margin-bottom: 20px;
}

.pica-space-top {
    margin-top: 20px;
}

.pica-space-right {
    margin-right: 20px;
}

.pica-space-right-small {
    margin-right: 10px;
}

.pica-relative {
    position: relative;
}

.pica-inline {
    display: inline-block;
}

.pica-block {
    display: block;
}

.pica-full-width {
    width: 100%;
}

.pica-full-height {
    height: 100%;
    border-right: 0px solid var(--link_color);
}

.pica-full {
    position: absolute;
    top: var(--upgrade-banner-h, 0px) !important;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.pica-icon {
    width: 32px;
    height: 32px;
}

img.pica-icon {
    object-fit: contain;
}

.pica-avatar {
    max-width: 80%;
}

.pica-icon-small {
    width: 16px;
    height: 16px;
}

.pica-icon-big {
    width: 256px;
    height: 256px;
    margin-right: 5px;
}

.pica-icon-thumb-gallery {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pica-icon-thumb-list {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pica-glyph {
    font-size: 24px;
    color: var(--link_color);
    vertical-align: middle;
    margin-right: 2px;
}

.pica-glyph-color {
    font-size: 24px;
    vertical-align: middle;
    margin-right: 2px;
}

.pica-glyph-small {
    font-size: 16px;
    color: var(--link_color);
    vertical-align: middle;
}

.pica-glyph-big {
    font-size: 40px;
    color: var(--link_color);
    vertical-align: middle;
}

.pica-glyph-huge {
    font-size: 120px;
    color: var(--link_color);
    vertical-align: middle;
    overflow: hidden;
}


.pica-glyph-box {
    display: inline-block;
    text-align: center;
}

.pica-glyph-box > * {
    vertical-align: middle;
    margin: 0px;
}

.pica-progress {
    margin: 0px;
}

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

.pica-nowrap {
    white-space: nowrap;
}

/* Restore dialog: fixed layout so long file names truncate with an ellipsis
   (via .pica-overflow on the name cell) instead of widening the table past
   the modal. Widths are set on the other header cells; the unset name column
   absorbs the remaining space. */
#pica_restore_versions .table {
    table-layout: fixed;
    width: 100%;
}

#pica_restore_versions .table th:nth-child(1) { width: 45px; }  /* Icon */
#pica_restore_versions .table th:nth-child(3) { width: 75px; }  /* Size */
#pica_restore_versions .table th:nth-child(4) { width: 120px; } /* Modified by */
#pica_restore_versions .table th:nth-child(5) { width: 140px; } /* Date */
#pica_restore_versions .table th:nth-child(6) { width: 75px; }  /* Version */
#pica_restore_versions .table th:nth-child(7) { width: 100px; } /* Actions (download + restore) / Current */

/* Gap so the Version column doesn't stick to the Date column */
#pica_restore_versions .table th:nth-child(6),
#pica_restore_versions .table td:nth-child(6) { padding-left: 20px; }

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

.pica-dropdown {
    display: inline;
    background: var(--background_color);
    padding: 5px;
}

.pica-dropdown a {
    color: var(--link_color);
}

.pica-file {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

/* BS3 float gave natural spacing between adjacent .pica-file buttons;
   BS5 flexbox layout does not, so add explicit margin. */
.pica-file + .pica-file {
    margin-left: 5px;
}

.pica-file input {
    direction: ltr;
    margin: 0px;
    padding: 0px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.pica-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pica-border-bottom {
    border-bottom: 1px solid var(--border_color);
}

.pica-line-normal {
    line-height: normal;
}

.pica-line-big {
    vertical-align: middle;
    line-height: 60px;
    padding: 0px 5px 0px 5px;
}

.pica-well {
    padding: 15px;
}

.pica-borderless {
    border: none !important;
}

.pica-empty-header{
    padding: 20px !important;;
}

.pica-slash {
    margin-left: 5px;
    margin-right: 5px;
    color: var(--slash_color);
}

.pica-slash-before:before {
    content: "/";
    margin-left: 5px;
    margin-right: 5px;
    color: var(--slash_color);
}

.pica-slash-after:after {
    content: "/";
    margin-left: 5px;
    margin-right: 5px;
    color: var(--slash_color);
}

.pica-pipe-after:after {
    content: "|";
    margin-left: 5px;
    margin-right: 5px;
    color: var(--slash_color);
}

.pica-bold {
    font-weight: bold;
}

.pica-strike {
    text-decoration: line-through;
}

.pica-below {
    z-index: 1 !important;
}

.pica-ontop {
    z-index: 9999999 !important;
}

.pica-in-brackets:before {
    content: "(";
    margin-left: 5px;
}

.pica-in-brackets:after {
    content: ")";
}

.pica-password {
    text-security: disc;
    -webkit-text-security: disc;
    -moz-text-security: disc;
}

/* When a show-password toggle flips the field to type="text", the text-security
   masking above would still hide the characters. Disable it while revealed. */
.pica-password[type="text"] {
    text-security: none;
    -webkit-text-security: none;
    -moz-text-security: none;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.pica-media-header {
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.pica-media-footer {
    border-top: 1px solid var(--border_color);
    padding-top: 10px;
}

/*************************************
 *            Highlight              *
 *************************************/

.pica-highlight {
    -moz-animation: pica-highlight 2s ease 0s 1 alternate;
    -webkit-animation: pica-highlight 2s ease 0s 1 alternate;
    animation: pica-highlight 2s ease 0s 1 alternate;
}

@-webkit-keyframes pica-highlight {
    from {
        background-color: var(--highlight_color);
    }
    to {
        background-color: inherit;
    }
}

@-moz-keyframes pica-highlight {
    from {
        background-color: var(--highlight_color);
    }
    to {
        background-color: inherit;
    }
}

@keyframes pica-highlight {
    from {
        background-color: var(--highlight_color);
    }
    to {
        background-color: inherit;
    }
}

/*************************************
 *             Spinner               *
 *************************************/

.pica-spinner {
    -moz-animation: pica-spinner 2s infinite linear;
    -webkit-animation: pica-spinner 2s infinite linear;
    animation: pica-spinner 2s infinite linear;
}

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

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

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

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

/*************************************
 *              Links                *
 *************************************/

a.pica-action-link, a.pica-action-link:active, a.pica-action-link:visited {
    color: var(--special_color);
}

a:not([href]) {
    cursor: pointer !important;
}

a:not([href]) span {
    cursor: pointer !important;
}

/*************************************
 *              Cards                *
 *************************************/

.pica-card {
    margin: 20px;
    width: 180px;
}

.pica-card.card {
    border: none;
    border-radius: 0;
    background: transparent;
}
.pica-card .pica-card-body {
    padding: 0;
}

.pica-card-glyph {
    text-align: center;
    font-size: 3.0em;
}

.pica-card-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

.pica-card-body {
    text-align: center;
}

.pica-card-text {
    height: 100px;
    text-align: left;
    font-weight: normal;
    line-height: 30px;
    border-top: 1px solid var(--border_color);
    border-bottom: 1px solid var(--border_color);
    margin-top: 20px;
    margin-bottom: 20px;
}

.pica-card-button {
    margin: 0 auto 16px;
}

/*************************************
 *       Bootstrap overrides         *
 *************************************/

/* Tables */
.table-responsive {
    border: none !important;
}

.table-striped > tbody > tr {
    background: var(--background_color);
}

.table-striped > tbody > tr:hover {
    background-color: var(--stripe_color);
}

.table-striped > tbody > tr.pica-not-striped {
    background-color: transparent !important;
}

.table > thead > tr > th {
    border-bottom: none !important;
}

.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
    border-top: 1px solid var(--border_color);
}

/* Checkboxes for selection */
.table-hover tbody tr:not(.pica-table-selection-disabled):hover
td.pica-icon-column:first-child span.pica-glyph:before {
    font-family: "Glyphicons Regular";
    content: "\E154" !important;
    vertical-align: baseline !important;
}

.table-hover tbody tr:not(.pica-table-selection-disabled):hover .pica-icon,
.table-hover tbody tr:not(.pica-table-selection-disabled):hover .pica-icon-thumb-list {
    display: none;
}

.table-hover tbody tr:not(.pica-table-selection-disabled):hover > td.pica-icon-column span {
    display: block !important;
}

.table-hover tbody tr:not(.pica-table-selection-disabled).info
td.pica-icon-column:first-child span.pica-glyph:before {
    font-family: "Glyphicons Regular";
    content: "\E153" !important;
    vertical-align: baseline !important;
}

/* Disable hover effect for empty root folder only */
.table-hover tbody tr.pica-table-empty-root,
.table-hover tbody tr.pica-table-empty-root:hover,
.table-striped > tbody > tr.pica-table-empty-root,
.table-striped > tbody > tr.pica-table-empty-root:hover {
    background: var(--background_color) !important;
    cursor: default !important;
}

.table-hover tbody tr.pica-table-empty-root:hover td.pica-icon-column:first-child span.pica-glyph:before {
    content: none !important;
}

.table-hover tbody tr.pica-table-empty-root:hover .pica-icon,
.table-hover tbody tr.pica-table-empty-root:hover .pica-icon-thumb-list {
    display: inline-block !important;
}

.table-hover tbody tr.pica-table-empty-root:hover > td.pica-icon-column span {
    display: none !important;
}

.table-hover tbody tr.pica-table-empty-root td {
    background: var(--background_color) !important;
}

/* Empty folder container */
.pica-empty-folder-container {
    padding: 40px 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
}

.pica-empty-folder-container h2 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 12px;
    color: #1f2937;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.pica-empty-folder-container p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
    text-align: center;
    max-width: 400px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin-left: auto;
    margin-right: auto;
}

.pica-empty-folder-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.table > tbody > tr.pica-current-session > td {
    background-color: #d9edf7;
}

.table-hover > tbody > tr.pica-current-session:hover > td {
    background-color: #c4e3f3;
}

.pica-table-empty td {
    overflow: hidden;
    max-width: 100%;
}

@media (max-width: 768px) {
    .pica-empty-folder-container {
        padding: 20px 10px !important;
        max-width: calc(100vw - 20px);
    }

    .pica-empty-folder-container h2 {
        font-size: 18px !important;
    }

    .pica-empty-folder-container p {
        font-size: 13px !important;
    }

    .pica-empty-folder-buttons {
        flex-direction: column !important;
    }

    .pica-empty-folder-buttons button {
        width: 100%;
    }
}

.table-hover tbody tr:not(.pica-table-selection-disabled).info .pica-icon,
.table-hover tbody tr:not(.pica-table-selection-disabled).info .pica-icon-thumb-list {
    display: none;
}

.table-hover tbody tr:not(.pica-table-selection-disabled).info > td.pica-icon-column span {
    display: block !important;
}

pre {
    margin-top: 10px;
}

/* Nav */
.nav-tabs > li > div {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.nav > li > div {
    position: relative;
    display: block;
    padding: 3px 15px;
}

.nav-tabs >li.active > div,
.nav-tabs >li.active > div:focus,
.nav-tabs >li.active > div:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav-tabs > li > div:hover {
    border-color: #eee #eee #ddd;
}

.nav > li > div:focus,
.nav > li > div:hover {
    text-decoration: none;
    background-color: #eee;
}

.nav > li > div > a > span {
    display: block;
    font-size: 10px;
    text-align: center;
}

/* Progress bars */
.progress {
    position: relative;
    height: 20px;
    margin: 0px;
}

.progress .pica-progress-caption {
    line-height: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    color: #1a1a1a;
}

.progress .pica-progress-caption.pica-progress-caption-overlay {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: calc(100% - 6px);
    transform: translate(-50%, -50%);
    padding: 0 8px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dropdown menus */
.dropdown-menu {
    min-width: 170px;
    top: 90%;
}

.dropdown-menu:empty {
    display: none;
}

.dropdown-menu li .glyphicons {
    margin-right: 10px;
}

a.dropdown-toggle:hover {
    text-decoration: none;
}

.dropdown-toggle:has(.glyphicons-more)::after,
.dropdown-toggle:has(.glyphicons-stethoscope)::after {
    display: none;
}

.conext-dropdown-menu[data-popper-placement] {
    transform: none !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

*[data-tooltip] {
    cursor: default !important;
}

.pica-glyph-color[data-tooltip] {
    cursor: pointer !important;
}

/* Underline tooltip elements */
span[data-tooltip]:not(.pica-glyph),
a[data-tooltip].pica-name {
    border-bottom: 1px dotted var(--border_color);
}

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

/* Fake input error */
.has-error .pica-button-checkbox button {
    border-color: #a94442;
    background-color: #f2dede;
    color: #a94442;
    background-image: none;
}

.pica-field-error {
    display: block;
    color: #a94442;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 10px;
    padding-left: 2px;
}

.input-group.has-error .form-control {
    border-color: #a94442;
}

.pica-placeholder-error::placeholder {
    color: #a94442;
    opacity: 1;
}

.pica-placeholder-error::-webkit-input-placeholder {
    color: #a94442;
}

.pica-placeholder-error::-moz-placeholder {
    color: #a94442;
}

.pica-placeholder-error:-ms-input-placeholder {
    color: #a94442;
}

.input-group.has-error .input-group-addon,
.input-group.has-error .input-group-text,
.input-group .is-invalid ~ .input-group-text {
    border-color: #a94442;
    color: #a94442;
    background-color: #f2dede;
}

/* Dialog backdrop */
.modal-backdrop + .modal-backdrop {
    opacity : 0;
}

/* Gutter */
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

/* Inputs */
[disabled]:not(.mfa) + span.pica-input-clear,
[disabled] + span.pica-datepicker-reset {
    display: none;
}

[disabled] {
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
}

.input-group-field {
    display: table-cell;
    vertical-align: middle;
    border-radius:4px;
}
.input-group-field .form-control, .input-group-field .form-control {
    border-radius: inherit !important;
}
.input-group-field:not(:first-child):not(:last-child) {
    border-radius:0;
}
.input-group-field:not(:first-child):not(:last-child) .form-control {
    border-left-width: 0;
    border-right-width: 0;
}
.input-group-field:last-child {
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}

.container-width-auto {
    width: auto !important;
}

/* Onlyoffice */
#pica_embedded {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/* Colors */
@media (min-width:1200px) and (max-width:1450px) {
    .hidden-lg-custom {
        display:none!important
    }
}
a:not([href]), a:link, a:visited, a:active, a:hover,
a.pica-action-link, a.pica-action-link:active, a.pica-action-link:visited {
    color: var(--link_color);
}

.btn-primary, .btn-success {
    background-image: linear-gradient(to bottom, var(--chart1) 0, var(--chart1) 100%) !important;
    background-color: var(--chart1) !important;
    color: #ffffff !important;
    border-color: var(--chart1) !important;
    --bs-btn-bg: var(--chart1);
    --bs-btn-hover-bg: var(--chart1);
    --bs-btn-hover-border-color: var(--chart1);
    --bs-btn-active-bg: var(--chart1);
    --bs-btn-active-border-color: var(--chart1);
}

.btn-danger {
    color: #ffffff !important;
}

.btn-primary.disabled, .btn-success.disabled,
.btn-success:hover, .btn-success:focus,
.btn-primary:hover, .btn-primary:focus {
    background-image: none !important;
    background-color: var(--chart1) !important;
    color: #ffffff !important;
    border-color: var(--chart1) !important;
}

li.warning {
    background-color: var(--chart3) !important;
}

/* Highlight WARNING and SEVERE log rows on the logs page only (not the dashboard).
 * HINT: Bootstrap 5 paints table striping as an inset box-shadow overlay
 * (--bs-table-bg-type) on the cells which covers background-color, so it has
 * to be disabled here - otherwise every other row loses its tint */
#logs_table tr.warning > td {
    background-color: var(--chart3) !important;
    --bs-table-bg-type: transparent;
}

#logs_table tr.danger > td {
    background-color: #fde2e1 !important;
    --bs-table-bg-type: transparent;
}
/*************************************
 *            External fileLink      *
 *************************************/

#pica_content.pica_link{
    top: 220px;
    right: unset !important;
    left: unset !important;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
    height: auto;
}
.nav-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    flex: 1 1 100%;
    width: 100%;
}
.nav-container > .cell {
    flex: 0 0 auto;
    width: auto;
}
.nav-container > .cell.logo {
    flex: 0 0 20%;
    width: 20%;
}

.download {
    color: #fff;
    margin: 0 auto;
    font: 1em/1.3em Montserrat, Helvetica, sans-serif;
}

.download a {
    text-decoration: none;
    color: #fff;
    margin: 0 10px;
}

.download .btn {
    border: none;
    padding: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 53px;
    border-radius: 6px;
    color: #fff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0px 1px 1px #333;
}

.download .btn span.icon,
.download .btn span.title {
    display: block;
    position: relative;
    line-height: 50px;
    min-width: 100px;
    padding: 0 15px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.download .btn span.left {
    float: left;
    border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    -webkit-border-radius: 6px 0 0 6px;
}

.download .btn span.right {
    float: right;
    border-radius: 0 6px 6px 0;
    -moz-border-radius: 0 6px 6px 0;
    -webkit-border-radius: 0 6px 6px 0;
}

.download .btn span.icon {
    font-size: 23px;
    background-color: var(--chart1);
    -webkit-box-shadow: 0 3px 0 0 var(--chart1);
    box-shadow: 0 3px 0 0 var(--chart1);
    text-shadow: 0px 1px 1px var(--chart1);
    min-width: 30px;
}

.download .btn span.title {
    -webkit-box-shadow: 0 3px 0 0 var(--chart2);
    box-shadow: 0 3px 0 0 var(--chart2);
    background-color: var(--chart2);
    color: #1a1a1a !important;
    text-shadow: none !important;
}

.download .btn span.slant-left,
.download .btn span.slant-right {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom: 50px solid transparent;
    -webkit-transition: all .15s;
    -transition: all .15s;
    -webkit-transition-property: left, right;
    transition-property: left, right;
}

.download .btn.left span.slant-right {
    left: 0;
    -webkit-box-shadow: -10px 0 0 0 var(--chart3), -10px 3px 0 0 var(--chart3);
    box-shadow: -10px 0 0 0 var(--chart3), -10px 3px 0 0 var(--chart3);
    border-left: 10px solid var(--chart3);
}

.download .btn.right span.slant-right {
    left: 0;
    -webkit-box-shadow: -10px 0 0 0 var(--chart3), -10px 3px 0 0 var(--chart3);
    box-shadow: -10px 0 0 0 var(--chart3), -10px 3px 0 0 var(--chart3);
    border-left: 10px solid var(--chart3);
}

.download .btn.left span.slant-left {
    right: 0;
    -webkit-box-shadow: 10px 0 0 0 var(--chart3), 10px 3px 0 0 var(--chart3);
    box-shadow: 10px 0 0 0 var(--chart3), 10px 3px 0 0 var(--chart3);
    border-right: 10px solid var(--chart3);
}

.download .btn.right span.slant-left {
    right: 0;
    -webkit-box-shadow: 10px 0 0 0 var(--chart3), 10px 3px 0 0 var(--chart3);
    box-shadow: 10px 0 0 0 var(--chart3), 10px 3px 0 0 var(--chart3);
    border-right: 10px solid var(--chart3);
}

.download .btn:active,
.download .btn.active {
    height: 51px;
}

.download .btn:hover {}

.download .btn:hover span.arrow-left {
    right: 10px;
}

.download .btn:hover span.arrow-right {
    left: 10px;
}

.download .btn:hover span.slant-left {
    right: 10px;
}

.download .btn:hover span.slant-right {
    left: 10px;
}

.download .btn-small {
    height: 30px;
    font-size: 12px;
    line-height: 10px;
}

.download a.btn-small span.btn {
    height: 30px;
}

.pica-down-page {
    position: fixed;
    bottom: 20px;
    left: 0px;
    right: 0px;
}

/* No-preview notice on getlink page: left-aligned with the first navbar button (after the 20% logo cell) */
#no_preview_notice {
    margin-left: 20%;
    padding: 10px;
}
/*Upload form checkboxes */
.uploadForm .container {
    display: flex;
    flex-direction: column;
    padding-left: 35px;
    margin-bottom: 12px;
    margin-left: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight:400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.uploadForm .container .pica-button-checkbox{
    margin-left: 0px;
}

.uploadForm .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.pica-dialog-description {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.tooltip-inner {
    max-width: none!important;
    white-space: nowrap !important;
}

/* PFC-3543: opt-in wrapping tooltip for long explanatory text (default tooltips stay nowrap) */
.pica-tooltip-wrap .tooltip-inner {
    max-width: 320px !important;
    white-space: normal !important;
    text-align: left;
}

/* A setting whose real state is still loading: dimmed and not operable, so it never reads as
   a value the user could trust or change. */
.pica-state-unknown {
    opacity: .5;
}

.pica-state-unknown .form-check-input,
.pica-state-unknown .form-check-label {
    cursor: default;
}

#share_table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

/* The permission buttons in the share dialog all share one width and align their
   text to the left, so the column reads as a single list instead of ragged buttons. The class
   keeps this off the other buttons in the same table - the link rows' copy button above all. */
#share_table td.pica-share-permission .btn {
    width: 220px;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#share_table td.pica-share-permission .btn.dropdown-toggle::after {
    float: right;
    margin-top: 0.5em;
}

/* The same for the option dropdowns of the group dialog's lists - "Is member" next to "Is member and
   admin" made for a ragged column. Only the toggles are matched, so no plain button in those tables
   gets stretched along with them. */
#pica_group_dialog .pica-inputlist-table td .btn.dropdown-toggle {
    width: 220px;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pica_group_dialog .pica-inputlist-table td .btn.dropdown-toggle::after {
    float: right;
    margin-top: 0.5em;
}

#files_files_table  td {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* PFS-5306: the name+tags column takes all remaining space - the metadata columns
   (size, modified by, modified at) are capped. thead tr and tbody tr are separate
   fixed-layout tables (.pica-table-scroll), so th AND td need the same widths. */
#files_files_table thead th.pica-sortable-column.pica-vmtable-only-list,
#files_files_table tbody td:nth-child(3) {
    width: 150px; /* Size */
}

#files_files_table thead th#files_th_col4,
#files_files_table tbody td:nth-child(4) {
    width: 210px; /* Modified by / Permissions */
}

/* PFS-5669: accounts overview - the folders/groups previews need more room, valid-till less.
   thead tr and tbody tr are separate fixed-layout tables (.pica-table-scroll), so the width
   classes are set on th AND td (see accounts.vm / accounts.js). */
#accounts_table .pica-col-folders,
#accounts_table .pica-col-groups {
    width: 20%;
}

#accounts_table .pica-col-validtill {
    /* A date is one thing: at 110px "31 Oktober 2024" broke into three lines, and the row grew with
       it. Wide enough for the long month names, and never wrapped. */
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#files_files_table thead th#files_th_col5,
#files_files_table tbody td:nth-child(5) {
    width: 210px; /* Modified at / Members */
}


/*
   custom CSS to make the playlist UI look good  in this context.
*/
#pica_video_dialog .player-container {
    background: #1a1a1a;
    overflow: auto;
    width: 900px;
    margin: 0 0 20px;
}

#pica_video_dialog .video-js {
    float: left;
}

#pica_video_dialog .vjs-playlist{
    float: left;
    width: 300px;
    max-height: 600px;
}

#pica_video_dialog .vjs-playlist.vjs-playlist-horizontal {
    float: none;
    height: 120px;
    width: 600px;
}

#pica_restore_dialog .modal-dialog {
    width: 950px;
}

#pica_download_dialog .modal-dialog {
    width: 900px;
}

#pica_canvas_dialog #board {
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.has-error:focus {
    @include box-shadow(0 0 5px rgba(255, 0, 0, 1));
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(255, 0, 0, 1);
}

.ck-balloon-panel{
    z-index: 999999 !important;
}

.cell {
    padding: 5px;
}

@media (min-width: 900px) {
    .logo {
        display: block;
        width: 20%;
    }
}
@media (max-width: 900px) {
    .logo {
        display: none;
    }
}

/* Getlink page */

#link_settings {
    position: fixed;
    background-color: #fbfbfb;
    color: black;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 60px;
    z-index: 9999;
}

@media (min-width: 768px) {
    #link_settings {
        top: 10px;
        left: 100px;
        bottom: auto;
        right: auto;
    }
}

@media (max-width: 767px) {
    #link_settings {
        top: 10px;
        left: 50%;
        font-size: 30px;
        transform: translateX(-50%);
    }
}

@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
    #link_settings {
        top: 80px;
        left: 50px;
        font-size: 50px;
        transform: translateY(-50%);
    }
}

#pdf-container {
    max-width: 100%;
    max-height: 80vh;
    overflow: auto;
    margin: 0 auto;
    padding: 10px;
}

#pdf-controls {
    margin-top: 20px;
}

#page-num {
    font-size: 18px;
    font-weight: bold;
}

#pdf-viewer {
    display: block;
    margin: 0 auto;
    border: none;
    max-width: 100%;
}

.client-install-card {
    background-color: var(--stripe_color);
    border: 1px solid var(--border_color);
    border-radius: 8px;
}

.client-install-card-icon {
    font-size: 32px;
    color: var(--chart1);
}

.client-install-card .btn-install {
    width: min(100%, 300px);
}

.upgrade-banner {
    background-color: var(--stripe_color);
    border-color: var(--border_color);
    color: var(--light_fg);
}

.client-install-btn {
    background-color: var(--chart1);
    border-color: var(--chart1);
    color: #ffffff !important;
}

.client-install-btn:hover,
.client-install-btn:focus,
.client-install-btn:active {
    background-color: var(--chart1);
    border-color: var(--chart1);
    color: #ffffff !important;
    text-decoration: none;
}


#text-container {
    margin-top: 20px;
    padding: 20px;
}

#text-viewer {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    max-height: 70vh;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

#markdown-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    padding: 1.5rem;
    max-height: 80vh;
    overflow: auto;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

#markdown-container h1,
#markdown-container h2,
#markdown-container h3,
#markdown-container h4,
#markdown-container h5,
#markdown-container h6 {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-weight: 600;
}

#markdown-container h1 { font-size: 2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
#markdown-container h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }

#markdown-container code {
    background-color: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 85%;
}

#markdown-container pre {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
}

#markdown-container pre code {
    background: none;
    padding: 0;
    font-size: 85%;
}

#markdown-container blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 1em;
    color: #6a737d;
    margin: 0.5em 0;
}

#markdown-container table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

#markdown-container table th,
#markdown-container table td {
    border: 1px solid #dfe2e5;
    padding: 6px 13px;
}

#markdown-container table th {
    background-color: #f6f8fa;
    font-weight: 600;
}

#markdown-container table tr:nth-child(2n) {
    background-color: #f6f8fa;
}

#markdown-container img {
    max-width: 100%;
}

#markdown-container hr {
    border: none;
    border-top: 1px solid #e1e4e8;
    margin: 1.5em 0;
}

#profile_2fa_dialog .row {
    margin-left: 0;
    margin-right: 0;
}

.profile_storage_bar {
    position: absolute;
    top: 25px;
    right: 140px;
    left: 83%;
    height: 36px;
    line-height: 36px;
}

@media (max-width: 1200px) {
    .profile_storage_bar {
        display: none;
    }
}

.profile_storage_bar.no-storage-available {
    display: none !important;
}

/* Account expiry / upgrade banner */

.expiry-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    border-radius: 0;
    padding: 15px 20px;
}

/* Server license banner (admin only) - Same style as expiry-banner */

.license-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 8px 20px !important;
}

.license-banner-actions {
    margin-top: 6px;
}

.license-banner-actions .compare-editions-link {
    margin-left: 12px;
}

.license-banner.alert-success {
    background-color: #5cb85c !important;
    color: #ffffff !important;
    border-color: #4cae4c !important;
}

.compare-editions-link {
    color: #0056b3;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 5px;
}

.compare-editions-link:hover {
    color: #003d82;
    text-decoration: underline;
}

.license-banner.alert-success .compare-editions-link,
.license-banner.alert-success .compare-editions-link:hover {
    color: #ffffff;
}

/* License comparison modal */

#licenseComparisonModal .modal-dialog {
    max-width: 800px;
}

/* Responsive: Prevent modal from being cut off on small screens */
@media (max-width: 767px) {
    #licenseComparisonModal .modal-dialog {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    #licenseComparisonModal .modal-body {
        padding: 15px;
    }
}

#licenseComparisonModal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

#licenseComparisonModal .modal-title {
    font-weight: 600;
    color: #333;
}

.license-comparison-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.license-comparison-list li {
    padding: 12px 15px 12px 40px;
    margin-bottom: 10px;
    border-radius: 4px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
}

.license-comparison-list li:before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-limited {
    background-color: var(--chart3);
    border-left: 4px solid var(--chart1);
}

.comparison-limited:before {
    content: '✗';
    color: var(--chart1);
}

.comparison-unlimited {
    background-color: var(--chart4);
    border-left: 4px solid var(--chart2);
}

.comparison-unlimited:before {
    content: '✓';
    color: var(--chart2);
}

#licenseComparisonModal .modal-footer {
    justify-content: space-between;
    padding: 15px 20px;
}

#licenseComparisonModal .modal-body h5 {
    font-weight: 600;
    margin-bottom: 20px;
}

#licenseComparisonModal .edition-heading-ce {
    color: var(--chart1);
}

#licenseComparisonModal .edition-heading-ee {
    color: var(--chart2);
}

.license-usage-section {
    padding: 0 15px;
    margin-bottom: 20px;
}

.license-usage-section h5 {
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.license-usage-section .usage-count {
    font-size: 18px;
    color: #333;
}

.license-usage-progress {
    height: 30px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 5px;
}

.license-usage-progress .progress-bar {
    line-height: 30px;
}

.license-usage-progress .progress-bar.bg-success {
    background-color: #5cb85c !important;
}

.expiry-countdown-boxes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 10px 0;
}

.expiry-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.expiry-box span {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
}

.expiry-box small {
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
}

.expiry-sep {
    font-size: 28px;
    font-weight: 700;
    color: #999;
    padding: 0 2px;
    align-self: flex-start;
    margin-top: 4px;
}

.custom-infinity-icon {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #555;
    display: inline-block;
    margin-left: 2px;
}

.pica-unlimited-active {
    background-color: #f5f5f5 !important;
    color: #999 !important;
}

.pica-unlimited-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.pica-unlimited-overlay .custom-infinity-icon {
    font-size: 22px;
    color: #555;
    margin-left: 0;
}

.pica-unlimited-toggle {
    background-color: #f8f9fa;
    border-left: 0;
}

.pica-unlimited-toggle:hover {
    background-color: #e2e6ea;
}

.pica-unlimited-toggle .custom-infinity-icon {
    font-size: 18px;
    margin-left: 0;
}

.folder-name-wrapper {
    position: relative;
    /* Flex row: the file name keeps its size, the tag chips use the remaining
       width up to the next column and get clipped there (PFS-5306) */
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
    padding-right: 25px;
    vertical-align: middle;
}

.folder-name-wrapper > a {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-warning-icon {
    top: 0;
    padding-right: 5px;
    font-size: 1.2em;
}

.file-editing-icon {
    font-size: 1.4em;
    margin-right: 0.5em;
}

.file-locked-icon {
    font-size: 1.4em;
    margin-right: 0.5em;
}

/* Tag chips next to the file name. align-items/vertical-align baseline keeps the
   chip text on exactly the same text baseline as the file name; single row that
   uses the free width up to the next column and clips there (PFS-5306). */
.pica-tag-chips {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    /* 15px = inline editor offset (8px) + its border (1px) + padding (6px): the first
       chip keeps its exact position when the inline editor opens over it */
    margin-left: 15px;
    align-items: baseline;
    vertical-align: baseline;
    min-width: 0;
    overflow: hidden;
    flex: 0 1 auto;
}

.pica-tag-chips .badge.pica-tag-chip,
.pica-tag-chips .badge.pica-tag-add {
    flex-shrink: 0;
}

/* Jira-like label look: light border, subtle background, regular text color so the
   tag stays as readable as the file name. .badge.pica-tag-chip out-specifies the
   legacy ".badge { display: inline }" and bootstrap defaults. */
.badge.pica-tag-chip {
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 6px;
    background-color: transparent;
    color: inherit;
    border: 1px solid var(--border_color, #D7D7D7);
    border-radius: 3px;
}

.badge.pica-tag-chip:hover,
.badge.pica-tag-chip:focus {
    background-color: #F1F3F5;
}

/* Active/selected tag: same look as an unselected one, just a dark border -
   no loud fill color */
.badge.pica-tag-chip.active {
    background-color: transparent;
    border-color: #343a40;
    color: inherit;
}

.badge.pica-tag-chip-more {
    cursor: default;
    background-color: transparent;
    border-color: transparent;
    color: #6c757d;
}

/* Large, readable tooltip for shortened tags (customClass on the bootstrap tooltip).
   The !important beats the global .tooltip-inner nowrap/max-width rule: long tags and
   the full list behind the "+N" chip wrap instead of running off the screen edge. */
.pica-tag-tooltip .tooltip-inner {
    font-size: 13px;
    line-height: 1.4;
    max-width: min(420px, calc(100vw - 24px)) !important;
    padding: 6px 10px;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Active tag filter chips shown inside the search bar (Jira-like tokens).
   Font size and margin-top keep the token text exactly on the breadcrumb
   text line (a.pica-crumb: margin-top 8px, 14px font). */
.pica-tag-filter-chips {
    float: left;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 2px 0 6px;
    max-width: 40%;
}

.pica-tag-filter-chips .pica-tag-chip {
    font-size: 14px;
    line-height: 18px;
}

.pica-tag-filter-clear {
    cursor: pointer;
}

.pica-tag-filter-x {
    margin-left: 6px;
    font-weight: 700;
}

/* PFS-5653: search filters - the inline completion behind the search input, and the filter dialog the
   funnel icon opens. Styled here rather than from JS so branding and dark mode can override it. */
.pica-ac-ghost {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    white-space: pre;
    background: transparent;
    z-index: 2;
}

.pica-ac-ghost .pica-ac-typed {
    color: transparent;
}

.pica-ac-ghost .pica-ac-rem {
    color: #9aa0a6;
    opacity: .85;
}

/* PFS-5653: the chips keep to one line inside their share of the bar; what does not fit is counted on the
   "+N" chip, which opens the filter dialog where every active filter can be seen and removed. */
#pica_op_filter_chips {
    flex-wrap: nowrap;
    overflow: hidden;
}

.badge.pica-tag-chip-more.pica-filter-more {
    cursor: pointer;
}

.pica-filter-dialog {
    position: absolute;
    z-index: 1030;
    display: none;
    grid-template-columns: 152px minmax(184px, 1fr);
    min-width: 376px;
    max-width: 496px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    overflow: hidden;
}

.pica-filter-dialog.open {
    display: grid;
}

/* A fixed height, not a maximum: the dialog must not grow and shrink as sections with more or fewer
   values are opened - it hangs off the search icon, and a jumping box is hard to aim at. */
.pica-filter-col {
    padding: 8px 0;
    height: 320px;
    overflow-y: auto;
}

.pica-filter-col + .pica-filter-col {
    border-left: 1px solid #eee;
}

.pica-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 12px 8px;
    font-weight: 700;
}

.pica-filter-section,
.pica-filter-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.pica-filter-section:hover,
.pica-filter-value:hover,
.pica-filter-section:focus,
.pica-filter-value:focus {
    background: #f2f6fa;
}

.pica-filter-section.active {
    background: #e8f0f8;
}

.pica-filter-input {
    display: flex;
    gap: 6px;
    padding: 6px 12px 10px;
}

.pica-filter-input input {
    flex: 1 1 auto;
    min-width: 0;
}

/* PFS-5653: the field of a filter carries its own "x" to drop that filter. */
.pica-filter-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.pica-filter-field input {
    width: 100%;
    padding-right: 26px;
}

.pica-filter-clear {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #888;
    font-size: 16px;
    line-height: 1;
}

.pica-filter-clear:hover,
.pica-filter-clear:focus {
    color: #333;
}

/* The optional time of a date filter: narrow, it holds nothing but hh:mm. */
.pica-filter-input .pica-filter-time {
    flex: 0 0 auto;
    width: 108px;
}

/* Next to a date or time field rather than inside it - see the module. */
.pica-filter-clear-outside {
    position: static;
    flex: 0 0 auto;
    height: auto;
    font-size: 18px;
}

.pica-filter-close {
    padding: 0 2px;
    color: #888;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}

.pica-filter-close:hover,
.pica-filter-close:focus {
    color: #333;
    text-decoration: none;
}

.pica-filter-syntax {
    padding: 4px 12px 10px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 12px;
}

.pica-filter-syntax code {
    background: #f5f5f5;
    padding: 1px 4px;
    border-radius: 3px;
}

.pica-tageditor-wrapper {
    position: relative;
}

/* .form-control needed in the selector: the legacy ".form-control { height: 34px }"
   rule comes later in this file and would otherwise pin the editor height (chips
   then overflow the dialog). */
.pica-tageditor.form-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px; /* same chip spacing as .pica-tag-chips in the files table */
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    height: auto;
    padding: 6px 10px;
    cursor: text;
}

.pica-tageditor-input {
    border: none;
    outline: none;
    box-shadow: none;
    flex: 1 1 120px;
    min-width: 120px;
    padding: 2px;
    background: transparent;
}

/* Let the chips participate directly in the .pica-tageditor flex flow so the
   4px gap applies between chips too (the wrapper span itself has no layout). */
.pica-tageditor-chips {
    display: contents;
}

/* Overlong tags: the label span ellipsizes, the remove "x" never gets clipped.
   Scoped selector out-specifies the legacy ".badge { display: inline }" rule. */
.pica-tageditor .pica-tageditor-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

.pica-tageditor .pica-tageditor-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pica-tageditor-chip-x {
    flex-shrink: 0;
    margin-left: 4px;
    cursor: pointer;
    font-weight: 700;
    opacity: 0.7;
}

.pica-tageditor-chip-x:hover {
    opacity: 1;
}

.pica-tageditor-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1060;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
}

.pica-tageditor-suggestion {
    padding: 4px 12px;
    cursor: pointer;
    /* Compact rows - must not inherit the 60px table line-height */
    line-height: 1.4;
    font-size: 13px;
}

.pica-tageditor-suggestion.active {
    background: #F1F3F5;
}

/* Inline tag editor in the files table (Jira-like editing in place): a fixed
   overlay floating over the row, so the row never changes height and nothing
   jumps; positioned via JS next to the file name. */
.pica-tageditor-wrapper.pica-tageditor-inline {
    position: fixed;
    z-index: 1055;
    min-width: 260px;
    /* Width is computed by JS: all chips on one line if possible, up to the viewport */
}

.pica-tageditor-inline .pica-tageditor.form-control {
    min-height: 30px;
    padding: 2px 6px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pica-tageditor-inline .pica-tageditor-input {
    flex: 1 1 80px;
    min-width: 80px;
    /* Same size as the file name - the input text sits on the name's line */
    font-size: 14px;
}

/* Subtle tag-icon affordance behind the tags; only shown while hovering the row */
.badge.pica-tag-add {
    /* Hidden but still taking up space: the chip fitting runs while the row is not
       hovered, so the icon must be part of the width from the start - otherwise it is
       pushed out of the name column as soon as it appears on hover. */
    visibility: hidden;
    display: inline-block;
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 6px;
    background-color: transparent;
    color: #6c757d;
    border: 1px dashed var(--border_color, #D7D7D7);
    border-radius: 3px;
}

.badge.pica-tag-add .pica-glyph {
    font-size: 11px;
    line-height: 16px;
}

tr:hover .badge.pica-tag-add {
    visibility: visible;
}

.pica-tageditor-suggestion:hover {
    background: #f1f3f5;
}

.pricing-wrapper {
    max-width: 1000px;
    margin: 0px auto;
    padding: 0px 10px 10px 10px;
    text-align: center;
}

/* Toggle container with radio slider approach */
.toggle-container {
    position: relative;
    width: 300px;
    height: 50px;
    margin: 0 auto 2rem auto;
    background: var(--chart1);
    border-radius: 9999px;
}
.toggle-input {
    position: absolute;
    width: 50%;
    height: 50px;
    top: 0;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
}
#monthlyRadio {
    left: 0;
}
#yearlyRadio {
    right: 0;
}
.slider-pill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    background: var(--chart2); /* highlight color */
    border-radius: 9999px;
    transition: all 0.4s ease;
    z-index: 1;
}
#yearlyRadio:checked ~ .slider-pill {
    left: 50%;
}
.toggle-label {
    position: absolute;
    width: 50%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    user-select: none;
    z-index: 3;
    cursor: pointer;
}
.toggle-label-left {
    left: 0;
}
.toggle-label-right {
    right: 0;
}

/* Plans layout */
.plans-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    padding: 0 15px;
    margin: 0 auto 30px;
}

.plan-card {
    background: var(--light_bg);
    border: 1px solid var(--border_color);
    flex: 0 1 300px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    padding: 15px;
    transition: box-shadow 0.2s ease;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

.plan-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.plan-flexible-content {
    flex: 1;
    min-height: 0;
}

.plan-price-section {
    margin-top: auto;
    padding-top: 10px;
}
.plan-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.plan-title {
    font-size: 20px;
    color: var(--link_color);
    font-weight: 600;
    margin-bottom: 5px;
}
.plan-price {
    font-size: 20px;
    font-weight: bold;
    color: var(--chart1);
    margin-bottom: 3px;
}
.plan-duration {
    font-size: 12px;
    color: var(--slash_color);
    margin-bottom: 8px;
}
.plan-desc {
    color: var(--placeholder_color);
    font-size: 15px;
    margin: 8px auto 10px;
    max-width: 90%;
    text-align: left;
}

.plan-image {
    text-align: center;
    margin-bottom: 15px;
    overflow: hidden
}

.plan-product-image {
    max-width: 100%;
    max-height: 120px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* New: Plan features bulleted list */
.plan-features {
    text-align: left;
    margin: 0 auto 15px;
    max-width: 85%;
    color: var(--placeholder_color);
    font-size: 13px;
}
.plan-features ul {
    list-style: disc;
    padding-left: 13px;
}
.plan-features li {
    margin-bottom: 3px;
}

.plan-cta , .current-badge {
    display: inline-block;
    margin-top: auto;
    padding: 8px 13px;
    background-color: var(--chart1);
    color: #ffffff !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}
.current-badge {
    background-color: var(--chart2);
}

.plan-cta:hover {
    background-color: var(--chart2);
    color: #000000;
}

.hidden {
    display: none !important;
}

.disabled-badge {
    background: #ccc;
    color: #666;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    cursor: not-allowed;
}

.plan-card-highlighted {
    border: 2px solid var(--chart2) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--chart2) 30%, transparent) !important;
    filter: saturate(0.85);
}

.plan-card-highlighted:hover {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chart2) 40%, transparent) !important;
}

/* Checkout loading overlay - shown while waiting for Stripe webhook */
.checkout-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
.checkout-loading-overlay.hidden {
    display: none;
}
.checkout-loading-content {
    text-align: center;
}
.checkout-loading-spinner {
    font-size: 32px;
    color: var(--chart2);
}
.checkout-loading-text {
    margin-top: 16px;
    font-size: 16px;
    color: var(--light_fg);
}

.reseller-notice-box {
    background: #f3f4f6;
    border-left: 5px solid var(--chart1);
    padding: 16px;
    margin: 20px 0;
    border-radius: 6px;
}

.reseller-upgrade-info {
    font-size: 16px;
    color: var(--link_color);
    margin-bottom: 8px;
}

.reseller-contact-card {
    background: var(--light_bg);
    border: 1px solid var(--border_color);
    padding: 12px;
    border-radius: 4px;
    margin-top: 10px;
}

.reseller-info-row {
    display: flex;
    margin-bottom: 6px;
}

.reseller-info-row .label {
    width: 150px;
    font-weight: 600;
    color: #333;
    text-align: left;
}

.reseller-info-row .value a {
    color: var(--link_color);
    text-decoration: none;
}

.bg-white {
    background: #fff;
    border: 1px solid var(--border_color);
}

.pica-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.pica-chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border_color);
    background-color: var(--light_bg);
    flex-shrink: 0;
}

.pica-chat-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pica-chat-messages-container {
    flex: 1;
    overflow-y: auto;
    background: var(--light_bg);
}

.pica-chat-messages {
    padding: 0 20px 20px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.pica-chat-welcome-message {
    text-align: center;
    padding: 0px 20px 20px 20px;
}

.pica-chat-welcome-message .pica-glyph {
    font-size: 48px;
    color: var(--chart1);
    display: block;
    margin-bottom: 20px;
}

.pica-chat-welcome-message p {
    font-size: 16px;
    margin: 0;
}

.pica-chat-message {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    animation: fadeIn 0.3s ease-in;
    align-items: flex-end;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pica-chat-message-user {
    flex-direction: row-reverse;
}
.pica-chat-message-content {
    max-width: 70%;
}

.pica-chat-message-user .pica-chat-message-content {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.pica-chat-message-body {
    background-color: var(--background_color);
    padding: 14px 18px;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.5;
    font-size: 14px;
}

.pica-chat-message-user .pica-chat-message-body {
    background: var(--chart1);
    color: var(--dark_fg);
    border-radius: 18px;
    display: inline-block;
    max-width: 100%;
}

.pica-chat-message-wingman .pica-chat-message-body {
    background-color: transparent;
    color: var(--light_fg);
    border: none;
    box-shadow: none;
    padding: 0;
}

.pica-chat-input-container {
    padding: 10px 40px 40px 40px;
    background-color: var(--background_color);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.pica-chat-form {
    max-width: 900px;
    margin: 0 auto;
}

.pica-chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--light_bg);
    border: 2px solid var(--border_color);
    border-radius: 25px;
    padding: 4px 4px 4px 12px;
    transition: all 0.2s ease;
    min-height: 50px;
}

.pica-chat-input {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    font-family: inherit;
}

.pica-chat-input:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 8px rgba(102, 175, 233, .6);
}

.pica-chat-input::placeholder {
    color: var(--placeholder_color);
}

.pica-chat-send-btn {
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    background: #1a1a1a !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: none !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.pica-chat-send-btn:hover {
    background: #2a2a2a !important;
}

.pica-chat-send-btn:active {
    transform: translateY(0);
}

.pica-chat-send-btn-icon {
    font-size: 16px;
    color: #ffffff !important;
    margin: 0px;
}

.pica-chat-typing-indicator {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: flex-end;
}

.pica-chat-typing-indicator .pica-chat-message-body {
    padding: 16px 20px;
}

.pica-chat-typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pica-chat-typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--placeholder_color);
    animation: typingDot 1.4s infinite;
}

.pica-chat-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.pica-chat-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .pica-chat-message-content {
        max-width: 85%;
    }

    .pica-chat-messages {
        padding: 15px 10px;
    }

    .pica-chat-avatar {
        width: 32px;
        height: 32px;
    }

    .pica-chat-avatar .pica-glyph {
        font-size: 14px;
    }

    body:has(.pica-chat-container) {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    .pica-chat-input-container {
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background-color: var(--background_color);
        box-shadow: none;
    }

    .pica-chat-container {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .pica-chat-messages-container {
        flex: 1;
        padding-bottom: 100px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    @supports (-webkit-touch-callout: none) {
        body:has(.pica-chat-container) {
            height: -webkit-fill-available;
        }

        .pica-chat-container {
            height: -webkit-fill-available;
        }
    }

    .pica-chat-input-wrapper {
        gap: 8px;
        padding: 6px 8px;
    }

    .pica-chat-input {
        font-size: 16px;
        padding: 6px 8px;
    }

    .pica-chat-send-btn {
        width: 36px;
        height: 36px;
    }

    .pica-chat-send-btn .pica-glyph {
        font-size: 18px;
    }

    .pica-chat-header {
        padding: 12px 15px;
    }

    .pica-chat-message {
        margin-bottom: 16px;
    }

    #pica_footer {
        position: relative;
        z-index: 1;
    }

    body:has(.pica-chat-container) #pica_footer {
        display: none;
    }
}

/*************************************
 *     Registration Address Fields   *
 *************************************/
.register-inline-row {
    display: flex;
    gap: 10px;
}

.register-inline-row .input-group {
    flex: 1;
}

.register-inline-row .input-group.postal-code {
    flex: 1;
}

.register-inline-row .input-group.location {
    flex: 1;
}

.address-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.address-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.address-suggestion-item:hover,
.address-suggestion-item.selected {
    background-color: #f5f5f5;
}

@media (max-width: 768px) {
    .register-inline-row {
        flex-direction: column;
        gap: 0;
    }

    .register-inline-row .input-group {
        margin-bottom: 15px;
    }

}

#pica_accounts_filter,
#pica_organizations_filter,
#pica_folders_filter,
#pica_groups_filter,
#pica_logs_filter {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

#pica_accounts_filter .btn,
#pica_organizations_filter .btn,
#pica_folders_filter .btn,
#pica_groups_filter .btn,
#pica_logs_filter .btn {
    height: 36px;
    border: 1px solid var(--border_color);
    border-radius: 4px;
    background: #fff;
    padding: 6px 12px;
    font-size: 14px;
    min-width: 12em;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#pica_accounts_filter .dropdown-menu,
#pica_organizations_filter .dropdown-menu,
#pica_folders_filter .dropdown-menu,
#pica_groups_filter .dropdown-menu,
#pica_logs_filter .dropdown-menu {
    min-width: 130px;
}

#pica_action_search.pica-has-filter-left {
    left: calc(10px + 13em);
}

#pica_action_search.pica-has-filter-left #pica_accounts_filter,
#pica_action_search.pica-has-filter-left #pica_organizations_filter,
#pica_action_search.pica-has-filter-left #pica_folders_filter,
#pica_action_search.pica-has-filter-left #pica_groups_filter,
#pica_action_search.pica-has-filter-left #pica_logs_filter {
    left: -13em;
}@media (max-width: 768px) {
    
    #pica_action_search,
    #pica_action_search.pica-has-filter-left {
        position: absolute !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        left: 5px !important;
        right: 55px !important;
        top: 25px !important;
        height: 36px !important;
        width: auto !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    #pica_action_search_input {
        flex: 1 1 auto !important;
        min-width: 50px !important;
        width: auto !important;
        height: 36px !important;
        padding: 5px 10px !important;
        border: 1px solid var(--border_color) !important;
        border-right: none !important;
        border-radius: 4px 0 0 4px !important;
        background: #fff !important;
        font-size: 14px !important;
        order: 1 !important;
        outline: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    #pica_action_search_input:focus {
        border-color: #66afe9 !important;
        box-shadow: 0 0 8px rgba(102, 175, 233, .6) !important;
    }
    #pica_action_search_button {
        position: static !important;
        flex: 0 0 auto !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 2 !important;
        background: #fff !important;
        border: 1px solid var(--border_color) !important;
        border-left: none !important;
        border-radius: 0 4px 4px 0 !important;
        height: 36px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    #pica_action_search_button .pica-glyph {
        font-size: 16px !important;
        color: var(--link_color) !important;
    }
    #pica_action_search.pica-has-filter-left #pica_accounts_filter,
    #pica_accounts_filter,
    #pica_action_search.pica-has-filter-left #pica_organizations_filter,
    #pica_organizations_filter,
    #pica_action_search.pica-has-filter-left #pica_folders_filter,
    #pica_folders_filter,
    #pica_action_search.pica-has-filter-left #pica_groups_filter,
    #pica_groups_filter,
    #pica_action_search.pica-has-filter-left #pica_logs_filter,
    #pica_logs_filter {
        position: static !important;
        flex: 0 0 auto !important;
        order: 0 !important;
        display: flex !important;
        height: 36px !important;
        margin: 0 8px 0 0 !important;
        border: none !important;
        border-radius: 4px !important;
        flex-shrink: 0;
    }

    #pica_accounts_filter .btn,
    #pica_organizations_filter .btn,
    #pica_folders_filter .btn,
    #pica_groups_filter .btn,
    #pica_logs_filter .btn {
        min-width: auto !important;
        width: auto !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        height: 36px !important;
        line-height: 22px !important;
        border: 1px solid var(--border_color) !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    #pica_accounts_filter .dropdown-menu,
    #pica_organizations_filter .dropdown-menu,
    #pica_folders_filter .dropdown-menu,
    #pica_groups_filter .dropdown-menu,
    #pica_logs_filter .dropdown-menu {
        width: auto;
        min-width: 120px;
    }
}

/*************************************
 * Bootstrap 5 Compatibility Layer   *
 *************************************/

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

@media (min-width: 576px) {
    td.d-sm-block, th.d-sm-block,
    td.d-sm-table-cell, th.d-sm-table-cell { display: table-cell !important; }
}
@media (min-width: 768px) {
    td.d-md-block, th.d-md-block,
    td.d-md-table-cell, th.d-md-table-cell { display: table-cell !important; }
}
@media (min-width: 992px) {
    td.d-lg-block, th.d-lg-block,
    td.d-lg-table-cell, th.d-lg-table-cell { display: table-cell !important; }
}
@media (min-width: 1200px) {
    td.d-xl-block, th.d-xl-block,
    td.d-xl-table-cell, th.d-xl-table-cell { display: table-cell !important; }
}

.dropdown-menu .divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
}


.media {
    display: flex;
    align-items: flex-start;
}
.media-body {
    flex: 1;
}
.media-left,
.media-right {
    flex-shrink: 0;
}
.media-left {
    padding-right: 10px;
}
.media-right {
    padding-left: 10px;
}
.media-middle {
    align-self: center;
}
.media-heading {
    margin-top: 0;
    margin-bottom: 5px;
}


.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
.label-default { background-color: #666; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; color: #212529; }
.label-info    { background-color: #5bc0de; color: #212529; }
.label-warning { background-color: #f0ad4e; color: #212529; }
.label-danger  { background-color: #c9302c; }

.popover {
    border-radius: 6px;
}
.popover-header {
    background-color: #f7f7f7;
    padding: 8px 14px;
    font-size: 14px;
    margin: 0;
    border-radius: 5px 5px 0 0;
}
.popover-body {
    color: #333;
    padding: 9px 14px;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}

.text-right {
    text-align: right !important;
}
.text-left {
    text-align: left !important;
}

.text-info {
    color: #31708f !important;
}
.text-success {
    color: #3c763d !important;
}
.text-warning {
    color: #8a6d3b !important;
}
.text-danger {
    color: #a94442 !important;
}
.text-primary {
    color: #337ab7 !important;
}
.text-muted {
    color: #777 !important;
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.hidden {
    display: none !important;
}

.btn.btn-block {
    display: block;
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
}

.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
}

.text-justify {
    text-align: justify !important;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

/* ============================================================
   BS3 VISUAL PARITY OVERRIDES
   Override BS5 defaults to match BS3 look & feel exactly.
   ============================================================ */

/* --- Typography --- */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

/* --- Links --- */
a {
    color: #337ab7;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
h1, .h1 { font-size: 36px; margin-top: 20px; margin-bottom: 10px; }
h2, .h2 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; }
h3, .h3 { font-size: 24px; margin-top: 20px; margin-bottom: 10px; }
h4, .h4 { font-size: 18px; margin-top: 10px; margin-bottom: 10px; }
h5, .h5 { font-size: 14px; margin-top: 10px; margin-bottom: 10px; }
h6, .h6 { font-size: 12px; margin-top: 10px; margin-bottom: 10px; }

/* --- Paragraphs --- */
p {
    margin: 0 0 10px;
}

/* --- Form Controls --- */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
}
.form-control::placeholder {
    color: #999;
}
textarea.form-control {
    height: auto;
}
select.form-control {
    height: 34px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* --- Input Groups (BS3 style) --- */
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group > .ck-editor {
    margin-left: 0 !important;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
    display: table-cell;
}
.input-group-addon,
.input-group-text {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-addon:first-child,
.input-group-text:first-child {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-addon:last-child,
.input-group-text:last-child {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group .form-control:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .form-control:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}
/* Remove left border on addons after form-control or after another addon (prevent double borders / gap) */
.input-group .form-control + .input-group-addon,
.input-group .form-control + .input-group-text,
.input-group .input-group-addon + .input-group-addon,
.input-group .input-group-text + .input-group-text {
    border-left: 0;
}
/* Middle addons (not first, not last) have no border-radius */
.input-group-addon:not(:first-child):not(:last-child),
.input-group-text:not(:first-child):not(:last-child) {
    border-radius: 0;
}
/* Native color input swatch (replaces bootstrap-colorpicker) */
.pica-color-addon {
    padding: 4px 6px;
}
.pica-color-input {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 2px;
    cursor: pointer;
    background: none;
}
.pica-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.pica-color-input::-webkit-color-swatch { border: none; border-radius: 1px; }
.pica-color-input::-moz-color-swatch { border: none; border-radius: 1px; }

/* BS3 .input-group-btn — wraps buttons inside an input group (table layout) */
.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    display: table-cell;
    width: 1%;
    vertical-align: middle;
}
.input-group-btn > .btn {
    position: relative;
    font-size: 14px;
}
.input-group-btn:last-child > .btn {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-btn:first-child > .btn {
    margin-right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Members tab (group dialog): flex input group so the filter dropdown,
   icon and buttons all stretch to the same height as the input field */
#pica_group_accounts .pica-taginput.input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}
#pica_group_accounts .pica-taginput .pica-taginput-div {
    flex: 1 1 auto;
}
#pica_group_accounts .pica-taginput .input-group-text {
    display: flex;
    align-items: center;
    /* the global ".input-group-text { width: 1% }" squeezes the icon in flex layout */
    width: auto;
    flex-shrink: 0;
}
#pica_group_accounts .pica-taginput .input-group-btn {
    display: flex;
    align-items: stretch;
    width: auto;
}
/* Fixed width so the button doesn't resize with the selected label */
#pica_group_accounts .pica-members-filter .dropdown-toggle {
    min-width: 7em;
}
/* Group editor: narrower than the default modal-lg (800px) since the
   subgroups tab moved into the members tab */
#pica_group_dialog .modal-dialog {
    max-width: 700px;
}
/* The group name is the dialog title - truncate long names */
#pica_group_dialog .pica-dialog-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Tighter gap between the dialog header and the nav tabs */
#pica_group_dialog #pica_group_nav {
    margin-top: 0;
}
/* Keep the whole dialog within the viewport when lists get long -
   only the list scrolls, never the page (no double scrollbar) */
#pica_group_dialog .pica-inputlist-scroller {
    max-height: min(45vh, calc(100vh - 360px));
}
/* PFS-5306/PFC-3613: same for the sharing dialog, but measured instead of guessed: a folder with a
   hundred groups made it 910px tall in a 932px window, which pushed its footer - the Close button -
   below the edge. The height now comes from the viewport, and the member list takes whatever is left
   over next to the invite row, the tabs and the footer, so nothing is cut off at any window size. */
#pica_share_dialog .modal-content {
    max-height: calc(100vh - 3.5rem);
}

#pica_share_dialog .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* The tab strip sits between the dialog's description and the invite field, where the generic
   20px above and below only stretch the dialog. The line goes as well - the open tab already stands
   out and the content does the separating - and 1px below it takes back the -1px every nav tab is
   pulled down by, which without the line would let the tab bleed into the content. */
#pica_share_nav.pica-space {
    margin-top: 6px;
    margin-bottom: 1px;
    border-bottom: none;
}

#pica_share_dialog .pica-share-tab {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* The invite row sits right on top of the member list, so the 15px a form-group brings only pull
   the two apart for no reason - the list's first row is separation enough. */
#share_taginput.form-group {
    margin-bottom: 0;
}

#pica_share_dialog .pica-inputlist-scroller {
    flex: 1 1 auto;
    min-height: 6rem;
    max-height: none;
}

/* An open tab whose content is a single message has nothing to open towards, so the strip draws its
   line again: it runs the whole width and stops under the open tab, which is what makes that tab read
   as the selected one. */
#pica_share_nav.pica-nav-tabs-closed {
    border-bottom: 1px solid #ddd;
}

/* With no request to process the message stands in the middle of the tab - it is the only thing
   there, so it takes the room the list would have had. */
#share_join_requests_empty {
    flex: 1 1 auto;
    min-height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* A join request is processed by clicking anywhere in its row, not just the button. */
#share_join_requests_table tbody tr {
    cursor: pointer;
}

/* Clickable table cells that open the edit dialog (underline like name links) */
.pica-cell-link {
    cursor: pointer;
}
.pica-cell-link:hover {
    text-decoration: underline;
}
/* Inline group icons in the members column match the main icon color */
.pica-cell-link .glyphicons {
    color: var(--link_color);
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-primary {
    color: #fff;
    background-color: var(--chart1);
    border-color: var(--chart1);
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-link {
    font-weight: 400;
    color: #337ab7;
    border-radius: 0;
}
.btn-link:hover {
    color: #23527c;
    text-decoration: underline;
    background-color: transparent;
}
.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn.btn-secondary {
    color: #333;
    background-color: #fff;
    background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
    border-color: #ccc;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active {
    color: #333;
    background-color: #e0e0e0;
    background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
    border-color: #adadad;
}

/* --- Tables --- */
.table {
    margin-bottom: 20px;
    font-size: 14px;
    --bs-border-color: #ddd;
    --bs-table-bg: transparent;
    --bs-table-color: #333;
    --bs-table-striped-bg: #f9f9f9;
    --bs-table-striped-color: #333;
    --bs-table-hover-bg: var(--stripe_color, rgba(0, 0, 0, 0.075));
    --bs-table-hover-color: #333;
    --bs-table-border-color: #ddd;
    border-color: #ddd;
    color: #333;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.table > :not(caption) > * > * {
    border-bottom-width: 0 !important;
    border-top-color: #ddd !important;
}
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

/* --- Alerts --- */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
}

/* --- Badges/Labels --- */
.badge {
    display: inline;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 10px;
}

/* --- Dropdowns --- */
.dropdown-menu {
    font-size: 14px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu.pull-right,
.dropdown-menu.dropdown-menu-right {
    inset: auto !important;
    transform: none !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
}
.dropdown-menu > li > a,
.dropdown-item {
    padding: 3px 20px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: #262626;
    background-color: #f5f5f5;
    text-decoration: none;
}

/* --- Modals --- */
.modal-dialog {
    width: 600px;
    max-width: none;
}
.modal-content {
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    border: 1px solid rgba(0,0,0,.2);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-body {
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-footer > :not(.row) {
    margin: 0;
}
.modal-footer > .row {
    flex: 1;
    margin: 0;
}
.modal-footer > .row > [class*="col-"]:first-child {
    padding-left: 0;
}
.modal-footer > .row > [class*="col-"]:last-child {
    padding-right: 0;
}
.modal-footer .btn + .btn {
    margin-left: 5px;
}

#pica_organization_dialog .modal-footer .col-4 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}

#pica_organization_dialog .modal-footer .col-4 .btn {
    white-space: nowrap;
    flex-shrink: 1;
    min-width: fit-content;
}

/* --- Tooltips --- */
.tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.pica-tooltip-left .tooltip-inner {
    text-align: left;
}

/* --- Checkbox / Radio alignment --- */
input[type="checkbox"],
input[type="radio"] {
    margin: 4px 0 0;
    line-height: normal;
}

/* --- Horizontal Rule --- */
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    background: transparent;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
}

/* --- Nav tabs/pills (BS3 style) --- */
.nav > li > a {
    color: #337ab7;
}
.nav-tabs > li > a {
    border-radius: 4px 4px 0 0;
}

/* --- List group (BS3 style) --- */
.list-group-item {
    padding: 10px 15px;
    border: 1px solid #ddd;
    font-size: 14px;
}

/* --- Pagination --- */
.pagination > li > a,
.pagination > li > span {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #337ab7;
}

/* --- Small text --- */
small, .small {
    font-size: 85%;
}

/* --- Blockquote --- */
blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

/* --- Code --- */
code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

/* --- BS5 reboot overrides --- */
*,
*::before,
*::after {
    /* Restore BS3 border-box but keep BS5 box-sizing */
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 14px;
}

/* --- Progress bar contextual colors (BS3, removed in BS5) --- */
.progress-bar-success {
    background-color: #5cb85c !important;
}
.progress-bar-info {
    background-color: #5bc0de !important;
}
.progress-bar-warning {
    background-color: #f0ad4e !important;
}
.progress-bar-danger {
    background-color: #d9534f !important;
}

/* --- Badge default background (BS3 had grey default, BS5 is transparent) ---
   Tag chips (PFS-5306) are excluded: they use a transparent, bordered look. */
.badge:not([class*="bg-"]):not([class*="badge-"]):not(.pica-tag-chip):not(.pica-tag-add) {
    background-color: #777;
}


/* --- form-control-static (BS3 class for static text in forms, removed in BS5) --- */
.form-control-static {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0;
    font-size: 14px;
}

/* --- center-block (BS3, removed in BS5) --- */
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- has-error / has-success / has-warning (BS3 validation, BS5 uses .is-invalid/.is-valid) --- */
.has-error .form-control,
.has-error .input-group-addon,
.has-error .input-group-text {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error .form-control:focus {
    border-color: #843534;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}
.has-error .control-label,
.has-error .help-block,
.has-error label {
    color: #a94442;
}
.has-success .form-control {
    border-color: #3c763d;
}
.has-success .form-control:focus {
    border-color: #2b542c;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #67b168;
}
.has-warning .form-control {
    border-color: #8a6d3b;
}
.has-warning .form-control:focus {
    border-color: #66512c;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #c0a16b;
}

/* --- Nav tabs fix (BS5 uses flexbox, BS3 used floats - make tabs render inline) --- */
.nav-tabs {
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-tabs.pica-space {
    margin-bottom: 20px;
}
.nav-tabs > li {
    float: none;
    margin-bottom: -1px;
}
.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd;
    text-decoration: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

/* --- Nav general (BS3 compat) --- */
.nav > li {
    position: relative;
    display: block;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: #eee;
}

/* --- Dropdown menu > li > a (BS5 uses .dropdown-item, BS3 used li > a) --- */
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    background-color: #f5f5f5;
    text-decoration: none;
}

/* --- Picasso responsive visibility (must come after .btn override) --- */
@media (min-width: 992px) {
    .pica-hidden-on-big {
        display: none !important;
    }
}
@media (max-width: 992px) {
    .pica-hidden-on-small {
        display: none !important;
    }
}

/* Organization dialog - keep inputs side-by-side by default */
#pica_organization_dialog .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#pica_organization_dialog .col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 !important;
}

#pica_organization_dialog .form-group {
    margin-bottom: 10px !important;
    width: 100% !important;
    padding: 0 !important;
}

#pica_organization_dialog .form-group:not(.col-6) {
    padding: 0 !important;
}

/* Dialog input groups - consistent styling at all sizes */
#pica_organization_dialog .input-group {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

#pica_organization_dialog .input-group .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#pica_organization_dialog .input-group-text {
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 0.75rem !important;
}

#pica_organization_dialog .input-group:not(:has(textarea)) .input-group-text {
    height: 38px !important;
}

#pica_organization_dialog .input-group input.form-control {
    height: 38px !important;
}

#pica_organization_dialog .input-group textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
}

#pica_organization_dialog .input-group:has(textarea) {
    align-items: stretch !important;
}

#pica_organization_dialog .input-group:has(textarea) .input-group-text {
    height: auto !important;
    min-height: unset !important;
    align-self: stretch !important;
}

#pica_organization_dialog .input-group-text i,
#pica_organization_dialog .input-group-text .glyphicons {
    flex-shrink: 0 !important;
}

/* Hide empty last column and date columns on medium screens to prevent wrapping */
@media (max-width: 1000px) {
    #organizations_table th:nth-child(5),
    #organizations_table td:nth-child(5),
    #organizations_table th:nth-child(6),
    #organizations_table td:nth-child(6),
    #organizations_table th:nth-child(7),
    #organizations_table td:nth-child(7) {
        display: none !important;
    }
}

/* Fix organization dialog input groups on all screens */
#pica_organization_dialog .pica-taginput.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow: visible !important;
    align-items: center !important;
}

#pica_organization_dialog .pica-taginput .input-group-btn {
    flex-shrink: 0 !important;
    width: auto !important;
}

#pica_organization_dialog .pica-taginput .input-group-btn > .btn {
    margin-left: 0 !important;
}

#pica_organization_dialog .pica-taginput .input-group-text {
    min-height: 42px !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
}

#pica_organization_dialog .pica-taginput .pica-taginput-button {
    height: 42px !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
}

/* Organizations table responsive column widths */
@media (max-width: 400px) {
    .pica-full.container-fluid {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        padding: 0 10px !important;
    }

    /* Mobile-friendly notifications */
    .pica-notification {
        position: fixed !important;
        top: auto !important;
        bottom: 110px !important;
        left: 75px !important;
        right: 10px !important;
        transform: none !important;
        min-width: auto !important;
        max-width: calc(100vw - 85px) !important;
        width: auto !important;
        z-index: 99999 !important;
    }

    .pica-notification-box {
        font-size: 13px !important;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
    }

    .pica-notification-box .glyphicons {
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        font-size: 16px !important;
    }

    .pica-notification-box > span:not(.glyphicons) {
        flex: 1 !important;
        text-align: left !important;
    }

    .pica-notification-box button.btn-close,
    .pica-notification-box button.close {
        padding: 0 !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        font-size: 16px !important;
        opacity: 1 !important;
        width: 20px !important;
        height: 20px !important;
    }

    #pica_footer {
        text-align: center !important;
        font-size: 10px !important;
        padding: 10px 5px !important;
        line-height: 1.8 !important;
    }

    #pica_footer .pica-pipe-group {
        display: block !important;
        text-align: center !important;
    }

    #pica_footer .pica-pipe-group > a {
        display: block !important;
        font-size: 10px !important;
        margin: 3px 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    #pica_footer .pica-pipe-group > a + a:before {
        content: none !important;
        margin: 0 !important;
    }

    #organizations_table.pica-table-scroll {
        margin: 0 5px !important;
    }

    #organizations_table.pica-table-scroll tbody {
        left: 0;
        right: 0;
    }

    #organizations_table thead,
    #organizations_table tbody tr {
        table-layout: fixed;
        width: 100% !important;
    }

    #organizations_table th:nth-child(1),
    #organizations_table td:nth-child(1) {
        width: 35px !important;
        padding-left: 5px !important;
        padding-right: 2px !important;
    }

    #organizations_table th:nth-child(2),
    #organizations_table td:nth-child(2) {
        width: 25% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #organizations_table th:nth-child(3),
    #organizations_table td:nth-child(3) {
        width: 40% !important;
        white-space: nowrap;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #organizations_table th:nth-child(4),
    #organizations_table td:nth-child(4) {
        width: 25% !important;
        text-align: center;
        padding-left: 2px !important;
        padding-right: 5px !important;
    }

    #organizations_table th:nth-child(5),
    #organizations_table td:nth-child(5) {
        display: none !important;
    }
}

/* Mobile organization dialog styling - below 650px */
@media (max-width: 649px) {
    /* Dialog sizing */
    #pica_organization_dialog .modal-dialog {
        margin: 20px !important;
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        overflow: visible !important;
    }

    #pica_organization_dialog .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }

    #pica_organization_dialog .modal-header {
        padding: 10px 15px !important;
    }

    #pica_organization_dialog .modal-body {
        padding: 10px !important;
        overflow-y: auto !important;
        overflow-x: scroll !important;
        max-height: calc(100vh - 200px) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Color picker positioning */
    #pica_organization_dialog .pica-color-addon {
        position: relative !important;
    }

    #pica_organization_dialog .pica-color-input {
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
    }

    /* Native datetime-local picker constraints for mobile */
    input[type="datetime-local"]::-webkit-datetime-edit {
        padding: 0 !important;
        font-size: 13px !important;
    }

    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        padding: 0 !important;
        margin-left: 2px !important;
    }

    /* Constrain the native picker popup */
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"] {
        max-width: 100% !important;
        font-size: 14px !important;
    }

    /* Make form content wider on mobile to accommodate datetime picker */
    #pica_organization_dialog .modal-body .tab-content {
        min-width: 500px !important;
    }

    #pica_organization_dialog .modal-footer {
        padding: 10px 15px !important;
    }

    #pica_organization_dialog .pica-dialog-title {
        font-size: 16px !important;
    }

    #pica_organization_dialog .pica-dialog-description {
        font-size: 13px !important;
        padding: 0 5px !important;
    }

    #pica_organization_dialog .pica-nav-tabs {
        padding: 0 5px !important;
    }

    /* Stack inputs vertically */
    #pica_organization_dialog .row {
        flex-direction: column !important;
    }

    /* Hide horizontal scroll arrows */
    #pica_organization_dialog .modal-body {
        overflow-x: hidden !important;
    }

    /* Fix domains/accounts/groups tab input alignment */
    #pica_organization_dialog .pica-taginput.input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1 !important;
    }

    /* Fix dropdown z-index on mobile */
    #pica_organization_dialog .pica-nav-tabs .dropdown-menu {
        z-index: 9999 !important;
    }

    /* Fix confirmation dialog on mobile */
    #pica_confirmation_dialog .modal-dialog {
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }

    #pica_organization_dialog .pica-taginput .input-group-text {
        flex-shrink: 0 !important;
        width: auto !important;
        min-height: 42px !important;
        height: auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        padding: 9px 12px !important;
    }

    #pica_organization_dialog .pica-taginput .pica-taginput-div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        height: 42px !important;
        box-sizing: border-box !important;
    }

    #pica_organization_dialog .pica-taginput .input-group-btn {
        flex-shrink: 0 !important;
        width: auto !important;
    }

    #pica_organization_dialog .pica-taginput .input-group-btn > .btn {
        margin-left: 0 !important;
    }

    #pica_organization_dialog .pica-taginput .pica-taginput-button {
        height: 42px !important;
        box-sizing: border-box !important;
        padding: 9px 12px !important;
    }

    /* Show "Is member" dropdown in members/accounts/groups tabs on mobile */
    #pica_organization_dialog .pica-inputlist-table td.d-none.d-sm-block {
        display: table-cell !important;
    }

    #pica_organization_dialog .col-6,
    #pica_organization_dialog .col-md-6,
    #pica_organization_dialog .col-sm-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Branding tab - stack form-inline elements vertically */
    #pica_organization_dialog .form-inline.pica-table {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #pica_organization_dialog .form-inline.pica-table > div,
    #pica_organization_dialog .form-inline.pica-table > label {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    #pica_organization_dialog .form-inline.pica-table .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #pica_organization_dialog .form-inline.pica-table label.col-form-label {
        text-align: left !important;
        padding-left: 0 !important;
        margin-bottom: 5px !important;
    }

    /* Avatar section buttons stack vertically */
    #pica_organization_dialog .form-inline.pica-table > div > div {
        width: 100% !important;
    }

    #pica_organization_dialog .form-inline.pica-table .btn-block {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    /* Ensure input groups look good when stacked */
    #pica_organization_dialog .input-group {
        width: 100% !important;
    }

    #pica_organization_dialog .input-group-text {
        min-width: 40px !important;
    }

    #pica_organization_dialog .form-group {
        padding: 0 !important;
    }

    /* Footer layout */
    #pica_organization_dialog .modal-footer .row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    #pica_organization_dialog .modal-footer .col-8,
    #pica_organization_dialog .modal-footer .col-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    #pica_organization_dialog .modal-footer .col-4 {
        text-align: center !important;
    }

    #pica_organization_dialog .modal-footer .col-4 button {
        margin: 0 5px !important;
    }

    /* Storage progress bar */
    #pica_organization_dialog #pica_organization_total_storage {
        width: 90% !important;
        max-width: none !important;
        margin: 0 auto 10px auto !important;
        float: none !important;
    }

    #pica_organization_dialog .pica-button-checkbox {
        display: none !important;
    }
}

/* Footer: 2 per row on medium screens (401-650px) */
@media (max-width: 650px) and (min-width: 401px) {
    #pica_footer {
        text-align: center !important;
        padding: 10px !important;
    }

    #pica_footer .pica-pipe-group {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        max-width: 100%;
        gap: 5px 0 !important;
    }

    #pica_footer .pica-pipe-group > a {
        font-size: 11px !important;
        display: inline-block !important;
        word-break: break-word;
        margin: 0 !important;
        text-align: center !important;
        width: calc(50% - 15px) !important;
        position: relative !important;
    }

    /* Add separator between items on the same row */
    #pica_footer .pica-pipe-group > a:nth-child(odd):not(:last-child)::after {
        content: "|" !important;
        position: absolute !important;
        right: -15px !important;
        color: var(--slash_color, #999) !important;
    }

    /* Remove default pipe separator */
    #pica_footer .pica-pipe-group > a + a:before {
        content: none !important;
        margin: 0 !important;
    }
}

/* Prevent horizontal scroll on organizations page and all pages at small screens */
@media (max-width: 650px) {
    .pica-full.container-fluid {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    table {
        max-width: 100% !important;
    }

    /* Adjust organizations table column widths for mobile */
    #organizations_table th:nth-child(1),
    #organizations_table td:nth-child(1) {
        width: 50px !important;
        min-width: 50px !important;
    }

    #organizations_table th:nth-child(2),
    #organizations_table td:nth-child(2) {
        width: 25% !important;
        min-width: 80px !important;
    }

    #organizations_table th:nth-child(3),
    #organizations_table td:nth-child(3) {
        width: 45% !important;
        min-width: 110px !important;
        white-space: nowrap !important;
    }

    #organizations_table th:nth-child(4),
    #organizations_table td:nth-child(4) {
        width: 30% !important;
        min-width: 70px !important;
    }
}

/*************************************
 *        Activity feed              *
 *   (redesigned "News" page)        *
 *************************************/

#pica_content.pf-activity {
    /* Lay the page out as a column: header + filter bar stay fixed, only
     * the feed/sidebar area scrolls. Avoids the legacy absolute scroll
     * container (.pica-content-scroll-with-header) overlapping the header. */
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Breathing room from the main navigation menu on the left */
    padding-left: 22px;
    padding-right: 18px;
}

.pf-activity-header,
.pf-activity-filterbar {
    flex: 0 0 auto;
}

.pf-activity-header {
    margin-bottom: 6px;
}

.pf-activity-title {
    margin-bottom: 2px;
}

.pf-activity-subtitle {
    clear: both;
    margin: 0 0 18px;
    color: var(--pf-act-muted);
    font-size: 14px;
}

/* Filter bar */
.pf-activity-filterbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* When relocated into the top action bar: positioned exactly where the
 * search field / account filter sits (#pica_action_search: top 25px, left 10px),
 * so the first filter lines up with the accounts-page filter. */
#pica_action .pf-activity-filterbar {
    position: absolute;
    top: 25px;
    left: 10px;
    margin: 0;
    align-items: center;
}

/* Filter buttons: flat look matching the accounts filter (no btn-secondary
 * gradient), shown side by side. Only the selected state is filled. */
.pf-activity-filterbar .pf-filter-btn.btn {
    height: 36px;
    border: 1px solid var(--border_color);
    border-radius: 4px;
    background: #fff;
    background-image: none;
    color: var(--pf-act-navy);
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}

.pf-activity-filterbar .pf-filter-btn.btn:hover,
.pf-activity-filterbar .pf-filter-btn.btn:focus {
    background: #f5f7fa;
    background-image: none;
    border-color: var(--pf-act-navy);
    color: var(--pf-act-navy);
    box-shadow: none;
}

.pf-activity-filterbar .pf-filter-btn.btn.active {
    background: var(--pf-act-navy);
    background-image: none;
    border-color: var(--pf-act-navy);
    color: #fff;
    font-weight: 400;
    text-shadow: none;
    box-shadow: none;
    opacity: 1;
}

/* Two column layout: feed + optional sidebar.
 * This area is the scroll container; the sidebar sticks to its top. */
.pf-activity-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 24px;
    align-items: start;
    padding-right: 4px;
}

.pf-activity-layout:not(:has(#pf-activity-sidebar)) {
    grid-template-columns: minmax(0, 1fr);
}

.pf-activity-feed {
    min-width: 0;
}

.pf-activity-loading {
    padding: 40px 0;
}

/* Date groups */
.pf-activity-group {
    margin-bottom: 24px;
}

.pf-activity-group h2 {
    font-size: 16px;
    margin: 0 0 12px;
    color: #34495e;
    font-weight: 700;
}

/* Activity card */
.pf-activity-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--pf-act-border);
    border-radius: 12px;
    padding: 15px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 42, 61, .03);
    transition: box-shadow .18s ease, transform .18s ease;
}

.pf-activity-card.pf-expandable {
    cursor: pointer;
}

/* Expanded detail: all affected files, one per line (full card width) */
.pf-activity-card .pf-file-list {
    flex: 1 0 100%;
    width: 100%;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--pf-act-border);
    cursor: default;
}

.pf-activity-card .pf-file-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    min-width: 0;
}

.pf-activity-card .pf-file-list-row .pica-glyph-color {
    font-size: 18px;
    flex: 0 0 auto;
    cursor: pointer;
}

.pf-activity-card .pf-file-list-row .pf-file-name {
    /* Shrink to text width so the "top" tooltip anchors over the name,
     * not the middle of the row. */
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

.pf-activity-card .pf-file-list-row .pf-file-list-size {
    margin-left: auto;
}

/* Expanded list: icon AND name colored by operation */
.pf-activity-card .pf-file-list .pf-file-add { color: var(--pf-act-blue) !important; }
.pf-activity-card .pf-file-list .pf-file-update { color: var(--pf-act-green) !important; }
.pf-activity-card .pf-file-list .pf-file-delete { color: var(--pf-act-red) !important; }

.pf-activity-card .pf-file-list-size {
    flex: 0 0 auto;
    color: var(--pf-act-muted);
    font-size: 12px;
}

.pf-activity-card .pf-file-list-more {
    margin-top: 6px;
    color: var(--pf-act-muted);
    font-size: 12px;
}

.pf-activity-card:hover {
    box-shadow: 0 6px 16px rgba(15, 42, 61, .08);
    transform: translateY(-1px);
}

/* Avatar */
.pf-activity-card .pf-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #eef3f7;
    color: var(--pf-act-navy);
    font-weight: 700;
    overflow: hidden;
}

.pf-activity-card .pf-avatar.system {
    background: #e8f1ff;
    color: #2468d8;
}

.pf-activity-card .pf-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card body */
.pf-activity-body {
    flex: 1;
    min-width: 0;
}

.pf-activity-body .pf-title {
    font-size: 15px;
    line-height: 1.35;
}

.pf-activity-body .pf-action {
    font-weight: 700;
}

/* Action-type icon at the very start of the row (mockup) */
.pf-activity-body .pf-action-icon {
    margin-right: 7px;
    font-size: 13px;
    vertical-align: baseline;
}

.pf-action-add .pf-action,
.pf-action-add .pf-action-icon { color: var(--pf-act-blue); }
.pf-action-update .pf-action,
.pf-action-update .pf-action-icon { color: var(--pf-act-green); }
.pf-action-delete .pf-action,
.pf-action-delete .pf-action-icon { color: var(--pf-act-red); }
/* "Changed" (mixed add/update/delete) uses the same orange as updated */
.pf-action-mixed .pf-action,
.pf-action-mixed .pf-action-icon { color: var(--pf-act-green); }

.pf-activity-body .pf-path {
    margin-top: 5px;
    color: var(--pf-act-muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Extra gap between the folder icon and the folder name */
.pf-activity-body .pf-path-icon {
    margin-right: 8px;
}

.pf-activity-body .pf-path-link {
    color: var(--pf-act-muted);
    text-decoration: none;
}

.pf-activity-body .pf-path-link:hover {
    color: var(--pf-act-navy);
    text-decoration: underline;
}

/* Affected file glyphs: to the right of the body, left of the time/size */
.pf-activity-card .pf-files {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    max-width: 180px;
    flex-wrap: wrap;
    position: relative;
    top: -3px; /* nudge the summary icons slightly up */
}

.pf-activity-card .pf-files .pica-glyph-color {
    font-size: 20px;
    cursor: pointer;
}

/* File glyph colors mirror the operation colors */
.pf-activity-card .pf-files .pf-file-add { color: var(--pf-act-blue) !important; }
.pf-activity-card .pf-files .pf-file-update { color: var(--pf-act-green) !important; }
.pf-activity-card .pf-files .pf-file-delete { color: var(--pf-act-red) !important; }

/* Single-file activities: show the file name next to the icon */
.pf-activity-card .pf-files.pf-files-named {
    max-width: 240px;
    flex-wrap: nowrap;
}

.pf-activity-card .pf-file-name {
    font-size: 13px;
    color: var(--pf-act-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hair down so the summary file name aligns vertically with its icon */
.pf-activity-card .pf-files .pf-file-name {
    position: relative;
    top: 2px;
}

.pf-activity-card a.pf-file-link {
    text-decoration: none;
    cursor: pointer;
}

.pf-activity-card a.pf-file-link:hover {
    text-decoration: underline;
}

.pf-activity-card .pf-chip {
    border: 1px solid var(--pf-act-border);
    background: #fafbfc;
    border-radius: 7px;
    padding: 2px 7px;
    font-size: 12px;
    color: #5f6b76;
}

/* Meta column */
.pf-activity-card .pf-meta {
    width: 90px;
    text-align: right;
    color: #5f6b76;
    font-size: 13px;
    line-height: 1.45;
    flex: 0 0 auto;
}

.pf-activity-card .pf-meta .pf-size {
    color: var(--pf-act-muted);
}

/* Sidebar - stays pinned to the top while the feed scrolls */
.pf-activity-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
}

/* Activity overview doughnut chart */
.pf-activity-sidebar .pf-chart-wrap {
    margin-top: 12px;
    text-align: center;
}

/* Donut wrapper shrinks to the canvas, so the total overlay centers exactly */
.pf-activity-sidebar .pf-chart-donut {
    position: relative;
    display: inline-block;
}

.pf-activity-sidebar .pf-chart-donut canvas {
    display: block;
    max-width: 100%;
}

.pf-activity-sidebar .pf-chart-total {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.pf-activity-sidebar .pf-chart-total strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--pf-act-navy);
    /* Re-enable hover on just the number so its tooltip works while the
     * rest of the overlay stays click-through (donut remains hoverable). */
    pointer-events: auto;
    cursor: default;
}

/* Headings whose description is shown as a tooltip */
.pf-has-tooltip {
    cursor: help;
}

.pf-activity-sidebar .pf-chart-legend {
    margin-top: 14px;
}

.pf-activity-sidebar .pica-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-top: 8px;
}

.pf-activity-sidebar .pica-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

/* Clickable legend items act as add/update/delete filters */
.pf-activity-sidebar .pica-chart-legend-item.pf-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
}

.pf-activity-sidebar .pica-chart-legend-item.pf-clickable:hover {
    background: #f0f5f9;
}

.pf-activity-sidebar .pf-side-card {
    background: #fff;
    border: 1px solid var(--pf-act-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.pf-activity-sidebar .pf-side-card h3 {
    font-size: 15px;
    margin: 0 0 4px;
    font-weight: 700;
}

.pf-activity-sidebar .pf-side-card small {
    color: var(--pf-act-muted);
}

.pf-activity-sidebar .pf-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 11px;
    font-size: 14px;
    gap: 10px;
}

.pf-activity-sidebar .pf-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-activity-sidebar .pf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.pf-activity-sidebar .pf-dot.add { background: var(--pf-act-blue); }
.pf-activity-sidebar .pf-dot.update { background: var(--pf-act-green); }
.pf-activity-sidebar .pf-dot.delete { background: var(--pf-act-red); }

/* Responsive: collapse sidebar, stack meta */
@media (max-width: 1100px) {
    .pf-activity-layout {
        grid-template-columns: 1fr;
    }
    .pf-activity-sidebar {
        display: none;
    }
}

.pf-activity-spinner {
    text-align: center;
    padding: 16px 0 8px;
    color: var(--pf-act-muted, #888);
}

@media (max-width: 720px) {
    .pf-activity-card {
        align-items: flex-start;
    }
    .pf-activity-card .pf-meta {
        width: auto;
        text-align: left;
    }
    .pf-activity-body .pf-path {
        white-space: normal;
    }
}

/* ------------------------------------------------------------------
 * PFS-5654: Servers & Storage tables — responsive horizontal scroll on
 * small screens / phones. Below 1200px (covers half-width desktop
 * windows, tablets and phones) every column stays visible with a min
 * width and the content area scrolls sideways instead of crushing or
 * clipping columns. A plain class (added to #pica_content in
 * servers.vm / storage.vm) is used instead of :has() so it also works
 * on iOS Safari < 15.4. Scoped to the two tables.
 * ------------------------------------------------------------------ */
@media (max-width: 1200px) {
    /* ID + class beats the base #pica_content{overflow-x:hidden}; the
       !important guarantees the horizontal scrollbar always wins. */
    #pica_content.pica-hscroll-page {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    #table_servers  { min-width: 1000px; }
    #storages_table { min-width: 720px; }

    /* Normal single-table flow so header and body columns stay aligned
       (the desktop layout floats the tbody, which cannot scroll as one
       unit horizontally). */
    #table_servers, #storages_table {
        display: table;
        table-layout: fixed;
    }
    #table_servers > thead:not([style*="display: none"]),
    #storages_table > thead:not([style*="display: none"]) {
        display: table-header-group;
    }
    #table_servers > tbody, #storages_table > tbody {
        display: table-row-group;
        position: static;
        height: auto;
        overflow: visible;
    }
    #table_servers > thead > tr, #table_servers > tbody > tr,
    #storages_table > thead > tr, #storages_table > tbody > tr {
        display: table-row;
    }

    /* Keep every column visible (override the d-none / d-*-block helpers). */
    #table_servers > thead > tr > th, #table_servers > tbody > tr > td,
    #storages_table > thead > tr > th, #storages_table > tbody > tr > td {
        display: table-cell !important;
    }
}

/* PFC-3613: the dialog keeps the height of the sharing dialog it opens out of, whose member list may
   grow to 60vh - so the two do not jump in size when they follow one another. The holders box takes
   whatever room is left over instead of leaving it empty below a short list. */
#pica_inheritance_dialog .modal-content {
    min-height: 60vh;
}

#pica_inheritance_dialog .modal-body,
#pica_inheritance_dialog #pica_inheritance_affected {
    display: flex;
    flex-direction: column;
    /* Without this a flex child refuses to shrink below its content and the box stops scrolling. */
    min-height: 0;
}

#pica_inheritance_dialog #pica_inheritance_affected {
    flex: 1;
}

/* PFC-3613: the affected permission holders in the inheritance dialog. A folder can carry hundreds of
   grants, so the box scrolls instead of stretching the dialog past the screen - the list itself is
   capped and ends in a "+N more" line. No frame around it: the members list of the sharing dialog
   has none either, and the table's own striping already sets the list off from the text above it. */
.pica-inheritance-holders {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pica-inheritance-holders .pica-holders-kind {
    font-weight: 600;
    margin-top: 6px;
}

.pica-inheritance-holders table {
    margin: 4px 0 0 0;
}

.pica-inheritance-holders .pica-holders-more {
    font-style: italic;
    opacity: 0.75;
}