.auth{border:none;flex:1 0 auto;margin:0;padding:0}.auth>input{border:none;border-bottom:1px solid rgba(0,0,0,0.2);box-sizing:border-box;margin:8px;padding:8px 0;text-align:center;transition:border 0.25s;width:calc(100% - 8px * 2)}.auth>input:focus{border-bottom-color:#26bbe8;box-shadow:none;outline:none}.auth>#auth-username{margin-top:24px}.auth>button.submit{background:#eee;border:none;box-sizing:border-box;color:#26bbe8;margin:8px 0 0;padding:16px;text-align:center;text-transform:uppercase;width:100%}.auth>.error{color:#c00;margin:8px;text-align:center}.auth>.error>.username{color:#000;font-weight:700}.auth>.message{color:#999;font-style:italic;margin:8px;text-align:center}body>.googleLogin{margin-bottom:16px;margin-left:auto;margin-right:auto;margin-top:16px}html{height:100%}body{background:#fff;color:#000;font-family:roboto,helvetica,sans-serif;margin:0;padding:0}button,input{font-family:inherit;font-size:inherit}a,button{touch-action:manipulation}button{cursor:pointer}html{overflow:hidden}body{display:flex;flex-direction:column;height:100%}body>nav{flex:none}body>section{flex:auto;overflow:auto}body>nav{background:#26bbe8;overflow:hidden;position:relative;text-align:right}body>nav>button{background:none;border:none;color:#fff;cursor:pointer;margin:0 0 0 8px;opacity:0.5;padding:16px;text-transform:uppercase}body>nav>button.primary{opacity:1}header{align-items:center;background:#26bbe8;color:#fff;display:flex;flex-direction:row;flex-grow:0;flex-shrink:0;margin:0;padding:8px 8px 8px 0;position:relative}header>h1{flex:1;font-size:var(--huge-text);font-weight:400;margin:0 0 0 8px;padding:16px;text-align:center}header>h2{flex:1;font-size:150%;font-weight:400;margin:0;padding:8px}header>button{border:none;color:#fff;height:40px;opacity:0.8;padding:0;transition:opacity 0.25s;width:40px}header>button.back{background:none;border:none;opacity:0.5}header>button.back:hover,header>button.back:active{opacity:0.75}header.no-back>button.back{display:none}header>button.action{background:rgba(255,255,255,0.2);border-radius:100%;box-shadow:0 1px 2px rgba(0,0,0,0.2)}header>button.action:hover,header>button.action:active{opacity:1}section>h3{color:#26bbe8;font-size:125%;font-weight:400;margin:8px;padding:0}section>ul{list-style:none;margin:0;padding:0}section>ul>li{cursor:pointer;margin:8px}/** Font glyphs ***************************************************************************************************** */@font-face{font-family:'icomoon';font-style:normal;font-weight:400;src:url(icomoon.woff)}.icon{font-family:'icomoon';font-size:24px;-webkit-font-smoothing:antialiased;font-style:normal;font-variant:normal;font-weight:400;line-height:1;-moz-osx-font-smoothing:grayscale;speak:none;text-transform:none}@keyframes overlay-show{from{opacity:0}to{opacity:1}}body>.overlay{animation-duration:0.5s;animation-iteration-count:1;animation-name:overlay-show;animation-timing-function:ease-in-out;background:rgba(255,255,255,0.8);bottom:0;left:0;position:absolute;right:0;top:0}body>nav>.attendanceMarkingCounter{color:#fff;font-size:var(--small-text);left:8px;opacity:0.5;position:absolute;top:20px}.attendanceMarking>.locked{color:#c00;padding:24px;text-align:center}.attendanceMarking>ul>li{align-items:center;border-bottom:1px solid rgba(0,0,0,0.1);display:flex;flex-wrap:wrap;margin:0;padding:8px;position:relative;transition:background 0.25s,opacity 0.25s,color 0.25s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.attendanceMarking>ul>li:hover{opacity:0.8}.attendanceMarking>ul>li.ineditable{background:#eee}.attendanceMarking>ul>li .details{flex:1}.attendanceMarking>ul>li .name{font-size:125%}.attendanceMarking>ul>li.ineditable .name{color:rgba(0,0,0,0.6)}.attendanceMarking>ul>li .demographics{font-size:var(--small-text)}.attendanceMarking>ul>li .additional{align-items:center;display:flex}.alerts{display:flex;font-size:80%}.alerts>.alert{border-radius:100%;height:1em;margin:0 1ex 0 0;width:1em}.alerts>.alert.custody{background:#ffc20e}.alerts>.alert.medical{background:#c00}.alerts>.alert.special{background:#673ab7}.alerts>.alert.attendance{background:#1b315e}.alerts>.alert.studentplan{background:#8cc63e}.attendanceMarking>ul>li .demographics{color:rgba(0,0,0,0.5);font-size:80%}.attendanceMarking>ul>li .demographics>.house,.attendanceMarking>ul>li .demographics>.rollgroup,.attendanceMarking>ul>li .demographics>.schoolyear{display:inline;margin:0 1ex 0 0}.attendanceMarking>ul>li>button{align-items:center;background:rgba(0,0,0,0.1);border:none;border-radius:100%;display:flex;font-weight:700;justify-content:center;margin:0 8px 0 0;padding:8px}.attendanceMarking>ul>li>.resolution{color:#666;font-size:var(--small-text);width:100%}.attendanceMarking>ul>li .resolution>.type,.attendanceMarking>ul>li .resolution>.times{display:inline;margin:0 1ex 0 0;vertical-align:middle}.attendanceMarking>ul>li .resolution>img{position:absolute;right:8px;top:8px;width:32px}.attendanceMarking>ul>li[data-type='yes']{background-color:rgba(38,187,232,0.25);color:rgba(0,0,0,0.5)}.attendanceMarking>ul>li[data-type='no']{background-color:rgba(		230,39,93,0.25	);color:#e6275d}.attendanceMarking>ul>li[data-type='latetoclass']{background-color:rgba(		93,230,39,0.25	);color:rgba(0,0,0,0.5)}.studentPopup{background:#fff;bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0;z-index:1}.studentPopup header>h1{font-size:1rem;margin:0;padding:8px 16px;text-align:left}.studentPopup header>button{background:rgba(255,255,255,0.2);border-radius:100%;box-shadow:0 1px 2px rgba(0,0,0,0.2);text-shadow:0 1px 2px #000}.studentPopup .body{flex:1;overflow:auto}.studentPopup .alerts{padding:8px}.studentPopup .notes .note{padding:8px}.studentPopup .notes .note>h2{font-size:0.8rem;font-weight:700;margin:0;opacity:0.5;padding:0;text-transform:uppercase}.studentPopup .notes .note>.content{white-space:pre-wrap}.studentPopup~.attendanceMarking{overflow:hidden}.attendanceList>.noClasses{color:rgba(0,0,0,0.5);font-size:125%;margin:32px 8px}.attendanceList>ul>li{cursor:pointer}.attendanceList>ul>li .title{font-size:150%}.attendanceList>ul>li.marked .title{color:rgba(0,0,0,0.5)}.attendanceList>ul>li .status{color:#26bbe8}.attendanceList>ul>li.marked .status{color:#666}.attendanceList>ul>li .details{color:#999;font-size:var(--small-text)}.attendanceList>ul>li .room{color:#999;font-size:var(--small-text)}.attendanceList>ul>li.marked .details{color:#666}.attendanceList>ul>li .locked{color:#c00;font-size:var(--small-text)}.menu>ul>li>a{color:inherit;display:block;text-decoration:inherit}.menu>ul>li .title{font-size:150%}.menu>ul>li .subtitle{color:#26bbe8}.alertSubtle{background:rgba(0,0,0,0.5);border-radius:4px;bottom:32px;color:#fff;font-size:var(--small-text);left:8px;padding:8px;position:absolute;right:8px;text-align:center}.alertSubtle>.message{opacity:0.5}.overlay>.datePicker{background:#fff;box-shadow:0 8px 16px rgba(0,0,0,0.2);height:280px;margin:32px auto;max-width:300px;min-width:256px;overflow:hidden;position:relative}.datePicker>.mode-day,.datePicker>.mode-month{background:#fff;display:flex;flex-direction:column;height:100%;position:absolute;top:0;transition:left 0.25s;width:100%}.datePicker>.mode-day{left:-100%}.datePicker>.mode-month{left:100%}.datePicker[data-mode='day']>.mode-day,.datePicker[data-mode='month']>.mode-month{left:0}.datePicker>.mode-day>.tableWrapper,.datePicker>.mode-month>.tableWrapper{flex:auto}.datePicker>.mode-month>.tableWrapper{margin:32px 0}.datePicker .header{align-items:center;background:#26bbe8;display:flex;flex-direction:row}.datePicker .header>button{background:none;border:none;color:#fff;padding:8px}.datePicker .header>button:hover{opacity:0.8}.datePicker .header>h2{color:#fff;flex:1;font-size:125%;font-weight:400;margin:0;text-align:center}.datePicker[data-mode='day']>.mode-day>.header>h2{cursor:pointer}.datePicker[data-mode='day']>.mode-day>.header>h2:hover{opacity:0.8}.datePicker .tableWrapper>table{border-collapse:collapse;border-spacing:0;height:100%;width:100%}.datePicker .tableWrapper>table>thead>tr>th{color:rgba(0,0,0,0.25);font-weight:400;padding:8px;text-align:center}.datePicker .tableWrapper>table>tbody>tr>td{cursor:pointer;line-height:1;padding:8px;text-align:center}.datePicker .tableWrapper>table>tbody>tr>td:hover{background:#f8f8f8}.datePicker>.mode-day>table>tbody>tr>td{width:14.2857%}.datePicker>.mode-month>table>tbody>tr>td{width:25%}.datePicker .tableWrapper>table>tbody>tr>td[data-month]{padding:16px 8px}.datePicker .tableWrapper>table>tbody>tr>td.selected{background:#26bbe8;color:#fff}@keyframes wait-spinner-rotate{to{transform:rotate(360deg)}}@keyframes wait-spinner-colour{0%{border-bottom-color:#bce627;border-top-color:#26bbe8}33%{border-bottom-color:#26bbe8;border-top-color:#e627bc}66%{border-bottom-color:#e627bc;border-top-color:#bce627}}.waitSpinner{animation-duration:0.5s,5s;animation-iteration-count:infinite;animation-name:wait-spinner-rotate,wait-spinner-colour;animation-timing-function:ease-in-out,linear;border:4px solid transparent;border-bottom-color:#91bd00;border-radius:100%;border-top-color:#26bbe8;box-sizing:border-box;height:48px;left:50%;margin:-24px 0 0 -24px;position:absolute;top:50%;width:48px}