body {background: #ffffff; 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;}
h3.faq {font-size: 18px;}
main, .front-container {margin:0 auto; max-width: 980px;}
main{padding:0px 20px 20px 20px;}
.no-highlights{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

/* 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;}

/* MENU */
.header {height:95px;background-color:#fff;position: absolute; width: 100%;}
@keyframes hide-scroll {
    from, to { overflow: hidden; }
}
.header .menu-btn:checked ~ .menu {max-height: 100vh;animation: hide-scroll 0.3s backwards;overflow-y: auto; }
.header ul{margin: 0;padding: 0;list-style: none;overflow: hidden;background-color: #000;}
.header ul a{font-family: Arial, Helvetica, sans-serif;display: block;padding:17px;text-decoration: none;text-align: center;font-weight: bold;}
ul.menu li a{color:#fff;padding:17px;font-family: Arial, Helvetica, sans-serif;}
ul.menu li a:hover {overflow-y: auto;}
ul.submenu li a{color:#000;padding:17px;font-family: Arial, Helvetica, sans-serif;}
ul.submenu.lvl2 li a {color:#000;background: #e9e6d0;padding: 10px 17px;}
.header ul a:hover{background-color: none;}
.header .logo-container{float:left;width: auto;height: auto;}
.header span.logo-img{display:block;margin: 13px 0px 0px 13px; width: 73px;height: 65px;background:url('../images/gotowebtools.png'), no-repeat center;}
.header .menu{clear:both;max-height:0;transition:max-height .2s ease;}
.header ul > li > ul {max-height: 0;overflow: hidden;transition: max-height .2s ease;}
.header .menu .submenu{background: #fff;}
.header .menu-icon {padding: 45px 20px 48px 5px;position:relative;float: right;cursor: pointer;}
.header .menu-icon.nos {padding:45px 28px 48px 11px;}
.header .menu-icon.alt {padding: 45px 28px 48px 5px;}
.header .menu-icon .nav-icon{background: #000;display: block;height:5px;width:33px;position: relative;transition: background .2s ease;}
.header .menu-icon .nav-icon:before{background: #000;content:"";display:block;height:100%;width:100%;position:absolute;transform: all .2s ease;top:10px;}
.header .menu-icon .nav-icon:after{background: #000;content:"";display:block;height:100%;width:100%;position:absolute;transform: all .2s ease;top:-10px;}
.header .menu-btn{display:none;}
.header .menu-btn:checked ~ .menu{max-height: 100vh;overflow: auto;}
.header .menu li:hover ~ .submenu, .header ul > li:hover > ul{max-height: 100vh;overflow: auto;transition: max-height 1s ease;}
.header .menu-btn:checked ~ .menu-icon .nav-icon{background: transparent;   }
.header .menu-btn:checked ~ .menu-icon .nav-icon:before{transform:rotate(-45deg);top:0;}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after{transform:rotate(45deg);top:0;}

/* CONTENT */
.tools-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px;}
.tools-card {background-color: #ffffff;text-align: center;border: 1px solid #363b42;border-radius: 10px;padding: 24px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);display: flex;flex-direction: column;}
.tools-card img {width: 100%;height: auto;max-height: 200px;border-radius: 12px;}
.tools-card h3 a {color: #1e293b;text-decoration: none;}
.tools-card:hover {background-color: #cacaca;}
.width-container, .height-container, .ratio-container, #reset-btn, #pdf-resetBtn, .dz-progress, .dz-error-message, .dz-success-mark, .dz-error-mark, .dz-filename  {display:none;}
.front-wrapper {background-color: #000;color:#fff;width:100%; margin: 95px 0px 15px 0px; box-shadow: 0 8px 12px #a37907;}
.front-container{padding:20px;}
.front-container.image-included{padding:20px 20px 0px 20px;}
.front-image{width:100%; height:166px;margin-bottom: 30px;}
.image-processor.front-image{background: url('../images/image-compression-small.jpg') no-repeat center;}
.image-to-pdf.front-image{background: url('../images/image-to-pdf-small.jpg') no-repeat center;}
#start-process-btn, #reset-btn, #pdf-processBtn, #pdf-resetBtn {width:100%;}
#start-process-btn, #pdf-processBtn { margin-top:10px; background:rgb(172, 219, 158);}
#reset-btn, #pdf-resetBtn { margin-top:15px; background-color: #d0e3ff;}
#reset-btn:hover, #start-process-btn:hover, #pdf-processBtn:hover, #pdf-resetBtn:hover {cursor: pointer; background:#fdc99f;}
.btn { border-radius: 10px; font-weight: 600; padding:15px;}
.progress-wrap { margin-top: 14px; display:none;}
.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; }
#rejected-list {display:none; margin-top:15px; color:#b91c1c; font-size:0.95rem;}
.form-label {display:inline-block; min-width:120px;}
.form-control, #resize-enabled, #ratio-enabled, #image-quality, #pdfMode, #pdfLayout, #pdfCompression {margin:5px 0px;}
.form-control {border-radius: 6px; padding:5px 0px 5px 10px;}
#resize-enabled, #ratio-enabled, #image-quality, #zone-thumbnails, #pdfMode, #pdfLayout, #pdfCompression { 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"], select#zone-thumbnails.disabled, select#zone-thumbnails option[value="0"] {background-color:#ffc3c3;}
select#resize-enabled option[value="1"], select.keep-ratio.enabled, select.select-resize.enabled, select#zone-thumbnails, select#zone-thumbnails option[value="1"] {background-color: rgb(172, 219, 158);}
select#image-quality, select#pdfCompression {background-color:#d0e3ff;}
select#pdfLayout {background-color:#fdffda;}
select#pdfMode {background-color:#ffe0b7;}
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:180px;  background-color:#000000; color: #fff; font-size: 16px; border-top: 2px solid #ddb034;}
.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: 10px 0px;}
ul.footer-menu li a{color: #fff; text-decoration: underline;}
ul.footer-menu li a:hover {color: #ddb034;}
.shield-icon {display: inline-block; content: "\1F6E1"; font-size: 22px; margin-right: 5px;}

/* 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:70%;text-align: center;}
.modal-content.sources {width:50%;text-align: center;}

/*KO-FI*/
.kofi-frame-container {height: 600px;}
.kofi-frame-container iframe {width: 100%;height: 100%;border: none;background: #f9f9f9;}
.kofi-frame-container #donateButton {background: #000!important;}
.kofi-frame-container, .profile-link-container {width:100%; max-width: 400px; margin: 0 auto; text-align: center;}
.profile-link-container a{color: #467ceb;}

@media (min-width: 359px) {
    .front-image{width:360px;height:177px;}
}

@media (min-width: 599px) { 
    .main { margin: 18px; padding: 18px; }
    .front-image{width:100%;height:229px;}
    .image-processor.front-image{background: url('../images/image-compression-middle.jpg') no-repeat center;}
    .image-to-pdf.front-image{background: url('../images/image-to-pdf-middle.jpg') no-repeat center;}
    .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;}
    .header {background-color:#fff;position: relative; width:980px; margin: 0 auto; display: flex; justify-content: space-between;}
    .header span.logo-img{margin: 13px 0px 0px 0px;}
    .front-wrapper {margin: 0px 0px 15px 0px;}
    .form-label {min-width:120px;}
    .form-control, #resize-enabled, #ratio-enabled, #image-quality, #zone-thumbnails {margin:3px 0px;}
    .form-control {border-radius: 6px; padding:5px 0px 5px 10px;}
    #resize-enabled, #ratio-enabled, #image-quality, #zone-thumbnails { border-radius:6px; padding:5px;}
    #image-quality{padding:5px 7px 5px 5px;}
    .front-container{padding:20px;}
    .front-container.image-included {padding: 20px 20px 10px 20px;}
    .front-image{height:310px;}
    .image-processor.front-image{background: url('../images/image-compression.jpg') no-repeat center;}
    .image-to-pdf.front-image{background: url('../images/image-to-pdf.jpg') no-repeat center;}
    .modal-content.general {width:30%;text-align: center;}
    .header .menu li a{color:#000;}
    .header .menu li a:hover, .header .menu li a.active{color:#000;}
    .header .menu li a:hover {text-decoration: underline;}
    .header .menu li{display: inline-block;padding: 0px;margin: 0px;border-radius: 2px;}
    .header .menu li a{text-transform: uppercase;padding:20px 18px;font-size: 15px;font-weight: bold;}
    .header .menu{max-height:none;display: inline-flex;flex-direction: row;gap: 10px;background:  transparent; margin: 25px 20px 0px 0px;  }
    .header .menu-icon, .header .menu-icon .nav-icon{display:none;}
    .header .menu .submenu {position: absolute;border:1px solid #fff; text-align: center;background:#fff;margin-left: -60px;}
    .header .menu .submenu li{display:block;}
    .header .menu .submenu li a{color:#000;padding:17px;}
    .header .menu .submenu li a:hover{background-color:#000; color:#fff; text-decoration: none;}
    a.cursor:hover {cursor: pointer;}
}