/******************************************************
 * Modal & allgemeine Styles
 ******************************************************/
/* Form Upload BTN */

button#open-upload-modal {
    background-color: #34a7ad;
    color: #fff;
	text-transform:uppercase;
    outline: 0px;
    font-size:16px;
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0) !important;
    width:100%;
	border-radius:0px;
}
button#open-upload-modal:hover {
    background-color: #268388;
    outline: 0px;
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0) !important;
}
span.upload-ico {
  display:inline-block;
  width:20px;
  height:20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23ffffff"><path d="M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z" fill="%23ffffff"/></svg>');
/*background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%2334a7ad"><path d="M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z" fill="%2334a7ad"/></svg>');*/
  background-repeat:no-repeat;
  background-size:90%;
  background-position:center center;
  margin-left: 20px;
  margin-bottom:-3px;
}



.sgd-modal {
  position: fixed;
  top: 180px; /* Endposition */
  left: 50%;
  transform: translate(-50%, -50px); /* Anfang: 50px nach oben verschoben */
  max-width: 845px;
  width: 95vw;
  background-color: white;
  color: black;
  padding: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  user-select: none;
}
.sgd-modal.sgd-show {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}
.sgd-modal.sgd-hide {
  transform: translate(-50%, -50px);
  opacity: 0;
  visibility: hidden;
}
.sgd-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.sgd-modal-overlay.sgd-show {
  opacity: 1;
  visibility: visible;
}
.sgd-modal-header {
  width: 100%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: 0.2px solid #ccc;
  margin-bottom: 0;
  background: #f4f5f7;
}
.sgd-modal-header h2 {
  margin: 0;
  padding: 10px;
}
.sgd-modal-close {
  position: absolute;
  display: block; 
  padding: 5px 10px;
  font-size: 23px;
  cursor: pointer;
  right: 0;
  top: 0;
  color: red;
  background-color: transparent;
  border-top-right-radius: 3px;
}
.sgd-modal-content {
  position: relative;
  overflow-y: auto;
  padding: 0 15px;
  min-height: 150px;
  max-height: 300px;
}
.sgd-modal-footer {
  padding: 10px;
  min-height: 30px;
  text-align:right;
  border-top: 0.2px solid #ccc;
  background: #f4f5f7;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.sgd-modal-close-btn {
  padding: 7px 10px;
  text-align: center;
  border-radius: 0;
  background: #34a7ad;
  color: #fff;
  border: 0;
}
.sgd-modal-close-btn:hover{
  background: #34a7ad;
  color: #fff;
}


/******************************************************
 * Dropzone Scrollbar (iOS‑ähnlich)
 ******************************************************/
.sgd-modal-content {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.4) transparent; /* Firefox */
}
.sgd-modal-content::-webkit-scrollbar {
  width: 6px;
}
.sgd-modal-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 2px;
}
.sgd-modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 3px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sgd-modal-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.6);
}

/******************************************************
 * Message und info 
 ******************************************************/

/* Form info text unter Button */
.mfu-form-info-message {
    color: #34a7ad;
}


/* Message und info im Modal */

div#uploadInfo {
    height: 45px;
    padding-top: 8px;
}
span.mfu-i-file-size,
span.mfu-i-file-sum, 
span.mfu-i-file-type {
    background: #bfe6e8;
    border: 1px solid #3a9ba0;
    margin: 2px;
    padding: 2px 5px;
    border-radius: 4px;
    margin-right: 10px;
    margin-top: 5px;
    line-height: 23px;
	font-size:12px;
}


.mfu-success-message {
    color: #34a7ad;
    padding: 8px 10px;
    border: 2px solid #34a7ad;
    border-left: 10px solid #34a7ad;
    position: absolute;
    background: #fff;
    z-index: 9;
    top: 15px;
    left: 10px;
    width: 100%;
    min-height: 45px;
    margin-left: 5px;
    margin-right: 5px;
    max-width: 96.3%;
	box-sizing:border-box;
}
.mfu-error-message {
    color: #e30e0e;
    padding: 8px 10px;
    border: 2px solid #e30e0e;
    border-left: 10px solid #e30e0e;
    position: absolute;
    background: #fff;
    z-index: 10;
    top: 15px;
    left: 10px;
    width: 100%;
    min-height: 45px;
    margin-left: 5px;
    margin-right: 5px;
    max-width: 96.3%;
    box-sizing:border-box;
}

/******************************************************
 * Dropzone Drag & Drop Bereich
 ******************************************************/
form#cf7-dropzone {
    margin-bottom: 30px;
}
.dropzone {
  border: 2px dashed #a2afb3 !important;
  background-color: #f4f5f7 !important;
  padding: 20px;
  min-height: 150px;
  border-radius: 4px;
}
.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px;
}
.dropzone .dz-message {
  font-size: 1.2em;
  color: #777;
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer;
    text-transform: uppercase;
    color: #1c9497;
}
.dropzone .dz-preview.dz-image-preview {
    background: transparent;
}
.dropzone .dz-preview .dz-image {
    border-radius: 10px;
	border-bottom-right-radius: 0px;
	border: 1.5px solid #34a7ad;
	background-color: #f4f5f7;
    -webkit-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.13);
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.13);
}
.dropzone .dz-preview .dz-image img {
  max-width: 100%;
  height:auto;
}

/* Ladebalken ausblenden */
.dz-progress {
  display: none !important;
}


/* Beispielhafte CSS */
.dz-pseudo-thumbnail {
    display: block;
    width: 120px;
    height: 120px;
    border: 2px dashed #a2afb3;
    border-radius: 4px;
    color: #666;
    font-size: 3em;
    line-height: 120px;
    cursor: pointer !important;
    margin: 16px;
    text-align: center;
    background: #f4f5f7;
}
.dz-pseudo-thumbnail .plus-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    cursor: pointer !important;
    margin-top: -10px;
    color: #8f8888;
    font-size: 30px;
}
.dz-pseudo-thumbnail:hover .plus-icon {
    color: #238281;
}

/******************************************************
 * Eigene Icons: Checkmark, Error Mark und Entfernen-Schaltfläche
 ******************************************************/


/* Eigene Entfernen-Schaltfläche (statt Text) */
.dz-remove {
    font-size: 0px !important;
    color: transparent !important;
    text-indent: -9999px;
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    z-index: 99;
    bottom: 4px;
    right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23333333'%3E%3Cpath d='M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E");
    background-size: 50%;
    background-repeat: no-repeat;
    background-color: #fff;
	border-radius:100%;
    background-position: center center;
	-webkit-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.13);
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.13);
}
.dz-remove:hover{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23e30e0e'%3E%3Cpath d='M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E");
    background-size: 50%;
    background-repeat: no-repeat;
    background-color: #fff;
}


/* Standard-SVG komplett ausblenden */
.dz-success-mark svg,
.dz-error-mark svg {
  display: none !important;
  opacity:0;
  visibility: hidden;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

/* Standardanzeige ausschalten, wir nutzen unsere eigenen Icons */
.dz-success-mark.success-active {
  width: 24px;
  height: 24px;
  position: absolute;
  top: -8px;
  left: -8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2334a7ad'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 90%;
  background-position:center center;
  background-color: #fff;
  border-radius:100%;
  z-index: 99;
  opacity:1;
  visibility: visible;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

/* Error-Icon bei Fehlversuch */
.dz-error-mark.error-active {
  width: 24px;
  height: 24px;
  position: absolute;
  top: -8px;
  left: -8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23d70c0c'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 90%;
  background-position:center center;
  background-color: #fff;
  border-radius:100%;
  z-index: 99;
  opacity:1;
  visibility: visible;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

/******************************************************
 * Spinner Styles
 ******************************************************/
#uploadSpinner {
  margin: 10px 0;
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  top: -10px;
  left: 0;
  z-index: 99999;
}
.spinner {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 45%;
  left: 45%;
}

/******************************************************
 * Responsive Anpassungen
 ******************************************************/
@media screen and (max-width:992px){
  .sgd-modal.sgd-hide {
    top: 0px;
  }
  .sgd-modal.sgd-show {
    top: 130px;
  }
}

@media screen and (max-width:600px){
.sgd-modal-content {
    max-height: 70vh;
    min-height: 330px;
}
div#uploadInfo {
    height:auto;
    min-height: 30px;
    padding-top: 5px;
    max-width: 380px;
    display: inline-block;
}
.mfu-success-message,
.mfu-error-message{
	margin-top:8px;
	min-height:50px;
	max-width: 93.3%;
}
.dropzone {
    min-height: 250px;
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    margin-top: 90px;
}
.dz-pseudo-thumbnail .plus-icon {
    margin-top: -18px;
}
.spinner {
    top: 45%;
    left: 43%;
}
}