vaadin-scroller[slot=drawer]{padding:var(--lumo-space-s);background:var(--gradient-primary);width:250px}vaadin-app-layout::part(drawer){width:250px}vaadin-app-layout::part(navbar){background-color:var(--gradient-primary)}vaadin-app-layout::part(navbar-top){background:var(--gradient-primary);height:50px;color:#fff}vaadin-side-nav-item::part(link){color:#fff}vaadin-side-nav-item::part(link):hover{color:#fff;background-color:#6935cee6;border-radius:8px}vaadin-side-nav-item[current]{background-color:var(--lumo-primary-color);color:#fff;border-radius:8px}vaadin-side-nav>[slot=label],vaadin-side-nav::part(toggle-button):before{color:#d3d3d3}vaadin-drawer-toggle::part(icon){color:#fff}vaadin-side-nav-item vaadin-icon{padding:0;width:15px;color:#fff}vaadin-side-nav-item{color:#fff}.app-header-section{background:var(--gradient-primary);color:#fff}.header-nav-flexlayout{box-sizing:border-box}.header-nav-avatar{border-radius:10px}.signout-layout{border-radius:5px;box-sizing:border-box;padding:5px;margin-right:10px;align-items:center;color:red;background-color:#fff}.signout-layout:hover{cursor:pointer;opacity:.7;transition:.2s ease-out}[slot=drawer]:is(header,footer){display:flex;align-items:center;gap:var(--lumo-space-s);padding:var(--lumo-space-s) var(--lumo-space-m);min-height:var(--lumo-size-xl);box-sizing:border-box;width:250px}[slot=drawer]:is(header,footer):is(:empty){display:none}.site-logo{width:fit-content;height:20px}.collapsible-item>[slot=label]{color:gray}.collapsible-item::part(toggle-button){color:#fff}#outlet>.page-content,#outlet>*{will-change:opacity,transform}.view-enter,#outlet>.view-enter,#outlet>.page-content.view-enter{animation:view-enter .32s cubic-bezier(.2,.9,.2,1) both}.view-exit,#outlet>.view-exit{animation:view-exit .22s cubic-bezier(.4,0,.2,1) both}@keyframes view-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes view-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px) scale(.995)}}@media(prefers-reduced-motion:reduce){#outlet>.page-content,#outlet>*{will-change:auto}.view-enter,#outlet>.view-enter,#outlet>.page-content.view-enter,.view-exit,#outlet>.view-exit{animation:none!important}}.session-dialog::part(backdrop){--lumo-border-radius: 8px;background:var(--gradient-primary);width:100%;height:100%;top:0;left:0;justify-content:center;align-items:center}.session-dialog-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px;text-align:center;margin:auto}.session-dialog-title{margin:0;font-size:18px;font-weight:500;color:var(--header-text-color)}.session-dialog-link{padding:10px 24px;font-weight:500;text-decoration:none;border-radius:4px;background-color:var(--lumo-primary-color);color:#fff;transition:background-color .2s ease}.signout-dialog{gap:13px}.signout-dialog vaadin-button{background:red;color:#fff;padding:10px;font-size:smaller}.session-dialog-link:hover{background-color:var(--lumo-primary-color-50pct)}.dashboard-view{padding:20px;box-sizing:border-box;display:block;position:relative;height:100%;overflow-y:auto;--cv-blue: 212 96% 54%;--cv-purple: 259 97% 66%;--cv-dropzone-border-color: hsl(var(--cv-blue) / .5);--cv-dropzone-bg-color: hsl(var(--cv-blue) / .2);--cv-droptarget-border-color: hsl(var(--cv-purple) / 1);--cv-droptarget-bg-color: hsl(var(--cv-purple) / .4);--cv-stripe-width: 1.5px;--cv-stripe-gap: 9px;--cv-stripe-color: hsl(var(--cv-blue) / .2);--cv-layout-border-color: var(--lumo-contrast-40pct);--cv-checkerboard-color1: hsl(0 0% 0% / .05);--cv-checkerboard-color2: hsl(0 0% 100% / .05);--cv-checkerboard-size: 16px}.dashboard-view[dragging]{--cv-checkerboard-color1: hsl(var(--cv-blue) / .2);--cv-checkerboard-color2: hsl(var(--cv-blue) / .1);--cv-layout-border-color: var(--cv-dropzone-border-color)}.dashboard-view .preview-container{display:contents}.dashboard-view .preview-container>.layout[style*="align-self: stretch"]{width:100%}.dashboard-view .preview-container>.layout[style*="flex-grow: 1"]{height:100%}.dashboard-view[dragging] .layout:not([style*="gap:"]){gap:8px}.dashboard-view[dragging] .layout:not([style*="padding:"],[empty]){padding:8px}.dashboard-view .cover-overlay{position:absolute;border-radius:1px}.dashboard-view:not([starting-drag]) .cover-overlay.editable-hovering{outline:2px solid hsl(var(--cv-blue) / 1);outline-offset:-1px}.dashboard-view:not([starting-drag]) .cover-overlay.editable-editing{outline:1px solid hsl(var(--cv-blue) / 1);outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--lumo-base-color)}.dashboard-view .overlays,.dashboard-view .drop-zones{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.dashboard-view:not([dragging]) .drop-zones{pointer-events:none}.dashboard-view .drop-zone{position:absolute;box-sizing:border-box;border-radius:1px;min-height:10px;min-width:10px}.dashboard-view[dragging] .drop-zone:not([empty-layout]){outline:1px dashed var(--cv-dropzone-border-color);outline-offset:-2px;background-color:var(--cv-dropzone-bg-color)}.dashboard-view .drop-zone[remaining-space]{background:repeating-linear-gradient(-45deg,var(--cv-stripe-color),var(--cv-stripe-color) var(--cv-stripe-width),transparent var(--cv-stripe-width),transparent var(--cv-stripe-gap))}.dashboard-view[dragging] .drop-zone[drag-over]{background:var(--cv-droptarget-bg-color);outline:1px solid var(--cv-droptarget-border-color);outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--lumo-base-color)}.dashboard-view:not([readonly]) .layout[empty],vaadin-form-layout[empty]{border-radius:1px;background:repeating-conic-gradient(var(--cv-checkerboard-color1) 0% 25%,var(--cv-checkerboard-color2) 0% 50%) 50% / var(--cv-checkerboard-size) var(--cv-checkerboard-size);background-clip:content-box;outline:1px dashed var(--cv-layout-border-color);outline-offset:-2px}.dashboard-view[dragging]:not([readonly]) vaadin-form-layout[empty]{background:transparent}.dashboard-view .layout[empty]:before{content:"";display:block;min-width:64px;min-height:32px}.dashboard-view[readonly] .drop-zones,.dashboard-view[readonly] .overlays,.dashboard-view[inline-editing] .drop-zones,.dashboard-view[inline-editing] .overlays{display:none}.dashboard-view .content-wrapper[contenteditable=true]{display:inline-block;overflow:hidden;width:100%}.dashboard-view[dragging] vaadin-form-layout{padding:8px}.dashboard-view vaadin-form-layout[empty]:before{content:"";display:block;min-width:64px;min-height:32px}.dashboard-view[dragging] vaadin-form-layout:not([empty]):after{content:"";display:block;min-width:64px;min-height:32px}.dashboard-card-icon{color:#fff;width:40px;height:40px;border:2px solid white;background-color:#ffffff80;padding:5px;border-radius:30%}.dashboard-card-div{padding:15px;box-sizing:border-box;border-radius:8px;box-shadow:0 2px 4px #0000001a;backdrop-filter:blur(10px);color:#f8f2f2;background-color:#01a5db;margin:10px auto}.dashboard-card-div:hover{cursor:pointer;transition:.2s ease-out;scale:1.05}.dashboard-card-div:nth-child(4) p{color:#c9d9e3}.dashboard-card-div h2{color:#fff;font-size:32px}.dashboard-header{background-color:#f2f8ff;border:1px solid #eee;padding:10px;text-align:center;box-sizing:border-box;border-radius:8px;color:#7294a6}.dashboard-description{margin:20px auto;padding:20px;border:1px solid #eeeeee;color:var(--lumo-secondary-text-color);box-sizing:border-box;background-color:#f2f8ff;border-radius:8px}.dashboard-description h1{font-size:32px}.dashboard-footer{margin-top:200px;text-align:center;display:flex;align-items:center;justify-content:center;align-self:self-end;box-sizing:border-box}.programmes-view{padding:10px;box-sizing:border-box;display:block;position:relative;height:100%;overflow-y:auto;--cv-blue: 212 96% 54%;--cv-purple: 259 97% 66%;--cv-dropzone-border-color: hsl(var(--cv-blue) / .5);--cv-dropzone-bg-color: hsl(var(--cv-blue) / .2);--cv-droptarget-border-color: hsl(var(--cv-purple) / 1);--cv-droptarget-bg-color: hsl(var(--cv-purple) / .4);--cv-stripe-width: 1.5px;--cv-stripe-gap: 9px;--cv-stripe-color: hsl(var(--cv-blue) / .2);--cv-layout-border-color: var(--lumo-contrast-40pct);--cv-checkerboard-color1: hsl(0 0% 0% / .05);--cv-checkerboard-color2: hsl(0 0% 100% / .05);--cv-checkerboard-size: 16px}.programmes-view[dragging]{--cv-checkerboard-color1: hsl(var(--cv-blue) / .2);--cv-checkerboard-color2: hsl(var(--cv-blue) / .1);--cv-layout-border-color: var(--cv-dropzone-border-color)}.programmes-view .preview-container{display:contents}.programmes-view .preview-container>.layout[style*="align-self: stretch"]{width:100%}.programmes-view .preview-container>.layout[style*="flex-grow: 1"]{height:100%}.programmes-view[dragging] .layout:not([style*="gap:"]){gap:8px}.programmes-view[dragging] .layout:not([style*="padding:"],[empty]){padding:8px}.programmes-view .cover-overlay{position:absolute;border-radius:1px}.programmes-view:not([starting-drag]) .cover-overlay.editable-hovering{outline:2px solid hsl(var(--cv-blue) / 1);outline-offset:-1px}.programmes-view:not([starting-drag]) .cover-overlay.editable-editing{outline:1px solid hsl(var(--cv-blue) / 1);outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--lumo-base-color)}.programmes-view .overlays,.programmes-view .drop-zones{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.programmes-view:not([dragging]) .drop-zones{pointer-events:none}.programmes-view .drop-zone{position:absolute;box-sizing:border-box;border-radius:1px;min-height:10px;min-width:10px}.programmes-view[dragging] .drop-zone:not([empty-layout]){outline:1px dashed var(--cv-dropzone-border-color);outline-offset:-2px;background-color:var(--cv-dropzone-bg-color)}.programmes-view .drop-zone[remaining-space]{background:repeating-linear-gradient(-45deg,var(--cv-stripe-color),var(--cv-stripe-color) var(--cv-stripe-width),transparent var(--cv-stripe-width),transparent var(--cv-stripe-gap))}.programmes-view[dragging] .drop-zone[drag-over]{background:var(--cv-droptarget-bg-color);outline:1px solid var(--cv-droptarget-border-color);outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--lumo-base-color)}.programmes-view:not([readonly]) .layout[empty],vaadin-form-layout[empty]{border-radius:1px;background:repeating-conic-gradient(var(--cv-checkerboard-color1) 0% 25%,var(--cv-checkerboard-color2) 0% 50%) 50% / var(--cv-checkerboard-size) var(--cv-checkerboard-size);background-clip:content-box;outline:1px dashed var(--cv-layout-border-color);outline-offset:-2px}.programmes-view[dragging]:not([readonly]) vaadin-form-layout[empty]{background:transparent}.programmes-view .layout[empty]:before{content:"";display:block;min-width:64px;min-height:32px}.programmes-view[readonly] .drop-zones,.programmes-view[readonly] .overlays,.programmes-view[inline-editing] .drop-zones,.programmes-view[inline-editing] .overlays{display:none}.programmes-view .content-wrapper[contenteditable=true]{display:inline-block;overflow:hidden;width:100%}.programmes-view[dragging] vaadin-form-layout{padding:8px}.programmes-view vaadin-form-layout[empty]:before{content:"";display:block;min-width:64px;min-height:32px}.programmes-view[dragging] vaadin-form-layout:not([empty]):after{content:"";display:block;min-width:64px;min-height:32px}.programmes-tab-sheet{margin:10px;box-sizing:border-box;border-radius:5px;border:1px solid #ddd}.programmes-tab-sheet .tabs-item{color:var(--header-text-color)}.programmes-tab-sheet .tabs-item:hover{opacity:.8;cursor:pointer}.programmes-tab-sheet .tabs-item[selected]{background-color:#ffffffc9}.programmes-tab-sheet .tabs-item h5{color:var(--header-text-color)}.programme-tab-row-one-item vaadin-icon{color:var(--lumo-primary-color);width:15px}.programme-tab-row-one-item h5{color:var(--header-text-color)}.add-programme-form-section{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;padding:10px;height:fit-content;background-color:#fff}.programmes-details-card{background-color:#fff;box-shadow:var(--lumo-box-shadow-xs);padding:15px;box-sizing:border-box;margin:8px;border-radius:8px;border-left:5px solid var(--header-text-color);display:block}.programmes-details-card h4{color:var(--header-text-color);margin-bottom:5px}.programmes-details-card p{font-size:12px;width:unset;margin:5px auto;box-sizing:border-box}.programmes-card-button-layout{column-gap:10px;justify-content:flex-end}.programmes-card-button-layout .programme-edit-button{border-radius:5px;box-shadow:var(--lumo-box-shadow-xs)}.programmes-card-button-layout .programme-delete-button{color:red;border-radius:5px;background-color:#fce5e9}.programme-dialog-layout{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;padding:10px;height:fit-content;background-color:#fff}.course-id-component{background-color:var(--lumo-primary-color);padding:15px;border-radius:5px 5px 0 0;box-sizing:border-box;color:#fff}.course-id-component h5{color:#fff}.courses-details-form-layout{background-color:#fff;box-sizing:border-box;border-radius:5px;margin:10px auto;padding:15px}.programme-tab-div{background-color:#fff;padding:20px;box-sizing:border-box;border-radius:5px;box-shadow:var(--lumo-box-shadow-xs)}.take-attendance-view{padding:2px;box-sizing:border-box;display:block;position:relative;height:100%;overflow-y:auto;--cv-blue: 212 96% 54%;--cv-purple: 259 97% 66%;--cv-dropzone-border-color: hsl(var(--cv-blue) / .5);--cv-dropzone-bg-color: hsl(var(--cv-blue) / .2);--cv-droptarget-border-color: hsl(var(--cv-purple) / 1);--cv-droptarget-bg-color: hsl(var(--cv-purple) / .4);--cv-stripe-width: 1.5px;--cv-stripe-gap: 9px;--cv-stripe-color: hsl(var(--cv-blue) / .2);--cv-layout-border-color: var(--lumo-contrast-40pct);--cv-checkerboard-color1: hsl(0 0% 0% / .05);--cv-checkerboard-color2: hsl(0 0% 100% / .05);--cv-checkerboard-size: 16px}.take-attendance-view[dragging]{--cv-checkerboard-color1: hsl(var(--cv-blue) / .2);--cv-checkerboard-color2: hsl(var(--cv-blue) / .1);--cv-layout-border-color: var(--cv-dropzone-border-color)}.take-attendance-view .preview-container{display:contents}.take-attendance-view .preview-container>.layout[style*="align-self: stretch"]{width:100%}.take-attendance-view .preview-container>.layout[style*="flex-grow: 1"]{height:100%}.take-attendance-view[dragging] .layout:not([style*="gap:"]){gap:8px}.take-attendance-view[dragging] .layout:not([style*="padding:"],[empty]){padding:8px}.take-attendance-view .cover-overlay{position:absolute;border-radius:1px}.take-attendance-view:not([starting-drag]) .cover-overlay.editable-hovering{outline:2px solid hsl(var(--cv-blue) / 1);outline-offset:-1px}.take-attendance-view:not([starting-drag]) .cover-overlay.editable-editing{outline:1px solid hsl(var(--cv-blue) / 1);outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--lumo-base-color)}.take-attendance-view .overlays,.take-attendance-view .drop-zones{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.take-attendance-view:not([dragging]) .drop-zones{pointer-events:none}.take-attendance-view .drop-zone{position:absolute;box-sizing:border-box;border-radius:1px;min-height:10px;min-width:10px}.take-attendance-view[dragging] .drop-zone:not([empty-layout]){outline:1px dashed var(--cv-dropzone-border-color);outline-offset:-2px;background-color:var(--cv-dropzone-bg-color)}.take-attendance-view .drop-zone[remaining-space]{background:repeating-linear-gradient(-45deg,var(--cv-stripe-color),var(--cv-stripe-color) var(--cv-stripe-width),transparent var(--cv-stripe-width),transparent var(--cv-stripe-gap))}.take-attendance-view[dragging] .drop-zone[drag-over]{background:var(--cv-droptarget-bg-color);outline:1px solid var(--cv-droptarget-border-color);outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--lumo-base-color)}.drop-zone[empty-layout]{z-index:-1}.take-attendance-view:not([readonly]) .layout[empty],vaadin-form-layout[empty]{border-radius:1px;background:repeating-conic-gradient(var(--cv-checkerboard-color1) 0% 25%,var(--cv-checkerboard-color2) 0% 50%) 50% / var(--cv-checkerboard-size) var(--cv-checkerboard-size);background-clip:content-box;outline:1px dashed var(--cv-layout-border-color);outline-offset:-2px}.take-attendance-view[dragging]:not([readonly]) vaadin-form-layout[empty]{background:transparent}.take-attendance-view .layout[empty]:before{content:"";display:block;min-width:64px;min-height:32px}.take-attendance-view[readonly] .drop-zones,.take-attendance-view[readonly] .overlays,.take-attendance-view[inline-editing] .drop-zones,.take-attendance-view[inline-editing] .overlays{display:none}.take-attendance-view .content-wrapper[contenteditable=true]{display:inline-block;overflow:hidden;width:100%}.take-attendance-view[dragging] vaadin-form-layout{padding:8px}.take-attendance-view vaadin-form-layout[empty]:before{content:"";display:block;min-width:64px;min-height:32px}.take-attendance-view[dragging] vaadin-form-layout:not([empty]):after{content:"";display:block;min-width:64px;min-height:32px}.attendance-form-section{top:0;margin-top:0}.level-and-class-flex-layout{box-sizing:border-box;gap:10px}.level-and-class-flex-layout .label-style{max-width:48%}.attendance-form-section,.attendance-grid-section{background-color:#fff;border-radius:8px}.attendance-grid-section .default-grid-style{margin-top:1%}.attendance-grid-section .default-button-style{background-color:var(--lumo-success-color);color:#fff;justify-content:flex-end;text-align:center;width:fit-content}.attendance-grid-section .default-grid-style::part(header-cell){background-color:var(--header-text-color);color:#fff}.attendance-grid-section .default-grid-style::part(body-cell){background-color:#fff}.attendance-form-section .default-button-style{width:100%}.attendance-button-layout .refresh-button{border-radius:10px;box-shadow:var(--lumo-box-shadow-xs);cursor:pointer;font-size:smaller;background-color:#eaeefb}.attendance-form-section h5{color:#7294a6}.attendance-counter-div{margin-bottom:10px;display:flex;padding:0;justify-content:flex-start;box-sizing:border-box;align-items:center}.attendance-counter-div span{padding:13px;border-radius:5px;width:48%;font-weight:700;font-size:15px;text-align:center;box-sizing:border-box}.attendance-counter-div span:nth-child(1){background-color:#7294a62e;color:#7294a6;border:1px solid rgba(130,156,171,.2)}.attendance-counter-div span:nth-child(2){background-color:#97d6fd78;color:var(--lumo-primary-color);border:1px solid rgba(81,118,134,.56)}@media(max-width:1024px){.level-and-class-flex-layout{flex-direction:column;gap:0}.attendance-form-section{position:relative;top:0;margin-bottom:15px}.level-and-class-flex-layout .label-style{max-width:100%}}.view-form-layout{box-sizing:border-box;border-radius:8px}.form-section{border-radius:8px;border:1px solid #dddddd;background-color:#fff;width:100%;padding:0}.form-section h5{box-sizing:border-box;margin:0;width:100%;padding:15px;background:var(--lumo-primary-color);border-radius:5px 5px 0 0;color:#fff}.student-list-form-body{margin:auto 10px;box-sizing:border-box}.student-list-form-body .default-button-style{margin-bottom:10px}.app-footer-section vaadin-avatar{background:var(--gradient-primary);width:fit-content;height:23px}.grid-and-filter-div{box-sizing:border-box}.tab-sheets{width:100%;background-color:#fff;padding:0;border-radius:5px}.tab-sheets[selected]{background-color:red}.save-buttons-div{gap:10px;width:100%;display:flex;justify-content:flex-end}.student-details-renderer-form{border:1px solid #dddddd;border-radius:8px;padding:10px;box-sizing:border-box;background-color:#fff}.student-details-renderer-form .buttons-layout{gap:10px;border-top:1px solid #dddddd;width:100%;margin-top:10px;padding:5px 0}.section-two-filter-section{background-color:#f3f3f39e;padding:10px;border-radius:8px;align-items:self-end;box-sizing:border-box}.counter-card{border:1px solid #eee;background-color:#f6f6f6;padding:15px;border-radius:5px;box-sizing:border-box;box-shadow:var(--lumo-box-shadow-xs);margin:15px auto;max-height:fit-content;gap:10px}.counter-card .counter-card-avatar{margin-right:10px;background:var(--gradient-primary);width:40px;height:40px;border-radius:50%}.grid-section{padding:10px}.counter-card .counter-card-title{color:var(--lumo-primary-text-color);font-size:small}.counter-card .counter-card-value{font-size:large;color:#7294a6}@media screen and (max-width:768px){.form-section{margin:8px auto}.student-list-button-layout{text-align:center;margin:auto}.section-two-filter-section{flex-direction:column;row-gap:0}.section-two-filter-section .default-button-style{width:100%;margin:10px auto}}.dialog-component::part(header){background-color:var(--lumo-primary-color)}.dialog-close-button{color:red;background-color:#fff;border:none;border-radius:100%;padding:2px;font-size:smaller;cursor:pointer}.dialog-header-div h5{color:#fff;text-transform:uppercase;margin-bottom:5px}.dialog-header-div span{color:#eaeefb}.input-style{width:100%;font-size:smaller}.input-style::part(input-field){border-radius:4px}.label-style::part(label){font-size:small}.error-button:hover{opacity:.6;transition:.3s ease-out}.empty-table-card{max-width:500px;background-color:#fff;box-shadow:var(--lumo-box-shadow-xs);border-radius:8px;margin:auto;padding:5px}.empty-table-card h5{background-color:transparent;color:#7294a6;margin-bottom:-10px}.filter-field::part(input-field){font-size:16px;padding:2px;margin:0 auto;width:100%}.default-grid-style::part(header-cell){background:var(--lumo-primary-color);color:#fff}.default-grid-style{background-color:#fff;border:1px solid #ddd}.save-dialog .save-button{background-color:var(--lumo-primary-color);color:#fff}.checkbox-style{width:unset;box-sizing:border-box;border-radius:4px;background-color:#f5f5f5}.save-dialog::part(header){padding:15px;box-sizing:border-box;margin:auto;color:var(--lumo-primary-color)}.default-grid-style::part(details-opened-row-cell){background:#addaf1;color:var(--lumo-primary-color)}.default-grid-style::part(row):hover{color:var(--lumo-primary-color);cursor:pointer}.delete-dialog::part(header){background-color:var(--lumo-error-color);color:#fff}.delete-dialog .dialog-header-container{color:#fff}.loader{width:50px;aspect-ratio:1;display:grid}.loader:before,.loader:after{content:"";grid-area:1/1;--c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);background:var(--c) 50% 0,var(--c) 50% 100%,var(--c) 100% 50%,var(--c) 0 50%;background-size:12px 12px;animation:l12 1s infinite}.loader:before{margin:4px;filter:hue-rotate(45deg);background-size:8px 8px;animation-timing-function:linear}@keyframes l12{to{transform:rotate(.5turn)}}vaadin-password-field[part=input-field]{background-color:var(--lumo-base-color);border:1px solid var(--lumo-primary-color-50pct)}:host([focus-ring]) [part=input-field]{padding:20px;box-shadow:0 0 0 2px var(--lumo-primary-color-50pct),inset 0 0 0 1px var(--lumo-primary-color)}vaadin-text-field::part(input-field){border:1px solid var(--lumo-primary-color-50pct);width:100%}vaadin-text-field:host(:hover) [part=input-field]{border:1px solid var(--lumo-primary-color-50pct)}vaadin-text-field:host([focus-ring]) [part=input-field]{border:1px solid var(--lumo-primary-color-50pct)}[part=input-field]{box-shadow:inset 0 0 0 1px var(--lumo-contrast-30pct);background-color:var(--lumo-base-color)}:host([focus-ring]) [part=input-field]{box-shadow:0 0 0 2px var(--lumo-primary-color-50pct),inset 0 0 0 1px var(--lumo-primary-color)}vaadin-combo-box[part=input-field]{background-color:var(--lumo-base-color);border:1px solid var(--lumo-primary-color-50pct)}vaadin-combobox:host(:hover) [part=input-field]{border:1px solid var(--lumo-primary-color-50pct)}:host([focus-ring]) [part=input-field]{border:1px solid var(--lumo-primary-color-50pct)}:host([invalid]) [part=input-field]{box-shadow:inset 0 0 0 1px var(--lumo-error-color)}.page-header-container{box-sizing:border-box;display:flex;justify-content:space-between;margin-bottom:10px;background-color:#fff;border-radius:10px 10px 0 0;padding:10px}.header-container{margin-left:0;max-width:fit-content;flex-grow:1;gap:8px}.page-header-container .page-header-title{color:var(--header-text-color)}.default-button-style{width:fit-content;border-radius:8px;cursor:pointer;font-size:smaller;padding:18px}.default-button-style:hover{opacity:.8;transition:.3s ease-in}.error-button{color:#fff;background-color:red;width:fit-content;border-radius:8px;cursor:pointer;font-size:smaller;padding:18px}@media screen and (max-width:768px){.page-header-container{flex-direction:column;text-align:center}.header-container{max-width:100%;align-items:center;text-align:center;margin:auto}.header-container .default-button-style{text-align:center}}.activity-view{padding:15px;box-sizing:border-box;display:block;margin:auto;position:relative;height:100%;overflow-y:auto;--cv-blue: 212 96% 54%;--cv-purple: 259 97% 66%;--cv-dropzone-border-color: hsl(var(--cv-blue) / .5);--cv-dropzone-bg-color: hsl(var(--cv-blue) / .2);--cv-droptarget-border-color: hsl(var(--cv-purple) / 1);--cv-droptarget-bg-color: hsl(var(--cv-purple) / .4);--cv-stripe-width: 1.5px;--cv-stripe-gap: 9px;--cv-stripe-color: hsl(var(--cv-blue) / .2);--cv-layout-border-color: var(--lumo-contrast-40pct);--cv-checkerboard-color1: hsl(0 0% 0% / .05);--cv-checkerboard-color2: hsl(0 0% 100% / .05);--cv-checkerboard-size: 16px}.activity-header-section{background-color:#fff;padding:15px;border-radius:10px}.activity-form-section .default-button-style{width:100%}.activity-header-section h4{color:#7294a6}.activity-body-section{box-sizing:border-box;margin:10px auto}.activity-layout{background-color:#fff;border-radius:10px;box-sizing:border-box;padding:15px;margin:10px auto;align-items:self-start}.activity-grid-section{align-self:self-start}.score-field::part(input-field){font-size:large;font-weight:700;background-color:#e4ffe4;border:1px solid #92a9b4}.grid-score-field[focused]::part(input-field){background-color:#dbfadb;color:green;font-weight:700}.grid-score-field::part(input-field){width:unset;border:1px solid #ddd}.activity-view-body-section{box-sizing:border-box;gap:20px}.activity-grid-section{min-width:75%}.activity-records-header{background-color:#fffcfc;width:100%;padding:15px;box-sizing:border-box;margin:10px auto;gap:10px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.view-record-button{background-color:#fff;border-radius:20px;padding:2px;font-size:smaller;box-shadow:0 2px 4px #0000001a}.score-table::part(header-cell){background-color:#7294a6;color:#fff}.score-table::part(body-cell),.score-table{background-color:#fff;border:2px solid #eeee}.record-update-form{background-color:#fff;border-radius:10px;border:1px solid #ddd;padding:10px;box-sizing:border-box;margin:0;gap:5px}.record-dialog-form{background-color:#fff;border-radius:10px;border:1px solid #ddd;padding:10px;box-sizing:border-box}.record-dialog-form vaadin-button{margin:5px auto}.default-grid-style vaadin-avatar::part(icon){color:red}.activity-grid-section .filter-field{min-width:80%}.activity-button-layout .menu-bar-style{width:20%;margin-left:0}.activity-button-layout{gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}.audit-trill-grid::part(header-cell){color:var(--header-text-color);background-color:#fff;font-weight:700}.audit-trill-grid::part(body-cell){background-color:#fff;text-align:justify;padding:10px}.audit-trill-filter-container{background-color:#fff}.audit-trill-grid[selected]{background-color:red}.default-password-span-style{background-color:#eee;padding:10px;box-sizing:border-box;margin:10px auto;border-radius:5px;text-align:center}.row-one-style,.user-list-section{background-color:#fff;padding:10px;box-sizing:border-box;border-radius:8px;border:1px solid #ddd;margin:5px auto;color:#7294a6}.user-list-section h4{margin:5px;box-sizing:border-box;color:#7294a6}.row-one-style h4{color:#7294a6}.user-details-div{background-color:#fff;padding:20px;box-sizing:border-box;border-radius:8px;border:1px solid #ddd;margin:5px auto}.user-details-div h4{background-color:#eee;padding:10px;box-sizing:border-box;border-radius:5px;margin-top:-10px}.user-details-div vaadin-button{margin-top:15px}@media screen and (max-width:768px){.activity-view-body-section,.activity-records-header{flex-direction:column;gap:10px}.activity-view-body-section .activity-grid-section{min-width:100%}}.split-layout .filter-section{border:1px solid #dddddd;border-radius:8px;padding:10px;box-sizing:border-box;background-color:#fff;height:fit-content}.split-layout h3{color:#7294a6}.groups-header-component{background-color:#fff;padding:10px;box-sizing:border-box;border-radius:8px;border:1px solid #ddd;margin:5px auto;color:#7294a6}.groups-header-component h3{color:#7294a6}.students-list-box{border:2px solid #dddddd;border-radius:10px;height:350px;padding:0 10px;box-sizing:border-box}.group-list-box-layout,.create-group-form-layout{background-color:#fff;padding:10px;margin:5px;box-sizing:border-box;border-radius:10px}.students-list-counter-text{background-color:#eee;color:#7294a6;text-align:center;width:100%;margin:-10px auto;padding:8px 0;box-sizing:border-box;border-radius:5px}.group-list-box-layout .default-button-style{background-color:red;color:#fff}.student-details-col{margin:auto 10px}.student-details-col h5{color:#7294a6}.grid-row-one{align-items:center}.self-registration-parent-layout{box-sizing:border-box}.closed-card{background-color:#ffebee;color:#c62828;border-radius:8px;border:2px solid #d0aeae;padding:40px 0;width:80%;box-sizing:border-box;text-align:center}.closed-card h2{color:#c62828}.closed-card-flag{margin-right:10px;color:#ba3b3b;font-size:30px;text-align:center}@media screen and (max-width:600px){.self-registration-parent-layout{min-width:fit-content;box-sizing:border-box;margin-left:0;flex-direction:column}}.login-view{background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;padding:20px;min-height:100vh}.login-container{display:flex;flex-direction:column;width:100%;max-width:500px;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-header-section{width:100%;text-align:center;margin:auto;animation:fadeIn .6s ease-out .1s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-header-content{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:15px}.login-image{width:40px;height:40px;background-color:#fffffff2;border-radius:12px;padding:4px;box-shadow:0 4px 15px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.login-image:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026}.login-title{color:#fff;font-size:32px;font-weight:700;margin:10px 0;letter-spacing:-.5px}.login-subtitle{color:#ffffffd9;font-size:14px;margin:0;font-weight:500}.login-form{background-color:#fff;border-radius:12px;padding:32px;margin:auto;box-sizing:border-box;box-shadow:0 8px 32px #0000001f;animation:slideUp .5s ease-out .2s both}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.error-container{padding:12px 16px;background-color:#fee;border-left:4px solid #ef5350;border-radius:6px;display:flex;align-items:flex-start;gap:12px;animation:shake .4s ease-in-out;margin-bottom:8px}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.error-icon{color:#ef5350;flex-shrink:0;font-size:18px}.error-message div:last-child{color:#c62828;font-size:13px;font-weight:500}[class*=vaadin-text-field],[class*=vaadin-password-field]{--lumo-text-field-background-color: #f5f5f5;--lumo-contrast-30pct: rgba(0, 0, 0, .03)}[class*=vaadin-text-field]::part(input-field),[class*=vaadin-password-field]::part(input-field){background-color:#f8f9fa;border-radius:6px}[class*=vaadin-text-field]::part(label),[class*=vaadin-password-field]::part(label){font-weight:600;font-size:13px;color:#424242}[class*=vaadin-text-field][focus-ring]::part(input-field),[class*=vaadin-password-field][focus-ring]::part(input-field){box-shadow:0 0 0 2px #64c8ff4d;background-color:#fff}.login-button{font-weight:600;font-size:15px;letter-spacing:.3px;padding:20px;box-sizing:border-box;text-transform:uppercase;margin-top:12px;transition:all .3s ease}.login-button:hover{transform:translateY(-1px);cursor:pointer}.login-button:active{transform:translateY(0)}.login-links-container{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:12px;padding-top:16px;border-top:1px solid #e0e0e0}.login-link{color:var(--lumo-primary-color);text-decoration:none;font-weight:500;font-size:13px;transition:all .2s ease}.login-link:hover{color:#0782ab;text-decoration:underline}.login-signup-text{color:#666;font-size:12px;margin:0;text-align:center}@media screen and (max-width:600px){.login-form{padding:24px 20px;border-radius:10px}.login-title{font-size:20px;text-transform:uppercase}.login-subtitle{font-size:13px}.login-image{width:30px;height:30px}.login-container{max-width:100%}.error-message{font-size:12px}}.student-list-view{padding:0}.attendance-button-layout .export-button{background-color:#00b4f0;color:#fff;margin:auto 10px;box-shadow:var(--lumo-box-shadow-xs);cursor:pointer;font-size:smaller;padding:8px;border-radius:5px}.attendance-button-layout{padding:0 10px;box-sizing:border-box}.filter-form-layout{border-radius:5px;box-sizing:border-box}.filter-form-layout .default-button-style{margin-top:10px}.filter-form-layout .input-style{font-size:smaller}.attendance-report-summary{margin:auto;background-color:#fff;border-radius:10px;padding:0}.attendance-report-summary p,.report-grid-card-title{margin:0 0 10px;padding:10px;font-size:smaller;font-weight:700;top:0;background-color:var(--lumo-primary-color);color:#fff;box-sizing:border-box;border-radius:8px 8px 0 0}.attendance-report-summary-item-card{margin:5px auto}.attendance-report-summary-item-card span{color:#7294a6;font-size:smaller}.attendance-report-summary-item-card h6{font-size:smaller;color:var(--lumo-primary-color);margin-left:8px}.report-grid-card-title{background-color:var(--lumo-primary-color);color:#fff;border-radius:8px 8px 0 0;width:100%;font-size:medium}.attendance-report-grid-section{background-color:#fff;border-radius:10px;padding:0 0 15px}.attendance-report-grid-section .default-grid-style{margin:0 15px;box-sizing:border-box;padding:0;font-size:12px}.attendance-report-grid-section .default-grid-style .attendance-status-badge{width:400px;font-size:10px;padding:4px 8px;text-align:center;border-radius:50px}.content-page{box-sizing:border-box}.profile-layout{background-color:#fff;border-radius:10px;max-width:fit-content}.profile-section-title{background-color:var(--lumo-primary-color);color:#ffffffc9;padding:10px;width:100%;border-radius:5px 5px 0 0;box-sizing:border-box}.profile-section-title h3{color:#fff}.profile-card-item{padding:5px 20px;box-sizing:border-box;border-radius:5px;border-bottom:1px solid #dddddd;text-align:left;display:flex;gap:10px;justify-content:space-between;align-items:center}.profile-card-item h5{color:#7294a6}.profile-card-status{background-color:#fff;color:#262626;padding:5px 20px;border-radius:5px;width:100%;box-sizing:border-box;text-align:center;display:flex;justify-content:space-between}.profile-card-status h5{color:#07dc02}.profile-layout .default-button-style{min-width:100%}.logs-container vaadin-grid::part(body-cell){background-color:#fff}.logs-container vaadin-grid::part(header-cell){background-color:var(--lumo-primary-color);color:#fff}@media screen and (max-width:600px){.profile-layout{width:400px}.profile-card-item{padding:5px;margin:5px auto}}.master-detail-view{display:flex;flex-direction:column;height:100%}.master-detail-view vaadin-split-layout{width:100%;height:100%}.master-detail-view vaadin-grid{height:100%}.master-detail-view .editor-layout{display:flex;flex-direction:column;width:400px}.master-detail-view .editor{flex-grow:1;padding:var(--lumo-space-l);overflow-y:auto}.master-detail-view .editor vaadin-checkbox{padding-top:var(--lumo-space-m)}.master-detail-view .button-layout{width:100%;flex-wrap:wrap;background-color:var(--lumo-contrast-5pct);padding-bottom:var(--lumo-space-s);padding-top:var(--lumo-space-s);padding-left:var(--lumo-space-l);padding-right:var(--lumo-space-l);gap:var(--lumo-space-m)}.master-detail-view .grid-wrapper{width:100%}html,spreadsheet-view-export,grid-with-filters-view-export{--lumo-font-size: 1rem;--lumo-font-size-xxxl: 1.75rem;--lumo-font-size-xxl: 1.375rem;--lumo-font-size-xl: 1.125rem;--lumo-font-size-l: 1rem;--lumo-font-size-m: .875rem;--lumo-font-size-s: .8125rem;--lumo-font-size-xs: .75rem;--lumo-font-size-xxs: .6875rem;--lumo-primary-color-50pct: hsla(195, 91%, 42%, .5);--lumo-primary-color-10pct: hsla(195, 65%, 32%, .1);--lumo-primary-color: hsl(195, 92%, 41%);--lumo-primary-text-color: hsl(195, 91%, 42%);--lumo-base-color: #eaeefb;--lumo-body-text-color: hsla(214, 35%, 16%, .94);--lumo-body-text-color-weak: hsla(214, 35%, 16%, .65);--page-background-color: #eaeefb;--header-text-color: #7294a6;--background: 220 20% 97%;--foreground: 224 30% 15%;--card: 0 0% 100%;--card-foreground: 224 30% 15%;--popover: 0 0% 100%;--popover-foreground: 224 30% 15%;--primary: 246 65% 55%;--primary-foreground: 0 0% 100%;--secondary: 220 20% 94%;--secondary-foreground: 224 30% 15%;--muted: 220 15% 92%;--muted-foreground: 220 10% 46%;--accent: 170 70% 42%;--accent-foreground: 0 0% 100%;--destructive: 0 72% 51%;--destructive-foreground: 0 0% 100%;--success: 152 60% 42%;--success-foreground: 0 0% 100%;--warning: 38 92% 50%;--warning-foreground: 0 0% 100%;--info: 210 90% 55%;--info-foreground: 0 0% 100%;--border: 220 15% 90%;--input: 220 15% 90%;--ring: 246 65% 55%;--radius: .75rem;--sidebar-background: 246 65% 55%;--sidebar-foreground: 246 30% 95%;--sidebar-primary: 0 0% 100%;--sidebar-primary-foreground: 246 65% 55%;--sidebar-accent: 246 55% 48%;--sidebar-accent-foreground: 0 0% 100%;--sidebar-border: 246 50% 60%;--sidebar-ring: 0 0% 100%;--gradient-primary: linear-gradient(135deg, hsl(246, 65%, 55%), hsl(280, 70%, 55%));--gradient-accent: linear-gradient(135deg, hsl(170, 70%, 42%), hsl(200, 80%, 50%));--gradient-warm: linear-gradient(135deg, hsl(38, 92%, 50%), hsl(20, 90%, 55%));--shadow-card: 0 1px 3px hsl(220 15% 15% / .06), 0 6px 16px hsl(220 15% 15% / .04);--shadow-card-hover: 0 4px 12px hsl(220 15% 15% / .1), 0 12px 28px hsl(220 15% 15% / .06);--font-display: "Space Grotesk", sans-serif;--font-body: "DM Sans", sans-serif }