﻿#health-status-bar { width: 21.25rem; height: 100%; background-color: #F9F9F9; 
                     border-left: 1px solid rgba(0, 0, 0, .1); border-radius: 0 16px 16px 0; display: block; padding: 0.75rem 0.75rem 0 0.75rem;
                     -webkit-background-clip: padding-box; background-clip: padding-box; }

#health-status-bar .header-block { height: 2rem; }
#health-status-bar .header-block .title { font-size: 20px; font-weight: 600; color: #202020; font-family: 'Outfit'; }
#health-status-bar .header-block .controls {  }
#health-status-bar .header-block .controls .close_icon { height: 2rem; width: 1.4rem; padding: 4px 8px 4px 8px; background-size: auto 2rem !important; 
                                                         background: url('../../../../bundle/i/newUI/buttons-sprite.svg') no-repeat;
                                                         background-position: -45.8125rem center; cursor: pointer; }

#health-status-bar .content-container { overflow-x: hidden; overflow-y: auto; height: 500px; margin-top: 10px; }
#health-status-bar .content-container .copy-error-tooltip { position: absolute; border: 2px solid black; border-radius: 6px; height: 30px; line-height: 30px;
                                                            width: 61px; padding-left: 8px; padding-right: 8px; font-size: 12px; font-weight: 400;
                                                            color: white; background-color: black; visibility: hidden; }
#health-status-bar .content-container .container_items { margin-top: 10px; }
#health-status-bar .content-container .container_items .no_items { font-style: italic; }
#health-status-bar .content-container .container_items .item { border-radius: 10px; padding: 0.5rem; height: 6.75rem; }
#health-status-bar .content-container .container_items .item.can_navigate { cursor: pointer; }
#health-status-bar .content-container .container_items .item.error { background-color: #FCEBEB; border: 1px solid #FCEBEB; }
#health-status-bar .content-container .container_items .item.warning { background-color: #FFF7E4; border: 1px solid #FFF7E4; }
#health-status-bar .content-container .container_items .item.info { background-color: #EFF4F8; border: 1px solid #EFF4F8; }
#health-status-bar .content-container .container_items .item:hover { background-color: #EEEEEE !important; border: 1px solid #EEEEEE !important; }
#health-status-bar .content-container .container_items .item:hover .header_container .copy_message_icon { visibility: visible; }

#health-status-bar .content-container .container_items .item .header_container .header { height: 1.5rem; line-height: 1.5rem; display: inline-flex; }
#health-status-bar .content-container .container_items .item .header_container .header .type_icon { height: 1.5rem; line-height: 1.5rem; width: 1.5rem; background-size: auto 1.5rem !important;
                                                                                  background: url('../../../../bundle/i/newUI/message-sprite.svg') no-repeat;
}
#health-status-bar .content-container .container_items .item .header_container .header .title { height: 1rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; margin-left: 5px; }
#health-status-bar .content-container .container_items .item .header_container .header .title.sync-tunnels { color: #3C6690; background-color: unset; }
#health-status-bar .content-container .container_items .item .header_container .header .title.licensing { color: #368163; }
#health-status-bar .content-container .container_items .item .header_container .header .title.mailboxes { color: #49496E; }
#health-status-bar .content-container .container_items .item .header_container .header .title.general { color: #CE7C02; }
#health-status-bar .content-container .container_items .item .header_container .header .type_icon.error { background-position: -3rem center; }
#health-status-bar .content-container .container_items .item .header_container .header .type_icon.warning { background-position: -1.5rem center; }
#health-status-bar .content-container .container_items .item .header_container .header .type_icon.info { background-position: 0 center; }
#health-status-bar .content-container .container_items .item .header_container .header .section { height: 1.5rem; border: 1px solid; border-radius: 4px; padding: 4px 6px 4px 6px; margin-left: 0.5rem; }
#health-status-bar .content-container .container_items .item .header_container .header .section .icon { height: 1rem; width: 1rem; background-size: auto 0.75rem !important;
                                                                                      background: url('../../../../bundle/i/newUI/health-status.svg') no-repeat;}
#health-status-bar .content-container .container_items .item .header_container .header .section .icon.sync-tunnels { background-position: -1.6rem center; width: 0.95rem; }
#health-status-bar .content-container .container_items .item .header_container .header .section .icon.licensing { background-position: -0.76rem center; width: 0.95rem !important; }
#health-status-bar .content-container .container_items .item .header_container .header .section .icon.mailboxes { background-position: 0.1rem center; width: 0.9rem }
#health-status-bar .content-container .container_items .item .header_container .header .section .icon.general { background-position: -2.46rem center; width: 0.9rem }
#health-status-bar .content-container .container_items .item .header_container .header .section.sync-tunnels { background-color: #C4DEF5; border-color: #C4DEF5; }
#health-status-bar .content-container .container_items .item .header_container .header .section.licensing { background-color: #C8F1E1; border-color: #C8F1E1; }
#health-status-bar .content-container .container_items .item .header_container .header .section.mailboxes { background-color: #D9D9F2; border-color: #D9D9F2; }
#health-status-bar .content-container .container_items .item .header_container .header .section.general { background-color: #F7E2B1; border-color: #F7E2B1; }
#health-status-bar .content-container .container_items .item .header_container .header .divider { width: 6px; height: 6px; border: 1px solid #A3A3A3; border-radius: 1px; background-color: #A3A3A3; margin-left: 6px; margin-right: 6px; transform: rotate(45deg); }
#health-status-bar .content-container .container_items .item .header_container .header .event-date { height: 1.25rem; line-height: 1.25rem; font-size: 0.75rem; font-weight: 400; color: #5C5C5C; }
#health-status-bar .content-container .container_items .item .header_container .header .message { height: 5rem; line-height: 1.225rem; font-size: 0.875rem; font-weight: 400; color: #202020; }
#health-status-bar .content-container .container_items .item .header_container .copy_message_icon { width: 1rem; height: 1rem; cursor: pointer; background-size: auto 1rem !important;
                                                                                                    background: url('../../../../bundle/i/newUI/buttons-sprite.svg') no-repeat;
                                                                                                    background-position: -33rem center; visibility: hidden; }
#health-status-bar .content-container .container_items .item .message { margin-left: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

#health-status-bar.collapse { width: 0; padding: unset; border: none; }
#health-status-bar.collapse .header-block { display: none; }
#health-status-bar.collapse .content-container { display: none; }