/* Container holding the tabs */
.tabs-container {
	display: flex; /* Flex layout for the tabs */
	width: 100%; /* Full width */
	background-color: #f4f4f4; /* Default background color */
	padding: 4px;
	border-radius: 8px;
	margin-top: 16px;
	margin-bottom: 16px;
}

.tab {
	flex: 1; /* Ensures each tab takes 50% of the container */
	padding: 4px; /* Padding around the text */
	text-align: center; /* Center the text */
	font-family: inherit; /* Inherit font family */
	font-size: 12px; /* Font size */
	font-weight: 500; /* Medium font weight */
	color: #18181B; /* Text color */
	border-radius: 8px; /* Rounded corners */
	box-sizing: border-box; /* Includes padding and border in width */
	padding-top: 7px;
	padding-bottom: 7px;
}

/* Active Tab Styling */
.tab-active {
	background-color: #ffffff; /* White background for active tab */
	box-shadow:
0px 1px 3px 0px rgba(0, 0, 0, 0.1), /* First shadow */
0px 1px 2px 0px rgba(0, 0, 0, 0.06); /* Second shadow */
	color: #18181B; /* Text color */
	cursor: default;
}

.tab-inactive {
	cursor: pointer; /* Pointer cursor */
}

.filters-divider {
	height: 1px;
	width: 100%;
	background-color: #E4E4E7;
}

.vertical-divider {
	height: 100%;
	width: 1px;
	background-color: #E4E4E7;
}

/* Base button styles */
.ad-button {
	position: relative;
	border-radius: 6px;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
	padding: 8px 12px;
	text-align: center;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.1s;
	text-decoration: none;
}

.ad-button.w-100 {
	width: 100%;
}

.ad-button:hover {
	opacity: 0.9;
}

.ad-button.bg-primary:hover {
	opacity: 1;
	background-color: #2d1fab;
}

.ad-button:disabled {
	cursor: default;
}

.ad-button img {
	width: 16px;
	height: 16px;
}

/* Background color variants */
.ad-button.bg-primary {
	background-color: #3727c6;
	color: #FAFAFA;
}

.ad-button.bg-secondary {
	background-color: #18181B;
	color: #FAFAFA;
}

.ad-button.bg-white {
	background-color: #FFFFFF;
	border: 1px solid #E4E4E7;
	color: #18181B;
}

.ad-button.bg-white:hover {
	background-color: #f4f4f5;
}

/* Size variants */
.ad-button.small {
	padding: 8px 12px;
	height: 32px;
	font-size: 12px;
	font-weight: 500;
}

.ad-button.medium {
	padding: 8px 12px;
	height: 36px;
	font-size: 14px;
	font-weight: 500;
}

.ad-button.large {
	padding: 8px 12px;
	height: 40px;
	font-size: 14px;
	font-weight: 500;
}

/* Icon spacing */
.ad-button img {
	margin-right: 8px;
}

#credits {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 100px;
	border: 1px solid #E4E4E7;
	background-color: #FAFAFA;
	height: fit-content;
	cursor: default;
}
#credits span {
	font-size: 12px;
	color: #18181B;
	white-space: nowrap;
	line-height: 19px;
}

.user-links {
	all: unset;
	font-weight: 500;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 12px;
	cursor: pointer;
	border-radius: 6px;
}
.user-links:hover {
	background-color: #FAFAFA;
}

#modal-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(24 24 27 / 75%);
	opacity: 0; /* Initially hidden */
	visibility: hidden; /* Initially hidden */
	transition: opacity 0.2s ease;
}
#modal-container.show {
	opacity: 1; /* Show the container */
	visibility: visible;
}
.modal-box {
	position: relative;
	width: 480px;
	min-height: 100px;
	border-radius: 8px;
	background-color: white;
	padding: 24px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
	transform: scale(0.9); /* Initial scale */
	opacity: 0; /* Initially hidden */
	transition: opacity 0.2s ease, transform 0.2s ease;
}
#modal-container.show .modal-box {
	transform: scale(1); /* Final scale */
	opacity: 1; /* Final opacity */
}

#close-modal {
	position: absolute;
	right: 16px;
	top: 16px;
	cursor: pointer;
	opacity: .8;
}
#close-modal:hover {
	opacity: 1;
}

#modal-alert {
	display: flex;
	flex-direction: column;
}
#modal-alert-header {
	display: flex;
	gap: 8px;
	align-items: center;
}
.modal-title {
	font-size: 20px;
	font-weight: 600;
	color: #18181B;
}
.modal-text {
	margin: 0;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 400;
	color: #71717A;
}
.modal-alert-buttons {
	margin-top: 16px;
	display: flex;
	gap: 8px;
	justify-content: end;
}
.modal-help {
	display: inline-flex;
	font-size: 12px;
	color: #71717A;
	line-height: 16px;
	text-decoration: underline;
	margin: 0;
	margin-top: 4px;
	cursor: pointer;
}

#modal-dm-contacts {
	margin-top: 16px;
}
.modal-dm-person {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.modal-dm-details {
	display: flex;
	flex-direction: column;
}
.modal-dm-name {
	font-size: 14px;
	margin-bottom: 2px;
	font-weight: 500;
}
.modal-dm-name span {
	font-size: 10px;
	font-weight: 400;
	color: #71717A;
}
.modal-dm-title {
	font-size: 12px;
	font-weight: 400;
	color: #71717A;
}
.modal-dm-linkedin {
	opacity: .8;
}
.modal-dm-linkedin:hover {
	opacity: 1;
}
.modal-dm-divider {
	background-color: #E4E4E7;
	height: 1px;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

#modal-export-main {
	margin-top: 20px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#signin {
	width: 370px;
	display: flex;
	flex-direction: column;
	background-color: white;
	padding: 24px;
	gap: 20px;
	border-radius: 12px;
	border: 1px solid #E4E4E7;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}
#signin-top {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#signin-top img {
	width: 32px;
}
#signin-top h4 {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}
#signin-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#signin-alert {
	font-size: 12px;
	font-weight: 400;
	color: #DC2626;
	line-height: 16px;
}
#signin-text {
	font-size: 12px;
	font-weight: 400;
	color: #71717A;
	line-height: 16px;
}
.input-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.input-text label {
	font-size: 14px;
	color: #18181B;
	font-weight: 500;
}
.input-text input {
	border: 1px solid #E4E4E7;
	color: #18181B;
	height: 36px;
	border-radius: 6px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 14px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
.input-text input:focus {
	border-color: #3727c6;
}
input::placeholder {
	color: #71717A;
}

#sidebar-filters {
	padding-top: 16px;
	padding-bottom: 16px;
	padding-right: 8px;
	margin-left: -16px;
	padding-left: 16px;
	overflow-y: scroll;
}
.filters-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.filters-label {
	display: flex;
	gap: 6px;
}
.filters-label label {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}
.filters-label.big label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}
.filters-label img, .info-question img {
	opacity: .8;
	width: 12px;
	cursor: pointer;
}
.filters-label img:hover, .info-question img:hover {
	opacity: 1;
}
.filters-textarea {
	height: 32px;
	border: 1px solid #E4E4E7;
	color: #18181B;
	border-radius: 6px;
	padding: 8px;
	font-size: 12px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
.filters-textarea:focus {
	border-color: #3727c6;
}
.filters-textarea::placeholder {
	color: #71717A;
}

.filters-select {
	display: flex;
	position: relative;
	gap: 4px;
	height: 32px;
	background-color: white;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #E4E4E7;
	color: #18181B;
	border-radius: 6px;
	padding: 8px;
	font-size: 12px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}
.filters-select.focused {
	border-color: #3727c6;
}
.filters-select-labels {
	display: flex;
	gap: 4px;
	font-size: 12px;
	flex-grow: 1;
}
.filters-select-labels-muted {
	color: #71717A;
	cursor: pointer;
	flex-shrink: 0;
}
.filters-select-labels-selected {
	width: 100%;
	cursor: pointer;
	font-weight: 500;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filters-select-labels-selected.center {
	text-align: center;
}
.filters-select-labels-selected.right {
	text-align: right;
}
.filters-select-options {
	display: none;
	flex-direction: column;
	max-height: 240px;
	overflow: auto;
	border: 1px solid rgb(228, 228, 231);
	color: rgb(24, 24, 27);
	border-radius: 6px;
	padding: 8px;
	font-size: 12px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
	background: white;
	z-index: 1000;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
	opacity: 0;
	transform-origin: top center;
	transform: scale(.975);
	position: absolute;
	width: 100%;
	top: 38px;
}
.filters-select-option {
	font-weight: 500;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 8px;
	padding-right: 8px;
	cursor: pointer;
	border-radius: 6px;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.filters-select-options.yesandno {
	justify-content: center;
	flex-direction: row!important;
	gap: 8px;
}
.filters-select-label-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.filters-select-option:hover {
	background-color: #FAFAFA;
}
.filters-select-option-label {
	cursor: pointer;
	display: flex;
	align-content: center;
	align-items: center;
	gap: 4px;
}
.filters-select-option-label label {
	cursor: pointer;
}
.filters-select-option-label .descriptive {
	color: #71717A;
}
.check-hidden {
	visibility: hidden;
}
.filters-select-block {
	transition-delay: .2s;
	position: relative;
}
.filters-two-columns {
	display: flex;
	gap: 8px;
}
.filters-two-columns-col {
	width: 100%;
}

.radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.radio-item {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.radio-input {
	display: none;
}
.radio {
	width: 14px;
	height: 14px;
	border: 1px solid white;
	box-shadow: 0 0 0 1px #18181b, 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
	border-radius: 50%;
	background-color: #fff;
	position: relative;
	transition: background-color 0.2s, border-color 0.2s;
}
.radio-input:checked + .radio {
	background-color: #3727c6;
	box-shadow: 0 0 0 1px #3727c6, 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
}
.radio-button-text {
	font-size: 12px;
	color: #18181b;
	font-weight: 500;
}

.filters-functions {
	flex-direction: row!important;
	padding-top: 2px;
	padding-bottom: 2px;
}

.filters-functions .radio-item {
	gap: 6px!important;
}

.filters-functions .radio-item .radio {
	width: 10px!important;
	height: 10px!important;
}

.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	left: 1px;
}

.checkbox-item {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.checkbox-input {
	display: none;
}

.checkbox {
	min-width: 14px;
	height: 14px;
	border-radius: 2px; /* Different from the radio button */
	background-color: #fff;
	box-shadow: 0 0 0 1px black; /* Solid border effect */
	position: relative;
	transition: background-color 0.2s, box-shadow 0.2s;
}

.checkbox-input:checked + .checkbox {
	background-color: #3727c6;
	box-shadow: 0 0 0 1px #3727c6;
}

.checkbox-input:checked + .checkbox::after {
	content: "";
	background: url("../public/checkbox.svg") no-repeat center center;
	background-size: contain;
	position: absolute;
	width: 12px; /* Adjust the size to fit within the checkbox */
	height: 12px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.checkbox-button-text {
	font-size: 12px;
	color: #18181b;
	font-weight: 500;
}

.label-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.popup ul li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 210px;
	line-height: 20px;
}
.popup .popup-divider {
	display: block;
	width: 100%;
	height: 1px;
	background-color: #e4e4e7;
	margin-top: 8px;
	margin-bottom: 8px;
}

.popup-bold {
	font-weight: 500;
}

.info-row .show-popup {
	width: 12px;
	cursor: pointer;
}

.popup .popup-description {
	color: #44444b;
}

.modal-title {
	cursor: default;
}

.gap-0 {
	gap: 0!important;
}
.small-notice {
	font-size: 12px;
	margin-top: 1px;
}

.tooltip-space {
	height: 4px;
	display: block;
}