.slideframe {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

.slideframe--visible {
  pointer-events: auto !important;
}

.slideframe-body--noscroll {
  overflow: hidden !important;
}

.slideframe-body--loading {}

.slideframe-body--loading * {
  cursor: wait !important;
}

.slideframe-generalclose {
  display: block !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: rgba(0, 0, 0, .6) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: all .4s ease-out !important;
  z-index: 99998 !important;
}

.slideframe--visible .slideframe-generalclose {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.slideframe-container {
  width: 95% !important;
  height: 90% !important;
  position: fixed !important;
  bottom: -150% !important;
  left: 50% !important;
  transition: bottom 1s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  box-shadow: rgba(0, 0, 0, .4) 0px 0px 4px 0px !important;
  z-index: 99999 !important;
  transform: translate(-50%, 50%);
  border-radius: 8px;
  overflow: hidden;
}

.slideframe--visible .slideframe-container {
  bottom: 50% !important;
}

.slideframe-container-titlebar {
  height: 40px !important;
  line-height: 40px !important;
  background: #ffffffa1 !important;
  backdrop-filter: blur(20px);
  color: #000 !important;
  -webkit-font-smoothing: antialiased !important;
  display: flex !important;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-size: 18px !important;
  letter-spacing: initial !important;
  text-transform: initial !important;
}

.slideframe-container-titlebar strong {
  color: inherit !important;
  font: inherit !important;
  font-weight: 600 !important;
}

.slideframe-container-frame {
  border: none !important;
  width: 100% !important;
  height: calc(100% - 40px) !important;
  background: #fff !important;
}

.slideframe-container-titlebar-title {
  flex-grow: 1 !important;
  text-align: center !important;
  padding: 0 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.slideframe-container-titlebar-title:before {
  content: '\25CF';
  position: absolute !important;
  margin-left: -28px !important;
  animation: sl-circle infinite .8s !important;
  opacity: 0 !important;
  transition: opacity .4s !important;
  color: #B0FD45 !important;
}

.slideframe-body--loading .slideframe-container-titlebar-title:before {
  opacity: 1 !important;
  transform-origin: 50% 50% !important;
}

@keyframes sl-circle {

  0%,
  100% {
    transform: scale(.7);
  }

  50% {
    transform: scale(1.2)
  }
}


.slideframe-btn,
.slideframe-btn:hover {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  font-size: 24px !important;
  font-family: inherit !important;
  color: inherit !important;
  width: 40px !important;
  background: none !important;
  border: none !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border-radius: 0px !important;
  line-height: inherit !important;
}

.slideframe-container-titlebar strong {
  color: black !important;
}

@media (max-width: 500px) {
  .slideframe-container {
    width: 90% !important;
  }

  .slideframe-container-titlebar {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    /* flex-direction: row-reverse !important; */
  }
}