/*
 * @Author: 天吾
 * @Date: 2019-01-23 16:29:55
 * @Last Modified by: 天吾
 * @Last Modified time: 2019-04-27 19:55:52
 */
/*
    size 统一用  sm base lg  表示,  对于不能满足的情况, 仿照衣服尺寸加上 x(EXTRA) 比如  font-size-xlg 表示特大
*/
.gd-fade-enter {
  opacity: 0;
}
.gd-fade-enter-active {
  transition: opacity 0.3s ease;
}
.gd-fade-leave-active {
  transition: opacity 0.3s ease;
}
.gd-fade-leave-to {
  opacity: 0;
}
.gd-popover {
  font-size: 12px;
  position: relative;
  color: #fff;
  background: #4C4E4F;
  border-radius: 4px;
}
.gd-popover * {
  box-sizing: border-box;
}
.gd-popover .gd-popover__arrow {
  position: absolute;
}
.gd-popover--arrow .gd-popover__arrow {
  border-width: 6px;
  box-sizing: border-box;
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #4C4E4F;
  border-style: solid;
  border-radius: 2px;
  transform: rotate(45deg);
}
.gd-popover--arrow[x-placement^="top"] {
  padding-bottom: 8px;
}
.gd-popover--arrow[x-placement^="top"] .gd-popover__arrow {
  bottom: -6px;
  border-top-color: transparent;
  border-left-color: transparent;
}
.gd-popover--arrow[x-placement="top-start"] .gd-popover__arrow,
.gd-popover--arrow[x-placement="bottom-start"] .gd-popover__arrow {
  transform: translateX(-6px) rotate(45deg);
}
.gd-popover--arrow[x-placement="top-end"] .gd-popover__arrow,
.gd-popover--arrow[x-placement="bottom-end"] .gd-popover__arrow {
  transform: translateX(6px) rotate(45deg);
}
.gd-popover--arrow[x-placement^="bottom"] .gd-popover__arrow {
  top: -6px;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.gd-popover--arrow[x-placement^="right"] {
  padding-left: 5px;
}
.gd-popover--arrow[x-placement^="right"] .gd-popover__arrow {
  left: -6px;
  border-right-color: transparent;
  border-top-color: transparent;
}
.gd-popover--arrow[x-placement="right-start"] .gd-popover__arrow,
.gd-popover--arrow[x-placement="left-start"] .gd-popover__arrow {
  transform: translateY(-6px) rotate(45deg);
}
.gd-popover--arrow[x-placement="right-end"] .gd-popover__arrow,
.gd-popover--arrow[x-placement="left-end"] .gd-popover__arrow {
  transform: translateY(6px) rotate(45deg);
}
.gd-popover--arrow[x-placement^="left"] {
  padding-right: 5px;
}
.gd-popover--arrow[x-placement^="left"] .gd-popover__arrow {
  right: -6px;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.gd-popover.gd-popover--light {
  background: #fff;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.gd-popover.gd-popover--light.gd-popover--arrow .gd-popover__arrow {
  border-width: 6px;
  box-sizing: border-box;
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #fff;
  border-style: solid;
  border-radius: 2px;
  transform: rotate(45deg);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="top"] {
  padding-bottom: 8px;
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="top"] .gd-popover__arrow {
  bottom: -6px;
  border-top-color: transparent;
  border-left-color: transparent;
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="top"] .gd-popover__arrow {
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="top-start"] .gd-popover__arrow,
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="bottom-start"] .gd-popover__arrow {
  transform: translateX(-6px) rotate(45deg);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="top-end"] .gd-popover__arrow,
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="bottom-end"] .gd-popover__arrow {
  transform: translateX(6px) rotate(45deg);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="bottom"] .gd-popover__arrow {
  top: -6px;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="bottom"] .gd-popover__arrow {
  box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.06);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="right"] {
  padding-left: 5px;
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="right"] .gd-popover__arrow {
  left: -6px;
  border-right-color: transparent;
  border-top-color: transparent;
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="right"] .gd-popover__arrow {
  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="right-start"] .gd-popover__arrow,
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="left-start"] .gd-popover__arrow {
  transform: translateY(-6px) rotate(45deg);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="right-end"] .gd-popover__arrow,
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement="left-end"] .gd-popover__arrow {
  transform: translateY(6px) rotate(45deg);
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="left"] {
  padding-right: 5px;
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="left"] .gd-popover__arrow {
  right: -6px;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.gd-popover.gd-popover--light.gd-popover--arrow[x-placement^="left"] .gd-popover__arrow {
  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
}