@charset "UTF-8";
/*----------------------------------------

    Style definition for hm-app.

    @author HIRANO Satoshi
    @since: 2015/06/12
    @copyright: 2022 AIST, Peace and Passion
    @copyright: 2024 Peace and Passion

------------------------------------------*/
:root {
  /* CAUTION: don't place a blank around ':', or App will fail */
  --default-primary-color:hsl(49 80% 93%);
  --default-primary-active-color:hsl(49 61% 84%);
  --default-accent-color:hsl(191 82% 68%);
  --default-accent-active-color:hsl(191 82% 48%);
  --default-background-color:#ffffff;
  --text-color:rgba(0, 0, 0, 0.87);
  --text-color-light:#42424f;
  --flat-button-color:hsl(213 7% 30%);
  --title-color:var(--flat-button-color);
  --tint-color:#757575;
  --border-color:#e0e0e0;
  --link-color:#039be5;
  --satulation: 87%;
  --buy-hue: 240;
  --sell-hue: 0;
  --get-hue: 200;
  --give-hue:316;
  --buy-color:hsl(var(--buy-hue), var(--satulation), 80%);
  --buy-background-color:hsl(var(--buy-hue), var(--satulation), 80%);
  --sell-color:hsl(var(--sell-hue), var(--satulation), 80%);
  --sell-background-color:hsl(var(--sell-hue), var(--satulation), 80%);
}

html {
  /* Japanese  Mac: "Hiragino Kaku Gothic ProN","Hiragino Sans", iOS:"Hiragino Kaku Gothic ProN","Hiragino Sans"  Android: Noto Sans CJK, Windows: Meiryo (not Yu Gothic UI)

     Latin  Mac: BlinkMacSystemFont, iOS:?  Android: Roboto, Windows: Arial */
  font-family: BlinkMacSystemFont, Roboto, "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans CJK", "メイリオ", "Meiryo", sans-serif;
}

body.fullbleed {
  position: fixed;
  margin: 0;
  height: 100vh; /* not work on iOS */
  width: 100%;
  overflow: hidden; /* inhibit body scrolling */
}

#app-div.fullbleed {
  margin: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden; /* inhibit body scrolling */
}

@media only screen and (min-width: 0) {
  html, body {
    font-size: 14px;
    line-height: 1.74;
  }
}
@media only screen and (min-width: 600px) {
  html, body {
    font-size: 14.5px;
    line-height: 1.84;
  }
}
@media only screen and (min-width: 800px) {
  html, body {
    font-size: 15px;
    line-height: 1.94;
  }
}
/** Light font weight except Android
  because Android has only one weight (400) for Noto Sans CJK.
  Regular (400) is suitalbe to all languages on Android.
*/
/* 300 is too thin on iOS Safari

   body:not(.android) {
     font-weight: 300;
 }*/
b, strong:not(.android) {
  font-weight: 600 !important;
}

.flat-button-color {
  color: var(--flat-button-color) !important;
}

a.btn-flat {
  color: var(--link-color);
}

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

button.btn-flat {
  color: var(--flat-button-color); /* originally 343434 */
}

/*
  menu break point
 */
@media only screen and (max-width: 768px) { /* 768px */
  footer.footer {
    display: none !important;
  }
  .hide-on-768-and-down {
    display: none !important;
  }
}
@media (max-height: 620px) {
  .hide-less-height500 {
    display: none !important;
  }
}
/*
      footer.footer is hidden if
      1. (max-width : 768px),
      2. hide-less-height500 (max-height: 620px)
*/
.show-only-if-no-footer {
  display: none;
}

@media (max-width: 768px), (max-height: 620px) {
  .show-only-if-no-footer {
    display: inline !important;
  }
}
/* .tint-button-color { */
/*     background: #eee !important; */
/*     color: var(--text-color) !important; */
/* } */
/* hide scrollbar on Edge and Chrome on Windows */
.win-edge *::-webkit-scrollbar {
  display: none;
}

/* @media screen and (min-height: 450px) { */
/*     .android .hide-on-short { */
/*         display: none !important; */
/*     } */
/* } */
/* .android footer { */
/*     position: fixed; */
/*     bottom: 47px; */
/*     left: 0px; */
/* } */
.serif {
  font-family: serif !important;
}

h1 {
  color: #212326;
  font-size: 2.5rem !important;
  line-height: 3.4rem !important;
}

h2 {
  color: #212326;
  font-size: 2.2rem !important;
  line-height: 3.2rem !important;
}

h3 {
  color: #212326;
  font-size: 1.9rem !important;
  line-height: 2.5rem !important;
}

h4 {
  color: #212326;
  font-size: 1.7rem !important;
  line-height: 2.3rem !important;
}

h5 {
  color: #212326;
  font-size: 1.5rem !important;
  line-height: 2.2rem !important;
  /* font-weight: 300; */
}

h6 {
  color: #212326;
  font-size: 1.3rem !important;
  line-height: 2rem !important;
  /* font-weight: 300; */
}

h1.title, h2.title {
  margin: 3rem 0 2.6rem 0;
  color: var(--title-color);
}

h3.title {
  margin: 2.1rem 0 1.4rem 0;
  color: var(--title-color);
}

h4.title {
  margin: 1.7rem 0 1.1rem 0;
  color: var(--title-color);
}

h5.title {
  margin: 1.2rem 0 0.7rem 0;
  color: var(--title-color);
}

.condense {
  line-height: 1.2em;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 2.3rem !important;
  }
  h2 {
    font-size: 2rem !important;
  }
  h1.title, h2.title {
    margin: 2.4rem 0 2.2rem 0;
  }
  h3 {
    font-size: 1.7rem !important;
  }
  h3.title {
    margin: 2rem 0 1.3rem 0;
  }
  h4 {
    font-size: 1.3rem !important;
    line-height: 2rem !important;
  }
  h4.title {
    margin: 1.6rem 0 1rem 0;
  }
  h5 {
    font-size: 1.2rem !important;
    line-height: 1.9rem !important;
  }
  h5.title {
    margin: 1.1rem 0 0.7rem 0;
  }
  h6 {
    font-size: 1.15rem !important;
    line-height: 1.6rem !important;
  }
  .condense {
    line-height: 1.1em;
  }
}
.radius16 {
  border-radius: 16px; /* Material Design M3 */
}

.radius12 {
  border-radius: 12px;
}

.radius10 {
  border-radius: 10px;
}

.radius8 {
  border-radius: 8px;
}

.radius4 {
  border-radius: 4px;
}

.radius2 {
  border-radius: 2px;
}

.radius90 {
  border-radius: 90%;
}

.text-color {
  color: var(--text-color) !important;
}

.text-color.active {
  font-weight: 500;
}

.primary-text.active {
  font-weight: 500;
}

.text-color.light {
  color: #42424f !important;
  /* color: #505050; */
}

.tint-color {
  color: var(--tint-color) !important; /* grey-text text-darken-1 */
}

.disabled-color {
  color: #b3b3b3 !important;
}

.buy-color {
  color: var(--buy-color) !important;
}

.buy-background-color {
  background-color: var(--buy-background-color) !important;
}

.sell-color {
  color: var(--sell-color) !important;
}

.sell-background-color {
  background-color: var(--sell-background-color) !important;
}

.white-button {
  color: var(--text-color) !important;
  background-color: white !important;
}

/* always full height as a tool */
/* don't work
:root {
  --ios-gap: 0px;
}

body.fullbleed {
    margin: 0;
    height: calc(100vh - var(--ios-gap));
    overflow: hidden;
}
*/
/* @supports (-webkit-overflow-scrolling: touch) { */
/*     /\* CSS specific to iOS devices *\/ */
/*     /\* always full height as a tool *\/ */
/*     body.fullbleed {     */
/*         margin: 0; */
/*         height: calc(100vh - 32px); */
/*         width: 100%; */
/*         overflow: hidden;  /\* inhibit body scrolling *\/ */
/*     } */
/* } */
/* @supports not (-webkit-overflow-scrolling: touch) { */
/*     /\* CSS for other than iOS devices *\/  */
/*     body.fullbleed {     */
/*         margin: 0; */
/*         height: 100vh;  /\* not work on iOS *\/ */
/*         width: 100%; */
/*         overflow: hidden;  /\* inhibit body scrolling *\/ */
/*     } */
/* } */
/* fix for iOS rendering error */
.ios .scroll-hide-render {
  -webkit-transform: translate3d(0, 0, 0);
  /* https://stackoverrun.com/ja/q/2576629 */
}

.ios .scroll-hide-render * {
  -webkit-transform: translate3d(0, 0, 0);
  /* https://stackoverrun.com/ja/q/2576629 */
}

/* fix Safari to show clear button on search input */
input[type=search]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
  /* Now your own custom styles */
  height: 14px;
  width: 14px;
  display: block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;
  /* icon size */
  background-size: 14px;
}

.page-host {
  /* position: absolute; */
  /* left: 0; */
  /* right: 0; */
  /* top: 50px; */
  /* bottom: 0; */
  /* overflow-x: hidden; */
  /* overflow-y: auto; */
}

section {
  padding-top: 1.8rem;
  padding-bottom: 1.2rem;
  /* margin: 0 20px; */
  /* left: 0; */
  /* right: 0; */
  /* /\* top: 50px; *\/ */
  /* bottom: 0; */
  /* overflow-x: hidden; */
  /* overflow-y: auto; */
}

/* */
/* .btn { */
/*     line-height: 14px !important; */
/* } */
/* Grid layout */
/* for card */
ZZZ.grid-wrap-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 2em;
  /* padding: 0.4em; */
}

/* for text */
.grid-wrap300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 3.3em 2.4em;
}

/* centering */
ZZZ.grid-wrap-container > div {
  overflow: auto;
  height: 100%;
  padding: 3px; /* for shadow */
  /* .flex-center */
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}

/* strech content to the upper div */
ZZZ.grid-wrap-container > div > div {
  width: 100%;
  height: 100%;
  max-width: 450px;
}

ZZZ.grid-wrap-container > div > div .image {
  margin-top: 0.5em;
}

/* Flexbox */
.vertical-layout {
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.horizontal-layout {
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.horizontal-layout-no-height {
  /* height: 100%; */
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flex {
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-basis: auto;
  flex-basis: auto;
  /* -ms-flex: 1 1 0.000000001px; */
  /* -webkit-flex: 1; */
  /* flex: 1; */
  /* -webkit-flex-basis: 0.000000001px; */
  /* flex-basis: 0.000000001px; */
}

.no-flex {
  flex: none;
  -webkit-flex: none;
  -ms-flex: none;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-order0 {
  order: 0;
}

.flex-order1 {
  order: 1;
}

/* left (right in RTL) in a flexbox */
.auto-center {
  margin-right: auto;
  margin-left: auto;
}

.flex-end { /* use auto-right or flex-right. don't use this. */
  margin-left: auto;
  margin-start: auto;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
}

/* right (left in RTL) in a flexbox */
/* .flex-end { */
/*     margin-left: auto; */
/*     margin-start: auto; */
/* } */
.auto-left {
  margin-right: auto;
}

.auto-right {
  margin-left: auto;
}

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

.justfy-right {
  justfy-self: right;
}

.jumbo-container {
  margin: 0 auto;
  max-width: 1280px;
  width: 96%;
}

.jumbo-container.narrow {
  width: 90%;
}

@media only screen and (min-width: 601px) {
  .jumbo-container {
    width: 90%;
  }
}
@media only screen and (min-width: 993px) {
  .jumbo-container {
    width: 85%;
  }
}
/** Horizontal and vertical centering. Add this to the parent div. */
.flex-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}

/** Horizontal centering. Add this to the parent div. */
.flex-horizontal-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
}

/** Vertical centering. Add this to the parent div. */
.flex-vertical-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top0 {
  top: 0;
}

.right0 {
  right: 0;
}

.bottom0 {
  bottom: 0;
}

.vertical-middle, .vertical-middle-align {
  vertical-align: middle;
}

.illust {
  border-radius: 8px;
  object-fit: contain;
}

.card-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}

.card-container-center {
  justify-content: center;
}

.card-panel:hover:not(.active-card) {
  background-color: #e0e0ff !important;
}

/* hoverable remove button for cald-panels */
.card-panel .hover-icon {
  display: none;
}

.card-panel .hover-icon {
  /*XXX .card-panel:hover .hover-icon,.card-panel .hover-icon.hover { */
  display: inline;
}

.active-card {
  color: #ffffff !important;
  background-color: #b0b0ff !important;
}

.vertical-center {
  vertical-align: middle;
}

.vertical-center-block {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.horizontal-center-block {
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hv-center-block {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}

.scrollable {
  overflow-x: auto !important;
  /* overflow-y: scroll; */
  /* overflow-y: hidden !important; */
  overflow-y: auto !important;
  /* overflow-y: scroll !important; */
  /* height: 100vh; */
  -webkit-overflow-scrolling: touch;
}

.scrollable-x {
  overflow-x: auto !important;
  /* overflow-y: hidden !important; */
  -webkit-overflow-scrolling: touch;
}

.scrollable-y {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.no-scroll {
  overflow: hidden;
}

.full-height {
  height: 100% !important;
}

.full-height-desktop-only {
  height: 100%;
}

@media only screen and (max-width: 600px) {
  .full-height-desktop-only {
    height: unset !important;
  }
}
.full-width {
  width: 100% !important;
}

.no-width {
  width: unset;
}

.padding-16 {
  padding: 16px;
}

.padding-1rem {
  padding: 1rem;
}

.padding-1-1rem {
  padding: 1.1rem;
}

.padding-2rem {
  padding: 2rem;
}

.padding-side-2rem {
  padding-left: 2rem;
  padding-right: 2rem;
}

.padding-nice {
  padding: 1.4rem;
}

.padding-small {
  padding: 0.2rem;
  border-radius: 2px;
}

.padding-top-bottom-05 {
  padding-top: 0.5rem;
}

.padding-top-bottom-1 {
  padding-top: 1rem;
}

.padding-top-bottom-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.center-auto {
  margin: auto auto;
}

.center-img {
  width: 80%;
  max-width: 260px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.center-nice, video.center-nice, div.center-nice {
  display: block;
  max-width: 500px;
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 801px) {
  img.center-nice.small, video.center-nice.small {
    width: 50%;
  }
}
img.center-wide, video.center-wide {
  display: block;
  max-width: 800px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (max-width: 600px) {
  img.center-wide, video.center-wide {
    width: 90%;
  }
}
section img:not(.no-radius) {
  border-radius: 10px;
}

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

.s15 {
  width: 15%;
}

.s25 {
  width: 25%;
}

.s30 {
  width: 30%;
}

.s40 {
  width: 40%;
}

.s50 {
  width: 50%;
}

.s55 {
  width: 55%;
}

.s66 {
  width: 60%;
}

.s65 {
  width: 65%;
}

.s70 {
  width: 70%;
}

.s80 {
  width: 80%;
}

.s90 {
  width: 90%;
}

.s99 {
  width: 99%;
}

.max-width900 {
  max-width: 900px !important;
}

.max-width800 {
  max-width: 800px !important;
}

.max-width700 {
  max-width: 700px !important;
}

.max-width600 {
  max-width: 600px !important;
}

.max-width500 {
  max-width: 500px !important;
}

.max-width400 {
  max-width: 400px !important;
}

.max-width320 {
  max-width: 320px !important;
}

.max-width300 {
  max-width: 300px !important;
}

.max-width250 {
  max-width: 250px !important;
}

.max-width190 {
  max-width: 190px !important;
}

.max-width130 {
  max-width: 130px !important;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain !important;
}

/* square-image-wrapepr for square size: detect the 'height' from the width */
/*
  <div class="square-image-wrapper full-width">
    <img src="">
  </div>

 */
.square-image-wrapper {
  position: relative;
}

.square-image-wrapper::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.square-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resizeable {
  resize: vertical !important;
}

/* hover-on-fine to show only if hovered in pointer: fine device but always show in mobile device. */
.hover-on-fine {
  display: none;
}

/* hover show in a "pointer: fine" (e.g. mouse) device  */
@media (hover: hover) and (pointer: fine) {
  .hover-on-fine-wrapper:hover .hover-on-fine {
    display: block;
  }
}
/* always show in a touch device */
@media (hover: none) and (pointer: coarse) {
  .hover-on-fine {
    display: block;
  }
}
/* submenu has :hover only if desktop */
@media (hover: hover) and (pointer: fine) {
  .hover-dim:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
/** force display*/
.block-important {
  display: block !important;
}

/***/
@media (pointer: fine) {
  .hide-on-fine {
    display: none;
  }
}
/* check pattern */
.transparent-pattern {
  background: linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%), linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%);
  background-color: #ffffff;
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* enlarge input font size
   reduce space between line and character-counter
*/
.input-field .materialize-textarea {
  font-size: 1em !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  min-height: 6rem;
  padding: 0.8rem;
  /* this uplifts char counter but validation msg
     conflicts with the bottom line
    margin-bottom: 0.1em !important; */
}

/* enlarge input font size
   reduce space between line and character-counter
*/
.input-field input {
  font-size: 1em !important;
  /* margin-bottom: 0.5em !important; */
}

/* enlarge space below character-counter
 */
/* this breaks place of error message */
/* .character-counter { */
/*     margin-bottom: 1.6em !important; */
/* } */
.white-back {
  background-color: #fff;
}

.white-back-important {
  background-color: #fff !important;
}

.fill-height {
  height: 100%; /* 100vh??? */
}

/* .nav-wrapper { */
/*     margin-bottom: 10em !important; */
/* } */
nav-bar + * .col.fill-height,
nav-bar + *.col.fill-height {
  padding-top: 63px;
}

/* Top app bar (navbar)
   Make its height depending on screen height, rather than screen width which is defined in the Materialize CSS. */
@media only screen and (max-height: 800px) {
  #app-body nav.nav-extended .nav-wrapper {
    min-height: 56px !important;
  }
  #app-body nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    height: 56px !important;
    line-height: 56px !important;
  }
  #app-body .navbar-fixed {
    height: 56px !important;
  }
}
@media only screen and (min-height: 801px) {
  #app-body nav.nav-extended .nav-wrapper {
    min-height: 64px !important;
  }
  #app-body nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    height: 64px !important;
    line-height: 64px !important;
  }
  #app-body .navbar-fixed {
    height: 64px !important;
  }
}
.bottom-space {
  margin-bottom: 0.6em !important;
}

.bottom-space.large {
  margin-bottom: 1.2em !important;
}

.top-space {
  margin-top: 0.6em !important;
}

.top-largespace {
  margin-top: 0.8em !important;
}

.top-bottom-space {
  margin-top: 0.6em !important;
  margin-bottom: 0.6em !important;
}

.small-vspace {
  height: 1em !important;
}

.vspace {
  height: 1.6em !important;
}

.large-vspace {
  height: 3em !important;
}

.largelarge-vspace {
  height: 3.8em !important;
}

@media only screen and (max-width: 600px) {
  .small-vspace {
    height: 0.8em !important;
  }
  .large-vspace {
    height: 2.2em !important;
  }
  .largelarge-vspace {
    height: 3em !important;
  }
}
.material-icons.smallsmall {
  font-size: 1.5rem;
}

.land-icons {
  font-size: 24px;
}

.land-icons.smallsmall {
  font-size: 1.3rem;
}

.mini-text {
  font-size: 92% !important;
}

.small-text {
  font-size: 85% !important;
}

.smallsmall-text {
  font-size: 70% !important;
}

.large-text {
  font-size: 110% !important;
  /* font-weight: 300; */
}

.largelarge-text {
  font-size: 125% !important;
  /* font-weight: 300; */
}

.italic {
  font-style: italic;
}

.no-top-margin {
  margin-top: 0 !important;
}

.no-top-padding {
  padding-top: 0 !important;
}

.no-bottom-padding {
  padding-bottom: 0 !important;
}

.no-bottom-margin {
  margin-bottom: 0 !important;
}

.sparse-little li {
  margin-bottom: 0.3rem;
}

.sparse li {
  margin-bottom: 0.8rem;
}

.sparse.large li {
  margin-bottom: 1rem;
}

.sparse.largelarge li {
  margin-bottom: 3rem;
}

.inline {
  display: inline-block !important;
}

.no-capitalize {
  text-transform: none !important;
}

.shadow {
  -webkit-box-shadow: 0 4px 50px 0 #e8e9eb;
  -moz-box-shadow: 0 4px 50px 0 #e8e9eb;
  box-shadow: 0 4px 50px 0 #e8e9eb;
  transform: translated3d(0, 0, 0);
}

.mirror {
  transform: scale(-1, 1);
}

.bold {
  font-weight: bold;
}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
}

/*
 Gap between panes is 1.0rem. So, we give 0.5rem to each col.

*/
.row .col {
  float: left;
  box-sizing: border-box;
  padding: 0 0.5rem; /* originally 0.75rem in MaterializeCSS */
  min-height: 1px;
}

/* No padding on mobile */
@media only screen and (min-width: 601px) {
  .padding-all-mid-and-up {
    padding: 8px 0.5rem !important;
  }
  .padding-top-bottom-left-mid-and-up {
    padding: 8px 0 8px 0.5rem !important;
  }
}
.list-header {
  width: 100%;
  margin: 0;
  padding-right: 8px;
  border-radius: 0 !important; /* xxx why not work? */
  z-index: 1; /* to hide pull to refresh indicator behind */
}

.list-header .line {
  min-height: 50px;
  line-height: 50px;
  font-size: 1.2em;
  padding-left: 6px;
  padding-right: 2px;
}

.list-header .search-panel {
  padding-bottom: 0.5rem;
}

.list-header .search-panel .comparator {
  display: inline;
  height: 2em !important;
  width: 3em;
  padding: 0 6px !important;
}

.list-header .search-panel .compare-target {
  display: inline;
  height: 2em !important;
  width: 8em;
  margin-bottom: 8px;
}

.list-counter {
  height: 36px !important;
  padding: 2px 7px !important;
  z-index: 1;
}

.list-error {
  min-height: 48px !important;
  padding: 2px 7px !important;
  flex: 0 0 auto;
}

.list-body {
  height: 100%;
}

@media (min-width: 601px) {
  .list-body {
    border-radius: 16px; /* Material Design M3 */
  }
  ux-dialog-container.active .list-body {
    border-radius: unset;
  }
  .entity-body {
    border-radius: 16px; /* Material Design M3 */
  }
  ux-dialog-container.active .entity-body {
    border-radius: unset;
  }
}
.list-icon {
  /* padding-left: 4px; */
  margin-right: 16px;
  /* Don't show up large text until font becomes available */
  max-width: 1.6rem;
  overflow: hidden;
}

.list-icon.disabled {
  color: #a8a8a8;
}

button.list-item {
  background-color: unset;
  border: unset;
  padding: unset;
  text-align: unset;
}

.list-item .title {
  font-size: 1.2rem;
  padding-bottom: 0.3em;
  overflow: hidden;
}

/* .list-row:hover { */
/*     background-color: #ddd; */
/* } */
.list-empty-image {
  font-size: 3.5rem;
  max-width: 3.5rem !important;
  overflow: hidden;
}

.project-list {
  min-width: 220px;
  margin: 0 2px;
  /*     max-width: 400px;*/
}

.right-pane {
  width: 1px;
  /* 'width:1px;' with flex-grow 1 means defalt size is 1px. It forbid children to growing because of window width 100%
     In Chrome 0px works well. In Safari however, 0px may not handling, 1px works well.*/
}

.entity-view {
  position: relative;
}

.entity-view .image {
  max-width: 843px; /* file-view.ts largeImgWidth */
  border-radius: 12px;
}

.entity-header {
  height: 50px;
  line-height: 50px;
  /* margin-top: 4px; */
  margin-bottom: 0px;
  padding: 7px 0.5rem 7px 0.7rem;
}

.entity-header .title, .list-header .title {
  font-size: 1.1rem;
  padding: 0 12px;
  margin-right: 6px;
  font-color: var(--text-color);
  /* padding-left: 1em; */
}

.entity-header .button, .list-header .button, .YYcheck-button {
  min-width: 32px !important;
  /* font-size: 0.9rem; */
  padding: 0 12px !important;
  /* make space for shadow for button such as DONE */
  height: 32px !important;
  line-height: 32px !important;
}

.entity-header .btn-flat.button, .list-header .btn-flat.button {
  text-transform: unset;
  color: var(--flat-button-color);
  /* color: #0264D8 !important;   /\* iOS color *\/ */
  /* background-color: #909090 !important; */
  /* color: white !important; */
  /* border-radius: 4px; */
}

.entity-header .btn-flat.button.done, .list-header .btn-flat.button.done {
  font-weight: 700 !important;
}

.btn, .btn-small, .btn-large {
  border-radius: 9999px !important; /* Material design M3 style round buttons */
}

.btn-flat, .btn-small, .btn-large {
  border-radius: 9999px !important; /* Material design M3 style round buttons */
}

.btn.outlined {
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: unset !important;
  line-height: unset;
  color: var(--text-color);
  box-shadow: unset;
}

.btn.outlined:hover {
  background-color: unset;
}

.entity-header-icon {
  width: 24px;
  margin: 0px 8px 0 0;
  /* Don't show up large text until font becomes available */
  max-width: 24px;
  overflow: hidden;
}

.header-button-icon {
  vertical-align: middle;
  margin-bottom: 4px;
  color: var(--flat-button-color);
}

.add-button-icon {
  /* font-size: 1.5rem !important; */
  font-size: 2.5rem !important;
  max-width: 2.5rem !important; /* Don't show up text until font becomes available */
  overflow: hidden;
  padding-left: 1px;
  /* padding-top: 6px; */
}

.note-frame { /* Summernote */
  border-radius: 8px;
}

.usermenu-D-mark {
  color: white;
  font-style: italic;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  border: 0.8px solid #ffffff;
  border-radius: 2px;
  margin: 0 5px 0 2px;
  padding: 2px 5px 0 2px;
}

.icon-button {
  padding: 0 0 0 18px !important;
  vertical-align: middle;
}

.appbar-button {
  padding: 0 16px 0 16px !important;
  /* color: white; */
  white-space: nowrap;
}

.appbar-button.land-icon {
  padding: 0 8px !important;
}

@media only screen and (max-width: 500px) {
  .appbar-button {
    padding: 0 13px 0 13px !important;
  }
  .appbar-button.land-icon {
    padding: 0 5px !important;
  }
  /* .appbar-menu-button { */
  /*     padding: 0 16px 0 16px !important; */
  /* } */
}
.help-button {
  height: unset !important;
  line-height: initial !important;
  min-width: 32px !important;
  padding: 0 12px !important;
  cursor: pointer;
  text-transform: none !important;
}

.help-button i {
  font-size: 20px;
  vertical-align: middle;
  padding-bottom: 5px;
}

.entity-header .help-button i {
  font-size: 20px;
  vertical-align: bottom;
  padding-bottom: 5px;
  color: var(--flat-button-color) !important;
}

.list-header .help-button i {
  font-size: 20px;
  vertical-align: middle;
  padding-bottom: 4px;
  color: var(--flat-button-color) !important;
}

.material-tooltip {
  color: var(--flat-button-color);
  background: var(--default-background-color);
  max-width: 240px;
  text-align: start;
  border-radius: 5px;
  padding: 0.3rem 0.7rem;
  min-height: unset !important;
}

div.error-panel {
  /* height: 60px; */
  font-size: 1.2em;
  color: #ff0000;
  background-color: #f8f8f8;
  /* padding-right: 16px; */
  /* padding-left: 16px; */
  padding: 10px 16px;
  margin-bottom: 6px;
}

div.error-panel ul {
  margin-block-start: 4px;
  margin-block-end: 4px;
}

.no-margin {
  margin: unset !important;
}

.no-margin-block {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

ul .usage {
  padding-left: 1em !important;
}

.error-msg {
  color: #ff0000;
}

/* ol .usage { */
/*     padding-left: 1em !important; */
/* } */
/* ul.usage li  { */
/*     margin: 0 !important; */
/*     padding: 0 !important; */
/* } */
/* @media only screen and (max-height: 820px) { */
/*   .hide-on-mid-height { */
/*     display: none !important; */
/*   } */
/* } */
/* hide app bar and bottom bar on iPhone X or smaller */
@media only screen and (max-height: 820px) and (max-width: 601px) {
  .hide-on-short-height {
    display: none !important;
  }
}
/* make non clickable tags such as div and tr clicable on iOS Safari */
.ios-clickable {
  cursor: pointer;
}

/* line breaks as a block */
.line-block {
  display: inline-block; /* Treat each span as a block element */
  white-space: normal; /* Allow text wrapping within each span */
}

.logo-color {
  color: hsl(45, 27%, 23%);
  /* color: #4558eb !important; */
  /* color: #473ce0 !important; */
  /* color: #05C900 !important; */
}

.logo-img {
  object-fit: cover;
  border-radius: 50%;
  vertical-align: text-bottom;
}

.passkey-logo {
  width: 2rem;
  vertical-align: middle;
}

/* rotate icon while loading */
.loading-icon {
  animation: rotation 2s infinite linear;
  /* Don't show up large text until font becomes available */
  max-width: 1.6rem;
  overflow: hidden;
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.loading-icon:after {
  content: "filter_vintage";
}

/* with .delay in hm-list and entity-header, show loading icon after 1.5 sec */
.loading-icon.delay {
  opacity: 0;
  animation: rotation 2s infinite linear, showLoading 1.5s forwards;
}

@keyframes showLoading {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.loading-icon.large {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.8rem;
  max-width: unset;
  height: 2.8rem;
  line-height: 2.8rem;
  border-radius: 50%;
  background: rgba(240, 240, 240, 0.85);
  font-size: 2rem;
  padding: unset;
}

.reload-indicator {
  position: absolute;
  padding-top: 40px;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}

.request-status {
  padding: 0.5rem 0;
  border-radius: 6px;
}

.request-status.org-request {
  margin-top: 1.5rem;
}

.request-status .frame {
  position: relative;
  padding: 1.5rem 0.5rem 1.3rem 0.5rem;
  border-radius: 4px;
  border: solid #eaeae0 1px;
}

.request-status .visible-org-label {
  position: absolute;
  top: 0px;
  right: 0.5rem;
}

.request-status .session-cell {
  width: 92%;
  margin: 1rem auto;
  /* margin: 0.2rem 0.8rem 0.4em 0; */
  font-size: 1.2rem;
  overflow: hidden;
  /* width: 188px; */
  padding: 10px 14px;
  min-height: 2em;
  border-radius: 2px;
  border: solid 1px rgba(238, 238, 238, 0.9333333333);
  /* background-color: #eeeeee; */
  color: rgba(0, 0, 0, 0.87);
  /* background: rgba(0, 0, 0, 0); */
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: -webkit-box-shadow 0.25s;
  transition: -webkit-box-shadow 0.25s;
  transition: box-shadow 0.25s;
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
}

.request-status .session-cell .btn {
  margin: 4px 2px;
  /* min-height: 1.8em; */
  color: rgba(0, 0, 0, 0.7) !important;
  background-color: #eeeeee;
  width: 100%;
  max-width: 120px;
}

.request-status .session-cell .btn.active {
  background-color: rgba(83, 185, 209, 0.5647058824) !important;
  color: white !important;
}

.request-status .logo {
  width: 2rem;
  margin-right: 1rem !important;
  border-radius: 4px;
}

.demo-label {
  font-size: 88%;
  color: var(--default-accent-active-color) !important;
}

/* .request-status .session-cell:hover { */
/*   background-color: white; */
/* } */
/* .request-status .session-cell:not(.active):hover { */
/*   background-color: white; */
/* } */
/* .request-status .session-cell .session-cell-right { */
/*   width: 90% !important; */
/*   margin-left: 24px; */
/* } */
/* segmented switch */
.segment-switch {
  display: inline-block;
  white-space: nowrap;
  /* background-color: white; */
  font-size: 1rem;
  cursor: pointer;
  flex: none;
  -webkit-flex: none;
  -ms-flex: none;
}

.segment-switch a {
  color: rgba(0, 0, 0, 0.87);
  padding: 7px 8px;
  cursor: pointer;
  border: 1px solid #cccccc;
}

.segment-switch a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* .segment-switch .active is defined in app.html */
.left-segment {
  border-right-style: none !important;
  /* border-radius: 4px 0 0 4px; */
}

.middle-segment {
  border-right-style: none !important;
  border-radius: 0;
}

.right-segment {
  /* border-radius: 0 4px 4px 0; */
}

@media only screen and (max-width: 600px) {
  .segment-switch a {
    padding: 6px 5px;
  }
}
.button-group {
  overflow-x: hidden;
  padding-right: 2px;
  padding-left: 2px;
}

.button-group.row .col {
  padding: 0 0.2rem !important;
}

.button-group .btn-large {
  padding: 0 10px;
}

.button-group .btn, .button-group .btn-small, .button-group .btn-large {
  border-radius: 9999px;
}

.transparent-55 {
  opacity: 0.55;
}

/* The default width 90% is too narrow. */
.container90 {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

.page-padding {
  padding-left: 1rem;
  padding-right: 1rem;
}

.border-top {
  border-top: 1px solid var(--border-color);
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

/*----------------------------------------
    Horizontal Nav
------------------------------------------*/
#horizontal-nav {
  background: #a2a6b8;
  /* background: #979797; */
}

#horizontal-nav ul li {
  text-align: center;
  min-width: 58px;
}

#horizontal-nav ul li a i {
  height: 0px;
  line-height: 45px;
  font-size: 1.8rem;
}

#horizontal-nav ul li a {
  padding: 0 4px;
}

#horizontal-nav ul li a span {
  position: relative;
  top: 12px;
  font-size: 0.6em;
}

#horizontal-nav .dropdown-menu span i {
  line-height: 65px;
}

.dropdown-horizontal-list li a {
  min-width: 150px;
  text-align: left;
  font-size: 1rem;
  padding: 10px;
}

/* revert accent color in dropdown-content by AMB */
.dropdown-content li > a, .dropdown-content li > span {
  color: var(--flat-button-color) !important;
}

/** override materialize-dropdown for header clear button */
li.dropdown-clear-header {
  min-height: 2rem !important;
}

li.dropdown-clear-header a {
  padding-top: 0.35rem !important;
}

/*----------------------------------------
    Vertical Nav
------------------------------------------*/
#vertical-nav {
  color: #fff;
  background: #a2a6b8;
  /* background: #979eaa; */
  width: 64px;
}

#vertical-nav a {
  color: #fff;
}

nav .nav-wrapper {
  position: relative;
  height: 100%;
}

#vertical-nav ul li {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

#vertical-nav ul li a {
  width: 100%;
  padding: 0 0;
}

#vertical-nav ul li a i {
  justify-content: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 0px;
  line-height: 45px;
  font-size: 1.8rem;
}

#vertical-nav ul li a span {
  position: relative;
  top: 8px;
  font-size: 0.6em;
}

.flash {
  animation: flash 1s step-end infinite alternate;
}

@keyframes flash {
  50% {
    /* background-color: #44ff44; */
    opacity: 0;
  }
}
.flash-button {
  animation: flash-button 1s step-end infinite alternate;
}

@keyframes flash-button {
  50% {
    /* background-color: #44ff44; */
    color: #e57373;
  }
  100% {
    /* background-color: #44ff44; */
    color: white;
  }
}
.flash-slow {
  -webkit-animation: flash-slow 6000ms linear 0s infinite;
  animation: flash-slow 6000ms linear 0s infinite;
}

@-webkit-keyframes flash-slow {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  55% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash-slow {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  55% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.user-accounts {
  width: 70%;
  min-width: 330px;
  padding: 1em 1em 2em 1em;
}

/* .indent { */
/*   padding-left: 30px !important; */
/* } */
.indent {
  margin-left: 2rem !important;
}

.indent.large {
  margin-left: 4rem !important;
}

.margin-top-1rem {
  margin-top: 1rem !important;
}

.margin-left1 {
  margin-left: 1rem !important;
}

.margin-left05 {
  margin-left: 0.5rem !important;
}

.margin-right1 {
  margin-right: 1rem !important;
}

.margin-right05 {
  margin-right: 0.5rem !important;
}

.margin-05 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

/* div .indent { */
/*   padding-left: 3em; */
/* } */
.step-icon {
  font-size: 30px !important;
  max-width: 30px !important;
  margin-left: -6px;
}

div.request-input-dummy {
  width: 60%;
  max-width: 400px;
  height: 120px;
  font-size: 12px;
  margin-left: 70px;
  border: 0.5px solid #303030 !important;
}

/*
 * sidenav menu
 */
.menu-header {
  color: var(--flat-button-color);
  min-height: 50px;
  line-height: 1.2rem;
  z-index: 1;
  padding: 4px 16px 4px 16px;
}

.menu-header .right-button {
  margin: 0 0 0 auto;
}

.menu-header .menu-icon {
  font-size: 24px;
  max-width: 24px !important;
  overflow: hidden;
}

.menu-header span {
  word-break: keep-all;
}

.menu-item {
  position: relative; /* for unread badge */
}

/* #app-body .sidenav li > a > i, #app-body .sidenav li > a > [class^=mdi-], #app-body .sidenav li > a li > a > [class*=mdi-], #app-body .sidenav li > a > i.material-icons { */
/*     color: var(--flat-button-color); */
/* } */
.sidenav li > a {
  line-height: 20px !important;
  padding: 0 16px !important;
  /* vertical center */
  display: -webkit-box;
  display: -webkit-flex !important;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex !important;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.sidenav a > i:not(.menu-header i) {
  margin: 0 14px 0 0 !important;
}

.sidenav a img { /* for land icon in project menu */
  width: 24px;
  margin: 0 14px 0 0;
}

.sidenav ul { /* to shrink line for "help switch project" */
  margin-block-start: 0.5em;
}

.sidenav-help {
  line-height: 2em;
  display: flex;
  justify-content: flex-end;
}

.sidenav-help a {
  font-size: 70%;
  text-transform: capitalize;
  padding: 0 7px;
}

/*
 *   Materialize workaround
 */
/* workaround invalid label position with top: -26px */
body .select-wrapper + label {
  top: 0px;
}

.md-select-label {
  top: -29px !important;
}

/* don't hide border bottom line in search field */
.input-field input[type=search]:focus:not(.browser-default) {
  border-bottom: 1px solid #9e9e9e !important;
}

/* search field on Safari */
[type=search] {
  -webkit-appearance: none !important;
  /* -webkit-appearance: textfield;   by materialize */
}

/* disabled (readonly) radio labels */
[type=radio]:disabled + span {
  color: rgba(0, 0, 0, 0.86) !important; /* rgba(0,0,0,.48) */
}

@media only screen and (max-width: 500px) {
  nav .brand-logo {
    font-size: 1.3rem !important;
  }
  nav .left-brand-logo {
    position: absolute;
    color: #fff;
    display: inline-block;
    font-size: 1rem !important;
    width: 6rem;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}
@media only screen and (min-width: 501px) and (max-width: 600px) {
  nav .brand-logo {
    font-size: 1.3rem !important;
  }
  nav .left-brand-logo {
    position: absolute;
    color: #fff;
    display: inline-block;
    font-size: 1.1rem !important;
    width: 8rem;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}
@media only screen and (min-width: 601px) {
  nav .brand-logo {
    font-size: 1.7rem !important;
  }
  nav .left-brand-logo {
    position: absolute;
    color: #fff;
    display: inline-block;
    font-size: 1.3rem !important;
    white-space: nowrap;
    width: 12rem;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}
[md-tabs] .waves-effect {
  position: static;
}

md-switch.switch label input[type=checkbox]:checked + .lever {
  background-color: #84c7c1 !important;
}

/* background color is set by .*-dialog in app.html */
/* avoid left and right paddings when .s12 on mobile */
/* .btn, .btn-large, */
/* .btn-flat { */
/*   border: none; */
/*   border-radius: 2px; */
/*   display: inline-block; */
/*   /\* height: 36px; *\/ */
/*   min-height: 36px !important; */
/*   height: auto !important; */
/*   /\*this causes labels too upper  *\/ */
/*   /\* line-height: normal !important; *\/ */
/*   padding: 0 2rem; */
/*   /\* text-transform: uppercase; *\/ */
/*   text-transform: none !important; */
/*   vertical-align: middle; */
/*   -webkit-tap-highlight-color: transparent; */
/* } */
#app-body .sidenav li > a.btn-flat {
  color: var(--flat-button-color); /* originally 343434 */
}

.btn-flat:focus {
  /* removed because this causes color to remain */
  /* background-color: #DFDFDF !important; */
}

/*
  flat buttons shouldn't have color when hover. but even flat buttons has secondaryColor when hover by the folloing CSS provided by AM.

  .btn:hover,.btn-small:hover,.btn-large:hover{background-color:${cs.lighten(secondaryColor, 5)}}
 */
.btn-flat:hover {
  background-color: #DFDFDF !important;
}

/* small and two lines button  for small screen.  */
@media only screen and (max-width: 600px) {
  .ZZZbtn, .ZZZbtn-large,
  .ZZZbtn-flat {
    /* padding: 0 0.5em !important; */
    min-height: 36px !important;
    height: auto !important;
    /* line-height: 20px !important; */
  }
}
/* toast on mobile */
@media only screen and (max-width: 600.99px) {
  .toast {
    width: 80% !important;
  }
}
/* make chip thinner */
.chip {
  height: 28px;
  line-height: 28px;
}

/* Fixs conflict between sidenav drag to close and page back on sidenav on Android.
   We no longer have left sidenav, so we don't need .drag-target. */
.drag-target {
  display: none !important;
}

#menu-right-pane {
  /* top submenu */
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

/* page switch used for request and doumo*/
.page-switch {
  height: 36px;
  line-height: 36px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  display: flex;
  white-space: nowrap;
  /* hide scroll bar */
  -ms-overflow-style: none; /*  Edge */
  scrollbar-width: none; /* Firefox */
}

/* hide scroll bar on Safari and Chrome */
.page-switch::-webkit-scrollbar {
  display: none;
}

.page-switch li {
  width: 50%;
  flex: 1 1 0px;
  position: relative;
}

.page-switch .disabled a {
  color: #9f9f9f !important;
  pointer-events: none;
  cursor: default;
}

.page-switch li:hover {
  width: 50%;
  flex: 1 1 0px;
  position: relative;
}

.page-switch a {
  width: 100%;
  text-decoration: none;
  text-align: center;
}

.page-switch a.active {
  color: unset;
  font-weight: 700;
}

/* app.html has border-bottom */
.page-switch a.active:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* .filler { */
/*     flex-grow:1; */
/*     text-align:center; */
/* } */
.sections, .collapsible {
  margin-top: unset !important;
  /* padding-top: 4px !important; */
  box-shadow: unset;
  -webkit-box-shadow: unset;
  border: unset;
}

.collapsible-header {
  color: var(--flat-button-color);
  border-bottom: unset;
  background-color: unset;
}

.collapsible-header-sub {
  font-size: 0.7em;
}

.card, .hf-file-viewer-image-wrapper img {
  border-radius: 12px !important;
  overflow: hidden;
}

.card .card-image img {
  border-radius: 12px !important;
}

.card {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 0.85px 3px 0 rgba(0, 0, 0, 0.5), 0 0.25px 1px 0 rgba(0, 0, 0, 0.039) !important;
}

.sections {
  margin-block-start: 0;
  margin-block-end: 0;
}

.section-header {
  color: var(--flat-button-color);
  border-bottom: unset;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 2rem 0 0.8rem 16px;
}

.section-header i {
  width: 2rem;
  font-size: 1.6rem;
  display: inline-block;
  text-align: center;
  margin-right: 1rem;
}

/*
- Attach <select> to body, Since .section-body and .collapsible-body are clipped with overflow:hidden.

   <select md-select="dropdown-options.bind: { container: 'body' };"
         value.two-way="entity.orgType"
*/
.section-body, #app-body .collapsible-body, ux-dialog-container .collapsible-body {
  padding: 2rem 2rem; /* same as the default */
  border-bottom: unset;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .section-body, #app-body .collapsible-body, ux-dialog-container .collapsible-body {
    padding: 2rem 1rem; /* narrower left/right padding on mobile */
  }
}
.sections .collection {
  margin: 0;
  border: none;
}

.collection {
  padding-top: 16px !important; /* Material Design M3 */
  padding-bottom: 16px !important;
  border: unset;
  border-radius: 0 !important;
  margin: 0;
  overflow-y: auto !important; /* this need for scroll */
  /* resize: vertical !important; */
}

.collection.with-header .collection-item {
  padding-left: 4px;
  cursor: pointer; /* for iOS Safari */
}

.collection .collection-item {
  /* background-color: transparent !important; /\* for background color setting *\/ */
  min-height: 58px !important;
  padding: 14px 16px;
  line-height: unset;
  cursor: pointer; /* for iOS Safari */
  background-color: unset;
  border-bottom: unset;
}

/* collection item divider */
.collection .collection-item:after, .inset-divider:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: #e0e0e0;
}

.collection-vertical-center .collection-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.collection a.collection-item {
  /* to avoid applying accentColor to items in a hm-list  */
  color: unset;
}

.collection .collection-item.active {
  color: inherit !important; /* cancel color in materialize */
}

/* without this, last item lacks bottom line */
/* Used to color list item when a corresponding popup is open on a marker in the area-map.
  The background-color is same as .collapsible-body > ul:not(.collapsible) > li.active
*/
.sections span.badge {
  margin-left: auto;
}

.list-hover:not(.active) {
  background-color: rgba(83, 185, 209, 0.2509803922) !important;
}

.table-header th {
  padding: 3px 4px !important;
  cursor: pointer;
  /* height: 30px  !important; *\/ */
}

tr .table-row {
  cursor: pointer; /* for iOS Safari */
}

.table-row td {
  padding: 8px 4px !important;
  /* height: 30px  !important; *\/ */
}

.radio-space {
  padding-right: 1.8em !important;
  /* padding-left: 1.8em !important; */
}

.radio-space.small {
  padding-right: 1rem !important;
}

.small-text label, .small-text label span, .small-text input {
  font-size: 0.8rem !important;
}

.smallsmall-text label, .smallsmall-text label span, .smallsmall-text input {
  font-size: 0.7rem !important;
}

/* show clear button in search box (removed because DEPRECATED) */
/* input[type=search]::-webkit-search-cancel-button { */
/*     -webkit-appearance: searchfield-cancel-button  !important; */
/* } */
ul .browser-default {
  padding-inline-start: 15px;
}

@page {
  size: 29.7cm 42cm; /* A4 page */
}
/* allow print and PDF to have rows and cols */
@media only print and (max-width: 600px) {
  #app-body .row .col.s1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.offset-s1 {
    margin-left: 8.3333333333%;
  }
  #app-body .row .col.pull-s1 {
    right: 8.3333333333%;
  }
  #app-body .row .col.push-s1 {
    left: 8.3333333333%;
  }
  #app-body .row .col.offset-s2 {
    margin-left: 16.6666666667%;
  }
  #app-body .row .col.pull-s2 {
    right: 16.6666666667%;
  }
  #app-body .row .col.push-s2 {
    left: 16.6666666667%;
  }
  #app-body .row .col.offset-s3 {
    margin-left: 25%;
  }
  #app-body .row .col.pull-s3 {
    right: 25%;
  }
  #app-body .row .col.push-s3 {
    left: 25%;
  }
  #app-body .row .col.offset-s4 {
    margin-left: 33.3333333333%;
  }
  #app-body .row .col.pull-s4 {
    right: 33.3333333333%;
  }
  #app-body .row .col.push-s4 {
    left: 33.3333333333%;
  }
  #app-body .row .col.offset-s5 {
    margin-left: 41.6666666667%;
  }
  #app-body .row .col.pull-s5 {
    right: 41.6666666667%;
  }
  #app-body .row .col.push-s5 {
    left: 41.6666666667%;
  }
  #app-body .row .col.offset-s6 {
    margin-left: 50%;
  }
  #app-body .row .col.pull-s6 {
    right: 50%;
  }
  #app-body .row .col.push-s6 {
    left: 50%;
  }
  #app-body .row .col.offset-s7 {
    margin-left: 58.3333333333%;
  }
  #app-body .row .col.pull-s7 {
    right: 58.3333333333%;
  }
  #app-body .row .col.push-s7 {
    left: 58.3333333333%;
  }
  #app-body .row .col.offset-s8 {
    margin-left: 66.6666666667%;
  }
  #app-body .row .col.pull-s8 {
    right: 66.6666666667%;
  }
  #app-body .row .col.push-s8 {
    left: 66.6666666667%;
  }
  #app-body .row .col.offset-s9 {
    margin-left: 75%;
  }
  #app-body .row .col.pull-s9 {
    right: 75%;
  }
  #app-body .row .col.push-s9 {
    left: 75%;
  }
  #app-body .row .col.offset-s10 {
    margin-left: 83.3333333333%;
  }
  #app-body .row .col.pull-s10 {
    right: 83.3333333333%;
  }
  #app-body .row .col.push-s10 {
    left: 83.3333333333%;
  }
  #app-body .row .col.offset-s11 {
    margin-left: 91.6666666667%;
  }
  #app-body .row .col.pull-s11 {
    right: 91.6666666667%;
  }
  #app-body .row .col.push-s11 {
    left: 91.6666666667%;
  }
  #app-body .row .col.offset-s12 {
    margin-left: 100%;
  }
  #app-body .row .col.pull-s12 {
    right: 100%;
  }
  #app-body .row .col.push-s12 {
    left: 100%;
  }
}
@media only print and (min-width: 601px) {
  #app-body .row .col.m1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.m12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  #app-body .row .col.offset-m1 {
    margin-left: 8.3333333333%;
  }
  #app-body .row .col.pull-m1 {
    right: 8.3333333333%;
  }
  #app-body .row .col.push-m1 {
    left: 8.3333333333%;
  }
  #app-body .row .col.offset-m2 {
    margin-left: 16.6666666667%;
  }
  #app-body .row .col.pull-m2 {
    right: 16.6666666667%;
  }
  #app-body .row .col.push-m2 {
    left: 16.6666666667%;
  }
  #app-body .row .col.offset-m3 {
    margin-left: 25%;
  }
  #app-body .row .col.pull-m3 {
    right: 25%;
  }
  #app-body .row .col.push-m3 {
    left: 25%;
  }
  #app-body .row .col.offset-m4 {
    margin-left: 33.3333333333%;
  }
  #app-body .row .col.pull-m4 {
    right: 33.3333333333%;
  }
  #app-body .row .col.push-m4 {
    left: 33.3333333333%;
  }
  #app-body .row .col.offset-m5 {
    margin-left: 41.6666666667%;
  }
  #app-body .row .col.pull-m5 {
    right: 41.6666666667%;
  }
  #app-body .row .col.push-m5 {
    left: 41.6666666667%;
  }
  #app-body .row .col.offset-m6 {
    margin-left: 50%;
  }
  #app-body .row .col.pull-m6 {
    right: 50%;
  }
  #app-body .row .col.push-m6 {
    left: 50%;
  }
  #app-body .row .col.offset-m7 {
    margin-left: 58.3333333333%;
  }
  #app-body .row .col.pull-m7 {
    right: 58.3333333333%;
  }
  #app-body .row .col.push-m7 {
    left: 58.3333333333%;
  }
  #app-body .row .col.offset-m8 {
    margin-left: 66.6666666667%;
  }
  #app-body .row .col.pull-m8 {
    right: 66.6666666667%;
  }
  #app-body .row .col.push-m8 {
    left: 66.6666666667%;
  }
  #app-body .row .col.offset-m9 {
    margin-left: 75%;
  }
  #app-body .row .col.pull-m9 {
    right: 75%;
  }
  #app-body .row .col.push-m9 {
    left: 75%;
  }
  #app-body .row .col.offset-m10 {
    margin-left: 83.3333333333%;
  }
  #app-body .row .col.pull-m10 {
    right: 83.3333333333%;
  }
  #app-body .row .col.push-m10 {
    left: 83.3333333333%;
  }
  #app-body .row .col.offset-m11 {
    margin-left: 91.6666666667%;
  }
  #app-body .row .col.pull-m11 {
    right: 91.6666666667%;
  }
  #app-body .row .col.push-m11 {
    left: 91.6666666667%;
  }
  #app-body .row .col.offset-m12 {
    margin-left: 100%;
  }
  #app-body .row .col.pull-m12 {
    right: 100%;
  }
  #app-body .row .col.push-m12 {
    left: 100%;
  }
}
@media only print and (max-width: 600px) {
  .hide-on-small-only, .hide-on-small-and-down {
    display: none !important;
  }
}
@media only print and (max-width: 992.99px) {
  .hide-on-med-and-down {
    display: none !important;
  }
}
@media only screen and (max-width: 1200px) {
  .hide-on-large-and-down {
    display: none !important;
  }
}
@media only print and (min-width: 601px) {
  .hide-on-med-and-up {
    display: none !important;
  }
}
@media only print and (min-width: 600px) and (max-width: 992.99px) {
  .hide-on-med-only {
    display: none !important;
  }
}
@media only print and (min-width: 993px) {
  .hide-on-large-only {
    display: none !important;
  }
}
@media only print and (min-width: 1201px) {
  .hide-on-extra-large-only {
    display: none !important;
  }
}
@media only print and (min-width: 1201px) {
  .show-on-extra-large {
    display: block !important;
  }
}
@media only print and (min-width: 993px) {
  .show-on-large {
    display: block !important;
  }
}
@media only print and (min-width: 600px) and (max-width: 992px) {
  .show-on-medium {
    display: block !important;
  }
}
@media only print and (max-width: 600px) {
  .show-on-small {
    display: block !important;
  }
}
@media only print and (min-width: 601px) {
  .show-on-medium-and-up {
    display: block !important;
  }
}
@media only print and (max-width: 992px) {
  .show-on-medium-and-down {
    display: block !important;
  }
}
@media only print and (max-width: 600px) {
  .center-on-small-only {
    text-align: center;
  }
}
.modal {
  border-radius: 24px;
}

/*----------------------------------------
    Dialog
------------------------------------------*/
/* dialog base class with round corner */
.hf-dialog:not(.pseudo-fullscreen), .large-dialog:not(.pseudo-fullscreen), .help-dialog:not(.pseudo-fullscreen), .medium-dialog:not(.pseudo-fullscreen), .small-dialog:not(.pseudo-fullscreen) {
  border-radius: 24px; /* Material Design M3 */
  overflow: hidden; /* clip by border-radius: 24px */
}

/* dialog base classes with transition */
ux-dialog-container .hf-dialog, ux-dialog-container .large-dialog, ux-dialog-container .help-dialog, ux-dialog-container .medium-dialog, ux-dialog-container .small-dialog, ux-dialog-container #video-session-dialog {
  transform: scaleX(0.8) scaleY(0.8);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

ux-dialog-container.active .hf-dialog, ux-dialog-container.active .large-dialog, ux-dialog-container.active .help-dialog, ux-dialog-container.active .medium-dialog, ux-dialog-container.active .small-dialog, ux-dialog-container.active #video-session-dialog {
  transform: scaleX(1) scaleY(1);
  opacity: 1;
}

ux-dialog-container:not(.active) .hf-dialog, ux-dialog-container:not(.active) .large-dialog, ux-dialog-container:not(.active) .help-dialog, ux-dialog-container:not(.active) .medium-dialog, ux-dialog-container:not(.active) .small-dialog, ux-dialog-container:not(.active) #video-session-dialog {
  transform: scaleX(0.8) scaleY(0.8);
  opacity: 0;
}

.small-dialog {
  width: 350px;
  max-width: 400px;
  min-height: 100px !important;
}

.medium-dialog {
  max-width: 500px;
  width: 50vw !important;
  min-width: 340px;
  border-radius: 24px;
  min-height: calc(var(--vh, 1vh) * 40);
  max-height: calc(var(--vh, 1vh) * 80);
}

.help-dialog {
  max-width: 700px;
  width: 70vw !important;
  min-width: 340px;
  min-height: calc(var(--vh, 1vh) * 60);
  max-height: calc(var(--vh, 1vh) * 80);
}

@media only screen and (max-width: 600px) {
  .medium-dialog {
    width: 96vw !important;
  }
  .help-dialog {
    max-width: 700px;
    width: 85vw !important;
    min-height: calc(var(--vh, 1vh) * 60);
    max-height: calc(var(--vh, 1vh) * 80);
  }
}
.help-dialog h5 {
  padding-top: 20px;
}

.height-80vh {
  height: 80vh;
}

.large-dialog-height {
  height: calc(var(--vh, 1vh) * 90);
}

.large-dialog {
  max-width: 1200px;
  width: 90vw;
  min-height: calc(var(--vh, 1vh) * 70);
  max-height: calc(var(--vh, 1vh) * 90);
}

@media only screen and (max-width: 880px) {
  .large-dialog {
    max-width: 700px;
    width: 100vw !important;
    min-height: calc(var(--vh, 1vh) * 70);
    max-height: calc(var(--vh, 1vh) * 90);
  }
}
.full-screen-dialog {
  max-width: 1200px;
  width: 100vw;
  height: 100vh;
}

/* fix dialog height on Android */
/* without this, OK button is hidden. */
/* .android .large-dialog { */
/*     /\* max-height: calc(var(--vh, 1vh)*90); *\/ */
/*     max-height: calc(100vh - 57px) !important; */
/* } */
.no-min-height {
  min-height: auto !important;
}

.dialog-content {
  padding: 24px;
}

.dialog-footer {
  padding: 4px 6px;
  width: 100%;
  height: 48px;
}

/* background of materialbox; same color as luminous */
#materialbox-overlay {
  background: rgba(120, 160, 170, 0.7);
  /* filter: blur(10px); */
}

/* make background dark */
/* although .blur-filter is used mainly, we need this for dialog over dialog */
ux-dialog-overlay.active:not(.ignore-opacity) {
  background-color: black;
  opacity: 0.32 !important;
}

ux-dialog-overlay.ignore-opacity {
  opacity: 0 !important;
}

ux-dialog-container {
  overflow-y: hidden !important;
  /* z-index: 99999 !important; */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* "centering"
     In hf-base.ts-openModalDialog(), centerHorizontalOnly: true.
     With centerHorizontalOnly: false, aurelia calculates top and set margin-top: px directlly.
     It's bad for changing view size after showing dialog.
   */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

ux-dialog-container.top-right-dialog {
  /* width: 360px; */
  /* margin-top: 100px; */
  /* height: 470px; */
  right: 0;
  left: auto;
  background-color: #fafafa;
  overflow-y: auto;
  border-radius: 24px;
  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}

/*
 * blur effects
 */
.blur-filter {
  filter: blur(2px);
  -webkit-filter: blur(2px);
  -ms-filter: blur(2px);
  -moz-filter: blur(2px);
}

.blur1 {
  filter: blur(1px);
  -webkit-filter: blur(1px);
  -ms-filter: blur(1px);
  -moz-filter: blur(1px);
}

.blur2 {
  filter: blur(2px);
  -webkit-filter: blur(2px);
  -ms-filter: blur(2px);
  -moz-filter: blur(2px);
}

.blur3 {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -ms-filter: blur(3px);
  -moz-filter: blur(3px);
}

/*
 * animation effects
 */
.blink {
  -webkit-animation: blink 1200ms linear 0s infinite;
  animation: blink 1200ms linear 0s infinite;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.signup-blink {
  -webkit-animation: signup-blink 3000ms linear 0s infinite;
  animation: signup-blink 3000ms linear 0s infinite;
  animation-delay: 10s;
}

@-webkit-keyframes signup-blink {
  0% {
    background-color: white;
  }
  20% {
    background-color: white;
  }
  40% {
    background-color: #ffcc80;
  }
  50% {
    background-color: #ffcc80;
  }
  60% {
    background-color: white;
  }
  100% {
    background-color: white;
  }
}
@keyframes signup-blink {
  0% {
    background-color: white;
  }
  20% {
    background-color: white;
  }
  40% {
    background-color: #ffcc80;
  }
  60% {
    background-color: #ffcc80;
  }
  80% {
    background-color: white;
  }
  100% {
    background-color: white;
  }
}
.dismiss {
  opacity: 0;
  transition: opacity 0.16s linear;
}

.ease-in {
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.ease-in.slow {
  -webkit-transition: opacity 0.8s ease-in;
  -moz-transition: opacity 0.8s ease-in;
  transition: opacity 0.8s ease-in;
}

.appear {
  -webkit-animation: appear-animation 1.5s;
  animation: appear-animation 1.5s;
}

@keyframes appear-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ease-out {
  -webkit-transition: opacity 0.4s ease-out;
  -moz-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
}

.ease-out .slow {
  -webkit-transition: opacity 0.8s ease-out;
  -moz-transition: opacity 0.8s ease-out;
  transition: opacity 0.8s ease-out;
}

.flush { /* changes size and opacity */
  content: "";
  /* display: block; */
  position: absolute;
  /* width: 100%; */
  height: 100%;
  top: 0;
  left: 64px;
  background-color: inherit;
  border-radius: inherit;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  -webkit-animation: flush-animation 0.7s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  animation: flush-animation 0.7s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes flush-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    opacity: 0.6;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@-webkit-keyframes flush-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    opacity: 0.6;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
/*----------------------------------------
    Dashboard
------------------------------------------*/
.dashboard-menu {
  width: 96px;
  height: 105px;
  font-size: 13px;
  padding: 6px 0;
  margin: 4px 4px 4px 4px;
  line-height: 17px;
  cursor: pointer;
  position: relative;
  /* word-break: keep-all; */
}

.dashboard-menu i {
  font-size: 32px;
  padding: 12px;
  display: inline-block;
  border-radius: 50%;
  margin-bottom: 3px;
}

.dashboard img {
  width: 4.3em;
  height: 4.3em;
  padding: 10px;
  margin: 0 0 0 0;
  display: inline-block;
  border-radius: 50%;
}

/* .dashboard img:not(.expert img) { */
/*     width: 4.3em; */
/*     height: 4.3em; */
/*     padding: 10px; */
/*     margin: 0 0 0 0; */
/*     display: inline-block; */
/*     border-radius: 50%; */
/* } */
/* .dashboard .expert img,.expert .dashboard img { */
/*     width: 1.8em; */
/*     margin: 5px 10px 6px 0; */
/* } */
.dashboard-menu .history-icon {
  margin-right: 8px;
  font-size: 24px;
  max-width: 24px !important;
  overflow: hidden;
  color: #4db6ac;
}

.dashboard .scrollable {
  padding: 1em 0 1em 0;
}

.dashboard .subtitle {
  margin-top: 0.8em;
  height: 40px;
  line-height: 40px;
  color: var(--tint-color);
}

.dashboard-list-item i {
  margin-right: 15px;
}

/* .expert .dashboard-list-item { */
/*     height: 48px; */
/*     line-height: 48px; */
/* } */
@media (max-width: 600px) {
  .dashboard-menu {
    width: 80px;
    height: 86px;
    padding: 4px 0;
    margin: 2px 2px 8px 2px;
    line-height: 16px;
    font-size: 12px;
  }
  .dashboard-menu i {
    font-size: 28px;
    padding: 8px;
    margin: 0 0 3px 0;
  }
  /* .dashboard .expert img,.expert .dashboard img  { */
  /*     width: 1.8em; */
  /*     margin: 5px 12px 6px 0; */
  /* } */
  .dashboard img {
    width: 4.1em;
    height: 4.1em;
    margin: 0 0 0 0;
    padding: 9px;
  }
  /* .dashboard img:not(.expert img) { */
  /*     width: 4.1em; */
  /*     height: 4.1em; */
  /*     margin: 0 0 0 0; */
  /*     padding: 9px; */
  /* } */
  .dashboard .subtitle {
    margin-top: 1.1em;
    height: 26px;
    line-height: 26px;
  }
}
/*----------------------------------------
    Draggable, Sortable
------------------------------------------*/
.tilt-right {
  transform: rotate(5deg) !important;
}

.tilt-left {
  transform: rotate(-5deg) !important;
}

.draggable-icon-color {
  color: rgba(0, 0, 0, 0.4);
}

.draggable-icon {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 1em;
}

.draggable-cursor:not(.ui-state-disabled) {
  cursor: grab;
}

.draggable-remove-button {
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: default;
  z-index: 500;
}

/*----------------------------------------
    Leaflet
------------------------------------------*/
/* workaround for that Materialize hides checkboxes in layers control in Leaflet */
[type=checkbox].leaflet-control-layers-selector {
  position: static !important;
  left: 0px !important;
  opacity: 1 !important;
}

.leaflet-entities-pane {
  opacity: 0.2 !important;
}

.leaflet-control-zoomslider {
  /* height: 100px; */
  /* padding-bottom: 40px; */
}

.leaflet-touch .leaflet-control-zoomslider {
  box-shadow: none;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
}

.leaflet-centervertex-icon {
  opacity: 0 !important;
}

/* .leaflet-marker-draggable:hover { */
/*     cursor: pointer !important; */
/* } */
.leaflet-div-icon:hover {
  cursor: nesw-resize;
}

/* fix an issue that leaflet' controls appear over dialogs */
.leaflet-right, .leaflet-left {
  z-index: 820;
}

/* fix control over sidenav */
.leaflet-top, .leaflet-bottom {
  z-index: 820 !important;
}

/* Large handle of range circle */
.leaflet-vertex-icon {
  /* max-width: 40px; */
  /* max-height: 10px; */
  width: 18px !important;
  height: 18px !important;
  margin-left: -9px !important;
  margin-top: -9px !important;
  /* animation: handle-flash 1s step-end infinite alternate; */
}

/* @keyframes handle-flash { */
/*     70% { */
/*         background-color: #44ff44; */
/*     } */
/* } */
/* hide tooltip on mobile */
/* @media (max-height: 900px) { */
/*     #breq-map .leaflet-tooltip { */
/*         display: none; */
/*     } */
/* } */
.leaflet-popup {
  max-width: 280px;
}

.leaflet-popup-content {
  margin: 12px 14px;
}

.leaflet-popup-content-wrapper {
  border-radius: 4px;
}

.leaflet-marker-draggable:hover {
  cursor: move;
}

/* Leaflet Extra marker has background image */
.extra-marker {
  background: unset;
  /* width: 30px; */
  /* height: 30px; */
}

.extra-marker i {
  position: absolute !important;
  top: -3px;
  left: 7px;
  font-size: 20px !important;
}

.extra-marker-icon-doumo {
  top: -5px !important;
}

/* marker div icon  */
.div-icon {
  color: white;
  font-style: italic;
  font-family: Arial, sans-serif;
  font-size: 1.5em;
  border-radius: 4px;
  padding: 0 0 0 6px;
}

.div-icon-material {
  font-size: 1.8rem;
  margin: 1px 0 0 -5px;
  border-radius: 4px;
}

#open-req-box .hm-marker-icon {
  box-shadow: 3px 3px 4px 1px rgba(30, 30, 30, 0.24);
}

/* select with small caret if .browser-default*/
select.browser-default:not(.caret):not(.none) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 70%;
  background-position-y: 3px;
  border: none;
  outline: none;
  margin-top: 0;
  cursor: pointer;
}

/* select .browser-default without caret */
select.browser-default.caret {
  background: transparent;
  border: none;
  outline: none;
  margin-top: 0;
  cursor: pointer;
}

select.browser-default.none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  margin-top: 0;
  cursor: pointer;
}

/*----------------------------------------
    D-address
------------------------------------------*/
.da-part {
  max-width: 28em;
}

.slash-slash {
  /* width: 1em; */
  margin-top: -4px;
}

.da-name-right input {
  text-align: right;
}

/*----------------------------------------
    Open lists
------------------------------------------*/
.open-map-box {
  border: 1px solid var(--border-color) !important;
}

/* Leaflet map size */
.open-area-map .leaflet-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 16px; /* Material Design M3 */
}

.map-caution {
  width: fit-content;
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  border-radius: 4px;
  font-size: 0.5rem;
  padding: 2px 4px;
}

.open-item-list {
  /* width: 260px; */
}

.open-item-list-search {
  width: 90%;
  max-width: 450px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.open-item-list-search .input-field {
  margin-top: 0;
}

.open-map-gap {
  height: 1em;
}

/* .open-item-list a.new-item-button { */
/*     position: absolute; */
/*     bottom: -36px; */
/*     width: 70px  !important; */
/*     height: 70px !important; */
/*     z-index: 2; */
/* } */
/* remove animation of the big floating button */
.btn-floating {
  -webkit-transition: unset !important;
  transition: unset !important;
  z-index: 2 !important; /* to hide pull to refresh indicator behind */
  border-radius: 35% !important;
}

/* .open-item-list i.add-button-icon { */
/*     font-size: 4rem !important; */
/*     max-width: 4rem !important; */
/*     overflow: hidden; */
/*     padding-top: 7px; */
/*     color: white !important; */
/* } */
.open-item-list .text-part {
  flex: 40 50 0;
  min-width: 120px;
  /* order: 0; */
}

.open-item-list .two-column-header-image {
  min-width: 150px;
  flex: 60 50 0;
  max-width: 300px;
  margin-left: 10px;
  margin-right: 0;
  /* order: 1; */ /* show at right of text part which is order 0 */
}

.open-item-list .one-column-header-image {
  max-width: 400px;
  /* max-width: 200px; */
  flex-basis: 100%;
  order: 0; /* show below text part which is order 0  */
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.desktop-vertical-layout-mobile-scrollable {
  /* vertical-layout */
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.desktop-vertical-layout-mobile-block {
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* .blank-for-map { */
/*     height: 294px; */
/* } */
/* .expert .blank-for-map { */
/*     height: 251px; */
/* } */
@media (max-width: 600px) {
  /* 320 x 568  iPhone SE */
  .open-area-map .leaflet-container {
    /* width: 100vw; */
    height: 253px;
    border-radius: 0;
  }
  .blank-for-map {
    height: 253px;
  }
  .expert .open-area-map .leaflet-container {
    width: 100%;
    height: 253px;
    position: relative;
  }
  .expert .blank-for-map {
    height: 253px;
  }
  .open-item-list .thumbnail {
    width: 180px;
  }
  .subview-open .leaflet-container {
    height: 130px !important;
  }
  .subview-open .blank-for-map {
    height: 130px !important;
  }
}
@media (min-width: 360px) and (max-width: 600px) and (min-height: 640px) {
  /* @media only screen and (max-width: 600px) and (max-height: 666px) { */
  /* 360 x 640  Galax S5 */
  .open-area-map .leaflet-container {
    /* width: 100vw; */
    height: 293px;
  }
  .blank-for-map {
    height: 293px;
  }
  .expert .open-area-map .leaflet-container {
    width: 100%;
    height: 293px;
    position: relative;
  }
  .expert .blank-for-map {
    height: 293px;
  }
  .subview-open .leaflet-container {
    height: 170px !important;
  }
  .subview-open .blank-for-map {
    height: 170px !important;
  }
}
@media (min-width: 360px) and (max-width: 600px) and (min-height: 736px) {
  /* 375 x 667 iPhone SE2/6/7/8 */
  .open-area-map .leaflet-container {
    width: 100%;
    height: 333px;
    position: relative;
  }
  .blank-for-map {
    height: 333px;
  }
  .expert .open-area-map .leaflet-container {
    width: 100%;
    height: 333px;
    position: relative;
  }
  .expert .blank-for-map {
    height: 333px;
  }
  .subview-open .leaflet-container {
    height: 210px !important;
  }
  .subview-open .blank-for-map {
    height: 210px !important;
  }
}
@media (min-width: 360px) and (max-width: 600px) and (min-height: 800px) {
  /* @media only screen and (max-width: 600px) and (max-height: 780px) { */
  /* 375 x 812 iPhone X or bigger */
  .open-area-map .leaflet-container {
    width: 100%;
    height: 373px;
    position: relative;
  }
  .blank-for-map {
    height: 373px;
  }
  .expert .open-area-map .leaflet-container {
    width: 100%;
    height: 373px;
    position: relative;
  }
  .expert .blank-for-map {
    height: 373px;
  }
}
@media (max-width: 600px) {
  .open-item-list-search {
    width: 95%;
    max-width: 400px;
    /* margin-left: 1.5em; */
    /* margin-right: unset; */
  }
  .open-item-list-search .input-field {
    margin-top: 0;
    margin-bottom: 0;
  }
  .open-item-list-search span {
    padding-left: 8px;
  }
  /* Leaflet map size */
  .open-item-list {
    width: 100%;
    height: 100%;
  }
  .open-before-input {
    margin-top: 0;
  }
  .open-map-gap {
    height: 0;
  }
  /* if map is full screen, don't use this not to show banner area and bottom bar  */
  .desktop-vertical-layout-mobile-scrollable {
    overflow-y: scroll;
    display: block;
    /* no vertical-layout */
  }
  .desktop-vertical-layout-mobile-block {
    display: block;
  }
}
.open-item-icon {
  /* width: 26px; */
  /* height: 26px; */
  padding: 2px 5px 2px 4px;
  margin-right: 6px;
  /* vertical-align: middle; */
  color: white;
  font-style: italic;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  border-radius: 4px;
}

.area-map-geosearch-icon:after {
  font-family: "Material Icons Outlined";
  content: "travel_explore";
  -webkit-font-feature-settings: "liga" 1;
  -moz-font-feature-settings: "liga" 1;
  font-feature-settings: "liga" 1;
  font-size: 24px;
}

/*----------------------------------------
  headroom.js
------------------------------------------*/
#headrooms-header {
  height: 100%;
}

@media (max-width: 600px) {
  /* @media only screen and (max-width: 600px) { */
  #headrooms-header {
    height: unset;
    position: absolute;
    /* top: 57px; */
    left: 0;
    right: 0;
    z-index: 10;
  }
  .headroom:not(.map-in-fullscreen) {
    will-change: transform;
    -webkit-transition: transform 280ms linear;
    transition: transform 280ms linear;
  }
  .headroom--pinned {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  .headroom--unpinned {
    -webkit-transform: translateY(-120%);
    transform: translateY(-120%);
  }
  .header-button-pos {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 20px;
    z-index: 9;
    opacity: 0.5;
    border-radius: 2px;
  }
  .headroom-down-button {
    padding: 6px 6px;
    font-size: 2em;
  }
}
/*
 Chardin.js for tutorial
*/
.chardinjs-overlay {
  opacity: 0.1;
}

.chardinjs-helper-layer {
  position: absolute;
  z-index: 9999998;
  color: #f8f833;
  /* color: #000000; */
}

.chardinjs-tooltip {
  background-color: #f8f833;
  padding: 10px 10px 10px 30px;
  border-radius: 6px;
}

.chardinjs-tooltiptext {
  color: black;
  /* color: #000000; */
}

.chardinjs-show-element {
  z-index: 9999995 !important;
  opacity: 1 !important;
}

.chardinjs-tooltip.chardinjs-right::before, .chardinjs-tooltip.chardinjs-left::after {
  height: 0;
  /* background-color: #f05353; */
  /* height: 3px; */
}

.chardinjs-tooltip.chardinjs-bottom::before, .chardinjs-tooltip.chardinjs-top::after {
  width: 0;
  /* width: 3px; */
  /* background-color: #f05353; */
}

.chardinjs-helper-layer.chardinjs-left {
  border: solid 4px;
  border-radius: 4px;
  /* border-left: solid 4px; */
}

.chardinjs-helper-layer.chardinjs-right {
  border: solid 4px;
  border-radius: 4px;
  /* border-right: solid 4px; */
}

.chardinjs-helper-layer.chardinjs-bottom {
  border: solid 4px;
  border-radius: 4px;
  /* border-bottom: solid 4px; */
}

.chardinjs-helper-layer.chardinjs-top {
  border: solid 4px;
  border-radius: 4px;
  /* border-top: solid 4px; */
}

/********************* peace and passion ********************/
.flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/*
  project menu
 */
.submenu-title {
  -webkit-text-size-adjust: none;
  font-size: 10px;
  line-height: 12px;
  display: block;
  margin-top: 2px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.account-list-img {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 4px 0 -3px 0;
  position: relative;
  z-index: 1;
}

.submenu-icon {
  font-size: 22px;
  margin: 2px 0 2px 0;
  display: block;
  position: relative;
  z-index: 1;
}

.submenu a {
  min-width: 48px;
  position: relative; /* for .submenu-hover-circle */
  transition: background-color 0.3s;
  font-size: 0.6rem;
  display: block;
  cursor: pointer;
}

/* .submenu-hover-circle is the background circle of an submenu button. Similar to app.hover-circle. */
.submenu .submenu-hover-circle, .side-project-menu .menu-item .submenu-hover-circle {
  display: none;
  position: absolute;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  top: 22%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.submenu .submenu-hover-circle.active, .side-project-menu .menu-item.active .submenu-hover-circle {
  display: block !important;
}

@media (hover: hover) and (pointer: fine) {
  .submenu a:hover .submenu-hover-circle, .side-project-menu .menu-item:hover .submenu-hover-circle {
    display: block !important;
  }
}
.side-project-menu .submenu-hover-circle {
  top: 24px !important;
  left: 27px !important;
}

/* vertical menu as navigation rail */
@media only screen and (min-width: 769px) {
  .submenu {
    display: flex;
    height: 100%;
    width: 80px;
    overflow-y: hidden; /* no scroll bar */
    padding: 3px 2px 3px 2px;
    flex-direction: column; /* vertical layout */
    align-items: center;
    gap: 12px;
  }
  .submenu a {
    min-height: 56px;
  }
  .submenu-img {
    display: inline;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-bottom: 1px;
    z-index: 1;
    position: relative;
  }
  .submenu-title {
    margin-top: 4px;
  }
  .submenu:not(.preview) > a:first-child {
    margin-top: 16px;
    margin-bottom: auto; /* fixed to upper end */
  }
  /* Project */
  /* User menu */
}
@media only screen and (min-width: 769px) and (max-height: 700px) {
  /* hide Note if short heifht*/
  .submenu:not(.preview) > a:nth-last-child(4) {
    display: none;
  }
}
@media only screen and (min-width: 769px) and (max-height: 600px) {
  /* hide Video meeting if short heifht */
  .submenu:not(.preview) > a:nth-last-child(3) {
    display: none;
  }
}
@media only screen and (min-width: 769px) {
  .submenu:not(.preview) > a:nth-last-child(2) {
    margin-top: auto; /* fixed to bottom end */
    margin-bottom: 0;
  }
  .submenu:not(.preview) > a:last-child {
    margin-bottom: 0;
  }
  .submenu .submenu-hover-circle {
    top: 24%;
  }
}
/* bottom submenu */
@media only screen and (max-width: 768px) { /* 768px */
  .submenu {
    display: flex;
    padding-top: 3px;
    height: 68px;
    width: 100%;
    flex-direction: row; /* horizontal layout */
    justify-content: space-around; /* equal space */
    align-items: center;
  }
  .ios.pwa .submenu {
    padding-top: 0px;
    height: 76px;
  }
  .submenu a {
    height: 100%;
    margin-bottom: unset;
    padding: 12px 0 0 0;
    overflow: hidden;
    max-width: 6rem;
  }
  /* hide Note */
  .submenu:not(.preview) > a:nth-last-child(4) {
    display: none;
  }
  /* hide Video meeting */
  .submenu:not(.preview) > a:nth-last-child(3) {
    display: none;
  }
  .submenu .submenu-hover-circle {
    top: 41%;
  }
  .ios .submenu .submenu-hover-circle {
    top: 36%;
  }
  /* bottom submenu */
  #menu-right-pane {
    flex-direction: column-reverse !important;
  }
  /* .submenu-img {
      width: 20px;
      height: 20px;
      margin: 4px 0 -2px 0;
      } */
  .submenu-icon {
    font-size: 20px;
    margin: 2px 0 2px 0;
  }
  .submenu-img {
    width: 25px;
    height: 25px;
    margin-bottom: -4px;
    position: relative;
    z-index: 1;
  }
  .submenu-title {
    font-size: 9px;
    line-height: 12px;
  }
  /* hide label and shrink height.
      Due to a sub-view, don't consider ios-pwa footer curve. */
  .portrait .submenu-with-subview {
    height: 45px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    /* remove padding for shrinked icons */
  }
  .portrait .submenu-with-subview.submenu a {
    padding-top: 8px !important;
    /* small padding for shrinked icons (default is 12px) */
  }
  .portrait .submenu-with-subview .submenu-title {
    display: none !important;
  }
  .portrait .submenu-with-subview .submenu-hover-circle {
    top: 50% !important;
  }
}
/**
 * badges
 */
.hm-badge {
  /* text-color */
  color: white;
  /* badge-color */
  background-color: rgb(255, 171, 0);
  opacity: 0.85;
  /* size */
  width: 12px;
  height: 12px;
  font-size: 8px;
  /* make circle */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  line-height: 1;
  padding: 0px;
  box-sizing: border-box;
  z-index: 1;
}

.hm-submenu-badge .hm-badge {
  position: absolute !important;
  top: 4px;
  left: 70%;
  z-index: 2;
  /* transform: translateX(-50%); */
}

@media only screen and (min-width: 769px) {
  .hm-submenu-badge .hm-badge {
    top: -6px; /* In right rail, there is no padding-top 12px. */
    left: 75%;
  }
}
.request-status-badge {
  margin-left: 0.3rem;
  display: inline-block;
}

.attachment-badge {
  height: 20px !important;
  width: 20px !important;
  position: absolute;
  z-index: 8;
  top: 12px;
  /* left: 6px; */
  /* left: -10px; */
  /* top: -2px; */
  opacity: 0.7;
}

.list-badge-space {
  padding-right: 44px !important;
}

.switch-badge-circle {
  border-radius: 50%;
  /* width: 36px; */
  /* height: 36px; */
  padding: 4px 8px;
  color: white;
  background: hsl(40, 85%, 52%); /* #ffab00 */ /* amber accent-4 */
  text-align: center;
}

.msg-editor {
  width: calc(100% - 60px); /* 100% - send button */
}

div .grid-list {
  flex-wrap: wrap;
  height: auto;
}

/* selection icon changes according to .ui-selected */
.selection-icon {
  position: absolute;
  border-radius: 50%;
  font-size: 1.8rem;
  top: 5px;
  left: 5px;
  z-index: 1;
  clip-path: circle(38%);
}

.ui-selected .selection-icon::before {
  color: white;
  content: "check_circle";
}

.selection-icon::before {
  content: "check_circle";
}

/* file */
.lum-lightbox {
  z-index: 10000000;
}

md-file .file-path-wraper {
  display: none;
}

.file-card-grid {
  max-width: 160px;
  max-height: 210px; /* width * 1.3 */
  width: calc(50vw - 20px);
  height: 65vw;
  flex: 0 0 auto;
  overflow: hidden;
  margin: 5px !important;
}

.file-card-grid-mini {
  max-width: 100px;
  max-height: 130px; /* width * 1.3 */
  width: calc(33vw - 33px);
  height: 42.9vw;
  flex: 0 0 auto;
  overflow: hidden;
  margin: 5px !important;
}

.file-card-grid-mini-no-description {
  max-width: 100px;
  max-height: 100px;
  width: calc(33vw - 33px);
  height: calc(33vw - 33px);
  flex: 0 0 auto;
  overflow: hidden;
  margin: 5px !important;
}

.file-card-image-container-mini-no-description {
  width: 100%;
  height: 100%;
}

.youtube-video-container {
  /* https://stackoverflow.com/questions/35814653/automatic-height-when-embedding-a-youtube-video */
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
  .file-card-mini-icon {
    margin-top: 10px;
    /* font-size: 64px; */
    font-size: 74px;
  }
}
@media only screen and (min-width: 601px) {
  .file-card-mini-icon {
    margin-top: 10px;
    font-size: 74px;
  }
}
.file-card-image-container-mini {
  width: 100%;
  height: 60%;
}

.file-card-image-container {
  width: 100%;
  height: 70%;
}

.file-card-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.file-card-content {
  padding: 6px;
  word-break: break-all;
  line-height: 1.2rem;
}

.file-card-annotation {
  position: absolute;
  /* width: 80%; */
  overflow: scroll;
  top: 3px;
  left: 3px;
  background-color: #ffffff;
  opacity: 0.8;
  border-radius: 4px;
  padding: 1px 6px;
}

.small-card-remove-button {
  font-size: 18px;
  border-radius: 50%;
  background: white;
  opacity: 0.7;
  margin: 2px;
}

/* file end */
/* happy */
.happy-view-session-selector {
  margin-top: 30px !important;
}

.happy-view-session-selector label {
  font-size: 12px !important;
}

/* happy end */
/* msg override */
.s-msg-list .org-list-item {
  /* font-weight: bold; */
  border-left: 4px solid rgba(1, 1, 1, 0) !important;
}

.s-msg-list .my-list-item {
  /* font-weight: bold; */
  border-left: 4px solid #f09070 !important;
}

/* msg override end */
.msg-sender-user-name {
  font-weight: bold;
  padding-right: 10px;
}

.msg-org-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.msg-org-logo i {
  font-size: 24px;
}

@media only screen and (max-width: 600px) {
  .msg-org-logo {
    width: 32px;
    height: 32px;
  }
  .msg-org-logo i {
    font-size: 32px;
  }
}
/* summernote */
.note-modal-body {
  padding-bottom: 0px !important;
  margin-bottom: 20px !important;
}

.note-modal-footer .note-btn {
  margin-top: -30px !important;
  margin-right: 18px !important;
}

.sn-checkbox-use-protocol {
  display: none;
}

.sn-checkbox-open-in-new-window {
  display: none;
}

div.note-editable {
  padding: 0.1rem 0.3rem !important;
  /* if bottom is small, resize with scroll will not success... */
}

.note-editable p:first-child {
  /* background-color: pink; */
  margin-top: 0px !important;
}

/* .hf-editor div.note-editable { */
/*     line-height: 1.5rem !important; */
/* } */
/* .hf-editor div.note-editable p { */
/*     line-height: 0.8rem !important; */
/* } */
/* .hf-editor p { */
/*     margin-block-start: 0.2em !important; */
/*     margin-top: 2px !important; */
/* } */
div .note-editor {
  padding-top: 1px !important;
}

/* .note-resizebar { */
/*     display: none; /\* for mobile bugs *\/ */
/* } */
.note-editor .note-status-output {
  /* https://github.com/summernote/summernote/issues/546 */
  display: none;
}

.note-group-select-from-files {
  display: none;
}

.mobile-hf-editor .note-statusbar {
  display: none !important;
}

.note-dropdown-menu {
  max-height: 30vh;
  overflow-y: scroll;
}

/* summernote editor change css */
.hf-summernote-editor {
  /* overflow: scroll; */
  /* overflow: auto; */
  overflow: visible; /* to show all menu dropdown buttons. e.g. style dropdown */
  /* line-height: normal; /\* override materialize.collection *\/ */
}

.hf-summernote-editor p {
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.hf-summernote-editor ul:not(.browser-default) {
  list-style-type: disc !important;
  padding-inline-start: 40px;
}

.hf-summernote-editor ul:not(.browser-default) > li {
  list-style-type: disc !important;
}

.hf-summernote-editor li:before {
  font-size: auto;
}

.hf-summernote-editor .note-editable img {
  display: inline-block;
  max-width: 500px;
  width: 85%;
}

.emoji-picker__emojis h2.emoji-picker__category-name {
  font-size: 0.8em !important;
  margin: 1em 0em -0.8em 0em !important;
}

pre {
  overflow: auto;
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

code, kbd, pre, samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

/**
 * hide and add text on Summernote video modal.
 */
div[aria-label="Insert Video"] .note-form-label .text-muted {
  display: none !important; /* hide Youtube, Google Drive, Vimeo, Vine, ... */
}

div[aria-label="Insert Video"] .note-form-label:after {
  display: inline !important;
  content: "(Youtube, Vimeo)"; /* Add text */
  font-size: 75%;
}

/**
 * Hide "Drag image or text here" on the summernote.
 */
.note-editor .note-dropzone {
  display: none !important;
}

/* summernote end */
/* ux-dialog-container > div { */
/*     height: 100% !important; */
/* } */
ux-dialog-container > div {
  padding-top: 0 !important;
}

ux-dialog-container > div > div {
  height: 100% !important;
  min-width: 200px !important;
}

/* session */
#session-headrooms-header {
  /* height: 100%; */
}

#session-headrooms-header.headroom {
  height: unset;
  position: absolute;
  /* top: 59px; /\* without top, white out after scroll speedy in huawei tabret *\/ */
  left: 0;
  right: 0;
  z-index: 10;
}

#session-headrooms-header.headroom--unpinned {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}

.headroom:not(.map-in-fullscreen) {
  will-change: transform;
  -webkit-transition: transform 320ms linear;
  transition: transform 320ms linear;
}

.headroom--pinned {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  /* position: fixed; */
}

.headroom--unpinned {
  -webkit-transform: translateY(-120%);
  transform: translateY(-120%);
}

.header-picture-editor h1 {
  font-size: 8vw !important;
}

.header-picture-editor h2 {
  font-size: 6vw !important;
}

.header-picture-editor h3 {
  font-size: 4vw !important;
}

.header-picture-editor h4 {
  font-size: 2vw !important;
}

.header-picture-editor h5 {
  font-size: 1.5vw !important;
}

.header-picture-editor h6 {
  font-size: 1vw !important;
}

.on-the-front-a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
}

@media only screen and (min-width: 0) {
  .request-photo {
    width: 100%;
    padding: 8px;
  }
}
@media only screen and (min-width: 600px) {
  .request-photo {
    width: 50%;
    padding: 8px;
  }
}
/* Grid */
@media only screen and (max-width: 992px) {
  /* midium */
  .grid-card {
    height: 190px;
    width: 120px;
    margin: 4px !important;
    padding: 0;
    /* background-color: #ffffff; */
    border-radius: 4px !important;
  }
  .grid-card-image {
    height: 130px;
    /* height: 150px; */
    width: 100%;
    object-fit: cover;
    overflow: hidden;
  }
  .grid-card .card-content {
    padding: 8px !important;
    height: 60px;
    overflow: hidden;
  }
}
@media only screen and (max-width: 600px) {
  /* small */
  .grid-card {
    height: 190px;
    width: 120px;
    margin: 4px !important;
    padding: 0;
    overflow: hidden;
    border-radius: 4px !important;
  }
  .grid-card-image {
    height: 130px;
    /* height: 150px; */
    width: 100%;
    object-fit: cover;
    /* max-height: 200px; */
  }
  .grid-card .card-content {
    padding: 8px !important;
    height: 60px;
    overflow: hidden;
  }
}
@media only screen and (min-width: 993px) {
  /* large */
  .grid-card {
    height: 190px;
    width: 120px;
    margin: 4px !important;
    padding: 0;
    overflow: hidden;
    border-radius: 4px !important;
  }
  .grid-card-image {
    height: 130px;
    /* height: 150px; */
    width: 100%;
    object-fit: cover;
    /* max-height: 200px; */
  }
  .grid-card .card-content {
    padding: 8px !important;
    height: 60px;
    overflow: hidden;
  }
}
.grid-card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* .grid-card:hover {
      background-color: #ddd;
      } */
.grid-card.dragging {
  height: 190px;
  width: 120px;
  margin: 4px !important;
  padding: 0;
  /* background-color: #ffffff; */
  border-radius: 4px !important;
}

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

.card-remove-button {
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: 10;
  width: 20px !important;
  height: 20px !important;
  padding: 0px !important;
  margin: 0 !important;
  line-height: 10px !important;
  /* font-size: 5px !important; */
}

/*----------------------------------------
    photoswipe
------------------------------------------*/
.zoom-cursor {
  cursor: zoom-in !important;
}

.pswp__img {
  cursor: e-resize !important; /* next */
}

.pswp__bg {
  opacity: 1 !important;
  background: #ffffff !important;
}

.pswp {
  --pswp-placeholder-bg: #ffffff!important;
  /* svg's background must be white too */
}

/*----------------------------------------
    part2(session/order/payment) classes
------------------------------------------*/
/* cardboard */
.cardboard-justyfy-center {
  overflow-x: auto;
}

/* without wrap, "justify-content: center" occurs scroll trouble. */
.cardboard-wrap.cardboard-justyfy-center {
  justify-content: center;
}

.cardboard-justyfy-center.cardboard-nowrap::before, .cardboard-justyfy-center.cardboard-nowrap::after {
  /* https://stackoverflow.com/questions/34184535/change-justify-content-value-when-flex-items-overflow-container */
  content: ""; /* Insert pseudo-element */
  margin: auto; /* Make it push flex items to the center with scroll */
}

.cardboard-card-container {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-height: 50px;
  min-width: 50px;
}

.cardboard-card-container.cardboard-nowrap {
  flex-wrap: nowrap !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontal-cardboard.cardboard-card-container.cardboard-wrap {
  flex-wrap: wrap !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cardboard-card-container.horizontal-cardboard {
  height: calc(var(--card-height) + 10px + 20px); /* card-height + shadow + padding-top */
  /* padding-top: 24px; */
  /* padding-top: calc(24px + 0.6em); */
  padding-bottom: 16px;
  align-items: center;
  min-height: max(84px, (var(--card-height))) !important; /* for line setting buttons */
}

.cardboard-card-container.vertical-cardboard {
  width: calc(var(--card-width) + 10px);
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  /* padding-top: calc(24px + 0.6em); */
  /* padding-top: 24px; */
  min-width: calc(var(--card-width)) !important;
}

.cardboard-card {
  -webkit-touch-callout: none; /* https://github.com/furf/jquery-ui-touch-punch/pull/290 */
  flex: 0 0 auto;
  width: var(--card-width);
  height: var(--card-height);
  margin: 4px !important;
  padding: 0;
  overflow: visible;
  border-radius: 7px !important; /* (=cardboard-card-image-space) */
}

.horizontal-cardboard {
  object-fit: cover !important;
}

.vertical-cardboard .cardboard-card {
  width: var(--card-width);
  height: var(--card-width); /* square */
}

@media only screen and (min-width: 800px) {
  .cardboard-rank-sortable-handle {
    padding-top: 0.15rem;
  }
}
@media only screen and (min-width: 1200px) {
  .cardboard-rank-sortable-handle {
    padding-top: 0.25rem;
  }
}
.cardboard-rank-sortable-handle {
  margin-left: 0.5rem;
}

.vertical-cardboard .cardboard-card img {
  object-fit: cover;
}

.cardboard-flex {
  flex-basis: 100% !important;
}

.cardboard-line-button {
  width: 40px !important;
  line-height: unset !important;
  padding: 0.4rem !important;
  /* color: #757575!important; */ /* grey-text text-darken-1 */
}

.cardboard-button-icon {
  /* Don't use 'rem' to clickable on a mobile phone */
  line-height: initial !important;
}

.cardboard-drag-icon {
  font-size: 26px !important; /* Don't use 'rem' to clickable on a mobile phone */
}

.dragging {
  flex-grow: 0;
  z-index: 100000; /* must be front */
}

.cardboard-line-wrapper {
  padding: 0.3rem 0.6rem;
}

.vertical-cardboard-container {
  padding-right: 5rem;
  overflow-x: scroll;
}

.vertical-cardboard-container .cardboard-line-wrapper {
  min-width: calc(var(--card-width) + 74px);
}

.cardboard-line-wrapper {
  height: auto;
}

.horizontal-cardboard.cardboard-line .cardboard-card-space-wrapper:last-of-type:not(.dragging) {
  flex-grow: 1; /* generating url drop area */
}

.horizontal-cardboard.cardboard-line .cardboard-card-space-wrapper:last-of-type .card {
  float: left; /* generating url drop area */
}

.vertical-cardboard.cardboard-line .cardboard-card-space-wrapper:last-of-type:not(.dragging) {
  flex-grow: 1; /* generating url drop area */
}

.sortable-ghost {
  opacity: 0.3 !important; /* ghost item for sortable */
}

.zero-height {
  height: 0px;
}

.cardboard-rotated-button-bottom {
  display: flex;
  align-items: flex-end;
}

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* div .card-container { */
/*     /\* border: 5px solid #eeeeee; *\/ */
/*     min-height: 200px; */
/*     display: -ms-flexbox; */
/*     display: -webkit-flex; */
/*     display: flex; */
/*     -ms-flex-direction: row; */
/*     -webkit-flex-direction: row; */
/*     flex-direction: row; */
/*     flex-wrap: wrap; */
/*     /\* justify-content: center; */
/*         position: absolute; *\/ */
/*     width: 100%; */
/*     /\* z-index: 10; *\/ */
/* /\* color: #00cc00; */
/*         background-color: #0000cc; *\/ */
/* } */
.cardboard-card-image {
  width: calc(var(--card-width));
  height: calc(var(--card-width));
  object-fit: cover;
  pointer-events: none; /* don't drag images on cardboard */
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.cardboard-card-image-space {
  width: calc(var(--card-width));
  height: calc(var(--card-width));
  overflow: hidden;
  background: white;
  border-radius: 7px 7px 0px 0px !important; /* = cardboard-card */
}

.vertical-cardboard-card-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
}

.vertical-cardboard .vertical-cardboard-card-info {
  display: none; /* only show on hover */
  position: absolute;
  width: 100%;
  /* height: 70%; */
  max-height: 60%;
  padding: 4px !important;
  background: #efefef;
  opacity: 0.8;
  /* top: 30%; */
  left: 0px;
  bottom: 0px;
  height: auto;
}

.cardboard-card:hover .vertical-cardboard-card-info, .cardboard-card.hover .vertical-cardboard-card-info {
  /* hover to show (default hide by display: none;) */
  display: flex;
}

.banban-minimum .vertical-cardboard .vertical-cardboard-card-info {
  display: none !important; /* don't show title on minimum */
}

.cardboard-card .hover-icon {
  display: none;
}

.cardboard-card:hover .hover-icon, .cardboard-card.hover .hover-icon {
  display: inline;
}

.card-content {
  text-align: left;
  overflow-x: hidden;
  overflow-y: hidden;
}

.card-content.image-card-content {
  height: calc(100% - var(--card-width));
}

.banban-minimum .cardboard-card-title-no-image {
  font-size: 0.65rem !important;
}

.banban-small .cardboard-card-title-no-image {
  font-size: 0.9rem !important;
}

.banban-medium .cardboard-card-title-no-image {
  font-size: 1.1rem !important;
}

.banban-large .cardboard-card-title-no-image {
  font-size: 1.4rem !important;
}

.banban-maximum .cardboard-card-title-no-image {
  font-size: 1.6rem !important;
}

.cardboard-card-title {
  font-size: var(--cardboard-title-font-size);
  color: #505050;
  line-height: 1.2;
  overflow: hidden;
}

.banban-minimum .card-content {
  padding: 2px !important;
}

.banban-minimum .cardboard-card-title {
  padding: 0px 0px 1px 0px;
}

.horizontal-cardboard .banban-minimum .price-on-card {
  padding: 2px 0px 0px 0px;
  display: none;
}

.banban-minimum .cardboard-card-title-no-image {
  padding: 4px !important;
}

.banban-small .card-content {
  padding: 6px 4px !important;
}

.banban-small .cardboard-card-title {
  padding: 0px 0px 0px 0px;
}

.horizontal-cardboard .banban-small .price-on-card {
  padding: 4px 0px 0px 0px;
}

.banban-small .cardboard-card-title-no-image {
  padding: 3px !important;
}

.banban-small .cardboard-line {
  gap: 4px;
}

.banban-medium .card-content {
  padding: 8px 6px 8px 6px !important;
}

.banban-medium .cardboard-card-title {
  padding: 0px 2px 0px 2px;
}

.banban-medium .price-on-card {
  padding: 4px 2px 0px 2px;
}

.banban-medium .cardboard-card-title-no-image {
  padding: 2px !important;
}

.banban-medium .cardboard-line {
  gap: 8px;
}

.banban-large .card-content {
  padding: 10px 10px 11px 10px !important;
}

.banban-large .cardboard-card-title {
  padding: 0px 0px 0px 0px;
}

.horizontal-cardboard .banban-large .price-on-card {
  padding: 6px 0px 0px 0px;
}

.banban-large .cardboard-card-title-no-image {
  padding: 6px !important;
}

.banban-large .cardboard-line {
  gap: 12px;
}

.banban-maximum .card-content {
  padding: 12px !important;
}

.banban-maximum .cardboard-card-title {
  padding: 0px 2px 4px 2px;
}

.banban-maximum .price-on-card {
  padding: 8px 2px 0px 2px;
}

.banban-maximum .cardboard-card-title-no-image {
  padding: 6px !important;
}

.banban-maximum .cardboard-line {
  gap: 16px;
}

.price-on-card {
  font-size: var(--cardboard-title-font-size);
  max-width: 100%;
  /* text-align: right; */
  font-weight: 500 !important;
}

.cardboard-card-tooltip {
  position: absolute;
  background-color: #ffffff;
  transform: translateX(100%);
  right: 0px;
  /* width: 100px;
      height: 100px; */
  z-index: 10;
  top: 2px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  /* border-top-left-radius: 2px;
      border-bottom-left-radius: 2px; */
  box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}

.cardboard-card-tooltip-button {
  font-size: 20px;
}

.cardboard-card-tooltip-button-icon {
  font-size: 20px;
}

.card-hover-icon {
  /* width: 1.8rem;
      height: 1.8rem; */
  width: 26px;
  height: 26px;
  background: rgba(220, 220, 220, 0.8);
  border-radius: 6px;
  /* border-radius: 50%; */
}

.cardboard-card-description {
  font-size: var(--cardboard-description-font-size);
  /* font-size: calc(var(--card-width) / 100)px; */
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: visible;
}

.cardboard-background-stripe {
  background-color: #eeeeee !important;
}

.cardboard-card-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  z-index: 100000000;
  opacity: 0.7;
}

.cardboard-card-indicator.small {
  top: calc(100% + 2px);
  left: 0%;
  transform: translateY(-100%) translateX(0%);
  -webkit-transform: translateY(-100%) translateX(0%);
}

.cardboard-card-indicator.small i {
  font-size: 10px !important;
}

.cardboard-card-button {
  font-size: 14px !important;
}

.cardboard-card-button-large {
  /* large for touch device */
  font-size: 1.2rem !important;
}

.cardboard-list-card-img {
  width: min(30%, 100px);
  aspect-ratio: 1;
  /* height: 100px; */
  object-fit: cover;
  border-radius: 6px;
  margin: 4px;
}

.cardsize-slider {
  /* height: 30px; */
  width: 50%;
  max-width: 280px;
}

@media only screen and (max-width: 600px) {
  .cardsize-slider {
    max-width: 130px;
  }
}
.cardsize-slider p.range-field {
  margin: 0px;
}

.cardsize-slider span.thumb {
  display: none;
}

.cardsize-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  /* background: #ff4500; */
  /* cursor: ew-resize; */
  box-shadow: 0 0 2px 0 #555;
  transition: background 0.3s ease-in-out;
  transform: translate(0px, -7px); /* centering */
  /* default slider can't touch well */
  /* https://nikitahl.com/style-range-input-css */
}

.cardsize-slider .noUi-handle {
  width: 64px !important;
  height: 64px !important;
  /* default slider can't touch well */
  /* https://refreshless.com/nouislider/more/ */
}

.cardsize-slider .noUi-handle-touch-area {
  width: 64px !important;
  height: 64px !important;
  /* default slider can't touch well */
  /* https://refreshless.com/nouislider/more/ */
}

.rotated-card-title {
  overflow: hidden;
  white-space: nowrap;
  max-width: var(--card-width);
}

.cardboard-line-title {
  font-size: 1.4rem;
}

.card-description-html-wrapper img {
  max-width: 100%;
  height: auto;
  cursor: zoom-in !important;
}

.cardboard-files-for-list {
  width: min(30%, 100px);
  margin: 4px;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1;
}

.file-card-on-card {
  max-width: min(30%, 170px);
  margin: 4px !important;
  aspect-ratio: 1;
}

.card-video-wrapper {
  /* for object fit video : https://stackoverflow.com/questions/55229821/html-video-tag-fixed-height-with-object-fit*/
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* max-height: 200px; */
  /* height: 180px; */
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.card-video {
  /* for object fit video : https://stackoverflow.com/questions/55229821/html-video-tag-fixed-height-with-object-fit*/
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.advertising {
  font-size: 0.8rem;
}

.checkout-button {
  background-color: red !important;
}

.checkout-button:visited {
  background-color: red !important;
}

.checkout-button:hover {
  background-color: red !important;
}

.checkout-button:active {
  background-color: red !important;
}

/*----------------------------------------
    photoswipe
------------------------------------------*/
.pswp__bg {
  background: #ffffff !important;
}

html {
  --golden-ratio: 1.618;
  --silver-ratio: 1.414;
  --card-width: 80px;
  --card-height: calc(var(--card-width) * var(--silver-ratio));
  --product-card-width: 80px;
  --product-card-height: calc(var(--product-card-width) * var(--silver-ratio));
  --cardboard-title-font-size: 14px;
  --cardboard-description-font-size: 10px;
}

ul.box {
  margin-left: 1em;
  list-style-image: url("https://cdn.request.land/img/li-box-7x6.png");
  /* list-style-position: inside; */
}

ul.bullet {
  margin-left: 1em;
  list-style-image: url("https://cdn.request.land/img/li-bullet-14x10.png");
  /* list-style-position: inside; */
}

ul.top > li {
  margin-left: 1em;
  list-style-image: url("https://cdn.request.land/img/li-bullet-18x13.png");
  /* list-style-position: inside; */
}

.large-icon-button {
  /* width: 140px; */
  min-height: 110px;
  /* padding: 6px 3px; */
  padding: 1rem 4rem;
  margin: 4px 4px 4px 4px;
  line-height: 15px;
  /* width: 150px; */
  /* height: 120px; */
  cursor: pointer;
  -webkit-transition: -webkit-box-shadow 0.25s;
  transition: -webkit-box-shadow 0.25s;
  transition: box-shadow 0.25s;
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
  border-radius: 4px;
  /* background-color: #fff; */
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  position: relative;
}

.large-icon-button-icon {
  font-size: 52px;
  color: #4db6ac; /* teal lighten-2 */
}

.ident-verification-file-img {
  width: 100%;
  max-width: 700px;
}

.hide-payment {
  display: none !important;
}

.z-index-10 {
  z-index: 10 !important;
}

.hm-list-grid-modal {
  max-height: 50vh;
  /* in dialog, full-height does not work... */
}

.video-nogrid-main {
  border: 2px solid green;
}

.profile-policy-box {
  padding: 1rem 0px;
}

.profile-policy-detail-not-editing {
  padding: 1rem 0px;
  word-break: normal;
  overflow-wrap: break-word;
}

.profile-policy-detail-not-editing-body {
  white-space: pre-line; /* for showing a '\n' as nextline */
}

.thumbnail {
  border-radius: 2px;
}

.opacity-0 {
  opacity: 0 !important;
}

.unselectable { /* https://developer.mozilla.org/en-US/docs/Web/CSS/user-select */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

/* .pswp img { */
/*     max-width: none; */
/*     object-fit: contain; */
/* } */
/* override PhotoSwipe default: keep aspect ratio */
.photoswipe-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.line-through {
  text-decoration: line-through;
}

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

.word-keep-all {
  word-break: keep-all;
  line-break: strict;
}

.white-space-no-wrap {
  white-space: nowrap;
}

#hf-link-dropdown.hf-link-dropdown-active #hf-link-dropdown-body {
  overflow: scroll !important;
  padding: 0 8px;
}

/**
 * class for specific sites: banban board
 */
.amazon ul, .amazon ol {
  list-style-type: none;
}

.hf-summernote-editor .amazon ul:not(.browser-default) {
  list-style-type: none !important;
  padding-inline-start: 40px;
}

.hf-summernote-editor .amazon ul:not(.browser-default) > li {
  list-style-type: none !important;
}

.happy-secret {
  display: none;
}

/**
 * Comparator
 */
.swiper-slide {
  cursor: ew-resize;
}

/********************* peace and passion ********************/

/*# sourceMappingURL=styles-for-materializecss-1.2.css.map */