.archiveduser a, .archiveduser td, .archiveduser span {
    color: #ccc !important;
}

#notifications .status-toggle {
    float: none !important;
}


#casescheme .selectize-control.multi .selectize-input, #dropdowncasescheme .selectize-control.multi .selectize-input {
    border: none;
    box-shadow: none;

}

#casescheme .selectize-input.items, #dropdowncasescheme .selectize-input.items {
    margin-top: -4px;
}

#casescheme .selectize-dropdown, #dropdowncasescheme .selectize-dropdown {
    overflow-y: auto;
}

.envelopediv {
    height: 100px;
}

.envelopediv img {
    max-height: 100px;
}

#casescheme #lengthOfClient, #dropdowncasescheme #lengthOfClient2, #dropdowncasescheme #lengthOfAdverse, #dropdowncasescheme #lengthOfCaseSubject {
    width: 35px;
}


#ExtendLicenses .form-check {
    margin-left: 20px;
}

#roles_permissions_data .status-toggle {
    width: 16.66666667%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Row hover highlight on the roles-permissions page to visually pair labels with their toggles */
#permission_right_top .list-group-item:hover,
#roles_permissions_data .row:not(:first-child):hover {
    background-color: rgba(0, 0, 0, 0.05);
}

html[data-layout-mode=dark] #permission_right_top .list-group-item:hover,
html[data-layout-mode=dark] #roles_permissions_data .row:not(:first-child):hover {
    background-color: rgba(255, 255, 255, 0.06);
}

#assign_user .chat-user-list.overflow-auto {
    max-height: 300px;
}

.list-group {
    --bs-list-group-active-bg: rgba(184, 178, 178, 0.46);
    --bs-list-group-active-border-color: rgba(184, 178, 178, 0.46);
}

#edit-case .status-toggle {
    float: none;
}

#edit-case .status-toggle .checktoggle, #add_case .status-toggle .checktoggle {
    background-color: #d5d5d5;
}

#edit-case .status-toggle .check:checked + .checktoggle, #add_case .status-toggle .check:checked + .checktoggle {
    background-color: #55ce63;
}


#otherCaseNumbersList .show-on-hover {
    visibility: hidden;
}

#otherCaseNumbersList tr:hover .show-on-hover {
    visibility: visible;
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 1px 2px 4px 2px rgb(0 0 0 / .1) !important;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.casefilters .status-toggle .checktoggle {
    height: 19px;
    width: 32px;
    margin-right: 5px;
    background-color: #d5d5d5;
}


.smaller-input-items .casefilters .status-toggle .checktoggle {
    height: 19px;
    width: 32px;
    margin-right: 5px;
    background-color: #e0001a;
}


.casefilters .status-toggle .check:checked + .checktoggle {
    background-color: #55ce63;
}

.casefilters .status-toggle .checktoggle::after {
    height: 13px;
    width: 13px;
    top: 9px;
}

.taskboardswitch .status-toggle .checktoggle {
    height: 19px;
    width: 32px;
    margin-right: 5px;
    background-color: #c2c0c0 !important;
}

.taskboardswitch .status-toggle .checktoggle::after {
    height: 13px;
    width: 13px;
    top: 9px;

}

.verticalseparator {
    width: 1px;
}

.checktoggle.disabled {
    background-color: #d5d5d5 !important;
}

.fixed-table-toolbar .btn-secondary {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #c2c2c2 !important;
}

.bi-arrows-move::after {
    content: "\e905";
}


.fixed-table-container .fa-solid.fa-plus {
    color: #979090;
    font-size: 11px;
    font-weight: 100;
}

.fixed-table-toolbar .fa-solid {
    color: #808080;
    font-size: 15px;
}

.fixed-table-toolbar .btn-secondary::after {
    color: #808080 !important;

}

.fixed-table-toolbar .btn-secondary:hover i, .fixed-table-toolbar .btn-secondary:hover::after, .fixed-table-body a.fa-solid.fa-plus:hover::before {
    color: #3D3C3CE2 !important;
}

.fixed-table-toolbar .btn-secondary:hover {
    background-color: #efebeb !important;

}

.tox-tinymce.tox-tinymce-inline {
    z-index: 10000 !important;

}

.tox.tox-tinymce-inline, .tox.tox-tinymce-aux, .tox-tbtn, .tox-toolbar, .tox-icon, .tox-split-button {
    z-index: 10001 !important;
}

.tinymceinlineeditor-readonly {
    height: unset !important;
    min-height: 100px !important;
    background-color: #e9ecef;
    opacity: 1;
}

.tinymceinlineeditor.form-control {
    height: unset !important;
    min-height: 100px !important;
    line-height: 1.4 !important;
}

#add_invoice_outgoing .tinymceinlineeditor.form-control, #add_invoice_incoming .tinymceinlineeditor.form-control, #edit_invoice_outgoing .tinymceinlineeditor.form-control, #edit_invoice_incoming .tinymceinlineeditor.form-control, #view_invoice_outgoing .tinymceinlineeditor.form-control, #view_invoice_incoming .tinymceinlineeditor.form-control {
    min-height: 80px !important;
}


.tinymceinlineeditor.form-control p {
    margin-bottom: 0rem !important;
}

.tinymcacontent p {
    margin-bottom: 0rem !important;
    line-height: 1.4 !important;
}

.tinymcacontent {
    max-height: 300px !important;
    overflow: auto;
}

.form-control.tinymceinlineeditor.mce-content-body {
    max-height: 200px !important;
    overflow: auto;
}

.fs-7 {
    font-size: 0.9rem !important;
}

.fs-8 {
    font-size: 0.8rem !important;
}

.fs-9 {
    font-size: 0.7rem !important;
}

#litigation-summary .add-btn i {
    margin-right: unset;
}

#litigation-summary a.add-btn {
    min-width: unset;
}

.min-vh-50 {
    min-height: 50vh;
}


#litigation-summary a.add-btn {
    z-index: 99;
    margin: 0;
    position: absolute;
    top: 10px;
    right: 50px;

}

#timer-container.notincase {
    z-index: 99999;
    position: fixed;
    right: 65px;
    bottom: 20px;
}

#case tr:not(.detail-view) {
    cursor: pointer;
}

.inactive-link {
    color: #6c757d !important;
    pointer-events: none !important;
    user-select: none !important;
}

.kanban-wrap-fake {
    padding: 20px;
}


#add_task .btn.btn-secondary, #edit_task_modal .btn.btn-secondary, #add_working_hour .btn.btn-secondary, .mailform .btn.btn-secondary, #add_workhours .btn.btn-secondary, #edit_workhours .btn.btn-secondary, #add_tasks .btn.btn-secondary, #edit_tasks_modal .btn.btn-secondary {
    background-color: #ffffff !important;
    color: #656565 !important;
    border: 1px solid #c2c2c2 !important;
}

#add_task .btn.btn-secondary:hover, #edit_task_modal .btn.btn-secondary:hover, #add_working_hour .btn.btn-secondary:hover, .mailform .btn.btn-secondary:hover, #add_workhours .btn.btn-secondary:hover, #edit_workhours .btn.btn-secondary:hover, #add_tasks .btn.btn-secondary:hover, #edit_tasks_modal .btn.btn-secondary:hover {
    background-color: #efebeb !important;
    color: #4b4b4b !important;
    border: 1px solid #c2c2c2 !important;
}

#retention_end_date .btn.btn-secondary {
    background-color: #ffffff !important;
    color: #656565 !important;
    border: 1px solid #c2c2c2 !important;
}

#retention_end_date .btn.btn-secondary:hover {
    background-color: #efebeb !important;
    color: #4b4b4b !important;
    border: 1px solid #c2c2c2 !important;
}

#add_task .btn-group, #edit_task_modal .btn-group, #view_task_modal .btn-group, .mailform .btn-group, #add_tasks .btn-group, #edit_tasks_modal .btn-group {
    display: flex;
}

.kanban-cont .kanban-wrap {
    /* max-height: 400 px; */
    overflow-y: scroll;
    overflow-x: hidden;
}

.kanban-cont .kanban-list .kanban-wrap {
    padding-bottom: 0;
}

@media (min-width: 576px) {
    .spent-time-desktop {
        margin-left: 197px;
        float: left;
    }
}

#add_working_hour .d-sm-block {
    max-width: 40px;
}

.mailform .incomingmail, .mailform .outcommingmail, .mailfilters .filterincomingmail, .mailfilters .filteroutcommingmail, .naturalperson, .legalentity, .incominginvoices, .outgoinginvoices {
    color: #d0cdcd;
}

.mailform .incomingmail.selected, .mailform .outcommingmail.selected, .filterincomingmail.selected, .filteroutcommingmail.selected, .naturalperson.selected, .legalentity.selected, .incominginvoices.selected, .outgoinginvoices.selected {
    color: #000;
}

/*
.mailform .status-toggle .checktoggle[for="incoming"] {
    height: 22px;
    background-color: #c2c0c0;
}

*/

.greybackgroundandsmaller {
    height: 22px !important;
    background-color: #c2c0c0 !important;
}

.greybackgroundandgreensmaller {
    height: 22px !important;
    background-color: #c2c0c0 !important;
}

.status-toggle .check:checked + .greybackgroundandgreensmaller.checktoggle {
    background-color: #55ce63 !important;
}

.smallerchecktoggle {
    height: 22px !important;
}

.organazing .checktoggle {
    height: 22px;
    width: 46px;
    background-color: #c2c0c0;
}

#myDropzone .fallback {
    display: none;
}

#previewDiv {
    position: absolute;
    width: 166px;
    overflow-y: scroll;
    display: none;
    z-index: 50;
}


@media (max-width: 576px) {

    #previewDiv {
        left: 50%;
        transform: translateX(-50%);
        height: 246px;
        margin-top: -300px;
    }

}

@media (min-width: 576px) {

    #previewDiv {
        right: 88px;
        height: 246px;
        margin-top: -141px;
    }

    .mailform #previewDiv {
        margin-top: -74px;
    }

    #add_deposit #previewDiv {
        margin-top: -156px;
    }
}

#documents-upload #previewDiv {
    margin-top: unset;
}

.dz-preview .dz-progress {
    height: 15px;
    background: #eee;
    border-radius: 5px;
    margin-top: 5px;
}

.dz-preview .dz-cancel, .dz-default.dz-message {
    display: none;
}


.dz-preview {
    position: relative;
    display: inline-block;
    width: 120px;
    margin: 10px;
}

.dz-preview .dz-image {
    width: 100%;
    height: 100px;
    position: relative;
    overflow: hidden;
    background: #eee;
    border-radius: 5px;
}

.dz-preview .dz-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
}

.dz-preview .dz-details {
    padding: 5px;
    font-size: 13px;
    text-align: center;
}

.dz-preview .dz-size, .dz-preview .dz-filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.dz-preview .dz-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #337ab7;
}

.dz-preview .dz-error-message {
    color: #a94442;
    font-size: 13px;
    text-align: center;
}

.dz-preview .dz-remove {
    display: block;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    margin-top: 10px;
    color: #337ab7;
}


.custom-combobox-list {
    list-style: none;
    padding: 0;
    margin: 0;

}

/*
.custom-combobox-list li {
    position: relative;
    padding: 2px 30px 2px 10px;
}*/


.custom-combobox-list .delete-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.custom-combobox-list {
    max-height: 100px;
    overflow-y: auto;

}

.custom-combobox-input {
    height: 64px;
}


.custom-combobox-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 100px;
    overflow-y: auto;
    width: 230px; /* Fix szélesség */
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: 0;
    position: absolute; /* Ezzel biztosítjuk, hogy ne befolyásolja a többi elem elrendezését */
    z-index: 1000; /* Biztosítjuk, hogy a lista a többi elem fölé kerüljön */
}

.custom-combobox-list li {
    display: flex;
    justify-content: start; /* Egyenletes elrendezés az elemek között */
    align-items: center;
}

.custom-combobox-list li .text {
    width: 200px;
}

.custom-combobox-list .delete-btn {
    cursor: pointer;
    margin-left: auto; /* Törlési gomb jobbra igazítása */
}

.truncate {
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#client-portal-list .list-group-item {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #000;
    padding: 10px 15px;
}

#client-portal-list .list-group-item:hover {
    background-color: #77b9ff;
    border: 1px solid #dee2e6;
    color: #fff;
    padding: 10px 15px;
}


#portal-list .list-group-item-action.active {
    background-color: #77b9ff;
    border-color: #f8f9fa;
    color: #fff;
    font-weight: 500;
}


.list-group-item-action:hover {
    background-color: #77b9ff;
    border-color: #f8f9fa;
}

.list-group-item-action .delete-btn {
    display: none;
}

.list-group-item-action:hover .delete-btn {
    display: block;
}

/*
.project-task .tab-content {
    max-height: 400px;
    overflow-y: scroll;
}
*/

.mailfilters .form-control.datetimepicker {
    height: 35px;

}


.btn-filter-custom {
    min-height: unset !important;
    height: 35px;
    padding: 7px !important;
    font-size: 14px;
    line-height: 1.5;
    text-transform: unset !important;
    background-color: #6c757dd6;
    color: #fff;
    border-color: #889097;

}

@media (min-width: 1200px) {

    .colmaxwidth {

        max-width: 130px;

    }

    .casefilters .colmaxwidth {

        min-width: 140px;
        max-width: 160px;

    }

}


.custom-card-header {
    position: absolute;
    top: -12px;
    background-color: #f8f9fa;
}


.table-responsive.custom table {
    width: 100%;
}

.table-responsive.custom .bootstrap-table table th div.th-inner {
    font-size: 14px;
}

.table-responsive.custom .bootstrap-table table tbody tr td {
    font-size: 14px;
}

.table-responsive.custom .bootstrap-table .bs-bars.float-left {
    position: absolute;
    top: -24px;
    left: 64px;
    background-color: #f8f9fa;
    z-index: 4;
}


.table-responsive.custom .bootstrap-table .select2-container .select2-selection.select2-selection--single {
    height: 28px;
}

.table-responsive.custom .bootstrap-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 29px;
}

.table-responsive.custom .bootstrap-table .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px;
}

.table-responsive.custom .bootstrap-table .columns.columns-right.btn-group.float-right {
    position: absolute;
    top: -24px;
    right: 10px;
    background-color: #f8f9fa;
    padding-left: 10px;
    padding-right: 10px;
    height: 28px;
    z-index: 4;
}

.table-responsive.custom .bootstrap-table.fullscreen .columns.columns-right.btn-group.float-right {
    position: unset;
    top: unset;
}


.table-responsive.custom .bootstrap-table .btn {
    line-height: 10px; /* Beállíthatja a gomb magasságának megfelelően */
    vertical-align: middle;

}

.table-responsive.custom tr.no-records-found-custom td, .table-responsive.custom div.no-records-found-custom {
    text-align: center;
    border: 1px solid #dee2e6;
    padding: .5rem .5rem;
    background-color: #fff;
    margin-bottom: 10px;
}

tbody:has(.no-records-found-custom) {
    padding-bottom: 7px;
    display: table-caption;
}

.table-responsive.custom tr.no-records-found-custom.haveamarginbutton {
    margin-bottom: 20px;
}

#dropdowncasescheme .form-control.selectize.selectize-control.multi.plugin-remove_button.plugin-drag_drop, #casescheme .form-control.selectize.selectize-control.multi.plugin-remove_button.plugin-drag_drop {
    height: unset;
    min-height: 44px;
}

hr.customwidth {
    color: #a8a9a9;
}

@media (max-width: 576px) {
    hr.customwidth {
        width: 90%;
    }
}

@media (min-width: 576px) {
    hr.customwidth {
        width: 96%;
    }
}

.listFiles {
    height: unset;
    min-height: 44px;
}

@media (max-width: 576px) {

    .listFiles div div:first-child, .editarea.listFiles div div:first-child {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        width: 90%;
        float: left;
    }

    .listFiles div div:nth-child(2), .editarea.listFiles div div:nth-child(2) {
        width: 11px;
        float: right;
    }


    .form-control.listFiles {
        all: unset !important;
    }

    .form-control.listFiles div {
        line-height: 2;
    }
}

@media (min-width: 576px) {
    /*
        .listFiles {
            position: absolute;
            width: 232px;
            right: 30px;
            overflow-y: scroll;
            scrollbar-width: thin;
            height: 237px;
            margin-top: -157px;
            overflow-x: hidden;

        }

    */
    .listFiles div div:first-child, .editarea.listFiles div div:first-child {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        /* width: 182px; */
        width: 203px;
        float: left;
    }

    .listFiles div span {
        float: left;
        margin-left: 5px
    }

    /*

        .listFilesLabel {
            position: absolute;
            right: 178px;
            overflow: hidden;
            z-index: 1;
            margin-top: -192px;
        }
        */
    /*
    #edit_jub .listFiles,     #view_jub .listFiles,


    #view_land .listFiles, #edit_land .listFiles {
        margin-top: -50px;
    }

    .mailform .listFiles, .mailform .listFiles {
        margin-top: -66px;
        right: 34px;

    }
*/
    /*
        #view_deposit .listFiles, #edit_deposit .listFiles {
            margin-top: -45px;
            height: 215px;
        }

    .mailform .listFilesLabel {
        margin-top: -98px;
    }
 */
    /*
     #view_deposit .listFilesLabel, #edit_jub .listFilesLabel,     #view_jub .listFilesLabel,
 #view_land .listFilesLabel,


    #edit_land .listFilesLabel {
        margin-top: -80px;
        background-color: #fff;
        width: 122px;
        right: 140px;
        padding-bottom: 0;
        overflow: hidden;
    }
   */
    .listFilesClose {
        position: absolute;
        width: 24px;
        height: 24px;

    }

    #view_jub .listFilesClose, #edit_jub .listFilesClose {
        margin-top: 378px;
        margin-right: 12px;
    }


    #edit_invoice_incoming .listFilesClose, #edit_invoice_outgoing .listFilesClose {
        margin-top: 527px;
        margin-right: -150px;
    }

    #view_invoice_incoming .listFilesClose, #view_invoice_outgoing .listFilesClose {
        margin-top: 527px;
        margin-right: 85px;
    }

    .invoices-files-box .editarea.listFiles {
        z-index: 50;
    }

    @media (min-width: 576px) {
        .invoices-files-box .editarea.listFiles {
            margin-top: -44px;
            right: -127px;
        }

        .invoices-files-box .listFilesLabel {
            margin-top: -78px;
            right: 17px;
        }

        #view_invoice_incoming .invoices-files-box .editarea.listFiles, #view_invoice_outgoing .invoices-files-box .editarea.listFiles {
            margin-top: 36px;
            right: 106px;
        }

        #view_invoice_incoming .invoices-files-box .listFilesLabel, #view_invoice_outgoing .invoices-files-box .listFilesLabel {
            margin-top: 1px;
            right: 249px;
        }

    }


    #edit_mail .listFilesClose {
        margin-top: 306px;
    }


    #view_land .listFilesClose, #edit_land .listFilesClose {
        margin-top: 461px;
        margin-right: 12px;

    }

    #view_deposit .listFilesClose, #edit_deposit .listFilesClose {
        margin-top: 494px;
        margin-right: 12px;

    }


    #edit_trials .listFilesClose {
        margin-top: 453px;
        margin-right: 12px;
    }

    /*

        #edit_trials .listFilesLabel {
        margin-top: -204px;
        right: 167px;
    }

        #edit_trials .editarea.listFiles {
        margin-top: -170px;
    }


        #view_trials .listFilesLabel {
            margin-top: -208px;
            right: 167px;
        }
        */
    #view_trials .editarea.listFiles {
        margin-top: -174px;
    }


    #view_trials .listFilesClose {
        margin-top: 351px;
        margin-right: 12px;
    }


}

#two-col-bar a i {
    font-size: 24px;
}

.uniquelabel input {
    min-height: calc(2.5rem + calc(var(--bs-border-width) * 2)) !important;
    padding-top: 1.125rem !important;
    padding-bottom: .325rem !important;
    height: 45px !important;
}

.uniquelabel label {
    overflow: unset;
    left: 0 !important;
    top: -7px !important;
    font-size: 15px !important;
}


#filterclientstatus, #filteradversepartystatus, #filterinvoicestatus, #workhours-list #filtercolleagues {
    position: absolute;
    margin-left: 5px;
    top: -3px;

}

#filtertaskstatus, #filtercolleagues {
    float: left
}

#task-list #filtercolleagues {
    margin-left: 5px;
}

/*
#filtertaskstatus {
    position: absolute;
    margin-left: 5px;
    top: -3px;

}
*/
.task-list-box {
    position: absolute;
    float: left;
    top: -4px;
    width: 500px;
    margin-left: 62px;
}


html[lang="en"] #task-list .task-list-box {
    margin-left: 47px;
}

html[lang="de"] #task-list .task-list-box {
    margin-left: 71px;
}

html[lang="it"] #task-list .task-list-box {
    margin-left: 91px;
}


#filtercolleagues {
    min-width: 156px;
}

#filterclientstatus, #filteradversepartystatus {
    min-width: 105px;
}

#filterinvoicestatus {
    min-width: 150px;
}


#summarystatistic #select2-filtercolleagues-ku-container, #summary #select2-filtercolleagues-ku-container, #filtercolleagues #select2-filtercolleagues-ku-container, #filterclientstatus #select2-filtercolleagues-ku-container, #filteradversepartystatus #select2-filtercolleagues-ku-container, #filterinvoicestatus #select2-filterinvoicestatus-ku-container, #filtertaskstatus #select2-filtertaskstatus-ku-container {
    line-height: 28px !important;
}

#summarystatistic .select2-selection, #summary .select2-selection, .todo-list-body .task-subject .select2-selection, #filterinvoicestatus .select2-selection, #filtercolleagues .select2-selection, #filtertaskstatus .select2-selection, #filterclientstatus .select2-selection, #filteradversepartystatus .select2-selection, .szamlazz-container .select2-selection, .szamlazz-issue-box .select2-selection {
    height: 28px !important;
}

#summarystatistic .select2-selection__rendered, #summary .select2-selection__rendered, .todo-list-body .task-subject .select2-selection__rendered, #filterinvoicestatus .select2-selection__rendered, #filtercolleagues .select2-selection__rendered, #filtertaskstatus .select2-selection__rendered, #filterclientstatus .select2-selection__rendered, #filteradversepartystatus .select2-selection__rendered, .szamlazz-container .select2-selection__rendered, .szamlazz-issue-box .select2-selection__rendered {
    line-height: 28px !important;
    font-size: 14px;
}

#summarystatistic .select2-selection__arrow, #summary .select2-selection__arrow, .todo-list-body .task-subject .select2-selection__arrow, #filterinvoicestatus .select2-selection__arrow, #filtercolleagues .select2-selection__arrow, #filtertaskstatus .select2-selection__arrow, #filterclientstatus .select2-selection__arrow, #filteradversepartystatus .select2-selection__arrow, .szamlazz-container .select2-selection__arrow, .szamlazz-issue-box .select2-selection__arrow {
    height: 28px !important;
    right: 6px;
}


#communications-order #select2-communications-order-ku-container {
    line-height: 28px !important;
}

#communications-order .select2-selection {
    height: 28px !important;
}

#communications-order .select2-selection__rendered {
    line-height: 28px !important;
    font-size: 14px;
}

#communications-order .select2-selection__arrow {
    height: 28px !important;
    right: 6px;
}

#add-participants-Form textarea.select2-search__field {
    margin-top: 2px !important;
    line-height: 20px !important;
    height: 40px;
}


#client-list tr:not(.detail-view), #adverseParty-list tr:not(.detail-view) {
    cursor: pointer;
}

.client-view .profile-view .profile-basic, .adverseParty-view .profile-view .profile-basic {
    margin-left: unset;
    padding-right: unset;
}


.personal-info-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.personal-info-item {
    flex: 0 0 48%;
}

.client-view .personal-info-item .title, .adverseParty-view .personal-info-item .title {
    width: 32%;
    margin-right: 3%;
    float: left;
    color: #333333;
    font-weight: 500;
}

.client-view .personal-info-item .text, .adverseParty-view .personal-info-item .text {
    width: 65%;
    float: left;
    color: #888888;
    display: block;
    overflow: hidden;
}

@media (max-width: 576px) {
    .client-view .personal-info-item, .adverseParty-view .personal-info-item {
        flex: 0 0 100%;
    }
}

#clientcases-list tr:not(.detail-view), #adversePartycases-list tr:not(.detail-view) {
    cursor: pointer;
}

.clientview .file-cont-wrap, .adverseParty-view .file-cont-wrap {
    margin-left: unset;
}


.client-view .file-options input, .adverseParty-view .file-options input {
    cursor: pointer;
    direction: ltr;
    filter: alpha(opacity=0);
    font-size: 43px;
    height: 100%;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}

.client-view .btn-file, .adverseParty-view .btn-file {
    font-size: 24px;
}

.client-view input.upload, .adverseParty-view input.upload {
    width: 1px;
}

.clientview #dropzoneDiv, .adverseParty-view #dropzoneDiv, #case-view-nav-tabs #dropzoneDiv {
    border-radius: 7px;
}

.clientview #previewDiv, .adverseParty-view #previewDiv, #case-view-nav-tabs #previewDiv {
    border-radius: 7px;
    z-index: 10000;
    margin-top: -71px;
    padding-left: unset;

}

.clientview .dz-preview, .adverseParty-view .dz-preview, #case-view-nav-tabs .dz-preview {
    margin-left: 21px
}

#contactpeople i.fa-address-book {
    font-size: 40px;
    margin-top: calc(50% - 15px);
}

#contactpeople .file-search {
    border-bottom: 0;
}

.client-form-item span {
    display: block;
    float: left;

}

.client-form-item div {
    border-left: 3px solid transparent;
    color: #333333;
    display: block;
    position: relative;
    padding: 10px 15px;
    padding-right: 15px;
    padding-left: 15px;
}

.client-form-item a {
    cursor: auto;
}

.client-form-item a span.url {
    text-decoration: underline;
    cursor: pointer;
    width: unset;
}

.external-client-form {
    max-width: 1140px;
}

.external-client-form img.logo-img {
    opacity: 33.5%;
}

.external-client-form .sysprovbox {
    width: 268px
}

.external-client-form .sysprovider {
    margin-bottom: -16px !important;
    color: #b2b4b7;
    text-align: right;
    margin-right: 19px;
}

.tooltipQmark {
    font-size: 12px;
    color: #5065d5;
    position: absolute;
    margin-left: 2px;
}

.kanban-cont .kanban-list .kanban-wrap .task-board-header {
    font-weight: 400;
}

.kanban-cont .kanban-list .kanban-wrap .task-board-header .subject, .kanban-cont .kanban-list .kanban-wrap .task-board-header .client-name {
    font-weight: 500;
}

@keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.flash {
    animation: flash 0.15s linear infinite;
}

#case_modal .progress {
    width: calc(100% - 68px);
}

#case_modal .tab-content {
    overflow: unset;
}

#case_modal .cal-icon:after {
    top: 8px
}

#case_modal .form-control.datetimepicker {
    height: 38px;
}

#case_modal textarea {
    height: 90px;
}

#case_modal .todo-list-body {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 215px;

}

#case_modal .tab-content {
    padding-top: 10px;
}

.todo-list-body .task-subject {
    cursor: pointer;
}

.green-highlight {
    border: 1px solid #019a01;
    transition: border-color 0.3s ease;
    opacity: 1;
}

.todo-list-body select.form-select {
    line-height: 1;

}

.project-task.client-view #todos {
    .smaller-buttons {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

#case_modal #todo-list .todo-list-body.smaller-todo-list-height {
    height: 175px;
}

span.status-title[data-bs-toggle="modal"], .card.panel .task-info-count {
    cursor: pointer;
}

.second-open-custom-modal .modal-content {
    border: var(--bs-border-width) solid var(--bs-border-color);

}

.todo-list-body .task-closed {
    pointer-events: none;
    color: #ccc;
    background-color: #e9ecef;
}

#edit_tasks_modal button#close-task {
    margin-left: -10px;
}

#case_modal .file-cont-wrap {
    margin-left: unset;
}

#case_modal .file-content .file-body .file-scroll {
    min-height: unset;
    height: 350px;
    overflow-y: auto;
}

#case-view-nav-tabs .file-cont-wrap {
    margin-left: unset;
}

#case-view-nav-tabs .mail-data {
    color: #616161;
}

#case-view-nav-tabs .separator {
    border-top: 1px solid #b9b9b9;
    padding-top: 5px;

}


#dashboard-mytimesheet #diagram {
    height: 200px;
    display: flex;
}


#dashboard-mytimesheet .column-container {
    height: 100%; /* örökölje a diagram magasságát */
}

#dashboard-mytimesheet .column {
    width: 39px;

    position: relative;
    top: 100px;
}

#dashboard-mytimesheet .bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    transition: height 0.5s ease;
    cursor: pointer;
}

#dashboard-mytimesheet .bar.top {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#dashboard-mytimesheet .label, .label-day {
    text-align: center;
    margin-top: 5px;
    color: black;
    position: absolute;
    bottom: -45px;
    width: 55px;
    margin-left: -8px
}

#dashboard-mytimesheet .label-day {
    bottom: -30px;
    font-size: 13px;
}

#dashboard-mytimesheet .label {
    margin-bottom: -4px;
}

/*
#dashboard-mytimesheet .bar.gray {
    background-color: #adbcc5 !important;
}
*/
#dashboard-mytimesheet .column-container:not(.weekend) .bar.gray {
    background-color: #adbcc5 !important;
}

#dashboard-mytimesheet .column-container.weekend .bar.gray {
    background-color: #E8EBEFD8 !important;
}


#dashboard-mytimesheet .column:hover .bar {
    background-color: initial;
}

#dashboard-mytimesheet .topDiv {
    width: 100%;
    position: absolute;
    height: 30px;
    text-align: center;

}

#dashboard-mytimesheet .column-container {
    padding: 8px;
    transition: background-color 0.3s ease;
    height: 195px;
    border-radius: 5px;
    position: relative;
}


#dashboard-mytimesheet .column-container:hover {
    z-index: 1000;
}

/* Hover-kor a bar-ok kiszélesednek és magasodnak, hogy könnyebb legyen rájuk kattintani.
   A column és a labelek nem mozdulnak. */
#dashboard-mytimesheet .bar {
    transition: left 0.15s ease, right 0.15s ease, height 0.2s ease, bottom 0.2s ease;
}

#dashboard-mytimesheet .topDiv {
    transition: bottom 0.2s ease;
}

@media (hover: hover) and (min-width: 768px) {
    #dashboard-mytimesheet .column-container:has(.bar:not(.novalue)):hover .bar:not(.novalue) {
        left: -8px;
        right: -8px;
    }
}

#dashboard-mytimesheet .column-container {
    background-clip: padding-box; /* A háttér nem terjed ki a szülő elem határain túlra */
}

#dashboard-mytimesheet .column-container:hover {
    background-clip: padding-box; /* A háttér nem terjed ki a szülő elem határain túlra */
}


@media (min-width: 768px) {
    #dashboard-mytimesheet #diagram {
        position: relative;
        width: calc(100% - 60px);
    }
}

@media (max-width: 767px) {
    #dashboard-mytimesheet #diagram {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    #dashboard-mytimesheet .column-container {
        min-width: 0;
        padding: 3px;
    }

    #dashboard-mytimesheet .column {
        width: 100%;
        top: 105px;
    }

    #dashboard-mytimesheet .column-container:not(:last-child) {
        margin-right: 0;
    }

    #dashboard-mytimesheet .label,
    #dashboard-mytimesheet .label-day {
        width: 100%;
        margin-left: 0;
        font-size: 11px;
    }

    #dashboard-mytimesheet .topDiv {
        font-size: 11px;
    }

    #dashboard-mytimesheet .dasboard-submitted-in-total {
        padding-left: 0;
    }

    #dashboard-mytimesheet .dasboard-submitted-in-total .pt-1 {
        padding-left: 0;
    }

    #dashboard-mytimesheet .horizontal-line-counter {
        margin-left: 15px;
    }
}


@media (min-width: 768px) {
    #dashboard-mytimesheet .column-container:not(:last-child) {
        margin-right: max(0px, calc((100% - 363px) / 7));
    }
}


#dashboard-mytimesheet .arrow {
    line-height: 22px;
    font-size: 22px;
    position: relative;

    padding: 0;
    text-align: center;
    color: #adbcc5;
    /* height: 247px; */
    width: 30px;
}

#dashboard-mytimesheet .fa-arrow-right {
    margin-left: 10px;
}


#dashboard-mytimesheet .column-container:hover {
    background-color: #E0E7E8C1;
}


#dashboard-mytimesheet .plus-button {
    display: none;
    position: absolute;
    bottom: -10px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    padding: 0;
    border-radius: 50%;
    font-size: 15px;
    background-color: #d0e7f1;
    color: #148bdf;
    border: 0;
}


#dashboard-mytimesheet .today .plus-button {
    display: block;

}


#dashboard-mytimesheet .column-container:hover .plus-button {
    display: block; /* Megjelenítjük, amikor a container fölött van az egér */
}


#dashboard-mytimesheet .plus-button {
    display: none; /* Az alapértelmezett állapot, hogy nem látható */
    position: absolute;
    bottom: -80px; /* A dátumok alá helyezzük, 10px-el lejjebb */
    left: 50%;
    transform: translateX(-50%); /* Középre igazítjuk */
    cursor: pointer; /* Mutató ikon a gomb interaktivitásához */
}

#dashboard-mytimesheet .column-container:hover .plus-button {
    display: block; /* Megjelenítjük, amikor a container fölött van az egér */
}

#dashboard-mytimesheet {
    position: relative;
}

#dashboard-mytimesheet #data-display {
    position: absolute;
    z-index: 1000; /* Biztosítja, hogy a div mindig az előtérben legyen */
    left: 100%; /* Pozícionálja a bar elem mellett, jobbra */
    top: 0;
    padding: 5px;
    border: 1px solid #666; /* Sötétebb szegély a jobb láthatóságért */
    background: rgba(0, 0, 0, 0.89); /* Enyhén átlátszó fehér háttér */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Árnyék hozzáadása */
    color: #fff;
    width: 200px; /* Fix szélesség */
    font-size: 0.9em; /* Szövegméret beállítása */
    margin-left: 5px;
    border-radius: 5px;
    opacity: 100% !important;
}

#dashboard-mytimesheet .customer {
    margin-top: 6px;
    color: #fff;
}

#dashboard-mytimesheet .casesubject {
    color: #bab6b6;
}

#dashboard-mytimesheet .task {
    color: #bab6b6;
    margin-top: 4px;
}


#dashboard-mytimesheet #diagram .horizontal-line {
    position: absolute;
    bottom: 155px; /* Lentről számítva 100px magasságban */
    left: 0;
    width: 100%; /* Teljes szélesség */
    height: 1px; /* Csík magassága */
    background-color: #adbcc5; /* Csík színe */
}

#dashboard-mytimesheet #diagram .horizontal-line-counter {
    position: absolute;
    bottom: 140px;
    left: -34px;

    z-index: 1000;
    background-color: #4c565b;
    color: #ffffff;
    border-radius: 5px;
    padding: 4px;
    font-size: 14px;
}

#dashboard-mytimesheet .column-container.weekend .label, .column-container.weekend .label-day {
    /*  .column-container.weekend .bar{*/
    opacity: 60%;
}

#dashboard-mytimesheet .column-container.weekend .bar {
    opacity: 100%;
    background-color: #eee;
}

#dashboard-mytimesheet .column.today {
    z-index: 100;
}

#dashboard-mytimesheet .goal {
    background-color: rgb(232, 249, 251);
    height: 49px;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 40px;
}

@media (max-width: 767px) {
    #dashboard-mytimesheet .goal {
        width: 100%;
    }
}


#dashboard-mytimesheet .bar.novalue {
    height: 7px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #adbcc5;
}


#dashboard-mytimesheet i.fa-arrow-right {
    /*  margin-left: -10px; */
}

#dashboard-mytimesheet .arrow:hover {
    color: #148bdf;
}

#summary .datetimepicker.customwidth {
    width: 125px;
}

#summary .card, #summarystatistic .card {
    border: 1px solid #cacaca !important;
}


#summarystatistic #loadingData.card {
    border: unset !important;
    box-shadow: unset !important;
}

.form-control-sm.form-control {
    border-radius: 5px;
    font-size: 14px;
    padding: 0.01rem .5rem;
    min-height: calc(0.01em + .5rem + calc(var(--bs-border-width) * 2));
    height: 28px;
}


.smaller-input-items .form-control-sm.form-control {
    border-radius: 5px;
    font-size: 14px;
    padding: 0.01rem .5rem;
    min-height: calc(0.01em + .5rem + calc(var(--bs-border-width) * 2));
    height: 35px;
}

.form-control-md.form-control {
    border-radius: 5px;
    padding: 0.01rem .5rem;
    line-height: 37px;
    height: 37px;
}


.smaller-input-items button.btn.btn-sm {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 32px !important;

}

.smaller-input-items .cal-icon::after {
    top: 6px
}


.smaller-input-items .cal-icon .form-control.datetimepicker {

    width: 8rem !important; /* kb. 160px */
    flex: 0 0 auto;

}

.smaller-input-items #select2-quickRange-container, .smaller-input-items #quickRange {
    min-width: 160px;
}


.select2-container.minw-12rem {
    min-width: 12rem !important;
}

#office-data-textarea {
    line-height: 1.4;
}

.placeoflogoimg {
    /* height: 100px; */
}


/* Logo preview container (optional: keeps reserved space) */
#place-of-logo {
    display: inline-flex;
    align-items: flex-start;
    max-width: 420px; /* adjustable as needed */
    min-height: 96px; /* prevents the title from jumping – adjustable */
    line-height: 0; /* remove baseline spacing */
}

/* The logo: proportional, without distortion */
#place-of-logo img.placeholderlogo {
    width: auto !important; /* prevent forced 100% width */
    height: auto !important; /* disable fixed height */
    max-width: 100%; /* prevent overflow beyond container */
    max-height: 96px; /* controls the preview height */
    object-fit: contain; /* ensures proper aspect ratio even with width/height set elsewhere */
    display: block;
}


.cal-icon-sm::after {
    top: 3px
}

.cursorpointer {
    cursor: pointer;
}

.underline {
    border-bottom: 1px solid #428bca;
    margin-bottom: -1px;
    line-height: 22px;
}

#summary span.select2-selection {
    min-width: 105px;
    max-width: 150px;
}


#summary-data ul#clients, #summary-data ul#groups, ul#summary-templates {
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
    width: 100%;
}

#summary-data ul li.active a:not(.page-link), #summary-data ul li a:hover, ul#summary-templates li a:hover, ul#summary-templates li.active a {
    border-color: #ff9b44;
    color: #ff9b44;
}

#summary-data ul li.active a.page-link {
    color: #ffffff;
}


#summary-data ul li a, ul#summary-templates li a {
    border-left: 3px solid transparent;
    border-left-color: transparent;
    color: #333333;
    display: block;
    position: relative;
    padding: 10px 15px;
}

#summary-data select:focus {
    background-color: #f0f0f0;
}

#summary-data .select2-selection--single .select2-selection__rendered.active {
    color: #ff9b44;
}

#summary-data #groups.max-two-and-half {
    max-height: 113px;
}

#summary-data .height-inherit {
    height: inherit;
}

#summary-data .slash-title {
    margin-left: 95px !important;
}

#summary-data .costs-title {
    margin-left: 104px !important;
}

#summary-data .workhours-title:not(.text-muted), #summary-data .costs-title:not(.text-muted) {
    cursor: pointer;
}

#caseClientGroupColumn {
    width: 280px;
}

#wohoursCostTablesColumn {
    width: calc(100% - 280px);
}

#summary-workhours tr, #summary-costs tr {
    cursor: pointer;
}

.locked-button, .invoiced-button, .invoiceable-button, .copy-all-workhour {
    font-size: 12px;
    min-width: 62px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.locked-button:hover, .invoiced-button:hover, .invoiceable-button:hover, .copy-all-workhour:hover {
    background-color: #f8f9fa;
}

.locked-button.submit, .invoiced-button.submit, .invoiceable-button.submit {
    margin-top: 3px;
}

.select2-container--default.select2-container--disabled .select2-selection--single, #export-button.disabled, #prepare-invoice.disabled {
    background-color: #eee; /* Háttérszín */
    cursor: not-allowed; /* Kurzor */
    border: 1px solid #dcdcdc;
}

#export-button {
    background-color: #fff;
    color: #272b41;
    height: 28px;
}

div.btn-group:has(#export-button.disabled) {
    cursor: not-allowed; /* Kurzor */
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered, #export-button.disabled {
    color: #a6a6a6;
}

button.btn.custom-delete-button {
    position: absolute;
    right: 10px;
    min-width: 100px;
}

.bootstrap-table .table th, .bootstrap-table .table td {
    white-space: normal;
    word-wrap: break-word; /* If necessary, to allow words to be broken */
}

#delete_costs_modal_custom_second_opened, #delete_workhours_modal_custom_second_opened {
    display: none;
}

#summary-workhours i.fa.fa-info-circle {
    color: #6e6eea;
}

#summary-workhours .copy-all-workhour i.fa.fa-share, i.fa.fa-share {
    color: #858484;
    cursor: pointer;
}

#summary-workhours .copy-all-workhour:hover i.fa.fa-share {
    color: #393636;
}

#summary-workhours i.fa.fa-share.copy-workhour:hover {
    color: #393636;
}

ul#summary-templates li {
    min-width: 250px;
}


/* Ikon pozicionálása */
#toggle-icon {
    position: absolute;
    top: 50%; /* Középre igazítás függőlegesen */
    right: -25px; /* Jobb oldalon kívül */
    transform: translateY(-50%); /* Pontos középre igazítás */
    cursor: pointer;
}

/* Egyszerű fade-in/fade-out animáció */
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}


ul#summary-templates.toggled {
    border: 0;
}

div ul#summary-templates:not(.toggled) {
    margin: 15px 15px 0 15px;
}

#template-selector #templates-title {
    height: 20px;
    overflow: hidden;
}

#template-selector {
    min-width: 10px;
}

.ms-6 {
    margin-left: 3.5rem !important;
}

#template-settings {
    width: calc(100% - 3.7rem);
}

.orientation-portrait {
    position: absolute;
    margin-left: -92px;
}

.orientation-landscape {
    position: absolute;
    margin-left: 100px;
}

#template-settings .submit-section #submit {
    width: 128px;
    min-width: auto;
}


#template-settings .dropdown-menu label {
    display: block;
    margin: 0;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: normal;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
}

#template-settings .dropdown-menu label:hover {
    background-color: #f8f9fa;
}

#template-settings .dropdown button {
    background-color: #fff;
    color: #272b41;
    height: 37px;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
}

#template-settings #dropzoneDiv {
    cursor: pointer;
}

#column-selector-expert .data-type-input-width {
    width: 37px;
    height: 20px;
}

#column-selector-expert .sortable-chosen {
    background-color: #f8f9fa !important;
}

#column-selector-expert .dropdown-item {
    i, input {
        cursor: pointer;
    }

}

#column-selector-expert .dropdown-item {
    cursor: auto;
}

#template-settings span.select2-selection {
    height: 37px;
}

#template-settings .select2-selection__arrow {
    height: 37px;
}

#template-settings .select2-selection__rendered {
    line-height: 37px;
}


.invoice-attachment .table.no-border th,
.invoice-attachment .table.no-border td {
    border: none;
}

.invoice-attachment .table.no-border {
    margin-bottom: 0;
}

/* Adjunk hozzá alsó bordert csak a kiválasztott sorhoz */
.invoice-attachment .border-case {
    padding-top: 2rem;
    border-bottom: 1px solid #c6cacc; /* Bootstrap alapértelmezett border színe */
}

.invoice-attachment .table td {
    padding-bottom: 0.15rem;
    padding-top: 0.15rem;
    font-size: 11px;
}


.invoice-attachment .border-case td {
    padding-top: 0.9rem;
    padding-bottom: 0;
}

.invoice-attachment .border-expenses {
    padding-top: 2rem;
    border-bottom: 1px solid #535151; /* Bootstrap alapértelmezett border színe */
}

.invoice-attachment .border-expenses td {
    padding-top: 1.4rem;
    padding-bottom: 0;
}

.invoice-attachment .table th {
    padding-bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 12px;
}

.invoice-attachment .hours-total td {
    font-size: 14px;
    padding-top: 1.3rem;
}

.invoice-attachment .hours-total td.text-end {
    font-size: 11px;
    padding-top: 1.3rem;
}

.invoice-attachment .total-due td {
    font-size: 14px;
    padding-top: 0;
    border-bottom: 1px solid #535151; /* Bootstrap alapértelmezett border színe */
}

.invoice-attachment td.company-name {
    font-size: 19px;
    padding-top: 0;
}

.invoice-attachment td.term {
    font-size: 14px;
    padding-top: 0;
}

.invoice-attachment {
    background-color: #ffffff;
    padding: 0.9rem;
    overflow-x: scroll;
    max-width: unset;

}

.invoice-attachment td.invoice-attachment {
    font-size: 16px;
    overflow: hidden;
}

.container-outsider {
    background-color: #ededed;
    padding: 1rem;
    width: 80%;
}

.container-outsider.portrait {
    width: 672px;
}

.container-outsider.landscape {
    transform: scale(0.8);
    transform-origin: center;
    width: 100%
}


#template-name-settings {
    margin-left: -6px;
}

.invoice-attachment .summ-case-hours {
    border-top: 1px solid #c6cacc !important;
}

.blur-effect {
    filter: blur(5px);
}

@keyframes moveSideToSide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
    100% {
        transform: translateX(0);
    }
}

.moving {
    animation: moveSideToSide 0.9s linear infinite;
}


#comments.tab-pane .emoji-picker {
    display: none; /* Alapértelmezés szerint rejtve */
    position: absolute;
    top: 30px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    z-index: 100;
}


#comments.tab-pane #notification-settings-dropdown {
    cursor: pointer;
    width: 241px;
    float: right;
    display: none;
    position: relative;

    background: white;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000; /* Ensure the dropdown is above other elements */
}

#comments.tab-pane .comment {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#comments.tab-pane .comment-header {
    display: flex;
    align-items: center;
}

#comments.tab-pane .comment-header img {
    width: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

#comments.tab-pane .comment-header .comment-author {
    font-weight: bold;
}

#comments.tab-pane .comment-header .elpased-time {

}

#comments.tab-pane .comment-header .edit {
    background: none;
    border: none;

    cursor: pointer;
    margin-left: auto;
}

#comments.tab-pane .comment-header .delete {
    background: none;
    border: none;

    cursor: pointer;

}

#comments.tab-pane .comment-text {
    padding-left: 40px;
}

#comments.tab-pane .comments-comment-header-actions li {
    text-decoration: none;
    outline: none;
    color: #0d6efd;
    cursor: pointer;
}


#comments.tab-pane .comment-body {
    margin-top: 10px;
}


#comments.tab-pane .edit-comment {
    width: 100%;
    height: 50px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: none;
}

#comments.tab-pane .edit-actions {
    display: none;
    margin-top: 10px;
}

#comments.tab-pane .edit-actions .save {
    padding: 5px 10px;
    background-color: green;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#comments.tab-pane .edit-actions .cancel {
    padding: 5px 10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#comments.tab-pane .comment-footer {
    margin-top: 10px;
}

#comments.tab-pane .reaction-emoji-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

#comments.tab-pane .reaction-container {
    display: flex;
    align-items: center;
}

#comments.tab-pane .emoji-picker-container {
    position: relative;
    margin-left: 10px;
}

#comments.tab-pane .toggle-emoji-picker {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.5rem;
    cursor: pointer;
    border-radius: var(--comments-border-radius);
    background-color: var(--comments-color-reaction);
    transition: background 150ms;
    font-size: 15px;
}

#comments.tab-pane .emoji-picker {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
}

#comments.tab-pane .emoji-picker .emoji {
    cursor: pointer;
    margin-right: 5px;
}

#comments.tab-pane .replies {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#comments.tab-pane .replies .reply-form {
    margin-top: 10px;
}


#comments.tab-pane .comment.reply {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}


#comments.tab-pane .replies .reply-form .reply-comment {
    width: 100%;
    height: 50px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#comments.tab-pane .replies .reply-form .submit-reply {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#comments.tab-pane .notify-box {
    text-align: right;
    margin-bottom: 20px;
}

#comments.tab-pane .notification-option {
    display: block;
    width: 100%;
    text-align: left;
}

#comments.tab-pane .notification-option span {
    float: right;
}


#comments.tab-pane #comment-form {
    margin-top: 20px;
}

#comments.tab-pane .leave-a-comment {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#comments.tab-pane .comment-submit {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#comments.tab-pane #notification-settings-button {
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.5rem;
    cursor: pointer;
    border-radius: var(--comments-border-radius);
    background-color: var(--comments-color-reaction);
    transition: background 150ms;
    font-size: 15px;
}

#comments.tab-pane .reply-comment.tinymceinlineeditor.inactive {
    min-height: 50px !important;
    max-height: 50px !important;
    height: 50px !important;

}


#comments.tab-pane .comment.highlighted {
    border: 1px solid #ff9b44;
}

#case-view-nav-tabs {
    height: 100%;
}

#case-view-nav-tabs {

}

#case-view-nav-tabs .tab-content {
    overflow-y: scroll;
}

#case-view-nav-tabs .tab-content.no-case-description {
    overflow-y: scroll;
}

.comments-comment-header-actions {
    display: flex;
    flex-wrap: wrap;
    color: var(--comments-color-text-dimmed);
    font-size: 0.8rem;
}


.comments-comment-header-actions li {
    position: relative;
    padding: 0 7px;
}

.comments-comment-header-actions li::after {
    content: "\2022"; /* Unicode for bullet */
    position: absolute;
    right: -3px;
}


.comments-comment-header-actions li:last-child::after {
    content: ""; /* Removes bullet from the last item */
}

.notification-popup {
    top: unset;
    z-index: 999999;
    position: fixed;
    right: 20px;
    bottom: 0px;
    min-height: 300px;
    display: none;
    background-color: #ffffff;
    color: #000;
    width: 360px;
    opacity: 0.95;

}


.notification-popup .noti-details {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    width: 280px;

}

.notification-list .notification-message .noti-message {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    width: 308px;
}

.notification-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    color: #000;
}

.notification-popup .notification-popup-body-content {
    color: #0B0B0B;
}

.notification-popup .title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 20px;
}

.notification-popup-header {
    height: 20px
}

.notification-popup-header i, .notification-popup-header h4 {
    font-size: 17px;
    line-height: 20px;
    margin-bottom: 0;
}

.topnav-dropdown-header .read-noti {
    color: #2552e4;
    float: right;
    font-size: 11px;
    text-transform: uppercase;
}

.notification-popup #description {
    margin-bottom: 0;
}

#calendar {

    margin: 0 auto;
}


#calendar-modal .modal {
    display: none;
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#calendar-modal .modal.is-visible {
    display: block;
}

#calendar-modal .modal-overlay {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%, 0.5);
}

#calendar-modal .modal-wrapper {
    position: absolute;
    z-index: 9999;
    top: 6em;
    left: 50%;
    width: 600px;
    margin-left: -16em;
    background-color: #fff;
    box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
}

#calendar-modal .modal-content {
    padding: 1em;
}

.calendar-event-color {

}

.calendar-event-color-list {
    height: 45px;
}

.calendar-event-color .calendar-event-color-list .event-control {
    position: relative;
    min-height: 1.5rem;
    cursor: pointer;
    width: 26px;
    height: 26px;
    margin-bottom: 10px;
    margin: 0 0.5rem 10px 0;
}

.calendar-event-color .event-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.calendar-event-color .calendar-event-color-list .event-control .board-indicator {
    width: 26px;
    height: 26px;
    display: block;
}

.calendar-event-color .board-primary .board-indicator {
    background: #ff9b44;
}

.calendar-event-color .board-success .board-indicator {
    background: #4caf50;
}

.calendar-event-color .board-info .board-indicator {
    background: #42a5f5;
}

.calendar-event-color .board-purple .board-indicator {
    background: #7460ee;
}

.calendar-event-color .board-warning .board-indicator {
    background: #ffb300;
}

.calendar-event-color .board-danger .board-indicator {
    background: #ef5350;
}

.calendar-event-color .board-pink .board-indicator {
    background: #ED4DE7B5;
}

.calendar-event-color .board-brown .board-indicator {
    background: #9F8044B5;
}


#add_calendar_event .dropdown-toggle[aria-expanded=true].custom:after, #edit_calendar_event .dropdown-toggle[aria-expanded=true].custom:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

#add_calendar_event .dropdown-toggle.custom:after, #edit_calendar_event .dropdown-toggle.custom:after {
    border-top: 0;
    border-left: 0;
    border-bottom: 2px solid #236ef1;
    border-right: 2px solid #236ef1;
    content: "";
    display: inline-block;
    pointer-events: none;
    width: 8px;
    height: 8px;
    vertical-align: 2px;
    transform-origin: 66% 66%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    -webkit-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
}

#add_calendar_event .dropdown-toggle, #edit_calendar_event .dropdown-toggle {
    display: flex;
    padding-top: 15px;

}

#add_calendar_event .color-flamingo, #contextMenu .color-flamingo, #edit_calendar_event .color-flamingo {
    background-color: #e67c73; /* Google Flamingo */
}

#add_calendar_event .color-tangerine, #contextMenu .color-tangerine, #edit_calendar_event .color-tangerine {
    background-color: #f4511e; /* Google Tangerine */
}

#add_calendar_event .color-banana, #contextMenu .color-banana, #edit_calendar_event .color-banana {
    background-color: #f6bf26; /* Google Banana */
}

#add_calendar_event .color-basil, #contextMenu .color-basil, #edit_calendar_event .color-basil {
    background-color: #0b8043; /* Google Basil */
}

#add_calendar_event .color-sage, #contextMenu .color-sage, #edit_calendar_event .color-sage {
    background-color: #33b679; /* Google Sage */
}

#add_calendar_event .color-peacock, #contextMenu .color-peacock, #edit_calendar_event .color-peacock {
    background-color: #039be5; /* Google Peacock */
}

#add_calendar_event .color-blueberry, #contextMenu .color-blueberry, #edit_calendar_event .color-blueberry {
    background-color: #3f51b5; /* Google Blueberry */
}

#add_calendar_event .color-lavender, #contextMenu .color-lavender, #edit_calendar_event .color-lavender {
    background-color: #7986cb; /* Google Lavender */
}

#add_calendar_event .color-grape, #contextMenu .color-grape, #edit_calendar_event .color-grape {
    background-color: #8e24aa; /* Google Grape */
}

#add_calendar_event .color-graphite, #contextMenu .color-graphite, #edit_calendar_event .color-graphite {
    background-color: #616161; /* Google Graphite */
}

#add_calendar_event .color-tomato, #contextMenu .color-tomato, #edit_calendar_event .color-tomato {
    background-color: #d50000; /* Google Tomato */
}

#add_calendar_event .color-default, #contextMenu .color-default, #edit_calendar_event .color-default {
    background-color: #7cb342; /* Google Default */
}

#add_calendar_event #colorDropdown .color-circle, #contextMenu .color-circle, #edit_calendar_event #colorDropdown .color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-top: -3px;
    margin-bottom: 3px;
    cursor: pointer;
}

#add_calendar_event .color-column .color-circle, #edit_calendar_event .color-column .color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin: 3px;
    cursor: pointer;
}

#add_calendar_event .color-picker, #edit_calendar_event .color-picker {
    display: none;
    position: absolute;
    z-index: 1000;
}

#add_calendar_event .dropdown-menu.show, #edit_calendar_event .dropdown-menu.show {
    display: block;
}

#add_calendar_event .color-container, #edit_calendar_event .color-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#add_calendar_event .color-column, #edit_calendar_event .color-column {
    display: flex;
    flex-direction: column;
}

#add_calendar_event #colorDropdown, #edit_calendar_event #colorDropdown {
    background-color: unset;
    border-color: #e3e3e3;
}

#add_calendar_event .custom-dropdown-menu, #edit_calendar_event .custom-dropdown-menu {
    width: 68px;
    min-width: unset;
}


#add_calendar_event .dropdown-toggle.color-choser, #edit_calendar_event .dropdown-toggle.color-choser {
    color: #514f4f;
}

#add_calendar_event .dropdown-toggle.color-choser:after, #edit_calendar_event .dropdown-toggle.color-choser:after {
    margin-left: 5px;
    margin-top: 5px;
}


#calendar .fc-event-title-container {
    white-space: nowrap;
}

#calendar .fc-event-title-container div {
    white-space: normal;
}

#calendar .fc-event-main div {
    text-align: left;

}

#calendar .fc-event-main {
    margin-top: -3px;
    line-height: 16px;
}


.fc-event-main--eq25 {
    padding: 0 !important;
    margin-top: -5px !important;
}

.fc-timegrid-event-harness.fc-timegrid-event-harness-inset:has(.fc-event-main--eq25) {
    min-height: 15px !important;
}

.fc-event-main--lt25 {
    padding: 0 !important;
    margin-top: -6px !important;
}

.fc-timegrid-event-harness.fc-timegrid-event-harness-inset:has(.fc-event-main--lt25) {
    min-height: 15px !important;
}

.day-circle {
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    margin: 0 5px;
    display: inline-block;
}

.day-circle.selected {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}


.context-menu {
    display: none;
    position: absolute;
    z-index: 10000;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.context-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.context-menu ul li {
    padding: 8px 12px;
    cursor: pointer;
}

.context-menu ul li:hover {
    background-color: #f5f5f5;
}

#contextMenu {
    position: absolute;
    width: 180px;
    z-index: 1000; /* Ensure it's on top of other elements */
    display: none;
}


.deleteEventButton:hover {
    background-color: #efeeee;
    cursor: pointer;
}

#contextMenu .check-mark {
    display: none;
    color: white;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#contextMenu .color-circle.selected .check-mark {
    display: block;
}

#contextMenu .color-circle {
    position: relative;
}

#contextMenu .deleteEventButton {
    border-bottom: 1px solid #e8dede;
}


#eventDetailsModal .d-flex.align-items-center {
    display: flex;
    align-items: center;
}

#eventDetailsModal .event-color {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    float: left;

}

#eventDetailsModal .event-title {
    display: inline-block;
    vertical-align: middle;
}

#eventDetailsModal .event-description-icon {
    display: inline-block;

}


#calendar .fc-event {
    border-radius: 4px; /* Lekerekített sarkok */
    overflow: hidden; /* Biztosítjuk, hogy a tartalom ne lógjon ki a lekerekített sarkokból */
}

#calendar .fc-event .fc-event-title, #calendar .fc-event .fc-event-time {
    padding-left: 4px;
    padding-right: 4px;
}


#eventDetailsModal .buttons button {
    width: 40px;
    height: 40px;
    float: right;
    font-size: 15px;
    border-radius: 50%;
    border: 0;
    background-color: unset;
    color: #575757;
    margin-top: 5px

}

#eventDetailsModal .buttons button:hover {
    background-color: #efeff3;
}


#eventDetailsModal .buttons button.btn-close {
    margin-top: 5px;
    font-size: 17px;
}

#eventDetailsModal .event-time {
    margin-left: 33px;
}


#eventDetailsModal .modal-body {
    padding-bottom: 22px;

}

#calendar .fc-day-past a {
    color: gray !important;
}

#calendar .fc-day-today a {
    color: #fff !important;

    font-weight: bold;
}

#calendar th.fc-day-today .fc-scrollgrid-sync-inner {
    background-color: #3796ff !important;
}

#calendar .fc-day-future a {
    color: black !important;
}

#add_calendar_event .status-toggle .checktoggle, #edit_calendar_event .status-toggle .checktoggle {
    background-color: #d5d5d5;
}


#add_calendar_event .status-toggle .check:checked + .checktoggle, #edit_calendar_event .status-toggle .check:checked + .checktoggle {
    background-color: #55ce63;
}

#dashboard-next-seven-days td.first-row {
    border-top: none;
}

/*
#dashboard-next-seven-days .table-responsive {
    height: 304px;
    overflow-y: auto;
}
*/


.content, .container-fluid {
    overflow: visible;
    min-height: 0;
}

.calendar-frame {
    overflow: hidden;
}

html[data-layout="vertical"] #calendar, html[data-layout="twocolumn"] #calendar {
    height: calc(100vh - 200px);
}

html[data-layout="horizontal"] #calendar {
    height: calc(100vh - 257px);
}

.calendar-frame #eventDetailsModal .event-title {
    width: calc(100% - 50px);
    /*    overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        max-height: 3em;
    */
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.calendar-frame #eventDetailsModal .event-description {
    overflow-y: scroll;
    max-height: calc(100vh - 400px);
}

.calendar-frame #eventDetailsModal .icon-container {
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
}

.calendar-frame #eventDetailsModal .content-container {
    float: left;
    width: calc(100% - 50px);
    padding-left: 0;
}

.private-calendar {
    cursor: not-allowed;
}

@media (min-width: 576px) {
    .calendar-switcher {
        margin-top: -10px;
        padding-bottom: 10px;
    }
}

.calendar-switcher .calendar-settings-icon {
    position: absolute;
    right: 20px;
    margin-top: 2px;

}

.calendar-switcher .calendar-settings-icon i {
    color: #737070;
}

.calendar-switcher .calendar-settings-icon i:hover {
    color: #0a53be;

}

/* Mobile (phone) calendar — Google Calendar-style full-screen day view.
   The office/personal switcher + settings cog are hidden, and the calendar
   fills the viewport (its height is driven from JS in getCalendarHeight()). */
@media (max-width: 767.98px) {
    .calendar-switcher {
        display: none;
    }

    .calendar-frame {
        margin-top: 0 !important;
    }

    #calendar {
        height: auto;
        width: 100%;
    }

    /* Google Calendar-style floating action button for adding an event. */
    .calendar-fab {
        position: fixed;
        right: 20px;
        bottom: 24px;
        width: 56px;
        height: 56px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: #4285F4;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        z-index: 1030;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .calendar-fab:active {
        background-color: #3367d6;
    }
}

/* Mobile calendar dark theme — driven by the app's own dark mode toggle
   (html[data-layout-mode=dark]), NOT the OS/browser (prefers-color-scheme).
   style.css already darkens the body/chrome (#263238 / #bbc4cc); here we only
   theme the FullCalendar grid (it uses its own --fc-* variables). Colours are
   scoped to ".calendar-frame #calendar" so the light-background event modals
   inside .calendar-frame stay readable. Palette matches the app's dark theme. */
@media (max-width: 767.98px) {
    [data-layout-mode=dark] .calendar-frame #calendar {
        --fc-page-bg-color: #263238;
        --fc-neutral-bg-color: #1f2a30;
        --fc-border-color: #2e3840;
        --fc-today-bg-color: rgba(66, 133, 244, 0.14);
        --fc-now-indicator-color: #ff5a5a;
        --fc-highlight-color: rgba(66, 133, 244, 0.22);
        --fc-more-link-bg-color: #1f2a30;
        --fc-more-link-text-color: #bbc4cc;
        --fc-list-event-hover-bg-color: #1f2a30;
        --fc-button-bg-color: #2e3840;
        --fc-button-border-color: #2e3840;
        --fc-button-hover-bg-color: #36424a;
        --fc-button-hover-border-color: #36424a;
        --fc-button-active-bg-color: #4285f4;
        --fc-button-active-border-color: #4285f4;
        --fc-button-text-color: #bbc4cc;

        background-color: #263238;
        color: #bbc4cc;
    }

    [data-layout-mode=dark] .calendar-frame #calendar .fc-toolbar-title,
    [data-layout-mode=dark] .calendar-frame #calendar .fc-col-header-cell-cushion,
    [data-layout-mode=dark] .calendar-frame #calendar .fc-timegrid-axis-cushion,
    [data-layout-mode=dark] .calendar-frame #calendar .fc-timegrid-slot-label-cushion,
    [data-layout-mode=dark] .calendar-frame #calendar .fc-list-day-text,
    [data-layout-mode=dark] .calendar-frame #calendar .fc-list-day-side-text,
    [data-layout-mode=dark] .calendar-frame #calendar .fc-list-event-title {
        color: #bbc4cc;
    }

    /* Day-number links: future days were forced black — make them readable;
       past days dimmed; today keeps its highlighted style from the base rules. */
    [data-layout-mode=dark] .calendar-frame #calendar .fc-day-future a,
    [data-layout-mode=dark] .calendar-frame #calendar .fc-col-header-cell a {
        color: #bbc4cc !important;
    }

    [data-layout-mode=dark] .calendar-frame #calendar .fc-day-past a {
        color: #7d8893 !important;
    }
}

/* Calendar add/edit event modals — tidy the stacked layout on phones (<576px,
   where Bootstrap's col-sm-* columns wrap to full width). Hides the empty spacer
   labels that leave blank gap lines and keeps start–end time (and the start date
   + its end-date toggle) on a single line. Tablet/desktop (>=576px) is untouched. */
@media (max-width: 575.98px) {
    /* Empty &nbsp; spacer labels -> drop the blank gap lines once columns stack. */
    #add_calendar_event .calendar-event-color .col-form-label,
    #edit_calendar_event .calendar-event-color .col-form-label,
    #add_calendar_event .col-sm-4 > .row.form-group > .col-sm-2.ps-0 .col-form-label,
    #edit_calendar_event .col-sm-4 > .row.form-group > .col-sm-2.ps-0 .col-form-label,
    #add_calendar_event .col-sm-5 > .row .col-form-label,
    #edit_calendar_event .col-sm-5 > .row .col-form-label {
        display: none;
    }

    /* Start time – end time on one line. */
    #add_calendar_event .col-sm-5 > .row,
    #edit_calendar_event .col-sm-5 > .row {
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 1rem;
    }

    #add_calendar_event .col-sm-5 > .row > .form-group,
    #edit_calendar_event .col-sm-5 > .row > .form-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #add_calendar_event .col-sm-5 > .row > .col-sm-5,
    #edit_calendar_event .col-sm-5 > .row > .col-sm-5 {
        flex: 1 1 0;
        width: auto;
    }

    #add_calendar_event .col-sm-5 > .row > .col-sm-1,
    #edit_calendar_event .col-sm-5 > .row > .col-sm-1 {
        flex: 0 0 auto;
        width: auto;
        text-align: center;
    }

    /* Start date input + its end-date toggle on one line. */
    #add_calendar_event .col-sm-4 > .row.form-group,
    #edit_calendar_event .col-sm-4 > .row.form-group {
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    #add_calendar_event .col-sm-4 > .row.form-group > .col-sm-10,
    #edit_calendar_event .col-sm-4 > .row.form-group > .col-sm-10 {
        flex: 1 1 auto;
        width: auto;
    }

    #add_calendar_event .col-sm-4 > .row.form-group > .col-sm-2.ps-0,
    #edit_calendar_event .col-sm-4 > .row.form-group > .col-sm-2.ps-0 {
        flex: 0 0 auto;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Match the date input height so the toggle caret sits at its vertical middle. */
        height: calc(1.5em + 0.75rem + 2px);
    }

    /* Override the desktop 15px top padding (custom.css:2712) that otherwise
       pushes the caret to the bottom; centre it within the input-height column. */
    #add_calendar_event .col-sm-4 > .row.form-group > .col-sm-2.ps-0 .dropdown-toggle.custom,
    #edit_calendar_event .col-sm-4 > .row.form-group > .col-sm-2.ps-0 .dropdown-toggle.custom {
        height: 100%;
        padding-top: 0 !important;
        align-items: center;
        justify-content: center;
    }

    /* "All day": label + switch on one vertically-centred line (was squished). */
    #add_calendar_event .col-sm-2 .form-group,
    #edit_calendar_event .col-sm-2 .form-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #add_calendar_event .col-sm-2 .form-group .status-toggle,
    #edit_calendar_event .col-sm-2 .form-group .status-toggle {
        margin-top: 0 !important;
    }

    #add_calendar_event .col-sm-2 .form-group .col-form-label,
    #edit_calendar_event .col-sm-2 .form-group .col-form-label {
        margin-bottom: 0;
        white-space: nowrap;
    }
}


#dashboard-newest-cases .card-footer a {
    color: #333333;
}

#dashboard-newest-cases .card-footer {
    text-align: center;
}

#dashboard-latest-files tr {
    line-height: 10px;
}

#workflow_modal #choseatasklist {
    height: 300px;
    overflow-y: scroll;
}

#workflow_modal #dropdownMenuButton {
    color: #222;
}

#workflow_modal #chosedtasks {
    max-height: calc(100vh - 380px);
    overflow-y: auto;
}

#workflow_modal .unselected-todo {
    opacity: 30%;
}

#add_invoice_outgoing .height-custom, #add_invoice_incoming .height-custom, #edit_invoice_outgoing .height-custom, #edit_invoice_incoming .height-custom, #view_invoice_outgoing .height-custom, #view_invoice_incoming .height-custom, #add_trials .height-custom, #edit_trials .height-custom, #view_trials .height-custom {
    height: 44px;
}

#view_invoice_outgoing div.description, #view_invoice_incoming div.description, #view_password div.description {
    height: 80px;
    overflow-y: scroll;
}


#adminbuglisting .table td, #adminbannedips .table td {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

#adminbuglisting .non-wrapping, #adminbannedips .non-wrapping {
    white-space: nowrap !important;
}

#adminbuglisting .wrapping, #adminbannedips .wrapping {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

#adminbuglisting tr.expired td {
    color: #d70a0a;
}

#subscribers .subscriber-record {
    cursor: pointer;
}

#subscribers .subscriber-record .warning {
    background-color: #7a838c;
}


#edit_subscriber_modal .checktoggle {
    height: 22px;
    width: 46px;
    background-color: #c2c0c0;
}

#edit_subscriber_modal .check:checked + .checktoggle {
    background-color: #ea0000;
}

.faq-card .card .card-header h4 a {
    font-size: 18px;
    font-weight: 600;
}

.login-logo {
    font-size: 60px;
    color: #6B7280FF;
}

.licence-expiration i {
    color: #ff0606;
}

/*
#password-manager .tree, #password-manager .tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#password-manager .tree ul {
    margin-left: 1em;
    position: relative;
}

#password-manager .tree ul ul {
    margin-left: .5em;
    position: relative;
}


#password-manager .tree ul:before {
    content: '';
    display: block;
    width: 0;
    position: absolute;
    top: 0;
    bottom: 19px;
    left: 0;
    border-left: 1px solid #000;
}

#password-manager .tree li {
    margin: 0;
    padding: 0 1em;
    line-height: 2.3em;
    position: relative;
}

#password-manager .tree ul li:before {
    content: '';
    display: block;
    width: 10px;
    height: 0;
    border-top: 1px solid #000;
    margin-top: -0.5em;
    position: absolute;
    top: 1.5em;
    left: 0;
}

#password-manager .tree ul li:last-child:before {
    height: auto;
    top: 2em;
    bottom: 0;

}

#password-manager .tree ul li.half-border:before {
    height: 50%;
    top: 1.5em;
}

#password-manager .tree ul li.half-border {
    margin-bottom: 15px;
}
*/

#password-manager .folder-settings, #password-manager .record, #password-manager .record-settings {
    cursor: pointer;
}

/* #password-manager .foldernode, */

#password-manager .treeview ul {
    background-color: unset;
}

#password-manager .treeview i.fa-regular {
    color: #d39e00 !important;
}

#password-manager .fa.fa-ellipsis-v {
    color: #000;
    margin-left: 5px;
}

.passwordowner {
    color: #818181;
}

.passwordowner .status-toggle .checktoggle::after {
    background-color: unset;
}

.passwordowner .status-toggle .check:checked + .checktoggle {
    opacity: 50%;
}

#password-manager .treeview a.selected {
    background-color: unset;
}

#password-manager .foldernode {
    margin-left: 5px;
}

#password-manager .foldernode i {
    margin-left: 0;
}

#password-manager .treeview .hitarea {
    width: 20px;
}

#password-manager .title {
    margin-left: 2px;
}

#password-manager .filetree li {
    padding: 5px 0 2px 16px;

}

#password-manager li .dropdown.kanban-action {
    float: right;
}


#password-manager .selector:hover {
    background-color: #d3d6d8 !important;
    padding: 5px;
    padding-right: 8px;
    width: calc(100% + 8px);
}

#password-manager li:has(> .selector):hover {
    /* background-color: #0a58ca !important; */
}

#deadline-calculator .duration-btn {
    width: 110px; /* Állítsa be a kívánt szélességet */
}


#deadline-calculator .bg-light {
    background-color: #fffcd3 !important;
}

#deadline-calculator .bg-success {
    background-color: #28a745 !important;
}

#deadline-calculator .border-danger {
    border: 2px solid #dc3545 !important;
}

#deadline-calculator .table-bordered {
    border: 1px solid #dee2e6;
}

#deadline-calculator td.bg-grey {
    background-color: #f7f7f7;;
}

#deadline-calculator .table-bordered th,
#deadline-calculator .table-bordered td {
    border: 1px solid #dee2e6;
}

#deadline-calculator .whichday {
    position: absolute;
    margin-left: 6px;
    margin-top: -7px;
    font-size: 12px;

    color: #c2c2c2;
}

#deadline-calculator #calendar .table th {
    width: 70px;
}

#deadline-calculator #calendar .table td {
    width: 70px;
}

#deadline-calculator #calendar .currentdate {
    width: 40px;
}

#deadline-calculator #calendar .last-month {
    display: none;
}

#deadline-calculator .highlight {
    background-color: #faf57a;
}

#deadline-calculator .yearmonth {
    background-color: #14a7ff;
    color: #fff;
}

#deadline-calculator table {
    margin-top: 5px;
}

.input-group .form-control.rounded-pill {
    border-radius: unset !important;
    border-radius: var(--bs-border-radius) !important;

}

#case_modal .input-group .form-control.rounded-pill {
    border-radius: unset !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;

}

#case_modal .tab-content:has(#comments.active.show) {
    overflow-y: scroll;
}

#case_modal .tab-content #comments {
    padding-right: 6px;
}

.activity-box .activity-list li.no-mail-recorded::before {
    background: unset;
}

#emailList .fa.fa-cloud-download {
    color: #ffffff;
}

#emailList td {
    white-space: unset;
}

#terms-and-privacy {
    margin-left: -16px;
}

.terms-and-privacy-non-hun {
    margin-left: unset !important;
    float: unset !important;
}

.caseCountLitigationSummary {
    background-color: rgba(255, 255, 255, 1); /* Fully opaque background */
    border: 1px solid #3c6af5;
    padding: 0px;
    border-radius: 7px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: -8px;
    position: absolute;
    margin-top: -9px;
    font-size: 12px;

}

#casescheme .multi.selectize-dropdown.form-control.selectize.plugin-remove_button, #dropdowncasescheme .multi.selectize-dropdown.form-control.selectize.plugin-remove_button {
    height: 100px;
}

/*
.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-wrap: nowrap;
}

canvas {
    width: 100%;
    height: auto;

}

#legend {
    display: inline-block;
    margin-left: 20px;
    text-align: left;
}

#legend span {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px;
}

.legendPoint {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    margin-bottom: 1px !important;
}

#tooltip {
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

*/

.chart-container {
    display: block;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%; /* A szülőelem teljes szélessége */
    max-width: 600px; /* Maximális szélesség beállítása */
    height: auto; /* Magasságot a tartalom határozza meg */
}

canvas {
    width: 100%; /* A canvas teljes szélessége a szülőelemhez igazodik */
    height: auto; /* A magasságot automatikusan igazítja */
    min-width: 200px; /* Minimális szélesség */
    min-height: 200px; /* Minimális magasság */
}

.legend {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Ensure the legend takes the full height of its container */
}

.legend span {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px;
}

.legendPoint {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
}

#tooltip {
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.ls-1 {
    letter-spacing: 0.1em;
}

.ls-2 {
    letter-spacing: 0.2em;
}

.ls-3 {
    letter-spacing: 0.3em;
}


@media (max-width: 991.98px) {
    .company-logo-second img {
        width: 90%;
    }
}

.copy-rights-second p {
    color: #c4c4c4;
}

.copy-rights-second a {
    color: #c4c4c4;
}

.copy-rights-second a:hover {
    color: #bfbfbf;
    text-decoration: underline;
}

.footerLogoDiv {
    margin-left: 6px;
}

.privacy.inner-content p.spacing, .terms.inner-content p.spacing {
    margin-bottom: 10px;
}

.privacy.inner-content p.details {
    margin-bottom: 10px;
}

.privacy.inner-content li.spacing {
    margin-bottom: 10px;
}

ul.indented-list {
    padding-left: 20px; /* Adjust the value as needed */
}

.press .presstable {
    margin-left: 20px;
}

.press .presstable td {
    vertical-align: initial;
}

.press.inner-content {
    .divTable {
        margin-top: 10px;
        display: table;
        width: 100%;
    }

    .divTableRow {
        display: table-row;
    }

    .divTableCell, .divTableHead {
        border: 0px solid #999999;
        display: table-cell;
        padding: 3px 10px;
    }
}

.contact-ways a {
    width: unset;
}

.contact-ways {

    color: #d5d5d5 !important;

    h3, a {
        color: #d5d5d5;
    }

    a:hover {
        color: #4f87ff;
    }

    .contact-info {
        color: #d5d5d5;
    }

    .phone {
        background-color: #454545;
        padding: 20px;

    }

    .emailfax {
        background-color: #565656;
        padding: 20px;
        border-top: 1px solid #4f87ff;
    }
}

#contact textarea {
    height: 200px;

}

.noti-message {
    color: #a1a0a0;
}

#case_modal {
    .bootstrap-datetimepicker-widget {
        margin-left: -117px;
    }

    .bootstrap-datetimepicker-widget:before,
    .bootstrap-datetimepicker-widget:after {
        left: auto;
        right: 10px;
    }
}

.privacy-policy {
    color: #0d50b3;
}

.privacy-policy:hover {
    color: #4488ef;
}

.card.casedetails td {
    white-space: unset;
}

.pricing-periods {
    font-size: 1.1rem;
}

.StripeElement {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    transition: box-shadow 150ms ease;
}

.StripeElementPaymentSettings {
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    transition: box-shadow 150ms ease;
}

#replaceCreditCard {
    table-layout: auto;
}

#replaceCreditCard td.content-width {
    white-space: nowrap;
    width: 1%;
}

#change-period:not(.disabled) {
    cursor: pointer;
}

.subscriptions-plans {
    box-sizing: border-box;
    padding: 0;
    position: relative;
}

@media (min-width: 768px) {
    .col-md-3.subscriptionsplansde {

        width: 28%;
    }

    .termsandprivacyde {
        text-align: left;
        margin-left: 10px;
    }
}

.selectPlan:hover {
    background-color: #3399ff;
    color: #fff;
    border: 1px solid #3399ff;
}

.selectPlan.selected {
    background-color: #3399ff;
    color: #fff;
    border: 1px solid #3399ff;
}

#amountPieces {
    border-bottom: 1px solid black !important;
    vertical-align: text-bottom;
    height: 21px;
}

.subscriptions-plan {
    box-sizing: border-box;
    padding: 12px 10px;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    transition: box-shadow 150ms ease;
}

.subscriptions-plan.selected {
    border: 1px solid #85baee;
}

.subscriptions-plan.hover-effect {
    border: 1px solid #2288ec;
    transition: all 0.3s ease;

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

    .selectPlan {
        padding: 6px 10px;
    }

}


#order:hover {
    padding: 8px 14px;
    margin-top: -2px;
}

.popuplar-plan {
    color: #ffffff;
    background-color: #2164c6;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    padding: 3px 7px 5px;
    border-radius: 5px;
    position: absolute;
    margin-top: -10px;
    right: 0;
    transform: translateX(-5px);
    line-height: 12px;
}

.popuplar-plan.anually {
    background-color: #2ad063;
}

table.adminChartMinimalistBlack {
    border: 2px solid #000000;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

table.adminChartMinimalistBlack td, table.adminChartMinimalistBlack th {
    border: 1px solid #000000;
    padding: 5px 4px;
}

table.adminChartMinimalistBlack tbody td {
    font-size: 13px;
}

table.adminChartMinimalistBlack thead {
    background: #CFCFCF;
    background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
    background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
    background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
    border-bottom: 3px solid #000000;
}

table.adminChartMinimalistBlack thead th {
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    text-align: left;
}

table.adminChartMinimalistBlack .current td {
    color: #be1431;
}

.referrer-table td {
    word-wrap: break-word; /* Ensures long text breaks into multiple lines */
    max-width: 250px; /* Limits the maximum width of the table cells */
    white-space: normal; /* Ensures that the text will wrap within the set max-width */
    padding: 8px 10px; /* Adds padding for better readability */
}

.referrer-table th {
    padding: 8px 10px; /* Adds padding to the header cells for consistency */
}


#summarystatistic .period span.select2-selection {
    min-width: 100px;
}

.jumpable.read .noti-title {
    color: #bdbdbd !important;
}

.notification-message .media .avatar img.read {
    opacity: 0.5;
}

#newsletters #newsletterbody {
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #0e0e0e;
    background: #fff;
}

#newsletters #userList {
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #0e0e0e;
    background: #fff;
    list-style-type: none;
    text-decoration: none;
}

#newsletters #userList .justSent {
    color: #57f123;
}


#addNewFolder .new-folder,
#dropzoneDiv.new-folder {
    border-radius: 7px;
}


#case-view-nav-tabs .file-item:nth-child(even), #case_modal .file-item:nth-child(even) {
    background-color: #f9f9f9; /* Light grey background for even rows */
}

#case-view-nav-tabs .file-item:nth-child(odd), #case_modal .file-item:nth-child(odd) {
    background-color: #ffffff; /* White background for odd rows */
}


#case-view-nav-tabs .file-header {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}


#case_modal .file-header {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

#case_modal .file-item {
    border-bottom: 1px solid #f1f1f1;
    padding: 6px 0;
    align-items: center;
}

#case-view-nav-tabs .file-item {
    border-bottom: 1px solid #f1f1f1;
    padding: 8px 0;
    align-items: center;
}

/* Drag & drop hover styles for file listing area */
.file-body-drag-hover {
    background-color: rgba(13, 110, 253, 0.05);
    border: 2px dashed #0d6efd;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.file-item-drag-hover {
    background-color: rgba(13, 110, 253, 0.15) !important;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

/* Upload button highlight when dragging anywhere over the files tab */
#dropzoneDiv.dz-drag-hover {
    border: 2px dashed #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05);
    transition: all 0.2s ease;
}

#case-view-nav-tabs, #case_modal {
    .file-item .col-md-3,
    .file-item .col-md-2,
    .file-item .col-md-4 {
        display: flex;
        align-items: center;
    }

    .file-link {
        color: #007bff;
    }

}


#caseClientGroupColumn #case-numbers-box {
    height: 20px;

    .d-flex, .d-flex .selection {
        display: none;
    }

    transition: height 0.5s ease;
}

#caseClientGroupColumn #case-numbers-box.selected {
    height: 82px;

    .d-flex, .d-flex .selection {
        display: block;
    }

    transition: height 0.5s ease;
}

#caseClientGroupColumn #client-box {
    height: 20px;

    .d-flex, .d-flex .selection {
        display: none;
    }

    transition: height 0.5s ease;
}

#caseClientGroupColumn #client-box.selected {
    height: calc(100% - 100px);
    max-height: calc(100% - 100px);

    .d-flex, .d-flex .selection {
        display: none;
    }

    .d-flex.justify-content-between {
        height: calc(100% - 5px);
    }

    transition: height 0.5s ease;
}


#caseClientGroupColumn #groups-box {
    height: 20px;

    .d-flex, .d-flex #groups {
        display: none;
    }

    transition: height 0.5s ease;
}

#caseClientGroupColumn #groups-box.selected {
    height: calc(100% - 100px);
    max-height: calc(100% - 100px);

    .d-flex, .d-flex #groups {
        display: block;
    }

    .d-flex.justify-content-between {
        height: calc(100% - 5px);
    }

    transition: height 0.5s ease;
}


#caseClientGroupColumn {
    #case-numbers-box.hover:not(.selected), #client-box.hover:not(.selected), #groups-box.hover:not(.selected) {
        height: 50px !important;
        cursor: pointer;
    }
}

#caseClientGroupColumn div.count, #inactivecases {
    float: right;
    font-size: 12px;
    color: #6c757d;
    margin-left: 4px;
}


#workhours-ratio #workhours-ratio-title-box, #billable-workhours #billable-workhours-title-box {
    position: relative;
    top: -9px;
}


#workhours-ratio #workhours-ratio-title, #billable-workhours #billable-workhours-title {
    background-color: #f8f9fa;
}

#workhours-ratio {
    min-width: 200px;
    background-color: #f8f9fa;
    border-radius: 6px;
}

#billable-workhours {
    min-width: 150px;
    background-color: #f8f9fa;
    border-radius: 6px;
}

#workhours-actual-ratio, #billable-workhours-actual {
    margin-top: -9px;
    background-color: #ffffff;
    border-radius: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px !important;
    margin-left: 5px;
    margin-right: 5px;
}


html[data-layout-mode=dark] {
    #workhours-ratio #workhours-ratio-title, #billable-workhours #billable-workhours-title {
        background-color: #263238;
    }


    #workhours-ratio, #workhours-actual-ratio, #billable-workhours, #billable-workhours-actual {
        background-color: #263238;
    }

    #workhours-ratio, #billable-workhours {
        border: 1px solid #cacaca !important;
    }

    #workhours-ratio-title, #workhours-actual-ratio, #billable-workhours-title, #billable-workhours-actual {
        color: #bbc4cc;
    }


}

textarea.form-control[name="subject"] {
    min-height: 100px;
    line-height: 1.3;
}

#add_mail_incoming .remove-option, #add_mail_outgoing .remove-option {
    position: absolute;
    right: 10px; /* Gomb pozíciója jobbra */
    top: 50%; /* Vertikális középre igazítás */
    transform: translateY(-50%); /* Tökéletesen középre helyezés */
    z-index: 9999; /* Biztosítja, hogy a gomb a legfelső rétegben legyen */
    background-color: transparent;
    border: none;
    color: red;
    cursor: pointer;
    pointer-events: auto; /* Biztosítja, hogy a gomb kattintható legyen */
}

#add_mail_incoming .remove-option:hover, #add_mail_outgoing .remove-option:hover {
    color: black;
}

#dbqueryWindow #results {
    font-size: 13px;
    max-height: 600px;
    overflow: scroll;
}

.noti-manage {
    position: absolute;
    z-index: 2000;
    font-size: 17px;
    color: #b8b6b6;
    margin-left: 9px;
    margin-top: 30px;
    width: 50px;
}

.noti-manage.margin-from-avatar {
    margin-top: 40px
}


.noti-manage i:hover {
    color: #292828;
}

.emailtooltip {
    max-width: 450px;
    white-space: normal;
}

.robot-tooltip-wide .tooltip-inner {
    width: 450px !important;
    max-width: 450px !important; /* Itt állítsd be a kívánt szélességet */
    padding: 10px; /* Igény szerint növelheted a paddinget is */
    white-space: normal; /* Engedélyezi a sortörést, ha hosszabb a tartalom */
}

#emailsTable .emails-tooltip {
    cursor: pointer;
}

.link-in-the-list {
    color: #105488 !important;
}

.link-in-the-list:hover {
    color: #3a8ccf !important;
    text-decoration: underline;
}


.link-in-the-list i.fa.fa-folder {
    color: #FFC107 !important;
}

.link-in-the-list i.fa.fa-folder:hover {
    color: #FFD700 !important;
    text-decoration: underline;
}

html[data-layout-mode=dark] {

    .link-in-the-list i.fa.fa-folder {
        color: #c89806 !important;
    }

    .link-in-the-list i.fa.fa-folder:hover {
        color: #dfa907 !important;
        text-decoration: underline;
    }
}

a.link-in-the-tasks {
    margin-top: 6px;
}

.link-in-the-tasks i.fa.fa-folder {
    color: #E8E8E8 !important;
}

.link-in-the-tasks i.fa.fa-folder:hover {
    color: #FFD700 !important;
    text-decoration: underline;
}

html[data-layout-mode=dark] {

    .link-in-the-tasks i.fa.fa-folder {
        color: #a1a19f !important;
    }

    .link-in-the-tasks i.fa.fa-folder:hover {
        color: #dfa907 !important;
        text-decoration: underline;
    }
}


#adminrobotlisting td.showrecords {
    cursor: pointer;
}

#client-box li .groupmember {
    color: #6c757d;
    font-size: 12px;

}

@media (min-width: 576px) {
    .external-client-form #previewDiv {
        right: unset;
        margin-left: 175px;
        margin-top: -300px;
    }
}

#delete_case_modal label span {
    color: #d70a0a;
}

#place-of-office-data {
    margin-left: auto;
}

.office-data-offset-number, .logo-offset-number {
    width: 50px;
    display: inline-block;
}

#workhours-table-updater {
    width: 100%;
    table-layout: fixed;
}

#workhours-table-updater th, #workhours-table-updater td {
    word-wrap: break-word;
    white-space: normal;
}

#workhours-table-updater {
    .whup-date, .whup-spenttime, .whup-action {
        width: 100px;
    }

}


.testimonial-item {
    overflow: hidden;
    cursor: pointer;
    transition: height 0.3s ease;
}

.testimonial-item.expanded {
    overflow: visible;
}

/* Add this CSS for the indicator */
.testimonial-item .more-indicator {
    text-align: center;
    font-size: 12px;
    color: #007bff;
    cursor: pointer;
}

.testimonial-item.expanded .more-indicator {
    display: none;
}

.testimonial-item p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 10; /* Number of lines to show */
    -webkit-box-orient: vertical;
    white-space: normal;
}

.testimonial-item.expanded p {
    -webkit-line-clamp: unset;
}


.laptop-tooltip-arrow {
    position: absolute;
    left: 50%;
}

.index-landing-page img {
    height: 20px;
    vertical-align: sub;
    display: unset;
}

.index-landing-page span {
    vertical-align: text-top;
    position: relative;
}

.kanban-board {
    overflow: hidden;
}

.kanban-board[data-source-board-list="task-board"] > .card-body {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
}

.kanban-board[data-source-board-list="task-board"] > .card-body > .kanban-cont {
    overflow: visible;
}

.kanban-board[data-source-board-list="case"] {
    height: 100%;
}

.kanban-board[data-source-board-list="case"] > .card-body {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
}

.kanban-board[data-source-board-list="case"] > .card-body > .kanban-cont {
    overflow: visible;
}

.casedetails .link-in-the-list i {
    margin-left: -4px;
}

.case-nav-item-counters {
    padding: 2px 4px 2px 4px;
    margin-top: -4px;
    position: absolute;
    font-size: 10px;
}

.description-expand {
    position: absolute;
    right: 18px;
    cursor: pointer;
}

.card.case-description.collapsed {
    max-height: 50px;
    overflow: hidden;
    transition: max-height 3s ease;
}

#basefee button#order {
    cursor: pointer;
}


.szamlazz-header {
    display: flex;
    justify-content: space-between;
}

.szamlazz-logo {
    width: 120px;
}

.szamlazz-company-info {
    margin-left: 20px;
    font-size: 14px;
    line-height: 1.4;
}

.szamlazz-bank-info {
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
}

.szamlazz-invoice-title {
    text-align: right;
    font-size: 21px;
    font-weight: bold;
    color: #171717; /* A fő kék szín */
}

.szamlazz-invoice-number {
    text-align: right;
    margin: 5px 0;
    margin-bottom: 14px;
    font-weight: bold;
    font-size: 13px;
}

.szamlazz-divider {
    height: 2px;
    background-color: #1a3b77;
}

.szamlazz-customer-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.szamlazz-customer-info {
    font-size: 14px;
    line-height: 1.4;
}

.szamlazz-payment-info {
    width: 35%;
}

.szamlazz-payment-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.4;
}

.szamlazz-payment-info-table tr td:first-child {
    padding-right: 10px;
    font-weight: normal;
}

.szamlazz-payment-info-table tr td:last-child {
    font-weight: bold;
    text-align: right;
}

.szamlazz-payment-due {
    background-color: #1a3b77;
    color: #fff;
    padding: 5px 10px;
    text-align: left;
    margin-top: 5px;
    font-weight: bold;
}

.szamlazz-invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.szamlazz-invoice-table th {
    background-color: white;
    text-align: right;
    padding: 8px;
    font-weight: bold;
    border-bottom: 2px solid #1a3b77;
    font-size: 14px;
    color: #000;
}

.szamlazz-invoice-table th:first-child {
    text-align: left;
}

.szamlazz-invoice-table td {
    padding: 8px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

.szamlazz-invoice-table td:nth-child(2),
.szamlazz-invoice-table td:nth-child(3),
.szamlazz-invoice-table td:nth-child(4),
.szamlazz-invoice-table td:nth-child(5),
.szamlazz-invoice-table td:nth-child(6),
.szamlazz-invoice-table td:nth-child(7) {
    text-align: right;
}


.szamlazz-item-row {
    background-color: #f9f9f9;
}

.szamlazz-totals {
    margin-top: 10px;
    text-align: right;
    font-size: 14px;
    line-height: 1.4;
}

.szamlazz-final-total {
    font-size: 17px;
    font-weight: bold;
    margin: 12px 0;
    margin-bottom: 5px;
    text-align: right;
    color: #1a3b77;
}

.szamlazz-final-total-text {
    font-weight: normal;
    font-size: 15px;
    color: #000;
    margin-bottom: 5px;
}

.szamlazz-signature-note {
    margin-bottom: 10px;
    font-size: 12px;
    float: right;
}

.szamlazz-payment-note {
    margin-top: 40px;
    /*   margin-bottom: 30px; */
    font-size: 13px;
}

/*
        .szamlazz-pagination {
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            font-size: 12px;
            align-items: center;
        }
        */

.szamlazz-pagination img {
    height: 30px;
}


.szamlazz-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;

}

.szamlazz-pagination {
    /*  position: absolute;  */
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    align-items: center;

}

.szamlazz-issue-box {
    position: absolute;
    top: 174px;
    right: -260px;
    border-left: 1px solid #9b9b9b;
    background-color: white;
    padding: 4px 8px;
    z-index: 10;
    width: 260px;
    border-top-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
}

html[lang="de"] .szamlazz-issue-box {
    right: -280px;
    width: 280px;
}

.szamlazz-issue-box-divider {
    height: 1px;
    background-color: #e6e6e6;
    margin: 6px 8px;
}

.szamlazz-delivery-title {
    font-weight: 600;
    font-size: 12px;
}

.szamlazz-delivery-block .form-check {
    margin-bottom: 2px;
    padding-left: 1.6rem;
}

.szamlazz-delivery-block .form-check-label {
    font-size: 12px;
    line-height: 1.3;
}

.szamlazz-delivery-block .szamlazz-custom-email-input {
    font-size: 12px;
    padding: 2px 6px;
}

.szamlazz-delivery-block .szamlazz-custom-email-remove {
    color: #c0392b;
    line-height: 1;
}

.szamlazz-delivery-block .szamlazz-custom-email-remove:hover {
    color: #922b21;
}

.szamlazz-delivery-block #szamlazz-custom-email-add {
    font-size: 11px;
    color: #2c7be5;
    text-decoration: none;
}

.szamlazz-delivery-block #szamlazz-custom-email-add:hover {
    text-decoration: underline;
}

.szamlazz-delivery-block .szamlazz-custom-email-template-edit {
    color: #6c757d;
    font-size: 12px;
    line-height: 1;
}

.szamlazz-delivery-block .szamlazz-custom-email-template-edit:hover {
    color: var(--flowyer-primary, #FF902F);
}

/* Email attachments — only shown when an email-based delivery is selected. */
.szamlazz-attachments-wrap .szamlazz-attachments-label {
    font-size: 12px;
    color: #495057;
}

.szamlazz-attachments-wrap .szamlazz-attachments-info {
    font-size: 12px;
    cursor: help;
}

.szamlazz-attachments-wrap .szamlazz-attachments-dropzone {
    border: 1px dashed #ced4da;
    border-radius: 4px;
    background: #fafbfc;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-size: 12px;
    color: #6c757d;
    text-align: center;
}

.szamlazz-attachments-wrap .szamlazz-attachments-dropzone:hover,
.szamlazz-attachments-wrap .szamlazz-attachments-dropzone.is-dragover {
    border-color: var(--flowyer-primary, #FF902F);
    background: #fff8f0;
    color: #495057;
}

.szamlazz-attachments-wrap #szamlazz_attachments_list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 3px;
    margin-bottom: 3px;
    font-size: 12px;
}

.szamlazz-attachments-wrap #szamlazz_attachments_list li .fa-paperclip {
    color: #6c757d;
}

.szamlazz-attachments-wrap #szamlazz_attachments_list li .szamlazz-att-name {
    flex: 1;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.szamlazz-attachments-wrap #szamlazz_attachments_list li .szamlazz-att-size {
    color: #6c757d;
    font-size: 11px;
    flex-shrink: 0;
}

.szamlazz-attachments-wrap #szamlazz_attachments_list li .szamlazz-att-remove {
    background: none;
    border: none;
    color: #dc3545;
    padding: 2px 5px;
    line-height: 1;
    flex-shrink: 0;
}

.szamlazz-attachments-wrap #szamlazz_attachments_list li .szamlazz-att-remove:hover {
    background: #f8d7da;
    border-radius: 3px;
}

/* Dark-mode pass — match the rest of the Flowyer dark palette. */
[data-layout-mode="dark"] .szamlazz-attachments-wrap .szamlazz-attachments-label {
    color: #bbc4cc;
}

[data-layout-mode="dark"] .szamlazz-attachments-wrap .szamlazz-attachments-dropzone {
    background: #1a1d20;
    border-color: #2e3840;
    color: #8d96a0;
}

[data-layout-mode="dark"] .szamlazz-attachments-wrap .szamlazz-attachments-dropzone:hover,
[data-layout-mode="dark"] .szamlazz-attachments-wrap .szamlazz-attachments-dropzone.is-dragover {
    background: #2a1f0f;
    color: #e1e7ed;
}

[data-layout-mode="dark"] .szamlazz-attachments-wrap #szamlazz_attachments_list li {
    background: #1f2429;
}

[data-layout-mode="dark"] .szamlazz-attachments-wrap #szamlazz_attachments_list li .szamlazz-att-name {
    color: #bbc4cc;
}

/* Stacked modal: lift above #prepare_invoice + thicker backdrop. */
#szamlazz_custom_email_template_modal {
    z-index: 1085;
}

.modal-backdrop.szamlazz-stacked-backdrop {
    z-index: 1080;
}

.szamlazz-customer-name {
    /* width: 60%; */
}

.szamlazz-container .szamlazz-customer-zip-city {
    height: 28px;
}

.szamlazz-container .szamlazz-customer-zip-city .szamlazz-customer-zip {
    /*
    width: 58px;
    float: left; */
}

.szamlazz-container .szamlazz-customer-zip-city .szamlazz-customer-city {
    /* width: 200px;
    float: left;*/
}

.szamlazz-container .szamlazz-customer-address {
    /* width: 266px; */
}

.szamlazz-customer-tax-title {
    height: 28px;
}

.szamlazz-customer-tax-input {
    /* width: 195px; */
    padding-right: 5px;
}

.szamlazz-container .cal-icon {
    float: right;
    width: 122px;
}

.szamlazz-item-row .szamlazz-item-row-name-and-description {
    /* width: 220px; */
}

.szamlazz-item-row .szamlazz-item-row-name-and-description.shorter {
    width: 197px;
}

.szamlazz-item-row input[name="item-pcs"] {
    width: 40px;

}


.szamlazz-item-row input[name="pcs-type"] {
    width: 50px;
}

.szamlazz-item-row span.disabled {
    background-color: unset;
}

.szamlazz-pagination .szamlazz-page-counter {
    margin-left: -150px;
}

.cal-icon .flatpickr-input {
    background-color: #fff;
}

html[data-layout-mode=dark] {
    .cal-icon .flatpickr-input {
        background-color: #252c35;
    }
}

.flatpickr-months svg {
    vertical-align: top;
}

#prepare_invoice .cal-icon::after {
    top: 4px !important;
}

.szamlazz-payment-info-table span.select2 {
    width: 122px !important;
}

#prepare_invoice .modal-lg {
    width: 870px;
}

.sortable-ghost {
    background-color: #f5f5f5;
    opacity: 0.8;
}

#prepare_invoice .modal-body {
    padding: 25px;
    padding-top: 0;
}


.szamlazz-header .logo-placeholder {
    width: 70px;
    height: 80px;
    background-color: #00c5fb;
    color: #fff; /* Set text color to white */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Horizontally center the text */
    align-items: center; /* Vertically center the text */
    font-size: 53px; /* Increase the font size */
    text-align: center; /* Ensure text alignment */
}

.szamlazz-invoice-table .delete-row {
    position: absolute;
    right: -16px;
    margin-top: -25px;
    color: #b5b5b5;
}

.szamlazz-invoice-table .delete-row i:hover {
    color: #d70a0a;
}

.szamlazz-payment-note .hide-icon.inactive {
    color: #b5b5b5;
}

.szamlazz-payment-note textarea.inactive {
    background-color: #f5f5f5;
    color: #b5b5b5;
    border: 1px solid #b5b5b5;
}

.szamlazz-payment-note .hide-icon.inactive:hover {
    color: #000000;
    cursor: pointer;
}

.szamlazz-payment-info-table .cal-icon input.disabled {
    background-color: #f9f9f9;
    color: #ccc;
}

.szamlazz-payment-info-table .cal-icon.disabled:after {
    color: #ccc;
}

body.cursor-wait,
body.cursor-wait * {
    cursor: wait !important;
}

.szamlazz-bank-info .szamlazz-bank-info-title-name-box {
    min-width: 130px;
}

.modal-backdrop-blur {
    filter: blur(2px);
    pointer-events: none;
    opacity: 0.2;
}

#manageBanksModal .bank-name-col {
    width: 35%;
}

#manageBanksModal .account-number-col {
    width: 45%;
}

#manageBanksModal .bank-manage-col {
    width: 20%;
}

.szamlazz-item-row td {
    width: auto; /* Méret igazítása a tartalomhoz */
    white-space: nowrap; /* Megakadályozza a sortörést */
}

.szamlazz-item-row td:first-child {
    width: 100%; /* Az első oszlop kitölti a fennmaradó helyet */
    white-space: normal; /* Engedélyezi a sortörést az első oszlopban */
}

.szamlazz-item-row .select2-selection__rendered {
    padding-left: 8px !important;
    padding-right: 23px !important;
}

.szamlazz-item-row .select2-selection__arrow {
    margin-left: 0 !important;
    right: 0 !important;
}

.szamlazz-customer-section .fa-save {
    color: #007bff;
    cursor: pointer;
}

.szamlazz-customer-section .fa-check {
    color: #01a812;
    cursor: pointer;
}

#workhoursyearmonthbox.summaryselectedtimerange span.select2-selection, #summary input.summaryselectedtimerange {
    border: 1px solid #428bca !important;
    /*  007bff */
}

#summary #prepare-invoice {
    height: 28px;
}

.new-feature {
    margin-left: unset !important;
    margin-top: -7px;
    font-size: 12px;
}

.careers {
    li {
        margin-left: 40px;
        list-style-type: disc;
    }

    ul {
        margin-bottom: 15px;
    }
}

.check-for-existing-clients {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;

}

.notification-message.development-notifications {
    a, .noti-title, p {
        color: #050607 !important;
    }


}

.cancel-any-time {
    /*  font-size: 12px; */
}

a.card-actions {
    color: #2d3e6f !important;
    background-color: #e8e8e8 !important;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: block;
}

a.card-actions i {
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


@media (min-width: 576px) {

    .listFiles {
        position: absolute;
        width: 232px;
        overflow-y: scroll;
        scrollbar-width: thin;
        height: 204px;
        overflow-x: hidden;
        margin-top: 33px;

    }


    .listFiles i {
        margin-left: 10px;
        cursor: pointer;
        color: #bdbdbd;
    }

    .listFiles i:hover {
        color: #000000;
    }

    .modal-files-box {
        position: absolute;
        top: 174px;
        right: -247px;
        border-left: 1px solid #9b9b9b;
        background-color: white;
        padding: 4px 8px;
        z-index: 10;
        width: 247px;
        height: 250px;
        border-top-right-radius: var(--bs-modal-inner-border-radius);
        border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    }

    .listFilesLabel {
        position: absolute;
        overflow: hidden;
        z-index: 1;
    }
}

html[data-layout-mode=dark] {
    .modal-files-box {
        background-color: #252c35;
    }
}

.folder-opener-container {
    min-height: 350px;
}

.folder-opener-container #countdown-wrapper #countdown {
    font-weight: bold;
    color: darkred;
}

.not-allowed-menu {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.4 !important;
}

.not-allowed-menu i.la-lock {
    font-size: 14px !important;
    margin-left: 5px;
}

#emailList i.text-info {
    cursor: pointer;
}

.ul-style-bullets {
    list-style-type: disc;
    margin-top: -10px;
}

.integration-toggle i {
    font-size: 12px;
}

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

.integration-item-logo {
    max-height: 60px;
}

/* Integration card hover */
.integration-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.integration-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

.integration-card-btn {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.integration-card:hover .integration-card-btn {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
    transform: scale(1.05);
}

.integration-card:hover .card-title {
    color: #2563eb !important;
}


.company_search_results {

    position: absolute;
    background: white;
    border: 1px solid #ccc;
    z-index: 1000;
    display: none;

    border-top: none;

    max-height: 200px;
    width: 100%;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 6px 6px;
}

.company-suggestion {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 15px;
    border-bottom: 1px solid #eee;
}

.company-suggestion:last-child {
    border-bottom: none;
}

.company-suggestion:hover {
    background-color: #f1f5f9;
}

.company-search-error {
    padding: 10px 12px;
    font-size: 14px;
    color: #92400e;
    background-color: #fef3c7;
    cursor: default;
}


.spinner-custom {
    display: none;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    width: 16px;
    height: 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.search_spinner_box {
    transform: translateY(-50%);
    margin-right: -20px;
}

.search_spinner_label {
    display: none;
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 4px;
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    pointer-events: none;
}

.shield-check {
    height: 14px;
}

.breadcrumb-item a:hover {
    border-bottom: 1px solid #000000;
}

.tox.tox-tinymce {
    width: 422px !important;
}

/* Newsletter editor must span the full section width, overriding the
   422px default that targets the comment popup editor */
#newsletterEditorSection .tox.tox-tinymce {
    width: 100% !important;
}


#two-col-bar .sidebar-left i.fa-regular.fa-comments, #sidebar .sidebar-menu i.fa-regular.fa-comments {
    font-size: 19px;
}

#participant-modals .removeParticipant {
    font-size: 10px;
    padding: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#portal-message-Form textarea#message {
    line-height: 20px;

}

.communicationUnreadCounter {
    color: #5e9dff;
}

#portal-list .last-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    line-height: 20px;
    height: 40px;
}

#message-container .own-message {
    background-color: #eee;
}

.communication-message-container {
    overflow-y: scroll;
    height: 400px;
    overflow-x: hidden;
}

#message-container .button-delete-message i {
    font-size: 13px;
}

#message-container .button-delete-message {
    padding: 5px 11px;
}

#message-container a {
    color: #0d6efd;
    text-decoration: none;
}

#message-container .hrdivider {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    color: #009efb;
}

#message-container .hrdivider span {
    position: absolute;
    top: -15px;
    background: #fff;
    font-weight: bold;
    font-size: 16px;
}

.client-language-selector li {
    list-style: none;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block; /* width equals content */
    background: none;
    border: 0;
    width: auto;
    white-space: nowrap; /* prevent unintended wrapping */
}

.client-language-selector a img {
    width: 20px;
    height: 20px;

}

.client-portal #message-container {
    overflow-x: hidden;
}

@media (max-width: 767.98px) {
    .client-portal #menuDropdown::after {
        content: none !important;
    }
}

@media (min-width: 767.99px) {
    .client-portal #menuDropdown::after {
        content: inline-block !important;
    }
}

html[data-client-portal=true] {
    .client-language-selector a::after {
        content: none !important; /* Remove the default arrow */
    }

    .client-portal-error-message {
        font-size: 15px;
        font-weight: bold;
        padding: 10px;
        border: 2px dashed #333;
        display: block;
        width: 100%;
    }
}


/* Desktop esetén marad a fix magasság */
.container.client-portal #message-container {
    overflow-y: scroll;
    height: 400px;
}

/* Tablet és mobilon dinamikus magasság */
@media (max-width: 991.98px) {
    /* Az új message-composer keret stílusa */

}

@media (max-width: 575.98px) {
    .container.client-portal #message-composer {
        padding: 8px;
        margin-top: 8px;
    }

    .container.client-portal .card {
        margin-bottom: 5px;
    }
}

/* Desktop esetén is legyen szép keret az űrlapnak */
@media (min-width: 992px) {
    .container.client-portal #message-composer {
        border: 1px solid #e9ecef;
        border-radius: 0.375rem;
        background-color: #ffffff;
        padding: 10px;
        margin-top: 15px;
    }
}

.swal2-title {
    font-size: 20px !important;
}

.swal2-html-container {
    font-size: 15px !important;
}

#message-container .hrdivider {
    position: relative;
}

#message-container .hrdivider span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* vízszintesen és vertikálisan középre */
    background: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 0 8px;
}

#message-search-From #onlyOwnPortals, #message-search-From #allPortals {
    color: #959798;
}

#message-search-From #onlyOwnPortals.underline, #message-search-From #allPortals.underline {
    color: #000;
}

#portal-Modal #participants + span.select2 ul li:first-child button {
    display: none;
}

#portal-Modal #participants + span.select2 ul li:first-child {
    padding-left: 5px;
}

.mw-none {
    max-width: none !important;
}

/* ===== Alap elrendezés (container-relatív) ===== */
html, body {
    height: 100%;
}

.main-wrapper {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.page-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* A content a keret: benne felül a stat, alatta a grid tölti ki a maradékot */
.content.container-fluid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Ne kényszerítsünk 100% magasságot ezekre – a flex szabályok dolgozzanak */
.content, .container-fluid {
    min-height: 0;
    overflow-x: hidden;
}

/* Globálisan csökkentett content padding */
.page-wrapper .content {
    padding: 20px;
}

/* Globálisan csökkentett card-title méret */
.card .card-title {
    font-size: 18px;
}

/* ===== Felső stat-sor ===== */
#dashboard-stat {
    flex: 0 0 auto;
    margin-bottom: 1rem;
}

/* Kompakt dash-widget (felső stat kártyák) - egy soros layout */
#dashboard-stat .dash-widget .card-body {
    padding: 0.5rem 0.9rem;
    align-items: center;
    flex-flow: row nowrap;
}

#dashboard-stat .dash-widget .card-body .dash-widget-icon {
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    width: 32px;
    margin-right: 10px;
    flex: 0 0 auto;
}

#dashboard-stat .dash-widget .card-body .dash-widget-info {
    width: auto;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    min-width: 0;
}

#dashboard-stat .dash-widget .card-body .dash-widget-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
    white-space: nowrap;
}

#dashboard-stat .dash-widget .card-body .dash-widget-info > span {
    order: -1;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Dashboard grid (offset és vh nélkül) ===== */
.dashboard-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr; /* mobil: 1 oszlop */
}

@media (min-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr; /* ≥lg: 2 oszlop */
        grid-template-rows: max-content minmax(0, 1fr);
        height: auto; /* ne kényszerítsünk 100%-ot a gridre */
    }

    .dashboard-grid > .span-rows-2 {
        grid-row: span 2;
        min-height: 0;
    }

    .dashboard-grid > .span-rows-2 > .card {
        min-height: 0;
        max-height: 100%;
    }

    /* “Következő 7 napom” */
}

/* Grid cellák és kártyák – rugalmas belső elrendezés */
.dashboard-grid > .dash-cell {
    min-width: 0;
    display: flex;
}

.dashboard-grid > .dash-cell > .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    height: auto;
}

.dashboard-grid > .dash-cell > .card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Listák a kártyán belül görgessenek (nem az egész oldal) */
#dashboard-next-seven-days .table-responsive,
#dashboard-newest-cases .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

#dashboard-newest-cases
.card-body div.row {

    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
}

#dashboard-next-seven-days .card-body > div.row {

    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
}

#dashboard-next-seven-days .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

/* ===== Timesheet – fix magasság “gyári” módra ===== */

/* belső .row ne legyen scroll konténer */
#dashboard-mytimesheet .card-body > .row {
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

/* a kártya belseje fix magas (állítható 320–380px között) */
#dashboard-mytimesheet .card-body {
    height: 360px !important;
}

/* diagram+nyilak rétegsorrend (címke látszódjon) */
#dashboard-mytimesheet .diagram-row {
    position: relative;
}

#dashboard-mytimesheet #diagram {
    position: relative;
    z-index: 2;
    overflow: visible;
}

#dashboard-mytimesheet .arrow {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 30px;
    line-height: 22px;
    font-size: 22px;
    color: #adbcc5;
}


.add-btn-sm {
    font-size: 15px;
    padding: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-top: 3px;
    padding-bottom: 0px;
    min-width: unset;
    border-radius: 7px;
}

#nextsevendayslist div.item {
    overflow: hidden !important;
}

/* subtle greying of the whole row */
.item.is-closed {
    color: #9aa0a6;
    opacity: 0.9;
    border-color: #eeeeee !important; /* if the border should also be lighter */
}

/* links inherit the grey color */
.item.is-closed a {
    color: inherit !important;
}

/* left side (col-md-9) content strikethrough – do not strikethrough icons */
.item.is-closed div {
    text-decoration: line-through !important;
}

.item.is-closed .col-md-9 i {
    text-decoration: none; /* icons should not be strikethrough */
    opacity: 0.8;
}

/* right side meta (col-md-3) should NOT be strikethrough, only lighter */
.item.is-closed .col-md-3,
.item.is-closed .col-md-3 * {
    text-decoration: none;
    opacity: 0.9;
}

/* space for the icon */
#case-view-nav-tabs .nav-tabs .nav-link.tab-has-pin {
    position: relative;
    padding-left: 28px;
}

/* default: hidden pin */
#case-view-nav-tabs .nav-tabs .tab-pin {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(-18deg);
    border: 0;
    background: transparent;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
}

#case-view-nav-tabs .nav-tabs .tab-pin i {
    transition: color .15s ease, opacity .15s ease;
}

/* NOT pinned: only visible on HOVER and should be grayish */
#case-view-nav-tabs .nav-tabs .nav-item:not(.pinned) .nav-link:hover .tab-pin {
    opacity: .85;
    visibility: visible;
    pointer-events: auto;
}

#case-view-nav-tabs .nav-tabs .nav-item:not(.pinned) .nav-link:hover .tab-pin i {
    color: #6c757d; /* grayish */
}


#case-view-nav-tabs .nav-tabs .nav-item:not(.pinned) .nav-link.active:hover .tab-pin {
    opacity: .85;
    visibility: visible;
    pointer-events: auto;
}

/* PINNED: the pin is always visible (regardless of hover) */
#case-view-nav-tabs .nav-tabs .nav-item.pinned .tab-pin {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

li.nav-item a.changeLanguage {
    color: inherit !important;
}


.version-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 1040; /* modal fölött is legyen */
}

.version-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 100%);
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1041;
    display: flex;
    flex-direction: column;
}

.version-panel.show {
    transform: translateX(0);
}

.version-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.version-title {
    font-weight: 600;
}

.version-subtitle {
    font-size: .875rem;
    color: #6c757d;
}

.version-panel-body {
    padding: 8px 0;
    overflow: auto;
    height: 100%;
}

.version-item {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    gap: 10px;
}

.version-badge {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: #eef2ff;
    color: #3b5bdb;
}

.version-meta {
    flex: 1;
    min-width: 0;
}

.version-meta .line1 {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-meta .line2 {
    font-size: .85rem;
    color: #6c757d;
}

.version-actions a.btn {
    padding: 4px 8px;
}

@media (max-width: 991.98px) {
    .version-panel {
        width: 100%;
    }
}

#adminbuglisting, #subscribers, #adminbuglisting, #orderlisting, #adminbannedips {
    overflow-x: scroll;
}

#filerequest #dropzoneDiv {
    height: 120px;
}

.external-client-form #dropzoneDiv {
    border-style: dashed;
    border-width: 2px;
    border-color: #ccc;
    height: unset !important;
}

html[data-layout-mode=blue] {
    #case-view-nav-tabs i.fa-cloud-upload {
        color: #6c757d;
    }
}

.cursor-pointer {
    cursor: pointer !important;
}

#fileRequestLink {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 5px;
    background-color: #f8f9fa;
}


.custom-modal .modal-content .btn-close.remove-email {
    position: unset;
    height: 15px;
    width: 18px;
    line-height: 17px;
    padding-bottom: 3px;
}

#emailChipsField {
    height: auto !important; /* <-- fix */
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* allow multiple rows */
    gap: .5rem .5rem;
    padding: .25rem 0; /* add a bit of vertical spacing */
}

/* make the input flexible, allow it to wrap to a new line */
#emailAddressInput {
    border: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    flex: 1 0 160px; /* can grow/shrink, can wrap to a new line */
    min-width: 140px;
    padding: .25rem 0;
    margin: 0; /* remove the -10px margin */
}

/* small extra bottom spacing for chips so they wrap nicely */
.email-chip {
    margin-bottom: .25rem;
}

/* invalid state for the entire field */

#emailChipsField.is-invalid {
    border-bottom-color: #dc3545;
    box-shadow: 0 3px 0 -2px rgba(220, 53, 69, .25);
}

#emailInvitationMessage {
    line-height: 20px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #ccc;

}

button[aria-expanded="true"] .collapse-caret {
    transform: rotate(90deg);
}

.collapse-caret {
    transition: transform .15s ease-in-out;
}

/* Alap: szürke (light) gombok, hoverre színváltás */
.btn-soft-danger {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.btn-soft-danger:hover,
.btn-soft-danger:focus {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-soft-primary {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Finom átmenet (opcionális) */
.btn-soft-danger, .btn-soft-primary {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.autosave-status-inline {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .5rem;
    opacity: 0; /* <-- without this it never fades out */
    transition: opacity .25s ease;
}

.autosave-status-inline.show {
    opacity: 1;
}

/* Inline tick inside the field (input/textarea) */
.form-control.saved-inline {
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 1rem 1rem; /* ~16px */
    padding-right: 1.8rem !important; /* leave space for the icon */
    transition: background-image .2s ease, opacity .2s ease;
}

/* JS teszi az input/textarea köré */
.autosave-holder {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* A pipa a mező jobb szélén, középen */
.autosave-badge {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.autosave-badge.show {
    opacity: 1;
}


/* Smooth transition on most inputs/textareas */
.autosave-holder .form-control,
.form-control {
    transition: border-color .6s ease, box-shadow .6s ease;
}

/* Green flash after autosave */
.autosave-flash {
    border-color: #198754 !important; /* BS success */
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25) !important;
}

/* Ha valahol csak border-bottom van (pl. rounded-0 inputok) */
.autosave-flash.autosave-only-bottom {
    box-shadow: none !important;
    border-bottom-color: #198754 !important;
}

/* Green circular badge with subtle ring */
.success-badge {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #198754; /* BS success */
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 30px;
    box-shadow: 0 0 0 6px rgba(25, 135, 84, .14);
}

/* Pop animation */
@keyframes pop-in {
    0% {
        transform: scale(.75);
        opacity: .35;
    }
    60% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.success-badge.pop {
    animation: pop-in 420ms ease;
}

/* Tighter modal look (matches your other modals) */
#successRequestModal .modal-content {
    border-radius: .8rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .15);
}

#recentFiles a[data-bs-toggle="dropdown"] {
    width: 10px;
}

.w-85 {
    width: 85% !important;
}

.onedrive-connection-cards {
    .card {
        transition: transform 0.2s;
    }

    .card:hover {
        transform: translateY(-2px);
    }
}

.onedrive-history-page {
    .collapse.show {
        visibility: visible !important;
    }
}

.ms-n1 {
    margin-left: -0.25rem !important;
}

.ms-n2 {
    margin-left: -0.5rem !important;
}

.ms-n3 {
    margin-left: -0.75rem !important;

}

.ms-n4 {
    margin-left: -1rem !important;
}

.ms-n5 {
    margin-left: -1.25rem !important;
}

.ms-n6 {
    margin-left: -1.5rem !important;
}


/* DOCX preview konténer - FIX WIDTH */
#docxPreviewContent {
    width: 21cm; /* A4 szélesség */
    max-width: 100%;
    margin: 0 auto; /* Középre igazítás */
    padding: 2cm 2cm; /* Word-szerű margók */
    background: white;
    box-sizing: border-box;

    /* Szöveg tördelés ahogy Word-ben */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Bekezdések */
#docxPreviewContent p {
    margin: 0 0 8px 0;
    line-height: 1.5;
    text-align: justify; /* Ha Word-ben sorkizárt volt */
}

/* Center alignment megőrzése */
#docxPreviewContent p[style*="text-align: center"] {
    text-align: center !important;
}

/* Whitespace megőrzése */
#docxPreviewContent {
    white-space: pre-wrap;
}

@keyframes leave-badge-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.leave-badge-blink {
    animation: leave-badge-blink 0.5s ease-in-out 2;
}

.kanban-wrap > .card.panel:first-child .dropdown-menu.show {
    position: fixed !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

.anonymizer-right-click-menu .dropdown-item:hover {
    background-color: #f8f9fa;
}

/* Hide edit button by default */
#anonymizerBox .action-btn-group .btn-edit {
    width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show edit button on hover (visible but not darkened) */
#anonymizerBox .action-btn-group:hover .btn-edit {
    width: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    opacity: 1;
}

/* Darken edit button only when hovering directly on it */
#anonymizerBox .action-btn-group .btn-edit:hover {
    background-color: #5c636a;
    border-color: #565e64;
    color: #fff;
}

/* Apply hover style to main button when group is hovered */
#anonymizerBox .action-btn-group:hover .btn-outline-secondary:first-child {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* Round main button right side by default (override btn-group) */
#anonymizerBox .action-btn-group .btn:first-child {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
    transition: border-radius 0.2s ease;
}

/* Remove right rounding on hover */
#anonymizerBox .action-btn-group:hover .btn:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#anonymizerBox #inputFieldContainer.drag-over #inputField {
    outline: 3px dashed #6c757d;
    outline-offset: -3px;
    background-color: #f0f4f8 !important;
    transition: outline 0.15s ease, background-color 0.15s ease;
}

#anonymizerBox .border-dashed {
    border-style: dashed !important;
}

/* === Anonymizer Phase Animations === */

/* Phase container */
#anonymizerBox .anon-anim-phase {
    display: inline-block;
}

/* Document SVG shared style */
#anonymizerBox .anon-anim-doc {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

/* Phase 1: Upload arrow bounce */
@keyframes anon-upload-bounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

#anonymizerBox .anon-upload-arrow {
    animation: anon-upload-bounce 1.2s ease-in-out infinite;
}

#anonymizerBox #downloadDropdown::after {
    display: none;
}

/* Phase 2: Scan line sweeps down over text lines */
@keyframes anon-scan {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(34px);
        opacity: 0;
    }
}

#anonymizerBox .anon-scan-line {
    animation: anon-scan 2s ease-in-out infinite;
}

/* ChatGPT loading animation */
#anonymizerBox .chatgpt-anim-logo {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.1));
}

@keyframes chatgpt-orbit-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes chatgpt-orbit-spin-reverse {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

#anonymizerBox .chatgpt-orbit {
    transform-origin: 32px 32px;
    animation: chatgpt-orbit-spin 4s linear infinite;
}

#anonymizerBox .chatgpt-orbit-reverse {
    transform-origin: 32px 32px;
    animation: chatgpt-orbit-spin-reverse 6s linear infinite;
}

@keyframes chatgpt-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

#anonymizerBox #chatgptPhase svg {
    animation: chatgpt-pulse 2.5s ease-in-out infinite;
}

@keyframes chatgpt-dot-blink {
    0%, 100% {
        opacity: 0.15;
    }
    50% {
        opacity: 0.6;
    }
}

#anonymizerBox .chatgpt-dot-1 {
    animation: chatgpt-dot-blink 2s ease-in-out 0s infinite;
}

#anonymizerBox .chatgpt-dot-2 {
    animation: chatgpt-dot-blink 2s ease-in-out 0.5s infinite;
}

#anonymizerBox .chatgpt-dot-3 {
    animation: chatgpt-dot-blink 2s ease-in-out 1s infinite;
}

#anonymizerBox .chatgpt-dot-4 {
    animation: chatgpt-dot-blink 2s ease-in-out 1.5s infinite;
}


#anonymizerBox #fileName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.glightbox img:hover {
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.gclose {
    display: block !important;
    opacity: 1 !important;
}

.client-form-item .copy-url-btn {
    color: #4b4949;;
}

[data-layout-mode="dark"] .client-form-item .copy-url-btn {
    color: #ffffff;
}

/* ===== Bootstrap Table: viewport-height body with sticky thead ===== */

/* Search/filter bar above the card should not grow */
.row.smaller-input-items {
    flex: 0 0 auto;
}

/* Card header (title row) should not grow */
.custom-card-header {
    flex: 0 0 auto;
}

/* Card that wraps the table fills the remaining space */
.card.bg-light.row:has(.bootstrap-table) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.card.bg-light.row > .col-md-12:has(.bootstrap-table) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.table-responsive.custom:has(.bootstrap-table) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.table-responsive.custom > .bootstrap-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.table-responsive.custom > .bootstrap-table > .fixed-table-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bootstrap-table .fixed-table-container .fixed-table-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

/* Sticky thead inside scrollable body
   Only apply when BT height option is NOT active (no .fixed-table-header sibling) */
.bootstrap-table:not(:has(.fixed-table-header table th)) .fixed-table-container .fixed-table-body table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* border-collapse eats borders on sticky elements during scroll;
       simulate top+bottom borders with box-shadow instead */
    border-top: none;
    border-bottom: none;
    box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
}

[data-layout-mode="dark"] .bootstrap-table:not(:has(.fixed-table-header table th)) .fixed-table-container .fixed-table-body table thead th {
    background-color: #1a1d21;
}

[data-layout-mode="dark"] .bootstrap-table .fixed-table-container .fixed-table-body {
    background-color: #252c35;
}

[data-layout-mode="dark"] .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
    background-color: #252c35;
}

/* Toolbar and pagination stay at fixed size */
.bootstrap-table .fixed-table-toolbar {
    flex: 0 0 auto;
}

.bootstrap-table .fixed-table-pagination {
    flex: 0 0 auto;
}

/* Summary page: make the workhours/costs cards flex columns so their
   children distribute properly within the fixed height set by JS */
#wohoursCostTablesColumn #workhours,
#wohoursCostTablesColumn #costs {
    display: flex;
    flex-direction: column;
}

#wohoursCostTablesColumn #workhours > .col-md-12,
#wohoursCostTablesColumn #costs > .col-md-12 {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#wohoursCostTablesColumn .table-responsive.custom {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0.8rem !important;
}

/* BT resetView sets padding-bottom on .fixed-table-container for header+footer.
   With border-box this eats into the container height. Remove it and let
   flexbox distribute header/body/footer inside the container. */
#wohoursCostTablesColumn .fixed-table-toolbar {
    min-height: 6px;
}

#wohoursCostTablesColumn .fixed-table-container.fixed-height {
    height: auto !important;
    padding-bottom: 0 !important;
}

#wohoursCostTablesColumn .fixed-table-container.fixed-height .fixed-table-header {
    flex: 0 0 auto;
}

#wohoursCostTablesColumn .fixed-table-container.fixed-height .fixed-table-body {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

#wohoursCostTablesColumn .fixed-table-container.fixed-height .fixed-table-footer {
    flex: 0 0 auto;
}

/* ---- Fix: duplicate header row in the summary work-hours / costs tables ----
   These two tables run in bootstrap-table fixed-header mode (summary.js
   resizeSummary() calls bootstrapTable('resetView', {height}) on resize), which
   renders the header in a separate .fixed-table-header clone. The custom flex
   layout above lays that clone out as a static flex row instead of overlaying it
   on the body table's own thead the way stock bootstrap-table does, so the body
   thead stays visible too. Depending on resetView timing the two overlap (one
   header) or drift apart (a duplicated header row) - the intermittent duplicate
   seen on both tab switch and resize.

   Fix: the clone is the single visible header; hide the body table's own thead.
   visibility:hidden (NOT display:none) on purpose - the row must stay in layout
   so it keeps its column widths, which BT's fitHeader uses to size the clone and
   which syncFooterWidths + the stored column-width restore both measure.
   display:none collapses those widths and the header/footer columns stop lining
   up with the data. Verified live: columns align (maxDiff 0), no empty gap, the
   header stays put on scroll, and exactly one header shows across repeated tab
   switches. */
#wohoursCostTablesColumn .fixed-table-container.fixed-height .fixed-table-body table thead {
    visibility: hidden;
}

/* Hide border/loading overlays that cause false vertical scroll in the body */
#wohoursCostTablesColumn .fixed-table-body .fixed-table-border {
    display: none !important;
}

#summary-statistics-list, #summary-statistics-list-sec {
    min-height: 300px;
}

/* Bootstrap-table loading indicator: replace text with spinner */
.fixed-table-loading .loading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-table-loading .loading-wrap .loading-text {
    display: none !important;
}

.fixed-table-loading .loading-wrap .animation-wrap {
    display: none !important;
}

.fixed-table-loading .loading-wrap::after {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #275bd5;
    border-radius: 50%;
    animation: flowyer-spinner 0.7s linear infinite;
}

@keyframes flowyer-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================
   Cégkapu page styles (prefix: ckp-)
   ============================================================ */

/* Scrollable table wrapper with sticky header */
.ckp-table-wrapper {
    overflow-y: auto;
    overflow-x: auto;
}

.ckp-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.ckp-table thead th {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ckp-table thead th.ckp-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ckp-table thead th.ckp-sortable:hover {
    text-decoration: underline;
}

.ckp-table thead th .ckp-sort-icon {
    font-size: 0.7em;
    margin-left: 4px;
    opacity: 0.4;
}

.ckp-table thead th.ckp-sort-active .ckp-sort-icon {
    opacity: 1;
}

/* Table cell defaults */
.ckp-table td {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    vertical-align: middle;
    padding: 8px 6px;
    font-size: 0.9em;
    line-height: 1.4;
}

.ckp-table th {
    white-space: normal;
    vertical-align: middle;
    padding: 8px 6px;
    font-size: 0.9em;
    font-weight: 600;
}

/* Message ID - col 2 */
.ckp-table td:nth-child(2) {
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
}

/* Date column (col 7) - keep it compact */
.ckp-table td:nth-child(7) {
    font-size: 0.8em;
    white-space: nowrap;
}

/* Filename column (col 8) */
.ckp-table td:nth-child(8) {
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
}

/* Allow long filenames (e.g. ATVUT17_..._NYUGTA.PDF) to wrap to multiple lines */
.ckp-attachment-row {
    align-items: flex-start !important;
    flex-wrap: nowrap;
}

.ckp-attachment-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    min-width: 0;
    flex: 1 1 auto;
}

/* Size column (col 9) - center align */
.ckp-table td:nth-child(9) {
    text-align: center;
    font-size: 0.8em;
}

/* Downloaded by column (col 10) */
.ckp-table td:nth-child(10) {
    font-size: 0.8em;
    white-space: nowrap;
}

/* Case assignment column (col 11) */
.ckp-table td:nth-child(11) {
    min-width: 200px;
}

.ckp-assign-wrapper .form-select-sm {
    font-size: 0.8em;
    padding: 0.2rem 0.4rem;
}

.ckp-assign-wrapper .btn-sm {
    font-size: 0.75em;
    padding: 0.15rem 0.5rem;
}

/* Action buttons */
.ckp-table .btn-group-sm .btn {
    font-size: 0.8em;
    padding: 0.25rem 0.4rem;
}

/* Badge styling */
.ckp-table .badge {
    font-size: 0.75em;
    white-space: nowrap;
}

/* Pagination active page styling */
.ckp-pagination .page-item.active .page-link {
    z-index: 1;
}

/* Custom form submissions - inline filter bar */
.cfs-filter-bar .form-select,
.cfs-filter-bar .form-control,
.cfs-filter-bar .input-group,
.cfs-filter-bar .input-group-text,
.cfs-filter-bar .btn,
.cfs-filter-bar .flatpickr-wrapper input.form-control,
.cfs-filter-bar .flatpickr-wrapper input.flatpickr-input {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

.cfs-filter-bar .cfs-date-wrap {
    width: 130px;
    flex-shrink: 0;
}

.cfs-filter-bar .cfs-date-wrap .flatpickr-wrapper {
    width: 100%;
}

.cfs-filter-bar .cfs-date-wrap .flatpickr-wrapper input {
    width: 100% !important;
}

/* ===== Task Board Mobile Optimization ===== */
@media (max-width: 768px) {
    .kanban-board[data-source-board-list="task-board"] > .card-body,
    .kanban-board[data-source-board-list="case"] > .card-body {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 12px;
    }

    .kanban-board[data-source-board-list="task-board"] > .card-body > .kanban-cont,
    .kanban-board[data-source-board-list="case"] > .card-body > .kanban-cont {
        gap: 12px;
        padding: 0 12px 12px;
    }

    .kanban-board .kanban-cont .kanban-list {
        min-width: calc(100vw - 60px);
        width: calc(100vw - 60px);
        margin-right: 0;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-header {
        padding: 8px 14px;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-header .status-title {
        font-size: 14px;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-wrap {
        max-height: 60vh;
        overflow-y: auto;
        padding: 10px;
        /* Visible scrollbar on mobile */
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-wrap::-webkit-scrollbar {
        width: 6px;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-wrap::-webkit-scrollbar-track {
        background: transparent;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-wrap::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: 6px;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-wrap .card {
        margin-bottom: 8px;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-wrap .task-board-header {
        padding: 10px 10px 4px;
    }

    .kanban-board .kanban-cont .kanban-list .kanban-wrap .task-board-body {
        padding: 0 10px 10px;
    }

    .kanban-board .kanban-cont .kanban-list .add-new-task {
        padding: 0 10px 10px;
    }

    /* Horizontal scroll indicator dots */
    .kanban-scroll-indicator {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 10px 0 4px;
    }

    .kanban-scroll-indicator .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
        transition: all 0.25s ease;
    }

    .kanban-scroll-indicator .dot.active {
        background: #ff9b44;
        width: 20px;
        border-radius: 4px;
    }
}

/* Hide indicator on desktop */
.kanban-scroll-indicator {
    display: none;
}

/* ===== Task Board Filter - Mobile Compact ===== */
@media (max-width: 768px) {
    /* Reduce content padding on task board */
    .page-wrapper .content:has(.kanban-board) {
        padding: 10px;
    }

    /* Reduce filter card spacing */
    .page-wrapper .row.smaller-input-items {
        margin-bottom: 0;
    }

    .page-wrapper .row.smaller-input-items .card.bg-light {
        margin-bottom: 6px;
        margin-top: 8px;
    }

    .page-wrapper .row.smaller-input-items .card.bg-light .custom-card-header {
        top: -10px;
        font-size: 15px;
    }

    .page-wrapper .row.smaller-input-items .card.bg-light .card-body.filter-row {
        padding: 6px 10px;
    }

    /* Toggle switches row compact - second row on mobile, centered */
    .page-wrapper .row.smaller-input-items .taskboardswitch.col-12 {
        font-size: 12px;
        gap: 6px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        border-left: none !important;
        flex-wrap: nowrap;
        justify-content: center !important;
    }

    /* Reduce gap between filter and board */
    .kanban-board.card.mb-0 {
        margin-top: 0 !important;
    }

    .kanban-board.card .card-body {
        padding: 8px;
    }

    /* Filter card takes full width when breadcrumb is hidden */
    .page-wrapper .row.smaller-input-items > .col-auto.ps-0 {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* ===== Task List - Mobile Fix ===== */
@media (max-width: 768px) {
    /* Disable flex-fill chain on mobile — use normal document flow */
    #task-list.card.bg-light.row {
        display: block !important;
        flex: none !important;
        min-height: auto !important;
    }

    /* Hide original Hozzáadás button on mobile */
    .page-header .btn.add-btn {
        display: none !important;
    }

    /* Mobile add button next to Teendők label */
    .btn-add-mobile {
        background-color: #f8f9fa;
        border: 1px solid #d5d5d5;
        color: rgba(0, 133, 251, 0.8);
        border-radius: 50px;
        padding: 2px 8px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        margin-left: 4px;
        vertical-align: middle;
        line-height: 1.4;
        text-decoration: none;
        margin-bottom: 2px;
    }


    .btn-add-mobile:hover {
        background-color: #fff;
        border-color: rgba(0, 133, 251, 0.8);
        color: rgba(0, 133, 251, 1);
    }

    /* Header: relative full width, label sits on card border */
    #task-list > .col-auto.custom-card-header {
        position: relative !important;
        top: -12px !important;
        margin-bottom: -12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 0 8px;
        background-color: transparent !important;
    }

    #task-list .custom-card-label {
        background-color: #f8f9fa;
        padding: 0 4px;
    }

    /* Table col: normal block */
    #task-list > .col-md-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
        min-height: auto !important;
    }

    /* Table wrapper: normal block instead of flex-fill */
    #task-list .table-responsive.custom {
        margin-top: 0 !important;
        display: block !important;
        flex: none !important;
        min-height: auto !important;
        overflow-x: auto !important;
        width: 100% !important;
    }

    #task-list .table-responsive.custom > .bootstrap-table {
        display: block !important;
        flex: none !important;
        min-height: auto !important;
        width: 100% !important;
    }

    #task-list .table-responsive.custom > .bootstrap-table > .fixed-table-container {
        display: block !important;
        flex: none !important;
        min-height: auto !important;
    }

    #task-list .bootstrap-table .fixed-table-container .fixed-table-body {
        overflow-x: auto !important;
        overflow-y: visible !important;
        min-height: auto !important;
    }

    /* Dropdowns container: flow below label */
    #task-list .task-list-box {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 10px;
        padding-bottom: 0;
    }


    /* Dropdowns side by side, equal width */
    #task-list .task-list-box #filtertaskstatus,
    #task-list .task-list-box #filtercolleagues {
        float: none !important;
        min-width: 0 !important;
        flex: 1 1 0;
    }

    /* Toolbar buttons: keep absolute but adjust position */
    #task-list .table-responsive.custom .bootstrap-table .columns.columns-right.btn-group.float-right {
        top: -24px !important;
        right: 5px !important;
        height: auto !important;
    }

    #task-list .table-responsive.custom .bootstrap-table .bs-bars.float-left {
        top: -20px !important;
        left: 0 !important;
    }

    /* Search filter: remove left offset on search input */
    .smaller-input-items .card-body.filter-row > .row.g-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .smaller-input-items .card-body.filter-row > .row.g-2 > .col {
        padding-left: 0 !important;
    }

    /* Search filter card: balanced internal spacing */
    .smaller-input-items .card-body.filter-row {
        padding-top: 10px !important;
        padding-bottom: 6px !important;
        margin-bottom: 8px !important;
    }

    /* Remove vertical line before date pickers on mobile */
    .smaller-input-items .card-body.filter-row .border-start {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Search filter collapse on mobile */
    .smaller-input-items .custom-card-header[data-bs-toggle="collapse"] {
        cursor: pointer;
        user-select: none;
    }

    .search-collapse-icon {
        transition: transform 0.3s ease;
        font-size: 14px;
    }

    .custom-card-header[aria-expanded="true"] .search-collapse-icon {
        transform: rotate(180deg);
    }

    /* Hide card border when search filter is collapsed */
    .smaller-input-items.card.bg-light {
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    .smaller-input-items.card.bg-light:has(.filter-row.collapse.show) {
        border: 1px solid rgba(0, 0, 0, 0.125) !important;
        background-color: #f8f9fa !important;
    }
}

.submit-section .submit-btn-group {
    border-radius: 50px;
    overflow: hidden;
}
.submit-section .submit-btn-group .submit-btn-icon {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 0;
}
.submit-section .submit-btn-group .submit-btn-icon:first-child {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.submit-section .submit-btn-group .submit-btn-icon:last-child {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
#edit_tasks_modal .submit-btn-group .btn.submit-btn-icon-danger:hover,
#edit_tasks_modal .submit-btn-group .btn.submit-btn-icon-danger:focus,
#edit_tasks_modal .submit-btn-group .btn.submit-btn-icon-danger:active {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

/* Subscribers instance filter: softer orange than the theme primary */
.instance-filter .btn-outline-primary {
    color: #d98a45 !important;
    border-color: #f0c08a !important;
    background-color: transparent !important;
}
.instance-filter .btn-outline-primary:hover,
.instance-filter .btn-outline-primary:focus,
.instance-filter .btn-outline-primary.active {
    color: #fff !important;
    background-color: #e8a35e !important;
    border-color: #e8a35e !important;
}

/* Invoice modal — force-hide every scrollbar inside the modal in Chrome
   / Webkit. The previous targeted rule (`.modal-body::-webkit-scrollbar`)
   didn't catch the visible bar — either the scrolling element is .modal
   or .modal-content (depending on browser, viewport and modal-dialog-
   scrollable interplay), or some Bootstrap rule outranked it. The
   universal-descendant + outer-element + body + content sweep with
   !important guarantees every scrolling surface inside this modal goes
   bar-less. Firefox uses overlay scrollbars by default, so the same
   state stays invisible there — scrollbar-width: none keeps it that way
   for any Firefox versions that fall back to classic.
   Wheel, keyboard and touch scrolling are untouched — only the visible
   gutter is removed. */
#invoice_form_modal,
#invoice_form_modal *,
#invoice_form_modal .modal-content,
#invoice_form_modal .modal-body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#invoice_form_modal::-webkit-scrollbar,
#invoice_form_modal *::-webkit-scrollbar,
#invoice_form_modal .modal-content::-webkit-scrollbar,
#invoice_form_modal .modal-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

/* Invoice modal — VAT-reclaim columns auto-size to their widest label /
   option text via max-content, so every translated label (HU, EN, DE, IT,
   RO) fits without overflow or wasted space. min-width keeps the Select2
   widgets usable even when a translation is unusually short. col-auto on
   the column itself (from Bootstrap) provides the gutter padding. */
.js-vat-reclaim-col .input-block,
.js-vat-percent-col .input-block {
    width: max-content;
    min-width: 100px;
}

/* Enlarge the click target of the 3-dot (ellipsis) action menus app-wide.
   The icon sits inside <a data-bs-toggle="dropdown">; an invisible ::after
   overlay extends the hit area a few px in every direction. A click on the
   overlay lands on the icon and bubbles up to the toggle, so Bootstrap opens
   the dropdown without any JS or Blade changes. Font Awesome renders the
   glyph via ::before, so ::after is free to use here. */
a[data-bs-toggle="dropdown"] .fa-ellipsis-v {
    position: relative;
}

a[data-bs-toggle="dropdown"] .fa-ellipsis-v::after {
    content: "";
    position: absolute;
    inset: -12px;
}

/* Work-hour modals: the hour and minute fields are one duration in two units,
   so they share a single bordered group joined by a link "clasp" in the middle.
   .wh-flash pulses the field the sync just auto-filled so the link is felt. */
.wh-time-group {
    display: flex;
    align-items: stretch;
    margin-top: 4px;
    /* Zero the Bootstrap ".row > *" gutter padding (12px each side) the frame
       inherits when it sits directly in a .row, so the fields are flush inside
       the border; spacing comes from the inputs' own padding. */
    padding: 0;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
    background: #fff;
}

/* The value is a native input whose vertical text placement breaks under flex,
   so keep each field a plain block at the original Flowyer input size (the value
   renders fully there) and place the unit label absolutely beside the number. */
.wh-time-group .wh-time-field {
    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: auto !important;
    margin-bottom: 0;
}

.wh-time-group .form-control {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    padding: 8px 12px 8px 10px !important;
    text-align: right;
}

.wh-time-group .focus-label {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 10px !important;
    right: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    color: #6c757d !important;
    opacity: 1 !important;
    white-space: nowrap;
}

/* Bootstrap form-floating draws a body-bg strip behind the label (::after) to
   "cut" the input border for the floating effect; not needed here, and it left
   an empty patch under the number. */
.wh-time-group .focus-label::after {
    display: none !important;
    content: none !important;
}

/* The clasp is a button: clicking it toggles the time-entry mode for every
   work-hour modal (sync hour<->minute vs. composite hour+minute add-up). Reset
   the native button chrome and tint it brand-cyan so users see it is clickable. */
.wh-time-clasp {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #29b6d8;
    font-size: 14px;
    border: none;
    border-left: 1px solid var(--bs-border-color, #ced4da);
    border-right: 1px solid var(--bs-border-color, #ced4da);
    background-color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.15s ease;
}

.wh-time-clasp:hover,
.wh-time-clasp:focus-visible {
    color: #1f8fab;
    outline: none;
}

/* Composite ("add up") mode: the hour and minute fields are independent and add
   together on save. Signalled only by a broken-chain icon (set in
   workhour-time-sync.js applyClaspVisual) - the background stays white in both
   modes, the icon colour just deepens slightly. */
.wh-time-clasp.wh-mode-composite {
    color: #1f8fab;
}

@keyframes whFlash {
    0% {
        background-color: rgba(41, 182, 216, 0.22);
    }
    100% {
        background-color: transparent;
    }
}

.wh-flash {
    animation: whFlash 0.55s ease-out;
}

/* Several work-hour modals lay the time group and its icon/quick buttons in one
   row with no inner col wrapper (unlike #add_workhours / #add_working_hour,
   which nest the group in a col-sm-6), so the group stretches full-width and
   pushes the buttons onto their own line. Cap the group width so the buttons
   line up to its right on the same row; align-self:flex-start keeps the frame at
   its natural height (no stretch) AND top-aligned with the buttons -- centering
   would drop it below them, because the quick-button column's mb-3/mt-sm-1
   margins make the row taller. (#view_workhours has no buttons but is capped
   too, for consistency.) */
#close_task_modal .wh-time-group,
#close_tasks_modal .wh-time-group,
#close_tasks_modal_custom_second_opened .wh-time-group,
#edit_workhours .wh-time-group,
#view_workhours .wh-time-group {
    flex: 0 1 340px;
    align-self: flex-start;
}

/* The time label + frame are direct children of the .row (no col wrapper), so
   the row's negative gutter margins pull them one gutter-width left of the
   col-padded fields above (Megbízó / Tevékenység). Zero those row margins so the
   content lines up, on desktop and mobile alike. (The close modals center their
   row instead, so they are unaffected and intentionally not listed here.) */
#edit_workhours .row:has(> .wh-time-group),
#view_workhours .row:has(> .wh-time-group) {
    margin-left: 0;
    margin-right: 0;
}
/* The edit/view time labels (.col-form-label) carry a 12px left padding, so the
   label text is indented from the frame. Zero it (the .ps-0 effect) to align the
   text with the frame's left edge. Done in CSS because .col-form-label is not
   unique in the markup (Megbízó / Felelős use it too); the :has() selector hits
   only the work-hour rows. */
#edit_workhours .row:has(> .wh-time-group) > label,
#view_workhours .row:has(> .wh-time-group) > label {
    padding-left: 0;
}

/* The close modals center their time rows, and the label carries a large legacy
   margin-left (.spent-time-desktop), so the label and frame don't line up. Align
   both left like the edit/view modals: left-justify the row, zero its gutter
   margins, and drop the label's margin. */
#close_task_modal .row:has(> .wh-time-group),
#close_tasks_modal .row:has(> .wh-time-group),
#close_tasks_modal_custom_second_opened .row:has(> .wh-time-group) {
    justify-content: flex-start !important; /* beats Bootstrap's .justify-content-center */
    margin-left: 0;
    margin-right: 0;
}
#close_task_modal .row:has(> .wh-time-group) > label,
#close_tasks_modal .row:has(> .wh-time-group) > label,
#close_tasks_modal_custom_second_opened .row:has(> .wh-time-group) > label {
    margin-left: 0;
    padding-left: 0; /* = .ps-0: pull the label text flush with the frame's left edge */
}

/* On phones the quick/copy buttons wrap to their own line; let the time frame
   fill the row (instead of staying 340px-wide on the left), and add a small
   vertical gap above the wrapped button row. */
@media (max-width: 575.98px) {
    #close_task_modal .wh-time-group,
    #close_tasks_modal .wh-time-group,
    #close_tasks_modal_custom_second_opened .wh-time-group,
    #edit_workhours .wh-time-group,
    #view_workhours .wh-time-group {
        flex-basis: 100%;
    }
    #close_task_modal .wh-time-group + div,
    #close_tasks_modal .wh-time-group + div,
    #close_tasks_modal_custom_second_opened .wh-time-group + div,
    #edit_workhours .wh-time-group + div {
        margin-top: 8px;
    }
}

/* Summary: an excluded work-hour / cost row. The row stays listed (so it can be
   un-excluded) but is dropped from the billable totals and the generated
   summary/invoice, so it is visually de-emphasised. The exclude toggle itself is
   kept fully legible and clickable. */
#summary-workhours tbody tr.summary-excluded > td,
#summary-costs tbody tr.summary-excluded > td {
    opacity: 0.45;
    background-color: #f5f5f5;
}

#summary-workhours tbody tr.summary-excluded > td .summary-exclude-toggle,
#summary-costs tbody tr.summary-excluded > td .summary-exclude-toggle {
    opacity: 1;
}

.summary-exclude-toggle {
    cursor: pointer;
}

/* Invalid select2 field in the invoice modal. select2 hides the native
   <select>, so Bootstrap's .is-invalid red border never shows; invoices.js
   flags the .select2-container instead, and this paints its selection box
   red to match the other required-but-empty inputs. */
#invoice_form .select2-container.is-invalid .select2-selection--single,
#invoice_form .select2-container.is-invalid .select2-selection--multiple {
    border-color: #dc3545;
}

/* ZIP download progress bar (case folder download modal). Filled by
   zip.progress Pusher events which now carry a byte-based percentage. */
.zip-progress {
    margin-top: 6px;
}

.zip-progress__track {
    width: 100%;
    height: 14px;
    background: #e9ecef;
    border-radius: 7px;
    overflow: hidden;
}

.zip-progress__fill {
    width: 0;
    height: 100%;
    background: var(--flowyer-primary, #FF902F);
    border-radius: 7px;
    transition: width 0.3s ease;
}

.zip-progress__label {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

html[data-layout-mode="dark"] .zip-progress__track {
    background: #2e3840;
}

html[data-layout-mode="dark"] .zip-progress__label {
    color: #bbc4cc;
}



/* Summary status filter: multi-select checkbox dropdown that replaced the
   single select2. Sized and coloured to match the neighbouring select2 filters
   (28px tall, 14px text, #dcdcdc border) so the filter row stays uniform. */
#status-filter .status-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 175px;
    height: 28px;
    padding: 0 8px 0 15px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    color: #272b41;
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    text-align: left;
    white-space: nowrap;
}

#status-filter .status-filter-toggle:focus {
    box-shadow: none;
}

#status-filter .status-filter-toggle::after {
    /* Mirror the select2 arrow: same colour, same size, right aligned. */
    margin-left: 8px;
    border-top-color: #dcdcdc;
    border-width: 6px 6px 0;
}

#status-filter #status-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

#status-filter .status-filter-menu {
    min-width: 100%;
    padding: 4px 0;
    font-size: 14px;
}

#status-filter .status-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 15px;
    white-space: nowrap;
    cursor: pointer;
}

#status-filter .status-filter-checkbox {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

html[data-layout-mode="dark"] #status-filter .status-filter-toggle {
    background-color: #263238;
    border-color: #2e3840;
    color: #bbc4cc;
}

html[data-layout-mode="dark"] #status-filter .status-filter-toggle::after {
    border-top-color: #bbc4cc;
}

html[data-layout-mode="dark"] #status-filter .status-filter-menu {
    background-color: #263238;
    border-color: #2e3840;
}

html[data-layout-mode="dark"] #status-filter .status-filter-option {
    color: #bbc4cc;
}

html[data-layout-mode="dark"] #status-filter .status-filter-option:hover {
    background-color: #2e3840;
}

/* "(new)" marker next to a sidebar menu item. White reads as a subtle highlight
   against the default dark sidebar; on the light sidebar theme white would be
   invisible, so it switches to the primary blue. The attribute lives on <html>
   (set in mainlayout and restored from sessionStorage by layout.js).
   !important is required: the theme colours menu text through deeper selectors
   (e.g. .sidebar .sidebar-menu ul li a span), which outrank a single class. */
.menu-new-badge {
    color: #fff !important;
}

html[data-sidebar="light"] .menu-new-badge {
    color: #0d6efd !important;
}

/* Authenticated header: document search is left-aligned, right after the
   logo/toggle, so the right-side action cluster (bell, user, language) isn't
   crowded. Floats left in the header flow so it follows the logo even when the
   mini-sidebar collapses. Hidden below 992px, where the search was already
   hidden anyway. */
.header .header-search-left {
    float: left;
    height: 60px;
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.header .header-search-left .top-nav-search form {
    margin-top: 0;
}

/* "Új" badge pinned to the top-right corner of the header search box, to flag
   the newly available global search. Decorative: pointer-events off so it never
   blocks the field or the submit button. */
.header .header-search-left .top-nav-search {
    position: relative;
}

.header-search-new-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    z-index: 3;
    padding: 1px 6px;
    border-radius: 999px;
    background: #2c7be5;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    pointer-events: none;
}

@media (max-width: 991px) {
    .header .header-search-left {
        display: none;
    }
}

/* Internal top-bar language switcher: the collapsed toggle shows the flag only.
   The language name next to the flag is redundant, so it is hidden while
   collapsed; every language name still appears inside the open dropdown. */
.header .user-menu.nav > li.flag-nav .dropdown-toggle > span {
    display: none;
}