* {
	box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
	padding: 0px;
	margin: 0px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
    font-size: 1em;
    display: flex;
	color: #252525;
    flex-direction: column;
	background: #f6f5ec;
	accent-color: #7e45ac;
}
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 48;
    color: #fdfdfd;
}
a, a:visited {
	text-decoration: underline;
	color: #000000;
}
a:hover {
	/* text-decoration: underline; */
}
*::-webkit-scrollbar {
    width: 10px;
}
*::-webkit-scrollbar-thumb {
    background-color: #bdbbb0;
    border-radius: 4px;
    border: 1px solid #bdbbb0;
}
*::-webkit-scrollbar-track {
    background: #dcdad0;
}

#logo-text {
    font-family: 'EB Garamond', serif;
    font-size: 22px;
    font-weight: 100;
    letter-spacing: 5px;
    color: #3c3c3a;
    text-decoration: none;
}
a#logo-text {
    text-decoration: none;
}
#logo-in-tool {
    max-width: 165px;
}
#homepage #header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 40px);
    padding: 5px 0px 25px 0px;
    margin: 0px 20px 25px 20px;
    border-bottom: 1px solid #cccccc;
}
#header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 40px);
    padding: 5px 0px 5px 0px;
    margin: 0px 20px 25px 20px;
}
#header a {
    text-decoration: none;
}
#header-left {
	padding: 15px 20px 0px 20px;
	display: flex;
    width: 33%;
    align-items: center;
    justify-content: left;
}
#header-center {
	padding: 15px 0px 0px 0px;
    width: 33%;
    text-align: center;
}
#header-right {
	padding: 15px 10px 0px 20px;
	display: flex;
	align-items: center;
	justify-content: right;
    width: 33%;
}
.header-nav-ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
#person-settings-extrasdiv ul {
    list-style: none; width: 100%; margin: 0px; padding: 0px;
}
#person-settings-extrasdiv {
    margin-top: 20px;
}
#header-left .header-nav-ul li {
    display: inline-block;
    margin-right: 40px;
}
#header-right .header-nav-ul li {
    display: inline-flex;
    margin-left: 40px;
    text-align: right;
    justify-content: center;
    align-items: center;
}
#pages-everylook {
    letter-spacing: normal;
}
#pages-everylook h1 {
    font-size: 160%;
}
.message-callout {
    background: #e6e5df;
    padding: 30px;
    border-radius: 25px;
    text-align: center;
    margin: 0 auto;
    width: 80%;
    max-width: 600px;
}
#pages-everylook #mini-footer {
    margin: 40px 0px 30px 0px;
    padding: 20px 0px 0px 0px;
    border-top: 1px solid #bfbfbf;
}
#pages-contact #mini-footer {
    text-align: center;
}
.max-lg {
    max-width: 1200px;
    margin: 0 auto;
}
#onboard-head-text {
    width: calc(100% - 40px);
    display: flex;
    margin: 0px 20px 35px 20px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #cccccc;
}
#onboard-head-text-left {
    width: 100%;
    /* width: 60%; */
}
#onboard-head-text-right {
    width: 40%;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: right;
}
.onboard-head-text-act a {
    text-decoration: underline;
}
.onboard-head-text-act {
    /* max-width: 600px; */
    text-align: center;
    font-size: 150%;
    font-weight: 500;
}
.header-nav-ul a {
    font-weight: 500;
}
#header .header-nav-ul a.selected {
    text-decoration: underline;
}
.header-nav-ul a:hover {
    text-decoration: underline;
}
.localizeuploadimage, .localizeuploadimage_editface, .localizeuploadimage_editbody {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fcfcfc;
    color: #484848;    
    height: 150px;
    max-height: 150px;
    width: calc(100% - 20px);
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
    flex-direction: row;
    cursor: pointer;
    position: relative;
}
.localizeuploadimage_editbody {
    max-height: none;
    height: 200px;
}
.icon-editphoto {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
    color: #555555;
}
#body-settings .btn-controlgroup{
    margin-top: 10px;
}
#body-settings .left-label {
    margin-top: 30px;
}
.localizeimgprev {
    height: 100%;
    max-height: 100%;
    border-radius: 4px;
    display: none;
}

#clothinguploadimage {
    padding: 5px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: #e4e2d8;
    color: #484848;    
    height: 150px;
    max-height: 150px;
    width: calc(100% - 20px);
	margin-top: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
    flex-direction: column;
    cursor: pointer;
}
#contactform {
    background: #e6e5df;
    padding: 30px;
    border-radius: 25px;
}
#clothingimgprev {
    height: 100%;
    max-height: 100%;
    border-radius: 4px;
    display: none;
}
#clothinguploadimage:hover {
	background: #d0cdc2;
}
.localizeuploadimage:hover, .localizeuploadimage_editface:hover, .localizeuploadimage_editbody:hover {
	background: #f0f0f0;
}
#fileToUpload {
    display: none;
}
#clothingToUpload {
    display: none;
}
#section-howitworks {
    clear: both;
    float: left;
    width: 100%;    
    padding: 0px 20px 20px 40px
}
.material-symbols-outlined.icon-steps {
    font-size: 350%;
    color: #404040;
}
.stepseach-title {
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}
#howitworks-stepscontain {
    display: flex;
    justify-content: flex-start;
    /* height: 300px; */
}
.howitworks-stepseach {
    width: 33%;
    float: left;
    background: #e8e7dd;
    border: 1px solid #7e7e7e;
    border-radius: 8px;
    padding: 30px;
    font-size: 100%;
    margin-right: 20px;
    height: 100%;
}
.wizard {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
}
.wizard-title {
    font-size: 130%;
    font-weight: 600;
}
.wizard-subtitle {
    font-size: 110%;
    margin-top: 10px;
    margin-bottom: 10px;

}
.wizard-step {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #9e9c93;
    margin: 0 10px;
    position: relative;
    z-index: 10;
}
.wizard-line {
    height: 2px;
    width: 130px;
    background-color: #bcb9ad;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
#bodyimg_selected {
    max-height: 420px;
    max-width: 100vw;
}
#adjustbody-factors-contain {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    margin-bottom: 50px;
}
#initial-adjustbody-loading {
    height: 100%;
    max-width: 100%;
    background: #e1e1db;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.factorslider {
    width: 100%;
    height: 20px;
}
.adjustbody-factors-each .ui-slider-handle {
    background: #120702;
    padding: 13px;
} 
.adjustFactor-title {
    margin-left: 30px;
    font-weight: 600;
}
.adjustbody-factors-each {
    background: #e7e6df;
    padding: 20px;
    border: 1px solid #aaa9a9;
    width: 100%;
    border-radius: 8px;
    display: none;
}
.adjustbody-factors-each.active {
    display: flex;
    align-items: center;
}
.user-insidepanel-adjustbody-allcontain {
    max-width: 490px;
    margin: 0 auto;
    display: none;
}
.user-insidepanel-brandlist-allcontain {
    display: none;
}
.user-insidepanel-finished-allcontain {
    display: none;
}
#btn-wizard-from_selectbrands-next {
    position: inherit;
}
.addphoto-btn-back {
    background: #cac8bb;
    padding: 20px;
    border-radius: 50%;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.addphoto-btn-back .material-symbols-outlined {
    color: #000000;
    text-decoration: none;
}
.contain-behindbtn-next {
    width: 100%;
    z-index: 50;
    position: fixed;
    bottom: 0px;
    height: 110px;
    left: 0px;
    background: rgb(217,215,205);
    background: linear-gradient(0deg, rgba(217,215,205,1) 0%, rgba(217,215,205,1) 75%, rgba(217,215,205,0) 100%);
}
#btn-wizard-from_styles-next:disabled,
#btn-wizard-from_genbodies-next:disabled,
#btn-wizard-from_selectbrands-next:disabled {
    background: #606060;
    color: #b4b4b4;
    /* border: 1px solid #d6d6d6; */
    cursor: not-allowed;
}
#btn-wizard-from_styles-next:disabled .material-symbols-outlined,
#btn-wizard-from_genbodies-next:disabled .material-symbols-outlined {
    color: #b4b4b4;
}
.wizard-step.active {
    background-color: #313131;
}
#user-ask-brandlist {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 150px;
    align-items: center;
    justify-content: center;
}
.brand-each-contain {
    margin-bottom: 30px;
    margin-right: 30px;
    background: #eae8dc;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d7cd;
    cursor: pointer;
    position: relative;
}
.brand-each-contain:hover {
    border: 1px solid #b0afaa
}
.brand-each-contain.selected {
    border: 1px solid #000000;
}
.brand-img {
    width: 128px;
}
.brand-img img {
    max-width: 100%;
    border-radius: 4px 4px 0px 0px;
}
.user-ques-contain .ui-slider-handle {
    background: #120702;
}
.user-style-allcontain {
    width: 80%;
    max-width: 800px;
}
.user-genbodies-allcontain {
    width: 90%;
    margin-bottom: 90px;
}
.style-each-contain img {
    max-width: 100%;
}
.style-each-contain {
    width: 100%;
    background: #e7e6df;
    border-radius: 8px;
    padding: 0px;
    border: 1px solid #929292;
    text-align: left;
    text-transform: capitalize;
    cursor: pointer;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    position: relative;
}
.style-each-contain:hover {
    background: #ededed;
    border: 1px solid #0c0806;
}
.style-img-each {
    display: flex;
}

.style-select-icon {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
}
.style-each-contain.selected .style-select-icon {
    display: block
}
.style-text-title {
    background: #0c0806;
    color: #ffffff;
    border-radius: 0px 0px 8px 8px;
    padding: 5px;
    text-align: center;
}
.style-each-contain.selected {
    background: #ffffff;
    border: 1px solid #0c0806;
}
.user-styles-contain {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    max-width: 825px;
    margin-bottom: 130px;
}

@media (min-width: 768px) and (max-width: 900px) {
    #howitworks-stepscontain {
        flex-direction: column;
    }
    .howitworks-stepseach {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }
}
#newuser-output-onboardtxt {
    width: 520px;
    line-height: 24px;
}
#tool-localize-dualcols {
    /* display: flex; */
    flex-direction: row;
    justify-content: flex-start;
    height: auto;
    /* min-height: calc(100vh - 115px); */
    /* min-height: calc(100% - 90px); */
    display: block;
}
#tool-settings {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 0px;
    max-width: 1100px;
    margin: 0 auto;
}
.tool-settings-categories {
    width: 250px;
    padding: 0px 20px 20px 20px;
}
.user-ques-contain label {
    color: #7b7b7b;
}
.user-ques-contain label.ui-state-active {
    color: #ffffff;
}
#tool-settings-ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    background: #ebe9dd;
    border-radius: 8px;
}
#tool-settings-ul li {
    padding: 10px 20px;;
}
.tool-settings-contentarea {
    width: 100%;
    padding: 0px 0px 90px 0px;
}
#person-settingsdiv {
    background: #f2ede9;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
#person-settings-extrasdiv {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.tool-settings-contentarea h1 {
    padding:0px; 
    margin: 0px 0px 30px 0px; 
    font-size: 140%;
}
.tool-settings-contentarea .left-label {
    font-size: 100%;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 8px;
}
.page-content {
    clear: both;
    float: left;
    width: 100%;
    padding: 0px 20px 30px 20px;
}
.outfitvariants-btn-submit {
    width: calc(100% - 20px);
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: #0f0f0f;
    color: #ffffff;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    cursor: pointer;
}
.outfitvariants-btn-submit:hover {
    background: #1a1a17;
}
.outfitvariants-btn-submit:disabled {
    background: #d6d6d6;
    color: #818181;
    border: 1px solid #d6d6d6;
    cursor: not-allowed;
}
.settings-toparea {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.settings-btn-submit {
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: #0f0f0f;
    color: #ffffff;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    cursor: pointer;
}
.settings-btn-submit:hover {
    background: #1a1a17;
}
.settings-btn-submit:disabled {
    background: #d6d6d6;
    color: #818181;
    border: 1px solid #d6d6d6;
    cursor: not-allowed;
}
.zoom-img-contain {
    text-align: center;
    border-bottom: 1px solid #363636;
    max-height: 514px;
}
#adjustbody-menu-contain {
    margin-top: 10px;
    overflow: hidden;
    display: none;
}
.adjustbody-menu {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    /* padding-inline-start: 20px; */
    overflow-x: auto;
    width: 100%;
    -ms-overflow-style: none; /* Hide scrollbar on Internet Explorer */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    border-bottom: 1px solid #989898;
}
.adjustbody-each.active {
    font-weight: bold;
    border-bottom: 2px solid #363636;
}
.adjustbody-each.disabled {
    color: #b7b7b7;
    cursor: default;
}
.adjustbody-menu::-webkit-scrollbar {
    display: none;
}
.adjustbody-menu li {
    padding: 10px 20px;
    cursor: pointer;
    color: #000000;
}
.adjustbody-menu li:active div {
    border-bottom: 2px solid #363636;
}
.mobile-btn-start {
    /* width: calc(100% - 20px); */
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: #0f0f0f;
    color: #ffffff;
    font-size: 14px;
    border-radius: 4px;
    border: 0px;
    cursor: pointer;
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-btn-start:hover {
    background: #1a1a17;
}
.mobile-btn-start .material-symbols-outlined {
    margin-left: 10px;
}
.tryagain-contain {
    width: 100%;
}
.tryagain-btn {
    max-width: 300px;
}
.black-btn {
    /* width: calc(100% - 20px); */
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: #0f0f0f;
    color: #ffffff;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    cursor: pointer;
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.black-btn:hover {
    background: #1a1a17;
}
.black-btn .material-symbols-outlined {
    margin-left: 10px;
}
.mobile-callaction {
    font-size: 120%;
    font-weight: 600;
    margin-bottom: 10px;
    color: black;
}
#mobile-btn-start-contain {
    background: #dddec9;
    padding: 20px 0px;
    text-align: center;
    /* border-bottom: 1px solid #535353;
    border-top: 1px solid #535353; */
    margin: 40px 20px 20px 20px;
    border-radius: 20px;
}
#testimonial-contain {
    text-align: center;
    margin: 60px 40px 40px 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #bfbfbf;
}
#content-right {
    text-transform: uppercase;
    color: #30302e;
    font-size: 80%;
    letter-spacing: 0em;
}
#localize-left-col {
    padding-top: 0px;
    /* padding-left: 20px; */
    display: flex;
    /* justify-content: space-between; */
    flex-direction: column;
    height: 100vh;
    width: 260px;
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
    position: sticky;
    top: 0;
    float: left;    
    overflow-y: scroll; /* Enable vertical scrolling */
    -ms-overflow-style: none; /* Hide scrollbar on Internet Explorer */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
}
#localize-left-col::-webkit-scrollbar {
    display: none; /* Hide scrollbar on WebKit browsers (Chrome, Safari) */
}
#left-topimg-contain {
    /* border-radius: 0px 30px 30px 0px; */
    background: #edece4;
    padding: 20px 0px 20px 20px;
    /* height: 100%; */
}
#left-ui-contain {
    /* border-radius: 0px 30px 0px 0px; */
    background: #edece4;
    padding: 0px 0px 20px 20px;
    margin-top: 20px;
    height: 100%;
}
#localize-right-col {
    padding-top: 0px;
    padding-left: 0px;
    /* margin-left: 250px; */
    width: calc(100% - 260px);
    float: left;
}
#underbuttons {
    clear:both; float: left; width: calc(100% - 20px); margin: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.looksby_each.selected .material-symbols-outlined {
    display: block;
}
.looksby_each .material-symbols-outlined {
    display: none;
    color: black;
    font-size: 18px;
    margin-left: 5px;    
}
.filters_each.selected .material-symbols-outlined {
    display: block;
}
.filters_each .material-symbols-outlined {
    display: none;
    color: black;
    font-size: 18px;
    margin-left: 5px;
    margin-top: 2px;    
}
#underbuttons-contain {
    /* margin-bottom: 20px; */
}
#underbuttons a {
    text-decoration: underline;
    color: #272727;
}
.localize-outputs-toplabel {
    color: #333333;
	padding-bottom: 10px;
	width: 100%;
	clear: both;
}
.inputcontain {
    margin-bottom: 13px;
}
.left-label {
    /* color: #333333; */
	/* margin-top: 20px; */
	width: 100%;
	clear: both;
    font-size: 100%;
    margin-bottom: 2px;
}
.inputcontain input,
.inputcontain select {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    background: #fcfcfc;
    color: #484848;
    font-size: 100%;
}
.output-shoplink a {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shop_icon {
    margin-right: 8px;
    margin-top: 3px;
    display: flex;
}
.progress-bar {
    width: 100%;
    /* margin-left: 3px; */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.progress-bar-fill {
    display: block;
    height: 2px;
    background-color: #0e0e0e;
    transition: width 200ms ease-in-out;
    width: 0%;
}
.output.outputimg-contain-loading {
	background:rgb(253 253 253);
    overflow: hidden;
	position: relative;
	box-shadow: inset 0px 0px 100px rgb(217 217 217 / 50%);
    /* border-radius: 8px; */
    min-height: 250px;
}
.output-img {
    /* border-radius: 8px; */
    width: 100%;
}
.img-contain-loading {
    box-shadow: inset 0px 0px 150px 20px rgb(197 162 39 / 50%);
}
.output-loading-text {
    /* background: linear-gradient(0deg, rgb(8 3 3 / 53%) 0%, rgb(8 3 3 / 53%) 10%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%); */
    border-radius: 8px;
}
.tip-in-loading {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 9px 12px 7px 10px;
    /* border-radius: 0px 8px 0px 0px;
    background: rgb(69 65 54); */
    color: #575757;
    font-size: 85%;
    /* text-transform: lowercase; */
}
.output-loading-text {
    text-align: center;
    margin: 0 auto;
    padding: 5px;
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
    /* text-transform: lowercase; */
    font-family: 'Roboto', sans-serif;
    width: 100%;
    color: #4b4b4b;
    font-size: 100%;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    /* text-shadow: 0px 2px #000000d4; */
}
.feed-prod-title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 90%;
}
.outputimg-contain-loading {
    /* border: 1px solid #9a9a9a; */
}
.pulsating-circle:before {
    background: #c5ac14;
}
#faq-contain {
    padding: 20px 20px 20px 40px;
}
.output {
    /* display: flex; */
    /* aspect-ratio: 1/1; */
    margin-right: 10px;
    margin-bottom: 10px;
    /* min-width: 400px; */
    width: calc(33% - 10px);
    /* flex-wrap: wrap; */
	position: relative;
	background-repeat: no-repeat;
    /* min-height: 280px; */
    /* border: 1px solid #787878;
    border-radius: 9px; */
    width: calc(50% - 10px);
    overflow: hidden;
    /* max-width: 512px; */
}
#sdoutputcontain {
    min-height: 100%;
    background:#ebe9dd;
    /* border-radius: 30px 0px 0px 30px; */
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    min-height: 470px;
    margin-left: 20px;
}
#outputs-all-contain {
    display: flex;
    flex-wrap: wrap;
}
#filterscontent {
    float: left;
    width: 100%;
    margin-top: 10px;
}
.output_shop_price {
    /* display: inline-block; */
    margin: 0px 7px 0px 20px;
    font-weight: 300;
    font-size: 100%;
    text-align: left;
}
.loading-logomark {
    display: none;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 110px;
	z-index: 8;
    max-width: 30%;
	/* border: 4px solid rgb(130 62 130 / 30%);
    border-radius: 50%; */
}
.output-shoplink {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    z-index: 8;
    padding: 9px 12px 7px 10px;
    border-radius: 0px 8px 0px 8px;
    background: rgb(33 32 28 / 100%);
    color: #ececec;
    font-size: 90%;
    text-decoration: none;
    /* border-right: 1px solid #0e0e0b;
    border-top: 1px solid #0e0e0b; */
}
.head-subtitle {
    font-size: 90%; 
    margin-top: 5px;
}
.regtitle {
    font-size: 140%;
    font-weight: 700;
}
.contain-sliderfields {
    width: 100%;
}
#adjust-factor-msgsm {
    display: none;
    text-align: center;
    padding: 7px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: #c9cbcf;
    font-size: 80%;
    border-radius: 0px 8px 0px 8px;
    z-index: 1000;
    width: auto;
    border-top: 1px solid #afafaf;
    border-left: 1px solid #afafaf;
    color: #292929;
}
#adjustbody-top-preview {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    /* margin-bottom: 20px;
    margin-right: 20px; */
}
.adjustbody-prev-contain {
    border-radius:4px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #9a9a9a;
    width: 320px;
    height: 440px;
    margin: 0 auto;
    display: flex;
    position: relative;
    flex-direction: column;
    /* aspect-ratio : 1 / 1; */
}
.adjustbody-bodyoptions {
    width: 60px;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.adjustbody-factors-each.disabled {
    border: 1px solid #b7b7b7;
    background: #cccabe;
}
.adjustbody-factors-each.disabled .adjustFactor-title {
    color: #868686;
}
.adjustbody-prev-contain .hexagon {
    display: none;
}
#initial-adjustbody-loading .hexagon {
    display: block !important;
    /* position: absolute; */
    top: -30px;
    left: 30px;
    zoom: 0.3;
    margin-top: -50px;
    margin-bottom: 20px;
}
.user-insidepanel-adjustbody-allcontain .progress-bar {
    /* background-color: #120702; */
    /* width: 100%; */
    position: absolute;
    max-width: 420px;
    top: 0px;
}
.ui-slider-tick-mark{
    display: inline-block;
    width: 1px;
    background: #b2b2b2;
    height: 19px;
    position: absolute;
    top: 0px;
}
.adjustbody-base-genmore:hover {
    background: #c8c8c3;
    color: black;
}
.adjustbody-base-genmore {
    height: 45px; text-decoration: none; background: #b7b6b0; 
    margin-right: 5px;
    margin-bottom: 5px;
    display: flex;
    border-radius: 4px;
    border: 1px solid #9b9b9b;
    position: relative;
    width: 50px;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
}
.adjustbody-base.active {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
    background: none;
    border: 0px;
    padding: 0px;
}
.adjustbody-bases-contain {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    flex-direction: row;
    max-width: 410px;
    flex-wrap: wrap;
    margin-left: 10px;
    max-height: 420px;
    overflow-y: scroll;
}
.adjustbody-base-each.selected {
    border: 1px solid #000000;
}
.adjustbody-base-each.selected .measure-select-icon {
    display: block;
}
.adjustbody-base-each.outputimg-contain-loading {
    height: 50px;
}
.adjustbody-base-each {
    margin-right: 5px;
    margin-bottom: 5px;
    display: flex;
    border-radius: 4px;
    border: 1px solid #9b9b9b;
    position: relative;
    width: 50px;
    height: fit-content;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
}
.adjustbody-base-each .measure-select-icon {
    position: absolute;
    top: 5px;
    left: 5px;
}
/* .adjustbody-base-each:last-of-type {
    margin-right: 0px;
} */
.adjustbody-base-each img {
    max-width: 100px;
    border-radius: 4px;
}
.output-shoplink a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    /* font-weight: 500; */
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
}
.output-shoplink:hover {
    background: rgb(39 36 23 / 90%);
}
.output-shoplink .material-symbols-outlined {    
    display: inline-block;
    margin-left: 8px;
    margin-top: 2px;
    font-size: 100%;
    /* display: none; */
}
.output-shoplink img {
    max-height: 14px;
    border-radius: 0px;
}
.output-labelcat {
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: center;
    display: none;
    z-index: 8;
    padding: 9px 12px 7px 10px;
    border-radius: 8px 0px 8px 0px;
    background: rgb(33 32 28 / 60%);
    color: #ececec;
    text-transform: lowercase;
}
.output-actions {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
    display: none;
    z-index: 8;
    padding: 15px 10px 7px 10px;
    border-radius: 0px 8px 0px 8px;
    background: rgb(33 32 28 / 60%);
}
.output-actions img {
    max-width: 17px;
    max-height: 14px;
    border-radius: 0px;
}
.output:hover .output-actions {
    display: block;
}
.output:hover .output-labelcat {
    display: block;
}
.output-actions ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.output-actions ul li {
    margin-bottom: 15px;
}
.output-actions ul li:first-of-type {
    margin-bottom: 15px;
}
#settingsdiv {
    padding: 20px 20px 0px 0px;
    float: left;
    width: 100%;
}
#looksby_contain {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: calc(100% - 10px);
}
.looksby_container {
    float: left;
    display: none;
    width: 100%;
}
#left-tabs-topcontain {
    float: left;
    width: 100%;
}
.left-tabs {
    font-size: 100%;
    float: left;
    margin-top: 20px;
    margin-right: 20px;
}
.left-tabs.active {
    border-bottom: 2px solid #5f5f5d;
    padding-bottom: 2px;
    margin-bottom: 5px;
    font-weight: 500;
}
a.filters_each {
    text-decoration: none;
}
a.left-tabs {
    text-decoration: none;
}
a.left-tabs:hover {
    border-bottom: 2px solid #999996;
}
#tab2content,
#tab3content,
#tab4content {
    display: none;
}
.looksby_container {
}
.left-label-main:not(:first-of-type) {
    margin-top: 20px;
}
#looksby_custom {
    /* display: none; */
}
.looksby_type {
    font-size: 100%;
    /* float: left; */
    margin-bottom: 20px;
    /* height: 83px;
    overflow: hidden; */
}
#looksby_custom.looksby_type {
    height: auto;

}
.looksby_each,
.filters_each {
    /* padding: 3px 10px;
    border: 1px solid rgb(196 196 196);
    border-radius: 4px;
    margin-bottom: 5px;
    background: #f0eee5;
    font-size: 90%;
    width: calc(50% - 3px);
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; */
    clear: both;
    float: left;
    width: 100%;
    padding-left: 10px;
}
.looksby_each:last-of-type,
.filters_each:last-of-type {
    margin-bottom: 20px;
}
.looksby_type.active,
.filters_each.active {
    height: auto;
}
.looksby_each:hover,
.filters_each:hover {
    background: #e4e2d8;
}
.looksby_each:nth-child(2n),
.filters_each:nth-child(2n) {
    margin-right: 5px;
}
.looksby_each.selected,
.filters_each.selected {
    background: #e4e2d8;
    /* 
    color: #ffffff;
    border: 1px solid #6d2a0b; */
    text-decoration: underline;
}
#usertext-outfit {
    background: #e9e9e9;
    border: 1px solid #a8a8a8;
    border-radius: 5px;
    font-size: 100%;
    padding: 12px;
}
#usertext-outfit.selected {
    border: 1px solid #6d2a0b;
}
.left-label-main {
    font-size: 100%; 
    text-transform: capitalize;
    float: left;
    width: 100%;
    display : flex;
    align-items: center;
    justify-content: space-between;
    color: #000000;
    font-weight: 500;
    margin-bottom: 5px;
}
#settingsdiv .user-chestsize,
#settingsdiv .user-waist,
#settingsdiv .user-weight,
#settingsdiv .user-muscle
{
    background: #e4e2d8;
}
.tool-open #settingsdiv .user-chestsize,
.tool-open #settingsdiv .user-waist,
.tool-open #settingsdiv .user-weight,
.tool-open #settingsdiv .user-muscle
{
    background: #0c0903;
}
#settingsdiv .ui-state-active {
    background: #120702;
}
#settingsdiv .ui-state-default {
    background: #5f5f5f;
}
.tool-open .ui-slider {
    min-width: 150px;
    background: #ffffff;
    padding: 5px;
    margin: 10px 0px;
    border: 1px solid #c5c5c5;
}
.left-label {
    font-size: 90%; 
    /* text-transform: capitalize; */
    float: left;
    width: 100%;
    display : flex;
    align-items: center;
    justify-content: space-between;
}
/* .catmorelink, .catmorelink:visited {
    text-decoration: none;
    color: #737373;
}
.catmorelink {
    text-transform: lowercase;
    color: #737373;
}*/
.catmorelink:hover {
    text-decoration: underline;
}
.looksby_each {
    cursor: pointer;
    text-transform: lowercase;
} 



.tabs {
    display: flex;
    border-bottom: 1px solid #9a9a9a;
}

.tab {
    flex: 1;
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 80%;
}
.tab:last-child {
    margin-right: 15px;
}

.tab.active {
    display: block;
    background: #ece3cf;
    border: 1px solid #a0948e;
}

.left-tabs-content {
    padding-top: 20px;
    /* display: none; */
    /* padding: 20px;
    border: 1px solid #ccc;
    margin: 0 auto;
    background: #ecebde;
    padding: 20px 12px;
    float: left;
    width: 100%; */
}
.left-tabs-content a {
    text-decoration: none;
}
.left-tabs-content.active {
    display: block;
}
#onboarding-looks-letsstart {
    background: #ffffff;
    border: 1px solid #c1c1c1;
    border-bottom: 2px solid #2e2e2e;
    padding: 20px 30px;
    font-size: 122%;
    color: #000000;
    width: 100%;
    clear: both;
    float: left;
    margin: 30px 0px;
    border-radius: 8px;
}
#onboarding-tip {
    background: #e3e0d3;
    /* border: 1px solid #c1c1c1; */
    justify-content: center;
    padding: 20px 30px;
    color: #000000;
    width: 100%;
    clear: both;
    float: left;
    margin: 30px 0px;
    border-radius: 8px;
    display: none;
}
.onboarding-tiptxt {
    font-size: 90%;
    letter-spacing: -0.03em;
    text-align: center;
    font-weight: 400;
    color: #3e3e3e;
    display: flex;
}
.onboarding-tiptxt .material-symbols-outlined {
    color: #060606;
    margin-right: 10px;
}
.letsstart-lgtxt {
    font-weight: 600;
}
.left-explain-text {
    font-size: 90%; 
    padding-right: 30px;
    margin: 10px 0px 2px 0px;
    float: left;
    width: 100%;
}
.left-explain-text2 {
    font-size: 90%;
    padding-right: 30px;
    float: left;
    border-top: 1px solid #afafaf;
    padding-top: 5px;
    margin-top: 20px;
    width: 90%;
}
.sidepanel-close {
    position: absolute;
    top: 20px;
    right: 20px;
}
.sidepanel-close img {
    max-height: 15px;
}
#sidepanel-zoom .sidepanel-close {
    background: white;
    padding: 20px;
    border-radius: 50%;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}
.sidepanel-toparea {
    padding: 20px 20px 0px 20px;
    text-align: center;
}
.addphoto-toparea {
    display: flex;
    justify-content: space-between;
}
.addphoto-top-left {
    width: 20%;
    text-align: left;
}
.addphoto-top-center {
    width: 60%;
}
.addphoto-top-right {
    width: 20%;
}
.addphoto-exampleareatitle {    
    font-size: 100%;
    font-weight: 800;
}
.addphoto-subtext {
    font-size: 100%;
}
#sidepanel-bg {
	background: rgba(0,0,0,0.8);
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: calc(100vh + 1px);
	display: none;
    z-index: 4000;
}
#sidepanel-editperson .img-person {
	max-height: 250px;
}
#sidepanel-editperson .person-imgcontain {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.sidepanel {
	background: #d9d7cd;
	border-left: 1px solid #464646;
	width: 60%;
	min-width: 760px;
	float: right;
	height: 100%;
	-webkit-box-shadow: 0px 0px 5px 0px #131107;
	box-shadow: 0px 0px 5px 0px #131107;
    overflow: hidden;
	overflow-y: scroll;
	display: none;
    position: relative;
}
.sidepanel-pad-container {
	padding: 10px 30px;
}
.sidepanel h2 {
    color: #282424;
	font-weight: 400 !important;
    font-size: 1.4em;
    color: #2c2c2c;
    float: left;
}
.sidepanel h3 {
    letter-spacing: 0.04em;
    color: #eee7e7;
	font-weight: 100 !important;
    font-size: 1.1em;
    letter-spacing: 0.04em;
    color: #eee7e7;
    float: left;
	padding-top: 0px;
	margin-top: 0px;
}
.sidepanel-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}
#sidepanel-addphoto .sidepanel-footer-btn button {
    font-size: 100%;
    max-width: 480px; 
}
.sidepanel-footer-btn {
    padding-top: 20px;
    padding-bottom: 40px;
}
#sidepanel-addphoto {
    text-align: center;
    font-size: 120%;
}
.sidepanel-addphoto-good {
    background: #ecf0eb;
    padding: 20px 20px 40px 20px;
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
}
.sidepanel-addphoto-bad {
    background: #e1dfd6;
    padding: 20px 20px 40px 20px;
    border-bottom: 1px solid #bbbbbb;
}
.examples-icon {
    position: absolute;
    top: 5px;
    left: 5px;
}
.mobile-callout-createanother {
    padding: 15px 15px;
    letter-spacing: -0.03em;
    color: #ffffff;
    font-size: 100%;
    text-align: center;
    position: absolute;
    background: #000000;
    bottom: 110px;
    transform: translate(-50%);
    left: 50%;
    border-radius: 8px;
    /* font-weight: bold; */
    border: 1px solid #542907;
}
.mobile-callout-createanother:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
}
.addphoto-examples {
    margin-top: 10px; 
    margin-bottom: 20px; 
}
.addphoto-examples {
    display: flex;
    align-items: center;
    justify-content: center;
}
.addphoto-examples-each {
    border-radius: 8px;
    border: 1px solid #515151;
    margin-right: 10px;
    position: relative;    
    display: flex;
}
.addphoto-examples-each img {
    max-height: 200px;
    border-radius: 8px;
    filter: saturate(1.2);
    width: 100%;
}
.addphoto-examples-each:last-of-type {
    margin-right: 0px;
}

.addphoto-btn {
    width: calc(100% - 20px);
    padding: 12px;
    line-height: 120%;
    font-weight: 600;
    text-transform: uppercase;
    background: #0f0f0f;
    color: #ffffff;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    cursor: pointer;
    display: flex;
    width: 70%;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}
.addphoto-btn:hover {
    background: #1a1a17;
}
.addphoto-btn .material-symbols-outlined {
    margin-left: 10px;
    width: 25px;
}
.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
  }
  
  .gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
  }
  
  .gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
  }
  
  .gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }
  
  .gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
  }
  
  .gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
  }
  
  .gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
  }
  
  .gsi-material-button:not(:disabled):active .gsi-material-button-state, 
  .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
  }
  
  .gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  }
  
  .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
  }
  
.everylook-app-next {
    width: calc(100% - 20px);
    padding: 12px;
    line-height: 120%;
    font-weight: 600;
    text-transform: uppercase;
    background: #0f0f0f;
    color: #ffffff;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    cursor: pointer;
    display: flex;
    width: 70%;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
}
.everylook-app-next:hover {
    background: #1a1a17;
}
.everylook-app-next .material-symbols-outlined {
    margin-left: 10px;
}
.examples-bad .addphoto-examples-each .examples-icon img {
    filter: grayscale(0);
}
.examples-bad .addphoto-examples-each img {
    filter: grayscale(0.5);
    max-width: 125px;
}
.examples-good .addphoto-examples-each {
    width: calc((100%/3) - 10px);
    max-width: 150px;
}
.examples-bad .addphoto-examples-each {
    width: calc((100%/4) - 10px);
    max-width: 95px;
}
#mini-footer {
    /* margin: 10px; */
    padding: 10px;
    text-align: right;
    font-size: 80%;
    margin-top: 10px;
    display: flex; justify-content: space-between; padding: 20px 0px; border-top: 1px solid #9a9a9a; margin: 10px; margin-top: 20px;
}
#mini-footer a {
    margin-left: 10px;
    text-decoration: none;
}

@media (max-width: 600px) {
    #body-settings #mini-footer {
        flex-direction: column;
        gap: 10px;
    }
}
#section-faq {
    margin: 20px;
    float: left;
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
    flex-direction: column;
}
#faq .material-symbols-outlined {
    color: #000000;
    margin-right: 20px;
}
#faq {
    margin-top: 30px;
    padding: 0px;
    list-style: none;
    width: 100%;
}
#faq a {
    text-decoration: none;
}
.iconredocontain {
    display: none;
}
#faq li {
    /* display: flex;
    justify-content: flex-start;
    align-items: flex-start; */
    flex-direction: column;
    width: 100%;
    background: #eeedde;
    border-radius: 8px;
    margin-bottom: 10px;
}
#faq .faq-answer a {
    text-decoration: underline;
    display: inline;
}
#faq li li {
    margin-left: 10px;
    background: none;
}
#faq a:hover {
    text-decoration: underline;
}
.outputimgcontain {
    width: 100%;
    aspect-ratio: 1 / 1;
}
.faq-each {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 860px;
    padding: 10px;
    font-size: 110%;
}
.faq-answer {
    padding-left: 45px;
    padding: 0px 90px 20px 55px;
    font-size: 110%;
    display: none;
    clear: both;
    background: #eeedde;
    border-radius: 0px 0px 8px 8px;
}
li.selected .faq-each {
    margin-bottom: 0px;
    border-radius: 8px 8px 0px 0px;
}
#sidepanel-zoom {
    width: 600px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#sidepanel-zoom.sidepanel {
    width: 513px;
    max-width: 1400px;
    min-width: auto;
    overflow: auto;
}
#sidepanel-zoom .sidepanel-pad-container,
#sidepanel-zoom .sidepanel-horlist {
    height: 100%;
    padding: 0px;
}
#zoom-lg-image {
    max-height: 1024px;
    border-bottom: 1px solid #b1b1b1;
    /* height: 100%; */
}
.btn-go-to-shop {
    width: 100%;
    padding: 16px;
    background: #0f0f0f;
    min-height: 67px;
    color: #ffffff;
    font-size: 120%;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.btn-go-to-shop:hover {
    background: #1a1a17;
}
.zoom-look-prod-details {
    padding: 30px;
    width: 100%;
    clear: both;
}
.zoom-look-prod-head {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 80%;
    margin-bottom: 25px;
}
.zoom-look-prod-title {
    font-size: 120%;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 130%;
}
.zoom-look-prod-review {
    font-size: 80%;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    display: none;
}
.zoom-look-prod-review-score {
    margin-right: 7px;
}
#review-stars {
    display: block; width: 65px; height: 13px; background: url(../img/star-rating-sprite.png) 0 0;
}
#review-stars-inner {
    display: block; width: 70%; height: 13px; background: url(../img/star-rating-sprite.png) 0 -13px;
}
.zoom-look-prod-price {
    font-size: 180%;
    font-weight: 600;
    margin-bottom: 35px;
}
#link-why {
    padding: 7px 19px;
    /* font-weight: 600; */
    /* text-transform: uppercase; */
    background: #0f0f0f;
    color: #ffffff;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    cursor: pointer;
    letter-spacing: -0.03em;
}
#link-why:hover {
    background: #1a1a17;
}
#onboarding-looks-letsstart .link-addyourimage {
    /* width: calc(100% - 20px); */
    padding: 12px 20px;
    font-weight: 500;
    /* text-transform: uppercase; */
    background: #0f0f0f;
    color: #ffffff;
    font-size: 18px;
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    cursor: pointer;
    float: left;
    width: Auto;
    text-decoration: none;
    margin-top: 10px;
}

#mobile-nav {
    display: none;
}
.zoom-close {
    /* display: none; */
}

#underbuttons-contain .outfitvariants-btn-submit {
    display: block;
}
#left-ui-contain .outfitvariants-btn-submit {
    display: none;
}
#img-hamburger {
    display: none;
    max-height: 18px;
}
#checkphoto-status {
    font-size: 130%;
}
.checkphoto-genlook-btn {
    min-width: 320px;
    display: none;
}
/* animations start */
.w4rAnimated_checkmark,
.w4rAnimated_xmark {
    display: none;
}
.w4rAnimated_checkmark svg,
.w4rAnimated_xmark svg {
    width: 80px;
    display: block;
    margin: 30px auto 0;
    margin-bottom: 30px;
}
.w4rAnimated_checkmark .path,
.w4rAnimated_xmark .path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}
.w4rAnimated_checkmark .path.circle,
.w4rAnimated_xmark .path.circle {
-webkit-animation: dash 0.9s ease-in-out;
animation: dash 0.9s ease-in-out;
}
.w4rAnimated_checkmark .path.line,
.w4rAnimated_xmark .path.line {
stroke-dashoffset: 1000;
-webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
animation: dash 0.9s 0.35s ease-in-out forwards;
}
.w4rAnimated_checkmark .path.check,
.w4rAnimated_xmark .path.check {
stroke-dashoffset: -100;
-webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
animation: dash-check 0.9s 0.35s ease-in-out forwards;
}

@-webkit-keyframes dash {
0% {
    stroke-dashoffset: 1000;
}
100% {
    stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
    stroke-dashoffset: 1000;
}
100% {
    stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash-check {
0% {
    stroke-dashoffset: -100;
}
100% {
    stroke-dashoffset: 900;
}
}
@keyframes dash-check {
0% {
    stroke-dashoffset: -100;
}
100% {
    stroke-dashoffset: 900;
}
}




.animation-ctn{
text-align:center;
margin-top:5em;
}

    @-webkit-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@-ms-keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 200px
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 100px
    }

    100% {
        stroke-dashoffset: 0px
    }
}

@-webkit-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px
    
    }

    100% {
        stroke-dashoffset: 960px;
    
    }
}

@-ms-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 240px
    }

    100% {
        stroke-dashoffset: 480px
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 480px 
    }

    100% {
        stroke-dashoffset: 960px
    }
}

@keyframes colored-circle { 
    0% {
        opacity:0
    }

    100% {
        opacity:100
    }
}

/* other styles */
/* .svg svg {
    display: none
}
*/
.inlinesvg .svg svg {
    display: inline
}

/* .svg img {
    display: none
} */

.icon--order-success svg polyline {
    -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
    animation: checkmark 0.25s ease-in-out 0.7s backwards
}

.icon--order-success svg circle {
    -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
    animation: checkmark-circle 0.6s ease-in-out backwards;
}
.icon--order-success svg circle#colored {
    -webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
    animation: colored-circle 0.6s ease-in-out 0.7s backwards;
} 
.hexagon {
	margin-bottom: 1.5em;
	overflow: hidden;
	position: relative;
	width: 15em;
	height: 15em;
    zoom: 0.5;
    margin: 0 auto;
    margin-top: 60px;
}
.hexagon__group, .hexagon__sector, .hexagon__sector:before, .hexagon__sector:after {
	position: absolute;
}
.hexagon__group {
	width: 100%;
	height: 100%;
}
.hexagon__group:nth-child(2) .hexagon__sector,
.hexagon__group:nth-child(2) .hexagon__sector:before,
.hexagon__group:nth-child(2) .hexagon__sector:after {
	animation-delay: calc(8s * -1/6);
}
.hexagon__group:nth-child(3) .hexagon__sector,
.hexagon__group:nth-child(3) .hexagon__sector:before,
.hexagon__group:nth-child(3) .hexagon__sector:after {
	animation-delay: calc(8s * -2/6);
}
.hexagon__group:nth-child(4) .hexagon__sector,
.hexagon__group:nth-child(4) .hexagon__sector:before,
.hexagon__group:nth-child(4) .hexagon__sector:after {
	animation-delay: calc(8s * -3/6);
}
.hexagon__group:nth-child(5) .hexagon__sector,
.hexagon__group:nth-child(5) .hexagon__sector:before,
.hexagon__group:nth-child(5) .hexagon__sector:after {
	animation-delay: calc(8s * -4/6);
}
.hexagon__group:nth-child(6) .hexagon__sector,
.hexagon__group:nth-child(6) .hexagon__sector:before,
.hexagon__group:nth-child(6) .hexagon__sector:after {
	animation-delay: calc(8s * -5/6);
}
.hexagon__group:nth-child(odd) {
	transform: rotate(30deg);
}
.hexagon__sector, .hexagon__sector:before, .hexagon__sector:after {
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	/*animation-play-state: paused;*/
	width: 0.2em;
	height: 0.2em;
}
.hexagon__sector {
	animation-name: moveOut1;
	top: calc(50% - 0.1em);
	left: calc(50% - 0.1em);
}
.hexagon__sector:nth-child(2) {
	animation-name: moveOut2;
}
.hexagon__sector:nth-child(3) {
	animation-name: moveOut3;
}
.hexagon__sector:nth-child(4) {
	animation-name: moveOut4;
}
.hexagon__sector:nth-child(5) {
	animation-name: moveOut5;
}
.hexagon__sector:nth-child(6) {
	animation-name: moveOut6;
}
.hexagon__sector:before, .hexagon__sector:after {
	animation-name: ripple;
	background-color: currentColor;
	border-radius: 0.1em;
	content: "";
	display: block;
	top: 0;
	left: 0;
	transform-origin: 0.1em 0.1em;
}
.hexagon__sector:before {
	transform: rotate(-30deg)
}
.hexagon__sector:after {
	transform: rotate(-150deg)
}
#sidepanel-checkphoto {
    width: 100%;
    overflow-y: auto;
}
#sidepanel-checkphoto .sidepanel-mid-content {
    text-align: center;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#contactform input, #contactform textarea {
    border: 2px solid #9b9b9b;
}
.smquestop {
    color: #737373;
    font-size: 80%;
    width: 100%;
    margin-top: 40px;
    display: none;
}
.smbottext {
    color: #504f4f;
    font-size: 100%;
    /* position: absolute; */
    bottom: 100px;
    width: 100%;
    padding: 20px;
    display: none;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
.home-iframe-lookbook {
    width: 100%;
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
}
.user-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #9f9f9f;
    background: #c9c7b8;
    margin-left: 10px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    filter: grayscale(100%);
}
.user-insidepanel-reglogin-allcontain {
    display: none;
}
#sidepanel-login-contain {
    width: 100%;
    height: 100%;
    padding-top: 100px;
    font-size: 130%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#userbodies-select-contain {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#userbodies-select-contain .outputs-each-contain {
    position: relative;
    border: 1px solid #a3a29a;
}
#userbodies-select-contain .outputs-each-contain .output-img {
    border-radius: 8px;
    cursor: pointer;
}
#userbodies-select-contain .outputs-each-contain:hover {
    border: 1px solid #272727;
}
#userbodies-select-contain .outputs-each-contain.selected {
    border: 1px solid #000000;
}
#userbodies-select-contain .outputs-each-contain .measure-select-icon {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
}
#userbodies-select-contain .outputs-each-contain.selected .measure-select-icon {
    display: block
}
.brand-select-icon {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
}
.brand-each-contain.selected .brand-select-icon {
    display: block
}
.user-genbodies-allcontain .smbottext {
    bottom: 20px;
    left: 50%;
    /* transform: translate(-50%); */
    color: #595959;
}
.user-genbodies-allcontain .smbottext a {
    color: #595959;
}
.user-questions-wizard {
    background: #ebeae5;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid #000000;
    /* text-align: center; */
    font-size: 120%;
    padding: 20px;
    width: fit-content;
    display: none;
    margin-bottom: 150px;
}
.user-ques-measurements-roweach {
    display: flex;
    width: 100%;
    background: #e7e6df;
    border: 1px solid #a2a2a0;
    align-items: center;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.user-ques-measurements-choices-contain {
    display: flex;
    align-items: center;
}
.user-ques-measurements-valueside {
    margin-left: 15px;
    font-weight: 500;
}
.user-ques-top-tellusyourself {
    font-size: 130%;
}
#heightSlider,
#weightSlider {
    min-width: 150px;
    margin: 0px;
    padding: 0px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: #120702;
}
.user-ques-measurements-waistoptions {
    display: flex;
}
.user-waisteach {
    margin-right: 5px;
    border: 1px solid #bebebe;
    display: flex;
}
.user-ques-measurements-contain {
    /* display: inline-flex; */
    align-items: center;
    /* width: 100%; */
    min-width: 400px;
    /* background: red; */
    /* margin: 0 auto; */
    padding: 0px 50px;
}
.measure-age-contain label,
.measure-bra-contain label {
    margin-right: 5px;
    margin-bottom: 5px;
    width: 65px;
}
.measure-age-contain .user-ques-measurements-choices,
.measure-bra-contain .user-ques-measurements-choices {
    width: 210px;
    display: flex;
    flex-wrap: wrap;
}
.desktopDisplay {
    display: block;
}
.mobileDisplay {
    display: none;
}
.user-ques-measurements-title {
    margin: 0px 40px 0px 0px;
    width: 105px;
    text-align: left;
    float: left;
}
.user-ques-measurements-choices {
    margin-left: 30px;
    min-width: 210px;
    text-align: left;
    float: left;
}
.measure-select-icon { 
    display: none;
}
.user-waisteach {
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}
.user-waisteach img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
}
.user-waisteach.selected {
    border: 1px solid #000000;
}
.user-waisteach.selected .measure-select-icon {
    display: block;
    left: 5px;
    top: 5px;
    position: absolute;
}
.user-question {
    font-size: 110%;
}
.user-answers {
    display: flex;
    flex-direction: row;
    margin: 30px 0px 0px 0px;
    width: 100%;
    justify-content: center;
}
.user-ques-done {
    display: none;
}
.smbottext {
    display: none;
}
.user-ques-done-text {
    margin-bottom: 20px;
    font-size: 130%;
}
.user-answer-option {
    border-radius: 8px;
    padding: 10px 20px;
    background: #1b1a1a;
    color: #ffffff;
    margin-right: 15px;
    font-size: 100%;
    cursor: pointer;
}
.user-answer-option:hover {
    background: #000000;
    color: #ffffff;
}
.user-ques-allcontain {
    width: 100%;
}
.user-style-allcontain {
    display: none;
}
.user-genbodies-allcontain {
    display: none;
}
.user-insidepanel-adjustbody-allcontain {
    display: none;
    margin-bottom: 80px;
}
.adjustbody-base-each.outputimg-contain-loading {
    margin-right: 5px;
    margin-bottom: 5px;
    background: #ebebe2;
}
.adjustbody-base-each.outputimg-contain-loading .hexagon {
    zoom: 0.1;
    color: #5f5f5f;
    margin-top: 0px;
}
.pb-2 {
    padding-bottom: 0.5rem !important;
}
.page-head {
    /* border-top: 1px solid #a8a8a8;
    border-bottom: 1px solid #a8a8a8; */
    padding: 20px 0px;
}
.message-sent {
    width: fit-content;
}
.message-sent .fas {
    margin: 0 auto;
    color: #8941c7;
    font-size: 46px;
    display: block;
    margin-bottom: 10px;
    margin-top: 20px;
}
.form-contain{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0px 20px;
}
#pages-everylook #header-single {
    width: 100%;
    text-align: center;
    padding: 25px 0px 25px 0px; 
    margin: 0px;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #303030;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
.form-label {
    margin-bottom: 0.5rem;
  }
.form-group input:focus {
    border: 2px solid #5b1ca8 !important;
}
.form-group {
position: relative;
margin-top: 8px;
}
.form-group label {
    left: 12px;
    padding: 0 0px;
    color: black;
    margin-bottom: 2px;
    font-size: 18px;
}
#mobile-tool-footer {
    display: none;
    position: fixed;
    bottom: -1px;
    width: 100%;
    /* border-top: solid 1px #5b5b5b; */
    color: #ffffff;
    z-index: 3000;
    /* filter: drop-shadow(0px -1px 1px #000000); */
    min-width: 375px;    
}
#mobile-tool-footer a {
    color: #ffffff;
    text-decoration: none;
}
#mobile-bottom-bar {
    display: flex;
    width: 100%;
    background: #0c0903;
    text-align: center;
    border-top: solid 1px #515151;
}
#mobile-createlook-selections-contain .catmorelink {
    margin: 15px 15px 10px 15px;
    cursor: default;
    float: left;
    width: auto;
    margin-bottom: 20px;
    display: none; /* temporary until we add categories */
}
#mobile-createlook-selections-contain .catmorelink.active {
    border-bottom: 2px solid #ffffff;
}
#mobile-createlook-selections-contain .looksby_type {
    /* padding: 15px; */
}
#mobile-createlook-selections-contain .looksby_each:first-of-type {
    margin-left: 15px;
}
#mobile-createlook-selections-contain .looksby_each {
    border: 1px solid #a3a3a3;
    border-radius: 4px;
    margin-right: 10px;
    float: left;
    width: auto;
    clear: none;
    padding: 10px;
    margin-bottom: 0px;
    background: #d4d2c4;
    color: #000000;
    font-weight: 500;
    white-space: nowrap
}
#mobile-createlook-selections-contain .looksby_each:hover {
    background: #f4f2e4;
}
#mobile-createlook-selections-contain .looksby_each:active {
    background: #d2d0c3;
    color: #000000;
}
#mobile-createlook-selections-contain .looksby_each.selected .material-symbols-outlined {
    display: none;
}
#mobile-createlook-selections-contain .looksby_container::-webkit-scrollbar {
    -webkit-appearance: none;
    display: none;
    background: transparent; 
    width: 0px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}   
#mobile-createlook-selections-contain .looksby_container {
    display: flex;
    overflow-x: scroll;
    margin: 15px 0px 15px 0px;
    justify-content: flex-start;
    align-items: center;
}
.bottom-menu-each {
    width: 33.3333333%;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.bottom-menu-each:hover {
    background: #e2dec7;
}
.botmenu-createlook-contain {
    font-size: 100%;
    background: #d1ceba;
}
.botmenu-createlook-contain .material-symbols-outlined {
    /* margin-left: 10px; */
    /* font-size: 200%; */
}
.bottom-menu-each {
    background: #d1ceba;
    color: #000000;
}
#mobile-tool-footer .bottom-menu-each {
    color: #000000;
}
.bottom-menu-each .material-symbols-outlined {
    color: #000000;
}
#mobile-createlook-selections-contain {
    background: #ebe9dd;
    position: fixed;
    bottom: 67px;
    width: 100%;
    border-top: solid 1px #5f5f5f;
    color: #ffffff;
    display: none;
    padding-left: 10px;
    overflow-x: scroll;
}
#mobile-createlook-selections-contain::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
#mobile-settings-contain {
    background: #060704;
    position: fixed;
    bottom: 75px;
    width: 100%;
    border-top: solid 2px #000000;
    color: #ffffff;
    display: none;
}
#mobile-tool-footer #settingsdiv {
    padding: 20px;
}
#mobile-tool-footer #settingsdiv .inputcontain input, 
#mobile-tool-footer #settingsdiv .inputcontain select {
    width: 100%;
    padding: 10px;
    margin-top: 3px;
    border: 1px solid #4c3020;
    border-radius: 4px;
    background: #0c0903;
    color: #dedede;
    font-size: 100%;
}

.photo-checked #header {
    padding: 5px 0px 5px 0px;
}
.photo-checked #header-center {
    width: 100%;
    text-align: center;
    padding: 15px 0px 0px 0px;
}
.photo-checked #header-left {
    display: none;
}
.photo-checked #header-right {
    display: none;
}

/* Animations */
@keyframes moveOut1 {
	from { transform: translateY(0) scale(0); }
	3% { transform: translateY(0.2em) scale(1); }
	97% { transform: translateY(7.3em) scale(1); }
	to { transform: translateY(7.5em) scale(0); }
}
@keyframes moveOut2 {
	from { transform: rotate(60deg) translateY(0) scale(0); }
	3% { transform: rotate(60deg) translateY(0.2em) scale(1); }
	97% { transform: rotate(60deg) translateY(7.3em) scale(1); }
	to { transform: rotate(60deg) translateY(7.5em) scale(0); }
}
@keyframes moveOut3 {
	from { transform: rotate(120deg) translateY(0) scale(0); }
	3% { transform: rotate(120deg) translateY(0.2em) scale(1); }
	97% { transform: rotate(120deg) translateY(7.3em) scale(1); }
	to { transform: rotate(120deg) translateY(7.5em) scale(0); }
}
@keyframes moveOut4 {
	from { transform: rotate(180deg) translateY(0) scale(0); }
	3% { transform: rotate(180deg) translateY(0.2em) scale(1); }
	97% { transform: rotate(180deg) translateY(7.3em) scale(1); }
	to { transform: rotate(180deg) translateY(7.5em) scale(0); }
}
@keyframes moveOut5 {
	from { transform: rotate(240deg) translateY(0) scale(0); }
	3% { transform: rotate(240deg) translateY(0.2em) scale(1); }
	97% { transform: rotate(240deg) translateY(7.3em) scale(1); }
	to { transform: rotate(240deg) translateY(7.5em) scale(0); }
}
@keyframes moveOut6 {
	from { transform: rotate(300deg) translateY(0) scale(0); }
	3% { transform: rotate(300deg) translateY(0.2em) scale(1); }
	97% { transform: rotate(300deg) translateY(7.3em) scale(1); }
	to { transform: rotate(300deg) translateY(7.5em) scale(0); }
}
@keyframes ripple {
	from, to { width: 0.2em; }
	33% { width: 2.4em; }
}

/* animations end */


@media (max-width: 1280px) { .output { width: calc(50% - 10px); } }
@media (min-width: 1400px) { .output { width: calc(33% - 10px); } }
@media (min-width: 2000px) { .output { width: calc(25% - 10px); } }
@media (min-width: 2500px) { .output { width: calc(20% - 10px); } }
@media (min-width: 3500px) { .output { width: calc(16% - 10px); } }

@media (min-width: 1281px) { #userbodies-select-contain .output { width: calc(33% - 10px); } }
@media (max-width: 1280px) { #userbodies-select-contain .output { width: calc(33% - 10px); } }
@media (min-width: 1400px) { #userbodies-select-contain .output { width: calc(33% - 10px); } }
@media (min-width: 2000px) { #userbodies-select-contain .output { width: calc(25% - 10px); } }
@media (min-width: 2500px) { #userbodies-select-contain .output { width: calc(20% - 10px); } }
@media (min-width: 3500px) { #userbodies-select-contain .output { width: calc(16% - 10px); } }

@media (max-width: 1024px) {
    /* .tip-in-loading {
        display: none;
    } */
    .loading-logomark {
        top: 50%;
    }
    #btn-wizard-from_genbodies-next {
        position: fixed;
        left: 50%;
        transform: translate(-50%);
        bottom: 30px;
    }
    .user-genbodies-allcontain .smbottext {
        bottom: 10px;
        /* position: fixed; */
        display: none;
    }
}
@media (max-width: 768px) {
    body {
        min-width: 350px;
        /* background: #ebe9dd; */
    }
    #sidepanel-addphoto .sidepanel-toparea {
        display: none;
    }
    .desktopDisplay {
        display: none;
    }
    .mobileDisplay {
        display: block;
    }
    .adjustbody-factors-each {
        margin: 20px;
    }
    .adjustbody-menu {
        padding-right: 50px;
    }
    #adjustbody-menu-contain {
        /* max-width: 420px; */
    }
    #sidepanel-addphoto .sidepanel-footer-btn button {
        width: calc(100% - 50px);
    }
    #mobile-createlook-selections-contain .looksby_type {
        display: inline-flex;
        margin: 0px;
    }
    .user-ques-measurements-contain {
        padding: 0px 10px;
        min-width: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .user-ques-measurements-title {
        margin: 0px 0px 10px 0px;
        width: auto;
        font-weight: 500;
        display: flex;
    }
    .user-ques-measurements-choices {
        text-align: center;
        margin-left: 0px;
        width: 100%;
    }
    #bodyimg_selected {
        border-radius: 0px;
        max-height: 512px;
    }
    #sidepanel-checkphoto .sidepanel-mid-content {
        margin-top: -20px;
        text-align: initial;
        display: block;
    }
    .user-questions-wizard{
        border: 0px;
        /* border-top: 1px solid #7b7b7b;
        border-bottom: 1px solid #7b7b7b; */
        background: none;
        padding: 10px;
        border-radius: 0px;
        width: 100%;
    }
    .addphoto-top-center {
        width: 100%;
    }
    .ui-widget.ui-widget-content {
        width: 100%;
        padding: 10px;
    }
    .user-ques-contain .ui-slider-handle {
        padding: 15px;
    }
    .user-ques-measurements-valueside {
        /* margin-top: 25px; */
        /* margin-left: 20px; */
        position: absolute;
        right: 50px;
        font-size: 90%;
        /* font-weight: bold; */
        margin-top: 3px;
    }
    .user-ques-measurements-choices-contain {
        flex-direction: column;
    }
    .message-callout {
        width: 100%;
        border-radius: 0px;
    }
    .addphoto-top-left {
        width: auto;
        margin-bottom: 15px;
        height: 103px;
        display: none;
    }
    .addphoto-top-right {
        display: none;
    }
    .addphoto-toparea {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
    #sdoutputcontain {
        min-height: 100%;
        background:#ebe9dd;
        border-radius: 30px 0px 0px 30px;
        padding: 20px 30px;
        display: flex;
        flex-direction: column;
        min-height: 470px;
        margin-left: 0px;
    }
    .zoom-look-prod-details {
        padding: 20px 30px;
    }
    .zoom-look-prod-head {
        margin-bottom: 5px;
    }
    .zoom-look-prod-review {
        margin-bottom: 15px;
    }
    .zoom-look-prod-price {
        margin-bottom: 25px;
    }
    #sdoutputcontain {
        /* margin-left: 0px; */
        height: 100%;
    }
    #localize-right-col {
        /* height: 100%; */
    }
    #testimonial-contain {
        margin: 60px 20px 10px 20px; 
        border-bottom: 0px;
    }
    #section-howitworks {
        padding: 0px 20px 20px 20px;
    }
    #mobile-tool-footer {
        display: block;
    }
    .tool-open #header {
        border-bottom: 0px;
        margin-bottom: 0px;
    }
    .tool-open #mobile-tool-footer {
        display: block;
    }
    .tool-open #outputs-all-contain {
        display: flex;
    }
    .tool-open #mobile-looks-cards {
        display: none;
    }
    .tool-open #mobile-btn-start-contain {
        display: none;
    }
    .tool-open #sdoutputcontain {
        padding-bottom: 170px;
    }
    #logo-in-tool {
        max-width: 145px;
    }
    #img-hamburger {
        display: block; 
    }
    #sdoutputcontain {
        border-radius: 0px;
    }
    #howitworks-stepscontain {
        flex-direction: column;
        height: auto;
    }
    .howitworks-stepseach {
        width: 100%;
        margin-bottom: 20px;
        margin-right: 0px;
        font-size: 120%;
    }
    #homepage #header {
        justify-content: left;
        padding-bottom: 15px;
    }
    #header {
        justify-content: center;
        flex-direction: row-reverse;
        margin: 0px 20px 7px 20px;
    }
    #header-center {
        width: 155px;
        text-align: left;
        padding: 15px 20px 0px 0px;
    }
    #header-left {
        display: none;
        padding: 18px 18px 0px 0px;
        width: 100%;
        text-align: right;
    }
    #header-right {
        display: none;
    }
    #header-left .header-nav-ul li {
        margin-right: 0px;
        margin-left: 40px;
    }
    #mobile-nav.open {
        display: flex;
    }
    #mobile-nav {
        display: none;
        flex-direction: column;
        text-decoration: none;
        list-style: none;
        margin: 60px 15px 20px 0px;
        width: 100%;
        font-size: 100%;
        padding: 0px;
    }
    #localize-left-col {
        display: none;
    }
    #outputs-all-contain {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        width: 100%;
        /* overflow-x: scroll; */
        /* display: none; */
    }
    .output {
        min-height: none;
        min-width: none;
    }
    /* #header-right,
    #header-left {
        display: none;
    } */
    .output {
        width: 100%;
        min-width: auto;
    }
    #tool-localize-dualcols {
        flex-direction: column;
    }
    #localize-right-col {
        width: 100%;
        padding-left: 0px;
    }
    #localize-left-col {
        width: 100%;
        padding: 0px;
    }
    #left-topimg-contain {
        border-radius: 0px;
        padding: 20px 0px 0px 20px;
    }
    #left-ui-contain {
        border-radius: 0px;
        margin-top: 0px;
        width: 100%;
    }
    .output-loading-text {
        justify-content: space-between;
        padding: 5px 20px;
        letter-spacing: -0.02em;
    }
    .loading-gentext1 {
        font-size: 110%;
    }
    .loading-gentext2 {
        font-size: 90%;
        /* margin-right: 20px; */
        color: #737373;
        font-size: 90%;
    }
    .loading-logomark {
        top: 40%;
    }
    .head-subtitle {
        font-size: 90%; 
        margin-top: 10px;
    }
    .user-ans-dual .user-answer-option {
        margin-bottom: 10px;
    }
    .user-ans-dual {
        display: flex;
        flex-direction: column;
    }
    .output.outputimg-contain-loading .output-actions {
        position: absolute;
        top: 8px;
        right: 6px;
        text-align: center;
        display: none;
        z-index: 8;
        /* border-radius: 8px 0px 0px 8px; */
        background: none;
        padding: 0px;
    }
    .output.outputimg-contain-loading .output-actions {
        display: block;
    }
    .output.outputimg-contain-loading .output-actions .material-symbols-outlined {
        color: #000000;
    }
    #onboard-head-text-right {
        display: none;
    }
    #onboard-head-text {
        width: 100%;
        padding: 10px 20px 50px 20px;
        margin: 0px;
        text-align: center;
        /* margin-top: 80px; */
    }
    #onboard-head-text-left {
        width: 100%;
    }
    .onboard-head-text-act {
        font-size: 130%;
    }
    .onboard-head-text-act br {
        display: none;
    }
    #faq-contain {
        padding: 20px;
        margin-bottom: 0px;
    }
    .output-img {
        width: 100%;
    }
    .tool-open .localizeuploadimage {
        border: 1px solid #242424;
        background: #000000;
        height: 100px;
        position: relative;
    }
    .tool-open .icon-editphoto {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 18px;
    }
    .tool-open .inputcontain {
        display: flex;
        margin-bottom: 5px;
    }
    .tool-open .left-label {
        width: 45%;
    }
    #mobile-nav li {
        padding: 10px 0px 10px 25px;
        background: #e4e2d8;
    }
    #mobile-nav li:first-of-type {
        padding-top: 10px;
    }
    #mobile-nav li:last-of-type {
        border-bottom: 1px solid #cccccc;
    }
    #mobile-nav li:hover {    
        background: #f2f1ee;
    }
    #mobile-nav a {
        text-decoration: none;
    }
    #sdoutputcontain {
        padding: 0px;
    }
    .tool-settings-categories {
        width: 100%;
    }
    #tool-settings {
        flex-direction: column;
    }
    .output {
        min-height: unset;
        min-width: calc(100% - 30px);
        border-radius: 0px;
    }
    .outputimageseach {
        border-radius: 0px;
    }
    .output.outputimg-contain-loading {
        min-height: 85px;
        overflow: hidden;
        display: flex;
        flex-direction: column-reverse;
    }
    .loading-gentext2 {
        display: none;
    }
    .progress-bar {
        position: absolute;
        top: 0px;
    }
    .outputimgcontain {
        width: 100%;
        aspect-ratio: 1 / 1;
    }
    .tip-in-loading {
        position: relative;
        bottom: 0px;
        left: 50%;
        /* transform: translate(-50%, -50%); */
        text-align: center;
        padding: 0px 12px 7px 10px;
        color: #575757;
        font-size: 85%;
        width: 80%;
        line-height: 1.25em;
        margin-top: 10px;
    }
    .output-loading-text {
        text-align: center;
        margin: 0 auto;
        margin-top: 0px;
        padding: 0px;
        position: relative;
        /* top: 50%; */
        display: flex;
        flex-direction: column;
        left: 50%;
        /* transform: translate(-50%, -50%); */
        /* margin-top: 10px; */
        /* text-transform: lowercase; */
        font-family: 'Roboto', sans-serif;
        width: 100%;
        color: #4b4b4b;
        font-size: 100%;
        justify-content: center;
        align-items: center;
        padding-bottom: 5px;
    }
    #sidepanel-zoom.sidepanel {
        width: 100%;
    }
    .zoom-img-contain {
        text-align: center;
        background: #fefcf3;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #zoom-lg-image {
        height: auto;
        width: 100%;
        max-width: 512px;
        /* border-bottom: 1px solid #363636; */
    }
    #onboarding-looks-letsstart {
        display: none;
    }
    .zoom-close,
    .sidepanel-close-btn-bottom {
        display: block;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 90%;
        z-index: 10;
        background: #b2b1a8;
        border-radius: 8px;
        padding: 10px;
        cursor: pointer;
        text-align: center;
        color: #131212;
        text-decoration: none;
        font-weight: 600;
    }
    #underbuttons-contain .outfitvariants-btn-submit {
        display: none;
    }
    #left-ui-contain .outfitvariants-btn-submit {
        display: block;
        margin-top: 30px;
        float: left;
    }
    .letsstart-lgtxt {
        margin-bottom: 20px;
    }
    #mini-footer {
        text-align: center;
        margin-bottom: 0px;
    }
    .sidepanel {
        width: 100%;
        min-width: auto;
    }
    .sidepanel-pad-container {
        padding: 20px 0px 0px 20px;
    }
    .faq-answer {
        padding: 0px 20px 20px 55px;
    }
    #faq {
        /* margin-bottom: 90px; */
    }
    #usertext-outfit {
        width: calc(100% - 20px);
    }
    #content-right {
        display: none;
    }
}

@media (max-width: 576px) {
    .onboard-head-text-act {
        text-align: left;
    }
    #header-left .header-nav-ul li {
        margin-right: 0px;
        margin-left: 20px;
    }
    .adjustbody-base-each {
        width: 50px;
        /* height: 50px; */
    }
    .adjustbody-bodyoptions {
        width: 60px;
        min-width: 60px;
    }
    .adjustbody-prev-contain {
        margin-left: 10px;
        width: 290px;
        height: 380px;
    }
}