html,
body {
  color: #383838;
  height: 100%;
  min-height: 100% !important;
}
body {
  background: #fff;
}

.mirror-top,
.mirror-left,
.mirror-right,
.mirror-bottom,
.border-vertical,
.border-horizontal {
  display: none;
}

.bxslider li {
  border-radius: 10px;
  overflow: hidden;
}

#slider {
  width: 100%;
}

.left-side {
  float: left;
  width: 220px;
}
.left-side h3 {
  margin-top: 10px;
}

.picture {
  cursor: move;
  overflow: hidden;
  width: 500px;
  float: left;
  position: relative;
  z-index: 5;
}
.standard-frame {
  cursor: move;
  overflow: visible;
  width: 500px;
  float: left;
  position: relative;
  z-index: 5;
}
.picture #image {
  position: relative;
  z-index: 4;
}
#image {
  cursor: move;
}
.right-side {
  float: right;
  width: 150px;
}

.emptyborder {
  background: white;
  float: left;
}

.bad {
  border: 1px solid red;
}

.nospace p {
  padding: 0px;
}

.space {
  position: relative;
}

.punktas {
  cursor: pointer;
  margin-bottom: -3px;
}
.punktas img {
  position: relative;
  top: 0px;
  padding-right: 5px;
}
.d {
  border: 1px solid red;
}
.c {
  clear: both;
}

.border-vertical {
  width: 20px;
  height: 500px;
  overflow: hidden;
  float: left;
  position: relative;
  position: relative;
  z-index: 500;
}
.border-horizontal {
  height: 20px;
  position: relative;
  overflow: hidden;
  position: relative;
  z-index: 500;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.l {
  float: left;
}
.r {
  float: right;
}
.c:after {
  clear: both;
}
.c:before,
.c:after {
  content: "";
  display: table;
}
.ui-slider-handle {
  background: #1e412d !important;
  border-radius: 20px !important;
  height: 25px !important;
  width: 25px !important;
  margin-top: -3px;
}

.picture {
  box-sizing: border-box;
}

body {
  margin: 0;
}
#drop-panel {
  /* display: flex;
  justify-content: center;
  align-items: center;
  top: 0; */
  /* height: 200px; */
}

.vertical-center {
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

/* #canvas {
  display: none;
} */

.mirror-top {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

.mirror-bottom {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

.mirror-right {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.mirror-left {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

#rotate-right-button,
#rotate-left-button {
  width: 30px;
  height: 30px;
}

#img-frame {
  /* height: 333px;
  width: 500px; */
  height: 480px;
  width: 600px;
  margin: auto;
  display: none;
}

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
}

#download-icon {
  width: 120px;
  height: 90px;
}

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
}

/* Transparent Overlay */
.loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0,
    rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0,
    rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.jumbotron {
    padding: 0 !important;
    background-color: transparent !important;
}