:root {
    --nunito: 'Nunito', sans-serif;
    --rubik: 'Rubik', sans-serif;

    --CoupleRedPrime: #e63e29;
    --CoupleDarkGray300: #303642;
    --CoupleDarkGray400: #242a36;
    --CouplePurple: #5A5AD6;
    --CouplePurple2: #702AD0;
    --CouplePurple3: #6A39D2;

    --CoupleYellow: #F9C701;

    --CoupleGray100: #fafafa;
    --CoupleGray200: #f2f3f5;
    --CoupleGray300: #ebecf0;
    --CoupleGray400: #e1e3e8;
    --CoupleGray500: #d7dae0;
    --CoupleGray600: #c9cdd4;
    --CoupleGray700: #E8ECF2;
    --CoupleGray800: #444;
    --CoupleGray900: #3c414d;

    --CoupleBlue400: #26c1e3;
    --CoupleBlue500: #1189ad;
    --CoupleBlue600: #00587A;
    --CoupleBlue700: #004161;
    --CoupleBlue800: #242A36;

    --TextLowEmphasis: #9e9e9e;
    --TextMediumEmphasis: #676565;
    --TextHighEmphasis: #212121;

    --error: #e34826;
}

body .nunito {
    font-family: var(--nunito), sans-serif;
}

.left-al {
    text-align: left;
}

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

body .f16 {
    font-size: 0.926vw;
}

body .f20 {
    font-size: 1.157vw;
}

body .f20N {
    font-size: 20px;
}

.f18R {
    font-size: 1.042vw;
}

.fw600 {
    font-weight: 600;
}

body .lh16 {
    line-height: 1.6;
}

body .lh15 {
    line-height: 1.5;
}

body .mt20 {
    margin-top: 20px;
}

body .mt36 {
    margin-top: 2.083vw;
}

.fWidth { width: 100px; }

body .whiteTxt {
    color: #fff;
}

a.linkGrey {
    color: #444;
}

a.linkGrey:hover {
    text-decoration: none;
}

body .d-flex {
    display: flex;
}

body .alignSelfCenter {
    align-self: center;
}

a.linkGrey {
    color: #444;
}

a.linkGrey:hover {
    text-decoration: none;
}

/*white close x*/ 
a.closeWhite {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.926vw; /*16px*/
    position: absolute;
    transition: all 0.3s ease-in;
}

a.closeWhite:hover {
    text-decoration: none;
    opacity: 0.85;
}

a.closeWhite.pos1 {
    top: 0.694vw;
    right: 0.694vw;
}

.mr-bg {
    background-image: url('../img/room_bg_oct_2024.png'), linear-gradient(117.5deg, #26C1E3 0%, #702AD0 100%);
    background-size: cover;
    background-position: top 40px center;
    background-repeat: no-repeat;
    font-family: var(--nunito), serif;
    font-size: 16px;
    font-weight: 400;
    color: #444;
    overflow-x: hidden;
    overflow-y: auto;
}

.mr-bg-special {
    background: url(https://d2d03ocyz3w7x6.cloudfront.net/images/mr-bg.jpg) top 0 center no-repeat;
}

@media only screen and (min-height: 721px) {
    .mr-bg {
        background-size: cover;
        background-position: top 60px center;
    }
}

.mr-bg.v2 {
    background-image: linear-gradient(118deg, #5374c3 1%, #7f4695 100%);
}

.mr-bg:not([class*="mr-bg--"]) {
    -ms-overflow-style: none;  
    scrollbar-width: none;   /* Firefox */
    overflow: hidden;
}

.mr-bg--edge {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    overflow: hidden;
}

.mr-bg--firefox {
    scrollbar-width: none;   /* Firefox */
}

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

.mr-bg::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.mr-top-bar {
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 27px 0 17px;
    height: 40px;
    color: #2e2e2e;
    position: relative;
}

.mr-big.mr-lobby-user.offVideo {
    height: calc(100% - 40px);
}

.mr-right-nav {
    max-height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: hidden;
}

.mr-right-nav.expand {
    height: 100%;
}

.mr-right-nav.expand.inner-expanded {
    overflow: clip;
}

@media only screen and (min-height: 721px) {
    .mr-top-bar {
        height: 60px;
    }

    .mr-right-nav {
        max-height: calc(100% - 70px);
    }

    .mr-big.mr-lobby-user.offVideo {
        height: calc(100% - 60px);
    }

    .tooltip-bg.pos31 {
        bottom: -2.1vh;
    }
    
    #authorizenet-container .overlay-v2:not(.hide) {
        top: 60px !important;
    }
    .chat-container.disable::after {
        height: calc(100vh - 160px) !important;
    }
}

.logo svg {
    height: 30px;
}

@media only screen and (min-height: 721px) {
    .logo svg {
        height: 36px;
    }
}

.mr-top-details {
    height: 28px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    column-gap: 23px;
    border-radius: 4px;
    background-color: #F3F6F9;
    border: 1px solid var(--CoupleGray700);
    font-size: 14px;
    margin-right: 40px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

@media only screen and (max-height: 721px) and (max-width: 1396px) {
    .mr-top-details {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media only screen and (max-height: 721px) and (max-width: 1180px) {
    .mr-top-details {
        margin-right: 40px;
        position: relative;
        transform: none;
        left: unset;
    }
}

@media only screen and (min-width: 1396px) {
    .mr-top-details {
        margin-right: unset;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media only screen and (min-height: 721px) {
    .mr-top-details {
        height: 42px;
        font-size: 16px;
        margin-right: 50px;
    }
}

.mr-top-details.changeGap {
    column-gap: 4px;
}

.mr-top-details.redBg {
    background-color: #E63E29;
    color:white;
}

.mr-top-details.redBg li::after {
    background-color: white;
}

.mr-top-details li {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
}

.mr-top-details li.nextDate {
    margin-left: 0;
}

.mr-top-details p.black-bar {
    content: '';
    height: 24px;
    width: 1px;
    position: absolute;
    top: 4px;
    right: -13px;
    background-color: #2e2e2e;
}

.mr-top-details.redBg p.black-bar {
    background-color: white;
}

.mr-top-details li.timer10sRed {
    position: relative;
    height: 21px;
    display: block;
    align-items: center;
    padding: 1px 5px;
    margin-top: 6px;
}

/* Toggle switch */
.switch-c {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 16px;
}

.switch-c input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-c {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e8e8e8;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider-c:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0;
    top: -2px;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider-c {
    background-color: var(--CouplePurple);
}

input:focus + .slider-c {
    box-shadow: 0 0 1px #26c1e3;
}

input:checked + .slider-c:before {
    transform: translateX(20px);
    -ms-transform: translateX(20px);
    background-color: #26c1e3;
}

.mr-toggle {
    display: none;
}

.mr-toggle.show {
    display: inline-block;
}

/*Toggle switch*/
.switch {
    position: relative;
    display: inline-block;
    width: 114px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F3F6F9;
    outline: 1px solid var(--CoupleGray700);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    top: 2px;
    background: #444444 url('../img/toggle-skip.png') top 1px left 3px no-repeat;
    background-size: 16px auto;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--CouplePurple);
    outline: 1px solid var(--CouplePurple);
}

.slider::after {
    content: "Dating: Off";
    color: #444444;
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding-left: 30px;
    transition: padding 0.3s ease-out;
    height: 24px;
    display: flex;
    align-items: center;
}

input:checked + .slider::after {
    content: "Dating: On";
    color: #fff;
    padding-left: 12px;
}

input:checked + .slider:before {
    transform: translateX(90px);
    background: #26c1e3 url('../img/heart_white.svg') top 6px center no-repeat;
    background-size: 14px auto;
}

.mr-top-actions {
    display: flex;
    align-items: center;
    column-gap: 14px;
}

@media only screen and (min-height: 721px) {
    .mr-top-actions {
        column-gap: 20px;
    }
}

.mr-top-actions li {
    display: flex;
    align-items: center;
    column-gap: 8px;
    position: relative;
}

.mr-top-actions li.mlr40 {
    margin-left: 40px;
    margin-right: 40px;
}

.mr-top-actions li.mr-t-a-coins {
    font-family: var(--nunito), sans-serif;
    background-color: #F3F6F9;
    border: 1px solid var(--CoupleGray700);
    border-radius: 4px;
    padding: 2px 8px;
    width: 104px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    justify-content: center;
}

@media only screen and (min-height: 721px) {
    .mr-top-actions li.mr-t-a-coins {
        height: 42px;
        font-size: 16px;
    }
}

@media only screen and (max-width: 950px) {
    .mr-top-actions li.mr-t-a-coins {
        height: 28px;
        font-size: 14px;
    }
}

.mr-top-actions li.mr-t-a-coins svg {
    fill: #444;
    color: #444;
}

body.isGuest .mr-top-actions #prof_labelCC,
body.isGuest .mr-top-actions #prof_balanceCC {
    display: none !important;
}
body.isGuest .mr-top-actions #prof_prchCCBtn {
    display: block !important;
}

.mr-top-actions li.mr-t-a-coins.red {
    background-color: #eb482d;
    animation-name: mr-t-a-coins-red;
    animation-duration: 2s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    color: #fff;
}

@keyframes mr-t-a-coins-red {
    0% {
        background-color: #eb482d;
        color: #fff;
    }
    100% {
        background-color: #F3F6F9;
        color: #444;
    }
}

.mr-top-actions li.mr-t-a-coins.red svg {
    fill: #fff;
    color: #fff;
    animation-name: flashing-coin, flashing-coin2;
    animation-duration: 1s, 2s;
    animation-iteration-count: 3, 1;
    animation-fill-mode: forwards;
    animation-delay: 0s, 5s;
}

@keyframes flashing-coin {
    0% {
        color: #fff;
        fill: #fff;
    }
    50% {
        color: #444;
        fill: #444;
    }
   100% {
        color: #fff;
        fill: #fff;
    }
}

@keyframes flashing-coin2 {
    0% {
         color: #fff;
        fill: #fff;
    }
    100% {
         color: #444;
        fill: #444;
    }
    
}

.mr-top-actions li.mr-t-a-coins.blue {
    background-color: var(--CouplePurple);
    animation-name: mr-t-a-coins-blue;
    animation-duration: 2s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    color: #fff;
}

@keyframes mr-t-a-coins-blue {
    0% {
        background-color: #01abd1;
        color: #fff;
    }
    100% {
        background-color: #F3F6F9;
        color: #444;
    }
}

@keyframes coin-bg-flash {
    0% {
        background-color: #01abd1;
    }
    50% {
        background-color: #F3F6F9;
    }
    100% {
        background-color: #01abd1;
    }
}

@keyframes coin-bg-flash2 {
    0% {
        background-color: #01abd1;
    }
    100% {
        background-color: #F3F6F9;
        color: #444;
    }
    
}

.mr-top-actions li.mr-t-a-coins.blue svg {
    fill: #fff;
    color: #fff;
    animation-name: flashing-coin, flashing-coin2;
    animation-duration: 1s, 2s;
    animation-iteration-count: 3, 1;
    animation-fill-mode: forwards;
    animation-delay: 0s, 5s;
}

@keyframes mr-t-a-coins-blue {
    0% {
        color: #fff;
        fill: #fff;
    }
    100% {
        color: #444;
        fill: #444;
    }
}
/* End toggle */

.mr-top-actions li a:hover svg {
    fill: var(--CouplePurple);
    color: var(--CouplePurple);
}

.mr-top-actions li a.active:hover svg {
    fill: var(--CouplePurple);
    color: var(--CouplePurple);
}

.mr-top-actions li a.active svg,
.mr-top-actions li a.active:hover svg {
    fill: #fff;
    color: #fff;
}

/* .mr-top-actions li a:hover svg {
    fill: #26C1E3;
    color: #26C1E3;
} */

.mr-top-actions li a.hasSquare {
    width: 28px;
    height: 28px;
    border: 1px solid var(--CoupleGray700);
    background: #F3F6F9;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-height: 721px) {
    .mr-top-actions li a.hasSquare {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}

.mr-top-actions {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

.mr-top-actions li.toggle {
    position: relative;
}

.mr-top-actions li a.hasSquare.active {
    background: var(--CouplePurple);
}

.mr-top-actions svg path {
    fill: currentColor;
}

.mr-top-actions a svg {
    fill: var(--CouplePurple);
    color: var(--CouplePurple);
    transition: all 0.3s ease-in;
}

.mr-top-actions .open-search i:hover svg, 
.open-search.open i svg {
    fill: var(--CouplePurple);
    color: var(--CouplePurple);
}

.pmr-sub-ic100p img {
    border-radius: 100%;
    display: flex;
}

.mr-s-open-self svg {
    fill: #636363;
    color: #636363;
    pointer-events: none;
}

.mr-top-countdown {
    display: flex;
    column-gap: 23px;
    border-radius: 12px;
    background-color: #e8e8e8;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.referral svg {
    width: 20px;
}

@media only screen and (min-height: 721px) {
    .referral svg {
        width: 30px;
    }
}

.date-card svg {
    width: 16px;
}

.unlock-screen .btn-yellow.v2.mt20 {
    min-width: 200px;
    height: 52px;
    font-size: 18px;
    margin-top: 20px;
    justify-content: center;
}

.unlock-screen .mr-balance {
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    font-family: var(--nunito), sans-serif;
}

.unlock-screen.v2 .mr-balance {
    font-size: 0.8em;
    gap: 0.0 .25em;
}

.unlock-screen.v2 .mr-balance svg {
    /*height: 0.75em;*/
    width: min(0.8em, 16px);
    margin-left: 0.625em;
}

.unlock-screen .mr-i-text3.mt8 {
    margin-top: 0;
}

.unlock-screen .mr-balance svg {
    width: 15px;
}

.unlock-screen.v2 a.btn-yellow.v3 svg {
    width: min(1.05em, 19px);
}

@media only screen and (min-height: 721px) {
    .date-card svg {
        width: 25px;
    }
}

.profile svg { width: 15px; }

@media only screen and (min-height: 721px) {
    .profile svg {
        width: 24px;
    }
}

.leaderboard svg {
    width: 20px;
}

@media only screen and (min-height: 721px) {
    .leaderboard svg {
        width: 30px;
    }
}

/*Top profile*/

.mr-top-profile {
    position: fixed;
    top: 46px;
    right: -412px;
    width: 250px;
    padding: 15px 8px;
    background-color: #fff;
    z-index: 5;
    display: flex;
    flex-direction: column;
    font-family: var(--nunito), sans-serif;
    transition: all 0.5s ease-in;
    font-size: 14px;
    font-weight: 400;
    border-radius: 10px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05);
}

.mr-top-profile .title-type-1.f20b {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--nunito), sans-serif;
    color: #383838;
}

.mr-top-profile.show {
    right: 5px;
}

@media only screen and (min-height: 721px) {
    .mr-top-profile {
        width: 312px;
        font-size: 16px;
        top: 66px;
    }
}

.mr-top-profile input.field-type-1 {
    height: 50px;
    font-size: 14px;
}

.title-type-1 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.157vw;
    font-weight: 600;
    color: #444;
    text-align: center;
    display: flex;
    justify-content: center;
}

.title-type-1.f20b {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

@media only screen and (min-height: 721px) {
    .title-type-1.f20b {
        font-size: 20px;
    }
}

.title-type-1.resp {
    font-size: 1.157vw;
}

.title-type-1.resp.red-text {
    margin-bottom: 5px;
    font-size: 1vw;
}

.textAvVideo {
    margin-top: 15px;
}

.mr-top-profile-label {
    position: relative;
    border-bottom: 1px solid #BDC3CA;
    display: block;
    padding: 0 0 3px 12px;
    cursor: pointer;
    margin-bottom: 5px;
}

@media only screen and (min-height: 721px) {
    .mr-top-profile-label {
        margin-bottom: 10px;
    }
}

.mr-top-profile-label::after {
    content: '';
    width: 10px;
    height: 8px;
    background: url(../img/arrow-grey.svg) top left no-repeat;
    background-size: 10px auto;
    position: absolute;
    top: 3px;
    right: 15px;
    transform: rotate(0);
    transition: all 0.3s;
}

@media only screen and (min-height: 721px) {
    .mr-top-profile-label::after {
        width: 14px;
        height: 8px;
        background-size: 14px auto;
        top: 5px;
    }
}

.mr-top-profile-label.active::after {
    transform: rotate(180deg);
}

.mr-top-profile-details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: all 1s;
    margin-top: 10px;
    font-size: 14px;
}

.mr-top-profile-details > div {
    overflow: hidden;
    display: grid;
}

.mr-top-profile-details label {
    padding: 0 0 7px 10px;
    font-size: 14px;
}

.mr-top-profile-details.is-opened {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0;
}

.mr-top-profile-details.is-opened.mb16 > div {
    margin-bottom: 10px;
}

@media only screen and (min-height: 721px) {
    .mr-top-profile-details.is-opened.mb16 > div {
        margin-bottom: 16px;
    }
}

.bs-list-extension .title-type-1 {
    color: #fff;
    font-size: 0.694vw;
    font-weight: 700;
}

select.sel-type-1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #E8ECF2;
    outline: 0;
    /* Personalize */
    width: 100%;
    height: 24px;
    padding: 0 10px 0 10px;
    background: url(../img/arrow-grey.svg) no-repeat right 8px center;
    background-size: 10px auto;
    color: #444444;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
    font-family: var(--nunito), sans-serif;
    font-size: 12px;
    vertical-align: middle;
}

@media only screen and (min-width: 1280px) {
    select.sel-type-1 {
        font-size: 14px;
    }
}

.cg-details.toCenter {
    align-items: center;
}

.title-type-1.mt10 {
    margin-top: 10px;
}

select.sel-type-1:focus {
  outline: none;
}

select.sel-type-1::-ms-expand {
  display: none;
}

select.sel-type-1.w80p {
    width: 80%;
    font-size: 0.810vw;
    background-size: 3.6% auto;
    height: auto;
    padding: 2% 5%;
}

select.sel-type-1.w180 {
    width: 180px;
}

select.sel-type-1.w136 {
    width: 136px;
}

select.sel-type-1.w48p {
    width: 48%;
}

select.sel-type-1.w60p {
    width: 55%;
}

select.sel-type-1.mb20 {
    margin-bottom: 20px;
}

select.sel-type-2 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0.058vw solid var(--CouplePurple); /*1px*/
    outline: 0;
    font: inherit;
    /* Personalize */
    width: 23.148vw;
    height: 2.315vw;
    padding: 0 0.694vw;
    background: #fff url(../img/arrow-grey.png) no-repeat right 0.694vw center;
    background-size: 0.6vw auto;
    color: #666;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--nunito), sans-serif;
    font-size: 0.926vw;
    vertical-align: middle;
    margin-top: 0.463vw;
}

.setup-wizard-content select.sel-type-2,
#av-settings-wrapper select.sel-type-1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 1.4vw;
}

select.sel-type-2:focus {
  outline: none;
}

select.sel-type-2::-ms-expand {
  display: none;
}

select.sel-type-2.w100p {
    width: 100%;
    margin: 0;
}

.textarea-type-1 {
    width: 100%;
    height: 7vh;
    resize: none;
    overflow: auto;
    padding: 7px 0.694vw;
    border: 1px solid #888888;
    color: #444444;
    border-radius: 5px;
    font-family: var(--nunito), sans-serif;
    font-size: 0.810vw;
    background: none;
}

input.field-type-1 {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    background: #F3F5F9;
    border: 1px solid #E8ECF2;
    color: #444444;
    border-radius: 5px;
    font-family: var(--nunito), sans-serif;
    font-size: 9px;
    font-weight: 400;
    margin: 0 0 10px 0;
}

@media only screen and (min-height: 721px) {
    input.field-type-1 {
        height: 50px;
        margin: 0 0 16px 0;
        font-size: 14px;
        border-radius: 8px;
    }
}

input.field-type-1::placeholder, .textarea-type-1::placeholder {
    color: #444;
}

input.field-type-1.w95 {
    width: 95px;
}

input.field-type-1.w48p {
    width: 48%;
}

input.field-type-1.w36p {
    width: 36%;
}

input.field-type-1.mb8 {
    margin-bottom: 8px;
}

select.sel-type-2.red-text-border, input.red-text-border{
    border: 0.058vw solid #e63e29;
}

.red-text{
    color: #e63e29;
}

.mr-top-profile .red-text,
.mr-top-profile .green-text {
    line-height: 1;
    padding: 10px;
    font-size: 12px;
}

.mr-top-profile  span.error-label-dob-lobby {
    font-size: 12px;
    color: var(--error);
}

.mt12 {
    margin-top: 12px;
}

.mt5 {
    margin-top: 5px;
}

button.blue-btn {
    background-color: var(--CouplePurple);
    height: 32px;
    padding: 6px 16px;
    border-radius: 54px;
    color: #fff;
    border: 0;
    font-family: var(--rubik), sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease-in;
}

body button.blue-btn.v2 {
    font-size: 0.694vw;
    font-weight: normal;
}

button.blue-btn:hover {
    background-color: #444;
}

button.blue-btn:disabled, button.blue-btn[disabled] {
    background-color: #cccecd;
    color: #888888;
    cursor: auto;
}

button.blue-btn.w180 {
    width: 180px;
}

button.blue-btn.noW {
    font-size: 0.926vw;
    height: 1.852vw;
    padding: 3% 5%;
}

body button.blue-btn.f11 {
    font-size: 0.637vw;
}

button.blue-btn.center {
    margin: 0 auto;
}

button.blue-btn2 {
    background-color: #1189ad;
    height: 3.125vw;
    padding: 0 1.968vw;
    border-radius: 0.463vw;
    color: #fff;
    border: 0;
    font-family: var(--rubik), serif;
    font-size: 1.389vw;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

button.blue-btn2:hover {
    background-color: #444;
}

button.blue-btn2.mt85 {
    margin-top: 4.919vw;
}

button.blue-btn2.mt40 {
    margin-top: 2.315vw;
}

button.blue-btn2.mt28 {
    margin-top: 28px;
}

button.blue-btn2.mt180 {
    margin-top: 10.417vw;
}

button.blue-btn2.absoluteB30 {
    position: absolute;
    bottom: 1.736vw;
    left: 50%;
    transform: translateX(-50%);
}

button.blue-btn2.mb60 {
    bottom: 4.815vw;
}

button.blue-btn2.v2:not(#button-join) {
    width: 13.889vw;
    margin: 0 auto;
    font-size: 2.315vw;
}

button.blue-btn2.no-click {
    pointer-events: none;
}

button.blue-btn2:disabled, button.blue-btn2[disabled] {
    background-color: #cccecd;
    color: #888888;
}

.white-btn {
    border: 1px solid #888888;
    border-radius: 6px;
    background-color: #f1f1f1;
    font-size: 14px;
    padding: 2px 0;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

.white-btn:hover {
    background-color: #1fa5c2;
    color: #fff;
    border-color: #1fa5c2;
}

.white-btn.noW {
    font-size: 0.810vw;
    padding: 1% 5%;
}

button.white-btn.center {
    margin: 0 auto;
}

.white-btn2 {
    cursor: pointer;
    background-color: #fff; 
    border-radius: 0.347vw;
    border: solid 0.058vw #c9cdd4;
    font-family: var(--nunito), sans-serif;
    font-size: 0.926vw;
    transition: all 0.1s ease-in;
    padding: 0.231vw 1vw;
    color: #444;
}

.white-btn2[disabled] {
    background-color: #cccecd;
    color: #888888;
}

.transparent-btn {
    font-family: var(--rubik), sans-serif;
    background-color: transparent;
    border: 0.058vw solid #fff;
    border-radius: 54px;
    font-size: 0.694vw;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.87);
    padding: 3% 5%;
    transition: all 0.3s ease-in;
}

.transparent-btn.f11 {
    font-size: 0.637vw;
}

.transparent-btn:hover {
    background-color: #444;
    border-color: #444;
}

.flex {
    display: flex;
}

.flex.between {
    justify-content: space-between;
}

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

.flex.gap26 {
    gap: 26px;
}

.flex.gap26 .grid {
    width: 100%;
}

.grid {
    display: grid;
}

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

.flexprf.between {
    justify-content: space-between;
}

.error-container {
    margin-top: -10px;
    margin-bottom: 10px;
}

/*Top Settings*/
ul.mr-top-settings {
    position: absolute;
    top: 48px;
    width: 23%;
    right: -25%;
    background-color: #f8f8f8;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-family: var(--nunito), sans-serif;
    transition: all 0.5s ease-in;
    font-size: max(14px, 0.810vw);
}

.mr-top-settings.show {
    right: 0;
}

ul.mr-top-settings li {
    display: flex;
    flex-direction: column;
    flex: 2;
    justify-content: end;
    padding: 14px 0 8px 0;
    cursor: pointer;
    transition: all 0.1s ease-in;
    position: relative;
}

ul.mr-top-settings li:hover,
ul.mr-top-settings li.on {
    background-color: #1fa5c2;
    color: #fff;
}

ul.mr-top-settings li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #d6dbe1;
    transition: none;
}

ul.mr-top-settings li:last-child::after {
    all: unset;
}

ul.mr-top-settings li.mr-top-settings-extension {
    all: unset;
    position: absolute;
    top: 100%;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background-color: #f1f1f1;
    display: none;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

ul.mr-top-settings li.mr-top-settings-extension.show {
    display: flex;
}

body ul.mr-top-settings svg path,
body ul.mr-top-settings svg g g path {
    fill: currentColor;
}

body ul.mr-top-settings li svg,
body ul.mr-top-settings svg g g path {
    fill: #444;
    color: #444;
    margin-bottom: 5px;
}
body ul.mr-top-settings li svg.mb2, body ul.mr-top-settings svg.mb2 g g path {
    margin-bottom: 2px;
}

body ul.mr-top-settings li:hover svg,
ul.mr-top-settings li.on svg,
body ul.mr-top-settings li:hover svg g g path,
ul.mr-top-settings li.on svg g g path {
    fill: #fff;
    color: #fff;
}

.title-type-2 {
    font-size: 0.926vw;
}

.f12 {
    font-size: 0.694vw;
}

.title-type-3 {
    font-size: 1.389vw;
    font-family: var(--nunito), sans-serif;
    font-weight: 700;
}

.title-type-3.mt36mb10 {
    margin-top: 2.083vw;
    margin-bottom: 0.579vw;
}

.title-type-3.mb8 {
    margin-bottom: 0.463vw;
}

.title-type-3.mt32 {
    margin-top: 1.852vw;
}

.mr-output-level {
    display: flex;
    width: 80%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5%;
}

.mr-output-level.v2 {
    width: 68%;
}

.mr-output-level.v3 {
    width: 100%;
}

body ul.mr-top-settings li .mr-output-level svg {
    margin-bottom: 0;
}

body ul.mr-top-settings li:hover .mr-output-level svg {
    fill: #444;
    color: #444;
}

.mr-level-test {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: 0.174vw;
}

.mr-output-level.v2 .mr-level-test {
    column-gap: 0.231vw;
    width: 88%;
}

.mr-level-test span {
    height: 0.6vh;
    background-color: #d6dbe1;
    display: block;
}

.mr-level-test > span:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.mr-level-test > span:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.mr-output-level.v2 .mr-level-test span {
    height: 0.694vw;
}

.mr-output-level.v3 .mr-level-test span {
    height: 0.405vw;
    border-radius: 0.116vw;
}

.mr-top-video-settings, .bs-video-settings {
    width: 40%;
    aspect-ratio: 4 / 3;
    background-color: #30363e;
    margin-bottom: 10px;
    position: relative;
    transform: scale(-1, 1); /*flip camera horizontally to generate mirror effect*/
}

.bs-video-settings {
    border: 0.058vw solid #D9D9D9;
    border-radius: 10px;
    overflow: hidden;
}

.mr-top-video-settings video, .bs-video-settings video {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.mr-settings-res {
    font-size: 0.694vw;
    text-align: center;
    margin: 1vh auto;
    line-height: 1.2;
}

/*Search*/

.mr-top-actions li.mr-search-field {
    all: unset;
}

.open-search {
    display: flex;
    align-items: center;
}

.open-search i {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
}

.open-search.open i {
    width: 28px;
    height: 28px;
    background-color: #e8e8e8;
    border-radius: 100%;
    margin-right: -28px;
}

.open-search svg {
    cursor: pointer;
}

.open-search-input {
    all: unset;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #888888;
    background: none;
    height: 4vh;
    font-family: var(--nunito), sans-serif;
    font-size: 0.810vw;
    color: #444444;
    width: 100%;
    padding: 0 10px 0 20px;
    overflow: hidden;
    transition: all 0.3s ease-in;
}

.open-search.open input {
    width: 200px;
    padding: 0 10px 0 36px;
}

.mr-top-search {
    position: absolute;
    width: 254px;
    box-sizing: border-box;
    background: #f8f8f8;
    top: 96px;
    left: -100%;
    z-index: 10;
    transition: all 0.5s ease-in;
    padding: 20px 12px;
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
}

.mr-top-search.show {
    left: 0;
    z-index: 20;
}

.mr-top-search-list {
    position: absolute;
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    grid-gap: 24px 5%;
    /* July 2024 */
    padding: 10px 0;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    background: #fff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.20);
    top: 36px;
    min-height: 224px;
    max-height: 327px;
    overflow-y: auto;
    border-radius: 6px;
    align-items: start;
    align-content: start;
}

@-moz-document url-prefix() {
    /*.mr-pre-left-nav.overflowY {
        padding-right: 6px !important;
    }
    
    .mr-submenu1:not(.overflowY) dl {
        padding-right: 6px !important;
    }*/

    .mr-submenu1.overflowY dl {
        padding-right: 14px !important;
    }
    .mr-top-search-list {
        scrollbar-width: thin;
        scrollbar-color: var(--CouplePurple) transparent;
    }
}

.mr-top-search-list::-webkit-scrollbar
{
    width: 10px;
    background: #ebecf0;
}

.mr-top-search-list::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 16px 16px transparent;
    border: solid 3px transparent;
    height: 34px;
}

.mr-top-search-list::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 4px 4px var(--CouplePurple);
    border: solid 3px transparent;
    border-radius: 14px;
    min-height: 30px;
}

.mr-top-search-list::-webkit-scrollbar-track-piece:end
{
    background: transparent;
}

.mr-top-search-list::-webkit-scrollbar-track-piece:start
{
    background: transparent;
}

.mr-top-search-list::-webkit-scrollbar-button
{
  display: none;
}

.mr-top-search-list li {
    padding: 0 0 0 12px;
    display: grid;
    grid-template-columns: 42px 1fr 20px;
    grid-gap: 0 5%;
    text-decoration: none;
    color: #444;
    position: relative;
    align-items: center;
}

.mr-top-search-list li::after {
    content: '';
    height: 0.5px;
    width: calc(100% - 20px);
    position: absolute;
    left: 10px;
    bottom: -12px;
    background-color: #BDC3CA;
}

.mr-top-search-list li:last-of-type:after {
    all: unset;
}

.mr-top-search .f-small {
    font-size: 0.694vw;
}

.mr-search-name {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 700;
    gap: 3px 0;
}

.mr-search-name a { 
    color: var(--CoupleBlue400);
    text-decoration: underline;
    background: url(../img/ic-link.svg) center left no-repeat;
    background-size: 13px auto;
    padding: 0 0 0 18px;
    font-size: 12px;
}

.mr-search-name a:hover {
    text-decoration: none;
}

.mr-search-name .f-small {
    font-size: 0.694vw;
}

.mr-search-name > span:nth-of-type(2) {
    font-weight: 500;
}

/*Pre left navigation*/

.mr-pre-left-nav {
   /* width: 274px; */
   width: 312px;
   position: absolute;
   left: 5px;
   top: 45px;
   background-color: #ebecf0;
   font-family: var(--nunito);
   z-index: 4;
   padding: 0 6px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   transition: all 0.3s ease-in;
}

.mr-pre-left-nav:not(.overflowY) {
    padding-right: 6px;
}

.mr-pre-left-nav.overflowY {
    padding-right: 14px;
}

@media only screen and (min-height: 721px) {
    .mr-pre-left-nav {
        top: 65px;
    }
}

@media  only screen and (max-width: 1300px) {
    .mr-pre-left-nav {
        width: 234px;
    }
}

.mr-pre-left-nav .split2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 8px auto;
    gap: 5px;
}

.pre-nav-in-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    background-size: auto 22px;
    /* width: 238px; */
    width: 100%;
    height: 36px;
    border-radius: 4px;
    padding: 0 10px 0 10px;
    gap: 7px;
    font-size: 14px;
}

.pre-nav-in-event .people {
    display: flex;
    background: url('../img/users.svg') center left no-repeat;
    background-size: auto 12px;
    padding: 0 0 0 26px;
}

.pre-nav-in-event svg {
    fill: #00587a;
    color: #00587a;
}

@media only screen and (min-height: 721px) {
    .mr-pre-left-nav {
        top: 65px;
    }
}

@media  only screen and (max-width: 1300px) {
    .mr-pre-left-nav {
        width: 234px;
    }
}

.pre-nav-in-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    background-size: auto 22px;
    width: 100%;
    height: 36px;
    border-radius: 4px;
    padding: 0 10px 0 10px;
    gap: 7px;
    font-size: 14px;
}

.pre-nav-in-event .people {
    display: flex;
    background: url('../img/users.svg') center left no-repeat;
    background-size: auto 12px;
    padding: 0 0 0 26px;
}

.pre-nav-in-event svg {
    fill: #00587a;
    color: #00587a;
}

/*Toggle switch*/
.switchFeed input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sliderFeed {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #383838;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 6px;
}

.sliderFeed:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 6px;
    top: 6px;
    background: #5A5A5A url('../img/feedOn.svg') top 4px center no-repeat;
    background-size: 16px auto;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

@media  only screen and (max-width: 1300px) {
    .sliderFeed:before {
        height: 22px;
        width: 22px;
        top: 7px;
        background: #5A5A5A url('../img/feedOn.svg') top 3px center no-repeat;
        background-size: 16px auto;
    }
}

input:checked + .sliderFeed {
    background-color: var(--CouplePurple);
}

.sliderFeed::after {
    content: "Feed: Off";
    color: #fff;
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding-left: 38px;
    transition: padding 0.3s ease-out;
    height: 36px;
    display: flex;
    align-items: center;
}

@media  only screen and (max-width: 1300px) {
    .sliderFeed::after {
        font-size: 12px;
        padding-left: 36px;
    }
}

input:checked + .sliderFeed::after {
    content: "Feed: On";
    color: #fff;
    padding-left: 14px;
}

@media  only screen and (max-width: 1300px) {
    input:checked + .sliderFeed::after {
        padding-left: 8px;
    }
}

input:checked + .sliderFeed:before {
    -webkit-transform: translateX(87.5px);
    -ms-transform: translateX(87.5px);
    transform: translateX(87.5px);
    background: var(--CouplePurple) url('../img/feedOn.svg') top 4px center no-repeat;
    background-size: 16px auto;
    left: 0;
}

@media  only screen and (max-width: 1300px) {
    input:checked + .sliderFeed:before {
        -webkit-transform: translateX(71px);
        -ms-transform: translateX(71px);
        transform: translateX(71px);
        background: var(--CouplePurple) url('../img/feedOn.svg') top 3px center no-repeat;
        background-size: 16px auto;
        left: 0;
    }
}

/*Toggle switch stop*/

.pre-nav-in-event2 {
    display: flex;
    align-items: center;
    background: #fafafa url(../img/Icons_Misc_compass.svg) center left 14px no-repeat;
    background-size: 20px auto;
    width: 230px;
    height: 36px;
    border-radius: 24px;
    margin: 8px auto;
    padding: 0 0 0 42px;
}

.pre-nav-room {
    background: #fafafa;
    position: relative;
    display: grid;
    transition: all 0.3s ease-in;
}

.pre-nav-room .ic-1 {
    display: block;
    background: url(../img/Icons_Misc_compass.svg) center left 14px no-repeat;
    background-size: 20px auto;
    padding: 10px 0 10px 44px;
}

.pre-nav-link {
    position: absolute;
    top: 14px;
    right: 10px;
    display: block;
    width: 18px;
    height: 18px;
    background: url('../img/arrow_up.svg') top left no-repeat;
    background-size: 18px auto;
    cursor: pointer;
}

.pre-nav-link.hide {
    display: none;
}

.pre-nav-btn {
    background: #1189ad;
    border: 1px solid #1189ad;
    border-radius: 8px;
    color: #fff;
    width: 230px;
    height: 32px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--rubik), sans-serif;
    font-size: 16px;
    margin: 0 auto 13px auto;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

.pre-nav-btn:hover {
    background: #fafafa;
    color: #1189ad;
}

.pre-nav-btn.hide {
    display: none;
}

.pre-nav-btn:disabled, .pre-nav-btn[disabled] {
    background-color: #ebecf0;
    border: 1px solid #ebecf0;
    color: #a4a4a4;
    cursor: default;
}

/*Left Navigation*/

ul.mr-left-nav {
    background-color: #ebecf0;
    width: 80px;
    height: 422px;
    display: flex;
    flex-direction: column;
    gap: 16px 0;
    padding: 8px 0;
    z-index: 4;
    position: absolute;
    left: 0;
    top: 141px;
}

ul.mr-left-nav.v2 {
    top: 100px
}

ul.mr-left-nav.hide {
    display: none;
}

ul.mr-left-nav.removeRadius {
    border-bottom-right-radius: 0;
}

ul.mr-left-nav li.mr-room a {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s ease-in;
    background-color: #fff;
    border-radius: 100%;
}

ul.mr-left-nav li.mr-room a svg {
    fill: #3C414D;
    color: #3C414D;
}

ul.mr-left-nav li.mr-room a:hover svg {
    fill: #00587a;
    color: #00587a;
}

ul.mr-left-nav li {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

ul.mr-left-nav li:not(:first-child) a {
    color: #444;
    text-decoration: none;
    width: 64px;
    height: 48px;
    background-color: #fff;
    border-radius: 8px;
    place-items: center;
    font: 16px var(--nunito);
    font-weight: 600;
    transition: all 0.3s ease-in;
    position: relative;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    justify-content: center;
}

ul.mr-left-nav li:not(:first-child)::after {
    content: '';
    position: absolute;
    width: 72px;
    height: 1px;
    left: 4px;
    bottom: -8px;
    background-color: #c9cdd4;
}

ul.mr-left-nav li:last-child::after {
    all: unset;
}

ul.mr-left-nav li:not(:first-child) a b {
    font-weight: 600;
}

ul.mr-left-nav li a.active {
    background-color: #00587a;
    color: #fff;
    position: relative;
}

ul.mr-left-nav li:not(:first-child) a:disabled, ul.mr-left-nav li:not(:first-child) a[disabled] {
    background-color: #cccecd;
    color: #888888;
}

.mr-submenu1 [disabled] {
    background-color: #d7dae0;
    color: #888888;
}

ul.mr-left-nav li a span {
    position: absolute;
    right: -11.9px;
    top: 15px;
    font-size: 22px;
    color: #fff;
    display: block;
    overflow: hidden;
    line-height: 1;
    transform: rotate(180deg) scale(0);
    transform-origin: center center;
    width: 12px;
    height: 18px;
}

ul.mr-left-nav li a.active span {
    transition-delay: 0.6s;
    transition: all 0.6s ease-in;
    transform: rotate(180deg) scale(1);
}

ul.mr-left-nav li a.active.arrow::after {
    transition: all 0.3s ease-in;
    transition-delay: 0.6s;
    
}

body ul.mr-left-nav li a.active:hover {
    background-color: #00587a;
}

ul.mr-left-nav li:not(:first-child) a:hover, 
ul.mr-left-nav li:not(:first-child) a.joined {
    background-color: #d7dae0;
}

ul.mr-left-nav li a:hover {
    background-color: #d7dae0;
}

ul.mr-left-nav li:not(:first-child) a.joined {
    border-radius: 8px;
}

ul.mr-left-nav li a.joined {
    background-color: #5a5ad6;
    color: #fff;
}

.mr-submenu1 {
    height: 504px;
    /* width: 274px; */
    width: 312px;
    position: absolute;
    top: 100px;
    left: 5px;
    z-index: 40;
    /* display: flex;
    justify-content: flex-end; */
    transition: all 0.3s ease-in;
}

@media  only screen and (max-width: 1300px) {
    .mr-submenu1 {
        width: 234px;
    }
    .mr-submenu1 dd .mr-sub-title {
        font-size: 14px;
        margin-top: 1px;
    }
}

/*.mr-submenu1.hide {
    display: none;
}*/

.mr-submenu1.hide, .mr-pre-left-nav.hide {
    display: block !important;
    visibility: hidden;
    left: -100%;
}

.mr-submenu1.visible {
    left: 0;
}

.mr-submenu1:not(.overflowY) dl {
    padding-right: 15px;
}

.mr-submenu1.overflowY dl {
    padding-right: 0;
    overflow-y: scroll;
}


.mr-submenu1 dl.show {
    display: flex;
}

/* Custom scroll */

.mr-submenu1 dl::-webkit-scrollbar
{
    width: 15px;
    background: #ebecf0;
}

.mr-submenu1 dl::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 16px 16px transparent;
    border: solid 9px transparent;
    height: 34px;
}

.mr-submenu1 dl::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 4px 4px var(--CouplePurple);
    border: solid 6px transparent;
    border-radius: 14px;
    min-height: 30px;
    border-bottom: unset;
    border-top: unset;
}

.mr-submenu1 dl::-webkit-scrollbar-track-piece:end
{
    background: transparent;
}

.mr-submenu1 dl::-webkit-scrollbar-track-piece:start
{
    background: transparent;
}

.mr-submenu1 dl::-webkit-scrollbar-button
{
  display: none;
}

.mr-submenu1 dl dd {
    width: 100%;
    /* width: calc(100% - 16px); */
    display: grid;
    grid-template-rows: 22px auto;
    grid-template-columns: 65px 1fr;
    padding: 6px 9px 0 8px;
    align-items: unset;
    /*flex: 1;*/
    position: relative;
    height: 84px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.1s ease-in;
    font-family: var(--nunito);
    background-color: #fff;
    border-radius: 6px;
}

@media only screen and (max-width: 1300px) {
    .mr-submenu1 dl dd {
        grid-template-columns: 50px 1fr;
    }
}


@-moz-document url-prefix() {
    .mr-submenu1 dl dd {
        width: 100%;
    }
}

@media only screen and (min-height: 816px) {
    .mr-submenu1 dl dd {
        width: 100%;
    }
}

.mr-submenu1 dl dd i {
    grid-row: 2;
    grid-column: 1;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background-color: #F3F5F9;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E8ECF2;
}

@media only screen and (max-width: 1300px) {
    .mr-submenu1 dl dd i {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
}

.mr-submenu1 dl dd i svg {
    fill: var(--CouplePurple);
    color: var(--CouplePurple);
}

/*.mr-submenu1 dl dd.joined i,
.mr-submenu1 dl dd.joined:hover i {
    background-color: #ebecf0;
}*/

/*.mr-submenu1 dl dd.joined i svg {
    fill: #fff;
    color: #fff;
}*/

/*.mr-submenu1 dl dd:hover i, 
.mr-submenu1 dl dd.active i {
    background-color: #ebecf0;
}*/

/*.mr-submenu1 dl dd:nth-of-type(5) {
    border-bottom-right-radius: 8px;
}*/

body .mr-submenu1 dl dd.joined,
body .mr-submenu1 dl dd.joined:hover {
    background-color: var(--CouplePurple);
    border-bottom: 1px solid #d7dae0;  
    color: #fff;
    cursor: default;
}

body .mr-submenu1 dl dd .mr-sub-plus {
    background-color: #E8ECF2;
    color: #444;
}

body .mr-submenu1 dl dd:hover .mr-sub-plus {
    background-color: #FAFAFA;
    color: #444;
}

.mr-submenu1 dl dd:hover,
.mr-submenu1 dl dd.active {
    background-color: var(--CouplePurple);
    border-bottom: 1px solid #d7dae0;
    color: #fff;
}

/*body .mr-submenu1 dl dd.joined:hover .mr-sub-plus {
    background-color: #00587a;
    color: #fff;
}*/

.mr-submenu1 dd[data-roomcohost="1"], .mr-submenu1 dd:has(span.mr-sub-full) {
    cursor: default;
}

.mr-submenu1 dl dd:last-of-type {
    border-bottom: unset;
}

.mr-sub-title {
    grid-column: 1 / -1;
    font-size: 16px;
    padding: 0 0 1px 0;
    font-weight: 600;
}

.mr-submenu1 dl dd.joined .mr-sub-title {
    font-weight: bold;
}

.mr-sub-host {
    position: absolute;
    top: 8px;
    right: 10px;
    height: 18px;
    display: flex;
    gap: 0 7px; 
    align-items: center;
}

.mr-sub-host li.stream, 
.mr-sub-host li.host_badge {
    background-color: var(--CoupleBlue400);
    border-radius: 16px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    height: 18px;
    line-height: 18px;
}

@media only screen and (max-width: 1300px) {
    .mr-sub-host li.stream {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
    }
}

@keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.mr-sub-host .dot {
    display: block;
    width: 12px;
    height: 12px;
    background-color:var(--CoupleRedPrime);
    border-radius: 100%;
    animation: 1.5s blink ease infinite;
}

.mr-sub-host li.red-dot {
    width: 10px;
    height: 10px;
    background-color: var(--CoupleRedPrime);
    border-radius: 100%;
    position: absolute;
    right: 24px;
}

.mr-sub-icons {
    /* display: flex; */
    display: grid;
    grid-template-columns: 40px 40px 40px minmax(0, 1fr);
    align-items: center;
    grid-column: 2;
}

@media only screen and (max-width: 1300px) {
    .mr-sub-icons {
        grid-template-columns: 32px 32px 32px minmax(0, 1fr);
    }
}

.mr-sub-plus {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E8ECF2;
    margin-left: -12px;
    color: #444;
    font-size: 16px;
    transition: all 0.1s ease-in;
}

@media only screen and (max-width: 1300px) {
    .mr-sub-plus {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

.mr-sub-full {
    height: 20px;
    background-color: var(--CoupleRedPrime);
    font-size: 14px;
    border-radius: 16px;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -12px;
}


.mr-submenu1 dl dd:hover .mr-sub-plus, 
.mr-submenu1 dl dd.active .mr-sub-plus {
    background-color: #FAFAFA;
    color: #444;
}

.mr-sub-plus.v2 {
    width: auto;
    border-radius: 40px;
    padding: 0 7px;
}

.mr-sub-ic26 {
    width: 26px;
    height: 26px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic32 {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic40 {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic40 img {
    width: 40px;
    height: 40px;
}

.mr-sub-icons .mr-sub-ic40:nth-of-type(2) {
    margin-left: -4px;
}

.mr-sub-icons .mr-sub-ic40:nth-of-type(3) {
    margin-left: -8px;
}

.mr-sub-icons svg:nth-of-type(2) {
    margin-left: -4px;
}

.mr-sub-icons svg:nth-of-type(3) {
    margin-left: -8px;
}

.mr-sub-icons svg {
    color: var(--CouplePurple);
    fill: var(--CouplePurple);
}

.mr-sub-ic32.grey {
    font-family: var(--rubik), sans-serif;
    background-color: #d8d8d8;
    font-size: 16px;
    font-weight: 500;
}

.mr-sub-ic48 {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E8ECF2;
}

.rd44-content .row:nth-child(odd) .mr-sub-ic48 {
    background: #fff;
}

.rd44-content.dating-card-content > p.ml12 {
    font-size: 16px;
}

.mr-sub-ic48 img {
    height: 100%;
    max-width: max-content;
}

.mr-sub-ic116 {
    width: 116px;
    height: 116px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Chat bubble */

.mr-sub-ic32-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    position: relative;
}

.mr-sub-ic32-wrapper.flex {
    width: 1.852vw;
    height: 1.852vw;
}

.mr-sub-ic48-wrapper {
    width: 48px;
    height: 48px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 100%;
    position: relative;
}

.summaryCoupleCutData .mr-sub-ic48-wrapper {
    width: 80%;
    height: auto;
}

.chat-alert {
    position: absolute;
    top: -4px;
    right: -8px;
    background-color: var(--CouplePurple);
    width: 18px;
    height: 18px;
    font-size: 10px;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    z-index: 1;
    animation: 1.8s blink ease infinite;
}

.mr-right-nav .chat-alert {
    background-color: #E63E29;
}

.chat-alert.nav {
    top: 29px;
    right: 20px;
    background-color: var(--CouplePurple);
}

.chat-alert.nav.joined {
    top: 29px;
    right: 20px;
    color: #444;
    background-color: #fff;
}

/* END Chat bubble */

.mr-sub-ic36R {
    width: 2.083vw;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic40 {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 1300px) {
    .mr-sub-ic40 {
        width: 32px;
        height: 32px;
    }
}

.mr-sub-ic44R {
    width: 2.546vw;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #383838;
    font-size: 1.157vw;
    font-family: var(--rubik), sans-serif;
    background-color: #f1f1f1;
}

.mr-sub-ic44R.ml-22 {
    margin-left: -1.273vw;
}

.mr-sub-ic44R.ml24 {
    margin-left: 1.389vw;
}

.mr-sub-ic48 {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rd44-content .mr-sub-ic100p {
    border-radius: 10px;
}

.rd44-content.v3 .mr-sub-ic100p {
    border-radius: 0.579vw; /* 10px */
}

.mr-sub-ic100p, 
.mr-sub-ic48 {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic100p.grey, .mr-sub-ic48.grey {
    font-family: var(--rubik), sans-serif;
    background-color: #d8d8d8;
    font-size: 0.926vw;
    font-weight: 500;
}

.mr-sub-ic100p.grey > img {
    width: 100%;
}

.mr-sub-ic80p {
    width: 80%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic100p.blue svg, 
.mr-sub-ic100p.blue img  {
    color: var(--CouplePurple);
    fill: var(--CouplePurple);
    width: 42px;
}

.mr-sub-ic64 {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic32.center {
    margin: 0 auto;
}

.mr-sub-ic72R {
    width: min(3.472vw, 72px);
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic72R > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (min-width: 2561px) {
    .mr-sub-ic72R {
        width: 3.472vw;
    }
}

.mr-sub-ic60R {
    width: min(3.472vw, 72px);
    aspect-ratio: 1/1;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

body .mr-interstitial-top .mr-sub-ic60R svg,
body .mr-interstitial-top .mr-sub-ic60R img {
    all: unset;
    color: var(--CouplePurple);
    width: min(3.472vw, 72px);
    height: 100%;
    object-fit: cover;
    overflow-clip-margin: content-box;
    overflow: clip;
}

.mr-sub-ic88 {
    width: 5.093vw;
    height: 5.093vw;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 1920px) {
    .mr-sub-ic88 {
        width: 19%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

.mr-sub-ic88.center {
    margin-left: auto;
    margin-right: auto;
}

.mr-sub-ic88.mb6 {
    margin-bottom: 6px;
}

.mr-submenu-level2 {
    width: 537px;
    background-color: #fafafa;
    position: absolute;
    top: 141px;
    border-top-left-radius: 0;
    font-size: 14px;
    padding: 10px 0;
    left: -537px;
    transition: all 0.5s ease-in;
    z-index: 3;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05);
}

.mr-submenu-level2.v2 {
    top: 136px; 
    width: 390px;
    border-radius: 10px;
    background-color: #fff;
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    color: var(--TextHighEmphasis);
}

@media only screen and (min-height: 721px) {
    .mr-submenu-level2.v2 {
        top: 156px; /* July 2024 */
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .mr-submenu-level2.v2 {
        transform: scale(0.65);
        transform-origin: top left;
    }
}

.mr-submenu-level2.hide {
    display: none !important;
}

.mr-submenu-level2.elem2 {
    top: 219px;
}

@media only screen and (min-height: 721px) {
    .mr-submenu-level2.elem2 {
        top: 239px; /* July 2024 */
    }
}

.mr-submenu-level2.elem3 {
    top: 303px;
}

@media only screen and (min-height: 721px) {
    .mr-submenu-level2.elem3 {
        top: 323px; /* July 2024 */
    }
}

.mr-submenu-level2.elem4 {
    top: 387px;
}

@media only screen and (min-height: 721px) {
    .mr-submenu-level2.elem4 {
        top: 407px; /* July 2024 */
    }
}

.mr-submenu-level2.elem5 {
    top: 491px; /* July 2024 */ 
}

@media (min-aspect-ratio: 16/9) and (max-height: 768px) {
    .mr-submenu-level2.elem5 {
        top: 361px; /* July 2024 */
        border-bottom-left-radius: 0; 
    }
}

.mr-submenu-level2.darkBorder {
    border-left: 7px solid #5a5ad6;
}

.mr-submenu-level2.show {
    left: 279px;
}

@media only screen and (max-width: 1300px) {
    .mr-submenu-level2.show {
        left: 237px;
    }
}

ul.mr-sl2-list {
    display: grid;
    grid-template-columns: repeat(3, 176px);
    gap: 1px 1px;
}

ul.mr-sl2-list li {
    display: flex;
    width: 176px;
    height: 48px;
    padding: 0 12px 0 10px;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: all 0.3s ease-in;
}

ul.mr-sl2-list li a {
    margin-left: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in;
}

ul.mr-sl2-list li:hover {
    background-color: #bbbfc7;
}

ul.mr-sl2-list li.active {
    background-color: #bbbfc7;
}

ul.mr-sl2-list li.active a {
    opacity: 1;
    visibility: visible;
}

ul.mr-sl2-list li:hover a {
    opacity: 1;
    visibility: visible;
}

ul.mr-sl2-list li a img {
    opacity: 0.8;
}

ul.mr-sl2-list li a:hover img {
    opacity: 1;
}

.mr-user-menu {
    min-width: 148px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 48px;
    z-index: 1;
    background-color: #ebecf0;
    font-size: 12px;
    display: none;
}

.mr-user-menu.show {
    display: block;
}

.mr-user-menu.chat {
    width: 188px;
    left: auto;
    right: 25px;
    top: 40px;
    background-color: #f1f1f1;
}

.mr-user-menu.chat.show {
    display: block;
}

.mr-user-menu.chat svg {
    all: unset;
    fill: transparent;
    color: #444;
    width: 13px;
}

.mr-user-menu a > svg {
    pointer-events: none !important;
}

#datecard-settings-wrapper a.view_chat_link svg,
.mr-user-menu.search a.view_chat_link svg {
    margin-left: 2px;
    margin-right: -2px;
    margin-top: 5px;
}

.mr-user-menu.lobby.w130 {
    width: 100%;
}

@media only screen and (min-width: 1920px) {
    .mr-user-menu.lobby, .mr-user-menu.lobby.w130 {
        width: auto;
    }
    .mr-user-menu.lobby a.view_chat_link svg,
    .mr-user-menu.lobby a.view_gift_link svg {
        margin-left: 1px !important;
        margin-right: -1px !important;
    }
}

.mr-user-menu.lobby a.view_chat_link svg {
    margin-bottom: -6px !important;
}

.mr-user-menu.lobby a.view_profile_link svg,
.mr-user-menu.lobby a.view_bootCount_link svg,
.mr-user-menu.lobby a.view_bootHost_link svg,
.mr-user-menu.lobby a.view_request_link svg,
.mr-user-menu.lobby a.view_report_link svg,
.mr-user-menu.lobby a.view_prevent_link svg,
.mr-user-menu.lobby a.view_status_link svg {
    margin-left: -1px !important;
    margin-right: 1px !important;
}

.mr-user-menu.lobby {
    display: none;
    top: calc(100% + 1px);
    z-index: 12;
    width: 100%;
    left: unset;
    right: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
}

.borderYellow .mr-user-menu.lobby,
.borderPurple .mr-user-menu.lobby {
    width: calc(100% + 0.862vh);
    left: -0.431vh;
    top: calc(100% + 0.431vh + 1px);
}

.mr-user-menu.lobby.bottom {
    top: unset;
    bottom: 24px;
    border-radius: 6px 6px 0 0;
}

.mr-user-menu.lobby.show {
    display: block;
    z-index: 110;
}

.mr-user-menu.lobby.bottom {
    top: unset;
    bottom: 20px;
}

.mr-user-menu.lobby svg {
    all: unset;
    fill: #444;
    color: #444;
    width: 15%;
}

@media only screen and (min-width: 1500px) {
    .mr-user-menu.lobby svg {
        width: min(17px, 0.8vw);
    }
}

.mr-user-menu.lobby svg.no-fill {
    fill: none;
    stroke: #444;
}

.mr-user-menu.lobby a {
    display: flex;
    padding: 4% 8%;
    gap: 0 8%;
    font-size: max(0.5vw, 14px);
    height: auto;
}

@media only screen and (min-width: 1500px) {
    .mr-user-menu.lobby a {
        padding: 7px 8px;
        gap: 0 10px;
    }
}

.mr-user-menu.search {
    display: none;
    top: 100%;
    z-index: 2;
    width: 100%;
    left: unset;
    right: 0;
    margin-top: 10px;
    background-color: #fff;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #fff;
}

.mr-user-menu.search.pos-top {
    top: -97px;
}

.mr-user-menu.search.w176 {
    width: 176px;
}

.mr-user-menu.search.w224 {
    width: 224px;
}

.mr-user-menu.search.show {
    display: block;
    z-index: 3;
}

.mr-user-menu.search.bottom {
    top: unset;
    bottom: 20px;
}

.mr-user-menu.search.bottomv2 {
    top: unset;
    bottom: 52px;
}

.mr-user-menu.search svg {
    all: unset;
    fill: transparent;
    color: #444;
    width: 15px;
}

@media only screen and (min-width: 1500px) {
    .mr-user-menu.search svg {
        width: 17px;
    }
    
    .mr-user-menu.search.svg20 svg {
        width: 20px;
    }
}

.mr-user-menu.search a {
    display: flex;
    padding: 0 10%;
    gap: 0 10px;
    font-size: max(0.7vw, 14px);
    background-color: var(--CoupleGray300);
    border-bottom: 1px solid #fff;
    font-weight: 500;
}

.mr-user-menu.search a:last-of-type {
    border-bottom: 0;
}

@media only screen and (min-width: 1500px) {
    .mr-user-menu.search a {
        padding: 0 10px;
        gap: 0 10px;
        font-size: 14px;
    }
}

.mr-user-menu a {
    height: 32px;
    padding: 0 12px;
    gap: 0 12px;
    font-size: max(14px, 0.5vw);
    color: #262e3a;
    text-decoration: none;
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
}

.mr-s-open-self a {
    padding: 5px 0;
    display: flex;
}

.mr-s-open {
    padding: 5px;
    display: flex;
}

.mr-s-open.hide {
    display: none;
}

a.mr-s-close {
    font-size: 26px;
    text-decoration: none;
    color: #242429;
    display: none;
}

.mr-top-search a.mr-s-close {
    font-size: 1.157vw;
    text-decoration: none;
    color: #242429;
    display: none;
    align-self: start;
}

a.mr-s-close:hover {
    text-decoration: none;
}

a.mr-s-close.show {
    display: block;
}

.mr-right-nav li .oc-top a.mr-s-open {
    margin-left: auto;
    padding: 0 5px;
}

.mr-right-nav li .oc-top a.mr-s-close {
    width: 1.042vw;
    margin-left: auto;
    height: 100%;
    aspect-ratio: 1/ 1;
    background-color: transparent;
    display: none;
    place-items: center;
    color: #242429;
    font-size: 18px;
    text-decoration: none;
    padding-right: 15px;
}

.mr-right-nav li .oc-top a.mr-s-close.show {
    display: grid;
    font-size: 26px;
    text-decoration: none;
    color: #242429;
    padding-right: 20px;
}

body .mr-user-menu a:hover {
    text-decoration: none;
    background-color: var(--CouplePurple);
    color: #fff;
    fill: #fff;
}

body .mr-user-menu a svg path {
    fill: currentColor;
}

body .mr-user-menu a svg {
    fill: #3c414d;
    color: #3c414d;
    justify-self: center;
}

body .mr-user-menu a:hover svg {
    fill: #fff;
    color: #fff;
}

body .mr-user-menu.chat a:hover svg,
body .mr-user-menu.search a:hover svg {
    fill: transparent;
}

.modal-container {
    position: fixed;
    top: 20px;
    left: 0;
    display: grid;
    place-items: center;
    transition: opacity 0.3s ease-in;
    width: 0;
    height: 0;
    z-index: -10;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.modal-container.top {
    place-items: unset;
    justify-content: center;
    align-items: start;
    top: 40px;
}

.modal-container.show {
    width: 100%;
    height: calc(100% - 7.5vh);
    z-index: 300;
    overflow: visible;
    visibility: visible;
    opacity: 1;
}

.modal {
    border-radius: 6px;
    background-color: #f8f8f8;
    overflow: hidden;
    font-size: 16px;
}

.overlay-view-report.modal {
    border-radius: 10px;
}

.modal.w545 {
    width: 545px;
}

.modal.w600 {
    width: 600px;
}

.modal-fluid {
    position: relative;
    margin-top: 4.456vw;
    border-radius: 0.463vw 0.463vw 0.926vw 0.926vw;
    background-color: #fff;
    overflow: hidden;
    font-family: var(--nunito), sans-serif;
    font-size: 1.157vw;
    line-height: 1.4;
}

.modal-fluid.w540 {
    width: 31.250vw;
}

.modal-top,
.interstitial-top {
    border-radius: 6px;
    background-color: #e0e0e0;
    height: 28px;
    line-height: 28px;
    text-align: right;
    padding: 0 15px;
}

.modal-top a,
.interstitial-top a {
    text-decoration: none;
    font-size:30px;
    color: #444;
}

.modal-profile-grid {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0 24px;    
    padding: 24px;
}

.modal-profile-name {
    font-size: 28px;
    font-weight: 500;
}

.modal-profile-name > span {
    font-size: 20px;
    display: block;
}

.modal-profile-description {
    grid-column: span 2;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 28px;
}

.modal-profile-description > span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    width: 100%;
}

.modal-content {
    padding: 32px;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    display: none;
}
.modal-content.show {
    display: block;
}

.modal-container h6 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

.report-step {
    display: none;
}

.report-step.show {
    display: block;
}

.report-step.report_step2 {
    text-align: center;
}

.field-type-2 {
    width: 100%;
    height: 2.778vw;
    background-color: #f2f3f6;
    font-size: 1.157vw;
    border: 0;
    border-radius: max(8px, 0.231vw);
    padding: 0 1.157vw;
    color: #383838;
    font-family: var(--nunito), sans-serif;
    margin-bottom: 1.389vw;
}

.field-type-3 {
    width: 100%;
    height: 1.852vw;
    background-color: #f2f3f6;
    font-size: 0.926vw;
    border: 0;
    border-radius: max(8px, 0.231vw);
    padding: 0 1.157vw;
    color: #383838;
    font-family: var(--nunito), sans-serif;
    margin-bottom: 0.579vw;
}

.field-type-4 {
    width: 100%;
    height: 2.315vw;
    background-color: #fff;
    font-size: 0.926vw;
    box-shadow: 0 0.231vw 0.463vw 0 rgb(154 154 154 / 30%);
    border: 0.058vw solid var(--CouplePurple);
    border-radius: max(8px, 0.231vw);
    padding: 0 12px;
    color: #666;
    font-family: var(--nunito), sans-serif;
}

a.blue-btn {
    min-width: 200px;
    padding: 0 30px;
    height: 36px;
    border-radius: 6px;
    background-color: #1fa5c2;
    color: #fff;
    text-transform: uppercase;
    font-size: 19px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease-in;
    margin-top: 25px;
}

a.blue-btn:hover {
    border: solid 2px #1fa5c2;
    background-color: #fff;
    color: #1fa5c2;
}

a.blue-btn.mt0 {
    margin-top: 0;
}

.report-grid {
    margin: 1.157vw 0 0.579vw 0;
    grid-template-rows: repeat(2, 2.894vw);
    gap: 1.042vw 0.868vw;
    font-size: 0.73vw; /* 14px at 1920px */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    font-family: var(--nunito), sans-serif;
    font-weight: 400;
    align-content: start;
    align-items: start;
}

.report-grid.v2 {
    justify-content: center;
    gap: 0.289vw 0.868vw;
}

.report-grid > div {
    text-align: center;
    padding: 0 0.579vw;
}

.report-grid a {
    height: 100%;
    border-radius: 90px;
    border: solid 0.116vw var(--CouplePurple);
    background-color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
}

.report-grid a:hover {
    background-color: var(--CouplePurple);
    text-decoration: none;
    color: #fff;
}

.modal-textarea, .textarea-modal {
    width: 460px;
    height: 135px;
    border-radius: 6px;
    border: solid 1px #7a7b7d;
    background-color: #fff;
    padding: 10px;
    margin: 20px auto 10px auto;
    line-height: 20px;
    font: 16px var(--rubik), sans-serif;
}
.modal-textarea::placeholder, .textarea-modal::placeholder {
      color: #7a7b7d;
}

/*Right navigation*/

.mr-right-nav {
    /* background-color: #f1f1f1; */
    background-color: #fff;
    border-radius: 10px;
    width: 85px;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 5px;
    top: 46px;
    z-index: 44;
    font-size: 12px;
    transition: all 0.1s ease-in;
}

.mr-right-nav.expand {
    width: 376px;
    font-size: 16px;
}

@media only screen and (min-height: 721px) {
    .mr-right-nav {
        top: 66px;
    }
}

/* Custom scroll */
.mr-right-nav::-webkit-scrollbar
{
    background: #dfe5eb;
    width: 5px;
}

.mr-right-nav::-webkit-scrollbar-track
{
    background: #dfe5eb;
    border-radius: 25px;
}

.mr-right-nav::-webkit-scrollbar-thumb
{
    background: var(--CouplePurple);
    border-radius: 25px;
}

.mr-right-nav::-webkit-scrollbar-button
{
  display: none;
}

/*lower heights*/
@media only screen and (max-height: 720px) {
    #profile-settings-wrapper .mr-top-profile-details label {
        font-size: 12px;
        padding: 0 0 4px 7px;
    }

    #profile-settings-wrapper select.sel-type-3, 
    #profile-settings-wrapper input.field-type-1 {
        height: 34px;
        padding: 0 10px;
        margin: 0 0 10px 0;
        font-size: 12px;
    }

    #profile-settings-wrapper select.sel-type-3 {
        background-size: 10px auto;
    }

    #profile-settings-wrapper span.error-label, 
    #profile-settings-wrapper span.error-label-dob,
    #profile-settings-wrapper span.error-label-dob-lobby,
    #profile-settings-wrapper span.error-label-lobby {
        margin-left: 3px;
    }

    #profile-settings-wrapper .textarea-type-1 {
        padding: 7px 10px;
    }

    .mr-user-menu, .mr-user-menu.lobby {
        left: 0;
        min-width: 128px;
    }

    .mr-user-menu a, .mr-user-menu.lobby a, .mr-user-menu.search a {
        font-size: 12px;
    }

    .progress-bar, .progress-bar.flex, .progress-bar .bar {
        font-size: 12px !important;
    }

    #datecard-settings-wrapper .mr-user-menu.search a,
    .mr-user-menu.chat a  {
        font-size: 14px;
    }

    #overlayExitDate, #exitOrRefresh {
        max-width: 727px !important;
    }

    #knowYouContainer .progress-bar.v2 {
        height: 25px;
    }

    .btn-yellow, .btn-yellow.invite_submit, .btn-yellow.prevent_submit {
        font-size: 12px;
        height: 36px;
    }

    /*.mr-balance {
        font-size: 12px !important;
    }*/

    .textAvVideo {
        margin-top: 6px;
    }

    .overlay-view-report .modal-content,
    .overlay-view-report .modal-content .report-grid {
        font-size: max(12px, 0.81vw) !important;
    }

    .overlay-view-report .modal-content.report_step2,
    .overlay-view-report .modal-content.report_step3 {
        max-width: 444px;
        margin: 0 auto;
    }

    #knowYouFinal .progress-bar.v2 {
        padding: 0.3vw;
    }

    #knowYouFinal .progress-bar-title2 {
        margin-left: 1.5vw !important;
    }

    #authorizenet-container .spinner {
        margin-top: -3px;
    }

    #main-frame-overlay .mr-setup-container.v3 hr.mr-line-2 {
        margin-bottom: 2vw;
    }

    .overlay-view-report.modal {
        max-width: 444px;
    }

    .couplecoin14 {
        width: 10px !important;
    }

    .mr-i-buttons button#doubleTime span.extra svg {
        width: 10px;
    }

    #greenToDateTransition dl.interests-list-1 dd > div,
    #greenToDateTransition dl.interests-list-1 dd > dt,
    #greenToDateTransition dl.interests-list-1 dd > dd,
    #greenToDateTransition dl.interests-list-1 dd span {
        height: min(1.447vw, 25px);
        gap: 0 min(0.289vw, 6px);
        font-size: min(0.694vw, 14px);
        padding: min(2px, 5px) min(1.273vw, 26px);
        border-radius: min(2.315vw, 48px);
    }
    
    .mr-interstitial-container.v5 {
        width: 43%;
    }

    .mr-interstitial-container.v5 .rd44-content.v3 .row {
        grid-template-columns: 3.125vw minmax(0, 1fr) 9.5vw 5.5vw;
    }

    .mr-interstitial-container.v5 ul.card-gifts.v2 li {
        height: 100%;
    }

    .mr-interstitial-container.v5 ul.card-gifts.v2 li img {
        width: 2vw;
        margin: 0 auto;
    }

    .mr-interstitial-container.v5 ul.card-gifts.v2 {
        height: 2.51vw;
        justify-items: center;
    }

    .mr-interstitial-container.v5 ul.card-gifts.v2 .no {
        width: 1.15vw;
        font-size: 0.8vw;
    }

    .mr-interstitial-container.v5 ul.card-gifts.v2 li .no {
        left: 0;
    }

    .mr-interstitial-container.v5 ul.card-gifts.v2 li .no.v2 {
        right: 0;
    }

    .mr-interstitial-container.v5 .rd44-content.v3 .lock-unlock {
        padding-right: 0;
    } 

    .mr-interstitial-container.v5 .rd44-content.v3 .lu-button {
        height: 100%;
        grid-template-columns: 2.3vw 1fr;
    }

    .mr-interstitial-container.v5 dl.gift-select-custom.v2 {
        height: 2.44vw;
    }

    .mr-interstitial-container.v5 dl.gift-select-custom.v2 dt {
        height: 100%;
        grid-template-columns: 2.3vw 1fr;
    }

    .mr-interstitial-container.v5 dl.gift-select-custom.v2 dt img {
        width: 1.7vw;
    }

    .mr-interstitial-container.v5 .rd44-content.v3 .lu-button.w14 img {
        width: 1.2vw;
    }

    .mr-interstitial-container.v5 .rd44-content.v3 dl.gift-select-custom.v2 dd:not(.topPosLeft) {
        top: 2.5vw;
        bottom: unset;
    }

    .mr-interstitial-container.v5 .rd44-content.v3 dl.gift-select-custom.v2 dd.topPosLeft {
        bottom: 2.55vw;
        top: unset;
    }

    .mr-interstitial-container.v5 .rd44-content.v3 dl.gift-select-custom.v2 dd span {
        height: 2.2vw;
        font-size: 1vw;
    }

    .overlay-view-report .modal-content.report_step1,
    .overlay-view-report .modal-content.report_step2,
    .overlay-view-report .modal-content.report_step3 {
        padding: 10px 22px 18px !important;
    }

    .overlay-view-report.modal {
        max-width: max(348px, 30%) !important;
    }

    .mr-interstitial-wrapper[id^=overlayExitDate-] .mr-interstitial-container {
        max-width: max(348px, 30%) !important;
        padding: 10px 22px 18px !important;
    }

    #overlayExitDate-reportSubmitted .mr-interstitial-container,
    #overlayExitDate-technicalReportSend .mr-interstitial-container {
        aspect-ratio: auto;
        min-height: 125px;
        padding: 20px 18px 30px !important;
    }

    #overlayExitDate-reportSubmitted .mr-i-text2,
    #overlayExitDate-technicalReportSend .mr-i-text2 {
        text-wrap: auto;
    }

    .modal-container.view_report_modal  .mb18 {
        margin-bottom: 10px !important;
    }

    #main-frame-overlay .mr-setup-container.v3 #countdown2 .cashCountdown svg.w14 {
        width: 10px;
    }

    .guest-message span {
        font-size: 12px;
    }

    /*.mr-interstitial-wrapper#boot-report.inDating {
        height: 68% !important;
    }

    @media (min-aspect-ratio: 16 / 9) {
        .mr-interstitial-wrapper.inDating#boot-report {
            height: 70% !important;
        }
    }
    @media (min-aspect-ratio: 21 / 9) {
        .mr-interstitial-wrapper.inDating#boot-report {
            height: 63% !important;
        }
    }*/
}

.mr-right-nav.v2 {
    width: 296px;
    font-family: var(--nunito), sans-serif;
}

.mr-right-nav svg path {
    fill: currentColor;
}

.mr-right-nav svg {
    fill: #444;
    color: #444;
}

.mr-right-nav li {
    height: 76px;
}

.mr-right-nav li.mr-chat {
    height: 48px;
    border-radius: 10px 10px 0 0;
}

.mr-right-nav li.mr-chat {
    position: sticky;
    top: 0;
    z-index: 2;
}

.mr-right-nav li:last-of-type {
    border-radius: 0 0 10px 10px;
}

.mr-right-nav li.mr-chat.v2 {
    height: 48px;
    background-color: var(--CoupleGray300);
}

.mr-right-nav li.mr-chat.on, .mr-right-nav li.mr-chat.v2.on {
    background-color: #f8f8f8;
}

.mr-chat-txt {
    display: none;
}

.mr-chat-txt.on {
    display: block;
}

.mr-right-nav.v2 li {
    height: auto;
    padding: 12px 12px 12px 16px;
    position: relative;
}

.mr-right-nav.v2 li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    width: 272px;
    height: 1px;
    border-radius: 1px;
    background-color: #cccecd;
}

.mr-right-nav.v2 li:last-child a::after {
    all: unset;
}

.mr-right-nav.v2 .f14 {
    font-size: 14px;
}

.mr-right-nav li.mr-chat {
    background-color: #f8f8f8;
}

.mr-right-nav li.mr-chat a {
    width: 100%;
    height: 40px;
    transition: all 0.1s ease-in;
    position: relative;
}

body .mr-right-nav li.mr-chat a::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 10px;
    color: #BDC3CA;
    width: 0;
    height: 0;
    border: solid #BDC3CA;
    border-width: 2px 0 0 2px;
    display: inline-block;
    padding: 2px;
    overflow: hidden;
    transition: all 0.1s ease-in;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform-origin: center center;
    transition-delay: 0.1s;
}

.mr-right-nav li.mr-chat a.opened::after {
    top: 20px;
    left: 10px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(135deg);
}

.mr-right-nav svg {
    color: var(--CouplePurple);
}

.mr-right-nav li > a {
    text-decoration: none;
    color: #444;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 76px;
    position: relative;
    transition: all 0.1s ease-in;
    font-size: 14px;
    align-items: center;
    gap: 4px 0;
}

.mr-right-nav.expand li > a {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding-left: 20px;
}

.mr-right-nav.expand li.mr-chat > a {
    padding-left: 28px;
}

.mr-right-nav li:last-child > a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.mr-right-nav li:nth-last-child(2) > a::before {
    all: unset;
}

.mr-right-nav .mr-chat-main-name.room {
    padding-left: 0;
}

.mr-right-nav li:first-child > a::after,
.mr-right-nav li:last-child > a::after {
    all: unset;
}

.mr-right-nav li > a:hover {
     background-color: #e8e8e8;
}

.mr-right-nav li.mr-chat a {
    border-bottom: 0;
    height: 48px;
}

.mr-right-nav li.mr-chat a:hover {
    background-color: unset;
}

.right-drawer-444 {
    width: 604px;
    max-height: 600px;
    position: fixed;
    right: -618px;
    top: 46px;
    z-index: 10;
    transition: all 0.5s ease-in;
    background-color: #fff;
    padding-bottom: 106px;
    color: #444;
    border-radius: 10px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.right-drawer-444.view_referral_modal {
    width: 444px;
    max-width: 100%;
}

.right-drawer-444.open {
    right: 5px;
}

.right-drawer-444.pb0 {
    padding-bottom: 0;
}

@media only screen and (min-height: 721px) {
    .right-drawer-444 {
        top: 66px;
    }
}

.right-drawer-444 .title {
    /* border-bottom: 4px solid #f1f2f5; */
    font-size: 20px;
    font-weight: 700;
    font-family: var(--nunito);
    color: #383838;
    padding: 9px 12px 4px 16px;
    text-align: center;
}

.right-drawer-444 .stats {
    position: absolute;
    border-top: 1px solid #444;
    padding: 14px 0 20px 0;
    width: calc(100% - 28px);
    margin: 0 14px;
    height: 96px;
    justify-content: space-between;
    bottom: 0;
}

.right-drawer-444 .stats .subtitle {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #444;
    font-size: 20px;
    width: 148px;
    height: 28px;
    font-weight: 700;
    font-family: var(--nunito), sans-serif;
}

.stats2 {
    position: relative;
    border-top: 1px solid #444;
    padding: 1.198vw 0 0 0; /* 30px */
    width: 100%;
}

.stats2 .subtitle {
    position: absolute;
    padding: 0 0.833vw; /* 16px */
    top: -0.833vw; /* 16px */
    font-size: 1.667vw; /* 32px */
    left: 50%;
    transform: translateX(-50%);
    background-color: #f2f3f5;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #444;
    font-weight: 500;
    font-family: var(--rubik), sans-serif;
    white-space: nowrap;
    line-height: 1;
}

@media only screen and (min-width: 1920px) {

    .stats2 {
        padding: 23px 0 0 0;
    }

    .stats2 .subtitle {
        padding: 0 16px;
        top: -16px;
        font-size: 32px;
    }
}

.confirm-title {
    font-family: var(--nunito), sans-serif;
    font-size: 1.389vw;
    font-weight: 400;
    line-height: 1.33;
    color: #444;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0.289vw;
}

.rd44-content .row {
    display: grid;
    align-items: center;
    grid-template-columns: 54px 1fr 150px 76px;
    position: relative;
    height: 70px;
    border-radius: 10px;
    height: 54px;
    margin: 0 4px 0 14px;
    font-size: 16px;
    font-weight: 700;
    width: auto;
}


.rd44-content .row.onTop {
    z-index: 5;
}

.rd44-content .row.dark {
    background-color: #fff;
}

.rd44-content.v2 .row {
    padding: 0 0.579vw 0 0.579vw; /*0 10px*/
    grid-template-columns: 1.852vw 1fr 1fr 3.704vw;/*32px 1fr 1fr 64px*/
    height: 2.546vw; /*44px*/
    gap: 0 0.926vw; /*0 16px*/
    margin: 0 0.231vw 0 0.579vw; /* 0 4px 0 10px */
    font-size: 0.926vw; /*16px*/
    font-weight: 700;
}

.rd44-content {
    margin: 0 3px 10px 0;
    height: 248px;
    overflow-y: auto;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    display: grid;
    align-content: start;
    gap: 0.463vw; /* 8px */
}
@-moz-document url-prefix() {
    .rd44-content {
        scrollbar-width: thin;
        scrollbar-color: var(--CouplePurple) transparent;
    }
}

/* @media only screen and (min-height: 721px)  {
    .rd44-content {
        max-height: 392px;
    }
} */

.rd44-content.v2 {
    margin: 0.463vw 0.289vw 2.083vw 0; /*8px 5px 36px 0*/ /* Aug 2024 */
    min-height: 11.343vw; /*196px*/
    max-height: 15.799vw; /*273px*/
    background-color: #fff;
    padding: 0.579vw 0; /*10px 0*/
    outline: solid 0.058vw #D7D7D7; /*1px*/
    border-radius: 1.042vw; /*18px*/
    border-right: 0.231vw solid transparent; /* 4px */
}

.right-drawer-444 .rd44-content p {
    margin: 16px 15px;
}

.rd44-content::-webkit-scrollbar {
  width: 4px;
}

.rd44-content.v3::-webkit-scrollbar {
    width: 0.231vw; /*4px*/
}

@media only screen and (min-width: 1920px) {
    .rd44-content.v3::-webkit-scrollbar {
        width: 4px;
    }
}

/* Track */
.rd44-content::-webkit-scrollbar-track {
    background: transparent;
}

.rd44-content.v3::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
.rd44-content::-webkit-scrollbar-thumb {
    background: var(--CouplePurple);
    border-radius: 25px;
}

.rd44-content.v3::-webkit-scrollbar-thumb {
    border-radius: 1.447vw; /*25px*/
}

@media only screen and (min-width: 1920px) {
    .rd44-content.v3::-webkit-scrollbar-thumb {
        border-radius: 25px;
    }
}

/* Handle on hover */
.right-drawer-444 .rd44-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.rd44-content.v3::-webkit-scrollbar-track-piece:end,
.rd44-content::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 0.694vw; /* 12px */
}

.rd44-content.v3::-webkit-scrollbar-track-piece:start,
.rd44-content::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 0.694vw; /* 12px */
}

@media only screen and (min-width: 1920px) {
    .rd44-content.v3::-webkit-scrollbar-track-piece:end {
        margin-bottom: 12px;
    }

    .rd44-content.v3::-webkit-scrollbar-track-piece:start {
        margin-top: 12px;
    }
}


.rd44-content::-webkit-scrollbar-button,
.rd44-content.v3::-webkit-scrollbar-button
{
  display: none;
}

.right-drawer-444 .row .user-m {
    position: relative;
    justify-self: end;
    display: none;
}

ul.card-gifts {
    height: 32px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    justify-content: center;
    background: var(--CoupleGray400);
    align-self: center;
    align-items: center;
    justify-content: space-around;
    border-radius: 6px;
}

ul.card-gifts.v2 {
    height: 1.667vw; /*32px*/
    align-self: center;
}

ul.card-gifts li {
    all: unset;
    /* width: 24px;
    height: 24px;
    padding: 0 4px; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

ul.card-gifts.v2 li {
    width: 1.979vw; /*38px*/
    height: 1.389vw; /*24px*/
}

@media only screen and (min-width: 1920px) {
    ul.card-gifts.v2 li {
        width: 38px;
    }
}

ul.card-gifts li.line {
    all: unset;
    height: 30px;
    width: 1px;
    background-color: #C3C8D2;
}

ul.card-gifts.v2 li.line {
    all: unset;
    height: 1.389vw;
    width: 1px;
    background-color: #f0f2f6;
}

ul.card-gifts .no {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    aspect-ratio: 1/1;
    background-color: var(--CouplePurple);
    border-radius: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
}

ul.card-gifts.v2 .no {
    top: 0.104vw; 
    left: 0.104vw; 
    width: 0.984vw; 
    font-size: 0.573vw; /* 10px */
}

ul.card-gifts li .no {
    right: unset;
    left: 2px;
}

ul.card-gifts li .no.v2 {
    left: unset;
    right: 2px;
}

@media only screen and (min-width: 1920px) {
    ul.card-gifts.v2 .no {
        top: 2px;
        left: 2px;
        width: 17px;
        font-size: 10px;
    }
}

ul.card-gifts li img {
    width: 21px;
}

ul.card-gifts.v2 li img {
    width: 1.157vw; /*20px*/
}

ul.card-gifts li.no-gift {
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.card-gifts li.no-gift img {
    width: 21px;
}

ul.card-gifts.v2 li img {
    width: 1.094vw; /*21px*/
}

@media only screen and (min-width: 1920px) {
    ul.card-gifts.v2 li img {
        width: 21px;
    }
}

span.cg-multi {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -12px;
    left: -12px;
    background-color: var(--CouplePurple);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

body div:not(.summaryCoupleCutData) span.cg-multi {
    cursor: pointer;
}

body div:not(.summaryCoupleCutData) .card-gifts img.giftShowSend,
.card-gifts img.giftShowReceived {
    cursor: pointer;
}

span.cg-multi.v2 {
    left: unset;
    right: -12px;
}

/*span.cg-multi:hover {
    transform: scale(1.05);
}*/

/* Gift card start */
span.mr-tooltip2 {
    position: absolute;
    color: #fff;
    font-size: 16px;
    font-family: var(--nunito), sans-serif;
    background-color: rgba(0, 0, 0, .6);
    height: 31px;
    border-radius: 8px;
    padding: 0 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in;
    z-index: 10;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

span.mr-tooltip2.flex {
    font-size: 0.926vw; /*16px*/
    height: 1.794vw; /*31px*/
    border-radius: 0.463vw; /*8px*/
    padding: 0 0.463vw; /* 0 8px*/
}

@media only screen and (min-width: 1920px) {
    span.mr-tooltip2.flex {
        font-size: 16px;
        height: 31px;
        border-radius: 8px;
        padding: 0 8px;
    }
}

span.mr-tooltip2.to-left {
    border-top-right-radius: 0;
}

span.mr-tooltip2.to-left2 {
    border-bottom-right-radius: 0;
}

span.mr-tooltip2::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

span.mr-tooltip2.to-left::before {
    top: -8px;
    right: -1px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid rgba(0, 0, 0, .6);
    -webkit-transform: rotate(45deg);
}



span.mr-tooltip2.to-left2::before {
    bottom: -8px;
    right: -1px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid rgba(0, 0, 0, .6);
    -webkit-transform: rotate(-45deg);
}


span.mr-tooltip2.pos1 {
    transform: translate(-50%, 100%);
    bottom: -5px;
}

span.mr-tooltip2.flex.pos1 {
    bottom: -0.289vw;
}

span.mr-tooltip2.pos2 {
    transform: translate(-50%, -100%);
    top: -5px;
}

span.mr-tooltip2.flex.pos2 {
    top: -0.289vw;
}

span.mr-tooltip2.flex.to-left2::before {
    bottom: -0.463vw; /*-8px*/
    right: -0.058vw; /*-1px*/
    border-top: 0.347vw solid transparent; /*6px*/
    border-bottom: 0.347vw solid transparent; /*6px*/
    border-left: 0.347vw solid rgba(0, 0, 0, .6); /*6px*/
    -webkit-transform: rotate(-45deg);
}


span.mr-tooltip2.flex.to-left::before {
    top: -0.4177517229vw; /*-8px*/
    right: -0.058vw; /*-1px*/
    border-top: 0.347vw solid transparent; /*6px*/
    border-bottom: 0.347vw solid transparent; /*6px*/
    border-left: 0.347vw solid rgba(0, 0, 0, .6); /*6px*/
}

@media only screen and (min-width: 1920px) {
    span.mr-tooltip2.flex.to-left::before {
        top: -8px;
        right: -1px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid rgba(0, 0, 0, .6);
    }
}


ul.card-gifts li img:hover + span.mr-tooltip2 {
    opacity: 1;
    visibility: visible;
}

/*Custom gift select*/

dl.gift-select-custom {
    position: relative;
    width: calc(100% - 16px);
    height: 32px;
    z-index: 2;
    font-size: 16px;
    margin: 0 8px;
}

dl.gift-select-custom.opened {
    border: none;
    z-index: 10
}

dl.gift-select-custom dt {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 32px;
    line-height: 1;
    cursor: pointer;
    background: #fff url('../img/arrow-grey2.svg') center right 7px no-repeat;
    background-size: 12px auto;
    border-radius: 8px;
    box-shadow: 5px 5px 18px 0px rgba(0, 0, 0, 0.15);
    font-family: var(--nunito);
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.1s ease-in;
    font-size: 14px;
    gap: 0.8em;
}

dl.gift-select-custom dt img {
    width: 22px;
}

dl.gift-select-custom dt > span:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E1E3E8;
    border-radius: 8px;
    height: 100%;
    aspect-ratio: 1/1;
}

dl.gift-select-custom.opened dt {
    background: #fff url('../img/arrow-grey2.svg') center right 7px no-repeat;
    background-size: 12px auto;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.1s ease-in;
}

.rd44-content > .row:nth-of-type(n+4) dl.gift-select-custom.opened dt {
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}




dl.gift-select-custom dd {
    display: grid;
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    background-color: #fff;
    color: #444;
    text-align: center;
    transform: scaleY(0);
    font-size: 0;
    overflow: hidden;
    /*transition: all 0.3s ease-in;*/
    transform-origin: top center;
    /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25); */
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    z-index: 1;
    box-shadow: 5px 12px 18px 0px rgba(0, 0, 0, 0.05);
}

.rd44-content dl.gift-select-custom dd.topPosLeft {
    top: unset;
    bottom: 32px;
    transform-origin: bottom center;
    box-shadow: 5px -12px 18px 0px rgba(0, 0, 0, 0.05);
    border-radius: unset;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

dl.gift-select-custom.opened dd {
    transform: scaleY(1); 
    font-size: 14px;
    font-weight: 500;
    z-index: 100;
}

dl.gift-select-custom dd span {
    position: relative;
    height: 32px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*transition: all 0.1s ease-in;*/
}

dl.gift-select-custom dd span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 4px;
    height: 1px;
    width: calc(100% - 8px);
    background-color: var(--CoupleGray300);
    transition: all 0.1s ease-in;
}

dl.gift-select-custom dd span:last-of-type::after,
dl.gift-select-custom.v2 dd span:last-of-type::after {
    all: unset;
}

dl.gift-select-custom dd span:last-of-type,
dl.gift-select-custom.v2 dd span:last-of-type {
    border-bottom: 0;
}


dl.gift-select-custom dd span:hover { 
    background-color: var(--CouplePurple);
    color: #fff;

}

dl.gift-select-custom dd span:hover::after {
    background-color: var(--CouplePurple);
}

.lock-unlock {
    font-weight: 700;
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 8px;
    line-height: 1;
    border: 1px solid #E1E3E8;
    border-radius: 0 10px 10px 0;
    border-left: 0;
    grid-template-columns: minmax(0, 1fr) 150px;
    grid-template-rows: 43px;
    margin-left: -5px;
    padding: 0 0.375em 0 18px;
}

span.lu-name {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.unlock {
    cursor: pointer;
    width: 140px;
    height: 32px;
    box-shadow: 5px 5px 18px 0px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    background-color: var(--CouplePurple2);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.lu-button {
    width: 100%;
    height: 32px;
    box-shadow: 5px 5px 18px 0px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: var(--CouplePurple2);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    text-transform: uppercase;
    gap: 0.8em; 
}

.lu-button img {
    width: 21px;
}

.lu-button.w14 img {
    width: 14px;
    margin-bottom: 0;
} 

.lu-button > span:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #4B1C8B;
    border-radius: 8px;
    height: 100%;
    aspect-ratio: 1/1;
}

.lu-button.reveal {
    cursor: pointer;
}

.rd44-content.v3 .lock-unlock {
    gap: 0.5em; /* 8px */
    grid-template-columns: minmax(0, 1fr) 8.681vw; /* 150px */
    grid-template-rows: 2.315vw; /* 40px */
    margin-left: -0.289vw; /* -5px */
    align-items: center;
    padding: 0 0.375em 0 1.125em; /* 0 0 0 18px */
}

@media only screen and (min-width: 1920px) {
    .rd44-content.v3 .lock-unlock {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) 150px;
        grid-template-rows: 43px;
        margin-left: -5px;
        height: 43px;
        padding: 0 0.375em 0 18px;
    }
}

.rd44-content.v3 .lu-button {
    width: 100%;
    height: 1.667vw; /* 32px */
    box-shadow: 0.26vw 0.26vw 0.938vw 0px rgba(0, 0, 0, 0.15); /* 5px 5px 18px 0px */
    border-radius: 0.463vw; /* 8px */
    font-size: 0.833vw; /* 16px */
    grid-template-columns: 1.667vw 1fr; /* 32px */
    align-items: center;
    text-transform: uppercase;
}

.rd44-content.v3 .lu-button.w14 img {
    width: 0.729vw; /* 14px */
    margin-bottom: 0.029vw;
}

.rd44-content.v3 .lu-button img {
    width: 1.094vw; /* 21px */
}

@media only screen and (min-width: 1920px) {
    .rd44-content.v3 .lu-button {
        width: 100%;
        height: 32px;
        box-shadow: 5px 5px 18px 0px #00000026;
        border-radius: 8px;
        font-size: 14px;
        grid-template-columns: 32px 1fr;
    }

    .rd44-content.v3 .lu-button img {
        width: 21px;
    }

    .rd44-content.v3 .lu-button.w14 img {
        width: 14px;
        margin-bottom: 0;
    }
}

.lu-button > span:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.058vw solid #4B1C8B; /* 1px */
    border-radius: 0.463vw; /* 8px */
    height: 100%;
    aspect-ratio: 1/1;
}

@media only screen and (min-width: 1920px) {
    .lu-button > span:first-of-type {
        border: 1px solid #4B1C8B;
        border-radius: 8px;
    }
}

.unlock-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 10;
    display: grid;
    justify-items: center;
    align-content: center;
}

.unlock-screen > b {
    font-size: 24px;
    margin: 0 0 32px 0;
}

.us-close {
    position: absolute;
    font-size: 16px;
    font-weight: 800;
    top: 16px;
    right: 16px;
    color: var(--CoupleGray900);
    text-decoration: none;
}

.unlock-screen.v2 {
    font-size: 1.157vw; /* 20px */
    border-radius: 0.579vw;
}

.unlock-screen.v2 > b {
    font-family: var(--rubik);
    font-size: 1.6em; /* 32px */
    margin: 0;
    line-height: 1.8;
}

@media only screen and (min-width: 1920px) {
    .unlock-screen.v2 {
        font-size: 20px;
    }

    .unlock-screen.v2 > b {
        font-size: 32px;
    }
}

.unlock-screen.v2 .us-close {
    font-size: 0.926vw; /* 16px */
    top: 0.926vw; /*16px*/
    right: 0.926vw; /*16px*/
}

@media only screen and (min-width: 1920px) {
    .unlock-screen.v2 .us-close {
        font-size: 16px;
        top: 16px;
        right: 16px;
    }
}
/*END Custom gift select*/

/*Opened chat*/

.mr-right-nav li.opened-chat {
    position: absolute;
    top: 50px;
    left: 110%;
    background: #fff;
    width: 100%;
    height: auto;
    z-index: 2;
    transition: all 0.3s ease-in;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.mr-right-nav li.opened-chat.show {
    left: 0;
}

.oc-top {
    position: relative;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #cccecd;
    gap: 0 16px;
    padding: 0 20px 0 10px;
}

.mr-right-nav li.opened-chat a:link,
.mr-right-nav li.opened-chat a::after {
    cursor: pointer;
}

.oc-name {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--nunito), sans-serif;
}

.oc-name2 {
    white-space: nowrap;
    font-size: 14px;
    font-family: var(--nunito), sans-serif;
}

.arrow-empty {
    width: 0;
    height: 0;
    border: solid #BDC3CA;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    overflow: hidden;
    position: relative;
    top: -2px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.chat-container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    justify-content: space-between;
    width: 100%;
    position: relative;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.mr-right-nav .chatOpened:not(.show) .chat-container {
    display: none;
}

@media only screen and (min-height: 721px) {
    .chat-container {
        height: calc(100vh - 160px);
    }
}

.chat-container.disable::after {
    content: '';
    width: 100%;
    height: calc(100vh - 140px);
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.cc-messages {
    overflow-y: auto;
    padding: 0 14px;
    font-family: var(--rubik), sans-serif;
    position: relative;
}

@-moz-document url-prefix() {
    .cc-messages {
        scrollbar-width: thin;
        scrollbar-color: var(--CouplePurple) transparent;
    }
}


 [contenteditable] {
     font-family: var(--rubik), sans-serif;
     background-color: #fff;
     color: #252e3a;
     width: 100%;
     height: 100%;
     line-height: 1.5;
 }

 /* width */
.cc-messages::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.cc-messages::-webkit-scrollbar-track {
  background: #dfe5eb;
}

/* Handle */
.cc-messages::-webkit-scrollbar-thumb {
  background: var(--CouplePurple);
    border-radius: 25px;
}

.cc-messages > div:first-of-type {
    margin-top: 20px;
}

.ccm-received {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 3px 8px;
    margin-top: 10px;
}

.ccm-received i {
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 100%;
    align-self: end;
}

.ccm-received p {
    font-size: 14px;
    color: #252e3a;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: 12px 12px 12px 0;
    background-color: #f6f6f8;
    position: relative;
}

.ccm-received p::after {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 14px solid #f6f6f8;
    border-left: 7px solid transparent;
    position: absolute;
    bottom: 0;
    left: -7px;
}

.ccm-received span {
    grid-column: 2;
    color: #a0a3a7;
    font-size: 12px;
    display: block;
    margin: 0 0 10px 14px;
}

.ccm-sent {
    display: grid;
    gap: 3px 0;
    width: 308px;
    margin: 10px auto 0 auto;
}

.ccm-sent p {
    font-size: 14px;
    color: #252e3a;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: 12px 12px 0 12px;
    background-color: #d1faff;
    position: relative;
}

.ccm-sent p::after {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 14px solid #d1faff;
    border-right: 7px solid transparent;
    position: absolute;
    bottom: 0;
    right: -7px;
}

.ccm-sent p,
.ccm-received p {
    overflow-wrap: anywhere;
}

.ccm-sent span {
    color: #a0a3a7;
    font-size: 12px;
    display: block;
    margin: 0 14px 10px 0;
    text-align: right;
}

.write-message {
    background-color: #dfe5eb;
    max-height: 136px;
    width: 100%;
    padding: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.wm-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    padding: 10px;
}

.wm-field {
    max-height: 100px;
    overflow-y: auto;
    width: 82%;
    padding: 0 10px 0 0;
    font-size: 14px;
    font-family: var(--rubik), sans-serif;
    cursor: text;
}

.wm-field[contentEditable="true"]:empty:before {
  content: attr(placeholder);
}

.wm-field-chat.wm-field {
    width: calc(100% - 35px);
}

button.wm-button {
    all: unset;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
}

button.wm-button.send {
    background-size: 19px auto !important;
    background: url('../img/send-message.png') no-repeat 0 0;
    width: 19px;
    height: 16px;
    bottom: 11px;
    right: 14px;
}

button.wm-button.send:hover {
    background-position: 0 -50px;
}

button.wm-button.emoticon {
    background-size: 16px auto;
    background: url('../img/emoticon-message.png') no-repeat 0 0;
    width: 16px;
    height: 16px;
    bottom: 11px;
    right: 44px;
}

button.wm-button.emoticon:hover {
    background-position: 0 -50px;
}

.hide-name {
    display: none;
    transition: all 0.1s ease-in;
}

.mr-right-nav.expand .hide-name {
    display: inline-block;
    margin-left: -12px;
}

.mr-lobby-container {
    transition: all 0.3s ease-in;
    position: relative;
}

.mr-lobby {
    display: grid;
    grid-template-columns: repeat(6, minmax(60px, 640px));
    padding: 1px;
    gap: 1px 1px;
    transform-origin: top center;
    transition: all 0.3s ease-in;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.signal-moderator {
    text-align: right;
    background: white;
    opacity: 0.5;
    z-index: 10;
    position: absolute;
    width: 100%;
}

@media screen 
    and (min-device-aspect-ratio: 16/9)
    and (max-width: 1280px)
    {
    .mr-lobby {
        grid-template-columns: repeat(6, minmax(10px, 160px));
    }
}

.mr-lobby video {
    width: 100%;
    position: absolute;
    aspect-ratio: 4 / 3;
}

.mr-lobby .mr-medium video,
.mirror-video {
    object-fit: cover;
    transform: scale(-1, 1); /*flip camera horizontally to generate mirror effect*/
}

.mr-lobby-user {
    background-color: #30363e;
    position: relative;
    aspect-ratio: 4 / 3;
}

.mr-lobby-user.red, .innerPerformer.red {
    border: 0.431vh solid #F6AA01;
}

.mr-lobby-user.green, .innerPerformer.green {
    border: 0.431vh solid var(--CouplePurple);
}

.mr-lobby-user.speaker.red:has(video) {
    outline: 0.431vh solid #F6AA01;
}

.mr-lobby-user.speaker.green:has(video) {
    outline: 0.431vh solid var(--CouplePurple);
}

.mr-lobby-user.failed {
    border: 1px solid #D64F38 !important;
    opacity: 0.5;
}

.mr-lobby-user video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
}

.mr-lobby-user-empty {
    aspect-ratio: 4 / 3;
}

.mr-lobby-user.hide {
    display: none;
}

.mr-lobby-user.speaker {
    position: absolute;
    width: 11.574vw;
    background-color: #252a31;
    border-radius: 0.463vw;
    border: solid 1px var(--CoupleDarkGray400);
    z-index: 3;
    overflow: hidden;
}

.mr-lobby-user.speaker video {
    border-radius: 8px;
}

.innerPerformer video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: scale(-1, 1);
    position: absolute;
    top: 0;
    left: 0;
}

.mr-lobby-user.speaker.toLeft {
    bottom: 12px;
    left: 12px;
}

.mr-lobby-user.speaker.toRight {
    bottom: 12px;
    right: 12px;
}

.mr-lobby-user.mr-big {
    grid-column: 2 / span 4;
    grid-row: 1 / span 4;
}

.mr-lobby-user.mr-medium {
    grid-column: 3 / span 2;
    grid-row: 5 / span 2;
    position: relative;
}

.mr-lobby-user.mr-big:not(.offVideo) {
    grid-column: 2 / span 4;
    grid-row: 1 / span 4;
}

.mr-lobby-user.mr-medium {
    grid-column: 3 / span 2;
    grid-row: 5 / span 2;
    position: relative;
}

.mr-user-menu.lobby.reverse-dots {
    top: calc(-120% + 1px);
}

#performerMic.video-main {
    position: absolute;
    z-index: 4;
    top: 75px;
    right: 45px;
}

.mr-mic-alert-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-mic-alert-container.dating-room {
    align-items: start;
    margin-top: 0.752vw;
    height: auto;
}

.mr-mic-alert {
    width: 74%;
    z-index: 10;
    border-radius: 10px;
    color: #fff;
    font-weight: 400;
    font-size: 0.81vw;
    text-align: center;
    padding: 2.083vw 1.157vw ;
    display: grid;
    justify-content: center;
    position: relative;
    background: rgba(10, 10, 12, 0.75);
    backdrop-filter: blur(60px);
}

.dating-room .mr-mic-alert {
    font-size: 0.810vw;
    font-weight: 500;
    width: 85%;
    padding: 2.083vw 1vw;
}

.dating-room .mr-mic-alert button.unmute.unmute-dating-room {
    width: 5.681vw;
    height: 2vw;
}

.mr-mic-alert a {
    position: absolute;
    top: 0.347vw;
    right: 0.463vw;
    color: #fff;
    font-size: 0.81vw;
    text-decoration: none;
}

.mr-mic-alert-container hr {
    border: 0;
    border-top: 1px solid #fff;
    width: 50%;
    margin: 6% auto 0 auto;
}

button.unmute:not(.mute-unmute-audience) {
    border: 0;
    justify-self: center;
    text-transform: uppercase;
    font-size: 0.81vw;
    font-weight: 700;
    text-align: center;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    cursor: pointer;
    background-color: var(--CouplePurple);
    border-radius: 90px;
    margin-top: 0.926vw;
    width: 8.681vw;
    height: 2.315vw;
    transition: all 0.3s ease-in-out;
    border: none;
}

button.unmute:not(.mute-unmute-audience):hover {
    background-color: #444;
}

.mr-lobby-user svg {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    cursor: help;
    pointer-events: all;
    z-index: 1;
}

.mr-medium svg,
.mr-lobby-user.mr-big svg,
.performer-container svg {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    pointer-events: all;
}

.performerBio {
    width: 100%;
    display: block;
    margin-top: 5px;
}

span.f20.performerName {
    font-family: var(--nunito), sans-serif;
    color: #444;
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
    display: block;
}

.mr-lobby-user.mr-big video {
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

span.mr-tooltip {
    position: absolute;
    left: 28px;
    top: 4px;
    color: #fff;
    font-size: 9px;
    background-color: rgba(0, 0, 0, .3);
    padding: 5px;
    border-radius: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in;
    z-index: 1;
    white-space: nowrap;
}

.mr-medium span.mr-tooltip,
.mr-big span.mr-tooltip {
    left: 36px;
    top: 6px;
}

span.mr-tooltip::before {
    content: '';
    position: absolute;
    top: 4px;
    left: -4px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid rgba(0, 0, 0, .3);
}

.mr-medium span.mr-tooltip::before,
.mr-big span.mr-tooltip::before {
    top: 6px;
}

.mr-lobby-user svg:hover + span.mr-tooltip,
.performer-container svg:hover + span.mr-tooltip {
    opacity: 1;
    visibility: visible;
}

.mr-lobby-username {
    z-index: 10;
    padding: 2px 8px 2px 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
    border-top-left-radius: 8px;
    font-size: min(10px, 14px);
    font-weight: 500;
    color: #fff;
    width: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 11ch;
    gap: 4px;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.mr-game-username {
    z-index: 2;
    padding: 2px 8px 2px 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
    border-top-left-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.mr-lobby-username.f14 {
    font-size: 0.729167vw; /* 14px at 1920 viewport*/
}

.mr-lobby-username.noWidth {
    width: auto;
    max-width: 80%;
    padding: 2px 8px 2px 8px;
}

@media only screen and (min-width: 1500px) {
    .mr-lobby-username {
        font-size: 14px;
    }

    .mr-game-username {
        font-size: 14px;
    }
}

.mr-medium .mr-lobby-username {
    width: 40%;
}

.mr-big .mr-lobby-username {
    width: 20%;
}

.mr-lobby-username span {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.mr-lobby-username.noWidth span {
    padding: unset;
}

.mr-big .mr-lobby-username span,
.mr-medium .mr-lobby-username span {
    width: 100%;
}

.mr-lobby-username a {
    padding: 0 2px;
    display: block;
}

.mr-lobby-username a.mr-lu-actions {
    position: relative;
    min-width: 10px;
    max-width: 10px;
    height: 10px;
}

.mr-lobby-username a.mr-lu-actions img.hide {
    display: none;
}

.mr-lobby-username a img.mr-lu-dots {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 10px;
}

.mr-lobby-username a img.mr-lu-close {
    width: 8px;
    height: 8px;
    position: absolute;
    top: 1px;
}

/* Mic buttons */

.mr-mic {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-wrap: nowrap;
    gap: 0.83em 0;
    width: 3.166em;
    height: 100%;
}

.bottom-settings .bs-mic .mr-mic svg {
    margin: 0 auto;
    width: 1.16em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

ul.bs-list li:hover .mr-mic svg {
    color: inherit;
}

.mr-mic.hide svg {
    display: none;
}

.mr-mic.level-1.isPerformer svg {
    fill: url(#gradientp6);
}
.mr-mic.level-1.notPerformer svg {
    fill: url(#gradientp1);
}
.mr-mic.level-1 svg {
    fill: url(#gradient1);
}
.bs-mic.level-1 svg {
    fill: url(#gradientb1);
}
.mr-mic.level-2.isPerformer svg {
    fill: url(#gradientp7);
}
.mr-mic.level-2.notPerformer svg {
    fill: url(#gradientp2);
}
.mr-mic.level-2 svg {
    fill: url(#gradient2);
}
.bs-mic.level-2 svg {
    fill: url(#gradientb2);
}
.mr-mic.level-3.isPerformer svg {
    fill: url(#gradientp8);
}
.mr-mic.level-3.notPerformer svg {
    fill: url(#gradientp3);
}
.mr-mic.level-3 svg {
    fill: url(#gradient3);
}
.bs-mic.level-3 svg {
    fill: url(#gradientb3);
}
.mr-mic.level-4.isPerformer svg {
    fill: url(#gradientp9);
}
.mr-mic.level-4.notPerformer svg {
    fill: url(#gradientp4);
}
.mr-mic.level-4 svg {
    fill: url(#gradient4);
}
.bs-mic.level-4 svg {
    fill: url(#gradientb4);
}
.mr-mic.level-5.isPerformer svg {
    fill: url(#gradientp10);
}
.mr-mic.level-5.notPerformer svg {
    fill: url(#gradientp5);
}
.mr-mic.level-5 svg {
    fill: url(#gradient5);
}
.bs-mic.level-5 svg {
    fill: url(#gradientb5);
}

/* Tooltips */
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
    background-color: #383838;
    color: #fff;
    font-size: 13px;
    position: absolute;
    padding: 3px 7px 4px 7px;
    bottom: -1.6em;
    left: 0;
    white-space: nowrap;
    opacity: 0;
    z-index: 10;
    visibility: hidden;
    border-radius: 5px;
}

.exitDate[data-title]:after {
    bottom: unset;
    left: unset;
    z-index: 25;
    top: -2.5em;
    right: 0;
}

[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

/*Dating room new*/

.mr-room-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 40px - 7.5vh);
    overflow-y: hidden;
    max-height: 100%;
    margin: 0 auto;
}

@media only screen and (min-height: 721px) {
    .mr-room-wrapper {
        height: calc(100% - 60px - 7.5vh);
    }
}

@media (min-aspect-ratio: 16/9) and (min-height: 721px) {
    .mr-room-wrapper {
        height: calc(100% - 60px - 8.5vh);
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 721px) {
    .mr-room-wrapper {
        height: calc(100% - 40px - 8.5vh);
    }
}

@media (min-aspect-ratio: 21/9) {
    .mr-room-wrapper {
        height: calc(100% - 40px - 10vh);
    }
}

@media only screen and (min-width: 1921px) {
    .mr-room-wrapper {
        max-height: calc(100% - 10vh - 60px);
    }

    .modal-container .modal.w545 {
        width: 30vw;
    }

    .modal-container .modal.w600 {
        width: 35vw;
    }

    .modal-container .overlay-view-report .modal-content {
        padding: 1vw;
    }
}

@media only screen and (max-width: 2400px) {
    /*.mr-submenu1 dl {
        overflow-y: scroll !important;
    }*/
}

/*when have a lot of rooms*/
@media only screen and (min-width: 2401px) {
    .mr-submenu1.overflowY dl {
        padding: 0 0px 0 6px !important;
    }
    .mr-top-search-list.overflowY {
        width: 262px !important;
    }
    .mr-pre-left-nav.overflowY {
        padding: 0 14px 0 6px !important;
    }

    @-moz-document url-prefix() {
        .mr-pre-left-nav.overflowY {
            padding-right: 6px !important;
        }
        .mr-submenu1.overflowY dl {
            padding-right: 6px !important;
        }
    }
}

.mr-room-container {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 23% 40% 23%;
    grid-template-rows: auto auto;
    gap: 1% 3%;
    align-items: center; 
    justify-content: center;
    padding: 0 4% 0 4%;
}

@media only screen and (min-height: 830px) {
    .mr-room-container {
        grid-template-columns: 1fr 41% 1fr;
        grid-template-rows: 1fr;
        gap: 1% 4%;
        
    }
}

@media (min-aspect-ratio: 16/9) {
    .mr-room-container {
        grid-template-columns: 22% 38% 22%;
    }
}

@media (min-aspect-ratio: 21/9) {
    .mr-room-container {
        grid-template-columns: 20% 41% 20%;
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 830px) {
    .mr-room-container {
        padding-bottom: 12vh;
    }
}

.mr-room-videos {
    flex: 1;
}

.mr-room-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 90%;
}

@media only screen and (min-aspect-ratio: 16/9) {
    .mr-room-main {
        height: 83%;
    }
}

@media (min-aspect-ratio: 21/9) {
    .mr-room-main {
        height: 82%;
    }
}

/*@media only screen and (min-height: 830px) {
    .mr-room-main {
        all: unset;
        flex: 1;
    }
}*/

.mr-room-video-big {
    position: relative;
    background-color: #30363e;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-top-left-radius: 0.694vw;
    border-top-right-radius: 0.694vw;
    border: 1px solid #242A36;
}

#main-frame-video {
    overflow: hidden;
}

@media screen and (orientation: landscape) {
    .mr-room-video-big video, 
    .mr-room-video-big div video,
    .performer-container video
    {
        position: absolute;
        width: 100%;
        object-fit: cover;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
    }
}

@media screen and (orientation: portrait) {
    .mr-room-video-big video,
    .mr-room-video-big div video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        left: unset;
        top: 50%;
        transform: translateY(-50%) translateX(0);
    }
}

.mr-room-video-bottom {
    background-color: #fff;
    border-bottom-left-radius: 0.694vw;
    border-bottom-right-radius: 0.694vw;
    border: 1px solid #242A36;
    margin-top: -1px;
    height: min(13.889vw, 300px);
    display: grid;
    grid-template-columns: auto auto;
    overflow: hidden;
}

@-moz-document url-prefix() {
    .mr-room-video-bottom {
        grid-template-columns: 1fr 2fr;
        height: 13vw;
    }
    .mr-room-video-square {
        height: 100%;
        width: 100%;
    }
}

.performer-container video {
    min-width: 100%;
    min-height: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    object-fit: cover;
}

.streamBalconyRoom {
    position: absolute;
    height: calc(100% - 55px);
    width: 100%;
    display: grid;
    grid-gap: 1px 1px;
    align-content: start;
}

.streamBalconyInner {
    aspect-ratio: 16 / 9;
    background-color: #30363e;
    height: 100%;
    width: 100%;
    position: relative
}

.streamBalconyInner .user-actions {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 15;
    padding: 4% 30px 0 30px;
}

.streamBalconyInner video {
    height: 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    position: absolute;
    top: 0;
    left: 0;
}

.mr-room-username {
    z-index: 34;
    padding: 0.5% 2% 0.5% 2%;
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-left-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    background-color: rgba(36, 42, 54, 0.8);
    backdrop-filter: blur(8px);
}

.mr-room-username.f12 {
    font-size: 12px;
    padding: 2% 4%;
    gap: 4px;
}

body .mr-room-username svg g g path {
    fill: currentColor;
}

body .mr-room-username svg {
    fill: #fff;
    color: #fff;
    transition: all 0.2s ease-in;
}

body .mr-room-username a:hover svg {
    fill: var(--CoupleBlue400);
    color: var(--CoupleBlue400);
}

.mr-room-video-square {
    position: relative;
    background-color: #30363e;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    border-right: 1px solid #242A36;
}

.mr-room-video-square video {
    width: 100%;
    height: 100%;
    transform: scale(-1, 1); /*flip camera horizontally to generate mirror effect*/
    object-fit: cover;
}

.mr-room-vb-details {
    align-items: center;
    font-family: var(--rubik), sans-serif;
    display: grid;
    grid-template-columns: auto 1fr;
    box-sizing: border-box;
    overflow-y: auto;
}

@-moz-document url-prefix() {
    .mr-room-vb-details {
        scrollbar-width: thin;
        scrollbar-color: var(--CouplePurple) transparent;
    }
}

.mr-room-vb-details::-webkit-scrollbar
{
    width: 10px;
}

.mr-room-vb-details::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 16px 16px transparent;
    border: solid 3px transparent;
    height: 34px;
}

.mr-room-vb-details::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 4px 4px var(--CouplePurple);
    border: solid 3px transparent;
    border-radius: 14px;
    min-height: 30px;
}

.mr-room-vb-details::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 5px;
}

.mr-room-vb-details::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 5px;
}

.mr-room-vb-details::-webkit-scrollbar-button
{
  display: none;
}

.mr-room-vbd-icon {
    text-align: center;
    padding: 0 15px;
    display: grid;
    gap: 5px 0;
}

.mr-room-bubble {
    width: 100%;
    background-color: #fff;
    box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 10px 5px 5px 20px;
}

.mr-pagination {
    position: absolute;
    bottom: 2.315vw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 0 0.579vw;
    align-items: center;
}

.mr-pagination.hide {
    display: none;
}

.mr-pagination i {
    cursor: pointer;
    width: 0.637vw;
    height: 0.694vw;
    background: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.20117 8.07715C-0.132159 7.30735 -0.132162 5.38285 1.20117 4.61305L7.07031 1.2245C8.40364 0.454701 10.0703 1.41695 10.0703 2.95655L10.0703 9.73365C10.0703 11.2732 8.40365 12.2355 7.07031 11.4657L1.20117 8.07715Z" fill="%23383838"/></svg>');
}

.mr-pagination i:hover {
    border-right-color: var(--CouplePurple);
}

.mr-pagination.v2 {
    margin-top: auto;
}

.mr-pagination span {
    width: 0.347vw;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    background-color: #e4e4e4;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

.mr-pagination span:hover {
    background-color: #d9d9d9;
}

.mr-pagination.v2 span {
    width: 1.042vw;
    aspect-ratio: 1 / 1;
    cursor: default;
}

.mr-pagination span.active {
    background-color: var(--CouplePurple);
    cursor: pointer;
}

dl.mr-list-1 {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: min(0.405vw, 8px);
    height: 90px;
    align-content: start;
}

#greenToDateTransition dl.mr-list-1 {
    height: auto;
}

dl.mr-list-1::-webkit-scrollbar {
  width: 4px;
}

/* Track */
dl.mr-list-1::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
dl.mr-list-1::-webkit-scrollbar-thumb {
  background: var(--CouplePurple);
}

dl.mr-list-1 dt {
    background-color: var(--CouplePurple);
    border-color: var(--CouplePurple);
    color: #fff;
    gap: 0 min(0.289vw, 6px);
    font-size: min(0.694vw, 15px);
    padding: min(2px, 3px) min(0.81vw, 17px);
    border-radius: min(2.315vw, 48px);
    line-height: 1.6;
    border: solid 1px var(--CouplePurple);
}

dl.mr-list-1 dd {
    background-color: #fff;
    border-color: var(--CouplePurple);
    color: var(--CouplePurple);
    gap: 0 min(0.289vw, 6px);
    font-size: min(0.694vw, 15px);
    padding: min(2px, 3px) min(0.81vw, 17px);
    border-radius: min(2.315vw, 48px);
    line-height: 1.6;
    border: solid 1px var(--CouplePurple);
}

.mr-rb-title {
    color: #757575;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px 10px 0;
}

.mr-rb-title span {
    font-weight: 600;
}

.mr-rb-title a {
    color: #757575;
    font-size: 14px;
}

.mr-rb-title a:hover {
    text-decoration: none;
}

.mr-rb-about {
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    color: #757575;
    line-height: 1.36;
    padding: 2% 0;
}

.mr-room-videos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5% 5%;
    align-items: center;
}

.mr-room-videos-small {
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 0.694vw;
    position: relative;
    overflow: hidden;
}

.mr-room-vs {
    position: relative;
    aspect-ratio: 4 / 3;
    z-index: 1;
}

.mr-room-vs video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.mr-room-vs .participant-container.failed video {
    border: 1px solid #D64F38 !important;
    opacity: 0.5;
}

a.mr-hover-link {
    font-size: 16px;
    color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5% 0;
    z-index: 34;
}

.mr-room-videos-small:hover a.mr-hover-link {
    display: flex;
}

/*Interstitial*/

.mr-interstitial-wrapper:not(.inDating) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 40px);
    /*max-height: calc(100% - 14.5vh);*/
}

.mr-interstitial-wrapper#exitDateModal .mr-interstitial-container {
    align-items: center;
}

.mr-interstitial-wrapper.interstitial-first {
    align-items: start;
    margin-top: 1px;
}

.mr-interstitial-wrapper.top50 {
    align-items: start;
    padding-top: 2.894vw;
}

.mr-setup-container {
    width: 37.7%;
    aspect-ratio: 65 / 63;
    position: relative;
    margin: 0 auto;
    border-radius: 0.694vw;
    padding: 1.736vw 2.315vw;
    background: #f2f3f5;
    display: grid;
    grid-auto-rows: min-content;
    justify-content: center;
    text-align: center;
}

.textGuestErr {
    margin-top: 10px;
}

.mr-setup-guest.mr-setup-container {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
}

#guest-name {
    width: 24vw;
    max-width: 100%;
}

.mr-setup-container.v2 {
    padding: 1.736vw 3.472vw;
}

.mr-setup-container.v3 {
    padding: 0 3.472vw;
    justify-content: normal;
    align-content: start;
    display: grid;
    grid-template-rows: 26% 21% 11% 15% 1fr;
}

#main-frame-overlay .mr-setup-container.v3 {
    grid-template-rows: auto;
    align-content: center;
    padding-top: 3.7vw;
    border-radius: 0.694vw;
}

#main-frame-overlay .mr-setup-container.v3 #countdown1.mr-setup-subtitle {
    padding-bottom: 4.526vw;
}

#main-frame-overlay .mr-setup-container.v3 hr.mr-line-1 {
    padding-top: 2.396vw;
    margin-top: 1.535vw;

}

#main-frame-overlay .mr-setup-container.v3 hr.mr-line-2 {
    margin-top: 2.6vw;
    margin-bottom: 2.15vw;
}

#main-frame-overlay .mr-setup-container.v3 #countdown1 hr.mr-line-1 {
    padding-top: 3vw;
    margin-top: 2.431vw;
}

#main-frame-overlay .mr-setup-container.v3 #countdown1 button.btn-yellow.v4 {
    margin-bottom: 2.4vw;
}

#main-frame-overlay .mr-setup-container.v3 #countdown2 button#tiles {
    margin-top: 0.225em;
}

#main-frame-overlay .mr-setup-container.v3 #countdown2 button.btn-yellow.mtb19 {
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.mr-setip-title {
    font-size: 1.852vw;
    font-weight: 500;
    font-family: var(--rubik), sans-serif;
    align-content: end;
}

.mr-setip-title.mt130 {
    margin-top: 7.523vw;
}

.mr-setip-title.mb24 {
    margin-bottom: 1.389vw;
}

.mr-setip-title#couplecountdown-title {
    margin-bottom: 2.431vw;
}

.mr-interstitial-container {
    width: 38%;
    aspect-ratio: 65 / 60;
    position: relative;
    margin: 0 auto;
    border-radius: 0.579vw;
    padding: 2.315vw 3.472vw;
    background: #fff;
}

.mr-interstitial-container-v2 {
    position: relative;
    margin: 0 auto;
    background: #fff;
    width: 100%;
    padding: 0.694vw 0.81vw 1.157vw 0.81vw;
    border-radius: 0.694vw;
}

.mr-interstitial-container-v2.v2 {
    width: min(30.671vw, 530px); /* 530px */
    aspect-ratio: 53 / 45;
    padding: min(1.389vw, 24px) min(0.81vw, 17px) min(0.81vw, 17px) min(0.81vw, 17px); 
    /* 12px 14px 14px 14px */
    overflow: auto;
}

.mr-interstitial-container-v2::-webkit-scrollbar
{
    width: min(0.579vw, 10px); /* 10px */
}

.mr-interstitial-container-v2::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 0.926vw 0.926vw transparent; /* 0 0 16px 16px */
    border: solid 0.174vw transparent; /* 3px */
    border-width: min(0.174vw, 3px);
}

.mr-interstitial-container-v2::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 0.231vw 0.231vw var(--CouplePurple); /* 0 0 4px 4px */
    border: solid 0.174vw transparent; /* 3px */
    border-width: min(0.174vw, 3px);
    border-radius: min(0.81vw, 14px); /* 14px */
}

.mr-interstitial-container-v2::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: min(1.157vw, 15px); /* 20px */
}

.mr-interstitial-container-v2::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: min(1.157vw, 15px); /* 20px */
}

.mr-interstitial-container-v2.v3 {
    width: min(30.671vw, 800px);
    padding: min(0.694vw, 14px) min(0.81vw, 17px) min(0.81vw, 17px) min(0.81vw, 17px);
    margin-top: 3%;
}

.mr-interstitial-container-v2.v4 {
    width: 100%;
    border-radius: 0;
    padding: 0.694vw 0.81vw 1.157vw 0.81vw;
}

.mr-interstitial-container.version2 {
    width: 30%;
    padding: unset;
    z-index: 100;
}

.mr-interstitial-container.lobby {
    width: 78%;
    aspect-ratio: 65 / 63;
    position: relative;
    z-index: 100;
    top: 25px;
    margin: 0 auto;
    border-radius: 1.157vw;
    padding: 2.315vw 3.472vw;
    background: #f3f3f3;
}

.mr-interstitial-inner-none {
    height: calc(100% + 4.63vw);
    margin: -2.315vw -3.472vw;
    padding: 2.315vw 3.472vw;
}

/* UI-2025 */
.mr-interstitial-container-v2.v5 {
    width: 32.5%;
    max-height: 26.04vw; /* 450px */
    overflow-y: auto;
    padding: 1.62vw 1.62vw 0.69vw 1.62vw; /* 28px 28px 12px 28px */
}

.mr-interstitial-container.grid {
    display: grid;
}

.mr-interstitial-container.grid.toCenter {
    z-index: 100;
    align-content: center;
}

.mr-interstitial-container.grey {
    background-color: #f2f3f5;
}

.mr-interstitial-container.v2 {
    width: 100%;
    aspect-ratio: unset; 
    padding: 1.389vw;
    border-radius: 0.694vw;
}

.mr-interstitial-container.v3 {
    padding: 1.389vw  1.968vw; /*24px 34px*/
    overflow-y: auto;
    overflow-x: hidden;
}

.mr-interstitial-container.v4 {
    padding: 1.852vw 3.472vw;
}

.mr-interstitial-wrapper.interstitial-first .mr-interstitial-container {
    aspect-ratio: 65 / 70;
}

/*.mr-interstitial-container.v3 {
    aspect-ratio: unset;
    background: unset;
    display: flex;
    justify-content: center;
    align-items: center;
}*/

.mr-interstitial-container::-webkit-scrollbar
{
    width: 0.579vw; /* 10px */
}

.mr-interstitial-container::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 0.926vw 0.926vw transparent; /* 0 0 16px 16px */
    border: solid 3px transparent;
}

.mr-interstitial-container::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 0.231vw 0.231vw var(--CouplePurple); /* 0 0 4px 4px */
    border: solid 0.174vw transparent; /* 3px */
    border-radius: 0.81vw; /* 14px */
}

.mr-interstitial-container::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 0.289vw; /* 5px */
}

.mr-interstitial-container::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 0.289vw; /* 5px */
}

.mr-interstitial-container.v4 {
    padding: 1.852vw 2.894vw; /*32px  */
}

.mr-interstitial-container.bg1, .mr-interstitial-container.bg3 {
    background: #f3f3f3 url(../img/couple_watermark.svg) center center no-repeat;
    background-size: 80%;
}

.mr-interstitial-container.bg2 {
    background: #f3f3f3 url(../img/cut_watermark.svg) center center no-repeat;
    background-size: 80%;
}

.mr-interstitial-container.bg4, .mr-interstitial-container.bg5 {
    background: #f3f3f3 url(../img/connect_watermark.svg) center center no-repeat;
    background-size: 80%;
}

.mr-interstitial-container.center {
    text-align: center;
}

.mr-interstitial-top {
    display: flex;
    gap: 0 0.463vw;
}

.mr-interstitial-top.v2 {
    margin-bottom: 1.157vw;
    gap: 0 1.1vw;
}

.mr-interstitial-top.mb30 {
    margin-bottom: min(1.736vw, 36px); /* 30px */
}

.mr-interstitial-top.v2 {
    margin-bottom: 1.157vw; /* 20px */
    gap: 0 1.1vw; /*0 19px*/
}

.mr-interstitial-top.v2.min {
    margin-bottom: min(1.157vw, 20px); /* 20px */
    gap: min(1.1vw, 19px); /*0 19px*/
}

.mr-interstitial-container.pTop150 {
    padding-top: 120px;
}

.mr-interstitial-container.pTop100 {
    z-index: 25;
    padding-top: 70px;
}

.mr-interstitial-container.pTop40 {
    z-index: 35;
    width: 42%;
}

.mr-interstitial-container.pCenter {
    padding: 2.315vw 3.472vw;
    z-index: 9999;
    align-content: center;
    aspect-ratio: 4 / 3;
}

.mr-interstitial-container.pCenter button.button-H54 {
    bottom: 1.7vw;
}

#overlayExitDate-damageReport .mr-interstitial-container.pCenter .mr-interstitial-content {
    height: 50%;
}

#boot-report .mr-interstitial-container {
    aspect-ratio: 4 / 3;
}

.modal-content.pCenter {
    width: 100%;
}

img.w18 {
    width: 1.042vw;
}

.mr-interstitial-container-v2 {
    position: relative;
    margin: 0 auto;
    width: 100%;
    padding: 1vw;
    border-radius: 0.694vw;
}

.performance-room .mr-interstitial-container-v2,
.performance-room .overlay-t2-simple2 {
    width: 78%;
}

.text-14 {
    font-family: var(--nunito), sans-serif;
    font-size: 0.810vw;
    line-height: 1.57;
}

.text-16 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.111vw;
    line-height: 1.57;
    margin-top: 20px;
    word-wrap: break-word; /* For legacy browser support */
    overflow-wrap: break-word; /* For modern browser support */
}

.text-16.v2 {
    font-size: 0.926vw;
    margin-top: 0;
    line-height: 1.36;
}

.mr-i-timer {
    margin: 0 auto 1.852vw auto;
}

.mr-i-timer.temp {
    font-family: var(--nunito), sans-serif;
    width: 16%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    border: solid 0.347vw var(--CouplePurple);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.083vw;
    font-weight: 700;
    color: #444;
}

.mr-i-timer.temp.v2 {
    width: 4.930vw;
    height: 4.930vw;
    border-width: 0.307vw;
    font-size: 1.852vw;
    margin-bottom: 1.389vw;
}

.mr-i-timer.temp.v2.mb0 {
    margin-bottom: 0;
}

.greenToDateTimer.v2 {
    font-size: 1.852vw;
}

img.w18 {
    width: 1.042vw;
}

.mr-i-timer.temp.v3 {
    margin-bottom: 1.042vw;
    background-color: #fff;
}

.mr-i-timer.temp.v4 {
    width: 5.035vw;
    margin-bottom: 0.521vw;
}

.dashboard-circle {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 2.083vw;
}

.mr-interstitial-inner, .mr-interstitial-content {
    margin-bottom: 4.340vw;
}

.dashboard-circle svg {
    width: 5.5vw;
    aspect-ratio: 1/1;
}

.dashboard-circle .bg {
    fill: none;
    stroke-width: 6px; /*0.347vw*/
    stroke: var(--CouplePurple);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.dashboard-circle.mb0 {
    margin-bottom: 0;
}

.meter-1 {
    fill: none;
    stroke-width: 8px; /*0.347vw*/
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 360;
    stroke-dashoffset: 0;
    stroke: #dedede;
    animation: progress-1 30s ease-out;
}

.meter-1.sec45 {
    animation-duration: 66s;
}
.meter-1.sec40 {
    animation-duration: 59s;
}
.meter-1.sec30 {
    animation-duration: 44s;
}
.meter-1.sec25 {
    animation-duration: 37s;
}
.meter-1.sec20 {
    animation-duration: 29s;
}
.meter-1.sec19 {
    animation-duration: 27s;
}
.meter-1.sec18 {
    animation-duration: 26s;
}
.meter-1.sec17 {
    animation-duration: 24s;
}
.meter-1.sec16 {
    animation-duration: 23s;
}
.meter-1.sec15 {
    animation-duration: 22s;
}
.meter-1.sec14 {
    animation-duration: 21s;
}
.meter-1.sec13 {
    animation-duration: 18s;
}
.meter-1.sec12 {
    animation-duration: 17s;
}
.meter-1.sec11 {
    animation-duration: 16s;
}
.meter-1.sec10 {
    animation-duration: 14s;
}
.meter-1.sec9 {
    animation-duration: 13s;
}
.meter-1.sec8 {
    animation-duration: 12s;
}
.meter-1.sec7 {
    animation-duration: 10s;
}
.meter-1.sec6 {
    animation-duration: 9s;
}
.meter-1.sec5 {
    animation-duration: 8s;
}

@keyframes progress-1 {
    from {
        stroke-dashoffset: 360;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.dashboard-circle span {
    position: absolute;
    top: 52%;
    left: 0;
    transform: translate(0, -50%);
    font-family: var(--nunito), sans-serif;
    font-size: 2.083vw;
    font-weight: 700;
    color: #444;
    line-height: 1;
    right: 0;
    display: table;
    margin: 0 auto;
}

.circle {
    aspect-ratio: 1 / 1;
	background: transparent;
    border: 0.463vw solid #f3f3f3;
    transition: 1s;
    animation:  animix 20s 1;
    animation-fill-mode: forwards;
}
@keyframes animix {
    0% {
        border-top-color: #00abd1;
        border-right-color: #00abd1;
        border-bottom-color: #00abd1;
        border-left-color: #00abd1;
    }
    25% {
        border-top-color: #00abd1;
        border-right-color: transparent;
        border-bottom-color: #00abd1;
        border-left-color: #00abd1;
    }
    50% {
        border-top-color: #00abd1;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #00abd1;
    }
    75% {
        border-top-color: #00abd1;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    100% {
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}

.mr-i-t1 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.157vw;
    font-weight: 400;
    color: #444;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 0.347vw;
    margin-bottom: 2.778vw;
}

.mr-i-t1.v2 {
    flex-direction: row;
    text-align: unset;
}

.mr-i-t1 span {
    font-family: var(--rubik), sans-serif;
    font-size: 1.852vw;
    font-weight: 800;
    line-height: 1;
}

.mr-i-t1 span.mb16 {
    margin-bottom: 0.926vw;
}

.mr-i-t2 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.852vw;
    font-weight: 700;
    line-height: 1.33;
    color: #444;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 2.894vw; /* 50px */
}

.mr-i-t2.mb0 {
    margin-bottom: 0;
}

.mr-i-t2.mb42 {
    margin-bottom: 2.431vw;
}

.mr-i-t2.f26 {
    font-size: 1.505vw;
}

.mr-i-t2.lh16 {
    line-height: 1.6;
}

.mr-i-t2.mb5 {
    margin-bottom: 0.289vw;
}

.mr-i-t2.mb16 {
    margin-bottom: 0.926vw;
}

.mr-i-t2.rubik {
    font-family: var(--rubik);
    font-weight: 500;
}

.mr-i-t2.mb26 {
    margin-bottom: 1.505vw;
}

.mr-i-t2.mb05 {
    margin-bottom: 0.5vw;
}

.mr-i-t2.mb32 {
    margin-bottom: 1.852vw;
}

.mr-i-t2.mb42 {
    margin-bottom: 2.431vw;
}

.mr-i-t2 span {
    font-family: var(--nunito), sans-serif;
    font-size: 1.1vw;
    line-height: 1.33; 
    font-weight: 400;
}

.mr-i-t2 span.f24 {
    font-size: 1.389vw;
}

.mr-i-t3 {
    font-family:  var(--nunito), sans-serif;
    font-size: 1.04vw; /* 20px / 1920px */
    font-weight: 700;
    line-height: 1.33;
    color: #444;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.mr-i-t3 span {
    font-family: var(--nunito), sans-serif;
    font-size: 1.389vw;
    line-height: 1.33; 
    font-weight: normal;
}

.mr-i-t3.f24 {
    font-size: max(1.389vw, 20px);
}

.mr-i-t3.mb6 {
    margin-bottom: 0.35vw; /*6px*/
}

.mr-i-t3.mb18 {
    margin-bottom: 1.042vw;
}

.mr-i-t3.mb24 {
    margin-bottom: 1.042vw;
}

.mr-i-t3.mb32 {
    margin-bottom: max(1.852vw, 24px);
}

.mr-i-t3.v2 {
    font-weight: 500;
    font-size: 1.852vw;
    text-wrap: balance;
}

.mr-i-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--nunito), sans-serif;
    font-size: 0.810vw;
    font-style: italic;
}

.mr-i-buttons.v2 {
    justify-content: center;
    gap: 1.157vw;
}

.mr-i-buttons.mb26 {
    margin-bottom: 1.505vw;
}

#consentRecordingContainer .mr-i-buttons.mb26 {
    min-height: 2.431vw;
}

.mr-i-buttons.mt45 {
    margin-top: 2.604vw;
}

.mr-i-buttons li {
    display: grid;
    gap: 7px 0;
    text-align: center;
}

.mr-i-buttons button {
    width: 9.259vw;
    height: 2.431vw;
    background-color: #fff;
    border-radius: 11.574vw;
    border: solid 0.116vw var(--CouplePurple);
    font-size: 0.926vw;
    font-weight: 700;
    font-family: var(--rubik), sans-serif;
    cursor: pointer;
    transition: all 0.2s ease-in;
    position: relative;
    color: #444;
}

.mr-i-buttons button.noW {
    width: unset;
    padding: 0 0.694vw;
    display: flex;
    align-items: center;
    gap: 0.868vw;
}

.mr-i-buttons button.w164 {
    width: 9.491vw;
}

.mr-i-buttons button.w190 {
    width: 10.995vw;
}

.mr-i-buttons button:not(:disabled):hover {
    background-color: var(--CouplePurple);
    color: #fff;
}

.mr-i-buttons button:not(:disabled):hover span.extra,
.mr-i-buttons button#doubleTime:not(:disabled):hover span.extra {
    color: #fff;
}

.mr-i-buttons button:disabled, .mr-i-buttons button[disabled] {
    background-color: #e2e2e2;
    color: #a4a4a4;
    cursor: pointer;
}

.mr-i-buttons button#doubleTime:disabled:hover,
.mr-i-buttons button#doubleTime[disabled]:hover {
    cursor: default;
}

.mr-i-buttons button#doubleTime:disabled span.extra,
.mr-i-buttons button#doubleTime[disabled] span.extra {
    color: #a4a4a4;
}

.mr-i-buttons button:not(#doubleTime) span.extra {
    position: absolute;
    top: -0.752vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.157vw;
    font-weight: 600;
    width: 4.167vw;
    height: 1.389vw;
    border-radius: 1.389vw;
    background: var(--CouplePurple) url('../img/money_sign.svg') center left 0.868vw no-repeat;
    background-size: 0.694vw auto;
    text-align: left;
    color: #444;
    display: flex;
    gap: 0.116vw;
}

.mr-i-buttons button#doubleTime {
    gap: 0;
}

.mr-i-buttons button#doubleTime span.extra {
    font-weight: 600;
    text-align: left;
    color: #444;
    display: flex;
    gap: 0.116vw;
    align-items: center;
}

.speaker-nameInterstitial {
    align-items: center;
}
.speaker-nameInterstitial > span {
    font-weight: 700;    
    font-size: 1.157vw;
}

.mr-buttons-av {
    position: absolute;
    bottom: 27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.mr-buttons-av button {
    min-width: 7.167vw;
    margin-bottom: 25px;
    text-transform: none;
}

.mr-buttons-av button:disabled {
    display: none;
}

@media screen and (max-width: 1640px) {
    .mr-buttons-av button {
        margin-bottom: 0;
    }
}

.btn-yellow.confirm-all {
    margin-top: 20px;
}

.mr-buttons-av button.auto {
    width: auto;
}

.overlay-t1-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.overlay-t1 {
    font-family: var(--nunito), sans-serif;
    background: #fff;
    border-radius: 10px;
    width: 70%;
    padding: 20px;
    text-align: center;
    display: grid;
    gap: 20px 0;
    line-height: 1.3;
    position: relative;
    z-index: 10;
}
.overlay-t1.w80 {
    width: 80%;
}

.overlay-t1-close {
    position: absolute;
    width: 100%;
    height: 20px;
    color:black;
    z-index: 11;
    text-align: right;
    padding: 10px 5px;
}

.overlay-t1-close a {
    margin-right: 10px;
    cursor: pointer;
    text-decoration: none;
    color: #3c414d;
    font-family: var(--nunito), sans-serif;
    font-size: 1.042vw;
    font-weight: 900;
    line-height: 1;
}

.ot1-title1 {
    font-family: var(--nunito), sans-serif;
    font-size: 2vw;
    font-weight: 500;
    margin-top:20px;
}

.overlay-t2-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    font-family: var(--rubik), sans-serif;
    padding: 3%;
    position: relative;
    z-index: 10;
}

.overlay-t2-wrapper.no-zIndex {
    z-index: unset;
}

.overlay-t2-wrapper.hide {
    display: none;
}

#overlayExitDate, #exitOrRefresh {
    top: 0;
}

#overlayExitDate .ot1-title1,
#exitOrRefresh p b.f24 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.852vw;
    font-weight: 700;
    line-height: 1;
    color: #444;
    margin-top: 5px;
}

#overlayExitDate .overlay-t1 > p,
#exitOrRefresh p {
    font-family: var(--nunito);
    font-size: max(14px, 1.1vw);
    line-height: 1.33;
    font-weight: 400;
    margin-bottom: 1vh;
}

#overlayExitDate,
#exitOrRefresh {
    z-index: 20;
    margin: 0 auto;
    max-width: 780px;
}

.overlay-t2-wrapper.hide {
    display: none;
}

.overlay-t2-wrapper.icebreaker-main {
    padding: 0;
}

.overlay-t2-wrapper.v2 {
    border: 0.231vw solid #70d3ea;
}

@media only screen and (min-width: 1920px) {
    .overlay-t2-wrapper.v2 {
        border: 4px solid #70d3ea;
    }
}

.overlay-t2-wrapper.v3 {
    justify-content: center;
    z-index: 15;
    box-sizing: border-box;
    padding: 0;
}

.exitDate.mt5 {
    z-index: 20;
}

.overlay-t2-wrapper.v4 {
    justify-content: start;
}

.overlay-t2-wrapper.v5 {
    justify-content: center;
    position: fixed;
    z-index: 11;
}

.overlay-t2-wrapper.v6 {
    height: 94%;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
}

.overlay-t2-wrapper.toBottom {
    justify-content: end;
    padding-bottom: 3.472vw;
}

.overlay-t2-top {
    position: absolute;
    z-index: 2;
    top: 0;
    color: #003844;
    font-size: 1.157vw;
    font-weight: 500;
    height: 1.736vw;
    border-bottom-left-radius: 0.984vw;
    border-bottom-right-radius: 0.984vw;
    background-color: #70d3ea;
    padding: 0 0.926vw;
    max-width: 23.148vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media only screen and (min-width: 1920px) {
    .overlay-t2-top {
        font-size: 20px;
        height: 30px;
        border-bottom-left-radius: 17px; 
        border-bottom-right-radius: 17px; 
        padding: 0 16px;
    }
}

.overlay-t2-simple {
    position: relative;
    font-size: 1.389vw;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    border-radius: 0.463vw;
    width: 74%;
    height: auto;
    padding: 1.736vw 2.315vw 1.157vw 2.315vw;
    text-align: center;
    margin-bottom: 2.778vw;
    border: solid 0.116vw var(--CouplePurple);
    background: linear-gradient(92.66deg, rgba(48, 174, 225, 0.8) 0%, rgba(110, 48, 209, 0.8) 100%);
    backdrop-filter: blur(12px);
}

.overlay-t2-simple.onGreen {
    background-image: linear-gradient(100deg, rgba(57, 150, 11, 0.7) 1%, rgba(39, 119, 99, 0.7) 100%);
    border-color: #0eb90a;
    animation-name: none;
}

.overlay-t2-simple2 {
    display: grid;
    font-family: var(--nunito);
    background-color: #fff;
    width: 80%;
    padding: 1.04vw 2.315vw 0.81vw 2.315vw; /*18px 40px 14px 40px*/
    border-radius: 0.694vw; /*12px;*/
    font-size: 0.73vw; /*14px at 1920px */
    line-height: 1.5;
    position: relative;
}

.overlay-t2-simple2 .grid {
    display: grid;
}

.overlay-t2-simple2.cq-size-v1 {
    padding-left: 1.42cqi; /* 25px */
    padding-right: 1.42cqi; /* 25px */
    padding-bottom: 1.193cqi; /* 21px */
    box-shadow: 0 1.925cqi 2.88774cqi 0 rgba(0, 0, 0, 0.05); /* 0 10px 15px 0 */
}

.overlay-t2-simple2.w28p {
    width: 28%;
}

.overlay-t2-simple2.w27p {
    width: 27.35%;
}

.overlay-t2-simple2.w35p {
    width: 35%;
}

.overlay-t2-simple2.w38p {
    width: 38%;
}

.overlay-t2-simple2.wauto {
    width: auto;
    display: table;
}

.overlay-t2-simple2.ptb30 {
    padding-top: 1.74vw; /* 30px */
    padding-bottom: 1.74vw; /* 30px */
}

.overlay-t2-simple2 .ptb30 {
    padding-top: 0.74vw;
    padding-bottom: 0.93vw;
}
/*1.04vw 2.315vw 0.81vw 2.315vw: w27p - ptb30 */

#couple-account-required .overlay-t2-simple2 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px 3px;
}

.overlay-view-report .modal-content {
    font-family: var(--nunito), sans-serif;
    background-color: #fff;
    border-radius: 0.694vw;
    font-size: 0.81vw;
    line-height: 1.5;
    position: relative;
}

.overlay-view-report .modal-content.report_step1 {
    padding: 20px 48px;
}

.overlay-view-report .modal-content.report_step2,
.overlay-view-report .modal-content.report_step3,
.overlay-view-report .modal-content.report_step4 {
    padding: 20px 48px 40px;
}

.overlay-view-report .modal-content.report_step1 p,
.overlay-view-report .modal-content.report_step2 p,
.overlay-view-report .modal-content.report_step3 p,
.overlay-view-report .modal-content.report_step4 p {
    text-align: left;
    text-wrap: initial;
}

.modal-container.view_report_modal .mr-i-t3.mb18 {
    margin-bottom: 15px;
}

.overlay-view-report .modal-content.report_step2 p,
.overlay-view-report .modal-content.report_step3 p,
.overlay-view-report .modal-content.report_step4 p,
.overlay-view-report .modal-content.report_step2 .textarea-custom {
    font-size: max(0.81vw, 12px);
}

.overlay-view-report .modal-content.report_step2 {
    text-align: center;
} 

.overlay-view-report.modal {
    position: relative;
    max-width: max(444px, 24%);
}

.overlay-view-report .modal-top {
    background-color: transparent;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;
}

a.ot2-close,
a.close-overlay {
    position: absolute;
    top: 0.752vw;
    right: 0.752vw;
    text-decoration: none;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    font-size: 0.83vw; /*16px at 1920px */
}

a.ot2-close:hover,
a.close-overlay:hover,
a.ot2-close2:hover {
    color: #1189ad;
}

a.ot2-close2,
a.close-overlay,
a.closeBoot {
    position: absolute;
    top: 0.69vw;
    right: 0.752vw;
    text-decoration: none;
    color: var(--CoupleGray900);
    font-family: var(--nunito);
    font-size: 0.83vw; /*16px at 1920px */
    font-weight: 900;
    line-height: 1;
}

a.ot2-close2.min,
a.close-overlay.min {
    font-size: min(1.042vw, 21px);
}

.overlay-t2 {
    position: relative;
    font-size: 1.389vw;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    border-radius: 0.463vw;
    width: 80%;
    height: auto;
    padding: 1.157vw 2.315vw;
    text-align: center;
    margin-bottom: 2.778vw;
    border: solid 0.116vw #70d3ea;
    animation-name: bgtransition;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition: all 1s;
    background-size: 100% 100%;
}

@media only screen and (min-width: 1920px) {
    .overlay-t2.v2 {
        padding: 20px;
        font-size: 24px;
        margin-bottom: 48px;
        border: solid 2px #70d3ea;
        border-radius: 8px;
    }
}

.overlay-t2.w90p {
    width: 90%;
    padding: 1.157vw 1.157vw;
}

@media only screen and (min-width: 1920px) {
    .overlay-t2.w90p {
        width: 90%;
        padding: 20px;
        font-size: 24px;
        margin-bottom: 48px;
        border: solid 2px #70d3ea;
        border-radius: 8px;
    }
}

@keyframes bgtransition {
    0% {
        background-image: url(../img/bg-trans-1.png);
        border-color: #70d3ea;
    }

    50% {
        background-image: url(../img/bg-trans-2.png);
        border-color: #c15af9;
    }

    100% {
        background-image: url(../img/bg-trans-3.png);
        border-color: #eb482d;
    }
}

.overlay-t2.blue {
    animation-name: none;
    background-image: url(../img/bg-trans-1.png);
    border-color: #70d3ea;
}

.ot2-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.926vw;
    height: 1.852vw;
    padding: 0.231vw 1.736vw;
    border-radius: 1.157vw;
    background-color: #70d3ea;
    font-size: 1.157vw;
    color: #003844;
    z-index: 2;
    white-space: nowrap;
}

@media only screen and (min-width: 1920px) {
    .ot2-title.v2 {
        top: -14px;
        height: 28px;
        padding: 2px 20px;
        font-size: 20px;
    }
}

.ot2-title.white {
    color: #fff;
}

.ot2-title.animation {
    animation-name: titletransition;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition: all 4s ease-in;
}

@keyframes titletransition {
    from {
        background-color: #70d3ea;
    }

    50% {
        background-color: #c15af9;
    }

    to {
        background-color: #E63E29;
    }
}

.overlay-t2.time12s {
    animation-duration: 12s;
}

.overlay-t2.time12s .ot2-title {
    animation-duration: 12s;
}

.mr-i-rating {
    display: grid;
    grid-template-columns: repeat(5, 2.315vw);
    grid-template-rows: 2.315vw;
    gap: 0 1.157vw;
    margin: 0 auto;
    width: 16.204vw;
}

a.overlay-t2-details {
    font-size: 1.157vw;
    border-radius: 0.463vw;
    box-shadow: 0 0.231vw 0.463vw 0 rgba(154, 154, 154, 0.3);
    border: 0.116vw solid var(--CouplePurple);
    background-color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.694vw 1.389vw;
    z-index: 1;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease-in;
}

a.overlay-t2-details:disabled, a.overlay-t2-details[disabled] {
    background-color: #cccecd;
    color: #888888;
    border: 0.116vw solid #999;
}

@media only screen and (min-width: 1920px) {
    a.overlay-t2-details.v2 {
        font-size: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px 0 rgba(154, 154, 154, 0.3);
        border-width: 2px;
        padding: 12px 24px;
    }
}

a.overlay-t2-details:hover {
    background-color: #00abd1;
    color: #fff;
}

.overlay-t2-wrapper .f32 {
    font-size: 1.852vw;
}

@media only screen and (min-width: 1920px) {
    .overlay-t2-wrapper .f32.fixedBig {
        font-size: 32px;
    }
}

.overlay-t3 {
    position: relative;
    font-family: var(--nunito), sans-serif;
    font-size: 0.926vw;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    border-radius: 0.463vw;
    width: 86%;
    height: auto;
    padding: 2.315vw 2.315vw 1.736vw;
    text-align: center;
    border: solid 0.058vw #222;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-image: linear-gradient(127deg, rgba(58, 58, 58, 0.65), rgba(18, 18, 18, 0.8) 100%);
}

.overlay-t3.blur20 {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

@media only screen and (min-width: 1920px) {
    .overlay-t3 {
        padding: 5%;
        font-size: 20px;
    }
}

.overlay-t3 p {
    text-align: left;
    margin-top: 1.157vw;
}

@media only screen and (min-width: 1920px) {
    .overlay-t3 p {
        margin-top: 20px;
    }
}

.overlay-t3 p.center {
    text-align: center;
}

.overlay-t3 p b {
    font-weight: 600;
}

span.ot3-title {
    font-family: var(--rubik), sans-serif;
    font-size: 1.273vw;
    font-weight: 300;
    display: block;
    padding: 0.289vw 1.157vw;
    border-radius: 1.042vw;
    background-color: #222;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.984vw;
    white-space: nowrap;
}

@media only screen and (min-width: 1920px) {
    span.ot3-title {
        font-size: 20px;
        top: -18px;
        padding: 5px 30px;
    }
}

span.ot3-title b {
    font-weight: 500;
}

span.ot3-title2 {
    font-family: var(--rubik), sans-serif;
    font-size: 1.389vw;
    font-weight: 600;
    display: block;
    margin-bottom: 0.231vw;
}
@media only screen and (min-width: 1920px) {
    span.ot3-title2 {
        font-size: 30px;
    }
}

.game-close {
    position: absolute;
    top: 0.405vw;
    right: 0.405vw;
    font-style: normal;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.926vw;
}

.mr-i-rating li {
    cursor: pointer;
}

.mr-i-rating li svg polygon {
    fill: currentColor;
}

.mr-i-rating li svg {
    fill: #dde2e4;
    color: #dde2e4;
    height: 2.315vw;
}

.mr-i-rating li:nth-child(-n + 2) svg:hover,
.mr-i-rating li.star-1 svg, .mr-i-rating li.star-2 svg {
    fill: #e63e29;
    color: #e63e29;
}

.mr-i-rating li svg:hover,
.mr-i-rating li.star-3 svg, .mr-i-rating li.star-4 svg, .mr-i-rating li.star-5 svg {
    fill: var(--CouplePurple);
    color: var(--CouplePurple);
}

.mr-i-rating .mr-i-text {
    font-family: var(--nunito), sans-serif;
    font-size: 0.868vw;
    line-height: 1.2;
    font-style: italic;
    color: #797979;
    text-align: center;
    grid-column: 1 / -1;
    padding: 1.157vw 0 0 0;
    min-height: 3.5vh;
}

.mr-i-rating .mr-i-text::after {
    content: "|";
    visibility: hidden;
}

.mr-i-text2 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.1vw;
    font-weight: 400;
    line-height: 1.4;
    color: #797979;
    text-align: center;
    text-wrap: balance;
}

.mr-i-text2.mb40 {
    margin-bottom: 2.315vw;
}

.mr-i-text3 {
    font-family: var(--rubik), sans-serif;
    font-size: 0.926vw;
    line-height: 1.6;
    color: #A4ACB8;
    text-align: center;
}

.mr-i-text3.v2 {
    color: #444;
    font-weight: 400;
}

.mr-i-text3.mt80mb8 {
    margin-top: 3.2vw;
    margin-bottom: 1vw;
}

.mr-i-text3.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 0.289vw;
}

.mr-i-text3.flex.coupleCash {
    color: #444;
}

.mr-i-text3.f16Nunito {
    font-size: 0.926vw;
    font-family: var(--nunito), sans-serif;
}

.mr-i-text3.mt8 {
    margin-top: 0.463vw;
}

.mr-i-text3.mr10 {
    margin-right: 0.579vw;
}

.mr-i-text3.mb30 {
    margin-bottom: 1.736vw;
}

.mr-i-text3.red {
    color: #e63e29;
}

.mr-i-text3.red span {
    color: #d48080;
}

.mr-i-text3.red span, .mr-i-text3.red label, .mr-i-text3.red svg {
    color: #e63e29;
}

.mr-i-text3.red svg.couplecoin12fluid {
    color: #e63e29 !important;
}

.giftAnonymousContainer .mr-i-text3 {
    font-family: var(--nunito), sans-serif;
    color: #2e2e2e;
}

.mr-i-text4 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.389vw;
    line-height: 1.33;
    color: #444;
    text-align: center;
}

.mr-i-text4.mb24 {
    margin-bottom: 1.389vw;
}

.mr-i-text5 {
    font-family: var(--nunito), sans-serif;
    font-size: 1.1vw;
    line-height: 1.4;
    color: #444;
    text-align: center;
}

svg.ml5 {
    margin-left: 5px;
    width: max(0.81vw, 14px);
}

svg.w14 {
    width: max(0.81vw, 14px);
}

button.button-H54 {
    position: absolute;
    bottom: 2.445vw;
    left: 50%;
    transform: translateX(-50%);
    height: 3.125vw;
    width: 10.995vw;
    border-radius: 11.574vw;
    font-size: 0.926vw;
    font-weight: bold;
    font-family: var(--rubik), sans-serif;
    text-transform: uppercase;
    color: #a4a4a4;
    cursor: pointer;
    background-color: #e2e2e2;
    border: 0;
    margin: 0 auto;
    transition: all 0.2s ease-in;
}

button.blue-btn-1 {
    height: 3.125vw;
    width: 10.995vw;
    border-radius: 11.574vw;
    font-size: 0.926vw;
    font-weight: bold;
    font-family: var(--rubik), sans-serif;
    text-transform: uppercase;
    color: #a4a4a4;
    cursor: pointer;
    background-color: #e2e2e2;
    border: 0;
    margin: 0 auto;
    transition: all 0.2s ease-in;
}

button.button-H54.blue {
    background-color: var(--CouplePurple);
    color: #fff;
}

button.button-H54:not(.giftHover):not(.active):hover, button.button-H54.active {
    background-color: var(--CouplePurple);
    color: #fff;
}

button.blue-btn-1:not(.giftHover):not(.active):hover, button.blue-btn-1.active, button.blue-btn-1:not(:disabled) {
    background-color: var(--CouplePurple);
    color: #fff;
}

button.button-H54:disabled,
button.blue-btn-1:disabled,
button.button-H54[disabled],
button.blue-btn-1[disabled] {
    background-color: #e2e2e2;
    color: #a4a4a4;
}

button.button-H54.active.medium.sendBoot.green-color {
    background-color: green;
    color: #fff;
}

button.button-H54.active.medium.sendAmount.green-color {
    background-color: green;
    color: #fff;
}

button.button-H54.active.medium.sendBoot.red-color {
    background-color: red;
    color: #fff;
}

button.button-H54.medium {
    width: 12vw;
}

button.button-H54.relative {
    position: relative;
    bottom: unset;
    left: unset;
    transform: none;
}

button.button-H54.giftBuyButton {
    color: #fff;
    background-color: var(--CouplePurple);
}

button.button-H36-fluid {
    height: 2.083vw;
    border-radius: 0.463vw;
    font-size: 1.157vw;
    cursor: pointer;
    background-color: #00abd1;
    color: #fff;
    border: 0;
    transition: all 0.2s ease-in;
    font-weight: 500;
    font-family: var(--rubik), sans-serif;
    padding: 0 1.157vw;
    margin: 0;
}

button.button-H36-fluid.center {
     margin: 0 auto;
}

button.button-H36-fluid.mlAuto {
     margin-left: auto;
}

button.button-H36-fluid:hover {
     background-color: #e2e2e2; 
}

button.button-H30-fluid {
    height: 1.736vw;
    border-radius: 0.463vw;
    justify-self: center;
    position: relative;
    color: #fff;
    transition: all 0.2s ease-in;
    font-weight: 500;
    font-family: var(--rubik), sans-serif;
    background-color: #1189ad;
    border: 2px solid #1189ad;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.926vw;
    display: flex;
    align-items: end;
    padding-bottom: 0.058vw;
}

button.button-H30-fluid.paddBtm {
    padding-bottom: 0.145vw;
}

button.button-H30-fluid.disabled {
    background-color: #cccecd;
    border-color: #cccecd;
    color: #888888;
    pointer-events: none;
}

button.button-H30-fluid:hover {
    background-color: #fff;
    border: 2px solid #1189ad;
    color: #444;
}

button.button-H30-fluid .extra {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.694vw;
    height: 0.926vw;
    top: -0.637vw;
    color: #fff;
    background: var(--CouplePurple);
    padding: 0 0.463vw;
    border-radius: 0.289vw;
    gap: 0 0.289vw;
}

button.button-H30-fluid .extra svg {
    all: unset;
    width: 0.463vw;
    color: #fff;
    fill: #fff; 
    cursor: auto;
}

button.button-H30-fluid.disabled .extra {
    background-color: #cccecd;
    color: #888;
    fill: #888;
}

button.button-H30-fluid.disabled .extra svg {
    color: #888;
    fill: #888;
}

button.button-H30-fluid.mt20 {
    margin-top: 1.157vw;
}

button.button-H56 {
    height: 3.125vw;
    border-radius: 0.463vw;
    font-size: 1.389vw;
    padding: 0 30px;
    font-weight: 500;
    font-family: var(--rubik), sans-serif;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    background-color: #389EDF;
    border: 2px solid #389EDF;
    margin: 0 auto;
    transition: all 0.2s ease-in;
}

button.button-H56:hover {
    background-color: #fff;
    color: #389EDF;
}

a.link-black {
    text-decoration: underline;
    font-size: 0.926vw;
    text-align: center;
    font-family: var(--nunito), sans-serif;
    color: var(--TextLowEmphasis);
    margin-top: 2.315vw;
}

a.link-black:hover {
    text-decoration: none;
}

a.link-black.to-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.315vw;
}

.date-gift {
    border-radius: 3.935vw;
    border: solid 0.231vw var(--CouplePurple);
    background-color: #fff;
    padding: 0.810vw 1.5vw 0 1.5vw;
    margin: 1.736vw auto 0 auto;
    position: relative;
    width: 92%;
    aspect-ratio: 30 / 7;
    overflow: hidden;
}

#giftCardSegment0 .date-gift#giftCards {
    margin-bottom: 1.3vw;
}

.date-gift ul {
    font-family: var(--rubik), sans-serif;
    display: grid;
    grid-template-columns: repeat(15, 21%);
    height: 100%;
    position: relative;
    transition: all 0.3s ease-in;
}

.date-gift ul.step-1-fwd {
    transform: translateX(-21%);
}

.date-gift ul li {
    position: relative;
    height: 3.935vw;
    width: 3.935vw;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.231vw solid transparent;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

.date-gift-arrow {
    width: 1.157vw;
    height: 100%;
    position: absolute;
    top: 0;
    background: #fff url('../img/right-arrow-blue400.svg') 0 center no-repeat;
    background-size: 0.405vw auto;
    cursor: pointer;
    z-index: 10;
}

.date-gift-arrow.toLeft {
    left: 0;
    transform: rotate(180deg);  
}

.date-gift-arrow.toLeft.hide {
    display: none;
}

.date-gift-arrow.toRight {
    right: 0;
}

.date-gift-arrow.toRight.hide {
    display: none;
}

.date-gift ul li.date-gift-arrow:hover {
    border: 0;
}

.date-gift ul li.date-gift-arrow.selected {
    border: 0;
    background-color: unset;
}

.date-gift ul li.v2 {
    justify-content: flex-start;
    padding-left: 0.289vw;
}

.date-gift ul li:hover {
    border: 0.231vw solid var(--CouplePurple);
}

.date-gift ul li.selected {
    border: 0.231vw solid var(--CouplePurple);
    background-color: var(--CouplePurple);
}

.date-gift ul li i {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.868vw;
    font-size: 0.694vw;
    font-weight: 500;
    color: #909090;
    width: 2.894vw;
    height: 1.157vw;
    border-radius: 0.868vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.date-gift ul li:hover i,
.date-gift ul li.selected i {
    font-size: 0.810vw;
    font-weight: 600;
    background-color: var(--CouplePurple);
    color: #fff;
    font-style: normal;
}

.date-gift ul li img.w32 {
    width: 1.852vw;
}

.date-gift ul li img.w38 {
    width: 2.199vw;
}

.date-gift ul li img.w41 {
    width: 2.373vw;
}

.date-gift ul li img.w42 {
    width: 2.431vw;
}

.date-gift ul li img.w44 {
    width: 2.546vw;
}

.date-gift ul li img.w46 {
    width: 2.662vw;
}

.date-gift ul li img.w48 {
    width: 2.778vw;
}

.date-gift ul li img.w50 {
    width: 2.894vw;
}

.gift-received-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 2vw;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.gift-received-container.show {
    display: block;
    z-index: 10;
}

.gift-received, .gift-received-date {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 0.579vw;
    border: solid 0.231vw var(--CouplePurple);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 2.315vw;
}

.gift-timer {
    width: 6.019vw;
    aspect-ratio: 26 / 9;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1.042vw;
    background-color: var(--CouplePurple);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: var(--rubik), sans-serif;
    font-size: 1.736vw;
    font-weight: 600;
    border-radius: 11.574vw;
}

.gr-close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 22px;
    font-weight: 700;
    color: #3c414d;
    cursor: pointer;
}

img.drink120 {
    width: 6.944vw;
}

img.ani-big {
    width: 9.259vw;
}

img.ani-big-mingle {
    width: 9.259vw;
}

img.ani-big-mingle.big-size {
    width: 20.259vw;
}

.couplecoin14 {
    width: 14px;
}

svg.couplecoin12fluid {
    /*all: unset;*/
    width: 12px;
}

.mr-balance svg.couplecoin12fluid {
    width: 12px;
    margin-left: 10px;
}

.invite_submit svg {
    all: unset;
    width: 15px;
}

.invite_step3 p {
    margin-bottom: 10px;
}

dl.select-custom {
    position: relative;
    width: 80%;
    height: 2.315vw;
    background: #F3F5F9 url('../img/arrow-grey.png') center right 0.926vw no-repeat;
    background-size: 0.694vw auto;
    border: 1px solid #E8ECF2;
    border-radius: 0.463vw;
    font-size: 0.85vw;
    text-align: left;
    margin: 0 auto 0.868vw auto;
    z-index: 2;
}

dl.select-custom.opened {
    border-radius: 0.463vw 0.463vw 0 0;
}

dl.select-custom dt {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    padding: 0.725vw 0.868vw;
    line-height: 1;
    cursor: pointer;
}

dl.select-custom dd {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-bottom-left-radius: 0.463vw;
    border-bottom-right-radius: 0.463vw;
    color: #444;
    text-align: center;
    transform: scaleY(0);
    font-size: 0;
    overflow: hidden;
    transition: all 0.3s ease-in;
    transform-origin: top center;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    outline: 1px solid rgba(232, 236, 242, 1);
}

dl.select-custom.opened dd {
    transform: scaleY(1); 
    font-size: 0.85vw;
}

dl.select-custom dd span {
    border-top: 1px solid #E8ECF2;
    padding: 0.568vw 0.868vw;
    cursor: pointer;
    text-align: left;
}

dl.select-custom dd span:hover { 
    background-color: #5A5AD6;
    color: #fff;
}

.textarea-custom {
    width: 86%;
    height: 8.681vw;
    padding: 0.868vw 1.157vw;
    border: 0.116vw solid #5A5AD6;
    border-radius: 0.463vw;
    font-size: 0.926vw; /*16px*/
    text-align: left;
    margin: 0 auto 0 auto;
    /* box-shadow: 0 0.231vw 0.463vw 0 rgba(154, 154, 154, 0.3); */
    font-family: var(--nunito);
    color: #444;
    resize: none;
    overflow: auto;
}

.textarea-custom.v2 {
    width: 100%;
    margin: 0.87vw auto; /* 15px */
    font-size: 0.83vw; /* 16px at 1920px */
}

.view_report_modal .textarea-custom {
    margin: 1.505vw auto;
    width: 100%;
}

.user-title-20 {
    font-size: 1.157vw;
    font-family: var(--nunito), sans-serif;
    color: #444;
    font-weight: 700;
}

.user-title-20.min20 {
    font-size: min(1.157vw, 20px);
}

.user-title-20.min24 {
    font-size: min(1.157vw, 24px);
}

.user-title-24 {
    font-size: 1.389vw;
    font-weight: 700;
    line-height: 1.67;
}

.user-title-24.v2 {
    line-height: 1.3;
}

.user-title-24.v2 .f14 {
    font-size: 0.81vw; /* 14px */
    vertical-align: middle;
}

dl.interests-list-1 dt,
.mr-interstitial-title {
    font-family: var(--nunito), sans-serif;
    font-size: 1.042vw;
    color: #444;
    display: block;
    font-weight: 700;
}

dl.interests-list-1 > dd {
    display: flex;
    flex-wrap: wrap;
    gap: 0.405vw 0.405vw; 
    font-family: var(--rubik), sans-serif;
    margin-top: 5px;
}

.mr-interstitial-top dl.interests-list-1 dd {
    margin: 0;
}

dl.interests-list-1 dd > div,
dl.interests-list-1 dd > dt,
dl.interests-list-1 dd > dd,
dl.interests-list-1 dd span {
    height: 1.447vw; /* 25px */
    display: flex;
    gap: 0 0.289vw; /*0 5px*/
    font-size: 0.926vw; /*16px*/
    font-weight: 500;
    padding: 0.231vw 0.81vw; /* 14px */
    border-radius: 0.926vw; /*16px*/
    background-color: var(--CouplePurple);
    color: #fff;
    border: solid 0.116vw var(--CouplePurple); /* 2px */
    align-items: center;
    position: relative;
}

dl.interests-list-1.min dd > div,
dl.interests-list-1.min dd > dd,
dl.interests-list-1.min dd > dt,
dl.interests-list-1.min dd > span {
    height: min(1.447vw, 25px); 
    gap: 0 min(0.289vw, 6px); /*0 5px*/
    font-size: min(0.694vw, 14px); /*12px*/
    padding: min(2px, 5px) min(1.273vw, 26px); /* 4px 22px */
    border-radius: min(2.315vw, 48px); /*40px*/
    line-height: 1.6;
    background-color: var(--CoupleGray800);
    border: 0;
    font-weight: 700;
    font-family: var(--rubik);
}

dl.interests-list-1.min.purple dd > div {
    border-color: var(--CouplePurple);
    background-color: var(--CouplePurple);
}

body dl.interests-list-1.min.purple dd div.white {
    border: min(0.116vw, 2px) solid var(--CouplePurple);
    background-color: #fff;
    color: var(--CouplePurple); /* Sept 2024 */
}

dl.interests-list-1.v2 dd > div,
dl.interests-list-1.v2 dd > dd,
dl.interests-list-1.v2 dd > dt,
dl.interests-list-1.v2 dd > span {
    border-color: var(--CouplePurple);
    gap: 0 min(0.289vw, 6px); /*0 5px*/
    font-size: min(0.694vw, 15px);
    padding: min(2px, 3px) min(0.81vw, 17px); /* 2px 14px */
    border-radius: min(2.315vw, 48px); /*40px*/
    line-height: 1.6;
    font-weight: 700;
}

body dl.interests-list-1 dd div.white {
    background-color: #fff;
    color: var(--CouplePurple); /* Sept 2024 */
}

dl.interests-list-1.v3 dd > div {
    height: 1.447vw; /* 25px */
    /* gap: 0 0.289vw; */ /*0 5px*/
    font-size: 0.694vw; */ /* 12px */
    /* padding: 0.231vw 1.042vw; */ /* 4px 18px */
    /* border-radius: 2.315vw; */ /*40px*/
    line-height: 1.6;
    background-color: var(--CoupleGray800);
    border: 0;
    font-weight: 700;
    font-family: var(--rubik);
}

dl.interests-list-1.min dd div:has(i) {
    padding-right: min(2.894vw, 60px); /* 50px */
}

dl.interests-list-1.v3 dd div:has(i) {
    padding-right: 2.894vw; /* 50px */
}

/*dl.interests-list-1.v2 dd > dd,
dl.interests-list-1 dd .white,
dl.interests-list-1 dd .span {
    background-color: #fff;
    color: var(--CouplePurple);
}

dl.interests-list-1 dd .span {
    background-color: #fff !important;
    color: var(--CouplePurple);
}*/

dl.interests-list-1 dd div.white,
dl.interests-list-1 dd > dd {
    background-color: #fff;
    color: var(--CouplePurple);
}

dl.interests-list-1 dd > div:has(i),
dl.interests-list-1 dd span:has(img) {
    padding-right: min(2.894vw, 60px) !important;
}

dl.interests-list-1 i {
    width: 2.431vw; /* 42px */
    aspect-ratio: 1/1;
    background-color: var(--CouplePurple);
    border: 0.116vw solid #fff; /* 2px */
    border-radius: 100%;
    position: absolute;
    right: -0.289vw; /* -5px */
    display: flex;
    justify-content: center;
    align-items: center;
}

dl.interests-list-1.min i {
    width: min(2.546vw, 53px); /* 44px */
}

dl.interests-list-1.v3 i {
    width: 1.968vw; /* 34px */
}

dl.interests-list-1 i img {
    width: 52%;
}

dl.interests-list-1.v3 i img {
    width: 60%;
}

dl.interests-list-1 dd div.purple {
    background: var(--CouplePurple);
}

dl.interests-list-1 dd span.gradRed {
    background: linear-gradient(90.17deg, #EA805E 0.17%, #AB082F 99.88%);
    border: 0;
}

dl.interests-list-1 dd span.white {
    background-color: #fff;
}



/*dl.interests-list-2 {
    margin: 1.620vw 0 0 0;
}

dl.interests-list-2 dt {
    font-family: var(--nunito), sans-serif;
    font-size: 1.157vw;
    color: #444;
    display: block;
    margin: 0 0 0.463vw 0;
    font-weight: 600;
}

dl.interests-list-2 dd {
    overflow-y: auto;
    max-height: 4.63vw;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--rubik), sans-serif;
    gap: 0.694vw 0.579vw;
}

@-moz-document url-prefix() {
    dl.interests-list-2 dd {
        scrollbar-width: thin;
        scrollbar-color: var(--CouplePurple) transparent;
    }
}*/

/*dl.interests-list-1 dd.random span,
dl.interests-list-2 dd span {
    display: flex;
    font-size: 0.926vw;
    padding: 0.231vw 0.694vw;
    border-radius: 0.926vw;
    background-color: #fff;
    color: #389EDF;
    border: solid 0.058vw #389EDF;
}*/

.mr-interstitial-close {
    position: absolute;
    cursor: pointer;
    font-weight: 700;
    top: 0.926vw;
    right: 0.926vw;
    font-size: 0.926vw;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.headline {
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  scroll-snap-align: start;
}

.word,
.char {
  animation-delay: var(--del);
  animation-direction: normal;
  animation-duration: var(--dur);
  animation-iteration-count: 1;
  animation-name: var(--name);
  animation-timing-function: var(--tf);
  animation-fill-mode: forwards;
  display: inline-block;
  position: relative;
  transform-origin: 50% 100%;
  z-index: 1;
}

.headline--flip .char {
  --name: flip;
  --dur: 2000ms;
  --tf: linear;
}

@keyframes flip {
  5% {
    transform: rotateX(1turn);
  }
  10% {
    transform: rotateX(2turn);
  }
  20% {
    transform: rotateX(3turn);
  }
  40% {
    transform: rotateX(4turn);
  }
  70%, 100% {
    transform: rotateX(5turn);
  }
}

.icebreaker-wrapper {
    width: 68px; 
    aspect-ratio: 1 / 1;
    position: absolute;
    right: 8px;
    bottom: 32px;
}

@keyframes icebreaker-rev {
 from {
     background-size: 100% 100%;
  }
  
  to {
    background-size: 0 0;
  }
}

.icebreaker {
    width: 100%;
    height: 100%;
    background: url(../img/icebreaker-outside.svg) no-repeat center center;
    background-size: 0 0;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 7;
    animation-name: icebreaker-rev;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

.icebreaker img {
    width: 38px;
    aspect-ratio: 1 / 1;
}

@keyframes icebreaker {
 from {
    background-size: 0 0;
  }
  
  to {
    background-size: 100% 100%;
  }
}

.icebreaker-wrapper:hover .icebreaker {
    animation-name: icebreaker;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes icebreaker-cc-rev {
 from {
     left: -1.852vw;
     opacity: 1;
  }
  
  to {
    left: 0.579vw;
  }
}

.icebreaker-cc {
    background-color: #5A5AD6;
    height: 26px; 
    width: 40px; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px;
    padding: 0 5px 0 8px;
    position: absolute;
    left: 10px; 
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-family: var(--rubik), sans-serif;
    font-size: 14px; 
    z-index: 1;
    animation-name: icebreaker-cc-rev;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 0 2px;
}

.icebreaker-cc img {
    width: 9px;
}

@keyframes icebreaker-cc {
    0% {
        opacity: 0;
        left: 0.579vw;
    }

    10% {
        opacity: 1;
        left: 0.579vw;
    }

    100% {
        opacity: 1;
        left: -2.392vw;
    }
}

.icebreaker-wrapper:hover .icebreaker-cc {
    animation-name: icebreaker-cc;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-delay: 0.4s;
}

/*Setup wizard*/

.mr-interstitial-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: calc(100% - 48px); */
    height: calc(100% - 40px);
}

@media only screen and (min-height: 721px) {
    .mr-interstitial-wrapper {
        height: calc(100% - 60px);
    }

    #main-frame-overlay .mr-setup-container.v3 {
        margin-top: -11px;
    }
}

.mr-interstitial-wrapper.hide {
    display: none;
}

.mr-interstitial-wrapper.fixed {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.mr-interstitial-wrapper.fixed.t25 {
    top: 25px;
}

.mr-interstitial-wrapper.summaryCoupleCut .mr-i-t2 span.f24 {
    font-size: 0.8vw;
    margin-bottom: 30px;
}

.mr-interstitial-wrapper.summaryCoupleCut .reviewNoDates.mr-i-t2.v2 {
    margin-top: 0.2vw;
}

.mr-setup-container {
    width: 37.7%;
    aspect-ratio: 65 / 63;
    position: relative;
    margin: 0 auto;
    border-radius: 1.157vw;
    padding: 1.736vw 2.315vw;
    background: #f2f3f5;
    display: grid;
    grid-auto-rows: min-content;
    justify-content: center;
    text-align: center;
}

.mr-setup-container.v2 {
    padding: 1.736vw 3.472vw;
}

.mr-setup-title {
    font-size: 1.852vw;
    font-weight: 500;
    font-family: var(--rubik), sans-serif;
}

.mr-setup-title.mt130 {
    margin-top: 7.523vw;
}

ul.setup-wizard-nav {
    display: flex;
    justify-content: space-evenly;
    border: solid 0.058vw #5A5AD6;
    border-radius: 3.935vw;
    height: 3.935vw;
    margin-top: 1.157vw;
    overflow: hidden;
    font-size: 0.810vw;
}

ul.setup-wizard-nav li {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.174vw 0;
    background-color: #fff;
    padding-bottom: 0.463vw;
    justify-content: space-between; 
    padding-top: 0.868vw;
    flex: auto;
}

ul.setup-wizard-nav li::after {
    content: '';
    position: absolute;
    height: 3.935vw;
    width: 1px;
    border-radius: 0.058vw;
    background-color: #f3f3f3;
    top: 0;
    right: 0;
}

ul.setup-wizard-nav li.last::after,
ul.setup-wizard-nav li:last-child::after {
    all: unset;
}

ul.setup-wizard-nav li.active,
ul.setup-wizard-nav li.active:hover {
    background-color: var(--CouplePurple);
    color: #fff;
}

ul.setup-wizard-nav li.active.done {
    color: #F9C701;
}

ul.setup-wizard-nav li:hover {
    color: #fff;
    background-color: var(--CouplePurple);
}

ul.setup-wizard-nav li svg {
    fill: #444;
}

ul.setup-wizard-nav li:hover svg {
    fill: #fff;
}

.setup-wizard-content {
    margin: 1.852vw 0 0 0;
}

.setup-wizard-content li {
    flex-direction: column;
    align-items: center;
    display: none;
}

.setup-wizard-content li.show {
    display: flex;
}

.sw-video-settings-wrapper {
    width: 38%;
    aspect-ratio: 4 / 3;
    /*background-color: #30363e;*/
    margin-top: 1.389vw;
    position: relative;
    border-radius: 0.579vw;
    overflow: hidden;
}

#couple-testvideo, 
#couple-testvideo video {
    width: 100%;
    height: 100%;
}

.silhouette::after,
.mr-lobby-user.innerPerformer::after,
.mr-lobby-user.innerParticipantContainer::after,
.bs-video-settings::after,
.sw-video-settings-wrapper::after,
#local-media:not(.mr-room-video-square)::after
{
    content: '';
    position: absolute;
    width: 95%;
    height: 95%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background: url(../img/silhouette.svg) no-repeat;
    background-size: contain;
    background-position: center bottom;
    z-index: 1;
}

.no-silhouette::after {
    content: none !important;
}

.subtitle-type-1 {
    font-family: var(--nunito), sans-serif;
    margin: 0.463vw 0 1.157vw 0;
    font-size: 0.926vw;
}

.subtitle-type-1.v2 {
    margin: 1.157vw 0;
}

.sw-grid-1 {
    width: 100%;
    display: grid;
    grid-template-columns: 63% 33%;
    gap: 1.157vw 4%;
}

.sw-grid-2 {
    width: 100%;
    display: grid;
    grid-template-columns: 46% 23% 23%;
    gap: 1.157vw 4%;
}

.sw-grid-3 {
    width: 100%;
    display: grid;
    grid-template-columns: 46% 46%;
    gap: 1.157vw 4%;
}

.mr-setup-btm-txt-v2 {
    width: 100%;
    padding: 0 3.472vw;
    font-size: 1.042vw;
    text-align: center;
    display: table;
    line-height: 1.3;
    font-weight: 400;
    margin-top: 25px;
}

.mr-setup-btm-txt {
    width: 100%;
    padding: 0 3.472vw;
    position: absolute;
    bottom: 3.241vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.042vw;
}

.mr-setup-btm-txt.plr30 {
    padding: 0 1.736vw;
}

.mr-setup-btm-txt.end {
    align-self: end;
}

.mr-setup-btm-txt.center {
    align-self: center;
}

.mr-setup-btm-txt.row5 {
    grid-row: 5;
}

.mr-setup-subtitle {
    font-family: var(--nunito), sans-serif;
    font-size: 1.389vw;
    font-weight: 700;
}

.mr-setup-subtitle.v2 {
    font-weight: normal;
    font-size: 1.157vw;
}

/* Tooltips */
.tooltip {
    position: absolute;
    width: 14.468vw;
    height: 6.019vw;
    background-image: linear-gradient(112deg, rgba(58, 58, 58, 0.75) 1%, rgba(18, 18, 18, 0.85) 99%);
    color: #fff;
    font-size: 0.926vw;
    line-height: 1.25;
    font-family: var(--nunito), sans-serif;
    padding: 0.694vw 0.868vw;
    display: none;
    z-index: 10;
}

.tooltip.show {
    display: block;
}

.tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip.fixed {
    width: 250px;
    height: 104px;
    border-radius: 10px;
    font-size: 16px;
    padding: 12px 15px;
}

.tooltip.pos1 {
    right: -14px;
    transform: translateX(100%);
    top: 18px;
    border-top-left-radius: 0;
}

.tooltip.pos1::after {
    right: 100%;
    top: 0;
    border-top: 20px solid rgba(58, 58, 58, 0.75);
	border-left: 10px solid transparent;
}

.tooltip.pos2 {
    right: -14px;
    top: unset;
    bottom: 10px;
    transform: translate(100%, 100%);
    border-top-left-radius: 0;
}

.tooltip.pos2::after {
    right: 100%;
    top: 0;
    border-top: 20px solid rgba(58, 58, 58, 0.75);
	border-left: 10px solid transparent;
}

.tooltip.pos3 {
    right: 10px;
    bottom: -20px;
    transform: translate(0, 100%);
    border-top-right-radius: 0;
}

.tooltip.pos3::after {
    right: 0;
    top: -10px;
    border-bottom: 10px solid rgba(18, 18, 18, 0.85);
    border-left: 20px solid transparent;
}

.tooltip.pos3 {
    right: 10px;
    bottom: -20px;
    transform: translate(0, 100%);
    border-bottom-right-radius: 0;
}

.tooltip.pos3::after {
    right: 0;
    top: -10px;
    border-bottom: 10px solid rgba(18, 18, 18, 0.85);
    border-left: 20px solid transparent;
}

.tooltip.pos4 {
    right: 20px;
    bottom: 50px;
    border-bottom-right-radius: 0;
}

.tooltip.pos4::after {
    right: 0;
    bottom: -10px;
    border-top: 10px solid rgba(18, 18, 18, 0.85);
    border-left: 20px solid transparent;
}

.tooltip b {
    font-family: var(--rubik), sans-serif;
    font-size: 1.042vw;
    font-weight: 600;
    display: block;
}

.tooltip.fixed b {
    font-size: 18px;
    margin-bottom: 4px;
}

.tooltip-close {
    cursor: pointer;
    position: absolute;
    font-weight: 600;
    top: 0.405vw;
    right: 0.405vw;
}

.pos3 .tooltip-close,
.pos31 .tooltip-close {
    top: 30px; 
    right: 10px;
    
}

.tooltip.fixed .tooltip-close {
    top: 7px;
    right: 7px;
}

/*Background-tooltips*/

.tooltip-bg {
    position: absolute;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    font-family: var(--nunito), sans-serif;
    display: none;
    z-index: 10;
}

.tooltip-bg.show {
    display: block;
}

.tooltip-bg.leftArrow {
    width: 15.509vw;
    height: 6.019vw;
    background: url('../img/tooltip-left.svg') top left no-repeat;
    background-size: 15.509vw auto;
    padding: 0.694vw 0.868vw 0.694vw 1.447vw;
}

.tooltip-bg.topLeftArrow {
    width: 14.005vw;
    height: 7.870vw;
    background: url('../img/tooltip-tall-top.svg') top left no-repeat;
    background-size: 14.005vw auto;
    padding: 1.331vw 0.476vw 0.694vw 0.926vw;
}

.tooltip-bg.leftArrow-v2 {
    width: 197px; 
    height: 66px;
    display: flex;
    align-items: center;
    background: url('../img/tooltip-left-v2.svg') top left no-repeat;
    background-size: 100% auto;
    padding: 12px 15px 12px 25px;
    bottom: 0;
    left: 316px;
    font-size: 12px;
    line-height: 1.3;
}

@media only screen and (max-width: 1300px) {
    .tooltip-bg.leftArrow-v2  {
        left: 238px;
    }
}

.tooltip-bg.leftArrow-v2 .tooltip-close {
    top: 11px;
    right: 11px;
}


.tooltip-bg.leftArrow-v3 {
    width: 229px; 
    height: 77px;
    display: flex;
    align-items: center;
    background: url('../img/tooltip-left-v2.svg') top left no-repeat;
    background-size: 100% auto;
    padding: 12px 15px 12px 25px;
    bottom: 0;
    left: 100%;
    font-size: 12px;
    line-height: 1.3;
}

@media only screen and (max-width: 1300px) {
    .tooltip-bg.leftArrow-v3 {
        /* left: 100%; */
    }
}

.tooltip-bg.leftArrow-v3 .tooltip-close {
    top: 11px;
    right: 11px;
}

.tooltip-bg.topArrow {
    width: 233px; 
    height: 140px;
    background: url('../img/tooltip_top-center-arrow.svg') top left no-repeat;
    background-size: 233px auto;
    padding: 40px 16px 12px 16px;
}

.tooltip-bg.downArrow {
    width: 14.005vw;
    height: 6.597vw;
    background: url('../img/tooltip-btm.svg') top left no-repeat;
    background-size: 14.005vw auto;
    padding: 0.694vw 0.926vw 0 0.926vw;
}

.tooltip-bg.bottomArrowR {
    width: 12.14vw; /* 233px at 1920 viewport */
    aspect-ratio: 233 / 140;
    background: url('../img/tooltip_bottom-center-arrow.svg') top left no-repeat;
    background-size: 12.14vw auto; /* 233px at 1920 viewport */
    padding: 1.35vw 0.83vw 12px 16px; /* 22px 16px 12px 16px at 1920 viewport */
    font-size: 0.729167vw; /* 14px at 1920 viewport*/
    line-height: 1.3;
    display: block;
}

.tooltip-bg.pos1 {
    right: -4px;
    transform: translateX(100%);
    top: 18px;
}

.tooltip-bg.pos2 {
    right: -4px;
    top: unset;
    bottom: 10px;
    transform: translate(100%, 100%);
}

.tooltip-bg.pos21 {
    left: -15.342vw;
    top: -0.442vw;
    bottom: unset;
    transform: translate(100%, 100%);
}

.tooltip-bg.pos3 {
    right: 10px;
    bottom: -20px;
    transform: translate(0, 100%);
}

.tooltip-bg.pos31 {
    right: 50%;
    bottom: -1.5vh;
    transform: translate(50%, 100%);
}


@media only screen and (min-height: 721px) {
    .tooltip-bg.pos31 {
        bottom: -2.1vh;
    }
}

.tooltip-bg.pos4 {
    right: 20px;
    bottom: 40px;
    border-bottom-right-radius: 0;
}

.tooltip-bg.pos5 {
    right: 50%;
    top: -6%;
    transform: translate(50%, -100%);
}

.tooltip-bg b {
    font-size: 14px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

img.game-winner {
    width: 8.102vw;
    margin-bottom: 2.315vw;
    margin-top: 0.579vw;
}

@media only screen and (min-width: 1920px) {
    img.game-winner {
        width: 140px;
        margin-bottom: 20px;
        margin-top: 10px;
    }
}

img.game-lose {
    width: 8.102vw;
    margin-bottom: 1.157vw;
    margin-top: 0.579vw;
}

@media only screen and (min-width: 1920px) {
    img.game-lose {
        width: 140px;
        margin-bottom: 20px;
        margin-top: 10px;
    }
}

/*Chat statuses notifications*/

.status {
    position: absolute;
    bottom: -2px;
    right: -8px;
    width: 14px;
    height: 14px;
    display: flex;
    z-index: 1;
    border-radius: 100%;
    border: 1px solid #f1f1f1;
}

.status.chat {
    position: relative;
    bottom: unset;
    right: unset;
}

.status.red {
   background-color: #bf0505;
}

.status.green {
   background-color: #60bd4f;
}

.status.yellow {
   background-color: #ebba2d;
}

/* Status closed */
.status > i {
    position: absolute;
    top: 7px;
    /* right: 120px; */
    right: 56px;
    font-size: 16px;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    font-style: normal;
    background-image: linear-gradient(107deg, rgba(58, 58, 58, 0.75) 1%, rgba(18, 18, 18, 0.85) 100%);
    padding: 2px 8px;
    border-radius: 10px 0 10px 10px;
    transform: translateX(90%) scale(0);
    transition: all 0.3s ease-in;
    transform-origin: top right;
}

.status.green > i {
    position: absolute;
    top: 7px;
    /* right: 95px; */
    right: 54px;
    font-size: 16px;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    font-style: normal;
    background-image: linear-gradient(107deg, rgba(58, 58, 58, 0.75) 1%, rgba(18, 18, 18, 0.85) 100%);
    padding: 2px 8px;
    border-radius: 10px 0 10px 10px;
    transform: translateX(90%) scale(0);
    transition: all 0.3s ease-in;
    transform-origin: top right;
}

.status.green > i::after {
    content: '';
    position: absolute;
    top: 0;
    /* left: 79px; */
    left: 36px;
    width: 0;
    height: 0;
    /* border-top: 10px solid rgba(58, 58, 58, 0.75); */
    border-top: 10px solid rgba(18, 18, 18, 0.75);
    border-right: 10px solid transparent;
    z-index: -1;
}

/* just for dating */
.status.green.dating > i::after {
    left: 64px;
}

.status.yellow > i {
    position: absolute;
    top: 7px;
    /* right: 79px; */
    right: 60px;
    font-size: 16px;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    font-style: normal;
    background-image: linear-gradient(107deg, rgba(58, 58, 58, 0.75) 1%, rgba(18, 18, 18, 0.85) 100%);
    padding: 2px 8px;
    border-radius: 10px 0 10px 10px;
    transform: translateX(90%) scale(0);
    transition: all 0.3s ease-in;
    transform-origin: top right;
}

.status.yellow > i::after {
    content: '';
    position: absolute;
    top: 0;
    /* left: 64px; */
    left: 49px;
    width: 0;
    height: 0;
    /* border-top: 10px solid rgba(58, 58, 58, 0.75); */
    border-top: 10px solid rgba(18, 18, 18, 0.75);
    border-right: 10px solid transparent;
    z-index: -1;
}

.status > i::after {
    content: '';
    position: absolute;
    top: 0;
    /* left: 113px; */
    left: 38px;
    width: 0;
    height: 0;
    /* border-top: 10px solid rgba(58, 58, 58, 0.75); */
    border-top: 10px solid rgba(18, 18, 18, 0.75);
    border-right: 10px solid transparent;
    z-index: -1;
}

.status:hover i {
    transform: translateX(90%) scale(1);
    transition-delay: 0.7s;
}

/* END Status closed */

/* Status expand */

.mr-right-nav.expand .status > i {
    position: absolute;
    top: 7px;
    right: -20px;
    font-size: 16px;
    color: #fff;
    font-family: var(--nunito), sans-serif;
    font-style: normal;
    background-image: linear-gradient(107deg, rgba(58, 58, 58, 0.75) 1%, rgba(18, 18, 18, 0.85) 100%);
    padding: 2px 8px;
    border-radius: 0 10px 10px 10px;
    transform: translateX(90%) scale(0);
    transition: all 0.3s ease-in;
    transform-origin: top left;
}

.mr-right-nav.expand .status > i::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid rgba(58, 58, 58, 0.75);
    border-left: 10px solid transparent;
    z-index: -1;
}

.mr-right-nav.expand .status:hover i {
    transform: translateX(90%) scale(1);
    transition-delay: 0.7s;
}

/* END Status expand */
.status.chat i {
    position: relative;
    top: unset;
    right: unset;
    color: #252e3a;
    font-family: var(--rubik), sans-serif;
    background-image: unset;
    padding: 0 0 0 20px;
    border-radius: unset;
    transform: unset;
    line-height: 0.7;
}

.status.chat > i::after, 
.status.chat:hover i {
    all: unset;
}

/* Notification for request date */

.notification-request-wrapper {
    position: fixed;
    bottom: 0.694vw;
    right: 0.694vw;
    display: none;
    z-index: 44;/*4*/
}

.notification-request-wrapper.show {
    display: block;
}

@keyframes notification-btm-in {
    0% {
        transform: translateY(110%);
    }

    50% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateY(0);
        
    }
}

@keyframes notification-btm-out {
    0% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateY(110%);
        
    }
}

.date-request {
    width: 17.361vw;
    height: 6.944vw;
    padding: 0.694vw;
    border-radius: 0.463vw;
    background-color: rgba(0, 0, 0, 0.6);
    font-family: var(--nunito), sans-serif;
    font-size: 0.810vw;
    color: #fff;
    line-height: 1.3;
    position: absolute;
    right: 0;
    bottom: 100%;
    animation-name: notification-btm-in;
    animation-duration: 1.6s;
    animation-fill-mode: forwards;
    z-index: 11;
}

.date-request.hide {
    animation-name: notification-btm-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.private-room-request-content {
    width: 20vw;
    height: 10vw;
    padding: 0.694vw;
    border-radius: 0.463vw;
    background-color: rgba(0, 0, 0, 0.6);
    font-family: var(--nunito), sans-serif;
    font-size: 0.810vw;
    color: #fff;
    line-height: 1.3;
    position: absolute;
    right: 0;
    bottom: 100%;
    animation-name: notification-btm-in;
    animation-duration: 1.6s;
    animation-fill-mode: forwards;
    z-index: 11;
    overflow-y: auto; /* Enable vertical scrolling */
  }

  .private-room-request-content.minimize {
    height: auto; /* Adjust height to fit the first h3 */
    overflow: hidden; /* Hide overflowing content */
    padding: 0.694vw; /* keep padding */
}

.private-room-request-content.minimize > *:not(h3:first-of-type) {
    display: none; /* Hide all elements except the first h3 */
}

.private-room-request-content.minimize {
  max-height: 2em; /* optional: set max height to keep only one line of h3 */
}
  
  .private-room-request-content h3 {
    margin-bottom: 0.5vw;
    font-size: 1vw; /* Adjust heading size if needed */
  }
  
  .request-list {
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
  }
  
  .request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5vw 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional: Add separators */
  }
  
  .request-name {
    flex-grow: 1; /* Allow name to take up available space */
  }
  
  .approve-btn,
  .deny-btn {
    padding: 0.3vw 0.6vw;
    font-size: 0.7vw;
    border: none;
    border-radius: 0.3vw;
    cursor: pointer;
    margin-left: 0.3vw; /* Add spacing between buttons */
  }
  
  .approve-btn {
    background-color: #4CAF50; /* Green */
    color: white;
  }
  
  .approve-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  .deny-btn {
    background-color: #f44336; /* Red */
    color: white;
  }

.private-room-request-content.hide {
    animation-name: notification-btm-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.date-request.rmv {
    animation-name: notification-btm-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.dr-data {
    display: grid;
    grid-template-columns: 4.167vw 1fr;
    gap: 0 0.694vw;
    align-content: center;
    width: 100%;
    height: 100%;
}

.dr-data p a {
    color: #fff;
    text-decoration: none;
}

.dr-data p a:hover {
    text-decoration: none;
}

.date-request img {
    grid-row: span 2;
    align-self: center;
    width: 100%;
}

/* END Notification for request date */

/* Video for begin date */

.date-request img {
    grid-row: span 2;
    align-self: center;
    width: 100%;
}

.performance-room {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-rows: minmax(0, 49.559vh) minmax(0, 11.12vh) minmax(0, 11.12vh) minmax(0, 11.12vh);
    grid-gap: 1px 1px;
    align-content: start;
    grid-template-columns: repeat(6, 1fr);
    font-size: 100%;
}

/* 4 rows */
.performance-room.v2 {
    grid-template-rows: minmax(0, 45.016vh) minmax(0, 11vh) minmax(0, 11vh) minmax(0, 11vh) minmax(0, 11vh);
}

@-moz-document url-prefix() {
    .performance-room {
        width: 55.5vw;
    }
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
    .performance-room {
        width: 55.5vw;
    }
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .performance-room {
        height: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (aspect-ratio: 3/4) {
    .mr-lobby-user {
        aspect-ratio: unset;
    }

    .mr-lobby-user.speaker {
        aspect-ratio: 4/3;
    }
}

.performer-container {
    aspect-ratio: 16 / 9;
    background-color: #30363e;
    grid-column: span 6;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.performer-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pc-tag {
    z-index: 10;
    padding: 3px 10px 3px 10px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
    border-bottom-left-radius: 8px;
    font-size: max(14px, 18px);
    font-weight: 600;
    font-family: var(--nunito), sans-serif;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.submenu-flyout-1 {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0 14px;
    align-items: center;
    padding: 14px 20px 38px 18px;
}

.submenu-flyout-1 .f20 {
    font-size: 20px;
    font-weight: 700;
    display: block;
}

.submenu-flyout-2 {
    display: flex;
    gap: 0 12px;
    padding: 0 18px 20px 18px;
    text-align: center;
}

.sf-2-box {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px 0;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 19px;
}

button.button-H32 {
    height: 42px;
    width: 163px;
    background-color: #fff;
    border-radius: 200px;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--rubik), sans-serif;
    font-size: 16px;
    transition: all 0.3s ease-in;
    border: 2px solid var(--CouplePurple);
    color: var(--CouplePurple);
}

button.button-H32:hover {
    background-color: var(--CouplePurple);
    border: 2px solid var(--CouplePurple);
    color: #fff;
}

button.button-H32:focus {
    background-color: var(--CouplePurple);
    border-color: var(--CouplePurple);
    color: #fff;
    font-weight: 500;
}

button.button-H32.disabled {
    cursor: not-allowed;
    background-color: #F3F5F9;
    border: 2px solid #E8ECF2;
    color: rgba(193, 199, 207, 0.93);
}


button.button-H32.toCenter {
    margin-left: auto;
    margin-right: auto;
}

button.button-H32.mt8 {
    margin-top: 8px;
}


.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    animation-name: background-blur;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.page-overlay.hide {
    display: none;
}

@keyframes background-blur {
    0% {
        background: rgba(0,0,0,0.2);
        backdrop-filter: blur(1px);
    }
    33% {
        backdrop-filter: blur(1px);
    }
    66% {
        backdrop-filter: blur(4px);
    }
    100% {
        background: rgba(0,0,0,0.9);
        backdrop-filter: blur(8px);
    }
}

.page-overlay-countdown,
.countdown {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.page-overlay-countdown span,
.countdown span {
    color: #fff;
    font-family: var(--rubik), sans-serif;
    font-size: 40vw;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    transition: all 1.5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: numberanim 3s ease;
}

.page-overlay-countdown span:nth-of-type(1),
.countdown span:nth-of-type(1) {
    animation-delay: 0s;
}

.page-overlay-countdown span:nth-of-type(2),
.countdown span:nth-of-type(2) {
    animation-delay: 1s;
}

.page-overlay-countdown span:nth-of-type(3),
.countdown span:nth-of-type(3) {
    animation-delay: 2s;
}

#countdown2 button#tiles {
	justify-content: center;
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
}

@keyframes numberanim {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.countdown.hide {
    display: none;
}

.page-overlay-video {
    position: absolute;
    top: 0;
    left: 0;
}

.page-overlay-video.hide {
    display: none;
}

.page-overlay-video video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.3s ease-in;
    object-fit: cover;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* END Video for begin date */

/* PERFORMANCE ROOM */

.performance-room {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-rows: minmax(0, 49.559vh) minmax(0, 11.12vh) minmax(0, 11.12vh) minmax(0, 11.12vh);
    grid-gap: 1px 1px;
    align-content: start;
    grid-template-columns: repeat(6, 1fr);
    font-size: 100%;
}

/* 4 rows */
.performance-room.v2 {
    grid-template-rows: minmax(0, 45.016vh) minmax(0, 11vh) minmax(0, 11vh) minmax(0, 11vh) minmax(0, 11vh);
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .performance-room {
        height: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (min-aspect-ratio: 3/4) {
    .performance-room .mr-lobby-user {
        aspect-ratio: unset;
    }

    .performance-room .mr-lobby-user.speaker {
        aspect-ratio: 4/3
    }
}

@-moz-document url-prefix() {
    .performance-room {
        width: 55.5vw;
    }
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
    .performance-room {
        width: 55.5vw;
    }
}

@media all and (display-mode: fullscreen) {
    .performance-room.noGrid {
        grid-template-rows: auto;
    }
}

.performer-container {
    aspect-ratio: 16 / 9;
    background-color: #30363e;
    grid-column: span 6;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.pc-tag {
    z-index: 10;
    padding: 3px 10px 3px 10px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
    border-bottom-left-radius: 8px;
    font-size: max(14px, 18px);
    font-weight: 600;
    font-family: var(--nunito), sans-serif;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.submenu-flyout-1 .f28 {
    font-size: 28px;
    font-weight: bold;
    font-style: italic;
    display: block;
}

.submenu-flyout-3 {
    height: 190px;
    display: grid;
    padding: 6px 23px 0 23px;
    gap: 20px 0;
    align-content: start;
}

.submenu-flyout-3 .f28 {
    font-size: 28px;
    font-weight: bold;
    font-style: italic;
    display: block;
}

.submenu-flyout-2 {
    display: flex;
    gap: 0 36px;
    padding: 0 50px 20px 40px;
    text-align: center;
}

.submenu-flyout-2-balcony {
    display: flex;
    gap: 0 36px;
    padding: 0 18px 20px 18px;
    justify-content: center;
    text-align: center;
}

.sf-2-box {
    position: relative;
    display: grid;
    justify-items: center;
    line-height: 1.33;
    gap: 6px 0; 
}

.temp-interaction {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-20%, -50%);
    color: #fff;
}

.audio-audience {
    width: 16.204vw;
    height: 3.009vw;
    border-radius: 0.694vw;
    background-color: var(--CoupleBlue500);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 1.852vw;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-transform: uppercase;
    font-family: var(--rubik), sans-serif;
    font-size: 1.389vw;
    font-weight: 500;
    cursor: pointer;
}

.audio-audience span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.audio-audience span svg {
    width: 1.389vw;
    height: 1.389vw;
}

.audio-audience span.hide {
    display: none;
}

button.mute-unmute-audience {
    border: 0;
    width: 3.704vw;
    height: 3.704vw;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.6);;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0.694vw;
    left: 0.694vw;
    color: #fff;
    text-transform: uppercase;
    font-family: var(--rubik), sans-serif;
    font-size: 1.389vw;
    font-weight: 500;
    cursor: pointer;
}

.mute-unmute-performer,
.mute-unmute-audience {
    border: 0;
    cursor: pointer;
    width: 3.704vw;
    height: 3.704vw;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0.694vw;
    left: 0.694vw;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23x6lb8h36la)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.8 18.42c.773 0 1.4.619 1.4 1.382 0 5.079-3.805 9.28-8.752 9.974l-.002 3.458h8.371a1.383 1.383 0 1 1 0 2.766H10.183a1.383 1.383 0 1 1 0-2.765l8.463-.001v-3.445c-4.993-.654-8.846-4.876-8.846-9.987 0-.763.627-1.382 1.4-1.382.773 0 1.4.619 1.4 1.382 0 4.037 3.313 7.31 7.4 7.31s7.4-3.273 7.4-7.31c0-.763.627-1.382 1.4-1.382zM20 4c2.8 0 5.12 2.055 5.534 4.74h-4.546a.988.988 0 0 0-.146 1.965l.146.011H25.6v3.16h-4.612a.988.988 0 0 0-.977.842l-.011.146c0 .496.366.907.842.977l.146.01H25.6v3.16l-4.612.001a.988.988 0 0 0-.977.842L20 20c0 .496.366.906.842.977l.146.01 4.47.001A5.602 5.602 0 0 1 14.4 19.733V9.6A5.6 5.6 0 0 1 20 4z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='x6lb8h36la'%3E%3Cpath fill='%23fff' transform='translate(.8 .8)' d='M0 0h38.4v38.4H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: 2.199vw auto;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 15px;
}

.mute-unmute-performer.unmute,
.mute-unmute-audience.unmute  {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.35 13.815c.57 0 1.034.464 1.034 1.037a7.552 7.552 0 0 1-6.47 7.48v2.593h6.172a1.037 1.037 0 0 1 0 2.075H7.603l-.088-.006 2.04-2.069h4.289v-2.584a7.481 7.481 0 0 1-1.417-.33l1.7-1.724a5.476 5.476 0 0 0 6.188-5.435c0-.573.463-1.037 1.034-1.037zm4.104-9.264c.42.426.458 1.093.114 1.563l-.114.135L6.219 25.765a1.17 1.17 0 0 1-1.672 0 1.213 1.213 0 0 1-.115-1.563l.115-.134L23.78 4.55a1.17 1.17 0 0 1 1.673 0zm-6.564 11.19a4.143 4.143 0 0 1-3.452 3.217l3.168-3.218.284.001zM8.34 13.815c.571 0 1.034.464 1.034 1.037 0 .538.078 1.057.222 1.549l-1.598 1.62a7.54 7.54 0 0 1-.693-3.17c0-.572.463-1.036 1.035-1.036zM14.844 3a4.14 4.14 0 0 1 4.099 3.555h-3.358a.74.74 0 0 0-.11 1.474l.11.008h2.252l-2.343 2.378-.03.002a.741.741 0 0 0-.612.622l-.003.029-4.125 4.187a4.19 4.19 0 0 1-.019-.394V7.139A4.14 4.14 0 0 1 14.845 3z' fill='%23E63E29'/%3E%3C/svg%3E");
    background-size: 2.199vw auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.user-mute {
    display: none;
    border: 0;
    width: 3.704vw;
    height: 3.704vw;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23x6lb8h36la)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.8 18.42c.773 0 1.4.619 1.4 1.382 0 5.079-3.805 9.28-8.752 9.974l-.002 3.458h8.371a1.383 1.383 0 1 1 0 2.766H10.183a1.383 1.383 0 1 1 0-2.765l8.463-.001v-3.445c-4.993-.654-8.846-4.876-8.846-9.987 0-.763.627-1.382 1.4-1.382.773 0 1.4.619 1.4 1.382 0 4.037 3.313 7.31 7.4 7.31s7.4-3.273 7.4-7.31c0-.763.627-1.382 1.4-1.382zM20 4c2.8 0 5.12 2.055 5.534 4.74h-4.546a.988.988 0 0 0-.146 1.965l.146.011H25.6v3.16h-4.612a.988.988 0 0 0-.977.842l-.011.146c0 .496.366.907.842.977l.146.01H25.6v3.16l-4.612.001a.988.988 0 0 0-.977.842L20 20c0 .496.366.906.842.977l.146.01 4.47.001A5.602 5.602 0 0 1 14.4 19.733V9.6A5.6 5.6 0 0 1 20 4z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='x6lb8h36la'%3E%3Cpath fill='%23fff' transform='translate(.8 .8)' d='M0 0h38.4v38.4H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: 2.199vw auto;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    transition: all 0.3s ease-in;
    z-index: 11;
}

.user-mute.muted {
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.35 13.815c.57 0 1.034.464 1.034 1.037a7.552 7.552 0 0 1-6.47 7.48v2.593h6.172a1.037 1.037 0 0 1 0 2.075H7.603l-.088-.006 2.04-2.069h4.289v-2.584a7.481 7.481 0 0 1-1.417-.33l1.7-1.724a5.476 5.476 0 0 0 6.188-5.435c0-.573.463-1.037 1.034-1.037zm4.104-9.264c.42.426.458 1.093.114 1.563l-.114.135L6.219 25.765a1.17 1.17 0 0 1-1.672 0 1.213 1.213 0 0 1-.115-1.563l.115-.134L23.78 4.55a1.17 1.17 0 0 1 1.673 0zm-6.564 11.19a4.143 4.143 0 0 1-3.452 3.217l3.168-3.218.284.001zM8.34 13.815c.571 0 1.034.464 1.034 1.037 0 .538.078 1.057.222 1.549l-1.598 1.62a7.54 7.54 0 0 1-.693-3.17c0-.572.463-1.036 1.035-1.036zM14.844 3a4.14 4.14 0 0 1 4.099 3.555h-3.358a.74.74 0 0 0-.11 1.474l.11.008h2.252l-2.343 2.378-.03.002a.741.741 0 0 0-.612.622l-.003.029-4.125 4.187a4.19 4.19 0 0 1-.019-.394V7.139A4.14 4.14 0 0 1 14.845 3z' fill='%23E63E29'/%3E%3C/svg%3E");
    top: 0.694vw;
    left: 0.694vw;
    transform: none;
    width: 2.778vw;
    height: 2.778vw;
}

.user-mute.unmuted {
    display: block;
}

/* Bottom settings */

.bottom-settings-wrapper {
    height: 7.5vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 35;
    min-width: 45vw;
}

/*.mr-interstitial-wrapper#boot-report {
    height: calc(100% - 14.5vh);
}

.mr-interstitial-wrapper.inDating#boot-report {
    height: calc(100% - 24vh);
}*/

@media (min-aspect-ratio: 16/9) {
    .bottom-settings-wrapper {
        height: 8.5vh;
    }

    .modal-container.show {
        height: calc(100% - 8.7vh);
    }

    /*.mr-interstitial-wrapper#boot-report {
        max-height: calc(100% - 13vh);
    }

    .mr-interstitial-wrapper.inDating#boot-report {
        height: calc(100% - 21vh);
    }*/
}

@media (min-aspect-ratio: 21/9) {
    .bottom-settings-wrapper {
        height: 10vh;
    }

    .modal-container.show {
        height: calc(100% - 10.2vh);
    }

    /*.mr-interstitial-wrapper#boot-report {
        max-height: calc(100% - 15.3vh);
    }

    .mr-interstitial-wrapper.inDating#boot-report {
        height: calc(100% - 21vh);
    }*/
}

.bottom-settings-wrapper.v2 {
    position: relative;
    transform: none;
    left: unset;
    bottom: unset;
    grid-row: 2;
    grid-column: 2/3;
    margin-top: 10px;
}

.bottom-settings-wrapper:has(.min) {
    z-index: 1;
}

.bottom-settings {
    width: 100%;
    border-radius: 0.926vw;
    background-color: rgba(10, 10, 12, 0.75);
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in;
}

.bottom-settings-wrapper.v2 .bottom-settings {
    position: relative;
    bottom: 0;
}

.bottom-settings.min {
    width: 4.340vw;
    height: 2.778vw;
    overflow: hidden;
    bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bottom-settings.min .bs-mic {
    font-size: 0;
    height: 0;
    padding: 0;
}

.bottom-settings.min .bs-mic {
    display: none;
    font-size: 0;
    height: 0;
    padding: 0;
}

.bottom-settings .bs-mic svg.micOffSvg {
    display: none;
}

.bottom-settings .bs-mic svg.micOnSvg {
    display: block;
}

.bottom-settings .bs-mic.off svg.micOffSvg {
    display: block;
    width: 2.6em;
    margin-left: -0.0626em;
    top: -0.21em;
}

.bottom-settings .bs-mic.off svg.micOnSvg {
    display: none;
}

.bottom-settings .bs-mic .micOn {
    display: block;
}

.bottom-settings .bs-mic .micOff.hide {
    display: none;
}

.bottom-settings .bs-mic.off .micOn {
    display: none;
}

.bottom-settings .bs-mic.off .micOff {
    display: block;
}

.bs-mic:hover,
.bs-mic.active,
.bs-mic.active svg {
    color: #fff;
}

.bs-mic[disabled=true] svg {
    filter: grayscale(1);
}

ul.bs-list {
    z-index: 5;
    display: flex;
    font-family: var(--nunito), sans-serif;
    transition: all 0.5s ease-in;
    font-size: 0.694vw;
    justify-content: center;
    gap: 3.33em;
    width: 100%;
}

.mbs-list.show {
    right: 0;
}

.bottom-settings.min ul.bs-list {
    transform: scale(0);
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.bs-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    padding: 1.16em 0 1.083em 0;
    cursor: pointer;
    transition: all 0.1s ease-in;
    color: #fff;
    line-height: 0.7;
    gap: 0.83em 0;
}

ul.bs-list li:hover,
ul.bs-list li.on {
    color: #fff;
}

ul.bs-list li:last-child::after {
    all: unset;
}

.bottom-settings .bs-mic {
    cursor: pointer;
    margin-left: 1.25em;
    width: 5.3em;
    gap: unset;
}

/* POT GOAL */
.bottom-settings .bs-activity {
    cursor: pointer;
    width: 5.3em; 
    margin-right: 1.25em; 
    gap: 0.29vw 0; /* 5px */
    line-height: 0.7;
    transition: all 0.1s ease-in;
}

.bs-activity svg {
    width: 1.04vw; /* 18px */
    transition: all 0.1s ease-in; 
} 

.bottom-settings .bs-activity.hasActivity {
    color: #FAAE10;
    fill: #FAAE10;
}

.bottom-settings .bs-activity.hasActivity svg  {
    color: #FAAE10;
    fill: #FAAE10;
    transform: scale(1.4);
    transform-origin: bottom;
} 

.bottom-settings .bs-activity.addRedPot svg{
    color: #55509C;
    fill: #55509C;
    stroke: #55509C;
}

.bottom-settings .bs-activity .coinPolAmount.addRedPot {
    color: #55509C;
}
/* POT GOAL FINAL*/

/* .bottom-settings .bs-activity {
    cursor: pointer;
    line-height: 0.7;
    width: 5.3em;
    margin-right: 1.25em;
    gap: unset;
}

.bs-activity .w24 {
    width: 2em;
    margin: 0 auto;
}

.bs-activity .w31 {
    width: 2.583em;
}

.bs-activity .actSvgOn {
    display: block;
    justify-self: start;
}

.bs-activity.off .actSvgOn {
    display: none;
}

.bs-activity .actSvgOff {
    display: none;
    justify-self: start;
    margin-top: -0.33em;
    margin-left: 0.25em;
}

.bs-activity.off .actSvgOff {
    display: block;
}

.bs-activity .actOff {
    display: none;
    align-self: start;
    margin-top: auto;
}

.bs-activity.off .actOff {
    display: block;
}

.bs-activity .actOn {
    display: block;
    align-self: start;
    margin-top: auto;
}

.bs-activity.off .actOn {
    display: none;
} */

.bs-list-extension {
    all: unset;
    position: absolute;
    bottom: calc(100% + 0.579vw);
    box-sizing: border-box;
    width: 17.361vw;
    padding: 1.157vw;
    border-radius: 0.231vw;
    box-shadow: 0.231vw -0.231vw 0.579vw 0 rgba(0, 0, 0, 0.25);
    background-color: rgba(34, 32, 52, 0.98);
    display: none;
    flex-direction: column;
    gap: 0.521vw;
    align-items: center;
}

.bs-list-extension.show {
    display: flex;
}

.bs-list-extension select.sel-type-1 {
    border-color: #fff;
    color: #fff;
    padding: 5px 4%;
    background: transparent url(../img/arrow_down_light_grey.svg) no-repeat right 5% center;
    font-size: 0.694vw;
    height: auto;
    background-size: auto 20%;
}

.bs-list-extension select.sel-type-1 option {
    background-color: rgba(34, 32, 52, 0.98) !important;
    color: #fff;
}

.bs-list-extension button.blue-btn:not(:disabled),
.bs-list-extension button.blue-btn:not([disabled]) {
    color: rgba(255, 255, 255, 0.87);
}

.bs-list-extension button.blue-btn:not(:disabled):hover {
    background-color: var(--CouplePurple);
}

.bs-list-extension button.blue-btn.v2.confirm-video-ev {
    width: 40%;
}

.bs-list-extension .title-type-1 {
    color: #fff;
    font-size: 0.694vw;
    font-weight: 700;
}

#profile-settings-wrapper .flexprf span.label-inside-lobby {
    display: contents;
}

select.sel-type-1.mb4 {
    margin-bottom: 4px;
}

select.sel-type-1.w96p {
    width: 96%;
}
select.sel-type-1.red-text-border, .field-type-1.red-text-border{
    border: 0.058vw solid #e63e29;
}
/*body ul.bs-list svg path,
body ul.bs-list svg g g path {
    fill: currentColor;
}*/

body ul.bs-list li svg,
body ul.bs-list svg g g path {
    fill: #fff;
    color: #fff;
}
body ul.bs-list li svg.mb2, body ul.bs-list svg.mb2 g g path {
    margin-bottom: 0.116vw;
}

body ul.bs-list li:hover svg,
ul.bs-list li.on svg,
body ul.bs-list li:hover svg g g path,
ul.bs-list li.on svg g g path {
    fill: #fff;
    color: #fff;
}

svg.w10 {
    width: 0.579vw;
}

svg.w13 {
    width: 0.752vw;
}

svg.w15 {
    width: 1.952vw;
}

svg.w16, img.w16 {
    width: 0.926vw;
}

svg.w18 {
    width: 1.042vw;
}

svg.w20 {
    width: 1.157vw;
}

.bs-list-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0 0.579vw;
}

.transparent-btn:hover {
    background-color: #444;
    border-color: #444;
}

button.transparent-btn:disabled {
    opacity: 0.5;
}

body button.blue-btn.v2 {
    font-size: 0.694vw;
    font-weight: normal;
}

.bottom-settings .bs-min-max {
    align-self: end;
    background: url('../img/minimize.svg') top 1.150vw right 0.868vw no-repeat;
    background-size: auto 0.868vw;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    position: absolute;
    right: 1.505vw;
    height: 100%;
    font-size: 0.694vw;
    padding: 1.16em 0 1.083em 0;
    cursor: pointer;
    transition: all 0.3s ease-in;
}

/* END Bottom settings */

/* OFF camera screens */

.swiper.hide {
    display: none;
}

.swiper.mySwiper {
    width: 490px;
    height: 525px;
    margin-top: 50px;
}

.swiper.mySwiper.v2 {
    width: 550px;
    height: 500px;
    margin-top: 50px;
}

#alert {
	background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%); 
	color: #5A5AD6;
	padding: 10px;
	border-radius: 5px;
	font-family: var(--rubik), sans-serif;
	text-align: center;
	z-index: 10;
}

#canvasGame.gameStart {
	position: absolute;
	object-fit: fill; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/img_bk_v2.jpg"); 
	background-repeat: no-repeat; 
	background-position: center;
	background-size: cover;
}

#play_button {
	display: grid;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* Center the button within canvas */
	z-index: 5;
	justify-content: center;
	align-items: center;
	justify-items: center;
}

#scores {
	z-index: 5;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 20px;
	color: white;
	padding: 5px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

#scores_high {
	z-index: 5;
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 20px;
	color: white;
	padding: 5px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

#alertEndGame {
	color: white;
	border-radius: 5px;
	font-family: var(--rubik), sans-serif;
	text-align: center;
	font-size: 24px;
    font-weight: 700;
	z-index: 10;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#alertEndGame p {
	font-size: 20px;
    font-weight: 200;
} 

.top30s {
	top: 30%;
}

#gameEndScreen,
.gameEndScreen {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 85%;
	padding: 0 45px;
}

#gameEndScreen button,
.gameEndScreen button {
	border: none; 
	background: none; 
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	font-family: var(--rubik), sans-serif;
	text-align: center;
	font-size: 24px;
    font-weight: 700;
	z-index: 10;
	position: static; 
	margin: 0 10px;	
	cursor: pointer;
}

.noTopBorder {
    border-top: none !important;
}

.noBorders {
    border: none !important;
}

.swiper.mySwiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    height: 100%;
}

.ss-inner {
    width: 380px;
    height: 475px;
    padding: 0 40px;
    background-color: #fff;
    border-radius: 22px;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25);
    font-family: var(--nunito), sans-serif;
    font-weight: 400;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px 0;
    margin-top: 15px;
    margin-bottom: 15px;
}

.ss-inner.v2 {
    font-size: 14px;
    padding: 20px 20px 0 20px;
    gap: 7px 0;
    justify-content: start;
}

.ss-inner strong {
    font-family: var(--rubik), sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: var(--CouplePurple);
}

.mr-balance.resp16 {
    font-size: 0.83vw; /* 16px at 1920px */
}

.btn-yellow {
    position: relative;
    justify-content: center;
    align-items: center;
    border: 0;
    font-family: var(--rubik), sans-serif;
    color: #6A39D2;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    height: 42px;
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    padding: 0 30px;
    margin: 0 auto 12px auto;
    border-radius: 200px;
    gap: 2px;
    transition: all 0.3s ease-in-out;
    display: flex;
    cursor: pointer;
}

.btn-yellow:disabled {
    background: #cccecd !important;
    cursor: auto;
    color: #888888 !important;
    transform: none;
}

.btn-yellow[hidden] {
    visibility: hidden;
}

button.btn-yellow.v2 {
    min-width: 200px;
    height: 40px;
    font-size: 16px;
    margin: 16px auto 10px auto;
}

#offCamera button.btn-yellow.v3 {
    margin: 16px auto 10px auto;
    padding-left: 2vw;
    padding-right: 2vw;
    min-width: max(220px, 40%);
    max-width: 100%;
    min-height: 66px;
    font-size: clamp(24px, 1.042vw, 35px);
}

/*#offCamera .sliderAiDate {
    position: relative;
}

#offCamera .sliderAiDate .ss-inner {
    z-index: 1;
    background: transparent;
    justify-content: end;
}

#offCamera .sliderAiDate .ss-inner p {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
}*/

.mr-off-camera-virtual-date {
    border-radius: 8px;
    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.75);
    height: calc(100% - 125px);
    aspect-ratio: 21/16;
    position: relative;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #5A5AD6;
    border-radius: 14px;
    outline: 14px solid #fff;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.mr-off-camera-virtual-date iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    border: 1px solid #5A5AD6;
    border-radius: 14px;
    overflow: hidden;
    background: #031428 url(../img/tavusloader.svg) no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.mr-off-camera-virtual-date .gameEndScreen {
    position: absolute;
    right: 0;
    padding: 0;
    bottom: 0;
    background: transparent;
    min-height: 60px;
    align-items: center;
}

.mr-off-camera-virtual-date .gameEndScreen button {
    background-color: #5A5AD6 /*#F9A300*/;
    border-color: #5A5AD6 /*#F9A300*/;
    color: #FFFFFF /*#6d372d*/;
    font-size: 12px;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 8px;
    font-family: var(--nunito), sans-serif;
}

#virtual-date-gender {
    background-color: #5A5AD6;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 8px 40px;
    font-weight: 700;
    text-align: center;
    font-size: clamp(18px, 1vw, 22px);
    margin: 0 0 -16px;
}

.loading-overlay-virtual-date {
    background-color: #031428;
    width: 100%;
    height: 100%;
}

.loading-overlay-virtual-date .loader:not(.error) {
    background: #031428 url(../img/tavusloader.svg) no-repeat;
    background-position: center;
    background-size: 24px 24px;
    width: 100%;
    height: 100%;
}

.loading-overlay-virtual-date .loader.error {
    animation: none;
    color: var(--error);
    -webkit-text-decoration-color: var(--error);
    -moz-text-decoration-color: var(--error);
    text-decoration-color: var(--error);
    font-size: 16px;
    width: auto;
    margin: 0 auto;
    text-align: center;
    border: none;
    padding: 32px;
    height: 100%;
    display: grid;
    vertical-align: baseline;
    align-content: center;
}

.card.default .card-content:last-of-type {
    display: none;
}

#offCamera button.btn-yellow.v3 {
    margin-bottom: 50px;
}

#offCamera .virtual-date-video {
    object-fit: cover;
    position: absolute;
    width: 82%;
    height: 97%;
    margin: 0 auto;
    top: -26px;
    bottom: 0;
    padding: 40px;
    border-radius: 63px;
}

/*.sliderAiDate .ss-inner-title {
    mix-blend-mode: plus-lighter;
    position: relative;
}

@media only screen and (max-width: 1600px) {
    #offCamera .virtual-date-video {
        width: 83.5%;
        height: 95%;
    }
}

@media only screen and (width: 1600px) {
    #offCamera .virtual-date-video {
        width: 81.5% !important;
        height: 96.5%;
    }
}

@media only screen and (max-width: 1598px) {
    #offCamera .virtual-date-video {
        width: 84%;
        height: 475px;
    }
}

@media only screen and (max-width: 1280px) and (max-height: 720px) {
    #offCamera .virtual-date-video {
        width: 80.5%;
        height: 93.5%;
    }
}*/

#countdown1 button.btn-yellow.v2 {
    margin-top: 0;
}

button.btn-yellow.v3 {
    height: 3.009vw;
    width: auto;
    font-size: 1.042vw;
    color: #6A39D2;
}

button.btn-yellow.v44 {
    height: 3.009vw;
    width: auto;
    top: 20px;
    font-size: 1.042vw;
    color: #6A39D2;
}

button.btn-yellow.v3.confirm-btn {
    min-width: 11.574vw;
}

button.btn-yellow.v3.lower {
    text-transform: none;
}

button.btn-yellow.v3.toCenter2 {
    margin: 0 auto;
}

button.btn-yellow.v3.wizard {
    text-transform: none;
}

.av-control-5 .btn-yellow.confirm-all {
    margin-top: 3vw;
}

.av-control-5 .btn-yellow.confirm-all.red {
    background: #bf0505;
    color: #fff;
}

.btn-yellow.v4 {
    width: 11.574vw;
    height: 2.55vw;
    aspect-ratio: 50 / 13;
    font-size: 0.93vw;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    margin: 1.157vw 0px 0.463vw;
    gap: 0.289vw;
    padding: unset;
} 

.btn-yellow.v4:hover {
    transform: translateX(-50%) scale(1.05);
    transform-origin: center center;
}

svg.w12 {
    width: 0.69vw;
}

svg.w15 {
    width: 0.868vw;
}

.btn-yellow.v4.details-private-room {
    width: 11.574vw; /* 200px */
    height: 2.55vw; /* 44px */
    aspect-ratio: 50/13;
    font-size: 0.93vw; /* 16px */
    justify-content: center;
    margin: 1.157vw 0 0.463vw 0; /* 20px 38px */
    gap: 0.289vw; /* 5px */
    padding: unset;
    left: 50%;
    transform: translateX(-50%);
}

.btn-yellow.v4.details-private-room:hover {
    transform: translateX(-50%) scale(1.05);
    transform-origin: center center;
}

.btn-yellow.v4.details-private-room[disabled] {
    border: 1px solid #DADFE6;
    background: #F3F5F9;
    color: #C1C7CF;
    pointer-events: none;
    cursor: not-allowed;
  }

button.btn-yellow.v5 {
    height: 3.009vw;
    width: auto;
    min-width: 11.574vw;
    font-size: 1.042vw;
    color: #6A39D2;
    text-transform: none;
    margin: 0 auto;
}

@media only screen and (min-width: 1920px) {
    button.btn-yellow.v5 {
        height: 52px; 
        min-width: 200px;
        font-size: 18px;
    }
}


button.btn-yellow.toCenter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

button.btn-yellow.mtb19 {
    margin-top: 1.1vw;
    margin-bottom: 1.1vw;
}

.ss-inner.v2 button {
    margin-top: 20px;
}

.ss-inner-title {
    font-family: var(--rubik), sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--CouplePurple);
}

.ss-inner-game-img {
    width: 100%;
    height: 196px;
    background-color: #E9ECEE;
    border-radius: 12px;
    margin-bottom: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 10vw;
}
.ss-inner-game-img img {
    border-radius: 12px;
    object-fit: cover;
}

.mySwiper .swiper-horizontal>.swiper-pagination-bullets {
    bottom: 70px;
}

.mySwiper .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 20px;
}

.mySwiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.mySwiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}

.mySwiper .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: #E9ECEE;
    opacity: 1;
}

.mySwiper .swiper-pagination-bullet-active {
    width: 16px;
    height: 16px;
    border: 4px solid #E9ECEE;
    box-sizing: border-box;
    background: var(--CouplePurple);
}

.mySwiper .swiper-button-next:after, 
.mySwiper .swiper-button-prev:after {
    all: unset;
}

.mySwiper .swiper-button-next, 
.mySwiper .swiper-button-prev {
    width: 30px;
    height: 33px;
}

.mySwiper .swiper-button-next {
    background: url(../img/arrow-next-white.svg) 0 0 no-repeat;
    background-size: cover;
}

.mySwiper .swiper-button-prev {
    background: url(../img/arrow-prev-white.svg) 0 0 no-repeat;
    background-size: cover;
}

.mySwiper .swiper-button-next.swiper-button-disabled, 
.mySwiper .swiper-button-prev.swiper-button-disabled {
    opacity: 0.2;
}

/* END OFF camera screens */

/* Virtual gifts cards received */

.swiper.mySwiper2 {
    width: 454px;
    height: 454px;
    visibility: visible;
    transform: scale(1);
    display: block!important;
    z-index: 100;
    position: absolute !important;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.swiper.mySwiper2.hide {
    visibility: hidden;
    transform: scale(0);
}

.swiper.mySwiper2 .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ss-inner2 {
    width: 354px;
    height: 354px;
    font-family: var(--nunito), sans-serif;
    font-size: 16px;
    font-weight: 400;
    background: #fff;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.75);
    padding: 35px 0 40px 0;
}

.swiper-watch-progress .giftSwiper .ss-inner2 {
    height: 275px;
}

.ss-inner2 > div:first-of-type {
    font-size: 20px;
}

.mySwiper2 .swiper-horizontal>.swiper-pagination-bullets, 
.mySwiper2 .swiper-pagination-bullets.swiper-pagination-horizontal {
   position: relative;
}

.mySwiper2 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.mySwiper2 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}

.mySwiper2 .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #E1E3E8;
    opacity: 1;
}

.mySwiper2 .swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    background: var(--CouplePurple);
}

.pagination-group {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 62px;
    width: 100%;
    height: 7px;
}

.mySwiper2 .swiper-horizontal>.swiper-pagination-bullets, 
.mySwiper2 .swiper-pagination-bullets.swiper-pagination-horizontal, 
.mySwiper2 .swiper-pagination-custom, .swiper-pagination-fraction {
    width: auto;
    margin: 0 10px;
}

.mySwiper2 .swiper-button-next:after, 
.mySwiper2 .swiper-button-prev:after {
    all: unset;
}

.mySwiper2 .swiper-button-next, 
.mySwiper2 .swiper-button-prev {
    width: 8px;
    height: 7px;
    position: relative;
}

.mySwiper2 .swiper-button-next {
    background: url(../img/arrow-right-grey2.svg) 0 0 no-repeat;
    background-size: 8px 7px;
}

.mySwiper2 .swiper-button-prev {
    background: url(../img/arrow-left-grey2.svg) 0 0 no-repeat;
    background-size: 8px 7px;
}

.mySwiper2 .swiper-button-next.swiper-button-disabled, 
.mySwiper2 .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

.close-virtual-gifts {
    font-weight: 900;
    position: absolute;
    top: 60px;
    right: 60px;
    cursor: pointer;
}

/* END Virtual gifts cards received */

.restoreEventScreen .mr-interstitial-container {
    z-index: 10;
}

.mr-interstitial-wrapper.inDating {
    position: absolute;
    width: 100%;
    top: 100px;
    left: 0;
}

.mr-user-menu.inDatingTop {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
}

.mr-user-menu.inDatingBotton {
    position: absolute;
    height: auto;
    bottom: 0;
    top: auto;
    left: 0;
    width: 125px;
}

.select-custom.bootReason,
.select-custom.bootReasonSub {
    width: 100%;
}

.select-custom.bootReason {
    flex: 0 0 30%;
    text-align: left;
}

.select-custom.bootReasonSub {
    flex: 0 0 66%;
}

.flexBoot {
    column-gap: 4%;
    display: flex;
    align-items: center;
}

.textarea-custom.w100 {
    width: 100%;
    margin: 15px 0;
}

.errorBoot {
    font-size: 1.157vw !important;
    margin-top: -5px;
    margin-bottom: 15px;
    overflow-wrap: break-word;
}

dl.select-custom.red-border {
    border: 0.116vw solid #e63e29;
}

.mr-big.mr-lobby-user.offVideo {
    background: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.mr-big.mr-lobby-user.offVideo svg, .mr-big.mr-lobby-user.offVideo .mr-lobby-username {
    display: none;
}

/* Tooltip 3 */

.mr-tooltip3 {
    position: absolute;
    width: 230px;
    min-height: 50px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 12px 15px 67px 0 rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-family: var(--nunito), sans-serif;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #212121;
    transition: all 0.2s ease-in;
    z-index: 100;
}

.mr-tooltip3.noAnim {
    transition: none;
}

/* Top center tooltip */
.mr-tooltip3.toTopCenter {
    top: -70px;
    left: 50%;
    transform: scale(0) translateX(-50%);
    transform-origin: 0 100%;
    opacity: 0;
    visibility: hidden;
}

.mr-tooltip3.toTopCenter::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 26px;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/mr-tooltip-toTopCenter.png);
    background-size: 50px 26px;
}

.showTooltip3:hover .mr-tooltip3.toTopCenter,
.showTooltip3.addHover .mr-tooltip3.toTopCenter {
    transform: scale(1) translateX(-50%);
    opacity: 1;
    visibility: visible;
}

.showTooltip3Ref.addClick .mr-tooltip3.toTopCenter.addClick {
    transform: scale(1) translateX(-50%);
    opacity: 1;
    visibility: visible;  
}

.mr-tooltip3Ref1 {
    position: relative;
}
.mr-tooltip3Ref2{
    position: relative;
}

/* Top right tooltip */
.mr-tooltip3.toTopRight {
    top: -64px;
    right: 0;
    transform-origin: 100% 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    border-bottom-right-radius: 0;
}

.mr-tooltip3.toTopRight::before {
    content: '';
    position: absolute;
    transform: rotate(180deg);
    width: 35px;
    height: 20px;
    right: -1px;
    bottom: -20px;
    background-image: url(../img/mr-tooltip-corner.png);
    background-size: 35px 20px;
}

.showTooltip3:hover .mr-tooltip3.toTopRight,
.showTooltip3.addHover .mr-tooltip3.toTopRight {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

/* Top left tooltip */
.mr-tooltip3.toTopLeft {
    top: -64px;
    left: 0;
    transform-origin: 0 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    border-bottom-left-radius: 0;
}

.mr-tooltip3.toTopLeft::before {
    content: '';
    position: absolute;
    transform: rotate(180deg) scaleX(-1);
    width: 35px;
    height: 20px;
    left: -1px;
    bottom: -20px;
    background-image: url(../img/mr-tooltip-corner.png);
    background-size: 35px 20px;
}

.showTooltip3:hover .mr-tooltip3.toTopLeft,
.showTooltip3.addHover .mr-tooltip3.toTopLeft  {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

/* END Tooltip 3 */

.mr-off-camera-game {
    height: calc(100% - 125px);
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #5A5AD6;
    border-radius: 14px;
    outline: 14px solid #fff;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* END Tooltip 3 */

.mr-interstitial-wrapper-cnt.startRound {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.mr-interstitial-container-cnt {
    width: 38%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    border-radius: 1.157vw;
    padding: 2.3vw 2.3vw;
    background: #f3f3f3;
}

.mr-interstitial-container-cnt .mr-i-t2 {
    margin: 0 auto;
}

.textarea-modal-bio {
    width: auto;
    height: 100px;
    border-radius: 6px;
    border: solid 1px #7a7b7d;
    background-color: #fff;
    padding: 10px;
    margin: 20px auto 10px auto;
    line-height: 20px;
    font: 16px var(--rubik), sans-serif;
}

/* .bootCountValue {
    font-weight: bold;
    position: absolute;
    left: 115px;
} */

.referralText {
    color: var(--CouplePurple);
}

@media (max-height: 720px) {
    .ss-inner-game-img {
        width: auto;
        height: 150px;
        margin-bottom: 0;
    }
    .ss-inner-game-img img {
        object-fit: scale-down;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 1280px) and (max-height: 720px) {
    .swiper.mySwiper.v2 {
      width: calc(572px * 0.85);
      height: calc(500px * 0.85);
      margin-top: 2vh;
    }
    .ss-inner {
        width: 310px;
        height: auto;
        padding: 0 40px;
        background-color: #fff;
        border-radius: 22px;
        font-family: var(--nunito), sans-serif;
        font-weight: 400;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px 0;
    }

    .ss-inner-game-img {
        width: auto;
        height: 105px;
        background-color: transparent;
        margin-bottom: 7px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
    }

    .ss-inner-game-img img {
        object-fit: scale-down;
        width: 100%;
        height: 100%;
    }

    .mr-off-camera-game {
        outline: 7px solid #fff;
    }

    /*.mr-submenu1 dl {
        height: 420px;
    }*/

    #alertEndGame p {
        font-size: 17px;
        font-weight: 200;
    }
  }

  .btn-yellow.nextBtn {
    margin-top: 35%;
}

.btn-yellow.v2 {
    margin-top: 20%;
}

.ss-inner-title.v2 {
    margin-top: 15%;
}

@media only screen and (max-width: 1600px) {
    .swiper.mySwiper:not(.v2) {
        width: 76vw;
        height: 90vh;
        margin-top: 30px;
    }
}

@media only screen and (min-width: 1600px) {
    .swiper.mySwiper.v2 {
        width: 772px;
        height: 700px;
        margin-top: 3vh;
    }
    #alertEndGame.top30s {
        top: 40%;
    }
    #alertEndGame {
        color: white;
        border-radius: 5px;
        font-family: var(--rubik), sans-serif;
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        z-index: 10;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #alertEndGame p {
        font-size: 28px;
        font-weight: 200;
    }
    .ss-inner {
        width: 550px;
        height: 675px;
        gap: 26px 0;
        font-size: 25px;
    }
    .ss-inner-title {
        font-size: 40px;
    }
    #gameEndScreen {
        margin-top: 90%;
    }
    .mySwiper .swiper-button-next, 
    .mySwiper .swiper-button-prev {
        width: 50px;
        height: 55px;
    }

    #gameEndScreen button {
        font-size: 32px;
    }

    .mySwiper .swiper-button-next {
        background: url(../img/arrow-next-white.svg) 0 0 no-repeat;
    }
    
    .mySwiper .swiper-button-prev {
        background: url(../img/arrow-prev-white.svg) 0 0 no-repeat;
    }
    .swiper.mySwiper:not(.v2) {
        width: 75vw;
        height: 90vh;
        margin-top: 50px;
    }
    .ss-inner-game-img {
        width: auto;
        height: 166px;
        margin-bottom: 0;
    }
    .ss-inner-game-img img {
        object-fit: scale-down;
        width: 100%;
        height: 100%;
    }
    #scores_high, #scores {
        font-size: 25px;
    }
    .btn-yellow.nextBtn {
        margin-top: 35%;
    }
    
    .btn-yellow.v2 {
        margin-top: 25%;
    }
    
    .ss-inner-title.v2 {
        margin-top: 20%;
    }
}

@media only screen and (min-width: 2560px) {
    .ss-inner-title, .ss-inner-title.v2 {
        font-size: 58px;
    }
}

@media only screen and (max-width: 1280px) {
    .swiper.mySwiper:not(.v2) {
        width: 75vw;
        height: 90vh;
        margin-top: 50px;
    }
}

@media only screen and (max-width: 1024px) {
    .swiper.mySwiper:not(.v2) {
        width: 66vw;
        height: 74vh;
        margin-top: 50px;
    }
}

.mr-user-menu.lobby svg.no-fill {
    fill: none;
    stroke: #444;
}

.mr-off-camera-game.hide {
    display: none;
}

/* END OFF camera game */

/* GIFT VIDEO */

.gr-video {
    margin-bottom: 10px;
    width: 8.681vw;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    justify-content: center;
}

.gr-video video {
    height: 100%;
    width: auto;
}

/* July 2024 - left nav changes + search bar */

.mr-submenu1.v2 {
    top: 141px;
    height: calc(100% - 146px);
    background-color: #ebecf0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* overflow: hidden; */
}

@media only screen and (min-height: 721px) {
    .mr-submenu1.v2 {
        top: 161px;
        height: calc(100% - 166px);
    }
}

.mr-submenu1.v2.changeZ {
    z-index: -1;
}

.mr-submenu1.v3 {
    top: 144px;
    height: calc(100% - 144px);
}

.mr-submenu1.v3.changeZ {
    z-index: -1;
}

.mr-submenu1 dl {
    height: calc(100% - 62px);
    width: 100%;
    padding: 0 0 0 6px;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    color: #444;
    display: grid;
    grid-auto-rows: 84px;
    position: absolute;
    z-index: 3;
    overflow: auto;
    box-sizing: border-box;
}

@-moz-document url-prefix() {
    .mr-submenu1 dl {
        scrollbar-width: thin;
        scrollbar-color: var(--CouplePurple) transparent;
    }
}

.mr-submenu1:not(.overflowY) dl {
    padding-right: 6px;
}

/*.mr-submenu1.overflowY dl {
   height: 100%;
}*/

.pre-nav-search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    margin: 8px auto;
    gap: 7px;
}

.pre-nav-search input {
    width: 100%;
    height: 100%;
    padding: 0 34px 0 10px;
    background: #fafafa;
    border-radius: 4px;
    border: 0;
    font-size: 14px;
    font-family: var(--nunito), sans-serif;
    font-weight: 400;
}

/* MOD */
.modRow {
    display: flex;
    padding: 2px 0;
    font-family: var(--nunito), sans-serif;
}

.modRow span {
    width: 30px;
    text-align: center;
}

.modRow label {
    width: 70px;
    background: #fff;
    border-radius: 10px;
    justify-content: center;
    margin-right: 12px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #555;
}

.modRow button {
    text-align: center;
    font-family: var(--nunito), sans-serif;
    font-size: 12px;
    color: #555;
    border-radius: 10px;
    padding: 1px 5px;
}
.modRow button.white {
    background: #fff;
}
.modRow button.gray {
    background: #ccc;
}
.modRow button.light {
    background: #ADD8E6;
}
.modRow button.blue {
    background: #A7C7E7;
}
.modRow button.red {
    background: #FAA0A0;
}
.modRow button.yellow {
    background: #F8DE7E;
}
.modRow button.purple {
    background: #E0B0FF;
}
.modRow button.orange {
    background: #FFA500;
}

/* END MOD */

/* loading participant video */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #30363e;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-overlay .loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--CouplePurple);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {    
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* 
 #spin_the_wheel {
    display: inline-block;
    position: relative;
    overflow: hidden;
}
  
#wheel {
    display: block;
    max-width: 100%;
    max-height: 100%;
} */

#videoWinner {
    font: 1.5em/0 var(--nunito), sans-serif;
    user-select: none;
    cursor: pointer;
    display: grid;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 51%;
    left: 50%;
    width: 31%;
    height: 31%;
    margin: -16%;
    border-radius: 50%;
    transition: 0.8s;
    overflow: hidden;
    z-index: 1;
    border: 0.289vw solid #E2E2E2;
}

#videoWinner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* #spin {
    font: 1.5em/0 var(--nunito), sans-serif;
    user-select: none;
    cursor: pointer;
    display: grid;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 51%;
    width: 40%;
    height: 40%;
    margin: -20%;
    border-radius: 50%;
    transition: 0.8s;
}

#spin {
    background-image: url(../img/spin_bk.svg);
    background-size: cover;
    background-position: center;
}  */

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

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

.pre-nav-search button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0;
    border: 0;
    width: 15px;
    height: 15px;
    background: #fafafa url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9183 11.0169L11.9253 11.2054L11.6401 10.9304C12.6381 9.7691 13.239 8.26146 13.239 6.62139C13.239 2.96435 10.2755 0 6.61948 0C2.96349 0 0 2.96435 0 6.62139C0 10.2784 2.96349 13.2428 6.61948 13.2428C8.25908 13.2428 9.76628 12.6418 10.9272 11.6435L11.2022 11.9287L11.0189 12.9168L16.1108 18L18 16.1103L12.9183 11.0169ZM6.61948 11.0756C4.15556 11.0756 2.16661 9.08603 2.16661 6.62139C2.16661 4.15676 4.15556 2.16723 6.61948 2.16723C9.08341 2.16723 11.0724 4.15676 11.0724 6.62139C11.0724 9.08603 9.08341 11.0756 6.61948 11.0756Z" fill="%233C414D"/></svg>') top left no-repeat;
    background-size: 15px auto;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.pre-nav-search button:hover {
    transform: scale(1.15);
}

.mr-buttons-av button.auto {
    width: auto;
}

/* Progress bar */
.progress-bar {
    width: 100%;
    border: 1px solid #C8CCD1;
    background: rgba(255, 255, 255, 0.9); 
    padding: min(0.1vw, 8px);
    position: relative;
    z-index: 2;
    margin: 5px 0;
    cursor: pointer;
    display: grid;
    grid-template-rows: auto 28px;
    border-radius: 10px;
}

.progress-bar.flex {
    display: flex;
    align-items: center;
    font-family: var(--nunito), sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.progress-bar.v2 {
    border-radius: 48px;
    height: 36px;
    display: flex;
    padding: 0.1vw;
    margin: 5px;
    border-width: 1px;
}

@media only screen and (min-width: 1728px) {
    .progress-bar.v2 {
        border-radius: 2.778vw;
        height: 2.083vw;
        display: flex;
        padding: 0.231vw;
        margin: 0.289vw 0;
        border-width: 0.058vw;
    }

    #knowYouFinal .progress-bar-title2 {
        margin-left: 1.15vw;
    }
}

@media only screen and (max-width: 1727px) {
    #knowYouFinal .progress-bar.v2 {
       height: auto;
    }

    #knowYouFinal .progress-bar-title2 {
        margin-left: calc(0.968vw + 5px);
    }
}

.progress-bar.v3 {
    height: 36px;
    border-radius: 48px;
    grid-template-rows: unset;
    padding: 3px;
    margin: 0;
}

.progress-bar.min {
    height: min(2.083vw, 36px);
    border-radius: min(2.778vw, 48px);
    grid-template-rows: unset;
    padding: min(3px, 5px);
    margin: 0;
}

.progress-bar.v5 {
    border-radius: 2.778vw; /* 48px */
    height: 2.083vw; /* 36px */
    display: flex;
    padding: 0.231vw; /* 4px */
    margin: 0 0 0.463vw 0; /* 0 0 8px 0 */
    border-width: 0.058vw; /* 1px */
}

/*.AiMatchmaker-progress.zero {
    margin-top: 0.579vw;
}*/

.progress-bar-title {
    font-weight: 700;
    font-size: 14px;
    color: #6348D4;
    margin-left: 12px;
}

.progress-bar-title2 {
    font-family: var(--nunito);
    font-weight: 400;
    font-size: 1.042vw; /* 20px */
    display: grid;
    margin-left: 0.868vw; /* 15px */
}

.progress-bar-title2.v2 {
    font-size: 1.042vw; /* 18px */
    font-weight: 700;
    margin-left: 0;
}

.progress-bar-title2.min {
    font-size: min(1.042vw, 18px); 
    margin-left: min(0.579vw, 12px); /* 10px */
    margin-top: min(0.694vw, 14px); /* 12px */
    gap: min(0.289vw, 6px); /* 5px */
    font-weight: 700;
}

.progress-bar-title2.mt12 {
    margin-top: 0.694vw;
}

.progress-bar-title2.mt22 {
    margin-top: 1.273vw;
}

.progress-bar-title2.mb1 {
    margin-bottom: 0.058vw; /* 1px */
}

/*.progress-bar-title2.mb3 {
    margin-top: 1.273vw;
    margin-bottom: 0.174vw;
}*/

.progress-bar-title2 label {
    font-size: 14px;
    font-weight: 700;
}

.progress-bar-title2 label.f14 {
    font-size: 0.77em;
    font-weight: 700;
}

.progress-bar-title2.min label {
    font-size: min(0.81vw, 16px);
}

.inner .progress-bar-title2 {
    margin-left: 0;
}

.progress-bar-title3 {
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #389EDF;
    padding: 0 0 0 18px;
    line-height: 2;
}

.progress-bar-title3.black {
    color: #000;
}

body .progress-bar-title4 {
    font-family: var(--rubik), sans-serif;
    font-weight: 500;
    font-size: 1.852vw;
    text-align: center;
    color: #683DD3;
    margin-bottom: 4.63vw;
    margin-top: 0.579vw;
}

body .progress-bar-title4-1 {
    font-family: var(--nunito), sans-serif;
    font-size: clamp(14px, 1.042vw, 21px);
    color: var(--CoupleGray800);
    display: flex;
    font-weight: bold;
    margin-top: 0.156vw;
    padding-left: 20px;
}

.progress-bar-title4.mtb2 {
    margin-top: 0;
    margin-bottom: 0.116vw;
}

.progress-bar .bar {
    background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    height: 100%;
    border-radius: 60px;
    font-family: var(--nunito), sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding: 0 15px;
    text-align: right;
    animation: progressAnimation 2s ease-out;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: start;
    min-width: 5%;
}

.progress-bar .bar.start {
    justify-content: start;
}

.progress-bar.v2 .bar {
    font-size: 1.042vw;
    padding: 0 0.868vw;
}

.progress-bar.v3 .bar {
    font-size: 14px;
    padding: 0 15px;
}

.progress-bar.v4 {
    border-radius: 2.778vw;
    height: 2.083vw;
    display: flex;
    padding: 0.231vw;
    margin: 0 0 2.24vw 0;
    border-width: 0.058vw;
}

@media only screen and (min-width: 1920px) {
    .progress-bar.v4 {
        border-radius: 48px;
        display: flex;
        padding: 4px;
        margin: 0 0 43px 0;
        border-width: 1px; 
    }

    .mr-interstitial-container.v5 .progress-bar.v4 {
        height: 36px;
    }
}

.progress-bar.min .bar {
    font-size: min(0.81vw, 14px);
    padding: 0 min(0.868vw, 15px);
    min-width: 10%;
}

@keyframes progressAnimation {
    0%   { 
        width: 0; 
        background-color: var(--CouplePurple);
    }
    100% { 
        background: linear-gradient(107.73deg, #26C1E3 -13.9%, #702BD0 99.92%);
    }
  }

  @property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.valueCounterAi {
    animation: counter 2s ease-out;
    counter-reset: num var(--num);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    align-content: center;
}

.valueCounterAi.progressBarLittle {
    padding: 0 0.868vw;
} 

.valueCounterAi::after {
    content: counter(num) "%";
}

.flex .valueCounterAi {
    padding-left: 8px;
}

@keyframes counter {
    from {
        --num: 0;
    }
}

.flex .valueCounter {
    padding-left: 8px;
}

.progress-bar-footer {
    font-weight: 400;
    font-size: 0.81vw; /* 14px */
}

.progres-bar-text {
    margin-top: 25px;
    text-align: center;
    font-size: 1.042vw;
}

/*dl.interests-list-1 dd.random span {
    display: flex;
    font-size: 0.926vw;
    padding: 0.231vw 0.694vw;
    border-radius: 0.926vw;
    background-color: #fff;
    color: #5A5AD6;
    border: solid 0.058vw #5A5AD6;
}*/

dl.interests-list-1.mt18mb24 {
    margin: 1.042vw 0 1.389vw 0;
}

dl.interests-list-1.mb10 {
    margin: -0.347vw 0 0.579vw 0;
}

dl.interests-list-1.min dt,
body .mr-interstitial-title.min2 {
    margin-bottom: min(0.405vw, 7px);
    font-size: min(1.042vw, 18px);
}

dl.interests-list-1.v2 dt {
    font-size: min(1.042vw, 21px); /*18px*/
}

.mr-interstitial-title.min {
    font-size: clamp(12px, 1.042vw, 21px);
    margin-bottom: min(3px, 5px);
}

.v2 .mr-interstitial-title {
    font-size: 1.042vw; /*18px*/
    line-height: 1.4;
}

dl.interests-list-1 dt.mb3 {
    margin-bottom: 0.174vw;
}

dl.interests-list-1 dt.mb9 {
    margin-bottom: 0.463vw; 
}

#datee-gender {
    text-transform: capitalize;
}

.mr-interstitial-title.mb0 {
    margin-bottom: 0;
    margin-top: 0.463vw;
    font-size: 1.042vw;
    font-family: var(--nunito), serif;
    color: #444;
}

.mr-interstitial-title.mt0b10 {
    margin-bottom: 0.347vw;
    margin-top: 0.810vw;
}

dl.interests-list-1 dd {
    display: flex;
    flex-wrap: wrap;
    gap: 0.405vw 1.042vw;  /* 7px 18px */
    margin: 0.463vw 0 0 0; /* 8px */
}

dl.interests-list-1.min dd {
    gap: min(0.405vw, 8px);
    margin-top: min(0.463vw, 10px);
}

dl.interests-list-1.v2 dd {
    gap: min(0.405vw, 8px);
    /* margin: min(0.231vw, 5px) 0 0 0; /* 4px 0 0 0 */
}

dl.interests-list-1.v3 dd {
    gap: 0.289vw; /* 5px */
}

.mr-interstitial-top dl.interests-list-1 dd {
    margin: 0;
}

dl.interests-list-1 dd span.white {
    background-color: #fff;
}

dl.interests-list-1 dd span.gradRed {
    background: linear-gradient(90.17deg, #EA805E 0.17%, #AB082F 99.88%);
    border: 0;
}

.mb15 {
    margin-bottom: 0.868vw;
}

.enterBtnDisableTxt {
    margin-top: 15px;
}

/* Quick Draw Game */
.mr-quick-draw {
    width: 100%;
    height: 100%;
    padding: 0.579vw;
    background-color: #EBECF0;
    display: grid;
    grid-template-columns: 1fr 1.042vw auto;
    grid-template-rows: repeat(2, 1fr);
    gap: 0 0.231vw;
    justify-content: end;
    font-family: var(--nunito), sans-serif;
    position: absolute;
    z-index: 100;
}

.mr-quick-draw .mb15,
.mr-quick-draw .mr-qd-button {
    margin-bottom: 0;
}

@-moz-document url-prefix() {
    .mr-quick-draw {
        justify-content: stretch;
    }
    @media only screen and (max-height: 930px) {
        .mr-quick-draw {
            justify-content: center;
        }
    }
}

.mr-quick-draw.hide {
    display: none;
}

.mr-quick-draw > div {
    border: 0.058vw solid rgba(0, 0, 0, 0.25);
}

.mr-qd-host {
    background-color: #fff;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    text-align: center;
    padding: 0 15px;
    font-size: 0.868vw;
    user-select: none;
}

.mr-qd-host video {
    height: 100%;
    position: absolute;
}

.mr-qd-instructions {
    background-color: #fff;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.157vw;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.mr-qd-instructions video {
    height: 100%;
    position: absolute;
}

@-moz-document url-prefix() {
    .mr-qd-instructions video {
        height: unset;
        width: 100%;
    }
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    .mr-qd-instructions video {
        height: unset;
        width: 100%;
    }
}

.mr-qd-timer {
    background-color: #fff;
    grid-row: span 2;
    border-radius: 3.356vw;
    padding: 0.174vw;
    display: flex;
    align-items: end;
}

.mr-qd-timer > div {
    height: 100%;
    width: 100%;
    border-radius: 3.356vw;
    background: linear-gradient(180deg, #399ADE 0%, #6C33D0 125.79%);
    animation-name: quickDraw;
    animation-duration: 60s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

@keyframes quickDraw {
    0% {
        height: 100%;
    }
    25% {
        height: 75%;
    }
    50% {
        height: 50%;
    }
    75% {
        height: 25%;
    }
    100% {
        height: 0;
    }
}

@keyframes quickDrawNew {
    0% {
        height: 0;
    }
    25% {
        height: 25%;
    }
    50% {
        height: 50%;
    }
    75% {
        height: 75%;
    }
    100% {
        height: 100%;
    }
}

.mr-qd-canvas {
    background-color: #fff;
    height: 100%;
    aspect-ratio: 1/1;
    grid-column: 3;
    grid-row: span 2;
    overflow: hidden;
}

.mr-qd-canvas canvas, .mr-qd-canvas img {
    width: 100%;
    height: 100%;
}

.mr-qd-button {
    background: linear-gradient(92.81deg, #FAAD0F -3.37%, #FA800F 105.16%);
    border: 0;
    cursor: pointer;
    height: 2.546vw;
    padding: 0 1.736vw;
    line-height: 0.9;
    font-family: var(--nunito), sans-serif;
    font-weight: 700;
    font-size: 1.157vw;
    border-radius: 4.63vw;
    color: #fff;
    margin-top: 0.868vw;
}

@-moz-document url-prefix() {
    .mr-quick-draw {
        justify-content: stretch;
    }
    .mb15 {
        margin-bottom: 0.868vw;
    }

    @media only screen and (max-height: 930px) {
        .mr-quick-draw {
            justify-content: center;
        }
    }
}

@-moz-document url-prefix() {
    .mr-qd-instructions video {
        height: unset;
        width: 100%;
    }
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    .mr-qd-instructions video {
        height: unset;
        width: 100%;
    }
}
/* END Quick Draw Game */

.enterBtnDisableTxt {
    margin-top: 15px;
}

/*Style for icons*/
/* old version of falling icon */
/* .falling-icon {
    font-size: 24px;
    opacity: 1;
    position: absolute;
    will-change: transform, opacity, offset-path;
    animation: moveAlongPath 4s cubic-bezier(.82,.37,.89,.44) forwards;
    offset-rotate: auto;
    z-index: 1000;
    pointer-events: none;
}

@keyframes moveAlongPath {
    from {
        offset-distance: 0%;
    }
    to {
        offset-distance: 100%;
    }
} */    


/* new version of falling icon */
.falling-icon {
    position: fixed;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1000;
    will-change: transform, opacity;
}



select.sel-type-3 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #E8ECF2;
    outline: 0;
    font: inherit;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    background: #F3F5F9 url(../img/arrow-grey.svg) no-repeat right 14px center;
    background-size: 14px auto;
    color: #444444;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
    margin: 0 0 16px 0;
}

select.sel-type-3:focus {
  outline: none;
}

select.sel-type-3::-ms-expand {
  display: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
}

.textarea-type-1 {
    height: 84px;
    padding: 10px;
    resize: none;
    border: 1px solid #E8ECF2;
    background: #F3F5F9;
    color: #444444;
    border-radius: 8px;
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.textarea-type-1::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}

.textarea-type-1::-webkit-scrollbar-track {
    box-shadow: inset 0 0 16px 16px transparent;
    border: solid 3px transparent;
    height: 34px;
}

.textarea-type-1::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 4px 4px var(--CouplePurple);
    border: solid 3px transparent;
    border-radius: 14px;
    min-height: 30px;
}

.textarea-type-1::-webkit-scrollbar-track-piece:end {
    background: transparent;
}

.textarea-type-1::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

.textarea-type-1::-webkit-scrollbar-button {
    display: none;
}

/* The switch - the box around the slider */
.switch2 {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 8px;
}
  
/* Hide default HTML checkbox */
.switch2 input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* UI-2025 */
.switch2.resp { 
    width: 1.62vw; /* 28px */
    height: 0.46vw; /* 8px */
}

/* The slider */
.slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E8ECF2;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 76px;
}

.slider2:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 0;
    top: -3px;
    -webkit-transition: .4s;
    transition: .4s;
    background-color: #444;
    border-radius: 50%;
}

input:focus + .slider2 {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider2:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
    background-color: var(--CouplePurple);
}

.mr-top-switch {
    padding: 0 10px 10px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (min-height: 721px) {
    .mr-top-switch {
        padding: 0 16px 10px 10px;
    }
}

.mr-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.736vw; /* 30px */
    gap: 0.58vw; /* 10px */
}

.mr-switch.f16R {
    font-size: 0.93vw; /* UI-2025 */
}

.referral-drawer {
    padding: 0 45px 25px 45px;
    text-align: center;
    display: grid;
}

.referral-link {
    padding: 20px 15px;
    border: 1px solid #E8ECF2;
    background: #F3F5F9;
    border-radius: 10px;
    display: grid;
    gap: 10px 0;
    text-align: left;
    margin-top: 10px;
    position: relative;
}

.referral-link.mt20 {
    margin-top: 20px;
}

.referral-link a {
    color: var(--CouplePurple);
}

.referral-link.copied a,
.referral-link.copied span {
    position: relative;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.referral-link svg {
    width: 16px;
    fill: #444;
    color: #444;
    position: absolute;
    top: 9px;
    right: 9px;
    cursor: pointer;
}

.referral-link.copied svg {
    width: 16px;
    fill: #C8C8C8;
    color: #C8C8C8;
}

.referral-link .clipboard {
    display: none;
}

.referral-link.copied .clipboard {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mr-sub-ic56 {
    width: 3.241vw;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#greenToDateTransition .mr-sub-ic56 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mr-sub-ic60 {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: var(--CouplePurple);
    outline: 2px solid var(--CouplePurple);
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-sub-ic60 img {
    width: 30px;
}

.mr-balance {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #444;
}

.mr-balance svg {
    margin-left: 10px;
}

.mr-balance.red {
    color: #E63E29;
}

/*body .mr-lobby-user .btn-yellow svg {
    all: unset;
}*/

.mr-interstitial, .mr-interstitial-inner, .mr-interstitial-content {
    border-top: 1px solid #BDC3CA;
    border-bottom: 1px solid #BDC3CA;
    height: 19.676vw;
    display: grid;
    align-content: center;
}

.btn-yellow.w165 {
    min-width: 9.549vw;
    justify-content: center;
    text-transform: none;
    margin-bottom: 0.347vw; /* 6px */
}

/* -------------------
        Payment 
-------------------- */

.overlay-container {
    width: 630px;
    padding: 15px 0 15px 0;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    color: var(--TextHighEmphasis);
    font-family: var(--nunito), sans-serif;
    font-size: 18px;
    display: none;
    overflow: hidden;
    height: auto;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05);
}

.overlay-container  {
    top: 68px;
}
@media only screen and (min-width: 1280px) {
    .overlay-container  {
        width: 770px;
        padding: 20px 0 20px 0;
    }
    .overlay-container  {
        top: 50px;
    }
}

.overlay-container.show {
    display: grid;
    justify-items: center;
    align-content: center;
}

.overlay-close {
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--TextHighEmphasis);
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 20;
}

#authorizenet-container .split-2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 15px;
    padding: 0 15px 0 15px;
    transition: all 0.3s ease-out;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .split-2 {
        gap: 0 40px;
        padding: 0 20px 0 30px;
    }
}

.checkout-grid2 {
    display: grid;
    background-color: #fff;
    gap: 10px 0;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

.checkout-grid2.hide {
    transform: translateY(-120%);
    transform-origin: bottom;
    transition: all 0.3s ease-out;
}

.checkout-small-2 {
    margin: 0;
}

.cg2-row {
    padding: 0 0 10px 0;
    line-height: 24px;
    font-size: 14px;
    text-align: left;
    position: relative;
}

.cg2-row::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: rgba(60, 66, 87, 0.12);
    bottom: 0;
    left: 10px;
}

.cg2-checkout-btm.cg2-row::after,
.cg2-row.noB::after {
    all: unset;
}

.cg2-row.v2::after {
    width: 100%;
    left: 0;
}

.cg2-row.mb30 {
    margin-bottom: 10px;
}

.checkout-grid {
    font-family: var(--nunito), sans-serif;
    width: 100%;
    color: var(--TextHighEmphasis);
    border-bottom: 1px solid var( --CoupleGray400);
    margin-bottom: 20px;
    padding-bottom: 20px;
    display: none;
    align-content: start;
    position: relative;
    gap: 16px 0;
    overflow-y: scroll;
}

.checkout-grid.gap8 {
    gap: 8px 0;
}

.checkout-grid::-webkit-scrollbar {
    width: 24px;
}

.checkout-grid::-webkit-scrollbar-track {
    box-shadow: inset 0 0 16px 16px transparent;
    background: transparent;
    border: solid 10px transparent;
}

.checkout-grid::-webkit-scrollbar-thumb {
    background: transparent;
    border: solid 10px transparent;
    border-radius: 14px;
}

.checkout-grid::-webkit-scrollbar-track-piece:end {
    background: transparent;
}

.checkout-grid::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

.checkout-grid::-webkit-scrollbar-button {
  display: none;
}

.checkout-grid.show {
    display: grid;
}

.checkout-grid.small {
    border-bottom: unset;
    margin: 0;
    padding: 0;
}

.checkout-grid.pb16 {
    padding-bottom: 16px;
}

.checkout-grid.hFlex {
    overflow-y: scroll;
}

.checkout-grid.h292 {
    overflow-y: scroll;
    padding: 10px 0 10px 0;
}

body .checkout-grid.h340::-webkit-scrollbar,
body .checkout-grid.hFlex::-webkit-scrollbar
{
    width: 24px;
    background: transparent;
}

body .checkout-grid.h340::-webkit-scrollbar-track,
body .checkout-grid.hFlex::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 16px 16px transparent;
    border: solid 10px transparent;
    height: 34px;
}

body .checkout-grid.h340::-webkit-scrollbar-thumb,
body .checkout-grid.hFlex::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 16px 16px var(--CouplePurple);
    border: solid 10px transparent;
    border-radius: 14px;
    min-height: 30px;
}

body .checkout-grid.h340::-webkit-scrollbar-track-piece:end,
body .checkout-grid.hFlex::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 30px; 
}

body .checkout-grid.h340::-webkit-scrollbar-track-piece:start,
body .checkout-grid.hFlex::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 30px;
}

body .checkout-grid.h340::-webkit-scrollbar-button,
body .checkout-grid.hFlex::-webkit-scrollbar-button
{
    display: none;
}

/* width */
.checkout-grid.h292::-webkit-scrollbar {
    width: 4px;
}

/* Track */
.checkout-grid.h292::-webkit-scrollbar-track {
    border-radius: 14px;
    background: transparent;
}

/* Handle */
.checkout-grid.h292::-webkit-scrollbar-thumb {
    background: var(--CouplePurple);
    border-radius: 14px;
}

body .checkout-grid.h292::-webkit-scrollbar-button {
    display: none;
}

body .checkout-grid.h292::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px; 
}

body .checkout-grid.h292::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 15px;
}

.checkout-grid li {
    position: relative;
    display: grid;
    padding: 0 30px 0 45px;
    grid-template-columns: 120px 280px 1fr;
    align-items: start;
    gap: 0;
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .checkout-grid li {
        grid-template-columns: 100px 280px 1fr;
    }
}

.checkout-grid li.v2 {
    grid-template-rows: 1fr 1fr;
}

.checkout-grid.small li {
    padding: 0;
}

@media only screen and (min-width: 620px) {
    .checkout-grid.small li {
        grid-template-columns: 64px 3fr 1fr;
        gap: 0 12px;
    }
}

.checkout-grid.small li.cg-coins {
    grid-template-columns: 64px 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0 12px;
    padding: 20px 0 0 0;
}

@media only screen and (min-width: 1280px) {
    .checkout-grid.small li.cg-coins {
        gap: 9px 12px;
        padding: 25px 0 0 0;
    }
}

.checkout-grid li .row-span-2 {
    grid-row: span 2;
}

.checkout-grid li.hide {
    display: none;
}

.cg-empty {
    height: 292px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    gap: 12px 0; 
    font-size: 24px;
    font-family: var(--rubik), sans-serif;
}

.cg-empty.show {
    display: flex;
}

.cg-empty.v2 {
    grid-column: 1 / -1;
    height: auto;
    padding: 20px 0;
}

button.close-window {
    height: 32px;
    border-radius: 8px;
    padding: 0 25px;
    border: 1px solid var(--CoupleGray600);
    background-color: var(--CoupleGray100);
    font-family: var(--rubik), sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.cg-row-close {
    position: absolute;
    top: -6px;
    left: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #fafafa;
    color: #3c414d;
    border-radius: 100%;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cg-row-close:hover {
    background-color: #fff;
}

.small .cg-row-close {
    left: 0;
}

.cg-row-close.hide {
    display: none;
}

.cg-couple-coin2 {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 1/3;
}

.cg-couple-coin2 img {
    width: 100%;
    margin-top: -14px;
}

.cg-couple-coin.red,
.cg-couple-coin2.red {
    background-color: #e63e29;
}

.cg-details {
    display: grid;
    grid-template-columns: 1fr 56px;
    font-size: 12px;
    color: #444;
    line-height: 1;
    text-align: left;
    align-self: center;
}

@media only screen and (min-width: 1280px) {
    .cg-details {
        font-size: 14px;
        grid-template-columns: 1fr 70px;
        align-self: start;
    }
}

#authorizenet-container .cg-details strong {
    font-weight: 700;
    font-size: 16px;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .cg-details strong {
        font-size: 20px;
    }
    #authorizenet-container .cg-details span {
        font-size: 20px;
    }
}

.cg-details.mt-11 {
    margin-top: -11px;
}

@media only screen and (min-width: 1280px) {
    .cg-details.mt-11 {
        margin-top: -8px;
    }
}

.cg-details.row {
    flex-direction: row;
}

.just-self-end {
    justify-self: end;
}

.dGrid {
    display: grid;
}

.dGrid.gap5 {
    gap: 5px;
}

.checkout-grid .f20 {
    font-size: 20px;
    font-weight: 700;
}

#authorizenet-container .cg2-checkout-btm {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 0 27px 0;
    margin-top: auto;
    border-top: 1px solid rgba(60, 66, 87, 0.12);
    transition: all 0.3s ease-out;
    color: #444;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .cg2-checkout-btm {
        font-size: 20px;
        padding: 36px 0 31px 0;
    }
}

.cg2-checkout-btm.v2 {
    display: none;
}

.cg2-pInfo-var {
    font-size: 16px;
    color: var(--TextLowEmphasis);
    position: relative;
    display: none;
}

.cg2-pInfo-var.mb30 {
    margin-bottom: 10px;
}

.cg2-pInfo-var a:link,
.cg2-pInfo-var a:visited {
    background-color: #fff;
    position: relative;
    z-index: 1;
    padding: 0 10px;
    text-decoration: underline;
    color: var(--TextLowEmphasis);
}

.cg2-pInfo-var a:hover {
    text-decoration: none;
}

.cg2-pInfo-var::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    width: calc(100% - 30px);
}

.checkout-flex1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: scaleY(1);
    transform-origin: top;
    transition: all 0.3s;
}

.checkout-flex1.start {
    justify-content: flex-start;
}

.checkout-flex1.show {
    transform: translateY(0);
    transform-origin: top;
    transition: all 0.3s;
}

.button-style-3 {
    height: 56px;
    font-family: var(--rubik), sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    background-color: var(--CoupleBlue500);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    border: 0;
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    .button-style-3 {
        height: 36px;
        font-size: 16px;
    }
}

.button-style-3.plr55 {
    padding: 0 55px;
}

.button-style-3:hover {
    background-color: var(--CouplePurple);
}

.button-style-3:focus {
    background-color: var(--CoupleBlue700);
}

.button-style-3.disabled {
    pointer-events: none;
    background-color: var(--CoupleGray400);
    color: var(--TextLowEmphasis);
}

.button-style-3.mt20 {
    margin-top: 20px;
}

.button-style-3.wVar920 {
    width: 100%;
    padding: 0 55px;
    margin: 0 auto;
}

.checkout-payment-info {
    width: 100%;
    background-color: #F7F7F7;
    border: 1px solid #E8ECF2;
    align-self: start;
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    display: grid;
    gap: 8px 0; 
}

.checkout-payment-info .error {
    font-size: 13px;
    font-weight: normal;
    color: var(--error);
    text-align: left;
    width: 100%;
    display: flex;
}

.checkout-payment-info input.error {
    color: var(--error);
    margin: 0;
    font-size: 12px;
}

@media only screen and (min-width: 1280px) {
    .checkout-payment-info input.error {
        font-size: 16px;
    }
}

.checkout-payment-info input.error::placeholder {
    color: var(--error);
}

.d-none {
    display: none !important;
}

#authorizenet-container .cpi-title {
    font-size: 16px;
    font-weight: 700;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .cpi-title {
        font-size: 20px;
    }
}

body .d-contents {
    display: contents;
}

#authorizenet-container input.type-cc {
    height: 48px;
    border: 1px solid #E8ECF2;
    background-color: #fff;
    border-radius: 8px;
    font-family: var(--nunito), sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #444;
    padding: 0 10px;
    width: 100%;
}

#authorizenet-container input.type-cc::placeholder {
    color: var(--TextMediumEmphasis);
    font-family: var(--nunito), sans-serif;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container input.type-cc {
        height: 48px;
        font-size: 14px;
    }
}

.chkoutPaymentform {
    width: 30vw;
    min-width: 500px;
    align-self: center;
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.1), 0 2px 5px 0 rgba(50, 50, 93, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 40px;
    display: contents;
}

#authorizenet-container .cpi-2col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 12px;
}

#authorizenet-container .cpi-2col.v2 {
    padding: 5px 0 0 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 26px;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .cpi-2col.v2 {
        gap: 14px 10px;
    }
}

/* The switch - the box around the slider */
#authorizenet-container .switch-type-1 {
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    width: 140px;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .switch-type-1 {
        font-size: 14px;
    }
}

.switch-type-1.disabled {
    pointer-events: none;
}

/* Hide default HTML checkbox */
.switch-type-1 input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.switch-type-1 .slider-card {
    position: absolute;
    width: 28px;
    height: 8px;
    cursor: pointer;
    top: 6px;
    right: 0;
    bottom: 0;
    border-radius: 36px;
    background-color: #E8ECF2;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch-type-1 .slider-card:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    top: -3px;
    left: 0;
    background-color: var(--CouplePurple);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 100%;
}

.switch-type-1 input:checked + .slider-card {
    background-color: #E8ECF2;
}

.switch-type-1 input:checked + .slider-card:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}

.switch-type-1 .label {
    cursor: pointer;
}

body .hidden {
    display: none!important;
}

.btnChkoutPaySubmit {
    background: linear-gradient(92.74deg, #FFF275 0.94%, #F9A300 101.84%);
    font-family: var(--rubik), sans-serif;
    color: #6A39D2;
    border-radius: 200px;
    border: 0;
    padding: 9px 16px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    display: block;
    width: 100%;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

.btnChkoutPaySubmit:hover {
    transform: scale(1.05);
}

@media only screen and (min-width: 1280px) {
    .btnChkoutPaySubmit {
        font-size: 16px;
        padding: 12px 16px;
    }
}

input.cc-number {
    width: 100%;
    background: #fff url(../img/cc-number.svg) center left 10px no-repeat;
    background-size: 28px auto;
    padding-left: 50px;
}

.cc-card-names {
    font-size: 12px;
    font-weight: 400;
}

@media only screen and (min-width: 1280px) {
    .cc-card-names {
        font-size: 14px;
    }
}

.AuthorizeNetSeal {
    grid-row: span 2;
    align-self: end;
}

.AuthorizeNetSeal img {
    display: block;
    width: 85px;
}

@media only screen and (min-width: 1280px) {
    .AuthorizeNetSeal img {
        width: 90px;
    }
}

.mr-profile {
    display: grid;
    align-content: center;
    gap: min(0.289vw, 6px);
}

.v2 .mr-profile {
    gap: 0.289vw; /* 5px */
}

.mr-profile-bio {
    font-family: var(--nunito);
    /* border: 1px solid var(--CoupleGray700); */
    border-radius: min(0.579vw, 12px); /* 10px */
    padding: min(0.289vw, 6px) min(0.579vw, 12px) min(0.579vw, 12px) min(0.579vw, 12px); /* 5px 10px 10px 10px */
    line-height: 1.4;
    /* max-height: min(6.24vw, 130px); */ /* 108px */
    /* overflow-y: auto; */
    margin-top: min(0.463vw, 10px); /* 8px */
    font-size: clamp(8px, 0.81vw, 14px);
}

.mr-profile-bio p {
    word-wrap: break-word;
}

.mr-profile-bio.v2 {
    padding: 0;
    margin-top: 0.463vw; /* 8px */
    font-size: 0.81vw; /* 14px */
    line-height: 1.1vw; /* 19px */
}

.mr-profile-bio.v2.mt21 {
    margin-top: 1.215vw;
}

.inner .mr-profile-bio {
    border: 0;
    overflow: visible;
    max-height: unset;
    border-bottom: 1px solid #BDC3CA;
    border-radius: 0;
    padding-bottom: min(1.042vw, 20px); /* 18px */
    padding-left: 0;
    padding-right: 0;
}

#greenToDateTransition .mr-profile-bio {
    padding-left: 0;
    padding-right: 0; 
}

#greenToDateTransition .progress-bar-title2.min {
    margin-left: 0;
    margin-right: 0;
}

/*.mr-profile-bio .mr-interstitial-title,
.mr-profile-bio .interests-list-1 > dt {
    font-weight: 700;
    font-family: var(--nunito);
    font-size: clamp(18px, 1.042vw, 25px);
}

.mr-profile-bio .mr-interstitial-title {
    margin-top: 0;
}*/

.mr-profile-bio::-webkit-scrollbar
{
    width: 10px;
}

.mr-profile-bio::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 16px 16px transparent;
    border: solid 3px transparent;
    height: 34px;
}

.mr-profile-bio::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 4px 4px var(--CouplePurple);
    border: solid 3px transparent;
    border-radius: 14px;
    min-height: 30px;
}

.mr-profile-bio::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 5px;
}

.mr-profile-bio::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 5px;
}

.mr-profile-bio::-webkit-scrollbar-button
{
  display: none;
}

/* This or That Game */

button.this-that-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
    border-radius: 76px;
    border: 0;
    width: min(14.12vw, 300px);
    aspect-ratio:  122 / 21;
    font-weight: 700;
    font-size: clamp(10px, 0.926vw, 19px);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    max-width: 33%;
    line-height: 1;
}

button.this-that-button.blue {
    background-color: var(--CouplePurple);
}

button.this-that-button.red {
    background-color: var(--CoupleRedPrime);
}

button.this-that-button:hover {
    transform: translateX(-50%) scale(1.05);
    transform-origin: center center;
}

.this-that-container {
    height: 15.948vh;
    aspect-ratio: 3 / 1;
    padding: 4.526vh 4.095vh 3.664vh 4.095vh;
    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 1.078vh; /* 10px */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 18%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: 10% 11%;
    align-content: center;
    justify-items: center;
    z-index: 10;
}

.this-that-container2 {
    height: 10.776vh;
    aspect-ratio: 47 / 20;
    display: grid;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6%;
    align-items: center;
    gap: 18%;
    z-index: 10;
}

.this-that-container2 > div {
    display: flex;
    align-items: center;
    gap: 4%;
}

button.this-that-button2 {
    width: 100%;
    aspect-ratio:  82 / 21;
    font-family: var(--rubik), sans-serif;
    font-weight: 700;
    font-size: 1.724vh;
    color: #fff;
    border: 0;
    border-radius: 200px;
    background-color: var(--CouplePurple);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

@media (min-aspect-ratio: 4/3) {
    .this-that-button2 {
        font-size: 0.926vw;
    }
}

.this-that-button2.v4 {
    cursor: default;
}

button.this-that-button2.yellow {
    background-color: #F6AA01;
}

.this-that-button2:hover {
    transform: scale(1.05);
}

.this-that-button2.v2 {
    width: 9.491vw;
}

.this-that-button2:is(div) {
    position: relative;
    cursor: auto;
    display: flex;
    align-items: center;
    padding-left: 1.157vw;
}

.this-that-button2 span {
    position: absolute;
    right: 0.694vw;
    cursor: pointer;
}

.answered {
    background-color: var(--CoupleGray700);
    height: 2.586vh;
    aspect-ratio: 8 / 3;
    border-radius: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    font-size: 1.509vh;
    font-weight: 400;
}

.this-that-container1 {
    width: 100%;
    border: 1px solid #3C414C;
}

/* TRIVIA */

.mr-trivia {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #30363e;
    backdrop-filter: blur(60px);
    display: grid;
    align-content: space-evenly;
    padding: 0 1.157vw 0 1.157vw;
    color: #fff;
    font-size: 1.042vw;
    text-align: center;
}

.mr-trivia.v2 {
    align-content: start;
}

.mr-trivia p {
    padding: 0 1.157vw;
    font-size: max(18px, 1.042vw);
}

.mr-trivia-grid {
    display: grid;
    grid-template-columns: repeat(2, 13.31vw);
    gap: 1.736vw 0;
    justify-content: space-around;
}

.mr-trivia-grid li {
    background-color: #fff;
    border: 0.116vw solid #5A5AD6;
    height: 2.894vw;
    border-radius: 90px;
    color: #444;
    font-size: 0.81vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.mr-trivia-grid li:hover {
    background-color: #5A5AD6;
    color: #fff;
}

hr.white {
    border: 0;
    border-top: 1px solid #fff;
}

.mr-trivia-answer {
    color: var(--CoupleBlue400);
    padding: 1.736vw 0;
    font-size: max(18px, 1.042vw);
}

.mr-trivia-grid-split3 {
    display: block;
    width: 33.33%;
    margin: 0 auto;
    font-size: 0.868vw;
    font-weight: 700;
    gap: 0 1.273vw;
    padding: 1.273vw 0;
}

.mr-trivia-grid-split3 li {
    height: 1.736vw;
    border-radius: 2.894vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mr-trivia-grid-split3 li.correct {
    background: var(--CoupleBlue400) url(../img/thumbUp.svg) center left 0.81vw no-repeat;
    background-size: 0.868vw auto;
    padding-left: 1.157vw;
}

.mr-trivia-grid-split3 li.wrong {
    background: var(--error) url(../img/thumbDown.svg) center left 0.81vw no-repeat;
    background-size: 0.868vw auto;
    padding-left: 1.157vw;
}

.mr-trivia-grid-split3 li.timesup {
    background: var(--CoupleGray700 )url(../img/timesUp.svg) center left 0.81vw no-repeat;
    background-size: 0.637vw auto;
    color: #444;
}

.mr-trivia-flex {
    padding: 1.273vw.694vw 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.694vw;
    font-size: 0.81vw;
}

.mr-trivia-flex li {
    padding: 0.463vw 0.694vw 0 0.694vw;
    height: 2.083vw;
    background-color: var(--CoupleBlue400);
    border-radius: 5.208vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mr-trivia-flex li.wrong {
    background-color: var(--CoupleRedPrime);
}

.mr-trivia-flex li.timesup {
    background-color: var(--CoupleGray700);
    color: #444;
}

hr.white {
    border: 0;
    border-top: 1px solid #fff;
}

/* END This or That Game */

hr.mr-line {
    border: 0;
    border-top: 1px solid #BDC3CA;
    width: 100%;
    align-self: start;
    margin-top: 0.694vw;
}

hr.mr-line.v2 {
    margin-top: 2.315vw;
}

hr.mr-line.v3 {
    margin-top: unset;
    margin-bottom: 1.736vw;
}

hr.mr-line.v4 {
    margin-top: 1.389vw;
}

hr.mr-line-1 {
    padding-top: 2.4vw;
    margin-top: 1.6vw;
    border: 0;
    border-top: 1px solid #BDC3CA;
    width: 100%;
    align-self: start;
}

hr.mr-line-2 {
    margin-top: 2.85vw;
    margin-bottom: 2.315vw;
    border: 0;
    border-top: 1px solid #BDC3CA;
    width: 100%;
    align-self: start;
}

.contdown-no {
    background: linear-gradient(113.97deg, #26C1E3 -13.43%, #702AD0 99.9%);
    height: 3.241vw;
    padding: 0 1.968vw;
    border-radius: 3.472vw;
    color: #fff;
    font-family: var(--rubik), sans-serif;
    font-size: 1.852vw;
    font-weight: 600;
    width: 68%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(../img/calendar-icon.svg) top left no-repeat;
    width: 15px;
    height: 16px;
    border-width: 0;
}

.mr-i-t2.v2 {
    margin-bottom: 1.042vw;
    font-family: var(--rubik), sans-serif;
    font-size: 1.667vw;
    font-weight: 500;
}

.mr-interstitial-container.v5 {
    background-color: #f2f3f5;
    display: grid;
    padding: 1.927vw 1.968vw 1.615vw 1.968vw;
    aspect-ratio: unset;

}

.mr-interstitial-container.v5 .mr-i-t2.v2 {
    margin-top: 0;
}

.mr-interstitial-container.v5 .btn-yellow.v3 {
    margin: 2.199vw 0 0.463vw 0;
    gap: 5px;
}

@media only screen and (min-width: 1920px) {
    .mr-interstitial-container.v5 {
        width: max(652px, 30vw);
        padding: 35px 55px 45px 55px;
    }
}

/*.mr-scrolled-container {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.389vw 1.968vw;
}

@-moz-document url-prefix() {
    .mr-scrolled-container {
        scrollbar-width: thin;
        scrollbar-color: var(--CouplePurple) transparent;
    }
}

.mr-scrolled-container .dashboard-circle {
    margin-bottom: 0;
}

.mr-scrolled-container::-webkit-scrollbar
{
    width: 0.579vw;
}

.mr-scrolled-container::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 0.926vw 0.926vw transparent;
    border: solid 3px transparent;
}

.mr-scrolled-container::-webkit-scrollbar-thumb
{
    box-shadow: inset 0 0 0.231vw 0.231vw var(--CouplePurple);
    border: solid 0.174vw transparent;
    border-radius: 0.81vw;
}

.mr-scrolled-container::-webkit-scrollbar-track-piece:end
{
    background: transparent;
    margin-bottom: 0.289vw;
}

.mr-scrolled-container::-webkit-scrollbar-track-piece:start
{
    background: transparent;
    margin-top: 0.289vw;
}*/

/* 
#datecard-settings-wrapper {
    width: 500px;
    max-height: 600px;
}

#datecard-settings-wrapper .stats {
    position: absolute;
    border-top: 1px solid #444;
    padding: 14px 0 20px 0;
    width: calc(100% - 28px);
    margin: 0 14px;
    height: 96px;
    justify-content: space-between;
    bottom: 0;
}
#datecard-settings-wrapper:not(.open) {
    right: -510px;
} */

/* Summary Couple Calls*/

.rd44-content.v3 {
    margin: 0.463vw 0.289vw 2.865vw 0; /*8px 5px 55px 0*/ /* Aug 2024 */
    min-height: min(200px, 16vh);
    /* max-height: 8.600vw; */
    height: unset;
    max-height: min(33.5vh, 440px);
    background-color: #fff;
    padding: 0.405vw 0; /*7px 0*/
    outline: solid 1px #D7D7D7; 
    border-radius: 1.042vw; /*18px*/
    border-right: 0.231vw solid transparent; /* 4px */
}

@media only screen and (min-width: 1920px) {
    .rd44-content.v3 {
        margin: 8px 5px 55px 0;
        /* min-height: 240px;
        max-height: 411px; */
        padding: 7px 0;
        border-radius: 18px;
        border-right: 4px solid transparent;
        gap: 8px;
    }
}

/*@media only screen and (min-height: 660px) {
    .rd44-content.v3 {
        min-height: 13.600vw;
        max-height: 13.600vw;
    }
}

@media only screen and (min-height: 860px) {
    .rd44-content.v3 {
        min-height: 13.600vw;
        max-height: 23.799vw;
    }
}

@media (min-aspect-ratio: 5/3) and (max-height: 768px) {
    .rd44-content.v3 {
        min-height: 10.7vw;
        max-height: 10.7vw;
    }
}

@media (max-height: 600px) {
    .rd44-content.v3 {
        min-height: auto;
        max-height: 20vh;
    }
} */

.rd44-content.v3 .row {
    grid-template-columns: 3.125vw minmax(0, 1fr) 8.681vw 3.958vw; /*54px 1fr 150px 76px*/
    height: 3.125vw; /*54px*/
    margin: 0 0.231vw 0 0.405vw; /* 0 4px 0 7px */
    font-size: 0.926vw; /*16px*/
    font-weight: 700;
}

@media only screen and (min-width: 1920px) {
    .rd44-content.v3 .row {
        grid-template-columns: 54px minmax(0, 1fr) 150px 76px;
        height: 54px;
        margin: 0 4px 0 7px;
        font-size: 16px;
    }
}


.mr-sub-ic100p-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    position: relative;
}

.mr-sub-ic100p.grey {
    font-family: var(--rubik);
    background-color: var(--CoupleGray700);
    font-size: 0.81vw; /*14px*/
    font-weight: 400;
}

@media only screen and (min-width: 1920px) {
    .mr-sub-ic100p.grey {
        font-size: 14px;
    }
}

.mr-sub-ic100p.grey.f14 {
    font-size: 14px;
}

dl.gift-select-custom.v2 {
    width: calc(100% - 0.926vw); /* 16px */
    height: 1.667vw; /*32px*/
   justify-self: center;
   margin: 0 0.463vw; /* 8px */
}

@media only screen and (min-width: 1920px) {
    dl.gift-select-custom.v2 {
        width: calc(100% - 16px);
        height: 32px;
        margin: 0 8px;
    }
}

dl.gift-select-custom.v2 dt {
    width: 100%;
    height: 1.667vw; /*32px*/
    padding: 0;
    background: #fff url('../img/arrow-grey2.svg') center right 0.365vw no-repeat; /* 7px */
    background-size: 0.625vw auto; /* 12px */
    border-radius: 0.417vw; /* 8px */
    box-shadow: 0.26vw 0.26vw 0.938vw 0px rgba(0, 0, 0, 0.15); /* 5px 5px 18px 0px */
    font-size: 0.833vw; /* 16px */
    display: grid;
    grid-template-columns: 1.667vw 1fr;
    justify-content: start;
    gap: 0.8em;
}

@media only screen and (min-width: 1920px) {
    dl.gift-select-custom.v2 dt {
        grid-template-columns: 32px 1fr;
        height: 32px;
        background: #fff url('../img/arrow-grey2.svg') center right 7px no-repeat;
        background-size: 12px auto;
        border-radius: 8px;
        box-shadow: 5px 5px 18px 0px rgba(0, 0, 0, 0.15);
        font-size: 14px;
    }
}

dl.gift-select-custom.v2 dt img {
    width: 1.146vw; /*22px*/
}

@media only screen and (min-width: 1920px) {
    dl.gift-select-custom.v2 dt img {
        width: 22px;
    }
}

dl.gift-select-custom.v2 dt > span:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E1E3E8; /* 0.058vw */
    border-radius: 0.463vw; /* 8px */
    height: 100%;
    aspect-ratio: 1/1;
}

@media only screen and (min-width: 1920px) {
    dl.gift-select-custom.v2 dt > span:first-of-type {
        border-radius: 8px;
        border: 1px solid #E1E3E8;
    }
}

dl.gift-select-custom.v2.opened dt {
    background: #fff url('../img/arrow-grey2.svg') center right 0.365vw no-repeat; /* 7px */
    background-size: 0.625vw auto; /* 12px */
    border-radius: 0.417vw; /* 8px */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.1s ease-in;
}

.rd44-content > .row:nth-of-type(n+4) dl.gift-select-custom.v2.opened dt {
    border-radius: 0.417vw; /* 8px */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.mr-sub-ic32-wrapper.v2 {
    width: 1.852vw;
    height: 1.852vw;
    border-radius: 100%;
    position: relative;
}

@media only screen and (min-width: 1920px) {
    .mr-sub-ic32-wrapper.v2 {
        width: 32px;
        height: 32px;
    }
}
.mr-sub-ic100p-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    position: relative;
}

@media only screen and (min-width: 1920px) {
    dl.gift-select-custom.v2.opened dt {
        background: #fff url('../img/arrow-grey2.svg') center right 7px no-repeat;
        background-size: 12px auto;
    }

    .rd44-content > .row:nth-of-type(n+4) dl.gift-select-custom.v2.opened dt {
        border-radius: 8px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

dl.gift-select-custom.v2 dd {
    width: 100%;
    top: 1.667vw; /* 32px */
    border-bottom-right-radius: 0.313vw; /* 6px */
    border-bottom-left-radius: 0.313vw; /* 6px */
    box-shadow: 0.26vw 0.625vw 0.938vw 0px rgba(0, 0, 0, 0.05); /* 5px 12px 18px 0px */
    font-weight: normal;
}

.rd44-content dl.gift-select-custom.v2 dd.topPosLeft {
    bottom: 1.86vw; /*32px*/
    box-shadow: 0.26vw -0.625vw 0.938vw 0px rgba(0, 0, 0, 0.05); /* 5px 12px 18px 0px */
    border-top-right-radius: 0.313vw; /* 6px */
    border-top-left-radius: 0.313vw; /* 6px */
}

@media only screen and (min-width: 1920px) {
    dl.gift-select-custom.v2 dd {
        top: 32px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        box-shadow: 5px 12px 18px 0px rgba(0, 0, 0, 0.05);
    }

    .rd44-content .row dl.gift-select-custom.v2 dd.topPosLeft {
        bottom: 32px;
        box-shadow: 5px -12px 18px 0px rgba(0, 0, 0, 0.05);
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
    }
}


dl.gift-select-custom.v2 dd span {
    height: 1.667vw; /*32px*/
}

dl.gift-select-custom.v2.opened dd {
    font-size: 0.810vw; /*14px*/
    z-index: 100;
}

@media only screen and (min-width: 1920px) {
    .rd44-content .row dl.gift-select-custom.v2 dd.topPosLeft {
        bottom: 32px;
    }
    
    dl.gift-select-custom.v2 dd span {
        height: 32px;
    }

    dl.gift-select-custom.v2.opened dd {
        font-size: 14px;
    }
}

/* Off camera button left nav */

.off-cam {
    position: relative;
    width: 100%;
    height: 36px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.off-cam.active {
    background-color: #5A5AD6;
    color: #fff;
}

.off-cam svg {
    color: #383838;
    fill: #383838;
}

.off-cam.active svg {
    color: #F9C701;
    fill: #F9C701;
}

.off-cam.disabled {
    background-color: #d7dae0 !important;
    cursor: default;
    color: #444;
}

.off-cam.disabled {
    /* color: */
}

.off-cam.disabled svg {
    color: #999;
    fill: #999;
}

.bs-line {
    width: 2px;
    height: 2.33em;
    margin: auto;
    background-color: #5A5AD6;
}

ul.bs-list li.bs-line {
    cursor: default;
}

.swiper-wrapper.swiper-offC .btn-yellow {
    line-height: 1;
    text-transform: capitalize;
    min-width: 75px;
}

/* END */

/*Payment custom on desktop*/
#authorizenet-container .overlay-v2:not(.hide) {
    left: 0;
    z-index: 9999999;
    position: fixed;
    right: 0;
    display: table;
    margin: 0 auto;
    top: 40px;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}

#authorizenet-container .overlay-container {
    position: relative;
    width: 100%;
    max-width: 630px;
    background-color: #fff;
    padding: 15px 0 15px 0;
    border-radius: 10px;
    text-align: center;
    color: var(--TextHighEmphasis);
    font-family: var(--nunito), sans-serif;
    font-size: 18px;
    display: none;
    overflow: hidden;
    height: auto;
    transition: all 0.3s;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05);
}

#authorizenet-container .overlay-container.coin-purchasing {
    width: 400px;
    max-width: 100%;
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .overlay-container  {
        width: 770px;
        padding: 20px 0 20px 0;
    }
    #authorizenet-container .checkout-grid .f16.gap5 {
        font-size: 20px;
    }
}

@media only screen and (min-height: 721px) {
    #authorizenet-container > .overlay-v2  {
        top: 68px;
    }
}

#authorizenet-container .overlay-container.w780 {
    max-width: 780px;
    padding: 0;
}

@media (min-aspect-ratio: 16/9) and (max-height: 730px) {
    #authorizenet-container .overlay-container.w780 {
        padding: 0;
    }
}

#authorizenet-container .overlay-container.w860 {
    width: 860px;
    max-width: 100%;
    padding: 40px 0;
}

#authorizenet-container .overlay-container.w940 {
    width:  770px;
    max-width: 100%;
    padding: 20px 0;
}

#authorizenet-container .overlay-close {
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--TextHighEmphasis);
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 20;
}

#authorizenet-container .overlay-close#cnfmCloseSpan {
    top: 5px;
    right: 8px;
}

#authorizenet-container .or-title2 {
    font-family: var(--rubik), sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--CoupleBlue400);
    margin: 26px 0;
}

#authorizenet-container .or-title2.mb5 {
   margin: 26px 0 5px 0; 
}

#authorizenet-container .or-subtitle2 {
    font-size: 16px;
}

#authorizenet-container .or-subtitle2.mb65 {
    margin-bottom: 65px;
}

#authorizenet-container #cpPrchOrdConfirmTxtSub {
    padding-top: 5px;
}

/*a.oc-top-menu-open.mr-s-open img,
ul.mr-top-search-list a.mr-s-open img {
    width: 3px;
}*/

@media only screen and (min-width: 920px) {
    #authorizenet-container .split-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 919px) {
    #authorizenet-container .overlay-close {
        top: 10px;
        right: 15px;
    }
}

#authorizenet-container .checkout-grid.h292 {
    overflow-y: scroll;
    padding: 10px 0 10px 0;
}

#authorizenet-container .checkout-grid li {
    position: relative;
    display: grid;
    align-items: start;
}

@media only screen and (min-width: 620px) {
    #authorizenet-container .checkout-grid li {
        grid-template-columns: 64px 3fr 1fr;
        gap: 0 12px;
    }
}

#authorizenet-container .checkout-grid li.v2 {
    grid-template-rows: 1fr 1fr;
}

#authorizenet-container .checkout-grid li .row-span-2 {
    grid-row: span 2;
}

#authorizenet-container .cg-details {
    display: flex;
    align-items: start;
    flex-direction: column;
    font-size: 12px;
    color: #444;
    line-height: 1.8;
    text-align: left;
    align-self: start;
}

#authorizenet-container .cg-details strong {
    font-weight: 700;
    font-size: 16px;
    color: var(--TextHighEmphasis);
}

@media only screen and (min-width: 1280px) {
    #authorizenet-container .cg-details {
        margin-top: -8px;
    }
    #authorizenet-container .cg-details span {
        font-size: 14px;
        grid-template-columns: 1fr 70px;
        align-self: start;
    }
    #authorizenet-container .cg-details strong {
        font-size: 20px;
    }
}

@media only screen and (min-width: 810px) {
    #authorizenet-container .cg-detail-multiline {
        line-height: 1.2;
    }
}

#authorizenet-container .checkout-grid .f16 {
    font-size: 16px;
    font-weight: 700;
}

@media only screen and (min-width: 810px) {
    #authorizenet-container .checkout-grid .f15 {
        font-size: 15px;
    }
}

#authorizenet-container .cg-couple-coin2 {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 1 / 3;
}

#authorizenet-container .cg2-row {
    position: relative;
}

#authorizenet-container input.cc-number {
    width: 100%;
    background: #fff url(/room/img/cc-number.svg) center left 10px no-repeat;
    background-size: 28px auto;
    padding-left: 50px;
}

/* The switch - the box around the slider */
#authorizenet-container .switch-type-1 {
    position: relative;
    display: inline-block;
}

#authorizenet-container .switch-type-1.disabled {
    pointer-events: none;
}

#authorizenet-container .switch-type-1 .label {
    cursor: pointer;
}

#authorizenet-container select.sel-type-1 {
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #E8ECF2;
    background: url(../img/arrow-grey.svg) no-repeat right 8px center;
    padding: 0 10px 0 10px;
    background-size: 10px auto;
    margin: 0;
    min-height: 30px;
    height: 24px;
    border-radius: 15px;
    font-family: var(--nunito), serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
    cursor: default;
    color: #444444;
    width: auto;
}

.mr-t-a-coins#prof_toggleCC:hover {
    background:#5a5ad6;
    color: #fff;
}

#authorizenet-container #payment-message:not(.error) {
    color: rgb(105, 115, 134);
    font-size: 16px;
    line-height: 20px;
    padding-top: 12px;
    text-align: center;
}



/* Wheel */

.mr-wheel-container {
    width: 42.5%;
    background-color: #fff;
    border-radius: 0.694vw; /*12px*/
    position: absolute;
    left: 50%;
    /* top: calc(50% + 1.8vw); 48px */
    top: 49%;
    transform: translate(-50%, -50%);
    padding: 2.315vw 5.787vw; /* 40px 100px*/
}

@media (min-aspect-ratio: 21/9) {
    .mr-wheel-container {
        width: 39%;
    }
}

.mr-wc-title {
    font-family: var(--rubik);
    font-size: 2.315vw; /* 40px */
    display: flex;
    justify-content: center;
    padding: 0 0 1em 0;
}

.mr-wheel-close {
    position: absolute;
    font-size: 0.926vw; /* 16px */
    top: 0.926vw; /*16px*/
    right: 0.926vw; /*16px*/
    cursor: pointer;
}

.mr-wheel-big {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 3.819vw 0px rgba(0, 0, 0, 0.45); /* 66px */
    outline: 0.174vw solid #E3E3E3; /* 3px */
    padding: 0.868vw; /* 19px */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    --wheel-content: '250 cc';
    &::after {
        content: var(--wheel-content);
        width: 7.6vw; 
        aspect-ratio: 96 / 83;
        background: url(../img/wheel-triangle.svg) 0 0 no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -3vw; 
        left: 50%;
        transform: translateX(-50%);
        -webkit-filter: drop-shadow( 0.289vw 0.579vw 1.157vw rgba(0, 0, 0, .3));
        filter: drop-shadow( 0.289vw 0.579vw 1.157vw rgba(0, 0, 0, .));
        /* 5px 10px 20px */
        text-align: center;
        font-family: var(--rubik);
        font-weight: 700;
        font-size: 0.81vw; /* 14px */
        padding: 1.4em 0.8em 0 0;
        text-align: center;
    }
}

.mr-wheel-of-fortune {
    /* --_items: 16; */
    all: unset;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    border: 0.174vw solid #E3E3E3; /* 3px */
    overflow: hidden;
    container-type: inline-size;
    /* direction: ltr;
    display: grid;
    place-content: center start;
    direction: ltr; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    font-family: var(--rubik);
    font-weight: 700;
    /* box-shadow: inset 0px 0 3.819vw 0px rgba(0, 0, 0, 0.45); 66px */
}

.mr-wheel-of-fortune li {
    align-content: center;
    background: deepskyblue;
    display: grid;
    font-size: 7cqi;
    grid-area: 1 / -1;
    list-style: none;
    padding-left: 1ch;
    transform-origin: center right;
    width: 50cqi;
    color: #fff;
    rotate: calc(360deg / var(--_items) * calc(var(--_idx) - 1));
    background: hsl(calc(360deg / var(--_items) * calc(var(--_idx))), 100%, 75%);
    height: calc((2 * pi * 50cqi) / var(--_items));
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    display: flex;
    align-items: center;
    gap: 2cqi;
}

  .mr-wheel-of-fortune li {
    &:nth-of-type(1) { --_idx: 1; background-color: #6ABBDF; }
    &:nth-of-type(2) { --_idx: 2; background-color: #6ABBDF; }
    &:nth-of-type(3) { --_idx: 3; background-color: #6342C9; }
    &:nth-of-type(4) { --_idx: 4; background-color: #E63E29; }
    &:nth-of-type(5) { --_idx: 5; background-color: #6ABBDF; }
    &:nth-of-type(6) { --_idx: 6; background-color: #6ABBDF; }
    &:nth-of-type(7) { --_idx: 7; background-color: #6342C9; }
    &:nth-of-type(8) { --_idx: 8; background-color: #F4A301; }
    &:nth-of-type(9) { --_idx: 9; background-color: #E63E29; }
    &:nth-of-type(10) { --_idx: 10; background-color: #6ABBDF; }
    &:nth-of-type(11) { --_idx: 11; background-color: #6342C9; }
    &:nth-of-type(12) { --_idx: 12; background-color: #F4A301; }
    &:nth-of-type(13) { --_idx: 13; background-color: #6ABBDF; }
    &:nth-of-type(14) { --_idx: 14; background-color: #E63E29; }
    &:nth-of-type(15) { --_idx: 15; background-color: #F4A301; }
    &:nth-of-type(16) { --_idx: 16; background-color: #6342C9; }
  }

  .mr-wheel-of-fortune li img {
    max-width: unset;
    width: 4cqi;
  }

  .mr-wheel-of-fortune-button {
    aspect-ratio: 1 / 1;
    background: hsla(0, 0%, 100%, .8);
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    place-self: center;
    width: 8cqi;
    z-index: 10;
    position: relative;
    box-shadow: 0.174vw 0.694vw 2.315vw 0px rgba(0, 0, 0, 0.45); /* 3px 12px 40px */
    border: 0.289vw solid #E2E2E2; /* 5px */
    background-position: center center;
    background-size: auto 100%;
  }


body.site-map {
    padding: 10% 5% 5% 10%;
}

.index {
    /* width: min(1000px, 60vw); */
    --min: 30ch;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
    font-family: var(--nunito);
    line-height: 1.6;
    border-top: 1px solid var(--CoupleGray100);
    padding: 0 0 10% 0;
}

.index a {
    color: #444;
    text-decoration: none;
}

.index a:hover {
    text-decoration: underline;
}

.mr-submenu-button {
    position: absolute;
    z-index: 3;
    bottom: 7px;
    left: 3px;
    width: 300px;
    height: 48px;
    background: linear-gradient(94.38deg, #FEED6E -12.12%, #F9A807 80.23%);
    border-radius: 6px;
    border: 0;
    cursor: pointer;
    font-family: var(--rubik);
    font-size: 16px;
    font-weight: 700;
    color: #702AD0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

@media  only screen and (max-width: 1300px) {
    .mr-submenu-button {
        width: 220px;
    }
}

.mr-submenu-button svg {
    stroke: #702AD0;
    color: #702AD0;
}

.mr-submenu-button:disabled,
.mr-submenu-button[disabled] {
  border: 1px solid #DADFE6;
  background: #F3F5F9;
  color: #C1C7CF;
  pointer-events: none;
  cursor: not-allowed;
}

.mr-submenu-button:disabled svg,
.mr-submenu-button[disabled] svg {
    stroke: #C1C7CF;
    color: #C1C7CF;
    fill: #C1C7CF;
}

.overflowY .mr-submenu-button {
    width: calc(100% - 10px);
    left: auto;
}

input.field-type-5 {
    height: 2.89vw; /* 50px */
    width: 67cqi;
    margin: 2.75cqi auto 0 auto; /* 10px */
    border: 1px solid var(--CoupleGray700);
    background-color: #F3F5F9;
    border-radius: 0.46vw; /* 8px */
    padding: 0 0 0 0.58vw; /* 10px */
    font-size: 3.85cqi; /* 14px */
}

input.field-type-5::placeholder {
    color: #444;
}

.sf-waiting {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 36px 0 0 0;
}

.sf-declined {
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-wrap: nowrap;
}

.list-type-1-wrapper {
    margin-top: 2.32cqi;
    border: 0.193cqi solid #D7D7D7; /* 1px */
    background-color: #fff;
    border-radius: 1.925cqi; /* 10px */
    padding: 1.735cqi 0.96258cqi 1.735cqi 1.735cqi; /* 9px 5px 9px 9px*/
}

.list-type-1 {
    padding: 0 0.96258cqi 0 0;  
    display: grid;
    gap: 1.735cqi; /* 9px */
    max-height: 50.6316cqi; /* 263px */
    overflow: auto;
}

.list-type-1::-webkit-scrollbar {
    width: 0.96258cqi; /* 5px */
}

/* Track */
.list-type-1::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
.list-type-1::-webkit-scrollbar-thumb {
    background: var(--CouplePurple);
    border-radius: 3.85cqi; /* 14px */
}

/* Handle on hover */
.list-type-1::-webkit-scrollbar-thumb:hover {
    background: var(--CouplePurple);
}

.list-type-1::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 2.1177cqi; /* 11px */
 }
 
 .list-type-1::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 2.1177cqi; /* 11px */
 }

.lt-row {
    display: grid;
    grid-template-columns: 10.39586cqi 1fr 30.0325cqi 30.0325cqi; /* 54px 1fr 156px 156px */
    gap: 2.88774cqi; /* 15px */
    align-items: center;
    font-size: 3.08026cqi; /* 16px */
}

.lt-ic100p {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    position: relative;
}

.lt-btn {
    border: 0;
    height: 6.16052cqi; /* 32px */
    border-radius: 1.54013cqi;
    font-size: 3.08026cqi; /* 16px */
    font-weight: 700;
    color: #fff;
    font-family: var(--nunito);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.lt-btn:hover {
    
}

.lt-btn.purple {
    background-color: #702AD0;
}

.lt-btn.red {
    background-color: #E63E29;
}

.lt-sub-ic100p {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1.925cqi; /* 10px */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--CoupleGray700);
    font-size: 2.69523cqi; /* 14px */
    font-family: 'Rubik';
    font-weight: 400;
}


.right-drawer-444:has(.leaderboard-drawer) {
    width: 374px;
}

.leaderboard-drawer {
    padding: 0 7px 15px 17px;
    text-align: center;
    display: grid;
    font-size: 14px;
    /*min-height: 245px;*/
}

.leaderboard-list {
    display: grid;
    font-family: var(--rubik);
    font-weight: 400;
    font-size: 14px;
    margin-top: 18px;
    max-height: 331px;
    overflow-y: auto;
    counter-reset: item;
    padding: 1px 0 0 0;
}

.leaderboard-list li.ll-row {
    list-style-type: decimal;
    list-style-position: inside;
    height: 56px;
    display: grid;
    grid-template-columns: 44px 48px 1fr 62px;
    border: 1px solid #D6DBE4;
    gap: 11px;
    border-radius: 8px;
    background-color: var(--CoupleGray700);
    justify-items: start;
    margin: -1px 7px 0 0;
    padding: 0 14px 0 0;
    cursor: pointer;
}

/*.leaderboard-list li.ll-row:first-of-type::before {
    content: "1234.";
    justify-self: end;
}*/

.leaderboard-list li.ll-row::before {
    content: attr(data-user-position) ".";
    justify-self: end;
}

.leaderboard-list li.ll-row:nth-child(even) {
    background-color: #fff;
}

.ll-score {
    width: 62px;
    height: 27px;
    font-family: var(--nunito);
    font-weight: 700;
    font-size: 14px;
    background-color: #5A5AD6;
    color: white;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ll-ic {
    width: 48px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    overflow: hidden;
}

.ll-ic img {
    width: 100%;
}

/* Right drawer tabs */

.rd-444-hasTabs {
    position: fixed;
    width: 380px;
    right: -618px;
    top: 46px;
    z-index: 10;
    transition: all 0.5s ease-in;
    max-height: 633px;
}

.rd-444-hasTabs.open {
    right: 5px;
}

.rd-444-hasTabs .right-drawer-444 {
    position: relative;
    width: 100%;
    right: 0;
    top: 33px;
    max-height: 633px;
    z-index: inherit;
}

.rd-tabs {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 44px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rd-tabs li {
    background-color: red;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #E0E4EB;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 5px 0 0 0;
    font-size: 18px;
    color: #B4B8C0;
    cursor: pointer;
}

.rd-tabs li.active, .rd-tabs li:hover {
    background-color: white;
    color: var(--CoupleGray800);
}

@media only screen and (min-height: 721px) {
    .rd-444-hasTabs {
        top: 66px;
    }
}

/* Specificity */

@layer fonts {
    body .rubik {
        font-family: var(--rubik);
    }

    .f18R {
        font-size: 1.042vw;
    }
    .fw600 {
        font-weight: 600;
    }
}


/* BLUE SCROLLBARS */

/* width */
body .customScrollbar::-webkit-scrollbar {
    width: 5px;
}

/* Track */
body .customScrollbar::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
body .customScrollbar::-webkit-scrollbar-thumb {
    background: var(--CouplePurple);
    border-radius: 14px;
}

/* Handle on hover */
body .customScrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--CouplePurple);
}

body .customScrollbar::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 15px; 
 }
 
 body .customScrollbar::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 15px;
 }

body .inlineContainer {
    container-type: inline-size;
}


/* Jackpot */
.jackpot-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 74.07vh; /* 820px at 1080 height */
    padding: 0 0.42vw 0.42vw 0.42vw; /* 8px at 1920 viewport */
    border-radius: 1.35vw; /* 26px at 1920 viewport */
    background-color: rgba(10, 10, 12, 0.75);
    position: absolute;
    left: 50%;
    top: 48.7%;
    transform: translate(-50%, -50%);
    z-index: 12;
}

.jw-title {
    font-family: var(--rubik);
    font-size: 1.67vw; /* 32px at 1920 viewport */
    color: white;
    padding: 1.3vw 0 1.15vw 0; /* 25 0 22px 0 at 1920 viewport */
}

.jw-title span {
    color: #F9C701 ;
}

.jackpot-grid {
    width: 100%;
    aspect-ratio: 1/1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.42vw; /* 8px at 1920 viewport */
    position: relative;
}

.jackpot-grid.by1 li {
    width: 96%;
    justify-self: center;
}

.jackpot-grid.by1 svg {
    width: 16.6%;  /* 125px at 1920 viewport */
}

.jackpot-grid.by1 li span {
    width: calc(100% - 0.63vw); /* 12px at 1920 viewport */
    height: 4.27vw; /* 82px at 1920 viewport */
    border-radius: 0.94vw; /* 18px at 1920 viewport */
    background-color: #5A5AD6;
    position: absolute;
    bottom: 0.36vw; /* 7px at 1920 viewport */
    font-family: var(--rubik);
    font-weight: 700;
    font-size: 1.67vw; /* 32px at 1920 viewport */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jackpot-grid.by2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.jackpot-grid.by3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.jackpot-grid.by4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.jackpot-grid.by5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.jackpot-grid.by6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.jackpot-grid.by7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
}

.jackpot-grid.by8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
}

.jackpot-grid li {
    width: 100%;
    background-color: #0F0C28;
    border-radius: 1.04vw; /* 20px at 1920 viewport */
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-out;
    overflow: hidden;
}

.jackpot-grid li img {
    height: 100%;
}

.jackpot-grid li.fade {
    animation-name: userFade;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}


@keyframes userFade {
    from {
      opacity: 100%;
      transform: scale(1.1);
    }
  
    to {
      opacity: 0;
      transform: scale(0.7);
    }
  }
.mob-lightbox.v3 {
    max-height: calc(100% - 170px);
    padding: 36px 10px 36px 20px;
    margin: 0 20px;
    overflow: hidden;
    top: 78px;
    display: grid;
    grid-template-rows: 60px minmax(0, 1fr);
}

@media only screen and (orientation:landscape) {
    .desktop-turn {
        display: none;
    }
    .mr-bg {
        display: block;
        height: 100%;
    }
    .notification-request-wrapper.show {
        display: block;
    }
}

@media only screen and (orientation:portrait) {
    .desktop-turn {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        background-color: white;
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: 500;
        animation-name: fadeIn;
        animation-duration: 1s;
    }
}

.guest-message {
    font-size: max(0.5vw, 14px);
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 10px;
}

.mr-user-menu:not(.search) .guest-message {
    border-bottom: 1px solid #BDC3CA;
}

.guest-message a {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    margin-top: 10px;
    border-top: 1px solid #BDC3CA;
}



.menu-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 14.58vw; /* 280px at 1080 height */
    border-radius: 0.52vw; /* 10px at 1920 viewport */
    padding: 1.25vw; /* 24px at 1920 viewport */
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
}

.mw-media {
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    border-radius: 0.52vw; /* 10px at 1920 viewport */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.63vw; /* 12px at 1920 viewport */
}

/* .mw-media video {
    height: 100%;
    width: 100%;
    object-fit: cover;
} */

.mw-media video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.mw-media img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.menu-wrapper ul {
    width: 100%;
    display: grid;
    grid-auto-rows: 1.88vw; /* 36px at 1920 viewport */
    gap: 0.21vw; /* 4px at 1920 viewport */
    font-size: 0.833333vw; /* 16px at 1920 viewport */;
    
}

.menu-wrapper ul li {
    cursor: pointer;
    border: 1px solid var(--CouplePurple);
    border-radius: 4.69vw; /* 90px at 1920 viewport */
    display: flex;
    align-content: center;
    align-items: center;
    gap: 1.35vw; /* 26px at 1920 viewport */
    padding: 0 0 0 0.16vw; /* 3px at 1920 viewport */
    transition: all 0.1s ease-in;
}

.menu-wrapper ul li:hover {
    background-color: var(--CouplePurple);
    color: white;
}

.menu-wrapper ul li > div {
    width: 1.46vw; /* 28px at 1920 viewport */
    aspect-ratio: 1/1;
    background-color: var(--CouplePurple);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-wrapper ul li:hover > div {
    background-color: white;
}

.menu-wrapper ul li svg {
    width: 0.76vw; /* 14.5px at 1920 viewport */
    color: white;
    fill: white;
}

.menu-wrapper ul li:hover svg {
    color: var(--CouplePurple);
    fill: var(--CouplePurple);
}

a.mw-close {
    position: absolute;
    top: 0.52vw; /*10px at 1920 viewport*/
    right: 0.47vw; /*9px at 1920 viewport*/
    text-decoration: none;
    color: var(--CoupleGray900);
    font-family: var(--nunito);
    font-size: 0.729167vw; /* 14px at 1920 viewport*/
    font-weight: 900;
    line-height: 1;
}

body .semiB {
    font-weight: 600;
}

body svg.mt2 {
    margin-top: 0.1vw; /* 2px at 1920 viewport */
}