/* ==========================================================================
   Mobile gallery controls
   ========================================================================== */
.mobile-gallery .slick-dots li {
    position: relative;
}

.mobile-gallery .slick-dots button {
    position: absolute;
    top: -16px;
    left: -6px;
    width: 24px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: transparent;
    font-size: 0;
    text-indent: 0;
}

.mobile-gallery .slick-dots button:focus-visible {
    outline: 2px solid #266ee5;
}

.aboutUs .slick-dots button:focus-visible {
    outline-color: #fff;
}

.section.-news-padding .slick-dots li:not(.slick-active) {
    opacity: 0.16;
}

/* ==========================================================================
   Lists / Drag
   ========================================================================== */
ul.drag {
    list-style: none;
    padding: 0;
}

ul.drag li {
    border: 1px solid #a0aec0;
    margin: 1px;
    padding: 5px 10px;
}

ul.drag li svg {
    margin-right: 8px;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.pointer {
    cursor: pointer;
}

.tag-list-btn {
    cursor: pointer;
}

.position-relative {
    position: relative;
}

.text-danger {
    color: #a94442;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

/* ==========================================================================
   Bootstrap-like text background helpers
   ========================================================================== */
.text-bg-primary {
    color: #fff !important;
    background-color: rgba(13, 110, 253, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-secondary {
    color: #fff !important;
    background-color: rgba(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-success {
    color: #fff !important;
    background-color: rgba(25, 135, 84, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-info {
    color: #000 !important;
    background-color: rgba(13, 202, 240, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-warning {
    color: #000 !important;
    background-color: rgba(255, 193, 7, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-danger {
    color: #fff !important;
    background-color: rgba(220, 53, 69, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-light {
    color: #000 !important;
    background-color: rgba(248, 249, 250, var(--bs-bg-opacity, 1)) !important;
}

.text-bg-dark {
    color: #fff !important;
    background-color: rgba(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
}

/* ==========================================================================
   Indicators
   ========================================================================== */
/*.btn .indicator,
.indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #f5316c;
    position: absolute;
    top: 50%;
    right: 12px;
    margin: 0;
  transform: translateY(-50%);
}*/

/* ==========================================================================
   Fonts / Icons (Icomoon)
   ========================================================================== */
@font-face {
    font-family: "icomoon";
	src: url("../fonts/icomoon.woff?v7r7px") format("woff");
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-notification-info:before {
    content: "\e91a";
    color: #6f81a3;
}

.icon-notification-success:before {
    content: "\e91b";
    color: #82cc3d;
}

.icon-notification-warning:before {
    content: "\e91c";
    color: #f99f00;
}

.icon-notification-error:before {
    content: "\e91d";
    color: #f44c41;
}

/* ==========================================================================
   Quill Editor styles
   ========================================================================== */
.ql-snow .ql-editor blockquote {
    color: #828282;
    display: flex;
    margin: 0 0 24px;
    padding-left: 0;
    border-left: 0;
}

.ql-snow .ql-editor blockquote:before {
    content: "—";
    margin-right: 12px;
}

.ql-editor h2 {
    border-bottom: 1px solid #e0e0e0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.ql-editor p {
    margin: 0 0 18px;
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.sn-alert {
    background-color: rgba(233, 110, 117, 0.08);
    font-size: 16px;
    font-weight: 600;
    padding: 16px 18px;
    color: #e96e75;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.sn-alert.-red {
    background-color: rgba(233, 110, 117, 0.08);
    color: #e96e75;
}

.sn-alert.-blue {
    background-color: rgba(110, 134, 233, 0.08);
    color: #6e86e9;
}

.sn-alert.-green {
    background-color: rgba(65, 188, 96, 0.08);
    color: #41bc60;
}

.sn-alert.-orange {
    background-color: rgba(240, 139, 24, 0.08);
    color: #f08b18;
}

.sn-alert.-gray {
    background-color: rgba(136, 134, 139, 0.08);
    color: #88868b;
}

body.-dark_theme .sn-alert.-red {
  background-color: #E96E7514;
  color: #E96E75;
}

body.-dark_theme .sn-alert.-blue {
  background-color: #6E86E914;
  color: #6E86E9;
}

body.-dark_theme .sn-alert.-green {
  background-color: #41BC6014;
  color: #41BC60;
}

body.-dark_theme .sn-alert.-orange {
  background-color: #F5820014;
  color: #F08B18;
}

body.-dark_theme .sn-alert.-gray {
  background-color: #88868B14;
  color: #88868B;
}

.sn-alert .icon {
    margin-right: 14px;
    font-size: 20px;
}

.sn-alert .icon:before {
    color: inherit;
}

/* ==========================================================================
   Product
   ========================================================================== */
.product-block .promo-label {
    text-transform: uppercase;
}

/* ==========================================================================
   Description block (content)
   ========================================================================== */
.description-block {
    color: #000;
}

.description-block blockquote {
    color: #828282;
    display: flex;
    margin: 0 0 24px;
    padding-left: 0;
    border-left: 0;
}

.description-block blockquote:before {
    content: "—";
    margin-right: 12px;
}

.description-block h2 {
    border-bottom: 1px solid #e0e0e0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.description-block p {
    margin: 0 0 18px;
}

.description-block ul {
    margin: 0;
    padding: 0;
    padding-left: 13px;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.description-block ul li {
    display: inline !important;
    padding-bottom: 18px;
}

.description-block ul li:before {
    font-family: "icomoon" !important;
    content: "\e91b";
    line-height: 1;
    color: #67c787;
    font-size: 20px;
    margin-right: 14px;
    position: relative;
    top: 3px;
}

/* ==========================================================================
   Orders list table
   ========================================================================== */
.orders-list-table .btn-status-partly {
    background-color: #7d8f30;
    color: #fff;
    pointer-events: none;
}

.orders-list-table a.product-link {
    color: #000;
}

.orders-list-table a.product-link:hover {
    color: #67c787;
    text-decoration: none;
}

/* ==========================================================================
   Forms / Auth / Search
   ========================================================================== */
.main-search-form input[type="search"] {
    color: #000;
}

.registration-box .login-form .form-group:nth-child(2) input {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

/* ==========================================================================
   Paging
   ========================================================================== */
.paging ul .disabled {
    border-radius: 8px;
    border: 1px solid #d6d6d6;
    background-color: rgba(214, 214, 214, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    height: 40px;
    color: #a39d9f;
}


.subdrop ul>li.inactive>a:after {
  background-color: red;
}

.balance-heading {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}
.balance-currency-action { margin-left: auto; }
.balance-currency-button {
    background: none;
    border: 0;
    padding: 0;
    color: #858585;
    font: 600 14px/16px "Open Sans", Arial, sans-serif;
    cursor: pointer;
}
body.-dark_theme .balance-currency-button { color: #897d92; }
.balance-currency-button:hover:not(:disabled) { text-decoration: underline; }
.balance-currency-button:focus-visible { outline: 2px solid #327bff; outline-offset: 4px; }
.balance-currency-button:disabled { opacity: .5; cursor: not-allowed; }
.balance-currency-dialog {
    font: inherit;
    border: 0;
    color: inherit;
    margin: auto;
    max-width: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
    overflow: visible;
    text-align: left;
}
.balance-currency-dialog::backdrop { background: rgba(0, 0, 0, .48); }
.balance-currency-dialog .balance-currency-title {
    font-size: 20px;
    line-height: 1.4;
    margin: 0 24px 16px 0;
}
.balance-currency-dialog p { margin: 0 0 24px; }
.balance-currency-dialog .form-group { margin-bottom: 24px; }
.balance-currency-dialog .modal-close { background: none; border: 0; padding: 0; }
.balance-currency-dialog [role="option"]:focus-visible { outline: 2px solid #327bff; outline-offset: -2px; }
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
body.-dark_theme .balance-currency-dialog { color: #E1DAE9; color-scheme: dark; }
@media (max-width: 479px) {
    .balance-currency-dialog { padding: 28px 20px; }
    .balance-currency-dialog .modal-btns { gap: 12px; }
    .balance-currency-dialog .modal-btns .btn { padding-left: 12px; padding-right: 12px; }
}

.wallet-balance { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.wallet-balance-actual { display: block; color: var(--text-secondary, inherit); font-size: 14px; line-height: 20px; font-weight: 400; opacity: .75; }
.wallet bdi { white-space: nowrap; }
.wallet-balance-actual > bdi { display: block; }

.balance-holder { container-type: inline-size; }
.balance-holder .refill-block {
    grid-template-columns: minmax(208px, 256px) max-content minmax(212px, 1fr);
    gap: 20px 24px;
}
.balance-holder .refill-block-col { margin-bottom: 0; }
.balance-holder .refill-block .jq-number { width: 100%; max-width: 256px; min-width: 208px; }
.balance-holder .refill-block .fixed-payment-list { flex-wrap: nowrap; }
.balance-holder .fixed-payment-list label { white-space: nowrap; transition-property: background-color, border-color, box-shadow, color; }
.balance-holder .refill-block .account-info-box {
    grid-row: auto;
    grid-column: auto;
    min-width: 0;
    margin-bottom: 0;
}
@container (max-width: 820px) {
    .balance-holder .refill-block { grid-template-columns: minmax(208px, 256px) max-content; }
    .balance-holder .refill-block .account-info-box { grid-column: 1 / -1; grid-row: 1; }
}
@container (max-width: 600px) {
    .balance-holder .refill-block { grid-template-columns: minmax(0, 1fr); }
    .balance-holder .refill-block .jq-number { max-width: none; }
    .balance-holder .refill-block .fixed-payment-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    .balance-holder .fixed-payment-list label { padding-inline: 4px; text-align: center; }
}
