/*@font-face {*/
/*  font-family: "Hind";*/
/*  src:    */
/*    url("/fonts/Hind/Hind-Regular.ttf") format("truetype") tech(color-COLRv1);*/
/*}*/
@import url('https://fonts.googleapis.com/css2?family=Hind');

body {
	font-family: 'Hind', 'Arial', 'Helvetica', sans-serif;
	background-color: #fff;
	/* 	font-size: 1rem; */
}

/* #overflow { */
/* 	padding: 0 4vw 4vw 0; */
/* 	margin: auto; */
/* } */
h1, h2 {
	color: rgb(45, 45, 45);
	font-size: 1.75em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	/*	color: rgb(208, 128, 34);*/
	font-size: 1.25em;
}

.madeBy a {
	text-decoration: none;
}

a {
	/*	color: rgb(208, 128, 34);*/
	font-weight: bold;
	font-size: 1em;
	text-decoration: underline;
}

#sidebar a {
	/* 	color: #FC0; */
	/* 	color: whitesmoke;	 */
	color: darkblue;
	font-size: 1.62em;
	text-decoration: none;
	margin: 0.25em;
}

.menu a {
	text-decoration: none;
}

#contactDiv {
	transform: rotate(270deg) translateY(3.5em);
	transform-origin: 50% 50%;
	box-sizing: border-box;
	position: fixed;
	bottom: 50%;
	right: 0;
	z-index: 99999;
	/*   border: 2px orange solid; */
}

#contactDiv a {
	text-decoration: none;
	margin: 1em 1em 1em 1em;
	padding: 0.5em 0.5em 0.5em 0.5em;
}

#sidebar, .byline {
	background: PowderBlue url("../images/strip-PIbCX0x.png") no-repeat;
	width: 100%;
	background-size: auto 6em;
	/*text-shadow: slateblue 1px 0 10px;*/
}

#sidebar {
	height: 3em;
}

#sidebar .hMenu {
	margin-top: -1em;
}

.byline {
	/*background-color: Deepskyblue;
	background-image: url("../images/strip-PIbCX0x.png");*/
	display: flex;
	flex-flow: row;
	text-align: center;
	padding-top: 2em;
	padding-top: 0em;
	padding-top: 0.2em;
	margin-top: 2em;
	margin-top: 0em;
	justify-content: center;
	color: navy;
	/*border: outset #30cfd066;*/
}

.byline a {
	font-size: 1.25em;
	padding-left: 0.5em;
	margin-left: 1em;
	padding-right: 1em;
	color: whitesmoke;
	color: darkblue;
}

.menu>a {
	color: darkblue;
}

#sidebar1 li {
	padding-right: 3em;
}

.hMenu {
	display: inline-block;
	/*zoom: 1;*/
	padding-right: 0.5em;
	margin: 0.0em 2.0em 0em 1.0em;
	/*background-image: linear-gradient(to top, white 0%, white 100%);
	border: outset #330867 0.25em;
	border-radius: 50% 20%/10% 40%;
	color: #330867;
	border-radius: 50px;
	background: #191970;
	box-shadow: inset 20px 20px 60px #15155f,
            inset -20px -20px 60px #1d1d81;*/
	border-radius: 17px;
	background: #e0f2f1;
	box-shadow: 9px 9px 31px #747e7d, -9px -9px 31px #ffffff;
	border-radius: 17px;
	background: #F5F5F5;
	box-shadow: 9px 9px 31px #7f7f7f, -9px -9px 31px #ffffff;
	font-size: 1.25em;
}

.menuactive  .hMenu {
	border-radius: 17px;
	background: #F5F5F5;
	box-shadow: inset 9px 9px 31px #7f7f7f, inset -9px -9px 31px #ffffff;
}

.colStoryBlock {
	/* 	display: inline-block; */
	/*zoom: 1;*/
	padding: 0.5em;
	margin: 0.0em 1.0em 0em 1.0em;
	border: outset #253a5b;
	border-radius: 50% 20%/10% 40%;
	color: navy;
	padding: 0em 0 .5em 0em 0 .5em;
	margin: -1 .0em 0 .75em 0em 1 .0em;
	border-radius: 17px;
	background-image: linear-gradient(to top, #c5efed -33%, #457cb5 100%);
	box-shadow: 9px 9px 31px #747e7d, -9px -9px 31px #ffffff;
	border-radius: 17px;
	box-shadow: 9px 9px 31px #7f7f7f, -9px -9px 31px #ffffff;
}

h1, h2, h3, .subTitle {
	color: navy;
	text-shadow: 9px 9px 31px #7f7f7f, -9px -9px 31px #ffffff;
}

.subTitle {
	text-align: center;
	font-size: 1.5em;
	display: block;
	padding-bottom: 1.5em;
}

.colStoryBlock {
	padding-top: 2em;
	margin-top: 2em;
}

.colStoryBlock+.colStoryBlock {
	/* 	height: 85vh; */
	/* 	overflow: auto;	 */
	
}

ul.nobullets>li {
	list-style-type: none
}

.storyBlock {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	/* 	height: auto; */
	max-width: 100%;
	max-height: 33vh;
	/* 	margin-top: -4em; */
}

.storyBlockSmaller {
	max-width: 100%;
}

.colStoryBlockContent>div {
	margin: 2em;
	display: block;
	margin: auto;
}

.colStoryBlockContent>img {
	border: outset #30cfd066;
	max-width: 50vh;
	max-height: 60vh;
	display: block;
	margin: auto;
}

.invisible {
	color: transparent;
}

.my-chart {
	width: 80vh;
	height: 60vh;
}

.menucontainer1 {
	flex: auto;
	display: flex;
	flex-flow: column;
	padding: 0.5em;
	/*   height: auto; */
	height: 60vh;
	font-size: 0.75em;
}

.menucontainer1>* {
	flex: 1 1 1em;
	font-size: 1rem;
}

.menu1>label {
	margin-top: 0.5em;
	color: var(--bkgdColour);
}

.menu1>label>img {
	height: 1em;
	width: 1em;
}

.menu1>label>span {
	visibility: hidden;
	height: 0em;
	width: 0em;
	padding-left: 2rem;
}

.menu1>input {
	visibility: hidden;
	position: absolute;
	top: -100em;
	left: -100em;
}

input#menuReveal ~div {
	visibility: visible;
	height: auto;
}

input#menuReveal:not(:checked) ~div {
	visibility: visible;
	height: auto;
}

input#menuReveal:not(:checked) ~label>span.menuTextMenu {
	visibility: hidden;
}

.field-collection-add-button {
	background-color: #5165ce;
	color: white;
}

.entityDepositAmount button.field-collection-add-button:after {
	content: ': deposit amount';
}

.entityDetail button.field-collection-add-button:after {
	content: ': detail';
}

.entityDiscountAmount button.field-collection-add-button:after {
	content: ': discount amount';
}

button.field-collection-add-button {
	justify-content: center;
}

.entityStudent>div>button.field-collection-add-button:after {
	content: ': student';
}

.entityPayment button.field-collection-add-button:after {
	content: ': payment';
}

.entityFeeAmount button.field-collection-add-button:after {
	content: ': fee amount';
}

.entityGuardianNote button.field-collection-add-button:after {
	content: ': note for guardian';
}

.entityInvoice button.field-collection-add-button:after {
	content: ': invoice';
}

#Family_students .entityTimeSlot button.field-collection-add-button:after,
	.entityTimeSlot button.field-collection-add-button:after {
	content: ': time slot';
}

#Family_students .entityToBeInvoiced button.field-collection-add-button:after,
	.entityToBeInvoiced button.field-collection-add-button:after {
	content: ': repeat line item to be created on next invoice';
}

#Family_students .entityToBeInvoicedOnce button.field-collection-add-button:after,
	.entityToBeInvoicedOnce button.field-collection-add-button:after {
	content: ': once off line item to be created on next invoice';
}

#Family_students .entityProfile button.field-collection-add-button:after,
	.entityProfile button.field-collection-add-button:after {
	content: ': profile';
}

#Family_students .entityStudentNote button.field-collection-add-button:after,
	.entityStudentNote button.field-collection-add-button:after {
	content: ': note';
}

/*To reorder add new button and contents of family students so button at top and newest on top*/
.field-collection>.form-widget, .ea-form-collection-items-reverse .form-widget-compound>div
	{
	display: flex;
	flex-direction: column-reverse;
}

/* reverse order of collections e.g. family_students or family_payments*/
.form-group .required-collection .col-form-label::after, .form-group .required-collection label::after
	{
	background: var(--color-danger);
	border-radius: 50%;
	content: "";
	display: inline-block;
	filter: opacity(75%);
	height: 4px;
	position: relative;
	right: -2px;
	top: -8px;
	width: 4px;
	z-index: var(--zindex-700);
}

.inheritDropdown {
	font-size: inherit;
}

.notice {
	filter: opacity(75%);
	border: 2pt var(--color-danger) solid;
	padding: 4em;
}

.greyedOut {
	color: lightgray;
}
/*---------------------------------------------------------*/
.reponsive-header-logo>img {
	max-height: 3em;
}

.main-header #header-logo .logo-custom {
		max-height: 10em;
		max-width: 10em;
	
}

section.content-footer {
	background-color: var(--button-primary-color);
}

/* bootstrap broken, so overriding here*/
@media ( min-width : 992px) {
	.wrapper {
		display: grid;
		grid-template-columns: var(--sidebar-max-width) auto;
		min-height: 100vh;
	}
}

canvas {
	border: 1px blue solid;
}

ul.nav-tabs li.nav-item a.nav-link {
	border-top: 1px var(--badge-primary-bg) solid;
	border-top-right-radius: 1em 35%;
	border-right: 1px var(--badge-primary-bg) solid;
	border-left: 1px var(--badge-primary-bg) solid;
	box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, .15), 0 1px 1px
		rgba(1, 1, 1, .75)
}

#tablist-tab-invoice-items{
	margin-left: -2.75em;
	
}

ul.nav-tabs li.nav-item a.nav-link.active {
	background-color: var(--badge-primary-bg);
	border-top: 0.25em var(--form-tabs-border-color) solid;
	border-top-right-radius: 1em 35%;
	border-right: 0.25em var(--form-tabs-border-color) solid;
	border-left: 0.25em var(--form-tabs-border-color) solid;
}

form>div.nav-tabs-custom.form-tabs-tablist {
	padding-left: 1em;
}

.students-control h2>button {
	border-top: 1em var(--form-tabs-border-color) solid;
	margin-top: 2em;
}

.students-control h2>button.field-collection-delete-button,
	#tab-invoice-items h2>button.field-collection-delete-button {
	border-top: 1pt transparent solid;
	margin-top: 2em;
}

.studentExtraFields h2>button.field-collection-delete-button {
	border-top: 1pt transparent solid;
	margin-top: 0em;
}

#tab-invoice-items h2>button.field-collection-delete-button {
	margin-top: 1em;
}

.student-Medical-aid:before {
	content: "Student Medical aid, if different from parent"
}

div.field-collection-item-last:not(.old) {
	border-top: 1em var(--form-tabs-border-color) solid;
	box-shadow: var(--form-input-error-shadow);
}

.accordion-body {
	border-bottom: 1pt var(--border-color) solid;
}

/* .form-tabs-tablist { */
/* 	border-bottom : 2pt blue solid;	 */
/* } */
.dropzone-container>input {
	border: 2pt var(--border-color) solid;
	padding: 4em;
}
.terms{
	white-space:nowrap;
	overflow: hidden;
}
#the-canvas-terms {
	border: 1px solid black;
	direction: ltr;
	height: 70vh;	
	min-height: 32em;
	max-width: 992px;
	max-height: 80em;
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
/* 	height: 1vh; */
    display: block;
    transform: none; /* Remove any transforms */
}

@media ( max-width : 991px) and (hover : none) {
	body {
		font-size: 1.2em;
/* 				background-color: brown; */
	}
	.subTitle {
		text-align: center;
		font-size: 0.8em;
	}
	#contactDiv {
		transform: rotate(270deg) translateY(3.5em);
	}
	#contactDiv a {
		font-size: 1.5em;
	}
	#container {
		font-size: 2em;
	}
}

@media only screen and (orientation: portrait) and ( min-width : 992px)
	{
	body {
/* 		background-color: pink; */
	}
	#contactDiv {
		transform: rotate(270deg) translateY(7em);
	}
	.subTitle {
		text-align: center;
		font-size: 1.2em;
	}
	#container {
		font-size: 2em;
	}
}

@media only screen { 
	body {
/* 			background-color: yellow; */
		}
}

@media ( orientation : landscape) and ( min-width : 992px) {
		body {
/* 			background-color: lightblue; */
		}
	.wrapper {
		align-items: start;
	}
	.sidebar-wrapper {
		position: sticky;
		top: 1rem;
		align-self: start;
	}
	.main-content {
		margin-left: 30px;
	}
	header.main-header {
		height: 23vh;
	}
	nav#main-menu {
		display: flex;
		flex-flow: column;
		overflow: auto;
		height: 72vh;
	}
	ul.nav-tabs li.nav-item a.nav-link.active {
		border-top: 0.25em var(--button-primary-bg) solid;
		border-top-right-radius: 1em 35%;
		border-right: 0.25em var(--button-primary-bg) solid;
		border-left: 0.25em var(--button-primary-bg) solid;
	}
	.subTitle {
		text-align: center;
		font-size: 1.2em;
	}
	.colStoryBlock+.colStoryBlock {
		height: revert;
		overflow: revert;
	}
	.hMenu {
		font-size: 1rem;
		margin-top: -1em;
	}
	#contactDiv {
		transform: rotate(270deg) translateY(3em);
	}
	.colStoryBlockContent p {
		font-size: 1em;
	}
	.colText {
		margin-top: 2em;
	}
}

@media only screen and (hover) and (pointer: fine) and ( min-width :
	1200px) {
	body {
/* 			background-color: lime; */
		}
	.terms > div >button {
		font-size: 2em;
	}
	#contactDiv {
		transform: rotate(0deg) translate(0, 0);
		position: fixed;
		top: -0.5em;
		right: 15%;
	}
}

@media only screen and (hover: none) and (pointer: coarse) {
		body {
/* 			background-color: cyan; */
		}
	#contactDiv {
		transform: rotate(270deg) translateY(8em);
		position: fixed;
		bottom: 50%;
		right: 0;
	}
	#contactDiv a {
		font-size: 3em;
	}
	.subTitle {
		text-align: center;
		font-size: 1.2em;
	}
	.byline, #sidebar {
		position: static;
	}
	#container {
		font-size: 2em;
	}
	.storyBlock, .colStoryBlock img {
		object-fit: cover;
		overflow: hidden;
		/* 		border: 2px yellow solid; */
		margin-top: 2em;
		padding-top: 2em;
	}
	
	#the-canvas-terms {
	border: 1px solid black;
	direction: ltr;
	height: 80vh;	
	min-height: 50em;
	max-width: 992px;
	max-height: 80em;
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
  	transform: none; /* Remove any transforms */
}
}