/*webp to gif converter starts*/

    .InnobudsImgWebptoGif-container {  max-width: 800px; margin: 30px auto; padding: 20px; background: #f9f9f9; border-radius: 10px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); text-align: center; }
    .InnobudsImgWebptoGif-container h2 { margin-bottom: 16px; color: #333; }
    .InnobudsImgWebptoGif-dropzone { border: 2px dashed #f39c12; padding: 55px; margin-bottom: 16px; background: #fff; cursor: pointer; border-radius: 8px; transition: background 0.3s; }
    .InnobudsImgWebptoGif-dropzone:hover { background: #fff9f0; }
    .InnobudsImgWebptoGif-dropzone p { margin: 0; color: #555; font-size: 16px; }
    #InnobudsImgWebptoGifDropZone p{text-align: center !important;}
    .InnobudsImgWebptoGif-dropzone input { display: none; }
    .InnobudsImgWebptoGif-preview img { width: 100%; height: auto; max-height: 200px; object-fit: contain; border-radius: 6px; margin-bottom: 12px; border: 1px solid #ddd; }
    .InnobudsImgWebptoGifdownload-btn{background: #3c75cc !important;}
    .InnobudsImgWebptoGif-btn { display: inline-block; padding: 10px 18px; margin: 6px 4px 0; text-decoration: none; background: #f39c12; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 15px; transition: background 0.3s; }
    .InnobudsImgWebptoGif-btn:hover { background: #d98c0e; }
    .InnobudsImgWebptoGif-error { color: red; font-size: 14px; margin-top: 8px; }
    @media (max-width: 520px) { .InnobudsImgWebptoGif-container { padding: 16px; } .InnobudsImgWebptoGif-dropzone { padding: 50px; } }
    /*webp to gif ends*/
    /*webp to bmp starts*/

    .InnobudsImgWebptoBmp-container {  max-width: 800px; margin: 30px auto; padding: 20px; background: #f9f9f9; border-radius: 10px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); text-align: center; }
    .InnobudsImgWebptoBmp-container h2 { margin-bottom: 16px; color: #333; }
    .InnobudsImgWebptoBmp-dropzone { border: 2px dashed #f39c12; padding: 55px; margin-bottom: 16px; background: #fff; cursor: pointer; border-radius: 8px; transition: background 0.3s; }
    .InnobudsImgWebptoBmp-dropzone:hover { background: #fff9f0; }
    .InnobudsImgWebptoBmp-dropzone p { margin: 0; color: #555; font-size: 16px; }
    #InnobudsImgWebptoBmpDropZone p{text-align: center !important;}
    .InnobudsImgWebptoBmp-dropzone input { display: none; }
    .InnobudsImgWebptoBmp-preview img { width: 100%; height: auto; max-height: 200px; object-fit: contain; border-radius: 6px; margin-bottom: 12px; border: 1px solid #ddd; }
    .InnobudsImgWebptoBmpdownload-btn{background: #3c75cc !important;}
    .InnobudsImgWebptoBmp-btn { display: inline-block; padding: 10px 18px; margin: 6px 4px 0; text-decoration: none; background: #f39c12; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 15px; transition: background 0.3s; }
    .InnobudsImgWebptoBmp-btn:hover { background: #d98c0e; }
    .InnobudsImgWebptoBmp-error { color: red; font-size: 14px; margin-top: 8px; }
    @media (max-width: 520px) { .InnobudsImgWebptoBmp-container { padding: 16px; } .InnobudsImgWebptoBmp-dropzone { padding: 50px; } }
    /*webp to bmp ends*/
    /*webp to tiff starts*/

    .InnobudsImgWebptoTiff-container {
      
      max-width: 800px;
      margin: 30px auto;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 10px;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    .InnobudsImgWebptoTiff-container h2 {
      margin-bottom: 16px;
      color: #333;
    }
    .InnobudsImgWebptoTiff-dropzone {
      border: 2px dashed #f39c12;
      padding: 55px;
      margin-bottom: 16px;
      background: #fff;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.3s;
    }
    .InnobudsImgWebptoTiff-dropzone:hover {
      background: #fff9f0;
    }
    .InnobudsImgWebptoTiff-dropzone p {
      margin: 0;
      color: #555;
      font-size: 16px;
    }
    #InnobudsImgWebptoTiffDropZone p {
      text-align: center !important;
    }
    .InnobudsImgWebptoTiff-dropzone input {
      display: none;
    }
    .InnobudsImgWebptoTiff-preview img {
      width: 100%;
      height: auto;
      max-height: 200px;
      object-fit: contain;
      border-radius: 6px;
      margin-bottom: 12px;
      border: 1px solid #ddd;
    }
    .InnobudsImgWebptoTiffdownload-btn {
      background: #3c75cc !important;
    }
    .InnobudsImgWebptoTiff-btn {
      display: inline-block;
      padding: 10px 18px;
      margin: 6px 4px 0;
      text-decoration: none;
      background: #f39c12;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 15px;
      transition: background 0.3s;
    }
    .InnobudsImgWebptoTiff-btn:hover {
      background: #d98c0e;
    }
    .InnobudsImgWebptoTiff-error {
      color: red;
      font-size: 14px;
      margin-top: 8px;
    }
    @media (max-width: 520px) {
      .InnobudsImgWebptoTiff-container {
        padding: 16px;
      }
      .InnobudsImgWebptoTiff-dropzone {
        padding: 50px;
      }
    }
    /*webp to tiff ends*/
    /*webp to avif starts*/

    .InnobudsImgWebptoAvif-container {
      
      max-width: 800px;
      margin: 30px auto;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 10px;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    .InnobudsImgWebptoAvif-container h2 {
      margin-bottom: 16px;
      color: #333;
    }
    .InnobudsImgWebptoAvif-dropzone {
      border: 2px dashed #f39c12;
      padding: 55px;
      margin-bottom: 16px;
      background: #fff;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.3s;
    }
    .InnobudsImgWebptoAvif-dropzone:hover {
      background: #fff9f0;
    }
    .InnobudsImgWebptoAvif-dropzone p {
      margin: 0;
      color: #555;
      font-size: 16px;
    }
    #InnobudsImgWebptoAvifDropZone p {
      text-align: center !important;
    }
    .InnobudsImgWebptoAvif-dropzone input {
      display: none;
    }
    .InnobudsImgWebptoAvif-preview img {
      width: 100%;
      height: auto;
      max-height: 200px;
      object-fit: contain;
      border-radius: 6px;
      margin-bottom: 12px;
      border: 1px solid #ddd;
    }
    .InnobudsImgWebptoAvifdownload-btn {
      background: #3c75cc !important;
    }
    .InnobudsImgWebptoAvif-btn {
      display: inline-block;
      padding: 10px 18px;
      margin: 6px 4px 0;
      text-decoration: none;
      background: #f39c12;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 15px;
      transition: background 0.3s;
    }
    .InnobudsImgWebptoAvif-btn:hover {
      background: #d98c0e;
    }
    .InnobudsImgWebptoAvif-error {
      color: red;
      font-size: 14px;
      margin-top: 8px;
    }
    @media (max-width: 520px) {
      .InnobudsImgWebptoAvif-container {
        padding: 16px;
      }
      .InnobudsImgWebptoAvif-dropzone {
        padding: 50px;
      }
    }
    /*webp to avif ends*/
    /*webp to svg starts*/

    .InnobudsImgWebptoSvg-container {  max-width: 800px; margin: 30px auto; padding: 20px; background: #f9f9f9; border-radius: 10px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); text-align: center; }
    .InnobudsImgWebptoSvg-container h2 { margin-bottom: 16px; color: #333; }
    .InnobudsImgWebptoSvg-dropzone { border: 2px dashed #f39c12; padding: 55px; margin-bottom: 16px; background: #fff; cursor: pointer; border-radius: 8px; transition: background 0.3s; }
    .InnobudsImgWebptoSvg-dropzone:hover { background: #fff9f0; }
    .InnobudsImgWebptoSvg-dropzone p { margin: 0; color: #555; font-size: 16px; }
    #InnobudsImgWebptoSvgDropZone p{text-align: center !important;}
    .InnobudsImgWebptoSvg-dropzone input { display: none; }
    .InnobudsImgWebptoSvg-preview img { width: 100%; height: auto; max-height: 200px; object-fit: contain; border-radius: 6px; margin-bottom: 12px; border: 1px solid #ddd; }
    .InnobudsImgWebptoSvgdownload-btn{background: #3c75cc !important;}
    .InnobudsImgWebptoSvg-btn { display: inline-block; padding: 10px 18px; margin: 6px 4px 0; text-decoration: none; background: #f39c12; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 15px; transition: background 0.3s; }
    .InnobudsImgWebptoSvg-btn:hover { background: #d98c0e; }
    .InnobudsImgWebptoSvg-error { color: red; font-size: 14px; margin-top: 8px; }
    @media (max-width: 520px) { .InnobudsImgWebptoSvg-container { padding: 16px; } .InnobudsImgWebptoSvg-dropzone { padding: 50px; } }
    /*webp to svg ends*/


/*webp to pdf starts*/
.InnobudsImgWebpToPdf-container {
    
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.InnobudsImgWebpToPdf-dropzone {
    border: 2px dashed #e67e22;
    padding: 55px;
    margin-bottom: 16px;
    background: #fff;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s;
}

.InnobudsImgWebpToPdf-dropzone:hover {
    background: #fff7ef;
}

.InnobudsImgWebpToPdf-dropzone p {
    margin: 0;
    color: #555;
    font-size: 16px;
}

#InnobudsImgWebpToPdfDropZone p {
    text-align: center !important;
}

.InnobudsImgWebpToPdf-dropzone input {
    display: none;
}

.InnobudsImgWebpToPdf-preview img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
}

.InnobudsImgWebpToPdf-btn {
    display: inline-block;
    padding: 10px 18px;
    margin: 6px 4px 0;
    text-decoration: none;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.3s;
}

.InnobudsImgWebpToPdf-convert-btn {
    background: #e67e22 !important;
}

.InnobudsImgWebpToPdf-convert-btn:hover {
    background: #cf6f1c !important;
}

.InnobudsImgWebpToPdfdownload-btn {
    background: #27ae60 !important;
}

.InnobudsImgWebpToPdfdownload-btn:hover {
    background: #1e8f4d !important;
}

.InnobudsImgWebpToPdf-error {
    color: red;
    font-size: 14px;
    margin-top: 8px;
}

@media (max-width: 520px) {
    .InnobudsImgWebpToPdf-container {
        padding: 16px;
    }
    .InnobudsImgWebpToPdf-dropzone {
        padding: 50px;
    }
}
/*webp to pdf ends*/


/* webp to ascii starts */
.InnobudsImgWebpToAscii-container {
    
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.InnobudsImgWebpToAscii-container h2 {
    margin-bottom: 16px;
    color: #333;
}
.InnobudsImgWebpToAscii-dropzone {
    border: 2px dashed #f39c12;
    padding: 55px;
    margin-bottom: 16px;
    background: #fff;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s;
}
.InnobudsImgWebpToAscii-dropzone:hover {
    background: #fff9f0;
}
.InnobudsImgWebpToAscii-dropzone p {
    margin: 0;
    color: #555;
    font-size: 16px;
    text-align: center;
}
.InnobudsImgWebpToAscii-dropzone input { display:none; }

.InnobudsImgWebpToAscii-preview {
    width: 100%;
    max-height: 420px;
    overflow: auto;
    background: #111;
    color: #eee;
    padding: 12px;
    border-radius: 6px;
    margin-top: 12px;
    border: 1px solid #ddd;
    text-align: left;
}
.InnobudsImgWebpToAscii-preview pre {
    margin: 0;
    font-family: "Courier New", monospace;
    line-height: 1;
    white-space: pre;
    font-size: 8px;
}

.InnobudsImgWebpToAscii-controls {

    gap:10px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:12px;
}

.InnobudsImgWebpToAscii-btn {
    display:inline-block;
    padding:10px 18px;
    margin:6px 4px 0;
    background:#f39c12;
    color:#fff;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-size:15px;
    transition: background 0.3s;
}
.InnobudsImgWebpToAscii-btn:hover {
    background:#d98c0e;
}
.InnobudsImgWebpToAscii-download-btn {
    background:#3c75cc !important;
}

.InnobudsImgWebpToAscii-settings {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:14px;
    color:#333;
}
.InnobudsImgWebpToAscii-slider { width:240px; }

.InnobudsImgWebpToAscii-error {
    color:red;
    font-size:14px;
    margin-top:8px;
}

@media(max-width:520px){
    .InnobudsImgWebpToAscii-slider { width:160px; }
}
#InnobudsWebpDropZone p {text-align: center !important;}
/* webp to ascii ends */