shut/src/css/sh.css

Shut UI Framework

/*******************/
/* site defined vars */
/* spacing and layout */
:root {
  --sh-space: 2.4rem;
  --sh-halfspace: 1.2rem;
  --sh-extraspace: 3.6rem;
  --sh-doublespace: 4.8rem;
  --sh-fontface: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --sh-fontface-ar: "Traditional Arabic", tahoma, sans-serif;
  --sh-font-size: 1.4;
  --sh-font-weight-light: 300;
  --sh-font-weight: 400;
  --sh-font-weight-bold: 700;
  --sh-font-weight-medium: 500;
  --sh-text-color: #202020;
  --sh-text-light: #959595;
  --sh-text-lighter: #cccccc;
  --sh-text-dark: #202020;
  --sh-white: #fff;
  --sh-grey-light: #f3f3f3;
  --sh-grey: #999999;
  --sh-grey-dark: #263238;
  --sh-black: #000;
  --sh-linkcolor: #0c00b4;
  --sh-visitedcolor: #800080;
  --sh-altcolor: #048bca;
  --sh-red: #f31109;
  --sh-yellow: #ffc400;
  --sh-green: #57b347;
  --sh-blue: #0097a7;
  --sh-red-light: #f96e69;
  --sh-yellow-light: #ffdc66;
  --sh-green-light: #98d28e;
  --sh-blue-light: #0ee8ff;
  --sh-rowlist-border: #f3f3f3;
  --sh-b-color: #999999;
  --sh-b-dark-color: #263238;
  --sh-modal-index: 1040;
  --sh-modal-margin: 2.4rem;
  --sh-modal-padding: 1.2rem;
  --sh-modal-scrollbar-width: 5px;
  --sh-modal-bg: rgba(0, 0, 0, 0.6);
  --sh-modal-index-10: calc(1040 - 10);
  --sh-btn-hover: rgba(243, 243, 243, 0.5);
  --sh-btn-rev-hover: #0f00e7;
  --sh-btn-bg: #f3f3f3;
  --sh-btn-padding-h: 1.6rem;
  --sh-btn-padding-v: 1.2rem;
  --sh-btn-sm-padding: 0.8rem;
  --sh-radius: 3px;
  --sh-label-radius: 3px;
  --sh-btn-diff-bg: #f31109;
  --sh-label-padding: 0.25rem 0.8rem;
  --sh-mainpad: 2.4rem;
  --sh-box-padding: 1rem;
  --sh-box-border: 1px;
  --sh-list-spacing: 0.7rem;
  --sh-table-th-border-color: #263238;
  --sh-table-td-border-color: #f3f3f3;
  --sh-table-ft-border-color: #263238;
  --sh-table-spaced: 2.4rem;
  --sh-table-half-spaced: 1.2rem;
  --sh-table-striped-bg-color: #f3f3f3;
  --sh-table-th-bg-color: #f3f3f3;
  --sh-htmlFontBase: 62.5%;
  --sh-font-size-print: 80%;
}
/* resetting */
/* CRITICAL BEGIN */
* {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
fieldset,
form,
iframe {
  border: 0;
}
textarea {
  overflow: auto;
  resize: vertical;
}
img {
  border: 0 none;
  user-select: none;
}
form {
  display: inline;
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}
input,
button,
select,
optgroup,
textarea {
  font-family: var(--sh-fontface);
  font-size: inherit;
  line-height: inherit;
}
[tabindex='-1']:focus {
  outline: 0 !important;
}
/* CRITICAL END */
/* Border Radius*/
/* coloring forground */
/* rem */
/* icons*/
@font-face {
  font-family: "shuticons";
  font-display: block;
  src: local("shuticons"), url("../fonts/shuticons.ttf") format("truetype"), url("../fonts/shuticons.woff") format("woff"), url("../fonts/shuticons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "shuticons";
    src: url("../fonts/shuticons.svg#icons") format("svg");
  }
}
.liga,
.symbol:before,
.symbolAfter:after {
  font-family: "shuticons";
  text-transform: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
  font-smooth: always;
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  /* ligatures? */
  content: attr(data-icon);
}
.icon-inline:before {
  margin-inline-end: 2.4rem;
}
/* CRITICAL BEGIN */
.rel {
  position: relative;
}
.l {
  float: inline-start;
}
.r {
  float: inline-end;
}
/* CRITICAL END */
.clear {
  clear: both;
}
.txt-r {
  text-align: end;
}
.txt-c {
  text-align: center;
}
.txt-l {
  text-align: start;
}
.breath,
ul.breathout > li,
ol.breathout > li {
  padding-block-start: 1.2rem;
  padding-block-end: 1.2rem;
}
.spaced,
ul.spacedout > li,
ol.spacedout > li {
  margin-block-end: 2.4rem;
}
.doublespaced,
ul.doubledspacedout > li,
ol.doublespacedout > li {
  margin-block-end: 4.8rem;
}
.rbreath {
  padding-inline-end: 1.2rem;
}
.lbreath {
  padding-inline-start: 1.2rem;
}
.hbreath {
  padding-inline-end: 1.2rem;
  padding-inline-start: 1.2rem;
}
.rpad {
  padding-inline-end: 2.4rem;
}
.lpad {
  padding-inline-start: 2.4rem;
}
.hpad {
  padding-inline-end: 2.4rem;
  padding-inline-start: 2.4rem;
}
.lspace {
  margin-inline-start: 2.4rem;
}
.rspace {
  margin-inline-end: 2.4rem;
}
.hspace {
  margin-inline-start: 2.4rem;
  margin-inline-end: 2.4rem;
}
.padtop {
  padding-block-start: 2.4rem;
  /* to be used only in extreme cases */
}
.spacetop {
  margin-block-start: 2.4rem;
  /* to be used only in extreme cases */
}
.center {
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.lauto {
  margin-inline-start: auto;
}
.rauto {
  margin-inline-end: auto;
}
.text-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrap-break {
  word-wrap: break-word;
}
.wrap-none {
  white-space: nowrap;
}
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.dscroll {
  overflow-x: hidden;
  overflow-y: auto;
}
/*** border bottom, thin and thick ***/
.bthin {
  border-block-end: 1px solid var(--sh-b-color);
  padding-block-end: 2.4rem;
}
.bthin-dark {
  border-block-end: 1px solid var(--sh-b-dark-color);
  padding-block-end: 2.4rem;
}
.bthick {
  border-block-end: 3px solid var(--sh-b-color);
  padding-block-end: 2.4rem;
}
.bthick-dark {
  border-block-end: 3px solid var(--sh-b-dark-color);
  padding-block-end: 2.4rem;
}
.g-bthin > * {
  border-block-end: 1px solid var(--sh-b-color);
  padding-block-end: 2.4rem;
}
.g-bthin-dark > * {
  border-block-end: 1px solid var(--sh-b-dark-color);
  padding-block-end: 2.4rem;
}
.dev {
  display: inline-block !important;
  font-size: 11px !important;
  color: red !important;
  background-color: yellow !important;
}
/* layout */
/* CRITICAL BEGIN */
.page,
.singlepage {
  margin: 0 auto;
  width: 100%;
}
.container {
  padding: var(--sh-mainpad);
}
@media only screen and (min-width: 720px) {
  .page {
    max-width: 720px;
  }
  .singlepage {
    max-width: 600px;
  }
}
@media only screen and (min-width: 960px) {
  .page {
    max-width: 960px;
  }
  .singlepage {
    max-width: 720px;
  }
}
@media only screen and (min-width: 1280px) {
  .page {
    max-width: 1280px;
  }
  .singlepage {
    max-width: 720px;
  }
}
/* CRITICAL END */
/*Basic Card */
.card {
  position: relative;
  display: flex;
}
.card .tail {
  margin-inline-start: auto;
}
.card .corner {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}
.card .corner-bottom {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
}
.card-v {
  flex-direction: column;
}
.card-v .tail-v {
  margin-block-start: auto;
}
.card-btns button {
  margin-inline-end: 1.2rem;
}
.valign-center {
  align-items: center;
}
.valign-top {
  align-items: flex-start;
}
.overflow-hidden {
  overflow: hidden;
}
ul.normal > li,
.normal > ul > li {
  margin-inline-start: 3.6rem;
  list-style-type: disc;
}
ol.normal > li {
  margin-inline-start: 2.4rem;
  list-style-position: outside;
  list-style-type: decimal;
}
/**** nested lists for multiple uls */
ul.nestedlist > li > ul,
div.nestedlist > ul,
ol.nestedlist > li > ol {
  padding-inline-start: 4.8rem;
}
/*Basic list*/
/* listings */
.alist > li {
  padding-block-end: var(--sh-list-spacing);
  margin-block-end: var(--sh-list-spacing);
}
.blist > li {
  border-block-end: 1px solid var(--sh-rowlist-border);
}
.rowlist > li {
  padding-block-end: var(--sh-list-spacing);
  margin-block-end: var(--sh-list-spacing);
}
.rowlist > li {
  border-block-end: 1px solid var(--sh-rowlist-border);
}
/**** comma seperated items */
ul.commalist {
  display: inline;
}
ul.commalist li {
  display: inline-block;
}
ul.commalist li:after {
  content: ", ";
  white-space: pre;
}
ul.commalist li:last-child:after {
  content: "";
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td {
  vertical-align: top;
}
table th {
  text-align: start;
}
table.txt-r th,
table th.txt-r {
  text-align: end;
}
table caption {
  text-align: start;
}
table.tabulated th {
  padding-block-end: 2px;
  border-block-end: 1px solid var(--sh-table-th-border-color);
  font-weight: 700;
}
table.tabulated td {
  padding: 2px 0;
  border-block-end: 1px solid var(--sh-table-td-border-color);
}
table.tabulated tfoot td {
  border-block-start: 2px solid var(--sh-table-ft-border-color);
}
table.spacedout td,
table.spacedout th {
  padding: 2.4rem;
}
table.bordered td,
table.bordered th {
  border: 1px solid var(--sh-table-td-border-color);
}
table.bordered tfoot td {
  border-block-start: 2px solid var(--sh-table-ft-border-color);
}
table.striped tbody tr:nth-child(odd) {
  background-color: var(--sh-table-striped-bg-color);
}
table.rich th,
table.rich td {
  border: 1px solid var(--sh-table-td-border-color);
  padding: var(--sh-table-half-spaced);
}
table.rich th {
  font-weight: var(--sh-font-weight-bold);
  background-color: var(--sh-table-th-bg-color);
  border: 1px solid color-mix(in srgb var(--sh-table-th-border-color), white);
  border-block-end: 2px solid var(--sh-table-th-border-color);
}
table.rich tfoot td {
  border-block-start: 2px solid color-mix(in srgb, var(--sh-table-ft-border-color), white);
  background-color: color-mix(in srgb, var(--sh-table-th-bg-color) 98%, white);
}
.table-h {
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
}
.table-h > table > tbody > tr > td {
  white-space: nowrap;
}
/* CRITICAL BEGIN */
/* affects wrapper and site width */
.w100 {
  width: 100% !important;
}
.row,
.row-spaced {
  display: flex;
  flex-wrap: wrap;
}
.row-spaced {
  justify-content: space-between;
}
.row-gap {
  gap: 2.4rem;
}
.col,
.ucol > li {
  width: 100%;
}
.offset-c-1 {
  margin-inline-start: 8.33333333%;
}
.offset-c-2 {
  margin-inline-start: 16.66666667%;
}
.offset-c-3 {
  margin-inline-start: 25%;
}
.offset-c-4 {
  margin-inline-start: 33.33333333%;
}
.offset-c-5 {
  margin-inline-start: 41.66666667%;
}
.offset-c-6 {
  margin-inline-start: 50%;
}
.offset-c-7 {
  margin-inline-start: 58.33333333%;
}
.offset-c-8 {
  margin-inline-start: 66.66666667%;
}
.offset-c-9 {
  margin-inline-start: 75%;
}
.offset-c-10 {
  margin-inline-start: 83.33333333%;
}
.offset-c-11 {
  margin-inline-start: 91.66666667%;
}
.c-1,
.uc-1 > li {
  width: 8.33333333%;
}
.c-2,
.uc-2 > li {
  width: 16.66666667%;
}
.c-3,
.uc-3 > li {
  width: 25%;
}
.c-4,
.uc-4 > li {
  width: 33.33333333%;
}
.c-5,
.uc-5 > li {
  width: 41.66666667%;
}
.c-6,
.uc-6 > li {
  width: 50%;
}
.c-7,
.uc-7 > li {
  width: 58.33333333%;
}
.c-8,
.uc-8 > li {
  width: 66.66666667%;
}
.c-9,
.uc-9 > li {
  width: 75%;
}
.c-10,
.uc-10 > li {
  width: 83.33333333%;
}
.c-11,
.uc-11 > li {
  width: 91.66666667%;
}
.c-12,
.uc-12 > li {
  width: 100%;
}
.row-spaced > .c-1,
.row-spaced.uc-1 > li {
  width: calc(8.33333333% - 2.4rem/2);
}
.row-spaced > .c-2,
.row-spaced.uc-2 > li {
  width: calc(16.66666667% - 2.4rem/2);
}
.row-spaced > .c-3,
.row-spaced.uc-3 > li {
  width: calc(25% - 2.4rem/2);
}
.row-spaced > .c-4,
.row-spaced.uc-4 > li {
  width: calc(33.33333333% - 2.4rem/2);
}
.row-spaced > .c-5,
.row-spaced.uc-5 > li {
  width: calc(41.66666667% - 2.4rem/2);
}
.row-spaced > .c-6,
.row-spaced.uc-6 > li {
  width: calc(50% - 2.4rem/2);
}
.row-spaced > .c-7,
.row-spaced.uc-7 > li {
  width: calc(58.33333333% - 2.4rem/2);
}
.row-spaced > .c-8,
.row-spaced.uc-8 > li {
  width: calc(66.66666667% - 2.4rem/2);
}
.row-spaced > .c-9,
.row-spaced.uc-9 > li {
  width: calc(75% - 2.4rem/2);
}
.row-spaced > .c-10,
.row-spaced.uc-10 > li {
  width: calc(83.33333333% - 2.4rem/2);
}
.row-spaced > .c-11,
.row-spaced.uc-11 > li {
  width: calc(91.66666667% - 2.4rem/2);
}
.row-spaced > .c-12,
.row-spaced.uc-12 > li {
  width: calc(100% - 2.4rem/2);
}
@media only screen and (min-width: 720px) {
  .offset-md-1 {
    margin-inline-start: 8.33333333%;
  }
  .offset-md-2 {
    margin-inline-start: 16.66666667%;
  }
  .offset-md-3 {
    margin-inline-start: 25%;
  }
  .offset-md-4 {
    margin-inline-start: 33.33333333%;
  }
  .offset-md-5 {
    margin-inline-start: 41.66666667%;
  }
  .offset-md-6 {
    margin-inline-start: 50%;
  }
  .offset-md-7 {
    margin-inline-start: 58.33333333%;
  }
  .offset-md-8 {
    margin-inline-start: 66.66666667%;
  }
  .offset-md-9 {
    margin-inline-start: 75%;
  }
  .offset-md-10 {
    margin-inline-start: 83.33333333%;
  }
  .offset-md-11 {
    margin-inline-start: 91.66666667%;
  }
  .md-1,
  .umd-1 > li {
    width: 8.33333333%;
  }
  .md-2,
  .umd-2 > li {
    width: 16.66666667%;
  }
  .md-3,
  .umd-3 > li {
    width: 25%;
  }
  .md-4,
  .umd-4 > li {
    width: 33.33333333%;
  }
  .md-5,
  .umd-5 > li {
    width: 41.66666667%;
  }
  .md-6,
  .umd-6 > li {
    width: 50%;
  }
  .md-7,
  .umd-7 > li {
    width: 58.33333333%;
  }
  .md-8,
  .umd-8 > li {
    width: 66.66666667%;
  }
  .md-9,
  .umd-9 > li {
    width: 75%;
  }
  .md-10,
  .umd-10 > li {
    width: 83.33333333%;
  }
  .md-11,
  .umd-11 > li {
    width: 91.66666667%;
  }
  .md-12,
  .umd-12 > li {
    width: 100%;
  }
  .row-spaced > .md-1,
  .row-spaced.umd-1 > li {
    width: calc(8.33333333% - 2.4rem/2);
  }
  .row-spaced > .md-2,
  .row-spaced.umd-2 > li {
    width: calc(16.66666667% - 2.4rem/2);
  }
  .row-spaced > .md-3,
  .row-spaced.umd-3 > li {
    width: calc(25% - 2.4rem/2);
  }
  .row-spaced > .md-4,
  .row-spaced.umd-4 > li {
    width: calc(33.33333333% - 2.4rem/2);
  }
  .row-spaced > .md-5,
  .row-spaced.umd-5 > li {
    width: calc(41.66666667% - 2.4rem/2);
  }
  .row-spaced > .md-6,
  .row-spaced.umd-6 > li {
    width: calc(50% - 2.4rem/2);
  }
  .row-spaced > .md-7,
  .row-spaced.umd-7 > li {
    width: calc(58.33333333% - 2.4rem/2);
  }
  .row-spaced > .md-8,
  .row-spaced.umd-8 > li {
    width: calc(66.66666667% - 2.4rem/2);
  }
  .row-spaced > .md-9,
  .row-spaced.umd-9 > li {
    width: calc(75% - 2.4rem/2);
  }
  .row-spaced > .md-10,
  .row-spaced.umd-10 > li {
    width: calc(83.33333333% - 2.4rem/2);
  }
  .row-spaced > .md-11,
  .row-spaced.umd-11 > li {
    width: calc(91.66666667% - 2.4rem/2);
  }
  .row-spaced > .md-12,
  .row-spaced.umd-12 > li {
    width: calc(100% - 2.4rem/2);
  }
}
@media only screen and (min-width: 960px) {
  .offset-lg-1 {
    margin-inline-start: 8.33333333%;
  }
  .offset-lg-2 {
    margin-inline-start: 16.66666667%;
  }
  .offset-lg-3 {
    margin-inline-start: 25%;
  }
  .offset-lg-4 {
    margin-inline-start: 33.33333333%;
  }
  .offset-lg-5 {
    margin-inline-start: 41.66666667%;
  }
  .offset-lg-6 {
    margin-inline-start: 50%;
  }
  .offset-lg-7 {
    margin-inline-start: 58.33333333%;
  }
  .offset-lg-8 {
    margin-inline-start: 66.66666667%;
  }
  .offset-lg-9 {
    margin-inline-start: 75%;
  }
  .offset-lg-10 {
    margin-inline-start: 83.33333333%;
  }
  .offset-lg-11 {
    margin-inline-start: 91.66666667%;
  }
  .lg-1,
  .ulg-1 > li {
    width: 8.33333333%;
  }
  .lg-2,
  .ulg-2 > li {
    width: 16.66666667%;
  }
  .lg-3,
  .ulg-3 > li {
    width: 25%;
  }
  .lg-4,
  .ulg-4 > li {
    width: 33.33333333%;
  }
  .lg-5,
  .ulg-5 > li {
    width: 41.66666667%;
  }
  .lg-6,
  .ulg-6 > li {
    width: 50%;
  }
  .lg-7,
  .ulg-7 > li {
    width: 58.33333333%;
  }
  .lg-8,
  .ulg-8 > li {
    width: 66.66666667%;
  }
  .lg-9,
  .ulg-9 > li {
    width: 75%;
  }
  .lg-10,
  .ulg-10 > li {
    width: 83.33333333%;
  }
  .lg-11,
  .ulg-11 > li {
    width: 91.66666667%;
  }
  .lg-12,
  .ulg-12 > li {
    width: 100%;
  }
  .row-spaced > .lg-1,
  .row-spaced.ulg-1 > li {
    width: calc(8.33333333% - 2.4rem/2);
  }
  .row-spaced > .lg-2,
  .row-spaced.ulg-2 > li {
    width: calc(16.66666667% - 2.4rem/2);
  }
  .row-spaced > .lg-3,
  .row-spaced.ulg-3 > li {
    width: calc(25% - 2.4rem/2);
  }
  .row-spaced > .lg-4,
  .row-spaced.ulg-4 > li {
    width: calc(33.33333333% - 2.4rem/2);
  }
  .row-spaced > .lg-5,
  .row-spaced.ulg-5 > li {
    width: calc(41.66666667% - 2.4rem/2);
  }
  .row-spaced > .lg-6,
  .row-spaced.ulg-6 > li {
    width: calc(50% - 2.4rem/2);
  }
  .row-spaced > .lg-7,
  .row-spaced.ulg-7 > li {
    width: calc(58.33333333% - 2.4rem/2);
  }
  .row-spaced > .lg-8,
  .row-spaced.ulg-8 > li {
    width: calc(66.66666667% - 2.4rem/2);
  }
  .row-spaced > .lg-9,
  .row-spaced.ulg-9 > li {
    width: calc(75% - 2.4rem/2);
  }
  .row-spaced > .lg-10,
  .row-spaced.ulg-10 > li {
    width: calc(83.33333333% - 2.4rem/2);
  }
  .row-spaced > .lg-11,
  .row-spaced.ulg-11 > li {
    width: calc(91.66666667% - 2.4rem/2);
  }
  .row-spaced > .lg-12,
  .row-spaced.ulg-12 > li {
    width: calc(100% - 2.4rem/2);
  }
}
/* CRITICAL END */
/* CRITICAL BEGIN */
.grid {
  display: grid;
}
.grid.spacedout {
  grid-gap: 2.4rem;
}
.g-1 {
  grid-template-columns: 8.33333333% auto;
}
.g-2 {
  grid-template-columns: 16.66666667% auto;
}
.g-3 {
  grid-template-columns: 25% auto;
}
.g-4 {
  grid-template-columns: 33.33333333% auto;
}
.g-5 {
  grid-template-columns: 41.66666667% auto;
}
.g-6 {
  grid-template-columns: 50% auto;
}
.g-7 {
  grid-template-columns: 58.33333333% auto;
}
.g-8 {
  grid-template-columns: 66.66666667% auto;
}
.g-9 {
  grid-template-columns: 75% auto;
}
.g-10 {
  grid-template-columns: 83.33333333% auto;
}
.g-11 {
  grid-template-columns: 91.66666667% auto;
}
@media only screen and (min-width: 720px) {
  .gmd-1 {
    grid-template-columns: 8.33333333% auto;
  }
  .gmd-2 {
    grid-template-columns: 16.66666667% auto;
  }
  .gmd-3 {
    grid-template-columns: 25% auto;
  }
  .gmd-4 {
    grid-template-columns: 33.33333333% auto;
  }
  .gmd-5 {
    grid-template-columns: 41.66666667% auto;
  }
  .gmd-6 {
    grid-template-columns: 50% auto;
  }
  .gmd-7 {
    grid-template-columns: 58.33333333% auto;
  }
  .gmd-8 {
    grid-template-columns: 66.66666667% auto;
  }
  .gmd-9 {
    grid-template-columns: 75% auto;
  }
  .gmd-10 {
    grid-template-columns: 83.33333333% auto;
  }
  .gmd-11 {
    grid-template-columns: 91.66666667% auto;
  }
}
@media only screen and (min-width: 960px) {
  .glg-1 {
    grid-template-columns: 8.33333333% auto;
  }
  .glg-2 {
    grid-template-columns: 16.66666667% auto;
  }
  .glg-3 {
    grid-template-columns: 25% auto;
  }
  .glg-4 {
    grid-template-columns: 33.33333333% auto;
  }
  .glg-5 {
    grid-template-columns: 41.66666667% auto;
  }
  .glg-6 {
    grid-template-columns: 50% auto;
  }
  .glg-7 {
    grid-template-columns: 58.33333333% auto;
  }
  .glg-8 {
    grid-template-columns: 66.66666667% auto;
  }
  .glg-9 {
    grid-template-columns: 75% auto;
  }
  .glg-10 {
    grid-template-columns: 83.33333333% auto;
  }
  .glg-11 {
    grid-template-columns: 91.66666667% auto;
  }
}
/* CRITICAL END */
.row-c {
  container-type: inline-size;
}
.row-c .cc-1,
.row-c.ucc-1 > li {
  width: 8.33333333%;
}
.row-c .cc-2,
.row-c.ucc-2 > li {
  width: 16.66666667%;
}
.row-c .cc-3,
.row-c.ucc-3 > li {
  width: 25%;
}
.row-c .cc-4,
.row-c.ucc-4 > li {
  width: 33.33333333%;
}
.row-c .cc-5,
.row-c.ucc-5 > li {
  width: 41.66666667%;
}
.row-c .cc-6,
.row-c.ucc-6 > li {
  width: 50%;
}
.row-c .cc-7,
.row-c.ucc-7 > li {
  width: 58.33333333%;
}
.row-c .cc-8,
.row-c.ucc-8 > li {
  width: 66.66666667%;
}
.row-c .cc-9,
.row-c.ucc-9 > li {
  width: 75%;
}
.row-c .cc-10,
.row-c.ucc-10 > li {
  width: 83.33333333%;
}
.row-c .cc-11,
.row-c.ucc-11 > li {
  width: 91.66666667%;
}
.row-c .cc-12,
.row-c.ucc-12 > li {
  width: 100%;
}
@container (width > 480px ) {
  .row-c .cxs-1,
  .row-c.ucxs-1 > li {
    width: 8.33333333%;
  }
  .row-c .cxs-2,
  .row-c.ucxs-2 > li {
    width: 16.66666667%;
  }
  .row-c .cxs-3,
  .row-c.ucxs-3 > li {
    width: 25%;
  }
  .row-c .cxs-4,
  .row-c.ucxs-4 > li {
    width: 33.33333333%;
  }
  .row-c .cxs-5,
  .row-c.ucxs-5 > li {
    width: 41.66666667%;
  }
  .row-c .cxs-6,
  .row-c.ucxs-6 > li {
    width: 50%;
  }
  .row-c .cxs-7,
  .row-c.ucxs-7 > li {
    width: 58.33333333%;
  }
  .row-c .cxs-8,
  .row-c.ucxs-8 > li {
    width: 66.66666667%;
  }
  .row-c .cxs-9,
  .row-c.ucxs-9 > li {
    width: 75%;
  }
  .row-c .cxs-10,
  .row-c.ucxs-10 > li {
    width: 83.33333333%;
  }
  .row-c .cxs-11,
  .row-c.ucxs-11 > li {
    width: 91.66666667%;
  }
  .row-c .cxs-12,
  .row-c.ucxs-12 > li {
    width: 100%;
  }
}
@container (width > 720px ) {
  .row-c .cmd-1,
  .row-c.ucmd-1 > li {
    width: 8.33333333%;
  }
  .row-c .cmd-2,
  .row-c.ucmd-2 > li {
    width: 16.66666667%;
  }
  .row-c .cmd-3,
  .row-c.ucmd-3 > li {
    width: 25%;
  }
  .row-c .cmd-4,
  .row-c.ucmd-4 > li {
    width: 33.33333333%;
  }
  .row-c .cmd-5,
  .row-c.ucmd-5 > li {
    width: 41.66666667%;
  }
  .row-c .cmd-6,
  .row-c.ucmd-6 > li {
    width: 50%;
  }
  .row-c .cmd-7,
  .row-c.ucmd-7 > li {
    width: 58.33333333%;
  }
  .row-c .cmd-8,
  .row-c.ucmd-8 > li {
    width: 66.66666667%;
  }
  .row-c .cmd-9,
  .row-c.ucmd-9 > li {
    width: 75%;
  }
  .row-c .cmd-10,
  .row-c.ucmd-10 > li {
    width: 83.33333333%;
  }
  .row-c .cmd-11,
  .row-c.ucmd-11 > li {
    width: 91.66666667%;
  }
  .row-c .cmd-12,
  .row-c.ucmd-12 > li {
    width: 100%;
  }
}
@container (width > 960px ) {
  .row-c .clg-1,
  .row-c.uclg-1 > li {
    width: 8.33333333%;
  }
  .row-c .clg-2,
  .row-c.uclg-2 > li {
    width: 16.66666667%;
  }
  .row-c .clg-3,
  .row-c.uclg-3 > li {
    width: 25%;
  }
  .row-c .clg-4,
  .row-c.uclg-4 > li {
    width: 33.33333333%;
  }
  .row-c .clg-5,
  .row-c.uclg-5 > li {
    width: 41.66666667%;
  }
  .row-c .clg-6,
  .row-c.uclg-6 > li {
    width: 50%;
  }
  .row-c .clg-7,
  .row-c.uclg-7 > li {
    width: 58.33333333%;
  }
  .row-c .clg-8,
  .row-c.uclg-8 > li {
    width: 66.66666667%;
  }
  .row-c .clg-9,
  .row-c.uclg-9 > li {
    width: 75%;
  }
  .row-c .clg-10,
  .row-c.uclg-10 > li {
    width: 83.33333333%;
  }
  .row-c .clg-11,
  .row-c.uclg-11 > li {
    width: 91.66666667%;
  }
  .row-c .clg-12,
  .row-c.uclg-12 > li {
    width: 100%;
  }
}
/* CRITICAL BEGIN */
.h100 {
  height: 100%;
}
.h-1,
.uh-1 > li {
  min-height: 60px;
}
.h-2,
.uh-2 > li {
  min-height: 120px;
}
.h-3,
.uh-3 > li {
  min-height: 180px;
}
.h-4,
.uh-4 > li {
  min-height: 240px;
}
.h-5,
.uh-5 > li {
  min-height: 300px;
}
.h-6,
.uh-6 > li {
  min-height: 360px;
}
.hm-1,
.uhm-1 > li {
  max-height: 60px;
}
.hm-2,
.uhm-2 > li {
  max-height: 120px;
}
.hm-3,
.uhm-3 > li {
  max-height: 180px;
}
.hm-4,
.uhm-4 > li {
  max-height: 240px;
}
.hm-5,
.uhm-5 > li {
  max-height: 300px;
}
.hm-6,
.uhm-6 > li {
  max-height: 360px;
}
/* CRITICAL END */
/* CRITICAL BEGIN */
button {
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
button:focus {
  outline: none;
}
/* CRITICAL END */
.btn,
.btn-rev,
.btn-fake,
.btn-diff {
  padding: var(--sh-btn-padding-v) var(--sh-btn-padding-h);
  display: inline-block;
  transition: background-color 0.3s ease-in-out;
  line-height: 1;
  border-radius: var(--sh-radius);
  text-transform: uppercase;
  font-size: 90%;
  cursor: pointer;
  border: 0;
}
.btn[disabled],
.btn-rev[disabled],
.btn-fake[disabled],
.btn-diff[disabled] {
  opacity: 0.5;
  cursor: default;
}
.btn {
  color: var(--sh-linkcolor);
  background-color: var(--sh-btn-bg);
}
.btn:hover {
  background-color: var(--sh-btn-hover);
  color: var(--sh-linkcolor);
}
.btn-rev {
  color: var(--sh-white);
  background-color: var(--sh-linkcolor);
}
.btn-rev:hover {
  background-color: var(--sh-btn-rev-hover);
  color: var(--sh-white);
}
.btn-fake {
  font-weight: var(--sh-font-weight-bold);
  padding-inline: var(--sh-btn-sm-padding);
}
.btn-fake:hover {
  color: var(--sh-linkcolor);
}
.btn-diff {
  background-color: var(--sh-btn-diff-bg);
  color: #fff;
}
.btn-diff:hover {
  background-color: #910a05;
  color: #fff;
}
.btn-sm {
  padding: var(--sh-btn-sm-padding);
}
.btn-busy[disabled] {
  color: var(--sh-text-light);
  background-color: var(--sh-grey-light);
  background-position: center 82%;
}
.btn-chop {
  margin-inline: calc(-1 * var(--sh-btn-sm-padding));
}
.btn-chop-start {
  margin-inline-start: calc(-1 * var(--sh-btn-sm-padding));
}
.btn-chop-end {
  margin-inline-end: calc(-1 * var(--sh-btn-sm-padding));
}
.box {
  padding: var(--sh-box-padding);
  border-radius: var(--sh-radius);
  position: relative;
}
ul.boxed > li {
  padding: var(--sh-box-padding);
  border-radius: var(--sh-radius);
  position: relative;
}
.box-red {
  background-color: #f31109;
  color: #fff;
}
.box-yellow {
  background-color: #ffc400;
  color: #202020;
}
.box-green {
  background-color: #57b347;
  color: #fff;
}
.box-blue {
  background-color: #0097a7;
  color: #fff;
}
.box-red-light {
  background-color: #f96e69;
  color: #fff;
}
.box-yellow-light {
  background-color: #ffdc66;
  color: #202020;
}
.box-green-light {
  background-color: #98d28e;
  color: #202020;
}
.box-blue-light {
  background-color: #0ee8ff;
  color: #202020;
}
.box-light {
  background-color: #959595;
  color: #fff;
}
.box-lighter {
  background-color: #cccccc;
  color: #202020;
}
.box-grey {
  background-color: #999999;
  color: #fff;
}
.box-grey-light {
  background-color: #f3f3f3;
  color: #202020;
}
.box-grey-dark {
  background-color: #263238;
  color: #fff;
}
.box-white-dark {
  border: 1px solid var(--sh-grey-dark);
  background-color: #fff;
  color: #202020;
}
.box-white-normal {
  border: 1px solid var(--sh-grey);
  background-color: #fff;
  color: #202020;
}
.box-white {
  border: 1px solid var(--sh-grey-light);
}
.box-shadow-none {
  box-shadow: none;
}
.box-shadow-shallow {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}
.box-shadow-normal {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.box-shadow-deep {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.box-shadow-deeper {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.red {
  color: #f31109;
}
.yellow {
  color: #ffc400;
}
.green {
  color: #57b347;
}
.blue {
  color: #0097a7;
}
.red-light {
  color: #f96e69;
}
.yellow-light {
  color: #ffdc66;
}
.green-light {
  color: #98d28e;
}
.blue-light {
  color: #0ee8ff;
}
.light {
  color: #959595;
}
.lighter {
  color: #cccccc;
}
.grey {
  color: #999999;
}
.grey-light {
  color: #f3f3f3;
}
.grey-dark {
  color: #263238;
}
.label {
  padding: var(--sh-label-padding);
  border-radius: var(--sh-label-radius);
  display: inline-block;
}
a.label {
  transition: background-color 0.15s, color 0.15s;
}
.label-red {
  background-color: #f31109;
  color: #fff;
}
a.label-red:hover {
  background-color: #f95650;
  color: #fff;
}
.label-yellow {
  background-color: #ffc400;
  color: #202020;
}
a.label-yellow:hover {
  background-color: #ffd64d;
  color: #202020;
}
.label-green {
  background-color: #57b347;
  color: #fff;
}
a.label-green:hover {
  background-color: #87cb7c;
  color: #202020;
}
.label-blue {
  background-color: #0097a7;
  color: #fff;
}
a.label-blue:hover {
  background-color: #00dcf3;
  color: #202020;
}
.label-red-light {
  background-color: #f96e69;
  color: #fff;
}
a.label-red-light:hover {
  background-color: #fcb5b2;
  color: #202020;
}
.label-yellow-light {
  background-color: #ffdc66;
  color: #202020;
}
a.label-yellow-light:hover {
  background-color: #ffedb3;
  color: #202020;
}
.label-green-light {
  background-color: #98d28e;
  color: #202020;
}
a.label-green-light:hover {
  background-color: #cae8c5;
  color: #202020;
}
.label-blue-light {
  background-color: #0ee8ff;
  color: #202020;
}
a.label-blue-light:hover {
  background-color: #5befff;
  color: #202020;
}
.label-light {
  background-color: #959595;
  color: #fff;
}
a.label-light:hover {
  background-color: #bbbbbb;
  color: #202020;
}
.label-lighter {
  background-color: #cccccc;
  color: #202020;
}
a.label-lighter:hover {
  background-color: #f2f2f2;
  color: #202020;
}
.label-grey {
  background-color: #999999;
  color: #fff;
}
a.label-grey:hover {
  background-color: #bfbfbf;
  color: #202020;
}
.label-grey-light {
  background-color: #f3f3f3;
  color: #202020;
}
a.label-grey-light:hover {
  background-color: #ffffff;
  color: #202020;
}
.label-grey-dark {
  background-color: #263238;
  color: #fff;
}
a.label-grey-dark:hover {
  background-color: #455b66;
  color: #fff;
}
.label-white {
  border: 1px solid var(--sh-grey);
  padding: var(--sh-label-padding);
  border-radius: var(--sh-label-radius);
  display: inline-block;
}
:root {
  --sh-start: -100%;
  --sh-end: 100%;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--sh-modal-index-10);
  background-color: var(--sh-modal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background-color: var(--sh-white);
  z-index: var(--sh-modal-zindex);
  overflow: hidden;
  outline: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background-clip: padding-box;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  max-height: calc(100dvh - var(--sh-modal-margin) * 2);
  width: calc(100dvw - var(--sh-modal-margin) * 2);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sh-modal-padding);
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--sh-modal-padding);
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.modal-body::-webkit-scrollbar {
  width: var(--sh-modal-scrollbar-width);
  height: var(--sh-modal-scrollbar-width);
}
.modal-body::-webkit-scrollbar-button:start:decrement,
.modal-body::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  background-color: transparent;
}
.modal-body::-webkit-scrollbar-track-piece {
  background-color: #f3f3f3;
  border-radius: 0;
  border-end-end-radius: 8px;
  border-end-start-radius: 8px;
}
.modal-body::-webkit-scrollbar-thumb:vertical {
  height: 50px;
  background-color: #263238;
  border-radius: 8px;
}
.modal-body::-webkit-scrollbar-thumb:horizontal {
  width: 50px;
  background-color: #263238;
  border-radius: 8px;
}
.modal-footer {
  padding: var(--sh-modal-padding);
}
.modal-bottom-sheet .modal-overlay {
  align-items: flex-end;
}
.modal-full-height .modal {
  height: calc(100dvh - var(--sh-modal-margin) * 2);
}
.modal-full-screen .modal {
  min-height: 100dvh;
  max-height: 100dvh;
  min-width: 100dvw;
  max-width: 100dvw;
  margin: 0;
}
.modal-half-screen .modal-overlay {
  justify-content: flex-start;
}
.modal-half-screen .modal {
  width: 90dvw;
  min-height: 100dvh;
  max-height: 100dvh;
  margin: 0;
}
.animate.fromstart .modal {
  transform: translateX(var(--sh-start));
  animation: fromstart 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  animation-fill-mode: forwards;
}
.animate.fromend .modal-overlay {
  justify-content: flex-end;
}
.animate.fromend .modal {
  transform: translateX(var(--sh-end));
  animation: fromend 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  animation-fill-mode: forwards;
}
.animate.fromtop .modal {
  transform: translateY(-100%);
  animation: fromtop 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  animation-fill-mode: forwards;
}
.animate.frombottom .modal {
  transform: translateY(100%);
  animation: frombottom 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  animation-fill-mode: forwards;
}
@media only screen and (min-width: 720px) {
  .modal {
    max-width: 720px;
    margin-inline: auto;
  }
  .modal-half-screen .modal {
    width: 50dvw;
  }
}
@keyframes fromstart {
  from {
    transform: translateX(var(--sh-start));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes fromend {
  from {
    transform: translateX(var(--sh-end));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes frombottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes fromtop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
/* font setting */
/* CRITICAL BEGIN */
html {
  font-size: var(--sh-htmlFontBase);
}
body,
textarea,
select,
option,
input {
  font-family: var(--sh-fontface);
  font-size: 1.4rem;
  color: var(--sh-text-color);
}
button {
  font-family: var(--sh-fontface);
}
/* CRITICAL END */
section {
  margin-block-end: 3.6rem;
}
p {
  margin-block-end: 2.4rem;
}
/* font size */
.larger {
  font-size: 4.9rem;
}
.large {
  font-size: 4.2rem;
}
.f1 {
  font-size: 3.5rem;
}
.f2 {
  font-size: 2.8rem;
}
.f3 {
  font-size: 2.45rem;
}
.f4 {
  font-size: 2.1rem;
}
.f5 {
  font-size: 1.75rem;
}
.f6 {
  font-size: 1.4rem;
}
.small {
  font-size: 1.26rem;
}
.smaller {
  font-size: 1.12rem;
}
.weight-light {
  font-weight: 300;
}
@supports (font-variation-settings: "wght"300) {
  .weight-light {
    font-weight: 300;
  }
}
.weight-normal {
  font-weight: 400;
}
@supports (font-variation-settings: "wght"400) {
  .weight-normal {
    font-weight: 400;
  }
}
.weight-medium {
  font-weight: 500;
}
@supports (font-variation-settings: "wght"500) {
  .weight-medium {
    font-weight: 500;
  }
}
.weight-bold {
  font-weight: 700;
}
@supports (font-variation-settings: "wght"700) {
  .weight-bold {
    font-weight: 700;
  }
}
.face-italic {
  font-style: italic;
}
/* mixed content*/
/* CRITICAL BEGIN */
.ltr {
  font-family: var(--sh-fontface);
  direction: ltr;
}
.rtl {
  font-family: var(--sh-fontface-ar);
  direction: rtl;
}
/* CRITICAL END */
/* HTML tags redefined */
a,
.a {
  /* mimic a href */
  color: var(--sh-linkcolor);
  text-decoration: none;
  cursor: pointer;
}
/*camoflage a*/
a.cam,
.a.cam,
.cam {
  color: var(--sh-text-color);
  cursor: pointer;
}
a.cam:hover,
.a.cam:hover,
.cam:hover {
  color: var(--sh-linkcolor);
}
a[rel="track"]:visited {
  color: var(--sh-visitedcolor);
}
a:hover,
.a:hover,
a[rel="track"]:hover {
  color: var(--sh-altcolor);
}
.normalsize {
  font-size: 1.4rem !important;
  font-family: var(--sh-fontface);
}
.sup {
  font-size: 70%;
  vertical-align: 4px;
}
.del {
  color: var(--sh-text-light);
  text-decoration: line-through;
}
/* CRITICAL BEGIN */
@media only screen and (min-width: 720px) {
  html {
    font-size: 75%;
  }
}
/* CRITICAL END */
/* Print */
@media print {
  body,
  textarea,
  select,
  option,
  input {
    font-size: var(--sh-font-size-print);
    /* assuming default browser to medium 16px */
    color: #000;
  }
  .forprint {
    display: inline-block !important;
  }
  .forscreen {
    display: none !important;
  }
  @page {
    margin: 0.3cm;
  }
  .pagebreak {
    page-break-before: always;
  }
  header,
  footer {
    display: none !important;
  }
  div.container {
    padding-inline-start: 0 !important;
    width: auto;
  }
  a,
  .a {
    color: #333;
  }
}
.forprint {
  display: none;
}
.hidden {
  display: none;
}
.dflex {
  display: flex;
}
.dinline {
  display: inline-block;
}
.dblock {
  display: block;
}
.md-only {
  display: none;
}
.lg-only {
  display: none;
}