/* Baar Connect Auth styles */
.wrap h1 {
	color: #0073aa;
}
.bg-gray{
	background-color: #d9d9d9 !important;
}
.text-blue{
	color: #0E84B4 !important;
	font-weight: 500;
}
.form-section {
	margin-bottom: 24px;
	display: flex;
	align-items: flex-start; /* Align items to the top */
	gap: 20px;
}

.form-section-title {
	font-size: 14px;
	font-weight: 500;
	width: 200px; /* Fixed width */
	min-width: 200px; /* Ensure minimum width */
	max-width: 200px; /* Limit maximum width */
	padding-top: 6px;
	line-height: 1.3; /* Adjust line height for multi-line titles */
	overflow-wrap: break-word; /* Allow long words to break */
}

.form-section-content {
	flex: 1;
}

.form-check {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
}

.form-check-input {
	margin-right: 8px;
}

.form-check-input:checked {
	background-color: #0098da;
	border-color: #0098da;
}

.form-check-label {
	font-size: 14px;
	color: #333;
}

.input-group {
	margin-top: 8px;
	gap: 8px;
}

.input-group input {
	width: 200px;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	padding: 6px 12px;
	font-size: 14px;
}

.form-select {
	width: 300px;
	border: 1px solid #ddd;
	padding: 8px;
	background-color: white;
	font-size: 14px;
}

.help-text {
	font-size: 12px;
	color: #666;
	margin-top: 4px;
}

.nested-options {
	margin-left: 24px;
}


input.form-control {
	width: 25%;
}

input#userInput, input#roleInput {
	width: 100% !important;
}

h1.bca-main-title {
	padding: 0px !important;
	margin-left: 10px !important;
}

div.bca-main-title-div {
	padding: 15px 0px;
}

div#authenticatorSetup, div#otpConfig, div#otpmobileConfig, div#securityQuestions {
	margin-top: 60px !important;
}

div#securityQuestions form#security-questions-form {
	padding: 40px 40px;
}

/* report tab */

.progress-circle {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: #fff;
	border: 15px solid #28a745;
	position: relative;
	margin: 0 auto;
}


.progress-circle span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
	font-weight: bold;
}

.metric-label {
	text-align: center;
	margin-top: 1rem;
	font-size: 0.9rem;
	color: #333;
}

.table th {
	background-color: #f8f9fa;
	border-top: none;
}

.reset-btn {
	background-color: #17a2b8;
	color: white;
	border: none;
	padding: 0.25rem 1rem;
	border-radius: 4px;
}

.download-dropdown {
	text-align: right;
	margin-top: 1rem;
}

.autentication-choose{
	width: 100%;
}
/* mfa-sec css */
.mfa-sec .card-mfa{
	padding: 0px !important;
	background-color: #D9D9D9;
}
hr{
	margin: 0px !important;
}


input.form-control.bg-gray {
	width: 40% !important;
	border: none;
	border-radius: 0px;
}

div#securityQuestions input.form-control{
	width: 80% !important;
}

.ans-que-block {
	display: flex !important;
	align-content: center !important;
	justify-content: center !important;
	align-items: center !important;
}
input.form-control.text-center.w-50, input.form-control.w-75, #otpInput{
	background-color: #d9d9d9 !important;
	border: none;
	border-radius: 0px;
}
#otpModal .modal-content{
	border: none !important;
	border-radius: 0px;
}
.modal-body.opt-body{
	padding: 0 30px 30px 30px !important;
}
.card-mfa a:focus{
	box-shadow: 0 0 0 0 !important;
}

/* email setting */
.w-30{
	width: 30% !important;
}
.w-65 , .ql-toolbar.ql-snow{
	width: 65% !important;
}
.ql-container{
	height: auto !important;
}

.otp-method-card.selected {
	border: 3px solid #007bff; /* Blue border to highlight the selected card */
	background-color: #e6f4ff;  /* Light blue background to indicate selection */
	box-shadow: 0 0 15px rgba(0, 123, 255, 0.3); /* A subtle glow effect */
}

div.config-cards .card-mfa {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

div.config-cards .card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

div.config-cards .card-title {
	margin-bottom: 1rem;
}

div.config-cards .card-text {
	flex-grow: 1;
	margin-bottom: 1rem;
}
div.config-cards .align-items-center {
	margin-bottom: 30px !important;
}

.active-card {
	border: 2px solid #eb8c22; /* Blue border to highlight the active card */
	background-color: rgba(0, 123, 255, 0.1); /* Optional: Change background color */
	box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.3); /* Optional: Add a subtle shadow */
}

/* faq and support tab  */

div.faqsupport .accordion-button:not(.collapsed) {
	background-color: #fff;
	color: #333;
	box-shadow: none;
}
div.faqsupport .accordion-button:focus {
	box-shadow: none;
	border-color: rgba(0,0,0,.125);
}
div.faqsupport .submit-btn {
	background-color: #0d6efd;
	color: white;
	padding: 8px 24px;
	border: none;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
}
div.faqsupport .confirmation-message {
	display: none;
	color: #333;
	text-align: center;
	margin-top: 20px;
}
div.faqsupport #supportcontactForm input.form-control{
	width: 100% !important;
}

#loader {
	display: none;
	width: 25px;
	height: 25px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 2s linear infinite;
	margin: 0 auto;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* multiselect user and role from setting  */

#multiselect-selectedRoles, #multiselect-promptusersetuproles { width: 100%; position: relative; }
#multiselect-selectedRoles .multiselect-btn, #multiselect-promptusersetuproles .multiselect-btn { width: 100%; padding: 10px; text-align: left; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; }
#multiselect-selectedRoles .multiselect-options, #multiselect-promptusersetuproles .multiselect-options {
	display: none;
	position: absolute;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
	max-height: 200px;
	overflow-y: auto;
	z-index: 10;
}
#multiselect-selectedRoles .multiselect-option, #multiselect-promptusersetuproles .multiselect-option {
	padding: 8px;
	cursor: pointer;
}
#multiselect-selectedRoles .multiselect-option:hover, #multiselect-promptusersetuproles .multiselect-option:hover {
	background-color: #f8f9fa;
}

/* Specific styles for the user selection dropdown */
.multiselect-users {
	width: 100%;
	position: relative;
}

.multiselect-btn-users {
	width: 100%;
	padding: 10px;
	text-align: left;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
}

.multiselect-options-users {
	display: none;
	position: absolute;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
	max-height: 200px;
	overflow-y: auto;
	z-index: 10;
}

.multiselect-option-users {
	padding: 8px;
	cursor: pointer;
}

.multiselect-option-users:hover {
	background-color: #f8f9fa;
}



/* mobile device css */
@media screen and (max-width: 782px) {
	input[type=checkbox], input[type=radio] {
		height: 16px !important;
		width: 0.5625rem !important;
	}
	.form-section{
		width: 100%;
	}
	.form-section-title{
		width: 40% !important;
		min-width: 0px !important;
	}
	.form-section-content{
		width: 40%;

	}
	input.days, input.url-redirction{
		width: 100% !important;
	}
	#authenticatorSetup .form-select{
		width: 100%;
	}
	#authenticatorSetup .border-1{
		border: none !important;
	}
	input.form-control.bg-gray {
		width: 100% !important;
	}
	button.btn.btn-primary.px-4.submit-btn {
		margin-right: 0px !important;
	}
	.w-30{
		width: 100% !important;
	}
}

@media (min-width: 992px) {
	button.btn.btn-primary.px-4.submit-btn {
		margin-right: 89px !important;
	}
	}


	.baar-wrapper {
	display: flex;
	justify-content: left;
	padding: 2rem;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	}

	.baar-card {
	background: linear-gradient(135deg, #034a81 0%, #022f57 100%);
	color: white;
	padding: 2rem;
	border-radius: 12px;
	max-width: 380px;
	width: 100%;
	box-shadow: 0 10px 30px rgba(2, 47, 87, 0.3);
	}

	.title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.5rem 0;
	line-height: 1.3;
	}

	.features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	}

	.features li {
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	}

	.check-icon {
	margin-right: 0.5rem;
	color: #4ade80;
	flex-shrink: 0;
	}

	.upgrade-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fcd34d;
	color: #034a81;
	padding: 0.875rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.2s ease;
	width: 100%;
	box-shadow: 0 4px 15px rgba(252, 211, 77, 0.3);
	}

	.upgrade-button:hover {
	background: #fbbf24;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(252, 211, 77, 0.4);
	}

	.arrow-icon {
	margin-left: 0.5rem;
	}

	@media (max-width: 480px) {
	.baar-wrapper {
		padding: 1rem;
	}

	.baar-card {
		padding: 1.5rem;
	}
	}