@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";.landing-page{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;font-family:Arial,sans-serif;text-align:center;width:100%}.landing-page h1{font-size:2.5rem;margin-bottom:1rem}.landing-page span{font-size:1.2rem;margin-bottom:2rem}.roles{display:flex;gap:1.5rem}.role-button{padding:.75rem 1.5rem;font-size:1rem;font-weight:700;color:#fff;border:none;border-radius:5px;cursor:pointer;box-shadow:0 4px 6px #0003;transition:transform .3s ease,box-shadow .3s ease}.role-button.lecturer{background:#ff8c42}.role-button.student{background:#42a5f5}.role-button:hover{transform:translateY(-3px);box-shadow:0 6px 12px #0000004d}.role-button:active{transform:translateY(1px);box-shadow:0 3px 6px #0000004d}@media (max-width: 400px){.landing-page h1{font-size:2rem}.landing-page span{font-size:1rem}.roles{gap:1rem;margin:0 2rem}.role-button{font-size:.8rem;padding:.5rem 1rem}}*{font-family:Poppins,sans-serif;margin:0;padding:0;box-sizing:border-box}body{background-color:#1a1a1a;font-family:Poppins,sans-serif;background-color:#f9f9f9;color:#333;line-height:1.5}main{display:flex;flex-direction:column;align-items:center;margin-top:6.25rem;overflow:hidden;box-sizing:border-box}form{background-color:#1a1a1a;padding:2rem;border-radius:.5rem;border:.0625rem solid #333;width:40%;box-shadow:0 0 .375rem #333;padding:1.5rem;box-sizing:border-box}@media (max-width: 820px){form{width:50%}}form .flex{display:flex;flex-direction:column;gap:1.5rem}label{font-weight:700;color:#e5e5e5}input,select{background-color:#1a1a1a;color:#e5e5e5;width:100%;padding:.75rem;margin-top:.5rem;border:.0625rem solid #333;border-radius:.25rem;font-size:1rem}input[type=checkbox]{background-color:transparent;transform:scale(1.5);margin-right:10px;cursor:pointer}input:disabled,select:disabled{background-color:#e5e5e5;color:#333}input:focus,select:focus{border-color:#007bff;outline:none;box-shadow:0 0 .3125rem #007bff80}input[type=checkbox]:focus{background-color:transparent;border:none;box-shadow:none}.close-button{display:flex;justify-content:center;align-items:center;background-color:transparent;color:#fff;padding:.5rem .2rem;font-size:.8rem;font-weight:700;border:none;border-radius:.25rem;cursor:pointer;width:3rem;transition:background-color .3s ease}.close-button:hover{background-color:#302e3b}button,.btn{background-color:#033581;color:#fff;padding:.5rem 1.5rem;font-family:Poppins,sans-serif;font-size:.9rem;font-weight:700;border:none;width:100%;border-radius:.1875rem;cursor:pointer;transition:background-color .3s ease}button:hover,.btn:hover{background-color:#007bff}.error{font-size:.875rem;color:#e63946;margin-top:.25rem}fieldset{border-radius:.5rem;padding:2rem;width:100%;color:#e5e5e5;max-width:31.25rem;background-color:#1a1a1a;box-shadow:.25rem .25rem .375rem #333;margin-bottom:1rem}legend{font-size:1rem;color:#fff;background-color:#1a1a1a;border-radius:.1875rem;padding:.3rem 1rem}.group{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:1rem}.cont{display:flex;flex-direction:column;align-items:center}.cont .margin-right{margin-right:1rem;display:inline-block}p{font-size:1rem;margin:0}button.home-link{background-color:#28a745}button.home-link:hover{background-color:#1c7430}a{text-decoration:none;color:inherit}a.not-found{text-decoration:underline}a.not-found:hover{color:#00f}.url{margin:1rem 0}header{background-color:#121212;color:#fff;padding:1rem 2rem;box-shadow:0 .25rem .375rem #0000001a;position:fixed;width:100%;top:0;right:0;left:0}header nav{display:flex;justify-content:space-between;align-items:center;width:100%}nav .right p{margin:0;font-size:1rem;line-height:1.5;font-weight:700;text-transform:uppercase}.display-list{box-shadow:.25rem .25rem .375rem #252525;width:80%;overflow-x:auto;border:none;border-radius:.625rem;min-width:14.375rem}.list{-webkit-user-select:none;user-select:none}table{border:none;width:100%;border-collapse:collapse;background-color:#121212;border-radius:.5rem;overflow:hidden}tr{cursor:pointer}tr:hover{background-color:#717171}th,td{padding:.75rem;text-align:left;border:.0625rem solid #333;letter-spacing:.1rem}th{background-color:#033581;color:#e5e5e5;font-weight:700}tr,thead{color:#e5e5e5}.empty{text-align:center;color:#999;font-style:italic;padding:1rem 0}.check-in{margin-top:1.5rem;text-align:center}.register{margin:3rem 0}.group-info{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem;opacity:1;width:80%;transition:opacity .2s ease;transform:translateY(0)}.hidden{display:none;transform:translateY(-10px);pointer-events:none}.course-code,.group-id,.group-info button{font-size:1.1rem;text-transform:uppercase;font-size:.8rem;text-wrap:none;white-space:nowrap;background-color:#121212}.group-info button:active{background-color:#003d80;transform:scale(1)}footer{width:100%;text-align:center;padding:1rem 0;font-weight:300;font-size:.7rem}@media (max-width: 48rem){nav h1{text-align:center}.group{flex-direction:column;gap:.5rem}.cont{display:flex;flex-direction:column;align-items:center}th,td{font-size:.875rem}form{min-width:21.875rem}.check-in .btn{padding:.75rem 1.5rem;font-size:.875rem}.display-list{overflow-x:auto}}@media (max-width: 25rem){main{margin-top:5rem}nav h1{font-size:1.2rem;text-align:center}form{padding:1rem;min-width:15.625rem}input,select{padding:.5rem;font-size:.75rem}button{width:100%;font-size:.7rem;letter-spacing:.1rem;padding:.5rem}th,td{font-size:.75rem;padding:.5rem}fieldset{padding:1rem}.group-info{align-items:center;font-size:.75rem}.group-info div{padding:.5rem}.group-id,.course-code{font-size:.5rem}.check-in .btn{padding:.5rem 1rem;font-size:.75rem}footer p{font-size:.7rem}}@media (max-width: 450px){nav .right p{display:none}}.error-alert-container{display:flex;flex-direction:column;gap:.5rem;width:25rem;z-index:50;position:fixed;top:2rem}@media (max-width: 40rem){.error-alert-container{width:20rem;font-size:.875rem}}.error-alert{display:flex;align-items:center;justify-content:space-between;background-color:#232531;border-radius:.5rem;padding:.625rem}.alert-content{display:flex;gap:.5rem}.alert-title{color:#fff;font-weight:700}.alert-description{font-size:.8rem}.icon-container{color:#d65563;padding:.25rem;display:flex;align-items:center}.icon{width:1.2rem;height:1.2rem}.alert-text{font-size:.875rem;color:#ccc;text-align:left;display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.modal{position:fixed;top:0;bottom:0;right:0;left:0;display:flex;justify-content:center;align-items:center;background-color:#070707e6;min-height:100vh;height:100%;z-index:50}.container{display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:#232323;color:#e5e5e5;padding:2rem;width:50%;border-radius:.625rem}.details{margin:1rem}.details div{font-size:.8rem;text-transform:capitalize}.details span{font-weight:700}.container .message{font-size:.8rem;margin-top:1rem;text-align:center}.buttons{display:flex}button.no{margin-right:1rem;background-color:#e63946;padding-left:2rem;padding-right:2rem}button.no:hover{background-color:#ba3c46}button.yes{margin-right:1rem;padding-left:2rem;padding-right:2rem}.date{margin-top:3rem;font-size:.8rem}.search-bar{display:flex;align-items:center;justify-content:center;margin-bottom:2rem;width:300px;transition:width .5s ease}.search-bar.focused{width:80%}.search-bar input{width:100%;transition:width .5s ease;opacity:1;margin:0}.search-bar button{width:3rem;display:flex;justify-content:center;align-items:center;height:2.8rem;margin-left:1rem;opacity:1;transition:opacity .5s ease}.loader-cont{margin-top:.5rem;display:flex;justify-content:center;align-items:center;width:100%}.loader{transform:rotate(45deg);perspective:1000px;border-radius:50%;width:25px;height:25px;color:#fff}.loader:before,.loader:after{content:"";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff3d00;transform:rotateY(70deg);animation-delay:.4s}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotateccw{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes spin{0%,to{box-shadow:.2em 0 0 0 currentcolor}12%{box-shadow:.2em .2em 0 0 currentcolor}25%{box-shadow:0 .2em 0 0 currentcolor}37%{box-shadow:-.2em .2em 0 0 currentcolor}50%{box-shadow:-.2em 0 0 0 currentcolor}62%{box-shadow:-.2em -.2em 0 0 currentcolor}75%{box-shadow:0 -.2em 0 0 currentcolor}87%{box-shadow:.2em -.2em 0 0 currentcolor}}.history-container{background-color:#fff;border-radius:10px;padding:20px;width:90%;max-width:500px;box-shadow:0 4px 10px #0003;font-family:Arial,sans-serif;text-align:center}.close-button{position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;padding:5px;transition:transform .2s ease}.close-button .icon{width:24px;height:24px;color:#555}.close-button:hover{transform:scale(1.1)}.history-container p{margin:10px 0;color:#333;font-size:16px;line-height:1.5}.history-container p:first-of-type{font-size:20px;font-weight:700}.history-container p:last-of-type{font-size:18px;color:#007bff}@media (max-width: 768px){.history-container{padding:15px;font-size:14px}}