html,body{
    min-height: 100%;
}
body{
    min-height: 100vh;
    min-height: 100svh;
}
body,article,div{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body::-webkit-scrollbar,
article::-webkit-scrollbar,
div::-webkit-scrollbar{display:none}
.carousel{
    overflow-x: unset;
    scroll-snap-type: unset;
    scroll-behavior: unset;
    -ms-overflow-style: unset;
    scrollbar-width: unset;
    display: block;
}
ol li:not(:last-child){
    margin-bottom: 1rem;
}
.input, input{
    background-color: var(--input-bg);
    border: 2px solid transparent;
    font-weight: 600;
}
.invalid input:not(input[type="radio"]),.invalid .input{
    border-color: var(--invalid);
}
input::placeholder,input.disabled{
    color: var(--input-phd-c);
    font-weight: 400;
}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{
    filter: invert(100%) brightness(200%) contrast(100%);
    font-size: var(--h6);
}
input[type="date"],input[type="time"]{
    font-weight: 400 !important;
}
input[type="radio"]:not(.form-control input[type="radio"]){
    display: none;
}
label{cursor:pointer}

/*home*/
.video-big video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-nav{
    background: url('../icon/Burger.svg') no-repeat center center;
    background-size: contain;
    width: 2.1rem;
    height: 2.1rem;
}
.btn-index{
    width: 6.35rem;
}
.btn-index > div{
    padding-bottom: 32.323232323%;
    background: url('../icon/Logo.svg') no-repeat center center;
    background-size: contain;
}
.btn-index.live > div{
    padding-bottom: 27.649769585%;
    background-image: url('https://ne.tykcdn.com/assets/livestream/img/logo.svg')
}
.home-nav-b-a{
    position: relative;
    background-image: var(--home-nav-b-a-bg);
    padding: .025rem .85rem .025rem 1.15rem;
}
.home-nav-b-a .cry{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%,-50%);
    width: 1.85rem;
}
.home-nav-b-a b{
    margin-left: .5rem;
}
.btn-chat > span:nth-child(1){
    background: url('../icon/chat-icon.png') no-repeat center center;
    background-size: contain;
    width: 2.15rem;
    height: 2.15rem;
    display: block;
}
.btn-profile > div{
    background: url('../icon/Profile.svg') no-repeat center center;
    background-size: 67.5%;
    width: 2.15rem;
    height: 2.15rem;
}

/*menu*/
.box-menu{
    background-image: var(--box-menu-bg);
    color: var(--box-menu-c);
    border-radius: 8px;
    font-size: var(--fsmall2);
    font-weight: 600;
}
/*end menu*/

.bg-home-a-a{
    top: 0;
    background-image: var(--bg-home-a-a-bg);
    opacity: .6;
    z-index: -1;
}
.home-a-a{
    padding-bottom: 100.465116279%;
}
.home-a-a video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-a-a-a > img{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
}
.home-a-a-a-a{
    position: absolute;
    bottom: -2.25rem;
    left: 50%;
    width: 100%;
}

.home-a-a-a-item{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 125%;
    background-position: top 1.25rem center;
}

.bg-home-a.z{
    bottom: 0;
    padding-bottom: 50%;
    background-image: var(--bg-home-az-bg);
    height: unset;
}
.bg-home-a{
    bottom: 0;
    padding-bottom: 50%;
    background-image: url('../img/sparkle.png');
    background-size: 115%;
    background-position: 70% 50%;
    height: unset;
}

.home-a-b{
    background-image: var(--home-a-b-bg);
    padding-top: 8rem;
    margin-top: -8rem;
}
.home-a-b-a{
    font-size: var(--h3);
    color: var(--nickname-c);
}
.home-a-b-b{
    font-size: var(--fsize5);
}

.typewrite{
    overflow: hidden;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
    -webkit-animation: Visibility 0s forwards, Typing 1.25s steps(30, end) forwards;
    -moz-animation: Visibility 0s forwards, Typing 1.25s steps(30, end) forwards;
    -ms-animation: Visibility 0s forwards, Typing 1.25s steps(30, end) forwards;
    -o-animation: Visibility 0s forwards, Typing 1.25s steps(30, end) forwards;
    animation: Visibility 0s forwards, Typing 1.25s steps(30, end) forwards;
}
@-webkit-keyframes Visibility{
    to{visibility:visible}
}
@-moz-keyframes Visibility{
    to{visibility:visible}
}
@-ms-keyframes Visibility{
    to{visibility:visible}
}
@-o-keyframes Visibility{
    to{visibility:visible}
}
@keyframes Visibility{
    to{visibility:visible}
}

@-webkit-keyframes Typing{
    from{width:0}
    to{width:100%}
}
@-moz-keyframes Typing{
    from{width:0}
    to{width:100%}
}
@-ms-keyframes Typing{
    from{width:0}
    to{width:100%}
}
@-o-keyframes Typing{
    from{width:0}
    to{width:100%}
}
@keyframes Typing{
    from{width:0}
    to{width:100%}
}

.typewrite._2{
    animation-delay: .75s;
}
.typewrite._3{
    animation-delay: 1.75s;
}
.typewrite._4{
    animation-delay: 2.5s;
}

.home-b{
    background-color: var(--home-b-bg);
}
.home-b-item{
    position: relative;
    background-color: var(--home-b-item-bg);
    border-radius: 15px;
    overflow: hidden;
}
.home-b-item::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    -webkit-box-shadow: inset 1px -10px 12px #000;
    -moz-box-shadow: inset 1px -10px 12px #000;
    box-shadow: inset 1px -10px 12px #000;
    opacity: .7;
}
.home-b-item.roro{background-image:var(--home-b-item-roro-bg)}
.home-b-item.bobot{background-image:var(--home-b-item-bobot-bg)}
.home-b-item.hoho{background-image:var(--home-b-item-hoho-bg)}
.home-b-item .bg-abs{
    background-position: left center;
}
.home-b-item .bg-abs.roro{background-image: url('../img/kak-roro-thumbnail.png')}
.home-b-item .bg-abs.bobot{background-image: url('../img/om-bobot-thumbnail.png')}
.home-b-item .bg-abs.hoho{background-image: url('../img/madam-hoho-thumbnail.png')}
.home-b-item-inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}
.home-b-item-inner > span:nth-child(1){
    display: flex;
    align-items: center;
}
.home-b-item-inner > span:nth-child(1) > div:nth-child(1){
    width: 6rem;
}
.home-b-item-inner > span:nth-child(1) > div:nth-child(2){
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.home-b-item-inner > span:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    font-size: var(--fsize5);
    font-weight: 400;
}
.home-b-item-inner > span:nth-child(1) > div:nth-child(2) > div:nth-child(2){
    font-size: var(--fsmall3);
}
.home-b-item-inner > span:nth-child(2){
    width: 2.25rem;
}
.home-b-item-inner > span:nth-child(2) > div{
    padding-bottom: 100%;
    background-image: url('../icon/chat-icon.png');
    background-size: 100%;
    border-radius: 4px;
}

.home-fill{
    background-color: var(--home-b-bg);
    height: -webkit-fill-available;
}
/*end home*/

/*text*/
header{
    position: fixed;
    border-bottom: 1px solid var(--header-bo);
    height: 4rem;
    width: 100%;
    /* max-width: var(--width-dev); */
}
header *{
    top: 50%;
    --ty: translateY(-50%);
    --w: 4rem;
    transform: var(--ty);
    height: 100%;
}
.header-inner{
    transform: unset;
}
header .l{
    background-size: 25%;
    width: var(--w);
    left: 0;
}
header .c{
    left: 50%;
    transform: translateX(-50%) var(--ty);
    width: calc(100% - (var(--w)*2));
    display: flex;
    align-items: center;
    font-weight: 600;
}
.btn-back{
    background-image: url('../icon/arrow-l.svg');
}

.bod{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(100% - 4rem);
    overflow: auto;
}
.ol-text h6{
    font-size: var(--fsize3) !important;
    font-weight: 600;
}
.ol-text a{
    display: unset;
    color: #E942E9;
    text-decoration: underline;
    font-style: italic;
}
.ol-text >  li > ul > li > ul > li{
    margin-bottom: .5rem;
}
.ol-text > li > ul > li > ul > li > ul > li{
    margin-bottom: 0;
}
/*end text*/

/*room chat*/
.room-chat-item{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 15px;
}
.room-chat-item.selected{
    background-color: #FFFFFF26;
}
.room-chat-item > .l{
    display: flex;
    gap: .9rem;
    width: 100%;
}
.room-chat-item > .l > .l{
    min-width: 3rem;

}
.room-chat-item > .l > .l > div{
    padding-bottom: 100%;
    border-radius: 50%;
    background-size: cover;
}
.room-chat-item > .l > .l > .roro{
    background-image: url('../img/kak-roro-icon.png');
}
.room-chat-item > .l > .l > .bobot{
    background-image: url('../img/om-bobot-icon.png');
}
.room-chat-item > .l > .l > .hoho{
    background-image: url('../img/madam-hoho-icon.png');
}
.room-chat-item > .l > .r{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
}
.room-chat-item > .l > .r > div:nth-child(1){
    font-weight: 600;
}
.room-chat-item > .l > .r > div:nth-child(2){
    font-size: var(--fsmall3);
    line-height: 1.2;
}

.room-chat-item > .r{
    --w: 1.5rem;
    width: var(--w);
    display: flex;
    justify-content: end;
}
.room-chat-item > .r > div{
    background-color: var(--room-chat-item-r-div-bg);
    border-radius: 50%;
    width: var(--w);
    height: var(--w);
    font-size: var(--fsmall4);
    align-items: center;
    justify-content: center;
}
/*end room chat*/

/*chat*/
.chat-ava{
    --wh: 2.75rem;
    width: var(--wh);
    height: var(--wh);
    border-radius: 50%;
    transform: unset;
    margin-right: .85rem;
}
.chat-ava.roro{
    background-image: url('../img/kak-roro-icon.png');
}
.chat-ava.bobot{
    background-image: url('../img/om-bobot-icon.png');
}
.chat-ava.hoho{
    background-image: url('../img/madam-hoho-icon.png');
}

.chat-outer{
    height: calc(100vh - 4rem - 47.5px);
    height: calc(100dvh - 4rem - 47.5px);
    top: 4rem !important;
    overflow-y: hidden;
}
.chat-wrap{
    min-height: calc(100vh - 9.75rem - 47.5px);
    min-height: calc(100dvh - 9.75rem - 47.5px);
}
@supports (height: 100dvh){
    .chat-outer{height:calc(100dvh - 4rem - 47.5px)}
    .chat-wrap{min-height:calc(100dvh - 9.75rem - 47.5px)}
}
.time-chat{
    display: flex;
    justify-content: center;
}
.time-chat > div{
    background-color: var(--time-chat-bg);
    color: var(--time-chat-c);
    font-size: var(--fsmall8);
    padding: .4rem .7rem;
    border-radius: 5px;
    margin: 1rem 0 1.5rem;
}
.chat-in > div,.chat-out > div{
    max-width: calc(100% - 4rem);
    font-weight: 600;
}
.chat-in{
    display: flex;
    justify-content: flex-start;
}
.chat-in > div{
    --br: 8px;
    border-radius: var(--br) var(--br) var(--br) 0;
    font-size: var(--fsmall3);
    padding: .55rem 0 .55rem .8rem;
}
.chat-in.assist > div{
    color: var(--chat-in-assist-c);
    font-style: italic;
}
.chat-out{
    display: flex;
    justify-content: flex-end;
}
.chat-out > div{
    --br: 8px;
    border-radius: var(--br);
    font-size: var(--fsmall3);
    padding: .55rem .8rem .55rem 0;
    text-align: right;
}
.chat-out.option{
    padding-right: .8rem;
}
.chat-out.option.glitch{
    -webkit-animation: Glitch .25s linear;
    -moz-animation: Glitch .25s linear;
    -ms-animation: Glitch .25s linear;
    -o-animation: Glitch .25s linear;
    animation: Glitch .25s linear;
    transform-origin: right center;
}
@-webkit-keyframes Glitch{
    0%,50%,100%{transform:rotate(2deg)}
    25%,75%{transform:rotate(-2deg)}
}
@-moz-keyframes Glitch{
    0%,50%,100%{transform:rotate(2deg)}
    25%,75%{transform:rotate(-2deg)}
}
@-ms-keyframes Glitch{
    0%,50%,100%{transform:rotate(2deg)}
    25%,75%{transform:rotate(-2deg)}
}
@-o-keyframes Glitch{
    0%,50%,100%{transform:rotate(2deg)}
    25%,75%{transform:rotate(-2deg)}
}
@keyframes Glitch{
    0%,50%,100%{transform:rotate(2deg)}
    25%,75%{transform:rotate(-2deg)}
}

.chat-out.option > div{
    background-color: #8813A0E6;
    border: 1px solid transparent;
    padding: 1rem .8rem .55rem;
}
.chat-out.option.glitch > div{
    -webkit-animation: GlitchBorder.25s linear;
    -moz-animation: GlitchBorder.25s linear;
    -ms-animation: GlitchBorder.25s linear;
    -o-animation: GlitchBorder.25s linear;
    animation: GlitchBorder.25s linear;
}
@-webkit-keyframes GlitchBorder{
    0%,50%,100%{border-color: transparent}
    25%,75%{border-color: #FFF}
}
@-moz-keyframes GlitchBorder{
    0%,50%,100%{border-color: transparent}
    25%,75%{border-color: #FFF}
}
@-ms-keyframes GlitchBorder{
    0%,50%,100%{border-color: transparent}
    25%,75%{border-color: #FFF}
}
@-o-keyframes GlitchBorder{
    0%,50%,100%{border-color: transparent}
    25%,75%{border-color: #FFF}
}
@keyframes GlitchBorder{
    0%,50%,100%{border-color: transparent}
    25%,75%{border-color: #FFF}
}

.chat-in:not(:last-child),.chat-out:not(:last-child){
    margin-bottom: .5rem;
}
.chat-out-option{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    gap: .5rem;
    padding: .65rem 0 .35rem;
    width: max-content;
    max-width: 100%;
}
.chat-out-option button{
    background-color: var(--chat-out-option-btn-bg);
    text-align: left;
    padding: .65rem .85rem;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-out-option.pre button .cry{
    margin: -.5rem .35rem -.5rem 1.25rem;
}
.chat-out-option.zod{
    flex-direction: row;
}
.chat-out-option.zod > div{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 50%;
}
.chat-out-option.zod button{
    justify-content: flex-start;
    width: 8.5rem;
}
.chat-out-option.zod button .zod{
    width: 1rem;
    margin-right: .35rem;
}
.chat-out-option.zod button .zod > div{
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.chat-out-option.zod button .zod.cap > div{
    background-image: url('../icon/zod/capricorn-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.pis > div{
    background-image: url('../icon/zod/pisces-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.tau > div{
    background-image: url('../icon/zod/taurus-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.can > div{
    background-image: url('../icon/zod/cancer-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.vir > div{
    background-image: url('../icon/zod/virgo-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.sco > div{
    background-image: url('../icon/zod/scorpio-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.aqu > div{
    background-image: url('../icon/zod/aquarius-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.ari > div{
    background-image: url('../icon/zod/aries-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.gem > div{
    background-image: url('../icon/zod/gemini-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.leo > div{
    background-image: url('../icon/zod/leo-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.lib > div{
    background-image: url('../icon/zod/libra-svgrepo-com.svg');
}
.chat-out-option.zod button .zod.sag > div{
    background-image: url('../icon/zod/sagittarius-svgrepo-com.svg');
}

.textarea-wrap textarea{
    --br: 8px;
    background: var(--input-bg);
    color: var(--input-c);
    border-radius: var(--br);
    font-size: var(--fsmall3);
    font-weight: 400 !important;
    line-height: 1.2;
    padding: .975rem .85rem;
    resize: none;
    overflow: hidden;
    width: 100%;
    min-height: 43px;
    transition: opacity 200ms;
}
.textarea-wrap textarea::placeholder{
    color: var(--input-c);
}
.chat-input.disable textarea{
    pointer-events: none;
    opacity: .25;
}
/* .btn-send-wrap{
} */
.btn-send{
    position: relative;
    --br: 8px;
    --wh: 3.1rem;
    width: var(--wh);
    height: var(--wh);
    min-height: unset;
    border-radius: var(--br);
    border: none;
    transition: opacity 200ms;
}
.btn-send > div{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../icon/send.svg');
    background-size: 47.5%;
}
.chat-input.disable .btn-send{
    pointer-events: none;
    opacity: .25;
}

.card-front-wrap{
    padding-bottom: 3.75rem;
    padding-right: .8rem;
    opacity: 0;
    transition: 150ms;
}
.card-front-wrap.opacity{
    opacity: 1;
}
.carousel.hidden,.card-front-wrap.hidden{display:none}
.card-front-wrap .card-front{
    position: relative;
    max-width: 10.1rem;
}
.card-front > div{
    padding-bottom: 153.333333333%;
    border-radius: 5px;
    background-size: cover;
}
.card-front.reverse > div{
    transform: rotate(180deg);
}
.death > div{background-image: url('../img/tarot/Card_Front_Death.jpg')}
.judgement > div{background-image: url('../img/tarot/Card_Front_Judgement.jpg')}
.justice > div{background-image: url('../img/tarot/Card_Front_Justice.jpg')}
.strength > div{background-image: url('../img/tarot/Card_Front_Strength.jpg')}
.temperance > div{background-image: url('../img/tarot/Card_Front_Temperance.jpg')}
.the-chariot > div{background-image: url('../img/tarot/Card_Front_The_Chariot.jpg')}
.the-devil > div{background-image: url('../img/tarot/Card_Front_The_Devil.jpg')}
.the-emperor > div{background-image: url('../img/tarot/Card_Front_The_Emperor.jpg')}
.the-empress > div{background-image: url('../img/tarot/Card_Front_The_Empress.jpg')}
.the-fool > div{background-image: url('../img/tarot/Card_Front_The_Fool.jpg')}
.the-hangedman > div{background-image: url('../img/tarot/Card_Front_The_Hangedman.jpg')}
.the-hermit > div{background-image: url('../img/tarot/Card_Front_The_Hermit.jpg')}
.the-hierophant > div{background-image: url('../img/tarot/Card_Front_The_Hierophant.jpg')}
.the-high-priestess > div{background-image: url('../img/tarot/Card_Front_The_High_Priestess.jpg')}
.the-lovers > div{background-image: url('../img/tarot/Card_Front_The_Lovers.jpg')}
.the-magician > div{background-image: url('../img/tarot/Card_Front_The_Magician.jpg')}
.the-moon > div{background-image: url('../img/tarot/Card_Front_The_Moon.jpg')}
.the-star > div{background-image: url('../img/tarot/Card_Front_The_Star.jpg')}
.the-sun > div{background-image: url('../img/tarot/Card_Front_The_Sun.jpg')}
.the-tower > div{background-image: url('../img/tarot/Card_Front_The_Tower.jpg')}
.the-world > div{background-image: url('../img/tarot/Card_Front_The_World.jpg')}
.wheel-of-fortune > div{background-image: url('../img/tarot/Card_Front_Wheel_of_Fortune.jpg')}

.card-stack-txt{
    font-size: var(--fsize5);
    font-weight: 600;
}
.carousel{
    transition: 150ms;
}
.carousel.opacity{
    opacity: 0;
}
.carousel.pointer-events-none,.carousel.pointer-events-none .flickity-viewport{
    height: 300px !important;
}
.card-stack .carousel-cell{
    width: 30%;
    max-width: 10rem;
    padding-top: 2rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    transition: transform .4s ease;
}
.card-stack .carousel-cell.active{
    z-index: 99 !important;
    width: 100%;
    max-width: 10rem;
}
.card-stack .carousel-cell .cell-inner{
    transform: translateX(1500%);

    -webkit-animation: slideIn .75s ease forwards;
    -moz-animation: slideIn .75s ease forwards;
    -ms-animation: slideIn .75s ease forwards;
    -o-animation: slideIn .75s ease forwards;
    animation: slideIn .75s ease forwards;
}
@-webkit-keyframes slideIn{
    from{transform: translateX(1500%)}
    to{transform: translateX(0)}
}
@-moz-keyframes slideIn{
    from{transform: translateX(1500%)}
    to{transform: translateX(0)}
}
@-ms-keyframes slideIn{
    from{transform: translateX(1500%)}
    to{transform: translateX(0)}
}
@-o-keyframes slideIn{
    from{transform: translateX(1500%)}
    to{transform: translateX(0)}
}
@keyframes slideIn{
    from{transform: translateX(1500%)}
    to{transform: translateX(0)}
}

.card-stack .carousel-cell .cell-inner.out{
    transform: translateX(0%);

    -webkit-animation: slideOut .5s ease forwards;
    -moz-animation: slideOut .5s ease forwards;
    -ms-animation: slideOut .5s ease forwards;
    -o-animation: slideOut .5s ease forwards;
    animation: slideOut .5s ease forwards;
}
@-webkit-keyframes slideOut{
    from{transform: translateX(0)}
    to{transform: translateX(-1500%)}
}
@-moz-keyframes slideOut{
    from{transform: translateX(0)}
    to{transform: translateX(-1500%)}
}
@-ms-keyframes slideOut{
    from{transform: translateX(0)}
    to{transform: translateX(-1500%)}
}
@-o-keyframes slideOut{
    from{transform: translateX(0)}
    to{transform: translateX(-1500%)}
}
@keyframes slideOut{
    from{transform: translateX(0)}
    to{transform: translateX(-1500%)}
}

.card-flip{
    padding-bottom: 153.333333333%;
    transform-style: preserve-3d;
    transition: transform .5s;
}
.card-flip.active{
    transform: translateY(-2rem);
}
.card-flip.active.flip{
    animation-delay: .75s;

    -webkit-animation: flipFiveTimes .75s ease-out forwards;
    -moz-animation: flipFiveTimes .75s ease-out forwards;
    -ms-animation: flipFiveTimes .75s ease-out forwards;
    -o-animation: flipFiveTimes .75s ease-out forwards;
    animation: flipFiveTimes .75s ease-in-out forwards;
}
@-webkit-keyframes flipFiveTimes{
    0%,20%,40%,60%,80%{transform:translateY(-2rem) rotateY(0deg)}
    10%,30%,50%,70%,90%,100%{transform:translateY(-2rem) rotateY(180deg)}
}
@-moz-keyframes flipFiveTimes{
    0%,20%,40%,60%,80%{transform:translateY(-2rem) rotateY(0deg)}
    10%,30%,50%,70%,90%,100%{transform:translateY(-2rem) rotateY(180deg)}
}
@-ms-keyframes flipFiveTimes{
    0%,20%,40%,60%,80%{transform:translateY(-2rem) rotateY(0deg)}
    10%,30%,50%,70%,90%,100%{transform:translateY(-2rem) rotateY(180deg)}
}
@-o-keyframes flipFiveTimes{
    0%,20%,40%,60%,80%{transform:translateY(-2rem) rotateY(0deg)}
    10%,30%,50%,70%,90%,100%{transform:translateY(-2rem) rotateY(180deg)}
}
@keyframes flipFiveTimes{
    0%,20%,40%,60%,80%{transform:translateY(-2rem) rotateY(0deg)}
    10%,30%,50%,70%,90%,100%{transform:translateY(-2rem) rotateY(180deg)}
}

.card-flip .card-front{
    transform: rotateY(180deg);
}
.card-stack-item,.card-front{
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.card-stack-item{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url('../img/tarot/Card_Back.jpg');
    transform: rotateY(0deg);
    transition: transform .3s ease, box-shadow .3s ease;
}

.btn-clear{
    position: relative;
    --wh: 1.5rem;
    --br: 8px;
    width: var(--wh);
    height: var(--wh);
    border-radius: var(--br);
    border: none;
}
.btn-clear > div{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../icon/clear.svg');
    background-size: 80%;
}
.btn-clear-i{
    transform: translate(-50%,-100%);
    background-color: #FFF;
    color: #000;
    width: max-content;
    font-size: var(--fsmall5);
    padding: .25rem .5rem;
    border-radius: 5px;
    -webkit-animation: BtnClearI 1s ease infinite .5s;
    -moz-animation: BtnClearI 1s ease infinite .5s;
    -ms-animation: BtnClearI 1s ease infinite .5s;
    -o-animation: BtnClearI 1s ease infinite .5s;
    animation: BtnClearI 1s ease infinite .5s;
}
@-webkit-keyframes BtnClearI{
    0%,20%,60%,80%,100%{transform:translate(-50%,-100%)}
    40%{transform:translate(-50%,calc(-100% - 15px))}
}
@-moz-keyframes BtnClearI{
    0%,20%,60%,80%,100%{transform:translate(-50%,-100%)}
    40%{transform:translate(-50%,calc(-100% - 15px))}
}
@-ms-keyframes BtnClearI{
    0%,20%,60%,80%,100%{transform:translate(-50%,-100%)}
    40%{transform:translate(-50%,calc(-100% - 15px))}
}
@-o-keyframes BtnClearI{
    0%,20%,60%,80%,100%{transform:translate(-50%,-100%)}
    40%{transform:translate(-50%,calc(-100% - 15px))}
}
@keyframes BtnClearI{
    0%,20%,60%,80%,100%{transform:translate(-50%,-100%)}
    40%{transform:translate(-50%,calc(-100% - 15px))}
}

.btn-clear-i:after{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #FFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%);
}
@media screen and (min-width: 768px){
    .btn-clear-i br{display: none}
    .bod{height: calc(100% - 6rem)}
}
/*modal*/
.btn-sec{
    background-color: var(--btn-sec-bg);
    color: var(--btn-sec-c);
    font-weight: 600;
    border-radius: 5px;
    min-width: 6.5rem;
    height: 3rem;
}
/*end modal*/
/* @media screen and (min-width: 640px){
    .card-stack .carousel-cell{
        width: 17.5%;
    }
} */
/* @media screen and (min-width: 768px){
    .card-stack .carousel-cell{
        width: 15%;
    }
} */
.video-wrapper{
    background-image: linear-gradient(transparent,#000);
}
video{
    opacity: 1;
    transition: opacity 500ms ease;
}
video.fade-out{
    opacity: 0;
}
/*end chat*/

/*identity*/
.idn-notif{
    background-color: var(--idn-notif-bg);
    border-radius: 8px;
    padding: .85rem .95rem;
    width: max-content;
    transform: translate(-50%,-125%);
    transition: 200ms;
}
.idn-notif.active{
    transform: translate(-50%,65%);
}
.idn{
    max-width: 280px;
}
.logo{
    max-width: 6rem;
}
.logo > div{
    padding-bottom: 50%;
    background-image: url('../icon/Logo.svg');
}
.idn-a{
    gap: 1px;
}
.cry{
    display: flex;
    align-items: center;
    justify-content: center;
}
.cry._1{width:2rem}
.cry._2{width:2.65rem}
.cry._3{width:3.15rem}
.cry > div{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
    margin-right: .45rem;
}
.cry._1 > div{
    padding-bottom: 83.333333333%;
    background-image: url('../icon/crystal.png');
}
.cry._2 > div{
    padding-bottom: 62.318840579%;
    background-image: url('../icon/crystal-medium.png');
}
.cry._3 > div{
    padding-bottom: 51.948051948%;
    background-image: url('../icon/crystal-large.png');
}
.idn-b{
    font-size: var(--fsize5);
}
.idn-c .label-text{
    display: block;
    font-size: var(--fsize);
    margin-bottom: .5rem;
}
.idn-form-item:not(:last-child){
    margin-bottom: 1rem;
}
.idn-form-radio .label-text{
    margin-bottom: 0;
}
.btn-see{
    background-image: url('../icon/eye-close.svg');
    width: 1.5rem;
    height: 1.5rem;
}
.btn-see.active{
    background-image: url('../icon/eye-open.svg');
}
.idn-form-radio .radio{
    width: 1.4rem;
    height: 1.4rem;
    border-width: 3px;
    background-color: var(--radio-bg);
}
.idn-form-radio .radio:checked{
    background-color: var(--radio-checked-bg);
}
.btn-save{
    background-color: var(--btn-save-bg);
    color: var(--btn-save-c);
    font-weight: 600;
    border-radius: 5px;
    min-width: 6.5rem;
    height: 3rem;
}
a.btn-save{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fsize);
}
.div-input{
    font-weight: 400;
    color: var(--input-phd-c);
}
/*end identity*/

/*profile*/
.prf-c .label-text{
    font-weight: 600;
}
.prf-c .idn-form-item.disabled input{
    font-weight: 400;
    pointer-events: none;
    color: var(--disabled);
}
.btn-edit{
    background-image: url('../icon/edit.svg');
    width: 1.5rem;
    height: 1.5rem;
}

/*modal*/
.blurry{
    filter: blur(10px);
    transition: filter .3s ease;
}
.modal-box{
    background-image: var(--modal-box-bg);
}
.modal .btn-close-modal{
    font-size: var(--fsize4);
    border: none;
}
.mdl-a{
    font-size: var(--fsize4);
    font-weight: 600;
}
.modal input:not(input[type="radio"]){
    height: 3.15rem;
    border-radius: 8px;
}
.modal .label-text{
    font-size: var(--fsize);
}
/*end modal*/
/*end profile*/

/*login*/
.login{
    max-width: 280px;
}
.login-b .btn{
    width: 100%;
    color: var(--c-i);
    background-color: var(--login-a-btn-bg);
    font-size: var(--fsize);
    font-weight: 400;
    border: 0;
    height: 3.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.login-b .btn > div{
    --wh: 2.25rem;
    width: var(--wh);
    height: var(--wh);
}
.btn-fb{
    background-color: var(--btn-fb-bg) !important;
    color: var(--c) !important;
}
.btn-fb > div{
    background-image: url('../img/fb.png');
}
.btn-go > div{
    background-image: url('../img/go.png');
}
/*end login*/

/*signup*/
.signup .label-text{
    font-size: var(--fsize4);
    font-weight: 600;
}

.mdl-su-b-a{
    max-width: 170px;
}
.mdl-su-b-a input{
    text-align: center;
    font-size: var(--h4);
}
.mdl-su-c{
    font-size: var(--fsmall);
    font-weight: 600;
}
.mdl-su-c.invalid{
    color: var(--invalid);
}
.btn-otp{
    font-size: var(--fsmall5);
}
/*end signup*/

/*verify*/
.ver-a{
    font-size: var(--fsize3);
    font-weight: 600;
}
.ver-b{
    color: var(--ver-b-c);
    font-size: var(--h3);
}
/*end verify*/

/*premium*/
.premium-a{
    padding-bottom: 61.397905759%;
}
.premium-a video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.btn-prem{
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem;
    background-color: var(--btn-prem-bg);
    border: 2px solid var(--btn-prem-bo);
    border-radius: 12px;
}
.btn-prem:active{
    background-color: var(--btn-prem-active-bg);
    border-color: var(--btn-prem-active-bo);
}
.btn-prem-a{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.btn-prem-a span{
    position: relative;
}
.btn-prem-a span div{
    position: absolute;
    right: 0;
    font-size: var(--fsmall6);
    font-weight: 300;
}
.btn-prem-b{
    display: flex;
    align-items: center;
}
.btn-prem-c{
    background-color: var(--btn-prem-c-bg);
    color: var(--btn-prem-c-c);
    height: 2.85rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: .65rem;
}

/*popup payment*/
.carousel-payment{
    margin: .85rem -1.5rem 0;
}
.carousel-payment .carousel-cell{
    width: 40%;
    padding: .5rem 0;
}
.carousel-payment .carousel-cell:first-child{
    left: .75rem !important;
    margin-right: 1.2rem !important;
}
.carousel-payment .carousel-cell:not(:last-child){
    margin-right: .45rem;
}
.carousel-payment .last{
    margin-left: .25rem !important;
}
.payment-item{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    background-color: var(--payment-item-bg);
    color: var(--c-i);
    border: 2px solid transparent;
    padding: .4rem 0;
    border-radius: 8px;
}
.carousel-payment input[type="radio"]:checked + .payment-item,.buy-b input[type="radio"]:checked + .buy-item{
    border-color: var(--payment-item-selected-bo);
}
.payment-item > div,.buy-item > span{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%,-35%);
    width: 17px;
    height: 17px;
    background: url('../icon/check.svg') no-repeat center center;
    background-size: contain;
}
.carousel-payment input[type="radio"]:checked + .payment-item > div,.buy-b input[type="radio"]:checked + .buy-item > span{
    display: block;
}
.payment-item > span{
    width: 30px;
}
.payment-item > span > div{
    padding-bottom: 100%;
    border-radius: 50%;
}
/*end popup payment*/
/*end premium*/

/*buy*/
.buy-b{
    max-width: 280px;
}
.buy-item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--buy-item-bg);
    color: var(--buy-item-c);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: .85rem .5rem;
    min-height: 5rem;
}
.buy-item > div:nth-child(1){
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
}
.buy-item > div:nth-child(2){
    margin-top: .15rem;
}
.buy-item > div:nth-child(3){
    font-size: var(--fsmall6);
}
/*end buy*/

/*live*/
.live-a .bg-abs{
    background-image: var(--live-a-bg-abs-bg);
    height: 50%;
    width: calc(100% + 30px);
}
.live-a-a-a{
    font-size: var(--h4);
    color: var(--live-a-a-a-c);
}
.live-a-a-b{
    font-size: var(--fsize3);
}
.live-a-b{
    padding-bottom: 51.436031331%;
    background-size: cover;
    border-radius: 15px;
}
.live-a-b.inactive{
    filter: grayscale(1);
    pointer-events: none;
}

.live-a-b-a{
    background-image: var(--live-a-b-a-bg);
    border-radius: 5px;
    font-size: var(--fsmall3);
    -webkit-animation: Live 1.05s ease infinite;
    -moz-animation: Live 1.05s ease infinite;
    -ms-animation: Live 1.05s ease infinite;
    -o-animation: Live 1.05s ease infinite;
    animation: Live 1.05s ease infinite;
}
@-webkit-keyframes Live{
    0%,100%{opacity:1}
    50%{opacity:0}
}
@-moz-keyframes Live{
    0%,100%{opacity:1}
    50%{opacity:0}
}
@-ms-keyframes Live{
    0%,100%{opacity:1}
    50%{opacity:0}
}
@-o-keyframes Live{
    0%,100%{opacity:1}
    50%{opacity:0}
}
@keyframes Live{
    0%,100%{opacity:1}
    50%{opacity:0}
}

.live-a-b-c{
    background-color: var(--live-a-b-c-bg);
    color: var(--live-a-b-c-c);
    border-radius: 5px;
}

.live-b-a > div{
    font-size: var(--fsize);
}
.live-b-a > p{
    font-size: var(--fsmall);
}
.live-b-b-a{
    padding-bottom: 67.759562841%;
    border-radius: 20px;
    background-size: cover;
}
.live-b-b-b{
    font-size: var(--fsmall);
    font-weight: 600;
    margin-top: .5rem;
}
.live-b-b-c{
    font-size: var(--fsmall3);
    margin-top: .35rem;
}
/*end live*/

/*btn sound*/
.btn-sound{
    width: 2rem;
    height: 2rem;
    background-image: url('../icon/mute.svg');
}
/*end btn sound*/

/*error*/
.error-a{
    max-width: 5.15rem;
}
.error-a > div{
    padding-bottom: 100%;
    background: url('../icon/sad.svg') no-repeat center center;
    background-size: contain;
}
.error-b{
    color: #FF9D00;
    font-size: var(--h6);
    font-weight: 600;
}
.error-c{
    font-weight: 500;
}
/*end error*/

@media only screen and (min-width:768px){
    .btn-index{width:7.5rem}
    .btn-chat,.btn-profile{
        border: 1.5px solid var(--c);
        border-radius: 8px;
    }
    .btn-chat > span:nth-child(1),.btn-profile > div{
        width: 1.65rem;
        height: 1.65rem;
    }
    .bg-home-a{background-size:100%}
    .bg-home-a.z{
        position: fixed;
        padding-bottom: 30%;
    }
    .bg-home-a-a{background-image:none}
    .home-a-a{padding-bottom:unset}
    .home-a-b{background-image:none}
    .home-b{background-color:transparent}
    .logo{max-width:8rem}
    .idn{max-width:400px}
    .ver{width:400px}
    .login{
        position: relative;
        left: unset;
        transform: unset;
        max-width: unset;
    }
    .login-b{max-width:280px}
    .signup{max-width:280px}
    .live-a-a{
        background-color: transparent;
        font-size: var(--h3);
    }
    .live-a{background-color:transparent}
    .modal-box{max-width:30rem}
    .modal-payment .modal-box{max-width:40rem}
    .chat-l{
        border-right: 1px solid var(--header-bo);
        height: 100dvh;
    }
    .chat-in > div,.chat-out > div{max-width: 50%}
}

.carousel:after{
    content: 'flickity';
    display: none;
}
@media screen and (min-width:768px){
    .carousel:after{content:''}
    .carousel-payment{
        display: flex;
        gap: .5rem;
        padding: 0 1rem;
    }
    .carousel-payment .carousel-cell:not(:last-child){margin-right:unset}
    .carousel-payment .carousel-cell.carousel-cell:first-child{margin-right:unset!important}
    .carousel-payment .last{display:none}
}

/* @media screen and (max-width:576px){
    .chat-wrap{min-height:calc(100vh - 13.5rem)}
    .chat-outer{height:calc(100vh - 8rem)}
} */