@import url(https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700&display=swap);
.App {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	/* height: 100vh; */
	/* Fallback for browsers that do not support Custom Properties */
	/* height: calc(var(--vh, 1vh) * 100); */
}

body,
html,
#root {
	height: 100%;
	min-height: 100%;
}

.App-logo {
	animation: App-logo-spin infinite 20s linear;
	height: 40vmin;
	pointer-events: none;
}

.MuiDrawer-paperAnchorDockedLeft {
	border-right: 0 !important;
}

@keyframes zoominoutsinglefeatured {
	0% {
		transform: scale(0.5, 0.5);
	}
	50% {
		transform: scale(0.65, 0.65);
	}
	100% {
		transform: scale(0.5, 0.5);
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.image-upload-footer {
	display: flex;
}

.cropper-actions {
	text-align: center;
	margin-bottom: 1em;
}

.loading-effect {
	margin-left: 1em;
	animation: zoominoutsinglefeatured 2s;
	animation-iteration-count: infinite;
}

.test {
	position: absolute;
	right: 30px;
	top: 40px;
}

.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;
}

.card {
	max-width: 345px;
	width: 100%;
	margin-bottom: 6em;
	background: white;
	padding: 1em;
	border-radius: 4px;
	box-shadow: 2px 2px 4px 1px #ccc;
}

.main-section {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 20px;
}

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

@keyframes App-logo-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.nav-bar {
	height: 80px;
}

.grey-opacity-bg {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	background: rgba(0, 0, 0, 0.8);
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 1;
}

.grey-opacity-bg--visible {
	opacity: 1;
}

.default-input-wrapper label {
	display: block;
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	margin: 0.4em 0 0.2em;
}

.default-input-wrapper .tap2-input {
	border-radius: 10px;
	-webkit-appearance: none;
	border: 5px solid #eee;
	margin: 5px 0 0.5em;
	padding: 5px;
	width: calc(100% - 26px);
	max-width: 335px;
	font-size: 16px;
	font-weight: 500;
	padding: 0.5em 0.5em;
}

button.default-button {
	background: #cc1e24;
	color: white;
	border: none;
	max-width: 345px;
}

button.default-button:hover {
	cursor: pointer;
	background: rgb(204, 30, 36, 0.9);
}

button.secondary-button {
	background: white;
	color: black;
	max-width: 345px;
}

button.secondary-button:hover {
	cursor: pointer;
	background: #ccc;
}

.MuiIconButton-edgeStart {
	margin-left: initial !important;
}

.button-link {
	color: #007aff;
	padding: 0.5em;
	display: block;
	font-size: 15px;
	font-weight: 400;
}

.button-link:hover {
	cursor: pointer;
	text-decoration: underline;
}

.button-link--bold {
	font-weight: 600;
}

.error-text {
	margin-top: 5px;
	color: #ec1000;
}
.success-text {
	margin-top: 5px;
	color: #00c300;
}

.status-fulfilled {
	background: #00c300;
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: 500;
}

.status-unfulfilled {
	background: orange;
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: 500;
}

.orders .orders--empty{
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 5px;
}

.orders .orders--loading{
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 5px;
}

.orders .orders--empty__notice {
    color: #383838;
    font-weight: 500;
}
.order .purchased-animations {
    background: white;
    padding: 1em;
    border-radius: 5px;
    min-height: 300px;
}

@media (max-width: 720px) {
    .order .purchased-animations__list__item--info,
    .order .purchased-animations__list__item {
        flex-direction: column;
    }
}

.order .purchased-animations__list {
    min-height: 200px;
}

.order .order-header {
    display: flex;
    align-items: center;
}

.order .status {
    margin-left: 1em;
}

.order .purchased-animations__list__item--info {
    display: flex;
}

.order .product-information {
    padding: 0 1em;
}

.purchased-animations__list__item--info .product-player {
    height: 120px;
}

.order__placeholder {
    margin-top: 7em;
    min-height: 300px;
    border-radius: 3px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.purchased-animations-list-item p {
    word-break: break-all;
    font-size: 0.9em;
    color: #585858;
}

.purchased-animations__list__item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    align-items: center;
    padding: 1em 0;   
}

.order .actions {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
}

.purchased-animations__list__item .product-title {
    font-weight: 500;
    margin-top: 0;
}

.order .btn-action {
    width: unset;
    height: 40px;
    margin: 0;
}

.order .rerender-status {
    display: flex;
    padding: 4px 8px;
    border-radius: 3px;
    color: white;
    font-size: 0.9em;
}

.order .rerender-status.rerender-status_In_Queue {
    background: #f47c36;
}
.order .rerender-status.rerender-status_Completed {
    background: #00c300;
}

.order .rerender-status.rerender-status_Failed {
    background: #cc1e24;
    font-size: 0.6em;
}
.pagination-container{display:flex;list-style-type:none;width:100%}.pagination-container .pagination-item{padding:0 12px;height:32px;text-align:center;margin:auto 4px;color:rgba(0,0,0,.87);display:flex;box-sizing:border-box;align-items:center;letter-spacing:.01071em;border-radius:6px;line-height:1.43;font-weight:400;font-size:18px;min-width:32px}.pagination-container .pagination-item.dots:hover{background-color:rgba(0,0,0,0);cursor:default}.pagination-container .pagination-item:hover{background-color:rgba(0,0,0,.04);cursor:pointer}.pagination-container .pagination-item.selected{background-color:#fff;color:#f41c3b;border:2px solid #f41c3b}.pagination-container .pagination-item .arrow::before{position:relative;content:"";display:inline-block;width:.4em;height:.4em;border-right:.12em solid rgba(0,0,0,.87);border-top:.12em solid rgba(0,0,0,.87)}.pagination-container .pagination-item .arrow.left{transform:rotate(-135deg) translate(-50%)}.pagination-container .pagination-item .arrow.right{transform:rotate(45deg)}.pagination-container .pagination-item.disabled{color:#8a8a8a;pointer-events:none}.pagination-container .pagination-item.disabled .arrow::before{border-right:.12em solid rgba(0,0,0,.43);border-top:.12em solid rgba(0,0,0,.43)}.pagination-container .pagination-item.disabled:hover{background-color:rgba(0,0,0,0);cursor:default}.pagination-container .pagination-item .arrow_text_previous{margin-left:1em;font-style:normal;font-weight:400;font-size:18px;line-height:25px}.pagination-container .pagination-item .arrow_text_next{margin-right:1em;font-style:normal;font-weight:400;font-size:18px;line-height:25px}.pagination-container .next_arrow{margin-left:25%}.pagination-container .prev_arrow{margin-right:25%}
.studioTextEditor {
    width: 100%;


}

section.editor-char-left {
    text-align: right;
    width: 100%;
}

div.quill > div {
    border: 1px solid #858585;
    border-color: rgb(224, 224, 224) !important; 
}

.ql-toolbar {
    border-top-left-radius: 0.5rem; 
    border-top-right-radius: 0.5rem; 
}

.ql-container{
    border-bottom-left-radius: 0.5rem; 
    border-bottom-right-radius: 0.5rem; 
   min-height: 175px; 
}
.create-ticket-form{width:100%}.create-ticket-container{margin-top:2rem;width:95vw;max-width:600px;text-align:left}.spacer{margin-top:2rem}
@keyframes slide-in-bottom{from{transform:translateY(-1.5rem);opacity:0}to{transform:translateY(0rem);opacity:1}}@keyframes backgroundToRed{from{background-color:rgba(0,0,0,0)}to{background-color:#f41c3b}}@keyframes scale-in-wobble-scale-out{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1;filter:blur(1px)}10%{-webkit-transform:scale(1);transform:scale(1);opacity:1;filter:blur(1px)}11%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:1;filter:blur(1px)}12%{-webkit-transform:scale(1);transform:scale(1);opacity:1;filter:blur(1px)}13%{-webkit-transform:translate(0);transform:translate(0);filter:blur(0px)}20%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}35%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}50%{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}75%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}80%{-webkit-transform:translate(0);filter:blur(0px);transform:translate(0)}81%{-webkit-transform:scale(1.05);filter:blur(1px);transform:scale(1.05)}82%{-webkit-transform:scale(1);filter:blur(1px);transform:scale(1)}100%{-webkit-transform:scale(0);filter:blur(1px);transform:scale(0)}}@keyframes appear-opacity{from{opacity:0}to{opacity:1}}@keyframes loadingBar{from{width:0%;left:0}35%{width:100%;left:0}75%{width:100%;left:0}to{width:0%;left:100%}}@keyframes loadingBar_failure{from{width:100%;left:0}90%{width:0%;left:0}100%{width:100%;left:0}}@keyframes rotate{0%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@-webkit-keyframes animista-slide-in-bottom{0%{-webkit-transform:translateY(1rem);transform:translateY(1rem);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes animista-slide-in-bottom{0%{-webkit-transform:translateY(1rem);transform:translateY(1rem);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes animista-slide-in-top{0%{-webkit-transform:translateY(-1rem);transform:translateY(-1rem);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes animista-slide-in-top{0%{-webkit-transform:translateY(-1rem);transform:translateY(-1rem);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes animista-slide-in-left{0%{-webkit-transform:translateX(-1rem);transform:translateX(-1rem);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes animista-slide-in-left{0%{-webkit-transform:translateX(-1rem);transform:translateX(-1rem);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes animista-slide-in-right{0%{-webkit-transform:translateX(1rem);transform:translateX(1rem);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes text-blink{0%{color:#000}50%{color:rgba(0,0,0,.2)}100%{color:#000}}@keyframes width-grow{0%{width:0%}100%{width:100%}}@-webkit-keyframes slide-in-left-suggestions{0%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left-suggestions{0%{-webkit-transform:translateX(-10px);transform:translateX(-10px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.hide-on-mobile{display:flex}.hide-on-mobile-block{display:block}@media(max-width: 720px){.hide-on-mobile-block{display:none !important}}.hidden{display:none}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.spin{animation:rotate 1s infinite linear}.center-bold{display:flex;justify-content:center;align-items:center;font-weight:bold}.flex-center{display:flex;justify-content:center;align-items:center}.hide-opacity{opacity:0}.button-with-loading{display:flex;justify-content:center;align-items:center;gap:.5rem;width:16rem !important}.checkbox{--background: #fff;--border: #d1d6ee;--border-hover: #bbc1e1;--border-active: #f41c3b;--tick: #fff;position:relative}.checkbox input,.checkbox svg{width:21px;height:21px;display:block}.checkbox input{-webkit-appearance:none;-moz-appearance:none;position:relative;outline:none;background:var(--background);border:none;margin:0;padding:0;cursor:pointer;border-radius:4px;transition:box-shadow .3s;box-shadow:inset 0 0 0 var(--s, 1px) var(--b, var(--border))}.checkbox input:hover{--s: 2px;--b: var(--border-hover)}.checkbox input:checked{--b: var(--border-active)}.checkbox svg{pointer-events:none;fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke:var(--stroke, var(--border-active));position:absolute;top:0;left:0;width:21px;height:21px;transform:scale(var(--scale, 1)) translateZ(0)}.checkbox.path input:checked{--s: 2px;transition-delay:.4s}.checkbox.path input:checked+svg{--a: 16.1 86.12;--o: 102.22}.checkbox.path svg{stroke-dasharray:var(--a, 86.12);stroke-dashoffset:var(--o, 86.12);transition:stroke-dasharray .6s,stroke-dashoffset .6s}.checkbox.bounce{--stroke: var(--tick)}.checkbox.bounce input:checked{--s: 11px}.checkbox.bounce input:checked+svg{animation:bounce .4s linear forwards .2s}.checkbox.bounce svg{--scale: 0}@keyframes bounce{50%{transform:scale(1.2)}75%{transform:scale(0.9)}100%{transform:scale(1)}}.dribbble{position:fixed;display:block;right:20px;bottom:20px}.dribbble img{display:block;height:28px}.animate-entrance-opacity{animation:appear-opacity .2s ease-in-out both}.margin-right{margin-right:1rem}.add-margin{margin:1rem !important}.add-padding{padding:1rem 2rem !important}@media(max-width: 720px){.add-padding{padding:.7rem 1rem !important}}.add-thin{border-width:1px !important;font-weight:500 !important;border-radius:.3rem !important}.expand{width:100% !important}.remove-margin{margin:0 !important}.label{margin-bottom:.5rem;color:#2b2b2b;text-transform:capitalize;font-weight:500;font-size:1rem}.accent{color:#f41c3b !important}@media(max-width: 920px){.hide-on-mobile{display:none !important}}.animate-entrance-top{-webkit-animation:animista-slide-in-top .2s ease-out both;animation:animista-slide-in-top .2s ease-out both}.animate-entrance-bottom{-webkit-animation:animista-slide-in-bottom .2s ease-out both;animation:animista-slide-in-bottom .2s ease-out both}.animate-entrance-suggestions{-webkit-animation:slide-in-left-suggestions .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:slide-in-left-suggestions .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.quick-entrance-bottom{-webkit-animation:animista-slide-in-bottom .1s ease-out both;animation:animista-slide-in-bottom .1s ease-out both}.animate-grow{-webkit-animation:animista-slide-in-top .2s ease-out both;animation:animista-slide-in-top .2s ease-out both}.studio_subtitle{color:#858585;margin-bottom:.5rem;cursor:default;font-size:1rem;width:100%}.studio_subtitle a{transition:.15s;padding:0rem .4rem;text-decoration:none;color:#5e5e5e}.studio_subtitle a:hover{color:#2b2b2b}.center-class{display:flex;justify-content:center;align-items:center;gap:1rem}.status_red,.status_yellow,.status_green,.status_gray{font-size:1.2rem;padding:.6rem 2rem;border-radius:.5rem}.status_red{color:#f41c3b;background-color:rgba(255,88,112,.1)}.status_yellow{color:#f2994a;background-color:#fff8de}.status_green{color:#14ad8f;background-color:#e7f7f4}.status_gray{color:#2b2b2b;background-color:#e6e6e6}.button-reset{border:none;background-color:rgba(0,0,0,0);cursor:pointer}.button-reset:focus{outline:none}.payment-method{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:40px;position:absolute;width:70%}.payment-method .content_title{font-family:"Poppins";font-style:normal;font-weight:600;font-size:28px;line-height:42px;letter-spacing:-0.01em}.payment-method .payment-btn-container{width:25em;height:6em}.payment-method .paymentTypeInputList_container{display:block;justify-content:center;align-items:center;gap:1rem;width:85%;margin-bottom:1.5rem}.payment-method .paymentTypeInputList_container .paymentTypeInput{display:flex;justify-content:center;align-items:center;justify-content:space-between;width:100%;border:1px solid #e0e0e0;border-radius:.5rem;font-size:1.3rem;padding-left:1.5rem;margin-top:1em}.payment-method .paymentTypeInputList_container .paymentTypeInput label{display:flex;justify-content:center;align-items:center;width:100%;padding:1.5rem;padding-left:0rem}.payment-method .paymentTypeInputList_container .paymentTypeInput label span{width:100%;display:flex;justify-content:center;align-items:center;justify-content:space-between}.payment-method .paymentTypeInputList_container .paymentTypeInput label span p{width:30%}.payment-method .paymentTypeInputList_container .paymentTypeInput label span aside{width:70%;justify-content:flex-end;overflow-x:scroll;gap:5%}.payment-method .paymentTypeInputList_container .paymentTypeInput label span aside img{height:3vh;max-height:1.5rem}.payment-method-stripe{align-items:flex-start}.payment-method-stripe *{box-sizing:border-box}.payment-method-stripe form{width:30vw;min-width:500px;box-shadow:0px 0px 0px .5px rgba(50,50,93,.1),0px 2px 5px 0px rgba(50,50,93,.1),0px 1px 1.5px 0px rgba(0,0,0,.07);border-radius:7px;padding:40px}.payment-method-stripe input{border-radius:6px;margin-bottom:6px;padding:12px;border:1px solid rgba(50,50,93,.1);height:44px;font-size:16px;width:100%;background:#fff}.payment-method-stripe .result-message{line-height:22px;font-size:16px}.payment-method-stripe .result-message a{color:#596fd6;font-weight:600;text-decoration:none}.payment-method-stripe .hidden{display:none}.payment-method-stripe #card-error{color:#697386;text-align:left;font-size:13px;line-height:17px;margin-top:12px}.payment-method-stripe #card-element{border-radius:4px 4px 0 0;padding:12px;border:1px solid rgba(50,50,93,.1);height:44px;width:100%;background:#fff;margin-bottom:1em}.payment-method-stripe #payment-request-button{margin-bottom:32px}.payment-method-stripe .spinner,.payment-method-stripe .spinner:before,.payment-method-stripe .spinner:after{border-radius:50%}.payment-method-stripe .spinner{color:#fff;font-size:22px;text-indent:-99999px;margin:0px auto;position:relative;width:20px;height:20px;box-shadow:inset 0 0 0 2px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.payment-method-stripe .spinner:before,.payment-method-stripe .spinner:after{position:absolute;content:""}.payment-method-stripe .spinner:before{width:10.4px;height:20.4px;background:#5469d4;border-radius:20.4px 0 0 20.4px;top:-0.2px;left:-0.2px;-webkit-transform-origin:10.4px 10.2px;transform-origin:10.4px 10.2px;-webkit-animation:loading 2s infinite ease 1.5s;animation:loading 2s infinite ease 1.5s}.payment-method-stripe .spinner:after{width:10.4px;height:10.2px;background:#5469d4;border-radius:0 10.2px 10.2px 0;top:-0.1px;left:10.2px;-webkit-transform-origin:0px 10.2px;transform-origin:0px 10.2px;-webkit-animation:loading 2s infinite ease;animation:loading 2s infinite ease}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media only screen and (max-width: 600px){.payment-method-stripe form{width:80vw}}
.paymentSuccess .orders--empty{
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 5px;
}

.paymentSuccess .orders--loading{
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 5px;
}

.paymentSuccess .orders--empty__notice {
    color: #383838;
    font-weight: 500;
}
body {
  margin: 0;
  font-family: "Red Hat Display";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.container {
  padding: 2em;
  margin-left: 10%;
  margin-right: 10%;
  min-height: 100%;
}

body {
  background-color: #ffffff;
}

.app-logo {
  display: flex;
  align-items: center;  
  font-size: 0.95em !important;
}

.img-logo {
  height: 25px;
  margin-right: 0.6em;
}

.app-icon {
  height: 3.5em;
}

.page-header {
  height: 80px;
  background: #CC1E24;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 2em;
}

.page-header .page-title {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

.Toastify__toast {
  border-radius: 5px !important;
}