@font-face{font-family:Roboto;font-weight:300;font-style:normal;src:url(Roboto-300.woff) format("woff"),url(Roboto-300.woff2) format("woff2")}@font-face{font-family:Roboto;font-weight:300;font-style:italic;src:url(Roboto-300italic.woff) format("woff"),url(Roboto-300italic.woff2) format("woff2")}@font-face{font-family:Roboto;font-weight:400;font-style:normal;src:url(Roboto-400.woff) format("woff"),url(Roboto-400.woff2) format("woff2")}@font-face{font-family:Roboto;font-weight:400;font-style:italic;src:url(Roboto-400italic.woff) format("woff"),url(Roboto-400italic.woff2) format("woff2")}@font-face{font-family:Roboto;font-weight:700;font-style:normal;src:url(Roboto-700.woff) format("woff"),url(Roboto-700.woff2) format("woff2")}@font-face{font-family:Roboto;font-weight:700;font-style:italic;src:url(Roboto-700italic.woff) format("woff"),url(Roboto-700italic.woff2) format("woff2")}body{all:unset;overflow:hidden}body *{box-sizing:border-box;margin:0;max-width:100%;max-height:100%;padding:0;border:none}.Root{position:relative;height:100vh;background-color:#fff;color:#101010}.Root>*{width:100%;height:100%}
.App{--bg-h: 0deg;--bg-s: 0%;--bg-l: 100%;--bg-1-h: 0deg;--bg-1-s: 0%;--bg-1-l: 91.7647058824%;--bg-2-h: 0deg;--bg-2-s: 0%;--bg-2-l: 84.7058823529%;--fg-h: 0deg;--fg-s: 0%;--fg-l: 6.2745098039%;--fg-1-h: 0deg;--fg-1-s: 0%;--fg-1-l: 15.2941176471%;--fg-2-h: 0deg;--fg-2-s: 0%;--fg-2-l: 26.6666666667%;--fg-3-h: 240deg;--fg-3-s: 0.9615384615%;--fg-3-l: 40.7843137255%;--shadow-h: 240deg;--shadow-s: 13.6363636364%;--shadow-l: 8.6274509804%;--softbreak-h: 0deg;--softbreak-s: 0%;--softbreak-l: 60%;--online-h: 91.5328467153deg;--online-s: 59.8253275109%;--online-l: 55.0980392157%;--offline-h: 356.582278481deg;--offline-s: 64.2276422764%;--offline-l: 51.7647058824%;--accent-h: 190.6666666667deg;--accent-s: 59.4713656388%;--accent-l: 44.5098039216%;--active-h: 218.313253012deg;--active-s: 72.8070175439%;--active-l: 55.2941176471%;--active-soft-h: 186.6666666667deg;--active-soft-s: 16.9811320755%;--active-soft-l: 79.2156862745%;--clickable-h: 218.6666666667deg;--clickable-s: 54.2168674699%;--clickable-l: 32.5490196078%;--dynamic-on-h: 195.4639175258deg;--dynamic-on-s: 38.9558232932%;--dynamic-on-l: 48.8235294118%;--dynamic-off-h: 8.2926829268deg;--dynamic-off-s: 51.8987341772%;--dynamic-off-l: 46.4705882353%;--space: ;--font-size: 15px;--speed: 1;font-family:Roboto;font-size:var(--font-size);background-color:hsl(var(--bg-h), var(--bg-s), var(--bg-l));color:hsl(var(--fg-h), var(--fg-s), var(--fg-l))}
.LayerSpace{position:var(--LayerSpace_position, relative)}
.LayerSpace-MainLayer{display:grid;grid-template:100%/100%}.LayerSpace-MainLayer_independent{width:100%;height:100%}
.LayerSpace-FrontLayer{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}
.App-Content{display:grid;width:100%;height:100%}.App-Content_page_home{--Layout_template: 100% / 1fr 1fr 1fr;padding:30px 0}
.Layout{display:grid;grid-template:var(--Layout_template, 1fr/1fr)}
.Layout-Column{display:flex;flex-direction:column;padding:0 5%;border:solid hsl(var(--bg-2-h), var(--bg-2-s), var(--bg-2-l));border-width:0 1px}.Layout-Column:first-child{border-left:none}.Layout-Column:last-child{border-right:none}
.Layout-Label{margin-bottom:25px;text-align:center;font-size:20px;font-weight:300;color:hsl(var(--fg-3-h), var(--fg-3-s), var(--fg-3-l))}
.Container{display:grid}.Container_positioning_center{justify-content:center;align-content:center}.Container_positioning_vertical{display:flex;flex-direction:column;justify-content:space-around;align-items:center;gap:10px}.Container_positioning_corners{display:flex;justify-content:space-between;align-items:center;gap:15px}.Container_positioning_scroll{overflow:auto}
.StudentList-Item{min-height:50px}
.Student{display:flex}
.Student-Info{flex:auto}
.Button{display:flex;justify-content:center;align-items:center;text-align:center;font-size:var(--font-size);background:none;color:hsl(var(--fg-h), var(--fg-s), var(--fg-l));cursor:pointer}.Button:hover{--Button_hovered: var(--space)}.Button_active{--Button_active: var(--space)}.Button_style_flat{--Button_style_hoverAlpha: var(--Button_hovered) .75;--Button_style_activeAlpha: var(--Button_active) 1;background-color:hsla(var(--active-soft-h), var(--active-soft-s), var(--active-soft-l), calc(var(--Button_style_hoverAlpha, 0) + var(--Button_style_activeAlpha, 0)));color:hsl(var(--clickable-h), var(--clickable-s), var(--clickable-l));transition:background-color calc(.3s*var(--speed))}.Button_style_backgrounded{--Button_style_hoverColor: var(--Button_hovered) hsla(var(--active-soft-h), var(--active-soft-s), var(--active-soft-l), 0.75);--Button_style_activeColor: var(--Button_active) hsl(var(--active-soft-h), var(--active-soft-s), var(--active-soft-l));background-color:var(--Button_style_hoverColor, var(--Button_style_activeColor, hsl(var(--bg-2-h), var(--bg-2-s), var(--bg-2-l))));transition:background-color calc(.2s*var(--speed))}.Button_style_text{--Button_style_activeColor: var(--Button_hovered) hsl(var(--active-h), var(--active-s), var(--active-l));display:inline;color:var(--Button_style_activeColor, hsl(var(--clickable-h), var(--clickable-s), var(--clickable-l)));transition:color calc(.3s*var(--speed))}.Button_padding_tiny{padding:5px}.Button_padding_medium{padding:10px 15px}.Button_padding_big{padding:15px 25px}.Button_alignContent_stretch{display:grid;justify-content:stretch;align-items:stretch}.Button_alignContent_left{justify-content:flex-start;text-align:left}.Button_alignContent_right{justify-content:flex-end;text-align:right}
.Popup{min-width:.1px;min-height:.1px;padding:20px;margin:calc(var(--Popup_freeSpace, 20px) - var(--Popup_shiftY, 0px)) calc(var(--Popup_freeSpace, 20px) + var(--Popup_shiftX, 0px)) calc(var(--Popup_freeSpace, 20px) + var(--Popup_shiftY, 0px)) calc(var(--Popup_freeSpace, 20px) - var(--Popup_shiftX, 0px));border-radius:15px;opacity:0;box-shadow:0 0 5px 3px hsla(var(--shadow-h), var(--shadow-s), var(--shadow-l), 0.3);background-color:hsl(var(--bg-h), var(--bg-s), var(--bg-l));transition-property:opacity,transform;transition-duration:calc(.5s*var(--speed))}.Popup_active{opacity:1;transform:translate(var(--Popup_shiftX, 0px), var(--Popup_shiftY, 0px));pointer-events:auto}.Popup_side_top{--Popup_shiftY: -20px}.Popup_side_right{--Popup_shiftX: 20px}.Popup_side_bottom{--Popup_shiftY: 20px}.Popup_side_left{--Popup_shiftX: -20px}
.LayerSpace-Popup{--LayerSpace-Popup_rows: var(--LayerSpace-Popup_top, 0px) max-content var(--LayerSpace-Popup_bottom, 0px);--LayerSpace-Popup_columns: var(--LayerSpace-Popup_left, 0px) max-content var(--LayerSpace-Popup_right, 0px);position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template:var(--LayerSpace-Popup_rows)/var(--LayerSpace-Popup_columns);z-index:var(--LayerSpace-Popup_nesting, 0)}.LayerSpace-Popup_horizontalPosition_offset{--LayerSpace-Popup_columns: minmax(0, var(--LayerSpace-Popup_left, 1fr)) max-content minmax(0, var(--LayerSpace-Popup_right, 1fr))}.LayerSpace-Popup_horizontalPosition_center{--LayerSpace-Popup_columns: minmax(0, max(var(--LayerSpace-Popup_left, 0px) * 2 - 100%, 0px)) max-content minmax(0, max(100% - var(--LayerSpace-Popup_left, 0px) * 2, 0px));justify-content:center}.LayerSpace-Popup_verticalPosition_offset{--LayerSpace-Popup_rows: minmax(0, var(--LayerSpace-Popup_top, 1fr)) max-content minmax(0, var(--LayerSpace-Popup_bottom, 1fr))}.LayerSpace-Popup_verticalPosition_center{--LayerSpace-Popup_rows: minmax(0, max(var(--LayerSpace-Popup_top, 0px) * 2 - 100%, 0px)) max-content minmax(0, max(100% - var(--LayerSpace-Popup_top, 0px) * 2, 0px));align-content:center}
.LayerSpace-PopupContent{grid-area:2/2/3/3}
.Popup-Toggle{display:grid;background:none;cursor:pointer}
.StudentInfo{display:flex;align-items:center;gap:5px}
.StudentInfo-Status{flex:none;width:15px;height:15px;border-radius:100%;background-color:hsl(var(--offline-h), var(--offline-s), var(--offline-l))}.StudentInfo-Status_onCampus{background-color:hsl(var(--online-h), var(--online-s), var(--online-l))}
.StudentInfo-Name{margin-left:5px;text-align:left;font-size:calc(var(--font-size)*1.2);color:hsl(var(--fg-1-h), var(--fg-1-s), var(--fg-1-l))}
.StudentInfo-Timer{font-size:14px;font-weight:700;color:hsl(var(--offline-h), var(--offline-s), var(--offline-l))}
.StudentControl{grid-template:" name   tel    " auto " status status " auto " timer  perm   " auto " extend reset  " 40px/1fr 1fr;display:grid;align-items:center;gap:10px}.StudentControl_onCampus{grid-template:" name   tel    " auto " status status " auto " choice choice " 45px/1fr 1fr}
.StudentControl-Name{grid-area:name}
.Text{display:inline}.Text_align_center{text-align:center}.Text_align_right{text-align:right}.Text_size_sm{font-size:calc(var(--font-size)*.8)}.Text_size_lg{font-size:calc(var(--font-size)*1.2)}.Text_size_xl{font-size:calc(var(--font-size)*1.5)}.Text_italic{font-style:italic}.Text_weight_thin{font-weight:300}.Text_weight_bold{font-weight:700}.Text_accent_low{color:hsla(var(--fg-h), var(--fg-s), var(--fg-l), 0.5)}.Text_accent_normal{color:hsl(var(--fg-1-h), var(--fg-1-s), var(--fg-1-l))}.Text_accent_high{color:hsl(var(--accent-h), var(--accent-s), var(--accent-l))}.Text_accent_on{color:hsl(var(--dynamic-on-h), var(--dynamic-on-s), var(--dynamic-on-l))}.Text_accent_off{color:hsl(var(--dynamic-off-h), var(--dynamic-off-s), var(--dynamic-off-l))}
.StudentControl-Tel{grid-area:tel;text-align:right}.StudentControl-Tel_simple{color:hsl(var(--fg-1-h), var(--fg-1-s), var(--fg-1-l))}
.StudentControl-Status{--StudentControl-Status_color: hsl(var(--offline-h), var(--offline-s), var(--offline-l));--StudentControl-Status_textColor: hsl(var(--offline-h), calc(var(--offline-s) * 0.75), var(--offline-l));grid-area:status;justify-self:start;display:flex;align-items:center;margin:10px 0;font-weight:700;color:var(--StudentControl-Status_textColor)}.StudentControl-Status:before{content:"";width:20px;height:20px;margin-right:10px;border-radius:100%;background-color:var(--StudentControl-Status_color)}.StudentControl-Status_onCampus{--StudentControl-Status_color: hsl(var(--online-h), var(--online-s), var(--online-l));--StudentControl-Status_textColor: hsl(var(--online-h), calc(var(--online-s) * 0.7), var(--online-l))}
.StudentControl-PermissionChoice{grid-area:choice;align-self:stretch}
.Dropdown{--Dropdown_direction: 1;overflow:auto;border:1px solid hsl(var(--bg-1-h), var(--bg-1-s), var(--bg-1-l));opacity:0;box-shadow:0 calc(3px*var(--Dropdown_direction)) 5px 0 hsla(var(--shadow-h), var(--shadow-s), var(--shadow-l), 0.4);background-color:hsl(var(--bg-h), var(--bg-s), var(--bg-l));transform:scaleY(0);transform-origin:top;transition-property:opacity,transform;transition-duration:calc(.2s*var(--speed))}.Dropdown_onTop{--Dropdown_direction: -1;transform-origin:bottom}.Dropdown_active{opacity:1;transform:none;pointer-events:auto}
.Dropdown-Toggle{--Dropdown-Toggle_color: hsl(var(--bg-2-h), var(--bg-2-s), var(--bg-2-l));--Dropdown-Toggle_arrowRotate: 135deg;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:calc(var(--font-size)*1.2);background-color:var(--Dropdown-Toggle_color);color:hsl(var(--fg-1-h), var(--fg-1-s), var(--fg-1-l));transition-property:background-color,color;transition-duration:calc(.2s*var(--speed));cursor:pointer}.Dropdown-Toggle::after{content:"";width:10px;height:10px;border:solid hsl(var(--fg-2-h), var(--fg-2-s), var(--fg-2-l));border-width:2px 2px 0 0;transform:rotate(45deg);transition-property:color,transform;transition-duration:calc(.2s*var(--speed)),calc(.3s*var(--speed))}.Dropdown-Toggle:hover{--Dropdown-Toggle_color: hsla(var(--active-soft-h), var(--active-soft-s), var(--active-soft-l), 0.75)}.Dropdown-Toggle_active{background-color:hsla(var(--active-soft-h), var(--active-soft-s), var(--active-soft-l), 0.9)}.Dropdown-Toggle_active::after{transform:rotate(var(--Dropdown-Toggle_arrowRotate))}.Dropdown-Toggle_onTop{--Dropdown-Toggle_arrowRotate: -45deg}
.Dropdown-Item{display:grid;padding:10px;color:hsl(var(--fg-1-h), var(--fg-1-s), var(--fg-1-l));cursor:pointer;transition:background-color calc(.3s*var(--speed))}.Dropdown-Item:hover{background-color:hsl(var(--active-soft-h), var(--active-soft-s), var(--active-soft-l))}.Dropdown-Item_selected{color:hsl(var(--accent-h), var(--accent-s), var(--accent-l))}.Dropdown-Item+.Dropdown-Item{border-top:1px solid hsl(var(--bg-1-h), var(--bg-1-s), var(--bg-1-l))}
.StudentControl-PermissionInfo{grid-area:perm}
.StudentControl-Timer{grid-area:timer}
.StudentControl-Extend{grid-area:extend;align-self:stretch}
.StudentControl-Reset{grid-area:reset;align-self:stretch}
.Student-Call{width:70px;border-left:1px solid hsl(var(--softbreak-h), var(--softbreak-s), var(--softbreak-l))}