:root {
  --defaultTextColor: #fff;
  --white: #fff;
  --primary: #9ee22e;
  --secondary: #d3d3d3;
  --secondary-2: #28282e;
  --warning: yellow;
  --danger: red;
  /* tipografy */
  --fotnFamily: "SF Pro Text", sans-serif;
  --defaultFontSize: 18px;
  --defaultLineHeight: 24px;
  --h1Size: 48px;
  --h2Size: 40px;
  --h3Size: 30px;
  --h4Size: 20px;
  --h5Size: 10px;
  --defaultRaduis: 5px;
  --header-fixed-padding: 54px;
}

body {
  font-size: 100%;
  font-weight: normal;
  font-family: var(--fotnFamily);
  font-weight: 400;
  font-size: var(--defaultFontSize);
  line-height: var(--defaultLineHeight);
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: var(--defaultTextColor);
  background-color: #101014;
}

body.lock {
  overflow: hidden;
}

/* Radix 弹窗打开时取消其滚动条补偿，避免与 scrollbar-gutter: stable 叠加导致 LTR/RTL 抖动 */
html body[data-scroll-locked] {
  --removed-body-scroll-bar-size: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#root,
.App {
  width: 100%;
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: bold;
  font-family: var(--fotnFamily);
  line-height: 120%;
}

h1 {
  font-size: var(--h1Size);
}

h2 {
  font-size: var(--h2Size);
}

h3 {
  font-size: var(--h3Size);
}

h4 {
  font-size: var(--h4Size);
}

h5 {
  font-size: var(--h5Size);
}

.input,
.textarea {
  padding: 10px 0;
  font-size: var(--defaultFontSize);
  width: 100%;
  background-color: transparent;
  border-bottom: 1px solid #babddb;
}

input,
button,
textarea {
  font-family: var(--fotnFamily);
}

.radius-5 {
  border-radius: var(--defaultRaduis);
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* height: 100%; */
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* 预留滚动条空间，弹窗打开时避免因滚动条消失导致页面抖动 */
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.header-fixed {
  padding-top: var(--header-fixed-padding);
}

.content {
  flex: auto;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
}

/* colors */

.color-primary {
  color: var(--primary);
}

.color-danger {
  color: var(--danger);
}

.color-warning {
  color: var(--warning);
}

.color-secondary {
  /* color: var(--secondary); */
  color: #d3d3d3;
}

/* bg-colors */

.bg-primary {
  background-color: var(--primary);
}

.bg-danger {
  background-color: var(--danger);
}

.bg-warning {
  background-color: var(--warning);
}

.bg-secondary {
  /* background-color: var(--secondary); */
  background-color: #d3d3d3;
}

.noUi-touch-area {
  cursor: pointer;
}

.before-after-slider__first-photo-container,
.before-after-slider__second-photo-container {
  user-select: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}