/* latin-ext */
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://setpose.b-cdn.net/style/fonts/albert-sans-400-latin-ext.woff) format('woff');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://setpose.b-cdn.net/style/fonts/albert-sans-400-latin.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://setpose.b-cdn.net/style/fonts/albert-sans-500-latin-ext.woff) format('woff');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://setpose.b-cdn.net/style/fonts/albert-sans-500-latin.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://setpose.b-cdn.net/style/fonts/albert-sans-700-latin-ext.woff) format('woff');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://setpose.b-cdn.net/style/fonts/albert-sans-700-latin.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --panel-width: 400px;
    --menu-width: 350px;
    --grey-text: #767676;
    --grey-border: 2px solid #e5e5e5;
    --grey-background: #eee;
    --black-text: #2b2b2b;
    --setpose-red: #fc8686;
    --container-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),0 4px 18px rgba(0, 0, 0, 0.05);
    --grey-text-dm: #b9b5b5;
    --grey-background-dm: #333;
    --black-background-dm: #202020;
}

html {
    font-size: 16px;
    overflow-y: scroll;
}

html, body {
    overflow-x: hidden;
}

body {
	font-family: 'Albert Sans', sans-serif;
    font-weight: 500;
	margin: 0px;
	padding: 0px;
	color: var(--black-text);
	background-color: #fff;
}

a {
	color: var(--black-text);
	display: inline-block;
	position: relative;
	text-decoration: none;
	transition: 0.2s;
}

canvas {
    outline: none;
}

input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
	font-family: 'Albert Sans', sans-serif;
    color: var(--black-text);
}

* {
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}

input,
textarea,
button,
select {
    font-weight: 500;
	font-size: 1rem;
}

input[type="text"] {
	background-color: transparent;
	padding: 0.5rem 10px;
	color: var(--black-text);
	margin: 10px auto 10px auto;
	outline: none;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: var(--grey-background);
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px;
    margin: 10px 0;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--setpose-red);
    cursor: pointer;
    border: none;
    box-shadow: none;
}
input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--setpose-red);
    cursor: pointer;
    border: none;
}
input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.2);
}
input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.2);
}

h1 {
	text-align: center;
}

h2 *, h2 {
    font-size: 1.5rem;
}

.menubar .signinbutton {
    position: absolute;
    top: 0;
    right: var(--panel-width);
}

.tags {
    padding: 0px 0px 10px 0px;
}

span.tag {
    background-color: #ff8686;
    padding: 2px 5px;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 3px;
    display: inline-block;
}

span.beta {
    color: #cac9c9;
    font-style: italic;
    position: relative;
    left: 2px;
    font-size: 9pt;
}

.menubar.feedback {
    display: inline;
    margin-left: 50px;
}

.menubar.feedback ul {
    margin: 0px;
}

h2.ref {
    margin: 0px;
}

.postinnerlink {
    text-decoration: underline;
}

.blog {
    width: 900px;
    margin: 0px auto 40px auto;
    padding: 100px 120px;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
}

.blog h1:after {
    display: none;
}

.blog h1 {
    margin: 1rem 0;
    font-size: 3rem;
    display: block;
    text-align: left;
    line-height: 1.2;
}

.blog h2 {
    margin: 2rem 0 1rem 0;
}

.blogfeedback {
    margin: 0px auto;
    text-align: center;
    width: 900px;
    background-color: #fff;
}

img.blog-header {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0px 0px 30px 0px;
}

select.modelswitch,
.panel select,
.menupopupside select {
    margin: 0 0 20px 0;
    background: #fff;
    border-radius: 0.5rem;
    border: var(--grey-border);
    font-size: 0.8rem;
    padding: 10px 1rem;
    width: 100%;
    left: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(https://setpose.b-cdn.net/imgs/chevron-down2.svg);

    background-repeat: no-repeat;
    background-position: center right;
    background-size: 25px;
}

select.modelswitch {
    width: initial;
    margin: 0 0.5rem 0 0;
    flex-grow: 3;
}

.modelselection {
    display: flex;
    flex-flow: row wrap;  
    margin: 1rem 0 0.5rem 0;
}

.panel .modelselection button {
    margin: 0;
}

input[type="radio"] {
    background-color: #fff;
    border: var(--grey-border);
    border-radius: 20px;
    outline: none;
    width: 20px;
    height: 20px;
    margin: 0px 5px 0px 20px;
    box-sizing: border-box;
    vertical-align: bottom;
    transition: 0.2s all linear;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="radio"]:checked {
    border: 6px solid var(--black-text);
}

input[type="radio"]:hover {
    border: 4px solid var(--grey-background);
}
input[type="radio"]:focus {
    border: 6px solid var(--black-text);
}

.blog a {       
    text-decoration: underline;
}

.blog-innerimg {
    max-width: 600px;
    width: 100%;
    text-align: center;
    margin: 40px 0px;
}

.blog-smallinnerimg {
    max-width: 300px;
    width: 100%;
    text-align: center;
    margin: 20px auto;
    display: block;
}

.blogref {
    margin: 50px 0px 20px 0px;
    text-align: center;
    font-size: 1rem;
}

.subtext,
.blogdate {
    color: var(--grey-text);
    font-style: italic;
    margin-bottom: 30px;
}

.tooltip {
    display: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 40px));
    left: 50%;
    text-align: center;
    background-color: #fff;
    padding: 15px 30px;
    font-size: 12pt;
    width: 300px;
    box-shadow: 0 2px 15px 0 rgb(43 43 43 / 5%);
    border-radius: 1rem;
    border: 1px solid #ededed;
}

.tooltip:after {
    content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background-color: #fff;
    position: absolute;
    left: calc(50% - 10px);
    bottom: -10px;
    border: 1px solid #ededed;
    border-top: none;
    border-left: none;
}

.sshinfo {
    display: inline-block;
    position: absolute;    
    top: -3px;
    right: 1px;
}

.sshinfo:hover .tooltip {
    display: block;
}

.blogref .sshinfo {
    display: none;
}

.SignUpInForm form,.SignUpInForm .SignUpHalf {
    width: calc(50% - 40px);
    display: inline-block
}

.SignUpInForm input[type=text],.SignUpInForm input[type=password] {
    width: 100%;
    box-sizing: border-box
}

.SignUpInForm {
    position: fixed;
    z-index: 10;
    background-color: #fff;
    width: 800px;
    top: 100px;
    left: calc(50% - 400px);
    box-sizing: border-box;
    padding: 2rem 4rem;
	border-radius: 1rem;
    -webkit-box-shadow: 0 6px 29px -3px rgba(0,0,0,.29);
    -moz-box-shadow: 0 6px 29px -3px rgba(0,0,0,.29);
    box-shadow: 0 6px 29px -3px rgba(0,0,0,.29);
    display: none
}

input[type=text] {
    font-weight: 400
}

input[type=password] {
    padding: 5px 10px;
    color: var(--black-text);
    margin: 10px auto;
    outline: none;
    font-size: 1rem;
    font-family: 'Albert Sans', sans-serif;
    font-weight: 400
}

input[type=email] {
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    padding: 5px 10px;
    color: var(--black-text);
    margin: 10px auto;
    outline: none;
}

input[type=submit] {
    background-color: transparent;
    padding: 5px 10px;
    color: var(--black-text);
    display: block;
    position: relative;
    outline: none;
}

textarea {
    padding: 5px 10px;
    color: var(--black-text);
    outline: none;
}

body .btn-primary {
    border: none;
    box-sizing: border-box;
    padding: 15px 30px;
    background: var(--grey-background);
    border-radius: 0.5rem;
    margin: 0 15px;
    display: inline-block;
    width: 100%;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.SignUpInForm .btn-primary {
    margin: 10px 0px;
}

form,.SignUpHalf,.SignInHalf {
    position: relative
}

form.signupform,form.signinform,.SignUpHalf,.SignInHalf {
    margin: 0 auto;
    vertical-align: top
}

.SignInHalf {
    float: right
}

.terms {
    font-size: 0.8rem;
    text-align: center;
    color: var(--grey-text);
}

.popUpBack {
    width: 100vw;
    height: 100dvh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 9;
    display: none;
    top: 0;
}

.notification a {
    color: #fff;
    text-decoration: underline;
}

.notifications-container {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    width: 100%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
    z-index: 1000;
}
  
.notification {
    position: relative;
    display: flex;
    flex-flow: column;
    color: var(--black-text);
    text-align: center;
    background-color: #fff;
    padding: 1rem 2rem;
    border-radius: 1rem;
    opacity: 0;
    gap: 5px;
    bottom: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 4px 18px rgb(0 0 0 / 5%);
    z-index: 999;
    border: 1px solid var(--grey-border);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 1rem center;
}

.notification.randompose {
    background-image: url('../imgs/random-icon.svg');
    padding-left: calc(2rem + 25px);
    text-align: left;
}

.notification-title {
    font-size: 0.8rem;
    color: var(--grey-text);
}

.notification.active {
    opacity: 1;
    transform: translateY(0);
}

.btn-primary:active {
    transform: translateY(0px)!important
}

.aboutsection {
    width: calc(100% - 40px);
    display: block;
    background-color: #fff;
    margin: 20px;
    padding: 55px 50px;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8;
    position: relative;

}

.aboutsection p,
.aboutsection ul,
.aboutsection ol {
    max-width: 900px;
    margin: 10px auto;
    font-weight: normal;
}

a.shareButton {
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0px 0.5rem;
    cursor: pointer;
    color: #6b6b6b;
    float: right;
}

.aboutsection h3,
.aboutsection h2 {
    margin: 2rem auto 1rem auto;
    max-width: 900px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1em;
    white-space: nowrap;
}
.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

span.toggletext {
    margin-left: 30px;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e5e5e5;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 100px;
}
.slider:before {
    position: absolute;
    content: "";
    height: calc(1em - 4px);
    width: calc(1em - 4px);
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 100px;
}
input:checked + .slider {
	background-color: #ff8686;
}
input:focus + .slider {
	box-shadow: 0 0 1px #ff8686;
}
input:checked + .slider:before {
	transform: translateX(0.5em);
}

.fbdarkmode .switch {
    position: relative;
    top: 3px;
    left: 0.5rem;
}

span.probriefbadge {
    font-size: 9pt;
    background-color: #ff8686;
    color: var(--black-text);
    padding: 0px 6px;
    border-radius: 30px;
    display: block;
    width: 40px;
    text-align: center;
    margin: 0px auto;
}

.userdropdown:before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(https://setpose.b-cdn.net/imgs/accounticon.svg);
    background-repeat: no-repeat;
    background-size: contain
}

.userdropdown ul {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style-type: none;
    margin: 0;
    padding: 20px 40px;
    width: 110px;
    box-shadow: 0 2px 15px 0 rgba(43,43,43,.05);
    border-radius: 1rem;
    border: 1px solid #ededed;
    left: 50%;
    transform: translate(-50%);
    top: 40px;
    text-align: left;
}

.userdropdown {
    display: block;
    float: left;  
    margin-right: calc(1rem - 0.5rem);

    position: relative;
    padding: 0 0.5rem 12px 0.5rem;
    top: -3px;
    z-index: 3;
}

.userdropdown a {
    margin: 0px;
    color: var(--black-text);
}

.userdropdown ul li {
    padding: 3px 0;
    margin: 3px 0;
    color: var(--black-text);
}

.menubar .upgradebuttonwrap {
    float: right;  
    margin: 0 0 0 1rem;
}

.userdropdown:after {
    content: "";
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background-color: #fff;
    position: absolute;
    left: calc(50% - 10px);
    top: 30px;
    border: 1px solid #ededed;
    border-bottom: none;
    border-right: none;
    display: none;
}

.upgradebuttondesc {
    font-size: 9pt;
    font-style: italic;
    color: #979797;
    margin-top: 10px;
}

.producthuntbadge {
    position: fixed;
    opacity: 0;
    bottom: 20px;
    left: 20px;
    animation-name: bounceinbottom;
    animation-duration: 1.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

.footerinner {
    margin: 0px auto;
    max-width: 900px;
    padding: 55px 50px;
}

.footer {
    background-color: #fff;
    font-size: 1rem;
}

.footerinner .footerblock {
    width: calc(20% - 3px);
    display: inline-block;
    vertical-align: top;
}

.footerinner .footerblock ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.footerinner .footerblock img {
    max-width: 100%;
    width: 70px;
}

.footerinner .footerblock a {
    text-decoration: none;
    margin: 0;
    color: #666666;
    line-height: 1.6;
}

.footerinner .footerblock ul li:first-child {
    font-size: 1rem;
    margin-bottom: 10px;
}

.footerbottom {
    text-align: center;
    margin-top: 70px;
}

.footerbottom .copyright {
    font-size: 15pt;
    margin-bottom: 10px;
}

.footerbottom .legal a {
    text-decoration: underline;
    color: #666666;
}

.footerbottom .legal {
    color: #666666;
}

.blog .briefsupgrade {
    width: calc(100% + 250px);
    position: relative;
    left: -120px;
    top: 0px;
}

.tooltip.small {
    width: 100px;
    padding: 7px 13px 7px 13px;
    background-color: #6b6b6b;
    color: #fff;
    border-radius: 1rem;
    font-size: 0.8rem;
}

.tooltip.small:after {
    content: "";
    width: 15px;
    height: 15px;
    transform: rotate(225deg);
    position: absolute;
    left: calc(50% - 10px);
    bottom: -7px;
    background-color: #6b6b6b;
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.blogdate a {
    color: #aaa;
}

.upgradebutton svg {
    position: relative;
    top: 5px;
    left: 5px;
}

p.thankyousmall {
    font-size: 12px;
    text-align: center;
}

.bloglinkblock {
    font-style: normal;
    margin: 0 0 40px 0;
}

.bloglinkblock a, .bloglinkblock .blogdate {
    font-style: normal;
    margin: 0;
}

.bloglinkblock > a {
    font-size: 18pt;
    text-decoration: none;
    color: #707070;
    margin-bottom: 5px;
}

.bloglinkblock > a:hover {
    text-decoration: underline;
    color: var(--black-text);
}

.recommended {
    max-width: 900px;
    width: 100%;
    margin: 0px auto 40px auto;
}

.recommendedpost {
    width: calc(100% / 2 - 10px);
    display: inline-block;
    vertical-align: top;
    background-color: #fff;
    min-height: 128px;
    padding: 150px 40px 40px 40px;
    box-sizing: border-box;
    font-size: 20px;
    margin-bottom: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 150px;
    position: relative;
    height: 238px;
}

.recommendedpost a {
    text-decoration: underline;    
    z-index: 2;
    position: relative;
}

.recommendedpost.postleft {
    margin-right: 10px;
}

.recommendedpost.postright {
    margin-left: 10px;
}

.recommendedpost:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

#share-buttons img,
.share-buttons.toc img {
    width: 32px;
    padding: 2px;
    border: 0;
    display: inline;
    opacity: 0.7;
    filter: saturate(0);
    transition: 0.2s;
    position: relative;
    top: 10px;
}

.share-buttons.toc {
    color: #8e8e8e;
    padding-left: 40px;
}

div#tocDiv .share-buttons.toc a {
    margin: 0 5px 0px 0px;
}

#share-buttons img:hover {
    opacity: 1;
    filter: saturate(1);
    transition: 0.2s;
}

#share-buttons {
    position: relative;
    top: -40px;
    z-index: 2;
}

.blogpage .blog:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 300px;
    left: 0;
    top: 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 100%);
    z-index: 2;
}

a.right {
    float: right;
}

.mobilenav {
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
    font-size: 9pt;
    z-index: 1000;
    box-shadow: 0 2px 15px 0 rgba(43, 43, 43, 0.1);
    border: 1px solid #ededed;
    display: none;
}

.upgradebuttonwrap2  .upgradebutton {
    color: var(--black-text);
    font-size: 18pt;
    background: 0 0;
    top: 0;
    padding: 0;
    margin: 0;
}

.upgradebuttonwrap2 {
    display: none;
}

.mobilenav li {
    display: inline-block;
    width: calc(100% / 3);
    box-sizing: border-box;
    text-align: center;
}

.mobilenav ul {
    padding: 0;
}

.signinbutton .userdropdown {
    float: left;
}

.blog.indexpage {
    background: none;
    padding: 0;
    max-width: 1100px;
    width: 100%;
}

.blog iframe.postembed {
    border: none;
    width: 50%;
    height: 520px;
    margin: 0;
    overflow: hidden;
}

.feedbackpostsbriefs {
    width: 900px;
    margin: 40px auto;
}

.feedbackpostsbriefs iframe.postembed {
    border: none;
    width: calc(50% - 10px);
    height: 502px;
    overflow: hidden;
    margin-bottom: 20px;
    display: inline-block;
}

.feedbackpostsbriefs iframe.postembed:nth-child(even) {
    float: right;
}

.SignUpInForm.show {
    display: block !important;
}

.proswitch label.switch {
    vertical-align: sub;
    margin-left: 10px;
}

.proswitch {
    font-size: 16pt;
}

p.containersubtext {
    font-size: 13px;
    text-align: center;
    color: #858585;
}

p.containersubtext a {
    color: #858585;
    text-decoration: underline;
}

p.briefsubtext {
    font-size: 12pt;
    color: #cccccc;
}

iframe.youtubeembed {
    height: 371px;
}

img.blogimghalf {
    max-width: calc(50% - 10px);
    display: inline-block;
    vertical-align: top;
    margin: 5px;
}

p.small {
    font-size: 0.8rem;
    color: #858585;
}

form.emailchangeform {
    display: none;
}

a#emailchangebtn {
    vertical-align: middle;
    margin-left: 10px;
}

.products_container.singlepage {
    max-width: 900px;
    padding: 0 1rem;
}

.products_container.singlepage .profileContainer {
    padding: 2rem 0;
}

.setposeproav {
    padding: 1rem;
    box-sizing: border-box;
    background-image: url(https://setpose.b-cdn.net/imgs/setposeavpoint2.png);
    background-size: 266px;
    background-repeat: no-repeat;
    background-position: calc(100% + 1rem) calc(100% - 45px);
    margin-top: -1rem;
    position: relative;
}

.setposeproav ul li {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

.setposeproav .fcprologo {
    max-width: 100%;
}

.setposeproav img.headerlogo {
    height: 100%;
    margin: 0;
}

.setposeproav ul {
    font-size: 1rem;
    text-align: left;
    margin: 1rem 0;
    padding: 0;
    list-style-type: none;
    max-width: 243px;
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.setposeproav .fctrialbtn svg {
    vertical-align: middle;
}

.setposeproav .fctrialbtn {
    display: block;
    background-color: #ff8686;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: center;
}

.setposeproav ul li svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    margin-top: 2px;
}

.SignUpInForm.trialpage {
    width: 500px;
    left: calc(50% - 250px);
}

.SignUpInForm.trialpage form {
    width: 100%;
}

a#alreadysignupbtn {
    font-size: 0.8rem;
    display: block;
    margin: 20px auto 20px auto;
    text-align: center;
}

.prosignupav {
    display: none;
    position: fixed;
    bottom: 0;
    background-color: #ff8686;
    padding: 20px 20px;
    width: 100%;
    font-size: 13pt;
    z-index: 10;
    text-align: center;
}

.prosignupav a {
    text-decoration: underline;
}

.prosignupav a svg {
    vertical-align: middle;
    margin-left: 10px;
}

div#tocDiv {
    right: calc(50% + 490px);
}

div#recsidebar {
    left: calc(50% + 450px);
}

.blogsidebar {
    position: fixed;
    top: 30px;
    padding: 30px 0px 30px 0px;
    box-sizing: border-box;
    max-width: 350px;
}

.blogsidebar a {
    margin-bottom: 20px;
    color: #8e8e8e;
}

.blogsidebar a:hover {
    text-decoration: underline;
    color: var(--black-text);
}

.blogsidebar ul{
    list-style-type: none;    
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    margin-bottom: 0;
}

a.toclink {
    display: block;
}

h2.contentshead {
    padding-left: 45px;
    font-size: 16pt;
    color: #8e8e8e;
}

.exitpopup {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(160, 160, 160, 0.50);
    z-index: 10;
}

.exitpopup .exitmessage {
    max-width: 550px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 20px 50px 50px 50px;
    font-size: 16pt;    
    box-shadow: 0 2px 15px 0 rgba(43,43,43,.05);
    -webkit-box-shadow: 0 2px 15px 0 rgba(43,43,43,.05);
    -moz-box-shadow: 0 2px 15px 0 rgba(43,43,43,.05);
    border-radius: 1rem;
    border: 1px solid #ededed;
}

.exitpopup .exitmessage h1 {
    font-size: 25pt;
    text-align: left;
    margin: 20px 0 0px 0;
}

.exitpopup .exitmessage h1:after {
    display: none;
}

.exitpopup .exitmessage .link {
    font-size: 20pt;
}

.exitpopup .exitmessage .link svg {
    width: 30px !important;
    height: 30px !important;
    vertical-align: middle;
}    

.selectorhint {
    display: none;
    position: absolute;
    height: 0;
    width: 0;
    left: -220px;
    top: 7px;
    z-index: 1;
}

.selectorhintinner {
    width: 180px;
    border-radius: 1rem;
    left: 0;
    top: 0;
    background-color: #fff;
    border: 1px solid #ededed;
    padding: 10px 0px 10px 15px;
    position: absolute;
    box-shadow: 0 1px 2px rgb(0 0 0/5%),0 4px 18px rgb(0 0 0/5%);
    animation: float 6s ease-in-out infinite;
}

.selectorhintinner:after {
    content: "";
    width: 20px;
    height: 20px;
    transform: rotate(-45deg);
    background-color: #fff;
    position: absolute;
    right: -12px;
    top: 20px;
    border: 1px solid #dbdbdb;
    border-top: none;
    border-left: none;
}

#closegenhint {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    left: 5px;
    opacity: .5;
}

p.blog-subtitle {
    color: #aaa;
    font-style: italic;
    font-size: 12pt;
}

.inlineupgradepopup {
    position: fixed;
    z-index: 10;
    top: 70px;
    left: calc(50% - 475px);
}

.UpgradePopupClose {
    z-index: 30;
    position: fixed;
}

button.managebillingbtn:after {
    display: none;
}

.pronextfeature {
    max-width: calc(100% / 3 - 23px);
    display: inline-block;
    margin: 0px 10px;
    vertical-align: top;
}

.pronextfeature img {
    max-width: 100%;
}

.pronextfeatureimg {
    height: 155px;
    overflow: hidden;
    border-radius: 1rem;
    border: 3px solid #efefef;
    box-sizing: border-box;
}

.pronextfeaturecont {
    margin: 0 0 50px;
}

.pronextfeaturelink:after {
    content: attr(data-content);
    position: absolute;
    color: #000;
    bottom: 0;
    left: -10px;
    width: 100%;
    height: 50%;
    padding: 0px 10px;
    background-color: #ff8686;
    z-index: -1;
}

.pronextfeaturelink {
    position: relative;
    width: fit-content;
    margin: 0px auto;
    font-size: 1rem;
    font-weight: bold;
}

.pronextfeaturetitle {
    font-size: 1rem;
    font-weight: bold;
    margin: 20px -20px 10px -20px;
}

.pronextfeaturetext {
    color: #707070;
    margin: 0px 0px 10px;
}

.pronextfeaturelink svg {
    position: relative;
    top: 5px;
    left: 5px;
}

.pronextfeaturecont a {
    display: inline;
    margin: 0;
    text-decoration: none !important;
}

.design-post .pastbrief a.underline {
    text-decoration: underline !important;
    pointer-events: auto;
}

.blog.brief:not(.indexpage) h2 {
    margin: 0 0 20px 0;
    display: inline-block;
}

.home .inlineupgradepopup {
    top: 90px;
}

input#instantsignupbutton {
    margin: 20px 0;
}

.pose-image {
    max-width: 100%;
}

.aboutsection a {
    text-decoration: underline;
}

.poseprompt.hidden {
    display: none;
}

.poseprompt {
    position: absolute;
    display: flex;
    left: calc(50% - var(--panel-width) / 2);
    transform: translate(-50%);  
    bottom: 45px;
    max-width: calc(100vw - 10px);
    width: 400px;
    background-color: #fff;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
    font-size: 0.8rem;
    transition: 0.3s;
    z-index: 3;
    box-shadow: var(--container-shadow);
}

.poseprompt input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.poseprompt h3 {
    margin: 0 0 1rem 0;
    font-weight: 500;
    font-size: 1rem;
}

.poseprompt p {
    margin: 1rem 0;
    color: var(--grey-text);
}

.promptrow {
    display: flex;
    gap: 0.5rem;
}

.promptrow button {
    margin: 0;
}

body .addposebtncontainer .addposebtn {
    background-color: var(--setpose-red);
    color: #1b0000;
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
}

.addposebtncontainer {
    position: absolute;
    bottom: 100px;
    left: 20px;
}

.addposeimgwrap {
    height: 165px;
    width: 200px;
    border-radius: 1rem;
    margin-right: 20px;
    background-size: cover;
    background-position: center;
}

.poseprompt .closebtn,
.menupopupside .closebtn,
.modal-content .closebtn,
.topRightIcon {    
    position: absolute;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../imgs/close2.svg');
    width: 25px;
    height: 25px;
    right: 0.5rem;
    top: 0.5rem;
    background-color: transparent;
    border: none;
    margin: 0;
    z-index: 1;
    padding: 0;
}

.panel .posedeletebtn,
.menupopupside .posedeletebtn {
    display: none;
    margin-left: 10px;
}

.setposebtn:hover .posedeletebtn {
    display: initial;
}

a.getfeedbackbtn {
    font-family: 'Albert Sans', sans-serif;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 15px;
    display: inline;
    margin: 0 5px 10px 0;
    background-color: #fff;
    border-radius: 0.5rem;
    cursor: pointer;
    position: initial;
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
}

.syncdetailscontainer {
    position: absolute;
    bottom: 14px;
    right: calc(var(--panel-width) + 20px);
    color: var(--grey-text);
    font-size: 0.8rem;
    opacity: 0.5;
}

img#ssimgprev {
    display: none;
    max-width: 100%;
    max-height: 400px;
}

a.homeupgradelink {
    background-color: var(--setpose-red);
    color: var(--black-text);
    cursor: pointer;
    position: relative;
}

a.homeupgradelink.mobileupgrade {
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: var(--container-shadow);
    font-size: 1rem;
    margin: 1rem 0.5rem 0 0;
}

a.upgrademenubanner {
    display: inline;  
    margin-top: auto;
}

.popupmenu.modeladdbutton {
    margin: 0 0 0 auto;
    display: flex;
    background: none;
    padding: 1rem 0 0 0.5rem;
    align-items: center;
}

.popupmenu.modeladdbutton img {
    width: 20px;
    height: 20px;
}

.panelscroll .popupmenu.modeladdbutton.open {
    background: none;
}

.tilemenuinner.modelmenu {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 1rem 0 0 0;
}

.panelscroll > details
.panelscroll > .popupmenu {
    margin-bottom: 0.5rem;
}

.panelscroll > details summary,
.panelscroll > .popupmenu {
    list-style: none;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.panelscroll details summary::marker,
.panelscroll details summary::-webkit-details-marker,
.mobilemenu details summary::marker,
.mobilemenu details summary::-webkit-details-marker {
  display: none;
}

.menuiconimg {
    width: 25px;
    height: 25px;
}

.menubar {
    margin-left: 0.5rem;    
    display: inline-block;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.panel .selectmodelnotice,
.menupopupside .selectmodelnotice {
    display: none;
}
.menupopupside .inlinenotice {
    width: calc(100% - 2rem);
    margin: 0 1rem;
}

@keyframes explode {
      0% {
          height: 0px;
          width: 0px;
      }
      100% {
          height: 180px;
          width: 15px;
          border-radius: 100px;
      }
}
@keyframes cfadeout {
      0% {
          opacity: 0;
      }
      70% {
          opacity: 0.7;
      }
      100% {
          opacity: 0;
      }
}
@keyframes fadeup {
    0% {
        opacity: 0;
        bottom: -50px;
    } 100% {
        opacity: 1;
        bottom: 45px;
    }
}

/*REDESIGN*/

input[type=text] {
	border-radius: 0.5rem;
	border: var(--grey-border);
	transition: 0.2s;
}

input[type=text],
input[type=password],
input[type=email],
textarea {
	border-radius: 0.5rem;
	border: var(--grey-border);
}

body.darkmode {
    background-color: var(--black-background-dm);
    transition: 0.3s;
    color: #dfdfdf;
}
.darkmode a,
.darkmode a:hover,
.darkmode .menubar li {
    color: #dfdfdf !important;
}
.darkmode .aboutsection, 
.darkmode .homefeedbackposts.inlineposts .design-post, 
.darkmode .feedbackpost, 
.darkmode .menubar ul.sub > ul, 
.darkmode .userdropdown ul, 
.darkmode .userdropdown:after, 
.darkmode .footer, 
.darkmode .credit, 
.darkmode .recommendedpost,
.darkmode .panel,
.darkmode .hidepanelbtn,
.darkmode .presetinfo,
.darkmode .presetinfopointer,
.darkmode .poseprompt,
.darkmode .panel button.tilemenuitem,
.darkmode #angle-display {
    background-color: var(--black-background-dm);
    color: #dfdfdf;
    border-color: var(--grey-background-dm);
    border-width: 2px;
}

.darkmode .movebtn input:not(:checked) + span,
.darkmode .headerlogo,
.darkmode .userdropdown:before,
.darkmode .panel summary img,
.darkmode .panel button img,
.darkmode .posepresetscontainer summary img.summaryarrow,
.darkmode .menutitlebutton img,
.darkmode .popupsidetop .menuiconimg{
	filter: invert(1);
}

.darkmode .canvascontainer {
	border-color: var(--black-text);
	box-shadow: none;
}
.darkmode .panel p {
    color: var(--grey-text-dm);
}
.darkmode button,
.darkmode .panel button,
.darkmode .getfeedbackbtn,
.darkmode .iconbuttonpointer,
.darkmode .iconbuttontext {
    background-color: var(--grey-background-dm);
    color: #dfdfdf;
}
.darkmode .panel .tilemenuitem:hover,
.darkmode .panel .tilemenuitem:hover .tilemenuitemtext,
.darkmode button.tilemenuitem:hover,
.darkmode button.tilemenuitem:hover .tilemenuitemtext {
    background-color: var(--grey-background-dm);
    color: #dfdfdf;
}
.darkmode select,
.darkmode #scenelist > div:not(.selected),
.darkmode .tilemenuinner,
.darkmode .tilemenuinfo,
.darkmode .tilemenuinner.modelmenu:after,
.darkmode input[type="text"], 
.darkmode input[type="password"], 
.darkmode input[type="email"], 
.darkmode textarea,
.darkmode .menupopupside,
.darkmode .panelscroll .popupmenu,
.darkmode .panelscroll .popupmenu.open,
.darkmode .panelscroll > .popupmenu:hover,
.darkmode .posepresetscontainer summary,
.darkmode #campos-trigger,
.darkmode .campospicker,
.darkmode .campospicker button:hover,
.darkmode .color-grid,
.darkmode .materials-grid {
    background-color: var(--black-background-dm) !important;
    color: #dfdfdf !important;
    border-color: var(--grey-background-dm) !important;
}
.darkmode .tilemenuinfo,
.darkmode .tilemenuinner.modelmenu:after,
.darkmode .menu-block {
    background-color: var(--grey-background-dm) !important;
}
.darkmode .inlinenotice {
    color: var(--grey-text-dm);
    border-color: var(--grey-background-dm);
}
.darkmode .currentjointcontainer,
.darkmode .tilemenuitem.proplusimport {
    border-color: var(--grey-background-dm);
}
.darkmode .menupopupside .tilemenuinfo::after,
.darkmode .controlstop,
.darkmode .keyframelist,
.darkmode #animation-settings,
.darkmode .menu-tabs {
    background-color: var(--grey-background-dm);
    border-color: var(--grey-background-dm);
}
.darkmode .menu-tab.active {
    background-color: var(--black-background-dm);
    color: #fff;
}
.darkmode .menu-tab {
    color: var(--grey-text-dm);
}
.darkmode .panelscroll {
    scrollbar-color: var(--grey-background-dm) transparent;
}
.darkmode h1 {text-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);}
.darkmode h1.menubarlogo, .darkmode h1.mobilehomeheader {color: #fff}

.darkmode svg {filter: invert(0.5);}
.darkmode .feedback img {display: none;}

.darkmode .social,
.darkmode .mobilemenubtn img,
.darkmode .animationprompt.poseprompt img,
.darkmode .campospicker img {
    filter: invert(1);
}

.darkmode .blog:not(.indexpage),
.darkmode .keyframe-item,
.darkmode .constraints-editor-container thead {
    background-color: var(--black-background-dm);
}
.darkmode .mobilemenubtn,
.darkmode .movebtn,
.darkmode .controlhintinner,
.darkmode .controlhintinner:after,
.darkmode .mobilemenuinner,
.darkmode .mobilemenuinner >*:hover,
.darkmode .mobilemenuinner::after,
.darkmode .opensettingsbtn::before,
.darkmode .morecontrols button:hover,
.darkmode .control-toggle:hover {
    background-color: var(--grey-background-dm);
}
.darkmode .mobilenav svg {
    filter: invert(0);
}

.darkmode .mobilenav {
    background-color: var(--black-text);
    border-color: #292929;
}

.darkmode span.viewmorebutton {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgb(56, 56, 56) 0% 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgb(56, 56, 56) 50%);
}

.blogpage.darkmode .blog:before {
    background: linear-gradient(0deg, rgb(56, 56, 56) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.darkmode .recommendedpost:after {
    background: linear-gradient(0deg, rgb(56, 56, 56) 0%, rgba(56, 56, 56, 0.2) 70%, rgba(56, 56, 56, 0) 100%);
}

.darkmode .generatorviewall {
    background-color: rgb(41 41 41 / 86%);
    box-shadow: 0 0 20px #292929;
}

.darkmode .design-post .pastbrief:before {
    background-color: var(--black-text);
}

.darkmode .design-post .pastbrief:before {
    background-color: var(--black-text);
}

.darkmode .design-post .commentButton img, .darkmode .design-post .likeButton img {
    filter: invert(1);
}
.darkmode .panel .tilemenuitem img {
    filter: none;
}

.darkmode .likeNumber {
    color: #dfdfdf;
}

.darkmode .aboutsection {
    background: none;
}

.darkmode .writtenbrief.briefplaceholder .headerplaceholder,
.darkmode .writtenbrief.briefplaceholder .briefbadge,
.darkmode .writtenbrief.briefplaceholder .writtenbrieftext,
.darkmode .img-wrap.loading {
    background: linear-gradient(-45deg,#626262,#525252,#626262,#525252);
    border-color: #525252;
}

.darkmode .pastbrief {
    border: 2px solid #656565;
}

.darkmode .footerinner .footerblock img {
    filter: invert(1);
}

.darkmode .base-timer__path-elapsed {
    stroke: #2a2a2a;
}
.darkmode .setposebtn.savedposes,
.darkmode .setposebtn.savedscenes {
    background: none;
}

.darkmode .colorpicker-tab.active {
    color: #fff;
    background-color: var(--black-background-dm);
}

.darkmode .hex-input-wrap {
    background-color: var(--grey-background-dm);
}

@keyframes menubar {
    0% {
        max-height: 100px;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        max-height: 400px;
    }
}

@keyframes fadein {
    from {
        transform: scaleX(0.2);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes fadeinout {
    0% {
        width: 100%;
    }
    100% {
        width: 250px;
    }
}

@keyframes fadeout {
    0% {
        width: 250px;
    }
    100% {
        width: 100%;
    }
}

@keyframes bounceinbottom {
    0% {
        bottom: -200px;
    }
    30% {
        bottom: 40px;
        opacity: 1;
    }
    60% {
        bottom: 10px;
        opacity: 1;
    }
    100% {
        bottom: 20px;
        opacity: 1;
    }
}

@keyframes float {
    0% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.06);
        transform: translatey(0px);
    }
    50% {
        box-shadow: 0 25px 15px 0px rgba(0,0,0,0.02);
        transform: translatey(-20px);
    }
    100% {
        box-shadow: 0 5px 15px 0px rgba(0,0,0,0.06);
        transform: translatey(0px);
    }
}

@keyframes fadeinbottom {
    0% {
        top: 100px;
        opacity: 0;
    }
    100% {
        top: 0px;
    }
}

@keyframes heightfade {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}

@media only screen and (max-width: 1650px) {
    .home .upgradebuttonwrap {
        display: none;
    }
}

@media only screen and (max-width: 1300px) {
    .blogsidebar { display: none !important; }
    a.nextbriefbtn, a.previousbriefbtn { display: none; }
}

@media only screen and (max-width: 1400px) {
    .writtenbriefs,
    .feedbackposts {
        width: 100%;
    }
    .writtenbrief,
    .feedbackpost {
        width: calc(33% - 21px) !important;
        margin: 10px;
        padding: 40px 20px 40px 20px;
    }
    .homebrieflist .writtenbrief {
        width: calc(33% - 21px) !important;
        margin: 10px;
    }
    .social {
        display: none;
    }
    .home .menubar > ul {
        position: absolute;
        left: 20px;
        right: initial;
    }
    .headercollapsed .menubar {
        padding-bottom: 80px;
        transition: 0.5s;
    }
    .menubar:not(.feedback) > ul {
        margin-right: 10%;
    }
}

@media only screen and (max-width: 1000px) {
    .social {
        display: none;
    }
    .menubar:not(.feedback) > ul {
        max-width: calc(100vw - 470px);
        overflow-x: auto;
        white-space: nowrap;
    }
    .menubar:not(.feedback) > ul > li, .menubar:not(.feedback) > ul > ul.sub {
        margin: 0px 5px !important;
    }
    .menubar.promenubar > ul {
        max-width: calc(100vw - 100px);
    }
}

@media only screen and (max-width: 820px) {
    .menubar>ul {
        right: 0;
    }
    body {
        overflow-x: hidden;
    }
    .ref.text {
        margin-right: auto;
        margin-left: auto;
        width: 90%;
    }
    .feedback {
        display: none;
    }
    .upgradebuttonwrap2 {
        display: block;
    }
    .writtenbrief,
    .feedbackpost {
        width: calc(100% - 20px) !important;
        display: block;
    }
	.newsletter {
		width: 100%;
		left: 0px;
		bottom: 0px;
		box-sizing: border-box;
		padding: 0px 50px;
	}
	input[type="submit"] {
	    display: inline-block;
	}
    .feedback,
    .blogfeedback {
        width: 100%;
    }
    .feedback img,
    .blogfeedback img {
        width: 100% !important;
    }
    .briefs .container,
    img.blog-header,
    .blog {
        max-width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }
    .social {
        display: none;
    }
    .menubar > ul > li {
        margin: 0px;
    }
    .menubar ul.sub > ul {
        left: 0px;
        width: 100vw;
    }
    .menubar ul.sub {
        position: initial;
        margin: 0px 5px 0px 5px;
    }
    .logo-container {
        width: calc(50% - 12px);
        margin: 5px;
        padding: 0px;
    }
    .logos-container {
        width: 100%;
    }
    .single-logo-container,
    .logo-comment-container  {
        width: 100%;
    }
    .menubar:after {
        display: none;
    }
    .menubar.feedback {
        width: calc(100% - 124px)
    }
    .menubar:not(.feedback):after {
        content: '';
        background-image: linear-gradient(to right, rgba(247, 247, 247, 0), rgba(247, 247, 247, 1));
        width: 20%;
        height: 80px;
        position: absolute;
        right: 70px;
        top: 0;
    }
    .menubar > ul {
        display: none;
        padding-right: 80px;
    }
    .userdropdown > ul > li {
        display: block;
        margin: 10px 0;
    }
    .userdropdown {
        margin-right: 0;
    }
    .SignUpInForm form {
        width: 100%;
    }
    .SignUpInForm {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 1rem;
        border-radius: 2rem 2rem 0 0;
        overflow-y: auto;
        max-height: 80dvh;
        top: unset;
        flex-flow: column;
    }
    .SignUpInForm.trialpage {
        width: 100%;
        left: 0;
    }
    .upgradebuttonwrap {
        position: absolute;
        top: 50px;
        right: -40px;
        display: none;
    }
    .writtenbriefs {
        margin: 0px auto;
    }
    .credit {
        display: none;
    }
    .producthuntbadge {
        transform: scale(0.7);
        left: -30px;
        bottom: 50px !important;
    }
    .blog h1 {
        font-size: 2rem;
        margin-bottom: 0;
        line-height: 1.2;
    }
    .blog img.blog-header {
        max-width: initial;
        margin-bottom: 0;
        width: calc(100vw + 120px);
    }
    .blogfeedback a img {
        height: initial;
    }
    .blog .briefsupgrade .writtenbrief {
        display: none;
    }
    .blog .briefsupgrade {
        min-height: 300px;
    }
    .recommendedpost{
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #share-buttons {
        top: 0px;
    }
    .blogpage .blog:before {
        display: none;
    }
    .blog img.blog-header {
        display: none;
    }
    .blogdate {
        margin-top: 20px;
    }
    .mobilenav {
        display: block;
    }
    .blog.brief.indexpage .writtenbrief {
        padding: 30px 25px 25px 25px;
    }
    .blog.indexpage .writtenbrief,
    .homebrieflist .writtenbrief {
        width: calc(100% - 20px) !important;
        padding: 30px 25px 70px 25px;
    }
    .briefsupgrade .writtenbrief:nth-of-type(2), .briefsupgrade .writtenbrief:nth-of-type(3) {
        display: none;
    }
    .writtenbriefs .briefsupgrade h2 {
        width: 100%;
    }
    .writtenbriefs .briefsupgrade .upgradebutton {
        text-align: center;
        width: max-content;
    }
    .header .ref.text {
        padding: 10px 10px;
    }
    .darkmode .menubar:not(.feedback):after {
        background-image: linear-gradient(to right, rgba(41, 41, 41, 0), rgb(41, 41, 41));
    }
    .userdropdown ul {
        width: calc(100vw - 100px) !important;
        position: fixed !important;
        left: 10px !important;
        top: 65px;
        transform: none !important;
        text-align: left;
    }
    .userdropdown:after {
        position: fixed;
        right: 30px;
        top: 55px;
        left: initial;
    }
    .footerinner .footerblock {
        width: calc(50% - 3px);
        margin-top: 30px;
    }
    .footerinner {
        padding: 25px 30px 75px 30px;
    }
    .footerbottom {
        margin-top: 40px;
        margin-bottom: 80px;
    }
    .footerinner .footerblock a {
        font-size: 1rem;
        margin: 5px 0;
    }
    .footerbottom .legal a {
        font-size: 1rem;
        margin: 15px;
    }
    iframe.youtubeembed {
        height: calc((100vw - 40px) * (9 / 16));
    }
    .prosignupav {
        bottom: 67px;
    }
    .headercollapsed .desc.text {
        margin-top: 100px;
    }
    .selectorhint {
        display: none !important;
    }
    .inlineupgradepopup {
        left: 0;
        top: 0;
        position: absolute;
    }
    .blog.brief.indexpage .briefspagesubtext.collapsed {
        max-height: 100px;
        overflow: hidden;
        position: relative;
    }

    .blog.brief.indexpage .briefspagesubtext.collapsed:after {
        content: "";
        display: block;
        z-index: 2;
        height: 100px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(247, 247, 247, 1) 100%);
        background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(247, 247, 247, 1) 100%);
        background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(247, 247, 247, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0 );
    }
    a#briefspagereadmore {
        display: block;
    }
    .blogref .ref.text {
        font-size: 1rem;
    }

    .blogref .ref.text svg {
        width: 15px !important;
        vertical-align: middle;
        margin: 0;
    }

    .blogref .ref.text .link:after {
        height: 10px;
        bottom: 3px;
    }

    .blogref .ref.text .link {
        margin: 0;
    }

    .blogref .ref.text .sshinfo {
        display: none;
    }
    .sshinfo {
        top: 0;
        right: 0;
    }
    .blog {
        margin: 70px auto;
    }
    .writtenbriefsfilter p.briefsnumber {
        display: none;
    }
    .writtenbriefsfilter select {
        margin-right: 0;
    }
    .brieffeedbackposts.inlineposts .design-post {
        width: 100%;
    }
    .brieffeedbackposts.inlineposts {
        width: calc(100% - 20px);
        margin-top: 40px;
    }
    .briefcontent .briefreffeedback a {
        font-size: 1rem;
        width: calc(50% - 3px);
    }
    .briefreffeedback {
        margin-top: 10px;
    }
    .generatorviewall {
        top: 490px;
    }
    .briefs:not(.progenerator):not(.dynamic-poses):after {
        height: 120px;
        top: 430px;
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 20%,rgba(255,255,255,1) 100%);
        background: linear-gradient(to bottom, rgba(247, 247, 247, 0) 0%,rgb(247, 247, 247) 100%);
    }
    .brieffeedbackposts.inlineposts .design-post:nth-child(even) {
        margin-left: initial;
    }
    .brieffeedbackposts.inlineposts .design-post:nth-child(odd) {
        margin-right: initial;
    }
    a.briefinnerdscont .briefinnerdstext {
        font-size: 13pt;
    }
    .upgradecontainter .upgradeinner {
        display: flex;
        flex-flow: column-reverse;
    }
    .briefbuttonrow {
        float: none;
        display: block;
    }
    .blog.brief:not(.indexpage) {
        width: calc(100% - 20px);
    }
    .blog.brief:not(.indexpage) span.briefbadge {
        top: 0;
        margin-left: 0;
    }
    .proswitch {
        font-size: 13pt;
    }
    .signOutButtonMobile {
        display: initial;
    }
    .signOutButton {
        display: none;
    }
    .sshinfo .tooltip {
        left: 10px;
        top: 10px;
        transform: none;
        width: calc(100% - 20px);
        position: fixed;
        z-index: 3;
        box-sizing: border-box;
    }
    .sshinfo .tooltip:after {
        left: initial;
        right: 10px;
    }
    body.feedbackpage .menubar {
        display: block;
        top: 0;
    }
    body.feedbackpage .menubar > ul {
        top: 0;
        max-width: calc(100vw - 40px);
    }
    a.homeupgradelink.mobileupgrade {
        display: inline-block;
    }
    .menubar .signinbutton {
        right: 0.5rem;
    }
    .homepage  a.homeupgradelink.mobileupgrade {
        right: 0;
        margin-right: 0;
    }
    @keyframes fadeup {
        0% {
            opacity: 0;
            bottom: -80px;
        } 100% {
            opacity: 1;
            bottom: 0;
        }
    }
}



/*posture editor css */



button {
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background-color: var(--grey-background);
    border-radius: 0.5rem;
    cursor: pointer;
    position: initial;
}

.panel {
    width: var(--panel-width);
    flex: 0 0 var(--panel-width);
    box-shadow: var(--container-shadow);
    font-size: 0.8rem;
    background-color: #fff;
    box-sizing: border-box;
    transition: 0.3s;
    z-index: 1;  
    display: flex;
    flex-flow: column;  
    max-height: 100dvh;
}

.menupopupside {
    font-size: 0.8rem;
}

.cont-2 .constraints-menu {
    width: 100%;
}

.constraints-menu-inner {
	display: flex;
	gap: 0.5rem;
    width: 100%;
}
#constraints-selector {
    margin: 0;
}
.constraints-check {
    gap: 5px;
}

.constraints-check label.toggletext {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-input::-webkit-inner-spin-button, 
.c-input::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.custom-constraints-popup {
    width: 500px;
}

.custom-constraints-popup .addposepromptform {
    max-width: 500px;
}

.constraints-editor-container table th {
    border-bottom: 1px solid #eee;
}

.constraints-editor-container table td {
    border-bottom: 1px solid #f9f9f9;
}

.constraints-editor-container thead {
	position: sticky;
	top: 0;
	background-color: #fff;
}

.c-input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 4px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.constraints-selector-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.constraints-menu-inner button {
	padding: 8px;
    line-height: 0;
}
.constraints-menu-inner button img {
	width: 20px;
}
.panelbottom {
    margin-top: auto;
}

.panelbottom,
.mobilepanelbottom {
    text-align: center;
}

.panel .panelbottom p,
.panel .mobilepanelbottom p {
    color: #2b2b2b;
}

.panelbottom a,
.mobilepanelbottom a {
    text-decoration: underline;
}

.panelscroll {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1rem 0 1rem;  
    position: relative;  
    scrollbar-color: var(--grey-background) transparent;
    scrollbar-width: thin;
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.canvaspanelcontainer {
    display: flex;
    width: 100%;
    height: 100dvh;
}

.canvascontainer {  
    flex: 1 0 auto;
    max-width: calc(100% - var(--panel-width));
    max-height: 100dvh;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ss-capture-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transition: width 0.2s ease, height 0.2s ease;
}

.canvascontainer.dragover {
    background-color: rgba(134, 134, 134, 0);
    transition: all 0.2s ease;
}

.canvascontainer.dragover::after {
    content: 'Drop to import';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(43, 43, 43, 0.8);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 1rem;
    pointer-events: none;
    z-index: 1000;
}

.header {
    position: absolute;
    width: 100%;  
    height: 0;
    z-index: 2;
}

.paneldesc {
    margin: 0;
}

.page .header {
    position: initial;
}

label.movebtn {
    border-radius: 1rem;
    width: 45px;
    height: 45px;
    display: inline-block;
    overflow: hidden;
}

label.movebtn > input:checked ~ span {
    background-color: #ff8686;
    transition: 0.2s;
}

label.movebtn > input {
    display: none;
}

label.movebtn > span {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 0;
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.2s;
}

label.movebtn.tilt3d span {
    background-image: url(../imgs/tilticon.svg);
}
label.movebtn.roll3d span {
    background-image: url(../imgs/rollicon.svg);
}
label.movebtn.rotate3d span {
    background-image: url(../imgs/rotateicon.svg);
}
label.movebtn.move3d span {
    background-image: url(../imgs/moveicony.svg);
}
label.movebtn.move3d2 span {
    background-image: url(../imgs/moveiconx.svg);
}
label.movebtn.undo span {
    background-image: url(../imgs/undoicon.svg);
}
label.movebtn.resizer span, #resizebtn div {
    background-image: url(../imgs/resizemodelicon.svg);
}
label.movebtn.drawingmode span, #drawbtn div, #drawdisabled div {
    background-image: url(../imgs/drawicon.svg);
}
label.movebtn.more span {
    background-image: url(../imgs/more.svg);
}

.propcontrols label.movebtn.rotate3d span {
    background-image: url(../imgs/rotateiconprop.svg);
}
.propcontrols label.movebtn.move3d span {
    background-image: url(../imgs/moveiconpropy.svg);
}
.propcontrols label.movebtn.move3d2 span {
    background-image: url(../imgs/moveiconpropx.svg);
}
.propcontrols label.movebtn.resizer span, .propcontrols #resizebtn div {
    background-image: url(../imgs/resizeobjecticon.svg);
}

#drawbtn div, #drawdisabled div, #resizebtn div {
    width: 25px;
    height: 25px;
    background-size: contain;
    display: inline-block;
}
.morecontrols #drawdisabled b:after {
    top: 15px;
    right: 0.5rem;
}

.control.extracontrol {
    display: none;
}
.control.extracontrol.selected {
    display: initial;
}

.movebtn.more {
    background: none;
    box-shadow: none;
}

.drawingmodeprompt.poseprompt {
	flex-flow: column;
}
.drawingbrushslider {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
#cleardrawing {
    margin-top: auto;
}
.drawingmodeprompt.poseprompt .posepromptoptions {
    gap: 1rem;
}

.morecontrols {
	display: flex;
	flex-flow: column;
}
.morecontrols button {
	text-align: left;
	background: none;
    display: flex;
    gap: 0.5rem;
    width: calc(100% + 10px);
    position: relative;
    left: -5px;
	transition: 0.2s;
}
.morecontrols button img {
    width: 25px;
    height: 25px;
}
.morecontrols button:hover {
	background-color: var(--grey-background);
	transition: 0.2s;
}
.controlstop {
    box-shadow: var(--container-shadow);
    border-radius: calc(1rem + 2px);
    border: 2px solid #fff;
    background-color: #fff;
    display: flex;
    flex-flow: column;
}

.propcontrols .controlhintvideo video {
    display: none;
}

.controls {
    position: absolute;
    z-index: 1;
    left: 0.5rem;
    top: calc(65px + 1rem);
    gap: 5px;
    display: flex;
    flex-flow: column;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.control {
    font-size: 0;
}

.control-toggle span {
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
}
.extracontrols .controlhintinner {
	width: 250px;
}

.control-toggle {
    padding: 0.5rem 1rem;
    display: flex;
    height: 44.5px;
    box-sizing: border-box;
    align-items: center;
    border-radius: 0.5rem;
    transition: 0.2s;
    width: calc(100% + 10px);
    position: relative;
    left: -5px;
}

.control-toggle:hover {
    background-color: var(--grey-background);
    transition: 0.2s;
}

.control-toggle label {
    margin-left: 5px;
}

.control-toggle input + label::before {
	margin-right: 13px;
}

.checkbox+label {
    position: relative;
    cursor: pointer;
    padding: 0
}

.checkbox+label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 0 2px #cecece;
    left: 2px;
}

.checkbox:focus+label:before {
    box-shadow: 0 0 0 2px #cecece
}

.checkbox:checked+label:before {
    background: #ff8686
}

.checkbox:disabled+label {
    color: #b8b8b8;
    cursor: auto
}

.checkbox:disabled+label:before {
    box-shadow: none;
    background: #ddd
}

.checkbox:checked+label:after {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    background: #fff;
    width: 3px;
    height: 3px;
    box-shadow: 2px 0 0 #fff,4px 0 0 #fff,4px -2px 0 #fff,4px -4px 0 #fff,4px -6px 0 #fff,4px -8px 0 #fff,4px -10px 0 #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.panel h3,
.menupopupside h3 {
    flex-grow: 1;
    font-size: 1rem;  
    margin: 0;
    font-weight: 500;
}

.panel summary img,
.panel .popupmenu img {
    margin: 0 10px 0 5px;
}

.panel summary, 
.menupopupside summary,
.panel .popupmenu {
    cursor: pointer;
    margin-bottom: 5px;
}

.opensettingsbtn {
    text-align: center;
    display: none;
    padding: 20px 0 1rem 0;
    font-size: 1rem;
}

.opensettingsbtn svg {
    margin: 0px auto;
    display: block;
}

h1.header-h1 {
    font-size: 2rem;
    display: block;
    margin: 0 0 2rem 0;
}

h1.header-h1:after {
    display: none;
}

.about {
    margin-top: 80px;
}

table tr td:nth-child(1) {
    width: 100px;
}

th {
    text-align: left;
}

input.sizerangenr,
input.heightrangenr {
    width: 30px;
    padding: 0;
    border: none !important;
    background: none !important;
    box-shadow: none;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0;
}

.unit {
    font-size: 0.8rem;
    color: var(--grey-text);
    margin-left: 2px;
}

.cont-2 .modelheight {
    width: 100%;
    flex-flow: column;
    align-items: unset;
}

.social {
    display: none;
}

.infopointer {
    text-align: center;
    font-size: 0.8rem;
    margin-top: -30px;
    cursor: pointer;
    position: relative;
    width: calc(100% - var(--panel-width));
}

.about img {
    max-width: 100%;
    margin: 40px auto 0px auto;
    display: block;
    width: 600px;
}

.about i {
    text-align: center;
    display: block;
    color: #878787;
}

.presetinfo {
    position: absolute;
    background-color: #fff;
    font-size: 0.8rem;
    padding: 10px 30px;
    z-index: 1;
    border-radius: 1rem;
    box-shadow: 0 2px 15px 0 rgb(43 43 43 / 10%);
    border: 1px solid var(--grey-background);
    left: 50%;
    height: 54px;
    box-sizing: border-box;
    transform: translate(-50%, -125%);
    width: calc(100% - 50px);
    display: none;
}

span.presetinfopointer,
span.iconbuttonpointer {
    width: 15px;
    height: 15px;
    transform: rotate(45deg) translate(-27px, -3px);
    background-color: #fff;
    position: absolute;
    border: 1px solid var(--grey-background);
    border-top: none;
    border-left: none;
    z-index: 1;
    display: none;
}

span.iconbuttonpointer {
    width: 10px;
    height: 10px;  
    transform: rotate(45deg) translate(-23px, 3px);
}

label.iconbuttonlabel {
    display: none;
}

.presetinfoicon:hover ~ .presetinfo, .presetinfoicon:hover ~ span.presetinfopointer {
    display: initial;
    animation: fadeIn 0.2s;
}

.setposebtn:active .presetinfo, .setposebtn:active span.presetinfopointer  {
    display: none;
}

img.presetinfoicon {
    width: 15px;
    height: 15px;
    margin-left: 5px;
    vertical-align: middle;
}

.controlshint {
    display: none;
    position: absolute;
    height: 0;
    width: 0;
    left: 80px;
    top: 65px;
    z-index: 1;
}

.controlshintinner {
    width: 220px;
    min-height: 50px;
    border-radius: 1rem;
    left: 0;
    top: 0;
    font-size: 0.8rem;
    background-color: #fff;
    border: 1px solid #ededed;
    padding: 10px 15px 10px 15px;
    position: absolute;
    box-shadow: 0 1px 2px rgb(0 0 0/5%),0 4px 18px rgb(0 0 0/5%);
    animation: float 6s ease-in-out infinite;  
}

.controlshintinner:after {
    content: "";
    width: 20px;
    height: 20px;
    transform: rotate(-45deg);
    background-color: #fff;
    position: absolute;
    left: -12px;
    top: 25px;
    border: 1px solid #dbdbdb;
    border-bottom: none;
    border-right: none;
}

#closecontrolshint {
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 5px;
    opacity: .5;
}

.controlhint {
    display: none;
    position: absolute;
}

.controlhintinner {
    width: 180px;
    box-sizing: border-box;
    border-radius: 1rem;
    left: 15px;
    top: 0px;
    font-size: 0.8rem;
    background-color: #fff;
    padding: 10px 15px 10px 15px;
    position: relative;
    box-shadow: var(--container-shadow);
}

.controlhintinner:after {
    content: "";
    width: 15px;
    height: 15px;
    transform: rotate(-45deg);
    background-color: #fff;
    position: absolute;
    left: -0.5rem;
    top: 17px;
}

.controlhintinner i {
    color: grey;
    margin-top: 10px;
    display: block;
}

.controlhintinner b {
    font-size: 1rem;
    margin: 3px 0 6px 0;
    display: block;
}

img.headerlogo {
    width: 100px;
    margin: 10px;
}

.homepage .header img.headerlogo {
    display: none;
}

.flexbtnwrap,
.proupgradeposebuttons {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    flex-direction: row;
    align-items: stretch;
    gap: 5px;
}

.flexbtnwrap button,
.proupgradeposebuttons button {
    border: none;
    padding: 10px 10px;
    display: flex;
    margin: 0;
    background-color: var(--grey-background);
    border-radius: 0.5rem;
    cursor: pointer;
    position: initial;
    flex-grow: 1;
    flex-shrink: 0;  
    max-width: calc(50% - 3px);
    font-weight: 500;
    justify-content: center;
}

.flexbtnwrap button .btntext {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.poselist details
.poselist .popupmenu {
    margin-top: 10px;
}

.posebtntext {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 20px);
}

.poseprompt.timechallenge {
    flex-wrap: wrap;
}

select,
.timechallenge select,
#ssres, 
#sstrans {
    padding: 5px 10px;
    border-radius: 0.5rem;
    width: 100%;
    font-size: 0.8rem;
    font-family: 'Albert Sans', sans-serif;
    border: var(--grey-border);
    background: none;
}

.timechallengeoptioncontainer {
    display: flex;
    gap: 0.5rem;
    flex-basis: 100%;
}

.timechallengeoptionwrap {
    flex-basis: 100%;
    display: inline-block;
}

.timechallengesetup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.timechallengetext {
    width: 100%;
}

.submitposebtn {
    margin: 1rem 0 0 0;
    background-color: var(--setpose-red);
    margin-left: auto;
    display: block;
    font-size: 1rem;
    padding: 0.5rem 2rem;
    line-height: 1.5;
}

.submitposebtn.recording,
.iconbutton.recording {
    background-color: #ff4d4d !important;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.timechallengeinner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.base-timer {
  position: relative;
  height: 70px;
  width: 70px;
}

.base-timer__circle {
  fill: none;
  stroke: none;
}
  
.base-timer__path-elapsed {
  stroke-width: 10px;
  stroke: var(--grey-background);
}

.base-timer__label {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18pt;
}

.base-timer__path-remaining {
  stroke-width: 10px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  stroke: #f98484;
}

.base-timer__svg {
  transform: scaleX(-1);
  filter: none !important;
}

.timechallenge .hidden {
    display: none;
}

.timechallengetext > * {
    margin: 10px 0px;
}

.timechallengeexpandbtn {
    margin: auto 10px auto 0;
}

.timechallengetext p {
    color: #868686;
}

.timechallengeextended li {
    list-style-type: none;
    line-height: 2;
    color: #868686;
}

.timechallengeextended li.currentpose {
    color: inherit;
    position: relative;
}

.timechallengeextended li.currentpose:before {    
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #f98484;
    position: absolute;
    top: 9px;
    left: -30px;
}

.timechallengeextended {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}

.timechallengeextended::-webkit-scrollbar,
.panel::-webkit-scrollbar {
  width: 20px;
}

.timechallengeextended::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track {
  background-color: transparent;
}

.timechallengeextended::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb {
  background-color: var(--grey-background);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

.timechallengeextended::-webkit-scrollbar-thumb:hover,
.panel::-webkit-scrollbar-thumb:hover {
  background-color: #b5b5b5;
}

.timechallenge .closebtn {
    padding: 3px 6px;
}

.timechallengesetup label {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

span.proupgradebuttons button {
    position: relative;
}

.proupgradebuttons a {
    display: inline;
}

.panel .proversiontag {
    position: relative;
}

span.proupgradebuttons button:after,
.proversiontag:after {
    content: 'Pro';
    border-radius: 100px;
    font-weight: 400;
    background-color: var(--setpose-red);
    color: #1b0000;
    padding: 0 6px;
    font-size: 0.7rem;
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 1;
    box-shadow: 0 2px 14px 0 rgb(0 0 0 / 15%);
}
.proversiontag.proplustag:after {
    content: 'Pro+';
}
.poseprompt.proupgradeprompt {
    flex-wrap: wrap;
    width: 530px;
    align-items: center;
    justify-content: space-between;
}

.poseprompt.proupgradeprompt h3 {
    width: 100%;
    margin: 10px 0px 0px 0px;
}

.poseprompt.proupgradeprompt .upgradebtn {
    background-color: var(--setpose-red);
    margin: 0;
}

.panel details details summary, .panel p, .menupopupside p {
    color: var(--grey-text);
}

.panelheader {
    font-size: 1rem;
}

.controllerpanel {
    width: 100%;
    height: 120px;
    margin: 0.5rem 0 1rem 0;
    background-color: var(--grey-background);
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background: url('../imgs/controlbg.svg');
    background-size: cover;
    background-position: center;
}

.controllerhandle {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    transform: translate(-15px, -15px);
    background-color: #ff8686;
    position: relative;
    box-shadow: 0px 3px 20px #d1d1d1;
}

.cont-2 {
    display: flex;
    flex-flow: row wrap;
}

.cont-2 > * {
    width: calc(50% - 0.5rem);
    flex-wrap: wrap;
    align-items: center;
    display: flex;
}

.panel .cont-2,
.menupopupside .cont-2 {
    margin-bottom: 1rem;
    gap: 1rem;
}

#cameratypeselect, #cameraposselect, #resrange {
    margin: 0;
}

#campos-trigger {
    background: #fff;
    border-radius: 0.5rem;
    border: var(--grey-border);
    padding: 10px 1rem;
    width: 100%;
    text-align: left;
    background-image: url(https://setpose.b-cdn.net/imgs/chevron-down2.svg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 25px;
}

button#campos-trigger.active {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.campospicker {
    display: none;
    position: absolute;
    background-color: #fff;
    display: flex;
    flex-flow: column;
    z-index: 1;
    padding: 0.5rem;
    top: calc(100% - 2px);
    left: 0;
    border-radius: 0 1rem 1rem 1rem;
    border: var(--grey-border);
}

.campospicker > div {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

.campospicker img {
    width: 55px;
    padding: 0.5rem;
}

.camposbacktop {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

button#campostopright {
    position: absolute;
    top: 0;
    right: 0;
    justify-content: end;
}

button#camposreset {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    background: none;
    background-image: url(../imgs/reset-icon.svg);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.campospicker button {
    width: 60px;
    padding: 3px 0;
    display: flex;
    background-color: transparent;
    justify-content: center;
    align-items: center;
    text-align: left;
    transition: 0.2s;
}

.campospicker button:hover {
    background-color: var(--grey-background);
}

.campospicker button img {
    width: 10px;
    padding: 0;
}

#camposfront, #camposback, #campostopright {
    flex-flow: column;
}

#camposleft, #camposright {
    height: 40px;
    gap: 7px;
}

#camposfront {
    height: 50px;
}

input[type=color] {
    width: 30px;
    height: 20px;
    outline: none;
    padding: 0;
    border: var(--grey-border);
    margin-right: 0.5rem;
}

.scrolldisabled {
    height: 100dvh;
    overflow: hidden;
}

.iconbuttonimg {
    max-width: 25px;
    max-height: 25px;
    width: 80%;
    height: 80%;
}

.iconbuttontext {  
    position: absolute;
    background-color: #fff;
    font-size: 0.8rem;
    padding: 5px 15px;
    z-index: 1;
    border-radius: 0.5rem;
    box-shadow: 0 2px 15px 0 rgb(43 43 43 / 10%);
    border: 1px solid var(--grey-background);
    left: 50%;
    line-height: normal;
    box-sizing: border-box;  
    transform: translate(-50%, -130%);
    white-space: nowrap;
    display: none;
}

.iconbutton {
    padding: 0;
    flex-grow: 1;
    margin: 0;
    position: relative;
    aspect-ratio: 1;
    max-height: 50px;
}

.iconbuttonwrap {
    flex-grow: 1;
    display: flex;
    flex-flow: column;
    text-align: center;
    color: var(--grey-text);
    gap: 5px;
}

.iconbutton:hover span.iconbuttontext, .iconbutton:hover span.iconbuttonpointer {
    display: initial;
    animation: fadeIn 0.2s;
}

.iconbuttoncontainer {
    display: flex;  
    gap: 0.5rem;
    margin: 0.5rem 0;
}

#scenelist > div {
    border-radius: 0.5rem;
    border: var(--grey-border);
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
}

#scenelist {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#scenelist button {
    background: none;
    padding: 0;
    margin: 0 0 0 4px;
    vertical-align: middle;
    display: none;
}

#scenelist button.visiblebutton {
    display: inline;
}

#scenelist .sceneobjectname {
    padding: 6.5px 0;  
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scenemodeltop {
    display: flex;
    width: 100%;
}

#scenelist > div:hover .sceneobjectname {  
    width: calc(100% - 116px);  
}

#scenelist > div.selected {
    border: 2px solid #ff8686;
}

#scenelist > div:hover button {
    display: inline;
}

.sceneobjectname select {
    border: none;
    margin: 0;
    padding: 0;
}

.modelswitchlabel {
    margin: 1rem 0 0.5rem 0;
    display: block;
    color: #777;
} 

.modelproppicker {
    display: flex;
    flex-basis: 100%;
    flex-grow: 1;
    width: 100%;
    gap: 1rem;
    flex-flow: wrap;
}

.modelproppickerl, .modelproppickerr {
    width: calc(50% - 0.5rem);
}

.modelproppicker select {
    width: 100%;
    margin: 0;
}

.modelproppicker p {
    margin: 0.5rem 0;
}

.modelproppicker.hidden {
    display: none;
}

.propposcontainer, .propposcontainer input {
    color: var(--grey-text);  
    width: 100%;
}

.subtexthint {
    background-color: var(--grey-background);
    margin: 0.5rem 0 0 0;
    padding: 1rem;
    border-radius: 0.5rem;
    position: relative;
}

.subtexthint a {
    text-decoration: underline;
}

.mobileheaderlogo {
    position: absolute;
    bottom: 1rem;
    width: 100px;
    left: 0.5rem;
    opacity: 0.8;
}

.tilemenuinner {
    border-radius: 0 0 0.5rem 0.5rem;
    border: 2px solid var(--grey-background);
    border-width: 0 2px 2px 2px;
    font-size: 0.8rem;
    padding: 0.5rem;
    width: 100%;
    font-weight: bold;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
    margin-top: 0.5rem;
}
.menupopupside .tilemenuinfo::after {
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background-color: var(--grey-background);
    position: absolute;
    right: 49px;
    top: -5px;
    border: 2px solid var(--grey-background);
    border-bottom: none;
    border-right: none;
    border-radius: 3px 0 0 0;
}
.tilemenuinfo {
    font-weight: 500;
    background-color: var(--grey-background);
    padding: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    position: relative;
    top: 0.5rem;
    margin: 0 0 0 0;
    box-sizing: border-box;
}
button.tilemenuitem {
    width:  calc(100% / 4 - 6px);
    border-radius: 0.5rem;  
    padding: 0.5rem 0.5rem 0 0.5rem;
    box-sizing: border-box;
    transition: 0.2s;
    cursor: pointer;
    margin: 0;
    background: none;
    position: relative;
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.tilemenuitem img {
    pointer-events: none;
}
#floorpropcontainer button.tilemenuitem {
    width:  calc(100% / 4);
}
#floorpropcontainer .tilemenuitem img {
  max-width: 75%;
}
#floorpropcontainer {
    margin-top: 1rem;
}
.tilemenuitem.protileitem {
    filter: grayscale(1);
}
.tilemenuitem.protileitem::after {
    content: "Pro";
    background-image: url(../imgs/lock.svg);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center 25px;
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    box-sizing: border-box;
}
.tilemenuitem img {
    max-width: 100%;
}
.tilemenuitemtext {
    color: grey;
    text-align: center;
    font-weight: 500;
    transition: 0.2s;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem 0px;
    width: 100%;
}

.tilemenuitem.proplusimport {
    width: calc(100% - 2rem);
    border: 2px dotted var(--grey-background);
    margin: 5px 1rem 0 1rem;
}
.tilemenuitem.proplusimport .addpropimg {
    aspect-ratio: auto;
}

.modeldragimg {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;  
    transform: translate(-50%, -95%);
    width: 100px;
    height: 200px;
    z-index: 9;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.modeldragimg.exploded {
    animation: modeldragexplode 0.4s forwards;
    transition-timing-function: ease-in;
}
.flexbtnwrap button[disabled],
.iconbuttoncontainer button[disabled],
.setposebtn.savedposes[disabled] > .posebtntitle{
    opacity: 0.6;
    color: #7b7b7b;
}
.flexbtnwrap button[disabled]:active,
.iconbuttoncontainer button[disabled]:active {
    transform: none;
}
.iconbuttoncontainer .iconbutton[disabled] span.iconbuttontext, .iconbuttoncontainer .iconbutton[disabled] span.iconbuttonpointer {
    display: none;
    animation: none;
}

.mobileproupgrade {  
    flex-wrap: wrap;
    padding: 0;
    width: 450px;
    max-height: calc(100dvh - 67px - 1rem);
    overflow-y: auto;
}
.mobileproupgrade:not(.hidden) {
    animation-name: fadeup;
    animation-iteration-count: 1;
    animation-duration: 1s;
}
.mobileproupgrade .fctrialbtn {
    font-size: 1rem;
    padding: 1rem;
}
.mobileproupgrade .headerlogo {
    display: initial;
    width: 120px;
}
.mobileproupgrade .upgrademenubanner {
    width: 100%;
}
.posesearch {
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
    font-size: .8rem;
    margin: 0;
}

.proupgradeposebuttons {
    margin-top: 5px;
    mask-image: linear-gradient(to top, transparent 0%, black 110%);
}
.proupgradeposebuttonswrap {
    position: relative;
}
.proupgradeposebuttons .btntext {
    filter: blur(3px);
}
.posebuttonsoverlay {
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 100%;
    bottom: 20px;
}
.posebuttonsoverlay a {
    text-decoration: underline;
}
.controlhintvideo {
    display: flex;
    width: calc(180px + 100px);
}
.controlhintvideo video {
    width: 100px;
    height: 100px;
}
.mobilepanelbottom {
    display: none;
}
.mobileapprate.poseprompt {
    flex-flow: column;
    text-align: center;
}

.apprate2 form {
    display: flex;
    gap: 10px;
    flex-flow: column;
}
.apprate2 button {
    display: flex;
    gap: 10px;
    margin: 0;
    justify-content: center;
}
.apprate3 a {
    text-decoration: underline;
}
.appratestars button {
    line-height: 1;
    margin: 0.5rem;
}

.mobilemenubtn {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow:  var(--container-shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0 0;
    font-size: 1rem;
    padding: 1rem;  
    height: 1lh;
    cursor: pointer;
    width: fit-content;
    box-sizing: initial;
}
.mobilemenuinner {
    box-sizing: border-box;
    border-radius: 1rem;  
    top: 4rem;
    font-size: 1rem;
    background-color: #fff;
    padding: 1rem;
    position: absolute;
    box-shadow:  var(--container-shadow);  
    display: flex;
    flex-flow: column;
    width: 400px;  
    z-index: 2;
}
.mobilemenuinner > * {
    padding: 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}
.mobilemenuinner > *:hover {
    background-color: var(--grey-background);
    transition: background-color 0.2s;
}
.mobilemenuinner::after {
    content: "";
    width: 15px;
    height: 15px;
    transform: rotate(-45deg);
    background-color: #fff;
    position: absolute;
    left: 2rem;
    top: -0.5rem;
}
.mobilemenu {
    position: relative;
}
.opensettingsbtn::before {
    content: "";
    background-color: var(--grey-background);
    width: 40px;
    height: 5px;
    border-radius: 100px;
    position: absolute;
    left: calc(50% - 20px);
    top: 6px;
}
.inlinenotice::before {
    content: "";
    height: 25px;
    min-width: 25px;
    display: inline-block;
    background-image: url(../imgs/info-icon-grey.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center left;
}

.inlinenotice {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: var(--grey-text);
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 0.5rem;
    border: var(--grey-border);
}

.share-url {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.share-url input {
    flex: 1 0;
}
.sharemodal-content button {
    margin: 0;
}
.social-share button {
    padding: 10px 0;
}
.sharemodal-content {
    width: 100%;
}
.social-share button img {
    height: 25px;  
    vertical-align: middle;
}
.widebtnwrap {
    display: flex;
    flex-flow: column;
}
.setposebtn.savedposes,
.setposebtn.savedscenes {
    text-align: left;
    padding: 0.5rem 0;
    font-size: 1rem;
    background: no-repeat;
    display: flex;
    justify-content: space-between;
}
.posebtnsubtext {
    display: block;
    color: var(--grey-text);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
.posebtntitle {
    flex-grow: 1;  
    max-width: calc(100% - 45px);
}
.posebtntitle .posebtntext {
    max-width: 100%;
}
.page .headerlogolink {
    position: fixed;
    bottom: 0;
    z-index: 1;
}
.currentjointcontainer p {
    margin-top: 0;
}
.currentjointtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.jointsettings {
    display: flex;
}
.jointsettings > div {
    flex: 1;
}  
.expandbutton {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: none;
    transform: rotate(-90deg);
}
.expandbutton.expanded {
    transform: rotate(0deg);
}
.expandbutton .iconbuttonimg {
    width: 25px;
}
.heightsettings {
	display: flex;
}
.heightsettingsinner {
    flex: 1;
}
.heightsettings .flexrow {
	flex: 1;
}
.height-presets {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
    position: relative;
    margin-top: 0.5rem;
}
.height-presets-info {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: none;
}
.modelsettingslist .iconbuttontext {
  transform: translate(-90%, -130%);
}
.height-presets .flexrow {
	margin-top: 3px;
	gap: 2px;
	border-radius: 0.5rem;
    align-items: stretch;
	overflow: hidden;
}
.height-presets .flexrow button {
    flex: 1;
	border-radius: 0;
}
.jointshapewidth {
    margin-top: 0.5rem;
}
.inputresetbtn {
    background: none;
    background-image: url('../imgs/reset-icon.svg');
    min-width: 20px;
    height: 20px;
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin-left: auto;
}
.flexrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;  
}
.inputresetbtn.lightposreset {
    position: relative;
    top: 30px;
    right: 2px;
    z-index: 1;
}

.feedbackpage {
    overflow-x: initial;
}

.editortutorial.poseprompt,
.export3dprompt.poseprompt,
.screenshotprompt.poseprompt,
.realisticimageprompt.poseprompt {
    flex-flow: column;
}
.editortutorial.poseprompt img {
    width: 25px;
    vertical-align: middle;
    margin-right: 1rem;
}
.editortutorial.poseprompt p {
    margin: 0;
}
.editortutorial.poseprompt strong {
    color: #2b2b2b;
}
.editortutorial.poseprompt video {
    max-height: 300px;
    width: 100%;
    height: 100%;
}
.tutorialvideowrap {
    background-color: #f4f4f4;
    overflow: hidden;
    border-radius: 1rem;
    margin: 1rem 0;
    width: 100%;
    height: 100%;
}
.editortutorial.poseprompt a {
    display: inline;
    text-decoration: underline;
}
.mobileapprate {
    font-size: 1rem;
}
.apprate3 a {
    background-color: #ff8686;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
}

.posepromptoption {
    flex-flow: column;
    display: flex;
    flex: 1 1;
}
.posepromptoptions {
    display: flex;
    gap: 0.5rem;
}
#ssres {
    margin: 0;
}
#ssname {
    font-size: 0.8rem;
}
.customresinputs {
    display: flex;
    border-radius: 0.5rem;
    border: var(--grey-border);
    padding: 5px 10px;
    margin-top: 0.5rem;
}
.customresinputs input {
    outline: none;
    border: none;
    font-size: 0.8rem;
}
#flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.apprate3 {
    background-image: url(https://setpose.b-cdn.net/imgs/model-pointing.png), url(https://setpose.b-cdn.net/imgs/model-pointing-2.png);
    background-size: 207px, 249px;
    background-repeat: no-repeat, no-repeat;
    background-position: -46px calc(100% + 68px), calc(100% + 77px) calc(100% + 110px);
    width: 100%;
    position: relative;
    left: -1rem;
    padding: 0 1rem 2rem 1rem;
    top: 1rem;
}
.subtexthint.moremodelupgrade {
    background-image: url(https://setpose.b-cdn.net/imgs/allmodels.png);
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) bottom;
}
.subtexthint.moremodelupgrade span {
    width: calc(100% - 140px);
    display: block;
}
.propluscheck {
    background-color: #f7f7f7;
    display: flex;
    border-radius: 1rem;
    margin: 0 0 1rem 0;
}
.propluscheck input {
    display: none;
}
.propluscheck label {
    width: 50%;
    text-align: center;
    padding: 15px 5px;
    border-radius: 1rem;
    border: 2px solid #f7f7f7;
}
.propluscheck input[type="radio"]:checked + label {
    background-color: #fff;
    border: 2px solid #f0f0f0;
}
.propluscheck p {
    margin: 3px 0 0 0;
}

.pref-item {
    padding: 1rem 0;
}

.pref-item p {
    color: var(--grey-text);
    font-size: 0.8rem;
}
.tutorialcontinue {
    background-color: #fc8686;
    margin-top: 1rem;
    font-size: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}
.guide-meta {
    color: #757575;
    font-style: italic;
}
.skintones {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.skintones input {
    border: 0;
    border-radius: 0;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.skintones input:hover {
    border: unset;
}
.skintones input[type="radio"]:checked {
    border: 2px solid var(--setpose-red);
    transition: 0s;
    outline: 0;
}

#resultContainer {
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1rem;
    position: relative;
}
#resultContainer.loading img {
    filter: blur(3px);
}
#resultContainer.loading:after {
    content: "Generating...";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #00000030;
    color: #fff;
    text-align: center;
    padding: 50% 0;
    font-size: 1rem;
}
.realisticimageprompt p {
    color: var(--grey-text);
    margin-top: 0;
}
.skintones input:first-child {
    border-radius: 0.5rem 0 0 0.5rem;
}
.skintones input:last-child {
    border-radius: 0 0.5rem 0.5rem 0;
}
.realisticimageprompt select:has(> option[value="0"]:checked) {
    background-image: url(https://setpose.b-cdn.net/imgs/random-icon.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    padding-left: 22px;
    background-position: 3px center;
}
.addposepromptform {
    width: 100%;
}

.realizeimgsbtns button img {
    max-width: 25px;
}
.realizeimgsbtns button {
    padding: 0;
    background: none;
}
.realizeimgsbtns {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    position: absolute;
    z-index: 1;
    width: calc(100% - 2rem);
}
.realismbottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}
#generateBtn {
    margin: 0;
}
.realismcount {
    color: var(--grey-text);
}
.realismcount .presetinfoicon {
  margin-top: -2px;
  opacity: 0.5;
}

.newmenuitem::after {
    content: "New!";
    background: var(--setpose-red);
    border-radius: 100px;
    font-size: 0.8rem;
    color: #1b0000;
    padding: 1px 5px;
    margin-left: 0.5rem;
}
.panel .menutitlebutton img {
    margin: 0;
    width: 20px;
    height: 20px;
}
.menutitlebutton {
    padding: 0 0.5rem;
    height: 20px;
    background: none;
    display: none;
}
details:hover .menutitlebutton,
.popupmenu:hover .menutitlebutton {
  display: initial;
}
.menuprimarybutton {
    padding: 1rem 2rem;
    width: 100%;
    margin: 1rem 0;
    font-size: 1rem;
    background-color: var(--setpose-red);
}
.canvasloader {
    width: 200px;
    height: 200px;
    position: absolute;
    left: calc(50% - var(--panel-width) / 2);
    transform: translate(-50%, -50%);
    top: 50%;
    opacity: 0.3;
    z-index: -1;
}

.popupsidetop, .menupopupside {
    display: none;
}

.menupopupside {
    position: absolute;
    top: 1rem;
    right: calc(var(--panel-width) + 0.5rem);
    max-height: calc(100dvh - 2rem);
    background-color: #fff;
    width: var(--menu-width);
    padding: 0 0 1rem 0;
    box-sizing: border-box;
    border-radius: 1rem;
    box-shadow: var(--container-shadow);
    flex-flow: column;
    z-index: 3;
}
.panelscroll > details summary,
.panelscroll > .popupmenu {
    padding: 10px 0;
    margin: 0;
    border-radius: 0.5rem;
    transition: 0.2s;
    width: 100%;
    text-align: left;
    background: none;
}
.popupsidetop {
    display: flex;
    align-items: center;
    padding: 1rem;
    width: 100%;
    gap: 10px;
    box-sizing: border-box;
}
.posesearchcontainer {
    position: relative;
    padding: 0 1rem 0.5rem 1rem;
}
.searchclear {
    position: absolute;
    right: calc(2px + 1rem);
    top: calc(50% - 0.25rem);
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
}
.poselist .searchclear {
    right: 2px;
}
.searchclear img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}
.darkmode .searchclear img {
    filter: invert(1);
}
.poselist .posesearchcontainer {
    padding: 0 0 0.5rem 0;
}
.posesearchcontainer input {
    margin: 0;
}
.menupopupside .closebtn {
    position: unset;
}
.popupsidebottom {
    padding: 0.5rem 1rem 1rem 1rem;
}
.popupsidebottom button {
    margin: 0;
}
.myposelist.menupopupside, .myscenelist.menupopupside {
    padding-bottom: 0;
}
.selectmodelsettings {
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.posepresetscontainer {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.menuscroll {
    overflow: hidden auto;
    scrollbar-color: var(--grey-background) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 0 1rem;
    position: relative;
}

.menuscroll::-webkit-scrollbar {
    width: 6px;
}
.menuscroll::-webkit-scrollbar-track {
    background: transparent;
}
.menuscroll::-webkit-scrollbar-thumb {
    background-color: var(--grey-background);
    border-radius: 20px;
}

.setposebtn.tilemenuitem {
    width: calc(100% / 3 - 4px);
    flex-flow: column;
    flex-grow: 0;
    justify-content: space-between;
}

.setposebtn.tilemenuitem img {
    max-width: 80%;
    align-self: center;
}

.setposebtn.tilemenuitem .presetinfoicon {
    position: absolute;
    top: 5px;
    right: 5px;
}

.posepresetscontainer summary {
    position: sticky;
    background-color: #fff;
    top: -1px;
    z-index: 1;
    color: var(--black-text);
    font-size: 1rem;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    list-style: none;
}

.posepresetscontainer summary img.summaryarrow {
    width: 8px;
    height: 8px;
    margin: 0 8px 0 0;
    transition: transform 0.2s;
    pointer-events: none;
}

.posepresetscontainer details[open] summary img.summaryarrow {
	display: none;
    transform: rotate(90deg);
}

.posepresetscontainer summary::-webkit-details-marker,
.posepresetscontainer summary::marker {
    display:none;
}

.posesupgrade {
    width: 100%;
    padding: 1rem 15px 1rem 15px;
    text-align: center;
    font-size: 1rem;
    position: absolute;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
    border-radius: 0 0 1rem 1rem;
    box-sizing: border-box;
}
.posesupgrade .btn-primary {
    font-size: 1rem;
    padding: 1rem 2rem;
    background-color: #ff8686;
    margin: 0.5rem 0 0 0;
}
.popupmenu.popupmenupro h3 {
	flex-grow: 0;
	width: fit-content;
	position: relative;
}
.popupmenu.popupmenupro h3:after,
#drawdisabled b:after {
	content: 'Pro';
	border-radius: 100px;
	font-weight: 400;
	background-color: var(--setpose-red);
	color: #1b0000;
	padding: 0 8px;
	font-size: 0.7rem;
	position: absolute;
	top: 3px;
	right: calc(-28px - 1rem);
}
.addpropimg {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.protileitem.proplustile::after {
    content: "Pro+";
}
#angle-display {
    position: absolute;
    bottom: 1rem;
    right: calc(var(--panel-width) + 0.5rem);
    background-color: #fff;
    color: var(--black-text);
    padding: 1rem;
    border-radius: 1rem;
}
.orbitcontrols {
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
    gap: 1rem;
}
.orbitcontrols button {
	background: none;
    line-height: 0;
    padding: 0.5rem 0;
}
.orbitspeedwrap {
	flex-grow: 1;
    position: relative;
}
.orbitspeedwrap::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 19px;
    border-radius: 2px;
    left: calc(50% - 1px);
    background-color: var(--grey-background);
    top: 3px;
    z-index: 0;
}
.menu-color {
	flex-wrap: nowrap;
    cursor: pointer;
}
.menu-color input[type="color"] {
    pointer-events: none;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0 0 0 auto;
    width: 30px;
    height: 22px;
    border-radius: 0.5rem;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

.menu-color input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
.menu-color input[type="color"]::-webkit-color-swatch {
	border: var(--grey-border);
	border-radius: 0.5rem;
}
.menu-color label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-checkbox {
    justify-content: space-between;
}

.menu-checkbox .toggletext {
    margin: 0;
}
.menu-selector {
    position: relative;
}

.menu-selector label {
    margin-bottom: 5px;
}
.colorpickerprompt {
    flex-direction: column;
}

.menu-tabs {
    display: flex;
    margin-bottom: 0.5rem;
    border: var(--grey-border);
    border-radius: 0.5rem;
    background-color: #e5e5e5;
}

.poselist .menu-tabs {
    margin: 0 1rem 0.5rem 1rem;
}

button.menu-tab.proversiontag:after {
    position: relative;
    top: unset;
    box-shadow: none;
}

h3#colorpicker-title {
    margin-top: 0;
}

.menu-tab {
    flex: 1;
    background: none;
    padding: 0.5rem;
    border-radius: calc(0.5rem - 2px);
    cursor: pointer;
    font-size: 0.8rem;
    position: relative;
    transition: 0.2s;
    color: var(--grey-text);
    font-weight: 500;
}

.menu-tab.active {
    color: var(--black-text);
    background-color: #fff;
}

.colorpicker-panel {
    display: none;
}

.colorpicker-panel.active {
    display: block;
    background-color: #fff;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 3px;
}

.color-square {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    cursor: pointer;
    border: var(--grey-border);
    border-width: 0;
    transition: 0.1s;
}

.color-square:hover {
    transform: scale(1.2);
    border-width: 2px;
}

.color-square.active {
    border: 2px solid var(--setpose-red);
}

.hex-input-grid-wrap {
    grid-column: span 3;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 0.5rem;
    padding: 0 5px;
    border: var(--grey-border);
}

.hex-input-grid-wrap span {
    font-size: 0.8rem;
    color: var(--grey-text);
    margin-right: 2px;
}

#hex-input {
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500;
    text-transform: uppercase;
}

.system-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e5e5 !important;
}

.system-picker-btn img {
    width: 14px;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.material-square {
    height: 90px;
    border-radius: 10px;
    cursor: pointer;
    border: var(--grey-border);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    position: relative;
    transition: 0.2s;
}

.material-square.upload-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--grey-border);
    border-style: dashed;
    cursor: pointer;
    box-sizing: border-box;
    height: 100%;
    overflow: unset;
}

.material-square.upload-btn.proplustag:after {
    top: 3px;
    right: 3px;
    box-shadow: none;
}

.material-square.upload-btn img {
    margin-bottom: 4px;
    width: 25px;
    padding: 0;
}

.material-square.upload-btn span {
    color: var(--grey-text);
}

.material-square.active {
    border: 2px solid var(--setpose-red);
}

.material-square span {
    width: 100%;
    background: #fff;
    font-size: 0.8rem;
    padding: 0.5rem 0;
    text-align: center;
}

.colorpicker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    gap: 0.5rem;
}

.colorpicker-footer .iconbutton {
    font-size: 0.8rem;
    padding: 10px;
    margin: 0;
    flex: 1;
}

.hex-input-wrap {
    display: flex;
    align-items: center;
    background: var(--grey-background);
    border-radius: 8px;
    padding: 0 10px;
}

.deleteaccountform .btn-primary {
	background-color: #ff6969;
}
.deleteaccountform {
	display: flex;
	flex-flow: column;
	max-width: 400px;
}
.deleteaccountform #confirm_pass {
	margin: 0.5rem 0 0 0;
}
.deleteaccountnotice {
    padding: 1rem;
    border: 2px solid #ff696940;
    border-radius: 1rem;
    text-align: center;
    background-color: #ff696933;
    color: #b24545;
}

@keyframes animate-svg-stroke-1 {0%, 100% {stroke-dashoffset: 560.5401000976562px;stroke-dasharray: 560.5401000976562px;}33.33%, 66.67% {stroke-dashoffset: 1121.0802001953125px;stroke-dasharray: 560.5401000976562px;}}
.canvasloader .svg-elem-1 {animation: animate-svg-stroke-1 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite both;}
@keyframes animate-svg-stroke-2 {0%, 100% {stroke-dashoffset: 560.5407104492188px;stroke-dasharray: 560.5407104492188px;}33.33%, 66.67% {stroke-dashoffset: 1121.0814208984375px;stroke-dasharray: 560.5407104492188px;}}
.canvasloader .svg-elem-2 {animation: animate-svg-stroke-2 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.12s infinite both;}
@keyframes animate-svg-stroke-3 {0%, 100% {stroke-dashoffset: 887.2899780273438px;stroke-dasharray: 887.2899780273438px;}33.33%, 66.67% {stroke-dashoffset: 1774.5799560546875px;stroke-dasharray: 887.2899780273438px;}}
.canvasloader .svg-elem-3 {animation: animate-svg-stroke-3 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.24s infinite both;}
@keyframes animate-svg-stroke-4 {0%, 100% {stroke-dashoffset: 924.3624267578125px;stroke-dasharray: 924.3624267578125px;}33.33%, 66.67% {stroke-dashoffset: 1848.724853515625px;stroke-dasharray: 924.3624267578125px;}}
.canvasloader .svg-elem-4 {animation: animate-svg-stroke-4 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.36s infinite both;}
@keyframes animate-svg-stroke-5 {0%, 100% {stroke-dashoffset: 463.8318786621094px;stroke-dasharray: 463.8318786621094px;}33.33%, 66.67% {stroke-dashoffset: 927.6637573242188px;stroke-dasharray: 463.8318786621094px;}}
.canvasloader .svg-elem-5 {animation: animate-svg-stroke-5 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.48s infinite both;}
@keyframes animate-svg-stroke-6 {0%, 100% {stroke-dashoffset: 495.6649475097656px;stroke-dasharray: 495.6649475097656px;}33.33%, 66.67% {stroke-dashoffset: 991.3298950195312px;stroke-dasharray: 495.6649475097656px;}}
.canvasloader .svg-elem-6 {animation: animate-svg-stroke-6 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.6s infinite both;}
@keyframes animate-svg-stroke-7 {0%, 100% {stroke-dashoffset: 459.5675964355469px;stroke-dasharray: 459.5675964355469px;}33.33%, 66.67% {stroke-dashoffset: 919.1351928710938px;stroke-dasharray: 459.5675964355469px;}}
.canvasloader .svg-elem-7 {animation: animate-svg-stroke-7 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.72s infinite both;}

.dragdrophint svg .svg-elem-1{stroke-dashoffset:101.617431640625px;stroke-dasharray:101.617431640625px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.4s cubic-bezier(0.47,0,0.745,0.715) 1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0s,fill 0.4s cubic-bezier(0.47,0,0.745,0.715) 1s}.dragdrophint.active svg .svg-elem-1{stroke-dashoffset:203.23486328125px;fill:rgb(43,43,43)}.dragdrophint svg .svg-elem-2{stroke-dashoffset:464.75323486328125px;stroke-dasharray:464.75323486328125px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.4s cubic-bezier(0.47,0,0.745,0.715) 1.1s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s,fill 0.4s cubic-bezier(0.47,0,0.745,0.715) 1.1s}.dragdrophint.active svg .svg-elem-2{stroke-dashoffset:929.5064697265625px}.dragdrophint svg .svg-elem-3{stroke-dashoffset:1602px;stroke-dasharray:1602px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.4s cubic-bezier(0.47,0,0.745,0.715) 1.2s;transition:stroke-dashoffset 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s,fill 0.4s cubic-bezier(0.47,0,0.745,0.715) 1.2s}.dragdrophint.active svg .svg-elem-3{stroke-dashoffset:3204px;fill:rgb(255,255,255)}

.dragdrophint {
    position: absolute;
    width: 140px;
    top: 120px;
    left: -80px;
    opacity: 0;
    pointer-events: none;
}

.dragdrophint.active {
    animation: dragDropFadeInOut 4s forwards;
}

.dragdrophint:after {
    content: "Drag-and-drop onto the floor";
    text-align: center;
    position: absolute;; 
    pointer-events: none; 
    width: 80%;
    left: 10px;
    top: 90px;
    opacity: 0;
}

.dragdrophint.active:after {
    animation: fadeIn 0.5s 0.8s forwards;
}

button#collapseall {
    margin-left: auto;
    background-image: url(https://setpose.b-cdn.net/imgs/collapse.svg);
    background-color: transparent;
    background-position: center;
    background-size: 13px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    padding: 0;
    z-index: 2;
    overflow: hidden;
    padding-left: 20px;
}

button#collapseall:hover {
    width: auto;
    background-position: center left;
}

.menu-checkbox > label:not(.switch) {
    flex-grow: 1;
}

.scenemodeltop button img {
    vertical-align: middle;
}
button.setposebtn.tilemenuitem.randomposebtn img {
    width: 60%;
    margin: auto 0;
}
.menu-seperator {
    height: 2px;
    min-height: 2px;
    background-color: #e5e5e5;
    border-radius: 4px;
}

.guide-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 1rem;
    width: 1100px;
    max-width: 100vw;
    transform: translate(-50%);
    left: 50%;
    position: relative;
}

.guide-grid > div {
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--grey-background) 80%, var(--grey-background) 100%);
    padding: 1rem 1rem;
}

.guide-grid h2 {
    margin: 0;
    font-size: 1.2rem;
}

.guide-grid img {
    border-radius: 0.5rem;
}

@keyframes dragDropFadeInOut {
    0% { opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0}
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes modeldragexplode {
    0% {
        opacity: 1;
        width: 100px;
        height: 200px;
    }
    100% {
        opacity: 0;
        width: 200px;
        height: 400px;
    }
}
@media only screen and (max-width: 1100px) {
    :root {
        --panel-width: 400px;
    }    
}

@media only screen and (max-width: 820px) {
    html.homeeditor {
        overscroll-behavior: none;
    }
    .hidepanelbtn,
    .panelheader,
    .addposebtncontainer,
    img.headerlogo,
    .menupopupbottomag {
        display: none;
    }
    .page .headerlogo {
        display: initial;
    }
    .presetinfo, .presetinfopointer {
        display: none !important;
    }
    .panel {
        bottom: 0;
        width: 100vw;
        padding: 0;
        height: 60px;
        position: fixed;
        overflow-y: hidden;
        border-radius: 2rem 2rem 0 0;
        box-shadow: var(--container-shadow);
        border: 1px solid #efefef;    
        z-index: 2;
        transition: 0.3s;
    }
    .panel .panelscroll {
        padding: 7px 10px 60px 10px;
        box-sizing: border-box;
        overflow-y: scroll;
    }
    .darkmode .panel {
        border: none;
    }
    .panel.expanded {
        bottom: 0;
        height: calc(73vh + 27px);
        max-height: initial;
        overflow-y: hidden;
        transition: 0.3s;
    }
    .panel.expanded .panelscroll {
        overflow-y: scroll;
        height: 100%;
        padding-bottom: 100px;
    }
    .controls {
        top: calc(71px + 0.5rem);
    }
    label.movebtn {
        width: 45px;
        height: 45px;
    }
    .opensettingsbtn {
        display: block;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .header {
        z-index: 3;
    }
    h1.header-h1 {
        font-size: 16pt;
    }
    .about p {
        font-size: 1rem;
    }
    .aboutsection {
        padding: 30px 20px;
    }
    .poseprompt {
        bottom: 0;
        left: 0;
        transform: none;
        padding: 1.5rem 1rem calc(60px + 1rem) 1rem;
        width: 100%;
        max-width: unset;
        z-index: 1;
        border-radius: 2rem 2rem 0 0;
        position: fixed;
        border: 1px solid #efefef;
    }
    .colorpickerprompt.poseprompt {
        z-index: 3;
        padding-top: 1.5rem
    }
    .notification {
        max-width: calc(100vw - 2rem);
        font-size: 0.8rem;
    }
    .signinbutton .userdropdown ul.expanded {
        display: block;
    }
    body.homepage.androidapp .canvascontainer {
        border-bottom: none;
    }
    #scenelist > div .sceneobjectname {  
        width: calc(100% - 116px);  
    }
    #scenelist > div button {
        display: inline;
    }
    .canvascontainer {
        height: 100dvh;    
        max-width: 100%;
    }
    .desktoptext {
        display: none;
    }
    .mobiletext {
        display: initial !important;
    }
    .syncdetailscontainer {
        right: 20px;
    }
    .infopointer,
    .about {
        margin-top: 1rem;
        width: 100%;
    }
    .panelbottom {
        display: none;
    }
    .mobilepanelbottom {
        display: initial;
    }
    .mobileheaderlogo {
        bottom: 64px;
        width: 70px;
    }
    .mobilemenuinner {
        width: calc(100vw - 1rem);
        max-width: unset;
    }
    .setposeproav {
        padding: 1rem 0 0 0;
        background-size: 250px;
        background-position: calc(100% + 20px) calc(100% - 46px);
    }
    .mobileproupgrade .fctrialbtn {
        border-radius: 1rem;
    }
    .poseprompt .closebtn,
    .topRightIcon {
        right: 1rem;
        top: 1rem;
    }
    .controlhintinner i,
    .paneldesc  {
        display: none;
    }
    .editortutorial.poseprompt {
        max-height: 73vh;
    }
    .iconbuttontext, span.iconbuttonpointer {
        display: none !important;
    }
    .submitposebtn {
        width: 100%;
        font-size: 1rem;
        padding: 1rem;
        border-radius: 1rem;
        line-height: 1;
    }
    .canvasloader {
        left: 50%;
    }
    .menutitlebutton, .setposebtn .posedeletebtn {
        display: initial;
    }
    .menupopupside {
        right: 0;
        width: 100%;
        z-index: 2;
        top: unset;
        bottom: 0;
        height: calc(73vh + 27px);
        border-radius: 2rem 2rem 0 0;
    }
    #angle-display {
        right: 0.5rem;
        bottom: 64px;
        font-size: 0.8rem;
        opacity: 0.8;
    }
    #keyframelist {
        order: 0;
        width: 100%;
    }
    .animation-controls {
        order: 1;
    }
    .animationpromptcontent {
        flex-wrap: wrap;
    }
    .modeldragimg {
        height: 150px;
    }
    .dragdrophint svg {
        transform: rotate(
    74deg) scale(1.2);
    }

    .dragdrophint {
        left: 50%;
        top: -12px;
    }

    .dragdrophint:after {
        background-color: #fff;
        font-size: 1rem;
        padding: 1rem;
        border-radius: 1rem;
        left: -81px;
        top: 41px;
        width: 145px;
        box-shadow: var(--container-shadow);
    }
    #floorpropcontainer button.tilemenuitem,
    .modelmenu button.tilemenuitem {
        width: 100%;
    }
    #floorpropcontainer,
    .tilemenuinner.modelmenu {
        gap: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .promptrow {
        flex-flow: column;
        gap: 1rem;
    }
    .menuprimarybutton {
        border-radius: 1rem;
    }
    .posesupgrade .btn-primary {
        border-radius: 1rem;
    }
    .cont-2 > * {
        width: 100%;
        font-size: 1rem;
    }

    .menu-block {
        border-radius: 1rem;
        background-color: #f6f6f6;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .menupopupside label, .menupopupside select, #campos-trigger {
        font-size: 1rem;
        border: none;
    }

    .controllerpanel, .orbitcontrols {
        margin-bottom: 0;
    }

    .menupopupside .switch {
        font-size: 1.3rem;
    }

    .menupopupside input[type="range"] {
        background: #fff;height: 8px;
    }

    .menupopupside input[type="range"]::-webkit-slider-thumb,
    .menupopupside input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }

    input.sizerangenr {
        font-size: 1rem;
    }

    .orbitcontrols button img {
        width: 30px;
    }

    .modelsettingslist .cont-2 {
        gap: 0;
    }

    .iconbuttonwrap {
        flex: 1 0 20%;
    }
    label.iconbuttonlabel {
        display: initial;
    }
    .iconbuttoncontainer .iconbutton {
        border-radius: 1rem;
        aspect-ratio: unset;
        height: 50px;
    }
    .iconbuttoncontainer {
        overflow-x: scroll;
        padding: 0.5rem 10px 0.5rem 10px;
        margin: 0;
        width: calc(100% + 20px);
        position: relative;
        box-sizing: border-box;
        left: -10px;
    }
    .currentjoint {
        font-size: 1rem;
    }
    .menupopupside.modelsettingslist .cont-2 {
        margin: 0;
    }
    #scenelist > div {
        padding: 0.8rem 1rem;
        border-radius: 1rem;
    }
    .sceneobjectname select, .sceneobjectname {
        font-size: 1rem;
    }
    .popupmenu.modeladdbutton {
        padding: 1rem;
        background: var(--grey-background);
        border-radius: 1rem;
        margin: 1rem 0 0 auto;
    }
    .subtexthint.moremodelupgrade {
        border-radius: 1rem;
    }
    .guide-grid {
        grid-template-columns: auto;
    }
}
@media only screen and (max-height: 820px) {
    .editortutorial.poseprompt video {
        height: 200px;
    }
}

@media only screen and (min-width: 820px) {
    .panel {
        border-top-left-radius: 0;
    }
    .panel.hidden {    
        display: none;
    }
    .hidepanelbtn.hidden {
        right: 0px;
    }
    .hidepanelbtn.hidden svg {
        transform: rotate(270deg) !important;
    }
    .userdropdown:hover ul,.userdropdown ul:hover {
        display: block
    }
    .userdropdown:hover::after {
        display: block;
    }
    .control:hover .controlhint {
        display: initial;
        animation: fadeIn 0.2s;
    }
    .panelscroll > details:not(.scenelist):hover > summary,
    .panelscroll > .popupmenu:hover,
    .panelscroll .popupmenu.open {
        background-color: var(--grey-background);
        transition: 0.2s;
    }
    button.tilemenuitem:hover {
        background-color: var(--grey-background);
        transition: 0.2s;
    }
    button.tilemenuitem:hover .tilemenuitemtext {
        color: var(--black-text);
        transition: 0.2s;
    }
    .homepage .notifications-container {
        left: calc(50% - var(--panel-width) / 2);
        bottom: 45px;
    }
}

@media only screen and (min-width: 1800px) {
    :root {
        --panel-width: 450px;
    }    
}

@media only screen and (min-width: 625px) {
    .tutorialvideowrap {
        order: -1;
        margin: 0;
        border-radius: 0.5rem;
        width: 200px;
        align-content: center;
    }
    .editortutorial h2, .editortutorial p {
        width: 60%;
    }
    .editortutorial.poseprompt {
        flex-flow: column;
        flex-wrap: wrap;
        width: 625px;
        height: calc(250px + 2rem);
        padding: 1rem;
        gap: 1rem;
    }
    .editortutorial.poseprompt h2 {
        margin: 1rem 0 0 0;
    }
    .editortutorial.poseprompt video {
        max-height: 250px;
    }
    .tutorialcontinue {
        display: none;
    }
}

@media only screen and (max-width: 625px) {
    .tutorialvideowrap {
        flex: 1 1 0%;
        min-height: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        align-items: center;
    }
    .editortutorial.poseprompt video {
        height: auto;
        width: auto;
        max-height: 100%;
        object-fit: contain;
        display: block;
        max-width: 100%;
        flex-shrink: 1;
        min-height: 0px;
    }
    .editortutorial.poseprompt h2 {
        margin-top: 0;
    }
}

/* Animation Prompt Styles */
.animationprompt.poseprompt {
    flex-flow: column;
    width: 700px;
    max-width: 100%;
}

.animationprompt h3, .drawingmodeprompt h3 {
    margin-top: 0;
}

.animation-controls {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}

.animation-controls button {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.8rem;
    line-height: 0;
    background-color: var(--grey-background);
}

.animationpromptcontent {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

#animation-settings {
    background: var(--grey-background);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 0.5rem;
}

.animation-setting-item label {
    flex: 1 1;
}

.animation-setting-item {
    display: flex;
    font-size: 0.8rem;
    flex: 1 1 50%;
    flex-direction: column;
}

.animation-setting-item select {
    background: #fff;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    flex: 1 1 auto;
    cursor: pointer;
}

.animation-setting-item input[type="range"] {
    background: #fff;
}

.speed-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}

#animation-playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 38px;
    background: var(--setpose-red);
    z-index: 10;
    pointer-events: none;
    display: none;
}

.keyframelist {
    background: var(--grey-background);
    border-radius: 0.5rem;
    display: flex;
    white-space: nowrap;
    overflow: auto hidden;
    gap: 2px;
    flex-grow: 1;
    border: 2px solid var(--grey-background);
    position: relative;
    height: 38px;
    scrollbar-width: thin;
}

.keyframe-item {
    background: #fff;
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.keyframe-item span {
    font-size: 0.8rem;
}

.keyframe-item .delete-keyframe {
    padding: 0 0 0 10px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.2s;
}

.keyframe-item .delete-keyframe:hover {
    opacity: 1;
}

.delete-keyframe img {
    width: 18px;
    margin-bottom: -3px;
}

#nokeyframesmsg {
    text-align: center;
    color: var(--grey-text);
    margin: auto;
    font-style: italic;
    width: 100%;
}

button.tilemenuitem.newmodel:after {
    content: "New!";
    position: absolute;
    top: 0;
    right: -5px;
    background-color: var(--setpose-red);
    border-radius: 10px;
    padding: 2px 5px;
    font-size: 0.7rem;
    box-shadow: 0 2px 14px 0 rgb(0 0 0 / 15%);
}

.upgradesubtext {
    text-align: center;
    margin-top: 0.5rem;
    color: var(--grey-text);
}

@media (min-height: 1500px) {
    .canvaspanelcontainer {
        height: 1000px !important;
        max-height: 1000px !important;
    }
    .canvascontainer {
        height: 1000px !important;
        max-height: 1000px !important;
    }
}