.tui-btn-primary {
  background: #1582ad !important;
  color: #fff;
}

.tui-shadow-primary {
  box-shadow: 0 .357143rem /* 10/28 */ .5rem /* 14/28 */ 0 rgba(15, 96, 128, 0.14);
}

.tui-btn-danger {
  background: #eb0909 !important;
  color: #fff;
}

.tui-shadow-danger {
  box-shadow: 0 .357143rem /* 10/28 */ .5rem /* 14/28 */ 0 rgba(235, 9, 9, 0.2);
}

.tui-btn-warning {
  background: #fc872d !important;
  color: #fff;
}

.tui-shadow-warning {
  box-shadow: 0 .357143rem /* 10/28 */ .5rem /* 14/28 */ 0 rgba(252, 135, 45, 0.2);
}

.tui-btn-green {
  background: #35b06a !important;
  color: #fff;
}

.tui-shadow-green {
  box-shadow: 0 .357143rem /* 10/28 */ .5rem /* 14/28 */ 0 rgba(53, 176, 106, 0.2);
}

.tui-btn-blue {
  background: #5677fc !important;
  color: #fff;
}

.tui-shadow-blue {
  box-shadow: 0 .357143rem /* 10/28 */ .5rem /* 14/28 */ 0 rgba(86, 119, 252, 0.2);
}

.tui-btn-white {
  background: #fff !important;
  color: #333 !important;
}

.tui-btn-gray {
  background: #bfbfbf !important;
  color: #fff !important;
}

.tui-btn-black {
  background: #333 !important;
  color: #fff !important;
}

.tui-btn-gradual-base {
  background-image: var(--gradualBase) !important;
  color: #fff !important;
}

.tui-btn-gradual-red {
  background-image: var(--gradualRed) !important;
  color: #fff !important;
}


.tui-shadow-gray {
  box-shadow: 0 .357143rem /* 10/28 */ .5rem /* 14/28 */ 0 rgba(191, 191, 191, 0.2);
}

.tui-hover-gray {
  background: #f7f7f9 !important;
}

/* button start*/

.tui-btn {
  width: 100%;
  position: relative;
  border: 0 !important;
  border-radius: 6px;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.tui-btn::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: 12px;
  border: 0;
}

.tui-btn-white::after {
  border: 1px solid #bfbfbf;
}

.tui-white-hover {
  background: #e5e5e5 !important;
  color: #2e2e2e !important;
}

.tui-dark-disabled {
  opacity: 0.6 !important;
  color: #fafbfc !important;
}

.tui-dark-disabled.tui-btn-danger {
  opacity: 1 !important;
  background: #fc8888 !important;
}

.tui-outline-hover {
  opacity: 0.5;
}

.tui-primary-hover {
  background: #126f93 !important;
  color: #e5e5e5 !important;
}

.tui-primary-outline::after {
  border: 1px solid #1582ad !important;
}

.tui-primary-outline {
  color: #1582ad !important;
  background: none;
}

.tui-danger-hover {
  background: #c80808 !important;
  color: #e5e5e5 !important;
}

.tui-danger-outline {
  color: #eb0909 !important;
  background: none;
}

.tui-danger-outline::after {
  border: 1px solid #eb0909 !important;
}

.tui-warning-hover {
  background: #d67326 !important;
  color: #e5e5e5 !important;
}

.tui-warning-outline {
  color: #fc872d !important;
  background: none;
}

.tui-warning-outline::after {
  border: 1px solid #fc872d !important;
}

.tui-green-hover {
  background: #2d965a !important;
  color: #e5e5e5 !important;
}

.tui-green-outline {
  color: #35b06a !important;
  background: none;
}

.tui-green-outline::after {
  border: 1px solid #35b06a !important;
}

.tui-blue-hover {
  background: #4a67d6 !important;
  color: #e5e5e5 !important;
}

.tui-blue-outline {
  color: #5677fc !important;
  background: none;
}

.tui-blue-outline::after {
  border: 1px solid #5677fc !important;
}

.tui-gray-hover {
  background: #a3a3a3 !important;
  color: #898989;
}

.tui-gray-outline {
  color: #999 !important;
  background: none !important;
}

.tui-white-outline {
  color: #fff !important;
  background: none !important;
}

.tui-black-outline {
  background: none !important;
  color: #333 !important;
}

.tui-gray-outline::after {
  border: 1px solid #ccc !important;
}

.tui-white-outline::after {
  border: 1px solid #fff !important;
}

.tui-black-outline::after {
  border: 1px solid #333 !important;
}

/*圆角 */

.tui-fillet {
  border-radius: 1.785714rem /* 50/28 */;
}

.tui-btn-white.tui-fillet::after {
  border-radius: 3.5rem /* 98/28 */;
}

.tui-outline-fillet::after {
  border-radius: 3.5rem /* 98/28 */;
}

/*平角*/

.tui-rightAngle {
  border-radius: 0;
}

.tui-btn-white.tui-rightAngle::after {
  border-radius: 0;
}

.tui-outline-rightAngle::after {
  border-radius: 0;
}