@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);

@-webkit-keyframes fadeEffect {
	0% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeEffect {
	0% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

html {
	overflow-x: hidden;
	overflow-y: scroll;
}

.tablinks.active  {
	background-color: #e6cdbe;
}

body {
	color: #615f63;
	background: #f4f4f0;
	background-image: url(image/login-background.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	cursor: default;
	line-height: 1.4em;
}

body.signed-in {
	background: #f4f4f0 url(image/clean-textile.png) 0 0;
}

.memoContent {
	padding-left: 20px;
}

a {
	text-decoration: none;
	color: #3498db;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 0.7rem 15px;
}

.w-100 {
	width: 100% !important;
}

.logo,
.padding-15 h3 {
	padding-left: 0;
	padding-right: 0;
}

.signin-form .logo {
	max-width: 150px;
}

h2 {
	font-size: 1.4em;
}

h4,
strong {
	color: #545454;
}

h4 {
	margin-bottom: 0;
	margin-top: 15px;
}

ul li + li {
	margin-top: 8px;
}

ul.no-style {
	margin: 0;
	padding: 0;
	list-style: none;
}

hr {
	margin: 0;
	border: 0;
	border-top: rgba(0, 0, 0, 0.15) solid 1px;
}

hr + h3 {
	margin-top: -5px;
	padding-top: 0;
}

.row + hr {
	margin-top: 13px;
}

hr:last-child {
	display: none;
}

img {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.title {
	margin-bottom: 0.4em;
	color: #3498db;
}

.container {
	padding: 0 15px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
}

#main-container {
	margin-bottom: 30px;
}

#hero-image {
	height: 400px;
	background-size: cover;
	margin-bottom: -75px;
	margin-left: -50px;
	margin-right: -50px;
	background-position: center;
	border: #fff solid 8px;
}

#plane {
	position: absolute;
	left: 50%;
	top: 10vh;
	transform: translateX(-65%);
	z-index: -1;
}

footer,
header {
	color: #fff;
	padding: 10px;
}

header {
	font-family: "Roboto", sans-serif;
	position: fixed;
	width: 100%;
	top: 0;
	transition: 0.2s;
	z-index: 999;
}

footer {
	background: #2b2926;
}

.signin-form {
	margin: 0 auto;
	max-width: 450px;
	overflow: hidden;
	background: #fff;
	border-radius: 3px;
}

.signin-form span {
	float: right;
	margin: 17px 0;
	font-size: 0.9em;
	color: #3498db;
	cursor: pointer;
}

.signout-form {
	display: inline-block;
	margin: 0;
}

.signout-form input[type="submit"] {
	padding: 0;
	background: 0 0;
	font-family: "Roboto", sans-serif;
}

.signout-form input[type="submit"]:hover {
	background: 0 0;
}

.section {
	margin-bottom: 1.5em;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
	overflow: hidden;
}

.percent {
	padding: 5px 10px 3px;
	color: #fff;
	background: #54c75d;
	background: linear-gradient(to bottom, #6fe278, #3cad45);
	font-weight: 700;
	border-radius: 20px;
	box-sizing: border-box;
}

.bar-graph.red .bar,
.percent.red {
	background: #d83c3c;
	background: linear-gradient(to bottom, #f15050, #c73737);
}

.bar-graph.blue .bar,
.percent.blue {
	background: #5a86c8;
	background: linear-gradient(to bottom, #80a4e2, #636dc3);
}

.grey-background {
	background: #f9f9f9;
	border-radius: 20px;
}

.bar-graph + .bar-graph {
	margin-top: 15px;
}

.bar-graph .bar {
	padding: 5px 10px 3px;
	color: #fff;
	background: #54c75d;
	background: linear-gradient(to bottom, #6fe278, #3cad45);
	font-weight: 700;
	border-radius: 20px;
	box-sizing: border-box;
}

.bar-graph .background {
	background: #f9f9f9;
	border-radius: 20px;
}

.dates {
	overflow-x: scroll;
	overflow-y: hidden;
	padding: 30px;
	margin-top: 10px;
}

.dates .bar {
	position: relative;
	height: 2px;
	background: #e4e4e4;
}

.dates .bar .point {
	position: absolute;
	width: 8px;
	height: 8px;
	bottom: -5px;
	border-radius: 10px;
	background: #fff;
	border: solid #3498db 2px;
	cursor: pointer;
	transition: background 0.2s;
}

.dates .bar .point.focus,
.dates .bar .point:hover,
header {
	background: #3498db;
}

.dates .bar .point span {
	position: absolute;
	bottom: 10px;
	transform: translateX(-43%);
	text-align: center;
	width: 100px;
	font-size: 0.9em;
}

.dates::-webkit-scrollbar {
	width: 1em;
}

.dates::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 1em;
}

.dates::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 1em;
}

.menu-button {
	display: block;
	padding: 10px;
	width: 100%;
	text-align: center;
	float: left;
	box-shadow: rgba(0, 0, 0, 0.04) 0 0 90px 0 inset;
	transition: box-shadow 0.3s;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.menu-button:hover {
	box-shadow: rgba(0, 0, 0, 0.12) 0 0 90px 0 inset;
}

.menu-button h2 {
	padding: 10px 0 0;
}

.menu-button i {
	font-size: 1.3em;
}

.menu-button-disabled {
	color: #f7f7f7 !important;
	background: #bdbaba !important;
}

.background-pink {
	background: #ce63ac;
	background: linear-gradient(to bottom right, #f58ad3, #a73986);
	color: #fff;
}

.background-blue {
	background: #43a7fb;
	background: linear-gradient(to bottom right, #63b8ff, #2172b5);
	color: #fff;
}

.background-red {
	background: #c35261;
	background: linear-gradient(to bottom right, #e26273, #af3d4c);
	color: #fff;
}

.background-green {
	background: #62af57;
	background: linear-gradient(to bottom right, #7eca74, #4f9445);
	color: #fff;
}

.background-purple {
	background: #6d568c;
	background: linear-gradient(to bottom right, #7f679e, #5d4979);
	color: #fff;
}

.background-yellow {
	background: #fdcd67;
	background: linear-gradient(to bottom right, #ffd479, #efbe57);
	color: #fff;
}

.background-light-pink {
	background: #ff639c;
	background: linear-gradient(to bottom right, #ffe1ec, #ff639c);
	color: #fff;
}

.background-brown {
	background: #bf986d;
	background: linear-gradient(to bottom right, #d0b395, #a07446);
	color: #fff;
}

.background-teal {
	background: #00ffbf;
	background: linear-gradient(to bottom right, #00e6ac, #00b386);
	color: #fff;
}

.background-maroon {
	background: #bd0b7a;
	background: linear-gradient(to bottom right, #f76ec2, #c20a7b);
	color: #fff;
}

.background-salmon {
	background: #ffa07a;
	background: linear-gradient(to bottom right, #ffb699, #ff6d33);
	color: #fff;
}

.background-navy {
	background: #4d88ff;
	background: linear-gradient(to bottom right, #80aaff, #04c);
	color: #fff;
}

.background-heliotrope {
	background: #bf98ff;
	background: linear-gradient(to bottom right, #d09bff, #914dff);
	color: #fff;
}

.background-gold {
	background: #ffd11a;
	background: linear-gradient(to bottom right, #ffe680, #e6b800);
	color: #fff;
}

.myDiary img {
	width: 100%;
}

.communication-book .output,
.communication-book .output a {
	transition: color 0.4s;
}

.communication-book.focus .output,
.communication-book.focus .output a {
	color: #fff;
}

.file-button {
	display: inline-block;
}

.file-button i {
	margin-top: 15px;
	margin-bottom: 8px;
	font-size: 1.5em;
}

h2 i {
	width: 1em;
	text-align: center;
	padding: 0 10px 0 5px;
	vertical-align: text-top;
}

h2 i.fa-spin {
	padding: 0;
}

img.style-icon,
input,
textarea {
	padding: 5px;
	width: 100%;
	box-sizing: border-box;
}

img.style-icon {
	border: rgba(0, 0, 0, 0.2) solid 1px;
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.2) 0 3px 10px -3px;
	cursor: pointer;
}

img.style-icon.focus {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 90%;
	width: auto;
	max-height: 600px;
	background: #fff;
	z-index: 2;
}

input,
textarea {
	border: 0;
	border-bottom: rgba(0, 0, 0, 0.15) solid 1px;
	border-radius: 0;
	transition: border-color 0.2s;
}

textarea {
	max-width: 100%;
}

[type="submit"] {
	padding: 15px;
	color: #fff;
	background: #3498db;
	border-bottom: none;
	cursor: pointer;
	transition: background 0.25s;
}

[type="submit"]:hover {
	background: #42a7eb;
}

.input-field {
	position: relative;
	margin-top: 15px;
}

.input-field:first-of-type {
	margin-top: 5px;
}

.input-field label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 3px 5px;
	color: #bfbfbf;
	cursor: text;
	pointer-events: none;
	transition: font-size 0.25s, transform 0.25s, color 0.25s;
}

input:focus,
textarea:focus {
	border-color: #3498db;
}

:focus + label {
	color: #3498db;
}

.focus label {
	font-size: 0.8em;
	transform: translateY(-17px);
}

table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

table th {
	text-align: left;
	padding: 5px;
}

table thead {
	color: #fff;
	background: #5b6165;
}

table tr {
	background: rgba(0, 0, 0, 0.02);
}

table tr:nth-child(odd) {
	background: rgba(0, 0, 0, 0.04);
}

.dialogue-box .button:hover,
table tr:hover {
	background: rgba(0, 0, 0, 0.06);
}

table td {
	padding: 10px 5px;
}

.slider {
	margin-top: 15px;
}

.slider-container {
	position: relative;
	height: 35px;
}

.slider-fill {
	position: absolute;
	top: 50%;
	width: 50%;
	height: 5px;
	background: #3498db;
	pointer-events: none;
	transform: translateY(-50%);
}

.faces {
	margin-top: -10px;
	padding: 5px 1px;
	font-size: 1.5em;
	margin-bottom: 10px;
	position: relative;
}

.faces .fa-smile-o {
	color: #39be42;
}

.faces .fa-frown-o {
	color: #f24343;
}

.faces .fa-meh-o {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(0, 0, 0, 0.3);
}

input[type="range"] {
	padding: 0;
	height: 35px;
	width: 100%;
	border: 0;
	background: 0 0;
	-webkit-appearance: none;
}

input[type="range"]:focus {
	outline: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 5px;
	background: #e4e4e4;
	border-radius: 10px;
	cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
	height: 18px;
	width: 18px;
	border-radius: 25px;
	-webkit-appearance: none;
	background: #fff;
	border: 2px solid #3498db;
	margin-top: -7px;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

button {
	padding: 0.6em 1.6em;
	border-radius: 3px;
	border: rgba(0, 0, 0, 0.1) solid 1px;
	box-shadow: rgba(0, 0, 0, 0.2) 0 4px 6px -3px,
		rgba(0, 0, 0, 0.1) 0-1px 5px inset;
	cursor: pointer;
	transition: opacity 0.2s;
}

button:hover {
	opacity: 0.9;
}

button.grey {
	color: rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.03);
}

button.green {
	color: #fff;
	background: #45b24c;
}

.record + .record {
	margin-top: 30px;
	padding-top: 30px;
	border-top: rgba(0, 0, 0, 0.25) solid 1px;
}

.field strong {
	display: block;
}

.field + .field {
	margin-top: 15px;
}

.list-style-none {
	list-style: none;
}

.color-white {
	color: #fff;
}

.clear-mobile {
	clear: both;
}

.display-none {
	display: none;
}

.inline-block {
	display: inline-block;
}

.box-shadow {
	box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
}

.border-radius-3 {
	border-radius: 3px;
	overflow: hidden;
}

.border-radius-20 {
	border-radius: 20px;
	overflow: hidden;
}

.margin-0 {
	margin: 0;
}

.margin-top-0 {
	margin-top: 0;
}

.margin-top-5 {
	margin-top: 5px;
}

.margin-top-15 {
	margin-top: 15px;
}

.margin-bottom-15 {
	margin-bottom: 15px;
}

.margin-bottom-30 {
	margin-bottom: 30px;
}

.margin-30-0 {
	margin: 30px 0 !important;
}

.padding-0 {
	padding: 0;
}

.padding-15 {
	padding: 15px;
}

.padding-0-15 {
	padding: 0 15px;
}

.padding-bottom-15 {
	padding-bottom: 15px;
}

.padding-top-0 {
	padding-top: 0;
}

.float-right {
	float: right;
}

.text-right {
	text-align: right;
}

.clear-fix {
	overflow: auto;
}

.clear-both {
	clear: both;
}

.text-center {
	text-align: center;
}

.hide-mobile,
.slide-area {
	display: none;
}

.button {
	cursor: pointer;
}

.background-white {
	background: #fff;
}

:focus {
	outline: 0;
}

#screen-overlay,
.error-message {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

#achievements-screen-overlay,
#screen-overlay {
	display: none;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 2;
}

#achievements-screen-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}

#achievements-panel {
	display: none;
	position: fixed;
	width: 75%;
	top: 0;
	bottom: 20px;
	left: 12.5%;
	border-radius: 15px;
	background: #ffffffd4;
	z-index: 99999;
	overflow-y: scroll;
}

.error-message {
	padding: 10px;
	color: #fff;
	background: #36362f;
}

.dialogue-box {
	position: fixed;
	left: 50%;
	top: 50%;
	padding: 10px;
	width: 100%;
	max-width: 400px;
	background: #fff;
	box-sizing: border-box;
	transform: translateX(-50%) translateY(-50%);
	z-index: 2;
}

.dialogue-box .title {
	display: block;
	margin-bottom: 0.4em;
	font-weight: 700;
}

.dialogue-box .description {
	font-size: 0.9em;
	margin-bottom: 0.2em;
	display: inline-block;
	color: rgba(0, 0, 0, 0.8);
}

.dialogue-box .button {
	display: block;
	float: right;
	width: 50%;
	padding: 0.6em;
	box-sizing: border-box;
	color: rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.03);
	text-align: center;
	cursor: pointer;
	transition: background 0.2s;
}

.dialogue-box .button.yes {
	background: #f14444;
	color: #fff;
}

.dialogue-box .button.yes:hover {
	background: #e74646;
}

@media (min-width: 600px) {
	.signin-form {
		margin-top: 30vh;
	}

	.menu-button {
		padding: 30px 15px;
		width: 33.33%;
		height: 119px;
	}

	.menu-button.x2,
	.menu-button.x4 {
		padding: 30px 15px;
		width: 25%;
	}

	.menu-button.x2 {
		width: 50%;
	}

	.hide-mobile {
		display: inherit;
	}

	.clear-mobile {
		display: inline;
		clear: none;
	}
}

@media (max-width: 600px) {
	.main-menu {
		float: none;
	}

	.main-menu li {
		display: inline-block;
		margin: 0 20px 0 0;
	}

	.main-menu li:last-child {
		margin-right: 0;
	}

	.text-left-mobile {
		text-align: left;
	}
}

.alert {
	margin-bottom: 15px;
}

.closebtn:hover {
	color: #000;
}

.staff-photo,
img.lazy {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 80px;
	image-orientation: from-image;
}

img.lazy {
	width: 100%;
}

.staff-photo {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.menu-buttons,
.section {
	border-radius: 15px;
}

#main-container {
	margin-top: 200px;
}

#logo {
	transition: 0.2s;
}

#scroll {
	position: fixed;
	right: 10px;
	bottom: 10px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	background-color: #3498db;
	text-indent: -9999px;
	display: none;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
}

#scroll span {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -12px;
	height: 0;
	width: 0;
	border: 8px solid transparent;
	border-bottom-color: #fff;
}

#scroll:hover {
	background-color: #e74c3c;
	opacity: 1;
	filter: "alpha(opacity=100)";
	-ms-filter: "alpha(opacity=100)";
}

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted #000;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 250px;
	background-color: #000;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 999;
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

.admin-panel-link {
	text-shadow: 1px 1px 2px #0000001c;
}

.signature-render {
	border: solid;
}

.FlowpointTab {
	overflow: hidden;
	background-color: #f1f1f1;
	border-radius: 5px;
}

.FlowpointTab button {
	background-color: inherit;
	float: left;
	border: 0;
	outline: 0;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
}

.FlowpointTab button:hover {
	background-color: #ddd;
}

.FlowpointTab button.active {
	background-color: #ccc;
}

.FlowpointTabContent {
	display: none;
	padding: 6px 12px;
	-webkit-animation: fadeEffect 1s;
	animation: fadeEffect 1s;
}

.alert {
	padding: 20px;
	background-color: #62afdd;
	color: #fff;
}

.closebtn {
	margin-left: 15px;
	color: #fff;
	font-weight: 700;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
}

.previewPane {
	color: #fff;
	background: #62afdd;
	padding: 10px;
	font-size: large;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	width: 400px;
	position: relative;
	top: -50px;
	margin-block: -10px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 0px;
	margin-bottom: -50px;
}

.previewPane > span > a {
	color: #eaff53;
	font-size: small;
}