/* This is a global CSS file for responsive UI */

/** Theme default **/
:root,
[ms-theme="default"] {

    /* colors */
    --color-primary: #296E70;
    /* btn-primary, heading text, link-primary */
    --color-primary-darken: #195E60;
    /* btn hover */
    --color-primary-lighten: var(--color-primary);
    /* not used */

    --color-secondary: var(--color-primary);
    /* not used */
    --color-secondary-darken: var(--color-secondary);
    /* not used */
    --color-secondary-lighten: var(--color-secondary);
    /* not used */

    /* Holiday limited edition colors */
    --color-holiday-primary: var(--color-primary);
    --color-holiday-secondary: var(--color-primary);

    --color-default: #D1D1D1;
    /* placeholder, tooltip, hint */
    --color-default-darken: var(--color-default);
    /* not used */
    --color-default-lighten: var(--color-default);
    /* not used */

    --color-highlight: #F16650;
    /* highlight text */
    --color-highlight-lighten: #DB6252;
    /* highlight text, link(red) */
    --color-highlight-darken: #E63E00;
    /* highlight text, price */

    --color-success: #53BA83;
    /* success tips */
    --color-error: #DB6252;
    /* error tips, error border */
    --color-warning: #F16650;
    /* warning text */
    --color-info: #FFFBF6;
    /* footer bg, header bg */
    --color-white: #FFFFFF;
    /* white, icon bg */
    --color-black: #000000;
    /* black */
    --color-deals: #ED4D12;

    --bg-color-default: #FAFAFA;
    /* bg default */
    --bg-color-darken: #F3F2F2;
    /* bg darken */
    --bg-color-deepen: #A5A5A5;
    /* bg deepen */
    --bg-color-lighten: #FFFFFF;
    /* bg lighten */
    --bg-color-primary: var(--color-primary);
    /* bg primary */
    --bg-color-secondary: var(--color-secondary);
    /* not used */
    --bg-color-success: var(--color-success);
    --bg-color-danger: var(--color-error);
    --bg-color-warning: var(--color-warning);
    --bg-color-info: var(--color-info);
    /* bg header, bg footer */
    --bg-color-highlight: #FDF2E8;
    /* index page - promise block */
    --bg-color-reverse: #FFFFFF;
    --bg-color-card-preview: #F8F7F3;
    --bg-color-calendar-preview: #eeedef;
    --bg-color-stamps-preview: #FFFFFF;
    --bg-color-card-thumb-preview: var(--bg-color-card-preview);
    --bg-color-calendar-thumb-preview: var(--bg-color-calendar-preview);
    --bg-color-stamps-thumb-preview: var(--bg-color-stamps-preview);

    /* text color */
    --text-color-default: #6F6F6F;
    /* text color default */
    --text-color-primary: var(--color-primary);
    /* text primary, heading color */
    --text-color-secondary: #222;
    /* text secondary */
    --text-color-darken: #000000;
    /* text bold darken(product detail) */
    --text-color-reverse: #FFFFFF;
    /* text color reverse */
    --text-color-ucd-breadcrumbs: #8C8B8B;
    /* text color UCD card/calendaer */

    /* border color */
    --border-color-base: #D1D1D1;
    /* border-color */
    --border-color-darken: #808080;
    /* not used */
    --border-color-darker: #6F6F6F;
    /* darker border */
    --border-color-lighten: #F3F2F2;
    /* lighten border */
    --border-color-lighter: #FAFAFA;
    /* not used */
    --border-color-primary: var(--color-primary);

    /* icon */
    --icon-color: #646565;
    /* icon, svg */
    --icon-color-darken: #2D2B2B;
    /* icon eye */
    --icon-color-lighten: #808080;
    /* icon eye */
    --icon-loading-image-white: url(//cdn.simplytoimpress.com/images/loadingwheel-white.svg);
    --icon-loading-image-gray: url(//cdn.simplytoimpress.com/images/loadingwheel.svg);

    /* scrollbar */
    --scrollbar-color: #aaa;
    --scrollbar-trace-color: #ddd;

    /* switch */
    --switch-bg-darken: #a9a9a9;
    /* not used */
    --switch-bg-primary: var(--color-primary);
    /* not used */

    /* font */
    --font-family: Lato;
    /* text font default */
    --font-family-heading: 'Crimson Pro';
    /* heading font family(large) */
    --font-family-secondary: var(--font-family);
    /* not used */

    --font-size-base: 1.6rem;
    /* size normal */
    --font-size-step: .2rem;
    --font-size-xxs: calc(var(--font-size-base) - 3 * var(--font-size-step));
    --font-size-xs: calc(var(--font-size-base) - 2 * var(--font-size-step));
    /* not used */
    --font-size-sm: calc(var(--font-size-base) - var(--font-size-step));
    /* size small, info, subtitle */
    --font-size-lg: calc(var(--font-size-base) + var(--font-size-step));
    /* size large */
    --font-size-xl: 2.6rem;
    --font-size-xxl: 4rem;
    /* size extra large */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    /* size weight regular */
    --font-weight-medium: 500;
    /* size weight medium */
    --font-weight-semibold: 600;
    /* size weight semibold */
    --font-weight-bold: 700;
    /* size weight bold */

    /* grid */
    --gutter: .5rem;
    --grid-gutter-base: calc(4 * var(--gutter));
    /* 2rem */
    --grid-gutter-xs: calc(1 * var(--gutter));
    /* .5rem not used */
    --grid-gutter-sm: calc(2 * var(--gutter));
    /* 1rem */
    --grid-gutter-lg: calc(6 * var(--gutter));
    /* 3rem not used */
    --grid-gutter-xl: calc(8 * var(--gutter));
    /* 4rem not used */


    /* gap base */
    --gap-value-xl: 3.2rem;
    --gap-value-lg: 2.4rem;
    --gap-value-base: 1.6rem;
    --gap-value-sm: 0.8rem;
    --gap-value-xs: 0.4rem;

    /* border */
    --border-radius-base: .5rem;
    /* border radius normal */
    --border-radius-sm: .3rem;
    /* border radius small */
    --border-radius-lg: 1rem;
    /* border radius large */
    --border-radius-rounded: 10rem;
    /* border radius large */
    --border-radius-circle: 50%;
    /* border radius normal */

    --border-width-base: .1rem;
    /* border width normal */
    --border-width-lg: .2rem;
    /* border width large */

    /* common text font */
    --text-font-base: var(--font-size-base) var(--font-family);
    /* normal text, description */
    --text-font-xs: var(--font-size-xs) var(--font-family);
    /* not used */
    --text-font-sm: var(--font-size-sm) var(--font-family);
    /* not used */
    --text-font-lg: var(--font-size-lg) var(--font-family);
    /* large text */
    --text-font-xl: var(--font-size-xl) var(--font-family-heading);
    /* not used */

    --heading-1-font: bold 2rem var(--font-family);
    /* h1 font */
    --heading-2-font: bold 1.8rem var(--font-family);
    /* h2 font */
    --heading-3-font: bold 1.6rem var(--font-family);
    /* h3 font */

    /** search bar */
    --search-bar-border-radius: .5rem;
    /* search bar radios */

    /* button */
    --btn-font: var(--font-family);
    /* btn font */
    --btn-text-color: var(--text-color-default);
    /* btn text color */
    --btn-reverse-text-color: var(--color-white);
    /* btn text reverse color */
    --btn-bg-color: var(--bg-color-lighten);
    /* btn bg color */
    --btn-border-color: var(--border-color-darker);
    /* btn border color */
    --btn-border-radius: var(--border-radius-base);
    /* btn border radius */

    --btn-size-base: var(--font-size-base);
    /* btn size base */
    --btn-padding-base: 1.2rem;
    /* btn padding base */
    --btn-size-sm: var(--font-size-sm);
    /* btn small size */
    --btn-padding-sm: .5rem;
    /* btn small padding */
    --btn-size-lg: var(--font-size-lg);
    /* btn large size, not used */
    --btn-padding-lg: 1.6rem;
    /* btn large padding, not used */

    --btn-primary-text-color: var(--btn-reverse-text-color);
    /* btn primary, reverse if bg color is dark */
    --btn-primary-bg-color: var(--color-primary);
    --btn-primary-border-color: var(--color-primary);
    --btn-primary-hover-color: var(--color-primary-darken);
    /* darken when hover */
    --btn-primary-hover-border-color: var(--color-primary-darken);

    --btn-secondary-text-color: var(--btn-reverse-text-color);
    --btn-secondary-bg-color: var(--color-secondary);
    --btn-secondary-border-color: var(--btn-secondary-bg-color);
    --btn-secondary-hover-bg-color: var(--color-secondary-darken);
    --btn-secondary-hover-border-color: var(--btn-secondary-border-color);

    --btn-danger-text-color: var(--btn-reverse-text-color);
    --btn-danger-bg-color: var(--color-error);
    --btn-danger-border-color: var(--btn-danger-bg-color);
    --btn-danger-hover-bg-color: var(--btn-danger-bg-color);
    --btn-danger-hover-border-color: var(--btn-danger-border-color);

    --btn-info-text-color: var(--btn-text-color);
    --btn-info-bg-color: var(--color-info);
    --btn-info-border-color: var(--btn-info-bg-color);
    --btn-info-hover-color: var(--btn-info-bg-color);
    --btn-info-hover-border-color: var(--btn-info-border-color);

    --btn-success-text-color: var(--btn-text-color);
    --btn-success-bg-color: var(--color-success);
    --btn-success-border-color: var(--btn-success-bg-color);
    --btn-success-hover-color: var(--btn-success-bg-color);
    --btn-success-hover-border-color: var(--btn-success-border-color);

    --btn-warning-text-color: var(--btn-reverse-text-color);
    --btn-warning-bg-color: var(--color-warning);
    --btn-warning-border-color: var(--btn-warning-bg-color);
    --btn-warning-hover-color: var(--btn-warning-bg-color);
    --btn-warning-hover-border-color: var(--btn-warning-border-color);

    /* common colors for link */
    --link-color: var(--text-color-default);
    /* link color default */
    --link-color-reverse: var(--color-primary);
    /* link color reverse */
    --link-color-primary: var(--color-primary);
    /* link color primary */
    --link-color-highlight: var(--color-highlight-lighten);
    /* link color highlight */
    --link-font-family: var(--font-family);
    /* link font family */
    --link-font: 1.6rem var(--link-font-family);
    /* link font? (<a>link should be consistent with the surrounding font, which is a bit wired to specify separately) */
    --link-text-decoration: none;
    /* link text decoration */

    /* form */
    --form-input-color: var(--text-color-default);
    /* not used */
    --form-input-bg-color: var(--bg-color-lighten);
    /* input bg color */
    --form-input-border-color: var(--border-color-base);
    /* input border color */
    --form-input-border-radius: var(--border-radius-base);
    /* input border color */
    --form-input-highlight-border-color: var(--border-color-darker);
    /* input border focused */
    --form-input-placeholder: var(--color-default);
    /* input placeholder */
    /* select */
    /* checkbox */
    /* dialog */
    --border-color-checkout: #d2d2d7;
    --color-pcrus-checkout-indigo: #5d76b9;
}

/* Reset default styles */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: var(--font-family);
    color: var(--text-color-default);
}

body {
    font-size: 1.3rem;
    width: 100%;
    min-width: 100%;
}

svg,
img {
    outline: none !important;
    vertical-align: middle;
    border: 0;
}

a {
    text-decoration: none;
    background-color: transparent;
    color: var(--link-color);
}

@supports (--webkit-touch-callout: none) {
    a img {
        cursor: pointer;
    }
}

a.reverse {
    color: var(--link-color-reverse) !important;
}

a:hover {
    color: var(--link-color-primary);
}

a.reverse-red {
    color: var(--link-color-highlight);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

ol,
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ls-decimal li {
    list-style: decimal;
}

.ls-disc li {
    list-style: disc;
}

.show {
    display: block !important;
}

.hide,
.hidden,
.hideme {
    display: none !important;
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
    color: inherit;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: inherit;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

label {
    vertical-align: middle;
    margin-left: 1rem;
    display: inline-block;
}

.g-block {
    display: block;
}

.g-inline-block {
    display: inline-block;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

input[type=checkbox],
input[type=checkbox]+label,
input[type=radio],
input[type=radio]+label {
    cursor: pointer;
    margin: 0;
}

input[type=checkbox]:disabled,
input[type=checkbox]:disabled+label,
input[type=radio]:disabled,
input[type=radio]:disabled+label {
    cursor: default;
}

input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.g-border-line-top {
    border-top: 1px solid var(--border-color-base);
}
.g-border-line-bottom {
    border-top: 1px solid var(--border-color-base);
}

.g-btn {
    display: inline-block;
    border-radius: var(--btn-border-radius);
    border-width: var(--border-width-base);
    border-style: solid;
    border-color: var(--btn-border-color);
    background-color: var(--btn-bg-color);
    color: var(--text-color-secondary);
}

.g-btn.link {
    display: inline-block;
    border-radius: unset;
    border: none;
    background-color: transparent;
    color: var(--link-color);
}

.g-btn.reverse {
    border-color: var(--btn-primary-border-color);
    background-color: var(--btn-primary-bg-color);
    color: var(--btn-primary-text-color) !important;
}

.g-btn.primary {
    border-color: var(--btn-primary-border-color);
    background-color: var(--btn-primary-bg-color);
    color: var(--btn-primary-text-color) !important;
}

.g-btn.primary:not(.g-btn-loading):not(.g-disabled):not(:disabled):hover,
.g-btn.reverse:not(.g-btn-loading):not(.g-disabled):not(:disabled):hover {
    border-color: var(--btn-primary-hover-border-color);
    background-color: var(--btn-primary-hover-color);
}

.g-btn.secondary {
    border-color: var(--btn-secondary-border-color);
    background-color: var(--btn-secondary-bg-color);
    color: var(--btn-secondary-text-color) !important;
}

.g-btn.secondary:not(.g-btn-loading):not(.g-disabled):not(:disabled):hover {
    border-color: var(--btn-secondary-hover-border-color);
    background-color: var(--btn-secondary-hover-bg-color);
}

.g-btn:disabled {
    cursor: default;
    opacity: 0.8;
}

.g-btn.text {
    color: var(--link-color-primary);
}

.g-btn.padding {
    padding: var(--btn-padding-base);
}

.g-btn.padding-sm {
    padding: var(--btn-padding-sm);
}

.g-btn.padding-lg {
    padding: var(--btn-padding-lg);
}

/* Close button */
.g-btn-close {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.g-btn-close.reverse {
    background: var(--btn-primary-bg-color);
    border-radius: 22%;
}

.g-btn-close .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.g-btn-close .wrapper.medium {
    width: 65%;
    height: 65%;
}

.g-btn-close .wrapper.half {
    width: 50%;
    height: 50%;
}

.g-btn-close .wrapper.small {
    width: 30%;
    height: 30%;
}

.g-btn-close .wrapper.half::before,
.g-btn-close .wrapper.half::after {
    height: .1rem;
}

.g-btn-close .wrapper::before,
.g-btn-close .wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: .2rem;
    background: var(--icon-color);
    top: 50%;
    left: 0;
}

.g-btn-close.reverse .wrapper::before,
.g-btn-close.reverse .wrapper::after {
    background: var(--btn-bg-color);
}

.g-btn-close .wrapper::before {
    transform: translate(0, -50%) rotate(-45deg);
}

.g-btn-close .wrapper::after {
    transform: translate(0, -50%) rotate(45deg);
}

.g-valign-middle {
    vertical-align: middle;
}

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

.g-flex-v-center {
    display: flex;
    align-items: center;
}

.g-flex-h-center {
    display: flex;
    justify-content: center;
}

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

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

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

.text-underline {
    text-decoration: underline;
}

.ml5,
.ml-5 {
    margin-left: 0.5rem;
}

.mr5,
.mr-5 {
    margin-right: 0.5rem;
}

.mt5,
.mt-5 {
    margin-top: 0.5rem;
}

.mb5,
.mb-5 {
    margin-bottom: 0.5rem;
}

.mx5,
.mx-5 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.my5,
.my-5 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.mg5,
.mg-5 {
    margin: 0.5rem;
}

.ml10,
.ml-10 {
    margin-left: 1rem;
}

.mr10,
.mr-10 {
    margin-right: 1rem;
}

.mt10,
.mt-10 {
    margin-top: 1rem;
}

.mb10,
.mb-10 {
    margin-bottom: 1rem;
}

.mx10,
.mx-10 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.my10,
.my-10 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mg10,
.mg-10 {
    margin: 1rem;
}

.ml15,
.ml-15 {
    margin-left: 1.5rem;
}

.mr15,
.mr-15 {
    margin-right: 1.5rem;
}

.mt15,
.mt-15 {
    margin-top: 1.5rem;
}

.mb15,
.mb-15 {
    margin-bottom: 1.5rem;
}

.mx15,
.mx-15 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.my15,
.my-15 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.mg15,
.mg-15 {
    margin: 1.5rem;
}

.ml20,
.ml-20 {
    margin-left: 2rem;
}

.mr20,
.mr-20 {
    margin-right: 2rem;
}

.mt20,
.mt-20 {
    margin-top: 2rem;
}

.mb20,
.mb-20 {
    margin-bottom: 2rem;
}

.mx20,
.mx-20 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.my20,
.my-20 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mg20,
.mg-20 {
    margin: 2rem;
}

.ml25,
.ml-25 {
    margin-left: 2.5rem;
}

.mr25,
.mr-25 {
    margin-right: 2.5rem;
}

.mt25,
.mt-25 {
    margin-top: 2.5rem;
}

.mb25,
.mb-25 {
    margin-bottom: 2.5rem;
}

.mx25,
.mx-25 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.my25,
.my-25 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.mg25,
.mg-25 {
    margin: 2.5rem;
}

.ml30,
.ml-30 {
    margin-left: 3rem;
}

.mr30,
.mr-30 {
    margin-right: 3rem;
}

.mt30,
.mt-30 {
    margin-top: 3rem;
}

.mb30,
.mb-30 {
    margin-bottom: 3rem;
}

.mx30,
.mx-30 {
    margin-left: 3rem;
    margin-right: 3rem;
}

.my30,
.my-30 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.mg30,
.mg-30 {
    margin: 3rem;
}

.ml35,
.ml-35 {
    margin-left: 3.5rem;
}

.mr35,
.mr-35 {
    margin-right: 3.5rem;
}

.mt35,
.mt-35 {
    margin-top: 3.5rem;
}

.mb35,
.mb-35 {
    margin-bottom: 3.5rem;
}

.mx35,
.mx-35 {
    margin-left: 3.5rem;
    margin-right: 3.5rem;
}

.my35,
.my-35 {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

.mg35,
.mg-35 {
    margin: 3.5rem;
}

.p-0i {
    padding: 0 !important;
}

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

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

.pt-2 {
    padding-top: 0.2rem;
}

.pl5,
.pl-5 {
    padding-left: 0.5rem;
}

.pr5,
.pr-5 {
    padding-right: 0.5rem;
}

.pt5,
.pt-5 {
    padding-top: 0.5rem;
}

.p5,
.pb5,
.pb-5 {
    padding-bottom: 0.5rem;
}

.px5,
.px-5 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.py5,
.py-5 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.pg5,
.pg-5 {
    padding: 0.5rem;
}

.pd5,
.pd-5 {
    padding: 0.5rem;
}

.pl10,
.pl-10 {
    padding-left: 1rem;
}

.pr10,
.pr-10 {
    padding-right: 1rem;
}

.pt10,
.pt-10 {
    padding-top: 1rem;
}

.p10,
.pb10,
.pb-10 {
    padding-bottom: 1rem;
}

.px10,
.px-10 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py10,
.py-10 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pg10,
.pg-10 {
    padding: 1rem;
}

.pd10,
.pd-10 {
    padding: 1rem;
}

.pl15,
.pl-15 {
    padding-left: 1.5rem;
}

.pr15,
.pr-15 {
    padding-right: 1.5rem;
}

.pt15,
.pt-15 {
    padding-top: 1.5rem;
}

.pb15,
.pb-15 {
    padding-bottom: 1.5rem;
}

.px15,
.px-15 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py15,
.py-15 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pg15,
.pg-15 {
    padding: 1.5rem;
}

.pd15,
.pd-15 {
    padding: 1.5rem;
}

.pl20,
.pl-20 {
    padding-left: 2rem;
}

.pr20,
.pr-20 {
    padding-right: 2rem;
}

.pt20,
.pt-20 {
    padding-top: 2rem;
}

.pb20,
.pb-20 {
    padding-bottom: 2rem;
}

.px20,
.px-20 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py20,
.py-20 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.pg20,
.pg-20 {
    padding: 2rem;
}

.pd20,
.pd-20 {
    padding: 2rem;
}

.pl25,
.pl-25 {
    padding-left: 2.5rem;
}

.pr25,
.pr-25 {
    padding-right: 2.5rem;
}

.pt25,
.pt-25 {
    padding-top: 2.5rem;
}

.pb25,
.pb-25 {
    padding-bottom: 2.5rem;
}

.px25,
.px-25 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.py25,
.py-25 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.pg25,
.pg-25 {
    padding: 2.5rem;
}

.pd25,
.pd-25 {
    padding: 2.5rem;
}

.pl30,
.pl-30 {
    padding-left: 3rem;
}

.pr30,
.pr-30 {
    padding-right: 3rem;
}

.pt30,
.pt-30 {
    padding-top: 3rem;
}

.pb30,
.pb-30 {
    padding-bottom: 3rem;
}

.px30,
.px-30 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.py30,
.py-30 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.pg30,
.pg-30 {
    padding: 3rem;
}

.pd30,
.pd-30 {
    padding: 3rem;
}

.border0 {
    border: 0 !important;
}

.g-bg-gray {
    background-color: var(--bg-color-default);
}

.g-bg-white {
    background-color: var(--color-white);
}

.g-bg-none {
    background: none;
}

.g-width-auto {
    width: auto !important;
}

.g-width-100 {
    width: 100%;
}

.g-width-50 {
    width: 50%;
}

.g-height-100 {
    height: 100%;
}

.pointer {
    cursor: pointer;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

/* common form styles */
.g-form-input,
.g-form-select {
    border-radius: var(--form-input-border-radius);
    border-width: var(--border-width-base);
    border-style: solid;
    border-color: var(--form-input-border-color);
}

.g-form-select {
    background: var(--form-input-bg-color);
    background-image: url(/templates/images/icon-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: auto 20%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.g-form-select.no-arrow {
    background-image: none;
}

.g-form-input::placeholder {
    color: var(--form-input-placeholder);
}

.g-form-input.padding,
.g-form-select.padding {
    padding: 1rem;
}

.g-form-input+label {
    position: relative;
    padding-left: 2.6rem;
}

.g-form-input.checkbox {
    display: none;
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle;
}

.g-form-input.checkbox+label:before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1.4rem;
    height: 1.4rem;
    border: .1rem solid var(--border-color-darker);
    background: var(--form-input-bg-color);
}

.g-form-input.checkbox:checked+label:before {
    background: url('/templates/images/icon-checkbox.svg') center no-repeat;
    background-size: 65% auto;
}

.g-form-input.checkbox.large+label {
    padding-left: 3rem;
}

.g-form-input.checkbox.large+label:before {
    width: 2rem;
    height: 2rem;
    font-size: 1.8rem;
}

.g-form-input.checkbox.vatop+label:before {
    top: auto;
    transform: translateY(25%);
}

.g-form-input.radio {
    display: none;
    width: 1.8rem;
    height: 1.8rem;
    vertical-align: middle;
}

.g-form-input.radio+label:before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: .4rem;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background: var(--form-input-bg-color);
    box-shadow: 0 0 0 .3rem var(--form-input-bg-color), 0 0 0 .4rem var(--border-color-darker);
}

.g-form-input.radio:checked+label:before {
    background: var(--icon-color);
}

.g-form-input-number-text[type=number] {
    -moz-appearance: textfield;
}

.g-form-input-number-text[type=number]::-webkit-inner-spin-button,
.g-form-input-number-text[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.component-input-selector .caption {
    margin-bottom: 0.5rem;
}

.g-form-input-group .component-input {
    border-radius: var(--form-input-border-radius);
    border-width: var(--border-width-base);
    border-style: solid;
    border-color: var(--form-input-border-color);
    padding: 1rem;
}

.g-form-input-group .g-form-input {
    border: none;
    padding: 0.5rem 0 0;
    color: #000000;
}

.g-form-input-group .component-input:focus-within {
    border-color: var(--form-input-highlight-border-color);
}

.g-form-input-group .g-form-input:focus {
    outline: none;
}

.error-info,
.error {
    color: var(--color-error);
    margin-top: 0.5rem;
}

.g-form-input-group .component-input.fail,
.container-input.fail .g-form-input,
.container-input.fail .g-form-textarea,
.container-input.fail select {
    border-color: var(--color-error);
    outline: none;
}

.text-body-secondary {
    line-height: 2.5rem;
    margin: 1.5rem 0 0 1.5rem;
}

.text-body-secondary .pass {
    color: var(--color-success);
}

.text-body-secondary .fail {
    color: var(--color-error);
}

.g-form-textarea {
    width: 100%;
    border-color: var(--form-input-border-color);
    border-radius: var(--form-input-border-radius);
    resize: none;
    padding: 1.2rem;
    background-color: var(--bg-color-darken);
    height: 140px;
}

.g-form-textarea::placeholder {
    color: var(--form-input-placeholder);
}

.dropdown-container.focus input {
    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
    border-color: var(--border-radius-base);
    border-bottom-color: var(--form-input-border-color);
    padding: 1rem;
    cursor: pointer;
    outline: none;
}

.hint-selector-container {
    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
    border-width: var(--border-width-base);
    border-style: solid;
    border-top: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
    background-color: var(--btn-bg-color);
    top: 100%;
    display: none;
    cursor: pointer;
    max-height: 35rem;
    overflow-y: auto;
}

.hint-selector-item {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 0.5rem;
}

.hint-selector-item.selected,
.hint-selector-item:hover {
    background-color: var(--color-default);
}

.hint-selector-item.g-disabled {
    background: none;
}

/*dash*/
.g-dash-h,
.g-dash-v {
    display: flex;
    align-items: center;
    justify-content: center;
}

.g-dash-h::before {
    content: "";
    border-top: 1px solid var(--form-input-border-color);
    width: 10px;
    height: 1px;
    display: block;
}

.g-dash-v::before {
    content: "";
    border-right: 1px solid var(--form-input-border-color);
    width: 1px;
    height: 18px;
    display: block;
}

/* range */
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    width: 100%;
}

input[type="range"]::-webkit-slider-thumb,
.ui-widget-content.g-slider-range .ui-slider-handle {
    appearance: none;
    -webkit-appearance: none;
    background: none var(--color-primary);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin-top: -5px;
    border: none;
    cursor: pointer;
    top: 0;
}

input[type="range"]::-webkit-slider-thumb:focus,
.ui-widget-content.g-slider-range .ui-slider-handle:focus {
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track,
.ui-widget-content.g-slider-range {
    height: 5px;
    border-radius: 10px;
    background: none var(--color-default);
    border: none;
}

.ui-widget-content.g-slider-range .ui-slider-range {
    background: none var(--color-primary);
}

.g-slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    user-select: none;
}

.g-slider-ticks .tick {
    width: 33.33%;
    text-align: center;
}

.g-slider-ticks>.tick:first-child {
    text-align: left;
}

.g-slider-ticks>.tick:last-child {
    text-align: right;
}

/* range end */

/* common position styles */
.g-pos-relative {
    position: relative !important;
}

.g-pos-absolute {
    position: absolute !important;
}

.g-pos-locked {
    position: fixed !important;
}

.g-pos-valign {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) translate3d(0, 0, 0);
}

.g-pos-halign {
    left: 50%;
    transform: translateX(-50%);
}

.g-pos-align {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* g-font-bold */
.g-font-semibold {
    font-weight: 600;
}

.g-font-bold {
    font-weight: bold !important;
}

.g-icon {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    background: transparent center center/contain no-repeat;
}

.g-icon-eye,
.g-icon-closed-eye {
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    border: .1rem solid #000;
    border-radius: 75% 15%;
    transform: rotate(45deg);
    cursor: pointer;
}

.g-icon-eye::before,
.g-icon-closed-eye::before {
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--icon-color-lighten);
}

.g-icon-closed-eye::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 26px;
    left: 5px;
    top: -7px;
    background-color: var(--icon-color-darken);
    transform: rotate(90deg);
}

.btn_unfav {
    background: url(/templates/images/thumbs/icon-favorited.svg) 0/100% no-repeat;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    cursor: pointer;
}

.btn_fav {
    background: url(/templates/images/thumbs/icon-fav.svg) 0/100% no-repeat;
    display: inline-block;
    height: 3rem;
    width: 3rem;
    cursor: pointer;
}

/*arrow*/
.g-icon-arrow-up,
.g-icon-arrow-right,
.g-icon-arrow-left,
.g-icon-arrow-down {
    width: 20px;
    height: 10px;
    display: inline-block;
    background: transparent url(/templates/images/icon-arrow.svg) center/100% no-repeat;
    transition: transform .3s;
}

.g-icon-arrow-left {
    transform: rotate(90deg);
}

.g-icon-arrow-right {
    transform: rotate(-90deg);
}

.g-icon-arrow-up {
    transform: rotate(180deg);
}

.g-icon-arrow-down {
    transform: rotate(0deg);
}

.g-icon-arrow-up.small,
.g-icon-arrow-right.small,
.g-icon-arrow-left.small,
.g-icon-arrow-down.small {
    width: 10px;
    height: 5px;
    background: transparent url(/templates/images/icon-arrow-small.svg) center/100% no-repeat;
}

.g-icon-arrow-up.medium,
.g-icon-arrow-right.medium,
.g-icon-arrow-left.medium,
.g-icon-arrow-down.medium {
    width: 14px;
    height: 8px;
    display: inline-block;
    background: transparent url(/templates/images/icon-arrow.svg) center/100% no-repeat;
}

.g-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color);
    scrollbar-track-color: var(--scrollbar-trace-color);
    -ms-scrollbar-widthr: thin;
    -ms-scrollbar-track-color: var(--scrollbar-trace-color);
}

.g-scrollbar::-webkit-scrollbar {
    width: 0.5rem;
}

.g-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 0.5rem;
}

.g-scrollbar::-webkit-scrollbar-track {
    background: var(--scrollbar-trace-color);
    border-radius: 0.5rem;
}

.g-scrollbar.g-no-bg {
    scrollbar-width: auto;
}

.g-scrollbar.g-no-bg::-webkit-scrollbar-track {
    background: var(--color-white);
}

.g-icon-star {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-block;
}

.g-icon-star.small {
    width: 1.2rem;
    height: 1.2rem;
}

.g-icon-star.large {
    width: 3.2rem;
    height: 3.2rem;
}

.g-icon-star-10-filled {
    background: url("/templates/images/detail/star/Star_Cuts_10.png") 0/100% no-repeat;
}

.g-icon-star-9-filled {
    background: url("/templates/images/detail/star/Star_Cuts_09.png") 0/100% no-repeat;
}

.g-icon-star-8-filled {
    background: url("/templates/images/detail/star/Star_Cuts_08.png") 0/100% no-repeat;
}

.g-icon-star-7-filled {
    background: url("/templates/images/detail/star/Star_Cuts_07.png") 0/100% no-repeat;
}

.g-icon-star-6-filled {
    background: url("/templates/images/detail/star/Star_Cuts_06.png") 0/100% no-repeat;
}

.g-icon-star-5-filled {
    background: url("/templates/images/detail/star/Star_Cuts_05.png") 0/100% no-repeat;
}

.g-icon-star-4-filled {
    background: url("/templates/images/detail/star/Star_Cuts_04.png") 0/100% no-repeat;
}

.g-icon-star-3-filled {
    background: url("/templates/images/detail/star/Star_Cuts_03.png") 0/100% no-repeat;
}

.g-icon-star-2-filled {
    background: url("/templates/images/detail/star/Star_Cuts_02.png") 0/100% no-repeat;
}

.g-icon-star-1-filled {
    background: url("/templates/images/detail/star/Star_Cuts_01.png") 0/100% no-repeat;
}

.g-icon-star-0-filled {
    background: url("/templates/images/detail/star/Star_Cuts_00.png") 0/100% no-repeat;
}
.g-icon-star-score {
    background: url("/templates/images/detail/star/Star_Cuts_score.svg") 0/100% no-repeat;
}

.g-icon-loading {
    animation: rotate 1s linear infinite;
    border: 0.4rem solid var(--color-primary);
    border-radius: 50%;
    border-top: 0.4rem solid transparent;
    height: 3rem;
    width: 3rem;
    z-index: 9999;
    margin-left: -1.5rem;
    margin-top: -1.5rem;
}

.g-icon-warning {
    display: inline-block;
    flex: 0 0 2rem;
    height: 2rem;
    width: 2rem;
    background: url('/templates/images/icon-warning.png') no-repeat 50%/100% 100%;
}

.working,
.g-btn-loading {
    background-image: var(--icon-loading-image-white);
    background-position: center;
    background-size: auto 80%;
    background-repeat: no-repeat;
    text-indent: -9999px;
    color: transparent !important;
    cursor: default;
}
.txt.working,
.txt.g-btn-loading {
    background-image: var(--icon-loading-image-gray);
    background-size: auto 100%;
    text-indent: 0;
    text-decoration: underline !important;
}

.g-box-loading {
    background-image: url(//cdn.planetart.com/images/spinner.gif);
    background-position: center;
    background-size: auto 3rem;
    background-repeat: no-repeat;
    cursor: default;
}
.g-box-loading > * {
    visibility: hidden;
}

.g-icon-rotate-left,
.g-icon-rotate-right {
    cursor: pointer;
    height: 2rem;
    width: 2rem;
    margin: 0.5rem;
    flex: 0 0 2rem;
}

.g-icon-rotate-left {
    background: url('/templates/images/icon-rotate-left.svg') no-repeat;
    background-size: 100% 100%;
}

.g-icon-rotate-right {
    background: url('/templates/images/icon-rotate-right.svg') no-repeat;
    background-size: 100% 100%;
}

.g-icon-zoom-in {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-white);
    border-radius: 100%;
    background:
        linear-gradient(to bottom,
            var(--color-white) 5px, transparent 0) no-repeat 2px 5px/8px 2px;
    margin-top: -4px;
}

.g-icon-zoom-in::after,
.g-icon-zoom-in::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 2px;
    height: 10px;
    background: var(--color-white);
}

.g-icon-zoom-in::after {
    transform: rotate(-45deg);
    border-radius: 3px;
    top: 10px;
    left: 14px;
}

.g-icon-zoom-in::before {
    top: 1px;
    left: 5px;
}

.g-icon-zoom-out {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-white);
    border-radius: 100%;
    margin-top: -4px;
}

.g-icon-zoom-out::after,
.g-icon-zoom-out::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    background: var(--color-white);
}

.g-icon-zoom-out::after {
    transform: rotate(-45deg);
    border-radius: 3px;
    width: 2px;
    height: 8px;
    top: 10px;
    left: 12px;
}

.g-icon-zoom-out::before {
    width: 8px;
    height: 2px;
    top: 5px;
    left: 2px;
}

.g-icon-info {
    width: 1.8rem;
    height: 1.8rem;
    background-color: var(--icon-color);
    color: var(--text-color-reverse);
    border-radius: 100%;
}

.g-icon-info:after {
    display: block;
    content: 'i';
    text-align: center;
    line-height: 1.8rem;
    vertical-align: middle;
    font-style: normal;
    font-size: var(--font-size-sm);
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-white);
}

.g-disabled {
    opacity: 0.3;
    cursor: default;
}

.g-shadow {
    box-shadow: rgba(0, 0, 0, 0.2) 0px .8rem 2.4rem;
}

.g-text-linethrough,
.g-text-decoration-linethrough {
    text-decoration: line-through;
}

.g-text-decoration-underline {
    text-decoration: underline;
}

.g-text-uppercase {
    text-transform: uppercase;
}

.g-border-radius {
    border-radius: var(--border-radius-base);
}

.g-border-radius-sm {
    border-radius: var(--border-radius-sm);
}

.g-border-radius-lg {
    border-radius: var(--border-radius-lg);
}

.g-border-radius-rounded {
    border-radius: var(--border-radius-rounded);
}

.g-border-radius-circle {
    border-radius: var(--border-radius-circle);
}

.g-highlight-text {
    color: var(--color-primary);
}

.g-line-break {
    word-break: break-all;
}

.g-word-break {
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-character: '-';
}

.g-white-space-nowrap {
    white-space: nowrap;
}

.g-overflow-hidden {
    overflow: hidden !important;
}

.g-img-responsive {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

.g-tooltip {
    position: relative;
}

.g-tooltip:hover .g-tooltip-content {
    display: block;
}

.g-tooltip-content {
    display: none;
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 12rem;
    padding: 0.6rem 0;
    text-align: center;
    position: absolute;
    z-index: 9;
}

.g-tooltip-content:before {
    content: '';
    display: inline-block;
    position: absolute;
    border-left: 1rem solid var(--color-primary);
    border-bottom: 1rem solid transparent;
}

.g-blur {
    -webkit-animation: blurto6 .3s forwards;
    animation: blurto6 .3s forwards;
}

/* Some styles for common UI like error message */
#ErrorDialog {
    padding: 3rem;
    font-size: 2rem;
}

.clear {
    clear: both;
}

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

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

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes blurto6 {
    from {
        filter: blur(0);
    }

    to {
        filter: blur(4px);
    }
}


/*ui dialog*/
.ui-dialog.ui-front {
    z-index: 10000
}

.ui-dialog.no-dialog-title .ui-dialog-title {
    display: none;
}

.ui-dialog.no-dialog-title .ui-dialog-titlebar-close {
    top: 1.5rem;
    right: 0.5rem;
}

.disable {
  filter: grayscale(100%);
  pointer-events: none;
  opacity: 0.5;
}
.g-bg-checkerboard {
    background: url(/templates/images/icon-checkerboard.svg) repeat;
    background-size: 2rem;
}