.noselect *:not(input, textarea) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  touch-callout: none;
}

.m-title {
  padding: 12px 0px 8px 15px;
  font-size: 14px;
  color: var(--FG-1);
  background: var(--BG-0);
}

.m-field {
  color: var(--FG-1);
  background: var(--BG-0);
}
.m-field .lable {
  padding: 15px 15px 3px 15px;
  font-size: 14px;
  color: var(--FG-1);
}
.m-field .value {
  background-color: var(--BG-2);
  min-height: 44px;
  border-top: 0.5px solid var(--FG-3);
  border-bottom: 0.05px solid var(--FG-3);
  padding: 15px;
}

.m-field .input-wrap {
  padding: 0 15px;
}
.m-field .input-wrap input[type='text'],
.m-field .input-wrap textarea {
  border: none;
  padding: 0;

  width: 100%;
  height: 52px;
  line-height: 17px;
  font-size: 17px;
  background-color: transparent;
  color: var(--FG-0);
}
.m-field .input-wrap textarea {
  min-height: 68px;
  padding: 15px 0;
  line-height: 1.4;
}
.m-field *::-webkit-input-placeholder {
  color: var(--FG-2) !important;
}

/* ---spinner------------------------------------------------------------- */
.spinner {
  margin: 100px auto 0;
  /* margin: 0 auto; */
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  /* background-color: #333; */
  background-color: var(--BG-4);

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* ---------------------------------------------------------------- */

body {
  --BG-0: #ededed;
  --BG-1: #f7f7f7;
  --BG-2: #fff;
  --BG-3: #f7f7f7;
  --BG-4: #4c4c4c;
  --BG-5: #fff;
  --FG-0: rgba(0, 0, 0, 0.9);
  --FG-HALF: rgba(0, 0, 0, 0.9);
  --FG-1: rgba(0, 0, 0, 0.5);
  --FG-2: rgba(0, 0, 0, 0.3);
  --FG-3: rgba(0, 0, 0, 0.1);
  --RED: #fa5151;
  --ORANGE: #fa9d3b;
  --YELLOW: #ffc300;
  --GREEN: #91d300;
  --LIGHTGREEN: #95ec69;
  --BRAND: #07c160;
  --BLUE: #10aeff;
  --INDIGO: #1485ee;
  --PURPLE: #6467f0;
  --LINK: #576b95;
  --TEXTGREEN: #06ae56;
  --FG: black;
  --BG: white;
  --v-default: #56c069;
  --v-logo: #4086f4;
}

@media (prefers-color-scheme: dark) {
  body.dark {
    --BG-0: #191919;
    --BG-1: #1f1f1f;
    --BG-2: #232323;
    --BG-3: #2f2f2f;
    --BG-4: #606060;
    --BG-5: #2c2c2c;
    --FG-0: rgba(255, 255, 255, 0.8);
    --FG-HALF: rgba(255, 255, 255, 0.6);
    --FG-1: rgba(255, 255, 255, 0.5);
    --FG-2: rgba(255, 255, 255, 0.3);
    --FG-3: rgba(255, 255, 255, 0.1);
    --RED: #fa5151;
    --ORANGE: #c87d2f;
    --YELLOW: #cc9c00;
    --GREEN: #74a800;
    --LIGHTGREEN: #28b561;
    --BRAND: #07c160;
    --BLUE: #10aeff;
    --INDIGO: #1196ff;
    --PURPLE: #8183ff;
    --LINK: #7d90a9;
    --TEXTGREEN: #259c5c;
    --FG: white;
    --BG: black;
    --v-default: #56c069;
    --v-logo: #4086f4;
  }
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background: var(--BG-0) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, Tahoma, sans-serif;
  min-height: 100vh;
}

a {
  color: var(--LINK) !important;
}

a,
input,
select,
textarea {
  outline: 0;
}