*{margin:0;padding:0;box-sizing:border-box;font-family:roboto,sans-serif}:root{--header-height: 60px;--sidebar-width: 200px;--padding: 20px}.layout{display:grid;grid-template-columns:var(--sidebar-width) auto;width:100%;height:100vh}.layout .header{grid-column:1 / 3}.layout.close-sidebar{grid-template-columns:var(--header-height) auto}.layout main{min-height:calc(100vh - var(--header-height));width:100%;display:flex;align-items:center;justify-content:center}.header{background-color:#282c34;height:var(--header-height);display:flex;flex-direction:row;align-items:center;justify-content:flex-start;font-size:calc(10px + 2vmin);color:#fff}.header .user{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;margin-left:auto;margin-right:10px;user-select:none}.header .user img{width:25px;aspect-ratio:1/1;border-radius:50%;cursor:pointer}.header .user span{cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem}.header .user i{margin-top:2px;font-size:.7rem}.header .user ul{position:absolute;top:50px;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:150px;background-color:#282c34;list-style:none;padding:20px 10px;border-radius:5px;box-shadow:0 0 5px #0000004d;display:none}.header .user ul.open{display:flex}.header .user ul li{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;gap:10px;cursor:pointer}.header .user ul li:hover{color:#61dafb}.header .user ul li a{color:#fff;text-decoration:none;font-family:Roboto,sans-serif;font-size:1rem;background:#61dafb;width:100%;text-align:center;border-radius:2px;padding:10px}.header .user ul li img{width:calc(100% - 40px);margin:auto}.sidebar{position:relative;top:0;height:calc(100vh - var(--header-height));width:100%;background:#292d3e}.sidebar .head{flex-direction:column;gap:10px;background:rgba(0,0,0,.2);color:#fff;display:flex;align-items:center;justify-content:center;padding:20px 10px}.sidebar .head img{height:40px;width:40px;border-radius:50%;margin-right:10px}.sidebar .head h3{font-size:1.2rem;font-family:Roboto,sans-serif;font-weight:400}.close-sidebar .sidebar h3,.close-sidebar .sidebar p{display:none}.sidebar .head p{font-size:.8rem;font-family:Roboto,sans-serif;font-weight:400;letter-spacing:1px}.sidebar .head p i{margin-right:5px;font-size:.5rem}.sidebar .info-head{position:absolute;bottom:100%;display:flex;height:var(--header-height);width:calc(100% + var(--header-height))}.sidebar .info-head h3{flex:1;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-family:Roboto,sans-serif;font-weight:400;color:#fff;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sidebar .info-head button{height:100%;aspect-ratio:1/1;background:transparent;border:none;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff}.sidebar .info-head button:hover{background:rgba(0,0,0,.2);transition:background .3s ease-in-out}.sidebar ul{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;list-style:none;padding:10px 0}.sidebar ul li{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;cursor:pointer}.sidebar ul li a{display:flex;align-items:center;gap:10px;width:100%;padding:15px 20px;color:#fff;text-decoration:none;font-family:Roboto,sans-serif}.close-sidebar .sidebar ul li a{justify-content:center}.sidebar ul li a.active,.sidebar ul li a:hover{background:rgba(0,0,0,.2);transition:background .3s ease-in-out}.sidebar ul li a span{font-size:.9rem;font-family:Roboto,sans-serif;font-weight:400;letter-spacing:1px;color:#fff;text-transform:uppercase}.close-sidebar .sidebar ul li a span{display:none}.sidebar ul li a i{font-size:.8rem}.container{display:flex;flex-direction:column;width:100%;min-height:100%;padding:var(--padding)}.container .breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:20px}.container .breadcrumb a{color:#000;font-family:Roboto,sans-serif;font-size:1rem}.container .breadcrumb a:hover{opacity:.7;transition:opacity .2s ease}.container .content{display:flex;flex-direction:column;border-radius:5px;border:1px solid rgba(0,0,0,.2);box-shadow:0 3px 15px #0000004d;padding-bottom:10px}.container .content .head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid rgba(0,0,0,.2);box-shadow:0 5px 10px #00000026}.container .content .head span.register{font-size:1.5rem}.container .content .head h2{color:#000;font-family:cursive;font-size:1.3rem}.container .content .head p.msg{flex:1;text-align:center;letter-spacing:1px;font-size:1.1rem;color:#06f}.container .content .head .new.cancel{margin-left:auto;margin-right:5px}.container .content .head .new.cancel button{background:#e33f31}.container .content .head .new button{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#fff;font-family:Roboto,sans-serif;font-size:1rem;background:#619efb;border:none;outline:none;border-radius:5px;cursor:pointer;transition:background .3s ease-in-out;opacity:.8}.container .content .head .new button:hover{opacity:1;transition:opacity .2s ease}.container .content .data{display:flex;flex-direction:column}.container .content .data .form{display:flex;flex-direction:column;padding:20px;gap:40px}.container .content .data .form .input{display:flex;flex-direction:column;gap:10px}.container .content .data .form .input label{display:flex;gap:5px;padding-left:5px;white-space:nowrap;font-weight:700}.container .content .data .form .input label b{color:#e33f31}.container .content .data .form .input button,.container .content .data .form .input input,.container .content .data .form .input textarea{padding:10px;border:1px solid rgba(0,0,0,.2);background:#ffffff;border-radius:5px;outline:none;resize:none;font-size:1rem;transition:border .2s ease}.container .content .data .form .input input[type=file]{position:relative;cursor:pointer}.container .content .data .form .input input[type=file]:before,.container .content .data .form .input input[type=file]:after{content:attr(placeholder);position:absolute;z-index:2;top:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;max-width:165px;border-right:1px solid rgba(0,0,0,.2);background:#3382f8;color:#fff;font-size:1.05rem;letter-spacing:1px;opacity:.8}.container .content .data .form .input input[type=file]:after{opacity:1;background:#ffffff;color:#000;z-index:1;content:""}.container .content .data .form .input input[type=file]:hover:before{opacity:1;transition:opacity .2s ease}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(0,0,0,.5)}.modal.open{display:block}.modal .modal-content{position:relative;background:#ffffff;margin:15% auto;padding:20px;width:80%;max-width:500px;border-radius:5px;box-shadow:0 3px 15px #0000004d}.modal .modal-content .close{position:absolute;top:0;right:0;padding:10px;color:#000;font-size:1.5rem;cursor:pointer}.modal .modal-content .close:hover{opacity:.7;transition:opacity .2s ease}.modal .modal-content .modal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.2)}.modal .modal-content .modal-header h2{color:#000;font-family:cursive;font-size:1.3rem}.modal .modal-content .modal-body{display:flex;flex-direction:column;gap:20px;padding:20px 0}.modal .modal-content .modal-body p{color:#000;font-family:Roboto,sans-serif;font-size:1rem}.modal .modal-content .modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px}.modal .modal-content .modal-footer button{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#fff;font-family:Roboto,sans-serif;font-size:1rem;background:#619efb;border:none;outline:none;border-radius:5px;cursor:pointer;transition:background .3s ease-in-out;opacity:.8}.modal .modal-content .modal-footer button:hover{opacity:1;transition:opacity .2s ease}.modal .modal-content .modal-footer button.delete{background:#fa695c}.search-component{flex:1;display:flex;align-items:center;max-width:1000px;gap:10px}.search-component .filter{position:relative;display:flex;align-items:center;gap:10px}.search-component .filter .selected{display:flex;align-items:center;gap:5px;min-width:190px;color:#000;font-family:Roboto,sans-serif;font-size:1rem;padding:5px 10px;cursor:pointer;user-select:none;white-space:nowrap;border:1px solid rgba(0,0,0,.4);border-radius:5px}.search-component .filter .selected span{font-size:.9rem}.search-component .filter .selected i{font-size:.7rem;margin-top:1px;margin-left:auto;transition:transform .2s ease}.search-component .filter.open .selected i{transform:rotate(180deg)}.search-component .filter ul{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:5px;box-shadow:0 3px 15px #0000004d;list-style:none;padding:10px;display:none}.search-component .filter.open ul{display:flex}.search-component .filter ul li{display:flex;gap:10px;width:100%;border-radius:5px}.search-component .filter ul li:hover{background:rgba(0,0,0,.1);transition:background .3s ease-in-out}.search-component .filter ul li input{display:none}.search-component .filter ul li label{flex:1;cursor:pointer;user-select:none;padding:10px}.search-component .filter ul li input:checked~label{font-weight:700}.search-component input[type=search]{width:100%;padding:5px 10px;border:1px solid rgba(0,0,0,.4);border-radius:5px;font-family:Roboto,sans-serif;font-size:1rem;outline:none}.items-surveys{display:flex;flex-direction:column;gap:20px;padding:20px;list-style:none;overflow-y:auto;max-height:calc(100vh - var(--header-height) - 180px)}.items-surveys li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 20px;background:#ffffff;border-radius:5px;border:solid 1px rgba(0,0,0,.15)}.items-surveys li:hover{box-shadow:0 2px 10px #00000040;border:solid 1px rgba(0,0,0,.3);transition:border,box-shadow .2s ease}.items-surveys li .survey-head{padding:0 5px;font-size:1.6rem;color:#0a2b74}.items-surveys li .info{flex:1;display:flex;flex-direction:column;gap:10px}.items-surveys li .info p,.items-surveys li .info b{color:#000;font-size:1rem}.items-surveys li .image{display:flex;align-items:center;justify-content:center;gap:10px}.items-surveys li .image img{height:70px;aspect-ratio:1/1;object-fit:cover;border-radius:3px}.items-surveys li .actions{display:flex;flex-direction:column;align-items:center;gap:5px}.items-surveys li .actions button{display:flex;justify-content:center;align-items:center;aspect-ratio:1/1;max-height:35px;padding:10px 20px;color:#fff;font-family:Roboto,sans-serif;font-size:1rem;border:none;outline:none;border-radius:5px;cursor:pointer;transition:background .3s ease-in-out;opacity:.8}.items-surveys li .actions button:hover{opacity:1;transition:opacity .2s ease}.items-surveys li .actions button.edit{background:#05b422}.items-surveys li .actions button.dell{background:#cf372b}.background-img{position:fixed;top:0;left:0;width:100%;height:100vh;object-fit:cover;z-index:-1}.background-img:before{position:absolute;z-index:1;top:0;left:0;content:"";display:block;width:100%;height:100vh;background-image:linear-gradient(150deg,rgba(35,170,233,.5),rgba(255,123,0,.39))}.background-img img{width:100%;height:100%;object-fit:cover}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.container form{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:400px;padding:40px;border:1px solid #ccc;border-radius:5px;box-shadow:0 0 5px #00000080;background-color:#ffffffb3;backdrop-filter:blur(2px)}.container .head{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:2rem;font-weight:600;margin-bottom:1rem}.container .head .logo{aspect-ratio:1/1;width:70px;margin-right:.5rem}.container .head .logo img{width:100%;height:100%;object-fit:contain}.container .head h2{margin:0;font-size:2rem}.container .inputs{display:flex;flex-direction:column;gap:20px;width:100%;margin-bottom:1rem}.container .inputs .input{display:flex;flex-direction:column;gap:10px;width:100%}.container .inputs .input label{font-size:1rem}.container .inputs .input input{padding:10px;border:1px solid #ccc;border-radius:5px;font-size:1rem;outline:none}.container .inputs .input.msg{text-align:center;color:#00b7ff;letter-spacing:1px;font-size:1rem}.container .inputs .input button[type=submit]{display:flex;align-items:center;justify-content:center;gap:10px;background-color:#48a7ff;color:#fff;font-size:1.2rem;cursor:pointer;padding:10px;outline:none;border:none;opacity:.8;border-radius:5px}.container .inputs .input button[type=submit]:hover{opacity:1;transition:opacity .2s ease}