create-lupine 1.0.13 → 1.0.15

package/templates/responsive-starter/web/src/styles/global.css

@@ -0,0 +1,2143 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html,
+body,
+div,
+span,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+pre,
+a,
+img,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+applet,
+object,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+blockquote,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 115%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+}
+
+/* line-height=1 means the line-height is the same as the font-size.
+This causes the font to slightly overflow the line (scroll showing).
+*/
+/* body {
+  line-height: 115%;
+} */
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  /* default is content-box */
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  touch-action: none;
+  overflow: hidden;
+}
+
+/* h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.375rem;
+}
+
+h4 {
+  font-size: 1.125rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+} */
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+
+/**
+ * Show the overflow in Edge.
+ */
+
+button,
+input {
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/* lupine.web system */
+.lupine-root {
+  width: 100%;
+  height: 100%;
+}
+
+/* to make this tag as a ghost tag in Lupine.js system */
+fragment {
+  display: contents;
+}
+
+::-webkit-scrollbar {
+  background-color: var(--scrollbar-bg);
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-bg);
+  -webkit-border-radius: 6px;
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-width: 3px 3px 3px 2px;
+  /* min-height: 45px; */
+}
+
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--scrollbar-active-thumb-bg);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* you need to set overflow to auto */
+.no-scrollbar-container {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+.no-scrollbar-container::-webkit-scrollbar {
+  display: none;
+}
+/* -------------------------- */
+
+.row-box > * {
+  display: inline-block;
+  align-self: center;
+}
+
+.row-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+/* grid system */
+:root {
+  --grid-gutter: 1rem;
+}
+
+.d-grid {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.grid-gap {
+  gap: 0.5rem;
+}
+.grid-gap-0 {
+  gap: 0;
+}
+.grid-gap-ss {
+  gap: 0.15rem;
+}
+.grid-gap-s {
+  gap: 0.35rem;
+}
+.grid-gap-m {
+  gap: 0.75rem;
+}
+.grid-gap-l {
+  gap: 1rem;
+}
+.grid-gap-ll {
+  gap: 1.5rem;
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-left: calc(var(--grid-gutter) / -2);
+  margin-right: calc(var(--grid-gutter) / -2);
+}
+
+.row.reverse {
+  flex-direction: row-reverse;
+}
+
+.col {
+  flex: 1;
+}
+
+.col,
+[class*=' col-'],
+[class^='col-'] {
+  margin: calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
+}
+/* for a column with fixed width */
+.col-0 {
+  width: auto;
+}
+
+.col-1 {
+  flex: 0 0 calc((100% / (12 / 1)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 1)) - var(--grid-gutter));
+}
+
+.col-2 {
+  flex: 0 0 calc((100% / (12 / 2)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 2)) - var(--grid-gutter));
+}
+
+.col-3 {
+  flex: 0 0 calc((100% / (12 / 3)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 3)) - var(--grid-gutter));
+}
+
+.col-4 {
+  flex: 0 0 calc((100% / (12 / 4)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 4)) - var(--grid-gutter));
+}
+
+.col-5 {
+  flex: 0 0 calc((100% / (12 / 5)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 5)) - var(--grid-gutter));
+}
+
+.col-6 {
+  flex: 0 0 calc((100% / (12 / 6)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 6)) - var(--grid-gutter));
+}
+
+.col-7 {
+  flex: 0 0 calc((100% / (12 / 7)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 7)) - var(--grid-gutter));
+}
+
+.col-8 {
+  flex: 0 0 calc((100% / (12 / 8)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 8)) - var(--grid-gutter));
+}
+
+.col-9 {
+  flex: 0 0 calc((100% / (12 / 9)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 9)) - var(--grid-gutter));
+}
+
+.col-10 {
+  flex: 0 0 calc((100% / (12 / 10)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 10)) - var(--grid-gutter));
+}
+
+.col-11 {
+  flex: 0 0 calc((100% / (12 / 11)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 11)) - var(--grid-gutter));
+}
+
+.col-12 {
+  flex: 0 0 calc((100% / (12 / 12)) - var(--grid-gutter));
+  max-width: calc((100% / (12 / 12)) - var(--grid-gutter));
+}
+
+.col-full {
+  flex: 1;
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    width: 100%;
+  }
+
+  .col,
+  [class*='col-'],
+  [class^='col-'] {
+    flex: 0 1 100%;
+    max-width: 100%;
+  }
+}
+
+@media screen and (min-width: 991px) {
+  .col-1-md {
+    flex: 0 0 calc((100% / (12 / 1)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 1)) - var(--grid-gutter));
+  }
+
+  .col-2-md {
+    flex: 0 0 calc((100% / (12 / 2)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 2)) - var(--grid-gutter));
+  }
+
+  .col-3-md {
+    flex: 0 0 calc((100% / (12 / 3)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 3)) - var(--grid-gutter));
+  }
+
+  .col-4-md {
+    flex: 0 0 calc((100% / (12 / 4)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 4)) - var(--grid-gutter));
+  }
+
+  .col-5-md {
+    flex: 0 0 calc((100% / (12 / 5)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 5)) - var(--grid-gutter));
+  }
+
+  .col-6-md {
+    flex: 0 0 calc((100% / (12 / 6)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 6)) - var(--grid-gutter));
+  }
+
+  .col-7-md {
+    flex: 0 0 calc((100% / (12 / 7)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 7)) - var(--grid-gutter));
+  }
+
+  .col-8-md {
+    flex: 0 0 calc((100% / (12 / 8)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 8)) - var(--grid-gutter));
+  }
+
+  .col-9-md {
+    flex: 0 0 calc((100% / (12 / 9)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 9)) - var(--grid-gutter));
+  }
+
+  .col-10-md {
+    flex: 0 0 calc((100% / (12 / 10)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 10)) - var(--grid-gutter));
+  }
+
+  .col-11-md {
+    flex: 0 0 calc((100% / (12 / 11)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 11)) - var(--grid-gutter));
+  }
+
+  .col-12-md {
+    flex: 0 0 calc((100% / (12 / 12)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 12)) - var(--grid-gutter));
+  }
+}
+
+@media screen and (min-width: 1399px) {
+  .col-1-lg {
+    flex: 0 0 calc((100% / (12 / 1)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 1)) - var(--grid-gutter));
+  }
+
+  .col-2-lg {
+    flex: 0 0 calc((100% / (12 / 2)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 2)) - var(--grid-gutter));
+  }
+
+  .col-3-lg {
+    flex: 0 0 calc((100% / (12 / 3)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 3)) - var(--grid-gutter));
+  }
+
+  .col-4-lg {
+    flex: 0 0 calc((100% / (12 / 4)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 4)) - var(--grid-gutter));
+  }
+
+  .col-5-lg {
+    flex: 0 0 calc((100% / (12 / 5)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 5)) - var(--grid-gutter));
+  }
+
+  .col-6-lg {
+    flex: 0 0 calc((100% / (12 / 6)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 6)) - var(--grid-gutter));
+  }
+
+  .col-7-lg {
+    flex: 0 0 calc((100% / (12 / 7)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 7)) - var(--grid-gutter));
+  }
+
+  .col-8-lg {
+    flex: 0 0 calc((100% / (12 / 8)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 8)) - var(--grid-gutter));
+  }
+
+  .col-9-lg {
+    flex: 0 0 calc((100% / (12 / 9)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 9)) - var(--grid-gutter));
+  }
+
+  .col-10-lg {
+    flex: 0 0 calc((100% / (12 / 10)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 10)) - var(--grid-gutter));
+  }
+
+  .col-11-lg {
+    flex: 0 0 calc((100% / (12 / 11)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 11)) - var(--grid-gutter));
+  }
+
+  .col-12-lg {
+    flex: 0 0 calc((100% / (12 / 12)) - var(--grid-gutter));
+    max-width: calc((100% / (12 / 12)) - var(--grid-gutter));
+  }
+}
+/* -------------------------- */
+
+body {
+  background-color: var(--primary-bg-color);
+  color: var(--primary-color);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-base);
+}
+
+.safe-area-pt {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
+.safe-area-pb {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.safe-area-pl {
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+}
+
+.safe-area-pr {
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+.safe-area-pall {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+
+.safe-area-mt {
+  margin-top: constant(safe-area-inset-top);
+  margin-top: env(safe-area-inset-top);
+}
+
+.safe-area-mb {
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+}
+
+.safe-area-ml {
+  margin-left: constant(safe-area-inset-left);
+  margin-left: env(safe-area-inset-left);
+}
+
+.safe-area-mr {
+  margin-right: constant(safe-area-inset-right);
+  margin-right: env(safe-area-inset-right);
+}
+.safe-area-mall {
+  margin-top: constant(safe-area-inset-top);
+  margin-top: env(safe-area-inset-top);
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+  margin-left: constant(safe-area-inset-left);
+  margin-left: env(safe-area-inset-left);
+  margin-right: constant(safe-area-inset-right);
+  margin-right: env(safe-area-inset-right);
+}
+
+input.base-css[type='text'],
+input.base-css[type='password'],
+input.base-css[type='email'],
+input.base-css[type='number'],
+input.base-css[type='url'],
+input.base-css[type='search'],
+input.base-css[type='tel'],
+input.base-css[type='date'],
+input.base-css[type='datetime-local'],
+input.base-css[type='month'],
+input.base-css[type='time'],
+input.base-css[type='week'],
+input.base-css[type='file'],
+input.base-css[type='color'],
+select.base-css,
+textarea.base-css {
+  color: var(--primary-color);
+  background: transparent;
+}
+
+select.base-css option {
+  color: var(--primary-color);
+  background-color: var(--primary-bg-color);
+}
+
+select.base-css option:checked {
+  color: var(--activatable-color-selected);
+  background-color: var(--activatable-bg-color-selected);
+}
+
+input.base-css[type='checkbox'],
+input.base-css[type='radio'] {
+  position: relative;
+  appearance: none;
+  border: 1px solid;
+  border-color: var(--primary-color);
+  width: 0.9rem;
+  height: 0.9rem;
+  transition: all 0.3s;
+  box-shadow: var(--input-box-shadow);
+}
+
+input.base-css[type='checkbox']::after,
+input.base-css[type='radio']::after {
+  content: '';
+  position: absolute;
+  display: none;
+}
+
+input.base-css[type='checkbox']:checked::after,
+input.base-css[type='radio']:checked::after {
+  display: inline-block;
+}
+
+input.base-css[type='radio']::after,
+input.base-css[type='radio'] {
+  border-radius: 50%;
+}
+
+input.base-css[type='radio']:checked::after {
+  top: 50%;
+  left: 50%;
+  height: 0;
+  width: 0;
+  border: 3px solid var(--primary-color);
+  margin: -3px 0 0 -3px;
+}
+
+input.base-css[type='checkbox']:checked::after {
+  left: 4px;
+  top: 0px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--primary-color);
+  border-width: 0 2px 3px 0;
+  transform: rotate(45deg);
+}
+
+input.base-css[type='text'][readonly='true']::placeholder,
+input.base-css[type='text'][disabled='true']::placeholder {
+  opacity: 0.4;
+  /* filter: blur(.9px); */
+  /* text-shadow: 0 2px 4px rgba(0, 0, 0, .5); */
+}
+
+.input-base {
+  line-height: 1.1;
+  height: var(--input-height);
+  padding: var(--input-padding);
+  border: var(--primary-border);
+  border-radius: var(--border-radius-m);
+  transition: all 0.3s;
+  box-shadow: var(--input-box-shadow);
+  color: var(--input-color);
+  background-color: var(--input-bg-color);
+}
+
+.input-base:focus {
+  border: var(--input-border-focus);
+  outline: 0;
+}
+
+.button-base {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.1;
+  height: var(--button-height);
+  cursor: pointer;
+  transition: all 0.3s;
+  border-radius: var(--border-radius-m);
+  vertical-align: baseline;
+  border: var(--button-border);
+  padding: var(--button-padding);
+  color: var(--button-color);
+  background: var(--button-bg);
+  box-shadow: var(--button-box-shadow);
+}
+
+.button-base:not(:disabled):hover {
+  /* filter: brightness(95%); */
+  background: var(--button-bg-hover);
+}
+
+.button-base:not(:disabled):active {
+  filter: brightness(85%);
+  background: var(--button-bg-hover);
+}
+
+input.input-base[type='radio'],
+input.input-base[type='checkbox'] {
+  width: 2.1rem;
+  height: 2.1rem;
+  padding: 0;
+  /* accent-color: #0a74c9; */
+  box-shadow: unset;
+  /* opacity: var(--primary-opacity); */
+  position: relative;
+  appearance: none;
+  aspect-ratio: 1;
+  /* background-color: var(--primary-bg-color); */
+  border: 3px solid var(--primary-border-color);
+  border-radius: 6px;
+}
+input.input-base[type='checkbox']:checked {
+  background-color: var(--primary-accent-color);
+}
+input.input-base[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  border: solid var(--primary-bg-color);
+  border-width: 0 4px 4px 0;
+  transform: rotate(35deg);
+  left: 29%;
+  top: 6%;
+  width: 40%;
+  height: 70%;
+}
+input.input-base[type='radio'] {
+  border-radius: 50%;
+}
+input.input-base[type='radio']:checked::after {
+  content: '';
+  position: absolute;
+  left: 10%;
+  top: 10%;
+  width: 80%;
+  height: 80%;
+  border-radius: 50%;
+  background-color: var(--primary-accent-color);
+}
+
+.input-ss {
+  padding: 0.1rem 0.6rem;
+  font-size: 0.65rem;
+  border-radius: 2px;
+  height: auto;
+}
+
+.button-ss {
+  padding: 0.1rem 0.3rem;
+  font-size: 0.65rem;
+  border-radius: 2px;
+  height: auto;
+}
+
+.input-s {
+  padding: 0.2rem 0.6rem;
+  font-size: 0.85rem;
+  border-radius: 3px;
+  height: auto;
+}
+
+.button-s {
+  padding: 0.2rem 0.6rem;
+  font-size: 0.85rem;
+  border-radius: 3px;
+  height: auto;
+}
+
+.input-l {
+  padding: 0.4rem 0.6rem;
+  font-size: 1.5rem;
+  border-radius: 6px;
+  height: auto;
+}
+
+.button-l {
+  padding: 0.4rem 1.2rem;
+  font-size: 1.5rem;
+  border-radius: 6px;
+  height: auto;
+}
+
+.input-ll {
+  padding: 0.5rem 0.6rem;
+  font-size: 2rem;
+  border-radius: 10px;
+  height: auto;
+}
+
+.button-ll {
+  padding: 0.5rem 1.5rem;
+  font-size: 2rem;
+  border-radius: 10px;
+  height: auto;
+}
+
+label.input-label {
+  display: flex;
+  align-items: center;
+  column-gap: 0.2rem;
+}
+
+.label-ss {
+  font-size: 0.65rem;
+}
+
+.label-s {
+  font-size: 0.85rem;
+}
+
+.label-l {
+  font-size: 1.5rem;
+}
+
+.label-ll {
+  font-size: 2rem;
+}
+
+input.input-base.input-ss[type='radio'],
+input.input-base.input-ss[type='checkbox'] {
+  width: 1rem;
+  height: 1rem;
+  border-width: 1px;
+}
+input.input-base.input-ss[type='checkbox']:checked::after {
+  border-width: 0 2px 2px 0;
+}
+input.input-base.input-ss[type='radio']:checked::after {
+  left: 12%;
+}
+
+input.input-base.input-s[type='radio'],
+input.input-base.input-s[type='checkbox'] {
+  width: 1.4rem;
+  height: 1.4rem;
+  border-width: 2px;
+}
+input.input-base.input-s[type='checkbox']:checked::after {
+  border-width: 0 3px 3px 0;
+}
+
+input.input-base.input-l[type='radio'],
+input.input-base.input-l[type='checkbox'] {
+  width: 2.6rem;
+  height: 2.6rem;
+}
+
+input.input-base.input-ll[type='radio'],
+input.input-base.input-ll[type='checkbox'] {
+  width: 3.3rem;
+  height: 3.3rem;
+}
+
+/* checkbox and radio don't have readonly attribute. and ".disabled" should be behind */
+/* input.base-css[type="checkbox"]:disabled,
+input.base-css[type="radio"]:disabled,
+input.base-css[type="checkbox"]:disabled::after,
+input.base-css[type="radio"]:disabled::after,
+input.base-css[type='text'][readonly="true"],
+input.base-css[type='text'][disabled="true"],
+input.base-css[type='button']:disabled,
+input.base-css[type='button'][disabled],
+input.base-css[type='button'][disabled="true"],
+button.base-css:disabled,
+button.base-css[disabled],
+button.base-css[disabled="true"],
+.base-css.disabled, */
+input.input-base[type='checkbox']:disabled,
+input.input-base[type='radio']:disabled,
+input.input-base[type='checkbox']:disabled::after,
+input.input-base[type='radio']:disabled::after,
+input.input-base[type='text'][readonly='true'],
+input.input-base[type='text'][disabled='true'],
+input.input-base[type='button']:disabled,
+input.input-base[type='button'][disabled],
+input.input-base[type='button'][disabled='true'],
+.input-base.disabled,
+select.input-base[disabled='true'],
+button.button-base:disabled,
+button.button-base[disabled],
+button.button-base[disabled='true'],
+.button-base.disabled,
+.input-label.disabled {
+  color: var(--primary-color-disabled);
+  border-color: var(--primary-color-disabled);
+  opacity: var(--primary-disabled-opacity);
+  cursor: not-allowed;
+}
+
+button.input-base:disabled,
+button.input-base[disabled],
+button.input-base[disabled='true'],
+.input-base.disabled {
+  color: var(--primary-color-disabled);
+  border-color: var(--primary-color-disabled);
+}
+
+/* for inputs with a border and label */
+.input-field {
+  position: relative;
+  margin: 20px 0;
+}
+
+.input-field input,
+.input-field textarea {
+  display: inline-block;
+  padding: 26px;
+}
+
+.input-field span {
+  color: #aaa;
+  position: absolute;
+  pointer-events: none;
+  left: 10px;
+  top: 20px;
+  transition: 0.3s;
+}
+
+.input-field input:focus + span,
+.input-field input:not(:placeholder-shown) + span,
+.input-field textarea:focus + span,
+.input-field textarea:not(:placeholder-shown) + span {
+  top: -6px;
+  left: 10px;
+  font-size: small;
+  background-color: var(--primary-bg-color);
+  padding: 0 5px 0 5px;
+}
+
+.input-field input:focus:invalid + span,
+.input-field input:not(:placeholder-shown):invalid + span,
+.input-field textarea:focus:invalid + span,
+.input-field textarea:not(:placeholder-shown):invalid + span {
+  color: red;
+}
+
+.success-text {
+  padding: var(--space-m);
+  color: var(--success-color);
+}
+
+.info-text {
+  padding: var(--space-m);
+  color: var(--info-color);
+}
+
+.warning-text {
+  padding: var(--space-m);
+  color: var(--warning-color);
+}
+
+.error-text {
+  padding: var(--space-m);
+  color: var(--error-color);
+}
+
+.success-bg {
+  padding: var(--space-m);
+  color: var(--notice-color-with-bg);
+  background-color: var(--success-bg-color);
+  border-radius: var(--border-radius-m);
+}
+
+.info-bg {
+  padding: var(--space-m);
+  color: var(--notice-color-with-bg);
+  background-color: var(--info-bg-color);
+  border-radius: var(--border-radius-m);
+}
+
+.warning-bg {
+  padding: var(--space-m);
+  color: var(--notice-color-with-bg);
+  background-color: var(--warning-bg-color);
+  border-radius: var(--border-radius-m);
+}
+
+.error-bg {
+  padding: var(--space-m);
+  color: var(--notice-color-with-bg);
+  background-color: var(--error-bg-color);
+  border-radius: var(--border-radius-m);
+}
+
+.page-title {
+  font-size: var(--font-size-title);
+}
+
+.page-subtitle {
+  font-size: var(--font-size-subtitle);
+}
+
+.page-paragraph {
+  font-size: var(--font-size-paragraph);
+}
+
+.page-paragraph-s {
+  font-size: var(--font-size-paragraph-s);
+}
+
+.h1-l {
+  margin-block: 0px;
+  font-size: var(--font-size-h1-l);
+}
+
+h1,
+.h1 {
+  margin-block: 0px;
+  font-size: var(--font-size-h1);
+}
+
+h2,
+.h2 {
+  font-size: var(--font-size-h2);
+}
+
+h3,
+.h3 {
+  font-size: var(--font-size-h3);
+}
+
+.h3-5 {
+  font-size: var(--font-size-h3-5);
+}
+
+h4,
+.h4 {
+  font-size: var(--font-size-h4);
+}
+
+.h4-5 {
+  font-size: var(--font-size-h4-5);
+}
+
+h5,
+.h5 {
+  font-size: var(--font-size-h5);
+}
+
+h6,
+.h6 {
+  font-size: var(--font-size-h6);
+}
+
+.h6-s {
+  font-size: var(--font-size-h6-s);
+}
+
+.break-all {
+  word-break: break-all;
+  overflow-wrap: break-word;
+  line-break: anywhere;
+}
+
+.border {
+  border: var(--primary-border);
+}
+
+.b-top {
+  border-top: solid 1px var(--primary-border-color);
+}
+
+.b-right {
+  border-right: solid 1px var(--primary-border-color);
+}
+
+.b-bottom {
+  border-bottom: solid 1px var(--primary-border-color);
+}
+
+.b-left {
+  border-left: solid 1px var(--primary-border-color);
+}
+
+.b-radius-s {
+  border-radius: var(--border-radius-s);
+}
+
+.b-radius-m {
+  border-radius: var(--border-radius-m);
+}
+
+.b-radius-l {
+  border-radius: var(--border-radius-l);
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.no-underline {
+  text-decoration: none;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.ellipsis,
+.ellipsis-1rows {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellipsis-2rows {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.ellipsis-3rows {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.ellipsis-4rows {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.ellipsis-6rows {
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  line-clamp: 6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
+.align-baseline {
+  vertical-align: baseline;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.m-ss {
+  margin: var(--space-ss);
+}
+
+.mt-ss {
+  margin-top: var(--space-ss);
+}
+
+.mr-ss {
+  margin-right: var(--space-ss);
+}
+
+.mb-ss {
+  margin-bottom: var(--space-ss);
+}
+
+.ml-ss {
+  margin-left: var(--space-ss);
+}
+
+.mx-ss {
+  margin-left: var(--space-ss);
+  margin-right: var(--space-ss);
+}
+
+.my-ss {
+  margin-top: var(--space-ss);
+  margin-bottom: var(--space-ss);
+}
+
+.m-s {
+  margin: var(--space-s);
+}
+
+.mt-s {
+  margin-top: var(--space-s);
+}
+
+.mr-s {
+  margin-right: var(--space-s);
+}
+
+.mb-s {
+  margin-bottom: var(--space-s);
+}
+
+.ml-s {
+  margin-left: var(--space-s);
+}
+
+.mx-s {
+  margin-left: var(--space-s);
+  margin-right: var(--space-s);
+}
+
+.my-s {
+  margin-top: var(--space-s);
+  margin-bottom: var(--space-s);
+}
+
+.m-m {
+  margin: var(--space-m);
+}
+
+.mt-m {
+  margin-top: var(--space-m);
+}
+
+.mr-m {
+  margin-right: var(--space-m);
+}
+
+.mb-m {
+  margin-bottom: var(--space-m);
+}
+
+.ml-m {
+  margin-left: var(--space-m);
+}
+
+.mx-m {
+  margin-left: var(--space-m);
+  margin-right: var(--space-m);
+}
+
+.my-m {
+  margin-top: var(--space-m);
+  margin-bottom: var(--space-m);
+}
+
+.m-l {
+  margin: var(--space-l);
+}
+
+.mt-l {
+  margin-top: var(--space-l);
+}
+
+.mr-l {
+  margin-right: var(--space-l);
+}
+
+.mb-l {
+  margin-bottom: var(--space-l);
+}
+
+.ml-l {
+  margin-left: var(--space-l);
+}
+
+.mx-l {
+  margin-left: var(--space-l);
+  margin-right: var(--space-l);
+}
+
+.my-l {
+  margin-top: var(--space-l);
+  margin-bottom: var(--space-l);
+}
+
+.m-ll {
+  margin: var(--space-ll);
+}
+
+.mt-ll {
+  margin-top: var(--space-ll);
+}
+
+.mr-ll {
+  margin-right: var(--space-ll);
+}
+
+.mb-ll {
+  margin-bottom: var(--space-ll);
+}
+
+.ml-ll {
+  margin-left: var(--space-ll);
+}
+
+.mx-ll {
+  margin-left: var(--space-ll);
+  margin-right: var(--space-ll);
+}
+
+.my-ll {
+  margin-top: var(--space-ll);
+  margin-bottom: var(--space-ll);
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.p-ss {
+  padding: var(--space-ss);
+}
+
+.pt-ss {
+  padding-top: var(--space-ss);
+}
+
+.pr-ss {
+  padding-right: var(--space-ss);
+}
+
+.pb-ss {
+  padding-bottom: var(--space-ss);
+}
+
+.pl-ss {
+  padding-left: var(--space-ss);
+}
+
+.py-ss {
+  padding-top: var(--space-ss);
+  padding-bottom: var(--space-ss);
+}
+
+.px-ss {
+  padding-left: var(--space-ss);
+  padding-right: var(--space-ss);
+}
+
+.p-s {
+  padding: var(--space-s);
+}
+
+.pt-s {
+  padding-top: var(--space-s);
+}
+
+.pr-s {
+  padding-right: var(--space-s);
+}
+
+.pb-s {
+  padding-bottom: var(--space-s);
+}
+
+.pl-s {
+  padding-left: var(--space-s);
+}
+
+.py-s {
+  padding-top: var(--space-s);
+  padding-bottom: var(--space-s);
+}
+
+.px-s {
+  padding-left: var(--space-s);
+  padding-right: var(--space-s);
+}
+
+.p-m {
+  padding: var(--space-m);
+}
+
+.pt-m {
+  padding-top: var(--space-m);
+}
+
+.pr-m {
+  padding-right: var(--space-m);
+}
+
+.pb-m {
+  padding-bottom: var(--space-m);
+}
+
+.pl-m {
+  padding-left: var(--space-m);
+}
+
+.py-m {
+  padding-top: var(--space-m);
+  padding-bottom: var(--space-m);
+}
+
+.px-m {
+  padding-left: var(--space-m);
+  padding-right: var(--space-m);
+}
+
+.p-l {
+  padding: var(--space-l);
+}
+
+.pt-l {
+  padding-top: var(--space-l);
+}
+
+.pr-l {
+  padding-right: var(--space-l);
+}
+
+.pb-l {
+  padding-bottom: var(--space-l);
+}
+
+.pl-l {
+  padding-left: var(--space-l);
+}
+
+.py-l {
+  padding-top: var(--space-l);
+  padding-bottom: var(--space-l);
+}
+
+.px-l {
+  padding-left: var(--space-l);
+  padding-right: var(--space-l);
+}
+
+.p-ll {
+  padding: var(--space-ll);
+}
+
+.pt-ll {
+  padding-top: var(--space-ll);
+}
+
+.pr-ll {
+  padding-right: var(--space-ll);
+}
+
+.pb-ll {
+  padding-bottom: var(--space-ll);
+}
+
+.pl-ll {
+  padding-left: var(--space-ll);
+}
+
+.py-ll {
+  padding-top: var(--space-ll);
+  padding-bottom: var(--space-ll);
+}
+
+.px-ll {
+  padding-left: var(--space-ll);
+  padding-right: var(--space-ll);
+}
+
+.w-25p {
+  width: 25%;
+}
+.w-75p {
+  width: 75%;
+}
+
+.w-33p {
+  width: 33.333%;
+}
+.w-77p {
+  width: 77.777%;
+}
+
+.w-50p {
+  width: 50%;
+}
+
+.w-100p {
+  width: 100%;
+}
+.w-auto {
+  width: auto;
+}
+
+.h-100p {
+  height: 100%;
+}
+.h-auto {
+  height: auto;
+}
+
+.d-unset {
+  display: unset;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.align-items-center {
+  align-items: center;
+}
+.justify-content-center {
+  justify-content: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+.p-relative {
+  position: relative;
+}
+
+/* .f-wrap {
+  flex-wrap: wrap
+}
+
+.items-start {
+  align-items: flex-start
+}
+
+.items-end {
+  align-items: flex-end
+}
+
+.items-center {
+  align-items: center
+}
+
+.items-baseline {
+  align-items: baseline
+}
+
+.items-stretch {
+  align-items: stretch
+}
+
+.self-start {
+  align-self: flex-start
+}
+
+.self-end {
+  align-self: flex-end
+}
+
+.self-center {
+  align-self: center
+}
+
+.self-baseline {
+  align-self: baseline
+}
+
+.self-stretch {
+  align-self: stretch
+}
+
+.justify-start {
+  justify-content: flex-start
+}
+
+.justify-end {
+  justify-content: flex-end
+}
+
+.justify-center {
+  justify-content: center
+}
+
+.justify-between {
+  justify-content: space-between
+}
+
+.justify-around {
+  justify-content: space-around
+}
+
+.justify-evenly {
+  justify-content: space-evenly
+}
+
+.content-start {
+  align-content: flex-start
+}
+
+.content-end {
+  align-content: flex-end
+}
+
+.content-center {
+  align-content: center
+}
+
+.content-between {
+  align-content: space-between
+}
+
+.content-around {
+  align-content: space-around
+}
+
+.content-stretch {
+  align-content: stretch
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+} */
+
+/* for common coponents */
+
+/* for setting pages */
+.setting-section-group {
+  padding-bottom: 16px;
+}
+.setting-section-title {
+  font-size: 15px;
+  padding: 8px 0;
+}
+.setting-section-block {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: var(--ss-group-bg-color);
+  border-radius: 8px;
+  padding: 4px 8px;
+}
+.setting-section-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 4px;
+  border-bottom: 1px dotted var(--primary-border-color);
+  cursor: pointer;
+}
+.setting-section-item:last-child {
+  border-bottom: none;
+}
+.setting-section-item-text {
+  font-size: 15px;
+}
+.setting-section-item-icon {
+  font-size: 20px;
+  margin-right: 8px;
+}
+.setting-section-item-icon.text {
+  font-size: 11px;
+}
+
+.setting-section-row-btn {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  height: 46px;
+  padding: 10px 20px;
+  border-radius: 10px;
+  color: var(--ss-row-btn-color);
+  background-color: var(--ss-row-btn-bg-color);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.setting-section-row-btn i.ifc-icon {
+  margin: 0 8px;
+  color: var(--ss-row-btn-color);
+  font-size: 26px;
+}
+.setting-section-row-btn.warning,
+.setting-section-row-btn.warning i.ifc-icon {
+  color: var(--ss-row-btn-warn-color);
+}
+/* tips inside button */
+.setting-section-row-btn-tips {
+  color: var(--ss-row-btn-warn-color);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* colors should be after others, so it can overwrite others */
+.color-inherit {
+  color: inherit;
+}
+.color-red {
+  color: red;
+}
+.color-green {
+  color: green;
+}
+.color-blue {
+  color: blue;
+}
+.color-yellow {
+  color: yellow;
+}
+.color-gray {
+  color: gray;
+}
+.color-black {
+  color: black;
+}
+.color-white {
+  color: white;
+}
+
+.back-color-inherit {
+  background-color: inherit;
+}
+.back-color-red {
+  background-color: red;
+}
+.back-color-green {
+  background-color: green;
+}
+.back-color-blue {
+  background-color: blue;
+}
+.back-color-yellow {
+  background-color: yellow;
+}
+.back-color-gray {
+  background-color: gray;
+}
+.back-color-black {
+  background-color: black;
+}
+.back-color-white {
+  background-color: white;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}