:root {
    /*PRIMARY COLORS*/
    --primary-background: rgba(111, 111, 210, 0.08);
    --primary-background-medium: rgba(111, 111, 210, 0.25);
    --primary-background-active: rgba(111, 111, 210, 0.35);

    --primary-background-strong: #6f6fd2;
    --primary-background-strong-hover: #5959a8;
    --primary-background-strong-active: #43437e;

    --primary-text: #6f6fd2;
    --primary-text-hover: #5959a8;
    --primary-text-strong: #43437e;
    --primary-text-button: #ffffff;

    --primary-border-button: #6f6fd2;
    --primary-border-card: rgba(111, 111, 210, 0.35);

    /*NEUTRAL COLORS*/
    --neutral-background-base: #ffffff;
    --neutral-background-base-40: rgba(255, 255, 255, 0.4);
    --neutral-background-medium: #f7f7f6;
    --neutral-background: #ffffff;
    /*--neutral-background-hover: #F7F7F6;*/
    --neutral-background-hover: #f6f6f7;
    --neutral-background-active: #dcdde0;

    --neutral-text: #181b2f;
    --neutral-text-weak: #565967;
    --neutral-text-disabled: #9798a1;
    --neutral-text-invert: #ffffff;

    --neutral-border: #e7e7e9;
    --neutral-border-hover: #dcdde0;
    --neutral-border-active: #c5c6cb;

    /*WARNING COLORS*/
    --warning-background: rgba(229, 174, 64, 0.12);
    --warning-background-medium: rgba(247, 196, 14, 0.2);
    --warning-background-active: rgba(247, 196, 14, 0.24);
    --warning-background-strong: #f7c40e;
    --warning-background-strong-hover: #deb00d;
    --warning-background-strong-active: #c69d0b;

    --warning-text: #c69d0b;
    --warning-text-hover: #b9930b;

    --warning-border: #f7c40e;

    /*DANGER COLORS*/
    --alert-background: rgba(208, 76, 53, 0.12);
    --alert-background-medium: rgba(208, 76, 53, 0.2);
    --alert-background-active: rgba(208, 76, 53, 0.24);
    --alert-background-strong: #d04c35;
    --alert-background-strong-hover: #a63d2a;
    --alert-background-strong-active: #7d2e20;

    --alert-text: #a63d2a;
    --alert-text-hover: #9c3928;

    --alert-border: #bb4430;

    /*SUCCESS COLORS*/
    --success-background: rgba(0, 169, 145, 0.12);
    --success-background-hover: rgba(0, 169, 145, 0.2);
    --success-background-medium: rgba(0, 169, 145, 0.2);
    --success-background-active: rgba(0, 169, 145, 0.24);
    --success-background-strong: #00a991;
    --success-background-strong-hover: #009883;
    --success-background-strong-active: #008774;

    --success-text: #00a991;
    --success-text-hover: #009883;

    --success-border: #00a991;

    --gradient-card: linear-gradient(180deg, #dcdcf2 0%, #f2e4dc 100%);
    --32-px-2-rem: 32px;
    /*!*--primary-strong: #686AEE;*!*/
    /*--primary-strong: #686AEE;*/
    /*--primary-medium: #6F6FD240;*/
    /*--neutral: #181B2F;*/
    /*--neutral-weak: #565967;*/
    /*--neutral-hover: #DCDDE0;*/
    /*--neutral-40: #FFFFFF;*/

    --color-blue-6008: rgba(111, 111, 210, 0.08);
}

html {
    font-family: Inter, sans-serif;
}

.title-h2-sb {
    /* Title/H2 [SB] */
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    /* 133.333% */
}

.title-h3-sb {
    /* Title/H3 [SB] */
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    /* 140% */
}

.title-h4-sb {
    /* Title/H4 [SB] */
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    /* 150% */
}

.title-h4-r {
    /* Title/H4 [R] */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.body-14-r {
    /* Body/14 [R] */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.body-14-sb {
    /* Body/14 [SB] */
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 142.857% */
}

.body-12-sb {
    /* Body/12 [SB] */
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    /* 133.333% */
}

.body-12-r {
    /* Body/12 [R] */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

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

.primary-border {
    border-color: rgba(111, 111, 210, 0.08);
}

label.primary-background:hover,
a.primary-background:hover,
button.primary-background:hover {
    background-color: var(--primary-background-medium);
}

.primary-background-strong {
    background-color: var(--primary-background-strong);
}

.primary-background-strong:hover {
    background-color: var(--primary-background-strong-hover);
}

.primary-background-medium {
    background-color: var(--primary-background-medium);
}

.primary-background-active {
    background-color: var(--primary-background-active);
}

.success-background-medium {
    background-color: var(--success-background-medium);
}

.neutral-background-base {
    background-color: var(--neutral-background-base);
}

.neutral-background-base-40 {
    background-color: var(--neutral-background-base-40);
}

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

.text-disabled {
    color: var(--neutral-text-disabled);
}

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

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

.neutral-text-weak {
    color: var(--neutral-text-weak);
}

.neutral-text-disabled {
    color: var(--neutral-text-disabled);
}

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

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

.custom-gradients-block {
    border-radius: 16px;
    border: 1px solid rgba(104, 106, 238, 0.2);
    background: var(--gradient-card);
}

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

.flex-1-0-0 {
    flex: 1 0 0;
}

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

.align-middle {
    vertical-align: middle;
}

.yt-card {
    border-radius: 4px;
    border: 1px solid #e7e7e9;
    background: var(--neutral-background-base);

    /* Card */
    /* box-shadow: 0px 4px 16px 0px rgba(24, 27, 47, 0.04); */
}

.square-card {
    border-radius: 16px;
    border: 1px solid var(--neutral-border);
    background: var(--neutral-background-base);

    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.progress {
    width: 100%;
    height: 10px;
    background-color: var(--primary-background);
    background-image: none;
    border-radius: 25px;
    overflow: hidden;
    /* Ensure rounded corners are visible */
    position: relative;
    margin: 0;
    border: 1px solid var(--primary-background-medium, rgba(111, 111, 210, 0.25));
}

.progress .bar {
    height: 100%;
    background-color: var(--primary-background-strong);
}

.yt-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.yt-btn-m {
    height: 40px;
    padding: 10px 20px;
    gap: 8px;
}

.inline-flex {
    display: inline-flex;
}

.yt-btn-s {
    height: 34px;
    padding: 6px 12px;
    gap: 4px;
}

.sidebar li {
    display: flex;
    height: 40px;
    padding: 16px 10px 16px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 0px 25px 25px 0px;
    background: none;
}

.sidebar li.active {
    background: var(--primary-background);
}

.yt-btn-tertiary {
    border: 1px solid var(--neutral-border-hover);
    background: var(--neutral-background);
}

.yt-btn-tertiary:hover {
    border: 1px solid var(--neutral-border-active);
    background: var(--neutral-background-hover);
}

/*.yt-btn-tertiary:hover {*/
/*    border: 1px solid var(--neutral-background-hover);*/
/*    background: var(--neutral-background-hover);*/
/*}*/

/*.yt-btn:hover {*/
/*    color: var(--primary-background-strong);*/
/*    border-color: var(--primary-background-strong)*/
/*}*/

.yt-btn-primary {
    border: 1px solid var(--primary-background-strong);
    background: var(--primary-background-strong);
}

.yt-btn-primary:hover {
    color: var(--neutral-background-hover);
    border-color: var(--neutral-background-hover);
}

.yt-btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--primary-background);
}

.active-border {
    border: var(--primary-background-strong);
}

.xp-badge {
    border-radius: 100px;
    border: 1px solid var(--primary-background-medium);
    background: var(--neutral-background-base-40);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.badge-sm {
    padding: 4px 8px 4px 4px;
}

.badge-lg {
    padding: 0 12px;
    height: 40px;
    border-radius: 100px;
}

.gap-32 {
    gap: var(--32-px-2-rem);
}

.padding-32 {
    padding: var(--32-px-2-rem);
}

sup {
    color: var(--alert-text);
}

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

.alert-background {
    background-color: var(--alert-background);
}

.neutral-background-hover {
    background: var(--neutral-background-hover);
}

.custom-dropdown-menu li {
    list-style: none;
    position: relative;
}

.custom-dropdown-menu th {
    text-align: left;
}

.custom-dropdown-menu .menu-link {
    color: #888b93;
}

.custom-dropdown-menu .submenu-list {
    display: none;
    position: absolute;
    right: -25px;
    top: -60px;
    background-color: var(--neutral-background);
    border: 1px solid var(--neutral-border-hover);
    border-radius: 8px;
    padding: 12px 16px;
}

.custom-dropdown-menu .menu-list>li:hover .submenu-list {
    display: block;
}

.custom-dropdown-menu .submenu-link {
    color: var(--neutral-text);
    font-weight: 400;
    font-size: 14px;
}

.custom-dropdown-menu .submenu-link:hover {
    --tw-text-opacity: 1;
    color: var(--primary-text);
}

.elevation-10 {
    box-shadow: 0px 2px 8px 0px rgba(24, 27, 47, 0.1);
}

.custom-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.custom-table-row {
    padding: 14px 8px;
    display: table-row;
    border: none;
    float: none;
    margin: 0;
    box-shadow: none;
}

.custom-table-cell {
    display: table-cell;
    padding: 14px 8px;
}

.caption-text-sb {
    /* Caption/CAPS [SB] */
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
    /* 120% */
    letter-spacing: 0.2px;
    text-transform: uppercase;
    padding-bottom: 12px;
    padding-left: 20px;
}

.sidebar-item {
    margin-top: 0;
}

.sidebar-item>a {
    padding: 10px 10px 10px 20px;
}

.btn-layout {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

.primary-border-card {
    border: 1px solid var(--primary-border-card);
}

.bucketlist-content input {
    height: 40px;
    width: 380px;
}

.bucketlist-content input::placeholder {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--neutral-text-weak);
}

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

@media (max-width: 640px) {
    .xs\:neutral-border-hover {
        border: 1px solid var(--neutral-border-hover);
    }
}

.neutral-border-dashed-hover {
    border: 1px dashed var(--neutral-border-hover);
}

.rounded-100 {
    border-radius: 100px;
}

.warning-background {
    background-color: var(--warning-background);
}

.success-background {
    background-color: var(--success-background);
}

.success-background-strong {
    background-color: var(--success-background-strong);
}

.border-warning-background {
    border: 1px solid var(--alert-background);
}

.border-success-background-active {
    border: 1px solid var(--success-background-active);
}

.filter-multi-select>.dropdown-menu>.filter>input {
    background: url('/img/user/search-icon.svg') no-repeat scroll 12px 12px !important;
    line-height: 40px;
    border: 1px solid #dcdde0 !important;
    outline: 0;
}

.initials {
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background-color: rgba(111, 111, 210, 0.08);
    border-radius: 100px;
    margin-right: 4px;
    font-size: 8px;
    color: #565967;
}

#select2-categories-results li:last-child {
    background-color: rgba(111, 111, 210, 0.08);
    height: 32px;
    border-radius: 8px;
    color: #6F6FD2;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    margin-bottom: 10px;
}

/*#contacts.filter-multi-select .items.dropdown-item .custom-control:last-child .custom-control-label {*/
/*    display: inline-block !important;*/
/*    color: var(--neutral-text, #181B2F) !important;*/
/*    padding: 0 !important;*/
/*    background-color: transparent !important;*/
/*}*/


.select2-container--default .select2-selection--multiple {
    border: 1px solid #DCDDE0;
    border-radius: 8px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #DCDDE0;
    background: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(111, 111, 210, 0.08) !important;
    height: 32px;
    line-height: 32px;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 400;
    position: relative;
    padding-right: 30px !important;
    padding-left: 8px;
    border: 0;
    top: 3px !important;
    margin-top: 1px !important;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    font-size: 14px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    height: 40px;
}

.select2-selection__choice__remove {
    content: "";
    background-image: url('/img/close.svg');
    /* Replace with your image URL */
    background-size: contain;
    /* Ensure the image fits well */
    background-repeat: no-repeat;
    width: 16px;
    /* Adjust based on your image size */
    height: 16px;
    /* Adjust based on your image size */
    margin-right: 5px;
    /* Adjust spacing if needed */
    vertical-align: middle;
    /* Aligns the image with the text */
    position: absolute;
    right: 8px;
    overflow: hidden;
    line-height: 38px;
    top: 8px;
    color: red;
}

.select2-selection__choice>span.name-wrapper {
    display: flex;
    align-items: center;
}

.select2-selection.select2-selection--multiple {
    position: relative;
}

.select2-selection.select2-selection--multiple::before {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 12px;
    right: 12px;
    background: url('/img/select2-arrow.svg');
    background-repeat: no-repeat;
    background-position: center center;
}

select[name="people"]+span.select2 .select2-selection__choice {
    padding-left: 4px;
}

.neutral-text-invert {
    color: rgba(255, 255, 255, 0.7);
}

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

.hover\:neutral-background-hover:hover {
    background-color: var(--neutral-background-hover);
}

.marketplace-footer {
    background: var(--gradient-card, linear-gradient(180deg, #DCDCF2 0%, #F2E4DC 100%));
    bottom: 0;
    left: 0;
    padding: 0px 130px;
    width: 100%;
}

@media (max-width: 1280px) {
    .marketplace-footer {
        padding: 0px 64px;
    }
}

@media (max-width: 1024px) {
    .marketplace-footer {
        padding: 0px 32px;
    }
}

@media (max-width: 768px) {
    .marketplace-footer {
        padding: 0px 16px;
    }
}

.marketplace-banner {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(244, 201, 245, 0.30) 0%, rgba(244, 201, 245, 0.00) 100%), linear-gradient(0deg, rgba(199, 197, 250, 0.40) 0%, rgba(199, 197, 250, 0.40) 100%), #FFF;
}

.scrollbar-hide {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}


/* /////////////////////////////////// */


.range_container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sliders_control {
    position: relative;
    min-height: 50px;
}

.form_control {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    cursor: pointer;

    z-index: 50;
    padding: 0px;
    margin: 0px;
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb:hover {
    background: black;
}

input[type=range]::-webkit-slider-thumb:active {
    background: black;
}

input[type=range]::-webkit-slider-thumb {
    background: black;
}

input[type=range]::-moz-range-thumb:hover {
    background: black;
}

input[type=range]::-moz-range-thumb:active {
    background: black;
}

input[type=range]:focus::-moz-range-thumb {
    background: black;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: green;
    /* z-index: 100; */
}

input[type=range]:focus::-moz-range-track {
    background: yellow;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: transparent;
    pointer-events: none;
}

.fromSlider,
.toSlider {
    display: hidden;
    height: 0px;
    z-index: 10;
    background-color: transparent;
}

.customPlaceholder::placeholder {
    color: #565967 !important;
}