.header-top2-right .pr-xs,.header-logo-center{display:none}
.tryon-ai-form{float:left;width:100%;background:#ebf0f4;padding:10px 10px 10px 0}
.tryon-ai-form .ai-form-left{float:left;width:340px;padding:10px}
.tryon-ai-form .ai-form-right{float:left;width:calc(100% - 340px);padding:0 10px;padding-bottom:130px;height:calc(100vh - 199px);overflow:auto}
.ai-library,.ai-library-radio{float:left;width:100%;margin:0;padding:0}
.ai-library li,.ai-library-radio li{float:left;width:calc(calc(100% / 3) - 8px);margin:4px;list-style:none}
.ai-library li label,.ai-library-radio li label{text-align:center;display:table;width:100%;padding-top:100%;background:#ebedf0;position:relative;border-radius:10px;margin:0;cursor:pointer}
.ai-library li label.checked,.ai-library-radio li label.checked{background:#356bff;color:#fff}
.ai-library li label img.photo,.ai-library-radio li label img.photo{width:calc(100% - 10px);position:absolute;object-fit:cover;left:5px;top:5px;border-radius:5px;box-shadow:#63636333 0 2px 8px 0;transition:.3s;border:2px solid #ebedf0;height:calc(100% + 42px)}
.ai-library li label .code,.ai-library-radio li label .code{font-weight:400;letter-spacing:0;height:28px;vertical-align:middle;text-align:center;width:100%;display:table-cell;line-height:18px;font-size:13px}
.ai-library li label:hover,.ai-library-radio li label:hover{z-index:1}
.ai-library li label input,.ai-library-radio li label input{display:none}
.paging-library{margin-top:15px;float:left;width:100%}
.ai-form-left .tab-pane{padding:5px 0;float:left;width:100%;border-bottom-left-radius:10px;border-bottom-right-radius:10px;height:calc(100vh - 262px);overflow-y:auto;overflow-x:hidden}
.length-lists{float:left;width:100%;margin:0;padding:0;margin-top:5px}
.length-lists li{list-style:none;display:inline-block;margin-right:10px;margin-top:10px}
.length-lists li label{cursor:pointer;font-size:16px;font-weight:700;width:35px;height:35px;padding-top:5px;border-radius:10px;text-align:center}
.length-lists li label:hover{background:#356bff;color:#fff}
.length-lists li label.checked{background:#356bff;color:#fff}
.length-lists li label:first{margin-left:0}
.length-lists li label input{display:none}
.colour-list{float:left;width:100%;margin:0;padding:0;margin-top:15px}
.colour-list li{list-style:none;display:inline-block}
.colour-list li label{margin:5px;text-align:center;background:transparent;border-radius:10px;cursor:pointer}
.colour-list li label:first{margin-left:0}
.colour-list li label span{width:35px;height:35px;border-radius:10px;border:1px solid #999;display:inline-block}
.colour-list li label.checked span{border:4px solid #356bff}
.colour-list li label div{text-align:center}
.colour-list li label span{background-position:center}
.colour-list li label input{display:none}
.bg-black{background:#000}
.bg-red{background:#27422b}
.bg-blonde{background:#b38b67;background:linear-gradient(45deg,#b38b67 0%,#c89f73 20%,#d9b380 40%,#f1cc8f 60%,#fbe7a1 80%)}
.bg-lightbrown{background:#2d170e;background:linear-gradient(45deg,#2d170e 0%,#4d2d1a 20%,#6d4730 40%,#a97e6d 60%,#cc9f88 80%)}
.bg-bombre{background:#66b3b3;background:linear-gradient(45deg,#66b3b3 0%,#0c9393 20%,#0e737f 40%,#015963 60%,#034454 80%)}
.bg-highlight{background:#6d4730;background:linear-gradient(45deg,#2d170e 0%,#fff 25%,#6d4730 50%,#eee 75%,#2d170e 100%)}
.style-lists{float:left;width:100%;margin:0;padding:0;margin-top:15px}
.style-lists li{float:left;width:calc(calc(100% / 3) - 10px);margin:5px;list-style:none}
.style-lists li label{float:left;width:100%;padding-top:120%;background:#ebedf0;position:relative;border-radius:10px;margin:0;cursor:pointer;text-align:center}
.style-lists li label.checked{background:#356bff;color:#fff}
.style-lists li label img.photo{width:calc(100% - 10px);height:calc(100% - 26px);position:absolute;object-fit:cover;left:5px;top:5px;border-radius:10px;box-shadow:#63636333 0 2px 8px 0;transition:.3s;border:2px solid #ebedf0}
.style-lists li label .code{text-align:center;font-weight:bolder;display:block;letter-spacing:2px}
.style-lists li label:hover img.photo{transform:scale(1.5);border:2px solid #356bff;z-index:1}
.style-lists li label input{display:none}
.upload-area{border-radius:10px;text-align:center;float:left;width:100%}
.upload-area label{position:relative;display:inline-block;padding:0;overflow:hidden;border-radius:10px;box-shadow:#0000003d 0 3px 8px}
.upload-area label img{width:160px;height:220px;object-fit:cover;border:1px solid #ebedf0}
.upload-area span{font-size:48px;color:#356bff;position:absolute;left:calc(50% - 20px);top:calc(50% - 50px)}
label{margin-bottom:0!important}
.other-area{margin-left:10%;width:calc(80% - 0px);float:left;padding:0;margin-top:25px}
.other-area .textarea-form{border-radius:10px;background:#fff;border:1px solid #ebedf0;width:100%;height:200px;padding:15px;font-size:16px}
.ai-generated{margin-top:15px;width:100%;float:left}
.ai-generated button{width:100%;float:left;padding:13px;font-size:16px;text-transform:capitalize;border-radius:10px;background:#356bff;color:#fff}
.ai-generated button.blocked{opacity:.5;pointer-events:none}
#prompt_text{background:#F2F5F9;border:1px solid #ddd;border-radius:10px;padding:5px 10px;font-size:14px;font-weight:500;min-height:140px;resize:none}
.key-lists{margin:5px -5px;padding:0}
.key-lists li{padding:0;display:inline-block;margin:5px}
.key-lists li label{font-size:13px;padding:6px 12px;font-weight:400;border-radius:10px;background:#F2F5F9}
.key-lists li label.checked{background:#356bff;color:#fff}
.key-lists li label{cursor:pointer}
.key-lists li label:hover{background:#dcdfe2}
.upload-area2{background:#fff;border-radius:10px;text-align:center;display:inline-block;width:230px;padding:20px 10px;}
.fix-promt .btn-lg{background:#356bff;padding:8px 0;border-radius:10px;color:#fff;margin:0;width:100%;height:68px;overflow:visible}
#id_photo_img,#id_photo_img2{width:200px;height:260px;object-fit:cover;}
.info-des{margin:15px auto 5px;display:inline-block;font-size:16px}
.info-des ul{margin:0;padding:0}
.info-des ul li{padding:0 15px 10px;list-style:none}
.info-des ul li span{width:25px;border-radius:100%;display:inline-block;text-align:center;font-weight:bolder}
.info-des .circle-tutorial{display:no/ne;position:relative;z-index:1}
.info-des:hover .circle-tutorial{display:block}
.circle-tutorial .cir-tuto{position:fixed;text-align:center;width:40px;height:40px;border-radius:100%;font-size:26px;font-weight:700}
.fixed-br{position:fixed;right:0;bottom:43px;background:#bdd;height:130px;width:calc(100% - 340px);overflow:hidden}
.fixed-br .area-br{position:relative;width:100%;height:100%;background:#fff;float:left}
.fixed-br .area-br .area-left{width:80px;height:110px;float:left;padding:0;margin:10px;position:relative}
.fixed-br .area-br .area-left img{display:inline-block;width:100%;height:110px;border-radius:10px;border:1px solid #ddd;object-fit:cover}
.fixed-br .area-br .area-center{height:100%;float:left;text-align:left}
.fixed-br .area-br .area-right{width:160px;height:100%;padding:10px;float:left}
.fix-promt{text-align:center}
#id_t_prompt,#id_prompt{padding:0;font-size:16px;display:inline-block;text-align:left;vertical-align:top;resize:none;box-shadow:none;border-bottom:0;transition:none!important}
#id_t_prompt:hover,#id_t_prompt:focus,#id_prompt:hover{border:none!important;box-shadow:none;transition:none!important;border-radius:0!important}
.fix-promt .form-regis .form-regis-left{display:none}
.fix-promt .form-regis{margin-bottom:15px}
.area-left{position:relative;padding:10px}
.area-center{position:relative;padding:10px}
.area-left .remove-arealeft{position:absolute;cursor:pointer;right:0;padding-top:3px;top:0;text-align:center;width:28px;height:28px;background:#356bff;color:#fff}
.area-center .remove-arealeft{position:absolute;cursor:pointer;right:-11px;padding-top:1px;top:-8px;text-align:center;width:24px;height:24px;border-radius:100%;background:#356bff;color:#fff}
.tryon-template .remove-arealeft{border-top-right-radius:10px;top:inherit;right:inherit;left:0;bottom:0}
.tryon-template .codeid{position:absolute;bottom:0;right:0;width:calc(100% - 28px);background:#00000080;height:26px;color:#fff;font-weight:bolder;padding-top:2px;font-size:13px;letter-spacing:1px}
.area-center ul#id_tryon_tags_container li{padding-right:28px}
.area-center ul#id_tryon_tags_container li .remove-arealeft{border-radius:0;padding-top:5px;border-bottom-right-radius:10px;border-top-right-radius:10px;top:0;right:0;height:100%}
.area-center ul{margin:0;padding:0;text-align:left}
.area-center ul li{list-style:none;display:inline-block;padding:5px 10px;border-radius:10px;background:#f2f2f2;position:relative;margin-right:10px;margin-bottom:10px;font-size:14px}
.area-center .form-regis-left label{display:none}
#id_tryon_tags_container{max-height:54px}
.w-full{width:100%}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#fff;background-color:transparent;border:0 solid #ddd;border-bottom-color:transparent;cursor:default;border-radius:10px;border:1px solid #ddd!important;padding:10px;background:#356bff!important;font-size:13px}
.nav-tabs{border-bottom:0!important}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{border-color:#356bff!important}
#id_templates_container{float:left;width:100%;overflow:auto}
.arrow-right-area{display:inline;vertical-align:middle;height:300px;padding:20px}
.arrow-right-area span{font-size:52px}
.tryon-ai-form{padding:0}
.tryon-ai-form .ai-form-left{background:#fff}
#id_templates_container{overflow:auto;scrollbar-width:thin;scrollbar-color:#ccc #eee;height:calc(100vh - 160px)}
.nav>li>a{padding:10px}
.ai-library li label img.photo,.ai-library-radio li label img.photo{width:calc(100% - 10px);left:5px;box-shadow:none;border:0}
.ai-library li .code,.ai-library-radio li .code{height:24px;position:relative;z-index:1;background:#00000080;color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-weight:700}
.ai-library li label,.ai-library-radio li label{padding-top:120%;overflow:hidden}
.fixed-br{background:transparent}
.fixed-br .area-br .area-center{width:calc(100% - 260px);height:130px;float:left;text-align:left;position:relative}
.nav-tabs.nav-justified>li>a{border-bottom:0}
#id_template_type{float:right;box-shadow:none;width:calc(100% - 60px);border:1px solid #ddd;border-radius:10px;padding-left:10px;background:#F2F5F9}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background-color:#356bff}
.pagination-flat.pagination-sm>li>a,.pagination-flat.pagination-sm>li>span{min-width:27px;width:27px;padding:5px 0!important}
#voice_chat{position:absolute;right:10px;opacity:.5;top:10px;cursor:pointer;z-index:1}
#voice_chat:hover{opacity:1}
.ai-library li label .code.no-promp,.ai-library-radio li label .code.no-promp{color:#27422b}
.tryon_product.disabled{pointer-events:none;opacity:.8}
#subbmitgenarate.effect-target:before{background:#356bff!important}
#subbmitgenarate *{z-index:1}
@media (max-width:768px) {
.header-fixh2,.header-top3{height:66px}
.tryon-ai-form .ai-form-left,.tryon-ai-form .ai-form-right{width:100%}
.nav-tabs.nav-justified li{width:50%;float:left}
.ai-library li,.ai-library-radio li{width:calc(calc(100% / 3) - 8px)}
.ai-library-radio{height:250px;overflow:auto}
.ai-form-right-left{width:100%!important}
.ai-form-right-right{width:100%!important}
.tryon-ai-form .ai-form-right{padding-right:0}
.fixed-br{position:relative;right:inherit;bottom:inherit;width:100%;height:100%}
#id_templates_container,.ai-form-left .tab-pane{height:auto}
.fixed-br .area-br{background-color:transparent;margin-top:20px}
.fixed-br .area-br .area-left{width:100%;text-align:center;height:auto;margin:0}
.fixed-br .area-br .area-left img{max-width:160px;height:auto}
.tryon-ai-form .ai-form-right{height:auto}
.tryon-ai-form .ai-form-right{padding-bottom:30px}
.fixed-br .area-br .area-center,.fixed-br .area-br .area-right{width:100%}
.tryon-template{display:inline-block;width:auto;position:relative}
}
	
/* UI */
	
.text-top-xs{font-size:20px;font-weight:600;margin-top:15px;margin-bottom:-25px;color:#333}
@media (max-width:768px) {
.tryon-ai-form{min-height:calc(100vh - 109px)}
.tryon-ai-form.step1 .step-0{display:block}
.tryon-ai-form .step-0{display:none}
.tryon-ai-form.step1 .ai-form-left,.tryon-ai-form.step1 .ai-form-right-right,.tryon-ai-form.step1 .fixed-br,.tryon-ai-form.step1 .step-1{display:none}
}
.box-option{background:transparent!important}
.reflect-letter{transform:scale(-1,1);display:inline-block}
.ai-form-right-left{float:right;width:calc(100% - 320px)}
.ai-form-right-right{float:left;width:320px;border-right:1px solid #ddd;height:100%;background:#f2f2f2}
.ai-form-right{padding-left:0!important}
.effect-target{position:relative}
.effect-target *{z-index:1;position:relative}
.effect-target:before{background:#fff!important;z-index:1!important;border-radius:15px}
.effect-target img{position:relative;z-index:2}
.effect-target:before,.effect-target:after{content:"";position:absolute;top:0;left:0;width:calc(100% + 2px);height:calc(100% + 2px);background:linear-gradient(45deg,#fff,#00f,#fff,#00f,#fff,#00f,#fff,#00f,#fff,#00f);background-size:400%;z-index:0;animation:shadow 10s linear infinite}
.effect-target:after{top:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px);filter:blur(12px);border-radius:10px;opacity:.9}
@keyframes shadow {
0%{background-position:0 0}
50.01%{background-position:200% 0}
100%{background-position:0 0}
}
#id_result_container{display:inline-block;max-height:calc(100vh - 440px);overflow:auto}
.list-radio-rotate{display:block;text-align:center;margin-top:25px}
.list-radio-rotate label{display:inline-block;padding:5px 10px 5px 5px;margin:5px;border:1px solid #ddd;border-right:0;background:#fff}
.list-radio-rotate label.checked{background:#356bff;color:#fff}
.list-radio-rotate label input{display:none}
.list-radio-rotate label img{height:70px}
.list-radio-rotate label:last-child{border-right:1px;border-top-right-radius:5px;border-bottom-right-radius:5px}
.list-radio-rotate label:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
#id_template_filter{float:right;box-shadow:none;width:100%;border:1px solid #ddd;border-radius:10px;padding-left:10px;background:#F2F5F9;height:38px}
.form-control.key-lists{padding:3px 10px;border:1px solid #ddd;margin-left:0;margin-right:0}
.hint-ai{padding:15px;padding-top:0}
.ai-form-left .tab-pane{height:calc(100vh - 261px)!important}
#hint_offer div,.list-feed-square div{display:inline-block}
.icon-checkbox-checked,.icon-checkbox-unchecked{margin-bottom:-5px;float:left;font-size:20px;margin-right:5px}
.icon-checkbox-checked,.checked .icon-checkbox-unchecked{display:none}
.checked .icon-checkbox-checked{display:block}
#target_htemplate,#target_hstyle,#target_htype,#target_hlength,#target_hother,#target_hcolor{font-weight:bolder;color:#27422b;}
.box-option{margin:10px 0;background:#fffc;padding:10px}
.hover-show{text-transform:capitalize;font-weight:700;cursor:pointer;display:inline-block}
.icon-info22{cursor:pointer}
.tooltip.fade{transition:0s!important}
.hint-ai{float:left;width:100%}
.area-center2{float:left;padding:20px 0 0 20px;text-align:left;position:relative;width:100%}
#id_bt_status2{position:absolute;left:0;top:0;z-index:1}
.st_clear2{position:absolute;width:30px;height:30px;border:1px solid #ddd;text-align:center;cursor:pointer;bottom:16px;border-radius:100%;background:#999;color:#fff;right:10px}
.st_clear2 span{font-size:18px;margin-top:5px}
#chat-box{width:100%;max-height:calc(100vh - 293px);overflow-y:auto;padding:10px}
.message{background-color:#ddd;margin:0 0 10px;padding:10px 15px;float:left;width:100%;text-align:left;animation:slideIn .4s ease;opacity:0;animation-fill-mode:forwards}
@keyframes slideIn {
0%{transform:translateY(20px);opacity:0}
100%{transform:translateY(0);opacity:1}
}
#input-area{margin-top:20px;display:flex;gap:10px}
.area-center .form-regis{padding-left:45px}
.recorderBt{position:relative}
.recorderBt .st_listening{display:none}
.recorderBt .st_listenready{display:block}
#id_bt_status{position:absolute;left:0;top:0;z-index:1}
.recorderBt.listening .st_listening{display:block}
.recorderBt.listening .st_listenready{display:none}
.recorderBt.listening .st_listening{display:block}
.st_clear{position:absolute;width:30px;height:30px;border:1px solid #ddd;text-align:center;cursor:pointer;bottom:16px;border-radius:100%;background:#999;color:#fff;right:10px}
.st_clear span{font-size:18px;margin-top:5px}
#subbmitgenarate .light-off,#subbmitgenarate.disabled .light-on{display:none}
#subbmitgenarate .light-on,#subbmitgenarate.disabled .light-off{display:block}
.task-right{display:none}
.ai-form-right-left{float:right;width:calc(100% - 660px);text-align:center}
.ai-form-right-right{float:left}
.nav-tabs li a{text-align:center!important}
@media (max-width:768px) {
.nav-tabs.affix{top:223px;left:0;position:fixed;z-index:4!important;padding:5px 10px}
.ai-library-radio{height:auto}
.st_clear{left:2px}
.ai-form-right-left{margin-bottom:50px}
.area-center ul li{background:#ddd}
.fixed-br .area-br{margin-top:0}
.fixed-br .area-br .area-center{height:auto}
.fixed-br .area-br .area-right{padding-top:50px}
.upload-area2.affix{width:100%;text-align:center;left:0;top:64px;z-index:4;margin-top:0}
.upload-area2 img{transition:.3s}
.upload-area2.affix img{width:110px!important;height:120px!important}
.area-center{display:none}
}
/* #id_photo_img{border:8px solid #ddd} */
#id_photo_modal_name{height:120px;width:30px;background:#ddd;display:inline-block;position:relative;vertical-align:middle;margin-left:-10px;transition:.3s;border-top-right-radius:10px;border-bottom-right-radius:10px}
#id_photo_modal_name:after{content:"Hair Model";transform:rotate(-90deg);position:absolute;width:120px;left:-45px;transition:.3s;top:50px;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:#999}
#id_photo_img_name{height:260px;width:30px;background:#ddd;display:inline-block;position:relative;vertical-align:top;margin-right:-10px;border-top-left-radius:10px;border-bottom-left-radius:10px;transition:.3s}
#id_photo_img_name:after{content:"Your Portrait";transform:rotate(-90deg);position:absolute;width:260px;left:-112px;top:117px;transition:.3s;font-size:18px;text-transform:uppercase;font-weight:700;letter-spacing:2px;color:#999}
#id_photo_img_name.submit{background:#356bff!important}
#id_photo_img_name.submit:after{content:"Generate";color:#fff!important}
#id_photo_img_name{display:none}
#id_photo_modal{display:none}
#id_photo_modal_name{display:none}
@media (max-width:768px) {
.upload-area2{width:auto}
#id_photo_img_name{display:inline-block}
.mb-show #id_photo_modal{display:inline-block}
.mb-show #id_photo_modal_name{display:inline-block}
.upload-area2 #id_photo_modal{width:90px;margin-left:20px;height:120px;object-fit:cover;border-radius:10px;border:5px solid #ddd}
.upload-area2.affix img#id_photo_modal{width:90px!important;height:120px!important}
.upload-area2.affix #id_photo_img_name{height:120px;width:25px}
.upload-area2.affix #id_photo_img_name:after{left:-115px;top:52px;font-size:12px;letter-spacing:0}
#id_tryon_template_container{display:none}
#id_result_container{max-height:inherit!important}
}