._CWC .bn-modal>.bn-modal-wrap {
    background-color: var(--color-CardBg);
    box-shadow: var(--shadow-shadow1)
}

.convert-modal-form .revert {
    height: 4px
}

.convert-modal-form .inputWrapper {
    background-color: hsla(0, 0%, 100%, .06)
}

.convert-modal-form .inputWrapper .bn-select-overlay-options {
    height: 480px
}

.convert-Countdown {
    background-image: url("data:image/png;base64,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")
}

@media (min-width:767px) {
    .recurring-portfolios-drawer .bn-drawer-wrap.data-dir-right {
        border-radius: 0 !important;
        width: 424px !important
    }
}

@media (min-width:1023px) {
    .recurring-portfolios-drawer .bn-drawer-wrap.data-dir-right {
        border-radius: 0 !important;
        width: 424px !important
    }
}

.convert-modal-form-asset-panel {
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    flex: 1 1;
    justify-content: space-between
}

.convert-modal-form-asset-panel_toggle {
    background: transparent;
    padding: 0 0 0 16px
}

.convert-modal-form-asset-panel_toggle:active:not(:disabled):not(.inactive),
.convert-modal-form-asset-panel_toggle:hover:not(:disabled):not(:active):not(.inactive) {
    background: transparent
}

.convert-modal-form-asset-panel_main {
    flex-direction: column;
    height: 100%;
    width: 100%
}

.convert-modal-form-asset-panel_box {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 16px 15px 6px
}

.convert-modal-form-asset-panel_box .bn-textField {
    background-color: var(--color-Input);
    width: 100%
}

.convert-modal-form-asset-panel_box input::-moz-placeholder {
    color: var(--color-iconNormal)
}

.convert-modal-form-asset-panel_box input:-ms-input-placeholder {
    color: var(--color-iconNormal)
}

.convert-modal-form-asset-panel_box input::placeholder {
    color: var(--color-iconNormal)
}

.convert-modal-form-asset-panel_box .cancelBtn {
    color: var(--color-TextLink);
    margin-left: 15px;
    padding: 1px 4px
}

.convert-modal-form-asset-panel_list-wrapper {
    flex: 1 1;
    overflow-y: auto;
    padding: 8px 15px
}

.convert-modal-form-asset-panel_list-con {
    height: 100%
}

.convert-modal-form-asset-panel_empty {
    color: var(--color-textPrimary);
    padding: 0
}

@media (min-width:767px) {
    .convert-asset-panel_main {
        width: 100%
    }
    .convert-asset-panel_box {
        padding: 8px 24px
    }
    .convert-asset-panel_box .bn-textField {
        background-color: transparent;
        width: 100%
    }
    .convert-asset-panel_box .cancelBtn {
        display: none
    }
    .convert-asset-panel_list-con {
        height: 352px
    }
    .convert-asset-panel_list-wrapper {
        flex: 1 1;
        overflow-y: auto
    }
}

@media (min-width:1023px) {
    .convert-asset-panel_main {
        width: 100%
    }
    .convert-asset-panel_box {
        padding: 8px 24px
    }
    .convert-asset-panel_box .bn-textField {
        background-color: transparent;
        width: 100%
    }
    .convert-asset-panel_box .cancelBtn {
        display: none
    }
    .convert-asset-panel_list-con {
        height: 352px
    }
    .convert-asset-panel_list-wrapper {
        flex: 1 1;
        overflow-y: auto
    }
}

.convert-modal-heightContianer {
    height: 100%
}

.convert-widget-fundWallet-modal {
    z-index: 1202 !important
}

.convert-modal-form {
    background-color: var(--color-bg1);
    flex-direction: column;
    height: 100%;
    width: 100%
}

.convert-modal-form_oos-modal {
    width: 100%
}

.convert-modal-form_oos-modal-text {
    color: var(--color-textThird)
}

.convert-modal-form_oos-modal-text .content-bold {
    color: var(--color-textSecondary);
    font-weight: 500
}

.convert-modal-form_oos-modal .bn-modal-wrap {
    padding: 24px
}

.convert-modal-form .bn-select-overlay__drawer {
    padding-top: 12px
}

.convert-modal-form ._CWC .bn-select-field {
    height: 28px
}

.convert-modal-form-coinSelector {
    align-items: flex-start !important;
    width: auto !important
}

.convert-modal-form-coinSelector .bn-select-field {
    align-items: flex-start !important
}

.convert-modal-form-coinSelector .bn-select-bubble {
    width: 472px
}

.convert-modal-form-coinSelector .bn-drawer-wrap .bn-select-option__drawer {
    padding: 16px 16px 0
}

.convert-modal-form-coinSelector-bubble {
    right: -350px !important;
    width: 472px !important
}

.convert-modal-form-coinSelector-bubble .bn-select-overlay-options {
    overflow: scroll
}

.convert-modal-form .coinAmount {
    flex-direction: row;
    margin-bottom: 8px;
    margin-top: 8px;
    width: 100%
}

.convert-modal-form .bn-select-overlay-search.bn-select-overlay-search-borderless {
    padding: 0 16px
}

.convert-modal-form .bn-select-overlay-search.bn-select-overlay-search-borderless .bn-textField {
    width: 100%
}

.convert-modal-form .label {
    color: var(--color-textSecondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.convert-modal-form .first-row {
    margin-top: 0
}

.convert-modal-form .revert {
    height: 12px;
    justify-content: center;
    position: relative
}

.convert-modal-form .revert .icon {
    background-color: var(--color-BasicBg);
    border: none;
    border-radius: 20px;
    color: var(--color-IconNormal);
    cursor: pointer;
    margin-top: -14px;
    padding: 10px;
    position: absolute;
    z-index: 10
}

.convert-modal-form .revert .icon:hover {
    border: none
}

.convert-modal-form .revert.not-able .icon {
    cursor: not-allowed
}

.convert-modal-form .revert.able .icon {
    cursor: pointer
}

.convert-modal-form .revert.able .icon:hover svg>path {
    fill: color(--color-PrimaryText);
    color: color(--color-PrimaryText)
}

.convert-modal-form .second-row {
    margin-top: -2px
}

.convert-modal-form div.bn-input-status-disabled {
    background-color: var(--color-bg3)
}

.convert-modal-form div.bn-input-status-disabled>input {
    color: var(--color-textPrimary)
}

.convert-modal-form .credit-wrap {
    color: var(--color-textThird);
    flex-direction: column;
    font-size: 14px;
    justify-content: flex-start;
    line-height: 20px;
    margin-top: 10px
}

.convert-modal-form .credit-wrap .item {
    width: 100%
}

.convert-modal-form .credit-wrap .item:first-of-type {
    margin-right: 10px
}

.convert-modal-form .credit-wrap .num {
    color: var(--color-textPrimary);
    font-weight: 500;
    margin-left: 4px;
    margin-right: 4px
}

@-webkit-keyframes inputsLightBlink {
    0% {
        border-color: #eaecef
    }
    40% {
        border-color: #f0b90b
    }
    50% {
        border-color: #f0b90b
    }
    90% {
        border-color: #eaecef
    }
    to {
        border-color: #eaecef
    }
}

@keyframes inputsLightBlink {
    0% {
        border-color: #eaecef
    }
    40% {
        border-color: #f0b90b
    }
    50% {
        border-color: #f0b90b
    }
    90% {
        border-color: #eaecef
    }
    to {
        border-color: #eaecef
    }
}

@-webkit-keyframes inputsDarkBlink {
    0% {
        border-color: #2b3139
    }
    40% {
        border-color: #f0b90b
    }
    50% {
        border-color: #f0b90b
    }
    90% {
        border-color: #2b3139
    }
    to {
        border-color: #2b3139
    }
}

@keyframes inputsDarkBlink {
    0% {
        border-color: #2b3139
    }
    40% {
        border-color: #f0b90b
    }
    50% {
        border-color: #f0b90b
    }
    90% {
        border-color: #2b3139
    }
    to {
        border-color: #2b3139
    }
}

.convert-modal-form .inputWrapper {
    background-color: var(--color-Vessel);
    border-radius: 12px;
    cursor: pointer;
    padding: 16px;
    position: relative;
    width: 100%
}

.convert-modal-form .inputWrapper:before,
.convert-modal-form .inputWrapper:hover:before {
    border: 1px;
    border-radius: 12px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.convert-modal-form .focusedInput {
    border-radius: 12px;
    cursor: pointer;
    padding: 16px;
    position: relative;
    width: 100%
}

.convert-modal-form .focusedInput:before {
    border: 1px solid var(--color-PrimaryYellow);
    border-radius: 12px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.convert-modal-form .errorInput {
    border-radius: 12px;
    cursor: pointer;
    padding: 16px;
    position: relative;
    width: 100%
}

.convert-modal-form .errorInput:before {
    border: 1px solid var(--color-error);
    border-radius: 12px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.convert-modal-form .blinkLightInput {
    border-radius: 12px;
    cursor: pointer;
    padding: 16px;
    position: relative;
    width: 100%
}

.convert-modal-form .blinkLightInput:before {
    -webkit-animation: inputsLightBlink 1s ease;
    animation: inputsLightBlink 1s ease;
    border: 1px solid;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.convert-modal-form .blinkDarkInput {
    border-radius: 12px;
    cursor: pointer;
    padding: 16px;
    position: relative;
    width: 100%
}

.convert-modal-form .blinkDarkInput:before {
    -webkit-animation: inputsDarkBlink 1s ease;
    animation: inputsDarkBlink 1s ease;
    border: 1px solid;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.convert-modal-form .inputBox {
    flex: 1 1;
    flex-direction: column;
    margin-left: 8px;
    overflow: hidden;
    text-align: right
}

.convert-modal-form .inputBox input {
    -moz-appearance: textfield;
    background-color: transparent;
    border-style: hidden;
    color: var(--color-textPrimary);
    font-size: 20px;
    font-weight: 500;
    height: 28px;
    line-height: 28px;
    outline: none;
    text-align: right;
    width: 100%
}

.convert-modal-form .inputBox input::-webkit-inner-spin-button,
.convert-modal-form .inputBox input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.convert-modal-form .inputBox input::-moz-placeholder {
    color: var(--color-textDisabled);
    font-size: 20px;
    line-height: 28px;
    text-align: right
}

.convert-modal-form .inputBox input:-ms-input-placeholder {
    color: var(--color-textDisabled);
    font-size: 20px;
    line-height: 28px;
    text-align: right
}

.convert-modal-form .inputBox input::placeholder {
    color: var(--color-textDisabled);
    font-size: 20px;
    line-height: 28px;
    text-align: right
}

.convert-modal-form .inputBox .estimatedAmount {
    text-wrap: nowrap;
    color: var(--color-textDisabled);
    height: 18px;
    overflow: hidden;
    pointer-events: none;
    width: 100%
}

.convert-modal-form .iconHover {
    cursor: pointer
}

.convert-modal-form .iconHover:hover svg>path {
    fill: var(--color-textPrimary);
    color: var(--color-textPrimary)
}

.convert-modal-form-iconHover {
    cursor: pointer
}

.convert-modal-form-iconHover:hover svg>path {
    fill: var(--color-textPrimary);
    color: var(--color-textPrimary)
}

@media (min-width:767px) {
    .convert-modal-heightContianer {
        height: auto
    }
    .convert-modal-form {
        height: auto;
        width: 100%
    }
    .convert-modal-form_oos-modal {
        padding: 24px;
        width: 100%
    }
    .convert-modal-form_oos-modal .bn-modal-wrap {
        padding: 24px
    }
    .convert-modal-form .bn-select-overlay-search.bn-select-overlay-search-borderless {
        margin-top: 16px;
        padding: 0 16px 16px
    }
    .convert-modal-form .bn-select-overlay-search.bn-select-overlay-search-borderless .bn-textField {
        width: 100%
    }
    .convert-modal-form .coinAmount {
        margin-bottom: 8px;
        margin-top: 18px;
        width: 100%
    }
    .convert-modal-form .coinAmount,
    .convert-modal-form .credit-wrap {
        flex-direction: row;
        justify-content: space-between
    }
    .convert-modal-form .credit-wrap .item {
        width: auto
    }
    .convert-modal-form ._CWC .bn-select-field {
        height: 40px
    }
    .convert-modal-form-coinSelector-bubble {
        right: -350px !important;
        width: 472px !important
    }
    .convert-modal-form-coinSelector-bubble ._CWC .bn-select-overlay-options {
        overflow: scroll
    }
    .convert-modal-form .revert {
        height: 16px;
        justify-content: center;
        position: relative
    }
    .convert-modal-form .revert .icon {
        background-color: var(--color-BasicBg);
        border: 1px solid var(--color-Line);
        border-radius: 12px;
        color: var(--color-IconNormal);
        cursor: pointer;
        margin-top: -13px;
        padding: 8px;
        position: absolute;
        z-index: 10
    }
    .convert-modal-form .revert .icon:hover {
        border: 1px solid var(--color-InputLine)
    }
    .convert-modal-form .revert .icon:hover svg>path {
        fill: color(--color-PrimaryText);
        color: color(--color-PrimaryText)
    }
    .convert-modal-form .revert.not-able .icon {
        cursor: not-allowed
    }
    .convert-modal-form .revert.able .icon {
        cursor: pointer
    }
    .convert-modal-form .revert.able .icon:hover svg>path {
        fill: color(--color-PrimaryText);
        color: color(--color-PrimaryText)
    }
    .convert-modal-form .inputWrapper {
        background-color: transparent;
        border-radius: 12px;
        cursor: pointer;
        padding: 16px;
        position: relative;
        width: 100%
    }
    .convert-modal-form .inputWrapper:before {
        border: 1px solid var(--color-line);
        border-radius: 12px;
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0
    }
    .convert-modal-form .inputWrapper:hover:before {
        border: 1px solid var(--color-InputLine);
        border-radius: 12px;
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0
    }
}

@media (min-width:1023px) {
    .convert-modal-heightContianer {
        height: auto
    }
    .convert-modal-form {
        height: auto;
        width: 100%
    }
    .convert-modal-form_oos-modal {
        width: 100%
    }
    .convert-modal-form_oos-modal .bn-modal-wrap {
        padding: 24px
    }
    .convert-modal-form .bn-select-overlay-search.bn-select-overlay-search-borderless {
        margin-top: 16px;
        padding: 0 16px 16px
    }
    .convert-modal-form .bn-select-overlay-search.bn-select-overlay-search-borderless .bn-textField {
        width: 100%
    }
    .convert-modal-form-coinSelector-bubble {
        right: -350px !important;
        width: 472px !important
    }
    .convert-modal-form-coinSelector-bubble ._CWC .bn-select-overlay-options {
        overflow: scroll
    }
    .convert-modal-form .heightContianer {
        height: auto
    }
    .convert-modal-form .coinAmount {
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 8px;
        margin-top: 16px;
        width: 100%
    }
    .convert-modal-form .revert {
        height: 16px;
        justify-content: center;
        position: relative
    }
    .convert-modal-form .revert .icon {
        background-color: var(--color-BasicBg);
        border: 1px solid var(--color-Line);
        border-radius: 12px;
        color: var(--color-IconNormal);
        cursor: pointer;
        margin-top: -13px;
        padding: 8px;
        position: absolute;
        z-index: 10
    }
    .convert-modal-form .revert .icon:hover {
        border: 1px solid var(--color-InputLine)
    }
    .convert-modal-form .revert .icon:hover svg>path {
        fill: color(--color-PrimaryText);
        color: color(--color-PrimaryText)
    }
    .convert-modal-form .revert.not-able .icon {
        cursor: not-allowed
    }
    .convert-modal-form .revert.able .icon {
        cursor: pointer
    }
    .convert-modal-form .revert.able .icon:hover svg>path {
        fill: color(--color-PrimaryText);
        color: color(--color-PrimaryText)
    }
    .convert-modal-form .inputWrapper {
        background-color: transparent;
        border-radius: 12px;
        cursor: pointer;
        padding: 16px;
        position: relative;
        width: 100%
    }
    .convert-modal-form .inputWrapper:before {
        border: 1px solid var(--color-line);
        border-radius: 12px;
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0
    }
    .convert-modal-form .inputWrapper:hover:before {
        border: 1px solid var(--color-InputLine);
        border-radius: 12px;
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0
    }
}

.frame {
    background-size: 900%;
    display: inline-block;
    height: 100%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    top: 0;
    width: 100%
}

.convert-Countdown-light {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAA8CAMAAAAaE5NRAAAAdVBMVEUAAAAgJjAgJTAgJjAgJDAgJTAgJTAgJDAgJjAgJTAgJjAgJzAgIDAgJzAgKDAgJTAgJTAgJjAgJjAgJTAgJTAgKDAgJTAgJjD///9YXGSPkpc8QUouMz3x8vJKT1fHycurrrHi4+Rzd32ChYrj5OWqrLC4ur1FyXZbAAAAF3RSTlMAgL/fIDBgQO5Q728QcEDOn6CfkI9Bz4DrL4IAAAL8SURBVHja7dzZcuIwFEVRgY0Z0gFCkpYlGzN18v+f2AxJDiSEKwtjhDn7SUXVqpLRBT8wKMYYY4wxxhhjrAG1jkRLu00fiZb2ZjdNy+Gg5XDQhmpvctO09VjVPhItLWOMMXaZ4uSh1Xrod/YeiWlplRo+D/RH0Xj4YaMopr17O2zrg6Jka9eLmPa+bfxF0Tje2I2mvWfbiWBQFGm907R3bAf6VH//uNjcLG21dkR7AWtXRrCVz4aZTdM0rdSOaKu3u+bG1caR52zAZrN0W5V2RFu5RfPslEVPnrMBW/xLd1VoR7QXsGhRuNhEo0F3W6RRX7bFNN3bNG19dlWUtWjqYFWkUfTzobZoM8ykXkdbm7XpIitpkYsd6qPDgbqSnacHmw7cvjbH2vXqvaxFslVP0nA8CzY/ccGSNWl49uVWrN0uTUmLZKsiaTgGos3mRy44d7EbGJrt3Yi1u+WspEWy7WhpOHQsWYwHkJvdKVoPaz+W07yURbJVfXk4EhebveGCXS3e7WjLWot7QymLZKse5eF4dLNmhgt2tCtsk7aUtVgvHS0SLGrJw9GSLMYDaydr071o3a3dX5eyCLaG4UC12IPn52qH5G0Ps0Haym4rqCa7PDUbskU/7INokfW1h62uZU/fVhJ5OPouFtVkDQ7IxyIfi+wZFpkgrYoPh+N120Dv13GxqCabT3E8HhZ5WWT9LQrTKjXQQpFg8yvZGQ7HwyI/i6yvRW+BWvWshcaBWoOj8bDou524WWQ9LTKBWtXVQl3J5leyMxyMh/3K1yLrZdFbqFaptnBXCdZmi9SeYT/ztsh6WLTIgrXSW0cSri1W/hZffvG3aHWGnRbhWuElPG6qLRZHh2PibtGiaKo9+QXjKPax+S1YfJLsZ9F71lirVKenf6nXKW/zm7Fm+3R5213TmWmyhUb3Ys3KnmPt0uQNt7/+XI6Wdl08+WnbcYPtEy2sWBJ9o11FS/tZd/Lley9dRUt7UKe/+VugJFaKlpYxxhhjjDHGGLuB/gPD5XCbEq+gwAAAAABJRU5ErkJggg==")
}

.convert-Countdown-dark {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAA8CAMAAAAaE5NRAAAAjVBMVEUAAADp6+3q7O/q7O/q7O/r7O/n7+/r7O/r7O/n5+/n6+/r7PDr6+/p6u3q7O/p6+3f3+/q7O/n7+/p6+/p6+3p6+/r6+/n6+/q7O8YGiAZGyGBg4fP0dW1uLu2t7tMTlTd3+JnaG0yNDolJy2bnaGOkJQmKC7Bw8czNTvCxMjDxchoam9bXWLc3uHCxMe/ptaGAAAAGHRSTlMAgN+/MO8gb2AgQFBAoJ+QEL4hzn/PQUFzas1DAAADSUlEQVR42u3c6XLaMBSGYWE2myUUuklHxpgGCCRp7//ySgHnY6tlicUyOe8vhZlnguecwT9YBMdxHMdxHMdxHMc9QLUzsWW7SZ6JLdvKPmm2vBxseTnY+mor+aTZ3tSi+plKskO2flmO4ziOu35R2K7V2t0GHmm12LIVojdoyl3BU29ng6BVhh2x9cn26vKgINzMV0ro+9kRW49s64Oip1ZrbaFvYUdn7YitR7YRwKAgkHKr2X5i25R5ff9SxKbJTF/XfmV7A6vnicFefTeSybNS6gJLp9fL9vp22zQpaluB427AxhO16QJLVtc7Mlgf/68fdtc0zrOo77gbsKtfapuDfdlZOr5etjewaLkqYkOJmp1NgURds109q11gRe1LZomtvZ2vbC1aFLAikCg4fahutDF2Uq6rmKUjO6yQ1WoZW1pUxHZk/nLInslO1cGQPLc/jyxV1+r18d3WIrMVfdNyDAw2zRmSyY5V6ZYqa/XmmFhaZLYiMC1H02jj6ZkhpUVsBku0VFWrt+eJpUVm25Cm5ZCRyWI9gIpZhcqyVFGrd+dFamWR2YqueTnCIjaeEoZU1I4VKstSNa3GvcHKIrMVbfNytIvZ8YQwpGJ2rlBZlippNf6YWVlktqJmXo6ayWI9cC5kNRGytWqvCyxV0Cq9f7ayCPbmy4HuZLVC+qpD+mYxJCd7mi7T1m5+W0F3srOcEZktIgeLtIs9be6lFaF5ObpFLLqTHWNADhaRi0Xa3SJKvLQiOlyOH5uacr9GEYvuZNNnjMfW/l7bLHKySDtbRH5aIZrSUGCwaUl2guG42Cxys0i7WvTmqRUDaejJUzvGaFxsFjlapN0sosRTKzrSUM9k05LsBINxsFnkapF2sujNVytEXeYWeGvjpdLOFm9/O1ukHSxaxt5a00tH6K99nbvbPwssh6NFNLe2aPHqrxVimHvnf1SbfbSRrGwddq/l66NaEQU5L+6Ri02rYOMpYTlcbBa9xw9r876a0GzY27QydjwlUnSBXUeLSfLIFhp9Fjue60usniXpg9v/fl2OLdt1Uf/UDiO2bDeFwRHtCLZsszr9D98cdARbtgc1uv9+FiiMhPg89htbjuM4juM4juM4jqtufwEjAJ2KJthCKgAAAABJRU5ErkJggg==")
}

.convert-Countdown-timer-8 {
    background-position: 0
}

.convert-Countdown-timer-7 {
    background-position: -100%
}

.convert-Countdown-timer-6 {
    background-position: -200%
}

.convert-Countdown-timer-5 {
    background-position: -300%
}

.convert-Countdown-timer-4 {
    background-position: -400%
}

.convert-Countdown-timer-3 {
    background-position: -500%
}

.convert-Countdown-timer-2 {
    background-position: -600%
}

.convert-Countdown-timer-1 {
    background-position: -700%
}

.convert-Countdown-timer-0 {
    background-position: -800%
}

.com-fund-normal-content {
    min-height: 324px;
    text-align: left
}

@media (min-width:1024px) {
    .com-fund-normal-content {
        max-height: calc(100vh - 112px);
        overflow-y: auto
    }
}

.com-fund-normal-content .com-fund-folded {
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .8s
}

.com-fund-normal-content .fund-full-content {
    max-height: 500px
}

.com-fund-primary-link {
    color: var(--color-TextLink);
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: underline
}

.com-fund-primary-link:hover {
    color: var(--color-BtnBg)
}

.com-fund-primary-link.small {
    font-size: 12px;
    line-height: 18px
}

.com-fund-fundItem-wrap {
    border: 1px solid var(--color-Line);
    border-radius: 16px;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 16px;
    position: relative;
    transition: border-color .15s ease
}

.com-fund-fundItem-wrap:hover {
    border-color: var(--color-InputLine)
}

.com-fund-fundItem-wrap-padding-more {
    padding-bottom: 24px;
    padding-top: 24px
}

.com-fund-fundItem {
    grid-gap: 16px;
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between
}

.com-fund-fundItem-activity-left {
    border-radius: 16px 0 8px 0;
    left: 0
}

.com-fund-fundItem-activity-left,
.com-fund-fundItem-activity-right {
    grid-gap: 2px;
    align-items: center;
    background-color: rgba(240, 185, 11, .1);
    color: var(--color-TextLink);
    display: flex;
    gap: 2px;
    padding: 2px 8px;
    position: absolute;
    top: 0
}

.com-fund-fundItem-activity-right {
    border-radius: 0 16px 0 8px;
    right: 0
}

.com-fund-fundItem-icon {
    height: 40px;
    width: 40px
}

.com-fund-normal-desc {
    padding-bottom: 24px;
    padding-top: 8px
}

@media screen and (max-width:767px) {
    .com-fund-primary-link {
        font-weight: 500;
        text-decoration: none;
        text-decoration: unset
    }
    .com-fund-primary-link.small {
        font-weight: 500
    }
    .com-fund-fundItem-wrap {
        border-radius: 12px
    }
    .com-fund-normal-desc {
        padding-bottom: 32px;
        padding-top: 4px
    }
}

.com-fund-extra-content {
    paddingBottom: 24px;
    height: 0;
    margin-top: 24px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.com-fund-extra-content>iframe {
    borderRadius: 0;
    border: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.modal-pc-drawer-mobile-title {
    height: 64px
}

@media (max-width:767px) {
    .modal-pc-drawer-mobile>.bn-drawer-wrap {
        height: 100%
    }
    .modal-pc-drawer-mobile.bn-drawer {
        z-index: 1199
    }
    .modal-pc-drawer-mobile-back {
        align-items: center;
        display: flex;
        height: 44px;
        margin-bottom: 4px
    }
}

.ml-2xs {
    margin-left: var(--space-2xs)
}

.text-center {
    text-align: center
}

.rounded-xl {
    border-radius: var(--radii-xl)
}

.rounded-m {
    border-radius: var(--radii-m)
}

.rounded-l {
    border-radius: var(--radii-l)
}

.border {
    border-width: 1px
}

.border-solid {
    border-style: solid
}

.border-Line {
    border-color: var(--color-Line)
}

.border-PrimaryYellow,
.hover-border-PrimaryYellow:hover {
    border-color: var(--color-PrimaryYellow)
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.py-xl {
    padding-bottom: var(--space-xl);
    padding-top: var(--space-xl)
}

.p-xl {
    padding: var(--space-xl)
}

.px-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl)
}

.px-m {
    padding-left: var(--space-m);
    padding-right: var(--space-m)
}

.pt-l {
    padding-top: var(--space-l)
}

.h-m {
    height: var(--space-m)
}

.w-m {
    width: var(--space-m)
}

.w-l {
    width: var(--space-l)
}

.w-xl {
    width: var(--space-xl)
}

.h-xl {
    height: var(--space-xl)
}

.h-l {
    height: var(--space-l)
}

.px-s {
    padding-left: var(--space-s);
    padding-right: var(--space-s)
}

.py-4xs {
    padding-bottom: var(--space-4xs);
    padding-top: var(--space-4xs)
}

.pb-xl {
    padding-bottom: var(--space-xl)
}

.flex {
    display: flex
}

.flex-shrink-0 {
    flex-shrink: 0
}

.cursor-pointer {
    cursor: pointer
}

.text-t-Tertiary {
    color: var(--color-TertiaryText)
}

.text-t-Primary {
    color: var(--color-PrimaryText)
}

.text-IconNormal {
    color: var(--color-IconNormal)
}

.flex-1 {
    flex: 1 1
}

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

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

.noH5\:hidden {
    display: none
}

.text-TextLink {
    color: var(--color-TextLink)
}

.w-full-auto {
    width: 100%
}

.overflow-y-auto {
    overflow-y: auto
}

@media screen and (max-width:768px) {
    .w-full-auto {
        width: auto
    }
    .mobile\:Subtitle1 {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px
    }
    .mobile\:Caption1 {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px
    }
    .mobile\:text-t-Secondary {
        color: var(--color-SecondaryText)
    }
    .mobile\:py-m {
        padding-bottom: var(--space-m)
    }
    .mobile\:pt-m,
    .mobile\:py-m {
        padding-top: var(--space-m)
    }
}