*{margin:0;padding:0;outline:none;border:none;text-decoration:none;box-sizing:border-box;font-family:Poppins,sans-serif}body{background:#e2e2e2}a{width:280px;font-size:14px;color:#555353;display:table;padding:10px}a,nav .fas{position:relative}nav .fas{width:70px;height:40px;top:20px;font-size:20px;text-align:center}.nav-item{position:relative;top:12px;margin-left:10px}a:hover{background:#eee}a:hover i{color:#34af6d;transition:.5s}.logout{position:absolute;bottom:0}.container{display:flex}.main{position:relative;padding:20px;width:100%}.main-top{display:flex;width:100%}.main-top i{position:absolute;right:0;margin:10px 30px;color:#6e6d6d;cursor:pointer}.main .users{display:flex;width:100%}.users .card{width:25%;margin:10px;background:#fff;text-align:center;border-radius:10px;padding:10px;box-shadow:0 20px 35px rgba(0,0,0,.1)}.users .card img{width:70px;height:70px;border-radius:50%}.users .card h4,.users .card p{text-transform:uppercase}.users .card p{font-size:12px;margin-bottom:15px}.users table{margin:auto}.users .per span{padding:5px;border-radius:10px;background:#dfdfdf}.users td{font-size:14px;padding-right:15px}.users .card button{width:100%;margin-top:8px;padding:7px;cursor:pointer;border-radius:10px;background:transparent;border:1px solid #4ad489}.users .card button:hover{background:#4ad489;color:#fff;transition:.5s}.attendance{margin-top:20px;text-transform:capitalize}.attendance-list{width:100%;padding:10px;margin-top:10px;background:#fff;border-radius:10px;box-shadow:0 20px 35px rgba(0,0,0,.1)}.table{border-collapse:collapse;margin:25px 0;font-size:15px;min-width:100%;overflow:hidden;border-radius:5px 5px 0 0}table thead tr{color:#fff;background:#34af6d;text-align:left;font-weight:700}.table td,.table th{padding:12px 15px}.table tbody tr{border-bottom:1px solid #ddd}.table tbody tr:nth-of-type(odd){background:#f3f3f3}.table tbody tr.active{font-weight:700;color:#4ad489}.table tbody tr:last-of-type{border-bottom:2px solid #4ad489}.table button{padding:6px 20px;border-radius:10px;cursor:pointer;background:transparent;border:1px solid #4ad489}.table button:hover{background:#4ad489;color:#fff;transition:.5rem}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}