/*****************************************
* Author: Arun Sengupta *
* Copyright 2024, Dezmi Design *
*****************************************/

/**** CSS Reset ****/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
smbackground, strike, strong,
dl, dt, dd, ol, ul, li,
figure, figcaption,
iframe,
fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: text-top;
	background: transparent;
}

a, a:hover 	{
    text-decoration: none !important; 
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

a:hover { opacity: .8; }

body { 
	font-family: 'poppins', sans-serif; 
	font-size: 16px;
}

/*****************/

.wrap { 
	position: relative;
    box-sizing: border-box;
	max-width: 1366px; 
	padding: 0 15px; 
	margin: 0px auto; 
}

header { 
	font-size: 14px;
	position: relative;
	z-index: 20;
	padding: 0;
    background-color: #FFF7F7;
	border-bottom: 1px solid #e2bdbd; 
}

#dashmenu .nav-link {
	padding-left: 10px; 
	padding-right: 10px; 
	color: #84060B; 
}

#dashmenu .nav-link:hover { color: #000; }

#dashmenu .nav-link.active { font-weight: bold; }


.mobmenu {
	border: 0;
	outline: 0;
	padding: 5px;
	background-color: #ffe6e6; 
}

.mobmenu:focus { box-shadow: none; }


.logo {
	max-width: 146px;
	max-height: 40px; 
}

#subheader {
	padding: 10px;
	background-color: #FFF7F7;
	border-bottom: 1px solid #e2bdbd; 
}

.settings-card { 
	min-width: 550px;
	font-size: 14px; 
}

#main .card-header { min-height: 60px; }
#main .table-responsive { min-height: 260px; }

.wrap-history {
	max-height: 300px;
	overflow: hidden;
	overflow-y: auto;
}

footer { 
	font-size: 13px;
	font-weight: 500;
}

.card-footer .pagination .page-link { font-size: 14px; }

/******/

.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/******/

.client-tile ,
.avatar-tile {
	border-radius: 10px;
	padding: 0.5rem;
	text-align: center;
	background-color: #FFF7F7;
	transition: all 0.15s ease-in-out;
}

.client-tile { font-size: 14px; }

.client-tile:hover ,
.avatar-tile:hover {
 	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.avatar-tile > img {
	max-width: 138px;
	width: 100%;
}

.avatar-name { font-size: 15px;	margin-top: 5px;  }

/* Selected state */
.client-check:checked + .client-tile ,
.avatar-check:checked + .avatar-tile {
    background-color: #e7f1ff;
	border: 1px solid #e7f1ff;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.client-check:checked + .client-tile ,
.avatar-check:checked + .avatar-tile .avatar-name {
	color: #2648dd;
}

/* amit start *****/

.avimage { height:100px;}
.normal-text { 
	font-size: 16px !important;
}
.avatar-box { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);}


.avatar-list-block {
    cursor: pointer;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: all 0.3s;
}

.avatar-list-block:hover {
    border-color: #ddd;
    background-color: #f8f9fa;
}

.avatar-list-block.avatar-selected {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.avatar-list-img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.avatar-list-label {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.avatar-list-section-height { min-height:200px;}

.flashing-element {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


/* HTML: <div class="loader"></div> */
.loader {
  width: 120px;
  height: 20px;
  -webkit-mask: radial-gradient(circle closest-side,#000 94%,#0000) left/20% 100%;
  background: linear-gradient(#000 0 0) left/0% 100% no-repeat #ddd;
  animation: l17 2s infinite steps(6);
}
@keyframes l17 {
    100% {background-size:120% 100%}
}


.overlay {
  position: fixed; /* Fixes the overlay to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
  z-index: 9999; /* Ensures it is on top of other elements, higher than Bootstrap modals (which start around 1000) */
  display: flex; /* Helps in centering the spinner */
  justify-content: center;
  align-items: center;
}

/** amit stop **/

/*****************/

.clear 			{ clear: both; height: 0px; line-height: 0px; }
.spacer 		{ clear: both; height: 5px; line-height: 5px; }
.spacer-large 	{ clear: both; height: 10px; line-height: 10px; }
.spacer-huge 	{ clear: both; height: 20px; line-height: 20px; }
.spacer-big	 	{ clear: both; height: 30px; line-height: 20px; }
.spacer-mega 	{ clear: both; height: 40px; line-height: 20px; }
.spacer-wow 	{ clear: both; height: 60px; line-height: 20px; }


.txt-pri { color: #84060B; }

.bg-pri { background-color: #84060B; }
.bg-sec { background-color: #FFF7F7; }
.bg-ter { background-color: #FFEEEE; }


.fa-solid.fa-check { color: #53760a; }
.fa-solid.fa-xmark { color: red; }



.font12 { font-size: 12px; }
.font13 { font-size: 13px; }
.font14 { font-size: 14px; }
.font15 { font-size: 15px; }
.font16 { font-size: 16px; }
.font18 { font-size: 18px; }
.font20 { font-size: 20px; }
.font22 { font-size: 22px; }
.font24 { font-size: 24px; }

/**** Media Queries ****/

@media screen and (max-width: 768px) {

	.settings-card { 
		min-width: 250px;
		width: 100%;
		font-size: 13px;
	}

	.table.font15 { font-size: 14px; }


}

@media screen and (max-width: 480px) {

	.logo { max-width: 120px; }
	
	
}	

/* =====================================================
   PAGE: Interaction (interaction.php)
   DESCRIPTION: Styles for avatar container, loader,
   SitePal/HeyGen layout and interaction UI.
   ===================================================== */

.sitepal-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-loader {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}