.desk-form-generator-wrapper-modal {
     display: none;
     transform: scale(0);
     /* display: flex;
     transform: scale(1); */
     top: 0;
     left: 0;
     right: 0;
     width: 100vw;
     height: 100dvh;
     max-width: 100%;
     position: fixed;
     /* background: #fafafa; */
     background: white;
     z-index: 10;
     transition: all 0.2s;
 }

 .desk-form-generator-wrapper-modal.configurator-opened {
     display: flex;
     transform: scale(1);
 }

 .desk-form-generator-wrapper {
     position: relative;
     top: 0;
     left: 0;
     right: 0;
     width: 100vw;
     height: 100dvh;
     display: flex;
     background: #ffffffba;
     z-index: 10;
     justify-content: space-between;
     max-width: 1920px;
 }


 .close-configurator-form {
     position: absolute;
     top: 25px;
     right: 25px;
     z-index: 12;
     width: 40px;
     height: 40px;
     background: transparent !important;
     box-shadow: none !important;
     padding: 0px;
     border: 1px solid #CECECE;
     border-radius: 40px;
     cursor: pointer;

 }

 .close-configurator-form svg {
     width: 16px;
     height: auto;

 }

 #desk-generator-form {
     flex: 0 1 562px;
     padding: 25px;
     /* background: #fafafa; */
     background: white;
     /* height: calc(100vh - 100px); */
     /* height: 100vh; */
     overflow: auto;
     padding: 20px;
     padding-top: 50px;
     padding-bottom: 0px;
     padding-left: 0px;
     padding-right: 0px;
     border: 1px solid #CECECE;
     border-right: 0px;
     position: relative;
 }


 @media screen and (max-width: 1150px) {
    #desk-generator-form {
        flex: 0 1 400px;
    }
 }



 .desk-generator-form-section-wrapper {
     padding-left: 45px;
     padding-right: 45px;
 }



 #desk-generator-form * {
     font-family: "Poppins", sans-serif !important;
 }


 #desk-generator-form h2 {
     font-size: 26px;
     line-height: 42px;
     font-weight: 500;
     margin: 0px;
     margin-bottom: 35px;
     color: black;
 }

 #desk-generator-form .desk-generator-section-title {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 15px;
 }

 #desk-generator-form h3 {

     display: block;
     font-size: 15px;
     line-height: 25px;
     ;
     font-weight: bold;
     color: black;
     margin: 0px;
 }

 .desk-generator-number-section {
     display: flex;
     justify-content: center;
     align-items: center;
     flex: 0 0 30px;
     width: 30px;
     height: 30px;
     border-radius: 30px;
     background-color: #DB0D0D;
     font-size: 15px;
     line-height: 25px;
     ;
     font-weight: bold;
     color: white;

 }

 .desk-generator-section-hr {
     flex: 1;
     height: 1px;
     background: #CECECE;
 }

 #desk-generator-form .copy-configuration {
     width: 50px;
     height: 50px;
     flex: 0 0 50px;
     border-radius: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0px;
     background-color: white;
     border: 1px solid #CECECE;
 }

 #desk-generator-form .copy-configuration svg {
     width: 20px;
     height: auto;
 }

 #desk-generator-form button[type="submit"] {
     display: flex;
     align-items: center;
     background-color: #DB0D0D;
     color: white;
     font-size: 16px;
     font-weight: 500;
     border-radius: 40px;
     cursor: pointer;
     padding: 15px;
     border: 0px;
     outline: none;


     justify-content: center;
     transition: all 0.2s;
     border: 1px solid #DB0D0D;
     /* line-height: 0px; */
     height: 50px;
     text-transform: uppercase;
     font-weight: 400;
     gap: 15px;
 }

 /* #desk-generator-form button[type="submit"]:hover {
     background-color: white;
     color: black;
 } */

 #desk-generator-form button[type="submit"] svg {
     width: 20px;
     height: auto;
     fill: white;
 }

 .render-result {
     display: flex;
     justify-content: center;
     flex: 1;
     align-items: center;
 }

 .desk-form-generator-wrapper .render-result img {
     width: 100%;
     object-fit: contain;
  
 }

 .desk-form-generator-wrapper .render-result {
     background: #f6f6f6;
 }



 /* Styl dla strony klienta */

 #desk-generator-form .radio-wrapper-loop {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }


 .desk-generator-section {
     margin-top: 30px;
 }

 .desk-generator-section label {
     display: block;
     /* margin-bottom: 5px; */
     cursor: pointer;
 }

 .custom-radio {
     display: none;
     transition: all 0.2s;
 }

 .custom-radio label {
     margin-bottom: 0px;
 }

 .custom-radio+label {
     /* display: inline-block; */
     padding: 15px 25px;
     border: 1px solid #CECECE;
     border-radius: 40px;
     /* margin-right: 10px; */
     cursor: pointer;
     font-size: 15px;
     line-height: 18px;
     font-weight: 500;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .custom-radio:checked+label {
     background-color: #101010;
     ;
     color: #fff;
     transition: all 0.2s;
 }

 #desk-generator-form button {
     background-color: #101010;
     ;
     color: #fff;
     padding: 10px 20px;
     border: none;
     cursor: pointer;
 }


 #desk-generator-result p {
     color: green;
     text-align: center;
     font-weight: 500;
     margin: 0px;
 }

 .desk-form-generator-wrapper .render-result img {
     max-width: 100%;
 }



 .price-radio-wrapper {
     font-size: 13px;
     line-height: 18px;
     color: #B8B8BE;
     font-style: italic;
     font-weight: 500;
     /* margin-left: 15px; */
 }

 .gb-container-checkbox .akcesoria-price-wrapper {
     font-size: 14px;
     color: #B8B8BE;
     font-style: italic;
     font-weight: 500;
 }

 /* Custom styles for checkboxes and radios in accessories */





 .gb-container-checkbox,
 .gb-container-radio {
     display: block;
     position: relative;
     padding-left: 35px;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 18px;
     user-select: none;
 }

 .gb-container-checkbox input,
 .gb-container-radio input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 .gb-container-radio {
     font-size: 12px;
     font-weight: 400;
     padding-left: 20px;
 }

 /* Custom checkbox styles */
 .gb-checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 19px;
     width: 19px;
     /* background-color: #eee; */
     background-color: transparent;
     border: 1px solid #CECECE;
     border-radius: 5px;
     transition: all 0.2s;


 }

 .gb-container-checkbox {
     font-size: 14px;
     font-weight: 500;
     line-height: 24px;
 }

 .gb-container-checkbox:hover input~.gb-checkmark {
     background-color: #CECECE;
 }

 .gb-container-checkbox input:checked~.gb-checkmark {
     background-color: #101010;
     ;
 }

 .gb-checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 .gb-container-checkbox input:checked~.gb-checkmark:after {
     display: block;
 }

 .gb-container-checkbox .gb-checkmark:after {
     left: 7px;
     top: 3px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 1px 1px 0;
     transform: rotate(45deg);
 }

 /* Custom radio styles */
 .gb-checkmark-radio {
     position: absolute;
     top: 0;
     left: 0;
     height: 15px;
     width: 15px;
     background-color: #eee;
     border-radius: 50%;
     transition: all 0.2s;
 }

 .gb-container-radio:hover input~.gb-checkmark-radio {
     background-color: #CECECE;
 }

 .gb-container-radio input:checked~.gb-checkmark-radio {
     background-color: #101010;
     ;
 }

 .gb-checkmark-radio:after {
     content: "";
     position: absolute;
     display: none;
 }

 .gb-container-radio input:checked~.gb-checkmark-radio:after {
     display: block;
 }

 .gb-container-radio .gb-checkmark-radio:after {
     top: 5px;
     left: 5px;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: white;
 }

 /* Styles for accessory subitems */


 .accessory-group {
     margin-left: 10px;
     padding-left: 20px;
     border-left: 1px solid #101010;
     ;
 }

 .accessory-subitems {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 10px;


 }

 .accessory-subitems label {
     margin-bottom: 0;


 }

 .accesory-group-desc {
     font-size: 12px;
     line-height: normal;
     font-style: italic;
 }

 .desk-generator-section {
     transition: all 0.2s;
 }

 .desk-generator-section.error-no-choice {
     border: 1px solid #ff5e5e;
     border-radius: 4px;
     padding: 10px;
 }

 .akcesoria-single-wrapper {
     margin-top: 15px;
 }

 #desk-generator-result {
     flex: 100%;
 }

 .desk-generator-total {
     margin-top: 25px;
     padding-top: 25px;
     padding-left: 45px;
     padding-right: 45px;
     border-top: 1px solid #CECECE;


     position: sticky;
     bottom: 0px;
     left: 0px;
     /* width: 100%; */
     background-color: white;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 25px;
 }

 .total-price-wrapper {
     display: flex;
     flex-direction: column;
 }

 .total-price-wrapper span {
     color: #B8B8BE;
     font-size: 13px;
     line-height: 20px;
     font-style: italic;
 }

 .desk-generator-total #total-price {
     font-size: 25px;
 }

 .desk-generator-total h3 {
     display: flex !important;
     align-items: center;
     gap: 15px !important;
 }

 .kolor-blatu-section label {
     /* width: 50px;
     height: 50px; */
     /* padding: 0px; */
     /* border-radius: 50%; */
     /* overflow: hidden; */
     padding: 5px 6px;
     padding-right: 15px;
     color:black;
 }

 .kolor-blatu-section label img {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     object-fit: cover;
 }

 .kolor-blatu-section .custom-radio:checked+label {
     /* border: 1px solid #101010; */
     background-color: transparent;
     color:black;
 }


 .color-label {
     position: relative;
     display: inline-block;
 }

 .color-label input[type="radio"] {
     display: none;
 }

 .color-label::after {
     content: "";
     position: absolute;
     top: 0px;
     right: 0px;
     width: 0px;
     height: 0px;
     transition: all 0.2s;
     background-color: rgb(255, 255, 255);
 }

 .kolor-blatu-section .custom-radio:checked+label::after {
     content: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 507.506 507.506" style="enable-background:new 0 0 507.506 507.506;" xml:space="preserve" width="10" height="10"><g><path d="M163.865,436.934c-14.406,0.006-28.222-5.72-38.4-15.915L9.369,304.966c-12.492-12.496-12.492-32.752,0-45.248l0,0c12.496-12.492,32.752-12.492,45.248,0l109.248,109.248L452.889,79.942c12.496-12.492,32.752-12.492,45.248,0l0,0c12.492,12.496,12.492,32.752,0,45.248L202.265,421.019C192.087,431.214,178.271,436.94,163.865,436.934z"/></g></svg>');
     position: absolute;
     top: -5px;
     right: -5px;
     width: 20px;
     height: 20px;
     background: black;
     border-radius: 50%;
     /* padding: 2px; */
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid rgb(255, 255, 255);
 }


 @media screen and (max-width: 950px) {
    .desk-form-generator-wrapper{
        flex-direction: column;
        justify-content: initial;
    }
    .desk-form-generator-wrapper .render-result{
        aspect-ratio: 16/9;
        flex:initial;
    }
    .desk-form-generator-wrapper .render-result img{
        aspect-ratio: 16/9;
    }
    #desk-generator-form{
        flex: 1;
    }
    #desk-generator-form button[type="submit"]{
        flex: 100%;
    }
    .render-result{
        max-height: 20dvh;
    }
    .desk-form-generator-wrapper .render-result img{
        max-height: 20dvh;
    }
 }

 @media screen and (max-width: 550px) {
    .desk-generator-form-section-wrapper{
        padding-left: 25px;
        padding-right: 25px;
    }
    .desk-generator-total{
        padding-left: 25px;
        padding-right: 25px;
    }
    .desk-generator-total{
        gap: 10px;
        padding-top: 15px;
    }
    .render-result{
        padding: 25px;
     
    }

    .desk-form-generator-wrapper .render-result{
        /* flex: 0 1 500px; */
        /* flex: 0 0 180px; */
        /* max-height: 180px; */
    }
    .desk-form-generator-wrapper .render-result{
        aspect-ratio: 16/9;
    }
    .desk-form-generator-wrapper .render-result img{
        aspect-ratio: 16/9;
    }
 }