html {
    box-sizing: border-box
}

#root {
    --zindex10001: 10001;
    --zindex900: 900;
    --zindex800: 800;
    --zindex700: 700;
    --zindex600: 600;
    --zindex500: 500;
    --zindex400: 400;
    --zindex300: 300;
    --zindex1: -1
}

*,:after,:before {
    box-sizing: inherit
}

* {
    font-variant-ligatures: none
}

div,i {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

h1,h2,h3,h4,h5,h6,p,span {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

body {
    background: var(--dangerouslySetPrimaryBg)!important;
    color: var(--gray900)!important;
    margin: 0;
    box-sizing: border-box;
    font-weight: 435;
    font-family: GrowwSans,NotoSans,system-ui;
    min-width: 320px;
    -webkit-font-smoothing: antialiased
}

a {
    color: var(--green500);
    text-decoration: none
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

button,input,pre,select,textarea {
    font-family: inherit
}

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

.row:after {
    content: "";
    display: table;
    clear: both
}

.row .col {
    float: left;
    box-sizing: border-box;
    min-height: 1px
}

@media only screen and (min-width: 800px) {
    .row .col.l1 {
        width:8.33333%
    }

    .row .col.l1,.row .col.l2 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l2 {
        width: 16.66667%
    }

    .row .col.l3 {
        width: 25%
    }

    .row .col.l3,.row .col.l4 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l4 {
        width: 33.33333%
    }

    .row .col.l5 {
        width: 41.66667%
    }

    .row .col.l5,.row .col.l6 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l6 {
        width: 50%
    }

    .row .col.l7 {
        width: 58.33333%
    }

    .row .col.l7,.row .col.l8 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l8 {
        width: 66.66667%
    }

    .row .col.l9 {
        width: 75%
    }

    .row .col.l10,.row .col.l9 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l10 {
        width: 83.33333%
    }

    .row .col.l11 {
        width: 91.66667%
    }

    .row .col.l11,.row .col.l12 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l12 {
        width: 100%
    }

    .row .col.l5ths {
        width: 20%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.offset-l1 {
        margin-left: 8.33333%
    }

    .row .col.offset-l2 {
        margin-left: 16.66667%
    }

    .row .col.offset-l3 {
        margin-left: 25%
    }

    .row .col.offset-l4 {
        margin-left: 33.33333%
    }

    .row .col.offset-l5 {
        margin-left: 41.66667%
    }

    .row .col.offset-l6 {
        margin-left: 50%
    }

    .row .col.offset-l7 {
        margin-left: 58.33333%
    }

    .row .col.offset-l8 {
        margin-left: 66.66667%
    }

    .row .col.offset-l9 {
        margin-left: 75%
    }

    .row .col.offset-l10 {
        margin-left: 83.33333%
    }

    .row .col.offset-l11 {
        margin-left: 91.66667%
    }

    .row .col.offset-l12 {
        margin-left: 100%
    }
}

@media only screen and (min-width: 601px) {
    .row .col.m1 {
        width:8.33333%
    }

    .row .col.m1,.row .col.m2 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m2 {
        width: 16.66667%
    }

    .row .col.m3 {
        width: 25%
    }

    .row .col.m3,.row .col.m4 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m4 {
        width: 33.33333%
    }

    .row .col.m5 {
        width: 41.66667%
    }

    .row .col.m5,.row .col.m6 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m6 {
        width: 50%
    }

    .row .col.m7 {
        width: 58.33333%
    }

    .row .col.m7,.row .col.m8 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m8 {
        width: 66.66667%
    }

    .row .col.m9 {
        width: 75%
    }

    .row .col.m10,.row .col.m9 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m10 {
        width: 83.33333%
    }

    .row .col.m11 {
        width: 91.66667%
    }

    .row .col.m11,.row .col.m12 {
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m12 {
        width: 100%
    }

    .row .col.offset-m1 {
        margin-left: 8.33333%
    }

    .row .col.offset-m2 {
        margin-left: 16.66667%
    }

    .row .col.offset-m3 {
        margin-left: 25%
    }

    .row .col.offset-m4 {
        margin-left: 33.33333%
    }

    .row .col.offset-m5 {
        margin-left: 41.66667%
    }

    .row .col.offset-m6 {
        margin-left: 50%
    }

    .row .col.offset-m7 {
        margin-left: 58.33333%
    }

    .row .col.offset-m8 {
        margin-left: 66.66667%
    }

    .row .col.offset-m9 {
        margin-left: 75%
    }

    .row .col.offset-m10 {
        margin-left: 83.33333%
    }

    .row .col.offset-m11 {
        margin-left: 91.66667%
    }

    .row .col.offset-m12 {
        margin-left: 100%
    }
}

.row .col.s1 {
    width: 8.33333%
}

.row .col.s1,.row .col.s2 {
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s2 {
    width: 16.66667%
}

.row .col.s3 {
    width: 25%
}

.row .col.s3,.row .col.s4 {
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s4 {
    width: 33.33333%
}

.row .col.s5 {
    width: 41.66667%
}

.row .col.s5,.row .col.s6 {
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s6 {
    width: 50%
}

.row .col.s7 {
    width: 58.33333%
}

.row .col.s7,.row .col.s8 {
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s8 {
    width: 66.66667%
}

.row .col.s9 {
    width: 75%
}

.row .col.s10,.row .col.s9 {
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s10 {
    width: 83.33333%
}

.row .col.s11 {
    width: 91.66667%
}

.row .col.s11,.row .col.s12 {
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s12 {
    width: 100%
}

.row .col.offset-s1 {
    margin-left: 8.33333%
}

.row .col.offset-s2 {
    margin-left: 16.66667%
}

.row .col.offset-s3 {
    margin-left: 25%
}

.row .col.offset-s4 {
    margin-left: 33.33333%
}

.row .col.offset-s5 {
    margin-left: 41.66667%
}

.row .col.offset-s6 {
    margin-left: 50%
}

.row .col.offset-s7 {
    margin-left: 58.33333%
}

.row .col.offset-s8 {
    margin-left: 66.66667%
}

.row .col.offset-s9 {
    margin-left: 75%
}

.row .col.offset-s10 {
    margin-left: 83.33333%
}

.row .col.offset-s11 {
    margin-left: 91.66667%
}

.row .col.offset-s12 {
    margin-left: 100%
}

.ph-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden
}

.ph-item,.ph-item *,.ph-item :after,.ph-item :before {
    box-sizing: border-box
}

.ph-item:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 500%;
    margin-left: -250%;
    animation: phAnimation .8s linear infinite;
    background: linear-gradient(90deg,hsla(0,0%,100%,0) 46%,hsla(0,0%,100%,.35) 50%,hsla(0,0%,100%,0) 54%) 50% 50%
}

.ph-item>* {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column
}

.ph-row {
    display: flex;
    flex-wrap: wrap
}

.ph-row div {
    height: 10px;
    margin-bottom: 7.5px;
    background-color: rgba(206,212,218,.231)
}

.ph-row .big,.ph-row.big div {
    height: 20px;
    margin-bottom: 15px
}

.ph-row .empty {
    background-color: hsla(0,0%,100%,0)
}

.ph-col-2 {
    flex: 0 0 16.6666666667%
}

.ph-col-4 {
    flex: 0 0 33.3333333333%
}

.ph-col-6 {
    flex: 0 0 50%
}

.ph-col-8 {
    flex: 0 0 66.6666666667%
}

.ph-col-10 {
    flex: 0 0 83.3333333333%
}

.ph-col-12 {
    flex: 0 0 100%
}

.ph-avatar {
    position: relative;
    width: 100%;
    min-width: 60px;
    background-color: rgba(206,212,218,.231);
    margin-bottom: 15px;
    border-radius: 50%;
    overflow: hidden
}

.ph-avatar:before {
    content: " ";
    display: block;
    padding-top: 100%
}

.ph-picture {
    width: 100%;
    height: 120px;
    background-color: rgba(206,212,218,.231);
    margin-bottom: 15px
}

@keyframes phAnimation {
    0% {
        transform: translate3d(-30%,0,0)
    }

    to {
        transform: translate3d(30%,0,0)
    }
}

.hide {
    display: none
}

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

.flex {
    display: flex
}

.valign-wrapper {
    display: flex;
    align-items: center
}

.halign-wrapper {
    display: flex;
    justify-content: center
}

.vspace-between {
    justify-content: space-between
}

.flex-column {
    flex-direction: column
}

.right-align {
    text-align: right
}

.left-align {
    text-align: left
}

.center-align {
    text-align: center
}

.responsive-img {
    max-width: 100%;
    height: auto
}

.onMount-appear {
    opacity: .01
}

.onMount-appear.onMount-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in
}

.truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.web-align {
    max-width: 1280px;
    padding-inline:32px;width: 100%;
    margin: 0 auto
}

.web-align-w-1110 {
    max-width: 1110px;
    width: 100%;
    margin: 0 auto
}

.pos-rel {
    position: relative
}

.pos-abs {
    position: absolute
}

.circle {
    border-radius: 50%
}

.fullWidth {
    width: 100%
}

.page-padding {
    padding: 0 16px
}

.cur-po {
    cursor: pointer
}

.cur-no {
    cursor: not-allowed
}

.flo-r {
    float: right
}

.flo-l {
    float: left
}

.width100 {
    width: 100%
}

.height100 {
    height: 100%
}

.card {
    border-radius: 5px
}

.clickable-text {
    font-weight: 500;
    line-height: 1.29;
    letter-spacing: .23px;
    color: var(--green500);
    margin-left: 5px;
    cursor: pointer
}

.dashed-hr-border {
    display: block;
    margin: 2px auto;
    border-style: dashed;
    border-width: 1px;
    opacity: .2;
    color: var(--gray700);
    width: 100%
}

.blurEffect1 {
    filter: blur(3px)
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.clearfix {
    display: inline-block
}

html[xmlns] .clearfix {
    display: block
}

* html .clearfix {
    height: 1%
}

.componentsMainHeading {
    font-weight: 500;
    color: var(--gray900);
    margin: 0
}

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

.backgroundSecondary {
    background-color: var(--background-secondary)
}

.backgroundTertiary {
    background-color: var(--background-tertiary)
}

.backgroundTransparent {
    background-color: var(--background-transparent)
}

.backgroundSurfacePrimary {
    background-color: var(--background-surface-primary)
}

.backgroundSurfaceSecondary {
    background-color: var(--background-surface-secondary)
}

.backgroundInversePrimary {
    background-color: var(--background-inverse-primary)
}

.backgroundOverlayPrimary {
    background-color: var(--background-overlay-primary)
}

.backgroundOverlaySecondary {
    background-color: var(--background-overlay-secondary)
}

.backgroundAlwaysDark {
    background-color: var(--background-always-dark)
}

.backgroundAlwaysLight {
    background-color: var(--background-always-light)
}

.backgroundAccent {
    background-color: var(--background-accent)
}

.backgroundPositive {
    background-color: var(--background-positive)
}

.backgroundNegative {
    background-color: var(--background-negative)
}

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

.backgroundAccentSubtle {
    background-color: var(--background-accent-subtle)
}

.backgroundPositiveSubtle {
    background-color: var(--background-positive-subtle)
}

.backgroundNegativeSubtle {
    background-color: var(--background-negative-subtle)
}

.backgroundWarningSubtle {
    background-color: var(--background-warning-subtle)
}

.backgroundAccentSecondary {
    background-color: var(--background-accent-secondary)
}

.backgroundAccentSecondarySubtle {
    background-color: var(--background-accent-secondary-subtle)
}

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

.borderDisabled {
    border: 1px solid var(--border-disabled)
}

.borderAccent {
    border: 1px solid var(--border-accent)
}

.borderPositive {
    border: 1px solid var(--border-positive)
}

.borderNegative {
    border: 1px solid var(--border-negative)
}

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

.contentPrimary {
    color: var(--content-primary)
}

.contentSecondary {
    color: var(--content-secondary)
}

.contentTertiary {
    color: var(--content-tertiary)
}

.contentInversePrimary {
    color: var(--content-inverse-primary)
}

.contentInverseSecondary {
    color: var(--content-inverse-secondary)
}

.contentAccent {
    color: var(--content-accent)
}

.contentNegative {
    color: var(--content-negative)
}

.contentWarning {
    color: var(--content-warning)
}

.contentPositive {
    color: var(--content-positive)
}

.contentDisabled {
    color: var(--content-disabled)
}

.contentOnColour {
    color: var(--content-on-colour)
}

.contentOnColourInverse {
    color: var(--content-on-colour-inverse)
}

.contentAccentSecondary {
    color: var(--content-accent-secondary)
}

.contentAccentSecondarySubtle {
    color: var(--content-accent-secondary-subtle)
}

.tempNbtBackgroundPink {
    background-color: var(--tempNbtPink)
}

.tempNbtBackgroundYellow {
    background-color: var(--tempNbtYellow)
}

.tempNbtBackgroundBlue {
    background-color: var(--tempNbtBlue)
}

.tempNbtBackgroundGray {
    background-color: var(--tempNbtGray)
}

.tempNbtBackgroundRed {
    background-color: var(--tempNbtRed)
}

.backgroundTransparentHover:hover {
    background-color: var(--bg-transparent-hover)
}

.backgroundAccentHover:hover {
    background-color: var(--bg-accent-hover)
}

.backgroundAccentSubtleHover:hover {
    background-color: var(--bg-accent-subtle-hover)
}

.backgroundTransparentAccentHover:hover {
    background-color: var(--bg-transparent-accent-hover)
}

.backgroundPositiveHover:hover {
    background-color: var(--bg-positive-hover)
}

.backgroundPositiveSubtleHover:hover {
    background-color: var(--bg-positive-subtle-hover)
}

.backgroundTransparentPositiveHover:hover {
    background-color: var(--bg-transparent-positive-hover)
}

.backgroundNegativeHover:hover {
    background-color: var(--bg-negative-hover)
}

.backgroundNegativeSubtleHover:hover {
    background-color: var(--bg-negative-subtle-hover)
}

.backgroundTransparentNegativeHover:hover {
    background-color: var(--bg-transparent-negative-hover)
}

.backgroundTransparentSelected:active {
    background-color: var(--bg-transparent-selected)
}

.backgroundAccentSelected:active {
    background-color: var(--bg-accent-selected)
}

.backgroundAccentSubtleSelected:active {
    background-color: var(--bg-accent-subtle-selected)
}

.backgroundTransparentAccentSelected:active {
    background-color: var(--bg-transparent-accent-selected)
}

.backgroundPositiveSelected:active {
    background-color: var(--bg-positive-selected)
}

.backgroundPositiveSubtleSelected:active {
    background-color: var(--bg-positive-subtle-selected)
}

.backgroundTransparentPositiveSelected:active {
    background-color: var(--bg-transparent-positive-selected)
}

.backgroundNegativeSelected:active {
    background-color: var(--bg-negative-selected)
}

.backgroundNegativeSubtleSelected:active {
    background-color: var(--bg-negative-subtle-selected)
}

.backgroundTransparentNegativeSelected:active {
    background-color: var(--bg-transparent-negative-selected)
}

html {
    --background-primary: var(--white);
    --background-secondary: var(--gray50);
    --background-tertiary: var(--gray100);
    --background-transparent: var(--overlay00);
    --background-surface-primary: var(--white);
    --background-surface-secondary: var(--gray50);
    --background-inverse-primary: var(--gray900);
    --background-overlay-primary: var(--overlay70);
    --background-overlay-secondary: var(--overlay30);
    --background-always-dark: var(--black);
    --background-always-light: var(--white);
    --background-accent: #072642;
    --background-positive: #072642;
    --background-negative: var(--red500);
    --background-warning: var(--yellow500);
    --background-accent-subtle: var(--green100);
    --background-positive-subtle: var(--green100);
    --background-negative-subtle: var(--red100);
    --background-warning-subtle: var(--yellow100);
    --background-accent-secondary: var(--purple500);
    --background-accent-secondary-subtle: var(--purple100)
}

html[data-theme=dark] {
    --background-primary: var(--black);
    --background-surface-primary: var(--gray50);
    --background-surface-secondary: var(--gray100);
    --background-inverse-primary: var(--white)
}

html {
    --border-primary: var(--gray150);
    --border-disabled: var(--gray100);
    --border-accent: #072642;
    --border-positive: #072642;
    --border-negative: var(--red500);
    --border-neutral: var(--gray900)
}

html[data-theme=dark] {
    --border-neutral: var(--white)
}

html {
    --content-primary: var(--gray900);
    --content-secondary: var(--gray700);
    --content-tertiary: var(--gray500);
    --content-inverse-primary: var(--white);
    --content-inverse-secondary: var(--gray300);
    --content-disabled: var(--gray400);
    --content-on-colour: var(--white);
    --content-on-colour-inverse: var(--gray900);
    --content-accent: #072642;
    --content-negative: var(--red500);
    --content-warning: var(--yellow500);
    --content-positive: #072642;
    --content-accent-secondary: #072642;
    --content-accent-secondary-subtle: var(--purple300)
}

html[data-theme=dark] {
    --content-primary: var(--white);
    --content-inverse-primary: var(--black);
    --content-inverse-secondary: var(--gray400);
    --content-disabled: var(--gray500);
    --content-on-colour-inverse: var(--black)
}

html {
    --bg-transparent-hover: rgba(68,71,91,.059);
    --bg-accent-hover: #072642;
    --bg-accent-subtle-hover: #ddf5ee;
    --bg-transparent-accent-hover: rgba(0,179,134,.059);
    --bg-positive-hover: #06243f;
    --bg-positive-subtle-hover: #ddf5ee;
    --bg-transparent-positive-hover: rgba(0,179,134,.059);
    --bg-negative-hover: #e15a3e;
    --bg-negative-subtle-hover: #f9e0db;
    --bg-transparent-negative-hover: rgba(235,91,60,.059);
    --bg-transparent-selected: rgba(68,71,91,.059);
    --bg-accent-selected: #072642;
    --bg-accent-subtle-selected: #ddf5ee;
    --bg-transparent-accent-selected: rgba(0,179,134,.059);
    --bg-positive-selected: #072642;
    --bg-positive-subtle-selected: #ddf5ee;
    --bg-transparent-positive-selected: rgba(0,179,134,.059);
    --bg-negative-selected: #e15a3e;
    --bg-negative-subtle-selected: #f9e0db;
    --bg-transparent-negative-selected: rgba(235,91,60,.059)
}

html.color-theme-in-transition,html.color-theme-in-transition *,html.color-theme-in-transition :after,html.color-theme-in-transition :before {
    transition: all .3s!important;
    transition-delay: 0!important
}

html {
    --gray900: #44475b;
    --gray800: #696c7c;
    --gray700: #7c7e8c;
    --gray600: #8f919d;
    --gray500: #a1a3ad;
    --gray400: #b0b2ba;
    --gray300: #c7c8ce;
    --gray200: #dddee1;
    --gray150: #e9e9eb;
    --gray100: #f0f0f2;
    --gray50: #f8f8f8;
    --green500: #00b386;
    --green300: #66e3c4;
    --green100: #ebf9f5;
    --purple500: #5367ff;
    --purple300: #84a4ff;
    --purple100: #eef0ff;
    --yellow500: #ffb61b;
    --yellow100: #fff5e0;
    --red500: #eb5b3c;
    --red100: #fae9e5;
    --dangerouslySetPrimaryBg: #fff;
    --tempNbtPink: #f1e3f3;
    --tempNbtYellow: #fff3c8;
    --tempNbtBlue: #d6eeff;
    --tempNbtGray: #f0f0f2;
    --tempNbtRed: #ffc7bb
}

html,html[data-theme=dark] {
    --black: #121212;
    --white: #fff;
    --overlay00: hsla(0,0%,7%,0);
    --overlay30: hsla(0,0%,7%,.3);
    --overlay70: hsla(0,0%,7%,.7)
}

html[data-theme=dark] {
    --gray900: #f8f8f8;
    --gray800: #d1d1d1;
    --gray700: #b8b8b8;
    --gray600: #a0a0a0;
    --gray500: #888;
    --gray400: #717171;
    --gray300: #595959;
    --gray200: #414141;
    --gray150: #2e2e2e;
    --gray100: #252525;
    --gray50: #1b1b1b;
    --green500: #0abb92;
    --green300: #0b5e49;
    --green100: #10362d;
    --purple500: #98a4ff;
    --purple300: #323c89;
    --purple100: #181a2a;
    --yellow500: #e7a61a;
    --yellow100: #46391d;
    --red500: #d55438;
    --red100: #411d16;
    --dangerouslySetPrimaryBg: #121212;
    --tempNbtPink: #9b63a3;
    --tempNbtYellow: #b27a00;
    --tempNbtBlue: #3e79a4;
    --tempNbtGray: #5c5c6f;
    --tempNbtRed: #c85d0f;
    --bg-transparent-hover: hsla(0,0%,100%,.059);
    --bg-accent-hover: #0ab18a;
    --bg-accent-subtle-hover: #103e33;
    --bg-transparent-accent-hover: rgba(10,187,146,.059);
    --bg-positive-hover: #0ab18a;
    --bg-positive-subtle-hover: #103e33;
    --bg-transparent-positive-hover: rgba(10,187,146,.059);
    --bg-negative-hover: #c95036;
    --bg-negative-subtle-hover: #4a2018;
    --bg-transparent-negative-hover: rgba(213,84,56,.059);
    --bg-transparent-selected: hsla(0,0%,100%,.059);
    --bg-accent-selected: #0ab18a;
    --bg-accent-subtle-selected: #103e33;
    --bg-transparent-accent-selected: rgba(10,187,146,.059);
    --bg-positive-selected: #0ab18a;
    --bg-positive-subtle-selected: #103e33;
    --bg-transparent-positive-selected: rgba(10,187,146,.059);
    --bg-negative-selected: #c95036;
    --bg-negative-subtle-selected: #4a2018;
    --bg-transparent-negative-selected: rgba(213,84,56,.059)
}

@font-face {
    font-family: GrowwSans;
    font-style: normal;
    font-weight: 300 700;
    src: url(//assets-netstorage.groww.in/web-assets/nbg_mobile/prod/_next/static/media/GrowwSans-Variable.a721832b.woff2) format("woff2-variations");
    font-display: swap
}

@font-face {
    font-family: NotoSans;
    font-style: normal;
    font-weight: 500;
    src: url(//assets-netstorage.groww.in/web-assets/nbg_mobile/prod/_next/static/media/NotoSans-Regular.05ee3c64.woff2) format("woff2");
    unicode-range: U+0900-097f;
    font-display: swap
}

@font-face {
    font-family: NotoSans;
    font-style: normal;
    font-weight: 600;
    src: url(//assets-netstorage.groww.in/web-assets/nbg_mobile/prod/_next/static/media/NotoSans-Medium.a342421c.woff2) format("woff2");
    unicode-range: U+0900-097f;
    font-display: swap
}

@font-face {
    font-family: NotoSans;
    font-style: normal;
    font-weight: 700;
    src: url(//assets-netstorage.groww.in/web-assets/nbg_mobile/prod/_next/static/media/NotoSans-SemiBold.450bfe1f.woff2) format("woff2");
    unicode-range: U+0900-097f;
    font-display: swap
}

.bodySmall {
    font-weight: var(--font-weight-regular)
}

.bodySmall,.bodySmallHeavy {
    font-size: var(--font-size-12);
    line-height: 1.125rem
}

.bodySmallHeavy {
    font-weight: var(--font-weight-medium)
}

.bodyBase {
    font-weight: var(--font-weight-regular)
}

.bodyBase,.bodyBaseHeavy {
    font-size: var(--font-size-14);
    line-height: 1.25rem
}

.bodyBaseHeavy {
    font-weight: var(--font-weight-medium)
}

.bodyLarge {
    font-weight: var(--font-weight-regular)
}

.bodyLarge,.bodyLargeHeavy {
    font-size: var(--font-size-16);
    line-height: 1.375rem
}

.bodyLargeHeavy {
    font-weight: var(--font-weight-medium)
}

.bodyXLarge {
    font-weight: var(--font-weight-regular)
}

.bodyXLarge,.bodyXLargeHeavy {
    font-size: var(--font-size-18);
    line-height: 1.5625rem
}

.bodyXLargeHeavy,.displaySmall {
    font-weight: var(--font-weight-medium)
}

.displaySmall {
    font-size: var(--font-size-24);
    line-height: 2.0625rem
}

.displayBase {
    font-size: var(--font-size-28);
    line-height: 2.4375rem
}

.displayBase,.displayLarge {
    font-weight: var(--font-weight-medium)
}

.displayLarge {
    font-size: var(--font-size-32);
    line-height: 2.75rem
}

.displayXLarge {
    font-size: var(--font-size-40);
    line-height: 3.5rem
}

.buttonSentenceCase14,.displayXLarge {
    font-weight: var(--font-weight-medium)
}

.buttonSentenceCase14 {
    font-size: var(--font-size-14);
    line-height: 1rem
}

.buttonUpperCase16 {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: 1.25rem
}

.headingXSmall {
    font-size: var(--font-size-14);
    line-height: 1.25rem
}

.headingSmall,.headingXSmall {
    font-weight: var(--font-weight-medium)
}

.headingSmall {
    font-size: var(--font-size-16);
    line-height: 1.375rem
}

.headingBase {
    font-size: var(--font-size-18);
    line-height: 1.5625rem
}

.headingBase,.headingLarge {
    font-weight: var(--font-weight-medium)
}

.headingLarge {
    font-size: var(--font-size-20);
    line-height: 2rem
}

html {
    --font-size-12: 0.75rem;
    --font-size-14: 0.85rem;
    --font-size-16: 0.75rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-22: 1.375rem;
    --font-size-24: 1.5rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-40: 2.5rem;
    --font-size-44: 2.75rem;
    --font-size-56: 3.5rem;
    --font-weight-regular: 435;
    --font-weight-medium: 535;
    --font-weight-bold: 660
}

.ac11Hidden,.ac11Show {
    overflow: hidden;
    transition: height .5s
}

.ac11RevealComplete {
    overflow: visible
}

.ac11collapsibleOpen {
    transform: rotate(180deg)
}

.ac11collapsibleClose {
    transform: rotate(0deg)
}

.ac11Icon {
    width: 20px;
    transition: transform .3s linear
}

.ac11Title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes wink324 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes upDown {
    0%,to {
        transform: translateY(5px)
    }

    50% {
        transform: translateY(15px)
    }
}

@keyframes chartUpDown {
    0%,to {
        transform: translateY(10px)
    }

    50% {
        transform: translateY(45px)
    }
}

@keyframes indeterminate_first3312 {
    0% {
        left: -100%;
        width: 100%
    }

    to {
        left: 100%;
        width: 10%
    }
}

@keyframes indeterminate_second3312 {
    0% {
        left: -150%;
        width: 100%
    }

    to {
        left: 100%;
        width: 10%
    }
}

.loader14Active {
    position: relative;
    display: inline-block
}

.loader14Hidden {
    display: none
}

.loader14Active.loader14Block {
    display: block
}

.loader14Inner {
    width: 60px;
    height: 60px;
    display: inline-block
}

.loader14Inner.loader14XSmall {
    width: 12px;
    height: 12px
}

.loader14Inner.loader14Small {
    width: 16px;
    height: 16px
}

.loader14Inner.loader14Base {
    width: 20px;
    height: 20px
}

.loader14Inner.loader14Large {
    width: 24px;
    height: 24px
}

.loader14Inner.loader14XLarge {
    width: 28px;
    height: 28px
}

.loader14Inner.loader14XXLarge {
    width: 32px;
    height: 32px
}

.loader14CircularBolt>div {
    height: 60px;
    width: 60px;
    position: absolute;
    display: inline-block
}

.loader14Circular {
    height: 60px;
    width: 60px
}

.loader14Circular.constantWhite {
    border-top-color: var(--content-on-color);
    border-right-color: transparent;
    border-bottom-color: var(--content-on-color);
    border-left-color: var(--content-on-color)
}

.loader14Circular,.loader14CircularBolt>div:first-child {
    top: 0;
    left: 0;
    border-color: var(--dangerouslySetPrimaryBg);
    border-width: 2px;
    border: 2px solid var(--content-accent);
    border-right: 2px solid transparent;
    border-radius: 50%;
    animation: rotate .8s linear infinite
}

.loader14CircularBolt>div:last-child {
    top: 12px;
    left: 22px;
    height: 40px;
    width: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2214.9%22 height%3D%2235%22 viewBox%3D%22-514.9 944.2 14.9 35%22%3E%3Cpath fill%3D%22%232FC394%22 d%3D%22M-500.1 959h-4.6l2.1-14.8-12.4 20.2h4.6l-2.1 14.8 12.4-20.2z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: revert;
    animation: wink324 1s ease-in-out infinite alternate
}

.loader14Circular.contentNegative,.loader14CircularBolt.contentNegative>div:first-child {
    border-top-color: var(--content-negative);
    border-right-color: transparent;
    border-bottom-color: var(--content-negative);
    border-left-color: var(--content-negative)
}

.loader14CircularBolt.contentNegative>div:last-child {
    background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2214.9%22 height%3D%2235%22 viewBox%3D%22-514.9 944.2 14.9 35%22%3E%3Cpath fill%3D%22%23FF633F%22 d%3D%22M-500.1 959h-4.6l2.1-14.8-12.4 20.2h4.6l-2.1 14.8 12.4-20.2z%22%2F%3E%3C%2Fsvg%3E")
}

.loader14CandleStick {
    display: flex;
    height: 60px;
    width: 60px;
    align-items: center;
    justify-content: center;
    transform: rotateX(180deg)
}

.loader14CandleStick:before {
    content: "";
    position: absolute;
    width: 150%;
    top: 0;
    border-bottom: 1px dashed var(--border-negative);
    animation: chartUpDown 3s ease-in-out 0s infinite alternate
}

.loader14CandleStick>div {
    position: relative;
    width: 10px;
    height: 60px;
    margin-right: 5px
}

.loader14CandleStick>div:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    background: var(--background-accent);
    height: 50px;
    width: 1px;
    transform: translateX(-50%)
}

.loader14CandleStick>div:after {
    content: "";
    position: absolute;
    width: 10px;
    left: -50%;
    transform: translateX(-50%);
    margin: 0 5px;
    animation: upDown 1s ease-in-out 0s infinite alternate
}

.loader14CandleStick>div:nth-child(2n):after,.loader14CandleStick>div:nth-child(2n):before {
    background: var(--background-accent)
}

.loader14CandleStick>div:nth-child(odd):after,.loader14CandleStick>div:nth-child(odd):before {
    background: var(--background-negative)
}

.loader14CandleStick>div:first-child:after {
    min-height: 15px;
    animation-delay: .1s
}

.loader14CandleStick>div:nth-child(2):after {
    min-height: 25px;
    animation-delay: .2s
}

.loader14CandleStick>div:nth-child(3):after {
    min-height: 30px;
    animation-delay: .3s
}

.loader14CandleStick>div:nth-child(4):after {
    min-height: 40px;
    animation-delay: .4s
}

.loader14Linear {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 4px
}

.loader14Indeterminate {
    position: relative;
    width: 100%;
    height: 100%
}

.loader14Indeterminate:before {
    content: "";
    position: absolute;
    height: 100%;
    background-color: var(--background-accent);
    animation: indeterminate_first3312 1.5s ease-out infinite
}

.loader14Indeterminate:after {
    content: "";
    position: absolute;
    height: 100%;
    background-color: var(--background-accent-subtle);
    animation: indeterminate_second3312 1.5s ease-in infinite
}

.mint-btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    border-radius: 8px;
    flex-shrink: 0;
    border: 0;
    outline: none
}

.mint-btn-default:focus-visible {
    outline: 2px solid var(--content-accent-secondary);
    outline-offset: 2px
}

.mint-btn-cursor-default {
    cursor: default
}

.mint-btn-default.mint-btn-secondary-default-border {
    border: 1px solid var(--border-primary)
}

.mint-btn-tertiary-label-border {
    border-style: dashed!important;
    border-width: 0 0 1px!important
}

.mint-btn-small {
    padding: 12px;
    height: 32px;
    gap: 6px
}

.mint-btn-medium {
    padding: 12px 16px;
    height: 40px;
    gap: 6px
}

.mint-btn-large {
    padding: 16px 24px;
    height: 48px;
    gap: 8px
}

.mint-btn-full-width {
    width: 100%
}

.mint-btn-disabled {
    cursor: default;
    pointer-events: none;
    background-color: var(--border-primary)
}

.mint-btn-disabled.mint-btn-tertiary-disabled {
    background-color: transparent
}

.mint-btn-default.mint-btn-compact {
    min-width: -moz-fit-content;
    min-width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: 0;
    padding: 0
}

.mint-btn-loader-wrapper {
    position: absolute;
    margin-top: 4px
}

.mint-btn-default.mint-btn-loader {
    color: transparent;
    pointer-events: none
}

.mint-btn-loader-item-border-white {
    border: 2px solid var(--background-always-light);
    border-top: 2px solid transparent
}

.mint-btn-loader-item-border-gray {
    border: 2px solid var(--border-neutral);
    border-top: 2px solid transparent
}

.mint-btn-small .mint-btn-loader-item {
    width: 16px;
    height: 16px
}

.mint-btn-medium .mint-btn-loader-item {
    width: 20px;
    height: 20px
}

.mint-btn-large .mint-btn-loader-item {
    width: 24px;
    height: 24px
}

.mint-btn-fixed-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 12px;
    width: 100%;
    z-index: var(--zindex300);
    border-width: 1px 0 0
}

.mint-btn-primary:hover {
    background-color: var(--color-bg-button-primary-accent-hover)
}

.mint-btn-secondary.mint-btn-secondary-default:hover {
    background-color: var(--color-bg-button-secondary-default-hover)
}

.mint-btn-secondary.mint-btn-secondary-accent:hover {
    background-color: var( --color-bg-button-secondary-accent-hover)
}

.mint-btn-tertiary.mint-btn-tertiary-default:hover {
    background-color: var( --color-bg-button-tertiary-default-hover)
}

.mint-btn-tertiary.mint-btn-tertiary-accent:hover {
    background-color: var( --color-bg-button-tertiary-accent-hover)
}

.mint-btn-default.mint-btn-negative:hover {
    background-color: var(--color-bg-button-primary-negative-hover)
}

.mint-btn-default {
    --color-bg-button-primary-accent-hover: var(--bg-accent-hover);
    --color-bg-button-secondary-default-hover: var(--bg-transparent-hover);
    --color-bg-button-secondary-accent-hover: var(--bg-accent-subtle-hover);
    --color-bg-button-tertiary-default-hover: var(--bg-transparent-hover);
    --color-bg-button-tertiary-accent-hover: var(--bg-transparent-accent-hover);
    --color-bg-button-primary-negative-hover: var(--bg-negative-hover)
}

.c11Default {
    gap: 8px
}

.c11checkOnRight {
    flex-direction: row-reverse;
    width: 100%!important
}

.pill12Pill {
    width: -moz-fit-content;
    width: fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 99px
}

.pill12SelectedAccentPill:hover {
    opacity: .9
}

.pill12PillHover:hover {
    background-color: var(--background-secondary)
}

.pill12SizeXSmall {
    padding: 8px 12px
}

.pill12SizeSmall {
    padding: 8px 14px
}

.pill12SizeBase {
    padding: 8px 16px
}

.pill12SizeLarge {
    padding: 8px 20px
}

.pill12SizeXLarge {
    padding: 8px 24px
}

.rodal,.rodal-mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001
}

.rodal {
    position: fixed
}

.rodal-dialog,.rodal-mask {
    position: absolute
}

.rodal-dialog {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10001;
    padding: 0;
    background: none;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center
}

.rodal-dialog:focus {
    outline: none
}

.rodal-close {
    position: absolute;
    cursor: pointer;
    top: 16px;
    right: 16px
}

@media (max-width: 800px) {
    .rodal-close {
        top:5px;
        right: 0
    }
}

.rodal-close:after,.rodal-close:before {
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: var(--content-secondary);
    border-radius: 100%;
    transition: background .2s
}

.rodal-close:before {
    transform: rotate(45deg)
}

.rodal-close:after {
    transform: rotate(-45deg)
}

.rodal-close:hover:after,.rodal-close:hover:before {
    background: var(--content-secondary)
}

@keyframes rodal-fade-enter {
    0% {
        opacity: 0
    }
}

.rodal-fade-enter {
    animation: rodal-fade-enter ease-in both
}

@keyframes rodal-fade-leave {
    to {
        opacity: 0
    }
}

.rodal-fade-leave {
    animation: rodal-fade-leave ease-out both
}

@keyframes rodal-zoom-enter {
    0% {
        transform: scale3d(.3,.3,.3)
    }
}

.rodal-zoom-enter {
    animation: rodal-zoom-enter cubic-bezier(.4,0,0,1.5) both
}

@keyframes rodal-zoom-leave {
    to {
        transform: scale3d(.3,.3,.3)
    }
}

.rodal-zoom-leave {
    animation: rodal-zoom-leave both
}

@keyframes rodal-slideDown-enter {
    0% {
        transform: translate3d(0,-100px,0)
    }
}

.rodal-slideDown-enter {
    animation: rodal-slideDown-enter cubic-bezier(.4,0,0,1.5) both
}

@keyframes rodal-slideDown-leave {
    to {
        transform: translate3d(0,-100px,0)
    }
}

.rodal-slideDown-leave {
    animation: rodal-slideDown-leave both
}

@keyframes rodal-slideLeft-enter {
    0% {
        transform: translate3d(-150px,0,0)
    }
}

.rodal-slideLeft-enter {
    animation: rodal-slideLeft-enter cubic-bezier(.4,0,0,1.5) both
}

@keyframes rodal-slideLeft-leave {
    to {
        transform: translate3d(-150px,0,0)
    }
}

.rodal-slideLeft-leave {
    animation: rodal-slideLeft-leave both
}

@keyframes rodal-slideRight-enter {
    0% {
        transform: translate3d(150px,0,0)
    }
}

.rodal-slideRight-enter {
    animation: rodal-slideRight-enter cubic-bezier(.4,0,0,1.5) both
}

@keyframes rodal-slideRight-leave {
    to {
        transform: translate3d(150px,0,0)
    }
}

.rodal-slideRight-leave {
    animation: rodal-slideRight-leave both
}

@keyframes rodal-slideUp-enter {
    0% {
        transform: translate3d(0,100px,0)
    }
}

.rodal-slideUp-enter {
    animation: rodal-slideUp-enter cubic-bezier(.4,0,0,1.5) both
}

@keyframes rodal-slideUp-leave {
    to {
        transform: translate3d(0,100px,0)
    }
}

.rodal-slideUp-leave {
    animation: rodal-slideUp-leave both
}

@keyframes rodal-flip-enter {
    0% {
        transform: perspective(400px) rotateX(60deg)
    }

    70% {
        transform: perspective(400px) rotateX(-15deg)
    }

    to {
        transform: perspective(400px)
    }
}

.rodal-flip-enter {
    animation: rodal-flip-enter ease-in both;
    backface-visibility: visible!important
}

@keyframes rodal-flip-leave {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateX(-15deg)
    }

    to {
        transform: perspective(400px) rotateX(45deg)
    }
}

.rodal-flip-leave {
    animation: rodal-flip-leave both;
    backface-visibility: visible!important
}

@keyframes rodal-rotate-enter {
    0% {
        transform: rotate(-180deg) scale3d(.3,.3,.3)
    }
}

.rodal-rotate-enter {
    animation: rodal-rotate-enter both;
    transform-origin: center
}

@keyframes rodal-rotate-leave {
    to {
        transform: rotate(180deg) scale3d(.3,.3,.3)
    }
}

.rodal-rotate-leave {
    animation: rodal-rotate-leave both;
    transform-origin: center
}

@keyframes rodal-door-enter {
    0% {
        transform: scaleX(0)
    }
}

.rodal-door-enter {
    animation: rodal-door-enter cubic-bezier(.4,0,0,1.5) both
}

@keyframes rodal-door-leave {
    60% {
        transform: scaleX(.01)
    }

    to {
        transform: scale3d(0,1,.1)
    }
}

.rodal-door-leave {
    animation: rodal-door-leave both
}

.child-wrapper {
    position: relative;
    width: 100%
}

.popup-border {
    border-radius: 6px
}

.date101MainDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 23px;
    position: relative
}

.date101Label {
    font-size: 16px;
    text-align: center
}

.date101SelectedLabel {
    margin-top: 25px;
    font-size: 19px;
    text-align: center
}

.date101Grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    margin-top: 20px;
    margin-bottom: 20px
}

.date101Grid-item {
    border-radius: 5px;
    padding: 6px;
    font-size: 13px;
    text-align: center;
    margin: 10px
}

.date101Grid-item.regular {
    pointer-events: auto;
    color: var(--content-primary);
    cursor: pointer;
    transition: all .1s ease-in-out
}

.date101Grid-item.active {
    pointer-events: auto;
    background-color: var(--background-accent-secondary);
    transform: scale(1.2);
    cursor: pointer
}

.date101Grid-item.default-active {
    pointer-events: auto;
    background-color: var(--background-accent);
    transform: scale(1.2);
    cursor: pointer
}

.date101Grid-item.disabled {
    pointer-events: none;
    cursor: not-allowed;
    color: var(--content-tertiary)
}

.date101Grid-item.previously-active {
    pointer-events: auto;
    color: var(--content-primary);
    transform: scale(1.2);
    cursor: pointer
}

.date101Grid-item.regular:hover {
    transform: scale(1.2);
    background: var(--background-secondary)
}

#userCart .dropdown__content {
    z-index: 1
}

.date101TooltipMainDiv {
    border-radius: 5px;
    width: 350px;
    height: auto;
    position: absolute;
    transition: all .3s ease-in-out
}

.date101CrossButton {
    position: absolute;
    opacity: .5;
    top: 10px;
    right: 10px;
    cursor: pointer
}

.date101CrossButton:hover {
    opacity: .3
}

.dropdown {
    display: inline-block
}

.dropdown__content {
    display: none;
    position: absolute;
    z-index: var(--zindex10001)
}

.dropdown--active .dropdown__content {
    display: block
}

@media only screen and (min-width: 601px) {
    .dropdown--active .dropdown__fadein {
        animation:ddFadeIn .2s normal
    }

    @keyframes ddFadeIn {
        0% {
            transform: translateY(16px)
        }

        80% {
            opacity: 1
        }

        to {
            transform: translateY(0)
        }
    }
}

.gb6Box {
    border-bottom: 1px solid var(--border-primary);
    border-radius: 5px;
    width: 100%;
    padding: 16px 0
}

.gb6Icon {
    margin-right: 4px
}

.gb6Text {
    font-size: 14px;
    font-weight: 500
}

.gb6Fit,.infbd45ParentDiv {
    width: -moz-fit-content;
    width: fit-content
}

.infbd45ParentDiv {
    flex: 1 0;
    border-radius: 8px;
    padding: 12px 16px;
    gap: 8px
}

.mb76CompactBox {
    padding: 0 16px!important;
    border-radius: 0
}

.mb45XSmall {
    padding: 12px 8px
}

.mb45Small {
    padding: 12px
}

.mb45Base {
    padding: 12px 16px
}

.mb45Large {
    padding: 12px 20px
}

.mb45XLarge {
    padding: 12px 24px
}

.pop12Wrapper {
    display: inline-block;
    position: relative
}

.pop12Popover {
    position: absolute;
    border-radius: 4px;
    padding: 6px;
    font-size: 13px;
    opacity: 1;
    z-index: var(--zindex900)
}

.pop12Popover:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border: 6px solid transparent;
    margin-left: -6px
}

.pop12Popover.top {
    left: 50%
}

.pop12Popover.top,.pop12Popover.top-start {
    bottom: 100%;
    margin-bottom: 8px;
    transform: translateX(-50%)
}

.pop12Popover.top-start {
    left: 0
}

.pop12Popover.top-end {
    bottom: 100%;
    margin-bottom: 8px;
    transform: translateX(-50%);
    left: 100%
}

.pop12Popover.top:before,.top-end:before,.top-start:before {
    top: 100%;
    left: 50%;
    border-top-color: var(--dangerouslySetPrimaryBg)
}

.pop12Popover.right {
    top: 50%
}

.pop12Popover.right,.pop12Popover.right-start {
    left: 100%;
    margin-left: 8px;
    transform: translateY(-50%)
}

.pop12Popover.right-start {
    top: 0
}

.pop12Popover.right-end {
    left: 100%;
    margin-left: 8px;
    top: 100%;
    transform: translateY(-50%)
}

.pop12Popover.right:before,.right-end:before,.right-start:before {
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-right-color: var(--dangerouslySetPrimaryBg)
}

.pop12Popover.bottom {
    left: 50%
}

.pop12Popover.bottom,.pop12Popover.bottom-start {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%)
}

.pop12Popover.bottom-start {
    left: 0
}

.pop12Popover.bottom-end {
    top: 100%;
    margin-top: 8px;
    left: 100%;
    transform: translateX(-50%)
}

.bottom-end:before,.bottom-start:before,.pop12Popover.bottom:before {
    bottom: 100%;
    left: 50%;
    border-bottom-color: var(--dangerouslySetPrimaryBg)
}

.pop12Popover.left {
    top: 50%
}

.pop12Popover.left,.pop12Popover.left-start {
    right: 100%;
    margin-right: 8px;
    transform: translateY(-50%)
}

.pop12Popover.left-start {
    top: 0
}

.pop12Popover.left-end {
    right: 100%;
    margin-right: 8px;
    top: 100%;
    transform: translateY(-50%)
}

.left-end:before,.left-start:before,.pop12Popover.left:before {
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    border-left-color: var(--dangerouslySetPrimaryBg)
}

.pb65LinearMain {
    border-radius: 5;
    background-color: var(--border-primary);
    height: 10px
}

.pb65CircleMain {
    stroke-linecap: round;
    fill: none
}

.pb65LinearFiller {
    text-align: right;
    animation-name: pb65LinearAnim;
    animation-duration: 1s
}

.pb65CicleFiller,.pb65LinearFiller {
    display: none;
    transition: all 1s ease-in-out
}

.pb65CicleFiller {
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: transparent
}

.pb65MainTxt {
    text-anchor: middle;
    font-size: 16px
}

@keyframes pb65LinearAnim {
    0% {
        width: 0
    }
}

.radioCo11Box {
    gap: 8px
}

.radioCo11BoxReverse {
    flex-direction: row-reverse;
    width: 100%!important
}

.scroll11Img {
    transform: rotate(180deg);
    fill: var(--content-accent);
    cursor: pointer
}

.scroll11 {
    position: fixed;
    bottom: 48px;
    right: 48px;
    opacity: 0
}

.scroll11:hover {
    transform: scale(1.05)
}

.scroll11FadeIn {
    pointer-events: all;
    opacity: 1;
    visibility: visible
}

.scroll11FadeIn,.scroll11FadeOut {
    transition: visibility .5s,opacity .5s linear,transform .25s linear
}

.scroll11FadeOut {
    pointer-events: none;
    opacity: 0;
    visibility: hidden
}

.se55DropDownWrapper,.se55Dropdown {
    width: 100%
}

.se55DropdownContent {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    top: 43px;
    left: 0;
    z-index: var(--zindex400)
}

.se55DropdownPara {
    margin: 0;
    padding: 9px 16px
}

.se55DropdownPara:hover,.se55DropdownParaHover {
    background: var(--background-secondary)
}

.se55Input {
    left: 0;
    width: 100%;
    bottom: 0;
    opacity: 0;
    position: absolute;
    height: 100%;
    pointer-events: all;
    cursor: pointer
}

.se55SelectBox {
    padding: 9px 16px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between
}

.slider24Wrapper {
    width: 100%
}

.tb10Table {
    width: 100%;
    border-collapse: collapse
}

.tb10ThText {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 2.17;
    letter-spacing: .17px
}

.tb10Td {
    min-height: 40px;
    text-align: left
}

.tb10Table thead tr {
    border-bottom: 1px dashed var(--border-primary)
}

.tb10Table tbody tr {
    border-bottom: 1px solid var(--border-primary)
}

.tb10Table tbody tr:last-child {
    border-bottom: none
}

.tb10Th {
    min-height: 40px;
    text-align: left
}

.tb10HideIcon {
    visibility: hidden
}

.tb10SelectHeaderCell {
    font-weight: 500;
    opacity: 1
}

.tb10IconClass {
    top: 6px
}

@media only screen and (max-width: 601px) {
    .tb10IconClass {
        width:17px!important;
        height: 17px!important
    }

    .tb10Table {
        border: none
    }
}

.tabs8Container {
    position: relative;
    max-height: 55px
}

.bottomBorderOnly {
    border-width: 0 0 1px!important
}

.tabs8Text {
    line-height: 15px;
    padding-right: 45px;
    height: 30px;
    cursor: pointer
}

.tabs8Line {
    position: absolute;
    bottom: 0px;
    height: 3px;
    background: #072642;
    will-change: left,width;
    transition: left .2s linear,width .2s linear
}

@media (max-width: 1025px) {
    .tabs8Container {
        max-height: 40px;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .tabs8Container::-webkit-scrollbar {
        display: none
    }

    .tabs8PageWidth20Mgn {
        width: calc(100vw - 40px);
        overflow-y: auto
    }

    .tabs8Text {
        font-size: 15px;
        font-weight: 500;
        border-radius: 25px;
        padding-right: 24px;
        height: 25px;
        -webkit-font-smoothing: auto
    }

    .tabs8Line {
        will-change: left,width;
        transition: left .2s linear,width .2s linear
    }

    .tabs8Parent {
        min-width: -moz-max-content;
        min-width: max-content
    }
}

.tg11Container {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 3px 10px;
    overflow: hidden;
    border-radius: 4px;
    min-height: 30px;
    -webkit-font-smoothing: auto
}

.txta37Label {
    margin-bottom: 16px
}

.txta37Area {
    resize: none;
    border-radius: 8px;
    caret-color: var(--priamryClr);
    padding: 16px;
    font-size: 16px
}

.txta37Area:focus {
    outline: none
}

.txta37Area::-moz-placeholder {
    color: var(--content-tertiary)
}

.txta37Area::placeholder {
    color: var(--content-tertiary)
}

.txta37Normal {
    border: 2px solid var(--border-primary)
}

.txta37Error {
    border: 2px solid var(--border-negative)
}

.txta37ErrorMessage {
    margin-top: 16px
}

.txtinput88label {
    font-size: 13px;
    letter-spacing: .25px;
    text-align: left
}

.txtinput88parent {
    display: flex;
    border-bottom: 1px solid var(--border-primary);
    align-items: center;
    padding: 10px 0 5px;
    caret-color: var(--content-accent)
}

.removeunderline {
    border-bottom: none
}

.txtinput88parent:focus-within {
    border-bottom: 2px solid var(--border-accent)
}

.removeunderline:focus-within {
    border-bottom: none
}

.txtinput88input {
    border: none;
    font-size: 16px;
    flex-grow: 1;
    outline: 0
}

.txtinput88input::-moz-placeholder {
    color: var(--content-secondary);
    opacity: 1
}

.txtinput88input::placeholder {
    color: var(--content-secondary);
    opacity: 1
}

.txtinput88input:-ms-input-placeholder {
    color: var(--content-secondary)
}

.txtinput88input::-ms-input-placeholder {
    color: var(--content-secondary)
}

.txtinput88input:-webkit-autofill,.txtinput88input:-webkit-autofill:active,.txtinput88input:-webkit-autofill:focus,.txtinput88input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px var(--dangerouslySetPrimaryBg) inset!important;
    background-color: var(--dangerouslySetPrimaryBg)!important;
    -webkit-text-fill-color: var(--content-primary)
}

.txtinput88input:focus {
    border: none;
    outline: 0
}

.errorText {
    text-align: left
}

.pad0 {
    padding: 0
}

.infoText {
    font-size: 14px;
    margin-top: 3px;
    text-align: left
}

.removeParentDivUnderline {
    border-bottom: none!important
}

.txt88Width {
    width: 100%
}

.txt88InputMUI {
    border-bottom: 1px solid var(--content-secondary)!important
}

.txt88Bar {
    position: relative;
    display: block;
    width: 100%
}

.txt88Bar:after,.txt88Bar:before {
    content: "";
    height: 2px;
    width: 0;
    bottom: 0;
    position: absolute;
    background: var(--background-accent);
    transition: all .2s ease
}

.txt88BarError:after,.txt88BarError:before {
    background: var(--background-negative)
}

.txt88Bar:before {
    left: 50%
}

.txt88Bar:after {
    right: 50%
}

.txt88Mgroup {
    position: relative
}

.txt88MErrorText {
    font-size: 14px;
    margin-top: 3px;
    text-align: left
}

@media (max-width: 800px) {
    .txtinput88input {
        margin-top:2px;
        padding: 1px
    }

    .txtinput88input::-webkit-input-placeholder,.txtinput88input::placeholder {
        opacity: .2;
        color: var(--content-secondary)
    }

    .errorText {
        font-size: 12px;
        margin-top: 0
    }

    .errorText,.infoText,.pad0 {
        padding: 5px 0
    }

    .infoText {
        margin-top: 0
    }

    input {
        font-size: 18px;
        display: block;
        width: 100%;
        border: none;
        -webkit-text-fill-color: var(--content-primary);
        border-bottom: 1px solid var(--content-secondary);
        background: var(--dangerouslySetPrimaryBg);
        color: var(--content-primary)
    }

    input:focus {
        outline: none
    }

    input:-webkit-autofill,select:-webkit-autofill,textarea:-webkit-autofill {
        background-color: var(--dangerouslySetPrimaryBg)!important
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px var(--dangerouslySetPrimaryBg) inset
    }

    input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0
    }

    label {
        color: #999;
        font-size: 18px;
        font-weight: 400;
        position: absolute;
        pointer-events: none;
        left: 2px;
        top: 10px;
        transition: all .2s ease
    }

    input:focus~label,input:valid~label {
        top: -15px;
        font-size: 14px;
        color: var(--content-accent)
    }

    input:focus~.txt88Bar:after,input:focus~.txt88Bar:before {
        width: 50%
    }

    input:-webkit-autofill~label {
        top: -15px;
        font-size: 14px;
        color: var(--content-accent)
    }

    input:focus~.highlight {
        animation: inputHighlighter .3s ease
    }

    @keyframes inputHighlighter {
        0% {
            background: var(--background-accent)
        }

        to {
            width: 100;
            background: transparent
        }
    }
}

.sw348reactSwitchDivision {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--zindex900);
    margin: 0 auto
}

.sw348reactSwitchCheckbox {
    height: 0;
    width: 0;
    visibility: hidden
}

.sw348reactSwitchLabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.5rem;
    width: 2.5rem;
    position: relative;
    transition: background-color .3s
}

.sw348reactSwitchButton {
    height: 1.25rem;
    width: 1.25rem;
    filter: "drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15))"
}

.sw348reactSwitchLabel .sw348reactSwitchButton {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: all .3s
}

.sw348DisabledSwitch {
    background-color: var(--content-inverse-secondary)
}

.tc341ToggleWrapper {
    min-width: 88px;
    max-width: -moz-fit-content;
    max-width: fit-content;
    height: 32px;
    border-radius: 30px;
    justify-content: space-evenly;
    overflow: hidden
}

.tc341Divider {
    height: 100%;
    width: 1px;
    z-index: var(--zindex300)
}

.tc341ChoiceClass {
    height: 100%;
    padding-inline:7px}

#ct-container {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 2000;
    flex-direction: column;
    pointer-events: none
}

#ct-container,.ct-row {
    display: flex;
    justify-content: space-between
}

.ct-group {
    flex: 1 1;
    margin: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.ct-group:first-child {
    align-items: flex-start
}

.ct-group:last-child {
    align-items: flex-end
}

.ct-flex-bottom {
    justify-content: flex-end
}

.ct-toast {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 20px;
    border-radius: 4px;
    margin: 0;
    opacity: 1;
    transition: all .3s ease-in-out;
    min-height: 45px;
    pointer-events: all
}

.ct-toast:focus {
    outline: none
}

.ct-toast svg {
    min-width: 18px
}

.ct-cursor-pointer {
    cursor: pointer
}

.ct-icon-loading {
    display: inline-block;
    width: 20px;
    height: 20px
}

.ct-icon-loading:after {
    content: " ";
    display: block;
    width: 14px;
    height: 14px;
    margin: 1px;
    border-radius: 50%;
    border: 2px solid var(--content-accent-secondary);
    border-color: var(--content-accent-secondary) transparent var(--content-accent-secondary) transparent;
    animation: ct-icon-loading 1.2s linear infinite
}

@keyframes ct-icon-loading {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.ct-text-group {
    margin: 0 15px
}

.ct-text-group-heading {
    margin-left: 25px
}

.ct-heading {
    font-size: 16px;
    margin: 0 0 4px;
    font-weight: 500
}

.ct-text {
    font-size: 14px;
    margin-top: 2px;
    line-height: 20px
}

@media (max-width: 768px) {
    .ct-row {
        justify-content:flex-start;
        flex-direction: column;
        margin: 7px 0
    }

    .ct-group {
        flex: none;
        margin: 0
    }

    .ct-toast {
        margin: 8px 15px;
        width: auto
    }
}

.ct-close-icon {
    font-size: 20px;
    cursor: pointer
}

.ct-type-icon {
    margin-top: 3px
}

.sb10Toastify {
    transition: all .2s ease;
    width: 100%;
    text-align: left;
    position: fixed;
    z-index: var(--zindex900);
    left: 0;
    height: 0;
    font-size: 14px;
    -webkit-font-smoothing: auto;
    letter-spacing: .1px;
    line-height: 17px;
    overflow: hidden
}

.sb10ToastifyShow {
    padding: 10px 12px;
    height: auto;
    display: inline-table
}

.sb10ToastifyCloseIcn {
    min-height: 22px;
    min-width: 22px;
    margin-left: 5px;
    position: relative;
    top: 1px
}

.sb10ToastifyPositionTop {
    top: 0
}

.sb10ToastifyPositionBottom {
    bottom: 0
}

.group {
    position: relative
}

.inf11Input input {
    font-size: 18px;
    padding: 10px 10px 10px 2px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--content-secondary);
    box-shadow: none;
    background: var(--dangerouslySetPrimaryBg);
    color: var(--content-primary)
}

.inf11Input input:focus {
    outline: none
}

.inf11Input input:-webkit-autofill,select:-webkit-autofill,textarea:-webkit-autofill {
    background-color: var(--dangerouslySetPrimaryBg)!important;
    color: var(--content-primary)
}

.inf11Input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--dangerouslySetPrimaryBg) inset;
    -webkit-text-fill-color: var(--content-primary)
}

.inf11Input input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

label {
    color: var(--content-secondary);
    font-size: 18px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 2px;
    top: 10px;
    transition: all .2s ease
}

.inf11Input input:focus~label,input:valid~label {
    top: -15px;
    font-size: 14px;
    color: var(--content-accent)
}

.labelError {
    color: var(--content-negative)!important
}

.bar {
    position: relative;
    display: block;
    width: 100%
}

.bar:after,.bar:before {
    content: "";
    height: 2px;
    width: 0;
    bottom: 0;
    position: absolute;
    background: var(--background-accent);
    transition: all .2s ease
}

.barError:after,.barError:before {
    background: var(--background-negative)
}

.bar:before {
    left: 50%
}

.bar:after {
    right: 50%
}

.inf11Input input:focus~.bar:before,input:focus~.bar:after {
    width: 50%
}

.highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}

.inf11Input input:focus~.highlight {
    animation: inputHighlighter .3s ease
}

@keyframes inputHighlighter {
    0% {
        background: var(--background-accent)
    }

    to {
        width: 100;
        background: transparent
    }
}

.errorText {
    color: var(--content-negative)
}

.errorText,.noErrorText {
    font-size: 14px;
    margin-top: 3px
}

.np15Icon {
    border-radius: 3px;
    max-width: 100%;
    position: relative;
    background-color: var(--background-accent-subtle)!important;
    color: var(--content-accent);
    padding: 4px;
    text-align: center
}

.np15Icon:active {
    background-color: var(--background-tertiary)!important
}

.np15Root {
    border-radius: 3px;
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap
}

.np15Input:focus {
    outline: none
}

.np15Input {
    width: 60px;
    height: 32px;
    font-size: 20px!important;
    font-weight: 500;
    letter-spacing: .33px;
    text-align: center
}

.np15InputErr {
    color: var(--content-negative)!important;
    -webkit-box-shadow: 0 0 0 1000px var(--background-negative-subtle) inset
}

.np15InputWarning {
    color: var(--content-warning)!important;
    -webkit-box-shadow: 0 0 0 1000px var(--background-warning-subtle) inset
}

#numPicker #txtinput88 {
    width: 72px
}

.np15InputDiv {
    display: flex;
    align-items: center;
    caret-color: var(--content-accent)
}

.addPaddingTop7 {
    padding-top: 7px
}

.ib31IconDefault {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: 50%;
    padding: 6px
}

.ib31IconSelected {
    border-style: solid;
    border-width: 2px;
    padding: 4px
}

.ib31IconDefault:hover {
    background-color: var(--background-tertiary)
}

.iconLoader {
    border: 2px solid var(--border-neutral);
    border-right: 2px solid transparent;
    margin: 6px
}

:where([data-sonner-toaster]) {
    --border-radius: 8px;
    --css-inherit: inherit;
    position: fixed;
    width: var(--width);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    outline: none;
    z-index: 999999
}

:where([data-toaster-clear-all]) {
    position: fixed;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 20px;
    font-size: 14px;
    padding: 0 6px;
    margin: 0;
    z-index: 999999
}

:where([data-sonner-toast]) {
    --y: translateY(100%);
    --lift-amount: calc(var(--lift) * var(--gap));
    z-index: var(--z-index);
    position: absolute;
    opacity: 0;
    transform: var(--y);
    filter: blur(0);
    touch-action: none;
    transition: all .5s ease-in-out;
    box-sizing: border-box;
    outline: none;
    overflow-wrap: anywhere
}

:where([data-sonner-toast])>* {
    transition: opacity .4s
}

:where([data-sonner-toaster][data-x-position=right]) {
    right: max(var(--offset),env(safe-area-inset-right))
}

:where([data-toaster-clear-all][data-x-position=right]) {
    right: calc(var(--width) - 24px)
}

:where([data-sonner-toaster][data-x-position=left]) {
    left: max(var(--offset),env(safe-area-inset-left))
}

:where([data-sonner-toaster][data-x-position=center]) {
    left: 50%;
    transform: translateX(-50%)
}

:where([data-sonner-toaster][data-y-position=top]) {
    top: max(var(--offset),env(safe-area-inset-top))
}

:where([data-toaster-clear-all][data-y-position=top]) {
    top: calc(var(--offset) - 16px)
}

:where([data-sonner-toaster][data-y-position=bottom]) {
    bottom: max(var(--offset),env(safe-area-inset-bottom))
}

:where([data-sonner-toast][data-styled=true]) {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px #0000001a;
    width: var(--width);
    display: flex;
    align-items: center;
    gap: 16px
}

:where([data-sonner-toast][data-y-position=top]) {
    --y: translateY(-100%);
    --lift: 1;
    --lift-amount: calc(1 * var(--gap));
    top: 0
}

:where([data-sonner-toast][data-y-position=bottom]) {
    bottom: 0;
    --y: translateY(100%);
    --lift: -1;
    --lift-amount: calc(var(--lift) * var(--gap))
}

:where([data-sonner-toast][data-mounted=true]) {
    --y: translateY(0);
    opacity: 1
}

:where([data-sonner-toast][data-visible=false]) {
    opacity: 0;
    pointer-events: none
}

:where([data-toaster-clear-all]):hover {
    color: var(--content-primary);
    background: var(--background-primary)
}

:where([data-sonner-toast]) :where([data-close-button]) {
    position: absolute;
    left: unset;
    right: 0;
    top: 0;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transform: translate(-3px,3px);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1
}

:where([data-sonner-toast][data-expanded=false][data-front=false]) {
    --scale: var(--toasts-before) * 0.05 + 1;
    --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
    height: var(--front-toast-height)
}

:where([data-sonner-toast][data-mounted=true][data-expanded=true]) {
    --y: translateY(calc(var(--lift) * var(--offset)));
    height: var(--initial-height)
}

:where([data-sonner-toast]) :where([data-icon]) {
    display: flex;
    height: 18px;
    width: 18px;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    margin-left: -3px
}

:where([data-sonner-toast]) :where([data-content]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 12px
}

:where([data-sonner-toast]) :where([data-icon])>* {
    flex-shrink: 0
}

:where([data-sonner-toast]):hover :where([data-close-button]):hover {
    background: var(--background-secondary);
    border-color: var(--content-tertiary)
}

:where([data-sonner-toast]):after {
    content: "";
    position: absolute;
    left: 0;
    height: calc(var(--gap) + 1px);
    bottom: 100%;
    width: 100%
}

:where([data-sonner-toast][data-expanded=false][data-front=false][data-styled=true])>* {
    opacity: 0
}

:where([data-sonner-toast][data-removed=true][data-front=false]):before {
    height: calc(var(--initial-height) + 20%)
}

@media (max-width: 600px) {
    [data-sonner-toaster] {
        --mobile-offset:16px;
        position: fixed;
        right: var(--mobile-offset);
        left: var(--mobile-offset);
        width: 100%
    }

    [data-sonner-toaster] [data-sonner-toast] {
        left: 0;
        right: 0;
        width: calc(100% - var(--mobile-offset) * 2)
    }

    [data-sonner-toaster][data-x-position=left] {
        left: var(--mobile-offset)
    }

    [data-sonner-toaster][data-y-position=bottom] {
        bottom: 20px
    }

    [data-sonner-toaster][data-y-position=top] {
        top: 20px
    }

    [data-sonner-toaster][data-x-position=center] {
        left: var(--mobile-offset);
        right: var(--mobile-offset);
        transform: none
    }
}

[data-sonner-toast][data-type=success] {
    border-left: 3px solid var(--border-accent)
}

[data-sonner-toast][data-type=error] {
    border-left: 3px solid var(--border-negative)
}

[data-sonner-toast][data-type=warning] {
    border-left: 3px solid var(--content-warning)
}

[data-sonner-toast][data-type=info] {
    border-left: 3px solid var(--content-accent-secondary)
}

.success {
    color: var(--content-accent)
}

.info {
    color: var(--content-accent-secondary)
}

.warning {
    color: var(--content-warning)
}

.error {
    color: var(--content-negative)
}

.radioCo11BoxReverse {
    justify-content: space-between!important
}

.cbg29ParentDiv {
    justify-content: flex-end!important
}

.carousel14Slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.carousel14List {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.carousel14List:focus {
    outline: none
}

.carousel14List.dragging {
    cursor: pointer;
    cursor: hand
}

.carousel14Slider .carousel14List,.carousel14Slider .carousel14Track {
    transform: translateZ(0)
}

.carousel14Track {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin-left: auto;
    margin-right: auto
}

.carousel14Track:after,.carousel14Track:before {
    display: table;
    content: ""
}

.carousel14Track:after {
    clear: both
}

.carousel14Loading .carousel14Track {
    visibility: hidden
}

.carousel14Slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .carousel14Slide {
    float: right
}

.carousel14Slide img {
    display: block
}

.carousel14Slide.carousel14Loading img {
    display: none
}

.carousel14Slide.dragging img {
    pointer-events: none
}

.carousel14Initialized .carousel14Slide {
    display: block
}

.carousel14Loading .carousel14Slide {
    visibility: hidden
}

.carousel14Vertical .carousel14Slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.carousel14Arrow.carousel14Hidden {
    display: none
}

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

.carousel14Next,.carousel14Prev {
    position: absolute;
    cursor: pointer;
    top: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    transform: translateY(-50%);
    opacity: .6;
    background: var(--content-secondary);
    z-index: 1;
    border-radius: 50%;
    border: 1px transparent
}

.carousel14Next:focus,.carousel14Next:hover,.carousel14Prev:focus,.carousel14Prev:hover {
    outline: none
}

.carousel14Next:focus:before,.carousel14Next:hover:before,.carousel14Prev:focus:before,.carousel14Prev:hover:before {
    opacity: 1
}

.carousel14Next.carousel14Disabled,.carousel14Prev.carousel14Disabled {
    display: none
}

.carousel14Next:before,.carousel14Prev:before {
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: var(--content-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.carousel14Prev {
    left: -16px
}

.carousel14Next {
    right: -16px
}

.carousel-dotted.carousel14Slider {
    margin-bottom: 30px
}

.carousel14Dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.carousel14Dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer
}

.carousel14Dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent
}

.carousel14Dots li button:focus,.carousel14Dots li button:hover {
    outline: none
}

.carousel14Dots li button:focus:before,.carousel14Dots li button:hover:before {
    opacity: 1
}

.carousel14Dots li button:before {
    font-family: slick;
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "•";
    text-align: center;
    opacity: .25;
    color: var(--content-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.carousel14Dots li.carousel14Active button:before {
    opacity: .75;
    color: var(--content-primary)
}

@media screen and (max-width: 768px) {
    .carousel14List {
        max-width:620px
    }
}

.carousel,.carousel__main {
    overflow: inherit;
    height: inherit
}

.carousel__dot {
    background: var(--content-secondary)!important;
    transition: width .3s ease-in,background .2s ease-out
}

.carousel__dot--active {
    width: 12px!important;
    background: var(--background-accent)!important
}

.carousel-item-hidden {
    display: none
}

.common171CarouselTitle {
    bottom: 57px;
    font-size: 20px;
    font-weight: 500
}

.common171CarouselDesc,.common171CarouselTitle {
    position: absolute;
    width: 100vw;
    margin: 0 auto;
    left: 0;
    right: 0
}

.common171CarouselDesc {
    bottom: 33px;
    font-size: 13px;
    font-weight: 400
}

.common171CarouselImg {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 140px
}

.mn12Box {
    padding: 14px;
    width: 220px
}

.mn12YearRow {
    justify-content: space-between
}

.mn12Month {
    text-align: center;
    min-width: 33%
}

.mn12MonthText {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    justify-content: center;
    margin: 3px auto
}

.mn12MonthBackHover:hover {
    background-color: var(--color-bg-calendar-hover)
}

.mn12MonthBox {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 12px
}

.mn12YearIcon {
    font-size: 22px!important
}

.mn12Box {
    --color-bg-calendar-hover: var(--bg-transparent-hover)
}

.cc12Box {
    width: 300px;
    padding: 15px;
    cursor: auto
}

.cc12WeekNameBox,.cc12YearBox {
    justify-content: space-between
}

.cc12WeekNameBox {
    margin-top: 14px;
    text-align: center
}

.cc12DateBlock,.cc12WeekName {
    flex-basis: 14.285%
}

.cc12DateSelected {
    background: var(--background-accent)
}

.cc12Date {
    width: 32px;
    height: 32px;
    justify-content: center;
    margin: 0 auto
}

.cc12DateNotSelectedHover:hover {
    background-color: var(--color-bg-calendar-hover)
}

.cc12DateRow {
    justify-content: space-between;
    margin-top: 8px
}

.cc12Year {
    width: 100px;
    text-align: center
}

.cc12DisableDate {
    opacity: .2
}

.cc12Box {
    --color-bg-calendar-hover: var(--bg-transparent-hover)
}

.bar21animation {
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: move 2.5s linear;
    animation-fill-mode: forwards
}

@keyframes move {
    to {
        stroke-dashoffset: 0
    }
}

.lg43Opacity3 {
    opacity: .3
}

.lg430LastPointBlinking {
    opacity: 1;
    animation: blinkingPoint 2s infinite
}

@keyframes blinkingPoint {
    0% {
        opacity: 1
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

.cc41Opacity3 {
    opacity: .3
}

.cc41Candle {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    animation: candleanimation 3s linear
}

@keyframes candleanimation {
    to {
        stroke-dashoffset: 0;
        stroke-dasharray: 100%
    }
}

.sdvb1MainDiv {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--zindex600)
}

.sdvb1Visible {
    pointer-events: auto
}

.sdvb1Visible.sdvb1MainDiv:after {
    opacity: .5;
    pointer-events: auto
}

.sdvb1MainDiv:after {
    content: "";
    display: block;
    left: 0;
    width: 100%;
    background: var(--content-secondary);
    opacity: 0;
    will-change: opacity;
    pointer-events: none;
    transition: opacity 225ms cubic-bezier(.4,0,.2,1) 0s
}

.sdvb1AppNav,.sdvb1MainDiv:after {
    position: absolute;
    top: 0;
    height: 100%
}

.sdvb1AppNav {
    right: 0;
    width: 300px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    will-change: transform;
    transition: transform .15s cubic-bezier(0,1,.5,1);
    z-index: calc(var(--zindex600) + 10);
    pointer-events: auto;
    color: var(--content-primary);
    max-width: 400px;
    transform: translateX(-100%);
    transform: translateX(100%)
}

.sdvb1Visible .sdvb1AppNav {
    transform: translateX(0)
}

.sdvb1NavContent {
    width: 100%;
    height: 100%
}

.sdvb1TopHead {
    padding: 25px 20px;
    background: var(--background-accent-subtle)
}

.sdvb1SimpleLoginDiv {
    display: flex;
    flex-direction: column;
    margin-left: 10px
}

.sdvb1SimpleTxt {
    color: var(--content-primary);
    padding-bottom: 6px
}

.sdvb1SubHeadingDiv {
    padding: 10px 0
}

.sdvb1SubHeadTxt {
    color: var(--content-primary)
}

.sdvb1SubHeadBottom {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 18px;
    margin-bottom: 18px
}

.sdvb1DividerDiv {
    height: 2px
}

.rsl1Wrap {
    position: absolute;
    right: 0;
    top: 13px
}

.rsl1Search {
    margin-right: 10px
}

.rsl1IconClass {
    position: relative;
    top: -1px
}

.rsl55Wrap {
    position: absolute;
    right: 0;
    top: 13px
}

.h12Wrapper {
    width: 100%;
    height: 50px;
    position: fixed;
    overflow: visible;
    top: 0;
    left: 0;
    z-index: var(--zindex500);
    padding: 0 15px 0 0
}

.h12BotBorder {
    border-bottom: 1px solid var(--border-primary)
}

.h12Logo {
    padding-top: 10px;
    padding-left: 10px
}

.h12Back {
    margin-right: 12px
}

.h12BackRipple {
    border-radius: 50%;
    height: 48px;
    width: 48px
}

.h12BackIcon {
    position: relative;
    top: -1px
}

.rip100ParentWrapper {
    position: relative;
    overflow: hidden
}

.rip100StaticStyle {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    pointer-events: none
}

.box {
    display: flex
}

.box .inner {
    width: 400px;
    height: 200px;
    font-family: sans-serif;
    white-space: nowrap;
    overflow: hidden
}

.box .inner:first-child {
    background-color: #cd5c5c;
    color: darkred;
    transform-origin: right;
    transform: perspective(100px) rotateY(-15deg)
}

.box .inner:last-child {
    background-color: #f08080;
    color: #faebd7;
    transform-origin: left;
    transform: perspective(100px) rotateY(15deg)
}

.box .inner span {
    position: absolute;
    animation: marquee 5s linear infinite
}

.box .inner:first-child span {
    animation-delay: 2.5s;
    left: -100%
}

#ymDivBar {
    display: none!important
}

@keyframes marquee {
    0% {
        left: 100%
    }

    to {
        left: -100%
    }
}

.changeHash {
    display: none
}

.lne123Loader {
    z-index: 10001;
    height: 4px
}

.lne123Loader,.ph34Wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

.ph34Wrapper {
    height: 50px;
    overflow: hidden;
    z-index: var(--zindex500);
    justify-content: space-between;
    padding: 5px 15px 0 5px
}

.ph34CenterDiv {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.ph34ImgSpace {
    margin-left: 13px
}

.ph34WrapBorder {
    border-bottom: 1px solid var(--border-primary)
}

.ph34Title {
    margin: 0 0 0 10px
}

.ph34IconClass {
    position: relative;
    top: -1px
}

.ph34BackIcon {
    top: -1px
}

.ph34ShareIcon {
    position: relative;
    top: -1px
}

.ph34InfoIcon {
    position: relative;
    top: 4px
}

.ph34BackRipple {
    border-radius: 50%;
    height: 48px;
    width: 48px;
    top: -1px
}

.ph34AcademyLogo mask {
    mask-type: alpha
}

.smh36headerParentDiv {
    width: 100%;
    height: 64px;
    overflow: visible;
    top: 0;
    left: 0;
    z-index: var(--zindex500);
    padding: 16px 15px 0
}

.smh36SearchParent {
    border: 2px solid var(--border-primary);
    height: 100%;
    border-radius: 32px;
    transition: all .2s ease-in-out;
    transform: perspective(1px) scale(1)
}

.smh36Search {
    width: 100%;
    padding: 10px 0 10px 10px
}

.smh36GrowwIcon {
    padding-top: 5px;
    /* min-width: 30px; */
}

.smh36SearchParent .is31IconWrapper {
    display: flex
}

.smh36SearchParent svg {
    flex-shrink: 0;
    margin-top: -1px
}

.smh36Title {
    width: 100%
}

.smh36TitleText {
    padding-left: 5px
}

.smh36ProfileIconDiv {
    width: 50px;
    height: 48px;
    display: flex
}

.smh36UserImg {
    border-radius: 50%;
    margin: 10px 10px 10px 0
}

.sp14PopupHeading {
    padding-bottom: 10px;
    margin: 15px 15px 5px;
    letter-spacing: .3px;
    border-bottom: 1px solid var(--border-primary)
}

.sp14IconsParentDiv {
    flex-wrap: wrap
}

.sp14ShareIconDiv {
    padding: 15px;
    margin: initial!important;
    flex-direction: column
}

.sp14Image {
    float: left
}

.sp14Info {
    color: var(--content-accent-secondary);
    margin-right: 5px
}

.sp14iconName {
    text-transform: capitalize;
    margin-top: 2px
}

.bn11Box {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: space-between;
    height: 69px;
    background: var(--background-secondary);
    z-index: var(--zindex300)
}

.bn11FlexChild {
    flex: 1 1;
    text-align: center;
    height: 69px;
    padding: 12px 0;
    transition: all .2s ease-in-out;
    transform: perspective(1px) scale(1)
}

.bn11Show {
    display: inline
}

.bn11Hidden {
    display: none
}