@charset "utf-8";

.hide-customily-preview-modal { opacity: 0 !important; pointer-events: none !important; }

.customily-modal-preview-only { position: fixed; width: 100%; height: 100%; display: flex; float: left; inset: 0px; background: rgba(0, 0, 0, 0.43); z-index: 1000000; text-align: center; justify-content: space-around; align-items: center; }

.customily-modal-preview-only .canvas-container, .customily-modal-preview-only .customily-mobile-controls { transition: initial; }

.customily-modal-preview-only .main { max-height: 90vh; max-width: 90vw; margin-bottom: 60px; }

.customily-modal-preview-only .main .customily-close-button { background: lightgrey; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 30px; cursor: pointer; user-select: none; position: relative; float: right; right: -15px; top: 15px; z-index: 1; }

.customily-modal-preview-only .main .cl-preview-wrapper { display: grid; }

.customily-modal-preview-only .main .cl-preview-image { width: initial; max-width: 100%; max-height: 85vh; margin-left: auto; margin-right: auto; }

.customily-modal-preview-only .main.cl-use-image { margin-bottom: initial; }

.customily-modal-preview-only .main.cl-use-image .customily-close-button { right: 15px; top: -15px; }

@media (max-width: 767px) {
  .customily-modal-preview-only .main { width: 100%; max-width: 100vw; height: 100%; max-height: unset; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .customily-modal-preview-only .main .cl-preview-wrapper { max-height: calc(100% - 100px); }
  .customily-modal-preview-only .main .customily-close-button { float: none; top: -15px; left: unset; right: unset !important; }
}

#share-design-modal.modal-overlay, .vue-portal-target .modal-overlay { background: rgba(0, 0, 0, 0.4); top: 0px; left: 0px; height: 100%; width: 100%; z-index: 9999999; padding: 25px; overflow: hidden scroll; position: fixed; }

#share-design-modal.modal-overlay .modal-main-container, .vue-portal-target .modal-overlay .modal-main-container { border-radius: 15px; background-color: rgb(255, 255, 255); max-width: 800px; padding: 55px 70px; box-shadow: rgba(24, 48, 81, 0.21) 0px 9px 45px 0px; margin: 6% auto 0px; position: relative; }

#share-design-modal.modal-overlay .close-btn, .vue-portal-target .modal-overlay .close-btn { width: 40px; height: 40px; background: rgb(247, 247, 252); border-radius: 25px; cursor: pointer; top: 10px; right: 10px; position: absolute; }

#share-design-modal.modal-overlay .close-btn span, .vue-portal-target .modal-overlay .close-btn span { font-size: 20px; width: 15px; height: 15px; opacity: 0.5; position: relative; top: 5px; left: 0px; transition: opacity 0.3s ease-in-out; }

#share-design-modal.modal-overlay .close-btn.active span, #share-design-modal.modal-overlay .close-btn:hover span, .vue-portal-target .modal-overlay .close-btn.active span, .vue-portal-target .modal-overlay .close-btn:hover span { opacity: 1; }

#share-design-modal.modal-overlay .so-me-wrapper, .vue-portal-target .modal-overlay .so-me-wrapper { margin: 40px 0px 20px; text-align: center; }

#share-design-modal.modal-overlay .so-me-wrapper .so-btn, .vue-portal-target .modal-overlay .so-me-wrapper .so-btn { margin: 0px 10px 20px; display: inline-block; cursor: pointer; transition: border 0.3s ease-in-out; }

#share-design-modal.modal-overlay .so-me-wrapper .so-btn.rounded, .vue-portal-target .modal-overlay .so-me-wrapper .so-btn.rounded { padding: 22px; width: 82px; height: 82px; border-radius: 55px; border: 1px solid rgb(235, 235, 242); }

#share-design-modal.modal-overlay .so-me-wrapper .so-btn.rounded svg, .vue-portal-target .modal-overlay .so-me-wrapper .so-btn.rounded svg { width: 35px; height: 35px; }

#share-design-modal.modal-overlay .so-me-wrapper .so-btn.rounded:hover, .vue-portal-target .modal-overlay .so-me-wrapper .so-btn.rounded:hover { border: 1px solid rgb(0, 0, 0); }

#share-design-modal.modal-overlay .so-me-wrapper .so-btn.large-img, .vue-portal-target .modal-overlay .so-me-wrapper .so-btn.large-img { background-size: 35px; }

#share-design-modal.modal-overlay .m-font-size, .vue-portal-target .modal-overlay .m-font-size { margin-bottom: 10px; }

#share-design-modal.modal-overlay .bold, .vue-portal-target .modal-overlay .bold { font-weight: 700; }

#share-design-modal.modal-overlay .link-container, .vue-portal-target .modal-overlay .link-container { border-radius: 5px; border: 1px solid rgb(235, 235, 242); padding: 20px 15px; display: flex; }

#share-design-modal.modal-overlay .link-container .m-font-size, .vue-portal-target .modal-overlay .link-container .m-font-size { display: inline-block; overflow: hidden; max-width: calc(100% - 75px); white-space: nowrap; text-overflow: ellipsis; margin-bottom: 0px; }

#share-design-modal.modal-overlay .link-container .link-btn, .vue-portal-target .modal-overlay .link-container .link-btn { display: inline-block; float: right; padding: 0px 20px; font-size: 14px; color: rgb(0, 0, 0); cursor: pointer; transition: text-decoration 0.3s ease-in-out; }

#share-design-modal.modal-overlay .link-container .link-btn:hover, .vue-portal-target .modal-overlay .link-container .link-btn:hover { text-decoration: underline; }

@media only screen and (max-width: 410px) {
  #share-design-modal.modal-overlay .modal-main-container { padding: 35px 25px; }
  #share-design-modal.modal-overlay .so-btn { margin: 0px 5px 20px; }
}

@media only screen and (max-width: 830px) {
  #share-design-modal.modal-overlay .modal-main-container { padding: 35px 25px; }
}

#snackbar { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); text-align: center; border-radius: 15px; padding: 8px 16px; position: fixed; z-index: 20010; left: 50%; top: 80px; }

#snackbar.show { visibility: visible; animation: 0.5s ease 0s 1 normal none running customily-fadein, 0.5s ease 2.5s 1 normal none running customily-fadeout; }

@-webkit-keyframes customily-fadein { 
  0% { top: 0px; opacity: 0; }
  100% { top: 80px; opacity: 1; }
}

@keyframes customily-fadein { 
  0% { top: 0px; opacity: 0; }
  100% { top: 80px; opacity: 1; }
}

@-webkit-keyframes customily-fadeout { 
  0% { top: 80px; opacity: 1; }
  100% { top: 0px; opacity: 0; }
}

@keyframes customily-fadeout { 
  0% { top: 80px; opacity: 1; }
  100% { top: 0px; opacity: 0; }
}

.shared-personalization-copied { color: rgb(107, 107, 107); }

@keyframes animatetop { 
  0% { top: -300px; opacity: 0; }
  100% { top: 0px; opacity: 1; }
}