html,
body{font-size: 16px;font-weight: 400;background-color:#fff;width:100%;height: 100%; min-width:1200px;margin:0;padding: 0;color: #333;text-align:inherit;}
div, dl, dt, dd, ul, li,ol, h1, h2, h3, h4, h5, h6, form, fieldset, input,button, textarea, p{margin:0; padding:0;} 
ol,ul,dl,li{list-style:none;}
em,i{font-style:normal;}
img{border:none;vertical-align:middle;}
select,input,button{ padding:0; margin:0;border: 0; outline: none;}
table {border-collapse: collapse; border-spacing: 0;}
a{text-decoration:none;color:#666;outline:none; cursor:pointer;}
a:hover{color: #ff7318; cursor:pointer;text-decoration: none;}
a:focus{text-decoration: none;}
iframe{margin: 0;padding: 0;}


.bg-white{background-color: #fff;}
.bg-light-grey{background-color:#f6f6f6;}
.bg-purple{background-color: #595bd4;}
.fs-12{font-size: 12px!important;}
.fs-13{font-size: 13px!important;}
.fs-14{font-size: 14px!important;}
.fs-15{font-size: 15px!important;}
.fs-16{font-size: 16px!important;}
.fs-18{font-size: 18px!important;}
.fs-20{font-size: 20px!important;}
.fs-24{font-size: 24px!important;}
.fs-30{font-size: 30px!important;}
.fs-36{font-size: 36px!important;}
.fs-40{font-size: 40px!important;}
.fs-50{font-size: 50px!important;}
.fs-60{font-size: 60px!important;}
.fs-80{font-size: 80px!important;}
.fs-100{font-size: 100px!important;}
.fs-200{font-size: 200px!important;}

.rounded-10{border-radius: 10px;}
.rounded-16{border-radius: 16px;}

.gap-2{gap: .5rem;}
.gap-10{gap: 10px;}

.btn-outline-grey{background-color: transparent;border: solid 1px #ddd;color: #333;}
.btn-outline-grey:hover{border-color: #999;}
.btn-orange{background-color: #fd860e;color: #fff;}
.btn-orange:hover{background-color: #fd6802;color: #fff;}
.btn-outline-orange{background-color: transparent;color: #fd860e;border-color: #fd860e;}
.btn-outline-orange:hover{background-color: transparent;color: #fd6802;border-color: #fd6802;}

.btn-purple{background-color:rgba(89,91,212,1);color: #fff;}
.btn-purple:hover{background-color: rgba(80,82,191,1);color: #fff;}
.btn-purple:focus{box-shadow: 0 0 0 .2rem rgba(89,91,212, .25);}
.btn-outline-purple{background-color: #eeeefb;color: rgba(89,91,212,1);border-color:rgba(89,91,212,1);}
.btn-outline-purple:hover{background-color: rgba(89,91,212,1);color: rgba(255,255,255,1);border-color:rgba(89,91,212,1);}

.text-grey{color: #999;}
.text-ccc{color: #ccc;}
.text-grey-666{color: #666;}
.text-purple{color: #595bd4;}
.lh-1{line-height: 1;}

.p-20{padding: 20px;}
.p-30{padding: 30px;}
.p-40{padding: 40px;}
.py-30{padding-top: 30px!important;padding-bottom: 30px!important;}
.my-30{margin-top: 30px!important;margin-bottom: 30px!important;}
.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.m-30{margin:30px;}

.tips-loading{display: none;}
.loading-mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, .5);z-index: 1090;}
.loading{width: 70px;height: 70px;display: flex;justify-content: center;align-items: center; text-align: center; background: rgba(0, 0, 0, 0.5);position:fixed;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index:1060;border-radius: 5px;color: #ccc;font-weight: 400;}


.topnav{height: 36px;border-bottom: solid 1px #eee;background: #f2f2f2;}
.topnav .nav-item{position: relative;line-height: 35px;font-size: 13px;}
.topnav .nav-item:before{position: absolute;content:""; width:1px;height: 12px;display:block;background:#e5e5e5; top: 12px;left:0px;}
[dir=rtl] .topnav .nav-item:before{left:auto;right: 0px;}
.topnav .nav-item:first-child:before{display: none;}
.topnav .nav-link{padding: 0 15px;color: #999;cursor: pointer;line-height: 35px;font-size: 13px;display: flex;align-items: center;transition: all .2s ease-in-out;}
.topnav .nav-item:last-child .nav-link{padding: 0 0 0 15px;}
[dir=rtl] .topnav .nav-item:last-child .nav-link{padding: 0 15px 0 0px;}
.topnav .nav-link:hover{color: #ff7318;}
.topnav .nav-link .ap-icon{margin-right: 5px;}
.topnav .nav-link .icon-shopify{margin-right: 8px;}
[dir=rtl] .topnav .nav-link .icon-shopify{margin-right: 0px;margin-left: 8px;}
[dir=rtl] .topnav .nav-link .ap-icon{margin-right: 0px;margin-left: 5px;}
.topnav .nav-link .icon-dollar-bag{font-size: 18px;}
.topnav .nav-link.text-primary{}
.topnav .nav-link.text-primary:hover{}
.topnav .nav-link.time{cursor:default;display: flex; align-items: center;}
.topnav .nav-link.time:hover{color: #999;}


.translate-top{padding: 0px 15px;}

.section-header{border-bottom: solid 1px rgba(0, 0, 0, .1);padding: 0 30px;height: 76px;display: flex;flex-direction: column;justify-content: center;}
.section-header .brand{display: flex;align-items:center; gap: 10px;}
.section-header .brand .logo{display: block;margin: 0;font-size: 0;height: 30px;}
.section-header .brand .logo img{height: 30px;}
.section-header .header-title{color: #999;font-size: 16px;margin-bottom: 0;}
.section-header .tag-beta{background-color: #f5f5f5;color: #b8b8b8;border: solid 1px #ddd;border-radius: 100rem;font-size: 12px;padding: 0 6px;height: 16px;display: flex;align-items:center;}
.image-edit-nav{background-color: #fff;border-radius: 10px 10px 0 0;padding: 0 20px;border-bottom: solid 1px rgba(0, 0, 0, .1);}
.image-edit-nav ul{display: flex;align-items: center;gap: 30px;}
.image-edit-nav li{display: flex;align-items: center;gap: 8px;}
.image-edit-nav .nav-link{font-size: 16px;display: flex;align-items: center;padding: .5rem 0;position: relative;}
.image-edit-nav .nav-link.active{color: #ff7318;}
.image-edit-nav .nav-link.active::after{height: 2px;border-bottom: solid 2px #ff7318;position: absolute;bottom: -1px;width: 100%;display: block;content:"";}


.section-container{max-width: 100%;min-width: 1260px;margin:auto;padding-left:30px;padding-right: 30px;}

@-webkit-keyframes fadedown { 0% { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(36px)!important; } }
@keyframes fadedown { 0% { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(36px)!important; } }

.language{position: relative;}
.language-toggler{display: flex;align-items: center;position: relative;color:#666;padding: .375rem 0;font-size: 14px;gap: .5rem;white-space: nowrap;}
.language-toggler:hover{color: #595bd4;}
.language-toggler::after{display: inline-block; margin-left:0; vertical-align: middle; content: ""; border-top: .3rem solid; border-right: .3rem solid transparent; border-bottom: 0; border-left: .3rem solid transparent;color: #ccc;}
.language .flag{width: 20px; height: 20px;border-radius: 50%;overflow: hidden;display: flex;}
.language .flag img{width: 100%;height: 100%; object-fit: cover;}

.dropdown-language{display: none;width: 320px;z-index: 10;padding: .5rem 0; background-color: #fff;border-radius: 5px;border: solid 1px rgba(0, 0, 0, .1); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);margin: 0;}
.dropdown-language.show{display: block;}
.dropdown-language-list{display: flex;flex-wrap: wrap;}
.dropdown-language-item{display: flex;align-items: center;color: #666;padding: .5rem 1.5rem;width: 50%;flex: 0 0 50%; font-weight: 400;white-space: nowrap;gap: .5rem;}
.dropdown-language-item:hover{background-color: #f8f8f8;color: #595bd4;}
.dropdown-language-item .text{font-size:13px;}

.dropdown-language-google{padding: .5rem 1.5rem;width: 100%;}
.dropdown-language-google label{color: #666;font-size: 14px;margin-bottom: 5px;}
#google_translate .goog-te-gadget-simple{ display:flex;align-items: center; border: 1px solid #ccc; height: 32px; line-height: 30px; border-radius: 5px; padding:2px 5px;}
#google_translate .goog-te-gadget-simple>span{width: 100%;}
#google_translate .goog-te-gadget-simple .goog-te-menu-value{color: #666;display:flex;align-items: center;justify-content:space-between;}
#google_translate .goog-te-gadget-simple .goog-te-menu-value:hover{text-decoration: none;}
#google_translate .goog-te-gadget-simple .goog-te-menu-value>span{width: 100%;font-size: 14px;}
#google_translate .goog-te-gadget-simple .goog-te-menu-value>span>img{display: none;}
#google_translate .goog-te-gadget-simple .goog-te-menu-value span ~ img ~ span{border-left: none!important;}
#google_translate .goog-te-gadget-simple .goog-te-menu-value span ~ img ~ span ~ img ~ span{color: #fff!important;text-align: right;}
#google_translate .goog-te-gadget-simple .goog-te-menu-value span ~ img ~ span ~ img ~ span::after{display: inline-block; margin-left: .255rem; vertical-align: middle; content: ""; border-top: .35rem solid; border-right: .35rem solid transparent; border-bottom: 0; border-left: .35rem solid transparent;color: #ccc;}



.userbar{margin-left: auto;display: flex;align-items: center;gap: 1.5rem;}
.userbar-nav{height: 100%;display: flex;align-items: center;gap: 1.5rem;}
.userbar-login{display: flex;align-items: stretch;gap: .5rem;}
.userbar-login .btn{padding: .375rem 1.25rem;display:flex;align-items: center;font-size: 14px;}
.userbar-item__dropdown{position: relative;z-index: 3;cursor: pointer;display:flex;align-items: center;}
.userbar-item__dropdown .avatar{width: 20px;height: 20px;border-radius:20px;}
.userbar-item__toggle{margin:0;padding: .375rem 0;white-space: nowrap;display: flex;align-items: center;gap: .5rem;}
.userbar-item__toggle::after{display: inline-block; margin-left:0; vertical-align: middle; content: ""; border-top: .3rem solid; border-right: .3rem solid transparent; border-bottom: 0; border-left: .3rem solid transparent;color: #ccc;}
.userbar-item__toggle .username{font-size: 14px;height: 14px;line-height: 1;color: #666;white-space: nowrap;max-width: 6rem;text-overflow: ellipsis;overflow: hidden;}


.userbar .btn-buy{font-size: 14px;padding: .375rem 1.25rem;}
.userbar .text-muted{font-size: 14px;color: #666!important;}
.userbar .available-num{color: #ff7318;font-weight:600;}
.userbar .icon-coin-fill{color: #ff7318;}

@-webkit-keyframes sweepUserMenu { 0% { opacity: 0; transform: translate3d(-38px, 20px, 0px); } to { opacity: 1; transform: translate3d(-38px, 36px, 0px)!important;} }
@keyframes sweepUserMenu { 0% { opacity: 0; transform: translate3d(-38px, 20px, 0px); } to { opacity: 1; transform: translate3d(-38px, 36px, 0px)!important;} }

.dropdown__user-container{display:none;position:absolute;z-index: 99;padding:.5rem 0;margin: 0;border:1px solid #ddd;box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);}
.dropdown__user-container.show{display:block;}
.dropdown__user-link-group{display: flex;flex-direction: column;}
.dropdown__user-link:first-child{border-top: unset;}
.dropdown__user-link{padding: 2px 20px;display:flex;align-items: center; line-height: 35px;white-space: nowrap;font-size: 13px;color:#666;gap: .5rem;}
.dropdown__user-link:hover{background: #f8f8f8;color:#ff7318;text-decoration: none;}



.product-list{border-radius: 6px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .15);}
.tablist{padding:0 20px;border-bottom: solid 1px #e1e3e5;display: flex;align-items: center;}
.tab-item{display: inline-flex;margin-bottom: -1px;}
.tab-link{padding:20px 15px;color: #333;position: relative;line-height: 1;font-size: 14px;}
.tab-link:hover{color: inherit;text-decoration: none;}
.tab-link.active{position: relative;}
.tab-link.active::after{background-color: #ff7318;height: 3px;position: absolute;bottom: 0;left: 0; width: 100%;border-radius: 5px 5px 0 0;display: block;content: '';}
.filters{padding: 20px;}
.filters .input-group-text .ap-icon{font-weight: 600;color: #666;font-size: 16px;padding: 0 10px;}
.filters .form-control{font-size: 14px;height: 36px;}
.filters .form-control::placeholder{color: #999;}
.filters .input-group-text{height: 36px;}

.product-table{margin-bottom: 20px;width: 100%;}
.product-table .th{padding:15px;font-size: 14px;color: #333;font-weight: 400;}
.product-table .th:first-child{padding-left: 30px;}
.product-table .th:last-child{padding-right: 30px;}
.product-table .th.time{text-align: center;}
.product-table .tr{vertical-align: top;border-bottom: solid 1px #e5e5e5;}
.product-table .td{padding:15px;}
.product-table .td:first-child{padding-left: 30px;}
.product-table .td:last-child{padding-right: 30px;}

.product-img{width: 60px;height: 60px;border: solid 1px #e1e3e5;border-radius: 3px;}
.product-img img{width: 100%;height: 100%;object-fit: contain;border-radius: 3px;}
.product-info{padding-left:30px;}
.product-title{font-size: 14px;font-weight: 400;max-width: 430px;margin-bottom: 10px;line-height: 1.7;}
.product-price{font-size: 14px;}
.product-price .label{color: #999;margin-bottom: 0;}
.product-price .price{color: #333;font-weight: 600;}
.product-item .time{font-size: 14px;color: #999;text-align: center;}
.product-item .action{display: flex;align-items: flex-end;flex-direction: column;width: 100%;}
.product-item .action .btn{font-size: 14px;font-weight: 400;white-space: nowrap;}



.page-bar {display: block; text-align: center;font-size: 14px;padding: 0 30px;}
.page-bar a {border:#ddd 1px solid; padding:6px 12px;display: inline-block;color:#888;margin-left:2px;background: #fff;vertical-align: middle;border-radius: 3px;}
.page-bar a:hover {border:#595bd4 1px solid; color: #fff; background:#595bd4;text-decoration: none;}
.page-bar .page-current{background:#595bd4; color:#fff;border:#595bd4 1px solid;}


.footer{background: #3e4450;color: #c0c9d4;padding: 15px 0px;font-size: 13px;line-height:2rem;}
.footer-row{text-align: center;}
.footer a{color: #c0c9d4;transition: all .2s ease-in-out;}
.footer a:hover{color: #fff;}
.footer-item-link,.footer-item-copyright{margin:0 15px;}
.footer-time{margin:0 15px;white-space: nowrap;display: inline-flex;}


.main{min-height: calc(100vh - 77px - 94px);position: relative;}

.section-left{width: calc(100% - 278px);border-right: solid 1px #e5e5e5;background-color: #fff;}
.section-right{width:278px;height: calc(100vh - 77px); flex-shrink: 0;background-color: #f7f8fb;position: sticky;top: 0;}
.layout-scroll{overflow-y: auto;width: 100%;height: 100%;}
.layout-scroll::-webkit-scrollbar{background-color: transparent;width: 8px;height: 1px;}
.layout-scroll::-webkit-scrollbar-thumb{border-radius: 10rem;width: 8px;height: 20px; background-color: rgba(0,0,0,.2);;}


.layout-card{padding: 30px;background-color: #e8ebf3;}
.layout-card-header h5{font-size: 14px;font-weight: 600;line-height: 1;margin-bottom: 10px;}
.layout-buttons{display: flex;flex-direction: column;}
.layout-buttons .btn{font-size: 14px;margin-bottom: 10px;padding: .15rem .75rem;}
.layout-buttons .btn .ap-icon{margin: 0 3px;}
.layout-buttons .btn .text{margin: 0 3px;}
.layout-card--sub{padding: 30px;border-bottom: solid 1px #e5e5e5;}
.layout-card--sub:last-child{border-bottom: none;}
.layout-label{font-weight: 600;font-size: 14px;color: #333;margin-bottom: 10px;}
.layout-images{margin: -5px;display: flex;display: -ms-flexbox;flex-flow: row wrap;-ms-flex-flow: row wrap;}
.layout-images .img-col{padding:5px;flex: 0 0 50%;-ms-flex:0 0 50%;max-width: 50%;}
.layout-images .img-content{border-radius: 3px;height: 100px;padding: 2px; align-items: center;justify-content: center; display: flex; background-color: #fff;border: solid 1px #e5e5e5;}
.layout-images .img-content img{max-width: 100%;max-height: 100%;border-radius: 3px;object-fit: contain;}
.layout-images .img-content img:hover{cursor: zoom-in;}

.detail-content{background-color: #fff;}
.detail-content-tabbar{background-color: #f7f8fc;border-bottom: solid 1px #e5e5e5;display: flex;align-items: center;}
.detail-content-tabbar .nav-tabs{border-bottom: none;}
.detail-content-tabbar .nav-link{padding: 15px 0px;border: none;background-color: none;margin: 0 20px;font-size: 16px;color: #333;font-weight: 700;}
.detail-content-tabbar .nav-link.active{border: none;margin-bottom: -1px;position: relative;z-index: 13;color: #666;background: transparent;}
.detail-content-tabbar .nav-link:hover{border: none;}
.detail-content-tabbar .btn{white-space: nowrap;font-size: 14px;padding: .375rem 1.25rem;}
.detail-tab-content{border-top: none;padding:20px 30px;}




.thumbnail-wrapper{position: relative;max-width: 100%;overflow: hidden;}
.thumbnail-container{display: flex;flex-direction: row;flex-wrap:wrap;margin: -5px;overflow: hidden;}
.thumbnail-checkbox{ position: relative; display: block; min-height: 1.5rem;margin: 5px;background-color: #fff;}
.thumbnail-control-label{width: 100px;height: 100px;padding: 2px;border: solid 1px #e5e5e5;border-radius: 3px;overflow: hidden;}
.thumbnail-control-label .checkbox-thumbnail-img{border-radius: 3px;max-width: 100%;max-height: 100%;min-width: 100%;min-height: 100%;object-fit: contain;}
.thumbnail-control-label .checkbox-thumbnail-img:hover{cursor: zoom-in;}
.thumbnail-control-input{ position: absolute; bottom: 0;right: 0; z-index: -1; width: 1.5rem; height: 1.5rem; opacity: 0; }
.thumbnail-control-input:checked ~ .thumbnail-control-label{border: solid 1px #ff7318;}
.thumbnail-control-input:checked ~ .thumbnail-control-label::before { color: #fff; border-color:transparent #ff7318 #ff7318 transparent;}
.thumbnail-control-input:focus ~ .thumbnail-control-label::before { box-shadow: none; }
.thumbnail-control-input:focus:not(:checked) ~ .thumbnail-control-label::before {border-color:transparent rgba(89,91,212,.15) rgba(89,91,212,.15) transparent;}
.thumbnail-control-input:not(:disabled):active ~ .thumbnail-control-label::before { color: #fff;border-color:transparent rgba(89,91,212,.15) rgba(89,91,212,.15) transparent;}
.thumbnail-control-input[disabled] ~ .thumbnail-control-label, 
.thumbnail-control-input:disabled ~ .thumbnail-control-label { color: #6c757d; }
.thumbnail-control-input[disabled] ~ .thumbnail-control-label::before, 
.thumbnail-control-input:disabled ~ .thumbnail-control-label::before {border-color:transparent rgba(89,91,212,.15) rgba(89,91,212,.15) transparent;}
.thumbnail-control-label{ position: relative; margin-bottom: 0; vertical-align: top; }
.thumbnail-control-label .thumbnail-delete{position: absolute;right: 0; top: 0;width: 20px;height: 20px;background-color: rgba(0, 0, 0, .3);color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.thumbnail-control-label .thumbnail-delete:hover{background-color: rgba(220, 53, 69, .8);}
.thumbnail-control-label .thumbnail-delete .icon-close{font-size: 14px;}
/* .thumbnail-control-label::before { position: absolute; bottom: 0; right: 0; display: block; width: 0rem; height: 0rem; pointer-events: none; content: ""; border-style: solid;border-width:15px;border-color:transparent rgba(89,91,212,.15) rgba(89,91,212,.15) transparent;}
.thumbnail-control-label::after { position: absolute; bottom: 0; right: 0; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50% / 70% 70%; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");opacity: .7;}
.thumbnail-checkbox .thumbnail-control-label::before { border-radius:0; } 
.thumbnail-checkbox .thumbnail-control-input:checked ~ .thumbnail-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); opacity: 1;}
.thumbnail-checkbox .thumbnail-control-input:indeterminate ~ .thumbnail-control-label::before { border-color: transparent #adb5bd #adb5bd transparent; }
.thumbnail-checkbox .thumbnail-control-input:indeterminate ~ .thumbnail-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); }
.thumbnail-checkbox .thumbnail-control-input:disabled:checked ~ .thumbnail-control-label::before { border-color:transparent rgba(89,91,212,.15) rgba(89,91,212,.15) transparent; }
.thumbnail-checkbox .thumbnail-control-input:disabled:indeterminate ~ .thumbnail-control-label::before { border-color:transparent rgba(89,91,212,.15) rgba(89,91,212,.15) transparent; }
*/



.thumbnail-operations{padding: 16px 30px 16px 30px;border-bottom: solid 1px #e5e5e5;border-top: solid 1px #e5e5e5;background-color: #f7f8fc; font-size: 14px;display: flex; align-items: center;}
.thumbnail-operations .btn{font-size: 14px;padding: .375rem 1rem;display: inline-flex;align-items: center;gap: 8px;}
.thumbnail-operations .btn-outline-grey{border-color: #c4c6cf;color: #666;}
.thumbnail-operations .btn-outline-grey:hover{border-color: #999;}
.thumbnail-operations .btn-primary{}
.thumbnail-operations .btn-primary .coin{color: rgba(255,255,255, .7);font-size: 12px;display: inline-flex;align-items: center;gap: 4px;}
.thumbnail-operations .btn-primary .coin .icon-coin{font-size: 14px;line-height: 1;}
.thumbnail-operations .btn-primary:disabled .coin{color: rgba(0, 0, 0, .5);}
.thumbnail-operations .icon-arrow-right{color: #999;}
.thumbnail-operations .respond-text{font-size: 14px;color: #999;}
.thumbnail-operations .dropdown-toggle::after{color: #999;vertical-align:.2em;}
.thumbnail-operations .dropdown-menu{max-height: 360px;overflow-y: auto; font-size: 14px;color: #666;border-color: #c4c6cf;padding:.5rem 0;background:#fff; border-radius: 3px; box-shadow: 0px 2px 7px rgba(0,0,0,.1);}
.dropdown-list-group{display: flex;flex-wrap:wrap;}
.thumbnail-operations .dropdown-item{color: #666;padding: .25rem 1rem;}
.thumbnail-operations .dropdown-item:hover,.thumbnail-operations .dropdown-item:focus { color: #666; text-decoration: none; background-color: #f6f7fc; }
.thumbnail-operations .dropdown-item.active,.thumbnail-operations .dropdown-item:active { color: #666; text-decoration: none; background-color: #f6f7fc; }
.thumbnail-operations .dropdown-menu.cols-2{width: 320px;}
.thumbnail-operations .dropdown-menu.cols-2 .dropdown-item{width: 50%; flex: 0 0 50%;}


.modal-library-content{height: 600px;border-radius: 5px;}
.modal-library-header{background-color: #f6f6f6;border-radius: 5px 5px 0 0;padding: 1rem 1.25rem;border-bottom: solid 1px #e5e5e5;}
.modal-header .close{outline: none;}
.modal-header .close .ap-icon{font-size: 18px;}
#common-tip .modal-header{border-bottom: none;}
.modal-library-title{font-size: 16px;font-weight: 700;}
.library-body{padding:1.25rem;position: relative;overflow-y:auto;}
.library-body::-webkit-scrollbar{background-color: transparent;width: 8px;height: 1px;}
.library-body::-webkit-scrollbar-thumb{border-radius: 10rem;width: 8px;height: 20px; background-color: rgba(0,0,0,.2);;}
.library-footer{padding:.75rem 1.25rem;background-color: #f6f6f6;border-radius: 0 0 5px 5px;border-top: solid 1px #e5e5e5;}
.library-footer .btn{margin:0 5px;font-size: 14px;padding: .25rem 1.25rem;height: 36px;display: inline-flex;align-items: center;}
.library-footer .text-tips{font-size: 13px;color: #999;}
.library-table{margin-bottom: 20px;width: 100%;}
.library-table .tr{vertical-align:middle;border-bottom: solid 1px #e5e5e5;}
.library-table .td{padding:15px;}
.library-table .td:first-child{padding-left: 0;padding-right: 0;}
.library-table .td:last-child{padding-right: 0px;}


.tick-radio{position: relative; display:flex; min-height: 1.5rem; padding-left: 1.5rem; }
.tick-radio-input{ position: absolute; left: 0; z-index: -1; width: 1rem; height: 1.25rem; opacity: 0; }
.tick-radio-input:checked ~ .tick-radio-label::before{ color: #fff; border-color: #595bd4; background-color: #595bd4; }
.tick-radio-input:focus ~ .tick-radio-label::before{ box-shadow: none; }
.tick-radio-input:focus:not(:checked) ~ .tick-radio-label::before{ border-color: #6c757d; }
.tick-radio-input:not(:disabled):active ~ .tick-radio-label::before{ color: #fff; background-color: #eeeefb; border-color: #eeeefb; }
.tick-radio-input[disabled] ~ .tick-radio-label, .tick-radio-input:disabled ~ .tick-radio-label { color: #6c757d; }
.tick-radio-input[disabled] ~ .tick-radio-label::before, .tick-radio-input:disabled ~ .tick-radio-label::before { background-color: #dedef6; }
.tick-radio-label{ position: relative; margin-bottom: 0; vertical-align: top; }
.tick-radio-label::before{ position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ""; background-color: #fff; border: #ccc solid 2px; }
.tick-radio-label::after{ position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50% / 50% 50%; }
.tick-radio .tick-radio-label::before{ border-radius: 50%; }
.tick-radio .tick-radio-input:checked ~ .tick-radio-label::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");}
.tick-radio .tick-radio-input:disabled:checked ~ .tick-radio-label::before{ background-color: rgba(89, 91, 212, 0.5); }


.library-img{width: 60px;height: 60px;border: solid 1px #e1e3e5;background-color: #fff; border-radius: 3px;}
.library-img img{width: 100%;height: 100%;object-fit: contain;border-radius: 3px;}
.library-info{padding-left:20px;}
.library-title{font-size: 16px;font-weight: 400;max-width: 460px;margin-bottom: 0;}
.library-num{font-size: 14px;color: #666;white-space: nowrap;text-align: right;}

.library-gallery{display: flex;flex-wrap:wrap;margin: -5px;}
.gallery-img{width: 100px; height: 100px;padding: 2px;border: solid 1px #e5e5e5;border-radius: 3px;background-color: #fff;align-items: center;justify-content: center; display: flex;margin: 5px;}
.gallery-img img{max-width: 100%;max-height: 100%;border-radius: 3px;object-fit: contain;}

.library-alert{background-color: #ffe7cf;color: #666;padding: .6rem 1.25rem;font-size: 14px;font-weight: 400;}
.library-alert-warring{background-color: #ffe7cf;color: #fd6802;}
.library-alert-info{background-color: #d3e8fb;color: #666;}

.library-already{padding: .75rem 1.25rem;background-color: #f6f6f6;}
.library-already .label-text{font-size: 14px;color: #666;margin-right: 1rem;white-space: nowrap;}
.already--content{background-color: #fff;border: solid 1px #e5e5e5;display: flex;align-items: center;padding: 5px;border-radius: 3px;width: 100%;}
.already--library-img{width: 32px;height: 32px;border-radius: 3px;}
.already--library-img img{width: 100%;height: 100%;object-fit: contain;border-radius: 3px;}
.already--library-info{padding-left:10px;}
.already--library-title{font-size: 14px;font-weight: 400;max-width: 460px;margin-bottom: 0;}
.already--library-num{font-size: 13px;color: #999;white-space: nowrap;text-align: right;margin-left: auto;margin-right: 10px;}


.library-message{margin: 80px 0 50px 0;width: 100%;overflow: hidden;padding-left:1.5rem;padding-right: 1.5rem;}
.library-message .icon-right-fill{font-size: 80px;color: #04c446;margin: 0 auto;display: flex;justify-content: center;align-items: center;line-height: 1;}
.library-message .icon-page-not-found{font-size: 140px;color: #ccc;margin: 0 auto;display: flex;justify-content: center;align-items: center;line-height: 1;}
.library-message .icon-info-fill{font-size: 80px;color: #ccc;margin: 0 auto;display: flex;justify-content: center;align-items: center;line-height: 1;}
.library-message-title{font-size: 18px;margin-top: 1.5rem;text-align: center;color: #666;font-weight: 600;}
.library-message-desc{font-size: 18px;margin-top: 1.5rem;text-align: center;color: #666;font-weight: 500;word-wrap: break-word;}
.library-message-btns{margin: 30px 10px;text-align: center;}
.library-message-btns .btn{padding: .25rem 1.875rem;margin: 0 5px;height: 40px; font-size: 14px;font-weight: 600;display: inline-flex;align-items: center;}
.library-message-btns .btn-lg{height: 50px;padding: .25rem 2rem;font-size: 16px;}

.layout-translate-area{width: 100%;background-color: #fff;min-height:200px;}
.layout-images-message{display: flex;flex-direction: column;align-items: center;padding: 30px 0;}
.layout-images-message .icon-info{font-size: 50px;color: #ccc;line-height: 1;margin-bottom: 1rem;}
.layout-images-message-desc{font-size: 14px;color: #999;text-align: center;}
.layout-images-message-desc .text-link{color: #ff7318;display: flex; align-items: center;}
.layout-images-message-desc .text-link:hover{color: #ff7318;text-decoration: none;}
.layout-images-message-desc .text-link span{text-decoration: underline;}
.layout-images-message-desc .text-link .icon-external-link{text-decoration: none;margin:0 5px;}
.layout-images-message-desc .text-link:hover .icon-external-link{text-decoration: none;}

.modal-buy-content .modal-header{border-bottom: none;}
.modal-buy-body{padding:0 50px 50px;}
.buy-list-header-title{font-size: 20px;text-align: center;color: #666;}
.buy-list-item{margin-bottom: 15px;}
.buy-item-radio{position: relative; display:flex; min-height: 1.5rem;  }
.buy-item-radio-input{ position: absolute; left: 0; z-index: -1; width: 1rem; height: 1rem; opacity: 0; }
.buy-item-radio-input:checked ~ .buy-item-radio-label{border: solid 2px #ff7318;background-color: rgba(255, 115, 24, 0.05);}
.buy-item-radio-input:checked ~ .buy-item-radio-label::before{ color: #fff; border-color: #ff7318; background-color: #ff7318; }
.buy-item-radio-input:focus ~ .buy-item-radio-label::before{ box-shadow: none; }
.buy-item-radio-input:focus:not(:checked) ~ .buy-item-radio-label::before{ border-color: #6c757d; }
.buy-item-radio-input:not(:disabled):active ~ .buy-item-radio-label::before{ color: #fff; background-color: #eeeefb; border-color: #eeeefb; }
.buy-item-radio-input[disabled] ~ .buy-item-radio-label, 
.buy-item-radio-input:disabled ~ .buy-item-radio-label { color: #6c757d; }
.buy-item-radio-input[disabled] ~ .buy-item-radio-label::before, 
.buy-item-radio-input:disabled ~ .buy-item-radio-label::before { background-color: #dedef6; }
.buy-item-radio-label{width: 100%;height: 60px;padding:.375rem 1.875rem .375rem 3rem; border: solid 2px #e5e5e5;border-radius:.625rem;position: relative; margin-bottom: 0;display: flex;align-items: center;}
.buy-item-radio-label::before{ position: absolute; left: 1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ""; background-color: #fff; border: #ccc solid 2px; }
.buy-item-radio-label::after{ position: absolute; left: 1.5rem; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50% / 50% 50%; }
.buy-item-radio .buy-item-radio-label::before{ border-radius: 50%; }
.buy-item-radio .buy-item-radio-input:checked ~ .buy-item-radio-label::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");}
.buy-item-radio .buy-item-radio-input:disabled:checked ~ .buy-item-radio-label::before{ background-color: rgba(255, 115, 24, 0.5); }
.buy-item-radio .label-text{font-size: 16px;color: #666;}
.buy-item-radio .badge{margin-right: .5rem;}
.buy-item-radio .badge-light-red{font-size: 12px;font-weight: 400;line-height: 1;padding:.25rem;background-color: rgba(233, 97, 99, .1);color: rgba(233, 97, 99, 1);}
.buy-item-radio .price{font-size: 24px;color: #ff7318;line-height: 1;}
.buy-item-radio .icon-coin{font-size: 18px;color: #ff7318;line-height: 1;}
.buy-button-wrap{display: flex;justify-content: center;align-items: center;}
.buy-button-wrap .btn-pill{border-radius: 100rem;}
.buy-button-wrap .btn-purple{min-width: 260px;height: 50px;align-items: center;display: flex;justify-content: center;font-size: 18px;}
.buy-button-wrap .btn-primary{min-width: 260px;height: 50px;align-items: center;display: flex;justify-content: center;font-size: 18px;}
.buy-text-tips{text-align: center;font-size: 14px;color: #999;margin-top: 1.875rem;}
.buy-text-tips .text-link{color: #2c6ecb;}

.payment-radio-label{width: 100%;height: auto;gap: .875rem;}
.payment-radio-label .label-text{font-size: 14px;}


/*图片翻译首页*/
.translate-image-bg{width: 100%;min-height:calc(100vh - 36px - 76px - 94px); background:#f2f2fc!important;overflow: hidden;}
.translate-title{display: flex;justify-content: center;align-items: center;}
.translate-title .primary-title{font-size: 40px;color: #666;line-height: 1;font-weight: 700;}
.translate-example{display: flex;justify-content: center;align-items: center;margin-top: 50px;margin-right: -20px;}
.form-control-image-url{border: solid 2px #ccc;border-radius: 5px;color: #666;font-size: 14px;}
.form-control-image-url::placeholder{color: #999!important;}
.form-control-image-url:focus{border-color:#ff7318;}
.translate-upload-state-normal{width:100%;padding:30px;background-color: #fff;border-radius: 5px;border:dashed 5px #ddd;margin-bottom: 20px;}
.translate-upload-state-normal .icon-upload-pic{color: #999;}
.translate-upload-btn-wrap{height: auto; display: flex;justify-content: center;align-items: center;flex-direction: column;}
.translate-upload-btn-wrap .custom-file-input{width: 300px;height: 60px;position: absolute;top: 0;cursor: pointer;}
.translate-upload-btn-wrap .btn-upload{border-radius:100rem;min-width: 300px; height: 60px;display:flex;justify-content: center; align-items: center;font-size:20px;text-align: center;padding: 0 1.25rem; font-weight: 600;}
.translate-upload-btn-wrap .custom-file-input:hover ~ label .btn-upload{background-color: #fd6802;}
.translate-upload-alert{max-width: 880px;position: fixed;bottom: 78px;left: 50%;transform: translateX(-50%);}
.translate-upload-alert.alert-danger{background-color: #e96163;color: #fff;border: none;}

.bomb-layer{z-index: 1000000;}
.bomb-layer.show{display: block;}
.bomb-layer.hide{display: none;}
.bomb-mask{position: fixed; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1010; background: rgba(0, 0, 0, 0.5);}
.bomb-content{width: 448px;height: 665px;background:url(../img/translate-image/element-box.png) no-repeat;display: flex;flex-direction: column;align-items: center; position: relative;padding:2rem 3rem;}
.bomb-close{color: #f6e5ca;position: absolute;right: -8px;top: 102px;background: transparent;border: none;padding: .5rem;line-height: 1;}
.bomb-close:focus{outline: none;}
.bomb-headline{text-align: center;position: absolute;top: 240px;height: 100px;display: flex;align-items: center; line-height: 1.2; font-size: 36px;font-weight: bold; background-image:-webkit-linear-gradient(#f7e7ce,#ecc081);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:0 3rem;}
.bomb-subhead{text-align: center;position: absolute;top: 351px;height: 130px;display: flex;align-items: center;line-height: 1.2;font-size: 24px;color: #2a305e;padding:0 3rem;}
.bomb-subhead .fw-bold-num{font-size: 72px;font-weight: bold; margin: 0 .75rem;line-height: 1;}
.bomb-button{position: absolute;top: 505px;}
.bomb-button .btn{min-width:200px;height: 46px;display: flex;justify-content: center;align-items: center;border: none; background-image: linear-gradient(#f7e7ce,#ecc081);background-image: -webkit-linear-gradient(#f7e7ce,#ecc081);color: #2a305e;font-size: 24px;border-radius: 100rem;box-shadow: 0 7px 7px 4px rgba(53,8,8,.4);}
/*图片翻译首页 --END*/

/*右下角按钮与侧边栏*/
.translate-sidebar{position: fixed;top: 0;right: 0; bottom: 0; z-index:1000;}
.translate-sidebar-plugins{position: fixed;top: 0;right: 0;width: 0;height: 100%;transition: right .3s ease-in-out;}
.translate-sidebar-plugins.open{right: 300px;}
.translate-sidebar-btns{width: 50px;margin-top: auto;margin-bottom: 81px;position: absolute;left: -50px;bottom: 0;}
.translate-sidebar-btn{width: 50px;height: 50px;background-color:rgba(0, 0, 0, 0.7);margin-bottom: 1px;cursor: pointer;border-radius: 3px 0 0 3px;position: relative;}
.translate-sidebar-btn:hover{background-color: #ff7318;}
.translate-sidebar-btn-content{padding: 12px;display:flex;line-height: 1;font-size: 26px;}
.translate-sidebar-btn-content .ap-icon{color: #fff;font-size: 26px;}

.translate-sidebar-plugins-sub{width: 300px;height: 100%;background-color:#f8f8f8;border-left: solid 5px rgba(0, 0, 0, 0.7); position: absolute;left: 0;top: 0;}
.translate-sidebar-inner{position: relative;height: 100%;}
.translate-sidebar-inner-title{font-size: 14px;font-weight: 600;color: #666;display: flex;align-items: center;margin-bottom:1rem;}
.translate-sidebar-inner-title .icon-close{font-size: 18px;font-weight: 500;cursor: pointer;margin-left: auto;color: #999;}

.sidebar-layout-scroll{overflow-y: auto;width: 100%;height: 100%;}
.sidebar-layout-scroll::-webkit-scrollbar{background-color: transparent;width: 8px;height: 1px;}
.sidebar-layout-scroll::-webkit-scrollbar-track{background-color:transparent;border-radius: 10px;}
.sidebar-layout-scroll::-webkit-scrollbar-thumb{border-radius: 10rem;width: 8px;height: 20px; background-color: rgba(0,0,0,.2);}
.sidebar-layout-scroll::-webkit-scrollbar-thumb:hover{border-radius: 10rem;width: 8px;height: 20px; background-color: rgba(0,0,0,.3);}

.sidebar-layout-card{padding: 20px;background-color: #e8ebf3;}
.sidebar-layout-buttons{display: flex;flex-direction: column;}
.sidebar-layout-buttons .btn{font-size: 14px;margin-bottom: 10px;padding: .15rem .75rem;}
.sidebar-layout-buttons .btn:last-child{margin-bottom: 0;}
.sidebar-layout-buttons .btn .ap-icon{margin: 0 3px;}
.sidebar-layout-buttons .btn .text{margin: 0 3px;}
.sidebar-layout-card--sub{padding: 20px;}
.sidebar-layout-images-thead{display: flex;display: -ms-flexbox;align-items: center;justify-content: space-between;}
.sidebar-layout-images-thead .img-col{width: 100px;text-align: center;font-size: 14px;color: #999;}
.sidebar-layout-images{display: flex;flex-direction: column;}
.sidebar-layout-images-item{display: flex;display: -ms-flexbox;align-items: center;justify-content: space-between;margin:0 -5px;}
.sidebar-layout-images-item i{color: #aaa;font-size: 16px;padding: 0 10px;}
.sidebar-layout-images-item .img-col{margin: 5px;}
.sidebar-layout-images-item .img-content{border-radius: 3px;width: 100px; height: 100px;padding: 2px; align-items: center;justify-content: center; display: flex; background-color: #fff;border: solid 1px #e5e5e5;}
.sidebar-layout-images-item .img-content img{max-width: 100%;max-height: 100%;border-radius: 3px;object-fit: contain;}

.tips-progress{display: none;}
.mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, .5);z-index: 1090;}
.progress-body{width: 240px;transform: translate(-50%,-50%);position: fixed;top: 50%;left: 50%;background-color: rgba(0, 0, 0, .5);color: #fff;padding: 30px;border-radius: 10px;text-align: center;}

/*图片高清放大*/
.hd-image-bg{width: 100%;height: auto;min-height:calc(100vh - 36px - 76px - 94px); background:#eef1f6;display: flex;flex-direction: column;}
.hd-image-container{background-color: #f4f5f8;box-shadow:0 0 10px rgba(0, 0, 0, .1);flex-grow: 1;display: flex;flex-direction: column;}
.hd-image-header{background-color: #fff;padding:10px;white-space: nowrap;}
.hd-image-header-left{padding-left: 10px;}
.hd-image-header .btn{display: flex;align-items: center;flex-wrap: nowrap;text-wrap: nowrap;height: 32px;gap: 8px;line-height: 30px;}
.hd-image-header .btn-outline-grey.active{border-color: #ff7318;color: #ff7318;}
.hd-image-header .btn:disabled{background-color: #f5f5f5;border: solid 1px #dddddd;color: #b8b8b8;cursor: not-allowed;}
.hd-image-header .re-upload.disabled{color: #b8b8b8;cursor: not-allowed;}
.hd-image-header .lock.disabled{color: #b8b8b8;cursor: not-allowed;}
.hd-image-header .btn-start{background-color: #ff7318;border: solid 1px #ff7318;color: #fff;}
.hd-image-header .btn-start .coin{color: rgba(255,255,255, .7);display: inline-flex; align-items: center;gap: 4px;}
.hd-image-header .btn-start .coin .icon-coin{font-size: 14px; line-height: 1;}
.hd-image-header .btn:disabled .coin{color: #b8b8b8;cursor: not-allowed;}
.hd-image-header .btn-download{background-color: #ff7318;border: solid 1px #ff7318;color: #fff;}
.hd-image-header .input-group{display: flex;align-items: center;gap: 10px;}
.hd-image-header .input-group.disabled{color: #b8b8b8;cursor: not-allowed;}
.hd-image-header .input-wrap{position: relative;width: 160px;}
.hd-image-header .input-wrap span{position:absolute;top: 0;right: 0;bottom:0;color: #b8b8b8;padding: 0px 12px;line-height: 32px;}
.hd-image-header .input-wrap .form-control{width: 100%;height: 32px;line-height: 30px;padding: 0 50px 0 12px;}
.hd-image-header .input-wrap .form-control.active{border-color: #ff7318;}
.hd-image-header .input-wrap .form-control:disabled{border: solid 1px #ddd;background-color: #f5f5f5;color: #b8b8b8;cursor: not-allowed;}
.hd-image-header .custom-radio{white-space: nowrap;color: #666;}
.hd-image-header .custom-control-label{line-height: 24px;}
.hd-image-header .custom-control-input:disabled ~ .custom-control-label{color: #b8b8b8;}

.hd-image-row{display: flex;align-items: stretch;height: 100%;flex-grow: 1;}
.hd-image-row .col-6:first-child{border-right: solid 1px #e5e5e5;}
.hd-image-content{position: relative;padding: 10px 20px 20px 20px;height: 100%;display: flex;flex-direction: column;}
.hd-image-content .tag-label{height:20px;line-height: 20px; border-radius: 10px;font-size: 12px;background-color: rgba(0, 0, 0, .5);color: #fff;padding:0 10px;}
.hd-image-content .tag-label .ap-icon{font-size: 10px;}
.hd-image-left-content{flex-grow: 1;}
.hd-image-right-content{flex-grow: 1;}
.hd-image-before-sample{display:flex;justify-content: center;}
.hd-image-before-sample .img-content{position: relative;}
.hd-image-before-sample .sample-img{box-shadow:0 0 10px rgba(0, 0, 0, .1);}
.hd-image-before-sample .tag-arrow{position: absolute;left: calc(100% + 20px);top: 50px;z-index: 2;}
.hd-image-before-sample .tag-size,
.hd-image-after-sample .tag-size{height:20px;line-height: 20px; border-radius: 10px;font-size: 12px;background-color: rgba(0, 0, 0, .7);position: absolute;top: 6px;right: 6px;color: #fff;padding:0 8px;}
.hd-image-upload-state-normal{width:100%;padding:30px;background-color: #fafafa;border-radius: 10px;border:dashed 2px #ddd;margin-bottom: 20px;}
.hd-image-upload-btn-wrap{height: auto; display: flex;justify-content: center;align-items: center;flex-direction: column;}
.hd-image-upload-btn-wrap label{margin-bottom: 0;}
.hd-image-upload-btn-wrap .custom-file-input{width: 300px;height: 60px;position: absolute;top: 0;cursor: pointer;}
.hd-image-upload-btn-wrap .btn-upload{border-radius:100rem;min-width: 200px; height: 50px;display:flex;justify-content: center; align-items: center;gap: 8px; font-size:16px;text-align: center;padding: 0 1.25rem; font-weight: 600;}
.hd-image-upload-btn-wrap .custom-file-input:hover ~ label .btn-upload{background-color: #fd6802;}
.hd-image-upload-alert{max-width: 880px;position: fixed;bottom: 78px;left: 50%;transform: translateX(-50%);}
.hd-image-upload-alert.alert-danger{background-color: #e96163;color: #fff;border: none;}
.hd-image-input-url{text-align: end;}
.hd-image-input-url-textarea{border: solid 2px #ff7318;border-radius: 10px;color: #666;font-size: 14px;}
.hd-image-input-url-textarea::placeholder{color: #b8b8b8;}
.hd-image-input-url-textarea:focus{border-color:#ff7318;}
.hd-image-input-url .btn-primary{border-radius: 10px;}
.hd-image-after-sample{display:flex;justify-content: center;}
.hd-image-after-sample .img-content{position: relative;}
.hd-image-after-sample img{max-width: 100%;}
.hd-image-unstart{height: 100%;display: flex;justify-content: center;align-items: center;}
.hd-image-unstart .btn-start{border-radius:100rem;min-width: 200px; height: 50px;display:flex;justify-content: center; align-items: center;gap: 8px; font-size:20px;text-align: center;padding: 0 40px; }
.hd-image-unstart .btn-start .coin{font-size: 16px;color: rgba(255,255,255, .7);display: inline-flex;align-items: center;gap: 4px;}

.hd-image-list-container{display: grid;grid-template-columns: repeat(5, auto);gap: 12px 12px; padding-top: 8px}
.hd-image-list-item{position: relative;padding-top: 100%;background-color:#fff;border-radius: 10px;}
.hd-image-list-box{width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: inline-block;}
.hd-image-list-img{width: 100%;height: 100%;vertical-align: middle;object-fit: contain;border-radius: 10px;}
.hd-image-list-delete{position: absolute; right: -6px; top: -6px; z-index: 5; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 8px; background-color: #fa5151;color: #fff;}
.hd-image-list-delete .icon-close{font-size: 10px;font-weight: bold;}
.hd-image-tag-size{position: absolute;left: 0;bottom: 0;height: 20px;line-height: 20px; border-radius: 10px;font-size: 12px;background-color: rgba(0, 0, 0, .7);color: #fff;padding:0 8px;}
.hd-image-content .btn-clear{background-color: #fff;}
.hd-image-mask {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items:center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.5);  opacity: 0; transition: opacity 0.3s;border-radius: 10px;gap: 8px;overflow: hidden;z-index: 1;}
.hd-image-mask:hover{opacity: 1;}
.hd-image-mask .btn{ color: #fff;font-size: 14px;border: none;display: inline-flex;align-items: center;justify-content: center; border-radius: 10px;gap: 6px;}
.hd-image-mask .btn:hover{background-color: none;border: none;}
.hd-image-mask .btn .ap-icon{font-size: 16px;}
.hd-image-mask .btn-preview{background-color: rgba(0, 0, 0, 0)!important;position: absolute; top: 0; right: 0; bottom: 0; left: 0;z-index: 2;}
.hd-image-mask .btn-download{background-color: rgba(0, 0, 0, .5)!important;width: 32px; height: 32px;padding: 0; position: absolute; top: 5px; right: 5px;z-index: 3;}
.hd-image-mask .btn-download:hover{background-color: #ff7318!important;}
.hd-image-spinner-mask {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items:center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 10px;}
.hd-image-error-mask{position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items:center; justify-content: center; color: #fff; background: rgba(255,255,255, 0.5); border-radius: 10px;}

.preview-img{width: 100%;max-width: 100%;}
.preview-big-img{width: 100%;position: relative;}
.preview-big-img img{max-height: 100%;height: auto;max-width: 100%;}
.preview-big-img .control-prev{top: calc(50% - 40px);left: 30px;}
.preview-big-img .control-next{top: calc(50% - 40px);right: 30px;}
.preview-big-img .control-prev,
.preview-big-img .control-next{width: 50px;height: 50px;border-radius: 100rem;background-color: #fff;box-shadow:0 0px 10px 0 rgba(0, 0, 0, .15);position: absolute;}
.preview-big-img .control-prev i,
.preview-big-img .control-next i{font-size: 24px;color: #999;}
.preview-sm-img{width:100%;margin-top: 10px;text-align: center;}
.preview-sm-img dl{display: inline-flex;align-items: center;justify-content:flex-start;gap: 10px;flex-wrap: nowrap;max-width: 100%;overflow-x: auto;}
.preview-sm-img dd{width:72px;height: 72px;border: solid 1px #e5e5e5;border-radius: 10px;text-align: center;flex-shrink: 0;}
.preview-sm-img dd.active{border: solid 1px #ff7318;}
.preview-sm-img dd img{width: 100%;height: 100%;cursor: pointer;object-fit: cover;border-radius: 10px;}

/*抠图*/
.remove-background-bg{width: 100%;height: auto;min-height:calc(100vh - 36px - 76px - 94px); background:#eef1f6;overflow: hidden;display: flex;flex-direction: column;}
.remove-background-container{background-color: #f4f5f8;box-shadow:0 0 10px rgba(0, 0, 0, .1);flex-grow: 1;display: flex;flex-direction: column;overflow: hidden;}
.remove-background-header{background-color: #fff;padding:10px;white-space: nowrap;}
.remove-background-header-left{padding-left: 10px;}
.remove-background-header .btn{display: flex;align-items: center;flex-wrap: nowrap;text-wrap: nowrap;height: 32px;gap: 8px;border: solid 1px #ddd;background-color: #fff;}
.remove-background-header .btn:disabled{background-color: #f5f5f5;border: solid 1px #ddd;color: #b8b8b8;cursor: not-allowed;}
.remove-background-header .re-upload.disabled{color: #b8b8b8;cursor: not-allowed;}
.remove-background-header .btn-start{background-color: #ff7318;border: solid 1px #ff7318;color: #fff;}
.remove-background-header .btn-start .coin{color: rgba(255,255,255, .7);display: inline-flex; align-items: center;gap: 4px;}
.remove-background-header .btn-start .coin .icon-coin{font-size: 14px; line-height: 1;}
.remove-background-header .btn:disabled .coin{color: #b8b8b8;cursor: not-allowed;}
.remove-background-header .btn-download{background-color: #ff7318;border: solid 1px #ff7318;color: #fff;}
.remove-background-header .btn-color.active{border-color: #ff7318;color: #ff7318;}
.remove-background-header .btn-color:hover{background-color: #f4f5f8;}
.remove-background-header .btn-color .color{display: inline-block; width: 14px; height: 14px; margin-right: 4px; border-radius: 50%; border: 1px solid #f0f0f0;}
.remove-background-header .btn-color .color-transparent{background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%); background-size: 6px 6px; background-position: 0 0, 3px 3px;}
.remove-background-header .btn-color .color-white{background-color: #fff;}
.remove-background-header .btn-color .color-black{background-color: #000;}
.remove-background-header .btn-color .color-green{background-color: #00b143;}
.remove-background-header .btn-color .color-other{background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);}

.remove-background-row{display: flex;align-items: stretch;height: 100%;flex-grow: 1;}
.remove-background-row .col-6:first-child{border-right: solid 1px #e5e5e5;}
.remove-background-content{position: relative;padding: 10px 20px 20px 20px;height: 100%;display: flex;flex-direction: column;}
.remove-background-content .tag-label{height:20px;line-height: 20px; border-radius: 10px;font-size: 12px;background-color: rgba(0, 0, 0, .5);color: #fff;padding:0 10px;}
.remove-background-content .tag-label .ap-icon{font-size: 10px;}
.remove-background-left-content{flex-grow: 1;}
.remove-background-right-content{flex-grow: 1;}
.remove-background-before-sample{display:flex;justify-content: center;}
.remove-background-before-sample .img-content{position: relative;background-color: #fff;padding: 10px;box-shadow:0 0 10px rgba(0, 0, 0, .1);border-radius: 10px;}
.remove-background-before-sample .sample-img{border-radius: 10px;}
.remove-background-before-sample .tag-arrow{position: absolute;left: calc(100% - 50px);top: 50px;z-index: 2;}
.remove-background-upload-state-normal{width:100%;padding:30px;background-color: #fafafa;border-radius: 10px;border:dashed 2px #ddd;margin-bottom: 20px;}
.remove-background-upload-btn-wrap{height: auto; display: flex;justify-content: center;align-items: center;flex-direction: column;}
.remove-background-upload-btn-wrap label{margin-bottom: 0;}
.remove-background-upload-btn-wrap .custom-file-input{width: 300px;height: 60px;position: absolute;top: 0;cursor: pointer;}
.remove-background-upload-btn-wrap .btn-upload{border-radius:100rem;min-width: 200px; height: 50px;display:flex;justify-content: center; align-items: center;gap: 8px; font-size:16px;text-align: center;padding: 0 1.25rem; font-weight: 600;}
.remove-background-upload-btn-wrap .custom-file-input:hover ~ label .btn-upload{background-color: #fd6802;}
.remove-background-upload-alert{max-width: 880px;position: fixed;bottom: 78px;left: 50%;transform: translateX(-50%);}
.remove-background-upload-alert.alert-danger{background-color: #e96163;color: #fff;border: none;}
.remove-background-input-url{text-align: end;}
.remove-background-input-url-textarea{border: solid 2px #ff7318;border-radius: 10px;color: #666;font-size: 14px;}
.remove-background-input-url-textarea::placeholder{color: #b8b8b8;}
.remove-background-input-url-textarea:focus{border-color:#ff7318;}
.remove-background-input-url .btn-primary{border-radius: 10px;}
.remove-background-after-sample{display:flex;justify-content: center;margin-top: 30px;}
.remove-background-after-sample .img-content{position: relative;padding: 10px;box-shadow:0 0 10px rgba(0, 0, 0, .1);border-radius: 10px;background-image: linear-gradient(45deg, var(--checkerboard-black-color) 25%, var(--checkerboard-white-color) 25%), linear-gradient(-45deg, var(--checkerboard-black-color) 25%, var(--checkerboard-white-color) 25%), linear-gradient(45deg, var(--checkerboard-white-color) 75%, var(--checkerboard-black-color) 75%), linear-gradient(-45deg, var(--checkerboard-white-color) 75%, var(--checkerboard-black-color) 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0;--checkerboard-black-color: #f8f9f9;--checkerboard-white-color: transparent;}
.remove-background-after-sample img{max-width: 100%;border-radius: 10px;}
.remove-background-unstart{height: 100%;display: flex;justify-content: center;align-items: center;}
.remove-background-unstart .btn-start{border-radius:100rem;min-width: 200px; height: 50px;display:flex;justify-content: center; align-items: center;gap: 8px; font-size:20px;text-align: center;padding: 0 40px; }

.remove-background-list-container{display: grid;grid-template-columns: repeat(5, auto);gap: 12px 12px; padding-top: 8px}
.remove-background-list-item{position: relative;padding-top: 100%;background-color:#fff;border-radius: 10px;}
.remove-background-list-box{width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: inline-block;border-radius: 10px;}
.remove-background-list-box.bg-transparent{background-image: linear-gradient(45deg, var(--checkerboard-black-color) 25%, var(--checkerboard-white-color) 25%), linear-gradient(-45deg, var(--checkerboard-black-color) 25%, var(--checkerboard-white-color) 25%), linear-gradient(45deg, var(--checkerboard-white-color) 75%, var(--checkerboard-black-color) 75%), linear-gradient(-45deg, var(--checkerboard-white-color) 75%, var(--checkerboard-black-color) 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0;--checkerboard-black-color: #f8f9f9;--checkerboard-white-color: transparent;}
.remove-background-list-img{width: 100%;height: 100%;vertical-align: middle;object-fit: contain;border-radius: 10px;}
.remove-background-list-delete{position: absolute; right: -6px; top: -6px; z-index: 5; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 8px; background-color: #fa5151;color: #fff;}
.remove-background-list-delete .icon-close{font-size: 10px;font-weight: bold;}
.remove-background-content .btn-clear{background-color: #fff;}
.remove-background-mask {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items:center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.5);  opacity: 0; transition: opacity 0.3s;border-radius: 10px;gap: 8px;overflow: hidden;z-index: 1;}
.remove-background-mask:hover{opacity: 1;}
.remove-background-mask .btn{ color: #fff;font-size: 14px;border: none;display: inline-flex;align-items: center;justify-content: center; border-radius: 10px;gap: 6px;}
.remove-background-mask .btn:hover{background-color: none;border: none;}
.remove-background-mask .btn .ap-icon{font-size: 16px;}
.remove-background-mask .btn-preview{background-color: rgba(0, 0, 0, 0)!important;position: absolute; top: 0; right: 0; bottom: 0; left: 0;z-index: 2;}
.remove-background-mask .btn-download{background-color: rgba(0, 0, 0, .5)!important;width: 32px; height: 32px;padding: 0; position: absolute; top: 5px; right: 5px;z-index: 3;border-radius: 10px;}
.remove-background-mask .btn-download:hover{background-color: #ff7318!important;}
.remove-background-spinner-mask {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items:center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 10px;}
.remove-background-error-mask{position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items:center; justify-content: center; color: #fff; background: rgba(255,255,255, 0.5); border-radius: 10px;}