/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
Variables
*/

:root {
	--primary-font: "HvDTrial Pluto Sans", sans-serif;
	--color-primary: #012f6d;
	--color-primary-50: #e8eff7;
	--color-accent: #ff3949;
	--color-black: #2c2c2c;
	--color-neutral: #e7e7e7;
	--color-white: #ffffff;
	--disabled-color: #b0b0b0;
	--text-red: red;
	--border-gray: #888888;
	--brand-pressed: #c80d1c;
}

/*
Utilities
*/

html,
body {
	font-family: var(--primary-font);
}

.flex {
	display: flex;
}

.flex--column {
	flex-direction: column;
}

.flex--center {
	align-items: center;
	justify-content: center;
}

.flex--center-y {
	align-items: center;
}

.flex--center-x {
	justify-content: center;
}

.overflow-x-auto {
	overflow-x: auto;
}

.bg-brand-pressed {
	background-color: var(--brand-pressed);
}

.rounded-full {
	border-radius: 999px;
}

.width-full {
	width: 100%;
}

.link,
.link a {
	width: 100%;
	text-decoration: none;
	color: var(--color-primary);
}

.no-underline {
	text-decoration: none;
}

.text-base {
	font-family: var(--primary-font), sans-serif !important;
	font-size: 16px;
	line-height: 22px;
}

.text-2xl {
	font-family: var(--primary-font), sans-serif !important;
	font-size: 24px;
	line-height: 32px;
}

.text-sm {
	font-family: var(--primary-font), sans-serif !important;
	font-size: 14px;
	line-height: 20px;
}

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

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

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

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

.text-center {
	text-align: center;
}

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

.font-normal {
	font-weight: 400;
}

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

.font-bold {
	font-weight: 700;
}

.py-4 {
	padding-top: 16px;
	padding-bottom: 16px;
}

.gap-1 {
	gap: 4px;
}

.gap-2 {
	gap: 8px;
}

.gap-4 {
	gap: 16px;
}

.gap-6 {
	gap: 24px;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.mt-1 {
	margin-top: 4px;
}

.mt-2 {
	margin-top: 8px;
}

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

.mb-4 {
	margin-bottom: 16px;
}

.mt-8 {
	margin-top: 32px;
}

.mt-6 {
	margin-top: 24px;
}

.mt-10 {
	margin-top: 40px;
}

.my-16 {
	margin-top: 64px;
	margin-bottom: 64px;
}

.py-2 {
	padding-top: 8px;
	padding-bottom: 8px;
}

.px-6 {
	padding-left: 24px;
	padding-right: 24px;
}

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

.rounded-lg {
	border-radius: 8px;
}

.rounded-xl {
	border-radius: 16px;
}

.rounded-2xl {
	border-radius: 32px;
}

.border {
	border: 1px solid var(--color-neutral);
}

.border-2 {
	border-width: 2px;
}

.border-accent {
	border-color: var(--color-accent);
}

.align-self-start {
	align-self: self-start;
}

.--show-on-desktop {
	display: none !important;
}

.--show-on-mobile {
	display: block !important;
}

@media all and (min-width: 1024px) {
	.--show-on-desktop {
		display: block !important;
	}

	.--show-on-mobile {
		display: none !important;
	}
}

.hidden {
	display: none;
}

/*
  Fluent Forms Override
*/

.fluentform input,
.fluentform select {
	font-family: var(--primary-font), sans-serif !important;
}

.fluentform input {
	padding: 13px 16px !important;
}

.fluentform select {
	height: 48px !important;
}

.choices__item {
	line-height: 34px !important;
}

.frm-fluent-form .choices__list--dropdown {
	max-height: none !important;
	overflow-y: unset !important;
}

.fluentform label {
	color: var(--color-primary);
	text-transform: uppercase;
	font-weight: 400 !important;
	line-height: 22px !important;
}

.fluentform .ff-el-group.ff-el-form-hide_label {
	margin: 0 !important;
}

.ff-text-right.ff_submit_btn_wrapper {
	display: flex;
	justify-content: flex-end;
}

.fluentform input[type="checkbox"] {
	height: 24px;
	width: 24px;
	border-radius: 6px;
	border-color: #d1d1d1;
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 0 !important;
	margin-right: 4px !important;
}

.fluentform input[type="checkbox"]:checked {
	background-color: var(--color-accent);
	background-position: center;
}

.fluentform input[type="checkbox"]:not(:disabled):checked {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23ffffff" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

.fluentform input[type="file"] {
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.dropzone-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dropzone-container .dropzone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	padding: 16px;
	width: 100%;
	border: 1px dashed #d1d1d1;
	border-radius: 8px;
}

.dropzone-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 4px;
}

.dropzone-selected {
	display: flex;
	width: 100%;
	gap: 12px;
}

.dropzone-selected--item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* File selected */
.dropzone[data-selected="true"] {
	justify-content: left;
	align-items: start;
	gap: 2px;
	border-style: solid;
}

.dropzone[data-selected="true"] .dropzone--icon {
	display: none;
}

.dropzone-label,
.dropzone-label__desc,
.dropzone-label__link {
	color: var(--color-black);
	font-size: 14px;
	line-height: 22px;
	text-transform: none;
}

.dropzone-label__desc {
	color: #989692;
	font-size: 12px;
}

.dropzone-label__link {
	color: var(--color-primary);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	width: fit-content;
}

.dropzone--icon {
	width: 44px;
	height: 44px;
	background-color: #f5f5f5;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*
  Override Swiper Styles
*/

.slider-container {
	width: 100%;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	gap: 24px;
}

.slider {
	position: relative;
	width: 100%;
	/* aspect-ratio: 2.46 / 1; */
	aspect-ratio: 16 / 10;
	height: 100%;
	/* height: 300px; */
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	opacity: 0;
	pointer-events: none;
}

.slider.show {
	opacity: 1;
	pointer-events: initial;
}

.swiper-container {
	width: 100%;
	/* height: 100%; */
	/* aspect-ratio: 2.46 / 1; */
	aspect-ratio: 16 / 10;
}

.swiper-slide {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	/* Fallback color */
}

.swiper-slide-item {
	display: flex;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-color: var(--color-neutral);
}

.swiper-slide-overlay,
.swiper-slide-overlay--full {
	width: 50%;
	box-sizing: content-box;
	max-width: 580px;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	text-align: left;
	gap: 32px;
	color: #fff;
	text-decoration: none;
	padding: 128px;
}

.swiper-slide-overlay--full {
	width: 100%;
	max-width: 100%;
}

.swiper-button {
	opacity: 0;
	color: var(--color-accent) !important;
	width: 45px !important;
	height: 90px !important;
	padding: 30px 12px !important;
	background-color: rgba(1, 47, 109, 0.5);
	transition: opacity 0.2s ease;
}

.swiper-container:hover>.swiper-button {
	opacity: 1;
}

.swiper-button::after {
	font-size: 32px;
}

.swiper-button-prev {
	left: 0 !important;
	border-radius: 0 90px 90px 0;
}

.swiper-button-prev::after {
	margin-right: 8px;
}

.swiper-button-next {
	right: 0 !important;
	border-radius: 90px 0 0 90px;
}

.swiper-button-next::after {
	margin-left: 8px;
}

.swiper-pagination {
	position: static;
}

.swiper-pagination-bullet {
	background: rgba(231, 231, 231, 1);
	opacity: 1;
	width: 14px !important;
	height: 14px !important;
	border-radius: 999px !important;
	transition: width 0.3s ease;
}

.swiper-pagination-bullet-active {
	background: var(--color-accent) !important;
	width: 80px !important;
	position: relative;
	overflow: hidden;
}

.swiper-pagination-bullet-active::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(231, 231, 231, 1);
	animation: progressRight 5000ms linear forwards;
	/* Animation time equal to slide speed */
}

@keyframes progressRight {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}

/*
 Post Views
*/
.post-views .post-views-count {
	color: var(--border-gray);
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
}

/*
 Main Components  
*/

.button {
	cursor: pointer;
	padding: 12px 24px;
	border-radius: 999px;
	background-color: var(--color-accent);
	border: 0 solid transparent;
	color: var(--color-white);
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.15px;
	line-height: 24px;
}

.button--secondary {
	cursor: pointer;
	padding: 12px 24px;
	border-radius: 999px;
	background-color: transparent;
	border: 2px solid var(--color-accent);
	color: var(--color-black);
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.15px;
	line-height: 24px;
}

.button--neutral {
	cursor: pointer;
	width: fit-content;
	border: 1px solid #d1d1d1;
	background-color: transparent;
	color: var(--color-primary);
	height: 40px;
	padding: 0 24px;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 0.15px;
	gap: 12px;
}

.container--full {
	width: 100%;
	max-width: 100vw;
}

.button:disabled {
	cursor: not-allowed;
	background-color: var(--disabled-color);
}

.container {
	width: 100%;
	max-width: 1440px;
}

.container-sm {
	width: 100%;
	max-width: 964px;
}

.container--padding {
	padding: 64px 24px 40px 24px;
	gap: 40px;
	margin: 0 auto;
}

.title-container {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 24px 24px;
	gap: 40px;
	margin: 0 auto;
}

@media all and (min-width: 1024px) {
	.title-container {
		padding: 64px 24px 40px 24px;
	}
}

.placeholder__container {
	display: flex;
	grid-column: span 2 / span 2;
	justify-content: center;
	align-items: center;
	width: 100%;
}

/*
  About Page
*/

.title {
	text-transform: uppercase;
	font-size: 32px;
	font-weight: 700;
	color: #012f6d;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.card {
	display: flex;
	flex-direction: column;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	gap: 16px;
	padding: 32px;
	box-shadow:
		0px 1px 3px 0px rgba(0, 0, 0, 0.1),
		0px 5px 5px 0px rgba(0, 0, 0, 0.09),
		0px 11px 7px 0px rgba(0, 0, 0, 0.05),
		0px 20px 8px 0px rgba(0, 0, 0, 0.01),
		0px 31px 9px 0px rgba(0, 0, 0, 0);
	border-radius: 16px;
	height: 100%;
}

.card--graphic {
	width: 140px;
	height: 140px;
}

.card--title {
	text-transform: uppercase;
	font-size: 24px;
	line-height: 30px;
	font-weight: 800;
	color: #012f6d;
}

.separator,
.footer-divider {
	display: block;
	width: 100%;
	height: 16px;
	background-repeat: repeat-x;
}

.footer-divider {
	height: 24px;
	rotate: 180deg;
}

.footer-divider--primary {
	display: block;
	width: 100%;
	height: 24px;
	background-repeat: repeat-x;
}

#milestone-container {
	width: 100%;
}

#milestone-container .milestone {
	padding: 64px 0;
	width: 100%;
}

/*
  Career Page
*/

.card-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.card--graphic--small {
	width: 80px;
	height: 80px;
}

.form--job-vacancy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-radius: 16px;
	border: 1px solid #d1d1d1;
	padding: 24px 24px 8px 24px;
	height: fit-content;
}

.background-hero {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right 33%;
	background-color: var(--color-primary-50);
}

.post--content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.post--content--faq {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.post--content h3 {
	text-transform: uppercase;
	font-size: 22px;
	line-height: 28px;
	font-weight: 800;
	color: #012f6d;
}

.post--content h4 {
	font-size: 16px;
	line-height: 28px;
	font-weight: 800;
	color: #012f6d;
}

.post--content ul,
.post--content ol {
	margin-left: 16px;
}

.post--comment {
	padding-top: 64px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.post--comment textarea {
	width: 100%;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(231, 231, 231, 1);
	border-radius: 8px;
	padding: 12px 16px;
	min-height: 78px;
}

.post--comment--header {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	width: 100%;
	font-size: 22px;
	font-weight: 800;
	color: var(--color-primary);
	text-transform: uppercase;
}

.comments-area {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.comment-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 24px;
}

.comment-content {
	display: flex;
	flex-direction: column;
	padding: 16px 24px;
	border: 1px solid rgba(231, 231, 231, 1);
	border-radius: 8px;
	width: 100%;
	gap: 8px;
	min-height: 98px;
}

.comment-item {
	width: 100%;
}

.comment-content--item {
	gap: 4px;
	text-decoration: none;
	font-size: 16px;
	line-height: 22px;
	color: var(--color-black);
}

.comment-content--item span {
	font-weight: 500;
}

.comment-body {
	display: flex;
	gap: 16px;
}

.comment-content--item--reply {
	display: flex;
	flex-direction: row;
	align-self: self-end;
	align-items: center;
	gap: 10px;
}

.reply {
	align-self: center;
}

.reply a {
	text-decoration: none;
	font-size: 14px;
	color: rgba(51, 54, 82, 1);
	line-height: 20px;
}

.comment-meta {
	display: flex;
	justify-content: center;
	width: fit-content;
	gap: 16px;
}

.comment-meta svg {
	width: 12px;
	height: 12px;
}

.comment-author {
	display: flex;
	border-radius: 999px;
	width: 36px;
	height: 36px;
	max-width: 36px;
}

.comment-list .children {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 24px;
	padding-inline-start: 52px !important;
}

.comment-list .children::before {
	content: none !important;
}

.children .children {
	padding-inline-start: 80px !important;
}

.comment-reply-title {
	display: flex;
	width: 100%;
	justify-content: space-between;
	color: rgba(176, 176, 176, 1);
	font-size: 12px;
	padding-bottom: 8px;
}

.comment-reply-title a {
	text-decoration: none;
	font-size: 12px;
	color: var(--color-accent);
	line-height: 22px;
}

.button--back {
	width: fit-content;
	border: 1px solid #d1d1d1;
	background-color: transparent;
	color: var(--color-primary);
	height: 40px;
	padding: 0 24px;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 0.15px;
	gap: 12px;
}

/*
  Event Page
*/
.card--event {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 16px;
	height: 100%;
}

.card--event--tag {
	font-size: 14px;
	color: var(--color-accent);
}

.card--event--content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.card--event--thumbnail {
	width: 100%;
	height: 270px;
	border-radius: 12px;
	object-fit: cover;
}

.card--event--title,
.card--event--title--small {
	color: var(--color-primary);
	font-size: 22px;
	line-height: 28px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
}

.card--event--title--small {
	font-size: 16px;
	font-weight: 500;
}

.card--event--button-container {
	display: flex;
	gap: 16px;
}

.card--event--button--primary {
	width: 100%;
	background-color: var(--color-accent);
	color: var(--color-white);
	height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 0.15px;
}

.card--event--button {
	width: 100%;
	border: 2px solid var(--color-accent);
	background-color: transparent;
	color: var(--color-black);
	height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 0.15px;
}

.card--event--date {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--color-primary-50);
	height: 48px;
	padding: 12px 24px;
	border-radius: 8px;
}

.card--event--date--title {
	color: var(--color-black);
	text-decoration: none;
	font-weight: 500;
	height: 24px;
	line-height: 24px;
}

.card--event--date--relative {
	margin-left: auto;
	font-size: 12px;
	color: rgba(136, 136, 136, 1);
	font-weight: 500;
	line-height: 0px;
}

.card--event--info {
	display: flex;
	flex-direction: row;
	gap: 8px;
	width: 100%;
	align-items: center;
}

.card--event--info--author {
	font-size: 14px;
	color: var(--color-accent);
}

.card--event--info--date {
	font-size: 14px;
	color: var(--color-primary);
}

.card-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.tab-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color-primary-50);
	gap: 32px;
	margin: 0 auto;
	width: 100%;
	padding: 0 24px 0 24px;
}

.tab {
	display: flex;
	background-color: rgba(231, 231, 231, 1);
	border-radius: 16px 16px 0 0;
}

.tab a {
	background-color: rgba(231, 231, 231, 1);
	text-decoration: none;
	color: var(--color-primary);
	opacity: 0.5;
	text-transform: uppercase;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	/* line-height: 52px; */
	height: 64px;
	padding: 16px 36px;
	width: 100%;
	border-radius: 16px 16px 0 0;
}

.tab a[data-active="true"] {
	opacity: 1;
	background-color: var(--color-white);
	color: var(--color-primary);
	box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

.banner {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border: 1px solid var(--color-neutral);
	border-radius: 16px;
	width: 100%;
}

.banner--content {
	width: 100%;
}

.banner--action-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 355px;
}

.banner--action--button--primary {
	width: 100%;
	background-color: var(--color-accent);
	color: var(--color-white);
	height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 0.15px;
}

.banner--action--button {
	width: 100%;
	border: 2px solid var(--color-accent);
	background-color: transparent;
	color: var(--color-black);
	height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 0.15px;
}

.filter--container {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	justify-content: space-between;
	gap: 24px;
}

.filter--search {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid rgba(209, 209, 209, 1);
	padding: 0 24px;
	border-radius: 999px;
}

.filter--search input {
	height: 40px;
	border: 0;
	width: 100%;
}

.filter--dropdown {
	width: 100%;
}

.filter--dropdown select {
	padding: 12px 16px;
	width: 100%;
	max-width: 379px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.filter--tag {
	display: flex;
	align-items: center;
	gap: 16px;
}

.filter--tag--item {
	position: relative;
	width: fit-content;
	border: 2px solid var(--color-accent);
	background-color: transparent;
	color: var(--color-black);
	height: 40px;
	padding: 12px 24px;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 0.15px;
	user-select: none;
	cursor: pointer;
	flex-shrink: 0;
	white-space: nowrap;
}

.filter--tag--item input[type="radio"] {
	display: none;
}

.filter--tag--item.active {
	background-color: var(--color-accent);
	color: #fff;
}

.filter--tag--item--container {
	display: flex;
	gap: 16px;
	width: 100%;
	max-width: 500px;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}

.filter--tag-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	box-shadow: 0px 1.5px 3px 0px rgba(0, 0, 0, 0.25);
	background-color: white;
	border-radius: 999px;
	border: none;
	z-index: 1;
	display: hidden;
	cursor: pointer;
}

.nav-prev {
	margin-right: -32px;
}

.nav-next {
	margin-left: -32px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.filter--tag--item--container::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.filter--tag--item--container {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.comment-avatar {
	overflow: hidden;
	width: 36px;
	height: 36px;
	max-width: 36px;
	border-radius: 999px;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	border: 0.13px solid rgba(217, 217, 217, 1);
	box-shadow: 0px 0px 1.34px 0px rgba(0, 0, 0, 0.2) inset;
}

.toast {
	background-color: var(--color-primary) !important;
	padding: 16px;
	font-weight: 500;
	line-height: 24px;
	border-radius: 8px;
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
}

.toast .toast--message {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.toast .toast--message span {
	color: #c8c5c5;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.toastify-avatar {
	margin: 0 !important;
}

.profile-container {
	display: flex;
	flex-direction: column;
	padding: 40px 16px;
	margin-top: 64px;
	gap: 32px;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
}

.profile-container .profile--image-container {
	overflow: hidden;
	min-width: 73px;
	min-height: 73px;
	max-width: 73px;
	max-height: 73px;
}

@media all and (min-width: 1024px) {
	.profile-container {
		margin-top: 0;
		padding: 40px 24px;
	}

	.profile-container .profile--image-container {
		width: 146px;
		height: 146px;
	}
}

@media all and (min-width: 1024px) {
	.filter--container {
		flex-direction: row;
	}
}

/*
  Breakpoints
*/

@media (min-width: 640px) {
	.slider {
		aspect-ratio: 16 / 9.5;
	}

	.swiper-container {
		aspect-ratio: 16 / 9.5;
	}
}

@media all and (min-width: 1024px) {
	.title {
		font-size: 45px !important;
		line-height: 52px;
	}

	.tab {
		width: fit-content;
		border-radius: 24px 24px 0 0;
	}

	.tab a {
		font-size: 45px;
		font-weight: 700;
		line-height: 52px;
		height: 100px;
		padding: 24px 64px;
		border-radius: 24px 24px 0 0;
	}
}

@media (min-width: 1280px) {
	.slider {
		aspect-ratio: 2.46 / 1;
	}

	.swiper-container {
		aspect-ratio: 2.46 / 1;
	}
}