/*
  Blazing Image Compressor CSS Stylesheet v1.0
  Author: Blazing Image Compressor
  Website: https://zipcompressor.stumbli.digital/
*/

/* Range Slider CSS */
  @media only screen and (max-width: 400px) {
.range-slider__progress {
    --start-end: calc(var(--thumb-size) / 10) !important;
  }
    .range-slider::before, .range-slider::after {
    --offset: calc(var(--thumb-size) / 10) !important;
    }
}
  
 .range-slider.grad {
    --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset;
    --progress-flll-shadow: var(--progress-shadow);
    --fill-color: linear-gradient(to right, LightCyan, var(--primary-color));
    --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3), -3px 9px 9px rgba(255, 255, 255, 0.33) inset, -1px 3px 2px rgba(255, 255, 255, 0.33) inset, 0 0 0 99px var(--primary-color) inset;
}
  
  .the-data.rangeslider {
  background: #fff;
}

  
  .the-data.rangeslider {
    border-radius: 5px;
    border: 2px dashed #000;
    padding: 15px;
    margin-bottom: 20px;
}
  

  .range-slider {
    width: 100% !important;
}
  
 .range-slider {
  --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15) inset;
  --progress-flll-shadow: var(--progress-shadow);
  --fill-color: linear-gradient(to right, LightCyan, var(--primary-color));
  --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3),
    -3px 9px 9px rgba(255, 255, 255, 0.33) inset,
    -1px 3px 2px rgba(255, 255, 255, 0.33) inset,
    0 0 0 99px var(--primary-color) inset; }
  .range-slider.grad input:hover {
    --thumb-transform: scale(1.2); }
  .range-slider.grad input:active {
    --thumb-shadow: inherit;
    --thumb-transform: scale(1); 
  }

.range-slider.flat {
  --thumb-size: 25px;
  --track-height: calc(var(--thumb-size) / 3);
  --progress-shadow: none;
  --progress-flll-shadow: none;
  --thumb-shadow: 0 0 0 7px var(--primary-color) inset, 0 0 0 99px white inset;
  --thumb-shadow-hover: 0 0 0 9px var(--primary-color) inset,
    0 0 0 99px white inset;
  --thumb-shadow-active: 0 0 0 13px var(--primary-color) inset; 
  }
 
.range-slider {
  --primary-color: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,72,0,1) 9%, rgba(255,175,0,1) 35%, rgba(112,255,0,1) 65%, rgba(0,255,167,1) 100%);
  --value-offset-y: var(--ticks-gap);
  --value-active-color: #000;
  --value-font: 700 12px/1 Arial;
  --fill-color: var(--primary-color);
  --progress-background: #eee;
  --progress-radius: 20px;
  --track-height: calc(var(--thumb-size) / 2);
  --min-max-font: 12px Arial;
  --min-max-opacity: 0.5;
  --min-max-x-offset: 10%;
  --thumb-size: 35px;
    padding: 3px 0px !important;
/*  --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 0 0 99px var(--thumb-color) inset;
  --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset
      var(--thumb-color), 
    0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0, 0, 0, 0.4);*/
  --thumb-shadow-hover: var(--thumb-shadow); 
  --ticks-thickness: 1px;
  --ticks-height: 5px;
  --ticks-gap: var(
    --ticks-height,
    0
  );
  --ticks-color: silver;
  --step: 1;
  --ticks-count: Calc(var(--max) - var(--min)) / var(--step);
  --maxTicksAllowed: 30;
  --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
  --x-step: Max(
    var(--step),
    var(--too-many-ticks) * (var(--max) - var(--min))
  );
  --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
  --tickIntervalPerc: calc(
    (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) *
      var(--tickEvery, 1)
  );
  --value-a: Clamp(
    var(--min),
    var(--value, 0),
    var(--max)
  );
  --value-b: var(--value, 0);
  --text-value-a: var(--text-value, "");
  --completed-a: calc(
    (var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100
  );
  --completed-b: calc(
    (var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100
  );
  --ca: Min(var(--completed-a), var(--completed-b));
  --cb: Max(var(--completed-a), var(--completed-b));
  --thumbs-too-close: Clamp(
    -1,
    1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001),
    1
  );
  --thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0));
  --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));
  display: inline-block;
  height: Max(var(--track-height), var(--thumb-size));
  background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
  background-size: var(--tickIntervalPerc) var(--ticks-height);
  background-position-x: calc( var(--thumb-size) / 2 - var(--ticks-thickness) / 2);
  background-position-y: var(--flip-y, bottom);
  padding-bottom: var(--flip-y, var(--ticks-gap));
  padding-top: calc(var(--flip-y) * var(--ticks-gap));
  position: relative;
  z-index: 1; }
  .range-slider[data-ticks-position="top"] {
    --flip-y: 1; }
  .range-slider::before, .range-slider::after {
    --offset: calc(var(--thumb-size) / 2);
    content: counter(x);
    display: var(--show-min-max, block);
    font: var(--min-max-font);
    position: absolute;
    bottom: var(--flip-y, -2.5ch);
    top: calc(-2.5ch * var(--flip-y));
    opacity: Clamp(0, var(--at-edge), var(--min-max-opacity));
    transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
    pointer-events: none; }
  .range-slider::before {
    --before: 1;
    --at-edge: var(--thumb-close-to-min);
    counter-reset: x var(--min);
    left: var(--offset); }
  .range-slider::after {
    --at-edge: var(--thumb-close-to-max);
    counter-reset: x var(--max);
    right: var(--offset); }
  .range-slider__values {
    position: relative;
    top: 50%;
    line-height: 0;
    text-align: justify;
    width: 100%;
    pointer-events: none;
    margin: 0 auto;
    z-index: 5; }
    .range-slider__values::after {
      content: "";
      width: 100%;
      display: inline-block;
      height: 0;
      background: red; }
  .range-slider__progress {
    --start-end: calc(var(--thumb-size) / 2);
    --clip-end: calc(100% - (var(--cb)) * 1%);
    --clip-start: calc(var(--ca) * 1%);
    --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
    position: absolute;
    left: var(--start-end);
    right: var(--start-end);
    top: calc( var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2);
    height: calc(var(--track-height));
    background: var(--progress-background, #eee);
    pointer-events: none;
    z-index: -1;
    border-radius: var(--progress-radius); }
    .range-slider__progress::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      clip-path: var(--clip);
      top: 0;
      bottom: 0;
      background: var(--fill-color, black);
      box-shadow: var(--progress-flll-shadow);
      z-index: 1;
      border-radius: inherit; }
    .range-slider__progress::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: var(--progress-shadow);
      pointer-events: none;
      border-radius: inherit; }
  .range-slider > input {
    -webkit-appearance: none;
    width: 100%;
    height: var(--thumb-size);
    margin: 0;
    position: absolute;
    left: 0;
    top: calc( 50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1)));
    cursor: -webkit-grab;
    cursor: grab;
    outline: none;
    background: none; }
    .range-slider > input:not(:only-of-type) {
      pointer-events: none; }
    .range-slider > input::-webkit-slider-thumb {
      appearance: none;
      height: var(--thumb-size);
      width: var(--thumb-size);
      transform: var(--thumb-transform);
      border-radius: var(--thumb-radius, 50%);
      background: var(--thumb-color);
      box-shadow: var(--thumb-shadow);
      border: none;
      pointer-events: auto;
      transition: 0.1s; }
    .range-slider > input::-moz-range-thumb {
      appearance: none;
      height: var(--thumb-size);
      width: var(--thumb-size);
      transform: var(--thumb-transform);
      border-radius: var(--thumb-radius, 50%);
      background: var(--thumb-color);
      box-shadow: var(--thumb-shadow);
      border: none;
      pointer-events: auto;
      transition: 0.1s; }
    .range-slider > input::-ms-thumb {
      appearance: none;
      height: var(--thumb-size);
      width: var(--thumb-size);
      transform: var(--thumb-transform);
      border-radius: var(--thumb-radius, 50%);
      background: var(--thumb-color);
      box-shadow: var(--thumb-shadow);
      border: none;
      pointer-events: auto;
      transition: 0.1s; }

    .range-slider > input:hover {
      --thumb-shadow: var(--thumb-shadow-hover); }
      .range-slider > input:hover + output {
        --value-background: var(--value-background-hover);
        --y-offset: -5px;
        color: var(--value-active-color);
        box-shadow: 0 0 0 3px var(--value-
        
        
        
        ); }
    .range-slider > input:active {
      --thumb-shadow: var(--thumb-shadow-active);
      cursor: grabbing;
      z-index: 2; }
      .range-slider > input:active + output {
        transition: 0s; }
    .range-slider > input:nth-of-type(1) {
      --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1); }
      .range-slider > input:nth-of-type(1) + output {
        --value: var(--value-a);
        --x-offset: calc(var(--completed-a) * -1%); }
        .range-slider > input:nth-of-type(1) + output:not(:only-of-type) {
          --flip: calc(var(--thumbs-too-close) * -1); }
        .range-slider > input:nth-of-type(1) + output::after {
          content: var(--prefix, "") var(--text-value-a) var(--suffix, ""); }
    .range-slider > input:nth-of-type(2) {
      --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1); }
      .range-slider > input:nth-of-type(2) + output {
        --value: var(--value-b); }
    .range-slider > input:only-of-type ~ .range-slider__progress {
      --clip-start: 0; }
  
    .range-slider > input + output {
    --flip: 0;
    --x-offset: calc(var(--completed-b) * -1%);
    --pos: calc( ((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100% );
    pointer-events: none;
    position: absolute;
    width: 36px;
    height: 36px;
    text-align: center;
    z-index: 5;
    background: var(--value-background);
    border-radius: 100px;
    padding: 5px 0px;
    left: var(--pos);
    transform: translate(var(--x-offset), calc( 150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));
    transition: all 0.12s ease-out, left 0s;
}

.range-slider > input + output::after {
content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
font: var(--value-font); }


.range-slider, label[dir="rtl"] .range-slider {
  width: Clamp(300px, 50vw, 800px);
  min-width: 200px; 
  }
/* Range Slider CSS End */

.page-item.active .page-link {
    color: #fff;
    background-color: #212121;
    border-color: #212121;
}
.page-link {
    color: #212121;
}

.page-link:hover {
    color: #000000;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 0%);
}

button.btn.btn-outline-ligh:hover {
    color: #565656;
}

 @media (max-width: 501px) {
div.dataTables_wrapper div.dataTables_length label {
    width: 100%;
}
   
   div.dataTables_wrapper div.dataTables_filter input {
    width: 100%;
}
   
  div#visitorTable_filter {
    text-align: left;
    margin-left: -14px;
}  
   }

.madewithlove {
    display: inline-block;
}
.madewithlove img {
    width: 18px;
}

.socialshare span {
    background: #00ffa7;
    color: #000;
    font-weight: 600;
    border: 1px solid black;
    font-size: 12px;
    line-height: 19px;
    width: 22px;
    height: 22px;
    text-align: center;
    border-radius: 100px;
    display: block;
    position: absolute;
    top: 0;
    margin-top: -12px;
    margin-left: 15px;
}

.socialshare a {
    border: 1px solid #000000;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    margin-right: 6px;
    display: inline-block;
    box-shadow: inset -3px -3px 0 #000;
    transition: 0.3s;
}

.socialshare a:hover {
    background: #00ffa7;
    color: #000;
    transition: 0.3s;
}

i.fa-brands.fa-facebook-f {
    margin-top: 10px;
    margin-left: 13px;
}

i.fa-brands.fa-twitter {
    margin-top: 10px;
    margin-left: 10px;
}

i.fa-brands.fa-linkedin-in {
    margin-top: 10px;
    margin-left: 12px;
}

i.fa-brands.fa-pinterest-p {
    margin-top: 11px;
    margin-left: 13px;
}

i.fa-brands.fa-whatsapp {
    margin-top: 10px;
    margin-left: 12px;
}

i.fa-regular.fa-envelope {
    margin-top: 10px;
    margin-left: 11px;
}

.background-gradient {
     height: 100px;
     margin-top: -68px;
     z-index: 99999999999;
     position: relative;
     margin-bottom: -22px;
     background: rgb(255,255,255);
     background: linear-gradient(180deg, rgb(3 3 3 / 0%) 0%, rgb(255 255 255 / 2%) 0%, rgb(255 255 255 / 72%) 35%, rgb(255 255 255) 67%, rgb(255 255 255) 100%);
}

select#image-quality {
    width: 200px;
}

input#submit-button {
    width: 200px;
}

.container.ad {
    padding: 10px;
}

 div#file-names {
     display: grid;
     grid-gap: 10px;
}
 .owl-carousel .owl-item img {
     display: inline-block !important;
}
 button.btn.btn-outline-dark:focus {
     outline: none !important;
     box-shadow: none !important;
}
 .btn-outline-dark:hover {
     color: #fff;
     background-color: #000000;
     border-color: #000000;
}
 .owl-carousel .owl-stage-outer {
     overflow: none !important;
}
 body::-webkit-scrollbar {
     width: 14px;
     background: #000;
}
 body::-webkit-scrollbar-track {
     box-shadow: inset 0 0 6px rgba(94, 94, 94, 0.3);
}
 body::-webkit-scrollbar-thumb {
     background-color: #fff;
     border-radius: 100px;
     outline: 0px solid #000;
     border: 4px solid #000;
}
 .compress1:before {
     background: url(/assets/images/check.png) no-repeat;
}
 a {
     color: #000000;
}
 .img-container {
     width: 100%;
    /* set the width */
     min-height: 100px;
     max-height: 400px;
     overflow: hidden;
    /* hide any overflow */
     margin-top: 20px;
}
 .img-container img {
     width: 100%;
     border-radius:5px;
     box-shadow: 1px 2px 4px -2px #00000069;
     filter: brightness(80%) grayscale(0%);
    /* set the image width to 100% */
     object-fit: cover;
    /* set the image to cover the container */
    ;
}
 .metadata {
     margin-bottom: 20px !important;
}
 .btn-primary.focus, .btn-primary:focus {
     color: #000 !important;
     background-color: #00ffa7 !important;
     border-color: #000000 !important;
     border: 1px solid !important;
     box-shadow: 4px 5px #000 !important;
     border-radius: 2px !important;
}
 @media (max-width: 769px) {
     .container {
         width: 92%;
    }
   
   .container.header {
    padding: 15px 15px !important;
}
   
     .h1, h1 {
         font-size: 2.2rem;
    }
     .alert-info {
         padding: 15px;
    }
     .item filesize {
         width: 144px;
         top: 43px;
    }
     .container {
         padding:25px 15px;
    }
     .owl-item .file-size {
         font-size: 28px;
         width: 140px;
         top: 40px;
    }
     .item filesize {
         font-size: 28px;
    }
     .owl-stage {
         height: 127px;
    }
     .compress1,.compress2 {
         font-size: 14px;
    }
     .compress1 {
         width: 50%;
    }
     .compress2 {
         width: 50%;
    }
     div#preview {
         cursor: pointer;
    }
     .metadata original {
         padding: 8px 10px;
    }
     compressed {
         padding: 8px 10px;
    }
     saved {
         padding: 8px 10px;
    }
     .metadata {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
    }
     .modal-dialog {
         margin: 1.5rem;
    }
     .col-md-6.footer button {
         margin-bottom: 17px !important;
    }
     .col-md-6.footer.d-flex.justify-content-end {
         display: flex !important;
         flex-wrap: wrap !important;
         justify-content: flex-start !important;
         padding: 0px !important;
    }
     .col-md-6.copyright {
         margin-bottom: 18px;
    }
     .alert.alert-info.alert-dismissible.fade.show.text-center {
         margin: 15px;
    }
     .container p br {
         display: none;
    }
}
 body {
     background: #f3f4f6;
     overflow-x: hidden;
     font-family:'Maven Pro', Verdana, Geneva, Tahoma, sans-serif !important;
}

 h1 {
     background: -webkit-linear-gradient(23deg, #000000, #b1b1b1);
     -webkit-mask-size: 100% 100%;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .close:focus, .close:hover {
     outline: none;
}

 hr {
     margin: 1rem 0;
     color: inherit;
     border: 0;
     border-top: 1px solid;
     opacity: .25;
}
 .container p {
     text-align: center;
     font-family:'Maven Pro', Verdana, Geneva, Tahoma, sans-serif !important;
}
 #progressbar {
    width: 500px;
    height: 28px;
    background-color: #00ffa7;
    border-radius: 5px;
    overflow: hidden;
    display: none;
    margin-top: 20px;
    padding: 3px;
}
 .progress-bar {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     color: #000;
     font-weight: 600;
     text-align: center;
     background-color: #007bff;
     transition: width .6s ease;
}
 button, select:focus {
     outline: 0 !Important;
}
 button, select {
     text-transform: none;
     padding: 12px;
     border-radius: 4px;
     background: #ffffff;
}
 select#image-quality {
     box-shadow: 4px 4px 0 #000;
}
 .btn-primary.disabled, .btn-primary:disabled {
     color: #000;
     background-color: #ffffff;
     border-color: #000000;
     border: 1px solid;
     box-shadow: 4px 5px #000;
     border-radius: 2px;
     cursor: pointer;
}
 .btn-primary.disabled, .btn-primary:disabled:hover {
     background: #00ffa7;
}
 .btn.disabled, .btn:disabled {
     opacity: 1;
}