@import url('./_variables.css');

/* .inter-<uniquifier> {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  } */


html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

main {
    flex: 1;
}


/******* BOOTSTRAP RESET *******/

h1,
h2,
h3,
h4,
h5,
h6 {
    font: inherit;
    line-height: 1.2;
}

img {
    max-width: 100%;
}

span {
    display: inline-block;
}

a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.dropdown-menu {
    --bs-dropdown-bg: #373737f5;
}

.dropdown-item {
    --bs-dropdown-item-padding-x: 1em;
    --bs-dropdown-item-padding-y: 0.5em;
    font-weight: 300;
    border-radius: 0.3em;
}

.dropdown-item img {
    width: 1.5em;
    margin-right: 0.25em;
}


/* ---------------------------------------- */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 100em;
    /* --bs-btn-padding-x: 1.25em;
    --bs-btn-padding-y: 0.65em; */
    --bs-btn-padding-x: 1.25em;
    --bs-btn-padding-y: 0.85em;
    line-height: normal;
}

.btn:active {
    transform: scale(0.95);
}

.btn.btn-expand {
    --bs-btn-padding-x: 6em;
    --bs-btn-padding-y: 1em;
}

.btn.btn-expandX {
    --bs-btn-padding-x: 2em;
    --bs-btn-padding-y: 1em;
}

.btn-outline {
    border: 1px solid currentColor;
}


.btnBgImg {
    font-size: 1.05rem;
    width: 2.5em;
    height: 2.5em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--btnBgImgSize, 1.25em);
    border-radius: 0.25em;
    margin-right: 0.25em;
}

.btnBgImg:hover {
    background-color: var(--btnBgClrHvr);
}

.btnBgImg--edit {
    --btnBgClrHvr: var(--clr-blk50);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYyXzQzNikiPgo8cGF0aCBkPSJNMy41NTc5IDE3LjA1MzZDMy43NTU1NSAxNy4wNTM2IDMuNzk1MDggMTcuMDMzOSAzLjk3Mjk2IDE2Ljk5NDNMNy41MzA1OSAxNi4yODI4QzcuOTA2MTIgMTYuMTg0IDguMjgxNjUgMTYuMDA2MSA4LjU3ODEyIDE1LjcwOTZMMTcuMTk1NSA3LjA5MjIzQzE4LjUxOTcgNS43Njc5OSAxOC41MTk3IDMuNDk1MDUgMTcuMTk1NSAyLjE3MDgxTDE2LjQ2NDIgMS4zOTk5OUMxNS4xNCAwLjA3NTc1NTcgMTIuODQ3MyAwLjA3NTc1NTcgMTEuNTIzIDEuMzk5OTlMMi45MDU2NyAxMC4wMzcyQzIuNjI4OTYgMTAuMzEzOSAyLjQzMTMyIDEwLjcwOTIgMi4zMzI0OSAxMS4wODQ3TDEuNTgxNDQgMTQuNjgxOUMxLjQ4MjYyIDE1LjM1MzkgMS42ODAyNiAxNi4wMDYxIDIuMTU0NjEgMTYuNDgwNUMyLjUzMDE0IDE2Ljg1NiAzLjA4MzU1IDE3LjA1MzYgMy41NTc5IDE3LjA1MzZaTTQuMjI5OSAxMS40NjAyTDEyLjg0NzMgMi44MjMwNUMxMy40MjA0IDIuMjQ5ODcgMTQuNDY4IDIuMjQ5ODcgMTUuMDIxNCAyLjgyMzA1TDE1Ljc3MjQgMy41NzQxMUMxNi40NDQ0IDQuMjQ2MTEgMTYuNDQ0NCA1LjE5NDgxIDE1Ljc3MjQgNS44NDcwNUw3LjE3NDgzIDE0LjQ4NDJMMy41MTgzNyAxNS4wOTY5TDQuMjI5OSAxMS40NjAyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE3LjExNiAxOC4yNzkxSDIuNTI5NzZDMS45NTY1OCAxOC4yNzkxIDEuNTgxMDUgMTguNjU0NiAxLjU4MTA1IDE5LjIyNzhDMS41ODEwNSAxOS44MDA5IDIuMDU1NDEgMjAuMTc2NSAyLjUyOTc2IDIwLjE3NjVIMTcuMDM3QzE3LjYxMDIgMjAuMTc2NSAxOC4wODQ1IDE5LjgwMDkgMTguMDg0NSAxOS4yMjc4QzE4LjA2NDggMTguNjU0NiAxNy41OTA0IDE4LjI3OTEgMTcuMTE2IDE4LjI3OTFaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzYyXzQzNiI+CjxyZWN0IHdpZHRoPSIxOS43NjQ2IiBoZWlnaHQ9IjE5Ljc2NDciIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDAuNDExNzU4KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
}

.btnBgImg--delete {
    --btnBgClrHvr: var(--clr-red1);
    --btnBgImgSize: 1.6em;
    background-image: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmZmZmYiPgoNPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiLz4KDTxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgoNPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPiA8cGF0aCBkPSJNNiA3VjE4QzYgMTkuMTA0NiA2Ljg5NTQzIDIwIDggMjBIMTZDMTcuMTA0NiAyMCAxOCAxOS4xMDQ2IDE4IDE4VjdNNiA3SDVNNiA3SDhNMTggN0gxOU0xOCA3SDE2TTEwIDExVjE2TTE0IDExVjE2TTggN1Y1QzggMy44OTU0MyA4Ljg5NTQzIDMgMTAgM0gxNEMxNS4xMDQ2IDMgMTYgMy44OTU0MyAxNiA1VjdNOCA3SDE2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+IDwvZz4KDTwvc3ZnPg==")
}

.btnBgImg--chat {
    --btnBgClrHvr: #407fee;
    --btnBgImgSize: 1.35em;
    background-image: url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOC4zMTIxIDIzLjM1MTFDMTcuNDQ2MyAyMy4wMjI4IDE2LjcwODEgMjIuNTk3OSAxNi4xMjY2IDIyLjE5OTVDMTQuODUxMyAyMi43MTU5IDEzLjQ1NzggMjMgMTIgMjNDNS45MjQ4NyAyMyAxIDE4LjA3NTEgMSAxMkMxIDUuOTI0ODcgNS45MjQ4NyAxIDEyIDFDMTguMDc1MSAxIDIzIDUuOTI0ODcgMjMgMTJDMjMgMTQuMjc4OCAyMi4zMDYgMTYuMzk4MyAyMS4xMTc5IDE4LjE1NTFDMjEuMDQyNSAxOS42MDc3IDIxLjgwNTQgMjAuOTIwMiAyMi41OTcyIDIyLjA4MTZDMjMuMjkwNyAyMy4wOTg3IDIzLjExNjcgMjMuOTE4NCAyMS44MjM2IDIzLjk5MTdDMjEuMjQ0IDI0LjAyNDUgMTkuOTkwMyAyMy45ODc0IDE4LjMxMjEgMjMuMzUxMVpNMyAxMkMzIDcuMDI5NDQgNy4wMjk0NCAzIDEyIDNDMTYuOTcwNiAzIDIxIDcuMDI5NDQgMjEgMTJDMjEgMTMuOTUwMyAyMC4zODA4IDE1Ljc1MzEgMTkuMzI4IDE3LjIyNjJDMTguODYyMiAxNy44NzgyIDE5LjEwMTggMTkuMDk5OCAxOS4yNjE2IDE5LjgwMTFDMTkuNDE2NyAyMC40ODE4IDE5Ljc1MzIgMjEuMjA1MSAyMC4wODU2IDIxLjgxMjNDMTkuNzY3NCAyMS43MzU2IDE5LjQxMTEgMjEuNjI4OCAxOS4wMjEyIDIxLjQ4MUMxOC4xMjM5IDIxLjE0MDcgMTcuMzgyNCAyMC42NjI0IDE2Ljg1OTQgMjAuMjYxQzE2LjU2MjYgMjAuMDMzMiAxNi4xNjM1IDE5Ljk5MDIgMTUuODI1IDIwLjE0OTRDMTQuNjY1NCAyMC42OTQ3IDEzLjM2OTcgMjEgMTIgMjFDNy4wMjk0NCAyMSAzIDE2Ljk3MDYgMyAxMlpNNyA5QzYuNDQ3NzIgOSA2IDkuNDQ3NzEgNiAxMEM2IDEwLjU1MjMgNi40NDc3MiAxMSA3IDExSDE3QzE3LjU1MjMgMTEgMTggMTAuNTUyMyAxOCAxMEMxOCA5LjQ0NzcxIDE3LjU1MjMgOSAxNyA5SDdaTTcgMTNDNi40NDc3MiAxMyA2IDEzLjQ0NzcgNiAxNEM2IDE0LjU1MjMgNi40NDc3MiAxNSA3IDE1SDE3QzE3LjU1MjMgMTUgMTggMTQuNTUyMyAxOCAxNEMxOCAxMy40NDc3IDE3LjU1MjMgMTMgMTcgMTNIN1oiIGZpbGw9IiNmZmZmZmYiLz4gPC9nPgoNPC9zdmc+")
}


.btn__pwg-tgl {
    background: transparent;
    outline: none;
    border: none;
}

.btn__pwg-tgl .eye-text {
    display: none;
}

/* ---------------------------------------- */

.sticky-thead {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}

.table.valign-middle th,
.table.valign-middle td {
    vertical-align: middle;
}

/* ---------------------------------------- */

.text-eclip {
    max-width: var(--text-eclip-width, 300px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------- */

.form-control,
.form-select {
    padding: 0.85em;
    font-weight: inherit;
}

.form-select:focus,
.form-control:focus {
    border-color: var(--clr-golden);
    box-shadow: none;
}

.form-label {
    font-weight: 400;
    margin-bottom: var(--form-label-gap, 0.85em);
}

.form-element {
    position: relative;
    margin-bottom: 2em;
}

.with-icon .form-control {
    padding-right: 4em;
}

.form-icon {
    position: absolute;
    top: 3.35em;
    right: 1em;
    color: var(--clr-golden);
}

.form-check {
    padding-left: 0;
}

.form-custom-check {
    position: relative;
}

.form-custom-check label {
    cursor: pointer;
}

.form-custom-check .form-check-input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    visibility: hidden;
}

.form-custom-check span {
    width: 1.1875em;
    height: 1.1875em;
    border: 1px solid #707070;
    border-radius: 0.2em;
    vertical-align: sub;
    margin-right: 0.4em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.form-custom-check .form-check-input:checked~span {
    border-color: var(--clr-golden);
    background-color: var(--clr-golden);
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8ZyBpZD0iSW50ZXJmYWNlIC8gQ2hlY2siPg0KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYgMTJMMTAuMjQyNiAxNi4yNDI2TDE4LjcyNyA3Ljc1NzMyIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L2c+DQo8L3N2Zz4=")
}

/* ---------------------------------------- */
.form-style-dark .form-control {
    --bs-border-color: #9a9a9a;
    --bs-border-radius: 0.625em;
}

.form-style-dark .form-control::placeholder {
    color: inherit;
    opacity: 0.8;
    font-weight: 300;
}

.form-style-dark .form-control:-ms-input-placeholder {
    color: inherit;
    opacity: 0.8;
    font-weight: 300;
}

.form-style-dark .form-control::-ms-input-placeholder {
    color: inherit;
    opacity: 0.8;
    font-weight: 300;
}


/*********** COMMON STYLES ***********/

.user-img {
    flex: 0 0 var(--user-img-size, 2.5rem);
    width: var(--user-img-size, 2.5rem);
    height: var(--user-img-size, 2.5rem);
    overflow: hidden;
}

.user-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-container {
    max-width: var(--container-width);
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.onlyX--logo {
    font-size: 2.8125rem;
}

.onlyX--logo-heading {
    font-family: var(--bs-heading-font);
    font-size: 2rem;
}

/* --------------------------------------------- */

.fs-heading-47 {
    font-family: var(--bs-heading-font);
    font-size: 2.9375rem;
}

.fs-desc-18 {
    font-size: 1.125rem;
    font-weight: 300;
}

.fs-desc-26 {
    font-size: 1.625rem;
    line-height: 1.5;
}

/* --------------------------------------------- */

.onlyX__chat {
    display: inline-flex;
}

.onlyX__chat div {
    max-width: 23ch;
    color: #000;
    background: #FFFFFF;
    font-size: 1.25rem;
    padding: 1em 2em;
    border-radius: 3em;
}

.onlyX__chat>span {
    border-radius: 50%;
}

.onlyX__chat span:nth-of-type(1) {
    width: 58px;
    width: 3.625em;
    /* height: 100px; */
    background: #2E0001;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);
    margin-left: -10px;
}

.onlyX__chat span:nth-of-type(2) {
    width: 41px;
    width: 2.5625em;
    /* height: 100px; */
    background: #4E0607;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);
    margin-left: -25px;
}

.onlyX__chat span:nth-of-type(3) {
    width: 35px;
    width: 2.1875em;
    /* height: 100px; */
    background: #790002;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);
    margin-left: -15px;
}

.onlyX__chat span:nth-of-type(4) {
    width: 23px;
    width: 1.4375em;
    /* height: 100px; */
    background: #9A0305;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);
    margin-left: -5px;
}

.onlyX__chat span:nth-of-type(5) {
    width: 10px;
    width: 0.625em;
    /* height: 100px; */
    background: #CF0003;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);
    margin-left: -3px;
}

/* --------------------------------------------- */

.onlyX__chatstrip {
    background-color: var(--clr-red1);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.onlyX__chatstrip .inner-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
}

.onlyX__chatstrip p {
    font-family: var(--bs-heading-font);
    font-size: 4.1875rem;
    line-height: 1.1;
}

.onlyX__chatstrip .btn {
    --bs-btn-font-size: 1.25rem;
}

.onlyX__chatstrip .heart-strip {
    position: absolute;
    bottom: 40px;
    right: -100px;
}

.onlyX__chatstrip .heart-strip path {
    opacity: 0;
    transition: 0.25s ease-in-out;
}

.onlyX__chatstrip .btn:hover~.heart-strip path {
    opacity: 1;
    transition: 0.5s ease-in-out calc(0.05s * calc(var(--i)));
}

/* --------------------------------------------- */

.onlyX__footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.onlyX__footer .footer-top-container {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}

.onlyX__footer .footer-btm-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px dashed #858585;
}

.onlyX__footer nav {
    flex: 1;
    line-height: 1;
}

.onlyX__footer nav ul {
    font-size: 1.125rem;
    font-weight: 400;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    gap: 3.5em;
}

.onlyX__footer nav ul li:not(:last-child) {
    border-right: 1px solid #fff;
    padding-left: 0.5em;
}

.onlyX__footer a:not(.btn):hover,
.onlyX__footer a:not(.btn):focus,
.onlyX__footer a:not(.btn).nav-actv {
    color: #ff3c3e;
}

.onlyX__footer .footer-ctas,
.onlyX__footer .footer-links {
    display: -ms-inline-grid;
    display: inline-grid;
    grid-auto-flow: column;
    gap: 0.85em;
    list-style: none;
}

.onlyX__footer .footer-links {
    line-height: 1;
    margin-left: auto;
}

.onlyX__footer .footer-links>*+* {
    border-left: 1px solid #fff;
    padding-left: 0.85em;
}


/*********** SIGNUP / SIGNIN ***********/

.onlyX__registerLogin .onlyX--logo-heading img {
    width: 12rem;
}

.onlyX__registerLogin__forms {
    width: 100%;
    padding: 2rem;
}

.onlyX__form-card {
    --card-radius: 1.875rem;
    --card-padding: 1.5rem 2rem;
    width: 100%;
    max-width: 507px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--card-radius);
}

.onlyX__form-card--header {
    background-color: var(--clr-blk30);
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
}

.onlyX__form-card--header h5 {
    font-family: var(--bs-heading-font);
    font-size: 1.5625rem;
}

.onlyX__form-card--header p {
    color: var(--clr-gryBD);
    font-size: 0.875rem;
    margin-top: 0.5em;
}

.onlyX__form-card--header,
.onlyX__form-card--body {
    padding: var(--card-padding);
}

.onlyX__form-card--body {
    border: 4px solid var(--clr-blk30);
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
}

.onlyX__registerLoginHeader {
    width: 100%;
    padding: 1rem 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: none;
}


.onlyX__registerLogin__hero {
    position: relative;
    height: 100%;
    min-height: 100svh;
    padding: 2rem 4rem 8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.onlyX__registerLogin__hero::after {
    content: '';
    background: linear-gradient(180deg, #000000 15%, #CF0003 100%);
    background-position: top;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.75;
    z-index: -1;
}

.onlyX__registerLogin__hero>img {
    width: 100%;
    height: 100%;
    /* object-position: 56% 16%; */
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.onlyX__registerLogin__hero-content {
    margin-top: 5rem;
}

.onlyX__registerLogin__hero h2 {
    font-family: var(--bs-heading-font);
    font-size: 3.75rem;
    line-height: 1.35;
}

.onlyX__registerLogin__hero p {
    font-size: 1.5rem;
    font-weight: 300;
    max-width: 38ch;
    margin-top: 0.5em;
}


.onlyX__registerLogin__hero .onlyX__chat {
    margin-top: auto;
}

/*********** HEADER ***********/

.onlyX__header {
    /* background-color: inherit; */
    backdrop-filter: blur(50px);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11;
}

.onlyX__header .inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.onlyX__header nav {
    margin-left: auto;
}

.onlyX__header nav ul {
    font-size: 1.142rem;
    font-weight: 400;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    gap: 3.5em;
}

.onlyX__header nav ul li a {
    padding: 0.2em 0;
    border-bottom: 3px solid transparent;
}


.onlyX__header nav ul li a:hover,
.onlyX__header nav ul li a:focus,
.onlyX__header nav ul li a.nav-actv {
    border-color: var(--clr-red1);
}

.onlyX__header .header-ctas {
    display: -ms-inline-grid;
    display: inline-grid;
    grid-auto-flow: column;
    gap: 0.85em;
}


.subscription-balance-for-dropdown,
.user-content-for-dropdown {
    display: none;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-dropdown-divider-bg);
}


/*********** HOME PAGE ***********/

.onlyX__home-hero .inner-container {
    background-image: url(./../img/homehero.webp);
    background-position: right -14% center;
    background-repeat: no-repeat;
    background-size: 65%;
    padding: 7rem 0;
}

.onlyX__home-hero h2 {
    font-family: var(--bs-heading-font);
    font-size: 4.375rem;
    line-height: 1.25;
}

.onlyX__home-hero p {
    font-size: 1.125rem;
    font-weight: 300;
}

.onlyX__home-hero .btn {
    margin-top: 2em;
}

/*  ------------------------------------------- */

.onlyX__home-discover {
    background-image: url(./../img/wave-svg-lg.svg);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 120%;
    padding-top: 3rem;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
}

.onlyX__home-discover .inner-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
}

.onlyX__home-discover-media {
    display: flex;
    flex-direction: column;
    position: relative;
}

.onlyX__home-discover-media>figure {
    border-radius: 1.75rem;
    overflow: hidden;
    max-width: 55%;
}

.onlyX__home-discover-media>figure:nth-of-type(2) {
    margin-left: auto;
    margin-top: -8%;
}

.onlyX__home-discover-media-art {
    width: 75%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    bottom: 80px;
    margin: auto;
}

.onlyX__home-discover-media-art .circle-outer,
.onlyX__home-discover-media-art .circle-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
}

.onlyX__home-discover-media-art .circle-outer::after,
.onlyX__home-discover-media-art .circle-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
    border: 1px dashed rgba(245, 245, 245, 0.33);
    animation: animRotate 100s linear infinite;
}

.onlyX__home-discover-media-art .circle-inner::after {
    animation: animRotate 100s linear infinite reverse;
}

.onlyX__home-discover-media-art .circle-inner {
    top: 22%;
    right: 22%;
    bottom: 22%;
    left: 22%;
}

.onlyX__home-discover-media-art .heart-ico {
    color: #EF5350;
    position: absolute;
}


.onlyX__home-discover-media-art .circle-outer .heart-ico {
    top: 6%;
    left: 75%;
    animation: animPulse 3s ease-in-out infinite;
}

.onlyX__home-discover-media-art .circle-inner .heart-ico {
    top: 85%;
    left: 16%;
    animation: animPulse 3s ease-in-out infinite 3s;
}

.onlyX__home-discover-media-art .circle-inner .heart-ico svg {
    transform: scale(0.9);
    transform-origin: left;
}

.onlyX__home-discover-media-art .dot {
    position: absolute;
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;

}

.onlyX__home-discover-media-art .dot-1 {
    width: 17px;
    height: 17px;
    left: 35%;
}

.onlyX__home-discover-media-art .dot-2 {
    width: 17px;
    height: 17px;
    left: 4%;
    top: 72%;
}

.onlyX__home-discover-media-art .dot-3 {
    width: 10px;
    height: 10px;
    left: 23%;
    top: 92%;
}

.onlyX__home-discover-media-art .dot-4 {
    width: 10px;
    height: 10px;
    left: 90%;
    top: 21%;
}


/* ------------------------------------ */


.onlyX__bg-content {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.onlyX__bg-content.shop_now {
    background-image: url('./../img/bg1.webp');
}

.onlyX__bg-content.chat_now {
    background-image: url('./../img/bg3.webp');
}

.onlyX__bg-content.our_mission {
    background-image: url('./../img/bg4.webp');
}

.onlyX__bg-content p {
    max-width: 1058px;
    margin-left: auto;
    margin-right: auto;
}

.onlyX__bg-content .btn {
    margin-top: 2.5em;
}


/* ------------------------------------ */

.onlyX__home-how-it-works {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.onlyX__home-how-it-works--grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
    align-items: end;
    position: relative;
}

.onlyX__home-how-it-works--grid h5 {
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 125.5%;
}

.onlyX__home-how-it-works--grid p {
    font-weight: 300;
    color: #FFFFFF;
    opacity: 0.66;
    text-wrap: balance;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.85;
}

.onlyX__home-how-it-works--grid .steps>*+* {
    margin-top: 1.5rem;
}

.onlyX__home-how-it-works--grid .line {
    position: absolute;
    width: 50%;
    height: 1px;
    border-top: 1px dashed #a9a9a9;
}

.onlyX__home-how-it-works--grid .line:nth-of-type(1) {
    left: 23.5%;
    top: 38%;
    width: 11.5%;
}

.onlyX__home-how-it-works--grid .line:nth-of-type(2) {
    left: 64.5%;
    top: 38%;
    width: 12%;
}

.onlyX__home-how-it-works--grid .line::before {
    content: '';
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: currentColor;
    transform: translate(-50%, -50%);
}


/* ------------------------------------ */


.onlyX__sell-products {
    background-image: url('./../img/bg2.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.onlyX__sell-products .inner-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
}



/* ------------------------------------ */

.onlyX__safety-privacy {
    --container-width: 1130px;
}

.onlyX__safety-privacy .inner-container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 5rem;
    padding-top: 4rem;
}

.onlyX__safety-privacy .onlyX__safety-privacy--content {
    padding-bottom: 6rem;
}

/* ------------------------------------ */

.onlyX__inner-hero {
    font-size: 4.1875rem;
    font-family: var(--bs-heading-font);
    color: #fff;
    background-image: url('./../img/inner-hero-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    text-align: center;
    padding: 1.25em 0;
}

/* ------------------------------------ */

.onlyX__section {
    padding: 4rem 0;
}

/* ------------------------------------ */

.onlyX__why-choose-us {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.onlyX__why-choose-us .inner-container {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
    align-items: start;
}

.onlyX__why-choose-us__media {
    display: flex;
    flex-direction: column;
    position: relative;
}

.onlyX__why-choose-us__media>figure {
    border-radius: 1.75rem;
    overflow: hidden;
    max-width: 57%;
}

.onlyX__why-choose-us__media>figure:nth-of-type(2) {
    margin-left: auto;
    margin-top: 11%;
}

.onlyX__why-choose-us__media>figure img {
    height: 100%;
    object-fit: cover;
}

.onlyX__why-choose-us__media-art {
    width: 85%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 25px;
    right: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.onlyX__why-choose-us__media-art .circle-outer,
.onlyX__why-choose-us__media-art .circle-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
}

.onlyX__why-choose-us__media-art .circle-inner {
    top: 18%;
    right: 18%;
    bottom: 18%;
    left: 18%;
}


.onlyX__why-choose-us__media-art .circle-outer::after,
.onlyX__why-choose-us__media-art .circle-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
    border: 1px dashed rgba(245, 245, 245, 0.33);
    animation: animRotate 100s linear infinite;
}

.onlyX__why-choose-us__media-art .circle-inner::after {
    animation: animRotate 100s linear infinite reverse;
}

.onlyX__why-choose-us__media-art .heart-ico {
    color: #EF5350;
    position: absolute;
}

.onlyX__why-choose-us__media-art .circle-outer .heart-ico {
    top: 6%;
    left: 75%;
    animation: animPulse 2s ease-in-out alternate infinite;
}

.onlyX__why-choose-us__media-art .circle-inner .heart-ico {
    top: 85%;
    left: 16%;
    animation: animPulse 2s ease-in-out alternate infinite;
}

.onlyX__why-choose-us__media-art .circle-inner .heart-ico svg {
    transform: scale(0.9);
    transform-origin: left;
}

.onlyX__why-choose-us__media-art .dot {
    position: absolute;
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;
}

.onlyX__why-choose-us__media-art .dot-1 {
    width: 17px;
    height: 17px;
    left: 35%;
}

.onlyX__why-choose-us__media-art .dot-2 {
    width: 17px;
    height: 17px;
    left: 4%;
    top: 72%;
}

.onlyX__why-choose-us__media-art .dot-3 {
    width: 10px;
    height: 10px;
    left: 23%;
    top: 92%;
}

.onlyX__why-choose-us__media-art .dot-4 {
    width: 10px;
    height: 10px;
    left: 90%;
    top: 21%;
}


.onlyX__why-choose-us__pointers {
    margin-top: 2.5rem;
}

.onlyX__why-choose-us__pointer h6 {
    font-size: 1.625rem;
    font-weight: 600;
    margin-bottom: 0.5em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    align-items: center;
}

.onlyX__why-choose-us__pointer h6::before {
    content: '';
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: var(--clr-red1);
}


.onlyX__why-choose-us__pointer p {
    font-size: 0.9rem;
    font-weight: 300;
}


/* ------------------------------------ */

.onlyX__how-it-works .inner-container {
    position: relative;
}


.onlyX__how-it-works .inner-container .line {
    content: '';
    width: 10px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5em;
}

.onlyX__how-it-works .inner-container .line {
    background-color: var(--clr-red1)
}

.onlyX__how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10rem;
    align-items: center;
    margin-bottom: 5rem;
    position: relative;
    counter-increment: myCounter;
}

.onlyX__how-it-works-grid::after {
    content: counter(myCounter);
    font-size: 1.625rem;
    width: 2.115em;
    height: 2.115em;
    border-radius: 50%;
    color: #fff;
    border: 0.15em solid currentColor;
    background-color: var(--bs-body-bg);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.85;
}

.onlyX__how-it-works-grid:nth-child(even) .onlyX__how-it-works__content {
    grid-column: 1;
    grid-row: 1;
}

.onlyX__how-it-works-grid:nth-child(even) .onlyX__how-it-works__media {
    grid-column: 2;
    grid-row: 1;
}

.onlyX__how-it-works-grid figure svg {
    max-width: 100%;
    height: auto;
}

.onlyX__how-it-works__content p span {
    font-size: 0.9rem;
    font-weight: 300;
}

.onlyX__how-it-works__content h5 {
    font-size: 1.625rem;
    font-weight: 600;
    margin-bottom: 0.5em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    align-items: center;
}

.onlyX__how-it-works__content h5::before {
    content: '';
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: var(--clr-red1);
}


.onlyX__how-it-works__media:not(.hiw_1_media) {
    display: grid;
    align-items: center;
    justify-content: center;
}

.onlyX__how-it-works__media>* {
    grid-column: 1;
    grid-row: 1;
}


.onlyX__hiw__media-art {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: relative;
    z-index: -1;
}

.onlyX__hiw__media-art .circle-outer,
.onlyX__hiw__media-art .circle-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
}

.onlyX__hiw__media-art .circle-inner {
    top: 18%;
    right: 18%;
    bottom: 18%;
    left: 18%;
}


.onlyX__hiw__media-art .circle-outer::after,
.onlyX__hiw__media-art .circle-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
    border: 1px dashed rgba(245, 245, 245, 0.33);
    animation: animRotate 100s linear infinite;
}

.onlyX__hiw__media-art .circle-inner::after {
    animation: animRotate 100s linear infinite reverse;
}

.onlyX__hiw__media-art .heart-ico {
    color: #EF5350;
    position: absolute;
}

.onlyX__hiw__media-art .circle-outer .heart-ico {
    top: 6%;
    left: 75%;
    animation: animPulse 2s ease-in-out alternate infinite;
}

.onlyX__hiw__media-art .circle-inner .heart-ico {
    top: 90%;
    left: 25%;
    animation: animPulse 2s ease-in-out alternate infinite;
}

.onlyX__hiw__media-art .circle-inner .heart-ico svg {
    transform: scale(0.9);
    transform-origin: left;
}

.onlyX__hiw__media-art .dot {
    position: absolute;
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;
}

.onlyX__hiw__media-art .dot-1 {
    width: 17px;
    height: 17px;
    left: 46%;
    top: -2%;
    animation: animScale 1s ease-in-out alternate infinite;
}

.onlyX__hiw__media-art .dot-2 {
    width: 17px;
    height: 17px;
    left: 6%;
    top: 75%;
    animation: animScale 1s ease-in-out alternate infinite 0.25s;
}

.onlyX__hiw__media-art .dot-3 {
    width: 10px;
    height: 10px;
    left: 23%;
    top: 92%;
    animation: animScale 1s ease-in-out alternate infinite 1s;
}

.onlyX__hiw__media-art .dot-4 {
    width: 10px;
    height: 10px;
    left: 90%;
    top: 21%;
    animation: animScale 1s ease-in-out alternate infinite 0.75s;
}

.hiw_3 .onlyX__hiw__media-art {
    width: 85%;
    margin: auto;
}


.hiw_1 .onlyX__how-it-works__media {
    text-align: center;
}

.onlyX__hiw__media-art-1 {
    width: 55%;
    height: 1px;
    border-top: 1px dashed rgba(245, 245, 245, 0.33);
    display: inline-grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
}

.onlyX__hiw__media-art-1 span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--clr-red1);
    margin-top: -6px;
    transform: scale(0.15);
}

.onlyX__hiw__media-art-1 span:nth-child(1) {
    animation: animScale 1s ease-in-out alternate infinite;
}

.onlyX__hiw__media-art-1 span:nth-child(2) {
    animation: animScale 1s ease-in-out alternate infinite 0.5s;
}

.onlyX__hiw__media-art-1 span:nth-child(3) {
    animation: animScale 1s ease-in-out alternate infinite 1s;
}


/* ------------------------------------ */

.onlyX__contact-us .inner-container {
    display: grid;
    grid-template-columns: 478px 1fr;
    align-items: start;
    gap: 5rem;
    padding-top: 2rem;
    padding-bottom: 10rem;
}

.onlyX__contact-us__form {
    background-color: var(--clr-blk30);
    border-radius: 2rem;
    padding: 2rem;
    --form-control-bg: var(--clr-blk30);
    --form-label-gap: 0.2em;
    --form-textarea-height: 8em;
}


.onlyX__contact-us__info {
    margin-top: 2rem;
}

.onlyX__contact-us__info h6 {
    font-size: 1.625rem;
    font-weight: 600;
    margin-bottom: 0.5em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    align-items: center;
}

.onlyX__contact-us__info h6::before {
    content: '';
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: var(--clr-red1);
}

.onlyX__contact-us__info p a {
    color: var(--clr-red1);
}

.onlyX__contact-us__info p a:hover {
    color: #ff6062;
}

.onlyX__faqs .accordion {
    --bs-border-width: 0;
    --bs-accordion-active-bg: #292929;
    --bs-primary-text-emphasis: #fff;
    --bs-accordion-bg: #292929;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x: 1.5rem;
    --bs-accordion-body-padding-y: 0.75rem;
    --bs-accordion-btn-padding-x: 1.5rem;
    --bs-accordion-btn-padding-y: 0.75rem;
    --bs-accordion-btn-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUwXzc4MykiPgo8cGF0aCBkPSJNMTIgMEM1LjM4MjkzIDAgMCA1LjM4MjkzIDAgMTJDMCAxOC42MTcxIDUuMzgyOTMgMjQgMTIgMjRDMTguNjE3MSAyNCAyNCAxOC42MTcxIDI0IDEyQzI0IDUuMzgyOTMgMTguNjE3MSAwIDEyIDBaTTE3LjI1IDEyLjk5OTlIMTIuOTk5OVYxNy4yNUMxMi45OTk5IDE3LjgwMjEgMTIuNTUyMSAxOC4yNDk5IDEyIDE4LjI0OTlDMTEuNDQ3OSAxOC4yNDk5IDExLjAwMDEgMTcuODAyMSAxMS4wMDAxIDE3LjI1VjEyLjk5OTlINi43NUM2LjE5Nzk0IDEyLjk5OTkgNS43NTAwNiAxMi41NTIxIDUuNzUwMDYgMTJDNS43NTAwNiAxMS40NDc5IDYuMTk3OTQgMTEuMDAwMSA2Ljc1IDExLjAwMDFIMTEuMDAwMVY2Ljc1QzExLjAwMDEgNi4xOTc5NCAxMS40NDc5IDUuNzUwMDYgMTIgNS43NTAwNkMxMi41NTIxIDUuNzUwMDYgMTIuOTk5OSA2LjE5Nzk0IDEyLjk5OTkgNi43NVYxMS4wMDAxSDE3LjI1QzE3LjgwMjEgMTEuMDAwMSAxOC4yNDk5IDExLjQ0NzkgMTguMjQ5OSAxMkMxOC4yNDk5IDEyLjU1MjEgMTcuODAyMSAxMi45OTk5IDE3LjI1IDEyLjk5OTlaIiBmaWxsPSIjQ0YwMDAzIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTBfNzgzIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
    --bs-accordion-btn-active-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUwXzc5NykiPgo8cGF0aCBkPSJNMTIgMEM1LjM4MjkzIDAgMCA1LjM4MjkzIDAgMTJDMCAxOC42MTcxIDUuMzgyOTMgMjQgMTIgMjRDMTguNjE3MSAyNCAyNCAxOC42MTcxIDI0IDEyQzI0IDUuMzgyOTMgMTguNjE3MSAwIDEyIDBaTTE3LjI1IDEyLjk5OTlINi43NUM2LjE5Nzk0IDEyLjk5OTkgNS43NTAwNiAxMi41NTIxIDUuNzUwMDYgMTJDNS43NTAwNiAxMS40NDc5IDYuMTk3OTQgMTEuMDAwMSA2Ljc1IDExLjAwMDFIMTcuMjVDMTcuODAyMSAxMS4wMDAxIDE4LjI0OTkgMTEuNDQ3OSAxOC4yNDk5IDEyQzE4LjI0OTkgMTIuNTUyMSAxNy44MDIxIDEyLjk5OTkgMTcuMjUgMTIuOTk5OVoiIGZpbGw9IiNDRjAwMDMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81MF83OTciPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==');
}

.onlyX__faqs .accordion-item {
    margin-bottom: 1rem;
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.onlyX__faqs .accordion-button {
    font-size: 1.25rem;
}

.onlyX__faqs .accordion-body {
    padding-top: 0;
    font-weight: 200;
}


/* --------------------------------------------- */


/*********** POST LOGIN HEADER ***********/

.onlyX__postLogin-header {
    /* background-color: inherit; */
    backdrop-filter: blur(50px);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11;
}

.onlyX__postLogin-header .inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.onlyX__postLogin-header .onlyX--logo-heading {
    margin-right: auto;
}

.onlyX__postLogin-header .dropdown-menu {
    margin-top: 1.35em !important;
}

.notification-dropdown .dropdown-menu {
    --bs-dropdown-min-width: 30rem;
    --bs-border-width: 0;
}


/* --------------------------------------------- */

.user-dropdown .dropdown-menu {
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-min-width: 100%;
    --bs-dropdown-link-hover-bg: var(--clr-red1);
    --bs-dropdown-link-hover-color: inherit;
    --bs-dropdown-link-active-bg: var(--clr-red1);
    ;
    --bs-dropdown-link-active-color: inherit;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-divider-bg: rgb(76 76 76);
    --bs-border-width: 0;
}

.user-dropdown .user-img {
    --user-img-size: 3.125rem;
}

.user-dropdown .user-content p {
    line-height: 1.5;
}

.notification-card {
    font-size: 0.95rem;
    padding: 1rem;
    line-height: 1.5;
}

.notification-card .user-img {
    --user-img-size: 3rem;
    background-color: #6d6d6d;
    padding: 1px;
}

.notification-card time {
    color: var(--clr-gryBD);
    font-size: 90%;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 0.85em;
    display: inline-block;
}

/* --------------------------------------------- */

.onlyX__user-hero {
    position: relative;
    padding-top: 4rem;
    box-shadow: inset 0 -1.5rem 0 0 black, inset 0 -1.6rem 0 0 rgba(255, 255, 255, 0.33);
}

.onlyX__user-hero::after {
    content: '';
    background-image: url('./../img/user-hero-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 63%;
    z-index: -1;
}

.onlyX__user-hero .inner-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 2rem;
}

.onlyX__user-hero .user-img {
    --user-img-size: 12.5rem;
    background-color: #000;
    border: 5px solid #000;
    padding: 0.1em;
    grid-row: 1/span 2;
}

.onlyX__user-hero .user-content {
    align-self: start;
}

.onlyX__user-hero .user-content h6 {
    font-size: 2.375rem;
}

.onlyX__user-hero .user-content p {
    font-size: 1.125rem;
    margin-top: 0.1em;
}


.onlyX__user-hero .user-nav ul {
    font-size: 1.142rem;
    font-weight: 400;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    gap: 3.5em;
}

.onlyX__user-hero .user-nav ul a img {
    vertical-align: middle;
    margin-right: 0.5em;
}

.onlyX__user-hero .user-nav ul a {
    padding: 0.5em 0;
    border-bottom: 3px solid transparent;
}

.onlyX__user-hero .user-nav ul a:hover,
.onlyX__user-hero .user-nav ul a.nav-actv {
    border-bottom-color: var(--clr-red1);
}

/* --------------------------------------------- */

.onlyX__user-matches,
.onlyX__user-chat-history,
.onlyX__user-chat,
.onlyX__settings,
.onlyX__user-profile {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(var(--grid-col, 4), minmax(0, 1fr));
    gap: var(--grid-gap, 2rem);
}

.onlyX__profile-card {
    background: #2E2E2E;
    padding: 1.25rem;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.onlyX__profile-card--media {
    border-radius: inherit;
    overflow: hidden;
    background-image: url('./../img/OnlyX-logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #1C1C1C;
}

.onlyX__profile-card--media img {
    width: 100%;
}


.onlyX__profile-card .profile-id {
    font-size: 1.5rem;
}

.onlyX__profile-card .profile-location {
    background-image: url('./../img/icons//ico-location.svg');
    background-position: left;
    background-repeat: no-repeat;
    background-size: 1.25em;
    padding-left: 2em;
    font-weight: 500;
}

.onlyX__profile-card .profile-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    max-height: 3.5em;
    overflow: hidden;
}

.onlyX__profile-card .profile-infos .badge {
    --bs-badge-font-size: 0.9rem;
    --bs-badge-font-weight: inherit;
    --bs-badge-padding-x: 1em;
    --bs-badge-padding-y: 1em;
    border: 1px solid currentColor;
}

.onlyX__profile-card .profile-infos .badge strong {
    font-weight: 600;
}

.onlyX__profile-card>.btn {
    margin-top: auto;
}

/* --------------------------------------------- */

.table.matches-tbl {
    --bs-emphasis-color: var(--bs-body-color);
    --bs-table-bg: #2E2E2E;
    --bs-border-width: 12px;
    --bs-border-color: #000;
}

.table.matches-tbl th {
    background-color: var(--clr-red1);
    font-weight: 400;
    padding: 1em 1.5em;
    border-bottom-width: 16px;
}

.table.matches-tbl td {
    padding: 0.5em 1.5em;
}

/* --------------------------------------------- */

.chat-user-dropdown .dropdown-menu {
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-link-hover-bg: var(--clr-red1);
    --bs-dropdown-link-hover-color: inherit;
    --bs-dropdown-link-active-bg: var(--clr-red1);
    ;
    --bs-dropdown-link-active-color: inherit;
    --bs-dropdown-border-width: 0;
    --bs-border-width: 0;
}

.chat-user-dropdown .dropdown-item {
    border-radius: 0.3em;
}

.onlyX__chat-window {
    background-color: #2E2E2E;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* chat header */

.onlyX__chat-header,
.onlyX__chat-body,
.onlyX__chat-footer {
    padding: 1.5rem;
    background-color: var(--chatBgClr);
}

.onlyX__chat-header {
    --chatBgClr: #1C1C1C;
    --user-img-size: 3.75rem;
    line-height: 1.5;
}


.onlyX__chat-profile-info h6 {
    font-size: 1.25rem;
    font-weight: 400;
}

.onlyX__chat-profile-info p {
    font-size: 0.875rem;
    opacity: 0.5;
    font-weight: 300;
    margin-top: 0.15em;
}

/* chat body */

.onlyX__chat-outer-body {
    position: relative;
}

.onlyX__chat-outer-body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
    bottom: 0;
    background: linear-gradient(360deg, #2e2e2eb0 30%, transparent);
}

.onlyX__chat-body {
    display: flex;
    flex-direction: column;
    max-height: 50vh;
    overflow: auto;

    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.onlyX__chat-body::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.onlyX__single-chat {
    font-size: 1rem;
    --user-img-size: 4.375em;
    max-width: 45%;
    display: grid;
    grid-template-columns: var(--user-img-size) auto;
    gap: 1.5em;
    align-items: start;
    justify-content: start;
}

.onlyX__single-chat-msg {
    background-color: var(--chat-msg-bg, var(--clr-red1));
    border-radius: var(--chat-msg-border-radius, 0px 2.5em 2.5em 2.5em);
    padding: 1em 1.5em;
    min-width: 204px;
    margin-top: 1em;
    grid-column: 2;
    line-height: 1.65;
}

.onlyX__single-chat.mymsg {
    --chat-msg-bg: #000;
    --chat-msg-border-radius: 2.599375em 2.599375em 0px;
    margin-left: auto;
}

.onlyX__single-chat.mymsg:nth-child(even) {
    --chat-msg-border-radius: 2.5em 0px 2.5em 2.5em;
}

.onlyX__single-chat:not(.mymsg):nth-child(even) .user-img,
.onlyX__single-chat:not(.mymsg):nth-child(even)~.onlyX__single-chat:not(.mymsg) .user-img {
    display: none;
}

.onlyX__single-chat.mymsg+.onlyX__single-chat:not(.mymsg) .user-img {
    display: block !important;
}


.onlyX__chat-footer {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
}

.atttachment-dropdown .dropdown-menu {
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-link-hover-bg: var(--clr-red1);
    --bs-dropdown-link-hover-color: inherit;
    --bs-dropdown-link-active-bg: var(--clr-red1);
    ;
    --bs-dropdown-link-active-color: inherit;
    --bs-dropdown-border-width: 0;
    --bs-border-width: 0;
}

.atttachment-dropdown .dropdown-toggle {
    background-color: #D9D9D9;
    color: #3E3E3E;
    width: 4.125rem;
    height: 4.125rem;
}

.atttachment-dropdown .dropdown-toggle:hover {
    background-color: #ffffff;
    color: var(--clr-blk1e);
}


.chat-user-dropdown .dropdown-toggle::after,
.atttachment-dropdown .dropdown-toggle::after {
    display: none;
}

.onlyX__chat-input {
    flex: 1;
    color: var(--clr-blk30);
    background-color: #fff;
    border-radius: 100em;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.onlyX__chat-input .textarea {
    flex: 1;
    border-radius: inherit;
    padding: 1em 2em;
    max-height: 8em;
    overflow: auto;
    overflow-wrap: break-word;
}

.onlyX__chat-input .textarea:focus-visible {
    outline: none;
}

.onlyX__chat-input .textarea:empty::before {
    content: attr(data-placeholder);
    pointer-events: none;
}

.onlyX__chat-input .textarea {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.onlyX__chat-input .textarea::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.send-btn {
    background-color: #ffffff;
    color: var(--clr-red1);
    width: 4.125rem;
    height: 4.125rem;
}

.send-btn:hover {
    background-color: var(--clr-red1);
    color: #ffffff;
}


/* --------------------------------------------- */

.chkbx-toggle {
    display: none;
}

.chkbx-toggle+label {
    position: relative;
    cursor: pointer;
    outline: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 45px;
    height: 20px;
    background-color: #4B4B4B;
    border-radius: 60px;
    transition: background 0.4s;
}

.chkbx-toggle+label::before,
.chkbx-toggle+label::after {
    content: "";
    display: block;
    position: absolute;
}

.chkbx-toggle+label::before {
    right: 1px;
    left: 1px;
    top: 1px;
    bottom: 1px;
    background-color: #4B4B4B;
    border-radius: 60px;
    transition: background 0.4s;
}

.chkbx-toggle+label::after {
    top: 2px;
    left: 4px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 100%;
    transition: transform 0.4s;
}

.chkbx-toggle:checked+label {
    background-color: var(--clr-red1);
}

.chkbx-toggle:checked+label::before {
    background-color: var(--clr-red1);
}

.chkbx-toggle:checked+label::after {
    transform: translateX(22px);
}

.chkbx-toggle:disabled+label {
    opacity: 0.5;
    cursor: default;
}



.onlyX__settings .chkgrp {
    max-width: 300px;
}

.onlyX__settings .changePwd {
    max-width: 560px;
}

.onlyX__settings form {
    padding-right: 30px;
}


/* --------------------------------------------- */

.onlyX__user-profile nav {
    position: sticky;
    top: 4.5rem;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: var(--bs-body-bg);
}

.onlyX__user-profile .nav-tabs {
    --bs-nav-tabs-border-color: rgba(255, 255, 255, 0.33);
}


.onlyX__user-profile .nav-tabs>button {
    padding: 0.75em 1em;
    border-bottom: 3px solid transparent;
    transform: translateY(2px);
}

.onlyX__user-profile .nav-tabs>button.active {
    border-bottom-color: var(--clr-red1);
}


.form-grp {
    display: flex;
    gap: 1em;
    align-items: center;
}

.form-btn {
    padding: 0.5em 1em;
}

.form-btn-label,
.form-btn {
    color: var(--clr-red1);
    cursor: pointer;
    font-weight: 600;
}

.form-btn-label:hover,
.form-btn:hover {
    color: #fff;
}

.form-field {
    color: #fff;
    padding: 0.25em 1em;
    border-radius: 0.2em;
    font-weight: 400;
    border: 1px solid transparent;
    appearance: none;
    -webkit-appearance: none;
}

.form-field:focus {
    border-color: currentColor;
    background-image: var(--selectBg);
}

select.form-field {
    --selectBg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 0.85em;
    padding-right: 2em;
}

select.form-field option {
    color: var(--clr-blk1e);
}

.table.profile-tbl {
    --bs-table-border-color: none;
    --bs-table-color-state: var(--bs-body-color);
    --user-img-size: 4rem;
    --form-label-gap: 0;
}

.table.profile-tbl td {
    padding: 1.5em 0;
    border-bottom: 1px solid #3E3E3E;
}

.table.profile-tbl .form-label p span {
    font-size: 90%;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

.table.profile-tbl td:nth-of-type(1) {
    width: 350px;
}

.user-img-upload {
    position: relative;
}

.user-img-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.btn-navTgl {
    display: none;
}

/* --------------------------------------------- */


.onlyX__statc-content{
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.onlyX__statc-content ol,
.onlyX__statc-content ul{
    padding-left: 1em;
}

.onlyX__statc-content h1,
.onlyX__statc-content .h1 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {

    .onlyX__statc-content h1,
    .onlyX__statc-content .h1 {
        font-size: 2.5rem;
    }
}

.onlyX__statc-content h2,
.onlyX__statc-content .h2 {
    font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {

    .onlyX__statc-content h2,
    .onlyX__statc-content .h2 {
        font-size: 2rem;
    }
}

.onlyX__statc-content h3,
.onlyX__statc-content .h3 {
    font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {

    .onlyX__statc-content h3,
    .onlyX__statc-content .h3 {
        font-size: 1.75rem;
    }
}

.onlyX__statc-content h4,
.onlyX__statc-content .h4 {
    font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {

    .onlyX__statc-content h4,
    .onlyX__statc-content .h4 {
        font-size: 1.5rem;
    }
}

.onlyX__statc-content h5,
.onlyX__statc-content .h5 {
    font-size: 1.25rem;
}

.onlyX__statc-content h6,
.onlyX__statc-content .h6 {
    font-size: 1rem;
}

.spinner-2 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsl(0deg 0% 0% / 70%);
    z-index: 9991;
}

.spinner-2 span {
    width: 50px;
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid #bebebe;
    border-right-color: #ff0000;
    animation: s2 1s infinite linear;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
}

@keyframes s2 {
    to {
      transform: rotate(1turn)
    }
}

.error {
    color: red;
}

.swal2-popup {
    font-size: 11px !important;
}