/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/interactions/ActiveInteractions.css ==============================*/

/* Overall layout for Interaction Handles and Interaction Frames containers */

#interaction_handles_block {
    margin-top: 15px;
}

/*****  Interaction Frame Generic Style  *****/

#interaction_frames_block {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* The general (any interaction type) frame around the interaction details */
.intFrame {
    background-color: var(--bg-interaction-panel-color);    
    border-radius: 8px;
    padding-bottom: 5px;
    margin-right: 7px;
    overflow: hidden;
    height: calc(100% - 10px);
}

/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/AmazonLoginOverlay.css ==============================*/

#login_overlay {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255, 0.45);
}
#login_overlay_button {
    margin: 0;
    position: absolute;
    top: 385px;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--notify-error);
    border-radius: 3px;
    color: var(--text-color-ondarkbg);
    cursor: pointer;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== platform/plugin/AmazonPauseResume.css ==============================*/

/* When Pause/Resume enabled, we need a little more room in the ActionButtons block */
.intActionButtonsBlock.pauseResumeEnabled {
    position: relative;
    margin-top: 15px;    
}

.recordPauseResumeBtn {
    position: absolute;
    top: -11px;
    left: 5px;
    width: 70px;
    height: 22px;
    cursor: pointer;
    background-repeat: no-repeat;     
}
.recordPauseResumeBtn.aprRecording {
    background-image: url("../images/plugins/pause_resume_btn_rec-v2.png");
}
.recordPauseResumeBtn.aprPaused {
    background-image: url("../images/plugins/pause_resume_btn_paused-v2.png");
}

.recordPauseResumeBtn.btnHidden {
    display: none;
}

/* Pause Reminder Blinking */
.recordPauseResumeBtn.aprPaused.remind {
    animation-name: buttonBlink;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyFrames buttonBlink {
    0% { opacity: 1; }
    49% { opacity: 1; }
    60% { opacity: 0.3; }
    99% { opacity: 0.3; }
    100% { opacity: 1; }
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/autotext/AutoTextToolControl.css ==============================*/


/***** Auto-Text Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_AutoText .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-autotext-v2.png");
}

/***** AutoText Library Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#autotexttool_body {
    position: relative;
    margin-top: 5px;
    height: 94%;
}
#autotexttool_body .autoTextScrollWrapper {
    height: calc(100% - 75px);
}
#autotexttool_body .autoTextEntriesBlock {
    padding-top: 10px;
}

/* Directory Search Box */
.autoTextSearchInput {    
    width: calc(100% - 10px);
    margin-bottom: 6px;
}

/* Each AutoText Group Heading */
.autoTextGroupHeadingBlock {
    position: relative;
    text-align: left;
    font-size: 15px;
    padding: 2px 5px;
    margin-bottom: 3px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
}

/* Each AutoText Library Entry */
.autoTextEntryBlock {
    position: relative;
    padding: 2px 0 2px 10px;
    margin-bottom: 5px;
    cursor: pointer;
}
.autoTextEntryBlock:hover {
    background-color: var(--list-entry-hover-color);
}

/* class used to hide an entry if filtered by search */
.autoTextEntryBlock.searchHidden {
    display: none;
}

.autoTextEntryBlock .autoTextName {
    font-weight: bold;
}
.autoTextEntryBlock .autoTextContent {
    padding-left: 10px;
    font-size: 13px;
}
.autoTextEntryBlock .autoTextContentFull {    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/chat/ChatFrameControl.css ==================*/

/**********   Section 4 - Custom for Chat Interactions (Chat Conversation window) **********/

.intTypeWebChat .intFrameSection4, .intTypeSMSChat .intFrameSection4,
.intTypeSocialLINE .intFrameSection4, .intTypeSocialWHATSAPP .intFrameSection4,
.intTypeSocialFBMESSENGER .intFrameSection4, .intTypeSocialTWITTERDM .intFrameSection4, 
.intTypeSocialOTHER .intFrameSection4,
.intTypeIM .intFrameSection4 {
    height: calc(100% - 220px);
}
.intFrameChatPart {
    height: 100%;
}

/* Overall Chat Window sizing / Style */
.chatWindowContainer {
    height: 100%;
    padding: 10px 5px 0px;
    text-align: center;    
    height: calc(100% - 48px);
}

/***** Chat Conversation Area *****/
.chatConversationScrollWrapper {
    height: calc(100% - 110px);
}
.chatConversationArea {
    text-align: left;
}

/***** Chat Messages *****/
.chatMsg, .chatTypingMsg {
    margin-bottom: 8px;
}
.chatMsgHeaderLine {
    font-size: 12px;
    font-weight: bold;
}
.chatMsgNearEnd .chatMsgHeaderLine, .chatHistoryNearEnd .chatMsgHeaderLine {
    text-align: right;
    padding-right: 10px;    
}
.chatMsgTime {
    color: gray;
    font-weight: normal;
    margin-left: 5px;
}
.chatTypingMsg .chatMsgHeaderLine {
    opacity: 0.6;
}
.chatMsgSystem .chatMsgHeaderLine {
    display: none;
}
.chatLastActivityMsg {
    text-align: center;
    font-style: italic;
    font-size: 12px;
    font-weight: bold;
    color: var(--is-color-notify);
}
.chatLastActivityMsg.notTooLong {
    font-weight: normal;
    color: unset;
}

.chatMsgBubble {
    position: relative;
    border: 1px solid #D1D3D4;
    padding: 2px 5px;
    width: 75%;
    margin-top: 4px;
    font-size: 14px;
}
.chatMsgNearEnd .chatMsgBubble, .chatHistoryNearEnd .chatMsgBubble {
    margin-left: auto;
    margin-right: 10px;
}
.chatMsgFarEnd .chatMsgBubble {
    background-color: var(--chat-color-farend);   /* (almost white) */
}
.chatMsgSystem .chatMsgBubble {
    background-color: var(--bg-interaction-panel-color);   /* (match background) */
    border-style: none !important;
    font-size: 12px;
    text-align: center;
    width: 95%;
    margin: 4px auto;
    padding: 7px 0 3px 0;
}
.chatMsgNearEnd .chatMsgBubble {
    background-color: var(--chat-color-nearend); 
    color: #FFFFFF;
}
.chatHistoryFarEnd .chatMsgBubble {
    background-color: var(--chat-color-farend-hist);    /* (light grey) */
}
.chatHistoryNearEnd .chatMsgBubble {
    background-color: var(--chat-color-nearend-hist);   /* (dark grey) */
    color: #FFFFFF;
}
.chatTypingMsg .chatMsgBubble {
    opacity: 0.7;
    background-color: #D1D3D4;    /* (light grey) */
    font-style: italic;
}
/* Chat message text */
.chatTypingMsg .chatTypingNotifyPrefix {
    font-size: 13px;
    font-weight: bold;
}
.chatMsgText {
    word-wrap: break-word;
}
.chatMsgText a {
    color: #000000;
}
.chatHistoryNearEnd .chatMsgText a {
    color: var(--chat-primary-color); 
}

/* Chat message translation related */
.chatMsg .translatedPreFarEnd, .chatMsg .translatedPreNearEnd,
.chatMsg .translatedPreHistory {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 5px;
}
.chatMsg .translatedPreFarEnd,
.chatMsg.chatHistoryFarEnd .translatedPreHistory {
    color: #707070;     /* gray - darker */
}
.chatMsg .translatedPreNearEnd,
.chatMsg.chatHistoryNearEnd .translatedPreHistory {
    color: #F0F0F0;     /* gray - lighter */
}

.chatMsg .chatMsgXltToggle {
    position: absolute;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
    background-image: url("../images/common/translation-toggle-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    background-color: #FFF;     /* white */
}
.chatMsg.chatMsgFarEnd .chatMsgXltToggle, .chatMsg.chatHistoryFarEnd .chatMsgXltToggle {
    right: -27px;
}
.chatMsg.chatMsgNearEnd .chatMsgXltToggle, .chatMsg.chatHistoryNearEnd .chatMsgXltToggle {
    left: -26px;
}

/* Chat message text - Markdown related overrides */
/* Headings... */
.chatMsgText h1, .chatMsgText h2, .chatMsgText h3, .chatMsgText h4, .chatMsgText h5, .chatMsgText h6 {
    margin-top: 3px;
    margin-bottom: 3px;
}
.chatMsgText h1 {
    font-size: 16px;
}
.chatMsgText h2 {
    font-size: 15px;
}
.chatMsgText h3, .chatMsgText h4, .chatMsgText h5, .chatMsgText h6 {
    font-size: 14px;
}
/* Paragraphs... */
.chatMsgText p {
    margin-top: 3px;
    margin-bottom: 3px;
}
/* Lists... */
.chatMsgText ul, .chatMsgText ol {
    margin-top: 3px;
    margin-bottom: 3px;
    padding-inline-start: 25px;
}

/* Override Promote To Voice request bubbles */
.chatMsgFarEnd.promoteRequest .chatMsgBubble {
    background-color: var(--chat-promote-color);    
    color: white;
}
.chatHistoryFarEnd.promoteRequest .chatMsgBubble {
    background-color: var(--chat-promote-color-hist);  
    color: white;
}
a.voicePromoteLink {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
}

/* Override IM Chat conversation bubbles to be green rather than blue */
.intTypeIM .chatMsgNearEnd .chatMsgBubble {
    background-color: var(--im-color-nearend);    
}
.intTypeIM .chatMsgFarEnd .chatMsgBubble {
    background-color: var(--im-color-farend);
}

/* Agent Input box and send button */
.chatAgentInputBox {
}
.chatAgentInputBox textarea {
    width: 95%;
    height: 60px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    padding: 2px 5px;    
}
/* Chat Send button */
.chatSendBtn {
    width: 100px;    
    font-size: 15px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    padding: 4px 5px;
    background-color: var(--action-btn-color);
    color: var(--text-color-ondarkbg);
}
/* Override IM Chat send button to be green rather than blue */
.intTypeIM .chatSendBtn {
    background-color: var(--im-color-primary);    
}

.chatSendBtn.chatSendBtnDisabled { 
    background-color: var(--action-btn-disabled-color);    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/createtasks/CreateTasksToolControl.css ==============================*/


/***** Create Tasks Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_CreateTasks .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-createtasks-v2.png");
}

/***** Create Tasks Content Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#createtasktool_body {
    position: relative;
    height: calc(100% - 55px);
}

/* Progress bar overrides to support form error messages */
#createtasktool_body .toolProgressMsg.inError {
    color: var(--notify-error);
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
}

/* Template Selector */
#task_template_select_block {
    margin: 10px;
}
#task_template_selector {
    margin-top: 5px;
    width: 100%;
}

/* Action Buttons */
#create_task_actions_block {
    text-align: center;
    border-bottom: 1px solid var(--accent-color-lighttheme-soft);
    margin-bottom: 10px;    
}
#create_task_actions_block .scIntActionBtn {
    margin: 8px 20px;
}

/* *** Task Form  *** */

/* form area and surrounding scroll wrapper */
#createtasktool_body .createTaskFormScrollWrapper {
    height: calc(100% - 160px);
}
#create_task_form_block {
    padding: 0 10px;
}

/* individual form label/field/input formatting */
#create_task_form_block .taskField {
    margin-bottom: 8px;
}
#create_task_form_block .taskFieldLbl {
    margin-bottom: 5px;
}
#create_task_form_block .valueInError .taskFieldLbl {
    color: var(--notify-error);
}
.taskField input, .taskField select, .taskField textarea {
    width: calc(100% - 10px);
}
.taskField input[type=number] {
    width: 100px;
}
.taskField textarea {
    height: 110px;
}

/* specific override for the special "Task Name" field */
#task_name_field {
    border-bottom: 1px solid var(--accent-color-lighttheme-soft);
    padding-bottom: 10px;
    margin-bottom: 10px;    
}
#task_name_field .taskFieldLbl {
    font-weight: bold;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ============================== DenyPage.css ==============================*/

/*** Layout of the Symbee Connect "Deny" page ***/
#sc_deny_panel {
    margin: 50px auto 0;
    width: 280px;
    border: 2px solid var(--accent-color-lighttheme-soft);
    border-radius: 10px;
    background: var(--bg-gradient-lighttheme);
    text-align: center;
}
#sc_deny_logo {
    margin: 10px auto 0;
    width: 245px;
    height: 45px;
    background-repeat: no-repeat; 
    background-size: 245px auto;
    background-image: url("../images/main-logo.png");    
}
#sc_deny_icon {
    margin: 10px auto 0;
    width: 160px;
    height: 150px;
    background-repeat: no-repeat; 
    background-size: contain;
    background-image: url("../images/sc-error-page-icon.png");    
}
#sc_deny_msgblock {
    font-size: 16px;
    padding: 0 20px 20px;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/phone/DialPadControl.css ==================*/

.dialPadContainer {
    max-width: 285px;
    margin: 0 auto;    
}

/* The top Input filed and Recent entries block */
.dialPadFieldBlock {
    margin-top: 10px;
    text-align: center;
}

.dialPadInputFieldBlock {
    position: relative;
}
.dialPadE164Prefix {
    position: absolute;
    top: 4px;
    right: 225px;
    font-size: 15px;
    font-weight: bold;
}
.dialPadPhoneInput {
    width : 150px;
}
.dialPadInputHelpBtn {
    position: absolute;
    top: 5px;
    right: 40px;
    height: 16px;
    width: 16px;
    background-image: url("../images/common/help-info-btn-v2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
/* The touch-tone button block */
.dialPadButtonBlock {
    width: 138px;
    margin: 7px auto;
    padding: 7px 10px;
    text-align: center;
    background-color: #E7E8E9;
    border-radius: 5px;    
}

/* The dialpad Delete button */
.dialPadDeleteBtn {
    background-color: var(--accent-color-lighttheme-heavy);
    color: #FFFFFF;
    padding: 3px;
    width: 60px;
    border-radius: 6px;
    margin: 3px auto 0 auto;    
    cursor: pointer;
}

/* All the other dialpad buttons */
.dialPadButton {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 2px;
    padding-top: 3px;
    cursor: pointer;
    background-color: #FFF;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* The 12 dialpad button images */
.dialPadBtn0 {
    background-image: url("../images/dialpad/dialpad-0-btn-v2.png");
}
.dialPadBtn1 {
    background-image: url("../images/dialpad/dialpad-1-btn-v2.png");
}
.dialPadBtn2 {
    background-image: url("../images/dialpad/dialpad-2-btn-v2.png");
}
.dialPadBtn3 {
    background-image: url("../images/dialpad/dialpad-3-btn-v2.png");
}
.dialPadBtn4 {
    background-image: url("../images/dialpad/dialpad-4-btn-v2.png");
}
.dialPadBtn5 {
    background-image: url("../images/dialpad/dialpad-5-btn-v2.png");
}
.dialPadBtn6 {
    background-image: url("../images/dialpad/dialpad-6-btn-v2.png");
}
.dialPadBtn7 {
    background-image: url("../images/dialpad/dialpad-7-btn-v2.png");
}
.dialPadBtn8 {
    background-image: url("../images/dialpad/dialpad-8-btn-v2.png");
}
.dialPadBtn9 {
    background-image: url("../images/dialpad/dialpad-9-btn-v2.png");
}
.dialPadBtnStar {
    background-image: url("../images/dialpad/dialpad-star-btn-v2.png");
}
.dialPadBtnPound {
    background-image: url("../images/dialpad/dialpad-pound-btn-v2.png");
}
.dialPadBtnPlus {
    background-image: url("../images/dialpad/dialpad-plus-btn-v2.png");
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/directory/DirectoryControl.css ==============================*/


/***** Directory Contents styling *****/

/* The overall directory surrounding */
#newoutbound_channel_phone_block .directoryContainer,
#newoutbound_channel_dictatedtaskxfer_block .directoryContainer {
    height: calc(100% - 35px);
}
#newoutbound_channel_uc_block .directoryContainer {
    height: calc(100% - 35px); 
}
#newoutbound_channel_chatqueue_block .directoryContainer {
    height: calc(100% - 25px);
}
#newoutbound_channel_sms_block .directoryContainer {
    height: calc(100% - 25px);
}
#directorytool_body .directoryContainer {
    height: 100%;
}

/* Directory Search Box */
.dirSearchInput {    
    width: calc(100% - 10px);
    margin-bottom: 5px;
}

/* The scrollable directory content */
#newoutbound_channel_phone_block .directoryScrollWrapper,
#newoutbound_channel_dictatedtaskxfer_block .directoryScrollWrapper {
    height: calc(100% - 30px);
}
#newoutbound_channel_uc_block .directoryScrollWrapper {
    height: calc(100% - 35px);
}
#newoutbound_channel_chatqueue_block .directoryScrollWrapper {
    height: calc(100% - 30px);
}
#newoutbound_channel_sms_block .directoryScrollWrapper {
    height: calc(100% - 30px);
}
#directorytool_body .directoryScrollWrapper {
    height: calc(100% - 30px);
}

/* Each Directory Group Heading */
.dirGroupHeadingBlock {
    position: relative;
    text-align: left;
    font-size: 15px;
    padding: 2px 5px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
    margin: 2px 0;
}

/* Each Directory Entry */
.dirEntryBlock {
    position: relative;
    padding: 2px 0 2px 10px;
}
.dirEntryBlock:hover {
    background-color: var(--list-entry-hover-color);
}
/* class used to hide an entry if filtered by search */
.dirEntryBlock.searchHidden {
    display: none;
}

/*** Hide all the directory entry fields we aren't ready for yet '***/
.dirEntryAddressesShow, .dirEntryInfoShow {
    display: none;
}

/* Presence enabled entries */
.dirEntryDisplayText.iconized {
    padding-left: 35px;
}
.dirEntryType.agentUC {
    position: absolute; 
    top: 4px;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;            
}
.dirEntryType.agentUC.presenceAVAILABLE {
    background-image: url("../images/directory/presence-icon-avail-v2.png");
} 
.dirEntryType.agentUC.presenceBUSY {
    background-image: url("../images/directory/presence-icon-busy-v2.png");
} 
.dirEntryType.agentUC.presencePENDING {
    background-image: url("../images/directory/presence-icon-pending-v2.png");
} 
.dirEntryType.agentUC.presenceAWAY {
    background-image: url("../images/directory/presence-icon-away-v2.png");
} 
.dirEntryType.agentUC.presenceOFFLINE {
    background-image: url("../images/directory/presence-icon-offline-v2.png");
} 

.dirEntryPreferredAddress {
    font-size: 10px;
    margin-left: 25px;
}

/** Direct Entry Action Buttons **/

.dirEntryActionBtns {
    position: absolute;
    top: 4px;
    right: 10px;
}
.dirEntryCallPreferredBtn, .dirEntryCallDirectBtn {
    height: 20px;
    width: 20px;
    float: right;
    margin: 3px 0px 0px 3px;
    cursor: pointer;

    background-image: url("../images/common/dir-clicktocall-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    opacity: 0.3;   /* faded, not in your face */
    z-index: 2;
}
.dirEntryCallPreferredBtn:hover, .dirEntryCallDirectBtn:hover {
    opacity: 1.0;
}
.dirEntryChatBtn {
    height: 20px;
    width: 20px;
    float: right;
    margin: 3px 0px 0px 3px;
    cursor: pointer;

    background-image: url("../images/common/dir-clicktochat-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    opacity: 0.3;   /* faded, not in your face */
    z-index: 2;
}
.dirEntryChatBtn:hover {
    opacity: 1.0;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/directory/DirectoryToolControl.css ==============================*/


/***** Directory Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_Directory .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-directory-v2.png");
}

/***** Directory Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#directorytool_refresh_block {
    position: relative;
}
#directorytool_refresh_block .toolProgressMsg {
    border-bottom: none;
}

#directorytool_body {
    height: 88%;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== platform/plugin/DoNotCall.css ==============================*/

/* When DoNotCall enabled, we need a little more room in the ActionButtons block */
.intActionButtonsBlock.addToDNCEnabled {
    position: relative;
    margin-top: 15px;    
}

.doNotCallAddBtn {
    position: absolute;
    top: -11px;
    right: 5px;
    width: 70px;
    height: 22px;
    cursor: pointer;
    background-repeat: no-repeat;     
    background-image: url("../images/plugins/add-to-dnc-btn-v2.png");
}
.doNotCallAddBtn.dncDisabled {
    opacity: 0.5;   /* faded */    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/email/EmailFrameControl.css ==================*/

/**********   Section 4 - Custom for Email Interactions (Email Summary window) **********/

.intTypeEmail .intFrameSection4 {
    height: calc(100% - 160px);
}
.intFrameEmailPart {
    height: 100%;
}

/* Overall Email Window sizing / Style */
.emailWindowContainer {
    height: 100%;
    padding: 10px 5px 0px;
    text-align: center;    
    height: calc(100% - 85px);
}

/***** Email Summary Area *****/
.emailSummaryScrollWrapper {
    height: calc(100% - 5px);
}

.emailNotAvailableMessage, .emailLoadingMessage {
    margin: 15px 0;
    font-style: italic;
}

.emailSummaryArea {
    text-align: left;
}

.emailSummaryField {
    margin-bottom: 10px;
}
.emailSummaryFieldLabel {
    font-weight: bold;
}
.emailSummaryFieldValue {
    margin-left: 15px;
}

/*** The Park Email Areas dialog ***/
.parkEmailAreasList {
    text-align: center;
    margin-top: 5px;
}
.parkAreaDialogItem {
    font-weight: bold;
    cursor: pointer;
}
.parkAreaDialogItem:hover {
    background-color: var(--accent-color-lighttheme-heavy);
    color: #FFFFFF;
    font-weight: bold;
}/* Copyright (c) Symbee. All rights reserved. */
/* ============================== EmailViewer.css ==============================*/

/* declare all our common variables (custom properties) */
:root {
    --email-separator-line: #B7B9BD;
}

/***** Overall UI sizing ******/
body[data-symbee-view="email"] {
    margin: auto;    
}
#email_view_port {
    position: absolute;
    /* Stretch to extents of window */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-gradient-popouts);    
}

/* Header bar */
#email_viewer_header_area {
    height: 70px;
}
#email_viewer_logo {
    width: 250px;
    height: 50px;
    background-repeat: no-repeat; 
    background-position: 5px 4px;
    background-size: 245px auto;
    background-image: url("../images/main-logo.png");
}

/*** Email Handles/Tab area ***/
#email_interaction_handles_area {
    position: relative;
    bottom: -2px;
    margin: 0 25px 0 6px;
    height: 26px;
}
.emailViewerEmailHandle {
    display: inline-block;
    height: 20px;
    margin: 0 2px;
    padding: 2px 8px;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    cursor: pointer;
    z-index: 10;   /* (in front) */
    background-color: var(--tab-bg-focused-color);
    color: var(--text-color-onlightbg);
    font-size: 15px;
}
.emailViewerEmailHandle:not(.focused) {
    z-index: -10;   /* (behind) */
    background-color: var(--tab-bg-unfocused-color);
    color: var(--text-color-ondarkbg);
}
.emailViewerEmailHandle.newUnseen {
    animation: blinkingRed 2s infinite;
}
@keyframes blinkingRed {
    0%      { background-color: var(--tab-bg-unfocused-color); }
    25%     { background-color: var(--tab-bg-unfocused-color); }
    50%     { background-color: var(--is-color-notify); color: #FFF; }
    75%     { background-color: var(--is-color-notify); color: #FFF; }
    100%    { background-color: var(--is-color-notify); color: #FFF; }
}

/*** Main Email Interaction Panels area ***/
#email_interaction_area {
    border-radius: 0 3px 3px 3px;
    margin: 0 8px 8px;
    height: calc(100% - 111px);   
    background-color: #FFF;
}

/*** Each Email Interaction Panel ***/

/* Email outer Panel */
.emailInteractionView {
    display: flex;
    flex-flow: column;
    height: 100%;
}
.emailViewerContentBlock {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
}

/* Email Loading message */
.emailViewerLoadingMsg {
    text-align: center;
    font-size: 15px;
    font-style: italic;
    margin: 50px;
}

/* Action Bar */
.emailViewerActionBlock {
    position: relative;
    display: flex;
    height: 55px;
    border-bottom: 1px solid var(--email-separator-line);
    padding: 10px;
}
.emailActionShowButtons, .emailUtilityShowButtons {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;    
}
.emailUtilityShowButtons {
    margin-left: auto;
}
.emailViewerActionError {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    border-radius: 10px;
    margin: 5px 10px;
    padding: 5px 10px;
    background: red;
    color: white;
    font-weight: bold;
    text-align: center;
}
.emailViewerActionErrorClose {
    padding-left: 15px;
    text-decoration: underline;
    color: black;
    cursor: pointer;
}
.emailViewerSendInProgress {
    position: absolute;
    top: 15px;
    left: 180px;
    border-radius: 10px;
    padding: 10px 30px;
    background: silver;
    color: white;
    text-align: center;    
}

/* Action Buttons */
.emailActionButton {
    display: inline-block;
    height: 55px;
    width: 50px;
    margin: 0 10px;
    background-repeat: no-repeat; 
    background-size: contain;
    cursor: pointer;    
}
.emailActionReplyBtn {
    background-image: url("../images/interaction/actions/email/email-reply-btn-v2.png");
}
.emailActionReplyAllBtn {
    background-image: url("../images/interaction/actions/email/email-reply-all-btn-v2.png");
}
.emailActionForwardBtn {
    background-image: url("../images/interaction/actions/email/email-forward-btn-v2.png");
}
.emailActionParkBtn {
    background-image: url("../images/interaction/actions/email/email-park-btn-v2.png");
}
.emailActionSendBtn {
    background-image: url("../images/interaction/actions/email/email-send-btn-v2.png");
}
.emailActionCancelBtn {
    background-image: url("../images/interaction/actions/email/email-cancel-btn-v2.png");
}
.emailActionDownloadBtn {
    background-image: url("../images/interaction/actions/email/email-download-btn-v2.png");
}
.emailActionReloadBtn {
    background-image: url("../images/interaction/actions/email/email-reload-btn-v2.png");
}

/* Disabled Action button */
.emailActionButton.emailActionDisabled {
    opacity: 0.3;
    cursor: default;
}

/* Email Meta Area */
.emailViewerMetaShowBlock, .emailViewerMetaEditBlock {
    border-bottom: 1px solid var(--email-separator-line);
    padding: 10px 10px 5px;
    font-size: 14px;    
}
.emailViewerMetaFieldBlock {
    margin-bottom: 5px;
}
.emailViewerMetaLabel {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    font-weight: bold;
}
.emailViewerMetaShowField {
    display: inline-block;    
    width: calc(100% - 110px);
}
.emailViewerMetaEditField {
    display: inline-block;
    width: calc(100% - 110px);    
}
.emailViewerMetaEditField input {
    width: calc(100% - 10px);
    height: 20px;
    font-size: 14px;
}

/* Attachments */
.emailAttachment {
    display: inline-block;
    margin: 1px 5px 3px 0;
    background-color: #F0F0F0;
    border: 1px solid var(--accent-color-lighttheme-soft);
}
.emailAttachmentLink {
    display: inline-block;
    padding: 1px 5px;
}
.emailAttachmentLink a {
    color: var(--text-color-onlightbg);
    text-decoration: none;
}
.emailAttachmentDelBtn {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: text-bottom;
    margin: 0 3px 3px 0;
    background-image: url("../images/common/cancel-btn-light-v2.png");
    background-repeat: no-repeat; 
    background-size: contain;
    cursor: pointer;    
}
.emailAttachmentDelBtn:hover {
    background-color: lightgrey;
}
.emailViewerMetaShowField .emailAttachmentDelBtn {
    display: none;
}

/* Email Content */
.emailViewerBodyContainer {
    flex-grow: 1;
    overflow-y: auto;
}
.emailViewerBody {
    height: 100%;
}
.emailViewerBodyShowBlock {
    padding: 10px;
}
.emailViewerBodyEditBlock {
}
/* Styling for the iframe containing the email content */
.emailViewerBodyShowFrame {
    width: 100%;
    border: none;
    overflow-y: hidden;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/AmazonLoginOverlay.css ==============================*/

/*** PAUSE/RESUME ***/
#pause_resume_extension_overlay {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255, 0.75);
}
#pause_resume_extension_overlay_button {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--notify-error);
    color: var(--text-color-ondarkbg);
    border-radius: 3px;
    cursor: default;
}

/*** SCREEN RECORDING ***/
#screen_recording_extension_overlay {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255, 0.75);
}
#screen_recording_extension_overlay_button {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--notify-error);
    color: var(--text-color-ondarkbg);
    border-radius: 3px;
    cursor: default;
}

#screen_recording_download_link {
    margin: 0;
    position: absolute;
    top: calc(50% - -75px);
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D8D8D8;
    border-radius: 5px;
    color: #000000;
    border: 0px;
    cursor: default;
    padding: 3px;
}/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/generictask/GenTaskFrameControl.css ==================*/

/**********   Section 4 - Custom for Generic Task Interactions  **********/

.intTypeGenTask .intFrameSection4 {
    height: calc(100% - 160px);
}
.intFrameTaskPart {
    height: 100%;
}

/* Overall Task Window sizing / Style */
.taskWindowContainer {
    height: 100%;
    padding: 10px 5px 0px;
    text-align: center;    
    height: calc(100% - 90px);
}

/***** Generic Task Detail Area *****/

.taskDetailScrollWrapper {
    height: calc(100% - 15px);
}

/* Individual Task fields */
.taskDetailFields {
    margin-top: 10px;
    text-align: left;
}
.taskDetailField, .taskDetailLink, .taskDetailButton {
    margin-bottom: 10px;
}
.taskDetailFieldLabel {
    font-weight: bold;
    width: 100%;
}
.taskDetailFieldValue {
    margin-left: 15px;
    max-width: calc(100% - 15px);
    display: inline-block;
    overflow-wrap: break-word;    
}
.taskDetailFieldValue.taskNoValue {
    color: silver;
}

/* Field highlighting */
.taskDetailField.highlight .taskDetailFieldLabel,
.taskDetailLink.highlight .taskDetailFieldLabel {
    color: var(--is-color-notify);
}
.taskDetailField.highlight .taskDetailFieldValue {
    color: var(--is-color-notify);
    font-weight: bold;
}

/* Phone Fields click-to-call button */
.taskFieldClickToCallBtn {
    display: inline-block;
    margin-left: 5px;
    vertical-align: bottom;
    
    cursor: pointer;
    height: 20px;
    width: 20px;
    background-image: url("../images/common/dir-clicktocall-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    opacity: 0.3;   /* faded, not in your face */
    z-index: 2;    
}
.taskFieldClickToCallBtn:hover {
    opacity: 1.0;
}
.taskFieldClickToCallBtn.callFailed {
    background-image: url("../images/common/dir-clicktocall-fail-btn.png");
}

/* Generic Task Button Fields */
.taskDetailButton {
    text-align: center;
}
.taskDetailButton .taskDetailButtonCtrl {
    display: inline-block;
    background-color: var(--tool-action-btn-color);
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 3px;
    padding: 4px 10px;    
    cursor: pointer;
}

/* Generic Task Link Fields */
.taskDetailLink .taskDetailLinkCtrl {
    margin-left: 15px;
    max-width: calc(100% - 15px);
    display: inline-block;
    text-decoration: underline;
    color: darkblue;
    cursor: pointer;
    overflow-wrap: break-word;    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ============================== HiddenCCP.css ==============================*/

/* below element dynamically injected by amazon overlay, always hidden (display: none),
   except when prompting for required permissions.
   Style below simply displays the window nicely in the cases where it is force-displayed. */
#amazon_connect_ccp {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 97%;
    height: 400px;
}
#amazon_connect_ccp iframe {
    border: none;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/interactions/InteractionFrameControl.css ==============================*/

/**********  Styling for Common Interaction Frame functionality shared across channels  **********/
/**********      **Don't put Channel-specific stuff in here!!!                          **********/

/* Outer container of each individual interaction (inside the drawn frame) */
.intFrameArea {
    position: relative;
    height: 100%;
}

/* First section, common to all interaction types - far-end address, status bar, etc) */
.intFrameSection1 {

}

/* Far-End address (e.g. ANI bar) */
.intInfoFarEndAddress {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 0 4px;
    background-color: var(--int-hdr-background-color-lighttheme);
    color: var(--int-hdr-addressbar-text-color);
}
/* Horizontal bar showing total elapsed time for the interaction */
.intInfoElapsedTimeBar {
    text-align: center;
    font-size: 16px;
    padding: 2px 0;
    background-color: var(--int-hdr-background-color-lighttheme);
    color: var(--int-hdr-elapsedbar-text-color);
}
.intInfoElapsedTime {
    margin-left: 8px;
}

/* Interaction State color bar - includes elapsed time in current state */
.intInfoState {
    text-align: center;    
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 6px;
    background-color: var(--int-hdr-background-color-lighttheme);
    color: #FFFFFF; /* default - always overridden below, but just in case */
}
.intInfoStateTimer {
    margin-left: 10px;
}
/* The different colors of the interaction state text, depending on current state. */
.intStateAlerting .intInfoState {
    color: var(--is-color-alerting);
}
.intStateActive .intInfoState {
    color: var(--is-color-active);
}
.intStateNotify .intInfoState {
    color: var(--is-color-notify);
}
.intStateWrap .intInfoState {
    color: var(--is-color-wrap);
}
/* Interaction Header background slightly darker on dark theme. */
.scThemeDark .intInfoFarEndAddress, .scThemeDark .intInfoElapsedTimeBar, .scThemeDark .intInfoState {
    background-color: var(--int-hdr-background-color-darktheme);    
}

/* Override the active Color just for Instant-Messages */
.intStateActive.intTypeIM .intInfoState {
    color: var(--im-color-primary);
}
/* Override the wrap Color just for Instant-Messages */
.intStateWrap.intTypeIM .intInfoState {
    color: var(--im-color-wrap);
}
/* Override the active Color just for UC Calls */
.intStateActive.intTypeUCCallIn .intInfoState, .intStateActive.intTypeUCCallOut .intInfoState {
    color: var(--uc-color-primary);
}
/* Override the wrap Color just for UC Calls */
.intStateWrap.intTypeUCCallIn .intInfoState, .intStateWrap.intTypeUCCallOut .intInfoState {
    color: var(--uc-color-wrap);
}


/***** Interaction Action Buttons *****/

/* Make the total size of the Action Button area fixed */
.intActionButtonsBlock {
    text-align: center;
    height: 60px;
    margin-bottom: 5px;
}

/* "Initial" Action buttons (Accept and/or Decline) styling */
.scIntInitialActionBtn {
    display: inline-block;
    width: 40px;
    height: 40px;    
    background-size: contain;
    background-repeat: no-repeat;
    margin: 20px 20px 10px;
    cursor: pointer;
}
/* The alternative Initial Action Message displayed instead of Accept/Decline buttons */
.intAcceptDeclineMsg {
    font-size: 18px;
    font-weight: bold;
    width: 160px;
    margin: 10px auto 0;    
}

/* "Active State" Action buttons area, with "Chat Copied" message overlay */
.intActiveActionsBlock {
    position: relative;
}
.intChatCopiedMsg {
    position: absolute;
    width: 130px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFF;
    border: 1px solid var(--list-entry-hover-color);
    border-radius: 3px;
    padding: 2px 15px;
    font-size: 14px;
}

/* "Active State" Action buttons (actions available after the interaction is established) */
.scIntActionBtn {
    display: inline-block;
    width: 34px;
    height: 34px;    
    border-radius: 5px;
    background-color: #FFF;     /* white */
    background-size: contain;
    background-repeat: no-repeat;
    margin: 20px 3px;
    cursor: pointer;
}

/* The mapping of all the action-button images */
.intBtnAccept {
    background-image: url("../images/interaction/actions/int-action-accept-btn-v2.png");    
}
.intBtnDecline {
    background-image: url("../images/interaction/actions/int-action-decline-btn-v2.png");    
}
.intBtnMute {
    background-image: url("../images/interaction/actions/int-action-mute-on-btn-v2.png");    
}
.intBtnUnMute {
    background-image: url("../images/interaction/actions/int-action-mute-off-btn-v2.png");    
}
.intBtnTakeOver {
    background-image: url("../images/interaction/actions/int-action-takeover-btn-v2.png");    
}
.intBtnHold {
    background-image: url("../images/interaction/actions/int-action-hold-btn-v2.png");    
}
.intBtnUnHold {
    background-image: url("../images/interaction/actions/int-action-hold-btn-v2.png");    
}
.intBtnAddParty {
    background-image: url("../images/interaction/actions/int-action-addparty-btn-v2.png");    
}
.intBtnDropParty {
    background-image: url("../images/interaction/actions/int-action-dropparty-btn-v2.png");    
}
.intBtnMerge {
    background-image: url("../images/interaction/actions/int-action-merge-btn-v2.png");    
}
.intBtnTransfer {
    background-image: url("../images/interaction/actions/int-action-transfer-btn-v2.png");    
}
.intBtnTransferBlind {
    background-image: url("../images/interaction/actions/int-action-transfer-btn-v2.png");    
}
.intBtnQuickSMS {
    background-image: url("../images/interaction/actions/int-action-sms-quick-btn-v2.png");    
}
.intBtnReopen {
    background-image: url("../images/interaction/actions/int-action-reopen-btn-v2.png");    
}
.intBtnPark {
    background-image: url("../images/interaction/actions/int-action-park-btn-v2.png");    
}
.intBtnCopyChat {
    background-image: url("../images/interaction/actions/int-action-copy-transcript-btn.png");
}
.intBtnEnd {
    background-image: url("../images/interaction/actions/int-action-end-btn-v2.png");    
}
.intBtnSubmit {
    background-image: url("../images/interaction/actions/int-action-submit-btn-v2.png");    
}
/* Release button - 2 types - 1 for tasks (the default), and 1 specifically for phone */
.intBtnRelease {
    background-image: url("../images/interaction/actions/int-action-release-task-btn-v2.png");    
}
.intTypePhoneIn .intBtnRelease, .intTypePhoneOut .intBtnRelease, .intTypePhoneMonitor .intBtnRelease,
.intTypeUCCallIn .intBtnRelease, .intTypeUCCallOut .intBtnRelease, .intTypePhoneSmartDial .intBtnRelease {
    background-image: url("../images/interaction/actions/int-action-release-phone-btn-v2.png");    
}

/**********   Common Interaction Frame Section style  **********/

/* Section container */
.intFrameSection {
    margin-top: 10px;
}

/* Section Header */
.intSectionHeader {
    position: relative;
    text-align: left;
    font-size: 15px;
    padding: 2px 5px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
    cursor: pointer;    
}

.intFrame .toolSearchBlock {
    padding: 0 5px;
}
/*** Section Header Expanders ***/

/* Section expanders */
.scExpandable {
    cursor: pointer;
}
.intFrameSectionExpander {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 16px;
    height: 12px;    
    background-size: contain;
    background-repeat: no-repeat;
}

.intFrameSectionExpander.intFrameSectionExpanded {
    background-image: url("../images/common/triangle-reduce-btn.png");        
}
.intFrameSectionExpander.intFrameSectionReduced {
    background-image: url("../images/common/triangle-expand-btn.png");        
}


/**********   Section 2 - Fusion Data Display  **********/

.customDataGroupHdr {
    font-weight: bold;
    margin: 3px 5px;
}
.customDataEntry {
    position: relative;
    margin-bottom: 2px;
    display: flex;
    width: 100%;
}
.customDataEntry:hover {
    background-color: var(--list-entry-hover-color);
}
/* Copy UI for a piece of Custom Data */
.customDataCopyBtn {
    margin: 1px 4px 0 0;
    width: 16px;
    height: 16px;
    padding-left: 13px;
    background-image: url("../images/common/copy-btn.png");    
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
    visibility: hidden;
}
.customDataEntry.copyable:hover .customDataCopyBtn {
    visibility: visible;
}
.customDataCopiedMsg {
    position: absolute;
    top: 0;
    left: calc((100% / 2) - 70px);
    background-color: #FFF;
    border: 1px solid var(--list-entry-hover-color);
    border-radius: 3px;
    padding: 1px 10px;
    font-size: 13px;
}

.customDataLabel {
    margin-left: 8px;
    width: calc((100% - 41px) * 0.37);
    max-width: 140px;
    vertical-align: top;
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.customDataValue {
    word-wrap: break-word;
    flex-grow: 1;
}
.customDataLabel, .customDataValue {
    display: inline-block;
}

/* Custom Data Hilighting */
.customDataValue.hilightPOSITIVE, .customDataValue.hilightNEUTRAL, .customDataValue.hilightNEGATIVE {
    font-weight: bold;
}
.customDataLabel.hilightPOSITIVE, .customDataValue.hilightPOSITIVE {
    color: var(--hilight-positive);
}
.customDataLabel.hilightNEUTRAL, .customDataValue.hilightNEUTRAL {
    color: var(--hilight-neutral);
}
.customDataLabel.hilightNEGATIVE, .customDataValue.hilightNEGATIVE {
    color: var(--hilight-negative);
}

/**********   Section 3 - Work Codes   **********/

/* WorkCode Header specifics */
.workCodesHeader.workCodesInError {
    background-color: var(--notify-error);
    color: #FFF;
}
.workCodesHeader span {
    margin-left: 5px;
}

/* Set height of the scrollable work-code selection area */
.workCodesArea {
    font-size: 13px;
}
.intWorkCodesContainer .workCodesScrollWrapper {
    max-height: 200px;
    margin: 3px 5px 0 3px;
}
.workCodeGroupHeader {
    margin-top: 3px;
    font-weight: bold;
}
.workCodeItem {
    position: relative;
    cursor: pointer;
    padding: 2px;
}
.workCodeItem:hover {
    background-color: var(--list-entry-hover-color);
}
.workCodeItemName {
    padding-left: 28px;
}
.workCodeItemSelector {
    position: absolute;
    top: 4px;
    left: 7px;
    width: 16px;
    height: 16px;    
    background-size: contain;
    background-repeat: no-repeat;
}
.wcItemUnselected .workCodeItemSelector {
    background-image: url("../images/common/checkbox-unchecked-icon-v2.png");        
    opacity: 0.5;
}
.wcItemSelected .workCodeItemSelector {
    background-image: url("../images/common/checkbox-checked-icon-v2.png");        
}


/**********   Section 4 - Differs for each channel   **********/

.intFrameChannelSpecificBlock {
    height: 100%
}
/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/InteractionHandleControl.css ==================*/

/***** Interaction Handle Style *****/

/* Handles made up of: 
      - background image block, tab shaped, image centered, changing color based on interaction state, and 
       changing opacity based on focused/unfocused
          - backgroun icon image indicates interaction channel (phone, chat, etc)
      - new-activity icon overlayed, for chats when new unread messages are added to the conversation
      - in-error icon, if in "workCodeInError" state, a Hazard icon overlayed.
*/

/* Overall Handle sizing and style */
.intHandle {
    position: relative;
    width: 50px;
    height: 44px;
    cursor: pointer;
    margin-top: 3px;
}

/* Inner Handle Icon block (completely fills the handle) styling */
.intHandleIcon {
    height: 100%;
    width: 100%;
    background-position: calc(50% - -5px) 50%; /* (center, slightly offset to the right) */
    background-repeat: no-repeat;
    border-radius: 7px 0 0 7px;
}

/*** Inner Handle Icon block background colors - based on Interaction state and focus... ***/

/* arriving/alerting/ringing/pending states */
.intStateAlerting.intInFocus .intHandleIcon {
    background-color: var(--is-color-alerting);
}
.intStateAlerting.intUnfocused .intHandleIcon {
    background-color: var(--is-color-alerting-bg);
}
/* connected/active state */
.intStateActive.intInFocus .intHandleIcon {
    background-color: var(--is-color-active);
}
.intStateActive.intUnfocused .intHandleIcon {
    background-color: var(--is-color-active-bg);
}
/* in notification state (e.g. call-holding, etc.) */
.intStateNotify.intInFocus .intHandleIcon {
    background-color: var(--is-color-notify);
}
.intStateNotify.intUnfocused .intHandleIcon {
    background-color: var(--is-color-notify-bg);
}
/* post-conversation wrap (ACW) state) */
.intStateWrap.intInFocus .intHandleIcon {
    background-color: var(--is-color-wrap);
}
.intStateWrap.intUnfocused .intHandleIcon {
    background-color: var(--is-color-wrap-bg);
}

/* Overridden handle color specifically for instant-messages in connected/active state */
.intStateActive.intInFocus.intTypeIM .intHandleIcon {
    background-color: var(--im-color-primary);
}
.intStateActive.intUnfocused.intTypeIM .intHandleIcon {
    background-color: var(--im-color-primary-bg);
}
/* Overridden handle color specifically for instant-messages in wrap state */
.intStateWrap.intInFocus.intTypeIM .intHandleIcon {
    background-color: var(--im-color-wrap);
}
.intStateWrap.intUnfocused.intTypeIM .intHandleIcon {
    background-color: var(--im-color-wrap-bg);
}

/* Overridden handle color specifically for uc-calls in connected/active state */
.intStateActive.intInFocus.intTypeUCCallIn .intHandleIcon,
.intStateActive.intInFocus.intTypeUCCallOut .intHandleIcon {
    background-color: var(--uc-color-primary);
}
.intStateActive.intUnfocused.intTypeUCCallIn .intHandleIcon,
.intStateActive.intUnfocused.intTypeUCCallOut .intHandleIcon {
    background-color: var(--uc-color-primary-bg);
}
/* Overridden handle color specifically for uc-calls in wrap state */
.intStateWrap.intInFocus.intTypeUCCallIn .intHandleIcon,
.intStateWrap.intInFocus.intTypeUCCallOut .intHandleIcon {
    background-color: var(--uc-color-wrap);
}
.intStateWrap.intUnfocused.intTypeUCCallIn .intHandleIcon,
.intStateWrap.intUnfocused.intTypeUCCallOut .intHandleIcon {
    background-color: var(--uc-color-wrap-bg);
}

/*** Inner Handle Icon block background image - icon based on Interaction type... ***/

.intTypePhoneIn .intHandleIcon, .intTypeUCCallIn .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-phonein-v2.png");
}
.intTypePhoneOut .intHandleIcon, .intTypeUCCallOut .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-phoneout-v2.png");
}
.intTypePhoneMonitor .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-phonemonitor-v2.png");
}
.intTypePhoneSmartDial .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-phoneout-smartdial-v2.png");
}

.intTypeWebChat .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-webchat-v2.png");
}
.intTypeSMSChat .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-smschat-v2.png");
}
.intTypeIM .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-imsg-v2.png");
}
.intTypeEmail .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-email-v2.png");
}
.intTypePreviewDial .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-preview-v2.png");
}
.intTypeSDPreviewDial .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-preview-smartdial-v2.png");
}
.intTypeGenTask .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-task-v2.png");
}

.intTypeSocialLINE .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-linechat-v2.png");
}
.intTypeSocialWHATSAPP .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-wtsappchat-v2.png");
}
.intTypeSocialFBMESSENGER .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-fbmchat-v2.png");
}
.intTypeSocialTWITTERDM .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-twdmchat-v2.png");
}
.intTypeSocialOTHER .intHandleIcon {
    background-image: url("../images/interaction/channelhandles/int-handle-socialotherchat-v2.png");
}

/* The Interaction Handle "New-Activity" badge */
.intHandle .intHandleNewActivityIcon {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 16px;
    width: 16px;
    z-index: 20;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/interaction/channelhandles/int-handle-new-badge.png");
    display: none;
}
.intHandle.chatMsgWaiting .intHandleNewActivityIcon {
    display: block;
}

/* The Interaction Handle (WorkCodes) "InError" badge */
.intHandle .intHandleErrorIcon {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 5px;
    bottom: 5px;
    z-index: 20;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/interaction/channelhandles/int-handle-error-badge.png");
    display: none;
}
.intHandle.workCodesInError .intHandleErrorIcon {
    display: block;
}

/* Copyright (c) Symbee. All rights reserved. */
/* ======================== platform/plugin/jabra.css ==============================*/

.jabraLogoConnected {
    display: inline-block;
}
.scThemeLight .jabraLogoConnected {
    width: 76px;
    height: 20px;
    background-repeat: no-repeat; 
    background-image: url("../images/plugins/jabra-light.png");
}
.scThemeDark .jabraLogoConnected {
    width: 76px;
    height: 20px;
    background-repeat: no-repeat; 
    background-image: url("../images/plugins/jabra-dark.png");
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== platform/plugin/NetSuite.css ==============================*/

/* The special QuickTool Handle Icon for the NetSuite Plugin */
.quickToolNetSuiteHandle .toolHandleIcon {
    background-image: url("../images/plugins/tool-handle-netsuite-v2.png");
}

/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/interactions/NewOutboundControl.css ==============================*/


/***** NewOutbound Handle *****/

#new_outbound_handle .intHandleIcon {
    position: absolute;
    top: 5px;
    left: 4px;
    background-position: center;
    width: 34px;
    height: 34px;
    border-radius: 5px;
}
#new_outbound_handle.unfocused .intHandleIcon {
    background-color: unset;
}
.scThemeLight #new_outbound_handle.unfocused:hover .intHandleIcon {
    background-color: #F1F2F2;
}
.scThemeDark #new_outbound_handle.unfocused:hover .intHandleIcon {
    background-color: #262B2F;
}

.scThemeLight #new_outbound_handle .intHandleIcon {
    background-image: url("../images/interaction/new-outbound-handle-light.png");
}
.scThemeDark #new_outbound_handle .intHandleIcon {
    background-image: url("../images/interaction/new-outbound-handle-dark.png");
}

/***** NewOutbound Frame *****/
/* (Note: Some of the NewOutbound frame styling comes from InteractionFrameControl.css) */

/* Outbound Launch notify... */
#newoutbound_launch_notify {
    position: absolute;
    top: 85px;
    margin-left: 16px;
    padding: 20px 15px;
    text-align: center;
    z-index: 10;
    background-color: #FFFFFF;
    border: 2px solid var(--accent-color-lighttheme-soft);
    border-radius: 5px;
}
#newoutbound_launch_notify.inError {
    color: red;
}

/*** Section 1 ***/

/* Heading and little close button */
#newoutbound_heading {
    position: relative;
    text-align: center;
    font-size: 17px;
    padding: 4px 0;
    background-color: var(--newout-heading-color);
    color: var(--newout-heading-text-color);
    border-radius: 8px 8px 0 0;
}
#newoutbound_close_btn {
    position: absolute;
    top: 6px;
    right: 4px;
}

/* Channel selector dropdown*/
#newoutbound_channel_select_block {
    margin: 25px 0;
    text-align: center;
}
#newoutbound_channel_select_label {
    display: inline-block;
    margin-right: 10px;
}
#newoutbound_channel_select-button {
    width: 150px;
}

/* Connect and Cancel buttons */
#newoutbound_gocancel_buttons {
    text-align: center;
    margin-top: 20px;
}
#newoutbound_cancel_btn, #newoutbound_connect_btn {
    margin: 0 15px;
}

/* Originating Block */
#newoutbound_originating_block {
    position: relative;
    margin-top: 15px;
    text-align: left;
}
.newOutboundOrigSelectedBlock {    
    height: 40px;
    text-align: center;
    cursor: pointer;
}
.newOutboundOrigSelectedLine1 span {
    font-weight: bold;
}
.newOutboundAvailableHdr {
    padding: 2px 7px;
    font-size: 15px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
    text-align: left;
}
.newOutboundOrigScrollWrapper {
    max-height: 110px;
}
.newOutboundOrigEntriesBlock .newOutboundOrigEntry {
    padding: 2px 0 2px 10px;
    cursor: pointer;
}
.newOutboundOrigEntriesBlock .newOutboundOrigEntry:hover {
    background-color: var(--list-entry-hover-color);
}
.newOutboundOrigEntryAddress {    
    font-weight: bold;
}
.newOutboundOrigEntryName {    
    font-size: 10px;
    margin-left: 25px;
}   

/*** Section 2 ***/

/*** Override Section 2 column position for this frame ***/

#new_outbound_frame_block .intFrameSection2 {
    height: calc(100% - 95px);    
}

#newoutbound_channel_blocks {
    height: 100%;    
}
.newOutboundChannelBlock {
    height: 100%;
}

/*** Phone Channel capture area ***/

#newoutbound_channel_phone_block {
    position: relative;
    margin-top: 15px;
    text-align: left;
}
#newoutbound_phone_directory_block {
    height: calc(100% - 35px);
}

/*** Dictated Chat/Task Transfer capture area ***/

#newoutbound_channel_dictatedtaskxfer_block {
    position: relative;
    margin-top: 15px;
    text-align: left;
    height: calc(100% - 15px);
}

/*** Chat Queue capture area ***/

#newoutbound_channel_chatqueue_block {
    position: relative;
    margin-top: 15px;
    text-align: left;
}
#newoutbound_chatqueue_directory_block {
    height: calc(100% - 15px);
}

/*** Email Queue capture area ***/

#newoutbound_channel_emailxfer_block {
    position: relative;
    margin-top: 15px;
    text-align: left;
}

#newoutbound_emailxfer_directory_block {
    height: calc(100% - 15px);
}

/*** SMS Channel capture area ***/

#newoutbound_channel_sms_block {
    position: relative;
    margin-top: 15px;
    text-align: left;
}

/*** Instant Message and UC Calling Channel capture area ***/

#newoutbound_channel_uc_block {
    position: relative;
    margin-top: 15px;
    text-align: left;
}
#newoutbound_uc_directory_block {
    height: calc(100% - 35px);
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/parkedemail/ParkedEmailToolControl.css ==============================*/


/***** Parked Email Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_ParkedEmail .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-parkedemail-v2.png");
}

/***** Parked Email Content Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#parkedemailtool_body {
    position: relative;
    margin-top: 5px;
    height: 94%;
}
#parkedemailtool_body .parkedEmailScrollWrapper {
    height: calc(100% - 40px);
}

/* Parking Area and Area Headers */
#parkedemailtool_body .parkingArea {
    padding-top: 10px;
}
.parkingAreaHeader {
    position: relative;
    text-align: left;
    font-size: 15px;
    padding: 2px 5px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
}
.parkingAreaHeader .parkingAreaExpander {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 16px;
    height: 12px;    
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../images/common/triangle-expand-btn.png");        
}
.parkingAreaHeader .parkingAreaExpander.parkingAreaExpanded {
    background-image: url("../images/common/triangle-reduce-btn.png");        
}

/*** Each Parked Email Area and Parked Email Entries ***/

.parkingAreaItems {
    padding-top: 5px;
}
.parkedEmailBlock {
    position: relative;
    padding: 2px 0 2px 10px;
    margin-bottom: 3px;
    border-bottom: 1px solid #E0E0E0;    
    font-size: 12px;
    cursor: pointer;
}
.parkedEmailBlock:hover {
    background-color: var(--list-entry-hover-color);
}

/* limit how much content is displayed in each field - and don't wrap - single line for each of these fields */
.parkedEmailBlock div {
    white-space: nowrap;
    overflow: hidden;
    width: 96%;
}
/* Highlight the received time for each parked email */
.parkedEmailBlock .receivedTime {
    font-weight: bold;
}
/* Subject - let it wrap so all can be seen, and separate */
.parkedEmailBlock .subject {
    white-space: normal;
    border-top: 1px solid #F5F5F5;
    padding: 2px 0;
}/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/phone/PhoneFrameControl.css ==================*/

/**********   Section 4 - Custom for Phone Interactions (Dialpad) **********/

.intFrameSection4 {
}

/*** Conferenced Phone Parties block ***/

.phonePartiesBlock {
    margin: 5px 0 10px;
}
.phonePartyEntry {
    display: flex;
    margin-bottom: 3px;
    padding: 3px 7px;
    color: #FFF;
    background-color: var(--is-color-active);
}
.intStateNotify .phonePartyEntry {
    background-color: var(--is-color-notify);
}
.phonePartyActionButtons {
    margin-left: auto;
    display: flex;
}
.phonePartyActionButtons div {
    width: 17px;
    height: 17px;
    margin-left: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #FFF;
    cursor: pointer;
}
.phPartyUnmergeBtn {
    background-image: url("../images/interaction/actions/phone/conf-party-unmerge-btn.png");
}
.phPartyDropBtn {
    background-image: url("../images/interaction/actions/phone/conf-party-drop-btn.png");
}

/*** The Drop Party dialog ***/

.dropPhonePartyList {
    text-align: center;
    margin-top: 5px;
}
.dropPhonePartyItem {
    font-weight: bold;
    cursor: pointer;
}
.dropPhonePartyItem:hover {
    background-color: var(--accent-color-lighttheme-heavy);
    color: #FFFFFF;
    font-weight: bold;
}

/**********   AutoDial Section - Custom for AutoDial/SmartDial Phone Interactions **********/

.intTypePhoneSmartDial .intFrameSection4 {
    height: calc(100% - 195px);
}
.intTypePhoneSmartDial .intFrameAutoDialPhonePart {
    height: calc(100% - 35px);
    margin-top: 10px;
}
.intTypePhoneSmartDial .autoDialWindowContainer {
    height: calc(100% - 35px);
}
.intTypePhoneSmartDial .autoDialDetailScrollWrapper {
    height: calc(100% - 10px);
}

/* The predictive-specific 'waiting for customer' message */
.intFrameAutoDialPhonePart .autoDialWaitingMessage {
    margin: 15px 0;
    font-style: italic;    
}
/* (next-attempt block shorter for SmartDial interactions) */
.intTypePhoneSmartDial .nextAttemptBlock {
    height: 135px;
}

/* (Remainder autoDialWindowContainer formatting in SDPreviewFrameControl, as same for both) */
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== platform/plugin/Plantronics.css ==============================*/

.plantronicsLogoConnected {
    display: inline-block;
}
.scThemeLight .plantronicsLogoConnected {
    width: 92px;
    height: 20px;
    background-repeat: no-repeat; 
    background-image: url("../images/plugins/poly-light.png");
}
.scThemeDark .plantronicsLogoConnected {
    width: 92px;
    height: 20px;
    background-repeat: no-repeat; 
    background-image: url("../images/plugins/poly-dark.png");
}/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/preview/PreviewFrameControl.css ==================*/


/***** Styling for the Preview Next Attempt block displayed in the WorkCodes section *****/

.nextAttemptBlock {
    height: 180px;
}
.nextAttemptHeader {
    margin-top: 10px;
    margin-bottom: 10px;    
    text-align: left;
    font-size: 15px;
    padding: 2px 5px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
}
.nextDisabled .nextAttemptHeader {
    background-color: #A9A9A9;
}
.nextAttemptBody {
    position: relative;
}

.nextAttemptSelector {
    margin-left: 5px;
    width: 16px;
    height: 16px;    
    background-size: contain;
    background-repeat: no-repeat;    
    background-image: url("../images/common/checkbox-unchecked-icon-v2.png");        
    opacity: 0.5;
}
.nextAttemptSelector.selected {
    background-image: url("../images/common/checkbox-checked-icon-v2.png");        
    opacity: unset;
}

.nextAttemptOptions {
    position: absolute;
    top: -1px;
    left: 25px;
}
.nextDisabled .nextAttemptOptions, 
.nextAttemptOptions.disabled {
    color: #A9A9A9;
}
.nextAttemptOption {
    margin-bottom: 5px;
}
.nextAttemptOption {
    margin-bottom: 3px;
    line-height: 20px;
}
.nextAttemptOption.unselected, 
.nextAttemptOptions.disabled .nextAttemptOption  {
    color: #A9A9A9;
}
.nextAttemptOption .nextAttemptDefaultMins {
    font-weight: bold;
}
.nextAttemptOption .nextAttemptDateTimeZone {
    margin-left: 25px;
}
.nextAttemptOption .nextAttemptDateTimeLbl {
    margin-left: 25px;
}

.nextAttemptOption input[type="number"] {
    width: 45px;
}
.nextAttemptOption input[type="date"] {
    margin-bottom: 4px;
    margin-left: 5px;
    font-family: 'Open Sans', sans-serif;
}
.nextAttemptOption input[type="time"] {
    margin-left: 5px;
    font-family: 'Open Sans', sans-serif;
}

.nextAttemptOption.unselected input[type="number"], 
.nextAttemptOptions.disabled .nextAttemptOption input[type="number"],
.nextAttemptOptions.disabled .nextAttemptOption input[type="date"],
.nextAttemptOptions.disabled .nextAttemptOption input[type="time"] {
    color: #A9A9A9;    
}

.nextAttemptUnavailableMsg {
    text-align: center;
    font-style: italic;
}

/**********   Section 4 - Custom for Preview Interactions  **********/

.intTypePreviewDial .intFrameSection4 {
    height: calc(100% - 160px);
}
.intFramePreviewPart {
    height: 100%;
}

/* Overall Preview Window sizing / Style */
.previewWindowContainer {
    height: 100%;
    padding: 10px 5px 0px;
    text-align: center;    
    height: calc(100% - 85px);
}

/***** Progressive Dial Area *****/

.progressiveArea {
    background-color: var(--accent-color-lighttheme-soft);
    padding: 5px 0;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
}
.progressiveCountdownMsg, .progressiveCancelBtn {
    display: inline-block;
}
.progressiveCountdownSecs {
    margin-left: 5px;
}
.progressiveCancelBtn {
    margin: 5px 0px 3px 10px;
    vertical-align: bottom;
    
    cursor: pointer;
    height: 14px;
    width: 14px;
    background-image: url("../images/common/cancel-btn-light-v2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--accent-color-lighttheme-heavy);
}

/***** Attempt info Area *****/

.attemptInfoArea {
    background-color: var(--accent-color-lighttheme-soft);
    padding: 5px;    
    font-size: 14px;
    text-align: center;
}
.attemptInfoArea .attemptFirst, .attemptInfoArea .attemptCurrent {
    font-weight: bold;
    padding-bottom: 3px;
}
.attemptInfoArea .attemptPrevious {
    font-size: 13px;
    border-top: 1px solid var(--accent-color-lighttheme-heavy);    
}
.attemptInfoArea .attemptPreviousLine1, .attemptInfoArea .attemptPreviousLine2 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    
}
.attemptInfoArea .attemptPreviousLine1 {
    text-align: left;
}

/***** Preview Detail Area *****/

.previewDetailScrollWrapper {
    height: calc(100% - 20px);
}
.previewDetailNoInfoMessage {
    margin: 15px 0;
    font-style: italic;
}

/* Individual Preview fields */
.previewDetailFields {
    margin-top: 10px;
    text-align: left;
}
.previewDetailField, .previewDetailLink, .previewDetailButton {
    margin-bottom: 10px;
}
.previewDetailFieldLabel {
    font-weight: bold;
    width: 100%;
}
.previewDetailFieldValue {
    margin-left: 15px;
    max-width: calc(100% - 15px);
    display: inline-block;
    overflow-wrap: break-word;    
}
.previewDetailFieldValue.previewNoValue {
    color: silver;
}

/* Field highlighting */
.previewDetailField.highlight .previewDetailFieldLabel,
.previewDetailLink.highlight .previewDetailFieldLabel {
    color: var(--is-color-notify);
}
.previewDetailField.highlight .previewDetailFieldValue {
    color: var(--is-color-notify);
    font-weight: bold;
}

/* Phone Fields click-to-call button */
.previewFieldClickToCallBtn {
    display: inline-block;
    margin-left: 5px;
    vertical-align: bottom;
    
    cursor: pointer;
    height: 20px;
    width: 20px;
    background-image: url("../images/common/dir-clicktocall-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    opacity: 0.3;   /* faded, not in your face */
    z-index: 2;    
}
.previewFieldClickToCallBtn:hover {
    opacity: 1.0;
}
.previewFieldClickToCallBtn.callFailed {
    background-image: url("../images/common/dir-clicktocall-fail-btn.png");
}

/* Preview Button Fields */
.previewDetailButton {
    text-align: center;
}
.previewDetailButton .previewDetailButtonCtrl {
    display: inline-block;
    background-color: var(--tool-action-btn-color);
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 3px;
    padding: 4px 10px;    
    cursor: pointer;
}

/* Preview Link Fields */
.previewDetailLink .previewDetailLinkCtrl {
    margin-left: 15px;
    max-width: calc(100% - 15px);
    display: inline-block;
    text-decoration: underline;
    color: darkblue;
    cursor: pointer;
    overflow-wrap: break-word;    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/QuickToolControl.css ==============================*/

/* Style overrides just for the QuickTool (thats just a tool handle - no frame)) */

/* The special QuickTool Handle Icon 
  (all other tool handle icons are spceified in their own CSS file) */
.quickTool .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-quicktool-v2.png");
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/realtimestats/RealtimeStatsToolControl.css ==============================*/


/***** Stats Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_RealtimeStats .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-stats-v2.png");
}

/***** Stats Tool Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#statstool_body {
    position: relative;
    margin-top: 5px;
    height: 94%;
}
#statstool_body .statsScrollWrapper {
    height: calc(100% - 170px);
}
#statstool_body .statsQueueEntriesBlock {
    padding-top: 10px;
}

/* Stats Heading bars */
#stats_queue_summary_hdr, #stats_queue_breakdown_hdr_title {
    font-size: 15px;
    padding: 3px 5px;
    margin-top: 4px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
    text-align: center;
}

/* Stats Queue Summary Block */
#stats_queue_summary_info {
    position: relative;
    font-size: 16px;    
    height: 35px;
    margin-top: 10px;
}
#stats_queue_summary_info span {
    position: absolute;
}
#stats_tot_inqueue, #stats_tot_oldest {
    font-weight: bold;
}
#stats_tot_inqueue_label {
    left: 20px;
}
#stats_tot_inqueue {
    left: 97px;
}
#stats_tot_oldest_label {
    left: 140px;
}
#stats_tot_oldest {
    left: 200px;
}

/* Stats Queues Column headings */
#stats_queue_breakdown_hdr_cols {
    position: relative;
    background-color: var(--accent-color-lighttheme-soft);
    font-size: 15px;
    height: 22px;
    padding: 2px 0;    
}
.statsQueueItemsInQueue, .statsQueueOldestSecs, .statsQueueStaffedCnt {
    position: absolute;    
    font-weight: bold;
}
.statsQueueItemsInQueue {
    right: 165px;
}
.statsQueueOldestSecs {
    right: 85px;
}
.statsQueueEntryBlock .statsQueueOldestSecs {
    font-weight: normal;
} 
.statsQueueStaffedCnt {
    right: 15px;
}

/* Each Queue Stats Entry */
.statsQueueEntryBlock {
    position: relative;
    padding: 2px 0 2px 0px;
    margin-bottom: 1px;
    font-size: 15px;
    height: 45px;
}
.statsQueueEntryBlock:hover {
    background-color: var(--list-entry-hover-color);
}

.statsQueueName {
    margin-left: 40px;
    font-size: 14px;    
}
.statsQueueType {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    left: 4px;
    background-size: contain;
    opacity: 0.8;
    
}
.statsQueueType.AMAZON_ANY {
    background-image: url("../images/interaction/channeltypes/channel-amazonany-icon.png");    
}
.statsQueueType.VOICE {
    background-image: url("../images/interaction/channeltypes/channel-phone-icon.png");    
}
.statsQueueType.WEBCHAT {
    background-image: url("../images/interaction/channeltypes/channel-webchat-icon.png");    
}
.statsQueueType.SMS,
.statsQueueType.SMS_PINPOINT,
.statsQueueType.SMS_WEBHOOK {
    background-image: url("../images/interaction/channeltypes/channel-smschat-icon.png");    
}
.statsQueueType.EMAIL, .statsQueueType.ROUTED_EMAIL {
    background-image: url("../images/interaction/channeltypes/channel-email-icon.png");    
}
.statsQueueType.PREVIEW_DIAL {
    background-image: url("../images/interaction/channeltypes/channel-preview-icon.png");    
}
.statsQueueType.GENERIC_TASK {
    background-image: url("../images/interaction/channeltypes/channel-task-icon.png");    
}
.statsQueueType.SOCIAL_LINE {
    background-image: url("../images/interaction/channeltypes/channel-linechat-icon.png");    
}
.statsQueueType.SOCIAL_WHATSAPP {
    background-image: url("../images/interaction/channeltypes/channel-wtsappchat-icon.png");    
}
.statsQueueType.SOCIAL_FBMESSENGER {
    background-image: url("../images/interaction/channeltypes/channel-fbmchat-icon.png");    
}
.statsQueueType.SOCIAL_TWITTERDM {
    background-image: url("../images/interaction/channeltypes/channel-twdmchat-icon.png");    
}
.statsQueueType.SOCIAL_OTHER {
    background-image: url("../images/interaction/channeltypes/channel-socialotherchat-icon.png");    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/preview/SDPreviewFrameControl.css ==================*/

/* ( See also PreviewFrameControl.css for common preview formatting) */

/* (next-attempt block shorter for SmartDial interactions) */
.intTypeSDPreviewDial .nextAttemptBlock {
    height: 135px;
}

/**********   Section 4 - Specific for Smartdial Preview Interactions  **********/

.intTypeSDPreviewDial .intFrameSection4 {
    height: calc(100% - 160px);
}

/* Overall Preview Window sizing / Style */
.autoDialWindowContainer {
    padding: 10px 5px 0px;
    text-align: center;    
    height: calc(100% - 85px);
}

/***** AutoDial Detail Area (Common to SmartDial Phone Frame also) *****/

.autoDialDetailScrollWrapper {
    height: calc(100% - 20px);
}

/* Individual Auto-Dial fields */
.autoDialDetailFields {
    margin-top: 10px;
    text-align: left;
}
.autoDialDetailField, .autoDialDetailLink, .autoDialDetailButton {
    margin-bottom: 10px;
}
.autoDialDetailFieldLabel {
    font-weight: bold;
    width: 100%;
}
.autoDialDetailFieldValue {
    margin-left: 15px;
    max-width: calc(100% - 15px);
    display: inline-block;
    overflow-wrap: break-word;    
}
.autoDialDetailFieldValue.autoDialNoValue {
    color: silver;
}

/* Field highlighting */
.autoDialDetailField.highlight .autoDialDetailFieldLabel,
.autoDialDetailLink.highlight .autoDialDetailFieldLabel {
    color: red;
}
.autoDialDetailField.highlight .autoDialDetailFieldValue {
    color: red;
    font-weight: bold;
}

/* Phone Fields click-to-call button */
.autoDialFieldClickToCallBtn {
    display: inline-block;
    margin-left: 5px;
    vertical-align: bottom;
    
    cursor: pointer;
    height: 20px;
    width: 20px;
    background-image: url("../images/common/dir-clicktocall-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    opacity: 0.3;   /* faded, not in your face */
    z-index: 2;    
}
.autoDialFieldClickToCallBtn:hover {
    opacity: 1.0;
}
.autoDialFieldClickToCallBtn.callFailed {
    background-image: url("../images/common/dir-clicktocall-fail-btn.png");
}

/* Preview Button Fields */
.autoDialDetailButton {
    text-align: center;
}
.autoDialDetailButton .autoDialDetailButtonCtrl {
    display: inline-block;
    background-color: var(--tool-action-btn-color);
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 3px;
    padding: 4px 10px;    
    cursor: pointer;
}

/* Preview Link Fields */
.autoDialDetailLink .autoDialDetailLinkCtrl {
    margin-left: 15px;
    max-width: calc(100% - 15px);
    display: inline-block;
    text-decoration: underline;
    color: darkblue;
    cursor: pointer;
    overflow-wrap: break-word;    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/settings/SettingsToolControl.css ==============================*/


/***** Settings Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_Settings .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-settings-v2.png");
}

/***** Settings Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

/* Save and Cancel buttons */
#settingstool_savecancel_buttons {
    text-align: center;
    margin-top: 10px;
    min-height: 65px;
}
#settingstool_cancel_btn, #settingstool_save_btn {
    margin: 0 15px 10px;
    width: 45px;
}

#settingstool_body {
    height: calc(100% - 105px);
}
#settingstool_body .settingsScrollWrapper {
    height: 100%;
}

/* Setting group's and group headers */
.settingGroup {
    margin-bottom: 1px;
}
.settingGroupHeader {
    position: relative;
    text-align: left;
    font-size: 15px;
    padding: 2px 5px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
    cursor: pointer;
}
.settingGroupHeader .settingGroupExpander {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 16px;
    height: 12px;    
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../images/common/triangle-expand-btn.png");        
}
.settingGroupHeader .settingGroupExpander.settingGroupExpanded {
    background-image: url("../images/common/triangle-reduce-btn.png");        
}
.settingGroupItems {
    padding-top: 5px;
}

/* Individual Setting fields */
.settingFieldBlock {
    margin-left: 10px;
    margin-top: 5px;
    font-size: 13px;
    width: calc(100% - 10px);
}
.settingFieldLabel {
}
.settingFieldValueBlock {
    margin: 5px 0 8px 15px;
}
.settingFieldValueBlock input[type=text] {
    width: 85%;
}
.settingFieldValueBlock textarea {
    width: 85%;
    font-family: unset;
    white-space: nowrap;
}
.settingFieldValueBlock select {
    width: 90%;
}

/* Support Tools custimized section */

#support_custom_block {
    text-align: center;    
    margin-top: 5px;
}
#support_custom_block .supportBtn {
    margin: 7px 3px 0;
    padding: 4px 7px;    
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/autodialer/SmartDialToolControl.css ==============================*/


/***** SmartDial Status Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_SmartDial .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-smartdial-v2.png");
}

/***** SmartDial Status Content Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#smartdialtool_body {
    position: relative;
    margin-top: 5px;
    height: 94%;
}
#smartdialtool_status_header, #smartdialtool_messages_header {
    text-align: center;
    font-size: 15px;
    margin-top: 4px;
    padding: 2px 5px;
    background-color: var(--tool-group-heading-color);
    color: var(--tool-heading-text-color);  
}

/* Status area */
#smartdialtool_status_body {
    margin: 0px 5px 10px;    
}
.smartdialStatusLabel {
    display: inline-block;
    width: 80px;
    font-weight: bold;
    margin-top: 5px;
}
.smartdialStatusValue {
    display: inline-block;    
    width: 170px;
}
.smartdialStatusFullLabel {
    margin-top: 5px;
    font-weight: bold;
}
.smartdialStatusFullValue {
    margin-left: 10px;    
}

/* Recent Messages formatting */
#smartdialtool_body .smartdialMsgsScrollWrapper {
    height: calc(100% - 200px);
}
.smartdialMsgsBlock {
    padding-top: 5px;
}
.smartdialRecentMsg {
    padding-top: 5px;
    padding: 2px 0 2px 5px;
}
.smartdialRecentMsg:hover {
    background-color: var(--list-entry-hover-color);
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/supervisor/SupervisorControl.css ==============================*/

/* Style for the overall Supervisor Control (in normal and "slim" mode) */

#supervisor_block {
    display: flex;
    height: calc(100% - 5px);
}
#supervisor_panel {
    width: 100%;
}
#supervisor_body_container {
    display: flex;
    height: 100%;
}
#supervisor_body {
    width: 100%;
}
 
/* Tab Handles */
#supervisor_tab_handles {
    display: flex;
    margin-left: 10px;   
    min-width: 800px;
}
.slim #supervisor_tab_handles {
    justify-content: center;
    margin: 0;
    min-width: unset;
}
.supervisorTabHandle {
    width: 150px;
    padding: 7px 10px;
    margin-right: 7px;
    cursor: pointer;    
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 0;
    font-size: 16px;
    
    background-color: var(--tab-bg-unfocused-color);
    color: var(--text-color-ondarkbg);
}
.supervisorTabHandle.tabInFocus {
    background-color: var(--tab-bg-focused-color);
    color: var(--text-color-onlightbg);   
}
.slim .supervisorTabHandle {
    width: 90px;
    margin: 0 10px;
    border-radius: 3px;
    border-bottom: 1px solid #C0C0C0;
    text-align: center;
    font-size: 15px;
    padding: 4px;
}
.slim .supervisorTabHandle.tabInFocus {
    font-weight: bold;
}

/* Tab Content pane common styling */
#supervisor_tabs_content {
    height: calc(100% - 75px);
    margin: 0 10px;
    padding: 15px;  
    padding-bottom: 10px;
    background-color: #FFF;
    border-radius: 0 3px 3px 3px;
}
.slim #supervisor_tabs_content {
    height: calc(100% - 35px);
    border: 0;
    padding: 4px 5px 0;
    margin: 0;
    background-color: var(--bg-tool-panel-color);
}
.supervisorTabContent {
    height: 100%;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/supervisor/SupervisorTableControls.css ==============================*/

/* Progress / Status bar */
.supervisorViewStatusBar {
    position: relative;
    height: 40px;
    font-size: 15px;
    text-align: center;
}
.slim .supervisorViewStatusBar {
    height: 22px;
    margin: 5px;
    font-size: 14px;
}
.supervisorViewRefreshBtn, .supervisorViewPauseBtn {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-size: contain;
}
.supervisorViewRefreshBtn {
    right: 0;
    background-image: url(../images/common/refresh-btn-v2.png);
    opacity: .8;
}
.slim .supervisorViewRefreshBtn {
    height: 20px;
    width: 20px;
}
.paused .supervisorViewRefreshBtn {
    opacity: .3;
}
.supervisorViewPauseBtn {
    right: 32px;
    background-image: url(../images/common/pause-btn-v2.png);
    opacity: .2;
}
.slim .supervisorViewPauseBtn {
    right: 22px;
    height: 20px;
    width: 20px;
}
.paused .supervisorViewPauseBtn {
    opacity: .8;
}

/*** DataTable assist ***/

/* Search Bar contains the Search Filter and the info string displaying how many rows shown) */
.supervisorTabContent .searchBar {
    height: 35px;
}
.supervisorTabContent .searchBar .dataTables_filter {
    float: left;
    margin-left: 5px;
}
.supervisorTabContent .searchBar .dataTables_info {
    float: right;
    clear: unset;
    margin-right: 20px;
    padding-top: 6px;
    font-style: italic;
}
.supervisorTabContent .searchBar input {
    width: 280px;
}

.supervisorStatsTable thead {
    background-color: var(--table-hdr-bg-color);
    color: #FFF;
}
.supervisorStatsTable th {
    border-color: lightgray;
}

/* DataTable Scroll areas/contol */
.supervisorTabContent .dataTables_wrapper {
    height: calc(100% - 65px);
}
.slim .supervisorTabContent .dataTables_wrapper {
    height: calc(100% - 30px);
}
.supervisorTabContent .dataTables_scroll {
    height: calc(100% - 35px);
}
.slim .supervisorTabContent .dataTables_scroll {
    height: 100%;
}
/* (and make sure we dont get a Horizontal srollbar in table when vertical scrollbar present) */
.supervisorTabContent .dataTables_scrollBody {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* supervisor table cell data values thet get truncated */
.supColTxtTrunc {
    overflow:hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;    
}


/*************  Specific to the Agents Table  *************/

/* Hide additional filters section in slim mode */
.slim #supervisor_agents_filter_expander, .slim #supervisor_agents_filter_block {
    display: none;
}

/* Style Agent Filters Controls block */
#supervisor_agents_filter_expander {
    font-weight: bold;
    padding-left: 20px;
    margin-bottom: 10px;
    cursor: pointer;    
    background-image: url(../images/common/triangle-expand-btn.png);
    background-repeat: no-repeat;
    background-position: 0 3px;
}
#supervisor_agents_filter_expander.expanded {
    background-image: url("../images/common/triangle-reduce-btn.png");
}
#supervisor_agents_filter_expander.filtersActive {
    color: blue;
}

#supervisor_agents_filter_block {
    position: relative;
    height: 85px;
    font-size: 13px;
}
#sup_agents_user_filters {
    position: absolute;
    left: 20px;
}
#sup_agents_task_filters {
    position: absolute;
    right: 15px;
}

#supervisor_agents_filter_block label {
    display: inline-block;
    margin: 3px 5px 3px 0;
    width: 128px;
    margin-top: 3px
}
#sup_agents_task_filters label {
    text-align: right;    
    width: 180px;
}

#supervisor_agents_filter_block select {
    padding: 1px 4px;
    margin-bottom: 3px;
    font-size: 13px;    
    min-width: 120px;
    max-width: 230px;
}

#supervisor_agents_filter_block input[type="checkbox"] {
    vertical-align: text-top;
    margin-bottom: 6px;
}

/* Agent Table User-Id column */
.supColUserIdTxt {
    width: 200px;
}
.slim .supColUserIdTxt {
    width: 100px;
}

/* Agent Table Work-State column */
.supColWorkState  {
    text-align: center;
}
.slim .supColWorkStateTxt  {
    width: 50px;
}
.supColWorkState.offline, .supervisorStateChgOption.offline {
    background-color: var(--ws-color-offline);
    color: black;
}
.supColWorkState.available, .supervisorStateChgOption.available {
    background-color: var(--ws-color-avail);
    color: white;
}
.supColWorkState.occupied {
    background-color: var(--ws-color-occupied);
    color: white;
}
.supColWorkState.occupied.pending {
    background-image: linear-gradient(to right, var(--ws-color-occupied), var(--ws-color-unavail));
}
.supColWorkState.inWrap {
    background-color: var(--ws-color-wrap);
    color: white;
}
.supColWorkState.inWrap.pending {
    background-image: linear-gradient(to right, var(--ws-color-wrap), var(--ws-color-unavail));
}
.supColWorkState.unavailable, .supervisorStateChgOption.unavailable {
    background-color: var(--ws-color-unavail);
    color: white;
}
/* add style to indicate clickable if work-state is changeable */
.supColWorkState .changeable {
    padding-right: 18px;
    background-image: url("../images/common/triangle-dropdown-btn.png");  /* (inbound) */
    background-repeat: no-repeat;
    background-position: right;
    background-size: 12px;    
    cursor: pointer;
}
/* style the supervisor little change work-state selector dialog */
.supStateChangeDialog .ui-dialog-titlebar {
    display: none;
}
.supStateChangeDialog .ui-dialog-content {
    padding: 5px;
}
#supervisor_chgworkstate_statelist {
    text-align: center;
}
#supervisor_chgworkstate_statelist .supervisorStateChgOption {
    margin: 2px 0;
    padding: 0 10px;
    cursor: pointer;    
}
#supervisor_chgworkstate_statelist .supervisorStateChgOption:hover {
    font-weight: bold;
}

/* Agent Table Time-in-State column */
.supColTimeInState {
    text-align: center;
    width: 60px;
}
.slim .supColTimeInState {
    width: 50px;
}

/***  Agent Table Active Tasks column ***/

.supColActiveTasks {
    padding: 1px 2px 1px 5px !important;
    white-space: normal !important;
}
.agentTaskPill {
    display: inline-block;
    height: 22px;
    background-color: lightgrey;
    margin: 2px 5px 2px 0;
    border: 1px solid darkgray;    
    white-space: nowrap;
}
.agentTaskPill.stateACTIVE, .agentTaskPill.statePARKED {
    background-color: var(--ws-color-occupied);
    color: white;
}
.agentTaskPill.stateWRAP {
    background-color: var(--ws-color-wrap);
    color: white;
}
.agentTaskPill .atpDirection {
    display: inline-block;
    width: 16px;
    height: 100%;
    background-color: #6D6E71;  /* dark gray */
    background-image: url("../images/common/direction-arrow-icon.png");  /* (inbound) */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    z-index: 2;
}
.agentTaskPill .atpDirection.OUTBOUND {
    transform: rotate(180deg);  /* (outbound) */
}
.agentTaskPill .atpTypeLabel {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    padding: 2px 3px 0;
}
.agentTaskPill .atpFarEnd {
    display: none;
    height: 100%;
    vertical-align: top;
    padding: 2px 3px 0;
    max-width: 120px;
    overflow: hidden;
}
.showTaskFarEnd .agentTaskPill .atpFarEnd {
    display: inline-block;
}
.agentTaskPill .supervisorLaunchCallMonitorBtn {
    display: inline-block;
    width: 20px;
    height: 100%;
    margin: 0 2px;
    cursor: pointer;

    background-image: url("../images/common/supervisor-monitor-white-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    z-index: 2;
}

.slim .supervisorLaunchCallMonitorBtn {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 1px;
    cursor: pointer;

    background-image: url("../images/common/supervisor-monitor-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    z-index: 2;
    
    vertical-align: middle;
    margin: 1px;
}

/* Agent Table Actions column */
.supColActions {
    width: 85px;
}
.slim .supColActions {
    width: 50px;
}

.supervisorLaunchIMsgBtn {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    margin: 0 3px;
    cursor: pointer;

    background-image: url("../images/common/dir-clicktochat-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    z-index: 2;
    opacity: 0.8;
}
.slim .supervisorLaunchIMsgBtn {
    height: 15px;
    width: 15px;
    margin: 1px;
}

.supervisorForceLogOffBtn {
    display: inline-block;
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 1px 7px;
    cursor: pointer;    
}
.supervisorForceLogOffBtn:hover {
    background-color: gray;
    color: white;
}


/*************  Specific to the Queues Table  *************/

/* Hide additional filters section in slim mode */
.slim #supervisor_queues_filter_expander, .slim #supervisor_queues_filter_block {
    display: none;
}

/* Style Queue Filters Controls block */
#supervisor_queues_filter_expander {
    font-weight: bold;
    padding-left: 20px;
    margin-bottom: 10px;
    cursor: pointer;    
    background-image: url(../images/common/triangle-expand-btn.png);
    background-repeat: no-repeat;
    background-position: 0 3px;
}
#supervisor_queues_filter_expander.expanded {
    background-image: url("../images/common/triangle-reduce-btn.png");
}
#supervisor_queues_filter_expander.filtersActive {
    color: blue;
}

#supervisor_queues_filter_block {
    position: relative;
    height: 50px;
    font-size: 13px;
}
#sup_queues_filters {
    position: absolute;
    left: 20px;
}

#supervisor_queues_filter_block label {
    display: inline-block;
    margin-right: 5px;
}

#supervisor_queues_filter_block select {
    padding: 1px 4px;
    margin-bottom: 3px;
    font-size: 13px;    
    min-width: 120px;
    max-width: 230px;
}

/* Formatting for Slim view (when embedded in agent UI) */
.slim .supColQueueInfo {
    position: relative;
    text-align: left;
    min-width: 190px;
}
.slimQueueName {
    position: relative;
    top: -10px;
    width: 175px;
}
th .slimQueueName {
    top: 0px;
}
.slimQInQueue {
    position: absolute;
    right: 120px;
    bottom: 2px;
}
td .slimQInQueue {
    right: 130px;
}
.slimQOldest {
    position: absolute;
    right: 70px;
    bottom: 2px;
}
td .slimQOldest {
    right: 65px;
}
.slimQStaffed {
    position: absolute;
    right: 20px;
    bottom: 2px;
}
th .slimQInQueue, th .slimQOldest, th .slimQStaffed {
    bottom: 4px;
}

/* Formatting for Full view (when in Popout window) */
.supColQueueNameTxt {
    /* width: 200px; */
    white-space: normal;
}
.supColQueueStat, .supColAgentStat {
    text-align: center;
}
th.supColQueueStat {
    background-color: #65727B;
}
td.supColQueueStat {
    background-color: #EEEEEE;
}

.slim .supColQueueType {
    min-width: 40px;
    padding-right: 0 !important;    
}
.supervisorQueueTypeIcon {
    width: 30px;
    height: 30px;
    background-size: contain;
    opacity: 0.8;    
}
.slim .supervisorQueueTypeIcon {
    width: 30px;
    height: 30px;
}
.supervisorQueueTypeIcon.AMAZON_ANY {
    background-image: url("../images/interaction/channeltypes/channel-amazonany-icon.png");    
}
.supervisorQueueTypeIcon.VOICE {
    background-image: url("../images/interaction/channeltypes/channel-phone-icon.png");    
}
.supervisorQueueTypeIcon.WEBCHAT {
    background-image: url("../images/interaction/channeltypes/channel-webchat-icon.png");
}
.supervisorQueueTypeIcon.SMS, 
.supervisorQueueTypeIcon.SMS_PINPOINT,
.supervisorQueueTypeIcon.SMS_WEBHOOK {
    background-image: url("../images/interaction/channeltypes/channel-smschat-icon.png");    
}
.supervisorQueueTypeIcon.EMAIL, 
.supervisorQueueTypeIcon.ROUTED_EMAIL {
    background-image: url("../images/interaction/channeltypes/channel-email-icon.png");    
}
.supervisorQueueTypeIcon.PREVIEW_DIAL {
    background-image: url("../images/interaction/channeltypes/channel-preview-icon.png");    
}
.supervisorQueueTypeIcon.GENERIC_TASK {
    background-image: url("../images/interaction/channeltypes/channel-task-icon.png");    
}
.supervisorQueueTypeIcon.SOCIAL_LINE {
    background-image: url("../images/interaction/channeltypes/channel-linechat-icon.png");    
}
.supervisorQueueTypeIcon.SOCIAL_WHATSAPP {
    background-image: url("../images/interaction/channeltypes/channel-wtsappchat-icon.png");    
}
.supervisorQueueTypeIcon.SOCIAL_FBMESSENGER {
    background-image: url("../images/interaction/channeltypes/channel-fbmchat-icon.png");    
}
.supervisorQueueTypeIcon.SOCIAL_TWITTERDM {
    background-image: url("../images/interaction/channeltypes/channel-twdmchat-icon.png");    
}
.supervisorQueueTypeIcon.SOCIAL_OTHER {
    background-image: url("../images/interaction/channeltypes/channel-socialotherchat-icon.png");    
}

#supervisor_queues_table .queueStateOpen {
    color: green;
}
#supervisor_queues_table .queueStateClosed {
    color: red;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/supervisor/SupervisorToolControl.css ==============================*/

/***** Supervisor Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_Supervisor .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-supervisor-v2.png");
}

/***** Supervisor Tool Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#supervisortool_action_buttons {
    text-align: center;
    margin: 10px 0;
}
#supervisor_popout_btn {
    display: none;
}
.supPopoutAllowed #supervisor_popout_btn {
    display: inline-block;
}

#supervisortool_body {
    position: relative;
    height: calc(100% - 60px);
}
.supPopoutAllowed #supervisortool_body {
    height: calc(100% - 90px);    
}

/* Adjust default height of outer supervisor control slightly when running in a tool */
.toolFrameArea #supervisor_block {
    height: 100%;
} /* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/supervisor/SupervisorWindow.css ==============================*/

/* Style for the Supervisor Popout Window */
#supervisor_view_port {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-gradient-popouts);    
}
#supervisor_popout_logo {
    height: 50px;
    margin: 10px;
    background-image: url("../images/sc-logo-supervisor-popout3.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: contain;
}
#supervisor_popout_body_area {
    position: absolute;
    top: 70px;
    bottom: 0;
    width: 100%;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/taskhistory/TaskHistoryToolControl.css ==============================*/


/***** Task History Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_TaskHistory .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-history-v2.png");
}

/***** Task History Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#taskhistorytool_body {
    position: relative;
    margin-top: 5px;
    height: 94%;
}
#taskhistorytool_body .taskHistoryScrollWrapper {
    height: calc(100% - 32px);
}
#taskhistorytool_body .taskHistoryEntriesBlock {
    padding-top: 10px;
}

/* The "Show More" block */
#taskhistorytool_body .fetchMoreBlock {
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    font-size: 16px;
}

/* Each History Entry Entry */
.taskHistoryEntryBlock {
    position: relative;
    padding: 2px 0 2px 10px;
    margin-bottom: 5px;
}
.taskHistoryEntryBlock:hover {
    background-color: var(--list-entry-hover-color);
}

.taskHistoryEntryBlock .historyEntryTime {
    font-size: 13px;
}
.taskHistoryEntryBlock .historyEntryTimeStamp {
    font-weight: bold;
}
.taskHistoryEntryBlock .historyEntryDuration {
    font-style: italic;
}

.taskHistoryEntryBlock .historyEntryInfo {
    margin-left: 14px;
}
.taskHistoryEntryBlock .historyEntryType {
    display: inline-block;
    width: 75px;
}
.taskHistoryEntryBlock .historyEntryAddress {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
}
.taskHistoryEntryBlock .historyMoreInfo {
    padding-left: 14px;
    font-size: 12px;
    margin: 3px 0;
    display: none;
}
.taskHistoryEntryBlock.expanded .historyMoreInfo {
    display: block;
}
.taskHistoryEntryBlock .historyMoreInfoLabel {
    font-weight: bold;
}

.taskHistoryEntryBlock .historyEntryExpanderBtn {
    position: absolute;
    left: 9px;
    top: 23px;
    width: 14px;
    height: 12px;    
    cursor: pointer;
    background-image: url("../images/common/triangle-expand-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
}
.taskHistoryEntryBlock.expanded .historyEntryExpanderBtn {
    background-image: url("../images/common/triangle-reduce-btn.png");
}

.taskHistoryEntryBlock .historyEntryRespondBackBtn {
    position: absolute;
    right: 9px;
    top: 2px;
    height: 20px;
    width: 20px;
    margin: 3px;
    cursor: pointer;

    background-image: url("../images/common/dir-clicktocall-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    opacity: 0.3;   /* faded, not in your face */
    z-index: 2;
}

.historyEntryRespondBackBtn:hover {
    opacity: 1.0;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/ToolControlCommon.css ==============================*/

/* Common Styles shared by multiple tool controls */
.toolFrame .toolProgressMsg {
    height: 20px;
    margin-top: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--accent-color-lighttheme-soft);    
    text-align: center;
    font-size: 15px;
    font-style: italic;
}
.toolFrame .toolRefreshBtn {
    position: absolute;
    top: -3px;
    right: 8px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-image: url("../images/common/refresh-btn-v2.png");
    background-size: contain;
    opacity: .8;    
}
.toolFrame .toolSearchBlock {
    padding: 0 5px;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/ToolsBarControl.css ==============================*/

/* Overall layout for Tools Handles and Tools Frames containers */

/***** Tool Handle Style *****/
/* (Tool Handle style now simplified - now just an icon) */ 

/* Overall Handle sizing and style */
.toolHandle {
    position: relative;
    width: 36px;
    height: 28px;    
    cursor: pointer;
    background-color: var(--tool-handle-color);
}
.toolHandle:hover {
    background-color: var(--tool-handle-active-color);
    opacity: 0.6;
}
/* Overriding style for tool handle in active state */
.toolHandle.toolActive {
    background-color: var(--tool-handle-active-color);
}
.toolHandle.toolActive:hover {
    opacity: 1.0;
}

/* The Tool Handle Icon */
.toolHandleIcon {
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/*****  Tools Frame Generic Style  *****/

/* Make sure we take up the complete extent of our container (the tool_frames_panel) */
#tool_frames_block {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* The general tool frame around the tool details */
.toolFrame {
    background-color: var(--bg-tool-panel-color);    
    border-radius: 8px;
    padding: 0;
    margin-right: 7px;
    height: calc(100% - 5px);
}

/* Outer container of each individual tool (inside the drawn frame) */
.toolFrameArea {   
    height: 100%;
}

/* Tools Header bar style */
.toolHeaderBar {
    position: relative;
    text-align: center;
    font-size: 17px;
    padding: 4px 0;
    background-color: var(--tool-heading-color);
    color: var(--tool-heading-text-color);  
    border-radius: 8px 8px 0 0;
}
/* Tools Header bar close button */
.toolHeaderClose {
    position: absolute;
    top: 6px;
    right: 4px;
}

/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/uccall/UCCallFrameControl.css ==================*/

/**********   Section 4 - Custom for UC Call Interactions **********/

.intFrameSection4 {
}

/*** The Drop Party dialog ***/

.dropUCCallPartyList {
    text-align: center;
    margin-top: 5px;
}
.dropUCCallPartyItem {
    font-weight: bold;
    cursor: pointer;
}
.dropUCCallPartyItem:hover {
    background-color: var(--accent-color-lighttheme-heavy);
    color: #FFFFFF;
    font-weight: bold;
}/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/UserLoginControl.css ==============================*/

/* The logged in user name in the Header */
.userInfoBlock {
    position: relative;
    cursor: pointer;  
    font-weight: normal;
}
/* The Direct Logout buttom in the Header */
.userDirectLogout {
    position: absolute;
    top: -42px;
    right: -1px;
    width: 60px;
    height: 22px;
    /* Always use dark theme color, as its inside the gradient now */    
    color: var(--text-color-darktheme);
}

/*********************************************/

/* The User-Logged-In Info dialog box */
#user_logged_in_dialog.ui-dialog-content {
    padding: 0;
}
#user_logged_in_container {
    position: relative;
    padding-top: 10px; 
    height: 70px;
}
#user_logged_in_icon {
    position: absolute;    
    top: 10px;
    left: 10px;
    height: 50px;
    width: 50px;
    background-image: url("../images/common/user-info-icon-v2.png");
}
#user_logged_in_signout_btn {
    position: absolute;
    bottom: 0;
    right: 5px;
}
.userLoggedInLabel {    
    width: 60px;
    margin-left: 60px;
    text-align: right;
}
.userLoggedInValue {
    width: 140px;
    margin-left: 10px;
}
.userLoggedInLabel, .userLoggedInValue {
    display: inline-block;
}

/*********************************************/

/* The login window */
#user_login_panel {
    margin: 20px auto;
    padding: 20px;    
    background-color: #E6E7E8;
    border-radius: 3px;
    text-align: center;
    max-width: 270px;
}

#user_login_container {
    display: inline-block;
    text-align: left;
}
#user_login_heading {
    color: var(--text-color-lighttheme);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    width: 200px;
}

.loginFieldContainer {
    margin: 5px 0 10px 0;
}
.loginFieldLabel {
    margin-left: 3px;
    margin-bottom: 3px;
    font-size: 16px;
}
.loginInputField {
    width: 195px;
}

#login_buttons {
    text-align: center;
}
#login_submit_btn, #login_cancel_btn {
    width: 38%;    
}
#login_submit_btn {
    margin-left: 3px;
}

#login_notify_msg {
    text-align: center;
    margin: 10px 0;
    min-height: 40px;
    max-width: 200px;
    font-weight: normal;    
}
#login_notify_msg.infoMessage {
    color: var(--text-color-lighttheme);
}
#login_notify_msg.errorMessage {
    color: red;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/UserNotify.css ==============================*/

/* Major Info/Warn/Error message window */
#major_notify_panel {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translate(-50%);    
    width: 250px;
    min-height: 70px;
    padding: 10px;
    z-index: 50;
    text-align: center;    
    border-radius: 3px;
}
#major_notify_panel.scNotifyInfo {
    background-color: var(--notify-info);    
}
#major_notify_panel.scNotifyWarn {
    background-color: var(--notify-warn);    
}
#major_notify_panel.scNotifyError {
    background-color: var(--notify-error);
}

#major_notify_icon {
    width: 30px;
    height: 30px;
    margin-bottom: 12px;    
    background-size: contain;
    background-repeat: no-repeat;
}
.scNotifyInfo #major_notify_icon {
    background-image: url("../images/common/notify-info-icon-v2.png");        
}
.scNotifyWarn #major_notify_icon {
    background-image: url("../images/common/notify-warn-icon-v2.png");        
}
.scNotifyError #major_notify_icon {
    background-image: url("../images/common/notify-error-icon-v2.png");        
}

#major_notify_body {
    text-align: left;
    font-size: 15px;
    margin-bottom: 15px;
    color: var(--text-color-ondarkbg);
}
.scNotifyBtn {
    background-color: #F1F2F2 !important;
    color: var(--text-color-onlightbg) !important;
}
.scNotifyConfirmBtn {
    min-width: 60px;
    margin-left: 20px;
    margin-right: 20px;
}/* Copyright (c) Symbee. All rights reserved. */
/* ============================== UserUI.css ==============================*/

/* declare all our common variables (custom properties) */
:root {
    /* Values used to keep bottom and right of UI pinned to bottom and right edge of frame when 
       the UI is size-adjusted (zoomed). */
    --viewport-layout-bottom-adjusted: 0%;
    --viewport-layout-right-adjusted: 0%;
    
    /* Values used to pin and control the UI width (depending on wther 'width expandable' is set or not)*/
    --viewport-min-width: 350px;
    --viewport-max-width: 800px;
    
    /* Main UI background */
    --bg-color-darktheme: #3B4851;
    --bg-color-lighttheme: #FFFFFF;
    --bg-color-popouts: #E6E7E8;
    --bg-gradient-darktheme: linear-gradient(to bottom, #262B2F, var(--bg-color-darktheme) 110px);
    --bg-gradient-lighttheme: linear-gradient(to bottom, #65727B, var(--bg-color-lighttheme) 110px);
    --bg-gradient-popouts: linear-gradient(to bottom, #65727B, var(--bg-color-popouts) 110px);
    
    /* Panel background color for the 2 main Interation and Tool panels */
    --bg-interaction-panel-color: #F2F2F2;  /* (very light gray) */
    --bg-tool-panel-color: #F2F2F2;         /* (very light gray) */
        
    --input-border-color: #F2F2F2;            /* (very light gray) */
    
    --accent-color-lighttheme-soft: #D1D3D4;  /* (light gray) */
    --accent-color-lighttheme-heavy: #B7B9BD; /* Soft Gray */
    --accent-color-darktheme-soft: #D1D3D4;   /* (light gray) */
    --accent-color-darktheme-heavy: silver;   /* TODO: update to a true color */
    
    /* Text Colors */
    --text-color-onlightbg: #262B2F;          /* Almost Black */
    --text-color-ondarkbg: #FFF;              /* White */
    
    --text-color-lighttheme: #58595B;         /* (dark gray) */
    --text-color-darktheme: #FAFAFA;          /* (very light gray) */   
    
    /* Colors of Action buttons (e.g. OK, Cancel, Save, Connect, etc) */
    --action-btn-color: #1F809F;            /* (occupied blue) */
    --action-btn-disabled-color: #B7B9BD;   /* (light gray) */
    
    /* Colors for tabs (Supervisor tabs, Email Viewer tabs etc)*/
    --tab-bg-unfocused-color: #65727B;
    --tab-bg-focused-color: #FFF;

    /* Colors for Tables (Supervisor, Realtime Stats)*/
    --table-hdr-bg-color: #92989F;
    
    /* List entry coloring */
    --list-entry-hover-color: #E6E7E8;    /* (very light gray)*/

    /* Colors for Tools area */
    --tool-handle-color: #B7B9BD;         /* Soft Gray */
    --tool-handle-active-color: #65727B;  /* Mid Slate */
    --tool-color-active: #F3B92F;         /* Symbee yellow */
    --tool-heading-color: #B7B9BD;        /* Soft Gray */
    --tool-group-heading-color: #B7B9BD;  /* Soft Gray */
    --tool-heading-text-color: #262B2F;   /* Almost Black */
    --tool-action-btn-color: #65727B;     /* Mid Slate */    

    /* Colors specific to the "New Outbound" panel */
    --newout-heading-color: #B7B9BD;      /* Soft Gray */
    --newout-heading-text-color: #262B2F; /* Almost Black */

    /* Colors for Interaction panel header */
    --int-hdr-background-color-darktheme: #262B2F;   /* Almost Black */
    --int-hdr-background-color-lighttheme: #3B4851;  /* Almost Black */
    --int-hdr-addressbar-text-color: #FFFFFF;        /* White */
    --int-hdr-elapsedbar-text-color: #E6E7E8;        /* Soft Gray */    
    
    /* Primary colors for Chats */
    --chat-color-nearend: #1f809f;        /* (occupied blue) */ 
    --chat-color-farend: #EAF5FC;         /* (almost white) */ 
    --chat-color-nearend-hist: #839DAB;   /* (dark gray) */ 
    --chat-color-farend-hist: #D1D3D4;    /* (light gray) */ 
    --chat-promote-color: #457839;        /* (green) */ 
    --chat-promote-color-hist: #88B581;   /* (gray-green) */ 
    
    /* Primary colors for IM chats */
    --im-color-primary: #7EC465;          /* (green) */ 
    --im-color-primary-bg: #B0D89F;       /* (green -lighter) */
    --im-color-nearend: #7EC465;          /* (green) */ 
    --im-color-farend: #E3F1DD;           /* (green) */
    --im-color-wrap: #E6E7E8;             /* (gray)  */ 
    --im-color-wrap-bg: #E6E7E8;          /* (gray - lighter)  

    /* Primary colors for UC calls */
    --uc-color-primary: #7EC465;          /* (green) */ 
    --uc-color-primary-bg: #B0D89F;       /* (green -lighter) */
    --uc-color-wrap: #E6E7E8;             /* (gray)  */ 
    --uc-color-wrap-bg: #E6E7E8;          /* (gray - lighter) */  
    
    /* The different work-state colors */
    --ws-color-notloggedin: #E6E7E8;      /* (gray) */
    --ws-color-offline: #E6E7E8;          /* (gray) */
    --ws-color-avail: #7EC465;            /* (green) */
    --ws-color-avail-bg: #B0D89F;         /* (green -lighter) */
    --ws-color-occupied: #1F809F;         /* (blue) */
    --ws-color-occupied-bg: #80A6BD;      /* (blue - lighter) */
    --ws-color-wrap: #F08721;             /* (orange) */
    --ws-color-wrap-bg: #F9C18C;          /* (orange -lighter) */
    --ws-color-unavail: #F3B92F;          /* (yellow) */
    --ws-color-unavail-bg: #FADFAA;       /* (yellow - lighter) */
    --ws-color-donotdisturb: #DC2528;     /* (red) */

    /* The different Interaction State colors */
    --is-color-alerting: #DC2528;          /* (red) */
    --is-color-alerting-bg: #E77B60;       /* (red - lighter) */
    --is-color-active: #1F809F;            /* (blue) */
    --is-color-active-bg: #80A6BD;         /* (blue - lighter) */
    --is-color-wrap: #F08721;              /* (orange) */
    --is-color-wrap-bg: #F9C18C;           /* (orange -lighter) */
    --is-color-notify: #DC2528;            /* (red) */    
    --is-color-notify-bg: #E77B60;         /* (red - lighter) */
    
    /* Info/Warn/Error colors for User Notify messages */
    --notify-info: #4CC7EB;   /* (blue) */
    --notify-warn: #F08721;   /* (orange) */
    --notify-error: #DC2528;  /* (red) */

    /* Data highlighting colors */
    --hilight-positive: #4CBB17;            /* (green) */
    --hilight-neutral: #007FFF;             /* (blue) */
    --hilight-negative: #DC2528;            /* (red) */
}

/***** Set our default font for the whole UI (Google Font - "Open Sans") *****/

/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/google-font-open-sans-v27-latin-regular.woff2') format('woff2'), 
       url('../fonts/google-font-open-sans-v27-latin-regular.ttf') format('truetype')
}
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}
input, select, textarea {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}

/***** Set default style for all input controls *****/

input[type=text], input[type=number], textArea, select {
    border: 1px solid var(--input-border-color);
    border-radius: 3px;
    outline-color: var(--input-border-color);
    padding: 3px 4px;
} 

/***** Overall UI sizing ******/
body {
    margin: auto;    
}
#view_port {
    position: absolute;
    left: 0;
    /* Pin to top and bottom - stretch to frame height */
    top: 0;
    bottom: var(--viewport-layout-bottom-adjusted);
    
    display: block;
    border: 1px solid #CCCCCC;
    width: var(--viewport-min-width);
    min-height: 600px;
}

/* View area below purposely absolute with top/bottom 0 (stretches to height of container) */
#normal_view {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%
}
#normal_view.scThemeLight {
    background: var(--bg-gradient-lighttheme);
}
#normal_view.scThemeDark {
    background: var(--bg-gradient-darktheme);
}

/****** Header Layout ******/

/* Header area 1 - Logo, Close button */
#header_area1 {
    height: 70px;    
    width: 100%;
    position: relative;
}
/*** The various logos ***/
#header_logo {
    float: left;
    width: 250px;
    height: 50px;
    background-repeat: no-repeat; 
    background-position: 0px 0px;
    background-size: 250px auto;
}
#header_logo.scThemeLight {
    background-image: url("../images/main-logo.png");
}
#header_logo.scThemeDark {
    background-image: url("../images/main-logo.png");
}
.scModeAgent #header_logo.scThemeLight {
    background-image: url("../images/main-logo.png");
}
.scModeAgent #header_logo.scThemeDark {
    background-image: url("../images/main-logo.png");
}
.scModeOmniAgent #header_logo.scThemeLight {
    background-image: url("../images/main-logo.png");
}
.scModeOmniAgent #header_logo.scThemeDark {
    background-image: url("../images/main-logo.png");
}
.scModeUC #header_logo.scThemeLight {
    background-image: url("../images/main-logo.png");
}
.scModeUC #header_logo.scThemeDark {
    background-image: url("../images/main-logo.png");
}
.scModeSupervisor #header_logo.scThemeLight {
    background-image: url("../images/main-logo.png");
}
.scModeSupervisor #header_logo.scThemeDark {
    background-image: url("../images/main-logo.png");
}

#plugin_logos_area {
    position: absolute;
    height: 20px;
    width: 200px;
    top: 45px;
    left: 5px;
}

/* Header area 2 - Current Work State Panel */
#header_area2 {
    width: 100%;
    height: 55px;
    margin-top: 5px;
}

/***** User Info placement *****/
#user_info_panel {
    position: absolute;
    top: 47px;
    right: 0;
    height: 23px;
    min-width: 70px;
    text-align: right;
    padding-right: 8px;
    /* Always use dark theme color, as its inside the gradient now */
    color: var(--text-color-darktheme); 
}

/***** Pop-Out Helper *****/

#popout_helper {
    position: absolute;
    top: 220px;    
    left: 50%;
    transform: translatex(-50%);
    width: 300px;
    font-size: 12px;
    text-align: center;
}
#popout_icon {
    width: 50px;
    height: 50px;
    margin: 10px auto;
    
    background-repeat: no-repeat; 
    background-position: center;
    background-size: contain;
    background-image: url("../images/popout-icon.png");    
    cursor: pointer;
}
#popout_overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255, 0.50);
}
#popout_overlay_text {
    margin: 150px auto 0;
    width: 280px;
    text-align: center;
    color: var(--text-color-ondarkbg);  
}
.scThemeLight #popout_text, .scThemeLight #popout_overlay_text {
    color: var(--text-color-onlightbg);  
}
.scThemeDark #popout_text, .scThemeDark #popout_overlay_text {
    color: var(--text-color-ondarkbg);  
}

/***** Main Activity area - everything else in the UI (other than above) is encapsulated in this) *****/

#activity_area_outer {
    overflow: hidden;
    position: absolute;
    top: 138px;     /* (anchor top) */
    left: 0;
    bottom: 0;     /* (stretch to height of container) */
    width: 100%;    
}

/* Inner activity area - stretch both ways to be full size of outer (for now at least) */
#activity_area {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;    
}

/***** Interaction Handles, Tool Handles, and the main Interaction Frames and Tools Frames Area *****/

/* Interaction Handles area - pin to top-left and let extend down */
#interaction_handles_panel {
    position: absolute;
    left: 7px;
    width: 50px;
    min-height: 200px;
}

/* Tool Handles area - pin to bottom-left and let extend up */
#tool_handles_panel {
    position: absolute;
    left: 0px;
    bottom: 7px;    
    width: 36px;
    padding: 10px 0;
    border-radius: 0 10px 10px 0;    
    background-color: var(--tool-handle-color);
}

/* Interaction Frames area */
#interaction_frames_panel {
    position: absolute;
    top: 0px;      /* pin top-left next to handles */
    left: 57px;    
    right: 0px;    /* stretch remaining width */
    bottom: 0px;   /* stretch height to bottom of container */    
}

/*** Tools Frames area below sits in exactly the same location as the Interations  ***
 *** Frame area above - the 2 are never both visible at the same time.             ***/

/* Tools Frames area  */
#tool_frames_panel {
    position: absolute;
    top: 0px;      /* pin top-left next to handles */
    left: 57px;    
    right: 0px;    /* stretch remaining width */
    bottom: 0px;   /* stretch height to bottom of container */    
}


/**********  Common styling used throughout the UI **********/

/*** A couple of jQueryUI ThemeRoller overrides ***/

/* Remove the box around dialog headers - just a simple bottom line */
/* Adjust Dialog Header text - larger and non-bold. */
.ui-dialog-titlebar {
    border: 0 none;
    border-bottom: 1px solid var(--accent-color-lighttheme-soft);
    font-size: 14px;
    font-weight: normal;    
}

/***  ****************************************  ***/

/* Generic Action Button (and associated disabled version) */
.scActionButton {
    color: #FFFFFF;
    font-size: 13px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    padding: 6px 10px;
    background-color: var(--action-btn-color);
}
.scActionButton.scActionButtonDisabled {
    background-color: var(--action-btn-disabled-color);
}

/* Generic styling for Field Labels */
.scFieldLabel {
    margin-left: 3px;
    font-size: 15px;    
}

/* Generic styling for Display-Data values*/
.scDisplayDataValue {
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: normal;
}

/* Generic styling for Input fields */
.scInputField {
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 15px;
}

/* Generic styling for small 'x' cancel/close button '*/
.scCloseXButton, .scCloseXButtonDark {
    width: 12px; 
    height: 12px;
    background-size: contain;
    margin: 3px;
    cursor: pointer;
}
.scThemeLight .scCloseXButton {
    background-image: url("../images/common/cancel-btn-light-v2.png");
}
.scThemeDark .scCloseXButton, .scCloseXButtonDark {
    background-image: url("../images/common/cancel-btn-dark.png");
}

.scAccordionHeader {
    margin: 0 0 6px 0;
    padding: 3px 10px;
    font-weight: normal;
    font-size: 15px;    
    background-color: var( --action-btn-color);
    color: #FFFFFF;
    cursor: pointer;
}


/***** Variations on above common classes when used in a Tools panel   *****
 ***** (which purposely have different theme)                          *****/


/* Variation of Active Action button for tools panels */
.toolFrame .scActionButton {
    background-color: var(--tool-action-btn-color);
}
.toolFrame .scActionButton.scActionButtonDisabled  {
    background-color: var(--action-btn-disabled-color);
}


/* Variation of above scCloseXButtonDark for Tools panels (*/
.toolFrame .scCloseXButtonDark {
    background-image: url("../images/tool/tool-close-btn.png");
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/UserWorkStateControl.css ==============================*/

/*** Style for the main work state bar ***/

.workStateBlock {
    position: relative;
    border-radius: 25px;
    margin: 0 7px;
    padding: 5px;    
    background-color: var(--ws-color-notloggedin);   
    box-shadow: inset 0 0 7px #65727B;
    transition: background-color 100ms;
}
/*** Color the main status bar based on current work state ***/
/* - NotLoggedIn state */
.workStateBlock.wsWorkStateNotLoggedIn {
    background-color: var(--ws-color-notloggedin);    
    box-shadow: inset 0 0 7px #65727B;
}
/* - Offline state */
.workStateBlock.wsWorkStateOffline {
    background-color: var(--ws-color-offline);    
    box-shadow: inset 0 0 7px #65727B;
}
.scModeUC .workStateBlock.wsWorkStateOffline { /* UC - show Offline as Available */
    background-color: var(--ws-color-avail);    
    box-shadow: inset 0 0 7px #457839;
}
/* - Available state */
.workStateBlock.wsWorkStateAvailable  {
    background-color: var(--ws-color-avail);    
    box-shadow: inset 0 0 7px #457839;
}
/* - Occupied state */
.workStateBlock.wsWorkStateOccupied {
    background-color: var(--ws-color-occupied);    
    box-shadow: inset 0 0 7px #074152;
}
/* - Wrap state */
.workStateBlock.wsWorkStateWrap {
    background-color: var(--ws-color-wrap);    
    box-shadow: inset 0 0 7px #A25525;
}
.scModeUC .workStateBlock.wsWorkStateWrap { /* UC - show Wrap as Available */
    background-color: var(--ws-color-avail);    
    box-shadow: inset 0 0 7px #457839;
}
/* - Pending and Unavailable states */
.workStateBlock.wsWorkStatePendingUnavailable, .workStateBlock.wsWorkStateUnavailable {
    background-color: var(--ws-color-unavail);    
    box-shadow: inset 0 0 7px #A67b2C;
}
.scModeUC .workStateBlock.wsWorkStatePendingUnavailable, 
.scModeUC .workStateBlock.wsWorkStateUnavailable { /* UC - show Unavailable as "Do Not Disturb" */
    background-color: var(--ws-color-donotdisturb);    
    box-shadow: inset 0 0 7px #8F191C;
}

/* State Message Line */
.workstateMessageLine {
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: var(--text-color-ondarkbg);
    opacity: 1.0;
    transition: font-size 150ms, opacity 150ms;
}
#workstate_timer {
    font-weight: normal;
    margin-left: 5px;
}
/* State selectors */
.workStateBlock .workstateList {
    text-align: center;
    font-size: 11px;
    opacity: .7;    
    transition: font-size 150ms, opacity 150ms;
}
.workStateBlock .agentStateSelector, .workStateBlock .ucStateSelector {
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
    color: var(--text-color-ondarkbg);
}
/* (OFFLINE state color overrides - so we can read them!) */
.wsWorkStateOffline .workstateMessageLine, 
.wsWorkStateOffline .agentStateSelector, .wsWorkStateOffline .ucStateSelector {
    color: var(--text-color-onlightbg);
}
/* Hide any not selectable states */
.workStateBlock .agentStateSelector:not(.selectorActive),
.workStateBlock .ucStateSelector:not(.selectorActive) {
    display: none;
}

/* Transition to focus on selectors on hover */
.workStateBlock:hover .workstateMessageLine {
    font-size: 13px;
    opacity: 0.7;
}
.workStateBlock:hover .workstateList {
    font-size: 15px;
    opacity: 1.0;
}

/*** Style for the main workstate Unavailable Selector ***/

#workstate_unavail_selector_block {
    position: absolute;
    background-color: yellowgreen;
    left: 50%;
    transform: translate(-50%);
    top: calc(100% - -1px);
    min-width: 200px;
    max-width: calc(100% - 60px);
    padding: 5px;
    border-radius: 0 0 4px 4px;
    z-index: 5;
    color: var(--text-color-onlightbg);
}
#ws_unavail_selector_hdr {
    position: relative;
}
#ws_unavail_selector_cancel {
    position: absolute; 
    top: -3px;
    right: -1px;
}
/* Unavailable Selector options */
#ws_unavail_selector_items {
    margin-top: 5px;
    padding: 3px;
    background-color: #FFF;
    white-space: nowrap;
}
.wsUnavailReasonOpt {
    padding: 0 5px;
    cursor: pointer;
}
.wsUnavailReasonOpt:hover {
    background-color: var(--list-entry-hover-color);
}
.wsUnavailReasonOpt.wsOptSelected {
    background-color: #65727B;  /* Mid Slate */
    color: var(--text-color-ondarkbg);
}

/* Color the main workstate Unavailable Selector based on current work state */
.wsWorkStateNotLoggedIn #workstate_unavail_selector_block {
    background-color: var(--ws-color-notloggedin);    
}
.wsWorkStateOffline #workstate_unavail_selector_block {
    background-color: var(--ws-color-offline);    
}
.wsWorkStateAvailable #workstate_unavail_selector_block {
    background-color: var(--ws-color-avail-bg);    
}
.wsWorkStateOccupied #workstate_unavail_selector_block {
    background-color: var(--ws-color-occupied-bg);    
}
.wsWorkStateWrap #workstate_unavail_selector_block {
    background-color: var(--ws-color-wrap-bg);    
}
.wsWorkStatePendingUnavailable #workstate_unavail_selector_block, 
.wsWorkStateUnavailable #workstate_unavail_selector_block {
    background-color: var(--ws-color-unavail-bg);    
}
/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/video/VideoControl.css ==================*/

/* VideoHeader in Phone Interaction Frame shares channel-specific UI block with the Dial Pad, so give it a top margin.  */
.intFramePhonePart .videoHeader {
    margin-top: 10px;
}

/* Main video control container - encapsulates the html video elements, as well as the controls row below them. */
.videoControlContainer {
    width: 100%;
    margin-top: 5px;
}

/* Video streams container (holds the 2 HTML video elements: Far end video; and Local video (as a small picture-in-picture). */
/* (Purposely no height set here, and width defaults to 100% of container - we will let the height be the
    true calculated height of the child remote/far-end video block once its scaled with its aspect ration preserved) */
.videoStreamsContainer {
    position: relative;
    margin: 0 5px 5px;
}
/* Common to both local and remote inner stream blocks (the video containers) */
.videoStreamsContainer .videoStreamBlock {
    background-color: #000;     /* (black) */
}
/* Remove video (far end) encapsulating div */
.videoStreamsContainer .remoteVideoBlock {
    /* (nothing specific) */
}
/* Local video (near end) encapsulating div - displayed as a "picture-in-picture" box in the top-right of the remote video above */
.videoStreamsContainer .localVideoBlock {
    position: absolute;
    top: 5px;                   /* anchor position to top-right of parent container */
    right: 5px;
    z-index: 10;                /* display "on top" of the remove video block above */
    border: 1px solid #FFF;     /* (white) */
    width: 70px;
}
/* Specific to the inner <video> elements in each of the blocks above */
.videoStreamsContainer video {
    width: 100%;                /* <video> width should take entire width of parent container, */
    object-fit: contain;        /* but preserve the aspect-ratio of the video stream, and therefore the height is dynamic. */
    display: block;             /* Stops the height of the container from being bigger than it needs to be, avoiding the black line on the bottom. */
}

/* Video Controls area */
.videoControlRow {
    position: relative;
    text-align: center;
    margin-top: 8px;
}
/* Common for all video control action buttons */
.videoControlRow .toggleVideoBtn, .videoControlRow .videoPopoutBtn {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 3px;
    border-radius: 5px;
    background-color: #FFF;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
/* Specific for the toggle button */
.videoControlRow .toggleVideoBtn.videoDisabled {
    background-image: url("../images/video/video-camera-on-btn.png");
}
.videoControlRow .toggleVideoBtn.videoEnabled {
    background-image: url("../images/video/video-camera-off-btn.png");
}
/* Specific for Popout video button */
.videoControlRow .videoPopoutBtn {
    background-image: url("../images/video/video-popout-btn.png");
}

/* Video error text */
.videoErrorText {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    color: #d32f2f;
    font-size: 12px;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ================= uicomponents/interactions/video/VideoPopout.css ==================*/

/* Style for the Video Popout Window */
#video_view_port {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-gradient-popouts);
}

#video_popout_logo {
    height: 50px;
    margin: 10px;
    background-image: url("../images/main-logo.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: contain;
}

#video_popout_header_area {
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#video_popout_body_area {
    position: absolute;
    top: 75px;
    bottom: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/*** Overrides of existing VideoControl pieces that get styled slightly differently in the pop-out ***/

/* Controls bar moved to the top when in the popout window, so remove all top margins, and add a bottom margin */
#video_popout_body_area .videoControlContainer {
    margin-top: 0;
}
#video_popout_body_area .videoControlRow {
    margin-top: 0;
    margin-bottom: 5px;
}

/* Enable/Disable toggle button - slightly bigger when in popout window */
#video_popout_body_area .videoControlRow .toggleVideoBtn {
    height: 36px;
    width: 36px;
}
/* Copyright (c) Symbee. All rights reserved. */
/* ======================== uicomponents/tools/voicemail/VoicemailToolControl.css ==============================*/


/***** Voicemail Tool Handle *****/
/* (Note: Most of the Tool handle styling comes from ToolsBarControl.css) */

#tool_handle_Voicemail .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-voicemail-v2.png");
}
#tool_handle_Voicemail.voicemailMsgWaiting .toolHandleIcon {
    background-image: url("../images/tool/tool-handle-voicemail-new-v2.png");
    opacity: 1;   /* more prominent */
}

/***** Voicemail Frame *****/
/* (Note: Some of the Tool frame styling comes from generic styles defined in UserUI.css) */

#voicemailtool_body {
    position: relative;
    margin-top: 5px;
    height: 94%;
}
#voicemailtool_body .voicemailScrollWrapper {
    height: calc(100% - 32px);
}
#voicemailtool_body .voicemailScrollWrapper {
    padding-top: 10px;
}

#voicemailtool_body .ui-dialog {
    margin-top: 25px;
}

#voicemailtool_body .agentSearchBlock {
    width: 100%;
}

/*** Each Voicemail Entry ***/

.voicemailEntryBlock {
    position: relative;
    padding: 2px 0 2px 10px;
    margin-bottom: 5px;
}
.voicemailEntryBlock:hover {
    background-color: var(--list-entry-hover-color);
    cursor: pointer;
}

.voicemailEntryBlock .voicemailEntryTime {
    font-size: 13px;
}
.voicemailEntryBlock.unreadMessage .voicemailEntryTime {
    color: red;
}
.voicemailEntryBlock.unreadMessage .voicemailEntryTime:after {
    content: " (New)";
}
.voicemailEntryBlock.unreadButFwdedMessage .voicemailEntryTime {
    color: red;
}
.voicemailEntryBlock.unreadButFwdedMessage .voicemailEntryTime:after {
    content: " (New, Fwd →)";
}
.voicemailEntryBlock.unreadMessageFwd .voicemailEntryTime:after {
    content: " (New, ← Fwd)";
    color: red;
}
.voicemailEntryBlock.forwardedMsg .voicemailEntryTime:after {
    content: " (Fwd →)";
    color: green;
}
.voicemailEntryBlock.forwardMsg .voicemailEntryTime:after {
    content: " (← Fwd)";
    color: green;
}

.voicemailEntryBlock .voicemailEntryTimeStamp {
    font-weight: bold;
}
.voicemailEntryBlock .voicemailEntryDuration {
    font-style: italic;
}

.voicemailEntryBlock .voicemailEntryInfo {
    margin-left: 7px;
}
.voicemailEntryBlock .voicemailEntryAddress {
    display: inline-block;
    font-size: 15px;
}

.voicemailEntryBlock .voicemailEntryPlayer {
    margin: 3px 0;
}
.voicemailEntryBlock .voicemailEntryPlayer audio {
    display: block;
    width: 95%;
    height: 30px;
}

.voicemailEntryBlock .voicemailForwardedBy {
    margin: 3px 0;
}

.voicemailEntryBlock .voicemailTranscript {
    margin: 3px 0;
}

/* Voicemail Entry action buttons */
.voicemailEntryBlock .voicemailControls {
    position: absolute;
    right: 8px;
    top: 12px;    
}
.voicemailEntryBlock .vmActionBtn {
    display: inline-block;
    height: 20px;
    width: 20px;    
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;        
    opacity: 0.3;   /* faded, not in your face */
    z-index: 2;
}
.voicemailEntryBlock .voicemailDeleteBtn {
    background-image: url("../images/common/delete-small-btn.png");
}
.voicemailEntryBlock .voicemailCallBackBtn {
    background-image: url("../images/common/dir-clicktocall-btn.png");
}
.voicemailEntryBlock .voicemailForwardBtn {
    background-image: url("../images/common/vm-forward-btn.png");
}
.vmActionBtn:hover {
    opacity: 1.0;
}



/*** The Forward Voicemail dialog ***/

.forwardToRecipientList {
    text-align: left;
    margin-top: 5px;
}
.forwardToRecipientItem {
    font-weight: bold;
    cursor: pointer;
}
.forwardToRecipientItem:hover {
    background-color: var(--accent-color-lighttheme-heavy);
    color: #FFFFFF;
    font-weight: bold;
}