:root {
    --bdr-big-wdth: 6px;
    --pm-success: #059669;
    --pm-info: #2563eb;
    --pm-warning: #d97706;
    --pm-danger: #dc2626;
    --pm-default: #333333;
}
.pm-main-container {
  position: fixed;
  transition: all 1s ease-in-out;
  max-width: 24em;
  width: auto;
  z-index: 99999
}
@media only screen and (max-width:480px) {
  .pm-main-container {
    left: .5em;
    right: .5em;
    width: auto
  }
}
.pm-main-container[data-position^=top-] {
  top: .5em
}
.pm-main-container[data-position^=bottom-] {
  bottom: .5em
}
.pm-main-container[data-position$=-right] {
  right: .5em
}
.pm-main-container[data-position$=-right] .pm-container {
  transform: translateX(110%)
}
.pm-main-container[data-position$=-left] {
  left: .5em
}
.pm-main-container[data-position$=-left] .pm-container {
  transform: translateX(-110%)
}
.pm-main-container[data-position$=-center] {
  left: 50%;
  transform: translateX(-50%)
}
.pm-main-container[data-position=top-center] .pm-container {
  transform: translateY(-100vh)
}
.pm-main-container[data-position=bottom-center] .pm-container {
  transform: translateY(100vh)
}
.pm-main-container .pm-container {
  transition: transform .3s ease-in-out
}
.pm-main-container .pm-container .pm-progress-bar {
  display: flex;
  height: 2px;
  margin-left: -1px
}
.pm-main-container .pm-container.pm-rtl {
  direction: rtl
}
.pm-main-container .pm-container.pm-rtl .pm-progress-bar {
  margin-left: auto;
  margin-right: -1px
}
.pm-main-container .pm-container.pm-success .pm-icon {
  color: var(--pm-success)
}
.pm-main-container .pm-container.pm-success .pm-progress-bar .pm-progress {
  background-color: var(--pm-success)
}
.pm-main-container .pm-container.pm-success .pm-progress-bar {
  background-color: #6dface
}
.pm-main-container .pm-container.pm-popup.pm-success,
.pm-main-container .pm-container.pm-popup.pm-success:not(.pm-rtl) {
  border: 1px solid var(--pm-success);
  border-left: var(--bdr-big-wdth) solid var(--pm-success)
}
.pm-main-container .pm-container.pm-popup.pm-success.pm-rtl {
  border: 1px solid var(--pm-success);
  border-right: var(--bdr-big-wdth) solid var(--pm-success)
}
.pm-main-container .pm-container.pm-popup.pm-success .pm-content .pm-close,
.pm-main-container .pm-container.pm-popup.pm-success .pm-title {
  color: var(--pm-success)
}
.pm-main-container .pm-container.pm-info .pm-icon {
  color: var(--pm-info)
}
.pm-main-container .pm-container.pm-info .pm-progress-bar .pm-progress {
  background-color: var(--pm-info)
}
.pm-main-container .pm-container.pm-info .pm-progress-bar {
  background-color: #e0e9fc
}
.pm-main-container .pm-container.pm-popup.pm-info,
.pm-main-container .pm-container.pm-popup.pm-info:not(.pm-rtl) {
  border: 1px solid var(--pm-info);
  border-left: var(--bdr-big-wdth) solid var(--pm-info)
}
.pm-main-container .pm-container.pm-popup.pm-info.pm-rtl {
  border: 1px solid var(--pm-info);
  border-right: var(--bdr-big-wdth) solid var(--pm-info)
}
.pm-main-container .pm-container.pm-popup.pm-info .pm-content .pm-close,
.pm-main-container .pm-container.pm-popup.pm-info .pm-title {
  color: var(--pm-info)
}
.pm-main-container .pm-container.pm-warning .pm-icon {
  color: var(--pm-warning)
}
.pm-main-container .pm-container.pm-warning .pm-progress-bar .pm-progress {
  background-color: var(--pm-warning)
}
.pm-main-container .pm-container.pm-warning .pm-progress-bar {
  background-color: #fdd8ae
}
.pm-main-container .pm-container.pm-popup.pm-warning,
.pm-main-container .pm-container.pm-popup.pm-warning:not(.pm-rtl) {
  border: 1px solid var(--pm-warning);
  border-left: var(--bdr-big-wdth) solid var(--pm-warning)
}
.pm-main-container .pm-container.pm-popup.pm-warning.pm-rtl {
  border: 1px solid var(--pm-warning);
  border-right: var(--bdr-big-wdth) solid var(--pm-warning)
}
.pm-main-container .pm-container.pm-popup.pm-warning .pm-content .pm-close,
.pm-main-container .pm-container.pm-popup.pm-warning .pm-title {
  color: var(--pm-warning)
}
.pm-main-container .pm-container.pm-error .pm-icon {
  color: var(--pm-danger)
}
.pm-main-container .pm-container.pm-error .pm-progress-bar .pm-progress {
  background-color: var(--pm-danger)
}
.pm-main-container .pm-container.pm-error .pm-progress-bar {
  background-color: #f8d6d6
}
.pm-main-container .pm-container.pm-popup.pm-error,
.pm-main-container .pm-container.pm-popup.pm-error:not(.pm-rtl) {
  border: 1px solid var(--pm-danger);
  border-left: var(--bdr-big-wdth) solid var(--pm-danger)
}
.pm-main-container .pm-container.pm-popup.pm-error.pm-rtl {
  border: 1px solid var(--pm-danger);
  border-right: var(--bdr-big-wdth) solid var(--pm-danger)
}
.pm-main-container .pm-container.pm-popup.pm-error .pm-content .pm-close,
.pm-main-container .pm-container.pm-popup.pm-error .pm-title {
  color: var(--pm-danger)
}
.pm-main-container .pm-container.pm-default .pm-icon {
  color: var(--pm-default)
}
.pm-main-container .pm-container.pm-default .pm-progress-bar .pm-progress {
  background-color: var(--pm-default)
}
.pm-main-container .pm-container.pm-default .pm-progress-bar {
  background-color: #bdbdbd
}
.pm-main-container .pm-container.pm-popup.pm-default,
.pm-main-container .pm-container.pm-popup.pm-default:not(.pm-rtl) {
  border: 1px solid var(--pm-default);
  border-left: var(--bdr-big-wdth) solid var(--pm-default)
}
.pm-main-container .pm-container.pm-popup.pm-default.pm-rtl {
  border: 1px solid var(--pm-default);
  border-right: var(--bdr-big-wdth) solid var(--pm-default)
}
.pm-main-container .pm-container.pm-popup.pm-default .pm-content .pm-close,
.pm-main-container .pm-container.pm-popup.pm-default .pm-title {
  color: var(--pm-default)
}
.pm-main-container .pm-container.pm-popup .pm-content {
  padding: .75em;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.pm-main-container .pm-container .pm-icon {
  border-radius: 50%;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  margin: 0;
  position: relative;
  transition: all 1s;
  flex: 0 0 auto;
  min-width: 1em;
  width: auto;
  height: auto;
  border-radius: 50%;
  line-height: 1;
}
.pm-main-container .pm-container .pm-text {
  flex: 1 0 0%;
  max-width: 500px;
  overflow-wrap: break-word;
}
.pm-main-container .pm-container .pm-close {
  flex: 0 0 auto;
  width: auto;
}
.pm-main-container .pm-container.pm-popup {
  background-color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  color: #4b5563;
  cursor: pointer;
  line-height: 1.2;
  margin-top: 15px;
  margin-right: 15px;
  word-break: break-word;
  transform: translateX(111%);
  opacity: 0;
}
.pm-main-container .pm-container.pm-popup.pm-show {
    transform: translateX(0);
    opacity: 1;
}
.pm-main-container .pm-container.pm-popup.pm-rtl {
  border-radius: 0 .375em .375em 0
}
.pm-main-container .pm-container.pm-popup:not(.pm-rtl) {
  border-radius: 3px;
}
.pm-main-container .pm-container.pm-popup .pm-icon {
  font-size: 3em
}
.pm-main-container .pm-container.pm-popup .pm-message,
.pm-main-container .pm-container.pm-popup .pm-title {
  display: block;
  line-height: 1.4;
  margin-left: 1em;
  margin-right: 1em
}
.pm-main-container .pm-container.pm-popup .pm-message:first-letter, .pm-main-container .pm-container.pm-popup .pm-title:first-letter {
  text-transform: uppercase
}
.pm-main-container .pm-container.pm-popup .pm-title {
  font-size: 1em;
  font-weight: 700
}
.pm-main-container .pm-container.pm-popup .pm-message {
  font-size: .875em;
  margin-top: .25em
}

.pm-main-container .pm-container.pm-popup .pm-content .pm-close {
  border: none;
  background: none;
  font-size: 1.8em;
  opacity: 0.6;
  font-weight: 500;
}
.pm-main-container .pm-container.pm-popup .pm-content .pm-close:hover {
  opacity: 1;
}