body::before {
    content: "desktop";
    display: none;
    /* hide the content, we will just read it with JS */
}

/* Default style, assuming this is for bigger screens */
.ag-grid_H73 {
    height: 73vh;
    width: 100%;
}

.ag-grid_H76 {
    height: 76vh;
    width: 100%;
}

.ag-grid_H78 {
    height: 76vh;
    width: 100%;
}

.filter-text-box {
    width: 40em;
}

/* A grid topbar rendered inside a "ui form" (the document search modal): Fomantic styles every
   text input of a form with width:100%, which beats .filter-text-box and shrinks the quick
   filter to the width of its inline-flex wrapper. The wrapper takes the width instead. */
.ui.form .grid-topbar-container .ui.input {
    width: 40em;
    max-width: 100%;
}

.ui.form .grid-topbar-container .filter-text-box {
    width: 100%;
}

.pointer-cursor {
    cursor: pointer;
}

/* Style for big screens (e.g., laptops) */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ag-grid_H73 {
        height: 73vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H76 {
        height: 76vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H78 {
        height: 78vh;
        /* Adjust this value as needed */
    }

    body::before {
        content: "webkit-min-device-pixel-ratio";
    }

    .filter-text-box {
        width: 37em;
    }
}

/* Style for medium screens (e.g., laptops) */
@media (max-width: 1366px) {
    .ag-grid_H73 {
        height: 61vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H76 {
        height: 65vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H78 {
        height: 67vh;
        /* Adjust this value as needed */
    }

    body::before {
        content: "1366px";
    }

    .filter-text-box {
        width: 40em;
    }

}

/* Style for smaller screens (e.g., tablets) */
@media (max-width: 768px) {
    #export-button .button-text {
        display: none;
    }

    #export-button::after {
        content: 'XLS';
    }

    .ag-grid_H73 {
        height: 58vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H76 {
        height: 60vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H78 {
        height: 60vh;
        /* Adjust this value as needed */
    }

    body::before {
        content: "768px";
    }

    .filter-text-box {
        width: 25em;
    }

    .ui.form .grid-topbar-container .ui.input {
        width: 25em;
    }

    .sidebar.icon {
        display: block;
    }

    .ui.menu .item:not(:first-child) {
        display: none;
        /* Hide other items initially */
    }

    /* The user dropdown is the first child of .right.menu: hide it inside the hamburger too */
    .ui.fixed.menu > .right.menu > .item {
        display: none;
    }

    .ui.vertical.menu .item {
        display: block !important;
        /* Ensure items are displayed when menu is vertical */
    }

    .hidden_on_small_screen {
        display: none;
    }

}

/* Style for even smaller screens (e.g., mobile phones) */
@media (max-width: 480px) {
    .ag-grid_H73 {
        height: 48vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H76 {
        height: 70vh;
        /* Adjust this value as needed */
    }

    .ag-grid_H78 {
        height: 72vh;
        /* Adjust this value as needed */
    }

    body::before {
        content: "480px";
    }

    .filter-text-box {
        width: 15em;
    }

    .ui.form .grid-topbar-container .ui.input {
        width: 15em;
    }

    .hidden_on_small_screen {
        display: none;
    }

}


/* Hide hamburger icon on larger screens */
@media (min-width: 769px) {

    .hamburger_menu {
        display: none;
    }

    .sidebar.icon {
        display: none;
    }

}

/* Top bar dropdown in compact mode (nav_compact_menu.js): sub-menus open on click below their entry */
.ui.menu .ui.dropdown.item.jm-compact-menu > .menu {
    max-height: calc(100vh - 50px);
    overflow-y: auto;
}

.ui.menu .ui.dropdown.item.jm-compact-menu .menu .menu {
    display: none !important;
    position: static !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Fomantic leaves "hidden transition" on the sub-menu, which also sets visibility */
.ui.menu .ui.dropdown.item.jm-compact-menu .item.jm-open > .menu {
    display: block !important;
    visibility: visible !important;
}

.ui.menu .ui.dropdown.item.jm-compact-menu .menu .menu > .item {
    padding-left: 2em !important;
}

.ui.menu .ui.dropdown.item.jm-compact-menu .menu .menu .menu > .item {
    padding-left: 3em !important;
}

.ui.menu .ui.dropdown.item.jm-compact-menu .menu .ui.dropdown.item.jm-open > .dropdown.icon {
    transform: rotate(90deg);
}

/* cost rates form */
.compact-grid {
    height: 40px;
}

/* CALENDAR */
.incomplete-days {
    font-weight: bold;
    color: #ff4d01 !important;
}

.holiday-days {
    font-weight: bold;
    background-color: #FF4433 !important;
}

/* selected day, apply to today and chosen date */
.ui.calendar .ui.table tr td.active {
    background-color: #0E6EB8;
    color: white;
    border-radius: 4px;
}

/* END CALENDAR */

/* FORM */
/* columns aligned input form */

.inline-column-label {
    width: 30% !important;
    text-align: left;
}

.inline-column-label-checkbox {
    width: 30% !important;
    margin-top: 6px;
    margin-left: 6px;
    text-align: left;
    font-size: 0.92857143em;
    font-weight: bold;
}

.inline-column-label-refund {
    width: 24.6% !important;
    margin-top: 6px;
    margin-left: 6px;
    text-align: left;
    font-size: 0.92857143em;
    font-weight: bold;
}

.inline-column-input-refund {
    text-align: right;
}

/* END FORM */

/* JSTREE */
.jstree-default .jstree-anchor {
    /* Same as Aggrid */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 12px;
}

/* Style for search-matched nodes */
.jstree-default .jstree-search {
    color: #0E6EB8;
}

/* Subfolders tree in the modal window (see _modal_folders_tree) */
.folders-tree-modal-body {
    height: 65vh;
    overflow: auto;
    white-space: nowrap;
    margin-top: 0.75em !important;
}

.folders-tree-modal-bar {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.folders-tree-modal-bar .folders-tree-search {
    flex: 0 1 24em;
}

.folders-tree-modal-bar {
    flex-wrap: wrap;
}

.folders-tree-modal-bar .folders-tree-modal-toggle {
    margin-left: auto;
}

.folders-tree-cut-status.ui.message {
    margin: 0.75em 0 0 !important;
    padding: 0.6em 0.9em;
    white-space: normal;
}

.folders-tree-cut-status #folders_tree_cut_cancel {
    margin-left: 0.75em;
}

.folders-tree-cut-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-top: 0.5em;
    max-height: 6.5em;
    overflow-y: auto;
}

.folders-tree-cut-items .label {
    margin: 0 !important;
}

.folders-tree-cut-items .folders-tree-cut-remove {
    cursor: pointer;
}

/* Item cut in the tree and waiting to be pasted */
#jstree_folders .jstree-anchor.tree-cut {
    opacity: 0.45;
    font-style: italic;
}

#modal_folders_tree > .header .folders-tree-modal-actions {
    margin-top: -0.15em;
}

/* jstree context menu must stay above Semantic UI modals (z-index 1001) */
.vakata-context {
    z-index: 1100;
}

/* END JSTREE */

/* FOLDERS: resizable split between the subfolders tree and the documents grid */
.folders-split {
    display: flex;
    align-items: stretch;
    --folders-tree-width: 20%;
}

.folders-split-tree {
    flex: 0 0 var(--folders-tree-width);
    min-width: 0;
    max-width: 70%;
    padding: 1em;
    display: flex;
    flex-direction: column;
}

/* the tree pane follows the height of the documents column (topbar + grid);
   the selector outweighs Semantic's .ui.bottom.attached.segment (margin-bottom: 1rem) */
.folders-split-tree .ui.bottom.attached.segment.scrollable-div {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    margin: 0;
}

.folders-split-documents {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1em;
}

.folders-split-handle {
    flex: 0 0 6px;
    cursor: col-resize;
    background: #f3f4f5;
    border-left: 1px solid rgba(34, 36, 38, 0.15);
    border-right: 1px solid rgba(34, 36, 38, 0.15);
    touch-action: none;
}

.folders-split-handle:hover,
.folders-split.dragging .folders-split-handle {
    background: #2185d0;
}

.folders-split.dragging {
    cursor: col-resize;
    user-select: none;
}

@media (max-width: 768px) {
    .folders-split {
        flex-direction: column;
    }

    .folders-split-tree {
        flex-basis: auto;
        max-width: none;
    }

    .folders-split-tree .ui.bottom.attached.segment.scrollable-div {
        flex: none;
        height: 36vh;
    }

    .folders-split-handle {
        display: none;
    }
}

/* END FOLDERS */

/* DASHBOARD: resizable split between the left and right panels (user setting dashboard_split_width, %) */
.dashboard-split {
    display: flex;
    align-items: stretch;
    --dashboard-left-width: 37.5%;
    /* breathing room before the section below (alerts of the supervisor): the Fomantic grid margins cancel each other out */
    margin-bottom: 1.5rem;
}

.dashboard-split-left {
    flex: 0 0 var(--dashboard-left-width);
    min-width: 0;
    max-width: 80%;
    padding: 0 1rem;
}

.dashboard-split-right {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1rem;
}

.dashboard-split-handle {
    flex: 0 0 6px;
    cursor: col-resize;
    background: #f3f4f5;
    border-left: 1px solid rgba(34, 36, 38, 0.15);
    border-right: 1px solid rgba(34, 36, 38, 0.15);
    touch-action: none;
}

.dashboard-split-handle:hover,
.dashboard-split.dragging .dashboard-split-handle {
    background: #2185d0;
}

.dashboard-split.dragging {
    cursor: col-resize;
    user-select: none;
}

@media (max-width: 768px) {
    .dashboard-split {
        flex-direction: column;
    }

    .dashboard-split-left {
        flex-basis: auto;
        max-width: none;
    }

    .dashboard-split-handle {
        display: none;
    }
}

/* END DASHBOARD */

/* AG GRID */
/* remove multisort number */
.ag-sort-order {
    display: none !important;
}

/* Column filter popup: the theme fixes it at 220px, too narrow for long values
   (customer, folder). The list items are absolutely positioned, so the popup
   never grows with its content. The height stays at the theme default: the
   popup is clipped by the grid, and a taller list gets cut in short grids. */
.ag-theme-balham .ag-tabs {
    min-width: min(330px, 90vw);
}

/* dragging a filter's resize handle must not select the page text under the pointer */
body:has(.ag-resizing) {
    -webkit-user-select: none;
    user-select: none;
}

/* the theme draws the popup flat: without a shadow it blends into the rows */
.ag-theme-balham .ag-menu {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Header */
.ag-header-cell-label .ag-header-cell-text {
    white-space: pre-wrap !important;
}

.ag-pivot-off .ag-header-cell-label {
    /*color: #8a6d3b;*/
    color: #000000;
    font-weight: bold;
    justify-content: center;
}

.ag-pivot-off .ag-header-group-cell {
    /*color: #8a6d3b;*/
    color: #000000;
    font-weight: bold;
}

.ag-pivot-on .ag-header-group-cell {
    color: #8a6d3b;
    font-weight: bold;
}

.ag-floating-bottom {
    font-weight: bold;
}

.ag-header-cell-filtered {
    /* background-color: #2185d0; */
    background-color: #f2711c;
}

.ag-header-cell-filtered .ag-header-cell-text {
    color: #fff !important;
}

/* END AG GRID */


/* Custom TOP Bar */
.grid-topbar-container {
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    /*margin-top: 10px;*/
    background-color: #e8e8e9;
}

.grid-topbar-header {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
    /*
    display: flex;
    justify-content: space-around;
    */
    background-color: #e8e8e9;
    border: 1px solid #bfc1c9;
    padding: 10px;
}

/* END Custom TOP Bar */

.fc-sat,
.fc-sun {
    color: #878787;
    border-color: black;
    background-color: #f5f5f5;
}


/* Absolute Center Spinner */

.spinner {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


/* Transparent Overlay */

.spinner:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}


/* :not(:required) hides these rules from IE9 and below */

.spinner:not(:required) {
    /* hide "spinner..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.spinner:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}


/* Animation */

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

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

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

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

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

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

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

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

/* FILEPOND REMOVE CREDITS =============================*/
.filepond--credits {
    display: none;
}

/* Custom styles for scrolling div */
.scrollable-div {
    height: 36vh;
    overflow: auto;
    white-space: nowrap;
    padding: 0px !important;
}

/* Override the active menu item background and text color */
.ui.ui.menu .active.item {
    background-color: #2185d0 !important;
    color: white !important;
}

.ui.menu .dropdown .menu {
    width: 250px;
    /* or whatever width is suitable */
    white-space: normal;
    /* to allow wrapping */
}

#loader {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.ui.active.step,
.ui.steps .step.active {
    cursor: auto;
    background-color: #A0A0A0;
    /** old color is #555;*/
    color: #FFF;
    font-weight: 700;
}

/** apart 2 code */

.ui.active.steps:after,
.ui.steps .step.active:after {
    background-color: #A0A0A0;
    /** old color is #555;*/
    -webkit-box-shadow: none;
    box-shadow: none;
}

.link-style {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
/* FILEPOND UPLOAD MODAL: wide drop area, compact once files are listed ===*/
#documents_upload_modal .filepond--root {
    margin-bottom: 0;
}

#documents_upload_modal .filepond--drop-label {
    min-height: 34vh;
    transition: min-height 0.3s ease;
}

#documents_upload_modal .filepond--root.has-files .filepond--drop-label {
    min-height: 5em;
}

#documents_upload_modal .filepond--drop-label label {
    font-size: 1.15em;
    color: #4a5568;
}

#documents_upload_modal .filepond--panel-root {
    background-color: #f7f9fc;
    border: 2px dashed #b9c2cf;
}

#documents_upload_modal .filepond--root.has-files .filepond--panel-root {
    border-style: solid;
}

#documents_upload_modal .filepond--label-action {
    text-decoration-color: #2185d0;
}

/* Page-level drop hint (folders index): shown while a file is dragged over the page */
body.page-file-drag::after {
    content: "";
    position: fixed;
    inset: 6px;
    border: 3px dashed #2185d0;
    border-radius: 10px;
    background: rgba(33, 133, 208, 0.06);
    pointer-events: none;
    z-index: 2000;
}

/* Folder of the subfolders tree under a dragged file: the drop goes into this folder */
#jstree_folders .jstree-anchor.file-drop-target {
    background: rgba(33, 133, 208, 0.12);
    outline: 2px dashed #2185d0;
    outline-offset: -1px;
    border-radius: 3px;
}

#documents_upload_destination .menu .item .folder.icon {
    margin-right: 0.4em;
}

#documents_upload_breadcrumb .section {
    font-weight: normal;
}

#documents_upload_breadcrumb .active.section {
    font-weight: bold;
}

/* Read-only forms (e.g. billed expenses): Semantic UI dims disabled fields to 45% opacity, keep them readable */
.readonly-form .ui.form .field :disabled,
.readonly-form .field :disabled,
.readonly-form .ui.form .disabled.field,
.readonly-form .disabled.field,
.readonly-form .ui.form .field.disabled > label,
.readonly-form .ui.input:not(.disabled) input[disabled],
.readonly-form .ui.checkbox input[disabled] ~ label {
    opacity: 1;
}

.readonly-form input[disabled],
.readonly-form textarea[disabled] {
    color: rgba(0, 0, 0, 0.87);
    -webkit-text-fill-color: rgba(0, 0, 0, 0.87);
    background-color: #f9fafb;
}

/* Read-only forms disabled through a <fieldset disabled> (e.g. customers): the fieldset leaves no
   trace in the layout, and the Fomantic widgets built around the disabled fields do not open */
fieldset.plain-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.readonly-form .ui.dropdown,
.readonly-form .ui.checkbox,
.readonly-form .ui.calendar {
    pointer-events: none;
}

.readonly-form .ui.disabled.dropdown,
.readonly-form .ui.disabled.checkbox {
    opacity: 1;
}

/* Export modal of the client report: state of the DeepL plan, written under the translation toggle.
   It is a whole sentence, so it is a line of text and not a tooltip: a tooltip that long leaves the
   mini modal and covers the grid behind it. */
#billing-report-translation .ui.divider {
    margin: 1em 0 0.85em;
}

#billing-report-translate-info {
    margin-top: 0.5em;
    font-size: 0.92857143em;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.6);
}

#billing-report-translate-info:empty {
    display: none;
}

/* Account settings page (devise/registrations/edit): one row per setting, title and
   description on the left, the control on the right; stacked on small screens */
.account-settings > .ui.segment {
    padding: 1em 1.5em 0.5em;
}

.account-settings .ui.dividing.header > .icon {
    color: #2185d0;
    font-size: 1.1em;
}

.account-settings .settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5em 2em;
    padding: 0.9em 0;
    border-bottom: 1px solid rgba(34, 36, 38, 0.08);
}

.account-settings .settings-row:last-child {
    border-bottom: none;
}

.account-settings .settings-label {
    flex: 1 1 18em;
    max-width: 30em;
}

.account-settings .settings-title {
    font-weight: 700;
}

.account-settings .settings-hint {
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.92em;
    margin-top: 0.2em;
}

.account-settings .settings-control {
    flex: 2 1 22em;
    padding-top: 0.1em;
}

.account-settings .settings-control > .field,
.account-settings .settings-control > .inline.fields {
    margin: 0;
    max-width: 28em;
}

.account-settings .settings-control > .inline.fields {
    max-width: none;
    flex-wrap: wrap;
    row-gap: 0.5em;
}

.account-settings .settings-row.read-only .settings-control .ui.list {
    margin: 0;
    color: rgba(0, 0, 0, 0.6);
}

/* Customer form: "virtual customer" toggle above the customer type, with its note beside it */
.virtual-customer-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
    margin: 0.75em 0 0.25em;
}

.virtual-customer-toggle .field {
    margin: 0 !important;
}

.virtual-customer-toggle .ui.toggle.checkbox label {
    font-weight: bold;
}

.virtual-customer-hint {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9em;
}

/* Thin light line on the left of a button inside an attached .ui.buttons group, to mark a
   visual break between buttons that stay in the same block (e.g. Search | Recents on /folders) */
.ui.buttons .button.group-separator {
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/*# sourceMappingURL=custom.css-fb60ce99eb508480117ebada5365030328e5ec51240ea02cf1587d7d2a185907.map */