@charset "UTF-8"; :root { --normal-font-family: "Microsoft JhengHei", sans-serif; --title-font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif; --main-color: #EB6E9A; --main-color-dark: #d64f7e; --main-color-light: #FCD4E1; --link-color: #1D1DFF; --notice-color: #DD2121; --notice-background-color: #F3E0E0; --status-success-color: #62B85E; --status-fail-color: #DD2121; --status-pending-color: #ad9f7a; --field-border-color: #777; --field-border-color-hover: #555; --field-border-color-focus: #5592ED; --field-background-color: #fff; --field-background-color-disabled: #eee; --field-placeholder-color: #999; --field-checked-color: #555; } /* Remove all the styles of the "User-Agent-Style sheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio, table, thead, tbody, tfoot, th, tr, td, colgroup, col, .onePagePayment-subject__content *):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ html, body { height: 100%; font-family: var(--normal-font-family); font-size: 16px; font-weight: 400; line-height: 1.7; word-wrap: break-word; } *:where(:not(.onePagePayment-subject__content *)) { padding: 0; margin: 0; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; -webkit-tap-highlight-color: transparent; } *:where(:not(.onePagePayment-subject__content *))::before, *:where(:not(.onePagePayment-subject__content *))::after { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { display: block; cursor: pointer; } /* Remove list styles (bullets/numbers) */ ol:where(:not(.onePagePayment-subject__content *)), ul:where(:not(.onePagePayment-subject__content *)), menu:where(:not(.onePagePayment-subject__content *)) { list-style: none; } /* For images to not be able to exceed their container */ img:where(:not(.onePagePayment-subject__content *)) { display: block; max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table:where(:not(.onePagePayment-subject__content *)) { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } input::-ms-clear { display: none; } select::-ms-expand { display: none; } button { background-color: transparent; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .onePagePayment-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100%; min-height: 180px; padding: 40px 0; background-color: var(--main-color-light); } @media (max-width: 991px) { .onePagePayment-header { min-height: 100px; padding: 30px 0; } } .onePagePayment-header__title { width: 100%; font-family: var(--title-font-family); font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--main-color); text-align: center; } @media (max-width: 991px) { .onePagePayment-header__title { font-size: 28px; } } .onePagePayment-footer { width: 100%; padding: 25px 0; background-color: #333; } .onePagePayment-footer__text { width: 100%; font-size: 15px; line-height: 1.4; color: #FCF1ED; text-align: center; } @media (max-width: 991px) { .onePagePayment-footer__text { font-size: 14px; } } .onePagePayment-footer__text:nth-child(n+2) { margin-top: 5px; } .onePagePayment-footer__text a { display: inline; } .onePagePayment-footer__text a:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1); } .onePagePayment__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100dvh; } .onePagePayment__page { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; padding: 70px 0; background-color: #fff; } @media (max-width: 991px) { .onePagePayment__page { padding: 50px 0; } } .onePagePayment__container { width: 100%; padding: 0 15px; margin: 0 auto; } @media (min-width: 1360px) { .onePagePayment__container { max-width: 1230px; } } @media (max-width: 1359px) and (min-width: 1200px) { .onePagePayment__container { max-width: 1130px; } } @media (max-width: 1199px) and (min-width: 992px) { .onePagePayment__container { max-width: 990px; } } @media (max-width: 991px) { .onePagePayment__container { max-width: 575px; padding: 0 10px; } } .onePagePayment__block { width: 100%; } .onePagePayment__box { width: 100%; } .onePagePayment__box:nth-child(n+2) { margin-top: 60px; } @media (max-width: 991px) { .onePagePayment__box:nth-child(n+2) { margin-top: 35px; } } .onePagePayment-subject { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .onePagePayment-subject__image { width: 450px; } @media (max-width: 1199px) { .onePagePayment-subject__image { width: 300px; } } @media (max-width: 991px) { .onePagePayment-subject__image { width: 100%; } } .onePagePayment-subject__image img { width: 100%; } .onePagePayment-subject__content { width: calc(100% - 490px); color: #333; } @media (max-width: 1199px) { .onePagePayment-subject__content { width: calc(100% - 335px); } } @media (max-width: 991px) { .onePagePayment-subject__content { width: 100%; margin-top: 25px; } } .onePagePayment-table { width: 100%; padding: 40px; background-color: #F5F5F5; } @media (max-width: 1199px) { .onePagePayment-table { padding: 30px; } } @media (max-width: 991px) { .onePagePayment-table { padding: 20px 15px; } } .onePagePayment-table__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .onePagePayment-table__title span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: inherit; align-content: inherit; width: 24px; height: 24px; font-size: 24px; line-height: 1; color: #333; } @media (max-width: 991px) { .onePagePayment-table__title span:nth-child(1) { width: 20px; height: 20px; font-size: 20px; } } .onePagePayment-table__title span:nth-child(n+2) { width: calc(100% - 30px); font-family: var(--title-font-family); font-size: 24px; font-weight: 700; line-height: 1.2; color: #333; } @media (max-width: 991px) { .onePagePayment-table__title span:nth-child(n+2) { width: calc(100% - 25px); font-size: 20px; font-weight: 500; } } .onePagePayment-table__content { width: 100%; border-top: 1px solid #ccc; } .onePagePayment-table__content:nth-child(n+2) { padding-top: 25px; margin-top: 30px; } @media (max-width: 1199px) { .onePagePayment-table__content:nth-child(n+2) { padding-top: 20px; margin-top: 25px; } } @media (max-width: 991px) { .onePagePayment-table__content:nth-child(n+2) { padding-top: 15px; margin-top: 20px; } } .onePagePayment-table__notice { width: 100%; padding: 10px; margin-top: 25px; background-color: var(--notice-background-color); border-radius: 5px; border: 1px solid var(--notice-color); } @media (max-width: 991px) { .onePagePayment-table__notice { margin-top: 20px; } } .onePagePayment-table__notice p:nth-child(1) { width: 100%; font-family: var(--title-font-family); font-size: 16px; font-weight: 700; color: #333; } .onePagePayment-table__notice p:nth-child(2) { width: 100%; margin-top: 2px; font-size: 16px; color: #333; } .onePagePayment-table__notice p:nth-child(2) span { color: var(--notice-color); } .onePagePayment-form { width: 100%; } .onePagePayment-form__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .onePagePayment-form__row:nth-child(n+2) { margin-top: 20px; } .onePagePayment-form__row--error .onePagePayment-form__select select { border-color: var(--status-fail-color) !important; } .onePagePayment-form__row--error .onePagePayment-form__input input { border-color: var(--status-fail-color) !important; } .onePagePayment-form__row--error .onePagePayment-form__error { display: -webkit-box; display: -ms-flexbox; display: flex; } .onePagePayment-form__title { width: 130px; } @media (min-width: 992px) { .onePagePayment-form__title { margin-top: 14px; } } @media (max-width: 991px) { .onePagePayment-form__title { width: 100%; } } .onePagePayment-form__title p { width: 100%; font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1.2; } @media (max-width: 991px) { .onePagePayment-form__title p { font-size: 16px; font-weight: 400; } } .onePagePayment-form__title--required p::after { content: "*"; color: var(--status-fail-color); } .onePagePayment-form__field { width: calc(100% - 140px); } @media (max-width: 991px) { .onePagePayment-form__field { width: 100%; margin-top: 10px; } } .onePagePayment-form__error { display: none; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--status-fail-color); } .onePagePayment-form__error span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 14px; height: 14px; margin-top: 2px; font-size: 14px; color: var(--status-fail-color); } .onePagePayment-form__error span:nth-child(2) { width: calc(100% - 17px); font-size: 14px; line-height: 1.4; color: var(--status-fail-color); } .onePagePayment-form__input { width: 100%; } @media (min-width: 992px) { .onePagePayment-form__input { max-width: 420px; } } .onePagePayment-form__input input { width: 100%; height: 50px; padding: 0 15px; font-size: 18px; line-height: 48px; color: #333; background-color: var(--field-background-color); border-radius: 5px; border: 1px solid var(--field-border-color); } @media (max-width: 991px) { .onePagePayment-form__input input { height: 40px; font-size: 16px; line-height: 38px; } } .onePagePayment-form__input input::-webkit-input-placeholder { color: var(--field-placeholder-color); } .onePagePayment-form__input input::-moz-placeholder { color: var(--field-placeholder-color); } .onePagePayment-form__input input:-ms-input-placeholder { color: var(--field-placeholder-color); } .onePagePayment-form__input input::-ms-input-placeholder { color: var(--field-placeholder-color); } .onePagePayment-form__input input::placeholder { color: var(--field-placeholder-color); } .onePagePayment-form__input input:disabled { background-color: var(--field-background-color-disabled); cursor: not-allowed; } .onePagePayment-form__input input:-moz-read-only { background-color: var(--field-background-color-disabled); } .onePagePayment-form__input input:read-only { background-color: var(--field-background-color-disabled); } .onePagePayment-form__input input:not(:disabled):not(:-moz-read-only):hover { border-color: var(--field-border-color-hover); } .onePagePayment-form__input input:not(:disabled):not(:read-only):hover { border-color: var(--field-border-color-hover); } .onePagePayment-form__input input:not(:disabled):not(:-moz-read-only):focus, .onePagePayment-form__input input:not(:disabled):not(:-moz-read-only):active { border-color: var(--field-border-color-focus); } .onePagePayment-form__input input:not(:disabled):not(:read-only):focus, .onePagePayment-form__input input:not(:disabled):not(:read-only):active { border-color: var(--field-border-color-focus); } .onePagePayment-form__select { position: relative; width: 100%; } @media (min-width: 992px) { .onePagePayment-form__select { max-width: 420px; } } .onePagePayment-form__select select { position: relative; width: 100%; height: 50px; padding: 0 25px 0 15px; font-size: 18px; line-height: 48px; color: #333; background-color: var(--field-background-color); background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+); background-position: calc(100% - 5px) 50%; background-size: 20px 20px; background-repeat: no-repeat; border-radius: 5px; border: 1px solid var(--field-border-color); z-index: 1; } @media (max-width: 991px) { .onePagePayment-form__select select { height: 40px; font-size: 16px; line-height: 38px; } } .onePagePayment-form__select select:disabled { background-color: var(--field-background-color-disabled); cursor: not-allowed; } .onePagePayment-form__select select:not(:disabled):hover { border-color: var(--field-border-color-hover); } .onePagePayment-form__select select:not(:disabled):focus, .onePagePayment-form__select select:not(:disabled):active { border-color: var(--field-border-color-focus); } .onePagePayment-form__select select:has(option[value]:checked) + .onePagePayment-form__selectPlaceholder { display: none; } .onePagePayment-form__select select option:not([value]) { display: none; } .onePagePayment-form__selectPlaceholder { position: absolute; top: 0; left: 15px; width: calc(100% - 40px); height: 100%; font-size: 18px; line-height: 50px; color: var(--field-placeholder-color); white-space: nowrap; pointer-events: none; overflow: hidden; z-index: 2; } @media (max-width: 991px) { .onePagePayment-form__selectPlaceholder { font-size: 16px; line-height: 40px; } } .onePagePayment-form__checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 20px); margin: -15px 0 0 -20px; padding: 13px 0; } @media (max-width: 991px) { .onePagePayment-form__checkbox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 8px 0; } } .onePagePayment-form__checkbox-item { display: block; min-width: 1px; margin: 15px 0 0 20px; cursor: pointer; } .onePagePayment-form__checkbox-item:hover input:not(:checked):not(:disabled) + p::before { border-color: var(--field-border-color-hover); } .onePagePayment-form__checkbox-item input { display: none; } .onePagePayment-form__checkbox-item input:checked + p::before { background-color: var(--field-checked-color); background-image: url("../images/checkbox_check.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; border-color: var(--field-checked-color); } .onePagePayment-form__checkbox-item input:checked:disabled + p::before { background-color: var(--field-checked-color); border-color: var(--field-checked-color); } .onePagePayment-form__checkbox-item input:disabled + p { cursor: not-allowed; } .onePagePayment-form__checkbox-item input:disabled + p::before { background-color: var(--field-background-color-disabled); } .onePagePayment-form__checkbox-item p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .onePagePayment-form__checkbox-item p::before { content: ""; display: block; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin-right: 10px; background-color: var(--field-background-color); border-radius: 5px; border: 1px solid var(--field-border-color); } .onePagePayment-form__checkbox-item p span:nth-child(1) { display: block; font-size: 18px; line-height: 1.4; color: #333; } @media (max-width: 991px) { .onePagePayment-form__checkbox-item p span:nth-child(1) { padding-top: 2px; font-size: 16px; } } .onePagePayment-form__checkbox-item p span:nth-child(2) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0 5px; font-size: 14px; color: #fff; background-color: #999; border-radius: 50%; } @media (max-width: 991px) { .onePagePayment-form__checkbox-item p span:nth-child(2) { margin: 1px 0 0 5px; } } .onePagePayment-form__radio { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 20px); margin: -15px 0 0 -20px; padding: 13px 0; } @media (max-width: 991px) { .onePagePayment-form__radio { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 8px 0; } } .onePagePayment-form__radio-item { display: block; min-width: 1px; margin: 15px 0 0 20px; cursor: pointer; } .onePagePayment-form__radio-item:hover input:not(:checked):not(:disabled) + p i { border-color: var(--field-border-color-hover); } .onePagePayment-form__radio-item input { display: none; } .onePagePayment-form__radio-item input:checked + p i::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color: var(--field-checked-color); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .onePagePayment-form__radio-item input:checked:disabled + p i { background-color: var(--field-checked-color); } .onePagePayment-form__radio-item input:disabled + p { cursor: not-allowed; } .onePagePayment-form__radio-item input:disabled + p i { background-color: var(--field-background-color-disabled); } .onePagePayment-form__radio-item p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .onePagePayment-form__radio-item p i { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin-right: 10px; background-color: var(--field-background-color); border-radius: 50%; border: 1px solid var(--field-border-color); } .onePagePayment-form__radio-item p span:nth-child(2) { display: block; font-size: 18px; line-height: 1.4; color: #333; } @media (max-width: 991px) { .onePagePayment-form__radio-item p span:nth-child(2) { padding-top: 2px; font-size: 16px; } } .onePagePayment-form__radio-item p span:nth-child(3) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 2px 0 0 5px; font-size: 14px; color: #fff; background-color: #999; border-radius: 50%; } @media (max-width: 991px) { .onePagePayment-form__radio-item p span:nth-child(3) { margin: 1px 0 0 5px; } } .onePagePayment-buttons { width: 100%; margin-top: 40px; } @media (max-width: 991px) { .onePagePayment-buttons { margin-top: 25px; } } .onePagePayment-buttons__submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 60px; margin: 0 auto; background-color: var(--main-color); border-radius: 5px; } @media (min-width: 992px) { .onePagePayment-buttons__submit { max-width: 250px; } } @media (max-width: 991px) { .onePagePayment-buttons__submit { height: 50px; } } .onePagePayment-buttons__submit:not(:disabled):hover { background-color: var(--main-color-dark); } .onePagePayment-buttons__submit:disabled { background-color: var(--main-color-light); cursor: not-allowed; } .onePagePayment-buttons__submit:disabled span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; } .onePagePayment-buttons__submit span:nth-child(1) { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 24px; height: 24px; margin-right: 5px; font-size: 24px; line-height: 1; color: #fff; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media (max-width: 991px) { .onePagePayment-buttons__submit span:nth-child(1) { width: 20px; height: 20px; font-size: 20px; } } .onePagePayment-buttons__submit span:nth-child(2) { font-family: var(--title-font-family); font-size: 20px; font-weight: 700; line-height: 1; color: #fff; } @media (max-width: 991px) { .onePagePayment-buttons__submit span:nth-child(2) { font-size: 18px; font-weight: 500; } } .onePagePayment__fixedButton { position: fixed; top: 50%; right: 0; width: 54px; padding: 20px 15px; background-color: #333; border-radius: 15px 0 0 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 99; } @media (max-width: 991px) { .onePagePayment__fixedButton { width: 42px; padding: 15px 10px; border-radius: 10px 0 0 10px; } } .onePagePayment__fixedButton span:nth-child(1) { display: block; width: 100%; font-size: 24px; line-height: 1; color: #fff; } @media (max-width: 991px) { .onePagePayment__fixedButton span:nth-child(1) { font-size: 22px; } } .onePagePayment__fixedButton span:nth-child(2) { display: block; width: 100%; margin-top: 6px; font-family: var(--title-font-family); font-size: 20px; font-weight: 500; line-height: 1.2; color: #fff; text-align: center; } @media (max-width: 991px) { .onePagePayment__fixedButton span:nth-child(2) { font-size: 18px; font-weight: 400; } } .onePagePayment__fixedButton:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1); } .onePagePayment-dialog { position: fixed; top: 0; left: 0; width: 100vw; height: 0; background-color: rgba(0, 0, 0, 0.5); overflow-y: auto; z-index: 999; } .onePagePayment-dialog--showed { height: 100vh; height: 100dvh; } .onePagePayment-dialog--showed .onePagePayment-dialog__box { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .onePagePayment-dialog__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 100vw; min-height: 100vh; min-height: 100dvh; padding: 10px; } .onePagePayment-dialog__box { width: 100%; max-width: 360px; padding: 30px; background-color: #fff; border-radius: 10px; border: 1px solid var(--main-color); -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition-property: opacity transform; transition-property: opacity transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } @media (max-width: 991px) { .onePagePayment-dialog__box { padding: 25px 20px; } } .onePagePayment-dialog__title { width: 100%; font-family: var(--title-font-family); font-size: 20px; font-weight: 500; line-height: 1.2; color: #333; text-align: center; } @media (max-width: 991px) { .onePagePayment-dialog__title { font-size: 18px; } } .onePagePayment-dialog__text { width: 100%; margin-top: 15px; font-size: 16px; color: #333; text-align: center; } .onePagePayment-dialog__text span { color: var(--notice-color); } .onePagePayment-dialog__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; margin-top: 15px; } .onePagePayment-dialog__submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 40px; margin: 0 auto; background-color: var(--main-color); border-radius: 5px; } .onePagePayment-dialog__submit:not(:disabled):hover { background-color: var(--main-color-dark); } .onePagePayment-dialog__submit:disabled { background-color: var(--main-color-light); cursor: not-allowed; } .onePagePayment-dialog__submit:disabled span:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; } .onePagePayment-dialog__submit span:nth-child(1) { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20px; height: 20px; margin-right: 5px; font-size: 20px; line-height: 1; color: #fff; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .onePagePayment-dialog__submit span:nth-child(2) { font-family: var(--title-font-family); font-size: 16px; line-height: 1; color: #fff; } .onePagePayment-dialog__cancel { margin-top: 10px; font-size: 15px; line-height: 1; color: #777; } .onePagePayment-dialog__cancel:not(:disabled):hover { color: #333; } .onePagePayment-dialog__cancel:disabled { color: #aaa; cursor: not-allowed; } .onePagePayment-list { width: 100%; } .onePagePayment-list__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .onePagePayment-list__row:nth-child(n+2) { padding-top: 20px; margin-top: 20px; border-top: 1px dotted #ccc; } @media (max-width: 991px) { .onePagePayment-list__row:nth-child(n+2) { padding-top: 15px; margin-top: 15px; } } .onePagePayment-list__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; width: 130px; } @media (min-width: 992px) { .onePagePayment-list__title { margin-top: 5px; } } .onePagePayment-list__title p { width: 100%; font-family: var(--title-font-family); font-size: 18px; font-weight: 500; line-height: 1.2; } @media (max-width: 991px) { .onePagePayment-list__title p { font-size: 16px; font-weight: 400; } } .onePagePayment-list__field { width: calc(100% - 140px); } @media (max-width: 991px) { .onePagePayment-list__field { width: 100%; margin-top: 10px; } } .onePagePayment-list__field p { width: 100%; font-size: 18px; color: #555; } .onePagePayment-list__field p a { display: inline; color: var(--link-color); text-decoration: underline; } .onePagePayment-list__field p a:hover { opacity: 0.8; } .onePagePayment-list__status { display: inline-block; padding: 7px 10px; font-family: var(--title-font-family); font-size: 16px; line-height: 1; color: #fff; border-radius: 5px; } .onePagePayment-list__status--success { background-color: var(--status-success-color); } .onePagePayment-list__status--pending { background-color: var(--status-pending-color); } .onePagePayment-list__status--fail { background-color: var(--status-fail-color); }