@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;700&display=swap');
 
 
a{text-decoration: none; }
a:hover{text-decoration: none;}
a:focus{outline: none;}
/* CSS Top */

body{font-family: 'Roboto', sans-serif!important; margin: 0px; padding: 0px; background: #141618; line-height: 1.5; font-size: 12px;}

button:hover, button:focus{outline: none;}

.no-bg{background: none!important}
.no-caret:after{display: none;}
.slash_ico{position: relative;}
.slash_ico:after{position: absolute; left: 0px; top: 0px; content: "\f715";  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 9px;}
.l_height_normal{line-height: normal;}

.f_weight_bold{font-weight: bold!important}
.f_weight_normal{font-weight: normal!important}
.f_weight_100{font-weight: 100!important}
.f_weight_300{font-weight: 300!important}
.f_weight_400{font-weight: 400}
.f_weight_500{font-weight: 500}

.f_arial{font-family: Arial!important}
.f_courier{font-family: monaco, courier!important}


.f_size_9{font-size: 9px!important; }
.f_size_10{font-size: 10px!important; }
.f_size_11{font-size: 11px!important; }
.f_size_12{font-size: 12px!important; }
.f_size_13{font-size: 13px!important; }
.f_size_16{font-size: 16px!important;}
.f_size_17{font-size: 17px!important;}
.f_size_14{font-size: 14px!important;}
.f_size_15{font-size: 15px!important;}
.f_size_18{font-size: 18px!important;}
.f_size_13{font-size: 13px!important;}
.f_size_12{font-size: 12px!important;}
.f_size_20{font-size: 20px!important;}
.f_size_22{font-size: 22px!important;}
.f_size_24{font-size: 24px!important;}
.f_size_28{font-size: 28px!important;}
.f_size_32{font-size: 32px!important;}
.f_size_35{font-size: 35px!important;}

.c-pointer{cursor: pointer;}

.btn-sm{padding: 5px 10px;}

.custom_btn.btn-primary{background: #007bff42; border-color: #007bffa6}
.custom_btn.btn-success{background: #28a74594; border-color: #28a745d6}
.custom_btn.btn-warning{background: #8e6122; border-color: #bd8f4e; color:#fdfdfd }
.custom_btn.btn-warning:focus, .custom_btn.btn-warning:active:focus{  color:#fdfdfd }
.custom_btn.btn-secondary{background: #6c757d54; border-color: #6c757d}

.custom_btn.btn-danger{background: #dc354594; border-color: #dc3545a8;}
.custom_btn.btn-info{background: #17a2b87d; border-color: #17a2b8cf;}

.btn-notice{background: #c56b21; border-color: #c56b21; color: #fff;}
.btn-notice:hover, .btn-notice:focus{color: #fff; box-shadow: none; outline: none;}

.btn-link:hover, .btn-link:visited{text-decoration: none;}

.m-w-80 {max-width: 80px !important;}
.m-w-100 {max-width: 100px !important;}
.m-w-150 {max-width: 150px !important;}
.m-w-200 {max-width: 200px !important;}
.mw_180{min-width: 180px;}
.mw_100{min-width: 100px;}
.mw_40{min-width: 40px;}

.h_text_blue{color: #04a8f4}
.h_text_yellow{color: #fcbf0c}
.h_text_green{color: #539453} 


.text_m_green{color: #59a359}
.text_m_red{color: #c94c4c}

.text_k_yellow{color: #d5ae3b ;}
.text_dark{color: #333!important}
.text_d_light{color: #cdcdcd;}
.text_m_light{color: #818284 }
.text_theme{ color: #1976d2!important }
.text_light_blue{color: #3a61a9 !important}
.text_light_red{color: #ef4f4f!important}
.text_amber{color: #ffa000!important;}
.text_l_green{color: #22d74b !important;}
.text_l_danger{color: #e07680 !important}
.bg_theme{ background: #1976d2!important }
.text_l_yellow{color: #d5ae3b !important}
.bg-light-blue{ background: cornflowerblue!important }
.text_m_blue{color: #5394da;}
.bg-green{background: #2b873e!important }
.btn-xs{padding:3px 10px; font-size: 12px; line-height: normal; border-radius: 5px;}
.btn{cursor: pointer;}

.text_blue_light{color:#68a2e0}
 
/*customized button css */
.btn-rounded {border-radius:10em!important; -moz-border-radius:10em; -webkit-border-radius:10em; }
.btn-rounded.btn-sm{padding: 5px 15px!important;}

.btn-unique{background: #880e4f!important; color: #fff!important; border:none;}
.btn-pink{background: #ec407a !important; color: #fff!important; border:none;}
.btn-purple{background: #8e24aa!important; color: #fff!important; border:none;}
.btn-deep-purple{background: #512da8!important; color: #fff!important; border:none;}
.btn-indigo{background: #3f51b5 !important; color: #fff!important; border:none;}
.btn-light-blue{background: #82b1ff!important; color: #fff!important; border:none;}
.btn-light-cyan{background: #00bcd4 !important; color: #fff!important; border:none;}
.btn-light-dark-green{background: #388e3c !important; color: #fff!important; border:none;}
.btn-light-light-green{background: #8bc34a !important; color: #fff!important; border:none;}
.btn-light-yellow {background: #fbc02d !important; color: #fff!important; border:none;}
.btn-light-amber {background: #ffa000 !important; color: #fff!important; border:none;}
.btn-light-deep-orange  {background: #ff7043 !important; color: #fff!important; border:none;}
.btn-light-btn-brown {background: #795548 !important; color: #fff!important; border:none;}
.btn-light-mdb-color {background: #3b414d  !important; color: #d6d1d1!important; border:none;}
.btn-blue-grey{background: #78909c !important; color: #fff!important; border:none;}

.btn-ch_red{background: #b83831 !important; color: #fff!important; border:none;}
.btn-ch_red:focus, .btn-ch_red:hover{box-shadow: none;}

.peach-gradient{ background: linear-gradient(40deg,#ffd86f,#fc6262) !important; background: -webkit-linear-gradient(50deg,#ffd86f,#fc6262) !important; background: -o-linear-gradient(50deg,#ffd86f,#fc6262) !important ; border:none;}
.purple-gradient{background: linear-gradient(40deg,#ff6ec4,#7873f5) !important; background: -o-linear-gradient(50deg,#ff6ec4,#7873f5) !important; background: -webkit-linear-gradient(50deg,#ff6ec4,#7873f5) !important; border:none;}
.blue-gradient{background: linear-gradient(40deg,#45cafc,#303f9f) !important; background: -o-linear-gradient(50deg,#45cafc,#303f9f) !important; background: -webkit-linear-gradient(50deg,#45cafc,#303f9f) !important; border:none;}
.aqua-gradient{background: linear-gradient(40deg,#2096ff,#05ffa3) !important; background: -o-linear-gradient(50deg,#2096ff,#05ffa3) !important; background: -webkit-linear-gradient(50deg,#2096ff,#05ffa3) !important; border:none;}
 

.btn-floating{box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);  width: 47px; height: 47px; position: relative; z-index: 1; vertical-align: middle; border-radius: 50%; padding: 0px; transition: all .2s ease-in-out; overflow: hidden;}
.btn-floating.sm{width: 30px; height: 30px; font-size: 12px;}
.btn-floating.xs{width: 20px; height: 20px; font-size: 12px; line-height: 20px;}
.btn-floating.md{width: 40px; height: 40px; font-size: 12px;}

.ripple{ position:relative;   overflow:hidden;  transform:translate3d(0,0,0)}
.ripple:focus, .ripple:active, .ripple:hover{box-shadow: none!important;}
.ripple:after{  content:"";   display:block;  position:absolute;  width:100%;  height:100%;  top:0;  left:0; pointer-events:none;  background-image:radial-gradient(circle,#000 10%,transparent 10.01%);
background-repeat:no-repeat; background-position:50%;  transform:scale(10,10);  opacity:0; transition:transform .5s,opacity 1s}
.ripple:active:after{  transform:scale(0,0);  opacity:.2;  transition:0s}

.custom-gray-outline{border:solid 1px #ddd; border-radius: 0px; height: 45px; background: none}
.custom-gray-outline:hover, .custom-gray-outline:focus, .custom-gray-outline:active{background: none!important; color: #333!important; border-color: #ddd!important; box-shadow: none!important}
.custom-gray-outline:after{position: absolute; right: 10px; top: 20px;}

/*customized button css */

/*header css*/
.sarv_header { display: block;  position: fixed;  top: 0px;  left: 0px;  width: 100%; padding: 0; background: #27292b;  z-index:5; box-shadow: 0px 0px 8px 2px #00000070}

.sarv_header .navbar{padding: .2rem 1rem}
.sarv_header .navbar-toggler{color: #ffffffb3;}

.sarv-logo {display: inline-block;}
.sarv-logo img {width: 100px; max-height: 30px;}
 
.sarv_db_menu{margin-left: 25px;} 
.sarv_db_menu li a{font-size: 13px; color: rgba(256,256,256,.8); font-weight: 400; }
.sarv_db_menu li a i{margin-right: 3px;}
.sarv_db_menu li a.nav-link{padding: .5rem .5rem!important}
.sarv_db_menu li a:hover{color: #fff;}

.sarv_db_menu li.nav-item.show a.nav-link{color: #fff;}
.sarv_db_menu li.nav-item.show a.nav-link i{color: #356bad;}

.sarv_header ._user_link{font-size: 15px; color: #fff;}
.sarv_header ._user_link span{display: inline-block; width: 22px; height: 22px; line-height: 22px; font-size: 12px; background: #166fce; border-radius: 50%; text-align: center;  margin-right: 5px;} 

 

 
.icon_link_menu {display: none!important;} 

@media only screen and (max-width: 1505px) {
.sarv_db_menu li a i{ display: none; }
}


@media only screen and (max-width: 1300px) {
.sarv_db_menu li a.nav-link{padding: .5rem .5rem !important}
.icon_link_menu a{padding: .5rem .5rem;}

} 

.db_search_bx{width: 220px; background: #323131; border:solid 1px #737a7e4a ;  border-radius: 4px; padding: 4px 8px;}
.db_search_bx .textbox{background: none; border: none; outline: none; width: 182px; color: #d8dadc; font-size: 13px; font-weight: 400;}

.all_db_search{padding:0px!important; width: 220px; border-radius: 0px 0px 10px 10px; box-shadow: 0px 3px 8px rgb(0,0,0,.4)!important; max-height: 500px; overflow: auto;}
.universal_search_rsult{list-style: none; margin: 0px; padding: 0px;}
.universal_search_rsult li{display: block; float: none; color: #fff; border-bottom: solid 1px #ffffff0f; padding: 8px 15px; position: relative;}
.universal_search_rsult li:last-child{border:none;}
.universal_search_rsult li:hover{background: #ffffff0f;}
.universal_search_rsult li.selecthover{background: #ffffff0f;}
 
.universal_search_rsult li a{display: block;}
.universal_search_rsult li a:hover, .universal_search_rsult li a:focus{outline: none; border: none; text-decoration: none;}

.universal_search_rsult li .icon_tag{font-size: 13px; color: #ffc107b8; display: inline-block; width: 25px; vertical-align: top; 
}
.universal_search_rsult li ._sindicator{ font-size: 13px; display: inline-block; width: 15px; color: #ffffffb8; vertical-align: top}
.universal_search_rsult li .result_in{margin-left: 5px; color: #fff; font-size: 13px; display: inline-block; width: 118px}
.universal_search_rsult li .result_in b{font-weight: normal; color:#ffc107b8 }
 
.header_drop_menu{background: #323232; border-radius: 0px; margin-top: 5px; min-width: 200px; padding: 20px 0px; border-radius: 0px 0px 5px 5px; box-shadow: 0px 12px 22px -12px black;}
.header_drop_menu .dropdown-item{font-size: 15px; color: rgba(256,256,256,.8); margin-bottom: 5px; } 
.header_drop_menu .dropdown-item span{display: block; font-size:13px; color: #ffffffba; padding-left: 23px; padding-top: 3px; width: 100%; white-space: normal; font-weight: 100; }
.header_drop_menu .dropdown-item:last-child{margin-bottom: 0px;}  
.header_drop_menu .dropdown-item:hover, .header_drop_menu .dropdown-item:focus{background: none; color:#fff;}

.header_drop_menu .drop_in_drop{left: auto!important; right: 100%; border-radius: 5px;}

.sarv_header .form-inline li.nav-item{display: inline-block;}
.sarv_header .form-inline li.nav-item .nav-link{padding: .5rem .5rem;}
.sarv_header .form-inline li.nav-item .nav-link:focus{outline: none;}

.sarv_header .form-inline .header_drop_menu{margin-top: 4px;}

.report_mega_menu{position: absolute!important; width: 100%; top: 45px; border-radius: 0px; left: 0px; height: 500px; background: #323232; 
    padding: 25px; z-index: 999999; box-shadow: 0px 12px 22px -12px black;}
.report_mega_menu .report_link{list-style: none; margin: 0px; padding: 0px; display: inline-block; width: 100%;}
.report_mega_menu .report_link li{ display: inline-block; width: 33%; float: left; margin-top: 10px; }
.report_mega_menu .report_link li a{font-size: 14px; color: #b9b9b9; transition: all .2s;}
.report_mega_menu .report_link li a:hover{color: #1976D2}

.report_mega_menu  .module_report_link{  display: inline-block; width: 100%; margin: 0px; padding: 0px; }
.report_mega_menu  .module_report_link li{ display: inline-block; width: 30%; margin-bottom: 10px; }
.report_mega_menu  .module_report_link li a{ font-size: 14px; color: #aaa; transition: all .2s;}
.report_mega_menu  .module_report_link li a:hover{color: #fff}
.report_mega_menu  .module_report_link li a i{margin-right: 5px;}



.report_mega_menu h4{color: #fff;}
.report_mega_menu h4.text-secondary{color: #54cbfa !important;}
.animate { animation-duration: 0.3s;  -webkit-animation-duration: 0.3s;  animation-fill-mode: both; -webkit-animation-fill-mode: both; }
@keyframes slideIn {
  0% {transform: translateY(1rem);  opacity: 0;}
  100% {transform:translateY(0rem); opacity: 1; }
  0% {transform: translateY(1rem);  opacity: 0;}
}

@-webkit-keyframes slideIn {
  0% {-webkit-transform: transform;  -webkit-opacity: 0; }
  100% { -webkit-transform: translateY(0); -webkit-opacity: 1;}
  0% { -webkit-transform: translateY(1rem); -webkit-opacity: 0;}
}
.slideIn { -webkit-animation-name: slideIn; animation-name: slideIn;}

/*header css*/

.dropdown-toggle.no_carret:after{display: none;}
 

/*css for new header design*/

.all_service_menu{ width: 500px; border-radius: 0px;  padding: 15px; box-shadow: 0 3px 6px rgba(0,0,0,.10), 0 3px 6px rgba(0,0,0,.10); border:none; }
.all_service_menu:after{left: 9px!important;}
.all_service_menu .service_link{font-size: 14px; color: #bbb; text-align: center; display: block; padding: 15px 0px;}
.all_service_menu .service_link:hover{text-decoration: none;}
.all_service_menu .service_link  span{ display: block; }
.all_service_menu .service_link img{ width: 30px; margin-bottom: 5px; }

.sarv_menupart{margin-left: 25px;} 
.sarv_menupart li a{font-size: 13px; color: rgba(256,256,256,.8); font-weight: 400; }
.sarv_menupart li a i{margin-right: 3px;}
.sarv_menupart li a.nav-link{padding: .5rem .5rem!important}
.sarv_menupart li a:hover{color: #fff;}
.sarv_menupart li a:focus, .sarv_menupart li a:active{outline: none; }

.sarv_menupart li.nav-item.show a.nav-link{color: #fff;}
.sarv_menupart li.nav-item.show a.nav-link i{color: #356bad;}

.sarv_menupart .dropdown-toggle::after{border: none; content: "\f078";   font-family: 'Font Awesome 5 Free';
  font-weight: 900; vertical-align: inherit; font-size: 10px; color: #999; opacity: 0}

.sarv_menupart li.nav-item:hover .dropdown-toggle::after, .sarv_menupart li.nav-item.show .dropdown-toggle::after{opacity: 1}
 
.sarv_header ._user_link{font-size: 15px; color: #fff;}
.sarv_header ._user_link span{display: inline-block; width: 22px; height: 22px; line-height: 22px; font-size: 12px; background: #166fce; border-radius: 50%; text-align: center;  margin-right: 5px;} 

.sarv_header ._user_link.agent_identify span{position: relative;}
.sarv_header ._user_link.agent_identify span:after{width: 28px; height: 28px; position: absolute; left: -3px; top: -2px; content: ""; 
background-image: url(../images/headset_icon_yellow.png); background-size: 100%; background-repeat: no-repeat;}

 
.sarv_menu_drop{background: #343637; border-radius: 0px; margin-top: 5px; min-width: 200px; padding: 20px 0px; 
  border-radius: 0px 0px 5px 5px; box-shadow: 0px 12px 22px -12px black; max-height: 90vh; overflow-x:hidden; overflow-y: auto;}

.sarv_menu_drop::after {width: 0;height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;  border-bottom: 8px solid #343637;
  position: absolute; top: -8px;  left: 22px; content: "";}

.sarv_menu_drop .dropdown-item{font-size: 15px; color: rgba(256,256,256,.8);  } 
.sarv_menu_drop .dropdown-item span{display: block; font-size:13px; color: #ffffffba; padding-left: 23px; padding-top: 3px; width: 100%; white-space: normal; font-weight: 100; }
.sarv_menu_drop .dropdown-item:last-child{margin-bottom: 0px;}  
.sarv_menu_drop .dropdown-item:hover, .sarv_menu_drop .dropdown-item:focus{background: none!important; color:#fff;}

.sarv_menu_drop .menu_subheading{color: #e9851c; font-size: 13px; padding-left: 10px; display: block;} 

.sarv_menu_drop.group_menu{padding: 20px;}
.sarv_menu_drop.group_menu h3{margin: 0px 0px 0px; padding: 0px; font-size: 13px; font-weight: 400; color: #e9851c }
.sarv_menu_drop.group_menu ul{list-style: none; margin: 0px 0px 15px 10px; padding: 0px;}
.sarv_menu_drop.group_menu ul li{display: block; margin-top: 5px; padding}
.sarv_menu_drop.group_menu ul li a{font-size: 14px;} 


.sarv_menu_drop.mega_menu{min-width: 700px; padding: 25px; left: -300px;}
.sarv_menu_drop.mega_menu:after{left: 48%;}
.sarv_menu_drop.mega_menu .row .col{border-right: solid 1px #ffffff12;}
.sarv_menu_drop.mega_menu .row .col:last-child{border:none;}
.sarv_menu_drop.mega_menu h3{margin: 0px 0px 10px; padding: 0px; font-size: 13px; font-weight: 400; color: #e9851c }
.sarv_menu_drop.mega_menu ul{list-style: none; margin: 0px 0px 0px 0px; padding: 0px;}
.sarv_menu_drop.mega_menu ul li{display: block; margin-top: 5px; padding}
.sarv_menu_drop.mega_menu ul li a{font-size: 14px;}  

@media only screen and (max-width: 1380px) {
 .sarv_menupart li a.nav-link{padding: .5rem 4px!important;}
 .sarv_menupart li a i{margin-right: 0px;}
}


/*css for new header design*/


.content_section{margin-top: 70px;}
.pb_50px{padding-bottom: 50px;}
.page_title{font-family: Comfortaa; color: #EA9108; font-size: 22px; font-weight: 700}
.page_title .report_count{font-size: 18px;padding: 2px 10px; border-radius: 5px;  background: #000; vertical-align: middle; color: #337ab7; display: inline-block;
   line-height: normal;}

/*for daterangepicker show on down in open modal*/
body.modal-open .content_section{min-height: 80vh;}
/*for daterangepicker show on down in open modal*/

 
/*scroll report page css*/
.incresied_width{ min-width: 2400px!important }
.incresied_width2{ min-width: 1800px!important }

.aftre_header_fx{ width: 100%; position: fixed; top: 47px; left: 0px; border-bottom: 1px solid #e5eff9; box-shadow: 0 7px 5px -7px rgba(0, 0, 0, 0.4); z-index: 555; background: #f9f9f9; line-height: normal; padding: 10px 15px; }
.aftre_header_fx .page_title_36{ font-size: 18px; margin: 0px; padding: 0px; }
.aftre_header_fx .page_title_36 span{  padding: 2px 10px; font-size: 14px; border-radius: 20px; color: #333; margin-left: 5px;}

 
.log_report_table thead tr th{ font-weight: 400; font-size: 13px; color: #9e9e9e; vertical-align: middle; border-color: #5c5b5b70;
 border-bottom: solid 2px #333 ; border-top: solid 1px #5c5b5b70;   background: #202223; padding: 0px 8px!important; }
.log_report_table thead tr.no_b_border th{border-bottom: solid 1px #ddd}

.log_report_table tbody tr td{vertical-align: middle; padding: 5px 8px; font-size: 12px; color: #ffffff8c; border-color: #6464642b}
.log_report_table tbody tr:hover td{background: #ffffff0a}

.log_report_table tbody tr:last-child td{border-bottom: none;}

.call_node_blxk {text-align: center;}
.call_node_blxk span{display: block;}
.call_node_blxk span b{color: #337AB7!important; font-weight: normal;}
.call_node_blxk font{display: block; font-size: 11px; color: #999; font-weight: normal;}

.r_sn{width: 80px; text-align: center;}
.r_cutomer_dtl{font-size: 13px; min-width: 320px; width: 320px; position: relative;    border-left-color: transparent!important;}
.r_cutomer_dtl .col-md-6{position: inherit;}
.r_cutomer_dtl .caller_number{font-weight: normal; color: #528fda; font-size: 16px; letter-spacing: 1px;}
.r_cutomer_dtl .caller_number i{font-size: 17px; vertical-align: baseline; color: #337ab7;   transform: rotate(42deg)}
.custmor_action_ss{display: none;   margin-top: 5px; position: absolute; left: 8px; bottom: 10px;}
.log_report_table tbody tr:hover .custmor_action_ss{display: block;}

.custmor_action_ss .btn-link{padding: 0px; width: 20px; height: 20px; display: inline-block; line-height: 20px; color: #8a8686; font-size: 12px; background: #7c797936; border-radius: 4px; text-align: center; border:solid 1px #7c797936;}

.custmor_action_ss .btn-link:hover{color: #fff; background: #AA8F5C; border-color: #AA8F5C}

.call_status{font-size: 11px; padding: 1px 5px;  border-radius: 3px; border:solid 1px; display: inline-block; vertical-align: top; }
.call_status.answred{  color: #62d08e; border-color:#62d08e; }
.call_status.reject{   color: #dc7e7d; border-color:#dc7e7d;}
.call_status.prtl_bg{  color: #a66edd; border-color:#a66edd;}
.call_status.blue_bg{  color: #62a7d0; border-color:#62a7d0;}
.call_status.yellow_bg56{  color: #d09062; border-color:#d09062;} 

.call_status.green-border{color: #62d08e; border-color:#62d08e; }
.call_status.red-border{color: #dc7e7d; border-color:#dc7e7d;} 
.call_status.blue-border{color: #62a7d0; border-color:#62a7d0;}
.call_status.yellow-border{color: #d09062; border-color:#d09062;} 

.call_status.green-border-dashed{color: #62d08e; border:dashed 1px #62d08e; }
.call_status.red-border-dashed{color: #dc7e7d; border:dashed 1px #dc7e7d;} 
.call_status.blue-border-dashed{color: #62a7d0; border:dashed 1px #62a7d0;}
.call_status.yellow-border-dashed{color: #d09062; border:dashed 1px #d09062;}


.r_call_time{font-size: 13px; color: #a5a5a5;  display: inline-block; margin-bottom: 5px; width: 75px;}
.r_call_time font{   font-size: 13px; color: #999; display: block; font-family: calibri; font-weight: normal; line-height: normal; }

.disconnec_by_45{display: block; color: #999}
.disconnec_by_45 font{font-weight: 500;}
 
.report_duration{ text-align: center; padding: 0px!important; } 

.d_sb_hdbg{display: block;   }
.d_sb_hdbg span{display: inline-block; width: 20%; font-size: 11px!important; color: #156996; text-align: center; padding: 0px 5px 0px; }
.d_sb_hdbg span i{color: #4c7bb8}
.d_sb_hdbg span font{display: block; color: #999; font-weight: normal; font-size: 12px;}
.d_sb_hdbg span:last-child{width: 26%;}
 

.r_duration{text-align: center; padding: 0px!important; min-width: 380px; width: 380px; position: relative; vertical-align: top!important; padding-top: 10px!important; background: url(images/zigzag_bg.jpg);}
.duration_field{display: block; width: 100%;}
.duration_field span{display: inline-block; width: 20%; text-align: center;  font-size: 14px; color: #18A2B8; padding: 5px 5px 0px; font-weight: 400;}
.duration_field span:last-child{width: 26%;}

.call_tag_div{display: block; padding-top: 5px;   text-align: left;   margin-top: 6px; font-weight: 400; color: #999; font-size: 13px; 
  position: absolute; left: 33px; bottom:12px;  padding: 1px 10px; border-radius: 20px; background: #f0ffff1a}
.call_tag_div span{font-size: 12px; display: inline-block; margin:2px 4px; cursor: pointer;}
 
  
.toggleDisplay { display: none;    }
.toggleDisplay.in { display: table-cell;}

.acation_on_call_drop:after{transform: rotate(-90deg);}
.custom_bgdrop{background: #191c24; box-shadow: 0px 0px 35px -3px black; font-size: 13px; font-weight: 500;}
.custom_bgdrop .dropdown-divider{border: 1px solid #e9ecef17}
.custom_bgdrop li a.dropdown-item{color: #aaa;}
.custom_bgdrop li a.dropdown-item:hover, .custom_bgdrop li a.dropdown-item:focus{background: #AA8F5C; color: #fff;}

.compn_module_dtl{margin-bottom: 5px; min-width: 170px;}
.compn_module_dtl:nth-child(2){border-top:dashed 1px #dddddd1c; padding-top: 5px;}

.choose_action_call_drop{padding: 20px; background: #301f1c; font-size: 13px; font-weight: 400; box-shadow: 0px 0px 35px -3px black; top: -4px; left: 100%;}
.choose_action_call_drop a{ display: block; color: #ccc; margin-bottom: 5px; }
.choose_action_call_drop a i{margin-right: 8px;}
 
.module_detail span{display: block; text-align: left; color: #ffffffad; font-size: 13px;}
.module_detail span font{display: inline-block; width: 70px; padding-right: 5px; color: #999}

.actn_voice_btn{ text-align: left; display: block; }
.actn_voice_btn span{display: inline-block; margin: 5px auto 0px; /*background: #f2f2f20f;*/ padding: 0px 5px; border-radius: 20px;}
.actn_voice_btn span .btn{padding: 2px 5px; display: block;}
.actn_voice_btn span .btn:first-child{color: #2f6a9f;}
.actn_voice_btn span .btn:last-child{color: #de8748;}

.call_module_info_message{width: 150px; margin: 0 auto; font-size: 13px; text-align: center; line-height: normal;}


.caller_detail_dropdwn{width: 200px; background: #303539; color: #fff;}
.caller_detail_dropdwn h3{font-size: 13px; font-weight: 400; margin: 0px 0px 5px; padding: 0px; color: #aaa}
.caller_detail_dropdwn span{font-size: 18px; margin-bottom: 15px; display: inline-block;}


.show_more_btn{width: 30px; height: 30px; border-right: 0px!important; background: #3c4044!important; border-color: transparent!important; display: table-cell;}
.show_more_btn a{padding: 0px; color: #fff9; font-size: 12px; font-weight: 400; line-height: normal; display: table; width: 100%;}
.show_more_btn a:hover, .show_more_btn a:focus{text-decoration: none; outline: none; color: #fff;}

.agent_custmr_fld{border-right: solid 2px #f0ad4e61 !important; text-align: center; width: 80px; min-width: 80px;}
.agent_custmr_fld font{display: block; color: #999; font-weight: normal;}

.agent_calling_timeline{display: inline-block; width: auto; list-style: none; margin: 0px 0px 0px; padding: 0px; position: relative;} 
.agent_calling_timeline li{display: inline-block; width: 200px; float: left; padding: 5px; border:dashed 1px #ffffff26; border-radius: 5px; margin-right: 5px; color: #999}
.agent_calling_timeline li .t_detail_tag{display: inline-block; width: 55px;}
.agent_calling_timeline li .t_detail_data{font-size: 13px; color: #ffffff9e; width: 130px;}

.tag_detail_table{width: 100%; min-width: inherit;}
.tag_detail_table tr th{color: #ffffff8c; font-weight: normal; border: none;}
.tag_detail_table tr th, .tag_detail_table tr td{padding: 5px; font-size: 12px;} 
.tag_detail_table tr td{color: #f2f2f2b0; border-color: #99999942} 
.tag_detail_table tr td.date_field span i {color: goldenrod;}
.tag_detail_table tr td.date_field span { display: block; font-size: 12px; padding-bottom: 5px;}


.table-basic{margin-top: 15px; background: #3234358c}
.table-basic table{margin-bottom: 0px;}
.table-basic .clone-column-table-wrap{box-shadow: rgba(13, 13, 15, 0.8) 6px 0px 10px -5px!important;}
.table-basic .clone-column-table-wrap table{background:#242628!important;}
.table-basic .clone-head-table-wrap{box-shadow: rgba(13, 13, 15, 0.8) 6px 0px 10px -5px!important; top: 47px!important; height: 47px!important; background-color: transparent!important}
.table-basic .clone-head-table-wrap table{background: none!important}
 

.select_ivr_dropdown{ display:inline-block; position:relative; cursor:pointer; vertical-align: middle; margin: 0px 5px; min-width: 200px;}
.select_ivr_dropdown .inputdropbx{padding:5px 20px 5px 10px; background: #1d1c1c7a; border-radius: .2rem; border:solid 1px #ddd3; font-size: 14px;
  color:#f8f8f8c7;}
.select_ivr_dropdown .inputdropbx font i { color:burlywood  }
.select_ivr_dropdown .inputdropbx b{font-weight: 400; margin: 0px 5px;}
.select_ivr_dropdown:hover ul{ display:block}
.select_ivr_dropdown ul{ margin:0px; padding:2px; list-style:none; position:absolute; left:0px; top:-3px; background:#27292b; width:100%; 
  border-radius:5px; display:none; border:solid 1px #ddd3; max-height:400px; overflow-y:scroll; z-index: 9999}
.select_ivr_dropdown ul li{ display:inline-block; width:100%; text-align:left; padding:5px;}
.select_ivr_dropdown ul li a{ font-size:13px; color:#f8f8f8c7}
.select_ivr_dropdown ul li:hover a{color:#de7b3f}


.column_saprtr{border-right: solid 2px #f0ad4e61 !important}
.cllog_extra_dtl{ min-width: 300px; text-align: center;}
.cllog_extra_dtl span{display: inline-block; width: 30%;} 
/*scroll report page css*/



/*dark bg model*/
.dark_bg_model .modal-dialog{max-width: 600px;}
.dark_bg_model .modal-content{background: #272728; padding-bottom: 20px;} 
.dark_bg_model .modal-header{border-bottom: none; padding-bottom: 0px;}
.dark_bg_model .modal-header .modal-title{color: #ea833a; font-family: Comfortaa; font-size: 17px;}
.dark_bg_model .modal-header .modal-title i{margin-right: 5px;}
.dark_bg_model .modal-header button.close{color: #fff; opacity: .7; font-size: 30px;}
.dark_bg_model .call_log_histry{list-style: none; margin: 0px; padding: 0px;}
.dark_bg_model .call_log_histry li{font-size: 15px; color: #fffc; margin-top: 10px; position: relative; padding-left: 50px; text-align: left;}
.dark_bg_model .call_log_histry li:after{position: absolute; left: 22px; top: 7px; width: 10px; height: 10px; background: #fff3; border-radius:100%; content: "";}
.cNumberWhat{color: goldenrod}
/*dark bg model*/



/*log report model content css*/
.summary_dtl_rw{ list-style: none; margin: 0px; padding: 0px; }
.summary_dtl_rw li{ display: inline-block; width: 100%; float: none; margin-bottom: 25px; }
.summary_dtl_rw li label{ display: inline-block; width: 150px;   font-weight: 400; font-size: 13px; color: #999; margin-bottom: 0px;  }
.summary_dtl_rw li .infobx{ display: inline-block; vertical-align: top; line-height: normal; color: #f2f2f2}
.summary_dtl_rw li .text-secondary{color: #d2d2d2 !important }

.amount_deduction_bx{ width: 100%;} 
.amount_deduction_bx h3{font-family: Comfortaa}
.amount_deduction_bx p.help_text { color: #ffffffb5; text-align: left; font-weight: 300; font-size: 15px; }

.amount_deduction_bx .amount_bx{font-size: 16px;font-weight: 300;display: inline-block;text-align: center;width: 210px; padding: 50px 15px;
  vertical-align: top; background: #343332d9; color: #fff; border-radius: 5px;}
.amount_deduction_bx .amount_bx span{display: block; font-size: 28px; color: #1976D2; padding-top: 10px;}

.amount_deduction_bx .deduct_descrptn{display: inline-block; width: calc(100% - 220px); vertical-align: middle; padding-left: 50px;}

.amount_used_list{list-style: none; margin: 0px; padding: 0px; position: relative;}
.amount_used_list:after{position: absolute; width: 1px; height: 100%; content: ""; background: #eeeeee2e; border-radius: 5px; top: 0px; left: 0px;}
.amount_used_list li{ display: inline-block; width: 100%; margin-bottom: 25px; position: relative; padding-left: 50px;} 
.amount_used_list li .dectn_report{ margin-top: 10px; }
.amount_used_list li .dectn_report span{ font-size: 13px; color: #bcbcbc; font-weight: 400 ;  text-align: left; }
.amount_used_list li .dectn_report span font{display: block; color: cornflowerblue} 
.amount_used_list li .amount_cril{position: absolute; left: -30px; top: 0px; padding:2px 5px; background: #262525; min-width: 60px; 
  text-align: center; border: solid 1px #eeeeee3d; line-height: normal; border-radius:20px; z-index: 2; color: #e66363; font-size: 13px;}

/*log report model content css*/

/*send sms modal*/
.send_sms_content{display: block; width: 100%}
.send_sms_content .form-group label{color: #ffffffa3; font-size: 13px; font-weight: 400;}
.send_sms_content .form-group .form-control{border-radius: 0px; background: #202121 ; border-color: #2c2e2f; color: #9e9e9d; box-shadow: none; font-size: 13px;}
.send_sms_content .form-group textarea{min-height: 100px;}
.send_sms_content .form-group   .input-group-text{background: #1d1d1d ; border-color: #2c2e2f;}

.send_sms_content .form-group .select2-container{width: 100%!important;}
.send_sms_content .form-group .select2-container--default .select2-selection--multiple{background:#202121!important; border: solid 1px #2c2e2f!important }
/*send sms modal*/




/*.comman_table thead tr th{background: #021b2a; color: #156996 ; font-size: 14px; vertical-align: middle; font-weight: 400; border-top: 0px; border-bottom: 2px solid #FFE082;}
.comman_table tbody tr td{color: #cbcbcb; vertical-align: middle; border:0px; font-size: 13px;}
.comman_table tbody tr{border-bottom: solid 1px #003450;}
.comman_table tbody tr:hover{background: #27292b; border-bottom:solid 1px #77683a ; }*/

.comman_table < .table-reponsive{min-height: 1000px!important; background: red;}
.comman_table:parent(.table-reponsive){height: 1000px; background: red;}

.comman_table{background: #3234358c;}
.comman_table thead tr th{color: #9e9e9e; font-weight: 400; font-size: 13px; border-top: solid 1px #ffffff0a; border-bottom: solid 2px #333; 
  background: #202223; padding: 8px 8px; vertical-align: middle;}
.comman_table tbody tr td{color: #ffffff8c; border-color: #131517ad; padding: 8px 8px; vertical-align: middle; font-size: 12px;}
.comman_table tbody tr:hover{background:#ffffff0a }

.comman_table tbody tr td.date_field span{display: block; font-size: 12px;}
/*.comman_table tbody tr td.date_field span i{color: goldenrod}*/

.comman_table.align-top tr td{vertical-align: top;}

.date_field_custom span{  font-size: 12px;}
.date_field_custom span i{color: goldenrod}

.unlimited_tag {display: inline-block; background: #2f7c83; padding: 0px 10px;  border-radius: 10px; color: #ffffffb3; font-size: 12px;}

.working_time i { display: inline-block;  font-size: 11px; padding: 2px 4px; margin-right: 3px; background: #ddd; border-radius: 3px; 
  line-height: normal; font-style: normal; color: #333}
.working_time i.active-day {  background: #286873;  color: #fff;}
.working_time span { display: block; padding-top: 3px; text-align: left; margin-top: 5px; font-size: 12px; color: #999}

.destination_field{width: 150px; font-size: 13px;}
.destination_field span{display: inline-block; width: 40px; color: #aaa;}
.destination_field font{color: blue; display: inline-block; color: #1976D2}

.bunch-id { background: #ffa0016b;color: #fffefc;}

.status{display: inline-block; vertical-align: middle; padding: 1px 10px; border-radius: 4px; min-width: 50px; text-align: center; cursor: pointer;
background: transparent; border:solid 1px #fff; color: #fff;}
.status.status_green{border-color:#25BE64 ; color:#25BE64 }
.status.status_red{border-color:#e84949 ; color:#e84949 }
.status.status_blue{border-color:#3d8de2 ; color:#3d8de2 }
.status.status_yellow{border-color:#b1a930 ; color:#b1a930 }

.status_ouline{display: inline-block; vertical-align: middle; padding: 1px 10px; border-radius: 4px; min-width: 50px; text-align: center; cursor: pointer;
background: transparent; color: #ffffffa3; font-size: 11px}
.status_ouline.status_green{border:solid 1px #25BE64; color: #ffffffa3}
.status_ouline.status_red{border:solid 1px #e84949; color:#ffffffa3 }
.status_ouline.status_blue{border:solid 1px #4B6DBF; color:#ffffffa3 }
.status_ouline.status_yellow{border:solid 1px #EF6C00; color: #ffffffa3}
 


.field_dropdown{background: /*#191c24;*/ rgb(54, 56, 60) none repeat scroll 0% 0%; font-size: 14px; font-weight: 500; box-shadow: 0px 0px 35px -3px black}
.field_dropdown .dropdown-item{color: #ffffffcf}
.field_dropdown .dropdown-item:hover, .field_dropdown .dropdown-item:focus {background: #17a2b8; color: #fff;}
.field_dropdown .dropdown-item:not([href]):not([tabindex]){color: #ffffffcf; cursor: pointer;}
.field_dropdown .dropdown-item:not([href]):not([tabindex]):hover{color: #fff}
.field_dropdown .dropdown-divider{border-color: #e9ecef17}


.agent_info_drop{background: #323638; box-shadow: 0px 0px 35px -3px black; min-width: 250px;}
.agent_info_drop.text-muted{color: #d1d3d5!important }

.agent_column_list{max-width: 300px; white-space: normal; vertical-align: top}
.agent_column_list a {display: inline-block; padding: 1px 8px; font-size: 11px;  color: #ffffffc9;  transition: all .1s;   border-radius: 20px;  margin-bottom: 6px;
  background: #ee5f1996; margin-right: 4px;}
.agent_column_list a:hover{color: #fff}

.custom-pagination{padding-bottom: 35px}
.custom-pagination .page-link{border:none; border-radius: 20px; margin-right: 5px; background: #ffffff14; color: #fff; font-size: 12px}
.custom-pagination .page-link:hover, .custom-pagination .page-link:focus{box-shadow: none;}
.custom-pagination .page-link.prev_btn, .custom-pagination .page-link.next_btn{background: none; font-size: 14px;}

.page_data_select{background: #12111145; border-color: #aca2a233; padding:3px 5px; height: inherit; width: 60px; color: #fff; font-size: 14px;}
.page_data_select:hover, .page_data_select:focus{background: #12111145; border-color: #aca2a233; box-shadow: none; }


.advance-filter-btn{ display: inline-block; margin-right: 5px; vertical-align: middle; position: relative; text-align: left; }
.advance-filter-btn .filter_bx256{display: none;  background: #26282a; width: 400px;   border:solid 1px #f2f2f238; position: absolute; right: 0px; top: 0px; z-index: 99; box-shadow: 0 2px 32px 0 rgba(0,0,0,.17); border-radius: 5px; }
.advance-filter-btn .filter_bx256 h5{ font-size: 13px; padding: 15px; color: #e7e7e7; font-weight: 400; line-height: 20px; margin: 0px;  }
.advance-filter-btn .filter_bx256 ul{list-style: none; margin: 0px; padding: 0px; max-height: 300px; overflow: auto;}
.advance-filter-btn .filter_bx256 ul li{ display: block; float: none; padding: 10px }
.advance-filter-btn .filter_bx256 ul li a{ display: inline-block; width: 100%;  color: #1976D2}
.advance-filter-btn .filter_bx256 ul li:hover{background: #11101063}
.advance-filter-btn .filter_bx256 ul li label{ display: block; color: #1976D2; font-size: 14px; cursor: pointer; margin-bottom: 5px; }
.advance-filter-btn .filter_bx256 ul li p{ display: block; font-size: 12px; font-weight: 300; color: #999 ; margin-bottom: 0px; } 
.advance-filter-btn:hover .filter_bx256{ display: block; }


.modal-fullscreen { padding: 0 !important;}
.modal-fullscreen .modal-dialog {  width: 100%;  height: 100%;  margin: 0;  padding: 0; max-width: 100%;}
.modal-fullscreen .modal-content { height: auto;  min-height: 100%;  border: 0 none;  border-radius: 0; background: currentColor;}
.modal-fullscreen .modal-content .close{ position: absolute; right: 25px; top: 25px; color: #f04242; text-shadow: none; font-size: 18px; 
  font-weight: 100; opacity: 1; z-index: 9999; width: 40px; height: 40px; border:solid 2px #f04242; border-radius: 50%; transition: all .5s; opacity: .7}
.modal-fullscreen .modal-content .close:hover{opacity: 1; }
.modal-fullscreen .modal-content .close:focus{outline: none; }

 


.lockfundmodal{ width: 550px; display: table; margin: 50px auto; }
.lockfundmodal h3{ text-align: center; font-weight: 300; color: #fff; }
.lockfundmodal h3 i{ margin-right: 10px; opacity: .8; vertical-align: middle }
.lockfundmodal p.help_text{ color: #666; text-align: center; font-weight: 300; font-size: 15px; padding-top: 10px; }

.c-wallet-amount{ font-size: 16px; font-weight: 300; display: inline-block; text-align: center; width: 40%; padding: 50px 15px;  vertical-align: middle;}
.c-wallet-amount span{ display: block; font-size: 28px; color: #1976D2; padding-top: 10px; }

.lockfundmodal hr{border-color: rgba(255, 255, 255, 0.1)}

.add-amount-w{ display: inline-block; width: 54%; vertical-align: middle;   margin: 40px 0px 40px 25px; }
.add-amount-w span{font-size: 16px; font-weight: normal; display: block; padding-bottom: 10px;}
.add-amount-w input[type="text"],.add-amount-w input[type="password"]{ border:solid 1px #ddd; padding: 10px; height: 45px; width: 100%;}
.add-amount-w .custom-select{ border:solid 1px #ddd; padding: 10px; height: 45px!important; width: 100%; border-radius: 0px;}
.add-amount-w textarea.specfy{border:solid 1px #ddd; padding: 10px; height: 110px; width: 100%; border-radius: 0px;}
.add-amount-w textarea.specfy:focus{box-shadow: none}
.add-amount-w .custom-select:focus{box-shadow: none;}


.caller_detail_bnh{ display: inline-block; width: 100%; margin-top: 30px; }
.caller_detail_bnh ul{ list-style: none; margin: 0px; padding: 0px; }
.caller_detail_bnh ul li{ display: inline-block; width: 16%; }
.caller_detail_bnh ul li label{ display: block; font-size: 14px; color: #999; padding-bottom: 5px; margin-bottom: 0px;}
 
.module_report657{ display: inline-block; width: 100%; margin-top: 30px; }
.module_report657 ul{ list-style: none; margin-top: 0px; margin-bottom: 0px; padding: 0px;}
.module_report657 li{ padding: 15px; }
.inner6987{border:solid 1px #eeeeee24; background: #fff0; padding: 10px; border-radius: 4px;}


.activt_module_listplan tr th{font-weight: normal; border: none; font-size: 13px; color: #999; border-bottom: solid 1px #ffffff0a}
.activt_module_listplan tr td{border: none; color: #cbcbcb; font-size: 13px;}
.activt_module_listplan tbody tr:hover{background: #ffffff0f} 

.sticky_btn_sec{width: 100%;  border-top: solid 1px #e0b535a6; background: #282827; color: #cdcdcd; position: sticky; left: 0px; bottom: 0px; padding: 15px;}
.sticky_btn_sec span{font-size: 15px;}

 
/*alert message css*/
.custom-alert{ border-radius: 5px; font-weight: 400; font-size: 14px; background-color: #ffffff12; border: none ; padding: 15px; margin-top: 10px; }
.custom-alert.alert-dismissible .close{top: 0; text-shadow: none}
.custom-alert font{ font-weight: 500; margin-right: 10px; text-transform: uppercase;  }

.custom-alert.alert-success {color:#43a047 }
.custom-alert.alert-danger {color:#d44f4f }
.custom-alert.alert-info {color: #448AFF}
.custom-alert.alert-warning {color:#F9A825 }
.custom-alert.alert-primary {color:#1565C0 }
/*alert message css*/


/*create agent page*/
.middle21-box{ display: inline-block; width: 100%; background: #ffffff08; padding:40px; border-radius: 10px; }
.agnt_dtl_bg{background: #a3a4a51f;padding: 20px;border-radius: 10px;}
.middle21-box h4{ font-size: 22px; color: #cdcdcd; font-weight: 300; margin-bottom: 30px;}
.custom-form .form-group {margin-bottom: 20px;}
.custom-form .form-group .frm-label{ font-size: 16px; color: #a37329; font-weight: 400; margin-bottom: 0px; display: block; }
.custom-form .form-group .form-control{border-radius: 0px; border:none; border-bottom: solid 1px #dddddd17; background: transparent; 
  font-size: 15px; color: #cdcdcd; padding: 10px 10px 2px 0px; transition: all .3s;}
.custom-form .form-group .form-control:focus{box-shadow: none; border-bottom: solid 1px #a37329; }
.custom-form .form-group .form-control.custom-select{padding-bottom: 2px;}
.custom-form .form-group .form-control.custom-select option, .custom-form .form-group .form-control  option{color: #222}
  
.agent_multiselect .select2-container--default .select2-selection--multiple{background: transparent!important; border: none!important; 
    border-bottom: solid 1px #dddddd17!important }
.select2-container--default .select2-search--inline .select2-search__field{color: #cdcdcd;}

.select2-container--default .select2-selection--multiple{border: none!important; border-bottom: solid 1px #dddddd6b!important}
.select2-container--default .select2-selection--multiple:hover{border-color: #1976D2!important}
.select2-container--default .select2-selection--multiple .select2-selection__choice{font-size: 12px!important; background: #0a09095e !important; color: #fff; border:solid 1px #D25E19 !important; padding: 3px 7px!important}
 


 .wrkng_days{ margin:0px; padding:0px; list-style:none; width:100%; display:inline-block}
 .wrkng_days li{ display:inline-block; width:12%; overflow:hidden}
 .wrkng_days li input[type="checkbox"]{ position:absolute; left:-9999px; ;}
 .wrkng_days li label{ background:#f2f2f23d; color: #cdcdcd!important; width:60px; height:25px; border-radius:2px; transition: all .2s; 
  line-height:23px; text-align:center; font-size:14px!important; cursor:pointer; font-weight:normal; border:solid 1px #eeeeee42}
 .wrkng_days li input[type="checkbox"]:checked + label{ background:#1976D2!important; color:#fff!important; border-color:transparent} 

 .wkrng_dys_search li label{width: 35px; font-size: 10px!important; height: 22px; line-height: 21px;}

.dprtmrnt_stuts{  display: inline-block; width: 100%; list-style: none; margin: 0px;   background: #fffaf00f ; border-radius: 5px;}
.dprtmrnt_stuts li{ display: inline-block; width: 100%; float: none; margin-bottom: 10px; }
.dprtmrnt_stuts li:first-child{padding-top: 10px;}
.dprtmrnt_stuts li span{ display: inline-block; width: 40%; }
.dprtmrnt_stuts li span:first-child{color: #999; font-size: 13px;}
.dprtmrnt_stuts li span .custom-control-label{padding-top: 3px;}

.middle21-box .working_time i { display: inline-block;  font-size: 10px; padding: 2px 4px; margin-right: 3px; background: #ddd; border-radius: 3px; line-height: normal; font-style: normal;}
.middle21-box .working_time i.active-day {  background: #1976D2;  color: #fff;}
.middle21-box .working_time span { display: block; padding-top: 3px; text-align: left; margin-top: 5px; font-size: 12px; color: #999}

 ul.root_daigrame{ list-style:none; margin:0px; padding:0px;}
 ul.root_daigrame li{ float:none; display:inline-block; width:100%; text-align:center; position:relative; padding-bottom:25px;} 
 ul.root_daigrame li span{ display:inline-block; width:140px; height:50px; border:dotted 2px #337AB7; text-align:center; border-radius:30px; line-height:47px; position:relative; background:#fff;}
 ul.root_daigrame li span:after{ position:absolute; left:0px; right:0px; width:1px; background:#337AB7; height:25px; content:""; bottom:-27px; margin:0 auto;}
 ul.root_daigrame li:last-child{ padding-bottom:0px;}
 ul.root_daigrame li:last-child span:after{ display:none}
 

.agent-profile-field .form-group {margin-bottom: 20px;}
.agent-profile-field .form-group .frm-label{ font-size: 13px; color: #666; font-weight: 300; margin-bottom: 0px; display: inline-block; width: 100px; }
.agent-profile-field .agent_detail{ display: inline-block;  margin-top: 5px; font-size: 14px; }
.agent-profile-field .group_name_label{ font-size: 11px; margin-right: 5px; background: #f2f2f2; padding: 2px 5px; border-radius: 5px; margin-bottom: 5px; display: inline-block; }

.right_saprator{border-right:solid 1px #eeeeee1f;}

.middle21-box .select2-container{margin-top: 5px;}
.middle21-box .select2-container--default .select2-selection--multiple{background: transparent;}

.middle21-box .custom-control-label{color: #999}

.custom_badge.badge-secondary{background: #6c757d54}
.custom_badge.badge-info{ background: #17a2b859}

.workinghour_input{color: #fff; display: block;}
.workinghour_input .form-control{width: 20%;}

/*create agent page css*/

.create_autodial_box{ background: #27292b; padding: 40px!important; margin: 0 auto; border-radius: 8px; -webkit-border-radius: 8px; 
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)
}

/*css for outbond plan*/
.obd_plan .ico-op{ display: inline-block; width: 40px; height: 40px; border:solid 1px #aacef5; border-radius: 50%; text-align: center;
 font-size: 14px; line-height: 40px; background: #D9E5FB; color: #007bff ;}
.obd_plan .ico-op.plan{ background:#085CF712 ; border-color: #aacef5; color: #007bff}
.obd_plan .ico-op.price{ background:#27FA0A17 ; border-color: #aaf5b9; color: #28a745  }
.obd_plan .ico-op.module-price{ background:#FCE70D21 ; border-color: #f5dcaa; color: #ffa000   }
.obd_plan .ico-op.login-number{ background:#06F4FC17 ; border-color: #aaf5f2; color: #17a2b8   }
.obd_plan .ico-op.due-date{ background:#F1F1F124 ; border-color: #e7e7e7 ; color: #6c757d; font-size: 15px;   }


.title-op{ font-size: 18px; font-weight: 300; color: #d8d8d8; margin: 10px 0px;}
.call-status-icon img{width: 15px; margin-right: 5px;}
/*css for outbond plan*/

.validation_field_65{display: inline-block; width: 100%; margin-bottom: 25px;}
.validation_field_65 ul{list-style: none; margin: 0px; padding: 0px;}
.validation_field_65 ul li{ list-style: none; display: inline-block; float: none; width: 100%;   padding: 20px 140px 20px 70px; position: relative;} 
.validation_field_65 ul li:nth-child(even) {background: #5652520a}
.validation_field_65 ul li:nth-child(odd) {background: #f9f9f90d}
.validation_field_65 ul li h3{margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: 400;   color: #ddd;}
.validation_field_65 ul li h3 span{display: inline-block; vertical-align: middle; width: 200px;}
.validation_field_65 ul li h3 font.requiredlabel{font-weight: normal; font-size: 11px; font-family: monospace; margin-left: 15px;
 vertical-align: top; line-height: normal; padding: 1px 8px; background: #8e6122; border:solid 1px #bd8f4e; border-radius: 5px;}
 .validation_field_65 ul li h3 font.optionallabel{font-weight: normal; font-size: 11px; font-family: monospace; margin-left: 15px;
 vertical-align: top; line-height: normal; padding: 1px 8px; background: #4d4c4a; border:solid 1px #a3a2a1; border-radius: 5px;}
.validation_field_65 ul li p{font-size: 13px; color: #767676;  margin-bottom: 0px;}
.validation_field_65 ul li span.icondj{ position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; background: #e1e3e31f; border-radius: 50%; text-align: center; font-size: 15px; color: #888888; line-height: 38px;}
.validation_field_65 ul li a{ position: absolute; right: 20px; top: 20px;  border-radius: 5px; font-size: 12px; padding: 4px 15px;}

.validation_field_65 ul li.validate:after{ position: absolute; right: 60px; top: 20px; width: 35px; height: 35px; border-radius: 50%; 
  background: #6abd56; color: #fff; content: "\f00c"; font-family: 'Font Awesome 5 Free'; font-weight: 900; text-align: center; 
  line-height: 35px; font-size: 15px; }
.validation_field_65 ul li.validate a{ display: none; } 
.validation_field_65 ul li.validate span.icondj{background: #0efa3817; color: #1e9f1e} 
.validation_field_65 ul li.inactive{filter: blur(2px);  opacity: .7;}

.select2-container--default .select2-search--inline .select2-search__field::-webkit-input-placeholder{color: #fff!important}
.select2-container--default .select2-search--inline .select2-search__field::-moz-input-placeholder{color: #fff!important}

/*create obd campaign section*/

.create_obdcampaign_sec{display: inline-block; width: 100%; margin-top: 20px;}

.tab_step ul{ list-style: none; margin: 0px auto; padding: 0px; position: relative; text-align: center; display: table; }
.tab_step ul:after{position: absolute; width: 85%; right: 0px; left: 0px; margin: 0 auto; background: #c79b1838; top: 18px; content: ""; height: 1px;
border-radius: 2px; z-index: -1}
.tab_step ul li{ display: inline-block; padding: 5px 20px; position: relative;}
.tab_step ul li a span{ display: inline-block; clear: both; width: 30px; font-size: 13px; background: #2d2a2a; border:solid 1px #c79b1838; height: 30px;  border-radius: 50%; color: #999; line-height: 30px; }
.tab_step ul li a font{color: #888; font-size: 14px; font-weight: 400}
.tab_step ul li a.active span{ background: #4E99F2; color: #fff; border-color: transparent; }
.tab_step ul li a.active font{color: #fff}

.obd_create_form_sec{ width:900px; background: #a3a4a51f; box-shadow: 0px 0px 2px #ddd; border-radius: 8px; padding: 25px; margin: 30px auto; 
  display: inline-block; min-height: 400px; text-align: left; }
.obd_create_form_sec .form-control{ font-size: 13px; background: #424242; border-radius: 0px; border-color: #424242; color: #ccc;}

.choose_agent_list_32{ list-style: none; margin: 0px; padding: 0px; }
.choose_agent_list_32 li .select2-selection--multiple{border: solid 1px #ddd; border-radius: 4px; margin-bottom: 5px;}
.choose_agent_list_32 li .select2-container--default .select2-selection--multiple .select2-selection__choice{padding: 2px 5px!important}


.inside-content98{padding: 0px 35px;}
.inside-content98 .form-group .ca_field_title{color: #e5e5e5; font-size: 14px; font-weight: 400;}
.inside-content98 .custom-control-label {color: #999; font-size: 13px;}
.inside-content98 .custom-control-label::before{background: #ffffff4a; border-color: #9d9d9d }

.agent_listingX{display: inline-block; width: 100%; background: #43434399; padding: 15px; border-radius: 5px; max-height: 300px; overflow: auto;}
.agent_listingX ul{list-style: none; margin: 0px; padding: 0px;}
.agent_listingX ul li{font-size: 14px; margin-bottom: 5px; color: #ccc}
.agent_listingX ul li .custom-control-label{color: #e9e9e9}
.agent_listingX ul li .select2-selection--multiple{background: none; border-bottom:solid 1px #dddddd36!important }

.setting_extra_option{padding: 25px; background: #14161754;}

.select_sm{font-size: 12px; padding: 3px;}

.create_obdcampaign_sec .input-group-text{ color: #7d8083; border:1px solid #424242; background: #3d3e3f;}

/*create obd campaign section*/

/*obd campaign list page*/
.obd_list_table tr td{vertical-align: top!important}
.obd_tdreportbx{display: block; border-left:dashed 1px #dddddd4f;  border-right:dashed 1px #dddddd4f; margin-top: 5px;}
.dialed_numberdtl{ display: inline-block; width: 48%; ;  padding: 5px; vertical-align: top; }
.dialed_numberdtl span font{float: right;}
.d_number_rprt{ display: inline-block; width: 50%; vertical-align: top; border-left: dashed 1px #dddddd4f}
.d_number_rprt span{font-size: 12px; border-bottom:dashed 1px #dddddd4f; width: 100%; display: block; padding: 5px 5px 5px 5px;}
.d_number_rprt span:last-child{border-bottom: none;}
.d_number_rprt span font{float: right;}
.obd_tdreportbx .btd_1{ border-top:dashed 1px #dddddd4f; }
.campign_running_action{ display: block; padding-top:10px; text-align: left; padding-left: 25px;  }
.campign_running_action a{margin-right: 5px; font-size: 15px}

.srch_result_5c{background: #141618; color: #cbcbcb; padding: 15px;}

.obd_campaginreport thead tr th{padding:5px 8px !important;}
.obd_campaginreport .custmor_action_ss{position: inherit; margin-top: 10px;}

 
.reprot_tab_menu{border-bottom: none}
.reprot_tab_menu .nav-item .nav-link.active {
background: transparent; border-color: #252628  #252628  transparent; color: #fff;font-weight: 400;}
.reprot_tab_menu .nav-item .nav-link {  cursor: pointer;  background: hsla(0,0%,100%,.07);font-size: 14px;color: #fff !important;
margin-right: 5px;}
.reprot_tab_menu .nav-item .nav-link:hover, .reprot_tab_menu .nav-item .nav-link:focus{border-color: #252628}

 
.add_clr_dtl_modal .close{text-shadow: none; color: #fff;}
.add_clr_dtl_modal h3 {color: #ea833a;font-family: Comfortaa; font-size: 17px; }
.add_clr_dtl_modal .close{ position: absolute; right: 15px; top: 15px; z-index: 999 }
.add_clr_dtl_modal .modal-dialog{max-width: 700px;}

.add_clr_dtl_modal .left_nav_tab{ background:#141618; border-radius:5px 0px 0px 5px; min-height: 400px; border-right: 1px solid rgba(0,0,0,.15) }

.add_clr_dtl_modal .left_nav_tab a{ color: #999; transition: all .5s; font-size: 13px;}
.add_clr_dtl_modal .left_nav_tab a:hover, .add_clr_dtl_modal .left_nav_tab a.active { color: #fff; }
.add_clr_dtl_modal .tab-content{min-height: 300px;}
.searchelementlist{list-style: none; margin: 0px; padding: 0px;}
.searchelementlist li label{color: #ffffffa3; font-size: 13px;font-weight: 400;}
.searchelementlist li{margin-bottom: 10px;}
.searchelementlist li .form-control{border-radius: 0px; background: #202121;border-color: #2c2e2f;  color: #9e9e9d; box-shadow: none; font-size: 13px;}
 

.campaign_list_table tr th{font-size: 15px!important; border-bottom: solid 3px #191B1C!important; background: #2D373C!important}
.campaign_list_table tr td{vertical-align: top!important; padding: 15px 8px!important; border-bottom: solid 8px #141618!important;   
  position: relative; }
.campaign_list_table tr:last-child td{border-bottom: none!important}

.campaign_list_table tr td.campaign_detail{width: 200px;}
.campaign_list_table tr td.campaign_detail .campaign_name{display: block; font-size:15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.campaign_list_table tr td.campaign_detail .campaign_name span{color:#528fda; }
.campaign_list_table tr td.campaign_detail .campagin_time{margin-top: 5px; display: block;}
.campaign_list_table tr td.campaign_detail .campagin_extra_info{margin-top: 20px; display: inline-block; width: 100%;}
.campaign_list_table tr td.campaign_detail .campagin_extra_info .basic-btn {border-radius: 20px; padding: 3px 10px}

.campaign_list_table tr td.campaign_time_setting{ width:280px; }
.campaign_list_table tr td.campaign_time_setting span{font-size: 13px;} 

.report_contact_count{ text-align: center; padding-left: 0px!important; padding-right: 0px!important; min-width: 30px; }

.working_days_campaign{ display: block; width: 225px; margin-top: 25px; margin-bottom: 0px;}
.working_days_campaign ul{list-style: none; margin: 0px; padding: 0px; background: transparent;  }
.working_days_campaign ul li{ color:#ffffff57; text-align: center; padding: 3px 4px; border-right: solid 1px #ffffff12; font-size: 11px;} 
.working_days_campaign ul li:last-child{border:0px; }
.working_days_campaign ul li.active-day{background: #3D3D3D; color:  #ffffffbf}

.working_time_campgn{display: block; width: 225px; text-align: center; font-size: 12px;}

.campaign_report_column{width: 430px;}


/*.header_fix_only {overflow-x: hidden!important;}  */
.header_fix_only .clone-head-table-wrap{box-shadow: rgba(0, 0, 0, 0.8) 0px 6px 10px -5px!important; top: 47px!important; z-index: 1!important; height: 40px!important}
.header_fix_only table{background: transparent!important; margin-bottom: 0px;}
.header_fix_only.clone_height_38 .clone-head-table-wrap{height: 38px!important}

.report_data_campaign{width: 100%; padding: 0px 5px 5px; border-radius: 5px; }
.report_data_campaign span{width: 100%; display: inline-block; font-size: 13px; }
.report_data_campaign span font{float: right;} 

.brdr_right{border-right: dashed 1px #dddddd4f;}
.brdr_top{border-top: dashed 1px #dddddd4f;} 

.ttl_conacts_dtl{  text-align: left;} 
.ttl_conacts_dtl .badge {font-weight: 500; width: 80px;}

.camapgin_calling_dtail_popup tr th{ font-weight: normal; font-size: 12px!important; padding: 5px; color: #fff; border-top: none; border-bottom: solid 1px #12141561!important; background: #00000026!important}
.camapgin_calling_dtail_popup tr td{ font-weight: normal; font-size: 13px!important; padding: 5px; color: #fff; border-bottom:none!important}

.cmpgn_srch_fltr{padding: 5px 10px; background: #d2d2d22b; color: #b0a9a9; font-size: 14px; border: none; height: inherit;}
.cmpgn_srch_fltr:focus{background:#d2d2d22b; box-shadow: none; color: #b0a9a9; }

.campaign_finish_Setting_column{min-width: 110px;}
.campaign_finish_Setting_column span{ display: block; font-size: 13px; position: relative; padding-left: 20px; line-height:  normal; padding-bottom: 8px;}
.campaign_finish_Setting_column span i{position: absolute; left: 0px; top: 1px;} 
.action_column_cmpn_list{ width: 150px; }
.action_column_cmpn_list .status{min-width: 80px; text-align: center;}


/*obd campaign list page*/

.websocket_report_obd{ position: relative; }
.websocket_report_obd .nav-tabs{border:none; text-align: left; display: block;}
.websocket_report_obd .nav-tabs li{ float: none; display: inline-block }
.websocket_report_obd .nav-tabs li a{border:none; background: none; font-size: 16px; color: #999; padding-left: 0px; padding-right: 0px; margin: 0px 10px;}
.websocket_report_obd .nav-tabs li a.active{background: none; border-bottom: solid 2px #1976D2; color: #1976D2;}
.websocket_report_obd .nav-tabs li a.border-success.active{ color: #28a745}
.websocket_report_obd .nav-tabs li a.border-danger.active{ color:#bd2130 } 
.websocket_report_obd .nav-tabs li a.border-warning.active{ color:#ffc107  } 
.websocket_report_obd .nav-tabs li a.border-info.active{ color:#17a2b8  } 
.websocket_report_obd .nav-tabs li a.border-primary.active{ color:#1976D2 }          

.websocket_report_obd .tab-content{  border:solid 1px #999; background: #27292b; border-radius: 5px; padding: 10px;}
.websocket_report_obd .tab-content table{margin-top: 10px;}
.websocket_report_obd .tab-content table tr th{border-top: none}
.websocket_report_obd .tab-content table tr:last-child{border-bottom: none;}

.checkbox_listing_modal{list-style: none; margin: 0px; padding: 0px; max-height: 400px; overflow: auto;}
.checkbox_listing_modal li{display: inline-block; width: 100%; margin-bottom: 8px;}
.checkbox_listing_modal li label font{margin-left: 10px; font-size: 16px;}

/*toggle switch css here*/
.TriSea-technologies-Switch > input[type="checkbox"] {  display: none; }
.TriSea-technologies-Switch > label { cursor: pointer;  height: 0px;  position: relative;   width: 40px;  }
.TriSea-technologies-Switch > label::before {  background: rgb(0, 0, 0);  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);  border-radius: 8px;
    content: '';   height: 16px;   margin-top: -8px;  position:absolute;  opacity: 0.3; transition: all 0.4s ease-in-out;  width: 40px;}
.TriSea-technologies-Switch > label::after { background: rgb(255, 255, 255);  border-radius: 16px;  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';   height: 24px;   left: -4px;  margin-top: -8px;  position: absolute;   top: -4px;  transition: all 0.3s ease-in-out;   width: 24px;}
.TriSea-technologies-Switch > input[type="checkbox"]:checked + label::before { background: inherit;  opacity: 0.5;}
.TriSea-technologies-Switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px;}
/*toggle switch css here*/


/*css for live call chat widget design 4*/
.live-call-widget44 {bottom: 0; font-size: 12px; right: 15px; position: fixed;  width: 305px; box-shadow: 0px -1px 8px 0px rgba(0,0,0,0.45); border-radius: 0px 5px 0 0px;
}
.widget_box_fixFt{width: 325px!important}
.live-call-widget44 header {background: #253033; border-radius: 0px 5px 0px 0;  color: #fff;  cursor: pointer;  padding: 0;}
.live-call-widget44 h4:before {  background: #0dca38 ;  border-radius: 50%;  content: "";  display: inline-block;  height: 8px;  margin: 0 8px 0 0;  width: 8px;}
.live-call-widget44 h4 { font-size: 12px; margin-bottom: 0px;} 
.live-call-counter44 { background: #135712;   border-radius: 5px 5px 0 0px;  font-size: 12px;   height: 21px;
  left: 0;  line-height: 22px;  margin: -20px 0 0 0px;  position: absolute;  text-align: center;  top: 0;  width: 80px; box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.20);}
 
 .tab-content-live-call{display: none;/* background: #fff; */}
 .tab-content-live-call.current{display: inherit;}

.widget-section44{background: #232728; background-repeat: repeat; height: 300px; /*border:solid 1px #000;*/ }   
  
 ul.tabs-livecall44{margin: 0 auto;  padding: 0px; width: 90%; list-style: none;     }
 ul.tabs-livecall44 li{background: none; color: rgb(256,256,256, .6);  display: inline-block; width: 100%; text-align: center; padding:6px 0px 3px; cursor: pointer; position: relative; } 
 ul.tabs-livecall44 li.current{  color: #fff; font-weight: 400;  }
 ul.tabs-livecall44 li.current:after{position: absolute; left: 3px;    width: 70px; height: 2px; bottom: 0px; background:#ffa000; content: ""; }

 ul.tabs-livecall44 li button{background: none; border:none; padding: 0px; cursor: pointer; margin-left: 0px;}
 ul.tabs-livecall44 li button:focus{outline: none;  }
 ul.tabs-livecall44 li button i.fa-play-circle{color: #eee}
 ul.tabs-livecall44 li button i.fa-pause-circle{color: #eee }

 .tabs-livecall44 .owl-item:last-child li{border-right: 0px;}
  
 .tabs-livecall44  .owl-nav button:focus{ outline: none; }
 .tabs-livecall44 .owl-nav .owl-prev{ position: absolute; top: 2px; left: -10px; }
 .tabs-livecall44 .owl-nav .owl-next{ position: absolute; top: 2px; right: -10px; }
 .tabs-livecall44 .owl-nav span{font-size: 24px;   color: #ffa000; text-align: center;   line-height: normal;  display: inline-block; 
  line-height: 20px; border-radius:50%; outline: none; transition: all .2s;} 
 .tabs-livecall44 .owl-nav button:hover span{ background:}

 
 .potion_sec44{ display: inline-block; width: 100%; margin-top: 0px; margin-bottom: 5px; }  

 .caller-info-44{ display: inline-block; width: 70%; text-align: left; padding-left: 25px;  }
 .caller-info-44 span{ font-size: 22px; font-weight: 300; display: block; color: #6970E4;  position: relative; padding-left: 20px; }
 .caller-info-44 span i{ position: absolute; left: -15px; font-size: 30px; top: 5px; }

 .caller-info-44  font{ color: rgba(256,256,256,.7); font-size: 14px; padding-top: 0px; display: block; padding-left: 3px;  width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

 .caller-sec-44{ width: 49%; display: inline-block; vertical-align: top}


 .caller-time-sec-44{ display: inline-block; width: 100%;  padding-left: 25px; }
 .talktime-44{ display: inline-block; width: 100%; margin-top: 10px; text-align: left; vertical-align: top; padding-left: 25px;}
 .talktime-44 span{ font-size:  24px; display: inline-block; color: #007bff ;  vertical-align: middle; display: block; }
  .talktime-44 span label{margin-bottom: 0px;}
 .talktime-44 font{ font-size: 12px; color: #fff ; vertical-align: middle; opacity: .5; padding-left: 10px;}

 .calltime-44{ display: inline-block; width: 100%; margin-top: 10px; text-align: left;  vertical-align: top; padding-left: 35px;}
 .calltime-44 span{ font-size:  15px; display: inline-block; color: #ffa000;   vertical-align: middle; display: block; }
 .calltime-44 span label{margin-bottom: 0px;}
 .calltime-44 font{ font-size: 12px; color: #fff; vertical-align: middle; opacity: .5 }

 .action-sec-44{ display: inline-block; width: 50%; vertical-align: top; margin-top: 0px; padding-right: 10px;}
 
 .action-btn-44{ display: inline-block; width: 100%; text-align: center; margin-top: 15px;  }
 .action-btn-44 ul{ list-style: none; margin: 0px; padding: 0px; }
 .action-btn-44 ul li{ display: inline-block; width: 30%; margin-bottom: 10px; text-align: center; }
.action-btn-44 ul li:last-child{margin-bottom: 0px;}


.setting-icon-44{ display: inline-block; width: 100%; padding-left: 25px; color: #aaa; padding-top: 7px; font-size: 12px;  }
.setting-icon-44 font{padding-left: 5px; color: #999; cursor: pointer;}
 
.call-status-44 {   display: inline-block; width: 28%; text-align: left; vertical-align: top; margin-top: 10px;} 
.call-status-44 font{animation: pound .5s infinite; font-size: 20px;  color: #ccc;  display: inline-block;}

 @keyframes pound { from { transform: none; }
  50% { transform: scale(1.2); }
  to { transform: none; }
}

.blinking{
    animation:blinkingText 1s infinite;
}
@keyframes blinkingText{
    0%{     color: #ffa000;    }
    49%{    color: transparent; }
    50%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #ffa000;    }
}

.btn-float { width: 34px;  height: 34px;  line-height: 30px;  display: inline-block;  border: none;  font-size: 13px;  color: #fff;  text-align: center;  position: relative;
  transition: 0.3s;  border-radius: 50%;  cursor: pointer;  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11); border:solid 2px transparent;}
.btn-float:hover { text-decoration: none;  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.13);}
.btn-float:active, .btn-float:focus {  outline: none;} 
.btn-float.yellow { background: #ffa000;}
.btn-float.blue { background: #40c4ff;}
.btn-float.green { background: #00e676;}
.btn-float.purple {background: #8e24aa;}
.btn-float.pink {background: #e91e63;}
.btn-float.theme-blue{background: #4A6AFB}
.btn-float.light-purple{background: #7986CB}
.btn-float.light-green{background: #DCE775} 
.btn-float.bg-red{background: #F44336}
.btn-float.bg-orange{background: #FF5722}
.btn-float.busy {background: #9138b2}

.btn_disabled{background: #64677169}

.btn_m_green{background: mediumseagreen; border:none; color: #fff;}
.btn_m_green:hover, .btn_m_green:focus{box-shadow: none; }

.btn-float.inactive{ background: #666!important; cursor: default;}

.call_no_response_btn{display: inline-block; width: 100%; padding: 10px 10px; }
.call_no_response_btn button{font-size: 10px; padding: 2px 4px; margin-right: 5px;}
/*.btn-float.active{border:solid 2px #fff;}
*/



.lds-ellipsis { display: inline-block; position: relative; width: 20px;  height: 10px;}
.lds-ellipsis div {position: absolute;  top: 5px;  width: 8px;  height: 8px;  border-radius: 50%;  background: #ccc;  animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1) { left: 6px;  animation: lds-ellipsis1 0.8s infinite; background: #F44336}
.lds-ellipsis div:nth-child(2) {  left: 6px;  animation: lds-ellipsis2 0.8s infinite; background: #40c4ff}
.lds-ellipsis div:nth-child(3) {  left: 20px;  animation: lds-ellipsis2 0.8s infinite; background: #ffa000}
.lds-ellipsis div:nth-child(4) { left: 39px;  animation: lds-ellipsis3 0.8s infinite; background: #28a745}
@keyframes lds-ellipsis1 { 
  0% {  transform: scale(0);  }
  100% { transform: scale(1);  }
}
@keyframes lds-ellipsis3 {
  0% {   transform: scale(1);  }
  100% { transform: scale(0);  }
}
@keyframes lds-ellipsis2 {
  0% { transform: translate(0, 0);  }
  100% { transform: translate(19px, 0);  }
}


.add-note-flip{ display: inline-block; width: 100%; padding:15px 25px; }
.add-note-flip h3{font-size: 18px; margin: 10px 0px 10px; padding: 0px; color: #FF5722; font-weight: 300}
.add-note-flip .form-control{ font-size: 12px; padding: 0px; width: 100%; margin-bottom: 20px; margin-top: 10px; border:none; border-bottom: solid 1px #ddd; border-radius: 0px; }
.add-note-flip .form-control:hover, .add-note-flip .form-control:focus{ outline: none; box-shadow: none }
.add-note-flip  label{margin-bottom: 0px;}
.add-note-flip .btn{ font-size: 12px; margin-top: 20px; }
.add-note-flip .btn-primary{background:#FF5722; border-color: #FF5722 }
.add-note-flip .btn-primary:hover, .add-note-flip .btn-primary:focus{box-shadow: none; background:#FF5722 }

.flipbox { width: 100%;  height: 100%;  position: absolute;  -webkit-transition: -webkit-transform .5s;  -moz-transition: -moz-transform .5s;  -o-transition: -o-transform .5s; -ms-transition: transform .5s;
    transition: transform .5s;  -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;  transform-style: preserve-3d;  -ms-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%;} 
.flipbox .frontview, .flipbox .backview  { display: block;  height: 100%;  width: 100%;  position: absolute;  background: #fff;  -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden; -o-backface-visibility: hidden;  backface-visibility: hidden;
} 
.flipbox .backview {-webkit-transform: rotateY( 180deg );  -moz-transform: rotateY( 180deg );  -o-transform: rotateY( 180deg );  -ms-transform: rotateY( 180deg ); 
  transform: rotateY( 180deg ); z-index: 999}
.flipbox.flipped {-webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg );  -ms-transform: rotateY( 180deg ); 
  transform: rotateY( 180deg );}

.flipbox.flipped .frontview{display: none;}
  
 .menu-wrapper {  position: relative;  max-width: 290px;  height: 30px;    margin: 0 auto; overflow-x: hidden;  overflow-y: hidden;}
.menu {height: 50px; box-sizing: border-box; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; display: inline-block; width: 100%!important; } 
 
ul.tabs-livecall44 li{ display: inline-block; width: 32%; text-align: left; }
ul.tabs-livecall44 li a{ color: rgb(256,256,256, .6); }
ul.tabs-livecall44 li a:hover{text-decoration: none}
ul.tabs-livecall44 li a span i{margin-left: 4px}

 ul.tabs-livecall44 li a.active{  color: #fff; font-weight: 400; position: relative; }
 ul.tabs-livecall44 li a.active:after{position: absolute; left: 0px;  width: 68px; height: 2px; bottom: -8px; background:#ffa000; content: ""; }


.paddle {position: absolute; top: -3px; line-height: normal; bottom: 0;  width: 20px; cursor: pointer; background: #253033; border:none; outline: none; font-size: 24px; color: #ffa000; padding: 0px;}
.left-paddle {left: -7px;}
.right-paddle {right: -7px;}
.hidden {display: none;} 

  
.call_forward_agent_sec{min-height: 300px;}
.call_forward_agent_sec .nav .nav-item .nav-link {color: #cdcdcd; font-size: 13px; padding: 5px 10px;}
.call_forward_agent_sec .nav .nav-item .nav-link.active{color: #fff;}


.call_forward_agent_sec .search_group{display: inline-block; width: 100%; margin-bottom: 10px; border-radius: 5px;  border: none; background: #8e88594d;
  height: 35px; padding: 0px 0px 0px 25px; position: relative;}
.call_forward_agent_sec .search_group:before{ content: "\f002"; position: absolute; left: 7px; top: 5px; color: #fff; font-size: 14px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.call_forward_agent_sec .search_group input { display: block; width: 100%;padding: 5px; font-size: 14px; color: #fff; background: none; border:none; outline: none;}
.call_forward_agent_sec .search_group input:focus{background: none; border:none; outline: none;}

.call_forward_agent_sec .search_usr{display: inline-block; width: 100%; margin-bottom: 10px; border-radius: 5px;  border: none; background: #8e88594d;
  height: 35px; padding: 0px 0px 0px 25px; position: relative;}
.call_forward_agent_sec .search_usr:before{ content: "\f002"; position: absolute; left: 7px; top: 5px; color: #fff; font-size: 14px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.call_forward_agent_sec .search_usr input { display: block; width: 100%;padding: 5px; font-size: 14px; color: #fff; background: none; border:none; outline: none;}
.call_forward_agent_sec .search_usr input:focus{background: none; border:none; outline: none;}
 

.callForwardAgentList{list-style: none; margin: 0px; padding: 0px; }
.callForwardAgentList li{ display: inline-block; width: 100%; background: #333; color: #cdcdcd; padding: 10px; border-radius: 5px; position: relative; font-size: 13px; margin-bottom: 10px; }
.callForwardAgentList li i.fa-user, .callForwardAgentList li i.fa-users{margin-right: 5px; vertical-align: middle;}
.callForwardAgentList li span{margin-right: 5px; color: #5394da; min-width: 55px; display: inline-block; vertical-align: middle;}
.callForwardAgentList li .agant_nme21{display: inline-block; font-size: 14px; max-width: 170px; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; color: #f9a825; vertical-align: middle;}
.callForwardAgentList li .action_sec214{display: inline-block; float: right;}
.callForwardAgentList li .action_sec214 .btn{ padding: 6px 10px; border-radius: 20px; font-size: 12px; }

.CFgroupList li span{color: #d5ae3b}
.CFgroupList li .agant_nme21{color: #ffffff8c}

/*css for sip changes bbx*/
.sipStatusSec{background: #353c40; padding: 5px 10px ; display: inline-block; width: 100%; color: #cdcdcd; border-radius:0px 5px 0px 0;}
.sipStatusSec font{display: inline-block; vertical-align: middle; margin-top: 4px;} 
.sipStatus{margin-left: 4px; }
.sipStatusSec.connected .sipStatus{color: #2cca1e;}
.sipStatusSec.disconnected .sipStatus{color: #f97658;}

.sipactnBtn{ font-size:12px; padding:5px 10px; border:none; outline:none; border-radius:3px; float: right; line-height:normal; transition:all .15s ease-in-out,   border-bottom:5px solid #BD3E31; display:inline-block; } 
.sipStatusSec.connected .sipactnBtn{ background:#a84545; color:#f0f0f0}
.sipStatusSec.connected .sipactnBtn:hover{ background:#b94f4f; }

.sipStatusSec.disconnected .sipactnBtn{ background:#3b7327; color:#f0f0f0 }
.sipStatusSec.disconnected .sipactnBtn:hover{background: #3f8c25}

 .reconnectBtn{position: absolute; right: 31px; top: 57px; padding: 4px 14px!important; border-radius: 20px!important; font-size: 12px!important;}

/*css for sip changes bbx*/

/*css for live call chat widget design 4*/


.default_audio_playar{width: 220px; background: burlywood; border-radius: 30px; height: 35px;  }
.mini_center_form{display: table; width: 600px; margin: 100px auto 0px;}

.did_Tag_ivr_list{ background: #423c3c; padding: 3px 4px; border-radius: 5px; display: inline-block; margin-bottom: 5px;}
 
.popCounter span{ display: block; font-size: 15px; padding-bottom: 5px;}
.popCounter span font{padding-left: 10px; }


/*css for custom dashboard part*/
.content_section_box{ border:dashed 1px #dddddd63; display: inline-block; width: 100%; min-height:250px; transition: all .2s; }
.content_section_box:hover{border:solid 1px #dddddd63; box-shadow: 0px 0px 4px #4e4a4a}
.add-option-btn {display: block;  text-align: center;  padding: 100px 0px;  opacity: .4;  transition: all .2s;}
.add-option-btn img { width: 60px;  height: 60px;}
.add-option-btn:hover{opacity: 1;}

.content_section_box.complete{background: #27292b}
.content_section_box .add-message{padding-top: 90px; display: block; text-align: center; }
.content_section_box .add-message p{font-size: 18px; color: cornflowerblue }
.content_section_box .action_option89{ display: block; }
.content_section_box .action_option89 a{ font-size: 24px; margin-right: 10px;  vertical-align: middle; }

.create_cd_from_sec .form-group .input_title{ color: #e5e5e5; font-size: 14px; font-weight: normal; margin-bottom: 5px; display: block; }
.create_cd_from_sec .form-group .form-control{ border-color: #424242; background: #424242; border-radius: 0px; box-shadow: none; font-size: 14px; color: #ccc; }
.create_cd_from_sec .form-group .form-control:hover, .create_cd_from_sec .form-group .form-control:focus{box-shadow: none; border-color: #e0d9d95e }

.create_cd_from_sec .form-group .custom-control label{color: #ccc; font-size: 13px;}

.custom-chart-box {background: #fff;  border: 1px solid #ddd; padding-top: 15px; padding-left: 15px; box-shadow: 0 22px 35px -16px rgba(0,0,0, 0.1);}
select.flat-select {-moz-appearance: none;  -webkit-appearance: none;  appearance: none;  background: #008FFB url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'60px\' height=\'60px\'><polyline fill=\'white\' points=\'46.139,15.518 25.166,36.49 4.193,15.519\'/></svg>") no-repeat scroll right 2px top 9px / 16px 16px;
    border: 0 none;   border-radius: 3px;   color: #fff;  font-family: arial,tahoma;  font-size: 16px;   font-weight: bold;  outline: 0 none;  height: 33px;  padding: 5px 20px 5px 10px;
    text-align: center;  text-indent: 0.01px;  text-overflow: "";  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  transition: all 0.3s ease 0s;  width: auto;  -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;  -ms-transition: 0.3s ease all;  -o-transition: 0.3s ease all;  transition: 0.3s ease all; }
select.flat-select:focus, select.flat-select:hover {  border: 0;   outline: 0;  }
.apexcharts-canvas {  margin: 0 auto;}
 

.custom_db_tab{border-color: #c79b1838}
.custom_db_tab .nav-item .nav-link img{width: 40px;}
.custom_db_tab .nav-item .nav-link h5{color: #999;}
.custom_db_tab .nav-item .nav-link.active h5{color: #fff}
.custom_db_tab .nav-item .nav-link:hover{border-color:#c79b1838 #c79b1838 #383b3e;  }
.custom_db_tab .nav-item.show .nav-link, .custom_db_tab .nav-link.active{background: #383b3e; border-color: #c79b1838 #c79b1838 #383b3e;  }

.custom_db_option_tab{ border: solid 1px #c79b1838; border-top:none; min-height: 300px; padding: 25px 50px; background: #383b3e}

/*css for custom dashboard part*/

.docket_expiry li label{background: #2b2a2ab3}

.message_bx_field{background: #38bff329; border:solid 1px #bde0fe66; border-radius: 5px; padding: 8px;}
.response_bx_field{background: #84ed8121; border:solid 1px #36893ca1; border-radius: 5px; padding: 8px; display: inline-block; width: 80%;}
 
.obdconference_livecall  .exle_bx{ display: inline-block; width: 100%; padding: 25px; background: #84ed8121; text-align: center; color: #fff; 
  border:solid 1px #36893ca1; border-radius: 4px; min-height: 157px; }
.obdconference_livecall  .exle_bx.total_call{background:#36798966 ; border-color:#367989a1 ;}
.obdconference_livecall  .exle_bx.inprogress{background: #ede68121; border-color: #897436a1}
.obdconference_livecall  .exle_bx.activecall{background: #84ed8121; border-color:#36893ca1 }
.obdconference_livecall  .exle_bx.action_blck{background: #81d9ed21; border-color: #365a89a1}

.obdconference_livecall  .exle_bx i{display: block;   font-size: 24px;}
.obdconference_livecall  .exle_bx span{display: block; font-size: 16px; font-weight: 300; color: #ffffff94; margin: 10px 0px;}
.obdconference_livecall  .exle_bx font{font-size: 24px;}


.no_record_available{background: #e2b31f1a; border:dashed 1px #b89836; font-size: 18px; }
 


/*css for dashboard page*/
.top_count_detail{ display: inline-block; margin-right: 20px; margin-top: -12px; padding-right: 20px; border-right:solid 1px #dddddd1f; }
.top_count_detail:last-child{border-right: 0px; padding-right: 0px; margin-right: 0px;}

.top_count_detail .text-success{color:#28a745d6 !important }
.top_count_detail .text-primary{color:#007bffb5 !important }
.top_count_detail .text-danger{color:#dc3545b0 !important }
.top_count_detail .text-warning{color:#ffc107b8 !important }
.top_count_detail .text_milky{color:#f8f9fa9c}

.mini_chart{width: 80px; display: inline-block; margin-left: 10px; z-index: 0; position: relative;}

.progress_db{display: inline-block; vertical-align: top; margin-top: 15px; margin-left: 10px;}
.progress_db .progress{width: 100px; background: #141618}
.progress_db .progress-bar{background: #007bff38; color: #ffffff7a}
.progress_db .progress-bar.bg-success{background: #30fd1242!important }
.progress_db .progress-bar.bg-info{background: #17a2b869!important }
.progress_db .progress-bar.bg-warning{background: #007bff38!important}
.progress_db .progress-bar.bg-danger{background: #dc354561!important }

.db_Section_bg{width: 100%; min-height: 80vh; background: #3234358c}
.db_Section_bg h2{font-family: Comfortaa; color: #ffffffd6; font-size: 16px; padding: 15px;}

.queue_count{text-align: center; color: #fff;}
.queue_count .col{padding: 0px;}
.queue_count span{ display: block; font-size: 20px; color: #e24c00 }
.queue_count font{font-size: 13px; color: #ffffff8c; line-height: normal;}

.db_Section_bg hr{border-color: #ffffff0a; }

.queue_table{margin-top: 20px; }
.queue_table table tr th{color: #9e9e9e; font-weight: 400; font-size: 13px; border-top: solid 1px #ffffff0a; border-bottom: solid 2px #333; 
  background: #202223; padding: 5px; vertical-align: middle;}
.queue_table table tr td{color: #ffffff8c; border-color: #131517ad; padding: 8px 5px;}
.queue_table table tr:hover td{background: #ffffff0a;} 
.queue_table table tr td .agent_name{color: #f9a825; text-transform: capitalize; width:95px; font-size: 13px;}

.queue_table table tr td .agent_info_drop{background: #323638;}

.agent_summary_head{display: inline-block; text-align: right; float: right; vertical-align: middle; padding: 15px;}
.agent_summary_head span{display: inline-block; margin-left: 15px; font-size: 14px;  color: #ffffffa8;  }
.agent_summary_head span font{margin-left: 5px;}

.db_agent_table{margin-top: 0px; }
.db_agent_table table tr th{color: #9e9e9e; font-weight: 400; font-size: 13px; border-top: solid 1px #ffffff0a; border-bottom: solid 2px #333; 
  background: #202223; padding: 5px 8px;  line-height: 20px;}
.db_agent_table table tr td{color: #ffffff8c; border-color: #131517ad; padding: 5px 8px; vertical-align: middle; line-height: 20px; font-size: 12px;}

.db_agent_table table tr:hover td{background:#ffffff0a }

.db_agent_table table tr td .agent_name{color: #f9a825; text-transform: capitalize; width: 150px; font-size: 13px;}
.db_agent_table table tr td .agent_info_drop{background: #323638;}
.db_agent_table table tr td .agent_name .agent_id{display: inline-block; width: 50px; font-size: 12px;}
.db_agent_table table tr td.agent_detail_db span.number{display: block; padding-left: 50px; font-size: 12px;}
.db_agent_table table tr td.agent_detail_db span.number i{transform: rotate(45deg); font-size: 11px;}
.db_agent_table table tr td.agent_detail_db .dropdown-toggle::after{margin-top: 10px;}

 
.db_agent_table table tr td.agent_login_db .no{color: #dc3545; font-size: 14px; padding-left: 10px;}
.db_agent_table table tr td.agent_login_db .login_type{ display: inline-block;  color: #ffffffb8  }
.db_agent_table table tr td.agent_login_db font{display: inline-block; margin-right: 10px; font-size: 11px;}
.db_agent_table table tr td.agent_login_db font i{margin-right: 2px;} 
.db_agent_table table tr td .available_duration{font-size: 13px;  }

.db_agent_table table tr td.call_status_db .call_type{padding: 0px 5px; background: #666; border-radius: 5px; display: inline-block;
 text-align: center; min-width: 30px; vertical-align: initial;}
.db_agent_table table tr td.call_status_db .call_type.green{background: #2bb00f94; color: #fff; font-size: 11px;}
.db_agent_table table tr td.call_status_db .call_type.blue{background: #1979dea6; color: #fff; font-size: 11px;}
.db_agent_table table tr td.call_status_db .call_type.yellow{background: #dead193d; color: #fff; font-size: 11px;}
.db_agent_table table tr td.call_status_db .call_type.red{background: #de19193d; color: #fff; font-size: 11px;}

.db_agent_table table tr td.call_status_db .db_caller_number{padding-left: 6px; color: #52af90}

.db_agent_table table tr td.call_status_db span.no{color: #dc3545  ; font-size: 14px; padding-left: 20px;}
 
 
.db_agent_table table tr td.call_db span{padding: 0px 5px; font-size: 13px;}
.db_agent_table table tr td.call_db span font{color: #fff}
.db_agent_table table tr td.call_db span i{color: #999}

.hhmmss_indicator{display: block; font-size: 10px; font-style: normal; text-align: left; line-height: normal;}

.filter_req_cmn_85{border-left: solid 1px #ffffff12; width: 500px;}
.filter_req_cmn_85 .text-red{color: #dc3545}
.filter_req_cmn_85 code{font-size: 13px; font-weight: 600; color: #e67b36;}

.db_agent_list, .db_queue_list{background: #3234358c!important}

/*css for dashboard page*/



/*css for agent profile page*/
.custom_dropdwn_gray{background: #323638; box-shadow: 0px 0px 35px -3px black;}
.custom_dropdwn_gray .dropdown-item{ color: #ffffffa3; font-size: 13px; }
.custom_dropdwn_gray .dropdown-item:hover, .custom_dropdwn_gray .dropdown-item:focus{color: #fff; background: transparent;}
.ap_left_section_part{width: 280px;}
.ap_rest_content_part{width: calc(100% - 280px);}
.label_indicator{padding: 4px 15px; display: inline-block; width: 250px; background: #262829; color: #a8a5a0; border-radius: 2px; font-size: 14px;} 
.stick_count_detail{ display: inline-block;   border-right:dotted 1px #f9f4f43b; color: #ffffff8c ; 
  vertical-align: top; min-height: 65px;}
.stick_count_detail:last-child{border-right: 0px; padding-right: 0px; margin-right: 0px;}

.stick_count_detail .text-success{color:#28a745d6 !important }
.stick_count_detail .text-primary{color:#128fda !important }
.stick_count_detail .text-danger{color:#d84040  !important }
.stick_count_detail .text-warning{color:#f9bf3a !important }

.text_milky {color: #f8f9fa9c}

.login_type{color: #ffffffb8}

.live_call_prfl .call_type{padding: 0px 5px; background: #666; border-radius: 5px; display: inline-block;
 text-align: center; min-width: 30px; vertical-align: initial;}
.live_call_prfl .call_type.green{background: #2bb00f94; color: #fff; font-size: 11px;}

.ap_section_bg{width: 100%; min-height: 150px; max-height: 218px; overflow: auto; background: #3234358c; margin-bottom: 8px;}
.ap_section_bg h2{font-family: Comfortaa; color: #ffffffd6; font-size: 16px; padding: 15px;} 
.ap_section_bg table tr th, .ap_section_bg table tr td{padding: 5px 8px;}

.ap_middle_Sec{width: 100%; background: #3234358c;  padding: 10px;}
.ap_middle_Sec h2{font-family: Comfortaa; color: #ffffffd6; font-size: 16px; padding: 15px;} 
.agent_count_data hr{border-color: #ffffff14; margin: 0px;}
._after_outer{position: relative;}
._after_outer:after{position: absolute; right: 0px;width: 1px; height: 30px; background: #ffffff14; content: ""; top: -31px;}

.agent_count_data .t_indicator6{ 
  color: #ffffff8a; position: absolute; left: 24px; top: 20px; font-size: 16px; font-family: Comfortaa}
.agent_count_data .t_indicator6:before{position: absolute; left: -10px; bottom: -18px; width: 1px; height: 40px; background: #ffffff14; content: "";}
.agent_count_data .t_indicator6:after{position: absolute; left: -10px; top: 25px;   width: 10px; height: 1px; background: #ffffff14; content: "";}

.agent_count_data .t_indicator6 font, .agent_count_data .t_indicator7 font{writing-mode: vertical-rl; 
  transform: rotate(180deg);}

.agent_count_data .t_indicator7{ 
  color: #ffffff8a; position: absolute; left: 24px; top: 10px; font-size: 16px; font-family: Comfortaa}
.agent_count_data .t_indicator7:before{position: absolute; left: -10px; top: -26px; width: 1px; height: 40px; background: #ffffff14; content: "";}
.agent_count_data .t_indicator7:after{position: absolute; left: -10px; top:14px;   width: 10px; height: 1px; background: #ffffff14; content: "";}


.agent_call_record{display: block; height: 85px;   padding: 10px}
.agent_call_record span{color: #ffffff8c; font-size: 13px; display: inline-block; line-height: normal; padding-bottom: 5px;}
.agent_call_record font{font-size: 18px; display: block;}

.agent_profile_working_days i{font-size: 13px;}
.agent_profile_working_days i.active-day{background: #265296}

.agent_record_tbl .clone-column-table-wrap{background:#242628 ; box-shadow: rgba(13,13,15,.8) 6px 0 10px -5px !important}
.agent_record_tbl .table{background:#242628!important }
/*css for agent profile page*/


/*css for genral report page*/

.general_report_page{margin-top: 0px;  background: #3234358c; min-height: 500px;}
.general_report_page table tr th{color: #9e9e9e; font-weight: 400; font-size: 13px; border-top: solid 1px #ffffff0a; border-bottom: solid 2px #333; 
  background: #202223; padding: 8px 8px; vertical-align: middle;}
.general_report_page table tr td{color: #ffffff8c; border-color: #131517ad; padding: 8px 8px; vertical-align: middle;}
 
.general_report_page table tr:hover td{background:#ffffff0a }

.general_report_page table tr td .agent_name{color: #f9a825; text-transform: capitalize; width: 150px; font-size: 13px;}
.general_report_page table tr td .agent_info_drop{background: #323638;}
.general_report_page table tr td .agent_name .agent_id{display: inline-block; width: 50px; font-size: 12px;}
.general_report_page table tr td.agent_detail_db span.number{display: block; padding-left: 50px;}
.general_report_page table tr td.agent_detail_db span.number i{transform: rotate(45deg); font-size: 11px;}
 
.general_report_page table tr td.agent_login_db .no{color: #dc3545  ; font-size: 14px; padding-left: 10px;}
.general_report_page table tr td.agent_login_db .login_type{ display: inline-block;  color: #ffffffb8  }
.general_report_page table tr td.agent_login_db font{display: inline-block; margin-right: 10px; font-size: 11px;}
.general_report_page table tr td.agent_login_db font i{margin-right: 2px;} 
.general_report_page table tr td .available_duration{font-size: 13px;  }

.general_report_page table tr td.call_status_db .call_type{padding: 0px 5px; background: #666; border-radius: 5px; display: inline-block;
 text-align: center; min-width: 30px; vertical-align: initial;}
.general_report_page table tr td.call_status_db .call_type.green{background: #2bb00f94; color: #fff; font-size: 11px;}
.general_report_page table tr td.call_status_db .call_type.blue{background: #1979dea6; color: #fff; font-size: 11px;}
.general_report_page table tr td.call_status_db .call_type.yellow{background: #dead193d; color: #fff; font-size: 11px;}
.general_report_page table tr td.call_status_db .call_type.red{background: #de19193d; color: #fff; font-size: 11px;}

.general_report_page table tr td.call_status_db .db_caller_number{padding-left: 6px; color: #52af90}

.general_report_page table tr td.call_status_db span.no{color: #dc3545  ; font-size: 14px; padding-left: 20px;}

.db_agent_table table tr td.call_db span{padding: 0px 5px; font-size: 13px;}
.db_agent_table table tr td.call_db span font{color: #fff}
.db_agent_table table tr td.call_db span i{color: #999} 

.general_report_page .clone-column-table-wrap table{background:#242628!important }
.general_report_page .clone-column-table-wrap{box-shadow:rgba(0, 0, 0, 0.8) 6px 0px 10px -5px!important }

.inline_filter .form-control{ background-color:#ffffff21 ; font-size: 13px;border-color: #ced4da59;  color: #ccc;}
.inline_filter .filtring_btn{position: relative;}
.reset_btn_gr{position: absolute; bottom: -20px; color: #49c7af9e; background: none; padding: 0px; font-size: 12px; border: none; left: 5px;}
.reset_btn_gr:hover, .reset_btn_gr:focus{outline: none;}
.check_dropdown .btn-secondary{background: #ffffff21; border-color:#ced4da59; color: #ccc; }
.check_dropdown .btn-secondary:hover, .check_dropdown .btn-secondary:focus{box-shadow: none!important;}
.check_dropdown  .dropdown-menu ul{ list-style: none; margin: 0px; padding: 0px;  }
.check_dropdown  .dropdown-menu ul li{padding: 4px 8px; font-size: 13px;}
.check_dropdown  .dropdown-menu ul li label{color: #fff; display: inline-block;}

/*css for genral report page*/


/*css for agent timing profile page*/

.custom_date_picker{display: inline-block; vertical-align: middle; background: #ffffff14; padding: 0px; margin-top: -8px; border-radius: 5px; margin-left: 5px;}
.custom_date_picker:hover{background: #393939;}
.custom_date_picker button{font-size: 13px; background: none; border: none; color: #cdcdcd; padding: 5px 10px}
.custom_date_picker button:hover, .custom_date_picker button:focus{outline: none; border: none;}
.custom_date_picker button.btn_prev {border-radius: 5px 0px 0px 5px}
.custom_date_picker button.btn_next {border-radius: 0px 5px 5px 0px}
.custom_date_picker button.btn_prev:hover, .custom_date_picker button.btn_next:hover{background: #2c2a2a;}

.custom_date_picker button.active{background: #534a39; border-radius: 5px;}

.btn-custom-blue{letter-spacing: normal;  font-size: 13px; 
text-align: center; background: #1976D229; border:solid 1px #1976D263; color: #1976D2; padding: 5px 10px;
border-radius: 2px;  cursor: pointer;}

.btn-custom-blue:hover, .btn-custom-blue:focus{background: #043851; color: #84B1DE; border-color: #043851;}

.basic-btn{ font-size: 13px; border: none; color: #cdcdcd; padding: 5px 12px; background: #ffffff14; border-radius: 5px; display: inline-block;}
.basic-btn:hover{background: #393939; color: #cdcdcd}

.refrsh_btn{background: #378122b3}
.refrsh_btn:hover{background: #378122b3}

.search_btn{background: #29230c; border:solid 1px #6f4d1e; padding: 5px 10px; border-radius: 2px; color: #e49a3a96; font-size: 13px;}
.search_btn:hover{background: #8e612285}

.pdng_4px{padding: 4px 10px!important;}
.p6-12{padding: 6px 12px;}

.bs-popover-bottom.popover{background: #000;}
.bs-popover-bottom.popover .popover-header{background: #000; border-bottom: 1px solid #ebebeb1f; color: #fff;}
.bs-popover-bottom.popover .popover-header:before{border-bottom-color: #000}
.bs-popover-bottom.popover .popover-body{color: #ffffff8a; font-size: 13px; } 
.bs-popover-bottom .bs-popover-auto[x-placement^="bottom"] > .arrow::after, .bs-popover-bottom > .arrow::after{border-bottom-color: #000}



.bs-popover-top.popover{background: #000;}
.bs-popover-top.popover .popover-header{background: #000; border-bottom: 1px solid #ebebeb1f; color: #fff;}
.bs-popover-top.popover .popover-header:before{border-bottom-color: #000}
.bs-popover-top.popover .popover-body{color: #ffffff8a; font-size: 13px; } 
.bs-popover-auto[x-placement^="top"] > .arrow::after, .bs-popover-top > .arrow::after{border-top-color: #000}


.node_contentbx{width: 100%; font-size: 13px; padding: 5px 10px; border:solid 1px #ffffff24; max-width: 200px; display: -webkit-box;   
   -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden; line-height: 20px; border-radius: 5px; background: #303535}

.percentage_bar{ width: 180px; }
.percentage_bar .progress{border-radius: 0px; background: #e9ecef2e; height: 10px;  cursor: pointer;} 
.percentage_bar .progress .progress-bar{cursor: pointer;}

.tr_collapse_data  .percentage_bar .progress{height: 6px;}

 
.percentage_info_pop{width: 200px;}
.percentage_info_pop span{display: inline-block; width: 15px; height: 15px;   vertical-align: middle;  border-radius: 2px; margin-right: 5px;}
.talkbg_per{background:#007bff ;}
.breakbg_per{background: #dc3545 ;}
.holdbg_per{background:#ffc107  ;}
.availbg_per{background:#28a745  ;}

.agent_Select_filter_btn{background: #004D402B; color: #19927D; border: solid 1px #004D40; padding: 5px 10px; border-radius: 2px; margin-right: 5px; font-size: 13px;}
.agent_Select_filter_btn:hover, .agent_Select_filter_btn:focus,.agent_Select_filter_btn:visited{background: #004D40; color: #1bc3a7}
.agent_Select_filter_btn i{margin-left: 5px;}
.agent_Select_filter_btn:after{display: none;}
.user_select_dropdown{width: 270px; background: #004D40; margin-top: 8px; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}
.user_select_dropdown:after{
  width: 0;  height: 0;   border-left: 8px solid transparent;  border-right: 8px solid transparent;   border-bottom: 8px solid #004D40; position: absolute; top: -8px; left: 40px; content: "";
}

.user_select_dropdown .nav-tabs{border-color:   #ffffff26}
.user_select_dropdown .nav-tabs .nav-link{  padding: 4px 5px; background: none; border-radius: 0px; border:0px; color: #cdcdcd; font-size: 14px;}
.user_select_dropdown .nav-tabs .nav-link.active{border-bottom: solid 2px #EA9108}
.user_select_dropdown .serach_bx_sec{ display: inline-block; width: 100%; padding: 10px; }
.user_select_dropdown .serach_bx_sec .serach_bx_inner{ width: 100%; background-color: #ffffff21; padding: 4px 10px 6px; border-radius: 4px; color: #cdcdcd }
.user_select_dropdown .serach_bx_sec .serach_bx_inner i{vertical-align: middle; font-size: 12px;}
.user_select_dropdown .serach_bx_sec .serach_bx_inner input{background: transparent; border: 0px; width: auto; color: #cdcdcd; font-size: 13px; 
  vertical-align: middle;}
.user_select_dropdown .serach_bx_sec .serach_bx_inner input:hover, .user_select_dropdown .serach_bx_sec .serach_bx_inner input:focus{box-shadow: none; outline: none} 

.user_select_dropdown .serach_bx_sec .serach_bx_inner input::-webkit-input-placeholder {color: #cdcdcd; opacity: 1}
.user_select_dropdown .serach_bx_sec .serach_bx_inner input:-ms-input-placeholder { color: #cdcdcd;  opacity: 1}
.user_select_dropdown .serach_bx_sec .serach_bx_inner input::placeholder { color: #cdcdcd;  opacity: 1}
.agent_list_32 {display: block;}
.agent_list_32 ul{list-style: none; margin: 0px; padding: 0px;  max-height: 300px; min-height: 200px; overflow: auto;}
.agent_list_32 ul li{display: inline-block; width: 100%; font-size: 14px; color: #cdcdcd; padding: 5px 15px; white-space: normal;
 word-break: break-all; }
.agent_list_32 ul li label.custom-control-label{cursor: pointer;}
.agent_list_32 ul hr{border-color: #ffffff1f; margin: 0px;}
.agent_list_32 li a{color: #cdcdcd; font-size: 13px;}
.agent_list_32 li:hover a{color: #fff}

.breakdown_option{background: #043851; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12); margin-top: 8px;}
.breakdown_option:after{
  width: 0;  height: 0;   border-left: 8px solid transparent;  border-right: 8px solid transparent;   border-bottom: 8px solid #043851; position: absolute; top: -8px; left: 40px; content: "";
} 

.user_select_dropdown .apply_btn_sec{display: inline-block; width: 100%; padding:10px 5px 5px; text-align: center; border-top: solid 1px #ffffff17; margin-top: 10px}
.user_select_dropdown .apply_btn_sec .apply_btn{padding: 5px 30px; border-radius: 20px; border:none; font-size: 14px; background: #EA91089E; color: #ffffffe8}

.th_button{letter-spacing: normal; font-size: 13px; background: transparent; border: solid 1px transparent; color: #9e9e9e; padding-left: 4px;  padding-right: 4px;border-radius: 2px; cursor: pointer;}
.th_button:hover, .th_button:focus{border-color: #434040; background: #fffbfb17; } 



.th_option_drop{background: #343637; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
 margin-top: 8px; width: 300px; padding: 10px 0px;}
.th_option_drop:after{width: 0;  height: 0;  border-left: 8px solid transparent;  border-right: 8px solid transparent;  
 border-bottom: 8px solid #343637; position: absolute; top: -8px; left: 40px; content: "";}

.th_option_drop.arrowforright:after{ left: auto; right: 40px; }

.chart_explain_dropdown{ display: block; width: 100%; margin-bottom: 5px; padding: 5px 10px;}
.chart_explain_dropdown:hover{background: #20222396;}
.chart_explain_dropdown a{display: block;}
.chart_explain_dropdown .chart_png12{display: inline-block; width: 35px; vertical-align: top; margin-top: 3px;}
 .hrs_24_icon{ position: relative; margin-top: 9px; padding-left: 5px;}
 .hrs_24_icon:after{ position: absolute; left: -6px; content: "24Hrs"; font-size: 8px; background: #bb4242;
 line-height: normal; top: -5px; padding:0px 2px 2px; border-radius: 3px; color: #fff;}

.chart_explain_dropdown .chart_type12{ display: inline-block; width: calc(100% - 45px); vertical-align: top; }
.chart_explain_dropdown .chart_type12 span{display: block; font-size: 14px; color: #EA9108; text-align: left;}
.chart_explain_dropdown .chart_type12 p{color: #9e9e9e; font-size: 13px; margin-bottom: 0px;}
 

.collapse_arrow_icon{cursor: pointer; width: 20px; height: 20px; line-height: 20px; border-radius: 4px; background: #ffffff14;}
.accordion-toggle.collapsed .collapse_arrow_icon:before{content: "\f107"!important;  }
 
.tr_collapse_data td{ background-color: /*#131517ad;*/ #2A2C2D; padding: 5px 8px!important; height: 50px!important; border-color: #30313121 !important;
background-clip: padding-box;}
.tr_collapse_data:hover td{ background-color: #6a6a6c61  !important;/* background-color: #3e3e3f61 !important;*/}

.tr_loader:hover td{background:#2A2C2D!important }

.clps_ldr_sec{position: sticky; left: 48vw; top: 10px; width: 100px;}

.cstm_date_frmt{text-align: left!important;}
.cstm_date_frmt .date_sec_65{padding-left: 60px;}
.cstm_date_frmt  .date_sec_65 .date_kj{font-size: 18px; color: #666; display: inline-block; vertical-align: top; line-height:19px; margin-right: 8px;}
.cstm_date_frmt  .date_sec_65 .month_kj{vertical-align: middle; display: inline-block; line-height: normal; text-align: left; color: #777; font-size: 11px; text-transform: uppercase;}

.link_hover_effect{position: relative;}
.link_hover_effect:after{position: absolute; bottom: -8px; left: 0px; width: 100%; height: 1px; border-bottom: dashed 1px #ffffff2e;  content: ""; display: none}
.link_hover_effect:hover:after{display: block;}

.duration_txt{color: #18A2B8}
.avg_duration_txt{display: block; font-size: 12px; position: absolute; bottom: 5px; left: 10px;}

.field_extra_info_btn{display: none; position: absolute; bottom: 5px; left: 10px;}
.field_extra_info_btn a{color: #97bae0}

.field_extra_info_btn .th_option_drop::after{left: 3px!important;}

.agent_time_log_table tbody tr:hover td{background: #201f1f}
.agent_time_log_table tr:hover .field_extra_info_btn{display: block;}
.agent_time_log_table tr:hover .avg_duration_txt{ display: none; }
.agent_time_log_table tr td{position: relative; height: 58px;}
.agent_time_log_table tr td.field_data_with_info{vertical-align: top; padding-top: 14px;}

 .field_data_with_info{font-size: 12px;}
 .field_data_with_info span.duration_txt{display: block;}

.agent_time_log_table tr td .text-primary{color: #5394da!important}

.total_record_row td{ background: #1C323F }
.total_record_row:hover td{background:#1C323F!important }

.close_iframe_btn{font-size: 18px;  cursor: pointer;  float: right;  margin-right:0px; border:0px; outline: none; background: #ffffff14; 
  color: #4487EF; padding: 4px 10px; line-height: normal;  border-radius: 4px;}
.close_side_bar_absolute{position: absolute; top: 20px; right: 18px;}
.frame_title_heading {padding-top: 20px; padding-right: 32px; position: fixed; top: 0px; left: 0px; background: #2E3034; height: 50px; width: 100%; z-index: 9999}
.frame_title_heading h3{font-size: 18px; font-weight: 400; margin-bottom: 20px; margin-top: 0px; padding-right: 8px; color: #4487EF;}

.frame_title_heading .custom_date_picker:hover{background: #ffffff14}
.frame_title_heading .custom_date_picker .disabled{background: transparent; color: #666; cursor: auto;}
.frame_title_heading .custom_date_picker .disabled:hover{background: transparent;  color: #666;}

.agent_report_timline { 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}
.show_timline_dv_visible{  right: 0px!important; z-index: 999}
.agent_report_timline h3{ font-size: 18px; font-weight: 400; margin-bottom: 20px; margin-top: 0px; padding-right: 8px ;}
.agent_report_timline .close_slide56{ font-size: 18px;  cursor: pointer;  float: right;  margin-right:0px;  
             background: #ffffff14; padding: 4px 10px; line-height: normal;  border-radius: 4px;}

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

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

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


.sub_headng_detail85{padding-left: 52px; color: #83b9f6; font-size: 13px; margin-bottom: 10px;}

.agent_report_timline3 .apexcharts-tooltip { background: #000!important;  font-weight: 400!important; border:none!important;  }


.chart_indicator {padding: 4px 15px;display: inline-block;  width:350px;  background: #262829;color: #a8a5a0; border-radius: 2px; font-size: 14px;
}


.badge-violation{background: #e84949; color: #fff;}
.logout_btn_label{background: #007bff; color: #fff; font-size: 12px; font-weight: 300; display: inline-block; line-height: 1; 
  text-align: center; padding: .25em .6em; border-radius: .25rem; border: none;}
.logout_btn_label:hover, .logout_btn_label:focus{background: #0558b0}

.table_data_ifreame{width: 100%; border: none; min-height: calc(100vh - 325px);  }
.ifreame_placeholder{background: url('../images/iframe_loader.svg')no-repeat; background-size: 70px; background-position: center;   } 
.table_data_ifreame.full_height{min-height: calc(100vh - 110px);} 

.agent_timing_bar_chart{ display: inline-block; width: 100%; margin-bottom: 20px; padding-left: 35px; padding-right: 15px}
.agent_timing_bar_chart ul{ list-style: none; margin: 0px; padding: 0px; }
.agent_timing_bar_chart ul li{display: inline-block; width: 100%; margin-bottom: 10px;}
.agent_timing_bar_chart ul li .xaxis_text{display: inline-block; vertical-align: top; color: #cdcdcd; font-size: 12px; width: 60px;}
.agent_timing_bar_chart ul li .chart_bar_row{ display: inline-block; width: calc(100% - 80px);  }
.agent_timing_bar_chart .progress{background: #e9ecef2e; border-radius: 0px; cursor: pointer;}


.iframe_fixcolumn_table tr td{min-width: 100px;}

.fixed_header_table{ top:47px; position:fixed;  width:auto;  display:none;  z-index: 4 ;  padding: 0px;}

/*css for agent timing profile page*/
 

/*css for hits analysis*/

.dark_select_drop{width: 150px; font-size: 13px; background: #ffffff14; border:none; padding: 5px 10px; height: inherit; color: #cdcdcd; border-radius: 5px;}
.dark_select_drop option{background:#26282A;}

.text_approached_hits{color: #3370ad}
.text_missed_hits{color:#e77569 }
.text_answered_hits{color: #42c751}
.text_ghost_hits{color:  #c79342}

.approached_hits_column{background:#85b2de33;}
.missed_hits_column{background:#febbb42e}
.answered_hits_column{background:#90ed9a29}
.ghost_hits_column{background:#fecf843d}
 
.hitsanalysis_tbl .th_button{position: relative; padding-left: 5px; padding-right: 13px;}
.hitsanalysis_tbl .th_button:after{position: absolute; right: 3px; top:9px;}

.hitsanalysis_tbl .tr_collapse_data td{background: #2A2C2D; border-color: #6464642b !important}


.tr_collapse_data .approached_hits_column{background: #414E5B!important}
.tr_collapse_data .missed_hits_column{background: #544949  !important}
.tr_collapse_data .answered_hits_column{background: #90e99942  !important}
.tr_collapse_data .ghost_hits_column{background: #fecf8452  !important}

.tr_collapse_data .field_counter .f_size_14{font-size: 13px!important}
.tr_collapse_data .hour24_count_tag li .f_size_14{font-size: 12px!important}
 
.hitsanalysis_tbl tr td .text-primary{color: #5394da!important} 
.hitsanalysis_tbl tr td.agent_detail_column{min-width: 250px; position: relative; }

.hitsanalysis_tbl tr td.cstm_date_frmt .date_sec_65{padding-left: 15px!important}

.agent_detail_column .agent_name{color: #f9a825; text-transform: capitalize; min-width: 200px; font-size: 13px; }

.agent_detail_column .accordion-toggle{position: absolute; left: 10px;}

.agent_detail_column .agent_info_drop{background: #323638;}
.agent_detail_column .agent_name .agent_id{display: inline-block; width: 50px; font-size: 12px;}
.agent_detail_column span.number{display: block; padding-left: 50px;}
.agent_detail_column span.number i{transform: rotate(45deg); font-size: 11px;}


.hitsanalysis_tbl thead tr th{height: 45px;}

.hitsanalysis_tbl thead tr th span{display: block; text-align: center;}
.hitsanalysis_tbl thead tr th font{display: block; text-align: center;}
.hitsanalysis_tbl tr td{padding: 8px!important; text-align: center; min-width:120px; height: 58px;}
.hitsanalysis_tbl tr td.field_counter{position: relative; background-clip: padding-box;}
.hitsanalysis_tbl tr td.field_counter span{display: inline-block; width: 50px;}
.field_info_icon{ display:none; position: absolute;}
.field_info_icon a{color:  #97bae0}

.hitsanalysis_tbl tr:hover .field_info_icon{display: inline-block;} 
.hitsanalysis_tbl tbody tr:hover td{background: #201f1f} 
.hitsanalysis_tbl .tr_collapse_data:hover td{background: #6a6a6c61 !important}

  th.amount_field{background: #0d250e!important}
  .amount_field{background: #0d250e !important; font-size: 14px!important; } 
  .amount_field span{color: #c4dda7}
  .amount_field i{font-size:13px ; color: #3c873f; margin-right: 10px;}
  .hitsanalysis_tbl tbody tr:hover .amount_field{color:#fff }
  .hitsanalysis_tbl tbody tr:hover .amount_field i{color:#fff; opacity: 1 }

 
.hour24_count_tag{display: block; list-style: none; margin: 0px; padding: 0px; width: 1440px;}
.hour24_count_tag li{display: inline-block; float: left; width: 60px; text-align: center; font-size: 11px; padding: 0px 0px 5px; position: relative;}
.hitsanalysis_tbl thead tr th .hour24_count_tag li:after{position: absolute; bottom: -7px; left: 0px; right: 0px; margin: 0 auto; width: 1px;
 height: 10px; background: #ffffff24; content: "";}

.analysis_tble_sec{background: #3234358c}
.analysis_tble_sec .clone-head-table-wrap{height: 46.5px!important}

.callanalysis_tbl .cstm_date_frmt{min-width: 250px;} 

.hitsanalysis_tbl tr td.field_data_with_info{position: relative; text-align: left; vertical-align: top;}
.hitsanalysis_tbl tr:hover .field_extra_info_btn{display: block;}



.data_placeolder_dummy{width: 100px; height: 15px; background: #7f7c7c30; border-radius:5px; display: inline-block;}
.dummy_table_view tr:hover td{background: none!important;}
.dummy_table_view tr:first-child td {border-top: 0px;}
.dummy_table_view{margin-bottom: 0px;}
.table_view_modal .general_report_page{background: #2D2F30; min-height: inherit!important;}

.table_view_modal .date_sec_65 {padding-left:45px;}

.table_view_modal .modal-body{ padding:0px; } 
.table_view_modal .modal-content{background:#404242; border-radius: 10px;}
.table_format_view{background:#414446; padding: 30px 30px 0px; border-bottom: solid 1px #2f3132; border-radius: 10px 10px 0px 0px;
 margin-bottom: 10px; box-shadow:  inset 0px -11px 8px -10px #333;}

.tbl_hdr_placeholder{width: 100%; height: 38px; background: #161617; border-bottom: solid 2px #333; border-radius: 5px 5px 0px 0px; padding: 12px;}
.view_type_thumb{display: inline-block; width: 20px; height: 20px; border-radius:20px; background: #000; color: #fff; text-align: center; margin-right: 5px; font-size: 12px; line-height: 20px;}

.choose_table_option .custom-control-label{color: #abb0b4 ;}

.disply_view_btn{background: #063950;}
.disply_view_btn:hover{background: #0f4963;}

.selectt { display: none; width: 130px; color: #ffffffe0}    
/*css for hits analysis*/


/*css for contact list*/
.create-c-list-step{  background: #3234358c; min-height: 100vh;/* border-right: solid 1px #eeeeee1f;*/ margin-top: -22px; max-width: 280px;}
.create-c-list-step ul{list-style: none; margin:10px 0px 0px; padding: 0px; position: relative;}
.create-c-list-step ul:after{position: absolute; left: 7px; top: 5px; width: 1px; height: 90%; background: #dddddd26; content: ""; z-index: 0;}
.create-c-list-step ul li{ display: inline-block; width: 100%; float: none; position: relative; padding-left: 35px; margin-bottom: 45px; 
  font-size: 17px;}
.create-c-list-step ul li:after{position: absolute; left: 0px; top: 5px; width: 15px; height: 15px; background: #434040; border:solid 1px #686868;
 border-radius: 100%; content: ""; z-index:1;}
.create-c-list-step ul li a{color: #9a9999}
.create-c-list-step ul li p{ display: block; font-size: 13px; color: #666; margin-bottom: 0px; margin-top: 5px; }

.create-c-list-step ul li.active a{color: cornflowerblue !important}
.create-c-list-step ul li.active:after{ background: cornflowerblue; border-color: transparent; }
.create-c-list-step ul li.active p{color:#999 }

.create-c-list-step ul li.step-done a{color: mediumseagreen !important}       
.create-c-list-step ul li.step-done:after{ background: mediumseagreen; border-color: transparent; }
.create-c-list-step ul li.step-done p{color:#999}

.contact_list_field{background:#2E2E30; border-color: #ced4da0f; font-size: 14px; color: #ffffffba;}
.contact_list_field:focus {background:#2E2E30; box-shadow: none;  border-color: #ced4da33;  color: #ffffffba;}
.contact_list_field:disabled, .contact_list_field[readonly]{background:#2E2E30; box-shadow: none;  border-color: #ced4da0f;  color: #ffffffba;}
select.contact_list_field option{background-color:#292B2D; color: #ffffffba;}  

.custom_field_create{ display: inline-block; width: 100%; background: #2E2E30; border-radius: 5px;   }
.custom_field_create ul{ list-style: none; margin:0px; padding: 0px; }
.custom_field_create ul li{ float: none; padding: 10px;  margin-top: -1px; margin-left: 0px; margin-right: 0px; }
.custom_field_create ul li:nth-child(even){ background: #242628  }
.custom_field_create ul li:nth-child(odd){ background: #f9f9f905 }

.maping_box{ display: inline-block; width: 100%;  }
.maping_row{ display: block; width: 100%; background: #f0f0f017; border:solid 1px #333; margin-bottom: 20px; margin-top: 10px; padding: 15px; 
  border-radius: 5px;}

.contactlist_fld_sec{ display: inline-grid; width: 100%; margin-top: 15px;  }
.contactlist_fld_sec ul {margin: 0px 0px 10px; padding: 0px; list-style: none;  overflow: auto; white-space: nowrap;}
.contactlist_fld_sec ul li{display: inline-block; background:#393737; width: 160px;font-size: 12px;text-align: center;height: 120px;border-radius: 5px; padding:10px;
margin: 0 10px 0 0;   text-align: left; line-height: 22px;}
.contactlist_fld_sec ul li span{font-size: 12px; color: #ffffffba}
.contactlist_fld_sec ul li .custom-select{background-color: #4541412e; color: #fff; border-color: #ffffff4a}
.contactlist_fld_sec ul li .custom-select:focus{box-shadow: none;}
.contactlist_fld_sec ul li .custom-select option{background: #393737}

.contactlist_fld_sec ul.color_bg_card li{background: #2b543d!important}
                    
.contact_list_tbl tr td .add_subcrbr_label{ border: dashed 1px #ffffff3b; padding: 2px 8px; border-radius: 4px; color: #cdcdcd; font-size: 11px; background: #424f63;  }
.contact_list_tbl tr td .add_subcrbr_label:focus{outline: none;}  

.contact_list_tbl tr td{border-bottom: solid 5px #131517ad!important}
.contact_list_tbl tr:last-child td{border-bottom: 0px!important}
.contectListTable{min-height: 500px!important}

.contact_list_tbl tr td.contact_list_name_field {max-width: 250px; }  
.contact_list_tbl tr td.contact_list_name_field font{width: 50px; display: inline-block; vertical-align: middle;}                                                    
.contact_list_tbl tr td.contact_list_name_field span{color: #528fda; display: inline-block; vertical-align: middle; overflow: hidden; width: 250px; text-overflow: ellipsis; white-space: nowrap;}                                                    
.contact_list_tbl tr td.contact_list_name_field span a{color:#528fda; }
.contact_list_tbl tr td.contact_list_name_field .recent_file_up{ color: #a78d28 }
.contact_list_tbl tr td.contact_list_name_field .recent_file_up:hover, .contact_list_tbl tr td.contact_list_name_field .recent_file_up:focus,
.contact_list_tbl tr td.contact_list_name_field .recent_file_up:active{outline: none;}


.extra_detail_sec{border-top: solid 1px #27292b; border-bottom: solid 1px #27292b; padding-top:8px; padding-bottom: 8px; }
.extra_detail_sec .rightaddtional_sec{ display: inline-block; width: auto; float: right; padding-left: 8px;   vertical-align: middle; border-left: solid 1px #27292b; }

.edit_list_name_subscrbr{display: inline-block; width: 300px;}
.edit_list_name_subscrbr .input_field45{background: #eaeaea26; border: none; padding: 6px; width: 200px; border-radius: 3px; vertical-align: middle; font-size: 12px; color: #fff;}
.edit_list_name_subscrbr .input_field45:focus{outline: none;} 

.subscriber_list tr td:first-child, .subscriber_list tr th:first-child{width: 50px; min-width: 50px;} 
.subscriber_list tr td{font-size: 13px; min-width: 150px; vertical-align: top!important; color: #18A2B8!important;}
.info_highlight_bx{background: currentColor; border-radius: 0px; min-height: 400px; padding: 15px;}

.rightside_extrainfo_Section{background: #3234358c; max-width: 320px; min-height: 100vh; height: 100%; border-left: solid 1px #eeeeee1f; top: 0px; position: sticky; right: 0px; margin-top: -22px;}

.l_dark_bg_sec{background: #3234358c;  border-radius: 5px; padding: 35px}

.recenty_upload_file:hover td{background: none!important;}

.recenty_upload_file td table tr th{font-size: 12px; background: #333434}

.segmentation_contact_list{ list-style: none; margin:0px; padding: 0px; background: #2E2E30; border-radius: 5px; max-height: 300px;
 overflow: auto;}
.segmentation_contact_list  li{ float: none; padding: 10px;  margin-top: -1px; margin-left: 0px; margin-right: 0px; }
.segmentation_contact_list  li:nth-child(even){ background: #242628 }
.segmentation_contact_list  li:nth-child(odd){ background: #f9f9f905}

.l_yellow_sprator{border-color: #ffff0029}

.r_information_sticky_block{max-width: 280px;}

.segment_f_box{display: inline-block; width: 100%; padding: 20px; border: solid 1px #66666642; background: #b2a0a01a; border-radius: 5px;}
.segmentt-box{display: none; padding: 15px;  padding-bottom: 15px; width: 800px; /*background: #7f7d7b2b;*/ margin-top: 20px; border: solid 1px #cccccc0a;
padding-bottom: 15px;}
.segmentt-box .add-group { width: 100%;  margin-top: 15px;  border: #dce5ea0f  solid 1px; background: #a5a5a414;   display: inline-block; position: relative; padding: 15px;}
.segmentt-box .add-group .head{position: absolute; right: 0px; top: 0px; border-left: solid 1px #dce5ea0f; border-bottom: solid 1px #dce5ea0f;}
.segmentt-box .add-group .head button{width: 25px; height: 25px; background: #403030; text-align: center; line-height: 25px; border-radius: 0px; padding: 0px; font-size: 10px;}
.segmentt-box .text-danger{color: #ff4848!important}
.segmentt-box .add-group:first-child{margin-top: 0px;}

.segmentt-box .add-group .form-control{font-size: 13px; background: #322e2e00; color: #999; border-color: #525353; border-radius: 0px;}
.segmentt-box .add-group .form-control:hover, .segmentt-box .add-group .form-control:focus{outline: none; box-shadow: none;}
.segmentt-box select option{background:#322e2e82; color: #fff;  }
.segmentt-box .and_or_condition{font-size: 13px; background: #322e2e00; color: #999; border:solid 1px #525353; border-radius: 0px; 
  outline: none; padding: 5px; width: 95px;}

.segment_action_block{margin: 0px; padding: 0px; list-style: none;} 
.segment_action_block li {display: inline-block;width: 100%;padding: 10px;  margin-bottom: 10px;float: none;border-radius: 5px; background: #2E2E30;
  border: solid 1px #e8e8e80a}
.segment_action_block li p{margin-bottom: 0px;}

.instruction_lkop{ margin:0px; padding:10px; list-style:none; position:relative}
.instruction_lkop:after{ position:absolute; left:8px; top:15px; width:2px; height:85%; content:""; background:#dddddd14;}
.instruction_lkop li{ display:block; float:none; margin-bottom:10px; font-size:13px; color:#9a9a9a; position:relative; padding-left:20px!important; margin-bottom: 20px;}
.instruction_lkop li:after{ position:absolute; left:-7px; top:5px; content:""; width:12px; height:12px; border-radius:100%; background:#393838;
 z-index:1}

.custom_field_table, .segmentation_list_tbl{min-height: 500px!important; height: inherit!important}

.segmentation_list_tbl .clone-head-table-wrap{height: 38px!important}
.segmentation_list_tbl table tr td{vertical-align: top!important;}
.segmentation_list_tbl table tr td:first-child{text-align: center;}
.segmentation_list_tbl table tr th:first-child{text-align: center;}
.segmentation_list_tbl table .segment_name{font-size: 16px;}


.custom_field_table .clone-head-table-wrap{height: 38px!important}
.custom_field_table table tr.reserved-row{background: #1b1a1a;}
.custom_field_table table tr td{font-size: 13px;}
.hfjrylpo4r {display: inline-block; margin-left: 10px;  background: #eeeeee24;  border-radius: 5px; padding: 0px 5px;font-size: 12px;color: #9f9d9d;
  vertical-align: middle; margin-top: 10px;} 

.cl-profile-bx{display: inline-block; width: 100%; background: #ffffff17 ; height: 185px; padding:25px 20px; border-radius: 5px; margin-bottom: 30px; }
.cl-profile-bx h4{font-weight: 300; font-size: 20px; color: #ffffff8c}
.cl-profile-bx h4 .btn{background: #1e1e1e52; border-color:#f8f9fa2e; color: #cdcdcd; }
.cl-profile-bx h4 .btn:hover, .cl-profile-bx h4 .btn:focus{box-shadow: none;}
.cl-profile-bx .radius_btn_8 .btn{border-radius: 20px; padding: 5px 10px;}
 

.assign_cntct_sec{display: inline-block; width: 100%; background: #3234358c; padding:40px; border-radius: 10px;}

.assign_cntct_sec .select2-container--default .select2-selection--multiple{background: #303030; border: none!important; border-radius: 5px;  } 
.assign_cntct_sec .select2-container--default .select2-selection--multiple .select2-selection__choice{background: #4299917a  !important; 
  border:solid 1px #E6E6E60A !important}
.assign_cntct_sec .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color: #cdcdcd}

.select2-dropdown{background-color: #403f3f!important; color: #fff; border:1px solid #aaaaaa4a!important}  
.select2-results__option{font-size: 13px!important;}
.select2-container--default .select2-results__option[aria-selected="true"]{background-color: #545454!important} 
.delete_conf_modal .modal-dialog{max-width: 400px!important;}


/*css for contact list*/

.add_to_contact_fld ul li input.form-control::placeholder{ opacity: 0; color: #202121!important; }


/*css apply for make custom calendar*/
.custom_picker{border-radius: 0px!important; border: none!important; background: #343637!important;}
.custom_picker::after{border-bottom-color: #343637!important;}
.custom_picker::before {border-bottom-color: #343637!important;  }
.custom_picker.daterangepicker::before{top: -6px!important}

.custom_picker .calendar-table{background: #343637!important; border: none!important;}
.custom_picker .calendar-table th{color: #fff; font-weight: 500!important;}
.custom_picker .calendar-table th.month{font-weight: 500; font-size: 18px!important}
.custom_picker .calendar-table td{  width: 32px!important; height: 32px!important; line-height: 28px!important; color: #cdcdcd}

.custom_picker td.start-date{border-radius: 15px 0px 0px 15px!important}
.custom_picker td.end-date{border-radius: 0px 15px 15px 0px!important;}
.custom_picker td.end-date.active{background: #357ebd!important}
.custom_picker td.active, .custom_picker td.active:hover{border-radius: 0px;}

.custom_picker .single  td.active, .single .custom_picker td.active:hover{border-radius: 50%!important;}
 
.custom_picker td.off, .custom_picker td.off.in-range, .custom_picker td.off.start-date, .custom_picker td.off.end-date{background: transparent!important;}

.custom_picker td.in-range{background: #9892844a!important; color: #fff!important;}
.custom_picker td.available:hover, .custom_picker th.available:hover{background: #357ebd!important; color: #fff!important;}

.custom_picker .calendar-table .next span, .custom_picker .calendar-table .prev span{border-color:#cdcdcd!important}

.custom_picker .drp-selected{font-size: 18px!important; font-family: Comfortaa; color: #EA9108; word-spacing: 10px; letter-spacing: 1px;}
.custom_picker.show-calendar .drp-buttons{padding: 20px 10px!important; }
.custom_picker .drp-buttons .btn.cancelBtn {color: #fff; font-weight: 400;}

/*css apply for make custom calendar*/






/*css for action tag icon*/

.choose_action_icon_btn{background: #202121; border:solid 1px #2c2e2f; color: #9e9e9d; display: block; width: 100%; padding: 5px 10px; text-align: left; border-radius: 0px;
font-size: 13px; box-shadow: none;}

.select_icon_ul{min-width: 466px; max-height: 300px; overflow: auto; background: #1b1b1b}
.icon-showcase{padding: 10px;}
.icon-showcase span{ position: relative; display: inline-block; padding: 5px; cursor: pointer; font-size: 18px; color: #666 }
.icon-showcase span input[type="radio"]{ position: absolute; left: 0px; right: 0px; width: 100%; height: 100%;  opacity: 0; cursor: pointer; }
.icon-showcase span input[type="radio"]:checked + i{ color: #007bff; transform: scale(1.5); transition: all .1s; }

.color-showcase{padding:10px;}
.color-showcase span{ position: relative; display: inline-block; padding: 5px; cursor: pointer;   }
.color-showcase span input[type="radio"]{ position: absolute; left: 0px; right: 0px; width: 100%; height: 100%;  opacity: 0; cursor: pointer; }
.color-showcase span input[type="radio"]:checked + font{ transition: all .1s; border:solid 3px rgba(0, 0, 0, .2);}
.color-showcase span input[type="radio"]:checked + font:after{position: absolute; left: 0px; right: 0; top: 9px; text-align: center; content: "\f00c";
font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #fff; font-size: 14px;}
.color-showcase span font{ display: inline-block; width: 30px; height: 30px; border-radius:100%;  }
.color-showcase span font.bgred{ background: #F44336 }
.color-showcase span font.bgpink{ background:#E91E63  }
.color-showcase span font.bgpurple{ background:#9C27B0  }
.color-showcase span font.bgdeeppurple{ background:#673AB7  }
.color-showcase span font.bgindigo{ background:#3F51B5  }
.color-showcase span font.bgBlue{ background: #2196F3 }
.color-showcase span font.bglightblue{ background:#03A9F4  }
.color-showcase span font.bgCyan{ background:#00BCD4  }
.color-showcase span font.bgTeal{ background:#009688  }
.color-showcase span font.bgGreen{ background:#4CAF50  }
.color-showcase span font.bgAmber{ background:#FFC107  }
.color-showcase span font.bgdeeporange { background:#FF5722  }
.color-showcase span font.bgBrown { background: #795548 }
.color-showcase span font.bgGrey { background: #757575 }
.color-showcase span font.bgbluegray { background:#607D8B  }
.color-showcase span font.bgOrange { background:#FF9800  }
.color-showcase span font.bgLime  { background: #CDDC39 }
  
.ui-sortable-placeholder{height: 45px; position: relative;}
.ui-sortable-placeholder:after{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; content: ""; background: #eee;  border: 1px dashed #aaa;  }
/*css for action tag icon*/


 
.permission_menu{max-width: 280px; background: #3234358c; height: 100%; min-height: 100vh; display: inline-block; float: left; padding: 15px; margin-top: -22px;}
.permission_menu .nav-link{color: #999; transition: all .2s; font-size: 14px;}
.permission_menu .nav-link.active{color: #1976d2; font-size: 15px; } 
.permission_section{padding-left: 30px; padding-right: 30px; }
.permission_list_block{background: #3234358c;  border-radius: 5px; padding: 20px; min-height: 400px;}
.permission_table th{ color: #999; font-size: 14px; font-weight: 400; } 
/*.permission_table tr:nth-child(even) {background: #5652520a}
.permission_table tr:nth-child(odd) {background: #f9f9f90d}*/
.permission_table td{border-color: #f9f9f90d; color: #cdcdcd;  font-size: 16px; text-transform: capitalize; position: relative;}
.permission_table tr:hover td{background: #5652520a}
.permission_section .TriSea-technologies-Switch{margin-left: 30px;}  
.permission_section .TriSea-technologies-Switch > label::after{background: rgb(101, 97, 97);}
 
.tooltip-inner{font-size: 11px!important;}
.permission_loader{position: absolute; left: 0px; top: 8px;}

 

 

#q-graph { display: block; position: relative; width:46%; height:40px; padding: 0; background: transparent; font-size: 11px; margin:0 auto} 
#q-graph tr, #q-graph th, #q-graph td { position: absolute; bottom: 0; width: 25%; z-index: 2; margin: 0; padding: 0; text-align: center;}
#q-graph td { -webkit-transition: all .3s ease; transition: all .3s ease;}
#q-graph td:hover { background-color: #4d4d4d; opacity: .9; color: white;} 
#q-graph thead th { width: 7.5em; height: auto; padding: 0.5em 1em;}
#q-graph thead th.sent {top: 0; left: 0; line-height: 2;}
#q-graph thead th.paid { top: 2.75em; line-height: 2; left: 0;}
#q-graph tbody tr { height:40px;   color: #999;}
#q-graph #grph-1 {left: 0;}
#q-graph #grph-2 { left: 15%;}
#q-graph #grph-3 { left: 30%;}
#q-graph #grph-4 { left: 45%; }
#q-graph #grph-5 { left: 60%; }
#q-graph #grph-6 { left: 75%; }
#q-graph #grph-7 { left: 90%;  border-right: none;}
#q-graph tbody th { bottom: -18px; vertical-align: top; font-weight: normal; color: #333; width:100%;}
#q-graph .bar { width:50%; border: 1px solid; border-bottom: none;  color: #000; border-radius: 2px;}
#q-graph .chrt_bg_green{background:#24a13e!important;  }
#q-graph .chrt_bg_red{ background:#8f2021!important; }
#q-graph .chrt_bg_blue{background:#425c9b!important;  }
#q-graph .chrt_bg_yellow{background:#cf9630!important;  }
#q-graph .chrt_bg_sky{background:#299289!important;  }

#q-graph .graph-delivered{ background:#f3ce85!important}
#q-graph .graph-unsubscriber{background:#ff8a65!important} 

#q-graph .bar p { margin: -17px 0 0; padding: 0; color:#999;}
#q-graph .sent { left: 30%;  background-color: #39cccc;  border-color: transparent;}
#q-graph .paid { left: 77px; background-color: #7fdbff;  border-color: transparent;}
#ticks { position: relative; top:-60px;  left: 2px;  width: 40%;  height: 60px;  z-index: 1;  margin-bottom: -300px;  font-size: 10px; margin:0 auto -300px}
#ticks .tick { position: relative;   width: 100%;}
#ticks .tick p {position: absolute; left: -37px;  top: -5px; min-width:30px; text-align:right; color:#666}
#ticks .tick-top{height: 28px; }
#ticks .tick-middle{height: 25px;}
#ticks .tick-bottom{height: 0px; border-bottom:none}

.agent_graph tbody tr{height: 30px!important;}



/*agent break popup css*/
.page-disable{position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.5);   z-index: -1; opacity: 0; display: none; transition: opacity 0.25s;}
.dblock{opacity: 1!important;  z-index: 100000; display: block;}
.blur{filter: blur(2px);}

.page_dis_content{ width: 800px;  display: table; margin: 220px auto; text-align: center;}

.breake-message{  background: #2a2121cc; color: #007bff ; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.10); border-radius: 5px; 
padding: 35px 15px; width: 500px; display: inline-table;  }
.breake-message h2{ color: #ed5740; font-family: 'Roboto', sans-serif; text-align: center; font-size: 36px; margin: 0px; padding: 0px; font-weight: 100; position: relative;}

.work_btn_sec{background: #fff9; color: #007bff ; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.10); border-radius: 5px; 
padding: 23px 15px; width: 200px; display: inline-table;  vertical-align: top; margin-left: 10px;}

.work_btn_sec h3{margin: 0px 0px 15px; padding: 0px; font-size: 18px;  color: #393f39; font-weight: 400; font-family: 'Roboto', sans-serif; }

.work_btn_sec .btn-success{padding: 1px 30px; border-radius: 20px; font-size: 16px; font-family: 'Roboto', sans-serif; }
.work_btn_sec .btn-success:hover,  .work_btn_sec .btn-success:focus{outline: none}

.steam-container { position: absolute; left: 90px; top: -21px;}  
.squiggle1 img, .squiggle2 img, .squiggle3 img{ f }
.squiggle3 img{transform: rotate(180deg);}
.squiggle1 { animation: move-and-fade 2.5s linear infinite; animation-delay: 0.2s;   margin-right: 3px; display: inline-block;}
.squiggle2 { animation: move-and-fade 3.5s linear infinite; animation-delay: 0.2s;   margin-right: 3px; display: inline-block; }
.squiggle3 { animation: move-and-fade 4.5s linear infinite; animation-delay: 0.2s;   margin-right: 3px; display: inline-block;}
@keyframes move-and-fade {
0% {
    opacity: 0;
    transform: translateY(0);
}
50% {
    opacity: 1;
}
75% {
    opacity: 0;
}
100% {
    transform: translateY(-10px);
    opacity: 0;
}
}

/*agent break popup css*/



/*css for live call page*/
.column_section_bx{width: 250px;}
.column_section_bx .custom-control-label font{max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; word-break: break-word}
.call_row{ display: flex; flex-direction: row; flex-wrap: nowrap;  align-items: stretch;    overflow: auto; margin-right: -7px; margin-left: -7px} 
.call_row .call_block{ flex-grow: 1; padding: 7px; min-width: 300px; max-width: 300px; position: relative;}
/*.call_row .call_block:after{position: absolute; top: 7px; left: 7px; width: calc(100% - 14px); height: 3px; background:#1f4147; content: "" } 
.call_row .call_block:nth-child(2):after{background: #20471f}
.call_row .call_block:nth-child(3):after{background: #47361f}
.call_row .call_block:nth-child(4):after{background: #3e421e}
.call_row .call_block:nth-child(5):after{background: #471f21}
.call_row .call_block:nth-child(6):after{background: #20471f}
.call_row .call_block:nth-child(7):after{background: #47361f}
.call_row .call_block:nth-child(8):after{background: #3e421e}
.call_row .call_block:nth-child(9):after{background: #471f21}*/
 


.call_row .call_block.addkanbanplacehlder:after{display: none;}
.call_row .call_block.addkanbanplacehlder .addkanban_outer{border: dashed 1px #7d6a2f; display: flex; flex-direction: column; width: 100%; height:80vh;
 border-radius: 5px; align-items: center; justify-content: center; background: #242628}
 

.kanban_added_list .custom-control{padding-left: 1.5rem; padding-right: 1.5rem;}
.select_new_module_kanban{border: dashed 1px #444343; padding: 10px 20px 10px 40px; display: block; width: 100%; border-radius: 5px; cursor: pointer}
.select_new_module_kanban:before{top: 13px; left: 10px;}
.select_new_module_kanban:after{top: 13px; left: 10px;}
.kanban_added_list .custom-control-input:checked + .select_new_module_kanban{background: #19181899; border: solid 1px transparent}
.kanban_added_list .custom-control-input:disabled + .select_new_module_kanban{background: #19181899; border: solid 1px transparent}
.kanban_added_list .custom-control-input:disabled + .select_new_module_kanban:after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");}
.kanban_added_list .custom-control-input:disabled + .select_new_module_kanban:before{background: #359d37; border-color: #359d37}

.empty_kanban_list_msg{ font-size: 15px; padding: 10px 20px; margin: 25px 0px; background: #fff3cd0a; border:solid 1px #ffeeba12;
 color: #cdcdcd; border-radius: 5px; }
 
.livecall_iframe{width: 100%; height: 80vh; border: none; border-radius: 6px;  border: dashed 1px #7d6a2f}  
.content_placeholder{background: url('../images/livecall_iframe_loader.svg') no-repeat; background-size: 100%; background-position: top;
 background-color: #242628 }

.kanban_sec{width: 100%; min-height: 100vh; background: #242628}
.kanban_header h2{display: inline-block; font-family: Comfortaa; color: #ffffffd6; font-size: 16px; padding: 15px 0px 5px 5px;}
.kanban_header h2 font{color: #e24c00}
.kanban_header .column_actn_btn{padding: 0px; font-size: 12px; width: 20px; height: 19px; border:none; outline:none; color: #6c757d; background: none; z-index: 9;} 
.kanban_header .column_actn_btn:after{display: none;}

.live_call_table{margin-top: 20px; border-top: solid 2px #333 }
.kanban_table_data{min-height: 334px; max-height: 75vh; overflow: auto;   position: relative;}
.live_call_table table{ table-layout: auto; } 
.live_call_table table tr th{color: #a88041; font-weight: 500; font-size: 11px; border-top: none;  
   padding: 5px 4px; vertical-align: middle; position: sticky;  top: 0;  background: #202223; z-index: 1; border-bottom: 0px; box-shadow:0 1px 0px 0px #333;}
.live_call_table table tr td{color: #ffffff8c; border-bottom:solid 1px #131517ad; padding: 8px 4px; position: relative; font-size: 12px;}
.live_call_table table tr:hover td{background: #ffffff0a;} 

.live_call_table table tbody + tbody{border-top: solid 6px #131517ad;}

.live_call_table table .agnt_grp_queue{max-width: 80px; word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #369886}
.live_call_table table .pending_cpunt{cursor: pointer; background: #f2f2f21c; padding: 2px 5px; border-radius: 3px;}

.live_call_table span.agent_name{color: #f9a825; text-transform: capitalize;   font-size: 15px;}
.live_call_table .agent_count{background: #2f6a5c; color: #fff; padding:2px 5px; line-height: 1px; text-align: center;
  border-radius: .25rem;  font-size: 10px; cursor: pointer;}

.live_call_table .live_call_duration{ position: absolute; right:8px; top: 32px; z-index: 2; color: #9e9f9f; min-width: 75px; background: #f2f2f21c;
text-align: center; border-radius: 3px; font-size: 11px; }
.live_call_table tr:hover .live_call_duration{color: #18A2B8}

.live_call_table .queue_Status{position: absolute; right:8px; top: 32px; z-index: 2; color: #ffc107 ; min-width: 60px; background: #f2f2f21c;
text-align: center;; border-radius: 3px; font-size: 11px}
.live_call_table .queue_Status i{font-size: 10px;}

.live_call_table .call_action_btn{border-radius: 0px!important;}
.live_call_table .call_action_btn a{padding: 5px 15px; font-size: 13px;}
.live_call_table .call_action_btn a i{width: 20px; color: #999}
.live_call_table .call_action_btn a:hover i{color: #fff;} 

 
.call_stng_btn{padding: 0px; font-size: 12px; border:none; outline:none; color: #6c757d; background: none;}
.did_nmbr_dtl{font-size: 12px; color: #818284; padding-left: 18px;}
 
 
.livecallList{display: inline-block; width: 100%; list-style: none; margin: 0px; padding: 0px;  min-height: 400px; 
  max-height: 85vh; overflow: auto;}
.livecallList li{display: inline-block; width: 100%; height: 65px; float: none; color: #ffffff8c; border-bottom:solid 3px #131517ad; padding: 8px 8px; position: relative;}
.livecallList li:last-child{border-bottom: none;}
.livecallList li:hover{background: #ffffff0a;}
.livecallList li .cutmr_number{font-size: 15px; color:#f9a825; display: inline-block; vertical-align: top; line-height: normal;  } 
.livecallList li .l_call_duration{color: #cdcdcd; padding: 2px 5px; line-height: normal; background: #f2f2f21c; text-align: center;
  border-radius: 3px; font-size: 13px; display: inline-block;}
.livecallList li:hover .l_call_duration{color: #24D6F2}
.livecallList li .l_queue_dtl{color: #2397c5 ; padding: 2px 5px; line-height: normal; background: #f2f2f21c; text-align: center; border-radius: 3px; 
  font-size: 13px; display: inline-block;}
.livecallList li .l_queue_dtl i{font-size: 10px;}
.livecallList li .l_queue_dtl font{color: #49a6ca; margin-left: 4px;}

.livecallList li .did_detail{font-size: 12px; color: #818284; padding-left: 0px; vertical-align: top; display: inline-block;}
.livecallList li .type_dtl{font-size: 12px; color: #818284;  vertical-align: top; display: inline-block; float: right; margin-right: 10px;}
.livecallList li .type_dtl .txt_ibd{color: #eac5c6;}
.livecallList li .type_dtl .txt_obd{color: #92b8e2;}

.livecallList li .extra_info_icon{color:#6c757d ; margin-right: 10px; }
.livecallList li .extra_info_icon span{color: #5aa359}
.livecallList li .extra_info_icon span.disable{color: #f3eded21 !important}

.livecallList li .agent_detail{display: block;   color: #5aa359; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 140px; background: #f2f2f21c; padding: 2px 5px; border-radius: 3px;  }
.livecallList li .agent_detail font{color: #818284; font-size: 11px;}


.livecallList li .action_drop_sec{display: inline-block; margin-left: 9px;}
.livecallList li .call_stng_btn{font-size: 12px;  }
.livecallList li .call_stng_btn:after {display: none;}

.livecallList li:hover .type_dtl{display: none;}
.livecallList li:hover .more_dtl_btn{display: inline-block;}
.livecallList li .more_dtl_btn {display: none; position: absolute; right: 0px; bottom: 0px; }
.livecallList li .more_dtl_btn button{background: #1e77e8; border: none; padding: 2px 5px; border-radius: 4px; font-size: 10px; color: #fff;}

.more_dtl_btn45{display: none; text-align: center; vertical-align: top;}
.more_dtl_btn45 button{background: #1e77e8; border: none; padding: 3px 15px; line-height: normal; border-radius: 4px; font-size: 12px; color: #fff; display: block; width: 100% }
.livecallList li:hover .other_detail45{display: none!important;}
.livecallList li:hover .more_dtl_btn45{display: block;}

/*css for live queue page*/
.call_block.livequeueBlock{min-width: 345px; max-width: 345px;}
.livequeueChart_H{width: 100%; height: 50px;}

.live_queue_list {max-height: 75vh}
.livecallList li .cutmr_number_q{font-size: 15px; color:#869dd5 ; display: inline-block; vertical-align: top; line-height: normal;  }
.livecallList li .queue_name{font-size: 12px; background:#1052a7;   color: #fff; line-height: normal;  vertical-align: top; display: inline-block; 
width: 70px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 3px; border-radius: 4px; text-align: center;}
.queue_filter_detail{color: #e67b36; font-size: 11px; letter-spacing: normal; word-spacing: -5px;}
.queue_icon{transform: rotate(90deg);}
/*css for live queue page*/



/*css for live did page*/
.liveDidIframe{ height: 500px!important; }
.call_block.liveDIDBlock{min-width: 360px; max-width: 360px;}
.callsDetailInDID{font-size: 13px; display: block; padding-left: 37px; margin-top: -7px; color: #a5a6a7}
 
.liveDIDTableData tr td{line-height: normal; padding: 8px 4px 8px!important; border-bottom: 0px!important; border-top: 0px} 
.liveDIDTableData tr:hover td{background: none!important;}  

.liveDIDTableData tbody {height: 50px;}
.liveDIDTableData tbody + tbody{border-top: solid 1px #131517ad!important}
.liveDIDTableData tbody:hover{background: #ffffff0a}
.liveDIDTableData tr td .queue_filter_detail{color: #ffffff8c}
.liveDIDTableData tr td.deprtmntDtl{  min-width: 106px; max-width: 106px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.liveDIDTableData tr td.nodeDtl{ min-width: 70px; max-width: 70px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.liveDIDTableData tr td.nodeDtl span{color: #989292 }
.extra_detailDID{display: none}
.liveDIDTableData tbody:hover .extra_detailDID{display: table-row;}

 

/*css for live did page*/


 
.loader_placeholder{ display: inline-block; width: 100%; list-style: none; margin: 0px; padding: 0px; border-top: solid 2px #333 }
.loader_placeholder li{display: inline-block; width: 100%; float: none;  border-bottom:solid 1px #131517ad; padding: 12px 8px;}
.loader_placeholder li:last-child{border-bottom: none;}
@keyframes placeHolderShimmer{
    0%{background-position: -468px 0}
    100%{ background-position: 468px 0 }
}
.linear-background { animation-duration: 1s;  animation-fill-mode: forwards; animation-iteration-count: infinite;
    animation-name: placeHolderShimmer; animation-timing-function: linear;  background: #f6f7f8; background: linear-gradient(to right, #f1f1f114 8%, #ffffff0a 18%, #f1f1f114 33%);
    background-size: 1000px 104px;  height: 10px; position: relative; overflow: hidden; width: 100%; display: inline-block; border-radius:1px;
}


.lC_detail_modal .modal-dialog{ max-width: 650px; }
.lC_detail_modal .modal-content{background: #323232}
.lC_detail_modal .modal-header{background: #262828; padding-bottom: 15px; position: relative;}
.lC_detail_modal .modal-body{max-height: 550px; overflow-x: hidden; overflow-y: auto;}

 .lC_detail_modal .close {   
  position: absolute;   top: 4px;   width: 35px;   height: 35px;   background: #262828;
  opacity: 1;  border-radius: 50%;  right: 5px;  line-height: normal;  padding: 0; font-size: 24px!important; }

.lC_detail_modal .modal-header .Call_Duration{display: block; padding-left: 25px; font-size: 20px; line-height: normal; color: #cdcdcd;}

.lC_detail_modal .modal-header .call_status_icon{margin-left: 25px;}
.lC_detail_modal .modal-header .call_status_icon span{display: inline-block; width: 30px; vertical-align: middle; font-size: 17px; color: #66666685}
.lC_detail_modal .modal-header .call_status_icon span.s_mute.active{color: #338f75}
.lC_detail_modal .modal-header .call_status_icon span.s_hold.active{color: #8f7433}
.lC_detail_modal .modal-header .call_status_icon span.s_agent.active{color: #5979a3}
.lC_detail_modal .modal-header .call_status_icon span.s_forward.active{color: #5aa359}

.queue_detail_cl{padding: 3px 12px; background: #1eb3bb14; border-radius: 20px; color: #2397c5}

.callActionBtnSec{ display: inline-block; vertical-align: middle; margin-left: 40px;}
.action_sec_sw{ border: solid 1px #44484c; border-radius: .2rem; display: inline-block; min-width: 40px;}
.callActionBtnSec .btn{font-size: 12px; background: #33373b; border-color: #44484c; padding: 2px 8px; color: #cdcdcd;}
.callActionBtnSec .btn.spy_btn{ border-radius: 0px; border: none; border-left: solid 1px #44484c; font-size: 11px; padding: 3px 8px;}
.callActionBtnSec .btn.whisper_btn{border-radius: 0px .2rem .2rem 0px; margin-left: -1px; border: none; border-left: solid 1px #44484c; font-size: 11px; padding: 3px 8px;  }
.callActionBtnSec .btn:hover{background: #3a4045}
.callActionBtnSec .btn:focus{box-shadow: none;} 

 .cller_no_bx {width: 90px;  background: no-repeat;  border: none;  color: aliceblue;  padding: 2px 4px 2px 8px;
                  vertical-align: middle;  border-radius: 4px;} 
       
.call_detail_list45{list-style: none; margin: 0px; padding: 0px;}
.call_detail_list45 li{display: inline-block; width: 100%;  padding:  10px 20px;}
.call_detail_list45 li label{display: inline-block; width: 105px; font-size: 14px; color:#ffffffa8; margin-bottom: 0px; vertical-align: top;}
.call_detail_list45 li label i{display: inline-block; width: 20px; font-size: 10px;}
.call_detail_list45 li .detail_Sec{display: inline-block; font-size: 16px; color: #d2bc7e}
.call_detail_list45 li:nth-child(even) {background: #5956561a}
.call_detail_list45 li:nth-child(odd) {background: #f9f9f908}

.call_detail_list45 li .conect_agent_list{display: block; width: 100%; padding-left: 25px;}
.agnt_lst_row{display: block; font-size: 13px; padding-bottom: 5px; position: relative;}
.call_detail_list45 li .agent_name_89{display: inline-block; width: 100px; vertical-align: top; white-space: nowrap; overflow: hidden;
 text-overflow: ellipsis; color: #5c93cdd4; font-size: 14px;}
.call_detail_list45 li .start_time_duation{display: block; font-size: 12px; color: #999; padding-left: 49px}
.call_detail_list45 li .cnct_agent_id{ color: #cb9f1c; font-size: 12px; display: inline-block; width: 45px; }
.call_detail_list45 li .forward_true {position: absolute;right: -4px;top: 0px;  background: #00000042;  padding: 0px 5px;font-size: 11px; border-radius: 4px;
  color: gainsboro;}
.call_detail_list45 li .calltype_block{font-size: 13px; background: #4e86834a; color: #2a94a5; padding: 1px 7px; border-radius: 5px;}

.call_flow_timline{list-style: none; margin: 0px 0px 0px 105px; padding: 0px; position: relative; display: inline-block; width: 100%;}
.call_flow_timline:after{position: absolute; left: 0px; top:4px; width: 2px; height: 100%; content: ""; background: #2072ad; border-radius: 5px;}
.call_flow_timline li{display: inline-block; width: 100%; float: none; margin-bottom: 20px; position: relative;}
.call_flow_timline li:after{position: absolute; left: -6px; top: 4px; width: 13px; height: 13px; border:solid 2px #2072ad;  content: ""; 
background: #232323; z-index: 1; ; transform: rotate(40deg)}
.call_flow_timline li font.t_node_id {position: absolute; left: -75px;font-size: 13px;top: 4px; color: #b37f66; border-radius: 5px; font-size: 12px;text-align: center;}
.call_flow_timline li span.t_node_name{ font-size: 15px; padding-left: 35px; margin-top: 3px; display: inline-block;  color: #cdcdcd; line-height: normal; vertical-align: top;}
.call_flow_timline li._nodecase:after{border-radius: 50%; width: 15px; height: 15px; transform: rotate(0deg); left: -7px;}

#call_detail_modal_another .call_flow_timline li:after{ background: #363636!important }

.liveCall_module_form{ display: inline-block; width: 100%; padding-left: 30px;} 
.liveCall_module_form label{font-size: 14px; color: #d0ab21; text-transform: uppercase; margin-bottom: 5px; display: block;}
.liveCall_module_form .form-control{font-size: 13px; color: #cdcdcd; height: inherit; background-color: #ffffff1a; border-color: #cbcbcb42;}
.liveCall_module_form .form-control:focus{box-shadow: none;}
.liveCall_module_form .input-group-text{background-color: #323233; color:#cdcdcd ; border-color:#cbcbcb42 ; font-size: 11px;}
.liveCall_module_form .form-control option{color: #cdcdcd; background: #474747;}  
.liveCall_module_form  .custom-control-label::before{background:#ffffff4a;}
.liveCall_module_form  .custom-control-label font{color: #cdcdcd; font-size: 13px;}
.liveCall_module_form hr {border-color: #ffffff12; display: inline-block; width: 90%;}
.liveCall_module_form .text_block_2{display: inline-block; width: 80%; padding-left: 12px;}

.liveCall_module_form .advnclink_btn{font-size: 16px; color: #4695c4}

.liveCall_module_form .select2-container{width: 100%!important}
.liveCall_module_form .select2-container--default .select2-selection--multiple{background:#ffffff1a ; border:solid 1px #cbcbcb42!important; border-radius: 5px;}
.liveCall_module_form .select2-container--default .select2-search--inline .select2-search__field{color: #cdcdcd;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color: #999;}

.agent_group_slct{position: absolute; right: 28px; top: 30px; z-index: 999;}
.agent_group_slct .form-control {background: #3b3b3b; font-size: 13px; color: #fff; border-color: #4e4e4e}
.agent_group_slct .form-control:hover, .agent_group_slct .form-control:focus{box-shadow: none; outline: none;}

/*css for live call page*/

/*css for login page*/ 
.login_bg{background-image: url(../images/patternBG.png);}

.login_form_bx{max-width: 450px;}
.LoginSection{padding: 0px;}
.LoginSection .logo_part{ display: block; width: 100%; padding: 15px; }
.LoginSection .logo_part img{width: 150px;}

.LoginSection .features_slider_sec{   text-align: center; margin-top: 15px; min-height: 80vh;  display: flex; flex-direction: column; align-items: center;  justify-content: center;}
.LoginSection .features_slider_sec  .sldier_content{ background: #242628; display: inline-block; width: 100%; }

.LoginSection .carousel, .LoginSection .carousel-item{ width: 100%; }

.LoginSection .features_slider_sec .f_banner_img{height: 295px;}
.LoginSection .features_slider_sec .f_banner_img img{ width:400px; }
.LoginSection .features_slider_sec .ftr_heading{font-family: 'Comfortaa', cursive; font-size: 22px; color: #EA9108; margin-top: 35px; margin-bottom: 20px;}
.LoginSection .features_slider_sec .ftr_scrpdtin2{ display: block; font-size: 15px; color: #fff9; max-width: 60%; margin: 0 auto; min-height: 100px;}
.LoginSection .features_slider_sec .slider_bullet{ display: block; margin-top: 25px; }
.LoginSection .features_slider_sec .slider_bullet .carousel-indicators{position: relative;}
.LoginSection .features_slider_sec .slider_bullet li{display: inline-block; border:none; width: 10px; height: 10px; background: #c08d4c; border-radius: 100%; margin: 5px; opacity: .3; cursor: pointer;}
.LoginSection .features_slider_sec .slider_bullet li.active{opacity: 1}


.form_sec_cvg{display: block; width: 100%; min-height: 100vh; height: 100%; background: #2e3132; display: flex; flex-direction: column; align-items: center;  
  justify-content: center; box-shadow: 0px 0px 10px #0e101342}
.form_outer_block{ display: block; width: 80%; margin: 0px auto;  }
.form_hdng26{display: block; margin-bottom: 30px; text-align: center;  }
.form_hdng26 span{display: block; font-size: 24px; color: #fff;  font-weight: 400;  }
.form_hdng26 p{display: block; font-size: 17px; color: rgba(256,256,256,.7);  font-weight: 100; margin-top: 5px;  }

.sl_form_block{display: block; width: 100%;}

.sl_form_block .s_form_grp{ display: block; width: 100%; margin-bottom: 20px; }
.sl_form_block .s_form_grp label{ display: block; font-size: 15px; margin-bottom: 8px; font-weight: 400; color: rgba(256,256,256,.75); }
.sl_form_block .s_form_grp .input_block{ display: block; width: 100%; background: #ffffff24; border-radius: 5px; padding: 7px 10px; }
.sl_form_block .s_form_grp .input_block .field_icon{ display: inline-block; vertical-align: middle; width: 20px; font-size: 18px; color: #EA9108; opacity: .6 }
.sl_form_block .s_form_grp .input_block .input_field26{ width: calc(100% - 30px); background: none; border:none; font-size: 14px; 
color:#fff; font-weight: 400;   }


.sl_form_block .s_form_grp .input_block .input_field26:focus{box-shadow: none; outline: none;}

.sl_form_block .s_form_grp .forgot_pwd_link{ font-size: 14px; color: rgb(256,256,256,.6); }
.sl_form_block .s_form_grp .forgot_pwd_link:hover{color: #fff; text-decoration: none;}

.form_btn_54{background: #6179f9; color: #fff; border-radius: 20px; padding: 9px 10px; font-size: 18px; text-align: center;   border:none; width: 100%;}
   
._frmalert_msg{padding: 7px 15px; background: #fff9; border-radius: 5px; margin-bottom: 15px; font-size: 14px;}
._frmalert_msg i{margin-right: 5px;}
._frmalert_msg.error{color: #fff; background: #E74B56}
._frmalert_msg.success{color: #fff; background: #4E9434}

.customDashboardSection{ display: inline-block; width: 100%; margin-top: 20px; }

.customDashboardSection .card-columns .card{border-radius: 0px; background:#3234358c; border-radius: 0px; border: none; padding: 5px; margin-bottom: 10px  }
.customDashboardSection .card-columns .card iframe{background:#3234358c;}
 
 .grid-layout {margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(15% - 20px), 1fr)); grid-gap: 15px;  
  grid-auto-rows: minmax(150px, auto);
    grid-auto-flow: dense;  width: 100%}                               
.grid-item {padding: .5rem; font-size: 14px;color: #929796; background-color: #333c;  border-radius: 3px;}
.span-2 {grid-column-end: span 2; grid-row-end: span 2; }
.span-3 {grid-column-end: span 3;  grid-row-end: span 2;}
.span-4 {grid-column-end: span 6;   grid-row-end: span 3;}



/*kanban data loading indicator*/
.data_loading_progress_sec{position: relative; color: #fff; display: inline-block; margin-left: 10px; vertical-align: middle; margin-top: -3px;}
.first_stap{border:solid 2px rgba(0, 0, 0, 0.4); border-radius: 50%; width: 18px; height: 18px; display: inline-block; text-align: center; 
    line-height: normal; font-size: 7px; vertical-align: top; padding-top: 4px;}  

.lg_state_66{width:16px; height: 16px;} 
 
.loadingkanban .spinner {height: 16px;width: 16px; border-radius: 50%;}
 
/* Spinner 2 */
.loadingkanban .spinner--2 {border: 2px solid rgba(0, 0, 0, 0.4);border-top-color: #3f51b5;animation: spinner2 1000ms linear infinite;}
@keyframes spinner2 {
  to {
    transform: rotate(360deg);
  }
} 
/*kanban data loading indicator*/


/*iframe no data found*/
.datanotfound_ifrm{ width: 100%; text-align: center;}
.datanotfound_ifrm img{width: 200px;}
.datanotfound_ifrm span{display: inline-block; width: 100%; color: #fff; font-size: 28px; margin-top: 20px;  }
/*iframe no data found*/


       
/*break modal css*/      
.agent_break_modal .modal-dialog{ max-width: 700px; }
.break_bx_bg{ min-height: 300px;}
 
.brk_bx_466{background: #202223; width: 200px; position: relative; border: solid 2px #ffffff0f; display: inline-block; float: left;
 margin: 10px 10px 20px; color: #ffffffb0; border-radius: 5px;   padding: 15px; cursor: pointer; min-height: 107px;}
 .brk_bx_466 a:focus{outline: none;}
.brk_bx_466:hover{border-color: #41a689}
.break_title{color: #fff; font-size: 16px; display: block; font-family: Comfortaa;}
.break_title i{margin-right: 5px; color: #ffffff3b}
.brk_bx_466 span{color: #ffffff73}
.remainig_btime {position: absolute;left: 0px;  right: 0px; margin: 0 auto; background: #393737;  display: inline-block;  width: 128px;
  text-align: center; padding: 2px; border-radius: 20px; bottom: -12px; border:solid 1px transparent; color: #ffffffb0}
.brk_bx_466:hover .remainig_btime{border-color:#41a689 }
.remainig_btime i{margin-right: 5px;}

.brk_bx_466:hover .take_break_txt{display: block;}
.brk_bx_466:hover .rmng_time{display: none;}
.take_break_txt{display: none;}
.brk_bx_466 .atmpt_clr{color: #ff909073}
.brk_bx_466 .rmng_clr{color: color: #f4d66873}


.page-disable{position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.75);   z-index: 0; opacity: 0; transition: opacity 0.25s;  }
.dblock{opacity: 1!important;  z-index: 100000;}

/*.page-disable:after{background: url(../images/agent_break_banner.svg) no-repeat; background-position: right top; background-size: 240px; position: absolute;
right: 50px; top: 200px; width: 500px; height: 500px; content: "";}*/

.blur{filter: blur(2px);}
.hide_overflow{overflow: hidden; padding-right: 17px;}

.page_dis_content{ width: 800px;  display: table; margin: 220px auto; text-align: center; }

.breake-message{  background: #2a2121; color: #007bff ; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.10); border-radius: 5px; 
 padding: 35px 15px; width: 500px; display: inline-table;  }
.breake-message h2{ color: #ed5740; font-family: 'Roboto', sans-serif; text-align: center; font-size: 36px; margin: 0px; padding: 0px; font-weight: 100; position: relative;}


.work_btn_sec{background: #d2e3d7; color: #007bff ; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.10); border-radius: 5px; 
 padding: 23px 15px; width: 200px; display: inline-table;  vertical-align: top; margin-left: 10px;}

 .work_btn_sec h3{margin: 0px 0px 15px; padding: 0px; font-size: 18px;  color: #393f39; font-weight: 400; font-family: 'Roboto', sans-serif; }

 .work_btn_sec .btn-success{padding: 1px 30px; border-radius: 20px; font-size: 16px; font-family: 'Roboto', sans-serif; }
 .work_btn_sec .btn-success:hover,  .work_btn_sec .btn-success:focus{outline: none}

.steam-container { position: absolute; left: 90px; top: -21px;}  
.squiggle1 img, .squiggle2 img, .squiggle3 img{ f }
.squiggle3 img{transform: rotate(180deg);}
.squiggle1 { animation: move-and-fade 2.5s linear infinite; animation-delay: 0.2s;   margin-right: 3px; display: inline-block;}
.squiggle2 { animation: move-and-fade 3.5s linear infinite; animation-delay: 0.2s;   margin-right: 3px; display: inline-block; }
.squiggle3 { animation: move-and-fade 4.5s linear infinite; animation-delay: 0.2s;   margin-right: 3px; display: inline-block;}
@keyframes move-and-fade {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
  }
}

/*break modal css*/


/*call log table*/

.call_type_2X{ display: inline-block; background: #0000003d;  min-width: 55px; text-align: center;  font-size: 10px;  padding: 2px 5px; border-radius: 4px;}
.call_type_2X.ibd_label{color: #d5ae3b}
.call_type_2X.obd_label{color: #009688}
.call_type_2X.qc_label{color: #eae0c2}
.call_type_2X.pc_label{color: #a369e9}
.call_type_2X.ctc_label{color: #8bc34a}

.call_type_2X.ibd_label1{color: #d5ae3b}
.call_type_2X.obd_label1{color: #009688}
.call_type_2X.qc_label1{color: #eae0c2}
.call_type_2X.pc_label1{color: #a369e9}


.call_id_2x{font-size: 11px;}

.call_log_table .caller_column_2x{position: relative; height: 65px; vertical-align: top; min-width: 200px;}
.caller_number_2x{font-weight: normal; color: #528fda; font-size: 15px; letter-spacing: 1px;}
.caller_number_2x i{font-size: 13px; vertical-align: baseline; color: #337ab7;   transform: rotate(42deg)}
.call_log_table tbody tr:hover .custmor_action_ss{display: block;}
.frst_agnt_name{display: inline-block; max-width:120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ab903d; font-size: 14px; }
.frst_agnt_name font{display: block; font-size: 12px; color:#876a1a ;}
.call_time_detail{min-width: 90px;}


.iconDropdown.show{display: block!important; left: -100%!important; top: -4px!important}

.call_log_table tbody .custmor_action_ss{bottom: inherit; top: 5px; left: 140px;}

.countryCode{  text-decoration: none; color: #818284; font-size: 12px; vertical-align: middle; display: inline-block; width: 35px; text-align: left;}
.text_light_red .countryCode{color:#818284  ;}

@media only screen and (max-width: 1450px) and (min-width : 1300px) {
.call_log_table tbody .custmor_action_ss{left: 170px; width: 25px; top: -3px;}
.custmor_action_ss .btn-link{width: 18px; height: 18px; line-height: 18px; font-size: 10px!important; margin-bottom: 2px;}
.custmor_action_ss .btn-link.addContactBtn i.f_size_15 {font-size: 10px!important;}
.callback_btn{left: -60px!important; top: 26px!important;}
}


.fromtostatus{background: #423c3c; font-size: 8px; color: #ffffffad; padding: 1px 4px; border-radius: 4px; vertical-align: middle;}

.did_number_2x font{ color:#cdcdcd;  }

.duration_column{min-width: 400px;}
.duration_column span{display: inline-block; width: 18%; text-align: center; padding: 0 5px; font-size: 12px; vertical-align: top;}
.duration_column span font{font-size: 12px; color: #0973ac; display: block;}
.duration_column span:last-child{width: 24%;}
.duration_column span.duration_text{color: #6e757c}


.agent_in_Call_list{display: inline-block; width: 100%;}
.agent_in_Call_list ul{list-style: none; margin: 0px 0px 0px 30px; padding: 0px;}
.agent_in_Call_list ul li{display: inline-block; width: 100%; margin-bottom: 10px; font-size: 15px; color: #cdcdcd;}
.agent_in_Call_list ul li font{display: inline-block; width: 60px; vertical-align: middle; color: #d5ae3b; margin-left: 5px; margin-right: 10px;}
.agent_in_Call_list ul li:last-child{margin-bottom: 0px;}

.agent_in_Call_list ul li audio{width: 250px; height: 38px; vertical-align: middle;}

.agent_detail_list_2x{display: inline-block; width: 100%;}

.agent_detail_list_2x .nav-pills .nav-link{font-size: 13px; padding: 4px 10px; color: #cdcdcd; margin-right: 8px; background: #00000038}
.agent_detail_list_2x .nav-pills .nav-link.active{color: #fff; background: #007bff}

.agent_detail_list_2x .tab-content{min-height: 250px; max-height: 400px; overflow: auto;}

.agent_detail_list_2x .table{margin-bottom: 0px;}
.agent_detail_list_2x .table thead tr th{color: #cdcdcd; font-size: 13px; font-weight: normal; border-color: #dee2e61c;
 padding-top: 5px; padding-bottom: 5px; background: #1110101f}
.agent_detail_list_2x .table tbody tr td{ color: #cdcdcd; border-color: #dee2e608; vertical-align: middle; background: none}
.agent_detail_list_2x .table tbody tr td audio{width: 135px; height: 22px; vertical-align: middle;}
.agent_detail_list_2x .table tbody tr td .basic-btn{padding: 2px 10px; margin-left: 4px; border-radius: 2px;}

.agent_detail_list_2x .table tbody tr td .form-control{padding: 5px; height: inherit; font-size: 12px; background: #ffffff0a; border-color: #ced4da3d; color: #cdcdcd}
.agent_detail_list_2x .table tbody tr td.visiting_time_x2{font-size: 11px; color: #999}

.agent_detail_list_2x .table tbody tr:hover td{background: none!important;}


.dtmf_key_list span{display: inline-block; width: 20px; height: 20px; border-radius: 4px; border:solid 1px #666; text-align: center; float: left;
 margin-left: 4px; background: #555;}

.mudule_type_2x{border-radius: 4px; border:solid 1px #666; background: #555; font-size: 12px; padding: 3px 7px;} 
.other_node_detailx2{max-width: 250px;}

.call_tag_info_bx{ display: inline-block; width: auto; padding-top: 5px; text-align: left;  font-size: 10px; padding: 1px 10px;
   margin-top: 6px; background: #0000001a; border-radius: 5px; margin-left: 20px;}
.call_tag_info_bx font{margin-right: 8px;}

.callLogTblSec .call_time_detail{color: #6d757c;}
.showAgents{background: #3c6698; color: #ffffffb0; padding: 0px 5px; border-radius: 5px; display: inline-block; text-align: center; min-width: 30px; vertical-align: initial; font-size: 12px; cursor: pointer;}
.callDetailModal{color: #3c6698;}
.text_d_blue1{color: #3c6698;}
.text_d_blue2{color: #516b88;}

@media only screen and (max-width: 1520px) {
.duration_column span{padding: 0px 2px;}
} 


@media only screen and (max-width: 1300px) {
.frst_agnt_name{max-width: 90px;}
.duration_column{min-width: 320px;}
.duration_column span font i{display: none;}
}

/*call log table*/

/*agent log report table*/
.agent_log_tbl tr td.agent_detailas{min-width: 190px;}
.agent_log_tbl tr td.agent_detailas span{display: inline-block; width: 180px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.agent_log_tbl tr td.agent_detailas span font{font-size: 12px;}
.agent_log_tbl tr td.call_time_detail{min-width: 105px;}
.forwared_true_al{ margin-left: 5px; color: #ca6821 }
.agent_log_duration{min-width: 390px;}
.agent_log_duration span{display: inline-block; width: 24%; text-align: center; padding: 0 5px; font-size: 12px; vertical-align: top;}
.agent_log_duration span font{font-size: 12px; color: #0973ac; display: block;} 
.agent_log_duration span.duration_text{color: #18A2B8; font-size: 14px;}

.agent_log_tbl tr td.caller_column_2x{min-width: 175px;}
.agent_log_tbl tr .heightlight_bg_al{background: #20272c}

@media only screen and (max-width: 1460px) {
.agent_log_tbl tr td.agent_detailas{width: 120px; max-width: 120px; min-width: inherit;}
.agent_log_tbl tr td.agent_detailas span{width: 110px;  font-size: 13px;}
.agent_log_duration{min-width: 320px;}
.agent_log_duration span font i{display: none;}
.agent_log_duration span.duration_text{font-size: 13px;}
}

@media only screen and (max-width: 1300px) {
.agent_log_tbl tr td.agent_detailas{width: 100px; max-width: 100px; min-width: inherit;}
.agent_log_tbl tr td.agent_detailas span{width: 100px;  font-size: 12px;}
.agent_log_tbl tr td.caller_column_2x{min-width: 120px;}
.agent_log_tbl tr td .custmor_action_ss{ left: 75px; top: 25px; }
.agent_log_tbl tr td .custmor_action_ss .btn-link{width: 15px; height: 15px; line-height: 15px; font-size: 9px;}
.agent_log_tbl tr td.call_time_detail{min-width: 98px;}
.agent_log_duration{min-width: 320px;}
.agent_log_duration span {width: 22%;}
.agent_log_duration span:last-child{width: 27%;}
.agent_log_duration span font i{display: none;}
.agent_log_duration span.duration_text{font-size: 13px;}
}

@media only screen and (max-width: 1220px) {
.agent_log_duration{min-width: 300px;}
}

/*agent log report table*/



/*css for offline notification*/
.offline_msg{ width: 100%; height: 30px;   position: relative;   text-align: center; margin-top: -13px;}
.offline_msg:after{position: absolute; left: 0px; width: 100%; height: 2px; background:#82540c; content: "";}
.offline_msg span{  padding: 2px 30px; border-radius: 0px; background: #82540c; margin: 0 auto; 
  display: inline-block;  color: #f2f2f2; border-radius: 0px 0px 2px 2px; text-transform: uppercase;}
.offline_msg span font{font-size: 10px; color: #ffffff96}

.offline_msg.timover{margin-top: -13px}
.offline_msg.timover:after{background:#9a0748;}
.timover span{background: #9a0748}
  
.kanban_sec .offline_msg{margin-top: 0px;}
.kanban_sec .offline_msg span{padding: 2px 15px; font-size: 11px;}
 
/*css for offline notification*/
 
 

/*break report table*/
.opcity_5{opacity: .5;}
.percentage_bar_verticle{width: 100px; min-width: 100px;}
.percentage_bar_verticle .progress { border-radius: 0px;  background: transparent;   cursor: pointer;}

.progress-bar-vertical {
  width: 2px; min-height: 40px;  display: flex;  align-items: flex-end;  margin-right: 5px; float: left;}

.progress-bar-vertical .progress-bar { width: 100%; height: 0; -webkit-transition: height 0.6s ease;  -o-transition: height 0.6s ease;
  transition: height 0.6s ease;}

.time_exceed_txt {color: #E15252}
.break_hdng_txt{color: #d5ae3b }
.cmpr_tx45{font-style: normal; color: #cba673; font-size: 12px;}
 
.break_report_tbl .cstm_date_frmt .date_sec_65{padding-left: 0px!important; display: block;}
 
.break_report_tbl table thead tr th .th_option_drop::after{display: none;}
.break_report_tbl table thead tr th .th_button{line-height: normal;}
.break_report_tbl table thead tr th .th_button:before{ position: absolute;  bottom:-20px;  left: 23px;  content: "\f0d8";  
font-family: 'Font Awesome 5 Free';  font-weight: 900; display: none; color: #343637; font-size: 34px;}
.break_report_tbl table thead tr th .dropdown.show .th_button:before{display: block;}
.break_report_tbl table thead tr th .th_option_drop{top: 0px!important;} 


.break_report_tbl table .first_column{width: 46px; max-width: 46px;}
.break_report_tbl table .second_column{ width: 165px; max-width: 165px; }
.break_report_tbl table .third_column{ width: 100px; max-width: 100px; }
.break_report_tbl table .fourth_column{ width: 100px; max-width: 100px;}
.break_report_tbl table .fifth_column{ width: 100px; max-width: 100px;}
.break_report_tbl table .sixth_column{ width: 100px; max-width: 100px;}
.break_report_tbl table .break_column{width: 60px; max-width: 60px; vertical-align: top;}
.break_report_tbl table .break_column span {padding-left: 5px; color: #787b7b;}

.break_report_tbl .clone-head-table-wrap{top:47px!important;  box-shadow: rgba(6, 6, 6, 0.8) 0px 6px 10px -5px!important;}
.break_report_tbl .clone-head-table-wrap table{ background: #3234358c!important; margin-bottom: 0px!important }
.break_report_tbl .clone-head-table-wrap tbody{display: none;}

.break_report_tbl table tr td.field_data_with_info{padding-top: 6px!important; height: 75px;}
.break_report_tbl table tr td .field_extra_info_btn, .break_report_tbl table tr td .avg_duration_txt{bottom: 25px;}
.break_report_tbl table tr td .breakCount{position: absolute; bottom: 6px; font-size: 12px;  line-height: normal; 
padding: 0px 2px; border-radius: 5px;}
.break_report_tbl table tr td .breakCount font{color: #787b7b }
 
.break_report_tbl table .tr_collapse_data td.field_data_with_info{height: 65px!important}
.break_report_tbl table .tr_collapse_data td .field_extra_info_btn, .break_report_tbl table .tr_collapse_data td .avg_duration_txt{bottom: 21px;}

.overflow_visible{overflow: visible!important}

/*break report table*/

/*time wasted report table*/
.time_wasted_tbl table .badge{font-weight: normal; vertical-align: text-bottom; color: #ffffffc7; background: #343d45}
.star_ratting{font-size: 9px; color: #444}

.time_wasted_tbl table tr th{padding: 4px 8px; font-size: 13.5px;}
.time_wasted_tbl table tr td{padding: 2px 8px; color: #7f9292; font-size: 12px;}
.time_wasted_tbl table .first_column{width: 46px; max-width: 46px;}
.time_wasted_tbl table .second_column{ width: 150px; max-width: 150px; }
.time_wasted_tbl table .third_column{ width: 120px; max-width: 120px; text-align: center; }
.time_wasted_tbl table .fourth_column{ width:100px; max-width: 100px; text-align: center;}
.time_wasted_tbl table .hits_column{width: 80px; text-align: center;}

.time_wasted_tbl table .fifth_column{ width: 100px; max-width: 100px; text-align: center;}
.time_wasted_tbl table .sixth_column{ width: 100px; max-width: 100px;}

.ring_drtn_clmn_tree{   text-align: left; }
.cmb_blck_kl{position: relative; padding-left: 10px; font-size: 12px;}
.cmb_blck_kl:after{position: absolute; left: 0px; top: 7px; content: ""; width: 1px; height: 21px; background: #444}
.cmb_blck_kl span{position: relative;}
.cmb_blck_kl span:first-child:after{position: absolute; left: -10px; top: 7px; width: 8px; height: 1px; background: #444; content: "";}
.cmb_blck_kl span:last-child:after{position: absolute; left: -10px; bottom: 7px; width: 8px; height: 1px; background: #444; content: "";}

.time_wasted_tbl .duration_txt{color: #5279ad!important}
 
 
.time_wasted_tbl .clone-head-table-wrap{top:47px!important;  box-shadow: rgba(6, 6, 6, 0.8) 0px 6px 10px -5px!important;; border-bottom: solid 1px #333}
.time_wasted_tbl .clone-head-table-wrap table{ background: #3234358c!important; margin-bottom: 0px!important }
.time_wasted_tbl .clone-head-table-wrap tbody{display: none;}

.progress_sarv { width:40px; height: 40px; background: #1d1c1c; border-radius: 50%; position: relative;}
.progress_sarv::after { content: ""; width: 100%;  height: 100%;  border-radius: 50%;     position: absolute;
  top: 0;  left: 0;}
.progress_sarv>span { width: 50%; height: 100%;  overflow: hidden;  position: absolute;  top: 0;  z-index: 1;}
.progress_sarv .progress-left { left: 0;}
.progress_sarv .progress-bar { width: 100%;  height: 100%;  background: none;  border-width: 2px;  border-style: solid; position: absolute;  top: 0;
}
.progress_sarv .progress-left .progress-bar { left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px;  border-left: 0;  -webkit-transform-origin: center left;
  transform-origin: center left;}
.progress_sarv .progress-right { right: 0;}
.progress_sarv .progress-right .progress-bar { left: -100%;  border-top-left-radius: 80px;  border-bottom-left-radius: 80px;  border-right: 0;
  -webkit-transform-origin: center right;  transform-origin: center right;}
.progress_sarv .progress-value { position: absolute;  top: 0;  left: 0; font-size: 18px;}

 .progress_midium .progress-bar{border-color: #ffc107;}
 .progress_midium .progress-value{color: #d5ae3b }

 .progress_high .progress-bar{border-color: #28a745;}
 .progress_high .progress-value{color: #59a359 }

 .progress_low .progress-bar{border-color: #dc3545;}
 .progress_low .progress-value{color: #E15252 } 


.infrmtion_data_mdl{background: #202223}
.infrmtion_data_mdl .modal-body{padding-left: 30px; padding-right: 30px;}
.infrmtion_data_mdl .text_content_3{ font-size: 14px; color: #cdcdcdc7; text-align: justify; }

.infrmtion_data_mdl .bullet_list_3{list-style: none; margin: 0px 0px 20px; padding: 0px;}
.infrmtion_data_mdl .bullet_list_3 li{font-size: 14px; color: #829be4ba; margin-top: 5px; position: relative; padding-left: 50px;}
.infrmtion_data_mdl .bullet_list_3 li:after{position: absolute; left: 22px; top: 7px; width: 8px; height: 8px; background: #747576ba; border-radius:100%; content: "";}

.infrmtion_data_mdl .bullet_list_3.flat_indicator li font{color: #cda456; margin-right: 5px;}
.infrmtion_data_mdl .bullet_list_3.less_mrgn li{padding-left: 15px; margin-top: 15px;}
.infrmtion_data_mdl .bullet_list_3.less_mrgn li:after{left: 0px;}
 
.infrmtion_data_mdl .title_hdng_3{font-size: 18px; color: #ea833a; font-family: Comfortaa; padding-top: 25px;}

.explain_table_3 {margin-top: 15px; border:solid 2px #343435;}
.explain_table_3 tr th{font-weight: 500; font-size: 13px; background: #343435;}
.explain_table_3 tr td, .explain_table_3 tr th{ color: #cdcdcd; border-color:  transparent; }
.explain_table_3 tr td{font-size: 13px; padding: 5px 8px;}

.infrmtion_data_mdl .badge{font-weight: normal; font-size: 12px; font-style: normal; color: #ffffffc7}
.infrmtion_data_mdl .hightligted_text{ padding: 10px; text-align: center; display: block; background: #ffffff14; color:#ea833a; border-radius: 5px; font-size: 18px;  }

/*time wasted report table*/

/*agent timeline css*/
.hour_counter_cntnt{ list-style: none; margin: 0px; padding: 0px;}
.hour_counter_cntnt li{ float: left;   text-align: center; font-size: 11px; padding: 0px 0px 5px; position: relative;}
.hour_counter_cntnt li:after{position: absolute; left: 0px; right:0px; bottom:-17px; width: 1px; height: 15px; background: #273035; margin: 0 auto; content: "";}

.timeline_table table{margin-bottom: 0px;}
.timeline_table table tbody tr td .hour_counter_cntnt li:after{top: -15px; height: 60px;}
.timeline_table table tbody tr:last-child td .hour_counter_cntnt li:after{ height: 42px;}

.timlineBarChartSec{ display: block; width: 100%; }
.timlineBarChartSec .progress{background: transparent; border-radius: 0px; padding: 2px 0px; height: 12px; position: relative; z-index: 2}
.timlineBarChartSec .progress .progress-bar{height: 8px; cursor: pointer;}
.timlineBarChartSec .progress .progress-bar.bg-login{background-color: #373738 !important} 
.timlineBarChartSec .progress .progress-bar.bg-warning{background-color:#987c27 !important  }
.timlineBarChartSec .progress .progress-bar.bg-primary{background-color: #3a79bd!important}
.timlineBarChartSec .progress .progress-bar.bg-danger{background-color: #bc4550 !important}
.timlineBarChartSec .progress .progress-bar.bg-null{background-color: transparent!important;}


.timlineBarChartSec .progress .progress-bar:hover{box-shadow: 0 0 13px 5px rgba(0,0,0,.2);}
.timlineBarChartSec .progress .progress-bar.bg-null:hover{box-shadow: none;}

.timeline_table table thead tr th.agnt_name_th45{width: 165px; max-width: 165px;}
.timeline_table table tbody tr td.timline_td{background:#17263659;} 
.timeline_table table tbody tr td{border-color: transparent!important;}
.timeline_table table tbody tr td.agent_detail_db{background: #1f212359; border-bottom:  solid 1px #ffffff0a!important; width: 165px; max-width: 165px; }
.timeline_table table tbody tr:hover td{background: #2b3239 !important}

 
.timeline_indiciator{list-style: none; margin: 0px; padding: 0px;}
.timeline_indiciator li{display: inline-block; float: left; margin-right: 15px; color: #cdcdcd; font-size: 12px;}
.timeline_indiciator li span{display: inline-block; vertical-align: middle; cursor: pointer;}
.timeline_indiciator li span i{display: inline-block; width: 13px; height: 13px;   border-radius: 50%; background: #fff; 
  vertical-align: middle; margin-right: 5px;}
.timeline_indiciator li span.tl_login i{background:#373738 }
.timeline_indiciator li span.tl_talk i{background:#3a79bd  }     
.timeline_indiciator li span.tl_hold i{background: #987c27  }
.timeline_indiciator li span.tl_break i{background:#bc4550 }

.low_bar_range{opacity: .2}
.highlight_bar_range{ opacity: 1}

.timeline_table .clone-head-table-wrap{top:84px!important;  box-shadow: rgba(6, 6, 6, 0.8) 0px 6px 10px -5px!important;}
.timeline_table .clone-head-table-wrap table{ background: #3234358c!important; margin-bottom: 0px!important }
.timeline_table .clone-head-table-wrap tbody{display: none;}
.table_filter_sec.fixTop{position: fixed; top: 48px; right:15px; width: 100%; background: #141618; z-index: 999}
 

/*agent timeline css*/

.text_total_calls{ color: #3370ad }
.text_answered {color:#42c751 }
.text_transferred{color:#3370ad }
.text_missed{color:#e77569 }
.text_failed{color:#c79342 }
.text_partially_missed{color:#c79342 }


/*searching model*/
.search_model .modal-dialog{max-width: 600px;}
.search_model .modal-content{border-radius: 0px; background: #323232; border:none;} 
.search_model .modal-header{border-bottom: 0px; background: #262828; padding-bottom: 15px; border-radius: 0px;}
.search_model .modal-header .modal-title{color: #ea833a; font-family: Comfortaa; font-size: 18px; font-weight: 700;}
.search_model .modal-header .modal-title i{margin-right: 5px;}
.search_model .modal-header button.close{color: #cdcdcd5c; opacity: 1; font-size: 21px; text-shadow: none;} 

.search_model .modal-body{padding: 20px 30px; max-height: 500px; overflow: auto;}

.search_model .field_label{ color: #d0ab21; font-size: 13px; font-weight: 400; display: block; }
.search_model .form-control{border-radius: 0px; background: #ffffff1a ; border-color: #cbcbcb42; color: #cdcdcd; box-shadow: none; font-size: 13px;}
.search_model .form-control option{background: #000000ba}
.search_model .form-control optgroup{ background: #000000cf; font-style: normal; }
.search_model .input-group-text { background-color: #323233; color: #cdcdcd; border-color: #cbcbcb42; font-size: 11px; border-radius: 0px;}

.search_model .modal-footer{border-top: none;}

.search_error_frm{color:#951010!important}

.search_model .select2-container{width: 100%!important;}
.select2-container--default .select2-selection--multiple{background: #ffffff1a !important; border:solid 1px #cbcbcb42!important;}

/*searching model*/

 
.section_404{display: flex;  flex-direction: column; align-items: center;justify-content: center;min-height: calc(100vh - 80px);}
.text_404{font-family: 'Monoton', cursive; font-size: 120px; color: #ffffff36; text-align: center; display: block; line-height: 180px;} 
.text_404 .clr_ylw{color: #FFE082}
.text_404 .clr_red{color: #FFAB91}
.text_404 .clr_ble{color: #81D4FA}
.msg_404_text{ display: block; width: 100%;  text-align: center;}
.msg_404_text span{display: block; font-size: 24px; color: #cdcdcd; font-weight: 100; font-family: Comfortaa;}
.msg_404_text p{color: #cdcdcda8; font-size: 18px; margin-top: 10px; font-weight: 300;}
.btn_404_part{display: block; margin-top: 50px;}
.btn_404_part .btn-outline-primary{color: #2280e4; border-color: #518fd1; border-radius: 3px; }
.btn_404_part .btn-outline-primary:hover{color: rgba(256,256,256,.8); background: #2b5888;}
.btn_404_part .btn-outline-secondary{  color: #b3b7bb; border-color: #6c757d; border-radius: 3px; }
.btn_404_part .btn-outline-secondary:hover{color: #fff; background: #313232;}


/*css for create custom dashboard*/
 /*.grid-stack > .grid-stack-item > .grid-stack-item-content { left: 10px !important;  right: 10px !important;  } */
 .create_custom_db_sec{margin-top: 60px; padding-right: 320px;} 
  .db_widget_sec{width: 300px; position: fixed; right: 0px; top: 0px; padding: 10px; background: #2c2b2b; height: 100%; z-index: 1;
   padding-top: 60px;  box-shadow: -6px 0 5px -2px #00000026; overflow: auto; }
  .db_widget_list{list-style: none; margin: 0px; padding: 0px; width: 100%; display: inline-block;}
  .db_widget_list li{display: inline-block; float: left; padding: 10px; width: 50%; margin-bottom: 5px;}
  .db_widget_list li .widget_Box{ display: inline-block; width: 100%; text-align: center; cursor: grab; border:solid 1px #6666666e; padding:10px 5px; 
    border-radius: 3px; color: #adaeae}
  .db_widget_list li .widget_Box:hover{box-shadow: 0px 0px 3px 3px #292828; color: #fff;}  
  .db_widget_list li .widget_Box i{display: block; font-size: 22px;}
  .db_widget_list li .widget_Box span{font-size: 13px; display: block; padding-top: 10px;}
  .db_widget_list li .widget_Data{ display: none; position: relative;}
  .db_widget_list li .grid-item{background: none; padding:0px;}
  .overlay_fix { position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0; width: 100%; height: 100%;  z-index: 100000; display: none;}
  .ui-draggable-dragging .overlay_fix{display: block;}
  .grid-stack-item-content .widget_Box{display: none;}
  .widget_delete_btn{position: absolute; right: 0px; top: 0px; border: none; padding: 0px; width: 20px; height: 20px; line-height: 20px; 
    border-radius: 50%; font-size: 10px; background: #2c2b2b; color: #cdcdcd; display: none;}
  .grid-stack-item-content:hover .widget_delete_btn{display: block;}

  .grid-stack-item-content .widget_Data{height: 100%;}

 .grid-stack > .grid-stack-item > .ui-resizable-se{background: none;}
 .grid-stack > .grid-stack-item > .ui-resizable-se:after{position: absolute; left: 0px; top: 0px; content: "\f338"; width: 100%; height: 100%; 
 color: #cdcdcd; font-size: 13px;  font-family: 'Font Awesome 5 Free';  font-weight: 900; background: #2c2b2b;  border-radius: 50%; text-align: center;
   }


.extrnal_detail_25{display: inline-block; width: 100%;   margin-top: 10px; margin-bottom: 10px;}
.extrnal_detail_25 ul{list-style: none; margin: 0px; padding: 0px; }
.extrnal_detail_25 li{  text-align: center;}
.extrnal_detail_25 li span{display: block; font-size: 15px; color: #ffffff6b }
.extrnal_detail_25 li font{font-size: 25px; color: cadetblue}
.ex_dtl_box{display: inline-block; width: 100%; background: #353535; padding: 10px 5px 5px; border-radius: 4px;}  

@media only screen and (max-width: 1300px) {
.db_widget_sec{width: 250px;}
.create_custom_db_sec{padding-right: 260px;}
}

@media only screen and (max-width: 1365px) and (min-width: 1200px) {
.top_count_detail{margin-right: 10px;  }
}

/*new updated css for custom dashboard*/
.left_db_Section{width: 220px; position: fixed; left: 0px; top: 0px; padding-top: 65px; background: #2c2b2b; z-index: 1; min-height: 100%; box-shadow:  6px 0 5px -2px #00000026;}
.cstm_db_block_Sec{width: 100%; padding-left: 220px;}
.dynmcdashboardList{list-style: none; margin: 0px; padding: 0px;}
 
.dynmcdashboardList li{display: inline-block; float: none; width: 100%; position: relative;}
.dynmcdashboardList li a{color: #cdcdcd; font-size: 13px; padding: 7px 15px 7px 40px; display: block;}
.dynmcdashboardList li:hover a{background:#14161830}
.dynmcdashboardList li.active a{background:#14161830; color: #d5ae3b} 
.dynmcdashboardList li:after{ position: absolute; left: 25px; top: 8px;   content: "\f58e"; font-family: 'Font Awesome 5 Free';   font-weight: 900; color: #ffffff4a; cursor: grab;  }

.widget_heading_Section{ padding: 10px;}
.widget_heading_Section h2{font-family: Comfortaa; font-size: 16px; color: #ffffffd6; display: inline-block;}
.wdgt_actn_btn{ background: none; padding: 0px; padding-right: 0px; border:none; color: #cdcdcd; font-size: 15px; }
.widget_heading_Section .wdgt_actn_btn:after{display: none;}

.active_db_indicator{ position: absolute; right: 10px; top: 8px; background: #886420; padding: 2px 6px; border-radius: 4px; font-size: 10px; line-height: normal; color: #fff; }
.cstm_db_create_bx{min-height: 100vh; border:0px; display: block;  }

.create_db_modal_lg { padding: 0 !important;}
.create_db_modal_lg .modal-dialog { width: 100%;  max-width: none;  height: 100%;  margin: 0;}
.create_db_modal_lg .modal-content { height: 100%;  border: 0;  border-radius: 0;}
.create_db_modal_lg .modal-body { overflow-y: auto;}

.db_widget_sec{width: 220px; position: fixed; left: 0px; top: 0px; padding: 10px; background: #2c2b2b; height: 100%; z-index: 1; padding-top: 60px;  box-shadow: -6px 0 5px -2px #00000026}
.db_widget_list{list-style: none; margin: 0px; padding: 0px 10px; width: 100%; display: inline-block; max-height: 550px; overflow: auto;}
.db_widget_list li{display: inline-block; float: left; padding: 5px; width: 100%;}
.db_widget_list li .widget_Box{ display: inline-block; width: 100%; text-align: left; cursor: grab; border:dotted 2px #6666666e; padding:7px 15px; border-radius: 3px;}
.db_widget_list li .widget_Box:hover{border:solid 2px #6666666e;}
.db_widget_list li .widget_Box i{display: inline-block; font-size: 14px; margin-right: 5px;}
.db_widget_list li .widget_Box span{font-size: 14px; display: inline-block; padding-top: 0px;} 
.grid-item { padding: 0!important; overflow: auto!important; background: #242628!important; }



/*css for create custom dashboard*/


.table_filter_sec { border-top: solid 1px #27292b; border-bottom: solid 1px #27292b; padding-top: 8px; padding-bottom: 8px;}

.right_btn_sec326 { display: inline-block;  width: auto;  float: right;  padding-left: 8px;  vertical-align: middle; border-left: solid 1px #27292b;}

.call_forward_modal .msg_print{  color: #fff;  font-size: 18px;   font-weight: 300;}
.call_forward_modal .msg_print font{color:#5394da }
.call_forward_modal .msg_print span{color: #f9a825}

/*wrapup task timer section css for call widget*/
 .timernotification_block{background: #232728; position: absolute; right: -370px; top: 30px; width: 100%; height: 100%; border-radius: 0px; z-index: 999; transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s; padding: 55px 8px 10px; text-align: center;}
 .timer_font{font-size: 38px; font-weight: 100; display: block; vertical-align: middle; margin-right: 5px; color: #fff; margin-bottom: 20px;}
 .timer_font i{color: rgba(256,256,256,.5); margin-right: 5px;}
 .timer_heading{color: #ef9545; font-size: 22px; font-weight: 100; display: block;}
 .timer_heading font{color: #3cb3b3; display: block;}
 .show_timer_box{right: 0px}
 /*wrapup task timer section css for call widget*/
  

/*css for responsive view of all pages*/

 

@media only screen and (min-device-width: 1024px) and (max-device-width: 1300px) { 
 
.sarv_menupart li a i{display: none;}
.sarv-logo{margin-right: 0px;}
.sarv_menupart{margin-left: 15px;}
.sarv_header .form-inline li.nav-item .nav-link{padding: .5rem .1rem;}
.db_search_bx{width: 180px;}
.db_search_bx .textbox{width: 145px;} 

.page_title{font-size: 20px;}

.db_frame_sec .col-md-3{flex: 0 0 30%!important; max-width: 30%!important;}
.db_frame_sec .col-md-9{flex: 0 0 70%!important; max-width: 70%!important;}

.top_count_detail{padding-right: 10px; margin-right: 10px;}
.top_count_detail .f_size_18{font-size: 15px!important;}
.top_count_detail .mini_chart #chart{width: 70px!important;}
.mini_chart{width: 66px;}

 .queue_count span{font-size: 15px;}
 .queue_count font{font-size: 12px;}
 .queue_table table tr td .agent_name{font-size: 12px; width: 70px;}
 .queue_table table tr td.f_size_15{font-size: 13px!important;}
 .queue_table table tr th{font-size: 12px;}
 .db_Section_bg h2{font-size: 14px;}
 .agent_summary_head span{font-size: 12px;}

 .db_agent_list .db_agent_table{overflow: auto; width: 100%}
 .db_agent_list .db_agent_table .table{min-width: 1000px;}

 .working_time i{margin-bottom: 4px;}
 .working_time span{margin-top: 0px;}

 .wrkng_days li label{width: 50px;}

 .workinghour_input .form-control{width: 19%!important}

 .desitnation_field_col .w-25{width: 30%!important}
 .desitnation_field_col .dt_field{ width: 65%!important; }

.time_wasted_tbl .clone-head-table-wrap{height: 46px!important}
.w_50_responsive{width: 50%!important}

.time_wasted_tbl table .second_column{width: 120px; max-width: 120px; padding-left: 10px!important}
.time_wasted_tbl table tr td .agent_name{width: 112px;}
.time_wasted_tbl table .third_column{width: 110px; max-width: 110px;}
.time_wasted_tbl table .fourth_column{width: 80px; max-width: 80px;}
.time_wasted_tbl table tr th{font-size: 12.5px;}

.call_log_table thead tr th{font-size: 12px;}
.call_log_table .caller_column_2x{min-width: 110px;}
.caller_number_2x{font-size: 12px;}
.call_log_table .duration_column span font{font-size: 11px;}
.call_log_table .duration_column span{font-size: 12px!important; text-align: left;}

.call_log_table tbody .custmor_action_ss{top: -3px; left: 130px; width:75px; height: 56px; padding: 5px; border-radius: 4px; background: #242628;}
.custmor_action_ss .callback_btn{left: 7px; top: 26px; }
.custmor_action_ss .btn-link{width: 15px; height: 15px; line-height: 15px; font-size: 9px!important;}
.custmor_action_ss .addContactBtn i{font-size: 9px!important;}
.call_tag_info_bx{margin-left: 0px;}
.did_number_2x font{font-size: 11px!important}
.call_status{padding: 1px 3px; line-height: normal; font-size: 10px;}
.frst_agnt_name{max-width: 70px;}
.frst_agnt_name font{display: block;}

.p_0_1024{padding: 0px;} 

.campaign_list_table tr td.campaign_detail{width: 188px;}
.campaign_list_table tr td.campaign_time_setting{width: 240px;}
.campaign_list_table tr td.campaign_detail .campagin_time{font-size: 10px;}
.report_data_campaign span{font-size: 12px!important;}
.action_column_cmpn_list .btn-group {position: absolute; right: 0px; top: 8px;}
.ttl_conacts_dtl{margin-top: 5px;}

.createobdcmpaign_sec .col-lg-8{max-width: 100%!important}
.tab_step ul li{padding: 5px 20px;}

.createobdcmpaign_sec .wrkng_days li label{width: 58px;}

.top_count_detail{margin-right: 1px; margin-left: 1px; padding-right: 5px; }
.db_date_picke3r button{font-size: 11px; padding: 5px 4px;}

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) { 

.page_title{font-size: 17px!important;}
.page_title .report_count{font-size: 14px;}
.top_count_detail .f_size_18{font-size: 14px!important}
.top_count_detail{padding-right: 5px; margin-right: 5px; margin-bottom: 8px;}
.top_count_detail .mini_chart #chart{width: 45px!important;}
.mini_chart{width: 45px!important}
.top_count_detail .f_size_13{font-size: 12px!important}

.db_frame_sec .col-md-3{flex: 0 0 35%!important; max-width: 35%!important;}
.db_frame_sec .col-md-9{flex: 0 0 65%!important; max-width: 65%!important;}

 .queue_count span{font-size: 15px;}
 .queue_count font{font-size: 12px;}
 .queue_table table tr td .agent_name{font-size: 12px; width: 70px;}
 .queue_table table tr td.f_size_15{font-size: 13px!important;}
 .queue_table table tr th{font-size: 11px; padding: 5px 2px;}
 .db_Section_bg h2{font-size: 14px;}
 .agent_summary_head span{font-size: 12px;}

 .db_agent_list .db_agent_table{overflow: auto; width: 100%}
 .db_agent_list .db_agent_table .table{min-width: 1000px;}

.agent_report_timline, .show_timline_dv_visible1, .show_timline_dv_visible2, .show_timline_dv_visible3{width: 90%; right: -90%;}

.agentListTable .agentNameDtl font{display: block;}
.agentListTable .agentNameDtl .f_size_14{font-size: 13px!important}
.agentListTable .creatByclnt font{display: block;}
.agentListTable .creatByclnt .m-w-100{max-width: 60px!important; font-size: 12px!important}
.agentListTable .working_time{ min-width: 145px; }
.working_time i{margin-bottom: 3px;}

.custom-form .form-group .form-control{font-size: 12px;}
.workinghour_input .form-control{width: 17%; padding: 5px 4px!important;}

.agnt_dtl_bg .wrkng_days li label{width: 36px; font-size: 12px;}

.agntGroupList tr td:first-child{min-width: 50px!important}
.comman_table tbody tr td.date_field{width:100px; }
.comman_table tbody tr td.date_field span{font-size: 11px;}

.agntBrakList tr td .f_size_15{font-size: 14px!important}
.agntBrakList tr td .f_size_14{font-size: 13px!important}
.agntBrakList tr td .f_size_13{font-size: 12px!important}

.agntBreakLog .agntdtlName span{display: block; font-size: 12px!important;}

.btn-custom-blue{font-size: 11px; padding: 5px;}
.agent_Select_filter_btn{font-size: 11px; padding: 5px 4px;}
.custom_date_picker button{font-size: 11px; padding: 5px;}
.basic-btn{font-size: 11px;}

.break_report_tbl .agent_detail_db  .agent_id{display: block!important;}
.break_report_tbl table tr td .agent_name{width: 100px;}
.break_report_tbl table .second_column{width: 100px; max-width: 100px;}
.break_report_tbl table .first_column{width: 33px; max-width: 33px;}
.percentage_bar_verticle{min-width: 80px;}
.progress-bar-vertical{margin-right: 3px;}
.break_report_tbl table .third_column{width: 80px; max-width: 80px;}
.break_report_tbl table .fourth_column{width: 80px; max-width: 80px;}
.break_report_tbl table .fifth_column{width: 80px; max-width: 80px;}
.break_report_tbl .field_data_with_info .f_size_14{font-size: 13px!important}
.break_report_tbl table .sixth_column{width: 70px; max-width: 70px;}

.hitsanalsisPage .filter_section {width: 47%!important;}
.hitsanalsisPage .basic-btn{padding: 5px;}
.hitsanalsisPage .table_filter_sec .btn-custom{padding-left: 5px; padding-right: 5px; }
.hitsanalsisPage .table_filter_sec .filter_input{max-width: 110px;}

.hitsanalysis_tbl tr td.agent_detail_column{max-width: 220px; min-width: inherit; width: 220px;}


.agent_time_log_table .agent_detail_db {width: 120px; max-width: 120px;}
.agent_time_log_table tr td .text-primary{display: block!important}
.agent_time_log_table .link_hover_effect::after{display: none;}
.agent_time_log_table tr td .agent_name{width: 100px!important;}
.agent_time_log_table tr td .duration_txt{font-size: 13px!important}
.agent_time_log_table tr td .avg_duration_txt{font-size: 11px;}
.agent_time_log_table tr th.pl-5{padding-left: 0px!important}

.pl_0_768{padding-left: 0px;}
.pr_15_768{padding-right: 15px !important;}
.mt_5_768{margin-top: 5px!important; margin-bottom: 5px;}
.time_wasted_tbl table tr th{font-size: 12px;}
.time_wasted_tbl table .first_column{width: 33px; max-width: 33px;}
.time_wasted_tbl table .second_column{width: 110px; max-width: 110px;}
.time_wasted_tbl table .third_column{width: 80px; max-width: 80px;}
.time_wasted_tbl table .fourth_column{width: 80px; max-width: 80px;}
.time_exceed_txt{font-size: 13px!important}

.callLogTblSec{overflow: auto; } 
.call_log_table{min-width: 1200px;}
.call_log_table.fixed_header_table{ position: sticky; }
.call_log_table thead tr th{font-size: 12px;}
.call_log_table .caller_column_2x{min-width: 110px;}
.caller_number_2x{font-size: 12px;}
.call_log_table .duration_column span font{font-size: 11px;}
.call_log_table .duration_column span{font-size: 12px!important; text-align: left;}

.call_log_table tbody .custmor_action_ss{top: -3px; left: 108px; width: 50px;}
.custmor_action_ss .btn-link{width: 15px; height: 15px; line-height: 15px; font-size: 9px;}
.call_tag_info_bx{margin-left: 0px;}
.did_number_2x font{font-size: 11px!important}
.call_status{padding: 1px 3px; line-height: normal; font-size: 10px;}
.frst_agnt_name{max-width: 70px;}
.frst_agnt_name font{display: block;}

.p_0_1024{padding: 0px;} 
.search_btn{font-size: 11px; padding: 5px;}
.pdng_4px{padding: 5px!important;}
.reset_filter_Btn {font-size: 11px!important}

.agentLogSection{overflow: auto;}
.agent_log_tbl.fixed_header_table{ position: sticky; } 

}



@media only screen and (min-device-width: 320px) and (max-device-width: 1023px) { 

.container{max-width: 100%;}

.did_list_tbl thead tr th:nth-child(3), .did_list_tbl thead tr td:nth-child(3){height: 67px;}
.did_list_tbl thead tr th:nth-child(4), .did_list_tbl thead tr td:nth-child(4){height: 60px;}
.did_list_tbl thead tr th:nth-child(5), .did_list_tbl thead tr td:nth-child(5){height: 60px;}
.did_list_tbl thead tr th:nth-child(6), .did_list_tbl thead tr td:nth-child(6){height: 81px;}
.did_list_tbl thead tr th:nth-child(7), .did_list_tbl thead tr td:nth-child(7){height: 46px;}

.campaign_list_table.fixed_header_table{display: none;  }
.campaign_list_table tr td{border-bottom-width: 0px!important; padding: 8px!important; text-align: center; } 
.campaign_list_table tr th{border-bottom-width: 1px!important; font-size: 13px!important}
.campaign_list_table tr td.campaign_time_setting, .campaign_list_table tr td.campaign_detail{width: auto;}
.campaign_list_table tr td.campaign_report_column{max-width: 290px;}
.campaign_list_table tr td .report_data_campaign .row .col, .campaign_list_table tr td .report_data_campaign .row .col-5{padding-left: 7px; padding-right: 7px;}
.campaign_list_table tr td .report_data_campaign span{font-size: 11px;}
.campaign_list_table tr td .report_data_campaign span.f_size_15{font-size: 11px!important;}
.campaign_list_table tr td.campaign_detail .campagin_extra_info{margin-top: 5px;}
.campaign_list_table tr td .working_days_campaign{margin-top: 10px;}
.campaign_list_table tr th:nth-child(5), .campaign_list_table tr td:nth-child(5){ display: none!important; }
.campaign_list_table tr th:nth-child(1), .campaign_list_table tr td:nth-child(1){height: 92px;}
.campaign_list_table tr th:nth-child(2), .campaign_list_table tr td:nth-child(2){height: 34px;}
.campaign_list_table tr th:nth-child(3), .campaign_list_table tr td:nth-child(3){height: 116px;}
.campaign_list_table tr th:nth-child(4), .campaign_list_table tr td:nth-child(4){height: 88px;}
.campaign_list_table tr th:nth-child(6), .campaign_list_table tr td:nth-child(6){height: 85px;}

.campaign_list_table tr:nth-child(odd) td { background: #3234358c ;}
.campaign_list_table tr:nth-child(even) td { background:  #ffffff12;}

.campaign_list_table tr td.action_column_cmpn_list .d-block.text-left{display: inline-block!important; vertical-align: top;}
.campaign_list_table tr td.action_column_cmpn_list .ttl_conacts_dtl{display: inline-block;}
.campaign_list_table tr td.action_column_cmpn_list .campign_running_action{text-align: center;}

.contact_list_tbl tr td.contact_list_name_field{max-width: 180px;}
.contact_list_tbl tr td.contact_list_name_field .d-inline-block.w-100.ml-5{margin-left: 0px!important}
.r_information_sticky_block{width: 100%; flex-basis: inherit; max-width: inherit; margin-top: 20px;}
.pdng_rght_15_rsp{padding-right: 15px!important}

.create-c-list-step{ max-width: 215px; }
.create-c-list-step ul li{font-size: 15px;}
.rightside_extrainfo_Section{display: none;}

.create_docket_rule .crt_dct_frmgrp{width: 100%; max-width: 100%; flex: 0 0 100%; margin-bottom: 0px;}
.title-op{font-size: 13px;}

.permission_menu{max-width: 230px;}
.permission_table td{font-size: 13px;}


.sarv_header .navbar-toggler[aria-expanded="true"] span.fa-bars:before{content: "\f00d"; font-size: 22px;}
.navbar-collapse { position: fixed; top: 47px;  left: 0; padding-left: 15px; padding-right: 15px;    padding-bottom: 15px;
        width: 300px; height: calc(100% - 47px);   background: #27292b; box-shadow: 5px 0 7px -5px #00000070; overflow-y: auto; overflow-x: hidden;}
.navbar-collapse.collapsing {left: -75%; transition: height 0s ease; }
.navbar-collapse.show { left: 0;  transition: left 300ms ease-in-out; }
.navbar-toggler.collapsed ~ .navbar-collapse {transition: left 500ms ease-in-out; }
.sarv_menupart{margin-left: 0px; margin-top: 100px;}
.sarv_menupart .dropdown-toggle::after{position: absolute; right: 0px; opacity: 1!important}
.sarv_menu_drop {min-width: 100%!important; box-shadow: none; border: none; padding: 0px!important; background: none; margin-top: 0px; margin-bottom: 15px;}
.sarv_menu_drop .row .col-6{border-right: 0px!important; flex: 0 0 100%; max-width: 100%;}
.sarv_menu_drop:after{display: none;} 
.sarv_menu_drop .dropdown-item{font-size: 13px; color: #ccc; padding-left: 33px;}
.sarv_menu_drop .menu_subheading{padding-left: 24px; margin-top: 10px;}
.sarv_menupart li a i{margin-right: 10px;}
.sarv_menu_drop.group_menu ul li a{color: #ccc; font-size: 13px;}
.sarv_menu_drop.group_menu h3{margin-left: 33px;}
.sarv_menu_drop.group_menu ul li{margin-left: 24px;}
.sarv_header .form-inline{position: absolute; top:-10px; width: 300px; left: 0px; padding-left: 15px; padding-bottom: 10px; border-bottom: solid 1px #dddddd17  } 
.sarv_header .form-inline .header_drop_menu{margin-top: 0px;}
.all_service_menu{width: 100%;}
.all_service_menu .col-sm-4{padding-left: 7px; padding-right: 7px;}
.all_service_menu .service_link{font-size: 13px;}
.all_service_menu .service_link img{width: 22px!important;}
.all_services_link{display: none;}

.LiveCallDropdwon{background: #323232; width: 260px; box-shadow: 0px 12px 22px -12px black; padding: 20px 0px!important; }

.obd_create_form_sec{width: 100%;}
.tab_step ul li{padding: 5px 13px;}

}

 
.flpTable { display: -webkit-box;  display: flex;  overflow: hidden;  background: none;}
.flpTable thead {display: -webkit-box; display: flex; flex-shrink: 0; min-width: -webkit-min-content;  min-width: -moz-min-content;  
  min-width: min-content; border-right: solid 1px #2e2e2e;}
.flpTable tbody { display: -webkit-box; display: flex;  position: relative; overflow-x: auto; overflow-y: hidden;}
.flpTable tr { display: -webkit-box;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal; flex-direction: column;
  min-width: -webkit-min-content;  min-width: -moz-min-content;  min-width: min-content; flex-shrink: 0;}
.flpTable td, .flpTable th { display: block; width: auto;}
.flpTable td { background-image: none !important;  border-left: 0; border-right: solid 1px #2e2e2e!important}
.flpTable th:not(:last-child), .flpTable td:not(:last-child) { border-bottom: 0;}

.switch-field { display: flex;  overflow: hidden;}
.switch-field input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden;}
.switch-field label { background-color: #484646; color: #cdcdcd; font-size: 13px;  line-height: 1;  text-align: center;  padding: 3.5px 10px; 
  /*border: 1px solid rgba(0, 0, 0, 0.2);*/  /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);*/
  transition: all 0.1s ease-in-out; font-weight: 400; min-width: 50px;}
.switch-field label:hover { cursor: pointer;}
.switch-field input:checked + label {  background-color: #5c983b;  box-shadow: none; color: #fff;}
.switch-field input:first-of-type:checked + label{background: #3b6898;}
.switch-field label:first-of-type {  border-radius: 20px 0 0 20px;}
.switch-field label:last-of-type { border-radius: 0 20px 20px 0;}


.agent_type_db_filtr{font-size: 12px; background-color: #484646;   padding-top: 2px;   padding-bottom: 2px;   height: 22px;   color: #cdcdcd;   border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-down' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
 background-size: 10px; width: auto; cursor: pointer;} 
.agent_type_db_filtr:focus{box-shadow: none; outline: none; background-color: #484646; color: #cdcdcd; border-color: transparent;}
.agent_type_db_filtr option{padding: 5px;}

 

.agent_limit{font-size: 13px; margin-left: 15px; color: #cdcdcd; vertical-align: middle;}

/*update dashboard design*/

.dashabordWidgetSection{background: #242628; padding: 10px; border-radius: 6px; }
.db_three_col_view{ max-height: 395px; min-height: 395px;}
  .dashabordWidgetSection h2{display: inline-block; font-family: Comfortaa; color: #ffffffd6; font-size: 16px; padding: 5px 0px 5px 5px;}
  .db_calltype_counter .col{text-align: center; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 16px;}
  .db_calltype_counter span{ display: block; font-size: 17px; color: #fff; font-weight: 100;  }
  .db_calltype_counter .typeRunningCall{display: inline-block; font-size: 12px; vertical-align: middle; font-style: normal; color: #2b942e;   }
  .db_calltype_counter .typeRunningCall i{margin-right: 5px;}
  .db_calltype_counter font{display: block; color: #ffffff94; font-size: 13px;}
  .db_calltype_counter span.ibd_label{ color: #6e9ec7 }
  .db_calltype_counter span.obd_label{color: #6e9ec7}
  .db_calltype_counter span.qc_label{color: #6e9ec7}
  .db_calltype_counter span.pc_label{color:#6e9ec7 }

   
  .db_camapgin_dtl_tbl{  max-height: 338px; overflow: auto; position: relative; margin-left: -10px; margin-right: -10px;}
  .db_camapgin_dtl_tbl table { table-layout: auto; } 
  .db_camapgin_dtl_tbl table tr th{color: #a88041; font-weight: 500; font-size: 11px; border-top: none;  
  padding: 5px 4px; vertical-align: middle; position: sticky;  top: 0;  background: #202223; z-index: 1; border-bottom: 0px; box-shadow:0 1px 0px 0px #333;}
  .db_camapgin_dtl_tbl table tr th:first-child{padding-left: 15px;}
  .db_camapgin_dtl_tbl table tr td:first-child{padding-left: 15px;}
  .db_camapgin_dtl_tbl table tr td{color: #ffffff8c; border-bottom:solid 1px #131517ad; padding: 8px 4px; position: relative; font-size: 12px;}
  .db_camapgin_dtl_tbl table tr:hover td{background: #ffffff0a;} 

  .db_camapgin_dtl_tbl table tr td.campaignTitle font{color: #d5ae3b; min-width: 30px; display: inline-block; margin-right: 3px;}
  .db_camapgin_dtl_tbl table tr td.campaignTitle a{color: #cdcdcd;}
  .db_camapgin_dtl_tbl table tr td.campaignTitle a:hover{color: #fff}

  .db_camapgin_dtl_tbl table tr td .call_status{padding: 0px; border:none;}
  .tbl_call_status tr td{padding-top: 5.3px!important; padding-bottom: 5.3px!important}
 .tbl_call_status tr td a.status_link{background: #00000014; padding:3px 5px; border-radius: 4px; color: #cdcdcd; line-height: 7px;}
  .db_camapgin_dtl_tbl table tr.norecordMsg td{border: 0px; padding-left: 4px;}
  .db_camapgin_dtl_tbl table tr.norecordMsg:hover td{background: none;}
  .db_camapgin_dtl_tbl table tr.norecordMsg td span{ display: block; width: 100%; text-align: center; padding: 10px; }

 .dashabordWidgetSection .apexcharts-yaxis-label{fill:#999!important; font-size: 10px!important; font-family: Roboto!important; font-weight:400!important;}
.dashabordWidgetSection  .apexcharts-xaxis-label{fill: #777!important; font-size: 12px!important; font-family: Roboto!important  }

.did_cstm_bar_chart{display: inline-block; width: 100%;}
.did_cstm_bar_chart table tr td{border:none; vertical-align: middle;}
.did_cstm_bar_chart table tr td.did_numbr_clmn{border-right: solid 1px #dddddd17; font-size: 14px; color: #cdcdcd; vertical-align: middle; width: 50px;}

 
.did_cstm_bar_chart .progress{border-radius: 0px; background: #2a2c2d; margin-right: 35px; position: relative; overflow: visible;}
.did_cstm_bar_chart .progress .progress-bar{}
.did_cstm_bar_chart .progress .progress-bar.BarQueue{background: #9f6c2d }
.did_cstm_bar_chart .progress .progress-bar.BarCall{background: #17a2b8 }
.did_cstm_bar_chart .progress .progress-bar.BartotalCall{background: #297347 }
.did_cstm_bar_chart .chrtcounterView{  background: #00000014; margin-left: 5px;  padding: 5px; line-height: 7px; border-radius: 4px; color: #cdcdcd;
position: absolute; right:-40px;}
.did_cstm_bar_chart .chrtcounterView.queue_Cntr{ color: #9f6c2d }
.did_cstm_bar_chart .chrtcounterView.call_Cntr{color: #17a2b8}
.did_cstm_bar_chart .chrtcounterView.total_call_Cntr{color: #297347}
.db_didchart_indctr{display: inline-block; float: right; margin-top: 15px;}
.db_didchart_indctr span{color: #818284; font-size: 12px;}
.db_didchart_indctr span i{font-size: 9px;}
.db_didchart_indctr span i.totalCallClr{color:#297347}
.db_didchart_indctr span i.liveCallClr{color:#17a2b8}
.db_didchart_indctr span i.queueClr{color: #9f6c2d}

.db_queue_list{min-height: 555px; border-radius: 6px;}
.db_agent_list{min-height: 600px; border-radius: 6px;}

.top_count_detail{margin-top: -7px;}

.roundedRadio{border-radius: 20px!important; cursor: auto!important;} 
/*update dashboard design*/ 
@supports (-ms-ime-align:auto) {
.sl_form_block .s_form_grp .input_block{background: rgba(255,255,255,0.14);}
.dashabordWidgetSection h2, .kanban_header h2, .db_Section_bg h2{ color: rgba(227, 227, 227, 1) }
.live_call_table table tr td{border-bottom: rgba(19, 21, 23, 0.68) solid 1px}
.db_camapgin_dtl_tbl table tr td{border-bottom: rgba(19, 21, 23, 0.68) solid 1px}
.top_count_detail .text_milky, .text_milky{color: rgba(256,256,256,.7)}
.custom_date_picker{background: rgba(255,255,255,0.08);}
.db_agent_table table tr th{border-top: rgba(255,255,255,0.2) solid 1px;}

.agent_summary_head span{color: rgba(255,255,255,0.66);}
.db_agent_table table tr td{color: rgba(255,255,255,0.72);  border-color: rgba(19,21,23,0.68);}
.db_agent_table table tr td.agent_login_db .login_type{color: rgba(255,255,255,0.72);}

.comman_table tbody tr td{border-color: rgba(256,256,256,.05); color: rgba(256,256,256,.8);}
.comman_table thead tr th{border-top: rgba(255,255,255,0.04);}

.basic-btn{background:rgba(255,255,255,0.08); }
.search_btn{background: rgba(41,35,12,1); color: rgba(228,154,58,0.59);}

.db_agent_list, .db_queue_list{background: rgba(50,52,53,0.55);} 
.queue_table table tr td{color: }

.custom-form .form-group .form-control{border:solid 1px rgba(221,221,221,0.11); background: rgba(229,229,229,0.04);}
.agnt_dtl_bg{background: rgba(163,164,165,0.15);}
.wrkng_days li label{background: rgba(242,242,242,0.24); border-color:rgba(238,238,238,0.26);}

.agent_multiselect .select2-container--default .select2-selection--multiple{border:solid 1px rgba(221,221,221,0.11)!important;  
  background: #ffffff!important}

.select2-container--default .select2-selection--multiple .select2-selection__choice{background: rgba(10,9,9,0.37);}
.agent_column_list a{background: rgba(238,95,25, .59); color: rgba(256,256,256,.8);}

.send_sms_content .form-group label{color:rgba(255,255,255,0.64);}
.field_dropdown .dropdown-item{color: rgba(255,255,255,.8);}

.page_data_select{background: rgba(18,17,17,0.27); border-color: rgba(172,162,162,0.2);}
.custom-pagination .page-link{background: rgba(255,255,255,0.08);}
.search_model .form-control{background: rgba(255,255,255,0.1); border-color: rgba(203,203,203,0.26);}
.search_model .modal-header button.close{color: rgba(205,205,205,0.36);}
.agent_Select_filter_btn{background: rgba(0,77,64,0.17);}
.btn-custom-blue{background: rgba(25,118,210,0.16); border:solid 1px rgba(25,118,210,0.40);}
.general_report_page table tr th{border-top: solid 1px rgba(255,255,255,.1)}
.general_report_page table tr td{border-color:rgba(0,0,0,0.3); color: rgba(255,255,255,0.55);}

} 

.notification_List{list-style: none; margin: 0px; padding: 0px; max-height: 550px; overflow: auto;}
.notification_List li{display: inline-block; width: 100%; position: relative;  padding: 10px; padding-top: 0px;}
.notification_List li .n_alert_detail{display: inline-block; width: 100%; margin-bottom: 15px; padding: 7px 10px; 
  background: #fff8dc0f; border-radius: 5px;}
.notification_List li .n_alert_detail:last-child{margin-bottom: 0px;}

.notification_List li .n_alert_detail .alertName{font-size: 17px; color: #cdcdcd; display: block; padding-left: 25px; position: relative;}
.notification_List li .n_alert_detail .alertName i{margin-right: 5px; font-size: 12px; position: absolute; left: 2px; top: 7px;}
.notification_List li .n_alert_detail .alertTime{font-size: 13px; padding-top: 2px; display: inline-block; width: 100%; color: #818284;
padding-left: 18px;}
.notification_List li .n_alert_detail .alertTime font.text-info{font-size: 10px;}

.notificationdetail{padding-left: 27px; padding-top: 5px; padding-bottom: 3px;}
.notification_List li .btn-secondary{background: #4c4c4c; border-color: #4c4c4c}

.notification_ivr_hdng{ display: block; width: 100%; }
.notification_ivr_hdng .ivrName{ font-size: 13px; color: #cdcdcd ; margin-left: 8px; vertical-align: middle; }
.notificationSection ul{max-height: inherit; min-height: 350px;}

.add_contact_field ul{list-style: none; margin: 0px; padding: 0px;}
.add_contact_field ul li{display: inline-block; width: 100%; margin-bottom: 13px;}
.add_contact_field ul li label{font-size: 13px; color: #cdcdcd; margin-bottom: 5px;}
.add_contact_field ul li .form-control{background: #202121; border-color: #2c2e2f; font-size: 13px; color: #9e9e9d; border-radius: 0px; box-shadow: none;}

.auto_Scroll_vrtcl{overflow-x: auto; width: 100%;}
.contct_listscorng{border-bottom: 1px solid #414141; flex-wrap: nowrap; white-space: nowrap;}
.contct_listscorng .nav-item .nav-link{color: #cdcdcd;}
.contct_listscorng .nav-item .nav-link:hover, .contct_listscorng .nav-item .nav-link:focus{border-color:#414141 }
.contct_listscorng .nav-item .nav-link.active{background: rgba(256,256,256,.05); border-color: #414141}
.duplicate_data_tble{margin-top: 10px; margin-bottom: 15px;}
.duplicate_data_tble .table tr th {  color: #cdcdcd;  font-size: 13px;  font-weight: normal;  border-color: #dee2e61c;  padding-top: 5px;
  padding-bottom: 5px;  background: #1110101f;}
.duplicate_data_tble .table tr td{color: #cdcdcd; border-color: #dee2e608; vertical-align: middle;  background: none;}

/*css for map contact list*/
.map_contct_list_tbl tr td{ vertical-align: top!important; border-bottom: 4px solid #dee2e6; border-top: none; }
.map_contct_list_tbl tr th{border-top: none!important;}
.contact_list_tbl2{width: 100%}
.contact_list_tbl2 tr td{border:none;}
.contact_list_tbl2 tr:hover{background: none!important}

.primary_indi569{width: 150px; max-width: 150px;}

.map_contct_tab{border-bottom: solid 1px rgba(256,256,256,.1)}
.map_contct_tab .nav-item .nav-link {  cursor: pointer;  background:transparent;font-size: 14px;color: rgba(256,256,256,.5) ;
margin-right: 5px; border-color: #252628  #252628  transparent;}
.map_contct_tab .nav-item .nav-link.active {background:  #202223; border-color: #252628  #252628  transparent; color: #fff;font-weight: 400; color: #fff!important;}

.map_contct_tab .nav-item .nav-link:hover, .map_contct_tab .nav-item .nav-link:focus{border-color: #252628  #252628  transparent;}

.cmpign_name_field{width: 300px; max-width: 300px;}
.campagin_name{color: #598896}
.contctlst_name{color: #b3b0b0; display: inline-block; min-width: 200px;}

.container_info_bx{ display: inline-block; width: 100%; background: #45bbce2e; padding: 15px 15px 15px 40px; border-radius: 4px; margin-top: 15px;
 margin-bottom: 10px; color: rgba(256,256,256,.5); font-size: 14px; position: relative;}
.container_info_bx .info__indi{ position: absolute; left: 14px; top: 13px; font-size: 18px; }

.add_cntct_btn{display: inline-block; width: 20px; height: 20px; background: #7c797936; border: solid 1px #7c797936; color: #8a8686; border-radius: 4px; font-size: 13px; 
  font-size: 12px; text-align: center;}
.cntct_map_informtn_sec{background: #212629}
 /*css for map contact list*/

  
 .pending_call_icon,  .quick_call_icon, .flash_call_icon{position: relative; } 
 .pending_call_icon:before,  .quick_call_icon:before, .flash_call_icon:before{transform: rotate(42deg);}
 .pending_call_icon:after{ content: "\f017"; position: absolute; right: -8px; top: -6px; font-size: 10px; 
 font-family: "Font Awesome 5 Free"; font-style: normal;   font-weight: 400;}
  /*.pending_call_icon:after{ content: "\f3ff"; position: absolute; right: -8px; top: -6px; font-size: 10px; 
 font-family: "bootstrap-icons"; font-style: normal;   }*/
  .quick_call_icon:after{ content: "QC"; position: absolute; right: -12px; top: -6px; font-size: 10px; 
 font-style: normal;  font-family: arial }
  .flash_call_icon:after{ content: "\f0e7"; position: absolute; right: -4px; top: -6px; font-size: 10px; 
 font-family: "Font Awesome 5 Free"; font-style: normal;   font-weight: 900;}

.flash_call_icon.f_size_10:after{font-size: 8px;}
.pending_call_icon.f_size_10:after{font-size: 8px; right: -7px; top: -4px;}


/*css for quick call modal*/
.qc_cstmfld_lst{max-height:300px; overflow:auto;}
.qc_cstmfld_lst .form-group{display: flex;}
.qc_cstmfld_lst .form-group .radio-inline{margin-right: 5px;}
 
/*css for quick call modal*/
 

/*css for call forward on number*/
.call_frwrd_number{margin-top: 50px; margin-left: 0px; margin-right: 0px;}
.call_frwrd_number .forwardNumber{padding: 6px 10px; font-size: 12px; border-radius: 20px; margin-top: 40px; }
.call_frwrd_number label{font-size: 18px; color: #cdcdcd;}
.call_frwrd_number .form-control{background: #8e88594d; border: 0px; color: #fff;}
.call_frwrd_number .error_msg_l{display: block; color: #b74f4f; font-size: 14px; margin-top: 5px;}

/*css for ctvc module*/
.videocallincomingscreen{display: block; width: 100%;}
.user_ico_ctvc{ display: block; font-size: 62px; color: #EA9108; text-align: center; padding-top: 20px; }
.text_ctvc_hdng{font-family: Comfortaa; font-size: 15px; color: #fff; text-align: center;}
.text_ctvc_hdng span{color:#EA9108; font-size: 18px; }
.ctvc_actn_btn{ text-align: center; margin-top: 25px; position: relative;   }
.ctvc_actn_btn .btn{border-radius: 20px; font-size: 15px; padding: 5px 15px;}
.ctvc_actn_btn .btn i{margin-right: 2px;}

.ctvc_video_modal .modal-dialog{ max-width: 95%; }
.ctvc_video_modal .modal-content{ min-height: 90vh; background: #1E202D }


.ctcvcallingIcon .delay1 {
  -webkit-animation: waves 2.5s linear infinite;
          animation: waves 2.5s linear infinite;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.ctcvcallingIcon .delay2 {
  -webkit-animation: waves 2.5s linear 0.7s infinite;
          animation: waves 2.5s linear 0.7s infinite;
}
.ctcvcallingIcon .delay3 {
  -webkit-animation: waves 2.5s linear 1.3s infinite;
          animation: waves 2.5s linear 1.3s infinite;
}
.ctcvcallingIcon .delay4 {
  -webkit-animation: waves 2.5s linear 1.9s infinite;
          animation: waves 2.5s linear 1.9s infinite;
}

.ctcvcallingIcon .svg-box { position: absolute;  z-index: 10;  font-size: 20px; color: #fff; left: 0px; right: 0px; top: 58px; margin: 0 auto;} 
.ctcvcallingIcon{text-align: center; padding-top: 20px; position: relative; height: 132px;}
.ctcvcallingIcon .circle{display: block;  height: 35px;  width: 35px; border-radius: 50%; background: #776349; transition: 5s ease; position: absolute; top: 50px; left: 0px; right: 0px; margin: 0 auto;}

@-webkit-keyframes waves {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
 


 .button555 { display: block; background-color: #28a745; width: 120px; height: 35px; line-height:35px; margin: auto; color: #fff; position: relative; display: inline-block; cursor: pointer;
  overflow: hidden;  border-radius: 20px;  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4); border: 0px; vertical-align: top;}

.button555.declineBtn{background: #dc3545}

.button555:disabled{opacity: .5; cursor: no-drop; color:#fff }
.button555:disabled:hover, .button555:disabled:focus{opacity: .5;}

.button555:hover, .button555:focus, .button555:active{outline: none; border: none; box-shadow: none}

.button555 span,
.button555 .icon {
  display: block;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0;
}
.button555 span {
  width: 72%;
  line-height: inherit;
  font-size: 15px; 
  left: 0;
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.button555 span:after {
  content: "";
  background-color: rgba(256,256,256,.2);
  width: 1px;
  height: 70%;
  position: absolute;
  top: 15%;
  right: -1px;
}
.button555 .icon {
  width: 28%;
  right: 0; top: 8px;
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.button555 .icon i {
  font-size: 20px;
  vertical-align: sub; line-height: normal;
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
}
 
.button555.success span, .button555:hover span {
  left: -72%;
  opacity: 0;
}
.button555.success .icon, .button555:hover .icon {
  width: 100%; line-height: normal; top: 1px;
}
.button555.success .icon .fa, .button555:hover .icon i {
  font-size: 35px; color: #fff;
}
 
.button555:hover {
  opacity: 0.9;
}
 
.button555:active {
  opacity: 1;
}

.videocallincomingscreen{overflow: hidden; position: relative; min-height: 300px; z-index: 2}

.expanded_div{ top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: -99  }
.expanded_div .live_ctvc_detail{ color: #fff;  z-index: 99; opacity: 0;   text-align: center;   padding: 20px;  }

.expanded_div:after{position: absolute; width: 0px; height: 0px; background: #28a745; transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
transform: translate(-50%, -50%); border-radius: 50%; content: "";}  
.expanded_div.openDiv{z-index: 999}
.expanded_div.openDiv:after{ width: 280%;  height:280%;  } 
.expanded_div.openDiv .live_ctvc_detail{display: block; position: relative; opacity: 1; transition: 1s; transition-delay: 0.5s;}

.expanded_div .live_ctvc_detail .Btn-sec-expnd {margin-top: 12px; display: inline-block;   background: #35c66d; padding: 10px 14px; border-radius: 30px; box-shadow: 0px 0px 4px #0908084f}
.expanded_div .live_ctvc_detail .Btn-sec-expnd .btn{border-radius: 20px; padding: 5px 18px;}
.expanded_div .live_ctvc_detail .ico_section3{font-size: 40px; margin-bottom: 10px; margin-top: 10px;}
.expanded_div .live_ctvc_detail .tag_line_L{font-family: Comfortaa; font-size: 15px;}
/*css for ctvc module*/

/*internal call feature (agent to agent call)*/
.offcanvasAgent{position: fixed; top: 45px; right: -320px; width: 320px; height: 100%; background: #2f5946; box-shadow: 0px 0px 10px #000; transition: all .4s; z-index: 2;}
.offcanvasAgent.show{right: 0px;}
.offcanvasAgent h2{color: #cdcdcd; font-size: 16px; padding: 10px; font-weight: 400; font-family: Comfortaa;   }
.offcanvasAgent h2 i.bi-headphones{line-height: normal; vertical-align: top; margin-right: 4px; color: #d5ae3b;}
.closeCanvas{ float: right; background: none; border: none; outline: none; color: #5e8e79 }
.closeCanvas:hover{color: #b9b9b9}
.backdropPageContant{   transition: all .2s; opacity: .5}
.backdropPageContant:after{position: absolute; left: 0px; top: -13px; width: 100%; height: calc(100% + 13px); content: ""; background: #00000045; z-index: 1;}



.search_Box{display: block; width: 100%; background: #34664f; border-radius: 20px; padding: 7px 15px;}
.search_Box .inputbx{ background: transparent; border: none; width: 80%; font-size: 16px; color: #fff; }
.search_Box .inputbx:focus{outline: none; box-shadow: none; border: none;}
.searchBtn{ display: inline-block; float: right; background: transparent; border: 0px; outline: none; font-size: 16px; line-height: normal; padding: 0px; color: #ffffff6b; margin-top: 4px; }
.search_Box .inputbx::placeholder,
.search_Box .inputbx::-webkit-input-placeholder{color: #4c9572; }

.agent_searchSec{ display: block; width: 100%; padding-left: 15px; padding-right: 15px; }

.cnt_agentList_sec{display: block; width: 100%; height: calc(100vh - 150px); overflow: auto; position: relative;}
.cnt_agentList_sec h3{font-size: 13px; color: #f2b644; margin-top: 15px; padding-left: 20px;}
.cnt_agentList_sec h3.all_agnt{ color: #95c0f7 }
.cnt_agentList_sec h3.all_group{ color: #fb9191 }

.cnt_AG_list { display: block; width: 100%; }
.cnt_AG_list ul{list-style: none; margin: 0px; padding: 0px;} 
.cnt_AG_list ul li {width: 100%;  float: none;  border-bottom: solid 1px transparent;  border-top: solid 1px transparent;  padding: 6px 5px 6px 25px;  color: #fbfafa7d;
font-size: 14px;  position: relative; cursor: pointer;}  
.cnt_AG_list ul li:hover { background: #2e5342;    }





.cnt_AG_list ul li .agentDtailco{display: inline-block; vertical-align: middle; width: 73%;}
.cnt_AG_list ul li .agentDtailco span.agentName {  display: block;  width: 100%;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  color: #bbb; text-transform: capitalize;}
.cnt_AG_list ul li .agentDtailco span.agentName u{text-decoration: none; font-size: 12px; min-width: 50px; display: inline-block; color: #bbb;}
.cnt_AG_list ul li .agentDtailco .cntctNumbr{display: block; padding-left: 52px;  }
.cnt_AG_list ul li .callaction{display: inline-block; vertical-align: middle; width: 25%; text-align: left;}
.cnt_AG_list ul li .callaction .talkbtn{background: #007bff; border: none; outline: none; color: #fff; padding: 0px; text-align: center; border-radius: 50%; width: 25px; height: 25px; font-size: 11px; opacity: 0;}

.fav_agent_list ul li .agentDtailco span.agentName{color: #fdfdfdd6}
.all_agntList ul li .agentDtailco span.agentName{color: #fdfdfdd6}
.all_groupList ul li .agentDtailco span.agentName{color: #fdfdfdd6}

.cnt_AG_list ul li:hover .agentDtailco span.agentName{color: #fff;}


.cnt_AG_list ul li:hover .talkbtn{opacity: 1}


.alpha_sorting_row{position: absolute; right: 20px; top: 100px; background: #00000054; border-radius: 20px; padding: 5px;}
.alpha_sorting_row ul{list-style: none; margin: 0px; padding: 0px; }
.alpha_sorting_row ul li{ text-align: center; padding-bottom: 0px; }
.alpha_sorting_row ul li a{ color: #394b6d; font-size: 10px; font-weight: 500}
.alpha_sorting_row ul li a:hover{color: #5d80be}

.addfav_sec{position: absolute; left: 5px; top: 8px; display: none}
.cnt_AG_list ul li:hover .addfav_sec{display: inline-block;}
.addfav_sec input{  opacity: 0; z-index: 1; position: absolute; cursor: pointer;}
.addfav_sec label{width: 10px; height: 10px;  color: #fff; font-size: 12px;   cursor: pointer;}
.addfav_sec label:before{content: "\f005"; font-family: 'Font Awesome 5 Free'; font-weight: 400; color: #999 }
.addfav_sec input:checked + label:before{font-weight: 900; color: #f2b644}


.AGsearch_option {top: 37px!important; padding: 0px !important; background: #2f5946;  width: 260px; left: 15px!important;  border-radius:  0px 0px 15px 15px;  box-shadow: 0px 3px 8px rgb(0,0,0,.4) !important;}
.AGsearchoList{list-style: none; margin: 0px; padding: 10px 0px;}
.AGsearchoList li { display: block; float: none;    padding: 5px 15px;  position: relative;}

.AGsearchoList li a { display: block;}
.AGsearchoList li .icon_tag { font-size: 15px;  color: #6c8861;  display: inline-block;  width: 25px; text-align: center;  vertical-align: top;}
.AGsearchoList li ._sindicator {  font-size: 15px;  display: inline-block;  width: 15px;  color: #ffffffb8;  vertical-align: top;}
.AGsearchoList li .result_in { margin-left: 5px; color: #ffffffb8; font-size: 15px; display: inline-block;  width: 118px; vertical-align: top;}
.AGsearchoList li:hover{background: #bbb3b31a;}
.AGsearchoList li:hover .result_in{color: #fff;}
.AGsearchoList li:hover .icon_tag{color: #d5b969}

.AGsearchoList li.active{background: #bbb3b31a;}
.AGsearchoList li.active .result_in{color: #fff;}
.AGsearchoList li.active .icon_tag{color: #d5b969}

.serach_radio{display: block;}
.serach_radio label{margin-bottom: 0px;}
.serach_radio input[type="radio"]{position: absolute; opacity: 0;}
.serach_radio input[type="radio"]:checked ~ label .result_in{ color: #fff}
.serach_radio input[type="radio"]:checked ~ label .icon_tag{ color: #d5b969}

.cntGroupdtlbx{ width: 320px; height: 100%; position: fixed; right: -320px; top: 45px; background: #2f5946; box-shadow: 0px 0px 10px #000; transition: all .4s}
.cntGroupdtlbx.show{right: 0px!important;}
.cntGroupdtlbx h2 {color: #eac66e; border-bottom: solid 1px #f9f4f41a; padding-top: 15px;}
.cntGroupdtlbx h2 .close_grouplist{background: none; border: none; outline: none; color: #aeaeae; margin-right: 10px; padding: 0px; font-size: 18px; vertical-align: middle}
.cntGroupdtlbx h2 font{font-size: 12px; color: #bbb; margin-right: 5px;}

.group_listshorter{top: 65px;}

.searchError{color: #ff8b95; background-color: #6b3e3a; border-color: #ac6b7291; padding: 0px 25px; font-size: 12px; width:100%; margin: 0px; border-radius: 0px; border-left: 0px; border-right: 0px; height: 0px; overflow: hidden; border: 0px; transition: all .2s;}
.searchError.show, .searchSuccess.show{height: 30px; transition: all .2s; line-height: 30px; margin-bottom: 10px;}

.searchSuccess{color: #cafdbb; background-color: #658c5770; border-color: #85ac6b45; padding: 0px 10px; font-size: 12px; width: 100%; margin: 0px; border-radius: 0px; border-left: 0px; border-right: 0px; height: 0px; overflow: hidden; border: 0px; transition: all .2s;}
.callconnectingMsg{position: absolute; display: none; flex-direction: column; width: 100%; height: 100%; background: #2f5946db; z-index: 2; align-items: center; justify-content: center; }
.callconnectingMsg span{font-size: 17px; color: #cdcdcd;}

.favLoader{  position: absolute;  left: 5px;  top: 7px;}
.favLoader .spinner-border{width: 12px; height: 12px; border-width: 2px;}


/*internal call feature (agent to agent call)*/


/*css for call disposition in call log*/

.CD_breadcrumbs { border: 1px solid #99999978;  border-radius: 0.3rem;  display: inline-flex;  overflow: hidden; margin-top: 4px;}

.breadcrumbs__item { background: #393636; color: #aaa5a5;  outline: none;  padding: 0.10em 0.40em 0.10em 0.85em;  position: relative; text-decoration: none; transition: background 0.2s linear; font-size: 12px;}

.breadcrumbs__item u { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: normal; vertical-align: middle;
  font-style: normal; text-decoration: none;}

.breadcrumbs__item:hover:after,.breadcrumbs__item:hover {  background: #393636;}
.breadcrumbs__item:focus:after,.breadcrumbs__item:focus,.breadcrumbs__item.is-active:focus {  background: #323f4a;  color: #fff;}
.breadcrumbs__item:after,.breadcrumbs__item:before {  background: #393636;  bottom: 0;  clip-path: polygon(50% 50%, -50% -50%, 0 100%);  content: "";  left: 100%;  position: absolute;
  top: 0;  transition: background 0.2s linear;  width: 1em;  z-index: 1;}
.breadcrumbs__item:before {  background: #99999978;  margin-left: 1px;}
.breadcrumbs__item:last-child {  border-right: none;}
.breadcrumbs__item.is-active { background: #393636;}

.ADcalldispositionsec{position: relative; display: block; margin-bottom: 15px;} 
.ADcalldispositionsec .lTitle{color: #d0b981; margin-bottom: 10px; display: block;  font-size: 14px;}

 .ADcalldispositionsec .select2-container{width: 100%!important;}

.ADcalldispositionsec .select2-container--default .select2-selection--single{ border-radius: 5px;  background-color: #484545;    border: none;  font-size: 14px; }
.ADcalldispositionsec .select2-container--default .select2-selection--single .select2-selection__rendered{color: #f9f0f0; font-size: 13px;}
.select2-container--default .select2-search--dropdown .select2-search__field{ background: #555;  border: 1px solid #686868; border-radius:4px; color: bisque; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus{box-shadow: none;}

.calldispositionBLock{position: absolute; background: #2d2f30; width: 90%;   top: 100%; border-radius: 0px 0px 5px 5px; padding: 0px 20px; border:solid 1px #463514 ; border-top: 0px; display: none;  z-index: 9;   }
.duration_column:hover .calldispositionBLock{ display: block; }
.calldispositionBLock label{color: #ae923f; margin-bottom: 0px; font-size: 10px; max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.callReportTbl table tr:hover td{border-bottom: 1px solid #463514;}

.addmoredispositionBtn{border: solid 1px #2e5466;  padding: 0px 10px;   border-radius: 4px; background: #17455b;   font-size: 11px; color: #ffffffc9;}
/*css for call disposition in call log*/



/*css for call disposition and hangup reason slide box on call analaysis page*/
 .closeDispositionrecord {font-size: 18px;cursor: pointer;  margin-right: 0px;background: #ffffff14 ;padding: 5px 10px;line-height: normal;  border-radius: 4px; position: absolute; right: 20px; top: 0px;}
.dispositionrecordTable tr th{position: sticky; top: 0px; z-index: 9; background: #332f2f!important;}
.dispositionrecordTable tr td:first-child, .dispositionrecordTable tr th:first-child{padding-left: 35px!important;}
.dispositionrecordTable tr td{ font-size: 13px; padding: 0px!important; border: none!important; position: relative;  }
.dispositionrecordTable tr td span{vertical-align: middle; padding: 8px; display: inline-block; font-size: 13px; font-weight: normal; position: relative; }
.dispositionrecordTable tr td.parent span,
.dispositionrecordTable tr td.ctgry span { min-width: 170px;  background: #898f9529; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.dispositionrecordTable tr td.ctgry span:empty{background: none;} 

.parent span{font-family: Comfortaa; color: #c1ad70; font-size: 16px;} 

.breaksubctrgry td span{text-indent: -999px;} 
.breaksubctrgry:hover td, .breakparent td{background: none!important;}

.totalVal{ position: absolute; left: 205px; top: 0px; background: #1066ba; padding:3px 10px; border-radius:0px 4px 4px 0px; font-size: 16px; opacity: 0; }
.ctgry .totalVal{left: 170px;}
.highlighted.totalVal{opacity: 1}


.dispo_H_tab{padding-left: 15px; border-bottom: 1px solid #464646;     }
.dispo_H_tab .nav-link{color: #bdbdbd !important; font-size: 13px; margin-right: 5px;}
.dispo_H_tab .nav-link.active{background: #3e3b3b; color: #f9f9f9!important; border-color: #464646 #464646 #fff0}  
.dispo_H_tab .nav-link:hover{border-color: #464646 #464646 #fff0}

.disposecRow36{background: #3e3b3b;padding-bottom: 8px;}

.topDtlDispo{list-style: none; margin: 0px; padding: 0px; margin-top: 5px; padding-bottom: 6px; border-bottom: solid 1px #444;}
.topDtlDispo li span.hDnG { display: block; color: #818284; padding-bottom: 5px; }
.topDtlDispo li .dateDtl{font-size: 13px; color: #cdcdcd;}
.topDtlDispo li .dtlDiv span{max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.dispoRecordSec { position: fixed; top: 47px;   right: -75%; width: 75%; height: calc(100vh - 47px);   color: #999; padding-bottom: 0px; padding-top: 10px;   background: #2E3034;   box-shadow: -5px 0 5px -3px #161515; transition: all .5s; -webkit-transition: all .5s;  -moz-transition: all .5s; z-index: 1}
.showDispo_rcrd{  right: 0px!important; z-index: 2 }
.dispoRecordSec h3{ font-size: 18px; font-weight: 400; margin-bottom: 20px; margin-top: 0px; padding-right: 8px ;}
.dispoRecordSec .tab-content{background: #3e3b3b; height: 100%;}

.dspRcrdtbleSc{ padding-bottom: 20px; background: #3e3b3b;}

.hangupresonBarchart{ display: inline-block; width: 100%; margin-bottom: 20px; margin-top: 20px; padding-left: 35px; padding-right: 15px}
.hangupresonBarchart ul{ list-style: none; margin: 0px; padding: 0px; }
.hangupresonBarchart ul li{display: inline-block; width: 100%; margin-bottom: 7px;}
.hangupresonBarchart ul li .xaxis_text{display: inline-block; vertical-align: top; color: #d8caca; font-size: 13px; width: 160px;}
.hangupresonBarchart ul li .chart_bar_row{ display: inline-block; width: calc(100% - 250px);  }
.hangupresonBarchart ul li .barValue{display: inline-block; width: 80px; position: absolute; right: -85px; top: -2px; color: #bfbfbf;}
.hangupresonBarchart ul li .barValue font{display: inline-block; background: #60606087; color: #a4a2a0; padding: 0px 4px; border-radius: 2px; margin-left: 5px;}

.hangupresonBarchart .progress{background: transparent; border-radius: 0px; cursor: pointer; overflow: visible; position: relative;  }
.hangupresonBarchart .progress-bar{background: #4a94e1; transition: all .5s; border-radius: 0px 2px 2px 0px; position: relative; width:100%; opacity: .8;  }
.hangupresonBarchart .progress-bar:hover{opacity: 1;}
.hangupresonBarchart .progress-bar.bg-danger{background: #e35c5c   !important;}

.hangupresonBarchart .progress-bar.bg-warning{background:#e8a45c !important;}

.dispoHangupRecordIframe{ height: calc(100vh - 75px); overflow: auto; background: #3e3b3b; }

  /*css for call disposition and hangup reason slide box on call analaysis page*/

  /*css for new filter toggle*/
.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;} 
/*css for new filter toggle*/

/*css for campaign play pause toggle button on agent dashboard*/
.playpause-switch {  cursor: pointer;  display: inline-block;  overflow: hidden;   position: relative;   text-align: left;  width: 65px;  height: 20px; -webkit-border-radius: 30px;    border-radius: 30px; line-height: 1.2;  font-size: 14px;}
.playpause-switch input.input-checkbox {position: absolute;   left: 0; top: 0;  width: 65px;  height: 20px;  padding: 0;  margin: 0; opacity: 0;  z-index: 2;  cursor: pointer;}
.playpause-switch .checkbox-animate { position: relative; width: 65px;  height: 20px; background-color: #9f4d4d; -webkit-transition: background 0.25s ease-out 0s;  transition: background 0.25s ease-out 0s;}
.playpause-switch .checkbox-animate:before { content: "";  display: block;  position: absolute;  width: 14px;  height: 14px;  border-radius: 10px;  -webkit-border-radius: 10px;  background-color: #e56666; top: 3px;  left: 4px;  -webkit-transition: left 0.3s ease-out 0s; transition: left 0.3s ease-out 0s;  z-index: 0;}
.playpause-switch input.input-checkbox:checked + .checkbox-animate { background-color: #28a74594;}
.playpause-switch input.input-checkbox:checked + .checkbox-animate:before { left: 47px; background-color: #28a745;}
.playpause-switch .checkbox-off,
.playpause-switch .checkbox-on {  float: left; color: #ffffffad; padding-top:4px;-webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;  font-size: 11px;}
.playpause-switch .checkbox-off { margin-left: 20px; opacity: 1;}
.playpause-switch .checkbox-on { display: none; float: right; margin-right: 19px; opacity: 0;}
.playpause-switch input.input-checkbox:checked + .checkbox-animate .checkbox-off {display: none;  opacity: 0;}
.playpause-switch input.input-checkbox:checked + .checkbox-animate .checkbox-on { display: block;  opacity: 1;}
/*css for campaign play pause toggle button on agent dashboard*/

 

.numberSelectBtn{letter-spacing: normal; font-size: 13px; text-align: center;  background: #25282a;  border: solid 1px #25282a ;  color: #cdcdcd;  padding: 5px 10px;  border-radius: 4px;  cursor: pointer;}
.numberSelectBtn:hover, .numberSelectBtn:focus{background: #25282a;  border: solid 1px #25282a ;}

.numberSelct_option { background: #333;  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);  margin-top: 8px; padding-bottom: 10px; right:0px!important; 
  width: 100%; min-width: 200px; position: relative; }
.numberSelct_option::after {  width: 0;  height: 0;  border-left: 8px solid transparent;  border-right: 8px solid transparent;  border-bottom: 8px solid #333;  position: absolute;  top: -8px;
right:50px;  content: "";}
.numberSelct_option .agent_list_32 ul{max-height: 350px; min-height: 200px; overflow: auto;}
.numberSelct_option .agent_list_32 li .custom-control label font{max-width: 142px; min-width: 142px; display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 4px; color: #cdcdcd; font-size: 13px; background: #55513d; border-radius: 4px; padding-left: 7px; margin: 0px 5px;}

.numberSelct_option .serach_bx_sec { display: inline-block;  width: 100%;  padding: 10px;}
.numberSelct_option .serach_bx_sec .serach_bx_inner {  width: 100%;  background-color: #ffffff21;  padding: 4px 10px 6px;  border-radius: 4px;  color: #cdcdcd;}
.numberSelct_option .serach_bx_sec .serach_bx_inner i {  vertical-align: middle;  font-size: 12px;}
.numberSelct_option .serach_bx_sec .serach_bx_inner input { background: transparent; border: 0px; width: 80%; color: #cdcdcd;  font-size: 13px;  vertical-align: middle;}
.numberSelct_option .serach_bx_sec .serach_bx_inner input:hover,.customLevl_option .serach_bx_sec .serach_bx_inner input:focus{box-shadow: none; outline: none; }
 

.numberSelct_option .agent_list_32 li .custom-control label{color: #666}
.numberSelct_option .agent_list_32 li .custom-control{margin-bottom: 0px!important; margin-right: 0px!important}
.numberSelct_option   .custom-control-label:before{background: #ffffff4f}
.numberSelct_option .apply_btn_sec {  display: inline-block;  width: 100%;  padding: 15px 5px 5px 5px;  text-align: center;  border-top: solid 1px #ffffff17;  margin-top: 10px;}
.numberSelct_option .apply_btn_sec .apply_btn { padding: 5px 30px;  border-radius: 20px;  border: none;  font-size: 14px;  background: #ea91089e;  color: #ffffffe8;}