@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap";header{background-color:#ffffff80;margin-bottom:20px}header .container{padding:10px 0;display:flex;justify-content:space-between;align-items:center}header .container .logoimage{width:250px;height:72px;display:flex;gap:15px;align-items:center;justify-content:center;text-decoration:none;font-weight:700;font-size:1.3rem;text-transform:capitalize}header .container .logoimage img{max-width:100%;height:100%}header .container button{background-color:#333;padding:10px;height:fit-content;color:#333}header .container button:hover{transform:scale(1)}header .container button svg{width:20px;height:20px;color:#fff}header .container .darkmodebtn{background-color:#fff}header .container .darkmodebtn svg{width:20px;height:20px;color:#333}.btn-blue,.bg-blue{background-color:#0d6efd}.text-blue{color:#0d6efd}.btn-green,.bg-green{background-color:#198754}.text-green{color:#198754}.btn-teal,.bg-teal{background-color:#20c997}.text-teal{color:#20c997}.btn-cyan,.bg-cyan{background-color:#0dcaf0}.text-cyan{color:#0dcaf0}.btn-red,.bg-red{background-color:#dc3545}.text-red{color:#dc3545}.btn-secondary,.bg-secondary{background-color:#6c757d}.text-secondary{color:#6c757d}.btn-dark,.bg-dark{background-color:#212529}.text-dark{color:#212529}.btn-light,.bg-light{background-color:#f8f9fa}.text-light{color:#f8f9fa}button{display:block;border:0;padding:15px 25px;color:#fff;font-weight:700;border-radius:6px;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:transform .3s ease;text-transform:capitalize}button:hover{transform:scale(1.05)}.btns{display:flex;justify-content:space-between;align-items:center}.add-field{margin:20px 0;font-size:1.5rem;transition:width .3s ease;width:65px}.add-field:hover{width:100%;transform:translate(0)}.tab-btn{opacity:.5;transition:opacity .3s ease}.tab-btn.active,.tab-btn:hover{transform:scale(1);opacity:1}.fields .field-header{display:grid;grid-template-columns:25% 20% 1fr;gap:12.5px;margin-bottom:20px}.fields .field-header h3{text-transform:capitalize;font-weight:400;letter-spacing:1px;font-size:1.3rem}.fields .field-content li{width:80%;max-width:1170px;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:10px;margin-bottom:10px}.fields .field-content li input,.fields .field-content li select{padding:5px 10px;display:block;border-radius:4px;border:1px solid #888;font-size:1.1rem}.fields .field-content li input:focus,.fields .field-content li input:hover,.fields .field-content li select:focus,.fields .field-content li select:hover{border-color:#333;box-shadow:0 2px 8px #0000001a;background-color:#fefefe;outline:2px solid #333}.fields .field-content li select{text-align:center}.fields .field-content li button{padding:0;color:#333;box-shadow:none;font-size:1.25rem;display:flex;justify-content:center;align-items:center;width:fit-content;margin:0 0 0 auto;border-radius:4px;transition:.3s linear}.fields .field-content li button svg{width:35px;height:35px}.fields .field-content li button:hover{transform:translate(0);background-color:#333;color:#fff}.fields .field-content li:before{content:"";position:absolute;top:0;left:-6px;border-radius:4px;background-color:#20c997;width:6px;height:100%;transform:translate(-100%)}@media (max-width: 768px){.fields .field-header{grid-template-columns:50% 50%;gap:0}.fields .field-header h3{font-size:1.2rem;text-align:center}.fields .field-header h3:last-child{display:none}.fields .field-content li{grid-template-columns:50% 50%;background-color:#fff;padding:15px;width:100%}.fields .field-content li .delete{grid-column:span 2;width:100%;border-radius:4px}}.output_section{position:fixed;width:100%;height:100%;min-height:100vh;top:0;left:0;z-index:1}.output_section .overlay{background-color:#0003;width:100%;height:100%;z-index:2;position:fixed;left:0;top:0}.output_section .out{position:relative;z-index:6;width:80%;margin:auto;background-color:#fff;min-height:80vh;max-height:100vh;overflow:hidden;border-radius:8px;padding:20px;top:50%;transform:translateY(-50%)}.output_section .out textarea{white-space:nowrap;display:block;width:100%;height:70vh;padding:20px;line-height:1.7;font-size:1.2rem;border:0}.output_section .out textarea:focus{outline:0}.output_section .out button{margin-top:10px}.output_section .out .btns.f-center{margin:20px 0}.output_section .out .btns.f-center input{margin-right:10px;width:16px;height:16px}.foot{margin-top:20px}.foot div{margin-top:20px;display:flex;align-items:center;gap:5px}.foot div input,.foot div label{display:block}.foot div label{color:#777;font-size:1.1rem}.foot div input{padding:10px 15px;border:1px solid #999;border-radius:4px;width:100px;font-size:1.1rem}.f-center{justify-content:flex-start;gap:10px}@media (max-width: 768px){.output_section .out{width:95%;margin-top:2vh;height:95vh}.output_section .out textarea{height:70vh;font-size:.9rem;overflow-x:hidden;margin-bottom:1vh}}footer{padding:20px 0;margin-top:20px;background-color:#fff}footer .container{padding:0;margin-bottom:0}footer .container p{text-align:center}footer .container p span{font-weight:700;cursor:pointer;display:inline-block;transition:transform .3s ease}footer .container p span:hover{transform:scale(1.04)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#eee;font-family:Roboto,sans-serif}.container{width:90%;margin:0 auto}ul{list-style:none}body.darkmode{background-color:#333}body.darkmode header{background-color:#0000004d}body.darkmode header .container a{color:#fff}body.darkmode .container .fields .field-header h3{color:#fff}body.darkmode .container .fields .field-content li{background-color:#555;border-radius:10px}body.darkmode .container .fields .field-content li input,body.darkmode .container .fields .field-content li select{background-color:#333;color:#fff}body.darkmode .container .fields .field-content li input:hover,body.darkmode .container .fields .field-content li input:focus,body.darkmode .container .fields .field-content li select:hover,body.darkmode .container .fields .field-content li select:focus{outline-color:#fff}body.darkmode .container .fields .field-content li:before{background-color:#0d6efd}body.darkmode .container .fields .field-content li .delete{background-color:#fff}body.darkmode .container .foot hr{border-color:#999}body.darkmode .container .foot div label{color:#fff}body.darkmode .container .foot div input{background-color:#333;color:#fff}body.darkmode .container .foot div input:hover,body.darkmode .container .foot div input:focus{outline:2px solid #fff}.bounce-enter-active{animation:bounce-in .5s}.bounce-leave-active{animation:bounce-in .5s reverse}@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}