/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The elevation transition duration
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-popover {
  position: fixed;
  z-index: 110;
}
.md-popover > .content {
  overflow: hidden;
  border-radius: 2px;
  pointer-events: auto;
  will-change: opacity, transform;
  background-color: var(--md-background);
  background-color: var(--md-elevation-16);
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  /* util classes */
}
.md-popover > .content > .md-popover-title {
  font-weight: bold;
  padding: 12px;
  border-bottom: 1px solid var(--md-border);
}
.md-popover > .content > .md-popover-content {
  padding: 12px;
}
.md-popover > .content > .md-popover-ctrl {
  display: flex;
  justify-content: flex-end;
}
.md-popover > .content > .md-popover-ctrl > .md-button {
  margin: 0;
}
.md-popover > .content > .md-popover-ctrl > .md-button:not(:last-child) {
  margin-right: 6px;
}

.md-popover-enter,
.md-popover-leave-active {
  opacity: 0;
}

.md-popover-enter-active {
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.md-popover-leave-active {
  transition-duration: 0.15s;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

[data-popper-placement=left] > .md-popover-enter,
[data-popper-placement=left] > .md-popover-leave {
  transform-origin: center right;
}
[data-popper-placement=left] > .md-popover-enter,
[data-popper-placement=left] > .md-popover-leave-active {
  transform: translate3d(6px, 0, 0) scale(0.95);
}

[data-popper-placement=left-start] > .md-popover-enter,
[data-popper-placement=left-start] > .md-popover-leave {
  transform-origin: top right;
}
[data-popper-placement=left-start] > .md-popover-enter,
[data-popper-placement=left-start] > .md-popover-leave-active {
  transform: translate3d(6px, 0, 0) scale(0.95);
}

[data-popper-placement=left-end] > .md-popover-enter,
[data-popper-placement=left-end] > .md-popover-leave {
  transform-origin: bottom right;
}
[data-popper-placement=left-end] > .md-popover-enter,
[data-popper-placement=left-end] > .md-popover-leave-active {
  transform: translate3d(6px, 0, 0) scale(0.95);
}

[data-popper-placement=right] > .md-popover-enter,
[data-popper-placement=right] > .md-popover-leave {
  transform-origin: center left;
}
[data-popper-placement=right] > .md-popover-enter,
[data-popper-placement=right] > .md-popover-leave-active {
  transform: translate3d(-6px, 0, 0) scale(0.95);
}

[data-popper-placement=right-start] > .md-popover-enter,
[data-popper-placement=right-start] > .md-popover-leave {
  transform-origin: top left;
}
[data-popper-placement=right-start] > .md-popover-enter,
[data-popper-placement=right-start] > .md-popover-leave-active {
  transform: translate3d(-6px, 0, 0) scale(0.95);
}

[data-popper-placement=right-end] > .md-popover-enter,
[data-popper-placement=right-end] > .md-popover-leave {
  transform-origin: bottom left;
}
[data-popper-placement=right-end] > .md-popover-enter,
[data-popper-placement=right-end] > .md-popover-leave-active {
  transform: translate3d(-6px, 0, 0) scale(0.95);
}

[data-popper-placement=top] > .md-popover-enter,
[data-popper-placement=top] > .md-popover-leave {
  transform-origin: bottom center;
}
[data-popper-placement=top] > .md-popover-enter,
[data-popper-placement=top] > .md-popover-leave-active {
  transform: translate3d(0, 6px, 0) scale(0.95);
}

[data-popper-placement=top-start] > .md-popover-enter,
[data-popper-placement=top-start] > .md-popover-leave {
  transform-origin: bottom left;
}
[data-popper-placement=top-start] > .md-popover-enter,
[data-popper-placement=top-start] > .md-popover-leave-active {
  transform: translate3d(0, 6px, 0) scale(0.95);
}

[data-popper-placement=top-end] > .md-popover-enter,
[data-popper-placement=top-end] > .md-popover-leave {
  transform-origin: bottom right;
}
[data-popper-placement=top-end] > .md-popover-enter,
[data-popper-placement=top-end] > .md-popover-leave-active {
  transform: translate3d(0, 6px, 0) scale(0.95);
}

[data-popper-placement=bottom] > .md-popover-enter,
[data-popper-placement=bottom] > .md-popover-leave {
  transform-origin: top center;
}
[data-popper-placement=bottom] > .md-popover-enter,
[data-popper-placement=bottom] > .md-popover-leave-active {
  transform: translate3d(0, -6px, 0) scale(0.95);
}

[data-popper-placement=bottom-start] > .md-popover-enter,
[data-popper-placement=bottom-start] > .md-popover-leave {
  transform-origin: top left;
}
[data-popper-placement=bottom-start] > .md-popover-enter,
[data-popper-placement=bottom-start] > .md-popover-leave-active {
  transform: translate3d(0, -6px, 0) scale(0.95);
}

[data-popper-placement=bottom-end] > .md-popover-enter,
[data-popper-placement=bottom-end] > .md-popover-leave {
  transform-origin: top right;
}
[data-popper-placement=bottom-end] > .md-popover-enter,
[data-popper-placement=bottom-end] > .md-popover-leave-active {
  transform: translate3d(0, -6px, 0) scale(0.95);
}

[data-popper-placement] > .md-popover-enter.md-popover-enter-active {
  opacity: 1;
  transform: none;
}