body {background: #fffffa; color:#000;font-family: Verdana, Geneva, Tahoma, sans-serif; margin:0px; padding:0px;min-height:100vh; display:flex; flex-direction:column; justify-content:space-between;}
.dropzone-container {border: 2px dashed #4A5568;border-radius: 8px;background: #F7FAFC;padding: 40px;text-align: center;cursor: pointer;}
h1, h2, h3 {margin:25px 0px; padding: 0;}
h1{font-size: 26px;}
h2, h3{font-size: 22px;}
main {margin:0 auto; max-width: 980px; padding: 20px;}

/* DROPZONE  */
.dropzone .dz-preview { display: inline-block; margin: 10px; }
#private-dropzone {display: flex;flex-wrap: wrap;gap: 12px;padding: 20px;border: 2px dashed #ccc;background: #f9f9f9;min-height: 150px;align-items: center;justify-content: center;margin: 15px 0px;}
#private-dropzone .dz-message {width: 100%;text-align: center;margin: 2em 0;}
#private-dropzone.dz-started {justify-content: flex-start;align-items: flex-start;}
#private-dropzone .dz-preview {margin: 0 !important;min-height: auto !important;width: 80px; font-size: 11px;}
#private-dropzone .dz-preview .dz-image {width: 80px !important;height: 80px !important;border-radius: 6px;}
#private-dropzone .dz-preview .dz-image img {width: 80px !important;height: 80px !important;object-fit: cover;}
#private-dropzone .dz-preview .dz-progress {width: 60px !important;margin-left: -30px !important;}

/* CONTENT */
.width-container, .height-container, .ratio-container, #reset-btn, .dz-progress, .dz-error-message, .dz-success-mark, .dz-error-mark, .dz-filename  {display:none;}
#start-process-btn, #reset-btn {width:100%;}
#start-process-btn { margin-top:10px; background:rgb(172, 219, 158);}
#reset-btn { margin-top:15px; background-color: #d8fcff; }
#reset-btn:hover, #start-process-btn:hover {cursor: pointer; background:#fdc99f;}
.btn { border-radius: 10px; font-weight: 600; padding:15px;}
.progress-wrap { margin-top: 14px; }
.progress-info { font-size: 0.95rem; color: #334155; display:flex; justify-content:left; gap:8px; align-items:left; }
.progress { height: 12px; background: #eef2ff; border-radius: 999px; overflow: hidden; margin-top: 8px; width: 100%; max-width:100%; margin-left:2px; margin-right:2px; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg,#60a5fa,#4f46e5); transition: width .25s ease; }
.progress-percent { font-weight: 700; color: #0b1220; }
.counts { color: #94a3b8; font-size: .85rem; }
.rejected-file { display:block; }
.form-label {display:inline-block; min-width:120px;}
.form-control, #resize-enabled, #ratio-enabled, #image-quality {margin:5px 0px;}
.form-control {border-radius: 6px; padding:5px 0px 5px 10px;}
#resize-enabled, #ratio-enabled, #image-quality { border-radius:6px; padding:8px;}
#resize-width, #resize-height {width:100px;}
#image-quality{padding:8px 10px 8px 8px;}
.verify{border-radius:6px;}
.captcha-container{display:block;text-align:left;}
.processor-captcha {border-radius:6px; padding:9px;vertical-align:top;border:1px solid #000; width:160px;}
.processor-captcha, .form-control {background-color: #e4e4e4;}
select.select-resize, select.keep-ratio.disabled, select#ratio-enabled option[value="0"] {background-color:#fdc99f;}
select#resize-enabled option[value="1"], select.keep-ratio.enabled, select.select-resize.enabled {background-color: rgb(172, 219, 158);}
select#image-quality {background-color:#d8fcff;}
ul.privacy-list {padding-left: 20px;}
ul.privacy-list li{margin-bottom: 25px;}
ul.privacy-list li:first-child {margin-top: 30px;}
ul.privacy-list li:last-child {margin-bottom: 30px;}
footer {margin-top:30px; padding: 20px 15px; min-height:200px;  background-color:#000000; color: #fff; font-size: 16px; border-top:3px rgb(41, 175, 0) solid;}
.copyright-container, .footer-menu-container, .donation-addresses {display:block; width:100%; padding:0px 0px 5px 0px;} 
.copyright-container, .donation-addresses {vertical-align:top;text-align:center;}
ul.footer-menu{display: flex;
    flex-direction: column;align-items: center;justify-content: center;padding: 0;margin: 10px 0; list-style: none;}
ul.footer-menu li{ margin: 8px 0px;}
ul.footer-menu li a{color: #fff; text-decoration: underline;}

/* MODAL */
.modal {display: none; position: fixed; z-index: 1000; left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.5);}
.modal-content {position: absolute;background-color: #fff;margin: auto;padding: 20px;border-radius: 8px;width: 50%;top: 50%; left: 50%; transform: translate(-50%, -50%);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);border:2px solid #000; }
.modal-content.status {min-width:50%;max-width:90%;width: auto;min-height:50%;height:auto;}
.modal-content h2 {margin-top: 10px;font-size: 24px;text-align: center;}
.modal-content button {margin: 10px 5px;padding: 10px 15px;font-size: 16px;border: none;border-radius: 4px;cursor: pointer;box-shadow: 0 2px 2px #000;}
.modal-content .modal-buttons.status button {border-radius: 50%;padding: 5px 10px; }
.modal-content .modal-fields .modal-translations, .modal-content .modal-fields .modal-urls  {margin:5px;}
.modal-content .modal-fields .modal-translations label, .modal-content .modal-fields .modal-urls label {width:60px;display: inline-block;}
.modal-content .modal-fields .modal-translations input, .modal-content .modal-fields .modal-urls input {width: 340px;}
.modal-content .modal-buttons {margin-top:15px;width:100%;text-align:center;}
.modal-content .modal-buttons.status {position:absolute; top:0; right: 5%;width:20px; border-radius: 50%;} 
.modal-content span.title {text-align: center; font-weight: bold;display:inherit; width:100%;}
#close-modal, #close-general-modal {background-color: #000;color: white;}
.modal-content button:hover {opacity: 0.9;}
.modal-fields .content-item {display:inline-block;}
.modal-fields .content-item-name {min-width: 180px;vertical-align: top;}
.modal-fields .content-item-name, .modal-fields .content-item-status {display: inline-block;}
#close-general-modal {margin-top: 20px;}
.modal-content.general {width:30%;text-align: center;}
.modal-content.sources {width:50%;text-align: center;}


@media (min-width: 599px) { 
    .main { margin: 18px; padding: 18px; }
    .form-label {min-width:120px;}
}

@media (min-width: 727px) { 
    .footer-container { margin: 0 auto; max-width: 980px; }
    .copyright-container, .footer-menu-container {display:inline-block; width:49%;} 
    .copyright-container, .donation-addresses {text-align: left ; }
    .footer-menu-container{text-align: right;}
    ul.footer-menu{list-style-type: none;display:inline-block;}
    ul.footer-menu li{display:inline; margin: 0px 0px 0px 30px;}
    ul.footer-menu li a{color: #fff; text-decoration: underline;}
}

@media (min-width:1023px) {
    main{width:980px;}
    .form-label {min-width:120px;}
    .form-control, #resize-enabled, #ratio-enabled, #image-quality {margin:3px 0px;}
    .form-control {border-radius: 6px; padding:5px 0px 5px 10px;}
    #resize-enabled, #ratio-enabled, #image-quality { border-radius:6px; padding:5px;}
    #image-quality{padding:5px 7px 5px 5px;}
}