@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

// custom default css
.gap {
	&-1 {
		gap: 4px;
	}
	&-2 {
		gap: 8px;
	}
	&-3 {
		gap: 15px;
	}
	&-4 {
		gap: 24px;
	}
	&-5 {
		gap: 48rem;
	}
}

.row-gap {
	&-1 {
		row-gap: 4px;
	}

	&-2 {
		row-gap: 8px;

		&-5 {
			row-gap: 10px;
		}
	}

	&-3 {
		row-gap: 12px;
	}

	&-4 {
		row-gap: 15px;
	}

	&-5 {
		row-gap: 20px;
	}
}

.bg-transparent {
	background: transparent !important;
}

    .sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link {
        width: auto !important;
    }

	body.rnfi-listing-page .dataTables_wrapper .dataTables_filter label,
body.rnfi-listing-page .dataTables_wrapper .dataTables_length label,
body.rnfi-listing-page .dataTables_wrapper .dataTables_info {
	display: flex;
	align-items: center;
}

body.layout-fixed.rnfi-ui-ready .content-wrapper {
	min-height: calc(100vh - 56px) !important;
}

.sidebar-mini.sidebar-collapse.layout-fixed .brand-link img.collapsed-img {
        width: 30px;
    }

@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse.layout-fixed .brand-link {
        width: auto;
    }
}

.dataTables_length {
	label {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			left: 90px;
			top: 45%;
			transform: translateY(50%);
			    display: inline-block;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
		}
	}

	select {
		padding-right: 15px !important;
	}
}

.form-control {
	height: auto;
	padding: 10px 38px 10px 14px;
	border-radius: 4px;
	border-color: #e1e8f0;
}

.custom-select-wrapper {
	position: relative;

  select.form-control {
	appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  }

  &::after {
  content: "";
  	border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    margin-left: -4px;
    margin-top: -2px;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 10px;
}
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
	border-radius: 4px;
	padding: 10px 38px 10px 14px;
	border-color: #e1e8f0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

body.rnfi-lead-list-page .rnfi-lead-card .table th,
body.rnfi-lead-list-page .rnfi-lead-card .table td {
    overflow-wrap: unset !important;
}

// common CSS

body {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	
	&.rnfi-bank-dashboard,
	&.rnfi-lead-list-page,
	&.rnfi-listing-page,
	&.rnfi-zone-page {
		.rnfi-status-topbar,
		.rnfi-zone-bank-topbar {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 18px 22px;
			margin-bottom: 18px;
			flex-wrap: wrap;

			.rnfi-status-topbar-left {
				display: flex;
				align-items: center;
				gap: 14px;
				flex-wrap: wrap;
			}
			.rnfi-status-topbar-right {
				display: flex;
				align-items: center;
				gap: 14px;
				flex-wrap: wrap;
			}
		}

		.rnfi-status-bank-switcher,
		.rnfi-bank-switcher,
		.rnfi-status-bank-switcher,
		.rnfi-zone-bank-switcher {
			display: flex;
			align-items: center;
			gap: 10px;
			flex-wrap: nowrap;
			min-width: 0;
			overflow: visible;
			white-space: nowrap;
			.dropdown {
				position: relative;

				.dropdown-menu {
					min-width: 220px;
					margin-top: 10px;
					border: 1px solid #d7e5f2;
					border-radius: 16px;
					box-shadow: 0 12px 24px rgba(15, 64, 110, 0.12);
					padding: 10px;
					z-index: 1080;

					.search-box {
						position: relative;

						&::before {
							content: "\f002";
							font-family: "Font Awesome 6 Free";
							font-weight: 900;
							position: absolute;
							left: 1px;
							top: 50%;
							transform: translateY(-50%);
							font-size: inherit;
						}

						input[type="search"] {
							width: 100%;
							padding: 6px 10px 6px 25px;
							border: none;
							font-size: 13px;
							outline: 0 !important;
							border-bottom: 1px solid #4c8deb;
						}
					}
				}
				.dropdown-item {
					border-radius: 12px;
					color: #23324d;
					font-size: 14px;
					font-weight: 500;
					padding: 10px 0px;
					white-space: normal;
					&:active,
					&.active {
						background: #eef6ff;
						color: #0c5a96;
					}

					input[type="checkbox"] {
						accent-color: #26a548;
						color: #fff;
					}
				}
			}

			.dropdown-header {
				color: #0c5a96;
				font-size: 12px;
				font-weight: 700;
				letter-spacing: 0.04em;
				padding: 8px 14px 4px;
				text-transform: uppercase;
			}
			.dropdown-divider {
				margin: 8px 0;
				border-top-color: #e7eef7;
			}
		}

		.rnfi-status-bank-chip,
		.rnfi-lead-list-page,
		.rnfi-status-bank-chip,
		.rnfi-status-bank-chip,
		.rnfi-zone-bank-chip,
		.rnfi-bank-chip {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 42px;
			padding: 10px 22px;
			border-radius: 999px;
			border: 1px solid #cad7e6;
			background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 100%);
			color: #23324d;
			font-size: 11px;
			font-weight: 600;
			line-height: 1.1;
			text-decoration: none;
			box-shadow: none;
			transition:
				background 0.2s ease,
				color 0.2s ease,
				border-color 0.2s ease;
			&:hover {
				color: #0c5a96;
				border-color: #0c5a96;
				text-decoration: none;
			}
			&:focus {
				color: #0c5a96;
				border-color: #0c5a96;
				text-decoration: none;
			}

			&.is-active {
				background: #0c5a96;
				border-color: #0c5a96;
				color: #ffffff;
			}

			&.rnfi-status-bank-chip-more,
			&.rnfi-status-bank-chip-more {
				min-width: 54px;
				padding-left: 16px;
				padding-right: 16px;
			}
		}

		.rnfi-status-stage-tabs {
			display: inline-flex;
			align-items: center;
			gap: 0;
			border: 1px solid #d4dce7;
			border-radius: 18px;
			background: #ffffff;
			overflow: hidden;
		}
		.rnfi-status-stage-tab {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 160px;
			min-height: 42px;
			padding: 10px 18px;
			background: transparent;
			color: #17253c;
			font-size: 14px;
			font-weight: 500;
			text-decoration: none;
			border-radius: 18px;
			&:last-child {
				border-right: 0;
			}

			&.is-active {
				background: linear-gradient(180deg, #0cab6c 0%, #26a548 100%);
				color: #ffffff;
				font-weight: 600;
			}
		}
	}

	&.rnfi-lead-list-page {
		.rnfi-push-notification-modal {
			.rnfi-modal-close-btn {
				top: 6px;
				right: 10px;

			}
		}
	}
	
}

.table-striped tbody tr {
	&:nth-of-type(odd) {
		background-color: #fff;
	}
	&:nth-of-type(even) {
		background-color: #e8f1ff;
	}
}

table .btn-group-sm > .btn,
table .btn-sm {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 11px;
}

.btn-success {
	color: #fff;
	background: linear-gradient(180deg, #0cab6c 0%, #26a548 100%);
	border-color: #28a745;
	box-shadow: none;
}

.btn-cancel-outline {
	color: #f32828;
	background: transparent;
	border-color: #f32828;
	box-shadow: none;
}

body.rnfi-bank-dashboard.layout-fixed.rnfi-ui-ready .main-sidebar {
	z-index: 1055;
}

@media (max-width: 991.98px) {
	body.layout-fixed.rnfi-ui-ready.rnfi-sidebar-open::before {
		z-index: 1000;
	}
}


// below Css from home > CallingLeads

// span.multiselect-native-select {
//     >.form-control {
// 		+.btn-group {
// 			.multiselect {
// 				&.text-center {
// 					text-align: left !important;
// 				}
// 			}
// 		}
// 	}
// }

// main css

.body.layout-fixed.rnfi-ui-ready .rnfi-header-toggle {
	@media (max-width: 991.98px) {
		position: static;
	}
}

.notify-bar {
	display: flex;
	flex-direction: column;
	position: fixed;
	right: -100%;
	top: 0;
	height: 100vh;
	width: 100%;
	max-width: 500px;
	padding: 0;
	transition: 0.1s ease;
	z-index: 9;
	background-color: #fff;

	.dropdown-head {
		padding: 20px 25px 0;
		h6 {
			font-weight: 700;
			font-size: 20px;
		}

		.clear {
			font-weight: 600;
			font-size: 14px;
			color: #2563eb;
		}

		i {
			font-size: 20px;
			cursor: pointer;
		}
	}

	.dropdown-body {
		margin: 0 -5px;
		padding: 20px 15px;
		max-width: 100%;
		overflow-y: auto;

		.notify-item {
			padding: 10px;
			box-shadow: 0px 0px 4px 0px #00000040;
			border-radius: 18px;

			h6 {
				font-weight: 700;
				font-size: 16px;
				color: #111827;
				margin-bottom: 0;
			}

			small {
				color: #9ca3af;
				font-weight: 400;
				font-size: 12px;
			}

			p {
				font-weight: 400;
				font-size: 14px;
				line-height: 150%;
				color: #6b7280;
				margin-bottom: 0;
			}
		}
	}

	&.show {
		right: 0;
	}
}

.filter-wrap {
	position: fixed;
	right: 20px;
	bottom: 0;
	z-index: 9;

	.btn-filter {
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-weight: 500;
		font-size: 16px;

		img {
			margin-bottom: -35px;
		}

		+ .dropdown-menu {
			min-width: 270px;
			backdrop-filter: blur(8px);
			box-shadow: 0px 0px 4px 2px #00000017;
			background-color: #fff;
			margin: 0;
			padding: 0;
			border-radius: 18px;

			.card-head {
				background: #020c2d;
				font-weight: 600;
				font-size: 14.54px;
				padding: 10px 25px;
				color: #fff;
				border-radius: 18px 18px 0 0;
			}

			.card-body {
				background: #fff;
				padding: 10px 25px;
				border-radius: 0 0 18px 18px;

				label {
					font-size: 15px;
					margin-bottom: 5px;
					color: #1e2939;
				}

				input {
					border: 1px solid #97999a61;
					color: #000;
					padding: 10px;
					border-radius: 8px;
					width: 100%;

					&::placeholder {
						color: #9a9a9a;
					}
				}

				button {
					border-radius: 50px;
					padding: 10px 25px;
					border: none;
					color: #d2192b;

					&.btn-apply {
						background: linear-gradient(180deg, #41b55e 0%, #47bc65 100%);
						color: #fff;
					}
				}
			}

			&.show {
				display: flex;
				flex-direction: column;
				left: auto !important;
				right: -50px;
    			top: 35px !important;
			}
		}
	}
}

.page-notify {
	color: #4B5563;
	background-color: #F9FAFB !important;

	h5 {
		font-size: 18px;
		font-weight: 700;
	}

	p {
		color: inherit;
	}

	.notify-aside {
		h4 {
			font-size: 14px;
			padding: 10px;
			margin-left: 15px;
			border-bottom: 2px solid #1E8BD0;
			display: inline-block;
		}

		.notify-aside-inner {
			display: flex;
			flex-direction: column;
		}

		.notify-item {
			margin: 0;
			padding: 10px 8px;
			
			&.active {
				background-color: #fff;
			}

			h6 {
				margin-bottom: 0;

				+p {
					margin-bottom: 0;
				}
			}

			.status {
				font-weight: 600;
				font-size: 10px;
				border-radius: 24px;
				padding: 4px 10px;

				&::before {
					content: '';
					display: inline-block;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					margin-right: 5px;
				}

				&.orange {
					color: #92400E;
					background-color: #FEF3C7;

					&::before {
						background-color: #F59E0B;
					}
				}
				&.blue {
					color: #1E40AF;
					background-color: #DBEAFE;

					&::before {
						background-color: #3B82F6;
					}
				}
				&.green {
					color: #065F46;
					background-color: #D1FAE5;

					&::before {
						background-color: #10B981;
					}
				}
			}
		}
	}

	.notify-body {
		border-left: 1px solid #DDDDDD;
	}

	.heading {
		padding: 10px 15px;
		border-bottom: 1px solid #DDDDDD;

		h5 {
			font-size: 14px;
		}

		p {
			font-size: 13px;
		}
	}

	.notify-body-inner {
		padding: 10px 15px;

		h3 {
			font-size: 24px;
			font-weight: 700;
		}
	}
}

.rnfi-lead-view-section-stack {
	.rnfi-lead-detail-card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}