/* CHAT MESSAGES LIST - LIST */
.chat .messages-list {
    /*flex: 1;
    overflow: auto;*/
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
}

.chat .message-item-margin {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    min-width: 30px;
}

@media screen and (max-width: 992px) {
    .chat .message-item-margin {
        min-width: 10px;
    }
}

.chat .message-item {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
}

.chat .message-item-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    opacity: 1;
    width: 1060px;
}

.chat .message-left {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    justify-content: flex-start;
    padding-right: 156px;
}

.chat .message-right {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    justify-content: flex-end;
    padding-left: 156px;
    padding-bottom: 16px;
}

div[message-list-breakpoint="xs"] .message-right {
    padding-left: 65px;
}

div[message-list-breakpoint="xs"] .message-left {
    padding-right: 20px;
}

div[message-list-breakpoint="xs"] .message-item-margin {
    min-width: 10px;
}

.chat .message-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    background-color: rgba(0, 0, 0, 0);
    min-height: 30px;
}

.chat .message-user-info {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: flex-start;
}

.chat .message-flex-0 {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: stretch;
    /*margin-left: 50px;*/
    /*margin-top: -23px;*/
}

.chat .message-user-info-text {
    position: relative;
    display: inline;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    background-color: rgba(0, 0, 0, 0);
    font-size: 12px;
    color: rgb(138, 141, 145);
    font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
    font-weight: 400;
    /*padding-bottom: 25px;*/
    user-select: text;
    cursor: text;
}

.mobile .chat [message-list-breakpoint="xs"] .message-user-info-text {
    margin-bottom: 0px !important;
    margin-top: 0.40rem !important;
}

.chat .message-item-hidden-user-info .chat-user-img-container {
    display: none !important;
}

.chat .message-item-hidden-user-info .message-item-content {
    padding-top: 1px !important;
}

.chat .message-item-hidden-user-info .message-user-info {
    display: none !important;
}

.chat .message-design {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    background-color: rgb(241, 241, 241);
    transform: translateX(0px);
}

.chat .message-left .message-design {
    border-radius: 0px 10px 10px 0px;
}

.chat .message-item-hidden-user-info .message-right .message-design {
    border-radius: 10px 0px 0px 10px;
}

.chat .message-right .message-user-info-text {
    text-align: end;
}

.chat .message-right .message-design {
    border-radius: 10px 10px 0px 10px;
    text-align: end;
    background: linear-gradient(90deg, rgb(224, 250, 255), rgb(167, 238, 252))
}

.chat .message-b-link-multiple .message-right .message-b-link .message-design {
    border-radius: 10px 0px 0px 10px;
}

.chat .message-right .message-b-link .message-design {
    background: inherit;
}

.chat .message-item-last-in-group .message-left .message-design {
    border-radius: 0px 10px 10px 10px !important;
}

.chat .message-item-last-in-group.message-b-link-multiple .message-left .message-design {
    border-radius: 0px 10px 10px 0px !important;
}

.chat .message-item-last-in-group.message-b-link-multiple .message-left .message-b-link:last-child .message-design {
    border-radius: 0px 10px 10px 10px !important;
}


.chat .message-flex-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    padding-bottom: 8px;
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 8px;
}

.mobile .chat [message-list-breakpoint="xs"] .message-flex-1 {
    padding-bottom: 6px;
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 6px;
}

.chat .message-item-flex-content-text-html {
    position: relative;
    display: inline;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.2px;
    font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
    color: rgb(33, 33, 33);
    align-self: stretch;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 400;
    user-select: text;
    cursor: text;
}

    .chat .message-item-flex-content-text-html .message-reply-container, .chat .message-item-flex-content-text-html .message-forward-container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        align-items: stretch;
        background-color: rgba(0, 0, 0, 0);
        border-bottom: 1px solid var(--base-text-color);
        /*margin-bottom: 1rem;*/
    }

        .chat .message-item-flex-content-text-html .message-reply-container .message-reply-footer, .chat .message-item-flex-content-text-html .message-forward-container .message-forward-footer {
            order: 2;
            flex-grow: 0;
            flex-shrink: 0;
            margin-top: 6px;
            margin-bottom: 12px;
            font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
            font-weight: 400;
            color: var(--base-text-color);
            font-size: 12px;
            cursor: inherit;
            text-align: left;
            margin-left: 1rem;
        }

        .chat .message-item-flex-content-text-html .message-reply-container .message-reply-content, .chat .message-item-flex-content-text-html .message-forward-container .message-forwarded-content {
            flex-grow: 0;
            flex-shrink: 0;
            line-height: 18px;
            letter-spacing: -0.2px;
            font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
            color: rgb(33, 33, 33);
            align-self: stretch;
            font-weight: 400;
            font-style: italic;
            text-align: left;
            margin-left: 1rem;
        }

            .chat .message-item-flex-content-text-html .message-forward-container .message-forwarded-content .preview-description {
                display: none;
            }

        .chat .message-item-flex-content-text-html .message-forward-container .message-forward-footer .forwarded-message {
            display: none;
        }

.chat .message-left .message-b-link {
    align-items: flex-start !important;
}

.chat .message-right .message-b-link {
    align-items: flex-end !important;
}

.chat .chat-link-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: stretch;
    justify-content: center;
    background-color: var(--base-bg-shade);
    border-color: rgba(0, 0, 0, 0);
    text-align: left;
    border-width: 0px;
    max-width: 300px;
    padding: 0px;
    cursor: pointer;
    margin-top: 2px;
}

    .chat .chat-link-btn .link-img {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        align-items: stretch;
        border-width: 0px;
        border-color: rgba(0, 0, 0, 0);
        width: 100%;
        height: 150px;
    }

        .chat .chat-link-btn .link-img > div {
            position: relative;
            overflow: visible;
            background-color: transparent;
            flex-grow: 0;
            flex-shrink: 0;
            width: 100%;
            height: 150px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            border-style: none;
            display: flex;
        }

    .chat .chat-link-btn .link-title {
        position: relative;
        display: inline;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        font-size: 18px;
        font-family: "SF Bold", "Segoe System UI Bold", "Segoe UI Bold", sans-serif;
        font-weight: 400;
        margin-top: 10px;
        line-height: 22px;
        padding-left: 10px;
        padding-right: 10px;
        max-height: 66px;
        cursor: inherit;
        color: var(--base-text-color) !important;
    }

    .chat .chat-link-btn .link-description {
        position: relative;
        display: inline;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        font-size: 12px;
        color: rgb(138, 141, 145);
        font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
        font-weight: 400;
        margin-top: 4px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 16px;
        max-height: 96px;
        cursor: inherit;
    }

    .chat .chat-link-btn .link-url-info {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        align-items: flex-start;
        margin-top: 7px;
        margin-bottom: 12px;
        padding-left: 10px;
        padding-right: 10px;
    }

        .chat .chat-link-btn .link-url-info .link-url-info-favicon {
            position: relative;
            display: flex;
            flex-direction: column;
            flex-grow: 0;
            flex-shrink: 0;
            overflow: hidden;
            align-items: stretch;
            height: 16px;
            width: 16px;
        }

            .chat .chat-link-btn .link-url-info .link-url-info-favicon > div {
                position: relative;
                overflow: visible;
                height: 16px;
                width: 16px;
                background-color: transparent;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                border-style: none;
                display: flex;
            }

        .chat .chat-link-btn .link-url-info .link-url-info-text {
            position: relative;
            display: inline;
            flex-grow: 1;
            flex-shrink: 1;
            overflow: hidden;
            white-space: pre;
            text-overflow: ellipsis;
            font-size: 12px;
            color: rgb(138, 141, 145);
            font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
            font-weight: 400;
            margin-left: 4px;
            cursor: inherit;
        }


.chat .message-item-flex-content-img-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
    align-self: stretch;
}

    .chat .message-item-flex-content-img-preview .message-item-button-img-preview {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border-color: transparent;
        text-align: left;
        border-width: 0px;
        width: 300px;
        height: 68.75px;
        border-radius: 0px 10px 10px;
        padding: 0px;
        cursor: pointer;
        border-style: solid;
    }

    .chat .message-item-flex-content-img-preview .download {
        width: 40px;
        height: 40px;
        float: right;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 5px;
        right: 5px;
        box-shadow: 0 10px 10px var(--base-shadow-color), 0 4px 4px var(--base-shadow-color);
    }

    .chat .message-item-flex-content-img-preview .copy, .chat .message-item-flex-content-file-preview .copy {
        width: 40px;
        height: 40px;
        float: right;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 45px;
        right: 5px;
    }

    .chat .message-item-flex-content-img-preview .copy {
        box-shadow: 0 10px 10px var(--base-shadow-color), 0 4px 4px var(--base-shadow-color);
        bottom: 5px;
        right: 50px;
    }

.chat .message-item-flex-content-file-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: stretch;
    width: 245px;
}

.chat .message-item-flex-content-img-preview img {
    cursor: pointer !important;
    max-width: 300px;
    max-height: 200px;
}

.chat .message-item-group-info .chat-user-img-container {
    display: none;
}

.chat .message-item-group-info .message-left {
    justify-content: center;
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 10px;
}

.chat .message-item-group-info .message-user-info {
    display: none;
}

.chat .message-item-group-info .message-design {
    border-radius: 10px !important;
}

.chat .message-item-group-info.message-item-last-in-group .message-left .message-design {
    border-radius: 10px !important;
}

.chat .message-item-group-info .message-item-flex-content-text-html {
    white-space: normal;
}

.chat .message-item-group-info .message-item-content {
    padding-top: 0px;
}

.chat .message-item-read-info {
    display: flex;
    position: absolute;
    bottom: 2px;
}

    .chat .message-item-read-info i.ic-fluent {
        -webkit-text-stroke: .5px #a9a9a9;
    }

    .chat .message-item-read-info.readed i.ic-fluent {
        -webkit-text-stroke: .5px #2196F3;
    }

    .chat .message-item-read-info i.ic-fluent:nth-child(2) {
        margin-left: -8px;
    }

.chat .message-list .dx-list-item {
    padding-left: 10%;
    padding-right: 10%;
    border-top-style: none;
    cursor: auto;
    padding-top: 10px;
    padding-bottom: 13px;
}

.chat .message-item-button-file-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: visible;
    align-items: stretch;
    justify-content: center;
    background-color: rgb(241, 241, 244);
    border-color: rgba(0, 0, 0, 0);
    text-align: left;
    border-width: 0px;
    align-self: stretch;
    padding-top: 12px;
    padding-bottom: 0px;
    border-radius: 0px 10px 10px;
    max-width: 245px;
    min-width: 245px;
    cursor: pointer;
}

.chat .message-right .message-item-button-file-preview {
    border-radius: 10px 0px 0px;
}

.chat .message-item-flex-content-file-preview .message-item-button-file-preview-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: stretch;
}

.chat .message-item-flex-content-file-preview .message-item-button-file-preview-title {
    position: relative;
    display: inline;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    font-size: 18px;
    color: rgb(43, 44, 51);
    font-family: "SF Bold", "Segoe System UI Bold", "Segoe UI Bold", sans-serif;
    align-items: flex-start;
    padding-right: 16px;
    cursor: inherit;
}

.chat .message-item-flex-content-file-preview .message-item-button-file-preview-file-size {
    position: relative;
    display: inline;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    font-size: 12px;
    color: rgb(138, 141, 145);
    font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
    font-weight: 400;
    padding-top: 4px;
    cursor: inherit;
}

.chat .message-item-flex-content-file-preview .message-item-button-file-preview-file-type {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 10px;
}

    .chat .message-item-flex-content-file-preview .message-item-button-file-preview-file-type i.ic-fluent {
        font-size: 22px;
    }

    .chat .message-item-flex-content-file-preview .message-item-button-file-preview-file-type span {
        position: relative;
        display: inline;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        white-space: pre;
        text-overflow: ellipsis;
        font-size: 12px;
        color: rgb(138, 141, 145);
        font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
        font-weight: 400;
        cursor: inherit;
    }


.chat .message-item-flex-content-file-preview .message-item-button-file-preview-file-download {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: center;
    border-width: 2px 0px 0px;
    border-style: solid;
    padding: 10px 5px;
    border-color: rgb(255, 255,255);
    text-transform: none;
}

    .chat .message-item-flex-content-file-preview .message-item-button-file-preview-file-download > div {
        position: relative;
        display: inline;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        text-align: center;
        font-size: 15px;
        font-family: "SF Bold", "Segoe System UI Bold", "Segoe UI Bold", sans-serif;
        color: rgb(43, 44, 51);
        cursor: inherit;
    }

.message-list-update-progress {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: flex-end;
    top: 0px;
    left: 0px;
    right: 0px;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    height: 37px;
    pointer-events: none;
}

.message-list-update-progress-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 15px;
    background-color: var(--base-theme-color);
    padding-left: 25px;
    padding-right: 25px;
    transform: translateY(-41px);
    pointer-events: none;
    transition: none 0s ease 0s;
}

    .message-list-update-progress-container.show-chat-progress {
        transform: translateY(0px);
        transition: transform 300ms cubic-bezier(0.33, 0, 0, 1) 0ms;
    }

    .message-list-update-progress-container > div {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        align-items: stretch;
        justify-content: center;
        background-color: transparent;
        border-color: transparent;
        text-align: left;
        border-width: 0px;
        opacity: 1;
        cursor: default;
        border-style: solid;
    }

        .message-list-update-progress-container > div > span {
            position: relative;
            display: inline;
            flex-grow: 0;
            flex-shrink: 0;
            overflow: hidden;
            white-space: pre;
            text-overflow: ellipsis;
            font-size: 12px;
            color: var(--base-text-color-with-bg-theme-color);
            font-family: "SF Regular", "Segoe System UI Regular", "Segoe UI Regular", sans-serif;
            font-weight: 400;
            cursor: inherit;
        }

@media only screen and (device-width: 768px), only screen and (max-width: 768px) {
    .chat .message-list .dx-list-item {
        padding-left: 2%;
        padding-right: 2%;
        border-top-style: none;
        cursor: auto;
    }

    .chat .message-header .user-name {
        max-width: calc(100vw - 30px);
    }

    .chat .message-header .user-desc {
        max-width: calc(100vw - 30px);
    }
}

.chat .message-list.dx-state-focused .dx-list-item.dx-state-focused,
.chat .message-list.dx-state-focused .dx-list-item.dx-state-active {
    background-color: transparent;
}

.chat .dx-loadpanel {
    display: none !important;
}

.chat .dx-loadpanel-content {
    display: none !important;
}

.chat .message-list .dx-state-focused,
.chat .message-list .dx-state-active {
    color: #28484f !important;
    background-color: transparent;
}

.chat .message-list .dx-scrollable-content {
    min-height: 110%;
}

.chat .message-list .dx-scrollview-content {
    padding-top: 40px;
    padding-bottom: 40px;
    min-height: 455px;
}

.chat .message-list .dx-list-next-button {
    display: none;
}
/* MESSAGE */
.chat .my-message {
    padding-left: 20%;
}

.chat .others-message {
    padding-right: 20%;
}

@media only screen and (device-width: 768px), only screen and (max-width: 768px) {
    .chat .message-list .dx-scrollview-content {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .chat .my-message {
        padding-left: 30px;
    }

    .chat .others-message {
        padding-right: 30px;
    }
}
/* MESSAGE HEAD */
.chat .message-head {
    font-size: 14px;
    font-weight: 400;
    color: var(--base-foreground-color);
    width: 100%;
    padding: 8px;
    white-space: normal;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.chat .my-message .message-head {
    float: right;
    text-align: right;
}

.chat .others-message .message-head {
    float: left;
    text-align: left;
}
/* MESSAGE HEAD LINK */
.chat .message-head .link {
    font-size: 14px;
    font-weight: 600;
    color: var(--base-text-color);
}

.chat .message-head .btn {
    margin-left: 4px;
    margin-top: -4px;
    margin-bottom: -4px;
    margin-right: -4px;
    border-radius: 50%;
    padding-left: 13px;
    padding-right: 13px;
    color: var(--base-theme-color);
}
/* MESSAGE HEAD DROPDOWN */
.chat .message-head .dropdown-menu {
    padding-top: 4px;
    padding-bottom: 4px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.15), 0 4px 8px 0 rgba(0,0,0,.15);
}

.chat .message-head .dropdown-item:hover {
    background-color: var(--base-bg-shade);
}

.chat .message-head .dropdown-item {
    padding-left: 10px;
    padding-right: 10px;
}

    .chat .message-head .dropdown-item i {
        width: 16px;
        text-align: center;
        color: var(--base-theme-color);
        margin-right: 10px;
    }

    .chat .message-head .dropdown-item span {
        color: var(--base-text-color);
    }
/* MESSAGE TEXT */
.chat .message-text {
    display: block;
    float: left;
    width: 100%;
    padding: 8px;
    margin-top: 0px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.15), 0 4px 8px 0 rgba(0,0,0,.15);
    font-size: 16px;
    font-weight: 400;
    -webkit-user-select: all; /* Safari */
    -ms-user-select: text; /* IE 10 and IE 11 */
    user-select: all; /* Standard syntax */
}

.chat .my-message .message-text {
    text-align: right;
    /*background-color: var(--base-secondary-bg);*/
    background-color: var(--base-bg-shade);
    color: var(--base-text-color);
}

    .chat .message-text img,
    .chat .my-message .message-text img {
        max-width: 100%;
    }

.chat .others-message .message-text {
    text-align: left;
    background-color: var(--base-bg);
    color: var(--base-text-color);
}

.chat .message-text div {
    white-space: break-spaces;
    float: left;
    height: 100%;
    width: 100%;
    /* Fix koji lomi tekst */
    overflow-wrap: break-word;
}
/* READ MESSAGE */
.chat .others-message .message-read {
    display: inline-block;
    padding-top: 2px;
    color: var(--base-theme-color);
}
/* NOTIFIKACIJE */
.chat .others-message.notification {
    padding-left: 10%;
    padding-right: 10%;
}

    .chat .others-message.notification .message-head {
        float: left;
        text-align: center;
        background-color: var(--base-secondary-bg);
        border-radius: 10px 10px 0px 0px;
        border-bottom: none;
        box-shadow: none;
        padding: 5px;
        padding-bottom: 0px;
        font-size: 14px;
        font-weight: 600;
        color: var(--base-text-color);
    }

        .chat .others-message.notification .message-head a {
            display: none;
        }

        .chat .others-message.notification .message-head .dropdown-menu.dropdown-menu-right {
            display: none;
        }

    .chat .others-message.notification .message-text {
        background-color: var(--base-secondary-bg);
        text-align: center;
        width: 100%;
        font-size: 14px;
        color: var(--base-text-color);
        box-shadow: none;
        border-radius: 0px 0px 10px 10px;
        padding: 5px;
        padding-top: 0px;
    }

    .chat .others-message.notification span {
        white-space: normal;
    }
/* ERP OBAVIJESTI */
.chat .my-message.erpnotification {
    padding-right: 10%;
}

    .chat .my-message.erpnotification .message-head {
        width: 100%;
        background-color: var( --base-secondary-bg);
        color: var( --base-text-color);
    }

chat .my-message.erpnotification .message-head.important-head {
    background-color: var( --base-secondary-bg);
}

.chat .my-message.erpnotification .message-text {
    width: 100%;
    background-color: var( --base-secondary-bg);
}

.chat .others-message.erpnotification {
    padding-left: 20%;
}

    .chat .others-message.erpnotification .message-head {
        width: 100%;
        background-color: var( --base-secondary-bg);
        color: var( --base-text-color);
    }

        .chat .others-message.erpnotification .message-head.important-head {
            background-color: var( --base-secondary-bg);
        }

    .chat .others-message.erpnotification .message-text {
        width: 100%;
        background-color: var( --base-secondary-bg);
    }
/* IMPORTANT MESSAGE */
.chat .my-message .message-important {
    display: inline-block;
    float: left;
    padding-left: 5px;
    padding-top: 2px;
    color: var(--base-danger);
}

.chat .others-message .message-important {
    display: inline-block;
    float: left;
    padding-top: 2px;
    padding-right: 8px;
    padding-left: 5px;
    color: var(--base-danger);
}
/* REPLY MESSAGE */
.chat .my-message .message-text .message-reply-container {
    padding: 10px;
    border-right: 3px solid var(--base-success);
    background-color: rgba(26,179,148,0.1);
    margin-bottom: 5px;
    border-bottom-left-radius: 8px;
    font-style: italic;
}

    .chat .my-message .message-text .message-reply-container .message-text {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0px;
    }

.chat .others-message .message-text .message-reply-container {
    padding: 10px;
    border-left: 3px solid var(--base-success);
    background-color: rgba(26,179,148,0.1);
    margin-bottom: 5px;
    border-bottom-right-radius: 8px;
    font-style: italic;
}

    .chat .others-message .message-text .message-reply-container .message-text {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0px;
    }

.chat .message-text .message-reply-footer {
    margin-bottom: 10px;
}

    .chat .message-text .message-reply-footer .reply-user {
        font-size: 15px;
        font-weight: 600;
        color: var(--base-theme-color);
    }

    .chat .message-text .message-reply-footer .reply-date {
        font-size: 14px;
        font-weight: 500;
        color: var(--base-foreground-color:);
    }
/* FORWARD MESSAGE */
.chat .my-message .message-text .message-forward-container {
    padding: 10px;
    border-right: 3px solid var(--base-success);
    background-color: rgba(26,179,148,0.1);
    border-bottom-left-radius: 8px;
    font-style: italic;
}

    .chat .my-message .message-text .message-forward-container .message-text {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0px;
    }

.chat .others-message .message-text .message-forward-container {
    padding: 10px;
    border-left: 3px solid var(--base-success);
    background-color: rgba(26,179,148,0.1);
    border-bottom-right-radius: 8px;
    font-style: italic;
}

    .chat .others-message .message-text .message-forward-container .message-text {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0px;
    }

.chat .message-text .message-forward-footer {
    margin-bottom: 10px;
}

    .chat .message-text .message-forward-footer .forwarded-message {
        font-size: 14px;
        font-weight: 500;
        color: var(--base-foreground-color:);
    }

    .chat .message-text .message-forward-footer .forward-user {
        font-size: 15px;
        font-weight: 600;
        color: var(--base-theme-color);
    }

    .chat .message-text .message-forward-footer .forward-date {
        font-size: 14px;
        font-weight: 500;
        color: var(--base-foreground-color:);
    }
/* CHAT SYSTEM MESSAGES */
.chat .system-message-list {
}

    .chat .system-message-list .dx-treeview-item-without-checkbox {
        padding-left: 5px;
        padding-left: 0px;
        margin-bottom: 0px;
        margin-top: 5px;
        border-bottom-style: none;
    }

    .chat .system-message-list .dx-treeview-item {
        background-color: #dbf4fd;
        padding: 10px;
        border-radius: 8px;
    }

.chat .system-message {
    width: 100%;
}

    .chat .system-message .system-date {
        width: 100%;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .chat .system-message .system-text {
        width: 100%;
    }
/* MESSAGE - FILE */
.chat .message-binary {
    width: 320px;
    padding: 0px;
    border-radius: 10px;
}

.chat .my-message.message-binary {
    float: right;
}

.chat .message-file {
    border: 0px solid;
    padding: 0px;
}

    .chat .message-file .preview {
        width: 320px;
        display: block;
        float: left;
        white-space: nowrap;
        border: 0px none !important;
    }

.chat .my-message .message-file .preview {
    float: right;
}

.chat .others-message .message-file .preview {
    float: left;
}

.chat .message-file .preview-image {
    width: 320px;
    background-color: var(--base-secondary-bg);
    white-space: nowrap;
    position: relative;
    border-radius: 10px 10px 0px 0px;
}

    .chat .message-file .preview-image img {
        width: 100%;
        border-radius: 10px 10px 0px 0px;
    }

.chat .message-file .preview-icon {
    width: 320px;
    /*background-color: var(--base-secondary-bg);*/
    background-color: var(--base-bg-shade);
    min-height: 150px;
    text-align: center;
    white-space: nowrap;
    position: relative;
    border-radius: 10px 10px 0px 0px;
}

    .chat .message-file .preview-icon i {
        font-size: 48px;
        color: var(--base-foreground-color);
        display: block;
        line-height: 150px;
    }

.chat .message-file .preview-description {
    color: var(--base-text-color);
    font-weight: 600;
    font-size: 14px;
    display: block;
    float: left;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    padding: 5px;
    background-color: var(--base-bg);
    border-radius: 0px 0px 10px 10px;
}

    .chat .message-file .preview-description i {
        line-height: 20px;
        padding: 8px 0px 8px 8px;
        display: none;
        /*border-right: 1px solid rgb(222, 222, 222);*/
    }

    .chat .message-file .preview-description span {
        white-space: break-spaces;
    }


/*.chat .message-file .download {
    border-radius: 50%;
    padding-left: 7px;
    padding-right: 7px;
    width: 34px;
    height: 34px;
    position: absolute;
    right: 12px;
    bottom: 12px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.15), 0 4px 8px 0 rgba(0,0,0,.15);
    background-color: var(--base-bg);
}

    .chat .message-file .download i {
        color: var(--base-theme-color) !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }*/
@media only screen and (device-width: 950px), only screen and (max-width: 950px) {
    .chat .message-file .preview {
        width: 240px;
    }

    .chat .message-file .preview-icon {
        width: 240px;
    }

    .chat .message-file .preview-image {
        width: 240px;
    }

    .chat .message-binary {
        width: 240px;
    }
}

@media only screen and (device-width: 855px), only screen and (max-width: 855px) {
    .chat .message-file .preview {
        width: 200px;
    }

    .chat .message-file .preview-icon {
        width: 200px;
    }

    .chat .message-file .preview-image {
        width: 200px;
    }

    .chat .message-binary {
        width: 200px;
    }
}

@media only screen and (device-width: 795px), only screen and (max-width: 795px) {
    .chat .message-file .preview {
        width: 160px;
    }

    .chat .message-file .preview-icon {
        width: 160px;
    }

    .chat .message-file .preview-image {
        width: 160px;
    }

    .chat .message-binary {
        width: 160px;
    }
}

@media only screen and (device-width: 768px), only screen and (max-width: 768px) {
    .chat .message-file .preview {
        width: 300px;
    }

    .chat .message-file .preview-icon {
        width: 300px;
    }

    .chat .message-file .preview-image {
        width: 300px;
    }

    .chat .message-binary {
        width: 300px;
    }
}

@media only screen and (device-width: 535px), only screen and (max-width: 535px) {
    .chat .message-file .preview {
        width: 240px;
    }

    .chat .message-file .preview-icon {
        width: 240px;
    }

    .chat .message-file .preview-image {
        width: 240px;
    }

    .chat .message-binary {
        width: 240px;
    }
}

@media only screen and (device-width: 445px), only screen and (max-width: 445px) {
    .chat .message-file .preview {
        width: 200px;
    }

    .chat .message-file .preview-icon {
        width: 200px;
    }

    .chat .message-file .preview-image {
        width: 200px;
    }

    .chat .message-binary {
        width: 200px;
    }
}

@media only screen and (device-width: 375px), only screen and (max-width: 375px) {
    .chat .message-file .preview {
        width: 160px;
    }

    .chat .message-file .preview-icon {
        width: 160px;
    }

    .chat .message-file .preview-image {
        width: 160px;
    }

    .chat .message-binary {
        width: 160px;
    }
}
/* CHAT NEW MESSAGE */
.chat-new-message {
    border: 1px solid #3cbab2 !important;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.15), 0 4px 8px 0 rgba(0,0,0,.15);
    background-color: white !important;
    border-radius: 4px !important;
}

    .chat-new-message .dx-texteditor-input {
        padding-right: 90px !important;
    }

.chat-new-button {
    display: block;
    float: left;
    width: 100%;
    padding: 10px 20px;
    margin-top: 37px;
    margin-bottom: -97px;
}

    .chat-new-button .new-icon {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        float: left;
        text-align: center;
        font-weight: 600;
        margin-right: 10px;
        background-color: var(--base-theme-color);
        color: var(--base-bg);
        font-size: 24px !important;
        line-height: 35px !important;
    }

    .chat-new-button .new-label {
        line-height: 40px !important;
        font-weight: 600;
        color: var(--base-text-color);
    }

.chat .message-buttons {
    margin-top: -140px;
    /* position: relative; */
    margin-right: 10px;
}

    .chat .message-buttons .note-btn {
        padding: 0px;
        width: 32px;
        height: 32px;
    }

        .chat .message-buttons .note-btn i {
            font-size: 20px;
            line-height: 30px;
            color: #728e94;
        }

    .chat .message-buttons .selected-button i {
        color: var(--base-theme-color);
    }

@media only screen and (device-width: 1064px), only screen and (max-width: 1064px) {
    .chat .message-buttons {
        margin-top: -120px;
        margin-right: 15px;
    }
}

@media only screen and (device-width: 479px), only screen and (max-width: 479px) {
    .chat .message-buttons {
        margin-right: 8px;
    }
}
/* BUTTONS */
.action-menu-button {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: right;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 5px;
    color: var(--base-theme-color);
    background-color: var(--base-bg-shade);
    cursor: pointer !important;
}

    .action-menu-button:link,
    .action-menu-button:visited,
    .action-menu-button:hover,
    .action-menu-button:active {
        color: var(--base-theme-color);
    }

    .action-menu-button i {
        line-height: 24px;
        margin-left: 3px;
        float: left !important;
    }

.chat-btn {
    border-radius: 0px;
    border-left: solid 1px #6f7889;
    padding-top: 14px;
    padding-bottom: 13px;
    background-color: transparent;
    line-height: 16px;
    margin-right: -20px;
    z-index: 1040;
}

    .chat-btn i {
        padding-top: 2px;
        line-height: 16px;
        font-size: 16px;
        float: left;
        display: inline-block;
    }

    .chat-btn span {
        float: left;
        display: inline-block;
        line-height: 16px;
        font-size: 16px;
        color: var(--base-bg);
        padding-left: 5px;
    }

    .chat-btn:hover {
        background-color: #254148;
    }

.move-top-buttons {
    margin-right: 145px;
}

.badge-rounded {
    border-radius: 10px;
    padding-left: 8px;
    padding-right: 8px;
}

.back-btn {
    display: none;
    color: var(--base-theme-color);
    font-weight: 600;
    font-size: 16px;
    line-height: 38px;
    text-transform: uppercase;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    margin-right: 10px;
    height: 40px;
    width: 40px;
    float: left;
}

    .back-btn i {
        font-size: 18px;
    }

    .back-btn:link,
    .back-btn:visited {
        color: var(--base-theme-color);
    }

    .back-btn:active,
    .back-btn:hover {
        color: var(--base-theme-color);
        background-color: var(--base-bg-shade);
    }

@media only screen and (device-width: 768px), only screen and (max-width: 768px) {
    .back-btn {
        display: block;
    }
}

.btn-standard {
    color: var(--base-bg);
    background-color: var(--base-theme-color);
}

    .btn-standard:active,
    .btn-standard:hover {
        color: var(--base-bg);
        background-color: var(--base-theme-color);
    }

.btn-red {
    color: var(--base-bg);
    background-color: #f74a5e;
}

    .btn-red:active,
    .btn-red:hover {
        color: var(--base-bg);
        background-color: #be1f40;
    }
/* OSTALO */
#firstMsgBtn {
    display: block;
    position: fixed;
    top: 185px;
    right: 15px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--base-bg);
    color: var(--base-theme-color);
    cursor: pointer;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 9px;
    padding-left: 10px;
    line-height: 14px;
    border-radius: 100px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 15%), 0 4px 8px 0 rgb(0 0 0 / 15%);
}

    #firstMsgBtn i {
        font-size: 14px;
    }

    #firstMsgBtn:hover {
        background-color: #efefef;
    }

#lastMsgBtn {
    display: block;
    position: fixed;
    bottom: 160px;
    right: 15px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--base-bg);
    color: var(--base-theme-color);
    cursor: pointer;
    border-radius: 100px;
    line-height: 14px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 15%), 0 4px 8px 0 rgb(0 0 0 / 15%);
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 8px;
    padding-left: 10px;
}

    #lastMsgBtn i {
        font-size: 14px;
    }

    #lastMsgBtn:hover {
        background-color: #efefef;
    }

@media only screen and (device-width: 1064px), only screen and (max-width: 1064px) {
    #firstMsgBtn {
        display: none;
    }

    #lastMsgBtn {
        /*bottom: 230px;*/
        display: none;
        bottom: 305px;
    }
}

@media only screen and (device-width: 768px), only screen and (max-width: 768px) {
    #firstMsgBtn {
        display: none;
    }

    #lastMsgBtn {
        /*bottom: 230px;*/
        display: none;
        bottom: 305px;
    }
}

@media only screen and (device-width: 635px), only screen and (max-width: 635px) {
    #firstMsgBtn {
        display: none !important;
    }

    #lastMsgBtn {
        /*bottom: 230px;*/
        display: none;
        bottom: 305px;
    }
}

@media only screen and (device-width: 336px), only screen and (max-width: 336px) {
    #firstMsgBtn {
        display: none;
    }

    #lastMsgBtn {
        /*bottom: 230px;*/
        display: none;
        bottom: 305px;
    }
}
/* CUSTOM ??? */
.text-s2a {
    color: var(--base-theme-color);
}

.dx-field-30-70 .dx-field-label {
    width: 30%;
}

.dx-field-30-70 .dx-field-value {
    width: 70% !important;
}
/* DX-TOOLTIP TEXT */
.dx-popup-content span {
    white-space: normal;
    word-wrap: break-word;
}

.chat-toolbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: right;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 5px;
    color: var(--base-text-color);
    background-color: transparent;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat-toolbar-btn i.ic-fluent {
        font-size: 24px;
    }

@keyframes message-focus {
    50% {
        /*filter: brightness(.8) saturate(1.1);*/
        background-color: var(--base-theme-color-transparent-20);
    }
}

.searched-message {
    animation-name: message-focus;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.24,.91,.01,.99);
}

#chat-right-side {
    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 10px 0px;
}

.view-xs .chat-user-tabs, .view-sm .chat-user-tabs {
    order: 4;
    margin-top: 0px;
    padding-bottom: 0px;
    height: 55px;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 10px 0px;
}

#message-preview-container > .message-reply-container > .message-reply-content {
    max-height: 170px;
    overflow: auto;
}

#message-preview-container .message-reply-container {
    margin-bottom: 0px;
}

#message-preview-container .message-reply-footer, #message-preview-container .message-reply-content {
    margin-left: 22px;
}

.chat .message-item-flex-content-text-html p {
    margin-bottom: 0px;
}


#chat-user-last-message > br:first-child, .message-item-flex-content-text-html > br:first-of-type {
    display: none;
}

.message-reply-container {
    margin-bottom: 1em;
}

#emoji-picker {
    position: absolute;
    visibility: hidden;
}

.emoji-img {
    font-family: "NotoColorEmoji", apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol, sans-serif;
    font-size: 16px;
}

emoji-picker {
    --emoji-font-family: "NotoColorEmoji", apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol, sans-serif;
    --indicator-color: var(--base-theme-color);
    --background: var(--base-bg-lighter);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    --border-color: var(--base-bg-shade);
}

.chat [message-list-breakpoint="xs"] emoji-picker {
    --border-size: 0px;
}

#message-preview-container .message-preview-container {
    border-radius: 10px;
}

#message-preview-container .message-item-button-img-preview {
    max-width: 300px;
    max-height: 170px;
}

#message-preview-container button:not(.message-item-button-file-preview, .message-item-button-img-preview) {
    display: none !important;
}