@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px)
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px)
  }
}

@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px)
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px)
  }
}

@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px)
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px)
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px)
  }
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px)
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px)
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px)
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px)
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }
}

@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }
}

.dropzone,
.dropzone * {
  box-sizing: border-box
}

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  padding: 20px 20px
}

.dropzone.dz-clickable {
  cursor: pointer
}

.dropzone.dz-clickable * {
  cursor: default
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  cursor: pointer
}

/* .dropzone.dz-started .dz-message {
  display: none
} */

.dropzone.dz-drag-hover {
  border-style: solid
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  min-height: 48px;
  width: 64px;
  padding-right: 16px;
}

.dropzone .dz-preview:hover {
  z-index: 1000
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 12px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd)
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1
}

.dropzone .dz-preview.dz-image-preview {
  background: white
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear
}

.dropzone .dz-preview .dz-remove {
  font-size: 0 !important;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  padding: 0;
  background-color: rgb(26 26 26 / 45%);
  background-image: url('/image/catalog/fishingstock/icons/svg/cross-list-white.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}
.dropzone .dz-preview:hover .dz-details {
  opacity: 0
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
  display: none!important;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8)
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px
}

.dropzone .dz-preview .dz-image {
  border-radius: 0;
  overflow: hidden;
  width: 48px;
  height: 48px;
  position: relative;
  display: block;
  z-index: 10
}

.dropzone .dz-preview .dz-image img {
  display: block
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 48px;
  height: 48px
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 48px;
  margin-left: -30px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white
}

.dropzone .dz-preview .dz-error-message:after {
  content: '';
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626
}

.dz-image img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.dropzone .dz-preview .dz-remove{
  all: unset;
  display: block;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  height: 16px;
  z-index: 9999;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.9999 3.3335H1.99992C1.82311 3.3335 1.65354 3.40373 1.52851 3.52876C1.40349 3.65378 1.33325 3.82335 1.33325 4.00016C1.33325 4.17697 1.40349 4.34654 1.52851 4.47157C1.65354 4.59659 1.82311 4.66683 1.99992 4.66683H3.33325V12.6668C3.33341 13.1972 3.54418 13.7058 3.91921 14.0809C4.29425 14.4559 4.80287 14.6667 5.33325 14.6668H10.6666C11.197 14.6667 11.7056 14.4559 12.0806 14.0809C12.4557 13.7058 12.6664 13.1972 12.6666 12.6668V4.66683H13.9999C14.1767 4.66683 14.3463 4.59659 14.4713 4.47157C14.5963 4.34654 14.6666 4.17697 14.6666 4.00016C14.6666 3.82335 14.5963 3.65378 14.4713 3.52876C14.3463 3.40373 14.1767 3.3335 13.9999 3.3335ZM7.33325 10.6668C7.33325 10.8436 7.26301 11.0132 7.13799 11.1382C7.01297 11.2633 6.8434 11.3335 6.66658 11.3335C6.48977 11.3335 6.3202 11.2633 6.19518 11.1382C6.07016 11.0132 5.99992 10.8436 5.99992 10.6668V7.3335C5.99992 7.15669 6.07016 6.98712 6.19518 6.86209C6.3202 6.73707 6.48977 6.66683 6.66658 6.66683C6.8434 6.66683 7.01297 6.73707 7.13799 6.86209C7.26301 6.98712 7.33325 7.15669 7.33325 7.3335V10.6668ZM9.99992 10.6668C9.99992 10.8436 9.92968 11.0132 9.80466 11.1382C9.67963 11.2633 9.51006 11.3335 9.33325 11.3335C9.15644 11.3335 8.98687 11.2633 8.86185 11.1382C8.73682 11.0132 8.66658 10.8436 8.66658 10.6668V7.3335C8.66658 7.15669 8.73682 6.98712 8.86185 6.86209C8.98687 6.73707 9.15644 6.66683 9.33325 6.66683C9.51006 6.66683 9.67963 6.73707 9.80466 6.86209C9.92968 6.98712 9.99992 7.15669 9.99992 7.3335V10.6668Z' fill='%23FE914E'/%3E%3Cpath d='M6.66667 2.66683H9.33333C9.51014 2.66683 9.67971 2.59659 9.80474 2.47157C9.92976 2.34654 10 2.17697 10 2.00016C10 1.82335 9.92976 1.65378 9.80474 1.52876C9.67971 1.40373 9.51014 1.3335 9.33333 1.3335H6.66667C6.48986 1.3335 6.32029 1.40373 6.19526 1.52876C6.07024 1.65378 6 1.82335 6 2.00016C6 2.17697 6.07024 2.34654 6.19526 2.47157C6.32029 2.59659 6.48986 2.66683 6.66667 2.66683Z' fill='%23FE914E'/%3E%3C/svg%3E");
  padding: 0;
  border-radius: 0;
  font-size: 0!important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}
#review-dropzones,
#review-dropzone,
#review-answer-dropzone {
  min-height: 48px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed var(--Theme-border, #EBEEF0);
}

#review-dropzone .dz-message,
#review-dropzones .dz-message,
#review-answer-dropzone .dz-message {
  margin: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
#review-dropzone .dz-message{
  margin-bottom: 12px;
}

#review-dropzone .dz_text_block{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
#review-dropzone .dz_text_block_top{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
#review-dropzone .dz_text_block_top .dz_text{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#review-dropzone .dz_text_block_top .dz_text .small_text{
  color: var(--Theme-grey, #868E98);
}




@media screen and (max-width: 1799px){
	.dropzone .dz-message svg{
		width: 45px;
		height: 45px;
	}
	.dropzone .dz-preview{
		min-height: 45px;
	}
	.dropzone .dz-preview .dz-image{
		width: 45px;
		height: 45px;
		border-radius: 15px;
	}
	.dropzone .dz-preview .dz-remove{
		border-radius: 15px;
		background-size: 15px;
	}
}

@media screen and (max-width: 1399px){
	.dropzone .dz-message svg{
		width: 32px;
		height: 32px;
	}
	.dropzone .dz-preview{
		min-height: 32px;
	}
	.dropzone .dz-preview .dz-image{
		width: 32px;
		height: 32px;
		border-radius: 10.7px;
	}
	.dropzone .dz-preview .dz-remove{
		border-radius: 10.7px;
		background-size: 10.7px;
	}
}

@media screen and (max-width: 991px){
	.dropzone .dz-message svg{
		width: 45px;
		height: 45px;
	}
	.dropzone .dz-preview{
		min-height: 45px;
	}
	.dropzone .dz-preview .dz-image{
		width: 45px;
		height: 45px;
		border-radius: 15px;
	}
	.dropzone .dz-preview .dz-remove{
		border-radius: 15px;
		background-size: 15px;
	}
}