@CHARSET "ISO-8859-1";


/* Low res ovverides */
.body {
    width:initial !important;
    max-width: 1240px;
    min-width: 576px;
}
.btn.nav-tabs-expand { display:none; }
.nav.nav-tabs .nav-tabs-close { display: none; }
@media screen and (max-width: 768px) {
    .nav.nav-tabs > li.nav-tabs-close {
        display:block;
    }
    .nav-tabs-open > .nav.nav-tabs {left:0; opacity:1;}
    .nav.nav-tabs {
        position: fixed;
        top: 0;
        left: -250px;
        bottom: 0;
        background: #FFFFFF;
        border-right: 1px solid #ddd;
        box-shadow: 5px 0 10px rgba(0,0,0,.2);
        z-index:1000;
        cursor: default;
        width:250px;
        opacity: 0;
        overflow: hidden;
        transition: left 175ms ease, opacity 175ms ease;
    }
    .nav.nav-tabs > li,
    .nav.nav-tabs > li.tabright  {
        float: none !important;
    }
    .nav.nav-tabs > li > a {
        background: none !important;
        border:none !important;
        margin:5px 5px !important;
        border-radius: 4px;
    }
    .nav.nav-tabs > li:hover > a,
    .nav.nav-tabs > li:focus > a,
    .nav.nav-tabs > li.active > a {
        border: none !important;
        background:#337ab7 !important;
        color:#fff !important;
    }

    #page_header {
        background-position: 5px 0;
        background-size: 30px 30px;
        padding: 0 0 0 35px;
        height: auto;
    }

    #page_header .headerActions {
        float:none;
        margin:0 5px;
    }
    #page_header .headerActions .btn.nav-tabs-expand {
        display:inline-block;
        margin: 0;
    }
    #page_header .headerActions a:last-of-type {
        float:right;
    }
    #page_header .text-info {
        margin: 6px 0 0 0;
        float:none;
        text-align: center;
    }

    .cti .disposition>a.btn,
    .cti .disposition>span>a.btn {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

th,td {

}
.hidden {display:none}


#page_title
{
    margin-right: 6px;
    border-radius: 15px;
    position: absolute;
    right: 0px;
    color: #000 !important;
    top: 63px;
    font-size: 22px;
}

#page_title h1
{
    display:block;
    color:#FFF;
    margin-left:15px;
    padding-top:10px;
    margin-bottom:8px;
}

#page_title p
{
    display:block;
    color:#FFF;
    margin-left:15px;
    margin-top:3px;
}

#settings a {
    color:#000;
    border: none !important;
    border-radius: 8px !important;
    margin-right: 11px !important;
    background-color: #FFF;
    display: block;
    float:right;
    width:80px;
    height:40px;
    font-size:13px;
    line-height:40px;
    text-decoration:none;
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

#settings a:first-of-type {
    margin-right:0 !important;
}

#settings
{
    background-position: left !important;
    padding-left: 300px !important;
    background-image: url(../img/SliderGlow.png), url(../img/blueLight.png);
    background-repeat: repeat;
    padding: 10px !important;
    height:40px;
    border-radius:8px;
}



#connection_status {
    position: absolute;
}
#settings #extension {
    position: absolute;
    top: 104px;
    right: 0px;
}
#settings h2
{
    display:block;
    margin: 0 0 0 10px;
    padding: 6px 0 0 0;
    font-size:14px;
    float:left;
}

#settings p
{
    display:block;
    margin: 3px 10px 0px 0px ;
    padding: 3px 0 0 0;
    font-size:12px;
    float:right;
}
#settings_popup table {width:98%}
#settings_popup input
{float:right}
#settings_popup .close_button
{float:none !important
    }

#connection_status select
{
    margin: 15px 10px 0 0;
    padding: 0 0 0 0;
}

#buttons
{
    float: right;
    clear: both;
    text-align:center;
    font-size: 12px;
}

.settings .popup
{
    text-align:left;
    margin: 0 10px 10px 10px;
    background-color: #DCF5F9;
    right: 7px;
    padding: 15px;
    border:1px solid #11606C;
    position:absolute;

}

.popup table
{
    width: 100%
}

.status
{
    position: absolute;
    top: 0px;
    background-color: #FFD0D0;
    left:50%;
    margin-left:-40px;
    padding:4px;
    border:solid 1px #f00
}
table.main{width:100%;}
table.main td{vertical-align:top}
.left {
    padding: 10px 8px 8px 8px;
}

/* ===== Right Side Panels ===== */
.right {
    width: 350px;
    padding: 10px 8px 8px 8px;
}

.infoPanel {
    margin:20px 0 0 0;
}

.infoPanel h2 {
    background-color: #11606C;
    color: #FFF;
    margin:0;
    padding: 4px;
    border-radius:5px 5px 0 0;
    font-size: 13px;
    font-weight: normal;
}

.infoPanel .content {
    background:#DCF5F9;
    padding:4px;
}

/* Scheduled Calls Virtual Repeat */
.callbacks .rows            { border-top: 1px solid #ccc; }
.callbacks .row             { height:95px; clear:both; overflow:hidden; border-bottom:solid 1px #CCC; }
.callbacks .row.header      { height:initial; border-bottom: none; }
.callbacks .row>div         { display:table; height:100%; }
.callbacks .row>.buttons    { float:right; padding:0 15px; }
.callbacks .field           { display:table-cell; vertical-align: middle; padding:8px; }

/* State specific styles */
#scheduledCalls .scheduledCall.complete .msgComplete                {display:block;}
#scheduledCalls .scheduledCall.overdue .msgOverdue                  {display:block;}
#scheduledCalls .scheduledCall.dueNow .msgDue                       {display:block;}

#scheduledCalls .scheduledCall.complete > div:first-of-type         {background:#D8F598;}
#scheduledCalls .scheduledCall.overdue                              {border-color:#FF756B;}
#scheduledCalls .scheduledCall.overdue > div:first-of-type          {background:#FFD0D0; border-color:#FF756B; -webkit-animation: overdue 5s infinite alternate;}
#scheduledCalls .scheduledCall.dueNow > div:first-of-type           {background:#FFD0D0; border-color:#FFD06B; -webkit-animation: current 5s infinite alternate;}
#scheduledCalls .scheduledCall.dueSoon > div:first-of-type          {background:#FEE9BA; border-color:#FFD06B;}
#scheduledCalls .scheduledCall.dueLater > div:first-of-type         {background:#FEE9BA; border-color:#FFD06B;}
#scheduledCalls .scheduledCall.notDue > div:first-of-type           {background:#EAF1DB;}

#scheduledCalls .scheduledCall.complete .btnSCCall,
#scheduledCalls .scheduledCall.complete .btnSCRemove,
#scheduledCalls .scheduledCall.complete .btnSCDismis    {display:inline-block;}

#scheduledCalls .btnLoadMoreCallbacks               {display:block; text-align:center; text-decoration:none; margin:10px 0; color:#222;}



/* Enhance apperance in webkit */
@-webkit-keyframes current { 0% {background-color: #FEE9BA;} 100% {background-color: #FFD06B;} }
@-webkit-keyframes overdue { 0% {background-color: #FFBFBA;} 100% {background-color: #FF756B;} }

@-webkit-keyframes slideOut {
    0% {
        margin:5px 5px 0 5px;
        max-height: 80px;
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        margin:10px 5px 10px 5px;
        max-height:80px;
        transform:translateX(100%);
        opacity: 0;
    }
    100% {
        margin:0 5px 0 5px;
        max-height:0px;
        transform:translateX(100%);
        opacity:0;
    }
}
@-webkit-keyframes slideIn {
    0% {
        margin:0 5px 0 5px;
        max-height: 0px;
        transform: translateX(100%);
        opacity: 0;
    }
    50% {
        margin: 10px 5px 10px 5px;
        max-height:80px;
        transform:translateX(100%);
        opacity: 0;
    }
    100% {
        margin:5px 5px 0 5px;
        max-height:80px;
        transform:translateX(0);
        opacity:1;
    }
}

@-webkit-keyframes slideUp {
    0% {
        padding: 10px 0 0 0;
        max-height:20px;
        opacity:1;
    }
    50% {
        padding: 10px 0 0 0;
        max-height:20px;
        opacity:0;
    }
    100% {
        padding: 0 0 0 0;
        max-height:0;
        opacity:0;
    }
}
@-webkit-keyframes slideDn {
    0% {
        padding: 0 0 0 0;
        height:0px;
        opacity:0;
    }
    50% {
        padding: 10px 0 0 0;
        max-height:20px;
        opacity:0;
    }
    100% {
        padding: 10px 0 0 0;
        max-height:20px;
        opacity:1;
    }
}


/* Webkit Custom scrollbars */
.customScroll                                   {overflow-y:scroll; overflow-x:hidden; padding-right:4px;}
.customScroll::-webkit-scrollbar                {width: 8px;}
.customScroll::-webkit-scrollbar-track          {background-color:rgba(175,175,175,0.25); border-radius:4px;}
.customScroll::-webkit-scrollbar-thumb          {background-color:rgba(100,100,100,0.25); border-radius:4px;}
.customScroll:hover::-webkit-scrollbar-thumb    {background-color:rgba(100,100,100,0.75);}

/* Requeue Dialog */
.requeuePrivate             {width:100%; font-size:12px;padding:15px;}
.requeuePrivate .stdData,
.requeuePrivate .CTIData    {width:47%; height:400px; overflow-y:auto; overflow-x: hidden;}
.requeuePrivate .stdData    {float:left; width:47%; padding:0 3% 0 0;}
.requeuePrivate .CTIData    {float:left; width:47%; padding:0 10px 0 3%;}

.requeuePrivate h2                              {margin:5px 0 15px 0; border-bottom:1px solid #000;}
.requeuePrivate .inpWrap                        {margin-bottom: 10px;}
.requeuePrivate .inpWrap label                  {display:block; text-transform: capitalize; font-weight:bold;}
.requeuePrivate .inpWrap input,
.requeuePrivate .inpWrap select,
.requeuePrivate .inpWrap textarea               {margin:2px 0 0 0; width:90%; padding: 5px; border: 1px solid #C7C7C7; border-radius: 3px; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);}
.requeuePrivate .inpWrap select.timePicker      {width:auto;}
.requeuePrivate .inpWrap .timePickerSeperator   {margin:0 5px;}
.requeuePrivate .inpWrap .notes                 {height:100px;}
.requeuePrivate .CTIData .inpWrap label:after   {content:":";}
.requeuePrivate .buttons                        {clear:both; bottom: 10px; left: 10px; right:10px;}





.clear
{
	clear:both;
	margin:-40px;
}

.templates
{
	display:none;
}

.activeCalls {}

.callHistory
{
clear:right;
font-size: 11px;
}
table.ch
{width:100%}

.callHistory td
{
    padding:4px;}
.callHistory .title
{
    font-weight:bold;
    }
    .callHistory th{font-weight:normal}

.callHistory .main_title_url
{
    float:left;
    margin-right:5px;

    }
    .callHistory tr.Ringing
    {
        background-color: #F5E4E4
        }
    .callHistory tr.Up
    {
        background-color: #eaf1db
        }

.lastCall {font-size:11px;padding-bottom: 16px;display:none; background-color:#DCF5F9}
.lastCall .td {padding:6px;}
.lastCall .title {font-weight:bold}
.lastCall .val a, .channel_pop .val a, .requeueDialog a {font-size:11px;font-weight:bold; display:block;padding:6px;background-color:#c0c0c0;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:solid 1px #444;color:#FFF !important;text-decoration: none;text-align:center;float:left;margin-right:5px;}
.lastCall .val .diallernote, .channel_pop .val .diallernote {display: none}
.lastCall .val .diallernote.content, .channel_pop .val .diallernote.content { white-space: pre; border: 1px solid #11606c; padding: 2px }
.lastCall .val .diallernote textarea, .channel_pop .val textarea { white-space: pre; display:block; height: 64px; width: 100% }
.lastCall .val .diallernote.visible, .channel_pop .val .diallernote.visible {display: block}
.lastCall .actionBar, .channel_pop .actionBar {display: none}
.lastCall .actionBar.visible, .channel_pop .actionBar.visible {display: inline}
.channel_pop a
{
    color:Blue !important;
    }

.channel_pop
{
    font-size:11px;

    }

.channel .callBody {background-color: #f2f2f2; margin-top:24px; min-height: 120px;}

.channel .callHead {padding: 4px;}
.channel .callHead h2 {float:left; color:#fff; font-size:13px; margin:0;}
.channel .callHead .actionBar {float: right}
.channel .btn {
    display: block;
    margin-left:4px;
    float:right;
    margin-bottom:4px;
}
.channel .btn-group {
    display: block;
    margin-left:4px;
    float:right;
}


/* State specific styles */
/* Inbound Answered Calls */
.I-Up .callBody {background-color: #eaf1db;}
.I-Up .callHead {background-color:#8abd27;}
.I-Up .callHead .inbound {display:block;}
.I-Up .callHead .outbound {display:none;}
.I-Up .icon {height:120px; width:100px;	background: url(../img/inbound_green.png) center no-repeat;	float: left;}
.channel.historic .callHead {
    background-color: #AAA !important;
    height:40px;
}
.channel {
    padding:10px;
    border-radius:10px;
    margin-top:10px;
}
.channelContent {
    background-color:#FFF;
    padding:10px
}
.channelActions {
    float:right
}
.channel.historic .icon {
         -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}



/* Inbound Ringing Calls */
.I-Ringing {background-color: #f5e4e4;}
.I-Ringing .callHead {background-color:#d43f3e;}
.I-Ringing .callHead .inbound {display:block;}
.I-Ringing .callHead .outbound {display:none;}
.I-Ringing .icon {height:120px;	width:100px; background: url(../img/inbound_red.png) center no-repeat; float: left;}

/* Outbound Answered Calls */
.O-Up {background-color: #eaf1db;}
.O-Up .callHead {background-color:#8abd27;}
.O-Up .callHead .inbound {display:none;}
.O-Up .callHead .outbound {display:block;}
.O-Up .icon {height:120px; width:100px;	background: url(../img/outbound_green.png) center no-repeat; float: left;}

/* Outbound Ringing Calls */
.O-Ringing {background-color: #f4f0e0;}
.O-Ringing .callHead {background-color:#deb222;}
.O-Ringing .callHead .inbound {display:none;}
.O-Ringing .callHead .outbound {display:block;}
.O-Ringing .icon {height:120px;	width:100px; background: url(../img/outbound_orange.png) center no-repeat; float: left;}

.channel .calldata {float: left; width: 250px; padding: 10px 0 10px 10px; overflow:hidden;}

.channel .fromDesc {font-weight:bold; color:#666;}
.channel .from:before {content:"From: "; font-weight: bold;}
.channel .to:before {content:"To: "; font-weight: bold;}
.channel .stateStartTime {display:none;}

.channel .controls:before {content:"CTI Data: "; font-weight: bold;}
.channel .controls {margin-top:10px;}

.channel .controls a {float:left; color:#fff; border-radius:5px; margin: 5px 10px 0 0; background-color:#9E8B8B; display:block; padding:5px; text-decoration:none;}

.ctidata {float:right; width:430px; margin:10px 0px; padding: 0px 10px; overflow:hidden; border-left: 1px solid #116C23;}

.ctidata .match {}

.ctidata .title {font-size: 12px; font-weight: bold;}
.ctidata .title:after {content:":";}
.ctidata .val {font-size: 12px;}
.ctidata td {padding: 0 0 4px 0;}
.ctidata td {padding: 0 10px 4px 0;}




.agent_states {
    margin-left:48px;
    float:left;
    width:300px;
}

.queueMembership {font-size:13px;margin:6px 5px 0 80px;float:right}


/*dialog styling */
.ui-corner-all {border-radius:8px !important;-moz-border-radius:8px !important;-webkit-border-radius:8px !important;}
.ui-dialog {border:solid 6px #777 !important;padding:0px !important}
.ui-widget-header {font-size:14px;}
.ui-dialog-titlebar {
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}

.right h2
{
    background-color: #11606C;
    color: #FFF;
    padding: 4px;
    font-size: 13px;
    margin-bottom:0px;
    margin-top:20px;
    font-weight:normal;
    border-radius:5px 5px 0 0;
}

.setting_q_subscription                     {table-layout:fixed;}
.setting_q_subscription td:nth-of-type(2)   {width:115px;}
.setting_q_subscription span.emphasis       {font-weight:bold;}
.setting_q_subscription a                   {color:#000; display:block; height:40px; background:#fff; border-radius:8px; line-height:40px; text-decoration:none; font-size:13px; text-align:center; box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.queueMembership .q_roleQueues              {padding:0;}
.queueMembership span.title                 {padding:0; margin:5px 0; font-size:14px; font-weight:bold; display:block;}
.queueMembership td                         {vertical-align:middle !important;}

.endCall {
    float: left;
    display:none;
}
    .endCall a {
        width:24px;height:16.5px;
    text-decoration:none;
    background-image: url(../img/endCall.svg);
    background-size:24px 16.5px;
    background-repeat: no-repeat;
    display:block;
    margin-right:5px;
    }
I-Up .endCall, O-Up, .endCall {
    display:block !important;
}
.qRole {
    background-color: #DCF5F9;
}
.q_subscription {
    background-color: #DCF5F9;
    padding-bottom:8px;
}
.q_subscription table {
    margin:10px auto 5px auto;
}
.right {
    color: #11606C;
}
.requeueDialog {
    padding-top: 10px;
}
    .requeueDialog a {
        margin-top:20px;
    }

.requeueDialog .errorMessage {
    color: red;
}

.icon.recording {
    width: 0px; height: 0px; margin: 5px; border: 5px solid rgba(204,0,0,1); border-radius: 5px; float: right;
}
.icon.recording.disabled {
    border-color: rgba(204,0,0,0.25);
}
.icon.pause {
    width: 2px; height: 10px; border-left: 4px solid black; border-right: 4px solid black; float: right; margin: 5px; margin-left: 2px;
}
.icon.pause.disabled {
    border-color: rgba(0,0,0,0.25);
}
.callRecording .state { font-weight: bold }

.dateAndTimeInline table.timePicker {
    margin: 5px auto;
}
.dateAndTimeInline .btn-warning {
    float:right;
}

.collapsed_1, .collapsed_0, .collapsed_ ,
.collapsed_true, .collapsed_false {
    cursor:pointer;
    background-position:right 5px center;
    background-repeat:no-repeat;
}

.collapsed_1, .collapsed_true {
    background-image:url(../img/expand.png);
}

.collapsed_0, .collapsed_false, collapsed_ {
   background-image:url(../img/collapse.png);
}

.substate {
    float: right;
    padding-top: 10px;
    font-size: 13px;
    margin-right: 12px;
    color:#224;
}

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }


.autovshrink.ng-enter {
  transition:0.5s linear all;
  transform:scale(1,0);
  transform-origin:top left;
}

/* The finishing CSS styles for the enter animation */
.autovshrink.ng-enter.ng-enter-active {
    transform:scale(1,0);
}

/* now the element will fade out before it is removed from the DOM */
.autovshrink.ng-leave {
  transform-origin:top left;
  transition:0.5s linear all;
  transform:scale(1,1);
}
.autovshrink.ng-leave.ng-leave-active {
    transform:scale(1,0);
}





/* The starting CSS styles for the enter animation */
.autofade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.autofade.ng-enter.ng-enter-active {
  opacity:1;
}

/* now the element will fade out before it is removed from the DOM */
.autofade.ng-leave {
  transition:0.5s linear all;
  opacity:1;
}
.autofade.ng-leave.ng-leave-active {
  opacity:0;
}

/* The starting CSS styles for the enter animation */
.notification.ng-enter {
  transition:0.5s linear all;
  margin-right:-300px;
  opacity:0;
  box-shadow: 0px 0px 0px;
}

/* The finishing CSS styles for the enter animation */
.notification.ng-enter.ng-enter-active {
  margin-right:0px;
  opacity:1;
  box-shadow: 3px 3px 6px;
}

/* now the element will fade out before it is removed from the DOM */
.notification.ng-leave {
  transition:0.5s linear all;
  margin-right:0px;
  opacity:1;
  box-shadow: 3px 3px 6px;
}
.notification.ng-leave.ng-leave-active {
  margin-right:-300px;
  opacity:0;
  box-shadow: 0px 0px 0px;
}


th.sorted.rev_false a:after {
    content: url('../img/expand.png');
    margin-left:5px;
}
th.sorted.rev_true a:after {
    content: url('../img/collapse.png');
    margin-left:5px;
}
.callHistory table th a {
    cursor:pointer;

}
.callHistory table th a:hover {
    text-decoration:none;

}


.agentSettings {
    padding-left:10px;
    padding-top:15px;
    margin-left: 10px;
}
.queueSubscriptions .filter, .callbacks .filter {
    margin-top:20px;
    margin-bottom:10px;
    margin-left:10px;
}

.activeCalls .callHead {
    border-radius:20px 20px 0px 0px;
}
.activeCalls h4 {
    margin-top:15px;
    padding-top:5px;
}

.channel .channelContent h4 {
    margin-top: 0;
}

.cti .row {
    margin-left:-5px;
    margin-right:-5px;
    max-height: 415px;
    overflow-y: auto;
}
.ctifieldrow {
    padding:0 5px !important;
    margin-bottom:3px;
}
.ctifieldrow label {
    margin-bottom:2px;
    width: 100%;
}
.ctifieldrow input {
    width: 100% !important;
}

.ctiModal {
    padding:10px;
}
.dispositions {
    margin:15px 0px 15px 0px;
}