@charset "UTF-8";
#overlay-images {
  position: relative;
}
#overlay-images .io-inputs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
#overlay-images .io-inputs > input, #overlay-images .io-inputs > select {
  margin: 0 10px 10px;
  padding: 11px;
}
#overlay-images .io-inputs > select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
}
#overlay-images .io-inputs > div {
  padding: 10px;
  background: #f6f6f6;
  color: #333;
  font-size: 13px;
  margin: 0 10px 5px;
  width: 100%;
}
#overlay-images .io-inputs > div:before {
  content: "";
  font: 15px/1 "fontello";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin-right: 7px;
}
#overlay-images .io-errors > div {
  padding: 10px;
  background: #f6f6f6;
  color: #333;
  font-size: 13px;
  margin-bottom: 5px;
}
#overlay-images .io-errors > div:before {
  content: "";
  font: 15px/1 "fontello";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  margin-right: 7px;
}
#overlay-images .io-errors > div.warn {
  background: #fdfadb;
}
#overlay-images .io-errors > div.warn:before {
  content: "";
}
#overlay-images .io-errors > div.error {
  background: #f6e8db;
}
#overlay-images .io-errors > div.error:before {
  content: "";
}
#overlay-images .io-loader {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  font-size: 15px;
  color: #5a5a5a;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
}
#overlay-images .io-loader:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  width: 60px;
  height: 60px;
  border: 2px solid #f3f3f3;
  border-top: 3px solid #F19409;
  border-radius: 100%;
  animation: spin-loader 1s infinite linear;
}
#overlay-images .io-loader.show {
  display: flex;
}
#overlay-images .croppie-container .cr-boundary {
  width: 100% !important;
  background: url("/bundles/contaoimageoverlay/images/transparent.png");
}
#overlay-images .croppie-container .cr-viewport, #overlay-images .croppie-container .cr-resizer {
  box-shadow: 0 0 2000px 2000px rgba(255, 255, 255, 0.85);
  border: 0 none;
  background-repeat: no-repeat;
  background-size: cover;
}
#overlay-images .croppie-container .cr-slider {
  border: 0 none;
}

@media (min-width: 600px) {
  #overlay-images .io-inputs > input, #overlay-images .io-inputs > select {
    width: calc(50% - 20px);
  }
  #overlay-images .croppie-container .cr-slider-wrap {
    width: 100%;
  }
  #overlay-images .croppie-container .cr-slider-wrap:before, #overlay-images .croppie-container .cr-slider-wrap:after {
    content: "";
    font-family: "fontello";
    font-weight: normal;
    position: relative;
    font-size: 13px;
    line-height: 1;
    top: -6px;
    color: #797979;
  }
  #overlay-images .croppie-container .cr-slider-wrap:after {
    top: -3px;
    font-size: 17px;
  }
}
@keyframes spin-loader {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/*# sourceMappingURL=overlay-images.css.map */