/* base.css */

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  font-family: "Microsoft JhengHei", "Arial", "Helvetica", "Sans-Serif";
  font-size: 15px;
}

html.freeze-everything * {
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html.prevent-scrollbar-width {
  overflow-x: hidden;
  width: 100vw;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0 !important;
  font-weight: 600 !important;
}

.text-maniaj {
  color: #ee87ae;
}

.text-narrow * {
  letter-spacing: -.05em;
}

.text-shadow {
  text-shadow: 0 0 3px rgba(0, 0, 0, .25);
}

.bg-gradient-maniaj {
  background-image: linear-gradient(to bottom, #ee87ae, #f2a3bf) !important;
}

.bg-gradient-blue {
  background-image: linear-gradient(to bottom, #7299c1, #a3c0df) !important;
}

textarea:focus,
select:focus,
input:focus,
button:focus,
a:focus {
  -webkit-box-shadow: none !important;
  -ms-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}

a {
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

:-ms-clear { /* for IE & Edge */
  display: none;
}

.material-symbols-outlined {
  font-size: 1.25em;
}

.material-symbols-outlined.filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 20,
    'opsz' 20
}

button:focus,
.btn:focus {
  -webkit-box-shadow: none !important;
  -ms-box-shadow: none !important;
  box-shadow: none !important;
  outline: none;
}

img[loading="lazy"] {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  transition: filter .5s ease-in;
}

img[loading="lazy"].loaded {
  filter: blur();
  -webkit-filter: blur();
}

/*** custom checkboxes ***/
input[name="item_select"] {
  display: none;
} /* to hide the checkbox itself */

input[name="item_select"] + label {
  font-family: 'Material Symbols Outlined';
  font-size: 2.75em;
  line-height: 1;
	display: flex;
	align-items: center;
	margin: auto .35em;
	padding: 0;
	border: none;
	outline: none;
} /* unchecked icon */

input[name="item_select"] + label::before {
  content: "add_circle";
  background-color: #fefefe;
  clip-path: circle(44%);
} /* unchecked icon */

input[name="item_select"] + label:hover::before {
  color: #3b5998;
  cursor: pointer;
  animation-name: bounceIn;
  animation-duration: .5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

input[name="item_select"]:checked + label::before {
  content: "kid_star";
  color: #3b5998;
  background-color: transparent;
  animation-name: rubberBand;
  animation-duration: .5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  font-variation-settings: 'FILL' 1;
  clip-path: none;
} /* checked icon */

/*tag-new-release::before {
  font-family: 'Material Symbols Outlined';
  font-size: 1.75em !important;
  color: rgba(220, 53, 69, 1) !important;
  line-height: 1;
  margin-top: -.125em;
  display: inline-block;
  vertical-align: middle !important;
  content: "sell";
  font-variation-settings: 'FILL' 1;
}*/

.bg-item-selected {
  /*--bs-table-bg: #fff3cd;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: #000;*/
  border-color: #e6dbb9;
  background-color: #fff3cd;
}

.new-release,
.new-release.narrower {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  /*background-color: rgba(0, 0, 0, .125);*/
}

.new-release > span,
.new-release.narrower > span {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 5em;
  color: #fff;
  font-size: 1.5em;
  font-weight: 600;
  text-align: center;
  transform: rotate(45deg);
  background-color: rgba(220, 53, 69, .85);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.new-release.narrower {
  width: 96px;
  height: 96px;
}

.new-release.narrower > span {
  top: 6px;
  right: -24px;
  width: 8em;
  font-size: 1.125em;
  transform: rotate(40deg);
}

.scroll-shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
  /*box-shadow:
    0 1px 0 0 rgba(0, 0, 0, .24),
    0 3px 0 0 rgba(0, 0, 0, .12),
    0 6px 0 0 rgba(0, 0, 0, .09),
    0 9px 0 0 rgba(0, 0, 0, .06),
    0 12px 0 0 rgba(0, 0, 0, .03);*/
}