.logo{background-color:#0ff;border-radius:10px;width:180px;margin-bottom:30px;padding:10px}.divlogo{flex-direction:column;align-items:flex-start;gap:10px;width:200px;display:flex;position:fixed;top:20px;left:20px}.divlogo2{flex-direction:column;align-items:flex-start;gap:10px;width:200px;margin-top:250px;display:flex;position:fixed;top:20px;left:20px}.icons{color:#000;border-radius:10px;align-items:center;gap:10px;width:160px;margin:30px;padding:10px;text-decoration:none;transition:background-color .25s;display:flex}.icons:hover{background-color:#0ff}.linkicon{width:20px;height:20px}.homepage{background-color:#fff;min-height:100vh;margin-left:220px;padding:40px}.welcome{text-align:center;margin-bottom:40px}.welcome h1{margin-bottom:15px;font-size:40px}.welcome p{color:#555;font-size:18px}.about-manager{background-color:#f5ffff;border-left:5px solid #0ff;border-radius:12px;margin-bottom:30px;padding:25px}.about-manager h2,.how-to-use h2{color:#222}.about-manager p{color:#555;line-height:1.7}.steps{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.step{background-color:#f8f8f8;border:1px solid #eee;border-radius:12px;padding:25px;transition:all .25s}.step:hover{background-color:#0ff;transform:translateY(-5px)}.step h3{margin-bottom:10px}.step p{color:#555;line-height:1.6}.form{background-color:#fff;border-radius:15px;flex-direction:column;gap:20px;width:350px;margin:100px auto;padding:40px;display:flex;box-shadow:0 5px 20px #0000001a}.form input{border:2px solid #ddd;border-radius:10px;outline:none;padding:15px;font-size:16px;transition:all .25s}.form input:focus{border-color:#0ff;box-shadow:0 0 5px #0ff}.form button{color:#000;cursor:pointer;background-color:#0ff;border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:700;transition:all .25s}.form button:hover{background-color:#0cc;transform:translateY(-2px)}.headingtwo{margin-right:550px}.info{background-color:#fff;border-radius:15px;flex-direction:column;gap:20px;width:450px;margin:40px auto;padding:30px;display:flex;box-shadow:0 5px 20px #0000001a}.info input,.info textarea{box-sizing:border-box;border:2px solid #ddd;border-radius:10px;outline:none;width:100%;padding:14px;font-family:inherit;font-size:16px;transition:all .25s}.info input:focus,.info textarea:focus{border-color:#0ff;box-shadow:0 0 5px #0ff}.info textarea{resize:vertical;min-height:150px}.info button,.addcustomerbtn{color:#000;cursor:pointer;background-color:#0ff;border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:700;transition:all .25s}.addcustomerbtn:hover,.info button:hover{background-color:#0cc;transform:translateY(-2px)}.customerlist{width:60%;margin:40px auto}.listheader,.customerrow{grid-template-columns:1fr 2fr 2fr 3fr 1fr;align-items:center;gap:20px;display:grid}.listheader{background-color:#0ff;border-radius:10px 10px 0 0;padding:10px;font-weight:700}.customerrow{background-color:#fff;border-bottom:1px solid #ddd;padding:15px}.customerrow:hover{background-color:azure}.customerrow button{cursor:pointer;background:0 0;border:none}.customerrow .linkicon{width:20px;height:20px}.customerlistII{background-color:#fff;border-radius:12px;width:60%;margin:40px auto;overflow:hidden;box-shadow:0 5px 20px #00000014}.listheaderII,.customerrowII{grid-template-columns:1fr 4fr 4fr;align-items:center;gap:20px;display:grid}.listheaderII{background-color:#0ff;padding:15px 20px;font-size:16px;font-weight:700}.customerrowII{border-bottom:1px solid #eee;padding:18px 20px;transition:background-color .2s}.customerrowII:hover{background-color:azure}.customerrowII span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.customerrowII:last-child{border-bottom:none}@media (width<=900px){.homepage{margin-left:200px;padding:30px 20px}.customerlist,.customerlistII{width:90%}.listheader,.customerrow{grid-template-columns:1fr 1.5fr 1.5fr 2fr 1.5fr;gap:10px}.info{width:80%}.steps{grid-template-columns:1fr}}@media (width<=600px){.divlogo,.divlogo2{align-items:center;width:100%;margin:0;padding:10px;position:static}.divlogo2{margin-top:0}.logo{width:150px;margin-bottom:10px}.icons{justify-content:center;width:90%;margin:5px 0}.homepage{margin-left:0;padding:20px 15px}.welcome h1{font-size:30px}.welcome p{font-size:16px}.about-manager{padding:20px}.steps{grid-template-columns:1fr;gap:15px}.step{padding:20px}.form{box-sizing:border-box;width:90%;margin:50px auto;padding:25px}.info{box-sizing:border-box;width:90%;margin:30px auto;padding:20px}.addcustomerbtn{width:100%}.customerlist,.customerlistII{width:100%;margin:30px auto;overflow-x:auto}.listheader,.customerrow{min-width:700px}.listheaderII,.customerrowII{min-width:500px}.headingtwo,.headingthree{text-align:center;margin-left:0;margin-right:0}}
