/*!
 * NONE
 */

/* CHAT */

.chatTiles .chatUserInitials,
.x-panel-collapsed .chatUserInitials {
    width: 34px;
    height: 24px;
    border: none;
}
.chatTiles .chatUserInitials, .x-panel-collapsed .chatUserInitials{
    padding-top: 4px;
    padding-bottom: 6px;
}
.chatUserLogoWithImage {
    background-color: transparent !important;
    height: 34px;
    width: 34px;
    border: none;
}

.chatUserLogo{
    background-color: var(--color-blue) !important;
    font-size: 14px;
}

.chatTiles .converser, .x-panel-collapsed .converser {
    height: 36px;
    width: 36px;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 3px;
}

.chatTiles.chatModern .converser{
    margin-top: 2px;
}

#chatUsersList.active-first.chatTiles #users_list_holder .converser {
    width: 36px;
}


.chatUserLogoWithImage img{
    border: none;
}

.chatconversationpanel .chatUserLogoWithImage {
    height: 36px;
    width: 36px;
}

.chatTiles .converser > div,
.x-panel-collapsed .converser > div{
    border: 1px solid transparent;
}

label.conversationUser.conversation-user-style div {
    line-height: 27px;
}

.white-header-style .converser:hover {
    background-color: var(--color-blue-light-hover) !important;
}
.white-header-style .actualConverser,
.white-header-style .chatTiles.chatModern .actualConverser,
.white-header-style .chatTiles.chatModern .actualConverser:hover {
    background-color: var(--color-blue-light) !important;
}

.group_data{
    background-image: url(images/hash-gray.svg);
    background-size: 14px;
    background-position: 1px center;
}

.x-menu-list-item .chatStatus img{
    background-repeat: no-repeat;
    background-position: 2px center !important;
    background-size: auto !important;
}

.converser_data{
    background-repeat: no-repeat;
    background-position: 0px center !important;
    background-size: auto !important;
}

.connectedConverser .converser_data,
.x-menu-item-icon.available,
.x-menu-item-icon.available.chat-consultant,
.x-menu-item-icon.available.callback-consultant,
.x-menu-item-icon.available.chat-callback-consultant {
    background-image: url(images/rightpanel/available.svg);
}

.converser_data,
.x-menu-item-icon.not-available {
    background-image: url("images/rightpanel/not-available.svg");
}

.x-menu-item-icon.invisible {
    background-image: url(images/rightpanel/invisible.svg);
}

.connectedConverser.busy .converser_data,
.x-menu-item-icon.busy {
    background-image: url(images/rightpanel/busy.svg);
}

.x-panel-collapsed .converser_data, .chatTiles .converser_data{
    background-image: url("images/rightpanel/not-available.svg");
    background-position: center !important;
    background-size: 10px;
    left: 20px !important;
    top: 19px;
}
.chatTiles.chatModern .converser_data {
    left: 25px !important;
    top: 19px;
}

.chatTiles .connectedConverser .converser_data,
.x-panel-collapsed .connectedConverser .converser_data{
    background-image: url(images/rightpanel/available.svg);
}
.chatTiles .connectedConverser.busy .converser_data,
.x-panel-collapsed .connectedConverser.busy .converser_data{
    background-image: url(images/rightpanel/busy.svg);
}

.chat-header .x-header-icon{
    display: none;
    width: 0px;
}
.reminder-header, .notification-header, .chat-header{
    padding-left: 0px;
    padding-top: 8px;
}
#rightPanel .x-panel-header,
#rightPanel.right-panel-top .x-right-header .x-tool{
    background-color: var(--color-blue-light) !important;
}
#rightPanel .x-right-header, #rightPanel{
    background-color: var(--color-white) !important;
}

#rightPanel.right-panel-top .x-right-header .x-tool{
    right: 5px!important;
    left: auto!important;
    top: 3px;
    width: 20px !important;
    height: 20px !important;
    background-position: center !important;
    padding: 4px;
}
#rightPanel .x-tool-close{
    background-image: url(images/rightpanel/close.svg) !important;
    opacity: 0.7;
}
.x-rightpanel-holder .oneItem .controls div.x-tool-close{
    margin-top: 2px;
}
#rightPanel .x-tool-close:hover{
    opacity: 1;
}

#rightPanel .x-header-title{
    color: var(--color-gray-80);
    font-size: 12px;
}
.x-simple-style .x-rightpanel-holder .x-header-title,
.x-simple-style #rightPanel.right-panel-top.x-header-only-notifications .x-rightpanel-holder .x-rightpanel-notifications.x-rightpanel-notifications-first .x-header-title,
.x-simple-style #rightPanel.right-panel-top .x-rightpanel-holder .x-rightpanel-reminders .x-header-title {
    padding-left: 10px;
}

#rightPanel.right-panel-top.x-header-only-notifications .x-rightpanel-notifications.x-rightpanel-notifications-first .x-panel-header,
#rightPanel.right-panel-top .x-rightpanel-reminders .x-panel-header,
#rightPanel.right-panel-top .x-rightpanel-chat-header .x-panel-header{
    margin-left: -1px;
}

.x-rightpanel-chat-header .dropdown{
    right: 34px;
    top: 8px;
}

#rightPanel #chatStatusButton{
    background-position: 3px 7px !important;
    background-size: 12px;
}

#chatStatusButton {
    background-image: url(images/rightpanel/not-available.svg);
}
#chatStatusButton.available {
    background-image: url(images/rightpanel/available.svg);
}
#chatStatusButton.invisible {
    background-image: url(images/rightpanel/invisible.svg);
}
#chatStatusButton.busy {
    background-image: url(images/rightpanel/busy.svg);
}

.right-panel-tabs .x-rightpanel-holder .message div{
    font-size: 14px;
}

.x-rightpanel-holder .title a{
    color: var(--color-blue-80) !important;
    font-weight: 600;
    font-size: 12px !important;
}

.x-rightpanel-holder .date,
.x-rightpanel-holder .controls{
    color: var(--color-gray-40) !important;
    font-size: 12px !important;
}

.mainheader-chat .x-header-counter,
.mainheader-notifications .x-header-counter{
    left: 20px;
    top: 15px;
    background-color: var(--color-red-light) !important;
    border-radius: 20px;
    min-width: 11px;
}
.mainheader-chat:hover .x-header-counter,
.mainheader-notifications:hover .x-header-counter{
    background-color: color-mix(in srgb, var(--color-red-light) 80%, black 20%) !important;
}
.mainheader-chat .x-header-counter span,
.mainheader-notifications .x-header-counter span {
    font-weight: 600;
    font-size: 12px;
}

#rightPanel .x-panel-body{
    margin-left: 0px;
}
#rightPanel-xcollapsed, #rightPanel .x-panel-header {
    border: 0px solid transparent;
}
.x-simple-style #rightPanel > .x-panel-bwrap{
    border-top: solid 0px transparent;
}
#rightPanel {
    border-left: 1px solid var(--color-gray-10);
}