@charset "utf-8";

.overlay { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 1000; }

.overlay__bg { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.8); }

.overlay__container { position: absolute; z-index: 100; width: 100%; max-width: 480px; inset: 50% auto auto 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px 5px; }

@media screen and (max-width: 760px) {
  .overlay__container { max-width: none; }
}

.overlay__close { position: absolute; top: -24px; left: auto; right: -24px; }

@media screen and (max-width: 760px) {
  .overlay__close { right: 10px; top: -34px; }
}

.overlay__close svg { display: block; width: 18px; height: 18px; stroke: rgb(255, 255, 255); stroke-width: 5px; }

@media screen and (max-width: 760px) {
  .overlay__close svg { width: 14px; height: 14px; }
}

.overlay__content { background: rgb(255, 255, 255); height: auto; margin-left: 0px; max-height: calc(-60px + 100vh); margin-bottom: -40px; }

.overlay--wide .overlay__container { max-width: 620px; }

.overlay--extra-wide .overlay__container { max-width: 850px; }

.overlay--takeover .overlay__bg { background: rgb(241, 240, 236); }

.overlay--takeover .overlay__container { box-shadow: none; max-width: none; height: 100%; }

.overlay--takeover .overlay__content { background-color: transparent; height: auto; max-height: 100%; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); right: 0px; margin-left: 0px; overflow: auto; }

.overlay--takeover .overlay__close { position: absolute; top: 42px; right: 42px; left: auto; z-index: 10; }

@media screen and (max-width: 1080px) {
  .overlay--takeover .overlay__close { top: 0px; right: 0px; }
}

.overlay--takeover .overlay__close svg { stroke: rgb(0, 0, 0); }

.overlay--sidebar .overlay__bg { background: rgba(241, 240, 236, 0.8); }

.overlay--sidebar .overlay__container { inset: 0px 0px 0px auto; width: 100%; transform: none; }

@media screen and (max-width: 760px) {
  .overlay--sidebar .overlay__container { max-width: calc(100% - 42px); }
}

@media screen and (max-width: 640px) {
  .overlay--sidebar .overlay__container { max-width: calc(100% - 32px); }
}

.overlay--sidebar .overlay__content { height: 100%; overflow: auto; max-height: 100vh; }

.overlay--sidebar .overlay__close { top: 24px; left: -42px; right: auto; }

@media screen and (max-width: 760px) {
  .overlay--sidebar .overlay__close { top: 13px; left: -32px; }
}

.overlay-transition--fade .overlay__bg { opacity: 0; transition: opacity 0.3s; }

.overlay-transition--fade.overlay--active .overlay__bg, .overlay-transition--fade.overlay--cross .overlay__bg, .overlay-transition--fade.overlay--opening .overlay__bg { opacity: 1; }

.overlay-transition--fade .overlay__container { opacity: 0; transition: opacity 0.3s; }

.overlay-transition--fade.overlay--active .overlay__container, .overlay-transition--fade.overlay--opening .overlay__container { opacity: 1; }