form .required:after{color:#f35958;content:"*";font-size:15px;left:3px;position:relative}.form-switch-md .form-check-input{width:4rem!important}.form-switch-lg .form-check-input{width:6rem!important}.form-switch-xl .form-check-input{width:8rem!important}.feather-16{height:16px;width:16px}.feather-20{height:20px;width:20px}.feather-24{height:24px;width:24px}.feather-32{height:32px;width:32px}

/* Ajax Request Spinner */
.spinner-border {
    width: 14px; /* adjust to desired size */
    height: 14px; /* adjust to desired size */
    border-width: 3px; /* make the border thinner for a smaller spinner */
}

#loader {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgb(255, 255, 255, 0.97);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#loader.hidden {
	display: none; /* Hide loader when done */
}

/* Spinner ring */
.spinner {
	width: 50px;
	height: 50px;
	border: 1px solid #28c76f;
	border-radius: 50%;
	position: relative;

	/* Page Loading Styles */

	/* animation: spin 1.5s linear infinite; */
	-webkit-animation: doubleBounce 2s infinite ease-in-out;
		animation: doubleBounce 2s infinite ease-in-out;
	/* -webkit-animation: chasingDotsRotate 2s infinite linear;
		animation: chasingDotsRotate 2s infinite linear; */
	/* -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;
		animation: circleFadeDelay 1.2s infinite ease-in-out both; */
}

  /* Logo inside spinner */
  .spinner img {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid #28c76f;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	width: 50px; /* Adjust logo size */
	height: auto;
}

/* Spin animation */
@keyframes spin {
	to {
			transform: rotate(360deg);
		}
}

@-webkit-keyframes doubleBounce {
	0%, 100% {
	  transform: scale(0);
	}
  
	50% {
	  transform: scale(1);
	}
  }
  
  @keyframes doubleBounce {
	0%, 100% {
	  transform: scale(0);
	}
  
	50% {
	  transform: scale(1);
	}
  }

  @-webkit-keyframes chasingDotsRotate {
	100% {
	  transform: rotate(360deg);
	}
  }
  
  @keyframes chasingDotsRotate {
	100% {
	  transform: rotate(360deg);
	}
  }
  
  @-webkit-keyframes chasingDotsBounce {
	0%, 100% {
	  transform: scale(0);
	}
  
	50% {
	  transform: scale(1);
	}
  }
  
  @keyframes chasingDotsBounce {
	0%, 100% {
	  transform: scale(0);
	}
  
	50% {
	  transform: scale(1);
	}
  }

  @-webkit-keyframes circleFadeDelay {
	0%, 39%, 100% {
	  opacity: 0;
	}
  
	40% {
	  opacity: 1;
	}
  }
  
  @keyframes circleFadeDelay {
	0%, 39%, 100% {
	  opacity: 0;
	}
  
	40% {
	  opacity: 1;
	}
  }

/* Hira Module */
.chatbox {
	width: 100%;
	max-width: 600px;
	margin: auto;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
	background-color: #f9f9f9;
}
.messages {
	max-height: 300px;
	overflow-y: auto;
	margin-bottom: 10px;
}
/* General message styling */
.message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    max-width: 70%; /* Adjust the width as per your design */
}
/* User messages aligned to the right */
.message.user {
    background-color: #d1f7c4; /* Greenish color for user messages */
    text-align: right; /* Align user messages to the right */
    margin-left: auto; /* Push the message to the right */
}

/* Hira messages aligned to the left */
.message.hira {
    background-color: #f1f1f1; /* Light gray color for Hira messages */
    text-align: left; /* Align Hira messages to the left */
    margin-right: auto; /* Push the message to the left */
}
.user {
	color: #5d5d5d;
}
.hira {
	color: green;
}
textarea {
	width: 100%;
	margin-right: 10px;
}