#ai-imager{
		padding: 1rem;
		margin-bottom: 1rem;
		color: #999;
		#drop-area {
				display: block;
      border: 2px dashed #ccc;
      border-radius: 10px;
				background: transparent;
      width: 100%;
				max-width: 400px;
      height: fit-content;
      text-align: center;
      padding: 20px;
      font-family: Roboto, Arial, sans-serif;
				font-size: 16px;
      color: #999;
      margin: 0px auto 50px auto;
				cursor: pointer;
				p, label{
					display: block;
					padding: 0;
					margin: 0;
				}
    }
    #drop-area.highlight, #drop-area:hover {
      border-color: #fff;
      background-color: #333;
    }
    #fileElem {
      display: none;
    }
			#displayImageHere {
				text-align: center;
				height: fit-content;
				&:has(img){
					 width: calc(min(100%, 512px));
        aspect-ratio: 1;
					 margin: 0 auto 5rem auto;
				}
				img{
					width: 100%;
					height: auto;
					max-width: 1024px;
					opacity: 0;
					transition: all 1s ease;
					&.fade{
						opacity: 1;
					}
				}
			}	
.error{
 color: red;
}
.loader {
	display: block;
	margin: 1rem auto;
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #44D62C;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
.hide{
	display: none;
}
#displayImageHere:not(:has(img)) + #saveImage{
		display: none !important;
		&+p{
			display: none !important;
		}
}
#saveImage{
	width: 40px;
	height: 40px;
	border-radius: 60px;
	border: 1px solid #44D62C;
	background: #44D62C;
	padding: 0;
	display: block;
	margin: -4rem auto 0 auto;
	+p{
		color: inherit;
		text-align: center;
		margin-top: 1rem;
		margin-bottom: 2rem;
	}
	&:hover{
		background: #73e161;
	}
	.gmd {
        font-family: "Material Symbols Rounded", sans-serif;
        font-display: swap;
        font-size: 26px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        font-feature-settings: "liga";
        -webkit-font-smoothing: antialiased;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 18;
    }
			.save-icon.gmd::before {
        content: "download";
        color: #000;
        position: relative;
        left: 0px;
        top: 3px;
    }
}
}
@keyframes l3 {to{transform: rotate(1turn)}}
 @media screen and (max-width:767px){} @media screen and (-webkit-max-device-pixel-ratio: 1) and (min-width: 1200px), screen and (min-width: 768px) and (max-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1200px){}