.dsn-side-list {
  text-align: center;
  display: inline-block;
  border-radius: 0 0 4px 4px;
  border-top-width: 0;
  padding: 0
}
.dsn-side-item {
  display: inline-block !important;
  margin: 0 !important;
  font-size: 16px !important;
  border-radius: 0 !important;
  line-height: 1em
}
.dsn-side-item:last-child {
  border-right: none
}
.dsn-product-variants-container {
  margin-top: 10px
}
.dsn-product-variants {
  position: relative;
  max-width: 100%
}
.dsn-product-variants .product-variants-item {
  margin: 5px 0;
  display: block !important
}
.dsn-product-variants .control-label {
  color: rgba(var(--light-text-color), 1) !important;
  font-size: 13px !important;
  font-weight: 700 !important
}
.dsn-product-variants-loader {
  position: absolute;
  top: 0;
  right: 0
}
.dsn-product-attributes {
  padding: 15px 15px 0;
  width: 100%;
  align-self: flex-end
}
.dsn-item-wrapper {
  display: inline-block;
  position: absolute !important;
  top: 0;
  left: 0
}
.dsn-item-wrapper .ui-resizable-e {
    display: none !important;
}

.dsn-item-wrapper .ui-resizable-s {
    display: none !important;
}
.dsn-item-wrapper .dsn-item-button, .dsn-item-wrapper .ui-resizable-handle, .dsn-item-wrapper .ui-rotatable-handle {
  line-height: 24px !important;
  position: absolute;
  opacity: 0;
  padding: 0;
  transition: opacity .2s;
  transition-delay: .2s;
  cursor: default;
  font-size: 18px;
  text-indent: 0;
  height: 24px;
  width: 24px;
  text-align: center
}
.dsn-item-wrapper .dsn-rotatable {
  width: 100%;
  height: 100%;
  box-sizing: content-box
}
.dsn-item-wrapper .dsn-rotatable .ui-rotatable-handle {
  left: 0;
  top: 0
}
.dsn-item-wrapper .dsn-item-button {
  z-index: 90
}
.dsn-item-wrapper .ui-resizable-e {
  margin-top: -12px;
  top: 50%;
  right: 0
}
.dsn-item-wrapper .ui-resizable-s {
  margin-left: -12px;
  left: 50%;
  bottom: 0
}
.dsn-item-wrapper .ui-resizable-se {
  right: 0;
  bottom: 0
}
.dsn-item-wrapper .ui-resizable-se i {
  transform: rotate(-45deg)
}
.dsn-item-wrapper.ui-resizable-resizing .dsn-dimensions, .dsn-item-wrapper.ui-resizable-resizing .ui-resizable-handle {
  opacity: 1
}
.dsn-item-wrapper.dsn-small-height .dsn-item-color, .dsn-item-wrapper.dsn-small-height .ui-resizable-e {
  display: none !important
}
.dsn-item-wrapper.dsn-small-height .dsn-item-center-v {
  left: -25px
}
.dsn-item-wrapper.dsn-small-width .dsn-item-color, .dsn-item-wrapper.dsn-small-width .ui-resizable-s {
  display: none !important
}
.dsn-item-wrapper.dsn-small-height .dsn-item-center-h, .dsn-item-wrapper.dsn-small-height .dsn-item-down, .dsn-item-wrapper.dsn-small-height .dsn-item-up, .dsn-item-wrapper.dsn-small-width .dsn-item-center-h, .dsn-item-wrapper.dsn-small-width .dsn-item-down, .dsn-item-wrapper.dsn-small-width .dsn-item-up {
  top: -25px
}
.dsn-item-wrapper.dsn-small-height .dsn-item-center, .dsn-item-wrapper.dsn-small-width .dsn-item-center {
  top: 0;
  left: -25px;
  margin: 0
}
.dsn-item-wrapper.dsn-very-small-height .dsn-item-remove, .dsn-item-wrapper.dsn-very-small-width .dsn-item-remove {
  top: -25px;
  right: -25px
}
.dsn-item-wrapper.dsn-very-small-height .dsn-remove-bg, .dsn-item-wrapper.dsn-very-small-width .dsn-remove-bg {
  display: none
}
.dsn-item-wrapper.dsn-very-small-height .ui-rotatable-handle, .dsn-item-wrapper.dsn-very-small-width .ui-rotatable-handle {
  top: -25px;
  left: -25px
}
.dsn-item-wrapper.dsn-very-small-height .dsn-item-more, .dsn-item-wrapper.dsn-very-small-width .dsn-item-more {
  left: -25px
}
.dsn-item-wrapper.dsn-very-small-height .ui-resizable-se, .dsn-item-wrapper.dsn-very-small-width .ui-resizable-se {
  right: -25px
}
.dsn-item-wrapper .dsn-dimensions {
  line-height: 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  transition-delay: .2s;
  position: absolute;
  bottom: -29px;
  right: -1px;
  padding: 3px 5px;
  white-space: nowrap
}
.dsn-item-wrapper text {
  cursor: default
}
.dsn-item-wrapper .dsn-item-remove {
  top: 0;
  right: 0
}
.dsn-item-wrapper .dsn-remove-bg {
  top: 0;
  right: 29px
}
.dsn-item-wrapper .dsn-item-up {
  top: 0;
  left: 50%;
  margin-left: -39px
}
.dsn-item-wrapper .dsn-item-down {
  top: 0;
  left: 50%;
  margin-left: 15px
}
.dsn-item-wrapper .dsn-item-center-h {
  top: 0;
  left: 50%;
  margin-left: -12px
}
.dsn-item-wrapper .dsn-item-center-h i {
  margin-left: 0;
  position: relative;
  left: -1px
}
.dsn-item-wrapper .dsn-item-center-v {
  margin-top: -12px;
  top: 50%;
  left: 0
}
.dsn-item-wrapper .dsn-item-center {
  margin-left: -12px;
  margin-bottom: -12px;
  bottom: 50%;
  left: 50%
}
.dsn-item-wrapper .dsn-item-color {
  top: 0;
  left: 50%;
  margin-left: -12px
}
.dsn-item-wrapper .dsn-item-more {
  bottom: 0;
  left: 0
}
.dsn-item-wrapper.dsn-advanced .dsn-item-more {
  background-color: #4caf50
}
.dsn-item-wrapper .dsn-item-advanced {
  display: none
}
.dsn-item-wrapper.dsn-advanced .dsn-item-advanced {
  display: block
}
.dsn-item-wrapper.dsn-advanced .dsn-item-hide-on-advanced {
  display: none
}
.dsn-item-wrapper.dsn-low-dpi-width .dsn-item-container {
  border-top-color: red !important;
  border-bottom-color: red !important
}
.dsn-item-wrapper.dsn-low-dpi-height .dsn-item-container {
  border-left-color: red !important;
  border-right-color: red !important
}
#dsn-container.dsn-hover .dsn-item-wrapper.dsn-hover, #dsn-container.dsn-hover .dsn-item-wrapper:hover, #dsn-container:focus .dsn-item-wrapper.dsn-hover, #dsn-container:focus .dsn-item-wrapper:hover, #dsn-container:hover .dsn-item-wrapper.dsn-hover, #dsn-container:hover .dsn-item-wrapper:hover {
  margin-top: -1px;
  margin-left: -1px
}
#dsn-container.dsn-hover .dsn-item-wrapper.dsn-hover .dsn-rotatable, #dsn-container.dsn-hover .dsn-item-wrapper:hover .dsn-rotatable, #dsn-container:focus .dsn-item-wrapper.dsn-hover .dsn-rotatable, #dsn-container:focus .dsn-item-wrapper:hover .dsn-rotatable, #dsn-container:hover .dsn-item-wrapper.dsn-hover .dsn-rotatable, #dsn-container:hover .dsn-item-wrapper:hover .dsn-rotatable {
  border: 1px solid #0f0
}
#dsn-container.dsn-hover .dsn-item-wrapper.dsn-hover .dsn-dimensions, #dsn-container.dsn-hover .dsn-item-wrapper.dsn-hover .dsn-item-button, #dsn-container.dsn-hover .dsn-item-wrapper.dsn-hover .ui-resizable-handle, #dsn-container.dsn-hover .dsn-item-wrapper.dsn-hover .ui-rotatable-handle, #dsn-container.dsn-hover .dsn-item-wrapper:hover .dsn-dimensions, #dsn-container.dsn-hover .dsn-item-wrapper:hover .dsn-item-button, #dsn-container.dsn-hover .dsn-item-wrapper:hover .ui-resizable-handle, #dsn-container.dsn-hover .dsn-item-wrapper:hover .ui-rotatable-handle, #dsn-container:focus .dsn-item-wrapper.dsn-hover .dsn-dimensions, #dsn-container:focus .dsn-item-wrapper.dsn-hover .dsn-item-button, #dsn-container:focus .dsn-item-wrapper.dsn-hover .ui-resizable-handle, #dsn-container:focus .dsn-item-wrapper.dsn-hover .ui-rotatable-handle, #dsn-container:focus .dsn-item-wrapper:hover .dsn-dimensions, #dsn-container:focus .dsn-item-wrapper:hover .dsn-item-button, #dsn-container:focus .dsn-item-wrapper:hover .ui-resizable-handle, #dsn-container:focus .dsn-item-wrapper:hover .ui-rotatable-handle, #dsn-container:hover .dsn-item-wrapper.dsn-hover .dsn-dimensions, #dsn-container:hover .dsn-item-wrapper.dsn-hover .dsn-item-button, #dsn-container:hover .dsn-item-wrapper.dsn-hover .ui-resizable-handle, #dsn-container:hover .dsn-item-wrapper.dsn-hover .ui-rotatable-handle, #dsn-container:hover .dsn-item-wrapper:hover .dsn-dimensions, #dsn-container:hover .dsn-item-wrapper:hover .dsn-item-button, #dsn-container:hover .dsn-item-wrapper:hover .ui-resizable-handle, #dsn-container:hover .dsn-item-wrapper:hover .ui-rotatable-handle {
  opacity: 1
}
#dsn-container.dsn-hover .dsn-item-wrapper.dsn-item-active, #dsn-container:focus .dsn-item-wrapper.dsn-item-active, #dsn-container:hover .dsn-item-wrapper.dsn-item-active {
  margin-top: -1px;
  margin-left: -1px
}
#dsn-container.dsn-hover .dsn-item-wrapper.dsn-item-active .dsn-rotatable, #dsn-container:focus .dsn-item-wrapper.dsn-item-active .dsn-rotatable, #dsn-container:hover .dsn-item-wrapper.dsn-item-active .dsn-rotatable {
  border: 1px solid #0f0
}
.ui-draggable-dragging .dsn-dimensions, .ui-draggable-dragging .dsn-item-button, .ui-draggable-dragging .ui-resizable-handle, .ui-draggable-dragging .ui-rotatable-handle {
  display: none !important
}
.ui-draggable-dragging .dsn-item-container {
  overflow: hidden
}
.ui-resizable-resizing .ui-resizable-handle {
  pointer-events: none
}
.ui-rotatable-disabled .ui-rotatable-handle {
  display: none
}
.ui-resizable-disabled .ui-resizable-e, .ui-resizable-disabled .ui-resizable-s {
  display: none !important
}
.dsn-wrapped {
  width: 100%;
  height: 100%
}
.dsn-design-area {
  overflow: hidden;
  position: absolute;
  outline: 2px solid transparent;
  box-sizing: border-box
}
#dsn-container.dsn-hover .dsn-design-area, #dsn-container:hover .dsn-design-area {
  overflow: visible;
  outline: 2px dotted #0f0
}
.dsn-design-field {
  overflow: hidden;
  position: absolute;
  box-sizing: border-box;
  outline: 2px dotted transparent
}
.dsn-design-field.dsn-rounded {
  border: 2px dotted transparent;
  outline: none
}
.dsn-design-field.dsn-hover, .dsn-design-field:hover {
  z-index: 1;
  overflow: visible
}
.dsn-design-field-label {
  line-height: 20px;
  position: absolute;
  top: -25px;
  left: -2px;
  color: #fff;
  background-color: #03a9f4;
  padding: 2px 5px
}
#dsn-container.dsn-hover .dsn-design-field, #dsn-container:hover .dsn-design-field {
  outline: 2px dotted #03a9f4
}
#dsn-container.dsn-hover .dsn-design-field.dsn-rounded, #dsn-container:hover .dsn-design-field.dsn-rounded {
  border: 2px dotted #03a9f4;
  outline: none
}
#dsn-container.dsn-hover .dsn-design-field.dsn-field-empty, #dsn-container:hover .dsn-design-field.dsn-field-empty {
  background-color: rgba(3, 169, 244, .2)
}
#dsn-container.dsn-hover .dsn-design-field.active, #dsn-container:hover .dsn-design-field.active {
  outline-color: #0f0;
  border-color: #0f0
}
#dsn-container.dsn-hover .dsn-design-field.active .dsn-design-field-label, #dsn-container:hover .dsn-design-field.active .dsn-design-field-label {
  color: #03a9f4;
  background-color: #0f0
}
#dsn-container.dsn-hover .dsn-design-field.active.dsn-field-empty, #dsn-container:hover .dsn-design-field.active.dsn-field-empty {
  background-color: rgba(0, 255, 0, .2)
}
#dsn-container.dsn-hover .dsn-design-field .dsn-field-type, #dsn-container:hover .dsn-design-field .dsn-field-type {
  opacity: .8
}
.dsn-field-type {
  cursor: pointer;
  left: 50%;
  top: 50%;
  margin-top: -12px;
  margin-left: -12px;
  opacity: 0;
  transition: opacity .2s ease-in-out
}
.dsn-canvas {
  position: relative;
  display: inline-block;
  height: auto;
  overflow: hidden
}
.dsn-canvas .dsn-canvas-image {
  max-width: 100%;
  max-height: calc(100vh - 80px)
}
.dsn-canvas .dsn-canvas-float, .dsn-canvas .dsn-canvas-mask {
  position: absolute;
  top: 0;
  left: 0
}
.dsn-canvas .dsn-canvas-mask {
  width: 100%;
  height: 100%;
  z-index: 2;
  max-height: none
}
.dsn-canvas .dsn-hover-layer {
  opacity: 1;
  pointer-events: none;
  transition: opacity .5s
}
.dsn-canvas:hover .dsn-hover-layer {
  opacity: .2
}
.dsn-canvas.dsn-no-pointer-events:hover .dsn-hover-layer {
  display: none
}
.dsn-above-design {
  z-index: 2
}
.dsn-hover .dsn-hover-layer {
  opacity: .2
}
#dsn-canvas-templates, .dsn-resizable-handle {
  display: none
}
#dsn-container.dsn-hover .dsn-canvas, #dsn-container:hover .dsn-canvas {
  overflow: visible
}
.dsn-canvas-base-placeholder {
  visibility: hidden
}
#dsn-loader {
  top: 0;
  z-index: 102
}
#dsn-loader, #dsn-message-loader {
  position: absolute;
  left: 0;
  transition: opacity .2s
}
#dsn-message-loader {
  bottom: 0;
  z-index: 100;
  width: 100%
}
#dsn-message-loader .dsn-message-loader-progress {
  transition: width 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: -1
}
#dsn-message-loader .dsn-message-loader-percent {
  position: absolute;
  top: 0;
  right: 10px;
  line-height: 50px
}
#dsn-area.message-loading #dsn-message-loader {
  visibility: visible;
  opacity: 1
}
#dsn-error-message {
  background-color: #e91e63
}
#dsn-error-message, #dsn-info-message {
  padding: 10px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  transition: opacity .2s;
  color: #fff
}
#dsn-info-message {
  background-color: #2196f3
}
#dsn-area {
  grid-area: area;
  flex: 1 1 0;
  position: relative;
  height: 100%;
  max-width: 100%;
  line-height: 0
}
#dsn-area:hover .dsn-area-banner {
  display: block
}
.dsn-area-banner {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 0;
  text-align: center
}
.dsn-area-no-banner .dsn-area-banner {
  display: none !important
}
.dsn-text-value {
  line-height: normal !important
}
.dsn-text-value tspan {
  font-family: unset !important;
  letter-spacing: normal !important
}
.dsn-container .dsn-item-button, .dsn-container button {
  border: none;
  cursor: pointer !important;
  line-height: 20px
}
.dsn-container span {
  line-height: 20px
}
.dsn-container a:focus, .dsn-container button:focus {
  outline: none !important;
  box-shadow: 0 0 1px 2px rgba(var(--secondary-color), 1) !important
}
.dsn-hidden {
  display: none;
  visibility: hidden
}
.dsn-away {
  position: fixed !important;
  top: -10000px !important;
  left: -10000px !important
}
.dsn-fixed {
  position: fixed;
  top: 0;
  left: 0
}
.dsn-debug {
  z-index: 100001
}
.dsn-loader {
  position: absolute;
  top: 9px;
  left: 9px;
  font-size: 14px !important;
  opacity: 0;
  transition: opacity .4s
}
.loading-image {
  background: transparent url(../../img/icons/loader.svg) no-repeat 50%
}
.loading-gradient {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background: linear-gradient(90deg, rgba(var(--light-bg-color), .5) 8%, rgba(var(--light-bg-color), .7) 38%, rgba(var(--light-bg-color), .5) 85%) !important;
  background-size: 1000px 640px
}
@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }
  to {
    background-position: 468px 0
  }
}
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }
  to {
    background-position: 468px 0
  }
}
.dsn-button {
  background: none;
  border: none
}
.dsn-reactive {
  cursor: pointer
}
.dsn-chip {
  position: relative;
  /* display: inline-block; */
	display: block;
  padding: 5px;
  margin: 0 5px 5px 0;
  border-radius: 4px
}
.dsn-chip img {
  height: 17px;
  width: auto;
  transition: opacity .4s
}
.dsn-chip.loading img {
  opacity: .2
}
.dsn-chip.loading .dsn-loader {
  opacity: 1
}
.dsn-chip-link {
  text-decoration: none !important
}
.dsn-stretch {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.pull-top, .pull-top-left, .pull-top-right {
  position: absolute !important;
  top: 3px
}
.pull-top-right {
  right: 3px
}
.pull-top-left {
  left: 3px
}
.dsn-pull-right {
  float: right
}
.dsn-pull-left {
  float: left
}
.dsn-clear {
  clear: both
}
.dsn-text-outline {
  text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888
}
.pcr-interaction [data-type=HEXA] {
  display: none
}
button.dsn-colored-danger {
  background-color: #f44336 !important;
  color: #fff
}
button[class*=dsn-colored]:hover {
  -webkit-filter: brightness(105%);
  filter: brightness(105%)
}
.dsn-quantity {
  height: 30px;
  margin-right: 5px
}
.dsn-quantity .ui-spinner {
  height: 30px !important
}
.dsn-quantity .ui-spinner .ui-spinner-button i {
  line-height: 30px !important
}
.dsn-quantity .dsn-input {
  height: 30px !important
}
#dsn-quantity {
  width: 60px
}
#dsn-footer {
  grid-area: footer;
  flex: 1 0 100%;
  padding: 5px;
  position: relative;
  z-index: 2;
  width: 100%
}
#dsn-footer .dsn-pricing {
  font-size: 20px;
  line-height: 20px;
  margin-right: 5px;
  border-radius: 4px;
  padding: 5px 10px
}
#dsn-popup {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100vw;
  min-height: 100%;
  z-index: 10001;
  overflow: scroll;
  background: rgba(0, 0, 0, .6)
}
#dsn-popup.dsn-popup-hidden {
  visibility: hidden;
  opacity: 0;
  top: -10000px;
  left: -10000px
}
#dsn-popup .dsn-popup-content {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  max-height: 100%
}
#dsn-popup #dsn-container {
  position: relative;
  margin: 0
}
#dsn-popup #dsn-container:hover #dsn-close-popup {
  display: block
}
#dsn-close-popup {
  opacity: 0;
  position: absolute;
  border: none;
  right: 10px;
  top: 10px;
  z-index: 10
}
.dsn-popup-content:hover #dsn-close-popup {
  opacity: 1;
  transition: opacity .3s linear
}
#dsn-container ::-webkit-scrollbar {
  width: 10px
}
#dsn-container ::-webkit-scrollbar-button {
  display: none
}
body, html {
  overflow: auto
}
#dsn-container {
  margin: 40px 0;
  scroll-margin: 20px;
  width: 100%;
  height: auto;
  max-height: 1020px;
  font-size: 16px;
  clear: both
}
#dsn-container :focus {
  outline-color: rgba(var(--primary-color), 1)
}
#dsn-grid {
  display: flex;
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-areas: "tabs area""footer footer";
  flex-wrap: wrap;
  position: relative
}
.dsn-scrolling .dsn-customize {
  background-color: #8bc34a !important
}
.pcr-app {
  z-index: 10002 !important
}
* {
  outline: 0
}
.dsn-label {
  display: block;
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 0
}
.dsn-label span {
  text-transform: none
}
.dsn-label.dsn-label-small {
  font-size: 10px
}
.dsn-label-inline {
  display: inline-block !important
}
.dsn-primary-button {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px
}
@media only screen and (max-width:425px) {
  .ui-resizable-e, .ui-resizable-s {
    display: none !important
  }
  .dsn-hide-on-mobile {
    display: none
  }
  #dsn-footer .dsn-pricing {
    padding: 5px
  }
  #dsn-footer #dsn-quantity {
    width: 36px
  }
}
@media only screen and (min-width:1025px) {
  #dsn-area {
    min-height: 300px
  }
  #dsn-popup {
    padding: 10px
  }
}
@media only screen and (max-width:1024px) {
  #dsn-area {
    flex: 1 1 100%;
    z-index: 0
  }
  .dsn-area-banner {
    text-align: left;
    padding-left: 15px
  }
  .dsn-hide-on-tablet {
    display: none
  }
  #dsn-close-popup {
    display: block !important;
    opacity: 1
  }
  #dsn-container {
    max-height: unset
  }
  #dsn-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "area""footer""tabs"
  }
  #dsn-grid > :first-child {
    order: 3
  }
  #dsn-grid > :nth-child(2) {
    order: 1
  }
  #dsn-grid > :nth-child(3) {
    order: 2
  }
}
@media only screen and (max-width:767px) {
  .dsn-hide-on-mini-tablet {
    display: none
  }
}
.dsn-input {
  border: 1px solid transparent;
  display: block;
  width: 100%;
  font-size: 11px;
  padding: 9px 10px;
  overflow: hidden
}
.dsn-input::-webkit-input-placeholder {
  color: #fff !important
}
.dsn-input::-moz-placeholder {
  color: #fff !important
}
.dsn-input::placeholder {
  color: #fff !important
}
.dsn-input-error {
  background-color: #ef9a9a;
  color: #37474f !important
}
.dsn-red {
  color: #fff;
  background: #e91e63 !important
}
.dsn-spinner {
  display: inline-block;
  vertical-align: top
}
.dsn-spinner .ui-spinner {
  border-radius: 4px;
  color: inherit;
  border: none;
  border-color: inherit;
  height: 36px
}
.dsn-spinner .ui-spinner .ui-spinner-button {
  background-image: none;
  position: absolute !important;
  width: 36px;
  text-align: center;
  border-radius: 0;
  border: none !important;
  height: 100%
}
.dsn-spinner .ui-spinner .ui-spinner-button.ui-spinner-up {
  right: 0
}
.dsn-spinner .ui-spinner .ui-spinner-button.ui-spinner-down {
  right: 36px
}
.dsn-spinner .ui-spinner .ui-spinner-button i {
  line-height: 36px
}
.dsn-spinner .dsn-spinner-input {
  box-sizing: content-box;
  width: 36px;
  height: 36px;
  text-align: center;
  padding: 0 72px 0 0;
  margin: 0;
  border: none !important
}
.dsn-slider {
  padding: 12px 10px;
  clear: both
}
.dsn-slider .ui-slider-handle {
  _width: 28px !important;
  background-image: none
}
.dsn-slider-label {
  float: right;
  padding: 1px 0;
  width: 4ch;
  text-align: right
}
.dsn-slider-reset {
  float: right;
  margin-right: 5px
}
.dsn-slider-resettable .ui-slider-handle:before {
  content: "";
  font-family: FontAwesome;
  left: 3px;
  position: absolute;
  top: 0;
  color: #fff
}
#dsn-dimension-apply {
  margin-top: 10px
}
.dsn-custom-dimension .dsn-input {
  width: 160px
}
#dsn-dimensions-aspect-container {
  background-image: url(../../img/icons/ratio.svg);
  height: 105px;
  width: 40px;
  position: relative;
  top: 25px
}
#dsn-dimensions-aspect-button {
  background-color: transparent;
  padding: 0;
  text-decoration: none;
  position: absolute;
  top: 41px;
  left: 12px
}
#dsn-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  grid-area: tabs;
  flex: 0 0 auto;
  width: 320px;
  height: 0;
  min-height: 100%;
  transition: opacity .4s linear
}
#dsn-tabs-content, #dsn-tabs-list {
  visibility: visible !important
}
#dsn-tabs-list {
  padding: 5px 5px 0
}
#dsn-tabs-content {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column
}
.dsn-tabs-content-items {
  overflow: hidden;
  flex-grow: 1;
  height: 100%
}
.dsn-tab {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 14px;
  text-decoration: none !important;
  text-transform: uppercase;
  margin-right: 2px
}
.dsn-tab-content {
  position: relative;
  display: none;
  height: 100%;
  padding: 8px;
  overflow: auto
}
.dsn-tab-content.active {
  display: block
}
.dsn-tab-content .dsn-tab-div {
  margin-top: 5px
}
#dsn-tab-content-options {
  padding: 0 !important
}
@media only screen and (max-width:1024px) {
  #dsn-tabs {
    flex: 1 0 100%;
    width: 100% !important;
    z-index: 1;
    height: auto;
    min-height: auto
  }
  #dsn-tabs, .dsn-tabs-content-items {
    max-height: 1000px
  }
  #dsn-tab-content-text .dsn-tab-div {
    position: relative;
    width: 240px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 20px
  }
  #dsn-tab-content-text .dsn-tab-div:first-child {
    margin: 0 20px 20px 0
  }
  .dsn-text-apply {
    top: 2px;
    right: 2px
  }
  #dsn-text-buttons {
    width: auto !important
  }
  .dsn-tab {
    padding: 10px 14px
  }
}
@media only screen and (max-width:767px) {
  #dsn-tab-content-text .dsn-tab-div {
    width: 230px;
    margin: 0 0 10px;
    vertical-align: text-top
  }
  #dsn-tab-content-text .dsn-tab-div:first-child {
    margin: 0 10px 10px 0
  }
}
@media only screen and (max-width:575px) {
  #dsn-tab-content-text .dsn-tab-div {
    width: 182px;
    margin: 0 0 10px;
    vertical-align: text-top
  }
  #dsn-tab-content-text .dsn-tab-div:first-child {
    margin: 0 10px 10px 0
  }
  #dsn-tab-content-text .dsn-icon {
    margin-bottom: 5px
  }
}
@media only screen and (max-width:425px) {
  #dsn-tab-content-text .dsn-tab-div {
    width: 148px;
    margin: 0 0 10px;
    vertical-align: text-top
  }
  #dsn-tab-content-text .dsn-tab-div:first-child {
    margin: 0 10px 10px 0
  }
}
@media only screen and (max-width:360px) {
  #dsn-tab-content-text .dsn-tab-div {
    width: 100%;
    margin: 0 0 10px;
    vertical-align: text-top
  }
  #dsn-tab-content-text .dsn-tab-div:first-child {
    margin: 0 10px 10px 0
  }
}
#dsn-user-upload-btn {
  text-align: center
}
#dsn-user-upload-btn:active {
  bottom: inherit;
  top: 0
}
#dsn-user-upload-btn #dsn-user-upload-progress {
  display: none;
  border-radius: 4px
}
#dsn-user-upload-btn #dsn-user-upload-progress-value {
  display: none
}
#dsn-user-upload-btn.loading #dsn-user-upload-content {
  visibility: hidden
}
#dsn-user-upload-btn.loading .dsn-upload-span {
  display: block;
  line-height: 30px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%
}
#dsn-user-upload-btn.loading #dsn-user-upload-progress {
  display: block;
  background: #3595bf
}
#dsn-user-upload-btn.loading #dsn-user-upload-progress-value {
  display: block;
  width: 100%;
  z-index: 1
}
#dsn-user-upload-template {
  display: none
}
.dsn-image-group-item {
  min-width: 100px;
  text-align: center;
  white-space: nowrap !important
}
.dsn-image-group-item .separator {
  display: none
}
.dsn-item-big .dsn-loader {
  position: absolute;
  top: 5px;
  left: 5px
}
.dsn-item-big .separator {
  display: block
}
.dsn-item-big img {
  height: 64px
}
.dsn-item-big img, .dsn-item-big span {
  display: inline-block
}
.dsn-image-item-container {
  position: relative;
  display: inline-block
}
.dsn-image-item-container .dsn-image-item-remove {
  opacity: 1;
  transition: opacity .2s;
  position: absolute;
  width: 24px;
  height: 24px;
  font-size: 20px;
  top: 1px;
  right: 6px;
  z-index: 1;
  border-radius: 0 4px 0 4px;
  overflow: hidden;
  padding: 0
}
.dsn-image-item-container:hover .dsn-image-item-remove {
  opacity: 1
}
.dsn-image-item {
  text-align: center
}
.dsn-image-item img {
  width: auto;
  height: 60px
}
.dsn-image-item .dsn-image-price {
  display: block;
  font-size: 12px;
  text-align: center;
  width: 100%;
  margin-top: 3px;
  line-height: 1em
}
button.dsn-filter-item {
  display: block;
  line-height: 0;
  margin-bottom: 5px;
  padding: 0;
  border: 2px solid transparent
}
button.dsn-filter-item:not(.active) {
  border-color: transparent !important
}
button.dsn-filter-item.active {
  border: 2px solid rgba(0, 0, 0, .3);
  outline: none
}
button.dsn-filter-item > span {
  display: block
}
.dsn-filter-item-preview {
  max-width: 100%;
  width: 100%;
  height: auto
}
@media only screen and (max-width:1024px) {
  .dsn-filter-item-container {
    display: inline-block
  }
  button.dsn-filter-item {
    width: 250px
  }
}
@media only screen and (max-width:767px) {
  button.dsn-filter-item {
    width: 150px
  }
}
.dsn-product-size-input {
  width: 160px
}
#dsn-product-size-apply {
  margin-top: 10px
}
#dsn-product-size-aspect-container {
  background-image: url(../../img/icons/ratio.svg);
  height: 105px;
  width: 40px;
  position: relative;
  top: 25px
}
#dsn-product-size-aspect-button {
  background: transparent;
  text-decoration: none;
  position: absolute;
  top: 41px;
  left: 8px
}
.dsn-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 40px !important;
  text-align: center;
  vertical-align: middle;
  border-radius: 4px
}
.dsn-icon, .dsn-icon:active, .dsn-icon:focus, .dsn-icon:hover {
  color: #fff
}
.dsn-icon i {
  font-size: 24px;
  line-height: 35px
}
.dsn-icon-small {
  width: 24px;
  height: 24px;
  line-height: 24px !important;
  text-align: center
}
.dsn-icon-small i {
  font-size: 16px;
  line-height: 24px
}
.dsn-image-icon {
  vertical-align: sub
}
.dsn-slide-panel {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2
}
.dsn-slide-content {
  margin-top: 50px;
  padding: 10px;
  overflow: auto;
  max-height: 100%
}
.dsn-area-panel {
  z-index: 101
}
.dsn-area-panel .dsn-area-panel-close {
  z-index: 1;
  left: 10px;
  top: 10px
}
.dsn-area-panel .dsn-area-panel-content {
  line-height: normal;
  overflow: auto;
  padding: 60px 15px 10px 10px;
  max-height: 100%
}
.dsn-notice {
  margin-bottom: 20px;
  display: inline-block;
  padding: 5px 10px;
  vertical-align: middle;
  border-radius: 4px
}
.dsn-area-message {
  position: absolute;
  width: 100%;
  line-height: 33px !important;
  text-align: center;
  background: transparent !important;
  padding: 10px;
  z-index: 102
}
.dsn-area-message-content {
  padding: 5px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 4px
}
.dsn-area-error-message {
  background: #ff4a4c;
  color: #fff
}
.dsn-area-success-message {
  background: #8bc34a;
  color: #fff
}
.dsn-area-warning-message {
  background: #ddb44b;
  color: #fff
}
#dsn-text-size {
  width: 76px
}
.dsn-text-control-container {
  position: relative
}
.dsn-text-control-container:hover .dsn-text-apply {
  opacity: 1
}
.dsn-text-apply {
  opacity: 0;
  position: absolute !important;
  top: 2px;
  right: 2px;
  transition: opacity .2s
}
.dsn-text-field {
  margin-bottom: 15px
}
#dsn-text-buttons {
  text-align: right
}
.dsn-color-items {
  font-size: 0
}
button.dsn-color-item {
  margin: 0 3px 3px 0;
  border: 2px solid transparent;
  display: inline-block;
  width: 40px;
  height: 28px
}
button.dsn-color-item.active {
  border: 2px solid rgba(0, 0, 0, .3)
}
.dsn-help {
  font-size: 14px
}