@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Spline+Sans:wght@300..700&display=swap');


* {
  margin: 0;
  padding: 0;
}

:root {
  --padding: 20px;
  --color-black: #000;
  --color-white: #FFF;
  --color-grey: #777;
  --color-lightgrey: #E8E8E8;
  --color-light: #efefef;
  --color-green: #bae6be;
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: rgb(248 248 248);
  --color-code-light-grey:  #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #7e9abf;
  --color-code-purple:      #b294bb;
  --font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --outercolumns: 280px;
  --outercolumns2: 280px;
}

html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background: var(--color-background);
  scroll-behavior: smooth;
}
img {
  width: 100%;
}
hr{
  border: none;
  height: 1px;
  background-color: var(--color-black);
}
body {
/*  padding: var(--padding);*/
/*  max-width: 70rem;*/
/*  margin: 0 auto;*/
width: 100%;
  display: grid;
  gap: var(--padding);
  padding: 0 var(--padding);
  box-sizing: border-box;
  grid-template-rows: 0;
  grid-template-columns: var(--outercolumns) 1fr 1fr var(--outercolumns2);
/*  grid-template-columns: 1fr 1fr 1fr 1fr ;*/
}
body::-webkit-scrollbar, body>*::-webkit-scrollbar{
    display: none;
  }
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
h1{

}
h2 {

}
h3  {
 text-transform: uppercase;
 line-height: 1em;
 font-weight: unset;
 font-size: 1rem;
}
h4{

}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}
.material-symbols-outlined{
  font-size: 0.8rem;
  color: var(--color-black);
  font-variation-settings: 'FILL' 100, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.mini{
  
}



/*TOOLTIPS*/

.tippy-box[data-theme~='feedback'] {
  background-color: var(--color-lightgrey);
  color: var(--color-black);
  font-size: 0.6rem;
  font-weight: 500;
  border: 0;
  font-family: var(--font-family-mono);
}
.tippy-box[data-theme~='feedback'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--color-lightgrey);
}
.tippy-box[data-theme~='feedback'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--color-lightgrey);
}
.tippy-box[data-theme~='feedback'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--color-lightgrey);
}
.tippy-box[data-theme~='feedback'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--color-lightgrey);
}



.btn, .card{
  background-color: var(--color-white);
}

.btn{
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.075);
/*  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 1px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.09) inset, 0px 4px 3px 0px rgba(0, 0, 0, 0.05) inset, 0px 8px 3px 0px rgba(0, 0, 0, 0.01) inset, 0px 12px 3px 0px rgba(0, 0, 0, 0.00) inset;*/
padding: 0.95em 1.25em 1em 1.25em;
padding: 0.5em 0.75em 0.5em 0.75em;
border-radius: 5px;
display: inline-block;
transition: all 0.2s;
font-size: 0.8em;
font-weight: 700;
background-color: var(--color-white);
cursor: pointer;
background-color: #bae6be;
}
.btn:hover,.minibtn:hover{
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 5px 0px rgba(0, 0, 0, 0.10) inset, 0px 10px 10px 0px rgba(0, 0, 0, 0.09) inset, 0px 22px 13px 0px rgba(0, 0, 0, 0.05) inset, 0px 40px 16px 0px rgba(0, 0, 0, 0.01) inset, 0px 62px 17px 0px rgba(0, 0, 0, 0.00) inset;
}

.minibtn{
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.075);
/*  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 1px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.09) inset, 0px 4px 3px 0px rgba(0, 0, 0, 0.05) inset, 0px 8px 3px 0px rgba(0, 0, 0, 0.01) inset, 0px 12px 3px 0px rgba(0, 0, 0, 0.00) inset;*/
padding: 0.95em 1.25em 1em 1.25em;
padding: 0.5em 0.5em 0.5em 0.5em;
line-height: 1em;
border-radius: 5px;
display: inline-block;
transition: all 0.2s;
font-size: 0.6em;
text-transform: uppercase;
letter-spacing: 0.025em;
font-weight: 700;
background-color: var(--color-white);
background-color: #bae6be;
}

.card{
  box-sizing: border-box;
  padding: calc(var(--padding)/2);
  width: 100%;
  margin-bottom: var(--padding);
  border-radius: 5px;
  box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.0375);
/*  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 8px 8px 0px rgba(0, 0, 0, 0.09), 0px 17px 10px 0px rgba(0, 0, 0, 0.05), 0px 31px 12px 0px rgba(0, 0, 0, 0.01), 0px 48px 14px 0px rgba(0, 0, 0, 0.00);*/
background-color: var(--color-white);
}

.copy:hover{
  opacity: 0.5;
}

.title{
  font-size: 0.8em;
  font-weight: 700;
}

.detail{
  font-size: 0.8em;
}
.details{
  font-size: 0.8em;
  margin-bottom: 1em;
}

/*CALENDAR*/
#calendar{
  position: relative;
}
.caldate{
  position: absolute;
  right: 0;
  top: 0;
  padding: calc(var(--padding)/2);
}
#calcontrols{
  display: block;
  margin-top: 0.5em;
}
#calcontrols a{
  cursor: pointer;
}
#calendar hr{
  margin: 0.75em 0;
}

.calmonth a{
  display: inline-block;
  
/*  padding: 0.25em;*/
  position: relative;
  cursor: pointer;
}

.calmonth>a>div{
  padding: 0.25em;
width: 1em;
  height: 1em;
  background-color: var(--color-green);
  border-radius: 5px;
  border: 1px solid var(--color-black);
}

.calmonth div span{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
/*  background-color: var(--color-black);*/
/*  display: none;*/
  border-radius: 2px;
  color: var(--color-black);
  width: fit-content;
/*  padding: 0.125em;*/
  text-align: center;
  font-size: 0.8em;
}
.calmonth div:hover span{
  display: block;
}

/*SORTING*/
.list {
/*  font-family:sans-serif;*/
}
td {
  padding:5px;
  padding-left: 0px; 
/*  border:solid 1px black;*/
}

.calmonth{
  display: none;
}

.calmonth.active{
  display: block;
}


.sort {
  padding:0;
  border-radius: 0px;
  border:none;
  display:inline-block;
/*  color:#fff;*/
  text-decoration: none;
  background-color: none;
  height:auto;
}
.sort:hover {
  text-decoration: none;
/*  background-color:#1b8aba;*/
}
.sort:focus {
  outline:none;
}
.sort:after {
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-1px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  content:"";
  position: relative;
  top:3px;
  right:-1px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  content:"";
  position: relative;
  top:-3px;
  right:-1px;
}


/*HEADER*/

header{
  grid-column-start: 1;
  grid-column-end: 2;
  box-sizing: border-box;
/*  border-right: 1px solid black;*/
  min-height: 100dvh;
  height: 100svh;
overflow-y: scroll;
/*  padding: var(--padding);*/
  padding-top: var(--padding);
  position: relative;
}

header:after{
  content: '';
  height: calc(100% - (var(--padding) * 2));
  margin-top: var(--padding);
  width: 1px;
  position: fixed;
  left: calc(var(--outercolumns) + var(--padding) );
  top: 0;
  background-color: black;
  padding: var(--padding) 0;
  box-sizing: border-box;
}

#login.btn{
/*  position: absolute;*/
/*  bottom: var(--padding);
  left: var(--padding);*/
  
/*  padding: 0.5em 0.75em 0.5em 0.75em;*/
/*  padding: var(--padding);*/
  border-radius: 50%;
/*  width: 1em;*/
/*  height: 1em;*/
  text-align: center;
  background-color: var(--color-white);
  font-size: 0.8rem;
  position: relative;
}
#login.btn span{
  
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  transform: translate(0%, 10%);
}

#menu{
  position: sticky;
  top: 0;
  z-index: 9;
}

#menu>a{
/*  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 1px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.09) inset, 0px 4px 3px 0px rgba(0, 0, 0, 0.05) inset, 0px 8px 3px 0px rgba(0, 0, 0, 0.01) inset, 0px 12px 3px 0px rgba(0, 0, 0, 0.00) inset;*/
background-color: var(--color-white);
/*  padding: 0.85em 1em 1.15em 1em;*/
  border-radius: 5px;
  display: inline-block;
  transition: all 0.2s;
  font-size: 0.8em;
  font-weight: 700;
}
#menu>a:hover{
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 5px 0px rgba(0, 0, 0, 0.10) inset, 0px 10px 10px 0px rgba(0, 0, 0, 0.09) inset, 0px 22px 13px 0px rgba(0, 0, 0, 0.05) inset, 0px 40px 16px 0px rgba(0, 0, 0, 0.01) inset, 0px 62px 17px 0px rgba(0, 0, 0, 0.00) inset;
}


.year{
  width: 100%;
}

#studentslist{
  padding-top: var(--padding);
  padding-bottom: var(--padding);
  padding-right: var(--padding);
  box-sizing: border-box;
}
#studentslist span{
  opacity: 0.6;
/*  float: right;*/
}
#studentslist li{
  position: relative;
}
#studentslist li:hover:after{
  font-family: 'Material Symbols Outlined';
  content: "arrow_right_alt";
  -webkit-font-feature-settings: 'liga';
  font-size: 1rem;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  margin-left: 0.125em;
/*  margin-top:0.15em;*/
  position: absolute;
}


/*FEEDBACK*/
#feedback{
  grid-column-start: 2;
  grid-column-end: 4;
    box-sizing: border-box;
    gap: var(--padding);
  
  max-height: 100vh;
  min-height: 100vh;
  overflow-y: scroll;
}

#feedback li, .comment{
  box-sizing: border-box;
padding: calc(var(--padding)/1);
width: 100%;
margin-bottom: var(--padding);
border-radius: 5px;
background-color: var(--color-white);
border: 1px solid rgba(0,0,0,0.0375);
}
#notes ul li{
  padding: calc(var(--padding) / 2);
  margin: calc(var(--padding) / 2) 0;
  background-color: var(--color-background);
}

#notes li a, #notes a{
  opacity: 0.6;
  hyphens: auto;
}
#feedback li a:hover, #notes a:hover{
  opacity: 1;
  text-decoration: underline;
}

.comment-content p{
  margin-top: 0.5em;
}

#submit{
position: sticky;
top: 0;
background-color: var(--color-background);
z-index:9;
}

#submit h3{
/*  padding-top: 0.625em;*/
  padding-top: calc(var(--padding) + 0.625em);

  padding-bottom: 1.2em;
  cursor: pointer;
}
#submitopen{
  position: absolute;
  right: 0;
  top: var(--padding);
  background-color: var(--color-white);
z-index: 1;
}

.open #submitopen span{
 transform: rotate(180deg) translate(0%, 0%);
}

#submitopen span{
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  transform: translate(0%, 15%);
  transition: all 0.3s ease-in-out;
}

#submitinner{
  max-height: 0px;
  overflow-y: hidden;
  transition: all 0.5s ease-in-out;
}
.open #submitinner{
  max-height: 800px;
}

#submitinner form{
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.open #submitinner form{
  opacity: 1;
}

.honey{
  position: absolute;
  left: -9999px;
}

/*YEARS*/
#navigation{
  position: sticky;
  top: 0;
  background: var(--color-background);
  box-sizing: border-box;
  padding: var(--padding) 0;
}
#navigation .btn{
  background-color: var(--color-white);
/* padding: 0.85em 1em 1.15em 1em; */
border-radius: 5px;
display: inline-block;
transition: all 0.2s;
font-size: 0.8em;
font-weight: 700;
margin-left: 1em;
}

#navigation input{
  margin-right: 1em;
}

#years, #students, #modules{
  box-sizing: border-box;
/*  padding-top: var(--padding);*/
  padding-bottom: var(--padding);
  grid-column-start: 2;
  grid-column-end: 5;
height: fit-content;
max-height: 100svh;
min-height: 100svh;
overflow-y: scroll;
overflow-x: clip;
overflow-clip-margin: var(--padding);
overflow-clip: content-box;
position: relative;
}

#years ul, #students ul{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: var(--padding);
}

#years li a{
  display: block;
}
#years li a:hover{
  font-style: italic;
}

#students li a{
      display: flex;
    box-sizing: border-box;
    padding: calc(var(--padding)/2);
    width: 100%;
    border-radius: 5px;
/*    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 8px 8px 0px rgba(0, 0, 0, 0.09), 0px 17px 10px 0px rgba(0, 0, 0, 0.05), 0px 31px 12px 0px rgba(0, 0, 0, 0.01), 0px 48px 14px 0px rgba(0, 0, 0, 0.00);*/
    margin-bottom: 0px;
    transition: all 0.3s ease-in-out;
}
#students li a:hover{
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 8px 8px 0px rgba(0, 0, 0, 0.09), 0px 17px 10px 0px rgba(0, 0, 0, 0.05), 0px 31px 12px 0px rgba(0, 0, 0, 0.01), 0px 48px 14px 0px rgba(0, 0, 0, 0.00);*/
}

#students li img{
  border-radius: 3px;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  max-width: 100px;
max-height: 100px;
width: 100px;
height: 100px;
  margin-right: calc(var(--padding)/2);
  object-fit: cover;
}

#table{
  position: relative;
/*margin-top: 4em;*/
/*padding-top: var(--padding);*/
  top: 0;
  width: 100%;
  background-color: var(--color-background);
    grid-column-start: 2;
  grid-column-end: 5;
  text-align: left;
  display: none;
  min-height: 100svh;
}
#table td{
  width: 25%;
}

#listview{
  cursor: pointer;
  font-size: 0.8em;
  position: fixed;
  top: var(--padding);
  right: var(--padding);
/*  padding: var(--padding);*/

  border-radius: 50%;

  text-align: center;
  background-color: var(--color-white);
}
.listview ul{
  display: none !important;
}
.listview #table{
  display: block;
}

/*STUDENTS*/
/*#students{
  box-sizing: border-box;
  padding: var(--padding);
  grid-column-start: 2;
  grid-column-end: 5;
}*/

/*MODULES*/
#modules{
  grid-column-start: 2;
  grid-column-end: 5;
   display: grid;
  gap: var(--padding);
/*  padding: 0 var(--padding);*/
  box-sizing: border-box;
  grid-template-rows: 2;
  grid-template-columns: 1fr 1fr var(--outercolumns2);

}
#marker{
  
}
#learningoutcomes{
  grid-column-start: 1;
  grid-column-end: 3;
}
.learningoutcome{

}
.addtext{
  cursor: pointer;
}
.feedbacktext{
  display: block;
  width: 100%;
  margin-top: calc(var(--padding) / 2);
}
.feedbacktext textarea{
  display: none;
  width: 100%;
  min-height: 120px;
  font-size: 1rem;
  padding: 0.5em;
  border: 0px;
  box-sizing: border-box;
  outline: 0; 
  border: 1px solid rgba(0, 0, 0, 0);
}
.feedbacktext textarea:focus{
  border: 1px solid var(--color-lightgrey);
}
.feedbacktext.visible textarea{
  display: block;
}
.feedbacktext.visible .addtext{
  display: none;
}

.descriptor{
  padding: 1em 0.5em 1em 0em;
/*  max-width: 200px;*/
  flex-grow: 1;
  width: 100%;
}

#modules{
  padding-top: calc(var(--padding));
}

#modules ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  
  border-top: 1px solid var(--color-black);
  padding-bottom: var(--padding);
}

#modules ul:first-of-type{
  border-top: none;
}

#modules ul:first-of-type .descriptor{
  padding-top: 0;
}

#modules li{
/*  width: 100%;*/
flex-grow: 0;
  display: block;
  flex-basis: max-content;
  padding-top: 1em;
  padding-bottom: 1em;
  padding: 1em 0.5em 1em 0.5em;
  font-family: var(--font-family-mono);
  font-size: 0.8rem;
}
#modules li:first-of-type{
  max-width: 200px;

}
#modules li div.criteria{
  display: none;
}
#modules li a{
  margin-right: 0.2em;
  margin-left: 0.2em;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  background-color: var(--color-white);
  cursor: pointer;
  border-radius: 1em;
  position: relative;
  border: 1px solid var(--color-lightgrey);
  box-sizing: border-box;
}
#modules li a:hover{
  border: 1px solid var(--color-grey);
}
#modules li a span{
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 0.8em;
  transform: translate(-50%,-50%);
}
.gradeboundary{
  text-align: center;
  font-weight: 500;
font-size: 0.8em;
padding-bottom: 0.25em;
}
#modules li:nth-of-type(1){
  background-color: rgba(0, 0, 0, 0.05);
}
#modules li:nth-of-type(2){
  background-color: rgba(0, 0, 0, 0.1);
}
#modules li:nth-of-type(3){
  background-color: rgba(0, 0, 0, 0.15);
}
#modules li:nth-of-type(4){
  background-color: rgba(0, 0, 0, 0.2);
}
#modules li:nth-of-type(5){
  background-color: rgba(0, 0, 0, 0.25);
}
#modules li:nth-of-type(6){
  background-color: rgba(0, 0, 0, 0.3);
}
#modules li .selected{
  background-color: var(--color-green);
  border-color: var(--color-green);
}

#feedbackcontainer{
/*  padding-top: var(--padding);*/
/*  border-top: 1px solid var(--color-black);*/
/*  max-height: 100vh;
min-height: 100vh;*/
/*overflow-y: scroll;*/
box-sizing: border-box;
padding-bottom: var(--padding);
}
#feedbackinner{
  position: sticky;
top: 0;
}

#feedbackbox{
  font-size: 0.8em;
  margin-top: 0.5em;
}
#grade{
/*  margin-top: 1em;*/
/*width: 50%;*/
  margin: 0;
  padding: 0.5em 0.75em 0.5em 0.75em;
  font-size: 0.8em;
/*  font-weight: 700;*/
}
.flex{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--padding);
}
.flex #grade{
  column-width: 100%;
  width: 100%;
}
#grade div{
  display: inline-block;
}
#grade span{
  opacity: 0.5;
}
#copygrade{
  cursor: pointer;
  padding: 0.25em 0.25em 0.125em 0.25em;
  font-size: 0.7em;
  float: right;
  border-radius: 50%;
  font-family: var(--font-family-mono);
  background-color: var(--color-background);
}
#feedbackbox p{
  margin: 0.25em 0;
  cursor: pointer;
}
#feedbackbox p:hover:after{
  content: '\00a0(\2715 )';
  display: inline-block;
}
#feedbackbox strong{
  margin-top: 0.5em;
  display: inline-block;
}
#copyfeedback{
/*  margin-top: 1em;*/
}
#feedbackbox p:first-of-type strong{
  margin-top: 0;
}
#moduletable{
  font-size: 0.6rem;
  font-family: var(--font-family-mono);
  grid-column-start: 1;
  grid-column-end: 4;
}
#moduletable td{
  vertical-align: top;
  border-bottom: 1px solid var(--color-black);
  padding-right: calc( var(--padding) / 2 );
  box-sizing: border-box;
}
#moduletable td p{
  margin-bottom: 0.375em;
}
#moduletable tr{
  border-bottom: 1px solid var(--color-black);
}
#moduletable tr:last-of-type td{
  border-bottom: none;
}
.firstrow{
/*  position: sticky;*/
font-weight: 500;
}
td.copy{
  cursor: pointer;
}


/*STUDENT*/

#student{
  grid-column-start: 4;
  grid-column-end: 5;
  box-sizing: border-box;
  min-height: 100dvh;
/*  padding: var(--padding);*/
  padding-top: var(--padding);
  padding-bottom: 0px;
}
#student>div{
  margin-bottom: var(--padding);
}

#studentinfo{
  display: flex;
  box-sizing: border-box;
  padding:calc(var(--padding)/2); 
  width: 100%;
  border-radius: 5px;
/*  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 8px 8px 0px rgba(0, 0, 0, 0.09), 0px 17px 10px 0px rgba(0, 0, 0, 0.05), 0px 31px 12px 0px rgba(0, 0, 0, 0.01), 0px 48px 14px 0px rgba(0, 0, 0, 0.00);*/
background-color: var(--color-white);
}

#studentinfo img{
  border-radius: 5px;
  max-width: 100px;
  max-height: 100px;
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: calc(var(--padding)/2);
}
#studentinfo>a{
  display: block;
  position: relative;
  line-height: 0;
}
#studentinfo>a:hover #qrcode{
  opacity: 1;
}
#qrcode{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
#kunumber{
  cursor: pointer;
}
#kunumber:after{
  font-family: 'Material Symbols Outlined';
  content: "mail";
  -webkit-font-feature-settings: 'liga';
  font-size: 0.8rem;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  margin-left: 0.25em;
  margin-top:0.15em;
}
#kunumber:hover:after{
  font-variation-settings: 'FILL' 100, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

#privnotes{
  position: fixed;
  top: 100%;
  width: calc( 100vw - 280px - ( var(--padding) * 3 ) );
  height: 90vh;
  margin-bottom: 0 !important;
  border-radius: 5px 0 0 0;
  background-color:var(--color-white);
  right: var(--padding);
  z-index: 10;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  padding: var(--padding);
}
.open#privnotes{
  background-color: #bae6be;
}
#privnotes p{
  margin-bottom: 0.5em;
}
#notetrigger{
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-99.5%);
  display: block;
  background-color: var(--color-white);
  width: 280px;
  border-radius: 5px 5px 0 0 ;
  border-bottom: 0px;
  cursor: pointer;
}
.open #notetrigger{
  background-color: #bae6be;
}
#notetrigger span{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-55%) rotate(180deg);
  padding: calc(var(--padding)/2);
}
.open #notetrigger span{
  transform: translateY(-50%) rotate(0deg);
}
.open#privnotes{
  transform: translateY(-100%);
}
#fade{
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 9;
  background-color: var(--color-background);
}
#fade.open{
  pointer-events: auto;
  
  opacity: 0.8;
  
}

/*FORM*/
input {
  border:none;
  border-radius: 5px;
  padding:0;
  margin-bottom:0px
  font-size: 1rem;
  box-sizing: border-box;
  padding: 0.25em;
}
input[type=text]{
  font-size: 1rem;
  color: black;
  background-color: var(--color-white);
}
input:focus {
  outline:none;
  border-color:none;
}

form>div{
  margin-bottom: 1em;
}
form>button{
  background-color: var(--col);
}

form label{
  display: block;
  margin-bottom: 0.25em;
  margin-top: 1em;
}

form textarea{
  width: 100%;
  min-height: 120px;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
  padding: 0.25em;
}
.wrap{
  display: flex;
  flex-wrap: wrap;
}

.form-group{
  box-sizing: border-box;
}

.form-group:first-of-type{
  padding-right: 1em;
  width: 50%;
  display: block;
}
.form-group:nth-of-type(2){
  left: 1em;
  width: 50%;
  display: block;
}


.form-group:nth-of-type(3){
width: 100%;
}

form input{
  background-color: var(--color-white);
  border:1px solid var(--color-black);
  width: 100%;
}

select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            outline: 0;
            color: var(--color-black);
            background-image: none;
            border: 1px solid var(--color-black);
        }

        .select {
            position: relative;
            display: block;
            /*width: 20em;
            height: 3em;*/
/*            line-height: 3;*/
/*            background: #2C3E50;*/
            overflow: hidden;
            border-radius: .25em;
        }

        select {
            width: 100%;
/*            height: 100%;*/
            margin: 0;
            padding: 0 .5em;
            color: var(--color-black);
            cursor: pointer;
            font-size: 1rem;
            padding: 0.25em 0.375em;

        }

        select::-ms-expand {
            display: none;
        }

        .select::after {
/*            content: '\25BC';*/
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
            position: absolute;
/*            top: 0;*/
            right: 0;
/*            bottom: 0;*/
height: 100%;
box-sizing:border-box;
            padding: 0 0.5em;
            text-align: center;
            justify-content: center;
            align-content: center;
            padding-top: 0.125em;
/*            background: #34495E;*/
            pointer-events: none;
            border-left: 1px solid var(--color-black);
        }

        .select:hover::after {
            color: #F39C12;
        }

        .select::after {
            -webkit-transition: .25s all ease;
            -o-transition: .25s all ease;
            transition: .25s all ease;
        }




@media only screen and (max-width: 600px) {
  body {
    display: block;
  }
  header{
    max-height: initial;
    height: auto;
    border-right: 0px;
  }
  #students, #years{
    max-height: initial;
    height: auto;
  }
  #studentslist{
    columns: 2;
  }
  #studentslist .year{
    column-span: all;
  }
  #years ul, #students ul{
    display: block;
    overflow: auto;
  }
  #years li, #students li{
    margin-bottom: var(--padding);
  }
}