/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; vertical-align: baseline; }

html, body {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: 0; overflow: hidden;}

h1, h2, h3, h4, h5, h6 {text-transform: none;}

a:hover, a:active, a:focus{outline: 0;}

.close { color: white; opacity: .8; }
.close:hover { opacity: 1; }

#instanceBackground {display:none; position:absolute; top: 50%; width:100%;height:26em;margin-top: -13em;background-color: rgba(0, 0, 0, 0.8);}
#instanceBackground .pageContent {position:absolute; top: 50%; left: 50%; width:50em; height:26em;margin-top: -13em;margin-left: -25em;}
#instanceBackground input {background-color: rgba(0, 0, 0, 0.8);color: white;}
#instanceBackground .modal-header { height: 40px;background-color: transparent;border: none;box-shadow: none;}
#instanceBackground .modal-body { color: white; padding: 0; text-align:center;height:150px;}
#instanceBackground .modal-footer { height: 40px;background-color: transparent;border: none;box-shadow: none; text-align:center; color: white;}
#instanceBackground .row-fluid { margin-top:20px;}
#instanceBackground .error { border: 1px solid red;}
#instanceBackground .login-hidden { display: none;}
#instanceBackground #saveInstance {margin:0;}

#instanceTable h4 {float: right;line-height: 40px; padding-left: 40px; background: url('../Content/images/1logo_transp.png') no-repeat 10px 8px; }
#instanceTable small { float: right;}
#instanceButton { border: none;background-color: rgb(235, 86, 31);padding: 5px 50px;color: white;}
#instanceButton:hover {background-color: rgb(184, 69, 27)}
#instanceButton:active {background-color: rgb(89, 43, 27)}

#loginBackground {display:none; position: absolute;top: 0;bottom: 0;right: 0; background-color: rgba(0, 0, 0, 0.8);width: 350px;}
#loginBackground .pageContent {position:absolute; top: 50%; height:28em;margin-top: -14em; width:100%}
#loginBackground input {background-color: rgba(0, 0, 0, 0.8);color: white;}
#loginBackground .modal-header { height: 40px;background-color: rgba(0, 0, 0, 0.7);border: none;box-shadow: none; padding-left: 30px; padding-right: 30px;}
#loginBackground .modal-body { color: white; padding-left: 30px; padding-right: 30px;}
#loginBackground .modal-footer { padding-left: 30px; padding-right: 30px; height: 40px;background-color: rgba(0, 0, 0, 0.7);border: none;box-shadow: none;}
#loginBackground .error { border: 1px solid red;}
#loginBackground .login-hidden { display: none;}

#instanceButtonMobile {
    display:none;
}

#loginADFS { width: 100%;}
#loginADFS i {margin-right:10px;}

#mixedLogin {margin-top:20px; margin-bottom:20px; text-align:center;}

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px black inset; /* Change the color to your own background color */
    -webkit-text-fill-color: white;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px black inset;
    -webkit-text-fill-color: white;
}

#loginTable h4, #loginTimer h4 {float: right;line-height: 40px; padding-left: 40px; background: url('../Content/images/1logo_transp.png') no-repeat 10px 8px; }
#loginTable small, #loginTable small { float: right;}
#loginButton { border: none;background-color: rgb(235, 86, 31);padding: 5px 50px;color: white; width:100%;}
#loginButton:hover {background-color: rgb(184, 69, 27)}
#loginButton:active {background-color: rgb(89, 43, 27)}

.powerByCollab {float: right;width: 150px;}

#cancelLoginButton, #recoverLoginButton, #singOutButton { display: none; width:49%; margin:0;}

#advancedLogin:hover{ cursor: pointer;}

#loginBranding { width: 100%; height:auto; left:auto; object-fit: cover; }

.fullscreen{
    width: 100%;
    height: 100%;
    object-fit:cover;
}  

#loginTimer { display: none;}

#loginTable .modal-header { background-color: transparent;}
#loginTable .modal-footer { background-color: transparent;}
#loginTable .modal-footer .row-fluid { text-align:center;}


#loginTimer .modal-header { background-color: transparent;}
#loginTimer .modal-footer { background-color: transparent;}
#loginTimer .modal-footer button { border: none;padding: 5px 50px;color: white;}

/*
    Strength meter
----------------------------------------------------------*/

.progressbar-red {background-color: #ee5f5b;/*red*/}

.progressbar-orange {background-color: #FF9900;/*orange*/}

.progressbar-yellow { background-color: #FFF400;/*yellow*/}

.progressbar-green {background-color: #5eb95e;/*green*/}

.errorOnChange { border: 1px solid red!important;outline: none; box-shadow: 0 0 10px #719ECE;}
.feedback-info {color: #b94a48;}

#mainContainer {display: none;padding: 0;}

#mainContainer, #loginContainer, #loginMainRow, #mainRow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#sidebar {
    position: absolute;
    top: 0;
    bottom:0;
    color: #eee;
    overflow: hidden;
    float: left;
    background-color: #f7f7f7;
    padding: 2px;
    border-right: 1px solid #CCCCCC; 
}

#sidebar.sidebar-full {width: 300px;}
#sidebar.sidebar-medium {width: 250px;}

#menu {             
    background-repeat: no-repeat;
                    -ms-background-size: 100% auto;
                    background-size: 100% auto;
                    background-position: center top;
}

#serverInfo{
    position:absolute;
    bottom:0;
    left: 0;
    right:0;
    height:25px;
    background-color: #393832;
}

#agentServerInfo {color: white; display:inline-block; margin-left:10px;}
#agentServerSign { color: green; margin-right: 5px;}

#agentSoftphoneInfo {color: white; display:inline-block; margin-left:10px; display:none;}
#agentSoftphoneSign {color: red; margin-right: 5px;}

#sessions {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    padding: 0;
    overflow: hidden;
    background-size: 100%;
}

#sessions.sidebar-full {left: 305px;}
#sessions.sidebar-medium {left: 255px;}

#mainContainer .areaTitle { background-color: rgba(0,0,0,0.75); }
#mainContainer .areaBody { background-color: white; }


/*#region TopBar*/


#topbar { height: 40px; background-color: #393832; color: white;margin: 0;position: absolute;left: 0;right: 0;top: 0;border-bottom: 1px solid #CCCCCC; box-shadow:rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;}
#topbar .brand {width: 130px;display: inline;font-size: 17.5px;text-shadow: none;color: white;margin: 0;padding: 0; line-height: 40px; padding-left: 40px; background: url('../Content/images/1logo_transp.png') no-repeat 10px 8px; }
#topbar .navbar-inner { padding: 0;border: none; background-color: transparent;height: 40px;}
#topbar .container { height: 40px; background-color: #393832;}
#topbar .btn-toolbar { margin: 0; }
#topbar .btn-toolbar .btn { height: 20px; padding: 0 5px; margin: 10px 2px;background-color: transparent;border: none;}
#topbar .nav { padding: 0;margin: 0 10px;height: 40px;}
#topbar .nav li { margin: 0;margin-right: 5px;height: 100%;}
#topbar a { color: white;background-color: transparent; padding: 0;text-shadow: none;} 
#topbar i { margin-top: 7px;vertical-align: top;}
#topbar a:hover {color: #2e8bcc}

#topbar .idle { border-left: 7px solid #27CC27;}
#topbar .busy { border-left: 7px solid #802420;}
#topbar .wrapup { border-left: 7px solid #ad6704;}
#topbar .preview { border-left: 7px solid #20458e;}
#topbar #agentPhoto { width: 25px;height: 25px;}

#topbar .divider-vertical { height: 30px;margin: 5px}

.navbar .nav > li {font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
    text-transform: none;
}

#alertsButton { margin: 0;}
#alertsButton:hover {color: #2e8bcc}

#alertMenu a { padding: 3px 20px}
#alertMenu i { margin-right: 5px}
#alertMenu .noAlert {color: black; }
#alertMenu .newAlert {color: red; display: none;}
#alertMenu a:hover { color: white;}

#audioSettingsButton .dropdown-toggle { margin: 0;}

#agentInfoButton {margin-top: 8px;padding: 5px 0; color: white;float: right;background-color: transparent;border: none;margin-right: 5px;text-shadow: none;} 
#agentInfoButton span { vertical-align: top;}
#agentInfoButton small { vertical-align: top;}

#agentInfoMenu { right: 0;margin-right: 5px;left: auto; padding:0;}
#agentInfoMenu a { color: #000;float: none;margin: 0; padding: 3px 20px;}
#agentInfoMenu a:hover { color: white;}
#agentInfoMenu i { margin-right: 4px;}
#agentInfoMenu li { margin: 0 !important;}

#agentInfoMenu .divider { border-bottom: 1px solid black; }

/*#endregion*/

/*#region bottomArea*/

#bottomArea { top: 0;bottom: 0;right: 0;left: 0;position: absolute;margin-top: 40px;}

/*#endregion*/  

.btn-toggle { height: 40px; background-color: transparent;border: none;box-shadow: none;}
.btn-toggle h4 { float: left;}
.btn-toggle i { float: right;margin-top: 5px;}
.btn-toggle:hover {background-color: #2e8bcc}

.area { margin-top: 5px;}
.areaHeader { height: 40px; width: 90%; background-color: #344b65; }
.areaHeader h4 { line-height: 40px; padding-left: 10px;}

/*#region Settings Area*/ 

#settingsArea { display: none; position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: 5px;margin-top: 45px;background-color: #eeeeee; }
#settingsArea.sidebar-full {margin-left: 315px;}
#settingsArea.sidebar-medium {margin-left: 265px;}

#settingsTitle { height: 20px;background-color: #393832;color: white;padding: 10px;}

#settingsOptions {background-color: white;position: absolute;top: 0;right: 0;left: 0;bottom: 0;border: 5px solid #393832; margin-top: 40px;}
#settingsOptions .nav-tabs { height: 100%; background-color: #eeeeee;margin-bottom: 0;width: 235px;}
#settingsOptions .nav-tabs li :hover{ color: #2e8bcc;}
#settingsOptions .nav-tabs > .active:hover{ color: black !important;}
#settingsOptions .tab-content { position: absolute;top: 0;bottom: 0;left: 235px;right: 0;padding: 40px;}
#settingsOptions .tab-content > .active { height: 100%;overflow: auto;}
#settingsOptions a { color: black;}

#displayTab #changeLanguage { height: 30px;margin: 0 0 5px 0;width: 100%;}
#shortcutsTab table { width: 100%;}
#shortcutsTab table td { width: 33%;}
#shortcutsTab table tr { border-bottom: 1px solid #ccc; }
#shortcutsTab table .table-tab { padding-left: 30px;}
#changePasswordTab small {line-height: 15px; height: 30px;}
#changePasswordTab input {height: 30px;margin-bottom: 0;}
#changePasswordError { color: #b94a48;display: none;}
#setExtensionTab input { height: 30px;}
#setExtensionTab .btn { height: 35px; padding: 3px 10px}
#setExtensionWarning { display: none;color: #b94a48;}
#setExtensionBtn {border-radius: 0;border: 0;background: #393832; color:white}
#setExtensionBtn:disabled {cursor: not-allowed; background-color: rgb(158,156,156)}
#systemMessages {height: 100%;overflow-y: auto;padding-right: 10px;}
#systemMessages small {text-align: right;}
#systemMessages small p {height:20px; border-bottom: solid 1px #eee;opacity: 0.6;}
#changePasswordButtons {text-align: right}
#changePasswordButtons button span { margin-left: 5px;}

#showSupervisorMessagesTab .broadcastTitle {padding-left: 5px;text-align: right;}
#showSupervisorMessagesTab .broadcastTitleInfo { background-color: #8FB4DB}
#showSupervisorMessagesTab .broadcastTitleWarning { background-color: #faa732}
#showSupervisorMessagesTab .broadcastTitleCritical { background-color: #da4f49}
#showSupervisorMessagesTab .broadcastBody {background-color: #eeeeee;padding: 5px; -ms-word-wrap:break-word; word-wrap:break-word;}
#broadcastMessages { position: absolute; bottom: 75px;left: 40px;right: 40px;top: 40px;}
#broadcastFilters { position: absolute; bottom: 75px;left: 40px;right: 40px;top: 40px;}
#broadcastMessage1,#broadcastMessage2  {height: 50%;}
#broadcastFilters button { margin-bottom: 12.5px;}
#broadcastFilters .ui-datepicker-trigger {height: 35px; border-radius: 0;border: 0; background: #393832}
#broadcastFilters .ui-datepicker-trigger:disabled { cursor: not-allowed; background-color: rgb(158,156,156)}
#broadcastFilters input[type="checkbox"] { margin-top: 0;}
#broadcastPagination { margin: 0;}
#broadcastPagination .adisabled { color: black;cursor: default;}
#broadcastClearFilter { display: none;}
#broadcastButtons { float: right;}
#broadcastButtons button span { margin-left: 5px;}
#broadcastOptions { position: absolute; bottom: 40px;left: 40px;right: 40px;}

#broadcastCategory .bcinformation{ text-align: left;}
#broadcastCategory .bcwarning{ text-align: center;}
#broadcastCategory .bccritical{ text-align: right;}

#broadcastShowMessages .bsmexpired{ text-align: left;}
#broadcastShowMessages .bsmnotexpired{ text-align: center;}

#closeSettings { font-size: 30px;}

.microSliderValue, .speakersSliderValue { margin-left: 15px; margin-bottom: 100px }
.slider { float: left; width: 160px; margin-top: 8px; font-size: 12px }
#controlOptionsTab .slider {margin-left: 6px}
/*#endregion*/

/*#region Menu*/
#menuArea { margin-bottom: 0;}

#menuArea .menuTab {background-color: transparent;margin: 0;border-bottom: 2px solid #eeeeee;-ms-border-radius: 0;border-radius: 0; border:1px solid #e5e5e5;}

#menuArea .areaTitle { background-color: rgba(0,0,0,0.75); height:43px; line-height:43px;}
#menuArea .areaTitle a { color: white;background-color: transparent; padding:2px 15px 14px; display:block; height:27px; cursor:pointer;}
#menuArea .areaTitle a:hover { background-color: #2e8bcc;text-decoration: none;}
#menuArea .areaTitle a h4 { display: inline;}
#menuArea .areaTitle i { float:right; margin-top:10px;}

#servicesAreaTitle a {float:right;}
#contactsAreaTitle a {float:right;}

#menuArea .areaBody { background-color: white; max-height:0; transition: max-height 0.30s ease-out; overflow-y:hidden; width:100%; overflow-x:hidden;}

#menuArea .icon-chevron-up{ display:none;}

#menuArea.servicesArea #servicesAreaInfo{ max-height:1000px; transition: max-height 0.30s ease-in; overflow-y:hidden;}
#menuArea.servicesArea #servicesAreaTitle .icon-chevron-up {display:block;}
#menuArea.servicesArea #servicesAreaTitle .icon-chevron-down {display:none;}

#menuArea.contactsArea #contactsAreaInfo{ max-height:1000px; transition: max-height 0.30s ease-in;}
#menuArea.contactsArea #contactsAreaTitle .icon-chevron-up {display:block;}
#menuArea.contactsArea #contactsAreaTitle .icon-chevron-down {display:none;}

#menuArea.interactionArea #interactionAreaInfo{ max-height:1000px; transition: max-height 0.30s ease-in;}
#menuArea.interactionArea #interactionAreaTitle .icon-chevron-up {display:block;}
#menuArea.interactionArea #interactionAreaTitle .icon-chevron-down {display:none;}

#menuArea.previewArea #previewAreaInfo{ max-height:1000px; transition: max-height 0.30s ease-in;}
#menuArea.previewArea #previewAreaTitle .icon-chevron-up {display:block;}
#menuArea.previewArea #previewAreaTitle .icon-chevron-down {display:none;}

#menuArea.sessionArea #sessionAreaInfo{ max-height:1000px; transition: max-height 0.30s ease-in;}
#menuArea.sessionArea #sessionAreaTitle .icon-chevron-up {display:block;}
#menuArea.sessionArea #sessionAreaTitle .icon-chevron-down {display:none;}

#menuArea.shelfArea #shelfAreaInfo{ max-height:1000px; transition: max-height 0.30s ease-in;}
#menuArea.shelfArea #shelfAreaTitle .icon-chevron-up {display:block;}
#menuArea.shelfArea #shelfAreaTitle .icon-chevron-down {display:none;}

#menuArea.performanceArea #performanceAreaInfo{ max-height:1000px; transition: max-height 0.30s ease-in;}
#menuArea.performanceArea #performanceAreaTitle .icon-chevron-up {display:block;}
#menuArea.performanceArea #performanceAreaTitle .icon-chevron-down {display:none;}

/*#endregion*/

/*#region Services Area */

#readyTimer { display: none;}

#servicesAreaTitle a { padding: 0;}
#servicesAreaTitle .icon-lock {margin-top: 15px !important; margin-right: 17px;}

#servicesGlobalToggle {float:left;}
#servicesGlobalToggle.sidebar-full {height: 43px;width: calc(100% - 44px);}
#servicesGlobalToggle.sidebar-medium {height: 43px;width: 200px;}
#servicesGlobalToggle h4 { line-height: 20px; text-align:center;display: inline-block;}
#servicesGlobalToggle small {color: white; line-height: 20px;} 

#servicesList { padding: 0 10px; color: #333; overflow-y:auto;overflow-x: hidden;padding-bottom: 2px}
#servicesList.noServiceSelection label { background: #eee;cursor: default;}
#servicesList.noServiceSelection span { cursor: default;}

.switch.switch-mini {min-width: 35px; min-height:12px;padding: 0;}

.switch span.switch-mini, .switch label.switch-mini {line-height:12px;}

#servicesList .service { padding-bottom: 10px; border-bottom: solid 2px #eee}
#servicesList .service .serviceReason { color: #b94a48; text-align: right; cursor: pointer;}
#servicesList .service .serviceReason i { margin-left: 5px;margin-top: 4px;}
#servicesList .service small { line-height: 10px; text-align: right;min-height: 8px;min-width: 65px;}
#servicesList .service .serviceToggle {width:35px; height:12px;border-radius: 0;}
#servicesList .service .serviceToggle span { color: transparent;border-radius: 0;}

#servicesControls .row-fluid:first-child { margin-bottom: 5px;}
#servicesControls .btn i { margin-right: 3px;margin-top: 0;}
/*#endregion*/

/*#region Interaction Area */

#interactionArea { display: none; }
#interactionArea .interactionTitleButtons { padding-right: 5px;text-align: right;width: 100%; background-color: #eee; height:28px}
#interactionArea .interactionTitleButtons .btn-interaction {border: 0;background-color: #eee;}
#interactionArea .interactionTitleButtons .btn-interaction:hover {border: 0;background-color: #b8b8b8;}
#interactionArea .interactionTitleButtons .interactionModalLabel {text-align:center}
#interactionArea .btn-startRecord { display: none;}
#interactionArea .btn-stopRecord { display: none;}

#interactionArea .btn-resizeFull {border: 0;background-color: #eee; float:right; cursor:pointer; z-index:100;}
#interactionArea .btn-resizeFull:hover {border: 0;background-color: #b8b8b8;}

#audioSettings {
    width: 300px;
    padding: 10px 10px 10px 10px;
}

#audioSettings input[type='checkbox']{
    margin-left: -15px;
    margin-top: 7px;
}

.microVolumeSlider .ui-widget-header {
    background: #f0f0f0;
    color: #222222;
    font-weight: bold;
}

.speakersVolumeSlider .ui-widget-header {
    background: #f0f0f0;
    color: #222222;
    font-weight: bold;
}

.microVolumeSlider .ui-slider { position: relative; text-align: left; }
.microVolumeSlider .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.microVolumeSlider .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.microVolumeSlider .ui-slider-horizontal { height: .8em; }
.microVolumeSlider .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.microVolumeSlider .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%;  }
.microVolumeSlider .ui-slider-horizontal .ui-slider-range-min { left: 0;  }
.microVolumeSlider .ui-slider-horizontal .ui-slider-range-max { right: 0; }

.microMute, .speakersMute {
    margin-top: 7px;
}

.microSliderValue, .speakersSliderValue{
    margin-left: 15px;
    margin-bottom: 100px;
}

.popover { border-radius: 0;}
.popover-title { background-color: #344b65;border-radius: 0;}
.popover-title i { margin-right: 5px;margin-top: 3px;}
.popover-content .row-fluid { margin-top: 4px;}

#interactionAreaInfo .btn i { margin-right: 3px; }
#interactionAreaInfo .activeInteractionTitle { text-align: right;color: black;padding-right: 10px;}
#interactionAreaInfo .activeInteractionTitle .timeStatus {color: #5E90D9; }
#interactionAreaInfo .holdInteractionTitle { text-align: right;color: black;padding-right: 10px;}
#interactionAreaInfo .holdInteractionTitle .timeStatus,
#interactionAreaInfo .mailImInteractionTitle.hold .timeStatus {color: #E8605B; }
#interactionAreaInfo .mailImInteractionTitle { text-align: right;color: black;padding-right: 10px; }
#interactionAreaInfo .mailImInteractionTitle .timeStatus { color: #5E90D9; }
#interactionAreaInfo .ringingInteractionTitle { text-align: right;color: black;padding-right: 10px; }
#interactionAreaInfo .ringingInteractionTitle .timeStatus { color: #5E90D9; }

#interactionAreaInfo .contactsConnected {border-bottom: 2px solid #ccc; }
#interactionAreaInfo .contactsOnHold {border-bottom: 2px solid #ccc; }

#interactionAreaInfo .topControls { margin-bottom: 5px;}

#mailTransferPopover { padding: 0;width: auto;}
#mailTransferPopover .popover-content {padding: 0;}
#mailTransferPopover .popover-content i { margin-right: 5px;}
#mailTransferPopover .popover-content .home-hide .fa{-ms-opacity: 0;opacity: 0;}

#mailTransferPopover .dropdown-menu {display: block;position: relative;border: 0; max-height: 200px; overflow-y: auto; overflow-x: hidden;cursor: pointer;} 
#mailTransferPopover .dropdown-menu li{cursor:pointer;} 

#interactionAreaInfo img { margin: 5px 10px; }
#interactionAreaInfo .customerInfo{ color: #333; padding: 10px 10px 10px 0; }
#interactionAreaInfo .customerInfo h4{ white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
#interactionAreaInfo .mailInfo{ color: #333; padding: 0 10px 10px 10px; }
#interactionAreaInfo a { float: right;}
#interactionAreaInfo select { margin:0;}
#interactionAreaInfo .mailInteractionClose { color: #333;float: right;}
#interactionAreaInfo .mailInfoSubject input { margin-bottom: 0;width: 95%;}
#interactionAreaInfo .mailInfoTo input { margin-bottom: 0;width: 95%;}
#interactionAreaInfo .mailInfoCc input { margin-bottom: 0;width: 95%;}
#interactionAreaInfo .mailInfoBcc input { margin-bottom: 0;width: 95%;}
#interactionAreaInfo .select2-container { width: 85%;}
#interactionAreaInfo .btn-checkNames { width: 25px;height: 25px;margin-left: 5px;}
#interactionAreaInfo span { width: 23px;}
#interactionAreaInfo .btn-attach-input { height: 0;width: 0;}
#interactionAreaInfo .btn-attach-submit { height: 0;width: 0;}
#interactionAreaInfo .attach-submit-form { height: 0;width: 0;}



#videoInteraction { background-color: #eee;}
#localVideo { float:right;height: 45px; transform:scaleX(-1);}
#remoteVideo { max-height: 170px;width: 100%;}

.sidebar-medium .interactionInner #localVideo { top: 205px; }

.interactionInner i { margin-right: 2px;}
.interactionInner .sidebar-medium { display: none;} 

/*#endregion*/

/*#region Preview Area */

#previewArea { display: none;}
#previewInfo {color: #333; overflow-y:auto; overflow-x: hidden;}
#previewInfo img { margin: 5px 10px; }
#previewInfo .previewName {padding:15px 0 0 0;}

#previewInfo .previewInfoDetails {padding: 10px;}
#previewInfo .previewInfoDetails p {padding: 3px; text-align: left;}
#previewInfo .previewInfoDetails .contact {overflow: hidden; color: #333; border-bottom: 1px solid #CCCCCC; position: relative; width: 100%; height: 35px;line-height: 1.3;}
#previewInfo .previewInfoDetails .contact .contactAvailable { color: #5bb75b;}
#previewInfo .previewInfoDetails .contact .contactUnavailable { color: #da4f49;}
#previewInfo .previewInfoDetails .contact .btn-div { position: absolute; top: 3px; right: 0; background-color: white;}
#previewInfo .previewInfoDetails .contact .btn {margin-right: 5px; width: 30px;height: 30px;float: right;}
#previewInfo .previewInfoButtons .btn i { margin-right: 5px; }

#ui-datepicker-div .ui-datepicker-current { display:none; }

/*#endregion*/

/*#region Session Area */

#sessionArea { display: none;}
#assignServiceInfo { color: #333; padding: 10px 5px 5px 5px;}
#assignServiceInfo .btn-popover {width: 100%;}
#assignServiceInfo .btn-popover i {margin-top: 5px;margin-right: 10px;}
#assignServicePopover { padding: 0;width: auto;}
#assignServicePopover .popover-content {padding: 0;}
#assignServicePopover .popover-content i { margin-right: 5px;}
#assignServicePopover .popover-content .home-hide .fa{-ms-opacity: 0;opacity: 0;}

#assignServicePopover .dropdown-menu {display: block;position: relative;border: 0; max-height: 200px; overflow-y: auto; overflow-x: hidden;cursor: pointer;} 
#assignServicePopover .dropdown-menu li{cursor:pointer;} 

#businessOutcomeInfo {color: #333; padding: 0 5px 5px 5px;}
#businessOutcomeInfo .btn i { margin-right: 5px; }
#businessOutcomeInfo .btn-popover {width: 100%;}
#businessOutcomeInfo .btn-popover i {margin-top: 5px;margin-right: 10px;}
#businessOutcomePopover { padding: 0;width: auto;}
#businessOutcomePopover .popover-content {padding: 0;}
#businessOutcomePopover .popover-content > .tree {margin: 0;padding: 0;border: 0; max-height: 500px; overflow-y: auto; overflow-x: hidden;} 

#businessOutcomePopover .tree span { margin: 0;border: 0;padding: 0;}
#businessOutcomePopover .tree > ul { margin-left: 0;}
#businessOutcomePopover .tree a { padding: 3px;}
#businessOutcomePopover .tree i { margin-top: 3px;}

#sessionInfoButtons { display: none;}

.btn-stopScreenRecord { display: none;}
.btn-terminate {
    display: none !important;
}

/*#endregion*/

/*#region Contacts Area*/

#contactsAreaTitle { height: 43px;}

#contactsAreaInner {overflow-y:auto;}

#contactsSearchDiv {float: left; height: 41px; margin: 0;background-color: white;border: 1px solid #6B6B6B;display: inline-flex;}
#contactsSearchDiv.sidebar-full {width: calc(100% - 46px);}
#contactsSearchDiv.sidebar-medium {width: 198px;}

#contactsSearchButton { display: inline-flex;padding: 5px 0 5px 0;background-color: white; }
#contactsSearchButton button { width: 30px;height: 30px;margin-right: 3px;float: right;}
#contactsSearchButton button i { margin: 0 !important;float: none !important;}

#contactsSearchButtonTele { display: none;}

#contactsSearch {-moz-flex:1.0; /* Firefox */
-webkit-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
flex:1.0;height: 100%; margin: 0;float: left; outline:none;box-shadow: none;border:none; border-style: none; -moz-appearance:none; -webkit-appearance:none; appearance:none;}
#contactsSearch:focus {outline:none; border:none; border-style: none;box-shadow: none;}
#contactsListSearch .search {border-bottom: 2px solid #344b65;}
#contactsListSearch .contact:hover { color: #2e8bcc;cursor: pointer;}


ul.typeahead.dropdown-menu {width: 17.5%;}
ul.typeahead.dropdown-menu li {color: #333; border-top: solid 2px #eee;}

#contactsAreaInfo {color: #333; overflow-y:auto;}

#contactInfo {display:none;}
#contactInfo img { margin: 0 10px; }
#contactInfo .sidebar-full { padding: 10px 0 5px 0; }
#contactInfo .sidebar-medium { display: none; }
#contactName {padding:15px 0 0 0;}
#contactsList .contactName small.sidebar-medium { display: none;}
#contactInfo .close { color: #333;float: right;}

#contactInfoDetails {padding: 10px;}
#contactInfoDetails p {padding: 3px; text-align: left;}
#contactInfoDetails small {padding: 3px; text-align:right;}
#contactInfoDetails .contact {overflow: hidden; color: #333; border-top: solid 2px #eee; position: relative; width: 100%; height: 30px;}
#contactInfoDetails .contact small { margin-right: 5px;}
#contactInfoDetails .contact .btn-div { position: absolute; top: 0; right: 0; background-color: white;}
#contactInfoDetails .contact .btn {margin-right: 5px; width: 30px;height: 30px;float: right;}

#dialOptions { display: none;color: black;}
#dialOptions .btn-popover {width: 100%;}
#dialOptions .btn-popover i {margin-top: 5px;margin-right: 10px;}

#dialOptionsToggle { text-align: center; background-color: #eeeeee; height: 28px; cursor: pointer; color: black;}
#dialOptionsToggle:hover { font-weight:bold; background-color: #cccccc; }

#serviceInfo {padding: 10px 5px 5px 5px;}
#servicePopover { padding: 0;width: auto;}
#servicePopover .popover-content {padding: 0;}
#servicePopover .dropdown-menu {display: block;position: relative;border: 0; max-height: 200px; overflow-y: auto; overflow-x: hidden;} 
#servicePopover .dropdown-menu li{cursor:pointer;} 

#outgoingAddressInfo {padding: 0 5px 5px 5px;}
#outgoingAddressPopover { padding: 0;width: auto;}
#outgoingAddressPopover .popover-content {padding: 0;}
#outgoingAddressPopover .dropdown-menu {display: block;position: relative;border: 0; max-height: 200px; overflow-y: auto; overflow-x: hidden;} 
#outgoingAddressPopover .dropdown-menu li{cursor:pointer;} 

#contactsList { padding:0 10px; color: #333;}

#contactsList h4 { border-bottom: 2px solid #344b65; }
#contactsList small {cursor: pointer }
#contactsShowMore { text-align: center;}

#contactsListFavorites, #contactsListFrequents, #contactsListOthers { display: none;}

#contactsList .contact { overflow: hidden; color: #333; border-bottom: solid 2px #eee;height: 30px; }
#contactsList .contact .contactInfo {width: 100%;height: 30px; }
#contactsList .contact .contactInfo .contactRole { width: 5%; height: 30px; text-align: center; float: left; }
#contactsList .contact .contactInfo .contactRole i { margin-top: 6px; }
#contactsList .contact .contactInfo .contactName { height: 30px; float: left;overflow: hidden;width: 95%; text-overflow: ellipsis}
#contactsList .contact .contactInfo .contactName strong { padding-left: 10px; line-height: 30px; }
#contactsList .contact .directCallControls { width: 100%; height: 30px; position: relative; top: -30px; left: 300px;}
#contactsList .contact .directCallControls .btn {margin-right: 5px; width: 30px;height: 30px;float: right;}
#contactsList .contact .directCallControls .btn:first-child { margin-right: 0; }

/*#endregion*/

/*#region Performance Area*/

#performanceArea .performanceTitleButtons { padding-right: 5px;text-align: right;width: 100%; background-color: #eee;display: none;}
#performanceArea .performanceTitleButtons button {border: 0;background-color: #eee;}
#performanceArea .performanceTitleButtons button:hover {border: 0;background-color: #b8b8b8;}

#performanceList {color: #333;overflow-y: auto; overflow-x:hidden;}
#performanceList .performance { border-bottom: solid 2px #eee;}
#performanceList .performanceGraph { width: 100%;}
/*#endregion*/

/*#region Shelf Area*/

#shelfArea .shelfTitleButtons { padding-right: 5px;text-align: right;width: 100%; background-color: #eee;}
#shelfArea .shelfTitleButtons .btn-shelfArea {border: 0;background-color: #eee;}
#shelfArea .shelfTitleButtons .btn-shelfArea:hover {border: 0;background-color: #b8b8b8;}

#shelfAreaInfo {color: #333;}
#shelfAreaInfo a { color: #333;}
#shelfAreaInfo i { margin-right: 3px;}
#shelfAreaInfo select { height: 30px;width: 100%;margin: 0;}
#shelfNav { margin-bottom: 5px; padding: 0 5px 0 5px;}
#shelfNav a { padding: 5px;}
#shelfNav li { font-size: 12px;}
#shelfNav .active {font-weight:bold;}
#shelfInnerTab {padding: 0 5px 0 5px;}

/*#endregion*/

/*#region Shelf Draggable*/

#shelfDraggable {display: none; position: absolute; width: 500px;height: 500px;border: 5px solid #CCCCCC;top: 100px;left: 320px;background-color: white;}
#shelfDraggableTitle { width: 100%;height: 30px;text-align: center;background-color: #393832;color: #eee;cursor: move;}
#shelfDraggableTitle h4 { display: inline;}
#shelfDraggableTitle .close { float: right;margin-right: 10px;}
#shelfDraggableArea {padding: 0 10px;background-color: white;}
#shelfDraggableArea .shelfInner { border-bottom: 5px solid #CCCCCC;margin: 5px 0;}
#shelfDraggableArea .btn { height: 30px;width: 30px;margin-right: 5px;}
#shelfDraggableArea .shelfInner .shelfText { display: inline-block;line-height: 1;width: 60%;}
#shelfDraggableArea .shelfInner .shelfIcon { float: left; color:white}
#shelfDraggableArea .shelfInner .shelfIconExpired { margin-right: 10px;}
#shelfDraggableArea .shelfInner .shelfControls { float: right;}
#shelfDraggableArea .shelfInner .shelfDetails { margin: 0 35px;border-top: 1px solid #CCCCCC;}
#shelfDraggableArea .shelfInner .shelfDetails .btn-shelfItem {margin-right: 10px;float: right; cursor: pointer;}

#shelfDraggableFooter {background-color: #393832; position: absolute;bottom: 0;width: 100%;}
#shelfDraggableFooter .pagination { margin: 0;}
#shelfDraggableFooter a { background-color: black;color: #eee;}
#shelfDraggableFooter .adisabled { background-color: #4B5661;color: black;cursor: default;}
#shelfDraggableFooter ul { vertical-align: top;}

#shelfDraggablePublic { display: none;}
#shelfDraggableQueue { display: none;}

#shelfDraggableFooterPublic { display: none;}
#shelfDraggableFooterQueue { display: none;}

/*#endregion*/

/*#region Modals*/

.modal { border-radius: 0;}
.modal-header {height: 20px; background-color: #393832; line-height: 20px; color: #eee;border-radius: 0;}
.modal-header .close {margin-top: -5px;}
.modal-subHeader {height: 20px; text-align:center; padding:5px; background-color: #f5f5f5; line-height: 20px; color: #333333;border-radius: 0; border-bottom: 1px solid #ddd;}
#interactionModal .btn { width: 100%;}
#interactionModal .btn.sidebyside { width: 49%;}

#interactionModal .modal-footer .btn + .btn { margin-left: 0px;} 
#interactionModal .modal-footer .btn + .btn.sidebyside { margin-left: 5px;} 

#interactionModal .btn i { margin-right: 10px; margin-top:2px}
#interactionModal .close:hover { color: #cecece }
.interactionModalStates { text-align: center }
.callInvitingSideBar { color: black }
.callInvitingSideBar > h4 { text-align: center; margin-top: 2px }
.callInvitingSideBar > hr { margin: 5px 0 }
.callInvitingSideBar .btn { margin-left: 0 }
.callInvitingSideBar .btn + .btn.sidebyside { margin-left: 5px;} 
.sidebar-medium .callInvitingSideBar .btn + .btn.sidebyside { margin-left: 4px;} 
.callInvitingSideBar .btn.sidebyside { width: 49%;}
#interactionModal .checkbox { margin-top: 5px; margin-right: 8px; }
#interactionModal .checkbox input { margin-top: 8px;}

#interactionModal .interactionModalState {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#interactionModalMailLoading {height: 30px; margin-right: 50%; margin-left: 50%;}
#interactionModalMail .btn { margin: 0;}
#interactionModalMail .btn i { margin-right: 10px; margin-top:2px}

#interactionModalInfo { white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }

#reschedule .rescheduleText { color: #333; padding: 10px 10px 0 10px; }
#reschedule .rescheduleInfo { padding: 0 15px; }
#reschedule .rescheduleInfo .row-fluid { margin-top: 10px;}
#rescheduleNumber { padding-top: 10px;}
#reschedule select { margin: 0;height: 30px;}
#reschedule input { margin: 0;height: 30px;}
#reschedule .rescheduleTo {text-align: center;}
#reschedule .rescheduleForMe {text-align: right;}
#reschedule .rescheduleTP {text-align: right;}
#reschedule .btn i { text-align: center }

#reschedule .modal-body { overflow-y: hidden;}

#reschedule .inputForMe { height: auto;}
#reschedule .inputTP { height: auto;}

#reschedule .rescheduleValidation { color: red; text-align: right}

#rescheduleCalendarShow { width: 30px;height: 35px;background-color: #393832;float: right;margin: 0;}
#rescheduleCalendarShow:hover { background-color: #2e63cc; color:#fff;}

#rescheduleTimeZoneCheck { width: 30px;height: 35px;background-color: #393832;float: right;margin: 0;}
#rescheduleTimeZoneCheck:hover { background-color: #2e63cc; color:#fff;}

#reschedule .rescheduleCalendar { display: none;}
#reschedule .fc-header { display: none;}
#reschedule .fc-first { font-size: 10px;}
#reschedule .fc-event-title { font-size: 10px;}
#reschedule .fc-event-inner { cursor: pointer; background: #7dcc97}
#reschedule .fc-event-inner:hover { background: #3db966}

#reschedule .fc-event{
    border: 1px solid rgba(141, 141, 141, 0.5);
    background-color: rgba(255, 255, 255, 0.65);
    color: black;
}

#reschedule .fc-past{ background-color: #eeeeee !important;}
#reschedule .fc-future{ background-color: #eeeeee !important;}
#reschedule .fc-today{ background-color: #FDFFD8 !important;}

#rescheduleCalendarPrev, #rescheduleCalendarNext, #rescheduleCalendarNow, #rescheduleCalendarBack { display: none;}
#rescheduleCalendarBack { float: right;}

#reschedule .ui-datepicker-trigger {width: 30px;height: 35px; border-radius: 0;border: 0; background: #393832}
#reschedule .ui-datepicker-trigger:hover{ background: #2e63cc;color: #FFF; }

#timezoneRS {
    position: relative;
    top: -30px;
    left: 169px;
    overflow: hidden;
    width: 57%;
    white-space: nowrap;
    color: #555555;
    cursor: not-allowed;
}

#ui-datepicker-div { border-radius: 0;}
#ui-datepicker-div .ui-widget-header {background: #393832;color: white;border-radius: 0;}
#ui-datepicker-div .ui-datepicker-title { font-weight: normal;}
#ui-datepicker-div .ui-slider-access button { width: 25px;border-radius: 0;border: 0; background: #393832;color: white;margin-left: 1px;}
#ui-datepicker-div .ui-slider-access button:hover{ background: #1A1917;}
#ui-datepicker-div .ui-datepicker-buttonpane button { border: 0;background: #2e7bcc;border-radius: 0;color: white;opacity: 1; font-weight:normal}
#ui-datepicker-div .ui-datepicker-buttonpane .ui-state-hover {background: #2e63cc;}
#ui-datepicker-div dt { font-weight: normal !important;}

#shelfModal .ui-datepicker-trigger {width: 30px;height: 35px; border-radius: 0;border: 0; background: #393832}
#shelfModal .ui-datepicker-trigger:hover{background: #1A1917}

#shelfModal .shelfModalBody button { margin-bottom: 12.5px; height: 35px; width: 35px;}
#shelfModal .shelfModalBody input[type="checkbox"] { margin-top: 0;}
#shelfModal .shelfModalBody input[type="radio"] { margin-top: 0;}
#shelfModal .reminderDate { margin-top: 10px;}

#shelfModal .modal-footer button span { margin-left: 5px;}

#shelfTimepicker { margin-left: 25px;}
#shelfDatepicker { margin-left: 15px;}

#errorModalTextNo, #errorModalTextYes, #errorModalTextOK { display: none;}


/*#endregion*/

/*#region  Sessions - Scripts, Mail, IM */

#sessionsNavs { margin: 0 0;}
#sessionsNavs li {border: 1px solid #ddd;border-bottom-color: white; background-color:white;}
#sessionsNavs .active a {font-weight:bold;}
#sessionsNavs li:not(.active) { opacity: .5;}
#sessionsNavs li:not(.active):hover {opacity: .7;}
#sessionsNavs .close {line-height: 20px;color: #333;border: 0;padding: 0;margin-right: 5px;cursor:pointer; float: left;display: block;}
#sessionsNavs .inner {line-height: 20px;color: #333;border: 0;padding: 0;margin-right: 5px;cursor:pointer; float: left;display: block;}
#sessionsNavs .popup {line-height: 20px;color: #333;border: 0;padding: 0;margin-right: 0px;cursor:pointer; float: left;display: block;}
#sessionsNavs .inner .fa { margin-top: 6px; font-size: 0.9em;color: rgba(51, 51, 51, 0.78);}
#sessionsNavs .popup .fa { margin-top: 6px; font-size: 0.9em;color: rgba(51, 51, 51, 0.78);}
#sessionsNavs .close:hover { background-color: white; color: black}
#sessionsNavs .inner .fa:hover { background-color: white; color: black}
#sessionsNavs .popup .fa:hover { background-color: white; color: black}
#sessionsNavs .tab { text-decoration: none;float: left;border: 0;color: #333;padding: 0 2px;background-color: transparent;}
#sessionsNavs li:not(.active) .tab { cursor: pointer;}
#sessionsNavs .tabDiv:hover { background-color: white;animation: none;}
#sessionsNavs .badge { padding: 5px 5px;float: left;display: block;margin-top: 7px;-ms-border-radius: 10px;border-radius: 10px;margin-left: 2px;}
#sessionsNavs .fa { margin-top: 2px;-ms-border-radius: 10px;border-radius: 10px;font-size: 1.5em;}
#sessionsNavs .timer{line-height: -2px;color: #333;border: 0;padding: 0;margin-right: 5px;cursor:pointer; float: left;display: block;}
#sessionsNavs .fa-home {float:left}
.blink {
  animation: blink 500ms infinite alternate;
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}

.home-inverse {color:#333333}
.home-info {color:#3a87ad}
.home-important {color:#b94a48}
.home-warning {color:#f09609}

#sessionsFrames { width: 100%;}

.sessionFrame { height: 100% ;margin: 0;width: 100%;}
.sessionFrame iframe { height: 100% ;margin: 0;width: 100%;}

.conversationMessageContainer{ position: relative;height: 500px;overflow:hidden;border: none;}
.conversationMessageContainer input {padding: 0;resize: none;margin: 0;}
.conversationMessageContainer textarea {padding: 0;resize: none;margin: 0;}
.conversationMessageFrame { overflow: auto;}
.btn-conversationMailDown { height: 25px;width: 25px;float: right;}
.btn-conversationMailUp { height: 25px;width: 25px;float: right;}
.btn-conversationMailSplit { height: 25px;width: 25px;float: right;}

.btn-conversationMailRotate {
    height: 25px;
    width: 25px;
    float: right;
    line-height: 24px;
}

.conversationMessageRotated {

    height: 100% !important;
    width: 25px !important;
    right: 0% !important;
    z-index: 100;
}

.conversationMessageContainerRotated {
    position: relative;
    height: 200%;
    width: 50%;
}

.scriptFrameRotated {
    position: relative;
    height: 100%;
    display: inline-block;
}

.conversationMessageAreaRotated {
    display: inline-block;
}


.btn-MailUpRotated {
    transform: rotate(270deg);
}

.btn-MailDownRotated {
    transform: rotate(270deg);
}

.btn-MailSplitRotated {
    transform: rotate(270deg);
}

.btn-MailRotateRotated {
    transform: rotate(270deg);
}

.btn-conversationMailPush {
    height: 25px;
    width: 25px;
    float: right;
    margin-right: 10px;
}
.conversationMessageResizer { height: 25px;width: 100%;bottom: 0;margin: 0px 0;background-color: #344b65 !important;}
.conversationMessageResizer i { position: relative;bottom: 8px;right: 5px;}

.conversationIMArea {width: auto;    
    float: right;
    border:1px solid #ddd;height: 100%;}
.conversationIMContainer{ position: relative;height: 100%;background-color: #eee;overflow:hidden;width: 215px;float: right;}
.conversationIMResizer {padding-left: 5px; background-color: #344b65; cursor: pointer;}
.conversationIMResizer i { position: relative;}
.conversationIMTextArea { position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin-top: 30px;margin-bottom: 200px;}
.conversationIMComposer { position: absolute;bottom: 0;}
.conversationIM {position:absolute;bottom: 0;overflow-y: auto;max-height: 100%;color: white;width: 100%;}
.conversationIMContainer a, .conversationIMContainer a:hover{color: #A7D5FD;}
.conversationIMContainer .receivedIM { float: left;width: 180px; -ms-word-wrap:break-word; word-wrap:break-word;background-color: #b94a48;margin-left: 5px;line-height: 15px;margin-bottom:10px;}
.conversationIMContainer .sentIM { float: right;width: 180px; -ms-word-wrap:break-word; word-wrap:break-word;background-color: #3a87ad;margin-right: 5px;line-height: 15px;margin-bottom:10px;}
.conversationIMContainer .receivedIMHistory {-ms-opacity: 0.5;opacity: 0.5;}
.conversationIMContainer .sentIMHistory {-ms-opacity: 0.5;opacity: 0.5;}
.conversationIMContainer .textIM {margin-top: 0 !important;float: right;width: 180px; -ms-word-wrap:break-word; word-wrap:break-word;background-color: white;margin: 0 5px;border: 1px solid #344b65;line-height: 15px;margin-bottom: 15px;}
.conversationIMContainer .triangle-right {position:relative;padding:5px;margin-top:10px;}
.conversationIMContainer .triangle-right.sentIM:after {content:"";position:absolute;bottom:-10px;left:175px;border-width:10px 0 0 10px;border-style:solid;border-color:#3a87ad transparent; display:block; width:0;}
.conversationIMContainer .triangle-right.receivedIM:after {top:-10px; right:175px; bottom:auto;left:auto;border-width:10px 0 0 10px; border-color:transparent #b94a48; }
.conversationIMContainer .triangle-right:after {content:"";position:absolute;bottom:-8px;left:176px;border-width:8px 0 0 8px;border-style:solid;border-color:white transparent; display:block; width:0;}
.conversationIMContainer .triangle-right.textIM:before {content:"";position:absolute;bottom:-10px;left:175px;border-width:10px 0 0 10px;border-style:solid;border-color:#344b65 transparent; display:block; width:0;}
.conversationIMContainer textArea{box-shadow: none; border: 0;margin: 0;width: 180px;max-width: 180px;padding: 0;resize: none;overflow: hidden; height:150px;}
.conversationIMContainer textarea:focus, .conversationIM input:active {box-shadow: none; border: none;outline: none;}
.conversationIMContainer input {box-shadow: none; border: 0;margin: 0;width: 180px;max-width: 180px;padding: 0;resize: none;overflow: hidden;}
.conversationIMContainer input:focus, .conversationIM input:active {box-shadow: none; border: none;outline: none;}
.conversationIMContainer small { float: right;opacity: .7;margin-top: 5px;}
.conversationIMContainer .conversationClientState { text-align: center;color: black;}

.conversationIMContainer .dateSpliter { text-align: center; margin: 0;}
.conversationIMContainer .dateSpliter span { font-size: 12px; display: inline-block;color: rgba(69,90,100,0.95);background-color: rgba(225,245,254,0.92);padding: 5px 12px 6px 12px;box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);}

.videoFullScreen { position: absolute;top: 0;bottom: 0;left: 0;right: 0; background-color: #eee}
.videoFullScreen .btn-resizeSmall {border: 0;background-color: #eee; position: absolute;right: 0;}
.videoFullScreen .btn-resizeSmall:hover {border: 0;background-color: #b8b8b8;}
.videoFullScreen .videoBig { height: 100%;width: 100%; background-color:black}
.videoFullScreen .videoSmall { position: absolute;bottom: 0;right: 0;height: 15%;min-height: 100px; transform:scaleX(-1);}

/*#endregion*/

/*#region Icons */

.btn-transparent { background-color: transparent;}
.icon-hangup { background: url('../Content/images/hangup.png') center no-repeat;-moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;}
.icon-conference { background: url('../Content/images/conference.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;}
.icon-startRecord { background: url('../Content/images/startRecord.png') center no-repeat; -moz-background-size: 110%; -o-background-size: 110%; -webkit-background-size: 110%; background-size: 110%;width: 16px;}
.icon-stopRecord { background: url('../Content/images/stopRecord.png') center no-repeat; -moz-background-size: 110%; -o-background-size: 110%; -webkit-background-size: 110%; background-size: 110%;width: 16px;}
.icon-startScreenRecord { background: url('../Content/images/startScreenRecord.png') center no-repeat; -moz-background-size: 110%; -o-background-size: 110%; -webkit-background-size: 110%; background-size: 110%;width: 16px;}
.icon-stopScreenRecord { background: url('../Content/images/stopScreenRecord.png') center no-repeat; -moz-background-size: 110%; -o-background-size: 110%; -webkit-background-size: 110%; background-size: 110%;width: 16px;}
.icon-dial { background: url('../Content/images/dial.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;}
.icon-resize {background: url('../Content/images/resize.png') center no-repeat; -moz-background-size: 1%; -o-background-size: 1%; -webkit-background-size: 1%; background-size: 1%;}
.icon-hold {background: url('../Content/images/16x16/CallHeld16x16.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;}
.icon-connected {background: url('../Content/images/16x16/CallConnected16x16.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;}
.icon-supervisorHelp {background: url('../Content/images/32x32/SupervisorHelp32x32.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;height: 32px;width: 32px;}
.icon-newEmail {background: url('../Content/images/32x32/EMailNew32x32.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;height: 32px;width: 32px;}
.icon-pickUpNext {background: url('../Content/images/32x32/PickupNext32x32.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;height: 32px;width: 32px;}
.icon-alerts {background: url('../Content/images/32x32/Alerts32x32.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;height: 32px;width: 32px;}
.icon-minusTab {background: url('../Content/images/32x32/MinusTab32x32.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;height: 32px;width: 32px;}
.icon-plusTab {background: url('../Content/images/32x32/PlusTab32x32.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;height: 32px;width: 32px;}
.icon-facebook { background: url('../Content/images/facebook.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;}
.icon-twitter { background: url('../Content/images/twitter.png') center no-repeat; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;}

.btn-twitter {background-color: #55ACEE !important}
.btn-facebook {background-color: #55ACEE !important}

.visible { display: none;}

/*#endregion*/

#sounds { height: 0;width: 0;}

#screenrecording { height: 1px;width: 1px;}

/*#region ScrollBar*/ 
::-webkit-scrollbar { width:7px; }   

::-webkit-scrollbar-track { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } 


::-webkit-scrollbar-thumb { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #344b65; 
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 

::-webkit-scrollbar-thumb:window-inactive { background: #eee;}

/*#endregion*/


/*#region Slim Sidebar */

#sidebar.sidebar-slim { width: 100px; position:relative; height:100%; overflow: inherit; }
#sessions.sidebar-slim { left: 104px; }
#settingsArea.sidebar-slim { margin-left: 115px; }

.sidebar-slim #menuArea .areaTitle a i { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.sidebar-slim .areaTitle h4 { font-size: 12px; }

#servicesGlobalToggle.sidebar-slim { min-height: 43px; width: 83px; padding: 0; }

.sidebar-slim #interactionAreaInfo .btn span,
.sidebar-slim .callInvitingSideBar .span2,
.sidebar-slim .callInvitingSideBar .span9,
.sidebar-slim #previewInfo .previewInfoDetails small,
.sidebar-slim #previewInfo .previewInfoDetails text,
.sidebar-slim #previewInfo .previewInfoButtons .btn span,
.sidebar-slim #previewInfo .span2,
.sidebar-slim .interactionInner small span,
.sidebar-slim .interactionInner .span2 { display: none; }

.sidebar-slim .areaTitle,
.sidebar-slim .callInvitingSideBar .span9,
.sidebar-slim #previewInfo .span9,
.sidebar-slim #interactionAreaInfo .interactionTitleButtons,
.sidebar-slim .interactionInner .span8,
.sidebar-slim .interactionInner .span9,
.sidebar-slim .interactionInner .holdInteractionTitle,
.sidebar-slim .interactionInner .mailImInteractionTitle,
.sidebar-slim .interactionInner .ringingInteractionTitle { text-align: center !important; }

.sidebar-slim #menuArea #servicesAreaInfo,
.sidebar-slim #menuArea #contactsAreaInfo,
.sidebar-slim #menuArea #sessionAreaInfo,
.sidebar-slim #menuArea #shelfAreaInfo { display: none; }

.sidebar-slim #menuArea.servicesArea #servicesAreaInfo,
.sidebar-slim #menuArea.contactsArea #contactsAreaInfo,
.sidebar-slim #menuArea.sessionArea #sessionAreaInfo,
.sidebar-slim #menuArea.shelfArea #shelfAreaInfo
 {
    display: block;
    width: 250px; 
    position: absolute; 
    left: 114px;
    margin-top: -44px;
    z-index: 1;
    border: solid 2px #cac9c9;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(214,203,214,1);
    -moz-box-shadow: 2px 2px 4px 0px rgba(214,203,214,1);
    box-shadow: 2px 2px 4px 0px rgba(214,203,214,1);
}

.sidebar-slim #contactsSearchDiv { float: none; width: 247px;}

.sidebar-slim .callInvitingSideBar > h4 { font-size: 13px; }
.sidebar-slim #interactionAreaInfo .customerInfo { padding: 0; }

.sidebar-slim .interactionInner .topControls { margin-bottom: 0 !important; }
.sidebar-slim .interactionInner .interactionControls .span6 { margin-bottom: 2px; }

.sidebar-slim #contactsAreaTitle > a > .fa-phone-square { 
    display:inline !important; 
    margin-right: 27px !important; 
    -webkit-transform: rotate(0) !important;
    -moz-transform: rotate(0) !important;
    -o-transform: rotate(0) !important;
    -ms-transform: rotate(0) !important;
    transform: rotate(0) !important;
    margin-top: 14px !important;
    font-size: 18px;
}

.sidebar-slim .interactionInner #localVideo { width: 50px; margin-bottom: 29px; top: 98px; }

.sidebar-slim .callInvitingSideBar .btn,
.sidebar-slim .interactionInner .btn,
.sidebar-slim #previewInfo .previewInfoButtons .btn,
.sidebar-slim #interactionAreaInfo .row-fluid,
.sidebar-slim #interactionAreaInfo .span9 { width: 100%; margin-left: 0 !important; }

.sidebar-slim .performance { text-align: center; font-size: 11px; color: #353535; }
.sidebar-slim .performanceName { font-weight: bold; }
.sidebar-slim .performanceResult { font-size: 11px; }

.sidebar-slim #menuArea.servicesArea #servicesAreaInfo + .sidebar-triangle,
.sidebar-slim #menuArea.contactsArea #contactsAreaInfo + .sidebar-triangle,
.sidebar-slim #menuArea.sessionArea #sessionAreaInfo + .sidebar-triangle,
.sidebar-slim #menuArea.shelfArea #shelfAreaInfo + .sidebar-triangle
 {
    display: block !important;
    position: absolute;
    left: 106px;
    margin-top: -31px;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 8px 11px 0;
    border-color: transparent #cac9c9 transparent transparent;
}

.sidebar-slim .interactionModalStates { font-size: 12px; }

.sidebar-slim #interactionAreaInfo .interactionInner,
.sidebar-slim #interactionAreaInfo .activeInteractionTitle,
.sidebar-slim #interactionAreaInfo .holdInteractionTitle { padding-right:0; text-align: center !important; font-size: 12px; }

.sidebar-slim .holdInteractionTitle small,
.sidebar-slim .ringingInteractionTitle small,
.sidebar-slim .mailImInteractionTitle small { display: block; }

.sidebar-slim #interactionAreaInfo .mailImInteractionTitle { padding-top: 5px; padding-right:0; }

.sidebar-slim .interactionsWithSession { line-height: 15px; }

.sidebar-slim h4 { font-size: 13.5px; }

.sidebar-slim #menuArea .areaTitle a { padding: 0 0 16px; margin-right: 1px; }

.sidebar-slim .interactionInner .timeStatus { display:block; }

.sidebar-slim #serverInfo { height: 52px; }

.sidebar-slim #menuArea .areaTitle i { margin-top: 15px; }

/*#endregion*/


/*#region MOBILE

@media all and (max-width: 600px){
    #bottomArea { margin-top: 80px;}
      #topbar { height: 80px;}
      #sidebar { width: 100% !important;}
}

#endregion*/

button:active { border: 1px solid black;}

.dtmf { border: 1px solid transparent;}

#fullscreenWarning {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.25);
    z-index:100;
}

#fullscreenWarning .modal {display: block}

.btn-answer {
    border-radius: 1px !important;
}

.btn-accept {
    border-radius: 1px !important;
}

.btn-answer i, .btn-answer span, .btn-accept i, .btn-accept span 
{
  animation: shake 0.82s infinite cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  display: inline-block;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(2px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(-1px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-2px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(1px, 0, 0);
  }
}

.validation-summary-errors {
    display: none;
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url('images/preloader.gif');
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
}

#status h4 {
    width: 500px;
    text-align: center;
    font-weight: bold;
    margin-left: -150px;
}

.screenRecorderMessages {
    display: none;
}

#blankScreen {
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: white;
}

#errorModal {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: -1;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}