/* ============================================================
      btf.css – Complete post‑upload UI styles for PowerPoint → PDF tool
      Extracted from allcss.css
      ============================================================ */

    /* ---------- Bootstrap 5 Grid & Utilities (required for layout) ---------- */
    :root {
      --bs-blue: #0d6efd;
      --bs-indigo: #6610f2;
      --bs-purple: #6f42c1;
      --bs-pink: #d63384;
      --bs-red: #dc3545;
      --bs-orange: #fd7e14;
      --bs-yellow: #ffc107;
      --bs-green: #198754;
      --bs-teal: #20c997;
      --bs-cyan: #0dcaf0;
      --bs-white: #fff;
      --bs-gray: #6c757d;
      --bs-gray-dark: #343a40;
      --bs-primary: #0d6efd;
      --bs-secondary: #6c757d;
      --bs-success: #198754;
      --bs-info: #0dcaf0;
      --bs-warning: #ffc107;
      --bs-danger: #dc3545;
      --bs-light: #f8f9fa;
      --bs-dark: #212529;
      --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    }

    *,
    ::after,
    ::before {
      box-sizing: border-box;
    }

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
      width: 100%;
      padding-right: var(--bs-gutter-x, .75rem);
      padding-left: var(--bs-gutter-x, .75rem);
      margin-right: auto;
      margin-left: auto
    }

    @media (min-width: 576px) {

      .container,
      .container-sm {
        max-width: 540px
      }
    }

    @media (min-width: 768px) {

      .container,
      .container-md,
      .container-sm {
        max-width: 720px
      }
    }

    @media (min-width: 992px) {

      .container,
      .container-lg,
      .container-md,
      .container-sm {
        max-width: 960px
      }
    }

    @media (min-width: 1200px) {

      .container,
      .container-lg,
      .container-md,
      .container-sm,
      .container-xl {
        max-width: 1140px
      }
    }

    @media (min-width: 1400px) {

      .container,
      .container-lg,
      .container-md,
      .container-sm,
      .container-xl,
      .container-xxl {
        max-width: 1320px
      }
    }

    main>.container:not(.mycont) {
      max-width: 100% !important;
      padding: 0 !important;
    }

    .row {
      --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(var(--bs-gutter-y) * -1);
      margin-right: calc(var(--bs-gutter-x) * -.5);
      margin-left: calc(var(--bs-gutter-x) * -.5);
    }

    .row>* {
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;
      padding-right: calc(var(--bs-gutter-x) * .5);
      padding-left: calc(var(--bs-gutter-x) * .5);
      margin-top: var(--bs-gutter-y);
    }

    .row .nav-tabs {
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;
      display: flex !important;
    }

    .col {
      flex: 1 0 0%;
    }

    .col-auto {
      flex: 0 0 auto;
      width: auto;
    }

    .col-12 {
      flex: 0 0 auto;
      width: 100%;
    }

    .col-md-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
    }

    .col-md-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
    }

    .col-md-12 {
      flex: 0 0 auto;
      width: 100%;
    }

    .p-0 {
      padding: 0 !important;
    }

    .m-3 {
      margin: 1rem !important;
    }

    .d-none {
      display: none !important;
    }

    .d-block {
      display: block !important;
    }

    .h-100 {
      height: 100% !important;
    }

    .w-100 {
      width: 100% !important;
    }

    .mb-20 {
      margin-bottom: 20px;
    }

    @media (max-width: 768px) {

      .col-md-4,
      .col-md-8 {
        width: 100%;
      }
    }

    /* ---------- Utility / Theme variables ---------- */
    :root {
      --main--color: #3e77b6;
      --bodyfontfamily: Arial, Helvetica, sans-serif;
      --nv-fallback-ff: Arial, Helvetica, sans-serif;
    }

    .neve-main {
      background: linear-gradient(to bottom, #ffffff 50%, #f9f9f9 100%);
    }

    .neve-main .container .row {
      background-color: #ffff !important;
      flex-wrap: nowrap !important;
    }

    @media (min-width: 960px) {
      .neve-main>.container>.row {
        flex-wrap: nowrap;
      }

      .pdftoword-option-list2,
      .jpgToPdf_list {
        width: 100%;
        cursor: pointer;
        display: flex;
        flex-wrap: column;
        margin-left: -4px;
        margin-right: -4px;
        padding: 0;
      }
    }

    /* ---------- Hide initial upload elements ---------- */
    .hide-content .tool__header,
    .hide-content .uploader,
    .hide-content .upload_ico,
    .hide-content .upload_title,
    .hide-content .upload-extra {
      display: none;
    }

    .hide-content .rendered_area,
    .hide-content .rendered_area2,
    .hide-content .rendered_area3,
    .hide-content .rendered_area4,
    .hide-content .rendered_area5,
    .hide-content .side-tools {
      display: flex;
    }

    /* ---------- Side tools (floating action buttons) ---------- */
    .side-tools {
      position: absolute;
      right: 3%;
      top: 1%;
      display: none;
      flex-direction: column;
      align-items: center;
      z-index: 999999;
    }

    .side-tools a {
      background: var(--main--color);
      padding: 9px 11px 11px;
      border-radius: 50%;
      display: block;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      margin-top: 15px;
    }

    .side-tools .dropdown-content {
      display: none !important;
    }

    .side-tools:hover .dropdown-content {
      display: block;
    }

    .signature__upload .moxie-shim {
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }


    .upload-box__upload .moxie-shim {
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }


    .side-tools .moxie-shim {
      width: 42px !important;
      height: 42px !important;
      top: 0 !important;
      left: 0 !important;
      position: absolute !important;
      z-index: 1 !important;
      pointer-events: auto !important;
    }

    #pickfiles {
      position: relative;
      /* z-index: 1; */
    }

    .side-tools:hover #pickfiles svg:nth-child(1) {
      display: none !important;
    }

    .side-tools:hover #pickfiles svg:nth-child(2) {
      display: block !important;
    }

    .is-menu-sidebar .navbar-toggle .icon-bar:nth-child(1) {
      transform: rotate(45deg);
      top: 5px
    }

    .lds-ellipsis div:nth-child(1) {
      left: 8px;
      animation: lds-ellipsis1 .6s infinite
    }

    #pickfiles svg:nth-child(2) {
      display: none !important;
      width: 20px !important;
    }

    .sidetools {
      position: fixed;
      right: 464px;
      display: none;
      flex-direction: column;
      z-index: 99;
      align-items: center;
    }

    @media (max-width: 1440px) {
      .sidetools {
        right: 404px;
      }
    }

    .sidetools .btn-icon,
    .sidetools .uploader.box .uploader__btn {
      margin-bottom: 8px;
    }

    .sidetools .mixFiles,
    .sidetools .order,
    .sidetools .orderPages {
      display: flex;
    }

    .sidetools .mixFiles svg:first-child,
    .sidetools .orderPages svg:first-child,
    .sidetools .order svg:first-child {
      display: none;
    }

    .sidetools .mixFiles.order--desc svg:first-child,
    .sidetools .mixFiles svg:nth-child(2),
    .sidetools .order.order--desc svg:first-child,
    .sidetools .orderPages.order--desc svg:first-child,
    .sidetools .orderPages svg:nth-child(2),
    .sidetools .order svg:nth-child(2) {
      display: block;
    }

    .sidetools .mixFiles.order--desc svg:nth-child(2),
    .sidetools .order.order--desc svg:nth-child(2),
    .sidetools .orderPages.order--desc svg:nth-child(2) {
      display: none;
    }

    .sidebar-active .sidetools {
      display: flex;
      right: 464px;
      background-size: 440px;
    }

    @media (max-width: 1440px) {
      .sidebar-active .sidetools {
        right: 324px;
      }
    }

    @media (max-width: 840px) {
      .sidebar-active .sidetools {
        right: 12px;
      }

      .sidebar-active .sidetools .uploader__extra {
        flex-direction: column;
        margin-top: 0;
      }

      .sidebar-active .tool--toggle .sidetools {
        right: 320px;
      }
    }

    .sidebar-active .tool--small .sidetools {
      right: 464px;
      background-size: 440px;
    }

    @media (max-width: 1440px) {
      .sidebar-active .tool--small .sidetools {
        right: 324px;
      }
    }

    @media (max-width: 840px) {
      .sidebar-active .tool--small .sidetools {
        right: 12px;
      }

      .sidebar-active .tool--small.tool--toggle .sidetools {
        right: 320px;
      }
    }

    /* ---------- Rendered Files Area ---------- */
    .rendered_area,
    .rendered_area2,
    .rendered_area3,
    .rendered_area4,
    .rendered_area5 {
      justify-content: center;
      padding-top: 8px;
      flex-wrap: wrap;
      display: none;
      padding-left: 10px;
    }

    .docs .file {
      width: 250px;
    }

    /* ---------- Individual file card ---------- */
    div.file {
      margin: 4px;
      width: auto;
      height: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: space-around;
      justify-content: center;
      position: relative;
      border: 1px solid transparent;
      background: #f6f6f8;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    }

    div.file:hover {
      background-color: #fff;
      transition: all 0.4s linear;
    }



    div.file:hover .file__canvas:after {
      opacity: 0.6;
    }

    @media(max-width:500px) {
      .container_fluids {
        width: calc(100% - 80px) !important
      }

      .file__act {
        display: flex !important
      }
    }


    div.file:hover .file__act {
      display: flex;
    }

    .file__act {
      top: 3px;
      right: 8px;
      position: absolute;
      display: none;
      z-index: 9;
    }


    .file_canv {
      margin: 20px;
      height: 250px;
      cursor: move;
      display: flex;
      align-items: center
    }

    .file_canv canvas:last-child {
      width: 100%;
      height: 100%;
      margin: 0
    }

    .file_canv canvas:nth-of-type(1) {
      width: 100%;
      height: 100%;
      /* margin-right: 40px */
    }

    .file_canv canvas:last-child {
      width: 100%;
      height: 100%;
      margin: 0
    }

    .file_canv canvas {
      box-shadow: 0 0 5px 2px rgba(0, 0, 0, .35)
    }

    .file_canv img {
      height: 100%;
      width: 100%
    }

    .file_canv {
      margin: 20px;
      height: 250px;
      cursor: move;
      display: flex;
      align-items: center
    }

    .file_inf {
      position: absolute;
      height: 32px;
      width: 100%;
      bottom: -5px;
      left: 0
    }

    .file_inf span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      font-size: 12px;
      line-height: 16px;
      padding: 6px 8px;
      border: 1px solid transparent;
      z-index: 99
    }


    .file-btn {
      padding: 3px;
      width: 24px;
      height: 24px;
      -ms-flex: 0 0 24px;
      flex: 0 0 24px;
      text-align: center;
      background: rgba(0, 0, 0, 0.1);
      background: #3e77b6;
      margin-left: 4px;
      z-index: 1030;
      border-radius: 100%;
      cursor: pointer;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    .file-btn,
    .file-btn:hover {
      -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
    }

    .file-btn:hover {
      background: #3e77b6;
    }

    .file-btn.rotate svg {
      padding-bottom: 1px;
    }

    .file-btn.rotate:hover g,
    .file-btn.rotate:hover path,
    .file-btn.rotate:hover polygon,
    .file-btn.rotate:hover svg {
      fill: #fff;
    }

    .file-btn.remove g,
    .file-btn.remove path,
    .file-btn.remove polygon,
    .file-btn.remove svg {
      fill: #383e45;
    }

    .file-btn.remove:hover {
      background: #3e77b6;
    }

    .file-btn.remove:hover g,
    .file-btn.remove:hover path,
    .file-btn.remove:hover polygon,
    .file-btn.remove:hover svg {
      fill: #fff;
    }

    .tool-watermarkimage .file-btn.rotate {
      display: none;
    }

    /* File canvas (preview) */
    .file__canvas {
      display: flex;
      position: relative;
      align-items: center;
    }


    .file__canvas:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35);
      opacity: 0.4;
      transition: opacity 0.3s ease-in-out;
      z-index: 0;
    }

    .file__canvas canvas {
      background-color: #fff;
      display: flex;
      position: relative;
      z-index: 1;
    }

    .file__canvas>div,
    .file__canvas canvas {
      background-position: 50%;
      background-repeat: no-repeat;
    }

    .file__canvas>div.pdf,
    .file__canvas canvas.pdf {
      background-image: url(/img/filetype/pdf.svg);
    }

    .file__canvas>div.pptx,
    .file__canvas canvas.pptx {
      background-image: url(/img/filetype/pptx.svg);
    }

    .file__canvas>div.ppt,
    .file__canvas canvas.ppt {
      background-image: url(/img/filetype/ppt.svg);
    }

    .file__canvas>div {
      height: 100%;
      width: 100%;
    }

    .file__canvas .image {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50%;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .file--img .file__canvas {
      width: 90%;
      height: 70%;
    }

    .file--img .file__canvas:after {
      display: none;
    }

    .file__canvas>div.password,
    .file__canvas canvas.password {
      background-image: url(/img/filetype/password.svg) !important;
    }

    .file__canvas>div.word,
    .file__canvas canvas.word {
      background-image: url(/img/filetype/word.svg);
    }

    .file__canvas>div.doc,
    .file__canvas canvas.doc {
      background-image: url(/img/filetype/doc.svg);
    }

    .file__canvas>div.docx,
    .file__canvas canvas.docx {
      background-image: url(/img/filetype/docx.svg);
    }

    .file__canvas>div.odg,
    .file__canvas>div.odp,
    .file__canvas>div.odt,
    .file__canvas canvas.odg,
    .file__canvas canvas.odp,
    .file__canvas canvas.odt {
      background-image: url(/img/filetype/odt.svg);
    }

    .file__canvas>div.image,
    .file__canvas canvas.image {
      background-image: url(/img/filetype/image.svg);
    }

    .file__canvas>div.excel,
    .file__canvas canvas.excel {
      background-image: url(/img/filetype/excel.svg);
    }

    .file__canvas>div.xls,
    .file__canvas canvas.xls {
      background-image: url(/img/filetype/xls.svg);
    }

    .file__canvas>div.xlsx,
    .file__canvas canvas.xlsx {
      background-image: url(/img/filetype/xlsx.svg);
    }

    .file__canvas>div.powerpoint,
    .file__canvas canvas.powerpoint {
      background-image: url(/img/filetype/powerpoint.svg);
    }

    .file__canvas>div.damaged,
    .file__canvas>div.error,
    .file__canvas canvas.damaged,
    .file__canvas canvas.error {
      background-image: url(/img/filetype/damaged.svg);
    }

    /* File info (name, size) */
    .file__info {
      position: absolute;
      height: 32px;
      width: 100%;
      bottom: 0;
      left: 0;
    }

    .file__info__name {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      line-height: 16px;
      padding: 6px 8px;
      border: 1px solid transparent;
      z-index: 99;
    }

    .file__info__size {
      display: none;
      user-select: none;
    }

    .file__info__size svg {
      margin-right: 3px;
    }

    .file__info__size__from {
      padding: 2px 4px;
      background: #aeaeb2;
      border-radius: 4px;
      color: #fff;
    }

    .file__info__size__to {
      padding: 2px 4px;
      background: #ff6a58;
      border-radius: 4px;
      color: #fff;
      margin-left: -2px;
    }

    .file__info:hover .file__info__name {
      background-color: #fff;
      border: 1px solid #ddd;
      position: absolute;
      left: 50%;
      right: 0;
      cursor: default;
      white-space: pre-wrap;
      overflow: visible;
      text-overflow: clip;
      width: max-content;
      transform: translateX(-50%);
    }

    .file__info:hover .file__info__size {
      margin-top: 22px;
    }

    /* File states */
    .file.selected .file__info:before {
      background: #4acd86 url(https://ilovepdf2.com/wp-content/themes/neve/assets/img/svg_icons/check-white.svg) no-repeat 50%;
      position: absolute;
      bottom: 8px;
      left: 4px;
      width: 22px;
      height: 22px;
      border-radius: 100%;
      border: 1px solid #1d9d58;
    }

    .file.unselected .image {
      opacity: 0.5;
    }

    .sortable-ghost {
      border-color: #3e77b6;
      border-style: dashed;
      box-shadow: inset 0 0 6px 0 rgba(0, 0, 0, 0.75);
    }

    .sortable-ghost>* {
      display: none;
    }

    .sortOn .file__act,
    .sortOn .tooltip:after,
    .sortOn .tooltip:before {
      display: none !important;
    }

    .sortOn .file:hover {
      background: #f6f6f8;
    }

    /* File preloader */
    .file__preload {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8) url(/img/svg_icons/preload.svg) 50% no-repeat;
    }

    /* File bullets (for page numbering) */
    .file__bullet {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      background: #3e77b6;
      box-shadow: 0 0 8px 2px #fff;
    }

    .file__bullet--top {
      top: 4px;
    }

    .file__bullet--middle {
      top: 50%;
      transform: translateY(-50%);
    }

    .file__bullet--bottom {
      bottom: 7px;
    }

    .file__bullet--left {
      left: 4px;
    }

    .file__bullet--center {
      left: 50%;
      transform: translateX(-50%);
    }

    .file__bullet--right {
      right: 4px;
    }

    .file__bullet--small.file__bullet--top {
      top: 0;
    }

    .file__bullet--small.file__bullet--bottom {
      bottom: 3px;
    }

    .file__bullet--small.file__bullet--left {
      left: 0;
    }

    .file__bullet--small.file__bullet--right {
      right: 0;
    }

    .file__bullet--big.file__bullet--top {
      top: 8px;
    }

    .file__bullet--big.file__bullet--bottom {
      bottom: 11px;
    }

    .file__bullet--big.file__bullet--left {
      left: 8px;
    }

    .file__bullet--big.file__bullet--right {
      right: 8px;
    }

    .file__bullet--center.file__bullet--middle {
      transform: translate(-50%, -50%);
    }

    /* ---------- Right Sidebar ---------- */
    .right-side,
    .left-side {
      min-height: 747px;
      height: 100vh;
      max-height: calc(100vh - 65px);
    }

    .left-side {
      text-align: center;
      max-height: unset;
      overflow: auto;
    }

    .actBtnShow .left-side {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
    }

    .right-side {
      transform: translateX(0px);
      transition: 0.3s all;
    }

    .sidebar-tool {
      display: block;
      background: #fff;
      height: 100%;
      box-sizing: border-box;
      border-left: 1px solid rgba(0, 0, 0, 0.2);
      padding: 0;
      flex: 0 0;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-content: center;
    }

    .sidebar-tool button {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      background: #3e77b6;
      padding: 5% 0%;
      font-size: 1.5rem;
      color: #fff;
      font-weight: 700;
    }

    .option-title {
      font-size: 24px;
      font-weight: 600;
      line-height: 34px;
      letter-spacing: 0;
      color: #383e45;
      margin-bottom: 0;
      text-transform: uppercase;
      text-align: center;
      padding: 21px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      position: relative;
      background-color: #fff;
    }

    /* OCR / option lists */
    .compress-option,
    .pdftoword-option {
      padding: 0;
    }

    .compress-option-list,
    .pdftoword-option-list {
      cursor: pointer;
      position: relative;
      display: flex;
      /* flex-wrap: wrap; */
      flex-direction: column !important;
    }

    .nav-item.compress-list-item,
    .nav-item.pdftoword-list-item,
    .nav-item.pdftojpg-list-item {
      text-align: left;
      padding: 22px 60px 22px 22px;
      border-bottom: 1px solid #c4c5c7;
      position: relative;
    }

    .compress-item-title,
    .pdftoword-item-title {
      color: #3e77b6;
    }

    .nav-item.compress-list-item:hover,
    .nav-item.compress-list-item.active,
    .nav-item.pdftoword-list-item:hover,
    .nav-item.pdftoword-list-item.active,
    .nav-item.pdftojpg-list-item:hover,
    .nav-item.pdftojpg-list-item.active {
      background: #f6f6f8;
    }

    .nav-item.compress-list-item.ocr-list-item.active:after {
      content: "";
      display: block;
      position: absolute;
      right: 8%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 30px;
      background: #4acd86 url(https://ilovepdf2.com/wp-content/themes/neve/assets/img/svg_icons/check-white.svg) no-repeat 50%;
      background-size: 50% !important;
      border-radius: 100%;
      border: 1px solid #1d9d58;
      z-index: 10;
    }

    .nav-item.pdftoword-list-item.active:after,
    .nav-item.pdftojpg-list-item.active:after {
      content: "";
      display: block;
      position: absolute;
      right: 8%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 30px;
      background: #4acd86 url(https://ilovepdf2.com/wp-content/themes/neve/assets/img/svg_icons/check-white.svg) no-repeat 50%;
      background-size: 50% !important;
      border-radius: 100%;
      border: 1px solid #1d9d58;
    }

    .pdftoword-item-icon {
      margin: 0 24px 0 0;
    }

    .nav-item.pdftojpg-list-item {
      display: flex;
      align-items: center;
    }

    .pdftoword-option2,
    .jpgToPdf_content,
    .rotate_all_content,
    .unlock_pdf_content,
    .protect_pdf_content,
    .padding_sidebar {
      padding: 16px 24px;
    }

    .pdftoword-title,
    .jpgToPdf_title,
    .protectPdf_content_title {
      font-size: 15px;
      font-weight: 500;
      color: #3e77b6;
      letter-spacing: .3px;
      line-height: 24px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .pdftoword-option-list2,
    .jpgToPdf_list {
      cursor: pointer;
      display: flex;
      margin-left: -4px;
      margin-right: -4px;
      padding: 0;
    }

    .pdftojpg-list-item2.active,
    .jpgToPdf__item.active,
    .jpgToPdf__item2.active,
    .option__image__item.active {
      color: #3e77b6;
      border: 2px solid #3e77b6;
    }

    .pdftojpg-list-item2,
    .jpgToPdf__item,
    .jpgToPdf__item2 {
      padding: 18px 28px;
      position: relative;
      flex: 1 1 auto;
      width: 50%;
      text-align: center;
      color: #7c7c80;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 6px;
      background: #f4f5f9;
      border-radius: 5px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
      border: 2px solid transparent;
    }

    .pdftojpg-list-item2:hover,
    .jpgToPdf__item:hover,
    .jpgToPdf__item2:hover {
      color: #626870;
      border: 2px solid #161616;
    }

    .jpgToPdf_item_title {
      font-weight: 500;
      color: #161616;
      letter-spacing: .3px;
      margin-top: 5px;
      margin-bottom: 0;
      line-height: 25px;
      color: #7c7c80;
    }

    .jpgToPdf__item.active .jpgToPdf_item_title,
    .jpgToPdf__item2.active .jpgToPdf_item_title,
    .option__image__item.active .option__image__item__title {
      color: #3e77b6;
    }

    .option__image__item.active g,
    .option__image__item.active path,
    .option__image__item.active svg {
      color: #3e77b6 !important;
    }

    .side-content--active {
      display: block;
      left: 0 !important;
    }

    .jpgToPdf__item,
    .jpgToPdf__item2 {
      align-items: center;
    }

    .jpgToPdf__item.active svg,
    .jpgToPdf__item2.active svg,
    .option__image__item.active svg {
      fill: #3e77b6 !important;
    }

    .jpgToPdf__item svg,
    .jpgToPdf__item2 svg,
    .option__image__item svg {
      fill: #969696 !important;
    }

    /* Sidebar content scroll */
    .side_content_scroll,
    .outer-tab-content {
      overflow-y: scroll;
      overflow-x: hidden;
      max-height: 400px;
    }

    .side_content_scroll:after {
      content: "";
      width: 100%;
      position: fixed;
      height: 140px;
      bottom: 0;
      background: linear-gradient(0deg, #fff, #fff 70%, rgba(255, 255, 255, 0.5) 95%, rgba(255, 255, 255, 0));
    }

    .outer-tab-content:after,
    .outer-tab-content2:after,
    .outer-tab-content3:after {
      content: "";
      width: 100%;
      position: fixed;
      height: 140px;
      bottom: 0;
      background: linear-gradient(0deg, #fff, #fff 70%, rgba(255, 255, 255, 0.5) 95%, rgba(255, 255, 255, 0));
    }

    .outer-tab-content2 {
      overflow-y: scroll;
      overflow-x: hidden;
      max-height: 340px;
      padding: 35px 20px;
    }

    .outer-tab-content3 {
      overflow-y: scroll;
      overflow-x: hidden;
      max-height: 450px;
      padding: 35px 20px;
    }

    .outer-tab-content2.tab-content>.active {
      padding: 0;
    }

    .side_content--active {
      max-height: 420px !important;
      overflow: scroll !important;
      overflow-x: hidden !important;
    }

    .side_content_scroll,
    .outer-tab-content {
      overflow-y: hidden;
      overflow-x: hidden;
      max-height: max-content;
    }

    /* ---------- Sidebar footer (download + process) ---------- */
    .sidebar-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      border-bottom: 1px solid #c6c6c6;
      padding: 10px 0;
      /* background: #fff; */
      z-index: 10;
    }

    @media (max-width: 610px) {
      .sidebar-footer {
        /* position: relative; */
        padding-bottom: 101px;
        /* z-index: 10000; */
      }
    }

    #downloadbtn {
      display: none;
      text-align: center;
      background: #0ea154;
      padding: 15px 30px;
      font-size: 26px;
      color: #fff;
      font-weight: 700;
      margin-bottom: 10px;
    }

    #downloadbtn a {
      color: #fff;
      display: block;
    }

    button.action {
      width: 90%;
      margin-bottom: 30px;
      margin-top: 10px;
      display: flex;
      justify-content: center !important;
      align-items: center !important;
      align-content: center !important;
      flex-wrap: nowrap;
      flex-direction: row;
      box-shadow: 0 6px 8px 0 rgba(50, 50, 50, .3);
    }

    button.action2 {
      margin-top: 10px;
      margin-bottom: 30px;
      justify-content: space-evenly;
      align-items: center;
      align-content: center;
      flex-wrap: nowrap;
      flex-direction: row;
      box-shadow: 0 6px 8px 0 rgba(50, 50, 50, 0.3);
    }

    @media (max-width: 500px) {
      button.action {
        width: 94%;
        padding: 5% 0;
        font-size: 1.5rem;
      }
    }

    #processTaskTextBtn {
      margin-right: 5px;
      display: flex;
      text-align: center !important;
      justify-content: center !important;
    }

    .btn svg,
    button svg {
      display: inline-block;
      vertical-align: bottom;
      margin-right: 8px;
      margin-top: 4px;
    }

    /* ---------- File count badge ---------- */
    #filecount {
      background-color: #161616;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      z-index: 9999;
      border-radius: 100%;
      min-width: 26px;
      min-height: 26px;
      margin-top: -10px;
      margin-left: -10px;
      font-size: 11px;
      font-weight: 600;
      border: 3px solid #e5322d;
    }

    /* ---------- Uploader (post‑upload) ---------- */
    .downloader,
    .uploader {
      display: flex;
      flex-wrap: wrap;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 72px;
      text-align: center;
      position: relative;
    }

    @media (min-width: 500px) {

      .downloader,
      .uploader {
        display: table;
        z-index: 0;
      }
    }

    .downloader__btn,
    .uploader__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 80px;
      box-sizing: border-box;
      background: #3e77b6;
      padding: 24px 56px;
      font-weight: 600;
      font-size: 28px;
      line-height: 32px;
      vertical-align: middle;
      color: #fff;
      text-decoration: none;
      margin-bottom: 12px;
      transition: all 0.1s linear;
      border-radius: 8px;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.14);
      order: 1;
      max-width: 60vw;
    }

    @media (max-width: 501px) {

      .downloader__btn,
      .uploader__btn {
        width: 100%;
        max-width: inherit;
      }
    }

    .downloader__btn svg,
    .uploader__btn svg {
      display: none;
    }

    @media (max-width: 840px) {

      .downloader__btn,
      .uploader__btn {
        font-size: 22px;
        padding: 24px 32px;
      }
    }

    .downloader__btn.active,
    .uploader__btn.active {
      background-color: #3e77b6;
    }

    .downloader__btn.active:hover,
    .uploader__btn.active:hover {
      background-color: #161616;
    }

    .downloader__extra,
    .uploader__extra {
      order: 2;
      display: inline-flex;
      flex-direction: row;
      position: relative;
      margin-left: 0;
    }

    @media (min-width: 500px) {

      .downloader__extra,
      .uploader__extra {
        display: flex;
        flex-direction: column;
        margin-left: calc(100% + 12px);
        position: absolute;
        top: 0;
      }
    }

    .downloader__extra:first-child,
    .uploader__extra:first-child {
      margin-right: auto;
    }

    .downloader__extra__btn,
    .uploader__extra__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: all 0.1s linear;
      cursor: pointer;
      background: rgba(229, 50, 45, 0.6);
      margin: 6px 6px 8px;
    }

    @media (min-width: 500px) {

      .downloader__extra__btn,
      .uploader__extra__btn {
        margin: 0 0 8px;
      }
    }

    .downloader__extra__btn.active,
    .uploader__extra__btn.active {
      background: #3e77b6;
    }

    .downloader__extra__btn.active:hover,
    .uploader__extra__btn.active:hover {
      background-color: #161616;
    }

    .downloader__extra__btn img,
    .downloader__extra__btn svg,
    .uploader__extra__btn img,
    .uploader__extra__btn svg {
      max-width: 18px;
    }

    .downloader__extra__btn--black,
    .uploader__extra__btn--black {
      background: #626870;
      display: none;
    }

    .downloader__extra__btn--black.active,
    .uploader__extra__btn--black.active {
      background: #383e45;
    }

    .downloader__extra__btn--black.show,
    .uploader__extra__btn--black.show {
      display: flex;
    }

    .downloader__droptxt,
    .uploader__droptxt {
      flex: 0 0 100%;
    }

    #uploadDisk {
      display: none;
    }

    @media (max-width: 501px) {
      .uploader .uploader__extra {
        margin-left: auto;
      }

      .uploader__droptxt {
        display: none;
      }
    }

    /* Uploader box style (floating add button) */
    .uploader.box {
      flex-direction: column;
      margin-bottom: 4px;
    }

    .uploader.box .moxie-shim,
    .uploader.box .uploader__droptxt {
      display: none;
    }

    .uploader.box .uploader__btn {
      width: 42px;
      height: 42px;
      padding: 0;
      margin-bottom: 8px;
      min-height: inherit;
    }

    .uploader.box .uploader__btn svg {
      display: block;
    }

    .uploader.box .uploader__extra {
      position: relative;
      top: auto;
      align-items: center;
      margin: -46px 0 0;
      padding-top: 46px;
      z-index: -1;
    }

    .uploader.box .uploader__extra .uploader__extra__btn {
      background: #3e77b6;
    }

    .uploader.box #uploadDisk {
      display: flex;
    }

    .uploader.box .uploader__extra a {
      margin-top: -46px;
      transition: all 0.2s ease-in;
    }

    .uploader.box:hover .uploader__extra {
      z-index: 0;
    }

    .uploader.box {
      display: flex;
    }

    .uploader.box:hover .uploader__extra a {
      margin-top: 0;
    }

    .uploader.box #filecount {
      background-color: #161616;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      z-index: 2;
      border-radius: 100%;
      min-width: 26px;
      min-height: 20px;
      margin-top: -12px;
      margin-left: -12px;
      font-size: 11px;
      font-weight: 600;
      border: 3px solid #3e77b6;
      z-index: 9999;
    }

    @media (max-width: 840px) {
      .uploader.box .uploader__btn {
        width: 32px;
        height: 32px;
      }

      .uploader.box .uploader__extra {
        margin-top: -32px;
        padding-top: 32px;
      }

      .uploader.box .uploader__extra a {
        margin-top: -36px;
      }

      .uploader.box .uploader__extra .btn-icon,
      .uploader.box .uploader__extra .uploader__btn {
        height: 28px;
        width: 28px;
      }

      .uploader.box #filecount {
        min-width: 22px;
        min-height: 22px;
        margin-top: -8px;
        margin-left: -8px;
        font-size: 11px;
        line-height: 9px;
        border: 1px solid #3e77b6;
      }
    }

    /* ---------- Up‑online (Drive / Dropbox buttons) ---------- */
    .up-online {
      float: right;
      display: flex;
      flex-direction: column;
      margin-left: 5px;
      gap: 8px;
      z-index: 9999999999999;
      display: block;
      position: relative;
    }

    .ubload_online_button {
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent !important;
      width: 35px;
      height: 35px;
      cursor: pointer;
    }

    .btn-loader {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.8);
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }

    .btn-loader.active {
      display: flex;
    }

    .btn-loader .spinner-border {
      width: 16px;
      height: 16px;
      border-width: 2px;
    }

    /* ---------- Mobile sidebar toggle ---------- */

    @media (max-width: 768px) {

      .col-md-4.p-0.show {
        position: fixed;
        right: 0;
        width: 100%;
        height: 100%;
        transform: translate(450px);
        transition: 0.3s all;
        z-index: 99;
      }

      .col-md-4.p-0.show.toggleSidebar {
        transform: translateX(0px);
      }

      .sidebar-tool {
        height: 100vh !important;
      }

      .option-title {
        padding: 7px 14px !important;
      }

      .pdftoword-option-list2,
      .jpgToPdf_list {
        width: 100%;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        margin-left: -4px;
        margin-right: -4px;
        padding: 0;
      }
    }



    .upl__extra {
      -ms-flex-order: 2;
      order: 2;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-direction: row;
      flex-direction: row;
      position: relative;
      margin-left: 0
    }


    @media (min-width: 500px) {
      .upl__extra {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: calc(100% + 12px);
        position: absolute;
        top: 0
      }
    }

    .upl__extra__btn {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      color: #fff;
      -webkit-transition: all .1s linear;
      -o-transition: all .1s linear;
      transition: all .1s linear;
      cursor: pointer;
      background: #3e77b6;
      margin: 6px 6px 8px;
      opacity: .4;
      pointer-events: none
    }

    @media (min-width: 500px) {
      .upl__extra__btn {
        margin: 2px 0 4px
      }
    }

    .upl__extra__btn:hover {
      background-color: #3e77b6;
      color: #fff
    }

    .upl__extra__btn:active {
      background-color: #3e77b6;
      color: #fff
    }

    .upl__extra__btn.active {
      background: #3e77b6;
      opacity: 1;
      pointer-events: auto
    }

    .upl__extra__btn.active:hover {
      background-color: #3e77b6
    }

    .upl__extra__btn svg {
      max-width: 18px !important;
      max-height: 18px !important;
      color: white;
    }

    @media (min-width: 500px) {
      .upl__extra:nth-child(3) {
        margin-left: calc(100% + 12px)
      }
    }

    .uploader__droptxt {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      font-size: 14px
    }

    #uploadDisk {
      display: none
    }

    @media (max-width: 501px) {
      .uploader .upl__extra {
        margin-left: auto
      }

      .uploader__droptxt {
        display: none
      }
    }

    .upl.box {
      -ms-flex-direction: column;
      flex-direction: column;
      margin-bottom: 4px
    }

    .upl.box .moxie-shim,
    .upl.box .uploader__droptxt {
      display: none
    }

    .upl.box .upl___box {
      min-width: 0;
      border-radius: 100%;
      background: #3e77b6;
      color: #fff;
      text-decoration: none;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      width: 40px !important;
      height: 40px !important;
      padding: 0;
      margin-bottom: 8px;
      min-height: inherit;
      position: relative;
      z-index: 1001;
    }

    .upl.box .upl___box:hover {
      -webkit-box-shadow: 0 1px 26px 0 rgba(0, 0, 0, .14);
      box-shadow: 0 1px 26px 0 rgba(0, 0, 0, .14);
      background: #3e77b6
    }

    .upl.box .upl___box:hover path,
    .upl.box .upl___box:hover svg {
      fill: #fff
    }

    .upl.box .upl___box:active {
      color: #fff;
      background: #3e77b6
    }

    .upl.box .upl___box:active path,
    .upl.box .upl___box:active svg {
      fill: #fff
    }

    .upl.box .upl___box path,
    .upl.box .upl___box svg {
      fill: #fff
    }

    .upl.box .upl___box span {
      display: none
    }

    .upl.box .upl__extra {
      position: relative;
      top: auto;
      -ms-flex-align: center;
      align-items: center;
      margin: -46px 0 0;
      padding-top: 50px;
      z-index: -1
    }

    .upl.box #uploadDisk {
      display: -ms-flexbox;
      display: flex
    }

    .upl.box .upl__extra a {
      padding: 0;
      display: flex;
      margin-top: -46px;
      -webkit-transition: all .2s ease-in;
      -o-transition: all .2s ease-in;
      transition: all .2s ease-in
    }

    .upl.box:hover .upl__extra {
      z-index: 0
    }

    .upl.box {
      display: -ms-flexbox;
      display: flex
    }

    .upl.box:hover .upl__extra a {
      margin-top: 0
    }

    .upl.box #file__count {
      background-color: #3e77b6;
      color: #fff;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      position: absolute;
      z-index: 9999;
      border-radius: 100%;
      min-width: 26px;
      min-height: 20px;
      margin-top: -8px;
      margin-left: -8px;
      font-size: 11px;
      line-height: 20px;
      font-weight: 600;
      border: 3px solid #000
    }

    @media (max-width: 840px) {
      .upl.box .upl___box {
        width: 32px;
        height: 32px
      }

      .upl.box .upl__extra {
        margin-top: -32px;
        padding-top: 32px
      }

      .upl.box .upl__extra a {
        margin-top: -36px
      }

      .upl.box .upl__extra .btn-icon {
        height: 28px;
        width: 28px
      }

      .upl.box #file__count {
        min-width: 22px;
        min-height: 22px;
        margin-top: -8px;
        margin-left: -8px;
        font-size: 11px;
        line-height: 9px;
        border: 1px solid #3e77b6
      }
    }

    .moxie-shim {
      width: 100% !important
    }

    @media (max-width: 840px) {
      .auth *> {
        width: 100%
      }
    }

    .upl__extra {
      opacity: 0;
      pointer-events: none;
      z-index: 5;
      position: relative;
    }

    .upl.box:hover .upl__extra {
      opacity: 1 !important;
      pointer-events: auto;
      z-index: 999;
      position: relative;
    }



    .upl.box {
      z-index: 10;
      position: relative;
      overflow: visible !important;
    }


    /* Ensure the Drive icon itself is at the top when hovered */
    #gdrive_file_selector,
    #dropbox_file_selector {
      position: relative;
      z-index: 1000;
      width: 36px !important;
      color: white;
      height: 36px !important;
    }



    @media only screen and (max-width: 600px) {
      #settingsToogle {
        width: 36px;
        height: 36px;
        background-color: transparent !important;
      }

      .btn-icon--white path,
      .btn-icon--white svg {
        fill: #3e77b6;
      }

      .side-tools {
        right: 7% !important;
      }

      .upl.box .upl__extra {
        margin-top: -20px !important;
        flex-direction: column !important;
      }

      .upl.box .upl__extra a {
        margin: 10px 0 !important;
      }

      .upl.box .upl__extra a {
        margin: 10px 0 !important;
      }

      #pickfiles svg:nth-child(1) {
        width: 30px !important;
        height: 30px !important;
      }


      .uploader {
        flex-wrap: nowrap !important;
        flex-direction: row-reverse !important;
        width: 70% !important;
      }

      .upl.box .upl___box {
        width: 40px !important;
        height: 40px !important;
      }

      #pickfiles svg {
        width: 30px !important;
        height: 30px !important;
      }

      .upl.box .upl__extra .btn-icon {
        width: 36px !important;
        height: 36px !important;
      }

      .upl__extra__btn svg {
        max-width: 30px !important;
      }

      #pickfiles svg:nth-child(1) {
        width: 30px !important;
        height: 30px !important;
      }

      #pickfiles svg:nth-child(2) {
        width: 30px !important;
        width: 30px !important;
      }

      .hide-content .side-tools {
        display: flex !important;
        gap: 13px !important;
      }

    }


    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @media only screen and (max-width: 600px) {
      .side-tools {
        right: 7% !important;
      }

      .upl.box .upl__extra {
        margin-top: -20px !important;
        flex-direction: column !important;
      }

      .upl.box .upl__extra a {
        margin: 10px 0 !important;
      }

      .uploader {
        flex-wrap: nowrap !important;
        flex-direction: row-reverse !important;
        width: 70% !important;
      }

      .upl.box .upl__extra .btn-icon {
        width: 36px !important;
        height: 36px !important;
      }

      .upl__extra__btn svg {
        max-width: 30px !important;
      }

      .hide-content .side-tools {
        display: flex !important;
        gap: 13px !important;
      }
    }

    /* ---------- Miscellaneous utilities ---------- */
    .p-0.col-md-8.hide-content {
      position: relative !important;
    }

    #left-side,
    #body-wrap {
      min-height: 100px;
    }

    .moxie-shim {
      width: 85% !important;
    }

    .drive-save-button {
      margin: 10px 10px !important;
      width: 16% !important;
    }

    /* Tooltip overrides */
    .tooltip-inner {
      max-width: 200px;
      color: #fff;
      background-color: #000;
      border-radius: 4px;
      padding: 8px;
    }

    .tooltip-inner {
      min-width: 300px;
      background-color: #262626;
    }

    /* Loader */
    .myloader {
      border: 5px solid #f3f3f3;
      border-radius: 50%;
      border-top: 5px solid #3498db;
      width: 100px;
      height: 100px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      position: absolute;
      top: 40%;
      left: 40%;
      z-index: 999;
      transform: translate(-50%, -50%);
      display: none;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* ---------- Range / page utilities (for split/extract) ---------- */
    .divrange {
      width: 57%;
      height: 25px;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: center;
      justify-content: space-between;
      align-items: center;
    }

    .divrange2 {
      width: 57%;
      height: 25px;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: center;
      justify-content: center;
      align-items: center;
    }

    .range__to {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url(../img/svg_icons/three-dots.svg);
      z-index: 99999;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .range__to2 {
      width: 15px;
      height: 15px;
      background: url(../img/svg_icons/three-dots.svg);
      z-index: 99999;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 0 4px;
    }

    /* ---------- Responsive adjustments ---------- */
    @media only screen and (max-width:768px) {
      .col-md-4.p-0.show {
        position: fixed;
        right: 0;
        width: 100%;
        height: 100%;
        transform: translate(450px);
        transition: .3s all;
        z-index: 99
      }

      #settingsToogle {
        display: block;
        padding: 0
      }

      #settingsToogle svg {
        fill: #3e77b6 !important
      }

      .item_content p {
        font-size: 11px !important;
        padding: 0 10px !important
      }

      .hexagone h3 {
        font-size: 22px
      }
    }


    #settingsToogle:not(.actives) svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    #settingsToogle:not(.actives) i svg {
      display: none !important
    }

    #settingsToogle.actives svg {
      display: none !important
    }

    #settingsToogle.actives i svg {
      background-color: white;
      fill: #3e77b6 !important;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      padding: 3px;
      display: block !important
    }

    #settingsToogle {
      display: none;
    }

    @media (max-width: 768px) {
      #settingsToogle {
        display: -ms-inline-flexbox;
        display: inline-flex;

      }
    }

    #settingsToogle {
      display: none
    }

    @media (max-width: 840px) {
      #settingsToogle {
        display: -ms-inline-flexbox;
        display: inline-flex
      }
    }

    #settingsToogle {
      z-index: 5;
      position: relative;
    }

    @media only screen and (min-width: 970px) {
      [data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        left: 2px !important;
        max-width: 970px !important;
      }
    }

    @media only screen and (max-width: 969px) {
      [data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        left: 2px !important;
        transform: translateX(1%) !important;
        max-width: 728px !important;
      }
    }

    @media only screen and (max-width: 727px) {
      [data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        max-width: 727px !important;
        width: 99% !important;
        min-width: 468px !important;
        max-height: 100px !important;
        background: #fafafa;
        text-align: center !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
      }
    }

    @media only screen and (max-width: 467px) {
      [data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        max-width: 467px !important;
        width: 99% !important;
        min-width: 320px !important;
        max-height: 100px !important;
        background: #fafafa;
        text-align: center !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
      }
    }

    @media (max-width: 1027px) {

      .pdftoword-option-list2,
      .jpgToPdf_list {
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        margin-left: -4px;
        margin-right: -4px;
        padding: 0;
      }
    }

    @media (max-width: 600px) {
      div.file {
        max-width: 218px;
      }

      .tool__header h1 {
        font-size: 2rem !important;
        line-height: 36px !important;
      }
    }

    @media (max-width: 768px) {
      div[data-aa-adunit="/21722279357/970x90_Sticky_OB_ilovepdf"] {
        z-index: 99999 !important;
      }

      .col-md-4.p-0.show {
        top: 0 !important;
        height: 100vh !important;
        z-index: 99999 !important;
      }

      .sidebar-tool {
        height: 100vh !important;
      }

      .option-title {
        padding: 7px 14px !important;
      }

      .item_content p {
        font-size: 11px !important;
        padding: 0 10px !important
      }

      .hexagone h3 {
        font-size: 22px
      }
    }


    /* ============================================================
      End of btf.css
      ============================================================ */


    .nav-item.compress-list-item.active:after,
    .nav-item.pdftoword-list-item.active:after,
    .nav-item.pdftojpg-list-item.active:after {
      content: "";
      display: block;
      position: absolute;
      right: 8%;
      top: 50%;
      transform: translate(-50%, -50%)
    }

    .nav-item.compress-list-item.active:after,
    .nav-item.pdftoword-list-item.active:after,
    .nav-item.pdftojpg-list-item.active:after {
      color: #fff;
      width: 30px;
      height: 30px;
      background: #4acd86 url(https://ilovepdf2.com/wp-content/themes/neve/assets/img/svg_icons/check-white.svg) no-repeat 50%;
      background-size: 50% !important;
      border-radius: 100%;
      text-align: center;
      line-height: 18px;
      background-size: 11px;
      border: 1px solid #1d9d58
    }


    .option__select__item {
      border-bottom: 1px solid #aeaeb2 !important;
      padding: 22px 60px 22px 22px !important;
      cursor: pointer;
      position: relative;
    }

    .nav-item {
      padding: 16px;
      position: relative;
      border: 0;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      text-align: center;
      border-bottom: 1px solid #c4c5c7;
      border-right: 1px solid #c4c5c7;
      color: #7c7c80;
      cursor: pointer;
    }

    .upl.box .upl___box svg {
      display: block;
      height: 30px !important;
    }

    .upl___box {
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      min-height: 80px;
      min-width: 330px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 24px 48px;
      font-weight: 500;
      font-size: 24px;
      background: #3e77b6;
      line-height: 28px;
      vertical-align: middle;
      color: #fff !important;
      text-decoration: none;
      margin-bottom: 12px;
      -webkit-transition: background-color .1s linear;
      -o-transition: background-color .1s linear;
      transition: background-color .1s linear;
      border: 0;
      border-radius: 12px;
      -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      -ms-flex-order: 1;
      order: 1;
      max-width: 60vw;
    }

    .tooltip {
      opacity: 1;
      position: relative;
    }



    #turnstile-container {
      margin-left: auto;
      margin-right: auto;
      width: 301px;
    }

    .jpgToPdf_content .form__group .input {
      width: 100% !important;
      padding: 10px;
    }

    .input,
    input,
    select,
    textarea {
      background-color: #fff;
      border: 1px solid #aeaeb2;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 400;
      color: #333;
      line-height: 1.33;
      height: 42px;
      width: 100%;
      box-shadow: inset 1px 1px 3px 0 hsla(210, 2%, 49%, 0.2);
    }

    .split-range-content {
      padding: 16px 24px;
    }

    .form__group--inline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }


    .btn-group-toggle>.btn-group>.btn input[type="checkbox"],
    .btn-group-toggle>.btn-group>.btn input[type="radio"],
    .btn-group-toggle>.btn input[type="checkbox"],
    .btn-group-toggle>.btn input[type="radio"] {
      position: absolute;
      clip: rect(0, 0, 0, 0);
      pointer-events: none;
    }

    .checkbox [type="checkbox"]+label {
      display: -ms-flexbox;
      display: flex;
      text-align: left;
      align-items: flex-start;
      position: relative;
    }

    .checkbox [type="checkbox"]:checked,
    .checkbox [type="checkbox"]:not(:checked) {
      width: 0;
      height: 0;
      position: absolute;
      left: -9999px;
    }

    .checkbox [type="checkbox"]:checked+label:before,
    .checkbox [type="checkbox"]:not(:checked)+label:before {
      -webkit-transition: background-color 0.12s;
      content: "";
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      border: 1px solid #7c7c80;
      border-radius: 4px;
      background: #fff;
      margin-right: 12px;
      display: block;
    }

    .checkbox [type="checkbox"]:checked+label:after,
    .checkbox [type="checkbox"]:not(:checked)+label:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 24px;
      height: 24px;
      -ms-flex: 0 0 24px;
      flex: 0 0 24px;
      font-size: 16px;
      line-height: 16px;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
      background-image: url(https://ilovepdf2.com/wp-content/themes/neve/assets/img/svg_icons/check-done.svg);
      background-position: 50%;
      background-repeat: no-repeat;
    }

    .checkbox [type="checkbox"]:not(:checked)+label:after {
      opacity: 0;
      transform: scale(0);
    }

    .receiver__setting .checkbox [type="checkbox"]+label {
      font-weight: 500;
      font-size: 15px;
      -ms-flex-align: center;
      align-items: center;
    }

    .receiver__setting .checkbox [type="checkbox"]+label svg {
      margin-right: 12px;
      margin-left: 12px;
      width: 24px;
    }



    input {
      border: 1px solid #707078;
      border-radius: 4px;
      line-height: 20px;
      font-size: 16px;
      font-weight: 400;
      color: #47474f;
      height: 44px;
      padding: 4px 12px;
      box-shadow: none;
    }


    .ocr-div {
      padding: 15px;
    }



    canvas.excel {
      background-image: url(https://ilovepdf2.com/wp-content/uploads/2023/06/excel.svg)
    }

    canvas.docx {
      background-image: url(https://ilovepdf2.com/wp-content/uploads/2023/06/docx.svg)
    }

    canvas.powerpoint {
      background-image: url(https://ilovepdf2.com/wp-content/uploads/2023/06/powerpoint.svg)
    }

    canvas.json {
      background-image: url(https://ilovepdf2.com/wp-content/uploads/2023/06/json.svg)
    }

    canvas.xml {
      background-image: url(https://ilovepdf2.com/wp-content/uploads/2023/06/xml.svg)
    }

    canvas.yaml {
      background-image: url(https://ilovepdf2.com/wp-content/uploads/2023/06/yaml.svg)
    }

    canvas.psd {
      background-image: url(https://ilovepdf2.com/wp-content/uploads/2023/11/psd.svg)
    }

    canvas.excel,
    canvas.docx,
    canvas.powerpoint,
    canvas.json,
    canvas.xml,
    canvas.psd,
    canvas.yaml {
      background-repeat: no-repeat;
      background-size: 30% 50%;
      background-position: center
    }



    .lds-heart2 {
      display: block;
      position: relative;
      width: 80px;
      height: 80px;
      transform: rotate(45deg) translate(-50%, -50%);
      transform-origin: 40px 40px;
      width: 170px;
      height: 170px;
      position: absolute;
      top: 50%;
      left: 40%;
      z-index: 999
    }


    .lds-heart2 span {
      display: block;
      transform: rotate(316deg);
      background: #dd2e44;
      color: #fff;
      position: absolute;
      top: 22px
    }

    .lds-heart2 div {
      top: 60px;
      left: 60px;
      position: absolute;
      width: 50px;
      height: 50px;
      background: #dd2e44;
      animation: lds-heart 1.2s infinite cubic-bezier(.215, .61, .355, 1)
    }

    .lds-heart2 div:after,
    .lds-heart2 div:before {
      content: " ";
      position: absolute;
      display: block;
      width: 50px;
      height: 50px;
      background: #dd2e44
    }

    .lds-heart2 div:before {
      left: -24px;
      border-radius: 50% 0 0 50%
    }

    .lds-heart2 div:after {
      top: -24px;
      border-radius: 50% 50% 0 0
    }

    @keyframes lds-heart {
      0% {
        transform: scale(.95)
      }

      5% {
        transform: scale(1.1)
      }

      39% {
        transform: scale(.85)
      }

      45% {
        transform: scale(1)
      }

      60% {
        transform: scale(.95)
      }

      100% {
        transform: scale(.9)
      }
    }


    .divloader-wrapper {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      background: #8a8a8a80;
      width: 100%;
      height: 100%;
      z-index: 100;
      background: rgb(154 154 154/50%);
      backdrop-filter: saturate(180%) blur(2px)
    }

    .mynotice {
      display: block;
      position: relative;
      width: 80px;
      height: 80px;
      width: 100%;
      height: auto;
      position: absolute;
      top: 14%;
      left: 0;
      z-index: 999;
      background: #000000bd;
      color: white;
      padding: 10px;
    }

    .mynotice p {
      font-size: 1.5em;
      margin: 0;
    }

    .mynotice svg {}

    .mynotice i {}

    .mynotice a:nth-child(2) {
      display: block;
      color: #dd2e44;
      text-align: center;
      background: #fff;
      width: auto;
      border-radius: 10px;
      max-width: 60%;
      margin-left: auto;
      padding: 6px;
      margin-right: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
      flex-wrap: nowrap;
      flex-direction: row;
    }

    .mynotice img {
      max-width: 33px;
    }

    @media screen and (max-width: 768px) {
      .mynotice a {

        max-width: 86%;

      }
    }

    .drive-save-button {
      position: absolute;
      top: -10px;
      left: -10px;
    }


    .toast:not(.showing):not(.show) {
      opacity: 0
    }

    .toast.hide {
      display: none
    }

    .toast-container {
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      max-width: 100%;
      pointer-events: none
    }

    .toast-container>:not(:last-child) {
      margin-bottom: .75rem
    }

    .toast-header {
      display: flex;
      align-items: center;
      padding: .5rem .75rem;
      color: #6c757d;
      background-color: rgba(255, 255, 255, .85);
      background-clip: padding-box;
      border-bottom: 1px solid rgba(0, 0, 0, .05);
      border-top-left-radius: calc(.25rem - 1px);
      border-top-right-radius: calc(.25rem - 1px)
    }

    .toast-header .btn-close {
      margin-right: -.375rem;
      margin-left: .75rem
    }

    .toast-body {
      padding: .75rem;
      word-wrap: break-word
    }

    #toast-container {
      position: fixed;
      top: 20px;
      left: 0;
      z-index: 9999
    }

    .toast {
      position: relative;
      display: block;
      background-color: #d9534f;
      color: #fff;
      padding: 10px;
      margin: 0 10px 10px 0;
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .2);
      transition: transform .2s ease-in-out;
      transform: translateX(-400px)
    }

    .toast.show {
      transform: translateX(0)
    }

    body.process-run .toastr {
      display: none !important;
    }

    .neve-main .container .row {
      flex-wrap: nowrap !important;
    }

    .row {
      --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(var(--bs-gutter-y) * -1);
      margin-right: calc(var(--bs-gutter-x) * -.5);
      margin-left: calc(var(--bs-gutter-x) * -.5);
    }

    .info {
      margin-bottom: 20px;
      border-radius: 2px;
      text-align: left;
      background-position: 12px;
      background-repeat: no-repeat;
      padding: 24px;
      color: #383e45;
      background-color: #d9edf7;
      border-radius: 8px;
    }

    .info {
      color: #383e45 !important;
    }

    .merge_side_content {
      padding: 16px 24px;
    }

    .option__actions {
      display: flex !important;
      justify-content: center !important;
      flex-direction: row-reverse !important
    }

    .option__actions .option__btn {
      width: 150px !important;
      margin: 0 10px !important
    }

    .option__panel__content {
      padding: 16px 24px;
    }

    .option__label__title,
    .option__title {
      font-weight: 500;
      color: #33333b;
      margin-bottom: 8px;
    }


    .option__actions {
      display: flex !important;
      justify-content: center !important;
      flex-direction: row-reverse !important;
    }

    .sidebar-tool button.option__btn {
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      background: #3e77b6;
      padding: 0 !important;
      font-size: 16px !important;
      color: #fff;
      font-weight: 700;
    }

    .option__btn svg {
      width: 21px;
      height: 21px;
      fill: #fff;
      margin: 0;
    }

    .btn svg,
    button svg {
      display: inline-block;
      vertical-align: bottom;
      margin-right: 8px;
      margin-top: 4px;
    }

    .compression-type {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      column-gap: 20px;
      row-gap: 20px;
    }

    .compression-type label {
      min-width: 70px;
      text-align: center;
    }

    .compression-type label input {
      height: 25px;
    }

    .compression-wrapper {
      padding: 10px 22px !important;
    }

    .compression-type-heading {
      margin-bottom: 8px;
    }

    .tool__header {
      width: 100%;
    }

    .file-input-wrapper {
      position: relative;
      margin: 20px 0;
      display: flex;
      justify-content: center;
    }

    .file-input {
      display: none;
      /* Hide the default file input */
    }

    .custom-file-upload {
      border: 2px solid #3e77b6;
      border-radius: 50px;
      padding: 15px 30px;
      background-color: #3e77b6;
      color: white;
      font-size: 18px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
      display: inline-block;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 23px;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      min-height: 80px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: #3e77b6;
      padding: 24px 56px;
      font-weight: 600;
      font-size: 28px;
      line-height: 32px;
      vertical-align: middle;
      color: #fff;
      text-decoration: none;
      margin-bottom: 12px;
      -webkit-transition: all .1s linear;
      -o-transition: all .1s linear;
      transition: all .1s linear;
      border-radius: 8px;
      -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      -ms-flex-order: 1;
      order: 1;
      max-width: 60vw;
    }

    .custom-file-upload:hover {
      background-color: #0056b3;
      border-color: #0056b3;
    }

    .custom-file-upload:active {
      background-color: #004494;
      border-color: #004494;
    }

    .button {
      background-color: #3e77b6;
      color: white;
      border: none;
      padding: 10px 39px;
      border-radius: 55px;
      cursor: pointer;
      font-size: 19px;
      display: none;
      margin-top: 10px;
      margin: 10px auto;
    }

    .controls-button {
      background-color: #0ea154;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      border-radius: 50px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 10px;
      background-color: #0c6de4;
    }

    .controls-button:hover {
      font-weight: bold;
    }

    #preview-container {
      position: relative;
      display: none;
      width: 100%;
      max-height: 400px;
      margin-top: 20px;
      overflow: auto;
      overflow: hidden !important;
    }

    .preview-image {
      max-width: 100%;
      max-height: 400px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .processed-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      z-index: 3;
    }

    /* Overlay to apply blur effect */
    #spinner-overlay {
      display: none;
      /* Initially hidden */
      position: fixed;
      /* Cover entire viewport */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      /* Semi-transparent background */
      backdrop-filter: blur(1px);
      /* Apply blur effect */
      z-index: 1000;
      /* Ensure it appears above other content */
    }

    /* Spinner style */
    #spinner {
      display: none;
      /* Initially hidden */
      width: 100%;
      /* Adjust size as needed */
      height: 100%;
      background-image: url("https://ilovepdf2.com/wp-content/themes/neve/aa.gif");
      /* Your magical effect GIF */
      background-size: cover;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1001;
      /* Ensure it appears above the overlay */
    }


    .error {
      color: red;
      margin-top: 10px;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .controls {
      display: none;
      margin-top: 10px;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .buttons-container {
      display: flex;
      margin-top: 10px;
      justify-content: center;
      column-gap: 18px;

    }


    .plane-background {
      position: absolute;
      top: -100%;
      /* Start off-screen from the top */
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      /* White background color */
      z-index: 2;
      /* Ensure it is above the original image but below the processed image */
      transition: top 1s ease-in-out;
      /* Transition for sliding effect */

      /* Adding grid pattern on top of the white background */
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0 0,
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0 0,
        #ffffff;
      /* White background color as the final layer */
      background-size: 20px 20px;
      /* Size of each grid cell */
      background-repeat: repeat;
    }

    .processed-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      z-index: 3;
      /* Ensure it is above the plane background */
    }


    .controls-button {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 10px;
    }

    .controls-button:hover {
      background-color: #218838;
    }

    .hidden {
      display: none;
    }

    #change-bg-button {

      margin-bottom: 10px;
      width: 200px;

    }

    /* Modal styles */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      /* Semi-transparent background */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 5;
      /* Ensure modal is above other elements */
    }

    .modal.hidden {
      display: none;
    }

    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      position: relative;
      max-width: 500px;
      width: 100%;
    }

    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }

    .close-button:hover {
      color: red;
    }

    #change-bg-wrapper {

      top: 18%;
      left: 67%;
      /* Adjust this value to position the button and content properly */

      z-index: 4;
      /* Ensure it is above other elements */
      display: flex;
      flex-direction: column;
      align-items: baseline;
      align-items: stretch;
      margin-left: 0;
      width: 100%;
      max-width: 350px;


    }

    .tabs {
      position: absolute;
      display: flex;
      padding-left: 0;
      column-gap: 20px;
      padding-top: 0;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-bottom: 5px;
    }

    .tab-button {
      background-color: #d1d1d1;
      border: none;

      padding: 8px 16px;
      cursor: pointer;

      margin-right: -1px;
      /* Add gap between tabs */

      transition: background-color 0.3s;
      border-radius: 40px;
    }

    .tab-button:hover {
      background-color: #575b61;
    }

    .tab-button.active {
      background-color: #0056b3;
      border-radius: 5px;
      /* Ensure the active tab also has rounded corners */
    }

    .tab-content {
      padding: 10px;
      border-radius: 0 5px 5px 5px;
      /* border: 1px solid #ddd; */
      width: 100%;
      /* Adjust width if necessary */
      box-sizing: border-box;
    }


    .tab-content:active {
      padding: 10px;
      border-radius: 0 5px 5px 5px;
      border: 1px solid #ddd;
      width: 100%;
      /* Adjust width if necessary */
      box-sizing: border-box;
    }

    .tab-content p {
      margin: 0;
    }

    .tab-content.active {
      display: block;
    }

    .hidden {
      display: none;
    }

    .tab-button.active {
      background-color: #a4a4a4;
    }

    #change-bg-content {
      padding: 5px;

    }

    .color-container {
      margin-left: auto;
      margin-right: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 324px;

      overflow-y: auto;
      /* Adds vertical scrollbar */
      padding: 0px;
      box-sizing: border-box;
      padding-top: 36px;
    }

    .color-box {
      width: calc(27% - -6px);
      /* 4 boxes per row with space in between */
      height: 58px;
      border-radius: 15px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.3s;
    }

    .color-box.none {
      background-color: #ffffff;
      /* Set to a neutral or transparent color */
      border: 2px solid #cccccc;
      /* Light border to distinguish */
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .color-box:hover {
      border-color: #000;
      /* Highlight border on hover */
    }

    .color-box.selected {
      border-color: #000;
      /* Highlight border for selected color */
    }

    #change-bg-content {
      position: relative;
    }

    #change-bg-content .tab-content {
      min-height: 100px;
      height: auto !important;
      max-height: 380px;
    }

    #change-bg-content .color-container {
      min-height: 100px;
      height: auto !important;
      max-height: 300px;
    }

    #close-button {
      position: absolute;

      right: 18px;
      background-color: #f65151;
      border: none;

      width: 25px;
      height: 32px;
      text-align: center;
      font-size: 21px;
      cursor: pointer;
    }

    #close-button:hover {
      background-color: #dc1919;
    }

    .color-box.gradient {
      background: linear-gradient(to right, #ff0000, #00ff00);
      /* Example gradient */
      border: 2px solid #cccccc;
      /* Light border to distinguish */
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gradient-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }

    .gradient-selector.hidden {
      display: none;
    }

    .gradient-box {
      width: 50px;
      height: 50px;
      border: 1px solid #cccccc;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #background-images-container123 {
      margin-left: auto;
      margin-right: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 324px;
      overflow-y: auto;
      padding: 0px;
      box-sizing: border-box;
      padding-top: 36px;
    }

    #background-images-box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
      /* Full width of the container */
      height: 100%;
      /* Full height of the container */
      padding: 0;
      box-sizing: border-box;
    }

    #background-images-box img,
    #background-images-box .none-option {
      width: calc(27% - -6px);
      height: 58px;
      border-radius: 15px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.3s;
    }

    #background-images-box img.selected,
    #background-images-box .none-option.selected {
      border: 3px solid blue;
      /* You can change the color and size as per your preference */
    }

    /* Style for the upload button */
    #custom-bg-upload {
      display: block;
      margin: auto;
      padding: 13px 22px;
      font-size: 17px;
      border: 2px solid #007bff;
      border-radius: 44px;
      background-color: #007bff;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
      max-width: 219px;
      margin-top: 95px;
      margin-bottom: 14px;
    }

    #custom-bg-upload:hover {
      background-color: #0056b3;
    }

    /* Style for the none button */
    .none-option2 {
      display: block;
      margin: 20px auto;
      padding: 5px 15px;
      font-size: 17px;
      border: 2px solid #ff0000;
      border-radius: 14px;
      background-color: #ff0000;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
      max-width: fit-content;

    }

    .none-option2:hover {
      background-color: #cc0000;
    }

    /* Hide the none option initially */
    .hidden {
      display: none;
    }

    /* Add this to your existing CSS */
    .no-grid {
      background: none;
      /* Remove the grid pattern */
    }

    #preview-box {

      top: 18%;

      width: 60px;
      /* Width of the preview box */
      height: 60px;
      /* Height of the preview box */
      border: 1px solid #ccc;
      background-size: cover;
      background-position: center;
      z-index: 4;
      /* Ensure it is above other elements */
      border-radius: 50px;
      border: 2px solid black;
      filter: none !important;
    }

    .flex-container {
      width: 80%;
      margin: 0 auto;
      height: 100%;
    }

    .cont1 {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .cont1 {
      width: 100%;
      padding-bottom: 60px;
    }

    .change-box {
      display: flex;
      flex-direction: row-reverse;
      margin-right: 69px;
      column-gap: 5px;
    }

    #zoom-in,
    #before-button,
    #after-button,
    #zoom-out {
      background-color: #dd2e44;
      color: #ffffff;
      border-radius: 10px;
      font-size: 20px;
      padding: 8px 20px;
    }

    #download-btn {
      width: 335px;
    }

    #bgColorPicker {
      width: 93px;
      position: relative;
      background-image: url("https://ilovepdf2.com/wp-content/themes/neve/Rainbow-gradient-fully-saturated.svg.png");
      background-size: cover;
      background-position: center;
      border: none;
      /* Optional: remove default border */
      padding: 28px !important;
      /* Optional: remove padding if needed */
      height: 61px;
      border-radius: 15px;

    }

    #bgColorPicker::-webkit-color-swatch {
      border: none;
      /* Remove border */
    }

    #done-btn {
      display: inline-block;
      /* Allows margin to work */
      padding: 12px 28px;
      /* Adjust padding as needed */
      font-size: 18px;
      /* Text size */
      text-align: center;
      /* Center text horizontally */
      color: #fff;
      /* Text color */
      background-color: #0c6de4;
      /* Background color */
      border: none;
      /* Removes default border */
      border-radius: 50px;
      /* Rounded corners */
      cursor: pointer;
      /* Pointer cursor on hover */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      /* Shadow effect */
      transition: background-color 0.3s, box-shadow 0.3s;
      /* Smooth transition */
      margin-top: 5px;
      margin-left: 35px;
    }

    #done-btn:hover {
      background-color: #0056b3;
      /* Darker background on hover */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      /* Enhanced shadow on hover */
    }

    #reset-btn {
      display: inline-block;
      /* Allows margin and padding to work */
      padding: 10px 20px;
      /* Adjust padding as needed */
      font-size: 18px;
      /* Text size */
      text-align: center;
      /* Center text horizontally */
      color: #333;
      /* Text color */
      background-color: #f0f0f0;
      /* Background color */
      border: 2px solid #ccc;
      /* Border color */
      border-radius: 50px;
      /* Rounded corners */
      cursor: pointer;
      /* Pointer cursor on hover */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      /* Shadow effect */
      transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
      /* Smooth transition */
      margin-left: 36px;
      margin-top: 10px;
      margin-bottom: 39px;
    }

    #reset-btn:hover {
      background-color: #e0e0e0;
      /* Darker background on hover */
      border-color: #bbb;
      /* Darker border on hover */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      /* Enhanced shadow on hover */
    }

    #reset-btn:active {
      background-color: #d0d0d0;
      /* Even darker background when clicked */
      border-color: #aaa;
      /* Even darker border when clicked */
    }

    #blurDiv {
      display: none;
      position: fixed;
      top: 67%;
      left: 72%;
      transform: translate(-50%, -50%);
      width: 300px;
      padding: 20px;
      background-color: white;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }


    #blur-bar,
    #remove-blur {
      display: none;
    }

    #blur-container {

      background-color: #f9f9f9;
      /* Background color for the container */
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      /* Add a subtle shadow */
      margin-top: 7px;
      border-radius: 23px;
      margin-left: 4px;
      margin-bottom: 10px;
    }

    .blur-header {
      display: flex;
      justify-content: flex-end;
      /* Align the close button to the right */
    }

    .close-button {
      font-size: 16px;
      cursor: pointer;
      color: #888;
    }

    .close-button:hover {
      color: #555;
      /* Darker color on hover */
    }

    #blur-button {
      width: 200px;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      border-radius: 50px;
      cursor: pointer;
      font-size: 16px;
      background-color: #0c6de4;
    }

    .blur-stuff {
      display: flex;
      align-items: center;
      gap: 5px;
      /* Space between the "FX" box and the button */
      margin-top: 10px;
    }

    .bl-box {
      height: 60px;
      width: 60px;
      font-family: Arial, sans-serif;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      color: black;
      border: 2px solid black;
      border-radius: 100px;
    }

    #blur-button:hover {

      font-weight: bold;
    }

    #bl-box:hover {
      background-color: #e0e0e0;
      /* Darker background color on hover */
      transform: scale(1.1);
      /* Slightly enlarge the box on hover */
      color: black;
      /* Text color on hover */
    }

    #preview-box:hover {
      background-color: #e0e0e0;
      /* Darker background color on hover */
      transform: scale(1.1);
      /* Slightly enlarge the box on hover */

    }

    #done-blur-button {
      height: 45px;
      display: inline-block;
      padding: 12px 28px;
      font-size: 18px;
      text-align: center;
      color: #fff;
      background-color: #0c6de4;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s, box-shadow 0.3s;
    }

    #done-blur-button:hover {
      background-color: #0056b3;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

    }

    #remove-blur-button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 18px;
      text-align: center;
      color: #333;
      background-color: #f0f0f0;
      border: 2px solid #ccc;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;

    }

    #remove-blur-button:hover {
      background-color: #e0e0e0;
      /* Darker background on hover */
      border-color: #bbb;
      /* Darker border on hover */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      /* Enhanced shadow on hover */
    }

    .hidden {
      display: none;
    }

    #remove-bg-button:hover {
      background-color: #1f4389;
      color: #ffffff;
      border-color: #1f4389;
    }


    .sub-options {
      margin-top: 18px;
      background: #f9fafc;
      display: none;
      animation: fadeIn .3s ease
    }

    .sub-options.show {
      display: block
    }

    .sub-options h4 {
      margin-bottom: 10px;
      font-size: 1rem;
      font-weight: 600;
      color: #202223;
      padding-left: 22px
    }

    .sub-options label {
      display: block;
      margin-bottom: 10px;
      font-size: .95rem;
      color: #333;
      cursor: pointer;
      text-align: left;
      margin-left: 20px;
      margin-bottom: 0
    }

    .sub-options input[type="radio"] {
      accent-color: #006eff;
      height: 14px;
      position: absolute;
      left: 0;
      width: 30px;
      top: 50%;
      transform: translate(0, -50%)
    }

    .abc1.active {
      background-color: #f6f6f8
    }

    .abc1 {
      background-color: #fff;
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center
    }

    .abc1.active:after {
      color: #fff;
      width: 30px;
      height: 30px;
      background: #4acd86 url(http://ilovepdf2.com/img/svg_icons/check-white.svg) no-repeat 50%;
      background-size: 50% !important;
      border-radius: 100%;
      text-align: center;
      line-height: 18px;
      background-size: 11px;
      border: 1px solid #1d9d58
    }

    .nav.nav-tabs .nav-link.active {
      /* border-color: #c4c5c7 #c4c5c7 #fff; */
    }

    .card .nav.nav-tabs .nav-link.active,
    .nav.nav-tabs .nav-link.active {
      background: #fff;
      /* font-weight: 700; */
    }

    .nav.nav-tabs .nav-link {
      border-top-width: 0px;
      border: 1px solid #c4c5c7;
      padding: 12px 24px;
      width: 100%;
    }

    .card .nav.nav-tabs .nav-link,
    .nav.nav-tabs .nav-link {
      font-size: 15px;
      font-weight: 500;
      background-color: none !important;
      letter-spacing: 0.3px;
      line-height: 24px;
      border-radius: 0;
      text-transform: uppercase;
      text-decoration: none;
      color: #161616;
      padding: 12px 24px;
      margin-bottom: 0;
      border-top-width: 3px;
      border-color: rgba(0, 0, 0, 0);
    }

    .nav.nav-tabs .nav-linking1.active:after,
    .nav.nav-tabs .nav-linking2.active:after {
      content: "";
      display: block;
      position: absolute;
      left: 8%;
      top: 20%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .nav.nav-tabs .nav-link.active:after {
      color: #fff;
      width: 18px;
      height: 18px;
      background: #4acd86 url(https://ilovepdf2.com/pt/img/svg_icons/check-white.svg) no-repeat 50%;
      border-radius: 100%;
      text-align: center;
      line-height: 18px;
      background-size: 11px;
      border: 1px solid #1d9d58;
    }



    .form__group__container .title4 {
      font-size: 15px;
      font-weight: 500;
      color: #3e77b6;
      letter-spacing: 0.3px;
      line-height: 24px;
      margin-bottom: 8px;
      width: 100%;
    }


    .form__group__container .form__group {
      margin-bottom: 12px;
      margin-top: 12px;
    }

    .form__group .option.input {
      width: 84px;
    }

    .compress-option-div {
      padding: 10px;
      ;
    }


    .row .nav-tabs .nav-item .nav-link {
      display: block;
      background-color: white;
      justify-content: center;
      text-align: center;
      align-items: center;
      border-bottom: none;
    }


    .nav-item {
      position: relative;
      text-align: center;
      color: #7c7c80;
    }


    .adMore-btn {
      visibility: hidden;
    }

    select {
      width: 20em
    }

    .multiselect-dropdown {
      width: 100% !important
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }


    #myTabContent .tab-pane {
      display: none;
    }

    #myTabContent .tab-pane.active {
      display: block;
    }

    .tab-content>.active {
      border: none;
      /* padding: 35px 20px !important; */
    }

    .range-mode-title {
      color: #3e77b6;
      padding: 10px 0px;
      text-transform: uppercase;
    }

    .card .nav.nav-tabs,
    .nav.nav-tabs {
      border-color: #3e77b6 !important;
      -ms-flex-direction: row !important;
      flex-direction: row !important;
      margin: 0 !important;
    }

    .card .tab-content>.active,
    .tab-content>.active {
      background: #fff !important;
      padding: 0;
      border: none !important;
    }

    @media (min-width: 768px) {
      #myTab .nav-link {
        width: 100%;
        white-space: wrap;
        font-size: 14px;
        padding: 8px 10px;
      }
    }

    .nav.nav-tabs .nav-link.sbr-inner-btn.active {
      color: #3e77b6;
      border: 2px solid #3e77b6;
    }

    .nav.nav-tabs .nav-link.sbr-inner-btn {
      border: none;
      width: 100%;
      background: #f4f5f9;
      border-radius: 4px;
      padding: 18px 28px;
      font-weight: 500;
      border: 2px solid #c4c5c7;
    }

    .range__remove {
      position: absolute;
      right: 16px;
      top: 12px;
      cursor: pointer;
      padding: 3px;
      border-radius: 100%;
      background: #fff;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .range__remove:hover {
      background: #3e77b6;
      color: "#fff"
    }

    .ranges:hover .range__remove {
      display: flex;
    }


    .formarea {
      padding: 4px 0px;
      border-bottom: 1px solid #aeaeb2;
      position: relative;
    }

    svg:not(:root) {
      overflow-clip-margin: content-box;
      overflow: hidden;
    }

    .ico-drag {
      flex: 0 0 25px;
      width: 25px;
      height: 25px;
      background: url(https://ilovepdf2.com/pt/img/svg_icons/drag-up-down.svg) no-repeat 50%;
      cursor: move;
      margin: 12px;
    }


    .form__group__container {
      /* -ms-flex: 1 0 auto; */
      flex: 1 0 auto;

      padding: 35px 20px !important;
      display: flex;
      /* -ms-flex-wrap: wrap; */
      flex-wrap: wrap;

    }

    .form__group__container .title4 {
      font-size: 15px;
      font-weight: 500;
      color: #3e77b6;
      letter-spacing: 0.3px;
      line-height: 24px;
      margin-bottom: 8px;
      width: 100%;
    }

    .formarea.ranges .form__group--boxed {
      margin: 5px 20px 10px 0;
    }


    .form__group--boxed {
      border: 1px solid #aeaeb2;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      width: auto;
      border-radius: 4px;
      padding-left: 8px;
      overflow: hidden;
    }

    .form__group.form__group--boxed label {
      display: flex;
    }

    .ranges label {
      font-size: 12px;
      max-width: 120px;
    }

    .form__group--boxed label {
      margin-right: 12px;
      margin-bottom: 0;
    }

    .form__group .option.input {
      width: 84px;
    }

    .form__group--boxed .input,
    .form__group--boxed input,
    .form__group--boxed select,
    .form__group--inline input {
      margin-bottom: 0;
      border: 0;
      border-radius: 0;
      top: 0;
      box-shadow: inset 1px 1px 3px 0 hsla(210, 2%, 49%, 0.2);
    }

    .form__group__container .input,
    .form__group__container input,
    .form__group__container select {
      height: 42px;
      width: 100%;
      text-align: right;
      flex: 0 0 auto;
      padding: 8px 10px 8px 12px;
      position: relative;
    }

    input.option {
      cursor: inherit;
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
    }

    .input,
    input,
    select,
    textarea {
      background-color: #fff;
      border: 1px solid #aeaeb2;
      /* border-radius: 4px; */
      font-size: 15px;
      font-weight: 400;
      color: #333;
      line-height: 1.33;
      /* height: 42px;
        width: 100%; */
      /* box-shadow: inset 1px 1px 3px 0 hsla(210, 2%, 49%, 0.2); */
    }

    .split-range-content {
      padding: 16px 24px;
    }


    button.addRanges {
      min-width: 200px;
      padding: 18px 14px;
      text-shadow: none;
      border: none;
      text-decoration: none;
      border-radius: 4px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      transition: all 0.2s linear;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.14);
      font-size: 18px;
      font-weight: 500;
      line-height: 18px;
      letter-spacing: 0;
      cursor: pointer;
      background-color: #383e45;
      color: #fff;
    }

    .select-pages-content {
      padding: 16px 0px;
    }

    .form__group--inline input {
      height: 42px;
      width: 20%;
      text-align: right;
      flex: 0 0 auto;
      padding: 8px 10px 8px 12px;
      position: relative;
      border: 1px solid #9e9e9e;
      border-radius: 5px;
    }

    .sidebar-option {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      justify-content: flex-start
    }

    .neve-main .container .row {
      flex-basis: 50%
    }

    .navbar-nav {
      /* display: flex; */
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
    }

    .rm-option {
      border: none !important;
      padding-right: 20px !important;
    }

    .slidecontainer {
      width: 80%;
      margin: 20px auto;
      display: none;
    }

    .cust-slider {
      width: 100%;
      height: 13px;
      background: #d3d3d3;
      outline: none;
      opacity: .7;
      -webkit-transition: .2s;
      transition: opacity .2s;
      padding: 0;
    }



.btn--red, button--red {
      min-width: 200px;
      padding: 10px 24px 14px;
      text-shadow: none;
      border: none;
      text-decoration: none;
      border-radius: 4px;
      display: inline-flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      text-align: center;
      -webkit-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
      -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.14);
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.14);
      font-size: 18px;
      font-weight: 500;
      line-height: 18px;
      letter-spacing: 0;
      cursor: pointer;
      color: #fff;
      background-color: #3e77b6;
    }


    .myloader2 {
      border: 5px solid #f3f3f3;
      border-radius: 50%;
      border-top: 5px solid #3498db;
      width: 65px;
      height: 65px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      margin-top: 25px;
      margin-left: 10px;
      display: none
    }