/* Editor Section */





:root { --custom-color: #247f4f; }
.selected {
    border: 2px dotted #247f4f;
    background-color: #f69200;
    font-weight: normal;
  }
  
  
  .bold {
    font-weight: bold;
  }
  
  .italic {
    font-style: italic;
  }
  
  .underline {
    text-decoration: underline !important; /* Ensure underline is applied*/ 
  }
  
  #body{
    display: none;
    
    font-family: Arial, sans-serif;

  }
#body{
    margin: 0;
    padding: 0;
    border:black;
    background-color: gray;
    border-radius: 5px;
    border: 2px solid silver;
}

#body .toolbar{
    
   border-right: 3px solid silver;
    background-color: #fff;
    margin-right: 10%;
}
#body .title{
    background-color: var(--custom-color);   
padding: 20px;
    font-size: 20px;
 color: #fff;
 text-align: center;

}

#body #imageInput{

width: 90%;    
margin: 10px;
cursor:pointer;

}

#body .textbox input{
width: 90%;
height: 30px;
margin-top: 20px;
margin: 10px;
border-radius: 5px;
}
#body .textbox select{
width: 90%;
margin-left: 10px;
height: 30px;
border-radius: 5px;
}
#body .textbox #formatting{
border-bottom: solid 1px gray;
max-height: 80px;
display: flex;
margin-bottom: 10px;
}
#body .textbox .formatting{
margin: 5px;
margin-top: 10px;

border: none;
background-color: var(--custom-color);
color: #fff;
border-radius: 5px;
cursor:pointer;
max-height: 50px;
}
#body #showtextbuttons{
    width: 40%;
    background-color: red;
}
#body #showTextBtn{
width: 45%;
height: 40px;
background-color: var(--custom-color);
border: none;
color: #fff;
margin-left: 10px;
cursor:pointer;
border: gray 2px solid;
}
#body #showTextBtn2{
    width: 45%;
    height: 40px;
    background-color: var(--custom-color);
    border: none;
    color: #fff;
    margin-left: 10px;
    margin-bottom: 10px; 
    margin-top: 10px;
    border: gray 2px solid;
    
    cursor:pointer;}
#body #Addtext{
    width: 90%;
    height: 40px;
    background-color: var(--custom-color);
    border: none;
    color: #fff;
    margin-left: 10px;
    cursor:pointer;
    
    
    }

#body #inputtext{
height: 40px;
padding: 10px;
width: 95%;

}
#body .icons{
   
    display: flex;
}

#body .color-picker{


    
   display: flexbox;
  
}
#body .color-picker input{
    width: 40;
    margin: 5px;
    height: 30px;
}
#body .size-picker input{
   width: 70%;
   height: 40px;
   margin-left: 10px;
   padding: 5px;
 border: solid 2px var(--custom-color);

}
#colorPicker{

    list-style-type: none;
    width: 20px;
    text-align: center;

}
#colorPicker *{

    list-style-type: none;
    width: 20px;

}

#body .size-picker label{
   
 }



#body #icons{
    display: flex;
}

#body #icons i{
    margin: 10px;
    color: var(--custom-color);
    cursor:pointer;

}
#body .trash input{
    width: 90%;
    height: 40px;
    border: none;
    background-color: red;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    margin-left: 10px;
    cursor:pointer;
}
#body .Submit{
    width: 90%;
    height: 45px;
    background-color: var(--custom-color);
border: none;
margin-top: 10px;;
border-radius: 5px;
font-size: 16px;
color: #fff;
margin-left: 10px;
cursor:pointer;
}
 
#frame {
/* overflow: bloxk; */
    width: 270px;
    max-height: 360px; 
    position: relative;
     background-color: gray;
     border-style: double;
    border-width: 2px;
    border-color: gray;
   
   
  }
 #body  .dragable {
    
    padding: 0;
    margin: 0;
    left: 100px;
    top: 200px;
    z-index: 1;
    
    
    position: absolute;
    cursor: grab;
    display: none;
  }
 #body .dragable:active {
    cursor: grabbing;
  }
  
  #body .dragable.selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dotted #000;
    pointer-events: none;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
  z-index: 1;  
}

  
#body #brows-image1st{
    width: 55px;
    height: 55px;
    float: right;
    padding: 0;
  
    margin-top: -45px;
    margin-right: 10px;
    border: none;
    background-color: #fef295;
 
    overflow: hidden;
   border-radius: 10px;
   
}
/* Ensure that the container takes up the width of its content */
#rows {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 10px; /* Optional: adds spacing between rows */
}

/* Style for each button */
#deletebtn, #selectlogo {
    height: 60px;
    width: 300px; /* Make the divs span the full width of their container */
    border: 2px solid gray;
    margin-left: 10px;
    border-radius: 5px;
}

/* Additional styling for visual clarity */
#deletebtn {
   
}

#selectlogo  label{
margin: 20px;
}

/* Additional styling for visual clarity */
#deletebtn {
    
}

#selectlogo {

}


#logobtn button {
    display: block;
}






#logobtn label, #logobtn button {
    display: block;
    margin-bottom: 10px; /* Adjust spacing within the #logobtn div */
}




#logobtn label, #logobtn button {
    display: block;
    margin-bottom: 10px; /* Adjust spacing within the #logobtn div */
}
#Qr-frame-footer{
display: none;
text-align: right;
border: solid 1px silver;
background-color:#fef295;
padding: 10px;
}
#Qr-frame-footer input{
    display: flexbox;
    width: 200px;
    margin-top: auto;
    background-color: green;
    color: #fff;
    border: solid 1px silver;
    margin-right: 5px;
    margin-left: 10px;
    }
    #Qr-frame-footer #docname{
        width: 50%;
        background-color: #fff;
        color: #000;

    }
    #Qr-frame-footer h6{
        margin-left: 60%;
    }

    #QR-img{
        
        width: 255px;
    }
 
    #obj2{
text-align: center;

}
#obj0 img{
border: solid 4px #fff;
}

      #obj2 *{
       
        text-align: center;
        margin-top: 5px;

      }
      #obj1{
        background-color: #fff;
            }
     



    #Qr-frame-footer #go_back{
        width: 210px;
        margin-left: 10px;
        margin-right: 20px;

        float: right;
    }
    #QR-logo{
        width: 18%;
        height: 17%;
        position: absolute;
        left: 42%;
        top: 37%;
        z-index: 5px;
        background-color: #fff;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border: solid 3px black;
        display: none;
       
    }
    
    
    #preloader{
        position: absolute;
        text-align: center;
        z-index: 100;
        left: 30%;
        top: 5%;
        width: auto;
        height: 200px;
        border: 2px solid silver;
        border-radius: 10px;
        box-shadow: 2px 2px 2px 2px gray;
        
        
    }
    #preloader h5{
        
        display: inline-block;
        width: 100%;
        height: 50px;
    }
    #Preloader-text{
        width: 100%;
        position: absolute;
    }
    #fontSelect{
       
    }
    #trash{
        width: 35px;
        height: auto;
       
       
       

    }
    #size{
        
        min-width: 70px;
 
    }

    @media only screen and (max-width: 600px) {
        #obj2{
            background-color: red;
        }
        #body {
           
            
            flex-direction: column; /* Stack toolbar and frame vertically */
            height: 160vh; /* Ensure the container takes up the full height */
            overflow: auto; /* Prevent overflow issues */
            border: none ;
            background-color: gray;
        }
        #frame {
            min-height: 400px;
            min-width: 260px;
            margin-left: -100px;
    
        }
        #body{
            min-width: 400px
        }
        #body .toolbar {
            border: 2px silver solid;
            padding: 10px;
            flex-shrink: 0; /* Prevent the toolbar from shrinking */
            
        }
        #body #frame {
            margin-top: 10px;
            flex: 1; /* Allow the frame to take up the remaining space */
            overflow-y: auto; /* Allow scrolling if content overflows */
            margin-top: 200px;
            margin-left: 200px;
            padding: 10px;

           
            margin: 200px;
            border: 2px silver solid;
        }
        /* #body #frame *{
            margin-top: 400px;


        } */
        #Qr-frame-footer h6{
          display: none;
        }

        #Qr-frame-footer *{
            margin-right: 2px;
        }
        
    }
    
    /* QR-creator Area */



/* QR-creator Area */
.qr-fusion-container {
    display: flex;
    flex-direction: column;
    align-items: center;
   
}

.qr-fusion-header {
    
    display:flexbox;
    justify-content: flex-start;
    width: 100%;
   
    padding: 10px;
}

.qr-fusion-header button {
    margin: 0 5px;
    margin-top: 20px;
    padding: 10px 20px;
    cursor: pointer;
    width: 100px;
    border-radius: 5px;
    font-size: 15px;
    border: none;
    color: #2d3750;
    font-weight: 700;
    opacity: 0.9;
   
    /* color:#fff;
    background-color: var(--custom-color);
     */
}
.qr-fusion-header #qr-whatsapp-button {
width: 130px;
margin-right: 20px;
}

.qr-fusion-header button.active {
    /* border: 2px solid gray; */
    opacity: 1;
    background-color: #dae1e6 ;
   border-bottom: 1px solid dae1e6;
   color: #2d3750;
}
.qr-fusion-header button:hover {
   background-color:  #dae1e6;
   color:#2d3750;
   opacity: 1;
}
.qr-fusion-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    
}

.qr-fusion-left, .qr-fusion-right {
    width: 100%;
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: 20px;
    height: 400px; /* Ensure the right side div matches the height of the left div */
padding-top: 30px;
padding-bottom: 30px;
}

.qr-fusion-left input[type="text"],
.qr-fusion-left select {
    width: 90%;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
}

.qr-fusion-left .color-security-wrapper {
    width: 100px;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
   
}
#wifi-security{
width: 100px;
}

.qr-fusion-left label,
.qr-fusion-left #qr-color {
    display: inline-block;
    vertical-align: middle;
}

.qr-fusion-left .button-wrapper {
    width: 90%;
    display: flex;
  
    /* justify-content: space-between; */
    
}

.qr-fusion-left button {
    width: 150px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 10px;
    margin-left:5px;
    height: 50px;
    background-color: var(--custom-color);
    color: #fff;
    text-align: center;
    border: none;
    
   
}

#qr-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Fill the entire height */
   
}

.qr-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 2px dashed #ccc;
    color: #ccc;
    font-size: 18px;
    text-align: center;
}

#qr-thumbnail img {
    max-width: 100%;
    height: auto;
}
#qr-action-button{

 
       
}


#qr-action-button:hover{

}
/* Change background color on hover */
#qr-generate-button:hover {
   
}

/* Change background color after click (active state) */
#qr-generate-button:active {
    background-color: #237f4e;
    /* Add other necessary styles */
}
#textArea{
  
 width: 90%; 
}


#formattingul{

}
#formattingul li{
margin: 0;

    display: inline-block;
}




@media (min-width: 768px) {
    .qr-fusion-content {
        flex-direction: row;
    }
    
    .qr-fusion-left, .qr-fusion-right {
        width: 50%;
    }
}