:root {
     --main-font: Lato, sans-serif;  
    --fontsizeLarge:14px;
}
    body.desktop .app#appTryon {
        font-size: var(--fontsizeLarge);
    }
    body.desktop #appTryon .navbar, body.desktop #appTryon #appHeader {
        height: 60px;
            background: #f7f7f7;
    }
      body.desktop #appTryon .nav-links a {
        font-size: inherit;
    }
     body.desktop #appTryon #heroGetStartedBtn {
        border-radius: 50px;
        padding: 1rem 2rem ;
        font-size: .9rem;
        font-weight: 500;
    }
       body.desktop .topBannerLogin{
        display: none;
    }
    body.desktop #appTryon .auth-container{
      padding: 0;
    width: 25%;    
    right: 0;
    position: fixed;
    right: 0!important;
    top: 0!important;
    border: 0;
    background: #fbfbfb;
    transform: none;
    height: 100%;
    left: auto;
    }
       body.desktop form#loginForm,  body.desktop #verifyForm{
    position: static;
    width: 100%;
    height: 100%;
    padding: 20px 44px;
    margin-top: 14rem;
    background: none;
        gap: 20px;

    }
     body.desktop i.fas.fa-times {
    font-size: 1.2rem;
    }
    
       body.desktop h6 {
        font-size: 1.2rem;
    }
     body.desktop button#customGoogleBtn, 
     body.desktop button#customGoogleBtnB,
     body.desktop #appTryon .form-input input{     
            font-size: .875rem;
                padding: 13px 18px;
            
    }
    body.desktop #appTryon .form-input {
        padding: initial;
    }
   body.desktop #appTryon .btn,body.desktop #appTryon #sendOtpBtn {
        padding: 1.8rem;    
        padding: 13px 18px;
        font-size: 1rem;
        font-weight: 500;
    }
   body.desktop #appTryon .powered-by {
        font-size: .7rem;
    }
   body.desktop .or-divider{
    margin: 3px 20px;
    }
    body.desktop .logo img {
        padding: 10px;
        height: auto;
        width: 124px;
    }
    body.desktop footer{
        z-index: 99;
    }
     body.desktop .tabs {
justify-content: center;
    }
      body.desktop .app#appTryon .tabs button{
    width: 180px;
    font-size: 11px;
    min-width: auto;
       
    }
   body.desktop .app#appTryon .tabs {
        padding: 8px 20px;
    }
     body.desktop #appFooter{
        box-shadow: none;
    }
        body.desktop span#creditsCount {
        font-size: .875rem;
        font-weight: 600;
    }
    body.desktop .app#appTryon .upload-actions button {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
      body.desktop .upload-actions {
        top: 95px;
    }
    body.desktop .app#appTryon .menu button {    
        padding: .875rem; 
        font-size: .7rem;
    }
     body.desktop .app#appTryon .photo-item.garment-item,body.desktop .app#appTryon .upload-garment,body.desktop .app#appTryon .upload-photo {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
}
   body.desktop  #garmentScroll .photoitem.garment-item,   body.desktop #tryonsInnerContent .tryon-item.garment-item{
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
}
     body.desktop  #appTryon.app .photo-grid,  body.desktop  #appTryon.app  .thumb-grid{
    min-height: auto!important;
}
  body.desktop .allContent {
    flex: 1;
    position: fixed;
    width: 25%;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    top: 0;
    right: 0;
    margin-top: 60px;
}
  body.desktop  #appFooter {
        position: absolute;
        width: 100%;
        right: 0;
        bottom: 60px;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
        z-index: 9999999999;
        width: 25%;
         left: auto;
    }
   body.desktop  #appTryon.app  #headerTabNav.header-tab-nav{
    display: none!important;
    opacity: 0;
    }
         body.desktop #appTryon.app #uploadGarmentBtn,     body.desktop #appTryon.app #uploadPhotoBtn {
          top: 23px;
    left: 29px;
    }

    body.desktop #appTryon .allContent .photo-grid, body.desktop #appTryon .allContent .thumb-grid , body.desktop #appTryon #tryonsInnerContent{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    height: calc(100dvh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
    margin-left: 0 !important;
    overflow: auto;
    overflow-x: hidden;
    overflow-y:auto!important;
   grid-auto-rows: max-content;
}

    body.desktop #appTryon body.desktop .photo-grid .photo-item:nth-child(1), #appTryon .thumb-grid :nth-child(1) {
    grid-column: 1 / 2;
}
 body.desktop #appTryon.totem .white-box{
    top:0;
}
 body.desktop #appTryon .content-container{
        padding: 12px 16px;
}
 body.desktop .tryon-btn {
    background: #bd4346;
    color: #fff;
    border: none;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
    position: fixed;
    justify-content: center;
    z-index: 9;
    transform: translate(-50%, -50%);
    bottom: 4%;
    left: 50%;
    width: 14%;
    font-size: 12px;
}
body.desktop .upload-actions{
        right: 27%;
}
body.desktop .app#appTryon .tryon-btn {
    font-size: .875rem;
    padding: 20px;
}
body.desktop #uploadSubtext, body.desktop #uploadText{
    display: none!important;
}
body.desktop #uploadBox .fa-upload {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    right: 27%;    
    background: #b53335;
    opacity: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    bottom: 0;
    display: flex!important;
    align-items: center!important;
}