@import url(icons.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900");

* {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    line-height: 1.75;
    font-size: 16pt;
    color: #585858;
    border-radius: 4px;
    border: 0;
    margin: 0;
    padding: 0;
}

[style*="--hoverColor"] {
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
	-ms-transition: color 0.2s ease;
	transition: color 0.2s ease;
}

	[style*="--hoverColor"]:hover {
		color: var(--hoverColor);
	}

@media screen and (max-width: 1680px) {
	* { font-size: 14pt; }
}

@media screen and (max-width: 1280px) {
	* { font-size: 12pt; }
}


body {
	padding: 1.5em;
}

    header {
        display: flex;
        justify-content: center;
        height: calc(150px + 1lh);
    }

        header a {
            border-radius: 4px;
            border-bottom: 0;
        }

        header > a.logo {
            display: block;
            height: 125px;
            background-image: url("/Content/Images/logo.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

            header > a.logo:after {
                content: "NHS Community Tutoring";
                font-family: "Source Sans Pro", Helvetica, sans-serif;
                font-weight: 900;
                text-transform: uppercase;
                letter-spacing: 0.35em;
                position: relative;
                top: 150px;
                left: 0.175em;
            }

        header > nav {
            position: fixed;
            top: 1.5em;
            right: 1.5em;
            padding-inline: 10px;
            background-color: rgba(255, 255, 255, 0.5);
			z-index: 9;
			display: flex;
			column-gap: 1.5em;
        }

    main {
        padding-block: 2.5em;
    }

    footer {
        display: block;
        padding: 1em;
        background-color: #f6f6f6;
    }

/* Pop Ups */

.popUp {
	-moz-transition: backdrop-filter 0.5s ease, visibility 0.5s ease;
	-webkit-transition: backdrop-filter 0.5s ease, visibility 0.5s ease;
	-ms-transition: backdrop-filter 0.5s ease, visibility 0.5s ease;
	transition: backdrop-filter 0.5s ease, visibility 0.5s ease;
	visibility: hidden;
    display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
}

	.popUp > * {
		-moz-transition: -moz-transform 0.5s ease, color 0.2s ease;
		-webkit-transition: -webkit-transform 0.5s ease, color 0.2s ease;
		-ms-transition: -ms-transform 0.5s ease, color 0.2s ease;
		transition: transform 0.5s ease, color 0.2s ease;
	}

	.popUp > :not(.icon) {
		padding: 1em;
	}

	.popUp > .icon {
		height: 1.75em;
		margin: 0.25em 0.5em 0 0;
	}

	.popUp.active {
		visibility: visible;
        backdrop-filter: blur(7px);
    }

        .popUp.active > * {
			-moz-transform: translate(0, 0) !important;
			-webkit-transform: translate(0, 0) !important;
			-ms-transform: translate(0, 0) !important;
			transform: translate(0, 0) !important;
        }

.popUp.directory {
	justify-content: right;
	padding: 1em;
	z-index: 10;
}

	.popUp.directory > * {
		-moz-transform: translateX(400px);
		-webkit-transform: translateX(400px);
		-ms-transform: translateX(400px);
		transform: translateX(400px);
	}

	.popUp.directory > :not(.icon) {
		display: flex;
		flex-direction: column;
		width: 250px;
		background-color: #585858;
		color: #ffffff;
	}

	.popUp.directory a {
		border-bottom: solid 1px #ffffff;
		margin-bottom: 1em;
	}

		.popUp.directory a:hover {
			border-bottom-color: #b8ad41;
		}

.popUp.general {
    padding: 15vh 15vw;
	z-index: 11;
}

	.popUp.general > * {
		-moz-transform: translateY(100vh);
		-webkit-transform: translateY(100vh);
		-ms-transform: translateY(100vh);
		transform: translateY(100vh);
	}

	.popUp.general > ::-webkit-scrollbar {
		display: none;
	}

	.popUp.general > :not(.icon) {
		background-color: #ffffff;
		border: solid 1px var(--borderColor);
		width: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
	}

.popUp.general:has(.icon) {
	padding-left: calc(15vw - 2.5em);
}

/* Block Text Formatting */

p:not(:last-child),
blockquote:not(:last-child),
pre:not(:last-child),
ol:not(:last-child),
ul:not(:last-child),
dl:not(:last-child) {
    margin-bottom: 1em;
}

p, blockquote, pre, ol, ul, dl {
    color: inherit;
}

    blockquote {
        display: flex;
        font-style: italic;
    }

        blockquote:before {
            content: "";
            width: 30px;
            height: auto;
            background: #c9c9c9;
            border-radius: 4px;
            margin-right: 2em;
        }

    pre {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        background: rgba(144, 144, 144, 0.075);
        border: solid 1px #c9c9c9;
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        white-space: pre-wrap;
        padding: 0.6em 1em;
        max-height: 200px;
    }

    ol, ul {
        padding-left: 1.25em;
    }

        ol li, ul li {
            padding-left: 0.5em;
        }

    ul.alt {
        list-style: none;
        padding-left: 0;
    }

        ul.alt li {
            border-radius: 0;
            border-top: solid 1px #c9c9c9;
            padding: 0.5em 0;
        }

            ul.alt li:first-child {
                padding-top: 0;
                border-top: none;
            }

            ul.alt li:last-child {
                padding-bottom: 0;

            }

    dl dt {
        font-weight: 700;
    }

    dl dd {
        padding-left: 1.75em;
    }

        dl dd:not(:last-child) {
            padding-bottom: 0.5em;
        }

/* Inline Text Formatting */

a, strong, b, em, i, mark, span {
    color: inherit;
    font-size: inherit;
}

    a {
        -moz-transition: border-bottom-color 0.2s ease, color 0.2s ease;
        -webkit-transition: border-bottom-color 0.2s ease, color 0.2s ease;
        -ms-transition: border-bottom-color 0.2s ease, color 0.2s ease;
        transition: border-bottom-color 0.2s ease, color 0.2s ease;
        text-decoration: none;
        border-radius: 0;
        border-bottom: dotted 1px rgba(88, 88, 88, 0.5);
    }

        a:hover {
            border-bottom-color: transparent;
            color: #b8ad41 !important;
        }

    strong, b {
        font-weight: 700;
    }

    em, i {
    	font-style: italic;
	}

    mark {
        background: rgba(184, 173, 65, 0.3);
        color: #b8ad41;
        padding-inline: 0.1em;
    }

sup, sub {
    font-size: 0.8em;
}

    sup {
        vertical-align: super;
    }

		sup.abbreviation {
			vertical-align: text-bottom;
		}

    sub {
        vertical-align: sub;
    }

code {
    background: rgba(144, 144, 144, 0.075);
    border: solid 1px #c9c9c9;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    padding: 0.25em 0.65em;
}

/* Headings & Separators */

h1 {
    color: inherit;
    font-size: 2.75em;
    font-weight: 700;
    letter-spacing: -0.035em;
    margin: 0 0 0.5em;
}

    @media screen and (max-width: 736px) {

        h1 {
            font-size: 2em;
        }

    }

    @media screen and (max-width: 400px) {

        h1 {
            font-size: 1.75em;
        }

    }

h2, h3, h4, h5, h6 {
    color: inherit;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    margin: 0 0 1em;
}

	h2 {
		font-size: 1.1em;
	}

	h3 {
		font-size: 1em;
	}

	h4 {
		font-size: 0.8em;
	}

	h5 {
		font-size: 0.8em;
	}

	h6 {
		font-size: 0.8em;
	}

	@media screen and (max-width: 736px) {

		h2 {
			font-size: 1em;
		}

		h3 {
			font-size: 0.8em;
		}

	}

label {
    display: inline-block;
    font-weight: 700;

}

hr {
    border-radius: 0;
    border-bottom: solid 1px #c9c9c9;
    margin: 2em 0;
}

/* Form */

form:not(.schedulingPortal) > :not(:last-child) {
	margin-bottom: 1.5em;
}

.childHasErrorMessage > * {
	width: 100%; 
}

	.error-message {
		display: none;
		color: red;
		font-size: 0.8em;
        white-space: pre;
        text-wrap: wrap;
        text-indent: 1em hanging;
	}

		.error-message:before {
			font-family: "Font Awesome 5 Free";
			font-size: 0.8em;
			content: "\f06a";
            margin-right: 0.25em;
		}

.acknowledgement {
	display: flex;
	flex-direction: column;
	row-gap: 0.5em;
	padding: 0.5em;
	margin-top: 0.5em;
	border: solid 1px red;
}

	.acknowledgement > * {
		font-size: 0.75em;
	}
	.acknowledgement > :not(:first-child) {
		margin-left: 1.5em;
	}

fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

	fieldset.span-1 > * {
		width: 100% !important;
	}

	fieldset.span-2 > * {
		width: calc(50% - 0.5em) !important;
	}

		fieldset.span-2.subjects > * > .hidden {
			display: none;
            flex-direction: column;
            gap: 1em;
			margin: 1em 0 0 calc(32px + 1em);
		}

			fieldset.span-2.subjects > * > .hidden > input[type="text"] {
				margin-left: calc(32px + 2em);
				height: 2em;
				width: calc(100% - 32px - 2em);
			}

	fieldset.span-3 > * {
		width: calc(33.33333% - 0.66666em) !important;
	}

	fieldset.span-4 > * {
		width: calc(25% - 0.75em) !important;
	}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	border-bottom: solid 1px #c9c9c9;
	outline: 0;
	text-decoration: none;
	resize: none;
	width: 100%;
}

	input[type="text"]:invalid:not(:placeholder-shown),
	input[type="password"]:invalid:not(:placeholder-shown),
	input[type="email"]:invalid:not(:placeholder-shown),
	input[type="tel"]:invalid:not(:placeholder-shown),
	select:invalid:not(:placeholder-shown),
	textarea:invalid:not(:placeholder-shown) {
		border-bottom-color: red;
		box-shadow: inset 0 -1px 0 0 red;
	}

		input[type="text"]:invalid:not(:placeholder-shown) + .error-message,
		input[type="password"]:invalid:not(:placeholder-shown) + .error-message,
		input[type="email"]:invalid:not(:placeholder-shown) + .error-message,
		input[type="tel"]:invalid:not(:placeholder-shown) + .error-message,
		select:invalid:not(:placeholder-shown) + .error-message,
		textarea:invalid:not(:placeholder-shown) + .error-message {
			display: block;
		} 

	input[type="text"]:focus:not(:invalid:not(:placeholder-shown)),
	input[type="password"]:focus:not(:invalid:not(:placeholder-shown)),
	input[type="email"]:focus:not(:invalid:not(:placeholder-shown)),
	input[type="tel"]:focus:not(:invalid:not(:placeholder-shown)),
	select:focus:not(:invalid:not(:placeholder-shown)),
	textarea:focus:not(:invalid:not(:placeholder-shown)) {
		border-bottom-color: #b8ad41;
		box-shadow: inset 0 -1px 0 0 #b8ad41;
	}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select {
	height: 3em;
}

select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23c9c9c9' /%3E%3C/svg%3E");
	background-size: 1.25rem;
	background-repeat: no-repeat;
	background-position: calc(100% - 1rem) center;
	padding-right: 3em;
	text-overflow: ellipsis;
}

	select:focus::-ms-value {
		background-color: transparent;
	}

	select::-ms-expand {
		display: none;
	}

textarea {
	min-height: 3.75em;
}

input[type="checkbox"],
input[type="radio"] {
	display: none;
}

	input[type="checkbox"].normal + label,
	input[type="radio"].normal + label {
		display: flex;
		font-weight: 300;
	}

		input[type="checkbox"].normal + label:before,
		input[type="radio"].normal + label:before {
			-moz-transition: -moz-transform 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease;
			transition: transform 0.5s ease;
			font-family: "Font Awesome 5 Free";
			line-height: 1em;
			content: "";
			text-align: center;
			align-content: center;
			width: 30px;
			height: 30px;
			border: solid 1px #c9c9c9;
			margin-inline: 1em;
		}

			input[type="checkbox"].normal + label:before {
				border-radius: 4px;
			}

			input[type="radio"].normal + label:before {
				border-radius: 50%;
			}

		input[type="checkbox"].normal + label:hover:before,
		input[type="radio"].normal + label:hover:before {
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
			content: "\f00c";
			background-color: #b8ad41;
			border-color: #b8ad41;
			color: #ffffff;
		}

		input[type="checkbox"].normal:checked + label:before,
		input[type="radio"].normal:checked + label:before {
			content: "\f00c";
			background-color: #b8ad41;
			border-color: #b8ad41;
			color: #ffffff;
		}

/* Button */

button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: -mon-transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    transition: transform 0.5s ease, color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    background-color: transparent;
    border: solid 2px #585858;
	color: #585858;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 900;
    letter-spacing: 0.35em;
    line-height: 3.45em;
    text-align: center;
    text-transform: uppercase;
    padding: 0 1.25em 0 1.6em;
}

    button:hover {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        border-color: #b8ad41;
        color: #b8ad41;
    }

    button:disabled {
        pointer-events: none;
        opacity: 0.25;
    }

	button.fit {
        width: 100%;
    }

	button.small {
        font-size: 0.6em;
    }

    button.large {
        font-size: 1em;
    }

	button.primary {
        border: none;
        background-color: #585858;
        color: #ffffff;
    }

        button.primary:hover {
            background-color: #b8ad41;
            color: #ffffff !important;
        }

/* Image */

.wrap-image.left img, .wrap-image.right img {
    display: inline-block;
    margin-bottom: 0.5em;
    width: 10em;
    position: relative;
    top: 0.5em;
}

    .wrap-image.left img {
        float: left;
        margin-right: 0.5em;
    }

    .wrap-image.right img{
        float: right;
        padding-left: 0.5em;
    }

.wrap-image.fit img {
    display: block;
    width: 100%;
    margin-bottom: 1em;
}

/* Table */

table {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    margin-bottom: 1em;
    width: 100%;
    border-collapse: collapse;
}

    th, td {
        padding: 0.75em 0 0.75em 0.75em;
        text-align: left;
        min-width: 100px;
    }

        th {
            font-weight: 700; 
        }

    tbody, tr {
        border-radius: none;
    }

        tbody {
            border-block: solid 2px #c9c9c9;
        }

            tbody > tr {
                border-bottom: solid 1px #c9c9c9;
            }

                tbody tr:nth-child(2n + 1) {
                    background-color: rgba(144, 144, 144, 0.075);
                }

/* Tiles */

.tiles {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    gap: 1.5em;
}

    a.tile {
        -moz-transition: -moz-transform 0.5s ease, background-color 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease, background-color 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease, background-color 0.5s ease;
        transition: transform 0.5s ease, background-color 0.5s ease;
        flex-basis: calc(33.33333% - 1em);
        align-content: center;
        border-radius: 4px;
        border-bottom: 0;
        background-blend-mode: overlay;
        background-size: cover;
        aspect-ratio: 1;
    }

        a.tile.churchill-red {
            background-image: url("/Content/Images/pic01.jpg");
            background-color: #c7203d;
        }

        a.tile.library-green {
            background-image: url("/Content/Images/pic02.jpg");
            background-color: #b2cf1b;
        }

        a.tile.nhs-blue {
            background-image: url("/Content/Images/pic03.jpg");
            background-color: #1855a5;
        }

        a.tile.churchill-gray {
            background-image: url("/Content/Images/pic04.jpg");
            background-color: #505050;
        }

        a.tile.library-blue {
            background-image: url("/Content/Images/pic05.jpg");
            background-color: #4783a5;
        }

        a.tile.nhs-gold {
            background-image: url("/Content/Images/pic06.jpg");
            background-color: #b8ad41;
        }

        a.tile > .content {
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            transform: translateY(50%);
            padding-inline: 1.5em;
            text-align: center;
            color: #ffffff;
        }

            a.tile > .content > .shown {
                -moz-transition: -moz-transform 0.5s ease;
                -webkit-transition: -webkit-transform 0.5s ease;
                -ms-transition: -ms-transform 0.5s ease;
                transition: transform 0.5s ease;
                transform: translateY(-50%); 
                margin-bottom: 0;
            }

            a.tile > .content > .hidden {
                -moz-transition: opacity 0.5s ease;
                -webkit-transition: opacity 0.5s ease;
                -ms-transition: opacity 0.5s ease;
                transition: opacity 0.5s ease;
                opacity: 0;
            }

    a.tile:hover {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        a.tile.churchill-red:hover {
            background-color: rgba(199, 32, 61, 0.25);
        }

        a.tile.library-green:hover {
            background-color: rgba(178, 207, 27, 0.25);
        }

        a.tile.nhs-blue:hover {
            background-color: rgba(24, 85, 165, 0.25);
        }

        a.tile.churchill-gray:hover {
            background-color: rgba(80, 80, 80, 0.25);
        }

        a.tile.library-blue:hover {
            background-color: rgba(71, 131, 165, 0.25);
        }

        a.tile.nhs-gold:hover {
            background-color: rgba(184, 173, 65, 0.25);
        }

        a.tile:hover > .content {
            -moz-transform: translateY(0);
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }

        a.tile:hover > .content > .shown {
            -moz-transform: translateY(0);
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }

        a.tile:hover > .content > .hidden {
            opacity: 1;
        }

    @media screen and (max-width: 736px) {

        a.tile {
            flex-basis: calc(50% - 0.75em);
        }

    }

    @media screen and (max-width: 400px) {

        a.tile {
            flex-basis: 100%;
        }

    }

/* Cover Flow */

.coverFlow {
	display: flex;
	align-items: center;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding: 1em 25%;
	margin: -1em;
}

.coverFlow::-webkit-scrollbar {
	display: none;
}

	.coverFlow > .cover {
        min-width: 100%;
        max-width: 100%;
		display: flex;
		justify-content: center;
		scroll-snap-align: center;
		perspective: 1000px;
		view-timeline-name: --coverTimeline;
		view-timeline-axis: inline;
		animation: adjust-z-index linear both;
		animation-timeline: --coverTimeline;
	}

		.coverFlow > .cover > * {
			width: 100%;
			scale: 0.75;
			animation: rotate-cover linear both;
			animation-timeline: --coverTimeline;
		}

@keyframes adjust-z-index {
	0% { z-index: 1; }
	50% { z-index: 2; }
	100% { z-index: 1; }
}

@keyframes rotate-cover {
	0% { transform: translateX(-100%) rotateY(-45deg); }
	35% { transform: rotateY(-45deg); }
	50% { transform: scale(1.25); }
	65% { transform: rotateY(45deg); }
	100% { transform: translateX(100%) rotateY(45deg); }
}

/* Carousel */

.carousel {
	display: flex;
	overflow: hidden;
}

.carousel::-webkit-scrollbar {
	display: none;
}

	.carouselGroup {
		position: relative;
		display: flex;
		flex-shrink: 0;
		animation: slide-left 30s linear infinite;
	}

		.carouselGroup > * {
			position: absolute;
			margin-right: 1em;
			width: 50%;
		}

@keyframes slide-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* Panels */

.panels {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
}

	.panelColumn {
		display: flex;
		flex-direction: column;
		row-gap: 1.5em;
		width: calc(50% - 0.75em);
	}

		.panelColumn > :last-child {
            flex-grow: 1;
        }

		.panel  {
			padding: 1em;
			background: #f6f6f6;
			border: solid 1px #c9c9c9;
		}
        
		.panel.account {
			display: flex;
			justify-content: space-around;
		}

			.panel.account > * {
				display: flex;
				align-items: center;
				column-gap: 0.5em;
				border-bottom: none;
			}

			.subheading {
				font-weight: 700;
				text-align: center;
				text-decoration: underline;
				margin-bottom: 0.2em;
			}

			.Mathematics,
			.LanguageArts,
			.Science,
			.SocialStudies,
			.ForeignLanguage {
				text-align: center;
				padding: 1em;
				margin-bottom: 0;
			}

				.Mathematics > span,
				.LanguageArts > span,
				.Science > span,
				.SocialStudies > span,
				.ForeignLanguage > span {
					font-weight: 700;
				}
						
				.Mathematics {
					background: #d8dfea;
					border: solid 1px #1855a5;
				}

					.Mathematics > span {
						color: #1855a5;
					}

				.LanguageArts {
					background: #eddadc;
					border: solid 1px #c7203d;
				}

					.LanguageArts > span {
						color: #c7203d;
					}

				.Science {
					background: #edf1dd;
					border: solid 1px #b2cf1b;
				}

					.Science > span {
						color: #b2cf1b;
					}

				.SocialStudies {
					background: #edecde;
					border: solid 1px #b8ad41;
				}

					.SocialStudies > span {
						color: #b8ad41;
					}

				.ForeignLanguage {
					background: #dfe5ea;
					border: solid 1px #4783a5;
				}

					.ForeignLanguage > span {
						color: #4783a5;
					}

			#bestGrades {
				text-align: center;
				margin-inline: auto;
				width: 75%;
			}

				#bestGrades > span {
					font-weight: 700;
					white-space: nowrap;
					padding-inline: 0.1em;
					margin-right: 0.5em;
				}

/* Calendar Display */

.calendarDisplay {
	padding: 1em;
	text-align: center;
	margin-bottom: 0.5em;
}

	.calendarDisplay.tutors {
		background: #eddadc;
		border: solid 1px #c7203d;
	}

	.calendarDisplay.pupils {
		background: #edf1dd;
		border: solid 1px #b2cf1b;
	}

	.month {
		font-size: 1.2em;
		font-weight: 700;
	}

	.year {
		font-weight: 700;
		margin-bottom: 1em;
	}

		.calendarDisplay.tutors .year {
			color: #c7203d;
		}
		
		.calendarDisplay.pupils .year {
			color: #b2cf1b;
		}

	.weekdays, .dates {
		display: flex;
		flex-wrap: wrap;
	}

		.weekdays {
			padding-block: 0.3em;
			margin-bottom: 0.5em;
			border-radius: 0;
			border-block: solid 1px;
		}

			.calendarDisplay.tutors .weekdays {
				border-block-color: #c7203d;
			}

			.calendarDisplay.pupils .weekdays {
				border-block-color: #b2cf1b;
			}

		.weekdays > *, .dates > * {
			flex-basis: 14.2857%;
		}

		.dates > button {
			border: none;
			padding: 0;
			line-height: 1.75em;
			font-weight: 700;
    		font-size: inherit;
			letter-spacing: normal;
		}

		.dates > button:not(:disabled):hover {
			color: #ffffff;
		}

			.calendarDisplay.tutors .dates > button:not(:disabled):hover {
				background-color: #c7203d;
			}

			.calendarDisplay.pupils .dates > button:not(:disabled):hover {
				background-color: #b2cf1b;
			}

/* Scheduling Portal */

.schedulingPortal {
	display: flex;
	column-gap: 2em;
}

	.slide {
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: flex;
		flex-direction: column;
		row-gap: 1em;
		align-items: center;
		justify-content: center;
		min-width: 100%;
	}

		.schedulingPortal.tutors button:not(.primary):hover {
			border-color: #c7203d;
			color: #c7203d;
		}

			.schedulingPortal.tutors button.primary:hover {
				background-color: #c7203d;
			}

		.schedulingPortal.pupils button:not(.primary):hover {
			border-color: #b2cf1b;
			color: #b2cf1b;
		}

			.schedulingPortal.pupils button.primary:hover {
				background-color: #b2cf1b;
			}

		.slideHeader {
			font-size: 1.1em;
			font-weight: 700;
		}

		.slideMain {
			display: flex;
			flex-direction: column;
			row-gap: 0.5em;
			width: calc(100% - 4em);
			overflow-y: scroll;
			flex-grow: 1;
			border-radius: 0;
			padding: 0.5em 2em;
			border-block: solid 1px;
		}

			.slideMain::-webkit-scrollbar {
				display: none;
			}

			.schedulingPortal.tutors .slideMain {
				border-block-color: #c7203d;
			}

			.schedulingPortal.pupils .slideMain {
				border-block-color: #b2cf1b;
			}

			.sessions {
				display: flex;
				align-items: center;
				column-gap: 1em;
				padding: 1em;
				text-align: left;
			}

				.schedulingPortal.tutors .sessions {
					background: #eddadc;
					border: solid 1px #c7203d;
				}

				.schedulingPortal.pupils .sessions {
					background: #edf1dd;
					border: solid 1px #b2cf1b;
				}

					.sessions img {
						width: 100px;
						height: auto;
					}

					.schedulingPortal.tutors .sessions label:first-of-type {
						color: #c7203d;
					}
					.schedulingPortal.pupils .sessions label:first-of-type {
						color: #b2cf1b;
					}

					.sessions input[type="checkbox"] {
						display: none;
					}

						.sessions input[type="checkbox"] + label {
							-moz-transition: -moz-transform 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
							-webkit-transition: -webkit-transform 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
							-ms-transition: -ms-transform 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
							transition: transform 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
							width: 20%;
							padding-inline: 5px;
							border: solid 2px #585858;
							text-align: center;
						}

							.sessions input[type="checkbox"] + label:before {
								content: "Select";
							}

							.sessions input[type="checkbox"] + label:hover {
								-moz-transform: scale(1.1);
								-webkit-transform: scale(1.1);
								-ms-transform: scale(1.1);
								transform: scale(1.1);
								color: #ffffff;
							}

								.schedulingPortal.tutors .sessions input[type="checkbox"] + label:hover {
									background-color: #c7203d;
									border-color: #c7203d;
								}

								.schedulingPortal.pupils .sessions input[type="checkbox"] + label:hover {
									background-color: #b2cf1b;
									border-color: #b2cf1b;
								}

						.sessions input[type="checkbox"]:checked + label {
							color: #ffffff;
						}

							.schedulingPortal.tutors .sessions input[type="checkbox"]:checked + label {
								background-color: #c7203d;
								border-color: #c7203d;
							}

							.schedulingPortal.pupils .sessions input[type="checkbox"]:checked + label {
								background-color: #b2cf1b;
								border-color: #b2cf1b;
							}

							.sessions input[type="checkbox"]:checked + label:before {
								font-family: "Font Awesome 5 Free";
								line-height: 1em;
								content: "\f00c";
							}

					.sessions hr {
						margin-block: 0.5em;
					}

						.schedulingPortal.tutors .sessions hr {
							border-color: #c7203d;
						}

						.schedulingPortal.pupils .sessions hr {
							border-color: #b2cf1b;
						}

/* Scheduled Sessions Portal */