@import url("../cdn/font-awesome4_7_0.min.css");

/******************************************************************************/
/*   The general styling used in the entire website                           */
/******************************************************************************/
:root {
  --off-canvas-left-width: 300px;
	--off-canvas-left-width-neg: -300px;
}


.main-content-container {
	padding-top: 1em;
}

.title-bar a {
	color: lightgray;
	font-size:1.1em;
}

.title-bar a.icon  {
	font-size:1.4em;
}

.title-bar a.icon.big  {
	font-size:1.8em;
}

/* make icon size smaller for very small screen */
@media only screen and (max-width: 400px) {
	.title-bar a.icon  {
		font-size:1.1em;
	}

	.title-bar a.icon.big  {
		font-size:1.5em;
	}
}

.title-bar a.profile-img-card {
    padding: 0 0.5rem !important;
}

.title-bar .profile-img-card img {
    width: 45px;
    height: 45px;
    /* margin: 0 auto 10px; */
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}


	.title-bar a:hover {
		color: #f56a6a;
	}

/* Turn Off Number Input Spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/******************************************************************************/
/* type colors */
/******************************************************************************/
a {
		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		color: var(--link-color);    /* #f56a6a; */
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: var(--link-color);    /* #f56a6a; */
			color: var(--link-hover-color) !important;
		}

			a:hover strong {
				color: inherit;
			}


/******************************************************************************/
/* Table */
/******************************************************************************/
	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr, table thead tr {
			border: solid 1px rgba(210, 215, 217, 0.75);
			border-left: 0;
			border-right: 0;
      color: #7f888f;
		}

    tbody, tfoot, thead {
     border-right: 0px;
     border-left: 0px;
    }

			table tbody tr:nth-child(2n + 1) {
        /* background-color: transparent; */
        background-color: rgba(230, 235, 237, 0.05);
			}

      tbody tr:nth-child(even) {
        background-color: rgba(230, 235, 237, 0.25);
      }

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			color: #3d4449;
			font-size: 0.9em;
			/* font-weight: 600; */
			padding: 0.75em 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px rgba(210, 215, 217, 0.75);
		}

		table tfoot {
			border-top: solid 2px rgba(210, 215, 217, 0.75);
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px rgba(210, 215, 217, 0.75);
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

      /* color codes used in tables for showing success or alert */
      table td.success, table th.success {
				background-color: #b3ffb3;
			}

      table td.alert, table th.alert {
				background-color: #ffb3b3;
			}

      table td.warning, table th.warning {
				background-color: #ffff99;
			}


  /******************************************************************************/
  /* display avatar */
  /******************************************************************************/

  img.avatar {
      width: 45px;
      height: 45px;
      /* margin: 0 auto 10px; */
      display: block;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
  }

  img.miniavatar {
	width: 30px;
	height: 30px;
	/* margin: 0 auto 10px; */
	display: block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}




  /******************************************************************************/
  /* icon used in assignemntInterface */
  /******************************************************************************/
  /* Small screen only */
  @media screen and (max-width: 39.9375em) {
  		.iconThumbnail {
  			max-height:48px;
  			max-width: 80px;
  		}
  }

  /* Medium screen and up */
  @media screen and (min-width: 40em) {
  	.iconThumbnail {
  		max-height:72px;
  		max-width: 140px;
  	}
  }

  @media screen and (max-width: 39.9375em) {
  		.iconThumbnail-small {
  			max-height:32px;
  			max-width:70px;
  		}
  }

  /* Medium screen and up */
  @media screen and (min-width: 40em) {
  	.iconThumbnail-small {
  		max-height:48px;
  		max-width:80px;
  	}
  }


  /******************************************************************************/
  /* round-buttons used in createQuestion */
  /******************************************************************************/
  .round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:100px;
    border: 2px solid #6d9ec4;
    border-radius: 50%;
    color:#6d9ec4;
    text-align:center;
    text-decoration:none;
    box-shadow: 0 0 3px gray;
    font-size:40px;
}
.round-button:hover {
    background: #EDF1F1;
    color:#6d9ec4;
}

.round-button.selected {
    background: #6d9ec4;
    color:#ffffff;
}

/* shows red-dashed-line with yellow backaround for any invalid input */
.invalid_input {
  border: 2px dashed red;
  background: #faffbd;
}


  /******************************************************************************/
  /* buttons */
  /******************************************************************************/

	.canvas-layout-theme .button { /* Canvas style*/
	    background: #f5f5f5;
	    color: #2D3B45;  
	    border: 1px solid;
	    border-color: #C7CDD1;
	    border-radius: 3px;
	    transition: background-color 0.2s ease-in-out;
	    display: inline-block;
	    position: relative;
	    padding: 12px 14px;
	    margin-bottom: 0;
	    font-size: 16px;
	    /* font-size: .875rem; */
	    /* line-height: 20px; */
	    text-align: center;
	    vertical-align: middle;
	    cursor: pointer;
	    text-decoration: none;
	    overflow: hidden;
	    text-shadow: none;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;


	}

	.button:hover {
	    background: #e8e8e8;
	    color: #2D3B45;
	}

	.button:disabled{
	  border: 1px dotted #999999;
	  background-color: white;
	  color: #cccccc;
	}

	/******************************************************************************/
	/* options for MCQ questions */
	/******************************************************************************/
	.MCQ_option_border {
		color:black;
		border:solid;
		padding: 20px 10px;
		word-wrap: break-word;
	}

	.MCQ_option.selected {
		color:black;
		background-color: Gainsboro;
	}

	.MCQ_option.correct {
		color:white;
		background-color: green;
	}

	.MCQ_option.wrong {
		color:white;
		background-color: red;
	}

	.MCQ_option.disabled {
		opacity: 0.5;
	}

	.MCQ_image {
		max-height: 500px;
	}





	/******************************************************************************/
	/*  the foundation off-canvas is styled to match the #sidebar 								*/
	/* #sidebar according to old site style, overwriting foundation settings			*/
	/******************************************************************************/
	.off-canvas {
			background-color: var(--sidebar-bg);
	}

	.position-left {
	    top: 0;
	    left: 0;
	    height: 100%;
	    overflow-y: auto;
	    width: var(--off-canvas-left-width);
	    -webkit-transform: translateX(var(--off-canvas-left-width-neg));
	    -ms-transform: translateX(var(--off-canvas-left-width-neg));
	    transform: translateX(var(--off-canvas-left-width-neg))
	}

	.off-canvas-content .off-canvas.position-left {
	    -webkit-transform: translateX(var(--off-canvas-left-width-neg));
	    -ms-transform: translateX(var(--off-canvas-left-width-neg));
	    transform: translateX(var(--off-canvas-left-width-neg))
	}

	#sidebar header.major > :last-child {
	border-bottom: solid 3px var(--link-color);    /* #f56a6a; */
	display: inline-block;
	margin: 0 0 2em 0;
	padding: 0 0.75em 0.5em 0;
	font-weight: 700;
}


	#sidebar {
		-moz-flex-grow: 0;
		-webkit-flex-grow: 0;
		-ms-flex-grow: 0;
		flex-grow: 0;
		-moz-flex-shrink: 0;
		-webkit-flex-shrink: 0;
		-ms-flex-shrink: 0;
		flex-shrink: 0;
		-moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		-webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		-ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		transition: margin-left 0.5s ease, box-shadow 0.5s ease;
		background-color: var(--sidebar-bg);
		font-size: 0.9em;
		position: relative;
		width: 100%;
	}

	#sidebar ul.contact {
		list-style: none;
		padding: 0;
		margin-left: 0;
	}

		#sidebar ul.contact li {
			text-decoration: none;
			border-top: solid 1px rgba(210, 215, 217, 0.75);
			margin: 1.5em 0 0 0;
			padding: 1.5em 0 0 3em;
			position: relative;
		}

			#sidebar ul.contact li:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#sidebar ul.contact li:before {
				color: var(--link-color);    /* #f56a6a; */
				display: inline-block;
				font-size: 1.5em;
				height: 1.125em;
				left: 0;
				line-height: 1.125em;
				position: absolute;
				text-align: center;
				top: 1em;
				width: 1.5em;
			}

			#sidebar ul.contact li:first-child {
				border-top: 0;
				margin-top: 0;
				padding-top: 0;
			}

				#sidebar ul.contact li:first-child:before {
					top: 0;
				}

			#sidebar ul.contact li a {
				color: var(--link-color);
				font-size: 1.2em;
			}


		#sidebar h2 {
			font-size: 1.38889em;
		}

		#sidebar > .inner {
			padding: 2.22222em 2.22222em 2.44444em 2.22222em ;
			position: relative;
			width: 100%;
		}

			#sidebar > .inner > * {
				border-bottom: solid 2px rgba(210, 215, 217, 0.75);
				margin: 0 0 3.5em 0;
				padding: 0 0 3.5em 0;
			}

				#sidebar > .inner > * > :last-child {
					margin-bottom: 0;
				}

				#sidebar > .inner > *:last-child {
					border-bottom: 0;
					margin-bottom: 0;
					padding-bottom: 0;
				}

			#sidebar > .inner > .alt {
				background-color: #eff1f2;
				border-bottom: 0;
				margin: -2.22222em 0 4.44444em -2.22222em;
				padding: 2.22222em;
				width: calc(100% + 4.44444em);
			}




/******************************************************************************/
/* #menu according to old site style, note that id is used here as opposed to */
/* class that is used in foundation		*/
/******************************************************************************/

#menu ul {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #3d4449;
	/* font-family: "Roboto Slab", serif; */
	font-family: 400;
	letter-spacing: 0.075em;
	list-style: none;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	text-transform: uppercase;
}

	#menu ul a, #menu ul span {
		border-bottom: 0;
		color: inherit;
		cursor: pointer;
		display: block;
		font-size: 0.9em;
		padding: 0.625em 0;
	}

		#menu ul a:hover, #menu ul span:hover {
			color: var(--link-hover-color);    /* #f56a6a; */
		}

		#menu ul a.opener, #menu ul span.opener {
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			text-decoration: none;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			position: relative;
		}

			#menu ul a.opener:before, #menu ul span.opener:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#menu ul a.opener:before, #menu ul span.opener:before {
				-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
				-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
				-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
				transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
				color: #9fa3a6;
				content: '\f078';
				position: absolute;
				right: 0;
			}

			#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
				color: var(--link-hover-color);    /* #f56a6a; */
			}

			#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
				display: block;
			}

			#menu ul a.opener.active:before, #menu ul span.opener.active:before {
				-moz-transform: rotate(-180deg);
				-webkit-transform: rotate(-180deg);
				-ms-transform: rotate(-180deg);
				transform: rotate(-180deg);
			}

#menu > ul > li {
	border-top: solid 1px rgba(210, 215, 217, 0.75);
	margin: 0.5em 0 0 0;
	padding: 0.5em 0 0 0;
}

	#menu > ul > li > ul {
		color: #9fa3a6;
		display: none;
		margin: 0.5em 0 1.5em 0;
		padding-left: 1em;
	}

		#menu > ul > li > a {
			outline-width: 0px;
		}

		#menu > ul > li > ul a, #menu > ul > li > ul span {
			font-size: 0.8em;
		}

		#menu > ul > li > ul > li {
			margin: 0.125em 0 0 0;
			padding: 0.125em 0 0 0;
		}

	#menu > ul > li:first-child {
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
	}


	/******************************************************************************/
	/* iFrame in assignmentCreator  																												*/
	/******************************************************************************/
	#iframe_createQuestion {
		padding:	1em;
	}





  	/******************************************************************************/
	/* showing codes in tinyMCE   																												*/
	/******************************************************************************/
  /* #tinymce code {
		background: rgba(135, 183, 226, 0.35);
		border-radius: 0.375em;
		border: solid 1px rgba(210, 215, 217, 0.75);
		font-size: 1em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

  #tinymce{
    font-size: 1.3em;
  }


  #tinymce p {
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
  } */


  /******************************************************************************/
  /* MathJax equations */
  /******************************************************************************/

  div.MathJax-image-container {
		/* background: green; */
		font-size: 1.3em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
    /* display block, align center */
    text-align: center;
	}

  .equation-boxed {
    text-align: center;
    padding: 0.5em 1em;
    border: solid !important;
    border-width: thin !important;
    border-color: black !important;
  }

  .equation-highlighted-boxed {
    text-align: center;
    padding: 0.5em 1em;
    background-color: #DFEFEA !important;
    border: solid !important;
    border-color: #009367 !important;
  }


  /*  \2234 = THEREFORE see https://www.w3schools.com/cssref/css_entities.asp */
  /* .equation-boxed::after{
    content: ' \2234';
  } */

  /* variables used in createQuestion */
  /* var {
    background: rgba(135, 183, 226, 0.10);
	cursor: pointer;
  }

  var:hover {
    background: rgba(135, 183, 226, 0.35);
  } */