:root {
    /* define color of components */
    --view-width: 390px;
    --btn-primary: #33c1ba;
    --border-primary: #00a0f0;
    --shadow-primary: #00000033;
    --scrollbar-bg-track: #f2f2f2;
    --scrollbar-bg-thumb: #33c1ba;
    --scrollbar-bg-thumb-hover: #33c1ba;
    --text-green: #33c1ba;
    --text-gray: #424242;
    --font-10: 0.714rem;
    --font-12: 0.857rem;
    --font-14: 1rem;
    --font-15: 1.071rem;
    --font-16: 1.143rem;
    --font-18: 1.286rem;
    --font-20: 1.428rem;
    --font-24: 1.714rem;

    --line-height-15: 1.071rem;
    --line-height-16: 1.143rem;
    --line-height-18: 1.286rem;
    --line-height-20: 1.428rem;
    --line-height-21: 1.5rem;
    --line-height-22: 1.571rem;
    --line-height-24: 1.714rem;
    --table-header-bg: #33c1ba;
    --table-header-text: #ffffff;
    --choices-guttering: 0px;
    --choices-font-size-lg: 1rem;
}

html {
    font-size: 14px;
    scrollbar-gutter: stable;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 1rem;
    leading-trim: NONE;
    line-height: 1.143rem;
    letter-spacing: 0px;
    min-height: 100vh;
    min-width: 100%;
    max-width: 100%;
    margin: 0 0 0 0;
}

[x-cloak] {
    display: none !important;
}

.tobe-main {
    position: relative;
    margin: 0 auto !important;
    max-width: var(--view-width);
    overflow-x: hidden;
}

#tobe-overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.01);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-index-loading {
    min-height: 400px;
}

.text-center {
    text-align: center;
    vertical-align: middle;
}

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

.error-content {
    text-align: center;
    margin-top: 50px;
    width: 390px;
}

#error-modal .error-content {
    margin-top: 0px;
}

.text-error,
.error-content .title {
    font-weight: 600;
    font-style: SemiBold;
    font-size: 16px;
    color: #ff8e00;
}

.text-message,
.error-content .message {
    margin-top: 20px;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    color: #424242;
}

.error-content pre {
    text-align: left;
}

.overflow-auto {
    overflow-x: hidden !important;
    max-height: 100%;
}

.overflow-y {
    max-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.overflow-y::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.overflow-y::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track {
    background-color: var(--scrollbar-bg-track);
    cursor: pointer;
}

.overflow-y::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-bg-thumb);
    border-radius: 4px;
    background-clip: content-box;
    cursor: pointer;
}

.overflow-y::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-bg-thumb-hover);
}

body.has-scrollbar.overflow-auto {
    padding-right: var(--scrollbar-width);
}

.bg-black {
    background-color: black;
}

#liff-content {
    height: 100%;
}

.error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

.loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid var(--text-green);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-width: 0 0 0 0;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--btn-primary);
    border-color: var(--border-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--btn-primary);
    border-color: var(--border-primary);
}

button:disabled,
.btn:disabled {
    cursor: default;
}

.btn-primary:disabled {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.btn-44 {
    width: 44px;
    height: 44px;
    display: inline-block;
}

.btn-remove {
    width: 77px;
    height: 27px;
    display: inline-block;
    white-space: nowrap;
    text-decoration: underline;
}

.btn-add {
    padding: 0 0 0 0 !important;
}

.btn-add:focus {
    box-shadow: 0px 0px 0px 0px transparent;
}

.flex-group {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
    height: auto;
    min-height: 44px;
    overflow: hidden;
    gap: 5px;
    align-self: flex-start;
}

.flex-group>.btn-44 {
    border: 1px solid #d9d9d9;
    font-weight: 400;
    font-size: var(--font-14);
    leading-trim: NONE;
    line-height: var(--line-height-20);
    letter-spacing: 0px;
}

.flex-group>.btn {
    display: flex;
    background: #ffffff;
}

.flex-group-end {
    justify-content: flex-end;
    overflow: hidden;
    margin-bottom: 4px;
}

.rounded-5 {
    border-radius: 5px;
    font-size: 1rem;
}

.rounded-20 {
    border-radius: 20px;
    font-size: 1rem;
}

.rounded-16 {
    border-radius: 16px;
    font-size: 1rem;
}

.rounded-big {
    border-radius: 24px;
}

.btn-20 {
    height: 20px;
    padding: 0rem 0.75rem;
    line-height: 0;
}

.btn-32 {
    height: 32px;
    padding: 0rem 0.75rem;
    line-height: 0;
    font-style: SemiBold !important;
    font-weight: 600;
}

.btn-big {
    font-size: var(--font-15);
    line-height: var(--line-height-22);
    height: 48px;
    font-weight: 600;
    font-style: SemiBold !important;
    leading-trim: NONE;
    letter-spacing: 0px;
}

.btn-back {
    width: 100px;
    color: #33c1ba;
    border: 1px solid #33c1ba;
    background: #ffffff;
}

.btn-next {
    min-width: 200px;
}

.form-buttons {
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.custom-control-label {
    margin-bottom: 0px !important;
}

.custom-control-label::before,
.custom-control-label::after {
    top: 0rem;
    width: 16px;
    height: 16px;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: transparent;
    background-color: transparent;
}

.custom-radio .custom-control-input~.custom-control-label::after {
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1.45455C4.38505 1.45455 1.45455 4.38505 1.45455 8C1.45455 11.615 4.38505 14.5455 8 14.5455C11.615 14.5455 14.5455 11.615 14.5455 8C14.5455 4.38505 11.615 1.45455 8 1.45455ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%23C7C7CC'/%3E%3C/svg%3E%0A");
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1.45455C4.38505 1.45455 1.45455 4.38505 1.45455 8C1.45455 11.615 4.38505 14.5455 8 14.5455C11.615 14.5455 14.5455 11.615 14.5455 8C14.5455 4.38505 11.615 1.45455 8 1.45455ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z' fill='%230076DF'/%3E%3Cpath d='M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z' fill='%230076DF'/%3E%3C/svg%3E%0A");
}

.form-group-radio {
    gap: 20px;
}

.radio-items.flex-row {
    gap: 20px;
}

.w-full {
    width: 100%;
}

.w-100 {
    width: 100px !important;
}

.btn-w-full {
    max-width: 310px;
}

.btn-20 svg {
    margin-right: 4px;
    display: block;
}

.btn-20 span {
    display: inline-block;
    line-height: 1;
}

.text-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.text-left {
    text-align: left;
}

.pre-lines {
    white-space: pre-line;
}

.text-green {
    color: var(--text-green);
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--font-14);
    leading-trim: NONE;
    line-height: var(--line-height-15);
    letter-spacing: 0px;
    text-align: center;
}

.text-link {
    color: var(--text-green);
    font-size: var(--font-14);
    line-height: var(--line-height-16);
    font-weight: 600;
    font-style: SemiBold !important;
    letter-spacing: 0px;
    leading-trim: NONE;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
}

.text-gray {
    font-size: var(--font-16);
    line-height: var(--line-height-24);
    color: var(--text-gray);
    font-weight: 600;
    leading-trim: NONE;
    letter-spacing: 0px;
    vertical-align: middle;
}

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

.online-application {
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--font-16);
    leading-trim: NONE;
    line-height: var(--line-height-22);
    letter-spacing: 0px;
    text-align: center;
    margin: 10px 0px;
}

nav[aria-label="breadcrumb"] {
    width: 100%;
    margin-bottom: 0px;
}

.breadcrumb {
    background-color: #33c1ba;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 56px;
    margin-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 3px;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "";
    width: 7px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg%20width='7'%20height='8'%20viewBox='0%200%207%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6.75%203.89722L-3.6705e-07%207.79433L-2.6353e-08%200.000102225L6.75%203.89722Z'%20fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 3px;
    margin-right: 3px;
}

.breadcrumb-item {
    display: inline-flex !important;
    align-items: center;
}

.breadcrumb-item>div {
    border: 1px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    background-color: transparent;
    display: inline-block;
    padding: 6px;

    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0px;
    display: inline-flex;
    align-items: center;
    line-height: var(--line-height-20);
}

.breadcrumb-item>div>span {
    font-size: var(--font-10);
    line-height: var(--line-height-10);
    margin-right: 4px;
    width: 25px;
    display: flex;
    align-items: center;
}

.breadcrumb-item>div>strong {
    font-weight: 600;
    font-size: var(--font-16);
    line-height: var(--line-height-20);
    display: flex;
    align-items: center;
}

.breadcrumb-item.active>div {
    background-color: #ffffff;
    color: #33c1ba;
}

.step-title {
    padding: 15px 20px 0px 20px;
    display: block;
}

.step-title.step-1 {}

.step-title::after {
    border-bottom: 1px solid #33c1ba;
    content: "";
    display: block;
    width: 100%;
    height: 0px;
    padding-top: 15px;
}

.step-intro {
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--font-16);
    leading-trim: NONE;
    line-height: var(--line-height-24);
    letter-spacing: 0px;
    text-align: justify;
    color: var(--text-gray);
    padding: 15px 20px 0px 20px;
}

.step-5.step-intro {
    padding: 15px 19px 0px 19px;
}

.step-intro.step-5 {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 80px;
}

.step-intro.step-5 .pre-lines {
    max-width: 390px;
    text-align: justify;
    margin: 0 auto;
}

.step-about {
    font-weight: 400;
    font-style: Regular;
    font-size: var(--font-15);
    leading-trim: NONE;
    line-height: var(--line-height-22);
    letter-spacing: 0px;
    text-align: justify;
    color: #33c1b4;
    padding: 15px 20px 0px 20px;
}

.step-about:hover {
    text-decoration: none;
    color: #33c1b4;
}

.step-divider {
    display: block;
    height: 0px;
    width: 100%;
    border-top: 0px solid transparent;
    border-bottom: 1px solid #c7c7c7;
    margin: 0px 0px 0px 0px;
}

.form-group-title {
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--font-16);
    leading-trim: NONE;
    line-height: var(--line-height-24);
    letter-spacing: 0px;
}

.no-pt {
    padding-top: 0px !important;
}

.no-pb {
    padding-bottom: 0px !important;
}

.no-mt {
    margin-top: 0px !important;
}

.no-mb {
    margin-bottom: 0px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.form-group:not(.no-mb) {
    margin-bottom: 20px;
}

button.close,
button.close:focus-visible,
button.close:focus {
    outline: none;
    box-shadow: none;
    font-weight: 100;
}

.about-title-top {
    margin-top: 66px;
    margin-bottom: 40px;
}

.about-title {
    font-weight: 600;
    font-size: var(--font-16);
    line-height: var(--line-height-24);
    leading-trim: NONE;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    color: #33c1ba;
    justify-content: center;
}

.about-image-text {
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    font-size: var(--font-12);
    line-height: var(--line-height-18);
    letter-spacing: 0px;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 180px;
    min-height: 180px;
    max-width: 310px;
    min-width: 310px;
    background-color: #d9d9d9;
    margin-left: auto;
    margin-right: auto;
}

.about-content {
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    font-size: var(--font-14);
    line-height: var(--line-height-21);
    letter-spacing: 0px;
    color: #000000;
    justify-content: flex-start;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

.add-plus {
    justify-content: center;
    align-items: center;
    position: relative;
}

.pt-10 {
    padding-top: 10px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-14 {
    padding-bottom: 14px;
}

.pt-20 {
    padding-top: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-80 {
    padding-top: 80px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.top-20 {
    margin-top: 20px;
}

.top-30 {
    margin-top: 30px;
}

.top-40 {
    margin-top: 40px;
}

.top-50 {
    margin-top: 50px;
}

.bot-20 {
    margin-bottom: 20px !important;
}

.bot-30 {
    margin-bottom: 30px;
}

.bot-60 {
    margin-bottom: 60px;
}

.w-50 {
    width: 50% !important;
}

.store-register-form {
    padding: 20px;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background: #ff00000d;
    border-color: #ff0000;
}

.invalid-feedback {
    color: #ff0000;
}

select.form-control.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.0375rem;
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5L0 0H10L5 5Z' fill='%23424242'/%3E%3C/svg%3E%0A");
}

form .required {
    color: #ff0000;
}

.store-register-form .flex-row.flex-2-column {
    gap: 10px;
}

.store-register-form .form-group label {
    font-size: var(--font-14);
    line-height: var(--line-height-16);
    color: var(--text-gray);
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0px;
    text-align: left !important;
    cursor: pointer !important;
    margin-bottom: 10px;
}

.store-register-form .form-group.flex-column.w-50 .label-column {
    justify-content: flex-start;
    width: 100%;
}

.store-register-form .form-group .label-row {
    align-self: flex-start;
    margin-top: 1rem;
}

.store-register-form .form-group .form-control {
    height: 44px;
}

.store-register-form .form-group.flex-column.w-50 .form-control {
    justify-content: flex-start;
    width: 100%;
}

.store-register-form .form-group.flex-row.w-full {
    justify-content: flex-start;
    width: 100%;
    align-items: center;
}

.store-register-form .form-group.flex-row.w-full .label-row {
    justify-content: flex-start;
    width: 78px;
    margin-bottom: 0px;
}

.store-register-form.form-step1>.flex-column.form-group.w-full>.label-row,
.store-register-form.form-step-basic_information>.flex-column.form-group.w-full>.label-row {
    max-width: 100%;
    margin-top: 0px;
}

.page-step-3 .step-intro.step-3 {
    padding-top: 30px;
    padding-bottom: 0px;
}

.store-register-form.form-step3>.flex-row.form-group-title,
.store-register-form.form-step-confirmation>.flex-row.form-group-title {
    padding-bottom: 20px;
}

.store-register-form.form-step3>.flex-row:not(.form-group-title),
.store-register-form.form-step-confirmation>.flex-row:not(.form-group-title) {
    margin-bottom: 20px;
}

.store-register-form.form-step3>.flex-row>label,
.store-register-form.form-step-confirmation>.flex-row>label {
    padding-right: 20px;
    margin-bottom: 0px;
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--font-14);
    line-height: var(--line-height-16);
    leading-trim: NONE;
    letter-spacing: 0px;
}

.store-register-form.form-step3>.flex-column>label,
.store-register-form.form-step-confirmation>.flex-column>label {
    padding-right: 20px;
    margin-bottom: 0px;
    font-weight: 600;
    font-style: SemiBold;
    font-size: var(--font-16);
    line-height: var(--line-height-24);
    leading-trim: NONE;
    letter-spacing: 0px;
}

.store-register-form.form-step3>.flex-column.reader-flag>label,
.store-register-form.form-step-confirmation>.flex-column.reader-flag>label {
    padding-bottom: 20px;
}

.store-register-form .form-group.flex-row.w-full .label-row[for="reader_flag"] {
    width: 120px;
    margin-top: 0rem;
}

.store-register-form .form-group.flex-row.w-full>.flex-column:not(.quantity) {
    width: calc(100% - 78px);
}

.store-register-form .form-group.flex-row.w-full>.flex-column.manufacturer {
    width: calc(100% - 78px - 50px);
    margin-right: 10px;
}

.store-register-form .form-group.flex-row.w-full>.flex-column.manufacturer.custom-choices-disabled {
    width: calc(100% - 78px);
    margin-right: 0px;
}

.store-register-form .form-group.flex-row.w-full>.flex-column.quantity {
    width: calc(100% - 78px - 103px);
}

.store-register-form .form-group.flex-row.w-full>.flex-column.quantity.quantity-disabled {
    width: calc(100% - 78px);
}

.store-register-form .form-group.flex-row.w-full>.flex-column.quantity+.flex-group {
    margin-left: 10px;
}

.store-register-form .form-group.flex-row.w-full>.flex-column.quantity.quantity-disabled+.flex-group {
    margin-left: 0px;
}

.store-register-form .form-group.flex-row.w-full>.flex-column>.select-wrapper {
    width: 100%;
}

.store-register-form .form-group.flex-row.w-full .form-control {
    width: 100%;
    justify-content: flex-end;
}

.store-register-form .form-group.flex-column.w-full .label-row {
    max-width: 78px;
}

.store-register-form .form-group.flex-column.w-full .form-control {}

.store-register-form .accept-terms {
    margin: 0 auto;
    padding-top: 2px;
}

.store-register-form .accept-terms>div {
    overflow: hidden;
    min-height: 24px;
}

.store-register-form .accept-terms .invalid-feedback {}

.store-register-form .accept-terms a {
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    leading-trim: NONE;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: middle;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    color: #33c1ba;
}

.store-register-form .accept-terms label {
    margin-bottom: 0px;
}

.store-register-form .accept-terms .invalid-feedback {
    margin-left: max(30px, calc((var(--view-width) - 40px - 291px) / 2));
}

.box-custom-checkbox {
    position: relative;
    min-height: 20px;
}

.box-custom-checkbox .custom-checkbox-icon {
    cursor: pointer;
}

.box-custom-checkbox .custom-checkbox-icon>rect,
.box-custom-checkbox .custom-checkbox-icon>path {
    display: none;
}

.box-custom-checkbox .custom-checkbox-icon.custom-checkbox-error>rect.error,
.box-custom-checkbox .custom-checkbox-icon.custom-checkbox-error>path.error,
.box-custom-checkbox .custom-checkbox-icon.custom-checkbox-checked>rect.checked,
.box-custom-checkbox .custom-checkbox-icon.custom-checkbox-checked>path.checked,
.box-custom-checkbox .custom-checkbox-icon.custom-checkbox-normal>rect.normal,
.box-custom-checkbox .custom-checkbox-icon.custom-checkbox-normal>path.normal {
    display: inline-block;
}

.box-custom-checkbox input[type="checkbox"] {
    opacity: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 100;
    left: 0px;
    top: 0px;
}

.store-register-form .reward-access-flag input:checked {
    background-color: #33c1ba;
}

.store-register-form .reward-access-flag label {
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    leading-trim: NONE;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #000000;
    margin-bottom: 0px;
}

.invalid-feedback {
    text-align: justify;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-weight: 400;
    font-style: Regular;
    font-size: var(--font-12);
    leading-trim: NONE;
    line-height: var(--line-height-16);
    letter-spacing: 0px;
    text-align: justify;
    vertical-align: middle;
    margin-top: 10px;
}

.hidden {
    display: none !important;
}

.mypage-tabs {
    margin: 22px 20px 2px 20px;
    background-color: #f2f2f2;
    color: #424242;
    border-radius: 7px;
    overflow: hidden;
}

.mypage-tabs>.nav-item {
    height: 28px;
    width: 50%;
    border-radius: 7px;
    overflow: hidden;
}

.mypage-tabs>.nav-item.active {}

.mypage-tabs>.nav-item>.nav-link {
    background-color: #f2f2f2;
    color: #424242;
    display: block;
    height: 28px;
    width: 100%;
}

.mypage-tabs>.nav-item.active>.nav-link {
    background-color: #33c1ba;
    color: #ffffff;
}

label.label-row.has-error {
    margin-bottom: 16px !important;
}

.mypage-verify-form {
    padding: 0px 20px 20px 20px;
}

.mypage-verify-form .form-control {
    max-width: 225px;
    margin: 0 auto;
}

.pb-40 {
    padding-bottom: 40px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.tobe-page .modal {
    width: var(--view-width) !important;
    padding-right: 0px !important;
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
}

.modal.hide .modal-dialog,
.modal.show .modal-dialog {
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

button.close[data-dismiss="modal"] {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
}

.percent-25 {
    width: 25% !important;
}

.percent-75 {
    width: 75% !important;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.choices.is-invalid {
    background: #ff00000d;
    border-color: #ff0000;
}

.custom-control-input.is-invalid~.custom-control-label.has-error,
.was-validated .custom-control-input:invalid~.custom-control-label.has-error {
    color: var(--text-gray);
}

.custom-control-input.is-invalid~.custom-control-label::before,
.was-validated .custom-control-input:invalid~.custom-control-label::before {
    z-index: 10;
    background: #ff00000d;
}

.choices.is-invalid .choices__inner {
    background: transparent;
}

.choices.is-invalid .choices__inner .choices__list {
    background: transparent;
}

.choices.is-invalid .choices__inner .choices__list .choices__item {
    background: transparent;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    padding-right: 0.75rem;
}

.form-group-manufacturer {
    flex: 1;
    gap: 20px;
}

.manufacturer-name {
    flex: 1;
}

.btn.btn-nofocus.focus,
.btn.btn-nofocus:focus {
    outline: 0;
    box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .0);
}

input[type="number"].form-control.is-invalid:focus:-webkit-inner-spin-button,
input[type="number"].form-control.is-invalid:focus::-webkit-outer-spin-button {
    background-color: #ff00000d;
}

.store-register-form.form-step2 .choices.is-open .choices__list.choices__list--dropdown,
.store-register-form.form-step-purchase_tag_reader .choices.is-open .choices__list.choices__list--dropdown {
    right: 0px;
    width: max-content !important;
    min-width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    box-shadow: 0px 6px 12px 0px #0000004D;
    z-index: 100;
}

.store-register-form.form-step2 .manufacturer .choices.is-open .choices__list.choices__list--dropdown,
.store-register-form.form-step-purchase_tag_reader .manufacturer .choices.is-open .choices__list.choices__list--dropdown {
    right: -48px;
}

.store-register-form.form-step2 .choices__inner,
.store-register-form.form-step2 .choices__list--single .store-register-form.form-step-purchase_tag_reader .choices__inner,
.store-register-form.form-step-purchase_tag_reader .choices__list--single {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.store-register-form.form-step2 .choices__item.choices__item--selectable,
.store-register-form.form-step-purchase_tag_reader .choices__item.choices__item--selectable {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0px;
}

.store-register-form.form-step2 .choices__list--dropdown input[type="search"],
.store-register-form.form-step-purchase_tag_reader .choices__list--dropdown input[type="search"] {
    display: none;
}

.store-register-form.form-step2 .choices__list--dropdown .choices__list,
.store-register-form.form-step-purchase_tag_reader .choices__list--dropdown .choices__list {
    margin-left: 10px;
}

.store-register-form.form-step2 .choices__list--dropdown .choices__list .choices__item.choices__item--selectable,
.store-register-form.form-step-purchase_tag_reader .choices__list--dropdown .choices__list .choices__item.choices__item--selectable {
    border-bottom: 1px solid #BDBDBD;
    padding-left: 0px;
    line-height: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.choices__inner>select+.invalid-feedback {
    display: none;
}

.form-step3 .flex-row>label,
.form-step-confirmation .flex-row>label {
    white-space: nowrap;
    flex-shrink: 0;
}

#about_ictag .modal-body {
    max-height: 500px;
    overflow-y: auto;
}

.line-break {
    width: 100%;
    height: 0px;
    border-bottom: 1px solid #C7C7C7;
}

.specifications {
    gap: 16px;
    margin-left: auto;
    margin-right: auto;
}

.store-register-form.form-step2 .choices__list--dropdown input[type="search"],
.store-register-form.form-step-purchase_tag_reader .choices__list--dropdown input[type="search"] {
    display: none;
}

.store-register-form.form-step2 .choices__list--dropdown .choices__list,
.store-register-form.form-step-purchase_tag_reader .choices__list--dropdown .choices__list {
    margin-left: 10px;
}

.store-register-form.form-step2 .choices__list--dropdown .choices__list .choices__item.choices__item--selectable,
.store-register-form.form-step-purchase_tag_reader .choices__list--dropdown .choices__list .choices__item.choices__item--selectable {
    border-bottom: 1px solid #BDBDBD;
    padding-left: 0px;
    line-height: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.choices__inner>select+.invalid-feedback {
    display: none;
}

.form-step3 .flex-row>label,
.form-step-confirmation .flex-row>label {
    white-space: nowrap;
    flex-shrink: 0;
}

#about_ictag .modal-body {
    max-height: 500px;
    overflow-y: auto;
}

.line-break {
    width: 100%;
    height: 0px;
    border-bottom: 1px solid #C7C7C7;
}

.specifications {
    gap: 16px;
}

.specification-item {
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: var(--font-12);
    line-height: var(--line-height-18);
    font-weight: 400;
    letter-spacing: 0;
}

.specifications .label {
    width: 66px;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    letter-spacing: -0.06rem;
}

.specifications .information {
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
}

/* Robot payment form (create by robot payment) */
#CARD_INPUT_FORM {
    height: 1px !important;
}

#EMV3DS_INPUT_FORM {
    height: 1px !important;
}

.specifications .label {
    width: 66px;
    min-width: 66px;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    letter-spacing: -0.06rem;
}

.specifications .information {
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
}

.tags-directly-item-capacity .choices,
label.custom-choices .choices {
    margin-bottom: 0px;
}

.tags-directly-item-capacity .choices.is-disabled :is(.choices__inner, .choices__input),
label.custom-choices+.flex-column .choices.is-disabled :is(.choices__inner, .choices__input) {
    background-color: #e9ecef !important;
}

.tags-directly-item-capacity .choices.is-disabled .choices__item,
label.custom-choices+.flex-column .choices.is-disabled .choices__item {
    color: #495057 !important;
}

.tags-directly-item-capacity .choices .choices__list .choices__item,
label.custom-choices+.flex-column .choices .choices__list .choices__item {
    text-align: left;
}

.form-step-confirmation .form-buttons {
    gap: 10px;
}

.form-step-confirmation .form-buttons a.btn-back {
    width: 70px;
}

.form-step-confirmation .form-buttons button.btn-big {
    padding-left: 15px;
    padding-right: 15px;
}

.page-plan-pro nav .breadcrumb .breadcrumb-item>div {
    padding: 6px 2px;
}

.page-plan-pro nav .breadcrumb .breadcrumb-item>div>span {
    width: 20px;
}

.page-plan-pro nav .breadcrumb .breadcrumb-item>div>strong {
    font-size: var(--font-12);
}

.page-plan-pro .breadcrumb-item+.breadcrumb-item::before {
    margin-left: 1px;
    margin-right: 1px;
}

.rounded-medium {
    border-radius: 20px;
}

.btn-medium {
    padding-left: 15px;
    padding-right: 15px;
    font-size: var(--font-14);
    line-height: var(--line-height-16);
    height: 40px;
}

.form-step_purchase_tag_reader .form-group-title,
.form-step2 .form-group-title {
    padding-bottom: 0px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

/* Begin Selection Plan */
.plan-comparison-wrapper table .table-light th.plan-column {
    width: 24%;
}

.plan-table th,
.plan-table td {
    padding: 12px;
    vertical-align: middle;
}

.plan-column {
    cursor: pointer !important;
    transition: background-color 0.2s;
}

.plan-column:hover {
    background-color: #f8f9fa !important;
}

.plan-column[data-plan="free"].active-plan {
    background-color: #e8f5e9 !important;
    border: 2px solid #81c784;
}

th.plan-column[data-plan="free"].active-plan {
    background-color: #c8e6c9 !important;
}

.plan-column[data-plan="standard"].active-plan {
    background-color: #e0f7fa !important;
    border: 2px solid #4dd0e1;
}

th.plan-column[data-plan="standard"].active-plan {
    background-color: #b2ebf2 !important;
}

.plan-column[data-plan="pro"].active-plan {
    background-color: #e3f2fd !important;
    border: 2px solid #64b5f6;
}

th.plan-column[data-plan="pro"].active-plan {
    background-color: #bbdefb !important;
}

.plan-column[data-plan].readonly-plan {
    background-color: lightgray !important;
    border-width: 1px !important;
    cursor: not-allowed !important;
}

.plan-column[data-plan].readonly-plan * {
    cursor: not-allowed !important;
}

.addon-selection-box {
    border-left: 5px solid #0d6efd;
    background-color: #f8f9fa;
}

.hardware-selection-box {
    border-left: 5px solid #dc3545;
    background-color: #f8f9fa;
}

.d-flex.text-end {
    border-radius: 6px;
    padding: 4px 12px;
    background-color: #e7f1ff;
}

.addon-price-text {
    font-size: var(--font-14);
    font-weight: 700;
    color: #0d6efd;
    padding: 4px 12px;
    background-color: #e7f1ff;
    border-radius: 6px;
}

.hardware-price-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #dc3545;
    padding: 4px 12px;
    background-color: #f8d7da;
    border-radius: 6px;
}

/* End Selection Plan */

.reset-password-form {
  margin: 20px;
}

.page-reset-password-success {
  margin-top: 50px;
}

.page-reset-password-success .form-group-title {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.btn.disabled {
    cursor: not-allowed;
}

.password-flex {
    row-gap: 10px;
}

.password-flex>.invalid-feedback {
    margin-top: 0px;
}

.password-flex>.invalid-feedback:empty {
    display: none;
}

.password-description {
    color: gray;
    font-style: italic;
}

#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .75);
    z-index: 99999;

    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-content {
    text-align: center;
}

.spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border: 4px solid #e5e7eb;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.loading-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#selectCardModal .modal-dialog {
    max-width: 600px
}

#selectCardModal .modal-content {
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh
}

#selectCardModal .modal-header {
    padding: 18px 20px;
    background: #fff;
    flex-shrink: 0
}

#selectCardModal .modal-body {
    padding: 20px;
    background: #f8f9fc;
    overflow-y: auto;
    flex: 1;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #bfc8d8 #f4f6fa
}

#selectCardModal .modal-footer {
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid #eceff3;
    flex-shrink: 0
}

#selectCardModal .modal-body::-webkit-scrollbar {
    width: 8px
}

#selectCardModal .modal-body::-webkit-scrollbar-track {
    background: #f4f6fa;
    border-radius: 10px
}

#selectCardModal .modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cfd8e8, #9eb2da);
    border-radius: 10px;
    border: 2px solid #f4f6fa
}

#selectCardModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6fa4ff, #3f7ef7)
}

.saved-card-item {
    display: block;
    cursor: pointer;
    margin: 0
}

.saved-card-item input {
    display: none
}

.saved-card-content {
    background: #fff;
    border: 2px solid #e8eaf0;
    border-radius: 12px;
    padding: 18px 20px;
    transition: .25s
}

.saved-card-item:hover .saved-card-content {
    border-color: #4f9cf9;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px)
}

.saved-card-item input:checked+.saved-card-content {
    border-color: #007bff;
    background: #f4f9ff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .12)
}

.saved-card-content strong {
    font-size: 16px
}

.btn-add-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    min-width: 200px;
    background: #fff;
    border: 2px dashed #007bff;
    border-radius: 10px;
    color: #007bff;
    font-weight: 600;
    transition: .25s
}

.btn-add-card:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
    box-shadow: 0 8px 18px rgba(0, 123, 255, .2)
}

#btn-use-selected-card {
    height: 46px;
    min-width: 200px;
    border-radius: 10px;
    font-weight: 600
}
.completion-text {
  font-size: var(--font-15);
  text-align: center;
  justify-content: center;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: break-word;
}
body.ajax-checkout-error .modal-backdrop {
  z-index: 1161;
}
#modal_checkout_error.modal {
  z-index: 1162;
}
#modal_checkout_error.modal.hide .modal-dialog,
#modal_checkout_error.modal.show .modal-dialog {
    max-width: 480px !important;
    width: 90%;
}
#modal_checkout_error.modal .error .title.warning {
  white-space: normal;
  overflow-wrap: break-word;
}
#modal_checkout_error.modal .error-content {
  margin-top: 15px;
  width: auto;
}
#modal_checkout_error.modal .error-content .message {
  white-space: pre-line;
}
@media (max-width:576px) {
    #selectCardModal .modal-dialog {
        margin: 12px
    }

    #selectCardModal .modal-content {
        max-height: calc(100vh - 24px)
    }

    #selectCardModal .modal-footer {
        flex-direction: column;
        gap: 10px
    }

    .btn-add-card,
    #btn-use-selected-card {
        width: 100%;
        min-width: 100%
    }
}
@media (max-width:391px) {
  .breadcrumb-item>div {
    padding: 4px;
  }
  .about-image-text {
    max-width: 100%;
    min-width: 100%;
  }
}