body { background-color: #edeff1;font-family: 'Raleway', sans-serif;color: #000;margin: 0;padding: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }
ul { list-style-type: none;padding-left: 50px;margin: 0; }
li { display: block;position: relative;padding: 20px 0px; }
h2 { margin: 10px 0;font-weight: 900; }
hr { border: none;background-color: #acacac;height: 2px; }
.box { display: flex;background: #fff;min-width: 350px;position: relative;top: 50px;align-items: center;column-gap: 2rem;width: 560px;padding: 1rem 2rem;border-radius: 20px;margin: 0 auto;margin-bottom: 10px;box-shadow: 0 8px 10px rgba(0, 0, 0, 0.13);animation: 250ms ease-in 0s 1 drop; }
.box2 { display: flex;flex-direction: column;background: #dddddd;position: relative;top: 50px;column-gap: 2rem;row-gap: 2px;width: 560px;padding: 1rem 2rem;border-top: 1rem solid #fff;border-radius: 20px;margin: 0 auto;box-shadow: 0 8px 10px rgba(0, 0, 0, 0.13);animation: 250ms ease-in 0s 1 drop; }
.boxresult { counter-reset: item;display: flex;flex-direction: column;background: #fff;min-width: 350px;position: relative;top: 50px;align-items: center;column-gap: 2rem;width: max-content;padding: 1rem 2rem;border-radius: 20px;margin: 0 auto;margin-bottom: 10px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.13);animation: 250ms ease-in 0s 1 drop; }
.boxresult img { opacity: 0.7;width: 30px;transition: all 0.8s ease; }
.boxresult img:hover { transform: scale(1.1) skew(4deg, 8deg); }
.box2 span { font-size: 14px;color: #000; }
.box.results { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) inset; }
input[type=radio] { position: absolute;visibility: hidden; }
.optional { color: #6a5d5d;font-size: 15px;font-weight: bold;display: inline-block;margin-top: -10px; }
input[type=submit] { display: flex;justify-content: center;margin: 1rem auto;padding: 0.8rem 1.8rem;background: #2196F3;border-radius: 10px;font-weight: bold;color: #fff;
	font-size: 16px;text-transform: uppercase;letter-spacing: 2px;border: 0;outline: 0;cursor: pointer;
}
pre { text-wrap: wrap;max-width: 980px; }
.inputGroup { background-color: #fff;display: block;width: 100%;margin: 10px 0;position: relative; }
.inputGroup label { font-size: 14px;text-decoration: underline; }
.inputGroup.select select, .inputGroup.input input { padding: 8px;width: 100%; }
input[type="checkbox"] { width: auto !important; }

.wrapper {max-width: 1200px;margin: 0 auto; }
.wrapper .inline { top: 35px;position: relative; }
.wrapper .inline label { color: #3C454C;font-size: 15px;font-weight: bold;padding-left: 15px; }
.wrapper .inline .inline-convert { display: inline-block;margin: 1.5rem 1rem;padding: 0.8rem 1.8rem;background: #2196F3;border-radius: 10px;font-weight: bold;color: #fff;font-size: 16px;text-transform: uppercase;letter-spacing: 2px;border: 0; outline: 0;cursor: pointer; }
textarea.field { display: block;width: 100%;border: 1px solid #fff;border-radius: 20px;box-shadow: 0 8px 10px rgb(0 0 0 / 13%);padding: 1rem; }
textarea.field:focus-visible { outline: 0; }
textarea.field:focus { border: 1px solid #bfb3b3; }
.switch { position: relative;display: inline-block;width: 50px;height: 25px; }
.switch input { opacity: 0;width: 0;height: 0; }
.slider { position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s; }
.slider:before { position: absolute;content: "";height: 20px;width: 20px;left: 4px;bottom: 3px;background-color: white;-webkit-transition: .4s;transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(22px);-ms-transform: translateX(22px);transform: translateX(22px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.remove, .prepend { opacity: 0.5;transition: all 0.3s ease; }
.remove.select, .prepend.select { opacity: 1; }

.grid { display: flex;flex-direction: column;margin: 0 0 2rem;align-items: center;position: relative;background: #e8e8e8;border: 1px solid #b4b4b4;border-radius: 8px;box-shadow: 1px 2px 8px #00000013; }
.grid:before { counter-increment: item;content: counter(item);position: absolute;left: -33px;width: 30px;text-align: right;font-size: 13px; }
.grid.error { box-shadow: 1px 2px 8px #ad2a2a4f;border: 1px solid #c00; }
.grid .files { display: grid;grid-template-columns: max-content max-content;gap: 6rem;padding: 8px 2rem 1rem;border-top: 1px solid #b7b7b7; }
.grid h3 { margin: 5px 0; }
.grid h3.error { color: #af1a1a; }
.grid span { font-size: 14px; }
.grid span.error, span.error { color: #c54d4d; }
.left, .right { position: relative; }
.left:after { content: '\00BB';position: absolute;display: flex;font-weight: bold;font-size: 21px;line-height: 1;right: -3.5rem;top: 0;align-items: center;height: 100%; }
.path:first-of-type { text-align: center;border-bottom: 1px solid #969696;margin-bottom: 2rem;padding: 0 2rem 6px; }
.grid .path:first-of-type { border-bottom: 0;margin-bottom: 0;width: 100%;padding: 4px 6px;background: #d6d6d6;border-top-left-radius: 8px;border-top-right-radius: 8px;font-size: 15px;text-align: left;box-sizing: border-box; }
.grid:hover .path { background: #dedede; }
.grid:hover { background: #ebebeb; }
.tag { font-size: 13px !important;font-weight: bold;background: #0a5fb4;color: #fff;padding: 4px 8px;border-radius: 8px; }
.transfer { font-style: italic;font-size: 13px;padding: 4px 0;text-align: center;color: #fff;background: #599966;width: 100%;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px; }
.transfer.error { background: #b15a5a; }
.status { font-size: 14px; }

@media screen and (max-width: 768px) {
	body { margin: 0; } 
	.box { width: 100%;border-radius: 0; }
}

@keyframes drop {
	0% { transform: translateY(-444px); }
	100% { transform: translateY(0); }
}