:root {
    --color-changan: #1991e5;
    --color-main: #ffc945;
    --color-secondary: #1991e5;
    --color-secondary-85: rgb(25 145 229 / 85.4%);
    --color-secondary-60: rgb(25 145 229 / 62%);
    --color-secondary-20: rgb(25 145 229 / 20%);
    --color-secondary-8: rgb(25 145 229 / 8%);
    --color-green: #1bc522;
    --color-red: #ff263b;
    --color-black: #050505;
    --color-gray-1: #515365;
    --color-gray-2: #757a95;
    --editor-placeholder: #757a95;
    --color-btn-gray: #c9d5e1;
    --color-btn-gray-38: rgb(201 213 225 / 38%);
    --color-btn-gray-60: rgb(201 213 225 / 62%);
    --color-bg-gray: rgb(237, 242, 246);
    --color-br-gray: rgb(218, 224, 228);
    --color-bg-gray-98: rgb(237 242 246 / 98%);
    --color-bg-gray-76: rgb(237 242 246 / 76.4%);
    --color-bg-gray-60: rgb(237 242 246 / 62%);
    --color-bg-gray-20: rgb(237 242 246 / 20%);
    --color-bg-gray-38: rgb(237 242 246 / 38%);
    --post-bg-item: rgb(237 242 246 / 60%);
    --btn-main-hover: #fdb300;
    --font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* --p-shadow-box: 0.6px 0px 0px 0px rgb(167 176 184 / 38%) inset, -1px 0px 0px 0px rgb(167 176 184 / 60%) inset, 0px -1px 0px 0px rgb(167 176 184 / 60%) inset, 0px 0.6px 0px 0px rgb(167 176 184 / 38%) inset; */
    --p-shadow-box: 0 4px 12px rgba(0,0,0,.09);
    --p-shadow-box-popup: 0 4px 12px rgba(0,0,0,.09);
    --ds-shadow-raised: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f;
}
html,
body {
    font-family: var(--font-family-sans-serif);
    font-weight: 400;
    scroll-behavior: smooth;
}

#center-region .add-product,
#center-region .add-category,
#center-region .add-post,
#center-region .add-tag,
#center-region .add-property,
#center-region .add-page,
#center-region .add-website {
    display: none;
}
* {
    outline-color: var(--color-secondary);
    outline-width: 1px;
}
input:read-only {
    outline: none;
    cursor: default;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
input[type="radio"] {
    accent-color: var(--color-secondary);
}
input[type="checkbox"] {
    min-width: 14px;
    width: 14px;
    height: 14px;
    /* accent-color: var(--color-secondary); */
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: 1px solid var(--color-gray-2);
    border-radius: 3px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;fill: %23ffffff' xml:space='preserve'%3e%3cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-size:cover;
    /* background-color:#fff; */
    background-position:50% 50%;
    background-size:0 0;
    transition:.2s ease;
}
input[type="checkbox"]:checked {
    opacity: 1;
    background-size:100% 100%;
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
}
input[type="checkbox"].light {
    border-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;fill: %23673bb7' xml:space='preserve'%3e%3cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z'/%3e%3c/svg%3e");
}
input[type="checkbox"].light:checked {
    background-color: #fff;
}

input.switch + label.switch {
    background-color: var(--color-bg-gray-60);
    background-image: none;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1em;
    height: 22px;
    line-height: 1;
    padding: 2px;
    position: relative;
    text-align: center;
    transition: all 0.1s ease-in-out 0s;
    width: 42px;
    border-radius: 30px;
}
input[type="checkbox"].switch:checked + label.switch {
    background-color: #a0f4a2;
}
input.switch + label.switch::before {
    /* color: #b7b7b7; */
    content: "";
    display: block;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 18px;
    margin: 0.21667rem;
    min-width: 25px;
    overflow: hidden;
    position: absolute;
    right: 0.017rem;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    transition: all 0.1s ease-in-out 0s;
}
input.switch:checked + label.switch::before {
    color: #fff;
    content: "";
    right: auto;
}
input.switch + label.switch::after {
    background-color: var(--color-btn-gray);
    border-radius: 20px;
    box-shadow: none;
    content: "";
    height: 16px;
    left: 3px;
    top: 2px;
    position: absolute;
    transition: all 0.1s ease-in-out 0s;
    width: 16px;
}
input.switch:checked + label.switch::after {
    background-color: #f7f7f7;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.14);
    left: 23px;
}
/************* page loading *************/
.center-loading {
    display: flex;
    transform: translate(-50%, -38%);
    position: absolute;
    left: 50%;
    top: 38%;
    z-index: 9;
}

.circle-loading {
    /* transform: translateY(-90%); */
    position: relative;
    line-height: 27px;
}

.loading {
    position: relative;
    background: var(--color-bg-gray-38);
    border-radius: 3px;
    overflow: hidden;
}
.loading:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: linear-gradient(-60deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    animation: loading 1s infinite;
}
.loading.pw-center,
.loading.pw-aside {
    background-color: var(--color-bg-gray-60);
    opacity: 0.62;
}

@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}
.loading img {
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

.loading-5 {
    width: var(--loading-size, 21px);
    height: var(--loading-size, 21px);
    color: var(--color-main);
    border-radius: 3px;
    background:
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0);
    background-size: var(--loading-cell-size, 10px) var(--loading-cell-size, 10px);
    background-repeat:no-repeat;
    animation: loading5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes loading5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:var(--loading-expand-size, 33px);height: var(--loading-expand-size, 33px)}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:var(--loading-expand-size, 33px);height: var(--loading-expand-size, 33px)}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}
/************* end page loading *************/
figure[align="center"] {
    align-items: center;
}
figure[align="left"] {
    align-items: start;
}
figure[align="right"] {
    align-items: end;
}
.disabled {
    opacity: 13%;
    /* cursor: default; */
    pointer-events: none;
    transition: all 200ms ease-out;
}

.max-h-srollbar {
    max-height: var(--h-scrollbar, calc(100vh - 60px - 58px - 16px - 16px));
    min-height: var(--h-scrollbar, calc(100vh - 60px - 58px - 16px - 16px));
}

.shadow-foot::before,
.shadow-foot::after {
    content: '';
    z-index: -2;
    display: block;
    position: absolute;
    bottom: 16px;
    left: 10px;
    width: 40%;
    height: 20%;
    max-height: 13em;
    box-shadow: 0px 13px 8px var(--color-gray-2);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.shadow-foot::after {
    right: 10px;
    left: auto;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
}

svg.icon {
    fill: currentColor;
    pointer-events: none;
    stroke: transparent;
    color: var(--color-gray-2);
    transition: transform 200ms ease-out;
}
/***** Shape ******/
.curved-corner-bottomleft,
.curved-corner-bottomright,
.curved-corner-topleft,
.curved-corner-topright {
  /* width: 8px;
  height: 8px;
  overflow: hidden;
  position: relative; */
}
.curved-corner-bottomleft:before,
.curved-corner-bottomright::after {
  content: "";
  display: none;
  width: 24px;
  height: 24px;
  position: absolute;
  border-radius: 50%;
  
}
.curved-corner-bottomright::after {
  bottom: 0;
  right: -24px;
  box-shadow: -9px 9px 0 0 var(--background-tab, #fff);
}
.curved-corner-bottomleft:before {
  bottom: 0;
  left: -24px;
  box-shadow: 9px 9px 0 0 var(--background-tab, #fff);
}
/*** Currceny Prodcut Format *********************************************/
/*** https://www.toptal.com/designers/htmlarrows/currency/ ***/
.price::before,
.price::after,
.price>i::before {
  font-size: 13px;
  color: var(--color-gray);
  font-style: normal;
}
.price>i::before {
  font-size: 14px;
}
.price[country="tw"]::before {
  content: 'NT';
  margin-right: 4px;
  font-size: 13px;
}
.price[country="tw"]>i::before {
  content: '\0024';
}
.price[country="vn"]::after {
  content: 'vnđ';
  margin-left: 4px;
}
.price[country="sg"]::after {
  content: 'SGD';
  margin-left: 4px;
}
.price[country="sg"]>i::before {
  content: '\0024';
}
.price[country="th"]::after {
  content: 'THB';
  margin-left: 4px;
}
.price[country="th"]>i::before {
  content: '\0E3F';
}
.price[country="my"]::before {
  content: 'RM';
  margin-right: 4px;
  font-size: 13px;
}
.price[country="id"]::before {
  content: 'Rp';
  margin-right: 4px;
  font-size: 13px;
}
.price[country="us"]>i::before {
    content: '\0024';
}
/**************************************/
.button-dropdown>ul {
    opacity: 0;
    visibility: hidden;
}
.button-dropdown.show>ul {
    opacity: 1;
    visibility: visible;
}
.button-dropdown.show>.more {
    background-color: var(--color-bg-gray-38);
}
.dropdowns {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
    line-height: initial;
    list-style: outside none none;
    padding-left: 0;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 120%;
    z-index: 3;
    width: 360px;
    opacity: 0;
    visibility: hidden;
    transition: height 0.1s linear 0s, opacity 0.1s linear 0s;
    border-radius: 8px;
    overflow: hidden;
}
.open .dropdowns,
.dropdowns.active,
li.active .dropdowns {
    opacity: 1;
    visibility: visible;
    height: auto !important;
}
.bottom-gradient-dark {
    position: relative;
}

.bottom-gradient-dark::after {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(5 5 5 / 85%) 0%, #888888 50%, rgb(5 5 5 / 85%) 100%) repeat scroll 0 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.bottom-gradient-light {
    position: relative;
}

.bottom-gradient-light::after {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #fdfdfd 0%, #e6ecf5 50%, #fdfdfd 100%) repeat scroll 0 0;
    content: "";
    height: 1px;
    position: absolute;
    width: calc(100% - 6px);
    bottom: 0;
    left: 3px;
}
.bottom-gradient-light.right::after {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #fdfdfd 0%, #e6ecf5 50%, #e6ecf5 100%) repeat scroll 0 0;
    width: calc(100% - 3px);
}
.bottom-gradient-light.left::after {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #e6ecf5 0%, #e6ecf5 50%, #fdfdfd 100%) repeat scroll 0 0;
    width: 100%;
    left: 0;
}

.bottom-gradient-gray {
    position: relative;
}

.bottom-gradient-gray::after {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, var(--color-bg-gray) 0%, #e0e0e0 50%, var(--color-bg-gray) 100%) repeat scroll 0 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.verical-gradient-gray {
    position: relative;
}

.verical-gradient-gray::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, var(--color-bg-gray) 0%, #e0e0e0 50%, var(--color-bg-gray) 100%) repeat scroll 0 0;
    content: "";
    height: 100%;
    position: absolute;
    width: 1px;
    bottom: 0;
    left: 0;
}

.verical-gradient-light {
    position: relative;
}

.verical-gradient-light::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fdfdfd 0%, #e6ecf5 50%, #fdfdfd 100%) repeat scroll 0 0;
    content: "";
    height: 100%;
    position: absolute;
    width: 1px;
    bottom: 0;
    left: 0;
}

.scrollbar {
    overflow: overlay !important;
    overscroll-behavior-y: contain;
    /* -webkit-text-fill-color: inherit; */
    /* color: rgb(117 122 149 / 60%); */
}
.scrollbar:hover::-webkit-scrollbar-thumb {
    border-color: rgb(117 122 149 / 85.4%);
}
.scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.scrollbar.thin::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
.scrollbar::-webkit-scrollbar-thumb {    
    border-radius: 2.5px;
    background-clip: padding-box;
    border: 2.5px solid rgb(117 122 149 / 0%);
    transition: all 0.25s ease;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    display: none !important;
}

/** search select **/
.select-icon::after {
    content: "";
    height: 22px;
    width: 22px;
    -webkit-mask: url(../images/material/arrow-select.svg) no-repeat 50% 50%;
    mask: url(../images/material/arrow-select.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--color-gray-2);
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
}
li.option.selected {
    position: relative;
    color: var(--color-black);
    font-weight: normal;
}
li.option.selected::before {
    content: "";
    height: 22px;
    width: 22px;
    -webkit-mask: url(../images/material/check_black_24dp.svg) no-repeat 50% 50%;
    mask: url(../images/material/check_black_24dp.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--color-gray-1);
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
}
.filter-horizontal {
    height: 56px;
}
.select-content li.option[value=""],
.select-content li.option.by-main {
    color: red;
    font-style: italic;
}
.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #fff;
    border-bottom: 50px solid transparent;
}
.ql-editor,
.ql-editor p,
.ql-editor li {
    font-size: 14px;
    line-height: 24px !important;
    color: var(--color-gray-1);
}