[x-cloak] { display: none !important; }

.wep-modal {
    position: relative;
    z-index: 40;
}

.wep-modal-container {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow-y: auto;
    z-index: 40;
}

.wep-modal-inner-container {
    display: flex;
    min-height: 100%;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

@media (min-width: 640px) {
    .wep-modal-inner-container {
        align-items: center;
    }
}

.wep-modal-backdrop,
.wep-slide-over-backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(107, 114, 128, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.wep-modal-content {
    width: 100%;
    margin: 1rem;
    position: relative;
    transform: matrix(1, 0, 0, 1, 0, 0);
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: rgb(255, 255, 255);
    text-align: left;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

@media (min-width: 640px) {
    .wep-modal-content {
        margin: 0px;
    }
}

.wep-modal-content > div {
    height: 100%;
}

.wep-modal-content.wep-modal-content-fullscreen {
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    margin: 0px;
    width: 100%;
}

.wep-modal-backdrop.enter,
.wep-slide-over-backdrop.enter {
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.wep-modal-backdrop.start,
.wep-modal-backdrop.leave.end,
.wep-slide-over-backdrop.start,
.wep-slide-over-backdrop.leave.end {
    opacity: 0;
}

.wep-modal-backdrop.end,
.wep-modal-backdrop.leave.start,
.wep-slide-over-backdrop.end,
.wep-slide-over-backdrop.leave.start {
    opacity: 1;
}

.wep-modal-backdrop.leave,
.wep-slide-over-backdrop.leave {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.wep-modal-content.enter {
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.wep-modal-content.start,
.wep-modal-content.leave.end {
    opacity: 0;
    transform: matrix(0.95, 0, 0, 0.95, 0, 0);
}

.wep-modal-content.end,
.wep-modal-content.leave.start {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

.wep-modal-content.leave {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.wep-modal-content-xs,
.wep-slide-over-content-xs {
    max-width: 20rem;
}

.wep-modal-content-sm,
.wep-slide-over-content-sm {
    max-width: 24rem;
}

.wep-modal-content-md,
.wep-slide-over-content-md {
    max-width: 28rem;
}

.wep-modal-content-lg,
.wep-slide-over-content-lg {
    max-width: 32rem;
}

.wep-modal-content-xl,
.wep-slide-over-content-xl {
    max-width: 36rem;
}

.wep-modal-content-2xl,
.wep-slide-over-content-2xl {
    max-width: 42rem;
}

.wep-modal-content-3xl,
.wep-slide-over-content-3xl {
    max-width: 48rem;
}

.wep-modal-content-4xl,
.wep-slide-over-content-4xl {
    max-width: 56rem;
}

.wep-modal-content-5xl,
.wep-slide-over-content-5xl {
    max-width: 64rem;
}

.wep-modal-content-6xl,
.wep-slide-over-content-6xl {
    max-width: 72rem;
}

.wep-modal-content-7xl,
.wep-slide-over-content-7xl {
    max-width: 80rem;
}

.wep-slide-over {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 40;
}

.wep-slide-over.wep-slide-over-top {
    z-index: 50;
}

.wep-slide-over-container-backdrop {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.wep-slide-over-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
}

.wep-slide-over-container-inner {
    pointer-events: none;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    max-width: 100%;
    padding-left: 2.5rem;
}

.wep-slide-over-container-inner-wrap {
    pointer-events: auto;
    width: 100vw;
}

.wep-slide-over-container-inner-wrap.enter,
.wep-slide-over-container-inner-wrap.leave{
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.wep-slide-over-container-inner-wrap.enter.start,
.wep-slide-over-container-inner-wrap.leave.end{
    transform: matrix(1, 0, 0, 1, 1077, 0);
}

.wep-slide-over-container-inner-wrap.enter.end,
.wep-slide-over-container-inner-wrap.leave.start{
    transform: matrix(1, 0, 0, 1, 0, 0) ;
}

.wep-slide-over-container-inner-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow-y: scroll;
    background-color: rgb(255, 255, 255);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}