/*@import "themeColor.css";*/ body { background-color: var(--body-bg-color); color: var(--body-text-color); transition: background-color 0.3s ease, color 0.3s ease; font-family: Inter,sans-serif !important; overflow-x:hidden; font-size: 12px; } .noFocus:focus, .noFocus:hover {box-shadow: none} a:hover, a:focus, .btn-link:hover{text-decoration: none; color: inherit;} .btn:disabled{cursor: not-allowed} .btn-sm{padding: 7px 12px; line-height: normal; font-size: 13px;} .btn-mid{padding: 5px 8px; line-height: normal; font-size: 13px;} .lhNormal{line-height: normal;} .themeImg {display: none;} [data-theme="light"] .themeImg.ImgForLight {display: inline-block;} [data-theme="dark"] .themeImg.ImgForDark { display: inline-block;} .alert{padding: .50rem 1rem; font-size: 15px;} .alert-sm{padding:5px 10px ; font-size: 13px;} .alert-success{background: var(--AlertsuccessBg); color: var(--AlertsuccessText); border-color: var(--Alertsuccess-border);} .alert-danger{background: var(--AlertdangerBg); color: var(--AlertdangerText); border-color: var(--Alertdanger-border);} .alert-warning{background: var(--AlertwarningBg); color: var(--AlertwarningText); border-color: var(--Alertwarning-border);} .alert-info{background: var(--AlertinfoBg); color: var(--AlertinfoText); border-color: var(--Alertinfo-border);} .alert-primary{background: var(--AlertprimaryBg); color: var(--AlertprimaryText); border-color: var(--Alertprimary-border);} .alert-dismissible .close{top: -7px; text-shadow: none} .text-dark{color: var(--text-dark)!important;} .text-dark2{color: var(--textdark2);} .text-dark-medium{color: var(--blackMedium);} .text-disabled{color: var(--textDisbaled);} .text-gray{color: var(--textGray);} .text-id{color: var(--textID);} .textGrayLight{color:var(--textLight2); } .text-theme{color:var(--textTheme) ;} .chip{display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--chipBg); color: var(--textblack7) ; font-size: 13px;} .chip:hover{color: var(--textblack7) ;} .chip2{display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--chipBg2); color: var(--textblack7) ; font-size: 13px; line-height: normal;} .chip2:hover{color: var(--textblack7) ;} .chip3{display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--chipBg3); color: var(--textblack7) ; font-size: 13px; line-height: normal;} .chip3:hover{color: var(--textblack7) ;} .activechip{display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--statusGreenBg); color: var(--statusGreentext) ; font-size: 13px; line-height: normal;} .activechip:hover{color: var(--statusGreentext) ;} /*boottsrap css modified*/ .popover{background: var(--cardBg); border-color: var(--BorderColor2); font-family: inherit;} .popover-header{background: var(--gray200); color: var(--blackMedium); border-color: var(--sparatorBorder); font-size: 14px;} .popover-body{color: var(--textblack7); font-size: 12px;} .bs-popover-auto[x-placement^="bottom"] > .arrow::after, .bs-popover-bottom > .arrow::after{border-bottom-color:var(--gray200);} .bs-popover-auto[x-placement^="bottom"] > .arrow::before, .bs-popover-bottom > .arrow::before{border-bottom-color:var(--BorderColor2); } .bs-popover-auto[x-placement^="bottom"] .popover-header::before, .bs-popover-bottom .popover-header::before{border-color: var(--gray200);} .bs-popover-auto[x-placement^="top"] > .arrow::after, .bs-popover-top > .arrow::after{border-top-color:var(--cardBg);} .bs-popover-auto[x-placement^="top"] > .arrow::before, .bs-popover-top > .arrow::before{border-top-color:var(--BorderColor2);} .bs-popover-auto[x-placement^="left"] > .arrow::after, .bs-popover-left > .arrow::after{border-left-color:var(--cardBg);} .bs-popover-auto[x-placement^="left"] > .arrow::before, .bs-popover-left > .arrow::before{border-left-color:var(--BorderColor2);} .bs-popover-auto[x-placement^="right"] > .arrow::after, .bs-popover-right > .arrow::after{border-right-color:var(--cardBg);} .bs-popover-auto[x-placement^="right"] > .arrow::before, .bs-popover-right > .arrow::before{border-right-color:var(--BorderColor2);} /*boottsrap css modified*/ /*button*/ .btn-custom-1 { background: var(--customBtnBg1); color: var(--customBtncolor1); border-radius: 5px; font-size: 13px; padding: 7px 12px; border: solid 1px var(--customBtnborder1); line-height: normal;} .btn-custom-1:hover{color: var(--customBtncolor1);} .btn-custom-2{background: var(--customBtnBg2); color: var(--customBtncolor2); border:solid 1px var(--customBtnborder2); font-size: 13px; padding: 7px 12px; border-radius: 5px; line-height: normal;} .btn-custom-2:hover{background: var(--customBtnBg2); color: var(--customBtncolor2);} .btn-custom-gray{background: var(--customBtnGrayBg); color: var(--customBtnGrayColor); border:solid 1px var(--customBtnGrayBorder); font-size: 13px; padding: 7px 12px; border-radius: 5px; line-height: normal;} .btn-custom-gray:hover{background: var(--customBtnGrayBg); color: var(--customBtnGrayColor); } .btn-custom-1:disabled, .btn-custom-2:disabled, .btn-custom-gray:disabled{opacity: .7; cursor: not-allowed;} .btn-custom-1.btn-small, .btn-custom-2.btn-small, .btn-custom-gray.btn-small{padding: 3px 8px; font-size: 12px;} .btn-custom-1.btn-sm, .btn-custom-2.btn-sm, .btn-custom-gray.btn-sm{padding: 5px 8px; line-height: normal;} .SearchResetBtn{border-radius: 0px 4px 4px 0px; margin-left: -7px; padding: 5px;} .btn-primary{background: var(--btnPrimaryBg); color: var(--btnPrimaryColor)!important; border-color: var(--btnPrimaryBorder)!important;} .btn-primary:hover, .btn-primary:focus{background: var(--btnPrimaryBg)!important; color: var(--btnPrimaryColor); border-color: var(--btnPrimaryBorder)!important; outline: none; box-shadow: none!important} .btn-success{background: var(--btnSuccessBg); color: var(--btnSuccessColor)!important; border-color: var(--btnSuccessBorder)!important;} .btn-success:hover, .btn-success:focus{background: var(--btnSuccessBg)!important; color: var(--btnSuccessColor); border-color: var(--btnSuccessBorder)!important; outline: none; box-shadow: none!important} .btn-secondary{background: var(--btnSecondaryBg); color: var(--btnSecondaryColor)!important; border-color: var(--btnSecondaryBorder)!important;} .btn-secondary:hover, .btn-secondary:focus{background: var(--btnSecondaryBg)!important; color: var(--btnSecondaryColor); border-color: var(--btnSecondaryBorder)!important; outline: none; box-shadow: none!important} /*old css*/ .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: var(--blackMedium);} .text_d_light{color: var(--textDLight);} .text_m_light{color: var(--textGray); } .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: var(--textmBlue);} .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} .fw-600{font-weight: 600;} .fw-500{font-weight: 500;} .fw-400{font-weight: 400;} .fw-300{font-weight: 300;} .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;} .noAfter:after{ display:none!important } /*old css*/ .actionHeader{background:var(--top-header-bg); border-bottom: none; box-shadow:none; position: fixed; top: 0px; left: 0px; padding: 0; z-index: 6; transition: all 0.5s ease; width: 100%; height: 46px; padding:8px 15px; border-bottom:solid 1px var(--header-border); } .logotext{padding-left:55px; font-size: 21px; color: var(--logoTextColor); display: inline-block;} :root { --menuTextColor:#494555; } .nav-capsule-main { background: #ffffff82; border-radius: 100px; padding: 2px 2px; display: flex; align-items: center; } .action-capsule-icons { background: #ffffff82; border-radius: 100px; padding: 2px 10px; display: flex; align-items: center; gap: 2px; } .nav-capsule-main .dropdown-toggle::after { display: none !important; } .actionHeader .nav-link { font-size: 14px; font-weight: 400; color:var(--menuTextColor); padding: 5px 14px !important; margin: 0 2px; border-radius: 100px; transition: all 0.2s ease; display: flex; align-items: center; border:solid 1px transparent; } .actionHeader .nav-item.active .nav-link, .actionHeader .nav-link:hover, .actionHeader .dropdown:hover > .nav-link { background: rgba(91,108,255,0.12); color: #3F51B5 ; } .actionHeader .dropdown-menu { display: block !important; /* Forces block so transitions work, but we hide it via visibility */ visibility: hidden; opacity: 0; padding: 10px; border-radius: 0px 0px 5px 5px; border: solid 1px var(--header-border); background: var(--sidebarMenuBg); margin-top: 6px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); position: absolute; transform: translateY(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1000; border-top-color :transparent; } /* Specific overrides for navbar menus to keep your existing structural styles */ .navbar-nav .dropdown-menu { border-radius: 0px 0px 5px 5px; border-top: none; } .headerMenuDropdown .dropdown-menu .dropdown-item{font-size:14px; padding :6px 12px; border-radius:5px; transition: all 0.2s ease;} .headerMenuDropdown .dropdown-menu .dropdown-item:hover, .headerMenuDropdown .dropdown-menu .dropdown-item.active { background: rgba(91,108,255,0.08); color: #3F51B5; } .headerMenuDropdown .dropdown-menu .dropdown-item:active { background: rgba(91,108,255,0.15); } .menuDropIco{width: 24px; height: 24px; background: rgba(91,108,255,0.08); border-radius: 5px; font-size: 12px; margin-right: 4px; text-align: center; line-height: 24px;} /* Updated Action Buttons */ .topActionBtn { background: transparent; border: none; color:var(--menuTextColor); ; font-size: 19px; padding: 6px; transition: color 0.2s; cursor: pointer; display: flex; align-items: center; } .topActionBtn:hover { color: #111111; } /* Center the Nav Bar in the Header */ .actionHeader { display: flex !important; justify-content: center; align-items: center; padding: 0 15px !important; /* Centering doesn't need high side padding */ } .actionHeader .navbar { width: 100%; height: 100%; display: flex; align-items: center; } .liveBtnNav{padding: 6px 10px; font-size: 14px; background:#ffffff82; border-radius: 20px; border:none; color:var(--menuTextColor); transition: all 0.2s ease; cursor: pointer; } .userAvtarDropBtn{background:#ffffff82; border-radius: 20px; border:none; padding:6px;} .userAvtarDropBtn:hover{background:#ffffff;} @media (min-width: 992px) { .actionHeader .nav-item.dropdown:hover > .dropdown-menu, .actionHeader .dropdown:hover > .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; } /* Bridge the gap for smooth hovering */ .actionHeader .dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: transparent; } } [data-theme="dark"] .nav-capsule-main, [data-theme="dark"] .userAvtarDropBtn, [data-theme="dark"] .action-capsule-icons{background:#534f4f82;} [data-theme="dark"] .liveBtnNav{background:#534f4f82; color:var(--blackMedium);} [data-theme="dark"] .navbar-nav .nav-link{color:var(--blackMedium);} [data-theme="dark"] .topActionBtn{color:var(--blackMedium);} [data-theme="dark"] .icon-sep{background:var(--BorderColor2)!important;} [data-theme="dark"] .navbar-nav .nav-item.active .nav-link, [data-theme="dark"] .navbar-nav .nav-link:hover, [data-theme="dark"] .navbar-nav .dropdown:hover > .nav-link{background:rgb(44 45 52 / 77%); color:#fff!important} .stringMenu{background: linear-gradient(to right, #0099ff 0%, #a033ff 50%, #ff5280 90%, #ff7061 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent !important; } .stringMenu:hover, .actionHeader .nav-item.active .stringMenu{background: linear-gradient(to right, #0099ff 0%, #a033ff 50%, #ff5280 90%, #ff7061 100%)!important; -webkit-background-clip: text!important; -webkit-text-fill-color: transparent!important; background-clip: text!important; color: inherit !important; } .action-capsule-icons:has(.topActionBtn:only-of-type) .icon-sep { display: none; } .action-capsule-icons:not(:has(.topActionBtn)) { display: none; } .dropdown-menu{background: var(--dropdownBg); line-height: normal;} .dropdown-item{color: var(--body-text-color);} .dropdown-item:hover{color: var(--body-text-color); background: var(--dropdownmenuhoverBg);} .dropdown-divider{border-color:var(--commonBorderColor); } .custom-control-label::before{background: var(--checkboxBg); border-color:var(--checkboxBorder); } .userAvtarDropBtn{display: inline-block; text-align: center; color: var(--textGray); } .userAvtarDropBtn span{display: inline-block; width: 20px; height: 20px; background: #597ce6; border-radius: 50%; line-height: 20px; font-size: 13px; color:#fff ; text-transform:capitalize; } [data-theme="dark"] .userAvtarDropBtn span {background: var(--btnSuccessBg)} .profileMenuDropdwon { width: 250px; border-radius: 0px 0px 5px 5px!important; border-top:none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding:0px!important } .profile-header { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--sparatorBorder); } .profile-header .avtar { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin-right: 10px; background: #597ce6; color: #fff; text-align: center; text-transform: capitalize; } [data-theme="dark"] .profile-header .avtar {background: var(--btnSuccessBg); } .profile-header .info {display: flex; flex-direction: column; } .profile-header .info .name { color:var(--textdark2); text-transform:capitalize } .profile-header .info .PuserID { font-size: 13px; color: var(--textID); margin-top:5px; } .Profilemenu { list-style: none; padding: 0; margin: 0; } .Profilemenu li { display: flex; align-items: center; cursor: pointer; } .Profilemenu li a{ display:block; width: 100%; padding: 8px 15px; transition: background 0.2s; color:var(--textdark2); font-size:14px;} .Profilemenu li a:hover { background: var(--chipBg); } .Profilemenu li i { margin-right: 12px; color: var(--textLight2); width: 20px; text-align: center; vertical-align:middle; } .Profilemenu li.divider { border-top: 1px solid var(--sparatorBorder); margin: 5px 0; padding: 0; } /*css for left sidebar*/ .sidebar{ position: fixed; top: 0; left: 0; height: 100%; width: 260px; background: var(--sidebarMenuBg); z-index: 100;transition: all 0.5s ease; border-right: solid 1px var(--commonBorderColor);} .sidebar.closenavAside{ width: 55px;} .sidebar .logo-details{ height: 48px; width: 100%; display: flex; align-items: center; padding-left: 15px;} .sidebar .logo-details i{ font-size: 30px; color: var(--textdark2); height: 50px; min-width: 55px; text-align: center; line-height: 50px;} .sidebar .logo-details .logo_name{ font-size: 22px; color: var(--logoTextColor); font-weight: 400; transition: 0.3s ease; transition-delay: 0.1s; padding-left: 13px;} .sidebar.closenavAside .logo-details .logo_name{ transition-delay: 0s; opacity: 0; pointer-events: none;} .sidebar .nav-links{ height: calc(100% - 30px); padding: 30px 0 20px 0; overflow-y: auto; display: flex; flex-direction: column;} .sidebar .nav-links li.bottom-li { margin-top: auto; } .sidebar.closenavAside .nav-links{ overflow: visible;} .sidebar .nav-links::-webkit-scrollbar{ display: none;} .sidebar .nav-links li{ position: relative; list-style: none; transition: all 0.4s ease; padding: 0px 5px; margin-bottom: 2px} .sidebar .nav-links li:hover, .sidebar .nav-links li.showMenu{} .sidebar .nav-links li .iocn-link{ display: flex; align-items: center; justify-content: space-between;z-index:1; position: relative;} .sidebar .nav-links li:hover .iocn-link{background: var(--SidebarmenuHoverBg); border-radius: 10px; } .sidebar .nav-links li.active .iocn-link{background: var(--SidebarmenuHoverBg); border-radius: 10px; } .sidebar.closenavAside .nav-links li .iocn-link{display: block} .sidebar .nav-links li i{height: 45px; min-width: 45px; text-align: center; line-height: 45px; color: var(--textdark2); font-size: 18px; cursor: pointer; transition: all 0.3s ease;} .sidebar .nav-links li.showMenu i.arrow{transform: rotate(-180deg);} .sidebar.closenavAside .nav-links i.arrow{display: none;} .sidebar .nav-links li a{display: flex; align-items: center; text-decoration: none;} .sidebar .nav-links li a .link_name{font-size: 15px; font-weight: 400; color: var(--menutextColor); transition: all 0.4s ease;} .sidebar.closenavAside .nav-links li a .link_name{opacity: 0; pointer-events: none;} .sidebar .nav-links li .sub-menu{ padding: 13px 15px 13px 35px; margin-top: -10px; display: none; position: relative;} .sidebar .nav-links li .sub-menu li{padding: 0px;} .sidebar .nav-links li .sub-menu:after{position: absolute; width: 1px; height: calc(100% - 35px); content: ""; background: var(--menuPseudoColor); top: 0px; left: 23px;} .sidebar .nav-links li .sub-menu a:hover, .sidebar .nav-links li .sub-menu a.active{background:var(--SidebarmenuHoverBg); border-radius: 10px;} .sidebar .nav-links li .sub-menu a:before{border-bottom: 1px solid var(--menuPseudoColor); border-bottom-left-radius:0.5rem; border-left: 1px solid var(--menuPseudoColor); bottom: 50%; content: ""; left: 0px; position: absolute; top: 0; transform: translateX(-100%); width: 12px;} .sidebar .nav-links li.showMenu .sub-menu{ display: block;} .sidebar .nav-links li .sub-menu a{ color: var(--textdark2); font-size: 15px; padding: 5px 10px; white-space: nowrap; opacity: 0.9; transition: all 0.3s ease; border-radius: 6px;} .sidebar .nav-links li .sub-menu a:hover{ opacity: 1; } .sidebar.closenavAside .nav-links li .sub-menu::after{left: 11.6px; height: calc(100% - 67px); top: 35px} .sidebar.closenavAside .nav-links li .sub-menu{position: absolute; left: 100%; top: -10px; margin-top: 0; padding: 10px 15px; border-radius: 0 6px 6px 0; opacity: 0; display: block; pointer-events: none; transition: 0s; border:solid 1px var(--menuPseudoColor); border-left: 0px; min-width: 160px; background: var(--sidebarMenuBg); } @media screen and (max-height: 820px) { .sidebar.closenavAside .nav-links li .sub-menu.longContent{ bottom: -100px} .sidebar.closenavAside .nav-links li:hover .sub-menu.longContent{bottom: -50px!important; top: inherit!important;} } .sidebar.closenavAside .nav-links li .sub-menu.longContent:has(li:nth-child(7)) { bottom: -100px} .sidebar.closenavAside .nav-links li:hover .sub-menu.longContent:has(li:nth-child(7)) { bottom: -300px!important; top: inherit!important;} .sidebar.closenavAside .nav-links li .sub-menu.positionBottom{ bottom: -50px} .sidebar.closenavAside .nav-links li:hover .sub-menu.positionBottom{bottom: -25px!important; top: inherit!important;} .sidebar.closenavAside .nav-links li:hover .sub-menu{ top: 0; opacity: 1; pointer-events: auto; transition: all 0.4s ease;} .sidebar .nav-links li .sub-menu .link_name{ display: none;} .sidebar.closenavAside .nav-links li .sub-menu li{padding: 0px 10px;} .sidebar.closenavAside .nav-links li .sub-menu a{padding: 5px} .sidebar.closenavAside .nav-links li .sub-menu a::before{left: 9px;} .sidebar.closenavAside .nav-links li .sub-menu a:hover{background: var(--SidebarmenuHoverBg);} .sidebar.closenavAside .nav-links li .sub-menu .link_name{ font-size: 12px; text-transform: uppercase; color: #b16f34; opacity: 1; display: block; margin-bottom: 5px; margin-left: -5px; padding: 0px!important} .sidebar .nav-links li .sub-menu.blank{ opacity: 1; pointer-events: auto; padding: 3px 20px 6px 16px; opacity: 0; pointer-events: none;} .sidebar .nav-links li:hover .sub-menu.blank{ top: 50%; transform: translateY(-50%);} .sidebar .profile-details{ position: fixed; left: 0; bottom: 0; width: 260px; display: flex; align-items: center; justify-content: space-between; border-top: solid 1px var(--commonBorderColor); padding: 12px 8px; transition: all 0.5s ease; background:none} .sidebar.closenavAside .profile-details{ background: none;} .sidebar.closenavAside .profile-details{ width: 55px; padding: 12px 0px; justify-content:center} .sidebar .profile-details .profile-content{ display: flex; align-items: center;} .sidebar .profile-details span{ display: inline-block; width: 35px; height: 35px; background: #597ce6; text-align: center; border-radius: 50%; font-size: 18px; line-height: 35px; color: #fff; transition: all 0.5s ease;} .sidebar .profile-details .profile_name, .sidebar .profile-details .UsrId{ color: var(--textdark2); font-size: 18px; font-weight: 500; white-space: nowrap;} .sidebar.closenavAside .profile-details i, .sidebar.closenavAside .profile-details .profile_name, .sidebar.closenavAside .profile-details .UsrId{ display: none;} .sidebar .profile-details .UsrId{ font-size: 12px;} .contentPageArea{ position: relative; background:var(--contentSectinoBg); min-height: 100vh; left: 255px; width: calc(100% - 55px); transition: all 0.5s ease; padding: 12px; padding-top: 46px; padding-right: 0px; padding-left: 15px; padding-bottom: 0px; } .sidebar.closenavAside ~ .contentPageArea{ left: 55px; width: calc(100% - 55px);} .sidebar.closenavAside ~ .contentPageArea.hassubSidebar{left: 255px; width: calc(100% - 255px)} .sidebar ~ .contentPageArea.hassubSidebar{left: 255px; width: calc(100% - 255px)} .subSidebar{position: fixed; left: 55px; width: 200px; padding-top: 65px; height: 100vh; background: var(--subSidebarBg); z-index: 1; border-right: solid 1px var(--commonBorderColor);} .subSidebar h4{font-size: 12px; text-transform: uppercase; color: #b16f34; opacity: 1; display: block; padding-left: 20px;} .menuList{ list-style:none; margin:0px 0px 15px; padding:0px; max-height:80vh; overflow:auto; } .menuList li{display: inline-block; width: 100%; padding: 2px 10px;} .menuList li a{ font-size:14px; font-weight:400; color:var(--blackMedium); padding: 6px 10px 6px 32px; border-radius: 6px; display: block; position: relative; cursor: pointer; text-transform: capitalize;} .menuList li a:hover, .menuList li a.active{background: var(--subSidebarhoverbg); color:var(--text-dark); } .menuList li a i{color: var(--textLight2); margin-right: 3px; font-size: 16px; position: absolute; top: 8px; left: 10px;} .menuList li a i.bi{top: 5px;} @media screen and (max-width: 400px){ .sidebar{ width: 240px; } .sidebar.closenavAside{ width: 55px;} .sidebar .profile-details{ width: 240px;} .sidebar.closenavAside .profile-details{background: none;} .sidebar.close .profile-details{ width: 55px; } .contentPageArea{ left: 240px; width: calc(100% - 240px); } .sidebar.closenavAside ~ .contentPageArea{ left: 55px; width: calc(100% - 55px); } } .menuCollpaseBtn{position: absolute; right: 0px; background: var(--SidebarToggleBtnBg); width: 25px; height: 25px;color: var(--textdark2); border-radius: 50%; border:none; outline: none; top: 50px; left: 15px; transform: rotate(180deg); z-index: 1;} .sidebar.closenavAside .menuCollpaseBtn {transform: rotate(0deg);} .db_search_bx .textbox{color: var(--text-dark); background: none; border: none; outline: none; width: 180px; font-size: 13px; font-weight: 400;} .db_search_bx{background: var(--headerSearchBg); border: solid 1px var(--headerSearchborder); width: 220px; border-radius: 4px; padding: 3.3px 8px;} .searchIcon{color: var(--blackMedium);} .all_db_search{padding:0px!important; background: var(--customBtnBg2); width: 220px; border-radius: 0px 0px 10px 10px; box-shadow:0px 0px 15px -3px #00000021; max-height: 500px; overflow: auto; top: 11px!important; left: 10px!important} .universal_search_rsult{list-style: none; margin: 0px; padding: 0px;} .universal_search_rsult li{display: block; float: none; color: var(--textdark2); border-bottom: solid 1px var(--borderLight); padding: 8px 15px; position: relative;} .universal_search_rsult li:last-child{border:none;} .universal_search_rsult li:hover{background: var(--chipBg2);} .universal_search_rsult li.selecthover{background: var(--chipBg2);} .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: var(--textLight2); display: inline-block; width: 25px; vertical-align: top; } .universal_search_rsult li ._sindicator{ font-size: 13px; display: inline-block; width: 15px; color: var(--textGray); vertical-align: top} .universal_search_rsult li .result_in{margin-left: 5px; color: var(--textdark2); font-size: 13px; display: inline-block; width: 118px; vertical-align: top;} .universal_search_rsult li .result_in b{font-weight: normal; color:var(--textmBlue); } .pagetitle{font-size: 30px; font-weight: 300; color: var(--titletext); margin-top: 12px; text-transform: capitalize;} .pagetitle i{ vertical-align: middle;} .pagetitle .descriptiontext{font-size: 16px; font-weight: normal; color: var(--textGray); display: block; margin-top: 5px;} .pagetitle .counter{font-size: 16px; background: var(--SidebarToggleBtnBg); padding: 2px 4px; border-radius: 6px; vertical-align: middle; color: var(--text-dark);} /*css for break modal*/ .breakTable{margin: 0px -15px;} .breakTable .table { width: 100%; border-collapse: collapse; } .breakTable .table thead { background: var(--thBg);} .breakTable .table thead th { text-align: left; padding: 6px 15px; font-size: 13px; font-weight: 400; color: var(--th-text-color); border-top: 1px solid #eee; border-bottom: 1px solid #eee; } [data-theme="dark"] .breakTable .table thead th{border-color: #373737} .breakTable .table tbody td { padding: 12px 15px; font-size: 14px; border-bottom: solid 1px var(--tdborderColor); vertical-align: middle; color:var(--tdTextcolor); } .breakTable .table tbody tr:hover { background: var(--tdHoverBg); } .breakTable .attempts { color: #f26565; font-size:15px } .breakTable .remaining { color: var(--textmBlue); font-size:15px } .breakTitle{font-size: 16px!important; color: var(--textdark2);} .breakTitle span{display: inline-block; width: 30px; height: 30px; background: #f2f2f2; border-radius: 50%; text-align: center; line-height: 33px; font-size: 18px; margin-right:5px; vertical-align: middle;} [data-theme="dark"] .breakTitle span{background: #f2f2f22b} .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; display: none} [data-theme="light"] .page-disable{background: rgba(255, 255, 255, 0.89)} .page-disable.dblock{display: block; opacity: 1; z-index: 1000} .page_dis_content {width: 800px; display: table; margin: 100px 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;} [data-theme="light"] .breake-message{background: #fff1f1; box-shadow: none; border:solid 1px #ddd;} .breake-message h2 { color: var(--textdark2); text-align: center; font-size: 36px; margin: 0px; padding: 0px; font-weight: 200; position: relative;} .breake-message h2 i{color: #ed5740; } .work_btn_sec {background: var(--top-header-bg); 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; border:solid 1px var(--customBtnborder2) } .work_btn_sec h3 { margin: 0px 0px 15px; padding: 0px; font-size: 18px; color: var(--text-dark); font-weight: 400;} .breakBanner img{max-width: 400px;} .work_btn_sec .btn-success { padding: 5px 30px; border-radius: 20px; font-size: 16px; } [data-theme="light"] .work_btn_sec .btn-success{background:#fff!important; color:var(--text-dark)!important;} .hide_overflow { overflow: hidden; } .blur { filter: blur(2px);} /*css for break modal*/ /*table*/ .tableSection{background: var(--tableBg); padding: 0px 0px; min-height: 500px; border-radius: 0px; border-top: solid 1px var(--tableBorder); border-bottom: solid 1px var(--tableBorder); margin-top: 10px; margin-bottom: 15px; margin-left: -15px; margin-right: -15px;} .tableSection.tableMiddle{border-left: solid 1px var(--BorderColor2); border-right: solid 1px var(--BorderColor2); border-color:var(--BorderColor2);} .tableSection table thead tr th{font-size: 14px; font-weight: 500; border:none; padding: 8px 8px; background: var(--thBg); position: sticky; top: 45px; z-index: 2; color: var(--th-text-color); border-bottom: solid 1px var(--tableBorder); vertical-align:middle; } .tableSection table tbody tr td{border-top: solid 1px var(--tdborderColor); color:var(--tdTextcolor); padding: 4px 8px; vertical-align: middle; background: var(--tdBg); font-size: 14px;} .tableSection table tbody tr td:first-child{text-transform: capitalize;} .tableSection table tbody tr:hover td {background: var(--tdHoverBg);} .tableSection table tbody tr td.dateField{font-size: 13px;} .tableSection table tbody tr td.dateField span{display: block; color: var(--dateField); font-size: 11px;} .tableSection table tbody tr td.dateField span:nth-child(2){ } .tableSection table tbody tr td .numberField {font-size: 15px; color: var(--blackMedium)} .tableSection table tbody tr td .numberField font{display: inline-block; width: 35px; color: var(--textLight2); font-size: 13px; text-align: center;} .tableSection table tbody tr td .showonHover{opacity: 0} .tableSection table tbody tr:hover .showonHover{opacity: 1} .tableSection table tbody tr td .form-control{background: var(--lightGrayBg); border-radius: 6px; border:none; color: var(--formControlText); font-size: 14px;} .tableSection .select2-container{width: 100%!important} .tableSection table tbody tr td .select2-container--default .select2-selection--multiple{background: var(--lightGrayBg); border:none; border-radius: 6px; padding: 1px;} .tableSection table tbody tr td .select2-container--default .select2-search--inline .select2-search__field{color: var(--formControlText); font-weight: 400; font-size: 14px;} .tableSection table tbody tr td .select2-container--default .select2-selection--multiple .select2-selection__choice{background: var(--chipBg); border-color: var(--commonBorderColor);} .backCLITable table tbody tr td .select2-container--default .select2-selection--multiple{background: none;} .backCLITable table tbody tr td {padding: 8px;} .backCLITable table tbody tr td .form-control{background: none; border:solid 1px var(--BorderColor2);} /*table*/ /*css for agent list table*/ .agentList table tr th{vertical-align: middle;} .agentList table tbody tr td{padding: 4px 8px; font-size: 14px;} .agentList table tr td.agentDetail{width: 230px; position: relative;} .QuickCallBtn { position: absolute; right: 10px; font-size: 9px; padding: 0px; width: 20px; height: 20px; text-align: center; background: var(--primary); line-height: 20px; border-radius: 20px; top: 7px; opacity: 0; color: #fff} .QuickCallBtn:hover{color: #fff} .agentList table tbody tr:hover .QuickCallBtn{opacity: 1} .agentList table .agentDetail font{font-size: 13px; color: var(--textGray); vertical-align: middle; display: inline-block; width: 55px;} .agentList table .agentDetail span{ font-size: 15px; color: var(--blackMedium); max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: middle;} .selectColumn{ width: 40px;} .selectColumn .custom-control-label{padding-top: 3px; font-size: 13px;} .working_detail i { display: inline-block; font-size: 12px; padding: 1px 4px; border-radius: 3px; line-height: normal; font-style: normal; color:var(--textDisbaled); margin-right:2px } .working_detail i.active-day { background: var(--chipBg); color: var(--textDLight);} .working_detail span{color: var(--textGray); font-size: 12px;} .destination_detl span { display: inline-block; width: 57px; color: var(--textGray); font-size: 11px;} .destination_detl font { display: inline-block; font-size: 14px;} .rolefield{font-size: 14px;} .rolefield a{ color:var(--textLight2); font-size: 12px;} .parentdtl font{ color:var(--textLight2); vertical-align:middle; font-size:12px; } .parentdtl span{font-size: 14px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; max-width: 100px;} .tbleDropMenu{ font-size:13px; background:var(--dropdownBg); border-radius:10px; box-shadow:0px 0px 15px -3px #00000057 } .tbleDropMenu a:hover{background: var(--dropdownmenuhoverBg);} .agentList table tbody tr.deleted{opacity: .5} .dataWithId font{ color:var(--textLight2); vertical-align:middle; font-size:12px; } .dataWithId span{font-size: 14px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; max-width: 200px;} @media only screen and (max-width: 1500px) { .agentList table .agentDetail font{font-size: 12px;} .agentList table .agentDetail span{display: block;} .working_detail span{display: block;} .rolefield a{display: block; font-size: 13px;} .destination_detl span{display: block; font-size: 12px; width: 100%} .parentdtl span, .dataWithId span{ display:block; } } 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:auto; border:dotted 2px #337AB7; text-align:center; border-radius:30px; position:relative; background:var(--chipLightBg); padding: 5px 30px; font-size: 13px;} 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} .groupList table .agentTag span{display: inline; padding: 2px 5px; border-radius: 4px; background: var(--chipBg); color: var(--textblack7) ; font-size: 13px; margin-right: 4px; text-transform: capitalize;} .groupList table tr td.agentDetail {width: 270px;} .destination_field span { display: inline-block; width: 50px; color: var(--textGray); font-size: 12px } .destination_field font{color: #1976D2; font-size: 12px} /*css for agent list table*/ /*status*/ .statusTag{display: inline-block; padding: 2px 10px; border-radius: 20px; background:var(--statusGrayBg) ; font-size: 13px; margin-bottom: 2px; text-transform: capitalize; border:solid .5px transparent;} .statusTag.green{background: var(--statusGreenBg); color: var(--statusGreentext);} .statusTag.red{background: var(--statusRedBg); color: var(--statusRedtext);} .statusTag.orange{background: var(--statusOrangeBg); color: var(--statusOrangetext);} .statusTag.blue{background: var(--statusBlueBg); color: var(--statusbluetext);} .statusTag.gray{background: var(--statusGrayBg); color: var(--statusGraytext);} .statusTag.yellow{background: var(--statusyellowBg); color: var(--statusyellowtext);} [data-theme="dark"] .statusTag.green{border-color: #2e5826} [data-theme="dark"] .statusTag.red {border-color: #662f2f} [data-theme="dark"] .statusTag.orange {border-color: #6d473f} [data-theme="dark"] .statusTag.blue {border-color: #456a8a} [data-theme="dark"] .statusTag.yellow {border-color: #716447} /*status*/ /*form modal*/ .modal-backdrop.show{opacity: .7; background: #000} .formModal .modal-dialog{max-width: 600px; border: solid 8px #ffffff2e; border-radius: 17px; } .formModal .modal-content{background: var(--modalBg); border-radius: 10px; box-shadow: 0px 0px 11px #0000000f; border:none} .formModal .modal-header{ border-radius: inherit; border-bottom: none} .MtitleIcon{ display:flex; width:30px; height:30px; border-radius:50%; justify-content:center; align-items:center; font-size:14px; background:var(--body-bg-color); display:inline-flex; vertical-align:middle; } .formModal .modal-header .modal-title{color: var(--titletext); font-family: inherit; font-weight: 500} .formModal .modal-header button.close{color: var(--blackMedium); font-weight: 300; margin-right: 0px; margin-top: -7px; padding: 0px; line-height: normal; font-size: 30px; text-shadow: none;} .formModal .modal-body{max-height: 75vh; overflow: auto; min-height: 300px;} .formModal .field_label{font-size: 14px; font-weight: 500; color: #212529} .formModal .form-control{border-radius: 6px; border:none; background: var(--formControlBg); font-size: 14px; color: var(--formControlText);} .formModal .form-control:disabled{opacity: .6} .formModal .border-start{border-color:var(--sparatorBorder); } .formModal .input-group-text{background: var(--lightGrayBg); color: var(--formControlText); border-radius: 6px; border:none; font-size: 12px;} .formModal .modal-footer{border-top: solid 1px var(--sparatorBorder);} .formModal .modal-footer .btn-secondary{background: var(--btnSecondaryBg); border-color:var(--btnSecondaryBorder) !important ; color: var(--btnSecondaryColor) !important} .formModal .col-form-label{font-size: 14px; font-weight: 500; color: var(--blackMedium);} .formModal .select2-container{width: 100%!important;} .formModal .select2-container--default .select2-selection--multiple{background: var(--formControlBg)!important; border-radius: 6px!important; border:none!important} .formModal .select2-container--default .select2-selection--multiple .select2-selection__choice{background: rgb(212, 237, 255) !important; color: rgb(54, 52, 52) !important; border: none !important; font-size: 13px; margin-top: 6px;} .formModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-left: 10px; float: right;} .formModal .select2-container--default .select2-selection--single{background: var(--formControlBg)!important; border-radius: 6px!important; border:none!important} .formModal .select2-container .select2-selection--single{height: 32px;} .formModal .select2-container--default .select2-selection--single .select2-selection__rendered{color: var(--formControlText); font-size: 14px;} .formModal .select2-container--default .select2-selection--single .select2-selection__arrow{height: 32px;} .formModal .custom-control-label{font-size: 14px; color: var(--formControlText);} .advnclink_btn{display: block; position: relative;} .advnclink_btn a{font-size: 15px; background: var(--cardBg); display: inline-block; z-index: 1; position: relative; padding-right: 6px;} .advnclink_btn:after{position: absolute; width: 100%; left: 0px; top: 11px; content: ""; background: var(--sparatorBorder); height: 1px;} .dark_bg_model .modal-dialog{border: solid 8px #ffffff2e; border-radius: 17px} .dark_bg_model .modal-content{background: var(--modalBg); border-radius: 10px; box-shadow: 0px 0px 11px #0000000f; border:none} .dark_bg_model .modal-header{border-bottom: none} .dark_bg_model .modal-header .modal-title{color: #222; font-family: inherit; font-weight: 500} .dark_bg_model .modal-header button.close{color: #1d1b1b; font-weight: 300; margin-right: 0px; margin-top: -7px; padding: 0px; line-height: normal; font-size: 30px; text-shadow: none} .dark_bg_model .modal-header button.close:hover{color: #000} .dark_bg_model .modal-footer{border-top: solid 1px #e8e8e8} .agent_detail_list_2x{margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); margin-top: -15px;} .agent_detail_list_2x .nav-pills{padding-left: 16px; padding-right: 16px; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; } .agent_detail_list_2x .nav-pills .nav-item{border-right: solid 1px #ddd;} .agent_detail_list_2x .nav-pills .nav-link{background: none; color: #4e4e4e;} .agent_detail_list_2x .nav-pills .nav-link.active{background: none; color: #007bff; font-weight: 500} .agent_detail_list_2x .nav-tabs{padding-left: 16px; padding-right: 16px; border-bottom: none; } .agent_detail_list_2x .nav-tabs .nav-link{background: none; color: var(--textblack7); font-size: 14px; padding: 5px 8px; border-color:var(--BorderColor2) var(--BorderColor2) transparent; margin-left:2px; } .agent_detail_list_2x .nav-tabs .nav-link i{color: var(--textDisbaled);} .agent_detail_list_2x .nav-tabs .nav-link.active{background: #eef4fc; color: #007bff; border-color: var(--BorderColor2) var(--BorderColor2) transparent; position: relative; z-index: 1} .agent_detail_list_2x .nav-tabs .nav-link.active .chip{background: #ffffff2e; color: #fff} .agent_detail_list_2x .table thead tr th{background:var(--thBg); color: var(--th-text-color); border-top: solid 1px var(--tableBorder); border-bottom: solid 1px var(--tableBorder); font-size: 13px; line-height: normal; padding-top: 5px; padding-bottom: 5px; font-weight: normal;} .agent_detail_list_2x .table thead tr th:first-child, .agent_detail_list_2x .table tbody tr td:first-child{ padding-left:16px; } .agent_detail_list_2x .table thead tr th:last-child, .agent_detail_list_2x .table tbody tr td:last-child{ right:16px; } .agent_detail_list_2x .table tbody tr td{border-color: var(--tdborderColor); color: var(--tdTextcolor); font-size: 13px; line-height: normal; vertical-align: middle;} .agent_detail_list_2x .table tbody tr td .text_m_light{color:var(--textLight2); display: block; font-size: 11px;} .agent_detail_list_2x .table tbody tr td audio { width: 220px; height: 30px; vertical-align: middle;} .agent_detail_list_2x .table tbody tr td audio::-webkit-media-controls-current-time-display, .agent_detail_list_2x .table tbody tr td audio::-webkit-media-controls-time-remaining-display { display: none; } .agent_detail_list_2x table tbody tr td.dateField {font-size: 13px;} .agent_detail_list_2x table tbody tr td.dateField span:nth-child(2) { font-size: 11px; color: var(--textGray);} .agent_detail_list_2x table tbody tr td.other_node_detailx2 p{text-align: left; background: var(--gray100); padding: 5px; border-radius: 4px; font-size: 12px;} .summaryDtlBx{border-top: solid 1px var(--sparatorBorder);} .summaryDtlBx .col-form-label{color: var(--textGray); padding-top: 0px; padding-bottom: 0px; font-weight:400 } .summaryDtlBx .infobx{color: var(--textdark2); font-size: 14px; margin: 3px 0px;} .summaryDtlBx .form-group:hover{background: var(--tdHoverBg); border-radius: 5px;} .other_node_detailx2{width: 250px;} .agent_detail_list_2x .responseBx{ font-size: 12px; word-break: break-all; white-space: normal; color:var(--text-dark2); } .addToContactSection{border-top: solid 1px var(--BorderColor2); padding-top:15px; } .amount_deduction_bx p.help_text{color: var(--tdTextcolor); font-weight: 400; font-size: 14px;} .amount_deduction_bx .amount_bx { font-size: 16px; display: inline-block; text-align: left; width: 100%; padding: 10px 15px; vertical-align: top; background: var(--chipLightBg); border-radius: 5px;} .amount_deduction_bx .amount_bx span { display: inline-block; font-size: 28px; color: #1976D2; vertical-align: middle;} .amount_deduction_bx .amount_bx span i{vertical-align: middle;} .amount_deduction_bx .deduct_descrptn { display: inline-block; width: 100%; vertical-align: middle; padding-left: 50px; margin-top: 20px;} .amount_used_list { list-style: none; margin: 0px; padding: 0px; position: relative;} .amount_used_list::after { position: absolute; width: 1px; height: 100%; content: ""; background: var(--sparatorBorder); border-radius: 5px; top: 0px; left: 0px;} .amount_used_list li{padding-bottom: 15px; margin-bottom: 15px; border-bottom: solid 1px var(--sparatorBorder); display: inline-block; width: 100%; position: relative; padding-left: 50px;} .amount_used_list li:last-child{border-bottom: none} .amount_used_list li .dectn_report { margin-top: 5px;} .amount_used_list li .dectn_report span font{font-weight: 500; color: var(--text-dark); } .amount_used_list li .dectn_report span font i{vertical-align: middle;} .amount_used_list li .amount_cril { position: absolute; left: -30px; top: 15px; padding: 2px 5px; background: var(--statusRedBg); min-width: 60px; text-align: center; line-height: normal; border-radius: 20px; z-index: 2; color: var(--statusRedtext); font-size: 13px;} .updateFileInput{width: 175px; background: var(--body-bg-color); color: var(--body-text-color); outline: none; border: solid 1px var(--BorderColor2); vertical-align: middle;} .listBox{ display:block; } .listBox ul{list-style: none; margin: 0px; padding: 0px;} .listBox ul li{display: block; margin-bottom: 5px;} .listBox ul li .custom-control-label{ color:var(--blackMedium); } .listBox ul li font.textGrayLight { font-size:14px; } .listBox ul li span.text-dark-medium{ font-size:14px; margin-bottom:5px; display:inline-block; text-transform:capitalize; } .twoColInfoList{ display:block; } .twoColInfoList ul{list-style: none; margin: 0px; padding: 0px;} .formModal .workdetail {margin: 0px; padding: 0px; list-style: none; width: 100%; display: inline-block;} .formModal .workdetail li { display: inline-block; width: 13%; overflow: hidden;} .formModal .workdetail li input[type="checkbox"] { position: absolute; left: -9999px;} .formModal .workdetail li label {background: var(--lightGrayBg); color: var(--textblack7); width: 50px; height: 25px; border-radius: 6px; transition: all .2s; line-height: 23px; text-align: center; font-size: 14px; cursor: pointer; font-weight: normal; border: solid 1px #eeeeee42;} .formModal .workdetail li input[type="checkbox"]:checked + label { background: var(--chipBg); color: var(--textblack7) ; border-color: transparent;} .quickCallAdvanceSec{background: var(--gray100); padding: 15px; border-radius: 5px; border:solid 1px var(--sparatorBorder); margin-top: 10px;} .quickCallAdvanceSec .custom-control-label{color: var(--blackMedium); font-size: 14px; font-weight: 500} .quickCallAdvanceSec .form-control{border:solid 1px var(--borderLight); } .callbackModalBody{padding-top: 0px} .callbackModalBody nav{margin: 0px -15px} .callbackModalBody nav .nav-tabs{padding: 0px 15px; border-color: var(--BorderColor2);} .callbackModalBody nav .nav-tabs .nav-link{font-size: 15px; color: var(--textGray);} .callbackModalBody nav .nav-tabs .nav-link.active{color: var(--textmBlue); background: #fff; border-color: var(--BorderColor2) var(--BorderColor2) transparent;} [data-theme="dark"] .callbackModalBody nav .nav-tabs .nav-link.active{background: #272728} /*form modal*/ /*css for form design*/ .formSection{ max-width:80%; margin:0 auto; padding-bottom:20px; } .formSection .pagetitle {font-size: 25px;} .formSection .card{box-shadow: 0px 1px 4px 0px rgba(133, 146, 173, 0.2); border-radius: 10px; padding: 25px; border: 0px; background: var(--tableBg);} [data-theme="dark"] .formSection .card { box-shadow: none;} .formSection .col-form-label{font-size: 15px; font-weight: 500; color: var(--textGray);} .formSection .form-control{color: var(--formControlText); border: 1px solid var(--BorderColor2); border-radius: 6px; padding: 8px 16px; background: var(--formControlBg); font-size: 15px;} .formSection .custom-file-label{color: var(--formControlText); border: 1px solid var(--BorderColor2); border-radius: 7px; font-size: 15px;} .formSection .textForm{color: var(--formControlText);} .formSection .select2-container--default .select2-selection--multiple{background: #fff; border:1px solid #dfe5ef; border-radius: 7px; min-height:38px; padding-top:1px; } .formSection .select2-container--default .select2-selection--multiple .select2-selection__choice{background: var(--chipBg)!important; color: var(--textblack7) !important; border:none!important; font-size: 13px; padding: 2px 5px} .select2-dropdown{background: var(--dropdownBg) !important; border-color: var(--commonBorderColor)!important; color: var(--formControlText); font-size: 14px} .select2-container--default .select2-results__option[aria-selected="true"]{background: var(--dropdownmenuhoverBg) !important; color: var(--formControlText);} .form-actions{margin-left: -45px; margin-right: -45px; padding-left: 45px; padding-right: 45px; border-top: solid 1px var(--sparatorBorder); padding-top: 25px; text-align: right;} /*.form-actions .btn{border-radius: 20px; padding: 5px 20px;}*/ .secnodaryThemeBtn{background: #E1E1F9; color: #333} .formSection .form-label{font-size: 15px; font-weight: 500;} .form-control.is-valid, .was-validated .form-control:valid{border-color:#28a745 } .form-control.is-invalid, .was-validated .form-control:invalid{border-color: #dc3545} .invalid-feedback ,.valid-feedback{font-size: 12px;} .form-check-label{color:var(--formControlText); font-size: 15px;} .r-separator .form-group { border-bottom: 1px solid var(--sparatorBorder); } .border-start { border-left: solid 1px var(--sparatorBorder);} .border-end { border-right: solid 1px var(--sparatorBorder);} .text-end{text-align: right} .r-separator .form-control{border: none; background: var(--tableBg) } .r-separator .form-control::placeholder{color: var(--textLight2); font-weight: 300; font-size: 13px;} .r-separator .form-control:has(option:disabled:checked) {color: var(--textLight2); font-weight: 300; font-size: 13px; } .r-separator .form-control:hover, .r-separator .form-control:focus{box-shadow: none; outline: none} .r-separator .form-control.BgInputBx{background: var(--formControlBg)!important; color: var(--formControlText)!important} .r-separator .select2-container--default .select2-selection--multiple{border:none!important; background: none!important} .r-separator .dprtmrnt_stuts{background: #8484840f} .r-separator .dprtmrnt_stuts li span:first-child{ color:var(--textGray); font-size:13px } .select2-container--default .select2-search--inline .select2-search__field{color: var(--textLight2)!important; font-size: 13px; opacity: 1; font-weight: 300} .r-separator .col-form-label{border-right: solid 1px var(--sparatorBorder); margin-right: -1px; background: var(--formLabelBg); margin-top: 5px; margin-bottom: 5px;} .workinghour_input .form-control{width: 20%} .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 .custom-control-label{padding-top: 3px; font-size: 13px} .formSection .workdetail {margin: 0px; padding: 0px; list-style: none; width: 100%; display: inline-block;} .formSection .workdetail li { display: inline-block; width: 12%; overflow: hidden;} .formSection .workdetail li input[type="checkbox"] { position: absolute; left: -9999px;} .formSection .workdetail li label {background: var(--lightGrayBg); color: var(--textLight2); width: 57px; height: 25px; border-radius: 6px; transition: all .2s; line-height: 23px; text-align: center; font-size: 14px; cursor: pointer; font-weight: normal; border: solid 1px #eeeeee42;} .formSection .workdetail li input[type="checkbox"]:checked + label { background: var(--chipBg); color: var(--textblack7) ; border-color: transparent;} .r-separator label.error{font-size: 12px; color: #dc3545 } .formWizardverticalNav .nav-link{font-size: 15px; color: #222; margin-top: 10px; background: #e8eaec} .formWizardverticalNav .nav-link i{margin-right: 4px; color: #6a6a6a} .formWizardverticalNav .nav-link.active{background: #D4EDFF; color: #000} .formWizardverticalNav .nav-link.active i{ color:#000; } .file-drop-area { position: relative; display: block; align-items: center; width: 100%; max-width: 100%; padding: 50px 50px; height: 340px; border: 1px dashed var(--commonBorderColor); background: var(--cardBg); border-radius: 3px; transition: 0.2s;} .file-drop-area.is-active{ background-color:rgba(6, 128, 236, 0.07)} .upload_icon { color:var(--blackMedium); font-size: 50px; text-align: center; width: 100%;} .file-msg { font-size: 16px; color: var(--textGray); font-weight: 300; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .fake-btn { flex-shrink: 0; background-color: var(--customBtnBg2); border: 1px solid var(--customBtnborder2); border-radius: 3px; padding: 8px 15px; margin-right: 10px; font-size: 14px; text-transform: capitalize; color: var(--customBtncolor2);} .file-input { position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; opacity: 0;} .api_code_Section{background: var(--cardBg); border: solid 1px var(--commonBorderColor); min-height: 93vh; border-radius: 10px; height: 100%; position: fixed; right: 0px; top: 40px; border-radius: 0px; border-right: 0px; width: 500px;} .api_code_Section h3 { color: var(--titletext); font-size: 18px; padding: 20px 15px; font-weight: 300; margin-bottom: 0px;} .api_code_Section h3 i{ vertical-align: text-bottom;} .description_accordian{display: block; padding: 10px 20px; max-height: 80vh; overflow: auto;} .description_accordian .card{background: transparent; border-color:rgba(235, 222, 222, 0.08); border: none; box-shadow: none; padding: 0px;} .description_accordian .card-header{padding: 5px 5px; border: none; background: var(--collpaseBg); margin-bottom: 10px!important; border-radius: 8px!important;} .description_accordian .card-header h2{font-size: 18px;} .description_accordian .card-header h2 .btn-link{font-size: 14px; color: var(--textblack7); display: block; width: 100%; text-align: left; position: relative;} .description_accordian .card-header h2 .btn-link:hover{text-decoration: none; box-shadow: none} .description_accordian .card-header h2 .btn-link.collapsed{color: var(--textGray);} .description_accordian .card-header h2 .btn-link:focus{text-decoration: none;} .description_accordian .card-header h2 .btn-link.collapsed:after{position: absolute; right: 10px; top: 5px; content: "\f078"; font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; color: #6a6a6a;} .description_accordian .card-header h2 .btn-link:after{position: absolute; right: 10px; top: 5px; content: "\f077"; font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; color: #222;} .description_accordian .card-body{ font-size: 14px; color: var(--blackMedium); margin-top: -10px; } .cmplsry_tag_5 { padding: 1px 5px; float: right; margin-right: 40px; background: #ffb8b8; border-radius: 4px; font-size: 11px; color: #783232; margin-left: 10px;} .cmplsry_tag_5.optionalfield { background: #b8cdff; color: #324778} .exmple_block { padding: 8px 14px 0px; border: dashed 1px #666; border-radius: 4px; margin-top: 15px; background: var(--cardBg);} .exmple_text {font-size: 14px; color: #2ca275; margin-bottom: 5px; text-transform: capitalize;} .default_value_tag { padding: 2px 5px; background: var(--chipBg); border-radius: 4px;} .campaignForm .card .card-body{min-height: 550px; max-height: 550px; overflow: auto;} .campaignForm h3{font-size: 18px;} .select_custom_cs .select2-container{border: solid 1px var(--BorderColor2); border-radius: 5px;} .select_custom_cs .select2-container--default .select2-selection--multiple{min-height: 30px!important} .select_custom_cs .select2-container--default .select2-selection--multiple .select2-selection__rendered li{margin-bottom: 0px!important;} .campaignForm .select2-container{width: 100%!important} .fromWizard{ width:100%; } .fromWizard ul{list-style: none; margin: 0px; padding: 0px; position: relative;} .fromWizard ul:after{position: absolute; left: 12px; top: 0px; width: 1px; height: 100%; background: var(--sparatorBorder); content: "";} .fromWizard ul li{display: block; margin-bottom: 40px; z-index: 1} .fromWizard ul li .nav-link{padding: 0px; color: inherit; display: block; position:relative; padding-left: 35px; line-height: normal;} .fromWizard ul li .nav-link:after{color: var(--textGray); position: absolute; left: 0px; top: 0px; width: 25px; height: 25px; line-height: 22px; font-size: 15px; font-weight: 400; background: var(--subSidebarBg); border:solid 1px var(--sparatorBorder); border-radius: 50%; text-align: center; content: "1";} .fromWizard ul li span{display: block; font-size: 16px; font-weight: 500; color:var(--blackMedium); } .fromWizard ul li font{color: var(--textGray); font-size: 13px;} .comlpeteTag{ display:none } .fromWizard ul li:nth-child(1) .nav-link:after{content: "1"} .fromWizard ul li:nth-child(2) .nav-link:after{content: "2"} .fromWizard ul li:nth-child(3) .nav-link:after{content: "3"} .fromWizard ul li:nth-child(4) .nav-link:after{content: "4"} .fromWizard ul li:nth-child(5) .nav-link:after{content: "5"} .fromWizard ul li:nth-child(6) .nav-link:after{content: "6"} .fromWizard ul li:nth-child(7) .nav-link:after{content: "7"} .fromWizard ul li:nth-child(8) .nav-link:after{content: "8"} .fromWizard ul li:nth-child(9) .nav-link:after{content: "9"} .fromWizard ul li .nav-link.active:after{background: #1661F2; border-color: #1661F2; color: #fff; content:"\f280"!important; font-family: 'boxicons'; font-weight: normal;} .fromWizard ul li .nav-link.active span{color: var(--text-dark);} .fromWizard ul li .nav-link.active font{color: var(--textdark2);} .campaignForm .custom-control-label {font-size: 15px; color: var(--blackMedium)} .campaignForm .agntList{background: #8484840f; padding: 10px; border-radius: 6px;} .campaignForm .agntList ul {list-style: none; margin: 0px; padding: 0px;} .campaignForm .agntList ul li { font-size: 14px; margin-bottom: 5px; color: #ccc;} .campaignForm h3 { color:var(--textmBlue)!important; font-weight:400 !important} .autoretryonList{background: #8484840f; padding: 10px; border-radius: 6px; margin-top: 5px;} .autoretryonList .custom-control-label{font-size: 13px;} .agentCampaginForm .autoretrySetting{padding-left: 35px; margin-top: 10px;} .agentCampaginForm .autoretrySetting .custom-control-label{font-size: 13px; color: #868686} .agentCampaginForm .retry_block .select2-container--default .select2-selection--multiple {background: var(--formControlBg) !important} @media only screen and (max-width:1500px) { .formSection{max-width: 100%} } /*css for form design*/ /*css for permission Page*/ .PermissionSection { max-width: 800px; margin: 0 auto; padding-bottom: 20px;} .PermissionSection .pagetitle {font-size: 25px;} .PermissionSection .card{ box-shadow: 0px 1px 4px 0px rgba(133, 146, 173, 0.2); border-radius: 10px; padding: 20px 0px; border: 0px; background: var(--cardBg); min-height: 500px} [data-theme="dark"] .PermissionSection .card { box-shadow: none;} .permission_table th { color: #999; font-size: 14px; font-weight: 400; border: none!important} .permission_table td { border-color: var(--borderLight); color: var(--blackMedium); font-size: 16px; text-transform: capitalize; position: relative;} .permission_loader { position: absolute; left: 0px; top: 8px;} .per_agentDtl{background: var(--lightGrayBg); padding: 5px 10px; font-size: 12px; color: var(--textGray); margin-bottom: 5px; display: block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: capitalize;} .permission_table td:first-child, .permission_table th:first-child{padding-left: 25px; width: 70%} .permission_table tr:hover td{background: var(--gray100);} .permission_table.noTH td{border-top: none; border-bottom: solid 1px var(--borderLight); } .filterSecion { background: var(--gray100); display: block; padding: 5px; border-bottom: solid 1px var(--sparatorBorder); border-top: solid 1px var(--sparatorBorder); margin-bottom:10px; } .filterSecion .form-control { padding: 3px 5px; height: inherit; background: var(--cardBg); border-color: var(--sparatorBorder); color: var(--text-dark); font-size: 13px;} .filterSecion .btn { padding: 2px 4px; font-size: 10px} .permission_table .custom-control-label::after { width: 20px; height: 20px; background-size: 10px;} .permission_table .custom-control-label::before { width: 20px; height: 20px; } /*css for permission Page*/ /*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(153, 153, 153); 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: var(--switchToggleHandleBg); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 20px; left: -4px; margin-top: -6px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 20px;} .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 pagination*/ .customPagination{margin-bottom: 0px; padding-bottom: 15px;} .customPagination .page-link{ background: var(--lightGrayBg); border-color:var(--commonBorderColor); color:var(--textdark2); border:none; border-radius:20px; margin-right:5px; padding:.5rem .75rem; line-height:normal; font-size:12px; } .customPagination .page-item.active .page-link{background:#6260A4 ; border-color:#6260A4 ; color:#fff} [data-theme="dark"] .customPagination .page-item.active .page-link{border-color: #6260A4; background: #6260A4; color: #fff} .customPagination .page-item.disabled .page-link{background: var(--lightGrayBg); border-color: var(--commonBorderColor);} .pagination-sm .page-item:first-child .page-link, .pagination-sm .page-item:last-child .page-link{background: none} .PagrowViewDropdown{background: var(--sidebarMenuBg); border-color:var(--commonBorderColor); color:var(--blackMedium); width: 65px; padding: .25rem .5rem; font-size: .875rem} .fixedpagination{position: fixed; bottom: 0px; left: 0; width: 100%; background: var(--contentSectinoBg); padding: 10px; z-index: 1; border-top: solid 1px var(--commonBorderColor);} .fixedpagination .pagination {padding-bottom: 0px!important} /*css for pagination*/ /*css for filter section*/ .filterBarSec{background:var(--filterBg); border-bottom: solid 1px; border-color: var(--filterBorderColor); padding-top:8px; padding-bottom:8px; position: sticky; width: calc(100% + 20px); margin-left: -20px; padding-left: 15px; padding-right: 15px; top: 46px; z-index: 3 } .filterBarSec.hasidebar{margin-left: -15px; width: calc(100% + 15px);} body:has(.filtercolumn):after { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.4); z-index: 1040; content: ""; transition: opacity 0.3s ease; opacity:0; pointer-events: none} body.custom-backdrop:after{opacity: 1; pointer-events: auto} .custom-backdrop .dropdown-menu { z-index: 1051 !important;} body.custom-backdrop:has(.filtercolumn) .filterBarSec{position: relative; top: inherit; z-index: inherit;} .filterRow{background:var(--cardBg); border-bottom: solid 1px; border-color: var(--filterBorderColor); padding-top:8px; padding-bottom:8px; width: calc(100% + 20px); margin-left: -20px; padding-left: 15px; padding-right: 15px; position:relative; top:inherit; z-index:inherit; } .filterRow.activeFilter{background: #3e2a0d; border-bottom: solid 1px #4e3410; } .filter_section{width: 100%;} .filtercolumn { display: inline-block; width: auto; vertical-align: middle; margin-left: 5px;} .filtercolumn .btn-custom { letter-spacing: normal; font-size: 13px; line-height: 26px; text-align: center; background: var(--customBtnBg2); border: solid 1px var(--customBtnborder2); color: var(--customBtncolor2); height: 29px; padding-left: 8px; padding-right: 8px; border-radius: 4px; cursor: pointer; margin-right: 3px;} .filtercolumn .trans_btn { letter-spacing: normal; color: #999; font-size: 13px; line-height: 26px; text-align: center; background-color: transparent; height: 28px; padding-left: 0px; padding-right: 0px; border: none; cursor: pointer; outline: none;} .filtercolumn .isnot{ background: var(--chipBg2); border-color: transparent; color: var(--customBtncolor2); display: inline-block;} .filtercolumn .is{ background: var(--chipBg2); border-color: transparent; color: var(--customBtncolor2); display: inline-block;} .filtercolumn .is .trans_btn {color: #6f9446} .filtercolumn .isnot .trans_btn {color: #bf6d56} .filterOptionDropdown{min-width: 500px; background:var(--cardBg); box-shadow:0px 4px 7px #1311111c; border-radius: 6px; top: 8px!important;} .filterOptionDropdown::after { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--cardBg); position: absolute; top: -8px; left: 25px; content: ""; ;} .filterOptionDropdown h5{font-size: 16px; font-weight: normal; color: var(--blackMedium); padding: 10px 15px 15px; border-bottom: solid 1px var(--sparatorBorder);} .filterField{padding: 10px 25px 10px 15px; display: block} .filterField label{color: #3e6382; font-size: 15px; margin-bottom: 5px;} .filterField .form-control{background:#11111114 ; border: solid 1px #95b0c2; color: #57646d;} .filterField .form-control option{background: inherit;} /*css for filter section*/ /*call log page*/ .callLogtable tr th{padding:4px 8px!important ; line-height: normal; top: 99px!important} .user_select_dropdown{width: 270px; background: var(--dropdownBg); 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 var(--dropdownBg); position: absolute; top: -8px; left: 40px; content: ""; } .user_select_dropdown.dropdown-menu-right:after{left: auto; right: 40px;} .user_select_dropdown .nav-tabs{border-color: var(--sparatorBorder);} .user_select_dropdown .nav-tabs .nav-link{ padding: 4px 5px; background: none; border-radius: 0px; border:0px; color: var(--textdark2); 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: var(--lightGrayBg); padding: 4px 10px 6px; border-radius: 4px; color: var(--textDisbaled); } .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: var(--textdark2); 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: var(--textGray); opacity: 1} .user_select_dropdown .serach_bx_sec .serach_bx_inner input:-ms-input-placeholder { color: var(--textGray); opacity: 1} .user_select_dropdown .serach_bx_sec .serach_bx_inner input::placeholder { color:var(--textGray); 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 h4{font-size: 14px; margin: 0px;} .agent_list_32 ul li{display: inline-block; width: 100%; font-size: 14px; color: var(--blackMedium); 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: var(--sparatorBorder); margin: 0px;} .agent_list_32 li a{color: var(--blackMedium); font-size: 13px;} .agent_list_32 li:hover a{color: var(--text-dark);} .agent_list_32 ul li.active a{color: var(--textmBlue);} .callLogtable tr td.text-center div.d-block.pl-1 font.f_size_11{max-width: 150px; margin: 0 auto; display: table;} .user_select_dropdown .apply_btn_sec{display: inline-block; width: 100%; padding:10px 5px 5px; text-align: center; border-top: solid 1px var(--sparatorBorder); margin-top: 10px} .user_select_dropdown .apply_btn_sec .apply_btn{padding: 5px 30px; border-radius: 20px; border:none; font-size: 14px; background: #007bff; color: #ffffffe8} .callerDetailColumn{width: 250px; position: relative;} .callerDetailColumn .callerNo{font-size: 15px; color: var(--text-dark)} .callerDetailColumn .callerNo font.countryCode{display: inline-block; width: 35px; color: var(--textLight2); font-size: 13px; text-align: center;} .callerDetailColumn i.f_size_10{opacity: .5} .CtypeSec{padding-left: 16px;} [data-theme="dark"] .callLogtable .callerDetailColumn .callerNo{ color: #246BA3} [data-theme="dark"] .callLogtable .btn-link{color: #246FAB} .timeColumn span{ display:block ; font-size:13px; } .didColumn .didNo{font-size: 14px; display: block;} .didColumn .campaignName{font-size: 14px; display: block; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .didColumn .campaignName font{font-size: 12px; color: var(--textID); display: block;} .ivrDtl{ padding-top:5px; color:var(--textGray); font-size:12px; padding-left:12px; } .msterAgentColumn span{display: block; font-size: 12px; color: var(--textID);} .msterAgentColumn font{font-size: 14px;} .durationCount{font-size: 15px;} .callerActionBtn{display: none; position: absolute; right: 15px; top: 3px} .tableSection table tbody tr:hover .callerActionBtn{display: inline-block;} .apiActionBtn .btn{width:auto; padding: 1px 4px; border: solid 1px var(--customBtnborder2); background: var(--customBtnBg2); font-size:12px; border-radius: 4px; color: var(--customBtncolor2);} .apiActionBtn .dropdown-menu{min-width:215px; padding: 5px; background: var(--body-bg-color); border: solid 1px var(--BorderColor2); box-shadow: rgba(0, 0, 0, 0.34) 0px 0px 8px -3px; } .splitterBox{padding: 5px 10px; border-radius: 4px; margin-bottom: 5px; border-bottom: solid 1px var(--borderLight);} .splitterBox .ActnBtn{ width:30px; height:30px; line-height: 30px; border-radius:50%; font-size:12px; text-align:center; outline:none; border:none; background:var(--lightGrayBg); } .splitterBox .col{text-align: center; padding: 5px;} .splitterBox .col span{font-size: 12px; color: var(--textGray);} .splitterBox:last-child{margin-bottom:0px;} .splitterBox a{display: block; font-size: 14px; color: var(--blackMedium); margin-bottom: 8px; font-weight: 500} .splitterBox a:hover{color: var(--text-dark);} .splitterBox a i{margin-right: 4px; opacity: .5} .callback_btn {padding: 2px 4px; background: #379239; color: rgba(256, 256, 256, .9); border-color: transparent; font-size: 12px; margin-top: 1px; line-height: normal;} .callback_btn:hover{color: #fff} .calltypelabel{ min-width: 55px; text-align: center; font-size: 11px; padding: 2px 5px; border-radius: 4px; position: relative; color: #999; background: var(--gray200);} .calltypelabel.inbound { color: var(--textInbound);} .calltypelabel.outbound { color: var(--textoutbound);} .calltypelabel.poolcall { color: var(--textPoolCall);} .calltypelabel.quickcall{ color:var(--textQuickCall); } .calltypelabel.clicktocall{ color:var(--clicktocall); } .calltypelabel.agentcamp{ color:var(--agentcamp); } .calltypelabel.omit{ color:var(--omitcall); } .calltypelabel.broadcast{ color:var(--broadcast); } .calltypelabel.flashcall{ } .calltypelabel.videocall{ } .calltypelabel.ipphone{ } .calltypelabel.maskcall{ } .actionFloating { position: relative; width: 30px; height: 30px; line-height: 30px; cursor: pointer; background: #EA9108; border-radius: 50%; -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); display: inline-block; vertical-align: middle;} .actionFloating span { position: relative; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;color: #fff;font-size: 15px; line-height: normal; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .actionFloating .floatingMenuContent { position: absolute; right: 0px; top: -2px; opacity: 0;visibility: hidden;-webkit-transition: all .3s; transition: all .3s; width: auto; white-space: nowrap; } .actionFloating.active span {-webkit-transform: rotate(135deg); transform: rotate(135deg);} .actionFloating.active .floatingMenuContent {right: 35px; opacity: 1; visibility: visible;} .dc_note_list{display: inline-block; width: 100%; padding: 15px; border-top:solid 1px var(--sparatorBorder) } .list_scrl_Sec{ display:block; width: 100%;} .dc_note_list ul{list-style: none; margin: 0px; padding: 0px; } .dc_note_list ul li{display: inline-block; width: 100%; margin-bottom: 10px; position: relative; padding-left: 0px;} .adtag_dtl_Sec{background: var(--gray200); padding:10px; border-radius: 0px; border-radius: 5px; position: relative;} .ad_tag_alert_time{font-size: 13px; color: var(--textGray); display: block; padding-top: 5px; text-align: right;} .ad_tag_alert_time i{ line-height: normal; font-size: 11px; font-style: normal;} .tag_dtl_sec3clr{color: var(--blackMedium);} .text_d999{color: var(--textID);} [data-theme="dark"] .dispoAddBtn{color:var(--textLight2)!important} .calldispositionBLock { position: absolute; background: var(--tdHoverBg); width: 370px; top: 100%; left:-100px; border-radius: 0px 0px 5px 5px; padding: 0px 20px; border: solid 1px var(--tdborderColor); border-top: 0px; display: none; z-index: 2;} .addmoredispositionBtn {border: solid 1px var(--customBtnborder1);padding: 0px 10px; border-radius: 4px; background: var(--customBtnBg1); font-size: 11px; color: var(--customBtncolor1);} .dispositionRecordColumn{position: relative;} .dispositionRecordColumn:hover .calldispositionBLock { display: block;} .CD_breadcrumbs {border: 1px solid var(--customBtnborder2); background: var(--customBtnBg2); border-radius: 0.3rem; display: inline-flex; overflow: hidden; margin-top: 4px; } .breadcrumbs__item { background: var(--customBtnBg2); color: var(--textGray); 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: var(--customBtnBg2); } .breadcrumbs__item:focus:after, .breadcrumbs__item:focus, .breadcrumbs__item.is-active:focus {background: #323f4a; color: #fff; } .breadcrumbs__item:after, .breadcrumbs__item:before { background: var(--customBtnBg2); 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: var(--customBtnborder2); margin-left: 1px; } .breadcrumbs__item:last-child { border-right: none;} .breadcrumbs__item.is-active { background: var(--chipBg2); } .breadcrumbs__item.is-active:focus{ background: var(--chipBg2);} .ADcalldispositionsec {position: relative; display: block; margin-bottom: 15px; } .ADcalldispositionsec .lTitle { color: #d0b981; margin-bottom: 10px; display: block; font-size: 14px; } .calldispositionBLock label { color: var(--textmBlue); margin-bottom: 0px; font-size: 10px; max-width: 100px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis; } .iframeCallLog .filterBarSec{top: 0px;} .iframeCallLog .callLogtable tr th{top: 52px!important;} .contentPageArea.iframeCallLog .tableSection{margin-top: 7px!important;} @media only screen and (max-width: 1450px) { .callLogtable thead tr th{font-size: 13px;} .didColumn .campaignName{font-size: 13px;} .msterAgentColumn font{font-size: 13px;} .durationCount{font-size: 14px;} .callLogtable .callerDetailColumn{max-width: 220px;} .callLogtable .statusTag{line-height: normal;} } /*call log page*/ /*confirmation page section*/ .confirmationPageSec{max-width: 700px; margin: 150px auto; padding: 50px!important; box-shadow: 0px 1px 4px 0px rgba(133, 146, 173, 0.2); border-radius: 10px; padding: 25px; border: 0px; background: var(--tableBg);} .confirmationPageSec h2{font-size: 30px; font-weight: 300; margin: 15px 0px; color: var(--titletext)} .confirmatinMsg{color: var(--textGray); margin: 10px auto;} .confirmationActionInfo{border: dotted 1px var(--commonBorderColor); padding: 10px; border-radius: 10px; margin-bottom: 15px; background: var(--chipLightBg);} .ActionchangesEffect{margin-top: 15px;} .ActionchangesEffect h3 {font-size: 16px;} .ActionchangesEffect ul{list-style: none; margin: 0px; padding: 0px;} .ActionchangesEffect ul li{display: block; position: relative; font-size: 14px; margin: 7px 0px; padding-left: 25px;} .ActionchangesEffect ul li i{position: absolute; left: 0px; top: 5px; opacity:.5 } .formAction .form-control{background: var(--formControlBg); border:solid 1px var(--sparatorBorder); color: var(--textDLight);} /*confirmation page section*/ /*css for dynamic dashboard*/ .widgetBox { background: var(--cardBg); border:solid 1px var(--sparatorBorder); border-radius:8px; padding: 10px;} .widgetBox .pagetitle{margin: 0px;} .widgetHeading { padding: 0px 10px 5px; position: relative; border-bottom: solid 1px var(--sparatorBorder); margin: -3px -10px 10px} .widgetHeading:not(:has(h2)) {border: none; margin-bottom: 0px;} .widgetHeading.noBorder{border: none; margin-bottom: 0px;} .widgetHeading:empty { display: none;} .widgetHeading h2 { font-size: 16px; color: var(--widgetHeadingColor); color: rgb(23, 101, 227); display: inline-block; margin-bottom: 0px;} .widgetHeading .tbleDropMenu{border-radius: 4px;} .widgetHeading .tbleDropMenu .dropdown-item{font-size: 13px;} .widgetHeading .tbleDropMenu .dropdown-item i{margin-right: 5px; color: var(--textLight2);} .widgetHeading .widgetActionBtn{position: absolute; right:5px; top: -2px; opacity: 0; z-index: 2} .widgetBox:hover .widgetActionBtn{opacity: 1} .widgetHeading .widgetActionBtn .btn-link:hover, .widgetHeading .btn-link:focus{box-shadow: none; text-decoration: none} .widgetHeading .widgetActionBtn .btn-link:after{display: none} .grid-stack-placeholder > .placeholder-content { background: transparent;} .grid-stack-placeholder { background-color: #C9DEF4; border: 1px dashed #666; border-radius: 8px; transition: all 0.2s ease-in-out;} [data-theme="dark"] .grid-stack-placeholder { background-color: rgba(255, 255, 255, 0.1); border-color: #666; } .chartBox{width: 100%; height: calc(100% - 38px);} .widgetTableSec{overflow:auto; margin:0px 0px; min-height:100%; max-height:100%} .widgetTableSec .table{table-layout: auto;} .widgetTableSec table tr th{color: var(--blackMedium); font-size: 16px; border-top: none; padding: 0px 4px 5px; padding-left: 4px; vertical-align: middle; position: sticky; top: 0; z-index: 1; border-bottom: 0px; background: var(--cardBg); font-weight: 500; } .widgetTableSec table tr th:first-child{padding-left: 10px} .widgetTableSec table tr:hover td { background: var(--tdHoverBg);} .widgetTableSec table tr td { color: var(--tdTextcolor); border-top: solid 1px var(--borderLight); border-bottom: none; padding: 8px 4px; position: relative; font-size: 12px; vertical-align: middle;} .widgetTableSec table tr td:first-child{padding-left: 10px;} .widgetTableSec table tr td.clickable-row{cursor: pointer;} .titleColumn{padding-left: 15px!important; width: 45%} .titleColumn a{color: inherit;} .titleColumn font{display: inline-block; color: var(--textGray); width: 45px; vertical-align: sub; } .titleColumn span{font-size: 15px; max-width: 90px; color: var(--textblack7); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: top} .numbrCounter{cursor: pointer; background: var(--CounterBg); padding: 2px 5px; border-radius: 3px; font-size: 14px; color: var(--blackMedium);} .totalCountColumn{text-align: left; width: 90px; min-width: 90px; padding-left: 15px!important;} .totalCountSec{display: inline-block; width: auto;} font.overrallPer{margin-left: 5px;} .didNumbercloumn{ width: 35%; padding-left: 15px!important} .didNumbercloumn a{color: var(--textblack7); font-size: 14px;} .QueDuation{ width: 35%;} .QueDuation font{color: #496bf1; font-size: 18px; font-weight: 500; margin-right: 2px; display: inline-block; width: 35px; text-align: right;} .QueDuation span{ font-size:15px; } .rangebarSec{ width:28%; padding-left:20px!important; } .rangebarSec .progress{background: var(--progressBg); height: 10px} .rangebarSec .progress .progress-bar{background: var(--progressBgActive);} .dynamicColumn .rangebarSec{display: inline-block; padding-left: 0px!important; width: auto; min-width: 50px; vertical-align: middle; margin-right: 5px;} .highlightBlock {background: var(--tableHighlightBg); border: solid 1px var(--tableHighlightborder);} .highlightBlock .widgetHeading {border-color: var(--tableHighlightborder);} .highlightBlock .widgetTableSec table tr th { background: var(--tableHighlightBg);} .highlightBlock .widgetTableSec table tr td { border-top: solid 1px var(--highlightTdBorder);} .highlightBlock .widgetTableSec table tr:hover td { background: var(--highlightTDBg);} .highlightBlock .numbrCounter { background: var(--highlightCountBg);} .highlightBlock .rangebarSec .progress .progress-bar {background: var(--highlighProgresBgActive);} .lightBgwidget{background: #f8fafd} .lightBgwidget table tr th{background:#f8fafd } .lightBgwidget .widgetTableSec table tr td{border-top: solid 1px #e5f0f2} .lightBgwidget .rangebarSec .progress .progress-bar{background: #d7dae1} .lightBgwidget .titleColumn span{max-width: 130px;} .noBg{background: none; border: none} .noBg .widgetTableSec table tr th { background: var(--contentSectinoBg);} .counterData{ display:flex; justify-content:center; flex-direction:column; align-items:center; width:100%; height: 100%; container-type: inline-size;} .counterData font{color: #496bf1; font-size: 32px; font-size: clamp(14px, 20cqw, 48px);} .counterData span{font-size: 18px; font-size: clamp(12px, 10cqw, 22px);; color: var(--textblack7);} .widgetBox:has(.counterData):not(:has(h2)){padding: 0px 10px} .widgetBox:has(.counterData):not(:has(h2)) .chartBox{max-height: 98%!important} .verticleLine{display: flex; text-align: center; height: 100%; justify-content: center;} .verticleLine span{width: 1px; height: 100%; background: var(--sparatorBorder); display: inline-flex;} .horizontalLine{display: flex; text-align: center; width: 100%; height: 100%; align-items: center;} .horizontalLine span{width: 100%; height: 1px; background: var(--sparatorBorder); display: inline-flex;} .widgetBox:has(.verticleLine) .widgetActionBtn{top: 0px; right: -5px;} .widgetBox:has(.verticleLine) .chartBox{ height: calc(100% - 10px);} .widgetBox:has(.horizontalLine), .widgetBox:has(.verticleLine), .widgetBox:has(.richText){overflow: visible!important;} .counterstate {max-width: 340px; margin:0 auto; display: flex; justify-content: center; flex-direction: column; height: 100%;} .treeRow{font-size: 16px; color: var(--blackMedium); text-align: center; display: block; position: relative; line-height:23px; } .treeRow font{display: block; font-size: 16px;} .node1:after{position: absolute; bottom: -18px; left: 0px; right: 0px; margin:0 auto; height: 18px; border-right: solid 2px var(--BorderColor2); width: 1px; content: "";} .node1:before{content: "\f107";font-family: 'Font Awesome 5 Free';font-weight: 900;position: absolute;bottom: -27px;left: 0;right: 0;margin: 0 auto;color: #85aecb;} .node2:before{position: absolute; bottom: -12px; left: 0px; right: 0px; margin:0 auto; height: 8px; border-right: solid 2px var(--BorderColor2); width: 1px; content: "";} .node2:after{position: absolute; bottom: -32px; left: 0px; right: 0px; margin:0 auto; height: 20px; width: 248px; border: solid 2px var(--BorderColor2); content: ""; border-radius: 10px 10px 0px 0px; border-bottom: 0px;} .node3:before{content: "\f107";font-family: 'Font Awesome 5 Free';font-weight: 900;position: absolute;top: -18px;left: 0px;right: 0;margin: 0 auto;color: var(--BorderColor2);} .node4:before{content: "\f107";font-family: 'Font Awesome 5 Free';font-weight: 900;position: absolute;top: -18px;left: 0px;right: 0px;margin: 0 auto;color: var(--BorderColor2);} .node5:before{content: "\f107";font-family: 'Font Awesome 5 Free';font-weight: 900;position: absolute;top: -18px;left: 0px;right: 0px;margin: 0 auto;color: var(--BorderColor2);} .node5:after{position: absolute; top: -26px; left: 0px; right: 0px; margin:0 auto; height: 19px; width: 2px; background: var(--BorderColor2); content: "";} .treeRow .totalagents {color: #6865c4; font-size: 20px; padding-top: 5px;} .treeRow .weblogin {color: #087fdb; font-size: 20px; padding-top: 5px;} .treeRow .oncall {color:#53b740; font-size: 20px; padding-top: 5px;} .treeRow .onbreak {color:#ca990e; font-size: 20px; padding-top: 5px;} .stats-container {display: flex; justify-content: space-between; align-items: stretch; padding: 10px; gap: 20px; flex-wrap: wrap; container-type: inline-size; container-name: stats; } .stat-box { flex: 1; background: transparent;text-align: center; padding: 0px; min-width: 120px; } .stat-title {color: var(--textGray); font-size: 14px; margin-bottom: 5px; font-weight: 400; } .stat-value { color: var(--textblack7); font-size: 20px; margin-bottom: 5px; font-weight: 500;} .stat-growth { color: var(--textLight2); font-size: 13px; margin: 0; font-weight: normal; opacity: 0.7; } @container stats (max-width: 100px) { .stat-box { min-width: inherit; } .stat-title{word-break: break-all;} } .widgetBox:has(.phoneMockup){padding: 20px} .phoneMockup.gray{box-shadow: 0px 0px 0px 11px #ddd, 0px 0px 0px 13px #ddd, 0px 0px 0px 20px #eee} .phoneMockup.gray::before{background: #ddd} .phoneMockup.gray i{background: #d9d9d9; box-shadow: inset 0px -3px 3px 0px rgba(122, 124, 125, 0.2)} .phoneMockup.gray b{} .phoneMockup.gray .gauge{--color: #aaa; background: radial-gradient(var(--background) 0 var(--cutout), transparent var(--cutout) 100%), conic-gradient(from -135deg, var(--color) calc(270deg*var(--value)), #D9D9D9 calc(270deg*var(--value)) 270deg, transparent 270deg)} [data-theme="dark"] .phoneMockup.gray .gauge{ background: radial-gradient(#242628 0 var(--cutout), transparent var(--cutout) 100%), conic-gradient(from -135deg, var(--color) calc(270deg*var(--value)), #484848 calc(270deg*var(--value)) 270deg, transparent 270deg); --color: #578655; color: #8DC28C;} /*css for phone mockup*/ .phoneMockup { position: relative; width: 100%; height: 98%; min-height: 400px; background-color: var(--contentSectinoBg); margin: 0 auto; border-radius: 5px; box-shadow: 0px 0px 0px 11px #c7dceb, 0px 0px 0px 13px #cbe0ee, 0px 0px 0px 20px #e5f3fd} [data-theme="dark"] .phoneMockup{background: #242628; box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #313337} .phoneMockup:after, .phoneMockup:before{ content: ''; position: absolute; left: 50%; transform: translateX(-50%);} .phoneMockup:before{top: -13px; width: 56%; height: 22px; background-color: #c7dceb; border-radius: 0px 0px 40px 40px;} [data-theme="dark"] .phoneMockup:before{background:#1f1f1f } .phoneMockup i, .phoneMockup b { position: absolute; display: block; color: transparent;} .phoneMockup i { top: -13px; left: 50%; transform: translate(-50%, 6px); height: 8px; width: 15%; background-color: #f0f9ff; border-radius: 8px; box-shadow:inset 0px -3px 3px 0px rgba(17, 92, 172, 0.2) } [data-theme="dark"] .phoneMockup i{background:var(--contentSectinoBg); box-shadow:inset 0px -3px 3px 0px rgba(256, 256, 256, 0.2)} .phoneMockup b { left: 63%; top: -13px; transform: translate(0px, 4px); width: 12px; height: 12px; background-color: #101010; border-radius: 12px; box-shadow: inset 0px -3px 2px 0px rgba(256, 256, 256, 0.2);} .phoneMockup b:after{content: ''; position: absolute; background-color: #2d4d76; width: 6px; height: 6px; top: 2px; left: 2px; top: 3px; left: 3px; display: block; border-radius: 4px; box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);} [data-theme="light"] .phoneMockup b {background:#97b7ce} [data-theme="light"] .phoneMockup b:after {background: #aed1ff; box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5)} .liveCallDashboardSectin .phoneMockup b::after{background: #2d763c} [data-theme="light"] .liveCallDashboardSectin .phoneMockup b {background: #6b9d77} .keytitle{ color: var(--textDLight); text-align: center; font-size: 15px;} .keychartSection { display: block; width: 90%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; height: calc(100% - 32px); justify-content: center; align-items: center;} .keychartsblock {display: inline-block; width: 32%; text-align: center; vertical-align: top;} .gauge { --size: 60px; --cutout: 55%; --color: #A1B9C8; --background: var(--contentSectinoBg); width:var(--size); height:var(--size); border-radius:calc(var(--size) / 2); background: radial-gradient(var(--background) 0 var(--cutout), transparent var(--cutout) 100%), conic-gradient(from -135deg, var(--color) calc(270deg*var(--value)), #C6D5E0 calc(270deg*var(--value)) 270deg, transparent 270deg); text-align: center; line-height: var(--size); display: inline-block; color: #2EB72B; font-size: 14px;} [data-theme="dark"] .gauge{ background: radial-gradient(#242628 0 var(--cutout), transparent var(--cutout) 100%), conic-gradient(from -135deg, var(--color) calc(270deg*var(--value)), #484848 calc(270deg*var(--value)) 270deg, transparent 270deg); --color: #8DC28C; color: #8DC28C;} .keyValue{font-size: 13px; color: var(--textGray);} /*css for phone mockup*/ .data_loading_progress_sec{margin-top: -8px; margin-left: 0px;} .db_bx_ico{ position: absolute; font-size: 13px; top: 4px; left:4px;} .lg_state_66{width:20px; height: 20px; } .data_loading_progress_sec{position: relative; color: var(--textGray); 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;} .loadingkanban .spinner {height: 20px;width: 20px; border-radius: 50%;} /* Spinner 2 */ .loadingkanban .spinner--2 {border: 2px solid var(--BorderColor2); border-top-color: #534FCC;animation: spinner2 1000ms linear infinite;} @keyframes spinner2 { to { transform: rotate(360deg); } } /*css for dashboard list page*/ .dashboardListTbl table tr td.agentDetail{width: auto;} .dbdefaultTag {background: #007bff5c; padding: .15em .4em; color: var(--textdark2); border-radius: 4px; display: inline-block; vertical-align: middle; line-height: normal; font-size: 12px; margin-left: 4px;} .dbSystemTag{background: #ffaa075c; padding: .15em .4em; color: var(--textdark2); border-radius: 4px; display: inline-block; vertical-align: middle; line-height: normal; font-size: 12px; margin-left: 4px;} /*css for dashboard list page*/ /*css for dynamic dashboard*/ /*create visulation for dynamic dashboard*/ .queryFiterDroddown{background: var(--cardBg); border-radius: 6px; top: 8px!important; min-width: 660px!important; border: solid 1px var(--BorderColor2);} .queryFiterDroddown:after{width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--cardBg); position: absolute; top: -8px; left: 25px; content: "";} .queryFiterDroddown:before{width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid var(--BorderColor2); position: absolute; top: -10px; left: 25px; content: "";} .queryFiterDroddown h5 { font-size: 16px; font-weight: normal; color: var(--blackMedium); padding: 10px 15px 15px; border-bottom: solid 1px var(--sparatorBorder);} .queryField { padding: 10px 15px; display: block;} .queryField label {color: var(--blackMedium); font-size: 15px; margin-bottom: 5px;} .queryInput { background: var(--formControlBg); border: none; color: var(--formControlText); border-radius: 6px; font-size: 15px;} .queryInput:hover, .queryInput:focus{background:var(--formControlBg) ; border: solid 1px none; color: var(--formControlText);} .queryInput:disabled{background: var(--formControlBg); cursor: not-allowed;} .queryFilterRow{display: block; padding: 10px 10px;} .queryFilterRow ul{list-style: none; margin: 0px; padding: 0px;} .queryFilterRow ul li{display: inline-block; width: 100%; padding: 10px; background: var(--lightGrayBg); border-radius: 5px; margin-bottom: 5px;} .queryFilterRow ul li .queryInput{ height:inherit; font-size:13px; } .queryFilterRow ul li .queryBtn{background: none; border: none; color: #999; margin-left: 3px; font-size: 13px; margin-top: 4px;} .queryFilterRow ul li .queryBtn.text-primary-light{color: #b07931 } .orQueryindicator{ padding:4px 0px; position: relative;} .orQueryindicator:after{position: absolute; left: 0px; top: 16px; background: var(--BorderColor2); height: 1px; width: 100%; content: "";} .orQueryindicator span{position: relative; z-index: 1; background: var(--lightGrayBg); color:#9b9b9b; display: inline-block; padding: 0px 5px; margin-left: 10px; font-size: 13px;} .andQueryindicator{ padding:4px 0px; position: relative;} .andQueryindicator:after{position: absolute; left: 0px; top: 16px; background: var(--gray200); height: 1px; width: 100%; content: "";} .andQueryindicator span{position: relative; z-index: 1; background: var(--cardBg); color:#9b9b9b; display: inline-block; padding: 0px 5px; margin-left: 15px; font-size: 13px;} .VisPreviewColumn{ padding: 10px; margin-top: -10px;} .VisSettingColumn{max-width: 450px; width: 450px; min-height: calc(100vh - 130px); background: var(--cardBg); padding: 20px; border-radius: 10px; overflow: auto; border: solid 1px var(--filterBorderColor); position: relative; overflow-x: hidden;} .VisPreviewColumn .PreviewBox{ width:100%; height:calc(100% + 10px); border:dashed 1px #aaa; border-radius:10px; display:flex; justify-content:center; align-items:start; padding:25px; } [data-theme="dark"] .VisPreviewColumn .PreviewBox{border-color: #666} .VisPreviewColumn .PreviewBox .midSection{max-width: 600px; width: 100%; height: 100%; max-height: 600px; min-height: 420px; overflow: visible;} .VisPreviewColumn .PreviewBox .midSection .widgetTableSec{max-height: 500px; overflow: auto} .VisPreviewColumn .PreviewBox .midSection .widgetBox{height: 100%; overflow: visible;} .VisPreviewColumn .PreviewBox .midSection .widgetBox .chartBox{overflow: visible; min-height: 380px;} .VisSettingColumn .form-group{margin-bottom: 10px;} .visuSelect { background: var(--formControlBg); border: 1px solid var(--BorderColor2); color: var(--formControlText); font-size: 14px;} .visuSelect:focus{background: var(--formControlBg); border: 1px solid var(--BorderColor2); color: var(--formControlText); box-shadow: none; outline: none} .titleinput{color: #5f7ef7; border:dashed 1px var(--BorderColor2); font-weight: 500} .VisSettingColumn h5{font-size: 14px; margin-bottom: 10px; color: var(--formControlText);} .verticleAxis{ margin-top:10px; padding:10px; background:var(--gray200); border-radius:5px; } .addfieldbtn { display: block; padding: 5px 10px; margin-bottom: 15px; border: dashed 1px var(--customBtnborder1); font-size: 14px; width: 100%; background: var(--customBtnBg1); border-radius: 6px; color: var(--customBtncolor1); font-weight: 500;} .fieldValue { display: block; margin-bottom: 15px; background: var(--cardBg); font-size: 14px; width: 100%; border-radius: 6px; color: #c19873; font-weight: 500; position: relative;} .valueText { color: var(--AlertprimaryText); display: block; padding: 7px 10px;} .fieldRemoveBtn {position: absolute; right: 10px; top: 5px; background: none; border: none; color: #d87878;} h3.visuHeading{ font-size: 18px; font-weight: normal; color: var(--titletext); display: inline-block; margin-bottom: 0px; } .fieldFormSidebar { position: absolute; top: 0px; right: -550px; width: 100%; height: 100%; padding:10px 10px 20px; background: var(--cardBg); transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; z-index: 1; padding: 20px; border-radius: 10px; visibility:hidden; } .fieldFormSidebar.show{ right: 1px!important; z-index: 4; visibility: visible;} .fieldFormSidebar .closeBtn{ font-size: 15px; cursor: pointer; margin-right:0px; background: var(--lightGrayBg); padding: 4px 10px; line-height: normal; border-radius: 4px; color: var(--textGray); border:none; position: absolute; right: 10px; top: 0px;} .fieldFormSidebar hr{border-color: var(--sparatorBorder); margin-left:-10px; margin-right:-10px; } .fieldFormSidebar h5{color: var(--formControlText); font-size: 14px; font-weight: normal; margin-bottom: 10px; } .functionlist{list-style: none; margin: 0px; padding: 0px 0px 0px 10px; display: inline-block; width: 100%;} .functionlist li{display: inline-block; width: 50%; float: left; margin-bottom: 3px; } .functionlist li button{background: none; border:none; font-size: 14px; font-weight: 500; color: var(--AlertprimaryText); width: 100%; text-align: left; padding:4px 10px; border-radius: 5px; padding-left: 25px; position: relative;} [data-theme="dark"] .functionlist li button{color: #da9f7c} [data-theme="dark"] .functionlist li button:hover{background: var(--AlertwarningBg);} [data-theme="dark"] .functionlist li.active button{background: var(--AlertwarningBg);} .functionlist li button:hover{background: var(--chipBg);} .functionlist li.active button{background: var(--chipBg); } .functionlist li.active button:after{ position:absolute; left:7px; content:"\F272"; top :6px; font-family: bootstrap-icons;} .fieldLabel{color: var(--textblack7); font-size: 14px; font-weight: 500; margin-bottom: 0px;} .VisSettingColumn .btn-group .btn-secondary{ font-size:13px; background:var(--lightGrayBg); border-color:var(--BorderColor2); color:var(--formControlText); } .VisSettingColumn .btn-group .btn-secondary.active, .VisSettingColumn .btn-group .btn-secondary:focus{background: var(--chipBg); box-shadow: none; border-color:var(--BorderColor2); color:var(--formControlText); } .VisStyleColumn{max-width: 300px;} .styleSection{width: 100%; height: 100%; background: var(--cardBg); padding: 15px; border-radius: 10px; border: solid 1px var(--filterBorderColor);} .styleSection hr{margin: 10px -15px; border-width: 2px;} .styleSection .optList{ display:block; margin-top:10px; max-height: 75vh; overflow: auto; margin: 0px -15px} .styleSection .optList ul{list-style: none; margin: 0px; padding: 0px 15px;} .styleSection .optList ul li{display: block; border-bottom: dashed 1px var(--BorderColor2); padding: 8px 0px;} .styleSection .optList ul li:last-child{border-bottom: none} .styleSection .optList ul li .fieldLabel{color: var(--textdark2); font-size: 13px; font-weight: 400; margin-bottom: 5px; display: block;} .styleSection .optList ul li .form-control{ background:var(--formControlBg); color:var(--formControlText); border-radius:6px; border:none; outline:none; font-size: 14px; height: auto;} .styleSection .optList ul li textarea.form-control.lg{height: 150px;} .styleSection .optList ul li .btn-group .btn-secondary{ font-size:13px; background:var(--lightGrayBg); border-color:var(--BorderColor2); color:var(--formControlText); } .styleSection .optList ul li .btn-group .btn-secondary.active{background: var(--chipBg); box-shadow: none;} .styleSection .optList ul li .custom-control-label{ font-size:12px; color:var(--textGray); } .optList.dynamicOptn .visuHeading {padding: 0px 15px} .themeRadio div { display: inline-block;} .themeRadio input[type=radio] { display: none;} .themeRadio input[type=radio] + label { color: #333; font-size: 12px;} .themeRadio input[type=radio] + label span {display: inline-block; width: 25px; height: 25px; margin: -1px 4px 0 0;vertical-align: middle;cursor: pointer;border-radius: 50%; border: 1px solid #ffffff; background-repeat: no-repeat; background-position: center; text-align: center; line-height: 25px; color: var(--text-dark);} .themeRadio input[type=radio] + label span i { opacity: 0; transition: all 0.3s ease;} .themeRadio input[type=radio]#defaultBg + label span { background-color: var(--cardBg); border-color: var(--sparatorBorder);} .themeRadio input[type=radio]#highlightBg + label span { background-color: var(--tableHighlightBg); border-color:var(--tableHighlightborder)} .themeRadio input[type=radio]#transparentBg + label span { background: url(../images/tranparentBgIcon.jpg); background-size: 40px; color: #333;} .themeRadio input[type=radio]:checked + label span i { opacity: 1;} .richText{display: flex; flex-direction: row; justify-content: center; width: 100%; height: 100%; align-items: center;} .richText span{display: contents; font-weight: 500; } .widgetBox:has(.richText){border-color: transparent; } .widgetBox:has(.richText) .widgetHeading{padding-bottom: 0px;} .widgetBox:has(.richText) .chartBox {height: 100%;} .spacerBLock{width: 100%; height: 100%; border:dashed 1px var(--BorderColor2); border-radius: 10px; position: relative; display: flex; align-items: center;} .spacerBLock:after{position: absolute; width: 100%; text-align: center; content: "Spacer"; font-size: 20px; font-weight: 300; color: var(--textDisbaled);} .widgetBox:has(.spacerBLock) .widgetHeading{padding-bottom: 0px; border: none; margin: 0px;} .widgetBox:has(.spacerBLock) .chartBox {height: 100%;} .widgetBox:has(.spacerBLock){padding: 0px;} .widgetBox:has(.phoneMockup) .chartBox {max-height: 100%!important;} /*create visulation for dynamic dashboard*/ /* css for contact list section*/ .labelTitle{font-size: 17px; color: var(--textblack7);} .dndoptnli li{margin-bottom: -1px; border-radius: 0px;} .dndoptnli li:first-child{border-radius: 5px 0px;} .dndoptnli li:last-child{border-radius: 0px 5px;} .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: var(--gray200); border: solid 1px var(--sparatorBorder);} .segment_action_block li p{margin-bottom: 0px;} .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: var(--cardBg); } .custom_field_create ul li:nth-child(odd){ background: var(--gray200); } .customFieldList .lastRow td{border-bottom: 2px solid var(--Alertwarning-border)!important;} .customFieldList .reserved-row td{ background-color:var(--contentSectinoBg) } .customFieldList .fieldName{font-size: 15px; color: var(--textdark2); display: inline-block; width: 160px;} .customFieldList .reserved-row .fieldName{color: var(--textmBlue);} .FieldoptionList{ list-style:none; margin:0px; padding:0px; } .FieldoptionList li{display: block; font-size: 16px; margin-top: 5px; position: relative; background: var(--gray200); padding: 5px 10px; border-radius: 5px;} .FieldoptionList li .changeOptionValue{width: 90%; display: inline-block;} .FieldoptionList li:has(.changeOptionValue){padding: 0px; background: none} .delete_option_nk{position: absolute; right: 0px; top: 0px; color: #ee6969; cursor: pointer; background: #ee69692e; display: inline-block; width: 35px; height: 100%; vertical-align: top; border-radius: 5px; text-align: center; line-height: 38px;} /* css for contact list section*/ /*css for manage pages*/ .default_audio_playar{width: 220px; background: burlywood; border-radius: 30px; height: 35px;} .fullScreenModal .modal-dialog{ max-width: 100%; margin: 0; top: 0; bottom: 0; left: 0; right: 0; height: 100vh; display: flex; position: fixed; z-index: 100000;} .fullScreenModal .close{margin-top: 0px!important; margin-right: 10px!important;} .fullScreenModal .modal-body{max-height: inherit; overflow: inherit;} .businessNumberTbl .ivrActionBtn{opacity: 0} .businessNumberTbl table tbody tr:hover .ivrActionBtn{opacity: 1} .box_radio_button .custom-radio {padding-left: 0px;} .box_radio_button .custom-radio label{border:solid 1px var(--BorderColor2); border-radius: 5px; width: 100%; padding: 10px; padding-left: 35px; background: var(--gray100); cursor: pointer; word-break: break-all; } .box_radio_button .custom-radio label:before{left: 0.5rem; top: 0.9rem} .box_radio_button .custom-radio label:after{left: 0.5rem; top: 0.9rem} .box_radio_button .custom-control-input:checked ~ .custom-control-label{background: var(--customBtnBg2); border-color: var(--customBtnborder2);} /*css for other pages in manage*/ .webhook_url_bx { padding: 2px 10px; font-size: 12px; border-radius: 5px; color: var(--blackMedium); word-break: break-all; max-width: 300px; background: var(--chipBg); display: block;} .repoponseBox{ padding: 2px 10px; font-size: 12px; border-radius: 5px; color: var(--blackMedium); word-break: break-all; max-width: 300px; background: var(--chipBg2); display: block;} .status_failed { color: #cb4445;} .failed_reson_webhk {color: #c48586; font-size: 11px;} /*css for other pages in manage*/ .map_contct_tab{border-bottom: none} .map_contct_tab .nav-item .nav-link { cursor: pointer; background:transparent;font-size: 14px;color: var(--textGray); margin-right: 5px; border-color: var(--tableBorder) var(--tableBorder) transparent; padding: 5px 10px} .map_contct_tab .nav-item .nav-link.active {background: var(--thBg); color: var(--text-dark); border-color: var(--commonBorderColor) var(--commonBorderColor) transparent; font-weight: 400; } .map_contct_tab .nav-item .nav-link:hover, .map_contct_tab .nav-item .nav-link:focus{border-color: var(--commonBorderColor) var(--commonBorderColor) transparent;} .linkContactListTable table tr td{padding-top: 8px!important; padding-bottom:8px!important} .linkContactListTable .campaignField a{font-size: 15px; color: var(--textdark2);} .linkContactListTable .campaignField a font{color: var(--textID); font-size: 12px; vertical-align: middle; display: inline-block; min-width: 40px;} .linkContactListTable .contactListName a{font-size: 14px; color: var(--textmBlue);} .linkContactListTable .contactListName a font{color: var(--textID); font-size: 12px; vertical-align: middle; display: inline-block; min-width: 30px;} .rightside_extrainfo_Section { background: #E1E1F9; max-width: 320px; min-height: calc(100vh - 46px); height: 100%; border-left: solid 1px var(--header-border); top: 46px; position: sticky; right: 0px; padding-top:15px; } .rightside_extrainfo_Section h4{color: var(--titletext)} [data-theme="dark"] .rightside_extrainfo_Section{background: #141618; border-color: #eeeeee1f; } .rightSideInfoBox{ background: var(--tableBg); max-width: 320px; min-height: calc(100vh - 46px); height: 100%; border-left: solid 1px var(--BorderColor2); top: 46px; position: sticky; right: 0px; padding-top:15px; } .rightSideInfoBox h4{color: var(--titletext)} .actionBodyTab{border-bottom: solid 1px var(--sparatorBorder);} .actionBodyTab .nav-link{ color:var(--textGray); } .actionBodyTab .nav-link:hover{border-color:var(--sparatorBorder); } .actionBodyTab .nav-link.active{ color:var(--textmBlue); background:var(--tableBg); border-color:var(--sparatorBorder) var(--sparatorBorder) var(--tableBg); } .actionBodyTabContent {border:solid 1px var(--sparatorBorder); border-top: 0px; padding: 15px;} .response_tab{margin-bottom: 10px;} .response_tab .nav-link{font-size: 12px; margin-right: 5px; border-radius: 5px; background: var(--chipLightBg); color: var(--customBtncolor1); font-size: 14px; padding: 5px 10px;} .response_tab .nav-link.active{background: var(--chipBg); border-color: var(--customBtnborder1); color: var(--customBtncolor1)} .saveActionBtnDiv{max-width: 80%; margin: 0 auto} @media only screen and (max-width: 1500px) { .saveActionBtnDiv { max-width: 100%; } } /*css for manage pages*/ /*css for api generation pages*/ .api_gen_form{max-width: 90%; margin: 0 auto;} .api_gen_form .form-group .frm-label{margin-bottom: 0px; margin-top: 5px; font-size: 15px; display:block; color:var(--blackMedium) } .api_gen_form .form-group .form-control {border:solid 1px var(--sparatorBorder); background: var(--formControlBg); display: inline-block; width: 90%; color: var(--formControlText); font-size: 13px;} .api_gen_form .form-group .form-control:disabled{color: var(--textDisbaled);} .api_gen_form .form-group .form-control::-webkit-input-placeholder {font-size: 13px; } .api_gen_form .form-group .form-control:-ms-input-placeholder {font-size: 13px;} .api_gen_form .form-group .form-control::placeholder {font-size: 13px;} .api_gen_form .form-group .form-control:disabled::placeholder{color: var(--textDisbaled);} .field_info_btn{color: #666; margin-left: 5px; font-size: 15px; padding: 0px; border: none; outline: none; background: transparent;} .xd_indicator {background: var(--chipBg); float: right; margin-left: 10px; padding: 2px 7px; border-radius: 5px; font-size: 12px; color: var(--textblack7)} .api_gen_form .clps_btn_fld{ margin-left: -29px; margin-right: 5px; color: var(--textmBlue); display: inline-block; width: 20px; height: 20px; border-radius: 4px; background: var(--chipBg2); text-align: center;} .api_gen_form .clps_btn_fld.collapsed{color: #818284;} .api_gen_form .clps_btn_fld.collapsed .fa-chevron-up:before{content: "\f078"} .api_gen_form .sub_option .frm-label{ padding-left: 25px;} .api_gen_form .sub_option .xd_indicator{ padding: 0px 7px;} .api_field_info_modal .cmplsry_tag_5{float: none} .api_code_Section .nav-tabs { border-bottom: solid 1px var(--sparatorBorder); border-top: solid 1px var(--sparatorBorder);} .api_code_Section .nav-tabs .nav-link { border-radius: 0px; color:var(--textblack7); font-size: 13px; border: none; border-bottom: solid 2px transparent;} .api_code_Section .nav-tabs .nav-link.active { background: var(--customBtnBg1); color: var(--customBtncolor1); border-bottom-color: #EA9108;} .api_code_Section .tab-content{padding: 40px 10px 10px; position: relative;} .copy2clip_btn { position: absolute; right: 10px; top: 10px; padding: 4px 8px;} .hljs{border-radius: 10px; max-height: calc(100vh - 200px); min-height: 400px; overflow: auto;} @media only screen and (max-width: 1450px) { .apiSection .pagetitle {font-size: 22px;} .api_gen_form .form-group .frm-label{ margin-bottom: 10px;} .api_gen_form .form-group .frm-label font{display: inline-block; width: 150px; } .xd_indicator{float: none} .api_gen_form .form-group .row .col-md-4, .api_gen_form .form-group .row .col-md-8{ width:100%; max-width:100%; flex:0 0 100% } } /*css for api generation pages*/ /*css for broadcast campaign Pages*/ .broadcastList .campaignDetail .BCampName font{font-size: 13px; color: var(--textGray); vertical-align: middle; display: inline-block; width: 55px;} .broadcastList .campaignDetail .BCampName span{font-size: 15px; color: var(--blackMedium); max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: middle; text-transform: capitalize;} .broadcastList .campaignDetail .createDate{font-size: 12px; padding-left: 57px; padding-top: 5px; color: var(--textGray);} @media only screen and (max-width: 1300px){ .broadcastList .campaignDetail .BCampName font{width: auto;} .broadcastList .campaignDetail .createDate{padding-left: 0px;} .broadcastList .campaignDetail div.pl-5{padding-left: 0px!important} } .reportSection{width: 400px;} .reportSection span { width: 100%; display: inline-block; font-size: 13px;} .reportSection span font { float: right;} .reportSection .brdr_right { border-right: dashed 1px var(--BorderColor2);} .ttl_conacts_dtl .badge { font-weight: 500; width: 80px; font-size: 11px; background: var(--lightGrayBg); color: var(--textblack7);} .campign_running_action { display: block; padding-top: 10px; text-align: left; padding-left: 25px;} .camapgin_calling_dtail_popup{width: 300px; padding: 5px; background: var(--dropdownBg); box-shadow: 0px 0px 15px -3px #00000057} .camapgin_calling_dtail_popup table tr th {font-weight: normal; font-size: 12px ; padding: 5px; color: var(--th-text-color); border-top: none; border-bottom: solid 1px var(--tableBorder) ; background: var(--thBg); } .camapgin_calling_dtail_popup table tr td{color:var(--tdTextcolor) ; border-top: solid 1px var(--tdborderColor)} .apiBlockSection{padding: 10px; background: var(--gray200); border-radius: 10px; height: 100%;} .apiBlockSection .nav-tabs { border-bottom: solid 1px var(--BorderColor2); border-top: solid 1px var(--BorderColor2); background: var(--gray100);} .apiBlockSection .nav-tabs .nav-link {border-radius: 0px; color: var(--textblack7); font-size: 13px; border: none; border-bottom: solid 2px transparent;} .apiBlockSection .nav-tabs .nav-link.active {background: var(--chipBg2); color: var(--text-dark); border-bottom-color: #EA9108;} .apiBlockSection textarea{min-height: 300px;} /*create broadcast campaign*/ .section_bx{ width: 100%; background: var(--tableBg); padding: 25px; border-radius: 10px; box-shadow: 0px 1px 4px 0px rgba(133, 146, 173, 0.2);} .campaign_title_inputbx{display: block; width: 100%; padding: 9px 10px 9px 10px; background: var(--formControlBg); color: var(--formControlText); font-size: 18px; border: dashed 1px var(--BorderColor2); border-radius: 4px;} .section_bx h3{font-size: 17px; font-weight: normal; border-bottom: solid 1px var(--sparatorBorder); padding-bottom: 15px; margin-bottom: 15px;color: var(--textmBlue);} .section_bx .field_row .field_title{ display: block; color: var(--obdFormLabelColor); font-size: 15px; margin-bottom: 5px; font-weight: 500} .section_bx .field_row .form-control{/*background: #424242;*/ background: var(--formControlBg); color: var(--formControlText); border:none; font-size: 15px; height: inherit; padding: 8px 10px; border-radius: 5px;} .section_bx .custom-range::-moz-range-track{background-color: var(--formControlBg); height: 15px;} .custom-range::-moz-range-thumb{height: 25px; width: 25px;} .section_bx .custom-range::-webkit-slider-runnable-track{background-color: var(--formControlBg); height: 15px;} .section_bx .custom-range::-webkit-slider-thumb{width: 25px; height: 25px;} .section_bx .custom-range::-ms-track{ background: var(--formControlBg); border-color: transparent; color: transparent;} .section_bx .select2-container{width: 100%!important;} .section_bx .select2-container--default .select2-selection--multiple{background-color: var(--formControlBg)!important; border-radius: 5px!important; border:none!important; } .section_bx .select2-container--default .select2-selection--multiple .select2-selection__choice{background: var(--chipBg) ; color:var(--formControlText) !important; border: none !important; font-size: 13px; } .section_bx .select2-container--default .select2-selection--multiple .select2-selection__rendered{margin-top: 4px;} .section_bx .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-left: 10px; float: right;} .section_bx .select2-container--default .select2-search--inline .select2-search__field{font-size: 15px;} .section_bx .select2-container--default .select2-selection--single{background-color: var(--formControlBg)!important; border-radius: 5px!important; border:none!important; height: 38px;} .select2-container--default .select2-search--dropdown .select2-search__field{border-color: var(--sparatorBorder); background: var(--gray200); color: var(--textDLight);} .select2-container--default .select2-search--dropdown .select2-search__field:hover, .select2-container--default .select2-search--dropdown .select2-search__field:focus{outline: none; box-shadow: none;} .section_bx .select2-container--default .select2-selection--single .select2-selection__rendered{font-size: 15px; color: var(--formControlText); line-height: 38px;} .select2-container--default .select2-selection--single .select2-selection__arrow{height: 36px;} .chooseIvrColumn .select2-container{width: 90%!important} .brdCampngWeekdays{ margin:0px; padding:0px; list-style:none; width:100%; display:inline-block} .brdCampngWeekdays li{ display:inline-block; width:13%; overflow:hidden} .brdCampngWeekdays li input[type="checkbox"]{ position:absolute; left:-9999px; ;} .brdCampngWeekdays li label{ background:var(--lightGrayBg); color: var(--textLight2); width:95%; height:25px; border-radius:2px; transition: all .2s; line-height:23px; text-align:center; font-size:14px!important; cursor:pointer; font-weight:normal; margin-bottom: 0px;} .brdCampngWeekdays li input[type="checkbox"]:checked + label{ background:var(--chipBg); color:var(--textblack7); } .section_bx .input-group-text{color: #868686; border: 1px solid var(--BorderColor2); background-color: var(--lightGrayBg); border-radius: 0px 4px 4px 0px!important;} .section_bx .custom-control-label{font-size: 13px;} .advance_option_section{background: var(--gray100); padding: 20px; border-radius: 5px;} .advance_option_section .field_row .form-control, .advance_option_section .select2-container--default .select2-selection--multiple {background:#eee;} [data-theme="dark"] .advance_option_section .field_row .form-control {background:#333;} [data-theme="dark"] .advance_option_section .select2-container--default .select2-selection--multiple {background:#333;} .advance_option_btn.collapsed .fa-minus-circle:before{content: "\f055";} .section_bx .field_row{margin-bottom: 40px;} .groupselect optgroup[label]{ color: #a37329;} .slectedIvrDetailbx{background: var(--gray100); max-height: 300px; overflow: auto; min-height: 200px; margin-top: 10px; padding:15px; border:solid 1px var(--tableBorder); } .slectedIvrDetailbx h4{color: var(--textGray) ; font-size: 16px; font-weight: normal;} .slectedIvrDetailbx h4 font{color: goldenrod} .slectedIvrDetailbx .ivrDtltble tr th{color: var(--th-text-color); font-weight: normal; border-top-color: var(--tdborderColor); padding: 5px; background: var(--thBg); font-size: 13px;} .slectedIvrDetailbx .ivrDtltble tr td{font-size: 13px; color: var(--tdTextcolor); background: var(--tdBg); padding: 5px; border-top: solid 1px var(--tdborderColor);} .slectedIvrDetailbx .ivrDtltble tr td .imodulename{color: #7699d0} .retry_Sec{display: block; border: dashed 1px var(--BorderColor2); padding: 10px; border-radius: 5px; margin-bottom: 10px;} .retry_block{display: inline-block; width: 100%; border-bottom: solid 1px var(--sparatorBorder); padding: 10px; margin-bottom: 10px; } .retry_block:last-child{border-bottom: none; margin-bottom: 0px;} .retry_label{color: var(--blackMedium); font-size: 14px; margin-right: 20px; margin-bottom: 0px; display: block;} /*create broadcast campaign*/ /*css for broadcast campaign Pages*/ /*css for setting pages*/ .midSectionBlock{width: 100%; background: var(--cardBg); padding: 25px; border:solid 1px var(--BorderColor2); border-radius: 10px; min-height: 600px; margin-bottom: 25px;} .instructionBlock{background: var(--themeLightBg); padding:15px; border-radius: 10px; position: sticky; top:60px} .instructionBlock .heading{font-size: 18px; font-weight: 400; color: var(--textTheme); margin-bottom: 35px;} .instructionBlock .instr-list { list-style: none; padding: 0; margin: 0; } .instructionBlock .instr-list li { display: flex; gap: 10px; margin-bottom: 25px; align-items: flex-start; } .instructionBlock .instr-list .instr-number { width: 25px; height: 25px; background: var(--cardBg); color: var(--textLight2); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 400; font-size: 12px; flex-shrink: 0; } .instructionBlock .instr-list .instr-text { font-size: 13px; color: var(--textGray); line-height: 1.6; } .instructionBlock .instr-list .instr-text strong { color: var(--textTheme); font-weight: 500; } .InstructionBox{padding-left: 15px; height: 100%; border-left: solid 1px var(--sparatorBorder);} .InstructionBox h3{font-size: 16px; font-family: Comfortaa; margin-bottom: 15px;} .InstructionBox ul{list-style: conic-gradient; margin: 0px; padding: 0px; padding-left: 20px;} .InstructionBox ul li{font-size: 14px; margin-bottom: 10px; color: var(--textGray); position: relative; padding-left: 10px;} .formData .form-label { font-size: 14px; font-weight: 500; color: var(--blackMedium);} .formData .form-control {border-radius: 6px; border: none;background: var(--formControlBg); font-size: 14px; color: var(--formControlText);} .formData .custom-control-label { font-size: 14px; color: var(--formControlText);} .tabData .nav-pills{ background: var(--themeLightBg); padding: 6px; border-radius: 12px; display: inline-flex !important; gap: 4px; margin-bottom: 25px; border: none ; } .tabData .nav-pills .nav-item { margin: 0; } .tabData .nav-pills .nav-link{color: var(--textGray); font-size: 15px; padding: 5px 15px;} .tabData .nav-pills .nav-link.active{background: #fff; border-color:var(--chipBg); color: var(--textTheme) !important} [data-theme="dark"] .tabData .nav-pills .nav-link.active { background:var(--gray100)!important; } .defaultDurationBlock.defaultSec { padding: 15px; background: var(--gray100); border-radius: 4px;} .defaultDurationBlock .wrapupName {font-size: 16px; color: var(--textdark2); display: inline-block; min-width: 92px; } .midSectionBlock .tableSection{margin-left: -25px; margin-right: -25px; } .switchThreeopt { position: relative; width: 80px; padding: 0px; display: inline-block;} .switchThreeopt:before { content: ""; position: absolute; left: 0; top: 2px; width: 100%; height: 16px; background: var(--lightGrayBg); border-radius: 30px;} .switchThreeopt__label { display: inline-block; width: 29%; padding: 5px; text-align: center; cursor: pointer; transition: color 200ms ease-out; margin-bottom: 0px; position:relative; } .switchThreeopt__label:after{position: absolute; width: 5px; height: 5px; background: #686868; content: ""; left: 0px; right: 0px; margin: 0 auto; display: table; top: 2px; border-radius: 6px;} .switchThreeopt__label:hover { color: white;} .switchThreeopt__indicator { width: 24px; height: 24px; position: absolute; top: -3px; left: 0; background: #919291; border-radius: 50%; transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03); transform: translate3d(1rem, 0, 0); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3)} .switchThreeopt input.SwitchOne:checked ~ .switchThreeopt__indicator { background: #DC3545; transform: translate3d(0px, 0, 0);} .switchThreeopt input.SwitchTwo:checked ~ .switchThreeopt__indicator { background:var(--switchToggleHandleBg); transform: translate3d(27px, 0, 0);} .switchThreeopt input.SwitchThree:checked ~ .switchThreeopt__indicator { background: #28A745; transform: translate3d(57px, 0, 0);} .switchThreeopt input[type=radio]:not(:checked), .switchThreeopt input[type=radio]:checked { display: none;} .switchThreeopt input#one:checked + .switchThreeopt:before{background: red!important} .settingTable .table tr td{padding: 10px 8px; background: none} .settingTable .table tr td.setDurationColumn{width: 60%;} .switch-modern { position: relative; display: inline-block; width: 48px; height: 26px; } .switch-modern input { opacity: 0; width: 0; height: 0; } .switch-modern .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 34px; } .switch-modern .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .switch-modern input:checked + .slider { background-color: var(--activeBg); } .switch-modern input:checked + .slider:before { transform: translateX(22px); } /* White checkmark inside the toggle when active */ .switch-modern input:checked + .slider:after { content: '\2713'; position: absolute; left: 10px; top: 3px; color: white; font-size: 12px; font-weight: bold; z-index: 1; } .licenseKeylist{display: block;} .licenseKeylist ul{list-style: none; margin: 0px; padding:0px } .licenseKeylist ul li{display: block; padding: 25px; background: var(--cardBg); margin-bottom: 15px; border-radius: 10px; position: relative; border: solid 1px var(--BorderColor2);} .licenseKeylist .fieldname{font-size: 12px; color: var(--textID); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px} .licenseKeylist .keydata{ background: var(--formControlBg); border-radius: 10px; padding: 12px 20px; font-family: monospace; font-size: 15px; color: var(--formControlText); letter-spacing: 0.2px; word-break: break-all; letter-spacing: 3px; border: dashed 1px var(--BorderColor2); display: block} .licenseKeylist .otherdetail{font-size: 15px; color: var(--textdark2); display: block; padding-top: 4px;} .licenseKeylist .keyStatus{position: absolute; right: 80px; bottom: 45px;} .licenseKeylist .status_expired{background: #4f4e4e1c; color: var(--textDLight); border-color: var(--sparatorBorder);} .SettingsCard { background: var(--cardBg); border: 1px solid var(--BorderColor2); border-radius: 10px; padding: 20px 30px; margin-bottom: 15px; } .global-header { display: flex; justify-content: space-between; align-items: center; } .global-title h4 { font-size: 16px; font-weight: 500; color: var(--textTheme); margin-bottom: 4px; } .global-title p { color: var(--textID); font-size: 14px; margin-bottom: 0; font-weight: 400; } .global-toggle-box { background: var(--cardBg); padding: 12px 30px; border-radius: 10px; border: 1px solid var(--sparatorBorder); display: flex; align-items: center; gap: 25px; } .toggle-label { font-size: 14px; font-weight: 500; color: var(--textdark2); } .settings-table-card { background: var(--cardBg); border: 1px solid var(--BorderColor2); border-radius: 10px; overflow: hidden; } .table-header-modern { padding: 14px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--sparatorBorder); } .table-header-modern h5 { font-size: 16px; font-weight: 400; color: var(--textdark2); margin-bottom: 0; } /* Custom Table Header */ .table-sub-header { display: flex; padding: 15px 30px; background: var(--cardBg); border-bottom: 1px solid var(--sparatorBorder); } .col-label { font-size: 11px; font-weight: 400; color: var(--textID); text-transform: uppercase; letter-spacing: 0.5px; } /* Rows */ .ans-row-item { display: flex; padding: 10px 30px; align-items: center; border-bottom: 1px solid var(--borderLight); transition: background 0.2s; } .ans-row-item:last-chiild { border-bottom:none } .ans-row-item:hover { background: var(--gray100); } .num-box { display: flex; align-items: center; gap: 15px; flex: 1; } .phone-icon-circle { width: 30px; height: 30px; background: var(--subSidebarhoverbg); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--textTheme); font-size: 14px; } .num-text { font-size: 15px; font-weight: 500; color: var(--textdark2); } /* Segmented 3-State Toggle */ .segmented-control { display: flex; background: var(--themeLightBg); padding: 3px; border-radius: 20px; width: 140px; position: relative; } .seg-btn { flex: 1; text-align: center; padding: 5px 0; font-size: 11px; font-weight: 500; color: #64748B; cursor: pointer; border-radius: 20px; position: relative; z-index: 2; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.5px; } .seg-btn.active { color: #FFFFFF; } .seg-indicator { position: absolute; top: 3.5px; left: 3px; width: 44px; height: calc(100% - 7px); background: var(--activeBg); border-radius: 20px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } /* State Moves */ .segmented-control[data-state="0"] .seg-indicator { left: 4px; } .segmented-control[data-state="default"] .seg-indicator { left: 48px; } .segmented-control[data-state="1"] .seg-indicator { left: 93px; } /* Action Footer */ .SettingActionBAr { margin-top: 30px; padding-bottom: 30px; display: flex; justify-content: flex-end; align-items: center; gap: 15px; } .infoBoxBottom{padding: 20px; background: var(--themeLightBg); border:solid 1px var(--highlightCountBg); border-radius:10px; display: flex; gap: 10px; font-size: 13px; color: var(--textGray); } .infoBoxBottom p{margin-bottom: 0px; } .EmailnotificationSetting h3{font-size: 16px; font-weight: 400; color: var(--textTheme); margin-bottom: 15px;} .noti_desc_row {max-width: 80%; font-size: 13px; padding-top: 3px; margin-bottom: 5px; color: var(--textLight2);} .inline_input_bx { display: inline-block; width: 250px; margin-top: 5px;} .inline_input_bx input, .EmailnotificationSetting .form-control { background: var(--formControlBg); border-radius: 0px; padding: 5px 8px; border: none; border-radius: 6px; color: var(--formControlText); font-size: 14px; width: 100%;} .inline_input_bx input:focus{box-shadow: none; border:none; outline: none} .EmailnotificationSetting .form-group{border-bottom: dashed 1px var(--BorderColor2); padding-bottom: 15px;} .EmailnotificationSetting .chip3{background: var(--statusyellowBg); color: var(--statusyellowtext)} .timeSelectionfield{border: dashed 1px var(--BorderColor2); padding: 20px; border-radius: 4px;} .selectComunButton9{ background: var(--formControlBg); color: var(--formControlText); font-size: 14px; border:none; border-radius: 6px; padding: .375rem .75rem; height: calc(1.5em + .75rem + 2px)} .mainField{font-size: 13px; margin-left: 12px; margin-bottom: 5px; color: var(--textDLight); font-weight: normal;} .imgCustomRadio input[type="radio"] { display: none;} .imgCustomRadio label { position: relative; color: #4189e0; cursor: pointer; display: inline-flex; align-items: center; border: 2px solid transparent; padding: 0px; border-radius: 0.5em;} .imgCustomRadio input[type="radio"]:checked + label { border: 2px solid #4189e0; color: #ffffff;} .imgCustomRadio input[type="radio"]:checked + label:after{position: absolute; color: #d9d9d9; background: #4189e0; padding: 2px 16px; font-size: 14px; right: 0; border-radius: 0px 3px 0px 8px; top: 0; content: "Selected"} .imgCustomRadio label img {max-width: 100%; border-radius: 5px;} [data-theme="light"] .imgCustomRadio label img {filter: brightness(.8) invert(1)} [data-theme="light"] .imgCustomRadio input[type="radio"]:checked + label:after {color:#fff} .DurvalueBx { display: inline-block; width: 130px; margin: 0px 5px; padding: 4px 4px; background: var(--themeLightBg); border: solid 1px #ccc; outline: none; border-radius: 4px; line-height: normal;} [data-theme="dark"] .DurvalueBx {border-color: #686868} .DurvalueBx input { background: none; border: none; outline: none; color: var(--textdark2); font-size: 16px; width: 70px; text-align: center;} .DurvalueBx input::placeholder {font-size: 14px;} .DurvalueBx font { color: var(--textLight2); font-size: 13px; text-transform: uppercase;} .recorddeletebtn { background: none; padding: 0px; color: #666; border: none; outline: none; float: right; margin-top: 3px; margin-left: 5px;} .settingTable tr.haserror .DurvalueBx font{color: #e67e7e} .settingTable tr.haserror{background: var(--AlertdangerBg)} .settingTable tr.hasupdated{background: var(--AlertsuccessBg)} .setDurationColumn .DurvalueBx input::placeholder { font-size: 14px;} .windowSettingList .form-group{padding: 5px 10px; background: var(--gray200); border-radius: 5px; margin-bottom: 5px; position: relative;} .windowSettingList .titleSec h2 { display: inline-block; font-size: 16px; color: var(--textmBlue); font-weight: normal;} .windowSettingList .row{ margin: 0; padding: 3px 10px; border-radius: 5px;} .windowSettingList .row:hover{background: var(--lightGrayBg);} .windowSettingList .form-group .basic-btn{background: none; color: var(--textDLight); font-size: 13px; padding: 3px;} .windowSettingList .form-group .basic-btn:hover, .windowSettingList .form-group .basic-btn:focus{color: var(--textblack7); box-shadow: none} .windowSettingList .timeInfo{color: var(--textDLight); font-size:14px; text-align: center;} .windowSettingList .timeInfo font{ color:var(--textLight2); margin: 0px 5px; } .timeInfo span{ display:inline-block; width:70px; } .windowSettingList .dayDtl{font-size: 15px; color: var(--textdark2); } .windowSettingList .dayDtl i{color:var(--textLight2); } .windowSettingList .blockDtlBtn { display: inline-block; background: var(--customBtnBg2); border: none; outline: none; width: 21px; height: 21px; line-height: 20px; border-radius: 4px; text-align: center; color: var(--customBtncolor2); position: absolute; right: 17px; top: 9px; font-size: 12px; border: solid 1px var(--customBtnborder2); padding: 0px; text-align: center;} .seSubSection{position: fixed; bottom: 0px; left:255px; width: calc(100% - 255px); background: var(--contentSectinoBg); padding: 10px; z-index: 1; border-top: solid 1px var(--commonBorderColor)} .seSubSection.createCampSaveBtb{ left: 55px; width: calc(100% - 55px);} .typeRadioSec label.box { width: 100%; background: var(--gray200); padding: 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: all 0.25s ease;} .typeRadioSec label.box.first{background: var(--chipBg3);} .typeRadioSec label.box.second{background: var(--chipBg);} [data-theme="dark"] .typeRadioSec label.box.first{background: #814524} [data-theme="dark"] .typeRadioSec label.box.second{background: #4A5A69} .radioBtn:checked ~ label.box.first{ border-color:#ecacac66 } .radioBtn:checked ~ label.box.second{ border-color:#acb9ec66 } .typeRadioSec label.box .circle { height: 18px; width: 18px; background: #757575; border: 5px solid transparent; display: inline-block; margin-right: 3px; border-radius: 50%; transition: all 0.25s ease; box-shadow: inset -4px -4px 10px rgba(255, 248, 248, 0.87);} .radioBtn:checked ~ label .circle { border-color: #0965c7; background: #eab570;} .typeRadioSec label.box .plan { width: 100%;} .typeRadioSec label.box .plan .labelName{font-size: 20px; color: var(--textdark2); } .typeRadioSec input[type="radio"] { display: none;} .descritionText {display: block; font-size: 14px; color: var(--textDLight); padding: 0px 25px} .dncCreateSec .form-control{border-radius: 6px; border: none; background: var(--formControlBg); font-size: 14px; color: var(--formControlText);} .dncCreateSec .form-control:focus, .dncCreateSec .form-control:hover{box-shadow: none} .dncCreateSec { display: block; padding: 40px; border:solid 1px var(--BorderColor2); border-radius: 7px; margin-top: 25px;} .dncCreateSec { -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%;} .dncCreateSec .frontview, .dncCreateSec .backview { display: block; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .dncCreateSec .backview {-webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); -ms-transform: rotateY( 180deg ); transform: rotateY( 180deg ); z-index: 999; display: none} .dncCreateSec.flipped {-webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); -ms-transform: rotateY( 180deg ); transform: rotateY( 180deg );} .dncCreateSec.flipped .frontview{display: none;} .dncCreateSec.flipped .backview{display: block;} .dncCheckingbox{background-color: #EEF4FC; border-radius:5px; margin-bottom: 20px; padding:20px; border:solid 1px var(--sparatorBorder);} [data-theme="dark"] .dncCheckingbox {background: #292a2c} .dncCheckingbox .col h3{font-size: 15px; color: var(--textdark2); margin-bottom: 10px; font-weight: normal;} .dncCheckingbox .col{text-align: center; border-right: solid 1px var(--sparatorBorder);} .dncCheckingbox .col:last-child{border-right: 0px;} .dncCheckingbox .infoText{ color:var(--blackMedium); font-size:15px; margin-bottom:20px; background:#fff; padding:10px 20px; border-radius:5px 5px 0px 0px; border-bottom: dotted 1px #666; margin-right: -20px; margin-left:-20px;} [data-theme="dark"] .infoText {background: #393b3ee8} .switch {display: inline-block; height: 30px; position: relative; width: 56px;} .switch > input { height: 0px; opacity: 0; width: 0px;} .switch > .switch-slider { -webkit-transition: .4s; background-color: #c1c1c1; border-radius: 30px; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s;} [data-theme="dark"] .switch > .switch-slider{background: #5b5959} .switch > .switch-slider:before {-webkit-transition: .4s; background-color: white; border-radius: 50%; bottom: 4px; content: ""; height: 22px; left: 4px; position: absolute; transition: .4s; width: 22px;} .switch > input:checked + .switch-slider:before { -ms-transform: translateX(26px); -webkit-transform: translateX(26px); transform: translateX(26px);} .switch.switch-off-primary > input + .switch-slider { background-color: #2196F3; } .switch.switch-off-success > input + .switch-slider { background-color: #5cb85c; } .switch.switch-off-info > input + .switch-slider { background-color: #5bc0de; } .switch.switch-off-warning > input + .switch-slider { background-color: #f0ad4e; } .switch.switch-off-danger > input + .switch-slider { background-color: #d9534f; } .switch.switch-off-muted > input + .switch-slider { background-color: #555555; } .switch.switch-primary > input:checked + .switch-slider { background-color: #2196F3; box-shadow: 0 0 3px #2196F3; } .switch.switch-success > input:checked + .switch-slider { background-color: #5cb85c; box-shadow: 0 0 3px #5cb85c; } .switch.switch-info > input:checked + .switch-slider { background-color: #5bc0de; box-shadow: 0 0 3px #5bc0de; } .switch.switch-warning > input:checked + .switch-slider { background-color: #f0ad4e; box-shadow: 0 0 3px #f0ad4e; } .switch.switch-danger > input:checked + .switch-slider { background-color: #d9534f; box-shadow: 0 0 3px #d9534f; } .switch.switch-muted > input:checked + .switch-slider { background-color: #555555; box-shadow: 0 0 3px #555555; } .switch-label, .label-switch {float: left; font-weight: bold; padding-top: 5px;} .switch-sm { height: 23px; width: 46px;} .switch-sm > .switch-slider:before {height: 15px; width: 15px;} .switch-sm > input:checked + .switch-slider:before { -ms-transform: translateX(23px); -webkit-transform: translateX(23px);transform: translateX(23px);} /*css for setting pages*/ /*form filter block style*/ .table_filter_sec { display: block;} .filter_tag_outer { background: var(--lightGrayBg); border-radius: 4px; padding: 3px 4px 4px 4px ; -moz-user-select: none; vertical-align: middle; width: auto; display: inline-block;} .filter_tg_inner { display: inline-block; width: auto; margin-right: 2px; vertical-align: middle;} .filter_tg_inner .btn-custom { height: 24px; line-height: 22px; background: var(--formControlBg); border: none; color: var(--formControlText); font-size: 13px; padding-left: 11px; padding-right: 11px; border-radius: 2px; letter-spacing: normal; } .filter_input { background-color: var(--formControlBg); color: var(--formControlText); border: none; box-sizing: border-box; line-height: normal; padding: 4px 4px 4px 4px; position: relative; white-space: nowrap; max-width: 140px; font-size: 13px;} .filter_input:hover, .filter_input:focus{box-shadow: none; outline: none;} .filter_tg_inner .select2-container--default .select2-selection--single{ background-color: var(--formControlBg); color: var(--formControlText); border: none; } .filter_tg_inner .select2-container--default .select2-selection--single .select2-selection__rendered{font-size: 13px; color: var(--formControlText);} .filter_tg_inner .select2-container--default .select2-selection--single .select2-selection__arrow{height: 25px;} .filter_tg_inner .fltrApply{padding: 4px 8px!important} .custom_dropdown12 { background-color: var(--formControlBg); border: none; border-radius: 3px; border-top-left-radius: 3px; min-width: 200px; } .custom_dropdown12 ul { list-style: none; margin: 0px; padding: 0px;} .custom_dropdown12 ul li { display: inline-block; width: 100%; float: none; padding: 0px;} .filter_drop_dwno .radio_cstm { padding-left: 10px;} .filter_drop_dwno .radio_cstm input[type="radio"] { position: absolute;} .radio_cstm input[type="radio"] { opacity: 0; z-index: 1; cursor: pointer;} .filter_drop_dwno .radio_cstm label::after, .filter_drop_dwno .radio_cstm label::before { display: none;} .filter_drop_dwno .radio_cstm label{font-size: 13px; color: var(--formControlText); cursor: pointer;} .add_fiter_btn {display: inline-block;} .fliter-tab .btn-custom {letter-spacing: normal; font-size: 13px; line-height: 26px; text-align: center; background: var(--chipBg2); border: none; color: var(--customBtncolor2); height: 29px; padding-left: 8px; padding-right: 8px; border-radius: 4px; cursor: pointer; margin-right: 3px; margin-top: 4px;} .fliter-tab .edit_filter{color: var(--customBtncolor2);} .fliter-tab .trans_btn { letter-spacing: normal; color: #bf6d56; font-size: 13px; line-height: 26px; text-align: center; background-color: transparent; height: 28px; padding-left: 0px; padding-right: 0px; border: none; cursor: pointer; outline: none;} .fliter-tag-ani{display: none} /*form filter block style*/ /*not data found message 404*/ .noDataFoundMessage{text-align: center; margin: 100px;} .noDataFoundMessage h3{font-size: 28px; font-weight: 300} .noDataFoundMessage p{font-size: 18px;} .noDataFoundMessage .noRecordIcon{width: 200px;} .noDataFoundMessage .noRecordIcon {display: none;} [data-theme="light"] .darkImg {display: inline-block;} [data-theme="dark"] .lightImg { display: inline-block;} /*not data found message 404*/ /*css for plan pages*/ .billingSummaryTable table tbody tr td.price { font-size: 16px; color: var(--textdark2);} .billingSummaryTable table tbody tr td.paidamount span.paid { color: #429e28;} .billingSummaryTable table tbody tr td.paidamount span.unpaid { color: #c44f4f;} .invoicePrimaryColor{color: var(--text-dark);} .invoiceSection{background: var(--cardBg); color: var(--textGray); padding: 40px; border-radius: 10px; margin: 15px auto; font-size: 14px; max-width: 1200px; } .invoiceInnerSec{position: relative; } .invoiceHeader{ margin-bottom:20px; align-items:center; display:flex; justify-content: space-between; } .invoiceHeader .invoiceLogo img{max-width: 133px; display: none} [data-theme="dark"] .invoiceHeader .invoiceLogo img.darkBgImg{display: block;} [data-theme="light"] .invoiceHeader .invoiceLogo img.lightBgImg{display: block;} .invoiceHeader .rightPart{ -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 60%; text-align: right; font-size: 40px; color: var(--textdark2); text-transform: uppercase;} .invoiceInfoBar{margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; -webkit-box-align: center; -webkit-box-pack: justify;} .invoiceInfoBar .seperator { min-height: 18px; border-radius: 1.6em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 20px; background: rgba(136, 105, 83, 0.69)} .invoiceInfoBar .infoList{display: flex;} .invoiceInfoBar .infoList p{margin-left: 20px; margin-bottom: 0px;} .invoiceInfoBar .infoList p b{color: var(--textdark2); font-weight: 500; } .invoiceToDetail{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 10px;} .invoiceRight{-webkit-box-flex: 0; -ms-flex: none; flex: none; width: 60%; text-align: right;} .invoiceTable{margin-bottom: 30px;} .roundBorder{border: 1px solid var(--BorderColor2); border-radius: 6px; overflow: hidden} .invoiceTblResp { overflow-x: auto; } .invoiceTblResp table{width: 100%; caption-side: bottom; border-collapse: collapse; min-width: 600px;} .invoiceTblResp table thead tr th{background: var(--gray100); color: var(--textdark2); padding: 10px 15px; font-weight: 500} .invoiceTblResp table tbody tr td{padding: 10px 15px; border-top: 1px solid var(--sparatorBorder); color: var(--textblack7);} .width-1{width: 8.33333333%} .width-2{width: 16.66666667%} .width-3{width: 25%} .width-4{width: 33.33333333%} .invoiceFooter{display: flex;} .invoicefooterLeft{width: 58%; padding: 10px 15px; -webkit-box-flex: 0; -ms-flex: none; flex: none;} .invoicefooterRight{width: 42%} .invoicefooterRight table{margin-top: -1px; width: 100%; caption-side: bottom; border-collapse: collapse;} .invoicefooterRight table tr td{padding: 10px 15px} .border-tb-1{border-top:solid 1px var(--sparatorBorder); border-bottom:solid 1px var(--sparatorBorder);} .termSection{border: solid 1px var(--sparatorBorder); border-radius: 6px; padding: 15px 20px} .termSection ul{ list-style:disc; padding-left:15px; } .termSection ul:not(:last-child){ margin-bottom:5px; } @media print { .actionHeader{display: none} .sidebar {display: none} .subSidebar{display: none} .sidebar.closenavAside ~ .contentPageArea.hassubSidebar{left: inherit; width: 100%; padding-top: 0px; padding-left: 0px;} .hideonPrint{display: none} } .envelopeList{padding-top: 20px; margin-left: -15px; margin-right: -15px; overflow: hidden;} .invoiceBlock {padding: 0px 40px 50px; border-bottom: solid 1px var(--commonBorderColor); margin-bottom: 12px; position: relative; } /* .invoiceBlock:before{position: absolute; left: 0px; bottom: 0px; width: 100%; height: 130px; background:#3E3D3D; border-radius: 18px 18px 0px 0px; content: "";} */ .invoiceBlock:hover .invoiceCard{translate: 0px -20px;} .invoiceCard{ background:var(--invoiceCardBg); position:relative; border-radius:5px 5px 0px 0px; padding: 5px 15px 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.67); transition:all .2s } [data-theme="light"] .invoiceCard{box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16)} .invoiceHead .col:first-child span{ font-size: 14px; color:var(--textmBlue); } .invoiceHead font{font-size: 16px; } .invoiceHead font.amount{ color:#32a439 } .invoiceHead .status{padding: 4px 12px; border-radius: 20px; font-weight: 500; font-size: 13px; } .invoiceHead .status font{font-size: 12px;} .invoiceHead .status.paid{background: var(--statusGreenBg); color: var(--statusGreentext); border-color: var(--statusGreentext);} .invoiceHead .status.unpaid{background: var(--statusRedBg); color: var(--statusRedtext); border-color: var(--statusRedtext);} .viewInvoiceBtn{background: #84572f; color: #fff; border-radius: 20px; border:none; padding: 4px 15px; font-size: 13px;} .viewInvoiceBtn:hover{background:#9f6634; } .particularTable{ width: 100%; margin-top: 5px; border: 1px solid var(--borderLight); border-radius: 6px;} .particularTable table{width: 100%; caption-side: bottom; border-collapse: collapse;} .particularTable table thead tr th { background:var(--invoiceCardBg); color: var(--textLight2); padding: 5px 15px; font-weight: 500; font-size: 12px;} .particularTable table thead tr th:first-child{border-radius: 7px 0px 0px 0px} .particularTable table thead tr th:last-child{border-radius: 0px 7px 0px 0px} .particularTable table tbody tr td { padding: 2px 15px; border-top: none; color: var(--textblack7); font-size: 13px;} .particularTable table tbody tr td:first-child{width: 300px; max-width: 300px;} .invoicefrontPaper{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 75px; background: var(--contentSectinoBg); padding:5px 50px 10px; color:var(--blackMedium); font-size:14px ; box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.22); padding-top: 15px;} [data-theme="light"] .invoicefrontPaper{box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.06)} .invoicefrontPaper span{font-family: monospace; color: var(--textLight2);} .ModuleTag {font-size: 10px; background: var(--customBtnGrayBg); padding: 2px 6px; border-radius: 5px; color: var(--customBtnGrayColor); line-height: normal} .planModuleSec{ max-width: 290px; padding-right: 0px; background:var(--cardBg); border-right:solid 1px var(--sparatorBorder); } .planModuleSec .subLeftBarHeading{ padding-bottom: 10px; padding-left: 0px; padding-top:12px;} .subLeftBarHeading .page_title{ font-size:20px; margin-bottom:0px; } .moduleTabSec{ display:block; overflow:auto; max-height: calc(100vh - 95px); min-height: calc(100vh - 95px); } .moduleTabSec ul{list-style: none; margin: 0px; padding:0px; } .moduleTabSec ul li{display: block; width: 100%; padding: 2px 10px 2px 0px; height: 32px; border-radius: 4px 0 0 4px; position: relative;} .moduleTabSec ul li a{font-size: 14px; color: var(--textGray); padding: 0px; display: inline-block; width:80% ; padding-left:10px; position:relative; } .moduleTabSec ul li a.active{color: var(--textdark2); font-size: 16px;} .moduleTabSec ul li a .MTag{font-size: 10px; background: var(--customBtnGrayBg); padding: 2px 6px; border-radius: 5px; position: absolute; right: 0; top: 3px; color: var(--customBtnGrayColor); line-height: normal;} .moduleTabSec ul li a .MTag.ivr{color: #428099} .moduleTabSec ul li a .MTag.service{color: #906d2b} .moduleTabSec ul li a .MTag.feature{color: #41843b} .moduleTabSec ul li:has(> a.active){ color: var(--textdark2); background: #eee;} [data-theme="dark"] .moduleTabSec ul li:has(> a.active){ background: #1a1a1a;} .moduleTabSec ul li:has(> a.active):after{position: absolute;right: 0px; top: 0px; width: 3px; height: 100%; background: #EA9108; content: "";} .sapretor{ width:100%; display:block; border-top:dashed 1px var(--BorderColor2); margin:5px 0px 10px; } .PriceForm{padding:10px; margin-top: 5px; max-height: calc(100vh - 255px); min-height: calc(100vh - 255px); overflow-x: hidden; overflow-y: auto; font-size:12px; } .PriceForm .alertMsg { font-size: 14px; display: block;} .PriceForm .alertMsg.success { color: #4b9f4b;} .PriceForm .form-group{margin-bottom: 10px;} .PriceForm .fieldTitle{ color:var(--textGray); font-size: 16px; margin-bottom:3px; display: block; text-align: right;} .PriceForm .form-control{background: var(--formControlBg); border-color:var(--sparatorBorder); font-size: 14px; color: #ca9045; height: inherit; padding: 4px 10px;} [data-theme="light"] .PriceForm .form-control{color:var(--formControlText) } .PriceForm .form-control::-webkit-outer-spin-button, .PriceForm .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} .PriceForm .form-control[type=number] { -moz-appearance: textfield;} .PriceForm .form-control:disabled, .PriceForm .form-control[readonly]{background-color: var(--formControlBg); border-color: transparent; cursor: not-allowed} .PriceForm .custom-control-input:disabled ~ .custom-control-label::before{background-color: var(--formControlBg); cursor: not-allowed;} .PriceForm.disabled{filter: blur(1px);} .PriceForm.disabled .fieldTitle{color: #666} [data-theme="light"] .PriceForm .form-group .col-md-8 .text_l_yellow{color: #000!important} .PriceForm .input-group-text{font-size: 12px; padding: 4px 10px; background: #232020; border-color: #434445; color: #777} .PriceForm .groupEnd .input-group-text{border-left: 0px; border-radius: 0px .25rem .25rem 0px; background: #363535} .PriceForm .select2-container--default .select2-selection--multiple{background:#303030!important ; border-color:#434445!important; border-radius:.25rem } .buttonSec{border-top:solid 1px #414141; padding:5px 10px; text-align:center; } .buttonSec .btn{font-size: 14px; display: block; width: 100%;} .PriceForm .modulePriceBlock{border-bottom: solid 1px #1e1e1e; margin-bottom: 10px;} .PriceForm .modulePHeading h4{ font-size:16px; font-weight:normal; color:#8eb9e7; display:inline-block; } .PriceForm .custom-radio .custom-control-label{ color:#ca9045; font-size:14px; } .PriceForm .custom-control-label::before{background-color: #ffffff47} .PriceForm .countyPLanBox{ padding: 5px; border-radius: 4px; position: relative; border:solid 1px #555; margin-bottom: 15px;} .PriceForm .countyPLanBox .countryBlock{background: #333; padding: 5px; margin-bottom: 5px;} .PriceForm .countyPLanBox .countryBlock .form-group:last-child{margin-bottom: 0px;} .PriceForm .addCountryBtn{padding: 0px; background: none; border:none; outline: none; color:#a07f61; padding-bottom:4px; } .PriceForm .removecountrybtn{font-size: 11px; padding: 0px; background: none; border:none; outline: none; color: #c94c4c} .planaddBtnSec{ padding-top:10px; } .planBasicDetlBtn{font-size: 14px; border-radius: 20px; background: #28292a; border: solid 1px #3a3f48; padding:6px 18px; color: #cdcdcd; width: 100%;} .planBasicDetlBtn.active{color:#fff; background: #1a1a1a; border-color: #1a1a1a} .modulePLmsg { padding: 5px 10px; font-size: 14px; border-radius: 5px; color: #ffffff94; width: 65%; margin: 0 auto; text-align: center;} .modulePLmsg.profit{border:dashed 1px #54a254; color:#54a254 } .modulePLmsg.loss{border:dashed 1px #c36a64; color:#c36a64 } .modulePLmsg font{font-size: 18px; color: var(--text-dark);} .rightPLSection{background: #eee; padding: 10px; border-radius: 6px; margin-top: 15px;} [data-theme="dark"] .rightPLSection{background: #121213} .rightPLSection h3{font-size: 16px; font-weight: normal; color: var(--titletext)} .rightPLSection .PLscrollContent{max-height: calc(100vh - 120px); min-height: calc(100vh - 120px); overflow: auto;} .plRow{display: block; color: #a8a8a8; font-size: 14px; line-height: normal; margin-top: 15px; position: relative; padding-left: 30px; } .plRow .hIndicator{ position:absolute; left:0px; top:-1px; display: inline-block; width: 20px; height: 20px; line-height: 18px; font-size: 13px; background: #514f4f; border-radius: 50%; text-align: center; font-weight: 500} .plCLCbx{border: dashed 1px #666; padding: 5px; border-radius: 5px; margin-top: 15px; font-size: 17px; color: #cdcdcd; text-align: center;} .plCLCbx i{display: inline-block; font-style: normal; font-size: 10px; background: #666; padding: 0px 4px; border-radius: 4px; vertical-align: middle; color: #ffffffb0} .plCLCbx.profit{border-color:#54a254} .plCLCbx.profit font{color: #54a254;} .plCLCbx.profit i{background:#54a254 } .plCLCbx.loss{border-color:#c36a64} .plCLCbx.loss font{color: #c36a64;} .plCLCbx.loss i{background:#c36a64 } .numberType{display: inline-block; font-size: 11px; background: #333; color: rgb(256, 256, 256, 0.7); border-radius: 4px; padding: 0px 5px; vertical-align: text-top; margin-left: 4px;} [data-theme="light"] .numberType{opacity: .7} .numberType.regular{background: #4d4a4a;} .numberType.vip{background: #287921;} .numberType.silver{background: #69718e;} .numberType.gold{background:#a26a22;} .numberType.platinum{background: #87533E;} .numberType.diamond{background: #243977;} .middleSec12{max-width: 650px; margin: 0 auto;} .zoneType{font-size: 12px; display: inline-block; color: var(--textGray); padding-left: 5px;} /*css for view plan*/ .billingtype{background: #12bf4f42; border:solid 1px rgba(74, 111, 86, 0.54); color: #52aa70; font-size: 13px; display: inline-block; padding: 3px 6px; border-radius: 5px; font-weight: normal;} .moduleTable{border-radius: 5px; } .moduleTable table thead tr th{border:none; font-size: 14px;font-weight: normal; border-bottom: none; background: var(--thBg); color:#7d7d7d; padding: 5px; line-height: normal; vertical-align: middle} [data-theme="dark"] .moduleTable table thead tr th{ color: #7d7d7d; background: #242323} .moduleTable table tbody tr{border-top: 5px solid var(--contentSectinoBg); border-radius: 10px;} .moduleTable table tbody tr td{border-top: none; padding: 10px 10px; background: var(--tdBg); color: var(--tdTextcolor)} [data-theme="dark"] .moduleTable table tbody tr td{background: #282828;} .moduleTable table .moduleName{font-size: 15px; width: 220px; color: var(--textdark2); border-radius:10px 0px 0px 10px; } .freeHit{font-size: 16px; color: var(--textmBlue)!important; } .freeAccess{ font-size:15px; color:#c4842f; width:120px } [data-theme="dark"] .freeAccess{color: #b09b7f!important} .freeAccess .progress{background: #d7d7d7; height:3px; width: 80px;} .freeAccess .progress-bar{background: #eacc57 } [data-theme="light"] .freeAccess .progress{background:#e9ecef47} [data-theme="light"] .freeAccess .progress-bar{background:#a78d28 } .t_consumption{ font-size:15px; color:#cdcdcd; } .t_consumption span{display: inline-block; width: 55px;} .p_consumption{font-size: 15px; color: #cdcdcd;} .spentAmount{font-size: 16px; color: #429e28!important; border-radius:0px 10px 10px 0px; } .moduleTable table tbody tr td i{color: var(--textID);} .moduleTable tbody tr td .MTag{font-size: 10px; background: #f0f0f0; padding: 2px 6px; border-radius: 5px; color: #646464; line-height: normal; float: right; margin-right: 10px;} [data-theme="dark"] .moduleTable tbody tr td .MTag{background: #4d4b49; color: #ffffff69} .moduleTable table tbody tr:hover td{background: #C4C6CA36} [data-theme="dark"] .moduleTable table tbody tr:hover td{background:#493F36} .basicDtlBox{ border-radius: 0.5rem; overflow:hidden; padding-right: 15px;} .basicDtlBox .linehedng { overflow: hidden; color: rgb(86, 142, 234); text-align: left; line-height: 1.6em; position: relative; font-size: 16px; width: 100%; margin-bottom: 10px; margin-top: 10px;} .basicDtlBox .linehedng::before { display: block; float: right; margin-top: .7em; border-top: 2px solid var(--BorderColor2); width: calc(100% - 100px); content: "";} .otherInfoSec span{font-size: 18px; color: var(--textblack7); display: block;} .otherInfoSec font{font-size: 15px; color: #818284} [data-theme="light"] .otherInfoSec .text_l_yellow {color: #d76b0c !important} .GaugeMeter { position: Relative; text-align: Center; overflow: Hidden; cursor: Default; display: inline-block; } .GaugeMeter SPAN, .GaugeMeter B {width: 54%;position: Absolute; text-align: Center; display: Inline-Block;color: RGBa(0,0,0,.8);font-weight: 100; font-family: "Open Sans", Arial; overflow: Hidden; white-space: NoWrap; text-overflow: Ellipsis; margin: 0 23%; margin-top: -25px;} .GaugeMeter[data-style="Semi"] B { width: 80%; margin: 0 10%;} .GaugeMeter S, .GaugeMeter U { text-decoration: None; font-size: .60em; font-weight: 200; opacity: .6;} .GaugeMeter B { color: #000; font-weight: 200; opacity: .8; margin-top: -25px!important; font-size: 15px} .plandidTable{border-radius: 5px; border: solid 1px var(--tableBorder); background: var(--tableBg)} .plandidTable table thead tr th{border:none; font-size: 14px;font-weight: normal; border-bottom: solid 1px var(--tableBorder); color: var(--th-text-color); background: var(--thBg); padding: 5px; line-height: normal; vertical-align: middle} .plandidTable table tbody tr td{border-bottom: none; border-top: none; padding: 5px 10px; background: var(--tdBg); color: var(--tdTextcolor)} .plandidTable table .moduleName{width: 150px; font-size: 15px; color: var(--textdark2);} .plandidTable table .freeHit{text-align: right; font-size: 16px; color: var(--textmBlue);} .plandidTable table tbody tr:hover td{background: var(--tdHoverBg)} /*css for view plan*/ .wallletBlock{display: block; padding: 25px; background: #0080001f; border: solid 1px #0080002e; margin-top: 15px; border-radius: 10px;} [data-theme="dark"] .wallletBlock{background: #11ae111f; border-color: #00800069} .walletAmount{font-size: 32px; font-weight:500; color:#1db01d } .walletField{font-size: 22px!important; text-align: center; border:solid 1px var(--BorderColor2)!important;} .walletField::placeholder{font-size: 15px;} .walletModal .modal-dialog{max-width: 500px;} .walletModal .modal-content{padding: 50px; } .walletModal .modal-header .modal-title{font-size: 22px;} .walletModal .modal-header button.close{position: absolute; right: 20px; top: 20px;} .walletModal .modal-body{padding-top: 0px;min-height: inherit} /*css for add plan page*/ /* assign page*/ .userDetailSec{max-width: 290px; padding-right: 0px; background: #252525; border-right: solid 1px #3a3f48; min-height: calc(100vh - 47px);} .priceChartTable{ display:block; max-height:calc(100vh - 45px); min-height:calc(100vh - 45px); overflow:auto; } .planAsignTable{margin-bottom:0px; border-color:#414141; } .planAsignTable tr th{ background:#252525; color: #818284; border-bottom: none; font-weight: normal; border-color:#414141; padding: 3px 20px; font-size: 18px!important; position: sticky; top: 0px; vertical-align:middle; } .planAsignTable tr th:after{bottom: 0px; left: 0px; width: 100%; height: 1px; position: absolute; content: ""; border-bottom: solid 1px #414141} .planAsignTable tr th span{display: block; font-size: 12px;} .planAsignTable tr td{ background:#27292b; border-color:#414141; padding: 3px 10px 3px 20px; font-size: 14px;} .planAsignTable .moduleNameField{background: #252525; padding: 3px 25px 3px 15px!important; min-width: 300px; font-size: 14px; border-color: #333; color: #999} .planAsignTable tr td .form-control{border-radius: 0px; background: none; border: none; outline: none; color: #cdcdcd; height: inherit; padding: 3px 10px 3px 20px; font-size: 14px; } .planAsignTable tr td .form-control:focus{box-shadow: none; outline: solid 1px #766543} .planAsignTable tr td.pricechartfield{padding: 0px; width: 150px;} .planAsignTable tr td.pricechartfield .form-control{color: #b58c6f; } .planAsignTable tr td.pricechartfield .form-control::-webkit-outer-spin-button, .planAsignTable tr td.pricechartfield .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} .planAsignTable tr td.pricechartfield .form-control[type=number] { -moz-appearance: textfield;} .planAsignTable tr td.pricechartfield span{padding: 3px 10px 3px 20px; display: inline-block; vertical-align: middle;} .planAsignTable tr td.perhitfield span{color: #a8a8a8; padding-left: 15px;} .planAsignTable tr td.PLfield{padding: 0px; width: 150px;} .planAsignTable tr td.PLfield .greenText{color: #68a568} .planAsignTable tr td.PLfield .redText{color: #c75a5a} .planAsignTable tr td.PLfield span{padding: 3px 10px 3px 20px; display: inline-block; vertical-align: middle;} .planAsignTable tr td.freeAccessColumn{width: 120px;} .planAsignTable tr td.freeAccessColumn span{font-size: 13px; color:#a8a8a8} .planAsignTable tbody tr:hover td, .planAsignTable tbody tr.active td{background: #333131} .planAsignTable tfoot tr td{position: sticky; bottom: -2px; background: #252525; padding: 5px} .planAsignTable tfoot tr td:after{top: 0px; left: 0px; width: 100%; height: 1px; position: absolute; content: ""; border-top: solid 1px #414141} .planAsignTable tbody tr td .MTag{font-size: 10px; background: #393734; padding: 2px 6px; border-radius: 5px; color: #ffffff69; line-height: normal; float: right} .planAsignTable tbody + tbody{border-top: 2px solid #dee2e62e} .OtherModuleBtn{position: sticky; bottom: 42px; } .moreModuleCLBtn{background: #4a4e51; border-color: #61686e7a; color: #cdcdcd; padding: 2px 10px; margin-right: 15px;} .moreModuleCLBtn.collapsed i:before{content: "\f078"} .asignUserDetail{display: block;} .asignUserDetail h3{ font-size:18px; font-weight:300; color:#818284 } .asignUserDetail ul{list-style: none; margin: 0px; padding: 0px; padding-left: 10px;} .asignUserDetail ul li{display: inline-block; width: 100%; margin-top: 4px;} .asignUserDetail ul li span{display: inline-block; width: 75px; color: #6b6e70} .asignUserDetail ul li font{color: #7587a2; font-size: 14px;} .lineSpacer{border-color:#181616; margin: 10px 0px;} .planDetail ul li font{color: #a29375} .basePriceBox{color: #cdcdcd; padding:4px 10px; background: #333; border:dashed 1px #666; border-radius: 5px; margin-top: 10px;} .BpriceInput{width: 100%; font-size: 16px; background: #69656254; color: #b58c6f; border: none; border-radius: 5px; text-align: center;} .BpriceInput:focus{outline: none} .profitPercentge{display: block; margin-top:5px; } .profitPercentge .form-control{padding: 0px; height: inherit; background:#333131 ; border-color: #545252; text-align: center;} .profitPercentge .form-control.textRed{color: #c75a5a} .profitPercentge .form-control.textGreen{color: #68a568} .profitPercentge .input-group-text{padding: 0px 8px; border-radius: 0px 4px 4px 0px!important; background:#333131 ; border-color:#545252 ; color:#818284} .PL_infoBlock{background: #3b573b; padding: 5px 10px; font-size: 14px; border-radius: 5px; color: #ffffff94} .PL_infoBlock font{font-size: 18px; color: #fff;} @media only screen and (max-width: 1480px) { .planAsignTable .moduleNameField{width: 250px; padding-right: 10px!important;} } @media only screen and (max-width: 1340px) { .planAsignTable .moduleNameField{ } .planAsignTable tr td{padding: 3px 10px 3px 10px} .planAsignTable tr td.freeAccessColumn{width: 90px;} .planAsignTable tr th{font-size: 16px!important; padding-right: 5px;} .planAsignTable tr td .form-control{padding-right: 5px;} } .addOperatorCostSection{ display:block; max-height:calc(100vh - 100px); min-height:calc(100vh - 100px); overflow:auto; } .opertaorCostTable{ display:block; max-height:calc(100vh - 100px); min-height:calc(100vh - 100px); overflow:auto;} .opertaorCostTable table{margin-bottom:0px; border-color:#414141; } .opertaorCostTable table tr th{ background:#252525; color: #818284; border-bottom: none; font-weight: normal; border-color:#414141; padding: 3px 15px 3px 8px; font-size: 13px!important; position: sticky; top: 0px; vertical-align:middle; min-width:100px; line-height:normal; } .opertaorCostTable table tr th:after{bottom: 0px; left: 0px; width: 100%; height: 1px; position: absolute; content: ""; border-bottom: solid 1px #414141} .opertaorCostTable table tr td{ background:#27292b; border-color:#414141; padding: 3px 8px 3px 8px; font-size: 14px;} .opertaorCostTable .moduleNameField{background: #252525; padding: 3px 25px 3px 15px!important; min-width: 300px; font-size: 14px; border-color: #333; color: #999; z-index: 1; position:sticky; left:0px;} .opertaorCostTable .moduleNameField:before{top: 0px; right: 0px; width: 1px; height: 100%; position: absolute; content: ""; border-right: solid 1px #414141} .opertaorCostTable table tr td .form-control{border-radius: 0px; background: none; border: none; outline: none; color: #cdcdcd; height: inherit; padding: 3px 8px 3px 8px; font-size: 14px; } .opertaorCostTable table tr td .form-control:focus{box-shadow: none; outline: solid 1px #766543} .opertaorCostTable table tr td .form-control:disabled{color: #666} .opertaorCostTable table tr td.pricechartfield{padding: 0px; width: 150px;} .opertaorCostTable table tr td.pricechartfield .form-control{color: #b58c6f; } .opertaorCostTable table tr td .form-control:disabled, .opertaorCostTable table tr td.pricechartfield .form-control:disabled{color: #999} .opertaorCostTable table tr td.pricechartfield .form-control::-webkit-outer-spin-button, .opertaorCostTable table tr td.pricechartfield .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} .opertaorCostTable table tr td.pricechartfield .form-control[type=number] { -moz-appearance: textfield;} .opertaorCostTable table tbody tr:hover td, .opertaorCostTable table tbody tr.active td{background: #333131} .opertaorCostTable tbody tr td .MTag{font-size: 10px; background: #393734; padding: 2px 6px; border-radius: 5px; color: #ffffff69; line-height: normal; float: right} .opertaorCostTable .editPriceBtn{ border:none; background:none; padding:0px; color:#444; position:absolute; right:4px; font-size:11px; top:33%; } .opertaorCostTable .editPriceBtn:hover{color: #999;} .opertaorCostTable tfoot tr td{position: sticky; bottom: -2px; background: #252525; padding: 5px} .opertaorCostTable tfoot tr td:after{top: 0px; left: 0px; width: 100%; height: 1px; position: absolute; content: ""; border-top: solid 1px #414141} @keyframes placeHolderShimmer{ 0%{ background-position: -468px 0 } 100%{ background-position: 468px 0 } } .ShimmerBg { animation-duration: 1.25s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: #333; background: linear-gradient(to right, #333 8%, #444 18%, #333 33%); background-size: 800px 104px; height: 12px; position: relative; border-radius: 2px; width: 100%;} .loadingDataTable tr th, .loadingDataTable tr td{ height: 40px;} .CreatePlanBox {max-width: 500px; margin: 150px auto 250px;} .CreatePlanBox .select2-container--default .select2-selection--single { background: #313030; border: solid 1px #414141; border-radius: 5px; height: 33px;} .CreatePlanBox .select2-container--default .select2-selection--single .select2-selection__rendered { color: #cdcdcd; font-size: 14px; line-height: 33px;} .search_model .select2-container--default .select2-selection--single { background: #313030; border: solid 1px #414141; border-radius: 5px; height: 33px;} .search_model .select2-container--default .select2-selection--single .select2-selection__rendered { color: #cdcdcd; font-size: 14px; line-height: 33px;} .didListplan{list-style: none; margin: 0px; padding: 0px; } .didListplan li{display: inline-block; width: 100%; border-bottom:solid 1px var(--borderLight); padding:8px 20px } .didListplan li:hover{background: #eee} [data-theme="dark"] .didListplan li:hover{background: #2f2f2f} .didListplan li .custom-control-label{font-size: 14px; padding: 0px 0px 0px 5px; cursor: pointer; display: inline-block; width: 60%} .didListplan li .custom-control-label .didNumber{font-size: 16px; color: var(--textblack7);} .didListplan li .custom-control-input:checked .custom-control-label{color: red} .didListplan li .base_price{font-size: 16px; color: #7BA0BC; display: inline-block; width: 100px; line-height: normal; vertical-align: top;} [data-theme="light"] .didListplan li .base_price{color:#2F2F2F } .didListplan li .custom-control-input:checked + label .didNumber{color: #ca9045} .planDetlBox{ display:block; margin-top:15px; margin-bottom: 15px; padding-left: 15px; padding-right: 15px; border-bottom:solid 1px var(--BorderColor2); padding-bottom:10px; } .planDetlBox span{font-size: 15px; color: var(--textGray); width: 150px; display: inline-block;} .planDetlBox font{color: #47C660; font-size: 15px; text-align: right;} [data-theme="light"] .planDetlBox font, [data-theme="light"] .planBucket li .discountAmount {color: #108E29} .planBucket{display: inline-block; width: 100%; list-style: none; margin:0px; padding:20px 10px; background: #fff; border-radius: 10px;} [data-theme="dark"] .planBucket{background: #444235} .planBucket li{display: inline-block; width: 100%; margin-bottom: 10px;} .planBucket li .summrytype{display: inline-block; width: 128px; color: var(--textGray); font-size: 14px;} .planBucket li .summryData{display: inline-block; vertical-align: middle; color: var(--text-dark); font-size: 15px; font-weight: 500; float: right;} .planBucket li .summryData i.fa-rupee-sign{font-size: 13px;} .planBucket li.total_amount .summryData{color: #ea9108; font-weight: 400; font-size: 18px;} .planBucket li.total_amount .summrytype{color: var(--textGray); font-size: 15px;} .planBucket li .creditDropdown{display: inline-block; width: 75%; background: #39382c; color: #cdcdcd; font-size: 12px; height: inherit; border: solid 1px #625c39;} .planBucket li .DactionBtn{background: #625c39; border: none; color: #eee; padding: 4px 6px; border-radius: 4px; font-size: 12px;} .planBucket li .discountAmount{ color:#5fd05f; font-weight: 400; font-size: 16px; display: inline-block; float: right} .planBucket .groupBucketData{border:solid 1px var(--BorderColor2); padding: 5px 25px 5px 5px; border-radius: 4px; position: relative; margin-bottom: 10px;} .planBucket .groupBucketData .ModuleremoveBtn{position: absolute; right: -6px; top: -8px;} .topup_history_sec{ display: block; width: 100%; padding: 10px 15px; background:var(--customBtnGrayBg) ; border-radius: 5px 5px 0px 0px; } .view_thistory_btn{display: inline-block; border: none; padding: 3px 0px; background: transparent; color: #bb9494; border-bottom: solid 1px } .topup_history_sec .table{margin-bottom: 0px;} .topup_history_sec .table tr td{border-top: none; color: #8a8a8a; padding: 5px; border-bottom: dashed 1px var(--BorderColor2);} .topup_history_sec .table tr td.topup_amount{color: #867651} .filtercollapseSec{background: var(--cardBg); border:solid 1px var(--BorderColor2); padding: 15px; border-radius: 5px; color: #cdcdcd;} .filtercollapseSec label.label562{font-size: 14px; color:var(--textLight2); margin-bottom: 5px;} .filtercollapseSec .form-control{background: var(--formControlBg); border:none; color: var(--formControlText); font-size: 13px;} .filtercollapseSec .select2-container{width: 100%!important} .filtercollapseSec .select2-container--default .select2-selection--single{background: var(--formControlBg); border: none; color: var(--formControlText); height: 33.5px;} .filtercollapseSec .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 33.5px; color: var(--formControlText); font-size: 13px;} .filtercollapseSec .select2-container--default .select2-selection--single .select2-selection__arrow{top: -2px;} .filtercollapseSec .btn-secondary{background: var(--formControlBg); border:none; color: var(--formControlText); font-size:13px; width:100%; text-align:left; } .filtercollapseSec .btn-secondary:after{float: right; margin-top: 8px;} .filtercollapseSec .btn-secondary:not(:disabled):not(.disabled).active, .filtercollapseSec .btn-secondary:not(:disabled):not(.disabled):active, .show > .filtercollapseSec .btn-secondary.dropdown-toggle{background: var(--formControlBg); color: var(--formControlText); box-shadow: none} .filtercollapseSec .dropdown-menu {background: var(--formControlBg); padding: 10px; color: var(--formControlText); border: solid 1px var(--sparatorBorder); } .filtercollapseSec .dropdown-menu .form-check{margin-bottom: 5px;} .filtercollapseSec .dropdown-menu .form-check label{ padding-left: 5px;} .filtercollapseSec .col-lg-4{margin-bottom: 10px;} .reservdnumbermodal .nav-tabs{border-bottom: none} .reservdnumbermodal .nav-tabs .nav-link{color: #999; font-size: 14px; padding: 4px 15px;} .reservdnumbermodal .nav-tabs .nav-link:hover{border-color: #4f5051} .reservdnumbermodal .nav-tabs .nav-link.active{border-color: #4f5051 #4f5051 #393939; background: #393939; color: #cdcdcd} .reservdnumbermodal .numberList{ list-style:none; margin:15px 0px 0px; padding:0px; } .reservdnumbermodal .numberList li{ display:inline-block; width:100%; color:#cdcdcd; font-size:15px; padding: 3px 10px;} .reservdnumbermodal .numberList li:hover{background: #313131; border-radius: 5px;} .reservdnumbermodal .numberList li font.numberType{margin-left: 5px;} .reservdnumbermodal .tab-content{max-height: 400px; min-height: 350px; overflow: auto; border:solid 1px #4f5051; background: #393939} .serviceSelectOption{display: inline-block;} .serviceSelectOption .dropdown-menu{padding: 10px; background: #3c3c3c;} .serviceSelectOption .dropdown-menu ul{list-style: none; margin: 0px; padding: 0px;} .serviceSelectOption .dropdown-menu ul li{display: inline-block; width: 100%; margin-bottom: 5px; padding: 0px; border:none} .serviceSelectOption .dropdown-menu .custom-control-label{color: #cdcdcd} @media only screen and (max-width: 1320px) { .PriceForm{padding: 0px;} .didListplan li{padding: 8px 0px;} } /*add plan*/ /*css for plan pages*/ /*css for filter row for page*/ .filterRow .filter_tag_outer{ background: var(--gray200); border:solid 1px var(--BorderColor2);} .filterRow .filter_tg_inner .btn-custom{ background:var(--filterFieldElementBg); border-radius:4px; height:28px } .filterRow .fieldelement{background: var(--filterFieldElementBg); border: none; border-radius: 4px; font-size: 13px; height: 28px; color: var(--formControlText); padding: 0px 5px} .filterRow .fieldelement:focus, .fieldelement:hover{outline: none} .filter_tg_inner .custom_dropdown12{ border:solid 1px var(--BorderColor2);} .filter_tg_inner .custom_dropdown12 ul li a{font-size: 14px; color:var(--formControlText); padding:4px 10px; display:block; } /*css for filter row for page*/ /*css for actionlog page*/ .sidebarFilter{ border-right: solid 1px var(--BorderColor2); max-width: 220px; min-width: 220px; } .sidebarFilter h3{color: var(--textGray); font-size: 16px; margin: 0px; padding: 0px; font-weight: 500; margin-bottom: 10px; margin-top: 15px} .sidebarFilter h4{font-size: 13px; color: var(--titletext); margin: 10px 0px ;} .clearBtn{ display:inline-block; padding:3px 7px; font-size:12px; border-radius:6px; border:none; outline:none; background:var(--customBtnGrayBg); color:var(--textDLight); float:right } .sidebarFilter .searchInput{ display:block; width: 100%; background:var(--gray200); border:solid 1px var(--BorderColor2); font-size: 15px; border-radius:5px; position:relative; margin-bottom:10px; } .sidebarFilter .searchInput input{width: 90%; background: none; border: none; outline: none; box-shadow: none; color: var(--formControlText); padding: 2px 5px} .sidebarFilter .searchInput input:hover, .sidebarFilter .searchInput input:focus{outline: none; box-shadow: none;} .sidebarFilter .searchInput .fa-search{position: absolute; right: 5px; top: 7px; color: var(--textDisbaled); font-size: 12px;} .sidebarFilter ul{list-style: none; margin: 0px 0px 0px; padding: 0px; max-height: calc(100vh - 430px); overflow: auto;} .sidebarFilter ul li{ display:inline-block; width:100%; padding:5px 5px 5px 10px; } .sidebarFilter ul li .custom-control-label{ color:var(--textblack7); font-size:14px; width:100% } .sidebarFilter ul li .custom-control-label font{ float:right; font-size:12px; color: #999; margin-top: 2px;} .logsTable{max-height: calc(100vh - 350px); overflow: auto; width: 100%; overflow-x: scroll; position: relative; margin-top: 0px;} .logsTable table{min-width: 1200px} .logsTable table thead tr th{ position:sticky; top:0px; font-size:13px; z-index:1 } .logsTable table tbody tr td{padding: 5px 8px} .logsTable table thead tr th.datefield{position:sticky;left:0px; width:180px; min-width: 180px; background: var(--thBg); z-index: 2} .logsTable table tr td{font-size: 12px!important; font-weight: 400;} .logsTable table tr td.datefield{ position:sticky;left:0px; width:180px; min-width: 180px; z-index: 1} .logsTable table .eventfield{ width:120px; min-width: 120px;} .logsTable table .severityfield{width: 120px; min-width: 120px; } .logsTable table .messgaefield{white-space: nowrap;} .logsTable table .actionBy{ width:250px; min-width: 250px; max-width:250px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .logsTable table .actionBy font{margin-right: 4px; color: var(--textLight2);} [data-theme="light"] .logsTable table tbody tr td .text_d_light{color:#000 } [data-theme="light"] .logsTable table tbody tr td .text_m_light{color:#737373 } /*css for actionlog page*/ /*css for profile page*/ .status-badge { background-color: #22c55e; color: white; padding: 5px 14px; border-radius: 50px; font-size: 14px; } .info-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } .info-box { background-color: var(--gray100); padding: 20px; border-radius: 8px; } .info-label { font-size: 14px; color: var(--textGray); margin-bottom: 5px; } .info-value { font-size: 22px; font-weight: 300; color: #222; margin-bottom: 25px;} [data-theme="dark"] .info-value {color: #C1A373} /*css for profile page*/ /*css for call analysis page*/ /*css for call annlaysis table*/ .CallanalysisTable{ padding:0px; position: relative; max-height:calc(100vh - 180px); overflow: auto} .CallanalysisTable table {border-radius: 8px; border:0px; } .CallanalysisTable table thead tr th{ border:solid 1px var(--tableBorder); position:sticky; -webkit-position: sticky; top:0px; background: var(--thBg); z-index: 1; border-top:none; vertical-align:middle; line-height:normal; padding:5px 8px; } .CallanalysisTable table thead tr th:first-child, .CallanalysisTable table tbody tr td:first-child, .CallanalysisTable table tfoot tr td:first-child{border-left: 0px;} .CallanalysisTable table thead tr th:last-child, .CallanalysisTable table tfoot tr td:last-child{border-right: 0px;} .CallanalysisTable table tbody tr td{min-width: 120px; background: var(--tdBg); padding: 2px 8px; border-color: var(--borderLight);} .CallanalysisTable table tfoot tr td{background: #EFEFFB; vertical-align: middle; border-color: var(--borderLight); color: var(--tdTextcolor); border-top: solid 1px #dbdbff;} [data-theme="dark"] .CallanalysisTable table tfoot tr td{background: #383848} .primaryColumn{min-width:210px!important ; padding-left: 15px!important; position: sticky; -webkit-position: sticky; left: 0px; z-index: 1; background: #fff; box-shadow: inset -7px 0 0px -6px var(--sparatorBorder)} .primaryColumn .agent_name{font-size: 15px; color: var(--textdark2);} .primaryColumn .agent_id{color: var(--textID)} .breakdownDtl{font-size: 13px; font-weight: 500; max-width: 140px; overflow: hidden; white-space: nowrap; display: inline-block;} .breakdownDtl font{color: var(--textID); font-size: 12px;} .primaryColumn .disporprtIco{margin-right: 5px; vertical-align: top;} .primaryColumn .date{font-weight: 500; font-size: 14px; color: var(--textdark2); vertical-align: top;} .collapseIcon{ cursor: pointer; width: 20px; height: 20px; line-height: 20px; border-radius: 4px; background: #c9def4; text-align:center; display:inline-block; float:right } [data-theme="dark"] .collapseIcon{background: #000; color:#cdcdcd } .collpaseRow .primaryColumn .date{font-size: 12px} .collapseIcon .collapse_arrow_icon:before{content: "\f106"} .collapseIcon.collapsed .collapse_arrow_icon:before{content: "\f107"} .primaryColumn .calltypelabel{font-size: 11px;} .primaryColumn .callStatus{font-size: 11px; padding: 1px 8px;} .primaryColumn .statusTag{font-size: 11px; max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .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 } .field_counter{text-align: center;} .field_counter span{font-size: 15px; cursor: pointer;} .field_counter span.totalCall{color:#3876b5 } .field_counter span.transfredCall{color:#3876b5 } .field_counter span.answered{color:#3ea25b } .field_counter span.missed{color:#db810d } .field_counter span.part_missed{color:#db810d } .field_counter span.failed{color:#df4747 } .CallanalysisTable table tbody tr td.amount_field{background: #f8fafd; font-weight: 500; font-size: 14px; text-align: center;} [data-theme="dark"] .CallanalysisTable table tbody tr td.amount_field{background: #292929;} .CallanalysisTable table tbody tr:hover td.amount_field{background: #EEF4FC} [data-theme="dark"] .CallanalysisTable table tbody tr:hover td.amount_field{background: #262626} .durationfield span{display: block; font-size: 13px;} .durationfield font{ font-size: 12px; color: #6a6a6a} .CallanalysisTable table thead tr th .hour24_count_tag li::after { position: absolute; bottom: -7px; left: 0px; right: 0px; margin: 0 auto; width: 1px; height: 10px; background: #d9d9d9; content: ""; } [data-theme="dark"] .CallanalysisTable table thead tr th .hour24_count_tag li::after{background: #393939} .CallanalysisTable table thead tr th .hour24_count_tag li{color: #6a6a6a} .label_er{ font-size:14px; text-align:left; position:sticky; left:220px; } .label_er font{color: var(--textGray); font-size: 13px;} .collpaseRow td { background-color: var(--gray200)!important; padding: 5px 8px; border-color: var(--borderLight) !important; background-clip: padding-box;} .collpaseRow td.primaryColumn{border-color: var(--sparatorBorder)!important; padding-left: 25px!important} .breakdown_option{background: #343637} .breakdown_option::after{border-bottom: 8px solid #343637} .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;} .CallanalysisTable tr td .agentName { color: var(--textdark2); font-size: 15px; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; font-weight: normal;} .CallanalysisTable tr td .agentName font { color: var(--textID); font-size: 13px; margin-right: 3px;} .data_placeolder_dummy{width: 100px; height: 15px; background: #7f7c7c30; border-radius:5px; display: inline-block;} .dummy_table_view{ border-left: solid 1px var(--tableBorder); border-right: solid 1px var(--tableBorder)} .dummy_table_view tr:first-child td {border-top: 0px;} .dummy_table_view{margin-bottom: 0px;} .dummy_table_view tr td{border-color: var(--tdborderColor); background: var(--tdBg); color: var(--tdTextcolor)} .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:#F8FAFD; border-radius: 10px;} [data-theme="dark"] .table_view_modal .modal-content{background: #404242} .table_format_view{background:#fff; padding: 30px 30px 0px; border-bottom: solid 1px #ddd; border-radius: 10px 10px 0px 0px; margin-bottom: 10px; box-shadow: inset 0px -11px 8px -10px #c4c3c3} [data-theme="light"] .table_format_view{background: #414446; border-bottom: solid 1px #2f3132; box-shadow: inset 0px -11px 8px -10px #333} .tbl_hdr_placeholder{width: 100%; height: 38px; background: var(--thBg); border-bottom: solid 2px var(--tableBorder); border-radius: 5px 5px 0px 0px; padding: 12px;} [data-theme="dark"] .tbl_hdr_placeholder{background: #161617; border-color: #333} .view_type_thumb{display: inline-block; width: 20px; height: 20px; border-radius:20px; background: var(--CounterBg); color: var(--text-dark); text-align: center; margin-right: 5px; font-size: 12px; line-height: 20px;} .choose_table_option .custom-control-label{color: var(--textblack7) ;} .disply_view_btn{background: #063950;} .disply_view_btn:hover{background: #0f4963;} .selectt { display: none; width: 130px; color: var(--textdark2)} .text_answered_hits { color: #3db34a;} .text_missed_hits { color: #e77569;} /*column custmizetion modal box*/ .customized_column_modal .modal-dialog{min-width: 950px;} /*.customized_column_modal .modal-content{background: #272728}*/ .customized_column_modal .modal-header{ border-bottom:solid 1px var(--commonBorderColor); padding: 8px 15px; border-radius: 0px;} .customized_column_modal .modal-header h5{font-size: 18px; } .customized_column_modal .modal-header .close{margin-top: -18px; } .customized_column_modal .modal-body{width: 100%; height: 500px; padding: 0px; max-height: inherit; overflow: inherit;} .customized_column_modal .modal-footer{border-top: solid 1px var(--commonBorderColor);} .column_part nav ul{list-style: none; margin: 0px; padding: 0px; } .column_part nav ul li{position: relative; padding: 10px 0px;} .column_part nav ul li a{ color: var(--textdark2); font-size: 15px; padding: 0px; display: block; } .column_part nav ul li.active a{color: var(--textmBlue);} .column_part nav ul li a.active{color: var(--textmBlue);} .column_part nav ul li.active:after{position: absolute; left: -15px; top: 0px; width: 3px; height: 100%; background: #2887e6; content: ""} .column_part nav ul li ul li{border-bottom: none; padding: 0px;} .column_part nav ul li ul li a{ color: #929598!important; font-size: 14px; font-weight: normal; padding:4px 15px 0 15px; } .column_part nav ul li ul li.active a{color:#2887e6!important ; font-weight: bold} .column_cat_part{border-right:solid 1px var(--sparatorBorder); border-left:solid 1px var(--sparatorBorder); } .column_serach_bx{ display: inline-block; width: 100%; padding: 5px 15px;} .column_serach_bx label{ display: inline-block; width: 100%; background:var(--formControlBg); padding-left: 12px;padding-right: 12px;margin-top: 5px;margin-bottom: 5px;height: 32px; border:solid 1px var(--BorderColor2); border-radius: 5px; line-height: 32px; transition: all 0.2s; } .column_serach_bx label:hover{border-color: #1976D2} .column_serach_bx label i{color: #999} .column_serach_bx label input{border:none; padding: 0px; outline: none; color: var(--formControlText); font-size: 13px; background: none} .column_serach_bx label input::placeholder { color: rgb(141, 148, 158);} .filter_matrix_result {background: rgb(38, 37, 37) none repeat scroll 0% 0%!important; border:none;} .brdr_btm_s56{border-bottom: solid 1px #dddddd0f;} .column_cat_list_xy{margin-bottom: 15px;} .column_cat_list_xy .headingpo_cd{ background: var(--lightGrayBg); color: rgb(144, 148, 156); font-size: 11px; font-weight: bold; line-height: 14px; text-transform: uppercase; padding: 5px 16px 5px 12px } .column_cat_list_xy .headingpo_cd label{cursor: pointer; display: block; margin-bottom: 0px;} .column_cat_list_xy ul{ list-style: none; margin: 0px; padding: 0px; } .column_cat_list_xy li{display: inline-block; width: 100%; float: none; padding: 4px 16px 4px 12px } .column_cat_list_xy li label{margin-bottom: 0px; cursor: pointer; font-weight: normal;} .column_cat_list_xy h4{font-size: 11px; color: rgb(144, 148, 156); font-weight: normal; margin: 10px 15px; padding:5px 0px; text-transform: uppercase; border-bottom: 1px solid #dadcde } .column_cat_list_xy table{border-top: solid 1px #eee;} .column_cat_list_xy table tr th{ background: #F2F3F5; padding: 10px 5px; font-weight: normal; font-size: 12px; color: rgb(96, 103, 112);} .column_cat_list_xy table tr th:first-child, .column_cat_list_xy table tr td:first-child{padding-left: 16px; font-weight: bold; color: rgb(28, 30, 33)} .column_cat_list_xy table tr td{padding: 5px; font-size: 13px; font-weight: normal!important;} .column_selectd_fild_lo{padding: 20px; background: var(--gray100);} .column_selectd_fild_lo ul{list-style: none; margin: 0px; padding: 0px; max-height: 430px; overflow: auto;} .column_selectd_fild_lo ul li{ display: inline-block; width: 100%; float: none; padding: 8px 0; font-size: 14px; line-height: 18px; background: #fff; border-color: #EBEDF0 #dfe0e4 #d0d1d5; border-radius: 4px; border-width: 1px; border-style: solid; overflow: hidden;} .column_selectd_fild_lo ul li span{padding: 0px 10px; display: inline-block; color: #1c1e21} .column_selectd_fild_lo ul li a{display: inline-block; float: right; color: #bbb; padding: 0px 10px;} .column_selectd_fild_lo ul li a:hover{color: #888;} .column_selectd_fild_lo ul li.sub_column_126{ width: 90%!important; margin-left: 10%!important; background: rgba(256,256,256,.8); padding: 5px 0px; } .checkbox_cstm { padding-left: 25px; margin-top: 0px; margin-bottom: 0px;} .checkbox_cstm label { display: inline-block; vertical-align: middle; position: relative; outline: none; padding-left: 5px; color: var(--textdark2); font-weight: 400; font-size: 13px; } .checkbox_cstm label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #abababb5; border-radius: 3px; background-color: #ffffff61; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .checkbox_cstm label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: 0; top: 0; margin-left: -20px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: var(--text-dark); } .checkbox_cstm input[type="checkbox"], .checkbox_cstm input[type="radio"] { opacity: 0; z-index: 1; cursor: pointer; position: absolute; outline: none; border: none;} .checkbox_cstm input[type="checkbox"]:focus + label::before, .checkbox_cstm input[type="radio"]:focus + label::before { outline:none; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .checkbox_cstm input[type="checkbox"]:checked + label::after, .checkbox_cstm input[type="radio"]:checked + label::after { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f00c";} .checkbox_cstm input[type="checkbox"]:indeterminate + label::after, .checkbox_cstm input[type="radio"]:indeterminate + label::after { display: block; content: ""; width: 10px; height: 3px; background-color: #555555; border-radius: 2px; margin-left: -16.5px; margin-top: 7px;} .checkbox_cstm input[type="checkbox"]:disabled, .checkbox_cstm input[type="radio"]:disabled { cursor: not-allowed;} .checkbox_cstm input[type="checkbox"]:disabled + label, .checkbox_cstm input[type="radio"]:disabled + label { opacity: 0.65; } .checkbox_cstm input[type="checkbox"]:disabled + label::before, .checkbox_cstm input[type="radio"]:disabled + label::before { background-color: #eeeeee; cursor: not-allowed; } .checkbox_cstm.checkbox-circle label::before { border-radius: 50%; } .checkbox_cstm.checkbox-inline { margin-top: 0; } .dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; height: 420px; overflow: auto; list-style: none; font-size: 13px; line-height: 20px; } .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; } .dd-list .dd-list { padding-left: 30px; } .dd-collapsed .dd-list { display: none; } .dd-item,.dd-empty,.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; } .dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc; -webkit-border-radius: 3px;border-radius: 3px;box-sizing: border-box; -moz-box-sizing: border-box; } .dd-handle:hover { color: #2ea8e5; background: #fff; } .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; } /*.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; } .dd-item > button[data-action="collapse"]:before { content: '-'; }*/ .dd-placeholder,.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; } .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5; background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-size: 60px 60px;background-position: 0 0, 30px 30px; } .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; } .dd-dragel > .dd-item .dd-handle { margin-top: 0; } .dd-dragel .dd-handle {-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);} .nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; } #nestable-menu { padding: 0; margin: 20px 0; } .dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 35px; color: var(--textblack7); text-decoration: none; border: 1px solid #cccccc6b; background: #d7cdbb2e; -webkit-border-radius: 3px; border-radius: 3px;box-sizing: border-box; -moz-box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .dd3-content:hover { color: #fff; background: #1a4061; } [data-theme="light"] .dd3-content:hover { color: var(--customBtncolor1); background: var(--customBtnBg1); } .dd-dragel > .dd3-item > .dd3-content { margin: 0; } .dd3-item > button { margin-left: 0px; } .dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 1px solid #cccccc6b; border-right: none; background: #d7cdbb2e; border-top-right-radius: 0;border-bottom-right-radius: 0; } .dd3-handle:before { content: '\f0b2'; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #999; font-size: 20px; font-weight: 900; font-family: 'Font Awesome 5 Free'; font-size: 12px; } .dd3-handle:hover { background: var(--chipBg); } .drag-btn-close {position: absolute; right: 8px; top: 4px; color: #999; font-size: 11px;} .dd-item { margin-bottom: 10px;} .hour_record_po_dd.dd3-content{height: 95px; } .brdr_btm_0{border-bottom: none;} .hour_record_po_dd.dd3-content font{font-size: 10px; display: block; color: #d28989; line-height: normal;} .hour_record_po_dd.dd3-content .sjdsjdk{ display: block; font-size: 10px; line-height: normal; padding-top: 5px } .hour_record_po_dd.dd3-content .sjdsjdk i{ display: block; font-style: normal; color: #999; position: relative; padding-left: 22px; } .hour_record_po_dd.dd3-content .sjdsjdk i:after{position: absolute; left: 12px; top: 4px; content: "\f111"; font-weight: 900; font-family: 'Font Awesome 5 Free'; font-size: 5px;} .dd-item button{ display: none } /*column custmizetion modal box*/ /*css for call annlaysis table*/ /*css for side bar*/ .rightSideBarSlider { position: fixed; top: 0px; right: -75%; width: 75%; height: 100%; min-height: 100vh; padding-bottom: 20px; background: var(--cardBg); 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: 3} [data-theme="light"] .rightSideBarSlider {box-shadow:-5px 0 5px -3px #16151540 ;} .rightSideBarSlider.show{ right: 0px!important; z-index:999 } .rightSideBarSlider h3{ font-size: 18px; font-weight: 400; margin-bottom: 20px; margin-top: 0px; padding-right: 8px ; color: var(--textmBlue);} .closeRightSidebar{ font-size: 18px; cursor: pointer; float: right; margin-right: 0px; background: var(--chipBg2); padding: 4px 10px; line-height: normal; border-radius: 4px; border:0px; color: var(--textGray);} .closeDispositionrecord { font-size: 18px; cursor: pointer; margin-right: 0px; background: var(--chipBg2); padding: 5px 10px; line-height: normal; border-radius: 4px; position: absolute; right: 20px; top: 0px;} .rightSibarIframe{ height: calc(100vh - 75px); overflow: auto; background: var(--cardBg); width:100%; border:0px; } iframe.rightSibarIframe{height: 100vh!important} .slider-backdrop:after{position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 333; content: ""; transition: opacity 0.3s ease; opacity: 1; pointer-events: none;} .sidebarStickyHead{position: sticky; top: 0px; background: var(--cardBg); z-index: 2; border-bottom: solid 1px var(--sparatorBorder); padding-bottom: 10px;} .themeSaprator{border-color: var(--sparatorBorder);} .compactTable thead tr th{padding-top: 3px !important; padding-bottom: 3px!important; font-size: 13px!important;} .dateChangePrevNextBtn button:first-child{border-radius: 4px 0px 0px 4px} .dateChangePrevNextBtn button:last-child{border-radius: 0px 4px 4px 0px; border-left: 0px;} .counterTable{overflow-x: auto; max-height: calc(100vh - 150px); overflow: auto;} .counterTable table{min-width: 1200px;} .counterTable table tr th{position: sticky!important; top: 0px!important; font-size: 13px!important; text-align: center;} .counterTable table tr td{min-width: 100px; text-align: center;} .counterTable table .fixColumn{position: sticky; left: 0px; width: 230px; min-width: 230px; box-shadow: inset -7px 0 0px -6px var(--sparatorBorder); z-index: 22; text-align: left} .counterTable table tr th.fixColumn{z-index: 99!important} .counterTable table td.fixColumn span{width: 130px; display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} /*css for side bar*/ /*css for dospsotion and hangup reason slide box on call analysis page*/ .topDtlDispo{list-style: none; margin: 0px; padding: 0px; margin-top: 5px; padding-bottom: 6px; border-bottom: solid 1px var(--BorderColor2);} .topDtlDispo li span.hDnG { display: block; color: #818284; padding-bottom: 5px; } .topDtlDispo li .dateDtl{font-size: 13px; color: var(--textdark2);} .topDtlDispo li .dtlDiv span{max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .topDtlDispo li .dtlDiv .statusTag {padding: 0px 5px; font-size: 12px;} .topDtlDispo li .dtlDiv .calltypelabel{padding: 4px 8px; font-size: 12px; background: #262525} [data-theme="light"] .topDtlDispo li .dtlDiv .calltypelabel{ background: #fff} .dispo_H_tab { padding-left: 15px; border-bottom: 1px solid var(--BorderColor2);} .dispo_H_tab .nav-link { color: var(--blackMedium); font-size: 13px; margin-right: 5px;} .dispo_H_tab .nav-link:hover{border-color: var(--BorderColor2) var(--BorderColor2) #fff0;} .dispo_H_tab .nav-link.active { background: var(--Bgcharcoal); color: var(--textdark); border-color: var(--BorderColor2) var(--BorderColor2) #fff0;} .dispoRecordSec .tab-content { background: var(--Bgcharcoal); height: 100%;} .dspRcrdtbleSc{ padding-bottom: 20px; background: var(--Bgcharcoal);} .dspRcrdtbleSc .subctrgrytotal{width: 100%} .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: var(--textGray); 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: var(--textGray);} .hangupresonBarchart ul li .barValue font{display: inline-block; background: var(--chipBg); color: var(--customBtncolor1); padding: 10px 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: var(--Bgcharcoal); } .subctrgrytotal{width: 170px; background: #646262; padding: 2px 10px; border-radius: 0px 0px 5px 5px; color: #a1c9f0; text-align: left; font-size: 15px;} .breakparent .parent .subctrgrytotal{color: #f0d5a1;} td.SUbcategryName{padding-left: 0px!important;} #alertInfoBx{padding: 0px 15px!important;} /*css for dospsotion and hangup reason slide box on call analysis page*/ /*css for duration page in performance*/ .durationTable{ padding:0px; position: relative; min-height: 500px; max-height:calc(100vh - 180px); overflow: auto} .durationTable table {border-radius: 8px; border:0px; } .durationTable table thead tr th{ position:sticky; -webkit-position: sticky; top:0px; background: var(--thBg); z-index: 1; border-top:none; vertical-align:middle; line-height:normal; padding:5px 8px; } .durationTable table thead tr th:first-child, .durationTable table tbody tr td:first-child, .durationTable table tfoot tr td:first-child{border-left: 0px;} .durationTable table thead tr th:last-child, .durationTable table tfoot tr td:last-child{border-right: 0px;} .durationTable table tbody tr td{min-width: 110px; height: 58px; background: var(--tdBg); padding: 2px 8px; border-color: var(--borderLight);} .durationTable table tfoot tr td{background: #EFEFFB; vertical-align: middle; border-color: var(--borderLight); color: var(--tdTextcolor); height:58px; } [data-theme="dark"] .durationTable table tfoot tr td{background: #383848} .th_button { letter-spacing: normal; font-size: 14px; background: transparent; border: solid 1px transparent; color: var(--th-text-color); padding-left: 4px; padding-right: 4px; border-radius: 4px; cursor: pointer; font-weight: 500;} .th_button:hover, .th_button:focus { border-color: var(--BorderColor2); background: var(--gray200);} .th_option_drop::after { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--dropdownBg); position: absolute; top: -8px; left: 40px; content: "";} .th_option_drop::before { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid var(--BorderColor2); position: absolute; top: -10px; left: 40px; content: "";} [data-theme="dark"] .th_option_drop::before{display: none} .th_option_drop { background: var(--dropdownBg); 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; z-index: 5; margin-top: 15px;} .chart_explain_dropdown:hover { background: #20222396;} [data-theme="light"] .chart_explain_dropdown:hover { background: #f2f2f2;} .chart_explain_dropdown { display: block; width: 100%; margin-bottom: 5px; padding: 5px 10px;} .chart_explain_dropdown a { display: block;} .chart_explain_dropdown .chart_png12 { display: inline-block; width: 35px; vertical-align: top; margin-top: 3px;} .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;} [data-theme="light"] .chart_explain_dropdown .chart_type12 span{color: #333} .chart_explain_dropdown .chart_type12 p {color: var(--textLight2); font-size: 13px; margin-bottom: 0px; font-weight: 400;} .durationTable tr td .agentName{color: var(--textdark2); font-size: 15px; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block} .durationTable tr td .agentName font{color: var(--textID); font-size: 13px; margin-right: 3px;} .durationTable table tr td.field_data_with_info{position: relative; padding-left: 15px;} .durationTable table tr td.field_data_with_info .counter{font-size: 15px;} .durationTable table tr td.field_data_with_info { vertical-align: top; padding-top: 10px;} .field_extra_info_btn { display: none; position: absolute; bottom: 5px; left: 15px;} .field_extra_info_btn a{color: #97bae0; font-size: 12px;} [data-theme="light"] .field_extra_info_btn a{color: #888;} .field_extra_info_btn .th_option_drop{margin-top: 0px;} .field_extra_info_btn .th_option_drop::after{left: 3px} .field_extra_info_btn .th_option_drop::before{left: 3px} .durationTable table tr:hover .field_extra_info_btn { display: block;} .durationTable table tr:hover .durationfield font { display: none;} .durationTable .percentage_bar { width: 180px; position: sticky; right: 0px; box-shadow: inset 7px 0 0px -6px var(--sparatorBorder); padding-left: 15px; padding-right: 15px;} .durationTable .percentage_bar .progress { border-radius: 0px; background: var(--lightGrayBg); height: 10px; cursor: pointer;} .percentage_info_pop{width: 100px;} .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 ;} .durationTable .collpaseRow td.field_data_with_info .counter{font-size: 13px;} /*css for duration page in performance*/ /*css for time wasted page*/ .timewastedTable{ min-height: 500px; max-height: calc(100vh - 170px); overflow:auto; } .timewastedTable .table{min-width: 1200px; } .timewastedTable .table thead tr th{top: 0px!important; font-weight: 400; padding: 4px 8px; box-shadow: inset 0 -7px 0px -6px var(--sparatorBorder);} .timewastedTable .table tr td{color: #7f9292; font-size: 12px; min-width: 160px; padding: 2px 8px;} [data-theme="light"] .timewastedTable .table tr td{color: var(--tdTextcolor)} .timewastedTable .table .firstColumn{position: sticky; left: 0px;z-index: 2; width: 40px; min-width: 40px;} .timewastedTable .table .secondColumn{position: sticky; left: 40px; z-index: 2; width: 150px; min-width: 150px;} .timewastedTable .table .thirdColumn{position: sticky; left: 190px;z-index: 2; width: 125px; min-width: 125px;} .timewastedTable .table .fourthColumn{position: sticky; left: 315px;z-index: 2; width: 80px; min-width: 80px; box-shadow: inset -7px 0 0px -6px var(--sparatorBorder)} .timewastedTable .table thead tr th.firstColumn, .timewastedTable .table thead tr th.secondColumn, .timewastedTable .table thead tr th.thirdColumn, .timewastedTable .table thead tr th.fourthColumn{z-index: 3} .timewastedTable .table thead tr th.fourthColumn{box-shadow: inset -7px 0 0px -6px var(--sparatorBorder), /* left side */ inset 0 -7px 0px -6px var(--sparatorBorder); /* bottom side */} .timewastedTable .table tbody tr td .collapseIcon{float:left; margin-right:5px; vertical-align:middle; } .timewastedTable .agentName{ color:var(--textdark2); font-size:14px; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .timewastedTable .agentName font{display: block; font-size: 12px; color: var(--textLight2);} .time_exceed_txt { color: #E15252;} .timewastedTable table tr th .badge { font-weight: normal; vertical-align: text-bottom; background: #c8d6e8; color: #353333c7} [data-theme="dark"] .timewastedTable table tr th .badge{color: #ffffffc7; background: #343d45;} .singleCounter{ text-align: center; min-width: 120px!important;} [data-theme="light"] .singleCounter .text_l_yellow{color: #52b14a !important} .timewastedTable .duration_txt { color: #5279ad !important; font-size: 16px;} .ring_drtn_clmn_tree { text-align: left; min-width: 160px;} .cmb_blck_kl { position: relative; padding-left: 10px; font-size: 12px; color: var(--textGray);} .cmb_blck_kl::after { position: absolute; left: 0px; top: 7px; content: ""; width: 1px; height: 21px; background: var(--sparatorBorder);} .cmb_blck_kl span:first-child::after { position: absolute; left:0px; top: 7px; width: 8px; height: 1px; background: var(--sparatorBorder); content: "";} .cmb_blck_kl span:last-child::after { position: absolute; left: 0px; bottom: 7px; width: 8px; height: 1px; background: var(--sparatorBorder); content: "";} .cmpr_tx45 {font-style: normal; color: #c4610a; font-size: 12px;} [data-theme="dark"] .cmpr_tx45{color: #cba673} .star_ratting { font-size: 9px; color: #ccc;} [data-theme="dark"] .star_ratting{color: #444} .progress_sarv { width:40px; height: 40px; background: #f2f2f2; border-radius: 50%; position: relative;} [data-theme="dark"] .progress_sarv{background: #1d1c1c} .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: var(--cardBg);} .infrmtion_data_mdl .modal-body{padding-left: 30px; padding-right: 30px;} .infrmtion_data_mdl .text_content_3{ font-size: 14px; color: var(--textGray); text-align: justify; } [data-theme="light"] .infrmtion_data_mdl .text_l_yellow{color: #2185f2 !important} .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;} [data-theme="light"] .infrmtion_data_mdl .bullet_list_3 li{color: #000} .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;} [data-theme="light"] .infrmtion_data_mdl .bullet_list_3.flat_indicator li font{color: #a8a49d} .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: 16px; font-weight: normal; color: #ea833a; padding-top: 25px;} [data-theme="light"] .infrmtion_data_mdl .title_hdng_3{color: #F5700C;} .explain_table_3 {margin-top: 15px; border:solid 2px #343435;} [data-theme="light"] .explain_table_3 { border-color:var(--thBg);} .explain_table_3 tr th{font-weight: 500; font-size: 13px; background: #343435;} [data-theme="light"] .explain_table_3 tr th{background: var(--thBg)} .explain_table_3 tr td, .explain_table_3 tr th{ color: #cdcdcd; border-color: transparent; } [data-theme="light"] .explain_table_3 tr td, .explain_table_3 tr th{color: var(--tdTextcolor)} .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} [data-theme="light"] .infrmtion_data_mdl .badge{background: #c8d6e8; color: #353333c7;} .infrmtion_data_mdl .hightligted_text{ padding: 10px; text-align: center; display: block; background: var(--gray200); color:#ea833a; border-radius: 5px; font-size: 18px; } /*css for time wasted page*/ /*css for agent dashboard page theme 1*/ [data-theme="light"] .agentBDTtopBar{background: #fff} .numberBox { background: #4c3a2078; border: solid 1px #735317; width: 215px; border-radius: 4px; display: inline-block; text-align: left; position: relative;} [data-theme="light"] .numberBox{background: #fff; border-color: #ddd} .quickcallinput::placeholder { color: #ffffffb0;} [data-theme="light"] .quickcallinput::placeholder{color: #82848A} .quickcallinput { border-radius: 0px; background: none; border: none; padding: 7px 12px; color: var(--textdark2); box-shadow: none; font-size: 16px; display: inline-block; width: 100%; height: inherit;} .quickcallinput:hover, .quickcallinput:focus{background: none; box-shadow: none; outline: none; border:none; color: var(--textdark2); } .quick_call_icon::after { content: "QC"; position: absolute; right: -12px; top: -6px; font-size: 10px; font-style: normal; font-family: arial;} .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);} .top_count_detail{display: inline-block; border-right: solid 1px var(--sparatorBorder); margin-right: 20px; padding-right: 20px; text-align: center;} .top_count_detail .total_label{font-size: 18px;} .top_count_detail .CounterlabelText{font-size: 13px; color: var(--textGray);} .top_count_detail .mini_chart { width: 60px; display: inline-block; margin-left: 10px; z-index: 0; position: relative;} .top_count_detail .sparklinechart{width: 100%; height: 30px;} .top_count_detail .recentcallerBtn{display: flex; flex-direction: row; width: 100px; text-align: left; font-size: 13px;} .top_count_detail .recentcallerBtn span{margin-right: 5px;} @media only screen and (max-width: 1470px){ .numberBox{width: 200px;} .top_count_detail .total_label{font-size: 16px;} .agentDashboardSection .pagetitle{font-size: 18px;} .top_count_detail{margin-right: 10px; padding-right:10px;} } .agentDB_leftSec { max-width: 380px; min-width: 350px; border-right: solid 1px var(--filterBorderColor); background: var(--contentSectinoBg)} [data-theme="dark"] .agentDB_leftSec {background: #242628} .dashabordWidgetSection { padding: 10px 0px;} .dashabordWidgetSection .headingRow{display: block; padding-bottom: 5px; margin-bottom: 5px;} .dashabordWidgetSection .headingRow h2 {font-size: 16px; color: var(--widgetHeadingColor); display: inline-block; margin-bottom: 0px;} .dashabordWidgetSection .btn-custom-gray{padding: 2px 5px; font-size: 11px;} .DBTableSec { overflow: auto; margin: 0px -15px; min-height: 100%; max-height: 100%; width: calc(100% + 30px);} .DBTableSec .table { table-layout: auto;} .DBTableSec table tr th { color: var(--textGray); font-size: 13px; border-top: none; padding: 4px 4px 4px; padding-left: 4px; vertical-align: middle; position: sticky; top: 0; z-index: 1; border-bottom: 0px; background: #1f1f20; font-weight: 500;} [data-theme="light"] .DBTableSec table tr th{background: #ECECEC} .DBTableSec table tr th:first-child { padding-left: 20px;} .DBTableSec table tr td { color: var(--tdTextcolor); border-top: solid 1px var(--borderLight); border-bottom: none; padding: 8px 4px; position: relative; font-size: 12px; vertical-align: middle; } .DBTableSec table tr td:first-child{padding-left: 20px;} .DBTableSec table tr td.id_Title a{color: inherit;} .DBTableSec table tr td.id_Title font{display: inline-block; color: var(--textGray); width: 45px; vertical-align: sub;} .DBTableSec table tr td.id_Title span { font-size: 15px; max-width:120px; color: var(--textdark2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: top;} .dashabordWidgetSection.highlightSection {background: var(--tableHighlightBg); border: solid 1px var(--tableHighlightborder);} .dashabordWidgetSection.highlightSection .headingRow { border-color: var(--tableHighlightborder);} .dashabordWidgetSection.highlightSection .DBTableSec table tr th{background: var(--tableHighlightBg);} .ad_notification_list{ max-height: calc(100vh - 480px); min-height: 300px; overflow: auto; display: block;} .ad_notification_list ul{ list-style:none; margin:0px; padding:0px; } .ad_notification_list li { display: inline-block; width: 100%; position: relative; padding: 10px; padding-top: 0px;} .ad_notification_list .n_alert_detail { background: transparent ; border-bottom: solid 1px var(--sparatorBorder); padding: 7px 10px; margin-bottom: 5px ; width: 100%;} .ad_notification_list li .ntfction_alert_info { display: block; position: relative;} .ad_notification_list li .n_alert_detail .alertName { display: block; position: relative; margin-bottom: 5px;} .ad_notification_list li .n_alert_detail .alertName span { background: var(--lightGrayBg); padding: 3px 8px; font-size: 10px; color: var(--text-dark); border-radius: 10px;} .caller_number_2x { font-weight: normal; color: #528fda; font-size: 14px; letter-spacing: 1px;} .ad_notification_list li .ntfction_alert_info .notificationMsg { color: #af8f76 ; font-size: 13px;} [data-theme="light"] .ad_notification_list li .ntfction_alert_info .notificationMsg { color: var(--textblack7);} .ad_notification_list li .n_alert_detail .alertTime { font-size: 11px; padding-top: 0px; padding-left: 8px; display: inline-block; width: 68%; color: var(--textLight2);} .ad_notification_list li .notificationdetail { padding-top: 2px; padding-bottom: 0px; padding-left: 0px; display: inline-block; width: 27%; text-align: center; color:var(--textID); } .callingListColumn{background: var(--contentSectinoBg);} .callingListBlock{background: #2B2C3B; padding: 10px; } [data-theme="light"] .callingListBlock{background: #EEEEFB} .callingListIframe{border: 0; max-height: calc(100vh - 300px); height: calc(100vh - 300px); min-height: 500px; width: 100%; background:var(--cardBg)} .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;} .calling_list_tab .nav-tabs { border: none; text-align: left; display: block;} .calling_list_tab .nav-tabs li { float: none; display: inline-block;} .calling_list_tab .nav-tabs li a { border: none; background: none; font-size: 13px; color: var(--textGray); padding-left: 0px; padding-right: 0px; margin: 0px 10px;} .calling_list_tab .nav-tabs li a.active { background: none; border-bottom: solid 2px #1976D2; color: #1976D2;} .calling_list_tab .nav-tabs li a.border-warning.active { color: #ffc107;} .calling_list_tab .nav-tabs li a.border-success.active { color: #28a745;} [data-theme="light"] .calling_list_tab .nav-tabs li a.border-warning.active{color: #000} [data-theme="light"] .calling_list_tab .nav-tabs li a.border-success.active{color: #000} .callinglistTable{margin: 0px -10px 0px; background: none; max-height: calc(100vh - 90px); height: calc(100vh - 90px); min-height: 500px; overflow: auto; border-bottom: none} .callinglistTable table thead tr th{background: #3c3d51; top: 0px;} [data-theme="light"] .callinglistTable table thead tr th{background: #e2e3f7} .callinglistTable table tbody tr td{background: none; border-top: solid 1px var(--highlightTdBorder)} .callinglistTable table tbody tr:hover td{background: var(--highlightTDBg)} .CLTableSection{display: block; width: calc(100% + 20px); margin:0 -10px; max-height: calc(100vh - 94px); height: calc(100vh - 94px); min-height: 500px; overflow: auto; } .AG_CL_table { display: table; width: 100%;} .divCell { float: left; display: table-column; width: 20%;} .headRow { border-bottom: solid 2px var(--tableBorder); background: var(--thBg); border-top: solid 1px var(--tableBorder); display: inline-block; width: 100%; position: sticky; top: 0px; z-index: 9;} .headRow .divCell { padding: 5px; color: var(--th-text-color); font-size: 13px; font-weight: 400;} .AG_CL_table .divCell:first-child{padding-left: 15px;} .divRow { display: table; width: 100%; border-bottom: solid 5px var(--contentSectinoBg); position: relative; padding: 4px 0px;} .ad_cl_contct_no{font-size: 14px; color: #d5ae3b;} [data-theme="light"] .ad_cl_contct_no { color: var(--textmBlue);} .AG_CL_table .dateField{font-size: 11px; color: var(--dateField)} .AG_CL_table .dateField font{ display: block;} .AG_CL_table .statusTag{padding: 1px 6px; font-size: 12px;} .extra_dtl_Row { display: none; width: 100%; padding-left: 15px; padding-right: 15px;} .ad_clng_lst_extradtl { width: 100%; padding-left: 50px; background: #a6a8ab14; border-radius: 5px; display: block; margin-bottom: 5px;} .divRow:hover { background: #ffffff0a;} [data-theme="light"] .divRow:hover { background: #f2f2f2;} .divRow:hover .extra_dtl_Row { display: inline-block;} .ad_counter_bx{padding: 10px 20px; font-size: 14px;border-top: solid 1px var(--filterBorderColor); margin-top:-6px } .ad_counter_bx .available_duration font { font-size: 15px; color: var(--blackMedium);} .ad_counter_bx .available_duration .hhmmss_indicator { color: var(--textLight2); display: block; font-size: 10px; font-style: normal; text-align: left; line-height: normal;} .callBackColumnSection{max-width: 320px; border-left: solid 1px var(--BorderColor2); padding: 0px;} .callBackSection{background: #263f58a3; } [data-theme="light"] .callBackSection{background: #edf4fc; } .callbackList{margin: 0px ; width: 100%; height: calc(100vh - 400px); min-height: 400px; max-height: calc(100vh - 400px); overflow: auto; } .callbackList .headRow {background:#1d2b3a;} [data-theme="light"] .callbackList .headRow {background: #e5f1fd; border-color: #d5e2ee} .callbackList .headRow .divCell{font-weight: 400; font-size: 12px;} .callbackList .divRow { border-bottom: solid 1px #4266951a;} [data-theme="light"] .callbackList .divRow:hover{background:#dae6f2; } .callbackList .remaingTime{color: #d5ae3b } [data-theme="light"] .remaingTime{color:var(--textmBlue) } /*css for agent dashboard theme 2*/ .AgentImg{ width:70px; } .AgentImg span { width: 70px; height: 60px; border-radius: 5px; display: block; background: #fff; border: solid 1px #ddd; text-align: center; font-size: 35px; font-weight: 200; line-height: 56px; color: #597ce6;} [data-theme="dark"] .AgentImg span{background: #ffffff17; border-color: #444} .Agent-profile-card h5{font-size: 22px; font-weight: 300} .statCounter{margin-top: 10px; max-width: 800px;} .statCounter .col{padding: 0px 5px; text-align: center;} .statCounter .col span{color: var(--textGray); font-size: 14px;} .statCounter .col span font{display: block; font-size: 16px;} .quickcallInput{background: #fff; padding: 5px 10px; border-radius: 40px; width: 270px; display: inline-flex; flex-direction: row; align-self: center; margin-left: auto; border: solid 1px var(--header-border)} [data-theme="dark"] .quickcallInput{background: #292c35; border-color: #3e445c} .quickcallInput input[type="text"]{background: none; border: none; outline: none; font-size: 16px; padding: 5px; width: 150px; font-weight: 500; letter-spacing: 2px; line-height: normal;} [data-theme="dark"] .quickcallInput input[type="text"]{color: #cdcdcd} .quickcallInput input[type="text"]::placeholder {font-weight: normal; font-size: 15px;} .QcallBtn{background: #597ce6; color: #fff; width: 30px ;height: 30px; border-radius: 50%; text-align: center; border:none; align-self: center; margin-left: auto;} .QcallBtn2{background: #fff; color: #333; width: 30px ;height: 30px; border-radius: 50%; text-align: center; border:none; align-self: center; margin-left: auto;} [data-theme="dark"] .QcallBtn2{background: #4f4f4f; color: #cdcdcd} .agentDBMainSection{border-top: solid 1px var(--sparatorBorder); background: #fff; } [data-theme="dark"] .agentDBMainSection {background: #2C2E2F; } .qcerror_msg{position: absolute; top: 40px; padding: 0 5px; left: 43px; border: none; font-size: 12px; color:#ce2635} [data-theme="dark"] .qcerror_msg{ color: #f297a0} .AgentDBLeftSec .card-hd{ padding:0 0 5px; display:flex; align-items:center; justify-content:space-between } .AgentDBLeftSec .card-hd h3{ margin:0; font-size:14px } .AgentDBLeftSec .card-bd{ padding:0; max-height: calc(100vh - 540px); overflow: auto; min-height: 200px; height: calc(100vh - 540px)} .campaign{ padding:6px 15px; border-radius:6px; border:1px solid var(--sparatorBorder); margin:5px 0; background:#fff } [data-theme="dark"] .campaign{background: #2C2E2F; border-color: #55555587} .campaign:hover, .campaign.active{background: #F8FAFD} [data-theme="dark"] .campaign:hover, [data-theme="dark"] .campaign.active{background: #3b4451} .campaign .camaignName{ font-weight:400; color:var(--textdark2); text-transform: capitalize; font-size: 13px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .campaign:hover .camaignName{color: var(--textmBlue);} .campaign .camaignName font{color: var(--textID);} .campaign .hitCount{ color:var(--textGray); font-size:12px ; padding-left: 23px; text-transform: capitalize;} .campaign .hitCount font{color: green; font-weight: 500} [data-theme="dark"] .campaign .hitCount font{color: #52a052} .callingListSection .nav-tabs{ border-bottom: none; margin-bottom: -1px} [data-theme="dark"] .callingListSection .nav-tabs{border-color: #555} .callingListSection .nav-tabs .nav-link{font-size: 14px; color: var(--textGray); margin-bottom: 0px;} [data-theme="dark"] .callingListSection .nav-tabs .nav-link:hover{border-color: #555} .callingListSection .nav-tabs .nav-link.active{ background: #F8FAFD; border-color: var(--sparatorBorder); border-bottom-color: transparent; font-weight: 500; color: var(--textdark2); margin-right: 4px;} [data-theme="dark"] .callingListSection .nav-tabs .nav-link.active{background: #3a3a3a; border-color: #555; border-bottom-color: transparent;} /*.callingListSection .tab-content{background: #F8FAFD; border: solid 1px var(--sparatorBorder); border-top: none; min-height: calc(100vh - 200px); max-height: calc(100vh - 200px); overflow: auto;}*/ .callingListSection .tab-content{background: #F8FAFD; border: solid 1px var(--sparatorBorder); min-height: calc(100vh - 42px); max-height: calc(100vh - 42px); overflow: auto; border-radius: 0px 10px 10px 10px} [data-theme="dark"] .callingListSection .tab-content{background: #3a3a3a; border-color: #555} .table-wrap{ padding:10px; font-size:12px; } .table-wrap table{ width:100%; border-collapse:separate; border-spacing:0 8px; border-radius:12px; } .table-wrap thead th{ text-align:left; font-size:12px; color:var(--th-text-color); padding:0 8px } .table-wrap tbody tr{ box-shadow: var(--shadow); border-radius:12px; position:relative; } .table-wrap tbody tr:hover .contactNumbr{color: var(--textmBlue);} .table-wrap tbody td{ padding:7px 8px; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff; vertical-align:top ; font-size: 12px; color: #444} .table-wrap tbody td:first-child{ border-left:1px solid #eee; border-top-left-radius:12px; border-bottom-left-radius:12px } .table-wrap tbody td:last-child{ border-right:1px solid #eee; border-top-right-radius:12px; border-bottom-right-radius:12px } [data-theme="dark"] .table-wrap tbody td{background: #444; border-color: #444; color:#cdcdcd} .table-wrap tbody td .callIDTag{color: var(--textLight2); display: block; opacity: 0; font-size: 12px;} .table-wrap tbody td .callIDTag font{color: var(--textGray);} .table-wrap tbody tr:hover .callIDTag{opacity: 1} .table-wrap tbody td .call_type_2X {font-size: 13px; color: var(--textdark2); display: block;} .table-wrap tbody tr td .extraFieldInfo{ position:absolute; left:10px; width:98%; bottom:-5px; opacity:0; color:var(--textLight2); background:#fff; border-radius:5px; padding:0px 5px; border:solid 1px #eee; background:#f9f9f9 } [data-theme="dark"] .table-wrap tbody tr td .extraFieldInfo{background: #3a3a3a; border-color: #464646} .table-wrap tbody tr td .extraFieldInfo span{color: var(--textLight2); margin-right: 5px; margin-left: 5px; font-size: 12px;} .table-wrap tbody tr td .extraFieldInfo span font{color: var(--textGray);} /*.pendingListTbl tbody tr:hover td{ height:60px; }*/ .pendingListTbl tbody tr:has(.extraFieldInfo):hover td { height: 60px; } .table-wrap tbody tr:hover .extraFieldInfo{opacity: 1} .bginnerBx{background: #eaf5fc; border-radius: 10px; border:solid 1px #c7dceb; padding: 5px; min-height: calc(100vh - 153px); } [data-theme="dark"] .bginnerBx{background:#455057; border-color:#576d7e } .callbackSection{background: #fff; border-radius: 6px; } [data-theme="dark"] .callbackSection{background: #2c2e2f} .callbackSection .card-hd{ padding:10px 15px 0px; } .callbackSection .card-bd{max-height: calc(100vh - 550px); padding: 5px;} .callback-item{ display:flex; align-items:center; justify-content:space-between; padding:5px 10px; border-radius:12px; border:1px solid #eee; margin:5px 0; } [data-theme="dark"] .callback-item{border-color: #55555587} .callback-item .MoNumber{ color: var(--textmBlue); font-size: 14px;} .callback-item .timeInfo{ font-variant-numeric: tabular-nums; color:#597ce6; font-weight:500 } .agentStatsContainer { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5px; padding: 5px; max-width: 100%; margin: auto; background: #ffffff; border-radius: 5px;} [data-theme="dark"] .agentStatsContainer{background: #2c2e2f} .agentStatsContainer .stat-block { display: flex; flex-direction: column; align-items: flex-start; padding:7px 10px; background: #f3f6fa; border-radius: 6px; min-width: 100%; min-height: auto; } .agentStatsContainer .stat-block.weblogin{background: #5A4FCF15; border:solid 1px #5A4FCF30} .agentStatsContainer .stat-block.calllogin{background: #008bd815; border:solid 1px #008bd830} .agentStatsContainer .stat-block.break{background: #ED293915; border:solid 1px #ED293925} .agentStatsContainer .stat-block.availDuration{background: #CF794F14; border:solid 1px #CF794F30} .agentStatsContainer .stat-block.talkDuration{background: #0FBD5C15; border:solid 1px #0FBD5C30} .agentStatsContainer .stat-block.avgTalk{background: #328B0015; border:solid 1px #328B0030} .agentStatsContainer .stat-block.hold{background: #ED912115; border:solid 1px #ED912130} .agentStatsContainer .stat-block.avgHold{background: #4FBDCF14; border:solid 1px #4FC3CF30} [data-theme="dark"] .agentStatsContainer .stat-block.weblogin{background: #5A4FCF20; border:solid 1px #5A4FCF50} [data-theme="dark"] .agentStatsContainer .stat-block.calllogin{background: #008bd820; border:solid 1px #008bd840} [data-theme="dark"] .agentStatsContainer .stat-block.break{background: #ED293920; border:solid 1px #ED293940} [data-theme="dark"] .agentStatsContainer .stat-block.availDuration{background: #CF794F20; border:solid 1px #CF794F40} [data-theme="dark"] .agentStatsContainer .stat-block.talkDuration{background: #0FBD5C20; border:solid 1px #0FBD5C40} [data-theme="dark"] .agentStatsContainer .stat-block.avgTalk{background: #328B0020; border:solid 1px #328B0040} [data-theme="dark"] .agentStatsContainer .stat-block.hold{background: #ED912120; border:solid 1px #ED912140} [data-theme="dark"] .agentStatsContainer .stat-block.avgHold{background: #4FBDCF20; border:solid 1px #4FC3CF40} .agentStatsContainer .stat-header {display: flex; align-items: center; font-size: 13px; font-weight: 400; color: var(--textGray); } .agentStatsContainer .stat-value {font-size: 13px; color: var(--textdark2); margin-bottom: 0px; } .agentStatsContainer .stat-note { font-size: 13px; color: var(--textLight2); display: flex; } .agentStatsContainer .stat-value.red {color: #eb6666;} .recentCallButton{ display:inline-block; padding:3px; border:none; border-radius:5px; font-size:13px; line-height:normal; background:var(--cardBg); margin-left:10px; color:#597ce6; border:solid 1px #597ce6 } .callerRecentCallTbl{ display: table; margin: 0 auto; max-width: 900px; width: 100%; } .callerRecentCallTbl table{ width:100%; border-collapse:separate; border-spacing:0 8px; border-radius:12px; } .callerRecentCallTbl thead th{ text-align:left; font-size:13px; color:var(--th-text-color); padding:8px; border:none } .callerRecentCallTbl tbody tr{ box-shadow: var(--shadow); border-radius:12px; } .callerRecentCallTbl tbody td{ padding:7px 8px; border-top:1px solid var(--sparatorBorder); border-bottom:1px solid var(--sparatorBorder); background:var(--gray100) } .callerRecentCallTbl tbody td:first-child{ border-left:1px solid var(--sparatorBorder); border-top-left-radius:12px; border-bottom-left-radius:12px } .callerRecentCallTbl tbody td:last-child{ border-right:1px solid var(--sparatorBorder); border-top-right-radius:12px; border-bottom-right-radius:12px } .callerRecentCallTbl tbody tr:hover td{background: var(--gray200)!important} .callBoxOnDashboard{bottom:20px; width:305px; right:22px; } .close_ad_actvty_bx1{ font-size: 18px; cursor: pointer; margin-right: 0px; background: var(--chipBg2); padding: 5px 10px; line-height: normal; border-radius: 4px; position: absolute; right: 15px; top: -10px;} .campaignNameDtl{padding-top: 4px; padding-left: 15px; color: var(--blackMedium); font-size: 15px;} .campaignNameDtl span{ color:var(--textLight2); } .campaignNameDtl font{ color:var(--textmBlue); } /* css for sidebar recent caller detail */ .recentCallActivitySlider{width: calc(100% - 56px); top: 46px; height: calc(100vh - 46px); right: -100%; background:var(--contentSectinoBg); box-shadow: none!important; padding-top: 0px!important} .recentCallActivitySlider.show{z-index: 1!important} .recentCallActivitySlider .closeDispositionrecord{z-index: 999; right: 15px; top: -15px;} .ADcalldispositionsec{position: relative; display: inline-block;} .lTitle{color: #d0b981; margin-bottom: 0px; display: block; margin-top: -10px; font-size: 12px;} .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;} .callerDetailTab{ padding-left:15px; background:#242628; border-bottom: solid 1px #333; padding-top:5px; padding-bottom:5px; } .callerDetailTab .basic-btn{background: #8dadd038; color: #aaa;} .callerDetailTab .basic-btn.active{color: #cdcdcd; background:#2880df8a } .ad_caller_actvty_bx1 h3{margin-bottom: 10px;} .ad_caller_actvty_bx1{padding-top: 0px;} .lTitle{margin-top: 5px;} .customlevelBtn{letter-spacing: normal; font-size: 13px; text-align: center; background: var(--customBtnBg1); border: solid 1px var(--customBtnborder1) ; color: var(--customBtncolor1); padding: 5px 10px; border-radius: 4px; cursor: pointer;} .customLevl_option { background: var(--dropdownBg); 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: 550px; position: relative; } .customLevl_option::after { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--dropdownBg); position: absolute; top: -8px; right:50px; content: "";} .customLevl_option .agent_list_32 ul{max-height: 350px; min-height: 350px; overflow: auto;} .customLevl_option .agent_list_32 li .custom-control label font{max-width: 145px; min-width: 145px; display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 4px; color: #cdcdcd; padding: 3px 7px; font-size: 13px; background: #55513d; border-radius: 4px; padding-left: 7px; margin: 0px 5px;} [data-theme="light"] .customLevl_option .agent_list_32 li .custom-control label font{background: var(--chipBg); color: #555} .customLevl_option .agent_list_32 li.labelblue .custom-control label font{background: #4e588d} .customLevl_option .agent_list_32 li.labelpurple .custom-control label font{background: #5a4879} .customLevl_option .agent_list_32 li.labelorange .custom-control label font{background: #876431} .customLevl_option .agent_list_32 li.labeldarkorange .custom-control label font{background: #6f4302} [data-theme="light"] .customLevl_option .agent_list_32 li.labelblue .custom-control label font{background: #cad0f0} [data-theme="light"] .customLevl_option .agent_list_32 li.labelpurple .custom-control label font{background: #decbff} .customLevl_option .agent_list_32 li .custom-control label{color: #666} .customLevl_option .agent_list_32 li .custom-control{margin-bottom: 0px!important; margin-right: 0px!important} .customLevl_option .custom-control-label:before{background: #ffffff4f} .customLevl_option .apply_btn_sec { display: inline-block; width: 100%; padding: 15px 5px 5px 5px; text-align: center; border-top: solid 1px var(--sparatorBorder); margin-top: 10px;} .customLevl_option .apply_btn_sec .apply_btn { padding: 5px 30px 8px; border-radius: 20px; border: solid 1px var(--btnPrimaryBorder) !important; font-size: 14px; background: var(--btnPrimaryBg); color: var(--btnPrimaryColor) !important;} .customLevl_option .serach_bx_sec { display: inline-block; width: 100%; padding: 10px;} .customLevl_option .serach_bx_sec .serach_bx_inner { width: 100%; background-color: var(--formControlBg); padding: 4px 10px 6px; border-radius: 4px; color: var(--formControlText); border:solid 1px var(--sparatorBorder);} .customLevl_option .serach_bx_sec .serach_bx_inner i { vertical-align: middle; font-size: 12px;} .customLevl_option .serach_bx_sec .serach_bx_inner input { background: transparent; border: 0px; width: 80%;color: var(--formControlText);; font-size: 13px; vertical-align: middle;} .customLevl_option .serach_bx_sec .serach_bx_inner input:hover,.customLevl_option .serach_bx_sec .serach_bx_inner input:focus{box-shadow: none; outline: none; } .call-status-bar { background: var(--cardBg); padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-height: 65px; border-bottom:solid 1px var(--sparatorBorder); } /* Left Section */ .caller-info { display: flex; align-items: center; padding-right: 25px; border-right: 1px solid var(--sparatorBorder); } .icon-box { width: 48px; height: 48px; background-color: #EFF6FF; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .icon-box i { color: var(--textmBlue); font-size: 20px; transform: rotate(15deg); } .caller-details h2 { font-size: 20px; color: var(--textmBlue); font-weight: 400; margin: 0; line-height: 1.2; } .caller-details span { font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--textID); letter-spacing: 0.5px; } /* Middle Section */ .call-meta-info { display: flex; flex-grow: 1; padding-left: 25px; gap: 40px; } .meta-item label { display: block; font-size: 10px; font-weight: 500; text-transform: capitalize; color: var(--textID); margin-bottom: 2px; letter-spacing: 0.5px; } .meta-item p { font-size: 15px; font-weight: 400; color: var(--textdark2); margin: 0; } /* Right Section */ .action-controls { display: flex; align-items: center; gap: 10px; } .custom-dropdown i { font-size: 12px; color: #64748B; } .closeCallDtlBox { width: 40px; height: 32px; background-color: var(--AlertdangerBg); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; border:solid 1px var(--Alertdanger-border); } .closeCallDtlBox i { color: #e67286; font-size: 16px; } .callActicityTabArea{ width:100%; padding:0px; } .callerActivityNav .nav-tabs{border-bottom: 1px solid var(--BorderColor2); } .callerActivityNav .nav-item .nav-link { color: var(--textGray); font-size: 14px; margin-right: 3px; border:none; border-radius: 0px; padding:12px 15px; position: relative;} .callerActivityNav .nav-item .nav-link:hover, .callerActivityNav .nav-item .nav-link:focus{ border:none} .callerActivityNav .nav-item .nav-link.active { color: var(--textmBlue); border:none; background:rgb(37 99 235 / 0.05); } .callerActivityNav .nav-item .nav-link.active:after{position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--textmBlue); content: "";} .callActicityTabArea .callerActivityTab{background: var(--cardBg); min-height: calc(100vh - 130px); max-height: calc(100vh - 130px); padding: 10px 10px; overflow: auto; padding-bottom: 340px;} .contactFormInnerTab{ margin-bottom:0px; } .contactFormInnerTab .nav{border-bottom:none;} .contactFormInnerTab .nav .nav-item .nav-link{margin-right: 3px;font-size: 13px; color: var(--textGray); border:solid 1px var(--sparatorBorder); border-bottom: transparent; text-transform: capitalize; border-radius:.25rem .25rem 0px 0px } .contactFormInnerTab .nav .nav-item .nav-link.active{ background: var(--gray100); border-color: var(--sparatorBorder); color: var(--textdark2); } .FormMainTabContent{background:var(--gray100) ; border:solid 1px var(--sparatorBorder); padding: 10px; min-height:500px} .FormMainTabContent .FormArea{margin-top: 0px;} .formField{list-style: none; margin: 0px -5px; padding: 0px;} .formField li{display: inline-block; width: 24%; padding: 3px; vertical-align: top;} .formField li label{color: var(--textGray); font-size: 12px; margin-bottom: 1px; display: inline-block; width: 30%; text-align: right; vertical-align: top; padding-right: 10px;} .formField li .form-control { background: #393737; border-color: var(--sparatorBorder); font-size: 13px; color: #559c56; border-radius: 5px; box-shadow: none; display: inline-block; width:65%; height:auto; padding:4px 8px; } [data-theme="light"] .formField li .form-control{color: #2f8c30; background: #fff} .formField li .form-control::placeholder{color: var(--textDisbaled);} .SectionCard{background: #3234358c; border:solid 1px #333; border-radius: 10px;} [data-theme="light"] .SectionCard{background: #f9f9f9; border-color: #ddd;} .DefaultTable thead th{background: none; border-top: 0px; border-bottom: solid 2px var(--sparatorBorder); font-size: 13px; font-weight: 400; color: var(--textGray); padding: 12px 8px; vertical-align: middle;} .DefaultTable tbody tr{border-top: solid 1px var(--sparatorBorder);} .DefaultTable tbody td{color: var(--tdTextcolor); border-color: var(--sparatorBorder); padding: 8px 8px; vertical-align: middle; font-size: 13px; border: 0px} .DefaultTable tbody tr:hover td{background: #262626} [data-theme="light"] .DefaultTable tbody tr:hover td{background: #eee} .DefaultTable thead th:first-child, .DefaultTable tbody td:first-child{padding-left: 15px;} .DefaultTable thead th:last-child, .DefaultTable tbody td:last-child{padding-right: 15px;} .DefaultTable tbody td .statusTag {font-size: 12px; padding: 1px 8px;} .dispoTab{border-color: var(--sparatorBorder);} .dispoTab .nav-link{color: var(--textGray); border:none; border-bottom: solid 1px transparent; font-size: 15px; padding: 10px;} .dispoTab .nav-link.active, .dispoTab .nav-link.active:hover{ color: var(--textmBlue); background: none; border-bottom: solid 1px #EA9108; font-weight: 500;} .dispoTab .nav-link:hover{border-color:transparent; color:var(--textdark2); } .sctnBtndispo{display: inline-block;} .sctnBtndispo button{background: none; border:none; color: #888787;} .sctnBtndispo button:hover{color: #cdcdcd;} .activeDisporow{display: inline-block; width: 88%;} .activeDisporow font { max-width: 132px; min-width: 132px; display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #cdcdcd;font-size: 13px; background: #55513d; border-radius: 4px; margin: 0px 5px; padding: 3px 7px} [data-theme="light"] .activeDisporow font{background: var(--chipBg2); color: #555} .CallernoteList{display: inline-block; width: 100%; margin-top: 10px;max-height: calc(100vh - 300px); min-height: inherit; overflow: auto; min-height: 400px;} .CallernoteList ul{list-style: none; margin: 0px; padding: 0px; position: relative;} .CallernoteList ul li{display: inline-block; width: 100%; margin-bottom: 10px; position: relative; padding-left: 0px;} .CallernoteList ul li .clr_history_time{ color: #cdcdcd; display: block; background: #f0f8ff0a; border-radius: 4px; padding: 5px 5px 5px 7px; } .CallernoteList ul li .clr_history_time .calltype{color: #888} .CallernoteList ul li .notesBLock{background: #f0f8ff0a; padding: 5px 5px 5px 10px; border-radius: 0px; border-radius: 5px; position: relative; border: solid 1px #cdcdcd17} [data-theme="light"] .CallernoteList ul li .notesBLock{background: #f9f9f9; border-color: #eee} .CallernoteList ul li .notesBLock .tag_icn3 {display: inline-block; color: #cdcdcd; background: rgba(37, 37, 37, 0.93); border-radius: 10px; padding: 3px 8px; font-size: 10px; line-height: normal; border: solid 1px #2d2f30;} [data-theme="light"] .CallernoteList ul li .notesBLock .tag_icn3 {background: #fff; border-color: #eee} .CallernoteList ul li .notesBLock .tag_icn3 i{ margin-right: 3px; } .CallernoteList ul li .ad_tag_alert_time{ float: right; padding-right: 15px;} .CallernoteList ul li .ad_tag_alert_time i{ line-height: normal; font-size: 11px; font-style: normal;} .CallernoteList ul li .ad_tag_create_time{margin: 0px; margin-top: 0px; opacity: 0; transition: all 0.5s;} .CallernoteList ul li .ad_tag_create_time span i{ line-height: normal; font-size: 11px; font-style: normal;} .CallernoteList ul li .notesBLock:hover .ad_tag_create_time{opacity: 1 } .CallernoteList ul li .tag_dtl_sec3clr{color: var(--textGray)} .ad_add_tag_sec{ display: block; width: 100%; margin-top: 15px; } .ad_add_tag_sec .description_inpt_bx{ display: inline-block; vertical-align: middle; width: calc(100% - 110px); position: relative; padding-bottom: 13px; } .ad_add_tag_sec .description_inpt_bx textarea{width: 100%; padding: 7px 15px; background: #202121; border-radius: 5px; border: solid 1px #2c2e2f; color: #9e9e9d; font-size:13px; height: 65px; } .ad_add_tag_sec .description_inpt_bx textarea:hover, .ad_add_tag_sec .description_inpt_bx textarea:focus{outline: none;} [data-theme="light"] .ad_add_tag_sec .description_inpt_bx textarea{background: #eee; border-color: #ddd} .ad_add_tag_sec .sbmt_btn_sec{width: 100px; vertical-align: middle; display: inline-block; padding-left: 5px; text-align:right; } .ad_add_tag_sec .sbmt_btn_sec .btn{font-size: 13px; padding: 5px 15px; border-radius: 20px;} .ad_Caller_info_sec{display: inline-block; width: 100%; } .ad_Caller_info_sec ul{list-style: none; margin: 0px; padding: 0px; column-gap: 6px; display:grid; grid-template-columns:repeat(5, 1fr); counter-reset: myCounter;} .ad_Caller_info_sec ul li{ margin-bottom: 6px; position: relative; height: 70px;} .ad_Caller_info_sec ul li .fieldBox{background: #2b2f30; padding:5px 15px; border-radius: 6px; height: 70px; min-height: 70px; width: 100%; position: absolute; left: 0px; top: 0px; border:solid 1px transparent;} [data-theme="light"] .ad_Caller_info_sec ul li .fieldBox{background: #f9f9f9; border-color: #eee} .ad_Caller_info_sec ul li label{display:block; color: #6f858f; font-size: 12px; margin-bottom: 0px; } [data-theme="light"] .ad_Caller_info_sec ul li label{color: #6260a4} .ad_Caller_info_sec ul li span{display: inline-block; color: #8c8b8b; font-size: 15px; padding: 1px; padding-left: 6px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} [data-theme="light"] .ad_Caller_info_sec ul li span{color:#555 ;} .ad_Caller_info_sec ul li span.longcontent{font-size: 12px;} .ad_Caller_info_sec ul li label:before{counter-increment: myCounter; content: "" counter(myCounter) ; color: #767575; margin-right:3px; width:15px; text-align:center; margin-left:-8px; } .ad_Caller_info_sec ul li .fieldBox:hover{height: auto; z-index: 9; border: solid 1px #585656; box-shadow: rgba(0, 0, 0, 0.7) 0px 2px 4px 0px, rgba(42, 42, 42, 0.93) 0px 2px 16px 0px} [data-theme="light"] .ad_Caller_info_sec ul li .fieldBox:hover{box-shadow:rgba(242, 242, 242, 0.27) 0px 2px 4px 0px, rgba(42, 42, 42, 0.10) 0px 2px 8px 0px ; border-color: #ddd} .ad_Caller_info_sec ul li .fieldBox:hover span{overflow: visible; display: block; -webkit-line-clamp: inherit; -webkit-box-orient:inherit; z-index: 8} @media only screen and (max-width: 1350px) { .ad_Caller_info_sec ul{grid-template-columns:repeat(4, 1fr);} } .details-card { border: 1px solid var(--sparatorBorder); border-radius: 8px; background-color: var(--cardBg); overflow: hidden; max-width: 1000px; margin: 0 auto; } .card-header-custom { padding: 8px 24px; border-bottom: 1px solid var(--sparatorBorder); display: flex; align-items: center; justify-content: space-between; background: var(--gray200); } .card-title-content { display: flex; align-items: center; gap: 12px; } .card-title-content i { color: var(--primary-blue); font-size: 1.1rem; } .card-title-text { font-size: 14px; font-weight: 400; color: var(--textdark2); text-transform: uppercase; letter-spacing: 0.5px; } .details-grid { display: flex; flex-wrap: wrap; } .detail-item { flex: 0 0 50%; display: flex; border-bottom: 1px solid var(--sparatorBorder); min-height: 45px; } /* Vertical divider in the middle */ .detail-item:nth-child(odd) { border-right: 1px solid var(--sparatorBorder); } /* Remove bottom border for last two items */ .detail-item:nth-last-child(-n+2) { border-bottom: none; } .detail-label { flex: 0 0 40%; padding: 8px 24px; color: var(--textID); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px; display: flex; align-items: center; } .detail-value { flex: 1; padding: 8px 24px; color: var(--textdark2); font-size: 14px; font-weight: 500; display: flex; align-items: center; } /*css for custom form*/ .headingSection { background: #252728; border-bottom: solid 1px #303031; border-top: solid 2px #212528; padding-top: 8px; padding-bottom: 5px; width: calc(100% + 30px);} .formSection{width: 100%;} .complainTab .nav-tabs { padding-left: 15px; border-bottom: solid 1px var(--sparatorBorder);} .complainTab .nav-tabs .nav-link { color: var(--textGray); font-size: 14px; padding: 5px 15px; margin-bottom: -1px} .complainTab .nav-tabs .nav-link:hover { color: var(--textdark2); border-color: var(--sparatorBorder) var(--sparatorBorder) transparent;} .complainTab .nav-tabs .nav-link.active { background: var(--cardBg); color: var(--text-dark); border-color: var(--sparatorBorder) var(--sparatorBorder) transparent;} .formSection h3{ font-weight:300; color:#a37329; font-size:18px; margin:10px 0px } .formDtlBox{background: var(--cardBg); padding: 10px; border-radius: 0px; width: 100%; border: solid 1px var(--sparatorBorder); margin-top: -1px} .formDtlBox .form-group{margin-bottom: 5px} .formDtlBox .frm-label { font-size: 13px; color: var(--textGray); font-weight: 400; margin-bottom: 0px; display: block; text-align: right} .formDtlBox .form-group .form-control { border: solid 1px var(--sparatorBorder); height: auto; border-radius: 5px; background: var(--formControlBg); font-size: 13px; color: var(--formControlText); transition: all .3s} .formDtlBox .form-group .custom-control-label{font-size: 13px; color: var(--formControlText);} .formSection .saprator{border-color: var(--BorderColor2); border-width: 2px; width: calc(100% + 20px); margin: 25px -10px} .blockHdng22 { font-size: 16px!important; margin-bottom: 8px!important; color: #EA9108;} .aiSection{border-left: solid 1px #eeeeee1f; background: #212629; position: fixed; right: -320px; top: 46px; width: 320px; padding: 15px; z-index: 22; min-height: calc(100vh - 46px); transition: all .5s} .recentCallActivitySlider.show .aiSection{right: 0px} [data-theme="light"] .aiSection{background: #eaf2ff; border-left: solid 1px var(--commonBorderColor);} .aiAssitantBox{width: 100%} .aiAssitantBox .fromWizard{width: 100%} .aiAssitantBox .fromWizard ul { list-style: none; margin: 0px; padding: 0px; position: relative;} .aiAssitantBox .fromWizard ul::after { position: absolute; left: 9px; top: 0px; width: 1px; height: 100%; background: var(--BorderColor2); content: "";} .aiAssitantBox .fromWizard ul li{width: 100%; margin-bottom: 7px; display: block;} .aiAssitantBox .fromWizard ul li .nav-link { padding: 0px; color: inherit; display: block; position: relative; padding-left: 35px;} .aiAssitantBox .fromWizard ul li span { display: block; font-size: 13px; color: var(--textGray); font-weight: 400; line-height: normal;} .aiAssitantBox .fromWizard ul li .nav-link::after { position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; line-height: 18px; font-size: 13px; font-weight: 400; background: #4a4646; border: solid 1px #4f4e4e; border-radius: 50%; text-align: center; content: "1"; z-index: 2; color: #aaa} [data-theme="light"] .aiAssitantBox .fromWizard ul li .nav-link::after{background: #d9d9d9; border-color: #d9d9d9} .aiAssitantBox .fromWizard ul li:nth-child(1) .nav-link:after{content: "1"} .aiAssitantBox .fromWizard ul li:nth-child(2) .nav-link:after{content: "2"} .aiAssitantBox .fromWizard ul li:nth-child(3) .nav-link:after{content: "3"} .aiAssitantBox .fromWizard ul li:nth-child(4) .nav-link:after{content: "4"} .aiAssitantBox .fromWizard ul li:nth-child(5) .nav-link:after{content: "5"} .aiAssitantBox .fromWizard ul li:nth-child(6) .nav-link:after{content: "6"} .aiAssitantBox .fromWizard ul li:nth-child(7) .nav-link:after{content: "7"} .aiAssitantBox .fromWizard ul li:nth-child(8) .nav-link:after{content: "8"} .aiAssitantBox .fromWizard ul li:nth-child(9) .nav-link:after{content: "9"} .aiAssitantBox .fromWizard ul li .nav-link.active::after { background: #1661F2; border-color: #1661F2; color: #fff; content: "\f00c" !important; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 9px} [data-theme="light"] .aiAssitantBox .fromWizard ul li .nav-link.active::after{background: #6F9DF5; border-color: #6F9DF5} .rightMidSec{width: 100%; margin: 10px -15px 0px; width: calc(100% + 30px); background: #373839; border-bottom: solid 1px #514f4f; border-top: solid 1px #514f4f; padding:10px 15px; max-height:calc(100vh - 600px); min-height:calc(100vh - 600px); overflow:auto } [data-theme="light"] .rightMidSec{background: #ffffff91; border-color: var(--commonBorderColor);} .transscriptBox{ width:100%; } .transscriptBox ul{list-style: none; margin: 0px ;padding: 0px; } .transscriptBox ul li{ display:inline-block; width:100%; margin-bottom:3px } .transscriptBox ul li span{ display:inline-block; padding:5px 8px; width: 100%; font-size:12px; color:#ffffffc9; position:relative; padding-left:22px } [data-theme="light"] .transscriptBox ul li span{color: #202020c9} .transscriptBox ul li span:after{position: absolute; left: -6px; top: 5px; content: "\f590"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #7b9cdd; font-size: 11px; width: 20px; height: 20px; line-height: 20px; background: #4d4b4b; text-align: center; border-radius: 5px;} [data-theme="light"] .transscriptBox ul li span:after{background: var(--chipBg2);} .transscriptBox ul li.user span:after{content: "\f007"; font-weight: 400; color: #f7ae78} .whastMsgSection{width: 300px; position: fixed; right: -320px; height: 100vh; background: var(--cardBg); top: 47px; border-left: solid 1px var(--BorderColor2); padding: 10px; transition: all .5s} .recentCallActivitySlider.show .whastMsgSection{right: 320px} .mailWhatsppBlock{margin-left: -10px; margin-right: -10px} .mailWhatsppBlock .nav-tabs{padding-left: 10px; border-bottom: solid 1px var(--BorderColor2); } .mailWhatsppBlock .nav-tabs .nav-link { color: var(--textGray); font-size: 13px; padding: 5px 10px;} .mailWhatsppBlock .nav-tabs .nav-link:hover { color: var(--textGray); border-color: var(--BorderColor2) var(--BorderColor2) transparent;} .mailWhatsppBlock .nav-tabs .nav-link.active { background: var(--contentSectinoBg); color: #EA9108; border-color: var(--BorderColor2) var(--BorderColor2) transparent;} [data-theme="light"] .mailWhatsppBlock .nav-tabs .nav-link.active { color: var(--textmBlue);} .mailWhatsppBlock .tab-content{padding:5px;} .whatsappMessage{ width:100%; } .whatsappMessage ul{list-style: none; margin: 0px ;padding: 0px; max-height:calc(100vh - 360px); overflow:auto; } .whatsappMessage ul li{ display:block; width:100%; margin-bottom:5px; } .whatsappMessage ul li font{display: inline-block; text-align:center;background: #555; border-radius: 50%; width: 25px; height: 25px; line-height: 25px; margin-right: 4px; vertical-align: top; font-size: 12px; color: #aaa; } .whatsappMessage ul li .custom-control{display: inline-block; vertical-align: top} .whatsappMessage ul li span{ display:inline-block; padding:6px 12px; background:#555; border-radius:0px 10px 10px 10px; width: calc(100% - 38px); font-size:12px; color:#fff } [data-theme="light"] .whatsappMessage ul li span{background: var(--chipBg); color: var(--customBtncolor1)} .whatsappMessage ul li.agent span{ background:#2B9754; } .attetchmentBtn{padding: 4px 6px; background: #4a4431; border-color:#716e66; color: #b5b3b3} [data-theme="light"] .attetchmentBtn{background: #cae5f9; border-color: #c3d2db; color: #605f5f} .attetchmentBtn:hover{background: #4a4431; border-color:#716e66; color: #b5b3b3} [data-theme="light"] .attetchmentBtn:hover{background: #eeeeee61; border-color: #c3d2db; color: #605f5f} .attetchmentBtn:focus, .attetchmentBtn:active{box-shadow: none!important} .emailList{} .emailList ul{list-style: none; margin: 0px -5px; padding: 0px; max-height: calc(100vh - 360px); overflow: auto;} .emailList ul li{display: block; color: var(--textdark2); padding: 5px 10px; border-bottom: solid 1px var(--sparatorBorder); cursor: pointer;} .emailList ul li:hover{background: #333} [data-theme="light"] .emailList ul li:hover{background: #f2f2f2} .emailList ul li .senderInfo{display: block; } .emailList ul li .senderInfo .senderName{font-size: 13px; color: #999; } .emailList ul li .senderInfo .timeInfo{float: right; color: #888; font-size: 11px;} .emailList ul li .mailSubject{color: var(--textdark2); font-size: 13px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .emailList ul li .mailDescription{width: 100%; color: var(--textLight2); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .previouscomplainList{border-bottom: solid 1px #333; margin-left: -10px; margin-right: -10px;} .previouscomplainList .nav-tabs{padding-left: 10px; border-bottom: solid 1px var(--BorderColor2); } .previouscomplainList .nav-tabs .nav-link { color: var(--textGray); font-size: 13px; padding: 5px 5px;} .previouscomplainList .nav-tabs .nav-link:hover { color: var(--textGray); border-color: var(--BorderColor2) var(--BorderColor2) transparent;} .previouscomplainList .nav-tabs .nav-link.active { background: var(--contentSectinoBg); color: #EA9108; border-color: var(--BorderColor2) var(--BorderColor2) transparent;} [data-theme="light"] .previouscomplainList .nav-tabs .nav-link.active {color: var(--textmBlue);} .previouscomplainList .tab-content{padding:5px;} .aidetectedList{min-height: 170px; max-height: 170px; overflow: auto;} .aidetectedList ul{list-style: none; margin: 0px; padding: 0px;} .aidetectedList ul li{display: block; border-bottom: solid 1px var(--borderLight); padding: 5px;} .aidetectedList ul li:hover{background: #2b2b2b} [data-theme="light"] .aidetectedList ul li:hover{background: #f2f2f2} .aidetectedList ul li:last-child{border-bottom: none} .aidetectedList ul li .field{display: inline-block; width: calc(100% - 55px);} .aidetectedList ul li .field font{color: var(--textID); font-weight: 500} .aidetectedList ul li .field span{color: var(--textdark2);} .aidetectedList ul li .actionBtn{display: inline-block; width: 35px; float: right; vertical-align: top; text-align: center} .aidetectedList ul li .actionBtn button{background: none; border: none; border-radius: 4px} .aidetectedList ul li .actionBtn button:hover, .aidetectedList ul li .actionBtn button:active, .aidetectedList ul li .actionBtn button:focus{background: #24482f;} .aidetectedList ul li .actionBtn button:disabled{ background: #206234; color: #ffffffad !important } .previouscomplainList ul.list{list-style: none; margin: 0px; padding: 0px 0px; min-height: 170px; max-height: 170px; overflow: auto;} .previouscomplainList ul.list li{display: block; width: 100%; border-bottom: solid 1px var(--sparatorBorder); padding: 3px 15px; } .previouscomplainList ul.list li:hover{background:#2b2b2b } [data-theme="light"] .previouscomplainList ul.list li:hover{background:#f2f2f2 } .previouscomplainList ul.list li span{display: inline-block; } .complainId, .complainId a{font-size: 14px; color: var(--textID);} .complainDate{color: var(--dateField);} .complainStatus{display: inline-block; padding: 2px 5px; background: #393939; border-radius: 4px; color: #cdcdcd; line-height: normal; font-size: 11px;} [data-theme="light"] .complainStatus{ background: #f5f5f5; color: #444; } .complainStatus.green{color: #6fb95b} .complainStatus.yellow{color: #cc8d55} .complainStatus.red{color: #e66a6a} .complainStatus.blue{color: #6a8fe6} .complainStatus.gray{color: #666} .complainStatus.orange{color: orange} .noComplainMsg {color: #b5b0a1; background-color: #fff3cd2e; border:solid 1px #ffeeba4f; padding: 5px 10px; border-radius: 5px} @media (max-height: 710px) { .aiSection{padding-top: 5px} .rightMidSec{min-height: 250px; max-height: 250px;} } .action-sec-44{width: 47%} .aidetetdTag{font-family: monospace; font-size: 14px; color: #f9cfa9; background:#46489f; padding:2px 9px; border-radius:20px;} .msgloadBtn{display: inline-block; background: #0d0d0f; border: none; padding: 2px 8px; border-radius: 18px; font-size: 11px; line-height: normal; color: #b9b8b8;} [data-theme="light"] .msgloadBtn{background: #eee; color: #5c5b5b} .aiTag{position:absolute; right:35px; top:5px} .draftTag{position: absolute; right: 0px; top: 0px; padding: 3px 10px; font-weight: 500; font-size: 13px; z-index: 9} .gradient-border { --borderWidth: 2px; background: var(--cardBg); position: relative; border-radius: var(--borderWidth); } .gradient-border:after { content: ''; position: absolute; top: calc(-1 * var(--borderWidth)); left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2); width: calc(100% + var(--borderWidth) * 2); background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); border-radius: calc(2 * var(--borderWidth)); z-index: -1; animation: animatedgradient 3s ease alternate infinite; background-size: 300% 300%; } @keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .imgPreviewBlock{display: inline-block; position: relative;} .imgPreviewBlock .DltBtn{position: absolute; right: 5px; top: 5px; background: #c41919; width: 20px; height: 19px; border-radius: 50%; border: none; color: #f0dfdf; font-size: 11px; text-align: center; } .msgTime{font-size: 11px; color: #aaa; margin-top: 4px; text-align: right} .msgDate{text-align: center; color: #999; font-size: 11px; background: #353434; display: table; padding: 2px 13px; border-radius: 5px; margin: 0 auto;} [data-trheme="light"] .msgDate{background: #eae5f9; color: #555} .whatsappMessageDropdown .btn-secondary{background: #25282a; border: solid 1px #25282a} .whatsappMessageDropdown .btn-secondary:hover, .whatsappMessageDropdown .btn-secondary:focus, .whatsappMessageDropdown.show > .btn-secondary.dropdown-toggle{background: #25282a!important; border: solid 1px #25282a!important; box-shadow: none!important} .whatsappMessageDropdown .dropdown-menu{ padding: 10px; width: 220px; 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)} /*css for cyber security form*/ /* css for sidebar recent caller detail */ /*css for agent dashboard page*/ .ifreame_placeholder { background: url('../images/iframe_loader.svg')no-repeat; background-size: 70px; background-position: center;} /*css for live callbox*/ .widget_box_fixFt { position: fixed; right: 10px; bottom: 0px; width: 325px; height: 350px;background: transparent;border: 0px;right: 0px; z-index: 999; } .live-call-widget44 {bottom: 0; font-size: 12px; right: 10px; position: fixed; width: 310px; box-shadow: 0px -1px 8px 0px rgba(0,0,0,0.45); border-radius: 0px 5px 0 0px; } .live-call-widget44 header {background: #253033; border-radius: 5px 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; } 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{} .tab-content-live-call{display: none; background: #fff; } .tab-content-live-call.current{display: inherit;} .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; display: block; padding-left: 3px; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .caller-sec-44{ width: 47%; 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: 18px;} .talktime-44 span{ font-size: 22px; 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: 25px;} .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: 28px; 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); } .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} [data-theme="light"] .btn-float{box-shadow: none} [data-theme="light"] .btn-float.red { background: #EA776F;} [data-theme="light"] .btn-float.blue { background: #58b1d9;} [data-theme="light"] .btn-float.theme-blue { background: #5E77E8;} [data-theme="light"] .btn-float.yellow { background: #eaa737;} [data-theme="light"] .btn-float.pink { background: #d0537d;} [data-theme="light"] .btn-float.orange { background: #F07A55;} [data-theme="light"] .btn-danger{background: #e15562; border-color:#e15562 } .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;} .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: #000; -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.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: var(--textGray); font-size: 14px; 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: var(--formControlBg); 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:var(--textGray);; 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: var(--formControlText); 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: var(--formControlBg); 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:var(--textGray); 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: var(--formControlText); 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: var(--gray200); 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; color: var(--textLight2);} .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: var(--textdark2); vertical-align: middle;} [data-theme="dark"] .call_frwrd_number .btn-custom-1{background: #303335; border-color: #4d4a4a!important} .callForwardAgentList li .action_sec214{display: inline-block; float: right;} .callForwardAgentList li .action_sec214 .btn{ padding: 6px 10px; border-radius: 20px; font-size: 12px; } [data-theme="dark"] .callForwardAgentList li .action_sec214 .btn-custom-1{border-color: #4a4444!important} .CFgroupList li .agant_nme21{color: var(--textdark2);} .callBoxOnDashboard{height: 332px!important; bottom: 30px!important;} .callBXCustom{box-shadow: none} .callBXCustom .live-call-counter44{display: none} ul.tabs-livecall44 li.current:empty::after { display: none; content: none; /* prevent ghost space */ } /*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;} /*wrapup task timer section css for call widget*/ .timernotification_block{background: var(--cardBg); 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: var(--textdark); margin-bottom: 20px;} .timer_font i{color: rgba(256,256,256,.5); margin-right: 5px;} .timer_heading{color: var(--text-dark2); font-size: 22px; font-weight: 300; display: block;} .timer_heading font{color: var(--textmBlue); display: block;} .show_timer_box{right: 0px} /*wrapup task timer section css for call widget*/ /*css for sip changes bbx*/ [data-theme="light"] .widget-section44{background: #fff; border:solid 1px #EAF5FC; border-top: none} [data-theme="light"] .flipbox .frontview, .flipbox .backview{background: #fff} [data-theme="light"] .live-call-widget44 header{background: #575D7B} [data-theme="light"] .paddle{background:#575D7B } [data-theme="light"] .caller-info-44 font{color: #333} [data-theme="light"] .talktime-44 font, [data-theme="light"] .calltime-44 font{color: #000} [data-theme="light"] .live-call-counter44{background: #1c991a} [data-theme="light"] .calltime-44 span{color: #2d2b29} [data-theme="light"] .caller-info-44 span{color: #1D1D1E} /*css for live callbox*/ /*css for table content loader*/ .loaderTable tr td{height: 40px;} tr.loaderRow td, tr.loaderRow th {height: 40px;} .skeleton-row { height: 15px; background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 5px; } [data-theme="dark"] .skeleton-row{ background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%); background-size: 200% 100%; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /*css for table content loader*/ /*css for other pages like no record or 404 pages*/ tr:hover td.noRecordColumn, .noRecordColumn:hover{background: inherit!important; } .noRecordColumn{text-transform:inherit!important; } .norecordSection{ display:block; padding:50px; min-height: 80vh; display:flex; flex-direction:column; justify-content:center; align-items:center; } .bannerImg{text-align: center; width: 100%} .bannerImg img{max-width: 450px; width: 100%} .norecordSection h3{text-align: center; font-size: 24px; font-weight: 400; color: var(--text-dark); margin: 20px 0px;} .unexpectedErrorMsgModal{ position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:var(--modalBg); padding:20px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); border-radius:8px; z-index:1000; width:650px; padding: 30px;} .unexpctedErrorOverlay{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:999;} /*css for other pages like no record or 404 pages*/ /*css for worflow summary page*/ .worflowSummaryTbl table tr td{vertical-align: middle ; padding: 15px 8px; border-bottom: solid 8px var(--contentSectinoBg); position: relative; } .worflowSummaryTbl table tr:last-child td{border-bottom: none!important} .worflowSummaryTbl table tr td.workflow_detail{width: 300px; vertical-align: top; padding-left: 25px!important} .worflowSummaryTbl table tr td.workflow_detail .workflowname{display: block; font-size:13px; } .worflowSummaryTbl table tr td.workflow_detail .workflowname span{color:#c4c4c4; display:block; font-size:17px; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:300px; } .worflowSummaryTbl table tr td.workflow_detail .workflowcreteTime{margin-top: 5px; display: block;} .worflowSummaryTbl table tr .actionColumn{text-align: center; width: 150px;} .worflowSummaryTbl table tr .actionColumn .text_m_blue{color: #5394da} .sourceColumn{width: 55%; padding-left: 30px!important; padding-right: 30px!important} .sourceDtlbK{border:dashed 1px var(--BorderColor2); padding: 10px; border-radius:0px 5px 5px 5px;} .sourceDtlbK ul{ list-style:none; margin:0px; padding:0px; } .sourceDtlbK ul li{display: block; margin-bottom: 5px;} .sourceDtlbK ul li .sourcefieldTag{font-size: 13px; display: inline-block; vertical-align: top; width: 140px; color: var(--textGray); text-align: right; padding-right: 20px;} .sourceDtlbK ul li .sourcsDatafield{display: inline-block; width: 65%;} .sourceDtlbK ul li .sourcsDatafield font{padding: 1px 5px; font-size: 12px; background: #68686857; margin-bottom: 2px; margin-right: 4px; border-radius: 4px; display: inline-block;} [data-theme="light"] .sourceDtlbK ul li .sourcsDatafield font{background: #c4c4c457} .sourceDtlbK ul li:last-child{margin-bottom: 0px;} .sourceDtlbK.skipCase{ margin-top:5px; background:#f7f3ec8f; border-radius:5px; } [data-theme="dark"] .sourceDtlbK.skipCase{background: #353535} .sourceDtlbK.skipCase .sourcefieldTag font{color: #d98962; margin-left: 5px;} .sourceDtlbK.skipCase .skipTag { background: #ffdbb4; color: #4a4646; padding: 2px 7px; border-radius: 4px; font-size: 12px; margin-bottom: 6px; display: inline-block;} [data-theme="dark"] .sourceDtlbK.skipCase .skipTag{background: #534a26; color: #bdbaba;} .sourceDtlbK ul li .dispoDtlSkip{ margin-bottom: 4px;} .sourceDtlbK ul li .dispoDtlSkip span { font-size: 12px; display: inline-block; width: 85px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: top; padding: 2px 4px; border-radius: 4px; background: #c4c4c457; color: #48404e} [data-theme="dark"] .sourceDtlbK ul li .dispoDtlSkip span{ background: #68686857; color: #bbb7b7;} .sourceDtlbK ul li .dispoDtlSkip font { font-size: 12px; vertical-align: top; color: #777; display: inline-block; width: 16px; background: none} .sourceColumn .sourceName span{padding: 2px 15px; font-size: 14px; border-radius: 5px 5px 0px 0px; text-align: center; display: inline-block; color: var(--textdark2); } .sourceColumn .sourceName.calldata span{background: #38b37470; } .sourceColumn .sourceName.event span{background: #5480e570; } .sourceColumn .sourceName.directory span{background: #cc9d3470; } /*css for worflow summary page*/ /*css for workflow report page*/ .workflowreportTbl .table tr td{vertical-align: middle ; padding: 10px 8px; position: relative; } .workflowreportTbl .table tr:last-child td{border-bottom: none!important} .workflowreportTbl .table tr td.workflow_detail{ vertical-align: middle; padding-left:20px!important ; width:auto; max-width: 250px;} .workflowreportTbl .table tr td.workflow_detail span{color:var(--textGray); font-size: 12px; } .workflowreportTbl .table tr td.workflow_detail .workflowcreteTime{margin-top: 5px; display: block; font-size: 12px; color: var(--textLight2); opacity: .8} .workflowreportTbl .table tr td.flow_detail{width: auto; max-width: 250px; } .workflowreportTbl .table tr td.flow_detail font{color: var(--textID); } .workflowreportTbl .table tr td.flow_detail span{color: #246BA3; font-size:14px; width:200px; display: block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-transform:capitalize; } [data-theme="light"] .workflowreportTbl .table tr td.flow_detail span{color: #111} .workflowreportTbl .table tr td.particularDtl{width: auto;} .workflowreportTbl .table tr td.particularDtl .Prttype{display: block; margin-bottom: 4px} .workflowreportTbl .table tr td.particularDtl .Prttype font{background: var(--gray200); padding: 2px 7px; border-radius: 4px; font-size: 12px; vertical-align: middle; color: var(--textdark2)} .workflowreportTbl .table tr td.particularDtl .Prttype font.event{background: #5480e570} .workflowreportTbl .table tr td.particularDtl .Prttype font.calldata{background: #38b37470 } [data-theme="light"] .workflowreportTbl .table tr td.particularDtl font.contact{color: #c65612} .workflowreportTbl .table tr td.particularDtl span{ font-size: 14px; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: middle;} .workflowreportTbl .table tr td.currentNode{max-width: 300px;} .workflowreportTbl .table tr td.currentNode font{color: #939393; display:block; } .workflowreportTbl .table tr td.currentNode span{color: var(--blackMedium); display:inline-block; font-size:14px; } .workflowreportTbl .table tr td.currentNode i{margin: 0px 4px; color: #666} .workflowreportTbl .table tr td.currentNode .else{color: #e28913;} .workflowreportTbl .table tr td.currentNode .success{color: #107b11;} .workflowreportTbl .table tr td.currentNode .failed{color: #a83a35;} .workflowreportTbl .table tr td.statusClmn .statusTag{font-size: 12px; padding: 3px 15px; border-radius: 20px; } .workflowreportTbl .table tr td.sourceClmn span{font-size: 13px; color: var(--textdark2); } .workflowreportTbl .table tr td.sourceClmn span i{vertical-align: middle; font-size: 13px; opacity: .7} .workflowreportTbl .table tr .actionColumn{text-align: center; width: 150px;} .workflowreportTbl .table tr .actionColumn .text_m_blue{color: #5394da} .workflowIndDtltbl .table tbody tr td.nodetype span{background: #3c4e66; padding: 4px 12px; font-size: 13px; border-radius: 20px; color: #ffffffc9} [data-theme="light"] .workflowIndDtltbl .table tbody tr td.nodetype span{background: var(--chipBg); color: #333} .workflowIndDtltbl .table tbody tr td.nodetype font{display: block; font-size: 13px; color: #91acce; padding-top: 4px;} .workflowIndDtltbl .table tbody tr td.nodedtl font{font-size: 12px; color: var(--textID);} .workflowIndDtltbl .table tbody tr td.nodedtl span{font-size: 13px; color: var(--textdark2); display: block; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .workflowIndDtltbl .table tbody tr td.actionclmn{font-size: 13px; border-left: solid 1px var(--sparatorBorder); border-right: solid 1px var(--sparatorBorder);} .workflowIndDtltbl .table tbody tr td.actionclmn .text_m_blue{color: #97a9bd; display: block;} .workflowIndDtltbl .table tbody tr td.actionclmn .text_l_yellow{color: #d7bf779c !important; font-size: 12px;} [data-theme="light"] .workflowIndDtltbl .table tbody tr td.actionclmn .text_m_blue{color: #2372ca; } [data-theme="light"] .workflowIndDtltbl .table tbody tr td.actionclmn .text_l_yellow{color: #c66006!important} .workflowIndDtltbl .table tbody tr td.duration{font-size: 14px; color: var(--textGray);} .workflowIndDtltbl .table tbody tr td.statusclmn{border-right: none} /*css for workflow report page*/ /*css for create dispostion page*/ .callDispoRow { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; overflow: auto; } .callDispoRow .dispoCol {flex-grow: 1; padding: 0px; min-width: 320px; max-width: 320px; position: relative; border-radius: 6px; border: solid 1px var(--commonBorderColor); background: var(--dispoBlckBg); min-height: 80vh; margin-right: 15px;} .dispoTitle{ text-transform: capitalize; color: var(--textmBlue); font-size: 18px; padding: 10px 14px 5px; display: inline-block; max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dispoCatgry{list-style: none; margin: 0px; padding: 0px;} .dispoCatgry li.catLI{display: inline-block; width: 100%; float: none; margin-bottom: 0px; padding: 6px 10px; background: var(--dispoBlckBg); color: var(--textGray); font-size: 16px; display: block; border-radius: 0px ; border-top:solid 1px var(--sparatorBorder); position: relative; } .dispoCatgry li.catLI a.catClps{display: inline-block; color: #737272; float: right;} [data-theme="light"] .dispoCatgry li.catLI a.catClps{color: #999;} .dispoCatgry li.catLI a.catClps.collapsed i:before{content: "\f229";} .catgeryName{ display: inline-block; text-transform: capitalize; color: var(--textdark2); font-size: 15px; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; cursor: pointer;} .dispoCatgry li.catLI:hover .DispActionBtn{ display: block; } .DispActionBtn{display: none; position: absolute; right: 30px; top: 8px; } .DispActionBtn button{padding: 0px; margin-right: 5px; background: none; border: 0px; outline: none; color: #fff; font-size: 12px;} .DispActionBtn button.edit{color: #5290c1;} .DispActionBtn button.delete{color:#ca5b56 ;} .DispActionBtn button.hide{color:#bf9c46 ; font-size: 13px;} .subCatSec{margin: 10px -10px -10px; background: var(--lightGrayBg); } .SubCategory{ list-style: none; margin: 0px; padding: 0px; } .SubCategory li{display: inline-block; width: 100%; float: none; background: var(--lightGrayBg); padding: 8px 10px 8px 30px; font-size: 15px; color: var(--textdark2); border-bottom: solid 1px var(--BorderColor2); position: relative; } .SubCategory li .catgeryName{font-size: 14px; color: var(--textdark2);} .dispoCatgry li.catLI:hover .SubCategory li .DispActionBtn{display: none;} .SubCategory li:hover .DispActionBtn.subCat{display: block!important;} .SubCategory li:first-child{margin-top: 10px;} .SubCategory li:last-child{border-bottom: none;} .addCatDiv{display: block; width: 100%; margin-top: 15px; padding: 0px 15px;} .addCatDiv button{display: block; background: var(--customBtnBg1); color: var(--customBtncolor1); border: dashed 1px var(--customBtnborder1); width: 100%; padding: 5px 15px 5px; text-align: center; font-size: 24px; border-radius: 4px; line-height: normal; transition: all 0.5s;} .addCatDiv button:hover{background: var(--customBtnBg1);} .addSubCatDiv{display: block; width: 100%; padding: 15px 33px 15px; } .addSubCatDiv button{display: block;background: var(--customBtnBg1); color: var(--customBtncolor1); border: dashed 1px var(--customBtnborder1); width: 100%; padding: 4px 15px 4px; text-align: center; font-size: 20px; border: dashed 1px #6a6a6a; border-radius: 4px; line-height: normal; transition: all 0.5s;} .addSubCatDiv button:hover{background: var(--customBtnBg1);} [data-theme="dark"] .addCatDiv button{background: #3e3e3d; border-color: #6a6a6a; color: #d2c998;} [data-theme="dark"] .addSubCatDiv button{background: #404040; color: #a2a2a2; border-color: #6a6a6a; } [data-theme="dark"] .addCatDiv button:hover{background:#313130 ;} [data-theme="dark"] .addSubCatDiv button:hover{color: #62a0e1 ; background: #5a5a5a;} .Dispshorting{background: none; border: none; color: var(--textLight2); font-size: 13px; margin-right: 7px; vertical-align: top; display: inline-block; line-height: normal; margin-top: 5px; cursor: move!important} .SubCategory .Dispshorting:hover{color: #555;} .ghostDropClass{background: #484847 !important;} [data-theme="light"] .ghostDropClass{background: #eee!important} .SubCategory .ghostDropClass{background: #aeaeab !important;} [data-theme="light"] .SubCategory .ghostDropClass{background: #eee !important;} .hideFagent{background: var(--customBtnGrayBg)!important; position: relative;} .hideFagent .catgeryName{color: var(--textDisbaled); text-decoration: line-through; position: relative;} .hideFagent:after{position: absolute; content: "Hidden"; right: 95px; background: #b59354; padding: 0px 5px; font-size: 11px; color: #fff; border-radius: 4px; top: 13px;} [data-theme="light"] .hideFagent:after{background: #dbdbdb; color: #464242} .SubCategory .hideFagent{background: var(--customBtnGrayBg)!important;} .SubCategory .hideFagent .catgeryName{color: var(--textDisbaled);} .hideFagent .fa-eye-slash:before{content: "\f06e";} .edittext{border: dashed 1px var(--BorderColor2); background: var(--formControlBg); border-radius: 2px; padding: 0px 5px; color: var(--formControlText); width: 80%;} .edittext:hover, .edittext:focus{outline: none; box-shadow: none} .SubCategory .edittext{background: var(--formControlBg); color: var(--formControlText);} .dispoCol .column_actn_btn::after {display: none;} .dispoCol .column_actn_btn { padding: 0px; font-size: 12px; width: 20px; height: 19px; border: none; outline: none; color: #8e8e8e; background: none; z-index: 1;} .dispoCol .field_dropdown{box-shadow: none; background: var(--dropdownBg);} .dispoCol .field_dropdown .dropdown-item{font-size: 14px;} .dispoCol .field_dropdown .dropdown-item i{color: var(--textLight2); font-size: 11px;} .dispoCol .field_dropdown .dropdown-item:hover, .dispoCol .field_dropdown .dropdown-item:focus{background: var(--dropdownmenuhoverBg);} .dispoCol .errorMsg{border-radius: 0px; font-size: 12px; padding: 4px 15px; background: var(--AlertdangerBg); border-color: var(--Alertdanger-border); color: var(--AlertdangerText); margin-bottom: 0px; border-left: 0px; border-right: 0px;} .dispoCol .successMsg{border-radius: 0px; font-size: 12px; padding: 4px 15px; background: var(--AlertsuccessBg); border-color: var(--Alertsuccess-border); color: var(--AlertsuccessText); margin-bottom: 0px; border-left: 0px; border-right: 0px;} .hideParent .dispoListsec { pointer-events: none; opacity: .4;} .hideParent .dispoTitle{ text-decoration: line-through; color: #8c8b86; } .hideParent::after { position: absolute; content: "Hidden"; right: 95px; background: #b59354; padding: 0px 5px; font-size: 11px; color: #fff; border-radius: 4px; top: 13px;} [data-theme="light"] .hideParent::after { background: #dbdbdb; color: #464242;} .groupDetail{font-style: normal; display: block; font-size: 11px; color: #818284; text-transform: initial; font-family: roboto;} .groupnameDtl{display: block; color: var(--textGray);} .groupnameDtl b{font-size: 12px; color: #999; min-width: 40px; display: inline-block;} .gropCount{ color:#838383; text-decoration:underline; } .gropCount:hover{color: var(--textmBlue);} .addDispostionBlock{border: dashed 1px #5a5a5a!important; background: transparent!important; height: 80px!important; min-height: inherit!important;} [data-theme="light"] .addDispostionBlock{border-color: #bbb!important} .addDispostionBtn{background: var(--btnPrimaryBg); width: 35px; height: 35px; border-radius: 50%; border: solid 1px var(--btnPrimaryBorder); outline: none; color: var(--btnPrimaryColor);} /*css for create dispostion page*/ /*css for disposition analysis page*/ .dispostionAnlysisSection .filterBarSec{z-index: 4} .dispostionAnlysisSection .user_select_dropdown::after{left: 18px;} .totalSwitch label{background: #666;} .totalSwitch{ display: inline-block; vertical-align: middle; margin-left: 5px;} .totalSwitch label:after{height: 17px; width: 17px; top: 0px; box-shadow: none; background: rgb(87, 86, 86); margin-top: -9px;} [data-theme="light"] .totalSwitch label:after{background: rgb(164, 164, 164)} .totalSwitch label:before{height: 11px; margin-top: -6px; width: 33px; background: #9d9c9c; box-shadow: none; left: 0} .totalSwitch > input[type="checkbox"]:checked + label::before {opacity: 0.7; background: #8e5a0b ;} .totalSwitch > input[type="checkbox"]:checked + label::after { background: #87579d ;} .hideblankrowswitch label{background: #666;} .hideblankrowswitch{ display: inline-block; vertical-align: middle; padding-top: 10px; margin-left: 5px;} .hideblankrowswitch label:after{height: 17px; width: 17px; top: 0px; box-shadow: none; background: rgb(87, 86, 86); margin-top: -9px;} [data-theme="light"] .hideblankrowswitch label:after{background: rgb(164, 164, 164)} .hideblankrowswitch label:before{height: 11px; margin-top: -6px; width: 33px; background: #9d9c9c; box-shadow: none; left: 0;} .hideblankrowswitch label{background-image: linear-gradient(#8e5a0b, #9046b2) } .hideblankrowswitch > input[type="checkbox"]:checked + label::before {opacity: 0.7; background: #0b51ab } .hideblankrowswitch > input[type="checkbox"]:checked + label::after { background: #0b51ab } .timeline_indiciator { list-style: none; margin: 0px; padding: 0px;} .timeline_indiciator li { display: inline-block; float: left; margin-right: 15px; color: var(--textLight2); 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: sub; margin-right: 5px;} .timeline_indiciator li span.lowIndicator i {background: var(--dispoLowBg) ;} .timeline_indiciator li span.mediumIndicator i{background: var(--dispoMidBg) ;} .timeline_indiciator li span.highIndicator i{background: var(--dispoHighBg);} .low_bar_range{opacity: .2} .highlight_bar_range{ opacity: 1} .dipostionAnlysisTable{overflow-x: scroll; min-height: 500px; max-height: calc(100vh - 200px);} .dipostionAnlysisTable table{min-width: 1200px; margin-bottom: 0px;} .dipostionAnlysisTable table tr th{top: 0px!important; font-size: 13px; box-shadow: inset 0 -7px 0px -6px var(--sparatorBorder)} .dipostionAnlysisTable table tr th.parentth{min-width: 120px; max-width: 120px; padding-left: 15px!important; position: sticky; left: 0px; z-index: 3} .dipostionAnlysisTable table tr th.subcategryth{min-width: 100px; max-width: 100px; position: sticky; left: 120px; z-index: 3} .dipostionAnlysisTable table tr th.subsubctgryth{min-width: 100px; max-width: 100px; position: sticky; left: 220px; z-index: 3; box-shadow: inset -7px 0 0px -6px var(--sparatorBorder), inset 0 -7px 0px -6px var(--sparatorBorder)} .dipostionAnlysisTable table tr td.parentcolumn{ min-width: 100px; max-width: 100px; padding-left: 15px!important; position: sticky; left: 0px; z-index: 2} .dipostionAnlysisTable table tr td.subcategrycolumn{ min-width: 100px; max-width: 100px; position: sticky; left: 120px; z-index: 2} .dipostionAnlysisTable table tr td.subsubctgrycolumn{ min-width: 100px; max-width: 100px; position: sticky; left: 220px; box-shadow: inset -7px 0 0px -6px var(--sparatorBorder); z-index: 2} .dipostionAnlysisTable table tr td.DfixColumn { max-width: 100px; width: 100px; border-right: 0px; padding: 12px 5px} .dipostionAnlysisTable table tr td.DfixColumn span.dispoNamespn{color: var(--textdark2); font-size: 13px; width: 100%; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative; } .dipostionAnlysisTable table tr td.DfixColumn span.dispoNamespn .emtyData{ color: #f0f8ff3d !important; font-style: italic; } [data-theme="light"] .dipostionAnlysisTable table tr td.DfixColumn span.dispoNamespn .emtyData{color: #a0a0a0!important} .dipostionAnlysisTable table tr td.parentcolumn span.dispoNamespn:after, .dipostionAnlysisTable table tr td.subcategrycolumn span.dispoNamespn:after{position: absolute; right: 0px; top: 3px; font-size: 11px;color: #666; content: "\f285"; font-family: "bootstrap-icons";} [data-theme="light"] .dipostionAnlysisTable table tr td.parentcolumn span.dispoNamespn:after, [data-theme="light"] .dipostionAnlysisTable table tr td.subcategrycolumn span.dispoNamespn:after{color: #bdbdbd} .dipostionAnlysisTable table tr td.parentcolumn span.dispoNamespn .dipostionAnlysisTable table tr td.subcategrycolumn span.dispoNamespn {padding-right: 5px;} .dipostionAnlysisTable table tr td.timline_td{min-width: 800px; } .categoryTotlRow .subsubctgrycolumn span.dispoNamespn {color: #8e5a0b !important;} .Parenttotalrow .subcategrycolumn span.dispoNamespn {color: #87579d !important;} .categoryTotlRow td {background: #fff1ed !important; border-bottom: solid 1px transparent!important;} .Parenttotalrow td {background: #eeedff !important;border-bottom: solid 1px transparent!important; } [data-theme="dark"] .categoryTotlRow td{ border-bottom: solid 1px #4f3a19!important; background: #131e20!important } [data-theme="dark"] .Parenttotalrow td{border-bottom: solid 1px #501a71!important; background: #131e20 !important } [data-theme="light"] .categoryTotlRow td.subsubctgrycolumn , [data-theme="light"] .Parenttotalrow td.subsubctgrycolumn{box-shadow: inset -7px 0 0px -6px #e4e4e4!important} .timline_td .chart_bar_row{ display: inline-block; width: calc(100% - 250px); padding-left: 25px; } .timline_td .barValue{display: inline-block; width: 80px; position: absolute; right: -85px; top: 2px; color: var(--textdark2);} .timline_td .barValue font{display: inline; background: var(--lightGrayBg); color: var(--textGray); padding: 0px 4px; border-radius: 2px; margin-left: 5px;} .timline_td .progress{background: transparent; border-radius: 0px; cursor: pointer; overflow: visible; position: relative; } .timline_td .progress-bar{background: #4a94e1; transition: all .5s; border-radius: 0px 2px 2px 0px; position: relative; width:100%; border-radius: 2px; height: 5px;} .timline_td .progress.low .progress-bar {background:var(--dispoLowBg) !important;} .timline_td .progress.medium .progress-bar {background:var(--dispoMidBg) !important;} .timline_td .progress.high .progress-bar {background:var(--dispoHighBg) !important;} .categoryTotlRow .timline_td .progress .progress-bar{background: var(--dispocatgryTotalBg) !important;} .Parenttotalrow .timline_td .progress .progress-bar{background: var(--dispoParentTotalBg) !important;} /*dispostion date wise*/ .daterabgeSec th{ font-size: 14px!important; letter-spacing: 1px; padding: 4px!important; position: relative;} .dispostionDatewiseTbl table tr th.dayField{text-align: center; border-right: solid 1px #273035; min-width: 26px; font-weight: normal; color: var(--textGray);} [data-theme="light"] .dispostionDatewiseTbl table tr th.dayField{border-right-color:#ddd } .dispostionDatewiseTbl table tr td { border-right: solid 1px #273035; position: relative;} [data-theme="light"] .dispostionDatewiseTbl table tr td{border-right-color:#eee } .dispostionDatewiseTbl .endDate { border-right: solid 2px #4c4027 !important;} [data-theme="light"] .dispostionDatewiseTbl .endDate{border-right-color:#CDD8E8 !important} .hBarcol { width: 25%; height: 20px; border-radius: 2px 2px 0px 0px; background: var(--lightGrayBg); margin: 0 auto; position: absolute; left: 0px; right: 0px; bottom: 0px; cursor: pointer;} .hBarcol.low{ background: var(--dispoLowBg);} .hBarcol.medium{ background: var(--dispoMidBg);} .hBarcol.high{background: var(--dispoHighBg);} .categoryTotlRow .hBarcol{background: var(--dispocatgryTotalBg)!important;} .Parenttotalrow .hBarcol{background: var(--dispoParentTotalBg)!important;} .dipostionAnlysisTable .counterValue { text-align: center; display: block; font-size: 13px;} .dipostionAnlysisTable .counterValue.medium { color: #3d6497;} .dipostionAnlysisTable .counterValue.high { color: #3e7d3e;} .dipostionAnlysisTable .counterValue.low { color: #9d5a57;} .categoryTotlRow .counterValue { color: #8e5a0b !important;} .Parenttotalrow .counterValue { color: #87579d !important;} [data-theme="light"] .dipostionAnlysisTable .counterValue.medium { color: #6994ce;} [data-theme="light"] .dipostionAnlysisTable .counterValue.high { color: #6bac6b;} [data-theme="light"] .dipostionAnlysisTable .counterValue.low { color: #b56764;} [data-theme="light"] .categoryTotlRow .counterValue { color: #c27808 !important;} [data-theme="light"] .Parenttotalrow .counterValue { color: #a76ac4 !important;} /*dispostion date wise*/ .dispostionFieldwiseTbl .table tr th{border-right: solid 1px #273035; font-weight: normal;} [data-theme="light"] .dispostionFieldwiseTbl table tr th{border-right-color:#ddd } .dispostionFieldwiseTbl .table tr th.parentth, .dispostionFieldwiseTbl .table tr th.subcategryth, .dispostionFieldwiseTbl .table tr th.subsubctgryth{border-right: none} .dipostionAnlysisTable .table tr th .statusTag{min-width: 125px;} .dipostionAnlysisTable .otherField { line-height: normal; font-weight: normal; display: block; min-width: 100px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--textdark2); text-transform: capitalize; font-size: 12px;} .dipostionAnlysisTable .otherField font { display: block; font-size: 11px; color: var(--textID); margin-bottom: 3px;} .dipostionAnlysisTable .calltypelabel{font-size: 14px; background:none; padding:0px; color:var(--textdark2); text-align:center; display:block } /*css for disposition analysis page*/ /*css for notification list page*/ .notification_List { list-style: none; margin: 0px; padding: 0px; } .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: var(--cardBg); border-radius: 5px;} [data-theme="light"] .notification_List li .n_alert_detail{border:solid 1px #eee;} .notification_List li .n_alert_detail .alertName { font-size: 15px; color: var(--text-dark2); 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;} .notificationdetail { padding-left: 27px; padding-top: 5px; padding-bottom: 3px;} .notification_List li .n_alert_detail .alertTime { font-size: 12px; padding-top: 8px; display: inline-block; width: 100%; color: #818284; padding-left: 18px;} .notification_List li .n_alert_detail .caller_number_2x{color: var(--textmBlue); font-size: 15px;} /*css for notification list page*/ /*css for webhook template*/ :root { --radio-switch-width: 130px; --radio-switch-height: 33px; --radio-switch-padding: 3px; --radio-switch-radius: 5px; --radio-switch-animation-duration: 0.3s;} .radio-switch { position: relative; display: inline-block; display: inline-flex; padding: var(--radio-switch-padding); border-radius: calc(var(--radio-switch-radius) * 1.4); background-color: var(--customBtnBg2); margin-bottom:0px; border: solid 1px var(--BorderColor2);} .radio-switch:focus-within, .radio-switch:active { box-shadow: 0 0 0 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15);} .radio-switch__item { position: relative; display: inline-block; height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding)); width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding)); } .radio-switch__label { position: relative; z-index: 2; display: flex; height: 100%; align-items: center; justify-content: center; border-radius: var(--radio-switch-radius); cursor: pointer; font-size:14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;transition: all var(--radio-switch-animation-duration); color: var(--textdark2); } .radio-switch__input:checked ~ .radio-switch__label {color: #fff} .radio-switch__input:focus ~ .radio-switch__label { background-color:yellow;} .radio-switch__label :not(*):focus-within, .radio-switch__input:focus ~ .radio-switch__label { background-color: transparent;} .radio-switch__marker { position: absolute; z-index: 1; top: 0; left: -100%; border-radius: var(--radio-switch-radius); background-color: #6260a4; height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding)); width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding)); box-shadow: var(--shadow-md); transition: -webkit-transform var(--radio-switch-animation-duration); transition: transform var(--radio-switch-animation-duration); transition: transform var(--radio-switch-animation-duration), -webkit-transform var(--radio-switch-animation-duration); } .radio-switch__input:checked ~ .radio-switch__marker { -webkit-transform: translateX(100%); transform: translateX(100%);} .webhookTitleBx {width: 100%; font-size: 15px; background: var(--formControlBg);border: solid 1px var(--BorderColor2); outline: none; padding: 4px 10px; border-radius: 4px; color: var(--textdark2); } .addwebhookTemplateSection .section_title{color: var(--textmBlue); font-weight: 400; font-size: 17px; padding-bottom: 5px; margin-bottom: 5px; } .webhook_head_value{padding: 15px; border-right: solid 1px var(--BorderColor2); min-height:calc(100vh - 100px); } .header_list{ list-style: none; margin: 0px; padding: 0px; } .header_list li{padding-bottom: 0px; margin: 0px; margin-bottom: 5px; position: relative; padding-right: 18px;} .header_list li .col:first-child{padding-right: 4px!important;} .header_list li label{ max-width: 150px; font-weight: normal; font-size: 14px; color: #a37329;} .header_list li .hader_key{background:var(--cardBg);; color:var(--blackMedium) ; font-size: 13px; font-style: italic; border:solid 1px var(--sparatorBorder); padding:3px 5px; border-radius: 4px; width: 100% } .header_list li .hader_key:focus, .header_list li .header_value:focus{box-shadow: none; outline: none;} .header_list li .header_value{background: var(--cardBg); border-radius: 4px; color: var(--blackMedium); font-size: 12px; border:solid 1px var(--sparatorBorder); padding:3px 5px; width: 100%;} .header_list li .remove_btnsec{background: transparent; border: none; padding: 0px; color:#ffa4a4; font-size: 16px; position: absolute; right: 7px; top: 0px; } [data-theme="dark"] .header_list li .remove_btnsec{color: #9b7777} .webhhok_cstm_hdr_section{max-height: calc(50vh - 80px); overflow: auto; min-height: 300px;} .webhhok_cstm_status_section{max-height: calc(50vh - 80px); overflow: auto; min-height: 300px;} .callsatuscode{color: var(--text-dark2); font-size: 13px; vertical-align: middle;} .webhhok_cstm_status_section .statusTag{ border: none;padding: 2px 5px; font-size: 11px; vertical-align: middle;} .customStatusList{list-style: none; margin: 0px; padding: 0px; } .customStatusList li{border-bottom: solid 1px var(--sparatorBorder); padding-top: 5px; padding-bottom: 5px; margin:0px; } .customStatusList li:last-child{border-bottom: none} .customStatusList li label { max-width: 150px; font-weight: normal; font-size: 14px; color: #a37329;} .customStatusList li .status_value{background:var(--cardBg); color:var(--blackMedium) ; font-size: 12px; border-radius: 4px; border:solid 1px var(--sparatorBorder); padding:3px 5px; width: 100%;} .customStatusList li .status_value:focus{outline: none; box-shadow: none;} .payload_SectionTab .nav{border-bottom: solid 1px var(--BorderColor2);} .payload_SectionTab .nav .nav-link{color: var(--textGray); border-bottom: solid 2px transparent; font-size: 14px;} .payload_SectionTab .nav .nav-link.active{color: var(--textmBlue); border-bottom-color: cornflowerblue } .params_List_sec{max-height: calc(100vh - 200px); overflow:auto; padding-top: 10px;} .webhookResponse_tab{display: block; border-bottom: solid 1px #dddddd14; padding: 7px 0px; } .webhookResponse_tab .nav .nav-link { background: var(--lightGrayBg); border-radius: 4px; margin: 2px 5px; padding: 3px 12px; color: var(--customBtncolor2); font-size: 13px;} .webhookResponse_tab .nav .nav-link.active{ color: var(--customBtncolor2); background: var(--chipBg);} .varible_info_bx{color:#a2856b; background: var(--gray200); border-radius: 5px; font-weight: 400; font-size: 13px; padding: 15px; } [data-theme="light"] .varible_info_bx{color: #797878} .varible_info_bx .alert_row{ display: block; position: relative; padding-left: 20px; margin-bottom: 15px; } .varible_info_bx .alert_row i.fa-info-circle{position: absolute; left: 0px; top: 4px;} .code_json_text{width:100%; height: calc(100vh - 270px); background: none; border: none; outline: none; font-size: 14px; color: var(--formControlText); resize: none;} .code_json_text:hover, code_json_text:focus, .code_json_text:focus-visible{outline: none; box-shadow: none; } .resopnseCodeDiv{ background: var(--cardBg); border-top:solid 1px var(--sparatorBorder); height: calc(100vh - 180px);} .selectAction{background:var(--cardBg); color:var(--formControlText) ; font-size: 12px; border-radius: 4px; border:solid 1px var(--sparatorBorder); padding:3px 5px; } .dynamic_variable_list{display: block;} .dynamic_variable_list ul{list-style: none; margin: 0px 0px 15px; padding: 0px;} .dynamic_variable_list ul li{float: none; margin-bottom: 10px; border-bottom: dashed 1px var(--BorderColor2); padding-top: 10px; padding-bottom: 10px;/* padding-left: 15px;*/} .dynamic_variable_list ul li .variable_title{ color: var(--textdark2); font-size: 14px;display: block; white-space:normal; word-break:break-all; } .dynamic_variable_list ul li .variable_value{background: var(--chipBg2); padding: 3px 10px; border-radius: 5px; color: var(--customBtncolor2); font-size: 12px; } /*css for webhook template*/ /*directory page*/ .contct_filter_sec{max-width: 13%; min-width: 200px; background: var(--contentSectinoBg); position: relative; padding-right: 0px; transition: all 0.2s; overflow: hidden; } .contct_filter_sec:hover{opacity: 1; filter: blur(0px);} .contct_filter_sec .fltr_hdng_sec{ display: block; font-size: 16px; padding-top: 10px; color:var(--textmBlue); margin-bottom: 10px;} .contct_filter_sec ul{list-style: none; margin: 0px; padding: 0px 15px 0px 0px; max-height: calc(100vh - 205px); overflow: auto; } .contct_filter_sec ul li{display: inline-block; width: 100%; float: none; margin-bottom: 20px;} .contct_filter_sec ul li label.filr_label{font-size: 15px; color: var(--textdark2); } .contct_filter_sec ul li .form-control{ background:var(--formControlBg); border-color: var(--BorderColor2); color: var(--formControlText); font-size: 12px; } .contct_filter_sec ul li .form-control:focus{box-shadow: none;} .contct_filter_sec ul li .form-control.sm{ background: var(--formControlBg); border-color: var(--BorderColor2); color: var(--formControlText); font-size: 12px; height: auto; padding-top: 3px; padding-bottom: 3px; padding-left: 5px} .contct_filter_sec .input-group-text {background-color: var(--customBtnGrayBg); color: var(--textLight2); border-color: var(--BorderColor2); font-size: 11px; padding-left: 5px; padding-right: 5px; } .contct_filter_sec .TriSea-technologies-Switch > label::before{ height:10px; margin-top:-5px } .contct_filter_sec .select2-container{display: block!important; width: 98%!important} .contct_filter_sec .select2-container--default .select2-selection--single{background: var(--formControlBg); border-color: var(--BorderColor2); } /*.contct_filter_sec .select2-container--default .select2-search--dropdown .select2-search__field{background: ; border:solid 1px #dddddd26; color: #cdcdcd;}*/ .contct_filter_sec .select2-container--default .select2-selection--multiple{background: var(--formControlBg);!important; border-color: var(--BorderColor2)!important} .contct_filter_sec .select2-container--default .select2-selection--multiple .select2-selection__choice{display: inline-block; float: left; width: auto; margin-bottom: 0px; background: var(--chipBg); color: var(--textdark2); font-size: 13px; border:none} .contct_filter_sec .select2-container .select2-search--inline{margin-bottom: 0px;} .contct_filter_sec .select2-container--default .select2-selection--multiple{border-radius: 5px;} .d_filter_submision_Sec { display: block; text-align: center; box-shadow: 0px -4px 3px rgb(15, 15, 15); position: absolute; width: 100%; bottom: 0px; left: 0px; background: var(--contentSectinoBg) ; padding: 8px; border-top: solid 1px var(--BorderColor2);} [data-theme="light"] .d_filter_submision_Sec{box-shadow: 0px -4px 3px rgba(15, 15, 15, 0.08)} .directry_cntct_sec{max-width: 15%; min-width: 230px; padding: 0px; border-right: solid 1px var(--BorderColor2); min-height: calc(100vh - 100px); background: var(--contentSectinoBg); } .contact_Search_sec{display: inline-block; width: 100%; border-bottom: solid 1px var(--BorderColor2); position: relative; padding: 5px 5px 5px 30px; color: var(--text-gray);} .contact_Search_sec i.bi-search { position: absolute; left: 10px; top: 8px; font-size: 15px; color: var(--textLight2);} .d_search_bx{background: transparent; padding: 5px; width: 79%; border: none; color: var(--blackMedium); font-size: 14px; font-weight: 400} .d_search_bx:hover, .d_search_bx:focus{outline: none; box-shadow: none;} .sorting_btn_sec{width: 19%; position: relative; text-align: right;} .sorting_btn{border: none; background: transparent; color: #666; padding: 0px 5px;} .sorting_btn_sec .th_option_drop.arrowforright::after{right: 15px;} .sorting_btn_sec ul li a i{opacity: .5; width: 17px;} .shrting_indicator{padding: 0px 5px 0px 25px; border-bottom: solid 1px var(--sparatorBorder); border-top: solid 1px var(--sparatorBorder); font-size: 16px; background: var(--gray200); color: var(--textmBlue); margin-top: -1px;} [data-theme="light"] .shrting_indicator{color: #4f9cee} .dContactList{display: inline-block; width: 100%; position: relative;} .dContactList ul{list-style: none; margin: 0px; padding:0px; max-height: calc(100vh - 189px); overflow: auto;} .dContactList ul li{width: 100%; float: none; border-bottom: solid 1px var(--borderLight); border-top: solid 1px transparent; padding: 8px 5px 8px 25px; color: #888; font-size: 14px; cursor: pointer; position: relative;} .dContactList ul li span{display: block; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: var(--blackMedium);} .dContactList ul li span.noname{color: var(--textGray);} .dContactList ul li:hover, .dContactList ul li.active{background: var(--lightGrayBg); color: var(--textdark2); border-color:var(--BorderColor2); } .dContactList ul li .vb_indicatr{position: absolute; left: 6px; top: 8px; font-size: 11px;} .dContactList ul li .vb_indicatr.block_i{top: 11px;} .dContactList ul li .vb_indicatr i.bi-star{color: goldenrod} .dContactList ul li .vb_indicatr i.fa-user-slash{color: #ba4040;} .dContactList ul li .skeleton-row{margin-bottom: 5px;} .loadmore_btn { border-radius: 20px; background: #ae6823; border: none; outline: none; box-shadow: none; color: #fff;} .loadmore_btn:focus{box-shadow: none;} [data-theme="light"] .loadmore_btn{background: var(--customBtnBg2); color: var(--customBtncolor2)} .alpha_sorting_row{position: absolute; right: 3px; top: 45px; background: #dfdfdf54; 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: #a8a8a8; font-size: 10px; font-weight: 500} .alpha_sorting_row ul li a:hover{color: #666} [data-theme="dark"] .alpha_sorting_row{background: #00000054} [data-theme="dark"] .alpha_sorting_row ul li a{color:#394b6d } [data-theme="dark"] .alpha_sorting_row ul li a:hover{color: #5d80be} .directryDtlSec{background: #fefefe} [data-theme="dark"] .directryDtlSec{background: #202020} .drctry_contact_ctl{display: inline-block; width: 100%; padding-left: 35px; padding-top: 15px;} .contct_no_l{font-size: 36px; font-weight: 200; color: var(--textmBlue); line-height: normal; position: relative;} .contct_no_l .vip_info_tag{ position: absolute; left: -30px; top: 8px; font-size: 18px; color: #393d3e; cursor: pointer;} .contct_no_l .vip_info_tag.active{ color: goldenrod;} .dcontctactnbtn{margin-top: 0px; text-align: center; margin-left: 10px;} .dcontctactnbtn button{ display: inline-block; width: 25px; height: 20px; font-size: 16px; border: none; background: transparent; border-radius: 100%; margin-right: 3px; text-align: left; padding: 0px; color:var(--textLight2); vertical-align: middle;} .dcontctactnbtn button:hover{color: var(--textdark2);} .dncBtn { padding: 4px 7px; font-size: 14px; background: #9b4343; border-color: #d75668; color: #fff;} .nodataavlble_span{font-family: Comfortaa; background: #b8860b17; padding: 10px 30px; border-radius: 5px; display: block; font-size: 14px; text-align: center; color: #d5ae3b;} .acmanagerbtn{border-color: #c4c4c4; color: #4baa8a; background: none; padding: 2px 10px; height: 41px} [data-theme="dark"] .acmanagerbtn{ color: #a8e9d3; border-color: #464747;} .atcikyagntbtn{border-color: #c4c4c4; color: #ac6209 ; background: none;padding: 6px 10px; height: 41px;} [data-theme="dark"] .atcikyagntbtn{color: bisque; border-color: #464747;} .acmanagerbtn:hover, .acmanagerbtn:focus{color: #4baa8a; background:none!important} .atcikyagntbtn:hover, .atcikyagntbtn:focus { color:#ac6209; background:none!important ; } [data-theme="dark"] .acmanagerbtn:hover, [data-theme="dark"] .acmanagerbtn:focus{color: #a8e9d3; background:none!important } [data-theme="dark"] .atcikyagntbtn:hover, [data-theme="dark"] .atcikyagntbtn:focus {color:bisque; background:none!important ; } .dncLabel { background: #ffdfdf; color: #e85d5d; font-size: 14px; padding: 4px 19px; border-radius: 4px; display: inline-block; width: 348px;} [data-theme="dark"] .dncLabel{background: #4d2d2d; color: #e85d5dc4;} .d_call_counter{ display: block; background: #fff; padding: 5px 25px; width: 100%; } [data-theme="dark"] .d_call_counter{background: #252728} .d_call_counter .countr_block3{ display: inline-block; width: 32%; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; text-align: center; } .d_call_counter span{display: inline-block; color: var(--textGray); font-size: 16px; vertical-align: middle; } .d_call_counter font{color: #5b96c1; font-size: 16px; vertical-align: middle;} .dcm_detail_Sec{display: inline-block; width: 100%; margin-top: 15px; border-top: solid 1px var(--BorderColor2); position: relative; padding-right: 15px;} .dcontactotherinfo{display: inline-block; width: 100%; position: relative; padding-top: 25px; border-right: solid 1px var(--BorderColor2); max-height: calc(100vh - 230px); overflow: auto; } .dcontactotherinfo ul{list-style: none; margin: 0px; padding: 0px;} .dcontactotherinfo ul li{display: inline-block; width: 100%; float: none; padding-bottom: 10px;} .dcontactotherinfo ul li span{display: inline-block; width: 30%; color: var(--textLight2); font-size: 14px; vertical-align: top} .dcontactotherinfo ul li .data_value3{ display: -webkit-inline-box; color: var(--textblack7); font-size: 15px; text-transform: capitalize; width: 68%; max-width: 300px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; vertical-align: top; } .dcontactotherinfo ul li .data_value3 code{font-size: 71.5%; color: #bb7d21;} .dcontactotherinfo ul li .email_field{color: #537bda; display: inline-block; font-size: 15px;} .dcontct_create_dtl{background: #56555342; font-size: 11px; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; padding: 3px 10px; border-radius: 4px; color: var(--textID);} [data-theme="light"] .dcontct_create_dtl{background: #dbdbdb} .dcontct_create_dtl span{display: inline-block; width: 30%; text-align: center; border-right: solid 1px #ffffff1a} .dcontct_create_dtl span:last-child{border-right: none;} .dcontct_create_dtl span font{display: block; color: #d69820} [data-theme="light"] .dcontct_create_dtl span font{color: #292725} .dc_tab_info{display: inline-block; width: 100%;} .dc_tab_info .nav-tabs{border-bottom: solid 1px var(--sparatorBorder); padding-left: 5px; padding-top: 5px;} .dc_tab_info .nav-tabs .nav-link{border-radius: 5px 5px 0px 0px; border: none; color: var(--textGray); font-size: 13px; padding: 5px 15px; font-size: 14px; margin-right: 4px} .dc_tab_info .nav-tabs .nav-link i{margin-right: 3px;} .dc_tab_info .nav-tabs .nav-link:hover{border: none; background: var(--chipBg);} .dc_tab_info .nav-tabs .nav-link.active{color: var(--textmBlue); background: var(--chipBg);} .dc_note_list{display: inline-block; width: 100%; padding: 15px; } .list_scrl_Sec{ max-height: calc(100vh - 400px); min-height: calc(100vh - 400px); overflow: auto; display:block; width: 100%;} .dc_note_list ul{list-style: none; margin: 0px; padding: 0px; } .dc_note_list ul li{display: inline-block; width: 100%; margin-bottom: 10px; position: relative; padding-left: 0px;} .dc_note_list ul li .skeleton-row{margin-bottom: 5px;} .adtag_dtl_Sec{background: var(--gray200); padding:10px; border-radius: 0px; border-radius: 5px; position: relative;} .ad_tag_alert_time{font-size: 11px; color: #6f8a78; display: block; padding-top: 5px; text-align: right;} .ad_tag_alert_time i{ line-height: normal; font-size: 11px; font-style: normal;} .tag_dtl_sec3clr{color: var(--textGray);} .text_d999{color: #999} .dc_recent_Call_Sec{display: inline-block; width: 100%; max-height: calc(100vh - 305px); overflow: auto;} .dc_recent_call_tbl thead tr th {color:var(--th-text-color); font-weight: 500; font-size: 11px; border-top: none; padding: 5px 4px; vertical-align: middle; position: sticky; top: -1px; background: var(--thBg); border-bottom: 0; z-index: 2; border-top: 1px solid var(--sparatorBorder); } .dc_recent_call_tbl tbody tr td{border-top: 1px solid var(--tdborderColor) ; color: var(--tdTextcolor); padding: 8px 4px} .dc_recent_call_tbl tbody tr td a{color: #777;} .dc_recent_call_tbl tbody tr td .calltypelabel {padding: 5px; line-height: normal;} .dc_recent_call_tbl tbody tr td .statusTag{padding: 0px 7px; font-size: 12px; line-height: normal; margin: 0px;} .dc_note_crt{display: inline-block; width: 100%; position: relative;} .dc_note_crt .form-control{background: var(--formControlBg); outline: none; border:solid 1px var(--BorderColor2); display: inline-block; width: 79%; color: var(--formControlText); padding: 7px 15px; border-radius: 5px; height: 80px;} .dc_note_crt .dcadd_note_btn{display: inline-block; vertical-align: top; width: 19%; margin-left: 5px;} .dc_note_crt .dcadd_note_btn .btn{ height: 80px; display: block; width: 100%; } .not_wrd_count{position: absolute; right: 22%; bottom: -20px; color: #c49a75;} .dc_linkedcontactlist{display: inline-block; width: 100%; padding: 15px 25px;} .dc_linkedcontactlist ul{list-style: none; margin: 0px; padding: 0px;} .dc_linkedcontactlist ul li{display: inline-block; width: 100%; font-size: 14px; color: #777; margin-bottom: 10px;} .dc_linkedcontactlist ul li i{margin-right: 5px;} .dc_linkedcontactlist ul li font{min-width: 60px; display: inline-block;} .dc_linkedcontactlist ul li span{ font-size: 15px; color: #836944} /*directory page*/ .contentPageArea.inIframeModule{ left:0px; padding:0px 0px 0px 15px; width:100%; background:var(--cardBg); } .contentPageArea.inIframeModule .tableSection{margin-top: 0px;} .contentPageArea.inIframeModule .tableSection table thead tr th{top: 0px} /*css added by p.gupta*/ .btn-custom-3{background: var(--customBtnBg2); color: var(--customBtncolor2); border:solid 1px var(--customBtnborder2); font-size: 13px; padding: 7px 12px; border-radius: 5px; line-height: normal;} .btn-custom-3:hover{background: var(--customBtnBg2); color: var(--customBtncolor2);} .agent_select_drop { display: block; width: 100%; margin: 0px; padding: 0px; list-style: none;} .agent_select_drop li { display: block; float: none; margin-bottom: 10px;} .agent_select {font-size: 13px; display: inline-block; } .agent_count {background: var(--formControlBg); color: var(--formControlText); border-color: var(--sparatorBorder); height: auto!important; padding:3px 2px!important; text-align: center; font-size: 13px;} button.rowDel { background: none; border: none; padding: 0px; font-size: 18px; color: #b04d4d; text-align: center;} .agent_select_drop .select2-container{width: 100%!important;} .agent_select_drop .select2-container--default .select2-selection--single{background: var(--formControlBg)!important; border-radius: 6px!important; border:none!important} .agent_select_drop .select2-container--default .select2-selection--single .select2-selection__choice{background: rgb(212, 237, 255) !important; color: rgb(54, 52, 52) !important; border: none !important; font-size: 13px; margin-top: 6px;} .agent_select_drop .select2-container--default .select2-selection--single .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-left: 10px;} .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--gray200); border: inherit; border-radius: 4px;color: var(--formControlText); font-size: 12px; } .anim-col { transition: flex 0.5s ease, max-width 0.5s ease, opacity 0.5s ease; } /* Hidden column */ .collapsed-call { flex: 0 0 0 !important; max-width: 0 !important; height: 0px; opacity: 0; overflow: hidden;} /* Expanded states */ .col-12-custom {flex: 0 0 100% !important;max-width: 100% !important; } .col-7-custom {flex: 0 0 58.333333% !important; /* col-md-7 */max-width: 58.333333% !important;} .col-5-custom {flex: 0 0 41.666667% !important; /* col-md-5 */max-width: 41.666667% !important;opacity: 1;} .instruction_lkop { margin: 0px; padding: 10px; list-style: none; position: relative;} .instruction_lkop li { display: block; float: none; margin-bottom: 10px; font-size: 13px; color:var(--textGray); position: relative; padding-left: 20px !important; margin-bottom: 20px; } .instruction_lkop li:after { position: absolute; left: -5px; top: 5px; content: ""; width: 9px; height: 9px; border-radius: 100%; background: var(--textGray); z-index: 1;} .instruction_lkop:after { position: absolute; left: 8px; top: 15px; width: 2px; height: 85%; content: ""; background:var(--textGray); opacity:.14;} .segmentation_contact_list { list-style: none; margin: 0px; padding: 0px; background:var(--formControlBg); border-radius: 5px; max-height: 300px; overflow: auto;} .segmentation_contact_list li { float: none; padding: 10px 0px; margin-top: -1px; margin-left: 0px; margin-right: 0px; border-bottom:solid 1px var(--borderLight) ;} .segment_f_box { display: inline-block; width: 100%; padding: 20px; border: solid 1px var(--sparatorBorder); background:var(--formControlBg); border-radius: 5px;} .segmentt-box { padding: 15px; padding-bottom: 15px; margin-top: 20px; border: solid 1px var(--borderLight); padding-bottom: 15px;} .removesticky{ position:static;} .dashabordWidgetSection2 { background: var(--cardBg); border: solid 1px var(--sparatorBorder); border-radius:0px; padding: 10px;} .mw_180 { min-width: 180px;} .mw_240 { min-width: 240px;} .vralign-top table tr td { vertical-align: top !important;} .hhmmss_indicator { display: block; font-size: 10px; font-style: normal; text-align: left; line-height: normal;} .rightside_extrainfo_Section.adjustwidht{ max-width: 250px; background: #edf4fc;} .rightside_extrainfo_Section.callflow{ border: 0px !important; min-height: inherit!important; height: auto; padding: 15px; background: #edf4fc; } [data-theme="dark"] .rightside_extrainfo_Section.adjustwidht{ background:#141618;} [data-theme="light"] .adjustwidht .btn-custom-2 { background: #e9e5f7; } [data-theme="dark"] .rightside_extrainfo_Section.callflow { background:#232323; } [data-theme="dark"] .call_detail_list45 {background:#5956561a ;} .hhmmss_indicator { display: block; font-size: 10px; font-style: normal; text-align: left; line-height: normal;} .queueIndicator { display: inline-block;} .queueIndicator ul { list-style: none; margin: 0px; padding: 0px;} .queueIndicator ul li { display: inline-block; margin-right: 10px; font-size: 12px; color:var(--textDLight);} .queueIndicator ul li.queue span{background: #f7aa19;} .queueIndicator ul li.drop span {background: #954242;} .queueIndicator ul li.complete span {background: #46794e;} .queueIndicator ul li span { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #fff;} .QALogreportAside .showAgents { background:#ab8a31; color: #ffff; padding: 0 5px; border-radius: 5px; display: inline-block; text-align: center; min-width: 30px; vertical-align: initial; font-size: 12px; cursor: pointer;} .QALogreportAside .borderRight .duration_text {font-size: 14px !important;color: #ab8a31;} .QALogreportAside tr:hover .callIDblock {opacity: 1;} .QALogreportAside .callIDblock { color: #888; font-size: 11px; opacity: 0; padding-top: 2px;} .connectedagent font { text-align: center; min-width: 30px; display: inline-block; font-size: 22px; cursor: pointer; vertical-align: top; line-height: normal; color:var(--textdark2);} .connectedagent span {font-size: 11px;display: inline-block;line-height: normal;vertical-align: top;} .liveCDtlPart {max-width: 370px;} .SidebarLivecallLog .C_alldetailSec{background:var(--contentSectinoBg); height: calc(100vh - 58px); border:solid 0px var(--header-border); border-left: 0px; padding:10px 10px 10px 18px; overflow:auto; } .SidebarLivecallLog .C_alldetailSec .callerNumber{ font-size:20px; color:#5394da ; line-height:normal; } .SidebarLivecallLog .spyActinSec{display: flex; flex-wrap: wrap; margin:5px 0px;justify-content: space-between;border-bottom: solid 1px var(--filterBorderColor); padding-bottom: 10px;} .SidebarLivecallLog .spyActinSec input{display: inline-block;width: 98px;padding: 5px 8px;font-size: 13px;height: 32px !important;background:var(--formControlBg);color: var(--formControlText);border: 1px solid var(--BorderColor2);} .call_detail_list45 {list-style: none;margin: 0px;padding:5px 15px;background:#fff ;} .call_detail_list45 li {display: inline-block;width: 100%;padding:10px 5px;color: var(--textGray);} .SidebarLivecallLog .call_detail_list45 li label {font-size: 14px;} .call_detail_list45 li label { display: inline-block; width: 105px; font-size: 124px; color:var(--textDLight); margin-bottom: 0px; vertical-align: top;} .call_detail_list45 li label i{color: var(--textDisbaled);opacity: .5;font-size: 10px;margin-right:2px;} .call_detail_list45 li .detail_Sec {display: inline-block;font-size: 16px;color:#5394da;} .call_detail_list45 li .conect_agent_list {display: block;width: 100%;padding-left:20px;} .agnt_lst_row {display: block;font-size: 13px;padding-bottom: 5px;position: relative;} .call_detail_list45 li .cnct_agent_id {color:var(--textID);font-size: 12px;display: inline-block;width: 45px;} .call_detail_list45 li .start_time_duation {display: block;font-size: 12px;color: #999;padding-left: 49px;} .tableSection table tbody tr.active td {background: var(--tdHoverBg);} [data-theme="dark"] .tableSection table tbody tr.active td {background: var(--contentSectinoBg);} .filterReqColmn {line-height: normal; min-width: 140px; position: relative; max-width: 140px; padding-left: 15px !important; padding-right: 0px !important;} .filterReqColmn:before { position: absolute; right: 0px; top: -1px; color:var(--textGray); font-size: 28px; content: "}"; opacity: .4; } .filterReqColmn:after { position: absolute; left: 0px; top: -1px; color:var(--textGray); font-size: 28px; content: "{"; opacity: .4; } .QALogreportAside .borderRight .duration_text { font-size: 17px !important; font-family: monaco, courier !important; font-weight: bold; padding: 2px 8px; border-radius: 4px; background:rgba(171, 138, 49,.1); } .QALogreportAside .borderRight .duration_text.nobg {background: none !important;} .QALogreportAside code { font-size: 87.5%; color: var(--textGray); word-wrap: break-word;} .QALogreportAside .StrategyDtl { padding-left:15px; } .QALogreportAside .StrategyDtl a{ color: var(--textGray);} .QALogreportAside .borderRight .duration_text font { color: #777;} .QALogreportAside .textCamapaign { color: #c08237;} .QALogreportAside .textDid { color:var(--textmBlue); font-size: 13px;} .nameclass{color:#007bff;} .QALogreportAside .qStatusTag { position: absolute; width: 5px; height: 100%; left: 0px; top: 0px; transition: all .1s;} .QALogreportAside .qStatusTag.inqueue {background: #f7aa19;} .QALogreportAside .qStatusTag.dropped {background: #954242;} .QALogreportAside .qStatusTag.completed {background: #46794e;} .QALogreportAside .callerDtlColumn { position: relative; min-width: 155px;} .QALogreportAside .qStatusTag:hover { width: 80px;} .QALogreportAside .qStatusTag.inqueue:after { content: "In Queue";} .QALogreportAside .qStatusTag.dropped:after { content: "Dropped";} .QALogreportAside .qStatusTag.completed:after { content: "Completed";} .QALogreportAside .qStatusTag:hover:after { width: 100%;} .QALogreportAside .qStatusTag:after { top: 20px;} .QALogreportAside .qStatusTag:after { position: absolute; left: 5px; top: 24px; font-size: 13px; color: #fff; width: 0px; overflow: hidden;} [data-theme="dark"] .QALogreportAside.compactTable td{ background-color:rgba(48,51,53,.4);} [data-theme="dark"] .QALogreportAside.compactTable tr:hover td{ background-color:rgba(48,51,53,.8);} [data-theme="dark"] .QALogreportAside.compactTable .calltypelabel {background: rgba(0, 0, 0, .3);} [data-theme="dark"] .QALogreportAside .borderRight .duration_text {background: rgba(0, 0, 0, .3);} .QALogreportAside .highlghtBg { background-color:rgba(48,51,53,.8)!important;} [data-theme="light"] .QALogreportAside .highlghtBg { background-color:var(--tdHoverBg)!important;} [data-theme="dark"] .livecallpage table tr td .text-dark2 { color: #ffffff8c!important;} .durationlive_text { font-size: 15px !important; color:var(--textmBlue); font-family: monaco, courier !important; font-weight: bold;} .livecallpage .callerDtlColumn {width: 230px;} .f_courier { font-family: monaco, courier !important;} .btn-custom-2.active{ background: #007bff; color: #fff;} .tableSection table.morepadding thead tr th {padding: 8px 8px !important; } [data-theme="dark"] .calltypelabel.outbound.darkmode { color:#d5ae3b;} [data-theme="dark"] .calltypelabel.inbound.darkmode {color:#C651E1;} .livecallpage table tr:hover .dtlarrowBtn { color: #cdcdcd!important;} .SidebarLivecallLog .pagginSection { padding-top: 15px; border-top: solid 1px #4a4a4a;} .agent_summary_head { display: inline-block; text-align: right; vertical-align: middle; padding: 15px; } .agent_summary_head span { display: inline-block; margin-left: 15px; font-size: 14px; color:var(--tdTextcolor);} .agent_summary_head span font { margin-left: 5px;} .db_agent_table table tr td.agent_login_db .no {color: #dc3545;padding-left:10px;} .db_agent_table table tr td.agent_login_db .yes {color: #28a745;padding-left:10px;} .db_agent_table table tr td.agent_login_db .fa-microphone-slash {font-size:12px;} .db_agent_table table tr td.agent_login_db .fa-microphone {font-size:12px;} .db_agent_table table tr td.call_db span i {color: #999;} .db_agent_table table tr td.call_db span {font-size: 13px;} .db_agent_table table tr td.agent_login_db .login_type {display: inline-block;} .db_agent_table table tr td.agent_login_db font {display: inline-block;margin-right: 10px;font-size: 11px;} .agent_type_db_filtr { font-size: 13px; background-color:var(--cardBg); padding-top: 2px; padding-bottom: 2px; height: 22px; color:var(--textdark2); border-color:var(--BorderColor2); width: auto; cursor: pointer;} .agent_type_db_filtr:focus { background-color:var(--cardBg); color:var(--textdark2); border-color:var(--BorderColor2); } .switch-field {display: flex;overflow: hidden; margin-left: 10px;} .switch-field input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden;} .switch-field label:last-of-type { border-radius: 0 20px 20px 0;} .switch-field label { background-color: #484646; color: #cdcdcd; font-size: 13px; line-height: 1; text-align: center; padding: 3.5px 10px; transition: all 0.1s ease-in-out; font-weight: 400; min-width: 50px;} .switch-field input:first-of-type:checked + label { background: #3b6898;} .switch-field label:last-of-type { border-radius: 0 20px 20px 0;} .switch-field label:first-of-type { border-radius: 20px 0 0 20px;} .switch-field input:checked + label { background-color: #5c983b; box-shadow: none; color: #fff;} [data-theme="dark"] .db_agent_table table tr td.call_db span font {color:var(--textdark2)} [data-theme="light"] .switch-field label {background-color:#d6d6d6;color:#4e4c4c ;} .tableSection table tbody tr td .numberField font {font-size: 11px;} .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 .db_caller_number { padding-left: 6px; color: #52af90;} .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.blue { background: #1979dea6; color: #fff; font-size: 11px;} [data-theme="light"] .db_agent_table table tr td.call_status_db .call_type.green {background: #2bb00f;} [data-theme="light"] .db_agent_table table tr td.call_status_db .call_type.blue {background: #1979de;} .callstatusagntlog .call_status {max-width: 110px;} .didcolor{color:#c1831d} .lastchild-border tr:last-child td{border-bottom: solid 1px var(--tdborderColor);} .tabsnew .nav-tabs .nav-item.show .nav-link, .tabsnew .nav-tabs .nav-link.active { color:var(--textmBlue); background-color:var(--contentSectinoBg); border-color:var(--filterBorderColor); border-bottom: 0px!important; } .tabsnew .nav-tabs .nav-link {color:#495057;} .tabsnew .nav-tabs .nav-link {margin-bottom: -2px; margin-right: 3px;} .tabsnew .nav-tabs {border-color:var(--filterBorderColor);} [data-theme="dark"] .tabsnew .nav-tabs .nav-link.active {color:var(--textdark2);} [data-theme="dark"] .tabsnew .nav-tabs .nav-link {color:var(--th-text-color);} .tabsnew .nav-tabs .nav-link:focus, .tabsnew .nav-tabs .nav-link:hover{border-color: var(--filterBorderColor) var(--filterBorderColor) var(--filterBorderColor) ;} /*css for loading page contant*/ [data-theme="light"] .ShimmerBg {background:#fff;background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%); background-size: 1000px 100%;} .loadingDataTable tr th, .loadingDataTable tr td{ height: 40px;} .animationloader .loadingDataTable tr td{height: 60px;} .animationloader table tr th {border-top: solid 0px #ffffff0a; border-bottom: solid 0px #333; background: var(--thBg); padding: 8px 8px; vertical-align: middle;} .animationloader table tr td {border-color:var(--tdborderColor); padding: 8px 8px; vertical-align: middle;} .animationloader .loadingDataTable tr td {height: 60px;} .animationloader table tr:hover td, .animationloader table tr.active td {background-color: rgba(48, 51, 53, .4);} .animationloader table tr:hover td {background-color:var(--contentSectinoBg);} .animationloader .C_alldetailSec {background:var(--contentSectinoBg); border:solid 0px var(--header-border); border-left: 0px; padding: 10px 10px 10px 18px; overflow: auto; } .animationloader .agnt_lst_row { display: block; padding-bottom: 5px; position: relative;} .animationloader .call_detail_list45 li .conect_agent_list { display: block; width: 100%; padding-left: 25px;} .animationloader .call_detail_list45 li .start_time_duation { display: block; padding-left: 49px; margin-top: 8px;} [data-theme="dark"] .animationloader .callFlowSection {background:#232323;} [data-theme="light"] .animationloader .callFlowSection {background:#edf4fc;} .animationloader .call_flow_timline{list-style: none; margin: 0px 0px 0px 105px; padding: 0px; position: relative; display: inline-block; width: 100%;margin-left: 0px; padding-left: 50px; padding-bottom: 15px;} .animationloader .call_flow_timline:after{position: absolute; left: 0px; top:4px; width: 2px; height: 100%; content: "";border-radius: 5px;opacity: .14;left:20px; height: 90%; background:var(--textGray)} .animationloader .call_flow_timline li{display: inline-block; width: 100%; float: none; margin-bottom: 20px; position: relative;} .animationloader .call_flow_timline li:after{position: absolute;left:-34px; top: 4px; width:9px; height:9px; border:solid 2px #2072ad; content: ""; background:var(--textGray); z-index: 1;border-radius:100%; border-color:var(--textGray);opacity: .56;} .animationloader .call_flow_timline li font.t_node_id {position: absolute; left:-10px;top: 4px; border-radius: 5px;text-align: center;} .animationloader .call_flow_timline li span.t_node_name{padding-left: 35px; margin-top: 3px; display: inline-block;line-height: normal; vertical-align: top;} .animationloader .call_flow_timline li._nodecase:after{border-radius: 50%; width: 15px; height: 15px;left: -7px;border-radius:100%;} /*css for loading page contant*/ .liveCallSpyActionList{ list-style:none; margin:0px; padding:0px; } .liveCallSpyActionList li{ display:inline-block; width:100%; margin-bottom:5px; padding: 5px; border-radius: 5px;} .liveCallSpyActionList li:hover{background: var(--gray100);} .bagent_detail .cnct_agent_id{font-size: 13px; color: var(--textGray);} .bagent_detail .agent_name_89{font-size: 15px; color: var(--textmBlue); text-transform: capitalize;} .spyActinSec:has(button:nth-of-type(1)) input{width: 220px;} .spyActinSec:has(button:nth-of-type(2)) input{width: 180px;} .spyActinSec:has(button:nth-of-type(3)) input{width: 100px;} .spyActinSec:has(button:nth-of-type(4)) input { width: 100%; margin-bottom: 4px;} /*css added by p.gupta*/ /*css added by r jain*/ :root{--blue-color:#007bff;} .upload-file-section button.browse{border-radius:0px;border:none;padding:7px 15px;min-height:36.5px;box-shadow:none;outline:none;} .upload-file-section button.browse:active:focus{box-shadow:none !important;outline:none;} .fromWizard ul li.step-done .nav-link span{color:mediumseagreen;} .fromWizard ul li.step-done .nav-link:after{color:var(--body-bg-color);background:mediumseagreen;border-color:transparent;} [data-theme="dark"] .fromWizard ul li.step-done .nav-link:after{color:var(--textdark2);} .formSection .fromWizard ul.nav{display:inline-flex;justify-content:space-between;margin:0;width:100%;} .formSection .fromWizard ul.nav:after{display:none;} .process-container{width:100%;margin:20px auto;padding:0;} .process-steps{display:flex;justify-content:space-between;align-items:center;list-style:none;padding:0;margin:0;position:relative;} .process-step{flex:1;text-align:center;position:relative;padding:0 10px;} .process-step::after{content:"";position:absolute;top:13px;left:50%;width:100%;height:1px;background:var(--sparatorBorder);z-index:0;} .process-step:first-child::after{left:50%;width:100%;} .process-step:last-child::after{display:none;} .step-circle{width:25px;height:25px;border-radius:50%;background:var(--subSidebarBg);border:1px solid var(--sparatorBorder);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-weight:bold;position:relative;z-index:1;font-size:12px;color:var(--textGray);} .process-step.active .step-circle{background:#007bff;border-color:#007bff;color:#fff;} .process-step.active .step-label a{color:#007bff;} .process-step.active::after{background:var(--sparatorBorder);} .process-step.completed .step-circle{background:#007bff;border-color:#007bff;color:#fff;} .process-step.completed .step-label a{color:#007bff;} .process-step .step-label a i{color:#cecece;} .process-step .step-label a i:hover{color:#6c757d;} .process-step.completed::after{background:#007bff;} .step-label{font-size:14px;} .step-label a{text-decoration:none;color:var(--text-dark);} @media (max-width:767px){.process-steps{flex-direction:column;align-items:flex-start;} .process-step{text-align:left;flex:unset;width:100%;margin-bottom:20px;padding-left:40px;} .process-step::after{top:40px;left:20px;width:2px;height:calc(100% - 20px);} .process-step:last-child::after{display:none;} .step-circle{margin:0;position:absolute;left:0;} } .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:14px;text-align:center;height:130px;border-radius:5px;padding:12px;margin:0 10px 0 0;text-align:left;line-height:22px;} .contactlist_fld_sec ul li span{font-size:14px;color:var(--textblack7);padding:0px 0px 7px} .contactlist_fld_sec ul li .custom-select{color:var(--topBtnColor);border-color:#ffffff4a;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;background-color:var(--topBtnBg);} [data-theme="dark"] .contactlist_fld_sec ul li .custom-select{background-color:var(--textGray);border-color:var(--headerSearchborder);} .contactlist_fld_sec ul li .custom-select:focus{box-shadow:none;} .contactlist_fld_sec ul li .custom-select option{background:var(--topBtnBg)} .contactlist_fld_sec ul.color_bg_card li{background:#f0f0fd;border:dashed 1px #c5c5f1;} [data-theme="dark"] .contactlist_fld_sec ul.color_bg_card li{background:var(--chipBg2);border:dashed 1px var(--chipBg2);} .formModal.compact_modal .modal-body{min-height:auto;} ._frmalert_msg{padding:7px 15px;background:#fff9;border-radius:5px;margin-bottom:15px;font-size:14px;} ._frmalert_msg.success{color:#fff;background:#4E9434} ._frmalert_msg i{margin-right:5px;} .tableSection table tbody tr td .right label{margin:0px;} .contact_list_tbl tr td.contact_list_name_field span{color:var(--textmBlue);display:inline-block;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .contact_list_tbl tr td.contact_list_name_field span a{color:var(--textmBlue);} .contact_list_tbl tr td.contact_list_name_field .recent_file_up{color:#a78d28;font-size:12px;opacity:1;} .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;} .contact_list_tbl tr td.contact_list_name_field font{display:inline-block;vertical-align:middle;} .f_weight_400{font-weight:400;} .blue-color{color:var(--blue-color);} .badge-info-s{background:var(--chipBg);color:var(--textDLight);} .badge-secondary-s{background:var(--SidebarToggleBtnBg);color:var(--text-dark);display:inline-flex;align-items:center;column-gap:2px;} .badge-secondary-s span{margin:0;color:var(--textGray) !important;padding:0;} [data-theme="dark"] .badge-secondary-s span{color:#b5b3b3 !important;} .badge-secondary-n{background:#007bff;color:#ffffff;display:inline-flex;align-items:center;column-gap:2px;} .badge-secondary-n span{margin:0;color:var(--textGray) !important;padding:0;} [data-theme="dark"] .badge-secondary-n span{color:#7e4a4a !important;} .tooltip-inner{font-size:11px !important;} .text-compact-view{color:var(--textGray);width:55px;font-size:13px;} button.dropdown-toggle,button.dropdown-toggle:focus{outline:none;box-shadow:none;text-decoration:none;} .tableSection table table thead tr th{position:inherit;} .contectListTable .dropdown a.recentUpload{padding-left:5px;color:#007bff} .m-width .modal-dialog{max-width:850px;} #AddCustomField_model .add-field-inpopup input[type=checkbox]{vertical-align:middle;margin:0px 5px 0px 0px;} #AddCustomField_model .add-field-inpopup code{color:#007bff} .delete-modal .modal-dialog{max-width:400px;} .delete-modal .modal-dialog .modal-body{padding:30px 45px;} .delete-modal .modal-dialog .modal-body .text-red{font-size:40px;display:block;color:#ff6969;} .custom_field_create ul li span{padding-left:24px;} .custom_field_create.createlist-custom ul li{padding:10px 10px 10px 0px;} .queryShowSection{max-width:100%;margin:0 auto;background:#edf4fc;border-color:var(--header-border);} [data-theme="dark"] .queryShowSection{background:var(--AlertinfoBg);border-color:var(--Alertinfo-border);} section.contentPageArea.contentReportPage .PermissionSection{max-width:100%;} section.contentPageArea.contentReportPage .page_title{padding-bottom:10px;} section.contentPageArea.contentReportPage .page_title h1{font-size:25px;} section.contentPageArea.contentReportPage .menuList{position:relative;overflow:inherit;} section.contentPageArea.contentReportPage .menuList:after{content:'';position:absolute;border-radius:12px;width:5px;height:100%;left:0px;top:0px;background:var(--sparatorBorder);} section.contentPageArea.contentReportPage .menuList li{padding:0px;margin:3px 0px;} section.contentPageArea.contentReportPage .menuList li a{position:relative;padding:8px 10px 8px 18px;border-radius:0px;background:transparent;display:flex;align-items:center;column-gap:5px;} section.contentPageArea.contentReportPage .menuList li a.active{color:var(--textmBlue);} section.contentPageArea.contentReportPage .menuList li a i{position:initial;margin:0px;font-size:14px;color:var(--textLight2)} section.contentPageArea.contentReportPage .menuList li a.active i{color:var(--textmBlue);} section.contentPageArea.contentReportPage .menuList li a.active:after{content:'';position:absolute;top:0px;left:0px;width:5px;height:100%;border-radius:12px;background:#007bff;z-index:1;} .PermissionSection .card{min-height:80vh; } label.ml-space{padding-left:22px;} .compact_modal.contactlist-view .add-field-inpopup{width:96%;margin:0 auto;} .compact_modal.contactlist-view span label.text_light_red{margin:0;} .compact_modal.contactlist-view font.text-secondary{font-size:14px;} .subscriberList-custom button.btn-sm.dropdown-toggle{min-height:32px;} .subscriberList-custom .icon-view a{background:var(--customBtnGrayBg);color:var(--customBtnGrayColor);display:inline-flex;border:solid 1px var(--customBtnGrayBorder);padding:2px 4px;border-radius:10px;width:20px;height:20px;text-align:center;align-items:center;justify-content:center;font-size:10px !important;} .subscriberList-custom .icon-view a:hover{background:var(--customBtnGrayBg);color:var(--customBtnGrayColor);} .subscriberList-custom .pagetitle span{font-size:20px;color:var(--textGray);} .subscriberTop-sec .stepBackBtn{border:none;color:var(--customBtncolor2);background:var(--chipBg2);font-size:16px;border-radius:50%;text-align:center;width:30px;height:30px;margin-right:10px;vertical-align:super;display:flex;align-items:center;justify-content:center;margin-top:3px;} .extra_detail_sec{padding:5px 0px;border-top:1px solid var(--borderLight);border-bottom:1px solid var(--borderLight);} .subscriberList-custom a.btn.btn-custom-2{padding:3px 6px;font-size:12px;} .subscriberList-custom .list-view{color:var(--blue-color);} .subscriberDropdown .custom-checkbox .custom-control-label::before,.subscriberDropdown .custom-checkbox .custom-control-label::after{margin-top:-1px;} .user_select_dropdown.subscriberDropdown{width:200px;} .subscriberList-custom .pagetitle{font-weight:500;text-transform:capitalize;} .subscriberList-custom .pagetitle .counter{font-weight:300;} .subscriberList-custom .pagetitle i{color:var(--titletext);font-style:normal;font-size:14px;font-weight:400;} .subscriberList-custom .contact_list_div .list-view a{font-size:22px;text-transform:capitalize;} .subscriberList-custom .contact_list_div .list-view a span{font-size:16px;} .subscriberList-custom .btn-custom-view{color:var(--textID);padding-left:5px;} #search_model .top-fiexd-box{height:227px;overflow:hidden;overflow-y:auto;padding:10px 0px 12px;;} #search_model .bottom-fixed{padding:15px 10px;border:solid 1px var(--sparatorBorder);background:var(--tdHoverBg);} #search_model .bottom-fixed .form-control{border:1px solid var(--BorderColor2);} #search_model .bottom-fixed label.col-form-label{padding-bottom:3px;} .radio-btn > label{color:var(--textLight2);position:relative;margin:0px;cursor:pointer;width:13px;height:13px;} .radio-btn > label i{font-size:12px;position:absolute;top:2px;} .radio-btn > input{display:none;} .radio-btn > input:checked ~ label,.radio-btn:not(:checked) > label:hover,.radio-btn:not(:checked) > label:hover ~ label{color:#F79426;} .radio-btn > input:checked + label:hover,.radio-btn > input:checked ~ label:hover,.radio-btn > label:hover ~ input:checked ~ label,.radio-btn > input:checked ~ label:hover ~ label{color:#FECE31;} .radio-btn > input:checked + label i:before{content:"\f005";font-weight:900;} .subscriberListTable{padding-bottom: 50px; } .subscriberListTable table thead tr th{border-color: var(--sparatorBorder);} .subscriberListTable table tbody tr td{border-color: var(--sparatorBorder);} .subscriberListTable table tbody tr td.primaryColumn{ width: 220px;} .subContactListActionBtn{ top:16%; right:5px; } .subContactListActionBtn .dropdown-menu{ left:calc(100% + 5px)!important; top:-20px!important; transform:inherit!important; } .subContactListActionBtn .splitterBox{border-bottom: none;} .subContactListActionBtn .splitterBox .col span {display: block; margin-top: 5px;} .subContactListActionBtn .splitterBox a i{opacity: 1; margin-right: 0px;} .subContactListActionBtn .splitterBox a{display: inline-block; margin-bottom: 0px;} .subContactListActionBtn .splitterBox .ActnBtn{padding: 0px;} @media screen and (max-width:1600px){.process-step:last-of-type:before,.process-step:not(:first-of-type):not(:last-of-type):before{left:-157px;} } @media screen and (max-width:1440px){.process-step:last-of-type:before,.process-step:not(:first-of-type):not(:last-of-type):before{left:-174px;} } @media screen and (max-width:1366px){} @media (min-width:992px) and (max-width:1170px){.process-step:last-of-type:before,.process-step:not(:first-of-type):not(:last-of-type):before{left:-113px;} } @media (min-width:768px) and (max-width:991px){.process-step:last-of-type:before,.process-step:not(:first-of-type):not(:last-of-type):before{left:-83px;} } /*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: 70px; 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: 70px; height: 20px; padding: 0; margin: 0; opacity: 0; z-index: 2; cursor: pointer;} .playpause-switch .checkbox-animate { position: relative; width: 70px; height: 20px; background-color: #cc8282; -webkit-transition: background 0.25s ease-out 0s; transition: background 0.25s ease-out 0s;} [data-theme="dark"] .playpause-switch .checkbox-animate{background: #975353} .playpause-switch .checkbox-animate:before { content: ""; display: block; position: absolute; width: 14px; height: 14px; border-radius: 10px; -webkit-border-radius: 10px; background-color: #b35252; top: 3px; left: 4px; -webkit-transition: left 0.3s ease-out 0s; transition: left 0.3s ease-out 0s; z-index: 0;} [data-theme="dark"] .playpause-switch .checkbox-animate:before{background: #ce6565} .playpause-switch input.input-checkbox:checked + .checkbox-animate { background-color: #28a74594;} .playpause-switch input.input-checkbox:checked + .checkbox-animate:before { left: 52px; 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;} [data-theme="light"] .playpause-switch .checkbox-on, [data-theme="light"] .playpause-switch .checkbox-off{color: #fff} .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*/ .filterDetailDiv {border-radius: 5px; background: var(--gray200); border: dashed 1px var(--BorderColor2); width: 95%; padding: 10px 10px 5px; margin-top: 16px;} /*css for crm intergration*/ .crmBox{display: inline-block; width: 100%; background: var(--cardBg); border: solid 1px var(--BorderColor2); padding: 15px; border-radius: 5px; color: #cdcdcd; box-shadow: 0px 3px 0px #ffffff1f; margin-bottom: 30px; transition: all .5s;} .crmBox:hover{background: var(--cardBg);} [data-theme="dark"] .crmBox:hover{background: #303335; border-color: var(--sparatorBorder)} .crmBox.active, .crmBox.active:hover {background: var(--AlertsuccessBg); border-color: var(--Alertsuccess-border); box-shadow: 0px 3px 0px #1f4b1859;} .crmBox.active .inmportantInfox{background: #d0e1cd;} [data-theme="dark"] .crmBox.active .inmportantInfox{background: #31402e} .crmBox.pending{background: #3d2a02; box-shadow: 0px 3px 0px #d3a1411f;} .crmBox.pending .inmportantInfox{background: #594923;} .crmIdentyty{display: block;} .crmIdentyty .crmName{font-size: 16px; margin-top: 10px; display: inline-block; color: var(--textdark2);} .crmIdentyty .crmIcon{display: inline-block; width: 65px;} .crmIdentyty .crmIcon img{width: 50px; border-radius: 5px} .crmdescrption{margin-top: 10px; color: #888; font-size: 14px; line-height: normal; padding: 0px 11px;} .crmactiondrpbtn{padding: 0px; outline: none; color: #888; background: none; border: none; outline: none; font-size: 18px;} .crmactiondrpbtn:after{display: none;} .actionDropbxx{background: #514f4f;} .actionDropbxx .dropdown-item{color: #c8c9ca;} .actionDropbxx .dropdown-item:hover, .actionDropbxx .dropdown-item:focus{background: #66615e; color: #ecf0f5;} .inmportantInfox{font-size: 12px; background: var(--gray200); padding: 5px 10px; border-radius: 4px; min-height: 46px; color: var(--textGray);} .activatedinfo{ font-size: 11px; color: var(--textLight2); } .activatedinfo span{ font-size: 12px; color: var(--textGray);} .badgeinactive{background: transparent; border: solid 1px #4b4b4b; color: #737171; font-size: 14px; font-weight: 400; margin-left: -20px;} [data-theme="light"] .badgeinactive{border-color: #ccc; color: #999} .badgepending{background: transparent; border: solid 1px #d58f45; color: #d58f45; font-size: 14px; font-weight: 400;} .badgesuccess{background: transparent; border: solid 1px #28a745; color: #28a745; font-size: 14px; font-weight: 400;} .stepbtnsection{display: block; margin-top: 10px; border-top: solid 1px #ffffff14; padding-top: 10px; margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px;} .stepbtnsection .basic-btn { font-size: 12px; background: var(--customBtnBg1); border: solid 1px var(--customBtnborder1); color: var(--customBtncolor1); padding: 5px 10px; border-radius: 5px; display: inline-block;} [data-theme="dark"] .stepbtnsection .basic-btn{border: none; color: #cdcdcd ; background: #ffffff14; } .crmBox.active .stepbtnsection .basic-btn{background: #cde0cb; border-color: #80ad8c} [data-theme="dark"] .crmBox.active .stepbtnsection .basic-btn{border: none; color: #cdcdcd ; background: #ffffff14;} .choosedefaultCRM{ display:inline-block; width: 350px;} .choosedefaultCRM label{display: inline-block; width: 110px; font-size: 14px; color: var(--textGray);} .choosedefaultCRM .form-control{display: inline-block; width: calc(100% - 120px); height: inherit; background:var(--customBtnBg1); color: var(--customBtncolor1); border: solid 1px var(--customBtnborder1); border-radius: 6px; font-size: 14px} .toast_alert_message{position: absolute; top: 60px; right: 10px; max-width: 350px; position: absolute;} .toast_alert_message .alert{width: 100%; padding-left: 40px; color: #ffffffd6; border-color: #fff3 } .toast_alert_message .alert .close:hover{color: #fff} .toast_alert_message .alert .msgIcon65{position: absolute; left: 7px; top: 7px; font-size: 25px; } .toast_alert_message .alert-success{background: #295e34; font-size: 15px;} .toast_alert_message .alert-danger{background: #723131; font-size: 15px;} .toast_alert_message .alert-warning{background: #5e4429; font-size: 15px;} .integrationMapingTbl table tbody tr td{padding: 8px;} .integrationMapingTbl .agentName{font-size: 14px; color: var(--textmBlue); text-transform: capitalize;} .integrationMapingTbl .agentName font{color: var(--textGray); margin-right: 4px;} .integrationMapingTbl .agentdetlbox{ display:block; margin-top: 5px; display: block; font-size: 12px; color: var(--textLight2); font-size: 12px; color: var(--textLight2); } .integrationMapingTbl .destinationnumber { margin-right: 5px;} .integrationMapingTbl .emailid { margin-left: 5px;} .integrationMapingTbl .asignedAgentColumn .agentName{ color:var(--textdark2); } .agentChooseDropDown{ display:inline-block; width:70%; } .agentChooseDropDown .select2-container .select2-selection--single{height: 33px; border-color: #ddd} .agentChooseDropDown .select2-container--default .select2-selection--single .select2-selection__arrow{height: 33px;} [data-theme="dark"] .select2-container--default .select2-selection--single{background: #333; border-color: #444} [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{color: #cdcdcd} /*css for crm intergration*/ .dashboardloader { width: 20px; aspect-ratio: 1; border-radius: 50%; animation: l11 30s infinite; border:solid 1px #6260A4; } @keyframes l11 { 0% { background: conic-gradient(#6260A4 0deg, #0000 0); } 3.33%{ background: conic-gradient(#6260A4 12deg, #0000 13deg); } 6.66%{ background: conic-gradient(#6260A4 24deg, #0000 25deg); } 16.66%{background: conic-gradient(#6260A4 60deg, #0000 61deg); } 10% { background: conic-gradient(#6260A4 36deg, #0000 37deg); } 13.33%{background: conic-gradient(#6260A4 48deg, #0000 49deg); } 20% { background: conic-gradient(#6260A4 72deg, #0000 73deg); } 23.33%{background: conic-gradient(#6260A4 84deg, #0000 85deg); } 26.66%{background: conic-gradient(#6260A4 96deg, #0000 97deg); } 30% { background: conic-gradient(#6260A4 108deg,#0000 109deg); } 33.33%{background: conic-gradient(#6260A4 120deg,#0000 121deg); } 36.66%{background: conic-gradient(#6260A4 132deg,#0000 133deg); } 40% { background: conic-gradient(#6260A4 144deg,#0000 145deg); } 43.33%{background: conic-gradient(#6260A4 156deg,#0000 157deg); } 46.66%{background: conic-gradient(#6260A4 168deg,#0000 169deg); } 50% { background: conic-gradient(#6260A4 180deg,#0000 181deg); } 53.33%{background: conic-gradient(#6260A4 192deg,#0000 193deg); } 56.66%{background: conic-gradient(#6260A4 204deg,#0000 205deg); } 60% { background: conic-gradient(#6260A4 216deg,#0000 217deg); } 63.33%{background: conic-gradient(#6260A4 228deg,#0000 229deg); } 66.66%{background: conic-gradient(#6260A4 240deg,#0000 241deg); } 70% { background: conic-gradient(#6260A4 252deg,#0000 253deg); } 73.33%{background: conic-gradient(#6260A4 264deg,#0000 265deg); } 76.66%{background: conic-gradient(#6260A4 276deg,#0000 277deg); } 80% { background: conic-gradient(#6260A4 288deg,#0000 289deg); } 83.33%{background: conic-gradient(#6260A4 300deg,#0000 301deg); } 86.66%{background: conic-gradient(#6260A4 312deg,#0000 313deg); } 90% { background: conic-gradient(#6260A4 324deg,#0000 325deg); } 93.33%{background: conic-gradient(#6260A4 336deg,#0000 337deg); } 96.66%{background: conic-gradient(#6260A4 348deg,#0000 349deg); } 100% { background: conic-gradient(#6260A4 360deg,#0000 360deg); } } /*css for dynamic log table create*/ .contentPageArea:has(.DynamicLogTable) .filterBarSec{z-index: 5} .VisPreviewColumn:has(.LogTablePreviewBox){overflow: auto;} .PreviewBox:has(.LogTablePreviewBox){padding: 10px;} .LogTablePreviewBox{width: 100%; max-width: 100%; overflow: auto;} .DynamicLogTable{margin-left: 0px; margin-right: 0px; width: 100%; margin-top: 0px; overflow: auto; position: relative; border-top:none; border-bottom:none} .widgetBox:has(.DynamicLogTable) .DynamicLogTable {overflow: auto!important; max-height: calc(100% - 40px); min-height: inherit!important;} .widgetBox:has(.DynamicLogTable) .chartBox {overflow: hidden!important; } .widgetBox:has(.DynamicLogTable) {padding:0px!important} .widgetBox:has(.DynamicLogTable) .widgetHeading {margin:0px; padding: 5px 10px} .widgetBox:has(.DynamicLogTable) .widgetHeading .widgetActionBtn{z-index: 4; top:2px;} .DynamicLogTable table tr th{top: 0px!important;} .VisSettingColumn .select2-container .select2-selection--single{ height: 35px; background: var(--formControlBg); border: 1px solid var(--BorderColor2)} .VisSettingColumn .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 35px; } .DynamicLogTable table tr td.sticky-col {position: sticky; z-index: 3; } .DynamicLogTable table tr th.last-sticky, .DynamicLogTable table tr td.last-sticky{box-shadow: inset -7px 0 0px -6px var(--sparatorBorder); } .DynamicLogTable table tr th.sticky-col{z-index: 4} .DynamicLogTable table tr td.text-ellipsis {white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; max-width: 200px} .DynamicLogTable table.table-striped tbody tr td{background: none} .DynamicLogTable table.table-striped tbody tr:nth-of-type(odd){background: none} .DynamicLogTable table.table-striped tbody tr:nth-of-type(odd) td{background-color: #f9f9f9!important} [data-theme="dark"] .DynamicLogTable table.table-striped tbody tr:nth-of-type(odd) td{background-color: #333!important} .DynamicLogTable table.table-striped tbody tr:nth-of-type(odd) td.sticky-col {} .DynamicLogTable table.table-striped tbody tr:nth-of-type(even) td.sticky-col {background: var(--cardBg);} [data-theme="dark"] .DynamicLogTable table.table-bordered{border-color:#424445} [data-theme="dark"] .DynamicLogTable table.table-bordered td, [data-theme="dark"] .DynamicLogTable table.table-bordered th { border: solid 1px #424445; } .logTblColumnList{margin-bottom: 15px;} .logTblColumnList ul{list-style: none; margin: 0px; padding: 0px;} .logTblColumnList ul li{display: flex; flex-direction: row; align-items: stretch; background: var(--cardBg); border:solid 1px var(--BorderColor2); border-radius: 5px; margin-bottom:5px; } .logTblColumnList ul li .dragIcon{font-size: 16px; color:var(--textLight2); width: 30px; border-right: solid 1px var(--sparatorBorder); ;margin-right: 10px; cursor: pointer; display:inline-flex; justify-content:center; align-items:center; cursor:grab } .logTblColumnList ul li .columnName{font-size: 15px; align-self: center; color: var(--textblack7); padding: 5px;} .logTblColumnList ul li .deleteBtn{margin-left: auto; font-size: 14px; background: none; border:none; color: var(--textGray); padding-right: 15px;} .logTblColumnList ul li .settingBtn{font-size: 14px; background: none; border:none; color: var(--textGray); padding-right: 10px;} .hightlightOne{background: var(--chipLightBg)!important} .columnSearchBx{display: block; width: 100%; border:solid 1px var(--commonBorderColor); border-radius: 5px; margin-top: 10px; margin-bottom: 10px; position: relative; padding-left: 20px; background: var(--gray200) } .columnSearchBx input{border:none; outline: none; font-size: 13px; background: none; color: var(--textblack7);} .columnSearchBx input:hover, .columnSearchBx input:focus{background: none; box-shadow: none; outline: none; color: inherit;} .columnSearchBx .srchIcon{position: absolute; left: 9px; top: 7px;} ul.ks-cboxtags { list-style: none; padding: 0px; margin: 0px;} ul.ks-cboxtags li{ display: block;} ul.ks-cboxtags li label{display: block; background-color: rgba(255, 255, 255, .9); border: 1px solid var(--BorderColor2); color: #adadad; border-radius: 10px; white-space: nowrap; margin: 3px 0px; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: all .2s; background: var(--gray100); } ul.ks-cboxtags li label { padding: 5px 10px; cursor: pointer; color: var(--textdark2); font-size: 14px;} ul.ks-cboxtags li label::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; padding: 2px 12px 2px 7px; content: "\f067"; transition: transform .3s ease-in-out;} ul.ks-cboxtags li input[type="checkbox"]:checked + label::before { content: "\f00c"; transform: rotate(-360deg); transition: transform .3s ease-in-out;} ul.ks-cboxtags li input[type="checkbox"]:checked + label { background-color: var(--chipBg); color: var(--textdark2); transition: all .2s;} ul.ks-cboxtags li input[type="checkbox"] { position: absolute;} ul.ks-cboxtags li input[type="checkbox"] { position: absolute; opacity: 0;} .groupSection{margin-top:10px; padding:10px; background:var(--gray200); border-radius:5px; } .dynamicDropDowncreateList{list-style: none; margin: 0px; padding: 0px;} .dynamicDropDowncreateList li{ display: block; position: relative; background: var(--cardBg); padding: 5px 10px; border-radius: 5px; margin-bottom: 5px;} .dynamicDropDowncreateList li .fieldLabel{font-weight: normal; font-size: 12px; margin-bottom: 4px;} .dynamicDropDowncreateList li .form-control{margin-top: 0px; margin-bottom: 5px; height: inherit; padding: 5px; font-size: 12px;} .dynamicDropDowncreateList li small{margin-top: 5px; color: var(--textGray);} .removeMenuItem{position: absolute; right: -5px; top: -5px; border: none; background: var(--cardBg); border-radius: 50%; font-size: 12px; color: #ec6868;} .DT_field_label { list-style: none; padding: 10px; margin: 0; } .DT_field_label li { display: flex; align-items: center; cursor: pointer; } .DT_field_label li input{text-indent: -999px; opacity: 0; position: absolute;} .DT_field_label li label{ display: block; width: 100%; text-align: center; padding: 5px 10px; font-size: 12px; transition: background 0.2s; color:var(--textdark2); margin-bottom:5px; cursor:pointer; border:solid 2px transparent; } .DT_field_label li input:checked + label{border:solid 2px #00000069} .dt_fieldColor { list-style: none; padding: 10px; margin: 0; } .dt_fieldColor li { display: block; align-items: center; cursor: pointer; } .dt_fieldColor li input{text-indent: -999px; opacity: 0; position: absolute;} .dt_fieldColor li label{ display: inline-block; text-align: center; font-size: 15px; padding: 1px 13px 1px 30px; border-radius: 5px; cursor:pointer; position:relative; } .dt_fieldColor li label:after{width: 15px; height: 15px; border-radius: 10px; background: #ccc; position: absolute; left: 10px; top: 2px; content: ""} .dt_fieldColor li label.textCDefault{color:var(--tdTextcolor) } .dt_fieldColor li label.textCGray{color:var(--textGray); } .dt_fieldColor li label.textCDark{color:var(--text-dark); } .dt_fieldColor li label.textCblue{color:var(--textmBlue); } .dt_fieldColor li label.textCRed{color:#dc3545 } .dt_fieldColor li label.textCGreen{color:#28a745 } .dt_fieldColor li label.textCWhite{color: #666} .dt_fieldColor li label.textCDefault:after{background:var(--tdTextcolor) } .dt_fieldColor li label.textCGray:after{background:var(--textGray); } .dt_fieldColor li label.textCDark:after{background:var(--text-dark); } .dt_fieldColor li label.textCblue:after{background:var(--textmBlue); } .dt_fieldColor li label.textCRed:after{background:#dc3545 } .dt_fieldColor li label.textCGreen:after{background:#28a745 } .dt_fieldColor li label.textCWhite:after{background:#fff; border:solid 1px #eee } .dt_fieldColor li input:checked + label:after{border:solid 2px #00000069} .custmColorPicker{padding-left: 20px; font-size: 13px; border-top: solid 1px var(--sparatorBorder); padding-top: 10px} .custmColorPicker input{width: 40px; padding: 1px; height: 20px;} .dtoptionDropDown:after{ float:right; margin-top:9px; } /*css for dynamic log table create*/ /*css for performance tracker*/ .PT-addSection .fieldTitle{font-size: 14px; color:var(--blackMedium); font-weight:500 } .taskTextBox{border-radius: 5px; position: relative; overflow: hidden; background: var(--formControlBg); border:1px solid var(--BorderColor2); } .taskTextBox::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, #ff0057, #ffcc00, #00ff6c, #00c8ff, #b300ff, #ff0057 ); background-size: 300% 300%; animation: snakeMove 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; opacity: 0; } @keyframes snakeMove {0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; }} .aiOptionBlock{border-top: solid 1px var(--sparatorBorder); padding: 5px;} .taskTextBox:hover::before{opacity: 1} .taskTextBox .form-control{white-space: pre-line; background: none; border:none} .taskTextBox .form-control:hover, .taskTextBox .form-control:focus{box-shadow: none} .taskTextBox .form-control::placeholder {color: var(--textLight2); font-weight: normal; font-size: 13px; white-space: pre-line;} .aiOptionBlock .custom-control-input:checked~.custom-control-label::before{background: linear-gradient(90deg, #ff3a82, #5233ff); border-color: #a59da0} .taskPreviewBox{height: 100%;} .taskPreviewBox .nav-tabs{border-color: var(--sparatorBorder)} .taskPreviewBox .nav-tabs .nav-link{color: var(--textGray); margin-right: 3px} .taskPreviewBox .nav-tabs .nav-link:hover{border-color: var(--sparatorBorder) var(--sparatorBorder) transparent;} .taskPreviewBox .nav-tabs .nav-link.active{border-color: var(--sparatorBorder) var(--sparatorBorder) transparent; background: var(--cardBg); color: var(--textdark2);} .taskPreviewBox .tab-content{background: var(--cardBg); padding: 15px; border:solid 1px var(--sparatorBorder); border-top: none; min-height:calc(100% - 40px);} .taskblock{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; padding:15px; border-radius:5px; background: aliceblue } [data-theme="dark"] .taskblock{background: #414141} .taskStatus{display: block;} .taskStatus span{margin-right: 10px;} .taskType{display: inline-block; background: var(--lightGrayBg); padding: 2px 5px; border-radius: 4px; color: var(--textGray);} .taskType.new{ background: var(--AlertsuccessBg); color: var(--AlertsuccessText);} .taskStatus{display: inline-block; color: var(--textGray);} .taskAssignee{display: inline-block; padding: 2px 10px; border-radius: 4px; background: var(--AlertprimaryBg); color: var(--AlertprimaryText);} .reviewBlock{ display:block; margin-bottom:15px; } .review-input { position: absolute;opacity: 0; pointer-events: none;} .review-card {display: block; background-color: #f0f6ff; border: 1px solid #dbe7ff; border-radius: .5rem; padding: 15px; cursor: pointer; transition: all 0.2s ease; } [data-theme="dark"] .review-card{background: #414141; border-color: #535354} .review-card:hover { border-color: #007bff;box-shadow: 0 0 0.25rem rgba(0,123,255,0.3); } .review-input:checked + .review-card {border: 2px solid #007bff; background-color: #e9f2ff; box-shadow: 0 0 0.25rem rgba(0,123,255,0.4); } .btn-selected { background-color: #007bff;color: #fff;border-radius: 5px; padding: .25rem .75rem; border: none; display: none; } .review-input:checked + .review-card .btn-selected {display: inline-block; } .badge-found { background-color: #e1e8f3; color: #216996; font-size: 12px; font-weight: 400;} .score-box { background-color: #c9f1c6; border-radius: .5rem; padding: .5px 10px; display: inline-block;font-weight: 500; } .score-box.low{background: #f1c6c6} .highlight-quote { background-color: var(--cardBg); color: var(--textdark2); border-radius: .5rem; padding: 10px;font-style: italic; margin: 10px 0; border: 1px solid var(--commonBorderColor); font-size:13px; } .PTtag {display: inline-block;padding: .25rem .5rem; border-radius: .25rem;font-size: 12px; margin-right: .5rem; margin-bottom: .25rem; } .tag-green { background-color: #e8f8ee; color: #1e7e34; } .tag-blue { background-color: #e7f1ff; color: #0056b3; } .tag-orange{ background-color: #fff3e6; color: #d17a00; } .tag-purple{ background-color: #f5e8ff; color: #7d3fc0; } .AddTaskFilterBar{background: var(--cardBg); border: solid 1px var(--commonBorderColor); padding-top:8px; padding-bottom:8px; border-radius:6px } .AddTaskFilterBar .form-group{margin-bottom: 0px} .AddTaskFilterBar .form-group label{margin-bottom: 4px;} .AddTaskFilterBar .form-control{padding: 8px 6px; font-size: 14px} .AddTaskFilterBar .select2-container--default .select2-selection--multiple{border: 1px solid var(--BorderColor2); border-radius: 6px; background-color: var(--formControlBg)} .AddTaskFilterBar .select2-container--default .select2-search--inline .select2-search__field{font-size: 14px; color: var(--formControlText); padding-left: 8px} .AddTaskFilterBar .select2-container--default .select2-search--inline .select2-search__field::placeholder{ color: var(--formControlText)} .taskTab{border-bottom: none; margin-bottom: 0px; background: #f1f2f6;padding: 5px; border-radius: 50px;display: inline-flex;} .taskTab .nav-link{ color: var(--text-muted); font-size:14px; border: none; margin-right:4px; border-radius: 50px; color: var(--text-muted); padding: 4px 12px;} .taskTab .nav-link:hover, .taskTab .nav-link:focus{background: #fff} .taskTab .nav-link.active{color: var(--btnPrimaryColor);background: var(--btnPrimaryBg);} [data-theme="dark"] .taskTab{background:#323234 } [data-theme="dark"] .taskTab .nav-link{color: var(--textGray);} [data-theme="dark"] .taskTab .nav-link:hover, [data-theme="dark"] .taskTab .nav-link:focus{background: #555; color: #cdcdcd} [data-theme="dark"] .taskTab .nav-link.active{background: #242628; box-shadow: none; color:#fff } /* Avatars */ .avatar-group img { width:32px; height:32px; border-radius:50%; border:2px solid #fff; margin-left:-10px; } .avatarBlock{min-width: 30px; min-height: 30px; font-size: 15px; display: inline-flex; justify-content: center; align-items: center; color: #fff; margin-left:-10px; } .taskTitle{max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .taskType { padding: 5px 10px; border-radius: 8px; font-size: 12px;font-weight: normal;} .taskType.update {background: #fff4d6; color: #b68600;} .taskType.new {background: #ccffee; color: #006600;} .taskType.bug {background: #fee2e2; color: #dc2626;} .taskType.improvement { background: #dbeafe;color: #1d4ed8;} .taskType.research {background: #f3e8ff; color: #7c3aed;} /* Make modal behave like a drawer */ .taskdetailModal .modal-dialog { position: fixed; right: 0; margin: 0; width: 450px; height: 100%; transform: translateX(100%); transition: transform .4s ease; } /* When modal is shown */ .taskdetailModal.show .modal-dialog { transform: translateX(0); } /* Full height content */ .taskdetailModal .modal-content { height: 100%; border-radius: 0; border: 0; overflow-y: auto; box-shadow: -4px 0 15px rgba(0,0,0,0.15); } /* Drawer header */ .taskdetailModal .modal-header { border-bottom: none; } .taskDSection{display: flex; align-items: center;} .descLabel {font-size: 14px; color: var(--textID); text-transform: capitalize; margin-bottom: 0px; width: 120px} /* Avatar Chips */ .avatarChip { background: #f3f4f6; border-radius: 40px; padding: 4px 12px; font-size: 14px; display: flex; align-items: center; } .avatarChip img { width: 28px; height: 28px; border-radius: 50%; margin-right: 8px; } /* Attachments */ .attachmentBox { display: flex; align-items: center; padding:4px; border: 1px solid #e5e7eb; border-radius: 8px; } .attachmentIcon { width: 40px; height: 40px; border-radius: 8px; background: #eef2ff; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px; color: #4f46e5; } .publishBtnSec{position: sticky; bottom: 0px; right: 0px; border-top: solid 1px var(--BorderColor2); padding: 10px 15px; text-align: right; } /*css for performance tracker*/ /*new css added for callbox*/ .widget_box_fixFt{width: 308px; right: 20px; } .dailyDeducationTbl:has(td .alert-warning) thead { display: none;} .dailyDeducationTbl table tr td{padding: 6px 8px!important} /*new css added for setting pages*/