/* .userProfile-cont{
   display: grid;
  grid-template-columns: auto auto;
  padding: 10px; 
} */

.userProfile-cont .header-cont{
	display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #00000026;
}

.userProfile-cont .header-cont .header-val{
	display: flex;
    align-items: center;
    gap: 5px;
}

.loading-profile{
	padding: 40px;
}

.userProfile-cont .body-cont{
	display: grid;
    grid-template-columns: 1fr 1fr;
}

/* .userProfile-cont .footer-cont{
	display: grid;
	grid-template-columns: 1fr 1fr;
} */

.userProfile-cont .footer-cont .profile-header{
	    height: 26px;
	    background: rgb(204, 204, 204);
	    display: flex;
	    color: var(--color-white);
	    line-height: 26px;
	    padding: 0 10px 0 10px;
	    justify-content: space-between;
	    cursor: pointer;
}

.userProfile-cont .footer-cont .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.userProfile-cont .info-div{
  display: flex;
	padding: 10px;
    flex-direction: column;
}

.userProfile-cont .info-div .label {
  font-weight: 550;
  padding-bottom: 6px;
}

#ccpDialog {
    display: none;
    position: fixed;
    z-index: 1;
    /* padding: 12px; */
    border: 1px solid #c4c4c4;
    width: 628px;
    height: 302px;
    left: 15%;
    /* top: -10%; */
    overflow: hidden;
    background-color: #f7f0f4;
}

#ccpDialog .dialog-cont{
   display: flex;
   flex-direction: column;
   height: 100%;
}

#ccpDialog .dialog-cont .header{
   display: flex;
   align-items: center;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 4px;
}

#ccpDialog .dialog-cont .header .title{
	flex: 1;
    text-align: center;
    font-weight: 600;
}

#ccpDialog .dialog-cont .header .img-btn{
	cursor: pointer;
}

#ccpDialog .dialog-cont .header .img-btn svg{
	fill: black;
}

#ccpDialog .dialog-cont .content{
	padding: 12px;
	letter-spacing: 0.6px;
	overflow-y: scroll;
	text-align: justify;
	white-space: pre-wrap;
	font-size: 13px;
	line-height: 18px;
}

.data-table-numeric-col{
	text-align: center
}

.image-small{
	cursor: pointer;
}

.profile-header{
	display: flex;
    gap: 45px;

	#clearProfileSearch{
		/* height: 26px; */
		/* width: 50px; */
		/* background: white; */
		/* border: 1px solid #c4c4c4; */
		/* cursor: pointer; */
	}
}

.profile-search{
	label{
		font-weight: 600;
	}
	select{
		width: 100px !important;
		outline: none;
	}
	select:invalid {
	  color: gray;
	}

	select option:first-child {
	  color: gray;
	}

	select:invalid option:not(:first-child) {
	  color: black;
	}
}

.search-cont {
  width: 372px;
  position: relative;
  display: flex;

.search-term {
	  width: 100%;
	  border: 1px solid #c4c4c4;
	  border-right: none;
	  padding: 5px;
	  height: 27px;
	  outline: none;
	}
	
	.search-button {
	  width: 40px;
	  height: 27px;
	  border: 1px solid #00B4CC;
	  background: #00B4CC;
	  text-align: center;
	  color: #fff;
	  /* border-radius: 0 5px 5px 0; */
	  cursor: pointer;
	  font-size: 16px;
	}
}

.profile-search-main{
	margin: 42px 10px 10px 10px;
	border: 1px solid #ae83ec;
	min-height: 234px;
	border-radius: 20px;
	padding: 12px 5px 5px 24px;

	.header-h2{
	font-size: 20px;
	}
	.result-cont{
	margin-top: 20px;
		.fixed_headers {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	a{
			text-decoration: underline;
		}
	th, td {
		    text-align: left;
	padding-left: 32px;
		  }
	td {
		    padding-top: 12px;
	color: #000716;
		  }
	th:nth-child(2), th:nth-child(3) {
		    border-left: 1px solid black;
		  }
	td:nth-child(1), th:nth-child(1) {width: 10%;}
	td:nth-child(2), th:nth-child(2) {width: 10%;}
	td:nth-child(3), th:nth-child(3) {width: 18%;}
	thead {
		    color: #414d5c;
	font-size: 13px;
	tr {
		      display: block;
	position: relative;
		    }
		  }
	tbody {
		    display: block;
	overflow: auto;
	width: 100%;
	font-size: 12px;
		  }
		}		
		}
}

#profileDetailsMain{
	.prof-details-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		svg{
			width: 21px;
		height: 21px;
		cursor: pointer;
		}
	;
		padding-left: 20px;
		padding-right: 20px;
	}
}

#profileSearchMainWaterMark::after {
	content: attr(data-watermark);
	color: lightgrey;
	font-size: 45px;
	z-index: 0;
	position: absolute;
	top: 50%;
	left: 30%;
}