@import url(https://fonts.googleapis.com/css2?family=Rubik&family=Comic+Neue&family=Heebo&family=Comfortaa&family=Arimo&family=Amatic+SC&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap);
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.toolbar {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  z-index: 10;
}

.editor_toolbar {
  display: flex;
  flex-flow: row;
  direction: rtl;
}

.card_maker .editor_button.camera_button {
  background-image: url(/static/media/camera_icon.6d4a2abb..svg);
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: center 45%;
}


.draggable {
  --title-width: 40px;
  --frame-width: 10px;
  position: absolute;
  z-index: 100;
  width: 80%;
}
.draggable .handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  box-sizing: border-box;
  border-radius: 10px;
  pointer-events: all;
}
.draggable .handle > div {
  position: absolute;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}
.draggable .handle > div.top {
  height: var(--title-width);
  width: 100%;
  top: 0;
  left: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.5333333333);
  border-left: 1px solid rgba(0, 0, 0, 0.5333333333);
  border-right: 1px solid rgba(0, 0, 0, 0.5333333333);
}
.draggable .handle > div.bottom {
  height: var(--frame-width);
  width: 100%;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5333333333);
  border-left: 1px solid rgba(0, 0, 0, 0.5333333333);
  border-right: 1px solid rgba(0, 0, 0, 0.5333333333);
}
.draggable .handle > div.left {
  height: calc(100% - var(--title-width) - var(--frame-width));
  width: var(--frame-width);
  bottom: var(--frame-width);
  left: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.5333333333);
}
.draggable .handle > div.right {
  height: calc(100% - var(--title-width) - var(--frame-width));
  width: var(--frame-width);
  bottom: var(--frame-width);
  right: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.5333333333);
}
.draggable.focus {
  z-index: 10000;
}
.draggable.focus .handle {
  display: block;
}
.draggable .toolbar {
  position: absolute;
  width: 100%;
  height: var(--title-width);
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 20;
}
.draggable .toolbar > button {
  pointer-events: auto;
}
.draggable input, .draggable textarea, .draggable text-clone {
  position: relative;
  width: calc(100% - 2 * var(--frame-width) - 4px);
  z-index: 20;
  background-color: transparent;
  font-size: 20px;
  height: 20px;
  color: white;
  border: none;
  text-align: center;
  resize: none;
  outline: none;
  overflow: hidden;
  padding-top: 10px;
  font-weight: 600;
  margin: var(--title-width) var(--frame-width) var(--frame-width) var(--frame-width);
}


.card_maker {
  --h: 100vh;
  --ar: calc(100vw / var(--h));
  --card-height: 1560;
  --card-width: 1080;
  --card-ar: calc(var(--card-width) / var(--card-height));
  --maker-width: min(calc(100vh * var(--card-ar)), 100vw);
  height: 100%;
  max-height: 100vh;
  width: var(--maker-width);
  background-color: black;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.card_maker img {
  width: var(--maker-width);
  height: calc(var(--maker-width) / var(--card-ar));
  object-fit: cover;
  transform: scaleX(-1);
}
.card_maker img.flipped {
  transform: none;
}
.card_maker #content {
  position: relative;
  overflow: hidden;
}
.card_maker > button {
  position: absolute;
  top: calc(100vh - 50px);
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
}
.card_maker .bottom_bar > div.send_button {
  background-image: url(/static/media/send_icon.2e722cff..webp);
  background-size: 47%;
  background-repeat: no-repeat;
  background-position: 46% 56%;
  background-color: #0F75BC;
  right: 0;
  left: auto;
  transform: translate(-50%, -50%) rotate(45deg);
}
.card_maker #close {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.card_maker #render_preloader {
  color: white;
  font-size: 30px;
  position: absolute;
  z-index: 100;
  width: 100%;
  top: 50%;
  font-weight: bold;
}
.card_maker .camera_component {
  height: 100%;
  width: 100%;
  position: relative;
}
.card_maker .camera_component input[type=file] {
  display: none;
}
.card_maker .camera_component .bottom_bar > div.flip_button {
  right: 20px;
  left: auto;
  transform: translateY(-50%);
  background-image: url(/static/media/flip_camera_icon.1efcb0db..svg);
  background-size: 70%;
  transition: transform 0.3s;
}
.card_maker .camera_component .bottom_bar > div.flip_button :hover {
  transform: translateY(-50%) rotate(180deg);
}
.card_maker .camera_component .bottom_bar > div.gallery_button {
  left: 20px;
  transform: translateY(-50%);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAHYAAAB2AH6XKZyAAAE9WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OTc3NywgMjAyMy8wNi8yNS0yMzo1NzoxNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjAgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA4LTA3VDIyOjE1OjQwKzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wOC0wN1QyMjoxNjoyNiswMzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wOC0wN1QyMjoxNjoyNiswMzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzA2ZmZjZjItMjZlMy00MGE5LWI3Y2ItYmQ5NjlkYjA0Nzc2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMwNmZmY2YyLTI2ZTMtNDBhOS1iN2NiLWJkOTY5ZGIwNDc3NiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjMwNmZmY2YyLTI2ZTMtNDBhOS1iN2NiLWJkOTY5ZGIwNDc3NiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MzA2ZmZjZjItMjZlMy00MGE5LWI3Y2ItYmQ5NjlkYjA0Nzc2IiBzdEV2dDp3aGVuPSIyMDI0LTA4LTA3VDIyOjE1OjQwKzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMCAoTWFjaW50b3NoKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5kg5XvAAADvElEQVR42u2bTUgUYRiAZ3UJpVLCguwgJFJQEYH9Z53MumQdWq0IKooOYWSHqNCIiEKsQxeDJIgsi4Lq0s+hX4iCfkyQik7SoR/NwJ+wzdSeDvMtLLOzu/PNzLoz3+4L72m+nf3eZ3bev+9dDdAyWbUsgCyALIAsAJs6DdgNtAA3Pa7twBlgHZDjBoA6YAB/ShdQ7gRAM/6XYWC1HQCbUEd6gEJZAF2oJQ0yxpfFuUkvcMvjTvA+MGay9w4ZAOvjAJjrk5B3zGTvQzI3CMUB4JeYH3K6eRkA04H9wCWhdUBRpgAIAYMm6waAzaoDqIrjbCIyBlSqCiAAfLIQej6KtcoBWCgRfxeoCKBaAsAGFQGskQBQ4cCQAmA7cFJEmjKvAMgHhiwYPwjk2TS+UuTwRsd61ljmpisKNFgAcNSm8cuBcIL7tngBQK5oPsSTKxaelJnOAr5YgFvvJoCAzUQoAGwFngG/xGvxFNhiM/zlA28s+pZxUbK7AmCJB2qBAHBDssT9DSx1A8AJDwA4bbPO/waUOAFQKurodAKoAf45aHa8BwrtAqhPM4DF4qfsVB4AQTsAHrkIINI+bwIOAfOSrC8BvrvY9mqRBVAAjLgEoBroN/HU50TINK6fAnSmoPd3UAZAjbjmFEAtMJpgU9cMEHKAOylqfo6LHMTS5ttcABBKYjxR3xF06PEdiWaSyfU5BFBr0fiIXAd2OPT4rgGoMDwdWQAhSePTLkYATQ4A+M54MwAfbALwpfGYZH/YAOBb440ADtgE4FvjjQAe2gSACgAi2V/GAgjFSVIyBsBlCwA2Kmj/SCQH7zW5eNekQ6SadGvAyjgXOw0AgsBPxQC0JipCRoGpBgjHFTJ+DJivAR0JFm0jtkP7WhEAjYgpseEEi14R28ouAh77/Mk3RuzSSH6ctRPzdnUIuEfsUZUnvT3QDbRiaMlpwPMkHx4CFqHwrPAeCwR7gGWqAggCLy1ACKOPmuWpBiDi2F5YfJ9+oM8LrwWKo3p6vh+XzwV2CZ8wqkioWyEDIFonow8jNAFv09WwdChfsXAUb/WnMlOEvQtYO6f3gpyXfQVktBTYKyrGQY8CqEolAGORVA4cFl2lvx4wfgCYNFEAzM73ov1HOqTdThRIlRYL/9E2geV0yEsAojUH/ez/CPoRfDgFxodNynjP/m8wXzirZuAd+imuU7lqNxHygs5Anya7CHy2YXw/MNvPAIw6B9gH3CZ20MIofcAqJ6mw1zUXfVq0EXiCPkbzB/088xT6v1Sk7/sfi6X3IJ6nnREAAAAASUVORK5CYII=);
  background-size: 57%;
}
.card_maker .camera_component .bottom_bar > div.capture_button {
  background-color: white;
  width: 60.5px;
  height: 60.5px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2666666667);
}
.card_maker .camera_component .bottom_bar > div.capture_button:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 2px solid white;
  transform: scale(1.3);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2666666667);
}
.card_maker .camera_component > div:first-child {
  box-sizing: border-box;
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.0666666667);
  z-index: 8;
  width: var(--maker-width);
  height: calc(var(--maker-width) / var(--card-ar));
}
.card_maker .camera_component > div:first-child > div:first-child {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
.card_maker .camera_component > div:first-child > div:first-child video {
  height: calc(var(--maker-width) / var(--card-ar));
  width: var(--maker-width);
}
.card_maker .camera_component .camera_warning {
  position: absolute;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  z-index: 100;
  color: white;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card_maker .camera_component .camera_popup {
  position: absolute;
  padding: 15px;
  width: calc(100% - 20px);
  max-width: 400px;
  margin: 15px auto;
  box-sizing: border-box;
  background-color: white;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
}


.toolbar {
  z-index: 2000000;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.toolbar button, .toolbar input {
  pointer-events: all;
}
.toolbar input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  width: 260px;
  border-radius: 5px;
  background: white;
  position: absolute;
  left: -110px;
  top: 50%;
  transform-origin: top center;
  transform: rotate(-90deg) translateY(-50%);
}
.toolbar input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
  height: 16px;
  width: 16px;
  color: white;
  display: block;
  border-radius: 50%;
  margin-top: 0px;
}
.toolbar .sidebar {
  position: absolute;
  right: 0;
  top: 0;
  height: fit-content;
  display: flex;
  flex-flow: column;
  padding: 5px;
}
.toolbar .sidebar > div.switcher {
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: 15px;
  overflow: visible;
  position: relative;
}
.toolbar .sidebar > div.switcher::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 130%;
  box-sizing: border-box;
  border-bottom: 2px solid white;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.toolbar .colorbar > div.picker {
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.toolbar .colorbar > div.picker.selected {
  transform: scale(1.15);
  border: 4px solid white;
}
.toolbar .colorbar > div.switcher {
  background: rgba(0, 0, 0, 0.5) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGumlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OTc3NywgMjAyMy8wNi8yNS0yMzo1NzoxNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjAgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA3LTMxVDE1OjA0OjEzKzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wOC0wN1QxMzozMDo1MCswMzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wOC0wN1QxMzozMDo1MCswMzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MmI3ZDM4MDUtOWY4ZS00MGQzLWI5ZTMtNDFiZmRkYTk0OWJiIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6OGJkNGE5YzctOWU3Mi00MDQ0LThjZWQtMmJiNThkMWUzOGQ4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDJkYjZlZDMtMDNjMi00OGM4LTgzMDctNzFlYmE5NTI5NDI5Ij4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJBYSIgcGhvdG9zaG9wOkxheWVyVGV4dD0iQWEiLz4gPC9yZGY6QmFnPiA8L3Bob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyZGI2ZWQzLTAzYzItNDhjOC04MzA3LTcxZWJhOTUyOTQyOSIgc3RFdnQ6d2hlbj0iMjAyNC0wNy0zMVQxNTowNDoxMyswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjAgKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MmI3ZDM4MDUtOWY4ZS00MGQzLWI5ZTMtNDFiZmRkYTk0OWJiIiBzdEV2dDp3aGVuPSIyMDI0LTA4LTA3VDEzOjMwOjUwKzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5H5qGuAAAC10lEQVR42u2b7ZGEIAyGtwVasAVboAVbsIW0YAu0QAu2YAu0sC3kfhzO7TpEAyIwR5jJnx3XXR/z8SboCxFfYjwTCAJLYAksgSWwxASCwBJYAktg3TeFiAYRHSIOAusc1IZ/axVYPFD7mgQWDxQiohVY32bwfCmB9WsLXi8tsBBn5K3uYY0EmHfgs7FnWMrrqOPavFw4wus6wa+ERw1SDb8NTvLSFPh87hUWlafgpDIOPcKihOdnS3PMY67Xdmch8tQuOEP5aukR1kSE33ShuabeYClCOy0Mz1O9wQpBcAEQW0BzdTX800T4jQHvazZflYBFqXRgQp16grUQ7QxXqKpeYI3M8KPmWa4lUE/D2pjhRx1veoEFEeG3WwzYfwOL0lQ6smLqHmCZBAkQUu6x3cHie8yjQa7BYYmk7hhVDRLFKBBejMT/0C3BWhO10ho57FP+mJQ1twBruhi9xFTOq+RuiemF8d/dzTKa9yqw3I2hXczFhPLbmcwYAjfD1YQFCaVfn4yRhwiv4sznhxzV9k7IaZ87QlLh7Y/Zw8H4kHTMvGJPgC2BDY6UfAolYCkss2JApHi/LeVZUAiYeRDWWjJnmQc9Ksfm6uBTxZ4KtpqwFEMQbgclDR/5biRyyXy4WO6AEfy5NuZNKQoLTnZp7ghZHeE5JkLBV4XlMk0JXMIDINycuflEDoGbspaUDjm86pXQQJsTTwHvmUNLCd5mnD3FwAKiYg4tV8N3Jq96RU4b3jdukq0BS2eeaHIvQN98ZsvVgAUZvepYDWNgrTducBVYOTZBLfN8+sZW2dYCrBy928wMaZXQDqmL6vk4rDnzo4ufnQAkyIbVSxl1EKzzxZSjCKz94nLuvoz+nMD4bW47cywGtpZ0aPW1FQrUWHvq0MLLBu4CEnyE51Rj+NeajR7cPtWY8aEXDOQNVYElsASWwBJYYgJBYAksgSWwBJaYQBBYAqu6/QDpWHmpxcz7xQAAAABJRU5ErkJggg==) no-repeat center;
  background-size: 84%;
}
.toolbar .fontbar > div.switcher {
  background: rgba(0, 0, 0, 0.5) url(/static/media/palette_icon.a5b2cd1c..svg) no-repeat center;
  background-size: 70%;
}


#playroom {
  position: absolute !important;
  width: 100%;
  height: 100%;
}
#playroom canvas {
  flex: 1 1;
  height: 100%;
  width: 100%;
  display: block;
}

#selection_bar {
  position: absolute;
  height: 150px;
  width: 100%;
  z-index: 10;
  background-color: white;
}


@charset "UTF-8";
.App {
  text-align: center;
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  width: 100vw;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.playroom_container {
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.vid .playroom_container {
  min-height: 60%;
}
.focus.section_1 .playroom_container {
  min-height: 0 !important;
  max-height: 0 !important;
  height: 0 !important;
}

.video_container {
  max-height: 40%;
  background: white;
  position: relative;
  overflow: hidden;
  display: none;
}
.vid .video_container {
  display: block;
}
.focus.section_1 .video_container {
  min-height: 100% !important;
  max-height: 100% !important;
  height: 100% !important;
}
.video_container.fs {
  min-height: 100% !important;
  position: absolute;
  width: 100vw;
  height: auto !important;
  z-index: 1000;
  top: 0 !important;
  bottom: 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ui_screen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 100;
}

.bottom_bar {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  color: white;
  text-align: center;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  z-index: 9;
}
.bottom_bar > div {
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.bottom_bar > div.add_card_button {
  background-color: #0F75BC;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 4px 6px rgba(16, 40, 56, 0.7);
}
.bottom_bar > div.add_card_button:after {
  position: absolute;
  content: "+";
  color: white;
  font-size: 46px;
  top: 50%;
  left: 50%;
  display: block;
  height: auto;
  font-family: Rubik;
  line-height: 28px;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

.editor_button {
  height: 40px;
  width: 40px;
  line-height: 38px;
  font-size: 21px;
  margin: 5px;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  cursor: hand;
  -webkit-tap-highlight-color: transparent;
  background: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  color: white;
  text-align: center;
}
.editor_button.selected {
  background-color: white;
  color: black;
}

.scroller {
  overflow-y: scroll;
}

#manage_btn {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 45px;
  line-height: 43px;
  width: 45px;
  z-index: 10;
  background-color: white;
}
#manage_btn:after {
  content: "☰";
  font-size: 25px;
  color: #3d3d3d;
}

button.text_button {
  color: #0F75BC;
  height: 36px;
  width: auto;
  outline: none;
  border: 1px solid #0F75BC;
  box-sizing: border-box;
  background-color: white;
  border-radius: 18px;
  padding: 0 15px;
  font-size: 16px;
  font-weight: bold;
}
button.text_button.default {
  background-color: #0F75BC;
  color: white;
  border: none;
}
button.text_button.theme {
  background: #514DC7 linear-gradient(90deg, #33309F 50%, #8681F5 100%);
  color: white;
  border: none;
}
button.text_button[disabled] {
  background-color: #a9a9a9;
}
button.text_button.full {
  width: 100%;
  max-width: 500px;
  margin: 10px auto 0;
  display: block;
}

.hidden {
  display: none;
}

body.ltr .dir, body.ltr .MuiDialog-paper {
  direction: ltr;
}
body.ltr .align {
  text-align: left;
}
body.ltr .align-opp {
  text-align: right;
}
body.rtl .dir, body.rtl .MuiDialog-paper {
  direction: rtl;
}
body.rtl .align {
  text-align: right;
}
body.rtl .align-opp {
  text-align: left;
}
body.rtl .MuiList-root {
  direction: rtl;
}
body.rtl .MuiButtonBase-root {
  font-size: 15px;
}

.center {
  position: absolute;
  height: auto;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg_cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5333333333);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 8;
}

/* MUI */
.MuiTabs-root {
  background-color: white;
  min-height: 45px;
}

.MuiTabs-indicator {
  background-color: #0F75BC;
}

.MuiButtonBase-root {
  padding: 0 0 0 0;
  min-height: 45px;
  font-size: 13px;
}
.MuiButtonBase-root.MuiTab-root.Mui-selected {
  color: #0F75BC;
}

.MuiSwitch-switchBase {
  padding: 9px;
  min-height: 0;
}

.MuiSnackbarContent-action {
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
}


#welcome {
  font-family: Rubik;
}
#welcome .main {
  width: 100%;
  margin-top: 120px;
  --top-padding: min(20vw, 90px);
  height: calc(100% - 120px);
  background-image: url(/static/media/bg1.c8cafbfd..jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  position: relative;
  padding: var(--top-padding) 10px;
  box-sizing: border-box;
}
#welcome .main .avatar {
  position: absolute;
  width: min(33vw, 160px);
  padding-top: min(33vw, 160px);
  top: 0px;
  left: 50%;
  transform: translate(-50%, -60%);
}
#welcome .main .avatar:before, #welcome .main .avatar:after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
}
#welcome .main .avatar:before {
  padding-top: 30%;
  width: 30%;
  top: 14%;
  background-color: #5CC5C7;
  right: -8%;
}
#welcome .main .avatar:after {
  padding-top: 14%;
  width: 14%;
  bottom: 14%;
  background-color: #2A6DF0;
  left: 0%;
}
#welcome .main .avatar > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
#welcome .main .avatar .outer {
  width: 100%;
  height: 100%;
  box-shadow: 1px 8px 20px rgba(168, 166, 247, 0.4);
  -webkit-backdrop-filter: blur(6.3px);
          backdrop-filter: blur(6.3px);
  z-index: 2;
}
#welcome .main .avatar .inner {
  background: white;
  display: flex;
  justify-content: center;
  width: 75%;
  height: 75%;
  z-index: 3;
  color: #33309F;
  font-size: min(18vw, 88px);
}
#welcome .main .avatar .owner_name {
  width: 100%;
  height: 20px;
  transform: translateY(10px);
  top: 100%;
  left: 0;
  font-size: 16px;
  text-align: center;
}
#welcome h1 {
  font-size: 32px;
  font-weight: 400;
  color: #414141;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  white-space: pre-line;
}
#welcome .hw {
  border: none;
  border-radius: 8px;
  margin: 30px auto 10px;
  max-width: 500px;
  max-height: 156px;
  overflow-y: scroll;
  padding: 15px 17px 20px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(6.3px);
          backdrop-filter: blur(6.3px);
  box-shadow: 0px 19px 62px -8px rgba(168, 166, 247, 0.4);
  display: flex;
  flex-flow: column;
}
#welcome .hw .hw_header {
  color: #a43a73;
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: end;
  margin-bottom: 25px;
}
#welcome .hw .hw_header h4 {
  font-weight: 700;
  margin: 0;
}
#welcome .hw .hw_header .counter {
  flex: 1 0 auto;
  display: block;
  position: relative;
}
#welcome .hw .hw_header .counter:after {
  content: attr(caption);
  display: block;
  position: absolute;
  width: 100%;
  font-size: 12px;
}
#welcome .hw .instructions {
  flex: 1 1 auto;
  overflow: scroll;
}
#welcome .fullname_text {
  width: calc(100% - 30px);
  max-width: 500px;
}
#welcome .not_me {
  color: #514DC7;
  text-decoration-color: #514DC7;
  display: inline-block;
  margin: 10px auto;
  width: auto;
}
#welcome .not_me .MuiSvgIcon-root {
  top: 5px;
  height: 18px;
  color: #514DC7;
  stroke-width: 1;
  stroke: #514DC7;
  position: relative;
}
#welcome .as_admin {
  position: absolute;
  bottom: 20px;
  font-size: 13px;
  left: 50%;
  transform: translateX(-50%);
  color: #33309F;
  font-weight: 500;
  cursor: pointer;
  cursor: hand;
}
#welcome .as_admin:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  bottom: -5px;
  background: linear-gradient(90deg, #33309F 50%, #8681F5 100%);
}
#welcome .MuiTextField-root.dir {
  margin-bottom: 20px;
}
body.rtl #welcome .MuiTextField-root.dir .MuiInputLabel-root {
  left: inherit !important;
  right: 0rem !important;
  transform-origin: right !important;
}


.share_screen{position:absolute;height:100%;width:100%;background-color:#fff;z-index:10;display:flex;flex-flow:column;align-items:center;overflow:hidden;padding:10px 15px;box-sizing:border-box}.share_screen .close{position:absolute;top:0px;left:auto;right:10px;z-index:10}body.rtl .share_screen .close{left:10px;right:auto}.share_screen .qr{width:180px;margin-top:10px}.share_screen .MuiBox-root{width:100%}.share_screen .MuiInput-input::selection,.share_screen .MuiOutlinedInput-input::selection{background-color:#0f75bc;color:#fff}body.rtl .share_screen .title .edit_icon{margin-left:7px}body.ltr .share_screen .title .edit_icon{margin-right:7px}body.rtl .share_screen .title .MuiInput-root{right:-30px;left:auto}body.ltr .share_screen .title .MuiInput-root{left:-30px;right:auto}.share_screen .title .MuiInput-input{font-size:32px;text-overflow:ellipsis}body.rtl .share_screen .title .MuiInput-input{padding-right:30px}body.ltr .share_screen .title .MuiInput-input{padding-left:30px}.share_screen .title .MuiInputLabel-root{font-size:32px;transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms}body.ltr .share_screen .title .MuiInputLabel-root{right:auto;left:0px;transform-origin:top left}body.rtl .share_screen .title .MuiInputLabel-root{left:auto;right:0px;transform-origin:top right}body.rtl .share_screen .title .MuiInputLabel-root.MuiFormLabel-filled{transform:translate(30px, -1.5px) scale(0.5)}body.ltr .share_screen .title .MuiInputLabel-root.MuiFormLabel-filled{transform:translate(-30px, -1.5px) scale(0.5)}.share_screen .title .MuiInputLabel-root.MuiFormLabel-filled:not(.Mui-focused){opacity:0}body.rtl .share_screen .title .MuiInputLabel-root.Mui-focused{transform:translate(30px, -1.5px) scale(0.5)}body.ltr .share_screen .title .MuiInputLabel-root.Mui-focused{transform:translate(-30px, -1.5px) scale(0.5)}.share_screen .MuiOutlinedInput-root{border-radius:5px;background-color:#f5f5f5}.share_screen #hw_expiration{font-size:13px;padding:5px 5px;box-sizing:border-box}body.ltr .share_screen #hw_expiration{text-align:right}body.rtl .share_screen #hw_expiration{text-align:left}body.ltr .share_screen .MuiOutlinedInput-input{direction:ltr}body.rtl .share_screen .MuiOutlinedInput-input{direction:rtl}body.rtl .share_screen .instructions .MuiInputLabel-root{right:0;left:auto;transform-origin:top right;transform:translate(-14px, 16px) scale(1)}body.rtl .share_screen .instructions .MuiInputLabel-root.Mui-focused{transform:translate(-14px, -9px) scale(0.75)}body.rtl .share_screen .instructions .MuiInputLabel-root.MuiFormLabel-filled{transform:translate(-14px, -9px) scale(0.75)}.share_screen .instructions .MuiOutlinedInput-root{white-space:pre-wrap}body.rtl .share_screen .instructions .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline{text-align:right;direction:rtl}.share_screen #bottom_bar{flex:1 1 auto;width:100%;align-content:end}.share_screen #bottom_bar .MuiButtonBase-root{padding:5px 20px;border-radius:50px;background-color:#0f75bc;font-weight:700;font-family:Rubik;margin-bottom:10px}.share_screen #bottom_bar .MuiButtonBase-root .MuiButton-endIcon{margin-right:0px;margin-left:10px}body.rtl .share_screen #bottom_bar .MuiButtonBase-root .MuiButton-endIcon{margin-right:10px;margin-left:0px}
#no_playroom{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;padding:0 20px;box-sizing:border-box}#no_playroom h1{font-weight:bold}#no_playroom ul{padding:0;margin-top:40px;list-style-type:none}#no_playroom ul>li{margin-bottom:10px}#no_playroom #bottom_bar{margin-top:50px}#no_playroom h1{font-size:35px}
.loader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000}.loader-text{color:#fff;font-size:24px}
#login{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%}
#menu_bar{height:45px;z-index:3;box-shadow:0 2px 4px rgba(0,0,0,.3098039216)}#menu_bar h1{font-size:18px;font-family:Rubik;color:#0f75bc;line-height:45px;height:45px;margin:0;text-align:center;width:100%}#menu_bar.emphasized{background-color:#0f75bc}#menu_bar.emphasized h1{background-color:#0f75bc;color:#fff}
#session_info .scroller{flex:1 1;padding-bottom:60px}@media(min-width: 500px){#session_info .scroller{display:flex;flex-flow:row;flex-wrap:wrap}}.party_activity_title{color:#fff;height:30px;width:100%;margin:10px 12px -5px}.party_activity_title .small_select{direction:ltr;color:#fff;height:25px;font-size:18px;font-weight:bold}.party_activity_title .small_select::before{display:none !important}body.rtl .party_activity_title .small_select .MuiSelect-select{padding-left:28px !important;padding-right:0px !important}body.ltr .party_activity_title .small_select .MuiSelect-select{padding-right:28px !important;padding-left:0px !important}.party_activity_title .small_select .MuiSvgIcon-root{color:#fff;fill:#fff;right:auto}body.rtl .party_activity_title .small_select .MuiSvgIcon-root{left:4px}body.ltr .party_activity_title .small_select .MuiSvgIcon-root{right:4px}.MuiMenuItem-root{padding:0 20px}.card{--radius: 5%;aspect-ratio:.6923076923;box-shadow:0px 2px 4px rgba(122,154,182,.4),0px 7px 13px -3px rgba(122,154,182,.3)}.info_panel{width:auto;margin:14px 10px;background-color:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.6);position:relative}.info_panel .btn_delete{position:absolute;bottom:0px}body.ltr .info_panel .btn_delete{right:0px}body.rtl .info_panel .btn_delete{left:0px}@media(min-width: 500px){.info_panel{min-width:350px}}.party_activity_panel{padding:10px 10px 10px}.party_activity_panel h2{margin-top:0;font-size:18px;font-weight:400}.party_activity_panel>.selections{display:grid;grid-template-columns:repeat(auto-fit, minmax(65px, 0.333fr));grid-gap:4px;gap:4px;width:100%;box-sizing:border-box;direction:ltr}.party_activity_panel>.selections>img.creation{width:100%;border-radius:var(--radius)/calc(var(--radius) / 156 * 108)}.party_activity_panel>.selections>.selection{width:100%;height:auto;position:relative;border-radius:var(--radius)/calc(var(--radius) / 156 * 108)}.party_activity_panel>.selections>.selection>*{width:100%;height:100%;position:absolute;border-radius:var(--radius)/calc(var(--radius) / 156 * 108);box-sizing:border-box;border:1px solid #cbcbcb}.party_activity_panel>.selections>.selection>div{background-color:#e1e1e1}.party_activity_panel>.selections>.selection>*:nth-child(1){top:0px;left:0px}.party_activity_panel>.selections>.selection>*:nth-child(2){top:-2px;left:1px}.party_activity_panel>.selections>.selection>img{top:-4px;left:2px}.party_activity_panel>.selections>div.selection:after{content:attr(count);aspect-ratio:1;width:16px;line-height:16px;background-color:#0f75bc;color:#fff;font-weight:bold;position:absolute;font-size:11px;display:block;padding:2px;border-radius:50%;right:1px;top:-1px}.party_activity_panel>.selections>img.selection{border-radius:var(--radius)/calc(var(--radius) / 156 * 108)}.card_info_panel{display:flex;gap:15px;padding:7px}.card_info_panel>div{position:relative}.card_info_panel>div[type=user]{padding-bottom:16px}.card_info_panel .card{height:200px;border-radius:var(--radius)/calc(var(--radius) / 156 * 108)}.card_info_panel p.card_source{font-size:12px;margin:0;padding:1px 5px 0;position:absolute;max-width:calc(100% - 10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card_info_panel .card_details{flex:1 0;padding-top:10px}.card_info_panel .card_details ul{margin-top:10px;width:calc(100% - 15px);list-style-type:"- ";list-style-position:inside;padding-right:0;padding-left:0}.card_info_panel .card_details ul li{overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.card_info_panel .card_details .more_selectors{width:100%;box-sizing:border-box}body.ltr .card_info_panel .card_details .more_selectors{text-align:right;padding-right:10px}body.rtl .card_info_panel .card_details .more_selectors{text-align:left;padding-left:10px}.card_info_panel .card_details a{color:#0f75bc}#session_info{background-color:#0f75bc}#session_info .MuiTabs-flexContainer{background-color:#ebebeb}
.settings_menu .MuiListItemButton-root{padding:8px 16px}.settings_menu .MuiList-padding{padding:8px 0}.settings_menu .MuiListItemButton-root,.settings_menu .MuiListItem-root{flex-direction:row-reverse}.settings_menu .MuiListItemText-root{text-align:right}
.video_wrapper{--fs-bar-height: 60px;--ar: calc(4 / 3);z-index:10;display:flex;flex-flow:column;left:var(--margin-mini);min-width:100%;height:100%}.video_wrapper .MuiSvgIcon-root{fill:#fff}.video_wrapper.big{transition:width .3s,height .3s}.video_wrapper.fs{width:100vw;bottom:env(safe-area-inset-bottom, 0px) !important;top:45px;left:0;border-radius:0;height:100%;transition:none;box-shadow:inset 0 8px 6px -8px rgba(0,0,0,.631372549)}.video_wrapper.fs .video_meet{aspect-ratio:auto;height:calc(100% - var(--fs-bar-height))}.video_wrapper.fs .video_bar{position:absolute;bottom:env(safe-area-inset-bottom, 0px);height:var(--fs-bar-height);z-index:10;text-align:center}.video_wrapper.fs .video_bar .MuiButtonBase-root{margin:0px 5px;padding:0 5px}.video_wrapper.fs .video_bar .MuiSvgIcon-root{transform:scale(1.3);margin:0 5px}.video_wrapper.big{width:60vw;height:calc(var(--bar-height) + 60vw/var(--ar))}.video_wrapper .video_bar{height:var(--bar-height);box-sizing:border-box;padding:2px;width:100%;background-color:#000;text-align:center}.video_wrapper .video_bar .MuiButtonBase-root{margin-left:10px}.video_wrapper .video_meet{position:relative;aspect-ratio:4/3;width:100%;height:100%;overflow:hidden}.video_wrapper .video_meet>iframe{display:block;position:absolute;width:calc(100% + 6px) !important;height:calc(100% + 6px) !important;top:50%;left:50%;transform:translate(-50%, -50%)}
.MuiSpeedDial-actions{transform:translateX(-14px)}
.gutter{background-color:#fff;position:relative;filter:drop-shadow(0 0px 8px rgba(0, 0, 0, 0.5333333333));perspective:100px;perspective-origin:center;height:10px;margin-bottom:-9px;display:none}.vid .gutter{display:block}.focus .gutter{display:none !important}.gutter:after{content:"";display:block;position:absolute;width:50px;height:18px;bottom:7px;background-color:#fff;left:50%;transform:translateX(-50%) perspective(70px) rotateX(50deg);border-radius:7px 7px 0 0}.gutter:before{content:"V";position:absolute;color:#737373;z-index:2000;top:-12px;transform:translateX(-50%) scaleY(0.5) scaleX(2);font-family:Rubik}.minimized .gutter:before{transform:translateX(-50%) scaleY(-0.5) scaleX(2)}.minimized .minimizable{transition:height .5s}

/*# sourceMappingURL=main.be0560b6.css.map*/