.sidebar {
    border-right: solid 1px #EBEBEB !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}
.settings-footer {
    border-top: solid 1px #e2e8ee;
}
.offcanvas .select2 {
    /*width:100% !important;*/
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top:-3px !important;
    min-width: 6em;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
    margin-top: 2px !important;
}
#offcanvasTorzsAdatDataTableRendezes .offcanvas-body {
    margin:0 !important;
    padding-left:20px !important;
    padding-right:20px !important;
    padding-bottom:20px !important;
    padding-top:20px !important;
}
.sortable-ghost {
    opacity: .5;
    background: #EBEBEB;
}

.dataTables_info, .dataTables_paginate {
    padding-top: 15px !important;
}

.upload-demo .upload-demo-wrap,
.upload-demo.ready .upload-msg {
    display: none;
}

.upload-demo.ready .upload-demo-wrap {
    display: block;
}

.upload-demo-wrap {
    width: 300px;
    height: 300px;
    margin: 15px 0 50px 0;
}

.upload-msg {
    text-align: center;
    padding: 110px 50px 50px 50px;
    font-size: 22px;
    color: #aaa;
    background: #f6f6f6;
    width: 300px;
    height: 300px;
    margin: 15px 0 -10px 0;
    border: 1px solid #aaa;
}

.chart-action {
    transition: background .25s,border-color .25s;
    background: rgba(40,44,52,.05);
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 6px;
    color: #3080d0;
    text-decoration: none !important;
    display: inline-block;
    font-size: .8rem;
    padding: 8px 16px;
    margin: 0 8px 8px 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.chart-action:hover {
    background: rgba(48,128,208,.15);
    border-color: rgba(48,128,208,.2);
    color: #3080d0;
}

.theme-default-content:not(.custom) a:hover {
    text-decoration: underline;
}

.sidebar {
    z-index: 10 !important;
}

.DataTableCustomFilter {
    width: 30% !important;
    min-width: 30% !important;
    max-width: 30% !important;
}
.DataTableCustomHeaderButton {
    width: 70% !important;
    min-width: 70% !important;
    max-width: 70% !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 200px !important;
}

.fc-col-header-cell-cushion {
    text-decoration: none !important;
}

.fc-scrollgrid-sync-inner a, .fc-scrollgrid-sync-inner a:hover, .fc-scrollgrid-shrink-frame a, .fc-scrollgrid-shrink-frame a:hover {
    text-decoration: none !important;
    color: #6c757d !important;
}

/* --- ALAP HOVER BEÁLLÍTÁSOK --- */
.chat-row .reply-icon {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
    font-size: 1.1rem;
    cursor: pointer;
}

.chat-row:hover .reply-icon {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* --- ALAP HOVER BEÁLLÍTÁSOK --- */
.chat-row .chat-actions {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.chat-row:hover .chat-actions {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Az ikonok alap méretezése és formázása */
.chat-row .action-btn {
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.1s ease;
    text-decoration: none;
}
.chat-row .action-btn:hover {
    transform: scale(1.15); /* Amelyik ikon fölé mész, az picit megnő */
}

/* A lebegő válaszcsík pozicionálása */
.reply-preview-floating {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    /* Kitoljuk saját magassága + a belső paddingnyit felfelé */
    transform: translateY(-100%);
    margin-bottom: 0 !important;
    border-radius: 0 !important; /* Szebb, ha rásimul az alsó doboz tetejére */
    border-left: none !important;
    border-right: none !important;
    z-index: 10; /* Biztosítja, hogy az üzenetek felett jelenjen meg */
}

/* --- ELHELYEZKEDÉS FÜGGVÉNYÉBEN --- */

/* 1. Ha a SAJÁT üzeneted (JOBB oldalon van) */
.chat-row.justify-content-end .chat-actions {
    order: 1;
    margin-right: 0px; /* Távolság a kék buboréktól */
}
.chat-row.justify-content-end .chat-bubble {
    order: 2;
}

/* 2. Ha a PARTNER üzenete (BAL oldalon van) */
.chat-row:not(.justify-content-end) .chat-bubble {
    order: 1;
}
.chat-row:not(.justify-content-end) .chat-actions {
    order: 2;
    margin-left: 0px; /* Távolság a szürke buboréktól */
}

/* A nyilat itt is megfordítjuk a bal oldali üzenetnél, hogy befelé mutasson */
.chat-row:not(.justify-content-end) .reply-btn {
    transform: scaleX(-1);
    display: inline-block;
}
/* Biztosítjuk, hogy ha a megfordított nyíl fölé viszik az egeret, a hover nagyítás is működjön */
.chat-row:not(.justify-content-end) .reply-btn:hover {
    transform: scaleX(-1) scale(1.15);
}

/* A buborékon belüli idézett üzenet doboza */
.chat-bubble .quoted-message-box {
    background-color: rgba(0, 0, 0, 0.05); /* Nagyon finom, áttetsző sötétítés, ami alkalmazkodik a kék/szürke háttérhez is */
    border-left: 3px solid #212529;       /* A bal oldali vastag függőleges sötét vonal */
    font-size: 0.875rem;
    border-radius: 4px 0 0 4px !important; /* Csak a bal oldala legyen kerekített a vonal miatt */
    max-width: 100%;
    overflow: hidden;
}

/* Kicsit igazítunk a nevek távolságán, ha van idézet */
.chat-bubble .quoted-message-box + .fw-bold {
    margin-top: 5px;
}

/* Csatolt kép doboza és formázása */
.chat-sent-img {
    max-width: 280px;      /* Maximális szélesség a buborékon belül */
    max-height: 200px;     /* Maximális magasság, hogy ne nyújtsa meg a chatet */
    object-fit: cover;     /* Ha a kép arányai mások, szépen vágja meg az előnézetben */
    display: block;
    transition: opacity 0.15s ease-in-out;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Ha a felhasználó a kép fölé viszi az egeret, jelezzük, hogy kattintható */
.chat-sent-img:hover {
    opacity: 0.9;
}