@charset "UTF-8";
.zk-button,
.zk-button-group {
  display: inline-block
}

.zk-button {
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #C0CCDA;
  color: #1F2D3D;
  appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  user-select: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: $border-radius-base;
}

.zk-button+.zk-button {
  margin-left: 10px
}

.zk-button:hover {
  color: $color-primary;
  border-color: $color-primary
}

.zk-button:active {
  color: $color-active;
  border-color: $color-active;
  outline: 0
}

.zk-button::-moz-focus-inner {
  border: 0
}

.zk-button [class*=zk-icon-]+span {
  margin-left: 5px
}

.zk-button.is-loading {
  position: relative;
  pointer-events: none
}

.zk-button.is-loading:before {
  pointer-events: none;
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, .35)
}

.zk-button.is-disabled,
.zk-button.is-disabled:hover {
  color: #C0CCDA;
  cursor: not-allowed;
  background-image: none;
  background-color: #EFF2F7;
  border-color: #D3DCE6
}

.zk-button.is-disabled.zk-button--text {
  background-color: transparent
}

.zk-button.is-disabled.is-plain,
.zk-button.is-disabled.is-plain:hover {
  background-color: #fff;
  border-color: #d3dce6;
  color: #C0CCDA
}

.zk-button.is-active {
  color: $color-active;
  border-color: $color-active
}

.zk-button.is-plain:hover {
  background: #fff;
  border-color: $color-primary;
  color: $color-primary
}

.zk-button.is-plain:active {
  background: #fff;
  border-color: $color-active;
  color: $color-active;
  outline: 0
}

.zk-button--primary {
  color: #fff;
  background-color: $color-primary;
  border-color: $color-primary
}

.zk-button--primary:hover {
  background: $color-hover;
  border-color: $color-hover;
  color: #fff
}

.zk-button--primary.is-active,
.zk-button--primary:active {
  background: $color-active;
  border-color: $color-active;
  color: #fff
}

.zk-button--primary:active {
  outline: 0
}

.zk-button--primary.is-plain {
  background: #fff;
  border: 1px solid #C0CCDA;
  color: #1F2D3D
}

.zk-button--primary.is-plain:hover {
  background: #fff;
  border-color: $color-primary;
  color: $color-primary
}

.zk-button--primary.is-plain:active {
  background: #fff;
  border-color: $color-active;
  color: $color-active;
  outline: 0
}

.zk-button--success {
  color: #fff;
  background-color: #13ce66;
  border-color: #13ce66
}

.zk-button--success:hover {
  background: #42d885;
  border-color: #42d885;
  color: #fff
}

.zk-button--success.is-active,
.zk-button--success:active {
  background: #11b95c;
  border-color: #11b95c;
  color: #fff
}

.zk-button--success:active {
  outline: 0
}

.zk-button--success.is-plain {
  background: #fff;
  border: 1px solid #C0CCDA;
  color: #1F2D3D
}

.zk-button--success.is-plain:hover {
  background: #fff;
  border-color: #13ce66;
  color: #13ce66
}

.zk-button--success.is-plain:active {
  background: #fff;
  border-color: #11b95c;
  color: #11b95c;
  outline: 0
}

.zk-button--warning {
  color: #fff;
  background-color: $color-warning;
  border-color: $color-warning
}

.zk-button--warning:hover {
  background: #f9c855;
  border-color: #f9c855;
  color: #fff
}

.zk-button--warning.is-active,
.zk-button--warning:active {
  background: #dea726;
  border-color: #dea726;
  color: #fff
}

.zk-button--warning:active {
  outline: 0
}

.zk-button--warning.is-plain {
  background: #fff;
  border: 1px solid #C0CCDA;
  color: #1F2D3D
}

.zk-button--warning.is-plain:hover {
  background: #fff;
  border-color: $color-warning;
  color: $color-warning
}

.zk-button--warning.is-plain:active {
  background: #fff;
  border-color: #dea726;
  color: #dea726;
  outline: 0
}

.zk-button--danger {
  color: #fff;
  background-color: #ff4949;
  border-color: #ff4949
}

.zk-button--danger:hover {
  background: #ff6d6d;
  border-color: #ff6d6d;
  color: #fff
}

.zk-button--danger.is-active,
.zk-button--danger:active {
  background: #e64242;
  border-color: #e64242;
  color: #fff
}

.zk-button--danger:active {
  outline: 0
}

.zk-button--danger.is-plain {
  background: #fff;
  border: 1px solid #C0CCDA;
  color: #1F2D3D
}

.zk-button--danger.is-plain:hover {
  background: #fff;
  border-color: #ff4949;
  color: #ff4949
}

.zk-button--danger.is-plain:active {
  background: #fff;
  border-color: #e64242;
  color: #e64242;
  outline: 0
}

.zk-button--info {
  color: #fff;
  background-color: $color-primary;
  border-color: $color-primary
}

.zk-button--info:hover {
  background: #73ccff;
  border-color: #73ccff;
  color: #fff
}

.zk-button--info.is-active,
.zk-button--info:active {
  background: #48ace6;
  border-color: #48ace6;
  color: #fff
}

.zk-button--info:active {
  outline: 0
}

.zk-button--info.is-plain {
  background: #fff;
  border: 1px solid #C0CCDA;
  color: #1F2D3D
}

.zk-button--info.is-plain:hover {
  background: #fff;
  border-color: $color-primary;
  color: $color-primary
}

.zk-button--info.is-plain:active {
  background: #fff;
  border-color: #48ace6;
  color: #48ace6;
  outline: 0
}

.zk-button--large {
  padding: 11px 19px;
  font-size: 16px;
  border-radius: $border-radius-base;
}

.zk-button--small {
  padding: 7px 9px;
  font-size: 12px;
  border-radius: $border-radius-base;
}

.zk-button--mini {
  padding: 4px;
  font-size: 12px;
  border-radius: $border-radius-base;
}

.zk-button--text {
  border: none;
  color: $color-primary;
  background: 0 0;
  padding-left: 0;
  padding-right: 0
}

.zk-button--text:hover {
  color: $color-hover
}

.zk-button--text:active {
  color: $color-active
}

.zk-button-group:after,
.zk-button-group:before {
  display: table;
  content: ""
}

.zk-button-group:after {
  clear: both
}

.zk-button-group .zk-button--primary:first-child {
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--primary:last-child {
  border-left-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--primary:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, .5);
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--success:first-child {
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--success:last-child {
  border-left-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--success:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, .5);
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--warning:first-child {
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--warning:last-child {
  border-left-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--warning:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, .5);
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--danger:first-child {
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--danger:last-child {
  border-left-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--danger:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, .5);
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--info:first-child {
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--info:last-child {
  border-left-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button--info:not(:first-child):not(:last-child) {
  border-left-color: rgba(255, 255, 255, .5);
  border-right-color: rgba(255, 255, 255, .5)
}

.zk-button-group .zk-button {
  float: left;
  position: relative
}

.zk-button-group .zk-button+.zk-button {
  margin-left: 0
}

.zk-button-group .zk-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}

.zk-button-group .zk-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
}

.zk-button-group .zk-button:not(:first-child):not(:last-child) {
  border-radius: 0
}

.zk-button-group .zk-button:not(:last-child) {
  margin-right: -1px
}

.zk-button-group .zk-button.is-active,
.zk-button-group .zk-button:active,
.zk-button-group .zk-button:hover {
  z-index: 1
}