/*~~~~~~~  Typography  ~~~~~~~ */
@import url("https://fonts.googleapis.com/css2?family=Gabriela&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");
body {
  font-family: Gabriela;
  font-weight: 400;
  font-size: 1.6rem;
  /* For accessibility - The WCAG criteria states that line-height should be at least 1.5 */
  /* The WCAG criteria is meant for "body" text, not headings. */
  /* So we can calculate the proper line height for all elements : */
  /* Instead of calculating the line height by multiplying the font-size with a number like 1.5, */
  /* this alternative uses the font-size as a base, and adds a fixed amount of space to each line. */
  line-height: calc(1em + 1.3rem);
  color: #2D170F;
}

.subTitle {
  text-align: center;
  line-height: calc(1em + 1rem);
  padding: 0 1rem;
  font-size: 2rem;
}
@media only screen and (min-width: 50em) {
  .subTitle {
    padding: 0 5rem;
    line-height: calc(1em + 2rem);
  }
}
.subTitle #handlText {
  font-weight: 300;
  font-size: 2rem;
}
@media only screen and (min-width: 50em) {
  .subTitle #handlText {
    font-size: 2.3rem;
  }
}
.subTitle #handlLight {
  font-weight: 300;
}

.boldEntry {
  font-weight: 700;
}

/*===== END  Typography  ===== */
/*~~~~~~~  Reset  ~~~~~~~ */
/*  Josh's Custom CSS Reset  */
/*  https://www.joshwcomeau.com/css/custom-css-reset */
*, *::before, *::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

/*  The height of an element is calculated based on its CHILDREN.   */
/*  So setting height: 100% on an element will cause it to be 100% of the child's height.  */
/*  This setting causes the height to be calculated from the parent  */
html, body {
  height: 100%;
}

body {
  /* MacOS browsers like Chrome and Safari still use subpixel antialiasing by default. */
  /* We need to explicitly turn it off. */
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  /*display: block*/      /* Will remove extra space from under an image - Use flexbox on its parent instead */
  /* Keep large images from overflowing, if theyre placed in a container that isnt wide enough to contain them. */
  max-width: 100%;
}

/* by default, buttons and inputs don't inherit typographical styles from their parents. */
/* Instead, they have their own weird styles. */
/* Form inputs shouldn't have their own typographical styles! */
input, button, textarea, select {
  font: inherit;
}

/* The overflow-wrap property lets us tweak the line-wrapping algorithm, */
/* and give it permission to use hard wraps when no soft wrap opportunties can be found */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*===== END  Reset  ===== */
html {
  /* Since browser default font-size is 16px */
  /* Set it to 10px (on a desktop) to make converting px to rem easier. */
  /* Use a percentage so that if a user changes the font size */
  /* on their browser or zooms the font sizes,  */
  /* paddings and margins adjust accordingly. */
  /* This defines what 1rem is */
  /* For mobile 1st design we will use 8px for the mobile device */
  font-size: 50%;
}
@media only screen and (min-width: 50em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (min-width: 59.375em) {
  html {
    font-size: 62.5%;
  }
}
@media only screen and (min-width: 75em) {
  html {
    font-size: 75%;
  }
}

body {
  /* Inheritable properties */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* Set up page for sticky footer */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* Mobile devices do not honour the 'vh' property properly. */
  /* So setting the min-height to less than 100 for mobile devices. */
  min-height: 92vh;
  /* Non-inheritable properties */
  padding: 0;
}
@media only screen and (min-width: 59.375em) {
  body {
    min-height: 100vh;
  }
}
@media only screen and (min-width: 50em) {
  body {
    padding: 3rem;
  }
}

/*~~~~~~~  Utilities  ~~~~~~~ */
.centreText {
  text-align: center;
}

.centreBlock {
  margin-left: auto;
  margin-right: auto;
}

.marginBottomSmall {
  margin-bottom: 1.5rem;
}
.marginBottomMedium {
  /* Mobile first - so smaller values first */
  margin-bottom: 3rem;
}
@media only screen and (min-width: 50em) {
  .marginBottomMedium {
    margin-bottom: 4rem;
  }
}
.marginBottomBig {
  margin-bottom: 5rem;
}
@media only screen and (min-width: 50em) {
  .marginBottomBig {
    margin-bottom: 8rem;
  }
}

.marginTopSmall {
  margin-top: 1.5rem;
}
.marginTopMedium {
  margin-top: 4rem;
}
.marginTopBig {
  margin-top: 8rem;
}
.marginTopHuge {
  margin-top: 10rem;
}

.invisible {
  display: none;
}

.nonMobile {
  display: none;
}
@media only screen and (min-width: 50em) {
  .nonMobile {
    display: initial;
  }
}

@media only screen and (min-width: 50em) {
  .mobileOnly {
    display: none;
  }
}

@media only screen and (min-width: 28.125em) {
  .smallPhoneOnly {
    display: none;
  }
}

/*===== END  Utilities  ===== */
/*~~~~~~~  Header  ~~~~~~~ */
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
}
@media only screen and (min-width: 50em) {
  header {
    margin-bottom: 3rem;
  }
}

#navWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 50em) {
  #navWrapper {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-left: 1rem;
  }
}

#titleBar h1 {
  margin-right: auto;
  margin-left: auto;
  font-size: 2.7rem;
}
@media only screen and (min-width: 37.5em) {
  #titleBar h1 {
    font-size: 4rem;
  }
}
@media only screen and (min-width: 50em) {
  #titleBar h1 {
    padding-right: 0;
    padding-left: 7rem;
    margin-top: 1rem;
  }
}
#titleBar a:not(:last-child) {
  padding-right: 2rem;
}
@media only screen and (min-width: 50em) {
  #titleBar {
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 72.75em) {
  #titleBar {
    padding-top: 1.2rem;
  }
}
@media only screen and (min-width: 75em) {
  #titleBar {
    padding-top: 0.7rem;
  }
}
@media only screen and (min-width: 93.75em) {
  #titleBar {
    padding-top: 1.2rem;
  }
}

#logo {
  width: 9rem;
  margin-left: 1rem;
  margin-top: 1rem;
}
@media only screen and (min-width: 25em) {
  #logo {
    width: 10rem;
  }
}
@media only screen and (min-width: 37.5em) {
  #logo {
    width: 11rem;
  }
}
@media only screen and (min-width: 50em) {
  #logo {
    width: 12rem;
  }
}
@media only screen and (min-width: 59.375em) {
  #logo {
    width: 13rem;
  }
}
#logo img {
  width: 85%;
}
@media only screen and (min-width: 50em) {
  #logo img {
    width: 100%;
  }
}

.ui-icon {
  -webkit-transform: scale(2);
          transform: scale(2);
}

.invisible {
  display: none;
}

@media only screen and (min-width: 50em) {
  #siteNav {
    width: 100%;
  }
}

.roleIcon {
  background-color: #0380CA;
}

/*===== END  Header  ===== */
/*~~~~~~~  Navbar  ~~~~~~~ */
#navigationNav {
  position: fixed;
  top: 3rem;
  left: 0;
  z-index: 20;
  /*Hide the navigation initially */
  opacity: 0;
  /*It is not enough to have an opacity of zero */
  /*The elements are still there and are clickable, so we need to set the width to zero as well */
  width: 0;
  /*the menu elements are hidden but on the left edge of the screen & clickable
   * Need to move the menu off screen completely, so none of the menus are clickable */
  -webkit-transform: translateX(-300px);
          transform: translateX(-300px);
  -webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media only screen and (min-width: 50em) {
  #navigationNav {
    background-color: #1A628D;
    width: 100%;
    height: auto;
    opacity: 1;
    position: relative;
    top: 0;
    /*	In the mobile version the menu is initially push off the screen
     * This is not done on the desktop version - so have to translate to position 0 */
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

#naviToggle {
  display: none;
}

.navigationButton {
  display: inline;
  background-color: #F2F2F2;
  /*Make this slightly larger than the navigationBackground, to be sure to cover it */
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  -webkit-box-shadow: 0 1rem 3rem rgba(34, 34, 34, 0.1);
          box-shadow: 0 1rem 3rem rgba(34, 34, 34, 0.1);
  text-align: center;
  cursor: pointer;
}
@media only screen and (min-width: 50em) {
  .navigationButton {
    display: none;
  }
}
.navigationBackground {
  /*Coloured background for the navigation */
  /*It will start as a small circle behind the white circle containing the "hamburger" icon */
  /*It will expand to fill the screen when the "hamburger" icon is clicked */
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  /*Stays in the same position even if we scroll down the page */
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background-image: radial-gradient(#1A628D, #0d3147);
  z-index: 10;
  /*Custom transition function, uses a cubic bezier curve for ease-in and ease-out */
  /*See easings.net & cubic-bezier.com */
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
@media only screen and (min-width: 50em) {
  .navigationBackground {
    display: none;
  }
}
.navigationList {
  list-style: none;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 3rem;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  flex-direction: column;
}
@media only screen and (min-width: 50em) {
  .navigationList {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 0;
  }
}
.navigationLink {
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}
.navigationLink:link, .navigationLink:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #50301D;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #EDFFEC 50%);
  /*Increasing the background shoves the RHS of the linear gradient off the element, so it is invisible */
  background-size: 235%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media only screen and (min-width: 50em) {
  .navigationLink:link, .navigationLink:visited {
    font-size: 1.8rem;
    -webkit-transform: none;
            transform: none;
  }
}
.navigationLink:hover, .navigationLink:active {
  background-position: 100%;
  color: #1A628D;
  -webkit-transform: translateX(1rem);
          transform: translateX(1rem);
}
.navigationItem {
  margin: 1rem;
  /*Hide the navigation list item initially */
  width: 0;
}
@media only screen and (min-width: 50em) {
  .navigationItem {
    width: initial;
  }
}
.navigationCheckbox:checked ~ .navigationBackground {
  -webkit-transform: scale(80);
          transform: scale(80);
}
.navigationCheckbox:checked ~ #navigationNav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.navigationCheckbox:checked ~ #navigationNav, .navigationCheckbox:checked ~ #accountLinks {
  opacity: 1;
  width: 100%;
}
.navigationCheckbox:checked ~ #navigationNav .navigationItem, .navigationCheckbox:checked ~ #accountLinks .navigationLink {
  width: 100%;
}
.navigationCheckbox:checked ~ #accountLinks .navigationLink, .navigationCheckbox:checked ~ #navigationNav .navigationLink {
  -webkit-transform: none;
          transform: none;
}
.navigationIcon {
  display: inline-block;
  position: relative;
  margin-top: 3.5rem;
  color: #F2F2F2;
  /*A bar before the span, the span is a bar, a bar after the span */
  /*Each bar is 3rem x 2px and is coloured dark grey */
  /*For ::before and ::after to show they need content and display properties to be set */
}
.navigationIcon, .navigationIcon::before, .navigationIcon::after {
  width: 3rem;
  /*Always stays the same height, no matter what the base font size is */
  height: 2px;
  background-color: #333333;
  display: inline-block;
}
.navigationIcon::before, .navigationIcon::after {
  content: "";
  position: absolute;
  left: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navigationIcon::before {
  top: -0.8rem;
  /*By default elements will rotate around the centre. */
  /*If you want to rotate around the edge you can set the transform-origin */
  /*transform-origin: right */
}
.navigationIcon::after {
  top: 0.8rem;
  /*transform-origin: left */
}
@media only screen and (min-width: 50em) {
  .navigationIcon {
    display: none;
  }
}
.navigationButton:hover .navigationIcon::before {
  top: -1rem;
}
.navigationButton:hover .navigationIcon::after {
  top: 1rem;
}
.navigationCheckbox:checked + .navigationButton > .navigationIcon {
  /*When the button is clicked change the "hamburger" to a cross */
  /*When the checkbox is selected - get its adjacent sibling and */
  /*select the child element of the adjacent sibling */
  /*Step 1 make the middle bar invisible (this is the span in the navigationIcon) */
  background-color: transparent;
}
.navigationCheckbox:checked + .navigationButton > .navigationIcon::before {
  /*Step 2 make the top bar rotate (this is the navigationIcon::before) */
  /*Rotate 180 degrees - 45 degrees : Takes longer, so looks better */
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 0;
}
.navigationCheckbox:checked + .navigationButton > .navigationIcon::after {
  /*Step 3 make the bottom bar rotate (this is the navigationIcon::after) */
  /*Rotate 180 degrees - 45 degrees : Takes longer, so looks better */
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  top: 0;
}
.navigationActive {
  background-color: #61E786;
  color: #50301D;
}

.accountLink {
  z-index: 20;
}
@media only screen and (min-width: 50em) {
  .accountLink:link, .accountLink:visited {
    display: inline;
    font-size: 1.6rem;
    font-weight: 400;
    padding: 0;
    color: #50301D;
    text-decoration: none;
    text-transform: capitalize;
    background: none;
  }
  .accountLink:hover, .accountLink:active {
    background-position: initial;
    color: #1A628D;
    -webkit-transform: none;
            transform: none;
  }
}

#clientDropdown {
  background-color: #1A628D;
  color: #EDFFEC;
  font-size: 1.4rem;
  border: none;
  text-transform: uppercase;
}
#clientDropdown option {
  background-color: #1A628D;
}
@media only screen and (min-width: 50em) {
  #clientDropdown {
    font-size: 1.8rem;
  }
}
#clientDropdown.navigationActive {
  background-color: #61E786;
}

#accountLinks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 1rem;
  z-index: 20;
  margin-right: 42px;
}
@media only screen and (min-width: 27.5em) {
  #accountLinks {
    margin-right: 0;
  }
}
#accountLinks a:first-child {
  padding-left: 1rem;
  padding-right: 0;
}
@media only screen and (min-width: 50em) {
  #accountLinks a:first-child {
    padding-right: 1rem;
  }
}
#accountLinks a:last-child {
  padding-left: 5px;
}
#accountLinks .accountText {
  display: none;
}
@media only screen and (min-width: 37.5em) {
  #accountLinks .accountText {
    display: initial;
  }
}
#accountLinks .navigationLink {
  -webkit-transform: none;
          transform: none;
  font-size: 2rem;
  background-size: 290%;
}
@media only screen and (min-width: 50em) {
  #accountLinks .navigationLink {
    font-size: unset;
  }
}

/*===== END  Navbar  ===== */
/*~~~~~~~  Footer  ~~~~~~~ */
footer {
  /*Sticky footer */
  margin-top: auto;
  background-color: #1A628D;
  color: #EDFFEC;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem 0;
  font-family: "Roboto Slab", "Helvetica Neue", sans-serif;
}

/*===== END  Footer  ===== */
/*~~~~~~~  Layout  ~~~~~~~ */
[id$="Container"], .container {
  /* Target all elements with an id that ends in 'Container' */
  /* Or any elements with the class of 'container' */
  margin-left: 1rem;
  margin-right: 1rem;
  /*Move the container closer to the header/logo section (mobile only) */
}
[id$="Container"] h1, .container h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}
[id$="Container"] h2, .container h2 {
  text-align: center;
}

#scoreContainer {
  margin-right: 2rem;
}

/*===== END  Layout  ===== */
/*~~~~~~~  Home Page  ~~~~~~~ */
.splash {
  padding: 1rem;
  margin: 5rem;
  /* To put a gradient on top of an image */
  /* Just specify both in the background-image separated by a comma */
  /*We can specify an angle for the gradient instead of 'to right' use '90deg', etc. */
  /* For the gradient we can specify in percentages at which point the gradient should be */
  /*We can have the first colour starting at 0% and the full second colour at 30% */
  /*If we also say at 30% we want it to be the first colour ... */
  /*This gives us two solid colours - first colour on LHS & second colour on RHS */
  /*Since we specified the angle to be 75 degrees the colours meet at a 75 degree angle */
  /*To make the RHS see through, just change second colour to transparent */
  background-image: linear-gradient(75deg, rgba(26, 98, 141, 0.9) 0%, rgba(3, 128, 202, 0.9) 43%, transparent 50%), url("../images/handl-small.f69e9b0a95b2.jpg");
  background-position: center center;
  background-size: cover;
  border-radius: 3px;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(45, 23, 15, 0.55);
          box-shadow: 0 1.5rem 4rem rgba(45, 23, 15, 0.55);
  height: 26rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  align-items: flex-start;
}
@media only screen and (min-width: 25em) {
  .splash {
    height: 40rem;
    padding: 3rem;
  }
}
@media only screen and (min-width: 37.5em) {
  .splash {
    height: 56rem;
    padding: 4rem;
  }
}
@media only screen and (min-width: 50em) {
  .splash {
    background-image: linear-gradient(75deg, rgba(26, 98, 141, 0.9) 0%, rgba(3, 128, 202, 0.9) 43%, transparent 50%), url("../images/handl-large.cd28ce311df5.jpg");
    padding: 5rem;
    height: 62rem;
  }
}
@media only screen and (min-width: 59.375em) {
  .splash {
    height: 78rem;
  }
}
@media only screen and (min-width: 75em) {
  .splash {
    height: 97rem;
  }
}
@media only screen and (min-width: 93.75em) {
  .splash {
    height: 129rem;
  }
}
.splashTitle {
  font-size: 2.5rem;
  margin-top: 1rem;
  color: #61E786;
}
@media only screen and (min-width: 25em) {
  .splashTitle {
    font-size: 3.2rem;
  }
}
@media only screen and (min-width: 37.5em) {
  .splashTitle {
    font-size: 4rem;
  }
}
@media only screen and (min-width: 93.75em) {
  .splashTitle {
    font-size: 4.4rem;
  }
}
.splashSubtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 2rem;
  /*Change the line-height to space out the text vertically */
  line-height: calc(1em + 2rem);
  margin-top: auto;
  color: #61E786;
}
@media only screen and (min-width: 25em) {
  .splashSubtitle {
    font-size: 2.3rem;
  }
}
@media only screen and (min-width: 37.5em) {
  .splashSubtitle {
    font-size: 2.6rem;
  }
}
@media only screen and (min-width: 93.75em) {
  .splashSubtitle {
    font-size: 3.2rem;
  }
}

.welcomeText {
  text-align: center;
  margin-bottom: 1rem;
}

/*===== END  Home Page  ===== */
/*~~~~~~~  Record Appraisal page  ~~~~~~~ */
.appraisalHeader div {
  font-size: 1.2rem;
}

.spreadOut {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-right: 2rem;
  margin-top: 0.8rem;
}

@media only screen and (min-width: 25em) {
  #recordAppraisalContainer .appraisalDateDate {
    margin-left: 8rem;
  }
}
@media only screen and (min-width: 25em) {
  #recordAppraisalContainer .appraisalDateCourse {
    margin-right: 8rem;
  }
}
#recordAppraisalForm select {
  min-width: 21rem;
}

/*===== END  Record Appraisal page  ===== */
/*~~~~~~~  Question page  ~~~~~~~ */
.question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.questionName {
  font-weight: 700;
  padding-bottom: 0.5rem;
}
@media only screen and (min-width: 93.75em) {
  .questionName {
    max-width: 45rem;
  }
}
.questionDetails {
  /*Stripe the questions for each topic */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-left: 1rem;
  -webkit-column-gap: 1.5rem;
          column-gap: 1.5rem;
}
.questionDetails:nth-child(even) {
  background-color: #d8ad94;
}
@media only screen and (min-width: 31.25em) {
  .questionDetails {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media only screen and (min-width: 93.75em) {
  .questionDetails {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.questionItem {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}
.questionScores {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-top: 1rem;
}
@media only screen and (min-width: 31.25em) {
  .questionScores {
    margin-top: 0;
  }
}
@media only screen and (min-width: 93.75em) {
  .questionScores {
    max-width: 45rem;
  }
}
.questionScoreLabel {
  display: inline-block;
  margin-top: 0.5rem;
}

.allRequired {
  text-align: center;
}

/*===== END  Question page  ===== */
/*~~~~~~~  Select Appraisal Page  ~~~~~~~ */
.chooseAppraisalRadio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.chooseAppraisalRadio .formRadioLabel {
  font-size: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.chooseAppraisalRadio .formRadioGroup {
  width: 90%;
}
.chooseAppraisalRadio .formRadioGroup:not(:last-child) {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 25em) {
  .chooseAppraisalRadio .formRadioGroup {
    width: 40rem;
  }
}

/*===== END  Select Appraisal Page  ===== */
/*~~~~~~~  Choose History Page  ~~~~~~~ */
.chooseHistoryRadio {
  margin-left: auto;
  margin-right: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.chooseHistoryRadio .formRadioGroup {
  margin-bottom: 1rem;
}

/*===== END  Choose History Page  ===== */
/*~~~~~~~  Clinical Summary page  ~~~~~~~ */
.clinicalSummaryGroup div:last-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.clinicalSummaryGroup div:last-child label {
  margin-left: 0 !important;
}

/*===== END  Clinical Summary page  ===== */
/*~~~~~~~  Select Client Page  ~~~~~~~ */
@media only screen and (min-width: 20em) and (max-width: 25em) {
  #searchBoxProvider {
    max-width: 20rem;
  }
}

@media only screen and (min-width: 20em) and (max-width: 25em) {
  form:has(.searchProvider) + form thead tr th {
    font-size: 80%;
  }
}
@media only screen and (min-width: 20em) and (max-width: 25em) {
  form:has(.searchProvider) + form td {
    font-size: 1.3rem;
  }
}

/*===== END  Select Client Page  ===== */
/*~~~~~~~  Reset Password page ~~~~~~~ */
.passwordList {
  margin: 1rem auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

#resetPasswordForm label {
  width: 10rem;
}

/*===== END  Reset Password page ===== */
/*~~~~~~~  New Course page ~~~~~~~ */
.courseDetail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 1rem;
}
@media only screen and (min-width: 37.5em) {
  .courseDetail {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}

/*===== END  New Course page ===== */
/*~~~~~~~  Form  ~~~~~~~ */
form {
  margin: 2rem 0;
}

.formGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 2rem;
}
.formGroup:not(:last-child) {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 25em) {
  .formGroup {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.formGroup.nameLabel:last-child {
  margin-bottom: 2rem;
}
.formGroup.nameLabel.dobWrapper {
  margin-left: 0;
}
@media only screen and (min-width: 25em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: auto;
  }
}
@media only screen and (min-width: 59.375em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 4rem !important;
  }
}
@media only screen and (min-width: 68.75em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 7rem !important;
  }
}
@media only screen and (min-width: 71.875em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 10rem !important;
  }
}
@media only screen and (min-width: 75em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 3rem !important;
  }
}
@media only screen and (min-width: 81.25em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 7rem !important;
  }
}
@media only screen and (min-width: 87.5em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 11rem !important;
  }
}
@media only screen and (min-width: 93.75em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 15rem !important;
  }
}
@media only screen and (min-width: 100em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 19rem !important;
  }
}
@media only screen and (min-width: 106.25em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 23rem !important;
  }
}
@media only screen and (min-width: 112.5em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 27rem !important;
  }
}
@media only screen and (min-width: 118.75em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 32rem !important;
  }
}
@media only screen and (min-width: 125em) {
  .formGroup.nameLabel.dobWrapper {
    margin-left: 35rem !important;
  }
}
.formInput {
  /*Font family & colour are set by the browser for form inputs */
  /*So we need to set them to inherit from the body element */
  font-family: inherit;
  color: inherit;
  /*Always when padding an element give it a bit more on the sides to look better */
  padding: 1.5rem 2rem;
  border-radius: 2px;
  background-color: rgba(242, 242, 242, 0.5);
  border: 1px solid #61E786;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(45, 23, 15, 0.15);
          box-shadow: 0 1.5rem 4rem rgba(45, 23, 15, 0.15);
  /*Add a transparent border at the bottom to match the border when the input is focussed */
  /*Otherwise the form elements will 'jump' when focus switches */
  border-bottom: 3px solid transparent;
  /*Full width on its own line */
  width: 90%;
  display: block;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.formInput:focus {
  /*Browser highlights a border (outline) around the input element when it has focus */
  /*We want to remove this */
  outline: none;
  /*This focus is important for ARIA, i.e. keyboard navigation */
  /*Always make form elements that are focussed visible */
  /*Give it a box shadow and a border at the bottom */
  -webkit-box-shadow: 0 1rem 2rem rgba(45, 23, 15, 0.1);
          box-shadow: 0 1rem 2rem rgba(45, 23, 15, 0.1);
  border-bottom: 3px solid #61E786;
  /*Apply this style when we have an invalid focussed input element */
}
.formInput:focus:invalid {
  border-bottom: 3px solid #50301D;
}
.formInput::-webkit-input-placeholder {
  /*Target the placeholder text */
  color: #999999;
}
.formInput:-ms-input-placeholder {
  /*Target the placeholder text */
  color: #999999;
}
.formInput::-ms-input-placeholder {
  /*Target the placeholder text */
  color: #999999;
}
.formInput::placeholder {
  /*Target the placeholder text */
  color: #999999;
}
.formLabel {
  font-weight: 700;
  /*Use 'block' so we can apply margins to the element */
  display: block;
  margin-left: 2rem;
  margin-top: 0.7rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.formInput.fadeInLabel:placeholder-shown + .formLabel {
  /*Use adjacent sibling selector '+' to choose a label which is next to an input element */
  /*If there were elements between the label and the input we would have to use the general sibling selector '~' */
  /*The sibling we want to select/use always has to be after the other element in the HTML */
  /*When the placeholder is shown -> these attributes are applied to the label */
  /*Once we start typing -> these attributes will not be applied and the label will appear */
  /*Using opacity since we want to animate the label disappearing */
  opacity: 0;
  /*Using visibility since we want the element to be gone from the page */
  visibility: hidden;
  /*Move the label down to the same position as the placeholder text - at the start of the animation */
  -webkit-transform: translateY(4.7rem);
          transform: translateY(4.7rem);
}
.formInputHelp {
  color: #808080;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}
.formInput.fadeInLabel:placeholder-shown > .formHelp {
  /*Use adjacent sibling selector '+' to choose a label which is next to an input element */
  /*If there were elements between the label and the input we would have to use the general sibling selector '~' */
  /*The sibling we want to select/use always has to be after the other element in the HTML */
  /*When the placeholder is shown -> these attributes are applied to the label */
  /*Once we start typing -> these attributes will not be applied and the label will appear */
  /*Using opacity since we want to animate the label disappearing */
  opacity: 0;
  /*Using visibility since we want the element to be gone from the page */
  visibility: hidden;
  /*Move the label down to the same position as the placeholder text - at the start of the animation */
  -webkit-transform: translateY(4.7rem);
          transform: translateY(4.7rem);
}
.formBlock:not(last-child) {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 37.5em) {
  .formBlock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-column-gap: 1rem;
            column-gap: 1rem;
  }
}

input:not([type="radio"]):required + label::after, select:required + label::after, .manyManyLabel.required::after {
  content: " *";
  color: #E84610;
}

#addClientForm, #editClientForm {
  margin-bottom: 2rem;
}
#addClientForm .formFields, #editClientForm .formFields {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media only screen and (min-width: 25em) {
  #addClientForm .formFields, #editClientForm .formFields {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #addClientForm .formFields .formGroup, #editClientForm .formFields .formGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
#addClientForm #id_pronoun, #editClientForm #id_pronoun {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}
#addClientForm #id_pronoun label, #editClientForm #id_pronoun label {
  margin-right: 3rem;
}

.chooseSessionRadio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0;
}
.chooseSessionRadioButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media only screen and (min-width: 50em) {
  .nameLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .nameLabel label {
    min-width: 10rem;
    font-weight: 600;
  }
}

.formFields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.formFields .formGroup {
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 25em) {
  .formFields .formGroup input:required + label, .formFields .formGroup select:required + label {
    /* Move the label on required input to the right */
    /* align them next to their input box */
    min-width: 15rem;
    text-align: right;
  }
}
.formFields .formGroup.wideData {
  width: 100%;
}
@media only screen and (min-width: 25em) {
  .formFields .formGroup.wideData {
    margin-left: unset;
    margin-right: unset;
  }
  .formFields .formGroup.wideData input:required {
    width: unset;
    -webkit-box-flex: 4;
        -ms-flex: 4;
            flex: 4;
  }
  .formFields .formGroup.wideData input:required + label {
    -webkit-box-flex: 1.5;
        -ms-flex: 1.5;
            flex: 1.5;
    min-width: unset;
  }
}
@media only screen and (min-width: 59.375em) {
  .formFields .formGroup.wideData {
    width: 70%;
  }
}
@media only screen and (min-width: 93.75em) {
  .formFields .formGroup.wideData {
    width: 50%;
  }
}
@media only screen and (min-width: 37.5em) {
  .formFields .formGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .formFields .formGroup:first-of-type {
    margin-top: 2rem;
  }
  .formFields .formGroup label:not(li > label) {
    font-weight: 600;
    margin-left: auto;
    /* fit-content, etc. Pushes the * onto a new line */
    /* 50% seems to work for some reason */
    width: 50%;
  }
}

#addUserForm .formFields {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#addUserForm .formGroup {
  margin-left: 0;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
#addUserForm .formGroup label {
  min-width: 12rem;
  width: unset;
  text-align: right;
}
@media only screen and (min-width: 25em) {
  #addUserForm .formGroup label {
    width: 12rem;
  }
}

.qLabel {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
}

@media only screen and (min-width: 37.5em) {
  #setHistorianForm .formGroup {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 59.375em) {
  #setHistorianForm .formGroup {
    width: 50%;
  }
}

@media only screen and (min-width: 25em) {
  .historyText .formLabel {
    min-width: 11rem;
    text-align: right;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }
}
@media only screen and (min-width: 37.5em) {
  .historyText .formLabel {
    -ms-flex-item-align: baseline;
        align-self: baseline;
  }
}

/*===== END  Form  ===== */
/*~~~~~~~  Button  ~~~~~~~ */
.btn {
  text-transform: uppercase;
  display: inline-block;
  padding: 1.5rem 4rem;
  border-radius: 10rem;
  background-color: #EDFFEC;
  color: #2D170F;
  border: 3px solid #2D170F;
  text-align: center;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.btn:hover {
  /* Make the button pop up => 3D effect */
  -webkit-transform: translateY(-0.5rem);
          transform: translateY(-0.5rem);
  /* Box Shadow X Y Blur Colour */
  -webkit-box-shadow: 0 1rem 2rem rgba(34, 34, 34, 0.2);
          box-shadow: 0 1rem 2rem rgba(34, 34, 34, 0.2);
}
.btn:active {
  color: #0380CA;
  background-color: #2D170F;
  /* Make the button appear to be pressed => 3D effect */
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
  /* Box Shadow X Y Blur Colour */
  -webkit-box-shadow: 0 1rem 2rem rgba(34, 34, 34, 0.2);
          box-shadow: 0 1rem 2rem rgba(34, 34, 34, 0.2);
}
.btn:not(:last-child) {
  margin-right: 1.5rem;
}
.btnMain {
  background-color: #50301D;
  color: #EDFFEC;
}
.btnMain:hover {
  background-color: #EDFFEC;
  color: #0d3147;
}
.btnMain:active {
  background-color: #2D170F;
  color: #61E786;
}
.btnGhost {
  background-color: #F2F2F2;
  border-color: #50301D;
  color: #2D170F;
}
.btnGhost:hover {
  color: #50301D;
  background-color: #EDFFEC;
}
.btnGhost:active {
  color: #EDFFEC;
}
.btnTextOnly {
  border: none;
  background-color: transparent;
}
.btnTextOnly:hover, .btnTextOnly:active {
  background-color: #EDFFEC;
  color: #1A628D;
}
.btnDanger {
  background-color: #E84610;
  color: #50301D;
}
.btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 4.5rem;
}
@media only screen and (min-width: 37.5em) {
  .btnGroup.largeRow {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 37.5em) {
  .btnGroup {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
.btnGroup input:not(:last-child), .btnGroup a:not(:last-child) {
  margin-bottom: 1.5rem;
}
.btnGroup input[type="reset"] {
  /*"Reset Form" text seems to be slightly to the right of centre */
  /*So shift it to bring it back to centre-line */
  margin-right: 2rem;
}
.btnFilter {
  text-decoration: none;
  text-align: center;
  color: #0380CA;
  background-color: #50301D;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border: 1px solid #2D170F;
  border-radius: 0;
  font-weight: 700;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  -webkit-text-decoration: 1px 1px 1px #0380CA;
          text-decoration: 1px 1px 1px #0380CA;
}
.btnFilter:hover {
  background-color: #EDFFEC;
}
.btnFilterActive {
  background-color: #61E786;
  color: #2D170F;
}
.btnFilterGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1rem;
  gap: 1.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.btnScroll {
  height: 42px;
  width: 42px;
  position: fixed;
  right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  border: 3px solid #2D170F;
  border-radius: 50%;
  color: #2D170F;
  -webkit-box-shadow: 0 0.125rem 0.125rem rgba(34, 34, 34, 0.075);
          box-shadow: 0 0.125rem 0.125rem rgba(34, 34, 34, 0.075);
}
.btnScroll:hover {
  background-color: #61E786;
}
.btnScroll a {
  cursor: pointer;
}
.btnScroll a span {
  margin: auto;
}
.btnScrollUp {
  bottom: 60px;
}
.btnScrollDown {
  bottom: 10px;
}
.btnScrollTop {
  bottom: 110px;
}
.btnPrint {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.btnPrint button:hover {
  background-color: #EDFFEC;
  color: #0d3147;
}
.btnPrint button:active {
  color: #2D170F;
  background-color: #61E786;
}

.blankIconButton {
  height: 27.2px;
  width: 27.6px;
  border: 1px solid #F2F2F2;
  background-color: #F2F2F2;
}

.clientPick {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.allClients {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  margin-left: auto;
  margin-right: auto !important;
}

button.clientPick, .scoreAction {
  background-color: #0380CA;
  color: #EDFFEC;
}
button.clientPick:hover, .scoreAction:hover {
  background-color: #50301D;
  color: #61E786;
}

.resetPasswordButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 2rem;
}

/*===== END Button  ===== */
/*~~~~~~~  Message  ~~~~~~~ */
.message {
  padding: 1rem 0rem 1rem 3rem;
  color: #50301D;
  text-align: center;
  margin-bottom: 1rem;
}
.message span.name {
  font-weight: 700;
}
.messages {
  margin: 0 1rem 2rem 1rem;
}

.msg-warning {
  border: 1px solid #F5853F;
  background-color: #F5853F;
  color: #222222;
}

.msg-success {
  background-color: #C4EBC8;
  color: #50301D;
}

/*===== END  Message  ===== */
/*~~~~~~~  Many-to-many components  ~~~~~~~ */
.manyManyCheck {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.manyManyCheck label {
  margin-left: 1rem !important;
}
.manyMany.formGroup {
  margin-left: 2rem;
  margin-right: 2rem;
}
@media only screen and (min-width: 25em) {
  .manyMany.formGroup {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .manyMany.formGroup > div {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 45%;
            flex: 1 1 45%;
  }
}
@media only screen and (min-width: 25em) and (min-width: 59.375em) {
  .manyMany.formGroup > div {
    -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
  }
}
@media only screen and (min-width: 25em) and (min-width: 93.75em) {
  .manyMany.formGroup > div {
    -ms-flex-preferred-size: 22%;
        flex-basis: 22%;
  }
}

h2.manyManyLabel {
  margin-top: 2.6rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 50em) {
  h2.manyManyLabel {
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}

/*===== END  Many-to-many components  ===== */
/*~~~~~~~  Table  ~~~~~~~ */
.handlTable {
  border: 1px solid #50301D;
  margin: 1rem auto 2rem auto;
  width: calc(100% - 32px);
  border-collapse: collapse;
}
.handlTable .rightPad {
  padding-right: 1rem;
}
.handlTable thead tr {
  border-bottom: 2px solid #222222;
  background-color: #f4f2f2;
}
.handlTable thead tr th {
  font-size: 110%;
  font-weight: 900;
}
@media only screen and (min-width: 37.5em) {
  .handlTable {
    max-width: 70rem;
  }
}
.handlRow:nth-child(odd) {
  background-color: #61E786;
}
.handlRow:hover {
  background-color: #1A628D;
  color: #EDFFEC;
}
.handlRow:hover .formRadioButton {
  border-color: #EDFFEC;
}
.handlLabel {
  padding-left: 2rem;
  padding-right: 1rem;
  font-style: italic;
}
.handlData {
  font-weight: 700;
}
.handlCentre {
  text-align: center;
}
.handlActions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 1rem;
}
.handlActions a {
  height: 4rem;
  width: 3.5em;
}

.editAction {
  background-color: #EDFFEC;
}

.deleteAction {
  background-color: #E84610;
}

.scoreTopic {
  font-size: 1.8rem;
  font-weight: 500;
  background-color: #0380CA;
}
.scoreTopicLabel {
  padding: 0.5rem 1rem;
}
.scoreClient {
  font-weight: 600;
}

.clientList {
  max-height: 60vh;
  overflow-y: auto;
}
.clientListName {
  min-width: 14rem;
}
.clientListDOB {
  min-width: 7rem;
}

.viewAppraisalTable {
  max-width: 52rem;
}

#unscoredAppraisalsTable td {
  text-align: center;
}
#unscoredAppraisalsTable td.handlActions a:first-child {
  color: #50301D;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#unscoredAppraisalsTable td.handlActions a:first-child:hover {
  color: #EDFFEC;
}
#unscoredAppraisalsTable th.topicListData {
  padding-left: 4px;
  padding-right: 4px;
}

#topicListTable {
  width: 40rem;
}

#academicPerformanceTable tbody > tr > td {
  height: 4rem;
}
#academicPerformanceTable thead th {
  font-size: 100%;
}
@media only screen and (min-width: 25em) {
  #academicPerformanceTable thead th {
    font-size: 110%;
  }
}

.questionTable .handlLabel {
  font-size: 1.25rem;
}
@media only screen and (min-width: 28em) {
  .questionTable .handlLabel {
    font-size: 1.6rem;
  }
}

/*===== END  Table  ===== */
/*~~~~~~~  Appraisal Detail  ~~~~~~~ */
.appraisalInfo {
  margin: 0 auto;
}
@media only screen and (min-width: 50em) {
  .appraisalInfo {
    width: 90%;
  }
}
@media only screen and (min-width: 59.375em) {
  .appraisalInfo {
    width: 80%;
  }
}
@media only screen and (min-width: 93.75em) {
  .appraisalInfo {
    width: 70%;
  }
}
.appraisalDetail {
  margin-bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.appraisalDate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 1.5rem;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
  width: 100%;
}
.appraisalClient {
  font-size: 2.5rem;
  font-weight: 300;
  text-align: center;
  margin-top: 1.5rem;
}

.appraiserDetail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/*===== END  Appraisal Detail  ===== */
/*~~~~~~~  Chart  ~~~~~~~ */
[data-chart] {
  display: none;
}

@media only screen and (min-width: 25em) {
  #chartContainer {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 37.5em) {
  #chartContainer {
    font-size: 1.8rem;
  }
}
#chartContainer .appraisalDate {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

@media only screen and (min-width: 59.375em) {
  #chart {
    max-width: calc(100% - 50px);
  }
}
@media only screen and (min-width: 75em) {
  #chart {
    max-width: calc(100% - 100px);
  }
}

.apexcharts-datalabels.apexcharts-hidden-element-shown g text {
  font-size: 1.4rem;
}

/*===== END  Chart  ===== */
/*~~~~~~~  Radio Button  ~~~~~~~ */
.formRadioInput {
  display: none;
}
.formRadioLabel {
  position: relative;
  cursor: pointer;
  /*Make room for our custom button */
  padding-left: 4.5rem;
}
.formRadioLabelGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding-left: 4rem;
}
.formRadioLabelCourse {
  margin-right: 1.5rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.formRadioLabelDates {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.formRadioButton {
  height: 3rem;
  width: 3rem;
  border: 5px solid #1A628D;
  border-radius: 50%;
  /*The above attributes only work on block elements */
  /*Make it inline-block so they are on the same line as their label */
  display: inline-block;
  position: absolute;
  left: 0;
}
.chooseCourseRadio .formRadioButton {
  /*Align the Select Course radio buttons */
  top: 3.6rem;
}
.formRadioButton::after {
  /*The inner 'dot' of the selected radio button */
  content: "";
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #50301D;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.formRadioInput:checked + .formRadioLabel .formRadioButton::after {
  /*For a checked (selected) RadioInput, get the next sibling RadioLabel, */
  /*then get the RadioLabels RadioButton child and select the RadioButton's ::after pseudo class */
  opacity: 1;
}

/*===== END  Radio Button  ===== */
/*~~~~~~~  Breadcrumb navigation  ~~~~~~~ */
.breadcrumbNavigation {
  -ms-flex-item-align: start;
      align-self: start;
  margin-bottom: 1rem;
}
.breadcrumbCurrent {
  background-color: #2D170F;
  color: #EDFFEC;
}

/*===== END  Breadcrumb navigation  ===== */
/*~~~~~~~  Dropdown Menu  ~~~~~~~ */
li.navigationItem {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

/* HTML Nav Styles */
.menuitem {
  cursor: pointer;
  z-index: 40;
  list-style: none;
}

menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
menu.headMenu {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
menu.headMenu > .menuitem > a {
  padding-left: 0;
}
menu .menuitem a {
  white-space: nowrap;
  display: block;
}

/*	this is the initial state of all subMenus.
 * we set it to max-height: 0, and hide the overflowed content. */
.subMenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  background-color: #124462;
  margin-top: 1rem;
}
@media only screen and (min-width: 50em) {
  .subMenu {
    /*	Ensure the subMenu is above the rest of the page */
    position: absolute;
    z-index: 50;
    margin-top: 0;
  }
}
.subMenu > .menuitem > a {
  border-top: 1px solid #1A628D;
  border-bottom: 1px solid #02080c;
}
@media only screen and (min-width: 50em) {
  .subMenu > .menuitem > a {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 0.5rem;
  }
}
.subMenu > .menuitem > a:hover {
  background-color: #2280b8;
  border: 1px solid #1A628D;
}
#accountOptions + .subMenu {
  max-width: 12.3rem;
}
@media only screen and (min-width: 50em) {
  #accountOptions + .subMenu {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
}
#accountOptions + .subMenu a {
  font-size: 1.2rem;
  padding-left: 0.5rem;
}
@media only screen and (min-width: 50em) {
  #accountOptions + .subMenu a {
    font-size: 1.7rem;
  }
}

.mainMenu {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #EDFFEC;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #EDFFEC 50%);
  /*Increasing the background shoves the RHS of the linear gradient off the element, so it is invisible */
  background-size: 235%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  /* Need a bottom margin otherwise the menu is written
   * on top of the rest of the page */
}
.mainMenu.navigationActive {
  color: #50301D;
}
.mainMenu .subMenu {
  text-transform: none;
}
@media only screen and (min-width: 50em) {
  .mainMenu {
    font-size: 1.8rem;
    -webkit-transform: none;
            transform: none;
  }
}
.mainMenu:hover, .mainMenu:active {
  background-position: 100%;
  color: #1A628D;
  -webkit-transform: translateX(1rem);
          transform: translateX(1rem);
}
@media only screen and (min-width: 50em) {
  .mainMenu {
    /*	Showing the submenu shoves the rest of the page down
     * So remove the bottom margin on the main menu to counter-act this */
  }
  .mainMenu:hover {
    margin-bottom: 0;
  }
}

/*	when hovering over a .mainMenu item,
 * display the subMenu below it.
 * we're changing the subMenu's max-height from 0 to 200px; */
.mainMenu .menuitem:hover .subMenu {
  /*	In the mobile view we want the "appearing" submenu to
   * shove the other main menu items down */
  display: block;
  max-height: 200px;
  width: auto;
  /*	In the desktop view we want the "appearing" submenu to
   * overlap the existing page items and not shove anything down */
}
@media only screen and (min-width: 50em) {
  .mainMenu .menuitem:hover .subMenu {
    position: absolute;
    max-height: unset;
  }
}

menu a {
  color: #EDFFEC;
  min-width: 9rem;
  -webkit-transition: background 0.5s, color 0.5s, -webkit-transform 0.5s;
  transition: background 0.5s, color 0.5s, -webkit-transform 0.5s;
  transition: background 0.5s, color 0.5s, transform 0.5s;
  transition: background 0.5s, color 0.5s, transform 0.5s, -webkit-transform 0.5s;
  margin: 0;
  text-align: left;
  padding-left: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  border-radius: 3px;
}

.mainMenu > .menuitem {
  position: relative;
}
.mainMenu > .menuitem > .subMenu {
  width: 0;
}

.dropMenu:has(.subMenu) > .menuitem::after {
  /* Place an arrow beside the mainMenu text */
  content: "";
  position: absolute;
  /* Show an arrow in desktop view */
  width: 0;
  height: 0;
  border: 8.5px solid transparent;
  border-top: 10px solid #50301D;
  top: 1rem;
  right: -2rem;
  /*	Show the arrow on top of the subMenu */
  z-index: 55;
}
.dropMenu:has(.subMenu) > .menuitem > .navigationLink {
  /*	Since touch devices do not have a "hover" event
   * We need to click on the label to open the submenu
   * However this will activate the link and the user will never see the subMenu
   * We need to disable the pointer on the label in mobile view.
   * The parent menu is still clickable and will show the subMenu, but the anchor will not be activated. */
  pointer-events: none;
}
@media only screen and (min-width: 50em) {
  .dropMenu:has(.subMenu) > .menuitem > .navigationLink {
    /* Re-enable the anchor for non-touch screens */
    pointer-events: auto;
  }
}
.dropMenuTopLink {
  text-align: center;
  /*	Since touch devices do not have a "hover" event
   * We need to click on the label to open the submenu
   * However this will activate the link and the user will never see the subMenu
   * We need to disable the pointer on the anchor in mobile view.
   * The parent menu is still clickable and will show the subMenu, but the anchor will not be activated. */
  pointer-events: none;
}
@media only screen and (min-width: 50em) {
  .dropMenuTopLink {
    /* Re-enable the anchor for non-touch screens */
    pointer-events: auto;
  }
}

/* For "search" & "My Account" dropdown */
.headMenu > .menuitem > menu > .menuitem {
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0;
}

.headMenu > .menuitem.hover > menu > .menuitem {
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 1;
}

/*	Special styling to show the User name */
#userName {
  text-transform: uppercase;
  background-color: #EDFFEC;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*===== END Dropdown Menu   ===== */
/*~~~~~~~  Checkbox  ~~~~~~~ */
.newCourseCheckbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 37.5em) {
  .newCourseCheckbox {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.fancyCheckbox {
  display: none;
}
.fancyCheckboxLabel {
  top: 50%;
  right: 0;
  left: 0;
  width: 3.5rem;
  height: 3.5rem;
  background-color: #f72414;
  -webkit-transform: translateY(-15%);
          transform: translateY(-15%);
  border-radius: 50%;
  -webkit-box-shadow: 0 7px 10px #ffbeb8;
          box-shadow: 0 7px 10px #ffbeb8;
  cursor: pointer;
  -webkit-transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
  transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
  overflow: hidden;
  z-index: 1;
  border: 2px solid rgba(0, 0, 0, 0.44);
}
.fancyCheckboxLabel:before {
  /* White inner circle */
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  background-color: #fff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
  -webkit-box-shadow: inset 0 7px 10px #ffbeb8;
          box-shadow: inset 0 7px 10px #ffbeb8;
  -webkit-transition: 0.2s ease width, 0.2s ease height;
  transition: 0.2s ease width, 0.2s ease height;
  border: 1px solid black;
}
.fancyCheckboxLabel:hover:before {
  width: 2.1875rem;
  height: 2.1875rem;
  -webkit-box-shadow: inset 0 7px 10px #ff9d96;
          box-shadow: inset 0 7px 10px #ff9d96;
}
.fancyCheckboxLabel:active {
  -webkit-transform: translateY(-50%) scale(0.9);
          transform: translateY(-50%) scale(0.9);
}
.fancyCheckbox:checked + label {
  background-color: #07d410;
  -webkit-box-shadow: 0 7px 10px #92ff97;
          box-shadow: 0 7px 10px #92ff97;
}
.fancyCheckbox:checked + label:before {
  width: 0;
  height: 0;
}
.fancyCheckbox:checked + label .tickMark:before, .fancyCheckbox:checked + label .tickMark:after {
  -webkit-transform: translate(0);
          transform: translate(0);
  opacity: 1;
}
.fancyCheckboxText {
  font-size: 125%;
}

.tickMark {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  width: 2.625rem;
  height: 2.625rem;
  margin: 0 auto;
  margin-left: 1.225rem;
  -webkit-transform: rotateZ(-40deg);
          transform: rotateZ(-40deg);
}
.tickMark:before, .tickMark:after {
  content: "";
  position: absolute;
  background-color: #F2F2F2;
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: 0.2s ease transform, 0.2s ease opacity;
  transition: 0.2s ease transform, 0.2s ease opacity;
}
.tickMark:before {
  /* Left side of tick mark (short) */
  left: -0.7rem;
  bottom: 0.7rem;
  width: 0.7rem;
  height: 1.75rem;
  -webkit-box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
          box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
}
.tickMark:after {
  /* Right side of tick mark (long) */
  left: -0.7rem;
  bottom: 0.7rem;
  width: 100%;
  height: 0.7rem;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
          box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
}

/*===== END  Checkbox  ===== */
/*~~~~~~~  Range Slider  ~~~~~~~ */
.slider {
  width: 100%;
}
.sliderWrapper {
  -webkit-filter: Saturate(0.35);
          filter: Saturate(0.35);
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
  width: 100%;
  color: #222222;
}
.sliderWrapper:focus-within, .sliderWrapper:hover {
  -webkit-filter: Saturate(1);
          filter: Saturate(1);
}
.sliderRange {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

input[type='range'] {
  place-self: center;
  min-width: 8em;
  width: calc(100% - 1.5em);
  height: 2.5em;
  max-width: 100%;
  border-radius: 1.25em;
  -webkit-box-shadow: 0 0 0 #50301D, 0 -1px 1px #5b5b5b, 0 1px 1px #6c6c6c;
          box-shadow: 0 0 0 #50301D, 0 -1px 1px #5b5b5b, 0 1px 1px #6c6c6c;
  background: -webkit-gradient(linear, left top, left bottom, from(#61E786), to(#19a33f));
  background: linear-gradient(#61E786, #19a33f);
  cursor: pointer;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']:hover {
  -webkit-box-shadow: 0 0 10px #50301D, 0 -1px 1px #5b5b5b, 0 1px 1px #6c6c6c;
          box-shadow: 0 0 10px #50301D, 0 -1px 1px #5b5b5b, 0 1px 1px #6c6c6c;
}
input[type='range']::-webkit-slider-container {
  -webkit-user-modify: read-write !important;
  margin: 0.5em;
  height: calc(100% - 2*0.5em);
  border-radius: 0.75em;
  -webkit-box-shadow: 0 1px 1px #50301D;
          box-shadow: 0 1px 1px #50301D;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d3147), color-stop(20%, #0b2b3e), to(#0380CA));
  background: linear-gradient(#0d3147, #0b2b3e 20%, #0380CA);
}
input[type='range']::-webkit-slider-runnable-track {
  margin: calc(-1*0.5em);
}
input[type='range']::-moz-range-track {
  margin: 0.5em;
  height: calc(100% - 2*0.5em);
  border-radius: 0.75em;
  box-shadow: 0 1px 1px #50301D;
  background: linear-gradient(#0d3147, #0b2b3e 20%, #0380CA);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1.5px transparent;
  width: 1.75em;
  height: 1.75em;
  -webkit-box-shadow: 0 1px 2px #50301D;
          box-shadow: 0 1px 2px #50301D;
  background: repeating-conic-gradient(#F2F2F2, #999999, #F2F2F2 25%) padding-box, -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#4f4f4f)) border-box, repeating-conic-gradient(#F2F2F2, #999999, #F2F2F2 25%) border-box;
  background: repeating-conic-gradient(#F2F2F2, #999999, #F2F2F2 25%) padding-box, linear-gradient(#F2F2F2, #4f4f4f) border-box, repeating-conic-gradient(#F2F2F2, #999999, #F2F2F2 25%) border-box;
  background-blend-mode: normal, multiply;
  cursor: ew-resize;
  border-radius: 1.25em;
}
input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  border: solid 1.5px transparent;
  width: 1.75em;
  height: 1.75em;
  box-shadow: 0 1px 2px #50301D;
  background: repeating-conic-gradient(#F2F2F2, #999999, #F2F2F2 25%) padding-box, linear-gradient(#F2F2F2, #4f4f4f) border-box, repeating-conic-gradient(#F2F2F2, #999999, #F2F2F2 25%) border-box;
  background-blend-mode: normal, multiply;
  cursor: ew-resize;
  border-radius: 1.25em;
}
input[type='range']:focus {
  outline: none;
}

/*===== END  Range Slider  ===== */
/*~~~~~~~  View History  ~~~~~~~ */
section[class$="Info"] div.recorderDetail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 2rem;
}

/*===== END  View History  ===== */
/* History */
.historyHint {
  font-size: 1.2rem;
  width: 60rem;
}

/* END  History */
/*~~~~~~~  Login  ~~~~~~~ */
.login p {
  margin-bottom: 1rem;
  text-align: center;
}
.loginText {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}
.loginForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.loginRemember {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.loginRemember input[type="checkbox"] {
  /*Layout the "Remember Me" checkbox */
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}

.btnLogin {
  margin-top: 2rem;
}

.logout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.logout h3 {
  margin-bottom: 2rem;
}

.signIn p:not(:last-child) {
  margin-bottom: 1rem;
}

/*===== END  Login  ===== */
#ui-datepicker-div {
  /* Show above the Navbar */
  z-index: 25 !important;
}

/*~~~~~~~  404 Page  ~~~~~~~ */
.errorSection {
  background-color: #EDFFEC;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 75vh;
  padding: 3rem;
}
@media only screen and (min-width: 50em) {
  .errorSection {
    min-height: 63vh;
  }
}
@media only screen and (min-width: 59.375em) {
  .errorSection {
    min-height: 55vh;
  }
}
.error404 {
  font-size: 10rem;
  font-weight: 100;
  color: #50301D;
  margin: 5rem auto;
}
.errorSubtitle {
  color: #2D170F;
}

.errorText {
  color: #E84610;
}

/*===== END  404 Page  ===== */
/*~~~~~~~  Confirm Deletion Page  ~~~~~~~ */
.confirmHeader {
  text-align: center;
}

h1.confirmHeader {
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.deleteItem {
  color: #50301D;
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/*===== END  Confirm Deletion Page  ===== */
/*~~~~~~~  My Account Page  ~~~~~~~ */
#editUserContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 37.5em) {
  #editUserContainer .formGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #editUserContainer .formGroup:first-of-type {
    margin-top: 2rem;
  }
  #editUserContainer .formGroup label {
    min-width: 10rem;
    font-weight: 600;
  }
}

#editUserForm .formGroup input {
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 25em) {
  #editUserForm {
    max-width: 70%;
  }
}
@media only screen and (min-width: 37.5em) {
  #editUserForm {
    max-width: unset;
  }
}
#editUserForm h2 {
  margin-bottom: 1rem;
}

header:has(+ main > div#editUserContainer) .ui-icon-person, header:has(+ main > div#editUserContainer) .accountText {
  background-color: #61E786;
  color: #50301D;
}

/*===== END  My Account Page  ===== */
/*~~~~~~~  Add/Edit Client Page  ~~~~~~~ */
@media only screen and (min-width: 25em) {
  .nameGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media only screen and (min-width: 50em) {
  .nameGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 1rem;
    -webkit-column-gap: 5rem;
            column-gap: 5rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.nameLabel {
  margin-top: 2.4rem;
}
@media only screen and (min-width: 25em) {
  .nameLabel {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
  }
}
@media only screen and (min-width: 50em) {
  .nameLabel {
    margin-left: 0 !important;
  }
}
@media only screen and (min-width: 59.375em) {
  .nameLabel {
    margin-left: 5rem !important;
  }
}
@media only screen and (min-width: 75em) {
  .nameLabel {
    margin-left: auto !important;
  }
}

@media only screen and (min-width: 37.5em) {
  .gender {
    margin-right: 8%;
  }
}

#id_pronoun li {
  list-style: none;
}
@media only screen and (min-width: 50em) {
  #addClientForm #id_pronoun, #editClientForm #id_pronoun {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 25rem;
  }
}

@media only screen and (min-width: 25em) {
  .editDate {
    margin-top: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-column-gap: 5rem;
            column-gap: 5rem;
  }
}

.pronoun {
  margin-top: 2.4rem;
}
.pronoun ul {
  font-size: 1.4rem;
  gap: 0;
}
@media only screen and (min-width: 25em) {
  .pronoun ul {
    font-size: 1.6rem;
    gap: 2rem;
  }
}
.formFields .formGroup .pronounLabel {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-left: 0;
}
@media only screen and (min-width: 50em) {
  #addClientForm .formFields .pronoun, #editClientForm .formFields .pronoun {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

/*===== END  Add/Edit Client Page  ===== */
/*~~~~~~~  Choose Course Page  ~~~~~~~ */
.chooseCourseRadio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 59.375em) {
  .chooseCourseRadio {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-column-gap: 5rem;
            column-gap: 5rem;
  }
}
@media only screen and (min-width: 59.375em) {
  .chooseCourseRadio .formRadioGroup {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media only screen and (min-width: 25em) {
  .chooseCourseRadio .formRadioLabelDatesAppraisal {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 37.5em) {
  .chooseCourseRadio .formRadioLabelDatesAppraisal {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 59.375em) {
  .chooseCourseRadio .formRadioLabelDatesAppraisal {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 62.5em) {
  .chooseCourseRadio .formRadioLabelDatesAppraisal {
    font-size: 1.9rem;
  }
}
@media only screen and (min-width: 81.25em) {
  .chooseCourseRadio .formRadioLabelDatesAppraisal {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 93.75em) {
  .chooseCourseRadio .formRadioLabelDatesAppraisal {
    font-size: 2.3rem;
  }
}

/*===== END  Choose Course Page  ===== */
/*~~~~~~~  View History page  ~~~~~~~ */
.historyArea {
  padding: 1rem;
}
.historyArea hr {
  margin-top: 1rem;
}
.historyArea h2 {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 37.5em) {
  .historyArea {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 50em) {
  .historyArea {
    width: 70%;
  }
}
@media only screen and (min-width: 75em) {
  .historyArea {
    width: 60%;
  }
}
.historyText p {
  border: 1px solid #50301D;
  padding: 0.5rem 1rem;
  background-color: #EDFFEC;
}
.historyText h3 {
  margin-top: 1rem;
}
.historyChecked h3 {
  margin-top: 1.2rem;
}
.historyChecked ul {
  margin-left: 2rem;
}
.historyDate, .historyClient {
  text-align: center;
  margin-bottom: 1rem;
}
.historyClient {
  font-size: 2.7rem;
}

/*===== END  View History page  ===== */
/*~~~~~~~  Add Question Page  ~~~~~~~ */
.addQuestionTopic {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.addQuestionTopic #chooseQTopic {
  padding: 1.5rem 2rem;
  border: 1px solid #61E786;
  border-bottom: 3px solid transparent;
  border-radius: 2px;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(45, 23, 15, 0.15);
          box-shadow: 0 1.5rem 4rem rgba(45, 23, 15, 0.15);
  -webkit-transition: all 1s;
  transition: all 1s;
}
@media only screen and (min-width: 37.5em) {
  .addQuestionTopic label.formLabel {
    width: auto;
    margin-left: unset;
  }
}

/*===== END  Add Question Page  ===== */
.editQuestion .formGroup:first-child {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (min-width: 37.5em) {
  .editQuestion .formGroup:first-child label.formLabel {
    width: auto;
    margin-left: unset;
  }
}

/*~~~~~~~  List User Page  ~~~~~~~ */
#userListTable .handlLabel, #clientListTable .handlLabel {
  padding-left: 0;
}
@media only screen and (min-width: 25em) {
  #userListTable .handlLabel, #clientListTable .handlLabel {
    padding-left: 2rem;
  }
}
#userListTable .handlActions a, #clientListTable .handlActions a {
  width: 2em;
}
@media only screen and (min-width: 25em) {
  #userListTable .handlActions a, #clientListTable .handlActions a {
    width: 3.5em;
  }
}

/*===== END  List User Page  ===== */

/*# sourceMappingURL=style.css.map */