.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable{



  width: 100% !important;



  left: 0 !important;



}

  .save-button:hover{
    background-color: #143A4D;
  }

  .part_itemsContainer{
    position: absolute;
    right: 20px;
    top: 6px;
    padding: 5px;
    background: #362017 !important;
    border: 1px solid #CAAB85 !important;
    color: white;

    
    &:hover{

      background-color: #CAAB85;

    }
  }



    /* body {



      padding: 0px;



      margin: 0px;



      min-height: calc(100vh - 50px);



      position: relative;



      background: white;



    } */





    /* Custom Styles for the SweetAlert2 Popup */

    .custom-btn {

      background-color: black !important;

      color: white !important;

      border: none !important;

    }

    

    .custom-popup {

      background-color: white !important;

      color: black !important;

    }

    

    .swal2-actions button {

      padding: 10px 20px !important;

      margin-top: 0 !important;

    }

  

    .swal2-actions {

        margin: 0 !important;

    }

    

    h2#swal2-title {

        padding: 0 !important;

    }

    

  



    div:where(.swal2-icon).swal2-info{

      border-color: black !important;

      color: black !important;

    }



    body>div.content {



      padding: 20px 40px;



    }







    .title {



      margin: 6px 0;



    }



    /* view selections tab  */

    .view-selections{

      position: absolute;

      left: 5PX;

      color: WHITE;

      padding: 10px;

      background-color:  #362017;
      border: 1px solid #CAAB85;

      &:hover{

        background-color: #CAAB85;

      }

    }





    /* Styling for the preview container div */

    .preview-container {

      position: relative;

      border: 1px solid #ccc;

      padding: 10px;

      margin-top: 10px;

    }

    div#preview-div {

      display: none;

      position: absolute;

      width: 100%;

      max-width: 28%;

      height: 100vh;

      border: 1px solid black;

      background: #143A4D;

      padding: 10px 40px;

      top: -9px;

      z-index: 999999;

  }

  button.part_itemsContainer {
    z-index: 9;
  }

  #preview-div button.view_close_button {

      right: 0;

      top: 0;
      position: absolute;

      color: white;

      padding: 10px;

      background-color: #143A4D;

      &:hover{

        background-color: #143A4D;

      }

  }



  #preview-ul li{

    color: white;

  }

    /* Styling for the close button in the top-left corner */

    .close-button {

      position: absolute;

      top: 5px;

      left: 5px;

      background-color: red;

      color: white;

      border: none;

      border-radius: 50%;

      width: 20px;

      height: 20px;

      cursor: pointer;

    }



    /* Styling for the ul element */

    #preview-ul {

      list-style-type: decimal;

      padding: 0;

      margin: 0;

    }







    .container {



      display: flex;



      flex-direction: row;



      flex-wrap: wrap;



    }



    .designers_playground .woocommerce-product-gallery {

      display: flex !important;

      justify-content: center !important;

      align-items: center !important;

  }

  

  



    .garment {



      position: relative;



      margin: 10px;



      width: 200px;



      height: 300px;



      padding-bottom: 10px;



      border: 2px solid #9E9E9E;



      border-radius: 10px;



    }



    .garment .tryon_button {



      display: block;



      position: absolute;



      bottom: 0px;



      left: 0px;



      right: 0px;



      text-align: center;



      padding: 6px;



    }



    .garment input[type=checkbox] {



      position: absolute;



      top: 0px;



      left: 0px;



      margin: 8px;



      width: 20px;



      height: 20px;



    }







    .garment:hover {



      background-color: #EEEEEE;



    }







    .garment:active {



      background-color: #BDBDBD;



    }







    .garment_icon {



      width: 200px;



    }







    .garment_name {



      display: block;



      text-align: center;



    }







    .part_item_container {



      overflow: auto;



      height: 200px;



      min-height: 200px;



    }







    .part_item {



      box-sizing: border-box;



      display: flex;

      /* justify-content: space-around !important; */

      flex-direction: column;

      align-items: center;



      margin: 10px 12px;



      position: relative;



      height: 160px;



      width: 140px;



      overflow: hidden;



    }





    .part_item{

      cursor: pointer !important;

    }

    .part_item:hover {



      background-color: unset !important;

      cursor: pointer;



    } 







     .part_item:active {



      background-color: unset !important;



    } 







    .part_item > img {width: 120px;}







    .part_item_selected {



      border: 2px solid #9E9E9E;



    }







    .part_item_name {



      text-align: center;



      position: absolute;



      bottom: 6px;



      left: 0;



      right: 0;



    }







    .garment_view {



      width: 100%;



      height: 500px;



      border: none;



      background: #c460e2; /* Old browsers */



      background-image: linear-gradient(to bottom, #a2a2a2, #111111);



      position: relative;



      display: flex;



    }







    .previews {



      width: 100%;



      height: unset !important;



      overflow-x: auto;



      display: flex;



      flex-direction: column;



      flex-wrap: wrap;

    

    }







    #signin_dialog>div>div {



      padding: 6px;



    }







    #signin_dialog input {



      width: 320px;



    }







    .tryon_garment_view {



      width: 100%;



      height: 90vh;



      border: none;



      background: #c460e2; /* Old browsers */



      background-image: linear-gradient(to bottom, #a2a2a2, #111111);



      position: relative;



    }







    #tryon_dialog .previews {



      height: auto;



    }







    #tryon_dialog[status=ready] .tryon_garment_view {



      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");



    }







    @keyframes tryon_panel_fadein {



      from {height: 0px;}



      to {height: 48px;}



    }



    #tryon_panel {



      background-color: #2CBDCB;



      animation-name: tryon_panel_fadein;



      animation-duration: .5s;



      background-color: #ddd;



      padding: 12px;



      text-align: center;



    }



    #tryon_panel button {



      font-size: 1.2em;



      font-weight: bold;



      background-color: black;



      color: #fff;



      width: auto;



      height: 48px;



      line-height: 48px;



      border: none;



      padding: 0px 12px;



    }







    #tryon_panel button:hover {



      /* background-color: #2CBDCB; */



      background-color: #00BCD4;



      color: black;



    }







    .ui-dialog{



      /* width: 100% !important; */



    }



    .ui-dialog {



      padding: 0;



      border-radius: 0;



      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3) !important;



    }







    .ui-dialog-titlebar-close {



      background: none;



      border: none;



      outline: 0;



    }







    .ui-dialog-titlebar-close:hover {



      background: none;



      border: none;



    }







    .ui-dialog-titlebar-close:focus {



      background: none;



      border: none;



      outline: 0;



    }







    .ui-dialog-titlebar-close:active {



      background: none;



      border: none;



    }







    .ui-widget-content {



      padding: 0;

      background-color: #CAAB85 !important;

      border-radius: 0;



      box-shadow: none;



      border: #757575 0.5px solid !important;



    }



    .ui-dialog-content{



      width: 100% !important;



    }



    .ui-widget-header {



      background: #362017 !important;



      border-color: #362017 !important;



      border-radius: 0 !important;



    }







    .ui-tabs-tab {



      background: black !important;



      margin: 2px .2em 2px 0 !important;



      padding-bottom: 1px !important;



      border: #F5F5F5 1px solid !important;



    }







    .ui-tabs-anchor {



      color: white !important;

      font-weight: bol;



    }


    canvas {
      background: #CAAB85;
  }
  
  /* Target the div with the custom scrollbar */
  .part_item_container  {
      width: 300px;
      height: 200px;
      overflow-y: scroll; /* Ensure the scrollbar is visible */
      scrollbar-width: thin; /* For Firefox */
      scrollbar-color: #362017 #CAAB85; /* Thumb and track colors for Firefox */
  }
  
  /* Webkit-based browsers (Chrome, Safari, Edge) */
  .part_item_container ::-webkit-scrollbar {
      width: 10px; /* Width of the scrollbar */
  }
  
  .part_item_container ::-webkit-scrollbar-thumb {
      background: #888; /* Color of the scrollbar thumb */
      border-radius: 5px; /* Rounded corners for the thumb */
  }
  
  .part_item_container ::-webkit-scrollbar-thumb:hover {
      background: #362017 !important; /* Color when hovered */
  }
  
  .part_item_container ::-webkit-scrollbar-track {
      background: #f1f1f1; /* Background of the scrollbar track */
  }
  


  #garment_viewer{
    border-bottom: 2px solid #362017;
  }

    .ui-tabs-active {



      background: #CAAB85 !important;
      border:  2px solid #362017 !important;



    }
    canvas{
      background-color:  #CAAB85 !important;
    }

    .ui-tabs .ui-tabs-nav li.ui-tabs-active{
      background: #CAAB85 !important;
      border:  2px solid #362017 !important;


    }






    .ui-tabs-active .ui-tabs-anchor {



      color: white !important;



    }







    .ui-tabs-active .ui-tabs-anchor:hover {



      outline: 0;



    }







    .ui-tabs-active .ui-tabs-anchor:focus {



      outline: 0;



    }







    .ui-tabs-active .ui-tabs-anchor:active {



      outline: 0;



    }







    .spinner {



      width: 40px;



      height: 40px;



      position: absolute;



      bottom: 240px;



      left: calc(50% - 10px);



      z-index: 999;



    }







    .arrow_left {



      border: solid black;



      border-width: 0 3px 3px 0;



      display: inline-block;



      padding: 5px;



      transform: rotate(135deg);



      -webkit-transform: rotate(135deg);



      margin-right: 3px;



      cursor: pointer;



    }







    .folder {



      width: 120px;



      height: 90px;



      display: inline-block;



      margin: auto;



      position: relative;



      background-color: #708090;



      border-radius: 0 8px 8px 8px;



      margin-bottom: -8px;



      margin-top: 20px;



    }



    .ui-tabs .ui-tabs-nav {margin: 0;padding: .2em .2em 0;display: flex;flex-direction: column;width: 345px;

      text-transform: uppercase;
      background-color: #CAAB85 !important;

    }



    /* .ui-widget.ui-widget-content {



      display: flex;



    } */







    div#tabs{



      display: flex;



    }



    .ui-tabs .ui-tabs-panel{

      height: 100%;

      max-height: 74%;

      border-right: none !important;

      width: 45vw;

      display: flex;

      justify-content: start;

      gap: 10PX;

      flex-wrap: wrap;

    }

    .three_d_tailor_trouser{
      .ui-tabs .ui-tabs-panel{
        height: 100%;
        max-height: 43% !important;
      }
    }


    a:focus{
      outline: none !important;
    }




    .ui-widget-overlay.ui-front{



      width: 100%;



    }



    #dialog{



      display: flex;



    }



    .folder:before {



      content: '';



      width: 36%;



      height: 12px;



      border-radius: 0 20px 0 0;



      background-color: #708090;



      position: absolute;



      top: -12px;



      left: 0px;



    }







    .double-bounce1, .double-bounce2 {



      width: 100%;



      height: 100%;



      border-radius: 50%;



      background-color: #fff;



      opacity: 0.6;



      position: absolute;



      top: 0;



      left: 0;



      -webkit-animation: sk-bounce 3.0s infinite ease-in-out;



      animation: sk-bounce 3.0s infinite ease-in-out;



    }







    .double-bounce2 {



      -webkit-animation-delay: -1.5s;



      animation-delay: -1.5s;



    }



    .ui-dialog .ui-dialog-title{

      width: 85% ;

    }

    button.save-button {

      color: white;
      text-transform: uppercase;
      background:   #362017 !important; 
      border: 1px solid #CAAB85 !important;
      padding: 10px;

      
      &:hover{

        background-color: #CAAB85 !important;

      }

    }


    /* .three_d_tailor_trouser .ui-dialog .ui-dialog-titlebar-close{
      top: 20%;
    } */
     .ui-dialog .ui-dialog-titlebar-close{
      right: 1.3em !important;
      background-color:  #362017 !important;
      border: 1px solid #CAAB85 !important;
      top: 27%;
      width: 43px;
      margin: -10px 0 0 0;
      padding: 1px;
      height: 49px;

      
      &:hover{

        background-color: #CAAB85 !important;

      }

    }







    @-webkit-keyframes sk-bounce {



      0%, 100% { -webkit-transform: scale(0.0) }



      50% { -webkit-transform: scale(1.0) }



    }







    @keyframes sk-bounce {



      0%, 100% {



        transform: scale(0.0);



        -webkit-transform: scale(0.0);



      } 50% {



        transform: scale(1.0);



        -webkit-transform: scale(1.0);



      }



    }







    .copyright {



      position: absolute;



      left: 0;



      right: 0;



      bottom: 0;



      font-size: 8px;



      text-align: center;



      margin-bottom: 10px;



    }



    



    .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {



      top: 0 !important;



  }



  



.ui-dialog .ui-dialog-content{



padding: 0 !important;



overflow: unset !important;



}



.designers_playground .single_add_to_cart_button, .designers_playground .quantity {

  display: none !important;

}
.ui-tabs .ui-tabs-nav li{
  background-color: #362017 !important;
}


@media (max-width:1024px){

  div#preview-div{

    width: 100%;

    max-width: 34%;

  }

  .ui-tabs .ui-tabs-panel{

    width: 38vw;

  }

  .ui-tabs .ui-tabs-nav{

    width: 100%;

    max-width: 43%;

  }

  .ui-tabs .ui-tabs-nav .ui-tabs-anchor{

    padding: 10px;

  }

  div#preview-div{

    width: 100%;

    max-width: 31%;

  }

  .ui-dialog .ui-dialog-titlebar-close{

    right: 1em !important;

  }

  .ui-dialog .ui-dialog-title{

    width: 70%;
  }

}



@media (max-width:768px){

  .ui-tabs .ui-tabs-nav{

    width: 100%;

    max-width: 45%;

  }

  .ui-dialog .ui-dialog-title{

    width: 60% ;

  }



  .part_item{

    width: 90px;

    height: 130px;

  }

  .ui-tabs .ui-tabs-nav .ui-tabs-anchor{

    font-size: 12px !important;

  }

}

@media (max-width: 600px){

  button.cross_btn {
    padding: 0px 10px;
    background-color: #143A4D !important;
    position: absolute;
    margin-top: -12px;
    margin-right: 35px;
}

.ui-dialog .ui-dialog-titlebar-close{
  top: 23%;
}

  .previews{
    width: 83%;
    margin-left: auto;
    margin-right: auto;
  }
  .ui-dialog-titlebar{
    button{
      font-size: 12px !important;
    }
  }
  .three_d_tailor_trouser .previews{
    margin-top: 0 !important;
    z-index: 0 !important;
  }

  .three_d_tailor_suit .previews{

    margin-top: -50px;

    z-index: 1;

  }



  div#preview-div{

    width: 100%;

    max-width: 52%;

    padding: 10px 22px;

  }

  .ui-dialog .ui-dialog-titlebar{

    padding: 2px;
    z-index: 99;
  }

div#dialog {



  display: flex;



  flex-direction: column;



}







div#tabs {



  display: flex;



  flex-direction: column;



  width: 100% !important;



}



 .ui-tabs .ui-tabs-nav {

  width: unset;

  flex-direction: unset;

  flex-wrap: nowrap;

  overflow-x: auto;

  padding: 0;

  max-width: unset;

  z-index: 10;

}



.ui-tabs .ui-tabs-nav li{
  width: 100%;
  max-width: fit-content;
  margin: 5px !important;

}







.ui-tabs .ui-tabs-panel{

  width: 100%;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  position: absolute;

  z-index: 9999;

  height: unset;

  max-height: unset;

  height: 100vh;

  top: 460px;

  padding-top: 0;

}





.ui-dialog .ui-dialog-title {

  width: 57% !important;

}



button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {

  background: red;

  border-radius: 5px;

  right: 20px;

}



.part_item {

  width: 95px;

  height: 138px;

}



.part_item_name {color: white;}



.cross_btn{

  position: absolute;

  background: #143A4D;

  z-index: 999999;

  padding: 0 4px;

  top: 30em;

  right: 9px;

  border-radius: 5px;

}



}



span.part_item{

  border: none;

}



.part_item_container[aria-hidden='false'] .part_item_selected {background: transparent !important;border: 1px solid black !important;}