.water-marked-div::after {
	content: attr(data-watermark);
	color: lightgrey;
	font-size: 45px;
	z-index: 0;
	/* text-align: center; */
	position: relative;
	top: 50%;
	justify-content: center;
	display: flex;
}

  #dialer-img{
    stroke: #000000;
  }

  #dialer-img:hover{
    stroke: #ffff;
  }

#OtherContainer {
	display: flex;
	flex-grow: 1;

	#container {
		display: flex;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
		display: flex;
		margin: 10px;
		flex: 1 1 0%;

		.pannel-2 {
			flex: 2;
			padding: 5px;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			gap: 6px;

					.agent-to-combo-cont {
			.combobox-cont {
			/* margin-top: 20px; */
			label {
					font-weight: 600;
				}
			;
			/* flex: 1; */
			}

			.agent-list-combo {
			display: flex;
			align-items: center;
			border: 1px solid #c4c4c4;
			font-size: var(--text-size);
			font-family: AmazonEmber, Helvetica, sans-serif;
			padding-right: 4px;
			height: 27px;
			width: 278px;
			margin-top: 10px;
			input {
					width: 278px;
				}
			}
		;
			display: flex;
			justify-content: center;
			margin-top: 78px;
		}


			.agent-info-cont {
				display: flex;
				flex-direction: column;
				padding: 20px 10px 20px 10px;


				.chart-container {
					display: flex;
					align-items: center;
					padding: 10px;
				}

				.horizontal-bar .legend {
					width: 128px;
				}

				.horizontal-bar .bar {
					/* width: var(--width); */
					background-color: var(--bgcolor);
					height: 20px;
					display: flex;
					align-items: center;
					justify-content: end;
					-webkit-animation: show-bar 1.2s 0.1s forwards;
					-moz-animation: show-bar 1.2s 0.1s forwards;
					animation: show-bar 1.2s 0.1s forwards;
				}

				.horizontal-bar .bar::after {
					-webkit-animation: fade-in-text 2.2s 0.1s forwards;
					-moz-animation: fade-in-text 2.2s 0.1s forwards;
					animation: fade-in-text 2.2s 0.1s forwards;
					color: #fff;
					content: attr(data-val);
					font-weight: 500;
					padding-right: 10px;
				}
			}

			.agent-form-submit {
				display: flex;
				justify-content: center;
				margin-top: 30px;

				.agent-button {
				width: 122px;
				}

				;
			}
		}

		.pannel-separator-h {
			border-left: 1px solid rgb(204, 204, 204);
			height: 88%;
			margin-top: 2%;
		}

		.pannel-1 {
			flex: 3;
			padding: 8px;
			margin-left: 32px;

					.agent-list-combo-cont {
			.combobox-cont {
				/* margin-top: 20px; */
				label {
					font-weight: 600;
				}
			}

			.agent-list-combo {
				display: flex;
				align-items: center;
				border: 1px solid #c4c4c4;
				font-size: var(--text-size);
				font-family: AmazonEmber, Helvetica, sans-serif;
				padding-right: 4px;
				height: 27px;
				width: 278px;
				margin-top: 10px;
				input {
					width: 278px;
				}
			}
		}

			#rightPannelInnerCont{
				margin-top: 8px;
			}

			.row1 {
				display: flex;
				justify-content: space-between;

				#searchField {
					width: 200px;
					margin-left: 8px;
					outline: 0;
				}

				label {
					font-weight: 600;
				}

				#searchValue {
					background-color: #ffffff;
					border: solid 1px #c4c4c4;
					height: 26px;
					box-sizing: content-box;
					width: 200px;
					margin-left: 8px;
					outline: 0;
					padding-left: 10px;
				}

				#addSearchBtn {
					width: 102px;
					/* cursor: pointer; */
				}
			}

			.row2 {
				margin-top: 12px;
				margin-bottom: 8px;

				#searchCriteriaCont {
					height: 28px;
					border: 1px solid #c4c4c4;
					padding: 2px;
					display: flex;
					align-items: center;
					background: white;

					.search-criteria {
					/* padding: 2px 5px 2px 5px; */
					/* border: 1px solid rgb(221, 221, 221); */
					/* background-color: #f4f4f4; */
					/* margin: 2px 5px 2px 5px; */
					/* border-radius: 2px; */
					}

					.criteriaCont{
					position: relative;
					border: 1px solid rgb(221, 221, 221);
					background-color: #f4f4f4;
					margin: 2px 5px 2px 5px;
					border-radius: 2px;
					padding: 4px 16px 4px 4px;
					}

					.close-criteria {
					position: absolute;
					top: -1px;
					right: -2px;
					cursor: pointer;
					}

					.close-criteria
					svg {
					    height: 16px;
					width: 16px;
					}
				}
			}

			.row3 {
				display: flex;
				justify-content: center;
				margin-bottom: 20px;
				gap: 28px;

				.leadsBtn {
					width: 104px;
					height: 26px;
					cursor: pointer;
				}
			}

			.row4 {
				display: flex;
				height: calc(100% - 202px);

				#leadsList {
					flex: 1;

					.header-label {
						display: flex;
						justify-content: center;
						font-weight: 700;
					}

					.heder-content {
						display: flex;
						gap: 10px;
						margin-bottom: 8px;
						background-color: var(--cardColor);
						padding: 5px;
						align-items: center;
					}

					#groupByLeads {
						display: flex;
						align-items: center;

						label {
							font-weight: 700;
							border-left: 1px solid black;
							padding-left: 10px;
						}

						select {
							width: 200px;
							margin-left: 8px;
							outline: 0;
						}
					}

					.olcards {
						list-style: none;
						font-family: sans-serif;
						height: calc(100% - 69px);
						overflow: auto;
						padding: 5px 15px 5px 5px;

						.card-content {
							display: flex;
							gap: 10px;
							margin-bottom: 8px;
							padding: 0px 6px 0px 6px;
							clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, calc(100% - 1.5rem) calc(100% + 1rem), 0 calc(100% + 1rem));

							.selct-check {
								padding: 6px 0 6px 0;
							}

							.text {
								cursor: pointer;
								flex: 1;
								padding: 6px 0 6px 0;
							}

							.text:hover{
							  opacity: 0.4;
							}

							.text:hover::after {
								content: attr(data-hover);
								color: blue;
								float: right;
							}
						}

						.even-card-color {
							background-color: #162d5914;
						}

						.odd-card-color {
							background-color: #d7d9db;
						}
					}
				}

				#leadDetails {
					flex: 1;
					border-left: 1px solid #c4c4c4;
					overflow-y: auto;

					.lead-details-header {
					display: flex;
					justify-content: center;
					font-weight: 700;
					}

					#leadDetailsCont {
					display: flex;
					padding: 10px;
					flex-direction: column;

						.icon {
					cursor: pointer;
					transition: transform 333ms ease-out, color 333ms;
					margin-left: 15px;
					text-align: center;
					line-height: 1;
						}

					.dialer-expandall-title{
						margin-left: -35px;
						margin-bottom: 5px;
					}

					.dialer-expandall-title.open .icon {
					fill: #3266D5;
					-ms-transform: rotate(-180deg);
					transform: rotate(-180deg);
					color: red;
					}


					.dialer-details-tree {
					ul {
							margin: 0;
					padding-left: 25px;
					list-style: none;
					line-height: 2em;

							.summary-cont {
					gap: 2px;
					display: flex;
					flex-direction: column;

								.attr-item {
					font-weight: 500;
					display: flex;
					align-items: baseline;
					background-color: #f4f4f4;
					line-height: 16px;

									.attr-col-name {
					padding-left: 5px;
					min-width: fit-content;
					font-weight: 600;
									}

									.attr-col-val {
					padding: 5px;
					display: flex;
					align-items: center;
									}
								}
							}
						}
					ul li {
							position: relative;
						}
					ul li::before,
						ul li::after {
							content: "";
					position: absolute;
					left: -15px;
					border-left: 1px dashed #999;
						}
					ul li::before {
							top: 0px;
					width: 15px;
					height: 12px;
					border-bottom: 1px dashed #999;
						}

						/* Hide vertical line for first item */
					ul.tree>li:first-child::before {
							border-left: none;
						}
					ul li::after {
							top: 1.1em;
					bottom: 1px;
						}

						/* Hide lines for last item */
					ul li:last-child::after {
							display: none;
						}

						/* Toggle icon (inserted via JS) */
						.js-toggle-icon {
					position: relative;
					z-index: 1;
					display: inline-block;
					width: 14px;
					margin: 0 2px 0 -23px;
					line-height: 14px;
					text-align: center;
					cursor: pointer;
					font-style: normal;
					background-color: #fff;
					border: 1px solid #666;
					border-radius: 2px;
						}
					}

				;
					padding-left: 22px;
				}

				;
				padding-left: 20px;
			}
		}
	}
}
}

#expiryInDays{
	width: 100%;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    outline: 0;
    padding-left: 7px;
    height: 27px;
}

@-webkit-keyframes fade-in-text {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes show-bar {
	0% {
		width: 0;
	}

	100% {
		width: var(--width);
	}
}