.vp-wrap {
  margin    : 120px auto 40px;
  word-break: break-word;
}

.vp-wrap p {
  margin: 0;
}

.vp-wrap button {
  border: none !important;
}

.vp-wrap button :disabled {
  background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
  color           : light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
  border-color    : light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
}

.vp-wrap button :disabled {
  background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
  color           : light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
  border-color    : light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
}


.vp-wrap input[type="text"] :focus {
  outline         : none;
  box-shadow      : none;
  border          : 1px solid #ccc;
  background-color: white;
}

.vp-wrap input[type="number"]::-webkit-inner-spin-button,
input[type="number"] ::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin            : 0;
}

.vp-wrap input[type="number"] {
  -moz-appearance: textfield;
}

.vp-wrap input,
textarea,
select {
  border          : none !important;
  outline         : none !important;
  background-color: transparent !important;
  appearance      : none;
  box-shadow      : none !important;
  margin          : 0;
}

.form-check input {
  cursor: pointer;
  border: 1px solid #ccc !important;
}

.form-check input:checked {
  background-color: #D01818 !important;
  border-color    : #D01818 !important;
}

.content {
  background-color: #fff;
  overflow        : auto;
}



.con-title {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin         : 58px 0 22px;
}

.con-title h3 {
  font-size: 20px;
  color    : #000000;
}

.con-title button {
  padding                    : 0 12px;
  font-size                  : 14px;
  background-color           : #D01818;
  color                      : #fff;
  /* width                   : 88px; */
  height                     : 32px;
  line-height                : 32px;
  border-radius              : 8px;
  border                     : none;
}

.con-item {
  display    : flex;
  align-items: center;
  font-size  : 14px;
  color      : #000;
  padding    : 24px;
  box-sizing : border-box;
}

.con-item > p {
  padding: 0 10px;
  box-sizing: border-box;
}

.con-item:nth-child(odd) {
  /* 奇数项样式 */
  background-color: #F7F8FA;
  /* 示例背景色 */
}

.offcanvas {
  width: 35% !important;
}

.offcanvas-header {
  border-bottom: 1px solid #e5e5e5;
}

.offcanvas-body {
  padding: 20px 30px !important;
}

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


.form-select option:checked {
  color: #000 !important
}


.offcanvas-body-list ._list-title {
  font-size   : 18px;
  color       : #000;
  line-height : 18px;
  position    : relative;
  padding-left: 10px;
}

._list-title::after {
  content         : "";
  /* 伪元素的内容为空 */
  position        : absolute;
  /* 绝对定位 */
  left            : 0;
  /* 左侧对齐 */
  top             : 50%;
  /* 垂直居中 */
  transform       : translateY(-50%);
  /* 使竖线垂直居中 */
  width           : 4px;
  /* 竖线宽度 */
  height          : 100%;
  /* 竖线高度，可以根据需要调整 */
  background-color: black;
  /* 竖线颜色 */
}

._list-items {
  display       : flex;
  flex-direction: column;
  padding       : 0 4%;
  box-sizing    : border-box;
  font-size     : 14px;
}

._list-items input {
  border-bottom: 1px solid #e5e5e5 !important;
}

._list-items>label {
  font-size  : 14px;
  font-weight: 600;
  color      : #000000;
}

/* ._list-items div {
  border-bottom: 1px solid #e5e5e5;
} */

.check div {
  border-bottom: none;
}

._list-items input::placeholder {
  color    : #AAAAB3;
  font-size: 14px;
}

._list-items textarea::placeholder {
  color    : #AAAAB3;
  font-size: 14px;
}


._list-items-check {
  display    : flex;
  align-items: center;
}

.form-check-label {
  font-size: 14px;
  color    : #555555;
}

._list-items-remark {
  border       : 1px solid #e5e5e5;
  border-radius: 5px;
}

.form-select,
.form-control {
  font-size       : 14px;
  /* color        : #AAAAB3; */
  border-bottom   : 1px solid #e5e5e5 !important;
  border-radius   : 0;
}

.form-check {
  display    : flex;
  align-items: center;
}

.form-check label {
  margin-left: 4px;
}

.offcanvas-footer {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 20px 20px 10px;
  border-top : 1px solid #e5e5e5;
}

.offcanvas-footer button {
  flex         : 1;
  font-size    : 14px;
  height       : 38px;
  line-height  : 38px;
  color        : #555;
  background   : #FFFFFF;
  border-radius: 8px;
  border       : 1px solid #D2D2D9 !important;
}

.offcanvas-footer button:last-child {
  background: #D01818;
  color     : #fff;
}

.modal-wrap {
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
}

.modal-body-icon {
  width        : 64px;
  height       : 64px;
  border-radius: 50%;
}

.modal-body-text {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  font-size      : 20px;
  color          : #000;
}

.modal-body-text span {
  font-size: 14px;
  color    : #757580;
}

.modal-footer {
  display   : flex;
  gap       : 10px;
  padding   : 2% 10% 4%;
  box-sizing: border-box;
}

.modal-footer a {
  flex         : 1;
  font-size    : 14px;
  height       : 38px;
  line-height  : 38px;
  text-align   : center;
  border-radius: 8px;
  border       : 1px solid #D2D2D9;
  color        : #555;
}

.modal-footer a:last-child {
  background: #D01818;
  color     : #fff;
}


._itmes-a {
  width: 12%;
}

._itmes-b {
  width: 25%;
}

._itmes-c {
  width: 20%;
}

._itmes-f {
  flex: 1;
}

.red {
  color: #d01818 !important;
}