.progress-materializecss {position: fixed; top: 46px;  height: 2px;  display: block;  width: 100%;  background-color: #4a4d4f;  border-radius: 2px;   
overflow: hidden; box-shadow:0px 0px 10px 1px rgba(65, 69, 70, 0.7); z-index: 999}
.progress-materializecss .indeterminate {  background-color: #a28244;}
.progress-materializecss .indeterminate:before { content: "";  position: absolute;  background-color: inherit;  top: 0;  left: 0;  bottom: 0;  will-change: left, right;  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;}
.progress-materializecss .indeterminate:after {  content: "";  position: absolute;  background-color: inherit;  top: 0;  left: 0;  bottom: 0;  will-change: left, right;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;  animation-delay: 1.15s;}
@keyframes indeterminate {
0% {left: -35%; right: 100%;}
60% {left: 100%; right: -90%;}
100% {left: 100%;  right: -90%;  }
}
@keyframes indeterminate-short {
0% { left: -200%; right: 100%; }
60% {left: 107%;  right: -8%; }
100% { left: 107%;  right: -8%;  }
}

.apexcharts-toolbar{z-index: 0} 
.data_loading_progress_sec{margin-top: -8px; margin-left: 0px;}
.db_bx_ico{  position: absolute;  font-size: 10px;  top: 5px;  left:6px;}
.db_bx_ico.fa-headset{left: 4px;}
.db_bx_ico.fa-paper-plane{left: 5px;}
.db_bx_ico.fa-users{left: 5px;}
.lg_state_66{width:20px; height: 20px; }
.loadingkanban .spinner{width: 20px; height: 20px;}
.loadingkanban .spinner--2{border-top-color: #5a5b5e} 
.top_count_detail{margin-right: 10px; margin-top: 0px;} 
@media only screen and (max-width: 1350px) {
.top_count_detail{margin-right: 3px;}
}


.dashboard_filter_sec{background:#252728;  border-bottom: solid 1px #333;   padding-top:8px; padding-bottom:8px; position: fixed; width: 100%; top: 46px; z-index: 2 }
.dashboard_filter_sec.activeFilter{background: #3e2a0d, border-bottom: solid 1px #4e3410; }
.filter_section{width: 100%;}  


.filtercolumn { display: inline-block; width: auto;  vertical-align: middle;  margin-left: 10px;} 
.filtercolumn .btn-custom { letter-spacing: normal;  font-size: 13px; line-height: 26px;  text-align: center; background: #363839; border: solid 1px #363839;  color: #cdcdcd;
  height: 29px;  padding-left: 11px;  padding-right: 11px;  border-radius: 2px;  cursor: pointer;}

.filtercolumn .trans_btn { letter-spacing: normal;  color: #999;  font-size: 13px;  line-height: 26px; text-align: center;  background-color: transparent;  height: 28px;  padding-left: 0px;
  padding-right: 0px;   border: none;  cursor: pointer;  outline: none;}

.filtercolumn .isnot{  background: #ffffff14;   border-color: transparent;  color: #cdcdcd; display: inline-block;}
.filtercolumn .is{  background: #ffffff14;   border-color: transparent;  color: #cdcdcd; display: inline-block;}
.filtercolumn .is .trans_btn {color: #6f9446}
.filtercolumn .isnot .trans_btn {color: #bf6d56} 

.filterOptionDropdown{min-width: 500px; background: #464e57; box-shadow:0px 4px 7px #131111b3; border-radius: 6px; top: 8px!important;}
.filterOptionDropdown::after {
  width: 0;  height: 0;  border-left: 8px solid transparent;  border-right: 8px solid transparent;  border-bottom: 8px solid #464e57;  position: absolute;  top: -8px;  left: 25px;  content: ""; ;}

.filterOptionDropdown h5{font-size: 16px; font-weight: normal; color: #cdcdcd; padding: 10px 15px 15px; border-bottom: solid 1px #f0eded17}

.filterField{padding: 10px 25px 10px 15px; display: block}
.filterField label{color: #6e9ec7; font-size: 15px; margin-bottom: 5px;}
.filterField .form-control{background: #ffffff1f ; border: solid 1px #f7f3f31c; color: #cdcdcd;}
.filterField .form-control option{background: #4f5964;} 

.can-toggle {position: relative;}
.can-toggle *, .can-toggle *:before, .can-toggle *:after { box-sizing: border-box;}
.can-toggle input[type=checkbox] { opacity: 0; position: absolute; top: 0;  left: 0;}
.can-toggle input[type=checkbox][disabled] ~ label { pointer-events: none;}
.can-toggle input[type=checkbox][disabled] ~ label .can-toggle__switch { opacity: 0.4;}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:before { content: attr(data-unchecked);  left: 0;}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after {content: attr(data-checked);}
.can-toggle label { -webkit-user-select: none;  -moz-user-select: none;    -ms-user-select: none;   user-select: none; position: relative;  display: flex; align-items: center;}
.can-toggle label .can-toggle__label-text { flex: 1; padding-left: 32px;}
.can-toggle label .can-toggle__switch { position: relative;}
.can-toggle label .can-toggle__switch:before {  content: attr(data-checked);  position: absolute;  top: 0;    text-align: center;}
.can-toggle label .can-toggle__switch:after {content: attr(data-unchecked); position: absolute; z-index: 5;    text-align: center; background: #4f5459; transform: translate3d(0, 0, 0);}
.can-toggle input[type=checkbox][disabled] ~ label { color: rgba(119, 119, 119, 0.5);}  
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch { background-color: #ffffff1f;}
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after { color: #4fb743;}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch { background-color: #ffffff1f;}
.can-toggle input[type=checkbox]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type=checkbox]:checked:hover ~ label .can-toggle__switch:after { color: #47a43d;}
.can-toggle label .can-toggle__label-text {  flex: 1;}
.can-toggle label .can-toggle__switch {  transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);  background: #ffffff1f;}
.can-toggle label .can-toggle__switch:before {  color: rgba(255, 255, 255, 0.5);}
.can-toggle label .can-toggle__switch:after { transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);  color: #bf6d56;} 
.can-toggle input[type=checkbox]:checked ~ label .can-toggle__switch:after { transform: translate3d(65px, 0, 0);} 
.can-toggle label {  font-size: 14px;}
.can-toggle label .can-toggle__switch {  height: 36px;  flex: 0 0 134px;  border-radius: 4px;}
.can-toggle label .can-toggle__switch:before {  left: 67px;  font-size: 15px;  line-height: 36px;  width: 67px;  padding: 0 12px;}
.can-toggle label .can-toggle__switch:after { top: 2px; left: 2px;  border-radius: 2px;  width: 65px;  line-height: 32px;  font-size: 15px;} 


.autorefreshToggle{display: inline-block;}
.autorefreshToggle span{ font-size:13px; color:#b5b2b2; display:inline-block; vertical-align: middle; margin-right: 5px;}
.autorefreshToggle .custom-control{display: inline-block; vertical-align: middle;}
.autorefreshToggle .custom-control-label::before{background: #595959}

/* new css added for page*/ 

.dashabordWidgetSection h2{font-size: 18px; margin-bottom: 0px; } 
.dashabordWidgetSection h2.mainTitle{color: #818284}

.dynamicDtlBox{width: 100%; height: 100%; max-height: 700px; overflow:auto;    }
.addContentbx{border:dashed 1px #666; padding:37px 20px; border-radius: 10px; text-align: center; color: #666; font-size: 25px; margin-bottom: 20px;}

.datascreenHeight{max-height: calc(100vh - 115px); min-height: calc(100vh - 115px);} 
.middleblockheight{max-height: calc(100vh - 282px); min-height: calc(100vh - 282px);}

.ListTabledata{ max-height: calc(calc(100vh - 220px) / 2); min-height: calc(calc(100vh - 230px) / 2); overflow:auto; margin:0px -10px;  }
.ListTabledata .table{table-layout: auto;}
.ListTabledata table tr th{color: #cdcdcd;   font-weight: 600;  font-size: 18px;  border-top: none;  padding: 5px 4px;   padding-left: 4px; vertical-align: middle; position: sticky;
top: 0;    z-index: 1;  border-bottom: solid 2px #131517ad;    font-family: Comfortaa; background: #242628} 
.ListTabledata table tr:hover td { background: #ffffff0a;} 
.ListTabledata table tr td { color: #ffffff8c; border-top: solid 1px #131517ad; border-bottom: none; padding: 8px 4px;   position: relative; font-size: 12px; vertical-align: middle;}

.ListTabledata.dbCmpgntbl{max-height: calc(calc(100vh - 160px) / 2); min-height: calc(calc(100vh - 160px) / 2);}
.ListTabledata.callstatsTblDB{max-height: calc(100vh - 670px); min-height: calc(100vh - 670px);}

.campaignTitle{padding-left: 15px!important; width: 50%}
.campaignTitle a{color: inherit;} 
.campaignTitle span{font-size: 15px; max-width: calc(100% - 50px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: top}
.pending_cpunt{cursor: pointer;  background: #f2f2f21c;  padding: 2px 5px;  border-radius: 3px; font-size: 15px;}

.totalCountLink{background: transparent; color: #747eb5; border:solid 1px #5765b673}
.LiveCountLink{background: transparent; color: #95d09296; border:solid 1px #1f521e80}
.QueueCountLink{background: transparent; color:#9f8f5e; border:solid 1px #9c813547}

.didNumbercloumn{padding-left: 15px!important; width: 35%;}
.didNumbercloumn a{color: inherit;}

.callstatusColumn{padding-left: 15px!important; width: 40%}
.callstatusColumn a{color: inherit;}
.callstatusColumn span{font-size: 13px;  }

.rangebarSec{ width:30%; padding-left:20px!important;   }
.rangebarSec .progress{background: #e9ecef08; height: 10px}
.rangebarSec .progress .progress-bar{background: #3b3d3f}

.callstatsTblDB .rangebarSec{width: 28%;} 

.divider12{margin: 10px 0px; border-color: #dddddd1f}
 

.callsCounterwidget .cntrbx98{padding:0px 10px; display: inline-block; width: 32%; vertical-align: top; text-align: center}
.callsCounterwidget .cntrbx98 font{display: block; color: #fff; font-size: 20px;}
.callsCounterwidget .cntrbx98 span{display: block; color: #818284; font-size: 13px; line-height: normal; margin-top: 5px;}
.callsCounterwidget .cntrbx98.balance font{ color:#28a745d6  }
.callsCounterwidget .cntrbx98.totalcall font{color: #5765b6 }
.callsCounterwidget .cntrbx98.transfered font{color: #ffc107b8   }
.callsCounterwidget .cntrbx98.forwardcall font{color: #6774c0  }
.callsCounterwidget .cntrbx98.missedcall font{color: #dc3545b0   }
.callsCounterwidget .cntrbx98.runningcall font{color: #28a745d6   }


.keychartSection{display: block; width: 85%; margin: 0 auto;}
.keychartsblock{display: inline-block; width: 32%; text-align: center; vertical-align: top;} 


.userAddedContentBX{background: #313337;  padding: 8px;  border-radius: 6px; overflow: auto;}
.innerContantBlock{background: #242628; padding:10px; border-radius: 5px; display: block; margin-bottom: 15px; position: relative;}
.innerContantBlock h2{font-family: Comfortaa; font-size: 18px; margin: 0px; padding: 0px; color: #ffffffd6}

.addNewBlockSec{ text-align: center;   border-radius: 6px;  background: #242628}
.addNewBlockSec a{display: block; padding: 30px;}
.addNewBlockSec:hover{background: #242628}
.addNewBlockSec:hover a{color: #fff}
.blckeditBtn{ background:#393939; padding:2px 5px; font-size:11px; border:none; outline:none; color:#888; position: absolute;  right: 4px; top: 4px; border-radius: 4px; line-height:normal; }

.counterBlock {  padding: 10px;}
.counterBlock .counterTitle {  font-size: 15px;   color: #cdcdcd;  font-weight: normal;  margin: 0px;  padding: 0px;}
.counterBlock .countervalue { font-size: 32px;  line-height: normal;  color: #5765b6;}

.noDySecionMsg{padding-bottom: 15px;}

.queueFilter input:first-of-type:checked + label{background: #3c7cc1}
.queueFilter input:checked + label{background: #4b8e38}
.queueFilter label{padding: 6.5px 10px; margin-bottom: 0px; background: #363839}


.DBdurationBarChart{padding-left: 20px; padding-right: 20px; padding-top: 22px;}
.DBdurationBarChart .columns{display: flex;  height:140px; align-items: stretch;  max-width: 100%; padding-bottom: 30px; position: relative; padding-left: 10px;}

.DBdurationBarChart .columns:after{width: calc(100% - 10px); position: absolute; bottom: 30px; left: 5px; height: 1px; background: #888; content: ""}
.DBdurationBarChart .columns:before{ position:absolute; right:5px; height:5px; width:1px; background:#888; content:""; bottom:26px;  }

.DBdurationBarChart .column-container { flex: 1;  display: flex;  flex-direction: row;  align-items: end;   position: relative;  transition: all .2s; padding-left: 7px; padding-right: 7px;}

.DBdurationBarChart .column-container:after{ position:absolute; left:-5px; height:5px; width:1px; background:#888; content:""; bottom:-5px;  }
.DBdurationBarChart .column-bar{background: #057fdb; position: relative; width: 50%; border-right: solid 8px} 
.DBdurationBarChart .column-bar .counterVlu23{position: absolute;  top: -23px;  background: #3b3d3f;  width: 100%;  text-align: center;  border-radius: 4px; color: #cdcdcd; cursor: pointer; font-size: 11px;}
.DBdurationBarChart .labeltext{color: #888; position: absolute; bottom: -45px; text-align: center;   width: 100%; height: 40px; left: -5px; font-size: 11px; line-height: normal;}
.calldurationColumn{background: #673AB7!important}
.talkdurationcolumn{background: #607D8B!important}

.chartindicator{ color: #888; display: inline-block; float: right}
.chartindicator span{margin-left: 5px;}
.chartindicator span.call i{color: #673AB7 }
.chartindicator span.talk i{color: #607D8B  }


.QueDuation{padding-left: 20px!important; width: 50%;}
.QueDuation font{color: #d5ae3b;  font-size: 18px;  margin-right: 5px;  display: inline-block;  width: 35px;}
.QueDuation span{ font-size:15px; }

.queueRecordTbl{  min-height: calc(100vh - 540px); max-height: calc(100vh - 540px);}
.queueRecordTbl table tr th.otherfield{font-size: 12px; font-family:roboto; font-weight: normal; color: #cdcdcd; vertical-align: bottom; text-align: center;}
.queueRecordTbl table tr td{vertical-align: middle;}
.queueRecordTbl .campaignTitle{padding-top: 0px; padding-bottom: 13px; padding-top: 4px; width: 80px;}
.queueRecordTbl .campaignTitle font{margin-top: 0px; color: #6a6a6a; display: block; opacity: 0; position: absolute; bottom: 0px;}
.queueRecordTbl tr:hover .campaignTitle font{opacity:1;}
.queueRecordTbl .campaignTitle a{display: block;}
.queueRecordTbl .fldcountre{font-size: 15px;}
.queueRecordTbl .campaignTitle span{max-width: calc(100% - 1px)} 
.queueRecordTbl .count{display: inline-block; background: #333; font-size: 12px; padding: 2px 4px; border-radius: 4px; text-align: center;  display: inline-block;}
.queueRecordTbl .count.added{color: #007bff}
.queueRecordTbl .count.assign{color:#775dd0 }
.queueRecordTbl .count.connect{color:#28a745 }
.queueRecordTbl .count.drop{color:#dc3545 }
.queueRecordTbl .count.pending{color:#d87834 }


.campaignRecordtble .campaignTitle{width: 40%; padding-bottom: 13px!important}
.campaignRecordtble .campaignTitle span{max-width: 120px}
.campaignRecordtble .campaignTitle font{ display:block; margin-top:0px; line-height:normal; position:absolute; bottom:1px; opacity:0; color: #6a6a6a; }
.campaignRecordtble tr:hover .campaignTitle font{opacity: 1}

.livecallSparkChart{width: 180px; float: right; position: absolute; bottom: 0px; right: 0px;} 
 

@media  (max-height: 850px) {  
.ListTabledata{min-height: 395px; max-height: 395px}
.ListTabledata.callstatsTblDB{min-height: 340px; max-height: 340px;}
.queueRecordTbl{min-height: 440px; max-height: 440px;}
.datascreenHeight{min-height: 892px; max-height: 892px;}
.DBdurationBarChart .columns{height: 170px;}
}  

.totalCountColumn{text-align: left; width: auto; min-width: 80px;} 
/* .totalCountSec{display: inline-block; width: 46px;} */
/* .totalCountSec{width: 46px;} */
.totalCountColumn .overrallPer{font-size: 12px; color: #818284;  }
.liveCountColumn{text-align: center;}
.queueCountColumn{text-align: center}

.comparePerctng{padding-left: 0px!important; padding-right: 0px!important;}
.comparePerctng span{line-height: 11px; display: inline-block; font-size: 11px; color: #818284; text-align:center; }
.comparePerctng span i{font-size: 18px; line-height: 2px; color: #4b4f4d;}


/*css for phone mockup*/
.phoneMockup { position: relative;  width: 100%; height: 380px; background-color: #242628;  margin: 0 auto;  border-radius: 5px;  box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #313337;}
.phoneMockup:after, .phoneMockup:before{ content: '';   position: absolute;  left: 50%;  transform: translateX(-50%);}
.phoneMockup:before{top: -13px;  width: 56%;   height: 22px;  background-color: #1f1f1f; border-radius: 0px 0px 40px 40px;}
.phoneMockup i, .phoneMockup b { position: absolute;  display: block;  color: transparent;}
.phoneMockup  i { top: -13px;  left: 50%;  transform: translate(-50%, 6px); height: 8px;  width: 15%; background-color: #101010; border-radius: 8px; box-shadow: inset 0px -3px 3px 0px rgba(256, 256, 256, 0.2); }
.phoneMockup  b { left: 63%;  top: -13px;  transform: translate(0px, 4px);  width: 12px;  height: 12px;  background-color: #101010;  border-radius: 12px;   box-shadow: inset 0px -3px 2px 0px rgba(256, 256, 256, 0.2);}
.phoneMockup  b:after{content: '';   position: absolute;  background-color: #2d4d76;  width: 6px;  height: 6px;   top: 2px;  left: 2px;  top: 3px;  left: 3px;  display: block; border-radius: 4px;
    box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);}
.keytitle{   color: #cdcdcd59;  text-align: center;  font-family: Comfortaa; font-size: 15px;padding-top: 10px;} 
/*css for phone mockup*/


.detailSidebarSlider { position: fixed; top: 47px; color: #4487EF; right: -75%; width: 75%; height: calc(100vh - 47px); padding-bottom: 20px;   background: #2E3034;   
    padding:15px 0px 50px 0px; box-shadow: -5px 0 5px -3px #161515; transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s; z-index: 1; padding-top: 10px; overflow: inherit;}
.showSidebar{  right: 0px!important; z-index: 2}
.detailSidebarSlider h3{ font-size: 18px; font-weight: 400; margin-bottom: 20px; margin-top: 0px; padding-right: 8px ;}
.detailSidebarSlider .closeLCBtn{ font-size: 18px;  cursor: pointer;  float: right;  margin-right:0px;  background: #ffffff14; padding: 4px 10px; line-height: normal;  border-radius: 4px;}

@media only screen and (max-width: 1400px) {
    .QALogreportAside {
      right: -90%; width: 90%; 
    }
  }
.closingAsider{width: 100%; height: 100%; position: fixed; left: 0%; top: 0; content: ""; opacity: 0; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; transition: all .5s}
.closingAsider.show{ opacity:1 ; visibility: visible; z-index: 2}

/*right total log slider*/ 
.totalLogreportAside .general_report_page {min-height: 78vh; max-height: 78vh; overflow: auto;}
.totalLogreportAside .general_report_page tr th{position: sticky; top: 0px; z-index: 99}
.totalLogreportAside .general_report_page tr td{padding: 4px 8px!important;}
.totalLogreportAside .mx100elpsis{max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
.totalLogreportAside .callIDblock{color: #888; font-size: 11px; opacity: 0; padding-top: 2px;}
.totalLogreportAside .callIDblock font{color: #acacac;}
.totalLogreportAside .general_report_page tr:hover .callIDblock{opacity: 1} 
.totalLogreportAside .filterReqColmn{ line-height:normal; min-width:140px; position: relative; max-width: 140px; padding-left: 15px!important; padding-right: 0px!important}
.totalLogreportAside .filterReqColmn code{font-size: 12px; font-weight: 600;color: #a6a6a7;}
.totalLogreportAside .filterReqColmn:after{position: absolute; left: 0px; top: -1px; color: #cdcdcd5c; font-size: 28px; content: "{"}
.totalLogreportAside .filterReqColmn:before{position: absolute; right: 0px; top: -1px; color: #cdcdcd5c; font-size: 28px; content: "}"} 
.totalLogreportAside .filterReqColmn .text-red{color: #dc3545;} 
.totalLogreportAside .StrategyDtl{padding-left: 10px; color: #cdcdcd}
.totalLogreportAside .StrategyDtl font{color: #ffffff8c}   
.totalLogreportAside .callerDtlColumn{position: relative; min-width: 155px;}
.totalLogreportAside .qStatusTag{position: absolute; width: 5px; height: 100%;  left:0px; top:0px; transition:all .1s  }
.totalLogreportAside .qStatusTag:after{position: absolute; left: 5px;  top:24px; font-size: 14px; color: #fff;   width: 0px; overflow: hidden;}
.totalLogreportAside .qStatusTag:hover {width: 80px;}
.totalLogreportAside .qStatusTag:hover:after{ width: 100%;}
.totalLogreportAside .qStatusTag.inqueue{ background: #f7aa19; }
.totalLogreportAside .qStatusTag.dropped{ background: #954242; }
.totalLogreportAside .qStatusTag.completed{ background: #46794e; }
.totalLogreportAside .qStatusTag.inqueue:after{ content:"In Queue" }
.totalLogreportAside .qStatusTag.dropped:after{ content:"Dropped" }
.totalLogreportAside .qStatusTag.completed:after{ content:"Completed" }
.totalLogreportAside  .qStatusTag:after{ top:20px; }
 
.totalLogreportAside .caller_number_2x{color: #747eb5}
.totalLogreportAside .queueOver .caller_number_2x{color: #b9b7b7}
.totalLogreportAside .highlghtBg{background: #3d3e40} 
.totalLogreportAside .borderRight .duration_text{font-size: 17px!important; color:#747eb5; font-family: monaco, courier !important; font-weight: bold; padding: 2px 8px; border-radius: 4px; background: #2d2f2f}
.totalLogreportAside .borderRight .duration_text font{ color:#777 }
.totalLogreportAside .queueOver .borderRight .duration_text{background: none} 
.totalLogreportAside .queueOver .borderRight .duration_text{ color:#ffffff8c }
.totalLogreportAside .queueOver .highlghtBg{background: #353535}
.totalLogreportAside .showAgents { background:#656d9a; color:#ffffffb0; padding:0 5px; border-radius:5px; display:inline-block; text-align:center; min-width:30px; vertical-align:initial; font-size:12px; cursor:pointer;}  
.totalLogreportAside .sourceText font{ font-size:12px; color:#656363; vertical-align:middle; }
.totalLogreportAside .sourceText.group span, .sourceText.group a, .sourceText.agent span, .sourceText.agent a{text-transform:capitalize; text-overflow:ellipsis; white-space:nowrap; display:inline-block; overflow:hidden; width:90px; vertical-align:middle; font-size: 14px;}
.totalLogreportAside .sourceText.group span, .sourceText.group a{ color:#7080db; }
.totalLogreportAside .sourceText.agent span, .sourceText.agent a{color: #656d9a;} 
.totalLogreportAside .SecRprtDtl{ display:block ; color: #ffffff8c}
.totalLogreportAside .tgshj{background: #8086864a; color: #8c9495; font-size: 11px; display: inline-block; padding: 2px 8px; border-radius: 4px; margin-right: 5px;}
.totalLogreportAside .SecRprtDtl font {color: #747eb5; margin-top:3px; font-size:15px; text-transform: capitalize; font-family: Comfortaa; font-weight: bold; vertical-align: middle; display: block;} 
.totalLogreportAside .cliTag{display: inline-block; padding: 2px 4px;background: #666; border-radius: 4px; line-height: normal; font-size: 11px}
.totalLogreportAside .sourceTag{color: #656363}
.totalLogreportAside .ivrTag{padding: 0px 5px; background: #424344; border-radius:4px; font-size: 11px; display: inline-block; color: #cdcdcd; text-decoration: none}
.totalLogreportAside .ivrTag:hover{color: #fff} 
.totalLogreportAside .textCamapaign {color: #7080db}
.totalLogreportAside .textDid {color: #656d9a;  font-size: 15px;} 
/*right total log slider*/


/*right queue log slider*/ 
.QALogreportAside .general_report_page {min-height: 78vh; max-height: 78vh; overflow: auto;}
.QALogreportAside .general_report_page tr th{position: sticky; top: 0px; z-index: 99}
.QALogreportAside .general_report_page tr td{padding: 4px 8px!important;}
.QALogreportAside .mx100elpsis{max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
.QALogreportAside .callIDblock{color: #888; font-size: 11px; opacity: 0; padding-top: 2px;}
.QALogreportAside .callIDblock font{color: #acacac;}
.QALogreportAside .general_report_page tr:hover .callIDblock{opacity: 1} 
.QALogreportAside .filterReqColmn{ line-height:normal; min-width:140px; position: relative; max-width: 140px; padding-left: 15px!important; padding-right: 0px!important}
.QALogreportAside .filterReqColmn code{font-size: 12px; font-weight: 600;color: #a6a6a7;}
.QALogreportAside .filterReqColmn:after{position: absolute; left: 0px; top: -1px; color: #cdcdcd5c; font-size: 28px; content: "{"}
.QALogreportAside .filterReqColmn:before{position: absolute; right: 0px; top: -1px; color: #cdcdcd5c; font-size: 28px; content: "}"} 
.QALogreportAside .filterReqColmn .text-red{color: #dc3545;} 
.QALogreportAside .StrategyDtl{padding-left: 10px; color: #cdcdcd}
.QALogreportAside .StrategyDtl font{color: #ffffff8c}   
.QALogreportAside .callerDtlColumn{position: relative; min-width: 155px;}
.QALogreportAside .qStatusTag{position: absolute; width: 5px; height: 100%;  left:0px; top:0px; transition:all .1s  }
.QALogreportAside .qStatusTag:after{position: absolute; left: 5px;  top:24px; font-size: 14px; color: #fff;   width: 0px; overflow: hidden;}
.QALogreportAside .qStatusTag:hover {width: 80px;}
.QALogreportAside .qStatusTag:hover:after{ width: 100%;}
.QALogreportAside .qStatusTag.inqueue{ background: #f7aa19; }
.QALogreportAside .qStatusTag.dropped{ background: #954242; }
.QALogreportAside .qStatusTag.completed{ background: #46794e; }
.QALogreportAside .qStatusTag.inqueue:after{ content:"In Queue" }
.QALogreportAside .qStatusTag.dropped:after{ content:"Dropped" }
.QALogreportAside .qStatusTag.completed:after{ content:"Completed" }
.QALogreportAside  .qStatusTag:after{ top:20px; }
.queueIndicator{display: inline-block;}
.queueIndicator ul{list-style: none; margin: 0px; padding: 0px;}
.queueIndicator ul li{display: inline-block; margin-right: 10px; font-size: 12px; color: #cdcdcd;}
.queueIndicator ul li span{display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #fff;}
.queueIndicator ul li.queue span{background:#f7aa19 }
.queueIndicator ul li.drop span{background:#954242 }
.queueIndicator ul li.complete span{background:#46794e } 
.QALogreportAside .caller_number_2x{color: #e1b440}
.QALogreportAside .queueOver .caller_number_2x{color: #b9b7b7}
.QALogreportAside  .highlghtBg{background: #3d3e40} 
.QALogreportAside  .borderRight .duration_text{font-size: 17px!important; color:#ab8a31; font-family: monaco, courier !important; font-weight: bold; padding: 2px 8px; border-radius: 4px; background: #2d2f2f}
.QALogreportAside  .borderRight .duration_text font{ color:#777 }
.QALogreportAside  .queueOver .borderRight .duration_text{background: none} 
.QALogreportAside .queueOver .borderRight .duration_text{ color:#ffffff8c }
.QALogreportAside .queueOver .highlghtBg{background: #353535}
.QALogreportAside  .showAgents { background:#6c5b25; color:#ffffffb0; padding:0 5px; border-radius:5px; display:inline-block; text-align:center; min-width:30px; vertical-align:initial; font-size:12px; cursor:pointer;}  
.QALogreportAside  .sourceText font{ font-size:12px; color:#656363; vertical-align:middle; }
.QALogreportAside  .sourceText.group span, .sourceText.group a, .sourceText.agent span, .sourceText.agent a{text-transform:capitalize; text-overflow:ellipsis; white-space:nowrap; display:inline-block; overflow:hidden; width:90px; vertical-align:middle; font-size: 14px;}
.QALogreportAside  .sourceText.group span, .sourceText.group a{ color:#c08237; }
.QALogreportAside  .sourceText.agent span, .sourceText.agent a{color: #a18d3d;} 
.SecRprtDtl{ display:block ; color: #ffffff8c}
.tgshj{background: #8086864a; color: #8c9495; font-size: 11px; display: inline-block; padding: 2px 8px; border-radius: 4px; margin-right: 5px;}
.SecRprtDtl font {color: #d7aa41; margin-top:3px; font-size:15px; text-transform: capitalize; font-family: Comfortaa; font-weight: bold; vertical-align: middle; display: block;} 
.QALogreportAside   .cliTag{display: inline-block; padding: 2px 4px;background: #666; border-radius: 4px; line-height: normal; font-size: 11px}
.QALogreportAside .sourceTag{color: #656363}
.QALogreportAside   .ivrTag{padding: 0px 5px; background: #424344; border-radius:4px; font-size: 11px; display: inline-block; color: #cdcdcd; text-decoration: none}
.QALogreportAside   .ivrTag:hover{color: #fff} 
.QALogreportAside .textCamapaign {color: #c08237}
.QALogreportAside .textDid {color: #a18d3d;  font-size: 15px;} 
/*right queue log slider*/

/*livecall log slider*/
 
.SidebarLivecallLog .general_report_page{  min-height: calc(100vh - 180px);}
.SidebarLivecallLog .general_report_page table tr:hover td, .SidebarLivecallLog .recentCallTable table tr.active td{background: #28292b}
.SidebarLivecallLog .duration_text{font-size: 15px!important; color:#4b8f4b; font-family: monaco, courier !important; font-weight: bold;  }
.SidebarLivecallLog .connectedagent font{text-align: center;  min-width: 30px; display: inline-block;   font-size: 22px;  cursor: pointer; vertical-align: top; line-height: normal; color: #cdcdcd}
.SidebarLivecallLog .connectedagent span{font-size: 11px; display: inline-block; line-height: normal; vertical-align: top}
.SidebarLivecallLog table tr td a{color: inherit;}
.dtlarrowBtn{color: #5d5e60}
.SidebarLivecallLog .general_report_page table tr:hover .dtlarrowBtn{color: #cdcdcd}
.SidebarLivecallLog .general_report_page table tr.active .dtlarrowBtn{color: #498a49}
.SidebarLivecallLog .callerDtlColumn{max-width: 200px; width: 200px; padding-right: 0px!important;}
.SidebarLivecallLog .mx100elpsis{max-width: 125px;}

.SidebarLivecallLog .callIDblock{color: #888; font-size: 11px; opacity: 0; padding-top: 2px;}
.SidebarLivecallLog .callIDblock font{color: #acacac;}
.SidebarLivecallLog tr:hover .callIDblock{opacity: 1} 

.SidebarLivecallLog .C_alldetailSec{background:#28292b; height: calc(100vh - 180px); border:solid 1px #444444a8; border-left: 0px; padding:10px 10px 10px 18px; overflow:auto;  }
.SidebarLivecallLog .C_alldetailSec .callerNumber{ font-size:20px; color:#4b8f4b ; line-height:normal; }
.SidebarLivecallLog .actn_Btn{ display:block; }
.SidebarLivecallLog .actn_Btn button{background: #202223; font-size: 13px; padding: 2px 7px; border-radius: 4px; margin-left: 4px; border: none; outline: none; color: #cdcdcdcc;}
.SidebarLivecallLog .actn_Btn button.active{color: #d7aa41}

.SidebarLivecallLog .spyActinSec{display: block; margin:5px 0px;}
.SidebarLivecallLog .spyActinSec input{ display:inline-block; width:110px; padding:1px 7px; font-size:15px; border:solid 1px #666; outline:none; background:#353736; color:#cdcdcd; 
border-radius: 3px; }
.SidebarLivecallLog .spyActinSec button{background: #46494c; outline: none; border:none; padding: 4px 8px; margin-left: 2px; color: #cdcdcd; font-size: 12px; border-radius: 3px;}

.SidebarLivecallLog .call_detail_list45 li label{font-size: 15px;}
.SidebarLivecallLog .call_detail_list45 li .agent_name_89{font-size: 15px; color:#4b8f4b }

.SidebarLivecallLog .call_flow_timline{margin-left: 0px; padding-left: 50px; padding-bottom: 15px;}
.SidebarLivecallLog .call_flow_timline li::after{left:7px; border-color: #5d5e60}
.SidebarLivecallLog .call_flow_timline li font.t_node_id{left: -30px; color: #5d5e60} 
.SidebarLivecallLog .call_flow_timline::after{left: 63px; height: 90%; background: #5d5e60}

.SidebarLivecallLog .pagginSection{padding-top: 15px; border-top: solid 1px #4a4a4a;}
.SidebarLivecallLog .callFlowSection{background: #232323}
.SidebarLivecallLog .liveCDtlPart{max-width: 370px;}

.SidebarLivecallLog .SecRprtDtl font {color: #4b8f4b; margin-top:3px; font-size:15px; text-transform: capitalize; font-family: Comfortaa; font-weight: bold; vertical-align: middle; display: block;}
.SidebarLivecallLog .call_detail_list45 li .detail_Sec{color: #4b8f4b}

.SidebarLivecallLog .call_detail_list45 li label i{color: #5d5e60}