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
}

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: transparent
}

.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%
}

.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(--white)
}

html[data-theme=dark] .backgroundPrimary {
    background-color: var(--black)
}

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

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

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

.backgroundSurfacePrimary {
    background-color: var(--white)
}

.backgroundSurfaceSecondary,html[data-theme=dark] .backgroundSurfacePrimary {
    background-color: var(--gray50)
}

html[data-theme=dark] .backgroundSurfaceSecondary {
    background-color: var(--gray100)
}

.backgroundInversePrimary {
    background-color: var(--gray900)
}

html[data-theme=dark] .backgroundInversePrimary {
    background-color: var(--white)
}

.backgroundOverlayPrimary {
    background-color: var(--overlay70)
}

.backgroundOverlaySecondary {
    background-color: var(--overlay30)
}

.backgroundAlwaysDark {
    background-color: var(--black)
}

.backgroundAlwaysLight {
    background-color: var(--white)
}

.backgroundAccent,.backgroundPositive {
    background-color: var(--green500)
}

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

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

.backgroundAccentSubtle,.backgroundPositiveSubtle {
    background-color: var(--green100)
}

.backgroundNegativeSubtle {
    background-color: var(--red100)
}

.backgroundWarningSubtle {
    background-color: var(--yellow100)
}

.backgroundAccentSecondary {
    background-color: var(--purple500)
}

.backgroundAccentSecondarySubtle {
    background-color: var(--purple100)
}

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

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

.borderAccent,.borderPositive {
    border: 1px solid var(--green500)
}

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

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

html[data-theme=dark] .borderNeutral {
    border: 1px solid var(--white)
}

.contentPrimary {
    color: var(--gray900)
}

html[data-theme=dark] .contentPrimary {
    color: var(--white)
}

.contentSecondary {
    color: var(--gray700)
}

.contentTertiary {
    color: var(--gray500)
}

.contentInversePrimary {
    color: var(--white)
}

html[data-theme=dark] .contentInversePrimary {
    color: var(--black)
}

.contentInverseSecondary {
    color: var(--gray300)
}

html[data-theme=dark] .contentInverseSecondary {
    color: var(--gray400)
}

.contentAccent {
    color: var(--green500)
}

.contentNegative {
    color: var(--red500)
}

.contentWarning {
    color: var(--yellow500)
}

.contentPositive {
    color: var(--green500)
}

.contentDisabled {
    color: var(--gray400)
}

html[data-theme=dark] .contentDisabled {
    color: var(--gray500)
}

.contentOnColour {
    color: var(--white)
}

.contentOnColourInverse {
    color: var(--gray900)
}

html[data-theme=dark] .contentOnColourInverse {
    color: var(--black)
}

.contentAccentSecondary {
    color: var(--purple500)
}

.contentAccentSecondarySubtle {
    color: var(--purple300)
}

.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-hover)
}

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;
    --bg-transparent-hover: rgba(68,71,91,.059);
    --bg-accent-hover: #04ad83;
    --bg-accent-subtle-hover: #ddf5ee;
    --bg-transparent-accent-hover: rgba(0,179,134,.059);
    --bg-positive-hover: #04ad83;
    --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: #04ad83;
    --bg-accent-subtle-selected: #ddf5ee;
    --bg-transparent-accent-selected: rgba(0,179,134,.059);
    --bg-positive-selected: #04ad83;
    --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,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/billion_groww_desktop/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/billion_groww_desktop/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/billion_groww_desktop/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/billion_groww_desktop/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.875rem;
    --font-size-16: 1rem;
    --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(--white);
    border-right-color: transparent;
    border-bottom-color: var(--white);
    border-left-color: var(--white)
}

.loader14Circular,.loader14CircularBolt>div:first-child {
    top: 0;
    left: 0;
    border-color: var(--dangerouslySetPrimaryBg);
    border-width: 2px;
    border: 2px solid var(--green500);
    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;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNC45IiBoZWlnaHQ9IjM1IiB2aWV3Qm94PSItNTE0LjkgOTQ0LjIgMTQuOSAzNSI+PHBhdGggZmlsbD0iIzJGQzM5NCIgZD0iTS01MDAuMSA5NTloLTQuNmwyLjEtMTQuOC0xMi40IDIwLjJoNC42bC0yLjEgMTQuOCAxMi40LTIwLjJ6Ii8+PC9zdmc+);
    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(--red500);
    border-right-color: transparent;
    border-bottom-color: var(--red500);
    border-left-color: var(--red500)
}

.loader14CircularBolt.contentNegative>div:last-child {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNC45IiBoZWlnaHQ9IjM1IiB2aWV3Qm94PSItNTE0LjkgOTQ0LjIgMTQuOSAzNSI+PHBhdGggZmlsbD0iI0ZGNjMzRiIgZD0iTS01MDAuMSA5NTloLTQuNmwyLjEtMTQuOC0xMi40IDIwLjJoNC42bC0yLjEgMTQuOCAxMi40LTIwLjJ6Ii8+PC9zdmc+)
}

.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(--red500);
    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(--green500);
    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(--green500)
}

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

.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;
    background-color: var(--green100)
}

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

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

.loader14Indeterminate:after {
    content: "";
    position: absolute;
    height: 100%;
    background-color: var(--green100);
    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(--purple500);
    outline-offset: 2px
}

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

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

.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(--gray150)
}

.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(--white);
    border-top: 2px solid transparent
}

.mint-btn-loader-item-border-gray {
    border: 2px solid var(--gray900);
    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(--gray50)
}

.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: 0 0;
    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(--gray700);
    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(--gray700)
}

@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;
    color: var(--gray700)
}

.date101SelectedLabel {
    margin-top: 25px;
    font-size: 19px;
    text-align: center;
    color: var(--gray900)
}

.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(--gray900);
    cursor: pointer;
    transition: all .1s ease-in-out
}

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

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

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

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

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

#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;
    color: var(--gray900);
    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(--gray150);
    border-radius: 5px;
    width: 100%;
    padding: 16px 0;
    color: var(--gray900)
}

.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;
    color: var(--gray900);
    font-size: 13px;
    opacity: 1;
    z-index: var(--zindex900);
    border: 1px solid var(--gray150)
}

.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(--gray150);
    height: 10px
}

.pb65CircleMain {
    stroke-linecap: round;
    stroke: var(--gray150);
    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(--green500);
    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;
    border: 1px solid var(--gray150);
    z-index: var(--zindex400)
}

.se55DropdownPara {
    margin: 0;
    padding: 9px 16px;
    color: var(--gray900)
}

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

.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;
    border: 1px solid var(--gray150);
    cursor: pointer;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between
}

.slider24Wrapper {
    width: 100%
}

.tb10Table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gray150)
}

.tb10ThText {
    color: var(--gray700);
    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(--gray150)
}

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

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

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

.tb10HideIcon {
    visibility: hidden
}

.tb10SelectHeaderCell {
    font-weight: 500;
    color: var(--gray900);
    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;
    color: var(--gray900)
}

.tabs8TextActive {
    color: var(--green500)
}

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

@media(max-width: 1025px) {
    .tabs8Container {
        max-height:25px;
        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
    }

    .tabs8TextActive {
        color: var(--green500)
    }

    .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
}

.tg11Warning {
    background-color: var(--yellow100);
    color: var(--gray900)
}

.tg11Error {
    background-color: var(--red100);
    color: var(--gray900)
}

.tg11Info {
    background-color: var(--green100);
    color: var(--gray900)
}

.txta37Label {
    color: var(--gray500);
    margin-bottom: 16px
}

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

.txta37Area:focus {
    outline: none
}

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

.txta37Area::placeholder {
    color: var(--gray500)
}

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

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

.txta37ErrorMessage {
    color: var(--red500);
    margin-top: 16px
}

.txtinput88label {
    font-size: 13px;
    letter-spacing: .25px;
    color: var(--gray700);
    text-align: left
}

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

.removeunderline {
    border-bottom: none
}

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

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

.txtinput88input {
    border: none;
    font-size: 16px;
    flex-grow: 1;
    outline: 0;
    color: var(--gray900)
}

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

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

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

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

.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(--gray900)
}

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

.errorText {
    text-align: left
}

.pad0 {
    padding: 0
}

.infoText {
    color: var(--yellow500);
    font-size: 14px;
    margin-top: 3px;
    text-align: left
}

.removeParentDivUnderline {
    border-bottom: none!important
}

.txt88Width {
    width: 100%
}

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

.txt88MlabelError {
    color: var(--red500)!important
}

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

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

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

.txt88Bar:before {
    left: 50%
}

.txt88Bar:after {
    right: 50%
}

.txt88Mgroup {
    position: relative
}

.txt88MErrorText {
    color: var(--red500);
    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(--gray700)
    }

    .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(--gray900);
        border-bottom: 1px solid var(--gray700);
        background: var(--dangerouslySetPrimaryBg);
        color: var(--gray900)
    }

    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(--green500)
    }

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

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

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

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

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

.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(--gray300)
}

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

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

.tc341ActiveChoice {
    background-color: var(--green100)
}

.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;
    color: var(--gray900);
    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(--purple500);
    border-color: var(--purple500) transparent var(--purple500) 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;
    color: var(--white);
    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
}

.sb10ToastifySuccess {
    background-color: var(--green500)
}

.sb10ToastifyError {
    background-color: var(--red500)
}

.sb10ToastifyInfo {
    background-color: var(--gray900)
}

.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(--gray700);
    box-shadow: none;
    background: var(--dangerouslySetPrimaryBg);
    color: var(--gray900)
}

.inf11Input input:focus {
    outline: none
}

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

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

.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(--gray700);
    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(--green500)
}

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

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

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

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

.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(--green500)
    }

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

.errorText {
    color: var(--red500)
}

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

.noErrorText {
    color: var(--gray700)
}

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

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

.np15Root {
    border-radius: 3px;
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    background-color: var(--green100)!important;
    color: var(--green500);
    white-space: nowrap
}

.np15Input:focus {
    outline: none
}

.np15Input {
    background-color: var(--green100)!important;
    width: 60px;
    height: 32px;
    color: var(--green500)!important;
    font-size: 20px!important;
    font-weight: 500;
    letter-spacing: .33px;
    text-align: center
}

.np15InputErr {
    color: var(--red500)!important;
    -webkit-box-shadow: 0 0 0 1000px var(--red100) inset
}

.np15InputWarning {
    color: var(--yellow500)!important;
    -webkit-box-shadow: 0 0 0 1000px var(--yellow100) inset
}

#numPicker #txtinput88 {
    width: 72px
}

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

.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(--gray100)
}

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

.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(--gray700);
    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(--gray700);
    -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: 0 0
}

.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(--gray900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

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

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

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

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

.carousel__dot--active {
    width: 12px!important;
    background: var(--green500)!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;
    color: var(--gray900)
}

.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)
}

.mn12MonthTextSelected {
    background-color: var(--green500)
}

.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;
    color: var(--gray900);
    padding: 15px;
    cursor: auto
}

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

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

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

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

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

.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%
    }
}

.riskComplianceInfo_popupUi__h0_II {
    padding: 24px;
    height: 100%
}

.riskComplianceInfo_heading__n1Aue {
    margin-bottom: 24px
}

.riskComplianceInfo_listItemParent__WjqyF {
    padding-inline-start:16px}

.riskComplianceInfo_listItem__e8yU_ {
    margin-bottom: 24px
}

.riskComplianceInfo_footer__jQ9Om {
    bottom: 0
}

.riskCompliancePopup_popup__LHnZC {
    border-radius: 12px;
    height: 100%
}

.gsc23SearchDiv {
    min-height: 80px!important;
    margin-left: 8px
}

.gsc23SearchWidth {
    width: 456px;
    height: 44px
}

.gsc23SuggestionRow .truncate {
    flex: 1 1;
    margin-right: 24px
}

.gsc23SuggestionRow {
    opacity: .8;
    min-height: 44px
}

.gsc23IconCircle {
    background-color: var(--gray50);
    min-width: 32px;
    min-height: 32px;
    padding: 6px;
    margin-right: 18px;
    border: 1px solid var(--gray150)
}

.gsc23FeatureRow {
    padding: 13px 24px;
    max-height: 60px
}

.gsc23MoreResultsRow {
    padding: 13px 24px;
    max-height: 44px;
    height: 44px;
    border-top: 1px solid var(--gray150);
    border-radius: 0 0 8px 8px;
    position: sticky;
    top: 455px;
    z-index: var(--zindex10001)
}

.gsc23FeatureRow:hover,.gsc23MoreResultsRow:hover {
    background: var(--gray50)
}

.gsc23FeatureRow:hover .gsc23IconCircle {
    border: 1px solid var(--gray150)
}

.gsc23SuggestionContent {
    border-bottom: 1px solid var(--gray150);
    min-height: 60px
}

.gsc23SuggestionText {
    display: flex;
    flex-direction: column;
    flex-grow: 2
}

.gsc23SearchMask {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: var(--zindex10001);
    animation: fadein .1s ease
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

#globalSearch23-suggestionsContainer {
    max-height: 500px;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    top: 44px
}

.gsc23MoreResultsRow+#globalSearch23-suggestions {
    margin-top: -44px;
    padding-bottom: 40px
}

#globalSearch23-searchMainDivId {
    border: 1px solid var(--gray150)
}

.gsc23SearchDiv .se27SeSuggestion {
    padding: 0 24px;
    min-height: 60px
}

.nsfm67NoData {
    padding: 0 24px 16px;
    display: flex
}

.nsfm67Feedback {
    text-decoration: underline
}

.nsfm67NoDataWidth {
    max-width: 280px
}

.sf54FilterElement {
    min-width: 90px;
    max-height: 24px;
    border: 1px solid var(--gray150)
}

.sf54FilterElement.active {
    background: var(--green100)!important;
    color: var(--green500);
    border: 1px solid var(--green100)
}

.sf54FilterElement:hover {
    background: var(--gray100)
}

.sf54SearchFilterRow {
    letter-spacing: .2px;
    padding: 16px 12px;
    z-index: var(--zindex10001)
}

.sf54SearchFilterRow>div {
    min-width: 86px;
    max-height: 26px
}

.se27SeSearchMainDiv {
    height: 100%;
    min-height: 40px;
    border-radius: 8px;
    padding: 4px 16px
}

.inputWrapper,.se27SeIconWrapper {
    margin-right: 12px
}

.inputTextColor {
    color: var(--gray700)!important
}

.se27SeIcon {
    opacity: .8;
    overflow: hidden
}

.se27SeSearchMainDiv .txtinput88input {
    height: 29px;
    outline: none;
    width: 100%;
    color: var(--gray900);
    border: none;
    background: 0 0
}

.se27SeSearchMainDiv #txtinput88 {
    width: 100%
}

.se27SeSearchMainDiv .txtinput88input ::-moz-placeholder {
    color: var(--gray700)
}

.se27SeSearchMainDiv .txtinput88input ::placeholder {
    color: var(--gray700)
}

.se27SeSearchMainDiv .txtinput88input:-ms-input-placeholder {
    color: var(--gray700)
}

.se27SeSuggestionsContainer {
    height: auto;
    z-index: var(--zindex10001);
    top: 40px;
    left: 0!important;
    width: 100%!important;
    padding: 0;
    border: 1px solid var(--gray150);
    border-top: none;
    border-radius: 0 0 4px 4px
}

.se27SearchLoader {
    padding-top: 6px
}

#globalSearch23::-moz-placeholder {
    color: var(--gray700);
    -webkit-text-fill-color: var(--gray700)
}

#globalSearch23::placeholder {
    color: var(--gray700);
    -webkit-text-fill-color: var(--gray700)
}

.se27SeSearchRightMargin {
    margin-right: 10px
}

.se27SeSuggestion {
    padding: 13px;
    transition: .1s
}

.se27SeSuggestion:hover,.se27SeSuggestionHover {
    background: var(--gray50)
}

.se27SuggestionLabel {
    padding: 0 24px 8px
}

.se27FurtherLabel {
    padding: 24px 24px 8px
}

.fm11Box {
    width: 330px;
    margin: 28px auto 34px;
    max-height: 330px;
    overflow: auto
}

.fm11NameBox {
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: .5px solid var(--gray150);
    cursor: pointer
}

.fm11NameBox:hover {
    background: var(--gray150)
}

.fm11IconSelected {
    color: var(--green500)
}

.fm11EmptyContent {
    padding: 0 12px
}

.ml14 {
    margin-left: 14px
}

.mt16 {
    margin-top: 16px
}

.mb16 {
    margin-bottom: 16px
}

.fm11IconUnSelected {
    border: 1px solid var(--gray150);
    height: 14px;
    width: 14px
}

.fm11AlignBolt {
    justify-content: center;
    height: 250px
}

.fm11ErrorText {
    line-height: 28px
}

.fm11ErIcon {
    color: var(--red500)
}

.lh20 {
    line-height: 20px
}

.mt18 {
    margin-top: 18px
}

.mt8 {
    margin-top: 8px
}

.mt12 {
    margin-top: 12px
}

.mb25 {
    margin-bottom: 25px
}

.mt33 {
    margin-top: 33px
}

.fm11LB {
    width: 16px
}

.fm11Ls3 {
    letter-spacing: .3px
}

#notificationCard .notificationImage {
    width: 28.5px;
    height: 28.5px
}

#notificationCard .notificationTitle {
    color: var(--gray900);
    margin-left: 20px;
    margin-top: 8px
}

.rip100ParentWrapper {
    position: relative;
    overflow: hidden
}

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

.theme-button-container {
    width: 100%;
    height: 100%;
    pointer-events: none
}

.mainDiv {
    z-index: 1000;
    width: 100%;
    margin: 0;
    min-height: 79px
}

.searchDiv {
    min-height: 79px!important;
    position: relative
}

.profileIcon {
    padding-top: 0;
    color: var(--gray700);
    margin-right: 10px;
    width: 20px
}

.downArrow {
    color: var(--gray700);
    position: relative;
    top: 2px;
    max-width: 18px;
    max-height: 18px;
    overflow: hidden
}

.warningSign445 {
    position: relative;
    width: 10px;
    height: 10px
}

.dismiss {
    color: var(--gray700)
}

.dismissImg32 {
    margin-top: 1px;
    height: 13px;
    margin-right: 5px
}

.ntf33notificationsMainDiv {
    max-height: 442px
}

.ntf33emptyNotificationsDiv,.ntf33notificationsMainDiv {
    width: 330px;
    border: 1px solid var(--gray150);
    position: absolute;
    top: 15px;
    left: -282px;
    border-radius: 2px;
    z-index: 15001
}

.ntf33emptyNotificationsDiv {
    height: 200px
}

.notificationsDiv {
    padding: 0 10%
}

.ntf33emptyHeadNotifImg {
    width: 60%;
    height: 60%;
    margin-left: 18%;
    margin-bottom: 20px
}

.notificationStatus {
    width: 17px;
    height: 17px;
    top: -2px;
    left: -4px;
    position: absolute
}

.ntf33emptyNotifText {
    color: var(--gray900);
    margin-left: 60px
}

.ntf33notificationsMainDiv:before {
    margin-left: 293px
}

.ntf33emptyNotificationsDiv:before,.ntf33notificationsMainDiv:before {
    content: "";
    display: block;
    margin-top: -5px;
    box-shadow: -1px -1px 2px 0 var(--overlay30);
    transform: rotate(45deg);
    width: 0;
    height: 0;
    border-left: 12px solid var(--dangerouslySetPrimaryBg);
    border-right: 0 solid var(--dangerouslySetPrimaryBg);
    border-bottom: 12px solid var(--dangerouslySetPrimaryBg)
}

.ntf33emptyNotificationsDiv:before {
    margin-left: 294px
}

.notification {
    padding: 15px 20px 0
}

.notificationBox {
    padding-bottom: 10px
}

.notificationAction {
    color: var(--green500);
    padding: 10px;
    text-align: right
}

.ntf33viewAllNotifications {
    position: absolute;
    align-items: center;
    top: calc(100% - 38px);
    width: 100%;
    height: 38px;
    text-align: center;
    color: var(--purple500);
    border-top: 1px solid var(--gray150)
}

.ntf33viewAllNotificationsChild {
    padding: 9px 30px
}

.notificationsBox {
    position: relative;
    height: 100%;
    bottom: 40px;
    top: 0
}

.ntf33scrollingContents {
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 40px);
    max-height: 440px;
    margin-top: -7px;
    padding-bottom: 37px
}

.ntf33NotificationContent {
    color: var(--gray700);
    margin: 10px 10px 0 20px;
    white-space: pre-wrap
}

.ntf33scrollingContents .notificationTitle {
    color: var(--gray900);
    margin-left: 20px;
    margin-top: 8px;
    max-width: 155px
}

.notificationTime {
    opacity: .6;
    color: var(--gray700);
    position: absolute;
    right: 5px;
    top: 10px
}

.notificationHead {
    display: flex;
    position: relative
}

.notificationIcon {
    margin-top: 4px
}

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

    10% {
        transform: rotate(5deg)
    }

    20% {
        transform: rotate(-5deg)
    }

    30% {
        transform: rotate(4deg)
    }

    40% {
        transform: rotate(-4deg)
    }

    50% {
        transform: rotate(3deg)
    }

    60% {
        transform: rotate(-3deg)
    }

    70% {
        transform: rotate(2deg)
    }

    80% {
        transform: rotate(-2deg)
    }

    90% {
        transform: rotate(1deg)
    }

    to {
        transform: rotate(0deg)
    }
}

.fw500 {
    font-weight: 500
}

.hdQuickLinks {
    justify-content: space-evenly;
    height: 83px;
    max-width: 200px
}

.hdQuickLabel {
    -webkit-font-smoothing: auto;
    color: var(--gray900);
    margin: 0 13px;
    cursor: pointer
}

.hdQuickLabel:hover {
    color: var(--green500)!important
}

.hdGrowwLogoDiv {
    min-height: 83px;
    justify-content: left
}

.loggedin-nav {
    gap: 32px
}

.loggedin-nav-actions {
    gap: 16px
}

.loggedin-nav-actions-item {
    padding: 8px
}

.loggedin-nav-actions-item:hover {
    border-radius: 50%;
    background-color: var(--gray50)
}

.loggedin-nav-actions-item.notification-available {
    animation: bellshake .8s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
    transform-origin: top
}

.loggedin-nav-actions-item-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    width: 18px;
    height: 18px;
    border-radius: 10px
}

.loggedin-nav-profile {
    display: flex!important;
    align-items: center
}

.loggedin-nav-profile-body {
    gap: 4px
}

.loggedin-nav-profile-cta-icon {
    transition: transform .2s linear;
    transform: rotate(0)
}

.loggedin-nav-profile-cta-icon.rotate {
    transform: rotate(180deg)
}

.profile-dropdown {
    position: absolute;
    overflow: hidden;
    width: 360px;
    top: 35px;
    right: -69px;
    border-radius: 8px;
    z-index: var(--zindex800);
    box-shadow: 0 8px 16px 0 rgb(0 0 0/5%)
}

.profile-dropdown-header {
    padding: 16px;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray150)
}

.profile-dropdown-list {
    padding-bottom: 8px
}

.profile-dropdown-list-item {
    padding-left: 16px
}

.profile-dropdown-list-item:hover {
    background-color: var(--gray50)
}

.profile-dropdown-list-item-icon {
    margin-right: 16px
}

.profile-dropdown-list-item-body {
    flex-grow: 1;
    padding-block:16px;border-bottom: 1px solid var(--gray150)
}

.profile-dropdown-list-item:last-child .profile-dropdown-list-item-body {
    border-bottom: none
}

.profile-dropdown-list-item-content {
    flex-grow: 1;
    margin-right: 8px
}

.profile-dropdown-list-item-cta {
    padding-right: 16px
}

.profile-dropdown-footer {
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--gray150)
}

.icon-button {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: 0 0
}

.icon-button-small {
    padding: 6px
}

.icon-button-outline {
    border: 1px solid var(--gray150)
}

.icon-button:active,.icon-button:hover {
    background-color: #44475b14
}

.icon-button:disabled {
    cursor: normal;
    pointer-events: none
}

.loggedin-header {
    height: 80px;
    padding-block:8px;justify-content: space-between
}

.loggedin-header-left {
    min-width: 394px;
    margin-right: 8px;
    justify-content: space-between
}

.loggedin-header-logo {
    min-width: 150px
}

.loggedin-header-left-nav {
    margin-left: 48px;
    gap: 40px;
    padding-top: 4px
}

.loggedin-header-right {
    margin-left: 8px;
    min-width: 252px
}

.hnsChatWidget_floatingWidget__A7T0S {
    position: fixed;
    bottom: 0;
    right: 40px;
    margin: 40px;
    border-radius: 50%;
    padding: 12px 11px 4px
}

.hnsChatWidget_chatWrapper__XBSJj {
    position: fixed;
    bottom: 110px;
    right: 90px;
    width: 337.5px;
    height: 600px;
    z-index: var(--zindex10001);
    box-shadow: 0 8px 16px 0 rgb(0 0 0/5%)
}

.layout-container {
    display: flex;
    gap: 32px
}

.layout-main {
    max-width: 800px
}

.layout-sidebar {
    max-width: 384px
}

.explore-cards-gap {
    gap: 16px
}

.layout-main-section-card {
    --num-card: 4;
    --total-gap-size: calc((var(--num-card) - 1) * 16px);
    --card-width: calc((100% - var(--total-gap-size)) / var(--num-card));
    flex-basis: var(--card-width)
}

.lne123Loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    width: 100%;
    height: 4px
}

: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(--gray900);
    background: var(--white)
}

:where([data-sonner-toast]) :where([data-close-button]) {
    position: absolute;
    left: auto;
    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(--auto-height);
    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(--gray50);
    border-color: var(--gray500)
}

: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(--auto-height) + 20%);
    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(--green500)
}

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

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

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

.success {
    color: var(--green500)
}

.info {
    color: var(--purple500)
}

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

.error {
    color: var(--red500)
}