* {box-sizing: border-box;}

ilb{display:inline-block;}
body {margin:0px;}
main {color:white;padding:3px;text-align:center;overflow:auto;margin:auto;float:left}
footer {width:100%;color:white;background-color:#3a553e;padding:3px;clear:both;}
a{text-decoration:none;color:black;}
li{padding:5px;}

.pointer{cursor:pointer}
.strikeout{text-decoration:line-through;color:gray;}
.sticky{position: -webkit-sticky;position:sticky;top: 0;}
.center {display: block;margin-left: auto;margin-right: auto;text-align:center;}

.heading{font-weight:bold;font-size:2.5em;color:DeepSkyBlue;}
.subheading{margin:10px;font-size:1.5em;color:Navy;font-weight:bold;}

input,select,textarea,.inputlike{white-space:nowrap;width:100%;padding:5px;border-radius:10px;}

label,.infolist{width:100%;padding:10px;margin:5px;background:cornsilk;padding:5px;display:inline-block;vertical-align:top;}

.filteritem{width:calc(100% - 10px);margin:10px;padding:10px;background:cornsilk;border-radius:10px;text-align:center;}

.hidden{display:none;}

.info{width:calc(100% - 20px);vertical-align:top;}
.filesidebar{width:calc(100% - 20px);vertical-align:top;margin:10px 0px 0px 0px;overflow:auto;}

.red{color:red;}
.lime{color:lime;}

.white{background:white;}
.yellow{background:LightYellow;}
.green{background:SpringGreen;}
.blue{background:AliceBlue;}
.sky{background:LightSkyBlue;}
.tomato{background:tomato;}
.DarkSalmon{background:DarkSalmon;}
.mobileblue{background:LightSkyBlue;}

.mobileonlyblock{display:block;}
.mobileonlyilb{display:block;}
.mobileonlyilinline{display:inline;}
.desktoponlyblock{display:none;}
.desktoponlyilb{display:none;}
.desktoponlyilinline{display:none;}


.hoverblue{cursor:pointer;padding:10px;border-radius:10px;}
.hoverblue:hover{background-color:PowderBlue}
.hoverred{cursor:pointer;padding:10px;border-radius:10px;}
.hoverred:hover{background-color:Tomato}

.submitButton{background:SpringGreen;padding:10px;border:lime;border-radius:10px;cursor:pointer;}
.submitButton:hover{background:lime;}
.submitButton:active{background:gold;border:solid SpringGreen 2px;}


.top{vertical-align:top;}
.honeydew{background:Honeydew;}
.hovergreen{cursor:pointer;padding:10px;border-radius:10px;}
.hovergreen:hover{background:SpringGreen;}
.hovergreen:active{background:gold;border:solid SpringGreen 2px;}



/*class grade grid*/
.classlinkgrid{
		display:grid;
		grid-gap: 10px;
		grid-template-columns: repeat(auto-fill,100%);
		width:100%;float:left;padding-left:10px;
		
	}
.classlinkdiv{
	display:table-cell;
	background-color:white;color:black;text-decoration:none;text-align:center;vertical-align: middle;font-family:Verdana, Geneva, sans-serif;border:3px solid black;cursor:pointer;padding:10px;
}
.classlinkdiv:hover {border:3px solid yellow;}
.classlinkimg{max-width:100%;max-height:250px;object-fit:cover;}



/*lessonGRID*/
	.grid-container {
	  display: grid;
	  grid-gap: 0px;
	  grid-template-columns: 100%;

	  
	  background-color: white;
	  padding: 10px;
	  position: relative;
	}
	.grid-containerAssignments {
	  display: grid;
	  grid-gap: 0px;
	  grid-template-columns: 100%;

	  
	  background-color: white;
	  padding: 10px;
	  position: relative;
	}
	.grid-containerUnits {
	  display: grid;
	  grid-gap: 0px;
	  grid-template-columns: 100%;

	  
	  background-color: white;
	  padding: 10px;
	  position: relative;
	}

	.grid-item {
	  border-top:solid black 2px;
	  text-align:left;
	  padding: 5px;
	  overflow:hidden;
	  position: relative;
	  width:100%;
	}

.assignmentGridExtra{grid-column: 1/-1;}

/* [PROGRESS BAR] */
/* #progress { */
  /* width: 606px; */
  /* border: 3px solid black; */
  /* height: 31px; */

/* } */
/* #bar { */
  /* width: 1px; */
  /* transition: width ease 0.3s; */
  /* height: 25px; */
/* } */

.fileuploadprogress{
  width: 100%;
  max-width:500px;
  border: 3px solid black;
  height: 30px;

}
.fileuploadprogressbar{
  width:1px;
  transition: width ease 0.3s;
  height: 25px;
  background:DeepSkyBlue;
}


.generallink{cursor:pointer}
.generallink:hover{background-color:palegreen}
.calendarViewOption{padding:5px;background-color:LightSteelBlue;font-size:1.1em;color:white;cursor:pointer}
.calendarViewOption:hover{background-color:LemonChiffon;color:SteelBlue;}
.selectedCalendarViewOption{padding:5px;background-color:SteelBlue;font-size:1.1em;color:white;cursor:pointer}

/*for the schedule*/

.schedulelink{color:black;text-decoration:none;padding:5px 0px 5px 0px;font-weight:bold;float:left;white-space:nowrap;}

.schedule {background-color:white;color:black;padding:5px;}


	.daily1 {width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.daily2 {width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.daily3 {width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.daily4 {width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.daily5 {width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.daily6 {width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.daily7 {width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.daily100{width:100%;border-top: 2px solid black;float:left;white-space:pre-line}
	.dailytable {width:100%}
	.classdate {background-color:black;color:white;font-size:1em;text-align:center;font-weight:bolder;white-space:nowrap;overflow:visible;margin-bottom:3px;padding-top:3px;padding-bottom:3px}
	.CurrentWeek{background-color:Aquamarine;color:black;text-align:center;border:solid black 4px;margin-bottom:3px;padding-top:3px;padding-bottom:3px}
	.CurrentDay{background-color:rgb(244,255,137);color:blue;font-weight:bolder;text-align:center;border:solid black 4px;margin-bottom:3px;padding-top:3px;padding-bottom:3px}

	.weekend {width:100%;clear:both;background-color:black;}

.today {text-decoration:underline;font-weight:bold;margin:10px 0px 0px 0px;}
a.todaylink:link,a.contentlink:visited {text-decoration:none}
a.todaylink:hover {color:yellow;text-decoration:underline;cursor:pointer}
a.todaylink:active {color:red;text-decoration:underline}

.due {color:FireBrick;text-decoration:underline;font-weight:bold}
a.duelink:link,a.duelink:visited {color:FireBrick;text-decoration:none}
a.duelink:hover {color:yellow;text-decoration:underline;cursor:pointer}
a.duelink:active {color:red;text-decoration:underline}

.mobileilb{vertical-align:top;padding:5px;}



/*FLIP CONTAINER*/
/*FLIP CONTAINER*/
/*FLIP CONTAINER*/
/*FLIP CONTAINER*/


/* flip the pane when hovered */
.flip-container:hover .flipper{
	transform: rotateY(180deg);
}



/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}


.flip-container, .front, .back, .flipper {
	width:100%;text-align:center;
}
.front, .back{
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

/*END OF FLIP CONTAINER*/
/*END OF FLIP CONTAINER*/
/*END OF FLIP CONTAINER*/
/*END OF FLIP CONTAINER*/


@media (min-width: 800px) {
    /* For desktop: */

	
label{width:225px;}
input,select,textarea,.inputlike,.infolist{width:225px;}
.info{width:400px;}
.filesidebar{width:calc(100% - 420px);height:calc(100vw = 50px);}



.filteritem{width:245px;}

	
	
.mobileblock{display:none}
.mobileilb{display:none;}
.desktopblock{display:block}
.desktopilb{display:ilb}
.desktopautowidth{width:auto}


.mobileonlyblock{display:none;}
.mobileonlyilb{display:none;}
.mobileonlyilinline{display:none;}
.desktoponlyblock{display:block;}
.desktoponlyilb{display:inline-block;}
.desktoponlyilinline{display:inline;}


.classlinkdiv{width:275px;vertical-align:top;}
.classlinkgrid{display:grid;
	  grid-gap: 5px;
	  grid-template-columns: repeat(auto-fill, 275px);
	  width:calc(100% - 350px);text-align:top
	}

	.grid-container {
	  display: grid;
	  grid-gap: 0px;
	  grid-template-columns: repeat(auto-fill,225px);

	  
	  background-color: white;
	  padding: 5px;
	  position: relative;
	}

	.grid-containerAssignments {
	  display: grid;
	  grid-gap: 0px;
	  grid-template-columns: 1fr 100px 200px 200px 200px;

	  
	  background-color: white;
	  padding: 5px;
	  position: relative;
	}
	.grid-containerUnits {
	  display: grid;
	  grid-gap: 0px;
	  grid-template-columns: 1fr 50px 200px 100px 150px 150px 50px;

	  
	  background-color: white;
	  padding: 5px;
	  position: relative;
	}


	.grid-item {
	  text-align:center;
	}
.mobileblue{background:white;}


.daily1 {width:100%;float:left}
.daily2 {width:50%;float:left}
.daily3 {width:33.33%;float:left}
.daily4 {width:25%;float:left}
.daily5 {width:20%;float:left}
.daily6 {width:16.66%;float:left}
.daily7 {width:14.28%;float:left}
.daily100{width:100%;float:left}

.weekend {background-color:white}




}
@media print{
	.noprint{display:none;}
}