@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.ellipsis-multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  /* 这里的数字表示你想显示的行数 */
  line-clamp: 3;
  /* 这里的数字表示你想显示的行数 */
}

.main-container {
  max-width: 1200px;
  padding: 12px;
  transition: width .5s;
  display: flex;
  flex: 1;
}

.dialog-container {
  transition: width .5s;
  max-width: 1200px;
}

@media (max-width: 984px) {

  .main-container,
  .dialog-container {
    max-width: 95vw;
  }
}


.share-code-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 2.15rem;
  bottom: 2.5rem;
  left: 11%;
  right: 11%;
  padding: 1.25rem 2.25rem;
  box-shadow: 50px 50px 100px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #dedede;
}

.share-code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@media (max-width: 768px) {
  .share-code-container {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
  }

  .share-code {
    width: 80%;
  }

  .desktop-boxShadow {
    box-shadow: none;
  }
}

ol,
ul {
  list-style: auto;
  padding-left: 17px;
}

ol p,
ul p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}


table {
  /* width: 50%; */
  border-collapse: collapse;
  /* margin: 50px 0; */
  /* font-size: 18px; */
  text-align: left;
  border: 1px solid #ddd;
}

th,
td {
  padding: 5px;
  border: 1px solid #ddd;
}

tr.hidden {
  display: none;
}

pre {
  white-space: pre-wrap;
}