:root {
	--flightpath-green: #618165;
	--flightpath-green-dark: #506b54;
	--flightpath-green-pastel: #b8d1bc;
	--flightpath-green-light: #d8e8da;
	--flightpath-dark: #493c3c;
	--flightpath-yellow: #FFD100;
	--flightpath-mauve: #8D8089;
	--flightpath-mauve-dark: #756570;
	--flightpath-white: #ffffff;
	--flightpath-red: #8B0000;
	--theme-highlight: #fff;
}
.fc-daygrid-event {
  white-space: normal !important;
  align-items: normal !important;
}

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.deskBooking {
  padding:4px;
}

.deskBooking .profilePic {
     width:30px;
    height:30px;
}

.bookedDesk {
  cursor:pointer;
}
.bookedDesk:hover {
  border:dashed 1px var(--flightpath-red);
}

.emptyDesk {
  border:1px dashed #ccc;
  color:#ccc;
  font-style:italic;
}

.emptyDeskBooked {
  color:#ccc;
  font-style:italic;
}
.emptyDesk:hover {
  background-color:#eee;
  cursor:pointer;
  color:#333;
}
.emptyDesk:hover > .bookNowHover {
  display:inline-block;
}

.bookNowHover {
  display:none;
}

.roomBooking {
  background-color:#221551;
  color:#fff;
  padding:5px;
  -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.roomBooking2 {
  background-color:#eee;
  color:var(--flightpath-dark);
  padding:5px;
  font-size:0.8em;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.roomBooking2 > .profilePic {
  width:25px;
  height:25px;
  margin-right:5px;
}

.pie {
  --p:20;
  --b:6px;
  --c:darkred;
  --w:50px;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  margin-top:2px;
  place-content: center;
  font-size: 12px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie:before {
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation: p 1s .5s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p{
  from{--p:0}
}

       

html {
  min-height:100%;
  height:100%;
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
	position: relative;
  font-family: 'Nunito', sans-serif;
  background:none!important;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size:3.3em;
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size:2.4em;
}


h6 {
  font-family: 'Playfair Display', serif;
  font-size:1em;
}

.pill {
  padding:2px 5px;
  -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
  font-size:0.7em;
  font-weight:bold;
  color:#fff;
}
.redPill {
  background-color:#f00;
}
.bluePill {
  background-color:#73b2c7;
}

.pagination {
    margin-top:10px;
}
.pagination li a {
    color:var(--flightpath-green);
}
.pagination .page-item.active .page-link {
    background-color:var(--flightpath-green-dark);
    border-color:var(--flightpath-green-dark);
}


.calendar a {
  color:var(--flightpath-dark);
  text-decoration:none;
}
.clear {
  clear:both;
}
.satire {
  font-style:italic;
  color:var(--flightpath-mauve);
  font-size:0.9em;
}
.f-icon {
  font-size:1.2em;
}
.darkText {
  color:var(--flightpath-dark);
}
.green {
  color:var(--flightpath-green);
}
.red {
  color:var(--flightpath-red);
}
.mauve {
  color:var(--flightpath-mauve);
}

.topbar {
  height:5vh;
  margin-top:3vh;
  position:relative;
}
.topbar_left {
  position:relative;
  float:left;
  text-align:left;
  width:60%;
  margin-left:15px;
  margin-right:15px;
  font-size:0.8em;
}
.topbar_left a {
  color:inherit;
  text-decoration:none;
}
.topbar_left a:hover {
  color:inherit;
  text-decoration:underline;
}

.topbar_right {
  position:relative;
  float:right;
  text-align:right;
  width:30%;
  margin-right:15px;
}

.mainCard {
  background-color:#fff;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 2px 3px 15px -1px rgba(0,0,0,0.55); 
  box-shadow: 2px 3px 15px -1px rgba(0,0,0,0.55);
  padding:10px;
  height:88vh;
}


.variableCard {
  background-color:#fff;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 2px 3px 15px -1px rgba(0,0,0,0.55); 
  box-shadow: 2px 3px 15px -1px rgba(0,0,0,0.55);
  padding:10px;
  height:auto;
  margin-bottom:20px;
}

.mainCardImage {
  overflow:hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-size:cover;
  height:100%;
  background-repeat:none;
}

.headerImage {
  overflow:hidden;
  height:150px;
  background-size:cover;
  background-repeat:none;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom:10px;
}

.linkBox {
  position:relative;
  float:left;
  overflow:hidden;
  height:280px;
  width:200px;
  background-size:cover;
  background-repeat:none;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  margin-bottom:20px;
  background-position:center;
  margin-right:20px;
  cursor:pointer;
}

.doubleLinkBox {
  position:relative;
  float:left;
  overflow:hidden;
  height:280px;
  width:430px;
  background-size:cover;
  background-repeat:none;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  margin-bottom:20px;
  background-position:center;
  margin-right:20px;
  cursor:pointer;
  padding:20px;
}

.linkBox h5 {
  background-color:#000;
  color:var(--flightpath-yellow);
  position:absolute;
  bottom:20px;
  left:5px;
  padding:5px 10px;
  font-weight:bold;
}


.btn {
  -webkit-border-radius: 3px!important;
  -moz-border-radius: 3px!important;
  border-radius: 3px!important;
  margin: 2px;
  font-size:inherit!important;
  font-weight:600;
  cursor:pointer;
}

.btn-block {
  display:block;
}

.btn-slim {
  padding:2px 10px;
}

.btn-green {
	background-color: var(--flightpath-green);
	color: var(--flightpath-white)!important;
	border: none;
}

.btn-green:hover {
	background-color: var(--flightpath-green-dark);
	color: var(--flightpath-white)!important;
	border-color:#fff;;
}

.btn-dark {
	background-color: #000;
	color: #ffd100;
	border: none;
}

.btn-dark:hover {
	background-color: #ffd100;
	color: #000;
	border-color:#ffd100;;
}

.btn-green-border {
	border:1px solid var(--flightpath-green);
	color: var(--flightpath-green);
}

.btn-grey-border {
	border:1px solid #ccc;
	color: #ccc;
}

.btn-grey-border:hover {
	border-color:#ccc;
  background-color:#ccc;
	color: #000;
}

.btn-yellow-border {
	border:1px solid #FFD100;
	color: #000;
}

.btn-yellow-border:hover {
	border-color:#FFD100;
  background-color:#FFD100;
	color: #000;
}

.btn-white-border {
	border:2px solid #fff;
	color: #fff;
  text-shadow: 2px 3px 2px #CECCCC;
}

.btn-green-border:hover {
	background-color: var(--flightpath-green-dark)!important;
	color: var(--flightpath-white)!important;
	border-color:#fff;
}


.btn-mauve {
	background-color: var(--flightpath-mauve);
	color: var(--flightpath-white)!important;
	border: none;
}

.btn-mauve:hover {
	background-color: var(--flightpath-mauve-dark);
	color: var(--flightpath-white)!important;
	border-color:#fff;
}

.btn-mauve-border {
	border:1px solid var(--flightpath-mauve);
	color: var(--flightpath-mauve);
}

.btn-mauve-border:hover {
	background-color: var(--flightpath-mauve-dark)!important;
	color: var(--flightpath-white)!important;
	border-color:#fff;
}
.btn-blue-border {
	border:1px solid #221551;
	color: #fff;
}

.btn-blue-border:hover {
	background-color: #221551!important;
	color: var(--flightpath-white)!important;
	border-color:#fff;
}

.btn-red-border {
	border:1px solid var(--flightpath-red);
	color: var(--flightpath-red);
}

.btn-red-border:hover {
	background-color: var(--flightpath-red)!important;
	color: var(--flightpath-white)!important;
	border-color:#fff;
}


.btn-bold {
  font-weight:bold !important;
  border:3px solid !important;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  border-radius: 10px !important;
  font-size:1.2em !important;
}

.colourBox {
  position:relative;
  width:170px;
  height:170px;
  margin:0 auto;
}

.colourBox:hover {
  filter: brightness(110%);
}

.colourBox h6 {
  position:absolute;
  bottom:5px;
  left:5px;
}

.colourBox1 {
  background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
}

.colourBox2 {
  background-image: url("/images/backgrounds/summer.jpeg"); background-size:cover;
}

.colourBox3 {
background-color: #2f4353;
background-image: linear-gradient(315deg, #2f4353 0%, #d2ccc4 74%);
}

.colourBox4 {
  background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);
}

.colourBox5 {
  background-image: linear-gradient(to right, #DECBA4, #3E5151);
}

.colourBox6 {
  background-image: linear-gradient(to right, #434343 0%, black 100%);;
  color:#fff;
}

.colourBox7 {
background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

}

.colourBox8 {
background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
}

.colourBox9 {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  color:#333;
}


.colourBoxLink {
  color:#000;
}
.colourBoxLink:hover {
  color:#000;
}

#cogMenu {
  display:none;
  height:5vh;
  margin-top:3vh;
  text-align:right;
  color: var(--theme-highlight);
  cursor:pointer;
}

#cogMenu a {
  color: var(--theme-highlight);
  text-decoration:none;
  cursor:pointer;
}

.longContent {
  max-height:350px;
  overflow-y:scroll;
}

.doubleDivider {
  border-top:1px solid var(--flightpath-dark);
  height:3px;
  border-bottom:1px solid var(--flightpath-dark);
}

.noRecord {
  font-style:italic;
  color:#ccc;
}


.rapidTable {
	width: 100%;
	border-top: 1px dashed var(--flightpath-green-pastel);
	border-bottom: 1px dashed var(--flightpath-green-pastel);
	background-color: #fff;
  color:var(--flightpath-dark);
  white-space: wrap;
  text-align:center;
}

.rapidTable th {
	font-weight: bold;
	padding: 2px 6px;
  color:var(--flightpath-dark);
	border-right: 1px dashed var(--flightpath-green-pastel);
	border-left: 1px dashed var(--flightpath-green-pastel);
}

.rapidTable tr:nth-child(odd) {
	background-color: var(--flightpath-green-light);
	color: var(--flightpath-dark);
}

.rapidTable tr:first-child {
	background-color:var(--flightpath-green-pastel);
	border-bottom: 2px solid var(--flightpath-green);
  color:var(--flightpath-dark);
}

.rapidTable td {
	padding: 2px 6px;
	border-right: 1px dashed var(--flightpath-green-pastel);
	border-left: 1px dashed var(--flightpath-green-pastel);
	word-break: break-word;
	vertical-align: top;
}

.userButton {
  position:relative;
  float:left;
  -webkit-border-radius: 3px!important;
  -moz-border-radius: 3px!important;
  border-radius: 3px!important;
  margin: 2px;
  font-size:inherit!important;
  font-weight:600;
  cursor:pointer;
  background-color:var(--flightpath-green);
  color:#fff;
  text-decoration:none;
  padding:10px 20px;
  margin-right:10px;
}
.userButton:hover {
  background-color:var(--flightpath-green-dark);
  color:#fff;

}

.profilePic {
  width:50px;
  height:50px;
    -webkit-border-radius: 50%!important;
  -moz-border-radius: 50%!important;
  border-radius: 50%!important;
  overflow:hidden;
  margin-right:20px;
}

label {
  font-size:0.8em!important;
  color:var(--flightpath-green);
}

.formError {
  background-color:var(--flightpath-red);
  color:#fff;
  padding:2px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align:center;
  display:block;
  margin-top:5px;
}

.errorBar {
  text-align:center;
  display:block;
  background-color:var(--flightpath-red);
  color:#fff;
  z-index:90;
  padding:15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.successBar {
  text-align:center;
  display:block;
  background-color:var(--flightpath-green);
  color:#fff;
  z-index:90;
  padding:15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}


.subData {
  display:none;
  background-color:var(--flightpath-green-light);
  padding:10px;
  margin-top:10px;
}

.lessonRecord {
  position:relative;
  padding:5px 5px 5px 20px;
  color:var(--flightpath-green);
  font-weight:bold;
  border-bottom:dashed 1px var(--flightpath-green-pastel);
}
.lessonRecord:hover {
  background-color:#eee;
}
.lessonScore {
  position:absolute;
  top:5px;
  right:20px;
  color:var(--flightpath-green);
  font-weight:bold;
}

.searchResult {
  position:relative;
  padding:5px;
  border-bottom:1px solid var(--flightpath-green);
}
.searchLink {
  text-decoration:none;
}
.searchResultLeft {
  font-weight:bold;
  font-size:1.1em;
  font-family: 'Playfair Display', serif;
  color:var(--flightpath-dark);
}
.searchResultRight {
  color:var(--flightpath-green);
  font-size:0.8em;
}

.mobileH5 {
  margin-top:150px;
}

.mobileImageTitle {
  display:block;
}
@media only screen and (max-width: 602px) {

.mobileImageTitle {
  display:none;
}
.mobileH5 {
  margin-top:30px;
}
  .mobileText {
    font-size:2em;
  }

}