*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;border:none;background:none;outline:none}button{cursor:pointer}a{text-decoration:none;color:inherit}ul,ol{list-style:none}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#dfe4ea;--rounded: .5rem;--input-rounded: .25rem;--input-height: 3rem;--input-padding: 0 .5rem;--input-border-width: 1px;--input-border-color: #ced4da;--card-shadow: 0 0 15px rgba(0, 0, 0, .05);--card-shadow-hover: 0 0 15px rgba(0, 0, 0, .1);--card-padding: 3rem;--transition: all .3s ease-in-out;--text-primary: #212121;--text-secondary: #757575;--text-disabled: #bdbdbd;color:var(--text-primary);--primary: #2196f3;--primary-light: #64b5f6;--primary-dark: #1976d2;--default: #607d8b;--default-light: #90a4ae;--default-dark: #455a64;--default-background: #eceff1;--secondary: #ff9800;--secondary-light: #ffc947;--secondary-dark: #c66900;--error: #f44336;--error-light: #e57373;--error-dark: #d32f2f;--error-background: #ffebee;--warning: #ffeb3b;--warning-light: #fff176;--warning-dark: #fbc02d;--warning-background: #fdfaea;--warning-darker: #db7114;--success: #4caf50;--success-light: #81c784;--success-dark: #388e3c;--success-background: #e8f5e9;--success-rgb: 76, 175, 80;--primary-rgb: 33, 150, 243}button{font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;background-color:transparent;border:0;cursor:pointer}.global-wrapper{width:100%;display:grid;grid-template-columns:minmax(0,960px);justify-content:center;align-items:center;padding:.25rem}h1,h2{font-size:1rem;font-weight:700}main{padding:6rem 0 8rem}input{font-family:inherit;width:100%;height:var(--input-height);border-radius:var(--input-rounded);padding:var(--input-padding);font-size:1rem;font-weight:400;border:var(--input-border-width) solid var(--input-border-color)}input:focus{outline:none;border-color:var(--primary)}.alert{border-radius:var(--input-rounded);font-size:.9rem;font-weight:600;padding:1rem}.alert-success{color:var(--success);border:1px solid var(--success);border-radius:var(--input-rounded);background-color:var(--success-background)}.alert-danger{color:var(--error);border:1px solid var(--error);border-radius:var(--input-rounded);background-color:var(--error-background)}.alert-warning{color:var(--warning-darker);border:1px solid var(--warning-dark);border-radius:var(--input-rounded);background-color:var(--warning-background)}.btn{margin:0;font-size:.8rem;text-transform:uppercase;font-weight:600;height:var(--input-height);width:100%;border-radius:var(--input-rounded);transition:var(--transition);padding:0rem .5rem;display:flex;justify-content:center;align-items:center;cursor:pointer;gap:.5rem}.btn span{font-size:1rem;width:1rem;height:1rem;display:flex;justify-content:center;align-items:center}.btn-primary{color:#fff;background-color:var(--primary)}.btn-primary:hover{background-color:var(--primary-dark)}.btn-secondary{color:#fff;background-color:var(--secondary)}.btn-secondary:hover{background-color:var(--secondary-dark)}.btn-success{color:#fff;background-color:var(--success)}.btn-success:hover{background-color:var(--success-dark)}.btn-danger{color:#fff;background-color:var(--error)}.btn-danger:hover{background-color:var(--error-dark)}.btn-default{color:var(--default-light);background-color:#fff;border:solid 1px var(--default-light)}.btn-default:hover{color:#fff;background-color:var(--default-light)}.btn-icon{width:2.5rem;height:2.5rem;padding:0;font-size:1.25rem}.nav{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;background-color:#fff;position:fixed;top:0;left:0;width:100%;z-index:999;box-shadow:0 0 15px #0000000d}.nav-content{display:flex;align-items:center;justify-content:space-between}.nav-buttons{display:flex;align-items:center;gap:.25rem}.nav-buttons button{width:fit-content;height:2.25rem}.card{background-color:#fff;border-radius:var(--rounded);box-shadow:var(--card-shadow);padding:var(--card-padding);transition:var(--transition)}@media (max-width: 768px){.card{padding:2rem}}.box{position:fixed!important;top:0;left:0;width:100%;height:100%;padding:1rem;display:flex;justify-content:center;align-items:center;z-index:9999;background-color:#000000b3;opacity:0;visibility:hidden}.box.visible{visibility:visible;opacity:1}.box .card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:.8rem;position:relative;padding-top:calc(var(--card-padding) + .5rem)}.btn-close{position:absolute;top:.5rem;right:.5rem;width:2.5rem;height:2.5rem;font-size:1.25rem;padding:0}.add-family{width:100%;max-width:400px;display:flex;flex-direction:column;gap:.8rem;position:relative}.add-family h2{margin-bottom:.5rem}.group-card-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.group-card{background-color:#fff;border-radius:var(--rounded);box-shadow:var(--card-shadow);overflow:hidden}.group-card-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #f0f0f0}.group-card-header h2 div{font-size:.8rem;margin-top:.2rem;font-weight:500;color:var(--text-secondary)}.group-card-list{padding:1rem}.group-card-list li{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.group-card-buttons,.group-card-member{display:flex;align-items:center;gap:.25rem}.group-card-member .btn-icon{width:2rem;height:2rem;padding:0;font-size:1rem}.group-card-member span{margin-left:.5rem;font-weight:500;font-size:.95rem}.checkbox{display:flex;align-items:center;gap:.5rem}.checkbox input{width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--input-border-color);display:flex;justify-content:center;align-items:center}.status{width:.5rem;height:.5rem;border-radius:50%}.status.success{background-color:var(--success)}.status.pending{background-color:var(--warning)}.status.danger{background-color:var(--error)}.tag{display:inline-block;border-radius:1rem;font-size:1rem;font-weight:600;width:1.5rem;height:1.5rem;padding:0;text-align:center;display:flex;justify-content:center;align-items:center}.tag.primary{color:var(--primary);background-color:var(--primary-light)}.tag.secondary{color:var(--secondary);background-color:var(--secondary-light)}.tag.success{color:var(--success);background-color:var(--success-background);border:solid 1px var(--success)}.tag.danger{color:var(--error);background-color:var(--error-background);border:solid 1px var(--error)}.tag.warning{color:var(--warning);background-color:var(--warning-light)}.login{display:flex;justify-content:center;align-items:center;height:100vh;width:100%;padding:.5rem}.login form{width:100%;max-width:400px;padding:3rem 3em;background-color:#fff;border-radius:var(--rounded);box-shadow:var(--card-shadow);transition:var(--transition)}.login form:hover{box-shadow:var(--card-shadow-hover)}.login h1{margin-bottom:1rem}.login input{font-family:inherit;font-size:1rem;height:var(--input-height);width:100%;padding:var(--input-padding);margin-bottom:.8rem;border:var(--input-border-width) solid var(--input-border-color);border-radius:var(--input-rounded)}.login button{margin-bottom:.8rem}.login .error{min-height:var(--input-height);display:flex;align-items:center;border:solid 1px var(--error);background:var(--error-light);padding:0 10px;border-radius:4px;color:var(--error)}