/**
 * `.wadizicon`, `i.wz-` 이름은 앞으로 사용할 수 없습니다.
 * TODO: 2018년 12월 삭제 예정
 **/
i.wadizicon,
i.icon::before,
[class*='icon-']::before {
  display: inline-block;
  margin-top: -0.2em;
  vertical-align: middle;
  text-transform: none;
  line-height: 1;
  font-family: 'wadizicon' !important;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  speak: none; }


i.wadizicon.wa-camera::before,
i.icon.camera::before,
.icon-camera::before {
  content: "\E925"; }

i.wadizicon.wa-chevron-left::before,
i.icon.chevron-left::before,
.icon-chevron-left::before {
  content: '';
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-image: url(../svg/chevron-left.svg);
  background-repeat: no-repeat ;
}

i.wadizicon.wa-chevron-right::before,
i.icon.chevron-right::before,
.icon-chevron-right::before {
  content: '';
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-image: url(../svg/chevron-right.svg);
  background-repeat: no-repeat ;
}

/* 투자 */
i.wadizicon.wa-expand-more::before,
i.icon.expand-more::before,
.icon-expand-more::before {
  content: "\E94E";
}
i.wadizicon.wa-home-o::before,
i.icon.home-o::before,
.icon-home-o::before {
  content: "\E96F";
}
i.wadizicon.wa-info::before,
i.icon.info::before,
.icon-info::before {
  content: "\E976";
}
i.wadizicon.wa-notifications-o::before,
i.icon.notifications-o::before,
.icon-notifications-o::before {
  content: "\E999"; }
.icon-search:before {
  content: "\e9b5";
}
.icon-radio-button-unchecked:before {
  content: "\E9A6";
}

.wz.color.bg.primary3 {
  background-color: #00c4c4;
}
.wz.color.primary4 {
  color: #00b2b2;
}
.wz.color.bg.primary4 {
  background-color: #00b2b2;
}


.wz.color.warm-gray900 {
  color: rgba(0, 0, 0, 0.54);
}
.wz.color.bg.warm-gray900 {
  background-color: rgba(0, 0, 0, 0.54);
}


/* stylelint-disable no-duplicate-selectors */
.wz.loader,
.wz.input.loading {
  line-height: 24px;
  color: #60656a;
  font-size: 15px;
}
.wz.loader::before,
.wz.input.loading::before {
  display: block;
  margin: 0 auto;
  background: url("./loader.svg") 0 0 no-repeat;
  width: 32px;
  height: 32px;
  content: "";
}

.white.wz.input.loading {
  color: #fff;
}

.white.wz.input.loading::before {
  background-image: url("./loader-white.svg");
}

.small.wz.input.loading {
  line-height: 18px;
  font-size: 12px;
}

.small.wz.input.loading::before {
  width: 18px;
  height: 18px;
}

.small.text.wz.input.loading::before {
  margin-bottom: 4px;
}

.small.horizon-text.wz.input.loading::before {
  margin-right: 4px;
}

.dense.wz.input.loading {
  line-height: 20px;
  font-size: 13px;
}

.dense.wz.input.loading::before {
  width: 24px;
  height: 24px;
}

.dense.text.wz.input.loading::before {
  margin-bottom: 6px;
}

.dense.horizon-text.wz.input.loading::before {
  margin-right: 6px;
}
.wz.loader.large,
.large.wz.input.loading {
  line-height: 28px;
  font-size: 17px;
}
.wz.loader.large::before,
.large.wz.input.loading::before {
  width: 48px;
  height: 48px;
}

.large.text.wz.input.loading::before {
  margin-bottom: 12px;
}

.large.horizon-text.wz.input.loading::before {
  margin-right: 12px;
}

.msie9 .wz.input.loading::before,
.msie9 .white.wz.input.loading::before,
.msie10 .wz.input.loading::before,
.msie10 .white.wz.input.loading::before {
  background-image: url(src/img/loader_polyfill.gif);
  background-size: 32px;
}


.msie9 .large.wz.input.loading::before,
.msie10 .large.wz.input.loading::before {
  background-size: 48px;
}

.wz.container {
  position: relative;
  padding: 40px 16px;
  box-sizing: border-box;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.84);
  font-size: 15px;
  font-weight: 400;
}
.wz.container .wz.text.display2,
.wz.container .wz.text.subtext1 {
  color: rgba(0, 0, 0, 0.84);
}
.wz.container .wz.text.display2 {
  margin-bottom: 12px;
}

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

h1.wz.text,
h2.wz.text,
h3.wz.text,
h4.wz.text,
h5.wz.text,
h6.wz.text,
p.wz.text,
span.wz.text,
em.wz.text,
label.wz.text {
  word-break: keep-all;
}
h1.wz.text.display4,
h2.wz.text.display4,
h3.wz.text.display4,
h4.wz.text.display4,
h5.wz.text.display4,
h6.wz.text.display4,
p.wz.text.display4,
span.wz.text.display4,
em.wz.text.display4,
label.wz.text.display4 {
  line-height: 40px;
  font-size: 32px;
  font-weight: 700;
}
@media screen and (min-width: 1096px) {
  h1.wz.text.display4,
  h2.wz.text.display4,
  h3.wz.text.display4,
  h4.wz.text.display4,
  h5.wz.text.display4,
  h6.wz.text.display4,
  p.wz.text.display4,
  span.wz.text.display4,
  em.wz.text.display4,
  label.wz.text.display4 {
    line-height: 56px;
    font-size: 48px;
  }
}
@media screen and (min-width: 1441px) {
  h1.wz.text.display4,
  h2.wz.text.display4,
  h3.wz.text.display4,
  h4.wz.text.display4,
  h5.wz.text.display4,
  h6.wz.text.display4,
  p.wz.text.display4,
  span.wz.text.display4,
  em.wz.text.display4,
  label.wz.text.display4 {
    line-height: 72px;
    font-size: 60px;
  }
}
h1.wz.text.display3,
h2.wz.text.display3,
h3.wz.text.display3,
h4.wz.text.display3,
h5.wz.text.display3,
h6.wz.text.display3,
p.wz.text.display3,
span.wz.text.display3,
em.wz.text.display3,
label.wz.text.display3 {
  line-height: 40px;
  font-size: 32px;
  font-weight: 700;
}
@media screen and (min-width: 1096px) {
  h1.wz.text.display3,
  h2.wz.text.display3,
  h3.wz.text.display3,
  h4.wz.text.display3,
  h5.wz.text.display3,
  h6.wz.text.display3,
  p.wz.text.display3,
  span.wz.text.display3,
  em.wz.text.display3,
  label.wz.text.display3 {
    line-height: 48px;
    font-size: 40px;
  }
}
@media screen and (min-width: 1441px) {
  h1.wz.text.display3,
  h2.wz.text.display3,
  h3.wz.text.display3,
  h4.wz.text.display3,
  h5.wz.text.display3,
  h6.wz.text.display3,
  p.wz.text.display3,
  span.wz.text.display3,
  em.wz.text.display3,
  label.wz.text.display3 {
    line-height: 56px;
    font-size: 48px;
  }
}
h1.wz.text.display2,
h2.wz.text.display2,
h3.wz.text.display2,
h4.wz.text.display2,
h5.wz.text.display2,
h6.wz.text.display2,
p.wz.text.display2,
span.wz.text.display2,
em.wz.text.display2,
label.wz.text.display2 {
  line-height: 36px;
  
  font-size: 28px;
  font-weight: 700;
}
@media screen and (min-width: 1096px) {
  h1.wz.text.display2,
  h2.wz.text.display2,
  h3.wz.text.display2,
  h4.wz.text.display2,
  h5.wz.text.display2,
  h6.wz.text.display2,
  p.wz.text.display2,
  span.wz.text.display2,
  em.wz.text.display2,
  label.wz.text.display2 {
    line-height: 40px;
    font-size: 32px;
  }
}
@media screen and (min-width: 1441px) {
  h1.wz.text.display2,
  h2.wz.text.display2,
  h3.wz.text.display2,
  h4.wz.text.display2,
  h5.wz.text.display2,
  h6.wz.text.display2,
  p.wz.text.display2,
  span.wz.text.display2,
  em.wz.text.display2,
  label.wz.text.display2 {
    line-height: 44px;
    font-size: 36px;
  }
}
h1.wz.text.display1,
h2.wz.text.display1,
h3.wz.text.display1,
h4.wz.text.display1,
h5.wz.text.display1,
h6.wz.text.display1,
p.wz.text.display1,
span.wz.text.display1,
em.wz.text.display1,
label.wz.text.display1 {
  line-height: 36px;
  
  font-size: 28px;
  font-weight: 700;
}
@media screen and (min-width: 1096px) {
  h1.wz.text.display1,
  h2.wz.text.display1,
  h3.wz.text.display1,
  h4.wz.text.display1,
  h5.wz.text.display1,
  h6.wz.text.display1,
  p.wz.text.display1,
  span.wz.text.display1,
  em.wz.text.display1,
  label.wz.text.display1 {
    line-height: 40px;
    font-size: 32px;
  }
}
h1.wz.text.headline2,
h2.wz.text.headline2,
h3.wz.text.headline2,
h4.wz.text.headline2,
h5.wz.text.headline2,
h6.wz.text.headline2,
p.wz.text.headline2,
span.wz.text.headline2,
em.wz.text.headline2,
label.wz.text.headline2 {
  line-height: 32px;
  font-size: 24px;
  font-weight: 700;
}
@media screen and (min-width: 1096px) {
  h1.wz.text.headline2,
  h2.wz.text.headline2,
  h3.wz.text.headline2,
  h4.wz.text.headline2,
  h5.wz.text.headline2,
  h6.wz.text.headline2,
  p.wz.text.headline2,
  span.wz.text.headline2,
  em.wz.text.headline2,
  label.wz.text.headline2 {
    line-height: 36px;
    font-size: 28px;
  }
}
h1.wz.text.headline1,
h2.wz.text.headline1,
h3.wz.text.headline1,
h4.wz.text.headline1,
h5.wz.text.headline1,
h6.wz.text.headline1,
p.wz.text.headline1,
span.wz.text.headline1,
em.wz.text.headline1,
label.wz.text.headline1 {
  line-height: 28px;
  font-size: 21px;
  font-weight: 700;
}
@media screen and (min-width: 1441px) {
  h1.wz.text.headline1,
  h2.wz.text.headline1,
  h3.wz.text.headline1,
  h4.wz.text.headline1,
  h5.wz.text.headline1,
  h6.wz.text.headline1,
  p.wz.text.headline1,
  span.wz.text.headline1,
  em.wz.text.headline1,
  label.wz.text.headline1 {
    line-height: 32px;
    font-size: 24px;
  }
}
h1.wz.text.title,
h2.wz.text.title,
h3.wz.text.title,
h4.wz.text.title,
h5.wz.text.title,
h6.wz.text.title,
p.wz.text.title,
span.wz.text.title,
em.wz.text.title,
label.wz.text.title {
  line-height: 24px;
  font-size: 19px;
  font-weight: 700;
}
@media screen and (min-width: 1096px) {
  h1.wz.text.title,
  h2.wz.text.title,
  h3.wz.text.title,
  h4.wz.text.title,
  h5.wz.text.title,
  h6.wz.text.title,
  p.wz.text.title,
  span.wz.text.title,
  em.wz.text.title,
  label.wz.text.title {
    line-height: 28px;
    font-size: 21px;
  }
}
h1.wz.text.subtext2,
h2.wz.text.subtext2,
h3.wz.text.subtext2,
h4.wz.text.subtext2,
h5.wz.text.subtext2,
h6.wz.text.subtext2,
p.wz.text.subtext2,
span.wz.text.subtext2,
em.wz.text.subtext2,
label.wz.text.subtext2 {
  line-height: 24px;
  font-size: 17px;
  font-weight: 700;
}
h1.wz.text.body2,
h2.wz.text.body2,
h3.wz.text.body2,
h4.wz.text.body2,
h5.wz.text.body2,
h6.wz.text.body2,
p.wz.text.body2,
span.wz.text.body2,
em.wz.text.body2,
label.wz.text.body2 {
  line-height: 24px;
  font-size: 17px;
  font-weight: 400;
}
h1.wz.text.subtext1,
h2.wz.text.subtext1,
h3.wz.text.subtext1,
h4.wz.text.subtext1,
h5.wz.text.subtext1,
h6.wz.text.subtext1,
p.wz.text.subtext1,
span.wz.text.subtext1,
em.wz.text.subtext1,
label.wz.text.subtext1 {
  line-height: 20px;
  font-size: 15px;
  font-weight: 700;
}
h1.wz.text.body1,
h2.wz.text.body1,
h3.wz.text.body1,
h4.wz.text.body1,
h5.wz.text.body1,
h6.wz.text.body1,
p.wz.text.body1,
span.wz.text.body1,
em.wz.text.body1,
label.wz.text.body1 {
  line-height: 20px;
  font-size: 15px;
  font-weight: 400;
}
h1.wz.text.caption2,
h2.wz.text.caption2,
h3.wz.text.caption2,
h4.wz.text.caption2,
h5.wz.text.caption2,
h6.wz.text.caption2,
p.wz.text.caption2,
span.wz.text.caption2,
em.wz.text.caption2,
label.wz.text.caption2 {
  line-height: 18px;
  font-size: 13px;
  font-weight: 400;
}
h1.wz.text.caption1,
h2.wz.text.caption1,
h3.wz.text.caption1,
h4.wz.text.caption1,
h5.wz.text.caption1,
h6.wz.text.caption1,
p.wz.text.caption1,
span.wz.text.caption1,
em.wz.text.caption1,
label.wz.text.caption1 {
  line-height: 16px;
  font-size: 12px;
  font-weight: 400;
}

.wz.button {
  transition-property: background-color, border-color, color, opacity;
  transition-duration: 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  padding: 0 1.4117647059em;
  height: 48px;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  color: rgba(0, 0, 0, 0.54);
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box !important;
  -webkit-appearance: none;
}
.wz.button {
  display: inline-block;
  padding-top: 0.07em;
  text-decoration: none;
}

.wz.button:hover,
.wz.button:focus,
.wz.button.active {
  border-color: rgba(0, 0, 0, 0.3);
  text-decoration: none;
  color: rgba(0, 0, 0, 0.84);
}
.wz.button.less,
.wz.button[class*=-less] {
  border-width: 0;
}
.wz.button.less,
.wz.button.less:hover,
.wz.button.less:focus,
.wz.button.less.active,
.wz.button[class*=-less],
.wz.button[class*=-less]:hover,
.wz.button[class*=-less]:focus,
.wz.button[class*=-less].active {
  background-color: transparent !important;
  padding: 0;
}
.wz.button[class*=icon-]::before {
  margin-right: 3px;
}
.wz.button.no-radius {
  border-radius: 0;
}
.wz.button.disabled,
.wz.button:disabled {
  opacity: 0.45;
  cursor: default;
  color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.wz.button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.wz.button.loading::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation-name: wz-button-loading;
  animation-duration: 0.2s;
  opacity: 1;
  background: url("src/svg/loader.svg") 50% no-repeat;
  width: 20px;
  height: 20px;
  content: "";
}
.wz.button.loading.primary::after,
.wz.button.loading.blue::after,
.wz.button.loading.gray::after,
.wz.button.loading.red::after {
  background-image: url("src/svg/loader-white.svg");
}
@keyframes wz-button-loading {
  from {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.wz.button[href] {
  line-height: 46px;
}
.wz.button.icon > [class*=icon-]::before,
.wz.button[class*=icon-]::before {
  line-height: 46px;
}
.wz.button.mini {
  padding: 0 10px;
  height: 28px;
  line-height: 26px;
  font-size: 12px;
}
.wz.button.mini.icon > [class*=icon-]::before,
.wz.button.mini[class*=icon-]::before {
  line-height: 1em;
}
.wz.button.small {
  padding: 0 12px;
  height: 32px;
  line-height: 30px;
  font-size: 13px;
}
.wz.button.small.icon > [class*=icon-]::before,
.wz.button.small[class*=icon-]::before {
  line-height: 30px;
}
.wz.button.dense {
  padding: 0 16px;
  height: 36px;
  line-height: 34px;
  font-size: 15px;
}
.wz.button.dense.icon > [class*=icon-]::before,
.wz.button.dense[class*=icon-]::before {
  line-height: 30px;
}
.wz.button.large {
  padding: 0 32px;
  height: 56px;
  line-height: 54px;
  font-size: 21px;
}
.wz.button.large.icon > [class*=icon-]::before,
.wz.button.large[class*=icon-]::before {
  line-height: 54px;
}
.wz.button.block,
.wz.button.fluid {
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 1096px) {
  .wz.button.fluid {
    width: auto;
  }
}
.wz.button.inline-block {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  line-height: 1.25;
}
.wz.button.circular {
  border-radius: 3em;
  padding-top: 0;
  padding-bottom: 0;
}

.wz.button.primary, .wz.button.primary-outline {
  border-color: #00c4c4;
}
.wz.button.primary:hover, .wz.button.primary:focus, .wz.button.primary.active, .wz.button.primary-outline:hover, .wz.button.primary-outline:focus, .wz.button.primary-outline.active {
  border-color: #00b2b2;
  background-color: #00b2b2;
  color: #fff;
}
.wz.button.primary {
  background-color: #00c4c4;
  color: #fff;
}
.wz.button.primary.disabled, .wz.button.primary:disabled {
  color: rgba(255, 255, 255, 0.7);
}
.wz.button.primary.less {
  color: #00c4c4;
}
.wz.button.primary.less:hover, .wz.button.primary.less:focus, .wz.button.primary.less.active {
  color: #00b2b2;
}
.wz.button.primary-outline {
  background-color: transparent;
  color: #00c4c4;
}
.wz.button.primary-outline:hover, .wz.button.primary-outline:focus, .wz.button.primary-outline.active {
  color: #fff;
}
.wz.button.primary-outline.disabled, .wz.button.primary-outline:disabled {
  color: rgba(0, 196, 196, 0.7);
}
.wz.button.gray, .wz.button.gray-outline {
  border-color: #90949c;
}
.wz.button.gray:hover, .wz.button.gray:focus, .wz.button.gray.active, .wz.button.gray-outline:hover, .wz.button.gray-outline:focus, .wz.button.gray-outline.active {
  border-color: #60656a;
  background-color: #60656a;
  color: #fff;
}
.wz.button.gray {
  background-color: #90949c;
  color: #fff;
}
.wz.button.gray.disabled, .wz.button.gray:disabled {
  color: rgba(255, 255, 255, 0.7);
}
.wz.button.gray.less {
  color: #60656a;
}
.wz.button.gray.less:hover, .wz.button.gray.less:focus, .wz.button.gray.less.active {
  color: #60656a;
}
.wz.button.gray-outline {
  background-color: transparent;
  color: #60656a;
}
.wz.button.gray-outline:hover, .wz.button.gray-outline:focus, .wz.button.gray-outline.active {
  color: #fff;
}
.wz.button.gray-outline.disabled, .wz.button.gray-outline:disabled {
  color: rgba(96, 101, 106, 0.7);
}

.wz.button.secondary:hover, .wz.button.secondary:focus, .wz.button.secondary.active {
  border-color: #E9ECEF;
  background-color: #E9ECEF;
  color: #343A40;
}
.wz.button.secondary {
  border-color: #F2F4F6;
  background-color: #F2F4F6;
  color: #495057;
}
.wz.button.secondary.disabled, .wz.button.secondary:disabled {
  border-color: #F2F4F6;
  background-color: #F2F4F6;
  opacity: .4;
  color: #495057;
}
.wz.button.blue, .wz.button.blue-outline {
  border-color: #557cf2;
}
.wz.button.blue:hover, .wz.button.blue:focus, .wz.button.blue.active, .wz.button.blue-outline:hover, .wz.button.blue-outline:focus, .wz.button.blue-outline.active {
  border-color: #395bbf;
  background-color: #395bbf;
  color: #fff;
}
.wz.button.blue {
  background-color: #557cf2;
  color: #fff;
}
.wz.button.blue.disabled, .wz.button.blue:disabled {
  color: rgba(255, 255, 255, 0.7);
}
.wz.button.blue.less {
  color: #4167d9;
}
.wz.button.blue.less:hover, .wz.button.blue.less:focus, .wz.button.blue.less.active {
  color: #395bbf;
}
.wz.button.blue-outline {
  background-color: transparent;
  color: #4167d9;
}
.wz.button.blue-outline:hover, .wz.button.blue-outline:focus, .wz.button.blue-outline.active {
  color: #fff;
}
.wz.button.blue-outline.disabled, .wz.button.blue-outline:disabled {
  color: rgba(65, 103, 217, 0.7);
}
.wz.button.red, .wz.button.red-outline {
  border-color: #f66;
}
.wz.button.red:hover, .wz.button.red:focus, .wz.button.red.active, .wz.button.red-outline:hover, .wz.button.red-outline:focus, .wz.button.red-outline.active {
  border-color: #e54545;
  background-color: #e54545;
  color: #fff;
}
.wz.button.red {
  background-color: #f66;
  color: #fff;
}
.wz.button.red.disabled, .wz.button.red:disabled {
  color: rgba(255, 255, 255, 0.7);
}
.wz.button.red.less {
  color: #f25555;
}
.wz.button.red.less:hover, .wz.button.red.less:focus, .wz.button.red.less.active {
  color: #e54545;
}
.wz.button.red-outline {
  background-color: transparent;
  color: #f25555;
}
.wz.button.red-outline:hover, .wz.button.red-outline:focus, .wz.button.red-outline.active {
  color: #fff;
}
.wz.button.red-outline.disabled, .wz.button.red-outline:disabled {
  color: rgba(242, 85, 85, 0.7);
}
.wz.button.icon {
  padding: 0;
  width: 48px;
  overflow: hidden;
  font-size: 32px;
  box-sizing: border-box;
}
.wz.button.icon > i.icon {
  line-height: 1;
}
.wz.button.icon > i.icon::before {
  margin: 0;
  vertical-align: top;
}
.wz.button.icon.mini {
  padding: 6px;
  width: 30px;
  font-size: 16px;
}
.wz.button.icon.small {
  padding: 6px;
  width: 34px;
  font-size: 20px;
}
.wz.button.icon.dense {
  padding: 6px;
  width: 38px;
  font-size: 32px;
}
.wz.button.icon.dense .icon {
  font-size: 24px;
}
.wz.button.icon.large {
  padding: 8px;
  width: 58px;
  font-size: 40px;
}
.wz.button.icon.icon[aria-label] {
  position: relative;
  overflow-x: visible;
  overflow-y: visible;
}
.wz.button.icon.icon[aria-label]::before, .wz.button.icon.icon[aria-label]::after {
  display: none;
  position: absolute;
  top: 100%;
  right: 50%;
  z-index: 100000;
}
.wz.button.icon.icon[aria-label]::before {
  margin-right: -5px;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 5px solid rgba(0, 0, 0, 0.6);
  content: "";
}
.wz.button.icon.icon[aria-label]::after {
  transform: translateX(50%);
  margin-top: 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.3em 0.8em;
  text-transform: none;
  text-shadow: none;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: nowrap;
  color: #fff;
  font-size: 0.8em;
  content: attr(aria-label);
  pointer-events: none;
}
.wz.button.icon.icon[aria-label]:hover::before, .wz.button.icon.icon[aria-label]:hover::after, .wz.button.icon.icon[aria-label]:focus::before, .wz.button.icon.icon[aria-label]:focus::after, .wz.button.icon.icon[aria-label].tt-hold::before, .wz.button.icon.icon[aria-label].tt-hold::after {
  display: block;
}

/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable no-duplicate-selectors */
.wz.input {
  display: block;
  position: relative;
  font-size: 17px;
}
.wz.input > input, .wz.input > textarea, .wz.input.icon > i.icon {
  color: rgba(0, 0, 0, 0.84);
  font-size: 17px;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
}
.wz.input > input, .wz.input > textarea {
  transition-property: border-color, height, padding-right, color;
  transition-duration: 0.2s, 0s;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background: #fff;
  padding: 0 0.9411764706em;
  width: 100%;
  vertical-align: middle;
  color: rgba(0, 0, 0, 0.84);
  font-size: 17px;
  font-weight: 400;
}
.wz.input > input[type=number]::-webkit-inner-spin-button, .wz.input > input[type=number]::-webkit-outer-spin-button, .wz.input > textarea[type=number]::-webkit-inner-spin-button, .wz.input > textarea[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wz.input > input::-webkit-input-placeholder, .wz.input > textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
  .wz.input > input:hover, .wz.input > textarea:hover {
    border-color: rgba(0, 0, 0, 0.54);
  }
  .wz.input > input:hover + i.icon, .wz.input > textarea:hover + i.icon {
    color: rgba(0, 0, 0, 0.54);
  }
}
.wz.input > input:focus, .wz.input > input.active, .wz.input > textarea:focus, .wz.input > textarea.active {
  border-color: #00c4c4;
}
.wz.input > input:focus.blue, .wz.input > input.active.blue, .wz.input > textarea:focus.blue, .wz.input > textarea.active.blue {
  border-color: #99b2ff;
}
.wz.input > input:focus + i.icon, .wz.input > textarea:focus + i.icon {
  color: rgba(0, 0, 0, 0.54);
}
.wz.input > input:active + i.icon, .wz.input > textarea:active + i.icon {
  color: rgba(0, 0, 0, 0.68);
}
.wz.input > input[readonly], .wz.input > input[disabled], .wz.input > textarea[readonly], .wz.input > textarea[disabled] {
  border-color: rgba(0, 0, 0, 0.15);
  background-color: rgba(0, 0, 0, 0.06);
  cursor: default;
  pointer-events: none;
}
.wz.input > input[disabled], .wz.input > textarea[disabled] {
  opacity: 0.45;
}
.wz.input > input[readonly], .wz.input > textarea[readonly] {
  color: rgba(0, 0, 0, 0.84);
}
.wz.input > input {
  height: 48px;
  line-height: 1.2em;
  font-size: 17px;
  font-weight: 400;
}
.wz.input > textarea {
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.6em;
  font-size: 15px;
  font-weight: 400;
  resize: vertical;
}
.wz.input::after {
  display: inline-block;
  margin-top: -0.2em;
  vertical-align: middle;
  text-transform: none;
  line-height: 1;
  font-family: "wadizicon" !important;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  speak: none;
  content: "\e934";
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(0);
  transition-property: transform, opacity;
  transition-duration: 0.2s;
  opacity: 0;
  margin-top: 0;
  width: auto;
  height: auto;
  box-sizing: border-box;
  pointer-events: none;
  color: #00c4c4;
  font-size: 1.4117647059em;
}
.wz.input.inline-block {
  display: inline-block;
}
.wz.input.short > textarea {
  height: 48px;
}
.wz.input.error > input, .wz.form .field.error .wz.input > input, .wz.input.error > textarea, .wz.form .field.error .wz.input > textarea, .wz.input > input.error, .wz.input > textarea.error {
  border-color: #f66;
  background-color: rgba(255, 155, 155, 0.06);
}
.wz.input.success::after {
  top: 50%;
  right: 0.4705882353em;
  transform: scale(1) translateY(-50%);
  opacity: 1;
  padding: 0;
  font-size: 1.4117647059em;
}
.wz.input.success > input {
  border: 1px solid #00c4c4;
  padding-right: 2.4705882353em;
}
.wz.input.success.icon > i.icon {
  transform: scale(0);
  opacity: 0;
}
.wz.input.loading.icon > input, .wz.input.loading > input {
  padding-right: 1.7647058824em;
}
.wz.input.loading::after {
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  transform: scale(1);
  opacity: 1;
  background-image: linear-gradient(to right, transparent, white 50%);
  width: 2.3529411765em;
  content: "";
}
.wz.input.loading::before {
  position: absolute;
  top: 50%;
  right: 0.5333333333em;
  transform: translateY(-50%);
  z-index: 1;
  width: 1.4666666667em;
  height: 1.4666666667em;
}
.wz.input.labeled {
  display: flex;
}
.wz.input.labeled > input {
  display: inline-block;
  border-left: 0;
  box-sizing: border-box;
}
.wz.input.labeled > .wz.label {
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.54);
  background-color: rgba(255, 255, 255, 0.84);
  padding: 0 1.0666666667em;
  height: 48px;
  line-height: 48px;
  font-size: 17px;
  box-sizing: border-box;
}
.wz.input.labeled > .wz.label.primary {
  border: 1px solid #00a2a2;
  background-color: #00c4c4;
  color: #fff;
}
.wz.input.labeled > .wz.label.info {
  border: 1px solid #395bbf;
  background-color: #557cf2;
  color: #fff;
}
.wz.input.labeled > .wz.label.warning {
  border: 1px solid #e5a400;
  background-color: #ffb500;
}
.wz.input.labeled > .wz.label.danger {
  border: 1px solid #e54545;
  background-color: #f66;
  color: #fff;
}
.wz.input.action {
  display: flex;
  outline: none;
}
.wz.input.action > input {
  padding-right: 5.8823529412em;
  box-sizing: border-box;
}
.wz.input.action > input + button::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  transition-property: border-color;
  transition-duration: 0.2s;
  border: 1px solid rgba(0, 0, 0, 0);
  cursor: auto;
  pointer-events: none;
  content: "";
}
.wz.input.action > input:focus + button::before {
  border-radius: 3px;
  border-color: #00c4c4;
}
.wz.input.action.icon > input {
  padding-right: 3em;
  padding-left: 1.1333333333em;
}
.wz.input.action > button, .wz.input.action > .wz.button {
  position: absolute;
  right: 0;
  margin: 5px 5px 0 0;
  outline: none;
  padding-right: 1.0666666667em;
  padding-left: 1.0666666667em;
  height: 38px;
  line-height: 38px;
  word-break: keep-all;
  font-size: 0.8823529412em;
}
.wz.input.action > button.icon, .wz.input.action > .wz.button.icon {
  right: 0;
  margin-top: 0;
  padding-right: 0.5333333333em;
  padding-left: 0.5333333333em;
  width: 2.6666666667em;
  height: 48px;
  line-height: 48px;
}
.wz.input.action > button.icon i.icon::before, .wz.input.action > .wz.button.icon i.icon::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.wz.input.action > button.icon > .icon, .wz.input.action > .wz.button.icon > .icon {
  line-height: 1em;
  font-size: 1.6em;
}
.wz.input.action.icon > i.icon, .wz.input.action.success::after {
  right: 4.2352941176em;
}
.wz.input.icon > input {
  padding-right: 2.3529411765em;
}
.wz.input.icon > i.icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition-property: transform, opacity, color;
  transition-duration: 0.2s;
  padding-right: 0.3333333333em;
  padding-left: 0.3333333333em;
  width: auto;
  height: auto;
  color: rgba(0, 0, 0, 0.3);
  font-size: 1.4117647059em;
  pointer-events: none;
}
.wz.input.icon.left > i.icon {
  right: auto;
  left: 0;
  padding-right: 0.4em;
  padding-left: 0.7em;
  font-size: 1.1764705882em;
}
.wz.input.icon.left > input {
  padding-right: 0.5882352941em;
  padding-left: 2.4705882353em;
}
.wz.input.icon.success.left > i.icon {
  transform: scale(1) translateY(-50%);
  opacity: 1;
}
.wz.input.icon.success.left > input {
  padding-right: 2.3529411765em;
}
.wz.input.transparent > input {
  border: transparent;
}
.wz.input.small {
  font-size: 12px;
}
.wz.input.small input {
  height: 28px;
  line-height: 28px;
  font-size: inherit;
}
.wz.input.small textarea {
  font-size: inherit;
}
.wz.input.dense {
  font-size: 13px;
}
.wz.input.dense input {
  height: 32px;
  line-height: 32px;
  font-size: inherit;
}
.wz.input.dense textarea {
  font-size: inherit;
}
.wz.input.tiny {
  font-size: 15px;
}
.wz.input.tiny input {
  height: 36px;
  line-height: 36px;
  font-size: inherit;
}
.wz.input.tiny textarea {
  font-size: inherit;
}
.wz.input.large {
  font-size: 21px;
}
.wz.input.large input {
  height: 56px;
  line-height: 56px;
  font-size: inherit;
}
.wz.input.large textarea {
  font-size: inherit;
}

.wz.form .grid label {
  display: block;
  margin-bottom: 8px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.84);
  font-size: 17px;
}
.wz.form .grid label ~ .field {
  margin-top: 0;
}

.wz.form .field {
  margin: 24px 0;
}
.wz.form .field > label {
  display: block;
  margin-bottom: 8px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.84);
  font-size: 17px;
}
.wz.form .field.label-hidden > label {
  display: none;
}
.wz.form .field.required label::after {
  display: inline-block;
  margin-left: 4px;
  color: #f66;
  content: "*";
}
.wz.form .field.optional label::after {
  display: inline-block;
  margin-left: 4px;
  color: rgba(0, 0, 0, 0.54);
  content: "(Optional)";
}
.wz.form .field .helper {
  display: block;
  margin-top: 4px;
  line-height: 18px;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
}
.wz.form .field .helper.success {
  color: #00b2b2;
}
.wz.form .field .helper.error, .wz.form .field.error .helper.wz.input {
  color: #f25555;
}
.wz.form .field.error > label, .wz.form .field.error .field.wz.input > label {
  border-color: #f66;
}
.wz.form .field.error > .field, .wz.form .field.error .field.wz.input > .field, .wz.form .field.error > .wz.dropdown, .wz.form .field.error .field.wz.input > .wz.dropdown {
  border-color: #f66;
  background-color: rgba(255, 155, 155, 0.06);
  color: #f25555;
}

.field .wz.dropdown {
  height: 48px;
  line-height: 48px;
}

.wz.form .field.group > .field {
  margin: 12px 0;
}

.wz.message {
  margin: 12px auto;
  background-color: rgba(186, 189, 192, 0.08);
  padding: 16px;
  color: rgba(0, 0, 0, 0.84);
  font-size: 13px;
}
.wz.message.icon .icon {
  font-size: 18px;
}
.wz.message.icon .header ~ * {
  padding-left: 21px;
}
.wz.message p {
  margin: 5px 0 0;
}
.wz.message .header,
.wz.message p.title,
.wz.message dt {
  font-size: 15px;
  font-weight: 500;
}
.wz.message .header,
.wz.message p.title {
  color: #44484b;
}
.wz.message dl {
  margin-bottom: 0;
  border-top: 0;
}
.wz.message dt,
.wz.message dd {
  line-height: 24px;
}
.wz.message dt {
  padding-top: 0;
}
.wz.message ul,
.wz.message ol,
.wz.message li {
  list-style: none;
}
.wz.message dd,
.wz.message li {
  margin-bottom: 20px;
  border-bottom: 0;
  padding-bottom: 0;
  padding-left: 1em;
}
.wz.message dd {
  margin-left: 0;
  padding-left: 0;
}
.wz.message ul {
  padding: 0;
}
.wz.message li::before {
  margin-right: 0.2em;
  margin-left: -1em;
  color: #44484b;
  content: "•";
}
.wz.message p:first-child,
.wz.message ul:first-child,
.wz.message ol:first-child {
  margin-top: 0;
}
.wz.message li,
.wz.message p:last-child,
.wz.message dd:last-child,
.wz.message ul:last-child,
.wz.message ol:last-child {
  margin-bottom: 0;
}
.wz.message[class*=icon-]::before,
.wz.message p.title[class*=icon-]::before {
  display: inline-block;
  margin-top: -0.2em;
  margin-right: 5px;
  vertical-align: middle;
  font-size: 1.2em;
}
.wz.message.horizontal .header {
  display: inline-block;
  margin-right: 16px;
}
@media screen and (min-width: 1096px) {
  .wz.message.horizontal p {
    display: inline-block;
    margin-top: 0;
  }
}
.wz.message.error,
.wz.form .field.error .wz.message.input {
  background-color: rgba(255, 128, 128, 0.05);
}
.wz.message.error .header,
.wz.form .field.error .wz.message.input .header,
.wz.message.error p,
.wz.form .field.error .wz.message.input p {
  color: #f66;
}
.wz.message.success {
  background-color: rgba(0, 196, 196, 0.1);
}
.wz.message.success .header,
.wz.message.success p {
  color: #00b2b2;
}
.wz.message.value {
  background-color: rgba(85, 124, 242, 0.08);
}
.wz.message.value .header,
.wz.message.value p {
  color: #557cf2;
}
.wz.message a {
  transition: color 0.2s;
  text-decoration: underline;
  color: #395bbf;
}
.wz.message a:hover,
.wz.message a:focus {
  color: #4167d9;
}

label.wz.checkbox {
  display: block;
}
label.wz.checkbox > input {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
label.wz.checkbox > input::before, label.wz.checkbox > input::after {
  display: none;
}
label.wz.checkbox > input:focus + span::before, label.wz.checkbox > input:hover + span::before {
  border-color: #00c4c4;
}
label.wz.checkbox > input:disabled + span::before {
  opacity: 0.5;
  border-color: inherit;
}
label.wz.checkbox > input:checked + span::before {
  border-color: transparent;
  background-color: #00c4c4;
  background-image: url('../svg/check-white.svg');
  background-size: 100%;
  content: '';
}
label.wz.checkbox > span {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 24px;
  vertical-align: top;
}
label.wz.checkbox > span::before {
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.25s;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fff;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  content: "";
}
label.wz.checkbox > span::after {
  display: inline-block;
  margin-top: -0.2em;
  vertical-align: middle;
  text-transform: none;
  line-height: 1;
  font-family: "wadizicon" !important;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  speak: none;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 16px;
  height: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
label.wz.checkbox.large > span {
  padding-left: 32px;
  line-height: 26px;
  font-size: 17px;
}
label.wz.checkbox.large > span::before {
  top: 0;
  width: 23px;
  height: 23px;
}
label.wz.checkbox.large > span::after {
  top: 6px;
  left: 4px;
  width: 18px;
  height: 18px;
  font-size: 18px;
}
label.wz.checkbox.circular span::before {
  top: 0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  box-sizing: content-box;
}
label.wz.checkbox.circular span::after {
  left: 3px;
}
label.wz.checkbox.large.circular span::before {
  border-radius: 50%;
  width: 23px;
  height: 23px;
}
label.wz.checkbox.large.circular span::after {
  top: 7px;
  left: 4px;
}
label.wz.checkbox input:disabled + span {
  opacity: 0.5;
}
label.wz.checkbox.blue input:hover + span::before,
label.wz.checkbox.blue input:focus + span::before,
label.wz.checkbox.blue input:checked + span::before {
  border-color: #557cf2;
}
label.wz.checkbox.blue input:checked + span::before {
  border-color: transparent;
  background-color: #557cf2;
  background-image: url('../svg/check-white.svg');
  background-size: 100%;
  content: '';
}
label.wz.checkbox.blue input:checked + span::after {
  content: '';
}
label.wz.checkbox.red input:hover + span::before,
label.wz.checkbox.red input:focus + span::before,
label.wz.checkbox.red input:checked + span::before {
  border-color: #f66;
}
label.wz.checkbox.red input:checked + span::before {
  border-color: transparent;
  background-color: #f66;
  background-image: url('../svg/check-white.svg');
  background-size: 100%;
  content: '';
}
label.wz.checkbox.yellow input:hover + span::before,
label.wz.checkbox.yellow input:focus + span::before,
label.wz.checkbox.yellow input:checked + span::before {
  border-color: #ffb500;
}
label.wz.checkbox.yellow input:checked + span::before {
  border-color: transparent;
  background-color: #ffb500;
}
label.wz.checkbox.gray input:hover + span::before,
label.wz.checkbox.gray input:focus + span::before,
label.wz.checkbox.gray input:checked + span::before {
  border-color: #90949c;
}
label.wz.checkbox.gray input:checked + span::before {
  border-color: transparent;
  background-color: #90949c;
}
label.wz.checkbox.navy input:hover + span::before,
label.wz.checkbox.navy input:focus + span::before,
label.wz.checkbox.navy input:checked + span::before {
  border-color: #00134c;
}
label.wz.checkbox.navy input:checked + span::before {
  border-color: transparent;
  background-color: #00134c;
}

label.wz.radio {
  cursor: pointer;
}
label.wz.radio > input {
  position: absolute;
  opacity: 0;
}
label.wz.radio > input::before, label.wz.radio > input::after {
  display: none;
}
label.wz.radio > input:checked + span::after {
  opacity: 1;
  background-color: #00c4c4;
}
label.wz.radio > input:focus + span::before, label.wz.radio > input:hover + span::before, label.wz.radio > input:checked + span::before {
  border-color: #00c4c4;
}
label.wz.radio > span {
  display: inline-block;
  position: relative;
  padding-left: 26px;
  line-height: 22px;
}
label.wz.radio > span::before {
  position: absolute;
  left: 0;
  margin-right: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  content: "";
}
label.wz.radio > span::after {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  opacity: 0;
  border-radius: 50%;
  background-color: #00c4c4;
  width: 14px;
  height: 14px;
  content: "";
}
label.wz.radio.large > span {
  padding-left: 34px;
  line-height: 26px;
  font-size: 17px;
}
label.wz.radio.large > span::before {
  width: 26px;
  height: 26px;
}
label.wz.radio.large > span::after {
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
}
label.wz.radio > input:disabled + span {
  opacity: 0.5;
}
label.wz.radio > input:disabled + span::before {
  opacity: 0.5;
  border-color: rgba(0, 0, 0, 0.84);
}
label.wz.radio.blue input:hover + span::before,
label.wz.radio.blue input:focus + span::before,
label.wz.radio.blue input:checked + span::before {
  border-color: #557cf2;
}
label.wz.radio.blue input:checked + span::after {
  background-color: #557cf2;
}
label.wz.radio.red input:hover + span::before,
label.wz.radio.red input:focus + span::before,
label.wz.radio.red input:checked + span::before {
  border-color: #f66;
}
label.wz.radio.red input:checked + span::after {
  background-color: #f66;
}
label.wz.radio.yellow input:hover + span::before,
label.wz.radio.yellow input:focus + span::before,
label.wz.radio.yellow input:checked + span::before {
  border-color: #ffb500;
}
label.wz.radio.yellow input:checked + span::after {
  background-color: #ffb500;
}
label.wz.radio.gray input:hover + span::before,
label.wz.radio.gray input:focus + span::before,
label.wz.radio.gray input:checked + span::before {
  border-color: #90949c;
}
label.wz.radio.gray input:checked + span::after {
  background-color: #90949c;
}
label.wz.radio.navy input:hover + span::before,
label.wz.radio.navy input:focus + span::before,
label.wz.radio.navy input:checked + span::before {
  border-color: #00134c;
}
label.wz.radio.navy input:checked + span::after {
  background-color: #00134c;
}

.wz.dropdown {
  display: inline-block;
  position: relative;
}
.wz.dropdown > select, .wz.dropdown > span {
  padding-right: 20px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
}
.wz.dropdown > span {
  pointer-events: none;
}
.wz.dropdown select {
  margin: 0;
  outline: none;
  border: 0;
  background: none;
  padding: 0 20px 0 0;
  height: 100%;
  line-height: inherit;
  -webkit-appearance: none;
}
.wz.dropdown select::-ms-expand {
  display: none;
}
.wz.dropdown > span + select {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  width: 100%;
  color: #000;
}
.wz.dropdown::after {
  display: inline-block;
  margin-top: -0.2em;
  vertical-align: middle;
  text-transform: none;
  line-height: 1;
  font-family: "wadizicon" !important;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  speak: none;
  content: "\e908";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -7.5px;
  font-size: 15px;
  pointer-events: none;
}
.wz.dropdown.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.wz.dropdown.outline {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background-color: #fff;
  padding: 0 16px;
  line-height: 46px;
}
.wz.dropdown.outline > select {
  padding-right: 32px;
  padding-left: 16px;
}
.wz.dropdown.outline::after {
  right: 8px;
}
.wz.dropdown.outline select {
  padding: 0 36px 0 16px;
}
.wz.dropdown.mini {
  line-height: 28px;
}
.wz.dropdown.mini select {
  padding: 0 30px 0 10px;
}
.wz.dropdown.small {
  line-height: 32px;
}
.wz.dropdown.small select {
  padding: 0 32px 0 12px;
}
.wz.dropdown.dense {
  line-height: 36px;
}
.wz.dropdown.dense select {
  padding: 0 34px 0 14px;
}
.wz.dropdown.default {
  line-height: 46px;
}
.wz.dropdown.default:not(.outline) {
  padding: 0 16px;
}
.wz.dropdown.default.outline > select {
  padding-right: 32px;
  padding-left: 16px;
}
.wz.dropdown.large {
  line-height: 56px;
}
.wz.dropdown.large select {
  padding: 0 38px 0 18px;
}
.wz.dropdown.block {
  width: 100%;
  box-sizing: border-box;
}
.wz.dropdown.block select {
  width: 100%;
}

.wz.tooltip {
  position: relative;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  padding: 4px;
  width: 24px;
  height: 24px;
  font-size: 14px;
}
.wz.tooltip::before {
  display: inline-block;
  margin-top: -0.2em;
  vertical-align: middle;
  text-transform: none;
  line-height: 1;
  font-family: "wadizicon" !important;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  speak: none;
  content: "\e96d";
}
.wz.tooltip:hover::before, .wz.tooltip:focus::before {
  display: inline-block;
  margin-top: -0.2em;
  vertical-align: middle;
  text-transform: none;
  line-height: 1;
  font-family: "wadizicon" !important;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  speak: none;
  color: rgba(0, 0, 0, 0.68);
}
.wz.tooltip:hover .tooltip-message, .wz.tooltip:focus .tooltip-message {
  transform: scale(1);
  opacity: 1;
}
.wz.tooltip .tooltip-message {
  top: 90%;
  pointer-events: none;
  box-sizing: border-box;
  transform: scale(0.5);
  transform-origin: top left;
  opacity: 0;
  z-index: 1;
}
.wz.tooltip.mini .tooltip-message {
  width: 176px;
}
.wz.tooltip.right .tooltip-message {
  right: 4px;
  left: initial;
  transform-origin: top right;
}
.wz.tooltip.top .tooltip-message {
  top: auto;
  bottom: 100%;
  transform-origin: bottom left;
}
.wz.tooltip.top.right .tooltip-message {
  top: auto;
  bottom: 100%;
  transform-origin: bottom right;
}

.tooltip-message {
  position: absolute;
  left: 6px;
  transition: opacity 75ms, transform 75ms;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.68);
  padding: 12px;
  width: 176px;
  text-align: left;
  color: #fff;
  font-size: 12px;
}
@media screen and (min-width: 1096px) {
  .tooltip-message {
    width: 400px;
  }
}