:root {
	--standard-black: #1d1f23;
	--standard-red: #f43f5e;
	--standard-red-transparent: rgba(244, 63, 94, 0.2);
	--standard-orange: #f97316;
	--standard-orange-transparent: rgba(249, 115, 22, 0.2);
	--standard-yellow: #fdba74;
	--standard-yellow-transparent: rgba(253, 186, 116, 0.2);
	--standard-green: #10b981;
	--standard-green-transparent: rgba(16, 185, 129, 0.2);
	--standard-teal: #5aafa7;
	--standard-teal-transparent: rgba(90, 175, 167, 0.2);
	--standard-blue: #0891b2;
	--standard-blue-transparent: rgba(8, 145, 178, 0.1);
	--standard-blue-transparent-02: rgba(8, 145, 178, 0.2);
	--standard-purple: #817eec;
	--standard-purple-transparent: rgba(129, 126, 236, 0.2);
	--standard-darkgray: #b3b3b3;
	--standard-darkgray-transparent: rgba(179, 179, 179, 0.2);
	--standard-gray: #cbcbcb;

	--acc-return: #fdcfaf;

	--standard-highlight: #ffffff;
	--inverted-highlight: #0a0a0a;

	--tab-background: #f8f7f7;
	--tab-color: #9f9f9f;

	--main-background: #e1dfde;
	--main-input: #f5f5f5;
	--main-color: #1d1f23;
	--main-light-color: #737373;
	--main-tag-background: #bbbbbb;
	--main-tag-background-transparent: rgba(187, 187, 187, 0.3);
	--main-tag-color: #ffffff;
	--main-divider: #dddddd;

	--main-help: #fff;

	--box-background: #efeeed;
	--box-highlight: #f5f5f5;

	--counter-background: #141517;

	--dropdown-background: #efeeed;
	--dropdown-color: #383d44;

	--button-background: #aaa;
	--button-color: #efeeed;

	--hover-background: #ffffff;
	--hover-color: #2d3036;

	--table-header-background: #ebe9e8;

	--background-down: #d5d4d3;

	--custom-border: #d5d8dc;
	--custom-hover: #c4c9cf;

	--text-primary: var(--standard-black);
}
/* =============================================================================== */
/* HELP DESK STYLES NEW */
/* =============================================================================== */

/* LAYOUT */

.help-single-layout {
	padding: 24px;
}

.help-desk-layout {
	display: flex;
	width: 100%;
	padding-block: 24px;

	.content {
		flex-grow: 1;
		padding-inline: 48px;
		max-width: 1440px;
		margin: auto;
	}

	.table-of-contents {
		display: grid;
		position: sticky;
		top: 24px;
		width: 280px;
		min-width: 280px;
		height: 100%;

		h5 {
			color: var(--standard-black);
			font-weight: 400;
		}

		a {
			color: var(--standard-blue) !important;
			transition: all 0.2s ease-in-out;
			font-weight: 400;
		}
		a:hover {
			color: var(--standard-black) !important;
			font-weight: 400;
		}
	}
	@media (max-width: 991px) {
		.table-of-contents {
			display: none;
		}
	}

	.w-120 {
		width: 120px;
	}

	.mb-0 {
		margin-bottom: 0px;
	}
	.m-0 {
		margin: 0px;
	}
	.mb-4 {
		margin-bottom: 4px;
	}
	.mb-8 {
		margin-bottom: 8px;
	}
	.mb-12 {
		margin-bottom: 12px;
	}
	.mb-16 {
		margin-bottom: 16px;
	}
	.mb-24 {
		margin-bottom: 24px;
	}
	.mb-32 {
		margin-bottom: 32px;
	}
	.mb-48 {
		margin-bottom: 48px;
	}
	.mb-64 {
		margin-bottom: 64px;
	}
	.mb-78 {
		margin-bottom: 78px;
	}

	.mt-4 {
		margin-top: 4px;
	}
	.mt-8 {
		margin-top: 8px;
	}
	.mt-16 {
		margin-top: 16px;
	}
	.mt-24 {
		margin-top: 24px;
	}
	.mt-52 {
		margin-top: 52px;
	}

	.p-0 {
		padding: 0px;
	}
	.pb-0 {
		padding-bottom: 0px;
	}
	.pb-4 {
		padding-bottom: 4px;
	}
	.pb-8 {
		padding-bottom: 8px;
	}
	.pb-16 {
		padding-bottom: 16px;
	}
	.pb-24 {
		padding-bottom: 24px;
	}
	.pb-48 {
		padding-bottom: 48px;
	}

	.index-title {
		display: flex;
		align-items: center;
		justify-content: start;
		gap: 4px;

		img {
			height: 56px;
			width: auto;
		}
	}
	.index-title-sm {
		display: flex;
		align-items: center;
		justify-content: start;
		gap: 4px;

		img {
			height: 44px;
			width: auto;
		}
	}

	.section-title {
		margin-bottom: 20px;
		/* padding-bottom: 8px; */
		/* border-bottom: 1px solid var(--box-background); */
	}

	.subsection-title {
		/* margin-bottom: 16px; */
		margin-bottom: 24px;
	}

	ul,
	ol {
		font-size: 15px;
		margin-bottom: 0;
		padding-left: 16px;
	}

	.help-desk-img {
		max-width: 100%;
		border-radius: 12px;
		border: 1px solid var(--box-background);
		pointer-events: none;
	}
	.help-desk-img.border-0 {
		border: none;
		max-width: 100%;
		border-radius: 12px;
	}

	.help-desk-img.radius-0 {
		border-radius: 0;
	}

	.help-desk-img-sm {
		max-width: 50%;
		border-radius: 12px;
		border: 1px solid var(--box-background);
		pointer-events: none;
	}

	.help-desk-table-wrapper {
		overflow: auto;
		border-radius: 12px;
		border: 1px solid var(--box-background);
	}

	.help-desk-table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		border-style: hidden;
		max-width: 100%;

		th,
		td {
			padding: 12px;
			text-align: left;
			vertical-align: top;
			border-bottom: 1px solid var(--box-background);
		}

		th {
			background-color: var(--box-background);
			font-weight: 400;
		}

		.left-col {
			border-right: 1px solid var(--box-background);
			font-weight: 400;
			width: fit-content;
		}
	}

	/* =================================
    TEXT STYLES (BOLD,...) !!!
    ==================================== */
	.font-400 {
		font-weight: 400;
	}

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

	.text-default {
		font-size: 15px;
		font-weight: 400;
	}

	.text-lg {
		font-size: 16px;
	}

	.text-secondary {
		color: var(--text-secondary);
	}

	.text-terciary {
		color: var(--text-terciary);
	}
	.text-center {
		text-align: center;
	}

	.info-title {
		font-weight: 400;
		letter-spacing: 0.085ch;
		text-transform: uppercase;
		font-size: 13px !important;
	}

	.shoutout {
		color: var(--standard-black);
		padding: 16px;
		border-radius: 8px;
		background-color: var(--standard-blue-transparent);

		h5 {
			color: var(--standard-black);
		}
	}

	.shoutout.warning {
		padding: 16px;
		border-radius: 8px;
		background-color: var(--standard-orange-transparent);
		color: var(--standard-orange);

		h5 {
			color: var(--standard-orange);
		}
	}

	.dot-green,
	.dot-red,
	.dot-blue,
	.dot-orange,
	.dot-purple,
	.dot-gray,
	.dot-white,
	.dot-yellow,
	.dot-black {
		display: inline-block;
		height: 10px;
		width: 10px;
		margin-right: 4px;
		border-radius: 3px;

		&.dot-green {
			background-color: var(--standard-green);
		}
		&.dot-red {
			background-color: var(--standard-red);
		}
		&.dot-blue {
			background-color: var(--standard-blue);
		}
		&.dot-orange {
			background-color: var(--standard-blue);
		}
		&.dot-purple {
			background-color: var(--standard-purple);
		}
		&.dot-gray {
			background-color: var(--standard-gray);
		}
		&.dot-white {
			background-color: #fff;
			border: 1px solid var(--custom-border);
		}
		&.dot-black {
			background-color: #000000;
		}
		&.dot-yellow {
			background-color: var(--standard-yellow);
		}
	}

	.help-cards-container {
		display: grid;
		gap: 16px;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
	.help-card-new-link {
		display: grid;
		grid-template-columns: 1fr;
		padding: 16px;
		border-radius: 8px;
		border: 1px solid var(--box-background);
		background-color: transparent;
		gap: 12px;
		transition: all 0.2s ease-in-out;

		.help-card-title {
			display: flex;
			gap: 12px;
			justify-content: start;
			align-items: start;
			flex-direction: column;
		}
		img {
			height: 50px;
			width: auto;
		}
		img[src="/help/assets/mobile-icon.jpg"] {
			border-radius: 8px;
		}

		h4 {
			font-size: 16px;
			color: var(--standard-black);
			font-weight: 500;
		}
		p {
			color: var(--text-secondary) !important;
			font-size: 14px !important;
			font-weight: 400 !important;
		}
	}
	.help-card-new-link:hover {
		background-color: var(--card-bg);
		cursor: pointer;
		p {
			color: var(--text-secondary) !important;
			font-size: 14px !important;
			font-weight: 400 !important;
		}
	}
	.img-card {
		display: grid;
		grid-template-columns: 1fr;
		/* padding: 16px; */
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid var(--box-background);
		background-color: transparent;
		gap: 12px;

		h5 {
			margin: 0 16px 0px 16px;
		}
		p {
			margin: -6px 16px 16px 16px;
			color: var(--text-secondary);
		}
	}
}

.help-card-module-link {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--box-background);
	background-color: transparent;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.2s ease-in-out;

	img {
		height: 38px;
		width: auto;
	}

	h4 {
		font-size: 16px;
		color: var(--standard-black);
		font-weight: 500;
	}
	p {
		color: var(--text-secondary) !important;
		font-size: 14px !important;
		font-weight: 400 !important;
	}
}

.help-card-module-link:hover {
	background-color: var(--card-bg);
	cursor: pointer;
	p {
		color: var(--text-secondary) !important;
		font-size: 14px !important;
		font-weight: 400 !important;
	}
}

.inline-help .modal-header .title {
	font-weight: 500;
	letter-spacing: -0.02ch;
}

.inline-help .help-qr-wrapper {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
}

.accordion-item {
	margin-bottom: 8px;
	border: 1px solid var(--box-background);
	border-radius: 8px;
	overflow: hidden;
}

/* Style the header */
.accordion-header {
	padding: 8px 16px;
	background-color: transparent;
	cursor: pointer;
	font-size: 15px;
	font-weight: 400;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.2s ease-in-out;

	&:hover {
		background-color: var(--main-input);
	}
}

.chevron-icon {
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease;
	color: var(--text-primary);
}

.accordion-header.active .chevron-icon {
	transform: rotate(180deg);
}

.accordion-content {
	padding: 0 16px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
	color: var(--text-secondary);

	p:not(:last-child) {
		margin-bottom: 4px;
	}
}

.accordion-content.active {
	max-height: fit-content;
	padding: 8px 16px 12px 16px;
}