#callEventWidget { border-radius: 5px; width: 338px; z-index: 800; position: fixed; bottom: 50px; right: 15px; background: #FFFFFF; box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.15); } #callEventWidget .headerWidget { background: linear-gradient(0deg, #F5F5F5 0%, #FFF 100%); border-radius: 5px 5px; } #callEventWidget .i-hide, .callEventWidget { display: none; } .callEventWidget.i-show{ display:block; } #callEventWidget .headerWidget h3 { font-family: Lato; font-style: normal; font-weight: 600; font-size: 20px; line-height: 24px; text-align: center; color: #222222; padding:20px 0 5px; } #callEventWidget .headerWidget h4 { font-family: Lato; font-style: normal; font-weight: bold; font-size: 14px; line-height: 17px; text-align: center; color: #B3B3B3; padding-bottom: 15px; } #callEventWidget .i-body { padding: 20px; max-height: 200px; overflow-y: auto; } #callEventWidget .requisitions-header { font-size: 12px; font-weight: bold; margin: 10px 0; } #callEventWidget .requisitions { margin-bottom: 15px; } #callEventWidget .requisition-title { color: #73A1FB; font-weight: bold; text-decoration: underline; cursor: pointer; } #callEventWidget .requisition-title:hover{ color:#B3B3B3; } #callEventWidget .requisition-title { color: #73A1FB; text-decoration: none; cursor: pointer; font-weight: 600; margin-bottom: 5px; border-bottom: 1px solid; display: inline-block; padding-bottom: 1px; } #callEventWidget .requisition-object { color: #B3B3B3; font-size: 12px; display: flex; } #callEventWidget .footerWidget .widgetTools { background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%); border-radius: 0 0 5px 5px; } #callEventWidget .bodyWidget button.widget-tools { border: none; padding: 10px 2px; background: none; cursor: pointer; margin-left: 4px; } #callEventWidget .bodyWidget button.widget-tools.end { float: right; margin-right: 10px; } #callEventWidget .footerWidget button.widget-tools { border: none; padding: 10px; background: none; cursor: pointer; margin-left: 5px; } #callEventWidget .footerWidget button.widget-tools.end { background: #EDEDED; border-radius: 0px 0px 5px 0px; float: right; } #callEventWidget .icon { width: 20px; height: 20px; display: block; position: relative; } #callEventWidget .bodyWidget .icon { width: 44px; height: 44px; display: block; position: relative; } #callEventWidget .i-wiget-phone-1{ background: url('/images/callevents/small_call_1.svg') no-repeat center; } #callEventWidget .i-wiget-phone-1:hover, #callEventWidget .i-wiget-phone-1.active{ background: url('/images/callevents/small_call_1_active.svg') no-repeat center; } #callEventWidget .i-wiget-user{ background: url('/images/callevents/user.svg') no-repeat center;; } #callEventWidget .i-wiget-phone-2{ background: url('/images/callevents/small_call_2.svg') no-repeat center; } #callEventWidget .i-wiget-phone-2:hover, #callEventWidget .i-wiget-phone-2.active{ background: url('/images/callevents/small_call_2_active.svg') no-repeat center; } #callEventWidget .i-wiget-history{ background: url('/images/callevents/clock.svg') no-repeat center; } #callEventWidget .i-wiget-history:hover, #callEventWidget .i-wiget-history.active{ background: url('/images/callevents/clock_active.svg') no-repeat center; } #callEventWidget .i-wiget-link{ background: url('/images/callevents/sort.svg') no-repeat center; } #callEventWidget .i-wiget-setting{ background: url('/images/callevents/cog.svg') no-repeat center; } #callEventWidget .i-wiget-open{ background: url('/images/callevents/external.svg') no-repeat center; } #callEventWidget .i-wiget-close{ background: url('/images/callevents/close.svg') no-repeat center; position: absolute; top: 5px; /*right: 5px; */ left: 310px; } #callEventWidget .i-wiget-close.isScroll{ left: 295px; } #callEventWidget .i-wiget-close:hover{ background: url('/images/callevents/close_active.svg') no-repeat center; } #callEventWidget .i-wiget-numpad{ background: url('/images/callevents/numpad.svg') no-repeat center; } #callEventWidget .i-wiget-help-line{ background: url('/images/callevents/small_call_help.svg') no-repeat center; } #callEventWidget .i-wiget-help-line:hover, #callEventWidget .i-wiget-help-line.active{ background: url('/images/callevents/small_call_help_active.svg') no-repeat center; } #callEventWidget .i-wiget-line{ background: url('/images/callevents/small_call_link.svg') no-repeat center; } #callEventWidget .i-wiget-line:hover,#callEventWidget .i-wiget-line.active{ background: url('/images/callevents/small_call_link_active.svg') no-repeat center; } #callEventWidget .i-wiget-user-info{ background: url('/images/callevents/user_info.svg') no-repeat center; } #callEventWidget .i-wiget-user-info.active, #callEventWidget .i-wiget-user-info:hover{ background: url('/images/callevents/user_info_active.svg') no-repeat center; } #callEventWidget .i-wiget-call-up{ background: url('/images/callevents/call_up.svg') no-repeat center; } #callEventWidget .i-wiget-call-down{ background: url('/images/callevents/call_down.svg') no-repeat center; } #callEventWidget .i-user_list-title{ background: url('/images/callevents/status_ok.svg') no-repeat left center; padding: 5px 5px 5px 25px; display: block; cursor: pointer; } #callEventWidget .i-user_list-title.incoming{ background: url('/images/callevents/incoming.svg') no-repeat left bottom; } #callEventWidget .i-user_list-title.outgoing{ background: url('/images/callevents/outgoing.svg') no-repeat left bottom; } #callEventWidget .i-close { position: absolute; right: 9px; font-size: 24px; cursor: pointer; } #callEventWidget .i-user_list-title:hover, #callEventWidget .i-close:hover { color: #73A1FB; } #callEventWidget .i-list-transfer{ width: 328px; height: 241px; position: absolute; background: #424242; border-radius: 5px; color:#e5e5e5; bottom: 90px; left: 4px; padding-top: 10px; box-sizing: border-box; z-index: 2; } #callEventWidget .i-list-transfer::before { content: ''; position: absolute; top: 100%; left: 80px; width: 0; height: 0; border: .5em solid transparent; border-top-color: #424242; transform: translate(-50%, 0); } #callEventWidget .i-list-transfer.consult:before{ left: 25px; } #callEventWidget .i-tooltip { position: absolute; color:#fff; bottom: 100%; display: none; opacity: 0; margin-bottom: 1em; padding: 1em; background-color: #424242; font-size: 0.8em; line-height: 1.6; text-align: left; white-space: nowrap; transform: translate(-50%, 0); transition: all .15s ease-in-out; border-radius: 5px; } #callEventWidget .bodyWidget .end .icon .i-tooltip { transform: translate(-72%, 4px); } #callEventWidget .i-tooltip:before { content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: .5em solid transparent; border-top-color: #424242; transform: translate(-50%, 0); } #callEventWidget .bodyWidget .end .icon .i-tooltip::before{ left:70% } #callEventWidget .icon:hover .i-tooltip{ display: inline; opacity: 1; } #callEventWidget .bodyWidget .icon .i-tooltip { transform: translate(-50%, 10px); } #callEventWidget .historyWidget { padding: 15px; } #callEventWidget .titleHistory { font-size: 12px; font-weight: bold; color:#222222; border-bottom: solid 1px #dedede; padding-bottom: 10px; margin-bottom: 15px; } #callEventWidget .history-row { font-size: 14px; font-weight: normal; color: #757575; padding-top: 20px; padding-left: 25px; } #callEventWidget .history-row.incoming{ background: url('/images/callevents/incoming.svg') no-repeat left bottom; } #callEventWidget .history-row.outgoing{ background: url('/images/callevents/outgoing.svg') no-repeat left bottom; } #callEventWidget .history-row.outgoing_answer{ background: url('/images/callevents/outgoing_answer.svg') no-repeat left bottom; } #callEventWidget .history-row.incoming_answer{ background: url('/images/callevents/incoming_answer.svg') no-repeat left bottom; } #callEventWidget .history-row .time{ color: #b2b2b2; font-size: 12px; float: right; } #callEventWidget .scrollBlock{ max-height: 500px; overflow: auto; } .i-filter-transfer{ padding: 5px; border-radius: 5px; border: 1px solid rgba(67,160,71,.4); box-shadow: 0 0px 1px 1px rgb(67 160 71 / 15%); width: 275px; margin-bottom: 5px; margin-left: 10px; outline: 0; background: #000; color: #fff; } .i-list-transfer-scroll{ height: 190px; overflow: auto; padding-left:10px; }