/* ===========================================
   Fertgroup - Gerador de Assinaturas
   Styles
=========================================== */

/* Base */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Open Sans", "Calibri", sans-serif;
  color: #868686;
  background: #dadada;
}

/* Section Titles */
.secTitle {
  margin: 30px 0;
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
}

.secTitle h3 {
  margin: 0;
  padding: 0;
}

/* Header Logo */
.pull-right img {
  max-width: 200px;
  height: auto;
  width: 100%;
}

/* Sections */
section {
  margin: 0;
  padding: 0;
}

/* Form Styles */
.form-group {
  margin-bottom: 15px;
}

.input-group-addon {
  min-width: 140px;
  text-align: left;
}

/* Image Upload Section */
#imgEnable {
  margin: 0 5px;
}

.imgView {
  display: none;
  margin-top: 7px;
}

#imgEnable:checked + label + .imgView {
  display: block;
}

.imgPreview {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

#imagemPreview {
  display: block;
  max-width: 100%;
  width: 160px;
  height: 160px;
}

#imgResult {
  background: transparent;
  display: none;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  border-radius: 50%;
  overflow: hidden;
  border: solid 5px #7bb829;
  position: absolute;
  z-index: -100;
}

#imgResult img {
  max-width: 160px;
  max-height: 160px;
  border-radius: 50%;
}

/* Cropper.js Circular Crop */
.cropper-crop-box,
.cropper-view-box {
  border-radius: 50%;
}

.cropper-view-box {
  box-shadow: 0 0 0 1px #39f;
  outline: 0;
}

/* Result Section */
.container-visualizacao {
  margin: 0 0 15px;
  padding: 20px;
  background: #fff;
}

.btn-container {
  display: flex;
  justify-content: space-between;
  margin: 15px 0 30px 0;
  flex-wrap: wrap;
  gap: 10px;
}

/* Carousel Controls */
.carousel-control {
  background-image: none !important;
  background: transparent;
}

.carousel-control .glyphicon-chevron-left {
  color: #ccc;
  margin-left: -20px;
}

.carousel-control .glyphicon-chevron-right {
  color: #ccc;
  margin-right: -20px;
}

/* Carousel Images */
.carousel-inner img {
  width: 100%;
  height: auto;
}

/* Hidden class */
.hidden {
  display: none !important;
}

/* Version Preview Badge */
.version-preview {
  border-radius: 5px;
  padding: 5px 10px;
  color: white !important;
}

/* Fieldset */
fieldset {
  padding: 0 15px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

legend {
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  border: 0;
  border-bottom: 0;
}

/* Radio */
.radio {
  margin-bottom: 10px;
  margin-top: 8px;
}

/* Button Feedback */
.btn-success-feedback {
  background-color: #5cb85c !important;
  border-color: #4cae4c !important;
}

.btn-danger-feedback {
  background-color: #d9534f !important;
  border-color: #d43f3a !important;
}

/* Responsive */
@media (max-width: 767px) {
  .pull-left {
    float: none !important;
    text-align: center;
  }

  .pull-right {
    float: none !important;
    text-align: center;
    margin-top: 10px;
  }

  .btn-container {
    flex-direction: column;
  }

  .btn-container .btn {
    width: 100%;
  }

  .input-group-addon {
    min-width: 100px;
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .pull-left {
    float: none !important;
  }

  .pull-right {
    float: none !important;
  }
}