*{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;}

body.dark-mode {background-color:#222;color:#fff;}

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

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

body.dark-mode .cont-02{background-color: #444; color: #f9fafb;}
body.dark-mode .cont-0f{background-color: #444; color: #29ddf5;}

.cont-01, .cont-02 .inner{min-height:300px;}
.cont-01.gim .inner, .cont-01.cim .inner, .cont-01.tpi .inner, .cont-01.ati .inner, .cont-01.dfi .inner, .cont-01.tbg .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;border-bottom:1px solid #f3f4f6; box-shadow: 0 4px 4px -1px #f3f4f6;background-color:#fff;}
body.dark-mode #header{background-color:#222;color:#fff;}

#header .inner{padding:20px 0;text-align:center;max-width:1800px;}

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

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

body.scrolled #header{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:2px 8px;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;}

.inp-primary, .sel-primary, input[type=number].inp-primary {background-color: #0288D1; color: white; border:none;}
.opt-primary{background-color: transparent; color: white;}

.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;position: relative;}
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.menu li .toggle, ul.menu li [id^=drop] {display: none;}

ul.menu ul {position: absolute; top: 30px; left:0; display: none; background-color:#fff; z-index: 99;}

ul.menu li:hover > ul { display:block; }

ul.menu ul li {text-align:left; width:300px; position: relative; display: list-item;}

ul.menu li > a:after { content: ' +'; }
ul.menu li > a:only-child:after { content: ''; }


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}

body.dark-mode ul.menu li a{color:#f9f9f9;}

@media only screen and (max-width: 768px) {
	ul.mobile-menu{display:block}
	ul.menu{display:none;margin:0;padding:0;height:auto;background-color: #fff;}
	ul.menu li{background-color:#fff;text-align:left;height:unset;}
	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;}

	ul.menu li .toggle {display: block;font-size:1.0em;font-weight:400;text-align:left;vertical-align:middle;padding:0;width:100%;background-color:transparent; cursor: pointer;}
	ul.menu li .toggle + a { display: none; }
	ul.menu li [id^=drop]:checked + ul { display: block; }
	ul.menu li:hover > ul { display: none; }
	ul.menu ul {float: none; position: static; top:0; left:0;}
	ul.menu ul li, ul.menu ul li:first-child, ul.menu ul li:last-child {padding:0 0 0 10px; width: 100%; display: block;}
	ul.menu ul li:last-child{border-bottom:0;}

	#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:10px;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;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%;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;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);}

body.dark-mode a.button.s{background-color: #0288D1; color: white; background-image:none; border-color:#0288D1;}
body.dark-mode a.button.s:hover, body.dark-mode a.button.s:active{background-color: #0277BD;}

#login{width:300px;margin: 0 auto;}

.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-color: #999; line-height: 44px;}

.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;padding:8px 16px;margin:5px;border:none;border-radius:0.5em;box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);background-color: #0288D1;color: white;}
.btn-primary:hover{background-color: #0277BD;box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);}

.btn-primary:disabled{background-color: #B0BEC5; cursor: not-allowed; pointer-events: all !important;}


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

a.btn-dwn-img{font-size:16px;line-height:16px;display:inline-block;text-align:center;text-decoration:none;background-color:#0288D1;color:#fff;padding:8px 16px;margin:5px;border-radius:0.25em;box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.25);}
a.btn-dwn-img:active,a.btn-dwn-img:link,a.btn-dwn-img:visited{text-decoration:none;background-color:#0288D1;color:#fff;}
a.btn-dwn-img:hover, a.btn-dwn-img:active{background-color:#0277BD;box-shadow:none;}

@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;}
body.dark-mode td, body.dark-mode th {color:#444;}

body.dark-mode .cont-01.admin.rpl .inner td, body.dark-mode .cont-01.admin.rwr .inner td, body.dark-mode .cont-01.admin.kie .inner td {color:#fff;}

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;}
.af_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(12% - 10px);}
.uploaded-img-thumb{width:100%; height:auto; border-radius:6px; object-fit: cover; object-position: center;aspect-ratio: 2/3;}
.uploaded-info{position:absolute;left:0;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;text-shadow:0 0 2px #000;margin:5px;width: 100%;}

.uploaded-img-thumb-div .btn.center{position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);background-color:transparent;z-index:3;animation: none !important;}

#images div{animation: popin 1s;}
#images div a.btn-delete-img{text-decoration:none;animation: btnin 0.5s;}

#ref-img-upload{}

.upload-area{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: 10px; vertical-align:top; cursor:pointer;}
body.dark-mode .upload-area{background-color:#666; border-color: #eee;}

.upload-area .fa-cloud-upload{color: #3699FF;}
body.dark-mode .fa-cloud-upload{color: #FFF;}

#preview{text-align: center; overflow: auto; padding: 10px;}

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

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

#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;text-shadow:0 0 2px #000;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;}

#ai-images-settings .col{text-align:center; border: 2px dashed #3699FF; border-radius: 10px; padding: 10px; margin: 10px auto;}
.gim #ai-images-settings .col{line-height: 30px;}
body.dark-mode #ai-images-settings .col{background-color:#666;border-color: #999;}

#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{width:calc(12% - 10px);}
	#preview .thumb-div, #generated-images .thumb-div{width:calc(25% - 20px);}
}

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

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


@media only screen and (max-width: 320px){
	.uploaded-img-thumb-div{width:calc(50% - 15px);}
	.cont-01.cim .uploaded-img-thumb-div, .cont-01.tpi .uploaded-img-thumb-div{width:calc(25% - 15px);}
	#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(200px, 1fr)); gap: 1rem;margin:20px 0;width:100%;}
#ai-cim .thumb-div{position:relative;display:inline-block;width:100%;max-width:200px;height: fit-content;margin:0 auto;border:0; border-radius:10px; background-color:#eee; transition: all 0.3s;}
#ai-cim .thumb-div:hover{scale:1.05;}
#ai-cim .thumb-div img{animation: popin 1s;}
#ai-cim .thumb-div .thumb-image{width:100%; height:auto; border-radius:10px; object-fit: cover; object-position: center;aspect-ratio: 2/3;position:relative;z-index:2;}


#ai-gim, #ai-fav{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;margin:20px 0;width:100%;}
#ai-gim img, #ai-fav img{animation: popin 1.5s;}
#ai-gim .thumb-div, #ai-fav .thumb-div{position:relative;display:inline-block;width:100%;max-width:200px;height: fit-content;margin:0 auto;border:0;border-radius:10px;background-color:#eee; transition: all 0.3s;}

#ai-fav.left {display: block;}
#ai-fav.left .thumb-div{margin:0 10px;}
#ai-fav.left .thumb-div:first-child{margin-left:0}
#ai-fav.left .thumb-div:last-child{margin-right:0}
#ai-fav.center .thumb-div{}
#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;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, #ai-cim .thumb-div .btn.center{position:absolute;left:52%;top:40%;transform: translate(-50%,-50%);background-color:transparent;color:#29ddf5;z-index:1;}
#ai-gim .thumb-div .gim-info, #ai-fav .thumb-div .fav-info, #ai-cim .thumb-div .cim-info{position:absolute;left:33px;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;text-shadow:0 0 2px #000;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:12px; /* 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;}

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


.main-container {
    width: 100%;
    max-width: 720px;
    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, .cim .input-group {
    margin-bottom: 16px;
}

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

.tinder-bio-generator .input-field, .cim .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, .cim .input-field:focus {
    outline: none;
    border-color: #0288D1;
}
.btn{font-size: 1rem;font-weight: bold;padding: 8px 16px;border: none;border-radius: 4px;cursor: pointer;}

.btn-generate{font-size: 1rem;font-weight: bold;background-color: #0288D1;color: white;padding: 8px 16px;border: none;border-radius: 4px; cursor: pointer;}
.btn-generate:before{content:"✨";}
.btn-generate:hover{background-color: #0277BD;}
.btn-generate:disabled{background-color: #B0BEC5; cursor: not-allowed;}
.btn-generate:disabled:before{content:"";}

.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;
    padding: 8px;
    font-size: 1rem;
    color: #263238;
    resize: none;
    box-sizing: border-box;
}

.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: 0.5rem 1rem;
    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;
    color:#444;
    border-radius: 6px;
    border: 1px solid #ddd;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

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

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

.cim .output-text {
    width: 100%;
    height: 120px;
    background-color: white;
    border: 1px solid #B0BEC5;
    border-radius: 4px;
    padding: 8px;
    font-size: 0.9rem;
    color: #263238;
    resize: none;
    box-sizing: border-box;
}

.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;
    pointer-events: none;
}


#ai-tpi, #td-fav{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;margin:20px 0;width:100%;}
#ai-tpi img, #td-fav img{aspect-ratio: 1/1;animation: popin 1.5s;}
#ai-tpi .thumb-div, #td-fav .thumb-div{position:relative;display:inline-block;width:100%;max-width:200px;height: fit-content;margin:0 auto;border:0; border-radius:10px; background-color:#eee; transition: all 0.3s;}

#ai-tpi .thumb-div:hover, #td-fav .thumb-div:hover{scale:1.05;}
#ai-tpi .thumb-div .thumb-image, #td-fav .thumb-div .thumb-image{width:100%; height:auto; border-radius:10px; object-fit: cover; object-position: center;position:relative;z-index:2;}
#ai-tpi .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-tpi .thumb-div .btn:hover, #td-fav .thumb-div .btn:hover{background-color:#fff; color:#29ddf5;}
#ai-tpi .thumb-div .btn.top-left, #td-fav .thumb-div .btn.top-left{position:absolute;top:5px;left:5px;}
#ai-tpi .thumb-div .btn.top-right, #td-fav .thumb-div .btn.top-right{position:absolute;top:5px;right:5px;}
#ai-tpi .thumb-div .btn.bottom-right, #td-fav .thumb-div .btn.bottom-right{position:absolute;bottom:5px;right:5px;}
#ai-tpi .thumb-div .btn.center{position:absolute;left:52%;top:40%;transform: translate(-50%,-50%);background-color:transparent;color:#29ddf5;z-index:1;}
#ai-tpi .thumb-div .tpi-info, #td-fav .thumb-div .fav-info{position:absolute;left:33px;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;text-shadow:0 0 2px #000;margin:5px;width:calc(100% - 66px);z-index:3;}

#ai-tpi.loading .thumb-div .btn.top-left, #ai-tpi.loading .thumb-div .btn.top-right, #ai-tpi.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-tpi .thumb-div.refresh .btn.top-left, #ai-tpi .thumb-div.refresh .btn.top-right, #ai-tpi .thumb-div.refresh .btn.bottom-right{display:none;}
#ai-tpi .thumb-div.refresh .tpi-info{bottom:12px;}
#ai-tpi .thumb-div.refresh .thumb-image{}
#ai-tpi .thumb-div.refresh .btn.center{z-index:3;}


#ai-ati, #at-fav{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;margin:20px 0;width:100%;}
#ai-ati img, #at-fav img{aspect-ratio: 1/1;animation: popin 1.5s;}
#ai-ati .thumb-div, #at-fav .thumb-div{position:relative;display:inline-block;width:100%;max-width:200px;height: fit-content;margin:0 auto;border:0; border-radius:10px; background-color:#eee; transition: all 0.3s;}

#ai-ati .thumb-div:hover, #at-fav .thumb-div:hover{scale:1.05;}
#ai-ati .thumb-div .thumb-image, #at-fav .thumb-div .thumb-image{width:100%; height:auto; border-radius:10px; object-fit: cover; object-position: center;position:relative;z-index:2;}
#ai-ati .thumb-div .btn, #at-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-ati .thumb-div .btn:hover, #at-fav .thumb-div .btn:hover{background-color:#fff; color:#29ddf5;}
#ai-ati .thumb-div .btn.top-left, #at-fav .thumb-div .btn.top-left{position:absolute;top:5px;left:5px;}
#ai-ati .thumb-div .btn.top-right, #at-fav .thumb-div .btn.top-right{position:absolute;top:5px;right:5px;}
#ai-ati .thumb-div .btn.bottom-right, #at-fav .thumb-div .btn.bottom-right{position:absolute;bottom:5px;right:5px;}
#ai-ati .thumb-div .btn.center{position:absolute;left:52%;top:40%;transform: translate(-50%,-50%);background-color:transparent;color:#29ddf5;z-index:1;}
#ai-ati .thumb-div .ati-info, #at-fav .thumb-div .fav-info{position:absolute;left:33px;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;text-shadow:0 0 2px #000;margin:5px;width:calc(100% - 66px);z-index:3;}

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

#ai-ati .thumb-div.refresh .btn.top-left, #ai-ati .thumb-div.refresh .btn.top-right, #ai-ati .thumb-div.refresh .btn.bottom-right{display:none;}
#ai-ati .thumb-div.refresh .ati-info{bottom:12px;}
#ai-ati .thumb-div.refresh .thumb-image{}
#ai-ati .thumb-div.refresh .btn.center{z-index:3;}

#ai-dfi, #df-fav{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;margin:20px 0;width:100%;}
#ai-dfi img, #df-fav img{aspect-ratio: 1/1;animation: popin 1.5s;}
#ai-dfi .thumb-div, #df-fav .thumb-div{position:relative;display:inline-block;width:100%;max-width:200px;height: fit-content;margin:0 auto;border:0; border-radius:10px; background-color:#eee; transition: all 0.3s;}

#ai-dfi .thumb-div:hover, #df-fav .thumb-div:hover{scale:1.05;}
#ai-dfi .thumb-div .thumb-image, #df-fav .thumb-div .thumb-image{width:100%; height:auto; border-radius:10px; object-fit: cover; object-position: center;position:relative;z-index:2;}
#ai-dfi .thumb-div .btn, #df-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-dfi .thumb-div .btn:hover, #df-fav .thumb-div .btn:hover{background-color:#fff; color:#29ddf5;}
#ai-dfi .thumb-div .btn.top-left, #df-fav .thumb-div .btn.top-left{position:absolute;top:5px;left:5px;}
#ai-dfi .thumb-div .btn.top-right, #df-fav .thumb-div .btn.top-right{position:absolute;top:5px;right:5px;}
#ai-dfi .thumb-div .btn.bottom-right, #df-fav .thumb-div .btn.bottom-right{position:absolute;bottom:5px;right:5px;}
#ai-dfi .thumb-div .btn.center{position:absolute;left:52%;top:40%;transform: translate(-50%,-50%);background-color:transparent;color:#29ddf5;z-index:1;}
#ai-dfi .thumb-div .dfi-info, #df-fav .thumb-div .fav-info{position:absolute;left:33px;bottom:0;font-size:12px;line-height:14px;text-align:center;color:#fff;text-shadow:0 0 2px #000;margin:5px;width:calc(100% - 66px);z-index:3;}

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

#ai-dfi .thumb-div.refresh .btn.top-left, #ai-dfi .thumb-div.refresh .btn.top-right, #ai-dfi .thumb-div.refresh .btn.bottom-right{display:none;}
#ai-dfi .thumb-div.refresh .dfi-info{bottom:12px;}
#ai-dfi .thumb-div.refresh .thumb-image{}
#ai-dfi .thumb-div.refresh .btn.center{z-index:3;}


button:disabled{cursor: not-allowed; pointer-events: all !important;}

body.dark-mode .main-container{background-color: #444;color:#fff;}
body.dark-mode ul.mobile-menu li .list{background-color:#444;color:#fff;}

@media only screen and (max-width: 768px) {
	body.dark-mode ul.menu li {background-color:#444;color:#fff;}
}

body.dark-mode .tinder-bio-generator .label, body.dark-mode .tider-profil .label, body.dark-mode .cim .label {
	color:#fff;
}


.ati .grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0.5rem 1rem;}
.ati .card {display:flex;align-items: center;background:#fafafa;padding:10px;border:1px solid #e0e0e0;border-radius:8px;}
.ati .card .label-row {display:flex;align-items:center;gap:0.5rem;font-size:14px;font-weight:500;width: calc(100% - 110px);cursor:pointer;}
.ati .card .label-row:hover{color: #0288D1;}
.ati .card .label-row:has(input[type="checkbox"]:checked) {color: #0288D1;}
.ati .card .label-row span {width:calc(100% - 40px);}
.ati .card .num-control {display:flex;align-items:center;gap:6px;margin-top:6px;height:30px;}
.ati .card .num-control input[type=number]::-webkit-inner-spin-button, .ati .card .num-control input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none;margin:0;}
.ati .card .num-control input[type=number] {-moz-appearance:textfield;}
.ati .card .num-control input[type=number] {font-size:14px;text-align:center;width:48px;padding:2px 4px;border:1px solid #bbb;border-radius:6px;}
.ati .card .btn-minus, .ati .card .btn-plus {font-size:16px;font-weight:700;line-height:1;background:#e0e0e0;width:26px;height:26px;border:none;border-radius:6px;cursor:pointer;}
.ati .card .btn-minus:active, .ati .card .btn-minus:hover, .ati .card .btn-plus:active, .ati .card .btn-plus:hover {transform:scale(0.95); color:#0066cc;}
.ati .select-all {display:flex;align-items: center;font-size:14px;background-color: #0288D1;color: #fff;padding:6px 10px;margin:20px auto;width:320px;max-width:90%;border-radius:6px;}
.ati .select-all label span{font-weight:600;color: #fff;margin-left:15px;}
.ati #selectAll{width:22px;height:22px;accent-color:#fff;}
.ati #selectAll:hover{accent-color:#d00;}
.ati .summary {font-size:14px;font-weight:600;text-align:center;background:#e8f4ff;color:#444;margin:0.9rem 0;padding:6px;border-radius:6px;}
.ati .actions {margin:20px auto 10px auto;}

@media (max-width:660px) {
	.ati .card {padding:5px;}
	.ati .btn-minus, .btn-plus {width:30px;}
	.ati .num-control input[type=number] {font-size:16px;width:34px;}
}

.dfi .grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0.5rem 1rem;}
.dfi .card {display:flex;align-items: center;background:#fafafa;padding:10px;border:1px solid #e0e0e0;border-radius:8px;}
.dfi .card .label-row {display:flex;align-items:center;gap:0.5rem;font-size:14px;font-weight:500;width: calc(100% - 110px);cursor:pointer;}
.dfi .card .label-row:hover{color: #0288D1;}
.dfi .card .label-row:has(input[type="checkbox"]:checked) {color: #0288D1;}
.dfi .card .label-row span {width:calc(100% - 40px);}
.dfi .card .num-control {display:flex;align-items:center;gap:6px;margin-top:6px;height:30px;}
.dfi .card .num-control input[type=number]::-webkit-inner-spin-button, .dfi .card .num-control input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none;margin:0;}
.dfi .card .num-control input[type=number] {-moz-appearance:textfield;}
.dfi .card .num-control input[type=number] {font-size:14px;text-align:center;width:48px;padding:2px 4px;border:1px solid #bbb;border-radius:6px;}
.dfi .card .btn-minus, .dfi .card .btn-plus {font-size:16px;font-weight:700;line-height:1;background:#e0e0e0;width:26px;height:26px;border:none;border-radius:6px;cursor:pointer;}
.dfi .card .btn-minus:active, .dfi .card .btn-minus:hover, .dfi .card .btn-plus:active, .dfi .card .btn-plus:hover {transform:scale(0.95); color:#0066cc;}
.dfi .select-all {display:flex;align-items: center;font-size:14px;background-color: #0288D1;color: #fff;padding:6px 10px;margin:20px auto;width:320px;max-width:90%;border-radius:6px;}
.dfi .select-all label span{font-weight:600;color: #fff;margin-left:15px;}
.dfi #selectAll{width:22px;height:22px;accent-color:#fff;}
.dfi #selectAll:hover{accent-color:#d00;}
.dfi .summary {font-size:14px;font-weight:600;text-align:center;background:#e8f4ff;color:#444;margin:0.9rem 0;padding:6px;border-radius:6px;}
.dfi .actions {margin:20px auto 10px auto;}

@media (max-width:660px) {
	.dfi .card {padding:5px;}
	.dfi .btn-minus, .btn-plus {width:30px;}
	.dfi .num-control input[type=number] {font-size:16px;width:34px;}
}

.switch{position:relative;display:inline-block;}
.switch-input{display:none;}
.switch-label{display:block;width:48px;height:24px;text-indent:-150%;clip:rect(0 0 0 0);color:transparent;user-select:none;}
.switch-label::after, .switch-label::before{content:"";display:block;position:absolute;cursor:pointer;}
.switch-label::before{width:100%;height:100%;background-color:#dedede;border-radius:9999em;-webkit-transition:background-color .25s;transition:background-color .25s;}
.switch-label::after{top:0;left:0;width:24px;height:24px;border-radius:50%;background-color:#fff;box-shadow:0 0 2px rgba(0,0,0,.45);-webkit-transition:left .25s;transition:left .25s;}
.switch-input:checked +.switch-label::before{background-color:#0288D1;}
.switch-input:checked +.switch-label::after{left:24px;}

@media only screen and (max-width: 660px) {
	.main-container{padding:10px 5px;}
}

.gim input::-webkit-outer-spin-button, .gim input::-webkit-inner-spin-button, .cim input::-webkit-outer-spin-button, .cim input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.gim input[type=number], .cim input[type=number] {-moz-appearance: textfield; appearance: textfield;}

.gim .btn-minus, .gim .btn-plus, .cim .btn-minus, .cim .btn-plus {font-size:16px;font-weight:700;line-height:1;background-color: #0288D1; color: white;width:30px;height:30px;border:none;border-radius:6px;cursor:pointer;}
.gim .btn-minus:active, .gim .btn-minus:hover, .gim .btn-plus:active, .gim .btn-plus:hover {transform:scale(0.95);}
.cim .btn-minus:active, .cim .btn-minus:hover, .cim .btn-plus:active, .cim .btn-plus:hover {transform:scale(0.95);}

input[type=range] {
  -webkit-appearance: none;
  background-color: transparent;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #0288D1;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #eee;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #0288D1;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #0288D1;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #eee;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #0288D1;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #0288D1;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #eee;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #0288D1;
}
input[type=range]:focus::-ms-fill-upper {
  background: #0288D1;
}

.youtube-container{position:relative;display:block;margin:0 auto 25px auto;width:100%;max-width:960px}
.youtube-player{position:relative;display:block;overflow:hidden;width:100%;height:0;cursor:pointer;margin:0;padding:0;padding-bottom:56.25%;border:0;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;border:0;}
img.youtube-thumb{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%}

div.play-button{position:absolute;left:calc(50% - 35px);top:calc(50% - 24px);width:70px;height:49px;margin:0;background:url(https://alomferfi.portfolio-fotozas-ferfiaknak.com/img/youtube-style-play-button.png) no-repeat;background-size:100% 100%;}
div.play-button:hover{background:url(https://alomferfi.portfolio-fotozas-ferfiaknak.com/img/youtube-style-play-button-hover.png) no-repeat;}
.youtube-player:hover div.play-button{background:url(https://alomferfi.portfolio-fotozas-ferfiaknak.com/img/youtube-style-play-button-hover.png) no-repeat;background-size:100% 100%;}
.youtube-iframe{width:100%;height:100%;position:absolute;top:0;left:0;bottom:0;right:0}
#youtube-iframe{width:100%;height:100%;position:absolute;top:0;left:0;bottom:0;right:0}

.youtube-player-title {font-family:Helvetica, Arial, sans-serif;font-size:16px;line-height:40px;position:absolute;left:0;top:0;width:100%;height:60px;background-image:linear-gradient(to bottom, #444, transparent);color:#fff;padding:5px;overflow:hidden;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis;z-index:9;}
.youtube-player-bottom{position:absolute;left:2%;bottom:0;width:96%;border-top:4px solid rgba(240, 240, 240, 0.5);z-index:9;}
.youtube-player-bottom .tri-ico {position:absolute;left:10px;bottom:4px;width:0;height:0;border-style:solid;border-width:8px 0 8px 16px;border-color:transparent transparent transparent rgba(255, 255, 255, .5);}

.youtube-player.active .youtube-player-title{display:none;}
.youtube-player.active .youtube-player-bottom{display:none;}

.youtube-player-title-inner{position:absolute;left:0;top:0;background-color:rgb(0,0,0,.5);width:0;height:60px;border-radius:30px 0 6px 30px;z-index:-1;transition: width 1s;transition-timing-function: ease-in-out;}
.youtube-player-title:hover .youtube-player-title-inner{width:95%;}

.youtube-player:hover .youtube-player-bottom{border-color:rgba(240, 240, 240, .6);}
.youtube-player:hover .youtube-player-bottom .tri-ico {border-color:transparent transparent transparent rgba(255, 255, 255, .9);}
.youtube-player-bottom:before {content:'-';color:transparent;border-top:4px solid #d00;}

@media only screen and (max-width:480px){
	div.play-button{position:absolute;left:calc(50% - 28px);top:calc(50% - 17px);width:56px;height:35px;background-size:56px 35px;margin:0;}
}

#theme-li{cursor:pointer;}
#theme-li:hover{color:#0288D1;}

body.dark-mode a, body.dark-mode a:visited{color:#fff;text-decoration:underline}
body.dark-mode a:hover{color:#eee;text-decoration:none}

body.dark-mode #header{box-shadow: unset;}

body.dark-mode .tr_white{background-color:#1f2937;}

body.dark-mode .tr_white td, body.dark-mode .tr_white th{color:#eee;}

body.dark-mode .tr_yellow{background-color:#374151;}

body.dark-mode .tr_yellow td, body.dark-mode .tr_yellow th{color:#eee;}

body.dark-mode table.border thead th, body.dark-mode table.border td.tfoot {background-color: #212121; color: #fff;}

body.dark-mode table.border tbody tr:hover {background-color:#6366f1;}

body.dark-mode table.border tbody tr:hover td{color:#fff;}

body.dark-mode #theme-li:hover{color:#29ddf5;}

body.dark-mode #modal .modal{background-color: #222; color: #fff; border-color: #666;}

body.dark-mode .tider-profil .checkboxes label{background-color:#333;color:#ccc;border-color:#999;}

body.dark-mode .card {background-color:#333;color:#ccc;border-color:#999;}

body.dark-mode input[type=text]:not(.clearable), body.dark-mode input[type=number]:not(.inp-primary), body.dark-mode input[type=password]:not(.inp-primary), 
body.dark-mode textarea, body.dark-mode select:not(.sel-primary, .color_sel) {background-color: #515151; color: #fff;}

body.admin.dark-mode ul.menu li a img{background-color:silver;}

body.admin .tr_white td .fa:hover, body.admin .tr_yellow td .fa:hover{color:#f64;}
body.admin.dark-mode .tr_white td .fa:hover, body.admin.dark-mode .tr_yellow td .fa:hover{color:#1f2937;}

body.dark-mode ul.menu ul {background-color: #222;}

body.dark-mode .result{background: #515151;}