/* Custom color theme */

:root {
  --f7-theme-color: #84bebe;
  --f7-theme-color-rgb: 132, 190, 190;
  --f7-theme-color-shade: #69b0b0;
  --f7-theme-color-tint: #9fcccc;
  --f7-font-family: "GT America Cn Th";
  --f7-card-header-text-color: #ffffff;
  --f7-page-custom-bg-color: #ffffff;
  --f7-card-expandable-bg-color: #ffffff;
  --f7-block-text-color: #000000;
  --f7-block-title-text-color: #000000;
  --f7-block-title-large-text-color: #000000;
  --f7-text-color: #000000;
  --f7-login-screen-title-text-color: #000000;
  --f7-navbar-icon-color: #ffffff;
  --f7-list-item-title-text-color: #000000;
  --f7-theme-color-text-color: #000000;
}

/* Invert navigation bars to fill style */

:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}

.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
}

.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;
  --r: 217;
  --g: 0;
  --b: 122;
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}

.theme-dark .navbar-large-transparent,
.theme-dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}

.card-backdrop {
  animation: none !important;
  transition: 400ms;
}

.card-backdrop-in {
  background-color: rgba(0, 0, 0, 0.2);
}

.edit-icon {
  position: absolute;
  top: 262px;
  right: 0px;
}

.fab-label-button {
  margin-bottom: 10px;
}

.image-container {
  display: flex;
  justify-content: center;
  margin: 0 0 5%;
}

@media only screen and (max-height: 660px) {
  .image-container {
    margin: 0;
    overflow: hidden;
  }
}

.padding-left-0 {
  padding-left: 0px !important;
}

.simple-list li {
  line-height: unset;
}

.list-item-poi a:first-of-type {
  width: 100%;
}

.colorpicker-custom > div {
  flex-direction: row-reverse;
  width: 100%;
  padding-left: 0px !important;
}

.sheet-style {
  height: auto;
  z-index: 11000;
}

.icon-custom {
  height: 18px;
  width: 50%;
  min-width: 18px;
  border: 1px solid transparent;
  border-radius: 50%;
}

.icon-custom-more-vert {
  font-size: 180%;
  cursor: pointer;
  color: #fff;
}

.icon-custom-add-circle {
  color: #778899;
  font-size: 450%;
  cursor: pointer;
  margin-right: 2%;
}

.circle {
  width: 20px;
  height: 20px;
  background: #ff0000;
  border-radius: 50%;
}

/* discover css */

.material-icons-image {
  width: 100%;
  font-size: 75vw;
  color: #d3d3d3;
}

.material-icons-image-views {
  width: 100%;
  font-size: 69vw;
  color: #d3d3d3;
}

.model-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-add-model-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.button-add-model-container button {
  width: 80%;
}

.card-footer {
  padding: 5px 7%;
  color: #000;
  font-size: 1.3rem;
}

.card-footer-icon-container,
.card-footer-icon-container div {
  display: flex;
  flex-direction: row;
}

.card-footer-icon-container {
  width: 100%;
  justify-content: space-between;
}

.card-footer-icon-container div p {
  margin: 0 5px;
}

.card-footer-icon-container span {
  display: flex;
  align-self: center;
}

.icon-custom-more-vert {
  font-size: 180%;
  cursor: pointer;
  color: #fff;
}

.icon-arrow-back {
  position: absolute;
  left: 0;
  margin-left: 10px;
  font-size: 25px;
}

.icon-custom-add-circle {
  color: #778899;
  font-size: 450%;
  cursor: pointer;
  margin-right: 2%;
}

.card-model-dimension {
  width: 80%;
}

.add-icon-circle-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 5%;
}

.image-container {
  display: flex;
  justify-content: center;
  margin: 0 0 5%;
}

.poi-input-content {
  text-align: end;
}

.color-green {
  color: #008000;
}

.color-red {
  color: #ff0000;
}

.color-orange {
  color: #ffa500;
}

.simple-list {
  cursor: pointer;
}

.poi-title {
  font-size: 2rem;
  margin: 0 5%;
}

.color-picker-custom li,
.color-picker-custom li .item-content {
  padding: 0;
}

.button-container {
  display: flex;
  justify-content: space-between;
  padding: 1% 5%;
}

.button-raised {
  width: 25%;
}

.discover-canvas {
  position: absolute;
}

.hidden {
  display: none;
}

.canvas-dimensions {
  width: 150%;
}

.circle {
  width: 20px;
  height: 20px;
  background: #ff0000;
  border-radius: 50%;
}

.button-poi {
  width: 80%;
}

.button-poi-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.preloader-container {
  margin: 40px 0 10px;
  display: flex;
  justify-content: center;
}

.popover-open {
  position: absolute;
  right: 0;
  margin-left: 10px;
  font-size: 15px;
}

option {
  padding-right: 5%;
}

.fab-buttons-top {
  margin-bottom: 0px;
}

/* .fab-label-button {
  margin-bottom: 10px;
} */

/* .fab-buttons-top a + a {
  margin-bottom: 0px;
} */

.padding-left-0 {
  padding-left: 0px !important;
}

.colorpicker-custom > div {
  flex-direction: row-reverse;
  width: 100%;
  padding-left: 0px !important;
}

.sheet-style {
  height: auto;
  z-index: 11000;
}

.icon-custom {
  height: 18px;
  width: 50%;
  min-width: 18px;
  border: 1px solid transparent;
  border-radius: 50%;
}

.item-media {
  align-self: center !important;
}

.bg-white {
  background-color: #fff;
}

#mask-buttons::after {
  height: 0px;
}

.color-picker-popover {
  top: 15rem !important;
}

.item-input-wrap::after {
  height: 0px !important;
}

.simple-list li {
  line-height: unset;
}

.list-item-poi a:first-of-type {
  width: 100%;
}

.zIndex100 {
  z-index: 100;
}

#tab-contents > .list:first-of-type {
  margin: 0;
}

#tab-contents .item-text {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#tab-contents .item-text::-webkit-scrollbar {
  display: none;
}

.image-button-container {
  display: flex;
  flex-direction: row;
}

.image-button-container a:first-of-type {
  padding-left: 0;
}

.item-input-wrap > input[name="attchmBase64"] {
  width: 100%;
  padding-top: 7px;
}

.item-input-wrap > input[name="audioBase64"] {
  width: 100%;
  padding-top: 7px;
}

@media only screen and (max-height: 660px) {
  .image-container {
    margin: 0;
    overflow: hidden;
  }
}