epnz-block-ui/dist/css/block.css

Block UI

@charset "UTF-8";
/*
 * @Author: 故乡情 s@epnz.com
 * @Date: 2022-06-14 13:00:08
 * @LastEditTime: 2025-11-13 00:18:58
 * @LastEditors: 故乡情 s@epnz.com
 * @Description: Block UI
 * @FilePath: \ui\src\scss\block.scss
 */
body {
  margin: 0;
  font-family: Verdana, "Microsoft YaHei", Geneva, Tahoma, sans-serif;
  color: #302e32;
}

a {
  color: #7d01f8;
  text-decoration: none;
}

a:hover {
  color: rgb(86.5963855422, 0.6927710843, 171.8072289157);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1 0 0;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
.black {
  color: #000;
}

.bc-black {
  background-color: #000;
}

.bc-gradient-black {
  background: linear-gradient(45deg, hsl(0, 0%, -6%), rgb(30.6, 30.6, 30.6));
}

.danger {
  color: #ff3300;
}

.bc-danger {
  background-color: #ff3300;
}

.bc-gradient-danger {
  background: linear-gradient(45deg, rgb(224.4, 44.88, 0), rgb(255, 99.96, 61.2));
}

.default {
  color: #7d01f8;
}

.bc-default {
  background-color: #7d01f8;
}

.bc-gradient-default {
  background: linear-gradient(45deg, rgb(109.6385542169, 0.8771084337, 217.5228915663), rgb(155.5012048193, 56.0024096386, 254.1975903614));
}

.success {
  color: #04be02;
}

.bc-success {
  background-color: #04be02;
}

.bc-gradient-success {
  background: linear-gradient(45deg, rgb(3.3625, 159.71875, 1.68125), rgb(5.275, 250.5625, 2.6375));
}

.warning {
  color: #ffcc00;
}

.bc-warning {
  background-color: #ffcc00;
}

.bc-gradient-warning {
  background: linear-gradient(45deg, rgb(224.4, 179.52, 0), rgb(255, 216.24, 61.2));
}

.info {
  color: #4073ff;
}

.bc-info {
  background-color: #4073ff;
}

.bc-gradient-info {
  background: linear-gradient(45deg, rgb(33.4, 92.5706806283, 255), rgb(125.2, 159.8586387435, 255));
}

.dark {
  color: #302e32;
}

.bc-dark {
  background-color: #302e32;
}

.bc-gradient-dark {
  background: linear-gradient(45deg, rgb(32.7, 31.3375, 34.0625), rgb(78.6, 75.325, 81.875));
}

.white {
  color: #ffffff;
}

.bc-white {
  background-color: #ffffff;
}

.bc-gradient-white {
  background: linear-gradient(45deg, rgb(239.7, 239.7, 239.7), hsl(0, 0%, 112%));
}

.blue {
  color: #4073ff;
}

.bc-blue {
  background-color: #4073ff;
}

.bc-gradient-blue {
  background: linear-gradient(45deg, rgb(33.4, 92.5706806283, 255), rgb(125.2, 159.8586387435, 255));
}

.green {
  color: #04be02;
}

.bc-green {
  background-color: #04be02;
}

.bc-gradient-green {
  background: linear-gradient(45deg, rgb(3.3625, 159.71875, 1.68125), rgb(5.275, 250.5625, 2.6375));
}

.marrs {
  color: #008080;
}

.bc-marrs {
  background-color: #008080;
}

.bc-gradient-marrs {
  background: linear-gradient(45deg, rgb(0, 97.4, 97.4), rgb(0, 189.2, 189.2));
}

.orange {
  color: #ff6600;
}

.bc-orange {
  background-color: #ff6600;
}

.bc-gradient-orange {
  background: linear-gradient(45deg, rgb(224.4, 89.76, 0), rgb(255, 138.72, 61.2));
}

.pink {
  color: #d63384;
}

.bc-pink {
  background-color: #d63384;
}

.bc-gradient-pink {
  background: linear-gradient(45deg, rgb(195.173877551, 39.226122449, 116.7216326531), rgb(224.2416326531, 101.9583673469, 162.7248979592));
}

.red {
  color: #ff3300;
}

.bc-red {
  background-color: #ff3300;
}

.bc-gradient-red {
  background: linear-gradient(45deg, rgb(224.4, 44.88, 0), rgb(255, 99.96, 61.2));
}

.yellow {
  color: #ffcc00;
}

.bc-yellow {
  background-color: #ffcc00;
}

.bc-gradient-yellow {
  background: linear-gradient(45deg, rgb(224.4, 179.52, 0), rgb(255, 216.24, 61.2));
}

.gray {
  color: #b0acb3;
}

.bc-gray {
  background-color: #b0acb3;
}

.bc-gradient-gray {
  background: linear-gradient(45deg, rgb(160.7962264151, 156.0264150943, 164.3735849057), rgb(206.4075471698, 203.9471698113, 208.2528301887));
}

.bright {
  color: #e3e1e4;
}

.bc-bright {
  background-color: #e3e1e4;
}

.bc-gradient-bright {
  background: linear-gradient(45deg, rgb(211.9684210526, 208.8947368421, 213.5052631579), hsl(280, 5.2631578947%, 100.8235294118%));
}

.br {
  border-radius: 5px;
}

.br-top {
  border-radius: 5px 5px 0 0;
}

.br-right {
  border-radius: 0 5px 5px 0;
}

.br-bottom {
  border-radius: 0 0 5px 5px;
}

.br-left {
  border-radius: 5px 0 0 5px;
}

.br-bottom-5 {
  border-radius: 0 0 50% 50%;
}

.br-top-5 {
  border-radius: 50% 50% 0 0;
}

.border {
  border: 1px solid #e3e1e4;
}

.border-top {
  border-top: 1px solid #e3e1e4;
}

.border-right {
  border-right: 1px solid #e3e1e4;
}

.border-bottom {
  border-bottom: 1px solid #e3e1e4;
}

.border-left {
  border-left: 1px solid #e3e1e4;
}

.block,
.block-fluid,
.block-xxl,
.block-xl,
.block-lg,
.block-md,
.block-sm {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .block-sm,
  .block {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .block-md,
  .block-sm,
  .block {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .block-lg,
  .block-md,
  .block-sm,
  .block {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .block-xl,
  .block-lg,
  .block-md,
  .block-sm,
  .block {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .block-xxl,
  .block-xl,
  .block-lg,
  .block-md,
  .block-sm,
  .block {
    max-width: 1320px;
  }
}
.m-1 {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.mx-1 {
  margin-left: 5px;
  margin-right: 5px;
}

.my-1 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.mt-1 {
  margin-top: 5px;
}

.mb-1 {
  margin-bottom: 5px;
}

.ml-1 {
  margin-left: 5px;
}

.mr-1 {
  margin-right: 5px;
}

.p-1 {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.px-1 {
  padding-left: 5px;
  padding-right: 5px;
}

.py-1 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pt-1 {
  padding-top: 5px;
}

.pb-1 {
  padding-bottom: 5px;
}

.pl-1 {
  padding-left: 5px;
}

.pr-1 {
  padding-right: 5px;
}

.g-1 {
  padding-top: 2.5px;
  padding-right: 2.5px;
  padding-bottom: 2.5px;
  padding-left: 2.5px;
}
.g-1 > * {
  padding-top: 2.5px;
  padding-right: 2.5px;
  padding-bottom: 2.5px;
  padding-left: 2.5px;
}

.gx-1 {
  padding-right: 2.5px;
  padding-left: 2.5px;
}
.gx-1 > * {
  padding-right: 2.5px;
  padding-left: 2.5px;
}

.gy-1 {
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}
.gy-1 > * {
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}

.m-2 {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.mx-2 {
  margin-left: 10px;
  margin-right: 10px;
}

.my-2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mt-2 {
  margin-top: 10px;
}

.mb-2 {
  margin-bottom: 10px;
}

.ml-2 {
  margin-left: 10px;
}

.mr-2 {
  margin-right: 10px;
}

.p-2 {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.px-2 {
  padding-left: 10px;
  padding-right: 10px;
}

.py-2 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pt-2 {
  padding-top: 10px;
}

.pb-2 {
  padding-bottom: 10px;
}

.pl-2 {
  padding-left: 10px;
}

.pr-2 {
  padding-right: 10px;
}

.g-2 {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
.g-2 > * {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.gx-2 {
  padding-right: 5px;
  padding-left: 5px;
}
.gx-2 > * {
  padding-right: 5px;
  padding-left: 5px;
}

.gy-2 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.gy-2 > * {
  padding-top: 5px;
  padding-bottom: 5px;
}

.m-3 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.mx-3 {
  margin-left: 15px;
  margin-right: 15px;
}

.my-3 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.mt-3 {
  margin-top: 15px;
}

.mb-3 {
  margin-bottom: 15px;
}

.ml-3 {
  margin-left: 15px;
}

.mr-3 {
  margin-right: 15px;
}

.p-3 {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.px-3 {
  padding-left: 15px;
  padding-right: 15px;
}

.py-3 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.pt-3 {
  padding-top: 15px;
}

.pb-3 {
  padding-bottom: 15px;
}

.pl-3 {
  padding-left: 15px;
}

.pr-3 {
  padding-right: 15px;
}

.g-3 {
  padding-top: 7.5px;
  padding-right: 7.5px;
  padding-bottom: 7.5px;
  padding-left: 7.5px;
}
.g-3 > * {
  padding-top: 7.5px;
  padding-right: 7.5px;
  padding-bottom: 7.5px;
  padding-left: 7.5px;
}

.gx-3 {
  padding-right: 7.5px;
  padding-left: 7.5px;
}
.gx-3 > * {
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.gy-3 {
  padding-top: 7.5px;
  padding-bottom: 7.5px;
}
.gy-3 > * {
  padding-top: 7.5px;
  padding-bottom: 7.5px;
}

.m-4 {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.mx-4 {
  margin-left: 20px;
  margin-right: 20px;
}

.my-4 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mt-4 {
  margin-top: 20px;
}

.mb-4 {
  margin-bottom: 20px;
}

.ml-4 {
  margin-left: 20px;
}

.mr-4 {
  margin-right: 20px;
}

.p-4 {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.px-4 {
  padding-left: 20px;
  padding-right: 20px;
}

.py-4 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pt-4 {
  padding-top: 20px;
}

.pb-4 {
  padding-bottom: 20px;
}

.pl-4 {
  padding-left: 20px;
}

.pr-4 {
  padding-right: 20px;
}

.g-4 {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
.g-4 > * {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.gx-4 {
  padding-right: 10px;
  padding-left: 10px;
}
.gx-4 > * {
  padding-right: 10px;
  padding-left: 10px;
}

.gy-4 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.gy-4 > * {
  padding-top: 10px;
  padding-bottom: 10px;
}

.m-5 {
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.mx-5 {
  margin-left: 25px;
  margin-right: 25px;
}

.my-5 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.mt-5 {
  margin-top: 25px;
}

.mb-5 {
  margin-bottom: 25px;
}

.ml-5 {
  margin-left: 25px;
}

.mr-5 {
  margin-right: 25px;
}

.p-5 {
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.px-5 {
  padding-left: 25px;
  padding-right: 25px;
}

.py-5 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.pt-5 {
  padding-top: 25px;
}

.pb-5 {
  padding-bottom: 25px;
}

.pl-5 {
  padding-left: 25px;
}

.pr-5 {
  padding-right: 25px;
}

.g-5 {
  padding-top: 12.5px;
  padding-right: 12.5px;
  padding-bottom: 12.5px;
  padding-left: 12.5px;
}
.g-5 > * {
  padding-top: 12.5px;
  padding-right: 12.5px;
  padding-bottom: 12.5px;
  padding-left: 12.5px;
}

.gx-5 {
  padding-right: 12.5px;
  padding-left: 12.5px;
}
.gx-5 > * {
  padding-right: 12.5px;
  padding-left: 12.5px;
}

.gy-5 {
  padding-top: 12.5px;
  padding-bottom: 12.5px;
}
.gy-5 > * {
  padding-top: 12.5px;
  padding-bottom: 12.5px;
}

.m-6 {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.mx-6 {
  margin-left: 30px;
  margin-right: 30px;
}

.my-6 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mt-6 {
  margin-top: 30px;
}

.mb-6 {
  margin-bottom: 30px;
}

.ml-6 {
  margin-left: 30px;
}

.mr-6 {
  margin-right: 30px;
}

.p-6 {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.px-6 {
  padding-left: 30px;
  padding-right: 30px;
}

.py-6 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.pt-6 {
  padding-top: 30px;
}

.pb-6 {
  padding-bottom: 30px;
}

.pl-6 {
  padding-left: 30px;
}

.pr-6 {
  padding-right: 30px;
}

.g-6 {
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}
.g-6 > * {
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}

.gx-6 {
  padding-right: 15px;
  padding-left: 15px;
}
.gx-6 > * {
  padding-right: 15px;
  padding-left: 15px;
}

.gy-6 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.gy-6 > * {
  padding-top: 15px;
  padding-bottom: 15px;
}

.m-7 {
  margin-left: 35px;
  margin-right: 35px;
  margin-top: 35px;
  margin-bottom: 35px;
}

.mx-7 {
  margin-left: 35px;
  margin-right: 35px;
}

.my-7 {
  margin-top: 35px;
  margin-bottom: 35px;
}

.mt-7 {
  margin-top: 35px;
}

.mb-7 {
  margin-bottom: 35px;
}

.ml-7 {
  margin-left: 35px;
}

.mr-7 {
  margin-right: 35px;
}

.p-7 {
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 35px;
  padding-bottom: 35px;
}

.px-7 {
  padding-left: 35px;
  padding-right: 35px;
}

.py-7 {
  padding-top: 35px;
  padding-bottom: 35px;
}

.pt-7 {
  padding-top: 35px;
}

.pb-7 {
  padding-bottom: 35px;
}

.pl-7 {
  padding-left: 35px;
}

.pr-7 {
  padding-right: 35px;
}

.g-7 {
  padding-top: 17.5px;
  padding-right: 17.5px;
  padding-bottom: 17.5px;
  padding-left: 17.5px;
}
.g-7 > * {
  padding-top: 17.5px;
  padding-right: 17.5px;
  padding-bottom: 17.5px;
  padding-left: 17.5px;
}

.gx-7 {
  padding-right: 17.5px;
  padding-left: 17.5px;
}
.gx-7 > * {
  padding-right: 17.5px;
  padding-left: 17.5px;
}

.gy-7 {
  padding-top: 17.5px;
  padding-bottom: 17.5px;
}
.gy-7 > * {
  padding-top: 17.5px;
  padding-bottom: 17.5px;
}

.m-8 {
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.mx-8 {
  margin-left: 40px;
  margin-right: 40px;
}

.my-8 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mt-8 {
  margin-top: 40px;
}

.mb-8 {
  margin-bottom: 40px;
}

.ml-8 {
  margin-left: 40px;
}

.mr-8 {
  margin-right: 40px;
}

.p-8 {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.px-8 {
  padding-left: 40px;
  padding-right: 40px;
}

.py-8 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pt-8 {
  padding-top: 40px;
}

.pb-8 {
  padding-bottom: 40px;
}

.pl-8 {
  padding-left: 40px;
}

.pr-8 {
  padding-right: 40px;
}

.g-8 {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}
.g-8 > * {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.gx-8 {
  padding-right: 20px;
  padding-left: 20px;
}
.gx-8 > * {
  padding-right: 20px;
  padding-left: 20px;
}

.gy-8 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.gy-8 > * {
  padding-top: 20px;
  padding-bottom: 20px;
}

.m-9 {
  margin-left: 45px;
  margin-right: 45px;
  margin-top: 45px;
  margin-bottom: 45px;
}

.mx-9 {
  margin-left: 45px;
  margin-right: 45px;
}

.my-9 {
  margin-top: 45px;
  margin-bottom: 45px;
}

.mt-9 {
  margin-top: 45px;
}

.mb-9 {
  margin-bottom: 45px;
}

.ml-9 {
  margin-left: 45px;
}

.mr-9 {
  margin-right: 45px;
}

.p-9 {
  padding-left: 45px;
  padding-right: 45px;
  padding-top: 45px;
  padding-bottom: 45px;
}

.px-9 {
  padding-left: 45px;
  padding-right: 45px;
}

.py-9 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.pt-9 {
  padding-top: 45px;
}

.pb-9 {
  padding-bottom: 45px;
}

.pl-9 {
  padding-left: 45px;
}

.pr-9 {
  padding-right: 45px;
}

.g-9 {
  padding-top: 22.5px;
  padding-right: 22.5px;
  padding-bottom: 22.5px;
  padding-left: 22.5px;
}
.g-9 > * {
  padding-top: 22.5px;
  padding-right: 22.5px;
  padding-bottom: 22.5px;
  padding-left: 22.5px;
}

.gx-9 {
  padding-right: 22.5px;
  padding-left: 22.5px;
}
.gx-9 > * {
  padding-right: 22.5px;
  padding-left: 22.5px;
}

.gy-9 {
  padding-top: 22.5px;
  padding-bottom: 22.5px;
}
.gy-9 > * {
  padding-top: 22.5px;
  padding-bottom: 22.5px;
}

.m-10 {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.mx-10 {
  margin-left: 50px;
  margin-right: 50px;
}

.my-10 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.mt-10 {
  margin-top: 50px;
}

.mb-10 {
  margin-bottom: 50px;
}

.ml-10 {
  margin-left: 50px;
}

.mr-10 {
  margin-right: 50px;
}

.p-10 {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.px-10 {
  padding-left: 50px;
  padding-right: 50px;
}

.py-10 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.pt-10 {
  padding-top: 50px;
}

.pb-10 {
  padding-bottom: 50px;
}

.pl-10 {
  padding-left: 50px;
}

.pr-10 {
  padding-right: 50px;
}

.g-10 {
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
}
.g-10 > * {
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
}

.gx-10 {
  padding-right: 25px;
  padding-left: 25px;
}
.gx-10 > * {
  padding-right: 25px;
  padding-left: 25px;
}

.gy-10 {
  padding-top: 25px;
  padding-bottom: 25px;
}
.gy-10 > * {
  padding-top: 25px;
  padding-bottom: 25px;
}

.ts-1 {
  text-shadow: 0 0 2.5px rgba(0, 0, 0, 0.5);
}

.bs-1 {
  box-shadow: 0 0 2.5px rgba(0, 0, 0, 0.5);
}

.ts-2 {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.bs-2 {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.ts-3 {
  text-shadow: 0 0 7.5px rgba(0, 0, 0, 0.5);
}

.bs-3 {
  box-shadow: 0 0 7.5px rgba(0, 0, 0, 0.5);
}

.ts-4 {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.bs-4 {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.ts-5 {
  text-shadow: 0 0 12.5px rgba(0, 0, 0, 0.5);
}

.bs-5 {
  box-shadow: 0 0 12.5px rgba(0, 0, 0, 0.5);
}

.btn-default {
  background-color: #7d01f8;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(109.6385542169, 0.8771084337, 217.5228915663);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-default:hover {
  background-color: rgb(140.2626506024, 25.5253012048, 254.0746987952);
}

.btn-gradient-default {
  background: linear-gradient(45deg, rgb(109.6385542169, 0.8771084337, 217.5228915663), rgb(155.5012048193, 56.0024096386, 254.1975903614));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(109.6385542169, 0.8771084337, 217.5228915663);
  cursor: pointer;
}
.btn-gradient-default:hover {
  background: linear-gradient(45deg, rgb(84.0361445783, 0.6722891566, 166.7277108434), rgb(109.6385542169, 0.8771084337, 217.5228915663));
}

.btn-success {
  background-color: #04be02;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(3.3625, 159.71875, 1.68125);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-success:hover {
  background-color: rgb(4.6375, 220.28125, 2.31875);
}

.btn-gradient-success {
  background: linear-gradient(45deg, rgb(3.3625, 159.71875, 1.68125), rgb(5.275, 250.5625, 2.6375));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(3.3625, 159.71875, 1.68125);
  cursor: pointer;
}
.btn-gradient-success:hover {
  background: linear-gradient(45deg, rgb(2.3, 109.25, 1.15), rgb(3.3625, 159.71875, 1.68125));
}

.btn-warning {
  background-color: #ffcc00;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(224.4, 179.52, 0);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-warning:hover {
  background-color: rgb(255, 210.12, 30.6);
}

.btn-gradient-warning {
  background: linear-gradient(45deg, rgb(224.4, 179.52, 0), rgb(255, 216.24, 61.2));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(224.4, 179.52, 0);
  cursor: pointer;
}
.btn-gradient-warning:hover {
  background: linear-gradient(45deg, rgb(173.4, 138.72, 0), rgb(224.4, 179.52, 0));
}

.btn-info {
  background-color: #4073ff;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(33.4, 92.5706806283, 255);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-info:hover {
  background-color: rgb(94.6, 137.4293193717, 255);
}

.btn-gradient-info {
  background: linear-gradient(45deg, rgb(33.4, 92.5706806283, 255), rgb(125.2, 159.8586387435, 255));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(33.4, 92.5706806283, 255);
  cursor: pointer;
}
.btn-gradient-info:hover {
  background: linear-gradient(45deg, rgb(0, 63.3895287958, 237.4), rgb(33.4, 92.5706806283, 255));
}

.btn-danger {
  background-color: #ff3300;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(224.4, 44.88, 0);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-danger:hover {
  background-color: rgb(255, 75.48, 30.6);
}

.btn-gradient-danger {
  background: linear-gradient(45deg, rgb(224.4, 44.88, 0), rgb(255, 99.96, 61.2));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(224.4, 44.88, 0);
  cursor: pointer;
}
.btn-gradient-danger:hover {
  background: linear-gradient(45deg, rgb(173.4, 34.68, 0), rgb(224.4, 44.88, 0));
}

.btn-dark {
  background-color: #302e32;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(32.7, 31.3375, 34.0625);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-dark:hover {
  background-color: rgb(63.3, 60.6625, 65.9375);
}

.btn-gradient-dark {
  background: linear-gradient(45deg, rgb(32.7, 31.3375, 34.0625), rgb(78.6, 75.325, 81.875));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(32.7, 31.3375, 34.0625);
  cursor: pointer;
}
.btn-gradient-dark:hover {
  background: linear-gradient(45deg, rgb(7.2, 6.9, 7.5), rgb(32.7, 31.3375, 34.0625));
}

.btn-gray {
  background-color: #b0acb3;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(160.7962264151, 156.0264150943, 164.3735849057);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-gray:hover {
  background-color: rgb(191.2037735849, 187.9735849057, 193.6264150943);
}

.btn-gradient-gray {
  background: linear-gradient(45deg, rgb(160.7962264151, 156.0264150943, 164.3735849057), rgb(206.4075471698, 203.9471698113, 208.2528301887));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #ffffff;
  border: 1px solid rgb(160.7962264151, 156.0264150943, 164.3735849057);
  cursor: pointer;
}
.btn-gradient-gray:hover {
  background: linear-gradient(45deg, rgb(135.4566037736, 129.4037735849, 139.9962264151), rgb(160.7962264151, 156.0264150943, 164.3735849057));
}

.btn-bright {
  background-color: #e3e1e4;
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #000;
  border: 1px solid rgb(211.9684210526, 208.8947368421, 213.5052631579);
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-bright:hover {
  background-color: rgb(242.0315789474, 241.1052631579, 242.4947368421);
}

.btn-gradient-bright {
  background: linear-gradient(45deg, rgb(211.9684210526, 208.8947368421, 213.5052631579), hsl(280, 5.2631578947%, 100.8235294118%));
  border-radius: 5px;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
  color: #000;
  border: 1px solid rgb(211.9684210526, 208.8947368421, 213.5052631579);
  cursor: pointer;
}
.btn-gradient-bright:hover {
  background: linear-gradient(45deg, rgb(242.0315789474, 241.1052631579, 242.4947368421), hsl(280, 5.2631578947%, 106.8235294118%));
}

table {
  border-collapse: separate;
  caption-side: bottom;
  border-spacing: 0;
}

.table {
  --table-th-bgcolor: #f4f3f4;
  width: 100%;
  background-color: var(--color-white);
  vertical-align: top;
  text-align: left;
}
.table tr {
  border-style: solid;
  border-width: 0;
}
.table tr th,
.table tr td {
  padding: var(--unit);
  border-style: solid;
  border-width: 0;
  border-bottom: 1px solid var(--color-bright);
}
.table tr th {
  background-color: var(--table-th-bgcolor);
}

.div-table {
  --table-th-bgcolor: #f4f3f4;
  width: 100%;
  background-color: var(--color-white);
}
.div-table .dt-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-bright);
}
.div-table .dt-row .dt-col {
  flex-wrap: nowrap;
  flex: 1 0 0;
  padding: 7.5px;
}
.div-table .dth {
  font-weight: bold;
  background-color: var(--table-th-bgcolor);
}

.tc {
  text-align: center;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.fw-b {
  font-weight: bold;
}

.fw-n {
  font-weight: normal;
}

.fw-l {
  font-weight: lighter;
}

.fw-1 {
  font-weight: 100;
}

.fw-2 {
  font-weight: 200;
}

.fw-3 {
  font-weight: 300;
}

.fw-4 {
  font-weight: 400;
}

.fw-5 {
  font-weight: 500;
}

.fw-6 {
  font-weight: 600;
}

.fw-7 {
  font-weight: 700;
}

.fw-8 {
  font-weight: 800;
}

.fw-9 {
  font-weight: 900;
}

.cursor-pointer {
  cursor: pointer;
}

.user-select-none {
  user-select: none;
}

:root {
  --color-black: #000;
  --color-success: #04be02;
  --color-danger: #ff3300;
  --color-info: #4073ff;
  --color-warning: #ffcc00;
  --color-blue: #4073ff;
  --color-default: #7d01f8;
  --color-green: #04be02;
  --color-marrs: #008080;
  --color-orange: #ff6600;
  --color-pink: #d63384;
  --color-red: #ff3300;
  --color-white: #ffffff;
  --color-yellow: #ffcc00;
  --color-dark: #302e32;
  --color-gray: #b0acb3;
  --color-bright: #e3e1e4;
  --unit: 5px;
}/*# sourceMappingURL=block.css.map */