*{font-family: 'Poppins', sans-serif; font-size:1.0em; font-weight:400; box-sizing: border-box; padding: 0; margin: 0;}

html{font-size:100%;height:100%;overflow-y:auto;background-color:transparent;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{position:relative;margin:0;font-size:100%;user-select:none;}
a,a:visited{color:#0CA1D2;text-decoration:underline}
a:hover{color:#249;text-decoration:none}
a:focus{outline:0}
a:hover,a:active{outline:0}
b,strong{font-weight:600}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
ul{list-style:none}
ul,ol{margin:1em 0;padding:0 0 0 20px}
dd{margin:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0}
img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}
svg:not(:root){overflow:hidden}
form{margin:0}
fieldset{border:0;margin:0;padding:0}
legend{border:0;margin-left:-7px;padding:0}
button,input,select,textarea{margin:0;vertical-align:baseline;vertical-align:middle}
button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;overflow:visible}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
iframe{border:0}
body,div,img,p,button,input,select,textarea,ul,li,a{box-sizing:border-box;}
body{line-height:1.5em;padding:0;background-color:#fff;color:#222;}

#main{position:relative;width:100%;max-width:1920px;margin:0 auto;overflow:hidden;background-color: #fff;}

#header, #content, #footer {position:relative;width:100%;max-width:1920px;margin:0 auto;}
.inner{margin:0 auto;padding:40px 20px;max-width:1200px;transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}

.cont-01{position:relative;}
.cont-02{position:relative;background-color: #f9fafb; color: #444;}
.cont-0f{position:relative;background-color: #29ddf5; color: #444;}

.cont-01, .cont-02 .inner{min-height:300px;}
.cont-01.gim .inner, .cont-01.cim .inner{max-width:1600px;}


.cont-01.admin .inner{position:relative;padding:20px 20px;max-width:1640px;}

#header{position:fixed;z-index:10;height:80px;top:0;left:0;background-color:#fff;border-bottom:1px solid #f3f4f6; box-shadow: 0 4px 4px -1px #f3f4f6;}
#header .inner{padding:20px 0;text-align:center;max-width:1800px;}

#footer .inner{height:34px;}

#content{padding-top:80px;min-height:calc(100vh - 34px);}

.navigation{text-align:right;padding:5px 0;}

body.scrolled #header{background-color:#fff;box-shadow: 0 1px 2px 1px rgba(240,240,240,0.25);}


h2{font-size:1.75em;font-weight:400;letter-spacing:normal;line-height:1.25;text-align:center;padding:10px 0;}
h3{font-size:1.25em;font-weight:400;letter-spacing:normal;line-height:1.25;text-align:center;padding:10px 0;}
p{letter-spacing:normal;padding:0;margin:1.0em 0;}

.left{text-align:left!important}
.center{text-align:center!important}
.right{text-align:right!important}

.italic{font-style:italic!important}

.copy{font-size:14px;padding:5px 0;margin:0;}
.brand{float:left;font-style:italic;line-height:30px;margin:0 10px;text-align:center;cursor:pointer;color:#29ddf5;}

input[type=text], input[type=password], input[type=number], textarea, select {padding:4px;border:1px solid #999;border-radius:4px;box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);outline:none;transition: all 0.3s;}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus{border-color:#48e;}

select{background-color:#fff;}

.mbutton{background-color:#a00;color:#fff;padding:4px 12px;border:1px solid #800;border-radius:8px;box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.22);outline:none;transition: all 0.3s;}
.mbutton:hover{box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.33);}
.mbutton:focus{border:1px solid #f00;}

ul.menu{height:40px;margin:0;padding:0;display:block;}
ul.menu li{font-size:1.0em;font-weight:400;text-align:center;vertical-align:middle;list-style:none;height:30px;padding:0 5px;position:relative;display:inline-block;background-color:transparent;}
ul.menu li a{color:#444;text-decoration:none;display:inline-block;margin:0 8px}
ul.menu li a:hover{border-bottom:1px solid #29ddf5;}
ul.menu li a{padding:2px}
ul.menu li:first-child{margin-left:0}
ul.menu li:last-child{margin-right:0}

ul.menu li.login{font-size:1.0em;;float:right;display:block;margin:0 5px;}

ul.mobile-menu{text-align:left;margin:0;padding:0;display:none}
ul.mobile-menu li{text-align:right;height:30px;list-style:none;color:#fff;cursor:pointer;padding:0;margin:0;font-size:1.2em;font-weight:400;}
ul.mobile-menu li .list{font-size:28px;background-color:#fff;color:#222;display:inline-block;cursor:pointer;margin:3px}


@media only screen and (max-width: 768px) {
	ul.mobile-menu{display:block}
	ul.menu{display:none;margin:0;padding:0;height:auto}
	ul.menu li{background-color:#fff;text-align:left;}
	ul.menu li, ul.menu li:first-child ,ul.menu li:last-child{float:none;width:100%;padding:0 0 0 5px;margin:0 !important;border-top:1px solid #e6e6e6}
	ul.menu li a, ul.menu li.active a,ul.menu li:last-child a{width:100%;padding:0;margin:0}
	ul.menu li:last-child{border-bottom:2px solid #ccc}
	ul.menu li a:hover, ul.menu li.emph a:hover{color:#966a39;border-bottom:0 solid #4AE}

	ul.menu li.login{float:none;display:block;color:#c3b26d;margin:0 !important;}
	ul.menu li.login a{color:#444;width:fit-content;}

	#header{box-shadow:none;height:40px;}
	#header .inner{padding:0;}
	#content{padding-top:40px;}

}

.section{clear:both;padding:0;margin:0}
.group:before,.group:after{content:"";display:table}
.group:after{clear:both}
.group {transform: scale(1);}
.col{display:block;float:left;margin:0 0 1% 1.6%}
.col:first-child{margin-left:0}
.span_1_of_2{width:49.2%}
.span_2_of_3{width:66.13%}
.span_1_of_3{width:32.26%}
.span_1_of_4 {width:23.8%;}
.span_3_of_4 {width:73.0%;}
.span_4_of_5 {width:79.68%;}
.span_3_of_5 {width: 59.36%;}
.span_2_of_5 {width: 39.04%;}
.span_1_of_5 {width:18.72%;}

.group{display:flex; align-items:center;}

.group.reverse{flex-direction:row-reverse;}
.group.reverse .col{margin:0 1.6% 1% 0}
.group.reverse .col:first-child{margin-right:0}

@media only screen and (max-width:768px){h2{font-size:2.0em;line-height:1.33em;padding:0.5em 0;margin:1em 0;}.inner{padding:20px 12px}}
@media only screen and (max-width: 660px) {h2{font-size:1.75em;line-height:1.25em;padding:0.25em 0;margin:0.5em 0;}h3{font-size:1.25em;line-height:1.25em;padding:0;margin:0.25em 0;}.group{display: block; align-items:initial;}.col{float:none;margin:1% 0}.span_1_of_2{width:100%} .span_2_of_3{width:100%} .span_1_of_3{width:100%} .span_1_of_4 {width:100%} .span_3_of_4 {width:100%} .span_4_of_5{width:100%} .span_3_of_5{width:100%} .span_2_of_5{width:100%} .span_1_of_5{width:100%}}
@media only screen and (max-width:480px){body{font-size:.9em} h2{font-size:1.5em;line-height:1.25;padding:0;margin:0.25em 0;}.inner{padding:16px 8px}td{padding:10px 5px}td.td1{width:120px}ul{padding:0 0 0 10px}div.order-form{padding:0;border:0;border-radius:0;margin:0}.copy{font-size:12px;padding:3px 0;}}
@media only screen and (max-width:320px){.inner{padding:8px 4px} td.td1{width:100px}.copy{font-size:11px;padding:2px 0;}}


#modal,#modal .underlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%;box-sizing:border-box;position:fixed;z-index:997}
#modal .underlay{background-color:rgba(50,85,85,0.9);cursor:context-menu;animation:fadein .5s;z-index:998}
#modal .modal{width:1200px;max-width:95%;height:600px;min-height:600px;max-height:95%;background-color:#FFF;z-index:999;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;border:2px solid #01286F;animation:popin .5s}
#modal .modal{border-radius:.5em;}
#modal .modal-close{z-index:1001;float:right;text-align:right;font-size:.8em;line-height:1em;padding:3px 6px;margin:3px;}
#modal .modal-close p{font-family:arial;font-size:1.75em;font-weight:400;color:#666;margin:0;padding:0;cursor:pointer;display:inline-block}
#modal .modal-close p:hover{color:#d00;}
#modal .modal-body{padding:0 6px 0 3px}
#modal .button{font-size:16px;font-weight:700;background-color:#966a39;box-shadow:0 0 4px 0 rgba(100,100,100,.8);color:#FFF;border:0;border-radius:.3em;cursor:pointer;padding:6px 12px 6px 12px;max-width:90%;transition:all .2s;margin:10px auto}
#modal .button:hover,#modal .button:active{box-shadow:none;}
#modal iframe{width:100%;height:100%;min-height:500px;max-height:calc(100% - 100px);border:0;}

@media only screen and (max-width:1366px) {
	#modal .modal{width:1024px;}
}

@media only screen and (max-width:480px) {
  #modal .modal{width:480px;max-width:100%;height:600px;min-height:calc(100% - 10px);max-height:100%}
  #modal .button{margin:2px auto;}
  #modal iframe{height:540px;max-height:calc(100% - 76px)}
}


#smodal,#smodal .underlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%;box-sizing:border-box;position:fixed;z-index:99}
#smodal .underlay{background-color:rgba(50,85,85,0.9);cursor:context-menu;animation:fadein .5s;z-index:998}
#smodal .smodal{width:600px;max-width:95%;height:300px;min-height:300px;max-height:calc(100vh - 50px);background-color:#FFF;z-index:999;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;border:2px solid #01286F;animation:popin .5s}
#smodal .smodal{border-radius:.5em;}
#smodal .smodal-body{padding:0 6px 0 3px}

@media only screen and (max-width:1366px) {
  #smodal .smodal{height:620px;min-height:620px;max-height:calc(100% - 40px);}
}

@media only screen and (max-width:480px) {
  #smodal .smodal{width:480px;max-width:100%;}
}

a.button:active,a.button:link,a.button:visited{font-size:1em;font-weight:600;line-height:1.25em;display:inline-block;text-align:center;vertical-align:top;color:#000;text-decoration:none;background-color:#fff;padding:0.5em 1.0em;margin:0;}

a.button.s {font-size:1.5em;font-weight:600;line-height:1.0;background-color:transparent;color:#421;background-image: linear-gradient(190deg, #DCB344 0%, #FFE900 75%);padding:0.5em 1.25em;border:1px solid #FEC721;border-radius:0.5em;box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.25);}
a.button.s:active,a.button.s:link,a.button.s:visited{}
a.button.s:hover, a.button.s:active{box-shadow:none;transform: scale(1.05);}

#login{width:300px;margin: 0 auto;transform: translate(0,50%);}

.inactive{color:#ccc;}

td {padding:4px;}

.big-radio {display: none;}
.big-radio + div.label {-webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px 0 rgba(0,0,0,0.05); padding: 12px; border-radius: 50px; display: inline-block; position: relative; }
.big-radio:checked + div.label:after {content: ' '; width: 18px; height: 18px; border-radius: 50px; position: absolute; top: 3px; background: #48e; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); text-shadow:none; left: 3px; font-size: 32px;}
.big-radio:checked + div.label {background-color: #fefefe; color: #99a1a7; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px 0 rgba(0,0,0,0.05), inset 15px 10px 0 rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);}
.big-radio + div.label:active, .big-radio:checked + div.label:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}

.big-checkbox {display: none;}
.big-checkbox + div.label {background-color: #fafafa;border: 1px solid #cacece;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px 0 rgba(0,0,0,0.05);padding: 14px;border-radius: 3px;display: inline-block;position: relative;}
.big-checkbox + div.label:active, .big-checkbox:checked + div.label:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.big-checkbox:checked + div.label {background-color: #fefefe;border: 1px solid #adb8c0;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px 0 rgba(0,0,0,0.05), inset 15px 10px 0 rgba(255,255,255,0.1);color: #99a1a7;}
.big-checkbox:checked + div.label:after {content: '\2714';font-size: 24px;position: absolute;top: 3px;left: 5px;color: #48e;}

.sliderticks {display: flex; justify-content: space-between; padding: 0 10px; min-height:25px;}
.sliderticks span {display: flex; justify-content: center; width: 1px; height: 10px; background: #d3d3d3; line-height: 40px;}

.btn-primary{font-size:1.0em;font-weight:600;line-height:1.0em;display:inline-block;text-align:center;vertical-align:top;color:#000;text-decoration:none;background-color:transparent;color:#444;background-image: linear-gradient(135deg, #FEE000 0%, #FFE900 100%);padding:0.33em 1.0em;margin:5px;border:1px solid #FFE900;border-radius:0.5em;box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);}
.btn-primary:hover{box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);}

.upload-area{width: 100%; height: 200px; background-color: rgba(255, 255, 225, 0.33); border: 2px dashed #3699FF; border-radius: 10px; margin: 0 auto 20px auto; text-align: center; overflow: auto; padding: 20px; display: inline-block; vertical-align:top; cursor:pointer;}

a.btn-delete-img{font-size:20px;line-height:20px;display:inline-block;text-align:center;text-decoration:none;background-color:#d00;color:#fff;padding:0;margin:0;width:20px;height:20px;border-radius:0.25em;box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.25);}
a.btn-delete-img:active,a.btn-delete-img:link,a.btn-delete-img:visited{}
a.btn-delete-img:hover, a.btn-delete-img:active{background-color:#29ddf5;box-shadow:none;}

#images div{animation: popin 3s;}
#images div a.btn-delete-img{animation: btnin 2s;}

#preview div{animation: popin 3s;}
#preview div a.btn-delete-img{animation: btnin 2s;}

#generated-images div{animation: popin 3s;}

@keyframes fadein{0%{opacity:0}100%{opacity:1}}
@keyframes popin{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes btnin{0%{transform:scale(0);opacity:0}50%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}

h3 a{font-size:95%;}

td, th {box-sizing: border-box !important;}

table.border {border:0; border-collapse:separate; border-spacing:1px;background-color:#aaa;border-radius:0.25em;}
table.border th, table.border td {font-size:0.875em;padding:2px 4px;vertical-align:middle;}
table.border thead th {text-align:center;background-color:#f1ede2;}
table.border tfoot td {font-size:12px;line-height:12px;background-color:#f1ede2;}
table.border tbody tr {cursor:pointer;}
table.border tbody tr:hover {background-color:#DDFFDD;}

table.border td.tfoot {font-size:12px;line-height:12px;background-color:#f1ede2;}

.tr_white   {background-color:#FFF;color:#333;}
.tr_yellow  {background-color:#FFD;color:#600;}
.rg_tr_gray {background-color:#EEE;color:#333;}

.tdl {text-align:left;}
.tdc {text-align:center;}
.tdr {text-align:right;}

table.filter {border-collapse: separate; border-spacing: 1px;border:1px solid #ccc; border-radius:6px;box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2);}
table.filter:hover {box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.15);}
table.filter td {padding:2px 5px; vertical-align:middle;}
table.filter tr:last-child > td {border-bottom:0;}
table.filter td input, table.filter td select {vertical-align:middle;}

#prompt-import input[type="file"], #edit-user-form input[type="file"] {background: #f9faf9;color: #a00;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;}
#prompt-import input[type="file"]::file-selector-button, #edit-user-form input[type="file"]::file-selector-button {background-color:#a00;color:#fff;padding:4px 12px;margin: 5px 15px 5px 5px;border:1px solid #800;border-radius:4px;box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.22);outline:none;transition: all 0.3s;}
#prompt-import input[type="file"]::file-selector-button:hover, #edit-user-form input[type="file"]::file-selector-button:hover {box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.33);}
#prompt-import input[type="file"]::file-selector-button:focus, #edit-user-form input[type="file"]::file-selector-button:focus {border:1px solid #f00;}

div.container {width:100%;}

.fixed{display:none;position:fixed;top:0px;width:auto;border:none;box-shadow:0 2px 3px 0 rgba(0,0,0,0.3);box-sizing: border-box;z-index:2;}

.clearable{background:#fff url(../img/ix.gif) no-repeat right -10px center;color:#444;border: 1px solid #999;padding:4px 18px 4px 4px !important;border-radius:4px;transition: background 0.4s;}
.clearable.x {background-position:right 5px center;color:#48e;}
.clearable.onX{cursor:pointer;}

.user-packages{text-align:left;padding:20px 0;margin:20px 0;width:100%;border:0;}
.user-packages-box{position:relative;display:inline-block;border:1px solid silver;border-radius: 10px;margin: 0 1em 1em 0;width: 200px;max-width:100%;}
.user-packages-box:last-child{margin-right:0}

.dot-f00{height:5px;width:5px;background-color:#f00;border-radius:50%;display:inline-block;}
.dot-d00{height:5px;width:5px;background-color:#d00;border-radius:50%;display:inline-block;}
.dot-0b0{height:5px;width:5px;background-color:#0b0;border-radius:50%;display:inline-block;}

.uploaded-img-thumb-div{display:inline-block;position:relative;margin:10px 5px;width:calc(20% - 20px);}
.uploaded-img-thumb{width:100%; height:auto; border-radius:6px; object-fit: cover; object-position: center;}
.uploaded-info{position:absolute;left:0;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;margin:5px;width: 100%;}

#preview .thumb-div{position:relative;display:inline-block;margin:10px 5px;width:calc(20% - 20px);}
#preview .thumb-image{width:100%; height:auto; border-radius:6px; object-fit: cover; object-position: center;}
#preview .thumb-info{position:absolute;left:0;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;margin:5px;width: 100%;}

#progress-inf{padding:5px 0;}
#progress-inf span{font-size:12px;}
#progress-bar {background-color: #29ddf5; /*#12CC1A*/ color: #FFFFFF; width:0; height:0; line-height:16px; padding:0; margin:0; box-sizing:border-box; transition: width .3s; border-radius: 5px;}
#progress-status{font-size:16px;line-height:16px;height:20px;padding:2px 0;margin:0;box-sizing:border-box;}

#generated-images{}
#generated-images .thumb-div{position:relative;display:inline-block;margin:10px 5px;width:calc(20% - 20px);transition: all 0.3s;}
#generated-images .thumb-div:hover{scale:1.05;}
#generated-images .thumb-image{width:100%; height:auto; border-radius:6px; object-fit: cover; object-position: center;}

#generated-images .thumb-btns{position:absolute;top:5px;right:5px;font-size:14px;line-height:14px;text-align:right;color:#fff;padding:0;margin:0;border-radius:2px;}
#generated-images .thumb-div .btn{display:inline-block;font-size:14px;line-height:14px;text-align:center;background-color:transparent; color:#fff; border: 1px solid transparent; border-radius: 4px; vertical-align: middle;padding:2px 4px; margin:3px; cursor: pointer;}
#generated-images .thumb-div:hover .btn{background-color:#29ddf5; color:#fff;}
#generated-images .thumb-div .btn:hover{background-color:#fff; color:#29ddf5;}
#generated-images .thumb-btns .expand{display:none;font-size:14px;line-height:14px;text-align:center;background-color:transparent; color:#fff;vertical-align: middle;padding:2px 4px; margin:3px;}
#generated-images .thumb-div:hover .expand{display:inline-block;}

@media only screen and (max-width: 1280px){
	.uploaded-img-thumb-div, #preview .thumb-div, #generated-images .thumb-div{width:calc(25% - 20px);}
}

@media only screen and (max-width: 768px){
	.uploaded-img-thumb-div, #preview .thumb-div, #generated-images .thumb-div{width:calc(33% - 20px);}
}

@media only screen and (max-width: 480px){
	.uploaded-img-thumb-div, #preview .thumb-div, #generated-images .thumb-div{width:calc(50% - 20px);}
}


@media only screen and (max-width: 320px){
	.uploaded-img-thumb-div, #preview .thumb-div, #generated-images .thumb-div{margin:0 auto 15px auto;width:calc(90%);}

}

#ai-cim{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;margin:20px 0;width:100%;}
#ai-cim .thumb-div{position:relative;display:inline-block;margin:0;width:100%;aspect-ratio: 1/1;border:1px solid #ccc; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius:10px;background-color:#eee; transition: all 0.3s;}
#ai-cim .thumb-div:hover{scale:1.05;}
#ai-cim .thumb-div img{aspect-ratio: 1/1;animation: popin 1s;}
#ai-cim .thumb-div .thumb-image{width:100%; height:auto; border-radius:10px; object-fit: cover; object-position: center;aspect-ratio: 1/1;position:relative;z-index:2;}


#ai-gim, #ai-fav{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;margin:20px 0;width:100%;}
#ai-gim img, #ai-fav img{aspect-ratio: 1/1;animation: popin 1.5s;}
#ai-gim .thumb-div, #ai-fav .thumb-div{position:relative;display:inline-block;margin:0 auto;width:100%;max-width:300px;border-radius:10px;background-color:#eee; transition: all 0.3s;}
#ai-gim .thumb-div:hover, #ai-fav .thumb-div:hover{scale:1.05;}
#ai-gim .thumb-div .thumb-image, #ai-fav .thumb-div .thumb-image{width:100%; height:auto; border-radius:10px; object-fit: cover; object-position: center;aspect-ratio: 1/1;position:relative;z-index:2;}
#ai-gim .thumb-div .btn, #ai-cim .thumb-div .btn, #ai-fav .thumb-div .btn{display:inline-block;font-size:16px;line-height:16px;text-align:center;background-color:rgba(41,221,245,0.5); color:#fff; border: 1px solid transparent; border-radius:50%; vertical-align: middle;padding:5px; margin:0; cursor: pointer; z-index:3;}
#ai-gim .thumb-div .btn:hover, #ai-cim .thumb-div .btn:hover, #ai-fav .thumb-div .btn:hover{background-color:#fff; color:#29ddf5;}
#ai-gim .thumb-div .btn.top-left, #ai-cim .thumb-div .btn.top-left, #ai-fav .thumb-div .btn.top-left{position:absolute;top:5px;left:5px;}
#ai-gim .thumb-div .btn.top-right, #ai-cim .thumb-div .btn.top-right, #ai-fav .thumb-div .btn.top-right{position:absolute;top:5px;right:5px;}
#ai-gim .thumb-div .btn.bottom-right, #ai-cim .thumb-div .btn.bottom-right, #ai-fav .thumb-div .btn.bottom-right{position:absolute;bottom:5px;right:5px;}
#ai-gim .thumb-div .btn.center{position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);background-color:transparent;color:#29ddf5;z-index:1;}
#ai-gim .thumb-div .gim-info, #ai-cim .thumb-div .cim-info{position:absolute;left:33px;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;margin:5px;width:calc(100% - 66px);z-index:3;}

#ai-gim .thumb-div.refresh .btn.top-left, #ai-gim .thumb-div.refresh .btn.top-right, #ai-gim .thumb-div.refresh .btn.bottom-right{display:none;}
#ai-gim .thumb-div.refresh .gim-info{bottom:8px;transform: translate(40px,0%);}
#ai-gim .thumb-div.refresh .thumb-image{}
#ai-gim .thumb-div.refresh .btn.center{z-index:3;}

#ai-gim.loading .thumb-div .btn.top-left, #ai-gim.loading .thumb-div .btn.top-right, #ai-gim.loading .thumb-div .btn.bottom-right{z-index:-1;}
#ai-cim.loading .thumb-div .btn.top-left, #ai-cim.loading .thumb-div .btn.top-right, #ai-cim.loading .thumb-div .btn.bottom-right{z-index:-1;}
#ai-fav.loading .thumb-div .btn.top-left, #ai-fav.loading .thumb-div .btn.top-right, #ai-fav.loading .thumb-div .btn.bottom-right{z-index:-1;}


.tinder-bio-generator .main-container, .tider-profil .main-container{
    width: 100%;
    max-width: 700px;
    background-color: #ECEFF1;
    border: 1px solid #B0BEC5;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
}

.tinder-bio-generator .input-group {
    margin-bottom: 16px;
}

.tinder-bio-generator .label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 4px;
    color: #263238;
}

.tinder-bio-generator .input-field {
    width: 100%;
    padding: 8px;
    border: 1px solid #B0BEC5;
    border-radius: 4px;
    font-size: 1rem;
    color: #263238;
    box-sizing: border-box;
}
.tinder-bio-generator .input-field:focus {
    outline: none;
    border-color: #0288D1;
}
.tinder-bio-generator .btn, .tider-profil .btn{
    padding: 8px 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}
.tinder-bio-generator .btn-generate, .tider-profil .btn-generate{
    background-color: #0288D1;
    color: white;
}
.tinder-bio-generator .btn-generate:hover, .tider-profil .btn-generate:hover{
    background-color: #0277BD;
}
.tinder-bio-generator .btn-generate:disabled, .tider-profil .btn-generate:disabled{
    background-color: #B0BEC5;
    cursor: not-allowed;
}
.tinder-bio-generator .btn-copy {
    background-color: #28a745;
    color:#fff;
}
.tinder-bio-generator .btn-copy:hover {
    background-color: #218838;
}
.tinder-bio-generator .btn-exit {
    background-color: #dc3545;
    color: black;
}
.tinder-bio-generator .btn-exit:hover {
    background-color: #c82333;
}
.tinder-bio-generator .btn-menu {
    background-color: #455A64;
    color: white;
}
.tinder-bio-generator .btn-menu:hover {
    background-color: #37474F;
}
.tinder-bio-generator .output-text {
    width: 100%;
    height: 150px;
    background-color: white;
    border: 1px solid #B0BEC5;
    border-radius: 4px;
    padding: 8px;
    font-size: 1rem;
    color: #263238;
    resize: none;
    box-sizing: border-box;
}
.tinder-bio-generator .input-group {
    margin-bottom: 16px;
}
.tinder-bio-generator .title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: #263238;
    margin-bottom: 16px;
}
.tinder-bio-generator .tip {
    font-size: 0.75rem;
    font-style: italic;
    color: #546E7A;
    margin-top: 4px;
}
.tinder-bio-generator .button-group, .tider-profil .button-group, .faceswapper .button-group{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 16px;
}


.tider-profil form p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* tider-profil Checkboxok modern elrendezéssel */
.tider-profil .checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
}

.tider-profil .checkboxes label, .faceswapper label {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #ddd;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.tider-profil .checkboxes input[type="checkbox"] {
    margin-right: 0.5rem;
}

.tider-profil .checkboxes label:hover {
    background-color: #eef1f5;
}


.faceswapper .input-field, .changer .input-field {background-color: #fff}

progress.custom-progress {
    width: 100%;
    height: 12px;
    appearance: none;
}

progress.custom-progress::-webkit-progress-bar {
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
}

progress.custom-progress::-webkit-progress-value {
    background-color: #4caf50;
    border-radius: 10px;
}

progress.custom-progress::-moz-progress-bar {
    background-color: #4caf50;
    border-radius: 10px;
}

.progress-wrapper {
    position: relative;
    width: 100%;
    height: 28px;
    background-color: #ddd;
    border-radius: 10px;
    margin-top: 14px;
    overflow: hidden;
}

.progress-bar {
    position: absolute;
    height: 100%;
    background-color: #007bff;
    border-radius: 10px;
    width: 0%;
    transition: width 0.5s linear;
}

.progress-label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #007bff;
}


#ai-tfd, #td-fav{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;margin:20px 0;width:100%;}
#ai-tfd img, #td-fav img{aspect-ratio: 1/1;animation: popin 1.5s;}
#ai-tfd .thumb-div, #td-fav .thumb-div{position:relative;display:inline-block;margin:0 auto;width:100%;max-width:300px;border-radius:10px;background-color:#eee; transition: all 0.3s;}
#ai-tfd .thumb-div:hover, #td-fav .thumb-div:hover{scale:1.05;}
#ai-tfd .thumb-div .thumb-image, #td-fav .thumb-div .thumb-image{width:100%; height:auto; border-radius:10px; object-fit: cover; object-position: center;aspect-ratio: 1/1;position:relative;z-index:2;}
#ai-tfd .thumb-div .btn, #td-fav .thumb-div .btn{display:inline-block;font-size:16px;line-height:16px;text-align:center;background-color:rgba(41,221,245,0.5); color:#fff; border: 1px solid transparent; border-radius:50%; vertical-align: middle;padding:5px; margin:0; cursor: pointer; z-index:3;}
#ai-tfd .thumb-div .btn:hover, #td-fav .thumb-div .btn:hover{background-color:#fff; color:#29ddf5;}
#ai-tfd .thumb-div .btn.top-left, #td-fav .thumb-div .btn.top-left{position:absolute;top:5px;left:5px;}
#ai-tfd .thumb-div .btn.top-right, #td-fav .thumb-div .btn.top-right{position:absolute;top:5px;right:5px;}
#ai-tfd .thumb-div .btn.bottom-right, #td-fav .thumb-div .btn.bottom-right{position:absolute;bottom:5px;right:5px;}
#ai-tfd .thumb-div .btn.center{position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);background-color:transparent;color:#29ddf5;z-index:1;}
#ai-tfd .thumb-div .tfd-info, #td-fav .thumb-div .tfd-info{position:absolute;left:33px;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;margin:5px;width:calc(100% - 66px);z-index:3;}

#ai-tfd.loading .thumb-div .btn.top-left, #ai-tfd.loading .thumb-div .btn.top-right, #ai-tfd.loading .thumb-div .btn.bottom-right{z-index:-1;}
#td-fav.loading .thumb-div .btn.top-left, #td-fav.loading .thumb-div .btn.top-right, #td-fav.loading .thumb-div .btn.bottom-right{z-index:-1;}

#ai-tfd .thumb-div.refresh .btn.top-left, #ai-tfd .thumb-div.refresh .btn.top-right, #ai-tfd .thumb-div.refresh .btn.bottom-right{display:none;}
#ai-tfd .thumb-div.refresh .gim-info{bottom:8px;transform: translate(40px,0%);}
#ai-tfd .thumb-div.refresh .thumb-image{}
#ai-tfd .thumb-div.refresh .btn.center{z-index:3;}