/* :root { --themecolor:#0B1234; --darkbluetext:var(--Primary); --lightblue:#FBFDFF; --white:#ffffff; --button:#0F78F2; --labeltext:#6E7282; } */ :root { --bg-white:#ffffff; --bodybg:#f5f7fa; --Primary:#0B1234; --sidebar:#0B1234; --cardbg:#ffffff; --paragraph:#ffffff; --headerclr:#ffffff; --logobg:#ffffff; --button:#0F78F2; --headertext:#2A3357; --navtext:#ffffff; } [data-theme="dark"] { --background: black; --title-text: white; --desc-text: grey; } /* Set the light mode variables... */ [data-theme="light"] { --background: white; --title-text: black; --desc-text: grey; } #sidebar-color-picker { background:var(--sidebar); } #cardbg-color-picker { background:var(--cardbg); } #Primary-color-picker { background:var(--Primary); } #body-color-picker { background:var(--bodybg); } #headerclr-color-picker { background:var(--headerclr); } #logobg-color-picker { background:var(--logobg); } #button-color-picker { background:var(--button); } #headertext-color-picker { background:var(--headertext); } #navtext-color-picker { background:var(--navtext); } .colorpicker-element { border:1px solid #f4f4f4 !important;} #frame-picker { background:var(--bodybg); } body { font-family: 'Inter-Regular'; background-color:var(--bodybg); font-weight: normal; line-height:normal; } body.overlap { overflow: hidden;} body.overlap .middle-content { overflow: hidden !important; } *{ margin: 0px; padding: 0px;box-sizing: border-box; } a { transition:0.5s; } a:hover { text-decoration:none; } p { font-family: 'Inter-SemiBold'; font-size: 13px; color: #6E7282;} /*LoadingBox*/ #LoadingBox { position: fixed; z-index: 999999; background: #ffffff; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } #LoadingBox img { width: 70px; height: 70px; } /*LoadingBox end*/ .form-control:focus { background-color: #FBFDFF; border-color: var(--button); outline: 0; box-shadow: 0 0 0 .2rem #DFFFFF; color: var(--Primary); } .form-control::placeholder { color: var(--Primary); opacity: 1; } .form-control { border:1px solid #8391C6;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 5px; background: #FFFFFF; font-size: 13px; line-height: 19px; color: var(--Primary); font-family: 'Inter-Regular'; height: 35px; } select.form-control { height:35px !important; } .grey-body { background:#F0F2F5; } .buttons_row { display: flex; } .default_btn1 { background:transparent; color:#2A3357; border:1px solid transparent; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; font-family: 'Inter-SemiBold'; font-size: 14px; border-radius: 5px; margin-right:10px; transition:0.5s; } .default_btn1:hover { border:1px solid var(--button); background:var(--button); color:#ffffff; } .default_btn2 { border:1px solid var(--button); background:var(--button); border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; color:#ffffff; font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; } .default_btn2:hover { background:transparent; color:var(--button); } .default_btn3 { border:1px solid var(--button); background:transparent; border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; color:var(--button); font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; cursor: pointer; } .default_btn3:hover { background:var(--button); color:#ffffff; border-color: var(--button); } .default_btn1:hover, .default_btn2:hover, .default_btn3:hover { transform: translateY(-6px); } .button_active { border:1px solid var(--button); background:transparent; border-radius: 5px; display: inline-block; padding: 9px; color:var(--button); font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; } .button_active:hover { background:var(--button); color:#ffffff;} .button_inactive { border:1px solid var(--button); background:transparent; border-radius: 5px; display: inline-block; padding: 9px; color:var(--button); font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; opacity:0.6; } .hangupagain-btn a { border:1px solid #dc3545; background:#dc3545; border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; color:#ffffff; font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; } .hangupagain-btn a:hover { background:transparent; color:#dc3545;} label { font-family: 'Inter-SemiBold'; font-size: 13px; color: #6E7282; } .wrapper { display: flex; align-items: stretch; } .mobile-logo { display:none; } /*login form css*/ .login-left-column { background-color: #FBFDFF; height: 100vh; display: flex; flex-flow: column; border-right: 1px solid #e0e2e9; max-width:445px; width:100%; position: fixed; } .login-left-column .login-logo { height: 50vh; display: flex; justify-content: center; align-items: center;} .login-footer-content { display: block; position: absolute; bottom: 0; left: 0; } .login-right-column { display: flex; align-items: center; justify-content: center; width: calc(100% - 445px); margin-left: 445px; height: calc(100vh ); background: #ffffff; } .login-right-column .form-content { max-width: 415px; width: 100%; } /* .login-right-column .form-content h2 { color: var(--Primary); font-style: normal; font-family: 'Inter-Bold'; font-size: 20px; line-height: 24px; margin-bottom: 25px; } */ .login-right-column .form-content h2 { color: var(--Primary); font-style: normal; font-family: 'Inter-Medium'; font-size: 19px; line-height: 30px; margin-bottom: 25px; text-transform: capitalize; } .login-right-column .form-content label { font-size: 14px; color: #6E7282; margin: 0 0 5px 0; } .login-right-column .form-content .form-group { margin-bottom: 10px; } .login-right-column .form-content .form-control { padding: 0 12px; height: 40px; border:1px solid #A0A8C8; font-size: 13px; font-family: 'Inter-Regular'; } .login_btn { width: 100%; background: var(--button); display: grid; height: 40px; color: #ffffff; align-items: center; justify-content: center; border-radius:5px; font-size:14px; border:1px solid var(--button); z-index:1; position:relative; transition: ease 0.5s; font-family: 'Inter-Semibold'; } .login_btn:hover { background:transparent; color:var(--button); } .login_btn:after { position: absolute; content: ""; width: 100%; height: 0; top: 0; left: 0; z-index: -1; border-radius: 5px; background-color: #FBFDFF; background-image: linear-gradient(315deg, #FBFDFF 0%, #FBFDFF 74%); transition: all 0.3s ease; } .login_btn:hover { color: var(--button); } .login_btn:hover:after { top: auto; bottom: 0; height: 100%; } .login-right-column .formcontrolselect.select2-error { display: flex; flex-direction: column; } .login-right-column .formcontrolselect.select2-error .form-control + label.error { margin-top: 5px; } .login-right-column #LogiNCamPaigns { display: flex; flex-direction: column; } /*login form css end*/ /*sidebar*/ .agent .navbar { padding:0px; background:var(--headerclr); border: none; border-radius: 0; margin-bottom: 0; /*box-shadow: 0px 1px 0px #E0E2E9;*/border-bottom: 1px solid #e0e2e9; border-left: 1px solid #e0e2e9; position: relative; min-height: 65px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); z-index: 1; } .agent .navbar-btn { box-shadow: none; outline: none !important; border: none; } .agent .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } .campaign-name { font-style: normal; font-family:'Inter-Bold'; font-size: 16px; line-height: 19px; color: var(--headertext); padding:0 15px 0 20px; justify-content: center; display: flex; align-items: center; position:relative; } .information { position: relative; left: 5px; top: -1px; } .campaign-info { background: #2A3357; border-radius:4px; padding: 12px; color: #ffffff; display:none; width:190px; position:absolute; z-index:99; margin:5px 0 0 -6px; transition:0.5s ease; } .campaign-info::after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-right-color: #2A3357; border-width: 6px; top: -12px; transform: rotate(90deg); left: 7px; } .campaign-info ul { list-style:none; margin: 0; } .campaign-info ul li { font-size: 12px; font-family:'Inter-Regular'; padding:5px 0; } .campaign-info ul li span { margin-right:10px;} .campaign-name:hover .campaign-info { display:block; } .top-hdr-menu .nav-link { font-size: 12px; font-family: 'Inter-SemiBold'; font-style: normal; line-height: 16px; color: #2A3357; padding: 6px; border-radius: 25px; display: flex; align-items: center; position: relative; } .top-hdr-menu .nav-link label { color:var(--headertext); margin:0; cursor:pointer; } .top-hdr-menu .nav-link:hover label { color: #ffffff; } .top-hdr-menu .nav-link:hover { background:var(--button); border-radius: 25px; border-bottom:0; } .top-hdr-menu .nav-link > span { font-family: 'Inter-Bold'; background: #D1E6FF; border-radius: 57px; width: 28px; height: 20px; font-size: 11px; color: var(--Primary); line-height: 21px; text-align: center; display: inline-block; margin-left: 4px; } .top-hdr-menu .nav-link:hover span { background: #ffffff; } .top-hdr-menu .nav-item { padding:0 2px; display: flex; } .topmenu_icon { display:none; } .top-hdr-menu { display: flex; justify-content: center; align-items: center; margin-right: 25px; } .top-hdr-menu .navbar-nav { flex-direction: row; -ms-flex-direction: row;} .top-hdr-menu .nav-tabs { border-bottom: 0; } .topmenu_icon .bar1, .topmenu_icon .bar2, .topmenu_icon .bar3 { width: 22px; height: 3px; background-color: #333; margin: 4px 0; transition: 0.4s; border-radius: 25px; } .topmenu_icon.active .bar1 { -webkit-transform: rotate(-45deg) translate(-2px, 6px); transform: rotate(-45deg) translate(-2px, 6px); } .topmenu_icon.active .bar2 {opacity: 0;} .topmenu_icon.active .bar3 { -webkit-transform: rotate(45deg) translate(-4px, -8px); transform: rotate(45deg) translate(-4px, -8px); } .lunchbreak-popup { display:none; } .lunchbreak-popup.active { display: block; position: absolute; right: 20px; top: 56px;z-index:99; } .lunchbreak-popup .content { width: 300px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); z-index: 9999; background:#ffffff; border-radius:5px; } .lunchbreak-popup .content .part1 { background:#e35d54; border-radius:5px 5px 0 0; display: flex; justify-content: space-between; padding: 15px 20px; align-items: center; } .lunchbreak-popup .content .part1 .times { display:flex; flex-direction: column; color:#ffffff; } .lunchbreak-popup .content .part1 .times .clocktime { margin:10px 0 0 0; font-size:28px; font-family: 'Inter-SemiBold'; } .lunchbreak-popup .content .part1 .times .minutes { font-size:11px; font-family: 'Inter-Regular'; } .lunchbreak-popup .content .part1 .endbtn { display: flex; align-items: end; margin: 0 0 15px 0; } .lunchbreak-popup .content .part1 .endbtn a { color:#ffffff; padding:6px 5px; font-size:12px; font-family: 'Inter-SemiBold'; border:1px solid #ffffff; border-radius:5px; } .lunchbreak-popup .content .part1 .endbtn a:hover { background:#ff7d74; border-color:#ff7d74; } .lunchbreak-popup .content .part1 .lunchtext { display:flex; align-items:center; } .lunchbreak-popup .content .part1 .lunchtext p { font-size: 12px; font-family: 'Inter-SemiBold'; color:#ffffff; padding:0 6px; } .lunchbreak-popup .content .part2 { padding:15px 20px; display: flex; } .lunchbreak-popup .content .part2 .form-control { font-size:14px; color:var(--Primary); } .lunchbreak-popup .content .part2 .form-control::placeholder { color:#838383; } /*top header right bar css*/ .call_lead { display: inline-block; /*border-left:1px solid #E5E5E5; padding-left:25px;*/ } .call_lead ul { list-style: none; margin: 0;} .call_lead ul li { display: inline-block; padding:0 10px; } .call_lead ul li a { font-size: 12px; font-family: 'Inter-SemiBold'; font-style: normal; line-height: 16px; color: #2A3357; display:flex; cursor:pointer; } .call_lead ul li a:hover { color: #A6AFD7; } .call_lead ul li a span { margin-left: 5px; display: inline-block; } .logout-area { display: inline-block; position: static; text-align: right; padding-right: 10px; } .oncall-area { display: inline-block; position: static; text-align: right; padding-right: 10px; } .logout-area.active #dialer_action a > span img { transform: rotate(180deg); } .logout-area a { font-size: 13px; line-height: 16px; color: var(--headertext); padding: 10px; margin: 0; display: flex; align-items: center; } .oncall-area a { font-size: 13px; line-height: 16px; color: var(--headertext); padding: 10px; margin: 0; display: block; } .logout-area figure { margin: 0 7px 0 0; padding: 0;display: inline-block; position: relative; } .logout-area figure img { width: 18px;} .logout-area a span { margin-left: 5px; } .oncall-area figure { margin: 0 7px 0 0; padding: 0;display: inline-block; position: relative;top: -2px;} .oncall-area a span { margin-left: 5px; } .logout-area .ready_menu { top:-150px; position:absolute; max-width:0px; opacity: 0; overflow: hidden; } .logout-area.active .ready_menu { display: block !important; position:absolute; background: #ffffff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); border-radius: 4px; list-style: none; z-index:9; max-width: 150px; width: 100%; right: 25px; padding:10px; text-align: left; opacity: 1; top: 65px; margin-bottom: 0; overflow: visible; } .logout-area.active .ready_menu::before { content: ''; position: absolute; width: 15px; height: 15px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #ffffff; right: 20px; top: -15px; } .logout-area.active .ready_menu li a { padding: 5px 0; font-weight: 500; font-size: 13px; line-height: 16px; color:var(--Primary); transition: none; position:relative; } .logout-area.active .ready_menu li a:hover { color: #A6AFD7; } .logout-area.active .ready_menu li a > span { margin: 0 7px 0 0; padding: 0; display: inline-block; position: relative;top: -1px; } .logout-area.active .ready_menu li a span + span { position: absolute; top: 0; } /*top header right bar css End*/ /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ .menubar .menuscroll { display: flex; flex-direction: column; justify-content: space-between; } /*.menuscroll { height: calc(100vh - 65px); }*/ .menuscroll .mCSB_scrollTools { right:-6px; } .menuscroll .mCSB_inside > .mCSB_container { margin-right: 0; } .mobileshow { display:none;} .navarrow{ position: absolute; right: -10px; top: 22px; z-index: 9; background:transparent; padding:0; border:0; } .desktopshow { display:block; } #sidebar .menubar { min-width: 217px; max-width: 217px; background: var(--sidebar); color: #ffffff; transition: all 0.3s; position:relative; height: 100%; } #sidebar ul li a { text-align: left; } #sidebar ul ul { list-style:none; } #sidebar .sidebar-header { padding: 17px 20px; background: #ffffff; text-align: center; } .sidenavbar { margin: 0 15px !important; border-bottom: 0; } #sidebar ul.sidenavbar { padding: 10px 0 20px 0; list-style: none; } #sidebar ul li a { padding: 8px 10px; font-size: 12px; display: block; color: #ffffff; } #sidebar ul li a:hover { color: #ffffff; /*background: #1B2244;*/ } #sidebar ul li a i { margin-right: 10px; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #ffffff; /*background: #1B2244;*/ } #sidebar ul li.active>a, a[data-toggle="collapse"] { position: relative; } #sidebar .dropdown-toggle::after { display: block; position: absolute; top: 13px; right: 20px; height: 6px; width: 6px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; transform: rotate(45deg); transition: border-width 150ms ease-in-out; } /*#sidebar ul ul a { font-size: 12px !important; padding-left: 30px !important; color: #A6AFD7; padding:5px 0 5px 35px !important; }*/ #sidebar ul ul a:hover { color: #ffffff; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } #sidebar ul li > a > span { margin-left: 10px;} #sidebar ul li > a:hover .dashboard_icon { content:url("../images/dashboard_icon_h.svg"); } #sidebar ul li > a.active .dashboard_icon { content:url("../images/dashboard_icon_h.svg"); } #sidebar ul li > a:hover .lead_icon { content:url("../images/lead_icon_h.svg"); } #sidebar ul li > a.active .lead_icon { content:url("../images/lead_icon_h.svg"); } #sidebar ul li > a:hover .script_icon { content:url("../images/script_icon_h.svg"); } #sidebar ul li > a.active .script_icon { content:url("../images/script_icon_h.svg"); } #sidebar ul li > a:hover .forms_icon { content:url("../images/forms_icon_h.svg"); } #sidebar ul li > a.active .forms_icon { content:url("../images/forms_icon_h.svg"); } #sidebar ul li > a:hover .webforms_icon { content:url("../images/webform_icon_h.svg"); } #sidebar ul li > a.active .webforms_icon { content:url("../images/webform_icon_h.svg"); } #sidebar ul li > a:hover .link_icon { content:url("../images/link_icon_h.svg"); } #sidebar ul li > a.active .link_icon { content:url("../images/link_icon_h.svg"); } #sidebar ul li > a:hover .agentstatus_icon { content:url("../images/agentstatus_icon_h.svg"); } #sidebar ul li > a.active .agentstatus_icon { content:url("../images/agentstatus_icon_h.svg"); } #sidebar ul li > a:hover .customer_profiling_icon { content:url("../images/customer_profiling_icon_h.svg"); } #sidebar ul li > a.active .customer_profiling_icon { content:url("../images/customer_profiling_icon_h.svg"); } #sidebar ul li > a:hover .message_icon { content:url("../images/message_icon_h.svg"); } #sidebar ul li > a.active .message_icon { content:url("../images/message_icon_h.svg"); } #sidebar ul li > a:hover .ticket-icon { content:url("../images/ticket-icon-h.svg"); } #sidebar ul li > a.active .ticket-icon { content:url("../images/ticket-icon-h.svg"); } .socialbox { display: flex; align-items: flex-start; justify-content: flex-start; padding-top: 10px; flex-flow: wrap; border-top: 1px solid #305773; } .socialbox .socialicon { height: 40px; width:70px; display: grid; align-items: center; justify-content: center; } /* social media Notification */ .socialbox .socialicon a { position: relative;} .media-notification { width: 15px; height: 15px; border-radius: 50%; font-size: 9px; background: #E83535; display: flex; align-items: center; justify-content: center; color: #fff; right: -9px; position: absolute; top: -3px; } .socialbox .socialicon a:hover .comment_icon { content:url("../images/comment_icon_h.svg"); } .socialbox .socialicon a:hover .message_icon { content:url("../images/message_icon_h.svg"); } .socialbox .socialicon a:hover .email_icon { content:url("../images/email_icon_h.svg"); } .socialbox .socialicon a:hover .facebook_icon { content:url("../images/facebook_icon_h.svg"); } .socialbox .socialicon a:hover .twitter_icon { content:url("../images/twitter_icon_h.svg"); } .socialbox .socialicon a:hover .whatsapp_icon { content:url("../images/whatsapp_icon_h.svg"); } .socialbox .socialicon a:hover .message-board-icon { content:url("../images/message-board-h.svg"); } /* .socialbox .socialicon a.active .comment_icon { content:url("../images/comment_icon_h.svg"); } .socialbox .socialicon a.active .message_icon { content:url("../images/message_icon_h.svg"); } .socialbox .socialicon a.active .email_icon { content:url("../images/email_icon_h.svg"); } .socialbox .socialicon a.active .facebook_icon { content:url("../images/facebook_icon_h.svg"); } .socialbox .socialicon a.active .twitter_icon { content:url("../images/twitter_icon_h.svg"); } .socialbox .socialicon a.active .whatsapp_icon { content:url("../images/whatsapp_icon_h.svg"); } */ /*.logout_message .modal-dialog { max-width: 328px; width: 100%; } .logout_message .logout_popup_icon { height: 50px; width: 50px; border-radius: 50%; background: #FFF3D9; position: absolute; top: -25px; left: 0; margin: 0 auto; right: 0; justify-content: center; display: flex; } .logout_message p { color: var(--Primary); margin:20px 0 10px 0; font-size: 16px; font-family: 'Inter-Regular'; } .logout_message h3 { font-size: 16px; m : 19px; color: var(--Primary); font-family: 'Inter-Bold'; margin-bottom: 0; }*/ .left_logout_section .connectedbox a { display: flex !important; justify-content: center; align-items: center; } #sidebar .connected_icon { margin:0 5px 0 0px; } #sidebar .ring_icon { margin:0 5px 0 0px; } /*.whatsapp-content .messages-area .header a.backaarow { display:none; }*/ .wlc-whts.hide { display: none !important; } /**/ #sidebar.active .menubar { max-width:85px; min-width: 85px; } #sidebar.active .sidebar-header { padding:0px 20px; } #sidebar { min-width: 217px; max-width: 217px; background: #0B1234; color: #ffffff; transition: all 0.3s; position:relative; z-index: 999; } #sidebar.active { min-width: 85px; max-width: 85px; text-align: center; } #sidebar.active .mobilesilder img { transform: rotate(180deg); transition: ease 0.5s; } #sidebar.active .sidebar-header span { display: none; } #sidebar.active .sidebar-header strong { display: block; } #sidebar.active ul li { position:relative; } #sidebar.active ul ul { list-style: none; position: absolute; top: 0; min-width: 170px; z-index: 99; background: #515e9c; padding: 10px 0; } #sidebar.active ul ul::after { right: 100%; top: 20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-right-color: #515e9c; border-width: 6px; margin-top: -6px; } #sidebar.active ul li a:hover span { display: block; position: absolute; background-color: #2A3357; padding: 5px 10px; left: 77px; top: 1px; min-width: 160px; text-align: left; z-index: 9; font-size: 14px; border-radius: 5px; } #sidebar.active ul li a:hover span::after { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-right-color: #2A3357; border-width: 6px; margin-top: -6px; } #sidebar ul li a { text-align: left; } #sidebar ul ul { list-style:none; } #sidebar.active ul li a { padding: 10px; text-align: center; justify-content: center; } #sidebar.active ul li a i { margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px; } #sidebar.active ul ul a { padding: 5px 10px 5px 0px !important; color: #ffffff; justify-content: start; } #sidebar.active .dropdown-toggle::after { top: auto; bottom: 15px; right: 10px; transform: rotate(-40deg); } #sidebar .sidebar-header { padding: 0 20px; background:var(--logobg); text-align: center; min-height: 65px; display: flex; justify-content: center; align-items: center; z-index: 1; position: relative; } #sidebar .sidebar-header strong { display: none; } #sidebar ul.sidenavbar { padding: 10px 0 20px 0; list-style: none; display: flex; flex-direction: column; } #sidebar ul li a { padding: 12px 10px; font-size: 14px; display: flex; align-items: center; color:var(--navtext); } #sidebar ul li a:hover { color: #ffffff; /*background: #1B2244;*/ } #sidebar ul li a i { margin-right: 10px; } #sidebar ul li.active>a, a[aria-expanded="true"] { color:var(--navtext); /*background: #1B2244;*/ } #sidebar ul li.active>a, a[data-toggle="collapse"] { position: relative; } #sidebar .dropdown-toggle::after { display: block; position: absolute; top: 17px; right: 20px; height: 6px; width: 6px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; transform: rotate(45deg); transition: border-width 150ms ease-in-out; } /*#sidebar ul ul a { font-size: 12px !important; padding-left: 30px !important; color: #A6AFD7; padding:5px 0 5px 35px !important; }*/ #sidebar ul ul li { font-size: 12px !important; color: #A6AFD7; padding:5px 0 5px 35px !important; } #sidebar ul ul li a { padding:0; color: #A6AFD7; } #sidebar ul ul a:hover { color: #ffffff; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } #sidebar ul li > a > span { margin-left: 10px;} #sidebar.active ul li > a > span { display: none; } #sidebar.active .socialbox { flex-direction: column; height: 70px; justify-content: center; align-items: center; } #sidebar.active .socialbox .mCSB_container { flex-direction: column; } #sidebar.active .socialbox .mCSB_scrollTools { right:10px; } .socialbox .mCSB_container { display: flex; flex-flow: wrap; } #sidebar.active .socialbox .socialicon { height: auto; width: auto; padding: 5px 0; } .logout_message .modal-dialog { max-width: 328px; width: 100%; top: 30%; margin-left: auto; margin-right: auto; } .logout_message .modal-dialog .default_btn2:hover { color: var(--button); } .logout_message .logout_popup_icon { height: 50px; width: 50px; border-radius: 50%; background: #FFF3D9; position: absolute; top: -25px; left: 0; margin: 0 auto; right: 0; justify-content: center; display: flex; } .logout_message p { color: var(--Primary); margin:20px 0 10px 0; font-size: 16px; font-family: 'Inter-Regular'; } .logout_message h3 { font-size: 16px; margin-top: 19px; color: var(--Primary); font-family: 'Inter-Bold'; margin-bottom: 0; } #sidebar.active .left_logout_section { margin: 10px 0px 0 0px; } #sidebar.active .left_logout_section .users { display: flex; justify-content: center; flex-direction: column; align-items: center; } #sidebar.active .left_logout_section .users h3 { display:none; } #sidebar.active .left_logout_section .users .user_img { margin-right:0; } #sidebar.active .left_logout_section .logout_btn { margin: 10px 0 !important; } #sidebar.active .left_logout_section .connectedbox { border: #364385 1px solid; margin: 0px 0 15px 0; } .left_logout_section .connectedbox a { display: flex !important; justify-content: center; align-items: center; } #sidebar .connected_icon { margin:0 5px 0 0px; } #sidebar .ring_icon { margin:0 5px 0 0px; } #sidebar.active .left_logout_section .connectedbox a { flex-direction: column; } #sidebar.active .ring_icon { margin:0 0 4px 0; } #sidebar.active .connected_icon { margin:0 0 4px 0; } #sidebar.active .left_logout_section .connectedbox ul li {display: block; } #sidebar.active .sidenavbar { margin:0 0px !important; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #maincontent { width: 100%; padding:0; min-height: 100vh; transition: all 0.3s; } /*dashboard*/ #dashboard { padding-bottom: 80px; } /*today's calls card css start*/ .today-calls-card { display: flex; justify-content: space-between; align-content: center; column-gap: 15px; } /* .today-calls-card .card-box { border-right:1px solid #EFEFEF; max-width: 240px; width: 100%; justify-content: center; display: flex; } */ .today-calls-card .card-box span { margin-right:10px; } /*.today-calls-card .card-box .content p { font-size: 14px; color: #6E7282; line-height: 17px; margin: 1px 0px; font-family: 'Inter-Regular'; }*/ .today-calls-card .card-box .content p { font-size: 14px; color: #6E7282; line-height: 17px; margin: 0 0 5px 0; font-family: 'Inter-Regular'; border-bottom: 1px solid #f5f7fa; padding-bottom: 5px; } .today-calls-card .card-box .content h2 { font-size: 18px; line-height: 22px; font-family: 'Inter-Bold'; color: #2A3357; margin: 1px 0px;} .today-calls-card .fresh-lead { border-right: 0;} /*today's calls card css End*/ /*Table css Start*/ .table-header { display: flex; justify-content: space-between; border-bottom: 1px solid #002863; padding: 0 0 10px 0;} .table-header h2 { display: inline-block; font-family: 'Inter-Bold'; font-size: 20px; color: var(--Primary); margin: 0; } .table-header a { color: var(--Primary); font-weight: normal; font-size: 13px; line-height: 18px; } .table-content th { font-size: 13px; color: #6E7282; line-height: 16px; background-color: #F4F9FE; border: 0 !important; } .table-content td { border-top: 0; border-bottom:1px solid #EFEFEF; font-size: 14px; color: var(--Primary); line-height: 17px; font-family: 'Inter-Regular'; } .table-header button { color: var(--Primary); font-weight: normal; font-size: 13px; line-height: 18px; background: transparent; border: 0; margin-right: 30px; } .table-content tbody > tr:hover { background:#f2f5fc; } /*Table css End*/ .timestats-box .times-stats-list ul { list-style: none;} .timestats-box .times-stats-list ul li { position: relative; color: var(--Primary); font-size: 13px; padding: 0 0 0 17px; line-height: 26px; } .timestats-box .times-stats-list ul li::before { width: 12px; height: 12px; content: ''; left: 0; position: absolute; border-radius: 50%; top: 7px; } .talktime::before { background: #CF82F1; } .pausetime::before { background: #4EA8E5; } .waittime::before { background: #F38D7F; } .holdtime::before { background: #8590F3; } .dispotime::before { background: #30CAD3; } .deadtime::before { background: #F8D37E; } .timestats-box { display: flex; flex-wrap: nowrap; } .timestats-box .times-stats-list { width: 120px; } .timestats-box .timing-clock { margin: 15px 0 20px 0; } .timestats-box .timing-clock p { margin-bottom: 7px; padding: 0; } .timestats-box .timing-clock h3 { margin-bottom: 0; font-size: 20px; font-family: 'Inter-SemiBold'; color: var(--Primary); } .timestats-box .timing-clock h3 sub { font-size: 13px; color: #6E7282; margin-left: 5px; } .times-stats-graph { width: 100%; padding-left: 20px; display: grid; place-items: center; } .times-stats-graph img { padding: 30px 0 0 0; } .calllogs-box { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 12px 12px 0px; } .calllogs-box .content { display: flex; justify-content: space-between; width: 100%; border-bottom:1px solid #EFEFEF; padding: 10px 0; } .calllogs-box .calllogcontent { display: flex; width: 100%; } .calllogs-box .calllog-icon { margin: 0 10px 0 0; } .calllogs-box .calllogcontent .discription-box { display: flex; flex-direction: column; } .calllogs-box .discription-box .time { display: flex; justify-content: flex-start; } .calllogs-box .discription-box .time h4 { font-size: 14px; line-height: 17px; color: var(--Primary); margin:0 8px 0 0; } .calllogs-box .discription-box .time p { font-weight: normal; font-family: 'Inter-Regular'; margin: 0; padding: 0;} .calllogs-box .discription-box .customer-name { font-weight: 500; font-size: 13px; line-height: 19px; color: var(--Primary); margin-top: 5px; } .calllogs-box .discription-box .customer-name span.status { margin-left: 0px; font-size: 13px; color: #636FE1; background: #F6F7FF; display: inline-block; padding: 0px 8px 0px 15px; border-radius: 30px; position: relative; height: 25px; line-height: 25px; } .calllogs-box .discription-box .customer-name span.status::before { width: 6px; height: 6px; background: #636FE1; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } /*.leaderboard-box .table-content td { padding: 8px .75rem; }*/ .leaderboard-box table td.status-value { position: relative; text-align: right; } .leaderboard-box table td.status-value span { margin-left: 10px; font-size: 14px; line-height: 17px; display: inline-block; padding: 4px 8px 4px 15px; border-radius: 30px; position: relative; } .leaderboard-box table td.status-value span.incall { color: #17B93B; background: #EDFFEA; } .leaderboard-box table td.status-value span.incall::before { width: 6px; height: 6px; background: #17B93B; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .leaderboard-box table td.status-value span.pause { color: #E37537; background: #FFF1E4; } .leaderboard-box table td.status-value span.pause::before { width: 6px; height: 6px; background: #E37537; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .leaderboard-box table td.status-value span.lunchbreak { color: #636FE1; background: #F6F7FF; } .leaderboard-box table td.status-value span.lunchbreak::before { width: 6px; height: 6px; background: #636FE1; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .callsummary .callsummary-box, .disposition-summary-box { padding: 10px 0; } .today_list { display: none; } .today_list.active{ display: block; position: relative; } .today_list ul { list-style: none; position: absolute; background: #ffffff; padding: 10px; width: 150px; right: 0; border: 1px solid #f4f4f4; z-index: 9; } .today_list ul li a { color: var(--Primary); font-weight: normal; font-size: 13px; line-height: 18px; } .today_list ul li a:hover { color:#D1E6FF; } .newleadbox table tbody > tr > td a { transition:05s; text-align:center; display:flex; align-items: center; } .newleadbox table tbody > tr > td.postcode-content { position:relative; padding-top:0; padding-bottom:0; vertical-align:middle; } .newleadbox table tbody > tr > td.postcode-content p { color: var(--Primary); font-family: 'Inter-Regular'; } .newleadbox table tbody > tr:hover td.postcode-content .infocallbox { display:flex; column-gap: 2px; } .newleadbox table tbody > tr > td.postcode-content a span { display: none; } .newleadbox table tbody > tr:hover td.postcode-content a { display: flex; width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; margin:0 2px; } .newleadbox table tbody > tr:hover td.postcode-content a span { display:flex; } .newleadbox table tbody > tr:hover td.postcode-content a img { width:15px; } .newleadbox table tbody > tr:hover td.postcode-content p { display:none; } .newleadbox table tbody > tr td.postcode-content .infocallbox { display:flex; column-gap: 2px; } .newleadbox table tbody > tr > td.postcode-content .infocallbox a { display: none; } .newleadbox table tbody > tr:hover td.postcode-content .infocallbox a { display: flex; } .animate-top{position:relative;animation:animatetop 0.2s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} .animate-zoom {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} .left_logout_section { display: flex; justify-content: flex-start; flex-direction: column;border-top: 1px solid #305773;margin: 10px 0px 25px 0px; padding-top: 15px; } .left_logout_section .users { display: flex; justify-content:flex-start; padding: 0 15px; align-items: center; z-index: 999; position:relative; } .left_logout_section .users .user_img { width:24px; height: 24px; background-color: #1D2962; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 10px; color: #838FCB; margin-right: 6px; cursor: pointer;} .left_logout_section .users h3 { font-size: 13px; font-weight: 600; color: #FFFFFF; margin: 0px; cursor:pointer; } .left_logout_section .connectedbox { border:#364385 1px solid; margin:15px 0; } .left_logout_section .connectedbox ul { list-style: none; margin: 0; } .left_logout_section .connectedbox ul li { display: inline-block; } .left_logout_section .connectedbox ul li a { font-size: 12px; line-height: 15px; color: #ffffff; } .left_logout_section .connectedbox ul li.active a { background: #364385; } .left_logout_section .connectedbox ul li a span { display: inline-block; margin: 0 5px 0 0!important; } .left_logout_section .copyright { color:#E3E3E3; font-size: 10px; line-height: 14px; text-align: center; font-family: 'Inter-Medium'; border-top: 1px solid #305773; margin-top: 10px; padding: 10px 0; } .left_logout_section .copyright a { color:#E3E3E3; } .left_logout_section .copyright strong { color:#ffffff; font-family: 'Inter-SemiBold'; font-weight:normal; } /*Lead Search Popup css*/ .lead_search_popup { opacity:0; right: -490px; position: fixed; height:100vh; } .lead_search_popup.active { opacity:1; display:block; transition:right 0.5s; width:100%; right: 0; background-color:rgba(0,0,0,0.5); top: 0; z-index: 9999; } .lead_search_popup .content { max-width:490px; width:100%; padding:0 20px; background:#ffffff; height: 100vh; position:relative; } #leadsearch .lead_form { height:calc(100vh - 167px); overflow-y: auto; padding-bottom: 50px; scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior: none; } #leadsearch .lead_form::-webkit-scrollbar { width: 8px; height: 14px; } #leadsearch .lead_form::-webkit-scrollbar-track { background: transparent; } #leadsearch .lead_form::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } #leadsearch .lead_form::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } #leadsearch .lead_form .form-group { margin-bottom:10px; padding:0 5px 0 5px; } #leadsearch .lead_form label { color:#6E7282; font-size: 13px; line-height: 16px; font-family: 'Inter-SemiBold'; } #leadsearch .lead_form .form-group .form-control{ border:1px solid #A0A8C8; height: 35px; border-radius: 5px; padding:0px 12px; color:var(--Primary); } #leadsearch .lead_footer { position: absolute; bottom: 0; right: 0; background: #FFFFFF; box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.08); padding:16px 24px; display: flex; justify-content: flex-end; max-width: 490px; width: 100%; height: 72px; } #leadsearch .search_lead_btn { border:1px solid var(--button); background:var(--button); border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; color:#ffffff; font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; height: 40px; } #leadsearch .search_lead_btn:hover { background:transparent; color:#2A3357;} #leadsearch .clear_all_btn { background:transparent; color:#2A3357; border:1px solid transparent; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; font-family: 'Inter-SemiBold'; font-size: 14px; border-radius: 5px; margin-right:10px; transition:0.5s; height: 40px; } #leadsearch .clear_all_btn:hover { border:1px solid var(--button); background:var(--button); color:#ffffff; } #leadsearch .lead_hideshow_popup { border:0; background:transparent; } /*Lead Search Popup css eND*/ .popup_header { display: flex; justify-content: space-between; border-bottom:1px solid #EFEFEF; padding:15px 0; margin-bottom:15px; height: 55px; } .popup_header h1 { font-size: 20px; line-height: 24px; color:var(--Primary); margin:0; font-family: "Inter-Bold"; } /*agents status popup css*/ .agentsstatus_popup { opacity:0; right: -490px; position: fixed; height:100vh; } .agentsstatus_popup.active { opacity:1; display:block; transition:right 0.5s; width:100%; right: 0; background-color:rgba(0,0,0,0.5); top: 0; z-index:9999; } .agentsstatus_popup .content { max-width:490px; width:100%; padding:0 20px; background:#ffffff; height: 100vh; position:relative; } #agentsstatus .agentsstatus_hideshow_popup { border:0; background:transparent; } .agentsstatus_popup .popup_header h1 { font-family: 'Inter-Bold'; } .agentsstatus_popup .content .agents_search { border:1px solid #A0A8C8; height: 37px; border-radius: 5px; display:flex; padding:8px 0 8px 12px; margin-bottom:10px; } .agentsstatus_popup .content .agents_search .form-control { color:var(--Primary); border:0; height: 20px; padding:0; box-shadow:none; } .agentsstatus_popup .content .agents_search .form-control:focus { background-color: transparent; border-color: transparent; outline: 0; box-shadow: none; } .agentsstatus_popup .content .agents_search input.form-control{ border-right:1px solid #CDCDCD; border-radius: 0; } .agentsstatus_popup .content .agents_search select.form-control{ width:90px; padding:0 0 0 5px; } .agentsstatus_popup .agents_content { display: flex; height:calc(100vh - 55px); overflow-y: auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; border-top: 1px solid #EFEFEF; } .agentsstatus_popup .agents_content::-webkit-scrollbar { width: 8px; height: 14px; } .agentsstatus_popup .agents_content::-webkit-scrollbar-track { background: transparent; } .agentsstatus_popup .agents_content::-webkit-scrollbar-thumb { background: #F8F3EC; border-radius: 14px; } .agentsstatus_popup .agents_content::-webkit-scrollbar-thumb:hover { background: #F8F3EC; } .agentsstatus_popup .agents_content .agent_data { display: flex; justify-content: space-between; width: 100%; } .agentsstatus_popup .agents_content .agent_data .name { color:var(--Primary); font-weight: normal; font-size: 14px; line-height: 24px; } .agentsstatus_popup .agents_content ul { margin:0; list-style:none; padding:0 5px; } .agentsstatus_popup .agents_content .agent_data { border-bottom: 1px solid #EFEFEF; padding:15px 0; } .agentsstatus_popup .agents_content .agent_data .status span { margin-left: 10px; font-size: 12px; line-height: 17px; display: inline-block; padding: 4px 8px 4px 15px; border-radius: 30px; position: relative; } .agentsstatus_popup .agents_content .agent_data .status span.incall { color: #17B93B; background: #EDFFEA; } .agentsstatus_popup .agents_content .agent_data .status span.incall::before { width: 6px; height: 6px; background: #17B93B; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .agentsstatus_popup .agents_content .agent_data .status span.pause { color: #E37537; background: #FFF1E4; } .agentsstatus_popup .agents_content .agent_data .status span.pause::before { width: 6px; height: 6px; background: #E37537; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .agentsstatus_popup .agents_content .agent_data .status span.lunchbreak { color: #636FE1; background: #F6F7FF; } .agentsstatus_popup .agents_content .agent_data .status span.lunchbreak::before { width: 6px; height: 6px; background: #636FE1; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .agentsstatus_popup .agents_content .agent_data .status span.teabreak { color: #E2B513; background: #FFFBEB; } .agentsstatus_popup .agents_content .agent_data .status span.teabreak::before { width: 6px; height: 6px; background: #E2B513; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .agentsstatus_popup .agents_content .agent_data .status span.ready { color: #26C3CC; background: #D1FBFD; } .agentsstatus_popup .agents_content .agent_data .status span.ready::before { width: 6px; height: 6px; background: #26C3CC; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } .agentsstatus_popup .agents_content .agent_data .status span.closer { color:#D9227A; background:#FFE9F3; } .agentsstatus_popup .agents_content .agent_data .status span.closer::before { width: 6px; height: 6px; background:#D9227A; position: absolute; border-radius:50%; content: ''; top: 10px; left: 5px; } /*agents status popup css End*/ /*Select Closer Inbound Groups css*/ .sticky-inbound { height: 136px; position: sticky; top: 0px; background: #ffffff; padding:10px 0; } .inbound-left-column { background-color: #FBFDFF; height: 100vh; display: flex; flex-flow: column; border-right: 1px solid #e0e2e9; max-width:445px; width:100%; position: fixed; } .inbound-left-column .inbound-logo { height: 50vh; display: flex; justify-content: center; } .inbound-footer-content { display: block; position: absolute; bottom: 0; left: 0; } .inbound-right-column { display: flex; /*align-items: center;*/ justify-content: center; width:calc(100% - 445px); margin-left: 445px; padding-top:45px; position: relative; background: #ffffff; /*height: 100vh;*/ } .inbound-right-column .content { max-width: 640px; width: 100%; position: relative; } .inbound-right-column .content .header { display: flex; justify-content: space-between;} .inbound-right-column .content .header h2 { font-family: 'Inter-Bold'; font-size: 20px; line-height: 24px; color:var(--Primary); } .inbound-right-column .content .header .selectall label { cursor:pointer; color:#6E7282; font-size: 14px; font-family: 'Inter-Regular'; line-height: 24px; } .inbound-right-column .content .header .selectall .custom-checkbox .custom-control-label::before { border: #8391C6 solid 1px; border-radius: 4px; height:16px; width:16px; } .inbound-right-column .content .multi-select { display:flex; width:100%; flex-direction: column; background:#ffffff; } .inbound-right-column .content .multi-select .multi-add { display: inline-block; height: 100px; overflow-y: auto; scrollbar-color:#f4f4f4 #f4f4f4; scrollbar-width: thin; } .inbound-right-column .content .multi-select .multi-add::-webkit-scrollbar { width: 8px; height: 14px; } .inbound-right-column .content .multi-select .multi-add::-webkit-scrollbar-track { background: #f4f4f4; } .inbound-right-column .content .multi-select .multi-add::-webkit-scrollbar-thumb { background: #ddd; border-radius: 14px; } .inbound-right-column .content .multi-select .multi-add::-webkit-scrollbar-thumb:hover { background: #ddd; } .inbound-right-column .content .multi-select .multi-add a { display: inline-block; padding:5px 12px; font-family: 'Inter-SemiBold'; color:#ffffff; background:#42538E; border: 1px solid #42538E; box-sizing: border-box; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 100px; align-items: center; margin:2px 3px; font-size: 13px; } .inbound-right-column .content .multi-select .multi-add span { margin-left:10px; } .inbound-right-column .content .multi-select .select_count { color: #2A3357; font-size: 14px; font-family: 'Inter-Regular'; font-weight: normal; margin: 10px 0 0 0; } .inbound-listing { display: flex; flex-direction: column; margin: 50px 0 70px 0; } .inbound-listing .inbound-box ul { list-style: none; margin: 0 0 20px 0;} .inbound-listing .inbound-box h4 { font-size: 14px; line-height: 17px; font-family: 'Inter-SemiBold'; color: #8C9096; margin-bottom: 10px; } .inbound-listing .inbound-box ul li { display: inline-block; margin:0 3px 10px 3px; } .inbound-listing .inbound-box ul li a { padding: 9px 12px; display: inline-block; background: #FFFFFF; border: 1px solid #BCC4E1; box-sizing: border-box; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.12); border-radius: 100px; font-size: 14px; line-height: 17px; color: #2A3357; transition: 0.5s; } .inbound-listing .inbound-box ul li a:hover { border: 1px solid #42538E; color: #42538E; background: #E4EAFF; font-family: 'Inter-Medium'; } .inbound-listing .inbound-box ul li.active a { border: 1px solid #42538E; color: #42538E; background: #E4EAFF; font-family: 'Inter-Medium'; } .inbound-footer { position: fixed; bottom: 0; left: 446px; right: 0; background: #FFFFFF; width:calc(100% - 445px); box-shadow: 0px -4px 25px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; padding: 15px 140px; z-index: 99; } .inbound-footer .allow-outbound { align-items: center; display: flex; } .allow-outbound .custom-control.custom-checkbox { margin: 0px 0 0 0; } .inbound-footer .allow-outbound label { cursor:pointer; color:var(--Primary); font-size: 14px; line-height: 24px; font-family: 'Inter-Regular'; } .inbound-footer .allow-outbound .custom-checkbox .custom-control-label::before { border: #8391C6 solid 1px; border-radius: 4px; height:16px; width:16px; } .inbound-footer .allow-outbound .custom-checkbox:checked ~ .custom-control-label::before { border: var(--button) solid 1px; } .inbound-footer .reset-continue-btn { display: flex; } .inbound-footer .continue_btn { border:1px solid var(--button); background:var(--button); border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; color:#ffffff; font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; } .inbound-footer .continue_btn:hover { background:transparent; color:var(--button);} .inbound-footer .reset_btn { background:transparent; color:#2A3357; border:1px solid transparent; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; font-family: 'Inter-SemiBold'; font-size: 14px; border-radius: 5px; margin-right:10px; transition:0.5s; } .inbound-footer .reset_btn:hover { border:1px solid var(--button); background:var(--button); color:#ffffff; } /*Select Closer Inbound Groups css End*/ /*Call Disposition page css*/ .disposition-header { display:flex; justify-content: space-between; padding: 0; position:relative; } .disposition-search .form-group { position: relative;} .disposition-search .form-control { max-width: 270px; width: 100%; font-size: 15px; font-weight: normal; padding: 0 15px 0 38px; border-color: #A0A8C8; } .disposition-search .form-control::placeholder { color: #8C9096; } .disposition-search .form-group span.searchdesktop { position:absolute; top: 8px; left: 10px; } .disposition-search .form-group .searchmobile { display:none; } .disposition-header .page-title h1 { color: #292929; font-size: 20px; line-height: 24px; font-family: 'Inter-Bold'; margin: 0 18px 0 0; } .disposition-header .hdr-left { display: flex; justify-content: space-between; align-items: center; position:relative; } .disposition-header .mobilenumber { color: #2A3357; font-size: 14px; line-height: 17px; font-family: 'Inter-SemiBold'; margin-right: 10px; } .number-minutes { display: flex; align-items:center; } .disposition-header .minutes { font-size: 14px; line-height: 17px; font-family: 'Inter-SemiBold'; color: #6E7282; } .disposition-header .callcumments { margin-left: 30px; } .disposition-header .callcumments ul { margin: 0; list-style: none; } .disposition-header .callcumments ul li { display: inline-block; margin: 0 12px; } .disposition-header .callcumments ul li a { font-size: 13px; font-family: 'Inter-SemiBold'; color: #2A3357; line-height: 16px; display: flex; align-items: center; } .disposition-header .callcumments ul li a p { color: #2A3357; } .disposition-header .callcumments span { margin-right: 10px; } .disposition-content ul del { font-size: 14px; color: #dc3545 !important; margin-left: 33px; font-family: 'Inter-Regular'; } .customtab .nav-tabs { background: #F4F9FE; border: 2px solid transparent; } .customtab .nav-tabs .nav-item { margin:0 14px; } .customtab .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #40465E; background-color: transparent; border-bottom: 2px solid #FFAA05; font-family: 'Inter-SemiBold'; } .customtab .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-bottom: 2px solid #FFAA05; box-shadow: none; } .customtab .nav-tabs .nav-link { color: #40465E; font-size: 14px; font-style: normal; border-width: 0 0 2px 0; padding-left: 0; padding-right: 0; } .disposition-content { margin-top: 20px;} /*.disposition-content .disposition-listing ul { list-style: none;} .disposition-content .disposition-listing ul>li { margin: 4px 0px; display:flex; } .disposition-content .disposition-listing ul>li>a { border: 1px solid transparent; border-radius: 20px; padding: 9px 9px 9px 35px; font-size: 14px; line-height: 17px; color: var(--Primary); font-weight: 400px; position: relative;} .disposition-content .disposition-listing ul>li>a::before { border-radius: 50%; height: 16px; width: 16px; content: ''; position: absolute; border: 1px solid #8391C6; left: 10px; top: 9px; } .disposition-content .disposition-listing ul>li>a:hover { border: 1px solid var(--button); background: #FBFDFF; color: var(--button); font-family: 'Inter-SemiBold'; } .disposition-content .disposition-listing ul>li>a.active { border: 1px solid var(--button); background: #FBFDFF; color: var(--button); font-family: 'Inter-SemiBold'; } .disposition-content .disposition-listing ul>li>a.active::before { border: 4px solid var(--button); } .disposition-content .disposition-listing ul>li>a:hover::before { border: 4px solid var(--button); }*/ .disposition-content ul { list-style: none; margin: 0; padding: 0; /*overflow: auto;*/ display: flex; flex-direction: column; } .disposition-content ul li { position: relative; border-radius: 20px; display: flex; margin: 2px 0; align-items: center; } .disposition-content ul li a { display: inline-block; cursor: pointer; -webkit-transition: all 0.25s linear; border: 1px solid transparent; border-radius: 20px; padding: 9px 9px 9px 32px; font-size: 14px; line-height: 17px; color: var(--Primary); font-weight: 400px; position: relative; margin: 0; border: transparent 1px solid; font-family: 'Inter-Regular';} .disposition-content ul li a:hover { border: 1px solid var(--button) !important; color: var(--button); } .disposition-content ul li input[type=radio]{ position: absolute; visibility: hidden; left: 11px; top: 11px; } .disposition-content ul li label { display: block; cursor: pointer; -webkit-transition: all 0.25s linear; border: 1px solid transparent; border-radius: 20px; padding:8px 9px 8px 31px /*9px 9px 9px 32px*/; font-size: 14px; line-height: 17px; color: var(--Primary); font-weight: 400px; position: relative; margin: 0; border: transparent 1px solid; font-family: 'Inter-Regular'; } .disposition-content ul li:hover label { color: var(--button); border: 1px solid var(--button); font-family: 'Inter-SemiBold'; } .disposition-content ul li .check { display: block; position: absolute; border: 1px solid #8391C6; border-radius: 100%; height: 16px; width: 16px; top: 10px; left: 10px; transition: border .25s linear; -webkit-transition: border .25s linear; } .disposition-content ul li:hover .check { border: 4px solid var(--button); } .disposition-content input[type=radio]:checked ~ .check { border: 4px solid var(--button); } .disposition-content input[type=radio]:checked ~ .check::before{ background: var(--button); } .disposition-content input[type=radio]:checked ~ label{ color: var(--button); border: 1px solid var(--button); font-family: 'Inter-SemiBold'; } .disposition-content input[type="radio"]:checked ~ label a { padding:0; color: var(--button); font-family: 'Inter-SemiBold'; } .disposition-content input[type="radio"]:checked ~ label a:hover { border:transparent 1px solid !important; } .disposition-footer { position: fixed; display: flex; justify-content: space-between; bottom: 0; width: calc(100% - 217px); padding: 10px 20px 10px 20px; background:#ffffff; box-shadow: 0px -4px 25px rgba(0, 0, 0, 0.1); align-items: center; z-index:9; left: 217px; } body.active .disposition-footer { left: 0; width: calc(100% - 0px); } .disposition-footer .switch_takebreak { display: flex; margin: 0px 0 0 0; align-items: center; } .disposition-footer .switch_takebreak p { color: var(--Primary); font-size: 14px; font-family: 'Inter-SemiBold'; margin: 0; } .breakbutton { display: flex; } .switch_takebreak .btn-toggle { margin:0px 0 0 15px; padding: 0; position: relative; border: none; width:32px; height: 16px; border-radius:20px; color: #6b7381; background: transparent; border: 1px solid #8391C6; } .switch_takebreak .btn-toggle:focus, .switch_takebreak .btn-toggle:focus.active, .switch_takebreak .btn-toggle.focus, .switch_takebreak .btn-toggle.focus.active { outline: none; box-shadow: none; } .switch_takebreak .btn-toggle:before, .switch_takebreak .btn-toggle:after { width:12px ; height: 12px; transition: opacity .25s; } .switch_takebreak .btn-toggle > .handle { position: absolute; top:1px; left:1px; width:12px; height: 12px; border-radius:50%; background: #8391C6; transition: left .25s; } .switch_takebreak .btn-toggle.active { transition: background-color .25s; } .switch_takebreak .btn-toggle.active { background-color: var(--button); border: 1px solid var(--button); } .switch_takebreak .btn-toggle.active > .handle { left:16px; transition: left .25s; background: #ffffff; } .switch_takebreak .btn-toggle.active:before { opacity: .5; } .switch_takebreak .btn-toggle.active:after { opacity: 1; } .switch_takebreak .selectbreak .form-control { padding-left:35px !important; height: 35px; font-size:14px; } .switch_takebreak .selectbreak { margin:0px 0 0 30px; width: 198px; position: relative;} .switch_takebreak .selectbreak span { position: absolute; left: 6px; top: 7px; } .takebreak-popup .modal-dialog { max-width: 240px; background: #FFFFFF; box-shadow: -4px 4px 25px rgba(0, 0, 0, 0.1); border-radius: 8px; padding:10px 24px; top:25%; } .takebreak-popup .modal-dialog .modal-content { padding:0; border:0; } .takebreak-popup ul { list-style:none; margin:0; padding:0; } .takebreak-popup ul li { line-height:32px; } .takebreak-popup ul li a { font-size:13px; font-family:'Inter-SemiBold'; color:var(--Primary); } .takebreak-popup ul li span { margin-right:5px; } .takebreak-popup ul li a:hover { border:0; color:#8391C6; } .takebreak-popup .modal-header { display:flex; justify-content: space-between; align-items: center; padding:10px 0; } .takebreak-popup .modal-header h4 { font-size:20px; color:var(--Primary); font-family:'Inter-Bold'; margin:0; } .takebreak-popup .modal-header button { border:0; background:transparent; } /*Call Disposition page css End*/ /*manager Permission page css*/ #manager-permission-popup .modal { padding-right:0 !important; } .manager-permission-popup .modal-dialog { max-width: 436px; width:100%; box-sizing: border-box; box-shadow: -4px 4px 25px rgba(0, 0, 0, 0.1); border-radius: 8px; top:15%; } .manager-permission-popup .modal-dialog .modal-content { padding:0; border:0; padding:10px 24px 24px 24px; border-radius: 8px; } .manager-permission-popup .modal-dialog .modal-content p { color:var(--Primary); font-size:14px; font-family:'Inter-Regular'; } .manager-permission-popup .modal-header { margin:0 0 10px 0; } .manager-permission-popup .modal-header h4 { font-size:20px; color:var(--Primary); font-family:'Inter-Bold'; margin:0; } /*inner Content*/ .inner-content { display: flex; } .inner_header { display: flex; justify-content:space-between; padding:10px 15px; position: relative; } .inner_header .page-title { display: flex; padding: 5px 0; align-items: center; } .inner_header .page-title h1 { color: #292929; font-size: 20px; line-height: 24px; font-family: 'Inter-Bold'; margin: 0 18px 0 0; } /* .middle-section .customtab ul { min-height: 38px; position: sticky; top: 0;z-index:1; } */ /*Right Button Navbar*/ .middle-section { width: calc(100%); } .mainform-content .customer-info { margin-top:15px; position: relative; } .mainform-content .customer-info .border-bottom { border-color:#EFEFEF; } .mainform-content .customer-info p { margin-bottom:0; color: var(--Primary); font-size: 16px; font-family: 'Inter-Regular'; } /*.mainform-content .customer-info #main { height: 65vh; padding-bottom: 0px; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; overflow-y: auto; } .mainform-content .customer-info #main::-webkit-scrollbar { width: 8px; height: 14px; } .mainform-content .customer-info #main::-webkit-scrollbar-track { background: transparent; } .mainform-content .customer-info #main::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .mainform-content .customer-info #main::-webkit-scrollbar-thumb:hover { background: #ffffff; }*/ .mainform-content .customer-info .textarea-fields { height:110px; } .mainform-content .customer-info h2 { font-size: 18px; line-height: 22px; color: var(--Primary); font-family: 'Inter-Bold'; border-bottom:1px solid #002863; margin: 0 0 10px 0; padding-bottom: 7px; } .mainform-content .customer-info .eye { position: absolute; right: 0; } .mainform-content .customer-info .form-group { position: relative; } .mainform-content .outbound-text { position: relative; font-weight: 500; font-size: 14px; color: #636FE1; padding-left: 12px; } .mainform-content .outbound-text::before { background: #636FE1; width: 6px; height: 6px; content: ''; position: absolute; top: 5px; left: 0; border-radius: 50%; } .mainform-content .send_dtmf { display: flex; position: relative; } .send_dtmf label { margin: 8px 10px 0 0; font-size: 14px; font-family: 'Inter-SemiBold'; color: #6E7282; } .mainform-content .send_dtmf .form-control { padding: 9px 12px; width: 148px; height: 35px; border-color: #A0A8C8; } .mainform-content .send_dtmf .form-control::placeholder { font-family:'Inter-Regular'; color: #6E7282; } .mainform-content .send_dtmf .send { position: absolute; right: 1px; padding: 0px 10px 0 10px; top: 1px; bottom: 1px; background: #ffffff; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: center; } .mainform-content .send_dtmf .send:hover { background: #F4F9FE; } .mainform-content .customer-info .mCSB_buttonDown { display: none; } .mainform-content .customer-info .mCSB_buttonUp { display: none; } .mainform-content .customer-info .mCSB_container { margin: 0 !important;} .mainform-content .customer-info .mCSB_draggerContainer { display: none; } .buttons-nav-content { width: 140px; padding: 0 15px; border-left: 1px solid #EFEFEF; background: #ffffff; position:sticky; top:0; } .buttons-nav-content .livecall { display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #EFEFEF; padding: 10px 0; text-align:center; } .buttons-nav-content .livecall span { } .buttons-nav-content .livecall h5 { font-size: 13px; line-height: 16px; font-family: Inter-SemiBold; color: #6E7282; margin: 5px 0 5px 0; } .buttons-nav-content .livecall .calltiming { font-size: 13px; font-family: 'Inter-SemiBold'; color:#2A3357; } .buttons-nav-content #ParkCounterSpan { font-size: 13px; font-family: 'Inter-SemiBold'; color:#2A3357; margin:-5px 0 0 0; text-align:center; } .buttons-nav-content .endchatbox { display: flex; flex-direction: column; align-items: center; padding: 10px 0; text-align:center; } .buttons-nav-content .endchatbox h5 { font-size: 13px; line-height: 16px; font-family: 'Inter-Regular'; color: #292929; margin: 5px 0 5px 0; } .buttons-nav-content a.calldetails { font-weight: 500; font-size: 13px; line-height: 16px; color: var(--button); display: block; text-align: center; padding: 10px 0; border-top: 1px solid #EFEFEF; } .buttons-nav-content a.calldetails:hover { color: #7E8AFB; } .buttons-nav-content .buttons_column { display: flex; flex-direction: column; align-items: center; height: 72vh; /*border-bottom: 1px solid #EFEFEF;*/ overflow-y: auto; scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; } .buttons-nav-content .buttons_column .tab-content { width:100%; } .buttons-nav-content .buttons_column::-webkit-scrollbar { width: 5px; height: 14px; } .buttons-nav-content .buttons_column::-webkit-scrollbar-track { background: transparent; } .buttons-nav-content .buttons_column::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .buttons-nav-content .buttons_column ul { margin: 0; list-style: none; /*padding: 25px 0;*/ } .buttons-nav-content .buttons_column ul li a { display: block; text-align: center; color: #2A3357; padding: 15px 0;} .buttons-nav-content .buttons_column ul li p { margin:5px 0 0 0; color: inherit; font-family: 'Inter-Regular'; font-size: 13px; line-height: 16px; } .buttons-nav-content .mCSB_draggerContainer { display: none; } .buttons-nav-content .mCSB_buttonDown { content:url('../images/nav-down-arrow.svg'); bottom: 5px; left: -40px; display:none !important; } .buttons-nav-content .mCSB_buttonUp { content:url('../images/nav-up-arrow.svg'); top: 5px; left: -40px; display:none !important; } /*.buttons-nav-content .mCSB_buttonDown { content:url('../images/nav-down-arrow.svg'); bottom: 5px; width: 140px !important; left: -100px; background: #fff !important; height: 30px !important; opacity:1 !important; } .buttons-nav-content .mCSB_buttonUp { content:url('../images/nav-up-arrow.svg'); top: 5px; width: 140px !important; left: -100px; background: #fff !important; height: 30px !important; opacity:1 !important; }*/ #buttonscontent .mCSB_container { margin: 0 !important;} /*.diallead_footer { background: #FFFFFF; box-shadow: 8px -4px 25px rgba(0, 0, 0, 0.1); padding: 15px 20px; position: absolute; z-index: 999; bottom: 0; right: 0; left: 0; } */ /*custom form css*/ /*.mainform-content .customer-info #customform { height: 65vh; padding-bottom: 0px; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } .mainform-content .customer-info #customform ::-webkit-scrollbar { width: 8px; height: 14px; } .mainform-content .customer-info #customform ::-webkit-scrollbar-track { background: transparent; } .mainform-content .customer-info #customform ::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .mainform-content .customer-info #customform ::-webkit-scrollbar-thumb:hover { background: #ffffff; }*/ .customform_left_linsting ul { list-style: none;} .customform_left_linsting ul li { } .customform_left_linsting ul li a { font-size: 13px; line-height: 16px; color: var(--Primary); font-family: 'Inter-Regular'; padding: 10px; border-left: 2px solid transparent; display: block; } .customform_left_linsting ul li a:hover { color: #40465E; font-family: 'Inter-SemiBold'; background: #FFFBF2; border-left: 2px solid #FFAA05; } .customform_left_linsting ul li.active a { color: #40465E; font-family: 'Inter-SemiBold'; background: #FFFBF2; border-left: 2px solid #FFAA05; } #customform .border-bottom { border-color: #EFEFEF; } .customer-info label { font-family: 'Inter-SemiBold'; font-size: 14px; color: #6E7282; } .customform_sticky { position: sticky; position: -webkit-sticky; top: 0px; height:200px; } .mycallback label { font-size: 14px; line-height: 24px; color: #6E7282; font-family: 'Inter-Regular'; } .mycallback .custom-control-label::before { border-color: #8391C6; } /*script and soudboard css*/ .mainform-content .script-content #script_form { max-height: 70vh; padding-bottom: 0px; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } .mainform-content .script-content #script_form ::-webkit-scrollbar { width: 8px; height: 14px; } .mainform-content .script-content #script_form ::-webkit-scrollbar-track { background: transparent; } .mainform-content .script-content #script_form ::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .mainform-content .script-content #script_form ::-webkit-scrollbar-thumb:hover { background: #ffffff; } .mainform-content .script-content h2 { font-size: 18px; line-height: 22px; color: var(--Primary); font-family: 'Inter-Bold'; border-bottom:1px solid #002863; margin: 0 0 10px 0; padding-bottom: 7px; } .mainform-content .script-content p { margin-bottom:0; color: var(--Primary); font-size: 16px; font-family: 'Inter-Regular'; } .mainform-content .script-content #soundboard_form { height: 70vh; padding-bottom: 0px; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } .mainform-content .script-content #soundboard_form ::-webkit-scrollbar { width: 8px; height: 14px; } .mainform-content .script-content #soundboard_form ::-webkit-scrollbar-track { background: transparent; } .mainform-content .script-content #soundboard_form ::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .mainform-content .script-content #soundboard_form ::-webkit-scrollbar-thumb:hover { background: #ffffff; } .soundboard_content { padding-top: 30px; } .soundboard_content h3 { color: #292929; font-size: 16px; line-height: 19px; margin-bottom: 15px; font-family: 'Inter-Bold'; } .soundboard_content ul { list-style: none;} .soundboard_content ul li { font-family: 'Inter-Regular'; } .soundboard_content ul li a { font-size: 16px; color: #2A3357; display: block; padding: 10px 0; border: 1px solid transparent; border-radius: 5px; display: flex; justify-content: space-between; } .soundboard_content ul li a span { display: none; } .soundboard_content ul li a:hover { border:1px solid #E0E2E9 ; padding: 10px; } .soundboard_content ul li.active a span { display: block; } .soundboard_content ul li a:hover span { display: block; } .soundboard_content ul li.active a { border:1px solid #E0E2E9 ; padding: 10px; } .soundboard_search { position: relative; padding-right: 15px; } .soundboard_search span { position: absolute; top: 9px; left: 10px; } .soundboard_search .form-control { height: 35px; margin: 1px 0 0 0; font-size: 15px; font-family: 'Inter-Regular'; max-width: 235px; width: 100%; padding: 0 15px 0 38px; } .soundboard_search .form-control::placeholder { color:#8C9096; } /*Lead Found page css*/ .footer-pagination .pagination { justify-content: center;} .footer-pagination .pagination .page-item { margin: 0 5px; } .footer-pagination .pagination .page-link { border: 0; color: #42538E; border-radius: 50%; width: 32px; height: 32px; padding: 0; font-size: 16px; display: flex; justify-content: center; align-items: center; } .footer-pagination .pagination .page-link:hover{ background-color: #42538E; color: #ffffff; } .footer-pagination .pagination .page-item.active .page-link { background-color: #42538E; color: #ffffff; } .breadcrumb-mobile { display: none; } .all-breadcrumbs { display: flex; flex-direction: row; align-items: center; } .all-breadcrumbs ul { margin: 0; list-style:none; display: flex; } .all-breadcrumbs ul > li { margin: 0 5px; position: relative;} .all-breadcrumbs ul > li > a { background-color: #F7F7FC; border-radius: 17px; color: var(--Primary); font-size: 13px; padding: 6px 10px; font-family: 'Inter-Regular'; display: flex; align-items: center; } .all-breadcrumbs ul > li > a:hover { background-color: #42538E; color: #ffffff; font-family: 'Inter-SemiBold'; } .all-breadcrumbs ul .dropdown-menu { position: absolute; border: 1px solid #E0E2E9; box-sizing: border-box; box-shadow: 4px -4px 25px rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px; } .all-breadcrumbs .navbar-nav .dropdown-menu .custom-checkbox { display: flex; margin-bottom: 10px;cursor: pointer;} .all-breadcrumbs .navbar-nav .dropdown-menu .custom-checkbox label { color:#6E7282; font-size: 14px; font-family: 'Inter-Regular'; } .all-breadcrumbs ul > li > a .arrow { box-sizing: border-box; height: 8px; width: 8px; border-style: solid; border-color: #42538E; border-width: 0px 2px 2px 0px; transform: rotate(45deg); transition: border-width 150ms ease-in-out; margin: -2px 0 0 10px; } .all-breadcrumbs ul > li > a:hover .arrow { border-color: #ffffff; } .all-breadcrumbs .city.active .dropdown-menu { display: block; } .all-breadcrumbs .city.active .dropdown-menu .custom-checkbox { margin: 5px 0; } .all-breadcrumbs .count { width: 16px; height: 16px; background: #42538E; border-radius: 16px; color: #ffffff; display: flex; justify-content: center; align-items: center; margin: 0px 5px 0 0; font-size: 11px; font-family: 'Inter-SemiBold'; } .all-breadcrumbs ul > li > a:hover .count { background: #ffffff; color: #42538E; } .all-breadcrumbs ul > li > a.clearall { background: transparent; } .all-breadcrumbs ul > li > a.clearall:hover { background: transparent; color: #42538E; } /*Lead Details page css*/ .diallead_bgtn { border:1px solid var(--button); background:var(--button); border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 9px; color:#ffffff; font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; height: 35px; } .diallead_bgtn span { margin: 0 10px 0 0; } .diallead_bgtn:hover { background:#4B99F4; color:#ffffff;} .leaddetails.border-top { border-top:0 !important; } .leaddetails-content .form-group p { margin-bottom: 0; color: var(--Primary); font-size: 16px; font-family: 'Inter-Regular'; } .leaddetails-content .form-group label { margin-bottom: 0;} .leaddetails-content .form-group .dalt_dial { position: relative; top: -1px; left: 5px; } .leaddetails-content .border-bottom { border-bottom:1px solid #EFEFEF !important; } /*#leaddetails { height: 70vh; padding-bottom: 0px; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } #leaddetails ::-webkit-scrollbar { width: 8px; height: 14px; } #leaddetails ::-webkit-scrollbar-track { background: transparent; } #leaddetails ::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } #leaddetails ::-webkit-scrollbar-thumb:hover { background: #ffffff; }*/ /*call notes*/ /*#callnotes { background:#fbfcfd; height: 70vh; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } #callnotes ::-webkit-scrollbar { width: 8px; height: 14px; } #callnotes ::-webkit-scrollbar-track { background: transparent; } #callnotes ::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } #callnotes ::-webkit-scrollbar-thumb:hover { background: #ffffff; }*/ #callnotes .date_box { border-bottom:1px solid #9DA4B5; position:relative; justify-content: center; display: flex; } #callnotes .date_box span { color:#4D4D4D; font-family:'Inter-SemiBold'; font-size:14px; background:#fbfcfd; padding:0 20px; position:absolute; top:-11px; } .notes_card_section { display:flex; justify-content: center; flex-direction: column; align-items: center; } .notes_card_section .card { max-width:460px; width:100%; padding:15px; border: 1px solid #E0E2E9; box-sizing: border-box; box-shadow: 0px 2px 11px #E5E5EE; border-radius: 8px; } .notes_card_section .card .card-header { display:flex; padding:0; background:transparent; border:0; justify-content:space-between; align-items: center; } .notes_card_section .card .card-header .card-title { display:flex; justify-content: center; padding:0; margin:0; align-items: center; } .notes_card_section .card .card-header .card-title h4 { margin:0 0 0 8px; color:var(--Primary); font-family:'Inter-Bold'; font-size:16px; } .notes_card_section .card .card-header .campaign-name h5 { font-size:14px; font-size:14px; color:#6E7282;font-family:'Inter-Regular'; margin:0; } .notes_card_section .card .card-body p { color:var(--Primary); font-size: 14px; font-family:'Inter-Regular'; line-height:16.94px; } .notes_card_section .card .card-footer { background:transparent; border:0; display:flex; justify-content:left; position:relative; } .notes_card_section .card .card-footer p { font-size:13px; color:#6E7282; margin:0; font-family:'Inter-Regular'; font-weight:normal; } .notes_card_section .card .card-footer .time { padding:0 0 0 8px; margin-left:8px; position:relative; } .notes_card_section .card .card-footer .time::before { content:''; position:absolute; width:4px; height:4px; background:#CDCDCD; top:7px; border-radius:50%; left:0; } /*call notes*/ .customer_profile_header { display: flex; justify-content: space-between; } .customer_profile_header .page-title { display: flex; padding: 5px 0; } .customer_profile_header .page-title h1 { color: var(--Primary); font-size: 20px; line-height: 24px; font-family: 'Inter-Bold'; margin: 0 18px 0 0; } .customer-profile-content { max-height: calc(100vh - 180px); position: relative; overflow-y:auto; scrollbar-color:#6E7282 #ffffff; } .customer-profile-content::-webkit-scrollbar { width: 8px; height: 14px; } .customer-profile-content::-webkit-scrollbar-track { background: transparent; } .customer-profile-content::-webkit-scrollbar-thumb { background: #6E7282; border-radius: 14px; } .customer-profile-content::-webkit-scrollbar-thumb:hover { background: #6E7282; } .customer-profile-content .date_box { border-bottom:1px solid #9DA4B5; position:relative; justify-content: center; display: flex; } .customer-profile-content .date_box span { color:#4D4D4D; font-family:'Inter-SemiBold'; font-size:14px; background:#fbfcfd; padding:0 20px; position:absolute; top:-11px; } .customer-sms.inboundsms { display: flex; justify-content: left; } .customer-sms.outboundsms { display: flex; justify-content: right; } .customer-sms .card { max-width:49%; width:100%; padding:15px; border: 1px solid #E0E2E9; box-sizing: border-box; box-shadow: 0px 2px 11px #E5E5EE; border-radius: 8px; } .customer-sms .card .card-header { display:flex; padding:0; background:transparent; border:0; justify-content:space-between; align-items: center; } .customer-sms .card .card-header .card-title { display:flex; justify-content: center; padding:0; margin:0; align-items: center; } .customer-sms .card .card-header .card-title h4 { margin:0 0 0 8px; color:var(--Primary); font-family:'Inter-Bold'; font-size:16px; } .customer-sms .card .card-header .campaign-name { display:flex; justify-content: center; align-items: center; } .customer-sms .card .card-header .campaign-name h5 { font-size:14px; font-size:14px; color:#6E7282;font-family:'Inter-Regular'; margin:0; } .customer-sms .card .card-header .campaign-name span { font-size:13px; font-family:'Inter-SemiBold'; color:#2A3357; position:relative; padding-left:15px; } .customer-sms .card .card-header .campaign-name span::before { width:4px; height:4px; border-radius:50%; content:''; background:#CDCDCD; position: absolute; top: 9px; left: 4px; } .customer-sms .card .card-body p { color:var(--Primary); font-size: 14px; font-family:'Inter-Regular'; line-height:16.94px; } .customer-sms .card .card-footer { background:transparent; border:0; display:flex; justify-content:left; position:relative; } .customer-sms .card .card-footer p { font-size:13px; color:#6E7282; margin:0; font-family:'Inter-Regular'; font-weight:normal; } .customer-sms .card .card-footer .time { padding:0 0 0 8px; margin-left:8px; position:relative; } .customer-sms .card .card-footer .time::before { content:''; position:absolute; width:4px; height:4px; background:#CDCDCD; top:7px; border-radius:50%; left:0; } .customer-sms .card .status span{ font-size: 13px; color: #636FE1; background: #F6F7FF; padding: 0px 8px 0px 15px; border-radius: 30px; position: relative; height: 25px; line-height: 25px; display:inline-block; } .customer-sms .card .status span::before { width: 6px; height: 6px; background: #636FE1; position: absolute; border-radius: 50%; content: ''; top: 10px; left: 5px; } .customer-sms .card.yellow-border { border:1px solid #E7B537; } .customer-sms .card.green-border { border:1px solid #42C8B8; } .customer-sms .card.blue-border { border:1px solid var(--button); } .calendar_dropdown { display: flex; } .calendar_dropdown button{ display:flex; justify-content: center; align-items: center; background:transparent; border:0; } .calendar_dropdown .calendar_icon { color: #6E7282; } .calendar_dropdown button p { margin:0 10px 0 5px; font-size: 14px; font-family:'Inter-SemiBold'; } .tday-viewall .fa-chevron-right { color: #6E7282; } /*Call Logs and Call Backs*/ .callbacks-table { height: 78vh; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } .callbacks-table::-webkit-scrollbar { width: 8px; height: 14px; } .callbacks-table::-webkit-scrollbar-track { background: transparent; } .callbacks-table::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .callbacks-table::-webkit-scrollbar-thumb:hover { background: #ffffff; } .callbacks-content .callbacks-table .table tbody + tbody { border-top: 1px solid #002863; } .callbacks-content .callbacks-table tbody.hedding td { border-color: #002863; font-size: 16px; font-family:'Inter-Bold'; color: var(--Primary); } /*CallBacks Popup*/ .callbackpopup .modal-dialog { max-width: 398px; width: 100%; background: #FFFFFF; box-shadow: -4px 4px 25px rgba(0, 0, 0, 0.1); border-radius: 8px; } .callbackpopup .modal-header { border: 0; } .callbackpopup #myModal {padding: 0 !important; } .callbackpopup .modal-header .modal-title { font-family: 'Inter-Bold'; font-size: 20px; color: var(--Primary); } .callbackpopup .form-control { color: var(--Primary); font-size: 16px; border: 1px solid #A0A8C8;} .callbackpopup .form-group { margin-bottom: 10px; } .callbackpopup .form-group label { margin-bottom: 5px; } .callbackpopup .custom-control-label { font-size: 14px; color: var(--Primary); line-height: 24px; margin-bottom: 0; font-family: 'Inter-Regular'; } /*Time Report page*/ .graph_status { display: flex; justify-content: center; } .graph_status ul { margin: 0; list-style: none; display: flex; } .graph_status ul li { font-size: 12px; color: #0C0C0C; font-family:'Inter-Regular'; display: flex; justify-content: center; align-items: center; margin: 0 5px; } .graph_status ul li span { height: 12px; width: 12px; border-radius: 50%; margin-right: 10px; display: flex; } .graph_status ul li .billable { background: #419DDC; } .graph_status ul li .lunch { background: #F4C862; } .graph_status ul li .break { background:#FB8171; } /*facebook css*/ .facebook-content { background:#f0f2f5;} .facebook-content .content { display: flex; justify-content: center; align-items: center; height:82vh; } .facebook-content .content .row { display: flex; justify-content: center; align-items: center; } .facebook-content .content .form { max-width: 300px; width: 100%; } .facebook-content .content .form-content { box-shadow: 0px 2px 11px #E5E5EE; border-radius: 8px; padding: 15px; background:#ffffff; } .facebook-content .content .form .form-group .form-control { font-size:14px; height:35px; font-family:'Inter-Semibold'; color:#2A3357; } .facebook-content .content .form .form-group .form-control::placeholder { color:#92959c; } .facebook-content .content .form .login { color:#ffffff !important; background:#1877f2; font-family:'Inter-Semibold'; cursor:pointer; border:1px solid transparent; transition:0.5s; } .facebook-content .content .form .login:hover { background:#d6eefd; color:#1877f2 !important; } .facebook-content p { color:#1c1e21; font-size:14px; } .facebook-content .forgot { color:#1877f2; font-size:14px; font-family:'Inter-Medium'; } .facebook-content .forgot:hover { color:#2A3357; } .facebook-content .create-account { font-size:14px; line-height:35px; background:#42b72a; color:#ffffff; font-family:'Inter-Semibold'; padding:0px 10px; border-radius:5px; height:35px; display:inline-block; } .facebook-content .create-account:hover { background:#eafbe6; color:#42b72a; } .facebook-content .createpage { font-size:12px; color:#1c1e21; font-family:'Inter-Regular'; } .facebook-content .createpage a { font-size:12px; color:#1c1e21; font-family:'Inter-Bold'; } .messanger-content .messages-area .header a.backaarow { display:none; } /*Internal Chat*/ .internalchat-content { display:flex; } .internalchat-content .internal-chat-user { max-width: 325px; width: 100%; height:100vh; border-right:1px solid #f0f1f1; position: relative; padding:0px;} .internalchat-content .internal-chat-user .search { position: sticky; height: 45px; top: 0; background: #fff; margin: 15px 10px 0px 10px; z-index: 9; width: calc(100% - 20px); padding-bottom: 10px; display: flex; column-gap: 10px; } .internalchat-content .internal-chat-user .search .form-control { padding-left:30px; } .internalchat-content .internal-chat-user .search .refresh-chat-list { position: relative; top: 9px; } .internalchat-content .internal-chat-user .search .form-control::placeholder{ color:#8C9096; } .internalchat-content .internal-chat-user .search span { position: absolute; left: 9px; top: 8px } .internalchat-content .internal-chat-user ul { list-style:none; margin:10px 0 0 0; } .internalchat-content .internal-chat-user ul li { margin:0;} .internalchat-content .internal-chat-user ul li a { display:flex; align-items: center; padding:15px 10px; } .internalchat-content .internal-chat-user ul li a:hover { background:#F4F9FE; } .internalchat-content .internal-chat-user ul li a span.u-img { margin-right:10px; position:relative; } .internalchat-content .internal-chat-user ul li a span.online { content:''; position:absolute; right:0; height:8px; width:8px; background:#17B93B; bottom:4px; border-radius:50%; } .internalchat-content .internal-chat-user ul li a .content { display:flex; flex-direction: column; -ms-flex: 1; flex: 1; } .internalchat-content .internal-chat-user ul li a .content h2 { font-size:16px; color:#050F34; margin:0 0 5px 0; font-family:'Inter-Regular'; overflow: hidden; white-space: nowrap; width: 210px; } .internalchat-content .internal-chat-user ul li a .content p.message { color:#050F34; margin-bottom:0; font-size:12px; font-family:'Inter-Regular'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:210px; } .internalchat-content .internal-chat-user ul li a .content .date { font-size:12px; color:#8C9096; font-family:'Inter-Regular'; } .internalchat-content .internal-chat-user ul li a .content .sms-count { background:#42538E; border-radius:50%; width:18px; height:18px; color:#42538E; color:#fff; font-size: 12px; font-family:'Inter-SemiBold'; display: flex; justify-content: center; align-items: center; } .internalchat-content .internal-chat-user ul li a .content .column { display:flex; justify-content: space-between; } .internalchat-content .messages-area { width: calc(100% - 325px); } .internalchat-content .messages-area .header { border-bottom:1px solid #f0f1f1; padding:10px 24px; display: flex; align-items: center; align-items: center; justify-content: space-between; max-height: 55px; } .internalchat-content .messages-area .header h2 { font-size:16px; font-family:'Inter-Bold'; color:#353535; margin:0 0 0 10px; } .internalchat-content .messages-area .internal-chat-header { display: flex; align-items: center; } .internalchat-content .messages-area .date_box { border-bottom:1px solid #9DA4B5; position:relative; justify-content: center; display: flex; margin:0 5px 0 15px; } .internalchat-content .messages-area .date_box span { color:#4D4D4D; font-family:'Inter-SemiBold'; font-size:14px; background:#fbfcfd; padding:0 20px; position:absolute; top:-11px; } .internalchat-content .sms-area .sendsms { display:flex; padding: 15px 15px 15px 0px; flex-direction: column; width:70%; } .internalchat-content .sms-area .sendsms .content { background:#DCECFE; padding:10px; box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .internalchat-content .sms-area .sendsms .content p { margin:0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; word-break: break-all; } .internalchat-content .sms-area .sendsms .time { text-align: right; font-size:12px; color:#8C9096; margin-top:5px; } .internalchat-content .sms-area .receive { display:flex; padding: 15px 0px 15px 15px; flex-direction: column; width:70%; } .internalchat-content .sms-area .receive .content { background:#fff; padding:10px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .internalchat-content .sms-area .receive .content p { margin:0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; word-break: break-all; } .internalchat-content .sms-area .receive .time { text-align: left; font-size:12px; color:#8C9096; margin-top:5px; } .internalchat-content .sms-area { width: 100%; height: calc(100vh - 114px); position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; padding:0px 0 20px 0; background: #FBFCFD; } .internalchat-content .sms-area::-webkit-scrollbar { width: 8px; height: 14px; } .internalchat-content .sms-area::-webkit-scrollbar-track { background: transparent; } .internalchat-content .sms-area::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .internalchat-content .sms-area::-webkit-scrollbar-thumb:hover { background: #ffffff; } .internalchat-content .sms-textarea .form-control { height: 60px; padding: 10px 50px 10px 24px; resize: none; border-top:1px solid #EFEFEF !important; border-radius:0; border:0; font-size:15px; color:#050F34; scrollbar-color:#889BC8 #D4DDF2; overflow-y: auto; } .internalchat-content .sms-textarea .form-control::-webkit-scrollbar { width: 8px; height: 14px; } .internalchat-content .sms-textarea .form-control::-webkit-scrollbar-track { background: transparent; } .internalchat-content .sms-textarea .form-control::-webkit-scrollbar-thumb { background: #889BC8; border-radius: 14px; } .internalchat-content .sms-textarea .form-control::-webkit-scrollbar-thumb:hover { background: #889BC8; } /* .internalchat-content .sms-textarea { position: sticky; height: 58px; bottom: 0; } */ .internalchat-content .sms-textarea { position: sticky; /*height: 85px;*/ bottom: 0; } .internalchat-content .sms-textarea .form-control::placeholder { color:#8C9096; } .internalchat-content .send-btn { position: absolute; right: 15px; top: 20px; } .internalchat-content .send-btn img { width:14px;} .internalchat-content .sms-textarea .send-btn a { width:28px; height:28px; display:flex; background:#0F78F2; border-radius: 50%; justify-content: center; align-items: center; } .internalchat-content .sms-textarea .send-btn a:hover { background:#FFAA05; } .internalchat-content .sms-textarea .send-btn button.send { width:28px; height:28px; display:flex; background:#0F78F2; border-radius: 50%; justify-content: center; align-items: center; border: 0; } .internalchat-content .sms-textarea .send-btn button.send:hover { background:#FFAA05; } #internalchat .fade:not(.show) { opacity:1; } .internalchat-content.vertical-tab .nav-tabs { background: transparent; border: 0; height: calc(100vh - 70px); display: flex; flex-direction: column; scrollbar-color:#889BC8 #D4DDF2; flex-wrap: nowrap; overflow-y: auto; } .internalchat-content.vertical-tab .nav-tabs::-webkit-scrollbar { width: 8px; height: 14px; } .internalchat-content.vertical-tab .nav-tabs::-webkit-scrollbar-track { background: transparent; } .internalchat-content.vertical-tab .nav-tabs::-webkit-scrollbar-thumb { background: #889BC8; border-radius: 14px; } .internalchat-content.vertical-tab .nav-tabs::-webkit-scrollbar-thumb:hover { background: #889BC8; } .internalchat-content.vertical-tab .nav-tabs li{ float: none; width: 100%; } .internalchat-content.vertical-tab .nav-tabs li a { background: #fff; border-radius: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.3s ease 0s; } .internalchat-content.vertical-tab .nav-tabs li a:hover, .internalchat-content.vertical-tab .nav-tabs li.active a, .internalchat-content.vertical-tab .nav-tabs li.active a:hover { background: transparent; border: none; } .internalchat-content.vertical-tab .nav-tabs li a:before, .internalchat-content.vertical-tab .nav-tabs li a:after { content: ""; background-color: #F4F9FE; width:100%; height: 100%; opacity: 0; transform: perspective(300px) rotateX(-100deg); position: absolute; top: 0;left: 0; z-index: -1;transition: all 0.4s ease 0s; } .internalchat-content.vertical-tab .nav-tabs li a:after{ transform: perspective(300px) rotateX(100deg); left: auto; right: 0; transition: all 0.4s ease 0.1s; } .internalchat-content.vertical-tab .nav-tabs li.active a:before, .internalchat-content.vertical-tab .nav-tabs li a:hover:before, .internalchat-content.vertical-tab .nav-tabs li.active a:after, .internalchat-contentvertical-tab .nav-tabs li a:hover:after { opacity: 1; transform: perspective(300px) rotateX(0); } #customerchat .customerchat-iframe { border: 0; height: calc(100vh - 105px) !important; } #customerchat .fade:not(.show) { opacity:1; } #customerchat .vertical-tab .nav-tabs { background: transparent; border: 0; height: calc(100vh - 10px); display: flex; flex-direction: column; scrollbar-color:#889BC8 #D4DDF2; flex-wrap: nowrap; overflow-y: auto; } #customerchat .vertical-tab .nav-tabs::-webkit-scrollbar { width: 8px; height: 14px; } #customerchat .vertical-tab .nav-tabs::-webkit-scrollbar-track { background: transparent; } #customerchat .vertical-tab .nav-tabs::-webkit-scrollbar-thumb { background: #889BC8; border-radius: 14px; } #customerchat .vertical-tab .nav-tabs::-webkit-scrollbar-thumb:hover { background: #889BC8; } #customerchat .internal-chat-user { max-width: 325px; width: 100%; height: calc(100vh - 0px); border-right:1px solid #f0f1f1; position: relative; padding:0px;} #customerchat .internalchat-content .sms-area { width: 100%; height: calc(100vh - 115px); position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; padding:0px 0 20px 0; background: #FBFCFD; } #customerchat .internalchat-content .sms-area .chat_not_exist { display: flex; align-items: center; justify-content: center; height: calc(100vh - 160px); } #customerchat .internalchat-content .sms-textarea { position: sticky; height: 60px; bottom: 0; } #customerchat .vertical-tab .nav-tabs li{ float: none; width: 100%; } #customerchat .vertical-tab .nav-tabs li a { background: #fff; border-radius: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.3s ease 0s; } #customerchat .vertical-tab .nav-tabs li a:hover, #customerchat .vertical-tab .nav-tabs li.active a, #customerchat .vertical-tab .nav-tabs li.active a:hover { background: transparent; border: none; } #customerchat .vertical-tab .nav-tabs li a:before, #customerchat .vertical-tab .nav-tabs li a:after { content: ""; background-color: #F4F9FE; width: 50.5%; height: 100%; opacity: 0; transform: perspective(300px) rotateX(-100deg); position: absolute; top: 0;left: 0; z-index: -1;transition: all 0.4s ease 0s; } #customerchat .vertical-tab .nav-tabs li a:after{ transform: perspective(300px) rotateX(100deg); left: auto; right: 0; transition: all 0.4s ease 0.1s; } #customerchat .vertical-tab .nav-tabs li.active a:before, #customerchat .vertical-tab .nav-tabs li a:hover:before, #customerchat .vertical-tab .nav-tabs li.active a:after, #customerchat .vertical-tab .nav-tabs li a:hover:after { opacity: 1; transform: perspective(300px) rotateX(0); } .customer-send.send-btn .customer-endchatbutton { background: #FFEDED; border: 1px solid #E83535; width: 28px; height: 28px; border-radius: 50%; } .customer-send.send-btn { display: flex; top: 20px; column-gap: 10px; opacity: 1; right: 20px; } .customer-send.send-btn:hover { opacity: 0.5;} #customerchat .internalchat-content .sms-textarea .form-control { padding: 10px 100px 10px 24px;} .endchatbox a { padding: 10px 0; display: inline-block; } .endchatbox .endchat-mobile h5 { font-size: 13px; color: #292929; margin: 0; } .endchatbox .endchat-mobile span { margin-bottom: 5px; display: flex; justify-content: center;} .buttons-nav-content .livechat { display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #EFEFEF; padding: 10px 0; text-align:center; } .buttons-nav-content .livechat h5 { font-size: 13px; line-height: 16px; font-family: Inter-SemiBold; color: #6E7282; margin: 5px 0 5px 0; } .buttons-nav-content .livechat .calltiming { font-size: 13px; font-family: 'Inter-SemiBold'; color:#2A3357; } .startchat-button { position: absolute; background:var(--button); height: 59px; left: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px; font-family: 'Inter-SemiBold'; } .startchat-button:hover { color: #fff; background: #519df5; } .internalchat-content .endchatbutton { position: absolute; right: 20px; top: 20px; } .internalchat-content .endchatbutton a { width: 28px; height: 28px; display: flex; background: #E83535; border-radius: 50%; justify-content: center; align-items: center; color: #fff; font-size: 14px; } .internalchat-content .endchatbutton a:hover { color: #E83535; background: #f8caca; } #ChatTab .chat_iframe { border: 0; height: calc(100vh - 105px) !important; } .internalchat-mute.customcheckbox { margin-left: auto; position: relative; right: 0; top: 0px; display: flex; align-items: center; } .internalchat-mute.customcheckbox label { color: #050F34 !important; } .internalchat-content .internal-chat-header { display: flex; align-items: center; } .internalchat-content .invite-user { display: flex; align-items: center; justify-content: flex-end; } .internalchat-content .invite-button { border: 1px solid #0F78F2; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #0F78F2; font-size: 14px; transition: 0.5s; height: 35px; width: 35px; } .internalchat-content .invite-button:hover { background: #0F78F2; color: #ffffff; } #chat_started_date { position: absolute; top: -30px; text-align: center; width: 100%; } #chat_started_date .datetime { font-family: 'Inter-SemiBold'; font-size: 12px; color: #6E7282; background-color:rgba(23, 185, 59, 0.1); padding: 5px; border-radius: 5px; width: 225px; margin: 0 auto; } #chat_started_date span#chat_date { color:#2A3357; } /* Group chat popup */ .internalchat-groupchat .close { position: relative; z-index: 99; } .internalchat-groupchat .close:hover { opacity: 1;} .internalchat-groupchat .modal-body { padding:35px; } .internalchat-groupchat #groupchat { top: 20%; } .internalchat-groupchat .modal-dialog { max-width: 350px; width: 100%; } .internalchat-groupchat .modal-content { border-radius: 0; border: 0; } .internalchat-groupchat .modal-header h4 { font-family: 'Inter-SemiBold'; font-size: 18px; color: #050F34; margin: 0; } .internalchat-groupchat .form-control { font-family: 'Inter-Medium'; font-size:14px; height: 40px; } .internalchat-groupchat .sendnewmsm { background-color: #0F78F2; border: 0; width: auto; height: 40px; border-radius: 5px; margin-top: 0px; color: #fff; padding: 0 15px; border: 1px solid #0F78F2; transition: all 0.5s ease-in-out; font-family: 'Inter-Medium'; font-size:14px; } .internalchat-groupchat .sendnewmsm:hover { background-color: #fff; color:#0F78F2; border-color: #0F78F2; } /* Group chat popup End*/ /*Customer Chat*/ .customerchat-content .receive { width:49%; } .customerchat-content .sendsms { width:49%; } /*SMS Module*/ .sms-bg { background:#fbfcfd; border-left:1px solid #E0E2E9; margin-top: 1px; } .listing-sticky { position: sticky; position: -webkit-sticky; top: 0px;} .sms-whatsapp-checkbox { display: flex; margin-bottom:20px; } .sms-whatsapp-checkbox .custom-checkbox { padding: 0; } .sms-whatsapp-checkbox .custom-checkbox .custom-control-label { padding: 2px 20px 0 20px; font-size:14px; color:var(--Primary); font-family: 'Inter-Regular'; line-height:22px; } .sms-whatsapp-checkbox .custom-control-label::after { left:0; } .sms-whatsapp-checkbox .custom-control-label::before { left:0; } .sms-module-content .form-control { border-color:#A0A8C8; } .sms-module-content .form-control::placeholder { color:#8C9096; } .sms-module-content textarea { height:227px; resize:none; color:var(--Primary); font-family: 'Inter-Regular'; } .device-content { background:url(../images/device.png) no-repeat top right; max-width:245px; width:100%; margin:0 auto; padding:35px 15px 0 15px; height:500px; } .device-content #messaging_emulator_sms{ position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; height:410px; } .device-content #messaging_emulator_sms::-webkit-scrollbar { width: 8px; height: 14px; } .device-content #messaging_emulator_sms::-webkit-scrollbar-track { background: transparent; } .device-content #messaging_emulator_sms::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .device-content #messaging_emulator_sms::-webkit-scrollbar-thumb:hover { background: #ffffff; } .device-content .customtab .nav-tabs .nav-link { padding:5px 0; font-size:10px; } .device-content .customtab .nav-tabs .nav-item { padding:0;} .device-content ul { list-style:none; margin-bottom:0; padding-left:10px; } .device-content ul li { display:flex; flex-direction: column; padding:8px; border-bottom: 1px solid #EFEFEF; } .device-content ul li:hover { cursor: pointer; background: #F4F9FE; } .device-content ul li .numberbox { display: flex; justify-content: space-between; } .device-content ul li .numberbox h3 { margin:0 0 5px 0; font-size:12px; color:var(--Primary); font-family: 'Inter-Regular'; } .device-content ul li .numberbox .time { font-size:10px; color:#8C9096; } .device-content ul li .discription p { font-size:10px; color:var(--Primary); margin:0; font-family: 'Inter-Regular'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 98%; } /* SMS device chat view */ .device-content .smsdeviceview { width: 100%; display: none; } .device-content .smsdeviceview.hidecontent { width: 100%; display: block; } .device-content .smsdeviceview .header { background-color: #F4F9FE; height: 30px; display: flex; align-items: center; padding: 0 10px; } .device-content .smsdeviceview h2 { color: #353535; font-size: 14px; font-family: 'Inter-Bold'; margin: 0; } .device-content .smsdeviceview .content { height:410px; overflow-y: auto; scrollbar-color: #8391C6 #f5f7fa; scroll-behavior: smooth; } .device-content .smsdeviceview .content::-webkit-scrollbar { width: 5px; height: 14px; } .device-content .smsdeviceview .content::-webkit-scrollbar-track { background: transparent; } .device-content .smsdeviceview .content::-webkit-scrollbar-thumb { background: #8391C6; border-radius: 14px; } .device-content .smsdeviceview .content::-webkit-scrollbar-thumb:hover { background: #8391C6; } .device-content .smsdeviceview .content .send-message { display: flex; width: 90%; flex-direction: column; } .device-content .smsdeviceview .content .send-message .box { display: flex; flex-direction: column; width: auto; background: #DCECFE; padding: 10px; box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .device-content .smsdeviceview .content .send-message .box p { margin: 5px 0; font-size: 12px; font-family: 'Inter-Medium'; color: #2A3357; word-break: break-all; } .device-content .smsdeviceview .content .send-message .time { text-align: right; font-size: 12px; color: #8C9096; margin:5px 5px 0 0; } .device-content .smsdeviceview .content .received-message { display: flex; width: 90%; flex-direction: column; } .device-content .smsdeviceview .content .received-message .box { display: flex; flex-direction: column; width: auto; background: #fff; padding: 10px; box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .device-content .smsdeviceview .content .received-message .box p { margin: 5px 0 5px 0; font-size: 12px; font-family: 'Inter-Medium'; color: #2A3357; word-break: break-all; } .device-content .smsdeviceview .content .received-message .time { text-align: left; font-size: 12px; color: #8C9096; margin:5px 0px 0 5px; } .device-content .message-content-box.hidecontent, .device-content .message-content-tab.hidecontent { display: none; } /* SMS device chat view End */ .mobileviewbutton a { display:flex; font-size:14px; align-items: center; } .mobileviewbutton span { margin-right:9px; } .mobileviewbutton p { margin: 0; font-family: 'Inter-Bold'; color:var(--Primary); } .mobileviewbutton { margin-bottom: 10px; display:none; } .mobileview-hdr {display: flex; justify-content: space-between; align-items: center; margin-bottom:25px; display:none; } .mobileview-hdr h2 { font-size:16px; font-family: 'Inter-Bold'; color:var(--Primary); margin:0; } .mobileview-hdr a { cursor:pointer; } /*SMS Module End*/ /*Email Module Inbound*/ /* #emailinbound { position: relative; height:82vh; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } #emailinbound::-webkit-scrollbar { width: 8px; height: 14px; } #emailinbound::-webkit-scrollbar-track { background: transparent; } #emailinbound::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } #emailinbound::-webkit-scrollbar-thumb:hover { background: #ffffff; } */ .email-module-content .form-control { border-color:#A0A8C8; } .email-module-content .form-control::placeholder { color:#8C9096; } .stickylinsting h2 { margin:12px 0; font-size:13px; color:#6E7282; } .stickylinsting ul { list-style: none; overflow-y: auto; height: calc(100vh - 122px); scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth;} .stickylinsting ul::-webkit-scrollbar { width: 5px; height: 14px; } .stickylinsting ul::-webkit-scrollbar-track { background: transparent; } .stickylinsting ul::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .stickylinsting ul li a { font-size: 13px; line-height: 16px; color: var(--Primary); font-family: 'Inter-Regular'; padding: 10px; border-left: 2px solid transparent; display: block; } .stickylinsting ul li a:hover { color: #40465E; font-family: 'Inter-SemiBold'; background: #FFFBF2; border-left: 2px solid #FFAA05; } .stickylinsting ul li.active a { color: #40465E; font-family: 'Inter-SemiBold'; background: #FFFBF2; border-left: 2px solid #FFAA05; } .email-module-content .editor { border:1px solid #A0A8C8; border-radius:5px; } .email-module-content .editor img { border-radius:5px; width:100%; } .emaillink { font-size:13px; color:var(--Primary); font-family: 'Inter-Regular'; position: absolute; right: 5px; bottom: 6.5px; padding:5px; } .emaillink:hover { color:var(--button); background:#F4F9FE; border-radius:5px; padding:5px; } /* Email Outbound*/ /* #inbound_email { position: relative; height:83vh; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; } */ #inbound_email { position: relative; height: calc(100vh - 50px); overflow-y: auto; scrollbar-color: #ffffff #ffffff; scrollbar-width: thin; } #inbound_email::-webkit-scrollbar { width: 8px; height: 14px; } #inbound_email::-webkit-scrollbar-track { background: transparent; } #inbound_email::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } #inbound_email::-webkit-scrollbar-thumb:hover { background: #ffffff; } #inbound_email #vcEmailIFrame { height:calc(100vh - 55px); scrollbar-color:#F4F9FE #ffffff; scrollbar-width: thin; padding:15px; } #inbound_email #vcEmailIFrame::-webkit-scrollbar { width: 8px; height: 14px; } #inbound_email #vcEmailIFrame::-webkit-scrollbar-track { background: #F4F9FE; } #inbound_email #vcEmailIFrame::-webkit-scrollbar-thumb { background: #F4F9FE; border-radius: 14px; } #inbound_email #vcEmailIFrame::-webkit-scrollbar-thumb:hover { background: #ffffff; } #inbound_email #vcEmailIFrame body { background:#fff !important; } .outbound-data ul { list-style:none; margin:0; } .outbound-data ul li { display:flex; margin:15px 0; } .outbound-data .title { width:110px; } .outbound-data .title label { font-size:14px; margin:0; } .outbound-data .des-text { width: calc(100% - 100px); } .outbound-data .des-text textarea { resize:none; } .outbound-data .des-text p { font-size:16px; color:var(--Primary); font-family: 'Inter-Regular'; padding: 0 10px 0 0; word-break: break-all; } .outbound-data .coppytoreply { width: calc(100% - 100px); } .outbound-data .coppytoreply a { border:1px solid var(--button); background:#ffffff; border-radius: 5px; padding: 9px; color:var(--button); font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; } .outbound-data .coppytoreply a:hover { background:var(--button); color:#ffffff; } .outbound-data-replay ul { list-style:none; margin:0; } .outbound-data-replay ul li { display:flex; margin:15px 0; } .outbound-data-replay .title { width:110px; } .outbound-data-replay .title.outbound-attach { display: flex; align-items: center; justify-content: end; } .outbound-data-replay .title label { font-size:14px; margin:0; } .outbound-data-replay .des-text { width: calc(100% - 110px); } .outbound-data-replay .des-text textarea { resize:none; height: 110px; max-width: 670px; width: 100%; } .outbound-data-replay .des-text p { font-size:16px; color:var(--Primary); font-family: 'Inter-Regular'; } .attachedfile { display: flex; align-items: center; } .attachedfile .addmore { display:flex; z-index: 99; position: relative; } .attachedfile .addmore a { border:1px solid var(--button); background:#ffffff; border-radius: 5px; padding: 9px; color:var(--button); font-family: 'Inter-SemiBold'; font-size: 14px; transition:0.5s; } .attachedfile .addmore a:hover { background:var(--button); color:#ffffff; } /* .attachedfile .btn-tertiary { color: #555; padding: 0 10px; line-height: 40px; width:100%; display: block; background:#FFF8F1; text-align:left; margin-bottom:0; } */ .attachedfile .btn-tertiary { color: #555; padding: 0 10px; line-height: 40px; width: auto; display: block; background: #FFF8F1; text-align: left; margin-bottom: 0; z-index: 99; position: absolute; font-size: 14px; } .attachedfile .btn-tertiary { color: var(--headertext); padding: 2px 8px; line-height: 20px; width: auto; display: block; background: #FFF8F1; text-align: left; margin-bottom: 0; z-index: 99; position: absolute; font-size: 14px; top: 10px; font-family: 'Inter-Regular'; left: 14px; } .attachedfile .attachedfile-field { background: #FFF8F1; height: 44px; /* max-width: 310px; */ width: 100% !important; position: relative; } #email_display_form .outbound-data { border-bottom: 1px solid #EAEAEA; padding: 0 15px; } /* input file style */ /* .attachedfile .input-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } */ .attachedfile .input-file { opacity: 1; position: absolute; z-index: 1; height: 45px; padding: 12px 10px 10px 15px; font-size: 14px; overflow: hidden; width: 100%; font-family: 'Inter-Regular'; } .attachedfile .input-file + .attachedfile .js-labelFile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; cursor: pointer; } .outbound-data-replay .replyemailbtn { width: calc(100% - 125px); margin-left: 125px !important; } .outbound-data-replay .replyemailbtn .buttons_row { max-width: 670px; width: 100%; } #emailoutbound .note-toolbar { background:#F3F9FD; border-radius: 5px 5px 0 0; border: 0; } #emailoutbound .note-btn-group .note-btn { border-color: #D1E6FF; font-size: 13px; background: #ffffff; } #emailoutbound .note-editor.note-airframe, #emailoutbound .note-editor.note-frame { border: 0; } #emailoutbound .note-editor.note-airframe .note-statusbar, #emailoutbound .note-editor.note-frame .note-statusbar { background-color:#F3F9FD; border-top: 1px solid #F3F9FD; } #emailoutbound .note-editor.note-airframe .note-editing-area .note-editable[contenteditable="false"], #emailoutbound .note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] { background-color: #FFFBF2; border-radius:5px 5px 0 0; } /*Call Transfer*/ .transfercall .modal-dialog { max-width: 600px; width: 100%; background: #FFFFFF; border-radius: 8px; margin-left:auto; margin-right:auto; } .transfercall .buttons_row { column-gap: 10px; } .transfercall .modal-header { border: 0;} .transfercall .modal-header .modal-title { font-family: 'Inter-Bold'; font-size: 20px; color: var(--Primary); } .transfercall .customtab .nav-tabs { background:transparent; border-bottom:2px solid #EFEFEF; } .transfercall .customtab .nav-tabs .nav-item:first-child { margin-left:0; } .transfercall .customtab .nav-tabs .nav-link { color: #6E7282; font-family: 'Inter-SemiBold'; font-weight: normal; } .transfercall .customtab .nav-tabs .nav-link.active { color: #40465E; } .transfercall-checkbox { display: flex; margin-bottom:20px; } .transfercall-checkbox .custom-checkbox { padding: 0; } .transfercall-checkbox .custom-checkbox .custom-control-label { padding: 2px 20px 0 20px; font-size:14px; color:#6E7282; font-family: 'Inter-Regular'; line-height: 22px; } .transfercall-checkbox .custom-control-label::after { left:0; } .transfercall-checkbox .custom-control-label::before { left:0; } .transfercall-checkbox .form-check-label { cursor:pointer; padding: 2px 20px 0 0px; font-size:14px; color:#6E7282; font-family: 'Inter-Regular'; } /*facebook dashboard*/ .dialer-official-module { padding:0 70px; } .dialer-official-module .official-banner { display:flex; border-radius: 8px 8px 0px 0px; max-height: 180px; } .dialer-official-module .official-banner img { border-radius: 8px 8px 0px 0px; width:100%; } .dialer-official-module .official-header { display:flex; justify-content: space-between; padding:0 20px 0 20px; background: #F8FCFF; } .official-header .user-info { display: flex; } .official-header .user-info .user-img { height:93px; width:93px; background:#E2F4FF; border-radius:50%; display: flex; justify-content: center; align-items: center; position:relative; top:-23px; } .official-header .user-info .user-img img { border-radius: 50%; } .official-header .user-info .user-name { margin:15px 0 0 22px; } .official-header .user-info .user-name h1 { color:var(--Primary); font-size:20px; font-family: 'Inter-Bold'; margin-bottom:8px; } .official-header .user-info .user-name p { margin:0 10px 0 0; font-size:14px; color:#6E7282; font-family: 'Inter-Medium'; } .official-header .buttons-box { margin-top:16px; } .official-header .buttons-box a { margin:0 5px; padding:9px; display: inline-block; } .official-header .buttons-box a.create-post-btn { margin-right:0; background:var(--button); border-radius: 5px; color:#ffffff; font-family: 'Inter-Medium'; font-size:14px; } .official-header .buttons-box a.create-post-btn span { margin-right:10px; } .official-header .buttons-box a.create-post-btn:hover { background:#E2F4FF; color:var(--button); } .official-header .buttons-box a:hover { background:#e3f0ff; } /* .official-content-list { padding:25px 135px 0 135px; background:#ffffff; } */ .official-content-list { padding:25px 135px 0 135px; background:#ffffff; position: relative; height: calc(100vh - 290px); overflow-y:auto; scrollbar-color:#D4DDF2 #f5f7fa; } .official-content-list::-webkit-scrollbar { width: 8px; height: 14px; } .official-content-list::-webkit-scrollbar-track { background: transparent; } .official-content-list::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .official-content-list::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } .official-content-list ul { margin:0; list-style:none; } .official-content-list .post-info { display: flex; } /* .official-content-list .post-info .user-img { height:48px; width:48px; background:#E2F4FF; border-radius:50%; display: flex; justify-content: center; align-items: center; position:relative; } */ .official-content-list .post-info .user-img { height:48px; width:48px; border:1px solid #fff; border-radius:50%; display: flex; justify-content: center; align-items: center; position:relative; } .official-content-list .post-info .user-img img { width:46px; border-radius: 50%; } .official-content-list .post-info .user-name { margin:5px 0 0 20px; } .official-content-list .post-info .user-name h2 { color:var(--Primary); font-size:16px; font-family: 'Inter-Bold'; margin-bottom:4px; } .official-content-list .post-info .user-name .time { font-size:12px; color:#6E7282; font-family: 'Inter-Regular'; } .official-content-list ul li p { margin:16px 0; font-size:16px; color:#2A3357; font-family: 'Inter-Medium'; } .official-content-list ul li { border-bottom:1px solid #E0E2E9; margin-bottom:20px; } .official-content-list .comments { display:flex; padding-bottom:15px; } .official-content-list .comments a { display:flex; font-size:12px; color:#9DA4B5; justify-content: center; align-items: center; margin-right:25px; font-family: 'Inter-Regular'; } .official-content-list .comments a span { margin-right:8px; } .official-content-list .comments .notification { color:#002863; font-family: 'Inter-Medium'; margin-left:5px; } .official-content-list .comments a.commentbox { cursor: pointer; } .official-content-list .comments a.commentbox :hover { color:#002863; } .official-content-list .comments a:hover { color:#9DA4B5; } #fb_module_one #fb-messanger { display:none; } #fb_module_one.show-messanger .official-dashboard { display:none; transition:0.5s; } #fb_module_one.show-messanger #fb-messanger { display:block; transition:0.5s; background: #ffffff; } #FacebookWebIFrame { height: calc(100vh - 70px); } /*Facebook Messanger*/ #fb-messanger .sms-area { background:#FBFCFD; } .dialer-official-module { display:flex; } .messanger-header { background: #F8FCFF; border-radius: 5px 5px 0 0; padding:5px 20px; display: flex; align-items: center; } .messanger-header .messanger-popup { border-radius:50%; padding:5px; width:30px; height:30px; display: flex; align-items: center; justify-content: center; } .messanger-header .messanger-popup:hover {background:#E2F4FF; cursor:pointer; } .messanger-header .user-img { margin-left:5px; height:35px; width:35px; background:transparent; border-radius:50%; display: flex; justify-content: center; align-items: center; position:relative; } .messanger-header .user-img img { width:35px; border-radius: 50%; } .messanger-header .user-name { margin: 0px 0 0 10px; display: flex; align-items: center; } .messanger-header .user-name h1 { color:var(--Primary); font-size:20px; font-family: 'Inter-Bold'; margin-bottom:0px; } .messanger-header .user-name p { margin:0 0 0 5px; font-size:14px; color:#6E7282; font-family: 'Inter-Medium'; } .fb-chat-user { background:#ffffff; max-width: 325px; width: 100%; height:calc(100vh - 100px); border-right:1px solid #f0f1f1; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; padding:0px;} .fb-chat-user::-webkit-scrollbar { width: 8px; height: 14px; } .fb-chat-user::-webkit-scrollbar-track { background: transparent; } .fb-chat-user::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .fb-chat-user::-webkit-scrollbar-thumb:hover { background: #ffffff; } .fb-chat-user .search { position: sticky; height: 55px; top: 0; background: #ffffff; padding: 15px 10px 0px 10px; z-index: 9; } .fb-chat-user .search .form-control { padding-left:30px; } .fb-chat-user .search .form-control::placeholder{ color:#8C9096; } .fb-chat-user .search span { position:absolute; bottom: 14px; left: 18px; } .fb-chat-user ul { list-style:none; margin:10px 0 0 0; } .fb-chat-user ul li { margin:0;} .fb-chat-user ul li a { display:flex; align-items: center; padding:15px 10px; } .fb-chat-user ul li a:hover { background:#F4F9FE; } .fb-chat-user ul li a span.u-img { margin-right:10px; position:relative; } .fb-chat-user ul li a span.online { content:''; position:absolute; right:0; height:8px; width:8px; background:#17B93B; bottom:4px; border-radius:50%; } .fb-chat-user ul li a .content { display:flex; flex-direction: column; -ms-flex: 1; flex: 1; } .fb-chat-user ul li a .content h2 { font-size:16px; color:var(--Primary); margin:0 0 5px 0; font-family:'Inter-Regular'; width: 180px; text-overflow: ellipsis !important; overflow: hidden; white-space: nowrap; display: block; } .fb-chat-user ul li a .content p.message { color:var(--Primary); margin-bottom:0; font-size:12px; font-family:'Inter-Regular'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 180px; } .fb-chat-user ul li a .content .date { font-size:12px; color:#8C9096; font-family:'Inter-Regular'; } .fb-chat-user ul li a .content .sms-count { background:#42538E; border-radius:50%; width:18px; height:18px; color:#42538E; color:#ffffff; font-size: 12px; font-family:'Inter-SemiBold'; display: flex; justify-content: center; align-items: center; } .fb-chat-user ul li a .content .column { display:flex; justify-content: space-between; } .messanger-content .messages-area { background: #ffffff; width: calc(100% - 325px); flex: inherit; } .messanger-content .messages-area .header { border-bottom:1px solid #f0f1f1; padding:10px 24px; display: flex; align-items: center; } .messanger-content .messages-area .header h2 { font-size:16px; font-family:'Inter-Bold'; color:#353535; margin:0 0 0 10px; } .messanger-content .messages-area .date_box { border-bottom:1px solid #9DA4B5; position:relative; justify-content: center; display: flex; margin:0 5px 0 15px; } .messanger-content .messages-area .date_box span { color:#4D4D4D; font-family:'Inter-SemiBold'; font-size:14px; background:#fbfcfd; padding:0 20px; position:absolute; top:-11px; } .messanger-content .sms-area .sendsms { display:flex; padding: 15px 5px 15px 0px; flex-direction: column; width:70%; } .messanger-content .sms-area .sendsms .content { background:#DCECFE; padding:10px; box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .messanger-content .sms-area .sendsms .content p { margin:0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; } .messanger-content .sms-area .sendsms .time { text-align: right; font-size:12px; color:#8C9096; margin-top:5px; } .messanger-content .sms-area .receive { display:flex; padding: 15px 0px 15px 15px; flex-direction: column; width:70%; } .messanger-content .sms-area .receive .content { background:#ffffff; padding:10px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .messanger-content .sms-area .receive .content p { margin:0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; } .messanger-content .sms-area .receive .time { text-align: left; font-size:12px; color:#8C9096; margin-top:5px; } .messanger-content .sms-area { width: 100%; height:calc(100vh - 217px); position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; padding:0px 0 20px 0; background: #FBFCFD;} .messanger-content .sms-area::-webkit-scrollbar { width: 8px; height: 14px; } .messanger-content .sms-area::-webkit-scrollbar-track { background: transparent; } .messanger-content .sms-area::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .messanger-content .sms-area::-webkit-scrollbar-thumb:hover { background: #ffffff; } .messanger-content .sms-textarea .form-control { height: 59px; padding: 10px 44px 10px 24px; resize: none; border-top:1px solid #EFEFEF !important; border-radius:0; border:0; font-size:15px; color:var(--Primary); } .messanger-content .sms-textarea { position: sticky; height: 59px; bottom: 0; } .messanger-content .sms-textarea .form-control::placeholder { color:#8C9096; padding:18px 44px 18px 24px } .messanger-content .send-btn { position: absolute; right: 20px; top: 16px; } .messanger-content .send-btn img { width:14px;} .messanger-content .sms-textarea .send-btn a { width:28px; height:28px; display:flex; background:var(--button); border-radius: 50%; justify-content: center; align-items: center; } .messanger-content .sms-textarea .send-btn a:hover { background:#FFAA05; } #fb_module_one .fade:not(.show) { opacity:1; } #fb_module_one .vertical-tab { display:flex; } #fb_module_one .vertical-tab .nav-tabs { background: transparent; border: 0; } #fb_module_one .vertical-tab .nav-tabs li{ float: none; width: 100%; } #fb_module_one .vertical-tab .nav-tabs li a { background: #ffffff; border-radius: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.3s ease 0s; } #fb_module_one .vertical-tab .nav-tabs li a:hover, #fb_module_one .vertical-tab .nav-tabs li a.active, #fb_module_one .vertical-tab .nav-tabs li a.active:hover { background: transparent; border: none; } #fb_module_one .vertical-tab .nav-tabs li a:before, #fb_module_one .vertical-tab .nav-tabs li a:after { content: ""; background-color: #F4F9FE; width: 50.5%; height: 100%; opacity: 0; transform: perspective(300px) rotateX(-100deg); position: absolute; top: 0;left: 0; z-index: -1;transition: all 0.4s ease 0s; } #fb_module_one .vertical-tab .nav-tabs li a:after{ transform: perspective(300px) rotateX(100deg); left: auto; right: 0; transition: all 0.4s ease 0.1s; } #fb_module_one .vertical-tab .nav-tabs li.active a:before, #fb_module_one .vertical-tab .nav-tabs li a:hover:before, #fb_module_one .vertical-tab .nav-tabs li.active a:after, #fb_module_one .vertical-tab .nav-tabs li a:hover:after { opacity: 1; transform: perspective(300px) rotateX(0); } .facebook-create-post-popup .modal-header { border:0; align-items: center; } .facebook-create-post-popup .modal-header h4 { font-size:20px; color:var(--Primary); font-family:'Inter-Bold'; line-height: normal; margin-right:20px; } .everyone-can-see { display: flex; margin: 2px 0 0 0; align-items: center; } .everyone-can-see .world-img { line-height:normal; } .everyone-can-see a { font-size:14px; color:#2A3357; font-family:'Inter-Medium'; margin-left:5px; } .everyone-can-see span { margin-left:5px; } .facebook-create-post-popup .textarea-form { display: flex; margin-top:18px; } .facebook-create-post-popup .textarea-form .user-img { height: 35px; width: 35px; background: #E2F4FF; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; } .facebook-create-post-popup .textarea-form .user-img img { width:25px;} .facebook-create-post-popup .textarea-form .textarea { width: calc(100% - 15px); margin-left:15px; } .facebook-create-post-popup .textarea-form .form-control { resize:none; height:66px; font-size:15px; } .facebook-create-post-popup .textarea-form .form-control::placeholder { color:#8C9096; } .facebook-create-post-popup .footer { display:flex; justify-content: space-between; } .facebook-create-post-popup .footer .links { justify-content: center; display: flex; align-items: center; } /*Twitter*/ .official-content-list .post-info .user-name .tweetuser { position:relative; padding:0 8px 0 0; margin-right:8px; } .official-content-list .post-info .user-name .tweetuser::after { content:''; position:absolute; top:6px; right:0; width:4px; height:4px; background:#6E7282; border-radius:50%; } .follow { display: flex; } .follow span { font-size:14px; color:#002863; font-family:'Inter-SemiBold'; margin-right:5px; } .official-content-list .tweetcomments { display:flex; padding:15px 0; } .official-content-list .tweetcomments a { display:flex; justify-content: center; align-items: center; margin-right:25px; font-family: 'Inter-Regular'; } .official-content-list .tweetcomments a span { margin-right: 0; display: flex; padding: 5px; border-radius: 50%; width: 27px; height: 27px; align-items: center; justify-content: center; } .official-content-list .tweetcomments .notification { color:#9DA4B5; margin-left:5px; } .official-content-list .tweetcomments a:hover .notification { color:#002863; } .official-content-list .tweetcomments a:hover span { background:#E2F4FF; } #TwitterWebIFrame { height: calc(100vh - 70px); } /*Twitter Messanger*/ #tweet_module_one.show-messanger .official-dashboard { display:none; transition:0.5s; } #tweet_module_one .twitter-messanger-content { display: none; } #tweet_module_one.show-messanger .twitter-messanger-content { display: block; } #twitter-messanger .sms-area { background:#FBFCFD; } #twitter-messanger .dialer-official-module { display:flex; } .twitter-messanger-header { background: #F8FCFF; border-radius: 5px 5px 0 0; padding:5px 20px; display: flex; align-items: center; } .twitter-messanger-header .messanger-popup { border-radius:50%; padding:5px; width:30px; height:30px; display: flex; align-items: center; justify-content: center; } .twitter-messanger-header .messanger-popup:hover {background:#E2F4FF; cursor:pointer; } .twitter-messanger-header .user-img { margin-left:5px; height:35px; width:35px; background:#E2F4FF; border-radius:50%; display: flex; justify-content: center; align-items: center; position:relative; } .twitter-messanger-header .user-img img { width:30px; } .twitter-messanger-header .user-name { margin: 0px 0 0 10px; display: flex; align-items: center; } .twitter-messanger-header .user-name h1 { color:#050F34; font-size:20px; font-family: 'Inter-Bold'; margin-bottom:0px; } .twitter-messanger-header .user-name p { margin:0 0 0 5px; font-size:14px; color:#6E7282; font-family: 'Inter-Medium'; } .twitter-chat-user { background:#fff; max-width: 325px; width: 100%; height:calc(100vh - 100px); border-right:1px solid #f0f1f1; position: relative; overflow-y:auto; scrollbar-color:#D4DDF2 #f5f7fa; scrollbar-width: thin; padding:0px; overflow-x: hidden;} .twitter-chat-user::-webkit-scrollbar { width: 8px; height: 14px; } .twitter-chat-user::-webkit-scrollbar-track { background: transparent; } .twitter-chat-user::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .twitter-chat-user::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } .twitter-chat-user .search { position: sticky; height: 55px; top: 0; background: #fff; padding: 15px; z-index: 9; } .twitter-chat-user .search .form-control { padding-left:30px; } .twitter-chat-user .search .form-control::placeholder{ color:#8C9096; } .twitter-chat-user .search span { position: absolute; bottom: 13px; left: 25px; } .twitter-chat-user ul { list-style:none; margin:10px 0 0 0; border: 0 !important; display: flex; flex-direction: column; flex-wrap: inherit; } .twitter-chat-user ul li { margin:0;} .twitter-chat-user ul li a { display:flex; align-items: center; padding:15px 10px; } .twitter-chat-user ul li a:hover { background:#F4F9FE; } .twitter-chat-user ul li a span.u-img { margin-right:10px; position:relative; } .twitter-chat-user ul li a span.online { content:''; position:absolute; right:0; height:8px; width:8px; background:#17B93B; bottom:4px; border-radius:50%; } .twitter-chat-user ul li a .content { display:flex; flex-direction: column; -ms-flex: 1; flex: 1; } .twitter-chat-user ul li a .content h2 { font-size:16px; color:#050F34; margin:0 0 5px 0; font-family:'Inter-Regular'; width: 180px; text-overflow: ellipsis !important; overflow: hidden; white-space: nowrap; display: block; } .twitter-chat-user ul li a .content p.message { color:#050F34; margin-bottom:0; font-size:12px; font-family:'Inter-Regular'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 180px; display: block; } .twitter-chat-user ul li a .content .date { font-size:12px; color:#8C9096; font-family:'Inter-Regular'; } .twitter-chat-user ul li a .content .sms-count { background:#42538E; border-radius:50%; width:18px; height:18px; color:#42538E; color:#fff; font-size: 12px; font-family:'Inter-SemiBold'; display: flex; justify-content: center; align-items: center; } .twitter-chat-user ul li a .content .column { display:flex; justify-content: space-between; } .twitter-chat-user ul li a::before, .twitter-chat-user ul li a::after { content: ""; background-color: #F4F9FE; width: 50.5%; height: 100%; opacity: 0; transform: perspective(300px) rotateX(-100deg); position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.4s ease 0s; } .twitter-messanger-content .messages-area { background: #fff; width: calc(100% - 325px); } .twitter-messanger-content .messages-area .header { border-bottom:1px solid #f0f1f1; padding:10px 24px; display: flex; align-items: center; } .twitter-messanger-content .messages-area .header h2 { font-size:16px; font-family:'Inter-Bold'; color:#353535; margin:0 0 0 10px; } .twitter-messanger-content .messages-area .date_box { border-bottom:1px solid #9DA4B5; position:relative; justify-content: center; display: flex; margin:0 5px 0 15px; } .twitter-messanger-content .messages-area .date_box span { color:#4D4D4D; font-family:'Inter-SemiBold'; font-size:14px; background:#fbfcfd; padding:0 20px; position:absolute; top:-11px; } .twitter-messanger-content .sms-area .sendsms { display:flex; padding: 15px 5px 15px 0px; flex-direction: column; width:70%; } .twitter-messanger-content .sms-area .sendsms .content { background:#DCECFE; padding:10px; box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .twitter-messanger-content .sms-area .sendsms .content p { margin:0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; } .twitter-messanger-content .sms-area .sendsms .time { text-align: right; font-size:12px; color:#8C9096; margin-top:5px; } .twitter-messanger-content .sms-area .receive { display:flex; padding: 15px 0px 15px 15px; flex-direction: column; width:70%; } .twitter-messanger-content .sms-area .receive .content { background:#fff; padding:10px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; } .twitter-messanger-content .sms-area .receive .content p { margin:0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; } .twitter-messanger-content .sms-area .receive .time { text-align: left; font-size:12px; color:#8C9096; margin-top:5px; } .twitter-messanger-content .sms-area { width: 100%; height:calc(100vh - 218px); position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; padding:0px 0 20px 0; background: #FBFCFD;} .twitter-messanger-content .sms-area::-webkit-scrollbar { width: 8px; height: 14px; } .twitter-messanger-content .sms-area::-webkit-scrollbar-track { background: transparent; } .twitter-messanger-content .sms-area::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .twitter-messanger-content .sms-area::-webkit-scrollbar-thumb:hover { background: #ffffff; } .twitter-messanger-content .sms-textarea .form-control { height: 60px; padding: 10px 44px 10px 24px; resize: none; border-top:1px solid #EFEFEF !important; border-radius:0; border:0; font-size:15px; color:#050F34; } .twitter-messanger-content .sms-textarea { position: sticky; height: 60px; bottom: 0; } .twitter-messanger-content .sms-textarea .form-control::placeholder { color:#8C9096; padding:18px 44px 18px 24px } .twitter-messanger-content .send-btn { position: absolute; right: 20px; top: 16px; } .twitter-messanger-content .send-btn img { width:14px;} .twitter-messanger-content .sms-textarea .send-btn a { width:28px; height:28px; display:flex; background:#0F78F2; border-radius: 50%; justify-content: center; align-items: center; } .twitter-messanger-content .sms-textarea .send-btn a:hover { background:#FFAA05; } /*Twitter create Post*/ .tweet-create-post-popup .modal-header { border:0; align-items: center; } .tweet-create-post-popup .modal-header h4 { font-size:20px; color:var(--Primary); font-family:'Inter-Bold'; line-height: normal; margin-right:20px; } .everyone-can-see { display: flex; margin: 0; align-items: center; } .everyone-can-see .world-img { line-height:normal; } .everyone-can-see a { font-size:14px; color:#2A3357; font-family:'Inter-Medium'; margin-left:5px; } .everyone-can-see span { margin-left:5px; } .tweet-create-post-popup .textarea-form { display: flex; margin-top:18px; } .tweet-create-post-popup .textarea-form .user-img { height: 35px; width: 35px; background: #E2F4FF; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; } .tweet-create-post-popup .textarea-form .user-img img { width:25px;} .tweet-create-post-popup .textarea-form .textarea { width: calc(100% - 15px); margin-left:15px; } .tweet-create-post-popup .textarea-form .form-control { resize:none; height:66px; font-size:15px; } .tweet-create-post-popup .textarea-form .form-control::placeholder { color:#8C9096; } .tweet-create-post-popup .footer { display:flex; justify-content: space-between; } .tweet-create-post-popup .footer .links { justify-content: center; display: flex; align-items: center; } /*WhatsApp*/ .whatsapp-content { display:flex; } .wlc-whts { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size:34px; color:#2A3357; font-family:'Inter-Medium'; margin:0; } .wlc-whts p { font-size:26px; color:#2A3357; font-family:'Inter-Medium'; } .whatsapp-chat-user { border-right:1px solid #dfe2ec; max-width: 325px; width: 100%; } .whatsapp-chat-user ul.nav { list-style:none; margin:0; height: calc(100vh - 55px); border-right:1px solid #f0f1f1; position: relative; overflow-y:auto; scrollbar-color:#00A884 #ffffff; padding:0px; display: flex; flex-direction: column; flex-wrap: nowrap; overflow-x: hidden; } .whatsapp-chat-user ul.nav::-webkit-scrollbar { width: 8px; height: 14px; } .whatsapp-chat-user ul.nav::-webkit-scrollbar-track { background: transparent; } .whatsapp-chat-user ul.nav::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .whatsapp-chat-user ul.nav::-webkit-scrollbar-thumb:hover { background: #00A884; } .whatsapp-chat-user .whts-header { background: #00A884; display: flex; justify-content: space-between; padding: 0px 10px; height: 55px; align-items: center; position: relative; } .whatsapp-chat-user .whts-header h3 { margin:0; color:#fff; font-size:16px; font-family:'Inter-Bold'; } .whatsapp-chat-user .whts-header .icons { display: flex; align-items: center; } .whatsapp-chat-user .whts-header #searchBar { background-color: #fff; border: none; color: #2A3357; font-size: 14px; padding: 10px 15px; -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; position: absolute; left: 5px; right: 30px; width: calc(100% - 10px); } .whatsapp-chat-user .whts-header .toggle-search { float: right; } .whatsapp-chat-user .whts-header .closeicon { position: absolute; right: 20px; } .forword-sms-content { top: 20px !important; background: #0B1234; min-width: 130px; border-radius: 3px; padding: 8px 10px; z-index: 9; } .forword-sms-content ul { margin: 0; list-style: none; } .forword-sms-content ul li { line-height: 24px; } .forword-sms-content ul li a { color: #ffffff; font-size: 14px; display: flex; align-items: center; } .forword-sms-content ul li a:hover { color: #AAB2FC;} /* Add New Message popup */ .whatsapp-new-message .close { position: absolute; z-index: 99; margin: 0; top: 3px; right: 5px; padding: 0; opacity: 0.5; } .whatsapp-new-message .close:hover { opacity: 1;} .whatsapp-new-message .modal-body { padding:35px 35px 25px 35px; } .whatsapp-new-message #addnewmessage { top: 20%; } .whatsapp-new-message .modal-dialog { max-width: 350px; width: 100%; } .whatsapp-new-message .modal-content { border-radius: 0; border: 0; } .whatsapp-new-message .modal-header { padding: 0; border: 0; } .whatsapp-new-message .form-control { font-family: 'Inter-Medium'; font-size:14px; height: 40px; } .whatsapp-new-message .sendnewmsm { background-color: #00A884; border: 0; width: auto; height: 40px; border-radius: 5px; margin-top: 15px; color: #fff; padding: 0 15px; border: 1px solid #00A884; transition: all 0.5s ease-in-out; font-family: 'Inter-Medium'; font-size:14px; } .whatsapp-new-message .sendnewmsm:hover { background-color: #fff; color:#00A884; border-color: #00A884; } /* .whatsapp-new-message .countrycode { border: 0; position: absolute; height: 40px; background-color: rgba(0, 0, 0, 0.05); padding: 0 10px; cursor: pointer; border-radius: 5px 0 0 5px; width: 100px; font-size: 14px; } */ .whatsapp-new-message .countrycode { position: relative; height: 40px; background-color: rgba(0, 0, 0, 0.05); padding: 0 10px; cursor: pointer; font-size: 14px; margin-bottom: 15px; width: 100%; border: 1px solid #8391C6; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 5px; color: var(--Primary); font-family: 'Inter-Medium'; } #sendnewmessagecontact_error .alert p { margin: 0; color: #721c24; } /* Add New Message popup End*/ /* contact popup */ .select-contact-popup .close { margin: 0; padding: 0; opacity: 0.5; } .select-contact-popup .modal-body { padding:15px; height: 475px; overflow-y: auto; scrollbar-color: #00A884 #f5f7fa; scroll-behavior: smooth; } .select-contact-popup .modal-body::-webkit-scrollbar { width: 5px; height: 14px; } .select-contact-popup .modal-body::-webkit-scrollbar-track { background: transparent; } .select-contact-popup .modal-body::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .select-contact-popup .modal-body::-webkit-scrollbar-thumb:hover { background: #00A884; } .select-contact-popup #selectcontact { } .select-contact-popup .modal-dialog { max-width: 500px; width: 100%; } .select-contact-popup .modal-content { border-radius: 0; border: 0; } .select-contact-popup .modal-header { border-color: #EFEFEF; padding: 10px 15px; align-items: center; } .select-contact-popup .modal-header h4 { font-family: 'Inter-SemiBold'; font-size: 20px; line-height: 24px; color: #050F34; margin: 0; } .select-contact-popup .send { background-color: #00A884; border: 0; width: auto; height: 40px; border-radius: 5px; margin-top: 0; color: #fff; padding: 0 15px; border: 1px solid #00A884; transition: all 0.5s ease-in-out; font-family: 'Inter-Medium'; font-size:14px; } .select-contact-popup .send:hover { background-color: #fff; color:#00A884; border-color: #00A884; } .select-contact-popup ul { margin: 0; padding: 0; list-style: none; overflow-y: auto; height: 195px; scrollbar-color: #00A884 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; } .select-contact-popup ul::-webkit-scrollbar { width: 5px; height: 14px; } .select-contact-popup ul::-webkit-scrollbar-track { background: transparent; } .select-contact-popup ul::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .select-contact-popup ul::-webkit-scrollbar-thumb:hover { background: #00A884; } .select-contact-popup ul li { padding: 10px 0; border-bottom: 1px solid #f4f4f4; } .select-contact-popup ul li:last-child { border: 0; } .select-contact-popup ul li a { } .select-contact-popup .custom-checkbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none !important; cursor: pointer } .select-contact-popup .custom-checkbox { display:flex; } .select-contact-popup .custom-checkbox label { display: flex; align-items: center; margin: 0; position: relative; cursor: pointer; font-size: 12px; color: #2A3357; font-family: 'Inter-Medium'; } .select-contact-popup .custom-checkbox label:before { content: ''; -webkit-appearance: none; background-color: transparent; border-radius: 3px; border: solid 1px #8391C6; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; width: 14px; height: 14px; margin: 0 10px 0 0; } .select-contact-popup .custom-checkbox input:checked+label:after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) } .select-contact-popup .custom-checkbox input:checked+label::before { background: #00A884; border: 1px solid #00A884; } .select-contact-popup .table-striped tbody tr:nth-of-type(2n+1) { background-color: #F0FFFC; } .select-contact-popup #fwd_contacts th { background-color:#F2F5FC; padding-left: 10px; border: 0; } .select-contact-popup #fwd_contacts td { border: 0; font-family: 'Inter-Regular'; font-size: 14px; } .select-contact-popup .table-hover tbody tr:hover { color: #050F34; background-color: #F0FFFC; } .select-contact-popup #fwd_contacts_length select { height: 35px; width: 150px; } .select-contact-popup #fwd_contacts_filter input { height: 35px; width: 150px !important; } .select-contact-popup #fwd_contacts_info { display: none; } .select-contact-popup .dataTables_wrapper .dataTables_paginate { width: 100%; display: flex; justify-content: center; border-top: 1px solid #EFEFEF; margin: 10px 0 0 0; padding: 18px 0 0px 0; } .select-contact-popup #fwd_contacts_paginate .paginate_button.current { color: #42538E; border-color: #42538E; border-radius: 5px; } .select-contact-popup #fwd_contacts_paginate .paginate_button.current { background: #42538E; color: #ffffff !important; border-color: #42538E; border-radius: 5px; } #fwd_contacts_paginate .paginate_button { border-radius: 5px !important; border-color:#42538E !important; margin: 0 2px; padding: 3px 7px; font-size: 14px; } #fwd_contacts_paginate .paginate_button:active { background: #42538E !important; box-shadow: none !important; color: #fff !important; margin-right: 3px; } #fwd_contacts_paginate .paginate_button:hover { background: #42538E !important; color: #fff !important; } /* contact popup end */ /* share popup Start */ .share-contact-popup .close { margin: 0; padding: 0; opacity: 0.5; } .share-contact-popup .modal-body { padding:15px; height: 475px; overflow-y: auto; scrollbar-color: #00A884 #f5f7fa; scroll-behavior: smooth; } .share-contact-popup .modal-body::-webkit-scrollbar { width: 5px; height: 14px; } .share-contact-popup .modal-body::-webkit-scrollbar-track { background: transparent; } .share-contact-popup .modal-body::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .share-contact-popup .modal-body::-webkit-scrollbar-thumb:hover { background: #00A884; } .share-contact-popup #selectcontact { top: 10%; } .share-contact-popup .modal-dialog { max-width: 500px; width: 100%; } .share-contact-popup .modal-content { border-radius: 0; border: 0; } .share-contact-popup .modal-header { border-color: #EFEFEF; padding: 10px 15px; align-items: center; } .share-contact-popup .modal-header h4 { font-family: 'Inter-SemiBold'; font-size: 20px; line-height: 24px; color: #050F34; margin: 0; } .share-contact-popup .send { background-color: #00A884; border: 0; width: auto; height: 40px; border-radius: 5px; margin-top: 0; color: #fff; padding: 0 15px; border: 1px solid #00A884; transition: all 0.5s ease-in-out; font-family: 'Inter-Medium'; font-size:14px; } .share-contact-popup .send:hover { background-color: #fff; color:#00A884; border-color: #00A884; } .share-contact-popup ul { margin: 0; padding: 0; list-style: none; overflow-y: auto; height: 195px; scrollbar-color: #00A884 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; } .share-contact-popup ul::-webkit-scrollbar { width: 5px; height: 14px; } .share-contact-popup ul::-webkit-scrollbar-track { background: transparent; } .share-contact-popup ul::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .share-contact-popup ul::-webkit-scrollbar-thumb:hover { background: #00A884; } .share-contact-popup ul li { padding: 10px 0; border-bottom: 1px solid #f4f4f4; } .share-contact-popup ul li:last-child { border: 0; } .share-contact-popup ul li a { } .share-contact-popup .custom-checkbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none !important; cursor: pointer } .share-contact-popup .custom-checkbox { display:flex; } .share-contact-popup .custom-checkbox label { display: flex; align-items: center; margin: 0; position: relative; cursor: pointer; font-size: 12px; color: #2A3357; font-family: 'Inter-Medium'; } .share-contact-popup .custom-checkbox label:before { content: ''; -webkit-appearance: none; background-color: transparent; border-radius: 3px; border: solid 1px #8391C6; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; width: 14px; height: 14px; margin: 0 10px 0 0; } .share-contact-popup .custom-checkbox input:checked+label:after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) } .share-contact-popup .custom-checkbox input:checked+label::before { background: #00A884; border: 1px solid #00A884; } .share-contact-popup .table-striped tbody tr:nth-of-type(2n+1) { background-color: #F0FFFC; } .share-contact-popup #share_contacts th { background-color:#F2F5FC; padding-left: 10px; border: 0; } .share-contact-popup #share_contacts td { border: 0; font-family: 'Inter-Regular'; font-size: 14px; } .share-contact-popup .table-hover tbody tr:hover { color: #050F34; background-color: #F0FFFC; } .share-contact-popup #share_contacts_length select { height: 35px; width: 150px; } .share-contact-popup #share_contacts_filter input { height: 35px; width: 150px !important; } .share-contact-popup #share_contacts_info { display: none; } .share-contact-popup .dataTables_wrapper .dataTables_paginate { width: 100%; display: flex; justify-content: center; border-top: 1px solid #EFEFEF; margin-top: 10px; padding-top: 18px; } .share-contact-popup #share_contacts_paginate .paginate_button.current { color: #42538E; border-color: #42538E; border-radius: 5px; } .share-contact-popup #share_contacts_paginate .paginate_button.current { background: #42538E; color: #ffffff !important; border-color: #42538E; border-radius: 5px; } #share_contacts_paginate .paginate_button { border-radius: 5px !important; border-color: #42538E !important; margin: 0 2px; padding: 3px 7px; font-size: 14px; } #share_contacts_paginate .paginate_button:active { background: #42538E !important; box-shadow: none !important; color: #fff !important; margin-right: 3px; } #share_contacts_paginate .paginate_button:hover { background: #42538E !important; color: #fff !important; } /* share popup End */ /* forword popup */ .forword-contact-popup .close { margin: 0; padding: 0; opacity: 0.5; } .forword-contact-popup .modal-body { padding:15px; } .forword-contact-popup #selectcontact { top: 20%; } .forword-contact-popup .modal-dialog { max-width: 500px; width: 100%; } .forword-contact-popup .modal-content { border-radius: 0; border: 0; } .forword-contact-popup .modal-header { border-color: #EFEFEF; padding: 10px 15px; align-items: center; } .forword-contact-popup .modal-header h4 { font-family: 'Inter-SemiBold'; font-size: 20px; line-height: 24px; color: #050F34; margin: 0; } .forword-contact-popup .send { background-color: #00A884; border: 0; width: auto; height: 40px; border-radius: 5px; margin-top: 0; color: #fff; padding: 0 15px; border: 1px solid #00A884; transition: all 0.5s ease-in-out; font-family: 'Inter-Medium'; font-size:14px; } .forword-contact-popup .send:hover { background-color: #fff; color:#00A884; border-color: #00A884; } .forword-contact-popup ul { margin: 0; padding: 0; list-style: none; overflow-y: auto; height: 195px; scrollbar-color: #00A884 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; } .forword-contact-popup ul::-webkit-scrollbar { width: 5px; height: 14px; } .forword-contact-popup ul::-webkit-scrollbar-track { background: transparent; } .forword-contact-popup ul::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .forword-contact-popup ul::-webkit-scrollbar-thumb:hover { background: #00A884; } .forword-contact-popup ul li { padding: 10px 0; border-bottom: 1px solid #f4f4f4; } .forword-contact-popup ul li:last-child { border: 0; } .forword-contact-popup ul li a { } .forword-contact-popup .custom-checkbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none !important; cursor: pointer } .forword-contact-popup .custom-checkbox { display:flex; } .forword-contact-popup .custom-checkbox label { display: flex; align-items: center; margin: 0; position: relative; cursor: pointer; font-size: 14px; color: #2A3357; font-family: 'Inter-Medium'; } .forword-contact-popup .custom-checkbox label:before { content: ''; -webkit-appearance: none; background-color: transparent; border-radius: 3px; border: solid 1px #8391C6; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; width: 14px; height: 14px; margin: 0 10px 0 0; } .forword-contact-popup .custom-checkbox input:checked+label:after { content: ''; display: block; position: absolute; top: 2px; left: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) } .forword-contact-popup .custom-checkbox input:checked+label::before { background: #00A884; border: 1px solid #00A884; } /* forword popup end */ /* Preview Popup */ .preview-document-popup .close { margin: 0; padding: 0; opacity: 0.5; } .preview-document-popup #selectcontact { top: 20%; } .preview-document-popup .modal-content { border-radius: 0; border: 0; } .preview-document-popup .modal-header { border-color: #EFEFEF; padding: 10px 15px; align-items: center; } .preview-document-popup .modal-header h4 { font-family: 'Inter-SemiBold'; font-size: 20px; line-height: 24px; color: #050F34; margin: 0; } .preview-document-popup .modal-body { padding:15px; overflow-y: auto; max-height: calc(100vh - 125px); scrollbar-color: #00A884 #f5f7fa; scroll-behavior: smooth; } .preview-document-popup .modal-body::-webkit-scrollbar { width: 5px; height: 14px; } .preview-document-popup .modal-body::-webkit-scrollbar-track { background: transparent; } .preview-document-popup .modal-body::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .preview-document-popup .modal-body::-webkit-scrollbar-thumb:hover { background: #00A884; } .preview-document-popup .modal-header .download { color: #7785C8; top: 0; position: relative; right: 12px; width: 30px; height: 30px; display: flex; border-radius: 50%; justify-content: center; align-items: center; font-size: 16px; } .preview-document-popup .modal-header .download:hover { color: #fff; background: #7785C8; } /* Preview Popup End */ .whatsapp-chat-user ul li { margin:0;} .whatsapp-chat-user ul li a { display:flex; align-items: center; padding:15px 10px; } .whatsapp-chat-user ul li a:hover { background:#F4F9FE; } /* .whatsapp-chat-user ul li a span.u-img { margin-right:10px; position:relative; } */ .whatsapp-chat-user ul li a span.u-img { margin-right: 10px; position: relative; width: 37px; height: 37px; display: flex; justify-content: center; align-items: center; } .whatsapp-chat-user ul li a span.online { content:''; position:absolute; right:0; height:8px; width:8px; background:#17B93B; bottom:4px; border-radius:50%; } .whatsapp-chat-user ul li a .content { display:flex; flex-direction: column; -ms-flex: 1; flex: 1; } .whatsapp-chat-user ul li a .content h2 { font-size:16px; color:#050F34; margin:0 0 0px 0; font-family:'Inter-Regular'; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 185px; } .whatsapp-chat-user ul li a .content p.message { color:#050F34; margin-bottom:0; font-size:12px; font-family:'Inter-Regular'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 185px; height: 18px; } .whatsapp-chat-user ul li a .content .date { font-size:12px; color:#8C9096; font-family:'Inter-Regular'; } .whatsapp-chat-user ul li a .content .column .pin button { background: transparent; border: 0; } .whatsapp-chat-user ul li a .content .sms-count { background:#00A884; border-radius:50%; width:24px; height:24px; color:#42538E; color:#fff; font-size: 10px; font-family:'Inter-SemiBold'; display: flex; justify-content: center; align-items: center; } .whatsapp-chat-user ul li a .content .column { display:flex; justify-content: space-between; align-items: center; } .whatsapp-content .messages-area { background: #F8F3EC; height:calc(100vh - 0px); width: calc(100% - 325px); } .whatsapp-content .messages-area .header { border-bottom: 1px solid #f0f1f1; padding: 0px 24px; display: flex; align-items: center; background: #EFF3F5; box-shadow: 0 1px 5px 0 #E8E2DA; height: 55px; } .whatsapp-content .messages-area .header .backaarow { color: #353535; } .whatsapp-content .messages-area .header h2 { font-size:16px; font-family:'Inter-Bold'; color:#353535; margin:0 0 0 10px; } .whatsapp-content .messages-area .date_box { border-bottom:1px solid #9DA4B5; position:relative; justify-content: center; display: flex; margin:0 5px 0 15px; } .whatsapp-content .messages-area .date_box span { color:#4D4D4D; font-family:'Inter-SemiBold'; font-size:14px; background:#F8F3EC; padding:0 20px; position:absolute; top:-11px; } .whatsapp-content .sms-area .sendsms { display:flex; padding: 15px 15px 15px 0px; flex-direction: column; width:70%; } .whatsapp-content .sms-area .sendsms .content { background:#D9FDD3; padding:10px; box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; position: relative; min-width: 150px; } .whatsapp-content .sms-area .sendsms .content a.threedot { position: absolute; right: 0; width: 20px; top: 4px; text-align: center; color: #0B1234; font-size: 12px; } .whatsapp-content .sms-area .sendsms .content p { margin:10px 10px 0 0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; } .whatsapp-content .sms-area .sendsms .time { text-align: right; font-size:12px; color:#8C9096; margin-top:5px; } .whatsapp-content .sms-area .sendsms .content .dsply_contact { display: flex; flex-direction: column; justify-content: center; align-items: center; } .whatsapp-content .sms-area .sendsms .content .gry_brdr { width: 100%; border-top: 1px solid #D4F4CF; padding-top: 5px; margin-top: 5px; } .whatsapp-content .sms-area .sendsms .content .cont_name { font-family: 'Inter-SemiBold'; font-size: 14px; margin:5px 0; } .whatsapp-content .sms-area .sendsms .content .cont_number { text-align: center; font-family: 'Inter-Bold'; font-size: 14px; } .whatsapp-content .sms-area .sendsms .content .send_contact_div { text-align: center; width: 100%; font-family: 'Inter-SemiBold'; font-size: 14px; line-height: 19px; color: var(--button); } .whatsapp-content .sms-area .sendsms .content p { margin:0px 15px 0 0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; word-break: break-all;} .whatsapp-content .sms-area .sendsms .content .forwarded span { color: #8C9096; margin: 10px 0; display: flex; } .whts-sms-content .btn-image-preview, .whts-sms-content .video-player { border: 0; background: transparent; margin: 10px 0 5px 0; width: 100%; height: auto; } .whts-sms-content .video-caption, .whts-sms-content .image-caption { margin: 0; color: #2A3357; font-size: 16px; line-height: 19px; font-family: 'Inter-Regular'; } .whatsapp-content .whts-sms-content .figure-document { background: transparent; border: 0; margin: 0; text-align: center; } .whatsapp-content .whts-sms-content .figure-document .document-filename { font-family: 'Inter-Regular'; font-size: 14px; margin-top: 5px; display: flex; justify-content: center; } .whatsapp-content .whts-sms-content .figure-document-download { display: inline-block; text-align: center; width: 100%; } .whatsapp-content .whts-sms-content .figure-document-download .document-filename { font-family: 'Inter-Regular'; font-size: 14px; margin-top: 5px; display: flex; color: var(--themecolor); justify-content: center; } .whatsapp-content .whts-sms-content .figure-document-404 { background: transparent; border: 0; margin: 0; text-align: center; } .whatsapp-content .whts-sms-content .figure-document-404 .document-filename { font-family: 'Inter-Regular'; font-size: 14px; margin-top: 5px; display: flex; } .whts-sms-content .btn-image-preview object { height: auto; } .whatsapp-content .sms-area .receive .content .document-caption { margin-top: 7px; color: #2A3357; font-size: 16px; line-height: 19px; word-break: break-all; } .whatsapp-content .sms-area .receive { display:flex; padding: 15px 0px 15px 15px; flex-direction: column; width:70%; } .whatsapp-content .sms-area .receive .content { background:#fff; padding:10px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08); border-radius: 4px; position: relative; min-width: 150px; } .whatsapp-content .sms-area .receive .content .dsply_contact { display: flex; flex-direction: column; justify-content: center; align-items: center; } .whatsapp-content .sms-area .receive .content .gry_brdr { width: 100%; border-top: 1px solid #f4f4f4; padding-top: 5px; margin-top: 5px; } .whatsapp-content .sms-area .receive .content .cont_name { font-family: 'Inter-SemiBold'; font-size: 16px; margin:5px 0; } .whatsapp-content .sms-area .receive .content .cont_number { text-align: center; font-family: 'Inter-Bold'; font-size: 14px; } .whatsapp-content .sms-area .receive .content .location_address { text-align: left; font-family: 'Inter-Bold'; font-size: 14px; } .whatsapp-content .sms-area .receive .content .location-name { font-family: 'Inter-SemiBold'; font-size: 16px; margin: 5px 0; color: #00A884; } .whatsapp-content .sms-area .receive .content .location-url { text-align: left; font-family: 'Inter-Medium'; color: #999; font-size: 14px; margin-top: 5px; } .whatsapp-content .sms-area .receive .content .send_contact_div { text-align: center; width: 100%; font-family: 'Inter-SemiBold'; font-size: 16px; line-height: 19px; color: var(--button); } .whatsapp-content .sms-area .receive .content a.threedot { position: absolute; right: 0; width: 20px; top: 4px; text-align: center; color: #0B1234; font-size: 12px; } .whatsapp-content .sms-area .receive .content p { margin:0px 15px 0 0; color:#2A3357; font-size: 16px; line-height: 19px; font-family:'Inter-Regular'; word-break: break-all;} .whatsapp-content .sms-area .receive .time { text-align: left; font-size:12px; color:#8C9096; margin-top:10px; } .whatsapp-content .sms-area .receive .content .forwarded span { color: #8C9096; margin: 10px 0; display: flex; } .whatsapp-content .sms-area { width: 100%; height:100vh; position: relative; padding:0; } .whatsapp-content .whts-sms-content { width: 100%; height: calc(100vh - 125px); position: relative; overflow-y:auto; scrollbar-color:#00A884 #fff; } .whatsapp-content .whts-sms-content::-webkit-scrollbar { width: 8px; height: 14px; } .whatsapp-content .whts-sms-content::-webkit-scrollbar-track { background: transparent; } .whatsapp-content .whts-sms-content::-webkit-scrollbar-thumb { background: #00A884; border-radius: 14px; } .whatsapp-content .whts-sms-content::-webkit-scrollbar-thumb:hover { background: #00A884; } .attachedbox { border: none; outline: none; color: #ffff; background-color: #EFF3F5; border-radius: 50%; width: 40px; height: 40px; margin: auto; position: absolute; bottom: 12px; left: 0; margin: 0 0 0 10px; transition: margin-bottom 0.5s ease; user-select: none; z-index: 10; transform: none; display: flex; align-items: center; justify-content: center; } /* .attachedbox { border: none; outline: none; color: #ffff; background-color: #EFF3F5; border-radius: 50%; width: 40px; height: 40px; margin: auto; position: absolute; bottom: 9px; left: 0; margin: 0 0 0 21px; transition: margin-bottom 0.5s ease; user-select: none; z-index: 10; transform: none; display: flex; align-items: center; justify-content: center; } */ /* #attached-icon { width: 42px; margin-left: 20px; height: 42px; bottom: 8px; } */ #attached-icon { width: 42px; margin-left: 9px; height: 42px; bottom: 11px; padding-left: 0; } .whatsapp-content .sms-send-box .hiddenBtn { z-index: 1; } .activephoto { margin-bottom: 50px; background-image: url(../images/attached-photo.svg); background-repeat: no-repeat; background-position: 10px; } /* .activephoto::file-selector-button { opacity: 0; cursor: pointer; } */ .attachedbox[type="file"]::file-selector-button{ opacity: 0; cursor: pointer; -webkit-appearance: none; } .attachedbox[type="file"]::-webkit-file-selector-button { opacity: 0; cursor: pointer; -webkit-appearance: none; } .activevideo { margin-bottom: 100px; background-image: url(../images/attached-video.svg); background-repeat: no-repeat; background-position: 10px; } .activevideo::file-selector-button { opacity: 0; cursor: pointer; } .activedocuments { margin-bottom: 150px; background-image: url(../images/attached-document.svg); background-repeat: no-repeat; background-position: 10px; } .activedocuments::file-selector-button { opacity: 0; cursor: pointer; } .activecontact { margin-bottom: 200px; } .whatsapp-content .sms-send-box #photo { background-color: #387ef5; } .whatsapp-content .sms-send-box #video { background-color: #49b4a9; } .whatsapp-content .sms-send-box #documents { background-color: #ec9741; } .whatsapp-content .sms-send-box #contact { background-color: #364385; } .whatsapp-content .whts-sms-content .audio-player { margin-top: 10px; } .whatsapp-content .whts-sms-content .figure-image { margin-top: 10px; } /* .selecttemplate-content { background: #fff; padding: 15px; position: sticky; left: 50px; right: 50px; border-radius: 10px; bottom: 10px; box-shadow: 0 1px 5px 0 #E8E2DA; border: 1px solid #00A884; } */ .selecttemplate-content { background: #fff; padding: 15px; position: absolute; left: 50px; right: 50px; border-radius: 10px; bottom: 80px; box-shadow: 0 1px 5px 0 #E8E2DA; border: 1px solid #00A884; } .selecttemplate-content ul { list-style: none; margin: 0; } .selecttemplate-content ul li { line-height: 24px; border-bottom: 1px solid #f4f4f4; } .selecttemplate-content ul li:last-child { border: 0; } .selecttemplate-content ul li a { font-size: 14px; color: #050F34; display: flex; padding: 5px; } .selecttemplate-content ul li a:hover { background-color: #F0FFFC; padding-left: 10px; } .whatsapp-content .sms-send-box { background:#EFF3F5; justify-content: center; display: flex; flex-direction: row; padding:10px 20px 10px 30px; align-items: center; } .whatsapp-content .attachedicons { display: flex; } .whatsapp-content .attachedicons a { padding:0 0px 0 10px;} .whatsapp-content .sms-send-box .form-control { font-size:15px; color:#050F34; margin:0 15px 0 5px; border:1px solid #A0A8C8; max-height: 50px; scrollbar-color: #D4DDF2 #f5f7fa; scroll-behavior: smooth; overscroll-behavior: none; resize: none; } .whatsapp-content .sms-send-box .form-control::-webkit-scrollbar { width: 8px; height: 14px; } .whatsapp-content .sms-send-box .form-control::-webkit-scrollbar-track { background: transparent; } .whatsapp-content .sms-send-box .form-control::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .whatsapp-content .sms-send-box .form-control::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } .whatsapp-content .sms-area .sendsms .time-status-info { display: flex; margin-left: auto; column-gap: 10px; margin-top: 5px; } .whatsapp-content .sms-area .receive .time-status-info { display: flex; margin-right: auto; column-gap: 10px; margin-top: 5px; } .whatsapp-content .sms-send-box .form-control + a { right: 30px !important; } .whatsapp-content .sms-send-box .form-control::placeholder { color:#8C9096; } .whatsapp-content .sms-send-box .send-btn { position:relative; right:0; top:0; } .whatsapp-content .sms-send-box .send-btn img { width:14px;} .whatsapp-content .sms-send-box .send-btn a { width:28px; height:28px; display:flex; background:#00A884; border-radius: 50%; justify-content: center; align-items: center; } .whatsapp-content .sms-send-box .send-btn a:hover { background:#999; } #whatsapp .fade:not(.show) { opacity:1; } #whatsapp .vertical-tab .nav-tabs { background:#fff; border: 0; } #whatsapp .vertical-tab .nav-tabs li{ float: none; width: 100%; } #whatsapp .vertical-tab .nav-tabs li a { background: #fff; border-radius: 0; position: relative; z-index: 1; transition: all 0.3s ease 0s; } #whatsapp .vertical-tab .nav-tabs li a:hover, #whatsapp .vertical-tab .nav-tabs li.active a, #whatsapp .vertical-tab .nav-tabs li.active a:hover { background: transparent; border: none; } #whatsapp .vertical-tab .nav-tabs li a:before, #whatsapp .vertical-tab .nav-tabs li a:after { content: ""; background-color: #F0FFFC; width: 50.5%; height: 100%; opacity: 0; transform: perspective(300px) rotateX(-100deg); position: absolute; top: 0;left: 0; z-index: -1;transition: all 0.4s ease 0s; } #whatsapp .vertical-tab .nav-tabs li a.active { background-color: #F0FFFC; } #whatsapp .vertical-tab .nav-tabs li a:after{ transform: perspective(300px) rotateX(100deg); left: auto; right: 0; transition: all 0.4s ease 0.1s; } #whatsapp .vertical-tab .nav-tabs li.active a:before, #whatsapp .vertical-tab .nav-tabs li a:hover:before, #whatsapp .vertical-tab .nav-tabs li.active a:after, #whatsapp .vertical-tab .nav-tabs li a:hover:after { opacity: 1; transform: perspective(300px) rotateX(0); } #webwhatsapp_iframe { width: 100%; height: calc(100vh - 65px); border: 0; } .whatsapp-content .sms-area .sendsms .time-status-info .fa-clock { font-size: 12px; color: #8C9096; } /*Manualdial*/ .manualcall { position: fixed; bottom: 0; right: 0; z-index: 1; background: #ffffff; box-shadow: 8px -4px 25px rgba(0, 0, 0, 0.1); padding: 20px 0 20px 0; left: 217px; width: calc(100% - 217px); } #NoDiaLSelecteD .custom-control-label { padding: 3px 0 0 35px; margin: 0 0 0 15px; cursor: pointer; color: #868381 !important; font-family: 'Inter-Medium' !important; font-size: 14px; } #NoDiaLSelecteD .custom-control-label::after { left: 2px; } /*.manualcall { position: sticky; bottom: 0; right: 0; z-index: 99; background: #fff; box-shadow: 8px -4px 25px rgba(0, 0, 0, 0.1); padding: 20px 0 0px 0; left: 0; width: calc(100% - 0px); }*/ #NeWManuaLDiaLBox.content { max-width: 260px; width: 100%; } .manualcall .content-right { display: flex; justify-content: flex-end; align-items: center; } .manualcall .makecalltext .mobile-button { display:none; } .manualflow { /*justify-content: space-around;*/ align-items: flex-start; column-gap: 10px; padding: 0; display:flex; } .manualcall .custom-checkbox { padding: 0; } .manualcall .custom-checkbox .custom-control-label { line-height:20px; padding: 2px 0px 0 20px; font-size:12px; color:#6E7282; font-family: 'Inter-Regular'; left:0; } .manualcall .custom-control-label::after { left:0; } .manualcall .custom-control-label::before { left:0; } .manualcall .makecalltext { display:flex; justify-content: flex-start; align-items: center; position: relative; column-gap: 15px; max-width: 455px; width: 100%; } /*.manualcall .makecalltext label { position: absolute; top: -9px; left: 12px; background: #fff; padding: 0 4px; }*/ .manualcall .makecalltext label { position: relative; top: 0; left: 0; color: var(--Primary); padding: 0 4px; font-size: 16px; width: 100px; } .manualcall .makecalltext .form-control { font-size:12px; color:var(--Primary); } .manualcall .form-control::placeholder { color:#8C9096; } .manualcall .makecalltext1 label { max-width: 90px; width: 100%; font-size:12px; color:var(--Primary); font-family: 'Inter-Regular'; } .manualcall .custom-checkbox .custom-control-label span { padding-left:5px; } .manualcall .more-options span { margin-left:10px; } .manualcall .more-options span img { transform: rotate(180deg); transition:0.3s ease; } .manualcall .more-options a { color:#2A3357; font-family: 'Inter-SemiBold'; font-size:14px; display:flex; align-items: center; } .manualcall .more-options a p { font-family: 'Inter-SemiBold'; color:#2A3357; } /* .manualcall.show-hide-option .more-options a::before { content:'Less Options'; } */ /* .manualcall.show-hide-option .more-options a p { display:none; } */ .manualcall.show-hide-option .more-options span img { transform: rotate(0deg); } .manualcall .hidecolumn { display:none; transition:all 0.5s ease; padding: 0 7.5px; } .manualcall .hidecolumn .column-card { padding: 0 10px; max-width: 230px; width: 100%; margin-bottom: 10px; } .manualcall .previewcall { display:none; transition:all 0.5s ease; } .manualcall.show-hide-option .hidecolumn { display: flex; column-gap: 15px; flex-wrap: wrap; margin: 0 auto; padding: 0; } .manualcall.show-hide-option .previewcall { display:block; } .diallead-preview-buttons { display: flex; justify-content: center; } /**/ .viewmore-options { display:none; } .viewmore-options a { display: flex; align-items: center; } .viewmore-options p { font-family: 'Inter-SemiBold'; color: #2A3357; } .viewmore-options span img { transform: rotate(180deg); transition: 0.3s ease; } .viewmore-options span { margin-left:10px; } .buttons-nav-content.viewmoreoption { height:auto; overflow:inherit; } .buttons-nav-content.viewmoreoption .viewmore-options span img { transform: rotate(0deg); } /*On click user image then open Links list*/ /*.userlinkpopup { display:none; }*/ .userlinkpopup { /*display:none;*/ opacity:0; position: absolute; background: #ffffff; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); border-radius: 4px; list-style: none; z-index: -1; max-width: 100%; width: 100%; right: 0px; padding: 10px; text-align: left; min-height:60px; top:-20px; } .userlinkpopup.active { display: flex !important; opacity: 1; top: -145px; transition:1s ease-in-out; z-index: 99; min-height:60px; } .userlinkpopup ul { margin:0; padding:0; width: 100%; } .userlinkpopup ul li { display:flex; align-items: center; flex-direction: column; } .userlinkpopup ul li a { color:#2A3357 !important; font-size:14px !important; font-family: 'Inter-Regular'; display:flex; align-items: center; width:100%; padding: 6px 10px !important; } .userlinkpopup ul li a:hover { color:var(--button) !important; } .userlinkpopup span { margin:0 10px 0 0 !important; } .userlinkpopup .volumeupdown { display: flex; margin: 0; column-gap: 5px; border-top: 1px solid #f4f4f4; width: 100%; padding-top: 5px; justify-content: center; } .userlinkpopup .volumeupdown #VolumeUpSpan, .userlinkpopup .volumeupdown #VolumeDownSpan { background: #8391C6; width: 25px; height: 25px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 14px; margin: 0 !important; } .userlinkpopup .btn-toggle { margin:0px 0 0 15px; padding: 0; position: relative; border: none; width:32px; height: 16px; border-radius:20px; color: #6b7381; background: transparent; border: 1px solid #8391C6; transition:none !important; } .userlinkpopup .btn-toggle:focus, .userlinkpopup .btn-toggle:focus.active, .userlinkpopup .btn-toggle.focus, .userlinkpopup .btn-toggle.focus.active { outline: none; box-shadow: none; } .userlinkpopup .btn-toggle:before, .userlinkpopup .btn-toggle:after { width:12px ; height: 12px; transition: opacity .25s; } .userlinkpopup .btn-toggle > .handle { position: absolute; top:1px; left:1px; width:12px; height: 12px; border-radius:50%; background: #8391C6; transition: left .25s; } .userlinkpopup .btn-toggle.active { transition: background-color .25s; } .userlinkpopup .btn-toggle.active { background-color: var(--button); border: 1px solid var(--button); } .userlinkpopup .btn-toggle.active > .handle { left:16px; transition: left .25s; background: #ffffff; } .userlinkpopup .btn-toggle.active:before { opacity: .5; } .userlinkpopup .btn-toggle.active:after { opacity: 1; } /*misscall page*/ .misscalltable th { width:25%; } .calendar_dropdown.misscall { position:static; } .calendar_dropdown.misscall .calendarcontent { display:none; } .calendar_dropdown.misscall .calendarcontent.active { display:flex; filter: drop-shadow(0px 1px 24px rgba(0, 0, 0, 0.08)); max-width: 470px; height: 325px; width:100%; position:absolute; z-index:99; right:5px; top:55px; background:#ffffff; border-radius:8px; padding: 0px 15px; } .calendar_dropdown.misscall .calendarcontent .clr_left { border-right:1px solid #EFEFEF; padding-right:15px; } .calendar_dropdown.misscall .calendarcontent .clr_left ul { list-style:none; margin:0; padding:15px 0 10px 0; } .calendar_dropdown.misscall .calendarcontent .clr_left ul li { line-height:30px;} .calendar_dropdown.misscall .calendarcontent .clr_left ul li a { font-size:13px; color:var(--Primary); font-family:'Inter-Regular'; } .calendar_dropdown.misscall .calendarcontent .clr_left ul li a:hover { color:var(--button);} .calendar_dropdown.misscall .calendarcontent .clr_right { padding-left:15px; } /**/ .detailscontent { position: relative; } .onhovercontent { background: #2A3357; border-radius:4px; padding: 12px; color: #ffffff; display:none; width:180px; position:absolute; z-index:99; margin:5px 0 0 -6px; transition:0.5s ease; right: 100px; bottom: 0; } .onhovercontent::after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-right-color: #2A3357; border-width: 6px; bottom: 10px; transform: rotate(180deg); right: -12px; } .onhovercontent ul { list-style:none; margin: 0; } .onhovercontent ul li { font-size: 13px; font-family:'Inter-Regular'; padding:5px 0; display:flex; } .onhovercontent ul li span { margin-right:10px;} .onhovercontent ul li p { text-align:left; color:#ffffff; font-family:'Inter-Regular'; } .calldetails:hover .onhovercontent { display:block; } /*Filter Popup*/ .filterpopup #myModalfilter { padding: 0 !important; } .filterpopup h4 { color:var(--Primary); font-size: 20px; font-family:'Inter-Bold'; } .filterpopup .modal-header { padding-top: 10px; padding-bottom: 10px; } .filterpopup label { font-size:14px; margin-bottom:5px; } .filterpopup .form-control { font-size:13px; } .filterfooter .buttons_row { justify-content: end; } .filterfooter { background: #ffffff; position: sticky; bottom: 0; right: 0; box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.08); } .filterpopup .modal-body { height:450px; position: relative; overflow-y:auto; scrollbar-color:#ffffff #ffffff; scrollbar-width: thin; padding:15px 15px 15px 23px !important; } .filterpopup .modal-body::-webkit-scrollbar { width: 8px; height: 14px; } .filterpopup .modal-body::-webkit-scrollbar-track { background: transparent; } .filterpopup .modal-body::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 14px; } .filterpopup .modal-body::-webkit-scrollbar-thumb:hover { background: #ffffff; } /*middle content*/ .middle-content { display:flex; height: calc(100vh - 65px); padding-bottom: 0px; position: relative; overflow-y: auto; scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; } .middle-content .tab-content { width:100%; } .middle-content::-webkit-scrollbar { width: 5px; height: 14px; } .middle-content::-webkit-scrollbar-track { background: transparent; } .middle-content::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } /*.middle-content::-webkit-scrollbar-thumb:hover { background: #D4DDF2; }*/ /*session Disabled*/ .session_error { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .session_error .content { text-align:center; } .session_error .content h2 { margin:0; padding:0; font-family:'Inter-SemiBold'; font-size:24px; } .session_error .content a { font-family:'Inter-Regular'; font-size:16px; display: inline-block; } /*session Disabled*/ .login_again { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .login_again .content { text-align: center; max-width: 480px; width: 100%; } .login_again .content h2 { margin:0; padding:0; font-family:'Inter-SemiBold'; font-size:20px; line-height: 30px; } .login_again .content a { font-family:'Inter-Regular'; font-size:16px; display: inline-block; } /**/ .button-disabled { pointer-events: none; opacity: .65; cursor:not-allowed; } /*.diallead_footer { background:#fff; box-shadow: -10px -4px 25px rgba(0, 0, 0, 0.1); position: sticky; bottom: 0; height: 70px; }*/ .diallead_footer { background: #ffffff; box-shadow: -10px -4px 25px rgba(0, 0, 0, 0.1); position: fixed; bottom: 0; height: 70px; left: 217px; right: 0; width: calc(100% - 217px); } body.active .diallead_footer { width: calc(100% - 85px); left: 85px; } /*Landding page Css*/ .landing-content { height:100vh; display:flex; width:100%; } .landing-slider-section { background:#0F1835; height:100vh; display: flex; align-items: center; } .white-logo { position: absolute; top: 0; } .landing-slider-section .slider-section { flex: auto; } .landing-form { background:#ffffff; height: 100vh; display: flex; align-items: center; } .landing-form h2 { font-size:20px; color:var(--Primary); font-family:'Inter-Bold'; padding-top:0px; } .landing-form .continue-list { display: flex; flex-direction: column; max-width:335px; width:100%; } .landing-form .continue-list ul { list-style:none; margin:0; } .landing-form .continue-list ul li { margin:10px 0;} .landing-form .continue-list ul li a { display: flex; align-items: center; padding:15px 25px; border: 1px solid #D1D6DC; border-radius: 8px; } .landing-form .continue-list span { margin-right:25px; } .landing-form .continue-list p { font-size:18px; color:var(--Primary); font-family:'Inter-SemiBold'; } .landing-form .continue-list .continue-btn { background:var(--button); font-family:'Inter-SemiBold'; padding:9px; border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size:14px; color:#ffffff; border:0; } .landing-form .continue-list .continue-btn:hover { background: #4b99f4; } .landing-slider-section .carousel-caption { position:relative; right:0; left:0; bottom:0; padding:0; margin:30px 0; } .landing-slider-section .carousel-caption h3 { font-size:32px; font-family:'Inter-SemiBold' !important; line-height:42.24px; } .landing-slider-section .carousel-indicators { position:relative; top:20px; margin:0; } .landing-slider-section .carousel-indicators li { width:20px; border-radius:5px; } .landing-slider-section .carousel-item { text-align:center; margin-bottom: 0; } /*Call Logs page*/ .calllogs-table #calllogs-table_wrapper { flex-direction: column; } .calllogs-table #calllogs-table_wrapper .row { width: 100%; } #calllogs-table { width: 100% !important; } /*For Datatable css*/ .datatable-content table.dataTable { width: 100% !important;} .datatable-content table.table-content{ border-bottom: none !important; } .datatable-content table.dataTable thead th { padding: 10px 12px !important; vertical-align: middle; background-position-x: right -4px; } .datatable-content .dataTables_wrapper .dataTables_length { display:none; } .datatable-content .dataTables_wrapper .dataTables_info { display:none; } .datatable-content .dataTables_wrapper .dataTables_paginate { width:100%; display: flex; justify-content: center; margin: 25px 0 10px 0; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.current, .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background-color: #42538E; color: #ffffff !important; border: 1px solid #42538E; margin: 0; padding: 5px 10px !important; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 5px; /*width: 32px; height: 32px;*/ border: 1px solid #ffffff; font-size: 16px; font-family: 'Inter-Medium'; color:#42538E !important; background-color: #ffffff; display: flex; justify-content: center; align-items: center; margin: 0 5px !important; padding: 5px 10px !important; } .datatable-content .dataTables_wrapper .dataTables_paginate span { display: flex; align-items: center; justify-content: center; margin: 0px; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.previous { font-size: 0; position:relative; background: #ffffff; margin: 0; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover { background-color: #42538E; border: 1px solid #42538E; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.previous::after { content:url("../images/pagination_left.svg"); position: absolute; top: 0; bottom: 0; visibility: inherit !important; border-radius: 50%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.next { font-size: 0; position:relative; background: #ffffff; margin:0; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.next::after { content:url("../images/pagination_right.svg"); position: absolute; top: 0; bottom: 0; visibility: inherit !important; border-radius: 50%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover { background-color: #42538E; border: 1px solid #42538E; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled { opacity: 0.5; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled { opacity: 0.5; } .table.dataTable.no-footer { border-bottom: none !important; } .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled, .datatable-content .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled { display: none; } /*Added by vinod: 22-11-2022*/ .top-hdr-menu .customtab .nav-tabs .nav-link:focus, .top-hdr-menu .nav-tabs .nav-link:hover { border-bottom: transparent !important; border-color: transparent; } .top-hdr-menu .customtab .nav-tabs .nav-item.show .nav-link, .top-hdr-menu .nav-tabs .nav-link.active { border-bottom: transparent !important; background: var(--button); color: #ffffff; border-radius: 25px; border-color: transparent; } .top-hdr-menu .customtab .nav-tabs .nav-item.show .nav-link, .top-hdr-menu .nav-tabs .nav-link.active label { color: #ffffff; } .manualbuttons .default_btn2 { height: 35px; } .manualbuttons .nextcallpause .default_btn3 { height: 35px; } .manualflow .manualbuttons a, .manualflow .manualbuttons button { font-size: 12px !important; padding: 7px 5px !important; } .manualbuttons .buttons_row { display: flex; align-items: center; } .manualflow .optionsbox { margin-left: auto; margin-top: 8px; } .manualflow .searchlead { margin: 4px 0 0 0; } body.active .manualcall { left: 85px; width: calc(100% - 85px); } /*Call In Queue page*/ /*.callqueue-table { padding: 0 15px; }*/ /*Call Backs page*/ /*.callbacks-content { padding: 0 15px; }*/ /*Call Disposition*/ .pauseagent { display: flex; align-items: center; } .pauseagent label { margin:0; font-size:11px; } .pauseagent input[type="checkbox"] { margin: 0 5px 0 0; } /*Dashboard Graph*/ #timestatschart { width: 210px !important; height: 210px !important; } #agent-call-summary { height: 215px !important; } #call-disposition-summary { height: 235px !important; } .callsummary-box .call-status ul { list-style: none; display: flex; justify-content: center; } .callsummary-box .call-status ul li { position: relative; padding: 0 15px; font-family: 'Inter-Regular'; color: var(--Primary); font-size: 13px; } .callsummary-box .call-status ul li::before { width: 12px; height: 12px; content: ''; position: absolute; left: 0; border-radius: 50%; top: 3px; } .callsummary-box .call-status ul li.inbound::before { background:#E88E4C; } .callsummary-box .call-status ul li.outbound::before { background:#4B85F3; } /*Time Report Chart*/ #time-report-chart { height: 400px !important; } /*Custom form css*/ #form_custom_fields { display: flex; flex-wrap: wrap; } #form_custom_fields { padding:0; } #form_custom_fields .cf_column label { width: 100%; } /* #form_custom_fields .cf_column {padding: 0 5px; margin: 10px 0; position:relative; } */ #form_custom_fields .cf_column { margin: 10px 0 15px 0; position: relative; grid-template-columns: 25% 25% 25% 25%; display: grid; column-gap: 10px; padding: 0 15px; width: calc(100% - 30px); } #form_custom_fields .cf_column .fieldbox { position: relative; margin-bottom: 10px; } #form_custom_fields .cf_column label { font-family: 'Inter-SemiBold'; font-size: 14px; color: #6E7282; word-wrap: anywhere; padding-right: 5px; } #form_custom_fields .cf_column span { margin-bottom: 0; color: var(--Primary); font-size: 16px; font-family: 'Inter-Regular'; } /* #form_custom_fields .cf_header { display: flex; width: 100%; border-bottom: 1px solid #002863; margin: 0 0 10px 0; padding-bottom: 7px; } */ #form_custom_fields .cf_header { display: flex; width: 100%; border-bottom: 1px solid #E9F2FB; margin: 10px 15px 10px 15px; padding: 5px 10px; background: #E9F2FB; } #form_custom_fields .cf_header label { color: var(--sidebar); font-size: 16px; line-height: 24px; font-family: 'Inter-Medium'; margin: 0 18px 0 0; } #FormContents { width:100%; } /* #FormContents #vcFormIFrame { width:100%; min-height: 500px; } */ #FormContents #vcFormIFrame { width: 100%; height: calc(100vh - 280px); } /* .form-control.textarea-fields { height:65px; } */ #form_custom_fields .cf_help p { color:#ffffff; padding: 5px; border-radius: 5px; background:#0B1234; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); position: absolute; z-index: 9; right: 5px; top: 20px; } .cf_column input[type="checkbox"], .cf_column input[type="radio"] { box-sizing: border-box; padding: 0; width: 16px; height: 16px; } /* Changes By Vinod Kushwah - Textarea Focus Effect */ #form_custom_fields .column-control textarea.form-control { height: 35px; } #form_custom_fields .column-control textarea.form-control:focus { height: 75px; position: absolute; top: 0; transition: all ease-in 0.5s; z-index: 1; } /* Css : 03-03-2023 */ /* todays call activity */ .todays-call-activity-box h1 { font-size: 20px; color: var(--Primary); font-family: 'Inter-Bold'; margin-bottom: 32px; animation: moveRight 1s ease-in; } .today-calls-card .card-box { /*border-right: 1px solid #EFEFEF; max-width: 20%;*/ width: 100%; justify-content: start; display: flex; align-items: center; padding:15px 10px; position: relative; /*box-shadow: 0px 2px 10px #E3E9F1;*/ border-radius: 10px; background: var(--cardbg); } .today-calls-card .card-box:last-child { border-right: 0; /*padding-right: 0;*/ } /* todays call activity End */ .card-title-right { column-gap: 10px; } .refreshicon img { margin-right: 10px;} .refreshicon { color:#2A3357; font-family: 'Inter-SemiBold'; font-size: 13px; } .refreshicon:hover { color:var(--button); } .tday-viewall span { margin-left: 5px; } .times-hours-status { width: 100%; } .times-hours-status .totalbreaktime { display: flex; justify-content: space-between; border-bottom: 1px solid #6E7282; padding: 15px 0; } .times-hours-status .totalbreaktime label { color: #6E7282; font-size: 14px; font-family: 'Inter-Medium'; margin-bottom: 0; } .times-hours-status .totalbreaktime span { font-family: 'Inter-SemiBold'; color: #2A3357; font-size: 14px; } .times-hours-status .totalbreaktime span img { margin-left: 5px; } .times-hours-status ul { list-style: none; margin:10px 0 0 0; } .times-hours-status ul li { display: flex; justify-content: space-between; padding:5px 0; align-items: center; } .times-hours-status ul li p { margin: 0; font-size: 12px; color: var(--Primary); font-family: 'Inter-Regular'; display: flex; align-items: center; column-gap: 5px; } .times-hours-status ul li h6 { margin: 0; font-size: 12px; font-family: 'Inter-SemiBold'; } /* Agent View */ .agentsstatus_popup .agents_content .agent_data .status_time { display: flex; align-items: center; column-gap: 15px; } .agentsstatus_popup .agents_content .agent_data .status_time .time { color:var(--Primary); font-size: 14px; } .datanotfound { width: 100%; } .datanotfound .content { justify-content: center; display: flex; align-items: center; flex-direction: column; height: 270px; border: 0 !important; } .datanotfound .content h3 { color:var(--Primary); font-size: 14px; font-family: 'Inter-Regular'; margin: 15px 0 0 0; } /* Css : 13-03-2023 */ #timestats-graph { height: 300px !important; } #timestats-graph label { margin: 0 !important; } .today-calls-card .refreshicon { width: 22px; position: relative; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .today-calls-card .card-box .content h2.total-counts-text { display: flex; justify-content: space-between; align-items: center; } .today-calls-card .card-box .content h2.total-counts-text .refreshicon img { margin-right: 0; } /* 14-03-2023 */ .manual-bottom .call-button-content { max-width: 900px; width: 100%; padding: 0 15px; margin: 0 auto; display: flex; flex-direction: column; } .manual-bottom .call-button-content .manualcall-card1 { width: 100%; display: flex; } .manual-bottom .call-button-content .manualcall-card1 .btn-card-box { display: flex; column-gap: 15px; } .manual-bottom .call-button-content #MDPhonENumbeR { max-width: 230px; width: 100%; height: 35px; } .manual-bottom .call-button-content .manualcall-card1 .makecalltext { } .manual-bottom .call-button-content .column-col { width: 33.33%; } .manual-bottom .optionsbox { position: absolute; right: 20px; top: 30px; } .manual-bottom .manualcall-card2 { padding-left: 115px; } table.table-content td.postcode-content { position: relative; padding-top: 0; padding-bottom: 0; vertical-align: middle; } table.table-content td.postcode-content .infocallbox a { display: none; } table.table-content td.postcode-content p { color: var(--Primary); font-family: 'Inter-Regular'; } table.table-content tr:hover td.postcode-content .infocallbox { display: flex; column-gap: 2px; } table.table-content tr:hover td.postcode-content .infocallbox a { display: flex; } table.table-content tr:hover td.postcode-content p { display: none; } table.table-content tr:hover td.postcode-content a { width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; margin: 0 2px; } /*Sweet Alert*/ .question-bg { background: #1375B4 !important; } .question-buttons button.confirm-button, .question-buttons button.cancel-button { font-size: 14px !important; } /*Sweet Alert End*/ .transfercall select.form-control { height: 35px; line-height: normal; padding: 0 12px; font-size: 14px; } .toast-content.info-bg { /*background-color:rgba(19, 117, 180, 0.5) !important;*/ background: #f39c12 !important; } .toast-content .toast-close { color: #ffffff !important; } .toast-content .toast-frame { height: auto; } /* 17-04-2023 */ #leaddetails_leaddetails label { margin-bottom: 10px; font-size: 14px; } #leaddetails_leaddetails .form-group p { margin-bottom: 0; } /*20-03-2k23*/ /*Checkbox*/ .customcheckbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none !important; cursor: pointer } .customcheckbox label { display: flex; align-items: center; margin: 0; position: relative; cursor: pointer; font-size: 14px; color: #868381 !important; font-family: 'Inter-Medium' !important; } .customcheckbox label:before { content: ''; -webkit-appearance: none; background-color: transparent; border-radius: 3px; border: solid 1px #8391C6; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; width: 16px; height: 16px; margin-right:5px; } .customcheckbox input:checked+label:after { content: ''; display: block; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); transition:0.3s; } .customcheckbox input:checked+label::before { background: var(--button); border: 1px solid var(--button); } .customer-hangup-content h4 { font-size: 20px; color: var(--Primary); font-family: 'Inter-Bold'; margin: 0; } .customer-hangup-content p { color: var(--Primary); font-family: 'Inter-Medium'; font-size: 16px; } .customer-hangup-content .modal-dialog { margin-left:auto; margin-right:auto; top: 30%; } /*For Callback schedule : 03-04-2023*/ .leaddetails-content .callback-schedule label { margin-bottom: 10px; font-size: 14px; } .callback-schedule { border: 1px solid #f2f2f2; background: #F5F7FA; } .radiobuttons { display: flex; } .radiobuttons label { display: flex; align-items: center; cursor: pointer; } .radiobuttons label input { margin: 2px 0 0 0; } .radiobuttons input[type="radio"] { -webkit-appearance: none; appearance: none; background-color: #ffffff; margin: 0; width: 16px; height: 16px; border-radius: 50%; transform: translateY(-0.075em); display: grid; place-content: center; border: 1px solid #8391C6; } .radiobuttons label p { margin: 0 10px 0 5px; font-family: 'Inter-Regular'; font-size: 14px; color: var(--Primary); } .radiobuttons input[type="radio"]:checked::before { transform: scale(1); } .radiobuttons input[type="radio"]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; background-color: #ffffff; border: 4px solid var(--button); } .dialbutton-icon { display: none; } .Nextcallpause-icon { display: none; } #NexTCalLPausE { align-items: center; display: flex; font-size: 12px; font-family: 'Inter-SemiBold'; } /*added on 26-04-2023 for dashboard*/ .common-card-box { /*box-shadow: 0px 2px 10px #E3E9F1;*/ padding: 15px; border-radius: 10px; min-height: 390px; background: var(--cardbg); } .common-card-box-inner { /*box-shadow: 0px 2px 10px #E3E9F1;*/ padding: 15px; border-radius: 10px; background:var(--cardbg); } .infoicon { position: absolute; right: 5px; top:0; } .form-control.multiselect ~ span { width: 100% !important; } .infoicon.cf_help ~ .infoicon { right: 1 !important; } .mark, mark { background-color: #fbeb96; } span.labeltext.form-check-label { color: #868381 !important; font-family: 'Inter-Medium' !important; font-size: 14px !important; } /* email outbound & inbound */ .email-outbound-inbound { display: flex; column-gap: 20px; padding: 0 10px 0 0px; position: relative; background-color: #fbfcfd; } .email-outbound-inbound .email-outbound-content { width: 220px; box-shadow: 1px 0px 0px #E0E2E9; background: #ffffff; z-index: 1; background-color: #ffffff; padding:0 0px 0 10px; } .email-outbound-inbound .email-inbound-content { flex-direction: column; width: calc(100% - 220px); display: flex; left:0; position: relative; padding: 15px 0; height:calc(100vh - 103px); } /* login Error */ .login-right-column .form-content label.error { margin: 5px 0 0 0; font-family: 'Inter-Regular'; font-size: 13px; } /* Dashboard Calendar Design css */ .daterangepicker { box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); font-family: 'Inter-Medium' !important; border: 0 !important; } .daterangepicker .ranges li.active { background-color: var(--button) !important; } .daterangepicker::before { border-bottom: 7px solid #fff !important; } .daterangepicker { margin-right: 10px; } /* changed Password css */ .login-right-column form#vicidial_form { max-width: 415px; width: 100%; } /* css for disposition page */ .disposition-content ul li .check.deletecheck { top: 3px; border-color: #cccc; cursor: not-allowed; } /* header css */ .lastcallbacks { background: #191919; color: #fff; font-size: 10px; padding: 5px 5px 5px 10px; border-radius: 4px; height: 22px; position: relative; top: 5px; left: 15px; font-family: 'Inter-Medium'; } .lastcallbacks::before { width: 10px; height: 10px; content: ''; position: absolute; background: #191919; left: -4px; transform: rotate(45deg); z-index: 1; top: 6px; } #CloserSelectBox { height: 100vh; background: #fff; } #sidebar.active .collapse.show { padding: 10px 0;} #sidebar.active .collapse.show li { padding-left: 15px !important; } #sidebar.active .collapse.show li a { justify-content: start !important; padding: 0 !important; } .reset_btn:hover, .continue_btn:hover, .login_btn:hover { transform: translateY(-6px); } /* Calback popup */ .callbackpopup .clear-btn { position: absolute; right: 10px; top: 30px; margin: 0 !important; opacity: 0.5; } .callbackpopup .clear-btn:hover { opacity: 1;} .clear-btn img { width: 18px; } .alert.lead-search-alert { color: var(--button); border-color: #B9D7FB; background: #EAF4FF; font-size: 14px; padding: 10px; } /* Call Channels */ .call-channels-content .modal-content { border-radius: 8px; border: 0; } .call-channels-content .alert-icon { height: 50px; width: 50px; border-radius: 50%; background:#FFF2EB; position: absolute; top: -25px; left: 0; margin: 0 auto; right: 0;justify-content: center; display: flex; } .call-channels-content .modal-dialog { max-width: 700px; width: 100%; top: 25%; } .call-channels-content p { color: var(--Primary); font-size: 16px; font-family: 'Inter-Regular'; line-height: 21.36px; } .call-channels-content .modal-header .modal-title { font-family: 'Inter-Bold'; font-size: 20px; color: var(--Primary); } .call-channels-content .text-rec { color: #9DA4B5;} #callchannel img { width: 16px; } .call-channels-content td { vertical-align: middle; } .volume-buttons img { width: 20px; } .volume-buttons a { width: 30px; border-radius: 50%; height: 29px; display: flex; justify-content: center; align-items: center; } .volume-buttons a:hover { background:#fff; box-shadow:0px 4px 8px rgba(0, 0, 0, 0.1);} .volume-buttons { display: flex; column-gap: 3px; } /* Select2 Searchbar css */ .formcontrolselect .select2-container--default .select2-selection--single { border: 1px solid #A0A8C8; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 5px; background: #FFFFFF; font-family: 'Inter-Regular'; height: 37px; } .formcontrolselect .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 35px; color: var(--Primary) !important; font-size: 13px; padding-left: 10px; padding-right: 30px; } .formcontrolselect .select2-container--default .select2-selection--single .select2-selection__arrow { height: 35px; width: 30px; } .formcontrolselect select { appearance: none; } .formcontrolselect .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--Primary); border-style: solid; border-width: 0px 1px 1px 0px; position: absolute; width: 8px; height: 8px; transform: rotate(45deg); transition: border-width 150ms ease-in-out; top: 40%; right: 10px; } .formcontrolselect .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0px 1px 1px 0px; border-color: var(--Primary); transform: rotate(-135deg); } .select2-dropdown { border-color: #8391C6; } .formcontrolselect .select2-container { width: 100% !important; } .select2-search__field:focus-visible { border-color: var(--button); outline: 0; box-shadow: 0 0 0 .2rem #DFFFFF; color: var(--Primary); } .theme-mode { display: inline-block; margin-right: 5px; } .theme-mode button { background: transparent; border: 0; width: 30px; height: 30px; border-radius: 50%; color: #167CF2; position: relative; top: 2px; } .theme-mode button .light { display: none; } .theme-mode button span svg { width: 20px;} .darktheme .theme-mode button .light { display: flex; align-items: center; justify-content: center; } .darktheme .theme-mode button .dark { display: none; } .popup_header button { border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; opacity: 0.5; } .popup_header button:hover { opacity: 1;} /* .livecall .ringing { width: 36px; height: 36px; position: relative; display: inline-block; } .livecall .ringing::after { animation: pulse 1000ms cubic-bezier(0.9, 0.7, 0.5, 0.9) infinite; } @keyframes pulse { 0% { opacity: 0; } 50% { transform: scale(1.4); opacity: 0.4; } } .livecall .ringing::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background:#ffede3; border-radius: 50%; z-index: -1; } */ .livecall .ringing img { width: 36px; height: 36px; } /* #sms_templates_response { overflow-y: auto; height: calc(100vh - 105px); } */ #sms_templates.stickylinsting h2 { margin: 0; font-size: 13px; color: #6E7282; height: 40px; line-height: 40px; } .sms-module-content .alert { font-size: 14px; } .sms-module-content .alert ul { list-style: none; margin: 0; } #sms_templates_response .alert { display: flex; justify-content: space-between; align-items: center; } #refresh_msg_tpls img { margin: 0; } #refresh_msg_tpls { display: flex; justify-content: center; align-items: center; } p #refresh_msg_tpls {display: contents; justify-content: center; align-items: center;} #el_search_leads th:nth-child(1) { width: 70px !important; } .backbutton { color: #2A3357; } /* themecolor change popup css */ .themechangebox .module-content{ right: -400px; position: fixed; transform: right 300ms ease-out; -webkit-transition: right 300ms ease-out; max-width: 400px; width: 100%; background: var(--bg-white); height: 100vh; z-index: 99; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.08); top: 0; bottom: 0; } .themechangebox.active .module-content { right: 0; } .themechangebox .module-content { padding: 0 15px; } .themechangebox button.themecolor { background: transparent; border: 0; } body .overlap-bg { display: none; } body .overlap-bg.active { display: flex; background: rgba(0,0,0,0.3); width: 100%; position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 99; } .themechangebox .module-content .content h2 { background: #F4F9FF; color: var(--Primary); font-size: 16px; font-family: 'Inter-Regular'; margin: 10px 0 0 0; padding: 10px; border-bottom: 1px solid #DDECFF; } .themechangebox .module-content .content .colorrow { display:flex; gap: 15px; } .themechangebox .module-content .content .colorrow span { display: flex; flex-direction: column; } .themechangebox .module-content .content input { width: 40px; height: 40px; border-radius: 10px; border:0; font-size:0; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .themechangebox .module-content .content input:hover { transform: translateY(-3px); } .themechangebox .module-content .content label { font-family: 'Inter-Regular'; color: var(--Primary); margin: 5px 0 0 0; } .themechangebox .module-content .content span { justify-content: center; align-items: center; } .themechangebox .module-content .content .select-theme span.color-circle { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border: 1px solid #717171; } .themechangebox .module-content .content .select-theme span.color-circle:hover { transform: translateY(-3px); cursor: pointer; } .themechangebox .module-content .content .select-theme .color1 { background-color: var(--Primary); } .themechangebox .module-content .content .select-theme .color2 { background-color: #845ADF; } .themechangebox .module-content .content .select-theme .color3 { background-color: #186533; } .themechangebox .module-content .content .select-theme .color4 { background-color:#6267FF; } .themechangebox .module-content .content .select-theme .color5 { background-color:var(--button); } /* disposition */ .disposition-content ul li .phonedial { visibility: hidden; position: relative; top: 1px; right: -2px; transform: rotate(100deg); width: 35px; height: 35px; border-radius: 50%; border: 1px solid var(--button); color: var(--button); display: flex; justify-content: center; align-items: center; font-size: 12px; } .disposition-content ul li:hover .phonedial { visibility: visible; } .disposition-content ul li:hover .phonedial:hover { color: var(--bg-white); background-color: var(--button); } .disposition-content ul li:hover .phonedial button { padding: 0; color: var(--button); border: 0 !important; background: transparent; width: 35px; height: 35px; border-radius: 50%; justify-content: center; align-items: center; } .disposition-content ul li:hover .phonedial:hover button { padding: 0; color: var(--bg-white); } #sidebar.active .collapsing { position: relative; height: 0; transition: inherit; } .darktheme-logo { display: none; } .darktheme .darktheme-logo { display: flex; } .darktheme .lighttheme-logo { display: none; } /* login popup css */ .logout_message #LogoutModal { z-index: 99999; } /* login popup css End*/ /* Side menu css*/ #sidebar.active ul li:hover .collapse { left: 100%; display: block; } #sidebar.active ul ul li { padding: 0px 0 0px 15px !important; } /* customer profiling */ .profiling-right-action { display: flex; position: relative; column-gap: 10px; } .phonenumber-search { position: relative; } .phonenumber-search .form-control { padding-right: 40px; width: 200px; } .phonenumber-search .search { position: absolute; top: 2px; right: 2px; width: 31px; color: #fff; background: #007bff; height: 31px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 14px; } .phonenumber-search .search:hover { opacity: 0.5; } .phonenumber-search .error { position: absolute; width: auto; color: #f00; font-family: 'Inter-Regular'; font-size: 12px; bottom: -14px; margin: 0; } .customer-profile-content .sms-pagination .page-link.active { background: #42538E !important; color: #fff; border: 1px solid #42538E; } .customer-profile-content .sms-pagination .page-link { position: relative; display: flex; line-height: 1.25; color: #42538E; background-color: #f5f7fa; border: 1px solid #f5f7fa; border-radius: 3px; padding: .5rem .75rem !important; height: 32px; align-items: center; justify-content: center; } .customer-profile-content .sms-pagination { display: flex; column-gap: 5px; border-top:1px solid #C7D2F7; padding-top:15px; border-radius: 0; } /* whatsapp */ .whatsapp-content .attachedicons + div { flex: auto; padding: 0 20px 0 20px; width: calc(100% - 10px); } /* facebook */ .official-content-list .comments-preview .write-comment { display: flex; column-gap: 15px; /*border-top: 1px solid #E0E2E9;*/ position: relative; margin-bottom: 10px; } .official-content-list .comments-preview .write-comment .userimg { height: 48px; width: 48px; background: #E2F4FF; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; } .official-content-list .comments-preview .write-comment .userimg img { width: 30px; } .official-content-list .comments-preview .form-control.textareafields { height: 70px; padding-right: 60px; resize: none; overflow-y:auto; scrollbar-color:#D4DDF2 #f5f7fa; } .official-content-list .comments-preview .form-control.textareafields::-webkit-scrollbar { width: 8px; height: 14px; } .official-content-list .comments-preview .form-control.textareafields::-webkit-scrollbar-track { background: transparent; } .official-content-list .comments-preview .form-control.textareafields::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .official-content-list .comments-preview .form-control.textareafields::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } .official-content-list .comments-preview .send-comment { position: absolute; right: 10px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #E2F4FF; top: 15px; color: #0F78F2; } .official-content-list .comments-preview .send-comment:hover { background-color: #0F78F2; color: #ffffff; } .official-content-list .comments-preview .show-comment { display: flex; column-gap: 15px; border-top: 1px solid #E0E2E9; position: relative; margin: 0 0 10px 0; padding-top: 10px; } .official-content-list .comments-preview .show-comment .userimg { height: 48px; width: 48px; background: transparent; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; } .official-content-list .comments-preview .show-comment .userimg img { width: 48px; border-radius: 50%; } .official-content-list .comments-preview .show-comment .content { background-color: #F8FCFF; border-radius: 5px; width: calc(100% - 30px); } .official-content-list .comments-preview .show-comment .content h3 { margin-bottom:3px; font-size: 16px; font-family: 'Inter-SemiBold'; color: #050F34; } .official-content-list .comments-preview .show-comment .content .time { font-size: 12px; color: #6E7282; font-family: 'Inter-Regular'; margin-bottom:3px; } .official-content-list .comments-preview .show-comment .content p { margin: 3px 0; font-size: 14px; font-family: 'Inter-Medium'; } .official-content-list .comments-preview { width: 100% !important; } /* Iframe Url */ iframe#IframeURLPanelIFrame { border: 0; scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior: none; } iframe::-webkit-scrollbar { width: 8px; height: 14px; } iframe::-webkit-scrollbar-track { background: transparent; } iframe::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } iframe::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } /* Custom Form */ .checkbox-custom-form { display: flex; flex-wrap: wrap; column-gap: 10px; } .checkbox-custom-form .checkboxfield { margin-bottom: 5px; } .nextcallbuttons .nextcallicon { display: none; } /* internalchat */ .internalchat-content .messages-area .internal-chat-header .backaarow { display: none; } #busycallsdisplay img { width: 16px; } /* messaging */ #messaging_module.sms-module-content { height: calc(100vh - 65px); } #messaging_module.sms-module-content .listing-sticky { max-width: 240px; height: calc(100vh - 65px) } #messaging_module .sms-bg { max-width: calc(100% - 240px) !important; flex: 0 0 100%; } /* twitter */ .twitter-messanger-content .messages-area .backaarow { display: none; } /* internalchat */ .mute-privacy-list { top: 50px; position: absolute; right: 20px; z-index: 9; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); background: #fff; padding: 10px; min-width: 180px; border-radius: 5px; } .mute-privacy-list ul { list-style: none; margin-bottom: 0; } .mute-privacy a { color: #353535; } #messaging_non_emulator_response #msg_content { padding-bottom: 30px; } .internalchat-content .messages-area .header .usermsg-right { display: flex; column-gap: 15px; align-items: center; } .internalchat-content .messages-area .header .usermsg-right .endchatbtn a { color: #E83535; border: 1px solid rgba(232, 53, 53, 0.2); font-size: 14px; font-family: 'Inter-SemiBold'; padding: 9px; display: flex; border-radius: 5px; } .internalchat-content .messages-area .header .usermsg-right .endchatbtn a:hover { background: #E83535; border-color: #E83535; color: #fff; } .internalchat-content .messages-area .header .usermsg-right .endchatbtn a .fa-comment-slash { display: none; } .internalchat-content .messages-area .header .usermsg-right .endchatbtn button { color: #E83535; border: 1px solid rgba(232, 53, 53, 0.2); font-size: 14px; font-family: 'Inter-SemiBold'; padding: 9px; border-radius: 5px; background: transparent; display: flex; } .internalchat-content .messages-area .header .usermsg-right .endchatbtn button:hover { background: #E83535; border-color: #E83535; color: #fff; } .internalchat-content .messages-area .header .usermsg-right .endchatbtn button .fa-comment-slash { display: none; } .livechatmobile1 { background: #47D993; width: 35px; height: 35px; display: none; border-radius: 50%; align-items: center; justify-content: center; color: #0F8259; position: absolute; top: 49px; right: 85px; transition: all 0.3s ease-in-out 0s; } .livechatmobile1:hover { background: #0F8259; color: #47D993; cursor: pointer; } #busycallsdisplay img { width: 16px; } /* added by denish date : 01-DEC-2-23 Hotkey list left popup**/ .left_popup_close {border: 0;background: transparent;} .hotkeyRow { padding:8px; display: flex; align-items: center; color: #050F34; } .hotkeyRow .hotkeyno{ background:#CFE4FC; border-radius: 5px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .hotkeyRow .hotkeytxt { padding: 0px 0px 0px 20px; font-size: 16px; } .hotkeyRow .hotkeytxt .code { font-family: 'Inter-Medium'; } .hotkey_hideshow_popup svg { margin-top: 2px;margin-left: 5px; font-size:14px; color:var(--button); } #HotKeyEntriesBoxNew .alert.hotkeyalert { background: #F0F1F4; font-size: 14px; line-height: 20px; position: absolute; bottom: 0; margin: 0; left: 0; right: 0; border: 0; color: #0F1835; min-height: 95px; } .hotkeycontent { height: calc(100vh - 150px); overflow-y: auto; padding-bottom: 20px; scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior: none; } .hotkeycontent::-webkit-scrollbar { width: 8px; height: 14px; } .hotkeycontent::-webkit-scrollbar-track { background: transparent; } .hotkeycontent::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .hotkeycontent::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } /* collection form */ .rowborder { border-bottom: 1px solid #EFEFEF; margin-bottom: 20px; } /* .customer-info .primary-details { background-color: #F1F5F9; } */ .customer-info .text-link { color: #0F78F2 !important; } .customer-info .callcard { display: flex; position: relative; align-items: center; column-gap: 70px; } .customer-info .callcard .phone-icon { width: 28px; height: 28px; border: 1px solid rgba(15, 120, 242, 0.2); color: #0F78F2; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; transform: rotate(90deg); } .customer-info .callcard .phone-icon:hover { color: #fff; background: #0F78F2; border-color: #0F78F2; } .customer-info .agentinput-field { display: flex; position: relative; align-items: center; column-gap: 10px; flex-wrap: nowrap; } /* .customer-info .agentinput-field .savebtn { position: absolute; right: 50px; } */ .customer-info .agentinput-field .savebtn { position: absolute; right: 45px; background: #0F78F2; color: #fff; padding: 5px; border-radius: 5px; top: 3px; } .customer-info .agentinput-field .savebtn:hover { background: var(--sidebar); } .customer-info .agentinput-field .alternatenumber { padding-right: 60px; } /* Modify & added css for collection module bug fixing by vinod : 25-01-2024 Start*/ .customer-info .agentinput-field .phone-icon { width: 35px; height: 35px; border: 1px solid rgba(15, 120, 242, 0.2); color: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 14px; transform: rotate(90deg); background-color: #0F78F2; } .customer-info .form-control.is-valid { background-position: 8px 8px; padding-left: 30px; } .customer-info .form-control.is-invalid { background-image: none; } #customform #tabs li:first-child { margin-left: 0; } .customer-info .agentinput-field .invalid-feedback { margin-top: 0; position: absolute; bottom: -22px; font-size: 11px; line-height: 10px; } /* .customer-info .agentinput-field + .invalid-feedback { display: flex; } */ /* added css for collection module bug fixing by vinod : 25-01-2024 End*/ .customer-info .agentinput-field .phone-icon:hover { color: #fff; background: var(--sidebar); border-color: var(--sidebar); } .customer-info .agentinput-field .phone-hang { width: 35px; height: 35px; border: 1px solid #fbe4e6; color: #dc3545; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; transform: rotate(90deg); } .customer-info .agentinput-field .phone-hang:hover { color: #fff; background: #dc3545; border-color: #dc3545; } .customer-info .calendar-field { position: relative; } .customer-info .calendar-field .calendar { position: absolute; right: 10px; top: 38px; color: #9DA4B5; } .customer-info .label-header { display: flex; align-items: center; justify-content: space-between; } .customer-info .label-header ul.list { list-style: none; margin: 0; display: flex; } .customer-info .label-header ul.list li { padding: 0 5px; border-left: 1px solid #D1D1D1; } .customer-info .label-header ul.list li:first-child { border: 0;} .customer-info .label-header ul.list li a { font-size: 12px; color: #0F78F2; } .customer-info .custom-checkbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none !important; cursor: pointer } .customer-info .custom-checkbox { display:flex; } .customer-info .custom-checkbox label { display: flex; align-items: center; margin: 0; position: relative; cursor: pointer; font-size: 14px; color: #0B1234; font-family: 'Inter-Medium'; } .customer-info .custom-checkbox label:before { content: ''; -webkit-appearance: none; background-color: transparent; border-radius: 3px; border: solid 1px #8391C6; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; width: 16px; height: 16px; margin: 0 10px 0 0; } .customer-info .custom-checkbox input:checked+label:after { content: ''; display: block; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) } .customer-info .custom-checkbox input:checked+label::before { background: #0F78F2; border: 1px solid #0F78F2; } .customer-info .history-payment-content table th { background: #F7F7FC; color: #6E7282; font-family: 'Inter-Medium'; } /* screenshare dropdown */ .screenshare-dropdown { display: none; } .screenshare-dropdown.show { display: flex; right: 20px; left: inherit; max-width: 370px; width: 100%; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); border: 0; padding: 15px 0; flex-direction: column; border-radius: 10px; } .screenshare-dropdown .buttons-card { display: flex; column-gap: 10px; justify-content: center; align-items: center; } .screenshare-dropdown .buttons-card a { font-family: 'Inter-medium'; font-size: 12px; padding:8px 10px; border: 1px solid transparent; border-radius: 5px; } .screenshare-dropdown .buttons-card a.whatsapp { background: #e1ffec; color: #25d366; } .screenshare-dropdown .buttons-card a.whatsapp:hover { border:1px solid #25d366; } .screenshare-dropdown .buttons-card a.email { background: #fdf1e6; color: #f0790b; } .screenshare-dropdown .buttons-card a.email:hover { border:1px solid #f0790b; } .screenshare-dropdown .buttons-card a.sms { background: #EBF8FF; color: #0086CA; } .screenshare-dropdown .buttons-card a.sms:hover { border: 1px solid #0086CA; } .screenshare-dropdown .form-group { max-width: 215px; width: 100%; position: relative; } .screenshare-dropdown .form-group .form-control { box-shadow: none; height: 32px; padding-right: 60px; } .screenshare-dropdown .form-group .copylink { position: absolute; right: 8px; top: 9px; font-size: 10px !important; } .screenshare-dropdown button#onclickshare { background: transparent; border: 0; opacity: 0.5; } .screenshare-dropdown button#onclickshare:hover { opacity: 1; } .screenshare-dropdown button#onclickshareclose { background: transparent; border: 0; opacity: 0.5; } .screenshare-dropdown button#onclickshareclose:hover { opacity: 1; } /* added new css for screen share : 06-03-2024 */ .screenshare-dropdown .customtab .nav-tabs { background: transparent; border-bottom: 1px solid #f4f4f4; } .screenshare-dropdown .screenshare-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .screenshare-dropdown .screenshare-hdr h4 { font-family: 'Inter-SemiBold'; font-weight: 600; font-size: 14px; margin: 0; } /* screenshare dropdown End*/ /* Message Board Css */ .messageboard-inbox { display: flex; } .message-board-card { width: 352px; border-right: 1px solid #EFEFEF; height: calc(100vh - 65px); background: #fff; } .message-board-card .header { display: flex; align-items: center; column-gap: 15px; justify-content: space-between; height: 45px; padding: 0 15px; position: relative; } .message-board-card .header .message-dropdown { width: 18px; justify-content: center; display: flex; flex-direction: column; align-items: center; } .message-board-card .header .message-dropdown span { content: ''; background-color: #6E7282; height: 2px; border-radius: 5px; display: flex; margin-bottom: 3px; } .message-board-card .header .message-dropdown span.line1 { width: 18px; } .message-board-card .header .message-dropdown span.line2 { width: 12px; } .message-board-card .header .message-dropdown span.line3 { width: 7px; } .message-board-card .header .allsms-dropdown { display: none; } .message-board-card .header .allsms-dropdown.show { display: flex; position: absolute; right: 10px; top: 50px; background: #fff; border-radius: 5px; box-shadow: 0px 0px 20px 0px #0000001A; max-width: 150px; width: 100%; } .message-board-card .header .allsms-dropdown ul { list-style: none; padding: 15px; margin-bottom: 0; width: 100%; } .message-board-card .header .allsms-dropdown ul li { line-height: 26px; border-bottom: 1px solid #edf5ff; } .message-board-card .header .allsms-dropdown ul li:last-child { border: 0; } .message-board-card .header .allsms-dropdown ul li a { font-size: 13px; color: #050F34; font-family: 'Inter-Regular'; display: flex; } .message-board-card .header .allsms-dropdown ul li a:hover { color: #007bff; background: #edf5ff; padding-left: 8px; } .message-board-list { height: calc(100vh - 110px); } .message-board-list ul { height: calc(100vh - 150px); display: flex; flex-direction: column; list-style: none; overflow-y: auto; scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior: none; margin-bottom: 0; } .message-board-list ul::-webkit-scrollbar { width: 8px; height: 14px; } .message-board-list ul::-webkit-scrollbar-track { background: transparent; } .message-board-list ul::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .message-board-list ul::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } .message-board-list ul li { display: flex; justify-content: space-between; padding:15px; border-top: 1px solid #F4F9FE; } .message-board-list ul li.active { background-color: #F4F9FE;} .message-board-list ul li:hover { background-color: #F4F9FE;} .message-board-list ul li.new-messages .timestar .time { font-family: 'Inter-Medium'; color: #050F34; } .message-board-list ul li.new-messages .star { display: none !important; } .message-board-list ul li.new-messages .notification { display: flex; background: #42538E; margin-left: auto; width: 25px; height: 25px; justify-content: center; align-items: center; border-radius: 50%; color: #fff; font-family: 'Inter-SemiBold'; font-size: 12px; } .message-board-list ul li .notification { display: none; } .message-board-list ul li .usernamebox { display: flex; flex-direction: column; } .message-board-list ul li .usernamebox h4 { color: #050F34; font-size: 16px; font-family: 'Inter-Regular'; margin-bottom: 5px; width: 225px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .message-board-list ul li .usernamebox p { color: #6E7282; font-size: 12px; font-family: 'Inter-Regular'; margin: 0; width: 225px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .message-board-list ul li .timestar { display: flex; flex-direction: column; align-items: end; } .message-board-list ul li .timestar .time { font-size: 12px; color: #8C9096; font-family: 'Inter-Regular'; } .message-board-list ul li .timestar .star { display: flex; } .message-board-list ul li .timestar .star svg { width: 20px; fill: #FFC107; } .message-board-details-card { width: calc(100% - 325px); position: relative; height: calc(100vh - 65px); } .message-board-details-card .header { height: 80px; border-bottom: 1px solid #EFEFEF; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 25px; position: relative; /*z-index: 9;*/ box-shadow: 0px 4px 8px 0px #0000000D; } .message-board-details-card .header .title h3 { color: #050F34; font-size: 16px; font-family: 'Inter-Bold'; margin: 0 0 5px 0; } .message-board-details-card .header .title p { font-size: 14px; color: #6E7282; font-family: 'Inter-Medium'; margin: 0; } .message-board-details-card .header .timebox { display: flex; flex-direction: column; align-items: end; max-width: 100px; width: 100%; } .message-board-details-card .header .timebox span.makeimportant .unselectstar { width: 20px; display: block; height: auto; } .message-board-details-card .header .timebox span.makeimportant .selectstar { width: 20px; display: none; } .message-board-details-card .header .timebox span.makeimportant a.active .selectstar { display: block; fill:#FFC107; } .message-board-details-card .header .timebox span.makeimportant a.active .unselectstar { display: none; } .message-board-details-card .header .timebox span.time { color:#8C9096; font-size: 12px; font-family: 'Inter-Regular'; margin-top: 5px; } .message-board-details-card .board-message-content { padding: 25px; background-color: #FBFCFD; height: calc(100vh - 145px); overflow-y: auto; scrollbar-color: #D4DDF2 #f5f7fa; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior: none; } .message-board-details-card .board-message-content::-webkit-scrollbar { width: 8px; height: 14px; } .message-board-details-card .board-message-content::-webkit-scrollbar-track { background: transparent; } .message-board-details-card .board-message-content::-webkit-scrollbar-thumb { background: #D4DDF2; border-radius: 14px; } .message-board-details-card .board-message-content::-webkit-scrollbar-thumb:hover { background: #D4DDF2; } .message-board-details-card .board-message-content p { color: #6E7282; font-size: 14px; font-family: 'Inter-Regular'; line-height: 20px; word-break: break-all; } .message-board-details-card .board-message-content h1 span { font-size: 14px !important; font-family: 'Inter-Regular' !important; color: #6E7282 !important; } .message-board-welcome { background-color: #FBFCFD; display: flex; align-items: center; justify-content: center; height: calc(100vh - 65px); } .message-board-welcome .content { display: flex; flex-direction: column; text-align: center; } .message-board-welcome .content h3 { font-size: 22px; font-family: 'Inter-Regular'; color: #6E7282; margin-bottom: 0px; } .message-board-welcome .content h2 { font-size: 24px; color: #050F34; font-family: 'Inter-Bold'; margin-bottom: 0; } .message-board-list #pagination .footer-pagination .message-board-pagination { display: flex; flex-direction: inherit; margin: 0 !important; height: 30px; } .message-board-list #pagination .footer-pagination .message-board-pagination .page-item { padding: 0; } .message-board-list #pagination .footer-pagination .message-board-pagination .page-item.active { background: transparent; padding: 0; } .message-board-list #pagination .footer-pagination .message-board-pagination .page-item:hover { background: transparent; } .message-board-list #pagination .footer-pagination .message-board-pagination .page-link { border-radius: 5px; width: auto; height: auto; padding: 5px 10px; } a.back-message-list { display: none; } /* Message Board Css End*/ /* Header button design changes */ .theme-mode button { border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; border: 1px solid #CDE2F9; top: 0; } .theme-mode button:hover { border-color: #007bff; background: #EFF7FF; } .navbar .call_lead ul { display: flex; align-items: center; column-gap: 5px; } .navbar .call_lead ul li .call_lead_text { display: none; } .navbar .call_lead ul li .screen-share-text { display: none; } .navbar .call_lead ul li { margin: 0; padding: 0 !important; } .navbar .call_lead ul li a { border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; border: 1px solid #CDE2F9; } .navbar .call_lead ul li a:hover { border-color: #007bff; background: #EFF7FF; } .navbar .call_lead ul li a svg, .navbar .call_lead ul li a span { margin: 0 !important; } .navbar .call_lead ul li a.hotkey_hideshow_popup svg path { fill: #167CF2 !important; } .navbar .call_lead ul li a.hotkey_hideshow_popup svg { width: 20px; } /* birthday css */ .birdthdaycelebration { display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; overflow: hidden; /* z-index: 1000; */ } .birdthdaycelebration-piece { position: absolute; width: 10px; height: 30px; background: #ffd300; top: 0; opacity: 0; } .birdthdaycelebration-piece:nth-child(1) { left: 7%; -webkit-transform: rotate(-40deg); -webkit-animation: makeItRain 1000ms infinite ease-out; /* -webkit-animation-delay: 182ms; */ -webkit-animation-duration: 2116ms; } .birdthdaycelebration-piece:nth-child(2) { left: 14%; -webkit-transform: rotate(4deg); -webkit-animation: makeItRain 1000ms infinite ease-out; /* -webkit-animation-delay: 161ms; */ -webkit-animation-duration: 1076ms; } .birdthdaycelebration-piece:nth-child(3) { left: 21%; -webkit-transform: rotate(-51deg); -webkit-animation: makeItRain 1000ms infinite ease-out; /* -webkit-animation-delay: 481ms; */ -webkit-animation-duration: 2103ms; } .birdthdaycelebration-piece:nth-child(4) { left: 28%; -webkit-transform: rotate(61deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 334ms; -webkit-animation-duration: 2708ms; } .birdthdaycelebration-piece:nth-child(5) { left: 35%; -webkit-transform: rotate(-52deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 302ms; -webkit-animation-duration: 2776ms; } .birdthdaycelebration-piece:nth-child(6) { left: 42%; -webkit-transform: rotate(38deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 180ms; -webkit-animation-duration: 3168ms; } .birdthdaycelebration-piece:nth-child(7) { left: 49%; -webkit-transform: rotate(11deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 395ms; -webkit-animation-duration: 1200ms; } .birdthdaycelebration-piece:nth-child(8) { left: 56%; -webkit-transform: rotate(49deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 14ms; -webkit-animation-duration: 2887ms; } .birdthdaycelebration-piece:nth-child(9) { left: 63%; -webkit-transform: rotate(-72deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 149ms; -webkit-animation-duration: 2805ms; } .birdthdaycelebration-piece:nth-child(10) { left: 70%; -webkit-transform: rotate(10deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 351ms; -webkit-animation-duration: 2059ms; } .birdthdaycelebration-piece:nth-child(11) { left: 77%; -webkit-transform: rotate(4deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 307ms; -webkit-animation-duration: 3132ms; } .birdthdaycelebration-piece:nth-child(12) { left: 84%; -webkit-transform: rotate(42deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 464ms; -webkit-animation-duration: 2776ms; } .birdthdaycelebration-piece:nth-child(13) { left: 91%; -webkit-transform: rotate(-72deg); -webkit-animation: makeItRain 1000ms infinite ease-out; -webkit-animation-delay: 429ms; -webkit-animation-duration: 2818ms; } .birdthdaycelebration-piece:nth-child(odd) { background: #7431e8; } .birdthdaycelebration-piece:nth-child(even) { z-index: 1; } .birdthdaycelebration-piece:nth-child(4n) { width: 5px; height: 12px; -webkit-animation-duration: 2000ms; } .birdthdaycelebration-piece:nth-child(3n) { width: 3px; height: 10px; -webkit-animation-duration: 4500ms; -webkit-animation-delay: 1000ms; } .birdthdaycelebration-piece:nth-child(4n-7) { background: red; } @-webkit-keyframes makeItRain { from {opacity: 0;} 50% {opacity: 1;} to {-webkit-transform: translateY(768px);} } /* birthday css End*/ /* added by vinod for screen share */ input#join_meeting_pass { padding-right: 20px; } input#join_meeting_pass + a { font-size: 14px !important; } input#join_meeting_id { padding-right: 30px; } input#join_meeting_id + a { font-size: 14px !important; } /* added by vinod for screen share End*/ /* added by vinod for onmichannel Dashboard */ .omnichannel-content .system-count { display: flex; column-gap: 10px; } .omnichannel-content .card-content { border-radius: 8px; width: 100%; display: flex; flex-direction: column; padding: 20px; } .omnichannel-content .card-content .inbound-outbound-content { display: flex; justify-content: space-between; align-items: center; border-color: #fff !important; } .omnichannel-content .card-content .inbound-outbound-content label { font-size: 18px; font-family: 'Inter-Regular'; color: #050F34; margin: 0; } .omnichannel-content .card-content .inbound-outbound-content span.count { font-size: 18px; font-family: 'Inter-Bold'; color: #050F34; } .omnichannel-content .card-content h2 { font-size: 18px; color: #050F34; font-family: 'Inter-Bold'; border-color: #fff !important; } .omnichannel-content .card-content .total { display: flex; justify-content: space-between; align-items: center; border-color: #fff !important; } .omnichannel-content .card-content .total label { font-size: 18px; font-family: 'Inter-Bold'; margin: 0; } .omnichannel-content .card-content .total span.total-count { font-size: 18px; font-family: 'Inter-Bold'; } .omnichannel-content .call-status { border:1px solid #6C5CE7; background: #F7F6FF; } .omnichannel-content .call-status .total label, .omnichannel-content .call-status span.total-count { color: #6C5CE7; } .omnichannel-content .sms-status { border:1px solid #00CEC9; background: #F4FFFF; } .omnichannel-content .sms-status .total label, .omnichannel-content .sms-status span.total-count { color: #00CEC9; } .omnichannel-content .email-status { border:1px solid #E17055; background: #FFFAF9; } .omnichannel-content .email-status .total label, .omnichannel-content .email-status span.total-count { color: #E17055; } .omnichannel-content .whatsapp-status { border:1px solid #27AE60; background: #F3FFF8; } .omnichannel-content .whatsapp-status .total label, .omnichannel-content .whatsapp-status span.total-count { color: #27AE60; } .omnichannel-content .chat-status { border:1px solid #8E44AD; background: #FCF3FF; } .omnichannel-content .chat-status .total label, .omnichannel-content .chat-status span.total-count { color: #8E44AD; } #omni-dashboard-graphical-stats { width: 100% !important; height: 400px !important; } .videoshar-icon svg { color: var(--button); } /* added by vinod for onmichannel Dashboard End*/ /* video call dropdown */ .videocall-dropdown { display: none; } .videocall-dropdown.show { display: flex; right: 20px; left: inherit; max-width: 370px; width: 100%; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); border: 0; padding: 15px 0; flex-direction: column; border-radius: 10px; } .videocall-dropdown .buttons-card { display: flex; column-gap: 10px; justify-content: center; align-items: center; } .videocall-dropdown .buttons-card a { font-family: 'Inter-medium'; font-size: 12px; padding:8px 10px; border: 1px solid transparent; border-radius: 5px; } .videocall-dropdown .buttons-card a.whatsapp { background: #e1ffec; color: #25d366; } .videocall-dropdown .buttons-card a.whatsapp:hover { border:1px solid #25d366; } .videocall-dropdown .buttons-card a.email { background: #fdf1e6; color: #f0790b; } .videocall-dropdown .buttons-card a.email:hover { border:1px solid #f0790b; } .videocall-dropdown .buttons-card a.sms { background: #EBF8FF; color: #0086CA; } .videocall-dropdown .buttons-card a.sms:hover { border: 1px solid #0086CA; } .videocall-dropdown .form-group { max-width: 215px; width: 100%; position: relative; } .videocall-dropdown .form-group .form-control { box-shadow: none; height: 32px; padding-right: 60px; } .videocall-dropdown .form-group .copylink { position: absolute; right: 8px; top: 9px; font-size: 10px !important; } .videocall-dropdown button#onclickshare { background: transparent; border: 0; opacity: 0.5; } .videocall-dropdown button#onclickshare:hover { opacity: 1; } .videocall-dropdown button#onclickvideocallclose { background: transparent; border: 0; opacity: 0.5; } .videocall-dropdown button#onclickvideocallclose:hover { opacity: 1; } /* added new css for video call : 11-03-2024 */ .videocall-dropdown .customtab .nav-tabs { background: transparent; border-bottom: 1px solid #f4f4f4; } .videocall-dropdown .videocall-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .videocall-dropdown .videocall-hdr h4 { font-family: 'Inter-SemiBold'; font-weight: 600; font-size: 14px; margin: 0; } input#video_join_meeting_pass { padding-right: 20px; } input#video_join_meeting_pass + a { font-size: 14px !important; } input#video_join_meeting_id { padding-right: 30px; } input#video_join_meeting_id + a { font-size: 14px !important; } /* video call dropdown End*/ /* for header */ .top-hdr-menu .nav-link .icon { display: none; } .agent .navbar .header-left { display: flex; align-items: center; } /* for header End */ /* dispo comment css */ #DispoCommentsContent table { width: 100%; } .dispo_comments { display: flex; flex-direction: column; width: 100%; } #DispoCommentsContent { display: flex; } /* dispo comment css End*/ /* Ticket */ #ticket_iframe { width: 100%; height: calc(100vh - 65px); border: 0; } #ticketingIFrame { width: 100%; height: calc(100vh - 65px); border: 0; } /* ticket End */ /* InComming Popup for on hook css start*/ .callanswer { max-width: 240px; width: 100%; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); background: #fff; border-radius: 5px; padding: 15px 15px 25px 15px; position: fixed; right: -240px; z-index: 999; opacity: 0; border: 1px solid #DFFFEE; } .callanswer .answer-header { border-bottom: 1px solid #f4f4f4; margin-bottom: 15px; } .callanswer .answer-header h4 { font-size: 14px; font-family: 'Inter-Medium'; display: flex; justify-content: center; color: #050F34; text-transform: uppercase; padding-bottom: 10px; margin: 0; } .callanswer .callanswer-content { display: flex; column-gap: 10px; justify-content: center; align-items: center; } .callanswer.active { opacity: 1; display: block; transition: right 0.5s; right: 15px; top: 60px; } .callanswer .answer-button { background-color: #00BC57; border-color: #00BC57; } .callanswer .answer-button:hover { background-color: #DEFFEB; border-color: #DEFFEB; color: #00BC57; } .callanswer .cancel-button { background-color: #FF4D00; border-color: #FF4D00; } .callanswer .cancel-button:hover { background-color: #FFEDE3; border-color: #FFEDE3; color: #FF4D00; } /* InComming Popup for on hook css END*/ /* Added full name for whatsapp css start */ .whatsapp-content .sms-area .sendsms .customername { margin: 5px 0 0 0; font-size: 12px; color: #8C9096; position: relative; padding-right: 0px; } /* .whatsapp-content .sms-area .sendsms .customername::before { width: 5px; height: 5px; content: ''; background: #8C9096; position: absolute; right: 0; top: 5px; border-radius: 50%; } */ .time-view-status-info { display: flex; justify-content: flex-end; align-items: center; column-gap: 10px; } .time-view-status-info .msg_status span { font-size: 13px; } /* Added full name for whatsapp css End */ /* collection Module accordion */ .collection-tabs .nav-tabs { border: 0; column-gap: 5px; } .collection-tabs .nav-tabs .nav-link { border-color:#9DA4B5; color: #40465E; border-radius: 5px; background-color: #fff; font-family: 'Inter-Regular'; } .collection-tabs .nav-tabs .nav-link.active { border-color:#0F78F2; background: #0F78F2; color: #fff; border-bottom-width:1px; font-family: 'Inter-Regular'; } .collection-tabs .nav-tabs .nav-link:hover { border-bottom-width:1px; } .collection-sub-tabs .nav-tabs { border: 0; column-gap: 25px; background: #fff; margin: 10px 0 5px 0; padding: 1px 15px; } .collection-sub-tabs .nav-tabs .nav-item { margin: 0; margin-left: 0px; } .collection-sub-tabs .nav-tabs .nav-link { border: 0; border-bottom:2px solid transparent; color: #40465E; border-radius: 0px; background-color: #fff; font-family: 'Inter-Regular'; padding: 15px 0; } .collection-sub-tabs .nav-tabs .nav-link.active { border-bottom: 2px solid #FFAA05; background: transparent; font-family: 'Inter-SemiBold'; color: #050F34; } .collection-sub-tabs .nav-tabs .nav-link:hover { border-bottom-width:2px; } .collection-sub-tabs .card-header button { width: 100%; text-align: left; padding:15px; border-radius: 8px; border: 1px solid #D1E6FF; font-family:'Inter-Bold'; color: #0F78F2; font-size: 18px; display: flex; align-items: center; } .collection-sub-tabs .card-header button[aria-expanded="true"]{ background-color: #F9FCFF; border-radius: 8px 8px 0px 0px; color: #050F34; } .collection-sub-tabs .card-header button[aria-expanded="false"]{ background-color: #fff; transition: 0.5s ease-in; transform: rotate(0deg); } .collection-sub-tabs .card-header button:focus{ box-shadow: none; } .collection-sub-tabs .card-header button[aria-expanded="true"] svg { transform: rotate(180deg); transition: 0.5s all ease; } .collection-sub-tabs .card-header button[aria-expanded="false"] svg { transform: rotate(0deg); transition: 0.5s all ease; } .collection-sub-tabs .card { border-radius: 8px ; border: 0; background-color: transparent; } .collection-sub-tabs .tab-pane .card-header { border-radius: 8px 8px 8px 8px; margin-bottom: 0; background-color: #fff; padding: 0; border: 0; } .collection-sub-tabs .card-body { border-radius: 0 0 8px 8px; background-color: #fff; } .collection-sub-tabs .form-control:disabled, .form-control[readonly] { background-color: #F2F5FF; opacity: 1; } .button-column { display: flex; column-gap: 5px; } .button-column .dialbutton { background-color: #0F78F2; color: #fff; border: 1px solid #0F78F2; width: 40px; border-radius: 5px; transition: 0.5s all; } .button-column .dialbutton:hover { color: #0F78F2; background-color: #fff; } .button-column .dialbutton svg { transform: rotate(90deg); } .collection-content .card { border: 0; border-radius: 0; } .collection-content .collection-sub-tabs .column-control { padding: 0 7px; } .collection-content .collection-sub-tabs .column-control label { font-size: 14px; } .collection-content .outbound-text { position: relative; font-family: 'Inter-Medium'; font-size: 14px; color: #636FE1; padding-left: 12px; } .collection-content .outbound-text::before { background: #636FE1; width: 6px; height: 6px; content: ''; position: absolute; top: 5px; left: 0; border-radius: 50%; } .collection-content .send_dtmf { display: flex; position: relative; } .collection-content .send_dtmf .form-control { padding: 9px 12px; width: 130px; height: 35px; border-color: #A0A8C8; font-size: 14px; } .collection-content .send_dtmf .send { position: absolute; right: 1px; padding: 5px 10px 0 10px; top: 1px; bottom: 1px; background: #fff; border-radius: 0 5px 5px 0; } .collection-content .collection-filter { display: flex; align-items: center; column-gap: 5px; } .collection-content .collection-filter .dialpad button { border: 1px solid #0F78F2; background-color: #fff; color: #0F78F2; border-radius: 5px; width:35px; height: 35px; transition: 0.5s; } .collection-content .collection-filter .dialpad button path { fill: #0F78F2; } .collection-content .collection-filter .dialpad button:hover { background-color:#0F78F2; } .collection-content .collection-filter .dialpad button:hover path { fill: #fff; } .collection-content .collection-filter .search-filter { display: flex; align-items: center; column-gap: 5px; } .collection-content .collection-filter .search-filter .search-button button { border: 1px solid #0F78F2; background-color: #0F78F2; color: #fff; border-radius: 5px; width:35px; height: 35px; transition: 0.5s; } .collection-content .collection-filter .search-filter .search-button button:hover { background-color:#fff; color: #0F78F2; } .collection-content .collection-filter .search-filter .search-content { display: flex; border: 1px solid #8391C6; border-radius: 5px; } .collection-content .collection-filter .search-filter .search-content .form-control { border: 0; border-radius: 0; height: 35px; font-size: 14px; font-family: 'Inter-Medium'; } .collection-content .collection-filter .search-filter .search-content .form-control:focus { box-shadow: none; } .collection-content .collection-filter .search-filter .search-content select.form-control { border-radius: 5px 0 0 5px; border-right: 1px solid #8391C6; width: 150px; background-color: #F9FCFF; } .collection-content .collection-filter .search-filter .search-content input.form-control { border-radius: 0px 5px 5px 0px; width: 180px; color: #050F34; } .collection-content .collection-table th { background-color: #F4F9FE; font-size: 14px; color: #6E7282; font-family: 'Inter-Medium'; border-bottom: 0; border-color: #EFEFEF; } .collection-content .collection-table td { font-size: 14px; font-family: 'Inter-Regular'; color: #050F34; border-color: #EFEFEF; border-color: #EFEFEF; } .collection-content .collection-table .no-data-available { background-color: #F6F6F6; } .collection-content .modifyfooter { background: #FFFFFF; box-shadow: 0px -4px 11px rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 20px; margin-top: 10px; position: sticky; bottom: 0px; height: 58px; display: flex; justify-content: space-between; align-content: center; align-items: center; } .collection-content .modifyfooter .default_btn2:hover { color: #0F78F2; } .collection-sub-tabs .card-header { background: transparent; padding: 0; margin-bottom: 0 !important; border: 0; } /* .collection-content .collection-sub-tabs .column-control #Remarks { height: 35px; } .collection-content .collection-sub-tabs .column-control #Remarks:focus { height: 65px; position: absolute; top: 0; z-index: 1; } .customer-info .callcard textarea.form-control { height: 35px; } .customer-info .callcard textarea.form-control:focus { position: absolute !important; top: 0; z-index: 1; height: 35px; } */ /* textarea { resize: both; } */ /* collection Module accordion End*/ /* add animation on sidebar icons css */ .socialicon a:hover img { animation:iconUpDown 1s linear infinite; } #sidebar ul li a:hover img { animation:iconUpDown 1s linear infinite; } @keyframes iconUpDown{ 0%,100%{ transform:translateY(3px) } 50%{ transform:translateY(-3px) } } @keyframes moveRight { 0%{ opacity: 0; transform: translatex(-100px); } 80%{ transform: translatex(10px); } 100%{ opacity:1; transform: translatex(0); } } .today-calls-card .card-box { transition: all .5s; border: 1px solid transparent; } .today-calls-card .card-box:hover { transition: all .5s; transform: translateY(-5px); } .today-calls-card .card-box:hover .content p { color: var(--Primary); } .total-call.card-box:hover { background: #e8f6ff; border: 1px solid var(--button); } .total-call.card-box:hover .content p {border-bottom: 1px solid #d3efff;} .Connected.card-box:hover { background: #dcf4e5; border: 1px solid #00bc57; } .Connected.card-box:hover .content p {border-bottom: 1px solid #DEFFEB;} .not-connected.card-box:hover { background: #fff4ee; border: 1px solid #ff4d00; } .not-connected.card-box:hover .content p {border-bottom: 1px solid #FFEDE3;} .fresh-lead.card-box:hover { background: #fff5fa; border: 1px solid #d9227a; } .fresh-lead.card-box:hover .content p {border-bottom: 1px solid #ffe9f3;} .total-lead.card-box:hover { background: #f8f6ff; border: 1px solid #6541f2; } .total-lead.card-box:hover .content p {border-bottom: 1px solid #f1edff;} /* Omnichannel boxes */ .omnichannel-content .card-content { position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); } .omnichannel-content .card-content:hover { transform: translateY(-5px); } .omnichannel-content .card-content:hover::before { opacity: 1; transform: translateY(5px); } .omnichannel-content .card-content::before { pointer-events: none; position: absolute; z-index: -1; content: ""; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); transition-duration: 0.3s; transition-property: transform opacity; } /* message board */ .message-board-welcome img { animation:iconUpDown 1s linear infinite; } /* header top icon */ .navbar .call_lead ul li a span { transition: all 0.8s; } .navbar .call_lead ul li a:hover span { transform: rotateY(360deg);} .navbar #darklight-mode span { transition: all 0.8s; } .navbar #darklight-mode:hover span { transform: rotateY(360deg);} /* add animation on sidebar icons End */ /* custom form (collection) tabs css start*/ #form_custom_fields { padding: 0; /*background-color: #F9FAFF !important;*/ /*border: 1px solid #CDD6FF;*/ } /* #mainform .customtab .nav-link.active, #mainform .nav-link:hover { color:var(--themecolor); } #form_custom_fields .cf_column textarea.form-control { height: 35px; } #form_custom_fields .cf_column textarea.form-control:focus { height: auto !important; position: absolute; top: 0; transition:all ease-in 0.5s; } */ /* custom form (collection) tabs css End*/ /* Css for sophone status start */ .sophone-status { display: flex; align-items: center; border: 1px solid; border-radius: 5px; width: calc(100% - 20px); margin: 0 10px; } .sophone-status span.status-img { height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; } .sophone-status span.status-img path { fill: #fff; } .sophone-status p { color: #fff; padding-left: 15px; font-size: 16px; font-family: 'Inter-Medium'; } .sophone-status.connected { border-color:#00BC57 !important; } .sophone-status.connected span.status-img { background-color: #00BC57; border-radius: 4px 0 0 4px; } .sophone-status.notconnected { border-color:#F57373 !important; } .sophone-status.notconnected span.status-img { background-color: #F57373; border-radius: 4px 0 0 4px; } .sophone-status.registered { border-color:#D6A528 !important; } .sophone-status.registered span.status-img { background-color: #D6A528; border-radius: 4px 0 0 4px; } .sophone-status.ring { border-color:#E1783D !important;cursor: pointer; } .sophone-status.ring span.status-img { background-color: #E1783D; border-radius: 4px 0 0 4px; } .sophone-status.unregistered { border-color:#F57373 !important; } .sophone-status.unregistered span.status-img { background-color: #F57373; border-radius: 4px 0 0 4px; } body.active .sophone-status { border: 0; flex-direction: column; } body.active .sophone-status p { font-size: 10px; padding: 0; } body.active .sophone-status .status-img { border-radius: 50%; width: 30px; height: 30px; margin-bottom: 5px; } /* Css for sophone status End*/ /* Vinod Kushwah - 15-July-2024 - Add css for dashboard call log hide show. */ #time-stats-column.timestatscolumn { max-width: 100%; flex: 100%; } /* Vinod Kushwah End */ #maincontent.agent-main-content { width: calc(100% - 217px); } body.active #maincontent.agent-main-content { width: calc(100% - 85px); } .middle-content.live-section-enable .main-tab-content { width: calc(100% - 140px); } /* Css for sophone status End*/ /* login page alert css */ .alert.custom-danger-alert { background: transparent; padding: 0; } .alert.custom-danger-alert .alert-content { display: flex; } .alert.custom-danger-alert .alert-content p { font-family: 'Inter-Regular'; color:var(--Primary); font-size: 14px; line-height: 20px; text-align: left; padding: 0 20px; } .alert.custom-danger-alert .alert-icon { margin: 0 0 10px 0; display: flex; justify-content: center; fill: #c64954; } .alert.custom-danger-alert .link-btn { border-radius: 60px; margin-top: 15px; border: 1px solid #ffeaec; max-width: 290px; margin-left: auto; margin-right: auto; width: 100%; } .alert.custom-danger-alert .link-btn:hover { background:#E5F1FF; color: var(--button); border-color:#E5F1FF; } /* Login page alert css end */ /* payment utility css*/ .paymentutility-list-button { position: absolute; right: 16px; z-index: 1; top: 16px; background: linear-gradient(270.56deg, #EDEDF7 0.45%, rgba(224, 224, 224, 0) 112.36%, rgba(237, 237, 246, 0) 112.36%); display: flex; justify-content: end; padding: 8px 10px 8px 0; width: 90px;} .paymentutility-list-button button { padding: 0; width: 20px; height: 20px; font-size: 20px; display: flex; align-content: center; justify-content: center; line-height: 15px; border-radius: 500%; } .paymentutility-list-button button:focus { box-shadow: none; } .paymentutility-list-button .dropdown-menu { width: 100%; max-width: 240px; border: 0; margin-bottom: 0; top: 35px !important; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); border-radius: 5px; min-width: 240px; padding: 10px; right: 0; left: inherit; max-height: 210px; overflow-y: auto; } .paymentutility-list-button .dropdown-menu li { margin:5px 0; } .paymentutility-list-button .dropdown-menu li label { font-family: 'Inter-SemiBold'; color: #6E7282; font-family: 'Inter-Regular'; font-size: 14px; } .paymentutility-list-button .tablecheck label { color: #6E7282; font-family: 'Inter-Regular';} .paymentutility-list-button .tablecheck input:checked+label { color: #050F34;} .paymentutility-list-button .tablecheck label::before { margin-right: 5px;} .paymentutility-list-button .tablecheck input:checked+label::after { top: 2px; left: 5px; width: 4px; height: 9px; border-width: 0 1px 1px 0;} .paymentutility-list-button .tablecheck input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none !important; cursor: pointer} .paymentutility-list-button .tablecheck { display: inline-block; position: relative; z-index: 1; } .paymentutility-list-button .tablecheck label { display: flex; align-items: center; margin: 0; position: relative; cursor: pointer; font-size: 14px; color: #868381; font-family: 'Inter-Medium';} .paymentutility-list-button .tablecheck label:before { content: ''; -webkit-appearance: none; background-color: transparent; border-radius: 3px; border: solid 1px #8391C6; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; width: 14px; height: 14px;} .paymentutility-list-button .tablecheck input:checked+label:after { content: ''; display: block; position: absolute; top: 4px; left: 5px; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg)} .paymentutility-list-button .tablecheck input:checked+label::before { background: var(--button); border: 1px solid var(--button);} /* payment utility css End*/