/*Effects Sidebar Menu*/
.effects-menu-title, .filters-menu-title {
  font-size: 16px;
  font-weight: bold;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  user-select: none;
}

.effects-title-span, .filters-title-span {
  font-size: 16px;
  font-weight: bold;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#grayscaleMenu, #colormatrixMenu, #removeColorMenu, #brightnessMenu, #gammaMenu, #contrastMenu, #saturationMenu,
#vibranceMenu, #hueMenu, #noiseMenu, #pixelateMenu, #blurMenu, #blendColorMenu {
  width: 330px;
  box-shadow: 0px 10px 20px 5px rgba(0,0,0,0.3);
}

#removeColorLabel, #removeInputLabel, #brightnessLabel, #contrastLabel, #saturationLabel, #vibranceLabel,
#hueLabel, #noiseLabel, #pixelateLabel, #blurLabel, #blendColorModeLabel, #blendColorLabel, #blendInputLabel {
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
}

.sepiaDiv input[type="checkbox"],
.blackWhiteDiv input[type="checkbox"],
.brownieDiv input[type="checkbox"],
.vintageDiv input[type="checkbox"],
.kodachromeDiv input[type="checkbox"],
.technicolorDiv input[type="checkbox"],
.polaroidDiv input[type="checkbox"] {
  display: none;
}

.sepiaDiv .sepiaLabel,
.blackWhiteDiv .blackWhiteLabel,
.brownieDiv .brownieLabel,
.vintageDiv .vintageLabel,
.kodachromeDiv .kodachromeLabel,
.technicolorDiv .technicolorLabel,
.polaroidDiv .polaroidLabel {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none' viewBox='0 0 28 29'%3E%3Cpath fill='%23fff' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M20.65 22.3v-6.24c0-.38-.31-.68-.7-.68-.37 0-.68.3-.68.68v6.23c0 .38.3.68.69.68.38 0 .69-.3.69-.68ZM17.2 22.3l-.04-6.25a.67.67 0 1 0-1.34.01l.04 6.24a.67.67 0 1 0 1.34 0ZM12.37 16.07l.04 6.22c0 .38.3.68.67.68.37 0 .67-.3.67-.68l-.04-6.23c0-.38-.3-.68-.67-.68-.37 0-.67.31-.67.69Z'/%3E%3C/svg%3E"),auto;
  display: flex;
  align-items: center;
}

.sepiaDiv .sepiaLabel .sepia-label-text,
.blackWhiteDiv .blackWhiteLabel .blackWhite-label-text,
.brownieDiv .brownieLabel .brownie-label-text,
.vintageDiv .vintageLabel .vintage-label-text,
.kodachromeDiv .kodachromeLabel .kodachrome-label-text,
.technicolorDiv .technicolorLabel .technicolor-label-text,
.polaroidDiv .polaroidLabel .polaroid-label-text {
  margin-left: 10px;
  box-shadow: none;
  outline: none;
  transform: none;
}

.sepiaDiv .sepia-svg,
.blackWhiteDiv .blackWhite-svg,
.brownieDiv .brownie-svg,
.vintageDiv .vintage-svg,
.kodachromeDiv .kodachrome-svg,
.technicolorDiv .technicolor-svg,
.polaroidDiv .polaroid-svg {
  width: 20px;
  height: 20px;
}

.sepiaDiv .checkbox-box,
.blackWhiteDiv .checkbox-box,
.brownieDiv .checkbox-box,
.vintageDiv .checkbox-box,
.kodachromeDiv .checkbox-box,
.technicolorDiv .checkbox-box,
.polaroidDiv .checkbox-box {
  fill: #f0e5e5;
  stroke: #2260ff;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 0.6s ease-in;
}

.sepiaDiv .checkbox-tick,
.blackWhiteDiv .checkbox-tick,
.brownieDiv .checkbox-tick,
.vintageDiv .checkbox-tick,
.kodachromeDiv .checkbox-tick,
.technicolorDiv .checkbox-tick,
.polaroidDiv .checkbox-tick {
  stroke: #2260ff;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
  transition: stroke-dashoffset 0.6s ease-in;
}

.sepiaDiv input[type="checkbox"]:checked+.sepiaLabel .checkbox-box,
.blackWhiteDiv input[type="checkbox"]:checked+.blackWhiteLabel .checkbox-box,
.brownieDiv input[type="checkbox"]:checked+.brownieLabel .checkbox-box,
.vintageDiv input[type="checkbox"]:checked+.vintageLabel .checkbox-box,
.kodachromeDiv input[type="checkbox"]:checked+.kodachromeLabel .checkbox-box,
.technicolorDiv input[type="checkbox"]:checked+.technicolorLabel .checkbox-box,
.polaroidDiv input[type="checkbox"]:checked+.polaroidLabel .checkbox-box,

.sepiaDiv input[type="checkbox"]:checked+.sepiaLabel .checkbox-tick,
.blackWhiteDiv input[type="checkbox"]:checked+.blackWhiteLabel .checkbox-tick,
.brownieDiv input[type="checkbox"]:checked+.brownieLabel .checkbox-tick,
.vintageDiv input[type="checkbox"]:checked+.vintageLabel .checkbox-tick,
.kodachromeDiv input[type="checkbox"]:checked+.kodachromeLabel .checkbox-tick,
.technicolorDiv input[type="checkbox"]:checked+.technicolorLabel .checkbox-tick,
.polaroidDiv input[type="checkbox"]:checked+.polaroidLabel .checkbox-tick {
  stroke-dashoffset: 0;
}

.grayscaleDiv,
*:after,
.grayscaleDiv *:before,
.invertDiv,
*:after,
.invertDiv *:before,
.colormatrixDiv,
*:after,
.colormatrixDiv *:before,
.removecolorDiv,
*:after,
.removecolorDiv *:before,
.brightnessDiv,
*:after,
.brightnessDiv *:before,
.gammaDiv,
*:after,
.gammaDiv *:before,
.contrastDiv,
*:after,
.contrastDiv *:before,
.saturationDiv,
*:after,
.saturationDiv *:before,
.vibranceDiv,
*:after,
.vibranceDiv *:before,
.hueDiv,
*:after,
.hueDiv *:before,
.noiseDiv,
*:after,
.noiseDiv *:before,
.pixelateDiv,
*:after,
.pixelateDiv *:before,
.blurDiv,
*:after,
.blurDiv *:before,
.sharpenDiv,
*:after,
.sharpenDiv *:before,
.embossDiv,
*:after,
.embossDiv *:before,
.blendcolorDiv,
*:after,
.blendcolorDiv *:before,
.blendimageDiv,
*:after,
.blendimageDiv *:before {
  box-sizing: border-box;
}

.grayscaleDiv .grayscaleButton,
.invertDiv .invertButton,
.colormatrixDiv .colormatrixButton,
.removecolorDiv .removecolorButton,
.brightnessDiv .brightnessButton,
.gammaDiv .gammaButton,
.contrastDiv .contrastButton,
.saturationDiv .saturationButton,
.vibranceDiv .vibranceButton,
.hueDiv .hueButton,
.noiseDiv .noiseButton,
.pixelateDiv .pixelateButton,
.blurDiv .blurButton,
.sharpenDiv .sharpenButton,
.embossDiv .embossButton,
.blendcolorDiv .blendcolorButton,
.blendimageDiv .blendimageButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 330px;
  min-height: 48px;
  border-radius: 8px;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0.15s ease;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none' viewBox='0 0 28 29'%3E%3Cpath fill='%23fff' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M20.65 22.3v-6.24c0-.38-.31-.68-.7-.68-.37 0-.68.3-.68.68v6.23c0 .38.3.68.69.68.38 0 .69-.3.69-.68ZM17.2 22.3l-.04-6.25a.67.67 0 1 0-1.34.01l.04 6.24a.67.67 0 1 0 1.34 0ZM12.37 16.07l.04 6.22c0 .38.3.68.67.68.37 0 .67-.3.67-.68l-.04-6.23c0-.38-.3-.68-.67-.68-.37 0-.67.31-.67.69Z'/%3E%3C/svg%3E"),auto;
  position: relative;
}

.grayscaleDiv .grayscaleIcon,
.grayscaleDiv .grayscaleSpan,
.invertDiv .invertIcon,
.invertDiv .invertSpan,
.colormatrixDiv .colormatrixIcon,
.colormatrixDiv .colormatrixSpan,
.removecolorDiv .removecolorIcon,
.removecolorDiv .removecolorSpan,
.brightnessDiv .brightnessIcon,
.brightnessDiv .brightnessSpan,
.gammaDiv .gammaIcon,
.gammaDiv .gammaSpan,
.contrastDiv .contrastIcon,
.contrastDiv .contrastSpan,
.saturationDiv .saturationIcon,
.saturationDiv .saturationSpan,
.vibranceDiv .vibranceIcon,
.vibranceDiv .vibranceSpan,
.hueDiv .hueIcon,
.hueDiv .hueSpan,
.noiseDiv .noiseIcon,
.noiseDiv .noiseSpan,
.pixelateDiv .pixelateIcon,
.pixelateDiv .pixelateSpan,
.blurDiv .blurIcon,
.blurDiv .blurSpan,
.sharpenDiv .sharpenIcon,
.sharpenDiv .sharpenSpan,
.embossDiv .embossIcon,
.embossDiv .embossSpan,
.blendcolorDiv .blendcolorIcon,
.blendcolorDiv .blendcolorSpan,
.blendimageDiv .blendimageIcon,
.blendimageDiv .blendimageSpan {
  transition: 0.375s ease;
  color: #494949;
  font-weight: 400 !important;
}

.grayscaleDiv .grayscaleIcon svg,
.invertDiv .invertIcon svg,
.colormatrixDiv .colormatrixIcon svg,
.removecolorDiv .removecolorIcon svg,
.brightnessDiv .brightnessIcon svg,
.gammaDiv .gammaIcon svg,
.contrastDiv .contrastIcon svg,
.saturationDiv .saturationIcon svg,
.vibranceDiv .vibranceIcon svg,
.hueDiv .hueIcon svg,
.noiseDiv .noiseIcon svg,
.pixelateDiv .pixelateIcon svg,
.blurDiv .blurIcon svg,
.sharpenDiv .sharpenIcon svg,
.embossDiv .embossIcon svg,
.blendcolorDiv .blendcolorIcon svg,
.blendimageDiv .blendimageIcon svg {
  width: 33px;
  height: 33px;
  margin-top: 5px;
  margin-right: 10px;
}

.grayscaleDiv .grayscaleSpan,
.invertDiv .invertSpan,
.colormatrixDiv .colormatrixSpan,
.removecolorDiv .removecolorSpan,
.brightnessDiv .brightnessSpan,
.gammaDiv .gammaSpan,
.contrastDiv .contrastSpan,
.saturationDiv .saturationSpan,
.vibranceDiv .vibranceSpan,
.hueDiv .hueSpan,
.noiseDiv .noiseSpan,
.pixelateDiv .pixelateSpan,
.blurDiv .blurSpan,
.sharpenDiv .sharpenSpan,
.embossDiv .embossSpan,
.blendcolorDiv .blendcolorSpan,
.blendimageDiv .blendimageSpan {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
  font-size: 16px;
}

.grayscaleDiv .grayscaleCircle,
.invertDiv .invertCircle,
.colormatrixDiv .colormatrixCircle,
.removecolorDiv .removecolorCircle,
.brightnessDiv .brightnessCircle,
.gammaDiv .gammaCircle,
.contrastDiv .contrastCircle,
.saturationDiv .saturationCircle,
.vibranceDiv .vibranceCircle,
.hueDiv .hueCircle,
.noiseDiv .noiseCircle,
.pixelateDiv .pixelateCircle,
.blurDiv .blurCircle,
.sharpenDiv .sharpenCircle,
.embossDiv .embossCircle,
.blendcolorDiv .blendcolorCircle,
.blendimageDiv .blendimageCircle {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  top: 5px;
  right: 5px;
  left: auto;
  transition: 0.375s ease;
}

#invertRange,
.effectRangeInput,
#brightnessRange,
#contrastRange,
#saturationRange,
#vibranceRange,
#hueRange,
#noiseRange,
#pixelateRange,
#blurRange,
#blendImageRange {
  width: 100%;
}

#gammaRedRange,
#gammaGreenRange,
#gammaBlueRange {
  width: 75%;
}

#grayscaleCheckbox {
  display: none;
}

.effect-checkbox {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none' viewBox='0 0 28 29'%3E%3Cpath fill='%23fff' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M20.65 22.3v-6.24c0-.38-.31-.68-.7-.68-.37 0-.68.3-.68.68v6.23c0 .38.3.68.69.68.38 0 .69-.3.69-.68ZM17.2 22.3l-.04-6.25a.67.67 0 1 0-1.34.01l.04 6.24a.67.67 0 1 0 1.34 0ZM12.37 16.07l.04 6.22c0 .38.3.68.67.68.37 0 .67-.3.67-.68l-.04-6.23c0-.38-.3-.68-.67-.68-.37 0-.67.31-.67.69Z'/%3E%3C/svg%3E"),auto;
  display: inline-block;
  position: relative;
}

.effect-checkbox input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

.effect-checkmark {
  position: relative;
  height: 1.3em;
  width: 1.3em;
  border: 2px solid #2260ff;
  border-radius: 5px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.effect-checkbox input:hover+.effect-checkmark {
  border: 2px solid #2260ff;
}

.effect-checkbox input:checked+.effect-checkmark {
  box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);
  border: 2px solid #2260ff;
}

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

.effect-checkbox input:checked+.effect-checkmark:after {
  display: block;
}

.effect-checkbox .effect-checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #2260ff;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

#blendColorCheckbox {
  display: none;
}

/*Select listbox css------------------------------------------*/
#blendColorModeSelector {
  width: 115px;
  height: 35px;
}

/*Input range type start---------------------------------------*/
.effectRangeInput {
  -moz-appearance: none;
  appearance: none;
  margin: 5px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none' viewBox='0 0 28 29'%3E%3Cpath fill='%23fff' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M20.65 22.3v-6.24c0-.38-.31-.68-.7-.68-.37 0-.68.3-.68.68v6.23c0 .38.3.68.69.68.38 0 .69-.3.69-.68ZM17.2 22.3l-.04-6.25a.67.67 0 1 0-1.34.01l.04 6.24a.67.67 0 1 0 1.34 0ZM12.37 16.07l.04 6.22c0 .38.3.68.67.68.37 0 .67-.3.67-.68l-.04-6.23c0-.38-.3-.68-.67-.68-.37 0-.67.31-.67.69Z'/%3E%3C/svg%3E"),auto;
  outline: none;
  border-radius: 15px;
  height: 4px;
  background: linear-gradient(to right, rgba(59, 113, 202, 1) 0%, #ccc 0%);
  transition: background 0.3s ease;
}


.effectRangeInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 25px;
  width: 25px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  border: 3px solid #ccc;
  transition: .2s ease-in-out;
}

.effectRangeInput::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  border: 3px solid #ccc;
  transition: .2s ease-in-out;
}

.effectRangeInput::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(59, 113, 202, .2);
}

.effectRangeInput:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(59, 113, 202, .2);
  border: 2px solid #3b71ca;
}

.effectRangeInput:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(59, 113, 202, .2);
  border: 2px solid #3b71ca;
}

.effectRangeInput::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(59, 113, 202, .2);
}

.effectRangeInput:active::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(59, 113, 202, .2);
  border: 2px solid #3b71ca;
}

.effectRangeInput:focus::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(59, 113, 202, .2);
  border: 2px solid #3b71ca;
}

@media (hover: hover) and (pointer: fine) {
  .grayscaleDiv .grayscaleButton:hover,
  .invertDiv .invertButton:hover,
  .colormatrixDiv .colormatrixButton:hover,
  .removecolorDiv .removecolorButton:hover,
  .brightnessDiv .brightnessButton:hover,
  .gammaDiv .gammaButton:hover,
  .contrastDiv .contrastButton:hover,
  .saturationDiv .saturationButton:hover,
  .vibranceDiv .vibranceButton:hover,
  .hueDiv .hueButton:hover,
  .noiseDiv .noiseButton:hover,
  .pixelateDiv .pixelateButton:hover,
  .blurDiv .blurButton:hover,
  .sharpenDiv .sharpenButton:hover,
  .embossDiv .embossButton:hover,
  .blendcolorDiv .blendcolorButton:hover,
  .blendimageDiv .blendimageButton:hover {
    border-color: #2260ff;
  }

  .grayscaleDiv .grayscaleButton:hover .grayscaleIcon,
  .grayscaleDiv .grayscaleButton:hover .grayscaleSpan,
  .invertDiv .invertButton:hover .invertIcon,
  .invertDiv .invertButton:hover .invertSpan,
  .colormatrixDiv .colormatrixButton:hover .colormatrixIcon,
  .colormatrixDiv .colormatrixButton:hover .colormatrixSpan,
  .removecolorDiv .removecolorButton:hover .removecolorIcon,
  .removecolorDiv .removecolorButton:hover .removecolorSpan,
  .brightnessDiv .brightnessButton:hover .brightnessIcon,
  .brightnessDiv .brightnessButton:hover .brightnessSpan,
  .gammaDiv .gammaButton:hover .gammaIcon,
  .gammaDiv .gammaButton:hover .gammaSpan,
  .contrastDiv .contrastButton:hover .contrastIcon,
  .contrastDiv .contrastButton:hover .contrastSpan,
  .saturationDiv .saturationButton:hover .saturationIcon,
  .saturationDiv .saturationButton:hover .saturationSpan,
  .vibranceDiv .vibranceButton:hover .vibranceIcon,
  .vibranceDiv .vibranceButton:hover .vibranceSpan,
  .hueDiv .hueButton:hover .hueIcon,
  .hueDiv .hueButton:hover .hueSpan,
  .noiseDiv .noiseButton:hover .noiseIcon,
  .noiseDiv .noiseButton:hover .noiseSpan,
  .pixelateDiv .pixelateButton:hover .pixelateIcon,
  .pixelateDiv .pixelateButton:hover .pixelateSpan,
  .blurDiv .blurButton:hover .blurIcon,
  .blurDiv .blurButton:hover .blurSpan,
  .sharpenDiv .sharpenButton:hover .sharpenIcon,
  .sharpenDiv .sharpenButton:hover .sharpenSpan,
  .embossDiv .embossButton:hover .embossIcon,
  .embossDiv .embossButton:hover .embossSpan,
  .blendcolorDiv .blendcolorButton:hover .blendcolorIcon,
  .blendcolorDiv .blendcolorButton:hover .blendcolorSpan,
  .blendimageDiv .blendimageButton:hover .blendimageIcon,
  .blendimageDiv .blendimageButton:hover .blendimageSpan {
    color: #2260ff;
  }

  .grayscaleDiv .grayscaleButton:hover:before,
  .invertDiv .invertButton:hover:before,
  .colormatrixDiv .colormatrixButton:hover:before,
  .removecolorDiv .removecolorButton:hover:before,
  .brightnessDiv .brightnessButton:hover:before,
  .gammaDiv .gammaButton:hover:before,
  .contrastDiv .contrastButton:hover:before,
  .saturationDiv .saturationButton:hover:before,
  .vibranceDiv .vibranceButton:hover:before,
  .hueDiv .hueButton:hover:before,
  .noiseDiv .noiseButton:hover:before,
  .pixelateDiv .pixelateButton:hover:before,
  .blurDiv .blurButton:hover:before,
  .sharpenDiv .sharpenButton:hover:before,
  .embossDiv .embossButton:hover:before,
  .blendcolorDiv .blendcolorButton:hover:before,
  .blendimageDiv .blendimageButton:hover:before {
    transform: scale(1);
    opacity: 1;
  }

  .grayscaleDiv .grayscaleButton:hover .grayscaleCircle,
  .invertDiv .invertButton:hover .invertCircle,
  .colormatrixDiv .colormatrixButton:hover .colormatrixCircle,
  .removecolorDiv .removecolorButton:hover .removecolorCircle,
  .brightnessDiv .brightnessButton:hover .brightnessCircle,
  .gammaDiv .gammaButton:hover .gammaCircle,
  .contrastDiv .contrastButton:hover .contrastCircle,
  .saturationDiv .saturationButton:hover .saturationCircle,
  .vibranceDiv .vibranceButton:hover .vibranceCircle,
  .hueDiv .hueButton:hover .hueCircle,
  .noiseDiv .noiseButton:hover .noiseCircle,
  .pixelateDiv .pixelateButton:hover .pixelateCircle,
  .blurDiv .blurButton:hover .blurCircle,
  .sharpenDiv .sharpenButton:hover .sharpenCircle,
  .embossDiv .embossButton:hover .embossCircle,
  .blendcolorDiv .blendcolorButton:hover .blendcolorCircle,
  .blendimageDiv .blendimageButton:hover .blendimageCircle {
    background-color: #2260ff;
  }
}