body {
	margin: 0;
	padding: 0;
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p,
figure,
img {
	padding: 0;
	margin: 0;
}
.current-call-details-content ul {
    padding-left: 0;
}

h1 {
	font-size: 25px;
}

.saleforce-section-start {
	padding: 10px 0;
	background-color: #E3ECFD;
	width: 100%;
	height: auto;
	position: relative;
	background-image: url(images/bg-33.jpg);
	top: 6px;
}
/*.saleforce-section-start::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
}*/

.saleforce-left-side {
	height: 570px;
/*
	overflow: auto;
	overflow-x: hidden;*/
	    /*background: url(../images/bg-45.jpg);*/
    background-size: cover;
    background: #fff;
    box-shadow: 0 0px 3px rgb(0 0 0 / 50%);
    border-radius: 7px;
}

.customer-information {
    height: 505px;
    overflow: auto;
    overflow-x: hidden;
}



.saleforce-tab {
	height: 250px;
	overflow: auto;
	overflow-x: hidden;
	position: relative;
}

.admin-details {
	text-align: center;
	position: relative;/*
	background-color: #fff;*/
	padding: 20px 10px;
	box-shadow: 0 0px 3px rgb(0 0 0 / 50%);
	border-radius: 5px;/*
	background-image: url(../images/bg-19.jpg);*/
	background-size: cover;
}

.admin-details img.logo-img {
	width: 150px;
}

.logout-button h1{
	    font-size: 25px;
}

.admin-details ul {
	margin-top: 10px;
}

.admin-details ul li {
	display: inline-block;
}

.admin-details ul li svg {
	width: 20px;
}

.admin-details ul li span {
	font-weight: 500;
	padding-top: 5px;
	display: inline-block;
	font-style: italic;
}

.logout-button {
	position: absolute;
	top: 10px;
	right: 10px;
}

.logout-button a {
	color: #000;
	text-decoration: none;
	font-weight: 600;
}

.logout-button .logout-btn span {
	color: #000;
	margin-left: 5px;
}

.current-call-details {
	margin: 10px 0;
	padding: 20px 10px;/*
	box-shadow: 0 0px 3px rgb(0 0 0 / 50%);*/
	border-radius: 5px;
	background-size: cover;
	position: relative;
}

.current-call-details h4{
	color: #000;
}

/*.current-call-details::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	top: 0;
	left: 0;
	z-index: -1;
}*/

h4 {
	font-size: 18px;
	color: #00467A;
	text-align: center;
	padding-bottom: 10px;
}

.current-call-details-content ul li {
	padding: 10px 2px;
	background-color: #F0F8FF;
	border: 1px solid #88c8ff4f;
	display: flex;
	align-items: center;
	justify-content: left;
	margin: 10px 0;
	border-radius: 5px;
}

.current-call-details-content ul li span {
	font-size: 12px;
	padding-left: 4px;
}

.call-Statistics {
	margin: 10px 0;
	padding: 20px 10px;/*
	box-shadow: 0 0px 3px rgb(0 0 0 / 50%);*/
	border-radius: 5px;
	background-size: cover;
}

.call-Statistics h4{
	color:#000;
}

.call-Statistics-content span {
	font-size: 12px;
	padding: 5px;
	background-color: #fff;
	 
	align-items: center;
	justify-content: left;
	margin: 5px 0;
	padding-left: 5px;
	border-radius: 5px;
}

.call-Statistics-content span strong {
	padding-left: 3px;
}

.call-buttons {
	background-color: #fff;
	padding: 15px;
	box-shadow: 0 0px 3px rgb(0 0 0 / 50%);
	border-radius: 5px;
	margin: 10px 0;
}

.customer-page-right-buttons {
	margin: 5px 0;
}

.customer-page-right-buttons a {
	text-decoration: none;
	color: #000;
	font-weight: 400;
}

.customer-page-right-btn {
	background-color: #fff;
	border-radius: 5px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 80px;
	height: 35px;
}

.customer-page-right-btn strong {
	font-weight: 500;
	font-size: 11px;
}

.customer-page-right-btn {
	transition: 0.2s;
}


.customer-page-right-btn.customer-page-right-btn-button {
	padding-top: 14px;
}

.customer-page-right-btn.customer-page-right-btn-4 {
	background-color: #ff5d35;
	color: #fff;
}

.customer-page-right-btn.customer-page-right-btn-5 {
	background-color: #ff5d35;
	color: #fff;
}

.customer-page-right-btn.customer-page-right-btn-5 span {
	display: none;
	margin-right: 5px;
	font-size: 12px;
}

.customer-page-right-btn.customer-page-right-btn-5:focus.customer-page-right-btn.customer-page-right-btn-5 span {
	display: inline-block;
}
#myModal1{
	padding-top: 30px;
}
#myModal1 .modal-content{
	width: 75%;
}

.customer-page-right-btn.customer-page-right-btn-6 {
	background-color: #ff5d35;
	color: #fff;
}

.customer-page-right-btn.customer-page-right-btn-6 span {
	display: none;
	margin-right: 5px;
	font-size: 12px;
}

.customer-page-right-btn.customer-page-right-btn-6:focus.customer-page-right-btn.customer-page-right-btn-6 span {
	display: inline-block;
}
.customer-page-right-btn.customer-page-right-btn-7 {
	color: #fff;
	background-color: #3c8dbc;
}

.customer-page-right-btn.customer-page-right-btn-8 {
	color: #fff;
	background-color: #3c8dbc;	
}

.customer-page-right-btn.customer-page-right-btn-9 {
	color: #fff;
	background-color: #3c8dbc;
}

.customer-page-right-btn.customer-page-right-btn-10 {
	color: #fff;
	background-color: #137d13;
}

.customer-page-right-btn.customer-page-right-btn-11 {
	background-color: #137d13;
	color: #fff;
}

.customer-page-right-btn.customer-page-right-btn-12 {
	background-color: #137d13;
	color: #fff;
}

.customer-page-right-btn.customer-page-right-btn-13 {
	background-color: #b8860b;
	color: #fff;
}

.customer-page-right-btn.customer-page-right-btn-14 {
	background-color: #b8860b;
	color: #fff;
	font-size: 11px;
}

.customer-page-right-btn.customer-page-right-btn-15 {
	background-color: #b8860b;
	color: #fff;
	font-size: 11px;
}
.customer-page-right-btn.customer-page-right-btn-20 {
	background-color: #d82dcbc9;
	color: #fff;
	font-size: 11px;
}

/*.customer-information::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
}
*/


.customer-information h2 {
	font-size: 25px;
	color: #fff;
}

.form-group textarea {
	resize: none;
}

.customer-information-button {
	text-align: right;
	padding-top: 25px;
}

.customer-information-btn {
	display: inline-block;
	background-color: #8468FB;
	padding: 10px 60px;
	border: none;
	color: #fff;
	border-radius: 15px;
	transition: 0.3s;
}

.customer-information-btn:hover {
	background-color: #4d2ef7;
}

.customer-information form {
	padding-top: 7px;
}

.sidenav .closebtn {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 28px;
	margin-left: 50px;
}

a.img-btn img {
	width: 100%;
	margin-left: -30px;
}

.sidenav {
	padding-top: 8px;
}

.customer-information {
  /*  background-color: #fff;*/
    padding: 15px;
    border-left: 3px solid #8275E7;
    border-radius: 3px;
    box-shadow: 0 5px 15px rgb(0 0 0 / 35%);
}

.customer-information .form-control {
    font-size: 14px;
    padding: 13px;
    background: transparent;
    color: #000;
    font-weight: 700;
}
.customer-information .form-group label {
    display: inline-block;
    margin-bottom: 0;
    color: #4f4f4f;
    font-size: 15px;
}
.customer-information input[type=date], .customer-information input[type=datetime-local], .customer-information input[type=email], .customer-information input[type=number], .customer-information input[type=password], .customer-information input[type=search-md], .customer-information input[type=search], .customer-information input[type=tel], .customer-information input[type=text], .customer-information input[type=time], .customer-information input[type=url], .customer-information textarea.md-textarea{
	height: 0 !important;
	    border-radius: 5px;
    border-color:#928c8c47;
    width: -webkit-fill-available;
}
.customer-information select.form-control:not([size]):not([multiple]){
	height: 0;
}

.customer-information input::placeholder {
	color: #ffffffb0;
	font-weight: 500;
}

select#inputState {
	background-color: transparent;
}

.customer-information input {
	margin-bottom: 10px;
}

.customer-information input:focus {
	outline: none;
	box-shadow: none;
	border-bottom: 1px solid red;
}

.form-group {
	margin-bottom: 0;
}

.customer-information select:focus {
	box-shadow: none;
	outline: none;
}

.sidenav a {
	font-size: 16px;
}

label {
	font-weight: 500;/*
	color: #000;*/
}
.customer-information label{
	margin-bottom: 0;
}

/* Style the tab */
/*.saleforce-tab .tab {
	overflow: hidden;
    background-size: cover;
    background-position: center;
    margin-top: 20px;
    background-color: #fff;
}*/

.tab{
	    overflow: hidden;
    background-color: #fff;
    margin-top: 20px;
    box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
    border: 2px solid #cacacae6
}


/* Style the buttons inside the tab */

.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 17px 0;
	transition: 0.3s;
	font-size: 17px;
	font-weight: 600;
	width: 20%;
}

button.tablinks {
	border-right: 1px solid #ffffff38;
}

.tablinks a{
font-size: 14px;
}

/* Change background color of buttons on hover */

.tab button:hover {
	background-color:#363b3c2e;
}


/* Create an active/current tablink class */

.tab button.active {
	background-color: #363b3c2e;
	color: #000;
}

.tab button {
	color: #000;
	font-size: 14px;
}


/* Style the tab content */

.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	height: 160px;
}

.tabcontent h3{
	color: #fff;
}

.tabcontent p{
	color: #fff;
}



/* width */

.saleforce-left-side::-webkit-scrollbar {
	width: 10px;
}


/* Track */

.saleforce-left-side::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}


/* Handle */

.saleforce-left-side::-webkit-scrollbar-thumb {
	background: #6c757d;
	border-radius: 10px;
}
.customer-information::-webkit-scrollbar {
	width: 10px;
}


/* Track */

.customer-information::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}


/* Handle */

.customer-information::-webkit-scrollbar-thumb {
	background: #6c757d;
	border-radius: 10px;
}


/* Handle on hover */


/*::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}*/


/* The Modal (background) */

.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	padding-top: 100px;
	/* Location of the box */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}


/* Modal Content */

.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 60%;
}


/* The Close Button */

.pause-code-section .close{
	position: inherit;
}

.close {
	    color: #ff0000b5 !important;
	float: right;
	font-size: 45px !important;
	font-weight: bold;
	height: 0;
	position: absolute;
    right: 10px;
    top: 0;		

}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.customer-page-right-btn.customer-page-right-btn-4:focus {
	background-color: #000;
}


/*Selection Of Text CSS Start*/

::selection {
	background-color: rgba(46,165,204,0.41);
}


/*Selection Of Text CSS End*/


/*LogOut Button Inner Page Css Start*/


/* Float cancel and delete buttons and add an equal width */

.logout-button .clearfix .cancelbtn,
.deletebtn {
	width: 35%;
	height: 40px;
	border: none;
}


/* Add a color to the cancel button */

.cancelbtn {
	background-color: #ccc;
	color: black;
}


/* Add a color to the delete button */

.deletebtn {
	background-color: #1877f2;
	color: #fff;
	font-weight: 500;
}


/* Add padding and center-align text to the container */


/* The Modal (background) */

.modals {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: #474e5d;
	padding-top: 50px;
}


/* Modal Content/Box */

.modal-content {
	background-color: #fefefe;
	margin: 5% auto 15% auto;
	/* 5% from the top, 15% from the bottom and centered */
	border: 1px solid #888;
	width: 60%;

	/* Could be more or less, depending on screen size */
}


/* Style the horizontal ruler */

hr {
	border: 1px solid #f1f1f1;
	margin-bottom: 25px;
}


/* The Modal Close Button (x) */

.modals .closes {
	position: absolute;
	right: 35px;
	top: 15px;
	font-size: 40px;
	font-weight: bold;
	color: #f1f1f1;
}

.modals .closes:hover,
.modals .closes:focus {
	color: #f44336;
	cursor: pointer;
}


/* Clear floats */

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.logout-button .modals {
	background-color: #474e5d78;
}

.logout-button .modal-content {
	width: 35%;
}

.logout-button .modal-content p {
	padding-top: 7px;
	font-size: 14px;
}

.logout-button .clearfix {
	margin-top: 15px;
}

.logout-button .clearfix .cancelbtn,
.deletebtn {
	width: 35%;
	height: 40px;
}


/* Change styles for cancel button and delete button on extra small screens */

@media screen and (max-width: 300px) {
	.cancelbtn,
	.deletebtn {
		width: 100%;
	}
}


/*LogOut Button Inner Page Css End*/


/*Load Page Popup Css Start*/

.page-load-popup .modal-content {
	margin: 0 auto;
	padding: 0;
}

.page-load-popup .modal-header {
	padding: 10px 1rem;
}

.modal-body {
	background-color: #f3f4f5;
}

.modal-body-left {
	border: 1px solid #ddd;
	margin-left: 15px;
}

.modal-body-right {
	border: 1px solid #ddd;
	border-left: none;
	margin-right: 15px;
}

.modal-body-heading {
	border-bottom: 1px solid #ddd;
	background-color: #f3f4f5;
}

.modal-body-heading h5 {
	padding-left: 10px;
	text-transform: uppercase;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px 0;
}

.modal-body-left-content {
	min-height: 180px;
	background-color: #fff;
	padding-left: 10px;
	transition: 0.3s;
}

.modal-body-left-content a.modal-add-call {
	padding: 5px 10px;
	display: inline-block;
	text-decoration: none;
	background-color: #00a700;
	margin: 10px 0;
	color: #fff;
	transition: 0.3s;
}

.modal-body-left-content a.modal-add-call span {
	font-size: 15px;
}

.modal-add-call strong {
	font-weight: 400;
	display: none;
	transition: 0.3s;
	padding-left: 5px;
}

.modal-body-left-content a.modal-add-call:hover.modal-add-call strong {
	display: inline-block;
}

h6.modal-title {
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	margin: auto;
}

.modal-body-right-content {
	min-height: 180px;
	background-color: #fff;
	padding-left: 10px;
}

.modal-dialog {
	max-width: 60%;
	margin: 0 auto
}

.modal-backdrop.show {
	opacity: .5;
	z-index: 0;
}

.no-padding {
	padding: 0 !important;
	margin: 0 !important;
}

.modal-header.bottom {
	justify-content: center;
}

.modal-header.bottom a {
	text-decoration: none;
}

.modal-header-reset {
	margin-right: 5px;
	color: red !important;
	border: 1px solid red;
	border-radius: 20px;
	width: 80px;
	height: 30px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
	font-size: 14px;
}

.modal-header-reset strong {
	font-weight: 400;
	display: none;
	transition: 0.5s;
	padding-left: 5px;
}

.modal-header-reset:hover.modal-header-reset strong {
	display: inline-block;
	transition: 0.5s;
}

.modal-header-submit {
	margin-left: 5px;
	color: #1664f1 !important;
	border: 1px solid #1664f1;
	border-radius: 22px;
	width: 80px;
	height: 30px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.modal-header-submit strong {
	font-weight: 400;
	display: none;
	transition: 0.5s;
	padding-left: 5px;
}

.modal-header-submit:hover.modal-header-submit strong {
	display: inline-block;
	transition: 0.5s;
}


/*Load Page Popup Css End*/


.tab a{
	color: #000;
	text-decoration: none;
}
.history-btn{
	padding: 15px 0;
	color: #000;
	font-weight: 600;
	width: 24%;
	display: inline-block;
	text-align: center;
	height: auto;
	font-size: 14px;
}
.history-btn:hover{
	background-color: #363b3c2e;
	color: #000;
}
.company-heading{
	text-align: center;
}
.company-heading h2 span{
	color: #ff00008c;
}



/*Main Style CSS End*/

  /*Chat Client 1st Screen Css Start*/
/*==============================================================================================================================*/
    .sunny-morning-gradient {
        background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
    }
    .mean-fruit-gradient {
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    }
    .btn-danger:not([disabled]):not(.disabled).active, .btn-danger:not([disabled]):not(.disabled):active, .show>.btn-danger.dropdown-toggle  {
                            box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
                        }
    .bc-icons .breadcrumb-item + .breadcrumb-item::before {
        content: none; }
    .bc-icons .breadcrumb-item.active {
        color: #eeeeee; }
    
    .bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
        content: none; } 
    .bc-icons-2 .breadcrumb-item.active {
        color: #455a64; } 
    
    
    .light-font .breadcrumb-item + .breadcrumb-item::before {
        color: #fff; }
    .light-font .breadcrumb-item.active {
        color: #cfd8dc; }
    
    .dark-font .breadcrumb-item + .breadcrumb-item::before {
        color: #000; }
    .dark-font .breadcrumb-item.active {
        color: #455a64; }    
    .navbar .dropdown-menu a:hover {
        color: #616161
      }
      .row.no-gutters {
      margin-right: 0;
      margin-left: 0;
      padding-right: 0;
        padding-left: 0;
    }
    .first-para{
      text-align: left;
       float: left;
       margin-bottom: 0;
       font-size: 14px;
        font-weight: 500;
    }
    .second-para{
      text-align: right;
      margin-bottom: 0;
      font-size: 14px;
        font-weight: 500;
    }
    .third-para{
      text-align: left;
      margin-bottom: 0;
      font-size: 14px;
        font-weight: 500;
    }
    
    /*Check box chat */
    
    label.btn span {
      font-size: 12px;
      font-weight: 500;
    }
    p.card-text{
      font-size: 12px;
      font-weight: 500;
      text-align: center;
    }
    
    label input[type="checkbox"] ~ i.fa.fa-square-o{
        color: #c8c8c8;    display: inline;
    }
    label input[type="checkbox"] ~ i.fa.fa-check-square-o{
        display: none;
    }
    label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
        display: none;
    }
    label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
        color: #7AA3CC;    display: inline;
    }
    label:hover input[type="checkbox"] ~ i.fa {
    color: #7AA3CC;
    }
    .btn-group.btn-group-vertical span{
      color:#000000b0;
    }
    .chat-button{
      padding-top: 15px;
    }
    .card-body h4{
      font-size: 18px;
    }
    .chat-button button{
      font-size: 9px;
      font-weight: 500;
    }
    
    /*Check box chat */
    .card{
      margin-top: 10px;
    }
     .card-body{
      padding-top: 20px;
      background-color: #dff0f11c;
          box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
     } 
     .chat-box-content{
      margin: auto;
        background: #fff;
        padding: 25px;
        border-radius: 5px;
     }
    
    .chat-box{
     /* background: linear-gradient(135deg, #f7cac9 0%, #92a8d1 100%);*/
      padding-top: 70px;
      padding-bottom: 70px;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .checkbox-chat{
      text-align: center;
    }
    .btn-success {
        background-color: #008837;
        font-size: 10px;
        padding: 12px;
    }
    

    @media screen and (max-width: 991px){
      .chat-box{
        padding-top: 40px;
        padding-bottom: 40px;
        height: auto;
      }
      .chat-box-content{
        padding: 20px;
      }
      .third-para{
        margin-top: 20px;
      }
      .card{
        margin-top: 5px;
      }
    }

    /*==============================================================================================================================*/
     /*Chat Client 1st Screen Css End*/


  /*Chat Client 2nd Screen Css Start*/
  /*==============================================================================================================================*/
     
    @import 'https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.3.2/css/simple-line-icons.min.css';
    @import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css';
    .chat-client-second-screen {
      width: 67%;
      margin: auto;
      min-height: auto;
      padding: 70px 0;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7cac9+0,92a8d1+100 */
      /*background: #fff;*/
      /* Old browsers */
     /* background: -moz-linear-gradient(-45deg, #f7cac9 0%, #92a8d1 100%);*/
      /* FF3.6-15 */
      /*background: -webkit-linear-gradient(-45deg, #f7cac9 0%, #92a8d1 100%);*/
      /* Chrome10-25,Safari5.1-6 */
      /*background: linear-gradient(135deg, #f7cac9 0%, #92a8d1 100%);*/
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      /* IE6-9 fallback on horizontal gradient */
      letter-spacing: 1px;
    }
    .chat-client-second-comntent{
    	    background: #fff;
    padding: 50px 30px 35px 30px;
    border-radius: 5px;
    }
    .chat-client-second-select{
    	box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
    }
    .chat-client-second-message .form-group{
    	box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
    }
    .chat-client-second-message .form-group textarea{
    	border:none;
    }
    .chat-client-second-screen .select {
      position: relative;
      overflow: hidden;
      display: block;
      margin: auto;
      width: 330px;
      height: 100%;
      border-bottom: 0px;
      border-radius: 3px;
      font-size: 12px;
      box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
    }
    .chat-client-second-screen .select > i.toggle {
      position: absolute;
      z-index: 4;
      right: 1.5em;
      top: 1.6em;
      color: #ccc;
    }
    .chat-client-second-screen .select .title, .select .placeholder {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      padding: 1.5em 2em;
      background: #94898929;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      cursor: pointer;
    }
    .chat-client-second-screen .select > input {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      cursor: pointer;
    }
    .chat-client-second-screen .select > input:checked ~ i.toggle.icon-arrow-down {
      display: none;
    }
    .chat-client-second-screen .select > input:checked ~ i.toggle.icon-arrow-up {
      display: block;
    }
    .chat-client-second-screen .select > input:checked div.options label.option .title {
      display: none !important;
    }
    .chat-client-second-screen .select > input:not(:checked) {
      z-index: 4;
    }
    .chat-client-second-screen .select > input:not(:checked) ~ label.option > span.title {
      display: none;
    }
    .chat-client-second-screen .select > input:not(:checked) ~ i.toggle.icon-arrow-up {
      display: none;
    }
    .chat-client-second-screen .select > input:not(:checked) ~ i.toggle.icon-arrow-down {
      display: block;
    }
    .chat-client-second-screen .select > input:disabled {
      cursor: no-drop;
    }
    .chat-client-second-screen .select > span.placeholder {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      color: #999;
      border-top: 0px;
    }
    .chat-client-second-screen .select label.option {
      display: block;
      overflow: hidden;
      z-index: 1;
      width: 100%;
      transition: all 1s ease-out;
      margin-bottom: 0;
    }
    .chat-client-second-screen .select label.option span.title {
      position: relative;
      z-index: 2;
      transition: background 0.3s ease-out;
    }
    .chat-client-second-screen .select label.option span.title i.icon {
      padding-right: 0;
      color: #92a8d1;
    }
    .chat-client-second-screen .select label.option span.title:hover {
      background: rgba(255, 255, 255, 0.3);
      box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
    }
    .chat-client-second-screen .select label.option input {
      display: none;
    }
    .chat-client-second-screen .select label.option input:checked ~ span.title {
      position: absolute;
      display: block;
      z-index: 3;
      top: 0px;
      font-size: 12px;
      background: #fff;
      border-top: 0px;
      box-shadow: none;
      color: inherit;
      width: 100%;
    }
    .chat-client-second-screen .select label.option input:disabled ~ span.title {
      background: #f9f9f9 !important;
      color: #aaa;
    }
    .chat-client-second-screen .select label.option input:disabled ~ span.title:hover {
      color: #aaa;
      background: none;
      cursor: no-drop;
    }
    .chat-client-second-screen .select2 {
      position: relative;
      overflow: hidden;
      display: block;
      margin: auto;
      width: 330px;
      height: 100%;
      border-bottom: 0px;
      border-radius: 3px;
      font-size: 12px;
      box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
    }
    .chat-client-second-screen .select2 i.toggle {
      position: absolute;
      z-index: 4;
      right: 1.5em;
      top: 1.6em;
      color: #ccc;
    }
    .chat-client-second-screen .select2 .title, .select2 .placeholder {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      padding: 1.5em 2em;
      background: white;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      cursor: pointer;
    }
    .chat-client-second-screen .select2 > label > input {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      cursor: pointer;
    }
    .chat-client-second-screen .select2 > label > input:checked {
      z-index: 2;
    }
    .chat-client-second-screen .select2 > label > input:checked ~ i.toggle.icon-plus {
      display: none;
    }
    .chat-client-second-screen .select2 > label > input:checked ~ i.toggle.icon-minus {
      display: block;
    }
    .chat-client-second-screen .select2 > label > input:not(:checked) ~ i.toggle.icon-minus {
      display: none;
    }
    .chat-client-second-screen .select2 > label > input:not(:checked) ~ i.toggle.icon-plus {
      display: block;
    }
    .chat-client-second-screen .select2 > label > input:not(:checked) ~ label.option input:not(:checked) ~ .title {
      display: none !important;
    }
    .chat-client-second-screen .select2 > label > input:disabled {
      cursor: no-drop;
    }
    .chat-client-second-screen .select2 label > span.placeholder {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      color: #999;
      border-top: 0px;
    }
    .chat-client-second-screen .select2 label.option {
      display: block;
      overflow: hidden;
      z-index: 1;
      width: 100%;
      transition: all 1s ease-out;
    }
    .chat-client-second-screen .select2 label.option span.title {
      position: relative;
      z-index: 2;
      transition: background 0.3s ease-out;
    }
    .chat-client-second-screen .select2 label.option span.title i.icon {
      padding-right: 8px;
      color: #92a8d1;
    }
    .chat-client-second-screen .select2 label.option span.title:hover {
      color: #fff;
      background: rgba(146, 168, 209, 0.5);
      box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
    }
    .chat-client-second-screen .select2 label.option input {
      display: none;
    }
    .chat-client-second-screen .select2 label.option input:checked ~ span.title {
      position: absolute;
      display: block;
      z-index: 1;
      top: 0px;
      font-size: 12px;
      background: #fff;
      border-top: 0px;
      box-shadow: none;
      color: inherit;
      width: 100%;
    }
    .chat-client-second-screen .select2 label.option input:disabled ~ span.title {
      background: #f9f9f9 !important;
      color: #aaa;
    }
    .chat-client-second-screen .select2 label.option input:disabled ~ span.title:hover {
      color: #aaa;
      background: none;
      cursor: no-drop;
    }
    .chat-client-second-screen textarea.form-control {
        min-height: 281px;
    }
    .chat-client-second-screen .p-5 {
        padding: 0rem!important;
        border:none!important;
    }
    .chat-client-second-screen .message-button{
      padding-top: 15px;
    }
    .chat-client-second-screen .btn-success {
        background-color: #008837;
        font-size: 10px;
        padding: 12px 20px;
        margin-top: 10px;
    }
     .chat-client-second-screen .col-lg-9.col-md-9{
      text-align: center;
      margin:auto;
    }
    .chat-client-second-screen .select.animated.zoomIn input[type="radio"]{
      min-height: 250px;
    }
    .chat-client-second-screen .select.animated.zoomIn{
      width: auto;
    }
    #myBtn3{
    	border-radius: 25px;
    padding: 13px 20px;
    font-size: 10px;
    }
    #myBtn3:hover{
    	border-color: transparent;
    }
    .chat-button a:hover{
    	border-color: transparent;
    }
    .chat-client-second-message .form-control:focus {
    box-shadow: inset 0 0 0 2.5px #1266f1;
}
.chat-client-second-message .form-control{
	background-color: #94898929;
}
    
    @media screen and (max-width: 575px){
      .chat-client-second-screen .chat-client-second-message {
    margin-top: 10px;
}
    }

/*==============================================================================================================================*/
      /*Chat Client 2nd Screen Css End*/

      /*Manual Dial Popup Style Css Start*/
/*=============================================================================================================================*/

       .manual-dial-content{
        padding: 40px 0;
       background-image: url(images/bg-4.jpg);
        height: auto;
      }
      .dial-code-manual{
        box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
        padding: 15px 20px;
        border-radius: 5px;
      }
      input[type="text"]{
        width: 100%;
        border:none;
        border-bottom: 1px solid #928c8c47;
        border-radius: 5px;
        padding-left: 7px;
        margin-bottom: 5px;
      }
      input[type="text"]:focus{
        border-color: red;
        outline: none;
      }
      .dial-code-manual label{
        color: #d2691e;
      }
      .phone-number-manual{
        box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
        padding: 10px 20px;
        border-radius: 5px;
      }
      .phone-number-manual input{
        width: 300px;
        border:none;
        border-bottom: 1px solid #928c8c47;
        border-radius: 5px;
        padding-left: 7px;
        margin-bottom: 5px;
      }
      .phone-number-manual input:focus{
        border-color: red;
        outline: none;
      }	

       .phone-number-manual input{
        width: 300px;
      }

      .search-leads{
        margin-top: 10px;
        padding: 15px 20px;
        box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
        border-radius: 5px;
      }
      .search-leads input.checkbox{
        width: 25px;
        height: 25px;
        float: left;
      }
      .search-lead-label-1{
        padding-bottom: 5px;
      }
      .search-lead-label-2{
        padding-left: 10px;
        color:#a09d9d;
        font-size: 14px;
      }
      .dial-code-manual .label-3{
        color: #a09d9d;
        font-size: 14px;
      }
      .label-4{
        color: #a09d9d;
        font-size: 14px;
      }
      .label-5{
        color: #a09d9d;
        font-size: 14px;
      }
      .manual-dial-para{
        padding: 10px 20px;
        box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
        margin-top: 10px;
        border-radius: 5px;
      }
      .manual-dial-para p{
        color: #a09d9d;
        font-size: 14px;
      }
      .dial-override{
        padding: 10px 20px;
        box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
        margin-top: 10px;
        border-radius: 5px;
      }
      .manual-dial-buttons{
        margin-top: 15px;
      }
      .manual-dial-buttons a{
        margin: 0 115px;
      }
      .manual-dial-content label{
      	font-weight: 400;
      }


input[type=date], input[type=datetime-local], input[type=email], input[type=number], input[type=password], input[type=search-md], input[type=search], .manual-dial-content input[type=tel], .manual-dial-content input[type=text], input[type=time], input[type=url], textarea.md-textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #bdbdbd;
    border-radius: 5px;
    outline: 0;
    height: auto;
    width: 100%;
    font-size: 14px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

/*=============================================================================================================================*/
      /*Manual Dial Popup Style Css End*/

/*Pause Code Style Css Start*/
	.pause-code-section .modal-content{
	  	background-color: transparent;
	  }
	  .pause-code{
	  	width: 45%;
    margin: auto;
    background: #fff;
    margin: 90px auto;
    padding: 25px;
    border-radius: 10px;
	  }
	  
      .pause-code .col-6{
        margin: auto;
      }
     .pause-code-reason .btn{
      width: 180px;
      height: 40px;
      padding: 0;
      margin: 7px 0;
     }
     .pause-code-buttons{
      background-color: rgb(255 219 153 / 47%);
      padding: 20px;
      text-align: center;
      margin-bottom: 35px;
     }
     .pause-code-reason .btn-light {
    color: #4f4f4f !important;
	}
	.pause-code-line{
		text-align: center;	
	}
	.pause-code-line p{
		margin-bottom: 10px;
	}
	.pause-code-heading h3{
		font-size: 22px;
	}
/*Pause Code Style Css End*/


.customer-page-right-buttons .btn{
	    background-color: #55acee;
    width: 80px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    padding: 0;
    margin: 0;
    font-size: 9px;
    transition: 0.3s;
}

/*
.saleforce-right-side{
	position: relative;
	background: url(../images/bg-28.jpg);
	background-size: cover;
}*/
/*.saleforce-right-side::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	top: 0;
	left: 0;
}*/

.saleforce-right-side{
	background: #fff;
}

   
  section.buttons-section{
        background-size: cover;
        padding: 15px 0;
        position: relative;
      }
     .buttons-items{
     	margin: 4px 0;
     }
      .buttons-items .btn-btn{ 
          background: #FC466B;  /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, #3F5EFB, #FC466B);  /* Chrome 10-25, Safari 5.1-6 */
                  background: linear-gradient(to right, #004eff, #00a1ff4f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
          width: 170px;
          height: 45px;
          display: flex;
          align-items: center;
          border-radius: 0;
          font-weight: 700;
          font-size: 12px;
              border-color: #fff;
          border: 1px solid #FFF;
          color: #fff;
          border-radius: 0;


      }

      .btn-btn span{
        margin-left: 15px;
        margin-right: 10px;
        border:2px solid #fff;
        border-radius: 100%;
      }

       .buttons-items a{
        text-decoration: none;
        color: #fff;
       }

       .btn-btn .fas{
        padding: 9px;
        display: inline-block;
       }


       .banner-content .icon:hover{
        fill: #000;
       }

       #CloserSelectBox .closerbox{
       	background: none rgba(0,0,0,0.4);
       }

       .CloserSelectBox::before{
       	content: '';
       	position: absolute;
       	width: 100%;
       	height: 100%;
       	top: 0;
       	left: 0;
       	background: rgba(0,0,0,0.5);
       }

    span#AlertBox::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
	}

	span#InternalChatPanel::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}

/* 04-06-21 Start */

.img-btn{
	width: 175px;
}

.modal-content.group-box{
	width: 45%;
}
.modal-body-left-content a{
	font-size: 13px;
}

.call-log-table{
	position: relative;
	overflow: auto;
	width: 100%;
}
.label-5{
	display: none;
}

.upper-saleforce-item{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
}

.upper-item{
	margin-bottom: 10px;
}

#custdatetime{
	color: #fff;
}
.hangup-menu{
	font-size: 10px;
}

.DispoSelectmain{
	width: 230px;
}

.btn-primary{
	border-color: transparent;
}
input:focus{
	border-bottom: 1px solid #928c8c47 !important;
}

@media(min-width:320px) and (max-width: 540px)
{
	.logout-button .modal-content {
	width: 100%;
}
}