@charset "UTF-8";
:root {
  --mainColor: #017ef8;
  --mainLightColor: #e8f2ff;
  --mainDarkColor: #004299;
  --secondaryColor: #0056b3;
  --accentColor: #00aaff;
  --titleColor: #0a2540;
  --textColor: #1a365d;
  --descColor: #4a5568;
  --mutedColor: #718096;
  --borderColor: #e5e7eb;
  --infoColor: #3b82f6;
  --successColor: #10b981;
  --warningColor: #f59e0b;
  --dangerColor: #ef4444;
  --bgColor: #fff;
  --bgLightColor: #f8f9ff;
  --bgDarkColor: #23263a;
  --bgLinearColor: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  --maxViewWidth: 80rem;
  --headerHeight: 5rem;
  --footerHeight: auto;
  --bsSize: 0 0.125rem 1.25rem 0 rgba(1, 126, 248, 0.1);
  --bsSizeHover: 0 0.9375rem 1.875rem rgba(1, 126, 248, 0.1);
  --brSize: 0.875rem;
  --spacing: 0.25rem;
  --mixMainColor5: color-mix(in srgb, var(--mainColor) 5%, transparent);
  --mixMainColor10: color-mix(in srgb, var(--mainColor) 10%, transparent);
  --mixMainColor15: color-mix(in srgb, var(--mainColor) 15%, transparent);
  --mixMainColor20: color-mix(in srgb, var(--mainColor) 20%, transparent);
  --mixMainColor25: color-mix(in srgb, var(--mainColor) 25%, transparent);
  --mixMainColor30: color-mix(in srgb, var(--mainColor) 30%, transparent);
  --mixMainColor35: color-mix(in srgb, var(--mainColor) 35%, transparent);
  --mixMainColor40: color-mix(in srgb, var(--mainColor) 40%, transparent);
  --mixMainColor45: color-mix(in srgb, var(--mainColor) 45%, transparent);
  --mixMainColor50: color-mix(in srgb, var(--mainColor) 50%, transparent);
  --mixMainColor55: color-mix(in srgb, var(--mainColor) 55%, transparent);
  --mixMainColor60: color-mix(in srgb, var(--mainColor) 60%, transparent);
  --mixMainColor65: color-mix(in srgb, var(--mainColor) 65%, transparent);
  --mixMainColor70: color-mix(in srgb, var(--mainColor) 70%, transparent);
  --mixMainColor75: color-mix(in srgb, var(--mainColor) 75%, transparent);
  --mixMainColor80: color-mix(in srgb, var(--mainColor) 80%, transparent);
  --mixMainColor85: color-mix(in srgb, var(--mainColor) 85%, transparent);
  --mixMainColor90: color-mix(in srgb, var(--mainColor) 90%, transparent);
  --mixMainColor95: color-mix(in srgb, var(--mainColor) 95%, transparent);
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(1.875rem);
            transform: translateY(1.875rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(1.875rem);
            transform: translateY(1.875rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-3.125rem);
            transform: translateX(-3.125rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-3.125rem);
            transform: translateX(-3.125rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-0.625rem);
            transform: translateY(-0.625rem);
  }
}
@keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-0.625rem);
            transform: translateY(-0.625rem);
  }
}
.fade-in-up {
  -webkit-animation: fadeInUp 0.8s ease;
          animation: fadeInUp 0.8s ease;
}

.slide-in-left {
  -webkit-animation: slideInLeft 0.8s ease;
          animation: slideInLeft 0.8s ease;
}

.float {
  -webkit-animation: float 3s ease-in-out infinite;
          animation: float 3s ease-in-out infinite;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
  word-break: break-all;
  word-wrap: break-word;
}

html {
  color: #333;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  font: normal 16px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Source Han Sans CN DemiLight", sans-serif;
  white-space: normal;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
  transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}
a:hover, a:active, a:focus {
  opacity: 0.85;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: normal;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.75rem;
}

img {
  max-width: 100%;
  height: auto;
  border: none;
}

input,
button,
textarea,
select {
  outline: none;
}

input::-webkit-input-placeholder {
  color: #999;
}

input::-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder {
  color: #999;
}

input::-ms-input-placeholder {
  color: #999;
}

input::placeholder {
  color: #999;
}

button {
  font-size: 0.875rem;
  cursor: pointer;
  background: transparent;
  border: none;
}

textarea {
  border-radius: 0.25rem;
}

ol,
ul {
  list-style: none;
}

strong {
  font-weight: 700;
}

small {
  font-size: 85%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  vertical-align: middle;
  border: 0.0625rem solid #eee;
}

::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

::-webkit-scrollbar-track-piece {
  background-color: #f0f0f0;
  background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#f0f0f0));
  background-image: linear-gradient(90deg, #fff, #f0f0f0);
}

::-webkit-scrollbar-thumb {
  min-height: 1.5625rem;
  background-color: #ccc;
  border-radius: 624.9375rem;
}
::-webkit-scrollbar-thumb:active {
  background-color: #a0a0a0;
}

.dp-n {
  display: none;
}
.dp-b {
  display: block;
}
.dp-i {
  display: inline;
}
.dp-ib {
  display: inline-block;
}
.dp-f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.dp-if {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

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

.fl-l {
  float: left;
}
.fl-r {
  float: right;
}
.fl-n {
  float: none;
}

.cl {
  zoom: 1;
}
.cl-l, .cl-r, .cl-b, .cl-n {
  clear: both;
}
.cl::after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: "";
}

.clear,
.clearfix {
  clear: both;
  height: 0;
  overflow: hidden;
  font-size: 0;
}

.m-0 {
  margin: calc(var(--spacing) * 0);
}

.m-1 {
  margin: calc(var(--spacing) * 1);
}

.m-2 {
  margin: calc(var(--spacing) * 2);
}

.m-3 {
  margin: calc(var(--spacing) * 3);
}

.m-4 {
  margin: calc(var(--spacing) * 4);
}

.m-5 {
  margin: calc(var(--spacing) * 5);
}

.m-6 {
  margin: calc(var(--spacing) * 6);
}

.m-7 {
  margin: calc(var(--spacing) * 7);
}

.m-8 {
  margin: calc(var(--spacing) * 8);
}

.m-9 {
  margin: calc(var(--spacing) * 9);
}

.m-10 {
  margin: calc(var(--spacing) * 10);
}

.m-11 {
  margin: calc(var(--spacing) * 11);
}

.m-12 {
  margin: calc(var(--spacing) * 12);
}

.m-13 {
  margin: calc(var(--spacing) * 13);
}

.m-14 {
  margin: calc(var(--spacing) * 14);
}

.m-15 {
  margin: calc(var(--spacing) * 15);
}

.m-16 {
  margin: calc(var(--spacing) * 16);
}

.m-17 {
  margin: calc(var(--spacing) * 17);
}

.m-18 {
  margin: calc(var(--spacing) * 18);
}

.m-19 {
  margin: calc(var(--spacing) * 19);
}

.m-20 {
  margin: calc(var(--spacing) * 20);
}

.m-21 {
  margin: calc(var(--spacing) * 21);
}

.m-22 {
  margin: calc(var(--spacing) * 22);
}

.m-23 {
  margin: calc(var(--spacing) * 23);
}

.m-24 {
  margin: calc(var(--spacing) * 24);
}

.m-25 {
  margin: calc(var(--spacing) * 25);
}

.m-26 {
  margin: calc(var(--spacing) * 26);
}

.m-27 {
  margin: calc(var(--spacing) * 27);
}

.m-28 {
  margin: calc(var(--spacing) * 28);
}

.m-29 {
  margin: calc(var(--spacing) * 29);
}

.m-30 {
  margin: calc(var(--spacing) * 30);
}

.m-31 {
  margin: calc(var(--spacing) * 31);
}

.m-32 {
  margin: calc(var(--spacing) * 32);
}

.m-33 {
  margin: calc(var(--spacing) * 33);
}

.m-34 {
  margin: calc(var(--spacing) * 34);
}

.m-35 {
  margin: calc(var(--spacing) * 35);
}

.m-36 {
  margin: calc(var(--spacing) * 36);
}

.m-37 {
  margin: calc(var(--spacing) * 37);
}

.m-38 {
  margin: calc(var(--spacing) * 38);
}

.m-39 {
  margin: calc(var(--spacing) * 39);
}

.m-40 {
  margin: calc(var(--spacing) * 40);
}

.m-41 {
  margin: calc(var(--spacing) * 41);
}

.m-42 {
  margin: calc(var(--spacing) * 42);
}

.m-43 {
  margin: calc(var(--spacing) * 43);
}

.m-44 {
  margin: calc(var(--spacing) * 44);
}

.m-45 {
  margin: calc(var(--spacing) * 45);
}

.m-46 {
  margin: calc(var(--spacing) * 46);
}

.m-47 {
  margin: calc(var(--spacing) * 47);
}

.m-48 {
  margin: calc(var(--spacing) * 48);
}

.m-49 {
  margin: calc(var(--spacing) * 49);
}

.m-50 {
  margin: calc(var(--spacing) * 50);
}

.p-0 {
  padding: calc(var(--spacing) * 0);
}

.p-1 {
  padding: calc(var(--spacing) * 1);
}

.p-2 {
  padding: calc(var(--spacing) * 2);
}

.p-3 {
  padding: calc(var(--spacing) * 3);
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-5 {
  padding: calc(var(--spacing) * 5);
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

.p-7 {
  padding: calc(var(--spacing) * 7);
}

.p-8 {
  padding: calc(var(--spacing) * 8);
}

.p-9 {
  padding: calc(var(--spacing) * 9);
}

.p-10 {
  padding: calc(var(--spacing) * 10);
}

.p-11 {
  padding: calc(var(--spacing) * 11);
}

.p-12 {
  padding: calc(var(--spacing) * 12);
}

.p-13 {
  padding: calc(var(--spacing) * 13);
}

.p-14 {
  padding: calc(var(--spacing) * 14);
}

.p-15 {
  padding: calc(var(--spacing) * 15);
}

.p-16 {
  padding: calc(var(--spacing) * 16);
}

.p-17 {
  padding: calc(var(--spacing) * 17);
}

.p-18 {
  padding: calc(var(--spacing) * 18);
}

.p-19 {
  padding: calc(var(--spacing) * 19);
}

.p-20 {
  padding: calc(var(--spacing) * 20);
}

.p-21 {
  padding: calc(var(--spacing) * 21);
}

.p-22 {
  padding: calc(var(--spacing) * 22);
}

.p-23 {
  padding: calc(var(--spacing) * 23);
}

.p-24 {
  padding: calc(var(--spacing) * 24);
}

.p-25 {
  padding: calc(var(--spacing) * 25);
}

.p-26 {
  padding: calc(var(--spacing) * 26);
}

.p-27 {
  padding: calc(var(--spacing) * 27);
}

.p-28 {
  padding: calc(var(--spacing) * 28);
}

.p-29 {
  padding: calc(var(--spacing) * 29);
}

.p-30 {
  padding: calc(var(--spacing) * 30);
}

.p-31 {
  padding: calc(var(--spacing) * 31);
}

.p-32 {
  padding: calc(var(--spacing) * 32);
}

.p-33 {
  padding: calc(var(--spacing) * 33);
}

.p-34 {
  padding: calc(var(--spacing) * 34);
}

.p-35 {
  padding: calc(var(--spacing) * 35);
}

.p-36 {
  padding: calc(var(--spacing) * 36);
}

.p-37 {
  padding: calc(var(--spacing) * 37);
}

.p-38 {
  padding: calc(var(--spacing) * 38);
}

.p-39 {
  padding: calc(var(--spacing) * 39);
}

.p-40 {
  padding: calc(var(--spacing) * 40);
}

.p-41 {
  padding: calc(var(--spacing) * 41);
}

.p-42 {
  padding: calc(var(--spacing) * 42);
}

.p-43 {
  padding: calc(var(--spacing) * 43);
}

.p-44 {
  padding: calc(var(--spacing) * 44);
}

.p-45 {
  padding: calc(var(--spacing) * 45);
}

.p-46 {
  padding: calc(var(--spacing) * 46);
}

.p-47 {
  padding: calc(var(--spacing) * 47);
}

.p-48 {
  padding: calc(var(--spacing) * 48);
}

.p-49 {
  padding: calc(var(--spacing) * 49);
}

.p-50 {
  padding: calc(var(--spacing) * 50);
}

.w-0 {
  width: calc(var(--spacing) * 0);
}

.w-1 {
  width: calc(var(--spacing) * 1);
}

.w-2 {
  width: calc(var(--spacing) * 2);
}

.w-3 {
  width: calc(var(--spacing) * 3);
}

.w-4 {
  width: calc(var(--spacing) * 4);
}

.w-5 {
  width: calc(var(--spacing) * 5);
}

.w-6 {
  width: calc(var(--spacing) * 6);
}

.w-7 {
  width: calc(var(--spacing) * 7);
}

.w-8 {
  width: calc(var(--spacing) * 8);
}

.w-9 {
  width: calc(var(--spacing) * 9);
}

.w-10 {
  width: calc(var(--spacing) * 10);
}

.w-11 {
  width: calc(var(--spacing) * 11);
}

.w-12 {
  width: calc(var(--spacing) * 12);
}

.w-13 {
  width: calc(var(--spacing) * 13);
}

.w-14 {
  width: calc(var(--spacing) * 14);
}

.w-15 {
  width: calc(var(--spacing) * 15);
}

.w-16 {
  width: calc(var(--spacing) * 16);
}

.w-17 {
  width: calc(var(--spacing) * 17);
}

.w-18 {
  width: calc(var(--spacing) * 18);
}

.w-19 {
  width: calc(var(--spacing) * 19);
}

.w-20 {
  width: calc(var(--spacing) * 20);
}

.w-21 {
  width: calc(var(--spacing) * 21);
}

.w-22 {
  width: calc(var(--spacing) * 22);
}

.w-23 {
  width: calc(var(--spacing) * 23);
}

.w-24 {
  width: calc(var(--spacing) * 24);
}

.w-25 {
  width: calc(var(--spacing) * 25);
}

.w-26 {
  width: calc(var(--spacing) * 26);
}

.w-27 {
  width: calc(var(--spacing) * 27);
}

.w-28 {
  width: calc(var(--spacing) * 28);
}

.w-29 {
  width: calc(var(--spacing) * 29);
}

.w-30 {
  width: calc(var(--spacing) * 30);
}

.w-31 {
  width: calc(var(--spacing) * 31);
}

.w-32 {
  width: calc(var(--spacing) * 32);
}

.w-33 {
  width: calc(var(--spacing) * 33);
}

.w-34 {
  width: calc(var(--spacing) * 34);
}

.w-35 {
  width: calc(var(--spacing) * 35);
}

.w-36 {
  width: calc(var(--spacing) * 36);
}

.w-37 {
  width: calc(var(--spacing) * 37);
}

.w-38 {
  width: calc(var(--spacing) * 38);
}

.w-39 {
  width: calc(var(--spacing) * 39);
}

.w-40 {
  width: calc(var(--spacing) * 40);
}

.w-41 {
  width: calc(var(--spacing) * 41);
}

.w-42 {
  width: calc(var(--spacing) * 42);
}

.w-43 {
  width: calc(var(--spacing) * 43);
}

.w-44 {
  width: calc(var(--spacing) * 44);
}

.w-45 {
  width: calc(var(--spacing) * 45);
}

.w-46 {
  width: calc(var(--spacing) * 46);
}

.w-47 {
  width: calc(var(--spacing) * 47);
}

.w-48 {
  width: calc(var(--spacing) * 48);
}

.w-49 {
  width: calc(var(--spacing) * 49);
}

.w-50 {
  width: calc(var(--spacing) * 50);
}

.h-0 {
  height: calc(var(--spacing) * 0);
}

.h-1 {
  height: calc(var(--spacing) * 1);
}

.h-2 {
  height: calc(var(--spacing) * 2);
}

.h-3 {
  height: calc(var(--spacing) * 3);
}

.h-4 {
  height: calc(var(--spacing) * 4);
}

.h-5 {
  height: calc(var(--spacing) * 5);
}

.h-6 {
  height: calc(var(--spacing) * 6);
}

.h-7 {
  height: calc(var(--spacing) * 7);
}

.h-8 {
  height: calc(var(--spacing) * 8);
}

.h-9 {
  height: calc(var(--spacing) * 9);
}

.h-10 {
  height: calc(var(--spacing) * 10);
}

.h-11 {
  height: calc(var(--spacing) * 11);
}

.h-12 {
  height: calc(var(--spacing) * 12);
}

.h-13 {
  height: calc(var(--spacing) * 13);
}

.h-14 {
  height: calc(var(--spacing) * 14);
}

.h-15 {
  height: calc(var(--spacing) * 15);
}

.h-16 {
  height: calc(var(--spacing) * 16);
}

.h-17 {
  height: calc(var(--spacing) * 17);
}

.h-18 {
  height: calc(var(--spacing) * 18);
}

.h-19 {
  height: calc(var(--spacing) * 19);
}

.h-20 {
  height: calc(var(--spacing) * 20);
}

.h-21 {
  height: calc(var(--spacing) * 21);
}

.h-22 {
  height: calc(var(--spacing) * 22);
}

.h-23 {
  height: calc(var(--spacing) * 23);
}

.h-24 {
  height: calc(var(--spacing) * 24);
}

.h-25 {
  height: calc(var(--spacing) * 25);
}

.h-26 {
  height: calc(var(--spacing) * 26);
}

.h-27 {
  height: calc(var(--spacing) * 27);
}

.h-28 {
  height: calc(var(--spacing) * 28);
}

.h-29 {
  height: calc(var(--spacing) * 29);
}

.h-30 {
  height: calc(var(--spacing) * 30);
}

.h-31 {
  height: calc(var(--spacing) * 31);
}

.h-32 {
  height: calc(var(--spacing) * 32);
}

.h-33 {
  height: calc(var(--spacing) * 33);
}

.h-34 {
  height: calc(var(--spacing) * 34);
}

.h-35 {
  height: calc(var(--spacing) * 35);
}

.h-36 {
  height: calc(var(--spacing) * 36);
}

.h-37 {
  height: calc(var(--spacing) * 37);
}

.h-38 {
  height: calc(var(--spacing) * 38);
}

.h-39 {
  height: calc(var(--spacing) * 39);
}

.h-40 {
  height: calc(var(--spacing) * 40);
}

.h-41 {
  height: calc(var(--spacing) * 41);
}

.h-42 {
  height: calc(var(--spacing) * 42);
}

.h-43 {
  height: calc(var(--spacing) * 43);
}

.h-44 {
  height: calc(var(--spacing) * 44);
}

.h-45 {
  height: calc(var(--spacing) * 45);
}

.h-46 {
  height: calc(var(--spacing) * 46);
}

.h-47 {
  height: calc(var(--spacing) * 47);
}

.h-48 {
  height: calc(var(--spacing) * 48);
}

.h-49 {
  height: calc(var(--spacing) * 49);
}

.h-50 {
  height: calc(var(--spacing) * 50);
}

.max-w-0 {
  max-width: calc(var(--spacing) * 0);
}

.max-w-1 {
  max-width: calc(var(--spacing) * 1);
}

.max-w-2 {
  max-width: calc(var(--spacing) * 2);
}

.max-w-3 {
  max-width: calc(var(--spacing) * 3);
}

.max-w-4 {
  max-width: calc(var(--spacing) * 4);
}

.max-w-5 {
  max-width: calc(var(--spacing) * 5);
}

.max-w-6 {
  max-width: calc(var(--spacing) * 6);
}

.max-w-7 {
  max-width: calc(var(--spacing) * 7);
}

.max-w-8 {
  max-width: calc(var(--spacing) * 8);
}

.max-w-9 {
  max-width: calc(var(--spacing) * 9);
}

.max-w-10 {
  max-width: calc(var(--spacing) * 10);
}

.max-w-11 {
  max-width: calc(var(--spacing) * 11);
}

.max-w-12 {
  max-width: calc(var(--spacing) * 12);
}

.max-w-13 {
  max-width: calc(var(--spacing) * 13);
}

.max-w-14 {
  max-width: calc(var(--spacing) * 14);
}

.max-w-15 {
  max-width: calc(var(--spacing) * 15);
}

.max-w-16 {
  max-width: calc(var(--spacing) * 16);
}

.max-w-17 {
  max-width: calc(var(--spacing) * 17);
}

.max-w-18 {
  max-width: calc(var(--spacing) * 18);
}

.max-w-19 {
  max-width: calc(var(--spacing) * 19);
}

.max-w-20 {
  max-width: calc(var(--spacing) * 20);
}

.max-w-21 {
  max-width: calc(var(--spacing) * 21);
}

.max-w-22 {
  max-width: calc(var(--spacing) * 22);
}

.max-w-23 {
  max-width: calc(var(--spacing) * 23);
}

.max-w-24 {
  max-width: calc(var(--spacing) * 24);
}

.max-w-25 {
  max-width: calc(var(--spacing) * 25);
}

.max-w-26 {
  max-width: calc(var(--spacing) * 26);
}

.max-w-27 {
  max-width: calc(var(--spacing) * 27);
}

.max-w-28 {
  max-width: calc(var(--spacing) * 28);
}

.max-w-29 {
  max-width: calc(var(--spacing) * 29);
}

.max-w-30 {
  max-width: calc(var(--spacing) * 30);
}

.max-w-31 {
  max-width: calc(var(--spacing) * 31);
}

.max-w-32 {
  max-width: calc(var(--spacing) * 32);
}

.max-w-33 {
  max-width: calc(var(--spacing) * 33);
}

.max-w-34 {
  max-width: calc(var(--spacing) * 34);
}

.max-w-35 {
  max-width: calc(var(--spacing) * 35);
}

.max-w-36 {
  max-width: calc(var(--spacing) * 36);
}

.max-w-37 {
  max-width: calc(var(--spacing) * 37);
}

.max-w-38 {
  max-width: calc(var(--spacing) * 38);
}

.max-w-39 {
  max-width: calc(var(--spacing) * 39);
}

.max-w-40 {
  max-width: calc(var(--spacing) * 40);
}

.max-w-41 {
  max-width: calc(var(--spacing) * 41);
}

.max-w-42 {
  max-width: calc(var(--spacing) * 42);
}

.max-w-43 {
  max-width: calc(var(--spacing) * 43);
}

.max-w-44 {
  max-width: calc(var(--spacing) * 44);
}

.max-w-45 {
  max-width: calc(var(--spacing) * 45);
}

.max-w-46 {
  max-width: calc(var(--spacing) * 46);
}

.max-w-47 {
  max-width: calc(var(--spacing) * 47);
}

.max-w-48 {
  max-width: calc(var(--spacing) * 48);
}

.max-w-49 {
  max-width: calc(var(--spacing) * 49);
}

.max-w-50 {
  max-width: calc(var(--spacing) * 50);
}

.max-h-0 {
  max-height: calc(var(--spacing) * 0);
}

.max-h-1 {
  max-height: calc(var(--spacing) * 1);
}

.max-h-2 {
  max-height: calc(var(--spacing) * 2);
}

.max-h-3 {
  max-height: calc(var(--spacing) * 3);
}

.max-h-4 {
  max-height: calc(var(--spacing) * 4);
}

.max-h-5 {
  max-height: calc(var(--spacing) * 5);
}

.max-h-6 {
  max-height: calc(var(--spacing) * 6);
}

.max-h-7 {
  max-height: calc(var(--spacing) * 7);
}

.max-h-8 {
  max-height: calc(var(--spacing) * 8);
}

.max-h-9 {
  max-height: calc(var(--spacing) * 9);
}

.max-h-10 {
  max-height: calc(var(--spacing) * 10);
}

.max-h-11 {
  max-height: calc(var(--spacing) * 11);
}

.max-h-12 {
  max-height: calc(var(--spacing) * 12);
}

.max-h-13 {
  max-height: calc(var(--spacing) * 13);
}

.max-h-14 {
  max-height: calc(var(--spacing) * 14);
}

.max-h-15 {
  max-height: calc(var(--spacing) * 15);
}

.max-h-16 {
  max-height: calc(var(--spacing) * 16);
}

.max-h-17 {
  max-height: calc(var(--spacing) * 17);
}

.max-h-18 {
  max-height: calc(var(--spacing) * 18);
}

.max-h-19 {
  max-height: calc(var(--spacing) * 19);
}

.max-h-20 {
  max-height: calc(var(--spacing) * 20);
}

.max-h-21 {
  max-height: calc(var(--spacing) * 21);
}

.max-h-22 {
  max-height: calc(var(--spacing) * 22);
}

.max-h-23 {
  max-height: calc(var(--spacing) * 23);
}

.max-h-24 {
  max-height: calc(var(--spacing) * 24);
}

.max-h-25 {
  max-height: calc(var(--spacing) * 25);
}

.max-h-26 {
  max-height: calc(var(--spacing) * 26);
}

.max-h-27 {
  max-height: calc(var(--spacing) * 27);
}

.max-h-28 {
  max-height: calc(var(--spacing) * 28);
}

.max-h-29 {
  max-height: calc(var(--spacing) * 29);
}

.max-h-30 {
  max-height: calc(var(--spacing) * 30);
}

.max-h-31 {
  max-height: calc(var(--spacing) * 31);
}

.max-h-32 {
  max-height: calc(var(--spacing) * 32);
}

.max-h-33 {
  max-height: calc(var(--spacing) * 33);
}

.max-h-34 {
  max-height: calc(var(--spacing) * 34);
}

.max-h-35 {
  max-height: calc(var(--spacing) * 35);
}

.max-h-36 {
  max-height: calc(var(--spacing) * 36);
}

.max-h-37 {
  max-height: calc(var(--spacing) * 37);
}

.max-h-38 {
  max-height: calc(var(--spacing) * 38);
}

.max-h-39 {
  max-height: calc(var(--spacing) * 39);
}

.max-h-40 {
  max-height: calc(var(--spacing) * 40);
}

.max-h-41 {
  max-height: calc(var(--spacing) * 41);
}

.max-h-42 {
  max-height: calc(var(--spacing) * 42);
}

.max-h-43 {
  max-height: calc(var(--spacing) * 43);
}

.max-h-44 {
  max-height: calc(var(--spacing) * 44);
}

.max-h-45 {
  max-height: calc(var(--spacing) * 45);
}

.max-h-46 {
  max-height: calc(var(--spacing) * 46);
}

.max-h-47 {
  max-height: calc(var(--spacing) * 47);
}

.max-h-48 {
  max-height: calc(var(--spacing) * 48);
}

.max-h-49 {
  max-height: calc(var(--spacing) * 49);
}

.max-h-50 {
  max-height: calc(var(--spacing) * 50);
}

.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}

.min-w-1 {
  min-width: calc(var(--spacing) * 1);
}

.min-w-2 {
  min-width: calc(var(--spacing) * 2);
}

.min-w-3 {
  min-width: calc(var(--spacing) * 3);
}

.min-w-4 {
  min-width: calc(var(--spacing) * 4);
}

.min-w-5 {
  min-width: calc(var(--spacing) * 5);
}

.min-w-6 {
  min-width: calc(var(--spacing) * 6);
}

.min-w-7 {
  min-width: calc(var(--spacing) * 7);
}

.min-w-8 {
  min-width: calc(var(--spacing) * 8);
}

.min-w-9 {
  min-width: calc(var(--spacing) * 9);
}

.min-w-10 {
  min-width: calc(var(--spacing) * 10);
}

.min-w-11 {
  min-width: calc(var(--spacing) * 11);
}

.min-w-12 {
  min-width: calc(var(--spacing) * 12);
}

.min-w-13 {
  min-width: calc(var(--spacing) * 13);
}

.min-w-14 {
  min-width: calc(var(--spacing) * 14);
}

.min-w-15 {
  min-width: calc(var(--spacing) * 15);
}

.min-w-16 {
  min-width: calc(var(--spacing) * 16);
}

.min-w-17 {
  min-width: calc(var(--spacing) * 17);
}

.min-w-18 {
  min-width: calc(var(--spacing) * 18);
}

.min-w-19 {
  min-width: calc(var(--spacing) * 19);
}

.min-w-20 {
  min-width: calc(var(--spacing) * 20);
}

.min-w-21 {
  min-width: calc(var(--spacing) * 21);
}

.min-w-22 {
  min-width: calc(var(--spacing) * 22);
}

.min-w-23 {
  min-width: calc(var(--spacing) * 23);
}

.min-w-24 {
  min-width: calc(var(--spacing) * 24);
}

.min-w-25 {
  min-width: calc(var(--spacing) * 25);
}

.min-w-26 {
  min-width: calc(var(--spacing) * 26);
}

.min-w-27 {
  min-width: calc(var(--spacing) * 27);
}

.min-w-28 {
  min-width: calc(var(--spacing) * 28);
}

.min-w-29 {
  min-width: calc(var(--spacing) * 29);
}

.min-w-30 {
  min-width: calc(var(--spacing) * 30);
}

.min-w-31 {
  min-width: calc(var(--spacing) * 31);
}

.min-w-32 {
  min-width: calc(var(--spacing) * 32);
}

.min-w-33 {
  min-width: calc(var(--spacing) * 33);
}

.min-w-34 {
  min-width: calc(var(--spacing) * 34);
}

.min-w-35 {
  min-width: calc(var(--spacing) * 35);
}

.min-w-36 {
  min-width: calc(var(--spacing) * 36);
}

.min-w-37 {
  min-width: calc(var(--spacing) * 37);
}

.min-w-38 {
  min-width: calc(var(--spacing) * 38);
}

.min-w-39 {
  min-width: calc(var(--spacing) * 39);
}

.min-w-40 {
  min-width: calc(var(--spacing) * 40);
}

.min-w-41 {
  min-width: calc(var(--spacing) * 41);
}

.min-w-42 {
  min-width: calc(var(--spacing) * 42);
}

.min-w-43 {
  min-width: calc(var(--spacing) * 43);
}

.min-w-44 {
  min-width: calc(var(--spacing) * 44);
}

.min-w-45 {
  min-width: calc(var(--spacing) * 45);
}

.min-w-46 {
  min-width: calc(var(--spacing) * 46);
}

.min-w-47 {
  min-width: calc(var(--spacing) * 47);
}

.min-w-48 {
  min-width: calc(var(--spacing) * 48);
}

.min-w-49 {
  min-width: calc(var(--spacing) * 49);
}

.min-w-50 {
  min-width: calc(var(--spacing) * 50);
}

.min-h-0 {
  min-height: calc(var(--spacing) * 0);
}

.min-h-1 {
  min-height: calc(var(--spacing) * 1);
}

.min-h-2 {
  min-height: calc(var(--spacing) * 2);
}

.min-h-3 {
  min-height: calc(var(--spacing) * 3);
}

.min-h-4 {
  min-height: calc(var(--spacing) * 4);
}

.min-h-5 {
  min-height: calc(var(--spacing) * 5);
}

.min-h-6 {
  min-height: calc(var(--spacing) * 6);
}

.min-h-7 {
  min-height: calc(var(--spacing) * 7);
}

.min-h-8 {
  min-height: calc(var(--spacing) * 8);
}

.min-h-9 {
  min-height: calc(var(--spacing) * 9);
}

.min-h-10 {
  min-height: calc(var(--spacing) * 10);
}

.min-h-11 {
  min-height: calc(var(--spacing) * 11);
}

.min-h-12 {
  min-height: calc(var(--spacing) * 12);
}

.min-h-13 {
  min-height: calc(var(--spacing) * 13);
}

.min-h-14 {
  min-height: calc(var(--spacing) * 14);
}

.min-h-15 {
  min-height: calc(var(--spacing) * 15);
}

.min-h-16 {
  min-height: calc(var(--spacing) * 16);
}

.min-h-17 {
  min-height: calc(var(--spacing) * 17);
}

.min-h-18 {
  min-height: calc(var(--spacing) * 18);
}

.min-h-19 {
  min-height: calc(var(--spacing) * 19);
}

.min-h-20 {
  min-height: calc(var(--spacing) * 20);
}

.min-h-21 {
  min-height: calc(var(--spacing) * 21);
}

.min-h-22 {
  min-height: calc(var(--spacing) * 22);
}

.min-h-23 {
  min-height: calc(var(--spacing) * 23);
}

.min-h-24 {
  min-height: calc(var(--spacing) * 24);
}

.min-h-25 {
  min-height: calc(var(--spacing) * 25);
}

.min-h-26 {
  min-height: calc(var(--spacing) * 26);
}

.min-h-27 {
  min-height: calc(var(--spacing) * 27);
}

.min-h-28 {
  min-height: calc(var(--spacing) * 28);
}

.min-h-29 {
  min-height: calc(var(--spacing) * 29);
}

.min-h-30 {
  min-height: calc(var(--spacing) * 30);
}

.min-h-31 {
  min-height: calc(var(--spacing) * 31);
}

.min-h-32 {
  min-height: calc(var(--spacing) * 32);
}

.min-h-33 {
  min-height: calc(var(--spacing) * 33);
}

.min-h-34 {
  min-height: calc(var(--spacing) * 34);
}

.min-h-35 {
  min-height: calc(var(--spacing) * 35);
}

.min-h-36 {
  min-height: calc(var(--spacing) * 36);
}

.min-h-37 {
  min-height: calc(var(--spacing) * 37);
}

.min-h-38 {
  min-height: calc(var(--spacing) * 38);
}

.min-h-39 {
  min-height: calc(var(--spacing) * 39);
}

.min-h-40 {
  min-height: calc(var(--spacing) * 40);
}

.min-h-41 {
  min-height: calc(var(--spacing) * 41);
}

.min-h-42 {
  min-height: calc(var(--spacing) * 42);
}

.min-h-43 {
  min-height: calc(var(--spacing) * 43);
}

.min-h-44 {
  min-height: calc(var(--spacing) * 44);
}

.min-h-45 {
  min-height: calc(var(--spacing) * 45);
}

.min-h-46 {
  min-height: calc(var(--spacing) * 46);
}

.min-h-47 {
  min-height: calc(var(--spacing) * 47);
}

.min-h-48 {
  min-height: calc(var(--spacing) * 48);
}

.min-h-49 {
  min-height: calc(var(--spacing) * 49);
}

.min-h-50 {
  min-height: calc(var(--spacing) * 50);
}

.mt-0 {
  margin-top: calc(var(--spacing) * 0);
}

.mt-1 {
  margin-top: calc(var(--spacing) * 1);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}

.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}

.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}

.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}

.mt-7 {
  margin-top: calc(var(--spacing) * 7);
}

.mt-8 {
  margin-top: calc(var(--spacing) * 8);
}

.mt-9 {
  margin-top: calc(var(--spacing) * 9);
}

.mt-10 {
  margin-top: calc(var(--spacing) * 10);
}

.mt-11 {
  margin-top: calc(var(--spacing) * 11);
}

.mt-12 {
  margin-top: calc(var(--spacing) * 12);
}

.mt-13 {
  margin-top: calc(var(--spacing) * 13);
}

.mt-14 {
  margin-top: calc(var(--spacing) * 14);
}

.mt-15 {
  margin-top: calc(var(--spacing) * 15);
}

.mt-16 {
  margin-top: calc(var(--spacing) * 16);
}

.mt-17 {
  margin-top: calc(var(--spacing) * 17);
}

.mt-18 {
  margin-top: calc(var(--spacing) * 18);
}

.mt-19 {
  margin-top: calc(var(--spacing) * 19);
}

.mt-20 {
  margin-top: calc(var(--spacing) * 20);
}

.mt-21 {
  margin-top: calc(var(--spacing) * 21);
}

.mt-22 {
  margin-top: calc(var(--spacing) * 22);
}

.mt-23 {
  margin-top: calc(var(--spacing) * 23);
}

.mt-24 {
  margin-top: calc(var(--spacing) * 24);
}

.mt-25 {
  margin-top: calc(var(--spacing) * 25);
}

.mt-26 {
  margin-top: calc(var(--spacing) * 26);
}

.mt-27 {
  margin-top: calc(var(--spacing) * 27);
}

.mt-28 {
  margin-top: calc(var(--spacing) * 28);
}

.mt-29 {
  margin-top: calc(var(--spacing) * 29);
}

.mt-30 {
  margin-top: calc(var(--spacing) * 30);
}

.mt-31 {
  margin-top: calc(var(--spacing) * 31);
}

.mt-32 {
  margin-top: calc(var(--spacing) * 32);
}

.mt-33 {
  margin-top: calc(var(--spacing) * 33);
}

.mt-34 {
  margin-top: calc(var(--spacing) * 34);
}

.mt-35 {
  margin-top: calc(var(--spacing) * 35);
}

.mt-36 {
  margin-top: calc(var(--spacing) * 36);
}

.mt-37 {
  margin-top: calc(var(--spacing) * 37);
}

.mt-38 {
  margin-top: calc(var(--spacing) * 38);
}

.mt-39 {
  margin-top: calc(var(--spacing) * 39);
}

.mt-40 {
  margin-top: calc(var(--spacing) * 40);
}

.mt-41 {
  margin-top: calc(var(--spacing) * 41);
}

.mt-42 {
  margin-top: calc(var(--spacing) * 42);
}

.mt-43 {
  margin-top: calc(var(--spacing) * 43);
}

.mt-44 {
  margin-top: calc(var(--spacing) * 44);
}

.mt-45 {
  margin-top: calc(var(--spacing) * 45);
}

.mt-46 {
  margin-top: calc(var(--spacing) * 46);
}

.mt-47 {
  margin-top: calc(var(--spacing) * 47);
}

.mt-48 {
  margin-top: calc(var(--spacing) * 48);
}

.mt-49 {
  margin-top: calc(var(--spacing) * 49);
}

.mt-50 {
  margin-top: calc(var(--spacing) * 50);
}

.mr-0 {
  margin-right: calc(var(--spacing) * 0);
}

.mr-1 {
  margin-right: calc(var(--spacing) * 1);
}

.mr-2 {
  margin-right: calc(var(--spacing) * 2);
}

.mr-3 {
  margin-right: calc(var(--spacing) * 3);
}

.mr-4 {
  margin-right: calc(var(--spacing) * 4);
}

.mr-5 {
  margin-right: calc(var(--spacing) * 5);
}

.mr-6 {
  margin-right: calc(var(--spacing) * 6);
}

.mr-7 {
  margin-right: calc(var(--spacing) * 7);
}

.mr-8 {
  margin-right: calc(var(--spacing) * 8);
}

.mr-9 {
  margin-right: calc(var(--spacing) * 9);
}

.mr-10 {
  margin-right: calc(var(--spacing) * 10);
}

.mr-11 {
  margin-right: calc(var(--spacing) * 11);
}

.mr-12 {
  margin-right: calc(var(--spacing) * 12);
}

.mr-13 {
  margin-right: calc(var(--spacing) * 13);
}

.mr-14 {
  margin-right: calc(var(--spacing) * 14);
}

.mr-15 {
  margin-right: calc(var(--spacing) * 15);
}

.mr-16 {
  margin-right: calc(var(--spacing) * 16);
}

.mr-17 {
  margin-right: calc(var(--spacing) * 17);
}

.mr-18 {
  margin-right: calc(var(--spacing) * 18);
}

.mr-19 {
  margin-right: calc(var(--spacing) * 19);
}

.mr-20 {
  margin-right: calc(var(--spacing) * 20);
}

.mr-21 {
  margin-right: calc(var(--spacing) * 21);
}

.mr-22 {
  margin-right: calc(var(--spacing) * 22);
}

.mr-23 {
  margin-right: calc(var(--spacing) * 23);
}

.mr-24 {
  margin-right: calc(var(--spacing) * 24);
}

.mr-25 {
  margin-right: calc(var(--spacing) * 25);
}

.mr-26 {
  margin-right: calc(var(--spacing) * 26);
}

.mr-27 {
  margin-right: calc(var(--spacing) * 27);
}

.mr-28 {
  margin-right: calc(var(--spacing) * 28);
}

.mr-29 {
  margin-right: calc(var(--spacing) * 29);
}

.mr-30 {
  margin-right: calc(var(--spacing) * 30);
}

.mr-31 {
  margin-right: calc(var(--spacing) * 31);
}

.mr-32 {
  margin-right: calc(var(--spacing) * 32);
}

.mr-33 {
  margin-right: calc(var(--spacing) * 33);
}

.mr-34 {
  margin-right: calc(var(--spacing) * 34);
}

.mr-35 {
  margin-right: calc(var(--spacing) * 35);
}

.mr-36 {
  margin-right: calc(var(--spacing) * 36);
}

.mr-37 {
  margin-right: calc(var(--spacing) * 37);
}

.mr-38 {
  margin-right: calc(var(--spacing) * 38);
}

.mr-39 {
  margin-right: calc(var(--spacing) * 39);
}

.mr-40 {
  margin-right: calc(var(--spacing) * 40);
}

.mr-41 {
  margin-right: calc(var(--spacing) * 41);
}

.mr-42 {
  margin-right: calc(var(--spacing) * 42);
}

.mr-43 {
  margin-right: calc(var(--spacing) * 43);
}

.mr-44 {
  margin-right: calc(var(--spacing) * 44);
}

.mr-45 {
  margin-right: calc(var(--spacing) * 45);
}

.mr-46 {
  margin-right: calc(var(--spacing) * 46);
}

.mr-47 {
  margin-right: calc(var(--spacing) * 47);
}

.mr-48 {
  margin-right: calc(var(--spacing) * 48);
}

.mr-49 {
  margin-right: calc(var(--spacing) * 49);
}

.mr-50 {
  margin-right: calc(var(--spacing) * 50);
}

.mb-0 {
  margin-bottom: calc(var(--spacing) * 0);
}

.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-5 {
  margin-bottom: calc(var(--spacing) * 5);
}

.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}

.mb-7 {
  margin-bottom: calc(var(--spacing) * 7);
}

.mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

.mb-9 {
  margin-bottom: calc(var(--spacing) * 9);
}

.mb-10 {
  margin-bottom: calc(var(--spacing) * 10);
}

.mb-11 {
  margin-bottom: calc(var(--spacing) * 11);
}

.mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}

.mb-13 {
  margin-bottom: calc(var(--spacing) * 13);
}

.mb-14 {
  margin-bottom: calc(var(--spacing) * 14);
}

.mb-15 {
  margin-bottom: calc(var(--spacing) * 15);
}

.mb-16 {
  margin-bottom: calc(var(--spacing) * 16);
}

.mb-17 {
  margin-bottom: calc(var(--spacing) * 17);
}

.mb-18 {
  margin-bottom: calc(var(--spacing) * 18);
}

.mb-19 {
  margin-bottom: calc(var(--spacing) * 19);
}

.mb-20 {
  margin-bottom: calc(var(--spacing) * 20);
}

.mb-21 {
  margin-bottom: calc(var(--spacing) * 21);
}

.mb-22 {
  margin-bottom: calc(var(--spacing) * 22);
}

.mb-23 {
  margin-bottom: calc(var(--spacing) * 23);
}

.mb-24 {
  margin-bottom: calc(var(--spacing) * 24);
}

.mb-25 {
  margin-bottom: calc(var(--spacing) * 25);
}

.mb-26 {
  margin-bottom: calc(var(--spacing) * 26);
}

.mb-27 {
  margin-bottom: calc(var(--spacing) * 27);
}

.mb-28 {
  margin-bottom: calc(var(--spacing) * 28);
}

.mb-29 {
  margin-bottom: calc(var(--spacing) * 29);
}

.mb-30 {
  margin-bottom: calc(var(--spacing) * 30);
}

.mb-31 {
  margin-bottom: calc(var(--spacing) * 31);
}

.mb-32 {
  margin-bottom: calc(var(--spacing) * 32);
}

.mb-33 {
  margin-bottom: calc(var(--spacing) * 33);
}

.mb-34 {
  margin-bottom: calc(var(--spacing) * 34);
}

.mb-35 {
  margin-bottom: calc(var(--spacing) * 35);
}

.mb-36 {
  margin-bottom: calc(var(--spacing) * 36);
}

.mb-37 {
  margin-bottom: calc(var(--spacing) * 37);
}

.mb-38 {
  margin-bottom: calc(var(--spacing) * 38);
}

.mb-39 {
  margin-bottom: calc(var(--spacing) * 39);
}

.mb-40 {
  margin-bottom: calc(var(--spacing) * 40);
}

.mb-41 {
  margin-bottom: calc(var(--spacing) * 41);
}

.mb-42 {
  margin-bottom: calc(var(--spacing) * 42);
}

.mb-43 {
  margin-bottom: calc(var(--spacing) * 43);
}

.mb-44 {
  margin-bottom: calc(var(--spacing) * 44);
}

.mb-45 {
  margin-bottom: calc(var(--spacing) * 45);
}

.mb-46 {
  margin-bottom: calc(var(--spacing) * 46);
}

.mb-47 {
  margin-bottom: calc(var(--spacing) * 47);
}

.mb-48 {
  margin-bottom: calc(var(--spacing) * 48);
}

.mb-49 {
  margin-bottom: calc(var(--spacing) * 49);
}

.mb-50 {
  margin-bottom: calc(var(--spacing) * 50);
}

.ml-0 {
  margin-left: calc(var(--spacing) * 0);
}

.ml-1 {
  margin-left: calc(var(--spacing) * 1);
}

.ml-2 {
  margin-left: calc(var(--spacing) * 2);
}

.ml-3 {
  margin-left: calc(var(--spacing) * 3);
}

.ml-4 {
  margin-left: calc(var(--spacing) * 4);
}

.ml-5 {
  margin-left: calc(var(--spacing) * 5);
}

.ml-6 {
  margin-left: calc(var(--spacing) * 6);
}

.ml-7 {
  margin-left: calc(var(--spacing) * 7);
}

.ml-8 {
  margin-left: calc(var(--spacing) * 8);
}

.ml-9 {
  margin-left: calc(var(--spacing) * 9);
}

.ml-10 {
  margin-left: calc(var(--spacing) * 10);
}

.ml-11 {
  margin-left: calc(var(--spacing) * 11);
}

.ml-12 {
  margin-left: calc(var(--spacing) * 12);
}

.ml-13 {
  margin-left: calc(var(--spacing) * 13);
}

.ml-14 {
  margin-left: calc(var(--spacing) * 14);
}

.ml-15 {
  margin-left: calc(var(--spacing) * 15);
}

.ml-16 {
  margin-left: calc(var(--spacing) * 16);
}

.ml-17 {
  margin-left: calc(var(--spacing) * 17);
}

.ml-18 {
  margin-left: calc(var(--spacing) * 18);
}

.ml-19 {
  margin-left: calc(var(--spacing) * 19);
}

.ml-20 {
  margin-left: calc(var(--spacing) * 20);
}

.ml-21 {
  margin-left: calc(var(--spacing) * 21);
}

.ml-22 {
  margin-left: calc(var(--spacing) * 22);
}

.ml-23 {
  margin-left: calc(var(--spacing) * 23);
}

.ml-24 {
  margin-left: calc(var(--spacing) * 24);
}

.ml-25 {
  margin-left: calc(var(--spacing) * 25);
}

.ml-26 {
  margin-left: calc(var(--spacing) * 26);
}

.ml-27 {
  margin-left: calc(var(--spacing) * 27);
}

.ml-28 {
  margin-left: calc(var(--spacing) * 28);
}

.ml-29 {
  margin-left: calc(var(--spacing) * 29);
}

.ml-30 {
  margin-left: calc(var(--spacing) * 30);
}

.ml-31 {
  margin-left: calc(var(--spacing) * 31);
}

.ml-32 {
  margin-left: calc(var(--spacing) * 32);
}

.ml-33 {
  margin-left: calc(var(--spacing) * 33);
}

.ml-34 {
  margin-left: calc(var(--spacing) * 34);
}

.ml-35 {
  margin-left: calc(var(--spacing) * 35);
}

.ml-36 {
  margin-left: calc(var(--spacing) * 36);
}

.ml-37 {
  margin-left: calc(var(--spacing) * 37);
}

.ml-38 {
  margin-left: calc(var(--spacing) * 38);
}

.ml-39 {
  margin-left: calc(var(--spacing) * 39);
}

.ml-40 {
  margin-left: calc(var(--spacing) * 40);
}

.ml-41 {
  margin-left: calc(var(--spacing) * 41);
}

.ml-42 {
  margin-left: calc(var(--spacing) * 42);
}

.ml-43 {
  margin-left: calc(var(--spacing) * 43);
}

.ml-44 {
  margin-left: calc(var(--spacing) * 44);
}

.ml-45 {
  margin-left: calc(var(--spacing) * 45);
}

.ml-46 {
  margin-left: calc(var(--spacing) * 46);
}

.ml-47 {
  margin-left: calc(var(--spacing) * 47);
}

.ml-48 {
  margin-left: calc(var(--spacing) * 48);
}

.ml-49 {
  margin-left: calc(var(--spacing) * 49);
}

.ml-50 {
  margin-left: calc(var(--spacing) * 50);
}

.pt-0 {
  padding-top: calc(var(--spacing) * 0);
}

.pt-1 {
  padding-top: calc(var(--spacing) * 1);
}

.pt-2 {
  padding-top: calc(var(--spacing) * 2);
}

.pt-3 {
  padding-top: calc(var(--spacing) * 3);
}

.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}

.pt-5 {
  padding-top: calc(var(--spacing) * 5);
}

.pt-6 {
  padding-top: calc(var(--spacing) * 6);
}

.pt-7 {
  padding-top: calc(var(--spacing) * 7);
}

.pt-8 {
  padding-top: calc(var(--spacing) * 8);
}

.pt-9 {
  padding-top: calc(var(--spacing) * 9);
}

.pt-10 {
  padding-top: calc(var(--spacing) * 10);
}

.pt-11 {
  padding-top: calc(var(--spacing) * 11);
}

.pt-12 {
  padding-top: calc(var(--spacing) * 12);
}

.pt-13 {
  padding-top: calc(var(--spacing) * 13);
}

.pt-14 {
  padding-top: calc(var(--spacing) * 14);
}

.pt-15 {
  padding-top: calc(var(--spacing) * 15);
}

.pt-16 {
  padding-top: calc(var(--spacing) * 16);
}

.pt-17 {
  padding-top: calc(var(--spacing) * 17);
}

.pt-18 {
  padding-top: calc(var(--spacing) * 18);
}

.pt-19 {
  padding-top: calc(var(--spacing) * 19);
}

.pt-20 {
  padding-top: calc(var(--spacing) * 20);
}

.pt-21 {
  padding-top: calc(var(--spacing) * 21);
}

.pt-22 {
  padding-top: calc(var(--spacing) * 22);
}

.pt-23 {
  padding-top: calc(var(--spacing) * 23);
}

.pt-24 {
  padding-top: calc(var(--spacing) * 24);
}

.pt-25 {
  padding-top: calc(var(--spacing) * 25);
}

.pt-26 {
  padding-top: calc(var(--spacing) * 26);
}

.pt-27 {
  padding-top: calc(var(--spacing) * 27);
}

.pt-28 {
  padding-top: calc(var(--spacing) * 28);
}

.pt-29 {
  padding-top: calc(var(--spacing) * 29);
}

.pt-30 {
  padding-top: calc(var(--spacing) * 30);
}

.pt-31 {
  padding-top: calc(var(--spacing) * 31);
}

.pt-32 {
  padding-top: calc(var(--spacing) * 32);
}

.pt-33 {
  padding-top: calc(var(--spacing) * 33);
}

.pt-34 {
  padding-top: calc(var(--spacing) * 34);
}

.pt-35 {
  padding-top: calc(var(--spacing) * 35);
}

.pt-36 {
  padding-top: calc(var(--spacing) * 36);
}

.pt-37 {
  padding-top: calc(var(--spacing) * 37);
}

.pt-38 {
  padding-top: calc(var(--spacing) * 38);
}

.pt-39 {
  padding-top: calc(var(--spacing) * 39);
}

.pt-40 {
  padding-top: calc(var(--spacing) * 40);
}

.pt-41 {
  padding-top: calc(var(--spacing) * 41);
}

.pt-42 {
  padding-top: calc(var(--spacing) * 42);
}

.pt-43 {
  padding-top: calc(var(--spacing) * 43);
}

.pt-44 {
  padding-top: calc(var(--spacing) * 44);
}

.pt-45 {
  padding-top: calc(var(--spacing) * 45);
}

.pt-46 {
  padding-top: calc(var(--spacing) * 46);
}

.pt-47 {
  padding-top: calc(var(--spacing) * 47);
}

.pt-48 {
  padding-top: calc(var(--spacing) * 48);
}

.pt-49 {
  padding-top: calc(var(--spacing) * 49);
}

.pt-50 {
  padding-top: calc(var(--spacing) * 50);
}

.pr-0 {
  padding-right: calc(var(--spacing) * 0);
}

.pr-1 {
  padding-right: calc(var(--spacing) * 1);
}

.pr-2 {
  padding-right: calc(var(--spacing) * 2);
}

.pr-3 {
  padding-right: calc(var(--spacing) * 3);
}

.pr-4 {
  padding-right: calc(var(--spacing) * 4);
}

.pr-5 {
  padding-right: calc(var(--spacing) * 5);
}

.pr-6 {
  padding-right: calc(var(--spacing) * 6);
}

.pr-7 {
  padding-right: calc(var(--spacing) * 7);
}

.pr-8 {
  padding-right: calc(var(--spacing) * 8);
}

.pr-9 {
  padding-right: calc(var(--spacing) * 9);
}

.pr-10 {
  padding-right: calc(var(--spacing) * 10);
}

.pr-11 {
  padding-right: calc(var(--spacing) * 11);
}

.pr-12 {
  padding-right: calc(var(--spacing) * 12);
}

.pr-13 {
  padding-right: calc(var(--spacing) * 13);
}

.pr-14 {
  padding-right: calc(var(--spacing) * 14);
}

.pr-15 {
  padding-right: calc(var(--spacing) * 15);
}

.pr-16 {
  padding-right: calc(var(--spacing) * 16);
}

.pr-17 {
  padding-right: calc(var(--spacing) * 17);
}

.pr-18 {
  padding-right: calc(var(--spacing) * 18);
}

.pr-19 {
  padding-right: calc(var(--spacing) * 19);
}

.pr-20 {
  padding-right: calc(var(--spacing) * 20);
}

.pr-21 {
  padding-right: calc(var(--spacing) * 21);
}

.pr-22 {
  padding-right: calc(var(--spacing) * 22);
}

.pr-23 {
  padding-right: calc(var(--spacing) * 23);
}

.pr-24 {
  padding-right: calc(var(--spacing) * 24);
}

.pr-25 {
  padding-right: calc(var(--spacing) * 25);
}

.pr-26 {
  padding-right: calc(var(--spacing) * 26);
}

.pr-27 {
  padding-right: calc(var(--spacing) * 27);
}

.pr-28 {
  padding-right: calc(var(--spacing) * 28);
}

.pr-29 {
  padding-right: calc(var(--spacing) * 29);
}

.pr-30 {
  padding-right: calc(var(--spacing) * 30);
}

.pr-31 {
  padding-right: calc(var(--spacing) * 31);
}

.pr-32 {
  padding-right: calc(var(--spacing) * 32);
}

.pr-33 {
  padding-right: calc(var(--spacing) * 33);
}

.pr-34 {
  padding-right: calc(var(--spacing) * 34);
}

.pr-35 {
  padding-right: calc(var(--spacing) * 35);
}

.pr-36 {
  padding-right: calc(var(--spacing) * 36);
}

.pr-37 {
  padding-right: calc(var(--spacing) * 37);
}

.pr-38 {
  padding-right: calc(var(--spacing) * 38);
}

.pr-39 {
  padding-right: calc(var(--spacing) * 39);
}

.pr-40 {
  padding-right: calc(var(--spacing) * 40);
}

.pr-41 {
  padding-right: calc(var(--spacing) * 41);
}

.pr-42 {
  padding-right: calc(var(--spacing) * 42);
}

.pr-43 {
  padding-right: calc(var(--spacing) * 43);
}

.pr-44 {
  padding-right: calc(var(--spacing) * 44);
}

.pr-45 {
  padding-right: calc(var(--spacing) * 45);
}

.pr-46 {
  padding-right: calc(var(--spacing) * 46);
}

.pr-47 {
  padding-right: calc(var(--spacing) * 47);
}

.pr-48 {
  padding-right: calc(var(--spacing) * 48);
}

.pr-49 {
  padding-right: calc(var(--spacing) * 49);
}

.pr-50 {
  padding-right: calc(var(--spacing) * 50);
}

.pb-0 {
  padding-bottom: calc(var(--spacing) * 0);
}

.pb-1 {
  padding-bottom: calc(var(--spacing) * 1);
}

.pb-2 {
  padding-bottom: calc(var(--spacing) * 2);
}

.pb-3 {
  padding-bottom: calc(var(--spacing) * 3);
}

.pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}

.pb-5 {
  padding-bottom: calc(var(--spacing) * 5);
}

.pb-6 {
  padding-bottom: calc(var(--spacing) * 6);
}

.pb-7 {
  padding-bottom: calc(var(--spacing) * 7);
}

.pb-8 {
  padding-bottom: calc(var(--spacing) * 8);
}

.pb-9 {
  padding-bottom: calc(var(--spacing) * 9);
}

.pb-10 {
  padding-bottom: calc(var(--spacing) * 10);
}

.pb-11 {
  padding-bottom: calc(var(--spacing) * 11);
}

.pb-12 {
  padding-bottom: calc(var(--spacing) * 12);
}

.pb-13 {
  padding-bottom: calc(var(--spacing) * 13);
}

.pb-14 {
  padding-bottom: calc(var(--spacing) * 14);
}

.pb-15 {
  padding-bottom: calc(var(--spacing) * 15);
}

.pb-16 {
  padding-bottom: calc(var(--spacing) * 16);
}

.pb-17 {
  padding-bottom: calc(var(--spacing) * 17);
}

.pb-18 {
  padding-bottom: calc(var(--spacing) * 18);
}

.pb-19 {
  padding-bottom: calc(var(--spacing) * 19);
}

.pb-20 {
  padding-bottom: calc(var(--spacing) * 20);
}

.pb-21 {
  padding-bottom: calc(var(--spacing) * 21);
}

.pb-22 {
  padding-bottom: calc(var(--spacing) * 22);
}

.pb-23 {
  padding-bottom: calc(var(--spacing) * 23);
}

.pb-24 {
  padding-bottom: calc(var(--spacing) * 24);
}

.pb-25 {
  padding-bottom: calc(var(--spacing) * 25);
}

.pb-26 {
  padding-bottom: calc(var(--spacing) * 26);
}

.pb-27 {
  padding-bottom: calc(var(--spacing) * 27);
}

.pb-28 {
  padding-bottom: calc(var(--spacing) * 28);
}

.pb-29 {
  padding-bottom: calc(var(--spacing) * 29);
}

.pb-30 {
  padding-bottom: calc(var(--spacing) * 30);
}

.pb-31 {
  padding-bottom: calc(var(--spacing) * 31);
}

.pb-32 {
  padding-bottom: calc(var(--spacing) * 32);
}

.pb-33 {
  padding-bottom: calc(var(--spacing) * 33);
}

.pb-34 {
  padding-bottom: calc(var(--spacing) * 34);
}

.pb-35 {
  padding-bottom: calc(var(--spacing) * 35);
}

.pb-36 {
  padding-bottom: calc(var(--spacing) * 36);
}

.pb-37 {
  padding-bottom: calc(var(--spacing) * 37);
}

.pb-38 {
  padding-bottom: calc(var(--spacing) * 38);
}

.pb-39 {
  padding-bottom: calc(var(--spacing) * 39);
}

.pb-40 {
  padding-bottom: calc(var(--spacing) * 40);
}

.pb-41 {
  padding-bottom: calc(var(--spacing) * 41);
}

.pb-42 {
  padding-bottom: calc(var(--spacing) * 42);
}

.pb-43 {
  padding-bottom: calc(var(--spacing) * 43);
}

.pb-44 {
  padding-bottom: calc(var(--spacing) * 44);
}

.pb-45 {
  padding-bottom: calc(var(--spacing) * 45);
}

.pb-46 {
  padding-bottom: calc(var(--spacing) * 46);
}

.pb-47 {
  padding-bottom: calc(var(--spacing) * 47);
}

.pb-48 {
  padding-bottom: calc(var(--spacing) * 48);
}

.pb-49 {
  padding-bottom: calc(var(--spacing) * 49);
}

.pb-50 {
  padding-bottom: calc(var(--spacing) * 50);
}

.pl-0 {
  padding-left: calc(var(--spacing) * 0);
}

.pl-1 {
  padding-left: calc(var(--spacing) * 1);
}

.pl-2 {
  padding-left: calc(var(--spacing) * 2);
}

.pl-3 {
  padding-left: calc(var(--spacing) * 3);
}

.pl-4 {
  padding-left: calc(var(--spacing) * 4);
}

.pl-5 {
  padding-left: calc(var(--spacing) * 5);
}

.pl-6 {
  padding-left: calc(var(--spacing) * 6);
}

.pl-7 {
  padding-left: calc(var(--spacing) * 7);
}

.pl-8 {
  padding-left: calc(var(--spacing) * 8);
}

.pl-9 {
  padding-left: calc(var(--spacing) * 9);
}

.pl-10 {
  padding-left: calc(var(--spacing) * 10);
}

.pl-11 {
  padding-left: calc(var(--spacing) * 11);
}

.pl-12 {
  padding-left: calc(var(--spacing) * 12);
}

.pl-13 {
  padding-left: calc(var(--spacing) * 13);
}

.pl-14 {
  padding-left: calc(var(--spacing) * 14);
}

.pl-15 {
  padding-left: calc(var(--spacing) * 15);
}

.pl-16 {
  padding-left: calc(var(--spacing) * 16);
}

.pl-17 {
  padding-left: calc(var(--spacing) * 17);
}

.pl-18 {
  padding-left: calc(var(--spacing) * 18);
}

.pl-19 {
  padding-left: calc(var(--spacing) * 19);
}

.pl-20 {
  padding-left: calc(var(--spacing) * 20);
}

.pl-21 {
  padding-left: calc(var(--spacing) * 21);
}

.pl-22 {
  padding-left: calc(var(--spacing) * 22);
}

.pl-23 {
  padding-left: calc(var(--spacing) * 23);
}

.pl-24 {
  padding-left: calc(var(--spacing) * 24);
}

.pl-25 {
  padding-left: calc(var(--spacing) * 25);
}

.pl-26 {
  padding-left: calc(var(--spacing) * 26);
}

.pl-27 {
  padding-left: calc(var(--spacing) * 27);
}

.pl-28 {
  padding-left: calc(var(--spacing) * 28);
}

.pl-29 {
  padding-left: calc(var(--spacing) * 29);
}

.pl-30 {
  padding-left: calc(var(--spacing) * 30);
}

.pl-31 {
  padding-left: calc(var(--spacing) * 31);
}

.pl-32 {
  padding-left: calc(var(--spacing) * 32);
}

.pl-33 {
  padding-left: calc(var(--spacing) * 33);
}

.pl-34 {
  padding-left: calc(var(--spacing) * 34);
}

.pl-35 {
  padding-left: calc(var(--spacing) * 35);
}

.pl-36 {
  padding-left: calc(var(--spacing) * 36);
}

.pl-37 {
  padding-left: calc(var(--spacing) * 37);
}

.pl-38 {
  padding-left: calc(var(--spacing) * 38);
}

.pl-39 {
  padding-left: calc(var(--spacing) * 39);
}

.pl-40 {
  padding-left: calc(var(--spacing) * 40);
}

.pl-41 {
  padding-left: calc(var(--spacing) * 41);
}

.pl-42 {
  padding-left: calc(var(--spacing) * 42);
}

.pl-43 {
  padding-left: calc(var(--spacing) * 43);
}

.pl-44 {
  padding-left: calc(var(--spacing) * 44);
}

.pl-45 {
  padding-left: calc(var(--spacing) * 45);
}

.pl-46 {
  padding-left: calc(var(--spacing) * 46);
}

.pl-47 {
  padding-left: calc(var(--spacing) * 47);
}

.pl-48 {
  padding-left: calc(var(--spacing) * 48);
}

.pl-49 {
  padding-left: calc(var(--spacing) * 49);
}

.pl-50 {
  padding-left: calc(var(--spacing) * 50);
}

.t-0 {
  top: calc(var(--spacing) * 0);
}

.t-1 {
  top: calc(var(--spacing) * 1);
}

.t-2 {
  top: calc(var(--spacing) * 2);
}

.t-3 {
  top: calc(var(--spacing) * 3);
}

.t-4 {
  top: calc(var(--spacing) * 4);
}

.t-5 {
  top: calc(var(--spacing) * 5);
}

.t-6 {
  top: calc(var(--spacing) * 6);
}

.t-7 {
  top: calc(var(--spacing) * 7);
}

.t-8 {
  top: calc(var(--spacing) * 8);
}

.t-9 {
  top: calc(var(--spacing) * 9);
}

.t-10 {
  top: calc(var(--spacing) * 10);
}

.t-11 {
  top: calc(var(--spacing) * 11);
}

.t-12 {
  top: calc(var(--spacing) * 12);
}

.t-13 {
  top: calc(var(--spacing) * 13);
}

.t-14 {
  top: calc(var(--spacing) * 14);
}

.t-15 {
  top: calc(var(--spacing) * 15);
}

.t-16 {
  top: calc(var(--spacing) * 16);
}

.t-17 {
  top: calc(var(--spacing) * 17);
}

.t-18 {
  top: calc(var(--spacing) * 18);
}

.t-19 {
  top: calc(var(--spacing) * 19);
}

.t-20 {
  top: calc(var(--spacing) * 20);
}

.t-21 {
  top: calc(var(--spacing) * 21);
}

.t-22 {
  top: calc(var(--spacing) * 22);
}

.t-23 {
  top: calc(var(--spacing) * 23);
}

.t-24 {
  top: calc(var(--spacing) * 24);
}

.t-25 {
  top: calc(var(--spacing) * 25);
}

.t-26 {
  top: calc(var(--spacing) * 26);
}

.t-27 {
  top: calc(var(--spacing) * 27);
}

.t-28 {
  top: calc(var(--spacing) * 28);
}

.t-29 {
  top: calc(var(--spacing) * 29);
}

.t-30 {
  top: calc(var(--spacing) * 30);
}

.t-31 {
  top: calc(var(--spacing) * 31);
}

.t-32 {
  top: calc(var(--spacing) * 32);
}

.t-33 {
  top: calc(var(--spacing) * 33);
}

.t-34 {
  top: calc(var(--spacing) * 34);
}

.t-35 {
  top: calc(var(--spacing) * 35);
}

.t-36 {
  top: calc(var(--spacing) * 36);
}

.t-37 {
  top: calc(var(--spacing) * 37);
}

.t-38 {
  top: calc(var(--spacing) * 38);
}

.t-39 {
  top: calc(var(--spacing) * 39);
}

.t-40 {
  top: calc(var(--spacing) * 40);
}

.t-41 {
  top: calc(var(--spacing) * 41);
}

.t-42 {
  top: calc(var(--spacing) * 42);
}

.t-43 {
  top: calc(var(--spacing) * 43);
}

.t-44 {
  top: calc(var(--spacing) * 44);
}

.t-45 {
  top: calc(var(--spacing) * 45);
}

.t-46 {
  top: calc(var(--spacing) * 46);
}

.t-47 {
  top: calc(var(--spacing) * 47);
}

.t-48 {
  top: calc(var(--spacing) * 48);
}

.t-49 {
  top: calc(var(--spacing) * 49);
}

.t-50 {
  top: calc(var(--spacing) * 50);
}

.r-0 {
  right: calc(var(--spacing) * 0);
}

.r-1 {
  right: calc(var(--spacing) * 1);
}

.r-2 {
  right: calc(var(--spacing) * 2);
}

.r-3 {
  right: calc(var(--spacing) * 3);
}

.r-4 {
  right: calc(var(--spacing) * 4);
}

.r-5 {
  right: calc(var(--spacing) * 5);
}

.r-6 {
  right: calc(var(--spacing) * 6);
}

.r-7 {
  right: calc(var(--spacing) * 7);
}

.r-8 {
  right: calc(var(--spacing) * 8);
}

.r-9 {
  right: calc(var(--spacing) * 9);
}

.r-10 {
  right: calc(var(--spacing) * 10);
}

.r-11 {
  right: calc(var(--spacing) * 11);
}

.r-12 {
  right: calc(var(--spacing) * 12);
}

.r-13 {
  right: calc(var(--spacing) * 13);
}

.r-14 {
  right: calc(var(--spacing) * 14);
}

.r-15 {
  right: calc(var(--spacing) * 15);
}

.r-16 {
  right: calc(var(--spacing) * 16);
}

.r-17 {
  right: calc(var(--spacing) * 17);
}

.r-18 {
  right: calc(var(--spacing) * 18);
}

.r-19 {
  right: calc(var(--spacing) * 19);
}

.r-20 {
  right: calc(var(--spacing) * 20);
}

.r-21 {
  right: calc(var(--spacing) * 21);
}

.r-22 {
  right: calc(var(--spacing) * 22);
}

.r-23 {
  right: calc(var(--spacing) * 23);
}

.r-24 {
  right: calc(var(--spacing) * 24);
}

.r-25 {
  right: calc(var(--spacing) * 25);
}

.r-26 {
  right: calc(var(--spacing) * 26);
}

.r-27 {
  right: calc(var(--spacing) * 27);
}

.r-28 {
  right: calc(var(--spacing) * 28);
}

.r-29 {
  right: calc(var(--spacing) * 29);
}

.r-30 {
  right: calc(var(--spacing) * 30);
}

.r-31 {
  right: calc(var(--spacing) * 31);
}

.r-32 {
  right: calc(var(--spacing) * 32);
}

.r-33 {
  right: calc(var(--spacing) * 33);
}

.r-34 {
  right: calc(var(--spacing) * 34);
}

.r-35 {
  right: calc(var(--spacing) * 35);
}

.r-36 {
  right: calc(var(--spacing) * 36);
}

.r-37 {
  right: calc(var(--spacing) * 37);
}

.r-38 {
  right: calc(var(--spacing) * 38);
}

.r-39 {
  right: calc(var(--spacing) * 39);
}

.r-40 {
  right: calc(var(--spacing) * 40);
}

.r-41 {
  right: calc(var(--spacing) * 41);
}

.r-42 {
  right: calc(var(--spacing) * 42);
}

.r-43 {
  right: calc(var(--spacing) * 43);
}

.r-44 {
  right: calc(var(--spacing) * 44);
}

.r-45 {
  right: calc(var(--spacing) * 45);
}

.r-46 {
  right: calc(var(--spacing) * 46);
}

.r-47 {
  right: calc(var(--spacing) * 47);
}

.r-48 {
  right: calc(var(--spacing) * 48);
}

.r-49 {
  right: calc(var(--spacing) * 49);
}

.r-50 {
  right: calc(var(--spacing) * 50);
}

.b-0 {
  bottom: calc(var(--spacing) * 0);
}

.b-1 {
  bottom: calc(var(--spacing) * 1);
}

.b-2 {
  bottom: calc(var(--spacing) * 2);
}

.b-3 {
  bottom: calc(var(--spacing) * 3);
}

.b-4 {
  bottom: calc(var(--spacing) * 4);
}

.b-5 {
  bottom: calc(var(--spacing) * 5);
}

.b-6 {
  bottom: calc(var(--spacing) * 6);
}

.b-7 {
  bottom: calc(var(--spacing) * 7);
}

.b-8 {
  bottom: calc(var(--spacing) * 8);
}

.b-9 {
  bottom: calc(var(--spacing) * 9);
}

.b-10 {
  bottom: calc(var(--spacing) * 10);
}

.b-11 {
  bottom: calc(var(--spacing) * 11);
}

.b-12 {
  bottom: calc(var(--spacing) * 12);
}

.b-13 {
  bottom: calc(var(--spacing) * 13);
}

.b-14 {
  bottom: calc(var(--spacing) * 14);
}

.b-15 {
  bottom: calc(var(--spacing) * 15);
}

.b-16 {
  bottom: calc(var(--spacing) * 16);
}

.b-17 {
  bottom: calc(var(--spacing) * 17);
}

.b-18 {
  bottom: calc(var(--spacing) * 18);
}

.b-19 {
  bottom: calc(var(--spacing) * 19);
}

.b-20 {
  bottom: calc(var(--spacing) * 20);
}

.b-21 {
  bottom: calc(var(--spacing) * 21);
}

.b-22 {
  bottom: calc(var(--spacing) * 22);
}

.b-23 {
  bottom: calc(var(--spacing) * 23);
}

.b-24 {
  bottom: calc(var(--spacing) * 24);
}

.b-25 {
  bottom: calc(var(--spacing) * 25);
}

.b-26 {
  bottom: calc(var(--spacing) * 26);
}

.b-27 {
  bottom: calc(var(--spacing) * 27);
}

.b-28 {
  bottom: calc(var(--spacing) * 28);
}

.b-29 {
  bottom: calc(var(--spacing) * 29);
}

.b-30 {
  bottom: calc(var(--spacing) * 30);
}

.b-31 {
  bottom: calc(var(--spacing) * 31);
}

.b-32 {
  bottom: calc(var(--spacing) * 32);
}

.b-33 {
  bottom: calc(var(--spacing) * 33);
}

.b-34 {
  bottom: calc(var(--spacing) * 34);
}

.b-35 {
  bottom: calc(var(--spacing) * 35);
}

.b-36 {
  bottom: calc(var(--spacing) * 36);
}

.b-37 {
  bottom: calc(var(--spacing) * 37);
}

.b-38 {
  bottom: calc(var(--spacing) * 38);
}

.b-39 {
  bottom: calc(var(--spacing) * 39);
}

.b-40 {
  bottom: calc(var(--spacing) * 40);
}

.b-41 {
  bottom: calc(var(--spacing) * 41);
}

.b-42 {
  bottom: calc(var(--spacing) * 42);
}

.b-43 {
  bottom: calc(var(--spacing) * 43);
}

.b-44 {
  bottom: calc(var(--spacing) * 44);
}

.b-45 {
  bottom: calc(var(--spacing) * 45);
}

.b-46 {
  bottom: calc(var(--spacing) * 46);
}

.b-47 {
  bottom: calc(var(--spacing) * 47);
}

.b-48 {
  bottom: calc(var(--spacing) * 48);
}

.b-49 {
  bottom: calc(var(--spacing) * 49);
}

.b-50 {
  bottom: calc(var(--spacing) * 50);
}

.l-0 {
  left: calc(var(--spacing) * 0);
}

.l-1 {
  left: calc(var(--spacing) * 1);
}

.l-2 {
  left: calc(var(--spacing) * 2);
}

.l-3 {
  left: calc(var(--spacing) * 3);
}

.l-4 {
  left: calc(var(--spacing) * 4);
}

.l-5 {
  left: calc(var(--spacing) * 5);
}

.l-6 {
  left: calc(var(--spacing) * 6);
}

.l-7 {
  left: calc(var(--spacing) * 7);
}

.l-8 {
  left: calc(var(--spacing) * 8);
}

.l-9 {
  left: calc(var(--spacing) * 9);
}

.l-10 {
  left: calc(var(--spacing) * 10);
}

.l-11 {
  left: calc(var(--spacing) * 11);
}

.l-12 {
  left: calc(var(--spacing) * 12);
}

.l-13 {
  left: calc(var(--spacing) * 13);
}

.l-14 {
  left: calc(var(--spacing) * 14);
}

.l-15 {
  left: calc(var(--spacing) * 15);
}

.l-16 {
  left: calc(var(--spacing) * 16);
}

.l-17 {
  left: calc(var(--spacing) * 17);
}

.l-18 {
  left: calc(var(--spacing) * 18);
}

.l-19 {
  left: calc(var(--spacing) * 19);
}

.l-20 {
  left: calc(var(--spacing) * 20);
}

.l-21 {
  left: calc(var(--spacing) * 21);
}

.l-22 {
  left: calc(var(--spacing) * 22);
}

.l-23 {
  left: calc(var(--spacing) * 23);
}

.l-24 {
  left: calc(var(--spacing) * 24);
}

.l-25 {
  left: calc(var(--spacing) * 25);
}

.l-26 {
  left: calc(var(--spacing) * 26);
}

.l-27 {
  left: calc(var(--spacing) * 27);
}

.l-28 {
  left: calc(var(--spacing) * 28);
}

.l-29 {
  left: calc(var(--spacing) * 29);
}

.l-30 {
  left: calc(var(--spacing) * 30);
}

.l-31 {
  left: calc(var(--spacing) * 31);
}

.l-32 {
  left: calc(var(--spacing) * 32);
}

.l-33 {
  left: calc(var(--spacing) * 33);
}

.l-34 {
  left: calc(var(--spacing) * 34);
}

.l-35 {
  left: calc(var(--spacing) * 35);
}

.l-36 {
  left: calc(var(--spacing) * 36);
}

.l-37 {
  left: calc(var(--spacing) * 37);
}

.l-38 {
  left: calc(var(--spacing) * 38);
}

.l-39 {
  left: calc(var(--spacing) * 39);
}

.l-40 {
  left: calc(var(--spacing) * 40);
}

.l-41 {
  left: calc(var(--spacing) * 41);
}

.l-42 {
  left: calc(var(--spacing) * 42);
}

.l-43 {
  left: calc(var(--spacing) * 43);
}

.l-44 {
  left: calc(var(--spacing) * 44);
}

.l-45 {
  left: calc(var(--spacing) * 45);
}

.l-46 {
  left: calc(var(--spacing) * 46);
}

.l-47 {
  left: calc(var(--spacing) * 47);
}

.l-48 {
  left: calc(var(--spacing) * 48);
}

.l-49 {
  left: calc(var(--spacing) * 49);
}

.l-50 {
  left: calc(var(--spacing) * 50);
}

.br-0 {
  border-radius: calc(var(--spacing) * 0);
}

.br-1 {
  border-radius: calc(var(--spacing) * 1);
}

.br-2 {
  border-radius: calc(var(--spacing) * 2);
}

.br-3 {
  border-radius: calc(var(--spacing) * 3);
}

.br-4 {
  border-radius: calc(var(--spacing) * 4);
}

.br-5 {
  border-radius: calc(var(--spacing) * 5);
}

.br-6 {
  border-radius: calc(var(--spacing) * 6);
}

.br-7 {
  border-radius: calc(var(--spacing) * 7);
}

.br-8 {
  border-radius: calc(var(--spacing) * 8);
}

.br-9 {
  border-radius: calc(var(--spacing) * 9);
}

.br-10 {
  border-radius: calc(var(--spacing) * 10);
}

.br-11 {
  border-radius: calc(var(--spacing) * 11);
}

.br-12 {
  border-radius: calc(var(--spacing) * 12);
}

.br-13 {
  border-radius: calc(var(--spacing) * 13);
}

.br-14 {
  border-radius: calc(var(--spacing) * 14);
}

.br-15 {
  border-radius: calc(var(--spacing) * 15);
}

.br-16 {
  border-radius: calc(var(--spacing) * 16);
}

.br-17 {
  border-radius: calc(var(--spacing) * 17);
}

.br-18 {
  border-radius: calc(var(--spacing) * 18);
}

.br-19 {
  border-radius: calc(var(--spacing) * 19);
}

.br-20 {
  border-radius: calc(var(--spacing) * 20);
}

.br-21 {
  border-radius: calc(var(--spacing) * 21);
}

.br-22 {
  border-radius: calc(var(--spacing) * 22);
}

.br-23 {
  border-radius: calc(var(--spacing) * 23);
}

.br-24 {
  border-radius: calc(var(--spacing) * 24);
}

.br-25 {
  border-radius: calc(var(--spacing) * 25);
}

.br-26 {
  border-radius: calc(var(--spacing) * 26);
}

.br-27 {
  border-radius: calc(var(--spacing) * 27);
}

.br-28 {
  border-radius: calc(var(--spacing) * 28);
}

.br-29 {
  border-radius: calc(var(--spacing) * 29);
}

.br-30 {
  border-radius: calc(var(--spacing) * 30);
}

.br-31 {
  border-radius: calc(var(--spacing) * 31);
}

.br-32 {
  border-radius: calc(var(--spacing) * 32);
}

.br-33 {
  border-radius: calc(var(--spacing) * 33);
}

.br-34 {
  border-radius: calc(var(--spacing) * 34);
}

.br-35 {
  border-radius: calc(var(--spacing) * 35);
}

.br-36 {
  border-radius: calc(var(--spacing) * 36);
}

.br-37 {
  border-radius: calc(var(--spacing) * 37);
}

.br-38 {
  border-radius: calc(var(--spacing) * 38);
}

.br-39 {
  border-radius: calc(var(--spacing) * 39);
}

.br-40 {
  border-radius: calc(var(--spacing) * 40);
}

.br-41 {
  border-radius: calc(var(--spacing) * 41);
}

.br-42 {
  border-radius: calc(var(--spacing) * 42);
}

.br-43 {
  border-radius: calc(var(--spacing) * 43);
}

.br-44 {
  border-radius: calc(var(--spacing) * 44);
}

.br-45 {
  border-radius: calc(var(--spacing) * 45);
}

.br-46 {
  border-radius: calc(var(--spacing) * 46);
}

.br-47 {
  border-radius: calc(var(--spacing) * 47);
}

.br-48 {
  border-radius: calc(var(--spacing) * 48);
}

.br-49 {
  border-radius: calc(var(--spacing) * 49);
}

.br-50 {
  border-radius: calc(var(--spacing) * 50);
}

.fs-0 {
  font-size: calc(var(--spacing) * 0);
}

.fs-1 {
  font-size: calc(var(--spacing) * 1);
}

.fs-2 {
  font-size: calc(var(--spacing) * 2);
}

.fs-3 {
  font-size: calc(var(--spacing) * 3);
}

.fs-4 {
  font-size: calc(var(--spacing) * 4);
}

.fs-5 {
  font-size: calc(var(--spacing) * 5);
}

.fs-6 {
  font-size: calc(var(--spacing) * 6);
}

.fs-7 {
  font-size: calc(var(--spacing) * 7);
}

.fs-8 {
  font-size: calc(var(--spacing) * 8);
}

.fs-9 {
  font-size: calc(var(--spacing) * 9);
}

.fs-10 {
  font-size: calc(var(--spacing) * 10);
}

.fs-11 {
  font-size: calc(var(--spacing) * 11);
}

.fs-12 {
  font-size: calc(var(--spacing) * 12);
}

.fs-13 {
  font-size: calc(var(--spacing) * 13);
}

.fs-14 {
  font-size: calc(var(--spacing) * 14);
}

.fs-15 {
  font-size: calc(var(--spacing) * 15);
}

.fs-16 {
  font-size: calc(var(--spacing) * 16);
}

.fs-17 {
  font-size: calc(var(--spacing) * 17);
}

.fs-18 {
  font-size: calc(var(--spacing) * 18);
}

.fs-19 {
  font-size: calc(var(--spacing) * 19);
}

.fs-20 {
  font-size: calc(var(--spacing) * 20);
}

.fs-21 {
  font-size: calc(var(--spacing) * 21);
}

.fs-22 {
  font-size: calc(var(--spacing) * 22);
}

.fs-23 {
  font-size: calc(var(--spacing) * 23);
}

.fs-24 {
  font-size: calc(var(--spacing) * 24);
}

.fs-25 {
  font-size: calc(var(--spacing) * 25);
}

.fs-26 {
  font-size: calc(var(--spacing) * 26);
}

.fs-27 {
  font-size: calc(var(--spacing) * 27);
}

.fs-28 {
  font-size: calc(var(--spacing) * 28);
}

.fs-29 {
  font-size: calc(var(--spacing) * 29);
}

.fs-30 {
  font-size: calc(var(--spacing) * 30);
}

.fs-31 {
  font-size: calc(var(--spacing) * 31);
}

.fs-32 {
  font-size: calc(var(--spacing) * 32);
}

.fs-33 {
  font-size: calc(var(--spacing) * 33);
}

.fs-34 {
  font-size: calc(var(--spacing) * 34);
}

.fs-35 {
  font-size: calc(var(--spacing) * 35);
}

.fs-36 {
  font-size: calc(var(--spacing) * 36);
}

.fs-37 {
  font-size: calc(var(--spacing) * 37);
}

.fs-38 {
  font-size: calc(var(--spacing) * 38);
}

.fs-39 {
  font-size: calc(var(--spacing) * 39);
}

.fs-40 {
  font-size: calc(var(--spacing) * 40);
}

.fs-41 {
  font-size: calc(var(--spacing) * 41);
}

.fs-42 {
  font-size: calc(var(--spacing) * 42);
}

.fs-43 {
  font-size: calc(var(--spacing) * 43);
}

.fs-44 {
  font-size: calc(var(--spacing) * 44);
}

.fs-45 {
  font-size: calc(var(--spacing) * 45);
}

.fs-46 {
  font-size: calc(var(--spacing) * 46);
}

.fs-47 {
  font-size: calc(var(--spacing) * 47);
}

.fs-48 {
  font-size: calc(var(--spacing) * 48);
}

.fs-49 {
  font-size: calc(var(--spacing) * 49);
}

.fs-50 {
  font-size: calc(var(--spacing) * 50);
}

.lh-0 {
  line-height: calc(var(--spacing) * 0);
}

.lh-1 {
  line-height: calc(var(--spacing) * 1);
}

.lh-2 {
  line-height: calc(var(--spacing) * 2);
}

.lh-3 {
  line-height: calc(var(--spacing) * 3);
}

.lh-4 {
  line-height: calc(var(--spacing) * 4);
}

.lh-5 {
  line-height: calc(var(--spacing) * 5);
}

.lh-6 {
  line-height: calc(var(--spacing) * 6);
}

.lh-7 {
  line-height: calc(var(--spacing) * 7);
}

.lh-8 {
  line-height: calc(var(--spacing) * 8);
}

.lh-9 {
  line-height: calc(var(--spacing) * 9);
}

.lh-10 {
  line-height: calc(var(--spacing) * 10);
}

.lh-11 {
  line-height: calc(var(--spacing) * 11);
}

.lh-12 {
  line-height: calc(var(--spacing) * 12);
}

.lh-13 {
  line-height: calc(var(--spacing) * 13);
}

.lh-14 {
  line-height: calc(var(--spacing) * 14);
}

.lh-15 {
  line-height: calc(var(--spacing) * 15);
}

.lh-16 {
  line-height: calc(var(--spacing) * 16);
}

.lh-17 {
  line-height: calc(var(--spacing) * 17);
}

.lh-18 {
  line-height: calc(var(--spacing) * 18);
}

.lh-19 {
  line-height: calc(var(--spacing) * 19);
}

.lh-20 {
  line-height: calc(var(--spacing) * 20);
}

.lh-21 {
  line-height: calc(var(--spacing) * 21);
}

.lh-22 {
  line-height: calc(var(--spacing) * 22);
}

.lh-23 {
  line-height: calc(var(--spacing) * 23);
}

.lh-24 {
  line-height: calc(var(--spacing) * 24);
}

.lh-25 {
  line-height: calc(var(--spacing) * 25);
}

.lh-26 {
  line-height: calc(var(--spacing) * 26);
}

.lh-27 {
  line-height: calc(var(--spacing) * 27);
}

.lh-28 {
  line-height: calc(var(--spacing) * 28);
}

.lh-29 {
  line-height: calc(var(--spacing) * 29);
}

.lh-30 {
  line-height: calc(var(--spacing) * 30);
}

.lh-31 {
  line-height: calc(var(--spacing) * 31);
}

.lh-32 {
  line-height: calc(var(--spacing) * 32);
}

.lh-33 {
  line-height: calc(var(--spacing) * 33);
}

.lh-34 {
  line-height: calc(var(--spacing) * 34);
}

.lh-35 {
  line-height: calc(var(--spacing) * 35);
}

.lh-36 {
  line-height: calc(var(--spacing) * 36);
}

.lh-37 {
  line-height: calc(var(--spacing) * 37);
}

.lh-38 {
  line-height: calc(var(--spacing) * 38);
}

.lh-39 {
  line-height: calc(var(--spacing) * 39);
}

.lh-40 {
  line-height: calc(var(--spacing) * 40);
}

.lh-41 {
  line-height: calc(var(--spacing) * 41);
}

.lh-42 {
  line-height: calc(var(--spacing) * 42);
}

.lh-43 {
  line-height: calc(var(--spacing) * 43);
}

.lh-44 {
  line-height: calc(var(--spacing) * 44);
}

.lh-45 {
  line-height: calc(var(--spacing) * 45);
}

.lh-46 {
  line-height: calc(var(--spacing) * 46);
}

.lh-47 {
  line-height: calc(var(--spacing) * 47);
}

.lh-48 {
  line-height: calc(var(--spacing) * 48);
}

.lh-49 {
  line-height: calc(var(--spacing) * 49);
}

.lh-50 {
  line-height: calc(var(--spacing) * 50);
}

.ls-0 {
  letter-spacing: calc(var(--spacing) * 0);
}

.ls-1 {
  letter-spacing: calc(var(--spacing) * 1);
}

.ls-2 {
  letter-spacing: calc(var(--spacing) * 2);
}

.ls-3 {
  letter-spacing: calc(var(--spacing) * 3);
}

.ls-4 {
  letter-spacing: calc(var(--spacing) * 4);
}

.ls-5 {
  letter-spacing: calc(var(--spacing) * 5);
}

.ls-6 {
  letter-spacing: calc(var(--spacing) * 6);
}

.ls-7 {
  letter-spacing: calc(var(--spacing) * 7);
}

.ls-8 {
  letter-spacing: calc(var(--spacing) * 8);
}

.ls-9 {
  letter-spacing: calc(var(--spacing) * 9);
}

.ls-10 {
  letter-spacing: calc(var(--spacing) * 10);
}

.ls-11 {
  letter-spacing: calc(var(--spacing) * 11);
}

.ls-12 {
  letter-spacing: calc(var(--spacing) * 12);
}

.ls-13 {
  letter-spacing: calc(var(--spacing) * 13);
}

.ls-14 {
  letter-spacing: calc(var(--spacing) * 14);
}

.ls-15 {
  letter-spacing: calc(var(--spacing) * 15);
}

.ls-16 {
  letter-spacing: calc(var(--spacing) * 16);
}

.ls-17 {
  letter-spacing: calc(var(--spacing) * 17);
}

.ls-18 {
  letter-spacing: calc(var(--spacing) * 18);
}

.ls-19 {
  letter-spacing: calc(var(--spacing) * 19);
}

.ls-20 {
  letter-spacing: calc(var(--spacing) * 20);
}

.ls-21 {
  letter-spacing: calc(var(--spacing) * 21);
}

.ls-22 {
  letter-spacing: calc(var(--spacing) * 22);
}

.ls-23 {
  letter-spacing: calc(var(--spacing) * 23);
}

.ls-24 {
  letter-spacing: calc(var(--spacing) * 24);
}

.ls-25 {
  letter-spacing: calc(var(--spacing) * 25);
}

.ls-26 {
  letter-spacing: calc(var(--spacing) * 26);
}

.ls-27 {
  letter-spacing: calc(var(--spacing) * 27);
}

.ls-28 {
  letter-spacing: calc(var(--spacing) * 28);
}

.ls-29 {
  letter-spacing: calc(var(--spacing) * 29);
}

.ls-30 {
  letter-spacing: calc(var(--spacing) * 30);
}

.ls-31 {
  letter-spacing: calc(var(--spacing) * 31);
}

.ls-32 {
  letter-spacing: calc(var(--spacing) * 32);
}

.ls-33 {
  letter-spacing: calc(var(--spacing) * 33);
}

.ls-34 {
  letter-spacing: calc(var(--spacing) * 34);
}

.ls-35 {
  letter-spacing: calc(var(--spacing) * 35);
}

.ls-36 {
  letter-spacing: calc(var(--spacing) * 36);
}

.ls-37 {
  letter-spacing: calc(var(--spacing) * 37);
}

.ls-38 {
  letter-spacing: calc(var(--spacing) * 38);
}

.ls-39 {
  letter-spacing: calc(var(--spacing) * 39);
}

.ls-40 {
  letter-spacing: calc(var(--spacing) * 40);
}

.ls-41 {
  letter-spacing: calc(var(--spacing) * 41);
}

.ls-42 {
  letter-spacing: calc(var(--spacing) * 42);
}

.ls-43 {
  letter-spacing: calc(var(--spacing) * 43);
}

.ls-44 {
  letter-spacing: calc(var(--spacing) * 44);
}

.ls-45 {
  letter-spacing: calc(var(--spacing) * 45);
}

.ls-46 {
  letter-spacing: calc(var(--spacing) * 46);
}

.ls-47 {
  letter-spacing: calc(var(--spacing) * 47);
}

.ls-48 {
  letter-spacing: calc(var(--spacing) * 48);
}

.ls-49 {
  letter-spacing: calc(var(--spacing) * 49);
}

.ls-50 {
  letter-spacing: calc(var(--spacing) * 50);
}

.text-main-color {
  color: var(--mainColor);
}

.text-main-light-color {
  color: var(--mainLightColor);
}

.text-main-dark-color {
  color: var(--mainDarkColor);
}

.text-secondary-color {
  color: var(--secondaryColor);
}

.text-accent-color {
  color: var(--accentColor);
}

.text-title-color {
  color: var(--titleColor);
}

.text-text-color {
  color: var(--textColor);
}

.text-desc-color {
  color: var(--descColor);
}

.text-muted-color {
  color: var(--mutedColor);
}

.text-border-color {
  color: var(--borderColor);
}

.text-info-color {
  color: var(--infoColor);
}

.text-success-color {
  color: var(--successColor);
}

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

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

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

.bg-main-light-color {
  background-color: var(--mainLightColor);
}

.bg-main-dark-color {
  background-color: var(--mainDarkColor);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.max-view-width {
  max-width: var(--maxViewWidth);
}

.header-height {
  height: var(--headerHeight);
}

.footer-height {
  height: var(--footerHeight);
}

.bs-size {
  font-size: var(--bsSize);
}

.bs-size-hover:hover {
  font-size: var(--bsSizeHover);
}

.br-size {
  border-radius: var(--brSize);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.d-inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.d-grid {
  display: grid;
}

.d-inline-grid {
  display: inline-grid;
}

.d-table {
  display: table;
}

.d-table-row {
  display: table-row;
}

.d-table-cell {
  display: table-cell;
}

.d-none {
  display: none;
}

.d-list-item {
  display: list-item;
}

.d-flow-root {
  display: flow-root;
}

.d-contents {
  display: contents;
}

.d-inherit {
  display: inherit;
}

.d-initial {
  display: initial;
}

.d-unset {
  display: unset;
}

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

.grid-rows-1 {
  grid-template-rows: repeat(1, 1fr);
}

.grid-rows-2 {
  grid-template-rows: repeat(2, 1fr);
}

.grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.grid-rows-4 {
  grid-template-rows: repeat(4, 1fr);
}

.grid-rows-5 {
  grid-template-rows: repeat(5, 1fr);
}

.grid-rows-6 {
  grid-template-rows: repeat(6, 1fr);
}

.grid-rows-12 {
  grid-template-rows: repeat(12, 1fr);
}

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.row-gap-1 {
  row-gap: 0.25rem;
}

.row-gap-2 {
  row-gap: 0.5rem;
}

.row-gap-3 {
  row-gap: 0.75rem;
}

.row-gap-4 {
  row-gap: 1rem;
}

.row-gap-5 {
  row-gap: 1.25rem;
}

.row-gap-6 {
  row-gap: 1.5rem;
}

.col-gap-1 {
  -webkit-column-gap: 0.25rem;
     -moz-column-gap: 0.25rem;
          column-gap: 0.25rem;
}

.col-gap-2 {
  -webkit-column-gap: 0.5rem;
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
}

.col-gap-3 {
  -webkit-column-gap: 0.75rem;
     -moz-column-gap: 0.75rem;
          column-gap: 0.75rem;
}

.col-gap-4 {
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
}

.col-gap-5 {
  -webkit-column-gap: 1.25rem;
     -moz-column-gap: 1.25rem;
          column-gap: 1.25rem;
}

.col-gap-6 {
  -webkit-column-gap: 1.5rem;
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.align-items-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.align-items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

.align-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-items-stretch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.place-items-start {
  place-items: start;
}

.place-items-end {
  place-items: end;
}

.place-items-center {
  place-items: center;
}

.place-items-stretch {
  place-items: stretch;
}

.justify-content-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.justify-content-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.justify-content-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-content-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.justify-content-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.justify-content-evenly {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.align-content-start {
  -ms-flex-line-pack: start;
      align-content: start;
}

.align-content-end {
  -ms-flex-line-pack: end;
      align-content: end;
}

.align-content-center {
  -ms-flex-line-pack: center;
      align-content: center;
}

.align-content-between {
  -ms-flex-line-pack: justify;
      align-content: space-between;
}

.align-content-around {
  -ms-flex-line-pack: distribute;
      align-content: space-around;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.place-content-start {
  place-content: start;
}

.place-content-end {
  place-content: end;
}

.place-content-center {
  place-content: center;
}

.place-content-between {
  place-content: space-between;
}

.place-content-around {
  place-content: space-around;
}

.place-content-evenly {
  place-content: space-evenly;
}

.place-content-stretch {
  place-content: stretch;
}

.w-1 {
  width: 1 %;
}

.w-2 {
  width: 2 %;
}

.w-3 {
  width: 3 %;
}

.w-4 {
  width: 4 %;
}

.w-5 {
  width: 5 %;
}

.w-6 {
  width: 6 %;
}

.w-7 {
  width: 7 %;
}

.w-8 {
  width: 8 %;
}

.w-9 {
  width: 9 %;
}

.w-10 {
  width: 10 %;
}

.w-11 {
  width: 11 %;
}

.w-12 {
  width: 12 %;
}

.w-13 {
  width: 13 %;
}

.w-14 {
  width: 14 %;
}

.w-15 {
  width: 15 %;
}

.w-16 {
  width: 16 %;
}

.w-17 {
  width: 17 %;
}

.w-18 {
  width: 18 %;
}

.w-19 {
  width: 19 %;
}

.w-20 {
  width: 20 %;
}

.w-21 {
  width: 21 %;
}

.w-22 {
  width: 22 %;
}

.w-23 {
  width: 23 %;
}

.w-24 {
  width: 24 %;
}

.w-25 {
  width: 25 %;
}

.w-26 {
  width: 26 %;
}

.w-27 {
  width: 27 %;
}

.w-28 {
  width: 28 %;
}

.w-29 {
  width: 29 %;
}

.w-30 {
  width: 30 %;
}

.w-31 {
  width: 31 %;
}

.w-32 {
  width: 32 %;
}

.w-33 {
  width: 33 %;
}

.w-34 {
  width: 34 %;
}

.w-35 {
  width: 35 %;
}

.w-36 {
  width: 36 %;
}

.w-37 {
  width: 37 %;
}

.w-38 {
  width: 38 %;
}

.w-39 {
  width: 39 %;
}

.w-40 {
  width: 40 %;
}

.w-41 {
  width: 41 %;
}

.w-42 {
  width: 42 %;
}

.w-43 {
  width: 43 %;
}

.w-44 {
  width: 44 %;
}

.w-45 {
  width: 45 %;
}

.w-46 {
  width: 46 %;
}

.w-47 {
  width: 47 %;
}

.w-48 {
  width: 48 %;
}

.w-49 {
  width: 49 %;
}

.w-50 {
  width: 50 %;
}

.w-51 {
  width: 51 %;
}

.w-52 {
  width: 52 %;
}

.w-53 {
  width: 53 %;
}

.w-54 {
  width: 54 %;
}

.w-55 {
  width: 55 %;
}

.w-56 {
  width: 56 %;
}

.w-57 {
  width: 57 %;
}

.w-58 {
  width: 58 %;
}

.w-59 {
  width: 59 %;
}

.w-60 {
  width: 60 %;
}

.w-61 {
  width: 61 %;
}

.w-62 {
  width: 62 %;
}

.w-63 {
  width: 63 %;
}

.w-64 {
  width: 64 %;
}

.w-65 {
  width: 65 %;
}

.w-66 {
  width: 66 %;
}

.w-67 {
  width: 67 %;
}

.w-68 {
  width: 68 %;
}

.w-69 {
  width: 69 %;
}

.w-70 {
  width: 70 %;
}

.w-71 {
  width: 71 %;
}

.w-72 {
  width: 72 %;
}

.w-73 {
  width: 73 %;
}

.w-74 {
  width: 74 %;
}

.w-75 {
  width: 75 %;
}

.w-76 {
  width: 76 %;
}

.w-77 {
  width: 77 %;
}

.w-78 {
  width: 78 %;
}

.w-79 {
  width: 79 %;
}

.w-80 {
  width: 80 %;
}

.w-81 {
  width: 81 %;
}

.w-82 {
  width: 82 %;
}

.w-83 {
  width: 83 %;
}

.w-84 {
  width: 84 %;
}

.w-85 {
  width: 85 %;
}

.w-86 {
  width: 86 %;
}

.w-87 {
  width: 87 %;
}

.w-88 {
  width: 88 %;
}

.w-89 {
  width: 89 %;
}

.w-90 {
  width: 90 %;
}

.w-91 {
  width: 91 %;
}

.w-92 {
  width: 92 %;
}

.w-93 {
  width: 93 %;
}

.w-94 {
  width: 94 %;
}

.w-95 {
  width: 95 %;
}

.w-96 {
  width: 96 %;
}

.w-97 {
  width: 97 %;
}

.w-98 {
  width: 98 %;
}

.w-99 {
  width: 99 %;
}

.w-100 {
  width: 100 %;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.min-w-full {
  min-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.min-h-full {
  min-height: 100%;
}

.max-h-full {
  max-height: 100%;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.z-0 {
  z-index: 0;
}

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

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex-row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex-col-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

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

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

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

.items-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.items-baseline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.items-stretch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.justify-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.justify-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.justify-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.justify-evenly {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.content-start {
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

.content-end {
  -ms-flex-line-pack: end;
      align-content: flex-end;
}

.content-center {
  -ms-flex-line-pack: center;
      align-content: center;
}

.content-between {
  -ms-flex-line-pack: justify;
      align-content: space-between;
}

.content-around {
  -ms-flex-line-pack: distribute;
      align-content: space-around;
}

.content-stretch {
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.self-auto {
  -ms-flex-item-align: auto;
      align-self: auto;
}

.self-start {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.self-end {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.self-center {
  -ms-flex-item-align: center;
      align-self: center;
}

.self-stretch {
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

.flex-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}

.flex-auto {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.flex-initial {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.flex-none {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.gap-0 {
  gap: 0rem;
}

.row-gap-0 {
  row-gap: 0rem;
}

.col-gap-0 {
  -webkit-column-gap: 0rem;
     -moz-column-gap: 0rem;
          column-gap: 0rem;
}

.gap-1 {
  gap: 0.25rem;
}

.row-gap-1 {
  row-gap: 0.25rem;
}

.col-gap-1 {
  -webkit-column-gap: 0.25rem;
     -moz-column-gap: 0.25rem;
          column-gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.row-gap-2 {
  row-gap: 0.5rem;
}

.col-gap-2 {
  -webkit-column-gap: 0.5rem;
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.row-gap-3 {
  row-gap: 0.75rem;
}

.col-gap-3 {
  -webkit-column-gap: 0.75rem;
     -moz-column-gap: 0.75rem;
          column-gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.row-gap-4 {
  row-gap: 1rem;
}

.col-gap-4 {
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.row-gap-5 {
  row-gap: 1.25rem;
}

.col-gap-5 {
  -webkit-column-gap: 1.25rem;
     -moz-column-gap: 1.25rem;
          column-gap: 1.25rem;
}

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.underline {
  text-decoration: underline;
}

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

.no-underline {
  text-decoration: none;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.tracking-tight {
  letter-spacing: -0.05em;
}

.tracking-normal {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 0.05em;
}

.fs-1 {
  font-size: 0.75rem;
}

.fs-2 {
  font-size: 1rem;
}

.fs-3 {
  font-size: 1.25rem;
}

.fs-4 {
  font-size: 1.5rem;
}

.fs-5 {
  font-size: 1.75rem;
}

.fs-6 {
  font-size: 2rem;
}

.lh-1 {
  line-height: 1;
}

.lh-normal {
  line-height: normal;
}

.lh-relaxed {
  line-height: 1.625;
}

.lh-loose {
  line-height: 2;
}

.list-none {
  list-style: none;
}

.list-disc {
  list-style: disc;
}

.list-decimal {
  list-style: decimal;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.select-auto {
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-100 {
  opacity: 1;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.shadow {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.shadow-none {
  -webkit-box-shadow: none;
          box-shadow: none;
}

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

.border-0 {
  border: 0;
}

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

.border-r {
  border-right: 1px solid var(--borderColor);
}

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

.border-l {
  border-left: 1px solid var(--borderColor);
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-none {
  border-radius: 0;
}

.transition {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.transition-none {
  -webkit-transition: none;
  transition: none;
}

.transition-colors {
  -webkit-transition-property: color, background-color, border-color;
  transition-property: color, background-color, border-color;
}

.transition-opacity {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.transition-shadow {
  -webkit-transition-property: -webkit-box-shadow;
  transition-property: -webkit-box-shadow;
  transition-property: box-shadow;
  transition-property: box-shadow, -webkit-box-shadow;
}

body {
  color: var(--textColor);
  background-color: var(--bgLightColor);
}

.swal2-container {
  --swal2-confirm-button-background-color: var(--mainColor);
  --swal2-cancel-button-background-color: var(--mutedColor);
  --swal2-border-radius: var(--brSize);
}
.swal2-container .swal2-popup {
  font-size: 1rem;
}

.full--img {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  height: 0;
  padding-bottom: var(--imgRatio, 100%);
  overflow: var(--imgOverflow, hidden);
  border-radius: var(--imgRadius, 0px);
}
.full--img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: var(--imgFit, cover);
     object-fit: var(--imgFit, cover);
  /* 可选，控制填充方式 */
}

.common-container {
  width: 96%;
  max-width: var(--maxViewWidth);
  margin: 0 auto;
}

.blog-arcnav {
  padding: 0.625rem 0;
  margin-top: 1.875rem;
}
.blog-arcnav > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.blog-arcnav > ul > li {
  width: 3.125rem;
  height: 3.125rem;
  margin: 0 0.625rem;
  overflow: hidden;
  color: var(--titleColor);
  background: var(--mainLightColor);
  border-radius: var(--brSize);
  -webkit-transition: color 0.25s ease, background 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease;
}
.blog-arcnav > ul > li > span,
.blog-arcnav > ul > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-transition: none;
  transition: none;
}
.blog-arcnav > ul > li > span {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.blog-arcnav > ul > li:hover {
  color: #fff;
  background: var(--mainColor);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
}
.blog-arcnav > ul > li.is-disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.6;
}
.blog-arcnav > ul > li.is-actived {
  color: #fff;
  background: var(--mainColor);
}
.blog-arcnav > ul > li.is-pager {
  min-width: 5rem;
}

.blog-breadcrumb {
  padding-bottom: 0.9375rem;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--mutedColor);
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: var(--headerHeight);
  background: var(--bgColor);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.header.is-home {
  background: color-mix(in srgb, var(--bgColor) 25%, transparent);
}
.header:hover.is-home, .header.is-scrolled.is-home {
  background: var(--bgColor);
}
.header-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--headerHeight);
}
.header-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 1.875rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.header-logo-img {
  --imgRatio: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 3rem;
  margin-right: 0.625rem;
  font-size: 0;
  line-height: 0;
}
.header-navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 100%;
}
.header-navbar-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  list-style: none;
}
.header-navbar-item {
  position: relative;
  height: 100%;
}
.header-navbar-item.is-actived {
  --titleColor: var(--mainColor);
}
.header-navbar-item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: var(--headerHeight);
  height: 100%;
  font-size: 1rem;
  color: var(--titleColor);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.header-navbar-item-title:hover {
  color: var(--mainColor);
}
.header-navbar-item-title i {
  margin-left: 0.25rem;
  opacity: 0.7;
}
.header-navbar-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9;
  visibility: hidden;
  min-width: calc(var(--headerHeight) * 2);
  background: #fff;
  border-radius: 0.1875rem;
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  opacity: 0;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.header-navbar-submenu:hover {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.header-navbar-submenu .header-navbar-submenu {
  top: 0;
  left: 100%;
  visibility: hidden;
}
.header-navbar-submenu .header-navbar-submenu:hover {
  top: 0;
  left: 100%;
  visibility: visible;
  opacity: 1;
}
.header-navbar-item-title:hover + .header-navbar-submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.header-navbar-subitem {
  position: relative;
}
.header-navbar-subitem:hover {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.header-navbar-subitem-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.25rem;
}
.header-navbar-subitem-title:hover {
  color: var(--mainColor);
  background: color-mix(in srgb, var(--mainColor) 15%, transparent);
}
.header-navbar-subitem-title i {
  font-size: 0.875rem;
}
.header-navbar-subitem-title:hover + .header-navbar-submenu {
  top: 0;
  left: 100%;
  visibility: visible;
  opacity: 1;
}
.header-login {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 100%;
}
.header-login-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}
.header-login-btn .login-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 0.25rem;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #017ef8;
  background-color: transparent;
  border: 1px solid rgba(1, 126, 248, 0.5);
  -webkit-transition: background-color 0.2s, border-color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, border-color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s, -webkit-box-shadow 0.2s, -webkit-transform 0.1s;
}
.header-login-btn .login-btn:hover {
  background-color: rgba(0, 86, 179, 0.05);
  border-color: rgba(0, 86, 179, 0.75);
}
.header-login-btn .login-btn:active {
  background-color: rgba(0, 66, 153, 0.1);
  border-color: rgba(0, 66, 153, 0.85);
  -webkit-box-shadow: 0 0.0625rem 0.25rem rgba(0, 66, 153, 0.12);
          box-shadow: 0 0.0625rem 0.25rem rgba(0, 66, 153, 0.12);
  opacity: 0.9;
  -webkit-transform: scale(0.97);
          transform: scale(0.97);
}
.header-login-btn .register-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 0.25rem;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #fff;
  background-color: #017ef8;
  -webkit-box-shadow: 0 0.125rem 0.5rem rgba(1, 126, 248, 0.08);
          box-shadow: 0 0.125rem 0.5rem rgba(1, 126, 248, 0.08);
  -webkit-transition: background-color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s, -webkit-box-shadow 0.2s, -webkit-transform 0.1s;
}
.header-login-btn .register-btn:hover {
  background-color: #0056b3;
}
.header-login-btn .register-btn:active {
  background-color: #004299;
  -webkit-box-shadow: 0 0.0625rem 0.25rem rgba(0, 66, 153, 0.12);
          box-shadow: 0 0.0625rem 0.25rem rgba(0, 66, 153, 0.12);
  opacity: 0.9;
  -webkit-transform: scale(0.97);
          transform: scale(0.97);
}
.header-login-btn .register-btn {
  margin-left: 1.25rem;
}
.header-login-info {
  position: relative;
  height: 100%;
}
.header-login-basic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding: 0 1.25rem;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1;
}
.header-login-avatar {
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
  border-radius: 50%;
}
.header-login-menu {
  position: absolute;
  right: 0;
  z-index: 9;
  visibility: hidden;
  width: 12.5rem;
  font-size: 0.875rem;
  color: var(--titleColor);
  background: #fff;
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  opacity: 0;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.header-login-menu:hover {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.header-login-menu-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 1.25rem;
  color: inherit;
}
.header-login-menu-item:first-child {
  border-radius: var(--brSize) var(--brSize) 0 0;
}
.header-login-menu-item:last-child {
  border-radius: 0 0 var(--brSize) var(--brSize);
}
.header-login-menu-item > i {
  margin-right: 0.75rem;
}
.header-login-menu-item:hover {
  background: color-mix(in srgb, var(--mainColor) 15%, transparent);
}
.header-login-basic:hover + .header-login-menu {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.header--block {
  position: relative;
  height: var(--headerHeight);
}

.footer {
  width: 100%;
  height: var(--footerHeight);
  overflow: hidden;
  background: #1f2838;
}
.footer-top {
  background: rgba(255, 255, 255, 0.1);
}
.footer-top-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.footer-top-item {
  padding: 1.25rem 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}
.footer-top-item:not(:last-child)::after {
  padding: 0.625rem;
  content: "|";
  opacity: 0.3;
}
.footer-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.25rem 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.footer-bottom-icp {
  font-size: 0.8125rem;
  opacity: 0.85;
}

.blog-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  max-width: var(--maxViewWidth);
  padding: 1.25rem 0;
  margin: 0 auto;
}
header.header + .blog-container {
  margin-top: var(--headerHeight);
}

.blog-sider {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20rem;
}
.blog-sider-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 0.625rem;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--textColor);
  border-bottom: 0.125rem solid color-mix(in srgb, var(--mainColor) 10%, transparent);
}
.blog-sider-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--mainColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  border-radius: 0.25rem;
  clip-path: inset(0);
  -webkit-transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-sider-icon:hover {
  -webkit-animation: icon-shape-change 10s infinite linear;
          animation: icon-shape-change 10s infinite linear;
}
@-webkit-keyframes icon-shape-change {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
  }
  5%, 10% {
    clip-path: polygon(71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%, 29% 0%, 50% 0%, 71% 0%);
  }
  15%, 20% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  25%, 30% {
    clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%, 50% 0%, 85% 15%);
  }
  35%, 40% {
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%, 15% 0%, 15% 0%, 15% 0%, 15% 0%, 15% 0%, 15% 0%);
  }
  45%, 50% {
    clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  55%, 60% {
    clip-path: polygon(50% 0%, 87% 25%, 87% 75%, 50% 100%, 13% 75%, 13% 25%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  65%, 70% {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  75%, 80% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 75% 50%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, 25% 50%, 0% 40%);
  }
  85%, 90% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  95%, 100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
  }
}
@keyframes icon-shape-change {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
  }
  5%, 10% {
    clip-path: polygon(71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%, 29% 0%, 50% 0%, 71% 0%);
  }
  15%, 20% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  25%, 30% {
    clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%, 50% 0%, 85% 15%);
  }
  35%, 40% {
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%, 15% 0%, 15% 0%, 15% 0%, 15% 0%, 15% 0%, 15% 0%);
  }
  45%, 50% {
    clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  55%, 60% {
    clip-path: polygon(50% 0%, 87% 25%, 87% 75%, 50% 100%, 13% 75%, 13% 25%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  65%, 70% {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  75%, 80% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 75% 50%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, 25% 50%, 0% 40%);
  }
  85%, 90% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  95%, 100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
  }
}
.blog-sider-box {
  position: relative;
  padding: 1.875rem;
  margin-bottom: 1.25rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-sider-box:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-sider-search {
  position: relative;
}
.blog-sider-search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border: 0.0625rem solid var(--borderColor);
  border-radius: 1.5625rem;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
.blog-sider-search-form:focus-within {
  border-color: var(--mainColor);
}
.blog-sider-search-form > input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.625rem 0.9375rem;
  font-size: 0.875rem;
  outline: none;
  border: none;
}
.blog-sider-search-form > button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0.625rem 0.9375rem;
  color: #fff;
  cursor: pointer;
  background: var(--mainColor);
  border: none;
  border-radius: 0 1.5625rem 1.5625rem 0;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.blog-sider-search-form > button:hover {
  background: var(--secondaryColor);
}
.blog-sider-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.blog-sider-tags-tag {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--mainColor);
  text-decoration: none;
  background: color-mix(in srgb, var(--mainColor) 10%, transparent);
  border-radius: 0.9375rem;
  -webkit-transition: color 0.3s ease, background 0.3s ease, -webkit-transform 0.3s ease;
  transition: color 0.3s ease, background 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease, -webkit-transform 0.3s ease;
}
.blog-sider-tags-tag:hover {
  color: #fff;
  background: var(--mainColor);
  -webkit-transform: translateY(-0.125rem);
          transform: translateY(-0.125rem);
}
.blog-sider-cates > ul > li {
  position: relative;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--mainColor) 10%, transparent);
}
.blog-sider-cates > ul > li > a {
  display: block;
  padding: 0.625rem 0;
  color: var(--textColor);
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-sider-cates > ul > li > a .is-new {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin-top: -0.25rem;
  vertical-align: middle;
  background: var(--dangerColor);
  border-radius: 50%;
  -webkit-animation: pulse 1.5s infinite alternate ease-in-out;
          animation: pulse 1.5s infinite alternate ease-in-out;
}
@-webkit-keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0.1;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0.1;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.blog-sider-cates > ul > li > a:hover {
  padding-left: 0.625rem;
  color: var(--mainColor);
}
.blog-sider-hots > ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--mainColor) 10%, transparent);
}
.blog-sider-hots > ul > li > .num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1;
  color: #fff;
  background: var(--mainColor);
  border-radius: 50%;
}
.blog-sider-hots > ul > li > .title {
  display: -webkit-box;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  -webkit-line-clamp: 2;
  font-size: 0.875rem;
  color: var(--textColor);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  -webkit-box-orient: vertical;
}
.blog-sider-hots > ul > li > .title:hover {
  color: var(--mainColor);
}
.blog-sider-updates > ul > li {
  padding: 0.9375rem 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--mainColor) 10%, transparent);
}
.blog-sider-updates > ul > li .date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--mutedColor);
}
.blog-sider-updates > ul > li .dot {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--mainColor);
  border-radius: 50%;
}
.blog-sider-updates > ul > li .content {
  font-size: 0.875rem;
  color: var(--textColor);
}
.blog-sider-updates > ul > li:nth-child(n+2) {
  opacity: 0.5;
}
.blog-sider-updates > ul > li:nth-child(n+3) {
  opacity: 0.4;
}
.blog-sider-updates > ul > li:nth-child(n+4) {
  opacity: 0.3;
}
.blog-sider-updates > ul > li:nth-child(n+5) {
  opacity: 0.2;
}
.blog-sider-updates > ul > li:nth-child(n+6) {
  opacity: 0.1;
}
.blog-sider-links > ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.625rem 0;
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--mainColor) 10%, transparent);
}
.blog-sider-links > ul > li > .num {
  min-width: 1.25rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--mainColor);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.blog-sider-links > ul > li > .name {
  display: block;
  padding: 0.625rem 0;
  color: var(--textColor);
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-sider-links > ul > li > .name:hover {
  padding-left: 0.625rem;
  color: var(--mainColor);
}

.blog-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.home-banner {
  --imgRatio: 25rem;
  position: relative;
  width: 100%;
  height: var(--imgRatio);
  overflow: hidden;
}
.home-banner-box, .home-banner-swiper {
  width: 100%;
  height: 100%;
}
.home-banner-box .swiper-slide, .home-banner-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}
.home-banner .home-banner-pagination {
  --swiper-pagination-bullet-size: 0.75rem;
  --swiper-pagination-bullet-horizontal-gap: 0.5rem;
  --swiper-theme-color: var(--mainColor);
}
.home-banner .home-banner-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.home-labs {
  padding: 1.875rem;
  margin-bottom: 1.25rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-labs:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.home-labs-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media screen and (min-width: 1921px) {
  .home-labs-box {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 1024px) {
  .home-labs-box {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .home-labs-box {
    grid-template-columns: 1fr;
  }
}
.home-labs-item {
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  background: color-mix(in srgb, var(--mainColor) 5%, transparent);
  border: 0.0625rem solid color-mix(in srgb, var(--mainColor) 20%, transparent);
  border-radius: var(--brSize);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.home-labs-item:hover {
  border-color: color-mix(in srgb, var(--mainColor) 40%, transparent);
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.home-labs-item a {
  margin-bottom: 0.625rem;
  --imgRadius: var(--brSize);
}
.home-labs-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--textColor);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.home-labs-item:hover .home-labs-title {
  color: var(--mainColor);
}

.home-list {
  padding: 1.875rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-list:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.home-list .blog-arclist-item {
  padding: 0;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem dashed var(--borderColor);
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.home-list .blog-arclist-item:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.blog-arclist {
  position: relative;
}
.blog-arclist-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  line-height: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-arclist-item:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-arclist-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.blog-arclist-item:hover {
  border-color: var(--mainColor);
  -webkit-transform: translateY(-0.125rem);
          transform: translateY(-0.125rem);
}
.blog-arclist-thumb {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 12.5rem;
  min-width: 0;
  height: 9.375rem;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border-radius: var(--brSize);
}
.blog-arclist-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-arclist-item:hover .blog-arclist-thumb img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.blog-arclist-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.blog-arclist-title {
  margin-bottom: 0.3125rem;
}
.blog-arclist-title-cate {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  margin: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: top;
  color: #fff;
  text-decoration: none;
  background: var(--mainColor);
  border-radius: 0.9375rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-arclist-title-cate:hover {
  background: var(--secondaryColor);
}
.blog-arclist-title-name {
  margin-bottom: 0.625rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--textColor);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.blog-arclist-title-name:hover {
  color: var(--mainColor);
}
.blog-arclist-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.9375rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  color: var(--mutedColor);
}
.blog-arclist-meta > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.3125rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.blog-arclist-meta > span > i {
  font-size: 0.8em;
  opacity: 0.8;
}
.blog-arclist-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 0.9375rem;
}
.blog-arclist-info a {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--mutedColor);
  text-decoration: none;
}
.blog-arclist-footer {
  position: relative;
  width: 100%;
}
.blog-arclist-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.375rem;
}
.blog-arclist-tags > a {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--mainColor);
  text-decoration: none;
  background: color-mix(in srgb, var(--mainColor) 10%, transparent);
  border-radius: 0.75rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-arclist-tags > a:hover {
  color: #fff;
  background: var(--mainColor);
}
.blog-arclist-empty {
  padding: 3.125rem 0;
  font-size: 1rem;
  color: var(--mutedColor);
  text-align: center;
}

.blog-breadcrumb {
  padding: 0.9375rem 1.5625rem;
  margin-bottom: 1.5625rem;
  font-size: 0.875rem;
  color: var(--mutedColor);
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--brSize);
  backdrop-filter: blur(0.625rem);
}
.blog-breadcrumb a {
  color: var(--mainColor);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.blog-breadcrumb a:hover {
  color: var(--secondaryColor);
}
.blog-breadcrumb span {
  margin: 0 0.5rem;
  color: var(--mutedColor);
}

.blog-detail {
  padding: 1.875rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-detail:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-detail-title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--titleColor);
  word-break: break-word;
}
.blog-detail-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25rem 0;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--mutedColor);
  border-bottom: 0.0625rem solid var(--borderColor);
}
.blog-detail-meta > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.375rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.blog-detail-meta > span > i {
  font-size: 0.8em;
  opacity: 0.8;
}
.blog-detail-meta > span > a:hover {
  color: var(--mainColor);
  text-decoration: underline;
}
.blog-detail-content {
  margin: 1.875rem 0;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #2c3e50;
}
.blog-detail-content h1,
.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4,
.blog-detail-content h5,
.blog-detail-content h6 {
  margin: 1.875rem 0 1.25rem;
  font-weight: 600;
  color: var(--textColor);
}
.blog-detail-content h1 {
  padding-bottom: 0.625rem;
  font-size: 2rem;
  border-bottom: 0.1875rem solid var(--mainColor);
}
.blog-detail-content h2 {
  position: relative;
  padding-left: 1.25rem;
  font-size: 1.5rem;
}
.blog-detail-content h2::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.25rem;
  height: 1.25rem;
  content: "";
  background: var(--mainColor);
  border-radius: 0.125rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.blog-detail-content h3 {
  font-size: 1.125rem;
  color: var(--mainColor);
}
.blog-detail-content p {
  margin-bottom: 1rem;
  text-align: justify;
  word-break: break-word;
}
.blog-detail-content code {
  padding: 0.1875rem 0.375rem;
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 0.875rem;
  color: var(--mainColor);
  background: rgba(1, 126, 248, 0.1);
  border-radius: 0.25rem;
}
.blog-detail-content pre {
  padding: 1.25rem;
  margin: 1.25rem 0;
  overflow-x: auto;
  line-height: 1.5;
  background: #f8f9fa;
  border: 0.0625rem solid var(--borderColor);
  border-radius: 0.5rem;
}
.blog-detail-content pre code {
  padding: 0;
  color: var(--textColor);
  background: none;
}
.blog-detail-content blockquote {
  padding: 1.25rem 1.5625rem;
  margin: 1.25rem 0;
  font-style: italic;
  background: rgba(1, 126, 248, 0.05);
  border-left: 0.25rem solid var(--mainColor);
  border-radius: 0 0.5rem 0.5rem 0;
}
.blog-detail-content ul,
.blog-detail-content ol {
  padding-left: 1.875rem;
  margin: 1rem 0;
  list-style-type: auto;
}
.blog-detail-content ul li,
.blog-detail-content ol li {
  margin-bottom: 0.5rem;
}
.blog-detail-content img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 1.25rem 0;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
}
.blog-detail-content a {
  color: var(--mainColor);
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-detail-content a:hover {
  color: var(--secondaryColor);
  -webkit-text-decoration: underline wavy;
          text-decoration: underline wavy;
}
.blog-detail-content a[target=_blank]::after {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.8em;
  content: "↗";
}
.blog-detail-content a:has(> img) {
  display: block;
  font-size: 0;
  line-height: 0;
  opacity: 1;
}
.blog-detail-content a:has(> img):hover {
  text-decoration: none;
}
.blog-detail-content table {
  width: 100%;
  margin: 1.25rem 0;
  overflow: hidden;
  border-collapse: collapse;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
}
.blog-detail-content table tr:nth-child(even) {
  background: #f8f9ff;
}
.blog-detail-content table th,
.blog-detail-content table td {
  padding: 0.75rem 0.9375rem;
  text-align: left;
  border-bottom: 0.0625rem solid var(--borderColor);
}
.blog-detail-content table th {
  font-weight: 600;
  color: white;
  background: var(--mainColor);
}
.blog-detail-content .dp-highlighter {
  max-height: 31.25rem;
  overflow: hidden;
  border-radius: 0.75rem;
}
.blog-detail-copyright {
  padding: 1.25rem;
  margin: 1.875rem 0;
  color: var(--mutedColor);
  background: color-mix(in srgb, var(--mainColor) 5%, transparent);
  border-left: 0.25rem solid var(--mainColor);
  border-radius: var(--brSize);
}
.blog-detail-copyright a {
  color: var(--mainColor);
  text-decoration: none;
}
.blog-detail-copyright a:hover {
  color: var(--secondaryColor);
  text-decoration: underline;
}
.blog-detail-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.875rem;
}
.blog-detail-tags > a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.625rem 1rem 0.625rem 2.1875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--textColor);
  text-decoration: none;
  background: color-mix(in srgb, var(--mainColor) 10%, transparent);
  border-radius: 1.5625rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-detail-tags > a::before {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  content: "#";
  background: var(--mainColor);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-detail-tags > a:hover {
  color: #fff;
  background: var(--mainColor);
  -webkit-box-shadow: 0 0.3125rem 0.9375rem color-mix(in srgb, var(--mainColor) 30%, transparent);
          box-shadow: 0 0.3125rem 0.9375rem color-mix(in srgb, var(--mainColor) 30%, transparent);
  -webkit-transform: translateY(-0.125rem);
          transform: translateY(-0.125rem);
}
.blog-detail-tags > a:hover::before {
  color: var(--mainColor);
  background: #fff;
}
.blog-detail-praise {
  padding: 1.25rem 0;
  margin: 1.875rem 0;
  text-align: center;
  border-top: 0.0625rem solid #eee;
  border-bottom: 0.0625rem solid #eee;
}
.blog-detail-praise .praise-btn,
.blog-detail-praise .dislike-btn,
.blog-detail-praise .collect-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.625rem 1.875rem;
  margin: 0 0.625rem;
  font-size: 1rem;
  color: var(--mainColor);
  cursor: pointer;
  background: #fff;
  border: 0.125rem solid var(--mainColor);
  border-radius: 1.5625rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-detail-praise .praise-btn i,
.blog-detail-praise .dislike-btn i,
.blog-detail-praise .collect-btn i {
  font-size: 1.125rem;
}
.blog-detail-praise .praise-btn:hover,
.blog-detail-praise .dislike-btn:hover,
.blog-detail-praise .collect-btn:hover {
  color: #fff;
  background: var(--mainColor);
  -webkit-box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--mainColor) 30%, transparent);
          box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--mainColor) 30%, transparent);
  -webkit-transform: translateY(-0.125rem);
          transform: translateY(-0.125rem);
}
.blog-detail-praise .praise-btn.praised, .blog-detail-praise .praise-btn.collected,
.blog-detail-praise .dislike-btn.praised,
.blog-detail-praise .dislike-btn.collected,
.blog-detail-praise .collect-btn.praised,
.blog-detail-praise .collect-btn.collected {
  color: #fff;
  background: var(--mainColor);
}
.blog-detail-praise .dislike-btn {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
.blog-detail-praise .dislike-btn:hover {
  color: #fff;
  background: #ff4d4f;
  -webkit-box-shadow: 0 0.25rem 0.75rem rgba(255, 77, 79, 0.3);
          box-shadow: 0 0.25rem 0.75rem rgba(255, 77, 79, 0.3);
}
.blog-detail-praise .dislike-btn.disliked {
  color: #fff;
  background: #ff4d4f;
}
.blog-detail-praise .collect-btn {
  color: #faad14;
  border-color: #faad14;
}
.blog-detail-praise .collect-btn:hover {
  color: #fff;
  background: #faad14;
  -webkit-box-shadow: 0 0.25rem 0.75rem rgba(250, 173, 20, 0.3);
          box-shadow: 0 0.25rem 0.75rem rgba(250, 173, 20, 0.3);
}
.blog-detail-praise .collect-btn.collected {
  color: #fff;
  background: #faad14;
}
.blog-detail-comments {
  padding: 1.875rem;
  margin-top: 2.5rem;
  background: #fff;
  border-radius: 0.5rem;
}
.blog-detail-comments .comments-title {
  padding-bottom: 0.625rem;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  border-bottom: 0.125rem solid var(--mainColor);
}
.blog-detail-comments .comment-form {
  padding: 1.25rem;
  margin-bottom: 1.875rem;
  background: #f9f9f9;
  border-radius: 0.5rem;
}
.blog-detail-comments .comment-form textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
  border: 0.0625rem solid #ddd;
  border-radius: 0.25rem;
}
.blog-detail-comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--mainColor);
}
.blog-detail-comments .comment-form-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.9375rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 0.625rem;
}
.blog-detail-comments .comment-form-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  gap: 0.625rem;
}
.blog-detail-comments .comment-form-info input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 0.0625rem solid #ddd;
  border-radius: 0.25rem;
}
.blog-detail-comments .comment-form-info input:focus {
  outline: none;
  border-color: var(--mainColor);
}
.blog-detail-comments .comment-form .comment-submit-btn {
  padding: 0.625rem 1.875rem;
  font-size: 0.875rem;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: var(--mainColor);
  border: none;
  border-radius: 0.25rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-detail-comments .comment-form .comment-submit-btn:hover {
  background: #0d96cc;
  -webkit-box-shadow: 0 0.25rem 0.5rem color-mix(in srgb, var(--mainColor) 30%, transparent);
          box-shadow: 0 0.25rem 0.5rem color-mix(in srgb, var(--mainColor) 30%, transparent);
  -webkit-transform: translateY(-0.0625rem);
          transform: translateY(-0.0625rem);
}
.blog-detail-comments .comments-list {
  margin-top: 1.25rem;
}
.blog-detail-comments .comments-list .comment-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.9375rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 0.0625rem solid #f0f0f0;
}
.blog-detail-comments .comments-list .comment-item.child-comment {
  padding: 0.9375rem;
  margin-left: 3.75rem;
  background: #f9f9f9;
  border-bottom: none;
  border-radius: 0.5rem;
}
.blog-detail-comments .comments-list .comment-item .comment-avatar img {
  width: 2.8125rem;
  height: 2.8125rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.blog-detail-comments .comments-list .comment-item .comment-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0.625rem;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-header .comment-author {
  font-size: 0.9375rem;
  font-weight: bold;
  color: #333;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-header .comment-time {
  font-size: 0.8125rem;
  color: #999;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-text {
  margin-bottom: 0.625rem;
  line-height: 1.6;
  color: #666;
  word-wrap: break-word;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.9375rem;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-reply-btn,
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-praise-btn,
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-dislike-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0.3125rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--mainColor);
  cursor: pointer;
  background: none;
  border: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-reply-btn:hover,
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-praise-btn:hover,
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-dislike-btn:hover {
  color: #0d96cc;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-praise-btn.praised {
  font-weight: bold;
  color: var(--mainColor);
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-dislike-btn {
  color: #999;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-dislike-btn:hover {
  color: #ff4d4f;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-actions .comment-dislike-btn.disliked {
  font-weight: bold;
  color: #ff4d4f;
}
.blog-detail-comments .comments-list .comment-item .comment-content .comment-children {
  margin-top: 0.9375rem;
}
.blog-detail-comments-closed {
  padding: 1.875rem;
  margin-top: 2.5rem;
  color: #999;
  text-align: center;
  background: #f5f5f5;
  border-radius: 0.5rem;
}

@media (max-width: 48rem) {
  .blog-detail-comments {
    padding: 1.25rem 0.9375rem;
  }
  .blog-detail-comments .comment-form-footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .blog-detail-comments .comment-form-info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .blog-detail-comments .comment-form .comment-submit-btn {
    width: 100%;
  }
  .blog-detail-comments .comments-list .comment-item.child-comment {
    margin-left: 1.875rem;
  }
  .blog-detail-comments .comments-list .comment-item .comment-avatar img {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}
.blog-updates-box {
  padding: 1.875rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-updates-box:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-updates-title {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--titleColor);
  border-bottom: 0.0625rem solid var(--borderColor);
}
.blog-updates > ul {
  position: relative;
  padding-left: 2.5rem;
}
.blog-updates > ul::after {
  position: absolute;
  top: 0.5rem;
  left: 0.625rem;
  width: 0.125rem;
  height: calc(100% - 1rem);
  content: "";
  background: -webkit-gradient(linear, left top, left bottom, from(var(--mixMainColor90)), to(var(--mixMainColor10)));
  background: linear-gradient(180deg, var(--mixMainColor90) 0%, var(--mixMainColor10) 100%);
  border-radius: 0.0625rem;
}
.blog-updates > ul > li {
  position: relative;
  padding-bottom: 2rem;
  color: var(--textColor);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-updates > ul > li .date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mutedColor);
}
.blog-updates > ul > li .date > .dot {
  position: absolute;
  top: 0.375rem;
  left: -2.1875rem;
  z-index: 10;
  width: 0.75rem;
  height: 0.75rem;
  background: linear-gradient(135deg, var(--mainColor), var(--accentColor));
  border: 0.125rem solid var(--bgColor);
  border-radius: 50%;
  -webkit-box-shadow: 0 0.125rem 0.75rem var(--mixMainColor30);
          box-shadow: 0 0.125rem 0.75rem var(--mixMainColor30);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-updates > ul > li .content {
  padding: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--textColor);
  word-break: break-word;
  background: var(--bgLightColor);
  border-left: 0.25rem solid var(--mainColor);
  border-radius: var(--brSize);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog-updates > ul > li:hover .date > .dot {
  background: linear-gradient(135deg, var(--accentColor), var(--mainColor));
  -webkit-box-shadow: 0 0.25rem 1rem var(--mixMainColor40);
          box-shadow: 0 0.25rem 1rem var(--mixMainColor40);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.blog-updates > ul > li:hover .content {
  background: var(--mixMainColor5);
  border-left-color: var(--accentColor);
  -webkit-transform: translateY(-0.125rem);
          transform: translateY(-0.125rem);
}
.blog-updates > ul > li:first-child .date > .dot {
  background: linear-gradient(135deg, var(--successColor), var(--infoColor));
  -webkit-box-shadow: 0 0.125rem 0.75rem rgba(16, 185, 129, 0.3);
          box-shadow: 0 0.125rem 0.75rem rgba(16, 185, 129, 0.3);
}
.blog-updates > ul > li:first-child:hover .date > .dot {
  background: linear-gradient(135deg, var(--infoColor), var(--successColor));
  -webkit-box-shadow: 0 0.25rem 1rem rgba(16, 185, 129, 0.4);
          box-shadow: 0 0.25rem 1rem rgba(16, 185, 129, 0.4);
}
@media screen and (max-width: 768px) {
  .blog-updates-box {
    padding: 1.25rem;
  }
  .blog-updates > ul {
    padding-left: 2rem;
  }
  .blog-updates > ul > li .date > .dot {
    left: -1.75rem;
  }
  .blog-updates > ul > li .content {
    padding: 1rem;
    font-size: 0.8125rem;
  }
}
@media screen and (max-width: 480px) {
  .blog-updates-box {
    padding: 1rem;
  }
  .blog-updates-title {
    font-size: 1.125rem;
  }
  .blog-updates > ul {
    padding-left: 1.5rem;
  }
  .blog-updates > ul::after {
    left: 0.4375rem;
  }
  .blog-updates > ul > li {
    padding-bottom: 1.5rem;
  }
  .blog-updates > ul > li .date {
    font-size: 0.75rem;
  }
  .blog-updates > ul > li .date > .dot {
    left: -1.375rem;
    width: 0.625rem;
    height: 0.625rem;
  }
  .blog-updates > ul > li .content {
    padding: 0.875rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.6;
  }
  .blog-updates > ul > li:hover {
    -webkit-transform: none;
            transform: none;
  }
}

.blog-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.625rem;
  width: 100%;
}
.blog-tags-box {
  padding: 0.9375rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-tags-box:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-tags-title {
  padding-bottom: 0.9375rem;
  margin-bottom: 0.9375rem;
  font-size: 1.25rem;
  font-weight: bold;
  border-bottom: 0.0625rem solid rgba(128, 137, 155, 0.25);
}
.blog-tags-tag {
  padding: 0.25rem 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  color: var(--mainColor);
  white-space: nowrap;
  border-radius: var(--brSize);
  -webkit-box-shadow: 0 0 0 0.0625rem currentcolor;
          box-shadow: 0 0 0 0.0625rem currentcolor;
  -webkit-animation: lightPulse 5s linear infinite;
          animation: lightPulse 5s linear infinite;
  -webkit-animation-delay: calc(var(--i) * 0.1s);
          animation-delay: calc(var(--i) * 0.1s);
}

/* 跑马灯颜色循环动画（7色） */
@-webkit-keyframes lightPulse {
  0% {
    color: #249d66;
  }
  14% {
    color: #186af2;
  }
  28% {
    color: #c6194b;
  }
  42% {
    color: #fbbc05;
  }
  57% {
    color: #dccff2;
  }
  71% {
    color: #ea4335;
  }
  85% {
    color: #3d9037;
  }
  100% {
    color: #6044bf;
  }
}
@keyframes lightPulse {
  0% {
    color: #249d66;
  }
  14% {
    color: #186af2;
  }
  28% {
    color: #c6194b;
  }
  42% {
    color: #fbbc05;
  }
  57% {
    color: #dccff2;
  }
  71% {
    color: #ea4335;
  }
  85% {
    color: #3d9037;
  }
  100% {
    color: #6044bf;
  }
}
.blog-calendar {
  padding: 0.9375rem;
  margin-bottom: 1.25rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-calendar:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-calendar > div {
  width: 100%;
  height: 18.75rem;
}

.blog-analysis {
  padding: 0.9375rem;
  margin-bottom: 1.25rem;
  text-align: center;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-analysis:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-analysis > span {
  margin: 0 0.625rem;
  font-size: 1.25rem;
  color: #ea4335;
}

.blog-archives {
  padding: 0.9375rem;
  margin-bottom: 1.25rem;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-archives:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-archives-year {
  margin-top: 1rem;
  border-bottom: 0.0625rem solid var(--borderColor);
}
.blog-archives-year > h3 {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-left: 0.3125rem solid var(--mainColor);
}
.blog-archives-month {
  padding: 0.9375rem 1rem 0.3125rem;
  font-size: 0.875rem;
}
.blog-archives-month > .mon-num {
  color: #999;
}
.blog-archives-ul {
  padding: 0 3.125rem;
  font-size: 0.875rem;
  line-height: 1.5625rem;
  color: #999;
}
.blog-archives-ul a:hover {
  color: var(--mainColor);
  text-decoration: underline;
}

.blog-doclist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding-bottom: 1.875rem;
}
.blog-doclist-item {
  width: 30%;
  min-height: 26.875rem;
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  background: var(--bgColor);
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-doclist-item:hover {
  -webkit-box-shadow: var(--bsSizeHover);
          box-shadow: var(--bsSizeHover);
  -webkit-transform: translateY(-0.3125rem);
          transform: translateY(-0.3125rem);
}
.blog-doclist-img {
  display: block;
  width: 100%;
  height: 13.75rem;
}
.blog-doclist-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
}
.blog-doclist-title {
  display: block;
  width: 100%;
  max-height: 2rem;
  padding: 0 0.9375rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
  font-size: 1rem;
  line-height: 2;
}
.blog-doclist-title > a {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-doclist-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0 0.9375rem;
  margin-bottom: 0.625rem;
}
.blog-doclist-meta > span {
  margin-right: 0.625rem;
  font-size: 0.875rem;
  color: #999;
}
.blog-doclist-meta > span > i {
  margin-right: 0.25rem;
  opacity: 0.6;
}
.blog-doclist-desc {
  height: 3.5rem;
  padding: 0 0.9375rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 2;
  color: #555;
}
.blog-doclist-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.9375rem;
}
.blog-doclist-view > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20%;
  min-width: 7.5rem;
  max-width: 12.5rem;
  padding: 0.625rem 0;
  font-size: 1rem;
  color: #fff;
  background: var(--mainColor);
  border-radius: var(--brSize);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(1.25rem);
            transform: translateY(1.25rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-0.3125rem);
            transform: translateY(-0.3125rem);
  }
}
@-webkit-keyframes slideInFromLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1.875rem);
            transform: translateX(-1.875rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-1.875rem);
            transform: translateX(-1.875rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.auth-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  font-family: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif;
  background: linear-gradient(-45deg, var(--bgLightColor), var(--mixMainColor10), var(--successColor), var(--infoColor));
  background-size: 400% 400%;
  -webkit-animation: gradientShift 8s ease-in-out infinite;
          animation: gradientShift 8s ease-in-out infinite;
}
.auth-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 56.25rem;
  max-width: 90vw;
  min-height: 37.5rem;
  overflow: hidden;
  background: var(--bgColor);
  border-radius: 1.25rem;
  -webkit-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.1), 0 0 5rem var(--mixMainColor5);
          box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.1), 0 0 5rem var(--mixMainColor5);
  -webkit-animation: fadeInUp 0.8s ease-out;
          animation: fadeInUp 0.8s ease-out;
}
.auth-decoration {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3.75rem 2.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--mainColor) 0%, var(--secondaryColor) 100%);
}
.auth-decoration::before {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  content: "";
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 1.875rem 1.875rem;
  -webkit-animation: float 10s ease-in-out infinite;
          animation: float 10s ease-in-out infinite;
}
.auth-decoration .decoration-content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
}
.auth-decoration .decoration-content h2 {
  margin-bottom: 1.25rem;
  font-size: 2rem;
  font-weight: 300;
  -webkit-animation: slideInFromLeft 1s ease-out 0.3s both;
          animation: slideInFromLeft 1s ease-out 0.3s both;
}
.auth-decoration .decoration-content p {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.9;
  -webkit-animation: slideInFromLeft 1s ease-out 0.5s both;
          animation: slideInFromLeft 1s ease-out 0.5s both;
}
.auth-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3.75rem 3.125rem;
}
.auth-logo {
  margin-bottom: 2.5rem;
  text-align: center;
}
.auth-logo img {
  width: 3.125rem;
  height: 3.125rem;
  margin-bottom: 0.9375rem;
  border-radius: 50%;
}
.auth-logo h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--titleColor);
}
.auth-title {
  margin-bottom: 1.875rem;
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--titleColor);
  text-align: center;
}
.auth-subtitle {
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
  color: var(--mutedColor);
  text-align: center;
}

.auth-form-group {
  position: relative;
  margin-bottom: 1.5625rem;
}
.auth-form-group.auth-form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.9375rem;
}
.auth-form-group.auth-form-row .auth-form-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 0;
}
.auth-form-label {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 1;
  font-size: 0.875rem;
  color: var(--mutedColor);
  pointer-events: none;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.auth-form-input {
  width: 100%;
  height: 3.125rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  color: var(--textColor);
  background: var(--bgColor);
  border: 0.125rem solid var(--borderColor);
  border-radius: 0.625rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.auth-form-input:focus {
  outline: none;
  border-color: var(--mainColor);
  -webkit-box-shadow: 0 0 0 0.1875rem var(--mixMainColor10);
          box-shadow: 0 0 0 0.1875rem var(--mixMainColor10);
}
.auth-form-input:focus + .auth-form-label, .auth-form-input:valid + .auth-form-label, .auth-form-input.auth-form-has-value + .auth-form-label {
  top: -0.4rem;
  left: 0.75rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--mainColor);
  background: var(--bgColor);
}
.auth-form-input.auth-form-error {
  border-color: var(--dangerColor);
}
.auth-form-input.auth-form-error:focus {
  -webkit-box-shadow: 0 0 0 0.1875rem rgba(239, 68, 68, 0.1);
          box-shadow: 0 0 0 0.1875rem rgba(239, 68, 68, 0.1);
}
.auth-form-input.auth-form-success {
  border-color: var(--successColor);
}
.auth-form-input.auth-form-success:focus {
  -webkit-box-shadow: 0 0 0 0.1875rem rgba(16, 185, 129, 0.1);
          box-shadow: 0 0 0 0.1875rem rgba(16, 185, 129, 0.1);
}
.auth-form-error {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--dangerColor);
}
.auth-form-wrapper {
  width: 100%;
}

.auth-captcha-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.auth-captcha-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.auth-captcha-image {
  width: 7.5rem;
  height: 3.125rem;
  cursor: pointer;
  border: 0.125rem solid var(--borderColor);
  border-radius: 0.625rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.auth-captcha-image:hover {
  border-color: var(--mainColor);
}
.auth-captcha-image img {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
}

.auth-btn {
  position: relative;
  width: 100%;
  height: 3.125rem;
  margin-top: 1.5625rem;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  cursor: pointer;
  background: linear-gradient(135deg, var(--mainColor) 0%, var(--secondaryColor) 100%);
  border: none;
  border-radius: 0.625rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.auth-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.auth-btn:hover {
  background: linear-gradient(135deg, var(--secondaryColor) 0%, var(--mainColor) 100%);
  -webkit-box-shadow: 0 0.625rem 1.25rem var(--mixMainColor30);
          box-shadow: 0 0.625rem 1.25rem var(--mixMainColor30);
  -webkit-transform: translateY(-0.125rem);
          transform: translateY(-0.125rem);
}
.auth-btn:hover::before {
  width: 30rem;
  height: 30rem;
}
.auth-btn:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.auth-btn.auth-btn-secondary {
  color: var(--mainColor);
  background: transparent;
  border: 0.125rem solid var(--mainColor);
}
.auth-btn.auth-btn-secondary:hover {
  color: white;
  background: var(--mainColor);
  -webkit-box-shadow: 0 0.625rem 1.25rem var(--mixMainColor20);
          box-shadow: 0 0.625rem 1.25rem var(--mixMainColor20);
}
.auth-btn:disabled {
  cursor: not-allowed;
  background: var(--mutedColor);
}
.auth-btn:disabled:hover {
  background: var(--mutedColor);
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: none;
          transform: none;
}

.auth-link {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--mainColor);
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.auth-link:hover {
  color: var(--secondaryColor);
  text-decoration: underline;
}

.auth-divider {
  position: relative;
  margin: 1.875rem 0;
  font-size: 0.875rem;
  color: var(--mutedColor);
  text-align: center;
}
.auth-divider::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.0625rem;
  content: "";
  background: var(--borderColor);
}
.auth-divider span {
  padding: 0 1.25rem;
  background: var(--bgColor);
}

@media (max-width: 48rem) {
  .auth-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 95vw;
    min-height: auto;
  }
  .auth-decoration {
    padding: 2.5rem 1.875rem;
  }
  .auth-decoration .decoration-content h2 {
    font-size: 1.5rem;
  }
  .auth-form {
    padding: 2.5rem 1.875rem;
  }
  .auth-form-group.auth-form-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .auth-form-group.auth-form-row .auth-form-group {
    margin-bottom: 1.5625rem;
  }
}
@media (max-width: 30rem) {
  .auth-form {
    padding: 1.875rem 1.25rem;
  }
  .auth-decoration {
    padding: 1.875rem 1.25rem;
  }
  .auth-decoration .decoration-content h2 {
    font-size: 1.25rem;
  }
  .auth-captcha-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .auth-captcha-group .auth-captcha-image {
    width: 100%;
  }
}
.auth-form .auth-form-group {
  -webkit-animation: fadeInUp 0.6s ease-out;
          animation: fadeInUp 0.6s ease-out;
}
.auth-form .auth-form-group:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.auth-form .auth-form-group:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.auth-form .auth-form-group:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.auth-form .auth-form-group:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.user {
  width: 100%;
  padding-right: 1.875rem;
}
.user-menu {
  width: 100%;
}
.user-menu > h3 {
  padding: 0.75rem 0;
  margin-bottom: 0.625rem;
  font-size: 1.25rem;
  color: #fff;
  text-align: center;
  background: var(--mainColor);
  border-radius: var(--brSize);
}
.user-menu > ul {
  padding: 1.25rem 0;
  overflow: hidden;
  background: #fff;
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
}
.user-menu > ul > li {
  font-size: 1rem;
  line-height: 3.25rem;
  border-bottom: 0.0625rem solid #eee;
  border-left: 0.25rem solid transparent;
}
.user-menu > ul > li.is-actived {
  font-weight: bold;
  border-left-color: var(--mainColor);
}
.user-menu > ul > li:last-child {
  border-bottom: none;
}
.user-menu > ul > li > a {
  display: block;
  line-height: 3.25rem;
  text-indent: 1.25rem;
}
.user-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: #fff;
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
}
.user-info-avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  margin-right: 0.9375rem;
  overflow: hidden;
  border-radius: 50%;
}
.user-info-avatar img {
  width: 100%;
  height: 100%;
}
.user-info-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.user-info-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 2.25rem;
  white-space: nowrap;
}
.user-info-tips {
  max-height: 2.625rem;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #666;
}
.user-detail {
  width: 100%;
  padding: 1.25rem;
  background: #fff;
  border-radius: var(--brSize);
  -webkit-box-shadow: var(--bsSize);
          box-shadow: var(--bsSize);
}
.user-detail .user-detail-title {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-bottom: 0.0625rem solid #eee;
}
.user-detail .user-detail-title > a {
  margin-left: 0.625rem;
  font-size: 0.875rem;
  color: #4385f5;
}
.user-detail-table {
  width: 100%;
  margin: 1.25rem 0;
  border: 0.0625rem solid #eee;
}
.user-detail-table td {
  padding: 0.625rem 0.9375rem;
  font-size: 0.875rem;
}
.user-detail-table td:nth-child(2n+1) {
  color: #555;
  text-align: right;
  background: #f2f2f2;
}
.user-detail-table td > input,
.user-detail-table td > select,
.user-detail-table td > textarea {
  width: 100%;
  padding: 0.3125rem 0.625rem;
  border: none;
}
.user-detail-table td .avatar-upload {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  overflow: hidden;
  border: 0.0625rem solid #eee;
  border-radius: 50%;
}
.user-detail-table td .avatar-upload > input {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.user-detail-table td .avatar-upload > input:first-child {
  position: relative;
  z-index: 1;
}
.user-detail-table td .avatar-upload > img {
  width: 100%;
  height: 100%;
}
.user-detail-edit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.user-detail-edit > span {
  padding: 0.625rem 1.875rem;
  font-size: 0.875rem;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: #4385f5;
  border-radius: 0.25rem;
}
.user-detail-edit > span.edit-cancel {
  margin-left: 1.25rem;
  color: #666;
  background: #ddd;
}
.user-detail-edit > span:hover {
  opacity: 0.7;
}