a:link, 
a:hover,
a:visited,
a:active {
    text-decoration: none !important;
}

.center-img{
  	display:flex;
  	flex-direction:row;
  	align-items:center;
}

.red-bold-italic{
  	color:red; 
  	font-weight:500;
  	font-style:italic;
}




/*embedPDF module header*/
.page-header h1{
  	color:#39B2EA;
  	margin-bottom:2em;
  	background-color:#EEEEEE;
  	border:0.5px solid #BDBDBD;
  	border-radius:6px;
  	padding:0.5em 1em;
}




/*checkbox styling*/
.CBcontainer {
  	display: block;
  	position: relative;
  	padding-left: 1.8em;
  	margin-bottom: 0.5em;
  	cursor: pointer;
  	font-size: 1.5em;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
}

/* Hide the browser's default checkbox */
.CBcontainer input {
  	position: absolute;
  	opacity: 0;
  	cursor: pointer;
  	height: 0;
  	width: 0;
}

/* Create a custom checkbox */
.checkmark {
  	position: absolute;
  	top: 0;
  	left: 0;
  	height: 1.5em;
  	width: 1.5em;
  	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.CBcontainer:hover input ~ .checkmark {
  	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.CBcontainer input:checked ~ .checkmark {
  	background-color: #71c8f0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  	content: "";
  	position: absolute;
  	display: none;
}

/* Show the checkmark when checked */
.CBcontainer input:checked ~ .checkmark:after {
  	display: block;
}

/* Style the checkmark/indicator */
.CBcontainer .checkmark:after {
  	left: 0.5em;
  	top: 0.1em;
  	width: 0.5em;
  	height: 1em;
  	border: solid white;
  	border-width: 0 3px 3px 0;
  	-webkit-transform: rotate(45deg);
  	-ms-transform: rotate(45deg);
  	transform: rotate(45deg);
}

/*Landing page log in box*/
.mod-login,
.error-login .grid-child.container-component{
  	margin-left:auto; 
  	margin-right:auto;
  	margin-top:3em;
  	width:40%;
}

@media only screen and (max-width:768px) and (orientation:portrait)
	{.mod-login, .error-login .grid-child.container-component{width:90%;}}




/*Header Logo*/
@media only screen and (max-width:768px) 
	{.navbar-brand{padding-left:4%;padding-right:4%;padding-bottom:0}}
@media only screen and (max-width:768px) and (orientation:landscape)
	{.navbar-brand{padding-left:20%;padding-right:20%;padding-bottom:0}}

.container-header .grid-child {
    padding-top: 0.5em;
}
.container-header .container-nav {
    padding-bottom: 0;
}

/*Navigation bar*/
@media only screen and (max-width:768px){
  .container-header{padding-bottom:0;}
}
.mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink,
.metismenu-item,.mm-collapse.mm-show a {
  	color:#39B2EA;
}
.mod-menu__heading.nav-header.mm-collapsed.mm-toggler.mm-toggler-nolink,
.mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink:hover,
.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list a{
	text-decoration: none;
}
.mod-menu__heading.nav-header.mm-collapsed.mm-toggler.mm-toggler-nolink:hover,
.metismenu-item:hover,
.mm-collapse.mm-show a:hover{
  	color:#015780;
  	text-decoration:none;
}
.metismenu.mod-menu .metismenu-item{
  font-size:1em;
  line-height:2;
  padding: 0.1em 1em;
}
@media only screen and (max-width:768px){
  .metismenu.mod-menu .metismenu-item{padding:0 1em;line-height:1.5;}
}
.metismenu-item.item-733.level-1.deeper.parent{
  	width:70%;
}
@media only screen and (max-width:768px){
  .metismenu-item.item-733.level-1.deeper.parent,.metismenu-item.item-801.level-1{width:100%;padding-top:0;padding-bottom:0}}
@media only screen and (max-width:768px) and (orientation:portrait) {
  .metismenu-item.item-733.level-1.active.deeper.parent{padding-left:3.6%;}
  }
@media only screen and (max-width:768px) and (orientation:landscape){
  .metismenu-item.item-733.level-1.active.deeper.parent{padding-left:2%;}
  
}
.mm-collapse.mm-show{
  	width:100%;
}
@media only screen and (max-width:768px){
   .mm-collapse.mm-show{
  	width:85vmin;
  }}

.mod-menu__heading.nav-header.mm-collapsed.mm-toggler.mm-toggler-nolink,
.mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink {
  	width:150%;
}


.mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink::after,
.mod-menu__heading.nav-header.mm-collapsed.mm-toggler.mm-toggler-nolink::after {
  	position: absolute;
  	right:0;
}
.metismenu.mod-menu .metismenu-item:not(.level-1)>ul, 
.metismenu.mod-menu .metismenu-item:not(.level-2)>ul{
  	margin-right:0;
}
.metismenu.mod-menu .mm-collapse>li.parent>ul{
  padding-top:0;
  padding-bottom:0.3em;
  margin-top:0;
  margin-bottom:0;
}
.metismenu-item.level-2,
.metismenu-item.level-2 .mod-menu__heading{
  font-weight:600;
}
.metismenu-item.level-2.default .p-2{
  text-align:center;
}
.metismenu-item.level-2.default a,
.mod-menu__heading.nav-header.mm-collapsed.mm-toggler.mm-toggler-nolink,
.mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink{
  height:1.75em;
}
.metismenu-item.level-3 a {
  	font-size:80%;
    padding-left:1em;
    height:1.5em;
    font-weight:normal;
}
.metismenu-item.level-3.deeper.parent {
  padding-left:1.75em;
}
.metismenu-item.level-4 a{
  padding-left:0;
}
.metismenu-item.level-4{
  padding-left:0;
}
@media only screen and (max-width:768px){
  .container-header .container-nav{padding-bottom:2%;padding-top:0;}}


/*icon space*/
.p-2{
  width:2.5em;
}
/*Navigation Bar - arrow position*/
.mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink::after,
.mod-menu__heading.nav-header.mm-collapsed.mm-toggler.mm-toggler-nolink::after{
    right:1em;
}
.metismenu-item.level-4.deeper.parent .mod-menu__heading.nav-header.mm-toggler.mm-toggler-nolink.mm-collapsed::after{
  right:0;
}



/*Search box*/
.mod-finder.js-finder-searchform.form-search {
  	margin-left:auto;
}
@media only screen and (max-width:768px){
  	.mod-finder.js-finder-searchform.form-search{margin-bottom:3%;margin-right:3%;}
}




/*Log out button*/
.mod-login-logout.form-vertical {
  	text-align:right;
  	margin-right:auto;
  	margin-left:auto;
  	margin-top:0;
  	padding-left:0.5em;
  	padding-right:0.5em;
  	max-width:1320px;
  	width:100%;
}
.container-header{
  padding-bottom:0.5em;
}
.container-header .container-search{
  	margin-top:0;
  
}
@media only screen and (max-width:768px){
.container-header .container-nav .container-search, .container-header .container-nav nav {margin-top:0;margin-left:auto;}
}



/*Header background styling*/
.container-header{
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    background-color: #cefafe;
    background-image: linear-gradient(135deg, #cefafe 0%, #71c8f0 100%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}



/*Banner message*/
.message {
  	font-size:1.2em; 
  	font-weight:bold; 
  	width: 60%;
   	color:#39B2EA;
}
@media only screen and (max-width:768px){
  	.message{font-size:3vmin;width:80%;}
}




/*My Info page*/
.myinfo {
  	display:flex;
   	flex-flow: row nowrap;
}
@media only screen and (max-width: 1400px)
    {.myinfo{flex-direction:column;}}

.social-media-icon-row{
  	display: flex; 
  	flex-flow: row nowrap;
  	justify-content: space-evenly;
  	margin: 3% 0;
}
@media only screen and (max-width: 768px)
  {.social-media-icon-row{flex-flow:row wrap;row-gap:3vmin;}
}
.social-media-icon{
  	display: flex;
  	flex-direction: column;
  	align-items: center;
}
@media only screen and (max-width: 768px)
{.social-media-icon.icon-2{flex-basis:50%;}
  .social-media-icon.icon-3{flex-basis:33.3%;}
  
}




/*Attendance Code (Sidebar)*/
.attendance-codes-header{
  	color:#39B2EA;
  	font-weight:bold;
}

.attendance-codes {
  	display:grid;
  	grid-template-columns:auto auto auto;
  	column-gap:5px;
  	font-size:80%;
}

.span-columns {
  	grid-column: 1 / span 3;
   	color:#777777;
  	padding-left:2em;
}

.attendance-codes-items:nth-child(3n+1){
  	font-weight:bold;  
}

.attendance-codes-items:nth-child(3n+2){
  	color:#39B2EA;
}

.attendance-codes-footer{
  	font-size:80%;
  	margin-top:1em;
}

.buttonHours:hover{
  	background-color:#2471A3 !important;
}




/*All custom buttons*/

button.button-exam{
    width:100%;
    background-color:#3498DB;
    color:white;
    font-size:100%;;
    font-weight:500;
    border-radius:6px;
    border:none;
}

button.button-exam:hover{
    background-color:#cefafe;
    color:#39B2EA;
}

button.button-exam.button-attSheet {
  	padding:0.5em 1em;
}




/*Calendar Link Button*/
a:link.calendar-link, a:visited.calendar-link {
  	width:100%;
    color:white;
    font-size:100%;
    font-weight:500;
    border-radius:6px;
    border:none;
  	padding: 0.7em 1em;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
}
a:link.calendar-link.google, a:visited.calendar-link.google{
  	background-color:#3498DB;
}
a:link.calendar-link.ical, a:visited.calendar-link.ical {
    background-color:#F7B11A;
  }
a:hover.calendar-link.google, a:active.calendar-link.google {
  background-color:#cefafe;
    color:#39B2EA;
}
a:hover.calendar-link.ical, a:active.calendar-link.ical {
  background-color:#FBD685;
    color:#dd9a08;
}
.calendar-link-grid{
  	display:grid;
  	grid-template-columns:1fr 1fr;
  	grid-template-rows:auto;
  	grid-column-gap:2vmin; 
  	grid-row-gap:2vmin;
}
@media only screen and (max-width:768px){
	.calendar-link-grid{grid-template-columns:1fr;}
}



/*Google sheet student attendance list display (-ios for mobile devices)*/
.studentlist{
  	overflow: hidden;
  	display: inline-block;
  	width:100%; 
  	height:900px;
}

.studentlistios{
  	display:none;
  	width:100vw;
  	height:80vh;
}

@media only screen and (max-width:768px)
	{.studentlistios{display:inline-block;}
      .studentlist{display:none}}

.attendance_sheet_button {
  	float:right;
  	margin:0 50px 20px 0;
}
.attendance_record_header {
  	display:inline-block;
}
.attendance_record_headerios {
  	display:none;
}

@media only screen and (max-width:768px)
	{.attendance_sheet_button {float:none; display:flex; flex-direction:column; align-items:center;justify-content:center;margin:20px 			auto 40px auto;}
	.attendance_record_header {display:none;}
	.attendance_record_headerios {display:inline-block;}
}



/*Full Slate*/
.button-exam.btn-fullslate{
  	padding:1em 2em;
}
.fullslate-dropdown {
  	position: relative;
  	display: inline-block;
  	float:right;
  	margin:0 1em 1em 1em;
}
.fullslate-dropdown-content{
  	display: none;
  	position: absolute;
  	background-color: #f9f9f9;
  	min-width: 8em;
  	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	z-index: 1;
}
.fullslate-dropdown-content a {
  	color: black;
  	padding: 0.5em 2em;
  	text-decoration: none;
  	display: block;
}
.fullslate-dropdown:hover .fullslate-dropdown-content {
  	display: block;
}
.fullslate-dropdown-content a:hover {
  	background-color: #f1f1f1
}
.fullslate-section:child(1) {
  	margin-top:2em;
}
.fullslate-section{
  	margin-bottom:2em;
}
.fullslate-section h3 {
  	color:#39B2EA;
}

table.fullslatetable{
  	background-color: #f5f5f5;
  	border: 1px solid #e3e3e3;
}

.fullslatetable tr th{
  	font-size:18px; 
  	color:#39B2EA;
  	padding:10px 0;
  	border:0.2em solid #FFFFFF;
  
}
.fullslatetable tr td{
  	padding:3px 5px;
  	border:0.2em solid #FFFFFF;
}

.fullslatetable tr td:nth-child(1) {
  	font-weight:bold; 
  	font-size:14px;
  	padding-left:20px;
}
.fullslatetable tr td:nth-child(6) {
  	padding-left:30px;
}
.fullslatetable.groupclasstable tr td{
  	height:30px;
  padding:1.5% 1%;
  
}
.studenttable{
  	font-weight:500;
  	color:green;
  	font-style:italic;
}
.internaltable{
  	font-weight:500;
  	color:brown;
  	font-style:italic;
}
.fullslateparagraph{
  	font-size:16px;
  	color:#696969;
}



/*YMES Curriculum & Books*/
#ymesCurriculum{
  	width:75vmin;
  	height:100vmax;
}
.ymesCurriculumBooks{
  	width:75vmin;
  	height:100vmax;
  	background-image: url('../../../../../images/class-tuition/New-YMES-Curriculum-2021-Books.png');
  	background-repeat:no-repeat;
  	background-size:100% auto;
}




/*New Teacher Setup and Orientation*/
#orientation-table{
  	margin-top:2em;
}
#orientation-table tr td {
  	padding:0.7em 1em;
}
.cell-header,.cell-blue,.cell-center,.cell-gray,.cell-empty{
  	border:solid white 2px;
}
.cell-header { 	
  	background-color:gray;
  	font-size:1.4em;
  	color:#FFFFFF;
  	font-weight:bold;
  	text-align:center;
  	padding:0.4em;
}
.cell-blue {  	
  	background-color:#BDD6EE;
  	font-size:1.3em;
  	color:#0089C9;
  	font-weight:bold;
}
.vertical-text {
  	writing-mode:vertical-rl;
  	text-orientation:sideways;
  	transform:rotate(180deg);
  	padding-left:1em;
}
.cell-center {
  	background-color:#D5DCE4;
  	font-size:1em;
  	color:#000000;
}
.cell-gray { 	
  	background-color:#D9D9D9;
  	font-size:1em;
  	color:#000000;
}
.cell-empty {  	
  	background-color:#FFFFFF;
}
.narrow{
  	height:0.5px;
  	font-size:5px;
}